Navigasi

Membuat Struktur Dasar HTML

Buat dokumen HTML dengan struktur dasar sebagai berikut:

<!DOCTYPE html>
<html>
<head>
   <title>Contoh Navigasi</title>
</head>
<body>
   <header>
       <nav>
           <!-- Daftar tautan navigasi akan ditambahkan di sini -->
       </nav>
   </header>

   <main>
       <!-- Konten utama halaman web Anda akan ada di sini -->
   </main>
</body>
</html>

Tambahkan Tautan Navigasi

Di dalam elemen <nav>, tambahkan tautan navigasi menggunakan elemen <ul> (unordered list) dan <li> (list item) untuk membuat daftar tautan. Contoh:

<nav>
   <ul>
       <li><a href="#">Beranda</a></li>
       <li><a href="#">Tentang Kami</a></li>
       <li><a href="#">Layanan</a></li>
       <li><a href="#">Kontak</a></li>
   </ul>
</nav>

Tambahkan CSS untuk Navigasi (Opsional)

Anda dapat menggunakan CSS untuk menghias tautan navigasi. Berikut contohnya:

nav ul {
   list-style: none;
   padding: 0;
}

nav li {
   display: inline;
   margin-right: 20px;
}

nav a {
   text-decoration: none;
   color: #333;
   font-weight: bold;
}

Hasil Akhir

Setelah menambahkan tautan dan styling CSS, navigasi Anda akan terlihat seperti ini:

Sekarang Anda memiliki dasar untuk membuat navigasi pada halaman web Anda menggunakan HTML. Anda dapat menyesuaikan tautan dan styling sesuai dengan kebutuhan Anda. Jika Anda memiliki pertanyaan lebih lanjut, jangan ragu untuk bertanya!

PREVIOUS
NEXT