HTML dari Nol hingga 100 Contoh: Struktur, Formulir, Media, dan Semua Jenis Properti CSS

HTML memberi halaman web strukturnya, dan CSS memberinya tampilan dan tata letak. Artikel ini dibangun dari halaman satu baris sampai 100 contoh yang bisa langsung dipakai. Anda akan mempelajari tag untuk teks, daftar, tautan, formulir, tabel, media, dan struktur halaman, lalu properti CSS untuk warna, jarak, teks, latar belakang, posisi, flexbox, grid, transisi, dan animasi. Setiap contoh adalah cuplikan kecil yang bisa Anda tempel ke dalam sebuah berkas dan buka di browser. Baca satu bagian, lalu ubah contohnya dan lihat apa yang terjadi.

Yang Anda butuhkan

Editor teks biasa seperti VS Code atau Notepad, dan browser web modern seperti Chrome, Edge, atau Firefox. Simpan berkas dengan ekstensi .html dan bukalah dengan klik dua kali, atau seret ke jendela browser. Tidak diperlukan pengalaman pemrograman. Mengetahui apa itu folder berkas akan membantu.

Cara menguji sebuah contoh

Buat berkas bernama test.html dan tempel contohnya ke dalam body halaman lengkap (kerangka dari Contoh 1). Simpan lalu buka di browser. Contoh yang hanya berisi CSS memerlukan elemen style di dalam head.

Topik 1: Struktur dasar dan head dokumen

Setiap halaman HTML memiliki kerangka yang sama: doctype, elemen html, head yang berisi informasi tentang halaman, dan body yang berisi apa yang dilihat pembaca.

Kerangka dokumen

Baris doctype memberi tahu browser untuk memakai HTML modern. Elemen html memiliki atribut lang, yang memberi tahu pembaca layar dan penerjemah bahasa yang dipakai halaman. Semua yang dilihat pembaca berada di dalam body.

Elemen head

Head tidak terlihat. Ia berisi judul yang ditampilkan di tab browser, charset yang membuat huruf Thailand dan Arab tampil dengan benar, deskripsi yang dipakai di hasil pencarian, dan tag viewport yang membuat halaman pas di ponsel.

Judul, paragraf, dan daftar

Gunakan h1 sekali per halaman untuk judul utama, lalu h2 dan h3 untuk bagian. p membuat paragraf. ul adalah daftar berpoin, ol daftar bernomor, dan dl daftar pasangan istilah dan deskripsi. Pilih elemen berdasarkan maknanya, bukan tampilannya, dan atur tampilannya dengan CSS nanti.

Contoh 1: Halaman minimal

Dokumen HTML lengkap yang paling kecil.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My first page</title>
</head>
<body>
  <h1>Hello, HTML</h1>
</body>
</html>

Contoh 2: Judul

h1 adalah judul paling penting, h6 yang paling kecil.

<h1>Main title</h1>
<h2>Section</h2>
<h3>Sub-section</h3>
<h6>Smallest heading</h6>

Contoh 3: Paragraf dan pemutus baris

p membuat paragraf; br memaksa baris baru di dalamnya.

<p>First paragraph.</p>
<p>Second paragraph<br>with a line break.</p>

Contoh 4: Daftar tak berurut

ul dengan item li menampilkan poin-poin.

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

Contoh 5: Daftar berurut

ol memberi nomor pada itemnya; start menentukan nomor pertama.

<ol start="3">
  <li>Plan</li>
  <li>Build</li>
  <li>Test</li>
</ol>

Contoh 6: Daftar deskripsi

dl memasangkan istilah (dt) dengan deskripsi (dd).

<dl>
  <dt>HTML</dt>
  <dd>The structure of a web page.</dd>
  <dt>CSS</dt>
  <dd>The look and layout.</dd>
</dl>

Contoh 7: Tautan

a mengatur alamat; download menyimpan berkas; mailto membuka email.

<a href="https://example.com">Visit Example</a>
<a href="#top">Back to top</a>
<a href="mailto:[email protected]">Email us</a>
<a href="report.pdf" download>Download the report</a>

Contoh 8: Gambar dan teks alternatif

img menampilkan gambar; alt menjelaskannya untuk pembaca layar.

<img src="cat.jpg" alt="A grey cat sleeping on a sofa" width="300" height="200">

Contoh 9: Komentar dan meta viewport

Komentar tidak ditampilkan; tag viewport membuat halaman pas di ponsel.

<!-- This comment is not shown on the page -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Contoh 10: Head dokumen

lang, charset, title, dan description diletakkan di head.

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shop</title>
  <meta name="description" content="A small online shop.">
</head>
<body>
  <p>Welcome!</p>
</body>
</html>

Topik 2: Teks dan elemen inline

Elemen inline berada di dalam satu baris teks. Sebagian menambahkan makna bagi pembaca dan mesin pencari, sebagian lain hanya mengubah tampilan teks.

Makna versus tampilan

strong menandai teks penting dan em menandai penekanan. Pembaca layar bisa mengubah intonasi untuk keduanya. b dan i hanya membuat teks tebal atau miring tanpa menambah makna. Gunakan strong dan em ketika maknanya penting.

Elemen teks khusus

mark menyorot teks, small menampilkan tulisan kecil, sub dan sup menulis rumus kimia dan pangkat, code menampilkan kode inline, pre mempertahankan spasi dan baris baru, dan kbd menampilkan penekanan tombol.

Karakter dan tautan

Tulis < dan & sebagai &lt; dan &amp; agar browser tidak membacanya sebagai tag. Tautan memakai a dengan href. Gunakan download untuk menyimpan berkas, mailto untuk membuka email, dan selalu tulis teks tautan yang jelas, bukan klik di sini.

Contoh 11: Tebal, miring, dan penekanan

strong dan em membawa makna; b dan i hanya mengubah tampilan.

<p>This is <strong>important</strong> and this is <em>emphasised</em>.</p>
<p><b>Bold only</b> and <i>italic only</i>.</p>

Contoh 12: Mark, small, sub, dan sup

Menyorot teks dan menulis rumus kimia serta pangkat.

<p>Highlight: <mark>key word</mark></p>
<p>Small print: <small>terms apply</small></p>
<p>H<sub>2</sub>O and E = mc<sup>2</sup></p>

Contoh 13: Kode dan teks terformat

code menampilkan kode inline; pre mempertahankan spasi dan baris baru.

<p>Use the <code>print()</code> function.</p>
<pre>
  line 1
    indented line 2
</pre>

Contoh 14: Singkatan dan waktu

abbr menjelaskan kata pendek; time memberi tanggal yang bisa dibaca mesin.

<p><abbr title="HyperText Markup Language">HTML</abbr> is easy to learn.</p>
<p>Meet at <time datetime="2026-11-01T18:00">6 pm on 1 November</time>.</p>

Contoh 15: Blockquote dan kutipan

blockquote mengutip bagian yang lebih panjang; cite menyebutkan sumbernya.

<blockquote cite="https://example.com/book">
  Simplicity is the ultimate sophistication.
</blockquote>
<p>Source: <cite>Leonardo da Vinci</cite></p>

Contoh 16: Garis horizontal

hr menandai perpindahan topik.

<p>Chapter one ends here.</p>
<hr>
<p>Chapter two begins.</p>

Contoh 17: Wadah span dan div

div dan span mengelompokkan konten agar bisa diberi gaya oleh CSS.

<div class="card">
  <p>Price: <span class="price">250 THB</span></p>
</div>

Contoh 18: Karakter khusus

Tulis < > & dan simbol dengan referensi karakter.

<p>Less than: &lt; Greater than: &gt; Ampersand: &amp;</p>
<p>Copyright &copy; 2026 &nbsp; Thai baht &#3647;</p>

Contoh 19: Masukan keyboard

kbd menampilkan penekanan tombol kepada pembaca.

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

Contoh 20: Kutipan inline dan definisi

q menambahkan tanda kutip; dfn menandai istilah yang sedang didefinisikan.

<p>She said <q>hello</q> and left.</p>
<p><dfn>Latency</dfn> is the delay before a response.</p>

Topik 3: Formulir

Formulir mengumpulkan data dari pembaca. Setiap input memerlukan label, tipe yang sesuai, dan jika perlu aturan yang memeriksa nilainya sebelum dikirim.

Label dan tipe input

Hubungkan setiap label dengan inputnya memakai for dan id yang sama. Atribut type memilih keyboard dan pemilih yang tepat: email, number, date, color, atau range. Mengklik label kemudian memfokuskan inputnya, dan ini membantu semua orang.

Pilihan: radio, checkbox, select

Radio button memakai name yang sama sehingga hanya satu yang bisa dipilih. Checkbox memungkinkan beberapa pilihan. select dengan option memberi dropdown, dan selected menetapkan nilai awal. datalist menawarkan saran saat pembaca mengetik.

Validasi dan pengiriman

required mencegah pengiriman kosong, dan pattern memeriksa format dengan ekspresi reguler. Field hidden membawa nilai yang tidak dilihat pembaca. Selalu validasi juga di server, karena pemeriksaan browser bisa dilewati.

Contoh 21: Formulir sederhana

form dengan label, input, dan tombol kirim.

<form action="/signup" method="post">
  <label for="name">Name</label>
  <input type="text" id="name" name="name">
  <button type="submit">Sign up</button>
</form>

Contoh 22: Tipe input

Atribut type menghasilkan input email, number, date, color, dan range.

<input type="email" placeholder="[email protected]">
<input type="password">
<input type="number" min="1" max="10" step="1">
<input type="date">
<input type="color" value="#3366ff">
<input type="range" min="0" max="100">

Contoh 23: Kolom wajib dan pattern

required memblokir isian kosong; pattern memeriksa format.

<form>
  <input type="text" required placeholder="Username">
  <input type="text" pattern="[A-Za-z]{3,}" title="At least 3 letters">
  <button>Send</button>
</form>

Contoh 24: Radio button dan checkbox

Radio: pilih satu. Checkbox: pilih berapa pun.

<fieldset>
  <legend>Choose a plan</legend>
  <input type="radio" id="free" name="plan" value="free" checked>
  <label for="free">Free</label>
  <input type="radio" id="pro" name="plan" value="pro">
  <label for="pro">Pro</label>
</fieldset>
<input type="checkbox" id="news" checked>
<label for="news">Send me news</label>

Contoh 25: Dropdown select

select dengan item option; selected menetapkan nilai awal.

<label for="country">Country</label>
<select id="country" name="country">
  <option value="th" selected>Thailand</option>
  <option value="jp">Japan</option>
  <option value="us">United States</option>
</select>

Contoh 26: Textarea

Kotak teks multibaris dengan rows dan placeholder.

<label for="msg">Message</label>
<textarea id="msg" rows="4" cols="40" placeholder="Write here..."></textarea>

Contoh 27: Saran datalist

Input yang menawarkan saran saat mengetik.

<input list="fruits" name="fruit">
<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
</datalist>

Contoh 28: Tombol

Jenis tombol: button, reset, dan submit.

<button type="button">Click me</button>
<button type="reset">Reset form</button>
<input type="submit" value="Submit">

Contoh 29: Field tersembunyi dan autocomplete

Nilai tersembunyi ikut terkirim bersama formulir; autocomplete membantu browser mengisi.

<form>
  <input type="hidden" name="source" value="homepage">
  <input type="text" name="city" autocomplete="address-level2">
</form>

Contoh 30: Unggah berkas

input type file dengan accept untuk membatasi jenis berkas.

<label for="photo">Upload a photo</label>
<input type="file" id="photo" accept="image/png, image/jpeg">

Topik 4: Tabel

Tabel menampilkan data dalam baris dan kolom. Gunakan untuk data sungguhan, bukan untuk tata letak halaman.

Baris, sel, dan header

tr adalah baris, td adalah sel biasa, dan th adalah sel header. thead, tbody, dan tfoot mengelompokkan baris agar header bisa diulang atau diberi gaya. Letakkan header di awal setiap baris, dan pastikan setiap baris memiliki jumlah sel yang sama.

Sel yang direntangkan

colspan membuat sel mencakup beberapa kolom, dan rowspan membuatnya mencakup beberapa baris. Perentangan sel itu kuat, tetapi menyulitkan pembaca layar, jadi gunakan hanya ketika data memerlukannya.

Caption dan scope

caption memberi judul pada tabel. scope pada th menentukan apakah sebuah header menjelaskan barisnya atau kolomnya, sehingga pembaca layar bisa membacakan setiap nilai beserta judulnya.

Contoh 31: Tabel dasar

table, tr, th, dan td membentuk kisi data.

<table>
  <tr><th>Name</th><th>Score</th></tr>
  <tr><td>Ann</td><td>91</td></tr>
  <tr><td>Ben</td><td>78</td></tr>
</table>

Contoh 32: Kepala, isi, dan kaki tabel

thead, tbody, dan tfoot mengelompokkan baris agar lebih jelas.

<table>
  <thead><tr><th>Item</th><th>Qty</th></tr></thead>
  <tbody>
    <tr><td>Pen</td><td>3</td></tr>
  </tbody>
  <tfoot><tr><td>Total</td><td>3</td></tr></tfoot>
</table>

Contoh 33: colspan dan rowspan

Sebuah sel bisa melebar di beberapa kolom atau baris.

<table>
  <tr><th colspan="2">Monthly sales</th></tr>
  <tr><td rowspan="2">East</td><td>120</td></tr>
  <tr><td>95</td></tr>
</table>

Contoh 34: Caption dan scope

caption memberi judul tabel; scope menentukan apakah header untuk baris atau kolom.

<table>
  <caption>Class results</caption>
  <tr><th scope="col">Student</th><th scope="col">Grade</th></tr>
  <tr><th scope="row">Mali</th><td>A</td></tr>
</table>

Topik 5: Struktur halaman dengan elemen semantik

Elemen semantik memberi nama pada bagian-bagian halaman: header, nav, main, article, aside, dan footer. Mereka membantu mesin pencari dan teknologi bantu menemukan jalannya.

Header, nav, dan footer

header berisi judul dan logo situs. nav membungkus menu utama. footer berisi hak cipta dan detail kontak. Sebuah halaman bisa memiliki satu header dan footer untuk seluruh situs, dan lebih banyak di dalam artikel.

Main, section, dan article

main berisi konten utama, hanya sekali per halaman. section mengelompokkan konten yang berkaitan di bawah sebuah judul. article adalah bagian yang bisa berdiri sendiri, seperti posting blog atau berita.

Aside, figure, dan details

aside berisi konten sampingan yang terkait. figure dengan figcaption mengelompokkan gambar dan keterangannya. details dan summary membuat kotak yang bisa dibuka dan ditutup tanpa JavaScript.

Contoh 35: Header dan footer

header berisi area judul; footer berisi catatan bagian bawah.

<header>
  <h1>My Blog</h1>
</header>
<footer>
  <p>&copy; 2026 My Blog</p>
</footer>

Contoh 36: Menu navigasi

nav membungkus tautan utama situs.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Contoh 37: Main dan section

main adalah konten utama; section mengelompokkan konten yang berkaitan.

<main>
  <section>
    <h2>Features</h2>
    <p>Fast, simple and free.</p>
  </section>
</main>

Contoh 38: Article dan aside

article berdiri sendiri; aside adalah konten sampingan yang terkait.

<article>
  <h2>Why learn HTML?</h2>
  <p>It is the base of every web page.</p>
</article>
<aside>
  <p>Related: CSS basics</p>
</aside>

Contoh 39: Figure dan caption

figure mengelompokkan gambar dengan figcaption-nya.

<figure>
  <img src="bridge.jpg" alt="A steel bridge at sunset">
  <figcaption>Bridge over the river, 2026</figcaption>
</figure>

Contoh 40: Details dan summary

Kotak yang bisa dilipat bawaan tanpa JavaScript.

<details>
  <summary>Show opening hours</summary>
  <p>Monday to Friday, 8 am to 6 pm.</p>
</details>

Topik 6: Media: gambar, audio, video, dan embed

Elemen media menghadirkan gambar, suara, dan video ke dalam halaman. Setiap elemen memerlukan perhatian untuk kecepatan, aksesibilitas, dan dukungan browser.

Gambar dan gambar responsif

img selalu memerlukan teks alt. Berikan width dan height agar halaman tidak melompat saat dimuat. picture dengan elemen source memilih berkas yang berbeda untuk setiap lebar layar, yang menghemat kuota di ponsel.

Audio dan video

audio dan video menampilkan kontrolnya sendiri dengan atribut controls. Sediakan beberapa format sumber jika ada browser yang tidak mendukung salah satunya. poster menampilkan gambar sebelum video dimulai. Jangan memutar suara otomatis tanpa pilihan pembaca.

Embed dan gambar vektor

iframe menyematkan halaman lain, dan sebaiknya memiliki title untuk pembaca layar. svg menggambar bentuk vektor yang tetap tajam pada ukuran apa pun. canvas adalah area bitmap tempat JavaScript menggambar, yang cocok untuk game dan grafik.

Contoh 41: Audio

audio memutar suara dengan kontrol dan sumber cadangan.

<audio controls preload="metadata">
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support audio.
</audio>

Contoh 42: Video

video memutar klip; poster menampilkan gambar sebelum dimulai.

<video controls width="640" poster="thumb.jpg">
  <source src="clip.mp4" type="video/mp4">
  Your browser does not support video.
</video>

Contoh 43: Gambar responsif

picture memilih ukuran gambar berdasarkan lebar layar.

<picture>
  <source media="(min-width: 800px)" srcset="hero-large.jpg">
  <img src="hero-small.jpg" alt="Mountain lake">
</picture>

Contoh 44: Halaman tersemat

iframe menyematkan halaman web lain; title membantu pembaca layar.

<iframe src="https://example.com" width="600" height="400" title="Example site" loading="lazy"></iframe>

Contoh 45: SVG sebaris

svg menggambar bentuk vektor langsung di halaman.

<svg width="120" height="120" viewBox="0 0 120 120" role="img" aria-label="Red circle">
  <circle cx="60" cy="60" r="50" fill="red"/>
</svg>

Contoh 46: Menggambar di canvas

canvas adalah area gambar yang dikendalikan JavaScript.

<canvas id="board" width="300" height="150">Your browser cannot show the canvas.</canvas>
<script>
  const ctx = document.getElementById("board").getContext("2d");
  ctx.fillStyle = "teal";
  ctx.fillRect(10, 10, 80, 40);
</script>

Contoh 47: Tautan peta

Tautan yang membuka peta di tab atau aplikasi baru.

<p><a href="https://maps.example.com/?q=Bangkok">Open map of Bangkok</a></p>

Contoh 48: Progres dan meter

progress menampilkan tugas; meter menampilkan nilai pada skala.

<label for="upload">Uploading</label>
<progress id="upload" value="70" max="100">70%</progress>
<meter min="0" max="100" value="62">62 out of 100</meter>

Topik 7: Menambahkan CSS dan selector

CSS ditulis sebagai aturan: selector memilih elemen, dan deklarasi mengatur propertinya. CSS bisa diletakkan secara inline, di dalam elemen style, atau di berkas terpisah.

Tempat CSS berada

Atribut style berlaku untuk satu elemen. Elemen style di head berlaku untuk seluruh halaman. Berkas .css terpisah yang ditautkan dengan link paling cocok untuk situs sungguhan, karena satu berkas memberi gaya ke setiap halaman.

Selector dasar

p cocok dengan setiap paragraf. .warning cocok dengan elemen yang memiliki kelas tersebut. #header cocok dengan satu elemen yang memiliki id itu. Gunakan kelas untuk gaya dan id untuk bagian yang unik. Hindari memberi gaya hanya berdasarkan nama tag ketika halaman mulai membesar.

Kombinator, atribut, dan specificity

Spasi mencocokkan turunan dan > mencocokkan anak langsung. Tanda kurung siku mencocokkan atribut seperti input[type="email"]. Ketika dua aturan bertabrakan, selector yang lebih spesifik menang. Hindari !important kecuali sebagai jalan terakhir.

Contoh 49: Stylesheet internal

Elemen style di dalam head memberi gaya ke seluruh halaman.

<style>
  p { color: navy; }
  h1 { font-family: Georgia, serif; }
</style>
<h1>Styled heading</h1>
<p>This paragraph is navy.</p>

Contoh 50: Atribut style inline

Atribut style memberi gaya pada satu elemen.

<p style="color: crimson; font-size: 20px;">Red and large.</p>

Contoh 51: Selector elemen

p menargetkan setiap paragraf di halaman.

<style>
  p { line-height: 1.6; }
</style>
<p>Every paragraph on the page gets this line height.</p>

Contoh 52: Selector kelas

Titik memilih elemen berdasarkan nama kelasnya.

<style>
  .warning { color: darkorange; font-weight: bold; }
</style>
<p class="warning">Check your input.</p>

Contoh 53: Selector id

Tanda pagar memilih satu elemen berdasarkan id uniknya.

<style>
  #header { background: #222; color: white; padding: 12px; }
</style>
<div id="header">Site title</div>

Contoh 54: Selector turunan dan anak

Spasi mencocokkan turunan mana pun; > hanya mencocokkan anak langsung.

<style>
  nav a { color: teal; }      /* any link inside nav */
  nav > ul { margin: 0; }     /* only direct child ul */
</style>

Contoh 55: Selector atribut dan pseudo-class

Tanda kurung siku mencocokkan atribut; titik dua mencocokkan keadaan seperti hover.

<style>
  input[type="email"] { border: 1px solid #888; }
  a:hover { text-decoration: underline; }
  li:first-child { font-weight: bold; }
</style>

Contoh 56: Pseudo-element dan konten yang dihasilkan

::before menambahkan konten; ::first-line memberi gaya pada baris pertama.

<style>
  p::first-line { font-variant: small-caps; }
  .price::before { content: "THB "; }
</style>
<p class="price">250</p>

Contoh 57: Specificity dan !important

Selector yang lebih spesifik menang; !important menimpa aturan biasa.

<style>
  p { color: gray; }
  .note { color: green; }
  #main p { color: blue; }
  p { color: red !important; }
</style>

Topik 8: Model kotak, ukuran, dan display

Setiap elemen adalah sebuah kotak. Isinya berada di dalam padding, yang berada di dalam border, yang berada di dalam margin. Memahami ini membuat jarak dan ukuran bisa diprediksi.

Lebar, tinggi, dan max-width

Persentase membuat kotak mengikuti induknya. max-width membatasi ukuran di layar lebar. Jika hanya mengatur width pada kotak yang memiliki padding, kotak akan lebih besar dari yang diharapkan, kecuali box-sizing diatur ke border-box.

Padding, margin, dan border

Padding adalah ruang di dalam border dan ikut mendapat warna latar. Margin adalah ruang di luar border dan tidak pernah memiliki latar belakang. Penulisan singkat seperti padding: 16px 24px mengatur atas dan bawah, lalu kiri dan kanan. Margin dari blok yang bersebelahan bisa saling menggabung.

Display dan overflow

block memakan satu baris penuh, inline berada di dalam baris teks, dan inline-block memiliki ukuran tetapi tetap di dalam baris. none menghapus elemen dari halaman. overflow: auto menambahkan scrollbar ketika konten terlalu besar.

Ilustrasi

Contoh 58: Lebar, tinggi, dan max-width

Ukuran bisa tetap, berbasis persentase, atau dibatasi.

<style>
  .box { width: 60%; max-width: 480px; height: 120px; }
</style>
<div class="box">Responsive box</div>

Contoh 59: Padding dan margin

Padding adalah ruang di dalam border; margin adalah ruang di luar.

<style>
  .card { padding: 16px 24px; margin: 20px auto; background: #f4f6fb; }
</style>

Contoh 60: Border dan box-sizing

box-sizing: border-box menjaga padding tetap berada di dalam lebar yang Anda atur.

<style>
  .card { border: 2px solid #3366ff; box-sizing: border-box; width: 300px; padding: 20px; }
</style>

Contoh 61: Display: inline, block, inline-block, dan none

display mengatur bagaimana elemen berada dalam alur halaman.

<style>
  .a { display: inline; }
  .b { display: inline-block; width: 80px; }
  .c { display: block; }
  .d { display: none; }
</style>

Contoh 62: Overflow dan scroll

overflow menentukan apa yang terjadi ketika konten terlalu besar.

<style>
  .scroll { height: 100px; overflow: auto; border: 1px solid #ccc; }
</style>
<div class="scroll">Long text that needs a scrollbar...</div>

Topik 9: Properti warna dan teks

Properti warna dan teks menentukan seberapa mudah dibaca dan menariknya sebuah halaman. Ini mencakup format warna, font, jarak, perataan, dan dekorasi.

Format warna

color mengatur warna teks. Gunakan nama untuk kasus sederhana, hex seperti #1e90ff, rgb atau hsl untuk kontrol, dan rgba untuk menambah transparansi. Periksa kontras agar teks bisa dibaca; WCAG menyarankan minimal 4,5 banding 1 untuk teks biasa.

Keluarga font, ukuran, dan ketebalan

font-family mendaftar font berurutan, dan diakhiri dengan keluarga umum seperti sans-serif. Ukuran rem mengikuti ukuran font akar, yang menghormati pengaturan pembaca. font-weight 700 berarti tebal.

Perataan, jarak, dan dekorasi

text-align memusatkan atau meratakan teks. line-height 1.6 memberi jarak baca yang nyaman. letter-spacing dan word-spacing mengatur jarak. text-decoration menggambar garis, text-transform mengubah huruf besar-kecil, dan text-shadow menambahkan efek berpendar. text-overflow: ellipsis memotong teks panjang dengan titik-titik.

Contoh 63: Format warna

Warna bisa berupa nama, hex, rgb, hsl, atau rgba dengan transparansi.

<style>
  p.a { color: red; }
  p.b { color: #1e90ff; }
  p.c { color: rgb(255 140 0); }
  p.d { color: hsl(120 60% 40%); }
  p.e { color: rgba(0, 0, 0, 0.5); }
</style>

Contoh 64: Keluarga dan ukuran font

font-family mendaftar font berdasarkan preferensi; rem mengikuti ukuran akar.

<style>
  body { font-family: "Segoe UI", Arial, sans-serif; font-size: 16px; }
  h1 { font-size: 2.5rem; }
</style>

Contoh 65: Ketebalan dan gaya font

font-weight mengatur ketebalan; font-style mengatur miring.

<style>
  .strong { font-weight: 700; }
  .slanted { font-style: italic; }
</style>

Contoh 66: Perataan teks dan line height

text-align mengatur perataan; line-height mengatur jarak antarbaris.

<style>
  .centre { text-align: center; line-height: 1.8; }
  .justify { text-align: justify; }
</style>

Contoh 67: Jarak huruf dan kata

Jarak dan huruf kapital mengubah tampilan teks.

<style>
  .title { letter-spacing: 0.15em; word-spacing: 0.3em; text-transform: uppercase; }
</style>

Contoh 68: Dekorasi dan bayangan teks

Garis bawah, warna, dan efek berpendar pada teks.

<style>
  .link { text-decoration: underline dotted red; }
  .glow { text-shadow: 0 0 8px #ff8c00; }
</style>

Contoh 69: Elipsis teks

Teks panjang dipotong dengan tiga titik ketika tidak muat.

<style>
  .one-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
  }
</style>
<p class="one-line">This sentence is far too long to fit in the box.</p>

Topik 10: Latar belakang, border, dan efek visual

Latar belakang bisa berupa warna, gambar, atau gradien. Border, sudut, dan bayangan memberi kotak kedalaman dan bentuk.

Properti latar belakang

background-color mengisi warna, background-image menambahkan gambar, dan background-size: cover mengisi kotak. background-position dan background-repeat menempatkan dan mengubin gambar. Gradien adalah gambar yang dibuat dari campuran warna.

Sudut dan bayangan

border-radius membulatkan sudut; nilai 50% membuat lingkaran dari persegi. box-shadow menambahkan bayangan dengan offset, blur, dan warna, dan tetap ringan ketika blur-nya besar.

Outline dan fokus

outline digambar di luar border dan tidak mengubah tata letak. Browser memakainya untuk menunjukkan fokus keyboard. Jangan menghapus gaya fokus tanpa memberi tanda fokus lain yang jelas.

Contoh 70: Warna dan gambar latar belakang

Warna, gambar, ukuran, posisi, dan pengulangan untuk latar belakang.

<style>
  .hero {
    background-color: #1b1f2a;
    background-image: url("pattern.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
</style>

Contoh 71: Gradien

linear-gradient dan radial-gradient menggambar campuran warna.

<style>
  .sunset { background: linear-gradient(to right, #ff7e5f, #feb47b); height: 80px; }
  .glow { background: radial-gradient(circle, #fff, #36c); height: 80px; }
</style>

Contoh 72: Border radius dan box shadow

Sudut membulat dan bayangan lembut di bawah kotak.

<style>
  .button {
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    padding: 10px 18px;
  }
</style>

Contoh 73: Outline dan border putus-putus

outline menampilkan fokus; gaya border termasuk dashed.

<style>
  input:focus { outline: 3px solid #3366ff; outline-offset: 2px; }
  .dashed { border: 2px dashed #888; }
</style>

Topik 11: Posisi dan tumpukan

Properti position memindahkan elemen keluar dari alur normal. Dikombinasikan dengan z-index, ia mengendalikan elemen mana yang berada di atas.

Relative dan absolute

relative membiarkan elemen tetap di tempatnya tetapi memungkinkan Anda menggesernya dengan top, left, dan lainnya. absolute mengeluarkannya dari alur dan menempatkannya terhadap leluhur berposisi terdekat. Atur position: relative pada induk untuk menambatkan anak.

Fixed dan sticky

fixed tetap di tempat yang sama di layar saat halaman digulir, cocok untuk menu dan banner cookie. sticky bergulir seperti biasa sampai mencapai tepi, lalu menempel di sana.

Lapisan dengan z-index

z-index mengatur urutan tumpukan elemen berposisi. Angka yang lebih tinggi berada di atas angka yang lebih rendah dalam konteks tumpukan yang sama. Kesalahan umum adalah menaikkan z-index menjadi 9999 padahal masalah sebenarnya ada pada konteks tumpukan induknya.

Contoh 74: Posisi relative dan absolute

relative mempertahankan ruang; absolute ditempatkan terhadap induk berposisi.

<style>
  .parent { position: relative; height: 150px; }
  .badge { position: absolute; top: 8px; right: 8px; }
</style>
<div class="parent"><span class="badge">New</span></div>

Contoh 75: Posisi fixed dan sticky

fixed tetap di layar; sticky menempel saat Anda menggulir.

<style>
  .topbar { position: sticky; top: 0; background: white; }
  .corner { position: fixed; bottom: 16px; right: 16px; }
</style>

Contoh 76: Lapisan z-index

z-index menentukan elemen mana yang digambar di atas.

<style>
  .back { position: absolute; z-index: 1; }
  .front { position: absolute; z-index: 2; }
</style>

Topik 12: Tata letak flexbox dan grid

Flexbox menyusun item dalam satu baris, dan grid menyusunnya dalam baris dan kolom. Keduanya menggantikan metode lama yang berbasis float dan tabel.

Dasar flexbox

display: flex membuat anak-anaknya menjadi item flex dalam satu baris. justify-content menyejajarkannya sepanjang sumbu utama, dan align-items menyejajarkannya melintang. gap mengatur jarak antaritem tanpa margin.

Ukuran dan pembungkusan flex

flex: 1 memberi item bagian ruang kosong yang sama. flex-basis adalah ukuran awal. flex-wrap: wrap memindahkan item ke baris baru ketika tidak ada ruang, sehingga daftar kartu responsif mudah dibuat.

Kolom dan area grid

grid-template-columns mengatur jalur kolom; 1fr berarti satu bagian dari ruang kosong. repeat(auto-fit, minmax(160px, 1fr)) membuat kolom yang menyesuaikan lebar. grid-template-areas memberi nama pada area tata letak halaman.

Contoh 77: Flexbox: space-between

Flexbox menempatkan item dalam baris atau kolom, di sini dengan jarak di antaranya.

<style>
  .bar { display: flex; justify-content: space-between; align-items: center; }
</style>
<div class="bar"><span>Logo</span><nav>Menu</nav></div>

Contoh 78: Flex grow, shrink, dan basis

flex mengatur cara item membagi ruang kosong.

<style>
  .row { display: flex; gap: 12px; }
  .row > div { flex: 1 1 0; }
  .row > .wide { flex: 2 1 0; }
</style>

Contoh 79: Flex wrap untuk kartu

flex-wrap memindahkan kartu ke baris berikutnya ketika tidak ada ruang.

<style>
  .cards { display: flex; flex-wrap: wrap; gap: 16px; }
  .cards > div { flex: 0 1 220px; }
</style>

Contoh 80: Flex kolom dan order

flex-direction mengubah sumbu; order mengubah urutan item.

<style>
  .stack { display: flex; flex-direction: column; }
  .stack > .last { order: -1; }
</style>

Contoh 81: Kolom grid

grid-template-columns mengatur lebar kolom dalam grid.

<style>
  .grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; }
</style>
<div class="grid"><div>A</div><div>B</div><div>C</div></div>

Contoh 82: Area template grid

Beri nama area tata letak halaman dan tempatkan item berdasarkan nama.

<style>
  .page {
    display: grid;
    grid-template-areas: "head head" "side main" "foot foot";
    grid-template-columns: 200px 1fr;
  }
  .head { grid-area: head; }
  .side { grid-area: side; }
  .main { grid-area: main; }
  .foot { grid-area: foot; }
</style>

Contoh 83: Grid auto-fit yang responsif

minmax dan auto-fit membuat kolom yang menyesuaikan lebar.

<style>
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
  }
</style>

Contoh 84: Memusatkan dengan place-items

place-items memusatkan item di dalam sel grid.

<style>
  .box { display: grid; place-items: center; height: 200px; }
</style>

Topik 13: Desain responsif, gerakan, dan efek

Halaman responsif menyesuaikan diri dengan layar apa pun. Gerakan dan efek membuat interaksi lebih jelas, tetapi harus tetap lembut dan menghormati preferensi pembaca.

Media query

@media (max-width: 600px) hanya menerapkan aturan pada layar sempit. Rancang untuk ponsel terlebih dahulu, lalu tambahkan tata letak yang lebih lebar dengan min-width. Gunakan satuan relatif agar teks bisa membesar mengikuti pengaturan pembaca.

Transisi dan transformasi

transition menganimasikan perubahan seperti warna saat hover, dengan durasi dalam detik. transform menggeser, memutar, atau memperbesar elemen tanpa mengubah tata letak di sekitarnya.

Keyframes, filter, dan clipping

@keyframes mendefinisikan langkah-langkah animasi dan animation memainkannya, infinite mengulanginya. Hormati gerakan yang dikurangi dengan media query prefers-reduced-motion. filter menambahkan blur atau skala abu-abu, dan clip-path memotong elemen menjadi bentuk.

Contoh 85: Media query

@media hanya menerapkan aturan ketika layar memenuhi suatu kondisi.

<style>
  .menu { display: flex; }
  @media (max-width: 600px) {
    .menu { flex-direction: column; }
  }
</style>

Contoh 86: Transisi saat hover

transition menganimasikan perubahan dari satu keadaan ke keadaan lain.

<style>
  .btn { background: #3366ff; transition: background-color 0.3s ease, transform 0.3s; }
  .btn:hover { background: #1f4fd8; transform: translateY(-2px); }
</style>

Contoh 87: Transform

rotate, scale, dan translate menggeser atau mengubah elemen tanpa mengubah tata letak.

<style>
  .spin { transform: rotate(45deg); }
  .grow { transform: scale(1.2); }
  .move { transform: translate(40px, 10px); }
</style>

Contoh 88: Animasi keyframe

@keyframes mendefinisikan langkah; animation memainkannya.

<style>
  @keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
  }
  .dot { animation: pulse 1.5s ease-in-out infinite; }
</style>

Contoh 89: Opacity dan visibility

opacity mengatur transparansi; visibility menyembunyikan tetapi mempertahankan ruang.

<style>
  .faded { opacity: 0.4; }
  .hidden-but-space { visibility: hidden; }
  .gone { display: none; }
</style>

Contoh 90: Efek filter

filter mengubah warna dan blur sebuah elemen.

<style>
  .photo { filter: grayscale(100%) blur(1px); }
  .bright { filter: brightness(1.2) contrast(1.1); }
</style>

Contoh 91: Cursor dan user-select

cursor mengubah penunjuk mouse; user-select mencegah seleksi teks.

<style>
  .clickable { cursor: pointer; }
  .no-select { user-select: none; }
</style>

Contoh 92: Clip path

clip-path memotong elemen menjadi bentuk.

<style>
  .tri { width: 120px; height: 120px; background: tomato; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
</style>

Topik 14: CSS modern, aksesibilitas, dan interaksi

CSS modern mencakup variabel dan satuan baru. Aksesibilitas membuat halaman bisa dipakai semua orang, termasuk mereka yang memakai keyboard atau pembaca layar. Skrip kecil menambahkan interaksi.

Properti kustom dan rasio aspek

Variabel yang dideklarasikan sebagai --brand pada :root dipakai ulang dengan var(--brand), sehingga satu perubahan memperbarui seluruh situs. aspect-ratio menjaga kotak tetap dalam bentuk tertentu, dan object-fit: cover mengisinya dengan gambar tanpa distorsi.

Formulir dan keadaan yang mudah diakses

Label, teks alt, dan peran ARIA seperti role="alert" memberi tahu pembaca layar apa arti sesuatu. Tautan lewati membantu pengguna keyboard melompati menu yang panjang. tabindex dapat menambah fokus, tetapi hindari nilai positif. :invalid dan :disabled memberi gaya pada keadaan tanpa hanya mengandalkan warna.

Atribut data, skrip, dan dialog

Atribut data-* menyimpan nilai kecil pada elemen, dan JavaScript membacanya melalui dataset. addEventListener menjalankan kode saat diklik. Elemen dialog membuka jendela modal dengan showModal, dan browser mengurus fokus serta tombol Escape untuk Anda.

Contoh 93: Properti kustom CSS

Variabel seperti --brand dipakai ulang di seluruh stylesheet.

<style>
  :root { --brand: #3366ff; --gap: 16px; }
  .btn { background: var(--brand); padding: var(--gap); }
</style>

Contoh 94: Rasio aspek dan object-fit

aspect-ratio menjaga bentuk; object-fit memasukkan gambar ke dalamnya.

<style>
  .thumb { width: 300px; aspect-ratio: 16 / 9; }
  .thumb img { width: 100%; height: 100%; object-fit: cover; }
</style>

Contoh 95: Daftar dan penghitung

list-style mengatur poin dan nomor; ::before menambahkan ikon.

<style>
  ol.steps { list-style-type: decimal; padding-left: 2em; }
  ul.check { list-style: none; }
  ul.check li::before { content: "✔ "; }
</style>

Contoh 96: Keadaan formulir

:invalid dan :disabled mengubah tampilan input.

<style>
  input:invalid { border-color: red; }
  input:disabled { background: #eee; cursor: not-allowed; }
</style>
<input required><input disabled>

Contoh 97: Aksesibilitas: alt, label, dan ARIA

Label, teks alt, dan peran ARIA membantu pembaca layar.

<img src="logo.png" alt="Company logo">
<button aria-label="Close dialog">&times;</button>
<div role="alert">Your file was saved.</div>

Contoh 98: Urutan tab dan tautan lewati

Tautan lewati melompati menu; tabindex mengatur urutan fokus.

<a href="#content" class="skip">Skip to content</a>
<div tabindex="0">Focusable panel</div>
<main id="content">Main content</main>

Contoh 99: Atribut data dan skrip kecil

data-* menyimpan nilai; JavaScript membacanya dan memperbaruinya.

<button id="like" data-count="3">Like</button>
<script>
  const btn = document.getElementById("like");
  btn.addEventListener("click", () => {
    const n = Number(btn.dataset.count) + 1;
    btn.dataset.count = n;
    btn.textContent = "Liked (" + n + ")";
  });
</script>

Contoh 100: Elemen dialog

dialog membuat jendela pop-up dengan formulir modal.

<dialog id="confirm">
  <p>Delete this file?</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="ok">Delete</button>
  </form>
</dialog>
<button onclick="document.getElementById('confirm').showModal()">Open</button>

Proyek latihan: Halaman profil pribadi

Buat satu halaman yang memakai gagasan dari setiap bagian. Tulis dari awal terlebih dahulu, lalu bandingkan dengan contohnya.

1. Buat index.html dengan doctype, atribut lang, charset, tag viewport, dan title.

2. Tambahkan header dengan nama Anda, nav dengan tiga tautan, bagian main dengan judul dan paragraf, serta footer.

3. Tambahkan formulir dengan kolom nama, email (type email, required), dan pesan (textarea) yang diberi label, serta tombol kirim.

4. Buat elemen style yang mengatur tumpukan font, latar gradien, kontainer max-width dengan padding, dan kartu dengan border-radius dan box-shadow.

5. Jadikan tautan sebagai item flex dengan gap, lalu tambahkan media query yang menumpuknya pada layar yang lebih sempit dari 600px.

6. Tambahkan tombol dengan transisi saat hover, dan dialog yang mengonfirmasi bahwa pesan sudah terkirim.

Langkah berikutnya

Berikutnya, pelajari JavaScript agar halaman bisa bereaksi terhadap pembaca, lalu framework CSS atau preprocessor jika Anda ingin styling lebih cepat, dan terakhir alat yang memeriksa halaman Anda dari sisi aksesibilitas dan kecepatan. Setiap contoh dalam artikel ini adalah cuplikan sederhana, jadi Anda bisa menguji masing-masing di alat pengembang browser.

Ringkasan

HTML membangun struktur halaman dengan elemen semantik, teks, daftar, tautan, formulir, tabel, dan media. CSS memberinya gaya melalui selector dan model kotak, properti warna dan teks, latar belakang dan border, posisi, flexbox, grid, aturan responsif, transisi, dan animasi. Aksesibilitas dan label yang jelas menjaga halaman tetap bisa dipakai semua orang. Cara terbaik untuk mengingat ke-100 contoh ini adalah membangun satu halaman, mengubah satu properti setiap kali, dan melihat hasilnya.