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

Related Posts:

  • Hosting Javascript GratisKenal dengan Javascript, ? Mungkin kenal ada juga yang baru kenalan seperti saya. Semuanya memang perlu belajar. Permasalahan uatama kalo blogging gratisan seperti kita akan Rempong alias susah kalo harus Meng-Hosting Javascr… Baca Selengkapnya
  • Efek Lipatan Di blog ( Page Pell / Page Curl )Efek Lipatan Di blog. Mungkin yang biasa mainan design grafis tidak lupa dengan yang namanya page Curl atau juga disebut page peel yang merupakan efek lipatan seperti kertas. Aksesories ini cukup ringan jika dipasang di blog … Baca Selengkapnya
  • Site Map … Baca Selengkapnya
  • Kamus Istilah Akuntansi Akuntansi merupakan seni pencatatan data keuangan. yang dimulai dari awal sampai akhir dimana datanya saling berkaitan. Dalam penanganan data keuangan terutama penggunaan program yang berorientasi komputer untuk data keuanga… Baca Selengkapnya
  • Membuat Link Bergoyang Beraneka ragam aksesories yang bisa kita terapkan untuk mempercantik blog tapi yang paling penting bahwa aksesiries itu harus lebih banyak mendatangkan kebaikan dari pada cuma menjeng doank. Dalam waktu ini pengen share meng… Baca Selengkapnya

1 komentar: