Web sayfalarında görseller, içerikleri daha ilgi çekici ve bilgilendirici hale getirir. HTML’de görselleri sayfaya eklemek için kullanılan temel yapı taşı Image (img) etiketidir. Bu yazıda, img etiketinin nasıl çalıştığını, özelliklerini ve kullanım örneklerini inceleyeceğiz.
img Etiketi Nedir?
img etiketi, bir HTML belgesine görsel eklemek için kullanılır. Bu etiket, HTML’de gördüğümüz diğer etiketlerden farklı olarak bir kapanış etiketi içermez. Yalnızca tek bir açılış etiketi ile tanımlanır ve görselin konumunu belirtmek için bir src (source) özelliği kullanılır.
Örnek Kullanım:
<img src="html-logo.png" alt="HTML Logo">
Bu örnekte:
- src: Görselin dosya yolunu veya URL’sini belirtir.
- alt: Görsel yüklenemezse gösterilecek alternatif metni sağlar.
img Etiketinin Temel Özellikleri
src (Source): Görselin Konumu
Görselin dosya yolunu veya URL’sini belirtir.
Yerel bir dosya veya çevrimiçi bir kaynak olabilir.
Yerel Dosya Örneği:
<img src="assets/html-logo.png" alt="HTML logolu bir görsel">
Çevrimiçi Kaynak Örneği:
<img src="https://developer.mozilla.org/static/img/favicon144.png"
alt="Mozilla Developer Network logosu">
alt (Alternatif Metin): Görsel Açıklaması
Boyut Ayarları
Görselin boyutunu ayarlamak için width ve height özellikleri kullanılabilir. Ancak, bu özelliklerin CSS ile yapılması önerilir.
HTML ile Boyut Ayarı (Tavsiye Edilmez):
<img src="responsive-design.png"
width="600" height="300" alt="Responsive tasarım">
CSS ile Boyut Ayarı (Tavsiye Edilir):
<style>
img {
width: 100%;
height: auto;
}
</style>
<img src="responsive-design.png" alt="Responsive tasarım">
img Etiketi ile Çalışma Senaryoları
1. Yerel Dosyadan Görsel Ekleme
Yerel bir dosyayı img etiketi ile eklemek için görselin dosya yolunu belirtmek gerekir:
<img src="images/javascript-logo.png" alt="JavaScript Logosu">
Dosya bir alt klasörde ise, yol belirtilmelidir:
<img src="assets/images/css-logo.png" alt="CSS Logosu">
2. Çevrimiçi Bir Görsel Kullanma
Bir URL üzerinden görsel eklemek de mümkündür:
<img src="https://upload.wikimedia.org/wikipedia/commons/6/62/HTML5_logo_and_wordmark.svg"
alt="HTML5 Logosu">
3. Görsel Yüklenemediğinde Alternatif Metin Gösterme
Görselin yüklenememesi durumunda alt özelliği kullanıcıya görselin içeriği hakkında bilgi verir:
<img src="yanlis-yol.jpg" alt="Bu görsel bulunamadı">
Bu özellik, ekran okuyucular için de önemlidir ve erişilebilirlik standartlarını karşılamak için kullanılmalıdır.
img Etiketi ile Yapılandırma
Klasör Yapısında Görsel Kullanımı
Eğer görseller bir klasör içinde tutuluyorsa, bu klasör yolunu belirtmek gerekir:
Örnek:
Hatalı Yol ve Görsel Eksikliği
Eğer belirtilen görsel yolunda bir hata varsa veya görsel bulunamazsa, tarayıcı bir hata simgesi gösterir ve alt metni görüntüler:
<img src="wrong-path.png" alt="Dosya yolu yanlış">
img Etiketi ile Örnek Proje
Aşağıdaki örnek, hem yerel hem de çevrimiçi görselleri içeren bir HTML belgesidir:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>img Etiketi Örnekleri</title>
</head>
<body>
<h1>Görsellerle Çalışma</h1>
<!-- Yerel Görsel -->
<img src="assets/images/react-logo.png" alt="React Logosu">
<!-- Çevrimiçi Görsel -->
<img src="https://cdn.worldvectorlogo.com/logos/nodejs-icon.svg" alt="Node.js Logosu">
<!-- Hatalı Görsel -->
<img src="wrong-path.jpg" alt="Bu görsel bulunamadı">
</body>
</html>
img Etiketinin Özet Özellikleri
Kapanış etiketi yoktur.
img etiketi sadece bir açılış etiketi ile tanımlanır.
src (source) özelliği zorunludur.
Görselin yerini belirtir ve yüklenmesini sağlar.
alt özelliği isteğe bağlıdır, ancak önerilir.
Erişilebilirlik ve kullanıcı deneyimi için önemlidir.
CSS ile görsel boyutlandırma ve stil ekleme tavsiye edilir.
Sonuç
HTML’deki img etiketi, web sayfalarına görsel eklemenin temel yoludur. Görselleri yerel dosyalardan veya çevrimiçi kaynaklardan eklemek için src özelliği kullanılırken, alt özelliği görsellerin açıklamasını sağlar. Görsellerin doğru şekilde kullanılması, erişilebilirlik ve kullanıcı deneyimi açısından önemli bir rol oynar. Web projelerinde img etiketini etkin bir şekilde kullanarak daha ilgi çekici ve işlevsel sayfalar oluşturabilirsiniz.