Sepuluh soalan asal ini disusun dari mudah ke lebih sukar. Ia merangkumi struktur laman, helaian gaya, pautan relatif, saiz imej, teks alt dan jadual daripada panduan modul.
Semua fail, nama dan laman ialah rekaan. Tulis jawapan anda dahulu, kemudian buka langkah kerja.
1. Dua elemen manakah membentuk bahagian utama laman HTML, terus di dalam html?
Tunjuk jawapan
head (maklumat tentang laman, termasuk title) dan body (kandungan yang dipaparkan kepada pembaca).
2. Sebuah laman mempunyai <h1>Library</h1>, kemudian <h4>Opening hours</h4>, kemudian <h2>Contact</h2>. Terangkan kesalahan struktur dan pembetulannya.
Tunjuk jawapan
Laman melompat dari h1 ke h4 kerana h4 nampak lebih kecil. Opening hours ialah bahagian di bawah tajuk utama, jadi ia patut h2. Contact juga bahagian, jadi ia kekal h2. Kawal saiz dalam helaian gaya.
3. Tulis pautan dari index.html ke pages/menu.html.
Tunjuk jawapan
<a href="pages/menu.html">Menu</a>. Laman menu berada dalam folder pages, di bawah laman utama, jadi laluan turun tanpa ../.
4. Tulis pautan dari pages/menu.html kembali ke index.html.
Tunjuk jawapan
<a href="../index.html">Home</a>. Laman berada dalam pages, jadi ../ naik satu aras ke folder yang mengandungi index.html.
5. cafe.jpg bersaiz 1500 × 1000 piksel dan mesti selebar 600 piksel pada laman. Berapakah tinggi yang mengekalkan nisbahnya?
Tunjuk jawapan
Faktor skala = 600 ÷ 1500 = 0.4. Tinggi = 1000 × 0.4 = 400. Semak: 600 ÷ 400 = 1.5 dan 1500 ÷ 1000 = 1.5.
6. Untuk foto gerai makanan jalanan pada waktu malam, pilih teks alt paling sesuai: (a) stall.jpg, (b) Photo, (c) Street food stall lit by lanterns at night.
Tunjuk jawapan
(c). Ia menerangkan apa yang ditunjukkan gambar. Pilihan (a) mengulang nama fail dan (b) tidak berguna.
7. Cari kesalahan: h2 { color: blue font-size: 18px; }
Tunjuk jawapan
Koma bertitik tertinggal selepas blue, jadi perisytiharan kedua tidak dibaca dengan betul. Betul: h2 { color: blue; font-size: 18px; }
8. Tiga laman dalam folder utama dan satu dalam pages mesti berkongsi style.css, yang berada dalam folder utama. Tulis baris pautan untuk laman dalam pages, dan nyatakan berapa fail berubah jika warna tajuk berubah.
Tunjuk jawapan
<link rel="stylesheet" href="../style.css"> dalam head. Menukar warna tajuk memerlukan satu suntingan, dalam style.css, kerana keempat-empat laman berkongsinya.
9. Seorang pelajar menggunakan jadual untuk meletakkan menu di kiri dan teks di kanan laman. Terangkan apa yang salah dan cadangkan kaedah yang lebih baik.
Tunjuk jawapan
Jadual patut menunjukkan baris dan lajur data yang berkaitan, bukan meletakkan seluruh laman. Susun atur dan kedudukan terletak dalam helaian gaya, yang juga mengekalkan makna laman untuk pembaca skrin.
10. Gantikan <center><font color="green">Open today</font></center> dengan versi moden, bersama CSS.
Tunjuk jawapan
HTML: <p class="open">Open today</p>
CSS:
.open {
text-align: center;
color: green;
}Teg center dan font sudah lapuk. Penampilan dipindahkan ke helaian gaya.
Jika anda tersalah
- Soalan 1 dan 2: ulang kaji menstruktur laman kecil dengan HTML semantik.
- Soalan 7 dan 8: ulang kaji menggunakan helaian gaya untuk persembahan konsisten.
- Soalan 3 dan 4: ulang kaji mencipta pautan relatif yang berfungsi.
- Soalan 5 dan 6: ulang kaji menetapkan saiz imej dengan teks alternatif yang bermakna.
- Soalan 9 dan 10: ulang kaji menyemak ciri jadual atau susun atur yang diperlukan.
Catat setiap kesilapan dalam log kesilapan dan baris gilir ujian semula, kemudian bina laman kecil anda sendiri dengan penyemak tugasan praktikal dan bukti. Jika kesalahan yang sama terus berulang, tuisyen ICT dalam talian satu dengan satu membolehkan guru melihat fail sebenar anda.