Ilustrasi Struktur Dasar Dokumen HTML
Selamat datang di dunia pengembangan web! Langkah pertama yang paling fundamental dalam menciptakan halaman web apa pun adalah menguasai HTML, yang merupakan singkatan dari HyperText Markup Language. HTML bukanlah bahasa pemrograman dalam artian sempit (seperti JavaScript atau Python), melainkan bahasa markah yang digunakan untuk mendefinisikan struktur dan konten dari sebuah halaman web.
Bayangkan HTML sebagai kerangka bangunan. Jika CSS adalah cat dan dekorasi, dan JavaScript adalah listrik serta sistem interaktif, maka HTML adalah beton, baja, dan balok yang membentuk fondasi utama. HTML menggunakan serangkaian 'tag' untuk membungkus elemen-elemen konten agar browser tahu bagaimana menampilkannya—apakah itu paragraf, judul, gambar, atau tautan.
Setiap konten dalam HTML dibungkus oleh tag pembuka dan tag penutup, seperti <p> untuk paragraf. Tag ini bekerja dalam pasangan, dengan garis miring (/) menandakan penutup:
<p>Ini adalah teks paragraf.</p>Beberapa elemen penting yang harus Anda kenali sebagai fondasi pemrograman HTML dasar meliputi:
<!DOCTYPE html> yang memberi tahu browser bahwa ini adalah dokumen HTML5. Kemudian diikuti oleh tag utama <html>.<html>, terdapat dua bagian utama: <head> yang berisi metadata (informasi tentang halaman, seperti judul tab browser dan tautan ke CSS), dan <body> yang berisi semua konten yang terlihat oleh pengguna.<h1> hingga <h6> untuk judul (h1 adalah yang paling penting), dan <p> untuk paragraf teks biasa.Untuk memulai, mari kita lihat contoh kode minimal yang valid:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Halaman Pertamaku</title>
</head>
<body>
<h1>Halo Dunia Web!</h1>
<p>Ini adalah percobaan pertama saya dalam membuat konten menggunakan HTML.</p>
</body>
</html>Perhatikan elemen <meta charset="UTF-8">. Ini sangat krusial, terutama saat Anda menulis dalam Bahasa Indonesia, karena memastikan bahwa karakter khusus seperti 'é', 'ñ', atau simbol lain ditampilkan dengan benar oleh browser.
Tag HTML seringkali memerlukan informasi tambahan tentang bagaimana mereka harus bekerja atau ditampilkan. Informasi ini diberikan melalui 'atribut'. Atribut selalu ditulis di dalam tag pembuka, dalam format nama_atribut="nilai".
Contoh populer adalah pada tag gambar (<img>) dan tautan (<a>):
<!-- Atribut 'src' untuk sumber gambar, dan 'alt' untuk teks alternatif -->
<img src="logo.png" alt="Logo Perusahaan Saya">
<!-- Atribut 'href' untuk menentukan tujuan tautan -->
<a href="https://www.contoh.com">Kunjungi Situs Kami</a>Penggunaan atribut alt pada gambar sangat penting untuk aksesibilitas. Jika gambar gagal dimuat, teks alternatif akan ditampilkan, dan ini juga dibaca oleh pembaca layar bagi pengguna tunanetra.
Dalam era di mana sebagian besar akses internet dilakukan melalui perangkat seluler, memastikan halaman web Anda terlihat bagus di layar kecil adalah wajib. Meskipun CSS yang mengatur tampilan responsif, HTML menyediakan struktur yang dibutuhkan agar CSS dapat bekerja secara efektif. Tag standar HTML seperti div, header, footer, dan section membantu membagi konten menjadi blok-blok logis yang mudah diatur oleh aturan CSS (seperti Flexbox atau Grid) agar sesuai dengan berbagai ukuran viewport.
Menguasai pemrograman HTML dasar adalah jembatan Anda menuju dunia desain web yang dinamis. Setelah Anda nyaman dengan struktur tag, langkah selanjutnya adalah mempelajari cara menata struktur tersebut menggunakan CSS, yang akan mengubah kerangka dasar menjadi antarmuka yang menarik dan fungsional.