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

Sıradaki ders: Görsel boyutları

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler