Dasboard WebBook Design Operatining System Tutorial Blog

Menu Dengan Tag HTML Dasar & CSS

By  at 06.58    1 comment
Menu merupakan properti untuk memudahkan kita dalam mengankses data, sehingga data tertampil secara terstruktural. Banyak cara dalam pembuatan menu dari teknik dasar sampe yang mahir. Jika dilihat dari bentuk dan keunikan memang tidak ada habisnya.Pembuatan menu deri mula dengan tag HTML, CSS, java. dalam Kesempatan ini Koerniawan Blog Shere mengenai pembuatan dengan teknik sederhana yaitu dengan Tag Html( table + form ) serta menggunakan CSS
  • Menu dengan Tag Html ( Table + Form )
    • Sudah lihat Example Menu. Sederhana bukan tapi yang paling penting adalah fungsinya, jika Anda tertarik mencoba Silahkan baca lebih lanjut : Letakan Tag Dibawah ini diantara <Body> </Body> <img src="gambar.jpg" height="150" Width="1000">
    <form>
    <table width="100%" bgcolor="green">
    <tr>
    <td width="16%">
    <center>
    <a href="">Home</a></center></td>
    <td width="16%">
    <center>
    <select onChange="document.location.href=this.options[this.selectedIndex].value;">
    <option selected>Kejuruan
    <option value="alamat url">Management Informatika Komputer
    <option value="alamat url">Pendidikan Komputer Akuntansi
    <option value="alamat url">Pendidikan Inggirs & Komputer
    <option value="alamat url">Teknik Informatika Komputer
    </select></center></td>
    <td width="16%">
    <center>
    <select onChange="document.location.href=this.options[this.selectedIndex].value;">
    <option selected>Materi
    <option value="alamat url">Aplikasi Perkantoran
    <option value="alamat url">Komputer Programing
    <option value="alamat url">Internet Programing
    <option value="alamat url">Design Grafis
    </select></center></td>
    <td width="16%">
    <center>
    <a href="">Kampus</a></center></td>
    <td width="16%">
    <center>
    <a href="">Pendafaran Online</a></center></td>
    <td width="16%">
    <center>
    <a href="">Forum</a></center></td>
    </tr></table>
    </form>
  • Menu Dengan Tag CSS
    • Menu ini lebih menarik karena mempunyai keuntungan tampilan scrool otomatis. Jika tertarik mari kita lanjut Letakan Tag Berikut diantara <Head> </Head>
    <style type="text/css">
    ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    }
    ul li {
    display: block;
    position: relative;
    float: left;
    }
    li ul {
    display: none;
    }
    ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #2C5463;
    margin-left: 1px;
    white-space: nowrap;
    }
    ul li a:hover {
    background: #617F8A;
    }
    li:hover ul {
    display: block;
    position: absolute;
    }
    li:hover li {
    float: none;
    font-size: 11px; }
    li:hover a {
    background: #617F8A;
    }
    li:hover li a:hover {
    background: #95A9B1;
    }
    </style>

    Kemudian untuk penggunaan letakan Tag berikut diantara <Body> </Body>
    <img src="gambar.jpg" height="150" Width="1000">
    <ul id="menu">
    <li><a href="">Home</a></li>
    <li><a href="">Jurusan</a>
    <ul>
    <li><a href="">Management Informatika
    Komputer</a></li>
    <li><a href="">Pendidikan Komputer Akuntansi</a></li>
    <li><a href="">Pendidikan Inggris Komputer</a></li>
    <li><a href="">Teknik Informatika Komputer</a></li>
    </ul>
    </li>
    <li><a href="">Materi</a>
    <ul>
    <li><a href="">Aplikasi Perkantoran</a></li>
    <li><a href="">Komputer Programing</a></li>
    <li><a href="">Internet Programing</a></li>
    <li><a href="">Design Grafis</a></li>
    <li><a href="">Materi Teori</a></li>
    <li><a href="">Akuntansi Keuangan</a></li>
    <li><a href="">Hitung Dagang</a></li>
    </ul>
    </li>
    <li><a href="">Kampus</a></li>
    <li><a href="">Pendaftaran Online</a></li>
    <li><a href="">Forum</a></li>
    </ul>
Semoga Bermanfaat segala sesuatu butuh belajar dan belajar dari awal adalah guru yang paling sabar. Materi bisa di gunakan untuk materi online maupun ofline untuk pembelajaran materi tag HTML atau pun CSS. Jika Anda berminat mendapatkan file secara lengkap sebagai bagan pembelajaran berikut link yang bisa digunakan

1 komentar: