Atribut Tag IMG

Penggunaan HTML IMG Tag untuk Gambar dan Objek

Tag HTML IMG mengawal penyisipan gambar dan objek grafik statik lain dalam halaman web. Teg biasa ini menyokong beberapa atribut mandatori dan opsyenal yang menambah kekayaan keupayaan anda untuk mereka bentuk laman web yang berfokus pada imej yang menarik dan menarik.

Contoh tag HTML IMG terbentuk kelihatan seperti ini:

Atribut Tag IMG Diperlukan

SRC. Satu-satunya atribut yang anda perlukan untuk mendapatkan imej yang dipaparkan pada halaman web ialah atribut SRC. Atribut ini mengenal pasti nama dan lokasi fail imej yang akan dipaparkan.

ALT. Untuk menulis XHTML dan HTML4 yang sah, atribut ALT juga diperlukan. Atribut ini digunakan untuk menyediakan pelayar tanpa visual dengan teks yang menerangkan imej. Penyemak imbas memaparkan teks alternatif dengan cara yang berbeza. Sesetengah memaparkannya sebagai pop timbul apabila anda meletakkan tetikus anda ke atas imej, yang lain memaparkannya dalam sifat apabila anda klik kanan pada imej, dan sesetengahnya tidak memaparkannya sama sekali.

Gunakan teks alt untuk memberikan butiran tambahan mengenai imej yang tidak relevan atau penting kepada teks halaman Web. Tetapi ingat bahawa dalam pembaca skrin dan penyemak imbas teks lain, teks akan dibaca seiring dengan seluruh teks di halaman. Untuk mengelakkan kekeliruan, gunakan teks alt deskriptif yang menyatakan (contohnya), "Perihal Reka Bentuk Web dan HTML" bukan hanya "logo".

Dalam HTML5, atribut ALT tidak selalu diperlukan, kerana anda boleh menggunakan kapsyen untuk menambah lebih banyak huraian kepadanya. Anda juga boleh menggunakan atribut ARIA-DESCRIBEDBY untuk menunjukkan ID yang mengandungi keterangan penuh.

Teks Alt juga tidak diperlukan sekiranya imej tersebut adalah hiasan semata-mata, seperti grafik di bahagian atas halaman web atau ikon. Tetapi jika anda tidak pasti, masukkan alt teks sekiranya berlaku.

Sifat IMG yang disyorkan

WIDTH dan HEIGHT . Anda harus masuk ke dalam tabiat sentiasa menggunakan atribut WIDTH dan HEIGHT. Dan anda harus sentiasa menggunakan saiz sebenar dan tidak mengubah saiz imej anda dengan penyemak imbas.

Atribut ini mempercepat penyerahan halaman kerana penyemak imbas boleh memperuntukkan ruang dalam reka bentuk untuk imej, dan kemudian terus memuat turun kandungan yang lain, daripada menunggu keseluruhan gambar untuk dimuat turun.

Sifat IMG berguna yang lain

TAJUK . Atribut adalah atribut global yang boleh digunakan untuk sebarang elemen HTML . Selain itu, atribut TITLE membolehkan anda menambah maklumat tambahan mengenai imej.

Kebanyakan pelayar menyokong atribut TITLE, tetapi mereka melakukannya dengan cara yang berbeza. Sesetengah memaparkan teks sebagai pop timbul sementara yang lain memaparkannya dalam skrin maklumat apabila pengguna mengklik kanan pada imej. Anda boleh menggunakan atribut TITLE untuk menulis maklumat tambahan mengenai imej, tetapi tidak bergantung pada maklumat ini yang tersembunyi atau kelihatan. Anda pastinya tidak menggunakan ini untuk menyembunyikan kata kunci untuk enjin carian. Amalan ini kini dihukum oleh kebanyakan enjin carian.

USEMAP dan ISMAP . Kedua-dua atribut ini menetapkan peta imej pelanggan () dan sisi pelayan (ISMAP) ke imej anda.

LONGDESC . Atribut itu menyokong URL untuk penerangan lebih lama imej. Ciri ini menjadikan imej anda lebih mudah diakses.

Atribut IMG yang tidak digunakan dan sudah usang

Beberapa atribut kini sudah usang dalam HTML5 atau tidak digunakan dalam HTML4. Untuk HTML terbaik, anda perlu mencari penyelesaian lain dan bukannya menggunakan atribut ini.

BORDER . Atribut menentukan lebar dalam piksel mana-mana sempadan di sekitar imej. Ia telah ditolak kerana memihak CSS dalam HTML4 dan sudah usang dalam HTML5.

ALIGN . Atribut ini membolehkan anda meletakkan imej di dalam teks dan mempunyai aliran teks di sekelilingnya. Anda boleh menyelaraskan imej di sebelah kanan atau kiri. Ia telah ditolak kerana menyokong sifat float CSS dalam HTML4 dan sudah usang dalam HTML5.

HSPACE dan VSPACE . The HSPACE dan atribut VSPACE tambahkan ruang putih secara mendatar (HSPACE) dan menegak (VSPACE). Ruang putih akan ditambah ke kedua-dua belah grafik (atas dan bawah atau kiri dan kanan), jadi jika anda hanya perlu ruang pada satu sisi, anda harus menggunakan CSS. Atribut-atribut ini telah ditolak dalam HTML4 yang memihak kepada sifat CSS margin, dan mereka sudah usang dalam HTML5.

LOWSRC . Atribut LOWSRC memberikan imej alternatif apabila sumber imej anda begitu besar sehingga ia turun dengan sangat perlahan. Sebagai contoh, anda mungkin mempunyai imej yang 500KB yang anda mahu paparkan pada halaman web anda, tetapi 500KB akan mengambil masa yang lama untuk memuat turun. Oleh itu anda membuat salinan imej yang lebih kecil, mungkin dalam warna hitam dan putih atau hanya dioptimumkan sepenuhnya, dan letakkan di dalam atribut LOWSRC. Imej yang lebih kecil akan memuat turun dan memaparkan dahulu, dan kemudian apabila imej yang lebih besar muncul, ia akan menggantikan sumber yang rendah.

Atribut LOWSRC telah ditambahkan ke Netscape Navigator 2.0 ke tag IMG. Ia adalah sebahagian daripada DOM tahap 1 tetapi kemudian dikeluarkan dari tahap DOM 2. Sokongan penyemak imbas telah samar untuk atribut ini, walaupun banyak laman web menyatakan bahawa ia disokong oleh semua penyemak imbas moden. Ia tidak dihentikan dalam HTML4 atau usang dalam HTML5 kerana ia tidak pernah menjadi sebahagian rasmi sama ada spesifikasi.

Elakkan menggunakan atribut ini dan sebaliknya mengoptimumkan imej anda supaya mereka memuatkan dengan cepat. Kelajuan halaman loading adalah bahagian kritis dari reka bentuk Web yang baik, dan gambar besar memperlambat halaman-sangat besar-walaupun anda menggunakan atribut LOWSRC.