| Html Kodları | Html Rehberi | Css | JavaScript Kodları | Sinema Filmleri | Rap&HipHop |

Tablo ve Çerçeveler ve Katmanlar

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>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD>. (Burada “&nbsp;” ş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>&nbsp;</TD>. Üçüncü hücreyi koyalım: <TD>&nbsp;</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>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</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>

Ş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 “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.

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ı.Ş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: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: 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ı “<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. Diyelim ki, kendi sabit diskinizde bir dosyaya göndermede bulunuyorsunuz. Dosyanın, “C:belgelerhtmlornek.htm” olan “adresi,” HREF ifadesi olarak yazılırken, “C:/belgeler/htm/ornek.htm” olarak yazılmalıdır.

Şimdi sıra, FRAMESET sayfasını yapmaya geldi. Bu sayfa, aslında sadece çerçeveleri oluşturacak ve kaynaklarını gösterecek son derece basit bir dosya olacak. Sayfanın baştarafını yazalım:

<HTML>

<HEAD>

   

<TITLE>Ogutler</TITLE>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

</HEAD>

 

<FRAMESET BORDER="0" COLS="240,*">

<FRAMESET ROWS="180,*">

<FRAME SRC="anim.htm" NAME="anim" NORESIZE SCROLLING="no" MARGINHEIGHT="0" MARGINWIDTH="0">

<FRAME SRC="liste.htm" NORESIZE SCROLLING="no" NAME="liste" MARGINWIDTH="10" MARGINHEIGHT="10">

</FRAMESET>

<FRAMESET ROWS="271,61%">

<FRAME SRC="baslik.htm" NORESIZE SCROLLING="no" NAME="baslik" MARGINWIDTH="10" MARGINHEIGHT="10">

<FRAME SRC="temp4.htm" NORESIZE SCROLLING="auto" NAME="ogut" MARGINWIDTH="10" MARGINHEIGHT="1">

</FRAMESET>

</FRAMESET>

FRAMESET etiketinin çerçeve çizgilerine ilişkin BORDER yüklemine istediğiniz değeri verebilirsiniz. Ama daha önce de belirttiğimiz gibi bu sadece bir görsel ilke veya zevk meselesi değil. Kimi kullanıcılar, çerçevelerin aldığı yeri kayıp sayarlar. Çerçevelere çizgi koymayarak bu endişenin önüne geçebiliriz. Bir de, sütun ve sıra boyutlarını belirlediğimiz ifadelere dikkat edin. COLS=”240,*” ve ROWS=”1800,*” ifadeleriyle, sadece sol üst kutunun boyutlarını belirliyoruz, geri kalan kutular için tarayıcıya “Geriye ne kaldı ise o kadar yer ayır!” demiş oluyoruz. Bu iki ölçü, sol üst kutuya koymaya niyet ettiğimiz anime grafiğin boyutlarıdır. Böylece, kullanıcının programı, bu kutuyu grafiğin alması gereken yere dokunmayacaktır. Dokunursa ne olur? Büyük bir olasılıkla, grafiğin iki tarafında anlamsız boşluklar kalacak ve ortaya görsel açıdan çirkin bir tablo çıkacaktır. Grafiklerin ve İçindekiler listemizin yer alacağı çerçevelerin altında ve sağında kaydırma çubukları olması da gerekmiyor. Ayrıca bu üç çerçevenin kullanıcı tarafından içindekileri daha rahat görmek için eninin boyunun genişletilmesine de gerek yok. Fakat değişken içeriğin yera lacağı sağ alttaki çerçevenin, içine girecek yazının boyuna göre, otomatik olarak, ihtiyaç varsa kaydırma çubuklarıyla, ihtiyaç yoksa çubuklar olmaksızın gösterilmesi gerekiyor. Bu nedenle oluşturduğumuz dört çerçeveden üçü ölçüsünün değiştirilmesi imkanı kapatılarak (NORESIZE) ve kaydırma çubukları olmaksızın (SCROLLING="no") ifadeleri ile oluşturulurken, dördüncü (SCROLLING="auto") ifadesiyle oluşturuluyor. Bu arada her dört çerçeveye de isim verdiğimizi farketmiş olmalısınız. Çerçeveleri isimlendirmek, o andaki tasarım stratejisi gerektirmese de ilerde yararlı olabilir. Ayrıca biz dördüncü çerçeveye isim vermek zorundayız; çünkü İçindekiler listesinde kullanıcının yapacağı tercihe göre çağrılacak öğüt sayfası, bu çerçeveyi adıyla arayıp, bulacak.

Şimdi, dosyanın son bölümünü yazalım:

<NOFRAMES><BODY>

<P>Maalesef sizin Web Browser programınız biraz antika! Bu sayfayı çerçeveli olarak göremiyorsunuz. Onun için size düz bir liste veriyoruz:</P><P><B><FONT SIZE="5" COLOR="Red"><A HREF="ogut1.htm">Grafikle İlgili İlkeler</A></FONT></B></P><P><FONT SIZE="5" COLOR="Red"><B><A HREF="ogut2.htm">İçerikle İlgili İlkeler</A></B></FONT></P><P><FONT SIZE="5" COLOR="Red"><B><A HREF="ogut3.htm">Davranışla İlgili Kurallar</A></B></FONT></P>

</BODY>

</NOFRAMES>

</HTML>

Baştan beri örnek çerçeve dosyalarımızda içini boş bıraktığımız <NOFRAMES>..</NOFRAMES> içini bu kez dolduruyoruz. Tarayıcıların çerçeve teknolojisinden önceki sürümlerini halâ kullanan ziyaretçilerimize, ekranlarında bomboş bir sayfa görmemeleri için, kibarca programlarını güncelleştirmeleri zamanı geldiğini hatırlatarak, sayfamızın sadece metin içeren sürümünü sunuyoruz. Bu kişiler de, diğerleri gibi öğüt seçeneklerimizi görecekler ve herhangi birini tıkladıkları taktirde, ilgili öğüt sayfamıza gideceklerdir.

Şimdi bu dosyayı “ogutler.htm” adıyla saklayın; tarayıcınızda açıp bakın. Karşınıza şu tablo çıkmalıdır:

Şimdi burada hemen dikkat etmeniz gereken bir önemli unsur var. Bir başka unsurla arasında bağlantı kurduğunuz kelime, cümle veya paragrafın, tarayıcı ekranında gösterilirken, (tabiî kullanıcı olarak tarayıcının varsayılan tercihlerini değiştirmemişseniz) altının bir çizgiyle çizildiğini ve metin renginin koyu mavi olduğunu farketmiş olmalısınız. Bu, artık Internet’te bağlantının klasik görünümü halini aldı. Bu Internet’e önce Macintosh ardından Windows işletim sistemlerinin Yardım dosyalarındaki Hyperlink’lerin gösterilme tarzından miras kalmış bulunuyor.

Bağlantıları Grafiklere Yerleştirmek: Düğmeler

Şimdi, İçindekiler sayfamızda küçük bir değişiklik yapacağız. Bu sayfadaki bağlantı gösteren kelimelerin yanına birer düğme koyacağız ve kullanıcının bu düğmeyi tıklaması halinde, ilgili öğüt sayfasına gitmesini sağlayacağız.

Bunun için bize bir düğme grafiği gerekiyor. Internet adeta böyle düğmelerle kaynıyor. Fakat karşınıza çıkan ilk sayfada, hoşuna giden ilk düğme grafiğini farenin sağ düğmesi ile tıklayıp, açılacak listeden “Save Picture as” maddesini seçerek ve sabit diske yazılacak grafiği istediğiniz yerde kullanamazsınız. Gerçi “kim görevek?” diye düşünebilirsiniz, ama böyle bir davranış yasal olmadığı kadar, ahlaka da aykırı olur. Tasarımcı, yani ortaya kendi fikir ve sanat eserini çıkartacak bir kişi olarak, herkesden önce bizim böyle bir şey yapmaya hakkımız olamaz. Kendi grafiklerinizi kendiniz yapmayacaksanız, en iyisi, “Bu grafikleri alıp, kullanabilirsiniz,” diyen bir Internet alanından beğendiğiniz grafikleri almak olabilir. Grafik programlarının CD-ROM’ları da on binlerce Internet’te kullanma izni olan grafikle dolu!

Diyelim ki, kullanılmasında sakınca olmayan böyle bir dosyamız var, ve adı da “dugme.gif”. Şimdi, Navigation amacıyla yazdığımız “liste.htm” adlı dosyayı açalım; ve içindoe bir iki değişiklik yapalım. Yapmak istediğimiz şey; liste maddelerimize dokunmadan, önlerine içinde “tıklayınız” yazan düğme grafiklerini koymak ve bağlantıyı yazıdan alıp, bu düğmeye vermek. Bunun için <BODY>...</BODY> etiketinin içine şu kodu yazacağız:

<p align="center"><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"><img src="dugme.gif" width="50" height="28" border="0" alt="Dugme" align="middle"></a><font color="#6600CC">Grafikle İlgili İlkeler</font></font></b></p>

<p><font size="5" color="Red"><b><font size="5" color="Red"><a href="ogut2.htm" target="ogut"><img src="dugme.gif" width="50" height="28" border="0" alt="Dugme" align="middle"></a></font><font color="#6600CC">İçerikle İlgili İlkeler</font></b></font></p>

<p><font size="5" color="Red"><b><font size="5" color="Red"><a href="ogut3.htm" target="ogut"><img src="dugme.gif" width="50" height="28" border="0" alt="Dugme" align="middle"></a></font><font color="#3300CC">Davranışla İlgili Kurallar</font></b></font></p>

Bu dosyayı, “yeniliste.htm” adıyla kaydedin ve neler yaptığımıza bir bakalım. Bir kere, metinlerimizi <A>...</A> etiketinin içinden çıkarttık, yerine bir grafik kaynağı yazdık:

<img src="dugme.gif" width="150" height="58" border="0" alt="Dugme" align="middle">

Bu kaynak adresinde sadece grafik dosyamızın adı değil, fakat onunla birlikte daha bir çok bilgiler var. Bu grafiğin ekranda ne büyüklükte gösterileceği, eni (width) ve yüksekliği (height) pixel olarak belirtiliyor; graifin içinde yer alacağı kutunun çerçevesi olmaması isteniyor (border=”0”); grafik ziyaretçinin bilgisayarına yükleninceye kadar ve gönderilemez onun yerine alternatif olarak ekranda “dugme” kelimesinin görünmesi bildiriliyor (alt=”dugme”); ve nihayet, grafik kutusunun yarındaki nesneye (bu durumda yazı) ortalanması isteniyor (align=”middle”). dikkat ettiyseniz, <A> etiketinin içeriğinde bir değişiklik yok; bu düğme tıklanırsa, “ogut1.htm” (veya ogut2, ogut2) dosyayı, adı “ogut” olan çerçevenin içine yerleştirilecek.

Şimdi bir de “ogutler.htm” adlı FRAMESET dosyasında, sol alt kutuya, “liste.htm” değil de yeni oluşturduğumuz “yeniliste.htm” dosyasının konulmasını sağlayalım. Bunun için “ogutler.htm” dosyasının içinde, birinci sütunda ikinci sırayı tanımlayan ifadenin içindeki “liste.htm” adını “yeniliste.htm” yapıyoruz ve bu satır şöyle oluyor:

<FRAME SRC="yeniliste.htm" NORESIZE SCROLLING="no" NAME="liste" MARGINWIDTH="10" MARGINHEIGHT="10">

Bu dosyayı “ogutle2.htm” adıyla kaydediyoruz; tarayıcıda açıp bakıyoruz:Düğmeleri sınıyoruz. Bütün bağlantılar doğru çalışıyor mu? Öğüt sayfaları açılmaları gerektiği gibi, sağ alt köşedeki kutuda açılıyor mu? Evet, her şey mükemmel çalışıyorsa, oluşturduğumuz bu sayfayla Web Tasarımı Şampiyonası’nda dereceye giremeyiz, ama çerçeve teknolojisini öğrendik demektir!

Katmanlar ve CSS Teknikleri: Dinamik HTML’e Giriş

“HTML’de, tarayıcıların kalıplarına uymak zorundayız. Sayfaya koyacağımız bir başlık bir diğerinden daha büyük dursun istiyorsak, birini H3, diğerini H2 yaparız; sorun çözülür.”

Bu “Eski Web”in bir kuralıydı; şimdi, yukarıda Metin Düzenleme Etiketleri’ne ele aldığımız bölümde, Yerel Biçimlendirme kavramından söz ederek, ”Yeni Web”in eskinin kurallarını kıran imkanlarına kısaca değinmiştik.

Bununla birlikte sayfalarımızın çatısını, ya da Pagemaker, Quark Express, Corel Ventura gibi masaüstü yayıncılık programlarının ustalarının diliyle, sayfa iskeletini kurarken, yine de HTML’in bize verdiği iki imkanı, tablo ve çerçeve araçlarını, biraz varoluş amaçlarının dışına çıkarak kullanmaktan başka çaremiz olmadığını gördük.

Peki, şimdi şu sayfaya bir bakın:Bu sayfada bir tek tablo, bir tek çerçeve olmadığını, grafik unsur olarak sadece yayının başlığı olan “Gazete” kelimesinin bulunduğunu söylersek, “Yeni Web” teknolojisinin ya da bu bölümde ele alacağımız Katman ve Cascading Style Sheets (Yığılmalı Stil Sayfaları) yöntemlerinin Web sayfası tasarımına kazandırdığı imkanların boyutu hakkında bir fikir vermiş oluruz.Buradaki sayfada görülen grafik kendi içinde hareketli, yani anime GIF dosyası olmakla birlikte, dosyanın içeriğini içine koyduğumuz unsur sayfada hareket etmektedir!

Oysa baştan beri görüyoruz ki, ne tabloların hücreleri, ne de çerçeveler sayfada konuldukları yerde sabit durmakta, ancak içlerinde bulunan hareketli GIF dosyalarındaki unsurlar, kendilerine ne gibi bir hareket kazandırılmış o harekete yapmaktadırlar. Buradaki lama, ayaklarını kaldırıp indirerek ve başını sallayarak yürüyormuş izlenimini veren bir animasyon örneğidir. Fakat lama resmini içinde bulunduran unsuru, sayfa içinde hareket ettirmek, şu ana kadar ele aldığımız tekniklerle mümkün olamaz.

Bunu sağlayan Katman veya Layer teknolojisi, HTML’in bu tarihe kadar kazandığı en büyük imkan olabilecekken, ne yazık ki, tarayıcı firmaları arasında, bilgisayar ekranlarına egemenlik sağlama savaşında, Dinamik HTML’in tanımındaki farklılık ve nedeniyle, henüz gelebileceği yere gelememiş bulunuyor. CSS ise, katman tekniğinden daha şanslı bir uygulama alanı buldu; ama yine de tarayıcı alanında Netscape firmasının uygulamaları ile Microsoft firmasının uygulamaları arasında fark var.

Bu iki tekniğin getirdiği olağanüstü kolaylıklardan yararlanmak, fakat bu arada, Internet müdavimlerinin en az üçte ikisini elden kaçırmak istemiyorsanız, sayfalarınızda Katman ve CSS yöntemlerini her iki tarayıcının asgari ortak noktalarına hitabeden tarzda kullanmanız gerekir. Bu nedenle, günümüzde bir çok Internet alanı, kendisini ziyaret eden kişinin, önce kullandığı tarayıcının adına ve sürümüne bakıyor; ardından bu iki bilgiye uygun bir içerik sunuyor.

Katman ve CSS teknolojileri adeta içiçe kullanıldığı için, bu noktadan itibaren aralarında ayrım yapmayacağız; arzu ettiğimiz bir iki etki türünü oluştururken bu tekniklerin hangisinden nasıl yararlanacağızı göreceğiz. Ve tabiî bu arada ele aldığımız konuya uygun olduğu ölçüde iki tarayıcı arasındaki uygulama ve yorumlama farklarına değineceğiz.

Önce Dinamik HTML veya DHTML nedir sorununa cevap arayalım. DHTML, Web tarayıcısına indirildikten sonra ekranda yer alan unsurları değişen  HTML demektir. Bu değişim, bir grafiğin hareket kazanması veya şekil değiştirmesi; bir grafiğin yerini başka bir grafiğin alması; belirli bir zaman geçince sayfanın yeniden indirilmesi veya belirli bir bölümünün yenilenmesi; kullanıcının belirli hareketleri, örneğin fareyi oynatması veya bir yeri tıklaması sonucu sayfanın içeriğinde değişiklikler olması, olabilir. Yukarıda ilk bağlantı örneğimizde bir başka unsurla arasında bağlantı kurduğumuz kelimelerin, tarayıcı ekranında gösterilirken, (tabiî kullanıcı tarayıcının varsayılan tercihlerini değiştirmemişse) altının bir çizgiyle çizildiğini ve metin renginin koyu mavi olduğunu farketmiştik. Internet’te bağlantının klasik görünümü halini almiş olan bu durumu değiştirip, kullanıcı fare simgesini herhangi bir bağlantı unsurunun üzerine getirecek olursa, bağlantı unsuru kelime ise başka renk almasını, grafik ise başka bir grafikle yer değiştirmesini sağlayabiliriz.

Bu “değişim” örnekleri, içeriği kullanıcının tercihlerine (sözgelimi, bizim sayfalarımızda daha önce neler yaptığının tarihçesine), veya kullanıcının bulunduğu yerde saatin kaç olduğuna bakarak tümüyle farklı vermek gibi dinamik uygulamalarla kıyaslandığında biraz statik görünebilir. Fakat, bu örneklerde de HTML, daha önceki sayfalarımıza göre oldukça hareketli sayılabilir. Şimdi bu hareketi sayfalarımıza kazandıracak etiketlerle tanışalım. Daha önce yaptığımız gibi, yine bunu örnekle yapalım.

HTML’de Nesne Kavramı

DHTML’i bir teknikler demeti olarak ele alırsak, ilk tekniğimiz, sayfamıza ne metin, ne grafik, ne tablo ve ne de çerçeve sayılmayan, ama içinde bunların tümüne de yer verebileceğiniz nesne (object) kavramına dayanıyor. Bu sağlayan etiketin adı Bölüm/Division’dır (<DIV>..</DIV>).

Bölüm ve ilerde değineceğimiz diğer Katman (Layer) etiketlerini, teknik ressamların kullandığı ince şeffat kağıtlara benzetebiliriz. Bir dekoratörün ev planının üzerine, masaların, sandalyelerin, dolapların nasıl yerleştirileceğini gösteren parşömen kağıdına yaptığı çizimi gözününüzün önüne getirin. Bu parşömen, alttaki asıl plan üzerinde istenilen yere kaydırılarak, eşyaların nasıl yerleştirilmesinin daha uygun olacağı araştırılabilir. Sonunda parşömenin belirli bir yere yerleştirilmesi ile iç düzenleme planı elde edilir. <DIV>..</DIV> etiketleri arasında yer alan her şey, yani yazılar, resimler, grafikler, tablolar, video, ses ve benzeri çoklu-ortam unsurları, bu etikete vereceğiniz yerleştirme ve değişme özelliklerine uygun hareket ederler.

Cascading Style Sheets (Yığılmalı Stil Kağıtları)

Bu kadar teori yeter; şimdi uygulamaya geçelim. Ama önce biçimlerdirme ile ilgili bir hatırlatma yapalım. Web sayfalarını biçimlendirme konusunu ilk ele aldığımızda yerel biçimlendirme yoluna gitmiş ve neyi biçimlendireceksek o unsurun önünde biçim komutları vermiştik. Ancak yerel biçimlendirme dediğimiz bu yöntemi ele alırken, HTML’de çok daha kullanışlı, bir sayfanın bütün unsurları ve bir Web alanının bütün sayfaları arasında görsel birlik sağlamamıza yarayacak iki ayrı biçimlendirme yöntemi bulunduğunu da söylemiş ve geçmiştik.

Şimdi bu iki yöntemi ele alalım; çünkü Web sayfasınhda “nesne” oluşturmak için önce bu nesnelerin alacağı şekli belirlememiz gerekiyor. Bu iki yeni biçimlendirme yöntemine Cascading Style Sheets (Yığılmalı Stil Kağıtları) adı veriliyor. Yığılmalı: çünkü HTML vereceğiniz bütün stil komutlarını bilgisayarın belleğinde bir yere yığıcak ve en üstteki kullanacaktır. Kağıt: çünkü adını eskiden bir matbaaya iş verirken, içerik malzemesinin üzerine eklenen ve kapağın nasıl olacağını, metnin çeşitli bölümlerinin hangi harflerle ve ne büyüklükte basılacağını ve genel sayfa düzeninin nasıl yapılacağını belirten bir sayfalık stil kağıdından alıyor. CSS standartlarına göre, yerel olmayan biçimlerdirme (1) biçim komutlarını toplu olarak HTML dosyasının HEAD bölümüne koyarak ve aşağıda gövde bölümünde nerede ihtiyaç olursa oradan yukarıya stil göndermesi yaparak, ya da (2) bu komutların tümünü HTML dosyasının dışında oluşturduğumuz ve HTML dosyasına “Link” etiketiyle bağladığımız ayrı dosya yoluyla yapılır.

Şimdi düz yazı programınızı açın ve başlayın yazmaya:

<style>

<!-

body {background-color: #ffe4b5; background-ımage: none; background-repeat: repeat; color: #000000; margın-left: 1cm; margın-rıght: 1cm; margın-top: 1cm; posıtıon: relative}

p { color: black; font-famıly: 12pt; text-ındent: 1cm}

h1 { color: #008080; font-famıly: 30 pt arial, helvetica, sans-serif}

h2{ color: #008000; font-famıly: 18 pt arial, helvetica, sans-serif}

h3{ color: #ff0000; font-famıly: 14 pt arial black, helvetica black, sans-serif; margın-left: 3cm; margın-rıght: 2cm; margın-top: 2cm}

a { color: aqua; font-famıly: arial; margın-left: 3cm; margın-rıght: 2cm; margın-top: 2cm}

-->

</style>

Parantezlerin düz köşeli değil, kıvrık parantez olduğuna dikkat edir ve bu dosyayı, “ilkstil.css” adıyla kaydedin; ama dosyayı kapatmayın.

Tebrikler, ilk CSS dosyasını oluşturdunuz. Şimdi bunu, bir HTML sayfasına LINK edelim. İlk yaptığımız hoşgeldin sayfalarından birini açabilir ve içinde değişiklik yapabilirsiniz. Şöyle bir HTML oluşturmak istiyoruz:

<html>

<head>

<title>HTML ve Web</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

<link rel="stylesheet" href="ilkstil.CSS"></head>

<h1>Tasarımcı kimdir?</h1>

<h2>Tasarım nedir?</h2>

<p>Bizler, inandığımız için ve bilinçli olarak harf tasarımcısıyız, harf dökümcüsüyüz, sayfa dizgicisiyiz.. <b>Yoksa, yeteneğimiz daha yüksek şeyler için elverişsiz olduğu için değil.</b> Biz inanıyoruz ki, en yüksek düzeyde beceri gerektiren şey, bizim sanatımıza en yakın olanıdır..</p>

<h3><center>Rudolf Koch - <i>Alman harf dökümcüsü, kaligraf</i></center></h3>

</body>

</html>

 

Bu sayfayı “ilkstil.htm” adıyla kaydedin, fakat dosyayı da kapatmayın. “Ilkstil.htm” dosyasını tarayıcınızda açın. Karşınıza şöyle bir görünüm çıkacaktır:Şimdi, açık olan CSS dosyasında H1 türü başlıklarla ilgili stil satırında font ailesi bölümünü değiştirin. Satır şöyle olsun:

H1 { COLOR: #008080; FONT-FAMILY: 26 pt serif}

CSS dosyasını aynı adla saklayın ve tarayıcınız hala açıksa “Reload” düşmesine basın; kapalıysa “ilkstil.htm” sayfasını tekrar açın. İki sayfadaki büyük başlığı karşılaştırın:HTML dosyasına elinizi sürmediğiniz halde, sayfadaki bir unsurun stili değişmiş oldu. Neden? Çünkü HTML sayfanız, bütün stil bilgisini “ilkstil.css” dosyasından alıyor; CSS dosyasındaki her değişiklik, bu dosya ile LINK halindeki bütün Web sayfalarına yansıyacaktır.Çok güzel. Şimdi, CSS dosyasındaki herşeyi aynen HTML dosyasına <LINK...> satırının yerine aktarın (CSS dosyasının açık olduğu düz yazı programındaki tüm yazıları seçip, kopyaladıktan sonra “ilkstil.htm” dosyasında LINK satırının yerine yapıştırabilirsiniz). Bu dosyayı, “ilkstil2.htm” adıyla kaydedin ve tarayıcıda bakın. Biraz önceki sayfadan hiç farkı yok. Çünkü, önceki sayfanın stil bilgisi dışarıdaki bir dosyadan geliyordu; bu kez stil bilgisini HTML’in içine gömdük. Buna da Embeded” (Gömülü) stil sayfası denir.

Peki bir HTML sayfasına hem LINK, hem de EMBEDED stil sayfası verirsek, ne olur?

Uluslararası Web Konsorsiyom’unun (W3C), Web sayfalarına stil verme tekniğine birbiri üstüne yığılma, deste gibi dizilme anlamına gelen “Cascading” kelimesini ad olarak seçmelerinin nedeni, HTML’e birden fazla yöntemle stil komutu verilmesi halinde, bunları iskambil kağıdını gibi üstüste dizmesi ve uygulamaya en üstten başlamasıdır. Bir HTML sayfaya iki LINK komutu ile ardarda iki ayrı CSS dosyası bağlarsanız, ikisinde de aynı unsurlara farklı biçimler veriliyorsa, ikincisindeki, yani destenin en üstüne gelendeki komutlar geçerli olur. Bir HTML’e biri LINK, diğeri EMBED iki ayrı stil bilgisi verilirse ve ikisinde de aynı unsurlar için farklı komutlar varsa, ikincisi, yani HTML’in içinde EMBED olanı geçerli olur; çünkü HTML önce dış dosyayı okuyacak, onun üstüne kendi içindeki stilleri koyacaktır. Ve son olarak, bir sayfada hem LINK, hem EMBED stil bağlantısı olsa ve diyelim ki bir HTML unsurunun önünde onu biçimlendiren bir yerel stil komutu (INLINE stil) bulunsa, en son okunan yerel stil komutu olacağı için, tarayıcı ilk iki stili bir kenara bırakıp, INLINE stili uygulayacaktır. Bir Web alanının bütün ortak özellikleri, örneğin sayfaların zemin rengi, metin ve başlıkların rengi, sağ ve sol marjları LINK CSS ile verilebilir; bu alandaki herhangi bir HTML sayfasını bu temel kurallardan ayrı biçimlerdirme zorunluğu varsa, sadece o sayfada EMBED stil yoluyla değişiklik yapılabilir. Bu durumda bile herhangi bir paragrafın veya bir grafiğin hem tüm alandan, hem de içinde bulunduğu sayfadan farklı bir stile ihtiyacı bulunuyorsa, o zaman bunu INLINE stil ile yapabilirsiniz. Böylece Internet alanınızın tümü ve herbir sayfanın içindeki bütün unsurlar hem belirli bir standarda kolayca uyabilirler; hem de özel durumlarının gerektirdiği değişiklik anında yapılabilir.

Stil kurallarını Nesnelere Uygulamak

Stil bilgilerini nereye koyacağımızı, veya dışarıdaki dosyaları nasıl bağlayacağımızı gördük; ama hangi unsurların hangi özelliklerini stil yoluyla kontrol edebileceğimizden söz etmedik. DIV ve SPAN etiketleri yardımıyla Nesne oluşturmak ve stil komutları ile bunları biçimlendirmeye ve sayfada istediğimiz yere yerleştirmeye geçmeden önce neleri, ve hangi özelliklerini kontrol edebileceğimizden kısaca söz etmemiz yerinde olur.

W3C’nin CSS standardı, bize dört ayrı unsur seçme imkanı veriyor. HTML’in hangi unsurunu seçip biçimlendirdiğimizi tarayıcıya bildiren ifadelere Seçici (Selector) denir. Yani CSS’de dört ayrı Seçici türü vardır.

Harf Seçiciler

Bir bakıma bütün HTML unsurları Seçici sayılabilir. Yukarıdaki alıştırmada, HTML’in BODY, H1, H2, H2, P ve A etiketlerini seçici olarak kullandık ve biçimlendirdik. Bunun gibi HTML’in metin biçimlendiren unsurlarına stil komutları sağlayan Seçicilere, Harf Seçici (Type Selectors) denir. Bu Seçiciler için kullanabileceğiniz özellikleri veren yüklemler (örneğin, unsurun hangi harfle veya harf ailesiyle gösterilmesini belirleyen FONT-FAMILY yüklemi gibi) başka unsurlar için de kullanılabilir. Bu nedenle bu seçicilerle neleri kontrol edebileceğinizi bütün seçicileri gördükten sonra ele alacağızb

Sınıf Seçiciler

İkinci grup Seçici’ye Sınıf Seçiciler (Class Selectors) denir. Hayalgücünüzün imkan verdiği kadar Sınıf Seçici oluşturabilirsiniz. Örneğin “kırmızı” diye bir sınıf oluşturup, bu sınıfın font rengini kırmızı yapıp, dikkat çekmek istediğiniz kelimeyi, cümleyi veya paragrafın etiketini bu sınıfa bağlayabilirsiniz. Bu stilin komutu şöyle yazılır:

.kirmizi { COLOR: red }

“Kirmizi” kelimesinin başındaki nokta’ya dikkat edin. HTML sayfanızda diyelim ki bir başlığı kırmızı yapmak istiyorsunuz:

<h1 class="kirmizi">Bu başlık kırmızı olacak</h1>

Ya da bir paragrafın tümünü kırmızı renkle göstermek istiyorsunuz:

<P class=.kirmizi>Bu paragrafın tümü kırmızı gösterilerek, dikkati hemen çekecektir.</p>

Sınıf Seçicileri, CSS dosyasında veya HTML’in içindeki STYLE bölümünde müstakil olarak oluşturabileceğiniz gibi, bir etikete bağlı olarak da oluşturabilirsiniz:

h1.kirmizi { COLOR: red }

Fakat bu durumda “kırmızı” sınıfını sadece H1 etiketi ile kullanabilirsiniz.

Kimlikli Seçiciler

Üçüncü grup seçici ID Selectors (Kimlik Kazandırılmış Seçiciler) adını alır ve yine hayalgücünüzle sınırlı olarak istediğiniz kadar ID Selector oluşturabilirsiniz. Örneğin:

#mavi { COLOR: blue }

#icerden { text-indent: 2cm }

kimlikli seçicilerdir. Başlarındaki “#” işaretine dikkat ediniz. (Bu işaretten sonraki isim bölümü mutlaka harfle başlamalıdır; ama içinde rakam ve kesme çizgisi kullanılabilir.) Bu seçicilerden HTML’de yararlanmak için, adlarıyla hitabedilmesi gerekir:

 

<P ID=icerden>Bu paragraf diğerlerine oranla 2 sm içerden başlar<-p>

<P ID=mavi>Bu paragraf mavi olarak gösterilir</p>

Bu seçiciyi kullanırken, aynı etikete iki ayrı kimlik veremeyeceğinizi unutmayın.

 

Sınıfımsı Seçiciler

Üçüncü grup seçicilere Sınıfımsı Seçiciler (Pseudo-classes) adı verilir; çünkü kendi başlarına sınıf gibi göründükleri halde ancak bir etiketin belirli durumlarına uygulanabilirler. Bu seçici grubu şimdilik sadece iki etikete uygulanabilir:

A etikeninin üç durumu olabalir ve bunları sınıfımsı seçicilere konu yapabiliriz. Hatırlıyorsunuz, A etiketi (Anchor) sayfalarımızı, paragraflarımızı, cümle veya kelimelerimizi ya da grafiklerimizi bir yerlere bağlamakta kullanılırdı. Bu bağın üç durumu olabilir: Link (henüz gerçekleşmemiş) Visited (daha önce bağ kurulmuş) ve Active (üzeri tıklandığı anda). Şimdi bu durumlara uygun üç CSS etiketi yazalım:

A:link { COLOR: green }

A:active { COLOR: red }

A:visited { COLOR: blue }

Bu durumda ziyaretçinin ekranında A etiketlerimiz yeşil olarak gösterilecek, kullanıcı herhangi bir bağlantıyı tıkladığında bağlantı unsuru (kelimesi veya kelimeleri) kırmızıya dönecek; daha sonra sayfamıza geri geldiğinde bu kelimeler mavi olarak gösterilecektir.

Sınıfımsı etiketin kullanılabileceği şimdilik bir diğer durum ise başlık veya metin gibi bir etiketin ilk satırı veya ilk kelimesinin özelliklerini kontrol eden seçicidir. Örneğin:

P:first-line { font-variant: small-caps; font-weight: bold }

P:first-letter { font-size: 300%; float: left }

Bu seçicilerle oluşturulan etiketlere HTML’in içinde şöyle gönderme yapılır:

<P><P:first-line><P:first-letter>B</P:first-letter>izler, inandığımız için ve bilinçli olarak harf</P:first-line> tasarımcısıyız..... </P>

CSS’in ikinci sürüm standartları ile yeni yeni “durumlar, sınıfımsı oluşturmaya müsait sayılmaya başlamış bulunuyor. Bunun için WWW.W2C.ORG adresini ziyaret ederek, gelişmeleri öğrenebilirsiniz.

Bağlamsal Seçiciler

Dördüncü son grup seçiciler, bir HTML etiketinin her zaman değil de belirli bir bağlamda belirli stiller almasını istediğimizde kullandığımız Contextual Selectors (bağlamsal Seçiciler) grubudur. EM (Emphasis) etiketi, uygulandığı başlık veya paragraf gibi bir etiketi italik yaparak belirginleştirir. Fakat diyelim ki bu etiketi paragraf etiketi ile birlikte (paragraf bağlamında) kullandığımızda işaretlenen yerin mavi, başlık bağlamında kullandığımızda yeşil yapmasını istiyoruz. Bunun için CSS bölümünde bu etiketi P ve H1 bağlamlarında tanımlarız:

P { COLOR: black; FONT-FAMILY: 12pt; TEXT-INDENT: 1cm}

P EM { COLOR: blue}

H1 { COLOR: #008080; FONT-FAMILY: 26 pt serif}

H1 EM { COLOR: red}

Sonra, metinde H1 etiketi içinde EM etiketi kullanırsanız. işaretlenen kelimeler kırmızı, paragraf etiketi içinde EM kullanırsanız işaretlenen kelimeler mavi olacaktır.

Denetlenebilir Özellikler

HTML’de unsurların stil özelliklerini nasıl ve ne gibi bir yöntemle belirleyeceğimizi gördük. Bu arada verdiğimiz örneklerle, “font-family,” “margin-left,” “color” gibi, hangi özellikleri belirleyebileceğimiz hakkında da bir fikrimiz oldu. Fakat denetlenebilir özellikleri toplu halde ele alalım:

Font Özellikleri:

Harf ailesi: “FONT-FAMILY:” şeklinde kullanılan bu yüklemle, uyguladığınız stilin harf ailesini seçebilirsiniz. İfadenin karşısına font ailesinin adını yazabileceğiniz gibi, “serif” (ör. Times), “sans-serif” (ör. Arial), “cursive” (ör. Zapf-Chancery), “fantasy” (ör. Western), “monospace” (ör. Courier) de yazabilirsiniz. Bu satırda birdenf azla unsur, virgülle ayrılarak yaçzılabilir. İyi bir uygulama, önce tercih ettiğiniz belirli bir fontun, ardından bu font ailesinin adını ve nihayet türü yazmaktır.

Örnek:

P { FONT-FAMILY: "New Century School Book", Times, serif }

P { FONT-FAMILY: "Arial Black", Helvetica, sans-serif }

Harf stili: “FONT-STYLE:” şeklinde kullanılan bu yüklemle, harfin normal, italik veya yatık olmasını sağlayabilirsiniz. (İtalik harflerin mutlaka öne yatık olması gerekmez! Ama çoğu italik harf, öne yatıktır.) Örnek:

H1 { FONT-STYLE: normal }

H2 { FONT-STYLE: italic }

H3 { FONT-STYLE: oblique }

Harf türü: “FONT-VARIANT:” şeklinde kullanılan bu yüklemle, harfin normal veya küçük harf boyunda ama büyük harf biçiminde  olması sağlanabilir:

H1 { FONT-VARIANT: normal }

H2 { FONT-VARIANT: small-caps }

Harf ağırlığı: “FONT-WEIGHT:” şeklinde kullanılan bu yüklemle, fontun normal, siyah, koyu, daha koyu, dana açık olması sağlanabilir. Verilebilecek değerler, “normal,” “bold,” “bolder,” “lighter” olabileceği gibi, 100, 200, 300, 400, 500, 600, 700, 800 veya 900 olabilir. Burada 100-300 ince çizgili harf, 400-500 kalın çizgili harf, 600-900 çok kalın çizgili harf sayılır.

 

Örnek:

H1 { FONT-WEIGHT: normal }

H2 { FONT-WEIGHT: bold }

Harf ölçüsü: “FONT-SIZE:” şeklinde kullanılan bu yüklemle, fontun büyüklüğünü belirleyebilirsiniz. Bu, ya mutlak veya göreli olabilir. Mutlak büyüklüklür ya punto, santimetre veya inç cinsinden belirli bir rakam  (ör. 12 pt, 1cm) veya en küçükten en büyüğe doğru olmak üzere, “xx-small,” “x-small,” “small,” “medium,” “large,” “x-large,” “xx-large” olabilir. Göreli büyüklükler ise bir önceki fonta göre daha büyük anlamına “larger” veya daha küçük anlamına “smaller” olabileceği gibi, bir önceki harf büyüklüğünün yüzdesi olarak verilebilir. Tarayıcı programların harf ölçüsü konusunda ya arızalarla donanmış bulunuyor; ya da ölçüleri yorumlamaları birbirinden farklıdır. Bu nedenle, en emin yol harf ölçüsü olarak punto kullanmaktır. Örnek:

H1 { FONT-SIZE: 12pt }

H2 { FONT-SIZE: 90% }

(Yüzde işaretinin rakamın önünde değil, arkasında olduğuna dikkat ediniz.)

Harf: “FONT:” şeklindeki bu yüklemle bir çok font özelliği birden verilebilir. Bu ifadenin karşısına harf stili, türü, ağırlığı, ölçüsü ve ailesi ile bu harfin kullanıldığı satırın satır yüksekliği toplu olarak belirtilebilir. Örnek:

P  { FONT: italic bold 12pt/14pt Times, serif }

 

 

 

Renk ve Zemin Özellikleri:

Renk: “COLOR:” şeklindeki bu yüklemle herhangi bir unsurun renk özelliğini belirleyebilirsiniz. Renk adları veya kodlarını daha önce ele almıştık. Örnek:

H1 { COLOR: blue }

H2 { COLOR: #000080 }

Zemin Rengi: “BACKGROUND-COLOR:” şeklindeki bu yüklemle herhangi bir unsurun arkasındaki zemin rengini belirleyebilirsiniz. Unsurun kendi rengi ile zemin renginin farkını görebilmek için daima COLOR yükleminden sonra kullanılması iyi bir uygulama olur. Örnek:

H1 { BACKGROUND-COLOR: blue }

Zemin grafiği: “BACKGROUND-IMAGE:” şeklindeki bu yüklemle herhangi bir unsurun arkasındaki zemine koymak istediğiniz görüntüyü belirleyebilirsiniz. Unsurun kendi zemin rengi ile zemine konacak görüntünün birbirini örtmemesi için ardarda kullanılması doğru olur. Zemin görüntüsünün yerini belirten ifade için “url...” ifadesi kullanılır. Bu ifadenin farklı türleri için örneğe dikkat ediniz:

H1 { BACKGROUND-IMAGE: url(/images/grafik1.gif }

P { BACKGROUND-IMAGE: url(http://www.benimsite.com/zemin.gif }

Zemin: Zemin rengi ve zemin görüntüsü komutları, çeşitli tarayıcılar tarafından farklı yorumlandığı ve bu nedenle her zaman aynı sonucu alamayacağınızı dikkate alarak, hepsinin aynı şekilde yorumladığı ve “BACKGROUND:” şeklinde yüklem daha kullanışlı olabilir. Bu ifadenin karşısına renk, grafik, tekrar etme oranı, zemini oluşturduğu nesneye bağlı olup olması ve pozisyonu belirten değerler yazılır. Tekrar oranı, (background-repeat) sayfanızın bütün ebadından küçük bir grafiği zemin yapmaya kalktığınız zaman bu grafiğin sayfanın tümünü doldurabilmek için ne kadar tekrar edilmesini istediğini belirter. Bu değeri kullanarak, sayfanın bir kısmının zeminini boş bırakabilirsiniz. zeminin üzerindeki unsurlara bağlanmasını veya bağlanmamasını sağlayan (background-attachment:) zeminin üzerinde unsurla birlikte sayfada aşağı yukarı oynamasını veya oynamamasını belirler. Paragraf, başlık ve ölçüsü belli unsurların (örneğin, IMG, INPUT, TEXTAREA, SELECT gibi) zemini olacak görüntülerin alanın neresine ne de ölçüde konacağını zeminin pozisyon (background-position:) yüklemi belirleyebilirsiniz. Bu yüklemlerin yazılış biçimi ve değerler için örneklere bakınız:

BODY { BACKGROUND: white url(/images/grafik1.gif }

P { BACKGROUND: bule url(/images/grafik1.gif no-repeat bottom right}

Pozisyon değerleri, üstte solda (left top), üstte ortada (top center), üstte sağda (top right) olabileceği gibi, ortada ortalanmış (center center), ortada sağda (center right) veya ortada solda (center left), ya da altta solda (bottom left), altta ortada (bottom center) ve altta sağda (bottom right) olabilir.




Metin Özellikleri:

Kelime aralıkları: “WORD-SPACING:” yüklemi ile kelimelerinin arasına konulmasını istediğiniz ilave boşlukları belirtebilirsiniz. Burada kullanılan ölçü kullanılan fontun en geniş hargi olan “m” harfinin ondalık bölümüdür.

 

Örnek:

P { WORD-SPACING: normal }

H1 { WORD-SPACING: 0.2em }

H2 { WORD-SPACING: -0.4em }

Harf aralıkları: “LETTER-SPACING:” yüklemi ile harflerin arasına konulmasını istediğiniz ilave boşlukları belirtebilirsiniz. Burada kullanılan ölçü de “m” harfinin ondalık bölümüdür. Örnek:

P { LETTER-SPACING: normal }

H1 { LETTER-SPACING: 0.2em }

H2 { LETTER-SPACING: -0.3EM }

Metin süsleme: “TEXT-DECORATION” yüklemi ile bir metnin altını çizdirebilir (underline), üstünü çizdirebilir (overline), veya ortasına çizgi koydurabilirsiniz (line-through), veya bir görünüp, bir kaybolmasını sağlayabilirsiniz (blink). Bunu, altı normal olarak çizilen A (Anchor) etiketiyle verdiğiniz bağlantı kelimelerinin altının çizilmemesi için de kullanabilirsiniz. Örnek:

H3 { TEXT-DECORATION: blink }

A:link, A:visited, A:active { TEXT-DECORATION: none }

Metnin bloklanması: TEXT-ALIGN yüklemi ile bir metni sağa (right),  sola (left) veya ortaya (center) bloklayabilirsiniz. Örnek:

H3 { TEXT-ALIGN: left }

H1 { TEXT-ALIGN: center }

Birinci satırın içerden başlaması: “TEXT-INDENT” yüklemi ile bir metnin birinci satırını vereceğiniz ölçüde içerden başlatabilirsiniz. Örnek:

H3 { TEXT-INDENT: 1cm }

Satır Yüksekliği: “LINE-HEIGHT” yüklemi ile bir metnin satırları arasına konacak boşluğu vereceğiniz yüzde ölçüsü ile normal satır yüksekliğine göre belirleyebilirsiniz. Örnek:

H3 { LINE-HEIGHT: 200% }

H1 { LINE-HEIGHT: 350% }

(Bu ölçü yüzde 100’ün altına düşerse, satırlar birbirinin üzerine bineceği için okunamaz hale gelir.)

 

Konum (Pozisyon) Özellikleri

CSS kurallarının içinde yer almakla birlikte HTML unsurlarının tarayıcının ekranında, konumunu, nereye konulacağını, yani pozisyonunu ve ilk konumun daha sonraki değişme tarzını belirleyen yüklemler, son zamanlarda CSS-P (Cascading Style Sheets-Positioning) şeklinde kendi adıyla anılmaya başladı. Bu grupta yer alan ve unsurlarınızın tarayıcı ekranında yer alacağı konum kontrol yüklemlerini tek tek ele alalım:

Konum: “POSITION:” yüklemiyle belirlenen konum, sabit (static) olabileceği gibi mutlak (absolute) veya göreli (relative) olabilir. Mutlak (absolute) konum verilmiş bir unsur, HTML’in diğer içeriği nedeniyle asla yer değiştirmez; kendisine verilen üst (top) ve sol (left) değerlere göre mutlak bir yerde kalır. Buradaki ölçü pixel cinsinden, tarayıcının HTML sayfasını gösterdiği alanın sol üst köşesi 0-0 kabul edilerek verilir. Örneğin “top: 10 px; left: 20px” şeklindeki bir ölçü, bu unsurun tarayıcının HTML alanının sol üst köşesinden 10 pixel aşağı ve sol kenarından 20 pixel sağa doğru yerleşmesini sağlar. Sabit (Static) konum, yeri belirlenmek istenen unsurun, HTML’in diğer içeriğine göre, nereye geliyorsa, oraya yerleşmesini sağlar. Göreli (Relative) konum ise verilecek ölçülere göre belirlenecek yer, bir önceki unsurun konumunun bittiği yerden itibaren hesaplanır. Örnek:

<SPAN STYLE="position:static; background-color:#90EE90">Yeşil bir satır. Konumu: sabit</SPAN>

<DIV STYLE="position:absolute; top:60px; left:60px; background-color:#ADD8E6">Mavi bir satır. Konumu: mutlak. Üstü 60, sol kenarı 60 santim içerden.</SPAN>

Görünürlük: CSS-P, “VISIBILITY:” yüklemi ile, biçimlendiren unsurun gizlenmiş (hidden), veya görünür (visible) olmasını sağglayabilir veya görünürlüğü içinde bulunduğu nesneden miras almasını (inherit) sağlayabilir. Yani ana unsur görünüyorsa içinde yer alan bu unsur da görünür, ana unsur görünmüyorsa bu unsur da görünmez. Örnek

<div id="Yazi01" style="position:absolute; left:68px; top:60px; width:147px; height:164px; z-index:1; visibility: visible; background-color: #FFCCFF">Bu Mutlak konuma sahip, zemini pembe bir yazıdır. Adı "Yazi1" olan bu kutu her durumda görülür</div>

Katman Enhdeksi: CSS-P, “Z-INDEX:” yüklemi ile bir unsurun tarayıcı tarafından hangi katmanda gösterilmesini tayin etme olanağı sağlar. Bir sayfada, DIV veya SPAN etiketi ile oluşturulmuş nesne varsa, onların katman endeksine bakarak, hepsini belirli bir kata koyar. Yanyana gelen nesnelerin kaçıncı katta olduğu önemli olmayabilir; ancak nesneler üst üste geliyorlarsa, hangisinin hangi altta, hangisinin ortada, hangisinin üstte duracağı önem taşıyabilir. Verilecek değer 1, 2, 3 şeklinde bir sıra numarasıdır. 1, en alttaki katmandır; diğerleri sırayla onun üzerindeki katları gösterir. Örnek

<div id="Yazi01" style="position:absolute; left:68px; top:60px; width:147px; height:164px; z-index:1; visibility: visible; background-color: #FFCCFF">Pembe kutudaki bu yazı altta..</div>

<div id="Yazi2" style="position:absolute; left:132px; top:120px; width:208px; height:206px; z-index:2; background-color: #FF3300">Kırmızı kutudaki bu yazı üstte</div>

Konum belirleyen yüklemler arasında eni boyu belirlenmiş bir nesneye koyduğunuz metnin taşması halinde taşan yazının gösterilip gösterilmeyeceği, veya bir nesnenin içine konulan unsurun hangi bölümlerinin gösterilip, hangi bölümlerinin kesileceğini belirleyen diğer iki kontrol ögesi daha vardır. Bunların tarayıcı yorumları sürümden sürüme değiştiği için ayrıntılarını W3C Internet alanında bulabilirsiniz.

Diğer Özellikler

Stil sayfalarını veya HTML’in baştarafına koyacağınız stil bölümleri ile CSS’in diğer bazı biçimlendirme imkanlarını da kullanabilirsiniz. Bir metnin veya diğer unsurun içinde yer aldığı varsayılan kutunun etrafına çerçeve koymak ve bu çerçevenin rengini, çizgi kalınlığını, çizgilerin içinde ve dışında bırakılacak marjları, bu kutuların zeminini, zemine konacak grafiği belirlemek, kutuların ekrandaki yerini tayin etmek mümkündür. Giderek sayıları artan bu yüklemleri toplu olarak W3C’nin Internet alanında heran bulabilirsiniz. Bunların arasında sık sık kullanılan yüklemleri sıralayalım.

Marjlar: Bir HTML unsurunun üstünde (MARGIN-TOP), sağında (MARGIN-RIGHT), solunda (MARGIN-LEFT) ve altında (MARGIN-BOTTOM) bırakılacak marj boşlukları ya ayrı ayrı ya da toplu olarak belirlenebilir. Toplu belirleyecekseniz, değerlerin sırası üst, sağ, sol, ve alt olarak okunacaktır. Örnek:

P { MARGIN-TOP: 1cm }

P { MARGIN-RIGHT: 2cm }

P { MARGIN-LEFT: 2cm }

P { MARGIN-BOTTOM: 1cm }

P { MARGIN: 1cm 2cm 2 cm 1 cm }




Bir Nesne Yapalım

Sabit Nesneler

Evet bu kadar bilgiden sonra sıra yine uygulamaya geldi. Önce yapacağımız işin stratejisini belirleyelim: Bir sayfada iki katman oluşturacağız; alt ve üst katlara farklı grafikler koyacağız.

Şimdi iki grafik yapalım; birinci içinde “Alt Grafik” diğerinde “Üst Grafik” yazısı bulunsun. Eğer grafikle uğraşmak istemiyorsanız, 100’e 40 pixel civarında birbirinden ayırt edebileceğiniz iki küçük grafik dosyası da işimizi görür. Şimdi bunları HTML sayfasına öyle bir şekilde koyacağız ki, sayfanın stil etiketiyle oynayarak grafiklerin yerlerini değiştireceğiz. Ve böylece HTML’de katman kavramını kullanmış olacağız.

Düz yazı programınızı açın ve başlayın yazmaya:

<html>

<head>

<title>Dinamik HTML</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

<style type="text/css">

<!--

#alt {position:absolute; top: 135px; left: 90px; width: 102px;}

#ust {position:absolute; top: 110px; left: 60px; width: 102px;}

-->

</style>

</head>

Şimdilik burada duralım. Farkettiğiniz gibi biraz önce öğrendiğimiz <STYLE> etiketine yer veriyoruz. STYLE etiketinin içinde iki stil türü oluşturuyoruz: Alt ve üst.

“Üst” mü, “Ust” mu?

Stilleri oluştururken, aslında “alt” değil “#alt” ve “üst” değil “#ust” kelimelerini kullandığımız dikkatinizi çekmiş olmalı. Sayfalarınızın Türkçe’yi destekleyen işletme sistemi olmayan, örneğin Türkiye kullanıcıların bilgisayarlarında acaip sonuçlar vermemesi için, sistem değişkeni olarak tarayıcı ve dolayısıyla MacOS, Windows veya Unix gibi işletme sistemi tarafından kullanılacak isimlerin içinde Türkçe karakter kullanmaktan kaçınmak iyi bir programlama terbiyesidir. İçerik bölümünde tarayıcıların desteklemesi şartıyla istediğiniz dili, istediğiniz karakteri kullanabilirsiniz. Bunun için tek zorunluk, içerikte kullandığınız dili HTML’in başlangıç bölümünde bir META etiketle belirtmektir. Örneğin,

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

 böyle bir bildirimdir ve tarayıcıya, bu dosyadaki bilgilerin Türkçe kodlama sistemiyle yorumlanması talimatını vermektedir.

 "<!-- ve !-->"

Bir etiketin içinde yer alabilecek “<!—“ ve “-->” şeklindeki etiketler HTML dilinin yorum etiketleridir; bu etiketlerin arasındaki şeyler, tarayıcıların eski sürümleri tarafından dikkate alınmaz. Bu önlemi almazsanız, örneğin Netscape veya IE’ın eski sürümleri, stil komutlarını içerik gibi ekranda gösterecektir. Bu nedenle <STYLE> etiketini yazar yazmaz, “<!—“ ve “-->” ile </STYLE>’ı yazmayı unutmayın.

Burada iki stil oluşturuyoruz: birine “alt” diğerine “Üst” adını veriyoruz. Kimliklendirilmiş seçiciler kullandığımıza dikkat edin. Daha sonra oluşturacağımız iki nesneyi bu stillere bağlayacağız ve bu stillere adlarıyla gönderme yapacağız. Oluşturacağımız iki nesnenin ekranda mutlak bir yere konulmasını istiyoruz; Onun içinde her iki stile de mutlak bir konum veriyoruz ve yerlerini, pixel ölçüler vererek belirliyoruz.

Nesnelerimiz vücut bulduğu zaman alacakları şekilleri böylece belirledikten sonra sıra nesneleri oluşturmaya geldi. Düz yazı programınızda devam edin yazmaya:

<body bgcolor="#FFFFFF">

<h1>Dinamik HTML--Katman Örneği</h1>

<div id="alt"><img src="alt.gif"></div>

<div id="ust"><img src="ust.gif"></div>

</body>

</html>

Dosyanın tümünü “div01.htm” adıyla kaydedin ama programı kapatmayın; kaydettiğiniz dosyayı tarayıcınızda açıp bakın. Karşınızda şuna benzer bir görünüm olacaktır:Düz yazı programınızda kimlendirilmiş seçicilerin kimliklerine yer değiştirin; yani STYLE etiketi içinde “#ust” kelimesini “#alt”, “#alt” kelimesini de “#ust” yapın; dosyayı “div02.htm” adıyla yeniden kaydedin ve bu kez bu dosyayı açıp bakın. Farkı görebiliyor musunuz?Aynı sonucu, aşağıda nesneleri oluşturduğunuz bölümde, nesnelerin kimliğini değiştirerek de elde edebilirsiniz. Bunun içinde ilgili bölüm şöyle olacak:

 

<div id="ust"><img src="alt.gif"></div>

<div id="alt"><img src="ust.gif"></div>

İki nesnemizin ekrandaki yerini istediğimiz gibi değiştirebiliyoruz. Peki içinde Üst yazılı grafiği alta, Alt yazılı grafiği de üste getirebilir misiniz? Tabiî. Bunun için Katman endekslerini vermemiz yeter. Nesnelerin stillerini tanımladığımız iki satıra endeks sayılarını ekleyelim:

 

#ust {position:absolute; top: 135px; left: 90px; width: 102px; z-index:1 }

#alt {position:absolute; top: 110px; left: 60px; width: 102px; z-index:2 }

Dosyayı “div3.html” adıyla kaydedelim. Tarayıcıda bakalım. İşte görünüm:“Ust” stilinin endeksini 2, Alt stilinin endeksini 1 yaparsanız, Alt isimli nesneniz, altta mı kalır, üstte mi?Bu ev ödevi ile, HTML’de katman kavramına giriş yapmış ve bunu sayfada uygulamış bulunuyoruz. Stil kağıdını değiştirerek, nesnelerimizi hareket ettirmeyi de öğrendik. Burada nesnelerimizi, DIV (Division) etiketi ile oluşturduk. Ama aynı işi SPAN etiketi ile de yapabiliriz. İkisinin arasındaki başlıca fark, DIV etiketinin içine koyacağınız herşey, sayfada kendi başına bir blok oluşturmak zorundadır. Oysa SPAN etiketi ile oluşturacağınız bir nesne, sıradan bir paragrafın içinde olabilir ve paragrafı bölmeden kalabilir. Şimdi, bir iki nesneyi, Javascript dilini kullanarak, sayfamızın görünümünü ziyaretçinin faresini hareket ettiriş tarzına göre değiştirmeye çalışalım.

 

 

Rollover Etkileri

Peşinde olduğumuz etkiye, Webcilerin dilinde Rollover Etkisi deniliyor. Yani bir unsur, bir yazı, bir stil, bir grafik siliniyor, yerini başka bir unsur, başka bir yazı, başka bir stil, başka bir grafik alıyor; biri dönüp, gidiyor (roll-over) yerini başka biri alıyor. Bu hareketliliği başlatan şey, ya da hareketin tetiği, ziyaretçinin fare simgesini ekranda belirli bir yere getirmesi; sayfanın değişmesi, ziyaretçinin klavyesinde bir tuşa basması, sayfaya yerleştirdiğimiz bir müzik dosyasının çalınmasının tamamlanması, vs. olabilir.

Konu, HTML’den çok, daha geniş boyutlu DHTML ilkelerine girdiği için, burada Rollover etkisini kullanarak, örneğin ziyaretçinin bulunduğu yerde saatin kaç olduğuna bakarak, sayfamızın içeriğini bu bilgi ışığında belirlemek gibi, Visual Basic Script (VBScript) veya Javascript dilinin ayrıntılarına giremeyiz. Ama bu dillere başvurmadan, Netscape Navigator ve Internet Explorer’ın dördüncü sürümlerinin bazı becerilerinden yararlanarak basit bir etki oluşturmayı öğrenebiliriz.

Javascript ve VBScript

Etkili Web sayfaları yapmak istiyorsanız, Dinamik HTML’in ana dili haline gelen bu iki dili öğrenmek zorundasınız. Java dili ile hiç ilgisi olmayan ama benzer bir isim taşıyan Javascript dili, Netscape firması tarafından Web sayfalarının bilgisayar programı dillerindeki “Eğer .... ise ... şunu yap! Değilse bunu yap!” şeklindeki karar yeteneğini kazanması için geliştirildi ve derhal Microsoft firması tarafından Internet Explorer’a uygulandı. Bu dil, Netscape’in iddiasına göre, Macintosh, Windows ve Unix işletim sistemlerinde çalışabilecekti. Ancak Microsoft Windows ortamının doğal imkanlarını kullanan Visual Basic dili ile bir Windows programının daha çok yetenek kazanabileceğini gözönünde tutarak, bu dilin Web sürümünü yaptı ve VBScript adını verdi. Netscape firmasının tarayıcı programı, şu ana kadar bu dili tanımaktan mahrum bulunuyor. Bu nedenle Web tasarımcısı olarak, DHTML özellikleri taşıyan Web sayfaları yaptığınız zaman, bu sayfaların hem Netscape, hem de Internet Explorer programları tarafından aynı şekilde tanınmasını istiyorsanız, Javascript dili ile sınırlı olduğunu bilmelisiniz.Şimdi, bir sayfa yapalım; sayfaya koyacağımız Link unsurları, kullanıcı fare simgesini bağlantı kelimelerinin üzerine getirdiği anda, hem biraz büyük fontla gösterilsin, hem de renk değiştirsinler. Yapacağımız sayfaya koyacağımız bu etki, Netscape’in hiç bir sürümünde görülemez. Bu nedenle aşağıdaki örneği Internet Explorer ile sınamanız gerekir.

Önce sayfamıza, giriş ve STYLE bölümlerini yazalım:

<HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">

</HEAD>

<TITLE>Dinamik HTML</TITLE>

<style type="text/css">

<!--

P {font-family: Arial, Verdana, Helvetica; font-size: 12pt; line-height:13pt}

H1 {font-family: arial, helvetica; font-size: 16pt; color: #578D99; line-height:18pt}

H2 {font-family: arial, helvetica; font-size: 14pt; color: red; line-height:16pt}

H3 {font-family: arial, helvetica; font-size: 24pt; color: red; line-height:28pt}

A {text-decoration:none; font-weight: bold}

.yeni {color:red; font-weight:bold; font-size:120%; letter-spacing:0px; text-transform: none}

.normal {color:#578D99}

-->

</style>

</HEAD>

Farketmiş olacağınız gibi, burada STYLE bölümünde HTML’in temel etiketlerinin varsayılan özelliklerini değiştiriyoruz ve iki yeni “Sınıf” seçicisi oluşturuyoruz: “.yeni” ve “.normal.” (HTML’in stille ilgili komutlarını, özellikle seçici isimleri büyük harf-küçük harf bakımından hassas olduğu için burada yazdığınız sınıf isimlerini aşağıda aynen kullanmak zorundasınız.)

Şimdi HTML’in geri kalan bölümünü yazalım:

<BODY TEXT="#000000" BGCOLOR="#CCFFFF" LINK="#578D99" VLINK="#999999" ALINK="#FFFFFF">

<h1>Web Tasarımında Gözetilecek İlkeler:</h1>

<p><a href="ogut1.htm"><SPAN onmouseover = "this.className = 'yeni'" onmouseout = "this.className='normal'" class=normal>Grafikle İlgili İlkeler</span></a></p>

<p><a href="ogut2.htm"><SPAN onmouseover = "this.className = 'yeni'" onmouseout = "this.className='normal'" class=normal>İçerikle İlgili İlkeler</span></a></p>

<p><a href="ogut3.htm"><SPAN onmouseover = "this.className = 'yeni'" onmouseout = "this.className='normal'" class=normal>Davranış Kuralları</span></a></p>

</BODY>

</HTML>

Burada ise Javascript dışında şimdilik sadece IE4’ün anladığı bir komut olan “onmouseover” (Fare üzerine geldiğinde) ve “onmouseout” (Fare üzerinden gittiğinde) komutlarını kullanarak, A etiketlerinin üzerine fare simgesi geldiğinde “yeni” sınıfının özelliklerini almasını, fare simgesi üzerinden çekildiği anda “normal” sınıfına geçmesini bildiriyoruz. A etiketlerimizi STYLE bölümünde “normal” sıfınının özelliklerine kavuşturduğumuz farketmiş olmalısınız. Bu sayede A etiketi ile işaretlenen metin, tarayıcının varsayılan stili olan altı çizgili mavi metne dönmeyecektir.Bir unsurun HTML’in tanıdığı “Nesne” halini alabilmesi için ya DIV ya da SPAN etiketleri içine alınması gerektiğini söylemiştik. SPAN etiteki, DIV’den farklı olarak, içine aldığı ve Nesne yaptığı unsuru sayfada yeni bir paragraf haline getirmez, demiştik. Nitekim, deremiş olmak için, A etiketlerinden önceki <p> ve </p> etiketlerini kaldırır, yerine bir aralık koyarsanız, SPAN ile oluşturduğunuz unsurların yanyana dizildiklerini göreceksiniz.Hazır deneme yapmaya başlamışken, bir de STYLE bölümünde, “.yeni” sınıfının “font-size:120%” şeklindeki font ölçüsü komutu ile oynayıp, yüzde 120’yi, örneğin yüzde 160 yapın!







Web'e Giriş İçin Tıklayınız

HTML'nin Temel Unsurları İçin Tıklayınız

Tablo ve Çerçeveler ve Katmanlar İçin Tıklayınız

HTML'de Form ve CGI İçin Tıklayınız

Sonuç İçin Tıklayınız



                                      
 Ana Sayfaya Dönmek İçin Tıklayınız

Bugün 4 ziyaretçi (11 klik) Sevenimiz Buradaydı !!!



Zirve100
Bilgisayar ve İnternet
PR3 TOPLIST, LINK EKLE.
Copyright © 2007-2013 ironarchives Corporation® All Rights Reserved. | Edit by IRONsKING™ |

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol