1. index.html
2. produk.html
3. kontak.html
4. about.html
5. style.css
Berkas index.html berisi kode sebagai berikut:
Home
<ul>
<li><a id="indexmenu" href="index.html">HOME</a></li>
<li><a id="produkmenu" href="produk.html">PRODUK</a></li>
<li><a id="kontakmenu" href="kontak.html">CONTACT US</a></li>
<li><a id="aboutmenu" href="about.html">ABOUT</a></li>
</ul>
Berkas produk.html berisi kode sebagai berikut:
<ul>
<li><a id="indexmenu" href="index.html">HOME</a></li>
<li><a id="produkmenu" href="produk.html">PRODUK</a></li>
<li><a id="kontakmenu" href="kontak.html">CONTACT US</a></li>
<li><a id="aboutmenu" href="about.html">ABOUT</a></li>
</ul>
Berkas kontak.html berisi kode sebagai berikut:
<html>
<head>
<title>Kontak</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body id="kontak">
<ul>
<li><a href="index.html" id="indexmenu">HOME</a></li>
<li><a href="produk.html" id="produkmenu">PRODUK</a></li>
<li><a href="kontak.html" id="kontakmenu">CONTACT US</a></li>
<li><a href="about.html" id="aboutmenu">ABOUT</a></li>
</ul>
</body>
</html>
Berkas about.html berisi kode sebagai berikut :
<html>
<head>
<title>About</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body id="about">
<ul>
<li><a href="index.html" id="indexmenu">HOME</a></li>
<li><a href="produk.html" id="produkmenu">PRODUK</a></li>
<li><a href="kontak.html" id="kontakmenu">CONTACT US</a></li>
<li><a href="about.html" id="aboutmenu">ABOUT</a></li>
</ul>
</body>
</html>
Adapun style.css berisi kode berikut :
body {padding:20px auto}
ul {padding:20px;font-family:verdana;font-size:12px;}
li {display:inline;margin:10px;padding:0;}
ul a {padding:10px;text-decoration:none}
body#index a#indexmenu,
body#produk a#produkmenu,
body#kontak a#kontakmenu,
body#about a#aboutmenu {
color: #000000;
background: #ffcc00;
}
Sekilas semua file html terlihat sama kodenya, namun ada satu elemen berbeda yang berperan penting yaitu pada tag yang tiap file mempunyai id berbeda. Id pada tag disesuaikan dengan id pada setiap link yang merujuk kepada file yang bersangkutan. Id ini didefinisikan dan diidentifikasikan di file css.
Simpan semua file tersebut dalam satu directory atau folder yang sama, kemudian jalankan salah satu file html. Akan ditampilkan sebuah menu dengan empat link dengan salah satu link dalam keadaan tersorot, yang menandakan bahwa link tersebut sedang aktif. Demikian pula jika setiap link tersebut diklik.
Contoh di atas merupakan dasar yang dapat dikembangkan untuk diimplementasikan pada suatu web dengan jumlah halaman atau kategori yang banyak yang fungsinya adalah untuk memudahkan navigasi kepada pengunjung sehingga mereka tidak perlu untuk mengklik link halaman yang sebenarnya sedang terbuka atau aktif.
EmoticonEmoticon