Html 5 Resim Ekleme

HTML 5’te Resim Ekleme: Kapsamlı Bir Kılavuz

HTML 5, web geliştirme için güçlü ve çok yönlü bir dildir ve resimlerin web sayfalarına eklenmesini kolaylaştırır. Bu makale, HTML 5’te resim eklemeyle ilgili kapsamlı bir kılavuz sağlayacaktır.

Resim Ekleme Etiketi: `<img>`

Resimleri HTML 5’e eklemek için <img> etiketini kullanırız. Bu etiket, aşağıdaki özniteliklere sahiptir:

src: Resmin kaynağını belirtir.
alt: Resmin alternatif metnini sağlar (görüntülenemediğinde).
width: Resmin genişliğini piksel cinsinden belirtir.
height: Resmin yüksekliğini piksel cinsinden belirtir.

Örneğin, aşağıdaki kod bir resim ekler:

html <img src="resim.jpg" alt="Resim açıklaması">

Resim Boyutlarını Belirleme

Resim boyutlarını width ve height öznitelikleriyle belirtebilirsiniz. Bu, tarayıcının resmin boyutlarını önceden bilmesine yardımcı olur ve sayfa yükleme süresini iyileştirebilir.

Alternatif Metin Sağlama

alt özniteliği, resmin alternatif metnini sağlar. Bu metin, resim görüntülenemediğinde veya ekran okuyucular tarafından okunduğunda görüntülenir. Alternatif metin, resmin içeriğini açıklamalı ve erişilebilirliği iyileştirmelidir.

Resimleri Bağlantılara Dönüştürme

Resimleri, a etiketiyle bağlantılara dönüştürebilirsiniz. Bu, kullanıcıların resme tıklayarak başka bir sayfaya veya kaynağa gitmelerini sağlar.

html <a href="sayfa.html"><img src="resim.jpg" alt="Resim açıklaması"></a>

Resimleri Arka Plan Olarak Kullanma

Resimleri, background-image CSS özelliğiyle arka plan olarak kullanabilirsiniz. Bu, sayfanıza görsel ilgi katmanın harika bir yoludur.

css body { background-image: url("arka_plan.jpg"); }