🌐

ASK · TINGKATAN 1 · BAB 4

Asas HTML

📚 4 pelajaran · ⏱️ Anggaran 40 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

🎯 Hasil Pembelajaran Terperinci

Menerangkan konsep teras Asas HTML dengan istilah yang tepat.
Menghubungkan konsep dengan contoh dan data sebenar.
Melaksanakan proses secara langkah demi langkah serta menyemak hasil.
Mengesan salah faham dan membetulkan alasan berdasarkan bukti.
Mengaplikasikan pengetahuan dalam situasi baharu dan soalan KBAT.

Gambaran Keseluruhan

HTML ialah bahasa penanda yang menerangkan struktur dan makna kandungan web. Pelayar membaca elemen, atribut dan hubungan bersarang untuk membina halaman. Struktur semantik serta atribut aksesibiliti menjadikan halaman lebih mudah digunakan dan diselenggara.

Struktur dokumen

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

Elemen teks dan kumpulan

Heading h1 hingga h6 membina hierarki, bukan sekadar saiz. Perenggan menggunakan p, senarai menggunakan ul/ol dan li, manakala bahagian semantik boleh menggunakan header, nav, main, section, article dan footer. Hanya satu h1 utama lazimnya mencukupi.

Pautan, imej dan atribut

Elemen a menggunakan href untuk destinasi. Elemen img menggunakan src dan alt; alt menerangkan tujuan imej kepada pembaca skrin atau apabila imej gagal dimuat. Laluan relatif sesuai untuk fail dalam laman yang sama, manakala URL mutlak merujuk sumber penuh.

Borang dan pengujian

Borang mengumpul input melalui label, input, select dan button. Setiap kawalan perlu mempunyai label yang berkaitan. Uji HTML dengan papan kekunci, semak tag bersarang, pautan, teks alternatif dan paparan pada saiz skrin berbeza.

📚 Glosari mini

Elemen: Unit struktur HTML yang lazimnya mempunyai tag.
Atribut: Maklumat tambahan pada tag pembuka.
Semantik: Makna struktur yang diterangkan oleh elemen.
Laluan relatif: Lokasi sumber relatif kepada dokumen semasa.
Teks alternatif: Penerangan teks bagi tujuan imej.

Struktur = elemen + kandungan + hubungan bersarang

Tag mesti ditutup dalam urutan yang betul apabila elemen mempunyai tag penutup.

Contoh: Teks menutup em 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 kelab sekolah mempunyai header dengan tajuk, nav bagi pautan, main yang mengandungi article aktiviti dan footer maklumat hubungan. Logo menggunakan alt yang menerangkan identiti kelab. Setiap medan borang pendaftaran mempunyai label; butang menggunakan teks tindakan yang jelas.

🪜 Kaedah kerja yang boleh diikuti

1Tentukan hierarki kandungan sebelum menulis tag.
2Bina rangka doctype, html, head dan body.
3Gunakan elemen semantik mengikut peranan kandungan.
4Tambah pautan, imej dan borang dengan atribut yang lengkap.
5Sahkan tag, uji papan kekunci dan semak paparan responsif.

Perwakilan atau contoh teknikal

html

<!doctype html>
<html lang="ms">
<head>
  <meta charset="utf-8">
  <title>Kelab Robotik</title>
</head>
<body>
  <header><h1>Kelab Robotik</h1></header>
  <main><p>Belajar membina dan menguji robot.</p></main>
</body>
</html>

Struktur = elemen + kandungan + hubungan bersarang

Tag mesti ditutup dalam urutan yang betul apabila elemen mempunyai tag penutup.

Contoh: Teks menutup em sebelum strong.

Istilah	Maksud dalam penyelesaian
Elemen	Unit struktur HTML yang lazimnya mempunyai tag.
Atribut	Maklumat tambahan pada tag pembuka.
Semantik	Makna struktur yang diterangkan oleh elemen.
Laluan relatif	Lokasi sumber relatif kepada dokumen semasa.
Teks alternatif	Penerangan teks bagi tujuan imej.

🧪 Makmal Mini: Asas HTML

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

Nyatakan input, hasil dan kekangan.
Gunakan kaedah kerja di atas.
Rekod hasil setiap langkah.
Uji sekurang-kurangnya tiga kes.
Tulis refleksi tentang satu pembaikan.

🧠 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.

Pengukuhan, KBAT dan Semak Kendiri

Salah Faham yang Perlu Dielakkan

Salah faham	Pembetulan
HTML ialah bahasa pengaturcaraan penuh.	HTML ialah bahasa penanda struktur kandungan.
Placeholder boleh menggantikan label borang.	Placeholder hilang apabila menaip dan tidak menggantikan label aksesibel.
alt perlu menyenaraikan semua warna imej.	alt menerangkan tujuan atau maklumat penting mengikut konteks.
Heading dipilih berdasarkan saiz visual sahaja.	Heading perlu mengikut hierarki kandungan.

⚠️ 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 Elemen menggunakan ayat sendiri dan satu contoh baharu.
Bandingkan Atribut dengan Semantik.
Gunakan langkah kerja untuk menyelesaikan satu situasi berkaitan Asas HTML.
Analisis salah faham berikut dan betulkan: HTML ialah bahasa pengaturcaraan penuh.
Cipta satu kes ujian yang boleh mendedahkan kesilapan dalam Asas HTML.
Nilai penyelesaian anda dari sudut ketepatan, kejelasan, kecekapan dan keselamatan.

🧠 Semak Kendiri: Betulkan pernyataan: HTML ialah bahasa pengaturcaraan penuh.

Jawapan: HTML ialah bahasa penanda struktur kandungan.

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

Jawapan: Placeholder hilang apabila menaip dan tidak menggantikan label aksesibel.

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

Jawapan: alt menerangkan tujuan atau maklumat penting mengikut konteks.

Uji kefahaman anda 🎯

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

Daftar Percuma