Pada tutorial kali ini saya akan menjelaskan tentang cara membuat navigasi bar dengan HTML Dan CSS.
Sebelum kita mengoding, kalian harus tahu dulu apasih itu Navbar. Navbar adalah komponen penting pada suatu website yaitu digunakan sebagai menu yang berisi link-link yang bersifat umum pada suatu website, misalkan home, about, Contact, dan lain sebagainya.
Seperti Biasa persiapkan alat dan bahannya
- Aplikasi Pengembang ( Notepad++, Notepad, Sublime Text, Dreamweaver, Visual Studio Code, Dll)
- Browser
Jika kedua aplikasi tersebut sudah ada, oke cekidot langsung ngoding
index.html
<html>
<head>
<title>Belajar Navbar</title>
<style type="text/css">
a{text-decoration: none; font-size: 20px;font-family: sans-serif;padding: 14px 10px}
ul{padding: 14px}
li{list-style: none; display: inline;}
li a{background: #FFD700; color:#000000;}
li a:hover{background: #FFC0CB; color:#fff;}
.navi{background: #964B00; height: 50px}
</style>
</head>
<body>
<nav class="navi">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Download</a></li>
</ul>
</nav>
</body>
</html>
<head>
<title>Belajar Navbar</title>
<style type="text/css">
a{text-decoration: none; font-size: 20px;font-family: sans-serif;padding: 14px 10px}
ul{padding: 14px}
li{list-style: none; display: inline;}
li a{background: #FFD700; color:#000000;}
li a:hover{background: #FFC0CB; color:#fff;}
.navi{background: #964B00; height: 50px}
</style>
</head>
<body>
<nav class="navi">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Download</a></li>
</ul>
</nav>
</body>
</html>
Jika sudah di simpan dengan nama index.html. Setelah disimpan silahkan jalan kan pada browser anda. Selamat mencoba semoga bermanfaat. Terima Kasih.