Tablonun genişliği: Bir tablo, tarayıcının tüm sayfasına yayılabileceği gibi, tasarımcının arzu ettiği bir yüzdesinde veya belirli ölçülerde de oluşturulabilir. Bunun için tabloyu başlattığınız yerde TABLE etiketine ölçü birimi ve miktarını eklemeniz gerekir. Örneğin, <TABLE WIDTH=70%> etiketi, tablonun eninin kullanıcının tarayıcı penceresinin yüzde 70’i kadar olmasını sağlar. Yüzde yerine pixel olarak mutlak ölçü de verebilirsiniz: WIDTH=200px gibi.
Tablonun Çerçevesi: Bir tablonun bütün sütun ve satırları içine alan en dış çerçevesinin kalınlığını belirlemek tasarımcının elindedir. Bunun için TABLE etiketi ile birlikte BORDER=xx (xx, pixel cinsinden çerçeve kalınlığı) yazacaksınız. “FRAME=x” ile tablonun dış ve hücreler arası çerçeve çizgilerini kontrol edebilirsiniz. “x” yerine VOID yazarak bütün dış çerçeveyi kaldırabilirsiniz; ABOVE sadece tablonun üst tarafına; BELOW sadece alt tarafına; HSIDES sadece alt ve üst taraflara; LHS sadece sol tarafa, RHS sadece sağ tarafa, VSIDES sadece sağ ve sol taraflara çerçeveye konulmasını sağlar. RULES=x ile iç çerçeveleri kontrol edebilirsiniz. x yerine NONE yazarak bütün iç çerçeveleri kaldırabileceğiniz gibi, GROUPS yazarak sadece başlık ve gövde grupları arasına, COLS yazarak sadece sütunların arasında, ROWS yazarak sadece satırların arasına çerçevere koyabilirsiniz. Bir tablonun hücreleri arasındaki mesafe CELLSPACING=x olarak verilebilir. burada x yerine pixel cinsinden mesafe ölçüsünü yazacaksınız. Hücrelerin içindeki yazı veya grafik gibi unsurların hücrenin iç çizgisine ne kadar yaklaşacağı, ya da başka bir deyişle, hücre içi marj, CELLPADDING=x ile verilebilir. yine, x yerine, pixel olarak arzu ettiğiniz ölçüyü verebilirsiniz.
Diğer tablo kontrol araçları: HTML 4 ile, tablolara, bilgisayarda görme özürlüler için ekrandaki unsurları okuyarak sese çeviren program varsa, tablonun yatay ve dikey unsur başlıklarını seslendirmeye yarayan AXIS ve AXES etiketlerinden tutun, sütunları veya satırları gruplayama, her bir gruba diğerinden farklı özellikler vermeye yarayan yeni yeni özellikler kazandırılmış bulunuyor. Bu özellikleri Başvuru bölümünde okuyarak ve ayrıntılarını uygulayarak bulabilirsiniz.
Şimdi tablodan sayfaya şekil kazandırma unsuru olarak nasıl yararlanacağımıza dönelim.
İskelet Malzemesi Olarak Tablo
Önce bu sayfaya bir bakın ve bu sayfanın temel ögesinin ne olduğunu anlamaya çalışın:
reh031.tif (veya reh031bw.tif)
Tahmin ettiğiniz gibi, sayfanın temeli, bir tablodan ibaret.
Tablodan sayfanızın iskeleti olarak yararlanmak istediğiniz zaman, kurguya, en içerden başlamanız yararlı olur: Boş bir kağıda yan yana gelecek kutuları çizin; bu kutuların hepsi aynı sırada ve aynı sütunda olması gerekmez; tersine, sayfanın temeli olan kutuların mümkün olduğunda “kaybolması” için bazı tablo hücrelerinin sağlarında, sollarında, altlarında ve üstlerindeki hücrelerle birleşmesi gerekir. Bunu yapabilmek için tablonun temel kuralını hatırlayarak işe başlayalım:
TABLE etiketi ve ilgili yüklemlerinden sonra:
Önce tablonun birinci sırasını başlatın: <TR>
Sonra bu satıra kaç hücre koyacaksanız o kadar hücre koyun. Diyelim ki üç hücre koyacağız: <TD> </TD><TD> </TD><TD> </TD>. (Burada “ ” şeklinde gösterdiğimiz bir harflik aralık, hücrenin içine hiç bir şey konmadan da tarayıcı tarafından görülmesini sağlamak içindir. Bazı tarayıcılar içinde hiç bir şey olmayan hücreleri görmezler! sonra bunları silip, yerlerine hücrenin asıl malzemesini koyacağız. Bunu silmeyi unutsanız bile, tablonuza zarar vermeyecektir.) Sonra satırı kapatın: </TR>
İkinci sırada, diyelim ki iki hücre olacak. Birinci ve ikinci hücreler birleşecek; üçüncü hücre yerinde duracak. Sırayı başlatalım: <TR>. Birleşik birinci ve ikinci hücreleri açalım: <TD COLSPAN=2> </TD>. Üçüncü hücreyi koyalım: <TD> </TD>. Ve bu sırayı da kapatalım: </TR>
Diyelim ki üçüncü sıranın birinci hücresi ile dördüncü sıranın birinci hücresini birleştireceğiz. İkinci ve üçüncü hücreler ayrı ayrı kalacaklar:
<TR><TD ROWSPAN=2> </TD><TD> </TD><TD> </TD></TR>.
Üçüncü ve son sıranın birinci hücresini, bir üstündeki hücre aldığına göre, bu sıraya kaç hücre koymamız gerek? Evet, bu sıraya 2 hücre koyacağız. Ama istiyoruz ki bu iki hücre de birbiriyle birleşsin: <TR><TD COLSPAN=2></TD></TR>
Bu kadar! Şimdi bu dosyayı saklayalım ve tarayıcıda bir bakalım. Bu arada daha sonra kullanım kolaylığı için aralıkların yerine hücrelerin adını yazabiliriz. Tabloyla ilgili HTML kodlarımız toplu olarak şöyle:
<table border="1" width="75%">
<tr>
<td>Kutu 1</td>
<td>Kutu 2</td>
<td>Kutu 3</td>
</tr>
<tr>
<td colspan="2">Kutu 4</td>
<td>Kutu 5</td>
</tr>
<tr>
<td rowspan="2">Kutu 6</td>
<td>Kutu 7</td>
<td>Kutu 8</td>
</tr>
<tr>
<td colspan="2">Kutu 9</td>
</tr>
</table>
Bu kodun oluşturduğu içi boş tablo ise şöyle görünüyor:
reh034.tif
Şimdi burada ilkemizi bir kere daha tekrarlayalım: Tablo, içindeki satır ve sütunların kesişmesi demek olan hücrelerden oluşur. Hücreleri yukarıdan aşağıya, soldan sağa doğru birleştirebilirsiniz. Bir tablonun doğru oluşması için, birleştirdiğiniz ve birleştirmediğiniz bütün hücrelerin sayısının, tabloda olması gereken hücre sayısını tutması gerek. Tutmazsa ne olur? Tabloda kullanılabilecek bir hücreden mahrum olursunuz! Tabiatıyla, dünyaya hiç bir şey olmaz!
Peki, bu tablocuk, bizim sayfamıza nasıl iskelet olacak? İçi doldurularak! Bu hücreleri, bir gazete veya dergi sayfasının sütunları gibi düşünün. Kimi kutuya grafik unsur koyacağız; kimine metin. Hatta, bir tablonun bir hücresine, ikinci bir tablo bile konabilir! Birinci tabloyu sayfanızın ana iskeleti olarak düşünürseniz, bu iskeletin bir yerinde, içine çeşitli verileri koyduğunuz bir tablo bulunabilir.
Şimdi, küçük tablomuzu renklendirerek işe başlayalım:
Kutu 1’i oluşturan TD’nin zemin rengini bir tür yeşile çevirin:
<td bgcolor="#CC9999>Kutu 1</td>
Aynı şekilde, Kutu 2’yi, #FFCC99; Kutu 3’ü #CCCCCC; Kutu 4’ü #FF9966 yapın. Diğer kutulara da kendiniz renk verin. Bu arada ilk liste örneğimizi hatırlıyor musunuz?
////////////////////////////NOT///////////////////
Renk Şifresini Çözdünüz mü?
Web tarayıcılar renk komutunu, ya İngilizce kelime olarak ya da kod olarak kabul ederler. Bu karışık gibi görünün renk kodu, aslında, 16 tabancı sayı sistemiyle, yani Hexadecimal sistemle (Sayı sistemini 1’den 10’a kadar ondalık sistem olarak değil, 1’den 16’ya kadar 16’lık bir sistem olarak; 0’dan sonraki altı sayıyı da A, B, C, D, E, F olarak ifade ettiğimizi düşünün. Yani “11” yerine “1A” yazacaksınız. Tabiî, bu sistemde bir rakamı yazmak için iki basamağa ihtiyacınız var) Kırmızı, Yeşil ve Mavi renklerin ifadesinden ibarettir. Bilgisayar ekranı, bir katod tüpü olduğuna göre, renk sistemi, tıpkı televizyon ekranları gibi RGB (Kırmızı-YeşilMavi) renklerin üstüste düşürülerek diğer renklerin elde edilmesine dayanır. Altı haneli renk kodu, bilgisayar ekranına arzu ettiğimiz rengin kırmızı, yeşil ve mavi renklerin ne oranda karıştırılarak elde edileceğini söylemektedir. İki haneli renk oranları ise bilgisayara, “00” ise o renkten yüzde sıfır oranında, “FF” ise yüzde 100 oranında karıştırılmasını söylüyor. Bilgisayar ve televizyon ekranında beyaz renk, her üç rengin de yüzde yüz oranında olması halinde, siyah ise her üç rengin de yüzde sıfır oranında olmasıyla sağlandığına göre #000000 Siyah, #FFFFFF ise Beyaz anlamına geliyor. Web tarayıcıları her rengi göstermezler; her türlü tasarım projesinde olduğu gibi, Web tasarımında da renk en önemli yapı taşlarından biridir. Bunun nedenle grafik tasarımcılar için renklerin etkileri ve kullanma kuralları ile ilgili kaynaklara bakmanız yerinde olur. Web’de güvenli renk konusunda iyi bir kaynak,
http://www.slip.net/~kiss/software/html_colors adresinde bulunabilir.
//////////////////////////////////////////////////
Kutularımızı renklendirdiğimize göre, şimdi de içine koyacağımız yazıların bloklanma durumlarını farklı hale getirelim. Soldaki kutulara koyacağımız yazılar sola, ortadaki kutularda ortaya, sağdaki kutularda sağa bloklarsak, görsel etki açısından kutularımız bir ölçüde gazete-dergi sütunu görünümü kazanabilir. Ama tabiî bu, tamamen sizin kendi tasarım zevkinize bağlı. Kutuların içeriğini istediğiniz tarafa bloklayabilirsiniz. Önemli olan bunu bir kere denemiş olmak.
Bu noktada, kısaca tartışmamız gereken bir görsel unsur, hücrelerin ve tablonun tümünün çerçeveleri olup-olmamasıdır. Kimi tasarımcı bu çizgilerin tablo ile elde edilmek istenen etkiyi yok ettiğini düşünür; kimi, gerektiği yerde sütunların arasındaki çizgi gibi, tablonun bazı çerçevelerini korumak gerektiğini. Bu da, tasarımcı olarak tamamen sizin sanat anlayışınıza ve zevkinize kalmış bir şey. Çerçeveleri kaldırmak istiyorsanız, TABLE etiketinin BORDER= yüklemini 0 yapacaksınız. Peki, diğer çizgiler nasıl kontrol ediliyordu?
Kutulara yazı girmek kolay. TD etiketi ve yüklemleri kendisine vereceğiniz yazıyı bekliyor. Fakat Internet’i ilginç hale getiren, içeriğin sadece yazı olmaktan kurtulması oldu. Bu nedenle biz de kutularımıza, desen, ActiveX, Java, hareketli GIF dosyası, JPEG fotoğraf, ya da süslü harflerle yazılmış ve grafik dosyası haline getirilmiş başlıklar koyabiliriz. Bunların örneklerini çeşitli yerlerde bulabilirsiniz. Byte-Türkiye’nin CD Magazin’leri bunların örnekleri ile dolu.
/////////////////////////////////NOT//////////////////////
Elinize geçeni sayfanıza koyabilir misiniz?
Hayır!. Hem de kocaman bir hayır! Sözünü ettiğimiz bütün multimedya (çoklu ortam) unsurları, sanat eseridir; ve her sanat eserinin bir telif hakkı sahibi vardır. Telif hakkı size ait olmayan veya sahibi tarafından size kullanma hakkı verilmemiş bir sanat eserini yayınlayamazsınız. Bir sanat eserini Web sayfanıza koymak ve kamuoyunun ulaşabileceği Internet gibi herkese açık bir ortama yerleştirmek, yasaların “yayın” saydığı bir fiildir. İzinsiz sanat eseri yayınlamak ise, Türk Ceza Yasası’na göre ağır hapis cezasıyla cezalandırılan bir suçtur. Ceza yasalarını bir kenara bırakalım. Bu eserlere vücut veren, göznuru döken kişilerin, iznini almadan eserini yayınlamakla, bu kişiyi en tabiî haklarından birinden, mülkiyet hakkından mahrum etmiş olmuyor musunuz? Ve unutmayın; hoşunuza giden bir sanat eserinin yayın hakkını sahibinden satın alabilirsiniz. Bu çoğu zaman hiç de beklemediğiniz kadar kolay ve ucuz olabilir!
/////////////////////////////////////////////////////
Tablonuza çoklu-ortam ürünleri koymakla yazı koymak arasında kodlama bakımından biraz fark var. <TD>..</TD> etiketlerinin arasına istediğinizi yazın; tabloda denk geldiği yerde bu yazıyı görebilirsiniz. Ama iş grafik unsurlara gelince tarayıcıya bu dosyanın nerede olduğunu söylemeniz gerekir. Tablonun hücrelerine koyduğunuz yazı, HTML dosyasının bir parçası haline geldiği halde, diğer unsurlar, HTML’in içine girmezler; sadece nerede bulunduklarına dair bilgi, yani URL adresi, HTML’in içine yazılır ve HTML ile birlikte, Internet Server programı tarafından, ziyaretçinin bilgisayarına aktarılır. Bir tablonun hücrelerinde yer alan gönderme (referans) bilgisine göre ziyaretçiye aktaracağınız dosya, tarayıcı program tarafından tanınan bir biçimde olmalıdır. Tarayıcılar, sabit grafik alanında JPG, GIF, PNG; hareketli grafik alanında GIF, ses alanında AU, AIFF, RA, Video alanında AVI, MOV, gibi dosyaları yardımcı programlar olmaksızın, tanıyıp, ya kendi başlarına ya da gerekli plug-in ek parçaları kullanarak bilgisayar ekranında canlandırabiliyor ve gerekli sesi ses kartı varsa, bağlı hoparlorlerde elde edebiliyorlar. Tabloların hücrelerine, CGI programları (Tarayıcıdan gelecek komutla, Web Server’da çalıştırılan programlar), veritabanı uygulamaları, ActiveX ve Java programları da koyabilirsiniz.
Burada, son sakladığımız tablonun HTML dosyasını açın; oluşturduğumuz tabloya bazı çoklu-ortam unsurları koyacağız. Bu alıştırma için, benzeri türde arzu ettiğiniz unsurları kullanabilirsiniz.
Şimdi; önce tablomuzu görsel olarak biraz daha etkili hale getirelim. Bunun için tabloyu tanımladığımız etikette, çerçeve çizgilerini kaldılarım, hücreler arasındaki boşluğu arttıralım ve hücre içlerine marj koyalım:
<table border=0 cellspacing=5 cellpadding=5 width=600">
Bu noktada, tasarımcıların tablo etiketini sayfa iskeleti için kullanırken çerçevere olmamasında anlaştıklarını, ama hücreler arasında boşluk bırakıp bırakmamakta anlaşamadıklarını belirtmemiz gerekir. Bu, herhangi bir grafik tasarımda olduğu gibi, sadece bir zevk meselesi değil. Grafik tasarım bir bilim dalıdır ve temel ilkeleri vardır. Bu ilkelerden biri, bir tasarımda ögelerin birbirine karışmamasıdır. Bu nedenle bir kutuya koyduğunuz grafik ile yanındaki kutuda yer alacak bir diğer unsurun birbirine "dokunmaması" gerekir. Fakat farklı zemin renklerine sahip hücrelerin tümü birden, sayfanın zemini gibi ele alınabilir ve içlerindeki unsurlar izleyicinin dikkatini çekmek için birbirleriyle yarışmadıkları sürece aralarında boşluk bırakılmayabilir. Bu nedenle, tablomuzu tanımladığınız kodu önce “cellpadding=5”, sonra “cellpadding=0” olarak deneyin; en beğendiğinizde kalın.
Sonra birinci kutuyu oluşturan TD etiketinin yerine, bu etiketin oluşturduğu kutunun yeni özelliklerini belirleyecek ve içeriğini tayin edecek şekilde, şunları yazın: (Burada dosya adı olarak istediğiniz, ealinizde olan bir dosya adı verebilirsiniz; örnek dosya, ekrana DÜŞÜN yazan anime bir bir daktilo tuşunu gösteren GIF dosyasıdır.)
<td align="right" bgcolor="#C0C0C0"><img src="dusani.gif" width="250" height="180"></td>
İkinci kutuya ise başlığımızı koyacağız. Bunun için, bir grafik programında “Web Tasarımında Temel İlkeler” yazın, basit bir gölge verin ve dosyanızı GIF olarak kaydedin. Bizim örneğimizde bu dosyanın adı “tab06tit.gif”:
<td align="right" colspan=2 bgcolor="#CC9999"><img src="tab06tit.gif" width="346" height="180"></td>
İkinci kutuya yaptığımız işlemi farkettiniz mi? Ku kutu artık iki hücreyi kapsıyor; dolayısıyla üçüncü kutuya gerek kalmadı. Bu satırı kapatabiliriz: </tr>.
Şimdi sıra ikinci satıra geldi. İlk yazdığımız şekliyle, ikinci satırın birinci ve ikinci hücresi birleşmiş bulunuyorlar. Bu kutu, oluşturmakta olduğumuz Web alanının genel bir “İçindekiler” listesini tutabilir; yani buraya ziyaretçinin bizim sayfalarımızda neler bulacağını gösteren listemizi koyabiliriz. Diyelim ki, alanımızda şu bölümler bulanacak: Grafik İlkeler, İçerikle İlgili İlkeler, Davranış Kuralları. Şimdi bunu ikinci satırın birinci kutusuna girecek şekilde kodlayalım:
<td align= left bgcolor=”#FFCC99” colspan="2"><p><b><font size=”+3”>Web Tasarımında Gözetilecek İlkeler: </font></b></p>Grafikle İlgili İlkeler,<br>İçerikle İlgili İlkeler<br>Davranış Kuralları</td>
Dikkat ettiyseniz, burada listenin başlığını “<p>...</p>” etiketine aldığımız halde, listenin maddelerini <BR> ile ayırdık. Bunun nedeni, maddelerimizin arasında fazla geniş boşluklar koymamak içindir. Listenin başlığında font büyüklüğünü değişik bir ifadeyle tayin ettik. “+3” ifadesiyle, tarayıcıya, “Bu fontu normalden üç kere daha büyük göster!” demiş oluyoruz.
Eski sırasıyla beşinci kutuya, bizim ilkelerimizi gözeten, tasarımı başarılı, içeriği mükemmel Web alanlarından örnekler koymaya ne dersiniz? Peki, o zaman bu kutuyu da şöyle yeniden yazabiliriz:
<td align="center" bgcolor="”#FFFFCC”"><b><font size="+2" color="navy">Güzel Web Örnekleri</font></b><p><font size="+1">Web Tasarımcıları Derneği,<br>Tasarımcı Gençler Birliği<br>Gönüllü Web Ustaları</font></td>
Son iki satıra ve içindeki kutulara bu sayfada ihtiyacımız yok. Onun için, bu iki satırı ve hücrelerini oluşturan kodları yazmıyoruz ve kodumuzun tümü, yaptığımız bir iki ek değişikle, şöyle oluyor:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Tablonun Esaslari</title>
<meta name="Microsoft Theme" content="none">
</head>
<body topmargin="0" leftmargin="0">
<font face="Arial">
<table border="0" cellspacing="5" cellpadding="10" width="600">
<tr>
<td align="right" bgcolor="#C0C0C0"><img src="dusani.gif" width="250" height="180"></td>
<td align="right" colspan="2" bgcolor="#CC9999"><img src="tab06tit.gif" width="346"
height="180"></td>
</tr>
<tr>
<td align= left bgcolor=”#FFCC99” colspan="2"><p><b><font size=”+3”>Web Tasarımında Gözetilecek İlkeler: </font></b></p>Grafikle İlgili İlkeler,<br>İçerikle İlgili İlkeler<br>Davranış Kuralları</td>
<td align="center" bgcolor="”#FFFFCC”"><b><font size="+2" color="navy">Güzel Web Örnekleri</font></b><p><font size="+1">Web Tasarımcıları Derneği,<br>Tasarımcı Gençler Birliği<br>Gönüllü Web UstalarıGönüllü<br>Web Ustaları</font></td>
</tr>
</table>
</font>
</body>
</html>
Bu dosyayı, öncekinden farklı bir isimle kaydedin ve en beğendiğiniz tarayıcıda sınayın. Karşınıza şuna benzer bir görünüm çıkmış olmalı:
reh036.tif
Şimdi burada büyükçe bir parantez açalım ve sayfamızda olmayan bir şeyden söz edelim:
Sayfamızda henüz “Web’i Web yapan asıl unsur yok! Web’e bugünkü kimliğini veren unsurun, metinlerin, birbiri ile ilintilendirilmesi olduğunu hatırlıyorsunuz. Yani, bir kelimeye, cümleye hatta harfe veya rakama, bir başka metnin, paragrafın, harfin, sayfanın, grafiğin, hatta tamamen başka bir Web alanının adresini kodlayabilirsiniz. Internet’te bir şeyleri tıklayarak bir yerlere gitmemizi sağlayan bu kodlardır. Oysa bizim ana sayfamızda bir taraftan kendi alanızda, diğer taraftan başkalarının alanlarında olan bazı unsurları sıralayan iki liste var; ama bu listeler, bizim ziyaretçilerimizi hiç bir yere götürmüyorlar. Oysa ziyaretçilerimiz güzel Web örneklerinden birini görmek veya bizim Web ilkeleri ile verdiğimiz geniş bilgiyi okumak isteyebilirler. Bu durumda ne yapacaklar?
Bu sorunun cevabı bizi HTML’in adındaki birinci kelimeye “hyper” sıfatına götürüyor. Bir sayfanın gerçekten HTML ve oluşturduğu alanın gerçekten Web (ağ) olabilmesi için, unsurları ile başka unsurlar arasında link (ilinti, bağlantı) kurulması gerekli. Siz, bu ilintinin adresini belirtmekle görevlisiniz; kullanıcının bilgisayarındaki tarayıcı ise bu link’i izleyerek, sözkonusu içeriği kullanıcıya göstermek yükümlü. Tabiî, link’in işaret ettiği içerik unsuru (sayfa, grafik, ses, film, Internet alanı) oluşturulmuş ve Internet’e yüklenmiş olmalı. Sizin sabit diskinizde duran bir unsura link verirseniz, sabit diskiniz Internet’e açık değilse, kullanıcı bu malzemeye nasıl ulaşacak?
Link bilgisinin nasıl verileceğini, başka bir deyişle, Anchor (<A>..</A>) (bağlantı noktası) etiketinin nasıl yazılacağını, Çerçeve (Frame) etiketini incelerken ele alalım. Çünkü link’siz tablo olur da, Çerçeve olamaz!
Çerçeveler
HTML’in yaygın olarak kullanılmaya başladığında içinde olmayan bir unsur çerçeve idi. Daha sonraki HTML standartlarında, çerçeve teknolojisi önerildiğinde, HTML’i ilk günlerinden beri kullananlar, sanki sözleşmiş gibi çerçeveden nefret ettiler. O kadar ki, hem Netscape, hem Internet Explorer’ı tasarlayan program mühendisleri, programlarına “çerçeveyi kapatma kolaylığı” bile getirdiler. Bugün bile bir çok Internet alanında, ziyaretçilere sayfaların çerçeveli ve çerçevesiz türleri öneriliyor. Çerçeve düşmanlığı, mantıksız olduğu kadar, teknik açıdan haklı! Internet’i salt bilgi (ya da düz yazı) alışverişi için kullanmak isteyenler, Çerçevelerin getirdiği ek indirme ve sayfa çizme yükü ile çerçevelerin ekran alanından “çaldığı” yerden kurtulmak stiyorlar. Ama Web sayfa tasarımcısı olarak bizleri düz yazıdan ibaret sayfadan kurtaran, tablodan bile güçlü sayfa iskeleti unsuru, çerçevedir.
Önce çerçevenin aldığı alan sorununa bakalım. Bugün, ortalama bilgisayar kullanıcısının ekranı, çaprazlama 15 ile 17 inç arasında değişmektedir. 17, 21 hatta 25 inçlik ekranların fiyatlarındaki hızlı düşüşe rağmen, ortalama ev bilgisayarının ekranını 15 inç olarak varsaymak zorundayız. Bu size eni 640 yüksekliği 480 pixel olan bir alan bırakıyor. Web tarayıcı programların ekranın sağ ve solunda 5 ile 15 pixel, üstünde 25 ile 150 pixel, altında yaklaşık 25 pixel’i zaten kendi penceresi için aldığını düşünürsek, kullanıcıya temiz Web alanı olarak en iyi ihtimalle 630’a 430, en kötü ihtimalle 610’a 305 pixellik bir pencere kalıyor. Bu alana, 5’er pixellik çizgileri olan dört çerçeve yerleştirdiğiniz zaman, aralardaki üç çizgi 15 pixellik bir alanı götürecektir.
Netscape 3 ile “çerçevesiz çerçeve” yönteminin gelmesi, çerçeveye karşı olan grubu biraz sakinleştirdi. Şimdi artık hem çerçevenin getirdiği imkanlardan yararlanabiliriz, hem de çerçevenin çizgilerinin aldığı yeri kazanmış olabiliriz. Çerçeve, bu anlamda, bilginin sistemli sunuluş aracı olmaktan çıkabilir, sayfa tasarım unsuru olabilir. Tablodan farklı olarak çerçeve teknolojisi, bize sayfamızın bir tarafı sabit kalırken, diğer tarafının içeriğini, kullanıcının tercihine göre değiştirme imkanı verir.
Çerçevenin de, tablo gibi, yapısal unsurları vardır: Sütunlar ve satırlar. Tablonun sütun ve satırları ile vücud bulan hücreleri ancak yanlarındaki hücreleri de kapsatarak genişletebilirken, çerçevelerin enini ve boyunu, kullanıcının ekran alanı ile sınırlanacak şekilde ayarlayabiliriz. Söz gelimi bir tabloyu, ekranı en dar kullanıcıyı gözönünde tutarak toplam 600 pixel yapabiliriz; ekranı 800 veya 1200 pixel olan kullanıcı için bu yarısı boş bir Web sayfası anlamına gelir. Oysa çerçeve teknolojisi sayesinde, sayfalarımızı tüm kullanıcıların ekran alanlarına uygun yapma imkanımız vardır.
Çerçevenin Unsurları: Sütunlar ve Sıralar
Çerçeveli bir HTML sayfası oluşturmak, aslında, çerçeve sayısı kadar HTML sayfası oluşturmak demektir. Tablodan çerçeveyi ayıran en önemli unsur bu olsa gerek: Çerçeveli bir HTML sayfası saytınız ve, diyelim ki, dosyasını da “cerceve1.htm” adıyla kaydettiniz. Bu sayfa tarayıcıdan sadece hata mesajı alacaktır! Çünkü, çerçeveli sayfanıza, biraz sonra öğreneceğimiz usulle, koyduğunuz çerçevelerin “çağırdığı” sayfaları yapmadınız!
Bu karmaşık ifadeyi, uygulayarak, yakından inceleyelim:
Yine en beğendiğiniz düz yazı programını açın, en üste, artık klasik hale gelen kodları yazın:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Çerçeve Teknolojisi</title>
</head>
Çerçeve oluşturma kodu olan <frameset cols="">...</frameset> kodlarını girin. İçini birazdan dolduracağız. Bu kodla, tarayıcıya, gerçekte “Şimdi şu kadar ve şu ölçülerde çerçeve aç ve içlerine şu HTML sayfalarını koy!” demiş oluyorsunuz. Burada çerçeve sayısını “cols=” ifadesinden sonra vereceğiz ve buraya sayfamızda kaç çerçeve olsun istiyorsak o kadar ölçü yazacağız. Yani bir taşla iki kuş vuruyoruz: Ölçünü vererek, çerçeve sayısını söylemiş oluyoruz. Şimdi, elimizi alıştırmak için enleri birbirine eşit dört dikey çerçeve oluşturalım ve içlerine farklı zemin renkleri verelim, ve çerçeve sayısını yazalım. Bu dört çerçeveyi “çağıran” ifade, şöyle olacak:
<frameset cols="25%,25%,25%,25%">
Şimdi burada “col” ifadesiyle dikey çerçeve oluşturuyoruz. Birazdan “rows” ifadesiyle yatay çerçeve de oluşturacağız. Tarayıcıya herbir çerçevenin eninin kendi penceresinin dörtte biri kadar olması talimatını veriyoruz; virgül ile birbirinden ayrılmış dört ölçü yazmakla, tarayıcıya dört çerçeve oluşturmasını bildiriyoruz. Peki, bu çerçevelere ne konulacak?
Bunu, FRAMESET etiketinin içine yazacağımız kaynak gösteren satırlarla bildireceğiz; kaynaklarımız bu çerçevelerde yer alacak müstakil HTML sayfalarına işaret edecek.
Şimdi bunları yazalım. </frame> kodunun önüne şunları yazın:
<frame name="col" src="cer01.htm" marginheight="5" marginwidth="5" noresize scrolling="no">
<frame name="co2" src="cer02.htm" marginheight="5" marginwidth="5" noresize scrolling="no">
<frame name="co3" src="cer03.htm" marginheight="5" marginwidth="5" noresize scrolling="no">
<frame name="co4" src="cer04.htm" marginheight="5" marginwidth="5" noresize scrolling="no">
HTML’in klasik kapanış kodlarını da girelim:
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>
Burada <noframes>..</noframes> kodu dikkatinizi çekmiş olmalı. Bu, başta belirttiğimiz, çerçeveden hoşlanmayan Internet meraklıları veya çerçeve teknolojisini beceremeyen tarayıcı kullananlar için, çerçevelerin içine yazdığınız unsurları buraya yazarak, çerçeveden hoşlanmayanların Web sayfanızdan eli boş çevirmemeyi sğlayan güvenlik önlemi. Şimdilik aynen yazın. Sonra isterseniz içini doldurursunuz.
Şimdi bu HTML’i “cerceve1.htm” adıyla saklayın. Tarayıcınıza bu sayfayı açtırın. Sonuç, herhalde şöyle bir mesaj olsa gerek:
reh037.tif
Tarayıcınız açılınca, karşınıza da şöyle bir tablo çıkacaktır:
reh038.tif
Neden? Çerçevelerinizin çağırdığı HTML sayfalarını yapmadınız da onun için! Şimdi, düz yazı programınızda, şu sayfayı oluşturun:
<html>
<head>
<title>Çerçeve 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<body bgcolor="#C0C0C0">
<p align="center"><big><big><big><strong>Çerçeve: 1</strong></big></big></big></p>
</body>
</html>
Bu sayfayı, “cer01.htm” adıyla saklayın. Başlıktaki 1’i 2; zemin rengini "#00FFFF"; paragraftaki “Çerçeve: 1” yazısını “Çerçeve: 2” yaparak ve dosya adını “cer02.htm” diye değiştirerek sayfayı yeniden kaydedin. Aynı değişiklikleri 3 ve 4’ncü sayfa için de yapın. Üçüncü sayfa için zemin rengini "#FF0000," dördüncü sayfanın zemin rengini ise "#00FF00" yapabilirsiniz. Bu dört dosyayı, “cerceve1.htm” dosyasının bulunduğu klasöre koymayı unutmayın.
Tarayıcınızı şimdi açın. Karşınıza şu görünümün çıkması gerek:
reh039.tif
Hızımızı almışken; “cerceve1.htm” dosyasını düz yazı programında açın, FRAMESET etiketinin önündeki “cols” ifadesini “rows” olarak değiştirin. Başka hiç bir şeyi değiştirmeden, dosyayı, “cerceve2.htm” adıyla kaydedin ve oluşturduğunuz HTML dosyasını tarayıcınızda açıp bakın. Biraz önceki dik sütunlar halindeki çerçeveleriniz, yatay hale geldi mi?
reh040.tif
Şimdi, FRAMESET sayfamıza, iki dikey, iki de yatay çerçeve koyalım. Yine “cerceve1.htm” dosyasını düz yazı programında açın, FRAMESET etiketinin önündeki “cols” ifadesini (cols="50%,50%"), “rows” ifadesini ise (rows="50%,50%") olarak değiştirin; başka hiç bir şeye dokunmayın ve dosyanızı “cerceve3.htm” adıyla saklayın. Şimdi bu sayfayı tarayıcıda açıp, bakalım:
reh041.tif
Harika! Şimdi eni, boyu birbirine eşit dört çerçevemiz oldu. Alıştırma olarak, “cerceve1.htm”, “cerceve2.htm” ve “cerceve3.htm” deki sütun ve sıra yüzdelerini değiştirin; yüzdeleri kaldırıp, yerlerine pixel cinsinden mutlak ölçüler verin. İşte size bir ev ödevi:
Sütun veya sıra ölçüsünü, örneğin (cols="100,*") veya (rows="100,*") yaparsanız, nasıl bir sonuç alırsınız. İpucu: Tabloda olmayan ama çerçeve teknolojisinde, sayfamızı ve sayfamızın bölümleri olan çerçevelerimizi kullanıcının tarayıcı ekranının tümünü kapsayacak kadar genişletebiliriz, demiştik. Bir ipucu daha: Asterisk, dosya adında “ne olursa olsun” demek olduğuna göre, acaba burada “Birinci sütun (veya sıra) 100 pixel olsun, ikincisi ne olursa olsun!” anlamına mı geliyor?
Eşit Sayıda Olmayan Sütun ve Sıralar
Buraya kadar ya eşit sayıda sütun ve sıra, ya da eşit sayıda sütun veya sıra içeren çerçeveli sayfa yapmayı ele almış olduk. Açaba, sütun ve sıra sayıları eşit olmayabilir mi? Yani, tabloların hücrelerini alt ve ya yandaki hücrelerle birleştirdiğimiz gibi, çerçeveleri de yanlarında ve altlarındaki çerçevelerle birleştirebilir miyiz? Hayır, bunu yapamayız. Çerçeveleri birbirleriyle birleştiremeyiz, ama aynı görüntüyü elde edebiliriz. Sadece kodlamamız biraz farklı olur. Şimdi, şu örnekteki biçimde çerçeveler elde edelim:
cerorn.TIF
Dikkat etti iseniz, HTML’de çerçeveyi oluşturan FRAMESET komutunda ne kadar çerçeve alanı ayırırsanız ayırın, aynı etiketin içinde bu çerçevelerin kaynağını “<FRAME SRC="...." .....> ifadesiyle belirtmezseniz, tarayıcı, FRAMESET komutunda işaret edilen sıranın kaynağından önce yeni bir FRAMESET komutu ile bu kez sütun oluşturur ve onun kaynaklarını bildirirseniz, birinci FRAMESET’in diğer sıralarından önce, ikinci FRAMESET’in sütunlarını çizecektir. İşte eşit olmayan sayıda sütun ve sıra içeren çerçeveli sayfaları bu durumdan yararlanarak yazabilirsiniz. Önce, yukarıdaki şemada gösterilen birinci örneği yapalım. Birinci sütun tek sıralı, ikinci sütun iki sıralı bir çerçeve sayfası için kodumuz şöyle olmalıdır:
<FRAMESET COLS="25%,75%">
<FRAME SRC="cer01.htm" NORESIZE SCROLLING="auto">
<FRAMESET ROWS="20%,80%">
<FRAME SRC="cer02.htm" NORESIZE SCROLLING="auto">
<FRAME SRC="cer03.htm" NORESIZE SCROLLING="auto">
</FRAMESET>
Burada, önce iki sütunluk bir çerçeve alanı açıyoruz, birinci sütun tek sıralı olacağı için sadece bir kaynak gösteriyoruz; ikinci sütunu iki sıralı yapacağımız için önce bu sütuna sıralar oluşkuruyoruz; ve bu sıraların kaynaklarını gösteriyoruz. Bu kodun oluşturduğu sayfa, şöyle görünüyor:
reh042.tif
Örnekler şemamızdaki ikinci sayfada ise yanyana iki sütunun altında tek bir sıra var. Bunu gerçekleştirmek için, tarayıcıya iki ayrı FRAMESET komutu vereceğiz. İlk komut sayfada iki sıralı bir çerçeve oluşturacak; bu çerçevelerin kaynaklarını belirtemeye geçmeden hemen ayrı bir FRAMESET komutu ile iki sütun oluşturacağız. Bu sütunların içeğinin kaynaklarını belirttikten sonra, sütunları açan FRAMESET’i kapatacağız, alttaki sıranın kaynağını belirteceğiz. Kodumuz şöyle olacak:
<FRAMESET ROWS="50%,50%" frameborder="NO">
<FRAMESET COLS="50%,50%">
<FRAME SRC="cer01.htm" NAME="cer1" frameborder="NO" NORESIZE SCROLLING="NO">
<FRAME SRC="cer02.htm" NAME="cer2" frameborder="NO" NORESIZE SCROLLING="NO">
</FRAMESET>
<FRAME SRC="cer03.htm" NAME="cer3" frameborder="NO" NORESIZE SCROLLING="NO">
</FRAMESET>
Bu kodun yaptığı sayfa ise tarayıcıda şöyle görünecektir:
reh043.tif
Üstte bir, ortada, iki altta çerçeveden oluşan sayfaya gelince: Burada, deminki sayfanın mantığı ile, sıraları oluşturduktan ve birinci sıranın kaynagını verdikten sonra hemen ikinci bir FRAMESET komutu ile iki sütun oluşturacağız ve onların kaynaklarını bildireceğiz. Sütunları açan FRAMESET’i kapattıktan sonra alttaki sıranın kaynağını verelim ve birinci FRAMESET komutunu kapatalım. Kodumuz şöyle olacaktır:
<FRAMESET ROWS="20%,60%,20%">
<FRAME SRC="cer01.htm" NORESIZE SCROLLING="no" NAME="cer01" MARGINWIDTH="0" MARGINHEIGHT="0">
<FRAMESET COLS="20%,80%">
<FRAME SRC="cer02.htm" NORESIZE SCROLLING="auto" NAME="cer02" MARGINWIDTH="0" MARGINHEIGHT="0">
<FRAME SRC="cer03.htm" NORESIZE SCROLLING="auto" NAME="cer03" MARGINWIDTH="0" MARGINHEIGHT="0">
</FRAMESET>
<FRAME SRC="cer04.htm" NORESIZE SCROLLING="auto" NAME="cer04" MARGINWIDTH="0" MARGINHEIGHT="0">
</FRAMESET>
Bu kodun oluşturduğu sayfa ise tarayıcıda şöyle görünecektir:
reh044.tif
Bu bölümü kapatırken, ilkemizi özetleyelim: Önce bir FRAMESET komutu ile en üstte en soldaki unsur yanında başka sütun olmayan bir sütun ise sütunları; değilse sıraları oluşturun. Bu sütunda diğer sütunda olmayan sıralar varsa, o sıraları oluşturun. İlk oluşturulacak sıra veya sütunların kaynaklarını verin; ikinci ve üçüncü oluşturulacak sıraların kaynaklarını verin. Ve temel ilkeyi unutmayın, “önce açılan etiket sonra kapanır.
Şimdi bir ev ödevi. Şu sayfayı oluşturacak kodu nasıl yazarsınız:
reh045.tif
Bir iki ipucu verelim: Önce sütunları oluştaracaksınız; ama sütun kaynaklarını vermeden, hemen sıraları oluşturacaksınız.
HTML’de Bağlantı’ya Giriş
Bu noktada duralım ve kodun içindeki <A>..</A> etiketini ele alalım. HTML’e hareket kazandıran bu etikettir. HTML etiketleri arasında Anchor (A) etiketinin yanı sıra, <BASE> ve <LINK> etiketleri de, bir noktadan bir diğerine gitmemizi sağlar. HTML sayfada metinlere ve diğer unsurlara bağlantı kazandırabilirsiniz. <A>..</A> etiketiyle metinlere kazandıracağımız bu ilişkinin temel kurallarını burada ele aldıktan sonra, diğer unsurları özellikle “olaylara” bağlantı kazandırma konusu, aşağıda Katmanlar konusunu işlerken göreceğiz.
Metinlere Bağlantı Kazandırmak
Anchor, İngilizce’de gemilerin demirine verilen isimdir. Gemi demirinin, gemiyi bir yere bağlaması gibi, bu etiketle sayfamızdaki bir unsuru, yukarıdaki örnekte “Grafikle İlgili İlkeler” ve diğer iki liste unsurunu, başka bir yere bağlamış oluyoruz.
<A>..</A> etiketine özellik kazandıran yüklemleri şöyle sıralayalabiliriz:
ACCESSKEY=”metin”: Bu yüklemle, bağlantının fare ile tıklamak yerine, klavyede bir veya birden fazla tuşa basarak yapılymasını sağlayabilirsiniz. “Metin” kelimesinin yerine yazacağınız karakterler, klavye kestirmesi olur.
CHARSET=”metin”: Bağlantı sağlanan Web kaynağının, tarayıcıda hangi dil kodlamasıyla gösterileceğini belirler. Bu yüklemi koymazsanız, kullanıcının tarayıcı programı ISO-8859-1 olan ASICII kodunu seçer. (Tarayıcılar açısından Türkçe kodlama ve yorumlama kodu, “charset=windows-1254" şeklindedir.)
COORDS=”X1, Y1, X2, Y2... Xn, Yn”: Bu yüklem, bağlantının metinde değil, bir grafik üzerinde oluşturulması halinde, resmin hangi koordinatları arası tıklanırsa, bağlantının sağlanacağını gösterir. Bu etiket, SHAPE yüklemi ile birlikte kullanılır.
HREF=”url”: URL, (Uniform Recourse Locator) Internet’te adres demektir. Bu adres, kendi sabit diskinizde bir klasör (ve alt-klasörler) içindeki bir dosyanın adı olabileceği gibi, HTTP, FTP veya elektronik posta yoluyla ulaşılabilecek bir Web alanı ve o alanın içindeki bir dosya olabilir. Ulaşılacak dosya, HTML dosyası olabileceği gibi, grafik, ses, video veya herhangi bir başka çoklu-ortam ögesi, program (“.bat,” “.exe” veya “.com”) ya da sıkıştırılmış ZIP dosyası olabilir. Önemli olan önce Web Server programının, sonra da tarayıcıların bu dosyayı ne yapacağını bilmesidir. Normal bir bilgisayar ortamında bulunabilecek bütün dosya türleri Server’lara tanıtıldığına, ve Netscape ve Internet Explorer gibi tarayıcı programlar herhangi bir dosyayı kendileri alıp gösteremezlerse, yardımcı bir program veya plug-in dediğimiz eklerin yardımı ile tanıdıklarına göre, bu noktada fazla sorun olamaz. Tarayıcılar genellikle, bir bağlantı ile kendisine gelen dosyayı ne yapacağını bilemezse, kullanıcıya bu dosyayı yerel sabit diske kaydetmeyi önerirler.
NAME=”metin”: Anchor’a isim vererek, daha sonra bu noktaya atıfta bulunma imkanı kazandırır. Bunu, bir sayfanın kendi içinde, belirli yerleri, örneğin baştarafı, belirlemek için kullanabilirsiniz. Çok uzun bir sayfanın baştarafına <a name="ust"> şeklinde bir “isimlendirilmiş Anchor” noktası koyarsanız ve aşağıda baştarafa dönüşü kolaylaştırmak için şöyle bir bağlantı yapabilirsiniz: <A HREF="ust”>Baştarafa dönmek için burayı tıklayınız</A>
REL=”metin”: Kurulacak ilişkinin niteliğini belirtir. Tarayıcılar, çoğu zaman bu ifadeye bakarak, bağlantı kurulunca ne yapabileceklerini bilirler. Örneğin “metin” yerine “stylesheet” yazarak, tarayıcıya alacağı dosyanın, daha sonra metinleri biçimlendirmekte kullanılacağını söyleyebiliriz.
SHAPE=(RECT/CIRCLE/POLY/DEFAULT): Bu yüklem ve karşısına yazacağınız ifade ile, tarayıcıya bir grafik unsurun üzerine konmuş bağlantı noktasının biçimini tanımlarsınız. Rect şeklin dörtgen, circle daire, poly çok kenarlı ve default ise arayıcının varsayılan bağlantı şekli olduğunu ifade eder. Bu yüklemi COORDS yüklemi ile birlikte kullanırsınız. Bu durumda COORDS’ün önüne yazacağınız “X1, Y1, X2, Y2, Xn, Yn” şeklindeki koordinatların da anlamı farklı olur. SHAPE’i “rect” olarak bildirirseniz, X1 ve Y1 şekin sol üst köşesinin, tarayıcı penceresinin sol üst köşesinden itibaren kaç pixel sağa ve aşağı konulacağını; X2 ve Y2 ise şeklin sağ alt köşesinin koordinatlarını gösterir (Örnek: SHAPE=rect, COORDS=”0,0,9,9”). SHAPE’i “circle” olarak tanımlarsanız, koordinatlar dairenin merkezini ve çapını gösterir (Örnek: SHAPE=circle COORDS=”10,10,5). Çok kenarlı bir şekil tanımlamanız halinde, her bir koordinat diğerine, son koordinat da birinciye bağlanır (Örnek SHAPE=poly COORDS=”10,50,25,20,20,50”). Şeklinde DEFALUT olarak bırakılması ise kullanılmamaktadır.
TARGET=”pencere”: Bu bağlantı sağlandığı zaman alınacak HTML sayfasının nerede kullanıcağını gösterir. FRAMESET etiketi bulunan bir sayfada kullanılması halinde, alınacak sayfanın hangi çerçeveye konulacağını gösterir. Burada “pencere” kelimesinin yerine şu değerler yazılabilir:
“çerçeve adı”: Oluşturulan çerçevelere önceden isim verilmiş ise, o isimler buraya yazılmak suretiyle, alınacak HTML sayfasının hangi çerçeveye yerleştirileceği belirtilebilir. Çerçeve isimleri mutlaka rakam veya harfla başlamalıdır.
_blank: Alınacak sayfa veya unsur için yeni bir tarayıcı penceresi açılır.
_parent: Alınacak unsur, o anda açık sayfayı oluşturmuş bir ana sayfa varsa, onun yerine konulur.
_self: Alınacak sayfa mevcut sayfanın bulunduğu tarayıcı perceresine konulur.
_top: Alınacak sayfa mevcut pencereye en üstten itibaren konulur.
HTML’de Bağlantı Türleri
Bu noktada, mevcut diğer HREF türlerini de belirtelim:
HTTP bağlantıları: Bağlantı, tarayıcının HTTP protokolünü kullanarak ulaşabileceği bir alanda ise, bunun gönderme ifadesi, <A HREF="http://www.bizimweb.com.tr/ogut2.htm" TARGET="ogut">İçerikle İlgili İlkeler</A> şeklinde yazılır. Başka bir Web alanında belirli dosyaya değil de, alanın birinci sayfasına (home page, index page, vs.) bağlantı veriyorsak, bağlantıyı <A HREF="http://www.bizimweb.com.tr/"> olarak bırakmalısınız. Buradaki son düz bölü işareti, tarayıcıya gittiği yerin bir sayfa değil, dizin olduğunu bildirecektir.
FTP bağlantıları: Kimi zaman verdiğimiz bağlantı, kullanıcının bir dosya aktarma alanından, HTTP protolünü değil de FTP (File Transfer Protocol) yöntemini kullanarak, bir dosyayı kendi bilgisayarına indirmesini sağlayabilir. Bunun için bağlantı ifademiz, örneğin şöyle olur: <A HREF="ftp://software.com/pub/">Bedava Yazılımlar</A>