GEYİKSTAR
  tablo ve çerçeveler
İ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”: İ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: . Ş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: Dikkat ettiyseniz, burada listenin başlığını “

...

” etiketine aldığımız halde, listenin maddelerini
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: 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: Tablonun Esaslari
; gövdesi .. 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 .. etiketiyle yaparız. Bu iki etiketin arasında Tablonun değerleri, yani içinde bilgiler bulunan hücreleri oluşturan etiket, 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: Tablonun Esaslari

HTML'de Tablo

 
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 ..
etiketiyle işaretlenir. Tablonun sütun başlıkları
..
..
Bu tablomuzun Başlığı (thead)
Bu tablomuzun Alt-yazısı (caption)
Birinci sütun başlığı (th)İkinci sütun başlığı(th)Üçüncü sütun başlığı(th)Dördüncü sütun başlığı(th)
Satır 1 Sütun 1Satır 1 Sütun 2Satır 1 Sütun 3Satır 1 Sütun 4
Satır 2 Sütun 1Satır 2 Sütun 2Satır 2 Sütun 3Satır 2 Sütun 4
Satır 3 Sütun 1Satır 3 Sütun 2Satır 3 Sütun 3Satır 3 Sütun 4
Satır 4 Sütun 1Satır 4 Sütun 2Satır 4 Sütun 3Satır 4 Sütun 4
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, 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: Sonra bu satıra kaç hücre koyacaksanız o kadar hücre koyun. Diyelim ki üç hücre koyacağız: . (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: İ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: . Birleşik birinci ve ikinci hücreleri açalım: . Üçüncü hücreyi koyalım: . Ve bu sırayı da kapatalım: 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: . Üçü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: 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:
   
  
   
Kutu 1 Kutu 2 Kutu 3
Kutu 4 Kutu 5
Kutu 6 Kutu 7 Kutu 8
Kutu 9
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:
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.)

Web Tasarımında Gözetilecek İlkeler:

Grafikle İlgili İlkeler,
İçerikle İlgili İlkeler
Davranış Kuralları
Güzel Web Örnekleri

Web Tasarımcıları Derneği,
Tasarımcı Gençler Birliği
Gönüllü Web Ustaları

Web Tasarımında Gözetilecek İlkeler:

Grafikle İlgili İlkeler,
İçerikle İlgili İlkeler
Davranış Kuralları
Güzel Web Örnekleri

Web Tasarımcıları Derneği,
Tasarımcı Gençler Birliği
Gönüllü Web UstalarıGönüllü
Web Ustaları

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 (..) (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: Çerçeve Teknolojisi Çerçeve oluşturma kodu olan ... 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: Ş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. kodunun önüne şunları yazın: HTML’in klasik kapanış kodlarını da girelim: <body> </body> Burada .. 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: Çerçeve 1

Çerçeve: 1

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: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: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ı “ 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: 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: 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: 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 .. etiketini ele alalım. HTML’e hareket kazandıran bu etikettir. HTML etiketleri arasında Anchor (A) etiketinin yanı sıra, ve etiketleri de, bir noktadan bir diğerine gitmemizi sağlar. HTML sayfada metinlere ve diğer unsurlara bağlantı kazandırabilirsiniz. .. 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. .. 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 ş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: İçerikle İlgili İlkeler ş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ı 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: Bedava Yazılımlar 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: Web Program Yazıcıları Haberleşme Grubu 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: Mehmet Akif’in Eserleri: İstiklal Marşı ş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
 
  tüm 31922 ziyaretçikişi burdaydı!  
 
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=