Div, Class, dan Pengenalan CSS
Sampai chapter sebelumnya, semua halaman yang kamu buat masih terlihat “polos”. Teks hitam di atas background putih, tanpa layout, tanpa warna. Chapter ini yang mengubah itu.
Tag <div>: Kotak Pembungkus
<div> adalah tag yang paling sering kamu temui di HTML mana pun. Fungsinya sederhana: mengelompokkan elemen-elemen lain ke dalam satu blok.
<div>
<h2>Fitur Unggulan</h2>
<p>Penjelasan fitur di sini.</p>
</div><div> sendiri tidak mengubah tampilan apa-apa. Tapi begitu kamu kasih styling lewat CSS, <div> jadi alat yang sangat powerful untuk mengatur layout.
Analoginya: <div> itu seperti kardus. Kardusnya sendiri tidak punya fungsi spesial, tapi kamu bisa menyusun barang-barang di dalamnya, menumpuk kardus-kardus, dan mengatur posisi mereka di ruangan.
class dan id: Memberi Identitas
Untuk meng-styling elemen tertentu, kamu butuh cara untuk mengidentifikasinya. Ada dua atribut utama:
class — Label yang bisa dipakai berulang kali:
<div class="feature-card">
<h3>Gratis Ongkir</h3>
<p>Berlaku untuk semua pembelian di atas Rp 100.000</p>
</div>
<div class="feature-card">
<h3>Garansi Uang Kembali</h3>
<p>30 hari tanpa syarat</p>
</div>Kedua div di atas punya class yang sama, jadi bisa di-styling secara seragam.
id — Identitas unik, hanya boleh dipakai sekali per halaman:
<div id="pricing-section">
<h2>Harga</h2>
</div>Aturan simpel: pakai class untuk styling, pakai id untuk identifikasi unik (seperti target link internal atau tracking).
CSS: Memberi Tampilan
CSS (Cascading Style Sheets) adalah bahasa yang mengatur tampilan elemen HTML. Ada tiga cara memasang CSS:
1. Inline Style (langsung di elemen)
<h1 style="color: #1a73e8; font-size: 36px;">Judul Biru</h1>Cara ini cepat tapi tidak efisien untuk banyak elemen.
2. Internal Style (di dalam <head>)
<head>
<style>
.cta-button {
background-color: #22c55e;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
}
</style>
</head>3. External Style (file CSS terpisah)
<head>
<link rel="stylesheet" href="style.css">
</head>Untuk landing page sederhana, internal style sudah cukup. Untuk proyek yang lebih besar, external style lebih rapi.
CSS yang Wajib Diketahui Advertiser
Kamu tidak perlu menguasai semua CSS. Cukup properti-properti ini:
.hero-section {
background-color: #1a1a2e; /* Warna background */
color: #ffffff; /* Warna teks */
padding: 60px 20px; /* Jarak konten ke tepi */
text-align: center; /* Rata tengah */
}
.cta-button {
background-color: #e94560; /* Warna tombol */
color: white; /* Warna teks tombol */
padding: 16px 32px; /* Ukuran tombol */
border: none; /* Hapus border default */
border-radius: 8px; /* Sudut melengkung */
font-size: 18px; /* Ukuran font */
text-decoration: none; /* Hapus garis bawah link */
display: inline-block; /* Supaya padding bekerja di link */
}Buat kamu paham polanya: CSS itu selalu format properti: nilai; di dalam kurung kurawal.
Semantic HTML: Bukan Cuma <div>
HTML5 punya tag-tag yang lebih bermakna daripada <div>:
<header>
<nav>Menu navigasi</nav>
</header>
<main>
<section>
<h2>Fitur</h2>
<p>Konten seksi fitur</p>
</section>
<section>
<h2>Harga</h2>
<p>Konten seksi harga</p>
</section>
</main>
<footer>
<p>© 2026 Nama Brand</p>
</footer>Tag-tag ini secara fungsional sama seperti <div>, tapi punya makna semantik. Browser, screen reader, dan Google bisa memahami struktur halaman lebih baik. Ini membantu SEO dan Quality Score landing page kamu.
Praktik: Landing Page Mini dengan Styling
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promo Spesial</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; }
.hero {
background-color: #1a1a2e;
color: white;
padding: 80px 20px;
text-align: center;
}
.hero h1 { font-size: 36px; margin-bottom: 16px; }
.hero p { font-size: 18px; color: #cccccc; }
.cta {
display: inline-block;
background-color: #e94560;
color: white;
padding: 16px 32px;
border-radius: 8px;
text-decoration: none;
font-size: 18px;
margin-top: 24px;
}
</style>
</head>
<body>
<section class="hero">
<h1>Diskon 50% untuk 100 Pendaftar Pertama</h1>
<p>Kursus online digital marketing paling lengkap di Indonesia.</p>
<a href="#daftar" class="cta">Daftar Sekarang</a>
</section>
</body>
</html>Salin seluruh kode ini ke CodePen dan lihat hasilnya. Kamu sekarang sudah bisa membuat landing page mini yang tidak memalukan lagi.
Chapter berikutnya, kita masuk ke topik yang sangat kritikal untuk advertiser: memasang tracking pixel secara manual.