HTML [ 04 – Resimler ]

Resimler

Sayfamıza resim yerleştirmek için kullanılan etikettir. Etiketin kullanımına geçmeden önce Internet üzerinde kullanılan resim dosyası biçemleri üzerinde durmak istiyorum. Internet üzerinde en çok kullanılan resim dosyası biçemleri GIF, JPG ve PNG’dir. Bu biçemlerin seçilmesindeki amaç sayfanın yüklenmesini kolaylaştırmaktır. Windows ortamında en çok kullanılan resim formatı olan BMP’lerin web üzerinde kullanılmamasının en büyük sebebi, iyi resim kalitelerine karşın bunun bir bedeli olarak boyutlarının çok büyük olmasıdır. Kullanılan üç biçemin kendine has bazı özellikleri vardır.
GIF biçemi 256 renk kullanarak ve JPG biçemi de resmin kalitesinden biraz kısarak boyut sorununu halleder.

Bunun yanı sıra sayfamızda, mecbur kalmadıkça, büyük boyutlarda (hem ebat hem de kb olarak) resimler kullanmaktan kaçınmak sayfamızın yüklenmesini kolaylaştıracaktır. Yine bu etikette de sonlandırıcı yoktur. Yani bir yorum aralığı belirtmez.

Bu etiket altında kullanacağımız resmin bazı özelliklerini belirtmek için tanımlayıcı bazı kodlar kullanırız. Bu kodları aşağıdaki tabloda belirtelim.

Resim kullanımı için yardımcı kodlar

Girilecek Kod Görevi
src = “resim_dosyası” Kullanacağımız resim dosyasının tam yolunu yazarak, hangi resmin kullanılacağını belirtiriz.
width = “genişlik” Resmin genişliği burada tanımlanır.
height = “yükseklik” Resmin yüksekliği burada tanımlanır.
vspace = “düşey_aralık” Resmimizi eğer metin içinde kullanıyorsak metne olan dikey uzaklığı.
hspace = “yatay_aralık” Resmimizi eğer metin içinde kullanıyorsak metne olan yatay uzaklığı.
alt = “metin” Resmin üzerinde fare ile bir süre beklendiğinde çıkan açıklayıcı bilgi burada tanımlanır.
border = “değer” Resmin dışında çerçeve çizgisi olacaksa “1”, olmayacaksa “0” değeri kullanılır..

<img src=”../resimler/banner.jpg _cke_saved_src=”../resimler/banner.jpg width=”250″ height=”85″ alt=”Bilgisayar Topluluğu”>

Yukarıdaki satır bulunduğumuz dizinin bir üstünde bulunan “resimler” dizinindeki “banner.jpg” dosyasını belirtilen ölçüler doğrultusunda ekrana basar. (Resmin boyutlarını belirtmek zorunlu değildir!).

“Alt” kodu ile tanımlı kısım da resmin üzerinde belli bir süre beklendiğinde “Bilgisayar Topluluğu” yazısının belirmesini sağlar.

Ornek;

<html>
<body>

<h3>Resimler</h3>

<img src=”resimler/resim.jpg” width=”300″ height=”240″>

</body>
</html>

Referans; http://www.htmlogren.com/?id=7

 

Leave a Reply

Your email address will not be published. Required fields are marked *