Latihan 9 - Tampilan Menu

Selamat pagi kawan sekalian. Masih semangatkah hari ini.? semoga semua masih semangat untuk membaca dan mencari ilmu.
Oke seperti biasa pada latihan kali ini kita akan membahas tentang sebuah menu, kawan pasti tahu kan bagai mana sebuah tampilan menu, dengan menu yang baik maka Web kita akan terlihat semakin menarik dan mudah dimengerti.

Mari kita coba Script di bawah ini.

• Membuat sebuah folder dimana nanti file - file disimpan, sehingga mudah untuk digunakan kembali.
• Contoh : D://web/belajar_html/
• Buatlah file menggunakan Notepad dengan nama "index.html" yang berisi:

index.html

 
<frameset rows="15%,*,10%">
   <frame src="header.html" name="header">
   <frameset cols="20%,*">
      <frame src="menu.html" name="left">
      <frame src="" name="right">
   </frameset>
   <frame src="footer.html" name="bottom">
</frameset>

Dari Script diatas mari kita bahas beberapa Poin yang penting:

1. Nama "index.html" merupakan sebuah nama Default untuk halamat awal dari sebuah Web.
2. Tag <frameset> merupakan Tag lama yang digunakan untuk membuat menu, namun pada HTML5 Tag <frameset> dan <frame> sudah tidak digunakan karena ada cara lain yang lebih mudah dengan bantuan Plugin lain.
3. Penggunaan Tag <frameset> digunakan untuk dipelajari saja bahwa terdapat Logika yang dapat digunakan untuk membuat Link menu halaman itu sendiri.

Setelah selesai dan memahami Script pada "index.html" mari kita lanjutkan menuju script berikutnya.

• Membuat sebuah folder dimana nanti file - file disimpan, sehingga mudah untuk digunakan kembali.
• Contoh : D://web/belajar_html/
• Buatlah file menggunakan Notepad dengan nama "menu.html" yang berisi:

menu.html

   
<h4>Menu Kawan</h4>
<ul>
   <li><a href="latihan_1a.html" target="right">Latihan 1</a></li>
   <li><a href="latihan_2a.html" target="right">Latihan 2</a></li>
   <li><a href="latihan_3a.html" target="right">Latihan 3</a></li>
</ul>

Dari Script diatas mari kita bahas beberapa Poin yang penting:

1. Tujuan dari menu adalah untuk memudahkan, maka bila kawan sekalian menyimpan data dalam folder yang sama akan terasa lebih mudah untuk digunakan.
2. Attribut "target" merupakan tujuan dari link tersebut, disini kita menggunakan "right" karna dalam file "index.html" kita telah membuat tempat untuk menampilkan data dengan nama "right"

oke selanjutnya adalah membuat tampilan untuk Header terlebih dahulu. mari kita mulai dengan Script di bawah ini.

• Membuat sebuah folder dimana nanti file - file disimpan, sehingga mudah untuk digunakan kembali.
• Contoh : D://web/belajar_html/
• Buatlah file menggunakan Notepad dengan nama "header.html" yang berisi:

header.html

    
<h3> Judul Web Kawan </h3>
<p> Deskripsi Web Kawan Sekalian, secara ringkas saja.</p>

• Masih di dalam folder D://web/belajar_html/
• Buatlah file menggunakan Notepad dengan nama "footer.html" yang berisi:

footer.html

 
   
<style>
   body{
      margin-top: 0;
   }
   .bagitiga{
      width: 32%;
      height: 100%;
      position: relative;
      display: inline-block;
      margin: 0;
      margin-right: 5px;
      padding: 0;
   }
</style>

<div class="bagitiga">
   <h3>Terima Kasih</h3>
   <p class="justify">Kami mengucapkan banyak banyak terima kasih Kepada kawan sekalian.</p>
</div>
<div class="bagitiga">
   <h3>Hubungi Kami Di</h3>
   <p class="justify">Masukan kontak, alamat atau facebook sesuai kebutuhan kawan-kawan.</p>
</div>
<div class="bagitiga">
   <h3>Supported By</h3>
   <p class="justify">Basic Web Programing dan Kawan Sekalian diseluruh dunia Real/Maya.</p>
</div>

Hasil dari Semua Script

Demikian pertemuan kita, bila ada yang ditanyakan, saran, kritik bisa hubungi saya melalui kolom komentar, semoga pembahasan tadi menjadi ilmu yang bermanfaat bagi kawan sekalian.
Terimakasih dan sampai berjumpa kembali di pertemuan berikutnya.

b4ug02wp