Şəkillər
img, alt mətni, ölçü, figure və figcaption.
Bütün dərslər · HTML dərsləri: sıfırdan öyrən
img elementi və alt mətni
Şəkil boş <img> elementi ilə əlavə olunur: src faylı, alt isə şəkil görünmədikdə və ya ekran oxuyucusu üçün mətn təsvirini bildirir. Dekorativ şəkildə alt="" boş qalır.
<img src="images/bridge.jpg"
alt="Evening view of a stone bridge over a river"
width="640" height="400">- Alt qısa və mənalı olsun, «şəkil» sözü ilə başlamasın.
- width və height yazmaq səhifənin yüklənərkən atlamasının qarşısını alır.
Formatlar və yüngül şəkillər
Fotoşəkillər üçün JPEG və ya WebP, şəffaflıq lazım olan loqo üçün PNG, çox sadə çertyojlar üçün SVG uyğundur. Böyük faylları yükləməzdən əvvəl kiçilt. loading="lazy" ekranda görünməyən şəkillərin gec yüklənməsini təmin edir.
<img src="photo.webp" alt="Mountain village" loading="lazy" width="800" height="500">
figure və figcaption
Şəkli izahlı yazı ilə birlikdə göstərmək üçün <figure> və <figcaption> işlət. Beləcə yazı şəklə məntiqi olaraq bağlanır. Fərqli ölçülü ekranlar üçün <picture> ilə müxtəlif mənbələr vermək olar.
<figure> <img src="map.png" alt="Map of the old town"> <figcaption>Fig. 1 — The old town and its main gates.</figcaption> </figure> <picture> <source media="(min-width: 800px)" srcset="wide.webp"> <img src="narrow.webp" alt="Harbour at sunrise"> </picture>