Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Tutorial HTML

Cara Membuat Navbar dengan HTML

Koderaya Posting Komentar

Berikut adalah Source Code HTML dan CSS sederhana untuk membuat Navbar
Silahkan untuk membuat 2 File

1. navbar.html
2. style.css

oke langsung saja copas kode nya dibawah ini

navbar.html

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Navbar</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Beranda</a></li>
      <li><a href="#">Tentang</a></li>
      <li><a href="#">Layanan</a></li>
      <li><a href="#">Kontak</a></li>
    </ul>
  </nav>
</body>
</html>

style.css
 nav {
  background-color: #333;
  height: 50px;
}

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

nav ul li {
  display: inline;
}

nav ul li a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  padding: 15px;
}

nav ul li a:hover {
  background-color: #555;
}

dan ini adalah hasil Navbar dari kode tersebut



Penjelasan:

Kode HTML terdiri dari elemen <nav> yang digunakan untuk mengelompokkan navigasi dan elemen <ul> yang berisi daftar item navigasi.
Setiap item navigasi ditempatkan dalam elemen <li> dan dihubungkan menggunakan elemen <a> yang berisi teks tautan.
Dalam CSS, <nav> memiliki latar belakang warna #333 (abu-abu gelap) dan tinggi 50 piksel.
Daftar navigasi diatur menjadi daftar tanpa gaya menggunakan list-style-type: none; dan margin serta padding diatur menjadi 0 agar tidak ada jarak di sekitar daftar.
Setiap item navigasi (<li>) ditampilkan secara horizontal dengan menggunakan display: inline;
Gaya tautan (<a>) termasuk warna teks putih (#fff), teks tanpa dekorasi (text-decoration: none;) dan padding 15 piksel di sekitar tautan.
Saat tautan dihover (:hover) latar belakang tautan akan berubah menjadi warna #555 (abu-abu lebih terang).
Anda dapat menyalin kode HTML ke file HTML baru dan kode CSS ke file CSS terpisah, lalu menghubungkan file CSS dengan elemen <link> dalam elemen <head> file HTML Anda. Pastikan file CSS Anda disimpan dengan nama "style.css" dalam folder yang sama dengan file HTML. Anda juga dapat menyesuaikan gaya CSS sesuai kebutuhan Anda.

jadi begitu lah cara sederhana membuat navbar html dan css, terimakasih sampai untuk selanjutnya

Posting Komentar untuk "Cara Membuat Navbar dengan HTML"