Web Tasarım Rehberi
AMATÖR WEB TASARIMCININ HTML REHBERİ Aşağı İnmek İçin Tıkla |
| ÖNSÖZ Bir süre Internet denen acayip dünyayı dışarıdan seyretmekle yetindiniz. Ve birgün geldi zincirleri kırarak bu gerçekten korkutucu teknoloji dünyasına doğru bir adım atmaya karar verdiniz. İlk Internet erişim paketinizi heyecan-korku-mutluluk karışımı duygular içerisinde satın aldığınızda elbette başınıza gelecekleri bilemezdiniz. Internet'e bağlanıp da o site senin bu site benim edâlarıyla kendi has ifadesi ile sörf yaparken, içinizdeki istek de giderek büyüyordu: "Ben de kendi Internet sitemi yapmak istiyorum, bu dünyada benim de bir yerim olmalı". Evet hedef ortaya çıkmıştı, şimdi yapılması gereken şey hedefinizdeki Web sitesini yapmanız için gereken bilgilere ulaşmaktı. Bir süre kaynak arayıp durdunuz. Bu süre zarfında edindiğiniz izlenimlerden bir tanesine göre "Frontpage çıkmış ve mertlik bozulmuştu". Öyleyse günümüzde bu işlerin yolu Frontpage'den geçiyor diyerek bu programı edindiniz. Bir iki el alıştırmadan sonra hayalinizdeki Internet sayfalarını hazırlamaya başlamıştınız. Fakat bu hep böyle devam edemezdi, çünkü sizin istediğiniz aslında bu değildi. Öyle ya hep "Usta Webciler sayfa tasarımı yaparken kodları elleriyle yazar" denmiyor muydu? Cazibeye kapılmıştınız bir kere. Tıpkı bahsettikleri usta Webciler gibi siz de kodları ellerinizle yazmalı ve bütün dünyaya bu işin nasıl yapıldığını göstermeliydiniz. İstikâmeti ustalık olan yolculuğunuzda azığınız kuvvetli azminiz, yoldaşınız ise Notepad olacaktı. "Şöyle beni hedefime hızla götürecek bir de aracım olsaydı" diye düşünürken bizi buldunuz. Siz artık şeklen olmasa bile rûhen amatör bir Web tasarımcısısınız ve aramıza hoş geldiniz. Üç bölümden oluşan bu kitap yukarıda "hayatından kısa bir kesit"ini sunduğumuz sizler için yazıldı. Fakat kitabın adında geçen "amatör" ifadesine bakarak bu kaynağın hafif kalacağını düşünmeyin. Kitabınız size kodlamada ihtiyaç duyacağınız bütün bilgileri ve yer yer tasarım püfleri sunduğu gibi, usta bir Webci olup çıktığınızda elinizin altında bulundurmak isteyeceğiniz bir başvuru kaynağıdır da. Sözü fazla uzatmadan insanlarımızın bilgi açlığını giderecek, kendi anadillerinde yazılmış kaynakların daha da artması dileğiyle sizi kitabınızla baş başa bırakıyoruz. |
BÖLÜM 1 Internet Nedir? Nasıl Çalışır? İnternet'in ne olduğu sorusuna cevap vermek imkânsız denecek kadar zor. Bugün Internet'i oluşturan bağlantılar demeti nereden başlıyor, nereye gidiyor, kaç site var, bu gibi problemlerin cevabını bilmek artık imkânsız. Herşeyden önce "Internet'in yeri" diyebileceğimiz bir yer yok. Bu yüzden Internet'in ne olduğunu bir kenara bırakın, bize gerekli olduğu ölçüde Internet'in nasıl çalıştığını anlamaya çalışalım. Internet'i bir demiryolu şebekesine benzetebiliriz. Yüzlerce lokomotif ve binlerce vagondan oluşan bir sistemin, sonuç itibarıyla aynı raylar üzerinde, belirli bir sisteme göre hareket etmesi gibi Internet de yüzlerce omurga, binlerce omurgalar arası bağ, onbinlerce hizmet sağlayıcıdan oluşan bir sistemle milyonlarca kişiye hizmet sunuyor. Trenle yolculuk etmek için sistemin nasıl çalıştığını, hangi trenin ne zaman nerede olması gerektiğini bilmenize hiç gerek yok. Sizin için önemli olan belirli bir trenin, belirli bir istasyondan, belirli bir saatte kalktığını bilmekten ibaret. Internet de öyle; günün belirli saatinde Internet'de mevcut alanları gezen, bilgi edinmeye çalışan, ya da kimi alanlardan ücretsiz program edinmeye çalışan bir kullanıcı, Internet'in nasıl çalıştığını bilmek zorunda değil. Ama bu sistemde yer edinecek ve başkaları için birşeyler sunacak kişinin sistemin nasıl çalıştığını bilmesi gerekir. Internet ağlar arası ağ demektir. İki veya daha fazla bilgisayar arasında iletişim kurmak, bir başka deyişle bağımsız bilgisayarları bir ağ halinde birbirine bağlamak için herşeyden önce bu bilgisayarları birbirleriyle irtibatlandırmamız gerekir. Bu irtibatı sağladığımızda ise karşımıza bilgisayarların birbirlerine bilgi aktarmalarını ve aktarılan bilginin doğru anlaşılmasını sağlayacak ilkeler-kurallar üzerinde anlaşmalarını sağlama problemi çıkar. Aralarında alışveriş sağlayabilmek için, bilgisayarları ortak bir dili konuşur hale getirmek zorundayız. Bilgisayar ağı ve Internet uzmanları, programlama diliyle karıştırılmaması için bilgisayarlar arasındaki ortak iletişim diline "dil" yerine "protokol" derler. Bir protokol sistemdeki bütün birimlerin birbirlerine nasıl ve hangi sırayla hitap edeceklerini gösteren ilkeler-kurallar listesidir diyebiliriz. Şimdi Internet için gerekli protokoller hakkında bilgi edinelim. HTTP ve TCP/IP 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şletim sistemi (Windows 3.x, NT, 95/98/2000, MacOS, Unix) ve kullandığı tarayıcı yazılımı (Internet Explorer, Netscape Navigator) tarafından belirleneceği olmalıdır. Bir Web sayfasının ziyaretçinin ekranına kadar katettiği yolda çeşitli protokoller (kurallar) var. Bunların başında bir bilgisayar ağı olan Internet'in ulaştırma kuralları HTTP (HyperText Transfer Protocol - Hareketli Metin Aktarma Kuralları) geliyor. Hypertext dosyalarını olduğu kadar çoklu ortam unsurlarını (ses, video ve diğer grafik öğelerden oluşan Multimedya dosyaları) ve bilgisayar programlarını Internet'teki bilgisayarlar arasında alıp-vermeye yarayan başka protokoller de vardır: FTP (File Transfer Protokol - Dosya Aktarma Kuralları) bunlardan biridir. Internet bağlantısını, bir telin iki ucunda bulunan iki bilgisayar arasındaki ilişki olarak görebilirsiniz. Web sayfalarını içeren bilgisayar, Web ilişkisinde Server (Sunucu) diye adlandırılır. Ziyaretçinin bilgisayarı ise Client (İstemci) olarak adlandırılır. Sunucu bilgisayarla, İstemci bilgisayar arasındaki ilişkiyi (Server-Client ilişkisi) düzenleyen kurallara TCP/IP (Transmission Control Protocol/Internet Protocol - Aktarma Denetim Kuralları/Internet Kuralları) adı verilir. Gerek HTTP gerekse FTP, İstemcinin Web Server'dan, yani 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, üzerinde anlaştıkları bir tür konuşma adabı diyebileceğimiz bu kurallara uygun mesajlarını kıtadan kıtaya, ülkeden ülkeye, kentten kente, yeraltı ve sualtı kabloları ile, uydularla iletirler. İstemci bilgisayar ile Web Server arasında oluşan bu bağlantı bazen kesilebilir. Fizikî bağlantının kesilmesi, aktarma işinin tümüyle kesilmesi, sona ermesi 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. Bu işlemi yaparken, evrensel bir adres sisteminden yararlanır. Internet'te Web Server'lar kaynak sayıldığı için IP, aradığı kaynağı URL (Universal Resource Locator - Evrensel Kaynak Yolu Belirleyici) denilen adres sistemini kullanarak bulur. Aynı kurallar demetinin TCP bölümü ise kurulan bağlantı sayesinde gelen bilginin doğru anlaşılmasını sağlar. Aslında her bilgisayar, merkezî işlem birimi (CPU) ile ekran, klavye, CD-ROM sürücü, vs., arasında bir ağ demektir. Bir büro ortamında bir İstemci 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 Client ile Server 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ıta arasında kurulmuş bir Internet ilişkisinde İstemci, Sunucu'nun; Sunucu, İstemci'nin durumunu, bağlantıdaki kesilmeler sebebiyle bilemeyebilir. TCP/IP "durumun bilinmediği ilişki" esasına dayanır. İstemci bilgisayar, Web Server'dan 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; talebi kendisine Internet bağlantısı sağlayan (ISS) 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 ISS'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 firmasının 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 Web Server'a talebin konusu ve talep edenin adresi ile birlikte bildirilir. Sizin İstemci olarak o sırada sadece kendi ISS'inizle bağlantınız sürmektedir; yoksa bilgisayarınızla hedef Web Server arasında doğrudan, birebir ilişki yoktur. Hedef Web Server, İstemci olarak sizin kim olduğunuzu ve size nasıl ulaşabileceğini, ancak kendisine gelen talebin altındaki adresten bilmektedir. Web Server, sizin o anda kendi ISS'inizle aranızdaki 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 katedilir, böylece arzu ettiğiniz bilgi (sayfa, video, grafik, ses vs.) sizin ekranınıza ulaşır. Kısaca ne talep sahibi İstemci bilgisayar, ne talebi karşılayan Web Server bir diğerinin o anda nerede ve ne durumda olduğu ile ilgilenmez. Bu "durumdan haberdar olmama" hali özellikle Internet'te ticaret bahsinde çok önem taşır. Bu maksatla yazılan programlarda bu halin dikkate alınması gerekir. Web Server Yukarıda bahsedildiği gibi HTTP ve FTP, İstemci bilgisayarla Sunucu 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 iletişimi düzenleyen ilkelerdir. Bu ilkelere uygun olarak çıkartılan bir talep, Web Server tarafından karşılanır ve talep edilen bilgi İstemci bilgisayara iletilir. Web Server olarak tayin edilmiş bilgisayarda, kendisine gelecek HTTP ve FTP taleplerini anlamasına ve bu talepleri yerine getirmesine yarayan programlar (Apache Web Server, Internet Information Server, Netscape Web Server, vs.) 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, kendi sabit diskinde duran bir dosyayı alıp karşı tarafa aktarma veya karşı tarafın gönderdiği dosyayı alıp kendi sabit diskine kaydetme gibi özellikleri vardır. Windows 95/98'e PWS (Personal Web Server - Kişisel Web Server) adı verilen program kurularak, bu program aracılığı ile Internet'e 24 saat bağlı olmadan yukarıda bahsettiğimiz Web hizmetleri sağlanabilir. Bir PC ile Web Server hizmeti yapacaksanız, başarınızın bol sabit disk alanı ve hafızaya (RAM) bağlı bulunduğunu hatırlamalısınız. PC'lerin Internet'in gerektirdiği en önemli özellik olan aynı anda birden fazla işlem yapabilme becerisi işletim sistemi kadar, donanım kaynaklarının genişliğine de bağlıdır. Browser (Web Tarayıcısı) Web tasarımcısının en az HTML kadar bilmesi gereken birşey varsa o da Browser'ların HTML'i nasıl yorumladığıdır. Bu yüzden bir Web tasarımcısının bigisayarında Web Server yazılımı bulunmayabilir, sayfalarına başka bir Internet Web Server hizmeti veren kişi veya firma evsahipliği (host) yapıyor olabilir, ama mutlaka piyasada mevcut Browser'ların en yaygın sürümleri bulunmalıdır. Netscape Navigator aynı bilgisayarda farklı dizinlerde bulunmak şartıyla çalışabilir. Ancak Microsoft Internet Explorer'ın farklı sürümleri aynı Windows ortamında çalışamazlar. Bunun için iddialı bir Web tasarımcısının, bu Browser'ın farklı sürümleri için birden fazla bilgisayar bulundurması gerekebilir. Neden değişik Browser'ların değişik sürümlerine ihtiyacınız var? Bu sorunun cevabı, HTML'in Internet'in ortak dili olduğu gerçeğine bir ölçüde gölge düşürecektir. Çünkü ortak bir HTML dili bulunmasına rağmen Browser'ların ve bazen aynı Browser'ın farklı sürümlerinin HTML'i yorumlayışı farklıdır. HTML, W3C (WorldWideWeb Consortium - 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, bazen Netscape'in anladığı ama IE'nin anlamadığı, kimi zaman IE'nin becerebildiği buna karşılık Netscape'in yapamadığı HTML özelliklerinden hangisini kullanacağına karar veremez duruma düşmesi oldu. HTML'i kullanarak ticarî amaçlı Web tasarımı yapan kişi 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 sayfası yapan kişinin, HTML'in kendi firmasının kullandığı Browser'ın özelliklerinden yararlanması mümkündür. WEB'in Dili: HTML 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 SGML (Standart Generalized Markup Language - Standart Genelleştirilmiş İşaretleme Dili) 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, "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 konmuş 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 bakarsak, 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ı-Heksadesimal 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 yer alan İngilizce bazı komut kelimeleri vardır. HTML, önceleri Macintosh, ardından IBM uyumlu bilgisayarları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 (Hareketli Metin İşaretleme Dili)'da 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 ilişkilendirilmiş 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 metne veya simgeye gitme yöntemi olarak kullandı. Metinler böylece "hyper" yani hareketli hale geliyordu. 1989 yılında, Avrupa Parçacık Fiziği Laboratuvarı CERN uzmanlarından Tim Berners-Lee, laboratuvar yönetimini ortak bir yazı biçimlendirme sistemine ikna edebilmek için, "Enformasyon 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. Üstelik 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 bilgisayarlararası 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çimlendirilmesine ve resim, ses video gibi diğer unsurlarla bütünleştirilmesini sağlayabilecek yeterlikte olması. Bu arada durağan 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ılabilecek ortak bir standart olmaması, bunun hiç değilse şimdilik, Browser'ların sürümüne göre değişik anlamlar taşıması Web tasarımcılarının çektiği sıkıntıyı artı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 çekebilmek için televizyon özelliklerine sahip olmak zorunda değil; HTML'in bugünkü haliyle izin verdiği multimedya 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. |
| BÖLÜM 2 HTML'de Metin Bugün bildiğimiz, kullanageldiğimizin dışında Internet'in ve daha özel olarak ise HTML'in laboratuvarlarda askeri ve bilimsel projeler olarak insanlığa "merhaba" dediğinden önceki sayfalarımızda bahsettik. Yine o zamanki teknik imkanlar da gözönüne alındığında kullandığımız-kullanacağımız birçok HTML etiketinin metinleri biçimlendirmeye yönelik olduğu göze çarpıyor. Zaten ismine de bakacak olursak HTML bir metin işaretleme dili. Bu yönüyle de daha çok bir kelime işlem programına, örneğin Microsoft Word'e benziyor. HTML'in metin düzenlemeye ait etiketleri ile başlıklar atıyor, metinleri koyu, eğik ve altıçizili olarak yazabiliyor, paragraflar oluşturabiliyor, sıralı ve sırasız listeler düzenleyebiliyor, metinleri değişik yazıtipleri ile farklı büyüklüklerde yazdırabiliyoruz. Bunlar HTML'in metin düzenlemekte en sık kullanacağımız yetenekleri. Bunlardan başka HTML'in neredeyse unutulmaya yüz tutmuş, ancak bazı yabancı referans kitaplarında rastlayabileceğimiz türden metin düzenleme etiketleri de var. Bunlara bu kitapçıkta yer vermedik, ancak bu etiketlerin büyük bir bölümünü kitapçığın sonundaki etiket listesinde örnekleri ve kısa açıklamaları ile bulabilirsiniz. İçeriğin en önemli unsuru olan metinleri düzenlemekte HTML'in kendi kabiliyetleri dışında özellikle Fontlar konusunda göreceğimiz birtakım harici etkenlere de dikkat etmemiz gerekebiliyor. Bunlara yer yer bahsi geldiğinde değineceğiz. CSS (Cascading Style Sheets) adıyla bilinen stil şablonları kullanarak metinleri piksel hassasiyetinde biçimlendirmemiz mümkün hale geldi. Örneğin yazıtipi (font) büyüklüğünü 12 piksel olarak ayarlayabilir, paragraf girintisinin 25 piksel, satır aralarının 18 piksel, kelime aralarının 10 piksel ve hatta abartacak olursak harf aralarının 2 piksel olmasını sağlayabiliriz. Elbette bunlar CSS teknikleri ile ve Web tarayıcıları olan Browser'ların bu tekniklere verdiği destek ölçüsünde mümkün olabiliyor. Yoksa HTML etiketleri ile bu derece hassas biçimlendirme yapma imkanımız yok. Şimdi metinlerden başka tasarımın, dolayısıyla HTML'in diğer hammaddeleri olan grafik ve multimedya öğelerinden bahsedelim. HTML'de Grafik ve Multimedya Öğeleri Web sayfalarımızda metinlerin yanısıra grafik dosyalarından ve zaman zaman multimedya öğelerinden faydalanırız. Bu, sevdiğimiz sanatçıya adadığımız Web sayfasının arka planında çalan bir MIDI melodisi de olabilir, film tanıtımlarını konu alan bir sitenin sayfalarına yerleştirilmiş hareketli film görüntüleri de. Fakat yine de sayfamızda multimedya öğelerini kullanmak çoğu zaman gerekli olmayabilir, oysa grafik içeren sayfalar hazırlamak neredeyse kaçınılmazdır. Bu durumda akla şöyle bir soru geliyor: Web sayfamızda hangi tür grafik dosyalarını kullanabiliriz? Cevap: istediğimiz veya aklımıza esen her resim veya grafik dosyasını kullanamayız. Çünkü Web sayfası oluştururken gözeteceğimiz en önemli ilkelerden biri küçük boyutta dosyalar oluşturmaktır. Sayfaya koyacağınız yüksek kaliteli ve büyük boyutlardaki bir aile fotoğrafı sizin sabit diskinizden yüklendiği sürece bir sorun teşkil etmez, ama aynı şeyi sayfayı Internet ortamına koyup denediğinizde birisinin, kimsenin sizin Web sayfanıza kocaman grafiklerin yüklenmesini beklemeye gelmediğini hatırlatması gerekebilir. Bu kuralın geçerliliği tartışılmamakla beraber elbette kuracağınız sitenin amacı bu tip katı kurallarda bir takım esneklikler yapmanızı da gerektirebilir. Ressamsanız ve yaptığınız resimler için bir Web sitesi hazırlıyorsanız sayfalara koyacağınız kibrit kutusu büyüklüğündeki resimleriniz ziyaretçiyi tatmin etmeyecektir. Çünkü her zamankinin aksine ziyaretçi bu sefer sayfaya resim görmek için gelmiştir. Bu önemli kuraldan sonra öğreneceğimiz ikinci kural Web sayfalarında kullanacağımız grafik dosyalarının hangi biçimde olması gerektiği. Klasik olarak kullanabileceğimiz ve tüm Browser'lar tarafından desteklenen iki grafik dosya biçimi vardır: GIF ve JPEG. Bu iki biçimin de ortak özelliği kendilerine has yöntemlerle küçük boyutlarda dosyalar oluşturmalarıdır. Farklı oldukları nokta ise GIF biçiminin 256 renk sınırlamasına karşı JPEG'in milyonlarca renk kullanımına izin vermesidir. Ayrıca JPEG, bir dosya sıkıştırma biçimi olduğundan ortaya çıkacak dosyanın nihai boyutu kullanıcı tarafından belirlenebilir. Bir JPEG grafik dosyası ne kadar küçükçe, resmin kalitesi o kadar azdır; bu ilke çerçevesinde değişik oranlar deneyerek en uygun dosya boyutu-görüntü kalitesini elde edebilirsiniz. GIF biçimi ise dosya sıkıştırmasına değil orjinal resimdeki milyonlarca rengin 256 renge indirgenmesi esasına dayanır. Bu sayede oldukça küçük boyutlarda dosyalar oluşturulabilir. Resim ne kadar az sayıda renkten oluşuyorsa dosya boyutu da bununla orantılı olarak küçülür. Bazı resimler için 256 renk sınırlaması görüntü kalitesi kaybına neden olmaz fakat bazı resimlerde önemli derecede kalite kaybı oluşabilir. Web sayfamız için hangi dosya biçimini kullanmamız gerektiğine karar verirken en kestirme yol deneme-yanılma yöntemini kullanmaktır. Orjinal resminizi her iki biçimde de kaydedip kıyaslayın. Görüntü kalitesi kabul edilebilir bir düzeyde olmak şartıyla küçük boyutlu dosyayı seçin. Yenilerde PNG ve SVG biçimindeki grafik dosyaları da Web sayfalarında boy göstermeye başladı. Ancak bu yeni dosya biçimlerinin pek yaygın olduğu söylenemez. Kullandığınız grafik işleme programı yeni bir sürüm ise büyük ihtimalle dosyalarınızı PNG biçiminde kaydedip kullanabilirsiniz. Kısaca Web sayfalarımızda kullanabileceğimiz multimedya öğelerinden de bahsedelim. Bu sefer grafik dosyalarında olduğu gibi oldukça dar bir sınırlama yok, çok çeşitli biçimlerdeki ses ve video dosyasını kullanma seçeneği var. Ses dosyası olarak MIDI, WAV, ASF, ... biçimlerini kullanabiliyoruz. Video olarak da AVI, MPEG, MOV gibi dosya biçimlerine Browser'lar destek veriyor. Kimi dosya biçimlerini çalıştırabilmek için Brower’lar plug-in denilen ek yazılımlara ihtiyaç duyuyor. Web sayfalarımızda multimedya öğelerini nasıl kullanacağımızı ilerki konularımızda ele alacağız. KUTU///////////////////////////////////////////////////////////// Hangi Dosya Biçimi <ekran_001.tif> Bilgisayarımızdaki yüksek kaliteli bir grafik dosyasını sırayla BMP, JPG ve GIF biçimlerinde kaydedip kıyaslayalm. Bizim örneğimizdeki 500x330 piksellik orjinal resmi, grafik editörünün farklı kaydet seçeneği ile 24 Bit BMP biçiminde kaydedip incelediğimizde, 483 KB boyutundaki dosyanın Web sayfaları için ne kadar elverişsiz olduğunu görebiliriz. BMP biçimi ile resmin kalitesinde gözle görülür bir bozulma olmadı ama dosya boyutu oldukça rahatsız edici büyüklükte. Şimdi de orjinal dosyayı JPG olarak kaydedelim, sıkıştırma oranını da yüzde 50 olarak ayarlayalım. Bu şekilde dosya boyutu 28 KB'a düştü ve görüntü kalitesi de oldukça iyi. Daha yüksek sıkıştırma oranlarını deneyerek dosya boyutunu daha da küçültebiliriz. Fakat bu esnada görüntü kalitesinin de giderek bozulduğuna dikkat edin. Son olarak GIF biçimini deneyelim. Örnek olarak kullandığımız dosya milyonlarca renk içerdiğinden GIF biçimi ile bu renkleri 256'ya indirgemek, görüntü kalitesini önemli derecede düşürdü. Dosya boyutu ise 92 KB. Farklı biçimlerde kaydettiğimiz bu üç resmi kendi aralarında kıyasladığımızda Web için elverişli olan GIF ve JPG biçimleri ile dosya boyutunun önemli oranda küçüldüğünü görüyoruz. (Browser'lar BMP biçimini desteklemezler. Burada bu biçimi denememizin sebebi dosya boyutlarının ne kadar küçüldüğü hakkında bir fikir vermektir.) Buradaki örnekte JPG biçimini kullanmak daha uygun. Çünkü orjinal resim çok sayıda renkten oluşuyor; ayrıca 256 renk sınırı olan GIF biçimi, JPG biçimine göre görüntü kalitesini bozmasına rağmen, daha büyük boyutta dosya oluşturdu. Bu tür bir genelleme yapmak mümkün olmadığından dosyaları her iki biçimde da kaydedip kendi arasında bir kıyaslama yapmak pratik bir yöntemdir. KUTU BİTTİ//////////////////////////////////////////////////////// HTML'de Renkler Yaptığımız bir Web sitesinde uyguladığımız görsel ifade tarzının en önemli unsurlarından biri sayfadaki öğelerin renkleridir. Başlıklar, çerçeveler, çizgiler, kutular, bunların ardalanları sahip oldukları renklerle, bir bütün halinde bizim ifade tarzımızı ortaya çıkartırlar. Bu ifade tarzının ziyaretçinin bilgisayarında aynen istediğimiz gibi oluşmasını sağlamak zorundayız. Tasarımcı olarak bu bizim görevimizdir. Hazırlayacağımız sayfalarda kullanacağımız renkleri belirlerken bir noktaya dikkat etmemiz gerekir: her ziyaretçinin bilgisayarının görüntü elde etme imkanı (grafik kartı ve ekranı) aynı kalitede değildir. Bu yüzden Web tasarımcıları "güvenli renk" kavramından söz ederler ve güvenli renklerin 216 adet olduğunu söylerler. Buradaki güvenlikten kasıt, can ve mal güvenliğinden çok Web sayfamıza kazandırdığımız görsel ifade tarzının güvenliğidir. Sayfalarımızın farklı donanım ve işletim sistemlerinde de kendi ekranımızda göründüğü renklerde görünmesi için bu kuralı göz ardı etmememiz gerekiyor. HTML'de bir rengi kullanmak istediğimiz zaman bunu iki şekilde yapabiliriz: rengin İngilizce adını koda yazmak veya bu rengin heksadesimal (onaltılık sayı düzeni) kodunu kullanmak. 216 adet rengin herbirinin bir adı olmadığına göre (belki vardır, ama ezberlemek kimin işine gelir?) heksadesimal sayı düzeniyle kıyısından köşesinden de olsa tanışmak gerekiyor. Tam da burada araya matematik giriyor. Matematik dediysek ihtiyacımız olan ölmeyecek kadar bir matematik bilgisi. En azından sayı düzenlerini bir yerlerden hatırlıyor olmalısınız. Hani değişik sayı düzenleri vardı; insanlar hikmeti bilinmeyen bir sebeple bu sayı düzenlerinden 10'lu sayı düzenini kullanırdı. İşte bilgisayarcı arkadaşlara 10'lu sayı sistemi az geldiğinden bu tip işler için onaltılık sayı sistemini biz tasarımcılara layık görmüşler. Şimdi bu kadar laftan sonra heksadesimal sayı sistemini öğrenmek için yanıp tutuşmaya başladığınıza göre, bu sistemi daha yakından tanıyabiliriz! RGB ve Heksadesimal Renk Koduna Yakın Bakış RGB renk sistemini daha önce duymuş olmalısınız. Eğer duymadıysanız korkulacak birşey olmadığını biraz sonra göreceksiniz. RGB İngilizce kırmızı-yeşil-mavi (red-green-blue) renklerinin baş harfleridir. Bu yönteme göre diğer bütün renkleri bu üç rengi değişik oranlarda karıştırarak elde ederiz ve bu karışım oranlarının değerlerini HTML'de heksadesimal düzende belirtiriz. 10'lu sayı düzeninde hepimizin bildiği gibi 10 adet rakam vardır; aynı şekilde 16'lık düzende de 16 adet sayısal simge vardır. Peki elimizde sadece 10 adet rakam olduğuna göre fazla 6 sayıyı nasıl ifade ediyoruz? Harflerle. 11'in karşılığı olarak A, 12 olarak B, 13 olarak C, 14 olarak D, 15 olarak E ve 16 olarak F harfini kullanıyoruz. Bu duruma göre 3FA 16'lık düzende bir sayıya karşılık geliyor. DE3, AAAAA, 9DEDE, B6ABA, 99CC99 hepsi bir sayının karşılığı. RGB sistemine dönelim. Kırmızı, yeşil ve mavi olmak üzere üç ana rengimiz var demiştik ve bunların karışımından bahsetmiştik. Bu karışımın azamî değeri 255, asgarî değeri 0 olabilir. Örneğin kırmızı elde etmek için 255 birim kırmızı 0 birim yeşil ve 0 birim mavi değerlerini kullanıyoruz. 255'in heksadesimal karşılığı ise FF'dir. RGB değerini herbir rengi ikişer basamakla ve toplam 6 basamak olacak şekilde (xxyyzz gibi) ifade edeceğimizi de söylersek kırmızı rengin kodu ortaya çıkıyor: FF0000. Aynı şekilde yeşil oluşturmak için 00FF00, mavi oluşturmak için 0000FF değerlerini kullanırız. Kırmızı ve yeşilin karışımı olan sarıyı elde etmek için FFFF00, kırmızı ile mavinin karışımı olan moru elde etmek içinse FF00FF değerlerini kullanıyoruz. 9999FF, 66FF99, CC3366, CCCCCC gibi değişik oranlarla güvenli renklerin tümünü elde edebiliriz. Peki size bir ev ödevi: tüm renklerin azamî oranda karıştığını ve hiç bir rengin karışımda bulunmadığını ifade eden FFFFFF ve 000000 değerleri bize hangi renkleri verir? Etiketler (Tag) ve Parametreler (Attribute) HTML'in kelime anlamı itibariyle bir metin işaretleme dili olduğunu öğrendik. HTML'in bir programlama dili kadar karmaşık olmasa da kendine has bir kodlama biçimi vardır ve bu kodlara/komutlara da etiket (tag) denir. Etiketleri kullanma mantığı oldukça basittir. Örneğin bir metni koyu görüntülemek istediğimizde bu metnin başına Browser'a metnin koyu görüntüleneceğini bildiren etiketi yazarız ve metnin sonunda bu etiketi sonlandırırız. Sonlandırılmayan istisnai etiketler de vardır, fakat büyük çoğunluk itibariyle etiketler sonlandırılır. Özetle; bir etkinin başlamasını istediğimiz yerde ilgili etiketi yazıyor, bitmesini istediğimiz yerde de bu etiketi sonlandırıyoruz. Etiketleri küçüktür (<) büyüktür (>) sembolleri arasında gösteriyoruz. Örneğin <html> bir etikettir. Her HTML dosyası bu etiketle başlar ve </html> etiketi ile sonlandırılır. Bölü işareti o etiketin sonlandırıldığı anlamını taşır. Bazı etiketlerin kontrol edilebilir bir takım özellikleri vardır. Bunlara o etiketin parametresi (attribute) diyebiliriz. Örneğin metnin yazı türü ayarlarını değiştirmemizi sağlayan <font> etiketinin yazı türü ailesinin adını belirttiğimiz face, rengini belirttiğimiz color, büyüklüğünü belirttiğimiz size gibi parametreleri vardır. Bu etiketlerin çoğunluğu en yaygın iki Browser olan Microsoft Internet Explorer ve Netscape Navigator tarafından desteklenirken, bir kısmı bu iki Browser'dan yalnızca birisi tarafından destekleniyor. Bu konuyla ilgili kitapçığın sonundaki Browser etiketlerin uyumluluklarını gösteren tabloyu referans olarak kullanabilirsiniz. KUTU///////////////////////////////////////////////////////////// Hangi HTML Editörünü Kullanmalıyım? HTML dosyaları metin içerikli dosyalardır, dolayısıyla herhangi bir metin düzenleme veya kelime işlem programı HTML sayfa oluşturmak için kullanılabilir. Burada dikkat edilmesi gereken nokta, oluşturulan dosyayı kaydederken kayıt türü olarak "salt metin" türünü seçmektir. Bu ayar, programın kayıt penceresindeki özellikler değiştirilerek yapılabilir. Böylece kelime işlem programına ait kontrol kodları dosyaya yazılmaz. Bunun yanısıra dosyaların uzantısının htm veya html şeklinde olmasına dikkat etmek gerekiyor. Kelime işlem programları asıl amaçlarının biraz dışarısında olmakla beraber HTML sayfa yapımında kullanılabilir, ama karmaşık Web sayfaları hazırlamak ve bu sayfaları hazırladıktan sonra yönetmek, güncellemek gibi ileri derecede kullanım amacına yönelik işler için hazırlanıp piyasaya sürülen programlar da vardır. Bu programlara HTML veya Web tasarım editörleri diyebiliriz. Kullanım şekli bakımından iki tip Web tasarım editörü vardır; görsel veya orjinal ifadesi ile WYSIWYG (What You See Is What You Get ya da bundan daha az karmaşık olmayan Türkçe ifadesi ile "Ne Görürsen Onu Alırsın") editörler ve kod bazlı editörler. Her iki tip editörün de avantajları ve dezavantajları bulunuyor. Görsel editörler ile editöre has araçlar ve yardımcı sihirbazlar kullanarak HTML dilini bilmeksizin Web sayfası oluşturulabilir. Fakat bu noktada kontrol editörü kullanan kişiden çok sayfayı oluşturan programın elindedir. Kod bazlı editörler görsel editörlerin aksine HTML bilgisi gerektirir ve sayfa oluşturulurken kodlar kullanıcı tarafından yazılır, yine bir takım kolaylık sağlayıcı araçlar ve sihirbazlar bu tip editörlerde de bulunabilir. Görsel editörlere FrontPage ve Dreamweaver'ı, kod bazlı editörlere HomeSite'ı örnek olarak verebiliriz. HTML dilini öğrenmek isteyen kişiler için tavsiye edilebilecek tipte editör, kod yazmaya dayalı editördür. Hatta bırakın HTML editörünü Windows'un NotePad'i Macintosch'un Simple Text'i bile bu iş için biçilmiş kaftandır. Biz bu kitapçıktaki örneklerimizde Notepad'i kullanacağız. KUTU BİTTİ//////////////////////////////////////////////////////// KUTU///////////////////////////////////////////////////////////// HTM mi HTML mi? Yeni başlayan Web tasarımcılarının aklına takılan sorulardan biri, dosya uzantılarının html mi yoksa htm mi olması gerektiğidir. Ya da bunlar arasında bir fark var mıdır? Aslında var olduğu pek söylenemez. Dosya uzantısının 3 harften fazla olmasına izin vermeyen bir işletim sistemi kullanıyorsanız (hadi canım neymiş o?) dosya uzantılarını htm olarak vermelisiniz. Bunun dışında html veya htm dosyanın hiç bir farkı yoktur. KUTU BİTTİ//////////////////////////////////////////////////////// KUTU///////////////////////////////////////////////////////////// Büyük Harf mi, Küçük Harf mi? HTML dosyalarınızda HTML komutlarını (etiketler) büyük veya küçük harflerle yazabilirsiniz. Browser açısından <html> ile <HTML> arasında hiç bir fark yoktur. Ama olacak! HTML'in yeniden düzenlenmiş ve yazım kurallarına karşı hassas olan sürümü XHTML, etiketlerde büyük harf-küçük harf farkı gözetecek; etiketlerin küçük harfle yazılması zorunlu olacak. Benzer kurallar bir başka Web teknolojisi olan XML (eXtensible Markup Language - Genişletilebilir İşaretleme Dili) için de geçerli. Web tasarımcıları için HTML'in önemi hiç bir zaman kaybolacağa benzemiyor; ama yine de XML ve onun HTML'e uyarlanmış şekli olan XHTML'i kullanmayı öğreneceğiz. Bunun için HTML'e yeni başlayan bir kişinin şimdiden elini alıştırması için etiketleri küçük harfle yazması gerekir. Biz de buradaki örneklerimizde etiketleri küçük harflerle yazacağız ve parametre değerlerini tırnak içine alacağız. KUTU BİTTİ//////////////////////////////////////////////////////// Web sayfaları ve HTML hakkında edindiğimiz genel bilgilerden sonra HTML sayfa yapısını tanımaya başlayacağız. Yine önümüzdeki konudan itibaren HTML kodlamaya geçiyoruz. Bu kitapçıktaki kodları bilgisayarınızda denemeden önce HTML çalışmalarınız için özel bir klasör oluşturmanızı ve dosyaları bu klasöre kaydetmenizi tavsiye ederiz. HTML Sayfasının Bölümleri Web sitelerini oluşturan HTML kodunu iki ana bölüme ayırabiliriz. Her sayfa yapılırken bu iki bölümü oluşturan kodlar sabit bir şekilde yazılır. Bu bölümler baş (head) ve gövde (body) bölümleridir. Tüm kodlar <html> etiketi ile başlar ve </html> ile sonlandırılır. Bu konuyu daha iyi anlayabilmek için HTML editörümüzü (yani Notepad veya SimpleText'i) açıyoruz ve ilk sayfamızı oluşturmak üzere aşağıdaki kodları yazıyoruz. <html> <head> <title>ilk sayfam</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> </head> <body> Merhaba, Sayfama Hoşgeldiniz. </body> </html> <ekran_002.tif> Bu dosyayı HTML çalışmalarınız için oluşturduğunuz klasöre ilksayfa.htm adı ile kaydedin. Herşey yolunda gitti ise sayfayı Browser'ınızda açtığınızda buradakine benzer bir görüntü ile karşılaşacaksınız: <ekran_003.tif> <ekran_004.tif> Şimdi yazdığımız bu kodları inceleyelim. Az önce HTML sayfasının iki bölümden oluştuğunu öğrenmiştik. Bu bölümleri kodlar içinde açıkça görebiliyor musunuz? Baş (head) ve gövde (body) bölümleri. Browser'da açtığımız sayfaya dönüp kodlarla bir kıyaslama yaparsak biraz da İngilizce bilgisi yardımıyla aşağı yukarı hangi etiketin ne işlevi olduğunu görebiliriz. Kodları incelemeye ilk satırdan değil 3'ncü satırdan başlayalım ve bu koda bir göz atıp dikkatimizi Browser'ın mavi başlık çubuğuna çevirelim. 3'ncü satırda verdiğimiz başlık (title) kodu Browser'a hitap ediyor. Sayfaya verdiğimiz başlık, Browser'ın adıyla beraber burada görüntülenir. Bir sonraki satırdaki nispeten karmaşık görünümlü etiket META etiketi; fonksiyonu ise Browser'a HTML sayfasının hangi dilde metin içerdiğini bildirmek. Eğer işletim sisteminiz Türkçe değilse ve Browser'ınızın varsayılan dil ayarı Türkçe olarak ayarlanmamışsa ş, ğ, ı, gibi harfler bozuk görüntülenecektir. Bu yüzden iki satırdan oluşan dil kodunu oluşturacağımız bütün sayfalarda kullanacağız. Şimdi 6'ncı satıra geçelim. Buradaki "Merhaba. Sayfama Hoşgeldiniz." metni Browser'da varsayılan font ve büyüklükte gösteriliyor. Bunlara bakarak genel bir sonuç çıkarabilir miyiz? <head> ile başlayıp </head> ile biten bölüm, sayfamızın baş bölümünü oluşturur ve bu bölümde bulunan kodlar ziyaretçinin göreceği içeriğe değil aslında Browser'a hitap eder. HTML sayfanın hangi dilde (Türkçe, İngilizce, Çince…) metin içerdiğini, arama motorlarına hitap eden bir takım kodları ve sayfamıza eklemek istediğimiz Scriptleri bu bölüme yerleştiririz. Kodların gövde (body) bölümü ise sayfanın içeriğini oluşturur. Kodlamaya <html> etiketi ile başlayıp </html> ile bitirdiğimize dikkat edin. Bu, oluşturduğumuz sayfanın HTML dili ile yazıldığını ifade eder ve tüm HTML kodları bu iki etiket arasında yer alır. Şimdi ikinci denememizi yapalım. HTML editöründe boş bir sayfa açıp içine yalnızca ilksayfa.htm dosyasındaki 6'ncı satırı, "Merhaba, Sayfama Hoşgeldiniz," metnini yazalım, ve bu dosyayı deneme.htm adıyla kaydedip Browser'ımızda açalım. Tek kelime bile HTML kodu içermeyen deneme.htm dosyası ile usulüne uygun bir şekilde yazdığımız ilksayfa.htm dosyasının görünüşlerinin aynı olması aklınızı karıştırmasın. Böyle olmasının sebebi HTML'in metin tabanlı dosyalar oluşturmasıdır. Benzerliğin burada sona erip bundan sonraki en küçük değişikliğin bile HTML kodu gerektirdiğini görmek için şunu deneyelim. Tek satırlık metni "Merhaba," kelimesinden sonra enter tuşu ile iki satıra bölelim ve dosyayı bu haliyle deneme2.htm adıyla kaydedelim. Bu sayfayı Browser'da açtığımızda metnin tek satırda görüntülenmeye devam ettiğini, editörde Enter ile verilmiş satır başının HTML veya Browser için bir anlam ifade etmediğini görüyoruz ve bu noktada yeni bir etiketle tanışıyoruz. KUTU///////////////////////////////////////////////////////////// Web Sayfası Hangi Dilde Metin İçeriyor? İlk HTML sayfamızı oluştururken sayfanın head bölümündeki kodların Browser'a hitap ettiğini, bu bölüme yazılan kodlardan birinin de sayfa içerisindeki metinlerin dilini belirttiğini söylemiştik. Browser'a dili belirten bu kod meta etiketiyle yazılır: <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> Bu iki satırın her biri sayfanın Türkçe içerik taşıdığını belirtir. İkisini birden kullanmamızın sebebi Windows dışındaki işletim sistemlerine de Türkçe karakter kodunu bildirmek. Meta etiketleri sonlandırılmaz ve tek görevi de Browser'a dil belirtmek değildir. Meta etiketleriyle arama motorlarının indeksleme programcıklarına yönelik bilgiler de hazırlanabilir. Meta etiketi ile dil belirtmediğimiz taktirde dil ayarı olarak Browser'ın varsayılan (default) ayarı geçerli olacaktır. Eğer Browser'ın varsayılan ayarı Türkçe değil de başka bir dilse o zaman Türkçe karakterler (ö, ç, ş, ı, ğ, ü, Ö, Ç, Ş, İ, Ğ, Ü) doğru görüntülenemez. Bu yüzden dil belirten META etiketini kullanmak Web tasarımcısının el alışkanlığı olmalıdır. KUTU BİTTİ//////////////////////////////////////////////////////// Metne Satır Başı Verme Öğreneceğimiz yeni etiket <br> etiketi. Fonksiyonu; metni satır başına almak. Kullanımını ise bir örnek yaparak öğrenelim. <html> <head> <title>Metne satır başı verme</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> </head> <body> Ocak<br> Şubat<br> Mart<br> Nisan<br> Mayıs<br> Haziran<br> Temmuz<br>Ağustos<br>Eylül<br>Ekim<br>Kasım<br>Aralık </body> </html> <ekran_005.tif> Kullanımı oldukça basit. Metni bölmek istediğimiz yere <br> etiketini yazıyoruz. Böylece bu etiketten sonraki metin bir alt satırda görüntüleniyor. <br> etiketinin istisnai bir durumu var; sonlandırılmıyor. Ay adlarının yarısını farklı satırlarda diğer yarısını tek satırda yazmamızın nedeni Browser açısından her iki tip yazım tarzının da aynı şeyi ifade ettiğini göstermek. Birden fazla <br> etiketini peşpeşe yazarak metinler arasında daha çok satır boşlukları oluşturabiliriz. HTML'in metin düzenlemeye yönelik daha onlarca etiketi vardır. Bu etiketlerin tümünü bir sonraki bölümde öğreneceğiz. Buraya kadar öğrendiklerimizle HTML'e bir giriş yaptık. Belki kafanızdaki soruların bir kısmı aydınlandı, ama hala önemli bir kısmı da cevap bekliyor. Acele yok hepsini sırayla öğreneceğiz ama bir oturuşta değil. Derse burada ara vererek bir hava almanın; bir çay, kahve veya meyve suyu içmenin, hatta balkona çıkıp biraz gözlerinizi dinlendirmenin tam zamanıdır. |
| BÖLÜM 3 Bundan önceki bölümde HTML dosyalarının iki kısımdan oluştuğunu öğrendik. Bunlar baş (head) ve gövde (body) bölümleriydi. Sayfanın head bölümünde Browser'a hitap eden kodlar olduğunu gördük. Sayfalardaki metinlerin doğru olarak görüntülenebilmesi için hangi kodu nerede kullanmamız gerektiğini öğrendik. Browser'da görüntülemek istediğimiz tüm içeriği <body> ... </body> etiketleri arasına yazacağımızı biliyoruz. Bu bölümden itibaren sayfa içeriğini düzenlemeye yönelik etiketleri ele alacağız. Konumuza HTML sayfalarının temel taşı olan metinleri düzenlemeyle başlıyoruz. Başlık Etiketleri: <h1>, <h2> <h3>, <h4>, <h5> ve <h6> HTML bize, metinler için kullanabileceğimiz 6 değişik büyüklükte başlık etiketi sunuyor. Bu etiketlerden <h1> en büyük başlığı görüntülüyor, <h6> ise en küçük başlığı. Hemen bir örnekle bu 6 adet etiketi ve ne büyüklükte başlıklar oluşturduğunu kıyaslamalı olarak görelim. Bundan önceki bölümde öğrendiğimiz ve bundan sonra oluşturacağımız her dosyada standart olarak kullanacağımız etiketleri yazıyoruz. Head bölümüne Türkçe karakterlerimiz için META etiketlerini ekliyoruz. Sayfamıza bir başlık veriyoruz. Body bölümüne de başlık etiketlerini yazıp tüm kodları <html> ... </html> etiketleri arasına alıyoruz. <html> <head> <title>Başlık Etiketleri</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> </head> <body> <h1>Başlık 1</h1> <h2>Başlık 2</h2> <h3>Başlık 3</h3> <h4>Başlık 4</h4> <h5>Başlık 5</h5> <h6>Başlık 6</h6> Bu normal yazı </body> </html> <ekran_006.tif> Kod akışını rahat takip edebilmek için fazladan satır araları oluşturabilirsiniz. Satır başlarına klavyede sekme (Tab) veya aralık (Spacebar) tuşlarına basarak boşluk vermek de kod yazanların el alışkanlığıdır. Başlık etiketleri ile kullanabileceğimiz parametreler de vardır. Parametrenin ne olduğuna önceki bölümde değinmiştik. Kısaca etiketin bir takım özelliklerini kontrol etmeye yarıyordu. Başlık etiketlerinin kontrol edilebilir özelliği yani parametresi align (hizalama)'dır. Başlığı sayfa içerisinde sağa, sola dayayabilir veya ortalayabiliriz. Kullanılışı: align = left | center | right Örnekler: <h1 align="center">Ortalanmış Başlık</h1> <h3 align="right">Sağa Dayalı Başlık</h3> <h5 align="left">Sola Dayalı Başlık</h5> Paragraf Etiketi: <p> ... </p> Metinleri <body> ... </body> etiketleri arasında başka hiçbir etiket kullanmadan görüntüleyebiliyoruz. Satır başı oluşturmak istediğimizde <br> etiketi kullanmamız gerektiğini de öğrendik. Bunu yapmanın bir diğer yolu da metne paragraf özelliği kazandırmaktır. <p> ... </p> arasına yazılan metin paragraf özelliği kazanmış olur. Az önce öğrendiğimiz başlık etiketini de kullanarak iki paragraf içeren sayfamızı hazırlayalım. Buradan itibaren örneklerde yalnızca <body> ... </body> etiketleri arasında yer alan kodları göreceksiniz. Her seferinde tekrarlamamak için <head>, <title> ve <meta> etiketlerini biz yazmıyoruz. Fakat sayfalarınızı oluştururken bu kodları sizin yazmanız gerekiyor. El alışkanlığı oluşturması için kopyala-yapıştır kolaylığından yararlanmamak iyi bir yöntem olabilir. <h2>Sevdiğim Yazılar</h2> <p> Sabahı beklemeyiniz dostum, geceden yola çıkınız. Olur ki uyuyakalırsınız. Gece serindir, yapraklardan süzülen yel gözlerinizdeki yaşları kuruturken ruhunuzda kainatın derin sessizliğini taşıyarak sabaha doğru yürüyüp fecri başlatınız. </p> <p> Cemiyetin vahşi, zehirli bitkilerle dolu, her dalında uğursuz baykuşların manasız telkinler yaptığı sık ağaçlı ormanlarında çetin yolculukların başlangıcı için sabahı beklemeyiniz. Sabahı beklemek öğleni, öğleni beklemek akşamı beklemek gibi bir ruh gevşekliğini doğurur. </p> <p> Filozofun öğüdü bütün hayatımızda takib edeceğimiz en esaslı metottur: "Uzun yolu seçiniz..." </p> <ekran_007.tif> Paragraf etiketinin de başlık etiketinde olduğu gibi align (hizalama) parametresi vardır. Kullanılışı: align = right | center | left Bu parametrenin yanısıra CSS (Cascading Style Sheets - Stil Şablonları) teknikleri ile paragraf etiketine daha bir çok özellik atanabilir. Bu özelliklere diğer kitapçığımızın konusu olan stiller konusunda değineceğiz. Bazı Web tasarımcıları <p> etiketini kapatmadan kullanırlar. Bu şekilde bir kullanımı Browser'lar destekliyor. Ancak biz bu kitapçıktaki örneklerimizde doğru yazım tekniğini esas alarak kapatma etiketini kullanacağız. Ayrıca, HTML'den sonra standart olması düşünülen XHTML dili, kapatılmamış etiketleri hata sayacağı için, şimdiden elimizi alıştırmamız yerinde olur. Ortalama Etiketi: <center> ... </center> Başlık ve paragraf etiketlerinde gördüğümüz align="center" parametresinin fonksiyonu ile bu etiketin fonksiyonu aynı. <center> ... </center> etiketleri arasına aldığımız metin, grafik, tablo gibi nesneler sayfa içerisinde ortalanır. <center>Uzun yolu seçiniz</center> Browser penceresinin ebatları ile oynadığınızda metnin, pencerenin boyutuna göre yer değiştirdiğini göreceksiniz. <center> etiketi kullandığımızda metin daima ekranın tam ortasında görüntülenir. Koyu, Eğik (İtalik) ve Altıçizili Yazılar Metinleri koyu (bold), eğik (italic) ve altıçizili (underline) yazdıran etiketleri bir örnekle gösterelim. Bu etiketler dikkat ederseniz İngilizce karşılıklarının baş harflerinden oluşuyor. <p align="center">Filozofun öğüdü bütün hayatımızda takip edeceğimiz en esaslı metottur :</p> <center> <b>"Uzun yolu seçiniz..."</b> <br> <i>"Uzun yolu seçiniz..."</i> <br> <u>"Uzun yolu seçiniz..."</u> </center> <ekran_008.tif> Bu etkileri tek tek metinlere uygulayabiliyoruz. Peki hem koyu hem italik hem de altçizgi etkisini nasıl oluştururuz? Tabii ki etiketleri iç içe kullanarak. Şu kodları inceleyin. <i><b>Filozofun</b> öğüdü bütün hayatımızda takib edeceğimiz <b><u>en esaslı</u></b> metottur: "<u>Uzun yolu seçiniz...</u>"</i> Şart olmamakla beraber önce açtığımız etiketi en son kapatmak iyi bir kodlama prensibidir. Diğer Metin Düzenleme Etiketleri <big> ve <small> Etiketleri Yazı tipi (font) konusunda karakter büyüklüklerini değiştirmeyi göreceğiz, fakat kısa yoldan bu etkiyi <big> ve <small> etiketleri ile sağlayabiliyoruz. <big> etiketi metinleri büyütmek için, <small> etiketi de küçültmek için kullanılıyor. Bu iki etiket font büyüklüğünü 1 ölçü değiştirir. Etiketleri peş peşe kullanmak suretiyle istenene yakın büyüklükler elde edilebilir. <p>Bu normal metin</p> <big>BIG etiketi ile büyütülmüş metin</big> <br> <small>SMALL etiketi ile küçültülmüş metin</small> <br> <br> <br> <big><big>İki ölçü büyütülmüş metin</big></big> <br> <small><small>İki ölçü küçültülmüş metin</small></small> <ekran_009.tif> <blockquote> Etiketi Satırbaşı girintisini artırmak suretiyle aradaki metni diğer metinlerden ayırır. <p>WEB Teknikleri</p> <blockquote> HTML<br> JAVASCRIPT<br> ASP<br> CGI<br> FLASH<br> </blockquote> <ekran_010.tif> <blockquote> etiketi eğer grafik dosyaları ile birlikte kullanılırsa bazı eski Browser'larda sayfa düzgün görüntülenemeyebilir. Bu yüzden bu tip sayfaları yaygın Browser'ların eski sürümleriyle de test etmekte yarar vardır. Yatay Çizgi <hr> etiketi sayfaya yatay çizgi (horizontal rule) çizmekte kullanılır. Bu etiket sonlandırılmaz. <hr> ile kullanabileceğimiz parametreler şunlardır: align, noshade, size ve width align parametresi artık ezberlediğimiz üzere hizalamada kullanılıyordu. Alabileceği değerler ise şöyle: align = left | center | right noshade çizginin gölge efektini kaldırır ve koyu renkte çizilmesini sağlar. Bu parametre tek başına kullanılır, bu parametreye karşılık olarak bir değer verilmez. size parametresi çizginin piksel cinsinden kalınlığını belirler. width parametresi ile de çizginin genişliğini belirleyebiliriz. Bu parametreye karşılık olarak sayı değerleri verebileceğimiz gibi, Browser penceresinin boyutuna göre çizgi genişliğinin değişmesini sağlayan yüzde (%) değerleri de verebiliriz. <hr> <center>Yatay Çizgi Örnekleri</center> <hr> <br><br> <hr width="100" align="right"> <hr width="70%" align="left"> <hr width="350" align="center"> <br><br> <hr size="1" noshade> <hr size="5" noshade width="50%"> <ekran_011.tif> Özel Karakterler HTML kodları için ayrılmış karakterleri sayfalarımızda kullanmak istediğimizde sorunlarla karşılaşırız. Örneğin küçüktür (<), büyüktür (>) karakterleri arasındaki metinler etiket olarak algılanacağından; HTML'de etiketler "<" ve ">" sembolleri arasında yazılır. Örneğin <html> bir etikettir. metnini olduğu gibi kodlara yazdığımızda sayfa bozuk görüntülenecektir. Ayrıca HTML, peşpeşe oluşturulmuş boşlukları tek bir boşluk sayacağından, burada da bir problem sözkonusudur. Kelime aralarına fazladan boşluklar vererek Browser'da oluşan görüntüyü inceleyin. <body> Bugün hava çok güzel <br> Bugün hava çok güzel </body> <ekran_012.tif> İlk satırdaki fazla boşluklar bir boşluk olarak görüntülendi. Bu yüzden iki satır da birbirinin aynısı. İşte HTML'deki bu ayrılmış karakter problemini çözmek için karakter kodları kullanıyoruz. Aslında bilgisayarda oluşturulabilen toplam 255 ASCII karakterin herbirisinin kodu vardır. Ancak burada Web sayfalarında en çok kullanılanların küçük bir listesini verelim. (boşluk) " " & & < < > > | | © © ® ® Şimdi yukarıda yaptığımız örnekleri karakter kodlarını kullanarak tekrar deneyelim. <body> HTML'de etiketler "<" ve ">" sembolleri arasında yazılır. Örneğin <html> bir etikettir. <br><br> <hr> <br> Bugün hava çok güzel <br> Bugün hava çok güzel <br><br> <hr> <br> align=left | center | right </body> <ekran_013.tif> Yorum-Açıklama Satırı Kimi zaman HTML kodlarımız öylesine uzun ve karmaşık bir hal alır ki bir süre sonra hangi kodun nerede olduğunu bulmak zahmetli bir işe dönüşür. Böyle bir durumda tasarımcının imdadına yetişen etiket yorum etiketidir. <!-- ve --> etiketleri arasındaki herşey yorum olarak kabul edilir ve sayfada görüntülenmez. <body> <!-- Burada yorum yer alıyor --> Normal metin </body> Yukarıdaki örnekte <!-- ve --> etiketleri arasına aldığımız metin sayfada görüntülenmeyecektir. Yorum etiketlerini kodlar arasına hatırlatıcı notlar bırakmak amacıyla da kullanabiliriz. <nobr> Etiketi Bu etiket, uzun metinlerde kelimelerin bir alt satıra bölünmeden tek satırda görüntülenmesini sağlar. Örnek: <nobr> Sabahı beklemeyiniz dostum, geceden yola çıkınız. Olur ki uyuyakalırsınız. Gece serindir, yapraklardan süzülen yel gözlerinizdeki yaşları kuruturken ruhunuzda kainatın derin sessizliğini taşıyarak sabaha doğru yürüyüp fecri başlatınız. </nobr> <s> Etiketi Bazı kelimelerin altını değil de, üstünü çizmek isteyebiliriz. Tıpkı evde hazırladığımız bir alışveriş listesindeki malzemeleri aldıktan sonra silmemiz gibi. Arkadaşlarımızın doğum günlerini gösteren bir Web sayfası hazırladığımızı düşünelim ve doğum günleri geçenlerin üzerini <s> etiketi ile çizelim: Mustafa : 6 Ağustos <br> Kudret : <s>11 Ekim</s> <br> Hakkı : 5 Temmuz <br> Şeyma : <s>23 Kasım</s> <br> Nurdan : <s>22 Ekim</s> <br> Alper : 5 Ocak <ekran_014.tif> <pre> Etiketi Bu etiket kullanılarak yazılan metinler, kodlara yazıldığı şekliyle görüntülenir. Böylece satır araları ve fazladan verilmiş kelime arası boşluklar başka yöntemlere başvurmara gerek kalmadan (<br> etiketi ve bol miktarda kullanmak gibi) korunmuş olur. Örnek: <pre> HİSSE ALIŞ SATIŞ SON EREGL 14.500 14.750 14.500 SAHOL 5.900 6.000 5.900 TUPRS 26.500 27.000 27.000 </pre> <ekran_015.tif> <sup> ve <sub> Etiketleri Bu etiketler, metinleri üstyazı ve altyazı biçimlerinde yazmamızı sağlarlar. Örneğin bilimsel konulu metinlerde rastlanabilecek türden H20 ve 27oC gibi ifadeleri bu etiketleri kullanarak yazabiliriz. H<sub>2</sub>O H<sub>2</sub>SO<sub>4</sub> 27<sup>o</sup>C Yazı Tipi (Font) Metin düzenleme etiketlerinden belki de en önemlisi ve en sık kullanılanı font etiketidir. Şimdiye kadar öğrendiğimiz metin düzenleme etiketlerinde hep Browser'ın varsayılan (default) ayarlarına hitap ettik. Font etiketiyle ilk defa bu ayarlardan birini değiştireceğiz. Bu etiketin kullanımında dikkat etmemiz gereken bazı noktalar var. Bunlardan birincisi yazı tipi seçimidir. Size güzel görünen, çok beğendiğiniz bir yazı tipi herkesin bilgisayarında yüklü bulunmayabilir. Bu durum, Browser'ın istenen fontu gösterememesine, dolayısıyla istediğiniz estetiğin oluşturulamamasına neden olur. Buna karşı alınabilecek önlemlerden biri yazı tipine (font) alternatifler vermektir. Böylece eğer kullanmak istediğimiz font ziyaretçinin işletim sisteminde kurulu değilse ikinci, üçüncü fontlar aranır. Bu şekilde ziyaretçi Browser'a örneğin, "Bu metni, tahoma yazı tipiyle görüntüle, eğer tahoma sisteme yüklenmemişse verdana kullan; şayet o da yoksa arial kullan!" demiş oluyoruz. Yaygın font gruplarının hangileri olduğu konusunda fikir vermesi için Web tasarım editörlerinin font ayarlarını inceleyebilirsiniz. Yine Internet'te en çok ziyaretçi çeken sitelerde hangi fontların kullanıldığını incelemek iyi bir fikir olabilir. Font konusunun püf noktalarına değindik. Şimdi uygulamamıza geçelim. Önce "Sayfama Hoşgeldiniz" metnini değişik fontlarda ekrana yazdıralım. <p><font face="verdana">Sayfama Hoşgeldiniz</font></p> <p><font face="tahoma">Sayfama Hoşgeldiniz</font></p> <p><font face="comic sans ms">Sayfama Hoşgeldiniz</font></p> <p><font face="fixedsys">Sayfama Hoşgeldiniz</font></p> <p><font face="courier">Sayfama Hoşgeldiniz</font></p> <ekran_016.tif> Control Panel/Denetim Masası'ndaki Fonts/Yazı tipleri simgesini çift tıklayarak sisteminizde yüklü bulunan fontları inceleyin ve bu fontları yukarıdaki örneğe uygulayın. Bu örnekle beraber font etiketini bir parametresiyle birlikte öğrendik: face. İngilizcede bu kelime yüz anlamına geliyor; matbaacılıkta ise bir yazı tipi ailesi anlamına kullanılıyor. Sırayla diğer parametreleri de örneklerle görelim. <font face="verdana, arial"> <font size="1">Punto büyüklüğü 1</font><br> <font size="2">Punto büyüklüğü 2</font><br> <font size="3">Punto büyüklüğü 3</font><br> <font size="4">Punto büyüklüğü 4</font><br> <font size="5">Punto büyüklüğü 5</font><br> <font size="6">Punto büyüklüğü 6</font><br> <font size="7">Punto büyüklüğü 7</font><br> </font> <ekran_017.tif> Font büyüklükleri 1'den 7'ye kadardır ve size parametresi ile belirlenir. Bu örnekte dikkat çekici başka bir nokta da <font> etiketinin değişik parametreleri ile iç içe kullanılabilmesidir. En dışarıda font tipini (face) belirttik. Böylece bu etiket sonlandırılıncaya kadar tüm metinler verdana ile gösteriliyor. Tedbiri elden bırakmamaya alışmak amacıyla, alternatif font olarak arial kullanılacağını da belirtiyoruz. İç kısımda ise font ölçülerini (size) değiştirdik. Bu kodlama farklı bir yazım ile de yapılabilir: <font face="verdana, arial" size="1">Punto büyüklüğü 1</font><br> <font face="verdana, arial" size="2">Punto büyüklüğü 2</font><br> <font face="verdana, arial" size="3">Punto büyüklüğü 3</font><br> <font face="verdana, arial" size="4">Punto büyüklüğü 4</font><br> <font face="verdana, arial" size="5">Punto büyüklüğü 5</font><br> <font face="verdana, arial" size="6">Punto büyüklüğü 6</font><br> <font face="verdana, arial" size="7">Punto büyüklüğü 7</font><br> Bu kodlarla Browser'daki görüntü değişmeyecektir. Fakat her defasında face="verdana, arial" komutunu tekrar tekrar yazarsak, gereksiz yere kodun şişmesine yani dosya boyutunun büyümesine sebep oluruz. Bu, sayfalarımızın Internet'te ziyaretçilerimize aktarılmasında gecikmelere yol açar. Fonta bağıl büyüklükler de verebiliriz. Daha önce öğrendiğimiz <big> ve <small> etiketlerini hatırlayalım. Bu etiketler metnin büyüklüğünü artırmaya ve azaltmaya yarıyordu. Yani bağıl etiketlerdi. İşte <big> etiketinin gerçekte karşılığı puntoyu bir ölçü artır anlamında <font size="+1"> dir. +1'den +4'e kadar değerler vererek punto büyüklüklerini artırabiliriz. Puntoları küçültmek için de <small> etiketinin karşılığı olan <font size="-1"> kodunu kullanıyoruz. Yalnız burada farklı olarak -1 ve -2 değerlerini kullanabiliriz. Şu örneğe dikkat edin: <font face="tahoma, arial"> <font size="3">Punto büyüklüğü 3</font><br> <font size="+1">Punto büyüklüğü 4 oldu</font><br> <font size="-2">Punto büyüklüğü 2 oldu</font><br> <font size="+4">Punto büyüklüğü 6 oldu</font><br> </font> İlkokul matematik derslerini hatırlatan bu konuyu da öğrendikten sonra renkli konulara geçmenin artık zamanı geldi. Metinleri Renklendirme HTML'de renkler konusuna önceki bölümlerde değinmiştik. Web sayfalarımızda renk kullanmanın iki yolu olduğunu hatırlıyor olmalısınız: renklerin İngilizce adlarını kullanmak veya rengin RGB değerini heksadesimal düzende belirtmek. Heksadesimal konusuna tekrar girmeyeceğiz fakat RGB'nin Red (kırmızı ) Green (Yeşil ) Blue (Mavi ) kelimelerinin baş harflerinden oluştuğunu hatırlatmakta fayda var. Şimdi renk tablomuzu inceleyelim. Siyah black #000000 Lacivert navy #000080 Mavi blue #0000FF Yeşil green #008000 Koyu yeşil teal #008080 Parlak yeşil lime #00FF00 Turkuaz aqua #00FFFF Vişne çürüğü maroon #800000 Mor purple #800080 Zeytuni yeşil olive #808000 Gri grey #808080 Gümüş grisi silver #C0C0C0 Kırmızı red #FF0000 Parlak pembe fuchsia #FF00FF Sarı yellow #FFFF00 Beyaz white #FFFFFF Buradaki RGB değerlerini ezberlemeye gerek yok. Ama hala metinleri renklendirmeyi öğrenemedik diyorsanız sizi <font> etiketinin color parametresiyle tanıştıralım. <font face="comic sans ms, verdana" size="4"> <font color="red">Kırmızı</font><br> <font color="navy">Lacivert</font><br> <font color="olive">Zeytuni</font><br> <font color="blue">Mavi</font><br> <font color="green">Yeşil</font><br> </font> Renkleri bu şekilde adlarıyla kullanabileceğimiz gibi RGB değerleriyle de ifade edebiliriz: <font face="comic sans ms, verdana" size="4"> <font color="FF0000">Kırmızı</font><br> <font color="000080">Lacivert</font><br> <font color="808000">Zeytuni</font><br> <font color="0000FF">Mavi</font><br> <font color="008000">Yeşil</font><br> </font> <ekran_018.tif> color parametresinin dışında kullanabileceğimiz bir başka yöntem <body> etiketinin text parametresidir. Bu parametreye verilen renk tüm sayfadaki metinlerin rengini kontrol eder. <body text="#000080"> <basefont> Etiketi Tüm sayfada geçerli olacak yazıtipi kuralları belirlemek istediğimizde <basefont> etiketini kullanıyoruz. Bunun için bu etiketi <body> etiketinden hemen sonra kullanırız. Örnekler: <body> <basefont face="verdana"> Kodu, tüm sayfadaki metinleri verdana fontu ile görüntüler. <basefont size="6"> Font büyüklüğünü 6 yapar. <basefont color="red"> Metinlerin rengi kırmızı olarak görüntülenir. Etiketi ayrı ayrı parametrelerle kullanmak yerine birlikte de kullanabiliriz: <body> <basefont face="verdana" size="6" color="red"> Bu kodlarla oluşturduğunuz sayfaları her iki Browser ile inceleyerek sonuçları karşılaştırabilirsiniz. <basefont> ile tanımladığımız font rengi ve büyüklükleri, sayfada tablo kullanılmışsa (tab  ar konusuna sonraki bölümlerimizde değineceğiz ) tablo içerisindeki metinlerde geçerli olmayacaktır. Böylece font etiketini ve üç parametresini öğrenmiş bulunuyoruz. Bir sonraki konuya geçmeden önce yukarıdaki 16 renkten oluşan tabloyu HTML olarak hazırlamaya ne dersiniz? Listeler HTML bize üç tür liste hazırlama imkanı veriyor; 1. Sıralı Listeler 2. Sırasız Listeler 3. Tanımlama Listeleri Başında rakam veya harf bulunan ve belli bir düzene göre ilerleyen liste türü sıralı listedir. Sırasız listelerin başına küçük daire veya kare gibi şekiller gelir. Tanımlama listeleri ise <blockquote> etiketinde gördüğümüz etkiye benzer yapıda listeler oluşturur. Şimdi bu üç türde de liste hazırlamayı öğrenelim. Sıralı Listeler (Ordered List ) : <ol>…</ol> Her bir liste öğesinin başına <li> etiketi yazılarak tüm liste <ol> ... </ol> etiketleri arasına alınır. <li> list item (liste öğesi ), <ol> ordered list (sıralı liste ) anlamına geliyor. <li> etiketi kapatılmadan da kullanılabilir. Ay adlarını sıralı liste şeklinde hazırlayalım, <ol> <li>Ocak <li>Şubat <li>Mart <li>Nisan <li>Mayıs <li>Haziran </ol> <ekran_019.tif> Listeleme işlemi ilk liste öğesine (list item ) 1 numara verilerek başlatılıyor. 1 yerine a, A gibi harf kullanmak istersek veya listeyi 1'den değil de başka bir sayıdan başlatmak istersek <ol> etiketinin parametrelerine başvururuz. <ol> etiketi ile kullanabileceğimiz üç adet parametre vardır; start, type ve compact. Bunlardan start parametresi listenin 1 yerine başka bir sayı ile başlamasını sağlıyor. Örneğin <ol start="5"> listelemeyi 5 numaradan başlatır. type parametresinde listeleme sistemini belirtiyoruz. Kullanılışı: type=1|A|a|I|i Listeleme sisteminin rakamlardan oluşması için type="1", büyük harflerden oluşması için type="A", büyük Romen rakamları için type="I" ve küçük Romen rakamları için type="i" kullanıyoruz. Listelemenin E harfinden başlaması için nasıl bir kod kullanmak gerekir? Bu durumda iki parametreye birden başvuruyoruz. Listede büyük harfler kullanılacağını bildirmek için type="A" ve alfabenin 5. elemanı olan "E" den başlanması için start="5" komutlarını kullanmalıyız. <ol type="A" start="5"> Son parametre olan compact liste öğeleri arasındaki satır aralığının asgarî olmasını sağlıyor. Bu parametrenin kullanımında görüntünün değişmediğini görebilirsiniz. Bu parametre daha çok tanımlama listelerinde işe yarayabilecek bir parametredir. Sırasız Listeler (Unordered List ) : <ul>…</ul> Bu tip listelemede liste öğelerinin başına rakam veya harf değil de içi boş daire (disc ), içi dolu daire (circle ) veya kare (square ) şekillerinden birisi gelir. Ay adlarından oluşan listemizi sırasız liste düzeninde hazırlayalım; <ul> <li>Temmuz <li>Ağustos <li>Eylül <li>Ekim <li>Kasım <li>Aralık </ul> <ekran_020.tif> <ul> etiketinde kullanabileceğimiz iki parametre vardır. Bunlar sıralı listelerdeki gibi compact ve type parametreleridir. type parametresine disc, circle ve square değerlerini verebiliriz. Kullanılışı: type=disc|circle|square <ul type="square"> <li>İlkbahar <li>Yaz <li>Sonabahar <li>Kış </ul> <ekran_021.tif> Tanımlama Listeleri (Definition List ) : <dl>...</dl> Bu liste biçimi önceki iki listelemeye göre biraz farklı. Liste öğelerinin başına rakam, harf veya herhangi bir şekil gelmiyor. Bunun yerine liste öğeleri sayfada biraz daha içeriden görüntüleniyor. Sıralı listeleri <ol>...</ol>, sırasız listeleri de <ul>...</ul> etiketleri arasına alıyor ve liste öğeleri için her ikisinde de <li> etiketini kullanıyorduk. Tanımlama listesini <dl>...</dl> arasına alırız. Fakat diğer iki liste türünden farklı olarak tanımlama listelerinde iki tip öğe vardır: Tanımlanan terim (<dt> ) ve tanımlama metni (<dd> ). En iyisi bir örnekle anlatalım: <dl> <dt>İlkbahar <dd>Mart <dd>Nisan <dd>Mayıs <dt>Yaz <dd>Haziran <dd>Temmuz <dd>Ağustos <dt>Sonbahar <dd>Eylül <dd>Ekim <dd>Kasım <dt>Kış <dd>Aralık <dd>Ocak <dd>Şubat </dl> <ekran_022.tif> Burada tanımlanan terim, örneğin Yaz, üç tanımlama metninden oluşuyor: Haziran, Temmuz, Ağustos. Bu listeyi oluşturup, Browser'ınızda inceleyerek, diğer listelerden farkını görmelisiniz. Yukarıda öğrendiğimiz üç türde listeyi karmaşık listeler hazırlamakta kullanabiliyoruz. İç içe dallanmış listeler düşünün. Bu mesela bir kitabın içindekiler listesi olabilir. <ol type="I"> <li>INTERNET <ol type="A"> <li>Internet'in Tarihçesi <li>World Wide Web <li>Browser'lar </ol> <li>HTML <ol type="A"> <li>HTML'e Giriş <li>HTML Nedir? <ol type="i"> <li>HTML'in Tarihçesi </ol> <li>Metinler <li>Grafikler <li>Renkler <ol type="i"> <li>16 Renk Tablosu <li>Tüm Renkler </ol> <li>Bağlantılar <li>Tab ar <li>Çerçeveler </ol> </ol> <ekran_023.tif> |
| BÖLÜM 4 Grafik ve Renkler Metin düzenlemekte kullanacağımız etiketleri öğrendik. Ancak Web sayfalarının metinden ibaret olmadığını da biliyoruz. İşte bu bölümde sayfa tasarımının bir parçası olan görsel unsurların HTML'deki yerini öğreneceğiz. HTML'de grafik ve renkler konusuna daha önce kısaca değinmiştik. Web'de kullanabileceğimiz iki (henüz yaygın olmayan ama hızla yaygın hale gelen PNG ve SVG'yi de sayarsak dört ) grafik biçimi olduğunu, bunların birbirlerinden farkını, nerede hangi biçimi kullanacağımızı az çok biliyoruz. Yine renkler konusundaki bilgilerimiz de hafızamızda canlı bir şekilde duruyor olmalı. Bu bölümde kullanacağınız grafik dosyalarını sabit diskinizde bulunan dosyalardan seçebileceğiniz gibi herhangi bir grafik işleme programı ile de hazırlayabilirsiniz. Usta Web tasarımcılarının gözdesi Photoshop'ı kullanmanız şart değil. Bu program sizde bulunmuyorsa Web grafiği hazırlamak için başka birçok programdan faydalanabilirsiniz. PaintShop Pro bir diğer yaygın kullanılan grafik programıdır. Macromedia Fireworks, Adobe ImageReady ve daha bir çok grafik programını kullanabilirsiniz. Şimdi Web'de renkler konusuna geçelim. Cevap arayacağımız ilk soru, Web sayfamızda hangi unsurları renklendirebileceğimiz olmalıdır. Metinlere <font> etiketinin color parametresini kullanarak renk verebiliyoruz. Fakat renk kullanımı elbette metinlerle sınırlı değil; sayfamızın ardalanına (background ) renk verebiliriz; sonraki konularda göreceğimiz tab arı kullanarak sayfada belli alanlar oluşturabilir ve bunların herbirine farklı renkler verebiliriz, bağlantıları (link ), metin satırlarının fonlarını da renklendirmek mümkündür. Şimdilik sadece sayfamızın arka planının (ardalan, fon ) rengini değiştirmeyi öğrenelim; yeri geldikçe yukarıda bahsettiğimiz diğer unsurlara nasıl renk vereceğimize değineceğiz. Bir sayfanın tümünün rengini <body> etiketinin bir parametresi olan bgcolor komutu ile atıyoruz. Daha önce <body> etiketini hep yalnız başına kullanmıştık. bgcolor, <body> etiketinde kullanılabilecek birçok parametreden biri. Yine yeri geldikçe bu parametrelere değineceğiz. Şimdi bgcolor'ın kullanımını görelim: kırmızı fon üzerine beyaz yazılar yazalım. <body bgcolor="#FF0000"> <font color="#FFFFFF" face="garamond" size="5"> <p><b>İstiklal Marşı</b></p> Dalgalan sen de şafaklar gibi ey şanlı hilâl! <br> Olsun artık dökülen kanlarımın hepsi helâl. <br> Ebediyyen sana yok, ırkıma yok izmihlâl: <br> Hakkıdır, hür yaşamış, bayrağımın hürriyet; <br> Hakkıdır, Hakk'a tapan, milletimin istiklâl! <br> </font> </body> <ekran_024.tif> Renk kodunu daha önce öğrendiğimiz diğer yöntemle belirleyebiliriz. Son olarak bir ipucu: bgcolor parametresini iyi ezberleyin renklendirme konusunda oldukça sık kullanacağımız bir komut. Grafik Etiketi: <img> İşte yepyeni bir etiket: <img>. ingilizce image kelimesinden bu etiketi aklınıza getirebilirsiniz. Web sayfalarında kullanacağımız grafik dosyaları Web sayfasını oluşturan kodlara gömülmez. Şimdi burada kafanız biraz karışıyorsa şöyle bir örnekle konuyu açıklayalım. Microsoft Word ile hazırladığınız belgelere grafik ekleyip böylece dosyayı kaydettiğinizde grafikler Word belgesini oluşturan dosyanın kodları arasına yazılır. Bunu iki satırlık bir Word dökümanına kocaman boyutlu bir grafik ekleyip sonra da dosyanın boyutunu kontrol ettiğinizde görebilirsiniz. İşte HTML'de böyle bir durum söz konusu değildir. Web sayfası oluşturan kişinin yapması gereken tek şey grafik dosyasının diskteki yolunu belirten kodu yazmaktır. Bunu da <img src=...> etiketi ile yapıyoruz. Dosya yolunu src (source=kaynak anlamında ) parametresi karşılığına yazıyoruz. İşte bununla ilgili bir örnek: <img src="c:belgelerimaile.jpg"> Herhalde bu örnekle birlikte birçok şey açıklık kazandı. Bu kodun anlamı "C: adlı sabit diskte, kök dizinde bulunan 'belgelerim' klasörü içindeki 'aile.jpg' dosyasını sayfaya yerleştir!" demektir. (Bu arada bölü işaretinin yönüne dikkat ediniz. ) Fakaat, işler herzaman böyle yürümez. Bedava veya paralı Internet alanı veren bir firmadan aldığımız yerin gerçekte Server'ın hangi sabit diskinin hangi klasöründe durduğunu bilmemiz çok zor hatta neredeyse imkansızdır. Ayrıca Internet'te bir öğeye, bulunduğu sabit disk ve bu diskteki yolla göndermede bulunmak güvenlik açısından da yanlış olur. Bu sebeplerden dolayı <img src=...> etiketini farklı bir şekilde kullanırız. Bu kullanım tarzında dikkat edilmesi gereken nokta o anda çalışan-görüntülenen HTML dosyasının sabit diskteki yerinin esas alındığıdır. Bu ne demek? Şu demek; şayet HTML dosyası ile grafik dosyası aynı dizin içerisindelerse bu grafik dosyasına gönderme şu kodla yapılır: <img src="resim.gif"> Gayet kolay değil mi? Sabit disk yok, klasör yok, uzun dosya yolları yok; sadece grafik dosyasının adı var. Peki ama henüz herşey bitmedi. Diyelim ki bir otomobil sitesi hazırlıyorsunuz ve elinizde sayfanıza koymak istediğiniz onlarca otomobil resmi var. İstiyorsunuz ki bu onlarca resim dosyası diğer dosyalara karışmadan otomobiller adlı dizinde dursun. Bu dizinde bulunan bmw520i.jpg dosyasına erişmek için kullanacağımız kod şöyle olmalı: <img src="otomobiller/bmw520i.jpg"> Bu kod, "Şu anda çalışan HTML dosyasının bulunduğu klasörde 'otomobiller' diye bir dizin var; onun içinde de idealim olan otomobilin, bmw520i.jpg isimli bir dosyada resmi var; onu sayfaya koy!" anlamına geliyor. (Browser'ın sizin ideal otomobilinizle ilgilenmesini beklemiyorsunuz, değil mi? ) Bu şekilde içiçe bulunan klasörlerin herbirine ulaşmamız mümkündür. Şu örnekleri inceleyin: <img src="otomobiller/bmw/bmw320i.jpg"> <img src="otomobiller/station/renault/toros.jpg"> İstediğimiz grafik dosyasına hangi alt klasörde olursa olsun ulaşabiliyoruz; peki üst klasörlere nasıl erişeceğiz? Bunun için kullanacağımız kod da 3 karakterden ibaret: "../". Kaynak belirtirken kullandığımız src parametresindeki her bir "../" ifadesi bizi bir üst klasöre götürür. Aynı şekilde istediğimiz kadar üst klasöre bu yolla ulaşabiliriz. <img src="../otomobiller/volvo.jpg"> Bunun anlamı; "Bir üst dizine çık, orada 'otomobiller' dizinini bul; içindeki volvo.jpg dosyasını al!" demektir. Aynı şekilde; <img src="../../otomobiller/rover.jpg"> bizi iki dizin üste çıkartır. Grafiklere, Internet adreslerini kullanarak ulaşmamız da mümkündür. Örneğin Web sayfamızda kullanmak istediğimiz bir sitenin logosunu o siteden almak istersek src parametresi karşılığına grafik dosyasının URL'ini yazarız: <img src="http://www.webteknikleri.com/logo.gif"> Bu konuyla ilgili bir kullanım şekli daha var. O da doğrudan bölü "/" işaretini kullanmaktır. Bu yöntem bizi doğruca kök dizine (root ) götürür. Tabi eğer dosyalarınız Web Server'da ayrılmış bir klasörde durmuyorsa doğrudan sabit diskin kök dizinine ulaşırsınız. Web Server'da duran dosyalarda ise bu komut bizi sabit diskin değil, sitenin kök dizinine götürür. Bu farkı şöyle belirtelim; <img src="/otomobiller/peugeot.jpg"> komutu şayet sizin kendi bilgisayarınızda çalıştırılan bir HTML dosyasında ise c:otomobillerpeugeot.jpg dosyasına ulaşırsınız. Fakat bu sayfa, gerçek Internet sitesinde ise, Web Server buradaki kök dizini sitenin kök dizini kabul edeceğinden ulaşacağınız dosya sitenize ayrılan dizinde aranır. KUTU///////////////////////////////////////////////////////////// Kaynak Yazarken Ücretli Web Server'larda edindiğimiz site alanları, çoğunlukla c:Inetpubwwwroot dizininde bizim adımıza açılan bir alt-dizindir. Böyle bir durumda bizim Peugeot resmi, muhtemelen c:Inetpubwwwrootahmet_in_sitesiotomobillerpeugeot.jpg gibi bir yere sahip olacaktır. Bedava alan adı veren yerlerde de durum bunun aynısıdır. Mesela http://www.websamba.com/benimsayfam/ bizim kök dizinimizdir. Fakat ücretli veya ücretsiz, gerçek bir Web Server'da bize ayrılan yerin tam yolunu hemen hemen hiç bir zaman bilemeyiz. Bu sebepten dolayı, iyi bir alışkanlık, sayfalarımız kendi sabit diskimizde bile çalışacak olsa, grafik dosyalarına kaynak yazarken göndermeleri göreli olarak belirtmektir. KUTU BİTTİ//////////////////////////////////////////////////////// Farklı dizinlerde bulunan grafiklere ulaşma konusunu daha iyi kavramak için bilgisayarınızda klasörler oluşturup içlerine kendi grafik dosyalarınızı yerleştirin, sonra farklı klasörler içinde oluşturacağınız HTML dosyaları ile bu grafiklere ulaşmaya çalışın. İhtiyacınız olan tüm bilgi üst satırlarda. Yapmanız gereken şey bol bol pratik. Grafik Dosyasının Ebatları Artık herhangi bir yerdeki herhangi bir Web grafiğine HTML ile nasıl ulaşacağımızı biliyoruz, ama herşey bununla bitmiyor. <img> etiketinin birçok parametresi var; src bunlardan sadece biri. Diğer iki parametre, grafik dosyasının piksel cinsinden ebatlarını belirten width (genişlik ) ve height (yükseklik ) ölçüleridir. Biraz önceki örneklerimizde bu iki parametreyi kullanmadık. Çünkü sayfalarımızdaki resimlerin ebadını belirtmemiz şart değil. Öyleyse bu parametreler ne işe yarıyor? Web sitelerini dolaşırken dikkatinizi çekmiş olmalı. Bazı sayfalar yüklenme aşamasındayken sayfada oynamalar, kaymalar, yer değiştirmeler olur. İşte bunun başlıca nedeni bu iki parametrenin kullanılmamasıdır. Yüklenme aşamasında Browser sayfaya yerleştirilecek grafiğin ebatlarını bilemediğinden kendisi varsayılan yükseklik ve genişlikte geçici bir alan açar. Yüklenme önceliği metinlere ait olduğundan, grafikler yüklendikçe ve kendileri için ayrılan geçici alana sığamadıklarında bu yer değiştirme ve oynamalar gerçekleşir. İşte bahsettiğimiz bu iki parametre Browser'a bu alanı varsayılan değil, bizim belirttiğimiz değerlerle açmasını bildirir. Böylece yüklenme sırasında bahsettiğimiz durum ortaya çıkmaz. Hepsi bu kadar. Öğrendiklerimizle ilgili örneklere geçelim. <img src="manzara/yayla.jpg" width="150" height="80"> Bu kodla, yüklenecek resmin 150 piksel genişliğinde, 80 piksel yüksekliğinde olduğunu önceden Browser'a belirtmiş olduk. Peki bu değerleri nereden öğrenebiliriz? Elbette kullandığımız grafik editöründen. Başka bir yol da şöyle; komutu önce width ve height parametreleri kullanmadan verin. Sonra Browser'da bu dosyayı açıp Mouse imlecini grafiğin üzerindeyken sağ tıklayıp özellikler/properties' i seçin. Açılan pencerede resmin ebatlarını görebilirsiniz. 150 x 80 ifadesi width="150" height="80" anlamına gelir. <ekran_025.tif> KUTU///////////////////////////////////////////////////////////// Resmin Gerçek ve Görüntülenen Ebadı <img src="manzara/yayla.jpg" width="150" height="80"> komutuyla, gerçek ebadı sözgelimi 300x160 olan bir resmi, sayfamızda yüzde 50 küçültülmüş olarak görüntüleyebiliriz. Başka bir ifade ile <img src="..." width="..." height="..."> komutu Browser'a, gelmekte olan grafiğe ayıracağı yeri bildirirken, gelen resmi gerçek ebadı ne olursa olsun, enini-boyunu bu yere göre değiştirmesini de bildirebilir. Bir resmin en/boy orantısını bozacak bir ebada küçültülmesinin estetik sakıncalarını deneyerek görmek en doğru yol olsa gerek. Ancak büyük ebadda bir grafiği ziyaretçinin Browser'ına aktardıktan sonra, bunu daha küçük bir boyutta görüntületmenin Web tekniği açısından anlamı yoktur: büyük resmin ziyaretçiye aktarılması, mutlaka görüntülenen ebaddaki daha küçük resmin aktarılmasından çok daha uzun zaman alacaktır. Bir başka deyişle ziyaretçiyi büyük resmin bilgisayarına aktarılması için boş yere bekletmiş olacağız. Bir grafiği, kendi boyutlarından daha büyük olarak görüntülemeye çalışmanın da sakıncaları vardır. Bu durumda Browser, elinde mevcut resim bilgisini, bir takım aritmetik hesaplarla değiştirecek ve resmi büyütmeye çalışacaktır. Bunun birinci etkisi, resmin düz çizgilerinin basamaklı hale gelmesi, tonlar arasındaki aşamalı geçişlerin kaybolması ve resmin görsel değerinin azalması olacaktır. Bunun bir diğer sakıncası ise Browser'ın bu hesabı yaparken, sayfayı görüntüleme işlemine son vermesi ve uzunca bir süre, ziyaretçinin bilgisayarının adeta donmasıdır. Bu, bir çok ziyaretçinin bir daha bizim sitemize gelmemesi sonucunu ortaya çıkartır. Sonuç olarak, iyi bir Web tasarımcısı daima grafiklerini, sayfada yer vereceği boyutlarda kaydeder. Bütün grafik editing programları, bir resmi istediğiniz boyuta indirme imkanına sahiptir. KUTU BİTTİ//////////////////////////////////////////////////////// Şimdi hazır Mouse imlecini resmin üzerine getirmişken yeni bir parametre ile tanışalım: alt. Bu parametre grafiğe alternatif metin vermeye yarar ve etkisi iki şekilde görülür. Grafik, Server tarafından ziyaretçinin bilgisayarına gönderilmeden önce alt ile verdiğimiz metin grafiğe ayrılan alanda görüntülenir. Grafik yüklendikten sonra ise Mouse imleci grafik üzerine getirildiğinde küçük sarı bir pencere içinde bu metni görürüz. <img src="deniz.jpg" width="150" height="80" alt="Denizde akşam güneşi"> <ekran_026.tif> Milattan önceki devirlerde yani Browser'lar en fazla 16 renk görüntüleyebilirken, kullanıcılar sayfanın daha hızlı yüklenmesi için Browser'ının resim gösterme seçeneğini kapatırdı. Zira amaç cıvıl cıvıl reklam banner'larıyla donatılmış bir sayfaya erişmek değil, büyük olasılıkla bir üniversitenin sitesindeki araştırma tezini filan incelemekti. Şayet Browser ayarlarından, grafik gösterme seçeneği kapatılmışsa bile verilen alternatif metin ile grafik hakkında kullanıcının bir fikri olması sağlanabilirdi. Bu kadar tarih bilgisinden sonra diğer parametrelerimize geçelim. Resimleri Hizalama Metinler konusunda gördüğümüz align parametresini hatırladınız, değil mi? Tüm hizalamalarda olduğu gibi resimlerin hizalanmasında da bu parametreyi kullanıyoruz. align = absbottom | absmiddle | baseline | bottom | center | left | middle | right | texttop | top Görüldüğü gibi bu parametrenin <img> etiketi ile kullanımında alabileceği değerler oldukça fazla. Herbirinin ne işe yaradığını aşağıdaki örneği inceleyerek öğrenebilirsiniz; burada kullandığımız grafik dosyaları yerine siz kendi grafiklerinizden herhangi ikisini kullanabilirsiniz. Yalnız bu grafiklerden biri diğerine göre daha büyük ebatlarda olmalı. <img src="fax.gif"> Metin <img src="disket.gif"> <p>Hizalama parametresi kullanmadan iki grafik ve metin bu şekilde görüntülendi.</p> <hr> <img src="fax.gif" align="top"> <img src="disket.gif"> <p><b>align="top"</b> - Grafikler üst kenara dayalı olarak görüntüleniyor. (üst kenar sınırı, burada büyük resme göre belirleniyor )</p> <hr> <img src="fax.gif" align="middle"> Metin <img src="disket.gif"> <p><b>align="middle"</b> - Diğer nesnelerin (ikinci grafik ve metin ) alt sınırı birinci resmin orta noktasına denk düşecek şekilde ayarlandı.</p> <hr> <img src="fax.gif" align="bottom"> Metin <img src="disket.gif"> <p><b>align="bottom"</b> - Tüm nesneler aynı taban hizasına sahip olacak şekilde görüntülendi. Bu aynı zamanda varsayılan (default ) değerdir. Hizalama parametresi kullanmadan elde ettiğimiz görüntüyle bu örneği kıyaslayın.</p> <hr> <img src="fax.gif" align="absmiddle"> Metin <p><b>align="absmiddle"</b> Resmin orta kenar hizası, metin satır hizasının (metin satır hizası ile metin hizası farklı şeylerdir. Mouse imleci ile metni tarayın oluşan seçili alan metin satırıdır. ) orta noktası ile kesişiyor. absmiddle'ın middle'dan farkı; middle'da metnin orta noktası esas alınırken absmiddle'da metin satırının orta noktası esas alınır.</p> <hr> <img src="fax.gif" align="absbottom"> Metin <p><b>align="absbottom"</b> Resmin alt kenarı ile metin satırı alt kenarı aynı hizada görüntülenir. Bu örneği daha iyi anlayabilmek için sayfayı seçili hale getirin (Ctrl+A ) metin satırı ile resim alt kenarı aynı hizadalar, tüm sayfa seçili iken align="bottom" örneğini incelerseniz, burada esas alınanın metin satırı değil metnin kendisi olduğunu görebilirsiniz.</p> <hr> <img src="fax.gif" align="texttop"> Metin <img src="disket.gif"> <p><b>align="texttop"</b> Resim ve metin satırının üst kenarları aynı hizaya sahip, metinden sonra gelen ikinci resim ise metinle aynı alt kenar hizasına sahip olacak şekilde görüntülendi.</p> <hr> <img src="fax.gif" align="baseline"> Metin <img src="disket.gif"> <p><b>align="baseline"</b> Tüm nesnelerin taban hizaları aynı seviyede görüntüleniyor, </p> <hr> <img src="fax.gif" align="center"> Metin <img src="disket.gif"> <p><b>align="center"</b> middle değeri ile aynı neticeyi veriyor, </p> <hr> <img src="fax.gif" align="left"> <p>Metin</p> <br clear="left"> <br> <p><b>align="left"</b> Resmi sola dayadı ve paragraf etiketi kullanmamıza rağmen metin yeni satırda başlamadı, fakat metnin üzerinde bir satırlık boşluk oluştu. Böylece tablo kullanmadan grafik ve resimleri iki sütun halinde kullanmak mümkün olmaktadır.</p> <hr> <img src="fax.gif" align="right"> <p>Metin</p> <br clear="right"> <br> <p><b>align="right"</b> Resmi sağa dayadı. left parametresi ile oluşturulan etkinin aynısını burada da görüyoruz. Tek fark left ile resim sola dayanırken right değerinde sağa dayanıyor.</p> <ekran_027.tif> Hizalama parametresinin alabileceği değerlerin çokluğu aklınızı karıştırmasın, çoğu zaman bu değerlerden left, right ve middle gibi ikisini-üçünü kullanırız. Bir Web sayfasına yapısal istikrar kazandırmak için hizalamaları çok daha etkin biçimde tab ar yardımıyla yapmayı ileri konularda göreceğiz. Burada önem kazanan bir önemli etiket, kodların arasında gördüğünüz <br clear="..."> etiketi. Left ve right gibi değerlerle resmi hizaladığımız zaman oluşturduğumuz sütun etkisini bu etiketle kaldırıyoruz. Bu parametre üç değerle kullanılabilir: clear = left | right | all Left ve right, align parametresinde kullandığımız değere göre etki gösterirken all değeri her ikisini de kapsar. hspace - vspace Parametreleri Bu parametreler resmin sağ-sol-üst ve altında belirtilen piksel boyutunda boşluklar bırakır. Özellikle align parametresi ile resim ve metinleri birlikte kullandığımızda hspace ve vspace'den yararlanabiliriz. <img src="disket.gif" align="left">Resim ile metin normal aralıkta. <br><br><br><br> <img src="disket.gif" align="left" hspace="25">Resmin sağında ve solunda 25'er piksel boşluk oluştu. <ekran_028.tif> <img src="disket.gif" valign="top" vspace="30">Resmin üstünde ve altında 30'ar piksel boşluk oluştu. <br><br><br><br> <img src="disket.gif" valign="top">Resim ile metin normal aralıkta. <ekran_029.tif> border Parametresi Bağlantı kurulmuş bir resme border değeri verilmediği taktirde resmin etrafında varsayılan olarak mavi renkte bir çerçeve oluşur. Bu, çoğu tasarımcının istemediği bir etkidir ve bu çerçeveyi yok etmek için border parametresine "sıfır" değeri verilir. Bağlantılar konusuna ileride değineceğiz fakat burada anlatmak istediğimiz etkiyi oluşturmak için bağlantı verilmiş bir resim kullanalım: <a href="#"><img src="disket.gif"></a> Dosyayı Browser'da açtığınızda mavi çerçeveyi farketmiş olmalısınız. Şimdi çerçeveyi yok edelim: <a href="#"><img src=" disket.gif" border="0"></a> border parametresi, aslında çerçeveyi yok etmeye değil çerçeve kalınlığını belirlemeye yarıyor. Tabi sıfır değeri verildiğinde çerçeve yok oluyor. Başka değerler vererek de bu parametreyi kullanabiliriz. <a href="#"><img src="disket.gif" border="5"></a> <ekran_030.tif> Sayfa Fonunda Resim Kullanmak En çok merak edilen konulardan bir diğeri sayfa fonunda resim kullanmak olsa gerek. Bunun için gerekli kod <img src="..."> etiketinden daha farklı. <body> etiketinin background parametresini kullanıyoruz. <body background="fonresmi.jpg"> Verdiğimiz fon resminin sayfa boyunca tekrar ettiğini göreceksiniz. Bunu engellemek için tüm sayfayı kaplayan bir artalan resmi kullanmak da pek akıllıca değil. Eğer fon resminin tekrar etmesini istemiyorsak bunun için kullanabileceğimiz bir kod var: bgproperties="fixed" <body background="fonresmi.jpg" bgproperties="fixed"> Ama bu kodun yalnızca Internet Explorer'da çalıştığını belirtelim. Netscape'de fon tekrarı devam edecektir. Peki bir dezavantaj gibi görünen bu durumu avantaja çeviremez miyiz? Düşünün: 2x2 piksellik bir grafikle pekala güzel background'lar hazırlanabilir. 2 piksel'in yarısı açık tonlu yarısı daha koyu tonlu bir grafik sayfa boyunca tekrar ettiğinde hoş bir görünüm oluşabilir. Veya 1024 piksel genişlik ve 2 piksel yüksekliğinde bir grafik de bu amaçla kullanılabilir. Soldan ilk 120-150 piksel'i renklendirip geri kalan kısmı beyaz bırakarak Web'de birçok sayfada örneğini gördüğümüz türde sayfalar hazırlayabiliriz. Üstelik bu küçük ebatlardaki grafikler dosya boyutu itibariyle de sayfa yüklenmesine pek yük getirmez. <ekran_031.tif> <ekran_032.tif> |
| BÖLÜM 5 Bağlantılar Web sayfaları bugünkü şöhretini belki de HTML'in bağlantı-köprü-link özelliğine borçlu. Bir metne-resme-nesneye tıklıyorsunuz, karşınıza başka bir metin-resim-nesne geliyor. Internet'te en çok yaptığımız şey de bu değil mi? Metinler ve grafikler konusunu bitirdik artık bunlar arasında nasıl bağlantı kuracağımızı göreceğiz. Biraz önce <img> etiketinin border parametresini öğrenirken göz ucuyla bağlantı etiketini inceledik. Bu etiket <a> (anchor ) etiketidir. Ancak bu etiketi kullanmak için parametrelere ihtiyaç duyuyoruz. En genel anlamıyla iki türde bağlantı kurabiliriz: sayfa içinde (dahili ) ve sayfalar arasında. Her iki durumda da kullanacağımız parametre href parametresidir. Burada resimler.htm dosyasına nasıl bağlantı kurulduğunu görüyorsunuz: <a href="resimler.htm">Resim arşivi için tıklayınız</a> <a href="...">...</a> etiketleri arasına alınan metin, resim veya nesneler bağlantı özelliği kazanırlar. Bağlantıya tıklandığında gidilecek kaynağın HTML dosyası olması da şart değildir. Bu örneğin bir JPEG grafik de olabilir, midi biçiminde bir melodi hatta bir zip arşivi de. Browser şayet kaynak dosyayı çalıştırabilirse (grafik, müzik, video dosyaları gibi ) kullanıcıya herhangi bir şey sormadan dosyayı kendisi açar. Fakat .zip, .exe, .mp3 gibi Browser'ın çalıştıramadığı dosyalar sözkonusu olduğunda ne yapmak istediğinizi soran bir pencere açılır. Bu penceredeki seçeneklerle dosyayı ilgili program kanalıyla açabilir/çalıştırabilir veya diskinize kaydedebilirsiniz. Değişik dosya türlerine bağlantı kurarken de aynı kodu kullanırız: <a href="album.zip">Foto albümünü diskinize çekmek için tıklayın</a> <a href="arastirma.doc">Konuyla ilgili son yapılan araştırma sonuçları</a> <a href="baris.mp3">Sanatçının yeni çıkan albümünden bir tanıtım</a> Şimdi de dahili bağlantıların nasıl hazırlandığını görelim. Dahili bağlantı oluştururken de <a href> etiketini kullanıyoruz fakat bu defa bir dosyaya bağlantı vermediğimiz için bağlantı kurmak istediğimiz metin, grafik, nesneye bir isim veriyoruz ki bu isimle kendisine atıfta bulunabilelim. Bu işi de <a> etiketinin name (isim ) parametresi ile yapıyoruz. Daha sonra <a href> etiketini kullanırken eşittir (= ) karakterinden hemen sonra # (diyez/çatal ) sembolünü kullanırız. Uzun bir sayfa düşünelim, bu sayfanın en altında bir kelime tıklandığında sayfa başına giden bir bağlantı kuracağız. <a name="sayfabasi">Personel Web Server</a> <p> Microsoft'un yeni teknolojisi olan Active Server Pages (ASP ) tekniğini kullanan dosyaları hazırlayıp çalıştırabilmek için koca koca serverlara, ateş pahası yazılım ve işletim sistemlerine ihtiyacınız yok. Windows 95/98 için geliştirilen ve Windows 95/98 CD-ROM'u içinde yer alan PWS, bu teknolojiyi masaüstü bilgisayarlarımıza taşıyor. PWS, Web sayfalarımızı kontrol etmek ve geliştirmek için kullanabileceğimiz bir masaüstü server (sunucu ) yazılımıdır. </p> ... ... ... <a href="#sayfabasi">Sayfa Başına Dön</a> Burada dikkat edilmesi gereken nokta sayfanın yeterince uzun olup olmadığıdır. Eğer Browser penceresinin sağındaki kaydırma çubuğu oluşmamışsa linke tıklandığında hiçbir şey olmaz çünkü zaten sayfa başındayız. Aynı şekilde grafiklere de isim verilerek dahili bağlantı kurulabilir. <h2>Fotoğraf galerisine hoşgeldiniz</h2> <p>Çiçekler</p> <a href="#gul">Güller</a> <a href="#karanfil">Karanfiller</a> ... ... ... <a name="gul"> </a> <img src="gul01.jpg><br> <img src="gul02.jpg><br> <img src="gul03.jpg><br> ... ... ... <a name="karanfil"> </a> <img src=" karanfil01.jpg><br> <img src=" karanfil02.jpg><br> <img src=" karanfil03.jpg><br> İlk örneğimizin aksine bu sefer anchor'ları kodların daha ileri kısımlarında tanımladık. Görüyoruz ki, nerede tanımlanmış olursa olsun anchor'la işaretlenmiş bir nesneye ulaşabiliyoruz. Şimdi şu örneğe bir göz atın; <a href="/otomobiller/bmw.htm#320i">... Bu kodla harici bir dosya içerisindeki anchor'a bağlantı verilmiş. Harici dosya kök dizinde (root ) bulunan otomobiller klasörü altındaki bmw.htm, anchor ise "320i". Bu bağlantıya tıklandığında önce bmw.htm dosyası açılır, ardından 320i isimli anchor sayfa başına gelene kadar sayfa kaydırılır. Bu örneği bilgisayarınızda denemek için uzun metin içeren bir sayfa oluşturun ve sayfanın sonlarına doğru bir nesneye anchor verin. Sonra başka bir dosyadan bu anchor'a yukarıda öğrendiğimiz metotla bağlantı kurun. <a>...</a> etiketleri arasındaki nesnenin bağlantı mı anchor mı olacağını belirleyen href ve name parametrelerinden sonra tek tek diğer parametreleri ele alalım. accesskey Parametresi <a href="periyodiktablo.htm" accesskey="p">Elementlerin periyodik tablosu için tıklayınız</a> Bu parametre ile Mouse dışında klavye tuşları ile bağlantıya ulaşmak mümkündür. Fakat bu örnekte tanımladığımız "p" tuşuna basmak hiçbir etkiye sebep olmaz. Çünkü accesskey ile tanımlanan tuşlar tek başlarına kullanılmazlar. Alt tuşu ile birlikte p tuşuna bastığımızda Browser'ın durum çubuğunda (status bar-Browser penceresinin alt kısmındaki çubuk şeklinde bölüm ) bağlantının verildiği dosya görüntülenir. Tıpkı Mouse imlecini bir bağlantının üzerine getirdiğimizde olduğu gibi. Ardından "enter" tuşuna basıldığında bağlantı tıklandı demektir. Bağlantı verilen dosya açılır veya çalıştırılır. charset Parametresi Hedef dosyanın karakter setini belirtmekte kullanılır. Sayfa karakter setini meta etiketleri ile belirtmeyi kitapçığın başında öğrenmiştik. Bu kod aynı zamanda sayfadaki Türkçe karakterlerin düzgün görüntülenebilmesi için her sayfada yer alması gereken bir koddu. Türkçe karakter setini belirten windows-1254 ve iso 8859-9 değerleri dışında diğer dillerin de özgün değerleri vardır. İşte charset parametresi yaygın olarak kullanılmamakla birlikte kendi sayfalarımız içerisinde değil de örneğin yabancı dilde hazırlanmış bir sayfaya bağlantı verirken kullanılabilir. <a href="http://msdn.microsoft.com" charset="iso8859-1">Microsoft'un yazılım geliştiriciler için hazırladığı site</a> title Parametresi Bağlantı kurulan dosyaya başlık vermekte kullanılır. Internet Explorer kullanıcıları Mouse imlecini bağlantı üzerine getirdiklerinde sarı bir pencere içerisinde (<img> etiketinde kullandığımız alt parametresinde olduğu gibi ) title'da verilmiş metni görebilirler. Netscape ise title parametresine karşı herhangi bir tepki göstermez! <a href="http://www.pclife.com.tr" title="Aylık Bilgisayar derginiz">PC Life</a> <ekran_033.tif> target Parametresi Bağlantı verilen dökümanın hangi pencere veya çerçevede açılacağını belirtir. Bu parametre özellikle çerçeve yapısı içeren sayfalarda kullanılıyor. Görüntülenen sayfayı çerçeve (frame ) kullanarak birkaç parçaya ayırmışsak, target parametresi ile çerçevelerden birindeki bağlantının tıklanmasıyla başka bir çerçevenin içeriğinin değişmesini sağlayabiliriz. Bunun dışında target parametresine verilebilecek diğer değerlerle frame yapısının iptal edilmesini, yine bağlantının kendi açtığımız pencerede görünmesini sağlayabiliriz. target parametresinin alabileceği değerler şunlardır; target = 'pencere veya çerçevenin adı' | _blank | _self | _parent | _top Buradaki değerlerden 'pencere veya çerçeve adı'nı çerçeveler konusunda ele alacağız. _blank değeri bağlantının isimsiz yeni bir pencerede açılmasını sağlar, _self değeri bağlantının aynı pencere veya çerçevede açılmasını sağlar, bu değer aynı zamanda varsayılan (default ) değerdir. _parent, hiyerarşik yapıda (örneğin çerçeveyi oluşturan dosyalardan birisi yeni bir çerçeve oluşturuyorsa veya çerçeveler tanımlanırken birden fazla frameset kullanılmışsa ) çerçeveler sözkonusu olduğunda bağlantı, mevcut frameset'i oluşturan bölgede görüntülenir, aksi durumda _self değeri ile aynı sonucu verir. _top, mevcut sayfadaki tüm frame yapısını kaldırarak bağlantıyı açar. Şayet sayfada çerçeve yapısı bulunmuyorsa _self değeri ile aynı sonucu verir. Örnekler; <a href="http://www.webteknikleri.com" target="_blank">... <a href="galeri.htm" target="icerikler">... <a href="anasayfa.htm" target="_top">... Bağlantılarda Farklı Renkler Kullanmak Aksi belirtilmediği sürece sayfadaki tüm bağlantılar default renk olan mavi ile gösterilir. Şayet bağlantı tıklanmışsa bu bağlantı artık ziyaret edilmiştir ve farklı bir renkle, mor ile gösterilir. Bir üçüncü durum da bağlantının aktif olma durumudur. Bağlantıyı tıklayıp Mouse sol tuşunu basılı tuttuğumuzda bağlantı aktif vaziyette sayılır. Yine bir bağlantıyı tıklayarak yeni sayfaya gidildiğinde ve Browser'ın back/geri butonunu kullanarak önceki sayfaya dönüldüğünde aktif bağlantıyı farklı rengiyle gözleyebiliriz. Şimdi bağlantıların bu üç durumuna ayrı ayrı renk atamayı görelim. Bunu <body> etiketinin parametreleri ile yapıyoruz. <body link="#ff0000" vlink="#000000" alink="#0000ff"> Bu kod ile sayfada kullanılan tüm bağlantıların rengi değiştirilmiş olur. link="#ff0000" değeri bağlantıların kırmızı renkle gösterileceğini, vlink="#000000" değeri ziyaret edilmiş bağlantıların siyah olacağını, alink="#0000ff" değeri de aktif linklerin mavi olacağını belirtiyor. Renk kullanımdaki genel kurallar burada da geçerliğini koruyor. Yani heksadecimal değerler kullanılabildiği gibi İngilizce renk adlarını da kullanabiliriz. Aslında bağlantıların bir dördüncü durumu da vardır. Bu durum Mouse imlecini bağlantının üzerine getirdiğimizde ortaya çıkar. Bu duruma hover diyoruz. Yalnızca Internet Explorer kullanıcıları hover durumunu gözleyebilirler. Hover kontrolünü HTML etiket ve parametreleri ile yapamıyoruz, bunun için CSS (Cascading Style Sheets/Stil şablonu ) tekniklerinden yararlanmak gerekiyor. Resim Haritaları (Image Map ) Bazen bir Web sayfasında bir resim ya da fotoğrafın üzerinde tıklanabilir alanlar oluşturulduğunu görürsünüz; bu noktalardan birini tıkladığınızda Browser'ınız sanki <a> etiketi ile bir bağlantı sağlanmış gibi, hedef sayfa, yer veya nesneye gider. Hatırlarsanız <a href> etiketi ile bir resme tek bir bağlantı verebiliyorduk. İşte resim haritaları ile resmin farklı bölgelerine farklı bağlantılar vermek mümkün hale geliyor. Resim haritaları kullanım tekniğindeki farklılığa dayanarak iki çeşittir: 1. İstemci taraflı (client-side ) 2. Sunucu taraflı (server-side ) Resmin üzerine Mouse ile tıklandığında, tıklanan noktanın koordinatları ziyaretçinin Browser'ı tarafından aranıp bulunuyorsa, buna client-side resim haritası denir. Daha etkin çalışır; daha hızlıdır. Fakat eski tür Browser'lar tarafından desteklenmez. Ziyaretçinin resimde tıkladığı noktanın koordinatları Sunucu tarafından aranıp bulunup, sadece sonuç Browser'a gönderilecekse, buna Sunucu-taraflı resim haritası denir. Yavaş çalışır; fakat eski tür Browser'lar sadece bu tekniği kullanabilirler. Resim haritası hazırlamak zahmetli bir iştir. Bu yüzden sırf bu iş için üretilmiş programlar bulunuyor. Ayrıca MS Frontpage, Macromedia Dreamweaver, HomeSite gibi HTML editörleri ile resim haritaları kolay bir şekilde hazırlanabiliyor. Bir resim haritası hazırlamak için, Mouse imlecini resim üzerinde dolaştırdığımız sırada imlecin koordinatlarını gösterebilen bir grafik editörüne ihtiyacımız var. Kullandığınız programın böyle bir özelliği bulunmuyorsa artık o programı yeni sürümüyle değiştirmenin zamanı gelmiş demektir. Örneğimizdeki ekran görüntüleri Photoshop'a ait. Ancak diğer grafik editörleri ile koordinatları benzer şekilde saptayabilirsiniz. Şimdi aşağıdaki kodları birlikte binceleyelim: <img src="siteharitasi.gif" usemap="#harita" border="0"> <map name="harita"> <area href="anasayfa.htm" shape="rect" coords="11,16,102,37"> <area href="linkler.htm" shape="rect" coords="11,55,83,75"> ... </map> <ekran_034.tif> Haritada kullanacağımız resmi <img> etiketi ile sayfaya yerleştiriyoruz; ancak burada yeni bir parametre kullanıyoruz: usemap. Bu parametrenin değeri olarak, daha sonra hazırlayacağımız haritaya vereceğimiz ismi, başına # sembolünü ekleyerek, yazıyoruz. Harita hazırlama işini başlatan etiket ise, <map> etiketi. <map name="..."> ... </map> etiketleri arasında resim üzerindeki bölgeleri ve bu bölgelerin her birinin bağlantılarını tanımlarız. Tıklanabilir özellikler kazandırmak istediğimiz bölgeleri <area> etiketi ile belirtiriz. Bu etiketin coords ve shape parametrelerine dikat edin. shape İngilizce şekil anlamına geliyor. Bu parametreye örnekte verdiğimiz rect değeri ise rectangular yani dikdörtgen alan tanımlanacağını bildiriyor. Dikdörtgende tanımlanabilecek 4 nokta (köşeler ) bulunduğuna göre bu noktaların koordinatlarını da coords parametresinde belirtiyoruz. (Koordinatları grafik editöründe nasıl bulacağımıza değineceğiz. ) shape parametresi ile başka şu alanlar tanımlanabilir: shape = circle | rect | poly circle daire biçiminde alan oluşturur. 3 adet koordinat tanımlamak gerekir. (dairenin merkez koordinatı ve piksel olarak yarıçap uzunluğu ) rect dikdörtgen alan oluşturur. 4 köşe için koordinat değeri verilir. poly çokgen biçiminde alan oluşturur. Çokgenin köşe sayısı kadar koordinat tanımlanır. Oluşturulan alanın şekline göre koordinat sayısına dikkat etmek gerekiyor. Şimdi de grafik editörü ile koordinatları nasıl bulacağımızı görelim. <ekran_035.tif> Mouse imlecini resim üzerinde gezdirdiğimizde imleç koordinatlarını Photoshop'ın info penceresinde görebiliriz. Siz de kendi grafik editörünüzün pencere ve menülerini karıştırarak imleç koordinatlarını nasıl bulacağınızı öğrenebilirsiniz. Örneğin 100x200 piksel ebatlarında bir resmi ele alalım. Koordinatları (x,y ) biçiminde ifade ediyoruz. <ekran_036.tif> 0,0 noktası resmin sol üst köşesidir. Sağ üst köşe 0,200 sol alt köşe 100,0'dır. Şimdi örnek haritada kullandığımız resmin koordinatlarını nasıl bulduğumuzu inceleyelim. Photoshop gibi, imlecin resim üzerindeki koordinatlarını bildiren bir grafik editing programında resmi açarak, imleci resim üzerindeki "anasayfa" yazısının sol üstüne getirip koordinatları okuyoruz. Bu değer x,y biçiminde iki sayıdan ibarettir. Bizde bu değer 11,16 olarak gözüküyor (Ekran görüntüsü üzerindeki 1 noktası ). Şimdi de imleci aynı yazının sağ altına getiriyoruz. Okunan değer: 102,37 (Ekran görüntüsü üzerindeki 2 noktası ). Böylece birinci dikdörtgen alanın koordinatlarını öğrendik. İlk ve son okuduğumuz 4 değeri sırayla coords parametresine yazıyoruz: <ekran_037.tif> coords="11,16,102,37" Aynı şekilde diğer bağlantılar için tanımladığımız alanın koordinatlarını da bulabiliriz. shape="circle" ile tanımladığımız daire şeklindeki alanın koordinatlarını bulurken Mouse imlecini alanın merkezi olmasını istediğimiz noktaya getiriyoruz ve değerleri okuyoruz. Üçüncü koordinat değeri olan yarıçap uzunluğunu belirlerken de Mouse imlecini dikey veya yatay olarak yeterli gördüğümüz miktarda hareket ettirirken oluşan fark değerini kullanıyoruz. Çokgen görünümlü alanlar için kullandığımızı shape="poly" parametresinde de imleci tek tek köşelere getirip bu değerleri coords parametresine sırayla yazıyoruz. BÖLÜM 6 Tab ar Ve nihayet geldik HTML sayfasının inşa iskelesi olan tab ara. Bu satırlara gelene kadar hep öğrendiklerinizi hayallerinizdeki Web sayfaları ile kıyasladınız ve hep eksik kalan bir şey vardı; sütunlu yapıda sayfalar nasıl oluşturuluyor? HTML etiketlerinden birçoğunu öğrendik: böylece alt alta satırlardan oluşan, soldan sağa doğru doldurulan sayfalar hazırlayabiliyoruz. Fakat bu unsurlarla hazırladığımız sayfalarımız tabir yerinde ise bir iskeletten mahrum. Tablo, diğer bütün görsel tasarımlarda ve sayfa düzenleme işlerinde olduğu gibi HTML'de de "bilgi sunma aracı" olarak geliştirilmiştir. Fakat biz tabar için 'inşa iskelesi' tabirini kullandık; çünkü tabar, HTML'de bizi 'alt alta satırlardan oluşan, soldan sağa doğru doldurulan' sayfa yapısından kurtaran tek araçtır. Doğrusu bunun için tabarı biraz da amaçlarının dışında kullanıyoruz diyebiliriz. Burada bahsedip durduğumuz tablo sizin aklınızdaki satırlı-sütunlu yapıdan daha farklı ve daha fazlası değil. Şimdi şu iki ekran görüntüsünü inceleyin. <ekran_038.tif> <ekran_039.tif> Birinci örnekte bildiğimiz türde sıradan bir tablo görüyoruz; ikinci sayfa da tab ar kullanılarak oluşturulmuş bir sayfa. Ama birinci örnekteki gibi belirgin bir tablo yapısı görebiliyor musunuz? Hayır. İşte tabarı asıl amaçlarının dışında kullanmak da bu örnekteki gibi oluyor. İki sayfadaki tabarı oluşturan kodlar arasında temelde hiçbir farklılık yok. Konuyu daha iyi kavramak için ilk örneğimize geçelim. <table border="1"> <tr> <td>Hücre1</td> <td>Hücre2</td> <td>Hücre3</td> </tr> <tr> <td>Hücre4</td> <td>Hücre5</td> <td>Hücre6</td> </tr> <tr> <td>Hücre7</td> <td>Hücre8</td> <td>Hücre9</td> </tr> </table> <ekran_040.tif> Basit bir tablo oluşturmak hiç de zor değil. Bütün tablo yapısını içine alan <table> etiketinden başka burada dikkatimizi çeken iki etiket daha var; <tr> ve <td>. Kodları ve ekran görüntüsünü dikkatle incelersek, her bir tablo hücresinin (table data ) <td> ile ve tablo satırlarının da (table row ) <tr> ile oluşturulduğunu görürüz. Hücreler içerisinde metin, resim ve hatta başka tab ar bulunabilir. Tablo oluştururken ilkönce yeni bir hücre satırı açarız; bunu <tr> etiketi ile yapıyoruz. Sonra istediğimiz kadar tablo hücresini <td> etiketiyle oluşturup bu satırı </tr> ile bitiriyoruz. Bu şekilde istediğimiz kadar satır oluşturabiliriz. Yalnız burada dikkat edeceğimiz nokta bütün satırlardaki hücre sayısının ilk satırdaki hücre sayısına eşit olması gerektiğidir. Yani belirleyici olan bir anlamda birinci satırdır. Ancak bu sayıya bağlı kalmamak için hücreleri alt, üst ve yanlarında bulunan komşu hücrelerle birleştirmemiz de mümkün. İşte tab arı bir yapı iskeleti gibi kullanabilmemizin sırrı da burada yatıyor. Şimdi önce <table> etiketi ile sonra da <td> ve <tr> etiketleri ile kullanabileceğimiz parametreleri inceleyelim. border Parametresi Bu parametre tablonun kenar çizgileri ile hücre çerçevelerini kontrol eder. border="1" değeri bu çerçevelerin görünür durumda ve asgari kalınlıkta olmasını sağlar. border="0" ile çerçevelerin görünmez olması sağlanabilir; 2, 3 gibi daha büyük değerler kullanılarak çerçeve kalınlığı artırılabilir. border parametresi için varsayılan değer sıfırdır. Dolayısıyla bu parametre kullanılmadığında tablo çerçevesiz olarak görüntülenir. <table border="0"> <tr><td>A</td><td>B</td><td>C</td></tr> </table> <br> <table border="1"> <tr><td>A</td><td>B</td><td>C</td></tr> </table> <br> <table border="5"> <tr><td>A</td><td>B</td><td>C</td></tr> </table> <ekran_041.tif> cellpadding ve cellspacing Parametreleri Bu iki parametreden cellspacing hücrelerarası marjı, cellpadding ise hücre içi marjı kontrol etmeye yarar. Her iki parametre için verilebilecek en küçük değer sıfırdır. border parametresi de dahil olmak üzere 3 parametreye sıfır değeri verilmesi halinde hücreler içindeki resim, metin ve nesneler birbirlerine yapışık olarak görüntülenir. <table border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="resim1.gif"></td> <td><img src="resim2.gif"></td> <td><img src="resim3.gif"></td> </tr> </table> cellpadding değeri büyük verilerek tablo yapısı içindeki metinlerin okunabilirliği artırılabilir. cellspacing'e yüksek değerler verilerek hücrelerin birbirinden ayrık olmaları sağlanabilir. Aşağıdaki örnekleri Browser'ınızda deneyerek oluşturdukları etkileri inceleyebilirsiniz. <table border="1" cellpadding="0"> <tr><td>A</td><td>B</td></tr> </table> <br> <table border="1" cellpadding="4"> <tr><td>A</td><td>B</td></tr> </table> <br> <table border="1" cellpadding="10"> <tr><td>A</td><td>B</td></tr> </table> <br> <table border="1" cellspacing="0"> <tr><td>A</td><td>B</td></tr> </table> <br> <table border="1" cellspacing="4"> <tr><td>A</td><td>B</td></tr> </table> <br> <table border="1" cellspacing="10"> <tr><td>A</td><td>B</td></tr> </table> <ekran_042.tif> cellpadding değeri için varsayılan değer sıfırdır. cellspacing ise border değeri "1" verildiğinde varsayılan olarak "2" değerini alır, aksi halde sıfırdır. Tabloyu Renklendirme ve Fon Olarak Grafik Kullanma Daha önce sayfamızın fon rengini değiştirmekte kulllandığımız bgcolor parametresini <table>, <tr> ve <td> etiketlerinde de kullanabiliyoruz. Bu parametrenin <table> ile birlikte kullanılması durumunda tüm tabloyu, <tr> ile kullanılmasında tüm satırı renklendirebiliriz. Tek bir hücreye renk vermek için bgcolor'ı <td> etiketi ile kullanıyoruz. Bu sayede rengarenk tab ar elde etmemiz mümkün oluyor. <table border="0" cellpadding="3" cellspacing="2" bgcolor="#cccccc"> <tr> <td bgcolor="#666666">hücre1</td> <td bgcolor="#666666">hücre2</td> <td bgcolor="#666666">hücre3</td> </tr> <tr bgcolor="#aaaaaa"> <td>hücre4</td> <td>hücre5</td> <td>hücre6</td> </tr> <tr> <td>hücre7</td> <td>hücre8</td> <td>hücre9</td> </tr> </table> <ekran_043.tif> Bu örnekte ilk satırda her hücreye ayrı ayrı renkler verdik, ikinci satırda <tr> etiketine renk vererek tüm satırı renklendirdik, son satırda ise renk kullanmadık, fakat tablonun tümüne <table> etiketinde bgcolor ile renk verdiğimiz için, üçüncü sıradaki hücrelerin de zeminleri renklendirilmiş oldu. Buradan şu sonucu çıkarabiliriz. bgcolor parametresinde <table>, <tr> ve <td> etiketleri arasında öncelik sırası <td> ye aittir. Yani <td> ye renk vererek <tr> ve <table> ile verilen renkleri örtebiliriz. Tab arda rengin yanısıra fon (background ) olarak grafik dosyalarından faydalanabiliriz. Internet Explorer <table> ve <td> etiketlerine verilen background grafiklerini görüntüleyebilirken, Netscape yalnız <td> etiketine verilen grafiği görüntüler: <table border="1" cellpadding="45" cellspacing="15" background="background3.jpg"> <tr> <td background="background1.jpg"><h3>hücre1</h3></td> </tr> <tr> <td background="background2.jpg"><h3>hücre2</h3></td> </tr> </table> <ekran_044.tif> <ekran_045.tif> Kullandığımız fon grafiğinin tablo veya hücre alanından küçük olması durumunda grafik dosyası boş alanlar doldurulana kadar tekrarlanacaktır. Böylece fon amacıyla kullanmak için küçük boyutlu grafiklerden faydalanılabilir. Tablo ve Hücrelerin Ebatlarını Belirlemek Resimler konusunda gördüğümüz width (genişlik ) ve height (yükseklik ) parametrelerini tablo etiketlerinde de kullanabiliriz. Ayrı ayrı hücrelerin, satırların ve tüm tablonun yükseklik ve genişliklerini ya piksel olarak, ya da Browser penceresinin boyutuna göre değişen yüzde değeri kullanarak belirleyebiliyoruz. Ancak burada bazı kısıtlamalar sözkonusu. Bir hücreye genişlik değeri vermişsek, tablo yapısı gereği o satırdaki tüm hücreler de en büyük yükseklik değerine sahip hücre temel alınarak oluşturulur. <table border="1"> <tr height="80"> <td>Hücre1</td> <td>Hücre2</td> </tr> <tr> <td>Hücre1</td> <td>Hücre2</td> </tr> </table> Bu örnekteki iki satırlı tablodan birinci satırın yükseklik değeri height parametresi ile 80 piksel olarak belirtilmiş, ikinci satır yüksekliği ise belirtilmemiş yani varsayılan (default ) değer sahip. Yükseklik ve genişlik değerleri verilmeyen hücrelerin ölçüleri içlerindeki nesnelere göre hesaplanır. Birinci satırdaki tüm hücreler height ile verilen yüksekliğe uymak zorundadır. Bunu daha iyi anlamak için ilk satırı şu kodlarla değiştirin; <tr> <td height="80">Hücre1</td> <td>Hücre2</td> </tr> parametreyi satırı oluşturan <tr> etiketinden alıp ilk hücreyi oluşturan <td> etiketine verdik ve sonuç değişmedi. O satırdaki tüm hücrelerin yükseklikleri de bu hücreye göre ayarlandı. Aynı şekilde height="80" değerini ilk hücreden silip ikinci hücreye verdiğimizde de sonuç değişmeyecektir. <tr> <td height="50">Hücre1</td> <td height="60">Hücre2</td> <td height="70">Hücre3</td> <td height="80">Hücre4</td> </tr> Bu satırdaki tüm hücreler farklı yükseklik değerlerine sahip. Bu durumda en büyük yükseklik değerine sahip hücre belirleyici olacaktır. Genişlik belirlememizi sağlayan width parametesinde de aynı durum sözkonusudur. Aynı sütunda bulunan hücreler en büyük genişliğe sahip hücre esas alınarak çizilir. Bu prensipten yola çıkarak çok satırlı bir tablo oluştururken her satırdaki hücrelere genişlik değeri vermeksizin, width parametresini sadece ilk satır hücrelerine vermek hem daha küçük boyutlu dosya oluşturulmasını, hem de olası bir değişiklik durumunda tasarımcının daha az zaman kaybetmesini sağlar. width ve height parametrelerini piksel değeri vererek kullanabildiğimiz gibi yüzde (% ) değerleri vererek de kullanabiliriz. Bu bize, Browser penceresinin ebatlarına göre ölçüleri değişen tab ar hazırlama imkanı verir. Tüm bu anlattıklarımızı bir örnek üzerinde uygulayalım; <table width="80%" height="60%" cellpadding="5" cellspacing="2" border="2" > <tr height="50"> <td width="70" bgcolor="yellow">Hücre1</td> <td bgcolor="red">Hücre2</td> <td width="70" bgcolor="yellow">Hücre3</td> </tr> <tr> <td bgcolor="red">Hücre4</td> <td bgcolor="blue">Hücre5</td> <td bgcolor="red">Hücre6</td> </tr> <tr height="50"> <td bgcolor="yellow">Hücre7</td> <td bgcolor="red">Hücre8</td> <td bgcolor="yellow">Hücre9</td> </tr> </table> <ekran_046.tif> <ekran_047.tif> Bu tabloyu Netscape ve Internet Explorer ile incelediğinizde farklı görünümlerle karşılaşacaksınız. Şimdiye kadar öğrendiğimiz etiketlerle oluşturduğumuz sayfalarda bu durumu gözlemek pek mümkün değildi. Tab arla beraber her iki Browser'ın HTML'i yorum farklılığı ortaya çıkmış bulunuyor. Bu, biraz Internet Explorer'ın kodlama hataları ve eksikliklerine karşı oldukça affedici davranmasından kaynaklanıyor. Bu alanda Netscape biraz daha kurallara tam riayet istiyor. Peki önümüzde niçin iki farklı sayfa duruyor? Herşey kurallara uygun değil mi? Hatalı olan nedir? Tablonun Browser penceresinin % 80'i genişlikte çizilmesini istedik. (Yüzde işaretinin rakamın sağında veya solunda bulunması tamamen dil kurallarından kaynaklanıyor. Biz her ne kadar Türkçe'de bu sembolü rakamın soluna yazsak da, kodlamada yüzde işaretinin sağa yazıldığını unutmamak gerekir. ) Tablonun yüksekliği ise Browser penceresinin yüzde 60'ı kadar olacak. Gerçekte bir tablonun yüksekliği, satırlarının yüksekliklerinin toplamına eşittir. Halbuki elimizdeki "toplam % 60" yükseklik değeri ortaya belirsiz bir durum çıkartıyor: ortadaki satırda yer alan hücrelerin yükseklikleri ne olacak? Diğer iki satırın yüksekliklerinin sabit olarak 50 piksel olmasını istemişiz; fakat ortadaki satır için herhangi bir değer belirtmemişiz. Internet Explorer, böyle belirsiz durumlarda esnek bir yaklaşımla 1'nci ve 3'ncü satırlara sabit 50 piksel yüksekliği verirken ortadaki satır yüksekliğini tablonun o andaki yüksekliğine göre ayarlar. Halbuki Netscape belirsizlik nedeniyle ortaya çıkan bu duruma tamamen farklı yaklaşarak satırların hiçbirini sabit yükseklikte çizmez: sabit genişlik değeri verdiğimiz halde 1'nci ve 3'ncü sütunu ve bir yükseklik değeri verilmeyen ortadaki sırada yer alan hücrelerin de yükseklikleri eşit olarak görüntülenir. (Şimdi bir Web tasarımcısının zamanının neden büyük bir kısmının her iki Browser'ı da memnun edecek kodlar ortaya çıkarmakla geçtiğini daha iyi anlıyorsunuz! ) Tab arda Hizalama Yine resimler konusundan hatırlayacağımız align parametresi tab arın yatay hizalanmasında (horizontal align ) kullanılıyor. Bu parametre ile metin, resim veya nesnelerin hücre içindeki yatay hizasını belirleyebiliriz. align parametresini <table> etiketi ile kullandığımızda parametrenin alabileceği değerler şunlardır; align = center | left | right <td> ve <tr> etiketleri ile kullanıldığında ise şu değerleri alabilir; align = center | left | right | char Bu değerlerden left, right ve center'ı daha önceki alıştırmalarımızdan biliyoruz. char değeri ise HTML 4.0 kuralları içinde yer alan fakat her iki Browser'ında güncel sürümleri tarafından desteklenmeyen bir değer. Bu yüzden pratik olarak bir anlam taşımıyor, özet olarak bahsetmek gerekirse char, hizalamayı belirlenen bir karaktere göre yapar. Örneğin bir bankanın kalabalık sayılardan oluşan bilanço tablosunu hazırlıyorsunuz ve rakamların nokta (. ) karakterine göre sıralanmasını istiyorsunuz. Bu durumda kullanacağınız kod şu olmalı: <td align="char" char=".">123,456.789</td> <td align="char" char=".">2321,654.987</td> <td align="char" char=".">21,564.897</td> ... ... Fakat söylediğimiz gibi Browser'ların güncel sürümleri bu parametreyi desteklemiyor. Tablo hücrelerinde kullanabileceğimiz diğer hizalama türü de dikey hizalamadır (vertical align ). İçeriğindeki nesnenin yüksekliğinden daha büyük yüksekliğe sahip hücrelerde dikey hizalama yapabiliriz. Kullanacağımız parametre, valign ve alabileceği değerler şunlar: valign = top | middle | bottom top: nesneyi hücre içerisinde (ve <tr> etiketi ile kullanıldığında o satırdaki tüm hücrelerde ) bulunan nesneleri hücre üst kenar çizgisine bitiştirir. bottom: top değerinin tersi olarak nesneleri hücrenin alt kenarına dayar. middle: nesne üst ve alt kenarlardan eşit mesafe oluşacak şekilde hizalanır (yani dikey olarak ortalanır ). align parametresi için varsayılan değer left, valign için middle'dır. Şimdi hizalama ile ilgili öğrendiklerimizi bir örnekle pekiştirelim. <table border="1"> <tr> <td align="left" width="200">Hücre1</td> <td align="center" width="200">Hücre2</td> <td align="right" width="200">Hücre3</td> </tr> <tr> <td valign="top" height="150">Hücre4</td> <td valign="middle">Hücre5</td> <td valign="bottom">Hücre6</td> </tr> </table> <ekran_048.tif> Hücreleri Birleştirme Tab arı sayfa iskeleti oluşturmakta etkin olarak kullanabilmemizin en büyük sebebi herhalde HTML'in hücreleri birleştirme özelliği olsa gerek. Şu iki ekran görüntüsünü inceleyin: <ekran_049.tif> <ekran_050.tif> İlk ekrandaki hücreleri birleştirerek ikinci ekranı elde ettik. Bunun için kullandığımız iki parametre bulunuyor: colspan ve rowspan. Aynı satır ve farklı sütunlardaki (column ) hücreleri birleştirmek için colspan, aynı sütun ve farklı satırlardaki (row ) hücreleri birleştirmek içinse rowspan'ı kullanıyoruz. İki satırlı, 4 sütunlu bir tablo düşünün: <table border="1" cellpadding="7"> <tr> <td>Hücre1</td> <td>Hücre2</td> <td>Hücre3</td> <td>Hücre4</td> </tr> <tr> <td>Hücre5</td> <td>Hücre6</td> <td>Hücre7</td> <td>Hücre8</td> </tr> </table> Bu tabloda aynı satırda bulunan hücre3 ve hücre4'ü birleştirmek için colspan parametresini, aynı sütunda bulunan hücre2 ve hücre6'yı birleştirmek için rowspan'ı kullanıyoruz. Aklınız karışmasın; ama buradaki mantığın çok iyi anlaşılması gerekiyor: farklı satırların birleştirilmesi için rowspan, farklı sütunların birleştirilmesi için colspan. Peki bu iki parametreyi nerede ve nasıl kullanacağız? Yukarıdaki tablo üzerinde bunu deneyelim: <table border="1" cellpadding="7"> <tr> <td>Hücre1</td> <td rowspan="2">Hücre2</td> <td colspan="2">Hücre3</td> </tr> <tr> <td>Hücre5</td> <td>Hücre7</td> <td>Hücre8</td> </tr> </table> colspan="2" aynı satırlardaki hücre3 ve hücre4'ün birleşmesini sağlıyor. Bu parametreyi hücre3'ü oluşturan <td> etiketinin içine yazıyoruz. 5 hücreyi birleştirmek için colspan="5" kodunu kullanmamız gerekir. Tabiî burada kullandığımız sayı tablonun sahip olduğu toplam sütun sayısından küçük veya buna eşit olmalıdır. rowspan parametresinde de bu kurallar geçerlidir. Aynı zamanda dikkat edilmesi gereken bir başka nokta da şu: birleştirilen hücreler artık tek hücre olacağından birleştirilen bu hücreler için tek bir <td> etiketi açılır. Birleşenlerin (yok olanların ) <td>...</td> kodlarını yazmayız. <table border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td colspan="5">6</td> </tr> </table> Örneğinde 5 sütunlu bir tablo görüyoruz. İkinci satırda 5 sütundaki tüm hücreler birleştirildiğinden tek bir <td> etiketi kullanıyoruz. Farklı satırlardaki hücreleri birleştirirken de; <table border="1"> <tr> <td rowspan="2">1</td> <td>2</td> <td rowspan="2">3</td> </tr> <tr> <td rowspan="2">5</td> </tr> <tr> <td>7</td> <td>9</td> </tr> </table> 4 sütun ve 2 satırlı bu tabloda 1'nci satırın 1'nci hücresi, 2'nci satırın 1'nci hücresi ile birleştirilmiştir. Bu durumda ikinci satırda açılan ilk hücre, bu satırın 2'nci hücresi olarak gösterilecektir. Dolayısıyla ilk satıra göre bir <td>...</td> etiketini eksik kullanıyoruz. Biraz daha karmaşık iki tablo yapısı; <ekran_051.tif> <table border="1" cellpadding="7"> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> </tr> <tr> <td>F</td> <td>G</td> <td>H</td> <td colspan="2">I</td> </tr> <tr> <td>J</td> <td>K</td> <td colspan="3">L</td> </tr> <tr> <td>M</td> <td colspan="4">N</td> </tr> <tr> <td colspan="5">O</td> </tr> </table> <table border="1" cellpadding="7"> <tr> <td>A</td> <td rowspan="2">B</td> <td rowspan="3">C</td> <td rowspan="4">D</td> <td rowspan="5">E</td> </tr> <tr> <td>F</td> </tr> <tr> <td>G</td> <td>H</td> </tr> <tr> <td>I</td> <td>J</td> <td>K</td> </tr> <tr> <td>L</td> <td>M</td> <td>N</td> <td>O</td> </tr> </table> Bu örnekleri dikketle inceledikten sonra aşağıda ekran görüntülerini gördüğünüz tab arı oluşturmaya çalışın. <ekran_052.tif> Bilgi Sunma Aracı Olarak Tablo Tablodan Web sayfasına biçim kazandırmakta iskelet öğesi olarak değil de, bilgi sunma aracı olarak, yani bilginin tasnif edilmiş şekilde ve daha kolay anlaşılır biçimde görüntülenmesi amacıyla yararlanıyorsak, kullanmamız gereken daha bir çok etiket vardır. Örneğin tab ar, baş (head ), gövde (body ) ve farklı olarak da ayak (foot ) bölümlerinden oluşabilir; altında veya üstünde açıklaması olabilir. Pratik hayatta pek kullanılmamakla beraber biz burada tablonun bu bölümlerin nasıl oluşturulduğunu birlikte ele alalım; böylece sağladığı bir takım avantajları görebilir ve nerede ihtiyacınız olacağına kendiniz karar verebilirsiniz. Tablo oluşturmak için şu ana kadar 3 etiketten faydalandık: <table>, <tr> ve <td>. Bu üç etiket istediğimiz tablo yapısını kurma imkanını bize sağlıyordu. Bu bölümde ise yeni olarak şu etiketleri göreceğiz: <thead>, <tbody>, <tfoot>, <th> ve <caption>. Tablonun açıklamasını oluşturmakta kullandığımız <caption> etiketinin içerdiği metni, tablonun altında veya üstünde görüntüleyebiliriz. <caption> etiketini align parametresi ile birlikte kullanabiliriz. Bu parametrenin alabileceği değerler şunlardır: caption = bottom | center | left | right | top caption etiketine bu değerleri vererek herbirinin ne işe yaradığını deneyebilirsiniz. Yalnız şunu söylemekte fayda var: bottom ve top dışındaki değerleri Internet Explorer'ın desteklemesine karşılık, Netscape desteklemiyor. Tablonun head kısmını oluşturmakta yararlandığımız <thead> etiketinin içinde bu bölümün satırlarını <tr> ile oluştururuz, fakat hücrelerini <th> etiketiyle kodlarız. <th> etiketinin kullanımı <td> etiketinin aynısıdır; fakat <th> bir çeşit biçimi önceden tanımlanmış <td> etiketidir; içerdiği metin koyu (bold ) veya eğik (italik ) olarak görüntülenir. <tbody> bir tablonun <tr> ve <td> etiketleri ile oluşturulan satır ve hücrelerinin yer aldığı bölümdür. Bu etiketlerin parametrelerini ve kullanım biçimlerini yukarıda ayrıntılı olarak ele aldık. <tfoot> etiketi ise tablonun en alt satırı olarak yer alacak bilgileri içeren hücrelere yer ayırır; bu bölümdeki sıraları <tr>, hücreleri ise ister <th> ister <td> ile oluşturabiliriz. Şimdi bu bölümleri nasıl oluşturacağımızı ve bu etiketlerin kullanım şekillerini görelim: <table border="1" cellpadding="5"> <caption align="top"><b>Boğaz Vapur Seferleri</b></caption> <caption align="bottom">İyi Yolculuklar</caption> <thead> <tr> <th>Kalkış Yeri</th> <th>Kalkış Saati</th> <th>Varış Yeri</th> <th>Varış Saati</th> </tr> </thead> <tfoot> <tr> <td colspan="4" align="center">Not: Pazar günleri sefer yapılmaz</td> </tr> </tfoot> <tbody> <tr> <td>Kanlıca</td> <td>8:30</td> <td>Bebek</td> <td>8:55</td> </tr> <tr> <td>Anadoluhisarı</td> <td>8:40</td> <td>Arnavutköy</td> <td>9:05</td> </tr> <tr> <td>Kandilli</td> <td>8:45</td> <td>Bebek</td> <td>8:55</td> </tr> </tbody> </table> <ekran_053.tif> Tabloyu birlikte inceleyelim; head, body ve foot bölümlerini açık şekilde görebiliyoruz. Aynı şekilde <caption> etiketi ile tablonun üstüne ve altına eklediğimiz metinler var. Head bölümünde hücre oluşturmak için <th> etiketini kullanıyoruz, ve belirttiğimiz gibi bu etiketle oluşturulan sütun başlıkları koyu renk yazı türüyle görüntüleniyor. Tablonun foot bölümü için de aynı şeyleri söyleyebiliriz. Bu tabloyu yüzlerce satırdan oluşan bir bilgi sunma aracı olarak düşündüğümüzde head ve foot bölümlerinin yazdırılan her sayfada çıkmasını isteriz. Bunu da <th> etiketi ile sağlıyoruz. <th> etiketinin metinleri tablodaki diğer hücrelerden farklı biçimlendirdiğine de dikkat ettiniz mi? Body bölümü daha önce öğrendiğimiz tablo yapısının aynısı. Kodların akışı ile Browser'da oluşan tablonun farklılığı da dikkatinizi çekmiş olmalı: ikinci caption'ın ve foot bölümünün kodların üstlerde yer almasına karşılık değerlerinin tablonun sonunda görüntülenmesi gibi. Tablo etiketleri ile kullanabileceğimiz parametrelerin büyük bölümünü ele almış olduk. Ancak birkaç parametre daha var ki bunların bazıları Internet Explorer ve Netscape tarafından farklı yorumlanırken bir kısmı da yalnızca Internet Explorer'a hitap ediyor. Tab arımızda güzel etkiler oluşturmayı sağlayan bu parametreleri gelecekte Netscape'in de desteklemesi umuduyla biraz yakından ele alalım: bordercolor, bordercolordark, bordercolorlight Parametreleri Bu üç parametre tablo çerçevesine renk vermekte kullanılır. bordercolor, çerçeve rengini belirler: <table border="1" cellspacing="1" width="100" height="100" bordercolor="#ff0000"> <tr align="center" valign="middle"> <td>A</td> <td>B</td> </tr> <tr align="center" valign="middle"> <td>C</td> <td>D</td> </tr> </table> Ancak sayfayı her iki Browser'da ayrı ayrı incelediğimizde görüntüde farklar göreceğiz. Internet Explorer, tablonun dış çerçevesi ve her bir hücrenin kendi sınır çizgilerinin rengini değiştirirken, Netscape adeta tabloya üçüncü bir boyut kazandırdı; tablonun en dış çerçevesini renklendirdi; fakat hücrelerin iç çizgilerine dokunmadı! Ancak Netscape'in tabloya ve bize kazandırdıkları burada sona eriyor. Çünkü Internet Explorer bordercolordark ve bordercolorlight ile bize istediğimiz renklerde üç boyut (derinlik etkisi ) görünümünde tablo hazırlama imkanı veriyor. Windows işletim sistemi, pencere ve diyalog kutularında derinlik hissi verebilmek için, hemen her çerçeve çizgisinin alt ve sağ kısmını koyu, üst ve sol kısmını açık renkle görüntüler. HTML sayfada tab ara 3-D görünümü kazandırmak için bordercolordark parametresi ile çerçevenin koyu renkli olacak alt ve sağ rengini, bordercolorlight ile daha açık renkli olacak sol ve üst çerçeveyi kontrol edebiliriz. Bunu dikkate alarak bordercolordark'a daha koyu tonlarda renk verirken diğer parametreye daha açık tonlar verilebilir. Ancak böyle bir zorunluluk yok; ters renkler kullanarak, açık renkli tarafı alt-sağ'a getirebiliriz: <table border="3" cellspacing="0" width="100" height="100" bordercolordark="#000066" bordercolorlight="#a0a0ff"> <tr align="center" valign="middle"> <td>A</td> <td>B</td> </tr> <tr align="center" valign="middle"> <td>C</td> <td>D</td> </tr> </table> Her üç parametreyi de border parametresi ile birlikte kullanıyoruz. Zira border kullanmadığımız zaman varsayılan değer olarak sıfır değeri verilir ve çerçeve çizilmez. Yine cellspacing'e çeşitli değerler vererek (sıfır da dahil ) değişik görünümlerde tab ar oluşturulabilir. rules ve frame parametreleri rules ve frame, yalnızca IE tarafından desteklenen iki parametredir. frame parametresi ile tablo çerçevelerini kontrol edebiliyoruz. Peki, dış çerçevesi olmayan bir tabloya ne dersiniz? <table border="1" width="200" frame="void"> <tr align="center"> <td>A</td> <td>B</td> <td>C</td> </tr> <tr align="center"> <td>D</td> <td>E</td> <td>F</td> </tr> <tr align="center"> <td>G</td> <td>H</td> <td>I</td> </tr> </table> <ekran_054.tif> frame ile tablonun yalnızca dış çerçevesine müdahale edebiliyoruz. Hücreleri çevreleyen çerçeveler sabit kalıyor. Daha değişik görünümlerde tab ar oluşturmak için frame parametresine şu değerleri verebilirsiniz: frame = above | below | border | box | hsides | lhs | rhs | void | vsides Hücre çerçevelerini kontrol etmek için rules parametresinden faydalanıyoruz. Bu parametre ile satırların, sütunların ve grupların çerçeveleri kontrol edilebiliriz. (Satır ve sütunlar tamam! Peki "grup" nedir ve nereden çıktı? Tablo bölümleri oluşturma konusunda bahsettiğimiz head, foot ve body bölümleri birer gruptur. Bunun dışında kendimiz de gruplar oluşturabiliriz. Birazdan grup konusunu ayrıntılı olarak ele alacağız. ) rules parametresi ile kullanılabilecek değerler şunlardır: rules = all | cols | rows | groups | none Bu değerlerden cols yalnızca sütun çerçevelerinin, rows yalnızca satır çerçevelerinin görünmesini sağlıyor. all değeri aynı zamanda border="1" karşılığı ve tüm çerçevelerin görünmesini sağlarken none, border="0"'ın karşılığı olarak çerçeveleri gizliyor. Şu örnek üzerinde all, cols, rows ve none değerlerini deneyebiliriz. <table border="1" width="200" rules="cols"> <tr align="center"> <td>A</td> <td>B</td> <td>C</td> </tr> <tr align="center"> <td>D</td> <td>E</td> <td>F</td> </tr> <tr align="center"> <td>G</td> <td>H</td> <td>I</td> </tr> </table> rules="groups" için ise daha farklı bir örneğe ihtiyacımız var. Tablo bölümleri oluşturma konusundaki örneği bu amaçla kullanabiliriz. Head, body ve foot olarak 3 grup var; bu yüzden yalnızca bu gruplara ait çerçeveler görünür. <table border="1" cellpadding="5" rules="groups"> <caption align="top"><b>Boğaz Vapur Seferleri</b></caption> <caption align="bottom">Not: Pazar günleri sefer yapılmaz</caption> <thead> ... ... ... </table> <ekran_055.tif> Kendi gruplarımızı oluşturmamız da mümkün; ama bunu yapabilmek için önce iki yeni etiketle tanışıyoruz: <col> ve <colgroup>. <colgroup> etiketi tablo sütunlarını gruplamamızı sağlar. Böylelikle oluşturulan bu gruba doğrudan göndermede bulunma imkanı kazanmış oluruz. Örneğin hücreleri hizalamak için her bir <tr> veya <td> etiketi ile align parametresi vermek yerine grup oluşturarak sadece bir align parametresiyle tüm hücrelere hitap etmek gibi. Sütun grubuna dahil olacak sütunları iki şekilde belirleyebiliriz. 1. <colgroup> etiketinin span parametresi ile sütun sayısını vererek, 2. <colgroup> etiketi içinde bir veya daha fazla sayıda sütun belirtebilen <col> etiketini kullanarak. Öncelikle bir sütun grubu nasıl oluşturulur, ona bakalım. Bu arada ilk yönteme göre yani span ile gruplanacak sütunların sayısını belirtmeyi öğrenelim. <table border="1" width="100%"> <colgroup span="4" align="right"></colgroup> <colgroup span="2" align="center"></colgroup> <thead> <tr> <th>Sütun 1</th> <th>Sütun 2</th> <th>Sütun 3</th> <th>Sütun 4</th> <th>Sütun 5</th> <th>Sütun 6</th> </tr> </thead> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> </tr> <tr> <td>G</td> <td>H</td> <td>I</td> <td>J</td> <td>K</td> <td>L</td> </tr> </tbody> </table> Sütun grubunu <table> etiketinin hemen peşinden tanımlıyoruz. Birden fazla grup tanımlayabiliriz. Bu örnekte iki grup tanımladık. Grupları oluştururken, kaç sütunun gruba dahil olacağını belirlemede yukarıdaki yöntemlerden birincisini kullandık. span="4" tablo yapısında bulunan toplam 6 sütundan ilk 4'ünün bir grup olacağını belirtiyor. İkinci bir <colgroup> etiketiyle de son iki sütunu grupladık. Peşinden align parametresi ile bu 2 gruptaki tüm hücrelere hizalama komutu vermiş olduk. span değeri ile oynayarak gruptaki sütun sayısını değiştirebiliriz. Şimdi oluşturduğumuz sütun grubunu daha somut görelim. Yukarıdaki örneğimizin ilk satırını şu kodla değiştirelim: <table border="1" width="100%" rules="groups"> <ekran_056.tif> Buradaki rules="groups" parametresi yalnızca tablodaki grup çerçevelerinin görüntülenmesini sağlıyor. Peki <colgroup> ile başka hangi parametreleri kullanabiliriz? İki parametre daha var. Bunlar; dikey hizalama için valign ve sütun genişlikleri için width. Üç parametre için kullanabileceğimiz değerler şöyle; align = left | right | center | char valign = top | middle | bottom | baseline width = 'piksel değeri' | 'yüzde değeri' | n* width parametresinde şimdiye kadar kullanmadığımız bir değer kullanabiliyoruz: n*. Bu, bağıl ölçü vermeye yarıyor. n yerine herhangi bir sayı veriyoruz. Örneğin 2* değeri o grubun önceki gruptan 2 kez daha geniş olmasını sağlıyor. İkinci yöntemdeki <col> etiketinin nasıl kullanıldığına bakalım. Bu metodu aynı örnek üzerinde uygulayalım. Tablodaki head ve body bölümlerindeki kodlar aynı kalacak. <colgroup>...</colgroup> etiketleri arasına şunları yazalım: <colgroup> <col span="2" align="left"> <col span="2" align="right"> </colgroup> <colgroup> <col span="2" align="center"> </colgroup> Bu örnekte yine 2 sütun grubumuz var. Ancak ilk gruptaki 4 sütunu yine kendi arasında ikişer ikişer ayırdık. rules="groups" parametresi ile yine gruba ait çerçeveler görüntüleniyor. Ancak <col> etiketi ile bir anlamda grup altında bir alt grup oluşturduk. Yapı İskeleti Olarak Tab ardan Yararlanma Tab arı icad edilme sebepleri olan, bilgi sunma aracı olarak değil de, sağladıkları satır ve sütunlu yapı oluşturma ve bu satırları, sütunları istediğimize yakın bir hassasiyetle belirleyebilme özelliğinden yararlanarak, Web sayfasının yapısal unsuru olarak kullanabiliriz. Başka bir deyişle, tablo, bize sayfamızın iskeleti olarak hizmet edebilir. Tablodan sayfanın yapısal ögesi olarak nasıl yararlanabileceğimizi bir örnek üzerinde göreceğiz. Daha önce örneklerimizde geçmemiş olmasına rağmen tablonun bir hücresi içinde başka bir tablo oluşturabileceğimizi biliyoruz. Şimdi ekran görüntüsündeki gibi bir sayfanın tab ar ile nasıl oluşturulabileceğini inceleyelim. Background'a bir grafik yerleştirmekle işe başlıyoruz. Bu grafik 800 piksel genişliğinde ve 1 piksel yüksekliğinde. Grafiğin her iki uçtan 160 piksellik kısmı sarı ve ortası da beyaz renkte. Bu background sayesinde sayfada oluşturmak istediğimiz 3 sütunlu yapının sınırlarını görsel olarak belirledik. <body background="zemin.gif" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0"> <table border="1" cellpadding="7" cellspacing="0" width="100%" height="100%"> <tr> <td width="145" valign="top">1</td> <td align="center" valign="top">2</td> <td width="145" valign="top">3</td> </tr> </table> </body> Burada ilk defa kullandığımız marginwidth, marginheight, topmargin ve leftmargin parametreleri sayfanın sağ-sol-üst ve alt kenar boşluklarınnı sağlayor. Bu parametreler kullanılmadığı zaman sayfa içeriği ile sayfa kenarları arasında bir miktar boşluk oluşur. Bu dört parametreyi birden kullanmamızın sebebi ise Netscape ve Internet Explorer'ın farklı parametrelerden anlaması! marginwidth ve marginheight Netscape'e, leftmargin ve topmargin ise Internet Explorer'a yönelik. Sayfa yapısını kuran tablomuz 3 sütun ve tek satırdan oluşuyor. width ve height değerlerini yüzde 100 vererek tablonun Browser penceresinin tüm alanını kaplamasını sağlıyoruz. Her bir hücreye içerik olarak verdiğimiz 1, 2 ve 3 sayısı yerine daha sonra sayfa içeriğini oluşturan tab arı yerleştireceğiz. 1 sayısı yerine site navigasyonunu sağlayacak, site bağlantılarını içeren tabloyu, 3 sayısı yerine sitemize ait birkaç logoyu içeren tabloyu, 2 sayısı yerine de bir banner ve birkaç cümleden oluşan bir metin yerleştiriyoruz. Yine orta sütundaki tabloda kullandığımız spacer.gif 1x1 piksel boyutlarında saydam bir GIF dosyası. (Bu aslında bir çeşit tasarım tekniği. Bu grafiği burada destek amaçlı kullanıyoruz. 1x1 boyutunda olmasına rağmen genişlik değeri olarak 500 piksel verdik. Bunun sebebi bir noktadan itibaren Browser penceresinin altındaki kaydırma çubuklarının oluşmasını sağlamak ve böylece sayfa estetiğinin bozulmasını önlemek. Tablomuz Browser ekranının tamamını kapladığı için [width="100%"] sabit bir genişliğe sahip değil. spacer.gif dosyası ile tablonun genişliğine bir bakıma alt sınır koymuş oluyoruz. ) Ve son olarak sayfamızın inşa aşamasında tabarın nasıl oluştuğunu takip edebilmek için border değerlerini 1 olarak verelim: <body background="zemin.gif" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0"> <basefont face="verdana,arial"> <table border="1" cellpadding="7" cellspacing="0" width="100%" height="100%"> <tr> <td width="145" valign="top"> <!-- Tablonun 1.sütunu --> <table border="1" width="145"> <tr><td height="25"> </td></tr> <tr><td><img src="bullet.gif"><a href="anasayfa.htm">Ana Sayfa</a></td></tr> <tr><td><img src="bullet.gif"><a href="hakkinda.htm">Site Hakkında</a></td></tr> <tr><td><img src="bullet.gif"><a href="linkler.htm">Sevgi hakkında söylenenler</a></td></tr> <tr><td><img src="bullet.gif"><a href="linkler.htm">Linkler</a></td></tr> <tr><td><img src="bullet.gif"><a href="benkimim.htm">Ben kimim?</a></td></tr> </table> <!-- 1.sütun bitti--> </td> <td align="center" valign="top"> <!-- Tablonun 2.sütunu --> <table border="1" width="100%"> <tr><td><img src="spacer.gif" width="420" height="1"></td></tr> <tr><td align="center"><img src="sitelogo.gif" width="390" height="60"></td></tr> </table> <br><br> <h3>Sayfama Hoşgeldiniz.</h3> <font size="-1"> <p> Burada kendi seçtiğim linkler ve sevgi hakkında söylenen sözleri bulabilirsiniz.... </p> <br><hr><br><br> <p> Sabahı beklemeyiniz dostum, geceden yola çıkınız. Olur ki uyuyakalırsınız. Gece serindir, yapraklardan süzülen yel gözlerinizdeki yaşları kuruturken ruhunuzda kainatın derin sessizliğini taşıyarak sabaha doğru yürüyüp fecri başlatınız. </p> <p> Cemiyetin vahşi, zehirli bitkilerle dolu, her dalında uğursuz baykuşların manasız telkinler yaptığı sık ağaçlı ormanlarında çetin yolculukların başlangıcı için sabahı beklemeyiniz. Sabahı beklemek öğleni, öğleni beklemek akşamı beklemek gibi bir ruh gevşekliğini doğurur. </p> <p> Filozofun öğüdü bütün hayatımızda takib edeceğimiz en esaslı metottur: "<b>Uzun yolu seçiniz...</b>" </p> </font> <br> <hr> <!-- 2.sütun bitti--> </td> <td width="145" valign="top"> <!-- Tablonun 3.sütunu --> <table border="1" width="100%"> <tr><td align="center"><img src="logo1.gif" width="120" height="100"><br><br></td></tr> <tr><td align="center"><img src="logo2.gif" width="70" height="60"><br><br></td></tr> <tr><td align="center"><img src="logo3.gif" width="100" height="80"><br><br></td></tr> </table> <!-- 3.sütun bitti--> </td> </tr> </table> </body> <ekran_057.tif> Tüm kodlama bittikten ve sayfamızın arzu ettiğimiz gibi oluştuğunu gördükten sonra border değerlerini sıfır yapalım. Sayfanızın içeriğini dilediğiniz şekilde doldurmak size kalmış. Tab arı bu şekilde kullanarak çok değişik etkiler elde edebilirsiniz. NOT: Yukarıda oluşturduğumuz sayfayı her iki Browser'da incelediğinizde kodların Netscape ile düzgün çalışmadığını göreceksiniz. Acaba bu sayfayı Netscape ile de düzgün gösterebileceğinize inanıyor musunuz? Buyrun size çetin ceviz bir ev ödevi. |
| BÖLÜM 6 Çerçeveler Web tasarımının en tartışmalı konularından çerçevelere hoşgeldiniz. Halâ Web tasarımcılığında otorite konumunda bulunan birçok kişiden çerçeve kullanımı konusunda olumsuz sözler duymaktayız. Burada konuyu iki yönüyle de ele alacağız. Bize neler getiriyor? Dezavantajları neler? Önce çerçeve tekniğinin ne olduğunu anlamakla işe başlayalım. Çerçeveler HTML'e sonradan eklenmiştir. Çerçeveyi en kısa olarak, bir Browser penceresinde birden fazla Web sayfasını görüntülemek olarak tanımlayabiliriz. Şu ana kadar öğrendiğimiz etiketlerle bunu başarmak imkansızdı. Fakat çerçeveler yardımıyla Browser penceresini farklı bölgelere bölebilir ve her bölgede farklı bir HTML sayfasını görüntüleyebiliriz. Yalnız bu değil, görüntülenen sayfalardan birindeki linkin tıklanması ile başka bir bölgedeki (çerçevedeki ) içeriği değiştirebiliriz. Bu durum site navigasyonu (sayfalar arasındaki geçiş ) açısından bize büyük kolaylıklar sağlıyor. Bir defa sitenin gezinti menüsü gibi her sayfada bulunmasını istediğimiz bölümleri bir frame içerisinde görüntüleyebiliyor, böylece menüyü oluşturan kodların her sayfada tekrar etmesini önleyebiliyoruz. Ayrıca farklı çerçevelerde bulunan sayfalar birbirinden bağımsız olduğundan kaydırma çubukları ile sayfayı kaydırdığımızda diğer çerçeveler bundan etkilenmiyor; çünkü her çerçevenin kaydırma çubuğu ayrı. Bu da bize sitemizin bölümlerini içeren site menüsünü bir frame içerisine alarak bu menünün her zaman gözönünde bulunması avantajını sağlıyor. Ancak çerçevelerin dezavantajları da kayda değer nitelikte. Bir defa frame yapısını kuracak dosya ayrı, içeriği oluşturacak dosyalar ayrı olduğundan sayfanın daha geç yüklenmesi sözkonusu. Örneğin iki çerçeveli bir sayfada toplam 3 adet dosya çağırılır. Aynı şekilde 4 çerçeveli bir yapıda 5 dosyanın çalışması gerekir ki bu neredeyse 5 dosyayı ayrı ayrı çalıştırmak kadar zaman gerektirir. Frame'lerin tek dezantajı geç yüklenmeleri değildir. Bir diğer problem frame'li bir siteyi 'Sık Kullanılanlar' listenize eklediğinizde ortaya çıkar. Listeye eklenen sayfa aslında frame'i oluşturan sayfa, büyük olasılıkla anasayfadır. Dolayısıyla listenizden bu siteye tıkladığınızda karşınıza da sitenin ana sayfası gelir. Frame'li bir sayfaya dışarıdan link vermek de sorunlara neden olur. Çerçevedeki sayfalardan yalnızca birisine link verebileceğimizden sayfa frame bütünlüğü içerisinde açılmaz, ve şayet site navigasyonu frame içerisinden sağlanıyorsa bu siteye ait diğer sayfaları ziyaret etmemiz pek olası değildir. Yine HTML'e sonradan katılması neticesinde bazı eski Browser'lar frame'li sayfaları gösteremezler. Bir başka problem de sayfaların yazdırılmasında ortaya çıkabilir. Frame'li bir yapıyı diskimize kaydetmek istediğimizde bu girişimimiz başarısızlıkla sonuçlanabilir. Bu dezavantajların bazılarında son sürüm Browser kullananlar sorun yaşamayabilirler. Herşeye rağmen, sayfalarınızda bir çokları gibi frame kullanmaya karar verirseniz. bunun nasıl yapılacağını bilmeniz gerekir. Örnek olarak ekran görüntüsünü gördüğünüz sütun yapısında ve iki çerçeveden oluşan sayfayı hazırlayalım. Hazırlamamız gereken toplam 3 dosya bulunuyor. Üzerinde asıl duracağımız frame yapısını kuracak olan dosya. Diğer iki dosya içeriği oluşturacak ve şimdilik bu iki sayfada frame yapısı ile ilgili etiket kullanmayacağız. <ekran_058.tif> Çerçeveleri oluşturan etiket <frameset> etiketidir. <frame> etiketi ile de her bir frame'in özelliklerini ve frame'de gösterilecek sayfayı belirtiyoruz. Şimdi frame yapımızı oluşturacak 3 dosyayı hazırlayalım. Önce iki içerik sayfasını oluşturalım. cerceve1.htm dosyası: <html> <head> <title>Sol Çerçeve</title> </head> <body bgcolor="red"> <font size="7">Sol Çerçeve</font> </body> </html> cerceve2.htm dosyası: <html> <head> <title>Sağ Çerçeve</title> </head> <body bgcolor="blue"> <font size="7">Sağ Çerçeve</font> </body> </html> Ve çerçeveli sistemi oluşturan ana sayfamızı, frame.htm dosyasını oluşturalım: <html> <head> <title>Çerçeveli Sayfa</title> </head> <frameset cols="30%,70%"> <frame name="solcerceve" src="cerceve1.htm"> <frame name="sagcerceve" src="cerceve2.htm"> <noframes>Browser'ınız çerçeve teknolojisini desteklemiyor. Lütfen yenileyin!</noframes> </frameset> </html> <head> etiketini kapattıktan sonra yapıyı tanımlamak üzere <frameset> etiketini açıyoruz. cols parametresi çerçevelerin sütun yapısında olacağını bildiriyor; ve bunların ölçüsünü Browser penceresinin yüzde 30'u ve yüzde 70'i olarak veriyoruz. Burada kaç değer verirsek, Browser, o kadar çerçeve sütunu oluşturacaktır; yani bir taşla iki kuş! Peşinden <frame> etiketleri ile iki frame'i oluşturacak dosyaları tanımlıyoruz. Tanımlama aşamasında çerçevelerde gösterilecek dosyanın yerini src ile belirtiyor ve name parametresi ile de bu çerçeveye bir isim veriyoruz. Bu isim meselesi önemli; çünkü daha sonra bir çerçevede verdiğimiz bağlantının diğer çerçevede açılması için bu isme atıfta bulunacağız. Şayet src parametresi ile verdiğimiz dosya bulunamazsa Browser hata mesajı verecektir. <noframes> etiketi ile de çerçeveleri desteklemeyen Browser'lar için bir not bıraktık. Browser frame'li yapıyı açamadığında buradaki kodlar devreye girer. Bu sayfada dikkat ederseniz sayfanın 'body' kısmını oluşturmadık, onun yerini frameset yapısı aldı. Fakat 'head' bölümü frame'li yapılarda kullanılmaya devam ediyor. Dikey sütun değil de yatay satır (sıra ) yapısı oluşturmak istediğimizde ne yapacağız? Yapmamız gereken <frameset> ile kullandığımız cols yerine rows yazmaktan ibaret. Konunun ana hatları bunlardan ibaret. Özetlersek, çerçeve yapısını <frameset> etiketi kuruyor, sütunlu yapılar için cols parametresini, satırlı yapılar için rows parametresini kullanıyoruz. Bu parametrelere verdiğimiz değerlerin sayısı aynı zamanda çerçeve sayısını da belirtiyor. <frame> etiketi ile çerçeveleri tanımlıyoruz. name parametresi ile çerçeveye isim veriyor, src ile de dosyanın yolunu belirtiyoruz. <noframes> etiketi çerçeve tekniğini tanımayan eski sürüm Browser'lara hitap ediyor. cols ve rows parametrelerinde % değerleri yanısıra sabit değerler de kullanabiliriz. Şu örnekleri inceleyelim: <frame cols="150,*"> Bunun anlamı, ilk çerçeve 150 piksel genişliğinde olacak, ikinci çerçeve kalan alana yerleştirilecek. <frame rows="30%,*"> ilk çerçeve sayfanın o anki yüksekliğinin %30'unu, ikincisi kalan alanı alacak. <frame cols="1*,250,3*"> 3 sütunlu bu yapıda ortadaki frame sabit 250 piksel genişlikte, üçüncü frame birincinin 3 kat genişliğinde. (Birinci frame kalanın %25'ini, 3. frame %75'ini alacak. ) <frame rows="25%,350,2*,3*"> Diyelim ki Browser penceresi o an 800 piksel yüksekliğinde. İlk satırdaki çerçeve 800'ün %25'i olan 200 piksel'i alır. İkinci satırdaki çerçeve 350 piksel, üçüncü satırdaki çerçeve kalan 250 pikselin 100 pikselini, son çerçevede 150 pikseli alır. Hem satır hem sütun yapısı içeren çerçeveler hazırlamak için cols ve rows parametrelerini birlikte kullanabiliriz. <html> <head> <title>Çerçeveli Sayfa</title> </head> <frameset cols="50%,50%" rows="50%,50%"> <frame name="bir" src="cerceve1.htm"> <frame name="iki" src="cerceve2.htm"> <frame name="uc" src="cerceve3.htm"> <frame name="dort" src="cerceve4.htm"> <noframes>Browser'ınız Frame'leri desteklemiyor. Lütfen yenileyin!</noframes> </frameset> </html> <ekran_059.tif> Bu kod sayfayı 4 eşit parçaya böler. Peki tab arda gördüğümüz hücreleri birleştirme gibi bir özellik (colspan ve rowspan parametrelerini hatırlayın ) çerçevelerde de var mı? maalesef yok, fakat aynı görünümü elde etmek mümkün. Bu etkiyi sağlamak için <frameset> etiketini açtıktan sonra kaynak dosyaların hepsini belirtmeden yeni bir <frameset> açıyoruz, içiçe açtığımız bu etiketlerin kaynak dosyalarını eksiksiz olarak belirtip, etiketleri sonlandırıyoruz. Örnekleri ve yanlarındaki kodları inceleyip, farklı çerçeve türlerini kendi bilgisayarınızda oluşturmaya çalışın. <ekran_060.tif> <frameset cols="150,*"> <frame name="a" src="1.htm"> <frameset rows="100,*"> <frame name="b" src="2.htm"> <frame name="c" src="3.htm"> </frameset> </frameset> <ekran_061.tif> <frameset rows="50%,50%"> <frameset cols="*,*"> <frame name="a" src="1.htm"> <frame name="b" src="2.htm"> </frameset> <frame name="c" src="3.htm"> </frameset> <ekran_062.tif> <frameset rows="*,*,*"> <frame name="a" src="1.htm"> <frameset cols="*,*"> <frame name="b" src="2.htm"> <frame name="c" src="3.htm"> </frameset> <frame name="d" src="4.htm"> </frameset> <ekran_063.tif> <frameset cols="*,*"> <frameset rows="*,*"> <frame name="a" src="1.htm"> <frame name="b" src="2.htm"> </frameset> <frame name="c" src="3.htm"> </frameset> <frameset> etiketi ile kullanabileceğimiz diğer parametreler şunlar: frameborder Parametresi Çerçeveler arasındaki kenarlık çizgilerinin olup olmayacağını bildirir. İki değer alabilir 1 ve 0. (1 yerine 'yes' 0 yerine 'no' değerleri de kullanılabilir. ) 0 değeri kenarlıkları kaldırırken 1 değeri görüntüler. border Parametresi Çerçeveler arası kenarlık çizgilerinin kalınlığı belirtir. bordercolor Parametresi Kenarlıkların rengini belirler <frameset cols="50%,50%" rows="50%,50%" frameborder="yes" border="5" bordercolor="red"> .. .. .. </frameset> framespacing Parametresi Internet Explorer ile kullanabileceğimiz bu parametre border benzeri bir etki oluşturur. Bunun bir sebebi de border parametresi Internet Explorer 4 ile kullanılmaya başlanmasına rağmen framespacing, IE3 ile de kullanılabiliyordu. Yeni Browser'ların geriye doğru uyumlu olmaları istendiğinden bu parametre Internet Explorer'da kaldırılmadı. border parametresinden farklı olarak framespacing'e sıfır değerinin verilmesi kenarlıkları kaldırmaz. Her bir çerçevenin özelliklerini kontrol edebilmemizi sağlayan <frame> etiketi ile kullanabileceğimiz diğer parametreler ise şöyle: frameborder Parametresi <frameset> etiketinde olduğu gibi kenarlıkları kontrol eder, her bir çerçeveye ait kenarlığı bu parametre ile kontrol edebiliriz. noresize Parametresi Çerçeve ölçülerinin değiştirilmesini engeller. Bu parametre kullanılmadığı taktirde, Mouse ile çerçevelerin kenarlıklarıyla oynayarak ölçüleri değiştirmek mümkündür. Bu parametreyi tek bir <frame> etiketi içinde kullanmak yeterlidir. Böylece tüm çerçeveler kendi ölçüleri içerisinde kalır. <frameset cols="50%,50%" rows="50%,50%"> <frame name="bir" src="htm1.htm" noresize> <frame name="iki" src="htm2.htm"> <frame name="uc" src="htm3.htm"> <frame name="dort" src="htm4.htm"> </frameset> scrolling Parametresi Çerçeve içinde kaydırma çubuklarını kontrol eder. Her bir çerçevenin kaydırma çubuğu ayrıdır ve sayfanın içeriğine göre bu çubuklar oluşur. Şayet sayfa içeriği yeterli uzunlukta değilse bu çubuklar oluşmaz. Default olarak bu parametrenin değeri auto'dur. Verilebilecek tüm değerler şunlardır. scrolling = auto | yes | no no değeri verilerek kaydırma çubukları iptal edilebilir. yes değeri ile bu çubukların her halukarda görünmesi sağlanır. <frameset cols="50%,50%"> <frame name="bir" src="htm1.htm" scrolling="yes"> <frame name="iki" src="htm2.htm" scrolling="auto"> </frameset> marginwidth ve marginheight Parametreleri Çerçeve içi marjları kontrol eder. Sıfır değeri vererek çerçeve içeriğinin kenarlara bitişik olmasını sağlayabiliriz. <frameset cols="50%,50%"> <frame name="bir" src="htm1.htm" marginwidth="0" marginheight="0"> <frame name="iki" src="htm2.htm" marginwidth="50" marginheight="30"> </frameset> Çerçeve İçindeki Bağlantılarla Diğer Çerçevelerin İçeriklerini Değiştirmek Bağlantılar konusunda öğrendiğimiz target parametresini sayfadaki diğer çerçeve içeriklerini kontrol etmekte kullanıyoruz. target parametresine değer olarak <frame name="..."> ile verdiğimiz çerçeve adını kullanıyoruz. İki çerçeveden oluşan sütun yapısında bir sayfa hazırlayalım. Soldaki çerçevede sitenin navigasyonunu sağlayan site menüsü bulunsun. Bu menüden bir bağlantı tıklandığında sağ çerçevenin içeriği değişsin. index.htm dosyası <html> <head></head> <frameset cols="170,* frameborder="0"> <frame name="sitemenusu" src="menu.htm" noresize> <frame name="icerik" src="sayfa1.htm"> </frameset> </html> menu.htm dosyası <html> <body bgcolor="black"> <a href="index.htm" target="_top">Ana Sayfa</a> <br> <a href="sayfa1.htm" target="icerik">Sayfa 1</a> <br> <a href="sayfa2.htm" target="menu">Sayfa 2</a> <br> <a href="http://www.pclife.com.tr" target="_blank">PC Life</a> </body> </html> sayfa1.htm dosyası <html> <body bgcolor="#ffcc00"> <h2>Sayfa 1</h2> </body> </html> sayfa2.htm dosyası <html> <body bgcolor="#ffccff"> <h2>Sayfa 2</h2> </body> </html> sayfa3.htm dosyası <html> <body bgcolor="#ffccaa"> <h2>Sayfa 3</h2> </body> </html> soldaki bağlantıları tıkladığımızda neler olduğunu birlikte görelim. İlk bağlantı için hedef olarak _top değerini kullandık. Bu dosyanın aynı Browser içinde açılmasını ve aynı zamanda frame yapısının kaldırılmasını sağlar. Açmak istediğimiz dosya, yani index.htm frame içerdiğinden bu yapı tekrar kurulur. Sayfa 2 bağlantısına tıklandığında bu dosya 'icerik' isimli çerçevede açılır. Çünkü 'target' olarak bu çerçeveyi gösterdik. 'icerik' ismini ise index.htm dosyasında frame yapısını kurarken tanımladık. Sayfa 3 bağlantısı aynı çerçeve içinde açılır çünkü hedef yine kendisi. Son link olan PC Life'a tıklandığında yeni bir Browser penceresi açılacaktır. Şayet bir frame içerisindeki tüm bağlantıların aynı çerçevede açılmasını istiyorsak her bir bağlantı etiketine target parametresi ile hedef vermek yerine <base target="..."> etiketini kullanabiliriz. Bu etiket sayfadaki tüm bağlantıların istenen çerçevede açılmasını sağlar. <html> <body> <base target="icerik"> <a href="sayfa1.htm"> <br> <a href="sayfa2.htm"> <br> <a href="sayfa3.htm"> <br> <a href="sayfa4.htm" target="sayfaustu"> </body> </html> Buradaki ilk üç link 'icerik' adlı çerçevede açılır, bağlantılardan <base target="..."> ile tanımlanan çerçeve dışında bir çerçeve içerisinde açılmasını istediklerimiz varsa, <a href="..." target="..."> ile o bağlantının kontrolünü ayarlayabiliriz. Örnekteki dördüncü bağlantı da bunu gösteriyor. sayfa4.htm dosyası 'sayfaustu' adındaki çerçevede açılır. EK-A Web Tasarımcılarından Öğütler Barbara Kuhr (HotWired Web Alanı Baştasarımcısı ): 1. Basitleştirin. İyi bir tasarımın gücü basitliğindedir. Web alanının özünü tanımlamaya çalışın. 2. Şekil mi, içerik mi tartışmasına bile girmeyin. Bütün dikkatini içeriğe veren tasarımcı, bütün dikkatini şekle veren tasarımcıdan daha iyi sonuçlar alır. 3. Çözmek istediğiniz sorunu iyi tanımlayın. Herşeyden önce bu gerçekten içeriği ilgilendiren bir sorun mu, yoksa pastanın kreması gibi bir süs unsuru mu? Önce pastayı yapın; önemli olan asıl işiniz o. Sonra kremayı düşünürsünüz. 4. Sizi ilgilendiren birinci estetik unsur, sayfaların indirme hızıdır. Sayfalarınıza girmek çok zaman alıyorsa, yeniden başlayın tasarıma. 5. Tasarımını yaptığınız sayfayla ilgili bütün kişilerle iyi bir iletişim kurun. Teknik servisle, içeriği üretenlerle, reklamları sağlayanlarla. 6. Aaa, evet. Sayfalarınızda bir asit yeşiline yer vermeyi unutmayın. Brady Clark (Web tasarımcısı ): 1. Sayfalarınızda biraz mizaha yer verin. 2. Acaip fontlar kullanmayın. 3. Zamanınızı boş yere süs unsurlarına harcamayın; hiç bir süs harcadığınız zamana değmez. 4. İşi bitirdiğiniz zaman sayfanız o kadar zaman harcamayı gerektirmeyen bir basitlikte görünüyorsa, işinizi başarıyla yapmışsınız demektir. 5. İşi iyi tanımlayın; çözmek istediğiniz sorunu iyi belirleyin. Hiç bir sorunu büyütmeyin. Çubuğu biraz daha yükseltmek uğruna, bir tek soruna saplanıp kalmayın. 6. Daima diğer Web alanlarını inceleyin; kimin hangi sayfayı nasıl yaptığına bakın. Beğendiğiniz bir sayfanın kaynak kodunu sabit diskinize kaydetmiyorsanız, iyi bir tasarımcı değilsiniz demektir. Bu, hırsızlık anlamına gelmez. Sadece ilerde sıkıştığınız zaman size fikir verir. 7. Tasarımını yaptığınız sayfalara giren metinleri gerçekten okuyun. Ama gerçekten.. Metin ayırdığınız alana sığmadıyla, yazana söyleyin, kısaltsın. Dünyada daha kısaltılmayacak metin yazılmadı. 8. Renk kullanabiliyorsunuz diye, olur olmaz yerlere renk koymayın. Renk unsuru ateş gibidir; dikkat çeker. Kimi zaman da başka unsurdan dikkat çalar. 9. İyi müzik tasarımcının en büyük arkadaşıdır. Sayfa yaparken müzik dinleyin. 10. Haaa. Asla bedava iş yapmayın. Bir Dolar da olsa, her sayfa için mutlaka para isteyin. Bu, sizden bedava iş almak isteyene, sizin profesyonel bir tasarımcı olduğunuzu öğretir. Anna McMillan (Web tasarımcısı, animatör ): 1. Macromedia Flash'ı öğrenin. Ne kadar erken öğrenseniz o kadar iyi. Ama bu, GIF89, dHTML ve QuickTime'ı bilmeyebileceğiniz anlamına gelmez. 2. Animasyon'un bir hikayesi olması gerekir. Teması olmayan bir animasyon hem sizin için, hem de ziyaretçileriniz için zaman kaybı olur. 3. Cisimlerinizin düz çizgi üzerinde yürümesi kadar kötü bir görüntü olamaz. Motion Path'lerini canlandırın biraz! 4. Ya uygun ses kullanın, ya da hiç kullanmayın. Kötü seçilmiş bir ses, harika bir animasyonu berbat etmeye yeter. 5. Animasyon, gerçeğin abartılmasıdır. Dolayısıyla mümkün olduğu kadar herkesin aşina olduğu unsurlar kullanın; bir filmden bir sahne, ya da herkesin sokakta her an gördüğü türden bir otomobilin hareket etmesi sahnesi gibi. Gerçek dışı görünümlere başvurmaktan kaçının. Jeffry Veen (Hotwired Arabirim Yönetmeni ) 1. Bir grafiğin içine asla, ama asla metin koymayın. Metin, metindir. Grafik, grafiktir. İkisini birbirine karıştırmayın. Perde tablo gibi, tablo da perde gibi asılamaz. 2. Bir ziyaretçiyi, Geri düğmesini tıklamamaya ikna için üç saniyeniz var. Tam üç saniye. O halde ekrana hemen bir şey getirin. Öyle bir şey ki, ziyaretçi devam etsin bakmaya. 3. Herşeyin yüklenmesi için tam 30 saniyeniz var. Bu süre içinde sayfanızın tümü yüklenip bitmezse, kaybettiniz demektir. Emin olmak için siz bu süreyi 15 saniye olarak hesaplayın. 4. Internet'teki arama alanları sizin sayfanızı bulabiliyor mu? Bilmiyor musunuz? Peki, ya META tag'lerin neye yaradığını biliyor musunuz? 5. Ziyaretçiyi hiç mi hiç ilgilendirmeyen tek şey, sizin Web alanınızın nasıl işlediğidir. Onları ilgilendiren Web alanınızın içeriğidir. Basit ve hızlı: içeriği verin. O kadar. Erik Adigard (Tasarım Yönetmeni ): 1. Web'de tek kural var: Basitlik. 2. Web'de baskı dünyasındaki gibi "Basılınca iyi durdu" diye bir şey olamaz: Neyin nasıl görüneceğine yüzde 100 emin olmalısınız. 3. Web tasarımcılarının Internet'teki tartışmalarını izleyin; ama dediklerini asla yapmayın. Sayfalarınızı Web tasarımcıları için değil, bir müşteri ve onun muhtemel müşterileri için yapıyorsunuz. 4. Muhtemel ziyaretçileri tanımaya çalışın. Kimlerdir? neden hoşlanırlar? Hangi filmleri görürler? Hangi müzikleri dinlerler? 5. Bilgisayarı avucunuzun içi gibi bilmelisiniz. Erik Eaton (HotWired Tarımcısı ) 1. Sayfalarınızda asla "#FF36C6" rengini kullanmayın. 2. Bilgisayarınızdaki bütün fontları silin. Bir arkadaşınıza "Bana üç adet font ver: biri mono-space, diğeri serif, üçüncüsü de sans serif olsun," deyin. Ve hayatınızın sonuna kadar bu üç fontla idare etmeye hazır olun. 3. Kendinizi gerçekten Web tasarımcısı gibi görmeye başladı iseniz, bir süre başka bir iş tutun. Jonathan Louie (Tasarım Yönetmeni ) 1. Designer (Tasarımcı ), Flemenkce'de "Vormgeving" demektir. Bunun anlamı "Şekil veren." Designer/Tasarımcı, denildiği zaman biraz kendimize fazla pay çıkartıyoruz gibi geliyor. Bizim işimiz belirli bir içeriğe, zevkli, işleyen, yazanla okuyan arasına girip kafa karıştırmayan bir şekil vermekten ibaret. Bunu sık sık unutuyoruz. 2. Bugüne kadar gördüğüm en iyi Web sayfasını, amatörlerin yaptığını söylemeliyim. Herhangi bir derneğin üyeleriyle haberleşme sayfası, çoğu sözümona tasarımcının övüne övüne bir hal olduğu harikalarından daha iyi. 3. Satış çağında yaşıyoruz. Yaptığınız iş satılıyor mu? Ona bakın! Lisa Seaman (HotWired'in ilk tasarımcısı ) 1. İçinizden bir ses,"Bu iş olmadı" diyorsa, o iş olmamış demektir. 2. Web (hatta bütün gazete-dergi ) tasarımcıları sanatçıdan çok avukata benzerler. Yaptığınız işe aşık olmanız gerekmez. Ama sizin göreviniz, o işi en iyi şekilde, sanki kendi işinizmiş gibi yapmak zorundasınız. 3. Moda olan şeylere çok aldırmayın. Mesela, herkes gölge verme sevdasına kapıldı diye, olur olmaz yere gölge koymayın. Buna karşılık teknolojiyi adım adın izleyin. Browser programların beta sürümlerini alın ve herkesden önce aşina olmaya bakın. 4. Ve unutmayın, her iş planladığınızdan en az iki kat daha fazla zaman alır. Doug Bowman (Tasarımcı ) 1. İyi tasarım,"Ay, ne iyi olmuş" değil de "Ay, ne güzel yazı" veya "Ay, ne kötü yazı" dedirten tasarımdır. 2. Bilgisayarlar, bir işi ne zaman kaydedeceğinizi önceden anlar ve siz Kaydet'i tıklamadan önce çökerler. Dolayısıyla, daima Kaydet'i tıklayın. Birinden birinde, siz daha erken davranmış olabilirsiniz! 3. Tasarım, genel iletişimin bir parçasıdır. Yapılmak istenen iletişim, sizinle Web ziyaretçileri arasında değil, müşterinizle onun Web ziyaretçileri arasında olacak. Siz sadece aracısınız. 4. Sayfayı bitirin, herşey tamam olduktan sonra renk vermeye başlayın. O zaman daha az renk kullanırsınız. Mike Kuniavsky (Program Arabirim Tasarımcısı 1. Herkes beklemekten nefret eder. 2. Herkes aşağı yukarı kaydırmaktan nefret eder. 3. Herkes okumaktan nefret eder. 4. Hiç kimse tutarlı değildir. Jim Frew (Webmonkey Tasarım Yönetmeni ) 1. Tasarım, bir mesajın iletilmesi için görsel aracı bulmaktır. Ne yapmak istediğinizi güzel bir cümle halinde kağıda yazın. Tasarımın yüzde 50'si tamam demektir. 2. Önce tasarım sürecini belirleyin: İçerik kimden geçecek; düzeltmeleri kim yapacak; grafikler için son kararı kim verecek? Siz kime karşı sorumlusunuz? Son "Tamam" kimden çıkacak? Bunları iyice belirlemeden, sayfaya elinizi sürmeyin. 3. Tasarımcı olarak siz ne metin yazarısınız, ne fotoğrafçı, ne illüstrator. Bırakın herkes işini bildiği gibi yapsın. Sizin sayfa tasarımınıza karışılsa, birisi omuzunuzdan sürekli ne yaptığınıza baksa, memnun olur musunuz? 4. Bir işi, önce HTML, sonra CSS ile çözümlemeye çalışın. Bunlar yetersiz kalınca GIF'e başvurun. 5. 12'ye beş kala, hala ortada hiç bir şey yok ve siz metin yazarları, fotoğrafçılar ve illüstratörler konusunu makinalı tüfekle halletmeye karar vermek üzeresiniz. Unutmayın bu bir hal çaresi olamaz; tersine sayfayı daha da geciktirir. (Polis, adliye filan zaman alan şeylerdir! ) Tersine, iyi müzik koyun sete. Herkese çay, kahve, gazoz, filan ısmarlayın. Herkes sizin çok rahat olduğunuzu hissetsin; daha rahat çalışırlar. EK-B HTML Etiketleri Bu tablo, etiketlerin kısa açıklamalarını örneklerle göstermektedir. Browser'ların HTML etiketleri ile uyumluluklarını tablodan öğrenebilirsiniz. NN: Netscape Navigator IE: Internet Explorer W3: World Wide Web Consortium (W3C ) Etiket Açıklama/Örnek NN IE W3 <!-- --> Açıklama-Yorum belirtir (comment ) <!-- burası yorum satırı --> 3.0 3.0 3.2 <!doctype> Döküman tipini belirtir (document type ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 3.0 3.0 3.2 <a> Anchor-Bağlantı oluşturur <a href="www.pclife.com.tr">PCLife</a> 3.0 3.0 3.2 <abbr> Kısaltma belirtir (abbreviation ) <abbr title="Türkiye Cumhuriyeti">T.C.</abbr> - - 4.0 <acronym> Kısaltma başharflerini belirtir (acronym ) <acronym title="World Wide Web">WWW</acronym> - 4.0 4.0 <address> Adres belirtir <address> Kaptan Memo<br> Kaptanlar Cad.<br> No:19 </address> 4.0 4.0 4.0 <applet> Java applet eklemede kullanılır <applet code="takvim.class">...</applet> 3.0 3.0 3.2 <area> Resim haritalarında alan koordinatı belirtmekte kullanılır <area coords="20,10,100,10" href="anasayfa.htm"> 3.0 3.0 3.2 <b> Metni koyu yazar <b>Koyu metin</b> 3.0 3.0 3.2 <base> Çerçevelerle kullanılır. Bağlantı verilen döküman için varsayılan çerçeveyi belirler. <base target="frame_adi"> 3.0 3.0 3.2 <basefont> Sayfa metninin yazıtipi ayarlarını belirler. <basefont face="arial" size="5"> 3.0 3.0 3.2 <bdo> Metni tersinden yazar <bdo dir = "rtl">Ey edip Adana'da pide ye</bdo> - 5.0 4.0 <big> Metni bir ölçü büyük yazar <big>büyütülmüş yazı</big> 3.0 3.0 3.2 <blockquote> Metnin satırbaşı girintisini artırır <blockquote>Yazılar daha solda</blockquote> 3.0 3.0 3.2 <body> Sayfanın gövde (body ) bölümünü belirtir. <body> ... </body> 3.0 3.0 3.2 <br> Satırbaşı oluşturur (line break ) <br>Yeni satırbaşı 3.0 3.0 3.2 <button> Formlar için düğme oluşturur (button ) <button>Gönder</button> - 4.0 4.0 <caption> Tabloya açıklama ekler <caption>Tablo Açıklaması</caption> 3.0 3.0 3.2 <center> Sayfadaki nesneleri ortalar <center>ortalanmış yazı</center> 3.0 3.0 3.2 <cite> Alıntı belirtir <cite>Cumulus stratus: </cite> bu kısım ansiklopediden alınmıştır 3.0 3.0 3.2 <code> Kod belirten metinlerde kullanılır <code>border</code> çerçeveyi belirler 3.0 3.0 3.2 <col> Tablo sütun gruplarına uygulanacak özellik belirtir <col align="left"> - 3.0 4.0 <colgroup> Tablo sütun grubu oluşturur <colgroup span="2"></colgroup> - 3.0 4.0 <dd> Tanımlama listelerinde tanımlama metni oluşturur <dd>Tanımlama metni 3.0 3.0 3.2 <del> Silinmiş metin belirtir Bir düzine <del>20</del> 12 adettir - 4.0 4.0 <dfn> Tanım belirtir Yaprakların altındaki gözeneklere <dfn>stigma</dfn> denir - 3.0 3.2 <dir> liste oluşturur <dir> <li>Liste öğesi </dir> 3.0 3.0 3.2 <div> Bölüm oluşturur (division ) bu bir: <div>bölüm</div> 3.0 3.0 3.2 <dl> Tanımlama Listesi oluşturur (definition list ) <dl> <dt>Liste öğesi </dl> 3.0 3.0 3.2 <dt> Tanımlama ifadesi oluşturur <dl> <dt>Liste öğesi </dl> 3.0 3.0 3.2 <em> Vurgulu metin belirtir <em>Hey!</em> buraya gel 3.0 3.0 3.2 <fieldset> Form kutusu oluşturur <fieldset> Boy <input type="text" size="3"> Kilo <input type="text" size="3"> </fieldset> - 4.0 4.0 <font> Yazıtipi ayarlarını belirtir <font face="verdana" size="3" color="red"> 3.0 3.0 3.2 <form> Form oluşturur <form> Adı <input type="text" size="8"> Soyadı <input type="text" size="8"> </form> 3.0 3.0 3.2 <frame> Çerçeve dosyalarını tanımlar <frame name="solmenu" src="sol.htm"> 3.0 3.0 4.0 <frameset> Çerçeve oluşturur (frame ) <frameset>...</frameset> 3.0 3.0 4.0 <h1> ... <h6> 1'den 6'ya kadar değişik ebatlarda başlık oluşturur <h1>Başlık</h1> 3.0 3.0 3.2 <head> Sayfanın baş (head ) bölümünü belirtir <head> ... </head> 3.0 3.0 3.2 <hr> Yatay çizgi oluşturur <hr> 3.0 3.0 3.2 <html> Sayfanın HTML dökümanı olduğunu ifade eder <html> ... </html> 3.0 3.0 3.2 <i> Metni eğik yazar (italic ) <i>Eğik metin</i> 3.0 3.0 3.2 <iframe> Yüzen çerçeve oluşturur <iframe src ="default.asp"></iframe> - 3.0 4.0 <img> Grafik ekler <img src="resim.gif"> 3.0 3.0 3.2 <input> Form öğeleri oluşturur <input type="text"> <input type="button"> <input type="radio"> <input type="checkbox"> 3.0 3.0 3.2 <ins> Eklenmiş metin belirtir bir düzine <ins>12</ins> adettir - 4.0 4.0 <isindex> Metin kutusu oluşturur <isindex prompt="Adınız "> - - - <kbd> Klavye metni belirtir Metin kutusuna <kbd>TL</kbd> yazınız 3.0 3.0 3.2 <label> Form öğeleri için etiket belirtir <label for="kimlikBilgileri"> Adınız: <input type="text"> </label> - 4.0 4.0 <legend> Form kutusu için başlık oluşturur <fieldset> <legend>Kredi Kartı Bilgileri</legend> Kart no: <input type="text"> </fieldset> - 4.0 4.0 <li> Liste öğesi belirtir <li>Liste öğesi 3.0 3.0 3.2 <link> Sayfa ile ilgili harici dosyalara bağlantı verir <link rel="stylesheet" type="text/css" href="stiller.css"> 4.0 3.0 3.2 <listing> Metinleri yazıldığı şekliyle görüntüler <listing> <br> etiketi kullanmadanalt satıra geçtik </listing> 3.0 3.0 3.2 <map> Resim haritası oluşturur <map name="harita"> ... </map> 3.0 3.0 3.2 <menu> Liste oluşturur <menu> <li>Liste öğesi </menu> 3.0 3.0 3.2 <meta> HTTP başlık bilgileri içerir <meta http-equiv="content-type" content="text/html" charset="windows-1254"> 3.0 3.0 3.2 <noframes> Çerçeve etiketini tanımayan eski tarayıcılar için alternatif kod bölümü belirtir <noframes>Browser'ınızı güncelleyin!</noframes> 3.0 3.0 4.0 <noscript> Script çalıştırma özelliği kapalı tarayıcılar için alternatif kod bölümü belirtir <noscript>güzelim scriptleri kaçırıyorsunuz!</script> 3.0 3.0 4.0 <object> Applet, video dosyası gibi nesneleri eklemekte kullanılır <object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="ayarla"> <param name="BorderStyle" value="1"> </object> - 3.0 4.0 <ol> Sıralı liste oluşturur <ol> <li>Liste öğesi </ol> 3.0 3.0 3.2 <option> Formlar için kullanılabilecek liste kutusu seçenekleri oluşturur <select> <option>Beni seç </select> 3.0 3.0 3.2 <p> Paragraf oluşturur <p>Bu bir paragraf</p> 3.0 3.0 3.2 <param> <object> veya <applet> etiketi ile yerleştirilen nesnenin parametrelerini belirtir <object> <param name="Min" value="0"><param name="Max" value="10"> </object> 3.0 3.0 3.2 <plaintext> Metni yazıldığı şekliyle görüntüler Sayfa kodu aşağıda <plaintext> <html> <head> ... 3.0 3.0 3.2 <pre> Metni yazıldığı şekliyle görüntüler <pre> <br> etiketi kullanmadanalt satıra geçtik </pre> 3.0 3.0 3.0 <s> Metnin üzerini çizer Şafak: <s>550</s> 3.0 3.0 3.0 <script> Script kodu veya kaynağını belirtir <script language="Javascript">...</script> 3.0 3.0 3.2 <select> Formlar için liste kutusu oluşturur <select> <option>Beni seç </select> 3.0 3.0 3.2 <small> Metni 1 ölçü küçültür <small>Küçültülmüş metin</small> 3.0 3.0 3.2 <span> Bölüm oluşturur <span>Bu bir bölüm</span> 4.0 3.0 4.0 <strong> Metni belirgin yazar Enflasyon: <strong>%39</strong> 3.0 3.0 3.2 <style> stil grubu oluşturur <style> h1 {font-size: 12px} </style> 4.0 3.0 3.2 <sub> Altyazı oluşturur H<sub>2</sub>O 3.0 3.0 3.2 <sup> Üstyazı oluşturur 27<sup>o</sup> 3.0 3.0 3.2 <table> Tablo oluşturur <table> ... </table> 3.0 3.0 3.2 <tbody> Tablo gövde (body ) bölümünü oluşturur <tbody> ... </tbody> - 4.0 4.0 <td> Tablo hücresi oluşturur <td>Tablo hücresi</td> 3.0 3.0 3.0 <textarea> Formlar için metin alanı oluşturur <textarea cols="30" rows="5">...</textarea> 3.0 3.0 3.2 <tfoot> Tablo ayak (foot ) bölümünü oluşturur <tfoot> ... </tfoot> - 4.0 4.0 <th> Tablo sütun başlığı oluşturur <th>Sütun başlığı</th> 3.0 3.0 3.2 <thead> Tablo baş (head ) bölümünü oluşturur <thead> ... </thead> - 4.0 4.0 <title> Sayfa başlığını belirtir <title>Sayfama Hoşgeldiniz</title> 3.0 3.0 3.2 <tr> Tablo satırı oluşturur <tr> <td>Tablo hücresi</td> </tr> 3.0 3.0 3.2 <tt> Metinleri daktilo harfleri ile yazar <tt>bu daktilo yazısı</tt> 3.0 3.0 3.2 <u> Metinleri altıçizili yazar (underline ) <u>Bu konunun altını çizin</u> 3.0 3.0 3.2 <ul> Sırasız liste oluşturur (unordered list ) <ul> <li>Liste öğesi </ul> 3.0 3.0 3.2 <xmp> Metni yazıldığı şekliyle görüntüler <xmp> <br> etiketi kullanmadan alt satıra geçtik </xmp> 3.0 3.0 3.2 |
|
Alıntı yerler mevcuttur. düzeltmeler ve eklemeler yapılmıştır. |