www.kodsistemi.tr.gg
KODSİSTEMİ
html-css stil
Tablo ve Çerçeveler ve Katmanlar
HTML sayfanın metinden sonra en önemli yapı taşları, tablolar ve çerçeveler olsa gerek. Bir HTML sayfasında hiç metne yer vermeyebilirsiniz. Tablolarınızda, çerçevelerinde ya da katmanlarınızda da yazı bulunmayabilir. Ama bu unsurlar, HTML’e henüz sahip olmadığı (örneğin, bir sayfanın sütunlara bölünmesi, yazı ya da grafik unsurların yer aldığı kutuların bir sayfada arzu ettiğiniz koordinatlarda sabit durması gibi) bazı sayfa tasarım araçlarını kazandırır. Tablo çerçevere ve katmanı, bir sayfanın iskeleti, ya da boş bir duvara yerleştirilen kitap raflarına benzetebilirsiniz. Kitaplarınızı kolayca alabileceğiniz bir düzende tutabilmek için, duvarın önüne raflar koymak, bu rafları bölmelere ayırmak gerekir. Aynı şekilde bir Web alanı da tarayıcı tarafından sol üst köşesinden başlanıp, sağ alt köşesine kadar doldurulması gereken bir sayfa gibi görülür. “Web sayfası,” “Ana sayfa” ya da “Home Page” gibi terimlerin kaynağı da, Internet’te alınıp-verilen “şey”in “sayfa” sayılmasıdır. Bu sayfa, yukarıdan aşağı doldurulması gereken bir alandır. Başka bir deyişle, bir unsur, bir diğer unsuru izleyerek sayfada yer alır. Bir duvarın tuğlayla örülmesi gibi. Ama bu duvar, sol üst köşeden, sağ alt köşeye doğru örülüyor! Ve tuğlaların arasında boşluk olamaz!
Bir Pixel Kaç Santim?
HTML sayfasının boyutları, sayfayı izleyen kişinin tarayıcısının ekrandaki penceresine bağımlıdır. Siz, sayfanızı kendi ekranınızda istediğiniz kadar geniş, istediğiniz kadar dar oluşturun: sayfanızın alacağı nihai ölçü, izleyen kişinin ekranının kaç inçlik olduğu, ve tarayıcısına ekranında ne kadar genişlikte bir pencere verdiği olacaktır. Windows ortamında buna bir de ekran-grafik kartı kombinasyonunun sisteme verdiği çözünürlük ölçüsü eklenecektir. Ekran ve kullanıcının tarayıcısının penceresine verdiği yer ne kadar büyükse, Web sayfasına o kadar çok unsur sığacaktır. Ancak ekranın çözünürlük oranı bu dengesi değiştirebilir. Grafik kartının çözünürlük oranı ne kadar yüksekse, ekrana o kadar çok şey sığar, ve sığan şeyler o kadar küçük görünür. Bu değişkenler yüzünden herrhangi bir kullanıcının ekranında sizin sayfanızın ne ölçüde gösterileceğini hiç bir zaman bilemezseniz. Bu nedenle, Web tasarımında standart, sayfanın 14 inçlik ekranda, 640’a 480 pixel (pixel=ekranda oluşan görüntünün bir hücresi, görüntünün bir noktası) çözünürlükte bir kart kullanan kişinin tarayıcısına azani genişliğine çıkartığı varsayılarak ve bundan tarayıcı programın kendi çerçevesi, menü alanı, simgeleri gibi sabit unsurlarının kapladığı alan düşülerek bulunan 600’e 350 pixellik alandır. Sayfanızı sadece ekranda izlenmek üzere tasarlıyorsanız, sayfa genişliğiniz eni 600, yüksekliği 350 pixel olmalıdır. Sayfanızı basılmak üzere tasarlıyorsanız, sayfanızın eni 569, boyu 672 pixel olmalıdır. Bu standartın belirlenmesinde ilke, hiç bir ziyaretçinin sayfanızın sağını veya solunu görebilmek için tarayıcı ekranında fareyle kaydırma çubuklarına basmak zorunda kalmasını ve bir sayfayı yazıcıya gönderdiği zaman bir satırın yarısının ya da bir grafik unsurun bir bölümünün ikinci sayfaya basılmasını önlemektir.
O halde HTML sayfasını, sol üst köşede (sayfa koordinatı olarak ifade edersek, 0,0 pixel noktasında) başlayan ve sağ alt köşede (600,350 pixel noktasında) sona eren bir duvar gibi düşmek zorundayız. Diyelim ki, ikinci bölümde yaptığınız ilk HTML sayfasına koyduğunuz, “Benim Web sayfama hoş geldiniz!” yazısının, sayfanın tam orta yerinde, 300,175px noktasına ortalanarak, yer almasını. Bunu sağlayabilmek için, “Benim” kelimesinin önünde aşağı yukarı, 640 adet aralık ya da Web diliyle “ ” (non-breaking space) kodu girmeniz gerekir. Üstelik, elde ettiğiniz sayfada başlık kullanıcının tarayıcısına verdiği alana göre, ya ortaya gelebilir, veya gelmeyebilir.
Oysa, tablo, çerçeve veya katman unsurlarından birini kullanarak, ve aralık vermek gibi zahmetli ve bir anlamda amatörce yöntemlere başvurmadan bu başlığın, tarayıcının ekranı ne boyutta olursa olsun sayfanın tam ortasında gösterilmesini sağlamak elinizdedir.
Bu üç yapı taşının, sayfa biçimlerdirmeden başka işlevleri de vardır. Tablo, adı üstünde, bilginin sınıflandırılarak ve kolay anlaşılır tarzda sunulmasını sağlar. Çerçeveler, ziyaretçiye sunacağınız unsurların belirli bir tertip içinde sunulmasını, ziyaretçilerin alanınızda istediği yerlere zahmetsizce girmesine imkan veren bir tasarım ögesidir. Katman (layer) ise, duragan HTML’i, dinamik HTML haline getiren en kullanışlı unsurdur.
Bu bölümde, sırasıyla bu üç unsuru kullanmayı öğreneceğiz.
Tablolar
Tablolar, Web sayfalarında verilerin sınıflandırılmış ve sıralanmış olarak sunulmasını sağlayan sütunlar ve sıralardan ibarettir. HTML’de dil olarak sağlanan gelişmeye rağmen, bütün ziyaretçilerin tarayıcıların en son ve en gelişmiş sürümlerini kullanmadıklarını, eski sürüm tarayıcıların ise HTML’in metinlerin sabit yerlere konulmasına imkan veren etiketlerini anlamamaları sonucu, sayfalarınız bir ekranda başka, bir diğerinde daha başka gösterilebilir. Bunu önlemek ve sayfalarınızı tarayıcıdan tarayıcıya değişmeyecek bir isketelete kavuşturmak için, tablolardan yararlanabilirsiniz. Bu imkan, tabloların verileri sütunlar ve sıralar halinde sunmaktan çok yapısal unsur olarak kullanılmasına yol açtı.
Yine de önce tabloların veri sunmakta kullanılmasını dikkate alarak, tablo kurallarından kısaca söz edelim. Tablolar, satırlardan ve sütunlardan oluşur. Satırlar, genellikle hakkında bilgi verilen unsurları (birimleri, bireyleri) içerir; sütunlarda ise bu birimlerin çeşitli değişkenlere göre hangi değeri aldığı gösterilir. Her tablonun genel bir başlığı olduğu gibi, her sütunun hangi bilgileri içerdiğini gösteren kendi başlıkları bulunur. Tablonun, üstte başlığın altında veya son sıradan ve varsa tablo çerçevesinden sonra bir açıklama yazısı (Caption) bulunabilir. Tablonun birden fazla sayfaya bölünmesi halinde, başlığın ve sütun başlıklarının tablonun devam bölümünün de üstünde bulunması gerekir. Tablonun devam bölümlerinin açıklama yazısında bir tablonun devamı olduğu belirtilir.
Başlık, Satır ve Veri Etiketleri
HTML’de bir tablonun başlangıcı ve bitişi <TABLE>..</TABLE> etiketiyle işaretlenir. Tablonun sütun başlıkları <TH>..</TH>; gövdesi <TBODY>..</TBODY> etiketiyle belirtilir. Sütun başlıkları veya gövde etiketinin hemen altında tarayıcıya bir tablo satırı başladığını söylemeniz gerekir. Bunu <TR>..</TR> etiketiyle yaparız. Bu iki etiketin arasında Tablonun değerleri, yani içinde bilgiler bulunan hücreleri oluşturan etiket, <TD>..</TD> yer alır. Bu iki etiketin arasında tablonuzun ilgili hücresinde yer alacak bilgi bulunur.
Bu bilgileri hemen bir tabloya uygulayalım. En beğendiğiniz düz yazı dosyasını açın ve şu kodları girin:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</HEAD>
<TITLE>Tablonun Esaslari</TITLE>
<BODY>
<p><font face="Arial">
<h1><center>HTML'de Tablo</center></h1>
<table align=center border=3 width=70%>
<caption align=bottom>Bu tablomuzun Alt-yazısı (caption)</caption>
<thead align=center>Bu tablomuzun Başlığı (thead)</thead>
<thead><tr><th>Birinci sütun başlığı (th)</th><th>İkinci sütun başlığı(th)</th><th>Üçüncü sütun başlığı(th)</th><th>Dördüncü sütun başlığı(th)</th><th>
<tbody>
<tr><td>Satır 1 Sütun 1</td><td>Satır 1 Sütun 2</td><td>Satır 1 Sütun 3</td><td>Satır 1 Sütun 4</td></tr>
<tr><td>Satır 2 Sütun 1</td><td>Satır 2 Sütun 2</td><td>Satır 2 Sütun 3</td><td>Satır 2 Sütun 4</td></tr>
<tr><td>Satır 3 Sütun 1</td><td>Satır 3 Sütun 2</td><td>Satır 3 Sütun 3</td><td>Satır 3 Sütun 4</td></tr>
<tr><td>Satır 4 Sütun 1</td><td>Satır 4 Sütun 2</td><td>Satır 4 Sütun 3</td><td>Satır 4 Sütun 4</td></tr>
</tbody>
</table>
</body>
</html>
Açtığınızı Kapatın!
Düz yazı programlarıyla HTML kodu yazmak zevkli, fakat biraz dikkat isteyen bir iştir. Özellikle kapatan eşi olan etiketlerle eşsiz etiketleri öğrenmek kolay değil. Ama bunu kolaylaştıracak bir ilke var: İlk açılan son kapanır! Diyelim önce bir TR, onun içinde de içinde bir TD etiketi açtınız; TD’yi kapatmadan TR’yi kapatmayın. Daha kestirme bir yol, biraz önce oluştrduğunuz Tablo kodunu, daha sonra uygun yerde kullanmak üzere bir yerde saklayın. İhtiyacınız olmayan TR’leri ve tabiî içindeki TD’leri atarak veya ihtiyacınız olan TR’leri ekleyerek, yazacağınız HTML dosyalarının içine kopya edebilirsiniz!
Tablo Unsurlarının Kontrolü
Bloklama: HTML’de tablonun kendisi ve içindeki bir çok unsur, (örneğin TH etiketiyle verdiğiniz sütun başlıkları, TD ile verdiğiniz hücrelerde yer alacak değerler ve CAPTION ile verdiğiniz tabloyu açıklayan alt-yazı) bulundukları yerde sola, ortaya veya sağa bloklanabilirler. Bunun için etiketten sonra “ALIGN=xx” yazmanız gerekir. “xx” yerine sağ için RIGHT, sol için LEFT, orta için CENTER, iki tarafının da bloklanması için JUSTIFY, veya herhangi bir karakterin ortalama unsuru olması için o karakteri yazmanız gerekir. Bu sonuncu olanaktan, tabloda rakam yer alacaksa ve bütün rakamlar nokta veya virgülleri altalta gelecek şekilde sıralansın istiyorsanız, yararlanabilirsiniz. Alt-yazı diye adlandırmış olmamıza rağmen CAPTION sadece bulunduğu yerde bloklanmakla kalmaz, istenirse tablonun üstüne veya altına alınabilir (ALIGN=LEFT/RIGHT/TOP/BOTTOM).
Sütun ve Satır Birleştirme: Bir tablonun başlığında ve gövdesinde yer alan hücreler yatak ve dikey olarak komşuları ile birleştirilebilirler. Bunun için COLSPAN ve ROWSPAN etiketlerini kullanırız. Bu olanaktan, sadece veri sunmak için oluşturacağınız tablolarda gruplanabilir sütunları en üstteki başlık hücrelerini birleştirerek, görsel bir birlik sağlamak için yararlanabilirsiniz. Fakat bu iki etiket, HTML’i, masaüstü yayıncılık programları ile yarışabilir yapısal özelliklere sahip sayfalar oluşturmakta yararlanacağımız iki ana araçtır. Aşağıda, tablolardan yapısal unsur olarak yararlanma yollarını ele aldığımızda bu iki etiket üzerinde çok duracağız.
Zemin: Bir tablonun, her bir satırın, her bir sütunun ve her bir hücrenin ortak veya ayrı zemini olabilir. Bu zemin düz renk olabileceği gibi bir grafik unsur da olabilir. Bu olanaktan, uzun ve çoğu zaman gözle takibi zor rakamlar içeren tablolar oluşturduğunuz zaman, satırlara biri açık, diğeri renkli zemin vererek, izleme kolaylığı sağlamak için yararlanabilirsiniz. Fakat bu etiketi de, sayfalarda içerik aracı olmaktan çok yapısal unsur olarak kullanacağız.
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
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> <
İ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:
Ş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?
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 “
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.
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. “+
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ı.Ş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
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:Tarayıcınız açılınca, karşınıza da şöyle bir tablo çıkacaktır: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:
Tarayıcınızı şimdi açın. Karşınıza şu görünümün çıkması gerek: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?Ş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: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
ikkat 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:
Ö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:Ü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: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: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>
Haber Grupları: Internet’in belki de en çok kullanılan haberleşme, görüş ve bilgi alışverişi yapılan, tartışma gruplarına yer verilen Usenet servisine yapılacak göndermede, protokol zikredilmez. Ayrıca bu göndermede düz bölü işareti de bulunmaz, Usenet’te, örneğin HTML program yazıcıların haberleşme grubuna bağlantı vermek için şu HREF ifadesini yazabiliriz: <A HREF="news:comp.infosystems.www.authoring.html">Web Program Yazıcıları Haberleşme Grubu</A>
Elektronik Posta Bağlantısı: Sayfanıza koyacağınız bir bağlantı, kullanıcının tarayıcısına, bir başka yere atlamayı veya bir dosya almayı değil de, varsayılan elektronik posta programını açarak, bir elektronik mektup göndermeye hazır hale gelmesini bildirebilir. Bunun için gönderme ifadesi içinde, tarayıcı programın “mailto” bölümüne atıf yapılır: <A HREF="mailto:webmaster@bizimweb.com.tr”>Sayfamız hakkında düşündüklerinizi bize bildirin</A>
Dosya Bağlantıları: Diyelim ki yaptığınız HTML dosyaları genel Internet’te değil de kendi okulunuzun yerel ağında veya firmanızın dahili Internet alanında (intranet) yer alacak. Bu durumda göndermeleriniz doğruca belirli bir sabit diskin bir klasöründe, bir dosyaya olabilir. Bu durumda dosya göndermesi ifadelerini kullanmanız gerekir. Bunu, örneğin, <A HREF="file://edebiyat/maaksoy/imarsı.htm">Mehmet Akif’in Eserleri: İstiklal Marşı</A> şeklinde yazarsınız.
Diğer bağlantılar: Internet’in ilk günlerin sık kullanılan Gopher, ve çok geniş bir alana yayılmış ağlarda veri tabanı araştırması yapmaya imkan weren WAIS, çok yaygın olmamakla birlikte, HREF ifadesi olarak kullanılabilir. Bu ve diğer bağlantı türleri hakkında son bilgiyi http://www.w3.org/addressing/schemes.html adresinde bulabilirsiniz.
Sayfada Diğer Unsurlara Bağlantı Kazandırmak:
HTML sayfalarda, sadece belirli metinler veya metin parçalarına bağlantı sağlanmaz; aynı zamanda grafik unsurlara ve hatta ilerde göreceğimiz şekilde belirli olaylara, örneğin kullanıcının fare simgesini sayfada belirli bir unsurun üzerine getirmesine, belirli ses dosyasının çalınıp bitmesine, vs., de bağlantı kazandırılabilir. Ama bunun ayrıntılarını, Dinamik HTML ile ilgili bölümde ele alacağız. Burada sadece bunun mümkün olduğuna işaret edip geçelim; çünkü birazdan Webcilere Öğütler sayfamızda bu imkandan sayfalarımıza geriye dönüş imkanı kazandırmak için yararlanacağız. Şimdi çerçeveli sayfa alıştırmamıza geri dönelim.
Bağlantılı Çerçeve Uygulaması
Şimdi son iki bölümde öğrendiklerimizi, Tablolar konusunu ele alırken oluşturduğumuz örnek sayfamıza uygulayalım; ziyaretçilerimize verdiğimiz sayfalarda biraz değişiklik yapalım. Bu kez ziyaretçilerimize bir sayfada dört çerçeve vermek istiyoruz. Sol üst çerçeveye, tasarımcı-programcının birinci ilkesi olan “Düşün” tavsiyesini konu alan anime GIF dosyamızı koyalım. Üst sağ çerçeveye sayfamızın başlığını yerleştirelim. Sol alt sütunda, sayfamızı ziyaret edecek Web tasarımcılarına vereceğimiz öğütlerin başlıkları olsun; ve nihayet sağ alt kutuda, öğütlerimizi sunalım. Bu son çerçevenin içeriği, sayfamız açıldığında sayfamızın bir tür rasat kılavuzu, hareket rehberi olsun; ziyaretçilere nereyi tıklarlarsa nereye gidebileceklerini söyleyelim. “Gitmek” diyerek, sayfamızda bazı unsurları henüz gösterilmeyen sayfalarla ilişkilendireceğimizi, yani Web diliyle link kuracağımızı belirtmiş oluyoruz.
Stratejisini belirttiğimiz sayfanın temel malzemesi, (1) anime GIF dosyası, (2) başlık için GIF veya JPG grafik dosyası; (4) sayfa kılavuzunun içine koyacağımız öğütler listesini içeren HTML dosyası ve (4) bu listede yer alan her öğüt için bir HTML dosyasından ibarettir.
Web tasarımcılara vereceğimiz öğütleri nasıl grupladığımız hatırlıyor musunuz:
“Web Tasarımında Gözetilecek İlkeler: Grafikle İlgili İlkeler, İçerikle İlgili İlkeler, Davranış Kuralları”
Çerçeveli sayfalarımızı içerden dışarı ya da aşağıdan yukarı doğru oluşturacağız. Yani önce en dışarıdaki ya da en üstteki sayfaların çağıracağı içerdeki veya alttaki sayfaları yapacağız; sonra dışarıdaki sayfaları ve en son, en üstteki FRAMESET sayfasını yazacağız.
En içerde, ya da en altta, üç adet öğüt sayfamız var. Öğütlerin içeriği ile uğraşmamak için, bir çok masaüstü yayıncılık programı ile verilen ve içeriği hiç bir anlam ifade etmeyen, ala alıştırmalarda metin yazısı olarak kullanılan bir yazı dosyasını, ya da beğendiğiniz (!) bir Benioku.txt dosyasını, sabit diskinizde alıştırma yeri olarak tayin ettiğiniz klasöre kopya edin. Bu amaçla kullanılabilecek uygun dosyalardan biri, Adobe firmasının hemen her programı ile verdiği yazı örneği dosyasıdır. Büyük bir olasılıkla, “lorem ipsum..” diye başlayan ve içi tümüyle anlamsız kelimelerle dolu bu metni daha önce görmüş bulunuyorsunuz.
Örnek yazı dosyanızı açın, ve baştarafına şu kodları yazın
<HTML>
<HEAD>
<TITLE>Ogut 1</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</HEAD>
<BODY BGCOLOR="#80FFFF">
Sonra iki üç paragraf metin alın ve sonuna şu kodları koyun:
</BODY>
</HTML>
Özetle, ortaya şöyle bir dosya çıkartın:
<HTML>
<HEAD>
<TITLE>Ogut 1</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</HEAD>
<BODY BGCOLOR="#80FFFF">
<P>Lorem ipsum,</P>
<P>Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</P>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</P>
<P>Ut wisi enim,</P>
<P>Ad Minim Veniam</P>
</BODY>
</HTML>
Şimdi, bu dosyayı, “ogut1.htm” adıyla kaydedin. Sonra, başlıktaki Ogut 1’i Ogut 2 yapın, zemin rengini değiştirin (Renk kodlarını hatırlıyorsunuz, değil mi?) ve “ogut2.htm” adıyla bir daha kaydedin. Sonra, tahmin ettiğiniz gibi, sayfa başlığını Ogut 3 yapıp, zemin rengini değiştirip, “ogut3.htm” olarak bir daha kaydedin. Bu üç dosya, stratejimize göre, sağ alt çerçevenin içinde, ziyaretçinin tercihine göre, değişecek olan sayfalarımızı oluşturacaklar.
Şimdi, düz yazı editöründe, şu dosyayı (tabiî içeriğini arzu ettiğiniz gibi değiştererek, yazıp, “temp4.htm” adıyla kaydedin:
<HTML>
<HEAD>
<TITLE>Geçici Dördüncü Çerçeve</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</HEAD>
<BODY>
<P><FONT FACE="Arial" SIZE="7">Sevgili Web tasarımcısı kardeş:</FONT></P>
<P><FONT SIZE="4"><B>Yan tarafta size sunacağımız öğütlerimizin bir listesini görüyorsunuz. Bu listede arzu ettiğiniz bir maddeyi tıklarsanız, bu kutunun içinde o konudaki öğütlerimizi bulacaksınız. İşlerinizde başarılar dileriz.</B></FONT></P>
<P><FONT SIZE="4"><B>Kolay gelsin..</B></FONT></P>
</BODY>
</HTML>
Bu dosya da, sayfamız açıldığında, öğütler çerçevisinin içinde ziyaretçilerimize “hoşgeldiniz!” diyecek olan sayfayı oluşturacak.
İçteki veya en alttaki dört sayfayı yaptık. Şimdi sıra bir üstteki sayfayı yapmaka geldi. Bu sayfaya, Web dilinde Navigation sayfası, çerçevesi veya bölümü denir. Kullanıcı, buraya koyacağımız bağlantı kelimelerini (ya da, grafik koyarsak, düğmeleri) kullanarak, sunduğumuz bağlantı noktalarına gidecektir.
“Web Tasarımında Gözetilecek İlkeler: Grafikle İlgili İlkeler, İçerikle İlgili İlkeler, Davranış Kuralları” şeklindeki sayfa planımızı, bağlantıları koyarak, Navigation sayfası haline getirelim. Sonra bu sayfayı sol alt çerçevenin içine yerleştireceğiz. Düz yazı programında “liste.htm” adını vererek, şu dosyayı oluşturun:
<HTML>
<HEAD>
<TITLE></TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</HEAD>
<BODY BGCOLOR="#808000">
<P ALIGN="left"><B><FONT COLOR="Red" SIZE="6">Web Tasarımında Gözetilecek İlkeler:</FONT></B></P>
<P><B><FONT SIZE="5" COLOR="Red"><A HREF="ogut1.htm" TARGET="ogut">Grafikle İlgili İlkeler</A></FONT></B></P>
<P><FONT SIZE="5" COLOR="Red"><B><A HREF="ogut2.htm" TARGET="ogut">İçerikle İlgili İlkeler</A></B></FONT></P>
<P><FONT SIZE="5" COLOR="Red"><B><A HREF="ogut3.htm" TARGET="ogut">Davranışla İlgili Kurallar</A></B></FONT></P>
</BODY>
</HTML>
Herhalde, yukarıdaki bölümde bağlantılarla ilgili bilgiler ışığında burada yapmak istediğimiz bağlantıyı görebiliyorsunuz. Birinci satırda, ziyaretçimizin tarayıcısına, kullanıcı “Grafikle İlgili İlkeler” kelimelerini tıkladığı taktirde, Web Server’dan “ogut1.htm” adlı dosyayı istemesini ve bunu, “ogut” adlı çerçeve içinde göstermesini söylüyoruz. Unutmayın, henüz FRAMESET sayfamızı yapmadığımız için ortada böyle bir çerçeve yok.
Çok sayfalı Web alanı inşa etmeye en içerden, en alttan başlamanın yararı budur: nereye, ne koyacağını tayin ederek geldiğiniz için, ilerde hangi dosyaya, hangi çerçeveye ne ad verdiğinizi unutmazsınız. Örneğin, işe bu sayfadan başlamış olsaydık, bu bağlantıya vereceğimiz dosya adını buraya yazmak zorunda olduğumuz için, bir isim uyduracaktık. Daha doğrusu üç isim... Sonra, her bir öğüt sayfasını yapıp sabit diske kaydederken, bu dosyalara ne isim vermemiz gerektiğini, gelip, Navigation sayfasını açarak yeniden öğrenmek zorunda kalacaktık. Bu boşuna zaman kaybını önlemiş olduk. Şimdi biliyoruz ki, FRAMESET sayfasını, ya da çerçeveli ana sayfayı yaparken, sağ alt köşedeki çerçeveye “ogut” adını vereceğiz.
Ters Bölü İşaretine Ne Oldu?
HREF yükleminin önünde düz bölü işareti kullanılır. Sayganızı PC’de çalışan bir Web Server’a bile koyacak olsanız, kendi alanınızdaki klasörlere yaptığınız bütün URL referanslarınız ters bölü işareti () değil, düz bölü işareti (/) olmalıdır.
Bugün 56 ziyaretçi (178 klik) kişi burdaydı!