Selamat datang kembali di seri belajar web development dari nol! Setelah pada level sebelumnya kita mengenal dasar-dasar internet, kini saatnya kita masuk ke materi teknis pertama yang paling fundamental: HTML (HyperText Markup Language).
Tanpa HTML, tidak akan ada satu pun halaman web yang bisa Anda lihat di internet hari ini. Mari kita bedah apa itu HTML dan bagaimana cara menyusunnya dengan benar.
1. Apa itu HTML?
HTML adalah bahasa markah (markup language) standar yang digunakan untuk membuat dan menyusun struktur halaman web. Perlu diingat, HTML bukan bahasa pemrograman seperti Python atau JavaScript, melainkan bahasa untuk 'memberi tanda' (markup) pada teks agar browser tahu bagaimana cara menampilkannya.
Pikirkan HTML sebagai kerangka atau fondasi beton dari sebuah rumah, sebelum nantinya dicat dengan CSS dan diberi fungsi interaktif oleh JavaScript.
2. Struktur Dasar Dokumen HTML
Setiap dokumen HTML memiliki pola kerangka standar yang wajib diikuti agar dapat dibaca dengan sempurna oleh browser. Perhatikan contoh kerangka dasar berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Judul Web Anda</title>
</head>
<body>
<!-- Konten web Anda ditulis di sini -->
</body>
</html>
Mari kita bedah bagian-bagian penting di atas:
<!DOCTYPE html>: Deklarasi yang memberi tahu browser bahwa dokumen ini adalah HTML5.<html>: Tag akar (root) yang membungkus seluruh konten halaman web.<head>: Bagian kepala dokumen yang berisi informasi meta, judul halaman, dan tautan ke file eksternal (tidak terlihat langsung oleh pengguna di halaman web).<body>: Bagian tubuh dokumen tempat semua konten yang bisa dilihat pengguna berada (teks, gambar, tombol, dll).
Catatan Penting: Sebagian besar tag HTML berpasangan, memiliki tag pembuka (contoh:
<h1>) dan tag penutup (contoh:</h1>).
3. Mengenal Elemen Dasar HTML
Sebelum membuat proyek, mari kenal beberapa elemen yang sering digunakan:
Heading dan Paragraph
- Heading (
<h1>sampai<h6>): Digunakan untuk judul dan sub-judul.<h1>adalah yang terbesar dan paling penting, sedangkan<h6>adalah yang terkecil. - Paragraph (
<p>): Digunakan untuk membungkus blok teks atau paragraf biasa.
Text Formatting
Ingin mempercantik teks? Gunakan tag berikut:
<b>atau<strong>: Membuat teks tebal.<i>atau<em>: Membuat teks miring (italic).<u>: Memberikan garis bawah pada teks.
Comment (Komentar)
Komentar adalah baris kode yang diabaikan oleh browser. Sangat berguna untuk meninggalkan catatan.
<!-- Ini adalah komentar, tidak akan tampil di browser -->
Attribute
Atribut memberikan informasi tambahan pada elemen HTML, biasanya ditulis di dalam tag pembuka dalam bentuk nama="nilai".
<a href="https://google.com">Kunjungi Google</a>
4. Praktik: Membuat Halaman Profil Sederhana
Sekarang waktunya praktik! Buka text editor Anda (seperti VS Code), buat file baru bernama profil.html, lalu salin kode di bawah ini:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Profil Saya</title>
</head>
<body>
<h1>Halo, Nama Saya John Doe</h1>
<p>Saya adalah seorang <strong>Web Developer</strong> pemula yang sedang belajar HTML.</p>
<hr>
<h2>Tentang Saya</h2>
<p>Saya menyukai teknologi, desain web, dan secangkir kopi hangat di pagi hari.</p>
<h2>Hobi</h2>
<p><em>Membaca buku</em>, <em>bermain gitar</em>, dan <em>coding</em>.</p>
</body>
</html>
Simpan file tersebut, lalu klik dua kali untuk membukanya di browser favorit Anda. Selamat! Anda baru saja membuat halaman web pertama Anda menggunakan HTML!
Kesimpulan
Mempelajari struktur dasar HTML adalah langkah awal yang krusial dalam perjalanan Anda menjadi seorang web developer. Teruslah berlatih membuat berbagai elemen sederhana agar semakin terbiasa dengan sintaksnya.
