Html Dilinde Resim Ekleme

HTML’de Resim Ekleme: Kapsamlı Bir Kılavuz

Resimler, web sayfalarına görsel ilgi ve çekicilik katmanın güçlü bir yoludur. HTML’de resim eklemek, web sayfalarınızın estetiğini geliştirmek ve kullanıcı deneyimini iyileştirmek için hayati önem taşır. Bu kapsamlı kılavuz, HTML’de resim eklemenin tüm yönlerini açıklayarak, web sayfalarınıza görselleri sorunsuz bir şekilde entegre etmenize yardımcı olacaktır.

HTML’de Resim Ekleme Temelleri

Bir web sayfasına resim 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 sağlar (görüntü yüklenemediğinde veya ekran okuyucular tarafından okunduğunda görüntülenir).
  • width: Resmin genişliğini piksel cinsinden belirtir.
  • height: Resmin yüksekliğini piksel cinsinden belirtir.

Örnek:

html
<img src="resim.jpg" alt="Web sitesi logosu">

Bu kod, “resim.jpg” adlı bir resim ekler ve alternatif metin olarak “Web sitesi logosu”nu kullanır.

Resim Boyutlarını Belirleme

Resim boyutlarını belirlemek, web sayfanızın düzeni ve kullanıcı deneyimi için çok önemlidir. <img> etiketinin width ve height özniteliklerini kullanarak resimlerin boyutlarını piksel cinsinden belirtebilirsiniz.

Örnek:

html
<img src="resim.jpg" alt="Web sitesi logosu" width="200" height="100">

Bu kod, “resim.jpg” adlı resmi 200 piksel genişliğinde ve 100 piksel yüksekliğinde görüntüler.

Resimleri Bağlama

Resimleri web sayfanıza bağlamak, kullanıcıların resimlere tıklayarak daha büyük bir sürümünü veya ilgili bir web sayfasını açmalarına olanak tanır. Resimleri bağlamak için <a> etiketini kullanırız.

Örnek:

html
<a href="resim.jpg">
<img src="resim.jpg" alt="Web sitesi logosu">
</a>

Bu kod, “resim.jpg” adlı resmi görüntüler ve kullanıcıların resme tıklayarak daha büyük bir sürümünü açmalarına olanak tanır.

Resimleri Hizalama

Resimleri web sayfanızda hizalamak, düzenini ve okunabilirliğini iyileştirmeye yardımcı olur. Resimleri hizalamak için <img> etiketinin align özniteliğini kullanırız.

Örnek:

html
<img src="resim.jpg" alt="Web sitesi logosu" align="left">

Bu kod, “resim.jpg” adlı resmi web sayfasının sol tarafına hizalar.

Faydalı Kaynaklar

Yayımlandı

kategorisi