Lihat mana-mana laman web dalam talian hari ini dan anda akan melihat bahawa mereka berkongsi perkara-perkara tertentu yang sama. Salah satu sifat yang dikongsi itu adalah imej. Imej yang betul menambah banyak persembahan di laman web. Beberapa imej itu, seperti logo syarikat, membantu merekam tapak dan menyambungkan entiti digital itu ke syarikat fizikal anda.
Untuk menambah imej, ikon, atau grafik ke halaman web anda, anda perlu menggunakan teg dalam kod HTML halaman. Anda meletakkan tag IMG dalam HTML anda dengan tepat di mana anda mahu paparan grafik. Penyemak imbas web yang memberikan kod halaman akan menggantikan tag ini dengan graf yang sesuai apabila halaman dilihat. Kembali ke contoh logo syarikat kami, berikut adalah cara anda dapat menambahkan imej itu ke laman web anda:
Atribut Imej
Melihat kod HTML di atas, anda akan melihat bahawa elemen tersebut mengandungi dua atribut. Setiap daripada mereka diperlukan untuk imej itu.
Atribut pertama adalah "src". Ini secara harfiah adalah fail imej yang anda mahu dipaparkan pada halaman. Dalam contoh kami, kami menggunakan fail bernama "logo.png". Ini adalah grafik yang akan dipaparkan oleh penyemak imbas web apabila ia membuat laman web ini.
Anda juga akan melihat bahawa sebelum nama fail ini, kami menambah beberapa maklumat tambahan, "/ images /". Ini ialah laluan fail. Slash ke hadapan awal memberitahu pelayan untuk melihat ke dalam akar direktori. Ia kemudian akan mencari folder yang dipanggil "imej" dan akhirnya fail yang dipanggil "logo.png". Menggunakan folder yang dipanggil "imej" untuk menyimpan semua grafik laman web adalah amalan yang lazim, tetapi laluan fail anda akan ditukar kepada apa sahaja yang relevan untuk laman web anda.
Atribut yang diperlukan kedua adalah teks "alt". Ini adalah "teks alternatif" yang ditunjukkan jika imej gagal dimuatkan dengan sebab tertentu. Teks ini, yang dalam contoh kita berbunyi "Logo Syarikat" akan dipaparkan jika imej gagal dimuatkan. Kenapa itu berlaku? Pelbagai sebab:
- Laluan fail yang salah
- Nama fail salah atau salah ejaan
- Kesalahan penghantaran
- Fail telah dipadamkan dari pelayan
Ini hanya beberapa kemungkinan mengapa imej tertentu kami mungkin hilang. Dalam kes ini, teks alt kami akan dipaparkan.
Teks alt juga digunakan oleh perisian pembaca skrin untuk "membaca" imej kepada pengunjung yang mengalami penglihatan. Oleh kerana mereka tidak dapat melihat imej seperti yang kita lakukan, teks ini membolehkan mereka tahu apa imej itu sendiri. Inilah sebab mengapa alt teks diperlukan dan mengapa ia harus menyatakan dengan jelas apa imej itu!
Kesalahpahaman umum alt teks adalah bahawa ia dimaksudkan untuk tujuan enjin carian. Ini tidak benar. Walaupun Google dan enjin carian lain membaca teks ini untuk menentukan imej apa (ingat, mereka tidak boleh "melihat" imej anda sama ada), anda tidak boleh menulis teks alt untuk merayu semata-mata untuk enjin carian. Teks alt jelas penulis yang dimaksudkan untuk manusia. Jika anda juga boleh menambahkan beberapa kata kunci ke dalam tag yang merayu kepada enjin carian, itu baik-baik saja, tetapi pastikan teks alt berfungsi dengan tujuan utamanya dengan menyatakan imej itu untuk sesiapa sahaja yang tidak dapat melihat fail grafik.
Atribut lain
Tag IMG juga mempunyai dua atribut lain yang mungkin anda lihat digunakan apabila anda meletakkan grafik pada halaman web anda - lebar dan ketinggian. Sebagai contoh, jika anda menggunakan editor WYSIWYG seperti Dreamweaver, ia secara automatik menambah maklumat ini untuk anda. Contohnya:
Atribut WIDTH dan HEIGHT memberitahu pelayar saiz imej. Penyemak imbas kemudian mengetahui dengan tepat berapa banyak ruang dalam susun atur untuk diperuntukkan, dan ia boleh bergerak ke elemen seterusnya pada halaman semasa muat turun imej. Masalah dengan menggunakan maklumat ini dalam HTML anda adalah bahawa anda mungkin tidak selalu mahu imej anda dipaparkan pada saiz yang tepat. Contohnya, jika anda mempunyai laman web responsif yang mengubah ukuran mengikut skrin pelawat dan saiz peranti, anda juga mahu imej anda menjadi fleksibel. Jika anda menyatakan dalam HTML anda apakah saiz tetap itu, anda akan merasa sangat sukar untuk mengatasi pertanyaan media CSS yang responsif. Atas sebab ini, dan untuk mengekalkan pemisahan gaya (CSS) dan struktur (HTML), disarankan agar anda TIDAK menambah atribut lebar dan ketinggian pada kod HTML anda.
Satu nota: Jika anda meninggalkan arahan ukuran ini dan tidak menentukan saiz dalam CSS, pelayar akan memaparkan imej pada lalai, saiz asalnya pula.
Diedit oleh Jeremy Girard