Cara Membuat Header Website dengan HTML dan CSS

by

Cara Mudah Membuat Header Website dengan HTML dan CSS – Pembuatan sebuah website merupakan langkah awal yang menarik bagi pemula dalam dunia pengembangan web. Salah satu elemen yang memperkuat kesan pertama pengunjung adalah header website. Header yang menarik tidak hanya memperindah tampilan, tetapi juga memberikan kesan profesional dan memudahkan navigasi. Dalam artikel ini, caramembuatweb akan memandu Anda melalui langkah-langkah sederhana untuk membuat header website menggunakan HTML dan CSS.

Alat yang Dibutuhkan

Berikut ini beberapa alat yang dibutuhkan untuk membuat header website dengan html dan css:

  • Perangkat laptop,
  • Notepad++ (Text editor code),
  • Google chrome (Web browser),
  • Niat yang kuat.

Cara Mudah Membuat Header Website dengan HTML dan CSS

1. Buat Folder Project Header Website

Langkah pertama yang perlu Anda lakukan adalah membuat folder untuk proyek header website Anda. Ini akan membantu Anda menjaga kerapihan dan keteraturan dalam pengorganisasian file-file proyek Anda.

2. Buat Folder Img

Di dalam folder proyek, buatlah folder bernama “img“. Folder ini akan digunakan untuk menyimpan semua gambar yang akan Anda gunakan di website Anda, seperti logo dan gambar latar belakang header. Download gambar disini untuk di implementasikan dalam proyek header website sebagai contoh awal.

3. Buat Sebuah File header_website.html

Sekarang, mari kita mulai membuat file HTML untuk header website kita. Buka editor teks favorit Anda dan buatlah sebuah file baru dengan nama “header_website.html“. Kemudian, mulailah dengan menulis struktur dasar HTML berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website Menarik</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="container">
      <div class="logo">
        <img src="img/logo.png" alt="Logo">
        <h1>Ini Adalah Header</h1>
      </div>
      <nav>
        <ul>
          <li><a href="https://riztekno.com/">Home</a></li>
          <li><a href="https://riztekno.com/">About</a></li>
          <li><a href="https://riztekno.com/">Services</a></li>
          <li><a href="https://riztekno.com/">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>
  
  <section class="landing">
    <div class="container">
      <div class="landing-content">
        <h2>Selamat Datang di Website Kami</h2>
        <p>Ini adalah tempat yang tepat untuk menemukan informasi terkini tentang topik yang Anda minati. Jelajahi lebih lanjut dengan menekan tombol di bawah ini.</p>
        <a href="https://riztekno.com/" class="btn">Read More</a>
      </div>
      <div class="landing-image">
        <img src="img/landing_image.jpg" alt="Gambar">
      </div>
    </div>
  </section>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, kita perlu membuat file CSS untuk mengatur tampilan header website. Buat file baru bernama “style.css” di folder proyek Anda. Berikut ini source code css yang harus Anda tulis:

body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  
  .container {
    width: 80%;
    margin: 0 auto;
  }
  
  header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
  }
  
  .logo {
    display: flex;
    align-items: center;
  }
  
  .logo img {
    width: 50px;
    margin-right: 10px;
  }
  
  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  nav ul li {
    display: inline;
  }
  
  nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
  }
  
  nav ul li a:hover {
    background-color: #555;
  }
  
  .landing {
    padding: 50px 0;
    display: flex;
    justify-content: center;
  }
  
  .landing-content {
    text-align: center;
    flex: 1;
    margin-right: 20px; /* Tambahkan margin agar konten tidak terlalu dekat dengan gambar */
  }
  
  .landing-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .landing-image img {
    max-width: 100%;
    max-height: 300px; /* Atur tinggi maksimum gambar */
  }
  
  
  .btn {
    display: inline-block;
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
  }
  
  .btn:hover {
    background-color: #555;
  }
  
  .landing-image img {
    max-width: 80%;
  }
 

5. Mengubah Tampilan Header Website

Sekarang, mari kita tambahkan kode HTML untuk header website di dalam tag <body> pada file “header_website.html“. Berikut adalah contoh sederhana untuk header dengan logo dan menu navigasi:

<header>
    <div class="container">
        <img src="img/logo.png" alt="Logo Website">
        <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>
    </div>
</header>
 

6. Save & View Tampilan

Setelah Anda selesai menambahkan kode HTML dan CSS, pastikan untuk menyimpan semua perubahan yang telah Anda buat. Kemudian, buka file “header_website.html” menggunakan browser web favorit Anda untuk melihat tampilan dari header website yang telah Anda buat.

Artikel Terkait:   Cara Membuat Website Perusahaan dengan HTML

Preview hasil

Berikut ini preview hasil header website dengan html dan css jika Anda berhasil membuatnya:

Penutup

Dengan mengikuti langkah-langkah sederhana ini, Anda dapat membuat header website yang menarik menggunakan HTML dan CSS. Teruslah eksplorasi dan latih keterampilan pengembangan web Anda untuk menciptakan tampilan yang lebih baik dan lebih dinamis untuk website Anda. Semoga artikel ini bermanfaat bagi Anda yang sedang memulai perjalanan dalam dunia pengembangan web!

Related posts: