Bu bölümdeki konu başlıklarımız

1. Web Tasarımı Tam Olarak Ne Anlama Geliyor?
2. İlk Sayfamızı Oluşturalım
3. < ile > Arasındaki Şeyler Ne İşe Yarıyor?
4. Doküman içinde açıklama satırları nasıl yazılır?
5. Özet

1.2 İlk Sayfamızı Oluşturalım!

Bu iş için basit bir metin editörü veya kelime işlemci yeterli. Eğer işletim sisteminiz Windows ise Not Defterini (NotePad), MacOS ise TeachText'i, Unix'se vi'yi kullanabilirsiniz. Aslında olasılıkların sınırı yok. Başlangıç için bu basit editörleri öneriyorum; çünkü ayrıca satın almanız gerekmiyor - işletim sisteminizle beraber geliyorlar. Karışık Web sayfalarında Not Defteri ve TeachText size biraz zorluk çıkaracaktır; çünkü bunların Bul/Değiştir özelliği yok. Yine de şimdilik fazlasıyla yeterliler. Evet hadi başlayalım!
Metin Editörünüzü yükleyin ve aşağıdaki satırları editörünüzde yazın.

ornek1.html
<HTML>
<HEAD>
<TITLE>İlk Sayfam</TITLE>
</HEAD>
<BODY>

<CENTER>Örnek Sayfa #1</CENTER>

Kalın yazılar genellikle vurgulanması gereken şeyler için kullanılır. Yatık (italik) yazılar ise benzer amaçlarla kullanılabilir; ama estetik amaçlı kullanımları daha yaygındır.

Sonra bu metni diskiniz üzerinde bir yere ornek1.htm ismiyle kaydedin (karışıklığı önlemek için bu yazı dizisindeki örneklere özel bir klasör kullanmanız önerilir) ve sayfamızı görüntülemek için şu an bu yazıyı görüntülediğiniz web tarayıcınıza geçin ve Ctrl+N'ye basarak yeni bir pencere açın.
Sıra Ctrl+O'ya basarak dosyamızı açmaya geldi. Internet Explorer kullanıyorsanız Browse'a, Netscape Communicator kullanıyorsanız Choose File düğmesine tıklayarak çıkan dosya ve klasör listesinden ornek1.htm'in bulunduğu klasörü bulun ve ornek1.html'in ismi üstüne çift tıklayın. Tekrar Dosya açma diyalog kutusuna geri döndük; ama artık ornek1.html'in tam yeri görünmekte. ornek1.html benim E: diskimde web adlı klasörün içinde. Sizinki bambaşka bir yerde olabilir tabi ki. Neyse Open'a basın ve ilk sayfamız nasıl görünüyor bir bakalım.
Not: Rahatlıkla fark edebileceğiniz gibi buradaki örnekleri görüntülemek için ilgili listeyi yukarıda anlatılan yöntemle diske kaydedip tekrar açmanıza gerek yok. Liste başlıklarının yanında görüntülenen "Göster" düğmesi basmanız da yeterli; ancak örnekler üzerinde oynamak ve sonuçlarını görmek için yine de yukarıda anlatılanları uygulamanız en kısa yöntem.

1.3 < ile > Arasındaki Şeyler Ne İşe Yarıyor?

Fark ettiğiniz gibi ekranda görüntülediğimiz metnin arasına serpiştirdiğimiz küçüktür (<) ve büyüktür (>) karakterleri arasındaki yazılar ekranda görüntülenmiyor. Bunun yerine bunlar yazının nasıl görüntüleneceğini belirliyor. Diğer bir deyişle < ve > karakterleri arasındaki her şey HTML işaretlerine karşılık geliyor ve bu işaretler kendilerinden sonra gelen metin üzerinde değişikliklere yol açıyorlar. Örneğin <CENTER> ile </CENTER> arasında kalan "Örnek Sayfa #1" ortalanıyor; ile arasında kalan "Kalın yazılar" ise ekranda kalın olarak görüntüleniyor. Buradan çıkarabileceğimiz sonuç bir HTML işaretinin etkisinin bittiği yerin aynı HTML işaretinin önüne / işareti konarak belirlendiği.
Peki eğer bir işareti kapatmazsak ne olur? Örneğin 'yi kaldıralım. Sonuç pek istediğimiz gibi olmayacaktır. Eğer bir işareti kapatmayı unutursanız o işaretten sonra gelen tüm metin o işaret ne yapıyorsa ondan etkilenecektir.

<CENTER>Örnek Sayfa #1</CENTER>

Kalın yazılar genellikle vurgulanması gereken şeyler için kullanılır. Yatık (italik) yazılar ise benzer amaçlarla kullanılabilir; ama estetik amaçlı kullanımları daha yaygındır.

<HTML>
Bir HTML dosyasının ilk satırı daima <HTML> son satırı da </HTML> olmalıdır. Bu iki işaret, Web tarayıcınızın, bir dosyanın HTML dosyası olup olmadığını anlamasının iki yolundan biridir. İki yolundan biridir dedik çünkü <HTML> işaretini kullanmasanız bile tarayıcınızın görüntületmek istediğiniz dosyanın bir HTML dosyası olup olmadığını anlamasının bir yolu daha var; o da dosyanın uzantısını .HTM veya .HTML yapmak. Siz yine de değişik Web tarayıcılarının sorun çıkarabileceği olasılığını göz önüne alıp her zaman için <HTML> ve </HTML> işaretlerini kullanın.
<HEAD>
<HEAD> ve </HEAD> arasında kalan bölüm HTML dosyası hakkındaki bilgileri tutar. Bunlardan bir tanesinin <TITLE> yani başlık satırı olduğunu gördük. Geri kalanları şimdilik ileriki bölümlere bırakalım. <HEAD> işaretini kullanmak zorunda değilsiniz; ama ileride özellikle kullanmanız gereken durumlardan bahsedeceğiz.
<TITLE>
Web tarayıcınızın başlık satırında görüntülenmekte olan HTML dosyasının başlığını göstermek için kullanılır. ornek1.htm için başlık olarak "İlk Sayfam"ı kullandık. Eğer bu işareti kullanmazsanız başlık olarak hiçbir şey görüntülenmez.
<BODY>
Asıl HTML dosyamız yani ekranda görüntülenecek herşey <BODY> ile </BODY> işaretlerinin arasında yer alır. Yine bu iki işareti kullanmak zorunda değilsiniz; ama ileride <BODY>'nin önemli başka işlere yaradığını göreceğiz.
Diğerleri...
<CENTER>, , ve 'nin ne işe yaradığını ileriki bölümlerde inceleyeceğiz. Aslında hariç diğerlerine kısaca değindik. İzleyen bölümde daha ayrıntılı bilgiler bulacaksınız.

HTML Döküman İçinde, kodu takip etmede kolaylıklar sağlayacak bazı açıklama satırları konabilir. Döküman içinde herhangi biryerde, "" belirteçleri arasında kalan hiçbirşey web istemcileri tarafından dikkate alınmaz.Örnek;

1.5 Özet

* Web sayfası tasarımının ne demek olduğunu ve HTML'in bir programlama dili değil işaretleme dili olduğunu öğrendik.
* Bir metin editörüyle basit bir sayfa hazırladık (ornek1.html).
* Her HTML dosyasının -zorunlu olmasa da- <HTML>, <HEAD> ve <BODY> satırlarını içermesi gerektiğini gördük:
* <HTML> işaretinin Web tarayıcılarının bir dosyanın HTML dosyası olup olmadığını anlamasında kullanıldığını,
* <HEAD> ile </HEAD> arasında kalan bölümün HTML dosyaları hakkında bilgi tutma işine yaradığını,
* HTML dosyasının esas görüntülenen bölümünün <BODY> ile </BODY> arasında yer aldığını öğrendik.
* <TITLE> işaretinin, görüntülenen HTML dosyasının başlığının Web tarayıcısının başlık satırında gösterilmesinde kullanıldığı öğrendik.

Eğer buraya kadar kafanızda bazı sorular oluştuysa ya da bazı şeyler size karışık geldiyse cesaretiniz kırılmasın; izleyen bölümler pek çok örnekle kafanızdaki soruların çoğunu temizleyecektir.

1. Giriş
2. Paragraf İşareti 
3. Satır Kesme İşareti 
4. Yanyana Birden Çok Boşluk Kullanımı ve Özel Karakter Kodları
5. Paragrafları Sola, Sağa Yaslamak ve Ortalamak
6. Özet

2.1 Paragraf Düzenleme İşaretlerine Giriş
Bir Web tarayıcısı bir HTML sayfasını, aşağı yukarı standart bir kelime işlemci (örneğin MS Word) bir metni nasıl görüntülüyorsa öyle görüntüler. Bir kelime işlemcide paragraflar ancak siz Enter tuşuna bastığınızda ayrılır; metni sola, sağa yaslayabilir veya ortalayabilirsiniz. Bütün bunları yapmak bir HTML sayfasında da mümkün. Ancak önemli bir farkı hemen söyleyelim: Bir Web tarayıcısı için bir HTML dosyasında yer alan metin içinde yeralan yanyana üç, beş veya elli boşluğun tek bir boşluktan farkı yoktur; hepsi tek boşlukmuş gibi görüntülenir. Üstelik boş satırların ve bir satırın en başındaki boşlukların da bir önemi yoktur - hiç görüntülenmezler.

Bir Web sayfasında boşlukların hiçbir önemi yoktur.

Örneğin aşağıdaki metin hep aynı görüntülenecektir:

01 boşluk 
03 boşluk 
05 boşluk 
50 boşluk

 
En baştaki boşluklar ise hiç görüntülenmez:

3 boşlukla içerden başlanmış bir paragraf en soldan başlar.

Peki yanyana birden çok boşluk kullanamıyorsak paragraflara nasıl içeriden başlayacağız veya tablo şeklindeki verileri nasıl ekranda doğru göstereceğiz gibi sorular aklınıza gelebilir. Bunların hepsinin çözümü var. Okumaya devam edin!

2.2 Paragraf işareti 
Liste 2'de işaretini koymamızın nedeni -her bir cümleyi paragraf olarak düşünürsek- paragrafları birbirinden bir boş satırla ayırmak. Eğer ilk iki cümle arasında kullanmazsak her ne kadar Liste 2'de bu cümleler alt alta yer alıyor olsalar da bu iki cümle birbirine bitişir. O zaman 'yi paragrafları birbirinden ayırmak için kullanıyoruz ve Web tarayıcısı bir işareti gördüğünde önceki paragrafı bitiriyor, bir boş satır bırakıyor ve yeni paragrafa başlıyor.
Burada önemli olan sizin bir metinde cümleleri ve paragraflarını nereden kestiğiniz değil. Herhangi bir kelime işlemcide yazdığınız yazıların, sayfa genişliğini değiştirdiğinizde otomatik olarak o sayfa genişliğine göre hizalandığını hatırlayın. Web tarayıcısı da çok benzer bir mantıkla çalışır: ile bölünen paragraflar Web tarayıcınızın penceresinin boyutlarına göre otomatik olarak hizalanırlar. Böylece bir paragrafın ilk cümlesi 8. kelimeden bölünürken pencerenin boyutunu büyüttüğünüzde 10. kelimeden bölünebilir.
Birden çok boş satır bırakmak istiyorsak birden çok mi kullanmalıyız peki? Hayır, ne yazık ki bu bir işe yaramaz. Bu iş için 'yi kullanıyoruz.

2.4 Yanyana Birden Çok Boşluk Kullanımı ve Özel Karakter Kodları

Yanyana birden çok boşluk koymanın normal yollardan mümkün olmadığından bahsetmiştik; ama bunun bir yolu var: Özel karakterler kullanmak. Normalde klavyeden giremediğiniz özel karakterleri, karşılık gelen kodlarla yazabiliriz. Tüm özel karakter & ile ; arasında yer alan kodlarla gösterilir. En çok kullanılan birkaç tanesini burada veriyorum.

 Boşluk
© © işareti
< <
> >
& &

Tahmin edeceğiniz üzere yanyana birden çok   yazmamız birden çok boşluğun görüntülenmesini sağlıyor. Böylece Liste 3'de olduğu gibi paragraflara içeriden başlamak veya iki kelime arasında birden çok boşluk bırakmak mümkün oluyor.
İpucu: Yanyana her boşluk için   yazmak yerine -Liste 3'de olduğu gibi- bir   bir boşluk yazabilirsiniz. Böylece daha az yazmış olursunuz.
Küçüktür (<) ve büyüktür (>) işaretleri HTML işaretleri için kullanıldığından bunları yazı içinde kullanmanız gerektiğinde sırasıyla < ve > kullanın.
Eğer siz de benim gibi HTML üzerine bir yazı yazıyorsanız ve  'yi veya diğer özel karakter kodlarını yazı olarak bir HTML dosyasına yerleştirmeniz gerekiyorsa çözümünüz & Liste 3'de görüldüğü üzere eğer doğrudan   yazsaydık ekrana sadece fazladan bir boşluk basılacaktı. Onun yerine & işaretinin kodunu & ile değiştiriyoruz.
Liste 3'ün sonucunda  'nin doğru görüntülendiğine ve GetRight ile 3.0 arasındaki boşluklarla paragraf başlarındaki boşluklara dikkat!

<CENTER>
&nbsp; ile yanyana birden çok boşluk bırakmak mümkün!

 
GetRight   3.0
</CENTER>

     Internet'ten Internet Explorer veya Netscape Navigator kullanarak bir dosya çekerken, özellikle de dosya büyükse işiniz şansa kalmıştır. Dosyayı çektiğiniz yer bağlantıyı keser, hat kesilir, bilgisayarınız kilitlenir ve hatta elektrikler kesilir ve olan tabi ki çektiğiniz dosyaya olur. Dördüncü nesil Web tarayıcılarından birini kullanıyorsanız çektiğiniz dosyayı kaldığınız yerden çekmeye devam etmek konusunda az da olsa şansınız vardır; ama modeminizle örneğin %95'i bitmiş 12 MB'lık bir dosya çekiyorken bağlantı koparsa herhalde işinizi şansa bırakmak istemezsiniz.

     GetRight'ın programcısı Michael Burford, 28.800'lük modemiyle %95'i bitmiş "çok ama çok uzun" bir dosyayı çekerken hattın kesilmesi gibi bir faciayla karşılaşmış pek çok insandan biri. Bu durum, neyse ki, böyle sorunlara tamamiyle son verecek bir program yazmak için motivasyon olarak kullanılmış.

2.5 Paragrafları Sola, Sağa Yaslamak ve Ortalamak

Bir paragrafı sola ve sağa yaslamak için o paragrafın önüne sırasıyla veya işaretlerini koymak gerekiyor. Buradaki P bildiğimiz işaretinin P'si. ALIGN ise İngilizce "hizala" anlamına geliyor. Tahmin edebileceğiniz gibi "left" sol, "right" da sağ anlamına geliyor.
Ortalamak içinse iki yöntem var. Çoğunlukla tercih edilen yöntem, ortalanacak metni <CENTER> ile </CENTER> işaretleri arasına almak. Diğer yöntem ise ortalanacak paragrafın önüne koymak ama bu sadece bir paragraf üzerinde (başka bir deyişle sonraki ilk 'ye kadar) işe yaradığı için genellikle pratik nedenlerden ötürü <CENTER> işareti kullanılıyor. Siz bu işareti </CENTER> ile kapatıncaya kadar arada kalan tüm metin ortalanıyor.
Dikkat: Liste 4'te de görebileceğiniz gibi işaretini kullanmanız bir satır boşluk oluşturmaz. Paragrafları ayırmak için ayrıca işareti gerekir.

ornek4.html
<HTML>
<HEAD>
<TITLE>Paragrafları Hizalamak</TITLE>
</HEAD>
<BODY>

Sola hizalanmış bir paragraf.


Sağa hizalanmış bir paragraf.


 ile ortalanmış bir paragraf.

 
 
<CENTER>
<CENTER> ile ortalanmış ilk paragraf.

Bu da ikincisi.
</CENTER>

Şeytanın Avukatı: Birinci bölümde her HTML işaretinin kapatılması gerektiğini görmüştük; ama bu bölümde ve için böyle birşey söylemedik. Az sayıda da olsa bazı HTML işaretlerini kapatmanız gerekmez çünkü bunun bu iki örnekte olduğu gibi bir anlamı yoktur. Aslında kapatma işaretini kullanmanız mümkün ama benim düşünceme göre bu tamamen gereksiz. diye bir şey ise zaten yok.

2.6 Özet

* HTML sayfalarındaki yazılarda kullanılan boşlukların, boş satırların ve cümlelerin bölünüş yerinin bir önemi olmadığını ve bunların bizzat bizim tarafımızdan belirtilmesi gerektiğini gördük.
* ve işaretlerinin yaptıkları işin çok benzer olduğunu ve farklılıklarını öğrendik.
* Özel karakterlerin nasıl kullanıldığını ve özel bir karakter olan   sayesinde nasıl yanyana birden çok boşluk koyabildiğimizi öğrendik.
* Bir paragrafı ile sola, ile sağa yaslayabileceğimiz ve ile ortalayabileceğimizi gördük. <CENTER> </CENTER> işaretleri arasındaki herşeyi pratik bir şekilde ortalayabileceğimizi gördük.

1. Giriş
2. Font Değiştirme
3. Font Büyüklüğü
4. Font Rengi
5. Bir Web Sayfasının Arkaplan Rengini Değiştirmek
6. Özet

3.1 Fontlar ve Renklere Giriş

İkinci bölümde paragraflarla ilgili işaretleri gördük; ama doğrusunu söylemek gerekirse şimdiye kadar yaptığımız tüm örnekler hep düz yazıdan oluştuğu için biraz kuru gözüküyordu. Bu bölümde düz yazılara nasıl canlılık getireceğimizi göreceğiz.
İlk olarak önceki bölümlerden zaten bildiğiniz ya da işlevini tahmin ettiğiniz temel işaretlere kısaca bir değinelim. Farkedeceğiniz gibi burada yeni olan sadece :
 Kalın Yazı
 ve işaretleri arasındaki tüm metin kalın görüntülenir.
 İtalik Yazı
 ve işaretleri arasındaki tüm metin italik (yatık) görüntülenir.
 Altı çizili Yazı
 ve işaretleri arasındaki tüm metin altı çizili olarak görüntülenir.
3.2 Font Değiştirme
 Font Ayarları
 işareti tek başına bir iş yapmaz. Arkasına doğru parametreleri vermemiz gerekir:

Font Değiştirme
Bu işaretle kullanılan fontu değiştirebiliriz. Örneğin fontu Arial yapmak için yazmak yeterlidir. Ancak font isimleri bazen oldukça uzun ve karmaşık olabiliyor. Kullanmak istediğiniz fontun tam ismini öğrenmek için kullandığınız tarayıcılardan yararlanabilirsiniz.

Eğer Netscape Navigator 4.x kullanıyorsanız Edit menüsünden Preferences'ı seçin ve çıkan diyalog kutusunun sol tarafındaki panelde Fonts'un üstüne tıklayın. Buradan kullanabileceğiniz fontların isimlerini görebileceğiniz gibi aynı zamanda varsayım font ayarlamalarını da yapabilirsiniz. Eğer Internet Explorer 5.x kullanıyorsanız Tools menüsünden Internet Options'ı seçin ve çıkan diyalog kutusundaki Fonts düğmesine tıklayın. Netscape Navigator'daki aynı ayarlamaları burada da yapabilirsiniz.

Bir HTML dosyasında herhangi bir işareti yer almıyorsa tarayıcınız varsayım fontu kullanacaktır. Varsayım fontlar tarayıcıdan tarayıcıya değişir ve biraz önce gördüğümüz gibi siz de bunları değiştirebilme olanağına sahipsiniz. Bu yüzden eğer işareti kullanmazsak Web sayfalarımız değişik tarayıcılarda farklı gözükebilir.
Internet, pek çok değişik bilgisayar sisteminin bağlı olduğu muazzam büyüklükte bir ağ olduğundan bağlı her bilgisayar üzerinde sizdeki fontların aynısının olmasını bekleyemezsiniz. Örneğin bir Mac'te Windows'un standart fontu Arial'ı bulmanız oldukça düşük bir olasılıktır. Hatta aynı işletim sistemini kullanan bilgisayarlar bile font uyuşmazlığı sorununu sık sık yaşayabilirler. Örneğin sistemimdeki fontlara göz gezdirdiğimde Stonehenge isminde antik yazı karakterleri görüntülemekte kullanılan bir fontum olduğunu hatırladım. Doğrusunu söylemek gerekirse bu fontun nereden geldiğini hatırlamıyorum. Internet üzerindeki bir siteden çekmiş olabilirim, kullandığım yazılım paketlerinden biri haberli veya habersiz sistemime kurmuş olabilir vs. Tahmin edeceğiniz üzere Internet'te sörf yapanların büyük bir bölümünde bu fontun olma olasılığı oldukça düşük. Bu yüzden olabildiğince yaygın kullanıma sahip fontlar kullanmaya gayret edin. Yoksa sayfanızı ziyaret eden insanların tarayıcıları, kullandığınız fontları kendi sistemlerinde bulamazlarsa varsayım font ayarlamalarını kullanırlar ki bu da istenmeyen bazı sonuçlara yol açabilir.

Neyse ki font uyuşmazlığı problemlerine bir ara çözüm mevcut. Eğer işareti içinde adı geçen font sistemde mevcut değilse bunun yerine başka fontların kullanılmasını sağlayabilirsiniz. Örneğin işaretini gören bir tarayıcı eğer sistemde Verdana mevcut değilse sırasıyla Arial ve Helvetica'yı deneyecektir. Eğer bu üç font da sistem de yoksa yine varsayım font neyse ona kaldık ama bu fontlardan birinin bulunma olasılığı oldukça yüksek; çünkü ilk iki font neredeyse tüm Windows kurulu bilgisayarlarda bulunurken sonuncu font Helvetica ise Mac'lerin çoğunda standart olarak kuruludur. Bu arada font isimlerini yanlış yazmamaya dikkat edin; çünkü tahmin edeceğiniz gibi "font bulunamadı" türünden bir hata mesajı yerine varsa sıradaki font denenecek ve en sonunda -gerek kalırsa- varsayım font kullanılacaktır.
İpucu: Daha dikkat çekici olduğu için başlıklarda genellikle Arial ve Helvetica tırnaksız (serif'siz) fontlar kullanılır. Metnin geri kalanında ise okumayı kolaylaştırdığı için Times New Roman gibi tırnaklı (serif'li) fontlar kullanılır.

Arial, başlıklar için uygun tırnaksız bir fonttur. Başlık için kullanıldığında kalın kullanılması daha uygun olur.

Times New Roman, okunması kolay tırnaklı bir fonttur.

Bu satır PC'lerde Arial, Mac'lerin çoğunda ise Helvetica fontuyla görüntülenecektir.

</BODY>
</HTML>

3.4 Font Rengi

Şimdiye kadar ekrana ne yazdıysak hep siyah renkli oldu; arkaplanımız da hep beyazdı. Gerçi kullanılacak renkleri bizzat belirlemediğimiz için bazı tarayıcılarda arkaplan rengi örneğin gri olabiliyor; ama artık renkleri belirlemeye başlıyoruz. Renk değerleri verilirken şu şekilde hareket edilir :
Genel renk tanımı : "#RRGGBB" dir. Burada, RR, GG, ve BB, sırasıyla kırmızı (red), yeşil (green) ve mavi (blue) renklerin toplam renk içindeki yoğunluğunu gösteren hekzadesimal sayılardır. Bu sayılar yerine aşağıdaki renk tanımlama kelimeleri de kullanılabilir : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white , or yellow

Web sayfalarınızda isimleriyle kullana- bileceğiniz renklerin tam listesi. Büyütmek için resmin üzerine tıklayın.
Renkleri isimleriyle belirleyebileceğiniz gibi 16'lık sistemde değerler girerek daha hassas renk ayarı da yapabilirsiniz. Yanda Netscape'in sitesinden aldığım orjinali tek sütun olan renk tablosunun beş sütuna dönüştürülmüş halini görüyorsunuz. Bu tabloyu referans olarak kullanarak web sayfalarınıza renk getirebilirsiniz. Ama önce bir örneğe bakalım.

ornek7.htm
<HTML>
<HEAD>
<TITLE>Etraf renkleniyor</TITLE>
</HEAD>
<BODY>

<CENTER>Renkler Üzerine</CENTER>


Cam göbeği diğer adıyla cyan çoğunlukla ya yeşilin ya da mavinin açık bir tonu olarak düşünülür. Aslında renk teorisine göre bu renk tam mavi ile tam yeşilin karışımından oluşur.

örnek 7'nin sonucunda gördüğünüz gibi "Renkler Üzerine" başlığındaki renkler kelimesinde domates renginden (tomato) kestane rengine (maroon) giden bir renk geçişi var. Bu renk geçişini elde etmek için her harfin rengini teker teker değiştirdik. Zahmetli ama güzel gözüküyor. Bu tür efektleri otomatik olarak yapmak istiyorsanız www.conquerware.dk/hfc.htm adresinden HTML Font Colorizer adındaki ücretsiz programı çekebilirsiniz.
Eğer renkler üzerinde tam kontrol istiyorsanız renk teorisinden biraz bahsetmek gerekiyor. Renk teorisi denen şey basitçe üç ana renk olan kırmızı, mavi ve yeşili değişik oranlarda birleştirerek gözün görebildiği hemen tüm renkleri oluşturmaktan başka birşey değil.
Örneğin kırmızıyla yeşili eşit ölçüde karıştırırsanız sarı elde ederseniz. Bu iki rengin miktarını azaltırsanız renk koyulaşır, arttırırsanız parlaklaşır. Her bileşenin miktarı sayısal olarak gösterilir ve 0 ile 255 arasında bir değer alır. Bu değer küçüldükçe renkler koyulaşır, yükseldikçe parlaklaşır. Bütün bileşenlerin 0 olması siyahın, 255 olması beyazın oluşmasına neden olur. Yalnız web tarayıcıları bu renkleri gösterirken 16'lı sayı sistemindeki karşılıklarını istiyor. Bunun için de kabul edilen değerler 0 ile FF arasında değişiyor. Doğru değerleri hesaplamak için Windows'un hesap makinesini bilimsel modunu kullanabilirsiniz ya da işin kolayı Huey isimli programı çekin. Böylece seçtiğiniz renklerin web tarayıcılarının anladığı şekle dönüştürülmüş halini hemen elde edebilirsiniz.

ornek8.html
<HTML>
<HEAD>
<TITLE>Etraf renklenmeye devam ediyor</TITLE>
</HEAD>
<BODY>

En parlak saf kırmızı (Kırmızı:FF Yeşil:00, Mavi:00) 
En parlak saf yeşil (Kırmızı:00 Yeşil:FF, Mavi:00) 
En parlak saf mavi (Kırmızı:00 Yeşil:00, Mavi:FF) 
En parlak saf sarı (Kırmızı:FF Yeşil:FF, Mavi:00) 
En parlak saf cyan (Kırmızı:00 Yeşil:FF, Mavi:FF) 
En parlak saf pembe (Kırmızı:FF Yeşil:00, Mavi:FF) 
Yarı parlak saf kırmızı (Kırmızı:80 Yeşil:00, Mavi:00) 
En parlak turuncu (Kırmızı:FF Yeşil:80, Mavi:00)

...

</BODY>
</HTML>

İpucu: Bir fontun hem kendisini, hem büyüklüğünü hem de rengini tek bir işaretle değiştirebilirsiniz. Örneğin 

Web sayfalarımızdaki yazıların renklerini değiştirmeyi gördük. Peki ya arkaplan rengini değiştirmek istiyorsak? Birinci bölümde <BODY> işaretini görmüştük ve ne işe yaradığını daha sonra göreceğimizi söylemiştik. İşte şimdi zamanı geldi. Şimdilik sadece işimize yaradığı kadarını göreceğiz; ama ilerleyen iki bölümde yeri geldiğince <BODY>'nin diğer işlevlerine de değineceğiz.
<BODY BGCOLOR=x> ile web sayfanızın arkaplan rengini değiştirebilirsiniz. Hatta bir de varsayım metin rengini değiştirmek istiyorsanız bu işaretin arkasına TEXT=x parametresini eklemeniz yeterli.

ornek9.html
<HTML>
<HEAD>
<TITLE>Arkaplan Rengi Nihayet Beyaz Değil</TITLE>
</HEAD>
<BODY BGCOLOR="#004080" TEXT="#FFFFFF">

Hiç bir şekilde işaretini kullanmadığımız halde arkaplanımız lacivert yazı rengimiz de beyaz oldu. Üstelik bu şekilde bir web tarayıcısından ötekine varsayım renklerin değişmesi işinden de kurtulmuş olduk.

3.6 Fontlar ve Renkler Bölüm Özeti

* İstenilen bir metni kalın görüntülemek için , italik görüntülemek için , altı çizili görüntülemek için de işaretlerini kullanmamız gerektiğiniz gördük.
* İstediğimiz fontla ekrana yazmak için işaretini kullanmamız gerektiğini öğrendik.
* Font seçimi yaparken Internet'e bağlanan herkeste bizim bilgisayarımızda olan fontların olmayabileceğini düşünürek font seçiminde dikkatli olmamız gerektiğini gördük.
* Eğer kullanmak istediğimiz font, web sayfamızın ziyaretçilerinde yoksa işareti içinde alternatif font isimleri kullanabileceğimizi gördük.
* Kullandığımız fontun büyüklüğünü işaretiyle değiştirebileceğimizi öğrendik.
* Font büyüklüğünü belirlerken 1, 2, 4, 7 gibi mutlak değerlerin yanısıra +2, -1 gibi göreceli değerler de kullanabileceğimizi gördük.
* Hem fontu hem büyüklüğü tek bir işaretle ( ) değiştirebileceğimizi öğrendik.
* ile kullandığımız fontun rengini değiştirebileceğimizi gördük. Renk değerleri olarak renk tablosundaki renk isimlerini kullanabileceğimizi; ama daha hassas renk kontrolü için renklerin kırmızı, yeşil ve mavi bileşenlerinin 16'lı sistemde 0 ile FF arasında değişen değerlerini kullanmamız gerektiğini öğrendik.
* Web sayfalarımızın arkaplan rengi ile varsayım metin rengini değiştirmek için <BODY BGCOLOR=x TEXT=x> işaretini kullanmamız gerektiğini gördük.

Bu bölümdeki konu başlıklarımız;

1. Ekranda Resim Görüntülemek
2. Resimleri Çerçeveyle Çevrelemek
3. Resimleri Sola veya Sağa Yaslamak
4. Resimlere Yorum Eklemek
5. Resimlerin Boyutlarını Belirlemek
6. Özet

Gelelim web dünyasının en önemli öğelerinden birine, resimlere. HTML dilinde her şey çok kolay olduğu gibi sayfalara resim yerleştirmek de çok kolaydır. Resimler sayfa içerisinde metne göre sağa, sola, aşağı ve yukarı doğru yerleştirilebilirler, ayrıca boyutları sadece belirli değerler değiştirilerek ayarlanabilir.
Dokümanın herhangi bir yerine bir resim yerleştirmek için en sade haliyle
<IMG SRC="RESIM.GIF"> tag'ını kullanabilirsiniz. Bu tag'ı kullandığınızda resim hiç bir yere yaslanmayacak, boyutu ayarlanmayacak, metin olarak bir alternatifi olmayacaktır.
Yukarda da belirttiğimiz gibi resimleri kullanırken bir çok seçeneğiniz var, bu seçenekler sayfanın görünümünde kuşkusuz büyük rol oynayacaktır. Seçeneklerden birincisi Internet erişiminin yavaş olduğunu bildiğimiz ülkemizde sayfalarınızı görüntüleyecek olan kişilere biraz yardımcı olmak en azından resim yüklenene kadar kullanıcının meraklarını gidermek için kullanılabilir, bahsettiğimiz takı "ALT" tır. <IMG SRC="RESIM.GIF" ALT="deneme resmi"> satırını yazdığınızda web tarayıcınız RESIM.GIF adlı resmi yüklenmeden önce resmin yerine "deneme resmi" metnini girecektir, böylece kullanıcı resmi görmeden ne olduğunu bilecek ve anında STOP tuşuna basabilecektir. (!)
Seçeneklerden biri de resmin ekranda görünecek boyutlarını ayarlamak için kullanılır bu takı HEIGHT ve WIDTH'tir. Bu takılar bir arada kullanılmalıdır, tek başına kullanıldığında web tarayıcısı takıyı göz ardı edecektir. <IMG SRC="RESIM.GIF" WIDTH=100 HEIGHT=50> satırını yazdığınızda RESIM.GIF isimli resmin boyutu ne olursa olsun 50 piksel yüksekliğe ve 100 piksel genişliğine getirilerek ekranda gösterilecektir. Resim gösterirken işinize yarayacak diğer bir seçenek ise BORDER'dır. Bu takı ileride değineceğimiz "Internet Kısayolları" (Hyper Link) ile ilgili olsa da şimdi birkaç püf noktası vermek gerekir. Başka bir URL'ye kısayol yaratıldığında kısayolun ismi bir alt çizgi ile belirlenir, bu işlem resimlerde resmin mavi bir çerçeve içerisine alınmasıyla belirtilir, Eğer bir resmi başka bir sayfaya kısayol olarak kullanacaksanız ve çerçevenin görünmesini istemiyorsanız BORDER=0 ifadesini kullanmalısınız.

Resimleri kullanırken dikkat etmeniz gerekenler:

* Daha önce de belirttiğimiz gibi Internet'te uzun süredir yer alan kullanıcılar, sitelerdeki büyük resimleri çok işlerine yaramadığı sürece görmek istemeyeceklerdir. Bu yüzden, her zaman resimlerin boyutunu küçük, miktarını az tutmalısınız.
* Eğer büyük resimler kullanacaksanız, (büyük resim derken ekranı kaplayacak kadar büyük değil), bunları JPEG formatına çevirmenizi ve kalitesini düşürmenizi tavsiye ederiz. JPEG resimler her zaman GIF'lerden daha az yer kaplarlar, bu yüzden daha hızlı yüklenirler.
* Resimlere her zaman ALT tag'ını kullanarak alternatif metinler verin, Internet'i kullananların her zaman resim görüntüleyebilecek, browser'ı olan makineler olduğunu varsaymayın. Eğer resimlere alternatif metinler verirseniz terminal ekranı kullanan kullanıcılarda bilgiye erişebilirler.
* GIF'leri kullanırken "Interlaced" haline getirin, bu tip GIF'ler kademe kademe yüklenir ve yavaş yavaş netleşerek resmi daha hızlı yükleniyormuş gibi gösterir.

4.1 Ekranda Resim Görüntülemek

Şimdiye kadar hep ekrana nasıl yazı yazacağımızı gördük. Artık resim de kullanmanın zamanı geldi.
Ekranda resim görüntülemek oldukça basit bir iş. Elinizdeki GIF, JPG veya PNG formatındaki herhangi bir resim dosyasını <IMG SRC="dosyaismi.uzantısı"> ile tarayıcınızda görüntüleyebilirsiniz. Hatta bu şekilde animasyon içeren GIF dosyalarını da kullanabilirsiniz. Hemen bir örnekle neler yapabileceğimizi görelim.
Not: PNG formatındaki dosyaları sadece en yeni web tarayıcıları görüntüleyebilir.

ornek10.html
<HTML>
<HEAD>
<TITLE>İlk Resmimiz</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<CENTER>
<IMG SRC="zak.jpg">
 
İlk resmimiz
</CENTER>

</BODY>
</HTML>

ornek10'daki bizim için tek yeni satır <IMG SRC="zak.jpg">. Bu işareti gören web tarayıcısı ornek10.hml'in bulunduğu klasörün içinde zak.jpg dosyasını arayacak ve bulursa görüntüleyecek.
Peki kullanmak istediğimiz resimler html dosyamızla aynı klasörde değilse? Örneğin yandaki duruma bakalım. Resimleri görüntüleyecek dosyamızın web adlı klasörde bulunduğunu varsayalım ve resimler klasöründeki "kapak1999_05.gif" dosyasını göstermek istediğimizi düşünelim. Bu ne biçim isim derseniz, web sitemizdeki ad.net'in Mayıs 1999 kapağının resmini içeren dosyanın ismi diyelim. Bu resmi görüntülemek için

<IMG SRC="resimler/kapak1999_05.gif">

yazmamız yeterli. Fakettiğiniz gibi bir klasördeki dosyayı belirtmek için klasörle dosya ismi arasına "/" işaretini koyuyoruz. Yalnız burada bu satırı içeren HTML dosyanızın hangi klasörde bulunduğu çok önemli. Eğer HTML dosyamız, resimler klasöründe olsaydı "resimler/" bölümünü çıkarmamız gerekirdi. Eğer HTML dosyamız simgeler klasöründe olsaydı ve yine aynı resmi görüntülemek isteseydik... Bu sefer
<IMG SRC="../kapak1999_05.gif">
yazmamız gerekecekti. Yanyana iki noktanın (..) anlamı bir üst klasör demek. Bu durumda bir üst klasör resimler oluyor. Yine dosya ismiyle klasör ismi arasına "/" işaretini koyuyoruz.

İki örnek daha...
Diyelim ki HTML dosyamız web klasöründe ve simgeler klasöründeki "yildiz.gif" isimli gif dosyasını görüntülemek istiyoruz. O zaman
<IMG SRC="resimler/simgeler/yildiz.gif">
yazmamız gerekiyor. Bu yazım "resimler klasörünün içindeki simgeler klasöründe bulunan yildiz.gif dosyasını görüntüle" ye karşılık geliyor.
Son olarak bir de iki klasör yukarıda bulunan bir dosyayı nasıl görüntüleyebileceğimizi görelim. Örneğin HTML dosyamız simgeler klasöründe, resim dosyamız logo.gif de web klasöründe olsun. Bu durumda
<IMG SRC="../../logo.gif">
yazmamız yeterli. İşin mantığı gördüğünüz gibi oldukça basit. Aynı mantığı 5. bölümde bağlantılarda da kullanacağız.

4.2 Resimleri Çerçeveyle Çevrelemek

Bir resmin çevresine çerçeve kaplamak istiyorsanız BORDER=x parametresini vermeniz yeterli.
Örneğin <IMG SRC="zak.jpg" BORDER=1>, bir önceki örnekteki resmin çevresine varsayım metin rengiyle 1 piksel kalınlığında bir çerçeve çizer.

Resimleri, yazılarına soluna veya sağına sırasıyla ALIGN="left" veya ALIGN="right" parametreleriyle yaslayabiliriz.
<IMG SRC="resimler/logo.gif" WIDTH=200 HEIGHT=250 BORDER=1 ALIGN="right" ALT="Fatih Üniversitesi Logo">

4.4 Resimlere Yorum Eklemek

Internet bağlantınızın hızı, ulaşmaya çalıştığınız web sayfasının üstünde tutulduğu sunucunun (server) hızı, o anki Internet trafiği ve ilgili web sayfasındaki resim sayısı ile boyutlarına bağlı olarak bir web sayfasının tamamen yüklenmesi çok değişik süreler alabilir.
Çok fazla resim içeren bir sayfanın yüklenmesi genelde yavaş olur; ama az resim (hatta sadece bir tane bile olabilir) içeren bir sayfayı yüklemek de resmin disk üzerinde kapladığı alana bağlı olarak dakikalar alabilir. Örneğin web tasarımına yeni başlayanların sık sık yaptığı bir hata sayfalarına koyacakları resimleri çok büyük veya yeterince optimize etmeden kullanmaktır. İlerleyen bölümlerde resim dosyalarını nasıl küçük boyutlara indirebileceğimizi göreceğiz. Ama önce resimlere yorum ekleyerek nasıl potansiyel ziyaretçilerimizin çoğunu kaçırmayacağımıza bakalım.
Çok miktarda resim ve az yazı içeren bir sayfa yüklenirken ekran uzun süre bomboş kalabilir. Resimler yüklenirken en azından resimlerin ne resmi olduğunu açıklayan kısa bir yorum kullanmak zaten çabucak sıkılma eğiliminde olan ziyaretçilerinizin bir kısmının Back düğmesine basma eğilimlerini törpüler. Aynı zamanda resimlerinize yorum eklemekle tarayıcılarındaki resimleri yükleme seçeneğini kapatarak daha hızlı sörf yapmaya çalışan kullanıcıları da kaçırmamış olursunuz.
Peki resimlere nasıl yorum ekliyoruz? Bu iş için ALT parametresini kullanmak yeterli.

<IMG SRC="resimler/logo.gif" ALT=" Fatih Üniversitesi Logo ">

Bir web tarayıcısı yukarıdaki satırı gördüğünde resmi yüklemeye başlamasa bile sizin yazdığınız yorumu görüntüler. Böylece ekranınız boş kalmayacağı gibi yüklenecek resmin ne olduğu da belli olmuş olur.

4.5 Resimlerin Boyutlarını Belirlemek

Resimlerin boyutlarını belirlemek web tarayıcınıza bir resmin genişliğinin ve yüksekliğinin ne kadar olduğunu söylemek anlamına geliyor. Örneğin örneklerimizde sürekli kullandığımız ad.net mayıs kapağının genişliği 200, yüksekliği de 250 piksel. Bu değerleri sırasıyla WIDTH ve HEIGHT paremetreleriyle belirtebiliriz:

<IMG SRC="resimler/logo.gif" WIDTH=200 HEIGHT=250>

Peki bir resmin boyutlarını belirlemek ne işimize yarayacak. Normalde bunları yazmadan da web tarayıcımız resmi sorunsuz olarak görüntülüyor. Yanıt olarak üç kazancımız olacağından bahsedelim.
İlk olarak; bir resmin boyutlarını belirlediğimizde, web tarayıcısı resmi yüklemeye başlamasa bile ekranda resmin boyutları kadar bir çerçeve çizerek resmin ne kadar yer kaplayacağını gösterir.
İkinci olarak, 7. bölümde tabloları göreceğiz. Tablo yaparken resim boyutlarını belirlemek tablolarımızın daha hızlı görüntülenmesi avantajını getirecek.
Üçüncü ve son olarak da, WIDTH ve HEIGHT parametrelerine resmin gerçek boyutlarını vermeyip de daha büyük ve daha küçük değerler girersek verdiğimiz değerlere göre resmimiz otomatikman ya büyütülür ya da küçültülür. Yalnız bu durumda resimde bazı bozulmalar olacaktır. Tavsiyem çok zorda kalmadıkça kullanacağınız resimlerin boyutlarını bu şekilde değiştirmeyin. Bunun yerine ücretsiz olarak bulunabilen görüntü işlem programlarını veya Photoshop gibi ticari programları kullanabilirsiniz.
Bu arada kullanacağımız bir resmin boyutlarını nasıl öğrenebiliriz diye sorabilirsiniz. Eğer elinizde bu işi yapacak hiçbir program yoksa ve Netscape Navigator kullanıyorsanız resminizi normal <IMG SRC=x> işaretini kullanarak görüntüleyin ve resmin üstüne sağ fare tuşuyla tıklayarak View Image seçeneğini seçin. Web tarayıcınızın başlık satırında dosya boyutlarını bu şekilde görebilirsiniz. Yok eğer Internet Explorer kullanıyorsanız işiniz biraz daha zor. Yine resmin üstüne sağ fare tuşuyla tıklayıp Copy'i seçin. Daha sonra da Başlat menünüzün Donatılar bölümünde bulabileceğiniz MS Paint programını açıp Edit menüsünden Paste komutunu seçerek resmi MS Paint'e transfer edin. Bu programla resminizin boyutlarını öğrenebilirsiniz. Ancak benim kişisel önerim Shareware.net'ten IrfanView adlı programı çekmeniz. Böylece web tasarımında ihtiyaç duyacağınız grafik işlem gücünün büyük bir bölümünü ücretsiz olarak elde edebileceğiniz gibi aynı zamanda resimlerinizin boyutlarını da rahatlıkla öğrenebilirsiniz.
İpucu: Diğer HTML işaretlerinde olduğu gibi <IMG SRC="dosya ismi.uzantısı"> işaretinde de tüm parametreleri bir arada kullanabilirsiniz. Örneğin aşağıdaki satıra bir bakın:
<IMG SRC="resimler/logo.gif" WIDTH=200 HEIGHT=250 BORDER=1 ALIGN="right" ALT="Fatih Üniversitesi Logo">

4.6 Özet

* GIF, JPG veya PNG formatındaki resimleri web sayfalarımızda <IMG SRC="dosya ismi.uzantısı"> işaretiyle görüntüleyebileceğimizi öğrendik.
* HTML dosyamızın bulunduğu klasörden farklı bir klasörde yer alan resimleri nasıl görüntüleyebileceğimizi gördük.
* Resimlerin çevresine BORDER parametresiyle -istenilen kalınlıkta- varsayım metin rengiyle çerçeve çizebileceğimizi gördük.
* Resimleri, yazılarına soluna veya sağına sırasıyla ALIGN="left" veya ALIGN="right" parametreleriyle yaslayabileceğimizi öğrendik.
* Resimlere yorum eklemenin ALT parametresiyle yapılabileceğini ve bunun avantajlarını gördük.
* Resimlerin boyutlarını belirlemenin avantajlarını öğrendik ve bir resmin boyutlarını nasıl öğrenebileceğimizi gördük.

1. Giriş
2. Bağlantı Renklerini Belirlemek
3. Bağlantı Olarak Resim Kullanmak
4. Döküman içi Bağlantılar
5. Altı çizgisiz aktif bağlantılar
6. Özet

5.1 Bağlantılara Giriş

Web'in belki de en çekici tarafı bağlantılar (link) sayesinde bir sayfadan ötekine geçişin çok kolay bir şekilde gerçekleştirilmesidir. Bağlantılar -başka bir deyişle hipermetin- özelliği olmasaydı kuşkusuz hem web (örümcek ağı) kelimesinin pek bir anlamı kalmazdı hem de Internet çok sıkıcı bir yer olurdu.
Sayfamızdan başka bir sayfaya bağlantı vermek istediğimizde <A HREF=""> işaretini kullanıyoruz. Hemen bir örnekle bunu görelim.

ornek12.html
<HTML>
<HEAD>
<TITLE>Bağlanıyoruz!</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

Internet'in en popüler sitesi kuşkusuz <A HREF="http://www.yahoo.com">Yahoo</A>. Milyonlarca siteye bağlantı içeren bu devasa sitenin yanında bu örnek sayfa sadece iki bağlantı içeriyor; ama önemli olan bağlantı sayısının fazlalığı değil kalitesi 8)

İşte ikinci bağlantımız geçen bölümdeki son örneğimize gidiyor:

<A HREF="ornek11.html">Tıklayın!</A>

Fark ettiğiniz gibi üstüne tıklayabileceğimiz yazılar <A HREF=""> ile </A> arasında kalan bölüm. Örneğin Yahoo'nun üzerine tıkladığımızda Yahoo'nun web sitesine gidebileceğiz -tabi <A HREF=""> içindeki adresi doğru yazdıysanız-. Bu örnekte iki bağlantı bulunuyor; ama birinin başında http:// öneki var, diğerinde yok.
http:// önekini bizim web sitemizin adresinden farklı bir adrese (örneğin http://www.yahoo.com/) bağlantı verirken kullanıyoruz. Diyelim ki web sayfalarımız http://www.abc.com/ adresinde bulunsun. Eğer http:// önekini kullanmasaydık Yahoo'nun üstüne tıkladığınızda web tarayıcınız http://www.abc.com/www.yahoo.com adresine gitmeye çalışacaktı ki tabi bu da bir hatayla sonuçlanacaktı. Diğer bir deyişle http:// önekini kullanmadığımızda web tarayıcısı bizim sitemizin içindeki bir HTML dosyasına erişmek istediğimizi düşünür. İkinci bağlantımız da bu duruma örnek. "Tıklayın!" yazısının üstüne tıkladığınızda http://www.abc.com/ornek11.html'e gidilecektir. Bu arada eğer geçen bölümde web sayfalarımızda kullanmak istediğimiz resimlere, bulundukları klasörlere göre, nasıl ulaşabileceğimizi anlatan yazıyı hatırlarsanız; aynı şeylerin bağlantılar için de geçerli olduğunu farkedeceksinizdir. Eninde sonunda html dosyaları da resim dosyaları gibi birer dosya ve bulundukları klasörlere göre doğru olarak çağrılmaları gerekiyor.
Not: Kendi web sitemizdeki dosyalara bağlantı vermek için http:// önekini kullanabilirsiniz (örneğin http://www.abc.com/ornek11.html); ama bunun iki büyük dezavantajı var:

* Sabit diskinizdeki HTML dosyalarınızda bulunan bağlantıları denemek istediğinizde Internet'e bağlanmanız gerekir (tabi önce bu dosyaları daha deneyemeden web sunucunuza yüklemeniz de gerekecek).
* Web sitenizin adresi değişince tüm HTML dosyalarınızda bulunan bağlantıları buna göre değiştirmeniz gerekir.

5.2 Bağlantı Renklerini Belirlemek

Üçüncü bölümde arkaplan ve metin renklerini <BODY> işaretinin içinde yeralan BGCOLOR ve TEXT parametrelerine verilen değerlerle değiştirebileceğimizi görmüştük. Bağlantıların renklerini değiştirmek için ise üç parametre kullanabiliyoruz: LINK, VLINK ve ALINK. Eğer bu parametreleri kullanmazsanız web tarayıcınız varsayım renkler kullanır. Tabi bu varsayım renkleri her zaman için web tarayıcınızın ayarlar bölümünden değiştirebilirsiniz.
LINK parametresi ile belli bir süredir ya da hiç ziyaret etmediğiniz bağlantıların renklerini belirleyebilirsiniz. Örneğin Netscape Navigator'ın 4.6 sürümü, son 9 gün içinde ziyaret etmediğiniz sayfalara giden bağlantıları ziyaret edilmemiş olarak gösterir. LINK, pek çok web tarayıcısında varsayım olarak saf mavi renge ayarlıdır.
VLINK parametresi ziyaret edilmiş bağlantıların rengidir ve genellikle LINK'e göre daha koyu bir tona ayarlanır. VLINK pek çok web tarayıcısında varsayım olarak koyu mavi renge ayarlıdır.
Bir bağlantıya tıkladığınızda bağlantının rengi kısa bir süre için değişir. Eğer farenin düğmesini yeterince uzun basılı tutarsanız bu rengin ne olduğunu görebilirsiniz. İşte ALINK ile bu rengin ne olacağını belirleyebiliyoruz. Pek çok web tarayıcısında varsayım olarak kırmızı renge ayarlıdır.
Bu kadar teorik bilgiden sonra bir örnek iyi gider:

ornek13.html
<HTML>
<HEAD>
<TITLE>Bağlantılar ve Renkler</TITLE>
</HEAD>
<BODY BGCOLOR="#0000A0" TEXT="#FFFFFF" LINK="#FFFF00" VLINK="#808000" ALINK="#FF0000">

<CENTER>

Internet'teki en popüler arama motorlarından beş tanesi:

<A HREF="http://www.altavista.com">Alta Vista</A>

<A HREF="http://www.excite.com">Excite</A>

<A HREF="http://www.lycos.com">Lycos</A>

<A HREF="http://www.webcrawler.com">WebCrawler</A>

<A HREF="http://www.hotbot.com">HotBot</A>

</CENTER>

örnek 13'ün sonucunda açık sarı renkte görüntülen bağlantılar (LINK) uzun zamandır ziyaret etmediğiniz -belki de hiç girmediğiniz- arama motorları. Eğer bu bağlantılar arasında koyu sarı renkli olan varsa bu yakınlarda onu kullanmış olmalısınız (VLINK). Bu bağlantılardan herhangi birinin üstüne tıklarsanız rengi kısa bir süre için kırmızı olur (ALINK).

5.3 Bağlantı Olarak Resim Kullanmak

Web'de mutlaka görmüşsünüzdür. Pekçok web sayfasında alt alta veya yanyana bazen şık bazen de çirkin düğmeler sıralanır ve bunların herhangi birine bastığınızda ilgili sayfaya gidersiniz. Bu düğmeler aslında birer resimden başka bir şey değiller. İşte size bir örnek:

ornek14.html
<HTML>
<HEAD>
<TITLE>Resimler & Bağlantılar</TITLE>
</HEAD>
<BODY BGCOLOR="#0000A0" TEXT="#FFFFFF">

<CENTER>

İşte tıklanacak bir düğme:

<A HREF="http://www.fatih.edu.tr/onerin.html"><IMG SRC="onerin.gif" WIDTH=90 HEIGHT=30 ALT="Bu siteyi sevdiklerinize önerin" BORDER=0></A>

</CENTER>

örnek 14'ün örnek 12 ve 13'ten tek farkı <A HREF=""> ve </A> işaretleri arasında metin yerine resim göstermekte kullandığımız <IMG SRC=""> işaretinin bulunması. Böylece bir resmi bağlantı olarak kullanabiliyoruz. Yalnız <IMG SRC=""> işaretindeki BORDER=0 parametresine dikkat. Normalde BORDER parametresinin resimlerin çevresine önplan renginde bir çerçeve çizmekte kullanıldığını biliyoruz ve eğer bu parametreyi kullanmazsak çerçeve de çizilmiyordu; ama eğer bir resmi bağlantı olarak kullanacaksanız ve BORDER parametresini de kullanmazsanız web tarayıcınız resmin çevresine otomatik olarak bağlantı renginde bir çerçeve atar. Bu genelde istenen bir durum olmadığından BORDER=0 ile bu çerçeveyi yok edebilirsiniz.

Şimdiye kadar hep başka sayfalara bağlantılar verdik; ama aslında böyle bir zorunluluk yok. Bir HTML dökümanının değişik yerlerine tek tıklamayla ulaşmak için de bağlantılar yerleştirebilirsiniz. Böylece uzun bir dökümanı ayrı ayrı sayfalara bölmeye gerek kalmadan hemen hemen aynı işlevselliği elde edebiliriz. Örnek olarak ad.net'in Haziran ayı için seçtiği en iyi yerli web siteleri sayfasından (TM10) bir alıntı yaptım. Çok uzun olur diye sadece açılış bölümü ile üç numaralı sitenin yazıları var. Liste 15'te bu yazıların önemli kısmını da kestim; ama tüm HTML işaretlerini bıraktım. Liste 15'e yakından bakarsanız ilk üç sitenin bağlantılarının gösterdiği adresler pek alışık olduğumuz adres yapısına benzemiyor. Hepsinin başında diyez (#) işareti var. Bu bağlantıların biraz altında ise daha önce görmediğimiz bir işaret göreceksiniz:

Bu işaret ile dökümanın belli bir yerine isim vererek (bu durumda muzik_kutusu) <A HREF="#muzik_kutusu"> ile dökümanın o yerine bağlantı verebilirsiniz. Böylece Müzik Kutusu bağlantısına tıklandığında otomatikman o bölüme gidebilirsiniz. Yalnız kullanacağınız isimler boşluk veya türkçe karakter içermemeli. Küçük büyük harf ayrımına da dikkat edin. Gerçi çoğu web tarayıcısı bu ayrıma aldırmıyor; ama tedbiri elden bırakmamakta yarar var.
Bu arada liste 15'in sonucunda gelen sayfanın altında yer alan "yukarı" isimli bir bağlantı dikkatinizi çekecektir. Bu bağlantıya tıklarsanız bu listenin en başında yer alan <A NAME="yukari"></A> işareti sayesinde dökümanın en başına rahatlıkla ulaşabilirsiniz.
İpucu: Başka bir dökümanın içinde yer alan bir bölüme de bağlantı verebilirsiniz. Örneğin <A HREF="ornek15.html#muzik_kutusu">

ornek15.html
<HTML>
<HEAD>
<TITLE>Döküman İçi Bağlantılar</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#0000FF">

<A NAME="yukari"></A>

Türkiye'nin yerli içerik sorunu yıllardır gündemde. Ama son birkaç yıldır hiç azımsanamayacak bir yerli Web patlaması var...

<CENTER>
İlk 3: 
<A HREF="#teymur">Cengiz Teymur</A> 
<A HREF="#eskisehir_net">Eskişehir.net</A> 
<A HREF="#muzik_kutusu">Müzik Kutusu</A>
</CENTER>

 
 
<IMG SRC="muzik_kutusu.gif" BORDER=1 ALIGN="right">
<A NAME="muzik_kutusu">Müzik Kutusu (www.muzikkutusu.com)</A>

Hepimizin görmekten bıktığı, asla güncellenmeyen, sadece MP3'lerle dolu müzik sitelerine, bir müzik sitesinin nasıl olması gerektiğini gösteriyor...

 
 
<CENTER><A HREF="#yukari">Yukarı</A>

5.5 Alt çizgisiz ve aktif kısayollar:

Bu günlerde alt çizgisiz ve klasik mavi renge sahip olmayan Internet kısayolları kullanmak çok moda oldu. Herkes gerekli olsun olmasın bu tip kısayolları kullanıyor. Eğer siz de bu tip link'lerin sayfanızın genel görünümünü güzelleştireceğine inanıyor ve bunları kullanmak istiyorsanız size bu işi nasıl becerebileceğinizi anlatalım.
Alt çizgisiz bir kısayol oluşturmak için <A HREF… takısının içinde bir stil tanımı kullanmanız yeterli. Bu stil takısını kullandığınızda hem kısayol alt çizgisiz olacak hem de ziyaret edildikten sonra rengi değişecek.
Alt çizgisiz kısayol: 
<A HREF="http:// www.fatih.edu.tr " STYLE="text-decoration: none"> Fatih Üniversitesi </a>
Dilerseniz bir adım daha ileri giderek altı çizili olmasına rağmen üzerine gidince rengi değişen bir link oluşturalım. Bunu yapmak için uzun kodlar kullanmaya gerek yok sadece onmouseover özelliğini kullanmak yeterli.
Aktif ve normal kısayol: 
<A HREF="http:// www.fatih.edu.tr" onmouseover="this.style.color='#CC0000'" onmouseout="this.style.color='blue'"> Fatih Üniversitesi </a>
Şimdide hem altçizgisiz hem de üzerine gelince renklenen bir link kullanalım. Tahmin edebileceğiniz gibi hem onmouseover hem de STYLE özelliklerini kullanacağız.
Aktif ve alt çizgisiz kısayol: 
<A HREF="http://www.fatih.edu.tr" STYLE="text-decoration: none" onmouseover="this.style.color='#CC0000'" onmouseout="this.style.color='blue'">
Fatih Üniversitesi </a>

5.6 Özet:

* Bir web sayfasından diğer bir sayfaya bağlantı vermek için <A HREF=""> işaretini kullanmamız gerektiğini öğrendik. <A HREF=""> ile </A> işaretleri arasında yer alan metnin üstüne tıklandığında ilgili sayfaya gidildiğini gördük.
* Eğer kendi web sitemiz dışında yer alan bir web sayfasına bağlantı vereceksek http:// öneki kullanmamız gerektiğini gördük.
* Bağlantı renklerini değiştirmek için <BODY> işaretinin arkasına LINK, VLINK ve ALINK parametrelerini vermemiz gerektiğini;
* LINK'in uzun zamandır ya da hiç ziyaret edilmemiş sayfalara giden bağlantıların rengini,
* VLINK'in yakın zaman içinde ziyaret ettiğimiz sayfaları gösteren bağlantıların rengini,
* ALINK'in bir bağlantıya tıklama sırasında bağlantının alacağı rengi
belirlemek için kullanıldığını gördük.
* Bağlantı olarak resimlerin de kullanılabileceğini, bunun için <A HREF=""> ve </A> işaretleri arasında <IMG SRC=""> işaretinin gelmesi gerektiğini gördük. Eğer <IMG SRC=""> işaretinin arkasına BORDER=0 parametresini eklemezsek resmimizin çevresine otomatikman bağlantı renginde bir çerçeve çizileceğini öğrendik.
* Bir dökümanın istediğimiz yerlerine <A NAME="isim"> işaretiyle isimler vererek <A HREF="#isim"> işaretiyle bu yerlere bağlantı verebileceğimizi gördük.

1. Sırasız Listeler
2. İç içe Sırasız Listeler
3. Mermi Şeklini Değiştirmek
4. Sıralı Listeler
5. İç içe Sıralı Listeler
6. Tanımlı Listeler
7. Özet

6.1 Sırasız Listeler

Sıranın önemi olmadığı maddelerden oluşan listeler oluşturmak için her bir maddenin önüne <LI> işaretini koyup bütün bu maddeleri <UL> ve </UL> işaretleriyle çevreliyoruz. Örneğin Türkiye'de yayınlanan bilgisayar/internet dergilerinin isimlerini sıralayalım. Rahat okunsun diye örnek 16'daki her bir maddeyi üç karakter içeriden yazdım; ama siz nasıl isterseniz öyle yazabilirsiniz.

ornek16.html
<HTML>
<HEAD>
<TITLE>Sırasız Listeler</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#0000FF">

Türkiye'de yayınlanan bilgisayar/internet dergilerinin web sayfaları:
<UL>
<LI><A HREF="http://www.adnet.com.tr">ad.net</A>
<LI><A HREF="http://www.chip.com.tr">Chip</A>
<LI><A HREF="http://www.pcmagazine.com.tr">PC Magazine</A>
<LI><A HREF="http://www.pcnet.com.tr">PCnet</A>
<LI><A HREF="http://www.pcworld.com.tr">PC World</A>
</UL>

<UL> işareti listemizin başladığını gösteriyor. <UL>'den önce yeni bir satıra geçmek için veya işaretlerini kullanmanız gerekmiyor çünkü <UL> zaten otomatik olarak bir satır boşluk bırakarak, <LI> ile başlayan her satırın (maddenin) önüne bir mermi (bullet) koyarak -biraz içeriden- bu maddeleri listeliyor. Yalnız listeleyeceğiniz maddeler bitince liste bitirme işareti </UL>'yi kullanmayı unutmayın yoksa listenizden sonra gelen tüm metin ve resimler listenizle aynı hizadan başlar.

6.2 İç içe Sırasız Listeler

<UL> işaretini kapatmadan yeni bir <UL> işareti kullanırsanız iç içe sırasız listeler oluşturabilirsiniz. Yalnız her bir alt liste bittikten sonra bu alt listeyi </UL> ile kapatmayı unutmayın. Örnek olarak ad.net'in web sitesinde neler varmış bir bakalım.

ornek17.html
<HTML>
<HEAD>
<TITLE>İç içe Sırasız Listeler</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#0000FF">

Türkiye'de yayınlanan bilgisayar/internet dergilerinin web sayfaları:
<UL>
<LI><A HREF="http://www.adnet.com.tr">ad.net</A>
<UL>
<LI>Köşe Yazıları
<LI>Sinema
<LI>TM 10
<LI>ad.network
<LI>Çözüm Hattı
<LI>Web Tasarımı
<LI>Resimler
<LI>Oyunlar
<LI>Shareware.net
</UL>
<LI><A HREF="http://www.chip.com.tr">Chip</A>
<LI><A HREF="http://www.pcmagazine.com.tr">PC Magazine</A>
<LI><A HREF="http://www.pcnet.com.tr">PCnet</A>
<LI><A HREF="http://www.pcworld.com.tr">PC World</A>
</UL>

6.3 Mermi Şeklini Değiştirmek

Önceki örneklerin sonuçlarına dikkatle baktıysanız her düzeyde farklı tür mermi kullanıldığını ve bunların şeklinin standart olduğunu farketmişsinizdir. Örneğin Netscape Navigator, ilk düzey için içi dolu daire, ikinci düzey için içi boş daire, üçüncü düzey için de içi dolu kare kullanır ve bu böyle devam eder; ama bunların sırasını değiştirmek elinizde. Tek yapmanız gereken <UL> işaretinin arkasına TYPE parametresini eklemek. TYPE parametresinin alabileceği değerler disc (içi dolu daire), circle (içi boş daire) ve square (içi dolu kare).
Bir önceki örneğimizin mermilerini biz belirleyelim bu sefer:

ornek18.html
<HTML>
<HEAD>
<TITLE>Değişik Mermili Sırasız Listeler</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#0000FF">

Türkiye'de yayınlanan bilgisayar/internet dergilerinin web sayfaları:
<UL TYPE="circle">
<LI><A HREF="http://www.memphisreal.cjb.net">Memphis</A>
<UL TYPE="square">
<LI>Güncel
<LI>Bilgisayar
<LI>Şiir
<LI>Sinema
<LI>Çözüm Hattı
<LI>Web Tasarımı
<LI>Resimler
<LI>Oyunlar
<LI>Shareware
</UL>
<LI><A HREF="http://www.chip.com.tr">Chip</A>
<LI><A HREF="http://www.pcmagazine.com.tr">PC Magazine</A>
<LI><A HREF="http://www.pcnet.com.tr">PCnet</A>
<LI><A HREF="http://www.pcworld.com.tr">PC World</A>
</UL>

6.4 Sıralı Listeler

Sıralı listelerin oluşturulması sırasız listelerinkiyle tamamen aynı şekilde yapılıyor. Tek farklılık <UL> yerine <OL> işaretini kullanmamız. Hemen bir örnekle görelim:

<HTML>
<HEAD>
<TITLE>Sıralı Listeler</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#0000FF">

Şimdiye kadar gördüğümüz bölümler:
<OL>
<LI>Web Tasarımına Giriş
<LI>Paragraf Düzenleme İşaretleri
<LI>Fontlar ve Renkler
<LI>Resimler
<LI>Bağlantılar
<LI>Listeler
</OL>

Sıralı listelerde bizim herhangi birşekilde numara yazmamız gerekmiyor. Numaralar otomatik olarak veriliyor. Böylece herhangi bir maddenin yerini değiştirdiğinizde bütün numaraları baştan yazmak zorunda kalmadığınız gibi tıpkı sırasız listelerde olduğu gibi bu listeler de otomatikman içeriden başlayarak gösteriliyor.

6.5 İç içe Sıralı Listeler

Tıpkı sırasız listelerde olduğu gibi <OL> işaretini kapatmadan yeni bir <OL> işareti kullanırsanız iç içe sıralı listeler oluşturabilirsiniz. Yine her bir alt liste bittikten sonra bu alt listeyi </OL> ile kapatmamız gerekiyor. Yalnız sıralı alt listelerde numaralandırma web tarayıcısı tarafından varsayım olarak hep aynı şekilde yapıldığından numaralandırma şeklini değiştirmek isteyebilirsiniz. Bunun için <OL> işaretinin arkasına TYPE parametresini ekleyip bu parametreye aşağıdaki değerlerden herhangi birini verebilirsiniz:
1 - Standart numaralandırma (1, 2, 3, 4, ...)
a - Küçük harf (a, b, c, d, ...)
A - Büyük harf (A, B, C, D, ...)
i - Küçük Roma rakamları (i, ii, iii, iv, ...)
I - Büyük Roma rakamları (I, II, III, IV, ...)
Örnek olarak 6. bölümde ne anlatılıyor bir bakalım.

ornek20.html
<HTML>
<HEAD>
<TITLE>İç içe Sıralı Listeler</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#0000FF">

Şimdiye kadar gördüğümüz bölümler:
<OL>
<LI>Web Tasarımına Giriş
<LI>Paragraf Düzenleme İşaretleri
<LI>Fontlar ve Renkler
<LI>Resimler
<LI>Bağlantılar
<LI>Listeler
<OL TYPE="a">
<LI>Sırasız Listeler
<OL TYPE="i">
<LI>İç içe Sırasız Listeler
<LI>Mermi Şeklini Değiştirmek
</OL>
<LI>Sıralı Listeler
<OL TYPE="i">
<LI>İç içe Sıralı Listeler
</OL>
</OL>
</OL>

İpucu 1: <UL> ve <OL> işaretlerini iç içe kullanabilirsiniz.
İpucu 2: Eğer <UL> ve </UL> işaretleri arasında <LI> işaretini kullanmazsanız bu iki işaret arasındaki tüm metin ve resimler bir miktar içeriden başlar. Daha içeriden başlamak istiyorsanız içiçe birden çok <UL> işareti kullanabilirsiniz

6.6. Tanımlı Listeler

Genellikle birden fazla başlığı olan, her başlık altında kısa bir metin içeren yazılar, tanımlı listeler ile oluşturulur. Tanımı yapılacak başlık, <dt> ile belirtilir, <dd> ile başlık altına metin girilir. Tüm liste, <dl> ile </dl> arasına alınır.
<DL>
<DT> Kişisel Kullanım
<DD> Linux evinde veya işinde UNIX işletim sistemi altında çalışmak
isteyenler için ideal bir platformdur.

</DL>
Ekrandaki çıktı şu şekilde görünür:
Kişisel Kullanım
Linux evinde veya işinde UNIX işletim sistemi altında çalışmak isteyenler için ideal bir platformdur.
İnternet Sunucusu
Linux doğrudan TCP/IP desteği ile gelmektedir.

6.7 Listeler Bölüm Özeti

* Sıranın önemli olmadığı listeler oluşturmak için <UL> işaretinin kullanıldığını, listedeki her bir maddenin başına ise <LI> işaretinin getirildiğini öğrendik.
* İç içe sırasız listeler oluşturmak için bir üst düzeydeki <UL> işaretini kapatmadan yeni bir <UL> işaretinin kullanıldığını gördük.
* Sırasız listelerdeki mermi şeklini değiştirmek için <UL> işaretinin arkasına TYPE parametresini eklemiz gerektiğini gördük. Bu parametrenin alabileceği değerlerin disc, circle ve square olduğunu öğrendik.
* Sıralı listelerin sırasız listelerle aynı mantıkla çalıştığını, tek farkın <UL> yerine <OL> kullanmak olduğunu gördük.
* Sıralı listelerde iç içe listeler oluşturmanın sırasız listelerle olduğu gibi yapıldığını ancak numaralandırma şeklini TYPE parametresiyle belirlememizin iyi olacağını öğrendik.

Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece şu ana kadar öğrendiklerinizle yapamayacağınız gerçek düzenlemeyi yapabilirsiniz. Elbette HTML dizayn konusunda bir masaüstü yayıncılık programının gösterdiği hassasiyeti göstermez, bir de browserların tablo etiketlerini yorumlamada gösterdiği farklılıklar da buna eklenirse, genel ziyaretçi kesimine hitab etmenin ne kadar zor olduğu anlaşılır. Fakat burada konumuz bunu tartışmak değil tablolar konusunu işlemek.

Sonbahar	Kış	İlkbahar	Yaz
Eylül	Aralık	Mart	Haziran
Ekim	Ocak	Nisan	Temmuz
Kasım	Şubat	Mayıs	Ağustos

Sonbahar	Kış	İlkbahar	Yaz
Eylül	Aralık	Mart	Haziran
Ekim	Ocak	Nisan	Temmuz
Kasım	Şubat	Mayıs	Ağustos

		ÖLÇÜLER
		Boy	Kilo
1.	Zafer	1.77	80
2.	Mustafa	1.82	75
3.	Osman	1.75	83

Bu örneklerde de görüldüğü gibi tablolar satır ve sütunlardan oluşur. Tabloya genel bir başlık atayabiliriz. Her sütun için de kendi başlığını oluşturmak mümkündür. Üstteki tablo başlığının altında veya tablonun sona erdiği satırdan sonraki satıra açıklama (thead/caption) koyabiliriz. Ayrıca tablo hücrelerini yanındaki veya altındaki hücrelerle birleştirebiliriz:

Tablo Başlığı (thead) Sütun Başlığı #1	Sütun Başlığı #2	Sütun Başlığı #3	Sütun Başlığı #4
hücre	hücre	hücre	hücre
hücre	hücre	hücre	hücre
hücre		hücre	hücre
Tablonun alt yazısı(caption)

Bu kadar örnek yeterli, şimdi basit bir tablo yapmak için gerekli etiketleri öğrenelim. Öncelikle <table>...</table> etiketlerini yazıyoruz ve arasını doldurmaya başlıyoruz. <tr> etiketi ile satırları <td> etiketi ile de sütunları oluşturuyoruz.

hücre

<table border="1">
<tr>
<td>hücre</td>
</tr>
</table>

hücre1

hücre2

<table border="1">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
</table>

hücre1

hücre2

<table border="1">
<tr>
<td>hücre1</td>
<tr>
</tr>
<td>hücre2</td>
</tr>
</table>

hücre1	hücre2
hücre3	hücre4

<table border="1">
<tr>
 <td>hücre1</td>
 <td>hücre2</td>
</tr>
<tr>
 <td>hücre3</td>
 <td>hücre4</td>
</tr>
</table>

Tablolar da HTML sayfasında olduğu gibi başlık (head) ve gövde (body) bölümlerine ayrılabilir. Tabloda başlığı <thead> gövdeyi <tbody> etiketleri arasına yazarız. <caption> etiketi ile ikinci bir açıklama vermek mümkündür.

Sütun başlıklarına gelince, her bir başlık <th> etiketi ile belirtilir ve bunlar <td> etiketinde olduğu gibi <tr>...</tr> arasına yazılır.

Tabloda satır ve sütunları belirten <tr> ve <td> etiketleri <tbody>...</tbody> arasına alınır.

Yukarıdaki örneklerden birisini değiştirerek bu anlattıklarımızı uygulayalım;

Tablo Başlığı (thead)

alt-yazı (caption)

1.Sütun

2.Sütun

3.Sütun

<![endif]>

<table border="1">
<thead>Tablo Başlığı (thead)</thead>
<caption align="bottom">
alt-yazı (caption)
<caption>
<tr>
 <th>1.Sütun</th>
 <th>2.Sütun</th>
 <th>3.Sütun</th>
</tr>
<tbody>
<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>
</tbody>
</table>

border parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini sağlar.

hücre

<table border="0">
<tr>
<td>hücre</td>
</tr>
</table>

hücre

<table border="2">
<tr>
<td>hücre</td>
</tr>
</table>

hücre

<table border="4">
<tr>
<td>hücre</td>
</tr>
</table>

hücre

<table border="6">
<tr>
<td>hücre</td>
</tr>
</table>

cellpadding parametresi hücre içi marj değerini belirtir. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlar.

hücre

<table border="1" cellpadding="0">
<tr>
<td>hücre</td>
</tr>
</table>

hücre

<table border="1" cellpadding="5">
<tr>
<td>hücre</td>
</tr>
</table>

hücre

<table border="1" cellpadding="10">
<tr>
<td>hücre</td>
</tr>
</table>

hücre1

hücre2

<table border="1" cellspacing="1">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

hücre1

hücre2

<table border="1" cellspacing="5">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

hücre1

hücre2

<table border="1" cellspacing="10">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

align parametresi tabloyu düşey hizalamada kullanılır, align=left sola, align=right sağa dayalı yapar, align=center ortalar

hücre1

hücre2

<table border="1" align="left">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

hücre1

hücre2

<table border="1" align="center">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

hücre1

hücre2

<table border="1" align="right">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

width ve height parametreleri resimler konusunda gördüğümüz gibi tabloda en ve boy uzunluğunu belirtir. Tablonun değer verilmediğinde sahip olduğu normal ölçülerinden küçük değerler verilirse bu değerler dikkate alınmaz, bir başka deyişle tabloyu büyütebiliriz fakat küçültemeyiz.