Bu gün hər hansı bir veb səhifəsinə baxın və siz müəyyən bir şeyləri ortaq paylaşdıqlarını görürsünüz. Birlikdə olan bu xüsusiyyətlərdən biri şəkillərdir. Doğru şəkillər bir veb saytın təqdimatına qədər çox əlavə edir. Bu şəkillərin bəziləri, şirkətin loqosu kimi, saytın markasına kömək edir və rəqəmsal şəxsiyyəti fiziki şirkətinizə qoşun.
Veb səhifəmizə bir şəkil, simge və ya qrafik əlavə etmək üçün, bir səhifənin HTML kodunda etiketi istifadə etməlisiniz. Siz HTML etiketini qrafikin göstərilməsini istədiyiniz yerdə tam olaraq yerləşdirirsiniz. Sayfanın kodunu işləyən veb brauzer, səhifənin görüntülendiği zaman bu etiketini müvafiq grafi ilə əvəz edər. Şirkətin loqosu nümunəsinə qayıdarkən, saytınıza bu şəkli necə əlavə edə bilərsiniz:
Şəkil xüsusiyyətləri
Yuxarıdakı HTML koduna baxdığınızda, elementin iki xüsusiyyətə malik olduğunu görürsünüz. Onların hər biri imaj üçün tələb olunur.
İlk xüsusiyyət "src" dir. Bu, səhifədə göstərilmək istənən bir görüntü fayldır. Məsələn, "logo.png" adlı bir fayl istifadə edirik. Bu saytın göstərildiyi zaman veb brauzerin göstərəcəyi qrafikdir.
Bundan başqa, bu faylın adı əvvəlində "/ images /" əlavə məlumat əlavə etdik. Bu fayl yolu. İlkin irəli sürüşmə, serverin kökünün kökünə baxmasını izah edir. Daha sonra "şəkillər" adlı bir qovluq və nəhayət "logo.png" adlı fayl axtaracaqsınız. Bir saytın bütün qrafiklərini saxlamaq üçün "şəkillər" adlı qovluğu istifadə etmək olduqca yaygın bir tətbiqdir, ancaq fayl yolunuz siteniz üçün uyğun olan hər hansı bir şeyə dəyişdiriləcəkdir.
İkinci zəruri xüsusiyyət "alt" mətni. Bu şəkil bir səbəblə yüklənməsə göstərilən "alternativ mətn" dir. Bizim nümunədəki "Company Logo" yazan bu mətn, şəkil yüklənməyincə göstəriləcək. Niyə belə olur? Müxtəlif səbəblər:
- Yanlış fayl yolu
- Yanlış fayl adı və ya səhv yazma
- Transmissiya səhvi
- Fayl serverdan silindi
Bunlar, göstərilən təsvirin əskik olmaya biləcəyi bir neçə imkandır. Bu hallarda, bizim alt mətn əvəzinə göstərilir.
Alt mətn, görmə əlilliyi olan bir ziyarətçi üçün "oxumaq" üçün ekran oxucu proqramı tərəfindən də istifadə olunur. Bizim kimi görünüşünü görə bilmədikləri üçün, bu mətn onları özünün nə olduğunu bilir. Bu səbəbdən alt mətn tələb olunur və niyə imicin nə olduğunu aydın şəkildə ifadə etməlidir!
Alt mətnin ümumi bir yanlış anlama, axtarışı məqsədləri üçün nəzərdə tutulmuşdur. Bu doğru deyil. Google və digər axtarış motorları, görüntünün nə olduğunu müəyyən etmək üçün bu mətni oxudursa da (yadda saxlayırlar ki, onlar da sizin "görməyiniz"), yalnız axtarış motorlarına müraciət etmək üçün alt mətni yazmamalısınız. Müəllif aydın insanlar üçün nəzərdə tutulmuş alt mətni. Axtarış motorlarına müraciət edən taga bəzi sözlər əlavə edə bilərsiniz, lakin bu da həmişə alt mətnin qrafik faylını görməyən hər kəs üçün nə olduğunu bildirərək əsas məqsədinə xidmət etdiyinə əmin olun.
Digər xüsusiyyətlər
IMG etiketi ayrıca, veb səhifənizdə bir qrafik qoyduğunuzda istifadə edə biləcəyiniz iki xüsusiyyətə malikdir - genişlik və hündürlük. Məsələn, Dreamweaver kimi bir WYSIWYG redaktoru istifadə edirsinizsə, avtomatik olaraq sizin üçün bu məlumatı əlavə edir. Məsələn bir nümunə:
WIDTH və HEIGHT xüsusiyyətləri brauzerin ölçüsünün ölçüsünü izah edir. Brauzer daha sonra yerləşdirmə yerində nə qədər yer bilir və şəkil yüklənərkən növbəti elementə keçə bilər. Bu informasiyanı HTML-də istifadə etməklə problem sizin surətinizin həmin ölçüsündə həmişə görünməyini istəmir. Misal üçün, ölçmə dəyişiklikləri bir baxış ekranına və cihazın ölçüsünə əsaslanan məsuliyyətli bir veb saytınız varsa, şəkillərinizin də çevik olmasını istəyirik. HTML-də sabit ölçünün nə olduğunu bildirirsinizsə, məsuliyyətli CSS media sorğuları ilə əvəz etmək çox çətin olacaq. Buna görə də, üslub (CSS) və strukturun (HTML) ayrılmasını təmin etmək üçün HTML kodunuza genişlik və boy xüsusiyyətləri əlavə etmirsiniz.
Bir qeyd: Bu ölçmə təlimatlarını tərk edirsinizsə və CSS-də bir ölçüsünü göstərmirsinizsə, brauzer şəkilləri hər halda default, yerli ölçüdə göstərəcəkdir.
Jeremy Girard tərəfindən düzəldildi