🌐

ASK · TINGKATAN 1 · BAB 4

Asas HTML

📚 6 pelajaran · ⏱️ Anggaran 60 minit

Tag, pautan, imej, menu, ruang komen dan laman sesawang interaktif asas.

1Fahami konsep
2Lihat contoh
3Cuba aktiviti
4Semak kendiri
5Uji dengan kuiz

Asas HTML

🎯 Hasil Pembelajaran

Menerangkan struktur dokumen HTML
Menggunakan tag teks, pautan dan imej
Membina menu dan borang ringkas
Mengesan kesilapan tag

Konsep Utama

HTML menerangkan struktur kandungan laman. Elemen biasanya mempunyai tag pembuka, kandungan dan tag penutup. Atribut seperti href dan src memberikan maklumat tambahan.

Contoh Berpandu

Dokumen asas mempunyai html, head dan body. Tajuk halaman diletakkan dalam title, manakala kandungan yang dilihat pengguna berada dalam body.

html

<!doctype html>\n<html lang="ms">\n<head><title>Biodata</title></head>\n<body>\n  <h1>Nama Saya</h1>\n  <a href="https://example.com">Pautan</a>\n</body>\n</html>

⚠️ AMARAN: Kesilapan lazim: HTML bukan bahasa pengaturcaraan; ia bahasa penanda. Pastikan tag bersarang ditutup dalam urutan yang betul.

🧪 Aktiviti Aplikasi

Bina halaman biodata yang mempunyai satu tajuk, gambar, senarai hobi dan pautan ke laman sekolah.

Rancang jawapan
Laksanakan langkah
Semak hasil dan jelaskan sebab

🧠 Semak Kendiri: Apakah peranan atribut alt pada imej?

Jawapan: alt menerangkan imej apabila imej gagal dimuatkan dan membantu pengguna pembaca skrin memahami kandungannya.

Penerangan Mendalam

🎯 Standard Pembelajaran

4.2.1 Melakar papan cerita bagi laman sesawang.
4.2.2 Menggunakan tag dalam HTML.
4.2.3 Menggunakan paragraph headings dalam HTML.
4.2.4 Menghasilkan banner, frame dan menu dalam HTML.
4.2.5 Menghasilkan pautan teks dan imej dalam HTML.
4.2.6 Memasukkan imej dalam HTML.
4.2.7 Menghasilkan pull-down menu dalam HTML.
4.2.8 Menyediakan ruang komen dalam HTML.
4.2.9 Mengesan ralat dalam kod HTML.
4.2.10 Membina laman sesawang yang interaktif.

💡 RUJUKAN: Buku Teks ASK Tingkatan 1, Bab 4 Kod Arahan HTML (4.2.1 – 4.2.10)

Gambaran Keseluruhan

HTML (HyperText Markup Language) ialah bahasa penanda yang menerangkan struktur dan makna kandungan laman sesawang. Pelayar web membaca elemen, atribut dan hubungan bersarang untuk membina paparan halaman. Sebelum kod ditulis, papan cerita (storyboard) dilakar untuk merancang susun atur, kandungan dan pautan antara halaman.

Papan cerita

Papan cerita ialah lakaran kasar yang menunjukkan susun atur setiap halaman, kandungan yang akan dipaparkan, dan hubungan pautan antara halaman. Ia dilakar sebelum pengekodan bermula supaya perubahan besar dapat dibuat dengan kos yang rendah. Papan cerita yang baik menunjukkan kedudukan banner, menu, kandungan utama dan footer.

Struktur dokumen HTML

Dokumen bermula dengan pengisytiharan doctype, diikuti elemen html yang mengandungi head dan body. Bahagian head mengandungi metadata seperti title dan charset, manakala body mengandungi kandungan yang dilihat pengguna. Atribut lang membantu teknologi bantuan menentukan bahasa halaman.

Tag dan atribut

Tag ditulis dalam kurungan sudut, contohnya . Kebanyakan elemen mempunyai tag pembuka dan tag penutup seperti dan . Elemen kosong seperti <img> dan tidak mempunyai tag penutup. Atribut ditulis dalam tag pembuka untuk memberi maklumat tambahan, contohnya src dan alt bagi imej.

Paragraph headings dan teks

Heading h1 hingga h6 membina hierarki kandungan, bukan sekadar saiz tulisan. Perenggan menggunakan tag p. Senarai tidak bernombor menggunakan ul dan senarai bernombor menggunakan ol, dengan setiap item dibalut dalam li. Lazimnya satu h1 utama sahaja digunakan bagi setiap halaman.

Imej dan pautan

Elemen img menggunakan atribut src untuk menyatakan lokasi fail imej dan atribut alt untuk menerangkan tujuan imej kepada pembaca skrin atau apabila imej gagal dimuatkan. Elemen a menggunakan atribut href untuk menyatakan destinasi pautan. Laluan relatif sesuai untuk fail dalam laman yang sama, manakala URL mutlak merujuk sumber di laman lain.

Menu, banner dan pull-down menu

Banner ialah bahagian atas laman yang memaparkan identiti laman. Menu navigasi lazimnya dibina menggunakan senarai ul yang mengandungi pautan a. Pull-down menu dalam borang dibina menggunakan elemen select bersama beberapa elemen option, membolehkan pengguna memilih satu daripada senarai pilihan.

Komen dan pengesanan ralat

Komen HTML ditulis dalam bentuk  dan tidak dipaparkan pada pelayar. Komen berguna untuk menerangkan bahagian kod kepada pembangun lain. Ralat lazim termasuk tag yang tidak ditutup, tag bersarang dalam urutan yang salah, atribut tanpa tanda petik, dan nama fail imej yang tidak sepadan dengan fail sebenar.

Laman yang interaktif dan boleh diakses

Borang mengumpul input melalui label, input, select dan button. Setiap kawalan borang perlu mempunyai label yang berkaitan supaya mesra pengguna. Uji laman dengan papan kekunci, semak semua pautan, sahkan teks alternatif imej, dan periksa paparan pada saiz skrin yang berbeza.

Glosari Istilah

📚 Glosari mini

HTML: Bahasa penanda yang menerangkan struktur kandungan laman sesawang.
Papan cerita: Lakaran susun atur dan pautan halaman sebelum pengekodan.
Elemen: Unit struktur HTML yang lazimnya mempunyai tag pembuka dan penutup.
Tag: Penanda dalam kurungan sudut yang menakrifkan elemen.
Atribut: Maklumat tambahan yang ditulis dalam tag pembuka.
Laluan relatif: Lokasi sumber relatif kepada kedudukan dokumen semasa.
Teks alternatif: Penerangan teks bagi tujuan sesuatu imej, ditulis dalam atribut alt.
Pull-down menu: Senarai pilihan yang dibina menggunakan elemen select dan option.
Komen HTML: Nota dalam kod yang tidak dipaparkan pada pelayar.

Struktur = elemen + kandungan + hubungan bersarang

Tag mesti ditutup dalam urutan terbalik daripada urutan ia dibuka.

Contoh: Teks menutup em dahulu sebelum strong.

🎯 TIP: Jangan hafal istilah Asas HTML secara terasing. Terangkan sebab, syarat penggunaan dan kesannya terhadap output.

Contoh Berpandu dan Amali

Kajian Kes Berpandu

Halaman utama Kelab Robotik mempunyai banner di bahagian atas dengan nama kelab, menu navigasi yang dibina daripada senarai ul mengandungi pautan ke halaman Aktiviti dan Hubungi Kami, kandungan utama yang menerangkan aktiviti kelab, dan footer maklumat hubungan. Logo kelab menggunakan atribut alt yang menerangkan identiti kelab supaya pengguna pembaca skrin memahami imej tersebut. Borang pendaftaran menggunakan pull-down menu untuk memilih tingkatan, dan setiap medan mempunyai label yang jelas.

🪜 Kaedah kerja yang boleh diikuti

1Lakar papan cerita dan tentukan hierarki kandungan setiap halaman.
2Bina rangka asas doctype, html, head dan body.
3Gunakan tag heading dan perenggan mengikut peranan kandungan.
4Tambah imej dengan atribut src dan alt yang lengkap.
5Tambah pautan navigasi dan borang jika laman perlu interaktif.
6Sahkan semua tag ditutup, uji pautan, dan semak paparan pada skrin berbeza.

Perwakilan atau contoh teknikal

html

<!doctype html>
<html lang="ms">
<head>
  <meta charset="utf-8">
  <title>Kelab Robotik</title>
</head>
<body>
  <!-- Banner laman -->
  <h1>Kelab Robotik SMK Cemerlang</h1>

  <ul>
    <li><a href="aktiviti.html">Aktiviti</a></li>
    <li><a href="hubungi.html">Hubungi Kami</a></li>
  </ul>

  <p>Belajar membina dan menguji robot bersama kami.</p>
  <img src="logo.jpg" alt="Logo Kelab Robotik">
</body>
</html>

Contoh tambahan

html

<!-- Pull-down menu dalam borang pendaftaran -->
<label for="tingkatan">Tingkatan:</label>
<select id="tingkatan" name="tingkatan">
  <option value="1">Tingkatan 1</option>
  <option value="2">Tingkatan 2</option>
  <option value="3">Tingkatan 3</option>
</select>
<button type="submit">Daftar</button>

Struktur = elemen + kandungan + hubungan bersarang

Tag mesti ditutup dalam urutan terbalik daripada urutan ia dibuka.

Contoh: Teks menutup em dahulu sebelum strong.

🧪 Makmal Mini: Asas HTML

Pilih satu masalah sekolah yang berkaitan dengan Asas HTML. Hasilkan penyelesaian lengkap dan jelaskan setiap keputusan yang anda buat.

Nyatakan input, hasil yang dikehendaki dan kekangan.
Gunakan kaedah kerja di atas langkah demi langkah.
Rekod hasil setiap langkah supaya boleh disemak semula.
Uji sekurang-kurangnya tiga kes: biasa, sempadan dan tidak sah.
Tulis refleksi tentang satu penambahbaikan yang boleh dibuat.

🧠 Semak Kendiri: Apakah bukti bahawa penyelesaian bagi Asas HTML berfungsi?

Jawapan: Bukti mesti menunjukkan input, proses, output dijangka, output sebenar dan alasan bahawa semua syarat penting telah diuji.

Rujukan Pantas dan Jadual Fakta

Rujukan Pantas

Bahagian ini merangkumkan fakta Asas HTML yang paling kerap diuji. Gunakannya untuk ulang kaji pantas sebelum peperiksaan, bukan sebagai ganti kepada nota penuh.

Perkara	Butiran
Tag tajuk halaman (tab pelayar)	<title> di dalam <head>.
Tag perenggan	<p>.
Tag heading	<h1> hingga <h6>.
Tag imej	<img src="..." alt="...">.
Tag pautan	<a href="...">teks</a>.
Tag senarai tidak bernombor	<ul> dengan <li>.
Tag senarai bernombor	<ol> dengan <li>.
Tag pull-down menu	<select> dengan <option>.
Format komen	<!-- komen -->.

Istilah dan maksud dalam penyelesaian

Istilah	Maksud
HTML	Bahasa penanda yang menerangkan struktur kandungan laman sesawang.
Papan cerita	Lakaran susun atur dan pautan halaman sebelum pengekodan.
Elemen	Unit struktur HTML yang lazimnya mempunyai tag pembuka dan penutup.
Tag	Penanda dalam kurungan sudut yang menakrifkan elemen.
Atribut	Maklumat tambahan yang ditulis dalam tag pembuka.
Laluan relatif	Lokasi sumber relatif kepada kedudukan dokumen semasa.
Teks alternatif	Penerangan teks bagi tujuan sesuatu imej, ditulis dalam atribut alt.
Pull-down menu	Senarai pilihan yang dibina menggunakan elemen select dan option.
Komen HTML	Nota dalam kod yang tidak dipaparkan pada pelayar.

Kata kunci yang wajib muncul dalam jawapan

HTML
Papan cerita
Elemen
Tag
Atribut
Laluan relatif

Teknik Menjawab Peperiksaan

Teknik Menjawab Bergaya Peperiksaan

Soalan Sains Komputer menilai ketepatan istilah dan kelengkapan isi. Bagi topik Asas HTML, markah lazimnya diberikan mengikut bilangan isi yang betul, jadi bilangan isi dalam jawapan perlu sepadan dengan bilangan markah yang diperuntukkan.

Membaca kata tugas

Nyatakan atau Namakan — beri jawapan ringkas tanpa huraian panjang.
Terangkan atau Huraikan — beri pernyataan diikuti sebab atau kesan.
Bandingkan — sebut aspek yang sama, kemudian nyatakan kedua-dua pihak bagi setiap aspek.
Hitung — tunjukkan langkah pengiraan kerana markah proses turut diberikan.
Lakar atau Tulis kod — ikut simbol dan sintaks piawai; kesilapan sintaks menyebabkan markah ditolak.

Contoh Soalan dan Jawapan Model

Soalan 1 [4 markah]

Tulis kod HTML yang lengkap bagi memaparkan tajuk "Laman Web Saya" pada tab pelayar, satu perenggan bertulis "Ini adalah laman web pertama saya", dan satu imej bernama logo.jpg.

🧠 Semak Kendiri: Jawapan model

Jawapan: <html><head><title>Laman Web Saya</title></head><body>Ini adalah laman web pertama saya<img src="logo.jpg"></body></html>

🎯 TIP: Markah diberikan untuk struktur html/head/body, tag title, tag p, dan tag img dengan atribut src.

Soalan 2 [2 markah]

Nyatakan fungsi atribut alt dalam tag img.

🧠 Semak Kendiri: Jawapan model

Jawapan: Atribut alt memberikan teks alternatif yang menerangkan imej. Teks ini dipaparkan apabila imej gagal dimuatkan dan dibacakan oleh pembaca skrin kepada pengguna cacat penglihatan.

🎯 TIP: Sebut dua situasi penggunaan: imej gagal dimuat dan pembaca skrin.

Soalan 3 [2 markah]

Kenal pasti dan betulkan ralat dalam kod berikut: Selamat datang

🧠 Semak Kendiri: Jawapan model

Jawapan: Ralat: tag perenggan tidak ditutup dengan betul; tag penutup ditulis sebagai dan bukan . Pembetulan: Selamat datang.

🎯 TIP: Nyatakan ralat dan tulis kod yang telah dibetulkan — dua perkara berasingan untuk dua markah.

Soalan 4 [3 markah]

Tulis kod HTML bagi membina pull-down menu yang membenarkan pengguna memilih antara "Merah", "Biru" dan "Hijau".

🧠 Semak Kendiri: Jawapan model

Jawapan: <select><option>Merah</option><option>Biru</option><option>Hijau</option></select>

🎯 TIP: Satu markah untuk tag select yang lengkap, dan markah selebihnya untuk tag option yang betul.

Semakan akhir sebelum menyerahkan jawapan

Bilangan isi sepadan dengan bilangan markah.
Istilah teknikal dieja dan digunakan dengan betul.
Pengiraan menunjukkan langkah dan unit yang lengkap.
Kod atau carta alir menggunakan simbol dan sintaks piawai.
Setiap laluan atau kes yang diminta soalan telah dijawab.

Pengukuhan, KBAT dan Semak Kendiri

Salah Faham yang Perlu Dielakkan

Salah faham	Pembetulan
HTML ialah bahasa pengaturcaraan yang lengkap.	HTML ialah bahasa penanda yang menerangkan struktur kandungan, bukan bahasa pengaturcaraan.
Placeholder boleh menggantikan label borang.	Placeholder hilang apabila pengguna menaip dan tidak menggantikan label yang boleh diakses.
Atribut alt perlu menyenaraikan semua warna dalam imej.	Atribut alt menerangkan tujuan atau maklumat penting imej mengikut konteks.
Heading dipilih berdasarkan saiz visual sahaja.	Heading perlu mengikut hierarki kandungan, bukan sekadar saiz tulisan.
Komen HTML dipaparkan kepada pengguna.	Komen <!-- --> tidak dipaparkan pada pelayar tetapi kekal dalam kod sumber.
Tag boleh ditutup dalam sebarang urutan.	Tag bersarang mesti ditutup dalam urutan terbalik supaya struktur sah.

⚠️ AMARAN: Dalam jawapan penerangan, menulis definisi sahaja belum mencukupi. Kaitkan konsep Asas HTML dengan situasi, langkah dan akibat.

Strategi Menjawab Soalan

Kerangka jawapan lengkap

Kenal pasti kata tugas seperti nyatakan, terangkan, bandingkan, analisis atau reka.
Gunakan istilah tepat daripada glosari dan berikan konteks.
Tunjukkan langkah, pengiraan, jadual kesanan atau bukti jika berkaitan.
Nyatakan sebab pemilihan serta kelemahan alternatif.
Semak unit, syarat sempadan, sintaks dan kesimpulan.

✍️ Latihan Pengukuhan dan KBAT

Terangkan HTML menggunakan ayat sendiri dan satu contoh baharu.
Bandingkan Papan cerita dengan Elemen.
Gunakan kaedah kerja untuk menyelesaikan satu situasi baharu berkaitan Asas HTML.
Analisis salah faham berikut dan betulkan: HTML ialah bahasa pengaturcaraan yang lengkap.
Cipta satu kes ujian yang boleh mendedahkan kesilapan dalam Asas HTML.
Nilai penyelesaian anda dari sudut ketepatan, kejelasan, kecekapan dan keselamatan.

Semak Kendiri

🧠 Semak Kendiri: Betulkan pernyataan: HTML ialah bahasa pengaturcaraan yang lengkap.

Jawapan: HTML ialah bahasa penanda yang menerangkan struktur kandungan, bukan bahasa pengaturcaraan.

🧠 Semak Kendiri: Betulkan pernyataan: Placeholder boleh menggantikan label borang.

Jawapan: Placeholder hilang apabila pengguna menaip dan tidak menggantikan label yang boleh diakses.

🧠 Semak Kendiri: Betulkan pernyataan: Atribut alt perlu menyenaraikan semua warna dalam imej.

Jawapan: Atribut alt menerangkan tujuan atau maklumat penting imej mengikut konteks.

🧠 Semak Kendiri: Betulkan pernyataan: Heading dipilih berdasarkan saiz visual sahaja.

Jawapan: Heading perlu mengikut hierarki kandungan, bukan sekadar saiz tulisan.

🧠 Semak Kendiri: Bahasa penanda yang menerangkan struktur kandungan laman sesawang ialah ___.

Jawapan: HTML — HTML bermaksud HyperText Markup Language.

🧠 Semak Kendiri: Tag yang digunakan untuk memaparkan imej ialah ___.

Jawapan: img — Tag <img> memerlukan atribut src dan alt.

🧠 Semak Kendiri: Atribut yang menyatakan destinasi sesuatu pautan ialah ___.

Jawapan: href — Atribut href digunakan dalam tag <a>.

Uji kefahaman anda 🎯

Daftar percuma untuk jawab kuiz topik ini, tanya AI Tutor, dan kumpul XP.

Daftar Percuma