Resimler bir web sayfasının tasarımını ve görünümünü iyileştirmek için kullanılır.
<img src="sitelogosu.jpg" alt="TurkYazilimci Logo">HTML <img> Sözdizimi (Syntax)
HTML <img> etiketi, bir resmi web sitesine gömmek için kullanılır.
Resimler teknik olarak bir web sitesine eklenmez sadece bağlanır. <img> sadece görüntü tutma alanı oluşturur. <img> etiketi boştur, yalnız nitelik içerir. Kapanış etiketi yoktur.
<img> etiketinin iki gerekli özelliği vardır:
- src – Resmin yolunu belirtir
- alt – Resim için alternatif bir metin belirtir
Sözdizimi genel olarak aşağıdaki gibidir;
<img src="resim_linki" alt="alternatif metin alanı">HTML src Özelliği
src özelliği görüntünün linkini (yolunu) bildirir.
<!DOCTYPE html>
<html>
<body>
<img src="ty.png" alt="Logo">
</body>
</html>Not: Bir web sayfası yüklendiğinde o anda görüntüyü sunucudan alıp ekrana getiren tarayıcılardır. Bu nedenle eklediğiniz görselin konumunun doğru olduğuna emin olun. Aksi takdirde görüntü eklenmeyecek ve varsa alt etiketi görüntülenecektir.
NOT: Ekran okuyucu, HTML kodunu okuyan 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 engelli kişiler için kullanışlıdır.
HTML alt Özelliği
Web sitesini ziyaret eden kullanıcı, herhangi bir nedenle (yavaş bağlantı, kırık link veya ekran okuyucu kullanımı) resmi göremiyorsa alt etiketi görünecektir.
HTML Resim Boyutu (Width ve Height)
Bir görsele elle genişlik veya yükseklik vermek için style özelliği kullanılmaktadır.
<!DOCTYPE html>
<html>
<body>
<img src="turkYazilimciLogo.png" alt="Logo" style = "width:150px; height:40px">
</body>
</html>
style özelliğini kullanmadan da uzunluk ve genişlik vermek mümkündür.
<!DOCTYPE html>
<html>
<body>
<img src="turkYazilimciLogo.png" alt="Logo" width="150" height="600">
</body>
</html>İki örnek arasında fark olarak verilen değerlerin yanına px (piksel) yazılmamıştır. Genişlik ve yükseklik nitelikleri her zaman piksel cinsinden değerler alır.
Not: Tasarım sırasında mümkün olduğunca yükseklik ve genişlik değerlerinin elle verilmesinde fayda vardır. Genişlik veya yükseklik belirtilmezse farklı çözünürlükte farklı sonuçlara neden olabilir.
Genişlik ve Yükseklik mi Yoksa Style mi Yazılmalı?
HTML’de height, width ve style niteliklerinin tümü geçerlidir. Ancak stytle özelliğini kullanmanızı öneririz. style sayfalarının görsellerin boyutunu değiştirmesini engeller:
<!DOCTYPE html>
<html>
<head>
<style>
/* Bu css kodu tüm görsellerin genişliğini %100 olarak ayarlar: */
img {
width: 100%;
}
</style>
</head>
<body>
<h2>Width/Height mi yoksa style mi?</h2>
<p>İlk resim genişlik özelliğini kullanır (128 piksele ayarlıdır), ancak başlık bölümündeki style bunu geçersiz kılar ve genişliği %100 olarak ayarlar.</p>
<img src="download.png" alt="Site Logosu" width="128" height="128">
<p>İkinci resim, genişliği 128 piksele ayarlamak için style özelliğini kullanır; bu, başlık bölümündeki style tarafından geçersiz kılınmayacaktır.:</p>
<img src="download.png" alt="Site Logosu" style="width:128px;height:128px;">
</body>
</html>
HTML Hareketli Görseller
HTML, animasyonlu GIF’lere izin verir:
<img src="hareketli-resim.gif" alt="Hareketli Resim" style="width:48px;height:48px;">HTML Resim Konumu
Görüntünün metnin sağında veya solunda durmasını sağlamak için CSS float özelliğini kullanın:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="download.png" alt="Site Logosu" style="float:right;width:42px;height:42px;">
<img src="download.png" alt="Site Logosu" style="float:left;width:42px;height:42px;">
</body>
</html>
