Membangun sebuah situs web dari awal Bagian V:. Menambahkan menu.
Apa yang akan kita lakukan
Dalam bab ini kita akan:
- Menambahkan menu navigasi
Tambahkan Menu Navigasi
Dalam folder demoweb, mengedit file script.js JavaScript.
Tambahkan berikut ke script:
document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='index.html'>Home</a></li>" +
"<li><a href='customers.html'>Data</a></li>" +
"<li><a href='about.html'>About</a></li>" +
"</ul>";
Mengedit The Style Sheet
Dalam folder demoweb, mengedit style sheet site.css Anda
Tambahkan berikut dengan isi berkas:
Selain site.css
ul#menu {
padding: 0;
margin-bottom: 11px;
}
ul#menu li {
display:
inline;
margin-right: 3px;
}
ul#menu li a {
background-color: #ffffff;
padding: 10px 20px;
text-decoration: none;
color: #696969;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
color: white;
background-color: black;
}
Mengedit Halaman
Dalam folder demoweb, mengedit index.html halaman rumah Anda.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<nav id="nav01"></nav>
<div id="main">
<h1>Welcome to Our Company</h1>
<h2>Web Site Main
Ingredients:</h2>
<p>Pages (HTML)</p>
<p>Style Sheets
(CSS)</p>
<p>Computer Code (JavaScript)</p>
<p>Live Data (Files
and Databases)</p>
<footer id="foot01"></footer>
</div>
<script src="script.js"></script>
</body>
</html>
Cobalah sendiri " Halaman di atas, adalah salinan dari halaman dari bab-bab sebelumnya, dengan elemen navigasi tambahan.
Mengedit Semua Pages
Dalam folder demoweb, tambahkan elemen navigasi ke halaman lain (customers.html dan about.html).
Baca lebih banyak
Baca lebih lanjut tentang daftar HTML di kami Tutorial HTML .