Sayfa Üzerinde Resimlerle Çalışmak
Sayfa üzerinde resimlerle çalışmak yani iki resmi yan yana almak, resmin yanına yazı almak, link vermek ve küçük resme link atarak üzerine tıklayınca büyük görünmesini sağlamak biraz kafa karıştıran işlemlerdir. Aslında bir o kadar da basittir. Tek gerekli olan istediğimiz işlem için ayrı bir kodlama aramak değil bildiğimiz kodlamaları kombine kullanarak istediğimiz tasarıma ulaşmaktır.
Resim'lerle çalışırken en çok kullandığımız yardımcı kod (Tag) <TABLE> kod'udur.
Konu sıramız; Sayfaya Resim Almak, Resmi Ortalamak, İki Resmi Yan Yana Almak, Resmin Yanına Yazı Eklemek, Resmin Altına Yazı Eklemek, Resmi Linklendirmek, Küçük Resmi Büyütmek'tir.
Şimdi sırasıyla Resim Fontlarıyla çalışmaya başlayalım.
1) Sayfaya Resim Almak :
Sayfaya resim alma bilindiği gibi resmi sayfaya açma kodları ile yapılır.
<IMG SRC="homepage.JPG">
Yukarıdaki kodları sayfaya yazarsanız, resim sayfanın en üst ve sol köşesine açılır. Resmi Ortalamak için sayfaya resim alma kodlarından önce <CENTER> kodunu girin. Resmi aşağı kaydırmak için ise <CENTER> kodundan hemen sonra "bir satır aşağı" görevi olan <BR> kodunu girin. Bu kodu ne kadar girerseniz resim o kadar aşağı kayacaktır.
Not: Resmi sayfaya alırken dikkat edeceğiniz nokta; eğer resim kodlamasını internet üzerinden yapıyorsanız, img src=" -buraya resmin internetteki bulunduğu adresi girin-" örneğin mynetten " crazy " adlı bir web sitesi açtınız. sitenizin adresi " http://crazy.sitemynet.com " dur. Siz bu adreste " resimlerim " adlı bir klasör açtınız ve homepage.jpg adlı bir resim yüklediniz ( Resmi nasıl yükleyeceğiniz server tarafından gösterilir). Yüklediğiniz resmin adresi " http://crazy.sitemynet.com/resimlerim/homepage.jpg " dir. Eğer internet üzerinde değilde bilgisayar üzerinde çalışıyorsanız durum aslında aynı. Örneğin belgelerim klasörünün içine web klasörü oluşturdunuz ve bu klasörün içine homepage.jpg adlı resmi kayd ettiniz. Şimdi burada iki durum söz konusu. Eğer not deferini açıp kodlama yaptığınız web sayfası " web " klasörünün içindeyse adres; " img src="homepage.jpg " dir. Eğer kodlama yaptığınız sayfa başka bir klasör içindeyse adres; " c:\Belgelerim\web\homepage.jpg " dir. Bu dikkat edilmesi gereken önemli bir noktadır.
2) Resmi Ortalamak :
Resmi ortalamak için yukarıda da belirttiğim gibi sayfaya resim alma kodlarından önce <CENTER> kodunu girin.
3) İki Resmi Yanyana Almak :
İki resmi yan yana almak için sayfaya resim alma kodlarını alt alta iki kere girin. Eğer resimleri alt alta almak istiyorsanız birinci kodlamadan sonra <BR> kodlamasını kullanın.
4) Resmin Yanına Yazı Eklemek :
Resmin yanına yazı eklemek için <TABLE> kodunu kullanacağımızı söylemiştim. Şimdi bu kodu nasıl kullanacağımızı görelim. < table > kodunun kullanımı " tasarımlar " linkinin tablo detayları bölümünde var ama kısaca belirtecek olursak < table > kodundan sonra < td > kodunu iki kere girersek aşağıdaki şekli elde etmiş oluruz.
Biz burada dış rengi kırmızı içi boş iki tablo oluşturduk. Burada birinci tablonun içine resim alır ve ikici tablonun içine de yazı yazarsak resmimizin yanına yazı eklemiş oluruz. Yukarıdaki tablo'yu oluşturan kodlar;
<table border="2" bordercolor="red">
<td>bu alana resmi sayfaya alma kodlarını girin </td><td> bu alana resmin yanına yazacağınız yazıyı girin </td></table>
Yukarıda ki kodlama da ' BORDER="2" ' çerçeve kalınlığını, ' BORDERCOLOR ' ise çerçeve rengini belirler. Siz bu kodları girmez sadece <TABLE> ile kodlamaya başlarsanız çerçeve kaybolur ama resim ve yanında ki yazı sade bir biçimde ekranda durur.
5) Resmin Altına yazı Eklemek :
Resmin altına yazı eklemek yukarıda anlatılanlar gibir. burada tek tablo oluşturulur. Tablonun içine resim alınır ve <br> kodu ile altına yazı eklenebilir. Burada <br> kodunu ne kadar yazarsanız yazı o kadar aşağı kayacaktır.
<TABLE>
<TD>
<img src="http://crazy.sitemynet.com/resimlerim/homepage.jpg">
<BR><BR>
buraya yazı eklenecek </TD></TABLE>
Yukarıda kodlama ile resmin hemen altına istediğiniz yazıyı yazabilirsiniz.
6) Resmi Linklendirmek :
Bir resme link verebilmek için; link kodlarından sonra sayfaya resim alma kodlarını girin.
Örnek kodlama;
<a href="resim'e tıklanınca açılması istenen sayfanın adresi"> <img src="http://crazy.sitemynet.com/resimlerim/homepage.jpg></a>
7) Küçük Resmi Büyütmek :
Bu işlem, yani sayfadaki küçük bir resim'e tıklayınca büyük bir resmin açılması, küçük resmin büyük resim'e linklendirilmesidir. Küçük bir resmi ekrana alır, linklendirir ve link adresi olarak da küçük resmin orjinal hali veya büyütülmüş hali verilir. Burada resmin boyutu
<IMG SRC="http://crazy.sitemynet.com/resimlerim/homepage.jpg" WIDTH="100" HEIGHT="100"> olarak ayarlanabilir.
Resim detaylarının sonuna geldik. Umarım sayfaya resim alam konusunda size yardımcı olabildim. Ben konuyu hazırlarken hep sormak istediğim ve merak ettiğim konuları, yine duymak istediğim cevaplarla anlatmaya çalıştım. Resim detayları konusu şimdilik bu kadar. Artık ana sayfa'ya dönebilirsiniz :).