Tweet

Ana Sayfa   Forum   Html - Dhtml - JS
Yeni Başlık Cevap Ekle
white_bullet Sayfaya Resim Yerleştirmek (26/06/2008 15:31)
profil M.Akif
 offline OFFLINE
 Coder


Sa Arkadaşlar şimdi sizlere sayfaya resim yerleştrmeyi gösterceğim.Eksiklerim olabilir...

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.
Önemli olan bir kaçı ;

1. SRC
Kullanacağımız resmin yerini belirtir.
2. ALT
Kullanacağımız resmin ismini yazar.
3. BORDER
Kullanacağımız resmi çerçeveler.
4. ALIGN
Kullanacağımız resmi sağa veya sola yerleştirir.
5. HEIGHT
Kullanacağımız resmin yüksekliğini belirler.
6. WIDTH
Kullanacağımız resmin genişliğini belirler.

İlk resmimizi sayfamıza yerleştirelim:



CODE:

<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.
İsterseniz farklı uzantılardaki resimeride belirterek gösterilmesini sağyayabilrsiniz.
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.



CODE:
<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 CODE:
<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.


CODE:
<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. CODE:
<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.

CODE:
<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.
CODE:
<img align=left border=0 alt="resim" src="resim.gif">
resim sola yanaşık.
CODE:
<img align=right border=0 alt="resim" src="resim.gif">
resim sağa yanaşık.



CODE:
<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ğim.
Ş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.


CODE:
<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.

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.Herkese iyi Günler//

[IMG SRC="http://sdu.ictp.it/os/img/ubuntu_logo.jpg" ALIGN="CENTER"]M.Akif[/IMG]
Destekleneler :
Yazıyok Blog
M-Akif.net




What is a problem ?

Üye Profili

white_bullet Re:Sayfaya Resim Yerleştirmek (27/06/2008 00:30)
profil Dia
 offline OFFLINE
 Sleepless Coder

Güzel bir yazı olmuş ancak şunuda hatırlatmadan edemeyeceğim. <img> tagnıda mutlaka sonlandırmalıyız. şu şekilde <img src="" /> bunu yapabiliriz. Bunun dışında src,alt ve title parametreleri dışındaki paramerteleri css ile düzenlemeliyiz. Yeni html standartlarına uyum için bunlar gerekli. En son html standartlarını öğrenmek için
www.w3.org/TR/xhtml11/ ve http://www.w3.org/TR/xhtml2/ adreslerini ziyaret edebilirsiniz.

<!--Bana balık vermeyin balık tutmayı öğretin.-->

profil
 
1 /
 
Ana Sayfa   Forum   Html - Dhtml - JS
Yeni Başlık Cevap Ekle
 

MENÜ » FORUM
Menü » Takip et
RSS Facebook Twitter Friendfeed
Sık Kullanılanlar Google Yahoo Live
Menü » Paylaş
E-Posta ile gönder Twitter Facebook Friendfeed
Buzz Stumbleupon Delicious Digg