HTML (Hypertext Markup Language), web sayfalarını düzenlemek ve görsel içerik eklemek için kullanılan temel bir işaretleme dilidir. HTML5, daha önceki sürümlerine ek özellikler ve geliştirmeler getirir. Bu yazıda, HTML5’in önemli bir etiketi olan <img> (Image) etiketini ele alacağız.
<img> Etiketi Nedir?
<img> etiketi, HTML içinde görüntü veya resim eklemek için kullanılır. Sayfanızı daha çekici ve bilgilendirici hale getirmek için resimleri web sayfalarınıza kolayca eklemenizi sağlar. <img> etiketi, kullanıcılara statik veya dinamik görsel içerik sunma yeteneği sağlar.
Örnek Kullanım:
<img src="resim.jpg" alt="Harika Manzara" width="500" height="300">
Yukarıdaki örnekte, src özelliği ile resmin dosya yolunu belirtiriz. alt özelliği, resmin açıklamasını içerir ve eğer resim yüklenemezse tarayıcı tarafından gösterilen metni temsil eder. width ve height özellikleri, resmin genişliği ve yüksekliğini belirtir.
<img> Etiketinin Özellikleri:
- src (Source):
- Resmin dosya yolunu veya URL’sini belirtir.
- Örneğin:
src="resim.jpg".
- alt (Alternate Text):
- Resmin açıklamasını içerir.
- Ekran okuyucular gibi erişilebilirlik araçları için önemlidir.
- Örneğin:
alt="Harika Manzara".
- width ve height:
- Resmin genişliğini ve yüksekliğini belirler.
- Örneğin:
width="500"veheight="300".
- title:
- Resimle ilgili ek bilgi veya açıklamayı içerir. Mouse ile üzerine gelindiğinde gösterilir.
- Örneğin:
title="Büyük Dağ Görseli".
- style:
- CSS stil özellikleri eklemek için kullanılır.
- Örneğin:
style="border: 1px solid #ccc;".
- loading (Lazy Loading):
- Resmin gecikmeyi önlemek ve sayfa yüklemesini hızlandırmak için kullanılır.
- Örneğin:
loading="lazy".
Örnek Lazy Loading:
<img src="resim.jpg" alt="Harika Manzara" width="500" height="300" loading="lazy">
<img> Etiketi ve CSS:
<img> etiketi genellikle CSS (Cascading Style Sheets) ile birlikte kullanılarak resimlerin stilini belirlemede ve düzenlemelerde kullanılır.
CSS Kullanımı Örneği:
img {
max-width: 100%; /* Sayfa genişliğine sığacak şekilde ayarlama */
height: auto; /* Orantılı yükseklik */
border: 1px solid #ddd; /* Kenarlık ekleme */
}
Yukarıdaki örnek, <img> etiketlerine bazı temel CSS stil özellikleri uygular.
Sonuç:
<img> etiketi, HTML sayfalarına görsel içerik eklemek için temel bir araçtır. Bu etiket, web sayfalarınızı daha çekici hale getirmenin yanı sıra bilgi sunumunu da destekler.