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.

Sumber materi: https://lms.sdmdigital.id/mod/page/view.php?id=41710&forceview=1

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>

<head>

<title>Judul Halaman</title>

</head>

<body>

</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

2.2 Membangun Konten Dasar dengan Elemen Teks dan Heading

Kita sudah mengerti bahwa HTML adalah fondasi. Kini, mari kita mulai menorehkan konten pertama kita di atas fondasi tersebut! Subtopik selanjutnya akan kita fokuskan pada Membangun Konten Dasar dengan Elemen Teks dan Heading. Ibarat kita mulai membangun ruangan, kita perlu menentukan mana bagian yang menjadi judul utama, mana subjudul penting, dan mana paragraf penjelasan.

Di sini kita akan menguasai tag esensial yang mengatur hirarki dan penyajian informasi berbasis teks, memastikan pesan kita tersampaikan dengan hierarki yang jelas.

2.2.1. Tag Heading

Tag heading digunakan untuk membuat judul atau subjudul di halaman web.
Tag ini dimulai dari <h1> sampai <h6>, di mana <h1> adalah yang paling besar dan paling penting, sedangkan <h6> paling kecil.
(FYI: huruf h di <h1> sampai <h6> merupakan singkatan dari heading)
Penulisan Heading Elements (h1-h6) sebagai berikut:

<h1>Heading Utama</h1>

<h2>Sub Heading</h2>

<h3>Sub Sub Heading</h3>

<h4>Sub Sub Heading</h4>

<h5>Sub Sub Heading</h5>

<h6>Sub Sub Heading</h6>

2.2.2. Paragraf dan Teks

Tag <p> digunakan untuk membuat paragraf teks. (FYI: huruf p di sini singkatan dari paragraph).
Teks yang dibungkus dengan tag seperti <h2> atau <p> akan otomatis dimulai di baris baru ketika ditampilkan di browser.
Penulisan paragraf dan teks sebagai berikut:

<h1>Hai Judul</h1>

<p>Ini adalah paragraf teks.</p>

<strong>Teks tebal</strong>

<em>Teks miring</em>

<mark>Teks yang di-highlight</mark>

Studi Kasus / Contoh Nyata

Latar Belakang:

Tim full stack developer di sebuah perusahaan sedang mengembangkan sistem RESTful API untuk proyek aplikasi internal bernama TaskFlow. Sebagai bagian dari tanggung jawab mereka, tim diminta untuk membuat halaman dokumentasi API sederhana yang bisa diakses oleh developer lain. Dokumentasi ini akan menjelaskan:

Nama perusahaan
Deskripsi singkat
Daftar layanan
Informasi kontak

Developer junior bernama Aiman ditugaskan membuat halaman HTML dasar sebagai tampilan dokumentasi awal. Namun, ia hanya menggunakan tag <p> untuk semua teks, sehingga halaman terlihat datar dan sulit dibaca.

Situasi yang Dihadapi Aiman:
Semua judul dan deskripsi ditulis dengan <p>, tanpa penggunaan heading (<h1>, <h2>, dll).
Tim lain yang membaca dokumentasi kesulitan membedakan bagian utama dan subbagian.
Lead developer menegaskan bahwa Aiman perlu menggunakan elemen teks dan heading dengan benar, agar struktur konten lebih mudah dipahami, di-scan, dan di-maintain.
Ia kemudian belajar bahwa heading (<h1>–<h6>) dan teks (<p>, <strong>, <em>, <code>) memiliki fungsi semantik dan visual penting dalam HTML.

Pertanyaan Studi Kasus:

Mengapa penggunaan heading (<h1>, <h2>, dst.) penting dalam halaman dokumentasi atau konten teknis?
Apa perbedaan fungsi tag <p>, <strong>, dan <em> dalam HTML?
Jika semua teks hanya menggunakan <p>, apa dampak negatifnya terhadap pengalaman pengguna dan SEO?
Bagaimana developer dapat menjaga konsistensi struktur konten saat bekerja dalam tim besar?

Solusi / Jawaban Studi Kasus

1. Pentingnya Heading dalam Halaman Dokumentasi.

Heading membantu mengelompokkan informasi dan membuat hierarki visual yang mudah dipahami.

<h1> digunakan untuk judul utama halaman
<h2> untuk bagian besar seperti “Overview” atau “Endpoints”
<h3> untuk sub bagian seperti “GET /tasks” atau “POST /tasks”

Hal ini membuat konten lebih mudah di-scan dan memudahkan pembaca menemukan bagian yang mereka butuhkan.

2. Perbedaan fungsi tag <p>, <strong>, dan <em> dalam HTML adalah:

<p> → digunakan untuk penulisan paragraf secara umum.
<strong> → digunakan untuk menekankan teks-teks yang penting (bold).
<em> → digunakan untuk penekanan teks halus (italic).

3. Dampak Jika Semua Teks Menggunakan <p>

Sulit membedakan judul dan isi → pembaca kesulitan memahami struktur konten.
Mesin pencari tidak dapat mengenali hierarki informasi → menurunkan SEO.
Aksesibilitas menurun untuk pengguna pembaca layar (screen reader).
Untuk menjaga konsistensi konten saat bekerja dalam sebuah tim yang besar, developer dapat:
Menggunakan template HTML standar untuk setiap halaman dokumentasi.
Menyusun style guide internal yang mengatur penggunaan heading dan teks.
Melakukan code review sebelum halaman dipublikasikan.

Kesimpulan Studi Kasus

Berdasarkan studi kasus tersebut dapat kita simpulkan bahwa:

Pemanfaatan elemen teks dan heading yang tepat dapat membantu developer membuat halaman dokumentasi yang terstruktur, mudah dibaca, dan profesional.
Hal ini sangat penting dalam konteks full stack development, di mana dokumentasi sering menjadi penghubung antara tim frontend, backend, dan QA.

2.3 Menata Informasi dengan List, Link, dan Image

Dalam sebuah halam web, Anda bisa membuat daftar item dengan membungkus teks menggunakan tag <li>. Namun dalam penulisannya, tag <li> harus ada di dalam tag daftar utama, yaitu <ul> atau <ol>.

2.3.1. List Elements

Jenis daftar yang akan tampil atau muncul tergantung pada tag pembungkusnya:

1. Unordered List (Bullet Points)

Jika menggunakan tag pembungkus <ul> maka hasil yang muncul adalah daftar dengan bullet atau titik.
Berikut contoh penulisan codenya:

<ul>

<li>Item pertama</li>

<li>Item kedua</li>

<li>Item ketiga</li>

</ul>

2. Ordered List (Numbered)

Jika menggunakan tag pembungkus <ol> maka hasilnya yang muncul adalah daftar bernomor.
Berikut contoh penulisan codenya:

<ol>

<li>Langkah pertama</li>

<li>Langkah kedua</li>

<li>Langkah ketiga</li>

</ol>

Ketika ada elemen di dalam elemen lain seperti ini, elemen luar disebut parent (induk), dan yang di dalam disebut child (anak). Seperti gambar berikut :

2.3.2 Indentasi (Perataan Kode)

Kalau ada tag di dalam tag lain, sebaiknya kode-nya diberi jarak ke kanan (indentasi).
Tujuannya biar lebih mudah dibaca dan kelihatan jelas mana yang parent, mana yang child. Ini bukan aturan wajib, tapi sangat membantu apalagi jika kodenya sudah panjang.
Untuk membuat indentasi, tinggal menekan tombol Tab di awal baris. Seperti gambar berikut:

2.3.3. Link (Anchor)

Untuk membuat sebuah link sangatlah mudah, bisa dengan menggunakan tag <a>.
Huruf a merupakan singkatan dari anchor, yaitu semacam "jangkar" untuk menuju ke halaman lain.
Teks yang dibungkus <a> bakal tampil sebagai link (biasanya biru dan bisa diklik).
Berikut contoh penulisan codenya:

<a href="mailto:email@example.com">Email Saya</a>

<a href="tel:+6281234567890">Telepon Saya</a>

Supaya link dapat di klik ke tujuan yang benar, maka kita harus memberi alamat URL dengan tepat. Caranya dengan menambahkan atribut href ke dalam tag <a>.
Nantinya yang akan tampil pada browser hanya tulisan string yang ditulis misal: "Klik di sini", namun ketika tulisan tersebut di klik maka akan menuju ke situs tersebut.
Berikut contoh penulisan codenya:

<a href="https://namasitus.com">Klick disini</a>

2.3.4. Image

Jika ingin menampilkan sebuah gambar, maka gunakan tag <img>. Kemudian tambahkan URL gambarnya pada atribut src.
Tag <img> ini tidak membutuhkan tag penutup, karena tag ini dapat langsung berdiri sendiri dan tidak memiliki isi apapun di dalamnya.
Berikut contoh penulisan codenya:

Studi Kasus / Contoh Nyata

Latar Belakang:

Seorang web developer pemula bernama Aiman mendapat proyek kecil dari pemilik Café Aroma, sebuah kafe lokal yang ingin memiliki halaman web sederhana untuk menampilkan:

Daftar menu minuman dan makanan,
Beberapa gambar produk andalan,
Tautan menuju media sosial mereka (Instagram & Google Maps).

Aiman sudah memahami struktur dasar HTML, tetapi masih bingung bagaimana cara menata informasi agar rapi dan mudah dibaca menggunakan list, link, dan image.

Situasi yang Dihadapi Aiman:

Saat pertama kali membuat halaman, Aiman menuliskan semua informasi dengan tag <p> saja, sehingga terlihat berantakan.
Pemilik kafe meminta agar daftar menu dibuat dalam bentuk list, karena lebih mudah dibaca.
Ia juga ingin menambahkan gambar minuman favorit dan tautan langsung ke Instagram serta lokasi kafe di Google Maps.
Aiman memutuskan menggunakan:

<ul> dan <ol> untuk membuat daftar menu,

<img> untuk menampilkan gambar,

<a> untuk membuat tautan ke media sosial.

Pertanyaan Studi Kasus:

Tag HTML apa yang paling tepat digunakan Aiman untuk menampilkan daftar menu makanan dan minuman agar mudah dibaca pengunjung?
Bagaimana cara menambahkan tautan menuju akun Instagram Café Aroma menggunakan elemen HTML yang sesuai?
Tulis contoh kode untuk menampilkan gambar produk minuman favorit “Latte Dingin” yang disimpan di folder images/latte.jpg.
Apa perbedaan antara <ul> dan <ol> dalam HTML, dan kapan sebaiknya digunakan?
Bagaimana cara memastikan gambar tampil proporsional dan tidak mengganggu tata letak halaman?

Solusi / Jawaban Studi Kasus

1. Untuk menampilkan daftar menu makanan dan minuman agar mudah dibaca oleh pengunjung, sebaiknya gunakan:

<ul> (unordered list) untuk daftar tanpa urutan (misalnya menu).
<ol> (ordered list) untuk daftar dengan urutan (misalnya langkah-langkah atau ranking).
Berikut penulisan codenya:

<h2>Menu Minuman</h2>

<ul>

<li>Late Dingin</li>

<li>Cappuccino</li>

<li>Matcha Latte</li>

</ul>

2. Untuk menambahkan link ke Instagram:

Gunakan tag <a> dengan atribut href:
Atribut target="_blank" membuat link terbuka di tab baru.
Berikut penulisan codenya:

<p>Ikut kami di

<a href="https://instagram.com/cafearoma" target="_blank">Instagram Café Aroma</a>

</p>

3. Untuk menampilkan gambar produk gunakan tag <img> dengan atribut src (sumber) dan alt (teks alternatif):

alt digunakan untuk aksesibilitas dan SEO.
width membantu mengatur ukuran gambar agar proporsional.
Berikut penulisan codenya:

4. Perbedaan <ul> dan <ol>:

Tag <ul> berfungsi untuk Daftar tanpa urutan contoh: Daftar menu, fitur produk
Tag <ol> berfungsi untuk Daftar dengan urutan contoh: Langkah-langkah resep, panduan

5. Untuk mengatur tampilan gambar gunakan atribut ukuran (width, height) atau CSS agar gambar tidak terlalu besar. Misalnya:

Kesimpulan Studi Kasus

Berdasarkan studi kasus tersebut dapat kita simpulkan bahwa:

Dalam pembuatan halaman web, menata informasi dengan list, link, dan image membantu pengunjung memahami konten dengan lebih cepat dan nyaman.
List menampilkan data dalam bentuk terstruktur dan mudah dibaca.
Link menghubungkan pengguna ke sumber atau halaman lain yang relevan.
Image memperkaya tampilan visual dan memberikan konteks tambahan pada teks.

Dengan menguasai cara menggunakan ketiga elemen dasar ini, developer dapat menciptakan halaman web yang informatif, menarik, dan profesional, sekaligus lebih mudah dikembangkan di tahap berikutnya seperti styling (CSS) atau interaktivitas (JavaScript).

Cari Blog Ini

SMK Asiyah Homeschooling