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 altnitelik 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, widthve heightniteliklerini 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">

widthVe 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, heightVe stylenitelikleri 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

floatResmin 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

srcResmin URL’sini tanımlamak için HTML özelliğini kullanın

altGö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 widthve heightözellikleri kullanın

Resmin boyutunu tanımlamak için CSS’yi widthve heightözelliklerini kullanın (alternatif olarak)

floatResmin 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 …