Belajar Struktur Layout Web dengan Div dan CSS: Tata Letak Rapi untuk Pemula

Saat membuat halaman web, kamu tentu ingin tampilannya rapi dan teratur. Inilah pentingnya memahami layout atau tata letak dalam website. Dengan HTML dan CSS, kamu bisa menyusun bagian-bagian halaman seperti header, isi, dan footer agar enak dilihat dan mudah diakses.

1. Apa Itu <div>?

<div> adalah singkatan dari division. Ini adalah elemen HTML yang berfungsi sebagai wadah atau pembungkus untuk mengelompokkan bagian-bagian halaman web.

Contohnya, kamu bisa membungkus judul dalam satu div, isi konten dalam div lain, dan bagian bawah (footer) dalam div tersendiri.

Contoh penggunaan div:

<div>
  <h1>Judul Halaman</h1>
</div>

<div>
  <p>Ini adalah isi konten halaman.</p>
</div>

2. Membuat Layout Dasar: Header, Konten, Footer

Kita akan membuat layout sederhana terdiri dari tiga bagian:

Header – bagian atas halaman
Konten – isi utama
Footer – bagian bawah halaman

3. Merapikan Layout dengan CSS

CSS akan kita gunakan untuk memberi warna, jarak, dan mengatur tampilan div-div tadi agar rapi.

4. Contoh Kode Lengkap Layout Web Sederhana

<!DOCTYPE html>
<html>
  <head>
    <title>Layout Web Dasar</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
      }
      .header {
        background-color: #4CAF50;
        color: white;
        padding: 20px;
        text-align: center;
      }
      .content {
        padding: 20px;
      }
      .footer {
        background-color: #f1f1f1;
        text-align: center;
        padding: 10px;
        font-size: 14px;
        color: #555;
      }
    </style>
  </head>
  <body>

    <div class="header">
      <h1>Web Saya</h1>
    </div>

    <div class="content">
      <p>Selamat datang di website sederhana saya. Ini adalah bagian konten utama.</p>
    </div>

    <div class="footer">
      <p>© 2025 WebSaya. All rights reserved.</p>
    </div>

  </body>
</html>

5. Hasil Tampilan Layout

Gambar di atas menunjukkan struktur layout sederhana: atas (hijau) = header, tengah (putih) = konten, bawah (abu-abu) = footer.

6. Kesimpulan

Dengan memahami div dan CSS, kamu sudah bisa menyusun halaman web agar tampil lebih profesional. Ini adalah langkah penting sebelum kamu mempelajari tata letak lebih kompleks seperti grid atau flexbox.

➡️ Apa Selanjutnya?

Di artikel berikutnya, kita akan membuat tombol interaktif pertama dengan JavaScript. Yuk, lanjut belajar!

Label: #belajarCSS #layoutWeb #htmlpemula #divCSS #webdevelopment #tutorialNgoding

Cari Blog Ini

Mengenal HTML, CSS, dan JavaScript: Pondasi Utama Dunia Web