Şəkillər və obyektlər üçün HTML IMG Tagindən istifadə
HTML IMG etiketi bir web səhifəsində şəkil və digər statik qrafik obyektlərin yerləşdirilməsini tənzimləyir. Bu ümumi etiket, cəlbedici, şəkil mərkəzli veb saytını tərtib etmək qabiliyyətinizə zənginlik gətirən bir neçə məcburi və isteğe bağlı xüsusiyyətləri dəstəkləyir.
Tam tərtib edilmiş HTML IMG etiketinin nümunəsi belədir:
Lazımlı IMG Tag xüsusiyyətləri
SRC. Bir web page göstərmək üçün bir şəkil almaq lazımdır yalnız xüsusiyyət, SRC atributudur. Bu atribut göstərilən görüntü faylının adını və yerini müəyyənləşdirir.
ALT. Xətti XHTML və HTML4 yazmaq üçün ALT xüsusiyyəti də tələb olunur. Bu xüsusiyyət qeyri-görünən brauzerləri təsvir edən mətnlə təmin etmək üçün istifadə olunur. Brauzerlər alternativ mətni müxtəlif yollarla nümayiş etdirirlər. Bəzi şəkillərinizi siçan üzərində qoyduğunuzda bir pop-up kimi göstərdiyiniz, bəziləri isə görüntüyə sağ tıkladığınız zaman xüsusiyyətlərinizi ekrana qoyur və bəziləri onu göstərmir.
Veb-səhifənin mətninə uyğun olmayan və ya vacib olmayan təsvir haqqında əlavə məlumat vermək üçün alt mətni istifadə edin. Ancaq yadda saxlayır ki, ekranda oxucu və digər mətn yalnız brauzerlər, mətn səhifənin mətninin qalan hissəsi ilə inline oxunacaqdır. Qarışıqlığın qarşısını almaq üçün, yalnız "logo" əvəzinə (məsələn) "Veb Dizayn və HTML haqqında" deyən təsviri alt mətni istifadə edin.
HTML5-də ALT özniteliği həmişə tələb olunmur, çünki ona əlavə etmək üçün bir mövzu istifadə edə bilərsiniz. Tam təsviri olan ID göstərmək üçün ARIA-DESCRIBEDBY funksiyasından istifadə edə bilərsiniz.
Bir şəkil və ya simvolun üstündə olan bir qrafik kimi şəkil tamamilə dekorativ olsa alt mətn də tələb olunmur. Amma əmin deyilsinizsə, yalnız alt mətni daxil edin.
Tövsiyə olunan IMG xüsusiyyətləri
Genişlik və yüksəklik . Həmişə WIDTH və HEIGHT atributlarını istifadə etmək vərdişinə daxil olmalısınız. Həmişə əsl ölçüsünü istifadə etməlisiniz və şəkilləri brauzerinizlə ölçüsünüzü dəyişdirməlisiniz.
Bu xüsusiyyətlər səhifənin göstərilməsini sürətləndirir, çünki brauzer şəkil üçün dizaynda yer ayıra bilər və daha sonra bütün görüntünün yüklənməsini gözləmədən məzmunun qalan hissəsini endirməyə davam edir.
Digər Faydalı IMG xüsusiyyətləri
TITLE . Atribut hər hansı bir HTML elementinə tətbiq oluna bilən qlobal bir xüsusiyyətdir. Ayrıca, TITLE özniteliği ilə əlaqədar əlavə məlumatlar əlavə edə bilərsiniz.
Çox brauzerlər TITLE funksiyasını dəstəkləyir, lakin onlar bunu müxtəlif yollarla edirlər. Bəziləri, mətnə bir pop-up kimi baxır, digərləri isə istifadəçinin şəkil üzərində sağ kliklədiyi zaman onu informasiya ekranlarında nümayiş etdirirlər. TITLE funksiyasından istifadə edərək, şəkil haqqında əlavə məlumat yazmaq üçün istifadə edə bilərsiniz, lakin bu məlumat gizli və ya görünən olmağına inanmır. Axtarış motorları üçün açar sözləri gizlətmək üçün bunu mütləq istifadə etməməlisiniz. Bu təcrübə artıq axtarış motorları tərəfindən cəzalandırılır.
USEMAP və ISMAP . Bu iki xüsusiyyət, müştərilər () və server-yan (ISMAP) şəkillərini xəritələrinizə təyin edir.
LONGDESC . Öznitelik URL'lerin resimlerin daha uzun bir açıklamasını desteklemektedir. Bu xüsusiyyət şəkilləri daha əlçatan edir.
İstifadəçi İmtiyazlı və Köhnəlmiş IMG xüsusiyyətləri
Bir neçə atribut HTML5-də köhnəlmiş və ya HTML4-də qadağan olunmuşdur. Ən yaxşı HTML üçün, bu xüsusiyyətləri istifadə əvəzinə digər həllər tapmaq lazımdır.
Sərhədsiz . Öznitelik, şəkil ətrafında hər hansı bir sərhəd piksinin genişliyini müəyyənləşdirir. HTML4-də CSS-nin xeyrinə qaldırılmış və HTML5-də köhnəlmişdir.
ALIGN . Bu xüsusiyyət, mətn daxilində bir şəkil yerləşdirməyi və mətnin ətrafında axmasına imkan verir. Bir görüntüyü sağa və ya sola hizalayabilirsiniz. HTML4-də float CSS xüsusiyyətinin lehinə qaldırılmış və HTML5-də köhnəlmişdir.
HSPACE və VSPACE . HSPACE və VSPACE xüsusiyyətləri yatay (HSPACE) və vertikal (VSPACE) ağ boşluq əlavə edin. Beyaz yer qrafikin hər iki tərəfinə əlavə olunacaq (yuxarı və aşağı və ya sol və sağ), belə ki, yalnız bir tərəfdən yerə ehtiyacınız varsa, CSS-dən istifadə etməlisiniz. Bu xüsusiyyətlər, CSS-in margin CSS-nin lehinə HTML4-də köhnəlmişdir və onlar HTML5-də köhnəlmişdir.
LOWSRC . LOWSRC özniteliği sizin imicinizin çox yavaş yükləndiyini o qədər böyük olduğunda alternativ bir görüntü təmin edir. Məsələn, web səhifənizdə göstərmək istədiyiniz 500KB olan bir görüntünüz ola bilər, ancaq 500KB download üçün uzun müddət alacaq. Bəlkə də qara-ağlı və ya sadəcə son dərəcə optimallaşdırılmış görünüşün daha kiçik bir kopyasını yaratmaq və LOWSRC öznitəsindəki sözləri qoyursunuz. Kiçik şəkil əvvəlcə yüklənəcək və göstərəcək, daha sonra isə daha böyük şəkil göründüyü zaman aşağı mənbədən birini əvəz edəcəkdir.
LOWSRC atributu IMG etiketinə Netscape Navigator 2.0 əlavə edildi. DOM səviyyəsinin 1 hissəsi idi, lakin sonra DOM 2 səviyyəsindən çıxarıldı. Çox saytlar bütün müasir brauzerlər tərəfindən dəstəkləndiyini iddia etsələr də, brauzer dəstəyi bu xüsusiyyət üçün xəyal olmuşdur. HTML5-də qadağan edilməmiş və ya HTML5-də köhnəlmiş deyil, çünki bu, həm dəqiqləşdirmənin rəsmi bir hissəsidir.
Bu xüsusiyyətdən istifadə etməyin və əvəzinə şəkillərinizi tez bir şəkildə yükləmək üçün optimallaşdırın. Səhifənin yüklənmə sürəti yaxşı Web dizaynının vacib bir hissəsidir və böyük görüntülər LOWSRC xüsusiyyətindən istifadə etsəniz də, çoxlu sayda aşağı yavaş endirilir.