Html

HTML REHBERİ 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 bilgisayar arası 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Hayat, zaten, baştan sona bir öğrenme süreci değil mi? <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Dil Deyince: <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Bölüm I: Web’e Giriş <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Temel Bilgiler <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Bu 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">HTML’e Genel Bakış <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">HTML’in başlıca özelliklerini şöyle sıralayabiliriz: <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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 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 <span style="font-family: Verdana,sans-serif; font-size: 9pt;">HTTP ve TCP/IP <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Web 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Web Server <span style="font-family: Verdana,sans-serif; font-size: 9pt;">HTTP 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 tarafından karşılanır ve karşılık olarak belirli bir bilgi kümesi müşteri bilgisayara iletilir. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">İ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ı. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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 ü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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Bir Web Server yazılım paketi seçerken dikkat edilmesi gereken bir kaç ilkeyi sıralayalım: <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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 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 “herkimse@herneredeyse.com; mail haydut@soygun.com</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 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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ı 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Web Tarayıcıları <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Microsoft Internet Explorer <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Windows 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 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Netscape Navigator <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Netscape 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Diğerleri <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Web 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 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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ı 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Yaygınlık Oranları <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Yardımcı Programlar ve Ek Birimler <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Internet 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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 katmak zorundasınız. İlerde, Web tasarımında çoklu ortam unsurlarından söz ettiğimiz zaman, plug-in’lere döneceğiz. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Java, ActiveX <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Bu 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Bölüm II: HTML’in Temel Unsurları <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Etiketler (Tag) <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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 vermemektir. Önünde etiketi olmayan herhangi bir metin parçası, tarayıcı tarafından temel paragraf olarak nitelenir. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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! <span style="font-family: Verdana,sans-serif; font-size: 9pt;">/////////////KUTU/////////////////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Düz Yazı Dosyası ve HTML <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Dü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: <span style="font-family: Verdana,sans-serif; font-size: 9pt;">[reh000.tif] <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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: <span style="font-family: Verdana,sans-serif; font-size: 9pt;">[reh001.tif] <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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: <span style="font-family: Verdana,sans-serif; font-size: 9pt;">[html rehberi003.tif] <span style="font-family: Verdana,sans-serif; font-size: 9pt;">//////////////////////////////////////////////////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">///////////////NOT///////////////////////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">HTML mi, HTM mi? <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">////////////////////////////////////////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">İ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: <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">/////////////////////////NOT//////////////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Büyük Harf, Küçük Harf? <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">///////////////////////////////////////////////////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">HTML Dosyasının Bölümleri <span style="font-family: Verdana,sans-serif; font-size: 9pt;">HTML 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">/////////////////////////////////////////NOT////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Açtığınızı Kapatmayı Unutmamak İçin <span style="font-family: Verdana,sans-serif; font-size: 9pt;">İ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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">////////////////////////////////////////////////////////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><HTML> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><HEAD> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"></HEAD> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><BODY> <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Web Tasarım Rehberi’ne Hoş Geldiniz! <span style="font-family: Verdana,sans-serif; font-size: 9pt;"></BODY> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"></HTML> <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">reh004.tif <span style="font-family: Verdana,sans-serif; font-size: 9pt;">//////////////////////NOT//////////////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">“Open” mı, “Browse” mı? <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">////////////////////////////////////////////////////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">İ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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Ş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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Ş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: <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><HTML> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><HEAD> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"></HEAD> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><TITLE>Web Tasarım Rehberi</TITLE> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><BODY> <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Web Tasarım Rehberi’ne Hoş Geldiniz! <span style="font-family: Verdana,sans-serif; font-size: 9pt;"></BODY> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"></HTML> <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Ş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: <span style="font-family: Verdana,sans-serif; font-size: 9pt;">reh005.tif <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">////////////////////////////////////////NOT////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">HTML Editörleri <span style="font-family: Verdana,sans-serif; font-size: 9pt;">HTML 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) 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">////////////////////////////////////////////////////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">İ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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Web Sayfasının Biçimlendirilmesi <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Bir 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 ( .. ) 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 sabit genişlikteki fonta çevirirken, Internet Explorer, bu etiketin sonucu olarak metinde hiç bir biçim değişikliği yapmayacaktır. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">////////////////////////////////NOT//////////////////////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Harf Genişliği <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Eski 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">///////////////////////////////////////////////////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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 tasarımında kullanabileceğimiz unsurlardan biri olarak, stillerin HTML sayfasında nasıl yer aldığına bakalım. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Şimdi yerel biçimlendirme yöntemine ayrıntılı olarak bakalım. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Yerel Biçimlendirme <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Diyelim 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: <span style="font-family: Verdana,sans-serif; font-size: 9pt;">“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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Rudolf Koch - Alman harf dökümcüsü, kaligraf <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Dikkat ederseniz, metinde bir cümle siyah harflerle dizilmiş ve kaynak italik harflerle gösterilmiş bulunuyor. Şimdi bu paragrafı, biraz önce oluşturduğumuz 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: <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Bitirdiğinizde ekranınızdaki HTML kodu şöyle olmalıdır: <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><HTML> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><HEAD> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"></HEAD> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><TITLE>Web Tasarım Rehberi</TITLE> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><BODY> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> “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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> Rudolf Koch - Alman harf dökümcüsü, kaligraf <span style="font-family: Verdana,sans-serif; font-size: 9pt;"></BODY> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"></HTML> <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Burada paragraf etiketini kullandığımıza dikkat edin. .. 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">/////////////////////////////////NOT/////////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Yeni Paragraf ile Yeni Satır’ın farkı. <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> 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 etiketine yeni paragraf başlatma, buna karşılık <BR> (line break) etiketine de sadece satır atlatma görevi verilmişti. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">///////////////////////////////////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Paragraf etiketinin nasıl bloklanacağını ALIGN yüklemi belirlersiniz. Örneğin paragraf etiketini şeklinde kullanırsanız, 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: <span style="font-family: Verdana,sans-serif; font-size: 9pt;">reh007.tif <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">/////////////////////////////NOT//////////////////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Internet’te Font meselesi <span style="font-family: Verdana,sans-serif; font-size: 9pt;">HTML 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">//////////////////////////////////////////////////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">/////////////////////NOT///////////////////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">SERIF-SANS SERIF Harfler: <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">////////////////////////////////////////////////////////// <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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 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: <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> <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.. 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..” <font face="Times New Roman">Rudolf Koch - Alman harf dökümcüsü, kaligraf <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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: <span style="font-family: Verdana,sans-serif; font-size: 9pt;">reh008.tif <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Metin Düzenleme Etiketleri <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Bu örneklerde HTML’in temel unsuru olan paragraf ( .. ) 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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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: <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> Başlıklar <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> <font face="Arial"> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> H1: Bir numaralı başlık <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> H2: İki numaralı başlık <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> H3: Üç numaralı başlık <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> H4: Dört numaralı başlık <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> H5: Beş numaralı başlık <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> H6: Altı numaralı başlık <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Normal Metin <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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: <span style="font-family: Verdana,sans-serif; font-size: 9pt;">reh009.tif <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Şimdi bu bilgiyle, örnek sayfamıza başlık verebiliriz. Bunun için, paragrafın hemen üstüne, <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> Tasarımcı kimdir? <span style="font-family: Verdana,sans-serif; font-size: 9pt;"> Tasarım nedir? <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">reh010.tif <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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: <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><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.) <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Örnek: <font face="Times New Roman"> Rudolf Koch - Alman harf dökümcüsü, kaligraf </p <span style="font-family: Verdana,sans-serif; font-size: 9pt;">reh011.tif <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Örnek: <font face="Times New Roman">Rudolf Koch - Alman harf dökümcüsü, kaligraf <span style="font-family: Verdana,sans-serif; font-size: 9pt;">reh013.tif <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Örnek: <font face="Times New Roman">Rudolf Koch - Alman harf dökümcüsü, kaligraf <span style="font-family: Verdana,sans-serif; font-size: 9pt;">reh014.tif <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Örnek: Biz inanıyoruz ki, en yüksek düzeyde beceri gerektiren şey, bizim sanatımıza en yakın olanıdır..” <span style="font-family: Verdana,sans-serif; font-size: 9pt;">reh015.tif <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Örnek: <font face="Arial">Programın <tt>kullanıcının adını</tt> soran diyalog kutusuna adınızı yazınız <span style="font-family: Verdana,sans-serif; font-size: 9pt;">reh016.tif <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Örnek: Biz inanıyoruz ki, en yüksek düzeyde beceri gerektiren şey, bizim sanatımıza en yakın olanıdır..” <span style="font-family: Verdana,sans-serif; font-size: 9pt;">reh017.tif <span style="font-family: Verdana,sans-serif; font-size: 9pt;"><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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">Örnek: <<HR> <font face="Times New Roman">Rudolf Koch - Alman harf dökümcüsü, kaligraf <span style="font-family: Verdana,sans-serif; font-size: 9pt;">reh018.tif <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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. <span style="font-family: Verdana,sans-serif; font-size: 9pt;">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.