| Sayfaya resim yerleştirme
Sayfada yazılar üzerinde nasıl
kontrol sahibi olabileceğimizi gördükten sonra sayfaya nasıl resim
ekleyebileceğimizi görelim. Sayfaya resim yerleştirmek için
kullanacağımız tag <img> dir. Bu tagında kapanış tagı
kullanılmaz. Img tagı kullanılırken bir çok parametresi vardır.
Bu parametreler resmi en güzel şekilde sayfaya yerleştirmek için
konulur. Bu parametrelerin hepsini şu anda göremeyeceğiz. Önemli olan
bir kaçını öğreneceğiz.
- SRC
Kullanacağımız resmin yerini belirtir.
- ALT
Kullanacağımız resmin ismini yazar.
- BORDER
Kullanacağımız resmi çerçeveler.
- ALIGN
Kullanacağımız resmi sağa veya sola yerleştirir.
- HEIGHT
Kullanacağımız resmin yüksekliğini belirler.
- WIDTH
Kullanacağımız resmin genişliğini belirler.
İlk resmimizi sayfamıza yerleştirelim:
<html>
<head> <title>İlk resimli
sayfamız </title> </head>
<body>
<img src="resim.gif">
</body>
</html>
|
Yandaki satırları inceleyelim. Html
ile açılış yaptık bu bir html belgesi olduğunu belirtir. Sonra head
ile açıklama satırları geliyor. Biz sadece title ile başlığı
yazdık. İlk resimli sayfamız /title tagını kapattık. Sonra /head
tagını kapattık. Body ile sayfayı yazmaya başladık. Img
tagı bir resmi sayfaya yerleştireceğimizi anlattı src ise resmin
bulunduğu yeri browsere tanıtıyor. Burada sayfamızla aynı dizinde olan
bir resmi kullandığımız için sadece resmin adını ve uzantısını yazdık.
resim.gif bu bir gif formatında ki bir resim. Tabii ki bu resim
benim sayfamda bulunuyor. Siz başka bir resmi kullanabilirsiniz. O zaman
sizin resminizin adını yazmak zorunda kalırsınız. Eğer bu sayfadaki
resmi kullanmak isterseniz denemeyi çalıştırın resmin üzerine gelin sol
tıklayın ve sürükleyerek web sayfam dizinine bırakın. Sayfayı
resden.html olarak kayıt edebilirsiniz. Şimdi sayfayı çalıştırın.
<html>
<head><title>Alt parametresi</title> </head>
<body>
<img alt="bu bir resimdir"
src="resim.gif">
</body>
</html>
|
İlk resimli sayfamızı çalıştırdığımıza
göre şimdi alt parametresini tanıyalım. Sayfaları dolaşırken
resimler görürüz, eğer otomatik resim göstericiyi kapatırsak bu
resimleri göremeyiz. O zaman resmin yerinde bir simge oluşur. Peki bu
neyin simgesi. Bu durumda eğer resmin bir adı olsa bu addan bir fikir
edinebiliriz. Alt parametresi bu durumlar için kullanılır. Alt
parametresini <img alt="resmin ismi" src="resmin adı"> biçiminde
kullanırız. Bu sayfayı yazalım ve resden1.html olarak kayıt edelim.
Şimdi çalıştırın. Resmin üzerine Mouse'u getirdiğimizde biraz
bekletirsek bu bir resimdir yazısı belirdiğini görün. Her resmin
bir adı olmalıdır. Bu nedenle alt parametresini kullanmak
zorundayız.
<html>
<head> <title>Border
parametresi </title> </head>
<body>
<img border=1 alt="resim"
src="resim.gif">
</body>
</html>
|
Border parametresi ile resmi bir
çerçeve içerisine alır. Çerçeve kalınlığı parametre değeri büyüdükçe
artar. Sıfır ( 0 ) değeri kullanılırsa çerçeve yok anlamına
gelir. <img alt="resim" border=1 src="resim.gif"> şeklinde
kullanılır. Hemen bu kodları yazalım ve resden2.html olarak kayıt edelim
ve çalıştıralım. Resmin bir çerçeve içine alındığını görelim. Border
değerini değiştirerek sonucunu görün. Çeşitli border değerlerine dikkat
edin.
<html>
<head><title>Align
parametresi1</title> </head>
<body>
<img align=left border=0 alt="resim"
src="resim.gif">resim
sola yanaşık<p>
</body>
</html>
|
Align parametresi resmi sayfanın değişik
bölümlerine yerleştirmeye yarar. Bu parametre ile left
kullanılırsa resim sola yanaşık gösterilir. Sonra gelen yazılar ise
hemen resmin sağına yazılır. right parametresi kullanılırsa resim
sağa yanaşık gösterilir ve peşinden gelen yazılar resmin soluna yazılır.
Şimdi bu parametreleri uygulamalı olarak görelim.
<img align=left border=0
alt="resim" src="resim.gif"> resim sola yanaşık.
<img align=right border=0 alt="resim" src="resim.gif"> resim
sağa yanaşık.
|
<html>
<head> <title>Align
parametresi3 </title> </head>
<body>
<img align=right border=0 alt="resim"
src="resim.gif">resim
sağa yanaşık<p>
</body>
</html>
|
Bu parametreler kullanılarak resmin
etrafında kayan yazılar oluşturulabilir. Bu güzel bir efekttir. Şimdi
sağa ve sola yanaşık resimleri görelim.
Bu konuyu da anladığımıza göre artık
diğer parametrelere geçebiliriz. Daha sonra ise resimlerin kullanımıyla
ilgili önemli noktalara değineceğiz. Şimdi resmin genişlini ve
yüksekliğini belirleyelim. Aslında resmin genişliği ve genişliğini
belirlemesekte olur. Fakat eğer sayfamızı izleyen bir kişi resimleri
otomatik izlemeyi kapatmış veya salt metinsel bir browser kullanıyorsa
sayfamızın görünüşü bozulabilecektir. Resmin boyutlarını belirlersek
inceleyici ( browser ) belirttiğimiz büyüklük kadar bir alanı boş
bırakacaktır.
<html>
<head> <title>Resimde
boyut belirleme </title> </head>
<body>
<img alt="bu
bir resimdir"
height="100" width="100" src="resim.gif">
</body>
</html>
|
Resmin yüksekliğini belirleyen parametre
height="piksel olarak değeri" dir. Resmin genişliğini belirleyen
parametre width="piksel olarak değeri" Bu değerleri img
tagı içerisinde kullandığımızda otomatik resim gösterici çalışmasa da
resmin ebatları kadar alan boş bırakılacaktır. Ayrıca burada bir resim
olduğunu ifade eden bir sembol ve bu sembolün içerisinde eğer
belirtiksek alt parametresi ile belirlediğimiz açıklama
gözükecektir. Bu parametrelerin diğer bir kullanım alanı da resmin
boyutlarını değiştirmektir. Resim bu parametreler oranında
yerleştirileceği için parametreleri büyülttükçe resim otomatik olarak
büyük gösterilecektir. Parametreler küçüldükçe resim otomatik olarak
küçültülecektir. Şimdi yandaki kodları yazın ve kayıt edin. Sonra
çalıştırın.
Aynı resim üzerinde height ve
width değerlerini değiştirerek birkaç deneme yapın resmin nasıl
büyüyüp küçüldüğünü görün.
Sayfaya resim ekleme ile ilgili
anlatacağım şimdilik bu kadar. Fakat anlatılacak çok şey var ve ilerde
anlatılacak. Web sayfasının en önemli konusu olan linklere geçelim.
|