Header

Berikut adalah contoh tutorial HTML untuk membuat elemen header pada halaman web menggunakan tag <header>:

Buat Dokumen HTML Dasar

Pertama, buatlah dokumen HTML dasar dengan menggunakan tag <html>, <head>, dan <body> seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Header Tutorial</title>
</head>
<body>
</body>
</html>

Tambahkan Elemen Header

Di dalam tag <body>, tambahkan tag <header> untuk membuat elemen header. Header biasanya berisi judul situs, logo, dan menu navigasi. Berikut adalah contoh sederhana:

<body>
   <header>
       <h1>Nama Situs Anda</h1>
       <nav>
           <ul>
               <li><a href="#">Beranda</a></li>
               <li><a href="#">Tentang Kami</a></li>
               <li><a href="#">Layanan</a></li>
               <li><a href="#">Kontak</a></li>
           </ul>
       </nav>
   </header>
</body>

Dalam contoh di atas, <h1> adalah judul situs, dan <nav> berisi daftar navigasi dengan menggunakan tag <ul> (unordered list) dan <li> (list item).

Tambahkan CSS (Opsional)

Anda juga dapat menambahkan gaya CSS untuk mengubah tata letak dan tampilan elemen header. Misalnya:

<head>
   <!-- Tag lainnya -->
   <style>
       header {
           background-color: #333;
           color: white;
           padding: 10px 0;
           text-align: center;
       }

       nav ul {
           list-style-type: none;
           padding: 0;
       }

       nav ul li {
           display: inline;
           margin-right: 20px;
       }

       nav ul li a {
           text-decoration: none;
           color: white;
       }
   </style>
</head>

Dalam contoh ini, elemen header memiliki latar belakang berwarna hitam (#333), teks berwarna putih, dan navigasi tata letak horizontal.

Sekarang Anda memiliki elemen header dasar dalam halaman HTML Anda. Anda dapat menyesuaikan dan mengembangkannya sesuai kebutuhan Anda dengan menambahkan lebih banyak elemen atau menggunakan CSS untuk desain yang lebih kompleks. Semoga tutorial ini bermanfaat!

PREVIOUS
NEXT