Web sitesi içeriğimize HTML görüntüler eklemeyi ve <img> etikenin aldığı parametreleri gösteceğim.
<img> etiketi, oluşturacağımız HTML sayfasına bir görüntü eklemek için kullanılır. Etiket içerisinde sadece parametre değerleri yer alır ve kapanış etiketi yoktur.
Görüntünün URL’si src="" parametresiyle tanımlanır.
Hemen örneklendirelim.
<img src="resim.jpg" />
Web sitenizin bir klasörü var, kalsör ana dizinde index.html dosyanız var ve bu dosya'ya bir resim eklemek istiyorsunuz, ama resim web site klasörünüzün içinde ki resimler/resim.jpg klasörünün içinde.
Bu durumda src="" parametresine gireceğimiz değerde resmin resimler/ klasörü içinde olduğunu belirtmemiz gerekiyor.
Örneğin:
<img src="resimler/resim.jpg" />
bunun tersi olduğunu düşünelim ve index.html dosyanızın sayfalar/index.html klasöründe olduğunu düşünelim ama sayfanıza çekmek istediğiniz resim ise web site klasörünüzün ana dizinin'de.
Yine aynı şekilde src="" parametresine bunu belirtmemiz gerekiyor ama bu sefer farklı bir değer vereceğiz. src="" parametresine vereceğiniz ../ bu değer bir altta anlamına gelir.
Örneğin:
<!-- ../ => Bir altta anlamına gelir! -->
<img src="../resim.jpg" />
Bu parametre, herhangi bir sebeple görüntülenemezse, alt="" niteliği görüntü yerine görüntüyü kelimelerle anlatan alternatif bir yazı gösterir. Bunun için alt niteliği zorunludur!
<img src="resim.jpg" alt="Profil Fotoğrafım" />
Görüntülerin boyutlarını tanımlamak/düzenlemek için width (genişlik) ve height (yükseklik) nitelikleri kullanılır.
Görüntü boyutlandırma değerleri piksel ve yüzde olarak belirtilebilir.;
<img src="resim.png" height="150px" width="150px" alt="" />
<!-- veya -->
<img src="resim.png" height="50%" width="50%" alt="" />
% ile boyut belirtmek resmi orantılı bir şekilde boyutlandırmanıza yarar.
Varsayılan olarak bir görüntünün kenarlıkları yoktur. Eğer görüntülerinize kenarlık eklemek isterseniz görüntü etiketinin içerisinde kenarlık (border) niteliğini kullanmanız gerekmektedir.
<img src="resim.png" height="150px" width="150px" border="1px" alt="" />
Sorular (0)