CARA MEMBUAT HEADER DI HTML DAN CSS

Membuat header di HTML dan CSS adalah salah satu aspek penting dalam perancangan website. Header biasanya berfungsi sebagai identitas dan navigasi utama dari suatu website.

Melalui tutorial ringkas ini, kita akan belajar bagaimana membuat sebuah header dari dasar menggunakan HTML dan CSS. Kami akan memulai dari cara mendefinisikan header dalam HTML, disusul dengan bagaimana menstylingnya dengan CSS.

Mendefinisikan Header di HTML

Header di HTML didefinisikan dengan elemen <header>. Elemen ini biasanya berisi elemen-elemen seperti logo, judul website, dan navigasi utama. Berikut adalah contoh sederhana dari header HTML:

<header>
   <img src="logo.jpg" alt="Logo Website">
   <h1>Judul Website</h1>
   <nav>
      <ul>
         <li><a href="#">Beranda</a></li>
         <li><a href="#">Tentang</a></li>
      </ul>
   </nav>
</header>

Pada kode di atas, kita mendefinisikan sebuah header dengan elemen <header>. Di dalam header tersebut, kita menambahkan logo menggunakan tag <img>, judul website dengan tag <h1>, dan navigasi menggunakan tag <nav>.

Styling Header dengan CSS

Setelah mendefinisikan header di HTML, selanjutnya kita akan memberi style pada header tersebut dengan CSS. Berikut adalah contoh sederhana bagaimana kita dapat menstyling header yang telah dibuat:

header {
   background-color: navy;
   color: white;
   padding: 20px;
   text-align: center;
}

header img {
   height: 50px;
}

header nav ul {
   list-style-type: none;
}

header nav ul li {
   display: inline;
   margin: 0 10px;
}

header nav ul li a {
   color: white;
   text-decoration: none;
}

Pada kode di atas, kita memberikan latar belakang warna navy dan warna teks putih pada header. Selain itu, juga diberikan padding sebesar 20px dan teks di tengah dengan text-align: center.

Kode berikutnya adalah menjadikan gambarnya memiliki tinggi 50px, membuat daftar tidak berbulet, serta menjadikan setiap elemen daftar tampil sebaris dan memiliki jarak 10px satu sama lain. Terakhir, kita memberi warna teks putih pada setiap tautan dan menghilangkan garis bawah pada tautan tersebut.

Sekarang kamu telah mengetahui cara membuat header dengan HTML dan CSS. Kamu dapat mulai berkreasi dan menyesuaikan tampilan header sesuai selera kamu. Selamat mencoba!