SUNUŞ............................................................................................4Dil Deyince:...................................................................................................10
BÖLÜM I: WEB’E GIRIŞ......................................................................11
Temel Bilgiler......................................................................................11
HTML’e Genel Bakış.............................................................................12
HTTP ve TCP/IP....................................................................................14
Web Server.........................................................................................17
Web Tarayıcıları...................................................................................23
Microsoft Internet Explorer..................................................................................24
Netscape Navigator.............................................................................................25
Diğerleri...............................................................................................................25
Yaygınlık Oranları................................................................................................27
Yardımcı Programlar ve Ek Birimler.....................................................................27
Java, ActiveX........................................................................................................29
BÖLÜM II: HTML’IN TEMEL UNSURLARI.................................................30
Etiketler (Tag)......................................................................................................30Düz Yazı Dosyası ve HTML.............................................................................31HTML mi, HTM mi?.........................................................................................32Büyük Harf, Küçük Harf?................................................................................34
HTML Dosyasının Bölümleri.................................................................................35Açtığınızı Kapatmayı Unutmamak İçin...........................................................35“Open” mı, “Browse” mı?..............................................................................36HTML Editörleri..............................................................................................38
Web Sayfasının Biçimlendirilmesi.........................................................39Harf Genişliği.................................................................................................40
Yerel Biçimlendirme.............................................................................................43Yeni Paragraf ile Yeni Satır’ın farkı.................................................................44Internet’te Font meselesi...............................................................................46SERIF-SANS SERIF Harfler:.............................................................................46
Metin Düzenleme Etiketleri..................................................................................48
BÖLÜM III: TABLO VE ÇERÇEVELER VE KATMANLAR....................................61Bir Pixel Kaç Santim?.....................................................................................61
Tablolar...............................................................................................63
1
Başlık, Satır ve Veri Etiketleri...............................................................................64Açtığınızı Kapatın!..........................................................................................66
Tablo Unsurlarının Kontrolü.................................................................................66
İskelet Malzemesi Olarak Tablo...........................................................................69Renk Şifresini Çözdünüz mü?.........................................................................72Elinize geçeni sayfanıza koyabilir misiniz?.....................................................74
Çerçeveler...........................................................................................80
Çerçevenin Unsurları: Sütunlar ve Sıralar............................................................81
Eşit Sayıda Olmayan Sütun ve Sıralar..................................................................86
HTML’de Bağlantı’ya Giriş....................................................................89
Metinlere Bağlantı Kazandırmak.......................................................................89
HTML’de Bağlantı Türleri..................................................................................92
Sayfada Diğer Unsurlara Bağlantı Kazandırmak:..............................................94
Bağlantılı Çerçeve Uygulaması.........................................................................94Ters Bölü İşaretine Ne Oldu?.......................................................................100
Bağlantıları Grafiklere Yerleştirmek: Düğmeler...............................................104
Katmanlar ve CSS Teknikleri: Dinamik HTML’e Giriş.............................106
HTML’de Nesne Kavramı....................................................................................109
Cascading Style Sheets (Yığılmalı Stil Kağıtları)..............................................110Peki bir HTML sayfasına hem LINK, hem de EMBEDED stil sayfası verirsek, ne olur?............................................................................................................113
Stil kurallarını Nesnelere Uygulamak.................................................................114
Harf Seçiciler..................................................................................................115
Sınıf Seçiciler..................................................................................................115
Kimlikli Seçiciler..............................................................................................116
Sınıfımsı Seçiciler............................................................................................117
Bağlamsal Seçiciler.........................................................................................118
Denetlenebilir Özellikler.....................................................................................118
Font Özellikleri:...............................................................................................119
Renk ve Zemin Özellikleri:..............................................................................121
2
Metin Özellikleri:.............................................................................................122
Konum (Pozisyon) Özellikleri..........................................................................124
Diğer Özellikler...............................................................................................126
Bir Nesne Yapalım..............................................................................................127
Sabit Nesneler................................................................................................127“Üst” mü, “Ust” mu?...................................................................................128
Rollover Etkileri..............................................................................................131Javascript ve VBScript.................................................................................132
BÖLÜM IV: HTML’DE FORM VE CGI...................................................136
Formun Bölümleri..............................................................................137
Action ve Method...............................................................................................138
Doldurulacak Boşluklar ve İşaretlemeler............................................................139
INPUT..............................................................................................................139
SELECT...........................................................................................................141
TEXTAREA.......................................................................................................142
Gönder ve Sil düğmeleri....................................................................................142
Örnek.................................................................................................................143
CGI....................................................................................................149
3
SunuşBu kitapçıkta, Internet ve firmaların kendi yerel ağları içinde kuracakları dahilî
Internet (intranet) için gerekli dosyaları oluşturma yollarından biri, HTML dilinin temel
bilgileri yer alıyor. HTML için “dil” dedik; ama bu biraz açıklamaya muhtaç bir ifade.
Farklı bilgisayarlar ve kelime-işlem programları arasında, yazı dosyalarının
biçimlendirilmesinde ortak bir yöntem bulma çabası, 1986’da, Dünya Standartlar
Enstitüsü tarafından Standart Genelleştirilmiş İşaretleme Dili (Standart Generalized
Markup Language, SGML) adıyla birleştirildi. Burada kullanılan dil, “program yazma
dili” teriminde olduğundan pek de farklı değil. Fortran, Basic, Cobol gibi bir program
yazma dili, bilgisayara, kendisine verilecek talimatların nasıl bir yöntemle verileceğini
ve bu talimatlar üzerine ne yapması gerektiğini belirtir. SGML ile ondan türetilen
HTML ve XML “dilleri” kullanılarak oluşturulan belgeler, programlama dillerinden farklı
olarak doğrudan bilgisayarın işletim sistemine değilse bile bir yazılıma, örneğin
kelime-işlemcisine ya da veri-işlemcisine “aşağıdaki veriyi ekranda şöyle göster,
yazıcıdan da şöyle çıkart” anlamına gelen komutları da içerdiğine göre, bir anlamda
“dil” sayılabilir.
Ne var ki, SGML ve ondan türetilen HTML ve XML’in bir uygulama programı
tarafından anlaşılabilmesi için, bu yöntemle kendisine verilecek bilgileri nasıl
işleyeceğine ilişkin bilgilerin önceden, programın içine işlenmiş olması gerekir. Yani,
bir programın HTML’i anlayabilmesi için, içinde HTML’i anlama ve yorumlama
komutlarının olması gerekir. Bu anlamda, işin program tarafı başka birisi tarafından
yapılmış sayılabilir; bizim HTML ile yaptığımız sadece veri oluşturmak şeklinde
yorumlanabilir. Bu açıdan SGML ve türevleri dil sayılamazlar.
Gerçek bilgisayar programcıları, HTML gibi, bilgisayara hem bilgileri, hem de
bu bilgilerin nasıl işleneceğini gösteren “metinleri” dil saymazlar. İster “dil” sayılsın,
ister sayılmasın, HTML, kısaca tanımlarsak, Netscape Navigator, Internet Explorer,
4
Mosaic, Spry gibi, bilgisayar kullanıcısı, bilgisayar ve Internet arasında arabirim görevi
yapan programların anladığı bir veri ve komut ulaştırma yöntemidir; diğer bilgisayar
programlarından farklı olarak sabit disk veya disket gibi bilgisayar kayıt ortamlarına
kaydedilirken, düz yazı olarak kaydedilir; herhangi bir düz yazı programı ile
oluşturulabilir, okunabilir ve değiştirilebilir. Diğer bilgisayar programlarından farklı
olarak, disk ve disketlere yazılırken Binary-İkili sistemle yazılmaz; içinde 16 Tabanlı-
Hexadecimal komutlar yoktur; herşey standart düz yazı olarak yer alır. Buna karşılık
herhangi bir düz yazı dosyasından farklı olarak “metnin” içinde “<” ve “>” işaretleri
arasında yeralan Ingilizce bazı komut-kelimeleri vardır.
HTML, önceleri Macintosh ardından IBM uyumlu bilgisayarlarının yardım
dosyalarının oluşturulmasında kullanılan bir yöntem olarak yaygın bir kullanım alanı
buldu. Ancak, HTML kısaltmasının açık şekli olan Hypertext Markup Language’de
geçen Hypertext terimi, 1950 yılında Ted Nelson adlı bir bilgisayar uzmanı tarafından
içinde “hot,” yani başka bir metinle veya resimle ilintilendirilmiş noktalar bulunan
metin anlamına kullanılmıştı. Apple firması, bu yöntemi ekranda gösterilen yardım
metinlerinin içinde bir kelimeyi veya simgeyi tıklayarak ilgili başka bir başka metne
veya simgeye gitme yöntemi olarak kullandı. Metinler böylece “hyper” hareketli hale
geliyordu.
1989 yılında, Avrupa Parçacık Fiziği [Atom] Laboratuvarı CERN uzmanlarından
Tim Berners-Lee, laboratuvar yönetimini ortak bir yazı biçimlendirme sistemine ikna
edebilmek için, “Enformason Yönetimi: Bir Öneri” başlıklı bir rapor hazırladı. Bu
raporda, daha sonra bugünkü Internet’in temeli olacak bilgisayar şebekeleri arası
ağda bilgi alış verişi için Hypertext’in ortak yöntem olmasını önerdi. Ve bu öneri
bugün dördüncü sürümüne ulaşmış olan HTML dilinin temeli oldu.
Bugünkü Internet’i Internet yapan iki unsur var. Birincisi bilgisayararası
iletişimi gerçek zamanlı olmaktan çıkartan bağlantı protokolünün (HTTP)
geliştirilmesi; diğeri ise HTML dilinin ortak dil olarak benimsenmesini mümkün kılacak
5
basitlikte olmasına karşın, bir metnin biçimlendirilmesi ve resim, ses, video gibi diğer
unsurlarla bütünleştirilmesini sağlayabilecek yeterlikte olması. Bunu biraz açalım:
Bugünkü Internet’in temeli olan üniversiteler ve araştırma kurumlarının
bilgisayar ağlarını birbirine bağlayan ağlar 1980’lerin başlarında bağlantının gerçek
zamanlı olmasını gerektiriyordu. Internet’in adı da ağlar-arası ağ anlamına gelen
İngilizce “Inter-networks-network: Inter-net kısaltmasından doğuyor. Bir bilimadamı
bir başka bilimadamının bilgisayarının bulunduğu ağa bağlandığı zaman, bu bağlantı,
gerekli dosyanın bir bilgisayardan diğerine aktarılması süresince devam etmek
zorunda idi. İki bilgisayar aralarında gidip-gelen bilginin hata kontrolünü ancak
gerçek-zamanlı bağlantı olursa yapabiliyorlardı. HTTP (Hypertext Transmission
Protocol-Hypertext Iletim Kuralları) ise iki bilgisayarın alış-verişin hatasız olduğunu
denetlemek için, bilginin tümü alınıp-verilinceye kadar birbirine bağlı kalmaları
zorunluğunu ortadan kaldırıyor. Bu zorunluğun ortadan kalkmasının önerimini bir
örnekle anlatalım. Otomobille bir yerden diğerine gideceksiniz. Takip edeceğiniz
yolda inşaat var, ve yol kapalı. Yolun kapalı kesimini atlamanız için gerekli servis
yolunu da yok. Bu durumda yolculuğunuz ilk engelde sona ermiş demektir. Oysa daha
dolambaçlı da olsa bir servis yolu olsaydı, yolunuza devam edebilirdiniz. Sözünü
ettiğimiz kurallar demetini size sürekli bir servis yolu sağlamayı öngörüyor ve bu
yolun hem gidişte, hem de gelişte izlenecek levhaları gibi, kıt’alar arası telefon
bağlantılarının kesilmesi halinde, bilgisayarlararası iletişimin devamını sağlıyor.
HTTP’nin resmen standart olarak tanınması, 1990 yılında World Wide Web
Konsorsiyomu’nun (W3C) kurulmasıyla mümkün olduğu için, bugünkü Internet’in de
doğum tarihi 1990 yılı sayılabilir. Doğumundan bu güne 10 yıl bile geçmemiş olduğu
halde, Internet’in hem HTTP, hem de HTML ilkeleri ihtiyaca yetmemeye başladı.
W3C, şu anda HTTPNG (Gelecek Kuşak) adını verdiği, standart üzerinde çalışıyor.
Bu yeni kurallar demeti, HTTP’nin özellikle ses ve video gibi henüz ortak standarta
kavuşturulmamış çoklu-ortam malzemelerinin alınıp-verilmesini kolaylaştırmayı
6
öngörüyor. HTML’in önceden tanımlanmış komutlarını, Internet sayfası hazırlayanların
kendi ihtiyaçlarına göre değiştirmesi sağlayan olan XML (Extensible Markup
Language-Genişletilebilir İşaretleme Dili) ise bugün-yarın Netscape ve IE tarafından
kabul edilir hale gelecek. Bu arada duragan bilgi kümesi alıp-verebilen HTML’e,
dinamik-değişken özellikler kazandırmayı öngören ekler ortaya DHTML ilkelerini
çıkarttı. Ne var ki DHTML diye adlandırıbalicek ortak bir standart olmaması, bunun,
hiç değilse şimdilik, Internet ile bağlantı sağlayan programların sürümüne göre
değişik anlamlar taşıması, Internet alanları için veri hazırlayanların (Web sayfası
yapanların) çektiği sıkıntıyı artırıyor. XML ise ortak bir dinamik Web sayfası standardı
getirmekten çok, ihtiyaca göre değiştirilebilir HTML oluşturmayı öngörüyor.
HTML’in belki Internet’teki pabucu tümüyle olmasa bile kısmen dama atılabilir.
Ama firmaların kendi yerel ağ ortamlarında haberleşme ve bilgi alış-verişinde giderek
daha sık uygulamaya başladıkları Intranet, Web gibi, giderek daha geniş kitlelerin
ilgisini çekebilmesi için televizyon özelliklerine sahip olmak zorunda değil; HTML’in
bugünkü haliyle izin verdiği çoklu-ortam uygulamaları, herhangi bir firmanın en ilgi
çekici ve en etkili tarzda iç-iletişim yapmasına yeter. Başka bir deyişle, HTML,
Internet’te ve intranet’lerde daha uzun süre yaşayacaktır.
Biz bu kitapçıkta daha çok Internet ve Internet’te yer alan sanal ortamlardan biri
olan World Wide Web (Dünya Çapında Ağ) ortamından söz edeceğiz. Ancak bir çok
yerde Internet sözünü kaldırıp, yerine intranet kelimesini koyarsanız, o bilgilerin Web
kadar, bir firmanın yerel ağında oluşturacağı dahilî internet’e de uygulanabilir
olduğunu göreceksiniz.
Klasik HTML’in temel ilkelerini biraraya getirmeyi öngören bu kitapçık, bugün
olduğu gibi, ilerde de, Internet için olduğu kadar intranet için de Web sayfası
hazırlamak isteyenlerin başvurabileceği bir kaynak olmak üzere kaleme alındı. Bu
kitapçığın Internet protokolleri (iletim kuralları) ve Web tasarım ilkelerine ayrılan ilk
iki bölümü, konuya aşina olmayanların temel bilgileri edinmeleri, konuya yabancı
7
olmayanların ise bir çok yerde parça-parça duyduklarını bir arada görerek, bilgilerini
tazelemelerini amaçlıyor. Daha sonraki bölümler ise ilerde, HTML kullanarak Web
tasarımı yaptığınız zaman, örneğin bir komutun, bir etiketin kolay hatırlanmayan
yüklemlyerini (parametrelerini) hatırlamak üzere başvurabileceğiniz bir rehber
niteliğinde.
Konuya aşina olanların tümüyle atlayabilecekleri birinci bölümde, WWW, HTTP,
TCP/IP ve HTML kısaltmalarının anlamını ve ne işe yaradığını en az birer paragrafta
anlatabilecek kadar bu konunun içinde olmayanların yararlanabilecekleri bilgiler yer
alıyor. Bir Web alanında, ya da daha teknik terimle HTML sayfasında, başlıca unsur
metin olduğu için, kitapçığımızın ikinci bölümünü, HTML kodunun ana araçlarını
tanıttıktan sonra metin girme ve metni biçimlendirme konusuna ayırdık. Ancak
HTML’in metinle ilgili araçları, görsel açıdan etkili ve bir iskeleti olan sayfa inşasına
izin vermediği için, bir anlamda metin sunma araçları olan tablo, çerçeve ve katman
unsurlarından sayfa iskeleti oluşturmak için yararlanmak zorunda kalıyoruz. Bu üç
unsura, üçüncü bölümde ayrıntılı olarak yer veriyoruz. Bu noktaya kadar
değinmediğimiz fakat bugünkü Internet’i Internet yapan unsura, yani bir sayfadan
diğerine, bir grafikten bir diğerine, bir kelimeden bir başka paragrafa, kısaca bir
bağlantı noktasını tıklayarak, dünyanın öbür ucuna gitme imkanı veren bağlantı
konusunu dördüncü bölümde ele alacağız. Bu noktada, duragan yani bağlantıları
konulmuş ama kendiliğinden hiç bir şey yapmayan bir Web alanı oluşturmayı
öğrenmiş olacaksınız. Fakat günümüzde Web alanları, ziyaretçinin kullandığı
tarayıcının türünü ve hatta sürümünü belirleyip, ona göre içerik sunan, ziyaretçinin
önceki ziyaretinde neler yaptığı, hangi sayfalarla ilgilendiğini hatırlayıp, bu kez ona
uygun bağlantılar veren dinamik alanlar haline geldi. Bunu sağlayan Dinamik HTML
(DHTML), beşinci bölümün konusunu oluşturacak. Altıncı bölüm ise, belli başlı HTML
kodlarının (etiketlerin) tanımları, kullanıldığı yerler, alabilecekleri yüklemler
(parametreler) ve örneklerine yer verdiğimiz Başvuru bölümü olacaktır.
8
HTML’e hayat veren, kişisel bilgisayarları Internet’e ve intranetlere bağlayan
tarama programlarının bu dili nasıl ve ne ölçüde yorumladıklarıdır. Şu anda dördüncü
sürümü yavaş yavaş uygulama bulan bir formüller topluluğu, gelişen bir organizma
gibi. Bir süre sonra bu kitapçıkta yer almayan HTML etiketleri karşınıza çıkabilir, ve
Web tasarımcısı olarak bu yeni komutları, kullanıldıkları yerleri ve işlevlerini, bu
kitaptaki bilgilere eklemek zorunda kalabilirsiniz.
Hayat, zaten, baştan sona bir öğrenme süreci değil mi?
Dil Deyince:HTML kısaltmasını bile Türkçe’ye çevirmediğimize bakarak, bu kitapçığın yarı
İngilizce olduğunu düşünebilirsiniz. Fakat bu kitapçık bir dilin, geçmişi ile geleceği ile,
bilim ve kültürün her alanında ifade imkanına sahip olması gerektiği inancıyla kaleme
alındı. Türkçe’ye bu imkan, başka dillerden alınan kavramların öncelikle Türkçe ifade
edilmesi ile kazandırılabilir. Bunu yaparken, bazı kelimelere yeni anlamlar yükleyerek
görev alanlarını biraz uzatmak ve bunu önce ilgili topluluğun, sonra tüm toplumun
onayına sunup beklemek gerekir. Ama Türkçe’nin kendi türetme kurallarını hiçe
sayarak, ilgisiz fiillere hiç olmayacak ekler ekleyip, ortaya yeni isimler çıkartmak asla
kabul edilebilir bir uygulama olamaz. Anlamını karşılayamadığımız, ya da mevcut
kelimeleri biraz çekiştirerek uyduramadığımız İngilizce kelimeleri çevirmek için yeni
kelime uydurmadık, öylece kullandık ve açıklamaya çalıştık. Elbette dil ve toplum bu
kavramları karşılayacak kelimeler üzerinde anlaşacaktır.
9
Bölüm I: Web’e Giriş
Temel BilgilerBu bölümde, HTML ile neler yapılabileceği ve neler yapılamayacağına bakacağız.
Yine bu bölümde, tasarlayacağınız Web alanlarının, sizin (ya da sayfalarınıza ev
sahipliği yapacak firmanın) bilgisayarlarından, ziyaretçinin bilgisayarına ulaştırılma
yollarına değineceğiz. Sonuç itibariyle, Web alanı tasarlayan kişi, bu ulaşımın ucunda,
ortasında ve sonunda da yer alan programlara, onların imkan ve sınırlamalarına
bağımlı demektir. HTML’i kullanarak Web sayfası tasarlayacak kişinin bunu bir şekilde
başkalarının hizmetine sunacağı varsayılır. Bu nedenle, HTML öğrenen kişinin
sonunda bir Web alanına sahip olacağını düşünebiliriz. Dolayısıyla bu bölümde,
kısaca, Web hizmeti sunmakta kullanılacak bilgisayarların sahip olmaları gereken
donanım ve yazılım özelliklerinden de kısaca söz edeceğiz. Web Server’a koyacağınız
HTML sayfaları ne kadar fiyakalı olsa da, HTML’in imkan ve yetenekleri, onu alan ve
yorumlayan tarayıcı (browser) programının yetenekleri ile sınırlıdır. Bu nedenle Web
tasarımcının, tarayıcı programları çok iyi tanıması gerekir. Bir tarayıcıda adeta
televizyon filmi gibi gösterilebilen bir unsurun yerini, başka bir tarayıcıda gri zeminli
boş bir kutu alabilir. Ya da aynı tarayıcıya sahip olan iki ziyaretçiden biri, sayfanıza
girdiği anda en sıcak ve candan sesli hoşgeldiniz mesajınızı dinlerken, diğeri hiç bir
şey duymayabilir. Tarayıcılar kadar, tarayıcıların özelleştirme yeteneklerini tanımak
ve kullanıcıların genellikle ne gibi özelleştirmeler yapabildikleri hakkında fikriniz
olması gerekir. Bu nedenle, bu bölümün sonunda mevcut en yaygın tarayıcıların ortak
ve farklı önemli özelliklerine de bakacağız.
HTML’e Genel BakışProgramlama dili gibi görülse de, görülmese de, bugün Internet’in de
intranet’lerin de ortak dili, HTML’dir. Bir Web sayfasında yer alan belgenin içindeki
bazı kelimeler, simgeler, fotoğraflar, grafik unsurlar veya bunların parçaları bir başka
10
sayfa ile hiper-link kurularak, ilentilendirilmiştir. Kullanıcı, hiç bir komut öğrenmek
zorunda kalmadan, hiç bir bağlantının Internet’teki adresini bilmek zorunluğu
olmadan bu sayfalardaki bağlantıları tıklayarak, yazıdan yazıya, şekilden şekilde,
gidebilir. Ta ki, arzu ettiği bilgiyi bulup, okuyuncaya, kendi diskine veya disketine
kopya edinceye veya yazıcısında basıncaya kadar. Aslında kullanıcı ya da ziyaretçinin
bir HTML sayfasıyla ilişkisi burada da bitmemektedir. Çoğumuz ulaştığımız bir alanın
adresini Web tarayıcı programında sık sık ziyaret etmek istediği yerlerin arasına
koyabilir (bookmark) ve arzu ettiği zaman doğruca işaretlenmiş olan bu adreslere
gidebilir.
HTML’in başlıca özelliklerini şöyle sıralayabiliriz:
1. Belge biçimlendirme: HTML, Wes tasarımcısına, belgelerini ziyaretçinin
ekranında nasıl oluşmasını istiyorsa öyle şekillendirme imkanı verir.
Bununla birlikte tarayıcı programlarının (Netscape Navigator veya Internet
Explorer) HTML komutlarını yorumlayışlarında az da olsa fark vardır ve bu
fark sayfalarınızın bir ziyaretçinin bilgisayarında başta, diğerinin
bilgisayarında başka gösterilmesine yol açabilir. Ayrıca ziyaretçileriniz,
tarayıcı programlara verdikleri komutlarla, aldıkları sayfalarda genel
değişiklik veya kısıtlamalar yapabilirler. Siz sayfanızda ne tür harf türü
(font) kullanmış olursanız olun, ziyaretçiniz tarayıcı programa “Sadece
Times fontları kullan” demiş ise, sayfanız bu ziyaretçinin ekranında sizin
istediğinizden farklı biçimde görülecektir. Ziyaretçi tarayıcı programına
“Grafik unsurları gösterme!” demiş ise, sayfalarınız ve tabiî vermek
istediğiniz görsel mesaj tamamen farklı bir nitelik kazanacaktır. Bu duruma
rağmen, bugünkü şekliyle HTML, Web tasarımcısına adeta bir gazete ya da
dergi sayfası tasarlarcasına, oluşturmak istediği görsel etkiyi sağlamasına
yeterli tasarım araçları sunmaktadır.
11
2. Bugünkü imkanlarıyla HTML, Web sayfası terimine yeni bir anlam
kazandırmış bulunuyor. “Web sayfası” terimi bile, eski, yani dört-beş yıl
öncesinin Web sayfaları, içi bir örnek harflerden oluşan yazılarla dolu,
duragan belgelerden ibaret bulunduğu için ortaya atılmıştı. Bugünkükü
Web sayfalarının “sayfa” kavramı ile dahi ilgisi kalmadı. Bugün sadece
HTML ögeleri kullanılarak, ziyaretçinin ekranında adeta bir televizyon
programının grafik etkisini sağlamak mümkün. Bununla birlikte HTML, bir
kelime işlem ya da masaüstü yayıncılık programının oluşturabileceği görsel
özelliklere sahip sayfalar oluşturamaz. Bu kısıtlamalara, Internet’i
tasarlayan uzmanların, platformlar (Windows 3.x, Windows 95/98,
Windows NT, Unix, MacOS), donanımlar (Macintosh, PC, Sun) ve tarayıcı
programlar arasındaki farkların, sunulacak malzemenin tasarımcının
kastettiğinden tamamen farklı bir şekilde sunulmasına yol açmasını
önleme arzusu neden oluyor. HTML, örneğin bir masaüstü yayın programı
kadar hassas ölçmelere ve biçimlendirmelere izin verse idi, bu ancak belirli
bir platformda, belirli bir program kullanmayı gerektirirdi. Oysa Internet’i
Internet yapan unsurların başında, hemen herşeyin ekranda ve kağıt
üzerinde, ortak denilebilecek şekilde oluşturulması geliyor.
3. HTML ile oluşturulacak statik alanların içine dinamik sonuçlar doğuracak
programlar konulabilir. Bu programların oluşturulması için, ziyaretçinin
Internet’e PC veya Macintosh ile bağlanmış olması, ya da bağlantı
programının şu ya da bu firmaya ait bulunması gibi farklılıklardan
etkilenmeyen, her türlü ortamda aynı sonucu veren ortak bir dil geliştirme
çabası, ortaya Java adlı programlama dilini çıkartmış bulunuyor.
Microsoft’un Visual Basic programlama dilinin bir türevi olan VBScript ve
çeşitli firmaların ortaklaşa ürünü Javascript de bu tür çabaların
sonuçlarıdır. Adı benzemekle birlikte, Javascript’in Java ile, VBScript’in de
Visual Basic ile ilgileri yoktur. Internet tarayıcı programlarından Internet
12
Explorer hem Javascript, hem de VBScript dillerini anlayabilir ve
yorumlayabilir. Buna karşılık Netscape tarayıcı programı VBScript diliyle
yazılmış bölümler içeren bir HTML metnini yorumlayarak, ekrana
getiremez. Bugünkü şekliyle Java dili de, Javascript ve VBScript de, tarayıcı
programların imkan ve kabiliyetleri ile sınırlıdır. Ancak her üç dili
kullanarak, HTML sayfalarını duraganlıktan çıkartmak ve ziyaretçi ile
etkileşen, ziyaretçinin arzu, beğeni ve özelliklerine göre içeriğini
değiştirebilen Web alanları tasarlamak mümkündür
HTTP ve TCP/IPWeb sayfası tasarlarken, dikkat edeceğiniz en önemli unsur, sayfalarınızın
içeriğinin sunuluş biçiminin önemli ölçüde ziyaretçinin bilgisayarının türü (Mac, PC,
Sun), ziyaretçinin işletme sistemi (Windows 3.x, 95/98, NT, MacOS, Unix) ve
kullandığı tarayıcı yazılımı (IE, Netscape, Mosaic, vs.) tarafından belirleneceği
olmalıdır.
Bir Web sayfasının ziyaretçinin ekranına kadar kat’ettiği yolda çeşitli protokoller
(kurallar) var. Bunların başında bir bilgisayar ağı olan Internet’in iletim kuralları
(HTTP) geliyor. Hypertext dosyalarını olduğu kadar çoklu ortam unsurlarını (ses, video
ve diğer grafik ögelerden oluşan Multimedia dosyalarını) ve bilgisayar programlarını
ağ içindeki bilgisayarlar arasında alıp-vermeye yarayan başka protokoller de vardır:
FTP (File Transfer Protocol-Dosya Aktarma Kuralları) bunlardan biridir.
Internet bağlantısı, bir telin iki ucunda bulunan iki bilgisayar arasındaki ilişki
olarak görebilirsiniz. Sizin Web sayfalarınızın durduğu bilgisayar Web ilişkisinde
“Server” (Hizmet eden) diye adlandırılır. Ziyaretçinin Internet’e telefon bağlantısı ile
bağlı bilgisayarı, ise sizin için Client-Müşteri sayılır. Hizmet veren bilgisayarla, bu
hizmetin müşterisi olan bilgisayar (Server ile Client) arasındaki ilişkiyi düzenleyen
kurallara TCP/IP adı verilir (Transmission Control Protocol/Internet Protocol-İletim
13
Denetim Kuralları/Internet Kuralları). Gerek HTTP, gerekse FTP, müşterinin, sizin
bilgisayarınızdan, yani Web Server olarak adlandırdığımız HTML sayfaların ve bu
sayfaların içinde yer alan resimlerin, grafiklerin, ses ve video dosyalarının durduğu
bilgisayardan bilgi isteme ve bu istediğine karşılık verildiğinde verilen karşılığın doğru
gelip gelmediğini anlamasını sağlar. İki bilgisayarın üzerinde anlaştıkları bir tür
konuşma adabı diyebileceğimiz bu kurallara uygun mesajlarını, kıt’adan kıt’aya,
ülkeden ülkeye, kentten kente, yeraltı ve sualtı kabloları ile, uydularla iletirler.
Tahmin edilebileceği gibi, müşteri bilgisayar ile servis sunan Web Server arasında
oluşan bu bağlantı, bazen kesilebilir. Fizikî bağlantının kesilmesi, iletimin kesilmesi
anlamına gelmemesi için, Internet Kuralları’nın IP bölümü, iki bilgisayar arasındaki
bağlantının doğru kanallardan kurulmasını, kesildiğinde yeniden kurulmasını sağlar.
Bunu yaparken, evrensel bir adres sisteminden yararlanır. Internet’te servis sunan
bilgisayarlar, başka bir deyişle Web Server’lar kaynak sayıldığı için, IP, aradığı
kaynağı Universal Resource Locator (URL) sistemini kullanarak bulur. Aynı kurallar
demetinin TCP bölümü ise kurulan bağlantı sayesinde gelen bilginin doğru
anlaşılmasını sağlar.
Aslında her bilgisayar, CPU ile ekran, CPU ile klavye, CPU ile CD-ROM sürücü
arasında bir ağ demektir. Bir büro ortamında bir bilgisayar ile merkezdeki Server, bir
ağın parçalarıdır. Bu ağların Internet denen dev ağdan farkı, sizin bilgisayarın CPU’su
ile klavyesi, ekranı ve yazıcısı arasındaki bağ, yine bir büro ortamındaki bilgisayar ile
merkez bilgisayar arasındaki ilişki, “sabit durum” ilişkisidir. Yani, bu ağlarda iki taraf
birbirinin durumuna her an vakıftır; birbirlerinin ne durumda olduklarını her an bilirler.
Oysa, iki kıt’a arasında kurulmuş bir Internet ilişkisinde, müşteri hizmet verenin,
hizmet veren müşterinin durumunu, bağlantıdaki kesilmeler nedeniyle, bilemeyebilir.
Bu nedenle TCP/IP, “durumun bilinmediği ilişki” esasına dayanır. Müşteri bilgisayar,
servis sunucudan istediğini HTTP veya FTP kurallarına göre talep eder. Bunun için
Web Server’ın kendisini bulup, bu talebi doğruca ona iletmesine gerek yoktur; bu
talebini kendisine Internet bağlantısı sağlayan (ISP) firmanın bilgisayarına iletmesi
14
yeterlidir. Bunu yaparken talep ettiği şeyin adını-sanını bildirdiği gibi bulunacağı
kaynağı belirlemek için gerekli, adresi de (URL) bildirmek zorundadır. Internet hizmeti
sağlayan firmanın bilgisayarı, bu talebi ve talebi karşılayacak kaynağın adresini,
Internet’in omurgası olarak adlandırılan ana bağlantıyı kuran bakımını yapan ve
ISP’lere hizmet sunan firmanın bilgisayarına iletir. Ana omurga firmasının
bilgisayarlarında dünyadaki tüm Internet kaynaklarının listesi ve onlara ulaşmak için
hangi omurgadan kime yol açılması gerektiğini gösteren bir liste bulunur. Ana
omurga şirketinin bilgisayarı bu listeye göre, müşterinin talebini diğer bir ana omurga
firmasına, o firma da bunu hedef Web Server’a ev sahipliği yapan (host) bilgisayara
iletir. Bu talep, hedef Web Server’a talebin konusu ve talep edenin adresi ile birlikte
bildirilir. Sizin müşteri olarak o sırada sadece kendi Internet hizmet sunucunuzla
bağlantınız sürmektedir; yoksa sizin bilgisayarla hedef Web Server arasında
doğrudan, bire-bir ilişki yoktur. Hedef Web Server, müşteri olarak sizin kim olduğunu
ve size nasıl ulaşabileceğini, ancak kendisine gelen talebin altındaki adresten
bilmektedir. Web Server, sizin o anda kendi Internet Hizmet Sunucu’nuzla arasındaki
bağlantının devam edip etmediği ile hiç mi hiç ilgilenmez. Onun için önemli olan
kendisine iletilen talebin karşılığını, talebin altındaki adrese iletmekten ibarettir. Aynı
yol bu kez tersine kat’edilir; arzu ettiğiniz bilgi (sayfa, belge, video, ses, resim,
fotoğraf, vs.) sizin ekranınıza ulaşır. Kısaca, ne talep sahibi müşteri bilgisayar, ne
talebi karşılayan Server bilgisayar, bir diğerinin o anda nerede ve ne durumda olduğu
ile ilgilenmez. Bu “durumdan haberdar olmama” hali ve etkilerine, ilerde Internet’te
ticaret bahsinde geri döneceğiz.
Web ServerHTTP ve FTP, müşteri bilgisayarla, servis sunan bilgisayarın üzerinde anlaştıkları
bir dille (HTML) birbirine ilettikleri talep ve talebin karşılığı olan malzemenin alınıp
verilmesinde TCP/IP denilen kurallardan yararlanılarak yapılan iletimi düzenleyen
ilkelerdir. Bu ilkelere uygun olarak çıkartılan bir talep Web hizmeti sunan bilgisayar
15
tarafından karşılanır ve karşılık olarak belirli bir bilgi kümesi müşteri bilgisayara
iletilir.
Web server olarak tayin edilmiş bilgisayarda, kendisine gelecek HTTP ve FTP
taleplerini anlamasına ve bu talepleri yerine getirmesine yarayan programlar
(örneğin Apache Web Server, MS Internet Information Server veya Netscape Web
Server) sürekli çalışır vaziyette olur. Bu programların, bilgi alıp-vermenin yanı sıra,
elektronik posta alıp verme ve yönlendirme, veritabanlarına erişme ve içinden seçme
yapma (Querry, SQL, vb. gibi), kendi sabit diskinde duran bir dosyayı alıp karşı tarafa
aktarma (FTP, Gopher, WAIS) veya karşı tarafın vereceği dosyayı alıp kendi sabit
diskine kaydetme yeteneği olur.
İlk Web Server programı, yukarıda, HTML dilinin geliştirilmesindeki öncü konumu
nedeniyle sözünü ettiğimiz, İsviçre’deki CERN kurumu tarafından geliştirildi; ama kısa
zamanda UNIX platformunda, anonim bir tarzda ve ücret ödemeden kullanılabilen bir
şekil aldı. NCSA Server, National Center for Supercomputing Applications-
Superbilgiişlem Uygulamaları Ulusal Merkezi adlı, şimdi kapanmış olan kurum
tarafından UNIX işletme sistemi için geliştirilmişti. NCSA Server’ın geliştirilmiş şekli
olan Apache Server ise uzun süre ücretsiz dağıtıldıktan sonra günümüzde ticarî olarak
geliştiriliyor ve satılıyor. Bugün halâ NCSA Server veya Apache’nin ücretsiz
sürümlerine dayalı Web alanları bulunmakla birlikte, Sun Solaris, IBM AIX ve diğer
UNIX sistemleri için geliştirilmiş çok sayıda Web Server hizmete girmiş durumda.
Kişisel bilgisayarların UNIX gerektiren bilgisayarlara oranla daha ucuz olması,
Microsoft’un NT, IBM’in OS/2 işletme sistemlerinin UNIX’e ciddî rakip haline gelmiş
bulunmaları nedeniyle, bu sistemlere dayalı Web Server programları da hızla artıyor.
Apache Web Server’ın bile NT sürümü piyasaya çıktı.
NT Workstation ve Windows 95/98, aslında Kişisel Web Server adı verilen,
Internet’e 24 saat bağlı olmadan, başka bir firmanın ev sahipliği yaptığı Web
alanlarına hizmet sağlayabilir. Hatta NT Workstation, aynı anda 10’u geçmemek
16
üzere, 24 saat süreyle ınternet’e bağlanabilecek ve müşteri taleplerini
karşılayabilecek yetenektedir. Aynı anda daha fazla Internet bağlantısını kaldırmak
istiyorsanız, NT’nin Server sürümünü edinmeniz gerekli. IBM’in OS/2 işletim sistemi
ise, Internet Connection Server adlı paket kurulduğu zaman, bir PC’nin fiziksel olarak
kaldırabileceği kadar Internet bağlantısına cevap vermesini sağlamaktadır. Macintosh
bilgisayarları için Starnine firmasının MacHTTPd programı gibi, ücretsiz edinilebilecek
http4Mac ve EasyServe adlı programlarla, Internet servisi sağlamak mümkün.
Ayrıca, bugün PC’lerde de UNIX işletme sistemi kurmak hem kolay, hem ucuz hale
gelmiş bulunuyor. Solaris, BSDI, Esix, SCO UNIX bu alandaki ticarî programlar. Ayrıca
Linux ve FreeBSD adlı, ücretsiz dağıtılan UNIX işletme sistemleri de, ticarî olanları
aratmayacak niteliklere sahip. Ayrıca bu tür ücretsiz programlar, Apache Web
Server’ın ücretsiz sürümünü de içeriyorlar.
Bir PC ile Web Server hizmeti yapacaksanız, önünüzdeki bir çok seçeneğe
rağmen, başarınızın PC’nin gerçekten sabit disk alanı ve belleği bol olmasına bağlı
bulunduğunu hatırlamalısınız. PC’lerin, Internet’in gerektirdiği en önemli özellik olan
aynı anda birden çok iş yapabilme becerisi, işletim sistemi kadar, donanım
kaynaklarının genişliğine bağlı olduğunu unutmamalısınız.
Bir Web Server yazılım paketi seçerken dikkat edilmesi gereken bir kaç ilkeyi
sıralayalım:
1. Yazılım paketi yeterli güvenliği sağlayacak özelliklere sahip olmalıdır.
Binalarda bir odadaki yangının yandaki odaya sıçramasını önleyen ateşe
dayanıklı duvarlardan (Firewall) esinlenerek adlandırılan bir dizi program,
Web Server yazılımının bulunduğu bilgisayarın, kötü niyetli kişiler
tarafından bozulmasına engel oluyor. Ancak Web Server’ın kendi içinde
mevcut güvenlik önlemlerinin neler olduğunu dikkatle araştırmanız
gerekir. UNIX işletme sistemi ve ona bağlı çalışan Web Server
programlarının daha güvenli olduğuna ilişkin, kimi zaman Web
17
tasarımcısını ve Internet hizmet sunucusunu rahatlatan, yaygın bir söylenti
vardır. Bu doğru değil. Ne türü olursa olsun, UNIX de bir işletme sistemidir
ve el elden üstündür. Kötü niyetli bir kişi Windows NT sistemine
verebileceği zararı, aynı rahatlıkla UNIX’e de verebilir. Bir diğer yaygın ve
aynı ölçüde yanlış inanç ise NT’nin güvenli olmadığıdır. Microsoft firmasının
NT’nin 4’ncü sürümünü güncelleştirmek için dağıttığı SP3 adlı tamir
programının yerleştirilmesinden sonra, NT sistemleri güvenlik açısından
herhangi bir başka işletme sistemiyle boy ölçüşebilir hale geldi. Burada
önemli olan, Internet’e açılmanın, iyi niyetli-kötü niyetli herkese açılmak
olduğunu unutmamaktır. Özellikle form denilen, HTML’in ziyaretçi
bilgisayarın evsahibi bilgisayara talepten başka şeyler göndermesine
imkan veren etiketlerini ve ona bağlı CGI (Common Gateway Interface-
Ortak Geçit Arabirimi) adı verilen ziyaretçinin ev sahibi bilgisayardaki
programları harekete geçirebildiği buluşma noktasında yer alacak
programları tasarlarken, daima kötüniyetli kişileri dikkate alarak hareket
etmek gerekir. Internet’te güvenliğin ne kadar kolay sarsılabildiğine ve ne
kadar kolay önlem alınabileceğini bir örnek verelim. Sayfanızda,
ziyaretçinin doldurması gereken “Elektronik Posta Adresiniz:” diye bir
metin kutusu bulunduğunu düşünün. Bu kutuya bütün ziyaretçilerin
elektronik posta adreslerini yazacaklarını düşünüyor ve bu bilgiyi işleyecek
CGI programında, ziyaretçinin bu kutuya yazacağı bilgiyi, alıp doğruca Web
Server’ın “Mail” programına veriyorsunuz. Peki, ya kullanıcı adres yerine
“[email protected]; mail [email protected]</etc/passwd”
yazarsa? Bu basit elektronik posta adresi, sizin Mail Server’ınızın bilgisayar
sisteminizdeki bütün password-parola dosyaları Soygun.com’daki “Haydut”
isimli arkadaşa postalamasını sağlayacaktır. Oysa, CGI programını yazan
kişi, elektronik posta adresini Mail programına gönderirken “unless
($mail_to = ~/^[\w-.]+\@[\w-.]+$)” şeklinde bir satırla, Web ve Mair
18
Server’larla işletme sisteminin “metakarakter” denilen ve bir isim veya
adreste değil de sadece komutlarda yer alabilecek karakterlerin bulunup-
bulunmadığını denetlerse, sorun kökünden halledilebilecektir.
2. Mahremiyetin Korunması ve Doğrulatma: Web hizmeti sunan kişi, sadece
başkalarının kendi bilgisayar sisteminde arzu edilmeyen şeyler yapmalarını
önlemekten değil, aynı zamanda kendisine tevdi edilen başkalarına ait
bilgileri de saklamak ve başkalarından korumak zorundadır. Bu bilgiler,
ziyaretçinin adı, elektronik adresi, hatta kredi kartı numarası olabilir.
Bunlar, sizin Internet’te çizdiğiniz portreye güvenilerek size verilmiş
mahrem bilgilerdir. Ziyaretçi bu bilgileri size, kötüye kullanılmayacağı
güvencesiyle vermektedir. Bu bilgilerin korunması, sizin birinci derecede
sorumluluğunuzdadır. Aynı bağlamda, Web hizmeti sunan kişi olarak, sizin
de bu bilgilerin kolayca ve başkalarına açık hale getirilmeden
doğrulatılmasına ihtiyacınız olacaktır. Web Server programınız, örneğin
kredi kartı numarasını, yeni programlar edinmeye ihtiyaç kalmadan
doğrulatabiliyor mu? Yeni bir kredi kartı firmasının çıkartacağı elektronik
alış-veriş yöntemi, sizin Web Server’ınıza kolaylıkla uyarlanabilir mi?
Microsoft gibi, IBM gibi firmaların paket program olarak sundukları Web
Server’lar, çoğu zaman bu firmaların protokollerini tanıyan her türlü ek
programı kabul ederler. Oysa Internet’ten ücretsiz olarak edinilebilecek bir
Web Server programı, belki maliyet açısından çok daha uygun görülebilir,
ama daha sonraki ekleri kabul edemez.
3. Web Server, sizin Internet sayfalarınızı ziyaret edecek kişilerin bilgisini
doğru tutuyor mu? Web hizmeti sunan kişi olarak, kimin hangi sayfadan
sizin sayfasına atladığını bilmek, kendi sayfanızın reklamını bu sayfalarda
daha çok yapmanıza imkan verir. Özellikle elektronik ticarete dayalı veya
mesajını daha çok sayıda kişiye iletmek amacıyla hazırlanan Web alanlarını
19
işletenlerin, sayfalarının varlığını duyurmak için, mümkün olan her yoldan
yararlanmaları gerekir. Web Server, size bu kolaylıkları sağlamalıdır. Web
Server, kimin hangi tür bilgileri edinmek istediğine ilişkin rapor tutmalıdır.
Bu raporu incelemekle, Web alanınızda hiç talep edilmeyen bilgilerden çok,
talep edilen alanlarda daha çok bilgi sunabilirsiniz.
4. Web Server programıyla ilgili teknik destek ve sorun çözme hizmeti alıp
almamak, programın seçiminde belki de en önemli unsur sayılabilir.
Özellikle başlıca işi bilgisayar mühendisliği olmayan bir hizmet sunucu,
yazılımın donanımla uyumunu sağlamada karşılaşabileceği güçlükleri,
ancak yazılımı piyasaya süren firmanın teknik servisinden veya o yazılımla
ilgili uzmanlığı olan danışmanlardan sağlayabilir. Piyasada hiç tanınmayan
veya Internet’ten ücretsiz olarak edinilebilen--dolayısıyla belirli bir firmanın
malı olmayan—Server programları, çoğu zaman gerekli teknik destekten
de mahrumdur. Buna karşılık büyük yazılım firmalarının programları,
firmanın kendi mühendis ve uzman kadrosu, ve buna ek olarak bu
programlara destek sağlayarak hayatını kazanan kişiler tarafından en ince
ayrıntılarına kadar bilinmektedir. Bir gece yarısı çöken Web Server’ı
yeniden çalıştıramamanın bedeli, o programın ilk maliyetinden çok daha
yüksek olabilir.
Web TarayıcılarıWeb tasarımcısının, HTML komutları kadar, hatta onlardan da çok iyi bilmesi
gereken, tarayıcıların HTML’i nasıl yorumladığıdır. Bu nedenle bir Web tasarımcısının
bilgisayarında, Web server yazılımı bulunmayabilir (sayfalarına başka bir Internet
Web Server hizmeti veren kişi veya firma evsahipliği yapıyor olabilir), ama mutlaka
piyasaya mevcut Web tarayıcılarının hemen bütün geçerli sürümleri bulunmalıdır.
Netscape firmasının Navigator ve Communicator adıyla piyasaya sürdüğü farklı
sürümleri ayrı ayrı dizinlerde durmak şartıyla aynı bilgisayarda çalışabilir. Anacak
20
Microsoft firmasının Internet Explorer adlı programının farklı sürümleri aynı Windows
ortamında birarada bulunamazlar. Bunun için iddialı bir Web tasarımcısının, bu
programın farklı sürümleri için birden fazla bilgisayar bulundurması gerekebilir.
Neden değişik tarayıcıların değişik sürümlerine ihtiyacınız var? Bu sorunun cevabı,
HTML’in ınternet’in ortak dili olduğu gerçeğine bir ölçüde gölge düşürecektir. Çünkü
ortak bir HTML dili bulunmasına rağmen, tarayıcıların ve aynı tarayıcının farklı
sürümlerinin HTML’i yorumlayışı farklıdır. HTML, Uluslararası Web Konsorsiyomu adlı
kuruluşun çıkarttığı, adı “tavsiye” olmakla birlikte kendisi standart sayılan dördüncü
sürümüne ulaşmış bulunuyor. Böyle bir standartlaşmaya rağmen, Netscape ve
Microsoft firmaları, bilgisayar kullanıcılarının rağbet ettiği tek tarayıcı programın
kendi programları olmasını sağlamak üzere giriştikleri rekabet çerçevesinde,
programlarını sadece HTML’i aynı şekilde yorumlayan ve dolayısıyla birbirinden
farksız sonuçlar veren programlar olmaktan çıkartmak istediler. Bunun sonucu ise,
Web tasarımcısının, kimi zaman Netscape’in anladığı ama IE’nın anlamadığı, kimi
zaman IE’in becerebildiği, buna karşılık Netscape’in henüz programına koyamadığı
HTML özelliklerinden hangisini kullanacağına bir türlü karar veremez duruma düşmesi
oldu.
HTML’i kullanarak, ticarî amaçlı Web tasarımı yapan kişi, Internet ile bağlantılı
bilgisayar kullanıcılarının (Internet kullanıcılarının) hepsinin ekranında aynı şekilde
gösterilecek sayfalar yapmaya mecburdur. Buna karşılık bir firmanın intranet ortamı
için Web tasarımı yapan kişi, HTML’in sadece kendi firmasının standart olarak
benimsediği tarayıcının anlayabileceği özelliklerinden yararlanması mümkündür.
Microsoft Internet ExplorerWindows ortamında tarayıcı piyasasına, diğer tarayıcılardan sonra girmesine
rağmen, Microsoft’un Web tarayıcı programı, piyasa payındaki artış hızı bakımından
da, HTML’in tanıdığı özellikleri ve HTML’e ilave ettiği diğer görsel kabiliyetler
21
bakımından da, diğer programları geride bırakmış bulunuyor. 1997 sonbaharında
4’ncü sürümü piyasaya çıkan IE, giderek Windows ortamının masaüstü ile
bütünleşiyor. IE artık sadece bilgisayar kullanıcısının Internet ile bağlantı kurmasını ve
Internet’ten alacağı HTML sayfalarını ekrarında canlandırmasını sağlamakla kalmıyor,
aynı zamanda bilgisayarın disklerinin taranması ve dosya yönetimi gibi işleri de
yapıyor. Windows 98’in ve NT’nin hazırlanmakta olan beşinci sürümünün yardım
dosyaları da IE vasıtasıyla okunuyor. IE’nin, sürümleri daha geriden gelmekle birlikte
Macintosh uyumlu sürümü de bulunmaktadır. IE’nin UNIX sürümü, 1998 yaz sonu
piyasaya sürülmek üzere hazırlanmaktadır. IE, Microsoft’un Internet alanından
ücretsiz indirilebilir veya sadece CD masrafı ödenerek, firmadan posta ile de
istenebilir.
Netscape NavigatorNetscape Communications Corporation’ın (NCC) piyasaya sürdüğü NN, IE’ın hızlı
yükselişine rağmen, kurulduğu bilgisayar sayısı bakımından piyasanın en yaygın
tarayıcısıdır. NN, sadece Windows ve Macintosh ortamlarında değil, fakat aynı
zamanda UNIX işletme sisteminde de işleyebilmektedir. NCC, yakın zamana kadar,
hem tarayıcı, hem de Web Server programları alanında Internet’te öncü konumda idi.
Internet’in bugün sahip olduğu bir çok özellik, HTTP ve FTP ilkelerinin çoğu, bu
firmanın tasarımı sonucudur. Eğitim kurumları ve kâr amacı gütmeyen kuruluşların
mensupları ile programdan kişisel amaçlarla yararlanmak isteyenler, NN’i ücretsiz
olarak kullanabilirler. Ticaret amaçlı kullanım ise ücrete tabidir.
DiğerleriWeb tarayıcı piyasasını NCC ve MS firmalarının egemenliklerine almış olmaları
nedeniyle, piyasada başka tarayıcı bulunmadığını sananların sayısı az değil. Oysa
piyasada, çoğu ücretsiz veya sınayıp da beğenenlerin yazarına az bir ücret ödedikleri
paylaşım yazılımı türünden, 50’den fazla tarayıcı programı bulunmaktadır. Bu
22
programların en yaygını, tarayıcı programının ilk mucidi NCSA’e ait Mosaic’tir.
Spyglass firmasının Mosaic’i esas alan programı, halâ yaygın olarak kullanılmaktadır.
Web tasarımcısının NN ve IE’ın 3 ve 4’ncü sürümlerini bilgisayarlarında mutlaka
bulundurması gerekir. Hazırlayacağınız bir HTML dosyasının, bu iki program ve onların
farklı sürümleri tarafından nasıl yorumlandığını ve bu yorumun sizin oluşturmak
istediğiniz görsel etkiye uygun olup olmadığını, sayfalarınız Internet’e veya intranet’e
çıkmadan mutlaka incelemelisiniz. HTML’in 4’ncü sürümünde yer alan komut
listesinin tümü halâ NN tarafından tanınmamaktadır. Böyle bir komuta sayfanızda yer
vermeniz halinde, sayfanızı NN ile tarayacak ziyaretçilerin ekranlarında, sayfanız sizin
istediğiniz biçimde yansıtılamaz.
Bir Web tasarımcısının mutlaka aşina olması gereken bir tarayıcı, HTTP, FTP ve
HTML gibi Web’in protokol ve dillerini belirleyen, Evrensel Kaynak Belirleyici (URL)
sistemini işleten, yani tüm dünyadaki Web adreslerini sağlayan ve bu listeyi üstlenici
firmalar aracılığıyla hergün tüm dünyadaki Internet omurga işletmecilerine ulaştıran
uluslararası kurum olan W3C’nin kendi tarayıcı programı olan Amaya’dır. Bu program,
sadece Internet tarayıcı değil, aynı anda HTML sayfaları oluşturmakta da
kullanabileceğiniz bir HTML editörüdür. Birden fazla HTML sayfasını açabilen,
Internet’e bağlı iken bir yandan da sayfa tasarımına olanak veren Amaya, HTML’i,
olduğu gibi anlayıp, ekranda gösteren tek tarayıcı programıdır. NN ve IE, HTML’e
kendi yorumlarını katarken, Amaya, sayfalarınızın gerçek HTML değerlerini ekrana
getirecektir. Bu program ücretsiz olarak http://www.w3C.org adresinden indirilebilir.
Bu programı edinmek, ve tasarlayacağınız Web sayfalarını bu programla sınamak,
tasarımcı olarak sizi diğer tarayıcıların sayfanızı nasıl göstereceğini belirleme
zorunluğundan kurtarmaz. Amaya, bir HTML sayfasının sınanacağı ilk tarayıcı
olmalıdır. Ama tasarımcı olarak, sayfanızın NN veya IE’de “nasıl durduğunu”
belirlemek zorundasınız. Ayrıca Amaya, HTML standardının parçası olmayan, NCC ve
MS tarafından kendi tarayıcı programlarının bir ilave niteliği olarak ortaya attıkları
23
Java, Javascript, VBScript gibi programları tanımamaktadır. HTML editörü olarak
Amaya, bu alana yeni atılan bir tasarımcının HTML’i öğrenmesine ve uygulamasına
olanak sağlamakla birlikte, çok yetenekli ve scripting pogramları oluşturabilen diğer
editing programlarına oranla basit kalabilir.
Yaygınlık OranlarıInternet’te http://browserwatch.internet.com adresinde bulabileceğiniz
istatistikler, size tarayıcılar arasında hangi programın ne oranda rağbet gördüğünü
söyleyecektir. Genel olarak ifade edersek, Netscape Navigator halâ tüm
bilgisayarlarda (PC, UNIX bilgisayarları ve Macintosh) yarının biraz üzerinde bir paya
sahip bulunuyor. IE ise, üçret bir sınırını aşmış durumda. Listenin geri kalan
bölümünü, en genişi yüzde 2’lik bir pay olmak üzere, şu programlar paylaşıyorlar:
Cyberdog, IBrowse, Opera-3.0, Lynx, Echo, CacheFlow-Cache, IBM WebExplorer,
Opera-3.0, ve MacWeb.
Yardımcı Programlar ve Ek BirimlerInternet tarayıcıları, sadece HTML kodları ile yazılmış metinleri okuyup anladıkları
günleri çoktan geride bıraktılar. NN ve IE, artık bir çok grafik dosyasını okuyup,
ekranda resmedebiliyorlar. Bu gelişmeye rağmen, Internet tarayıcının başlıca işi,
hergün yeni bir türü ortaya çıkan ses, video ve diğer çoklu ortam dosyalarının,
veritabanı veya muhasebe tablolarının hızlı gelişimine ayak uydurup, onları ekranda
canlandırmak olmadığı için, tarayıcı programını yazan uzmanlar, bu gibi
programlarının dışardan çalıştırılmasına olanak sağlarlar. Kullanıcı isterse tarayıcısına,
Internet’te adının uzatması “.xls” olan bir dosya ile karşılaşınca, bunu ekranda
göstermek için Microsoft Excel programını çalıştırmasını bildirebilir. Yardımcı
programlara ve bunların gerektiği verileri sayfanıza koyarken, Internet tarayıcısına
nasıl bildirimde bulunacağınıza ilerde döneceğiz.
24
Plug-In denilen ek birimler ise, tarayıcıya tamamen farklı bir programı açmak
yerine, belirli bir tür dosya türünü ekranda canlandırabilme yeteneği kazandıran
eklerdir. Tarayıcı program bilgisayara kurulurken bu ek birimler olmaksızın (ya da çok
yaygın olanları ile) yüklenir. Internet’te yeni bir tür dosya türü oluşturmak isteyen, ya
da mevcut türlerin Internet servisi sunan bilgisayardan (Server) müşteri bilgisayara
aktarılmasında yeni bir yöntem geliştiren kişi veya firma, bu yeni dosya türünün
tarayıcı tarafından bilgisayarda oluşturulabilmesi için bir de “plug-in” oluşturur ve
bunu genellikle ücretsiz dağıtır.
Diyelim ki, bir firma, Internet’te ses naklini çok daha hızlı ve kolay hale getirdiğini
düşündüğü yeni bir biçim geliştirdi. Bu biçimin Internet hizmeti verenler tarafından
benimsenmesi ve yaygın olarak kullanılması, tarayıcı programların bu biçimi
tanımasına, bu da firmanın yeni ses nakil yönteminin gerektirdiği plug-in
programcıklarını etkin şekilde dağıtmasına bağlıdır. Kimi zaman bir yöntem o kadar
beğenilir ve Internet hizmeti verenler tarafından tutulur ki, plug-in tarayıcı
kullananların satın almak isteyecekleri bir program haline gelir. Çoğu zaman, tarayıcı
için gerekli plug-in kullanıcılara ücretsiz ulaştırılırken, yeni yöntemi kullanarak
Internet alanında sundukları içeriği daha etkin hale getirmek isteyenler için gerekli
oluşturma programı parayla satılır. Bunun bir örneği Internet’te gerçek zamanlı ses
aktarmakta kullanılan RealAudio ses kayıt ve saklama yöntemidir. Firma, ses
dosyalarını bu yöntemle sıkıştırıp hızlı bir şekilde ulaştırmak isteyenlere kodlama ve
bunu Server’a yerleştirerek, isteyen tarayıcıya aktaracak programı satarken, kendi
tarayıcılarına RealAudio dosyalarını okuyarak, bilgisayarın ses kartını ve hoparlorunu
kullanarak bu dosyayı sese çevirecek ek birimi ücretsiz dağıtmaktadır.
Web tasarımcısı, özellikle ses, video ve diğer grafik unsurların Server’dan
müşteriye aktarılmasında ne gibi yöntemler olduğunu ve gelişmeleri izlemek
zorundadır. HTML sayfanıza bir ses unsuru koymaya karar verdiğiniz zaman NN veya
IE kullanan bir kişinin bunu bilgisayarında dinleyip-dinleyemeyeceğini de hesaba
25
katmak zorundasınız. İlerde, Web tasarımında çoklu ortam unsurlarından söz ettiğimiz
zaman, plug-in’lere döneceğiz.
Java, ActiveXBu bölümü bitirmeden, HTML sayfalarınıza koyabileceğiniz ve HTML’i
duraganlıktan kurtarıp, hareket ve hatta kullanıcı ile etkileşmeli hale getiren
unsurlardan da kısaca söz edelim.
Java dili ile yazılmış programlar veya programcılar (Applet) ve Microsoft firmasının
Windows ortamı için geliştirdiği ama zamanla diğer işletme sistemlerine de yayılan
ActiveX Kontrolleri, tarayıcı programın yanı sıra, ama ondan bağımsız olarak, çalışan
ve ortaya çıkarttıkları sonucu, programcığı veya Kontrol’ü yazan kişinin amacına bağlı
olarak, ya tarayıcı içinde, ya da tarayıcı dışında ekrana getiren veya yapan
unsurlardır. Hareketli Web sayfalarından ve Dinamik HTML’den söz ettiğimiz zaman
bu iki unsuru daha geniş ele alacağız.
26
Bölüm II: HTML’in Temel UnsurlarıHTML sayfanın temel taşı nedir, diye sorarlarsa, çekinmeden “Metinlerdir,” diye
cevap verebilirsiniz. Günümüzde birçok Internet alanında sayfalarında hiç yazı
bulunmasa, sayfanın bütün içeriği sadece grafikten ibaret olsa ve HTML’den sadece
grafik unsurları bir arada tutmak ve ziyaretçinin bilgisayarına aktarmak için
yararlanılsa da, bütün grafik unsurların ziyaretçiyi götürüp bırakacağı son nokta, bir
bilgi kümesidir, metindir. Bu bölümde HTML’in temel yapı unsuru olan metne nasıl yer
verileceğini ve metnin nasıl biçimlendirileceğini ele alacağız. Bunu yapmak için de bir
HTML sayfası oluşturacağız ve bunu beğendiğimiz bir tarayıcı ile açıp, bakacağız. Bu
suretle Web tasarımının metinle ilgili araçlarını, metin şekillendirmek etiketlerini
tanımış olacağız. Daha sonra HTML sayfa tasarımında kullanacağımız elemanları, stil
sayfaları, tablo, ve çerçeve, grafik ve çoklu-ortam (multimedya) unsurlarını
tanıyacağız.
Etiketler (Tag)HTML komutları içeren ve tayarıcıların tanıyabildiği dosya, aslında içinde ASCII
karakterlerden başka unsur olmayan, düz yazı dosyalarıdır. Tarayıcıya, sayfayı
ekranda oluştururken vermesini istediğimiz biçimle ilgili komutları bir dizi özel
işaretleme etiketlerini kullanarak veririz. Başka bir deyişle, tarayıcı bir paragrafın,
cümlenin, satırın, kelimenin ya da harfin önünde, onun ekranda nasıl gösterileceğine
ilişkin etiketi görür ve bu etiketin gerektiği işlemi icra eder.
Siz, Web sayfasının mimarı olarak, Server’a koyacağınız HTML metninin içinde, bir
anlamda, “Netscape veya Internet Explorer: Buraya bir etiket koyuyorum. Bu etiket,
büyük başlık etiketidir. Ben sana bu etiketin kapsadığı kelimelerin bittiğini
söyleyinceye kadar, vereceğim bütün kelimeleri büyük başlık olarak sun!” demiş
oluyorsunuz. Dolayısyla, HTML’de ilke, önünde etiketi olmayan herhangi metne yer
27
vermemektir. Önünde etiketi olmayan herhangi bir metin parçası, tarayıcı tarafından
temel paragraf olarak nitelenir.
HTML, içinde kontrol kodu olmayan metin dosyasıdır. Bu, söz gelimi WordPerfect
veya Microsoft Word ile yazdığınız ve uzatması “.wp” veya “.doc” olan bir isimle ve
WordPerfect veya Word biçiminde kaydettirdiğiniz bir belge, HTML etiketleri içerse
bile, HTML dosyası sayılamaz. Çünkü kelime-işlem programınız, bu dosyanın içinde
kendi kontrol kodlarını koymuştur. Böyle bir dosyanın adındaki uzantıyı silerek, yerine
“.htm” uzantısını verin ve tarayıcınıza açtırmaya kalkın!
/////////////KUTU///////////////////////
Düz Yazı Dosyası ve HTMLDüz yazı biçiminde kaydedilmemiş bir metni tarayıcıya açtırma denemesini,
burada birlikte yapalım. Yandaki paragrafı içeren bir metni, örneğin HTML.DOC adıyla,
Word dosyası olarak kaydedelim ve sabit diskte bu dosyayı bulup, adını “HTML.HTM”
olarak değiştirilim. Bilgisayarlarımızda, “.htm” uzatması ile bağlantılı tarayıcı
Netscape Navigator veya Internet Explorer olarak. Adını değiştirdiğimiz bu dosyayı iki
kere tıkladığımızda, sistemin varsaydığı tarayıcı açılacak ve karşımıza şuna benzer bir
tablo çıkacaktır:
[reh000.tif]
Bu kargaşanın nedeni, tarayıcı programın, uzantısı “.htm” veya “.html” olan bir
dosyayı, içinde kontrol kodu olmayan, düz yazı dosyası sanması ve Word belgesindeki
kontrol kodlarını da metin olarak ekranda göstermesidir. Belgemizin içinde hiç bir
HTML etiketi yer almadığı için de, tarayıcımız bu yazıyı, düz paragram olarak
gösteriyor. Aynı yazıyı, bu kez Word programına düz yazı olarak kaydettirelim. Word
bu dosyaya, “HTML.txt” adını verecektir. Şimdi de bu dosyanın adını “HTML.htm”
olarak değiştirelim ve iki kere tıklayalım. Tarayıcıda karşımıza şöyle bir görüntü
çıkacaktır:
[reh001.tif]
28
Bu dosyanın içinde kelime işlemcinin kontrol kodları bulunmadığı ve dosyada
metnin dışında başka bir unsur olmadığı için, tarayıcı metni yorumlamakta güçlük
çekmeyecektir. Ne var ki, kelime-işlemci metni ASCII olarak kaydederken, metnin
Türkçe karakterlerini en yakın ASCII koduna çevirdiği için, yazıdaki Türkçe harfleri
kaybetmiş olduk.
Aynı paragrafı HTML dosyası olarak (ilerde değineceğimiz bir programın
yardımıyla) ve sayfanın kodlama dili olarak Türkçe’yi seçerek kaydettiğimiz zaman,
tarayıcımız, sayfayı hem kolayca açıp ekranda gösterebiliyor; hem de Türkçe
karakterlerin kodları, tarayıcı tarafından tanınabiliyor:
[html rehberi003.tif]
////////////////////////////////////////////////////////
HTML düz yazı olduğuna göre, bir HTML dosyası oluşturmak için, tabii HTML
kodlarını kendiniz yazacaksanız, herhangi bir kelime-işlem yazılımını kullanabilirsiniz,
ama kaydettirirken “Sadece metin olarak,” “Text only,” “ASCII dosyası,” “ANSI
Dosyası” gibi, programın kendi kontrol kodlarını koymayacağı bir biçim seçmek
zorundasınız.
///////////////NOT/////////////////////////////
HTML mi, HTM mi?Windows ortamında HTML etiketlerini kendiniz vererek HTML dosyası oluşturmak
ya da bir HTML dosyasında değişiklikler ve düzeltmeler yapmak istiyorsanız,
kullanabileceğiniz en uygun program Not Defteri‘dir (NotePad). DOS ortamında Edlin
veya Edit, Macintosh’da ise SimpleText’i kullanabilirsiniz. HTML kodunuzu Microsoft
Word, Corel WordPerfect veya beğendiğiniz herhangi bir kelime işlemcisi ile
oluşturduğunuz taktirde, Dosya menüsünden Adıyla Kaydet maddesini seçin ve Biçim
olarak Düz Yazı Olarak, ASCII Metin gibi bir biçimi seçin. HTML dosyalarının adlarının
uzantısı, “.htm” veya “.html” olabilir. İşletme sisteminiz üç harften fazla uzatmaya
izin vermiyorsa (DOS veya Windows 3.x gibi) “.htm”i tercih edin.
29
//////////////////////////////////////////////
İlerde, yaygın kelime işlem programlarının HTML yeteneklerinden ve yapacağınız
sayfaların HTML kodunu otomatik olarak oluşturacak programlardan sözedeceğiz.
Ama şimdi, herhangi bir kelime işlem programını açın ve aşağıdaki örneği birlikte
yapalım:
HTML için markup (işaretleme) dili dediğimizi hatırlıyor olmalısınız. Yani, bir HTML
dosyasında, Internet alanımızı ziyaret edecek kişinin bilgisayar ekranında
belirlemesini istediğimiz metinlerimiz, grafik unsurlarımız ve diğerleri ile bunların
nasıl belirmesini istiyorsak onu belirten işaretlerimiz. Bu işaretlere, HTML etiketi
dediğimizi de hatırlıyor olmalısınız. HTML dosyası oluştururken, aslında yaptığımız iş,
belirli metnin önüne, o metnin tarayıcı tarafından tanınacak ve gereği yapılacak bir
etiket koymaktan ibaret. Tarayıcıya, etiketle, gerçek metni birbirinden ayırt etmesi
için etiketlerimizi ‘küçüktür’ (<) ve ‘büyüktür’ (>) dediğimiz iki işaretin arasına alırız.
Bu işaretlere, kimi İngilizce kaynaklardan doğrudan çevirerek ‘köşeli parantez’
dendiğine de tanık oluyoruz. Oysa köşeli parantez adını ‘[‘ ve ‘]’ işaretleri için
kullanmak daha doğrudur. Sadece Web tarayıcınız değil, HTML dilini anlayan her
program, bu işaretlerin arasındaki kelime veya kelimelerin ekranda gösterilmek üzere
değil, gereği icra edilmek üzere verildiğini anlayacaktır. HTML’i geliştiren uzmanların
etiket olarak üzerinde anlaştıkları kelimelerin büyük harfle veya küçük harfle
yazılması arasında fark yoktur. Bir etiket kelimeyi büyük harfle de yazsanız, küçük
harfle de yazsanız, hatta büyük harflerle küçük harfleri gelişi-güzel bile kullansanız,
tarayıcı tarafından anlaşılacaktır. Bir başka deyişle, tarayıcı için “OKU” ile “Oku,”
“oKu,” “okU” ve “oku” aynı emirlerdir.
Bir kaç istisnası dışında, bütün HTML etiketlerinin kapsadığı alanın bittiği aynı
kelimenin önüne bölü işareti (/) konularak oluşturulan ikinci etiketle belirtilir. Yani,
diyelim ki <Oku> komutuyla başlattığınız işi, </Oku> komutuyla bitirirsiniz.
/////////////////////////NOT////////////////////
30
Büyük Harf, Küçük Harf?Oluşturacağınız Web sayfaları, ilerde bu görevi devralacak başkaları tarafından
düzeltilebilir, değiştirilebilir, kısmen kullanılabilir. İyi bir mimarın planlarının başka
bütün mimarlar tarafından hiç tereddütsüz anlaşılabileceği gibi, sizin sayfalarınızın da
başka Web alan yöneticileri ya da sayfa tasarımcıları tarafından kolaylıkla
okunabilmesi şarttır. Nasıl bir yöntem izlerseniz izleyin; ama bir alanda yer alan
bütün sayfalarınızda aynı yöntemi izleyin: kodlarınız ya tümüyle büyük harf olsun, ya
da tümüyle küçük harf. HTML tarayıcıların okuduğu ama gereğini yerine getirmediği
yorum/açıklama tarzındaki etiketleri kullanarak, sayfalarınızın bölümlerinin insan
gözüyle okunulup anlaşılabilmesini sağlayın.
/////////////////////////////////////////////////////////
HTML Dosyasının BölümleriHTML dosyasının bir tarayıcı tarafından tanınması, yorumlanması ve gereğinin
ekranda yapılabilmesi için, belgenin bir HTML belgesi olduğunun bildirilmesi şarttır.
Bu bildirimi dosyanın tümünün etiketi anlamına gelen <HTML> etiketi, bir HTML
belgesinin ilk kelimesi olarak yazılır. Tarayıcıya, HTML dosyasının bittiği de </HTML>
etiketiyle bildirilir.
/////////////////////////////////////////NOT//////////
Açtığınızı Kapatmayı Unutmamak İçinİyi bir tasarımcı olarak, HTML belgesini oluştururken, yazdığınız her etiketi bitiş
etiketi ile birlikte yazın: <HTML></HTML> gibi. Sonra, iki etiketin arasına ilgili
komutları ya da metinleri koyun.
//////////////////////////////////////////////////////////////
HTML belgesi, iki bölüme ayrılır: Baş taraf (başlangıç) (<HEAD>) ve gövde
(<Body>) bölümleri. Web tarayıcılar, bir belgeyi sizin arzu ettiğiniz tarzda
yorumlayabilmek için, HTML etiketini gördükten sonra derhal HEAD ve BODY
31
etiketlerini arar ve ekrandaki sayfayı buna göre biçimlendirirler. Sayfanın “baş tarafı”
sayfanın en üstünde, örneğin bir gazetenin başlığı gibi gösterilen bir metin olmayıp,
ilerde ele alacağımız belge hakkında genel bilgileri kapsayan bölümdür. Burada yer
alabilecek genel etiketleri (meta tag) ayrıntıları ile inceleyinceye ve ne işe
yaradıklarını görünceye kadar, şimdilik örnek sayfalarımızda baş tarafı başlatan ve
bitiren etiketleri koyup, aralarına, HTML sayfalarının İngilizce metinlerden oluştuğunu
varsayan tarayıcıya, sayfamızın Türkçe olduğunu bildirmek için—şimdilik anlamının
üzerinde durmadan—bir genel etiket koyacağız. Şimdi herhangi bir kelime
işlemcisinde, örneğin Windows ortamında Not Defteri’nde, Macintosh’ta
SimpleText’te şu örneği aynen yazın ve dosyayı düz yazı dosyası olarak kaydedin.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</HEAD>
<BODY>
Web Tasarım Rehberi’ne Hoş Geldiniz!
</BODY>
</HTML>
Gördüğünüz gibi ilk HTML sayfamız, tarayıcıya bu dosyanın bir HTML dosyası
olduğu beyanıyla başlıyor. İlerde anlamını öğrenmek üzere baş taraf etiketlerinin
arasına sayfamızın Türkçe olduğunu belirten genel etiketi koyuyoruz; ve gövde
bölümünde, ziyaretçilerimize hoşgeldiniz, diyoruz. Bu dosyayı, örneğin “hosgeld.htm”
adıyla kaydedin. Kelime işlemcinizi kapatmayın; bir kenarda dursun. Kaydettiğiniz
dosyanın simgesini bulunduğu yerde iki kere tıklayın; “.htm” uzantısı ile bağlantılı
tarayıcınız hangisi ise, o açılarak, sayfayı yükleyecektir.
32
reh004.tif
//////////////////////NOT////////////////////
“Open” mı, “Browse” mı?Internet Explorer’ın 4’ncü sürümünde programı başlattıktan sonra, Dosya (File)
menüsünden Aç (Open) maddesini seçerek, ve açılacak diyalog kutusunda Araştır
(Browse) düğmesine basarak oluşturduğunuz dosyayı bulabilirsiniz. Netscape
Navigator’da ise yine File (Dosya) menüsünden Open Page (Sayfa Aç) maddesini
seçerek, ve gelecek dilayog kutusunda Choose File (Dosya Seç) kutusunu tıklayarak
oluşturduğunuz dosyayı arayabilir ve yükleyebilirsiniz. İşini kolaylaştırmak için,
“.htm” ve “.html” uzantılarını en beğendiğiniz tarayıcı ile ilişkilendirirseniz, herhangi
bir HTML dosyasını iki kere (Internet Explorer 4.x’ün masaüstü unsurlarını koymuş
iseniz, bir kere) tıklayınca, tercih ettiğiniz tarayıcı dosyayı otomatik olarak açacaktır.
//////////////////////////////////////////////////////////
İlk HTML sayfanız şimdi karşınızda. HTML etiketleri arasına yazdığınız mesaj
ekranda, tarayıcının varsayılan fontu ile ve yine varsayılan büyüklükte, gösteriliyor.
Şimdi, tarayıcının program adının yazılı olduğu üst çerçeveye dikkat edin: “F:\
hosgeld.htm – Microsoft Internet Explorer” ya da sadece “Netscape” kelimelerini
göreceksiniz.
Şimdi, hala açıksa, “hosgeld.htm” dosyasını yazdığınız kelime işlemcisini ön plana
getirin ve üçüncü satıra “<Web Tasarım Rehberi</TITLE>” kelimelerini yazın.
Dosyanızın tümü şu şekli almış olacaktır:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</HEAD>
33
<TITLE>Web Tasarım Rehberi</TITLE>
<BODY>
Web Tasarım Rehberi’ne Hoş Geldiniz!
</BODY>
</HTML>
Burada yaptığımız, sayfamıza bir başlık vermekten ibarettir. Title/Başlık etiketi,
tarayıcıya, bu etiketin, programın adıyla birlikte, çerçevede gösterilmesi talimatını
verecektir.
Şimdi bu sayfayı aynı isimle bir kere daha kaydedin; ve oluşan dosyayı iki kere
tıklayın. Açılan tarayıcıya, en üstteki çerçevenin üzerindeki başlığı okuyun:
reh005.tif
Title/Başlık komutu, IE’de, dosya adı yerine sayfanıza verdiğiniz Benim Sayfam
başlığının tarıyıcı programının adıyla birlikte, programın çerçevesinde gösterilmesini
sağladı. Netscape de şimdi program başlığında sadece kendi adını değil, bizim
sayfamızın başlığını da göstermektedir. Yani, Title komutu ile, HTML sayfamızın içinde
bir iş yapmış olmuyoruz, sadece tarayıcıya, kendi başlık alanında sayfamızı bilgisayar
kullanıcısına hangi başlıkla sunmasını istediğimi söylemiş oluyoruz.
////////////////////////////////////////NOT//////////
HTML EditörleriHTML kodunu kendisi oluşturan ve tasarımcıya görsel araçlar kullanma imkanı
veren bir çok program çıktı. Kısaca HTML editörü denen bu programların bir özelliği
WYSIWYG imkanına sahip olmalarıdır. İngilizce “Ne Görüyorsan, Onu Alırsın”
kelimelerinin başharflerinden oluşan bu terim, yaptığınız tasarımın ekranda nasıl
görülüyorsa aynen o şekilde HTML dosyasına haline dönüştürüleceğini ifade ediyor.
Bu tür programların bir özelliği, oluşturduğunuz sayfaya hemen “Untitled” (Başlıksız)
34
başlığını vermektir. Sayfalarınızı böyle bir program yardımıyla oluşturuyorsanız, ilk
işiniz sayfa özellikleri (Page Properties) kutusunu açıp, sayfanın başlığını vermek
olmalıdır.
//////////////////////////////////////////////////////////
İlk HTML sayfamızı yazmış ve incelemiş olduk. Bundan sonrası, sayfalarımıza daha
çok içerik koymak ve onları biçimlendirmekten ibaret. Bunun için ilk adım olarak Style
Sheet (Stil Sayfaları) denilen, tarayıcıya toplu biçimlendirme komutları veren
etiketleri inceleyeceğiz.
Web Sayfasının BiçimlendirilmesiBir anlamda, HTML etiketlerinin yarısından fazlası metin biçimlerdirme
komutlarıdır. Ama bu komutlar, HTML etiketlerini geliştirenlerle, ürettikleri tarayıcı
programların bunları nasıl yorumlayacağına karar veren uzmanların belirlediği
biçimlerden ibarettir. Örneğin, HTML, temel metin unsuru oharak paragraf
(<p>..</p>) ve altı ayrı büyüklükte başlık (Heading) kodu içerir (H1, H2, H3, H4, H5,
ve H6). Ne var ki, temel metin harfleri ile başlıkların gerçekten ne kadar büyük
olacağına, tarayıcı program karar verir. Bir programda H1, 16 punto olabilir; bir
diğerinde 14. Ayrıca kullanıcı, kendi tarayıcısında bazı seçenekleri değiştirmiş,
varsayılan metin yazısı ölçüsünü azaltmış ya da arttırmış olabilir. Bu durumda,
ölçüsünü göreceli olarak normal paragraf harfi büyüklüğünden alan diğer bütün
başlıkların da ölçüsü değişecektir. Bu değişiklik, sizin sayfalarınızın kullanıcının
ekranında arzu ettiğiniz görsel etkiyi oluşturacak şekilde canlandırılmasını önleyebilir.
Ayrıca HTML etiketlerini benimseyip, kullanmak, tarayıcı programlarını üreten
firmalara kalmış bir tutum olduğuna göre, bütün HTML etiketlerinden yazı
biçimlendirmede yararlanamayabilirsiniz. Örneğin, metin biçimlendirmede kullanılan
bir diğer, alıntıları belirten Q (quotation) etiketidir. Netscape, bu etiketi taşıyan metni
35
sabit genişlikteki fonta çevirirken, Internet Explorer, bu etiketin sonucu olarak
metinde hiç bir biçim değişikliği yapmayacaktır.
////////////////////////////////NOT////////////////////////////
Harf GenişliğiEski daktilolarda, kağıdı hareket ettiren mekanizma, her harfin genişliğine göre
farklı hareket edemediği için “i” harfi gibi sadece bir çizgiden olan harf de, içine üç
adet “i” harfi alabilecek olan “m” harfi de aynı genişlikte bir alana yazılırdı. Zamanla
dizgi makinalarının “akıllı” hale gelmeleri ile, her harf, “m” harfinin kaçta kaçı kadar
bir alan kapladığına bakarak, farklı yere yazılır hale geldi. Harfleri büyüklüklerine göre
göreli genişlikte olan fontlarla bütün harfleri aynı genişlikte olan fontların farkı
buradan kaynaklanır. Günümüzde, eski daktilo metinlerin sağladığı görsel etkiyi
sağlamak üzere, bilgisayar fontları arasında da her harfinin alanı eşit, fontlar var.
/////////////////////////////////////////////////////////
Ne var ki, HTML 4 ile, etkisi duragan ve niteliği bir anlamda kullanıyıca bağlı olan
bu etiketleri kullanma yerine, artık her paragrafı, hen cümleyi, hatta her harfi arzu
ettiğiniz gibi biçimlendirebilirsiniz. Artık duragan etiketleri de, tarayıcının değil, kendi
ettiğiniz biçimde kullanma imkanınız var. Dahası, bir tek dosyada bir tek kelimeyi
değiştirerek, yüzlerce sayfadan oluşan bir Internet alanınında söz gelimi bütün
başlıkları maviden turuncuya çevirebilir; bütün alıntıları italikten siyah harfe,
Times’dan Arial’a çevirebilirsiniz.
HTML sayfada metin stili dediğimiz zaman, metnin Internet alanımızı ziyaret eden
kişinin bilgisayar ekranında hangi tür harfle (Arial, Times, Verdana, Helvetica, vd.), bu
harfin normal türüyle mi, ya da siyah (bold) veya italik tarzıyla mı, hangi büyüklükte
(12 punto, 18 punto, 24 punto), ve ne renk gösterileceğini, sayfanın ya da içinde
bulunduğu tablo hücresinin sağına mı, soluna mı, ortasına mı bloklanacağını
kasdediyoruz. HTML 4’de, metin stil unsurları arasında, geri plan rengi gibi, daha
başka unsurlar da vardır. Bunları, daha sonra ele alacağız. Şimdi sadece sayfa
36
tasarımında kullanabileceğimiz unsurlardan biri olarak, stillerin HTML sayfasında nasıl
yer aldığına bakalım.
HTML 4, üç ayrı stil imkanına sahiptir. Bir paragrafın (paragraf, bir kelime, hatta
bir harf bile olabilir), ya da bir paragrafın bir bölümünün stili, hemen önüne konulacak
bir stil komutu ile belirlenebilir. Buna in-line (aynı satırda) biçimlendirme komutları
denilir. Burada bu tür biçimlendirmeyi biraz ayrıntılı ele alacağız ve bir iki örnekle
nasıl kullanıldığına değineceğiz. Diğer iki biçimlendirme yöntemi olan HTML sayfasının
başlangıç bölümüne gömülmüş ve gövde bölümünden buraya atıf yapılan
“Embedded” stil etiketleri ile HTML dosyasının tamamen dışında, dosya adı uzantısı
“.css,” içeriği düz yazı dosyası biçiminde olan Cascading Style Sheets (Yığılma Stil
Sayfaları) tarzındaki stil olanaklarını Dinamik HTML bölümünde ayrıntılı ele alacağız.
Burada kısaca söz etmek gerekirse, Gömülmüş (Embedded) stil bölümü, biraz sonra
ayrıntılı olarak ele alacağımız yerel biçimlerdirme kodlarını HTML dosyasının başlangıç
bölümüne toplu halde koymaktan ibarettir. Böylece dosyanın gövde bölümünden
toplu stil kodlarıyla tanımlanmış etiketleri kullanarak her seferinde yerel
biçimlendirme kodları girmekten kurtulmuş oluruz, Ancak bu yöntemi uygulamak için,
Internet alanınızdaki her sayfanın baş tarafına bu kodları girmek zorundasınız. Oysa
toplu biçimlendirme kodlarınızı ayrı bir düz yazı dosyası halinde saklamanız ve
Internet alanınızda yer vereceğiniz bütün sayfaları bu stil dosyası ile
bağlantılandırmanız mümkündür. Buna bağlı (linked) stil dosyası denir. Bu yöntem,
tasarımcıya bu dosyada yapacağı değişiklikle, bütün sayfalarda değişiklik yapma
imkanı verir.
HTML 4’ün tanıdığı bu üç stil yöntemini kullanarak Web alanındaki bütün sayfalar
baştan sona tutarlı bir görünüme kavuşabilir. Web tasarımcıları, stil belgeleri
sayesinde, adeta gazete, dergi ve diğer basılı yayınları hazırlamakta kullanılar
masaüstü yayıncılık programlarını kullananlara yakın bir tasarım esnekliği ve kalite
düzeyine ulaşmış bulunuyorlar. HTML ile henüz herhangi bir masaüstü yayıncılık
37
programında yapılan bütün tasarım incelikleri uygulanamaz; ama stil belgelerinin
dikkatli ve titiz şekilde kullanan ve bu alandaki gelişmeleri takip eden bir tasarımcı,
herhangi bir gazete sayfası tasarımcısını bile kıskandıracak sayfalar hazırlayabilir.
Stil etiketlerini yorumlama ve özellikle yukarıda değindiğimiz son iki yöntemin
kullanılma açısından bütün tarayıcıların eşit düzeyde olmadığını söylememiz gerekir.
Internet Explorer’ın 4’ncü sürümü HTML 4’ün bütün etiketlerini tanırken, Netscape’in
4’ncü sürümü HTML 3.2’nin etiketlerinin tümünü, HTML 4’ün de bir kısmını tanıyor.
Web sayfasını tasarımcısı olarak, tarayıcıların hangi stil etiketlerini tanıdıklarını,
hangisini tanımadıklarını izlemeniz ve sayfalarınızın bütün kullanıcıların bilgisayarında
hemen hemen aynı tarzda gösterilmesini sağlamak için bunlardan hangisini
kullanacağınıza, hangisini kullanmayacağınıza karar vermeniz gerekir. Başvuru
bölümünde bazı etiketlerin tarayıcıların hangi sürümü tarafından tanındığına
bakabilirsiniz.
Şimdi yerel biçimlendirme yöntemine ayrıntılı olarak bakalım.
Yerel BiçimlendirmeDiyelim ki, Web’de sayfa tasarımı konularını bir araya getiren, karşınıza çıktığında
beğendiğiniz sayfaların adreslerini, bir yerlerde okuduğunuz bir makalenin ana
mesajını aktaran ve Web tasarımcılarının birbirleriyle fikir alışverişi yaptıkları bir
Internet alanı oluşturmak istiyorsunuz. Sayfanıza şu metni koymak istiyorsunuz:
“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.. Yoksa, yeteneğimiz daha yüksek şeyler için elverişsiz
olduğu için değil. Biz inanıyoruz ki, en yüksek düzeyde beceri gerektiren şey, bizim
sanatımıza en yakın olanıdır.
Rudolf Koch - Alman harf dökümcüsü, kaligraf
Dikkat ederseniz, metinde bir cümle siyah harflerle dizilmiş ve kaynak italik
harflerle gösterilmiş bulunuyor. Şimdi bu paragrafı, biraz önce oluşturduğumuz
38
Hoşgeldiniz sayfasına alalım ve siyah harflerle italikleri oluşturmaya çalışalım.
Yukarıdaki örnekte kaydettiğiniz HTML dosyasını açın ve “Benim Web Sayfama hoş
geldiniz!” kelimelerini silip, yerine yukarıdaki paragrafı yazın:
Bitirdiğinizde ekranınızdaki HTML kodu şöyle olmalıdır:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</HEAD>
<TITLE>Web Tasarım Rehberi</TITLE>
<BODY>
<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>
<p>Rudolf Koch - <i>Alman harf dökümcüsü, kaligraf</i></p>
</BODY>
</HTML>
Burada paragraf etiketini kullandığımıza dikkat edin. <p>..</p> etiketleri,
tarayıcıya, ana metin unsurunu verir. Tarayıcı bu etiketi gördüğü anda, takibeden
unsuru (bu bir başka metin olabileceği gibi, bir grafik öge, veya tablo da olabilir) bir
satır aşağıya ve yeni satırın en başına alır.
/////////////////////////////////NOT///////////////
Yeni Paragraf ile Yeni Satır’ın farkı.
39
</p> etiketi, tarayıcıya, yeni bir paragraf başlatmasını söyler. Buna karşılık, bir
metinde bir satır, nerede bitiyorsa orada bitsin, takibeden satır yeni bir paragraf
yapmadan, alttaki satırın başına gitsin isteyebilirsiniz. Bu iki durumun, yani yeni
paragraf ile paragraf başlatmadan yeni satıra gitmenin farkı da mekanik daktilodan
geliyor. Daktilo yazma kurallarından biri, yeni paragraf başlatırken, iki paragrafın
arasında normal satır aralarına verdiğiniz boşluktan daha fazla boşluk vermekti.
Diyelim satırlarınız tek aralıkla yazılıyorsa, paragraflarınızın arasında en az bir buçuk
aralık olması gerekirdi. Ayrıca her yeni paragraf bir miktar içerden başlardı. Elektrikli
daktiloların icadıyla, yazana kolaylık olması için mühendisler, yeni paragraf yapmayı
ve sadece satır atlatmayı ayrı ayrı tuşlarla yapılır hale getirdiler. Bugün ENTER veya
RETURN tuşu, kelime işlem programınızın varsayılan ayarlarına bağlı olarak, iki
parafraf arasında arzu ettiğini bir miktar boşluk bırakır ve yeni paragrafı biraz içerden
başlatır. Yeni paragrafın normal satır aralığından daha fazla boşluk bırakmadan ve
birinci satırı içeri girmeden yazılmasını istiyorsanız, yine programına bağlı olarak,
örneğin ENTER veya RETURN tuşuna basarken, CONTROL tuşunu da tutmanız gerekir.
Internet’in ilk günlerinde, yazıların ekranda mümkün olduğunca kelime işlem
programlarına benzer şekilde oluşturulması amacıyla </p> etiketine yeni paragraf
başlatma, buna karşılık <BR> (line break) etiketine de sadece satır atlatma görevi
verilmişti.
/////////////////////////////////////////
Paragraf etiketinin nasıl bloklanacağını ALIGN yüklemi belirlersiniz. Örneğin
paragraf etiketini <p align=center> şeklinde kullanırsanız, </p> etiketine kadar
gireceğiniz bütün metin, bulunduğu yerde ortalanacaktır. Paragraf etiketinin çeşitli
kullanım özelliklerine aşağıda döneceğiz, Ama şimdi bu HTML sayfasını farklı bir
isimle kaydedin ve kaydettiğiniz dosyayı tarayıcınızda açın. Bu paragraf, herhangi bir
tarayıcının ekranında, şöyle gösterilecektir:
reh007.tif
40
Bu görünümü sağlayan HTML komutları, koyu renkli (matbaacılıktan kalma
deyimle siyah harfler) için <B> (ve tabiî, bu etiketin etki alanının bittiğini belirten eşi
</B>), italik için <I> (ve </I>) etiketleridir.
Aynı şekilde istersek. bir paragrafın veya bir bölümünün harf ailesini (fontunu) da
değiştirebiliriz. Yukarıdaki örnekte, metnimizin tarayıcının ekranında nasıl
gösterileceğini bilgisayar kullanıcısının seçtiği varsayılan fonta bırakıyoruz. Başka bir
deyişle, sayfamızın tarayıcıda hangi temel harfle gösterileceğini biz tayin etmiyoruz,
işi bir bakıma şansa bırakıyoruz. Oysa oluşturduğumuz Internet alanı edebiyatla ilgili
olduğuna göre, harf ailesini, sanata biraz daha önem verecek şekilde biz seçebiliriz.
/////////////////////////////NOT////////////////////////
Internet’te Font meselesiHTML sayfanızı tasarlarken, kendi bilgisayarınızda mevcut fontların, Internet
alanınızı ziyaret edecek herhangi bir kişinin bilgisayarında mevcut olacağını
varsaymanız hata olur. Bunun için hemen hemen bütün Windows ve Macintosh
ortamlarında mevcut harf ailelelerinden ayrılmamanız gerekir. Netscape ve Internet
Explorer programlarının yeni sürümleri, kurulurken, kullanıcının bilgisayarına
Internet’in klasik fontları olmaya başlayan bazı harf ailelerini yüklüyorlar. İşletme
sistemlerinin temel harfleri ile tarayıcıların eklediği harfler arasında seçim yaparak da
görsel etkisi arzu ettiğinize yakın sayfalar tasarlamanız mümkün. Bir başlıkta, ya da
bütün sayfalarınızda ortak bir logo’da mutlaka arzu ettiğiniz bir fontu kullanmak
istiyorsanız, bu başlık ya da logoyu, grafik haline getirebileceğinizi unutmayın. Ama
grafiklerin de sayfanızın ziyaretçinin bilgisayarına aktarılması süresini uzatacağını
akıldan çıkartmayın. Metinlerinizi, sırf görsel etki için grafik halinde sunarsanız, bir
süre sonra ziyaretçilerinizin beklemekten bıkıp, başka sayfalara gidebileceğini
hatırlayın.
////////////////////////////////////////////////////////
/////////////////////NOT/////////////////////////
41
SERIF-SANS SERIF Harfler:Latin alfabesine bugünkü biçimini veren eski Romalılardır. Harflerin kol ve
bacaklarının ucunda, ana çizgiye dik gelecek kısa sonlardırma çizgisi olan serif’in ilk
kez kağıt üzerinde mi, yoksa harfleri anıtlara oyan yontma ustalarının keskilerinden
mi doğduğu bugün bile tartışmalıdır. Serif, daha sonra matbaacılıkta da çok iyşe
yaramıştır. İlk yıllarda kağıt üzerinde harf şeklinde iz bırakan harf kalıpları çoğu
zaman şimşir tahtasından oyularak yapılırdı. Bu kalıplara mürekkep sürülür ve
üzerine konan kağıda basılırdı. Tıpkı lastik damga gibi! Ama tahta harf kalıplarının
uçları çok çabuk aşınırdı. Aşınmanın uzun zaman alması için, zamanla harflerin kol ve
bacaklarının çıkıntılı, yani serif yapılması gelenek oldu. Daha sonra, kurşun ve tunç
gibi dayanıklı malzemeden harf kalıpları üretildiği zaman, çıkıntıları olmayan, sans-
serif (serif’siz) harfler yaygınlaştı. Günümüzde de bilgisayar fontları, serif, sans serif
ve dekoratif diye üçe ayrılıyor. Basılı eserlerde görsel etki, zıtlıklardan yararlanrak
sağlanır. Bir sayfada yer alacak iki yazı unsuruna gerekli dikkati çekebilmek için
bunlardan birinin serif, diğerinin sans serif harfle verilmesi yaygın bir uygulamadır.
Ekranda zıtlıklar yoluyla dikkat çekebilmek için harf türünden başka şeyler, örneğin
renk ve hareket unsuru da kullanabiliriz. Fakat matbaacılıktan kalma bir gelenekle,
HTML tasarımcıları arasında başlıkla metni birbirinden serif-sans serif harflerle
ayırmak giderek yaygınlaşıyor. Ekranda okuma kolaylığı açısından sans serif harfleri
tercih edin. Özellikle küçük puntolu serif harflerin okunması çok zor olabilir.
//////////////////////////////////////////////////////////
Sayfamızda metinlerimizi Arial veya Helvetica; başlık ve kaynakları kaynağı da
Times veya Times Roman ile gösterelim. Bunun için, HTML kodumuzda bir değişiklik
yapmak zorundayız. Dosyamızın baş tarafına dokunmadan, paragrafın başladığı yere
FONT etiketi koyalım. Bu etiketin parametreleri, başka bir ifadeyle, bu etikete
niteliğini veren yüklemler, “face,” (font ailesinin adı), “size” (harfin büyüklüğü) ve
“color” (harfin rengi) olarak sıralanır. Bu yüklemlerin nasıl kullanıldığını daha
yakından görmek için, Başvuru bölümüne bakabilirsiniz. Biz burada sadece harfin
42
türünü belirlemek istiyoruz; onun için sadece “face” yüklemini kullanacağız. HTML
sayfasında paragraf etiketinden sonra <font face="Arial"> yazınız. Tabiî, bu etiketi
sonlandıran, bitiren eşini ihmal etmeden! Kaynak cümlesi için aynı ifadeyi bu kez
fontun adını değiştirerek yazacağız. Bitirdiğinizde, HTML kodunuzun paragraf bölümü
şöyle olmalıdır:
<p><font face="Arial"> “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..”</font></p><p><font face="Times New Roman">Rudolf Koch - <i>Alman
harf dökümcüsü, kaligraf</i></font></p>
Bu sayfayı kaydedin ve kaydettiğiniz dosyayı, tarayıcınıza açtırın. Herşeyi doğru
girdi iseniz, sayfanız şu sayfaya benzeyecektir:
reh008.tif
Metin Düzenleme EtiketleriBu örneklerde HTML’in temel unsuru olan paragraf (<p>..</p>) etiketini kullandık
ve çeşitli şekillerde biçimlendirdik. Ancak HTML paragraftan başka metin unsurlarını
da tanır. Bu bölümde bu etiketleri ele alacağız.
HTML’in paragraftan sonra metne ilişkin en önemli yapı taşı, başlık etiketleridir.
nitekim bizim yaptığımız örnek sayfanın da eksiği başlığının olmaması. Sayfamıza
başlık koyşmadan önce HTML’in başlık etiketlerini daha yakından tanıyalım.
HTML bize H1, birinci yani en büyük, H6 sonuncu, yani en küçük olmak üzere altı
ayrı büyüklükte başlık kullanma imkanı veriyor. Farklı başlık büyüklüklerini daha
yakından tanımak için, şu sayfayı yazarak, örneğin baslik.htm adıyla kaydedin:
<html>
43
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Başlıklar</title>
</head>
<body>
<p><font face="Arial">
<h1>H1: Bir numaralı başlık<h1>
<h2>H2: İki numaralı başlık<h2>
<h3>H3: Üç numaralı başlık<h3>
<h4>H4: Dört numaralı başlık<h4>
<h5>H5: Beş numaralı başlık<h5>
<h6>H6: Altı numaralı başlık<h6>
Normal Metin
</font> </p>
</body>
Bu dosyayı tarayıcınızda açın. Tarayıcınızın temel font ölçüsünü ortalamada
tutuyorsanız, şuna benzer büyüklükler verir:
reh009.tif
Şimdi bu bilgiyle, örnek sayfamıza başlık verebiliriz. Bunun için, paragrafın hemen
üstüne,
<h1>Tasarımcı kimdir?</h1>
<h2>Tasarım nedir? </h2>
44
satırlarını yazın ve sayfanızı kaydedin. Tarayıcıda açtığınız zaman sayfamızda iki
başlık göreceksiniz.
reh010.tif
Paragraf etiketi gibi, başlık etiketinin de arkasına koyabileceğiniz tek özellik
ALIGN’dır ve bununla başlığın sola, sağa, ortaya bloklanmasını veya sağ sol marjların
aynı anda bloklanmasını sağlayabilirsiniz.
Yerel biçimlendirmede kullanabileceğimiz stil unsurları paragraf, başlık ve
bunların <B>, <I> ve FONT etiketleri ile biçimlenmesinden ibaret değildir. Diğer
temel biçimlendirme etiketlerini kısaca sıralayalım:
<BASEFONT>: Temel font etiketi, bir sayfadaki bütün metinlerin temel fontunu,
tarayıcının varsayılan fontu ne olursa olsun, istediğiniz font ailesine (Helvetica, Times
gibi) veya font türüne (serif, sans serif gibi) çevirmenizi ya da büyüklüğünü
belirlemenizi sağlar. (Bu etiketin sonlandırıcı eşi, yani </BASEFONT> etiketi yoktur.)
<BIG>...</BIG>: İşaretlediği metnin temel fonttan bir ölçü büyük olmasını sağlar.
Bu etiketi, aynı etiketin içinde tekrar kullanırsanız, en içerdeki font, temel fonttan iki
ölçü büyük olacaktır.
Örnek: <p><font face="Times New Roman"><big>Rudolf Koch</big> -
<i>Alman harf dökümcüsü, kaligraf</i></font></p
reh011.tif
<SMALL>...</SMALL>: İşaretlediği metnin temel fonttan bir ölçü küçük olmasını
sağlar. Bu etiketi, aynı etiketin içinde tekrar kullanırsanız, en içerdeki font, temel
fonttan iki ölçü küçük olacaktır.
Örnek: <p><font face="Times New Roman">Rudolf Koch - <small><i>Alman
harf dökümcüsü, kaligraf</i></small></font></p>
reh013.tif
45
<CENTER>..</CENTER>: Ortalama etiketi, işaretlediği metnin, içinde bulunduğu
kutuda (bu bir tablonun hücresi olabileceği gibi, sayfanın kendisi de olabilir) yatay
olarak ortalanmasını sağlar.
Örnek: <p><center><font face="Times New Roman">Rudolf Koch - <i>Alman
harf dökümcüsü, kaligraf</i></font></center></p>
reh014.tif
<S>..</S>: Ortasından Çizgi Çek (Strikethrough) etiketi, işaretlediği metnin
ortasından çizgi çekilmesini sağlar. Bu etkiyi, bir metinden çıkartılmış yerleri
göstermek için kullanabilirsiniz.
Örnek: <s> Biz inanıyoruz ki,</s> en yüksek düzeyde beceri gerektiren şey,
bizim sanatımıza en yakın olanıdır..”
reh015.tif
<TT>..</TT>: Teleks Metni (Teletype Text) etiketi, işaretlediği metnin eşit
genişlikte fontlarla (Courier gibi) gösterilmesini sağlar. Bu etkiyi, bir metinde örneğin
bilgisayar kullanıcısının kendi yazması gereken bölümleri göstermekte
kullanabilirsiniz.
Örnek: <p><font face="Arial">Programın <tt>kullanıcının adını</tt> soran
diyalog kutusuna adınızı yazınız</font> </p>
reh016.tif
<U>..</U>: Altını Çiz (Underline) etiketi, işaretlediği metnin altına çizgi
çekilmesini sağlar. Bu etkiyi, bir metinde vurgulamak istediğiniz bölümü göstermekte
kullanabilirsiniz.
Örnek: <u>Biz inanıyoruz ki,</u> en yüksek düzeyde beceri gerektiren şey,
bizim sanatımıza en yakın olanıdır..”
reh017.tif
46
<HR>: Yatay Çizgi (horizontal rule) etiketi, bulunduğu yerde, vereceğiniz
yüklemlere göre yatay bir çizgi çizilmesini sağlar. Bu etiketin etkisinin bittiği yeri
belirten eşi yoktur. Yatay çizginin yüklemleri arasında sağa, sola veya ortaya
bloklanacağını gösteren ALIGN, gölgesiz olmasını sağlayan NOSHADE, pixel veya
yüzde olarak kalınlığını belirleyen WIDTH vardır. Doğrudan betin biçimlendirmeye
yaramamakla birlikte bu etiket, metnin bölümlerini ayırmakta kullanılabilir.
Örnek: <<HR><p><font face="Times New Roman">Rudolf Koch - <i>Alman
harf dökümcüsü, kaligraf</i></font></p>
reh018.tif
HTML’in metin biçimlendirmekten çok metnin bölümlerini tanımlamakta kullanılan
ve özellikle Internet’in metin ağırlıklı olduğu ilk dönemlerinden kalma, ACRONYM,
BLOCKQUOTE, CITE, CODE, DEL, DFN, EM, INS, KBD, PRE, Q, SAMP, STRONG, SUB,
SUP, VAR etiketlerini ve kullanıldıkları yerleri Başvuru bölümünde bulabilirsiniz.
Fakat burada kısaca da olsa, Internet giderek daha çok bilgi sunma ve bu
bilgilerin bulunduğu yerleri gösteren bağlantıların listesi haline döndüğüne göre,
listelerden söz etmek yerinde olacaktır. HTML bize birçok liste türü kullanma imkanı
veriyor. Bunları sırayla inceleyelim ve uygulayalım.
Sıralı Listeler
<OL>..</OL>: Sıralı (Ordered) listeler, liste unsurlarının başına, tasarımcının
arzusuna göre, ya rakam, ya harf koyarak, sıralanmış listelerdir. Listenin başladığını
ve bittiğini belirten bu iki etiketin arasına liste unsurları (list item) <LI> etiketi ile
yazılır. (Bu etiketin bittiğini gösteren eşi yoktur.) Etiketi biçimlendiren TYPE (1,
rakamla; A, büyük harfle; a, küçük harfle; i küçük Romen rakamları ile; ve I, büyük
Romen rakamları ile sıralanmayı sağlar), COMPACT, (listenin mümkün olduğu kadar
az satır aralığı ile verilmesine yarar) ve START (listenin harfi harf veya rakamdan
başlayacağını belirtir) şeklinde üç yüklemi olabilir.
47
Örnek sayfamıza, Web’de hemen herkesin tarayıcısının gösterebileceği güvenli
renklere ilişkin bir sayfa koyalım. Akılda kolay kalması için kaç adet renk olduğunu
belirtmek üzere, listemizde yer alacak unsurların rakamla veya harfle sıralanması
uygun olur. Web Tasarım Rehberi sayfasının HTML kodunu açın ve mevcut paragrafı
şöyle değiştirin:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Web Tasarım Rehberi - Renkler</title>
</head>
<body>
<p><font face="Arial">
<h1>HTML Sayfada Güvenli Renkler</h1>
<ol type=1 compact>
<li>#000000=black (Siyah)
<li>#000080=navy (Lacivert)
<li>#0000FF=blue (Mavi)
<li>#008000=green (Yeşil)
<li>#008080=teal (Koyu Yeşil)
<li>#00FF00=lime (Parlak Yeşil)
<li>#00FFFF=aqua (Turkuaz)
<li>#800000=maroon (Vişne çürüğü)
<li>#800080=purple (mor)
48
<li>#808000=olive (Zeytunî yeşil)
<li>#808080=gray (Gri)
<li>#C0C0C0=silver (Gümüşî gri)
<li>#FF0000=red (kırmızı)
<li>#FF00FF=fuchsia (Parlak pembe)
<li>#FFFF00=yellow (Sarı)
<li>#FFFFFF=white (Beyaz)
</ol>
</font> </p>
</body>
</html>
Herşeyi yolunda gitti ise, tarayıcınızda şu sayfa karşınıza çıkacaktır:
reh019.tif
Denemiş olmak için, liste etiketinde, TYPE yüklemini “1” değil, “a” olarak verin.
Sayfadaki listeniz, bu kez rakamla değil, küçük harflerle sıralanmış olacaktır:
reh020.tif
(Bu liste “ç” ve “ı” gibi Türkçe harflerin olmadığını görüyorsunuz. Peki, listemiz
çok unsur içerse, “z” harfinden sonra ne olur? İşte size güzel bir ev ödevi konusu!)
Sırasız Listeler
Sayfamızı tarayıcıda inceledikten sonra, aslında bu listenin rakam veya harfle
sıralanmış olmasının istediğimiz görsel etkiyi yapmadığına karar verdik, diyelim.
İstiyoruz ki listemizde, unsurların başına siyah, yuvarlak bir nokta gelsin. Bunun için,
HTML’in sağladığı sıralanmamış liste etiketini kullanmak zorundayız.
49
<UL>..</UL>: Sırasız (Ordered) listeler, liste unsurlarının başına, tasarımcının
arzusuna göre, ya içi dolu ya da içi boş bir yuvarlak, veya dört köşe nokta konularak
sunulan listelerdir. Listenin başladığını ve bittiğini belirten bu iki etiketin arasına liste
unsurları (list item) <LI> etiketi ile yazılır. (Bu etiketin bittiğini gösteren eşi yoktur.)
Etiketi biçimlendiren TYPE (DISC, içi dolu daire; CIRCLE, içi boş daire; SQUARE
dörtköşe nokta ile sıralanmayı sağlar) ve COMPACT, (listenin mümkün olduğu kadar
az satır aralığı ile verilmesine yarar) şeklinde iki yüklemi olabilir.
Şimdi HTML kodumuzda gerekli değişikliği yapalım. Yani liste etiketini
<UL></UL> olarak değiştirelim, TYPE yüklemini de DISC yapalım:
<ul type=disc compact>
Listemiz, tarayıcıda değişik bir görünüm alacaktır:
reh021.tif
Liste türünü diğer iki unsuru deneyerek, değiştirebilirsiniz.
Tanımlama Listeleri
HTML’in, Internet’in daha çok bilimadamlarının bilimsel rapor alışveriş alanı
olduğu günlerde, sayfa tasarımcılarına kolaylık sağlamak üzere geliştirilmiş
tanımlama listeleri üç gruba ayrılabilir.
<DL>..</DL>: Tanımlama (definition) listesi etiketinin içinde, tanımlamalara
(<DD>), tanımlama terimlerine (<DT>) veya her ikisine birden yer verilir. DL
etiketine sadece COMPACT yüklemi verilebilir. DD ve DT’nin sonlandıran eşi yoktur.
Bu etiketlerle oluşturulacak listeleri de birer örnekle inceleyelim:
Diyelim ki Web tasarımını ciddî bir şekilde meslek olarak edinmek isteyenler için
Web Tasarım rehberi sayfamızda bazı HTML işlemcilerin ve grafik programlarının
tanıtımını yapalım. Tabiî önce bu programları gruplara ayıracağız. Dolayısıyla önce
sayfamızı ziyaret edenlere, bu gruplarda ne tür programların yer aldığını anlatmak
50
zorundayız. Başka bir deyişle tanımlama listemiz üç tanımlama terimi (<DT>) ve
bunlara ait üç tanımlama (<DD>) içerecek. Buna göre, HTML kodumuzun liste
bölümü şöyle olabilir:
<h1>Web Tasarımcısının Alet Çantası</h1>
<dl compact>
<dt>HTML İşlemciler
<dd>Tasarımcıya, program ekranında Web sayfasını bir kelime işlem veya
masaüstü yayıncılık programı gibi hazırlama imkanı veren ve ortaya çıkan sayfayı
HTML kodlarını koyarak kaydeden yazılımlar.
<dt>Grafik Programları
<dd>Mevcut grafik programlarından farklı olarak, Web için güvenli renklerle
çalışan ve oluşturulan grafiği tarayıcıların tanıyabileceği biçimlerde kaydeden
programlar.
<dt>Web Alanı Yönetim Programları
<dd>Web yöneticisinin kendi bilgisayarındaki sabit diskte oluşturacağı sayfaları,
Internet Hizmet Sunucu firmanın bilgisayarına aktarma ve güncelleştirme imkanı
veren programlar
</dl>
Bu kodun oluşturduğu tarayıcı sayfası ise şöyle görünecektir:
reh023.tif
Menüler
<MENU>..</MENU>: Tabiî burada kastedilen bir lokantanın menüsünden çok, tek
kelime veya bir satıra sığabilecek uzunlukta, kısa ve çok az yer kaplayan listeler.
51
Menü listeleri, diğer listelerden çok daha az satır yüksekliğine ve satır aralığına
sahiptir.
Web tasarımcısının alet çantasında yer alması gereken programları kısa bir menü
listesi olarak vermek istersek, HTML kodumuzun liste bölümününde şu değişikliği
yapmak zorundayız:
<menu compact>
<li> HTML İşlemciler
<li> Grafik Programları
<li> Grafik Programları
</menu>
Bu şekilde değiştirdiğimiz sayfamız ise tarayıcıda şöyle görünecektir:
reh024.tif
Bu listenin kapladığı dikey alanın, aynı unsurları içeren sıralı ve sırasız listelere
göre daha az, ya da daha çok yer kapladığını kolayca bulabilirsiniz. Ve bunu
yaparken, listeler konusunu bir kere daha gözden geçirmiş olursunuz!
Liste etiketleri türlerini sayarken, özellikle dosya adı gibi bir dizin içindeki
unsurların adını sıralayan <DIR>..</DIR> etiketinden de söz edelim. Bu etiketin içine
de liste unsurlarını <LI> etiketi ile yazarız. Ortaya çıkacak liste, Menü ya da unsurları
noktalı sırasız listeden farklı olmayacaktır.
Listelerden, yukarıda verdiğimiz örneklerde olduğu gibi bilgi sıralama amacının
yanı sıra, liste başlıklarına veya unsurlarına başka sayfalarla bağlantı yaptırarak,
çeşitli şekillerde yararlanabilirsiniz. Bağlantılar’ı ilerde ele alacağız.
Listeleri, madde başlarında kendi oluşturacağınız veya başka bir kaynaktan
sağlayacağınız grafik unsurları kullanarak, güzelleştirebilirsiniz. Aşağıdaki örnekte,
açık yeşil renkli küçük bir dikdörtgen nokta olan dot.jpg grafiğini kullanarak, program
52
tanım listesini görsel açıdan zenginleştirelim. Bunun için, HTML kodumuzun liste
bölümünde şu değişikliği yapacağız:
<dt><img src="dot.jpg">HTML İşlemciler
.......
<dt><img src="dot.jpg"> Grafik Programları
.......
<dt><img src="dot.jpg"> Grafik Programları
.......
Burada yaptığımız şey, <dt> etiketinden sonra bir grafik kaynağı (image source)
etiketi koymak ve kaynak olarak sabit diskimizdeki grafik dosyasının adını vermekten
ibaret. Siz kendi örneğinizde uygun bir başka grafik dosyasının adını verebilirsiniz.
HTML sayfada grafik unsurlara nasıl yer verildiğini ve kurallarını ilerde ayrıntılı olarak
ele alacağız. Bu noktada dikkat edeceğiniz tek şey, grafik dosyasının HTML dosyası ile
aynı dizide durmasıdır. Daha sonra başka dizinlerdeki grafikleri sayfalarımıza alma
yollarını gözden geçireceğiz. Bu kodun oluşturduğu sayfa ise tarayıcıda şöyle
görünüyor:
reh025.tif
Listeler konusunu kapatırken, liste etiketlerini iç-içe kullanarak, farklı görsel
etkiler oluşturabileceğimizi belirtelim. Örneğin, sırasız bir liste etiketinin içinde
herhangi bir maddenin alt-maddelerini belirmek amacıyla, başka bir sırasız liste
etiketi kullanabilirsiniz. Örneğin şöyle bir liste sunmak istiyorsunuz:
Madde 1
Madde 2
Madde 3
53
Madde 3-Paragraf A
Madde 3-Paragraf B
Madde 4
Madde 5
Madde 6
Bu etkiyi sağlayabilmek için, <UL>..</UL> etiketinin arasını şöyle doldurmanız
gerekiyor:
<ul><li>Madde 1</li>
<li>Madde 2</li>
<li>Madde 3</li>
<ul><li>Madde 3 Paragraf A</li>
<li>Madde 3 Paragraf B</li></ul>
<li>Madde 4</li>
<li>Madde 5</li>
<li>Madde 6</li>
</ul>
Bu kod, tarayıcıda, şöyle görünüyor:
reh026.tif
Burada dikkat edeceğiniz nokta, iç içe açılan etiketlerin sıralı şekilde kapanması
olmalıdır. Tabiî, bir süre sonra başınız dönmezse!
54
Bölüm III: Tablo ve Çerçeveler ve KatmanlarHTML 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!
////////////////////////////////////NOT://///////////////////////
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
55
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.
elle verilmiş boşluk örneği .. uygun : reh027.tif
elle verilmiş boşluk örneği .. bozuk: reh028.tif
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,
56
tarayıcının ekranı ne boyutta olursa olsun sayfanın tam ortasında gösterilmesini
sağlamak elinizdedir.
mükemmel örnek: reh029.tif
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.
TablolarTablolar, 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
57
ç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 EtiketleriHTML’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>
58
<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>
Bu kod, tarayıcınızda, şöyle bir tablo oluşturacaktır:
reh030.tif
/////////////////////////////////////NOT//////////////
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
59
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.
60
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,
61
CELLPADDING=x ile verilebilir. yine, x yerine, pixel olarak arzu ettiğiniz ölçüyü
verebilirsiniz.
Diğer tablo kontrol araçları: HTML 4 ile, tablolara, bilgisayarda görme özürlüler
için ekrandaki unsurları okuyarak sese çeviren program varsa, tablonun yatay ve
dikey unsur başlıklarını seslendirmeye yarayan AXIS ve AXES etiketlerinden tutun,
sütunları veya satırları gruplayama, her bir gruba diğerinden farklı özellikler vermeye
yarayan yeni yeni özellikler kazandırılmış bulunuyor. Bu özellikleri Başvuru
bölümünde okuyarak ve ayrıntılarını uygulayarak bulabilirsiniz.
Şimdi tablodan sayfaya şekil kazandırma unsuru olarak nasıl yararlanacağımıza
dönelim.
İskelet Malzemesi Olarak TabloÖnce bu sayfaya bir bakın ve bu sayfanın temel ögesinin ne olduğunu anlamaya
çalışın:
reh031.tif (veya reh031bw.tif)
Tahmin ettiğiniz gibi, sayfanın temeli, bir tablodan ibaret.
Tablodan sayfanızın iskeleti olarak yararlanmak istediğiniz zaman, kurguya, en
içerden başlamanız yararlı olur: Boş bir kağıda yan yana gelecek kutuları çizin; bu
kutuların hepsi aynı sırada ve aynı sütunda olması gerekmez; tersine, sayfanın temeli
olan kutuların mümkün olduğunda “kaybolması” için bazı tablo hücrelerinin
sağlarında, sollarında, altlarında ve üstlerindeki hücrelerle birleşmesi gerekir. Bunu
yapabilmek için tablonun temel kuralını hatırlayarak işe başlayalım:
TABLE etiketi ve ilgili yüklemlerinden sonra:
Önce tablonun birinci sırasını başlatın: <TR>
Sonra bu satıra kaç hücre koyacaksanız o kadar hücre koyun. Diyelim ki üç hücre
koyacağız: <TD> </TD><TD> </TD><TD> </TD>. (Burada
62
“ ” şeklinde gösterdiğimiz bir harflik aralık, hücrenin içine hiç bir şey konmadan
da tarayıcı tarafından görülmesini sağlamak içindir. Bazı tarayıcılar içinde hiç bir şey
olmayan hücreleri görmezler! sonra bunları silip, yerlerine hücrenin asıl malzemesini
koyacağız. Bunu silmeyi unutsanız bile, tablonuza zarar vermeyecektir.) Sonra satırı
kapatın: </TR>
İkinci sırada, diyelim ki iki hücre olacak. Birinci ve ikinci hücreler birleşecek;
üçüncü hücre yerinde duracak. Sırayı başlatalım: <TR>. Birleşik birinci ve ikinci
hücreleri açalım: <TD COLSPAN=2> </TD>. Üçüncü hücreyi koyalım:
<TD> </TD>. Ve bu sırayı da kapatalım: </TR>
Diyelim ki üçüncü sıranın birinci hücresi ile dördüncü sıranın birinci hücresini
birleştireceğiz. İkinci ve üçüncü hücreler ayrı ayrı kalacaklar:
<TR><TD
ROWSPAN=2> </TD><TD> </TD><TD> </TD></TR>.
Üçüncü ve son sıranın birinci hücresini, bir üstündeki hücre aldığına göre, bu
sıraya kaç hücre koymamız gerek? Evet, bu sıraya 2 hücre koyacağız. Ama istiyoruz
ki bu iki hücre de birbiriyle birleşsin: <TR><TD COLSPAN=2></TD></TR>
Bu kadar! Şimdi bu dosyayı saklayalım ve tarayıcıda bir bakalım. Bu arada daha
sonra kullanım kolaylığı için aralıkların yerine hücrelerin adını yazabiliriz. Tabloyla
ilgili HTML kodlarımız toplu olarak şöyle:
<table border="1" width="75%">
<tr>
<td>Kutu 1</td>
<td>Kutu 2</td>
<td>Kutu 3</td>
</tr>
63
<tr>
<td colspan="2">Kutu 4</td>
<td>Kutu 5</td>
</tr>
<tr>
<td rowspan="2">Kutu 6</td>
<td>Kutu 7</td>
<td>Kutu 8</td>
</tr>
<tr>
<td colspan="2">Kutu 9</td>
</tr>
</table>
Bu kodun oluşturduğu içi boş tablo ise şöyle görünüyor:
reh034.tif
Şimdi burada ilkemizi bir kere daha tekrarlayalım: Tablo, içindeki satır ve
sütunların kesişmesi demek olan hücrelerden oluşur. Hücreleri yukarıdan aşağıya,
soldan sağa doğru birleştirebilirsiniz. Bir tablonun doğru oluşması için, birleştirdiğiniz
ve birleştirmediğiniz bütün hücrelerin sayısının, tabloda olması gereken hücre sayısını
tutması gerek. Tutmazsa ne olur? Tabloda kullanılabilecek bir hücreden mahrum
olursunuz! Tabiatıyla, dünyaya hiç bir şey olmaz!
Peki, bu tablocuk, bizim sayfamıza nasıl iskelet olacak? İçi doldurularak! Bu
hücreleri, bir gazete veya dergi sayfasının sütunları gibi düşünün. Kimi kutuya grafik
unsur koyacağız; kimine metin. Hatta, bir tablonun bir hücresine, ikinci bir tablo bile
64
konabilir! Birinci tabloyu sayfanızın ana iskeleti olarak düşünürseniz, bu iskeletin bir
yerinde, içine çeşitli verileri koyduğunuz bir tablo bulunabilir.
Şimdi, küçük tablomuzu renklendirerek işe başlayalım:
Kutu 1’i oluşturan TD’nin zemin rengini bir tür yeşile çevirin:
<td bgcolor="#CC9999>Kutu 1</td>
Aynı şekilde, Kutu 2’yi, #FFCC99; Kutu 3’ü #CCCCCC; Kutu 4’ü #FF9966 yapın.
Diğer kutulara da kendiniz renk verin. Bu arada ilk liste örneğimizi hatırlıyor
musunuz?
////////////////////////////NOT///////////////////
Renk Şifresini Çözdünüz mü?Web tarayıcılar renk komutunu, ya İngilizce kelime olarak ya da kod olarak kabul
ederler. Bu karışık gibi görünün renk kodu, aslında, 16 tabancı sayı sistemiyle, yani
Hexadecimal sistemle (Sayı sistemini 1’den 10’a kadar ondalık sistem olarak değil,
1’den 16’ya kadar 16’lık bir sistem olarak; 0’dan sonraki altı sayıyı da A, B, C, D, E, F
olarak ifade ettiğimizi düşünün. Yani “11” yerine “1A” yazacaksınız. Tabiî, bu
sistemde bir rakamı yazmak için iki basamağa ihtiyacınız var) Kırmızı, Yeşil ve Mavi
renklerin ifadesinden ibarettir. Bilgisayar ekranı, bir katod tüpü olduğuna göre, renk
sistemi, tıpkı televizyon ekranları gibi RGB (Kırmızı-YeşilMavi) renklerin üstüste
düşürülerek diğer renklerin elde edilmesine dayanır. Altı haneli renk kodu, bilgisayar
ekranına arzu ettiğimiz rengin kırmızı, yeşil ve mavi renklerin ne oranda karıştırılarak
elde edileceğini söylemektedir. İki haneli renk oranları ise bilgisayara, “00” ise o
renkten yüzde sıfır oranında, “FF” ise yüzde 100 oranında karıştırılmasını söylüyor.
Bilgisayar ve televizyon ekranında beyaz renk, her üç rengin de yüzde yüz oranında
olması halinde, siyah ise her üç rengin de yüzde sıfır oranında olmasıyla sağlandığına
göre #000000 Siyah, #FFFFFF ise Beyaz anlamına geliyor. Web tarayıcıları her rengi
göstermezler; her türlü tasarım projesinde olduğu gibi, Web tasarımında da renk en
önemli yapı taşlarından biridir. Bunun nedenle grafik tasarımcılar için renklerin
65
etkileri ve kullanma kuralları ile ilgili kaynaklara bakmanız yerinde olur. Web’de
güvenli renk konusunda iyi bir kaynak, http://www.slip.net/~kiss/software/html_colors
adresinde bulunabilir.
//////////////////////////////////////////////////
Kutularımızı renklendirdiğimize göre, şimdi de içine koyacağımız yazıların
bloklanma durumlarını farklı hale getirelim. Soldaki kutulara koyacağımız yazılar sola,
ortadaki kutularda ortaya, sağdaki kutularda sağa bloklarsak, görsel etki açısından
kutularımız bir ölçüde gazete-dergi sütunu görünümü kazanabilir. Ama tabiî bu,
tamamen sizin kendi tasarım zevkinize bağlı. Kutuların içeriğini istediğiniz tarafa
bloklayabilirsiniz. Önemli olan bunu bir kere denemiş olmak.
Bu noktada, kısaca tartışmamız gereken bir görsel unsur, hücrelerin ve tablonun
tümünün çerçeveleri olup-olmamasıdır. Kimi tasarımcı bu çizgilerin tablo ile elde
edilmek istenen etkiyi yok ettiğini düşünür; kimi, gerektiği yerde sütunların
arasındaki çizgi gibi, tablonun bazı çerçevelerini korumak gerektiğini. Bu da,
tasarımcı olarak tamamen sizin sanat anlayışınıza ve zevkinize kalmış bir şey.
Çerçeveleri kaldırmak istiyorsanız, TABLE etiketinin BORDER= yüklemini 0
yapacaksınız. Peki, diğer çizgiler nasıl kontrol ediliyordu?
Kutulara yazı girmek kolay. TD etiketi ve yüklemleri kendisine vereceğiniz yazıyı
bekliyor. Fakat Internet’i ilginç hale getiren, içeriğin sadece yazı olmaktan kurtulması
oldu. Bu nedenle biz de kutularımıza, desen, ActiveX, Java, hareketli GIF dosyası, JPEG
fotoğraf, ya da süslü harflerle yazılmış ve grafik dosyası haline getirilmiş başlıklar
koyabiliriz. Bunların örneklerini çeşitli yerlerde bulabilirsiniz. Byte-Türkiye’nin CD
Magazin’leri bunların örnekleri ile dolu.
/////////////////////////////////NOT//////////////////////
Elinize geçeni sayfanıza koyabilir misiniz?Hayır!. Hem de kocaman bir hayır! Sözünü ettiğimiz bütün multimedya (çoklu
ortam) unsurları, sanat eseridir; ve her sanat eserinin bir telif hakkı sahibi vardır. Telif
66
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.
67
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>
68
İ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
69
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>
70
<td align= left bgcolor=”#FFCC99” colspan="2"><p><b><font
size=”+3”>Web Tasarımında Gözetilecek İlkeler: </font></b></p>Grafikle İlgili
İlkeler,<br>İçerikle İlgili İlkeler<br>Davranış Kuralları</td>
<td align="center" bgcolor="”#FFFFCC”"><b><font size="+2"
color="navy">Güzel Web Örnekleri</font></b><p><font size="+1">Web
Tasarımcıları Derneği,<br>Tasarımcı Gençler Birliği<br>Gönüllü Web
UstalarıGönüllü<br>Web Ustaları</font></td>
</tr>
</table>
</font>
</body>
</html>
Bu dosyayı, öncekinden farklı bir isimle kaydedin ve en beğendiğiniz tarayıcıda
sınayın. Karşınıza şuna benzer bir görünüm çıkmış olmalı:
reh036.tif
Şimdi burada büyükçe bir parantez açalım ve sayfamızda olmayan bir şeyden söz
edelim:
Sayfamızda henüz “Web’i Web yapan asıl unsur yok! Web’e bugünkü kimliğini
veren unsurun, metinlerin, birbiri ile ilintilendirilmesi olduğunu hatırlıyorsunuz. Yani,
bir kelimeye, cümleye hatta harfe veya rakama, bir başka metnin, paragrafın, harfin,
sayfanın, grafiğin, hatta tamamen başka bir Web alanının adresini kodlayabilirsiniz.
Internet’te bir şeyleri tıklayarak bir yerlere gitmemizi sağlayan bu kodlardır. Oysa
bizim ana sayfamızda bir taraftan kendi alanızda, diğer taraftan başkalarının
alanlarında olan bazı unsurları sıralayan iki liste var; ama bu listeler, bizim
ziyaretçilerimizi hiç bir yere götürmüyorlar. Oysa ziyaretçilerimiz güzel Web
71
ö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çevelerHTML’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.
72
Ö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.
73
Ç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%">
74
Ş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>
75
Burada <noframes>..</noframes> kodu dikkatinizi çekmiş olmalı. Bu, başta
belirttiğimiz, çerçeveden hoşlanmayan Internet meraklıları veya çerçeve teknolojisini
beceremeyen tarayıcı kullananlar için, çerçevelerin içine yazdığınız unsurları buraya
yazarak, çerçeveden hoşlanmayanların Web sayfanızdan eli boş çevirmemeyi sğlayan
güvenlik önlemi. Şimdilik aynen yazın. Sonra isterseniz içini doldurursunuz.
Şimdi bu HTML’i “cerceve1.htm” adıyla saklayın. Tarayıcınıza bu sayfayı açtırın.
Sonuç, herhalde şöyle bir mesaj olsa gerek:
reh037.tif
Tarayıcınız açılınca, karşınıza da şöyle bir tablo çıkacaktır:
reh038.tif
Neden? Çerçevelerinizin çağırdığı HTML sayfalarını yapmadınız da onun için!
Şimdi, düz yazı programınızda, şu sayfayı oluşturun:
<html>
<head>
<title>Çerçeve 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<body bgcolor="#C0C0C0">
<p align="center"><big><big><big><strong>Çerçeve:
1</strong></big></big></big></p>
</body>
</html>
Bu sayfayı, “cer01.htm” adıyla saklayın. Başlıktaki 1’i 2; zemin rengini "#00FFFF";
paragraftaki “Çerçeve: 1” yazısını “Çerçeve: 2” yaparak ve dosya adını “cer02.htm”
76
diye değiştirerek sayfayı yeniden kaydedin. Aynı değişiklikleri 3 ve 4’ncü sayfa için de
yapın. Üçüncü sayfa için zemin rengini "#FF0000," dördüncü sayfanın zemin rengini
ise "#00FF00" yapabilirsiniz. Bu dört dosyayı, “cerceve1.htm” dosyasının bulunduğu
klasöre koymayı unutmayın.
Tarayıcınızı şimdi açın. Karşınıza şu görünümün çıkması gerek:
reh039.tif
Hızımızı almışken; “cerceve1.htm” dosyasını düz yazı programında açın,
FRAMESET etiketinin önündeki “cols” ifadesini “rows” olarak değiştirin. Başka hiç bir
şeyi değiştirmeden, dosyayı, “cerceve2.htm” adıyla kaydedin ve oluşturduğunuz
HTML dosyasını tarayıcınızda açıp bakın. Biraz önceki dik sütunlar halindeki
çerçeveleriniz, yatay hale geldi mi?
reh040.tif
Şimdi, FRAMESET sayfamıza, iki dikey, iki de yatay çerçeve koyalım. Yine
“cerceve1.htm” dosyasını düz yazı programında açın, FRAMESET etiketinin önündeki
“cols” ifadesini (cols="50%,50%"), “rows” ifadesini ise (rows="50%,50%") olarak
değiştirin; başka hiç bir şeye dokunmayın ve dosyanızı “cerceve3.htm” adıyla
saklayın. Şimdi bu sayfayı tarayıcıda açıp, bakalım:
reh041.tif
Harika! Şimdi eni, boyu birbirine eşit dört çerçevemiz oldu. Alıştırma olarak,
“cerceve1.htm”, “cerceve2.htm” ve “cerceve3.htm” deki sütun ve sıra yüzdelerini
değiştirin; yüzdeleri kaldırıp, yerlerine pixel cinsinden mutlak ölçüler verin. İşte size
bir ev ödevi:
Sütun veya sıra ölçüsünü, örneğin (cols="100,*") veya (rows="100,*") yaparsanız,
nasıl bir sonuç alırsınız. İpucu: Tabloda olmayan ama çerçeve teknolojisinde,
sayfamızı ve sayfamızın bölümleri olan çerçevelerimizi kullanıcının tarayıcı ekranının
tümünü kapsayacak kadar genişletebiliriz, demiştik. Bir ipucu daha: Asterisk, dosya
77
adında “ne olursa olsun” demek olduğuna göre, acaba burada “Birinci sütun (veya
sıra) 100 pixel olsun, ikincisi ne olursa olsun!” anlamına mı geliyor?
Eşit Sayıda Olmayan Sütun ve Sıralar Buraya kadar ya eşit sayıda sütun ve sıra, ya da eşit sayıda sütun veya sıra içeren
çerçeveli sayfa yapmayı ele almış olduk. Açaba, sütun ve sıra sayıları eşit olmayabilir
mi? Yani, tabloların hücrelerini alt ve ya yandaki hücrelerle birleştirdiğimiz gibi,
çerçeveleri de yanlarında ve altlarındaki çerçevelerle birleştirebilir miyiz? Hayır, bunu
yapamayız. Çerçeveleri birbirleriyle birleştiremeyiz, ama aynı görüntüyü elde
edebiliriz. Sadece kodlamamız biraz farklı olur. Şimdi, şu örnekteki biçimde
çerçeveler elde edelim:
cerorn.TIF
Dikkat etti iseniz, HTML’de çerçeveyi oluşturan FRAMESET komutunda ne kadar
çerçeve alanı ayırırsanız ayırın, aynı etiketin içinde bu çerçevelerin kaynağını
“<FRAME SRC="...." .....> ifadesiyle belirtmezseniz, tarayıcı, FRAMESET komutunda
işaret edilen sıranın kaynağından önce yeni bir FRAMESET komutu ile bu kez sütun
oluşturur ve onun kaynaklarını bildirirseniz, birinci FRAMESET’in diğer sıralarından
önce, ikinci FRAMESET’in sütunlarını çizecektir. İşte eşit olmayan sayıda sütun ve sıra
içeren çerçeveli sayfaları bu durumdan yararlanarak yazabilirsiniz. Önce, yukarıdaki
şemada gösterilen birinci örneği yapalım. Birinci sütun tek sıralı, ikinci sütun iki sıralı
bir çerçeve sayfası için kodumuz şöyle olmalıdır:
<FRAMESET COLS="25%,75%">
<FRAME SRC="cer01.htm" NORESIZE SCROLLING="auto">
<FRAMESET ROWS="20%,80%">
<FRAME SRC="cer02.htm" NORESIZE SCROLLING="auto">
<FRAME SRC="cer03.htm" NORESIZE SCROLLING="auto">
78
</FRAMESET>
Burada, önce iki sütunluk bir çerçeve alanı açıyoruz, birinci sütun tek sıralı olacağı
için sadece bir kaynak gösteriyoruz; ikinci sütunu iki sıralı yapacağımız için önce bu
sütuna sıralar oluşkuruyoruz; ve bu sıraların kaynaklarını gösteriyoruz. Bu kodun
oluşturduğu sayfa, şöyle görünüyor:
reh042.tif
Örnekler şemamızdaki ikinci sayfada ise yanyana iki sütunun altında tek bir sıra
var. Bunu gerçekleştirmek için, tarayıcıya iki ayrı FRAMESET komutu vereceğiz. İlk
komut sayfada iki sıralı bir çerçeve oluşturacak; bu çerçevelerin kaynaklarını
belirtemeye geçmeden hemen ayrı bir FRAMESET komutu ile iki sütun oluşturacağız.
Bu sütunların içeğinin kaynaklarını belirttikten sonra, sütunları açan FRAMESET’i
kapatacağız, alttaki sıranın kaynağını belirteceğiz. Kodumuz şöyle olacak:
<FRAMESET ROWS="50%,50%" frameborder="NO">
<FRAMESET COLS="50%,50%">
<FRAME SRC="cer01.htm" NAME="cer1" frameborder="NO" NORESIZE
SCROLLING="NO">
<FRAME SRC="cer02.htm" NAME="cer2" frameborder="NO" NORESIZE
SCROLLING="NO">
</FRAMESET>
<FRAME SRC="cer03.htm" NAME="cer3" frameborder="NO" NORESIZE
SCROLLING="NO">
</FRAMESET>
Bu kodun yaptığı sayfa ise tarayıcıda şöyle görünecektir:
reh043.tif
79
Üstte bir, ortada, iki altta çerçeveden oluşan sayfaya gelince: Burada, deminki
sayfanın mantığı ile, sıraları oluşturduktan ve birinci sıranın kaynagını verdikten sonra
hemen ikinci bir FRAMESET komutu ile iki sütun oluşturacağız ve onların kaynaklarını
bildireceğiz. Sütunları açan FRAMESET’i kapattıktan sonra alttaki sıranın kaynağını
verelim ve birinci FRAMESET komutunu kapatalım. Kodumuz şöyle olacaktır:
<FRAMESET ROWS="20%,60%,20%">
<FRAME SRC="cer01.htm" NORESIZE SCROLLING="no" NAME="cer01"
MARGINWIDTH="0" MARGINHEIGHT="0">
<FRAMESET COLS="20%,80%">
<FRAME SRC="cer02.htm" NORESIZE SCROLLING="auto" NAME="cer02"
MARGINWIDTH="0" MARGINHEIGHT="0">
<FRAME SRC="cer03.htm" NORESIZE SCROLLING="auto" NAME="cer03"
MARGINWIDTH="0" MARGINHEIGHT="0">
</FRAMESET>
<FRAME SRC="cer04.htm" NORESIZE SCROLLING="auto" NAME="cer04"
MARGINWIDTH="0" MARGINHEIGHT="0">
</FRAMESET>
Bu kodun oluşturduğu sayfa ise tarayıcıda şöyle görünecektir:
reh044.tif
Bu bölümü kapatırken, ilkemizi özetleyelim: Önce bir FRAMESET komutu ile en
üstte en soldaki unsur yanında başka sütun olmayan bir sütun ise sütunları; değilse
sıraları oluşturun. Bu sütunda diğer sütunda olmayan sıralar varsa, o sıraları
oluşturun. İlk oluşturulacak sıra veya sütunların kaynaklarını verin; ikinci ve üçüncü
oluşturulacak sıraların kaynaklarını verin. Ve temel ilkeyi unutmayın, “önce açılan
etiket sonra kapanır.
80
Şimdi bir ev ödevi. Şu sayfayı oluşturacak kodu nasıl yazarsınız:
reh045.tif
Bir iki ipucu verelim: Önce sütunları oluştaracaksınız; ama sütun kaynaklarını
vermeden, hemen sıraları oluşturacaksınız.
HTML’de Bağlantı’ya GirişBu noktada duralım ve kodun içindeki <A>..</A> etiketini ele alalım. HTML’e
hareket kazandıran bu etikettir. HTML etiketleri arasında Anchor (A) etiketinin yanı
sıra, <BASE> ve <LINK> etiketleri de, bir noktadan bir diğerine gitmemizi sağlar.
HTML sayfada metinlere ve diğer unsurlara bağlantı kazandırabilirsiniz. <A>..</A>
etiketiyle metinlere kazandıracağımız bu ilişkinin temel kurallarını burada ele aldıktan
sonra, diğer unsurları özellikle “olaylara” bağlantı kazandırma konusu, aşağıda
Katmanlar konusunu işlerken göreceğiz.
Metinlere Bağlantı KazandırmakAnchor, İ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.)
81
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.
82
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.
83
HTML’de Bağlantı TürleriBu 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:[email protected]”>Sayfamız
hakkında düşündüklerinizi bize bildirin</A>
84
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
85
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
86
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
87
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>
88
<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>
89
<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.
/////////////////////////////NOT///////////////////
Ters Bölü İşaretine Ne Oldu?
90
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:\belgeler\
html\ornek.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>
91
<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
92
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.
93
Ş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:
reh047.tif
Ş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;
94
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)
95
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:
reh061.tif
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.”
96
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:
reh062.tif
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.
Bir de, bir HTML sayfasının değişik anlardaki ekran görünümlerine bakın:
reh064.tif
reh065.tif
reh066.tif
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
97
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ı,
98
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
99
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>
<!-
100
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>
101
<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:
reh071.tif
Ş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:
reh072.tif
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
102
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.
///////////////NOT/////////////////////
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
103
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 UygulamakStil 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çicilerBir 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:
104
.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.
105
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>
106
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çicilerDö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 ÖzelliklerHTML’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,
107
“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 }
108
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
109
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 }
110
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 }
111
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) ÖzellikleriCSS 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,
112
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
113
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 ÖzelliklerStil 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:
114
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 NesnelerEvet 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;}
115
#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.
////////////////////////////////////////////////////NOT///////
“Ü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.
///////////////////////////////////////////////////////
////////////////////////////////////////////////////NOT///////
“<!—“ 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
116
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:
reh073.tif
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;
117
dosyayı “div02.htm” adıyla yeniden kaydedin ve bu kez bu dosyayı açıp bakın. Farkı
görebiliyor musunuz?
reh074.tif
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:
reh075.tif
“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.
118
Ş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 EtkileriPeş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.
////////////////////////////////////NOT//////////////////////
Javascript ve VBScriptEtkili 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ı
119
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}
120
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>
121
</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!
Buradaki şekliyle bu sayfa ve oluşturduğumuz etki, IE ekranında şöyle görünüyor:
reh076.tif
reh077.tif
Bu kitapçığın kapsamı, dinamik HTML’in diğer imkan ve yeteneklerini ele almaya
elverişli değil. Ama, Internet DHTML kılavuzları ile dolu. Ayrıca, WYSIWYG (Ekranda ne
görürsen o sonucu veren) HTML editörleri de Dinamik HTML’in yeteneklerinden
Javascript öğrenmeden yararlanma imkanı veriyor.
122
Bölüm IV: HTML’de Form ve CGIInternet, bilimadamlarının birbirlerine araştırmalarıyla ilgili rapor vermelerini
sağlayan bir Ağlar-arası Ağ olarak başlamış ise de, bugün hemen herkesin, yararlı
olsun, olmasın, her türlü bilgiyi alıp-verdiği başlıca alan haline gelmiş bulunuyor.
Kimine göre, Internet, duragan bilgisayar ekrarınını televizyon ekranına çevirdiği için
bu kadar cazip hale geldi. Kimine göre, Internet’in sırrı ulaşım ve talep etme kolaylığı
getirmesinde. Her türlü mal ve hizmet, artık Internet’te yapazarlanıyor ve Internet
yardımıyla edinilebiliyor. Ödemelerinizi Internet’te yapabilirsiniz. Bu grup, Güvenli
HTML (SHTML) denen yeni bir protokolün yaygınlaşmasıyla, Internet’te elektronik
ticaretin de artacağı kanısında.
Internet’in bu ikinci işlevi, yani Internet’in sadece Web sayfası sahibinin sunduğu
bilgilerin ziyaretçi tarafından alınmasına yarayan tek yönlü bir yol değil de,
ziyaretçinin de Web sayfası sahibine birşeyler gönderebilmesi, HTML’in Form başlığı
altında toplanan imkan ve yetenekleri sayesinde mümkün oldu. Elektronik ticaret de,
HTML’in FORM etiketinin kullanımından başka bir şey değil.
FORM, sizin Web tasarımcısı olarak sayfanıza koyacağınız ve içinde ziyaretçinin
dolduracağı boşluklar veya ziyaretçinin yapacağı tercihleri belirteceği kutular bulunan
ve en sonunda bu bilgileri size göndereceği bir düğme bulunan bir Web sayfasıdır.
FORM, bir sayfanın içinde bir bölüm olabileceği gibi, başlıbaşına bir sayfa da olabilir.
FORM, ziyaretçiye “girdi” yapma imkanı verebilir; vermeyebilir. FORM düz bir metin
olabilir; resimlerle süslenmiş olabilir. Ne kadar işlenmiş olursa olsun, bütün HTML
etiketleri gibi formlar da bir etiketle başlar ve biter. Şimdi bu bölümde
<FORM>..</FORM> etiketinin arasını doldurmayı öğrenelim.
Bu arada bir uyarı notu: Oluşturacağınız form, ekranda çizilecek ve size başarılı
bir form yapıp, yapmadığını görme imkanı verecektir. Ama formun gerçekten
yapmasını istediğiniz işleri yapıp, yapmadığını sınamak için, örneğin altına
123
koyacağınız Gönder düğmesine basmanızın bir faydası olmayacaktır. Çünkü HTML’de
form, karşısında o formdaki bilgileri alıp bir şeyler yapacak bir program olsun ister. Bu
programlar, genellikle Web Server dediğimiz, ziyaretçilere Web sayfalarındaki bilgileri
sunan programların bir bölümüdür. En yaygın Web Server programları (Unix
ortamında Apache, Windows ortamında Microsoft Internet Information Server,
ziyaretçiden gelen form bilgisini alacak ve işleyecek “Web Server’a ortak Giriş Kapısı”
diye adlandırabileceğimiz CGI (Commen Gateway Interface) oluştururlar ve burada
ziyaretçilerden gelen formları işleyecek programlara yer verirler. Bu programlar
genellikle CGI programı adıyla bilinir. Bu tür programları, Internet hizmeti yapmadan
sadece formlarınızı sınamak amacıyla PC veya Macintosh bilgisayarlara koymak da
mümkündür. Ancak bilgisayarınıza böyle bir CGI programı kurduğunuz taktirde
formlarınızı bu programa “göndererek” sınayabilirsiniz.
Formun BölümleriHTML formunun üç bölümü vardır. Bunlar, Web tasarımcısının formdan beklediği
eylemin (Action) ne olduğunu gösteren ve ziyaretçinin tarayıcısına hitabeden bölümü;
ziyaretçinin doldurması gereken boşluklar veya tercih etmesi gereken seçenekler; ve
ziyaretçiye bu formun eylem komutunu harekete geçirme veya vaz geçme imkanı
veren komut düğmeleri.
Action ve MethodWeb alanınızda bir form oluşturmak için kullanacağınız <FORM> etiketi,
kullanıcının tarayıcı programına bu formdaki bilgileri ne yapması gerektiğine ilişkin
talimatı da içerir. Bunun için FORM etiketinin içinde, tarayıcıya ACTION yüklemiyle bu
formun doldurularak gönderilmesi halinde içindeki bilgilerin nerede, hangi adreste,
hangi programa teslim edileceğini söylersiniz. HTTP protokolü Web Server ile
ziyaretçinin bilgisayarı arasında iki tür iletişime imkan verdiği için bu bölümde
124
tarayıcıya hangi yöntemi seçmesi gerektiğini de METHOD yüklemiyle bildirmeniz
gerekir.
Dolayısıyla Form etiketinin yazılış kuralı şöyle olacaktır:
<FORM ACTION=”url” METHOD=POST veya GET>
Burada url harfleri yerine bu form ile gelecek bilgiyi işleyecek programın adresi
bulunacaktır. Örneğin: “/cgi-bin/siparis.cgi”
CGI programları için aşağıda daha geniş bilgi bulacaksınız.
METHOD hanesine ya GET ya da POST yazabilirsiniz. Get ve Post, ziyaretçinin
bilgisayarı ile Web Server arasında kurulacak HTTP prorotokolüne dayanan bağlantı,
ziyaretçinin Server’a bu iki yöntemden birisiyle bilgi göndermesini sağlar.
Aralarındaki fark, Get yönteminde bilgiler Web Server’da “querry_string” denen
değişkenin içine yazılırken, Post yönteminde bu bilgiler “stdin” değişkenine
yerleştirilir. Server’larda ikinci değişken birincisinden çok yer tutar; yani Post
yöntemiyle daha çok bilgi gönderilebilir. Web alanı işletmecileri giderek daha yüksek
oranda Post yöntemini tercih ediyorlar. Gerçek bir form yaptığınız ve Web alanınıza
koyacağınız zaman, Web alanınıza ev sahipliği yapan firmanın teknik yetkililerine,
formlarınızda ACTION ve METHOD yüklemlerinin karşısına ne yazacağınızı sormanız
gerekir.
Form etiketinin önüne form bilgisi ziyaretçinin bilgisayarından sizin Web
Server’ınıza nasıl bir şifreleme yöntemi ile gelsin istiyorsanız, onu da yazabilirsiniz.
Fakat bu bilgi Web Server programlarına göre değiştiği için burada böyle bir imkanın
varlığını belirtmekle yetineceğiz. “ENCTYPE=”.....” şeklinde yazılan bu bölümü
doldurmazsanız, varsayılan şifreleme yöntemi, HTTP’nin standart kodlama yöntemi
olan MIME olacaktır.
125
Doldurulacak Boşluklar ve İşaretlemeler<FORM>...</FORM> etiktenin arasını ya kullanıcının dolduracağı boşluklar, ya da
tercih yapmasına imkan veren listeler ve düğmelerle doldurmanız gerek. Bunu
sağlayan başlıca kontrol elemanlarınız INPUT , SELECT ve TEXTAREA etiketidir. Şimdi
bunları sırasıyla inceleyelim:
INPUTINPUT etiketi ile ziyaretçiye, forma klavyesinden veya fare ile işaretlemek
suretiyle bilgi girmesi imkanı veririz. Bu etiketi kullanmanın genel biçimi şöyledir:
<INPUT TYPE=”...” NAME=”...” VALUE=”...” SIZE=”...” MAXLENGTH=”...”
SCR=”...” CHECKED”....”>
Şimdi bu etiketin kullanım ilkelerini kullanıcının yapabileceği işlere göre ayırarak
inceleyelim:
Kullanıcının klavyesi ile bir metin girmesi için:
TYPE=TEXT NAME=”...” VALUE=”...” SIZE=”...” MAXLENGTH=”...”
“Size” hanesi bu kutunun kullanıcının ekranında gösterileceği genişliği karakter
olarak belirler; “Maxlenghth” hanesi ise kullanıcının girebileceği metnin uzunluğunu
karakter olarak belirler. Bu haneyi koymaz ve bir değer vermezseniz, tarayıcı azami
metin uzunluğunu 21 karakter olarak varsayar. Bu kutu ekranda gösterildiğinde
içinde bir yazı olsun istiyorsanız, bunu “Value=...” hanesine tırnak içinde yazın. Daha
sonra CGI programı düzeyinde bu bilgiyi bir veri bankasına işlemek, bir elektronik
mektup içinde veya herhangi bir başka tarzda kullanmak istiyorsanız, bu alana
“Name=...” hanesinin içine yazmak suretiyle isim vermeniz gerekir.
Kullanıcının parola girmesi için:
TYPE=PASSWORD NAME=”...” VALUE=”...” SIZE=”...” MAXLENGTH=”...”
126
Metin girme kutusu ile aynı özelliklere sahiptir; fakat bu kutunun içine kullanıcının
gireceği bilgiler ekranda gösterilmez yerine yıldız simgesi gösterilir.
Kullanıcının bir kutuya işaret koyması:
TYPE=CHECKBOX NAME=”...” VALUE=”...” [CHECKED]
Ziyaretçi, bu komutla oluşturacağınız işaret kutusunun içine fare ile tıklamak veya
klavyede aralık tuşuna basmak suretiyle bir çarpı işareti girer veya otomatik olarak
konan işareti kaldırabilir. Bu kutuda işaret varsa, tarayıcı “Value=” hanesine
yazacağınız bilgiler ve kutunun adını bir çift olarak Server’a gönderir. Kutuda işaret
yoksa kutunun adı ve değeri Server’a gönderilmez. Bu kutuyu oluştururken mutlaka
Name hanesine tırnak içinde bir isim girmeniz gerekir; yoksa gelecek bilgi hiç bir
işinize yaramayabilir. Kutunun otomatik ohardak işaretlenmesini istiyorsanız,
CHECKED kelimesine yer verin; istemiyorsanız, bu kelimeyi yazmayın. Bu suretle
oluşturulacak kutunun ekranda otomatik şekilde bir yaftası olmayacaktır. Bu nedenle
bu kutuyu oluşturmadan önce veya sonra bu kutunun ne işe yaradığını yazın.
Kullanıcının yuvarlak bir boşluğun içine siyah bir nokta koyması
(Radyo düğmesi):
TYPE=RADIO NAME=”...” VALUE=”...” [CHECKED]
İşaretlenecek yerin kare kutu değil de bir daire olması dışında bu unsurun bütün
özellikleri ve ilkeleri CHECKBOX gibidir.
INPUT etiketi ile forma grafik veya gizli metin koymak da mümkündür. HTML 4 ile
gelen ekranda kullanıcının fare simgesi ile tıklayabileceği düğme oluşturan BUTTON
etiketi yerine, örneğin Gir ve Sil gibi kullanıcının bilgileri Server’a göndermesini veya
doldurduğu bilgileri tümüyle silmesini sağlayan işlemler de bu etiketle yapılabilir.
SELECTBu etiketi kullanarak, formda bir kutu ve yanında bir aşağı ok oluşturabilirsiniz;
kullanıcı aşağı oku tıklamak suretiyle açacağı listeden bir unsuru seçerek, kutunun
127
içine yazılmasını sağlayabilir. Arzu ederseniz, bu unsurlardan birisi otomatik olarak
seçilmiş olarak da gösterilebilir. Bu etiketin kullanım şekli şöyledir:
<SELECT NAME=”....” SIZE=”...” [MULTIPLE]>.....</SELECT>
Size hanesine 1, 2, veya 3 vs.. yazarak, ekrandaki kutunun kaç seçenek
göstereceğini belirleyebilirsiniz. Bu hane konulmazsa, otomatik 1 seçenek varsayılır.
Bu kutuda gösterilecek seçenekler, <SELECT....>..</SELECT> etiketlerinin arasına
<OPTION> etiketiyle yazılır. (<OPTION> etiketi kapatılmaz.) Herhangi bir seçeneğin
otomatik olarak seçilmesi için önündeki <OPTION> etiketinin içine SELECTED
kelimesi konulur. Örnek:
<select name="Temas" size="1"><option selected>Lütfen bir tercih
yapınız<option value="Telefon">Telefon<option value="EPosta">E Posta<option
value="Gel">Şahsi Görüşme</select></p>
TEXTAREAMetin kutusu, ziyaretçiye, Web Server’a uzun metin gönderme imkanı sağlar. bu
etiketin kullanım şekli şöyledir:
<TEXTAREA NAME="..." rows=.. cols=..>Kutunun içine otomatik yazılması
istenen metin buraya yazılır </TEXTAREA>
“Name=....” yüklemi ile metin kutusuna Server’a gelecek metnin işlenmesi ve
kullanılması için gerekli ad verilebilir. “rows=” ve “cols=” yüklemlerinin karşısına
verilecek rakamlarla bu kutunun formda kaç satır yüksekliğinde ve kaç harf
genişliğinde bir yer alacağı belirtilir. Bu iki ölçünün kutuya girilecek metnin uzunluğu
ile ilgisi yoktur.
Gönder ve Sil düğmeleriFormun mantıksal olarak sonuna, kullanıcının dolduğu bilgileri ve yaptığı tercihleri
formu sunan Internet alanına göndermesini sağlayan bir Gönder, veya forma yazdığı
128
bilgileri ve yaptığı tercihleri değiştirmek isteyenlerin tümüyle silebilmesi için bir Sil
düğmesi konması gerekir. HTML 4 standartları ile Form’lara düğme (BUTTON) etiketi
koymak mümkün oldu. Bundan önce formların, ziyaretçinin bilgisayarı tarafından
Server’a gönderilmesi veya o ana kadar yazdıklarını tümüyle silmesi, INPUT etiketinin
SUBMIT ve RESET yüklemleriyle kullanılması ile mümkündü.
Bunun için INPUT etiketi şöyle kullanılır:
<INPUT TYPE=SUBMIT NAME=Gonder VALUE="Gönder">
<INPUT TYPE=RESET NAME=Sil VALUE="Sil">
HTML 4 sayesinde tarayıcının otomatik düğme şekli yerine kendi rdüğme
grafiklerimizi kullanabileceğimiz gibi sayfaya birden fazla ve değişik maksatlarla
düğme koyabiliriz. Ancak her düğmenin ayrı ismi ve ayrı değeri olması gerekir. Bu
kodu şöyle yazabiliriz:
<BUTTON TYPE=SUBMIT NAME=Gonder VALUE="Gönder"><IMG
SRC=”gonder.gif></BUTTON>
<BUTTON TYPE=RESET NAME=Sil VALUE="Sil"><IMG SRC=”sil.gif></BUTTON>
ÖrnekFormlarla ilgili bu temel bilgileri sıraladıktan sonra, basit bir form örneği yapalım.
Herzaman olduğu gibi, önce yapacağımız şeyin (formun ) stratejisini belirleyelim. Bu
bir kitabevinin kitap sipariş formu olacak. Köşesine logomuzu koyacağız; ziyaretçinin
adını soyadını, e-posta adresini ve adresini isteyeceğiz. Formda, ziyaretçinin ne tür
kitaplarla ilgilendiğini belirtmesi için bir çok seçenekli liste sunabiliriz. Sonra
ziyaretçiden bazı kutuları ve seçenekleri tıklayarak, bize kendisi hakkında bilgi
vermesini isteyeceğiz. En sonunda da bu formu göndermesini veya tümünü silmesini
sağlayan iki düğme sunacağız. Formumuz bir Web alanının parçası olacağı için,
129
ziyaretçinin geri dönmesini ve ilk sayfamıza gitmesini sağlayan iki yol gösterme
düğmesi koyabiliriz.
Bir formda form unsurları ile unsurların yanında yer alan ve neye ilişkin olduklarını
belirten metinleri hizalamak oldukça zordur. Kutuların altalta gelmesi için, aralıktan
yararlanmak ise hemen hemen imkansız denilecek kadar zordur. Bu nedenle mimari
ilkemiz, formun içine bir tablo yerleştirmek ve form unsurlarını tablonun hücrelerine
koymak olacak. Örnek form için, bir logo grafiğine ihtiyacınız olabilir. Bu grafik, görsel
olarak alanınızdaki bütün sayfalar arasında birlik sağlayabilir ve form sayfasının hangi
alana ait olduğunu gösterebilir. Örnek bir sayfa için şu kodu kullanabilirsiniz:
<html>
<head>
<title>Sizinle nasıl temas kuralım</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<body bgcolor="#FF8040">
<div align="center"><center>
<table border="0" width="100%">
<tr>
<td width="13%"><img src="Logo.gif" width="92" height="125"
alt="Logo.gif (15642 bytes)"></td>
130
<td width="54%"><h1><font face="Arial" color="#804040">Sizinle nasıl
temas kuralım?</font></h1>
</td>
<td width="33%"></td>
</tr>
<tr>
<td width="13%"></td>
<td width="54%"><form method="POST" name="temasform" action="Post">
<div align="center"><center><table border="0" width="103%"
height="448">
<tr>
<td width="42%" height="23"><div align="right"><p>Adınız</td>
<td width="61%" height="23"><input type="text" name="Adınız"
size="37" tabindex="1"
maxlength="25"></td>
</tr>
<tr>
<td width="42%" height="23"><div align="right"><p>Adresiniz</td>
<td width="61%" height="23"><input type="text" name="Adresiniz"
size="37" tabindex="2"></td>
</tr>
<tr>
<td width="42%" height="23"><div align="right"><p>Posta Kodu</td>
131
<td width="61%" height="23"><input type="text" name="Kod" size="37"
tabindex="3"
maxlength="5"></td>
</tr>
<tr>
<td width="42%" height="23"><div align="right"><p>E Posta</td>
<td width="61%" height="23"><input type="text" name="eposta"
size="37" tabindex="4"></td>
</tr>
<tr>
<td width="103%" height="44" colspan="2"><font
face="Arial"><strong><big>Sizi tanıyabilir
mıyız?</big></strong></font></td>
</tr>
<tr>
<td width="42%" height="19"><div align="right"><p><font
face="Arial">Eğitim düzeyim:</font></td>
<td width="61%" height="19"><input type="checkbox" name="ilkokul"
value="ON" tabindex="5">Ilk<input
type="checkbox" name="Orta" value="ON" tabindex="6">Orta<input
type="checkbox" name="yuksek"
value="ON" tabindex="6">Yüksek</td>
</tr>
132
<tr>
<td width="42%" height="31"><div align="right"><p><font
face="Arial">Merak Alanım</font></td>
<td width="61%" height="31"><select name="Merak" size="1"
tabindex="7" style="font-family: sans-serif">
<option selected value="Bir alan seçiniz">Bir alan seçiniz</option>
<option value="Polisiye">Polisiye</option>
<option value="Siir">Şiir</option>
<option value="Tarih">Tarih</option>
<option value="Siyaset">Siyaset</option>
</select></td>
</tr>
<tr>
<td width="103%" height="36" colspan="2"><div align="left"><p><font
face="Arial"><strong>Bize
iletmek istediğiniz bir mesaj var mı?</strong></font></td>
</tr>
<tr>
<td width="42%" height="117"></td>
<td width="61%" height="117"><textarea rows="5" name="mesaj"
cols="33" tabindex="9">Mesajınınızı buraya yazınız</textarea></td>
</tr>
<tr>
133
<td width="42%" height="25"></td>
<td width="61%" height="25"><input type="submit" value="Gönder"
name="Gonder"
tabindex="10"
style="font-family: sans-serif; font-size: 14pt; background-color:
rgb(128,128,0); color: rgb(255,255,255)">
<input type="reset" value="Sil" name="Sil" tabindex="11"
style="font-family: sans-serif; font-size: 14pt; background-color:
rgb(128,128,0); color: rgb(255,255,255); text-align: center"></td>
</tr>
<tr>
<td width="42%" height="18"></td>
<td width="61%" height="18"><div align="right"><p><a href="#">Geri
dön</a>
<a href="#">İlk Sayfaya git</a></td>
</tr>
</table>
</center></div>
</form>
</td>
<td width="33%"></td>
</tr>
</table>
134
</center></div>
</body>
</html>
Bu HTML dosyasının oluşturduğu form ise ekranda şöyle görünüyor:
reh078.tif
Burada, Form etiketine daha önce belirttiğimiz özelliklerini veren yüklemlerden
farklı olarak, fodrma bir isim verdiğimiz dikkatinizi çekmiş olmalı. Ayrıca kullanıcıya
kutudan kutuya, klavyede TAB (Sekme) tuşuna basarak ilerleme imkanı veren ve
tarayıcının formda kutulara hangi sırayla gideceğini gösteren “tabindex=..”
yüklemine dikkat ediniz. Bu yüklemi bütün form elemanları için kullanabilirsiniz.
Formu içine koyduğumuz tabloya çerçeve çizgisi vermemekle, formun “form gibi”
görünmesini sağladık. Tablonun hücrelerinin enini (width) mutlak sayı ile değil de
yüzde kullanarak sınırladığımız için, formumuz ziyaretçinin ekranında sağda solda
boşluk bırakmadan, büyüyüp, küçülebilecektir.
CGIForma ilgili bütün bu çaba, bir tek karşılık için, ziyaretçinin bize bilgi veya sipariş
vermesi, başka bir deyişle ziyaretçinin formu doldurarak, “Gönder” düğmesinin
tıklaması içindir. Fakat bu düğmenin tıklanması, bizim formdan beklediğimizin
gerçekleşmesine yetmez. Ziyaretçinin tarayıcı programının Server’a ileteceği bilgi ile
Server’da “bir şey yapılması” gerekir. Bunu yapacak olan da ziyaretçilerle Server
arasındaki arabirim olan CGI (Common Gateway Interface) programlarıdır.
Microsoft’un NT işletim sisteminin, Ağ (Network) işletim sistemi olarak Unix
sisteminin yerine ciddi bir aday olduğunu ilan ettiği iki üç yıl öncesine kadar, ağ
dendiği zaman otomatik olarak akla Unix işletim sistemi gelirdi. Bu sistemin Internet
uzantısını sağlayan programlar ise Unix ortamı için geliştirilmiş diller ve programlar
135
kullanırlardı. “Perl” ve “tcl” bu dillerin en yaygınlarıdır. Bu diller o denli yayıldı ve
klasik hale geldi ki, NT ortamı için Perl çeviriciler geliştirildi. Bir Web Server’ın DOS
ortamında işletilmesi halinde, CGI programları sdandart DOS “batch programları” bile
olabilir. Ancak NT sistemleri için kendi doğal dillerini ve programlarını kullanmak
yerinde olur. Nitekim günümüzde Perl’ün yerini hızla Visual Basic ile yazılmış Active
Server Page denen arabirimler alıyor. Ayrıca C ve C++ dilleri ile yazılmış arabirimler,
örneğin formunuzu alıp, ona uygun arabirim işlemcisi yazan programlar
edinebilirsiniz. Macintosh ortamında ise en uygun dil olarak, Applescript sayılabilir.
CGI arabierimi ve programları, bu kitapçığın kapsamı dışında kalıyor. Ama, Qeb
tasarımcısı olarak neye ihtiyacınız bulunduğunu bilmeniz için, ziyaretçi “Gönder”
tuşuna bastığı zaman, ziyaretçinin bilgisayarı ile sizin Web Server’ınız arasında olup
biteni kısaca özetlemekte yarar var.
FORM etiketine koyduğunuz ACTION ve bu eylemin yöntemine ilişkin METHOD
yüklemleri doğrultusunda, Web sayfalarınızın bulunduğu Servar’a, formun içerdiği
bilgiler toplu halde gönderilir.
ser_cli.TIF
Server bu bilgileri, METHOD olarak GET veya POST yöntemlerinden hangisini
seçtiğinize bakarak, bu bilgileri CGI programına aktarır. CGI programınız, türüne göre,
bu bilgileri önce formdaki değişkenlere verdiğiniz isimlere ve değerlere göre ayırır ve
bir liste yapar. Bu listedeki veriler, yine CGI programınızın yapmasını istediğiniz
işlemde kullanılır. Çoğunlukla bu bilgilerin (1) bir veri tabanına işlenmesini, (2)
ziyaretçiye gönderdiği bilgilerin alındığına ilişkin olarak ya tarayıcısına bir HTML sayfa
göndererek, veya elektronik posta ile bir mesaj yollayarak bir karşılık verilmesini, ve
(3) Web yöneticisine forma bir ziyaretçinin daha karşılık verdiğine ilişkin bir uyarı
mesajı gönderilmesini isteriz. CGI programı bu üç işi birden yapar ve devreden çıkar.
Oluşturulacak veritabanı daha sonra çeşitli programlar yardımıyla kullanılabilir.
SONUÇ
136
Bu kitapçıkta, HTML’in temel etiketlerini ele almış olmamıza rağmen, adını bile
etmediğimiz etiketler bulunduğunu bilmeniz gerekir. Aynı şekilde, Web sayfalarının
Dinamik HTML genel başlığı altında toplanan imkan ve yeteneklerinden de hiç söz
etmediklerimiz var. Ancak burada ayrıntılarını ele aldığımız etiketler ve yöntemler,
bugün Internet’te gördüğünüz bir çok sayfadan çok daha iyisini yapmanıza yetecek
düzeydedir.
CGI programları ise, HTML’den çok daha kapsamlı, içinde yer alacağı Internet
Server programının, hatta ondan da öte, yerleştirileceği bilgisayar işletim sisteminin
özellikleri dikkate alınarak yazılması gereken programlardır. Perl, bu işi en basite
indiren dillerden biridir. Ama Visual Basic ve microsoft’un Visual Interdev adıyla
topladığı HTML ve Server programları yazmayı son derece kolaylaştıran programları,
programlama dili bilmeden program yazmaya imkan veriyor.
HTML’in ve CGI programlarının teknik detaylarını öğrenmek giderek kolaylaşıyor.
Bu ise size, işin teknik yanından çok içeriğe ve bu içeriğin sunuluşundaki kalitye
eğilme imkanı veriyor.
137