Skodev
Belajar coding dalam bahasa Indonesia
DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Navigasi atau yang biasa disebut dengan navbar adalah elemen penting pada sebuah website. Navbar membantu pengunjung untuk berpindah dari satu halaman ke satu halaman lainnya pada website. Dalam artikel ini, kita akan membahas cara membuat navbar pada HTML menggunakan kode yang sederhana dan mudah dipahami.
Sebelum memulai, kamu perlu membuat sebuah file HTML. Kamu dapat membuatnya dengan menggunakan text editor seperti Notepad atau Sublime.
navbar.html.<!DOCTYPE html>
<html>
<head>
<title> Navbar HTML </title>
</head>
<body>
</body>
</html>Setelah menyiapkan struktur HTML, langkah selanjutnya adalah membuat navbar. Kamu bisa menggunakan elemen <nav> di HTML untuk menyatakan bagian ini sebagai navbar.
Didalam elemen <nav>, buatlah sebuah list menggunakan elemen <ul> dan <li>. Setiap elemen <li> akan menjadi satu item dalam navbar kamu.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>Setelah selesai membuat struktur HTML untuk navbar, kamu bisa mulai menerapkan CSS untuk membuat tampilannya lebih menarik.
CSS dapat ditambahkan langsung didalam file HTML kamu. Buatlah elemen <style> di dalam elemen <head> dan masukkan kode CSS kamu di sana.
<head>
<title> Navbar HTML </title>
<style>
/* Tambahkan kode CSS di sini */
</style>
</head>Berikut adalah contoh sederhana bagaimana kamu bisa memberikan gaya pada navbar menggunakan CSS:
nav {
background-color: #333;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}Dengan mengikuti panduan di atas, kamu sekarang sudah bisa membuat navbar sederhana pada HTML. Kamu bisa menyesuaikan kode di atas sesuai dengan kebutuhan dan preferensi kamu. Selamat mencoba!
Link terkait: