Programming Fundamental 5
Modul 2 HTML Fundamentals
Setelah kita memahami gambaran besar mengenai profesi Full stack developer dan urgensi Full Stack Development, kini saatnya kita menyelam lebih dalam dan memulai dari titik awal yang paling krusial, yaitu HTML (HyperText Markup Language), yang kita ibaratkan sebagai fondasi utama dari setiap bangunan digital.
Melalui pembelajaran pada modul ini, Digiers diharapkan akan memiliki pemahaman yang kuat tentang cara struktur halaman web dibentuk secara logis. Anda akan mengenal berbagai elemen HTML dan, yang terpenting, mampu membangun halaman statis yang semantik dan terorganisir dengan baik, sebuah skill dasar yang akan membedakan Anda sebagai developer profesional.
Sebelum memasuki materi yang lebih dalam, mari kita refleksikan sebentar beberapa pertanyaan berikut ini:
- Mengapa struktur HTML yang rapi dan semantik penting bagi pengembang web?
“Untuk Meningkatkan kesadaran akan accessibility dan SEO best practices. Karena struktur semantik membantu mesin pencari dan pembaca layar memahami konten dengan benar.” - Coba bayangkan: jika website adalah rumah, bagian mana yang Anda anggap paling penting untuk dibangun lebih dulu? Mengapa?
“Bagian yang paling penting adalah fondasi/struktur, maka dari itu HTML sebagai fondasi dibangun terlebih dahulu, kemudian menentukan di mana dindingnya dalam hal ini CSS berlaku sebagai tampilan rumah dan terakhir menentukan penempatan kabel listrik yaitu JavaScript (JS) yang akan dipasang.”
Sebelum memulai pembelajaran kali ini, mari kita juga pahami bersama capaian yang akan kita raih. Berikut adalah tujuan pembelajaran yang akan menjadi pedoman kita setelah menyelesaikan modul ini, kita diharapkan untuk:
- Memahami struktur dasar dokumen HTML.
- Menggunakan elemen-elemen teks seperti heading, paragraf, list, link, dan gambar.
- Mampu membuat form dan berbagai jenis input.
- Menerapkan semantic HTML dalam menyusun struktur halaman.
- Menciptakan halaman profil sederhana dengan struktur yang rapi dan valid.
2.1 Mengenal Struktur Dasar Dokumen HTML
Sebelum kita langsung mempraktikkan tag-tag HTML, ada baiknya kita pahami dulu sejarah singkatnya. Sejak pertama kali diperkenalkan oleh Tim Berners-Lee pada tahun 1991, bahasa yang kita sebut HTML (HyperText Markup Language) ini terus mengalami evolusi signifikan hingga mencapai versi terbarunya, HTML5, yang kita gunakan saat ini.
Penting untuk diketahui bahwa standar resmi untuk bahasa markup pembentuk struktur web ini telah ditetapkan dan dikelola oleh W3C sejak tahun 1997. Pemahaman latar belakang ini akan memberikan konteks mengapa struktur HTML yang kita bangun hari ini begitu terstandarisasi.
2.1.1. Pengenalan Struktur HTML (HyperText Markup Language)
- Dalam HTML, tag digunakan untuk menentukan struktur halaman, tag dan elemen didefinisikan dengan menggunakan < dan >.
- Beberapa contoh tag tersebut adalah table, paragraf, header, footer, aside, list, dan masih banyak lagi. Tag-tag tersebut kemudian diubah menjadi tampilan yang bisa dilihat oleh pengguna melalui browser.
Setiap dokumen HTML memiliki struktur dasar sebagai berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Judul Halaman</title>
</head>
<body>
<!-- Konten halaman di sini -->
</body>
</html>
Penjelasan Elemen:
- <!DOCTYPE html>: Deklarasi tipe dokumen HTML5
- <html>: Root element dari dokumen
- <head>: Berisi metadata dan informasi tentang halaman
- <body>: Berisi konten yang ditampilkan di browser
2.1.2. Bagaimana HTML Bekerja
- Dalam HTML, tag digunakan untuk menentukan struktur halaman, tag dan elemen didefinisikan dengan menggunakan < dan >.
- Tag ini fungsinya memberi arti kepada teks. Misalnya, <h1> untuk menjadi judul, <p> untuk menjadi paragraf atau <a href> sebagai tautan yang bisa diklik.
- Sebagian besar elemen HTML butuh dua tag: tag pembuka dan tag penutup, dengan isi (teks atau elemen lain) di tengah-tengahnya.
- Saat menulis tag penutup, jangan lupa tambahkan garis miring (/) di depannya, ya—itu tanda bahwa tag tersebut menutup elemen sebelumnya.
Studi Kasus / Contoh Nyata
Latar Belakang:
Seorang junior full stack developer bernama Aiman baru saja bergabung di sebuah perusahaan yang bergerak dibidang teknologi. Tugas pertama yang diberikan kepadanya adalah membuat sebuah halaman profil perusahaan sederhana yang dapat menampilkan beberapa informasi dasar seperti:
- Nama perusahaan
- Deskripsi singkat
- Daftar layanan
- Informasi kontak
Supervisornya meminta agar Aiman membuat halaman tersebut menggunakan struktur HTML yang benar dan lengkap, sehingga nantinya mudah dikembangkan lebih lanjut oleh tim yang berkepentingan.
Situasi yang Dihadapi Aiman:
- Aiman membuat file index.html tetapi hanya menulis teks tanpa struktur HTML standar.
- Ketika dibuka di browser, halaman tampil tetapi tidak terformat dengan baik.
- Senior developer menjelaskan bahwa HTML harus memiliki struktur dasar yang baku, agar browser dapat membaca dan menampilkan konten dengan benar.
- Aiman kemudian belajar mengenai elemen dasar HTML seperti:
<!DOCTYPE html>
<html>, <head>, <body>
<title>, <meta>, <h1>, <p>, <ul>, <li>, <footer>
Setelah memahami strukturnya, Aiman memperbaiki kodenya agar sesuai dengan standar.
Pertanyaan Studi Kasus:
- Mengapa penting untuk selalu memulai dokumen HTML dengan deklarasi <!DOCTYPE html>?
- Apa perbedaan fungsi antara elemen <head> dan <body> dalam struktur HTML?
- Bagaimana penggunaan heading (<h1>, <h2>) membantu dalam hierarki konten dan SEO halaman web?
- Jika halaman tidak menampilkan konten dengan benar, langkah apa yang dapat dilakukan untuk mengecek kesalahan struktur HTML?
Solusi / Jawaban Studi Kasus
- Pentingnya <!DOCTYPE html>.
- Deklarasi ini memberitahu browser bahwa dokumen menggunakan standar HTML5, sehingga browser akan menampilkan konten sesuai aturan modern, bukan mode lama (quirks mode).
- Tanpa adanya deklarasi tersebut, maka tampilan bisa berbeda-beda di setiap browsernya.
- Perbedaan <head> dan <body>
- <head> berisi informasi meta tentang halaman seperti judul, deskripsi, dan tautan stylesheet.
- <body> berisi konten utama yang akan ditampilkan di browser (teks, gambar, link, dll).
- Fungsi Heading dalam Struktur Konten
- Heading (<h1> sampai <h6>) membantu browser dan pengguna memahami tingkatan informasi.
- Mesin pencari (SEO) menggunakan heading untuk mengenali topik utama dan subtopik dalam halaman.
- Contoh: <h1> untuk judul utama, <h2> untuk subjudul seperti “Layanan” atau “Kontak”.
- Cara Mengecek Kesalahan Struktur HTML
- Gunakan HTML Validator (seperti validator.w3.org) untuk mendeteksi kesalahan tag.
- Gunakan developer tools (Inspect Element) di browser untuk melihat apakah tag tertutup dengan benar.
- Tambahkan indentasi yang rapi agar struktur lebih mudah dibaca dan diperbaiki.
Kesimpulan Studi Kasus
Berdasarkan studi kasus tersebut dapat kita simpulkan bahwa:
- Struktur dasar HTML adalah fondasi utama dari setiap halaman web.
- Tanpa struktur yang benar:
- Browser tidak dapat menampilkan halaman sesuai harapan.
- SEO dan aksesibilitas halaman menjadi lemah.
- Dengan memahami peran setiap elemen, mulai dari <!DOCTYPE html> hingga <footer>, developer dapat membuat halaman web yang terstruktur, mudah dibaca, dan siap dikembangkan lebih lanjut
Komentar
Posting Komentar