HTML Sayfa resim ekleme - img tagın özellikleri - PcTekno.NET | PTN

Konumunuz: Anasayfa

Html

HTML Sayfa resim ekleme - img tagın özellikleri

Salı, 01 Mayıs 2007

Sample Image Bu eklemeleri yaparken <IMG> tagının bazı özellikleri bize resimler üzerinde daha fazla hakimiyet sağlar.

BORDER
Bu özellik resime bir çerçeve çizilmesini sağlar. Çerçeve kalınlığı bir sayıdır, bu değer BORDER="0" olduğunda çerçeve çizilmez. Bu değer arttıkça çerçeve kalınlığı artar.
WIDTH
Bu özellik resmin genişliğini belirtir. Eğer resim genişliği belirtilmezse resim tam olarak yüklenene kadar sayfa düzgün gösterilemez. Ayrıca bu özelliği gerçek değerinden büyük veya küçük yaparak resmin gösterilirken genişliğinin ne kadar olacağını belirleyebilirsiniz. Değer olarak piksel olarak sayı değeri girilir, WIDTH="200" gibi.
HEIGHT
Bu özellik resmin yüksekliğini belirtir. Kullanımı WIDTH gibidir, HEIGHT="145" gibi.
ALT
Resmin ne olduğunu anlatan bir yazı içerir. Rersim görüntüleyemeyen browserler bu yazıyı göstererek resim hakkında bilgi verecektir. Ayrıca bu yazıyı resim gösterimi kapalı broserserlerde ve resmin yüklenmesi herhangi bir şekilde durmuş olduğu durumlarda açıklayıcı bilgi olarak gösterilecektir ve yine resim mouse üzerine geldiğinde bu yazı browser tarafından gösterilecektir. Kulllanımı ALT="Resmi anlatan bir yazı" şeklindedir.
ALIGN
Bu özellik resmin nasıl hizalanacağını gösterir. LEFT değeri kullanıldığında resim sola yanaşık, RIGHT değeri kullanıldığında resim sağ kenara yanaşık gösterilecektir. Eğer bu özellik kullanılırsa resimden sonra gelen yazılar ve elemanlar resimin boş kalan kenarına yerleştirilerek gösterilir. Kullanımı ALIGN="Right" şeklindedir.

Şimdi bu özellikleri kullanacağımız bir kaç örnek verelim.

 
<!-- aşağıdaki ifade ile 1 pixel genişliğinde çerçevesi olan
        254px genişliğinde ve 229px yüksekliğinde bir resim
        ekrana getirilecektir. -->
<IMG src="yaylalar.jpg" BORDER="1" WIDTH="254" HEIGHT="229"
        ALT="Gümüşhane yayla şenliklerinden bir görüntü">

Sonuç :

Gümüşhane yayla şenliklerinden bir görüntü

Çok kullanacağımız ALIGN özelliği ile resim çevresinde akan yazılar oluşturacağız. Aşağıdaki örneği inceleyin :

 
<HTML>
<HEAD>
<TITLE> IMG tagı </TITLE>
</HEAD>
<BODY>
<H3> Sayfa içerisinde resim kullanma</H3>
<IMG src="manzara.jpg" BORDER="1" ALT="Zigana dağından bir görüntü"
        WIDTH="187" HEIGHT="218"
        ALIGN="Left">
Sayfa içerisinde resim kullanırken yazının resimler etrafında
akmasını isteyebiliriz. Bunu sağlamak için ALIGN özelliği ile
birlikte IMG tagını kullamamız gereklidir. Bu özellik resmin 
belirtilen kenara yaslanmasını sağlar ve ayrıca yazının resmin
etrafından akmasına neden olur. Bu gerçekten
güzel bir görüntü oluşmasına neden olacaktır.
<IMG src="yaylalar.jpg" BORDER="3" WIDTH="254" HEIGHT="229"
        ALT="Gümüşhane yayla şenliklerinden bir görüntü"
        ALIGN="Right">
<P>Sayfa içerisinde resim kullanırken yazının resimler 
etrafında akmasını isteyebiliriz. Bunu sağlamak için ALIGN 
özelliği ile birlikte IMG tagını kullamamız gereklidir. 
Bu özellik resmin belirtilen kenara yaslanmasını
sağlar ve ayrıca yazının resmin etrafından akmasına neden olur.
Bu gerçekten güzel bir görüntü oluşmasına neden olacaktır.
</BODY>
</HTML>