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:
Membuat menu di HTML bukanlah hal yang rumit jika kamu mengerti dasar-dasar HTML. Dalam artikel ini, kita akan memandu kamu melalui proses pembuatan menu sederhana di HTML.
Sebelum kita memulai, pastikan kamu telah menginstal editor teks seperti Notepad++, Sublime Text, atau Visual Studio Code. Kamu juga membutuhkan browser untuk melihat hasilnya.
Pertama, kamu perlu membuat dokumen HTML baru. Kamu bisa melakukannya dengan membuka editor teks kamu dan menulis kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Menu di HTML</title>
</head>
<body>
</body>
</html>Simpan file dengan ekstensi .html, misalnya “menu.html”.
Menu biasanya dibuat menggunakan list di HTML. Kode berikut menunjukkan cara membuat list tanpa urutan (unordered list) dengan tiga item list (list item):
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Kamu bisa memasukkannya ke dalam tag <body>.
Untuk membuat setiap item dalam menu bisa diklik dan mengarah ke halaman lain, kita bisa menambahkan tag a dengan atribut href yang berisi alamat halaman tujuan. Kode berikut menunjukkan cara melakukannya:
<ul>
<li><a href="halaman1.html">Halaman 1</a></li>
<li><a href="halaman2.html">Halaman 2</a></li>
<li><a href="halaman3.html">Halaman 3</a></li>
</ul>Menu yang kita buat masih sangat sederhana dan belum menarik. Untuk menatanya, kita bisa menggunakan CSS. Berikut contoh cara melakukan itu:
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>Sekarang, menu kamu telah jadi dan tampak lebih menarik.
Ini adalah cara sederhana untuk membuat menu di HTML. Dengan pengetahuan dasar HTML dan sedikit CSS, kamu bisa membuat menu navigasi yang baik untuk situs web kamu. Selamat mencoba!
Link terkait: