Cara Membuat Menu Navbar dengan HTML dan CSS
30 May 2019
Add Comment
Cara Membuat Menu Navbar dengan HTML dan CSS
Pada kali ini saya akan membagikan tutorial membuat menu navbar menggunakan HTML dan CSS.
 |
| Gambar oleh : http://aplusweb.design |
Apa itu HTML ?
HTML (Hypertext Markup Language) adalah sebuah bahasa markah yang digunakan untuk membuat web, menampilkan berbagai informasi di dalam sebuah web browser internet dan pemformatan hypertext sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
Apa itu CSS ?
CSS (Cascading Style Sheets) , yaitu sebuah bahasa berbasis text yang digunakan untuk memformat tampilan dari halaman web yang dibuat dengan HTML, misalnya dalam hal pewarnaan, ukuran, posisi dsb. Jika HTML adalah dasar dan batu bata yang membentuk struktur rumah, CSS adalah plester dan cat yang menghiasinya.
Dengan CSS, memungkinkan kita untuk memberikan efek-efek khusus pada isi halaman web secara lebih spesifik. Memungkinkan kita mengubah tampilan beberapa halaman web sekaligus dengan sedikit kode.
Cara membuat menu navbar (navigation bar) :
1. Buka text editor anda.
2. Buat file text dengan format .html
3. Copas kode berikut di file html nya :
<!DOCTYPE html>
<html>
<head>
<title>Navbar</title>
</head>
<body>
<div class="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Post</a></li>
</div>
</body>
</html>
4. Lalu buat stylenya dengan menggunakan CSS :
<style type="text/css">
body{
margin: 0;
}
.navbar{
background-color: #333;
overflow: hidden;
}
li{
padding: 16px;
float: left;
list-style-type: none;
}
a{
color: white;
text-decoration:none;
}
li:hover{
background-color: #555;
}
</style>
5. Jadi kodenya akan seperti berikut :
<!DOCTYPE html>
<html>
<head>
<title>Navbar</title>
<style type="text/css">
body{
margin: 0;
}
.navbar{
background-color: #333;
overflow: hidden;
}
li{
padding: 16px;
float: left;
list-style-type: none;
}
a{
color: white;
text-decoration:none;
}
li:hover{
background-color: #555;
}
</style>
</head>
<body>
<div class="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Post</a></li>
</div>
</body>
</html>
catatan "Jika anda ingin menambahkan menu lagi anda tinggal menambahkan tag <li><a href="">Menu </a></li>".
Fungsi dari href yaitu jika kita mengklik menu navbar nya maka akan pindah ke suatu link. Jika kita menggunakan # di dalam href maka jika menu di klik tidak akan berpindah halaman.
Sekian tutorial dari saya jika belum mengerti silahkan berkoomen di kolom komentar.
0 Response to "Cara Membuat Menu Navbar dengan HTML dan CSS"
Post a Comment
Pesan Untuk Komentator