Tutorial ini lanjutan dari tutorial :
Cara buat file html layout
Sekarang saya akan mengajak anda membuat tutorial menu navigasi di bawah header.
Seperti biasa copy pastekan kode HTML di bawah ini ke notepad anda :
<html>
<head>
<title>Membuat Menu Navigasi</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="container">
<div id="menu">
<a href="#">HOME</a>
<a href="#">MENU</a>
<a href="#">MENU2</a>
<a href="#">MENU3</a>
</div>
</div>
</body>
</html>
<head>
<title>Membuat Menu Navigasi</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="container">
<div id="menu">
<a href="#">HOME</a>
<a href="#">MENU</a>
<a href="#">MENU2</a>
<a href="#">MENU3</a>
</div>
</div>
</body>
</html>
Keterangan : Kode tersebut saya ambil hanya bagian menu navigasi saja dari file HTML layout website yang nantinya bisa di gabung lagi sehingga bisa membentuk sebagai website utuh.
Disini saya hanya menambahkan navigasi mulai Home sampai dengan MENU3, anda bisa merubah sesuai dengan keinginan anda sendiri dan saya sudah memberikan link yang isinya hanya tanda “#” nanti nya anda tinggal menggati dengan url link anda sendiri.
Sekarang kita membuat file CSS untuk menu navigasi nya.
Di bawah ini adalah file CSS nya :
#container { width:1000px; margin:0 auto; font-family: verdana;
}
#menu { background-color:#993300; width:1000px; text-align:center; padding-top:10px; padding-bottom:10px;
}
a :link { background-color:#FFFF00; color:#000099; text-decoration:none; font-size:14px;
}
a :hover { background-color:#0000CC; color:#FFFFFF; font-weight:bold; text-decoration:underline; font-size:16px;
}
a :active { color:#000000; background-color:#FFFFFF; font-weight:100;
}
}
#menu { background-color:#993300; width:1000px; text-align:center; padding-top:10px; padding-bottom:10px;
}
a :link { background-color:#FFFF00; color:#000099; text-decoration:none; font-size:14px;
}
a :hover { background-color:#0000CC; color:#FFFFFF; font-weight:bold; text-decoration:underline; font-size:16px;
}
a :active { color:#000000; background-color:#FFFFFF; font-weight:100;
}
Keterangan :
#container {…} seperti biasanya saya membuat page dengan lebar 1.000 px dengan margin 0 dan auto untuk menempatkan nya di tengah.
#menu {…} untuk membuat background menu dengan warna #993300, lebar 1.000 px penempatan text di tengah. Kali ini saya menghilangkan ukuran tinggi dan mengatur dengan memberi nilai padding atas dan bawah masing-masing 10 px.
a:link {…} ini merupakan presudo class yang mana untuk mengatur keberadaan dari content atau image yang telah di beri link. Text menu telah di beri link dan pengaturan nya di sini dengan pengaturan yaitu background color dari text tesebut dengan warna kuning #FFFF00 dan text dengan tulisan warna biru tua #000099 lalu untuk menghilangkan under line ketika suatu text di beri link maka saya memberikan text decoration dengan nilai none dengan ukuran font size 14 px.
a:hover {…} adalah ketika keberadaan text ketika mouse berada di atas tulisan tersebut. Background warna pada tulisan akan berganti warna menjadi biru #0000CC dengan warna tulisan menjadi putih #FFFFFF. Kali ini saya memberikan hurufnya menjadi tebal serta di beri under line serta ukuran font size berubah menjadi 16 px.
a:active {…} di mana keberadaan text ketika mouse di klik dan saya memberi nilai background color berubah menjadi putih #FFFFFF tulisan nya nanti berwarna hitam #000000 lalu ketebalan saya kembalikan lagi seperti asal.
1. Cara buat file html layout
2. Cara buat menu navigasi
3. Cara buat file html dari content
4. Cara buat file html colom right
5. Cara buat file html footer
Baca juga :
» Cara membuat template bawaan blogger menjadi responsive