Di Episode 1.02, kamu sudah merapikan struktur dasar index.html. Kita sudah punya doctype, element <html>, bagian <head>, bagian <body>, title, meta charset, dan viewport.
Sekarang halaman itu masih seperti ruangan kosong yang sudah punya lantai, dinding, dan pintu. Strukturnya ada, tetapi isinya belum banyak. Di episode ini, kita mulai mengisi halaman dengan konten yang lebih nyata: teks, link, gambar, dan list.
Kita tetap tidak akan membuat katalog semua tag HTML. Kalau semua tag dibahas sekaligus, episode ini bisa berubah menjadi buku telepon kecil yang memakai tanda kurung sudut. Fokus kita adalah konten yang umum muncul di halaman blog sederhana.
Di akhir episode, kamu akan punya halaman profil belajar yang berisi paragraf, link, gambar profil, dan daftar kategori. Kita juga akan melihat table dan form secara ringan sebagai preview, tetapi belum memproses form, belum validasi JavaScript, belum upload gambar, dan belum masuk PHP.
Yang Akan Dipelajari
Di episode ini, kamu akan memakai paragraf untuk menulis teks yang lebih rapi, link untuk menghubungkan halaman atau rujukan, gambar dengan alt text, dan list untuk menulis daftar kategori.
Kamu juga akan mengenal dua elemen yang sering muncul di website: table dan form. Keduanya hanya kita sentuh sebagai pengantar. Table dipakai untuk data yang memang berbentuk baris dan kolom. Form dipakai untuk menerima input pengguna, tetapi cara memproses inputnya baru akan dibahas jauh nanti.
Lapisan accessibility juga mulai lebih terasa di sini. Gambar perlu alt text, table perlu header yang jelas, dan form perlu label. Ini bukan hiasan tambahan. Ini bagian dari cara membuat halaman lebih mudah dipahami oleh lebih banyak orang.
Dari Struktur ke Konten
HTML memberi makna pada isi halaman. Paragraf bukan hanya teks yang diberi jarak. Link bukan hanya teks berwarna biru. Gambar bukan hanya dekorasi. List bukan hanya baris yang diberi simbol bullet.
Saat kita memilih elemen HTML yang tepat, browser dan alat bantu baca bisa memahami struktur halaman dengan lebih baik. Pembaca manusia juga terbantu karena isi halaman terasa lebih teratur.
Di tahap ini, jangan terlalu memikirkan tampilan. Warna, ukuran font, layout, dan jarak antarbagian akan kita bahas di sesi CSS. Untuk sekarang, tugas HTML adalah membuat isi halaman punya struktur yang benar.
Teks dan Link
Untuk teks utama, kita masih memakai paragraf dengan tag <p>. Satu paragraf sebaiknya berisi satu gagasan utama. Kalau gagasannya sudah berganti, buat paragraf baru.
<p>Saya sedang belajar membuat halaman web dari dasar.</p>
<p>Hari ini saya menambahkan link, gambar, dan daftar kategori.</p>Link dibuat dengan tag <a>. Attribute href berisi tujuan link, sedangkan teks di dalam tag adalah bagian yang diklik pembaca.
<a href="https://developer.mozilla.org/">Baca dokumentasi MDN Web Docs</a>Gunakan teks link yang jelas. Teks seperti "klik di sini" tidak memberi konteks yang cukup. Teks seperti "Baca dokumentasi HTML di MDN Web Docs" lebih membantu karena pembaca tahu tujuan link sebelum membukanya.
Untuk link ke file lain dalam folder yang sama, kamu bisa memakai path relatif.
<a href="tentang.html">Tentang Saya</a>Kita belum membahas routing server-side atau pretty URL. Untuk saat ini, bayangkan link sebagai jalan dari satu file HTML ke file HTML lain.
Gambar dan Alt Text
Gambar ditampilkan dengan tag <img>. Tag ini biasanya memakai attribute src untuk lokasi file gambar dan alt untuk teks alternatif.
<img src="gambar/profil.jpg" alt="Foto profil penulis saat belajar HTML">Attribute alt sering terlihat kecil, tetapi penting. Jika gambar gagal dimuat, teks alternatif bisa memberi konteks. Screen reader juga dapat membacakan alt text kepada pengguna yang tidak melihat gambar secara langsung.
Untuk gambar yang membawa informasi, tulis alt yang menjelaskan isi gambar. Untuk contoh profil belajar, alt="Foto profil penulis saat belajar HTML" lebih berguna daripada alt="gambar" atau alt="foto".
Pada episode ini kita hanya menampilkan gambar yang sudah ada di folder proyek. Kita belum membahas upload gambar. Upload baru masuk jauh nanti saat web kita sudah menjadi aplikasi.
List untuk Daftar Kategori
List cocok dipakai saat kita punya beberapa item yang masih satu kelompok. Misalnya daftar kategori blog, daftar materi belajar, atau langkah sederhana.
Unordered list memakai <ul>. Setiap item di dalamnya memakai <li>.
<ul>
<li>HTML Dasar</li>
<li>CSS dan Layout</li>
<li>JavaScript Ringan</li>
</ul>Untuk daftar kategori blog, urutan item biasanya tidak terlalu penting. Karena itu, <ul> cocok dipakai.
Kalau daftar berisi langkah yang harus diikuti berurutan, kamu bisa memakai ordered list dengan <ol>. Namun di praktik episode ini, kita cukup memakai <ul> agar fokusnya tetap kecil.
Preview Ringan: Table
Kadang konten memang berbentuk data baris dan kolom. Misalnya jadwal belajar mingguan. Untuk kasus seperti ini, table bisa dipakai.
<table>
<tr>
<th>Hari</th>
<th>Materi</th>
</tr>
<tr>
<td>Senin</td>
<td>HTML</td>
</tr>
<tr>
<td>Rabu</td>
<td>Latihan halaman profil</td>
</tr>
</table>Tag <th> dipakai untuk header table. Header membantu pembaca memahami arti tiap kolom.
Jangan memakai table hanya untuk menyusun layout halaman. Layout nanti tugas CSS. Table sebaiknya dipakai ketika datanya memang tabular.
Preview Ringan: Form
Form dipakai untuk menerima input dari pengguna. Contohnya form kontak, form komentar, atau form login.
Untuk sekarang, kita hanya melihat bentuk HTML-nya. Form ini belum dikirim ke mana-mana dan belum diproses.
<form>
<label for="nama">Nama</label>
<input id="nama" name="nama" type="text">
<label for="pesan">Pesan</label>
<textarea id="pesan" name="pesan"></textarea>
<button type="submit">Kirim</button>
</form>Perhatikan pasangan label dan input. Attribute for="nama" pada <label> terhubung dengan id="nama" pada <input>. Hubungan ini membantu pembaca, browser, dan alat bantu aksesibilitas memahami label untuk field tersebut.
Kita belum membahas apa yang terjadi saat tombol diklik. Form handling, validasi, dan penyimpanan data akan datang di episode lain. Untuk sekarang, cukup tahu bahwa form adalah struktur HTML untuk menerima input.
Praktik Kecil
Buka file index.html dari Episode 1.02. Kita akan mengubah isi bagian <body> menjadi halaman profil belajar sederhana.
Sebelum menulis kode, siapkan satu gambar kecil. Buat folder bernama gambar, lalu simpan gambar dengan nama profil.jpg. Kalau belum punya gambar, kamu boleh memakai nama file contoh dulu dan menggantinya nanti.
Ganti isi file index.html menjadi seperti ini:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profil Belajar HTML</title>
</head>
<body>
<h1>Profil Belajar HTML</h1>
<p>Saya sedang belajar membuat halaman web dari dasar.</p>
<p>Target saya adalah memahami HTML, CSS, JavaScript, PHP, dan MySQL secara bertahap.</p>
<h2>Foto Profil</h2>
<img src="gambar/profil.jpg" alt="Foto profil saya saat belajar HTML">
<h2>Rujukan Belajar</h2>
<p>
Salah satu rujukan yang bisa dibaca adalah
<a href="https://developer.mozilla.org/">MDN Web Docs</a>.
</p>
<h2>Kategori yang Ingin Dipelajari</h2>
<ul>
<li>HTML Dasar</li>
<li>CSS dan Layout</li>
<li>JavaScript untuk Interaksi</li>
<li>PHP dan MySQL</li>
</ul>
</body>
</html>Simpan file tersebut, lalu refresh browser.
Kamu akan melihat halaman yang lebih berisi: ada judul, paragraf, gambar, link, dan daftar kategori. Tampilannya mungkin masih sederhana. Itu normal. Saat ini kita sedang menyusun isi, bukan mendesain halaman.
Kalau semua langkah tadi benar, halamanmu kurang lebih akan tampil seperti ini:
Foto profil di preview ini hanya kotak abu-abu pengganti; di komputermu, yang tampil adalah profil.jpg milikmu sendiri.
Jika gambar tidak tampil, cek tiga hal: nama folder, nama file, dan lokasi file. Kalau kode menulis gambar/profil.jpg, berarti file gambar harus berada di folder gambar dengan nama profil.jpg.
Membaca Kode Pelan-Pelan
Bagian <h1> menjadi judul utama halaman. Setelah itu ada dua paragraf yang menjelaskan konteks profil belajar.
Bagian <img> menampilkan gambar dari folder gambar. Attribute src menunjuk lokasi file, sedangkan alt menjelaskan isi gambar.
Link MDN ditulis dengan <a href="https://developer.mozilla.org/">. Teks "MDN Web Docs" menjadi teks yang bisa diklik.
Daftar kategori ditulis dengan <ul> dan beberapa <li>. Struktur ini lebih bermakna daripada menulis kategori sebagai teks panjang yang dipisahkan koma.
Kesalahan Umum Pemula
Kesalahan pertama adalah path gambar tidak cocok. Misalnya kode menulis gambar/profil.jpg, tetapi foldernya bernama images, atau filenya bernama profile.jpg.
Kesalahan kedua adalah lupa menulis alt. Gambar tetap bisa tampil tanpa alt, tetapi halaman menjadi kurang ramah aksesibilitas.
Kesalahan ketiga adalah memakai teks link yang terlalu samar, seperti "klik di sini". Link sebaiknya menjelaskan tujuan.
Kesalahan keempat adalah menulis daftar secara manual dengan tanda strip biasa, padahal maksudnya adalah list. Kalau memang itu daftar, gunakan <ul> atau <ol>.
Kesalahan kelima adalah memakai table untuk layout. Table memang bisa membuat sesuatu terlihat berbaris, tetapi bukan itu tujuan utamanya. Simpan urusan layout untuk CSS.
Kesalahan keenam adalah berharap form langsung bisa mengirim pesan. HTML hanya menyusun form. Cara memproses input baru kita bahas saat masuk JavaScript dan PHP.
Rangkuman
Hari ini kamu menambahkan konten yang lebih beragam ke halaman HTML: paragraf, link, gambar, dan list.
Kamu juga belajar bahwa gambar sebaiknya punya alt text, link sebaiknya memakai teks yang jelas, dan list sebaiknya ditulis dengan struktur HTML yang sesuai.
Table dan form sudah dikenalkan sebagai preview. Table cocok untuk data baris-kolom, sedangkan form dipakai untuk menerima input. Keduanya belum kita bahas dalam-dalam karena episode ini fokus pada konten halaman blog sederhana.
Dengan praktik ini, file index.html mulai terasa seperti halaman nyata, bukan hanya kerangka kosong.
Berikutnya
Di Episode 1.04, kita akan membahas semantic HTML untuk halaman artikel.
Kita akan mulai merapikan struktur halaman dengan elemen seperti header, nav, main, article, dan footer. Tujuannya agar halaman tidak hanya berisi konten, tetapi juga punya bagian-bagian yang lebih bermakna.
Belajar Lebih Lanjut
Kalau ingin belajar lebih lanjut, kamu juga bisa membaca beberapa rujukan berikut.