HTML Etiketleri ile Resim Ekleme: Kapsamlı Bir Kılavuz
Resimler, web sayfalarına görsel ilgi ve çekicilik katmanın güçlü bir yoludur. HTML etiketlerini kullanarak web sayfalarınıza kolayca resim ekleyebilirsiniz. Bu makale, HTML etiketleri ile resim ekleme konusunda kapsamlı bir kılavuz sağlayacaktır.
<img> Etiketi
Resim eklemek için kullanılan temel HTML etiketi <img> etikettir. Bu etiket, aşağıdaki özniteliklere sahiptir:
- src: Resmin kaynağını belirtir.
- alt: Resmin alternatif metnini belirtir.
- width: Resmin genişliğini piksel cinsinden belirtir.
- height: Resmin yüksekliğini piksel cinsinden belirtir.
Örneğin, aşağıdaki kod bir web sayfasına “resim.jpg” adlı bir resim ekler:
html
<img src="resim.jpg" alt="Resim açıklaması">
Alternatif Metin
Alternatif metin, bir resim görüntülenemiyor veya tarayıcı tarafından desteklenmiyorsa görüntülenen metindir. Bu metin, ekran okuyucular ve arama motorları için önemlidir. Alternatif metin, resmin içeriğini kısa ve öz bir şekilde tanımlamalıdır.
Resim Boyutları
Resim boyutları, <img> etiketinin “width” ve “height” öznitelikleri ile belirlenir. Bu öznitelikler, resmin web sayfasında nasıl görüneceğini kontrol eder.
Resmin orijinal boyutlarını korumak için “width” ve “height” özniteliklerini kullanabilirsiniz. Örneğin, aşağıdaki kod 200 piksel genişliğinde ve 150 piksel yüksekliğinde bir resim ekler:
html
<img src="resim.jpg" alt="Resim açıklaması" width="200" height="150">
Resim Hizalama
Resimler, CSS kullanarak web sayfasında hizalanabilir. Aşağıdaki CSS kuralları, resimleri sola, sağa veya ortaya hizalamak için kullanılabilir:
“`css
img {
float: left;
}
img {
float: right;
}
img {
margin: 0 auto;
}
“`
Resim Bağlantıları
Resimlere, <a> etiketi kullanılarak bağlantılar eklenebilir. Bu, kullanıcıların resme tıklayarak başka bir web sayfasına veya dosyaya yönlendirilmesini sağlar. Örneğin, aşağıdaki kod “resim.jpg” resmine bir bağlantı ekler:
html
<a href="sayfa.html"><img src="resim.jpg" alt="Resim açıklaması"></a>