HTML Resim Ekleme ve CSS ile Düzenleme: Kapsamlı Bir Kılavuz
Giriş
Resimler, web sayfalarına görsel ilgi ve çekicilik katmanın güçlü bir yoludur. HTML kullanarak web sayfalarınıza kolayca resim ekleyebilir ve CSS ile görünümünü ve konumunu özelleştirebilirsiniz. Bu kapsamlı kılavuz, HTML resim ekleme ve CSS ile düzenleme konusunda adım adım talimatlar sağlayacaktır.
HTML ile Resim Ekleme
Bir web sayfasına resim eklemek için <img> etiketini kullanın. Bu etiket, resmin kaynağını ve alternatif metnini belirten özniteliklere sahiptir.
Temel Öznitelikler:
- src: Resmin URL’sini veya dosya yolunu belirtir.
- alt: Resmin alternatif metnini belirtir. Bu metin, resim görüntülenemiyorsa veya ekran okuyucular tarafından okunuyorsa görüntülenir.
Örnek:
html
<img src="resim.jpg" alt="Web sitesi logosu">
Ek Öznitelikler:
- width: Resmin genişliğini piksel olarak belirtir.
- height: Resmin yüksekliğini piksel olarak belirtir.
- title: Resmin üzerine gelindiğinde görüntülenen bir araç ipucu metni sağlar.
- class: Resme bir CSS sınıfı ekler.
CSS ile Resim Düzenleme
CSS, resimlerin görünümünü ve konumunu özelleştirmek için kullanılabilir. Aşağıdaki CSS özellikleri yaygın olarak kullanılır:
- width: Resmin genişliğini ayarlar.
- height: Resmin yüksekliğini ayarlar.
- margin: Resmin etrafındaki boşluğu ayarlar.
- padding: Resmin içindeki boşluğu ayarlar.
- float: Resmin sola veya sağa hizalanmasına izin verir.
- display: Resmin görüntülenme şeklini belirler (örneğin, blok veya satır içi).
Örnek:
css
img {
width: 200px;
height: 150px;
margin: 10px;
float: left;
}
Faydalı Siteler ve Dosyalar
Sonuç
HTML resim ekleme ve CSS ile düzenleme, web sayfalarınıza görsel ilgi katmanın ve kullanıcı deneyimini iyileştirmenin güçlü bir yoludur. Bu kılavuzdaki talimatları izleyerek, resimlerinizi kolayca ekleyebilir ve özelleştirebilir, böylece web sayfalarınız daha çekici ve etkili hale gelecektir.