Html dilinde web sitemizin görselliğini arttırmak veya bir konuyu detaylandırmak için resim eklemek isteyebilirsiniz.
Html dilinde resim eklemek için <img src=" "> etiketi kullanılmaktadır. src ifadesi resmin bulunduğu adresi belirtmek için kullanılmaktadır.
Resim Ekleme Etiketi Kullanımı
<img src="resim_adresi">
Html dilinde img etiketine ait bazı parametreler bulunmaktadır. Bu parametreler:
parametreleri bulunmaktadır. Bu parametreleri detaylı bir şekilde inceleyelim.
Resmin herhangi bir sebepten dolayı gösterilmediği durumlarda çıkması istenen metin için kullanılmaktadır.
Bilgi: Arama motorlarına resmimizin hangi konu ile alakalı olduğu hakkında bilgi vermek içinde kullanılmaktadır.
<img src="resim_adresi" alt="Azkod ile html dersleri">
Html dilinde width parametresi resmin genişliğini belirlemek için kullanılmaktadır.
<img src="resim_adresi" width="250" >
Html dilinde height parametresi resmin yüksekliğini belirlemek için kullanılmaktadır.
<img src="resim_adresi" height="250" >
<img src="resim_adresi" width="250" height="250" >
Yüzde ifadesi ile resim boyutu belirleme işleminde sayfamızın boyutu değiştiğinde resmimizin boyutuda sayfa boyutuna göre otomatik değişme işlemi yapacaktır.
<img src="resim_adresi" width="100%" height="100%" >
Html dilinde border parametresi resmin çerçeve kalınlığını belirlemek için kullanılmaktadır.
<img src="resim_adresi.jpg" border="5">
<img src="resim_adresi.jpg" border="25">
Html dilinde align parametresi resmin konumunu (sağ,sol veya orta) olacağını belirlemek için kullanılmaktadır.
Bilgi: Align parametresinin bazı özellikleri HTML 5 tarafından desteklenmemektedir.Align parametresi yerine css float özelliği kullanılmaktadır.
Bilgi: Align parametresinde center yani ortalama komutu HTML 5'te olmadığı için yeni tarayıcılarda desteklenmemektedir.
<img src="resim_adresi" align="konum">
<!-- konum bölümü yerine:
Sağ: right
Sol: left
Orta: center (ortalama komutu HTML 5 tarafından desteklenmediği için çalışmamaktadır)
komutları yazılması gerekmektedir.
-->
<img src="resim_adresi" align="right">
<img src="resim_adresi" align="left">
<img src="resim_adresi" align="center">
<!-- center komutu HTML 5 tarafından desteklenmediği için çalışmayacaktır. -->
Web sitelerimize haraketli resim ekleme ihtiyacı duyabiliriz. Hareketli resim eklemek için normal resim eklediğimiz yöntemin aynısını kullanıyoruz. Yalnızca hareketli resimlerin uzantısı olan .gif uzantısı olan resimleri kullanmamız gerekmektedir.
<img src="hareketli_resim_adresi.gif" alt="Hareketli resim ekleme">
| Önceki Ders: Html Yorum | Sonraki Ders: Html Bağlantılar |