Html Dersleri Rresim Ekleme

HTML Dersleri: Resim Ekleme

Giriş

Resimler, web sayfalarına görsel ilgi ve çekicilik katmanın güçlü bir yoludur. HTML’de resimleri eklemek, web sayfalarınızı daha ilgi çekici ve kullanıcı dostu hale getirmenize yardımcı olabilir. Bu makalede, HTML’de resimlerin nasıl ekleneceği konusunda adım adım bir kılavuz sağlayacağız.

Resim Ekleme Etiketi

Resimleri HTML’ye eklemek için <img> etiketini kullanırız. <img> etiketi, aşağıdaki özniteliklere sahip bir boş etikettir:

  • src: Resmin kaynağını (URL’sini) belirtir.
  • alt: Resmin alternatif metnini belirtir. Bu, resim görüntülenemiyorsa veya ekran okuyucular tarafından okunuyorsa görüntülenir.
  • width: Resmin genişliğini piksel cinsinden belirtir.
  • height: Resmin yüksekliğini piksel cinsinden belirtir.

Resim Ekleme Adımları

Resimleri HTML’ye eklemek için şu adımları izleyin:

  1. Resmin kaynağını (URL’sini) bulun.
  2. HTML kodunuza <img> etiketini ekleyin.
  3. src özniteliğine resmin kaynağını ekleyin.
  4. alt özniteliğine resmin alternatif metnini ekleyin.
  5. İsteğe bağlı olarak, width ve height özniteliklerini kullanarak resmin boyutlarını ayarlayın.

Örnek

Aşağıdaki HTML kodu, “manzara.jpg” adlı bir resmi web sayfasına ekler:

html
<img src="manzara.jpg" alt="Güzel bir manzara fotoğrafı">

Resim Boyutlarını Ayarlama

width ve height özniteliklerini kullanarak resmin boyutlarını ayarlayabilirsiniz. Bu öznitelikler, resmin piksel cinsinden genişliğini ve yüksekliğini belirtir.

Örnek

Aşağıdaki HTML kodu, “manzara.jpg” adlı resmi 200 piksel genişliğinde ve 150 piksel yüksekliğinde görüntüler:

html
<img src="manzara.jpg" alt="Güzel bir manzara fotoğrafı" width="200" height="150">

Alternatif Metin

alt özniteliği, resmin alternatif metnini belirtir. Bu metin, resim görüntülenemiyorsa veya ekran okuyucular tarafından okunuyorsa görüntülenir. Alternatif metin, resmin içeriğini açıklamalı ve kullanıcıların web sayfasını anlamalarına yardımcı olmalıdır.

Örnek

Aşağıdaki HTML kodu, “manzara.jpg” adlı resmin alternatif metnini “Güzel bir manzara fotoğrafı” olarak ayarlar:

html
<img src="manzara.jpg" alt="Güzel bir manzara fotoğrafı">

Faydalı Siteler ve Dosyalar

Sonuç

HTML’de resimleri eklemek, web sayfalarınıza görsel ilgi ve çekicilik katmanın kolay bir yoludur. <img> etiketini kullanarak ve src, alt, width ve height özniteliklerini ayarlayarak resimleri web sayfalarınıza kolayca ekleyebilirsiniz. Alternatif metin eklemeyi unutmayın, böylece resimler görüntülenemese bile kullanıcılar içeriğinizi anlayabilir.

Yayımlandı

kategorisi