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>
<P>
<B>Kalın yazılar</B> genellikle vurgulanması gereken şeyler için kullanılır. <I>Yatık (italik) yazılar</I> ise benzer amaçlarla kullanılabilir; ama estetik amaçlı kullanımları daha yaygındır.

</BODY>
</HTML>

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; <B> ile </B> 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 </B>'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.

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

<CENTER>Örnek Sayfa #1</CENTER>
<P>
<B>Kalın yazılar genellikle vurgulanması gereken şeyler için kullanılır. <I>Yatık (italik) yazılar</I> ise benzer amaçlarla kullanılabilir; ama estetik amaçlı kullanımları daha yaygındır.

</BODY>
</HTML>

<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>, <P>, <B> ve <I>'nin ne işe yaradığını ileriki bölümlerde inceleyeceğiz. Aslında <P> hariç diğerlerine kısaca değindik. İzleyen bölümde daha ayrıntılı bilgiler bulacaksınız.


1.4 HTML Dökümanı İçinde Açıklama Satırları :

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, "<!--" ve "-->" belirteçleri arasında kalan hiçbirşey web istemcileri tarafından dikkate alınmaz.Örnek;
<!-- Bu bir açıklama satırıdır ve web istemcisinde görüntülenmez -->

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.

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

1. Giriş
2. Paragraf İşareti <P>
3. Satır Kesme İşareti <BR>
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.

ornek2.html
<HTML>
<HEAD>
<TITLE>Boşluklar</TITLE>
</HEAD>
<BODY>

Bir Web sayfasında boşlukların hiçbir önemi yoktur.
<P>
Örneğin aşağıdaki metin hep aynı görüntülenecektir:
<P>
01 boşluk<BR>
03 boşluk<BR>
05 boşluk<BR>
50 boşluk
<P>
<BR>
En baştaki boşluklar ise hiç görüntülenmez:
<P>
3 boşlukla içerden başlanmış bir paragraf en soldan başlar.

</BODY>
</HTML>

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 <P>
Liste 2'de <P> 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 <P> 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 <P>'yi paragrafları birbirinden ayırmak için kullanıyoruz ve Web tarayıcısı bir <P> 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: <P> 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 <P> mi kullanmalıyız peki? Hayır, ne yazık ki bu bir işe yaramaz. Bu iş için <BR>'yi kullanıyoruz.

ornek2.html
<HTML>
<HEAD>
<TITLE>Boşluklar</TITLE>
</HEAD>
<BODY>

Bir Web sayfasında boşlukların hiçbir önemi yoktur.
<P>
Örneğin aşağıdaki metin hep aynı görüntülenecektir:
<P>
01 boşluk<BR>
03 boşluk<BR>
05 boşluk<BR>
50 boşluk
<P>
<BR>
En baştaki boşluklar ise hiç görüntülenmez:
<P>
3 boşlukla içerden başlanmış bir paragraf en soldan başlar.

</BODY>
</HTML>

2.3 ………….


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.

&nbsp;Boşluk
&copy; © işareti
&lt; <
&gt; >
&amp; &

Tahmin edeceğiniz üzere yanyana birden çok &nbsp; 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 &nbsp; yazmak yerine -Liste 3'de olduğu gibi- bir &nbsp; 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 &lt; ve &gt; kullanın.
Eğer siz de benim gibi HTML üzerine bir yazı yazıyorsanız ve &nbsp;'yi veya diğer özel karakter kodlarını yazı olarak bir HTML dosyasına yerleştirmeniz gerekiyorsa çözümünüz &amp; Liste 3'de görüldüğü üzere eğer doğrudan &nbsp; yazsaydık ekrana sadece fazladan bir boşluk basılacaktı. Onun yerine & işaretinin kodunu &amp; ile değiştiriyoruz.
Liste 3'ün sonucunda &nbsp;'nin doğru görüntülendiğine ve GetRight ile 3.0 arasındaki boşluklarla paragraf başlarındaki boşluklara dikkat!

ornek3.html
<HTML>
<HEAD>
<TITLE>Boşluklara Devam</TITLE>
</HEAD>
<BODY>

<CENTER>
&amp;nbsp; ile yanyana birden çok boşluk bırakmak mümkün!
<P>
<BR>
<B>GetRight&nbsp; &nbsp;3.0</B>
</CENTER>
<P>
&nbsp; &nbsp; &nbsp;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.
<P>
&nbsp; &nbsp; &nbsp;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ış.

</BODY>
</HTML>

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 <P ALIGN="left"> veya <P ALIGN="right"> işaretlerini koymak gerekiyor. Buradaki P bildiğimiz <P> 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 <P ALIGN="center"> koymak ama bu sadece bir paragraf üzerinde (başka bir deyişle sonraki ilk <P>'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 <P ALIGN="left|right|center"> işaretini kullanmanız bir satır boşluk oluşturmaz. Paragrafları ayırmak için ayrıca <P> işareti gerekir.

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

<P ALIGN="left">
Sola hizalanmış bir paragraf.
<P>
<P ALIGN="right">
Sağa hizalanmış bir paragraf.
<P>
<P ALIGN="center">
&lt;P ALIGN="center"&gt; ile ortalanmış bir paragraf.
<P>
<BR>
<BR>
<CENTER>
&lt;CENTER&gt; ile ortalanmış ilk paragraf.
<P>
Bu da ikincisi.
</CENTER>

</BODY>
</HTML>


Şeytanın Avukatı: Birinci bölümde her HTML işaretinin kapatılması gerektiğini görmüştük; ama bu bölümde <P> ve <BR> 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 </P> kapatma işaretini kullanmanız mümkün ama benim düşünceme göre bu tamamen gereksiz. </BR> 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.
* <P> ve <BR> 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 &nbsp; sayesinde nasıl yanyana birden çok boşluk koyabildiğimizi öğrendik.
* Bir paragrafı <P ALIGN="left"> ile sola, <P ALIGN="right"> ile sağa yaslayabileceğimiz ve <P ALIGN="center"> ile ortalayabileceğimizi gördük. <CENTER> </CENTER> işaretleri arasındaki herşeyi pratik bir şekilde ortalayabileceğimizi gördük.

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


1. Giriş
2. <FONT FACE="..."> Font Değiştirme
3. <FONT SIZE=x> Font Büyüklüğü
4. <FONT COLOR=x> 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 <U>:
<B> Kalın Yazı
<B> ve </B> işaretleri arasındaki tüm metin kalın görüntülenir.
<I> İtalik Yazı
<I> ve </I> işaretleri arasındaki tüm metin italik (yatık) görüntülenir.
<U> Altı çizili Yazı
<U> ve </U> işaretleri arasındaki tüm metin altı çizili olarak görüntülenir.
3.2 <FONT FACE="..."> Font Değiştirme
<FONT> Font Ayarları
<FONT> işareti tek başına bir iş yapmaz. Arkasına doğru parametreleri vermemiz gerekir:

<FONT FACE="..."> Font Değiştirme
Bu işaretle kullanılan fontu değiştirebiliriz. Örneğin fontu Arial yapmak için <FONT FACE="Arial"> 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 <FONT FACE="..."> 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 <FONT FACE="..."> 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 <FONT FACE="..."> 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 <FONT FACE="Verdana,Arial,Helvetica"> 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.

ornek5.html
<HTML>
<HEAD>
<TITLE>Değişik Fontlar</TITLE>
</HEAD>
<BODY>

<FONT FACE="Arial">Arial, başlıklar için uygun tırnaksız bir fonttur. Başlık için kullanıldığında <B>kalın</B> kullanılması daha uygun olur.</FONT>
<P>
<FONT FACE="Times New Roman">Times New Roman, okunması kolay tırnaklı bir fonttur.</FONT>
<P>
<FONT FACE="Arial,Helvetica">Bu satır PC'lerde <I>Arial</I>, Mac'lerin çoğunda ise <I>Helvetica</I> fontuyla görüntülenecektir.</FONT>

</BODY>
</HTML>

3.4 <FONT COLOR=x> 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>

<FONT FACE="Verdana,Arial,Helvetica" SIZE=5>
<B><CENTER><FONT COLOR="tomato">R</FONT><FONT COLOR="orangered">e</FONT><FONT COLOR="red">n</FONT><FONT COLOR="crimson">k</FONT><FONT COLOR="brown">l</FONT><FONT COLOR="darkred">e</FONT><FONT COLOR="maroon">r</FONT> Üzerine</CENTER></B>
</FONT>
<P>
<FONT FACE="Tahoma" SIZE=4><FONT COLOR="cyan">Cam göbeği</FONT> diğer adıyla <FONT COLOR="cyan">cyan</FONT> çoğunlukla ya <FONT COLOR="green">yeşilin</FONT> ya da <FONT COLOR="blue">mavinin</FONT> 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.</FONT>

</BODY>
</HTML>

ö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>

<FONT FACE="Verdana,Arial,Helvetica" SIZE=2><B>
<FONT COLOR="#FF0000">En parlak saf kırmızı</FONT> (Kırmızı:FF Yeşil:00, Mavi:00)<BR>
<FONT COLOR="#00FF00">En parlak saf yeşil</FONT> (Kırmızı:00 Yeşil:FF, Mavi:00)<BR>
<FONT COLOR="#0000FF">En parlak saf mavi</FONT> (Kırmızı:00 Yeşil:00, Mavi:FF)<BR>
<FONT COLOR="#FFFF00">En parlak saf sarı</FONT> (Kırmızı:FF Yeşil:FF, Mavi:00)<BR>
<FONT COLOR="#00FFFF">En parlak saf cyan</FONT> (Kırmızı:00 Yeşil:FF, Mavi:FF)<BR>
<FONT COLOR="#FF00FF">En parlak saf pembe</FONT> (Kırmızı:FF Yeşil:00, Mavi:FF)<BR>
<FONT COLOR="#800000">Yarı parlak saf kırmızı</FONT> (Kırmızı:80 Yeşil:00, Mavi:00)<BR>
<FONT COLOR="#FF8000">En parlak turuncu</FONT> (Kırmızı:FF Yeşil:80, Mavi:00)
<P>
...
</B></FONT>

</BODY>
</HTML>

İpucu: Bir fontun hem kendisini, hem büyüklüğünü hem de rengini tek bir işaretle değiştirebilirsiniz. Örneğin <FONT FACE="Arial" SIZE=3 COLOR="#C00000">

3.5 Bir Web Sayfasının Arkaplan Rengini Değiştirmek

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">

<FONT FACE="Verdana,Arial,Helvetica" SIZE=2><B>
Hiç bir şekilde <FONT COLOR="#00FF00">&lt;FONT COLOR&gt;</FONT> 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.
</B></FONT>

</BODY>
</HTML>

3.6 Fontlar ve Renkler Bölüm Özeti

* İstenilen bir metni kalın görüntülemek için <B>, italik görüntülemek için <I>, altı çizili görüntülemek için de <U> işaretlerini kullanmamız gerektiğiniz gördük.
* İstediğimiz fontla ekrana yazmak için <FONT FACE=x> 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 <FONT FACE=x> işareti içinde alternatif font isimleri kullanabileceğimizi gördük.
* Kullandığımız fontun büyüklüğünü <FONT SIZE=x> 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 ( <FONT FACE=x SIZE=x> ) değiştirebileceğimizi öğrendik.
* <FONT COLOR=x> 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">
<BR>
<FONT FACE="Arial" SIZE=2><B>İlk resmimiz</B></FONT>
</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.

4.3 Resimleri Sola veya Sağa Yaslamak

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">

<FONT FACE="Arial,Helvetica" SIZE=2>
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)
<P>
İşte ikinci bağlantımız geçen bölümdeki son örneğimize gidiyor:
<P>
<A HREF="ornek11.html">Tıklayın!</A>
</FONT>

</BODY>
</HTML>

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>
<FONT FACE="Arial,Helvetica" SIZE=3>
<B>Internet'teki en popüler arama motorlarından beş tanesi:</B>
<P>
<A HREF="http://www.altavista.com">Alta Vista</A>
<P>
<A HREF="http://www.excite.com">Excite</A>
<P>
<A HREF="http://www.lycos.com">Lycos</A>
<P>
<A HREF="http://www.webcrawler.com">WebCrawler</A>
<P>
<A HREF="http://www.hotbot.com">HotBot</A>
</FONT>
</CENTER>

</BODY>
</HTML>

ö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>
<FONT FACE="Arial,Helvetica" SIZE=3>
<B>İşte tıklanacak bir düğme:</B>
<P>
<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>
</FONT>
</CENTER>

</BODY>
</HTML>

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

5.4 Döküman içi Bağlantılar

Ş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:

<A NAME="muzik_kutusu">...</A>

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>
<FONT FACE="Tahoma,Arial,Helvetica" SIZE=2>
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...
<P>
<CENTER>
<B>İlk 3:</B><BR>
<A HREF="#teymur">Cengiz Teymur</A><BR>
<A HREF="#eskisehir_net">Eskişehir.net</A><BR>
<A HREF="#muzik_kutusu">Müzik Kutusu</A>
</CENTER>
<P>
<BR>
<BR>
<IMG SRC="muzik_kutusu.gif" BORDER=1 ALIGN="right">
<A NAME="muzik_kutusu"><B>Müzik Kutusu (www.muzikkutusu.com)</B></A>
<P>
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...
<P>
<BR>
<BR>
<CENTER><A HREF="#yukari">Yukarı</A>
<P>

</BODY>
</HTML>

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.
<p>Alt çizgisiz kısayol:<br>
<A HREF="http:// www.fatih.edu.tr " STYLE="text-decoration: none"> Fatih Üniversitesi </a><p>
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.
<p>Aktif ve normal kısayol:<br>
<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.
<p>Aktif ve alt çizgisiz kısayol:<br>
<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">

<FONT FACE="Tahoma,Arial,Helvetica" SIZE=2>
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>
</FONT>

</BODY>
</HTML>

<UL> işareti listemizin başladığını gösteriyor. <UL>'den önce yeni bir satıra geçmek için <P> veya <BR> 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">

<FONT FACE="Tahoma,Arial,Helvetica" SIZE=2>
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>
</FONT>

</BODY>
</HTML>

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">

<FONT FACE="Tahoma,Arial,Helvetica" SIZE=2>
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>
</FONT>

</BODY>
</HTML>

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:

ornek19.html

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

<FONT FACE="Tahoma,Arial,Helvetica" SIZE=2>
<FONT COLOR="#0000C0"><B>Şimdiye kadar gördüğümüz bölümler:</B></FONT>
<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>
</FONT>

</BODY>
</HTML>

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">

<FONT FACE="Arial,Helvetica" SIZE=2>
<FONT COLOR="#0000C0"><B>Şimdiye kadar gördüğümüz bölümler:</B></FONT>
<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>
</FONT>

</BODY>
</HTML>

İ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.

<DT> İnternet Sunucusu
<DD> Linux doğrudan TCP/IP desteği ile gelmektedir.

</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.

<table>...</table>

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.

İşte tablolar,

Sonbahar

Kış

İlkbahar

Yaz

Eylül

Aralık

Mart

Haziran

Ekim

Ocak

Nisan

Temmuz

Kasım

Şubat

Mayıs

Ağustos



Tabloyu renklendirelim

Sonbahar

Kış

İlkbahar

Yaz

Eylül

Aralık

Mart

Haziran

Ekim

Ocak

Nisan

Temmuz

Kasım

Şubat

Mayıs

Ağustos



 

Başka bir örnek (farklara dikkat ediniz)

 

Ö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

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>

 

Tabloda başlık ve gövde

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>

 

 

 



Parametreler

<table border="..." cellpading="..." cellspacing="..." align="..." width="..." height="...">

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>



 

cellspacing parametresi hücreler arası marjı belirler.

 

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.

 

hücre1

hücre2

 

<table border="1" width="150" height="200">
 <tr>
  <td>hücre1</td>
 </tr>
 <tr>
  <td>hücre2</td>
 </tr>
</table>

hücre1

hücre2

 

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

hücre1

hücre2

 

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

 

<td> etiketi için parametreler

 

<td bgcolor="..." background="..." width="..." height="..." align="..." valign="...">

bgcolor parametresi hücreyi renklendirmede kullanılır.

 

hücre1

hücre2

hücre3

hücre4

 

<table border="1" cellpadding="7">

<tr>
 <td bgcolor="#ff0000">hücre1</td>
</tr>
<tr>
 <td bgcolor="#00ff00">hücre2</td>
</tr>
<tr>
 <td bgcolor="#0000ff">hücre3</td>
</tr>
<tr>
 <td bgcolor="#ffff00">hücre4</td>
</tr>

</table>

background parametresi ile hücreye grafik-artalan yerleştirebiliriz.

 

hücre1

hücre2

hücre3

hücre4

 

<table border="1" cellpadding="9">

<tr>
 <td background="resim1.jpg">hücre1</td>
</tr>
<tr>
 <td background="resim2.jpg">hücre2</td>
</tr>
<tr>
 <td background="resim3.jpg">hücre3</td>
</tr>
<tr>
 <td background="resim4.jpg">hücre4</td>
</tr>

</table>



 

width ve height parametreleri ile hücrenin boyutlarını belirleyebiliriz. Yalnız height komutu ile tek sütunlu bir tabloda her hücrenin yüksekliğini değiştirebilirken, width komutu ile her hücreyi değiştiremeyiz.En büyük width değeri tüm sütun için geçerli olacaktır. Aynı şekilde tek satırlı tabloda width değerini her hücre için değiştirebilirken en büyük height değeri tüm satır için geçerli olacaktır.

 

hücre1

hücre2

hücre3

hücre4

 

<table border="1" cellpadding="7">

 <tr><td width=120 height=20>hücre1</td></tr>
 <tr><td width=120 height=40>hücre2</td></tr>
 <tr><td width=120 height=60>hücre3</td></tr>
 <tr><td width=120 height=80>hücre4</td></tr>

</table>



 

hücre1

hücre2

hücre3

hücre4

 

<table border="1" cellpadding="7">
  <tr>
     <td width=40 height=30>hücre1</td>
     <td width=70 height=30>hücre2</td>
     <td width=90 height=30>hücre3</td>
     <td width=120 height=30>hücre4</td>
  </tr>
</table>



 

align parametresi hücre içinde yatay hizalama yapar.

hücre1

hücre2

hücre3

 

<table border="1" cellpadding="7">

<tr><td width="100" align="left">hücre1</td></tr>
<tr><td width="100" align="center">hücre2</td></tr>
<tr><td width="100" align="right">hücre3</td></tr>

</table>



 

valign parametresi hücre içinde düşey hizalama yapar.

 

hücre1

hücre2

hücre3

 

<table border="1" cellpadding="7">

<tr>
 <td height="80" valign="top">hücre1</td>
</tr>
<tr>
 <td height="80" valign="middle">hücre2</td>
</tr>
<tr>
 <td height="80" valign="bottom">hücre3</td>
</tr>

</table>

 

Hücreleri Birleştirme

<td colspan=".." rowspan="..">

Aynı satırdaki hücreleri birleştirmek için colspan, aynı sütundaki hücreleri birleştirmek için de rowspan parametresini kullanıyoruz. Birleştirilen hücreye ait <td>..</td> etiketini siliyoruz.

 

A

B

C

D

E

F

G

H

I

J

K

L

 

<table border="1" cellpadding="12">

<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
<tr><td>E</td><td>F</td><td>G</td><td>H</td></tr>
<tr><td>I</td><td>J</td><td>K</td><td>L</td></tr>

</table>

 

Yukarıdaki tabloda;

A ve B hücrelerini birleştirmek için A hücresine ait <td> etiketine colspan=2 parametresini ekliyoruz ve B hücresine ait <td>B</td> etiketini siliyoruz. E F ve G hücrelerini birleştirmek için E hücresine ait <td> etiketine colspan=3 parametresini ekliyoruz ve F ve G hücrelerine ait <td>F</td> , <td>G</td> etiketlerini siliyoruz.

 

A

C

D

E

H

I

J

K

L

 

 

 

 

 

<table border="1" cellpadding="12">

<tr><td colspan="2">A</td><td>C</td><td>D</td></tr>
<tr><td colspan="3">E</td><td>H</td></tr>
<tr><td>I</td><td>J</td><td>K</td><td>L</td></tr>

</table>

 

Aynı şekilde E ve I hücrelerini birleştirmek için E hücresine ait <td> etiketine rowspan=2 parametresini ekliyoruz ve I hücresine ait <td>I</td> etiketini siliyoruz. C G ve K hücrelerini birleştirmek için C hücresine ait <td> etiketine rowspan=3 parametresini ekliyoruz ve G ve K hücrelerine ait <td>G</td> , <td>K</td> etiketlerini siliyoruz.

 

A

B

C

D

E

F

H

J

L

 

<table border="1" cellpadding="12">

<tr><td>A</td><td>B</td>
    <td rowspan="3">C</td><td>D</td></tr>
<tr><td rowspan="2">E</td><td>F</td><td>H</td></tr>
<tr><td>J</td><td>L</td></tr>

</table>

 

Çerçeveler (frame), HTML'e sonradan eklenmiş bir özelliktir. Bu yüzden eski sürüm browser'lar çerçeve kullanılmış bir sayfayı görüntüleyemezler. (Microsoft Internet Explorer 3.0 ile Netscape Navigator 2.0 ve üstü sürümleri frameleri destekliyor). Bunun yanında çerçeve kullanımına karşı düşmanca (!) tavır sergileyen tasarımcılar da hatırı sayılır miktarda ve hala birçok site, ziyaretçisine çerçeveli ve çerçevesiz sunum seçeneği sunuyor.

Çerçeve'ler sayfanın bir tarafı sabit kalırken, diğer tarafını, kullanıcının isteğine göre değiştirme imkanı verir (bu sayfalarda olduğu gibi). Bunun anlamı ise kullanılacak çerçeve miktarınca ek HTML sayfası oluşturmak demektir. Browser çerçevenin bir bölümüne yerleştirilecek olan kaynak dosyayı bulamazsa hata mesajı verecektir.

Aşağıdaki örneği inceleyelim:

 




 

Örneğimizde 3 adet html dosyası var. Bunlardan frame.htm dosyası çerçeve komutlarını içeriyor. Bu komutlar browser'a görüntülenmekte olan pencereyi ikiye bölmesini, bunlardan birisinde htm1.htm dosyasını, diğerinde htm2.htm dosyasını görüntülemesini bildiriyor.

<body bgcolor="..."> etiketi ile htm1.htm dosyasının artalan rengi kırmızı, htm2.htm dosyasının artalanı ise mavi yapılmış, kolaylık olması açısından dosyaların adlarını görüntülemeleri için bunlar da yazılmış ve sonuç gördüğünüz gibi.

Şimdi bu çerçeveyi birlikte oluşturalım:

 

frame.htm dosyası:

<html>

<head>
   <title>Çerçeveler</title>
</head>

<frameset cols="*,*">
   <frame name="sol" src="htm1.htm">
   <frame name="sag" src="htm2.htm">
</frameset>

<noframes>
   <body>
   </body>
</noframes>

</html>

htm1.htm dosyası:

<html>
<head> </head>
<body bgcolor="red">
 <font size="7" color="#ffffff">htm1.htm</font>
</body>
</html>

htm2.htm dosyası:

<html>
<head> </head>
<body bgcolor="blue">
 <font size="7" color="#ffffff">htm2.htm</font>
</body>
</html>

 

<frameset>...</frameset>

Çerçeve oluşturmada kullandığımız etiket frameset, cols ifadesi açılacak çerçevelerin yan yana sütunlar şeklinde olacağını belirtiyor, buraya row yazarsak çerçeveler alt alta satırlar görünümünde açılacaktır.

 


cols (sütunlar)



rows (satırlar)

 

cols="*,*" ifadesi ile açılacak çerçevelerin pixel cinsinden ebatlarını belirliyoruz, buraya örneğin cols="140,500" gibi sayı yazılabilir, cols="25%,75%" ile browser penceresinin o anki ebadına göre verilen % oranlarına göre şekil alması sağlanabilir yada * sembolü ile açılacak çerçevenin ebadı browser'a bırakılır, cols="140,*" ifadesi ilk pencerenin 140 pixel olacağını ikincinin ise ebadının browser'a bırakıldığını gösteriyor.

Bu şekilde aynı zamanda açılacak çerçeve sayısını da belirtmiş oluyoruz. cols=".." ifadesine iki değer (ya da yıldız) verirsek bu iki pencere aç anlamındadır, 3 değer 3 pencere açar.

frame name="..." src="..." etiketi çerçevelere, bağlantıların TARGET kısmında kullanabilmek amacıyla isim (name) vermeyi sağlıyor (bu konuya aşağıda değineceğiz). src pencerede görüntülenecek html dosyasının yerini gösteriyor. resimler bahsinde belirttiğimiz yer (kaynak) gösterme kuralları burada da geçerli. Açılacak çerçeve sayısı kadar frame name="..." src="..." etiketi kullanıyoruz.

Eski sürüm browserların çerçeve etiketini tanımadıklarından bahsetmiştik, işte noframes kısmı bu browserlara hitap ediyor. body kısmını bu eski browserlar görüntüleyebiliyor. Buraya örneğin sayfanın çerçeve kullanılarak yapıldığını gösteren bir mesaj yazılabilir, böylece ziyaretçinin artık yeni sürüm bir browser kullanması gerektiğini hatırlatabilirsiniz.

 

 

UYARI

 

FRAMESET etiketini HTML dosyanızın </head>...<body> etiketleri arasında kullanmayı unutmayın !!.

 




FRAMESET etiketi ile kullanabileceğimiz diğer parametreler şunlar;

frameborder="..."    (yes, no) Çerçeveler arasındaki sınır çizgisinin görünüp görünmeyeceğini belirler.

border="..."    (sayı) Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler



FRAME etiketi ile kullanabileceğimiz parametreler;

marginwidth="..." marginheight="..."    (sayı) Sayfanın solundaki (marginleft) ve üstündeki (margintop) kenar boşluklarını belirler.

scrolling=".."    (yes, no, auto) Kaydırma çubuklarının durumunu belirler.

noresize    Pencere boyutlarının sabit olmasını sağlar.

Daha karmaşık çerçeveler

Yan yana sütünlar ya da alt alta satırlar görünümünde çerçeveler açmayı öğrendik peki tablolarda gördüğümüz hücreleri birleştirme gibi bir özellik çerçevelerde de var mı? maalesef yok, fakat aynı görünümü elde etmek mümkün.

Bu etkiyi sağlamak için FRAMESET etiketini açıp kaynak dosyaların hepsini belirtmeden yeni bir FRAMESET açıyoruz, içiçe açtığımız bu etiketlerin kaynak dosyalarını eksiksiz olarak belirtip, etiketleri sonlandırıyoruz.

Örnekleri ve yanlarındaki kodları inceleyip, farklı çerçeve türlerini kendi bilgisayarınızda oluşturmaya çalışın,

 

 

<frameset rows="*,*" cols="*,*">
   <frame name="a" src="htm1.htm">
   <frame name="b" src="htm2.htm">
   <frame name="c" src="htm3.htm">
   <frame name="d" src="htm4.htm">
</frameset>

 

 

 

 

<frameset cols="150,*">
   <frame name="a" src="htm1.htm">
<frameset rows="100,*">
   <frame name="b" src="htm2.htm">
   <frame name="c" src="htm3.htm">
</frameset>
</frameset>

 

 

 

<frameset rows="50%,50%">
<frameset cols="*,*">
   <frame name="a" src="htm1.htm">
   <frame name="b" src="htm2.htm">
</frameset>
   <frame name="c" src="htm3.htm">
</frameset>

 

 

 

<frameset rows="*,*,*">
   <frame name="a" src="htm1.htm">
<frameset cols="*,*">
   <frame name="b" src="htm2.htm">
   <frame name="c" src="htm3.htm">
</frameset>
   <frame name="d" src="htm4.htm">
</frameset>

 

 

 

<frameset cols="*,*">
<frameset rows="*,*">
   <frame name="a" src="htm1.htm">
   <frame name="b" src="htm2.htm">
</frameset>
   <frame name="c" src="htm3.htm">
</frameset>

 

 

.      Giriş & Dikdörtgensel Alanlar

2.      Dairesel Alanlar

3.      Çokgensel Alanlar

4.      Özet

9.1 Resim Haritalarına Giriş & Dikdörtgensel Alanlar

Resim haritaları ile şimdiye kadar pasif veya bağlantı resmi olarak kullandığımız resimleri çok daha etkin olarak kullanabiliriz. İsminden de tahmin edebileceğiniz gibi; resim haritaları, resimleri tıklanabilir bölgelere ayırabilmemize olanak sağlıyor. Klasik örnekler olarak Türkiye haritasının veya insan anatomisinin resimlerini düşünebilirsiniz. Ankara'ya veya karaciğere tıklamak sizi ilgili sayfalara götürecektir.

Bir resim üzerinde bir harita tanımlarken dikdörtgensel, dairesel ve çokgensel alanlar tanımlayabiliriz. Koordinat olarak da resimdeki piksellerin yatay (X) ve düşey (Y) koordinatlarını kullanıyoruz. Örnek olarak web sitemiz için üç tane grafik düğme tasarladığımızı ve bunları ayrı ayrı resimler olarak kullanmak yerine tek bir resim olarak kullanmak istediğimizi varsayalım. Bu durumda bir resim haritası tanımlamamız gerekiyor. Düğmelerimiz dikdörtgen şeklinde olduğundan dikdörtgensel alanlar kullanacağız.


 

ornek31.html

<HTML>

<HEAD>

<TITLE>Dikdörtgensel Alanlar</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<MAP NAME="harita1">

<AREA SHAPE=RECT COORDS="7,11,89,37"    HREF="servis.html" ALT="Servis">

<AREA SHAPE=RECT COORDS="101,11,183,37" HREF="tm10.html" ALT="TM 10">

<AREA SHAPE=RECT COORDS="196,11,276,37" HREF="cozum_hatti.html" ALT="Çözüm Hattı">

</MAP>

<CENTER>

<IMG SRC="menu_ust.gif" WIDTH=287 HEIGHT=49 USEMAP="#harita1" BORDER=0>

</CENTER>

</BODY>

</HTML>

örnek31'de ilk yaptığımız <MAP> işareti ile bir harita tanımlamak. NAME parametresi ile haritamıza mutlaka bir isim vermeliyiz. Çünkü aynı sayfada birden çok harita kullanabiliriz. Tanımladığımız haritayı hangi resimde kullanacaksak o resmin <IMG SRC=""> işaretinin arkasına USEMAP="#harita_ismi" parametresini eklemeliyiz. Niye BORDER=0 parametresini kullandığımıza gelince... Tıpkı daha önce bir bağlantı olarak kullandığımız resimlerde olduğu gibi resmin çevresinde bir çerçeve oluşmasını engellemek için sınır (border) genişliğini 0'a eşitlememiz gerekiyor.

Harita tanımlarken <MAP> ve </MAP> işaretleri arasında kalan bölüme, kaç tıklanabilir alana ihtiyaç varsa o kadar <AREA> işareti eklememiz gerekiyor. SHAPE parametresi tanımlanan alanın tipini belirlemek için kullanılıyor ki şimdilik sadece dikdörtgensel (RECT) alanlar tanımlıyoruz. COORDS parametresi de tanımladığımız alanın koordinatlarını belirlemek için kullanılıyor. Koordinatlar dikdörtgensel alanlar için sırasıyla sol üst köşenin x, y koordinatları ile yine sırasıyla sağ alt köşenin x, y koordinatlarına karşılık geliyor. Tanımlayacağınız alanların koordinatlarını bulmak için herhangi bir görüntü işlem programı kullanabilirsiniz (örneğin web sitemizden ücretsiz bir resim gösterici ve basit bir görüntü işlem programı olan IrfanView'ü bu amaç için çekebilirsiniz.

HREF parametresi tanıdık gelecektir. Rahatlıkla tahmin edebileceğiniz gibi; bir alan üstüne tıklandığında hangi sayfaya gidileceğini bu parametre belirliyor. ALT parametresi ile ise tanımlı bir alanın üstüne fare imlecini getirip kısa bir süre beklerseniz çıkacak yazıyı seçebilirsiniz.

 

 

 

 



9.2 Dairesel ALanlar

Dairesel alanlar tanımlamak için önce SHAPE parametresinin değerini CIRCLE yapmalıyız. Koordinatları ise sırasıyla dairenin merkezinin x ve y koordinatları ve dairenin yarıçapı şeklinde yazmalıyız. Örneğin örneğimizdeki resimde üstünde Servis yazan sarı düğmenin merkezinin koordinatları x:107, y:38 iken yarıçapı da 32.

ornek32.html

<HTML>

<HEAD>

<TITLE>Dairesel Alanlar</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<MAP NAME="harita2">

<AREA SHAPE=CIRCLE COORDS="35,80,26"  HREF="tm10.html" ALT="TM 10">

<AREA SHAPE=CIRCLE COORDS="107,38,32" HREF="servis.html" ALT="Servis">

<AREA SHAPE=CIRCLE COORDS="188,73,37" HREF="cozum_hatti.html" ALT="Çözüm Hattı">

</MAP>

<CENTER>

<IMG SRC="menu_yuvarlak.gif" WIDTH=228 HEIGHT=115 USEMAP="#harita2" BORDER=0>

</CENTER>

</BODY>

</HTML>

 

 

 

 

 

 

 

 

 

 

 

9.3 Çokgensel Alanlar

Şimdiye kadar basit dikdörtgensel ve dairesel alanlar tanımladık. Daha karmaşık şekiller için ise çokgensel alanları kullanabiliriz. Çokgensel alanlarda istediğimiz kadar koordinat girebiliriz. Bir çokgen tanımlamak noktaları birleştirmekten başka birşey değil aslında. Bir başlangıç noktası seçip bu nokta dahil tüm noktaların x, y koordinatlarını sırasıyla yazıyoruz. Koordinatlarını yazdığımız her yeni nokta bir önceki noktayla birleştiriliyor; koordinatlarını son yazdığımız nokta da başlangıç noktamızla birleştiriliyor. Hepsi bu kadar.

Çokgensel bir alan tanımlamak için ilk iş olarak SHAPE parametresinin değerini POLY yapmamız gerekiyor. Sonra da koordinatları sırasıyla yazıyoruz. Liste 33'teki dünya kadar koordinat size korkutucu gelebilir; gerçekten de çok fazlalar. Aslında bu kadar koordinatın tüm yaptığı yandaki resimdeki son derece mutlu gözüken ördek ve havlusunun çevresini tanımlamak. Tabi tanımlama işlemi sırasında çok daha az nokta kullanıp sadece havlunun sınırlarını belirleyebilirdik ya da kabaca bir dikdörtgensel alan tanımlayabilirdik; ama örnek örnektir 8). Özellikle de bu satırların yazarı koordinat çıkarma hammaliyesini hazır bir programa yaptırdıysa ;) Karmaşık harita tanımlamaları için Internet üzerinde ücretsiz olarak bulabileceğiniz MapMaker adlı programı kullanabilirsiniz ya da Photoshop 5.5'in yanında gelen ImageReady 2.0 gibi pahalı ama pek çok başka güçlü özelliğe sahip programları da tercih edebilirsiniz.

ornek33.html

<HTML>

<HEAD>

<TITLE>Çokgensel Alanlar</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<MAP NAME="harita3">

<AREA SHAPE=POLY COORDS="248,144, 263,142, 279,139, 292,137, 299,146, 291,160, 342,179, 327,220, 334,226, 322,241, 312,250, 272,350, 191,312, 178,300, 152,299, 125,280, 178,197, 167,170, 182,152, 196,155, 201,163, 220,134" HREF="surpriz.html" ALT="Sürpriz!">

</MAP>

<CENTER>

<IMG SRC="getaway.jpg" WIDTH=500 HEIGHT=494 USEMAP="#harita3" BORDER=0>

</CENTER>

</BODY>

</HTML>

Not: Harita tanımlamalarında tüm alan tiplerini (dikdörtgensel, dairesel ve çokgensel) karışık olarak bir arada kullanabilirsiniz.

9.4 Resim Haritaları Bölüm Özeti

*       Resim haritaları ile resimler üzerinde dikdörtgensel, dairesel ve çokgensel alanlar tanımlayabileceğimizi ve bu alanların birer bağlantı olarak iş gördüğünü öğrendik.

*         Bir haritadaki alan tanımlamalarının <MAP> ve </MAP> işaretleri arasında kalan <AREA> işaretleriyle yapıldığını gördük.

*        <AREA> işaretinin arkasına gelen SHAPE parametresinin değeri RECT olduğunda dikdörtgensel alanlar tanımlayabileceğimizi öğrendik.

*         COORDS parametresiyle ise tanımlayacağımız alanın koordinatlarını belirleyebileceğimizi gördük. Koordinatları sırasıyla sol üst köşenin x,y ve sağ alt köşenin x,y koordinatları şeklinde yazmamız gerektiğini gördük.

*        HREF parametresiyle tanımlanan alana tıklandığında hangi sayfaya gidileceğini belirleyebileceğimizi gördük.

*        Son olarak ALT parametresini kullanarak, fare imleci tanımlanan alan üzerindeyken, alan hakkında açıklayıcı bir yazı görüntüleyebileceğimizi öğrendik.

*         Dairesel alan tanımlarken SHAPE parametresinin değerinin CIRCLE olması gerektiğini ve COORDS parametresinin de sırasıyla dairenin merkezinin x,y koordinatları ile yarıçap değerlerini içermesi gerektiğini gördük.

*         Çokgensel alan tanımlamalarında SHAPE parametresinin değerinin POLY olması gerektiğini, COORDS parametresinin ise sırasıyla çokgeni oluşturan her noktanın x ve y koordinatlarını içermesi gerektiğini öğrendik.

1. Giriş & Metin Alanları
2. Metin & Şifre Satırları
3. Radyo Düğmeleri
4. İşaret Kutucukları
5. Kombo Kutuları
6. Özet

1. Formlara Giriş & Metin Alanları

Pek çok web sitesinde görmüşsünüzdür; bazı programları çekmeden önce isminizi ve e-posta adresinizi girmeniz gerekir veya küçük anketler olur onları doldurmanız istenir, gezdiğiniz web sitesi hakkındaki görüşleriniz sorulur vs. Siz de web sitenize bu ve benzeri pek çok amaç için kullanılabilecek formlar yerleştirebilirsiniz.
Form hazırlarken metin satırları (text lines), metin alanları (text areas) radyo düğmeleri (radio buttons), işaret kutucukları (check boxes) ve kombo kutuları (combo boxes) kullanabiliyoruz. Bütün bunların tam olarak ne olduğunu ve nasıl kullanılabileceğini sırasıyla açıklayacağız ama önce formlar genel olarak nasıl tanımlanır onu görelim. Liste 34'te web sitenizi ziyaret edenlerin siteniz hakkındaki görüşlerini size iletebileceği bir metin alanı içeren basit bir form tanımlaması bulunuyor.

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

<FORM METHOD=POST ACTION="mailto:e_posta_adresiniz?subject=Yorumlar" ENCTYPE="application/x-www-form-urlencoded">
<B>Site hakkındaki görüşleriniz:</B><BR>
<TEXTAREA NAME="Yorumlar" COLS=32 ROWS=6 WRAP="soft"></TEXTAREA>
<P>
<INPUT TYPE="submit" VALUE="Gönder"> <INPUT TYPE="reset" VALUE="Temizle">
</FORM>

</BODY>
</HTML>

Formumuzu <FORM> ve </FORM> işaretleri arasında tanımlıyoruz. Şu anda CGI programlarıyla ilgilenmediğimiz için formun METHOD ve ENCTYPE parametrelerinin anlamı bizi fazla ilgilendirmiyor. Bunları standart olarak böyle kullanın. Esas önemli bölüm ACTION parametresinin değeri. Formun içeriğinin e-posta adresinize gelmesi için ACTION parametresinin degerini "mailto:eposta_adresiniz" yapmalısınız. Dilerseniz e-posta adresinizin arkasına boşluk bırakmadan ?subject= kelimesini ekleyerek gelecek olan e-postanın başlığını da belirleyebilirsiniz.


<TEXTAREA> işareti, boyutlarını COLS (en) ve ROWS (boy) parametreleriyle belirleyebileceğimiz, içine yazı yazılabilecek bir alan tanımlamamızı sağlıyor. Bu alana yazılan yazı, alanın fiziksel sınırlarını aşınca otomatik olarak kaydırma çubukları çıkacaktır. Böylece alanın fiziksel boyutlarıyla sınırlanılmadan istenildiği kadar yazı yazılabilir. WRAP parametresi bir satırın sonuna gelindiğinde satırın otomatik olarak bölünüp bölünmeyeceğini belirler. Yazılanların Enter'a basılmadığı sürece sağa doğru uzayıp gitmesini istemiyorsanız her zaman için "soft" değerini kullanın.


NAME parametresini en sona bıraktık; çünkü bu parametre formlarda kullanacağınız tüm öğelerde olması gereken bir parametre. NAME ile öğelere isim veriyoruz. Örneğimizde tek bir form öğemiz olduğu için bu öğeye "Yorumlar" ismini vermek pek anlamlı gözükmeyebilir; ama ileride daha karışık formlar hazırladığımızda size ulaşan form sonuçlarında, ziyaretçilerin hangi öğeye ne yazdığının karışmasını istemiyorsanız, her öğeye diğerlerinden farklı bir isim vermeyi unutmayın ve isimlendirmede Türkçe karakter ile boşluk karakterini kullanmayın.
Peki yazacağımızı yazdık; yazdıklarımızı nasıl göndereceğiz? <INPUT TYPE="submit" VALUE="Gönder"> işaretini bu iş için kullanıyoruz. <INPUT> işareti ile birazdan pek çok form öğesi tanımlayacağız ve bu öğeler için değişik TYPE (tip) değerleri kullanacağız; ama bize şimdilik sadece bir "Gönder" düğmesi yeterli. Bunun için de TYPE parametresinin değeri "submit" olmalı. VALUE parametresi ise düğmenin üstünde ne yazacağını belirliyor. <INPUT TYPE="reset" VALUE="Temizle"> ise formdaki tüm alanların içeriğini temizlemek için kullanabileceğiniz düğme. Buradaki önemli nokta yine TYPE parametresinin değeri ki bu durumda <B<"RESET">.

Önemli Not: Ne yazık ki <FORM> işaretinin ACTION parametresine e-posta adresinizi yazmanız her zaman için form içeriğinin size ulaşacağını garanti etmez. Size e-posta gelebilmesi için sayfanızdaki formu dolduran kişilerin web tarayıcılarındaki e-posta sunucu ayarları doğru yapılmış olmak zorundadır ki bazen bu ayarlar yapılmamış veya yanlış olabiliyor. Burada kesin çözüm CGI programları kullanmak ki bunun için web hosting hizmeti aldığınız kuruluşa danışmanız gerekiyor.
İpucu: <TEXTAREA> ve </TEXTAREA> işaretleri arasına istediğiniz herhangi birşey yazarak; metin alanının, başlangıçta boş gelmek yerine içinde sizin yazdığınız metni içermesini sağlayabilirsiniz.


10.2 Metin & Şifre Satırları

İsim, e-posta adresi, telefon numarası, ev/iş adresi gibi tek satıra sığabilecek bilgiler için metin satırlarının kullanılması idealdir. Bir önceki örneğimizi biraz genişleterek bu form öğesinin nasıl kullanıldığını görelim:

ornek35.html
<HTML>
<HEAD>
<TITLE>Metin Satırları</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<FORM METHOD=POST ACTION="mailto:e_posta_adresiniz?subject=Yorumlar" ENCTYPE="application/x-www-form-urlencoded">
<B>İsminiz:</B><BR>
<INPUT TYPE=TEXT NAME="isim" SIZE=30 MAXLENGTH=45>
<P>
<B>E-posta adresiniz:</B><BR>
<INPUT TYPE=TEXT NAME="e_posta" SIZE=30 MAXLENGTH=45>
<P>
<B>Site hakkındaki görüşleriniz:</B><BR>
<TEXTAREA NAME="Yorumlar" COLS=32 ROWS=6 WRAP="soft"></TEXTAREA>
<P>
<INPUT TYPE="submit" VALUE="Gönder"> <INPUT TYPE="reset" VALUE="Temizle">
</FORM>

</BODY>
</HTML>

örnek 35'te <INPUT TYPE=TEXT> ile metin satırları tanımlayabiliyoruz. NAME parametresiyle herbirine bir isim veriyoruz. SIZE parametresi ise satırın görünür boyutunun kaç karakter olacağını belirliyor. Her ne kadar görünür boy çoğu zaman çok uzun olamasa da MAXLENGTH paramatresiyle maksimum kaç karakter girilebileceğini belirleyebilirsiniz. Böylece satırın görünür boyunu aşan girdiler kaydırılarak gösterilecektir.
Eğer metin satırına yazılan karakterlerin görüntülenmesini istemiyorsanız TYPE parametresinin değerini PASSWORD yapın. Böylece her yazılan karakter yerine bir yıldız görüntülenecektir. Adından belli olduğu üzere bu özel metin satırı genellikle şifre girişleri için kullanılır.

İpucu: Metin veya şifre satırlarına VALUE parametresiyle bir ön değer verebilirsiniz. Örneğin formununuzu dolduranlara web sayfalarının -varsa- adresini soruyorsanız <INPUT TYPE=TEXT NAME="web_adresi" VALUE="http://"> ile satırda otomatik olarak http:// yazısının görüntülenmesini sağlayabilirsiniz.

10.3 Radyo Düğmeleri

Radyo düğmeleri, sunulan bir dizi seçenekten sadece bir tanesini seçmenize izin veren form öğeleridir. Örneğin "ISS'nizden memnun musunuz?" sorusuna hem evet hem de hayır yanıtını veremezseniz. Radyo düğmeleri web sitelerinde sık sık görmeye alıştığımız oylamalarda yoğun olarak kullanılır; seçeneklerden bir tanesini seçer ve Gönder düğmesine basarsınız. Örnek olarak biz de basit bir oylama/anket yapalım.

ornek36.html
<HTML>
<HEAD>
<TITLE>Radyo Düğmeleri</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<FORM METHOD=POST ACTION="mailto:e_posta_adresiniz?subject=Anket" ENCTYPE="application/x-www-form-urlencoded">
<B>Kişisel web sayfanızın olmasını ister misiniz?</B>
<P>
<INPUT TYPE=RADIO NAME="Web_Sayfasi" VALUE="Zaten_Var">Zaten Var<BR>
<INPUT TYPE=RADIO NAME="Web_Sayfasi" VALUE="Yakinda_Yapacagim">İsterim, yakında yapmayı düşünüyorum<BR>
<INPUT TYPE=RADIO NAME="Web_Sayfasi" VALUE="Yapmayi_Bilmiyorum">İsterim; ama nasıl yapılacağını bilmiyorum<BR>
<INPUT TYPE=RADIO NAME="Web_Sayfasi" VALUE="Istemem">İstemem, bence gerek yok
<P>
<INPUT TYPE="submit" VALUE="Gönder"> <INPUT TYPE="reset" VALUE="Temizle">
</FORM>

</BODY>
</HTML>

örnek 36'da muhtemelen ilk dikkatinizi çekecek şey; hepsi de aynı isme (NAME="Web_Sayfasi") sahip dört tane <INPUT TYPE=RADIO> satırı. Her bir radyo düğmesinin ismi aynı ama değerleri (VALUE) farklı. Diğer bir deyişle; ismi aynı olan tüm düğmeleri, farklı değerler alabilen tek bir düğme gibi düşünebilirsiniz. Örnekteki formu dolduranlar herhangi bir radyo düğmesini seçtiğinde, "Web_Sayfasi" seçilen radyo düğmesinin değerini alır. Örneğin yanında "İsterim, yakında yapmayı düşünüyorum" yazan 2 numaralı radyo düğmesi seçilip Gönder tuşuna basıldığında "Web_Sayfasi" nın değeri "Yakinda_Yapacagim" olur.

İpucu: Eğer bir radyo düğmesinin otomatik olarak seçili belirmesini istiyorsanız CHECKED parametresini kullanabilirsiniz. Örneğin ilk radyo düğmesini seçili yapmak için <INPUT TYPE=RADIO NAME="Web_Sayfasi" VALUE="Zaten_Var" CHECKED> işaretini kullanabilirsiniz.

10.4 İşaret Kutucukları

İşaret kutucukları, radyo düğmelerinin aksine birden çok seçenek seçmenize izin verirler. Örneğin "Dışarıda yemek yerken tercih ettiğiniz yiyecekler:" sorusuna birden çok yanıt verebilirsiniz. Yanıtı birden çok olabilen sorular için işaret kutucukları kullanılmalıdır.

ornek37.html
<HTML>
<HEAD>
<TITLE>İşaret Kutucukları</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<FORM METHOD=POST ACTION="mailto:e_posta_adresiniz?subject=Anket" ENCTYPE="application/x-www-form-urlencoded">
<B>Dışarıda yemek yerken tercih ettiğiniz yiyecekler:</B>
<P>
<INPUT TYPE=CHECKBOX NAME="ev_yemekleri">Ev yemekleri
<INPUT TYPE=CHECKBOX NAME="gozleme">Gözleme
<INPUT TYPE=CHECKBOX NAME="hamburger">Hamburger
<INPUT TYPE=CHECKBOX NAME="kebap">Kebap
<INPUT TYPE=CHECKBOX NAME="pizza">Pizza
<P>
<INPUT TYPE="submit" VALUE="Gönder"> <INPUT TYPE="reset" VALUE="Temizle">
</FORM>

</BODY>
</HTML>

örnek 37'de işaret kutucuklarını oluşturmak için <INPUT TYPE=CHECKBOX> ile başlayan satırları kullanıyoruz. Dikkat ederseniz bu satırlar herhangi bir VALUE değeri içermiyorlar; bunun yerine herbir işaret kutucuğunun kendine ait bir ismi var. Eğer herhangi bir işaret kutucuğu seçilirse, formun sonuçlarını size ileten e-posta mesajında, bu seçeneğin isminin karşısında "on" (seçili) değeri görüntülenecektir.

İpucu: Radyo düğmelerinde olduğu gibi işaret kutularında da CHECKED parametresi istediğiniz seçeneğin otomatik olarak seçili gelmesini sağlar. Tabi radyo düğmelerinin aksine birden çok seçeneği otomatik olarak seçili kılabilirsiniz

10.5 Kombo Kutuları

Kombo kutuları, sayfayı uzanıp giden seçeneklerle doldurmak istemediğiniz zamanlarda çok yararlı olur. Bir kombo kutusu, yanındaki ok işaretine tıklandığında açılan ve içerdiği seçeneklerden birini seçmenize izin veren özel bir form öğesidir.

ornek38.html
<HTML>
<HEAD>
<TITLE>Kombo Kutuları</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<FORM METHOD=POST ACTION="mailto:e_posta_adresiniz?subject=Anket" ENCTYPE="application/x-www-form-urlencoded">
<B>Modeminizin hızı:</B>
<SELECT NAME="Modem">
<OPTION>--Modem--</OPTION>
<OPTION VALUE="14K">14K</OPTION>
<OPTION VALUE="28K">28K</OPTION>
<OPTION VALUE="33K">33K</OPTION>
<OPTION VALUE="56K">56K</OPTION>
<OPTION VALUE="Diger">Diğer</OPTION>
</SELECT>
<P>
<INPUT TYPE="submit" VALUE="Gönder"> <INPUT TYPE="reset" VALUE="Temizle">
</FORM>

</BODY>
</HTML>

örnek 38'de bir kombo kutusunu tanımlamak için <SELECT> ve <OPTION> işaretlerini kullanıyoruz. <SELECT> işareti kombo kutusunun tümüne karşılık geliyor ve NAME parametresiyle isimlendirilmesi gerekiyor. <OPTION> işareti ile ise kombo kutumuzda yer alacak herbir seçeneği belirliyoruz. Seçilebilir her seçenek bir değere sahip olmalı (VALUE parametresi). Buradaki --Modem-- yazılı satırın bir VALUE parametresine sahip olmadığına dikkat edin. Normalde bu satırı kullanmak zorunda değildik; ama insanların yanlışlıkla veya umursamazlıkla kombo kutumuzdan herhangi bir seçim yapmadan Gönder tuşuna basmadığına emin olmak için iyi bir tedbir. Eğer bu satırı kullanmasaydık bir miktar dikkatsiz veya "aldırmaz" insanın yanlış sonuçlar yollama olasılığı oldukça yüksek olacaktı. Bu yüzden kombo kutularının ilk seçeneklerini bu tür "seçenek olmayan" açıklayıcı kısa birkaç kelime yapmak çoğu zaman tercih edilen bir yöntem.

10.6 Formlar Bölüm Özeti

* Bir form tanımlamak için öncelikle formumuzdaki öğelerin <FORM> ve </FORM> işaretleri arasında yer alması gerektiğini öğrendik.
* <FORM> işaretinin arkasına gelen parametrelerden en önemlisinin ACTION parametresi olduğunu, bu parametreyle form sonuçlarının verilen e-posta adresine gönderilebileceğini gördük.
* <TEXTAREA> işaretinin, boyutlarını COLS (en) ve ROWS (boy) parametreleriyle bizim belirleyebileceğimiz, içine yazı yazılabilir bir metin alanı tanımlamakta kullanıldığını öğrendik.
* NAME parametresinin <TEXTAREA> dahil hemen tüm form öğelerinde ortak bir parametre olduğunu ve öğelere isim vermekte kullanıldığını gördük. Bu parametrenin, bize ulaşan form sonuçlarında, hangi öğenin ne değer aldığını anlamakta kullanıldığını öğrendik.
* Doldurulan formun gönderilebilmesi için gerekli düğmeyi <INPUT TYPE="submit"> işaretiyle, formu temizlemek için kullanılan düğmeyi de <INPUT TYPE="reset"> işaretiyle formumuza ekleyebileceğimizi gördük.
* İsim, e-posta adresi gibi tek satıra sığabilecek bilgiler için kullanılan metin satırlarını <INPUT TYPE=TEXT> işareti ile tanımladığımızı; satırların boyutlarını belirlemek için de SIZE (görünen boyut) ve MAXLENGTH (yazılabilecek maksimum karakter sayısı) parametrelerini kullanabileceğimi öğrendik.
* Metin satırlarına yazılan karakterlerin gözükmemesi, bunun yerine yazılan her karakter için * işaretinin görüntülenmesi için TYPE parametresinin değerinin PASSWORD olması gerektiğini gördük.
* Verilen bir dizi seçenekten sadece bir tanesinin seçilebildiği durumlarda <INPUT TYPE=RADIO> işaretiyle radyo düğmeleri tanımlamamız gerektiğini ve ismi (NAME parametresiyle) aynı olan tüm radyo düğmelerinin değişik değerler alabilen tek bir düğme olarak düşünebileneceğini öğrendik.
* Radyo düğmelerinin aksine birden çok seçeneğin aynı anda seçilebileceği form öğesinin işaret kutucukları olduğunu ve bunların <INPUT TYPE=CHECKBOX> işareti ile tanımladığını gördük. Herbir işaret kutusunun yine radyo düğmelerinin aksine ayrı bir ismi olduğunu ve seçililerse "on" değerini aldıklarını öğrendik.
* Kombo kutularının, işlevsel olarak, radyo düğmeleriyle aynı olduğunu ancak ekranda çok daha az yer kapladığını ve <SELECT> ile <OPTION> işaretleriyle tanımlandığını gördük.

 

      Formlar konusu ile birlikte HTML öğreniyorum yazı dizimiz sona erdi, buraya kadar öğrendiklerinizle internette siz de kendinize ait sayfalarınızı inşa edebilirsiniz, eğer bu konuda ciddi düşünüyorsanız bunun yolunun çok çalışmaktan geçtiğini sakın unutmayın, hoşunuza giden sitelerin dizayn mantığını anlamaya çalışın, hatta bunun için kaynak kodlarını inceleyin. Görsel editörleri kullanarak sayfalar hazırlayın ve sonra da editörün kodları nasıl oluşturduğuna bakın. Son olarak; iyi bir tasarımcı olmanın yolunun çok çalışmak ve devamlı araştırmakan geçtiğini unutmayın. Hepinize başarılar...