AMATÖR WEB TASARIMCISININ
H T M L
REHBERİ
İÇİNDEKİLER
ÖNSÖZ
BÖLÜM 1
Internet Nedir? Nasıl Çalışır?
HTTP ve TCP/IP
Web Server
Browser (Web Tarayıcısı)
WEB'in Dili: HTML
BÖLÜM 2
HTML'de Metin
HTML'de Grafik ve Multimedya Öğeleri
HTML'de Renkler
RGB ve Heksadesimal Renk Koduna Yakın Bakış
Etiketler (Tag) ve Parametreler (Attribute)
HTML Sayfasının Bölümleri
Metne Satır Başı Verme
BÖLÜM 3
Başlık Etiketleri: <h1>, <h2>, <h3>, <h4>, <h5> ve <h6>
Paragraf Etiketi: <p>
Ortalama Etiketi: <center>
Koyu, Eğik (İtalik) ve Altıçizili Yazılar
Diğer Metin Düzenleme Etiketleri
<big> ve <small> Etiketleri
<blockquote> Etiketi
Yatay Çizgi
Özel Karakterler
Yorum-Açıklama Satırı
<nobr> Etiketi
<s> Etiketi
<pre> Etiketi
<sup> ve <sub> Etiketleri
Yazı Tipi (Font)
Metinleri Renklendirme
<basefont> Etiketi
Listeler
Sıralı Listeler (Ordered List) : <ol> ... </ol>
Sırasız Listeler (Unordered List) : <ul> ... </ul>
Tanımlama Listeleri (Definition List) : <dl>...</dl>
BÖLÜM 4
Grafik ve Renkler
Grafik Etiketi: <img>
Grafik Dosyasının Ebatları
Resimleri Hizalama
hspace - vspace Parametreleri
border Parametresi
Sayfa Fonunda Resim Kullanmak
BÖLÜM 5
Bağlantılar
accesskey Parametresi
charset Parametresi
title Parametresi
target Parametresi
Bağlantılarda Farklı Renkler Kullanmak
Resim Haritaları (Image Map)
BÖLÜM 6
Tablolar
border Parametresi
cellpadding ve cellspacing Parametreleri
Tabloyu Renklendirme ve Fon Olarak Grafik Kullanma
Tablo ve Hücrelerin Ebatlarını Belirlemek
Tablolarda Hizalama
Hücreleri Birleştirme
Bilgi Sunma Aracı Olarak Tablo
bordercolor, bordercolordark, bordercolorlight Parametreleri
rules ve frame parametreleri
Yapı İskeleti Olarak Tablolardan Yararlanma
BÖLÜM 7
Çerçeveler
frameborder Parametresi
border Parametresi
bordercolor Parametresi
framespacing Parametresi
frameborder Parametresi
noresize Parametresi
scrolling Parametresi
marginwidth ve marginheight Parametreleri
Çerçeve İçindeki Bağlantılarla Diğer Çerçevelerin İçeriklerini Değiştirmek
EK-A
Web Tasarımcılarından Öğütler
EK-B
HTML Etiketleri
Ö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.
İki seriden 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.
Teşekkür
Öncelikle beni yetiştiren ve bugünlere gelmem için her türlü fedakârlığı gösteren Sevgili Aileme teşekkür ederim. İyi kötü birçok günlerimizi, kederlerimizi, mutluluklarımızı paylaştığımız buraya yazamayacağım kadar çok dostumu da bu kısa teşekkür satırlarında anmak isterim. Özellikle bu kitabı birlikte kaleme aldığımız, kendisinden çok şey öğrendiğim Sevgili dostum, ağabeyim Dr. Hakkı ÖCAL'a teşekkür ederim.
Titizlikle incelenmiş olmasına rağmen varsa yazım ve kodlama hataları bana aittir.
Bu kitapta yer alan kodları
http://www.pclife.com.tr/.........................../awthr_kodlar1.zip adresinden bilgisayarınıza indirebilirsiniz.
BÖLÜM 1
Internet Nedir? Nasıl Çalışır?
Internet'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=&
