Struktur dasar yang akan kita bangun bersama.
Selamat datang di dunia pengembangan web! Jika Anda tertarik untuk membangun situs web, langkah pertama yang harus dikuasai adalah HTML (HyperText Markup Language). HTML adalah tulang punggung dari setiap halaman web; ia mendefinisikan struktur dan konten halaman tersebut—mulai dari teks, gambar, tautan, hingga tabel.
Apa Itu HTML Sebenarnya?
HTML bukanlah bahasa pemrograman seperti JavaScript atau Python. HTML adalah bahasa markup. Tugas utamanya adalah memberi tahu browser cara menampilkan konten. Kita melakukannya dengan menggunakan "tag" yang membungkus elemen konten. Bayangkan tag sebagai instruksi yang Anda berikan kepada browser.
Memahami pemrograman dasar html berarti memahami cara kerja tag-tag ini. Sebagian besar tag memiliki tag pembuka (seperti <p> untuk paragraf) dan tag penutup (</p>), meskipun ada beberapa tag yang tidak memerlukan penutup (disebut tag kosong, misalnya <img> atau <br>).
Struktur Dasar Dokumen HTML
Setiap dokumen HTML yang valid harus dimulai dengan deklarasi tipe dokumen dan diapit oleh elemen akar (root element), yaitu <html>. Struktur minimal yang wajib Anda kenal adalah:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Judul Halaman Saya</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini adalah paragraf pertama.</p>
</body>
</html>
Penjelasan Elemen Kunci
<!DOCTYPE html>: Mendefinisikan bahwa dokumen ini adalah HTML5. Ini harus menjadi baris pertama.<html>: Elemen pembungkus utama. Atributlang="id"membantu mesin pencari dan pembaca layar memahami bahasa konten.<head>: Berisi metadata tentang dokumen—informasi yang tidak ditampilkan langsung di halaman utama, seperti judul tab browser (<title>) dan pengaturan karakter (<meta charset="UTF-8">).<body>: Bagian ini berisi semua konten yang terlihat oleh pengguna, seperti teks, gambar, dan tautan.
Bekerja dengan Teks dan Konten
Untuk menampilkan teks, Anda memerlukan tag heading dan paragraf. Heading sangat penting untuk struktur hierarki konten Anda:
<h1>Judul Utama (Satu Kali Saja!)</h1>
<h2>Sub-Judul Utama</h2>
<h3>Bagian Rinci</h3>
<p>Ini adalah blok teks normal.</p>
<p>Anda bisa menggunakan tag pemformatan seperti <strong>tebal</strong> atau <em>miring</em>.</p>
Dalam konteks pemrograman dasar html, mengorganisir heading (H1 hingga H6) dengan benar sangat krusial untuk SEO (Search Engine Optimization) dan aksesibilitas.
Membuat Tautan (Hyperlinks)
Kekuatan utama web adalah kemampuan untuk menghubungkan satu halaman ke halaman lainnya. Ini dilakukan menggunakan tag jangkar, <a>, dengan atribut href:
<a href="https://www.example.com">Kunjungi Situs Luar</a>
<a href="halaman_lain.html">Buka Halaman Internal</a>
Menyematkan Gambar
Gambar disematkan menggunakan tag <img>, yang merupakan tag kosong. Tag ini membutuhkan atribut src (sumber lokasi gambar) dan alt (teks alternatif):
<img src="logo.png" alt="Logo Perusahaan Kami" width="150">
Perhatikan bahwa atribut alt (alternative text) sangat penting. Teks ini akan ditampilkan jika gambar gagal dimuat dan dibaca oleh pembaca layar bagi pengguna tunanetra.
Kesimpulan Langkah Pertama
HTML adalah fondasi. Setelah Anda menguasai cara menyusun struktur dasar, penempatan elemen, dan menggunakan tag-tag utama seperti heading, paragraf, dan tautan, Anda siap melangkah ke tahap selanjutnya: CSS (untuk gaya) dan JavaScript (untuk interaktivitas). Latihan paling efektif adalah membuat dokumen HTML sederhana, menyimpannya sebagai file .html, dan membukanya di browser Anda. Selamat mencoba fondasi pemrograman dasar html!