Web Tasarım Rehberi

Sunuş 4

Dil 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 25

Netscape Navigator 25

Diğerleri 26

Yaygınlık Oranları 27

Yardımcı Programlar ve Ek Birimler 28

Java, ActiveX 30

Bölüm II: HTML’in Temel Unsurları 31

Etiketler (Tag) 31

Düz Yazı Dosyası ve HTML 32

HTML mi, HTM mi? 33

Büyük Harf, Küçük Harf? 35

HTML Dosyasının Bölümleri 36

Açtığınızı Kapatmayı Unutmamak İçin 36

“Open” mı, “Browse” mı? 37

HTML Editörleri 39

Web Sayfasının Biçimlendirilmesi 40

Harf Genişliği 41

Yerel Biçimlendirme 44

Yeni Paragraf ile Yeni Satır’ın farkı. 45

Internet’te Font meselesi 47

SERIF-SANS SERIF Harfler: 48

Metin Düzenleme Etiketleri 49

Bölüm III: Tablo ve Çerçeveler ve Katmanlar 63

Bir Pixel Kaç Santim? 63

Tablolar 65

Başlık, Satır ve Veri Etiketleri 66

Açtığınızı Kapatın! 68

Tablo Unsurlarının Kontrolü 68

İskelet Malzemesi Olarak Tablo 71

Renk Şifresini Çözdünüz mü? 74

Elinize geçeni sayfanıza koyabilir misiniz? 76

Çerçeveler 82

Çerçevenin Unsurları: Sütunlar ve Sıralar 84

Eşit Sayıda Olmayan Sütun ve Sıralar 88

HTML’de Bağlantı’ya Giriş 91

Metinlere Bağlantı Kazandırmak 92

HTML’de Bağlantı Türleri 95

Sayfada Diğer Unsurlara Bağlantı Kazandırmak: 96

Bağlantılı Çerçeve Uygulaması 97

Ters Bölü İşaretine Ne Oldu? 102

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

Katmanlar ve CSS Teknikleri: Dinamik HTML’e Giriş 109

HTML’de Nesne Kavramı 112

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

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

Stil kurallarını Nesnelere Uygulamak 117

Harf Seçiciler 117

Sınıf Seçiciler 118

Kimlikli Seçiciler 118

Sınıfımsı Seçiciler 119

Bağlamsal Seçiciler 120

Denetlenebilir Özellikler 121

Font Özellikleri: 121

Renk ve Zemin Özellikleri: 123

Metin Özellikleri: 125

Konum (Pozisyon) Özellikleri 126

Diğer Özellikler 128

Bir Nesne Yapalım 129

Sabit Nesneler 129

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

Rollover Etkileri 133

Javascript ve VBScript 134

Bölüm IV: HTML’de Form ve CGI 139

Formun Bölümleri 140

Action ve Method 141

Doldurulacak Boşluklar ve İşaretlemeler 142

INPUT 142

SELECT 144

TEXTAREA 145

Gönder ve Sil düğmeleri 145

Örnek 146

CGI 152

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, 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 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ı ö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ı 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.

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.