Görsele Alternatif Metin Ekleme
Görselimize alternatif metin ekleyerek görselimizin ne olduğunu açıklarız. Sitemizdeki görsellere alternatif metin eklemenin birçok avantajı vardır. Bunlar;
- Görme engellilerin sitemizdeki görseller hakkında bilgi sahibi olmalarını sağlar.
- Görsel yüklenemezse görselin yerine alternatif metin gösterilir.
- Arama motorları görselimizin ne ile ilgili olduğunu anlar ve görselimizi arama motorundaki görseller kısmında gösterir.
- Sitemizin arama motorunda daha üst sıralarda gözükmesini sağlar.
Görselimize alternatif metin eklemek için alt niteliğini kullanırız.
Pekiştirme: Niteliklerin mantığı çok basittir.
1. Adım: İlk önce etiket oluşturulur.
<img>
2. Adım: Niteliğin adı açılış etiketinin içerisine girilir.
<img alt>
3. Adım: Nitelik adından sonra eşittir (=) işareti konulur.
<img alt=>
4. Adım: Eşittir (=) işaretinden sonra iki tane çift tırnak ("") konulur.
<img alt="">
5. Adım: Son olarak niteliğin değeri çift tırnaklar içerisine girilir. <img> etiketi için width niteliğinin değeri görselin genişliğidir. Yani yatayda kapladığı alandır.
<img alt="Kabe">
İlk örneğimizde görselimizin kaynağını doğru girelim. Böylece görselimiz başarılı bir şekilde yüklendiğinde alternatif metnin ekranda gösterilmediğini gözlemleyelim.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Kabe</title>
</head>
<body>
<img alt="kabe" src="https://hakkod.com/gorseller/kabe.jpg">
</body>
</html>Gördüğünüz gibi alt niteliğine yazdığımız yazı gözükmedi çünkü görselimiz sorunsuz bir şekilde yüklendi.
İkinci örneğimizde ise görselimizin kaynağını yanlış girelim ve görsel yüklenmeyince alt niteliği içerisindeki metnin ekranda gözüktüğünü gözlemleyelim.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Kabe</title>
</head>
<body>
<img alt="Kabe" src="https://hakkod.com/gorseller/kabeee.jpg">
</body>
</html>