Assalamualaikum

#Hallo Semuanya!


Diartikel kali ini ,mimin sharing cara membuat Navbar HTML CSS

Kalian,pasti sering meliat bukan dibagian paling atas pada sebuah webstite terdapat tulisan yang mengarah ke samping (vertikal) , Yupp itulah yang dinamakan Navbar


Bagaimana Cara Membuatnya ?? 🤔

Yukk , Simak


Perhatikan Syntax dibawah ini !


<!DOCTYPE html>
<html>
<head>
  <title>Membuat Navbar di HTML dengan CSS</title>
</head>
<body>
<ul>
  <li><a href="#beranda">Beranda</a></li>
  <li><a href="#berita">Berita</a></li>
  <li><a href="#kontak">Kontak</a></li>
  <li><a href="#tentang">Tentang Kami</a></li>
</ul>
</body>
</html>

Diatas kita membuat list dengan jumlah 4 item. yang didalamnya terdapat link dengan menggunakan tag   <a> </a>  . Apabila sintak ini dijalankan maka menghasilkan output berikut:

Jika dilihat strukturnya masih sangat sederhana tanpa file css didalamnya. Dari segi tampilan sangat tidak menarik ya, sekarang mari coba kita buat agar tampilannya jadi lebih bagus

Tag <ul> </ul>,adalah unordered List yang berfungsi berfungsi untuk mengurutkan suatu list dengan urutan berupa karakter spesial atau dengan simbol pada HTML

Tag <li> </li>,berfungsi untuk menambah daftar/isi dari tag <ul> </ul>.Cara penggunaanya yaitu dengan menyisipkan item ke dalam tag pembuka dan tag penutup yang diapit dengan tag <li> </li>. Output yang ditampilkan browser nanti akan dinamakan item 1 , item 2 dan seterusnya

Tag <a> </a>,berfungsi dapat menentukan alamat sebuah halaman yang akan dituju


Menambahkan style css di file html tadi

Buatlah sebuah file di editor text seperti sublime, vs code , atau notepad++ dengan extension .css .Contoh (style.css)

Perhatikan Syntax dibawah ini !


ul {
list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #FF0000;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
}

li a:hover {
  background-color: #ff3333;
}

Simpan file diatas dengan nama style.css, jika kalian buka tampilan webnya hasilnya masih sederhana karena kalian belum menghubungkan file css yang barusan kalian buat

Cara menghubungkannnya Copas Snytax dibawah selanjutnya pastekan ke Tag <head> </head> di file html tadi yang kalian buat diantara

<link rel="stylesheet" href="style.css">

Note   :   Pastikan pada atribut href nilainya sesuai dengan nama file CSS yang tela kita buat diatas yaitu style.css

Jika dilihat lagi , file html tadi akan jadi seperti dibawah ini

<!DOCTYPE html>
<html>
<head>
  <title>Membuat Navbar di HTML dengan CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
  <li><a href="#beranda">Beranda</a></li>
  <li><a href="#berita">Berita</a></li>
  <li><a href="#kontak">Kontak</a></li>
  <li><a href="#tentang">Tentang Kami</a></li>
</ul>
</body>
</html>

Apabila dijalankan dibrowser, maka hasilnya seperti pada gambar dibawah ini

Disinn kita menambahkan efek hover pada setiap itemnya. Jadi ketika kursos mengarah item tertentu maka pada item tersebut akan dijalankan efek hovernya (perubahan warna)


Semoga artikel ini bemanfaat terutama bagi kalian yang baru memasuki dunia progamming sama seperti mimin juga,hehe

Jangan lupa share artikel ini ke teman atau saudara kalian

SALAM MAHASISWA

SALAM CODINGER

       

Tunggu Artikel selanjutnya....

Tags

Wahyu Rizqy

Post a Comment

إرسال تعليق

أحدث أقدم