HTML Görüntü Etiketlerinin Yapısı!

Görüntüler bir web sayfasının tasarımını ve görünümünü iyileştirebilir.

Örnek;
<img src="pic_trulli.jpg" alt="Italian Trulli">
<img src="img_girl.jpg" alt="Girl in a jacket">
<img src="img_chania.jpg" alt="Flowers in Chania">
Örnek Çıktı;
See the Pen armyyazilim resim by ArmyYazılım (@armyyazilim) on CodePen.
HTML Görselleri Sözdizimi
HTML’de, resimler <img>
etiketle tanımlanır .
<img>
Etiketi yalnızca niteliklerini içerir ve bir kapanış etiketi yok, boş.
Bu src
özellik görüntünün URL’sini (web adresi) belirtir:
<img src="url">
Alt özellik
Bu alt
özellik, bir nedenden dolayı kullanıcı tarafından görüntülenemiyorsa (yavaş bağlantı nedeniyle, src niteliğindeki bir hatada veya kullanıcı bir ekran okuyucu kullanıyorsa), resim için alternatif bir metin sağlar.
Özelliğin değeri alt
görüntüyü tanımlamalıdır:
<img src="https://armyyazilim.com/wp-content/uploads/2019/12/Untitled-1-15.png" alt="Armyyazılım resim açıklaması">
Bir tarayıcı bir görüntü bulamazsa, alt
özniteliğin değerini görüntüler :
<img src="resim_yok.png" alt="Armyyazılım resim açıklaması">
Çıktısı;
See the Pen resim yok html by ArmyYazılım (@armyyazilim) on CodePen.
Not: Bu alt
nitelik gereklidir. Bir web sayfası, onsuz doğru şekilde doğrulanmayacaktır.
Resim Boyutu – Genişlik ve Yükseklik
style
Bir görüntünün genişliğini ve yüksekliğini belirtmek için niteliği kullanabilirsiniz .
<img src="https://armyyazilim.com/wp-content/uploads/2019/12/Untitled-1-15.png" alt="Armyyazılım resim açıklaması" style="width:300px;height:300px;">
Çıktısı;
See the Pen html resimler by ArmyYazılım (@armyyazilim) on CodePen.
Alternatif olarak, width
ve height
niteliklerini kullanabilirsiniz :
<img src="https://armyyazilim.com/wp-content/uploads/2019/12/Untitled-1-15.png" alt="Armyyazılım resim açıklaması" width="500" height="600">
width
Ve height
özellikleri her zaman piksel görüntü genişliğini ve yüksekliğini belirler.
Not: Her zaman görüntünün genişliğini ve yüksekliğini belirtin. Genişlik ve yükseklik belirtilmezse, resim yüklenirken sayfa titreyebilir.
Width ve Height, yada Style
width
, height
Ve style
nitelikleri HTML geçerlidir.
Ancak, style
özniteliği kullanmanızı öneririz . Stil sayfalarının resimlerin boyutunu değiştirmesini önler:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="https://armyyazilim.com/wp-content/uploads/2019/12/Untitled-1-15.png" alt="HTML5 Icon" width="128" height="128">
<img src="https://armyyazilim.com/wp-content/uploads/2019/12/Untitled-1-15.png" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Çıktısı;
See the Pen html resim duyarlı by ArmyYazılım (@armyyazilim) on CodePen.
Başka Bir Klasördeki Görüntüler
Belirtilmezse, tarayıcı resmi web sayfasıyla aynı klasörde bulmayı bekler.
Ancak, görüntüleri bir alt klasörde saklamak yaygındır. Ardından, src
özniteliğe klasör adını eklemelisiniz :
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Başka Bir Sunucudaki Görüntüler
Bazı web siteleri, görüntülerini görüntü sunucularında depolar.
Aslında, dünyadaki herhangi bir web adresinden görüntülere erişebilirsiniz:
<img src="https://armyyazilim.com/wp-content/uploads/2019/10/JavaScript-Nedir-ve-Nas%C4%B1l-%C3%87al%C4%B1%C5%9F%C4%B1r.png" alt="ArmyYazilim.com">
Hareketli Görüntüler
HTML, animasyonlu GIF’lere izin verir:
<img src="programming.gif" alt="ArmyYazilim.com">

Çıktısı;
See the Pen resim gif by ArmyYazılım (@armyyazilim) on CodePen.
Bağlantı Olarak Resim
Bir resmi link olarak kullanmak için, <img>
etiketi etiketin içine yerleştirin <a>
:
<a href="https://armyyazilim.com/">
<img src="https://armyyazilim.com/wp-content/uploads/2019/12/reklamlar.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Çıktısı;
See the Pen resim link by ArmyYazılım (@armyyazilim) on CodePen.
Not: border:0;
IE9’un (ve önceki sürümlerin) görüntünün çevresinde (görüntü bir bağlantı olduğunda) kenarlık göstermesini önlemek için eklenir.
Görüntü Konumlandırma
float
Resmin bir metnin sağına veya soluna kaymasına izin vermek için CSS özelliğini kullanın :
<img src="https://armyyazilim.com/wp-content/uploads/2019/11/asd.png" alt="armyyazılım" style="float:right;width:42px;height:42px;">
<img src="https://armyyazilim.com/wp-content/uploads/2019/11/asd.png" alt="armyyazılım" style="float:left;width:42px;height:42px;">
Çıktısı;
See the Pen resim konumlandırma by ArmyYazılım (@armyyazilim) on CodePen.
HTML Ekran Okuyucular
Ekran okuyucu, HTML kodunu okuyan, metni dönüştüren ve kullanıcının içeriği “dinlemesini” sağlayan bir yazılım programıdır. Ekran okuyucular, görme engelli veya öğrenme engelliler için yararlıdır.
Bölüm özeti
<img>
Resim tanımlamak için HTML öğesini kullanın
src
Resmin URL’sini tanımlamak için HTML özelliğini kullanın
alt
Görüntülenemiyorsa, görüntünün alternatif bir metnini tanımlamak için HTML özelliğini kullanın
Resmin boyutunu tanımlamak için HTML width
ve height
özellikleri kullanın
Resmin boyutunu tanımlamak için CSS’yi width
ve height
özelliklerini kullanın (alternatif olarak)
float
Resmin konumlandırılmasına izin vermek için CSS özelliğini kullanın.
Not: Resimlerin yüklenmesi zaman alıyor. Büyük resimler sayfanızı yavaşlatabilir. Görüntüleri dikkatli kullanın.
HTML Resim Etiketleri
<img> | Bir görüntü tanımlar |
<map> | Bir görüntü haritası tanımlar |
<area> | Görüntü haritası içinde tıklanabilir bir alan tanımlar. |
<picture> | Birden fazla görüntü kaynağı için bir kapsayıcı tanımlar |
İlginizi çekebilir…
WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)
Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …