Html Resimler

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">

Kodu Çalıştır

Html Resim Parametreleri

Html dilinde img etiketine ait bazı parametreler bulunmaktadır. Bu parametreler:

  • Alt Parametresi
  • Width Parametresi
  • Height Parametresi
  • Border Parametresi
  • Align Parametresi

parametreleri bulunmaktadır. Bu parametreleri detaylı bir şekilde inceleyelim.

Alt Parametresi

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.

Html <img> Etiketi Alt Parametresi Kullanımı

<img src="resim_adresi" alt="Azkod ile html dersleri">

Kodu Çalıştır

Width Parametresi

Html dilinde width parametresi resmin genişliğini belirlemek için kullanılmaktadır. 

<img> Etiketi ile Width Parametresi Kullanımı

<img src="resim_adresi" width="250" >

Kodu Çalıştır

Height Parametresi

Html dilinde height parametresi resmin yüksekliğini belirlemek için kullanılmaktadır. 

<img> Etiketi ile Height Parametresi Kullanımı

<img src="resim_adresi" height="250" >

Kodu Çalıştır

Resim Boyutu Width ve Height Parametresi Birlikte Kullanımı

<img src="resim_adresi" width="250" height="250" >

Kodu Çalıştır

Width ve Height Parametresi Yüzde İfadesi ile Birlikte Kullanımı

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%" >

Kodu Çalıştır

Border Parametresi

Html dilinde border parametresi resmin çerçeve kalınlığını belirlemek için kullanılmaktadır. 

<img> Etiketi ile Border Parametresi Kullanımı

<img src="resim_adresi.jpg" border="5">

Kodu Çalıştır

<img src="resim_adresi.jpg" border="25">

Kodu Çalıştır

Align Parametresi

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> Etiketi ile Align Parametresi Kullanımı

<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.
  -->

 

Resmi Align Parametresi ile Sağa Hizalama

<img src="resim_adresi" align="right">

Kodu Çalıştır

Resmi Align Parametresi ile Sola Hizalama

<img src="resim_adresi" align="left">

Kodu Çalıştır

Resmi Align Parametresi ile Ortalama

<img src="resim_adresi" align="center">

<!-- center komutu HTML 5 tarafından desteklenmediği için çalışmayacaktır.  -->

Kodu Çalıştır

Gif (Hareketli Resim) Ekleme

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.

Hareketli Resim (Gif) Ekleme Kodu

<img src="hareketli_resim_adresi.gif" alt="Hareketli resim ekleme">

Kodu Çalıştır

 

Önceki Ders: Html Yorum Sonraki Ders: Html Bağlantılar