HTML Resim ve Özellikleri

Bir web sayfasında genellikle jpeg, gif, png formatlı resim dosyaları kullanılmaktadır. Bunun nedeni bu formattaki dosyaların boyutlarının daha küçük olması ve sayfalar görüntülenirken hızlı açılabilmesidir.

Saydamlık (transparan) resimler kullanılacaksa gif yada png seçilmelidir. Jpg resimlerde bu özellik yoktur.

<img> : Sayfa içerisine bir resim yerleştirmek istenildiğinde kullanılır. Bu tag belli parametrelerle kullanılır.

<img src=”dosya.adi” border=”değer” align=”değer” alt=”değer” weight=”değer” height=”değer”>

Artık CSS in gelişmesiyle <img> tag’ı

<imc src=”dosya_adi” alt=”ifade” style=”css-styles”> halinde daha yaygın kullanılmaktadır.

src : Resim dosyasının konumunu belirtir. Eğer resim dosyaları html dosyaları ile aynı klasörde ise sadece resim dosyasının adını yazmak yeterlidir. Fakat başka bir klasör veya URL altında ise o zaman resmin yolunu belirtmek gerekir.

alt: Web sitesi görüntülenirken, bir hatayla resim yüklenemez ise, resim alanında çıkacak açıklama buraya yazılabilir.

Örnek:

<img src="https://ceptebilisim.com/wp-content/uploads/2022/02/kerem.jpg">

Örnek: Resim bir şekilde yüklenemez ise

<img src="https://ceptebilisim.com/wp-content/uploads/2022/02/kayseri.jpg" alt="Erciyes Dağı">

Resim boyutlandırma

Resmin boyutları için style özelliğinde width ve height paremetreleri kullanılır. Bu resim 400×400 piksel boyutundaydı. Şimdi bunu 300px boyutlarında görüntüleyelim.

<img src="https://ceptebilisim.com/wp-content/uploads/2022/02/kerem.jpg" style="width:150px;height:150px;">

Alternatif olarak width ve height özellikleri de kullanılabilir.

<img src="https://ceptebilisim.com/wp-content/uploads/2022/02/kerem.jpg" alt="" width="158" height="158" />

Artık CSS yaygın olarak kullanıldığından style özelliği kullanmanızı tavsiye ederiz.