Meletakkan imej pada laman memerlukan tiga perkara: laluan yang betul, saiz yang mengekalkan nisbahnya, dan teks alternatif yang menerangkannya. Kemahiran ini muncul dalam tugasan web dengan gambar yang dibekalkan, dan ia menyambung kerja nisbah dalam mengubah saiz imej tanpa mengubah nisbah bidang dengan laluan dalam pautan relatif.
Apakah yang diperlukan oleh elemen img?
<img src="images/hall.jpg" width="300" height="200" alt="Club members setting up chairs in the school hall">srcialah laluan ke fail.widthdanheightialah saiz paparan dalam piksel.altialah penerangan teks.
Elemen img tidak mempunyai teg penutup.
Bagaimanakah anda menetapkan saiz langkah demi langkah?
- Cari saiz asal daripada sifat fail, ditulis lebar × tinggi.
- Tentukan lebar baharu daripada arahan.
- Kira faktor skala = lebar baharu ÷ lebar asal.
- Kira tinggi baharu = tinggi asal × faktor skala.
- Semak nisbah: lebar baharu ÷ tinggi baharu mesti sama dengan lebar asal ÷ tinggi asal.
- Tulis teks alt selepas anda melihat apa yang ditunjukkan gambar.
Contoh berlangkah
Foto rekaan hall.jpg bersaiz 1200 × 800 piksel. Arahan menyatakan lebarnya mesti 300 piksel.
Langkah 1: faktor skala = 300 ÷ 1200 = 0.25.
Langkah 2: tinggi baharu = 800 × 0.25 = 200.
Langkah 3: semak: 300 ÷ 200 = 1.5, dan 1200 ÷ 800 = 1.5. Nisbah sepadan.
Langkah 4: gambar menunjukkan ahli kelab menyusun kerusi. Kodnya:
<img src="images/hall.jpg" width="300" height="200" alt="Club members arranging chairs in the school hall">Kesilapan yang perlu diawasi
Kesilapan lazim ialah menaip kedua-dua nombor daripada arahan tanpa mengira.
<img src="images/hall.jpg" width="300" height="300" alt="image">Terdapat dua kesalahan. Tinggi 300 tidak mengikut nisbah: 300 ÷ 300 = 1, bukan 1.5, jadi dewan kelihatan tinggi dan sempit. Dan “image” tidak memberitahu apa-apa kepada pengguna pembaca skrin.
Pembetulannya ialah tinggi 200, dan penerangan seperti “Club members arranging chairs in the school hall”. Jika arahan hanya menetapkan lebar, anda juga boleh tidak menulis tinggi dan membiarkan pelayar mengekalkan nisbah.
Semak sendiri
1. Imej bersaiz 900 × 600. Lebarnya mesti 450. Berapakah tinggi yang mengekalkan nisbahnya?
Tunjuk jawapan
Faktor skala = 450 ÷ 900 = 0.5. Tinggi = 600 × 0.5 = 300.
2. Imej bersaiz 1600 × 1000 dan mesti selebar 400. Berikan tinggi baharu.
Tunjuk jawapan
Faktor skala = 400 ÷ 1600 = 0.25. Tinggi = 1000 × 0.25 = 250.
3. Teks alt manakah lebih baik untuk foto poster lukisan tangan: alt="poster1.jpg" atau alt="Hand-painted poster announcing the photo club exhibition"?
Tunjuk jawapan
Yang kedua. Ia menyatakan apa yang ditunjukkan gambar dan mengapa ia ada pada laman. Yang pertama hanya mengulang nama fail.
Ke mana selepas ini
Seterusnya, semak sama ada laman menggunakan jadual dan ciri susun atur seperti yang diminta arahan dalam Menyemak ciri jadual atau susun atur yang diperlukan tanpa andaian lapuk. Kembali ke panduan modul dan sahkan saiz anda dengan penyemak tugasan praktikal dan bukti.
Pelajar boleh mengira saiz dengan betul tetapi terlupa penerangan, yang dinilai secara berasingan oleh penyemak. Guru kami meneliti kedua-duanya dalam tuisyen ICT dalam talian satu dengan satu.