Cara Membuat Layout Header Web dengan HTML dan CSS – Tidak bisa dipungkiri bahwa header HTML merupakan bagian yang sangat penting dalam setiap website modern. Sebagai elemen pertama yang biasanya ditemui oleh pengunjung, header memiliki peran yang sangat penting dalam memberikan kesan pertama dan membimbing interaksi selanjutnya.
Namun sebelum ke panduan cara membuat header website, pertama-tama mari kita coba memahami apa sebenarnya yang dimaksud dengan layout header web.
Apa Itu Layout Header Web?
Layout header website merupakan bagian dari tata letak atau struktur visual suatu situs web yang terletak di bagian paling atas halaman. Header ini biasanya berisi elemen-elemen penting seperti logo perusahaan atau merek, menu navigasi, dan elemen-elemen lain yang membantu pengguna dalam berinteraksi dengan situs web.
Elemen-elemen yang umumnya ditemukan dalam header layout website adalah:
- Logo
- Menu Navigasi
- Kontak atau Tombol Aksi Cepat
- Pencarian
- Breadcrumb (bila diperlukan)
- Tautan ke Media Sosial (bila diperlukan)
- Informasi Kontak (bila diperlukan)
Header layout website biasanya tetap terlihat di bagian atas halaman saat pengguna melakukan guliran ke bawah, memberikan akses cepat dan konsisten ke navigasi dan informasi penting. Desain header yang baik akan membantu pengguna untuk dengan mudah menavigasi situs web dan menemukan informasi yang mereka cari.
Setelah kita memahami apa itu layout header web, mari kita lanjutkan untuk mempelajari cara membuatnya dengan HTML dan CSS yang sudah TeknoTask rangkum dibawah ini.
Cara Membuat Layout Header Web Sederhana dengan HTML dan CSS
1. Persiapkan Struktur Folder
Langkah pertama yang perlu dilakukan adalah menyiapkan struktur folder untuk proyek layout header web, buat folder dengan nama “HeaderWeb” dengan contoh struktur file dibawah ini:
HeaderWeb
- index.html
- style.css
2. Buat File HTML Utama (index.html)
Buat file HTML utama dengan nama “index.html” dan isilah dengan kode HTML untuk Header Web dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Layout Teknotask.Com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <!-- Memuat Font Awesome CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<h1>TeknoTask</h1>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Layanan</a></li>
<li><a href="#">Kontak</a></li>
<div class="right-icons">
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
<div class="search-box">
<input type="text" placeholder="Cari">
<button><i class="fas fa-search"></i></button>
</div>
</div>
</ul>
</nav>
</div>
</header>
<main>
<div class="container">
<!-- Isi konten utama di sini -->
</div>
</main>
</body>
</html>3. Buat File CSS (style.css)
Buat file CSS dengan nama “style.css” dan isilah dengan kode CSS untuk Header Web dibawah ini.
<style type="text/css">
/* Reset default margin and padding */
body, h1, h2, h3, p, ul, li {
margin: 0;
padding: 0;
}
/* Container untuk mengatur lebar konten */
.container {
width: 80%;
margin: 0 auto;
}
/* Gaya header */
header {
background-color: #2c3e50; /* Warna latar belakang */
color: #fff;
padding: 20px 0;
}
header h1 {
margin: 0;
font-size: 24px;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
.right-icons {
float: right;
display: flex; /* Menjadikan konten flex */
align-items: center; /* Memusatkan item ke tengah */
}
.social-icons a {
color: #fff;
text-decoration: none;
margin-right: 10px;
}
.search-box {
display: flex; /* Menjadikan konten flex */
align-items: center; /* Memusatkan item ke tengah */
}
.search-box input[type="text"] {
padding: 8px;
border-radius: 5px;
border: none;
}
.search-box button {
background-color: #4CAF50;
color: white;
border: none;
padding: 8px 10px;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
</style>4. Jalankan Kode
Simpan semua perubahan dan buka file “index.html” menggunakan browser default untuk melihat hasilnya.
5. Tampilkan Layout Header Web
Selamat! Kamu telah berhasil membuat layout header web sederhana dengan HTML dan CSS menggunakan Sublime Text. Sesuaikan konten dan desain sesuai dengan kebutuhan Anda, dan pastikan tampilannya responsif pada berbagai perangkat.
Akhir Kata
Demikianlah ulasan singkat mengenai pentingnya header HTML dalam desain web dan cara membuatnya dengan HTML dan CSS. Semoga tutorial ini dapat memberikan manfaat bagi Sobat yang ingin mempelajari lebih lanjut tentang pembuatan header web yang efektif.