Cara Membuat Menu Navbar dengan HTML dan CSS

Cara Membuat Menu Navbar dengan HTML dan CSS

Pada kali ini saya akan membagikan tutorial membuat menu navbar menggunakan HTML dan CSS.
Logo 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

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel