HTML’ye PNG Görüntüsü Ekleme: Kapsamlı Bir Kılavuz
PNG (Taşınabilir Ağ Grafikleri), web’de yaygın olarak kullanılan kayıpsız bir görüntü formatıdır. Şeffaflığı desteklemesi ve yüksek kaliteli görüntüler üretme yeteneği nedeniyle popülerdir. HTML’ye PNG görüntüsü eklemek, web sayfalarınıza görsel ilgi ve işlevsellik katmanın kolay bir yoludur.
PNG Görüntüsü Ekleme
PNG görüntüsünü HTML’ye eklemek için <img> etiketini kullanın. src özniteliği, görüntünün URL’sini veya dosya yolunu belirtir.
html
<img src="image.png" alt="Resim açıklaması">
alt özniteliği, görüntünün metin tabanlı bir açıklamasını sağlar. Bu, görüntünün yüklenmediği veya ekran okuyucular tarafından erişilemediği durumlarda önemlidir.
Görüntü Boyutlarını Belirleme
Görüntünün boyutlarını width ve height öznitelikleriyle belirleyebilirsiniz. Bu, görüntünün web sayfasında nasıl görüneceğini kontrol etmenizi sağlar.
html
<img src="image.png" alt="Resim açıklaması" width="200" height="100">
Görüntüyü Bağlantıya Dönüştürme
Bir görüntüyü bir bağlantıya dönüştürmek için a etiketini <img> etiketinin etrafına sarın. href özniteliği, bağlantının hedef URL’sini belirtir.
html
<a href="https://www.ornek.com">
<img src="image.png" alt="Resim açıklaması">
</a>
Görüntüye CSS Uygulama
Görüntünün görünümünü ve davranışını CSS kullanarak özelleştirebilirsiniz. Örneğin, görüntüyü yuvarlatmak veya gölge eklemek için aşağıdaki CSS’yi kullanabilirsiniz:
css
img {
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
Faydalı Siteler ve Dosyalar
Sonuç
HTML’ye PNG görüntüsü eklemek, web sayfalarınıza görsel ilgi ve işlevsellik katmanın kolay bir yoludur. Bu kılavuzdaki adımları izleyerek, PNG görüntülerini web sayfalarınıza sorunsuz bir şekilde ekleyebilir ve özelleştirebilirsiniz.