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.

  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:

 

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

Ders2 / Ders4