Script HTML Dropdown Menu dan Tabel Zebra

script HTML untuk membuat drop down menu adalah sebagai berikut :

<html>
<head>
<style>
#dropdownmenu {
  border: 0px;
  margin: 0px;
  padding: 0px 300px 0px 300px;
  font: 16px arial, verdana, sans-serif;
  width: auto;
}
#dropdownmenu ul {
  background: #333333;
  height: 35px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#dropdownmenu li {
  float: left;
  padding: 0px;
}
#dropdownmenu li a {
  background: #333333;
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 25px 0px 25px;
  text-align: center;
  text-decoration: none;
  color: #cccccc;
}
#dropdownmenu li a:hover,
#dropdownmenu ul li:hover a {
  background: #06C;
  text-decoration: none;
}
#dropdownmenu li ul {
  background: #333333;
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 150px;
}
#dropdownmenu li:hover ul {
  display: block;
}
#dropdownmenu li li {
  display: block;
  margin: 0px;
  padding: 0px;
  width: 150px;
}
#dropdownmenu li:hover li a {
  background: #333333;
}
#dropdownmenu li ul a {
  display: block;
  height: 35px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
}
#dropdownmenu li ul a:hover,
#dropdownmenu li ul li:hover a {
  background: #06C;
  text-decoration: none;
}
</style>
</head>
<body bgcolor="#CC3300">
<div id='dropdownmenu'>
<ul>
<li><a href='#'>Beranda</a>
<ul>
<li><a href='#'>Info</a></li>
<li><a href='#'>Profil</a></li>
<li><a href='#'>Dll</a></li>
</ul>
</li>

<li><a href='#'>Berita</a>

<ul>

<li><a href='#'>Sekilas</a></li>

<li><a href='#'>Umum</a></li>

</ul>

</li>

</ul>
</div>
</body>
</html>


hasilnya seperti ini :

 

 Dan untuk script HTML tabel zebra adalah seperti dibawah ini :

<html>

    <head> <title> -- Tabel Zebra -- </title>
        <style>
            #table
            {   font-family: Verdana, Geneva, sans-serif;
                font-size: 12px;
                width: 400px;
                text-align: center;
                border-collapse: collapse;
            }
            #table th
            {   font-size: 12px;
                font-weight: normal;
                padding: 5px;
                background: #c60;
                border-bottom: 1px solid #fff;
                color: #000;
            }
            #table td
            {   padding: 5px;
                background: #999;
                border-bottom: 1px solid #fff;
                color: #000;
            }
            #table tr:hover td
            {   background: #C03;
                color: #FFF;
            }
        </style>
    </head>
    <body>
    <table width="495" id="table">
        <thead>
        <tr>
          <th width="242">HEADER 1</th><th width="242">HEADER 2</th></tr>
        </thead>
        <tbody>
        <tr><td>konten 1 header 1</td><td>konten 1 header 2</td></tr>
        <tr><td>konten 2 header 1</td><td>konten 2 header 2</td></tr>
        <tr><td>konten 3 header 1</td><td>konten 3 header 2</td></tr>
        </tbody>
    </table>
    </body>
</html>

hasilnya seperti berikut :

Sekian tutorial untuk membuat dropdown menu dan tabel zebra dengan script html dan css, semoga berkenan :)

Read More

MEMBUAT WEBSITE DENGAN HOSTING DAN DOMAIN GRATIS !!

Tutorial membuat domain atau subdomain dengan hostingan gratis

1.       Masuk ke www.idhostnger.com

2.       Pilih order sekarang untuk membut akun hosting

 

3.       Isi form pendaftaran dengan benar

4.       Setelah selesai, aktifasi akun anda dengan email yang anda gunakan untuk mendaftar, dengan cara meng-klik tautan yang dikirimkan hostinger ke email anda

5.       Setelah akun anda aktif lanjutkan dengan membuat hosting anda

                                       

6.       Isi form pendaftaran,dan pilih subdomain/domain sesuai pilihan anda

7.       Setelah selesai dan tidak ada kesalahan,akun anda sudah siap dan sudah bisa anda kelola, tapi biasanya belum aktif dan akan aktif selama 1x24 jam atau lebih

Demikian cara membuat hosting dengan domain/subdomain dengan geratis, semoga berkenan J

Read More