Cara Membuat Navbar dengan HTML dan CSS

By Posted on

Cara Membuat Navbar dengan HTML dan CSS – Ingin menguasai dasar-dasar desain web? Membuat navbar (navigasi bar) adalah langkah awal yang sempurna untuk memulai! Dalam era digital yang semakin berkembang, kemampuan untuk membuat tata letak web yang menarik dan mudah dinavigasi sangat penting. Dalam artikel ini, kita akan membahas langkah-demi-langkah cara membuat navbar sederhana menggunakan HTML dan CSS. Tutorial ini dirancang khusus untuk pemula yang ingin memahami konsep dasar pembuatan navbar dengan mudah.

Navbar adalah elemen kunci dalam desain web yang memungkinkan pengguna untuk menavigasi situs dengan lancar dan efisien. Dengan menguasai pembuatan navbar, Anda akan dapat menghasilkan tata letak yang menarik dan ramah pengguna untuk situs web Anda. Tidak hanya itu, kemampuan untuk menguasai HTML dan CSS juga merupakan keahlian yang sangat dicari di pasar kerja saat ini.

Dalam tutorial ini, kelashtml akan membimbing Anda melalui setiap langkah dengan jelas dan detail. Dari pembuatan folder proyek hingga penulisan kode HTML dan CSS, Anda akan belajar bagaimana membuat navbar yang menarik dan responsif. Siap untuk memulai petualangan desain web Anda? Mari kita mulai dengan langkah pertama!

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk membuat navbar dengan html dan css:

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

Cara Membuat Navbar dengan HTML dan CSS

1. Membuat Folder Project Navbar

Pertama, mari buat folder untuk proyek navbar kita. Anda dapat memberi nama folder ini sesuai keinginan Anda, misalnya “navbar-project“.

Baca Juga:  Cara Membuat Garis Horizontal di HTML

2. Membuat Folder Img

Di dalam folder proyek navbar, buat folder bernama “img“. Folder ini akan digunakan untuk menyimpan gambar-gambar yang akan Anda gunakan dalam navbar Anda. Download gambar disini untuk diterapkan dalam navbar dengan html dan css sebagai contoh awal.

3. Membuat File navbar.html

Buka editor teks favorit Anda dan buatlah file baru dengan nama “navbar.html” di dalam folder proyek navbar. Ini akan menjadi file utama kami di mana kami akan menulis kode HTML untuk navbar.

Berikut ini source code html yang harus Anda tambahkan untuk membuat navbar dengan html dan css:

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

  <header>
    <nav>
      <div class="container">
        <h1 class="logo">Navbar Website</h1>
        <ul class="menu">
          <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/">Portfolio</a></li>
          <li><a href="https://riztekno.com/">Contact</a></li>
        </ul>
      </div>
    </nav>
  </header>

  <section class="hero">
    <div class="container">
      <h2>Welcome to Our Website</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in diam id ipsum vestibulum tristique vel eget urna.</p>
      <a href="https://riztekno.com/" class="btn">Learn More</a>
    </div>
  </section>

  <section class="about">
    <div class="container">
      <h2>About Us</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in diam id ipsum vestibulum tristique vel eget urna.</p>
      <img src="img/about_us.jpg" alt="About Us Image">
    </div>
  </section>

  <!-- More sections can be added here -->

</body>
</html>
 

4. Membuat File style.css

Selanjutnya, buat file baru dengan nama “style.css” di dalam folder proyek navbar. File ini akan digunakan untuk menulis kode CSS yang akan mengatur tata letak dan tampilan dari navbar kita.

Baca Juga:  Cara Membuat Button Radio di HTML

Berikut ini file css yang harus Anda tambahkan untuk membuat navbar dengan html dan css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  
  .container {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
  }
  
  header {
    background-color: #333;
  }
  
  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
  }
  
  .logo {
    color: #fff;
  }
  
  .menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .menu li {
    display: inline;
    margin-left: 20px;
  }
  
  .menu li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
  }
  
  .hero {
    background-image: url('img/bacground.jpg');
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: 100px 0;
  }
  
  .btn {
    display: inline-block;
    background-color: #4CAF50;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
  }
  
  .about {
    background-color: #f4f4f4;
    padding: 100px 0;
  }
  
  .about img {
    width: 100%;
    height: auto;
    margin-top: 20px;
  }
 

5. Mengubah Tampilan Navbar

Pertama-tama, kita akan mulai dengan menulis struktur dasar HTML untuk navbar. Setelah itu, tambahkan elemen-elemen yang diperlukan seperti logo dan tautan navigasi. Selanjutnya, buat file CSS terpisah untuk mengatur tampilan navbar. Dalam file CSS, tentukan gaya untuk latar belakang, warna teks, dan tata letak elemen-elemen navbar. Pastikan untuk menyertakan kelas dan ID yang sesuai untuk memudahkan penyesuaian gaya dengan CSS. Terakhir, uji tampilan navbar di berbagai perangkat dan layar untuk memastikan responsifitasnya. Dengan mengikuti langkah-langkah ini, Anda akan dapat membuat navbar yang menarik dan mudah diakses bagi pengguna situs web Anda.

Baca Juga:  Cara Membuat Button Berwarna dengan HTML dan CSS

6. Simpan & Lihat Tampilan

Simpan semua perubahan yang Anda buat di file HTML dan CSS. Kemudian, buka file “navbar.html” menggunakan browser web favorit Anda untuk melihat tampilan navbar yang telah Anda buat.

Preview hasil

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

Penutup

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat navbar sederhana menggunakan HTML dan CSS. Jangan ragu untuk bereksperimen dengan kode tersebut untuk menyesuaikannya dengan kebutuhan desain Anda. Semoga tutorial ini bermanfaat bagi Anda yang sedang belajar!

Related posts: