📋 Daftar Isi
1. Pengenalan HTML
HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk membuat dan menyusun konten di halaman web. HTML bukan bahasa pemrograman — melainkan bahasa markup yang mendefinisikan struktur dan makna konten menggunakan elemen-elemen yang disebut tags.
Setiap halaman web yang Anda lihat di browser dibangun dengan HTML sebagai fondasinya. Browser membaca file HTML dan merender kontennya ke layar. Tanpa HTML, tidak ada konten yang bisa ditampilkan.
Struktur Dasar Dokumen HTML
Setiap dokumen HTML memiliki struktur dasar yang wajib ada. Berikut adalah kerangka minimal sebuah dokumen HTML5:
HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman</title>
</head>
<body>
<!-- Konten halaman ditulis di sini -->
<h1>Hello World!</h1>
<p>Ini adalah halaman web pertamaku.</p>
</body>
</html>
Penjelasan Struktur
| Elemen | Fungsi |
|---|---|
<!DOCTYPE html> | Memberitahu browser bahwa dokumen ini menggunakan HTML5 |
<html> | Elemen root yang membungkus seluruh konten halaman |
<head> | Berisi metadata seperti charset, viewport, judul halaman, dan link ke CSS |
<meta charset> | Menentukan encoding karakter — UTF-8 mendukung semua karakter internasional |
<meta viewport> | Membuat halaman responsif di perangkat mobile |
<title> | Judul halaman yang muncul di tab browser dan hasil pencarian |
<body> | Berisi semua konten yang terlihat oleh pengguna di halaman |
Diagram: Struktur DOM (Document Object Model)
┌───────────────────────────────────────────────┐ │ <html> │ │ ┌──────────────────────────────────────────┐ │ │ │ <head> │ │ │ │ ┌─────────────┐ ┌───────────────────┐ │ │ │ │ │ <meta> │ │ <title> │ │ │ │ │ │ charset, │ │ Judul Halaman │ │ │ │ │ │ viewport │ │ │ │ │ │ │ └─────────────┘ └───────────────────┘ │ │ │ └──────────────────────────────────────────┘ │ │ ┌──────────────────────────────────────────┐ │ │ │ <body> │ │ │ │ ┌────────────────────────────────────┐ │ │ │ │ │ <header> │ │ │ │ │ │ └─ <nav> (navigasi situs) │ │ │ │ │ ├────────────────────────────────────┤ │ │ │ │ │ <main> │ │ │ │ │ │ ├─ <h1> (judul utama) │ │ │ │ │ │ ├─ <p> (paragraf) │ │ │ │ │ │ └─ <img> (gambar) │ │ │ │ │ ├────────────────────────────────────┤ │ │ │ │ │ <footer> │ │ │ │ │ │ └─ <p> (copyright) │ │ │ │ │ └────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────┘ │ └───────────────────────────────────────────────┘
2. Elemen HTML Dasar
HTML menggunakan tag untuk mendefinisikan elemen. Setiap tag biasanya berpasangan: tag pembuka <tag> dan tag penutup </tag>. Beberapa tag bersifat self-closing (tidak punya penutup) seperti <img>, <br>, dan <input>.
Heading (Judul)
HTML menyediakan 6 level heading dari <h1> (paling besar/penting) hingga <h6> (paling kecil). Heading <h1> sebaiknya hanya digunakan sekali per halaman sebagai judul utama:
HTML
<h1>Judul Utama Halaman</h1> <h2>Judul Bagian (Section)</h2> <h3>Judul Sub-bagian</h3> <h4>Judul Sub-sub-bagian</h4> <h5>Heading Level 5</h5> <h6>Heading Level 6</h6>
Paragraf dan Teks
HTML
<p>Ini adalah sebuah paragraf. Paragraf adalah blok teks yang dipisahkan oleh spasi vertikal.</p> <p>Paragraf kedua dengan <strong>teks tebal</strong> dan <em>teks miring</em> di dalamnya.</p> <p>Gunakan <mark>highlight</mark> untuk menandai teks penting.</p> <p>Teks <small>lebih kecil</small> dan <del>teks dicoret</del>.</p> <p>Rumus air: H<sub>2</sub>O dan E = mc<sup>2</sup></p>
Link dan Gambar
HTML
<!-- Link (Hyperlink) --> <a href="https://beebanelabs.pages.dev">Kunjungi BeebaneLabs</a> <a href="/tentang.html" target="_blank">Buka di tab baru</a> <a href="#quiz">Langsung ke Quiz</a> <!-- Gambar --> <img src="foto.jpg" alt="Deskripsi gambar" width="600" height="400"> <img src="logo.png" alt="Logo Website" loading="lazy">
⚠️ Selalu Gunakan atribut alt pada gambar
Atribut alt pada tag <img> sangat penting untuk aksesibilitas (screen reader untuk tunanetra) dan SEO. Jika gambar gagal dimuat, teks alt akan ditampilkan sebagai pengganti. Tulis deskripsi yang jelas dan singkat tentang isi gambar.
Daftar (Lists)
HTML
<!-- Unordered List (Daftar Tidak Berurutan) -->
<ul>
<li>HTML — Struktur</li>
<li>CSS — Styling</li>
<li>JavaScript — Interaktivitas</li>
</ul>
<!-- Ordered List (Daftar Berurutan) -->
<ol>
<li>Buka text editor</li>
<li>Tulis kode HTML</li>
<li>Simpan sebagai .html</li>
<li>Buka di browser</li>
</ol>
<!-- Nested List (Daftar Bersarang) -->
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>Python</li>
<li>Node.js</li>
</ul>
</li>
</ul>
Tabel
HTML
<table>
<thead>
<tr>
<th>Nama</th>
<th>Bahasa</th>
<th>Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tutorial HTML</td>
<td>HTML/CSS</td>
<td>Pemula</td>
</tr>
<tr>
<td>Tutorial JavaScript</td>
<td>JavaScript</td>
<td>Pemula</td>
</tr>
</tbody>
</table>
Formulir (Forms)
HTML
<form action="/submit" method="POST">
<label for="nama">Nama Lengkap:</label>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="email@kamu.com" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="gender">Jenis Kelamin:</label>
<select id="gender" name="gender">
<option value="">-- Pilih --</option>
<option value="L">Laki-laki</option>
<option value="P">Perempuan</option>
</select>
<label for="pesan">Pesan:</label>
<textarea id="pesan" name="pesan" rows="4"></textarea>
<label>
<input type="checkbox" name="setuju" required>
Saya setuju dengan syarat dan ketentuan
</label>
<button type="submit">Kirim</button>
</form>
💡 Tips Praktik
Coba buat file index.html di komputer Anda dan buka dengan browser. Tulis semua elemen di atas satu per satu dan lihat hasilnya langsung. Belajar HTML paling efektif dengan cara praktik langsung — bukan hanya membaca teori!
3. Semantic HTML
Semantic HTML adalah penggunaan elemen HTML yang memiliki makna jelas tentang konten yang dibungkusnya. Berbeda dengan elemen generik seperti <div> dan <span>, elemen semantik menjelaskan tujuan kontennya kepada browser, mesin pencari, dan teknologi asistif (screen reader).
Mengapa Semantic HTML Penting?
| Manfaat | Penjelasan |
|---|---|
| Aksesibilitas | Screen reader dapat memahami struktur halaman dan membantu pengguna tunanetra bernavigasi |
| SEO | Search engine lebih mudah mengindeks dan memahami konten halaman Anda |
| Keterbacaan Kode | Pengembang lain (atau diri sendiri di masa depan) lebih mudah memahami kode |
| Maintainability | Struktur yang jelas membuat kode lebih mudah diubah dan dikelola |
| Standar Web | Mematuhi standar W3C dan best practices industri |
Elemen Semantik Utama
HTML — Semantic Layout
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Website dengan Semantic HTML</title>
</head>
<body>
<!-- HEADER: Berisi logo dan navigasi -->
<header>
<nav>
<ul>
<li><a href="/">Beranda</a></li>
<li><a href="/artikel">Artikel</a></li>
<li><a href="/kontak">Kontak</a></li>
</ul>
</nav>
</header>
<!-- MAIN: Konten utama halaman -->
<main>
<article>
<h1>Judul Artikel</h1>
<time datetime="2026-06-25">25 Juni 2026</time>
<p>Isi artikel...</p>
<section>
<h2>Sub-bagian Artikel</h2>
<p>Konten sub-bagian...</p>
</section>
<section>
<h2>Sub-bagian Lain</h2>
<figure>
<img src="gambar.jpg" alt="Deskripsi">
<figcaption>Keterangan gambar</figcaption>
</figure>
</section>
</article>
<!-- ASIDE: Konten samping/sidebar -->
<aside>
<h3>Artikel Terkait</h3>
<ul>
<li><a href="#">Tutorial CSS</a></li>
<li><a href="#">Tutorial JavaScript</a></li>
</ul>
</aside>
</main>
<!-- FOOTER: Bagian bawah halaman -->
<footer>
<p>© 2026 BeebaneLabs. Semua hak dilindungi.</p>
</footer>
</body>
</html>
Diagram: Perbandingan Non-Semantic vs Semantic HTML
❌ NON-SEMANTIC (Tidak Direkomendasikan) ┌──────────────────────────────────────────────┐ │ <div id="header"> │ │ <div class="nav">...</div> │ │ </div> │ │ <div id="main"> │ │ <div class="article"> │ │ <div class="title">...</div> │ │ </div> │ │ </div> │ │ <div id="footer"> │ │ </div> │ └──────────────────────────────────────────────┘ ✅ SEMANTIC (Direkomendasikan) ┌──────────────────────────────────────────────┐ │ <header> │ │ <nav>...</nav> │ │ </header> │ │ <main> │ │ <article> │ │ <h1>...</h1> │ │ </article> │ │ </main> │ │ <footer> │ │ </footer> │ └──────────────────────────────────────────────┘
4. Pengenalan CSS
CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan layout elemen HTML. Jika HTML adalah kerangka tubuh, maka CSS adalah pakaian dan make-up yang membuatnya terlihat menarik.
CSS mengontrol warna, font, ukuran, jarak, posisi, animasi, dan semua aspek visual halaman web. Ada 3 cara menggunakan CSS:
Cara Menggunakan CSS
HTML — 3 Cara CSS
<!-- 1. Inline CSS (langsung di elemen) — Tidak direkomendasikan -->
<p style="color: blue; font-size: 16px;">Teks biru</p>
<!-- 2. Internal CSS (di <style> dalam <head>) — Untuk halaman tunggal -->
<head>
<style>
p { color: blue; font-size: 16px; }
</style>
</head>
<!-- 3. External CSS (file .css terpisah) — Paling direkomendasikan -->
<head>
<link rel="stylesheet" href="style.css">
</head>
💡 Best Practice
Selalu gunakan external CSS untuk proyek nyata. Keuntungannya: kode lebih rapi, bisa di-cache browser, bisa digunakan di banyak halaman, dan memisahkan konten (HTML) dari presentasi (CSS).
Sintaks CSS Dasar
CSS — Sintaks Dasar
/* Sintaks CSS: selector { property: value; } */
/* Mengubah warna dan ukuran teks */
h1 {
color: #2563eb;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
/* Mengatur paragraf */
p {
color: #374151;
font-size: 1rem;
line-height: 1.8;
margin-bottom: 1rem;
}
/* Mengatur link */
a {
color: #2563eb;
text-decoration: none;
}
a:hover {
color: #1d4ed8;
text-decoration: underline;
}
Warna di CSS
CSS — Format Warna
/* Named colors */
h1 { color: red; }
h2 { color: blue; }
p { color: darkslategray; }
/* Hex (paling umum digunakan) */
.header { background-color: #1e293b; }
.button { background-color: #2563eb; }
.text { color: #374151; }
/* RGB */
.card { background-color: rgb(255, 255, 255); }
.overlay { background-color: rgba(0, 0, 0, 0.5); } /* dengan transparansi */
/* HSL (Hue, Saturation, Lightness) */
.primary { color: hsl(220, 90%, 56%); }
.secondary { color: hsl(220, 15%, 50%); }
5. CSS Selectors
Selector adalah pola yang digunakan untuk memilih elemen HTML yang ingin di-styling. CSS menyediakan berbagai jenis selector dari yang sederhana hingga yang sangat spesifik.
Jenis-Jenis Selector
CSS — Selectors
/* ===== 1. Universal Selector ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ===== 2. Element/Type Selector ===== */
p { color: #374151; }
h1 { font-size: 2.5rem; }
/* ===== 3. Class Selector (.) ===== */
.card { background: white; border-radius: 8px; }
.btn-primary { background: #2563eb; color: white; }
/* ===== 4. ID Selector (#) — unik per halaman ===== */
#header { background: #1e293b; }
#footer { background: #111827; }
/* ===== 5. Attribute Selector ===== */
input[type="email"] { border: 2px solid #2563eb; }
a[target="_blank"] { color: purple; }
/* ===== 6. Descendant Selector (spasi) ===== */
.card p { font-size: 0.9rem; color: #6b7280; }
/* ===== 7. Child Selector (>) ===== */
.navbar > ul { list-style: none; }
/* ===== 8. Sibling Selectors ===== */
h2 + p { font-weight: bold; } /* Adjacent sibling */
h2 ~ p { color: #6b7280; } /* General sibling */
/* ===== 9. Pseudo-class ===== */
a:hover { color: #1d4ed8; }
input:focus { outline: 2px solid #2563eb; }
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
/* ===== 10. Pseudo-element ===== */
p::first-line { font-weight: bold; }
p::before { content: "→ "; color: #2563eb; }
p::selection { background: #bfdbfe; color: #1e293b; }
/* ===== 11. Grouping Selector ===== */
h1, h2, h3 {
font-family: 'Inter', sans-serif;
color: #1e293b;
}
/* ===== 12. Kombinasi Complex ===== */
.card.featured > .card-header h3 {
color: #2563eb;
font-size: 1.25rem;
}
Specificity (Spesifisitas)
Ketika beberapa selector menargetkan elemen yang sama, CSS menggunakan specificity untuk menentukan mana yang menang:
Diagram: CSS Specificity Hierarchy
Spesifisitas (dari terlemah ke terkuat):
┌─────────────────────────────────────────────────────┐
│ 1. Universal Selector (*) → (0,0,0,0) │
│ 2. Element Selector (p, div) → (0,0,0,1) │
│ 3. Class Selector (.card) → (0,0,1,0) │
│ 4. Attribute Selector ([type]) → (0,0,1,0) │
│ 5. Pseudo-class (:hover) → (0,0,1,0) │
│ 6. ID Selector (#header) → (0,1,0,0) │
│ 7. Inline style (style="") → (1,0,0,0) │
│ 8. !important → MENGALAHKAN SEMUA│
└─────────────────────────────────────────────────────┘
Contoh:
p { color: blue; } → specificity: (0,0,0,1)
.text { color: red; } → specificity: (0,0,1,0) → MENANG
#intro { color: green; } → specificity: (0,1,0,0) → MENANG
⚠️ Hindari Penggunaan !important
Penggunaan !important berlebihan membuat CSS sulit di-maintain karena mengalahkan semua aturan specificity. Gunakan hanya sebagai pilihan terakhir dan segera refactor kode Anda jika memungkinkan.
6. Box Model
Setiap elemen HTML direpresentasikan sebagai sebuah kotak persegi di halaman web. Box Model CSS mendefinisikan bagaimana ukuran, padding, border, dan margin bekerja bersama untuk menentukan ruang yang ditempati setiap elemen.
Diagram: CSS Box Model
┌───────────────────────────────────────────────────┐ │ MARGIN │ │ ┌─────────────────────────────────────────────┐ │ │ │ BORDER │ │ │ │ ┌───────────────────────────────────────┐ │ │ │ │ │ PADDING │ │ │ │ │ │ ┌─────────────────────────────────┐ │ │ │ │ │ │ │ CONTENT │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ width x height │ │ │ │ │ │ │ │ Teks / Gambar / Konten │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────────┘ │ │ │ │ │ └───────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────┘ │ └───────────────────────────────────────────────────┘ Content → Isi elemen (teks, gambar) Padding → Ruang di antara content dan border Border → Garis tepi elemen Margin → Ruang di luar border (antar elemen)
Mengatur Box Model
CSS — Box Model
/* BEST PRACTICE: Gunakan border-box untuk semua elemen */
* {
box-sizing: border-box;
/* Dengan border-box, width/height INCLUDES padding + border */
/* Tanpa border-box (content-box), width HANYA content */
}
/* Contoh Card dengan Box Model */
.card {
width: 300px; /* Total lebar = 300px (dengan border-box) */
padding: 20px; /* Ruang dalam: 20px di semua sisi */
border: 1px solid #e5e7eb; /* Garis tepi */
margin: 16px; /* Ruang luar: 16px di semua sisi */
border-radius: 8px; /* Sudut membulat */
}
/* Padding individual per sisi */
.box {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
/* Shorthand: padding: 10px 20px; (atas-bawah kiri-kanan) */
/* Shorthand: padding: 10px 20px 10px 20px; (atas kanan bawah kiri) */
}
/* Margin individual per sisi */
.section {
margin-top: 2rem;
margin-bottom: 2rem;
margin-left: auto; /* Centering horizontal */
margin-right: auto; /* Centering horizontal */
/* Shorthand: margin: 2rem auto; */
}
/* Perbedaan content-box vs border-box */
.content-box-example {
box-sizing: content-box; /* Default browser */
width: 300px;
padding: 20px;
border: 2px solid black;
/* Total lebar = 300 + 20*2 + 2*2 = 344px */
}
.border-box-example {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 2px solid black;
/* Total lebar = 300px (sudah termasuk padding dan border) */
}
Perbandingan Visual:
content-box: width 300px + padding 40px + border 4px = Total 344px
border-box: width 300px (sudah termasuk semua) = Total 300px
💡 Menggunakan border-box membuat perhitungan layout jauh lebih mudah!
7. Flexbox Layout
Flexbox (Flexible Box Layout) adalah sistem layout satu dimensi di CSS yang memudahkan penyusunan elemen secara horizontal atau vertical. Flexbox sangat cocok untuk membuat navigasi, card layouts, centering, dan distribusi ruang antar elemen.
Konsep Dasar Flexbox
Diagram: Flexbox Axis
Main Axis (default: horizontal →)
──────────────────────────────────────────►
┌──────────┐ ┌──────────┐ ┌──────────┐
│ Item 1 │ │ Item 2 │ │ Item 3 │ ▲
└──────────┘ └──────────┘ └──────────┘ │
│ Cross Axis
│ (default: vertical)
▼
Container (display: flex) → Flex Container
Anak-anak langsung → Flex Items
Flex Container Properties
CSS — Flexbox Container
/* Mengaktifkan Flexbox */
.container {
display: flex;
/* 1. flex-direction: arah main axis */
flex-direction: row; /* → horizontal (default) */
/* flex-direction: column; ↓ vertical */
/* flex-direction: row-reverse; ← horizontal terbalik */
/* 2. justify-content: distribusi sepanjang main axis */
justify-content: flex-start; /* |□□□ | */
/* justify-content: center; | □□□ | */
/* justify-content: flex-end; | □□□| */
/* justify-content: space-between;|□ □ □| */
/* justify-content: space-around; | □ □ □ | */
/* justify-content: space-evenly; | □ □ □ | */
/* 3. align-items: distribusi sepanjang cross axis */
align-items: stretch; /* Meregang penuh (default) */
/* align-items: flex-start; Di atas */
/* align-items: center; Di tengah */
/* align-items: flex-end; Di bawah */
/* 4. flex-wrap: apakah item boleh pindah baris */
flex-wrap: wrap; /* Ya, pindah baris jika perlu */
/* flex-wrap: nowrap; Tidak, tetap satu baris (default) */
/* 5. gap: jarak antar item */
gap: 16px;
/* gap: 16px 24px; → row-gap 16px, column-gap 24px */
}
Flex Item Properties
CSS — Flexbox Items
.item {
/* 1. flex-grow: seberapa besar item boleh tumbuh */
flex-grow: 1; /* Default: 0 (tidak tumbuh) */
/* 2. flex-shrink: seberapa besar item boleh menyusut */
flex-shrink: 0; /* Default: 1 (boleh menyusut) */
/* 3. flex-basis: ukuran dasar sebelum grow/shrink */
flex-basis: 200px; /* Default: auto */
/* Shorthand: flex: grow shrink basis */
flex: 1 0 200px;
flex: 1; /* Sama dengan flex: 1 1 0% */
/* 4. align-self: override align-items untuk item tertentu */
align-self: flex-end;
/* 5. order: urutan tampilan */
order: -1; /* Tampil paling awal */
}
Contoh Praktis: Navbar Flexbox
HTML + CSS — Navbar
<nav class="navbar">
<div class="brand">BeebaneLabs</div>
<ul class="nav-links">
<li><a href="#">Beranda</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
<style>
.navbar {
display: flex;
justify-content: space-between; /* Logo kiri, links kanan */
align-items: center; /* Vertically centered */
padding: 1rem 2rem;
background: #1e293b;
}
.brand {
font-size: 1.5rem;
font-weight: 700;
color: white;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
color: #94a3b8;
text-decoration: none;
}
</style>
Contoh: Centering dengan Flexbox
CSS — Centering
/* Center perfectly — horizontal & vertical */
.center-wrapper {
display: flex;
justify-content: center; /* Horizontal center */
align-items: center; /* Vertical center */
min-height: 100vh; /* Full viewport height */
}
/* Center card layout */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.card {
flex: 0 1 300px; /* Don't grow, can shrink, base 300px */
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
8. CSS Grid Layout
CSS Grid adalah sistem layout dua dimensi yang memungkinkan Anda mengatur elemen dalam baris dan kolom secara bersamaan. Berbeda dengan Flexbox yang satu dimensi, Grid dirancang untuk layout keseluruhan halaman dan komponen kompleks.
Perbedaan Flexbox vs Grid
| Aspek | Flexbox | Grid |
|---|---|---|
| Dimensi | Satu dimensi (baris ATAU kolom) | Dua dimensi (baris DAN kolom) |
| Cocok untuk | Navbar, card row, centering | Layout halaman, dashboard, galeri |
| Kontrol | Item mengatur diri sendiri | Container mengatur posisi item |
| Pendekatan | Content-first | Layout-first |
| Overlap | Sulit | Mudah dengan grid-area |
Grid Container
CSS — Grid Layout
.grid-container {
display: grid;
/* Mendefinisikan kolom: 3 kolom sama besar */
grid-template-columns: 1fr 1fr 1fr;
/* Atau: grid-template-columns: repeat(3, 1fr); */
/* Mendefinisikan baris */
grid-template-rows: auto 1fr auto;
/* Gap antar sel */
gap: 20px;
row-gap: 20px;
column-gap: 20px;
/* Ukuran container */
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* fr unit = fractional unit (proporsi dari ruang tersedia) */
.grid-demo {
grid-template-columns: 2fr 1fr; /* Kolom 1: 2/3, Kolom 2: 1/3 */
grid-template-columns: 1fr 2fr 1fr; /* Sidebar - Main - Sidebar */
}
/* Grid Items */
.grid-item {
background: #1e293b;
padding: 20px;
border-radius: 8px;
color: white;
}
/* Item yang menempati beberapa kolom */
.grid-item-wide {
grid-column: 1 / 3; /* Span kolom 1 sampai 3 */
/* Atau: grid-column: span 2; */
}
/* Item yang menempati beberapa baris */
.grid-item-tall {
grid-row: span 2;
}
/* Menentukan posisi spesifik */
.grid-item-pos {
grid-column: 2; /* Kolom ke-2 */
grid-row: 1; /* Baris ke-1 */
}
Contoh: Layout Halaman dengan Grid
HTML + CSS — Page Layout
<div class="page-layout">
<header class="page-header">Header</header>
<nav class="page-nav">Navigation</nav>
<main class="page-main">Main Content</main>
<aside class="page-sidebar">Sidebar</aside>
<footer class="page-footer">Footer</footer>
</div>
<style>
.page-layout {
display: grid;
grid-template-columns: 250px 1fr; /* Sidebar | Main */
grid-template-rows: auto auto 1fr auto;
grid-template-areas:
"header header"
"nav nav"
"sidebar main"
"footer footer";
min-height: 100vh;
gap: 0;
}
.page-header { grid-area: header; background: #1e293b; color: white; padding: 1rem; }
.page-nav { grid-area: nav; background: #334155; padding: 0.5rem; }
.page-sidebar { grid-area: sidebar; background: #0f172a; padding: 1rem; }
.page-main { grid-area: main; padding: 2rem; }
.page-footer { grid-area: footer; background: #1e293b; padding: 1rem; }
</style>
CSS Grid Functions
CSS — Grid Functions
/* repeat() — mengulang pola kolom */
.gallery {
grid-template-columns: repeat(3, 1fr); /* 3 kolom sama besar */
}
/* minmax() — batas minimum dan maksimum */
.auto-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
/* Otomatis buat kolom sebanyak mungkin, minimum 250px */
}
/* auto-fill vs auto-fit */
/* auto-fill: membuat kolom kosong jika ada ruang */
/* auto-fit: meruntuhkan kolom kosong, item meregang */
💡 Kapan Gunakan Apa?
Gunakan Flexbox untuk layout satu dimensi: navbar, card row, tombol group, centering. Gunakan Grid untuk layout dua dimensi: layout halaman, dashboard, galeri foto, form kompleks. Keduanya bisa digabung — dan memang seharusnya begitu!
9. Dasar Responsive Design
Responsive Web Design adalah pendekatan desain yang membuat halaman web terlihat dan berfungsi dengan baik di semua ukuran layar — dari smartphone kecil hingga monitor desktop besar. Tujuannya adalah pengalaman pengguna yang optimal di setiap perangkat.
Media Queries
Media queries memungkinkan Anda menerapkan CSS berbeda berdasarkan karakteristik perangkat seperti lebar layar:
CSS — Media Queries
/* Default: Mobile-first (style untuk mobile) */
.container {
padding: 1rem;
max-width: 100%;
}
.card-grid {
display: grid;
grid-template-columns: 1fr; /* 1 kolom di mobile */
gap: 1rem;
}
h1 {
font-size: 1.5rem;
}
/* Tablet: 768px ke atas */
@media (min-width: 768px) {
.container {
padding: 2rem;
max-width: 720px;
margin: 0 auto;
}
.card-grid {
grid-template-columns: repeat(2, 1fr); /* 2 kolom */
}
h1 {
font-size: 2rem;
}
}
/* Desktop: 1024px ke atas */
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
.card-grid {
grid-template-columns: repeat(3, 1fr); /* 3 kolom */
}
h1 {
font-size: 2.5rem;
}
}
/* Large Desktop: 1280px ke atas */
@media (min-width: 1280px) {
.container {
max-width: 1200px;
}
}
Unit Responsif
CSS — Responsive Units
/* rem = relative to root element (html) font-size */
/* Biasanya 1rem = 16px (browser default) */
h1 { font-size: 2.5rem; } /* 40px */
p { font-size: 1rem; } /* 16px */
/* em = relative to parent element font-size */
.card h3 { font-size: 1.25em; } /* 1.25x dari parent */
/* % = relative to parent element */
.container { width: 90%; max-width: 1200px; }
/* vw = viewport width (1vw = 1% dari lebar layar) */
.hero { font-size: 5vw; } /* Skala otomatis sesuai layar */
/* vh = viewport height */
.hero { min-height: 100vh; } /* Setinggi layar */
/* clamp() = fluid typography (min, preferred, max) */
h1 { font-size: clamp(1.5rem, 4vw, 3rem; }
/* Minimum 1.5rem, ideal 4vw, maksimum 3rem */
📖 Breakpoints Umum
- Mobile: 0 — 767px
- Tablet: 768px — 1023px
- Desktop: 1024px — 1279px
- Large Desktop: 1280px ke atas
Gunakan min-width (mobile-first) daripada max-width untuk kode yang lebih bersih dan mudah di-maintain.
10. Quiz: Uji Pemahamanmu!
Setelah membaca tutorial di atas, jawablah 5 pertanyaan berikut untuk menguji pemahamanmu tentang HTML & CSS Dasar: