HTML Kodları ile Resim Ekleme ve Boyutlandırma
Resimler, web sayfalarına görsel ilgi ve bilgi eklemek için güçlü bir araçtır. HTML kodlarını kullanarak web sayfalarınıza kolayca resim ekleyebilir ve boyutlarını ayarlayabilirsiniz. Bu makale, HTML kodları ile resim ekleme ve boyutlandırma hakkında kapsamlı bir kılavuz sağlayacaktır.
Resim Ekleme
Bir web sayfasına resim eklemek için <img> etiketini kullanırız. <img> etiketi, resmin kaynağını ve diğer özelliklerini belirtir. Temel <img> etiketi aşağıdaki gibidir:
html
<img src="resim_kaynagi.jpg" alt="resim_alternatif_metni">
- src: Resmin kaynağını belirtir. Bu, resmin web sunucusundaki konumunun URL’sidir.
- alt: Resmin alternatif metnini belirtir. Bu metin, resim görüntülenmediğinde veya ekran okuyucular tarafından okunduğunda görüntülenir.
Resim Boyutlandırma
Resimlerin boyutunu iki şekilde ayarlayabilirsiniz:
1. CSS ile Boyutlandırma
CSS (Cascading Style Sheets), web sayfalarının görünümünü ve düzenini kontrol etmek için kullanılan bir stil dilidir. Resimlerin boyutunu CSS ile ayarlamak için width ve height özelliklerini kullanabilirsiniz:
css
img {
width: 200px;
height: 150px;
}
2. HTML ile Boyutlandırma
Resimlerin boyutunu doğrudan HTML kodunda da ayarlayabilirsiniz. Bunun için <img> etiketine width ve height özniteliklerini ekleyin:
html
<img src="resim_kaynagi.jpg" alt="resim_alternatif_metni" width="200" height="150">
Faydalı Siteler ve Dosyalar
Sonuç
HTML kodlarını kullanarak web sayfalarınıza resim eklemek ve boyutlarını ayarlamak kolay bir işlemdir. Bu kılavuzdaki talimatları izleyerek, web sayfalarınıza görsel olarak çekici ve bilgilendirici resimler ekleyebilirsiniz.