HTML img Style Ekleme: Kapsamlı Bir Kılavuz
Giriş
HTML’de <img> etiketi, web sayfalarına görüntü eklemek için kullanılır. Görüntünün görünümünü ve konumunu özelleştirmek için CSS kullanarak stil ekleyebilirsiniz. Bu makale, HTML img stil ekleme konusunda kapsamlı bir kılavuz sağlayacaktır.
Stil Özellikleri
<img> etiketi için kullanılabilecek çeşitli stil özellikleri vardır. En yaygın özellikler şunlardır:
- width: Görüntünün genişliğini piksel veya yüzde olarak ayarlar.
- height: Görüntünün yüksekliğini piksel veya yüzde olarak ayarlar.
- margin: Görüntünün etrafındaki boşluğu ayarlar.
- padding: Görüntünün içindeki boşluğu ayarlar.
- border: Görüntünün etrafına bir kenarlık ekler.
- float: Görüntüyü metnin soluna veya sağına hizalar.
- display: Görüntünün nasıl görüntüleneceğini belirler (ör. blok, satır içi).
Stil Ekleme Yöntemleri
HTML img stil eklemenin üç ana yöntemi vardır:
1. İç Stil
Stil bilgilerini doğrudan <img> etiketine ekleyebilirsiniz:
html
<img src="image.jpg" style="width: 200px; height: 150px;">
2. Dış Stil Sayfası
Stil bilgilerini ayrı bir CSS dosyasında tanımlayabilir ve ardından bu dosyayı HTML belgenize bağlayabilirsiniz:
style.css:
css
img {
width: 200px;
height: 150px;
}
index.html:
html
<link rel="stylesheet" href="style.css">
<img src="image.jpg">
3. Satır İçi Stil
Stil bilgilerini <style> etiketleri arasına ekleyebilirsiniz:
“`html
“`
Örnekler
Görüntüyü 200 piksel genişliğinde ve 150 piksel yüksekliğinde yapma:
html
<img src="image.jpg" style="width: 200px; height: 150px;">
Görüntünün soluna 20 piksel boşluk ekleme:
html
<img src="image.jpg" style="margin-left: 20px;">
Görüntünün etrafına 5 piksel kalınlığında kırmızı bir kenarlık ekleme:
html
<img src="image.jpg" style="border: 5px solid red;">
Görüntüyü metnin soluna hizalama:
html
<img src="image.jpg" style="float: left;">
Faydalı Kaynaklar
Sonuç
HTML img stil ekleme, web sayfalarınızdaki görüntülerin görünümünü ve konumunu özelleştirmenize olanak tanır. Bu kılavuzda açıklanan yöntemleri kullanarak, görüntülerinizi istediğiniz gibi görüntüleyebilir ve web sayfalarınızın tasarımını geliştirebilirsiniz.