Şəkillərin yerləşdirilməsi

1.1 <img> elementi

HTML-də multimedia veb-səhifələrin vizual qəbulunu yaxşılaşdırmaq üçün əsas rola malikdir. Şəkillərin əlavə olunması isə HTML-də multimedianın əsas aspektlərindən biridir. Bunun üçün ən çox <img> elementi istifadə olunur. Gəlin bu elementi daha ətraflı nəzərdən keçirək:

<img> elementi veb-səhifəyə şəkillər əlavə etmək üçün nəzərdə tutulub. Bu boş bir elementdir: onun bağlayıcı teqi yoxdur və yalnız atributlardan ibarətdir.

Sintaksis

    <img src="Şəkilin_URL" alt="Təsvir" width="En" height="Hündürlük">
  

    
      <img src="images/photo.jpg" alt="Şəklin təsviri" width="500" height="300">
    
  

Gəlin <img> elementinin atributlarını bir az daha ətraflı nəzərdən keçirək

1.2 src atributu

src atributunun tam adı — source (mənbə).

src atributu, səhifədə göstəriləcək şəkil faylının yolunu göstərir. Bu, həm mütləq, həm də nisbətli yol ola bilər.

Nümunələr:

Mütləq URL:

    
      <img src="https://example.com/images/photo.jpg">
    
  

Nisbətli yol:

    
      <img src="images/photo.jpg">
    
  

Mütləq URL, şəkilə qədər olan tam ünvanı ehtiva edir — protokol (http və ya https), domen və yol daxil olmaqla. Nisbətli yol isə faylın cari sənədə görə yerləşməsini göstərir ki, bu da yerli fayllarla işləyərkən çox rahatdır.

1.3 Alt atributu

Tam adı: alternative text (alternativ mətn)

alt atributu şəklin mətn təsvirini təmin edir. Bu mətn şəkil yüklənə bilmədikdə göstərilir və əlçatanlığı yaxşılaşdırmaq üçün istifadə olunur, çünki ekran oxuma proqramları onu görmə problemi olan istifadəçilər üçün təsvirin izahı kimi istifadə edir.

Nümunələr:

    
      <img src="images/sunset.jpg" alt="Gözəl günbatımı fotosu">
    
  

Düzgün tərtib edilmiş alternativ mətn istifadəçilərə şəkil əlçatmaz olduqda onun məzmununu anlamağa kömək edir və səhifənin SEO (axtarış mühərriki optimizasiyası) qaydalarını təkmilləşdirir.

1.4. width atributu

width atributu şəklin enini piksel ilə müəyyən edir. Əgər height atributu göstərilməyibsə, şəkil enini dəyişəndə öz proporsiyalarını saxlayır.

Nümunələr:

    
      <img src="images/photo.jpg" width="500">
    
  

Sabit eni istifadə etmək şəkilin ölçüsünü idarə etmək üçün faydalı ola bilər, amma bu zaman dizaynın adaptivliyini nəzərə almaq çox önəmlidir.

1.5 height atributu

height atributu şəklin hündürlüyünü piksel ilə təyin edir. Əgər width atributu göstərilməyibsə, hündürlük dəyişdirilərkən şəkil öz proporsiyalarını qoruyur.

Nümunələr:

    
      <img src="images/photo.jpg" height="300">
    
  

width atributu kimi, sabit hündürlükdən istifadə etmək faydalı ola bilər, amma adaptivliyi nəzərə almaq vacibdir.

Atributların birlikdə istifadəsinə nümunə

    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e" src="https://cdn.codegym.cc/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="gunbatimi">
  

    
      <img src="images/sunset.jpg" alt="Gözəl bir günbatımı şəkli" width="500" height="300">
    
  

Bu nümunədə şəkil images/sunset.jpg faylından yüklənəcək, eni 500 piksel və hündürlüyü 300 piksel olacaq və əgər şəkil yüklənməzsə, "Gözəl bir günbatımı şəkli" mətni göstəriləcək.