Html Css Ile Resim Ekleme

HTML ve CSS ile Resim Ekleme: Kapsamlı Bir Kılavuz

Resimler, web sayfalarına görsel ilgi ve çekicilik katmanın güçlü bir yoludur. HTML ve CSS kullanarak web sayfalarınıza kolayca resim ekleyebilirsiniz. Bu kapsamlı kılavuz, HTML ve CSS ile resim ekleme sürecini adım adım açıklayacaktır.

HTML ile Resim Ekleme

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ı belirtir.
  • alt: Resmin alternatif metnini belirtir.
  • width: Resmin genişliğini piksel olarak belirtir.
  • height: Resmin yüksekliğini piksel olarak belirtir.

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

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

CSS ile Resimleri Biçimlendirme

CSS, resimlerin görünümünü ve konumunu biçimlendirmek için kullanılabilir. Resimleri biçimlendirmek için kullanılabilecek en yaygın CSS özellikleri şunlardır:

  • width: Resmin genişliğini piksel, yüzde veya diğer birimler olarak belirtir.
  • height: Resmin yüksekliğini piksel, yüzde veya diğer birimler olarak belirtir.
  • margin: Resmin etrafındaki boşluğu piksel, yüzde veya diğer birimler olarak belirtir.
  • padding: Resmin içindeki boşluğu piksel, yüzde veya diğer birimler olarak belirtir.
  • float: Resmin sola veya sağa kaymasını sağlar.
  • display: Resmin nasıl görüntüleneceğini belirtir (örneğin, blok veya satır içi).

Örneğin, aşağıdaki CSS kodu bir resmi sola kaydırır ve etrafına 10 piksel boşluk ekler:

css
img {
float: left;
margin: 10px;
}

Resimleri Web Sayfasına Ekleme Adımları

Resimleri web sayfanıza eklemek için şu adımları izleyin:

  1. Resminizi web sunucunuza yükleyin.
  2. Resminizin URL’sini bulun.
  3. HTML kodunuza <img> etiketini ekleyin ve src özniteliğine resmin URL’sini ayarlayın.
  4. İsteğe bağlı olarak, alt özniteliğine resmin alternatif metnini ekleyin.
  5. İsteğe bağlı olarak, resmin görünümünü ve konumunu biçimlendirmek için CSS kullanın.

Faydalı Siteler ve Dosyalar

Sonuç

HTML ve CSS kullanarak web sayfalarınıza resim eklemek, web sitenizin görsel çekiciliğini artırmanın kolay ve etkili bir yoludur. Bu kılavuzdaki adımları izleyerek, resimleri web sayfalarınıza kolayca ekleyebilir ve bunları istediğiniz gibi biçimlendirebilirsiniz.

Yayımlandı

kategorisi