Cara Membuat Header Website Dengan HTML dan CSS

Cara Membuat Header Website Dengan HTML dan CSS – Perlu kamu ketahui, bahwa salah satu komponen penting dalam suatu website adalah header. Sayangnya, tak sedikit pengembang yang terlalu fokus pada bagian lain dan mengabaikan pentingnya header. Padahal, header memiliki peran yang tak kalah vital dalam keseluruhan desain suatu website.

Sobat Tekno, membuat header dengan HTML dan CSS bukanlah hal yang sepele. Header pada umumnya berfungsi sebagai identitas dan pusat navigasi utama bagi pengunjung. Inilah mengapa, dalam pembahasan kali ini, TeknoTask akan memahami cara membuat header CSS yang responsif dan menarik. Yuk, simak terus artikel ini sampai tuntas!

Apa itu Header Element di HTML?

Saat membicarakan HTML5, elemen <header> digunakan untuk menampilkan pengantar atau navigasi suatu halaman web. Di dalamnya, biasanya terdapat logo, judul, dan menu navigasi yang menjadi ciri khas dari suatu website. Fungsi utama header HTML adalah memberikan identitas dan panduan navigasi yang jelas kepada pengguna.

Bayangkan header sebagai sampul dan daftar isi dalam sebuah buku yang membantu pembaca memahami isinya. Tanpa header, pengunjung mungkin akan kebingungan saat menjelajahi halaman-halaman yang kamu kembangkan. Elemen <header> dapat ditempatkan di bagian atas halaman web dan digunakan lebih dari sekali, misalnya di setiap bagian konten yang berbeda.

Dalam hierarki HTML, elemen ini sering ditempatkan di dalam <body> dan dapat berisi elemen-elemen lain seperti <h1> sampai <h6>, <p>, serta <nav>.

Struktur dan Fungsi Header HTML

Pemahaman tentang struktur dan fungsi header HTML secara keseluruhan sangat membantu dalam menyajikan informasi secara logis, terorganisasi, dan meningkatkan estetika website. Beberapa komponen utama dari header HTML meliputi:

  1. Judul: Header sering kali berisi judul situs atau halaman, membantu pengunjung memahami konten apa yang akan mereka temui.
  2. Logo: Logo perusahaan atau merek turut ditempatkan di dalam header, membangun identitas merek dan memberikan pengakuan instan.
  3. Navigasi: Menu navigasi memudahkan pengunjung untuk menjelajahi situs, berisi tautan ke berbagai halaman dan sektor.
  4. Informasi Utama: Terkadang, header juga memuat informasi penting seperti slogan, nomor telepon, atau alamat e-mail, memberikan akses cepat bagi pengunjung.
Artikel Terkait:   Cara Membuat Website Menggunakan Notepad++

Tutorial Membuat Header Website Dengan HTML dan CSS

1. Persiapkan Struktur Folder dan File

Sebelum memulai, pastikan kamu telah menyiapkan struktur folder dan file dengan baik. Langkah awal ini melibatkan pembuatan folder proyek, file HTML, file CSS, dan menambahkan gambar logo. Berikut langkahnya:

  1. Buat Folder Proyek: Buka manajer file Anda dan buat folder baru, misalnya “HeaderWebsite”.
  2. Buat File HTML: Di dalam folder proyek, buat file HTML baru, misalnya “index.html”.
  3. Buat File CSS: Buat file CSS baru, misalnya “style.css”, di dalam folder yang sama.
  4. Tambahkan Gambar Logo: Buat folder logo dalam folder proyek dan letakkan gambar logo di folder tersebut, misalnya “logo.png” untuk gambarnya bisa unduh disini.

2. Buat Struktur HTML Header

Setelah struktur folder dan file siap, buka file “index.html” menggunakan Sublime Text dan tambahkan struktur HTML dasar dan tampilan header pada tag <body>, untuk lebih lengkapnya bisa salin kode dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Header Website</title>
</head>
<body>

<header>
        <div class="logo">
            <img src="logo/logo teknotask.png" alt="Logo">
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <div class="button-container">
            <a href="#" class="button">Masuk</a>
            <a href="#" class="button">Daftar</a>
        </div>
    </header>

    <!-- Isi Konten Website Lainnya -->

</body>
</html>

3. Buat CSS untuk Header

Selanjutnya, buka file “style.css” dan tambahkan kode pada CSS untuk membuat header lebih menarik dan responsif. Styling ini akan memberikan tampilan yang berwarna dan responsif pada header website yang akan kamu buat, untuk kodenya bisa disalin dibawah ini.

<style type="text/css">

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: darkorange;
    color: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    width: 220px; /* Atur ukuran logo sesuai kebutuhan */
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: color 0.3s ease-in-out;
}

nav a:hover {
    color: #ffcc00; /* Warna saat hover */
}

/* Tombol Masuk dan Daftar */
.button-container {
    display: flex;
    gap: 10px;
}

.button {
    padding: 8px 12px;
    border: 2px solid #fff;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.button:hover {
    background-color: #ffcc00;
    color: #333;
}

/* Media Query untuk Responsif */
@media screen and (max-width: 768px) {
    header {
        flex-direction: column;
        text-align: center;
    }

    nav {
        margin-top: 10px;
    }
}

</style>

4. Jalankan Kode

Jika dirasa sudah menambahkan kode HTML dan CSS, buka file “index.html” menggunakan browser atau live server Sublime Text untuk melihat hasilnya. Pastikan juga file “style.css” berada di folder yang sama.

Artikel Terkait:   Cara Membuat HTML 5

5. Tampilkan Website

Nantinya secara otomatis akan membuka jendela browser baru dan kamu bisa melihat tampilan header website yang telah kamu buat dengan kode HTML dan CSS, seperti gambar diatas.

Kesimpulan

Demikianlah panduan lengkap mengenai cara membuat header website dengan HTML dan CSS. Dengan mengikuti langkah-langkah di atas, kamu tidak hanya membangun header yang responsif, tetapi juga meningkatkan keterampilan dalam pengembangan web.