HTML Dasar #18 - Membuat Layout Sederhana dengan div (Tanpa CSS)

byFerdian Rahabista -
0

Setelah kita memahami perbedaan block dan inline, sekarang saatnya mencoba membangun layout website hanya dengan <div> tanpa CSS sama sekali. Mengapa perlu belajar ini? Agar kita menghargai pentingnya CSS untuk mengatur posisi elemen!

Poin Penting di Awal:
Tanpa CSS, semua <div> (karena sifatnya block element) akan tampil vertikal/menumpuk ke bawah. Tidak bisa membuat sidebar di samping konten tanpa CSS. Ini wajar! Di artikel ini kita belajar struktur dasar dulu.

Bagaimana Perilaku Div Tanpa CSS?

<div> adalah block element, artinya:

  • Memulai baris baru
  • Lebar 100% dari parent container
  • Berikutnya akan turun ke baris berikutnya

Contoh sederhana 3 div tanpa CSS:

<div style="background: lightblue;">Div 1 - Header</div>
<div style="background: lightgreen;">Div 2 - Konten</div>
<div style="background: lightcoral;">Div 3 - Footer</div>

Hasilnya (tanpa CSS layout tambahan):

Div 1 - Header (lebar penuh, turun ke bawah)
Div 2 - Konten (lebar penuh, di baris baru)
Div 3 - Footer (lebar penuh, di baris baru)

Lihat? Semua div turun ke bawah. Tidak bisa membuat sidebar di samping tanpa CSS.

Struktur Layout Website Standar

Biasanya layout website memiliki 4-5 bagian utama:

Bagian Fungsi Tag yang Biasa
Header Logo, judul, tagline <div> atau <header>
Navigasi / Menu Link ke halaman lain <div> atau <nav>
Konten Utama Artikel, informasi inti <div> atau <main>
Sidebar (opsional) Iklan, profil, link terkait <div> atau <aside>
Footer Copyright, kontak, link <div> atau <footer>
Catatan: Di artikel ini kita akan menggunakan <div> murni (tanpa CSS) untuk belajar struktur. Nanti di artikel selanjutnya kita akan belajar mengatur posisi dengan CSS (Flexbox, Grid) agar sidebar bisa berdampingan dengan konten.

Studi Kasus: Layout Website 4 Bagian (Tanpa CSS)

Buat file layout-sederhana.html dengan struktur berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Layout Sederhana Tanpa CSS</title>
</head>
<body>

    <!-- HEADER -->
    <div>
        <h1>Website Sederhanaku</h1>
        <p>Contoh layout tanpa CSS (semua turun ke bawah)</p>
    </div>

    <!-- NAVIGASI / MENU -->
    <div>
        <a href="#">Home</a> |
        <a href="#">Tentang</a> |
        <a href="#">Blog</a> |
        <a href="#">Kontak</a>
    </div>

    <!-- KONTEN UTAMA -->
    <div>
        <h2>Selamat Datang!</h2>
        <p>Ini adalah website sederhana yang dibuat hanya dengan &lt;div&gt;. Tanpa CSS, semua elemen turun ke bawah.</p>
        <p>Di sinilah letak konten utama website.</p>
    </div>

    <!-- FOOTER -->
    <div>
        <p>&copy; 2024 Website Sederhana. Dibuat dengan HTML saja.</p>
    </div>

</body>
</html>

Hasilnya (setiap div turun ke bawah):

Website Sederhanaku

Contoh layout tanpa CSS (semua turun ke bawah)

Selamat Datang!

Ini adalah website sederhana yang dibuat hanya dengan <div>. Tanpa CSS, semua elemen turun ke bawah.

Di sinilah letak konten utama website.

© 2024 Website Sederhana. Dibuat dengan HTML saja.

Studi Kasus: Mencoba Membuat Sidebar (Gagal Tanpa CSS)

Banyak pemula bertanya: "Kenapa sidebar saya tidak bisa di samping konten?" Jawabannya: karena tanpa CSS, semua div turun ke bawah.

Coba kode ini (tanpa CSS):

<div>
    <div>
        <h3>Sidebar</h3>
        <p>Ini sidebar. Saya ingin di samping konten.</p>
    </div>
    
    <div>
        <h3>Konten Utama</h3>
        <p>Ini konten utama. Sayangnya saya turun di bawah sidebar, bukan di sampingnya.</p>
    </div>
</div>

Hasilnya (sidebar dan konten tetap turun ke bawah, tidak bisa berdampingan):

Sidebar

Ini sidebar. Saya ingin di samping konten.

Konten Utama

Ini konten utama. Sayangnya saya turun di bawah sidebar, bukan di sampingnya.

Tanpa CSS, sidebar dan konten tidak bisa berdampingan. Ini wajar!

Kesimpulan:
Untuk membuat sidebar di samping konten, kita membutuhkan CSS (Flexbox atau Grid). Nanti akan kita pelajari di seri CSS. Sekarang fokus pada struktur HTML yang rapi dulu.

Studi Kasus: Layout Lebih Kompleks (Tanpa CSS)

Kita tetap bisa membuat struktur bertingkat (nested div) untuk persiapan layout, meskipun tampilannya masih vertikal.

<!DOCTYPE html>
<html>
<head>
    <title>Layout Persiapan (Tanpa CSS)</title>
</head>
<body>

    <!-- Container Utama -->
    <div>
        
        <!-- HEADER -->
        <div>
            <h1>MyBlog</h1>
            <p>Tempat berbagi cerita</p>
        </div>
        
        <!-- MENU NAVIGASI -->
        <div>
            <a href="#">Home</a> | 
            <a href="#">About</a> | 
            <a href="#">Contact</a>
        </div>
        
        <!-- Area Konten + Sidebar (nanti pakai CSS) -->
        <div>
            
            <!-- KONTEN UTAMA -->
            <div>
                <h2>Postingan Pertama</h2>
                <p>Ini adalah artikel pertama saya. Belajar HTML itu menyenangkan!</p>
            </div>
            
            <!-- SIDEBAR -->
            <div>
                <h3>Tentang Penulis</h3>
                <p>Seorang pembelajar web development.</p>
                
                <h3>Kategori</h3>
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JavaScript</li>
                </ul>
            </div>
            
        </div>
        
        <!-- FOOTER -->
        <div>
            <p>&copy; 2024 MyBlog. All rights reserved.</p>
        </div>
        
    </div>

</body>
</html>

Hasil struktur (masih vertikal, tapi rapi secara kode):

MyBlog

Tempat berbagi cerita

Postingan Pertama

Ini adalah artikel pertama saya. Belajar HTML itu menyenangkan!

Tentang Penulis

Seorang pembelajar web development.

Kategori

  • HTML
  • CSS
  • JavaScript

© 2024 MyBlog. All rights reserved.

Perbandingan: Dengan CSS vs Tanpa CSS

Aspek Tanpa CSS Dengan CSS
Posisi div Vertikal (turun ke bawah) Bisa diatur (horizontal, grid, dll)
Sidebar di samping konten Tidak bisa Bisa (pakai flexbox/grid)
Warna, font, jarak Default browser Bisa diatur
Responsive (HP vs PC) Tidak Bisa (media query)

Studi Kasus: Memberi Background Warna (Tanpa CSS Layout, Tapi Ada Warna)

Meskipun tanpa CSS layout, kita tetap bisa memberi warna background menggunakan atribut style agar divisi terlihat jelas. Ini membantu memvisualisasikan struktur.

<div style="background: #e0e7ff; padding: 20px;">
    <h2>Header Website</h2>
</div>

<div style="background: #fef3c7; padding: 10px;">
    <a href="#">Home</a> | <a href="#">About</a> | <a href="#">Contact</a>
</div>

<div style="background: #dcfce7; padding: 20px;">
    <h3>Konten Utama</h3>
    <p>Ini adalah konten utama.</p>
</div>

<div style="background: #fee2e2; padding: 15px;">
    <p>&copy; 2024 Websiteku</p>
</div>

Hasil dengan warna (tapi masih vertikal):

Header Website

Konten Utama

Ini adalah konten utama.

© 2024 Websiteku

Kapan Kita Butuh CSS untuk Layout?

  • Saat ingin sidebar di samping konten (horizontal layout)
  • Saat ingin mengatur jarak dan posisi (margin, padding, position)
  • Saat ingin layout responsif (berubah saat layar kecil)
  • Saat ingin grid galeri (banyak gambar dalam baris dan kolom)
  • Saat ingin navbar horizontal (menu di samping kiri/kanan)
Yang Bisa Dilakukan Tanpa CSS:
  • Membuat struktur HTML yang rapi dan semantik
  • Menentukan urutan konten (header → nav → main → footer)
  • Memberi warna background sederhana (inline style untuk visualisasi)
  • Mempersiapkan kerangka website sebelum styling

Kesalahan Umum Pemula

  • Berpikir bahwa div bisa otomatis berdampingan → Tidak! Div adalah block element. Butuh CSS (flexbox/grid) untuk membuatnya horizontal.
  • Lupa bahwa tanpa CSS, semua turun ke bawah → Ini bukan bug, ini perilaku default HTML.
  • Mencoba mengatur width div tanpa CSS → Atribut width tidak dikenal di HTML biasa, harus pakai CSS.
  • Menumpuk terlalu banyak div tanpa struktur → Tetap buat struktur yang rapi meskipun belum pakai CSS.
Catatan Penting:
Jangan kecewa jika layoutmu belum terlihat seperti website profesional. Itu wajar karena kita belum pakai CSS. Fokus sekarang pada kerangka HTML yang rapi. Nanti di seri CSS, kita akan mengubah posisi div menjadi horizontal dengan mudah!

Latihan Singkat

  1. Buat file HTML baru dengan judul "Layout Persiapan Portofolio"
  2. Buat struktur div untuk:
    • Header (judul dan tagline)
    • Navigasi (Home, Projek, Kontak)
    • Area utama yang berisi 3 div project (masing-masing: judul project dan deskripsi singkat)
    • Sidebar (berisi profil singkat dan kontak)
    • Footer (copyright)
  3. Gunakan warna background (inline style) untuk membedakan setiap bagian
  4. Simpan dan buka di browser. Amati bahwa semua masih vertikal/turun ke bawah
  5. Catat di kertas atau di komentar HTML: "Nanti setelah belajar CSS, saya akan membuat sidebar berdampingan dengan konten"

Intisari Hari Ini

  • <div> adalah block element → selalu turun ke bawah
  • Tanpa CSS, tidak bisa membuat sidebar di samping konten
  • Kita tetap bisa membuat struktur HTML yang rapi untuk persiapan layout
  • Warna background (inline style) membantu visualisasi struktur
  • Nanti setelah belajar CSS (Flexbox/Grid), kita bisa mengubah posisi div menjadi horizontal
  • Jangan kecewa jika layout masih vertikal — itu normal untuk HTML tanpa CSS
Tantangan Akhir Pekan: Buat sebuah kerangka website landing page untuk produk fiktif (misal: aplikasi, kursus, atau produk digital). Struktur harus memiliki:
  • Header dengan judul produk dan tagline
  • Navigasi (Home, Fitur, Harga, Kontak)
  • Section Hero (area selamat datang dengan tombol CTA)
  • Section Fitur (3 kolom fitur — meskipun masih vertikal, tetap buat strukturnya)
  • Section Testimoni (2-3 kartu testimoni)
  • Sidebar (opsional, bisa berisi promo atau form newsletter)
  • Footer dengan link sosial media dan copyright
Gunakan warna background berbeda untuk setiap section agar mudah dibedakan. Di bagian bawah halaman, tulis catatan refleksi:
"Saat ini layout masih vertikal karena belum pakai CSS. Setelah belajar CSS Flexbox/Grid, saya akan mengatur posisi section fitur menjadi 3 kolom horizontal dan sidebar berdampingan dengan konten."

Ini akan menjadi bekal berharga saat kamu mulai belajar CSS layout nanti!

Artikel Sebelumnya: HTML Dasar #17 - Tag Layout Dasar: header, nav, main, article, section, aside, footer
Artikel Selanjutnya: HTML Dasar #19 - Menggunakan br dan hr untuk Garis & Spasi

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال