WEB SİTESİNDE RESİM YERLEŞTİRME ANLATIMI

WEB TASARIM PROGRAMI HAKKINDA BİLGİ PAYLAŞIMI PLATFORMU
Forum kuralları
ÖNEMLİ NOT: Forum içerisinde türk dijital platformlarına iat şifreleme bilgilerinin konu olarak açılması, linklerinin verilmesi
kesinlikle yasak olmakla birlikte ÜYELİK İPTALİ NEDENİDİR !!!

Saygılarımızla, Anlayışınız için teşekkürler.

WEB SİTESİNDE RESİM YERLEŞTİRME ANLATIMI

İleti AKIN » 15 Eyl 2010 14:38

- SAYFAYA RESİM YERLEŞTİRME -
Sıra sayfaya resim yerleştirmeye geldi, bunu sağlayan tag <img> `dir. Bu tagin dosyanın isim ve adresini yazmamıza yarayan attribute`u ise src=" " dir. Aynı link verirken yaptığımız gibi herhangi bir resim dosyasını tırnak içine yazmamız gerekiyor. Mesela kabin1.jpg adlı bir resim dosyamız olsun, ve aynı klasörde bulunan index.html sayfasında bu resme görmemize yarayan kodu yazalım.

<img src="kabin1.jpg">



Bu kodu yazdığımızda eğer aynı klasörde kabin1.jpg adlı resim dosyası varsa bunun sayfada örnekteki gibi gözükmesi lazım, tabi siz istediğiniz resmi kullanabilirsiniz. Resim dosyamız image adlı bir klasörünün içinde olsaydı o zaman yazacağımız kod:

<img src="image/kabin1.jpg">

şeklinde olurdu. Bir resmi link olarak kullanmak istiyorsanız, resim tıklanınca herhangi bir sayfaya veya resme gitmesini istiyorsanız yapmanız gereken aşağıdaki gibi olmalıdır. Bunun en çok kullanılan örneği resmin küçük halinin üzerine tıklanınca büyük resmin çıkmasıdır. Diyelim ki küçük bir resmimiz var, bunun ismi kabin1.jpg olsun, büyük resmin ismi ise kabin2.jpg olsun. Bu durumda yazacağımız kod :

<a href="kabin2.jpg"> <img src="kabin1.jpg"> </a>



Örnekte gördüğünüz gibi resmin büyük haline link verdik ama linkten sonra yazı yazacağımız yerede resmin küçük halini koyduk. Eğer linkten sonra bir resim yerine Lütfen Tıklayın gibi bir yazı yazsaydık küçük resim yerine Lütfen Tıklayın yazısını tıklayınca büyük resim yüklenirdi. <a> ve <img> taglerinin başka attribute da vardır. Link vermek için kullandığımız <a> taginin title=" " attribute`u linkin üzerine gelince yazı çıkmasını sağlar. Ama sadece Explorer`da çalışıyor, örneğin üzerine gelip deneyebilirsiniz.

<a href="deneme2.html" title="Bu link deneme sayfasına gider"> Lütfen Tıklayın </a>

Örnekteki linkin üzerine gidip biraz beklediğimizde Bu link deneme sayfasına gider yazısı çıkar. Aynı özellik resim tag`inde alt attribute`u ile sağlanır. Ayrıca <img> taginde çok kullanılan attribute`lardan biride border=" " ve align=" " dir. border=" " resmin etrafına bir çizgi çeker ve vereceğimiz değer bu çizginin kalınlığını belirler. Eğer 0 (sıfır) değerini verirsek çizgi olmaz. align=" " attribute`u resmin sayfadaki konumunu belirler. Alacağı komutlar resmi sağa çekmek için right, sol için left ve ortalamak için center `dır. Yine bir örnek verecek olursak,

<img src="kabin1.jpg" alt="Arcade Cihazı" border="0" align="right">

Örnekte kabin1.jpg resminin etrafında çizgi olmayacak. Resim sağa yanaşık duracak, yüklenirken ve resmin üzerine gelip beklediğimizde Arcade Cihazı yazısı çıkacaktır. Devamı bir sonraki sayfada...
AKIN
 
İleti: 293
Kayıt: 03 Tem 2010 10:35

WEB TASARIM

Kimler çevrimiçi

Bu forumu görüntüleyenler: Kayıtlı kullanıcı yok ve 1 misafir

cron