Görsel ekleme
<img> etiketi ve src, alt öznitelikleriyle görsel eklemeyi öğrenirsin.
img etiketi
<img> etiketi sayfaya görsel ekler. Diğer etiketlerden farklı olarak kapanış etiketi yoktur; yani void (boş) bir öğedir. <img> tek başına bir şey göstermez; src özniteliğiyle görselin adresini vermen gerekir.
Adres bir URL olabilir: bir web adresi (örneğin https://example.com/manzaralar/gol.jpg) ya da kendi sayfanın klasöründe bulunan bir dosya yolu (örneğin img/gol.jpg). Tarayıcı bu adrese istek atar ve görseli sayfaya çizer.
alt özniteliği
alt özniteliği görselin metin açıklamasını taşır. Görsel yüklenemezse (yanlış adres, yavaş bağlantı, görsel engeli) bu metin görüntülenir. Ayrıca ekran okuyucu kullanan kişiler görseli bu metinden tanır.
İçerik dolu ve anlamlı olmalı: alt="Göl kenarında gün batımı" iyi; alt="resim" zayıf. Görsel yalnızca süs ise alt="" yazıp boş bırakabilirsin; bu ekran okuyucuya "görmezden gel" der.
Uygulama Bir görsel ekle
Body içine bir <img> etiketi ekle. src özniteliğine gerçekçi bir görsel adresi, alt özniteliğine kısa bir açıklama yaz.
Örnek çözümü göster
<body>
<img src="https://example.com/manzaralar/gol.jpg" alt="Göl kenarında gün batımı">
</body>Kendini test et
-
Bir görselin dosya adresini hangi öznitelik verir?
- title
- src
- alt
- href
Cevabı göster
src — Doğru. src özniteliği görselin adresini taşır; tarayıcı bu adresten yükler.
-
img etiketinde src özniteliğini yaz
<img ____="https://example.com/sehir/meydan.jpg" alt="Şehir meydanı">Cevabı göster
<img src="https://example.com/sehir/meydan.jpg" alt="Şehir meydanı"> -
Özniteliği göreviyle eşleştir
- src
- Görselin adresi
- alt
- Görselin metin açıklaması
- href
- Bağlantı adresi (a etiketi)
- title
- Fareyle üzerine gelince çıkan ipucu