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 …