html resim
değişen resim
<script language="JavaScript1.1">
//Picture Cube slideshow - By Tony Foster III
//Modifications by JK
var specifyimage=new Array() //Your images / resimler
specifyimage[0]="Buralara resim ekleyin"
specifyimage[1]="http://www.kralhacker.com/banyo101.jpg"
specifyimage[2]="http://www.kayikcituning.ws.tc/3.JPG"
specifyimage[3]="http://www.kayikcituning.ws.tc/4.JPG"
specifyimage[4]="http://www.kayikcituning.ws.tc/5.JPG"
specifyimage[5]="http://www.kayikcituning.ws.tc/6.JPG"
specifyimage[6]="http://www.kayikcituning.ws.tc/7.JPG"
specifyimage[7]="http://www.kayikcituning.ws.tc/8.JPG"
specifyimage[8]="http://www.kayikcituning.ws.tc/9.JPG"
var delay=3000 //3 seconds / 3 saniye bekleme
//Counter for array / syralamadaki ikinci resim
var count =0;
var cubeimage=new Array()
for (i=0;i<specifyimage.length;i++){
cubeimage[i]=new Image()
cubeimage[i].src=specifyimage[i]
}
function movecube(){
if (window.createPopup)
cube.filters[0].apply()
document.images.cube.src=cubeimage[count].src;
if (window.createPopup)
cube.filters[0].play()
count++;
if (count==cubeimage.length)
count=0;
setTimeout("movecube()",delay)
}
window.onload=new Function("setTimeout('movecube()',delay)")
</script>
<img src="http://www.kayikcituning.ws.tc/1.JPG" name="cube" border=0 style="filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')" width="99" height="103" align="left">
by natrobin
hacker.faruk@hotmail.com
RESİM KULLANMAK
Gelelim web dünyasının en önemli öğelerinden birine, resimlere. HTML dilinde her şey çok kolay olduğu gibi sayfalara resim yerleştirmek de çok kolaydır. Resimler sayfa içerisinde metne göre sağa, sola, aşağı ve yukarı doğru yerleştirilebilirler, ayrıca boyutları sadece belirli değerler değiştirilerek ayarlanabilir.
Dokümanın herhangi bir yerine bir resim yerleştirmek için en sade haliyle <IMG SRC="RESIM.GIF"> tag'ını kullanabilirsiniz. Bu tag'ı kullandığınızda resim hiç bir yere yaslanmayacak, boyutu ayarlanmayacak, metin olarak bir alternatifi olmayacaktır.
Yukarda da belirttiğimiz gibi resimleri kullanırken bir çok seçeneğiniz var, bu seçenekler sayfanın görünümünde kuşkusuz büyük rol oynayacaktır. Seçeneklerden birincisi Internet erişiminin yavaş olduğunu bildiğimiz ülkemizde sayfalarınızı görüntüleyecek olan kişilere biraz yardımcı olmak en azından resim yüklenene kadar kullanıcının meraklarını gidermek için kullanılabilir, bahsettiğimiz takı "ALT" tır. <IMG SRC="RESIM.GIF" ALT="deneme resmi"> satırını yazdığınızda web tarayıcınız RESIM.GIF adlı resmi yüklenmeden önce resmin yerine "deneme resmi" metnini girecektir, böylece kullanıcı resmi görmeden ne olduğunu bilecek ve anında STOP tuşuna basabilecektir. (!)
Seçeneklerden biri de resmin ekranda görünecek boyutlarını ayarlamak için kullanılır bu takı HEIGHT ve WIDTH'tir. Bu takılar bir arada kullanılmalıdır, tek başına kullanıldığında web tarayıcısı takıyı göz ardı edecektir. <IMG SRC="RESIM.GIF" WIDTH=100 HEIGHT=50> satırını yazdığınızda RESIM.GIF isimli resmin boyutu ne olursa olsun 50 piksel yüksekliğe ve 100 piksel genişliğine getirilerek ekranda gösterilecektir. Resim gösterirken işinize yarayacak diğer bir seçenek ise BORDER'dır. Bu takı ileride değineceğimiz "Internet Kısayolları" (Hyper Link) ile ilgili olsa da şimdi birkaç püf noktası vermek gerekir. Başka bir URL'ye kısayol yaratıldığında kısayolun ismi bir alt çizgi ile belirlenir, bu işlem resimlerde resmin mavi bir çerçeve içerisine alınmasıyla belirtilir, Eğer bir resmi başka bir sayfaya kısayol olarak kullanacaksanız ve çerçevenin görünmesini istemiyorsanız BORDER=0 ifadesini kullanmalısınız.
Resimleri kullanırken dikkat etmeniz gerekenler:
* Daha önce de belirttiğimiz gibi Internet'te uzun süredir yer alan kullanıcılar, sitelerdeki büyük resimleri çok işlerine yaramadığı sürece görmek istemeyeceklerdir. Bu yüzden, her zaman resimlerin boyutunu küçük, miktarını az tutmalısınız.
* Eğer büyük resimler kullanacaksanız, (büyük resim derken ekranı kaplayacak kadar büyük değil), bunları JPEG formatına çevirmenizi ve kalitesini düşürmenizi tavsiye ederiz. JPEG resimler her zaman GIF'lerden daha az yer kaplarlar, bu yüzden daha hızlı yüklenirler.
* Resimlere her zaman ALT tag'ını kullanarak alternatif metinler verin, Internet'i kullananların her zaman resim görüntüleyebilecek, browser'ı olan makineler olduğunu varsaymayın. Eğer resimlere alternatif metinler verirseniz terminal ekranı kullanan kullanıcılarda bilgiye erişebilirler.
* GIF'leri kullanırken "Interlaced" haline getirin, bu tip GIF'ler kademe kademe yüklenir ve yavaş yavaş netleşerek resmi daha hızlı yükleniyormuş gibi gösterir.
HTML ve YAZITİPLERİ
Dokümandaki yazıtipini değiştirmek için <FONT> tagı kullanılır, genel kullanımı şöyledir:
<FONT SIZE="x" FACE="[isim] COLOR="#XXXXXX">
* SIZE değişkeni metnin büyüklüğünü ayarlar, bu değişkene -1, +2 gibi değerler verilerek metnin puntosunun bir eksiltilmesini veya iki arttırılmasını sağlayabilir, direkt olarak bir rakam vererek puntoyu tayin edebilirsiniz. HTML sayfalarında SIZE değişkenine verebileceğiniz en büyük değer 5'tir. 5'ten sonra vereceğiniz her değer siz 5 değeri vermişsiniz gibi muamele görecektir. Yazıtipi çok büyük olmamalıdır, büyük yazıtipleri hem kullanıcıların sayfayı okumasını zorlaştırır hem de sayfanın güzelliğini bozar.
* FACE takısını tüm web tarayıcıları desteklemese de bu takı kullanılarak sayfada resim kullanmadan oldukça güzel görüntüler elde edilebilir. Örneğin FACE="Arial Tur" takısı kullanıldığında yazı tipi Türkçe Arial olacaktır. FACE değerine Türkçe desteği olmayan "Comic Sans Ms" gibi yazıtipleri verilmemelidir, verilirse bazı Türkçe karakterler bozuk olarak görülecektir.
* Son olarak COLOR takısı yazıtipinin rengini ayarlamakta kullanılmaktadır. Web tarayıcılarının desteklediği temel renklerden oluşan tablo geçen ay bu bölümde verilmiştir. Tablodan dilediğiniz bir rengi seçerek bu değişkenin karşısına yazdığınızda yazıtipi rengi değişecektir.
* <FONT> ifadesi her zaman bir </FONT> ile sonlanmalıdır. Bu tag unutulursa web tarayıcınız sayfaları yanlış görüntüleyebilir. (Bazen de hiç görüntülemez)
İNTERNET KISAYOLLARI
LINK veya shortcut dediğimiz Internet kısayolları, Internet'te belki de en çok kullanılan özelliklerden biridir. Asli amacı Internet üzerinde herhangi bir sunucuya bağlı bir dosyayla bağlantı kurmak olan kısayollar ayrıca elektronik posta yollamak, Telnet bağlantısı kurmak gibi değişik amaçlar için de kullanılabilir.
<a href=" [Adres] [ort]" >[Görüntü]</a>
Internet kısayollarının kullanımı yukarıdaki gibidir. Adres kısmı bağlanılacak HTML sayfasını, görüntü kısmı ise kısayolun, sayfadaki görüntüsünü belirler. Örneğin yazacağınız
<a href=" http://www.pcmagazine.com.tr" >PC Magazine Online</a>
gibi bir satır ekranda PC Magazine Online olarak görülecek ve sizi doğruca pc magazine Türkiye'nin Web sitesine bağlayacaktır.
Adres kısmı oldukça basit olmasına rağmen, bazı küçük püf noktaları da yok değil. Örneğin, adres kısmını kullanıcının size mail atması için kullanabilirsiniz. Bunu gerçekleştirmek için kişisel e-posta adresinizin önüne mailto: takısını getirmeniz yeterlidir. Örneğin hazırladığınız sayfada kullanıcıların size mail atabilmeleri için
Bana <a href=" mailto:cenk.tarhan@pcmagazine.com.tr" >mail</a> atabilirsiniz.
gibi bir satır kullanabilirsiniz. Kısayollar ayrıca Telnet, FTP, Gopher servislerini de çağırabilirler. Bunları çağırmak için, sizin de tahmin edebileceğiniz gibi ftp://, gopher:// takılarını site isminin önüne getirmek yeterlidir. Genel kullanımda verdiğimiz ort takısının ne işe yaradığını merak edenler için hemen bir açıklama getirelim: Bu takı tüm web servisleri için 80 olup genelde kullanılmalarına gerek yoktur. Hızla gelişen Web teknolojisi çoook eskiden kullanılan ort takısının kullanımını gereksiz bir hale getirmiştir.
Internet kısayolları, Web tarayıcınızın ayarıyla oynamadıkça ve HTML sayfasında aksini belirtmedikçe ekranda mavi altı çizili yazılar olarak görülürler. Siz ilgili linke tıkladığınızda ve işaret ettiği sayfayı izlediğinizde o sayfadaki link maviden mora dönüşür.
Daha önce de belirttiğimiz gibi kısayol renkleri HTML sayfasındaki kodlarla değiştirilebilirler, üstelik siz bunu yaptığınızda kullanıcı web tarayıcısının ayarıyla oynayarak kısayolun rengini kendisine göre tayin edemez. İşte bunun nasıl yapılacağı:
Sayfanızın başında <BODY...> ' tag'ıyla birlikte link=değer vlink=değer takılarını kullanarak ziyaret edilmiş ve edilmemiş kısayol renklerini belirleyebilirsiniz. Her zamanki gibi bunu yapmak için Hex renk kodlarını ve hazır renk adlarını kullanabilirsiniz. Örneğin sayfadaki kısayolların altı sarı çizgili görülmesini, aynı kısayolların ziyaret edilince kırmızıya dönüşmesini istiyorsunuz bunu yapmak için
<BODY BGCOLOR=WHITE LINK=YELLOW VLINK=RED>
satırını kullanabilirsiniz. Mutlaka siz de rastlamışsınızdır: Bazen resimler de bir Internet kısayolu olarak kullanılabiliyor. ' Bunu nasıl yapabilirim?' diyorsanız, hemen çok basit olduğunu belirtelim. Genel kullanım bölümünde verdiğimiz [görüntü] bölümüne önceki örneklerimizde hep yazı yazdık, bir de resim koymayı deneyelim:
<a href=" http://www.pcmagazine.com.tr" ><img src=" PCM.GIF" alt=" PC Magazine Online" ></a>
satırını yazdığınızda PCM.GIF isimli resim PC Magazine Online'a bağlanmak için bir kısayol olarak kullanılacaktır. Burada dikkat etmeniz gereken bir husus var, o da resimlerin link olarak kullanıldığında mavi (ya da link için atadığınız renk neyse) bir çerçeve içine alındığıdır.
Bunu önlemek için resmi yükleyen ' tag'ın sonuna bir border=0 ekini girebilirsiniz. Şöyle:
<a href=" http://www.pcmagazine.com.tr" ><img src=" PCM.GIF" border=0></a>
Dikkat Etmeniz Gerekenler
Bir kısayol oluşturduktan sonra mutlaka ' Acaba bir hata yapmış mıyım?' diyerek kısayolu kontrol edin. Bozuk kısayolların sitenizin ziyaret sayısını ve itibarını zedeleyeceğini unutmayın.
Sonradan doldururum diye kısayolu önceden yerleştirmeyin. Sitenin başına ' inşa aşamasında' yazsanız bile yapmadığınız bölümlerin linklerini koymayın. Bunun yerine hazırladığınız bölümleri kısayol oluşturmaksınız Web sayfasına yerleştirin.
Sitenize bulunduğunuz makineden FTP programıyla uzunca bir shareware yolluyorsunuz diyelim. Shareware'inizin kısayolunu önceden yollamayın, geçen zaman süresince sitenize bağlanıp o program ile ilgilenenler ' 404 Not Found' hatası ile karşılaşırlar.
Internet adresi verirken başına http://, mail adresi verirken başına mailto: koymayı unutmayın. Bunu yapmazsanız verdiğiniz www.pcmagazine.com.tr veya cenk.tarhan@pcmagazine.com.tr gibi bir adres lokal bir dosya olarak görülür ve linkine tıklayınca doğal olarak hata verir.
Internet kısayollarını ve resimlerin kısayollara atanması için nasıl kullanıldığını öğrendik...
İşte bize en çok sorulan sorulardan biri:
' Web projem bir klasörde duruyor, lokal olarak çalışıyorum ve bir alt veya üst klasördeki dosyayı bulunduğum sayfadan çağırmak istiyorum. Nasıl yapacağım?'
Üzerinde çalıştığınız HTML sayfası C:PROJE1 klasöründe olsun, sizin de C:PROJE klasöründeki DENEME.HTM sayfasını çağırmak istediğinizi varsayalım. Bu dosyayı çağırmak için şöyle bir satır kullanmalısınız:
<A HREF=" ../DENEME.HTM" >KISAYOL DENEME.HTM</A>
../ ifadesini istediğiniz kadar kullanabilirsiniz. İki alt klasördeki dosyayı çağırmak için ../../DENEME.HTM gibi bir ifade kullanabilirsiniz. Bir üst klasördeki (C:PROJE1BASKASAYFA.HTM gibi) dosyayı çağırmak için ise şöyle bir yol izlemelisiniz:
<A HREF=" BASKA/SAYFA.HTM" >KISAYOL</A>
Eğer bir Web sunucusu üzerinde çalışıyorsanız ve sabit diskinizin tümü veya bir alt dizinini Web sayfalarınız için tanımlanmışsa kök dizine inmek ve buradan başka bir klasöre geçmek için / karakterini kullanabilirsiniz. Örneğin
<a href=" /GIRIS.HTM" >GIRIS</a> satırı sizi web için ayrılan bölümün en dibine kadar indirecek ve GIRIS.HTM dosyasına kısayol oluşturacaktır. Bunun gibi resimler dizinindeki bir resmi çağırmak için
<img src=" /resimler/pcmagazine.gif" > gibi bir ifade kullanmalısınız.
LİSTE KULLANMAK
HTML tag'ları kullanarak sayfa içerisinde otomatik olarak numaralandırılan ve sıralandırılan listeler hazırlamak çok kolaydır, bunun için öncelikle metnin ne biçimde listeleneceğini seçmelisiniz. Liste hazırlarken en çok rastlananları tipler <OL> ve <UL> dir. <UL> tag'ını listeye ait olan her satırın başına bir nokta koymak için kullanabilirsiniz. <OL> tag'ı ise her bir satırı isteğe göre numaralandırmanızı veya harflendirmenizi sağlar. Bu tag'lar ayrıca bir paragrafı diğer paragraflardan biraz ileriye itmek için de kullanılabilir. Liste tipini belirlemek için yukarıdaki iki seçeneği kullanıyoruz; peki liste seçeneklerini birbirinden ayırmak için nasıl bir yol izleyeceğiz. Listenin her bir öğesini belirtmek için ise <LI> tag'ı kullanılır. Bu karakterleri herhangi bir satırın önüne yerleştirdiğinizde web tarayıcınız bu satırı anında yeni bir liste öğesi olarak kabul edecektir.
Birinci Satır
İkinci Satır
Üçüncü Satır
HTML dokümanınızda yukarıdaki gibi bir görüntü elde etmek istiyorsanız aşağıdaki gibi kodlar kullanmalısınız:
<UL>
<LI>Birinci Satır
<LI>İkinci Satır
<LI>Üçüncü Satır
</UL>
Listeyi oluşturmak için <OL> kullanacaksanız bu tag'ın yanına TYPE=X takısını girerek liste biçimini belirleyebilirsiniz. Liste öğelerini sıralatmak için büyük harfleri kullanmak istiyorsanız X yerine A, küçük harflerle sıralamak için a, büyük Roma karakterleri ile sıralamak için I, küçük Roma karakterleri ile sıralamak için I, numaralarla sıralamak için ise L karakterini kullanabilirsiniz.
Büyük harflerle ayrılan bir liste aşağıdaki gibi bir koda sahip olacaktır:
<ol type=A>
<li>Birinci Satır
<li>İkinci Satır
<li>Üçüncü Satır
</ol>
Herhangi bir liste içerisinde değişik veya aynı tipte bir liste daha açmak mümkündür. Bunun için <UL> veya <OL> tag'ını kapatmadan tekrar bir <OL> veya <UL> girmek yeterlidir. Açılan tüm liste tag'larının kapatılması unutulmamalıdır. Unutulduğu takdirde HTML sayfası düzgün görünmeyecektir.
TABLOLAR
Tablolar, HTML sayfasında listeler ve şablonlar hazırlamak dışında, resimleri ve metinleri sayfa içerisinde istenilen bölgelere yerleştirmek ve bunun gibi bir çok alanda kullanılırlar. HTML 3.2 ile birlikte pek çok yeni özelliğe kavuşan ve daha görsel hale getirilen tablolar konusunu iyi öğrenen bir webmaster, hayalgücü ile tasarladığı "TÜM" sayfaları tablolar yardımı ile oluşturabilir.
<TR>,<TD>,<TH> ve bunları kapatma taglarıyla birlikte kullanılan <TABLE...> tag'ının genel kullanımı şöyledir:
<TABLE BORDER=X CELLPADDING=X CELLSPACING=X WIDTH=[% veya X] HEIGHT=[% veya X] BGCOLOR=X BACKGROUND="X">
BORDER değişkenine verilecek 0 veya daha üstü bir değer tablonun kalınlığını belirler. CELLPADDING değişkenine verilebilecek herhangi bir sayı, tablonun sınırları ile tablo içeriği arasındaki mesafeyi, CELLSPACING ise hücreler arasındaki mesafeyi belirler.
WIDTH ve HEIGHT değişkenleri bir yüzde değeri veya bir sayı olabilir. WIDTH=590 değeri verildiğinde 640*480 çözünürlükte ekranın tüm genişliğini kaplayacak bir tablo oluşturulur. WIDTH=%50 değerini verildiğinizde ise Web tarayıcınız o tablonun her zaman ekran genişliğinin yarısını kaplamasını sağlar.
<TABLE> tag'ının içerisinde kullanılan BGCOLOR değişkeni tablonun fon rengini tayin eder. X değeri geçen aylarda değindiğimiz HEX kodlarından (#FFFF00) veya renk isimlerinden (white, olive...) biri olmalıdır. Tablonuz daha canlı ve profesyonel görünsün istiyorsanız, arka fonuna bir GIF veya JPG resmini de BACKGROUND ekini kullanarak döşetebilirsiniz.
Gelelim tablonun oluşturulmasına. Genel prensip şudur: <TABLE> tag'ıyla tabloya başladıktan sonra her satırı oluşturmak için <TR>, her sütunu oluşturmak için ise <TD> tag'ını kullanmalısınız. Aman bu tagları kullanıyorsanız her satırın sonuna </TR> ve her sütunun sonuna </TD> tag'larının koymayı unutmayın!
Bir diğer durum da, herhangi bir hücrenin yanındaki iki ya da daha çok hücreyi enine ya da boyuna doğru içine almasıdır ki bu işlemi yapmak için <TD [COLSPAN=X, ROWSPAN=X]> veya <TR [COLSPAN=X, ROWSPAN=X]> ekleri kullanılır. Örneğin 2 satır ve 2 sütunlu 1.tablonun oluşturulması için aşağıdaki kodlara ihtiyaç vardır, bu kodlar aynı zamanda COLSPAN ve ROWSPAN eklerini de anlatmaktadır.
<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=3>
<!---Bu kodlarla, çerçeve kalınlığı 1, hücreler arası boşluğu 2, hücre ile yazı aralığı 3 olan yeni bir tablo oluşturuyoruz.--->
<TR><TH COLSPAN=2> <!---iki kolonu içine alacak, yazılar kalın olacak ve ortalanacak (yani başlık olacak) --->
Tablo Örneği
</TR></TD><TR><TD>
deneme1
</TD><TD> <!-- yeni bir kolona başlıyoruz... -->
deneme2
</TR></TD><TR><TD>
deneme3
</TD><TD> <!-- yeni bir kolona başlıyoruz... -->
deneme4
</TD></TR></TABLE> <!-- tüm tag'ları kapatıp tabloyu sonlandırıyoruz. -->
Eğer renkli tablolar elde etmek isteseydik <TABLE .... ifadesinin yanına BGCOLOR="#FFFF80", <TD.. ifadesinin yanına ise BGCOLOR="#000080" eklerini girmeniz gerekecekti.
SAYFA İÇİNDE AÇIKLAMA YAPMAK
Her programlama dilinde programcının hatırlatma veya açıklama yapabilmesi için gerekli bir komut vardır, HTML standartlarını koyanlar bunu da unutmamış ve HTML sayfalarına açıklama koyabilmek için bir yol bulmuşlar. Bir sayfaya açıklama koymak ya da belirli bir aralıkta kalan HTML kodlarını geçici olarak iptal etmek için ünlem işareti kullanılır. Aşağıdaki ilk satır bir açıklama satırıdır ve HTML dokümanı içerisinde görünmeyecektir, ikinci satır ise bir komutu iptal etmek için kullanılmıştır.
<!-- Bu bir açıklama satırıdır -->
<!-------- <b>Kalın yazı...</b> ------>
FRAME KULLANMAK
Frame'ler web tarayıcınızın penceresini birbirine yapışık parçalara ayırarak her bir parçanın ayrı bir içerik sergilemesine izin verir. Yüklenen basit bir sayfayla yapılan pencereyi ayırma işlemi, her pencere için HTML standartlarına uygun bir sayfanın yüklenmesiyle tamamlanır. Frame'ler bulunan bir sayfa oluşturmak için herhangi bir HTML editörüne gerek yoktur. Tek ihtiyacınız olan basit bir metin editörü ve kafanızda tasarladığınız çerçeve stilini gerçekleştirmek için biraz düşünmek.
Sayfanızda frame uygulamasına geçmeden önce hemen bu özelliğinin HTML 3.0 standartlarında bulunmadığını fakat en yeni web tarayıcıları tarafından desteklendiğini belirtelim. Netscape Navigator'ın 2.0 ve Microsoft Internet Explorer'ın 3.0 ve daha üstü sürümleri frameleri destekliyor.
Frame'leri destekleyen bir sayfa oluşturuyorsanız mutlaka sayfanın, bu özelliği desteklemeyen web tarayıcıları için bir alternatifini oluşturmalısınız, aksi takdirde sitenize terminal ekranından veya eski bir web tarayıcıyla bağlanan kimseler içerikten faydalanamayacak ve sayfa ziyaret sayınıza katkıda bulunmayacaklardır (!) Frame'lere nasıl alternatif oluşturulduğunu yazımızın ilerki bölümlerinde anlatacağız. Başlamadan önce herkesin yaptığı gibi frame'ler konusunda 1-2 örnek verip sadece TAG'ları açıklamayacağımızı belirtelim, aynı zamanda kendi özgün çerçevelerinizi oluşturmanız için işin mantığına da değineceğiz.
Frame'ler ne zaman kullanılmalıdır?
Hiç gereği olmadığı halde web sayfanızda frame'lerden faydalanmak hem sayfanızın işlevselliğini yok edip kullanıcının kafasını karıştıracak hem de sayfanın yüklenmesini zorlayacaktır, web tarayıcınız bir web sayfasının yüklenmesi için sunucudan komutlar aldığından en az iki sayfadan oluşacak çerçeveli bir sayfayı yüklemek için ana sayfa da içinde olmak üzere üç sayfa için ayrı ayrı sunucudan bilgi alacaktır. Sayfa içerisinde, yüklenmesi uzun süre alacak, büyük bir resim, menü gibi değişmeyen öğeleri her seferinde tekrar yüklememek için bu bölümler ayrı bir pencere olarak tanımlanabilir.
Sayfa içerisinde ilişkilendirmeler oluşturmak, sayfanın değişik alanlarına tıklandığında bağımsız bir yerde bir içerik oluşturmak frame'ler sayesinde çok kolaydır.
Nasıl oluyor da oluyor?
Frame'lere sahip bir sayfa oluşturmaya başlamadan önce web tarayıcılarında bu teknolojiyi destekleyen iki rakip firmanın ortak olarak kullandığı komutları açıklayalım.
<FRAMESET>
Bu tag, yatay ve dikey pencerelerin tanımına "başlamak" için kullanılır. Tag ile birlikte kullanılabilecek iki adet takı vardır ki bu takılar olutturulacak pencerelerin cinsini belirler.
COL takısı dikey nitelikte ROW takısı yatay nitelikte bir pencere oluşturmak için kullanılır.
<FRAMESET COL="100,50,*> komutu bundan sonra üç sayfanın tanımı yapılacağını, bu sayfaların kolon nitelikli olacağını, bunlardan iki tanesinin sabit uzunluklu, üçüncüsünün uzunluğunun ise değişebilir olduğunu gösterir. Tırnak içinde sabit bir sayı ve yıldız kullanabileceğiniz gibi "%30,%70" bir yüzde değer de belirtebilirsiniz, bu durumda frame'in boyutu sayfanın boyutu göz önüne alınarak otomatik olarak ayarlanır. <FRAMESET> takısı </FRAMESET> ile bitirilmeden önce iç içe kullanılarak komplike pencere tanımları yapmanıza izin verir.
<FRAME>
Bu tag ise <frameset> ile başlayacağınızı belirttiğiniz sayfaları oluşturmakta kullanılır ve sayfanın genel yapısını belirler. <frame> takısının iki web tarayıcısının da desteklediği 6 adet takısı vardır.
SRC="URL/DOSYA_ADI" Pencere içerisine yüklenecek dosyayı seçmek için kullanılır. Bu değer sunucu içinde herhangi bir dosya olduğu gibi değişik bir Internet adresi de içerebilir.
NAME="FRAME_ADI" Daha sonra sayfayı çağırmak için referans olarak kullanılacak isim bu değere atanmalıdır.
MARGINWIDTH="DEĞER" Sayfadaki ilk nesnenin soldan ne kadar uzak olacağını belirler.
MARGINHEIGHT="DEĞER " Sayfadaki ilk nesnenin yukardan ne kadar uzak olacağını belirler.
SCROLL=AUTO/YES/NO Kaydırma çubuklarının durumunu belirler.
NORESIZE Pencerenin fare yardımıyla genişletilip daraltılamamasını sağlar.
<NOFRAME>
Bu takı iki çerçeveyi oluşturacak sayfada kullanılır ve frame'leri desteklemeyen web tarayıcısında sayfanın görünümünü oluşturur. Web tasarımcısı <noframe> ve </noframe> takıları arasına <HTML>, <BODY> tag'larını barındıran tam bir HTML sayfası girebilir.
Son olarak frame'leri tanımlayan sayfada bulunmayan fakat frame'in tanımladığı sayfaya koyabileceğiniz bir tag daha vardır. <BASE TARGET="pencere"> tagı o pencere içerisinden bir link'e tıklandığında kaynağın hangi pencerede açılacağını belirler.
Nelere dikkat etmeli ?
Frame'lerin kullanımını ve komutlarını anlatırken dikkat etmeniz gereken unsurların bir kısmındanbahsettik, ama yine de Internet üzerinde rastladığımız sayfalarda sık yapılan hataları belirtelim. Böylece siz de ilk deneyimlerinizde bu hatalardan kaçınabilirsiniz.
Frame içindeki bir sayfada dışarıya bir referans bulunuyorsa <A HREF="… ile başlattığınız tag içinde mutlaka TARGET="_TOP" veya TARGET="_BLANK" takılarını kullanın. Bunu yapmazsanız frame'li sayfanız içinda başka bir frame'li sayfa açılması veya küçücük pencerenize sığmayacak bir sitenin yüklenmesi kaçınılmaz olur.
Frame'inizi tasarlarken kaydırma çubuklarının otomatik olmasına özen gösterin. Sayfanın içerisinde yeterince içerik olmasa bile sayfa kenarlarında kaydırma çubuklarının bulunması kullanıcıya rahatsızlık verecektir.
Frame'lerin içeriğini her zaman iyi kontrol edin. Çerçevelerden birini menü olarak kullanıyorsanız o çerçeve içerisinde yanlışlıkla başka bir sayfanın açılmasına mahal vermeyin.
Pencerelerden bir tanesini "kaydırılamaz" olarak atıyorsanız ya bu frame'in genişliğini ve yüksekliğini sabit olarak atayın ya da sayfayı 640*480 çözünürlüğe uygun olarak tasarlayın. Bunu uygulamazsanız
640*480 çözünürlükte frame'in içeriğinin bir kısmının görülmesi kullanıcı ne yaparsa yapsın mümkün olmayacaktır.
Değişik çerçeve stilleri için kaynak kodlar
<FRAMESET COLS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAME SRC="2.htm" NAME="2">
</FRAMESET>
---------------
<FRAMESET ROWS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAME SRC="2.htm" NAME="2">
</FRAMESET>
--------------------------
<FRAMESET ROWS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAMESET COLS="100,*">
<FRAME SRC="2.htm" NAME="2">
<FRAME SRC="3.htm" NAME="3">
</FRAMESET>
</FRAMESET>
---------------
<FRAMESET COLS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAMESET ROWS="100,*">
<FRAME SRC="2.htm" NAME="2">
<FRAME SRC="3.htm" NAME="3">
</FRAMESET>
</FRAMESET>
-------------
<FRAMESET COLS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAMESET ROWS="100,*">
<FRAME SRC="2.htm" NAME="2">
<FRAME SRC="3.htm" NAME="3">
<FRAME SRC="4.htm" NAME="3">
</FRAMESET>
</FRAMESET>
Gelelim web dünyasının en önemli öğelerinden birine, resimlere. HTML dilinde her şey çok kolay olduğu gibi sayfalara resim yerleştirmek de çok kolaydır. Resimler sayfa içerisinde metne göre sağa, sola, aşağı ve yukarı doğru yerleştirilebilirler, ayrıca boyutları sadece belirli değerler değiştirilerek ayarlanabilir.
Dokümanın herhangi bir yerine bir resim yerleştirmek için en sade haliyle <IMG SRC="RESIM.GIF"> tag'ını kullanabilirsiniz. Bu tag'ı kullandığınızda resim hiç bir yere yaslanmayacak, boyutu ayarlanmayacak, metin olarak bir alternatifi olmayacaktır.
Yukarda da belirttiğimiz gibi resimleri kullanırken bir çok seçeneğiniz var, bu seçenekler sayfanın görünümünde kuşkusuz büyük rol oynayacaktır. Seçeneklerden birincisi Internet erişiminin yavaş olduğunu bildiğimiz ülkemizde sayfalarınızı görüntüleyecek olan kişilere biraz yardımcı olmak en azından resim yüklenene kadar kullanıcının meraklarını gidermek için kullanılabilir, bahsettiğimiz takı "ALT" tır. <IMG SRC="RESIM.GIF" ALT="deneme resmi"> satırını yazdığınızda web tarayıcınız RESIM.GIF adlı resmi yüklenmeden önce resmin yerine "deneme resmi" metnini girecektir, böylece kullanıcı resmi görmeden ne olduğunu bilecek ve anında STOP tuşuna basabilecektir. (!)
Seçeneklerden biri de resmin ekranda görünecek boyutlarını ayarlamak için kullanılır bu takı HEIGHT ve WIDTH'tir. Bu takılar bir arada kullanılmalıdır, tek başına kullanıldığında web tarayıcısı takıyı göz ardı edecektir. <IMG SRC="RESIM.GIF" WIDTH=100 HEIGHT=50> satırını yazdığınızda RESIM.GIF isimli resmin boyutu ne olursa olsun 50 piksel yüksekliğe ve 100 piksel genişliğine getirilerek ekranda gösterilecektir. Resim gösterirken işinize yarayacak diğer bir seçenek ise BORDER'dır. Bu takı ileride değineceğimiz "Internet Kısayolları" (Hyper Link) ile ilgili olsa da şimdi birkaç püf noktası vermek gerekir. Başka bir URL'ye kısayol yaratıldığında kısayolun ismi bir alt çizgi ile belirlenir, bu işlem resimlerde resmin mavi bir çerçeve içerisine alınmasıyla belirtilir, Eğer bir resmi başka bir sayfaya kısayol olarak kullanacaksanız ve çerçevenin görünmesini istemiyorsanız BORDER=0 ifadesini kullanmalısınız.
Resimleri kullanırken dikkat etmeniz gerekenler:
* Daha önce de belirttiğimiz gibi Internet'te uzun süredir yer alan kullanıcılar, sitelerdeki büyük resimleri çok işlerine yaramadığı sürece görmek istemeyeceklerdir. Bu yüzden, her zaman resimlerin boyutunu küçük, miktarını az tutmalısınız.
* Eğer büyük resimler kullanacaksanız, (büyük resim derken ekranı kaplayacak kadar büyük değil), bunları JPEG formatına çevirmenizi ve kalitesini düşürmenizi tavsiye ederiz. JPEG resimler her zaman GIF'lerden daha az yer kaplarlar, bu yüzden daha hızlı yüklenirler.
* Resimlere her zaman ALT tag'ını kullanarak alternatif metinler verin, Internet'i kullananların her zaman resim görüntüleyebilecek, browser'ı olan makineler olduğunu varsaymayın. Eğer resimlere alternatif metinler verirseniz terminal ekranı kullanan kullanıcılarda bilgiye erişebilirler.
* GIF'leri kullanırken "Interlaced" haline getirin, bu tip GIF'ler kademe kademe yüklenir ve yavaş yavaş netleşerek resmi daha hızlı yükleniyormuş gibi gösterir.
HTML ve YAZITİPLERİ
Dokümandaki yazıtipini değiştirmek için <FONT> tagı kullanılır, genel kullanımı şöyledir:
<FONT SIZE="x" FACE="[isim] COLOR="#XXXXXX">
* SIZE değişkeni metnin büyüklüğünü ayarlar, bu değişkene -1, +2 gibi değerler verilerek metnin puntosunun bir eksiltilmesini veya iki arttırılmasını sağlayabilir, direkt olarak bir rakam vererek puntoyu tayin edebilirsiniz. HTML sayfalarında SIZE değişkenine verebileceğiniz en büyük değer 5'tir. 5'ten sonra vereceğiniz her değer siz 5 değeri vermişsiniz gibi muamele görecektir. Yazıtipi çok büyük olmamalıdır, büyük yazıtipleri hem kullanıcıların sayfayı okumasını zorlaştırır hem de sayfanın güzelliğini bozar.
* FACE takısını tüm web tarayıcıları desteklemese de bu takı kullanılarak sayfada resim kullanmadan oldukça güzel görüntüler elde edilebilir. Örneğin FACE="Arial Tur" takısı kullanıldığında yazı tipi Türkçe Arial olacaktır. FACE değerine Türkçe desteği olmayan "Comic Sans Ms" gibi yazıtipleri verilmemelidir, verilirse bazı Türkçe karakterler bozuk olarak görülecektir.
* Son olarak COLOR takısı yazıtipinin rengini ayarlamakta kullanılmaktadır. Web tarayıcılarının desteklediği temel renklerden oluşan tablo geçen ay bu bölümde verilmiştir. Tablodan dilediğiniz bir rengi seçerek bu değişkenin karşısına yazdığınızda yazıtipi rengi değişecektir.
* <FONT> ifadesi her zaman bir </FONT> ile sonlanmalıdır. Bu tag unutulursa web tarayıcınız sayfaları yanlış görüntüleyebilir. (Bazen de hiç görüntülemez)
İNTERNET KISAYOLLARI
LINK veya shortcut dediğimiz Internet kısayolları, Internet'te belki de en çok kullanılan özelliklerden biridir. Asli amacı Internet üzerinde herhangi bir sunucuya bağlı bir dosyayla bağlantı kurmak olan kısayollar ayrıca elektronik posta yollamak, Telnet bağlantısı kurmak gibi değişik amaçlar için de kullanılabilir.
<a href=" [Adres] [ort]" >[Görüntü]</a>
Internet kısayollarının kullanımı yukarıdaki gibidir. Adres kısmı bağlanılacak HTML sayfasını, görüntü kısmı ise kısayolun, sayfadaki görüntüsünü belirler. Örneğin yazacağınız
<a href=" http://www.pcmagazine.com.tr" >PC Magazine Online</a>
gibi bir satır ekranda PC Magazine Online olarak görülecek ve sizi doğruca pc magazine Türkiye'nin Web sitesine bağlayacaktır.
Adres kısmı oldukça basit olmasına rağmen, bazı küçük püf noktaları da yok değil. Örneğin, adres kısmını kullanıcının size mail atması için kullanabilirsiniz. Bunu gerçekleştirmek için kişisel e-posta adresinizin önüne mailto: takısını getirmeniz yeterlidir. Örneğin hazırladığınız sayfada kullanıcıların size mail atabilmeleri için
Bana <a href=" mailto:cenk.tarhan@pcmagazine.com.tr" >mail</a> atabilirsiniz.
gibi bir satır kullanabilirsiniz. Kısayollar ayrıca Telnet, FTP, Gopher servislerini de çağırabilirler. Bunları çağırmak için, sizin de tahmin edebileceğiniz gibi ftp://, gopher:// takılarını site isminin önüne getirmek yeterlidir. Genel kullanımda verdiğimiz ort takısının ne işe yaradığını merak edenler için hemen bir açıklama getirelim: Bu takı tüm web servisleri için 80 olup genelde kullanılmalarına gerek yoktur. Hızla gelişen Web teknolojisi çoook eskiden kullanılan ort takısının kullanımını gereksiz bir hale getirmiştir.
Internet kısayolları, Web tarayıcınızın ayarıyla oynamadıkça ve HTML sayfasında aksini belirtmedikçe ekranda mavi altı çizili yazılar olarak görülürler. Siz ilgili linke tıkladığınızda ve işaret ettiği sayfayı izlediğinizde o sayfadaki link maviden mora dönüşür.
Daha önce de belirttiğimiz gibi kısayol renkleri HTML sayfasındaki kodlarla değiştirilebilirler, üstelik siz bunu yaptığınızda kullanıcı web tarayıcısının ayarıyla oynayarak kısayolun rengini kendisine göre tayin edemez. İşte bunun nasıl yapılacağı:
Sayfanızın başında <BODY...> ' tag'ıyla birlikte link=değer vlink=değer takılarını kullanarak ziyaret edilmiş ve edilmemiş kısayol renklerini belirleyebilirsiniz. Her zamanki gibi bunu yapmak için Hex renk kodlarını ve hazır renk adlarını kullanabilirsiniz. Örneğin sayfadaki kısayolların altı sarı çizgili görülmesini, aynı kısayolların ziyaret edilince kırmızıya dönüşmesini istiyorsunuz bunu yapmak için
<BODY BGCOLOR=WHITE LINK=YELLOW VLINK=RED>
satırını kullanabilirsiniz. Mutlaka siz de rastlamışsınızdır: Bazen resimler de bir Internet kısayolu olarak kullanılabiliyor. ' Bunu nasıl yapabilirim?' diyorsanız, hemen çok basit olduğunu belirtelim. Genel kullanım bölümünde verdiğimiz [görüntü] bölümüne önceki örneklerimizde hep yazı yazdık, bir de resim koymayı deneyelim:
<a href=" http://www.pcmagazine.com.tr" ><img src=" PCM.GIF" alt=" PC Magazine Online" ></a>
satırını yazdığınızda PCM.GIF isimli resim PC Magazine Online'a bağlanmak için bir kısayol olarak kullanılacaktır. Burada dikkat etmeniz gereken bir husus var, o da resimlerin link olarak kullanıldığında mavi (ya da link için atadığınız renk neyse) bir çerçeve içine alındığıdır.
Bunu önlemek için resmi yükleyen ' tag'ın sonuna bir border=0 ekini girebilirsiniz. Şöyle:
<a href=" http://www.pcmagazine.com.tr" ><img src=" PCM.GIF" border=0></a>
Dikkat Etmeniz Gerekenler
Bir kısayol oluşturduktan sonra mutlaka ' Acaba bir hata yapmış mıyım?' diyerek kısayolu kontrol edin. Bozuk kısayolların sitenizin ziyaret sayısını ve itibarını zedeleyeceğini unutmayın.
Sonradan doldururum diye kısayolu önceden yerleştirmeyin. Sitenin başına ' inşa aşamasında' yazsanız bile yapmadığınız bölümlerin linklerini koymayın. Bunun yerine hazırladığınız bölümleri kısayol oluşturmaksınız Web sayfasına yerleştirin.
Sitenize bulunduğunuz makineden FTP programıyla uzunca bir shareware yolluyorsunuz diyelim. Shareware'inizin kısayolunu önceden yollamayın, geçen zaman süresince sitenize bağlanıp o program ile ilgilenenler ' 404 Not Found' hatası ile karşılaşırlar.
Internet adresi verirken başına http://, mail adresi verirken başına mailto: koymayı unutmayın. Bunu yapmazsanız verdiğiniz www.pcmagazine.com.tr veya cenk.tarhan@pcmagazine.com.tr gibi bir adres lokal bir dosya olarak görülür ve linkine tıklayınca doğal olarak hata verir.
Internet kısayollarını ve resimlerin kısayollara atanması için nasıl kullanıldığını öğrendik...
İşte bize en çok sorulan sorulardan biri:
' Web projem bir klasörde duruyor, lokal olarak çalışıyorum ve bir alt veya üst klasördeki dosyayı bulunduğum sayfadan çağırmak istiyorum. Nasıl yapacağım?'
Üzerinde çalıştığınız HTML sayfası C:PROJE1 klasöründe olsun, sizin de C:PROJE klasöründeki DENEME.HTM sayfasını çağırmak istediğinizi varsayalım. Bu dosyayı çağırmak için şöyle bir satır kullanmalısınız:
<A HREF=" ../DENEME.HTM" >KISAYOL DENEME.HTM</A>
../ ifadesini istediğiniz kadar kullanabilirsiniz. İki alt klasördeki dosyayı çağırmak için ../../DENEME.HTM gibi bir ifade kullanabilirsiniz. Bir üst klasördeki (C:PROJE1BASKASAYFA.HTM gibi) dosyayı çağırmak için ise şöyle bir yol izlemelisiniz:
<A HREF=" BASKA/SAYFA.HTM" >KISAYOL</A>
Eğer bir Web sunucusu üzerinde çalışıyorsanız ve sabit diskinizin tümü veya bir alt dizinini Web sayfalarınız için tanımlanmışsa kök dizine inmek ve buradan başka bir klasöre geçmek için / karakterini kullanabilirsiniz. Örneğin
<a href=" /GIRIS.HTM" >GIRIS</a> satırı sizi web için ayrılan bölümün en dibine kadar indirecek ve GIRIS.HTM dosyasına kısayol oluşturacaktır. Bunun gibi resimler dizinindeki bir resmi çağırmak için
<img src=" /resimler/pcmagazine.gif" > gibi bir ifade kullanmalısınız.
LİSTE KULLANMAK
HTML tag'ları kullanarak sayfa içerisinde otomatik olarak numaralandırılan ve sıralandırılan listeler hazırlamak çok kolaydır, bunun için öncelikle metnin ne biçimde listeleneceğini seçmelisiniz. Liste hazırlarken en çok rastlananları tipler <OL> ve <UL> dir. <UL> tag'ını listeye ait olan her satırın başına bir nokta koymak için kullanabilirsiniz. <OL> tag'ı ise her bir satırı isteğe göre numaralandırmanızı veya harflendirmenizi sağlar. Bu tag'lar ayrıca bir paragrafı diğer paragraflardan biraz ileriye itmek için de kullanılabilir. Liste tipini belirlemek için yukarıdaki iki seçeneği kullanıyoruz; peki liste seçeneklerini birbirinden ayırmak için nasıl bir yol izleyeceğiz. Listenin her bir öğesini belirtmek için ise <LI> tag'ı kullanılır. Bu karakterleri herhangi bir satırın önüne yerleştirdiğinizde web tarayıcınız bu satırı anında yeni bir liste öğesi olarak kabul edecektir.
Birinci Satır
İkinci Satır
Üçüncü Satır
HTML dokümanınızda yukarıdaki gibi bir görüntü elde etmek istiyorsanız aşağıdaki gibi kodlar kullanmalısınız:
<UL>
<LI>Birinci Satır
<LI>İkinci Satır
<LI>Üçüncü Satır
</UL>
Listeyi oluşturmak için <OL> kullanacaksanız bu tag'ın yanına TYPE=X takısını girerek liste biçimini belirleyebilirsiniz. Liste öğelerini sıralatmak için büyük harfleri kullanmak istiyorsanız X yerine A, küçük harflerle sıralamak için a, büyük Roma karakterleri ile sıralamak için I, küçük Roma karakterleri ile sıralamak için I, numaralarla sıralamak için ise L karakterini kullanabilirsiniz.
Büyük harflerle ayrılan bir liste aşağıdaki gibi bir koda sahip olacaktır:
<ol type=A>
<li>Birinci Satır
<li>İkinci Satır
<li>Üçüncü Satır
</ol>
Herhangi bir liste içerisinde değişik veya aynı tipte bir liste daha açmak mümkündür. Bunun için <UL> veya <OL> tag'ını kapatmadan tekrar bir <OL> veya <UL> girmek yeterlidir. Açılan tüm liste tag'larının kapatılması unutulmamalıdır. Unutulduğu takdirde HTML sayfası düzgün görünmeyecektir.
TABLOLAR
Tablolar, HTML sayfasında listeler ve şablonlar hazırlamak dışında, resimleri ve metinleri sayfa içerisinde istenilen bölgelere yerleştirmek ve bunun gibi bir çok alanda kullanılırlar. HTML 3.2 ile birlikte pek çok yeni özelliğe kavuşan ve daha görsel hale getirilen tablolar konusunu iyi öğrenen bir webmaster, hayalgücü ile tasarladığı "TÜM" sayfaları tablolar yardımı ile oluşturabilir.
<TR>,<TD>,<TH> ve bunları kapatma taglarıyla birlikte kullanılan <TABLE...> tag'ının genel kullanımı şöyledir:
<TABLE BORDER=X CELLPADDING=X CELLSPACING=X WIDTH=[% veya X] HEIGHT=[% veya X] BGCOLOR=X BACKGROUND="X">
BORDER değişkenine verilecek 0 veya daha üstü bir değer tablonun kalınlığını belirler. CELLPADDING değişkenine verilebilecek herhangi bir sayı, tablonun sınırları ile tablo içeriği arasındaki mesafeyi, CELLSPACING ise hücreler arasındaki mesafeyi belirler.
WIDTH ve HEIGHT değişkenleri bir yüzde değeri veya bir sayı olabilir. WIDTH=590 değeri verildiğinde 640*480 çözünürlükte ekranın tüm genişliğini kaplayacak bir tablo oluşturulur. WIDTH=%50 değerini verildiğinizde ise Web tarayıcınız o tablonun her zaman ekran genişliğinin yarısını kaplamasını sağlar.
<TABLE> tag'ının içerisinde kullanılan BGCOLOR değişkeni tablonun fon rengini tayin eder. X değeri geçen aylarda değindiğimiz HEX kodlarından (#FFFF00) veya renk isimlerinden (white, olive...) biri olmalıdır. Tablonuz daha canlı ve profesyonel görünsün istiyorsanız, arka fonuna bir GIF veya JPG resmini de BACKGROUND ekini kullanarak döşetebilirsiniz.
Gelelim tablonun oluşturulmasına. Genel prensip şudur: <TABLE> tag'ıyla tabloya başladıktan sonra her satırı oluşturmak için <TR>, her sütunu oluşturmak için ise <TD> tag'ını kullanmalısınız. Aman bu tagları kullanıyorsanız her satırın sonuna </TR> ve her sütunun sonuna </TD> tag'larının koymayı unutmayın!
Bir diğer durum da, herhangi bir hücrenin yanındaki iki ya da daha çok hücreyi enine ya da boyuna doğru içine almasıdır ki bu işlemi yapmak için <TD [COLSPAN=X, ROWSPAN=X]> veya <TR [COLSPAN=X, ROWSPAN=X]> ekleri kullanılır. Örneğin 2 satır ve 2 sütunlu 1.tablonun oluşturulması için aşağıdaki kodlara ihtiyaç vardır, bu kodlar aynı zamanda COLSPAN ve ROWSPAN eklerini de anlatmaktadır.
<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=3>
<!---Bu kodlarla, çerçeve kalınlığı 1, hücreler arası boşluğu 2, hücre ile yazı aralığı 3 olan yeni bir tablo oluşturuyoruz.--->
<TR><TH COLSPAN=2> <!---iki kolonu içine alacak, yazılar kalın olacak ve ortalanacak (yani başlık olacak) --->
Tablo Örneği
</TR></TD><TR><TD>
deneme1
</TD><TD> <!-- yeni bir kolona başlıyoruz... -->
deneme2
</TR></TD><TR><TD>
deneme3
</TD><TD> <!-- yeni bir kolona başlıyoruz... -->
deneme4
</TD></TR></TABLE> <!-- tüm tag'ları kapatıp tabloyu sonlandırıyoruz. -->
Eğer renkli tablolar elde etmek isteseydik <TABLE .... ifadesinin yanına BGCOLOR="#FFFF80", <TD.. ifadesinin yanına ise BGCOLOR="#000080" eklerini girmeniz gerekecekti.
SAYFA İÇİNDE AÇIKLAMA YAPMAK
Her programlama dilinde programcının hatırlatma veya açıklama yapabilmesi için gerekli bir komut vardır, HTML standartlarını koyanlar bunu da unutmamış ve HTML sayfalarına açıklama koyabilmek için bir yol bulmuşlar. Bir sayfaya açıklama koymak ya da belirli bir aralıkta kalan HTML kodlarını geçici olarak iptal etmek için ünlem işareti kullanılır. Aşağıdaki ilk satır bir açıklama satırıdır ve HTML dokümanı içerisinde görünmeyecektir, ikinci satır ise bir komutu iptal etmek için kullanılmıştır.
<!-- Bu bir açıklama satırıdır -->
<!-------- <b>Kalın yazı...</b> ------>
FRAME KULLANMAK
Frame'ler web tarayıcınızın penceresini birbirine yapışık parçalara ayırarak her bir parçanın ayrı bir içerik sergilemesine izin verir. Yüklenen basit bir sayfayla yapılan pencereyi ayırma işlemi, her pencere için HTML standartlarına uygun bir sayfanın yüklenmesiyle tamamlanır. Frame'ler bulunan bir sayfa oluşturmak için herhangi bir HTML editörüne gerek yoktur. Tek ihtiyacınız olan basit bir metin editörü ve kafanızda tasarladığınız çerçeve stilini gerçekleştirmek için biraz düşünmek.
Sayfanızda frame uygulamasına geçmeden önce hemen bu özelliğinin HTML 3.0 standartlarında bulunmadığını fakat en yeni web tarayıcıları tarafından desteklendiğini belirtelim. Netscape Navigator'ın 2.0 ve Microsoft Internet Explorer'ın 3.0 ve daha üstü sürümleri frameleri destekliyor.
Frame'leri destekleyen bir sayfa oluşturuyorsanız mutlaka sayfanın, bu özelliği desteklemeyen web tarayıcıları için bir alternatifini oluşturmalısınız, aksi takdirde sitenize terminal ekranından veya eski bir web tarayıcıyla bağlanan kimseler içerikten faydalanamayacak ve sayfa ziyaret sayınıza katkıda bulunmayacaklardır (!) Frame'lere nasıl alternatif oluşturulduğunu yazımızın ilerki bölümlerinde anlatacağız. Başlamadan önce herkesin yaptığı gibi frame'ler konusunda 1-2 örnek verip sadece TAG'ları açıklamayacağımızı belirtelim, aynı zamanda kendi özgün çerçevelerinizi oluşturmanız için işin mantığına da değineceğiz.
Frame'ler ne zaman kullanılmalıdır?
Hiç gereği olmadığı halde web sayfanızda frame'lerden faydalanmak hem sayfanızın işlevselliğini yok edip kullanıcının kafasını karıştıracak hem de sayfanın yüklenmesini zorlayacaktır, web tarayıcınız bir web sayfasının yüklenmesi için sunucudan komutlar aldığından en az iki sayfadan oluşacak çerçeveli bir sayfayı yüklemek için ana sayfa da içinde olmak üzere üç sayfa için ayrı ayrı sunucudan bilgi alacaktır. Sayfa içerisinde, yüklenmesi uzun süre alacak, büyük bir resim, menü gibi değişmeyen öğeleri her seferinde tekrar yüklememek için bu bölümler ayrı bir pencere olarak tanımlanabilir.
Sayfa içerisinde ilişkilendirmeler oluşturmak, sayfanın değişik alanlarına tıklandığında bağımsız bir yerde bir içerik oluşturmak frame'ler sayesinde çok kolaydır.
Nasıl oluyor da oluyor?
Frame'lere sahip bir sayfa oluşturmaya başlamadan önce web tarayıcılarında bu teknolojiyi destekleyen iki rakip firmanın ortak olarak kullandığı komutları açıklayalım.
<FRAMESET>
Bu tag, yatay ve dikey pencerelerin tanımına "başlamak" için kullanılır. Tag ile birlikte kullanılabilecek iki adet takı vardır ki bu takılar olutturulacak pencerelerin cinsini belirler.
COL takısı dikey nitelikte ROW takısı yatay nitelikte bir pencere oluşturmak için kullanılır.
<FRAMESET COL="100,50,*> komutu bundan sonra üç sayfanın tanımı yapılacağını, bu sayfaların kolon nitelikli olacağını, bunlardan iki tanesinin sabit uzunluklu, üçüncüsünün uzunluğunun ise değişebilir olduğunu gösterir. Tırnak içinde sabit bir sayı ve yıldız kullanabileceğiniz gibi "%30,%70" bir yüzde değer de belirtebilirsiniz, bu durumda frame'in boyutu sayfanın boyutu göz önüne alınarak otomatik olarak ayarlanır. <FRAMESET> takısı </FRAMESET> ile bitirilmeden önce iç içe kullanılarak komplike pencere tanımları yapmanıza izin verir.
<FRAME>
Bu tag ise <frameset> ile başlayacağınızı belirttiğiniz sayfaları oluşturmakta kullanılır ve sayfanın genel yapısını belirler. <frame> takısının iki web tarayıcısının da desteklediği 6 adet takısı vardır.
SRC="URL/DOSYA_ADI" Pencere içerisine yüklenecek dosyayı seçmek için kullanılır. Bu değer sunucu içinde herhangi bir dosya olduğu gibi değişik bir Internet adresi de içerebilir.
NAME="FRAME_ADI" Daha sonra sayfayı çağırmak için referans olarak kullanılacak isim bu değere atanmalıdır.
MARGINWIDTH="DEĞER" Sayfadaki ilk nesnenin soldan ne kadar uzak olacağını belirler.
MARGINHEIGHT="DEĞER " Sayfadaki ilk nesnenin yukardan ne kadar uzak olacağını belirler.
SCROLL=AUTO/YES/NO Kaydırma çubuklarının durumunu belirler.
NORESIZE Pencerenin fare yardımıyla genişletilip daraltılamamasını sağlar.
<NOFRAME>
Bu takı iki çerçeveyi oluşturacak sayfada kullanılır ve frame'leri desteklemeyen web tarayıcısında sayfanın görünümünü oluşturur. Web tasarımcısı <noframe> ve </noframe> takıları arasına <HTML>, <BODY> tag'larını barındıran tam bir HTML sayfası girebilir.
Son olarak frame'leri tanımlayan sayfada bulunmayan fakat frame'in tanımladığı sayfaya koyabileceğiniz bir tag daha vardır. <BASE TARGET="pencere"> tagı o pencere içerisinden bir link'e tıklandığında kaynağın hangi pencerede açılacağını belirler.
Nelere dikkat etmeli ?
Frame'lerin kullanımını ve komutlarını anlatırken dikkat etmeniz gereken unsurların bir kısmındanbahsettik, ama yine de Internet üzerinde rastladığımız sayfalarda sık yapılan hataları belirtelim. Böylece siz de ilk deneyimlerinizde bu hatalardan kaçınabilirsiniz.
Frame içindeki bir sayfada dışarıya bir referans bulunuyorsa <A HREF="… ile başlattığınız tag içinde mutlaka TARGET="_TOP" veya TARGET="_BLANK" takılarını kullanın. Bunu yapmazsanız frame'li sayfanız içinda başka bir frame'li sayfa açılması veya küçücük pencerenize sığmayacak bir sitenin yüklenmesi kaçınılmaz olur.
Frame'inizi tasarlarken kaydırma çubuklarının otomatik olmasına özen gösterin. Sayfanın içerisinde yeterince içerik olmasa bile sayfa kenarlarında kaydırma çubuklarının bulunması kullanıcıya rahatsızlık verecektir.
Frame'lerin içeriğini her zaman iyi kontrol edin. Çerçevelerden birini menü olarak kullanıyorsanız o çerçeve içerisinde yanlışlıkla başka bir sayfanın açılmasına mahal vermeyin.
Pencerelerden bir tanesini "kaydırılamaz" olarak atıyorsanız ya bu frame'in genişliğini ve yüksekliğini sabit olarak atayın ya da sayfayı 640*480 çözünürlüğe uygun olarak tasarlayın. Bunu uygulamazsanız
640*480 çözünürlükte frame'in içeriğinin bir kısmının görülmesi kullanıcı ne yaparsa yapsın mümkün olmayacaktır.
Değişik çerçeve stilleri için kaynak kodlar
<FRAMESET COLS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAME SRC="2.htm" NAME="2">
</FRAMESET>
---------------
<FRAMESET ROWS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAME SRC="2.htm" NAME="2">
</FRAMESET>
--------------------------
<FRAMESET ROWS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAMESET COLS="100,*">
<FRAME SRC="2.htm" NAME="2">
<FRAME SRC="3.htm" NAME="3">
</FRAMESET>
</FRAMESET>
---------------
<FRAMESET COLS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAMESET ROWS="100,*">
<FRAME SRC="2.htm" NAME="2">
<FRAME SRC="3.htm" NAME="3">
</FRAMESET>
</FRAMESET>
-------------
<FRAMESET COLS="100,*">
<FRAME SRC="1.htm" NAME="1">
<FRAMESET ROWS="100,*">
<FRAME SRC="2.htm" NAME="2">
<FRAME SRC="3.htm" NAME="3">
<FRAME SRC="4.htm" NAME="3">
</FRAMESET>
</FRAMESET>