HTML Ders

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, "" belirteçleri arasında kalan hiçbirşey web istemcileri tarafından dikkate
alınmaz.Örnek;

1.5 Özet
* Web sayfası tasarımının ne demek olduğunu ve HTML'in bir programlama dili değil işaretleme dili olduğunu
öğrendik.
* Bir metin editörüyle basit bir sayfa hazırladık (ornek1.html).
* Her HTML dosyasının -zorunlu olmasa da- <HTML>, <HEAD> ve <BODY> satırlarını içermesi gerektiğini
gördük:
* <HTML> işaretinin Web tarayıcılarının bir dosyanın HTML dosyası olup olmadığını anlamasında
kullanıldığını,
* <HEAD> ile </HEAD> arasında kalan bölümün HTML dosyaları hakkında bilgi tutma işine yaradığını,
* HTML dosyasının esas görüntülenen bölümünün <BODY> ile </BODY> arasında yer aldığını öğrendik.
* <TITLE> işaretinin, görüntülenen HTML dosyasının başlığının Web tarayıcısının başlık satırında
gösterilmesinde kullanıldığı öğrendik.
Eğer buraya kadar kafanızda bazı sorular oluştuysa ya da bazı şeyler size karışık geldiyse cesaretiniz
kırılmasın; izleyen bölümler pek çok örnekle kafanızdaki soruların çoğunu temizleyecektir.
1. Giriş
2. Paragraf İşareti <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.
Boşluk
© © işareti
< <
> >
& &
Tahmin edeceğiniz üzere yanyana birden çok yazmamız birden çok boşluğun
görüntülenmesini sağlıyor. Böylece Liste 3'de olduğu gibi paragraflara içeriden başlamak veya
iki kelime arasında birden çok boşluk bırakmak mümkün oluyor.
İpucu: Yanyana her boşluk için yazmak yerine -Liste 3'de olduğu gibi- bir bir
boşluk yazabilirsiniz. Böylece daha az yazmış olursunuz.
Küçüktür (<) ve büyüktür (>) işaretleri HTML işaretleri için kullanıldığından bunları yazı içinde
kullanmanız gerektiğinde sırasıyla < ve > kullanın.
Eğer siz de benim gibi HTML üzerine bir yazı yazıyorsanız ve 'yi veya diğer özel karakter
kodlarını yazı olarak bir HTML dosyasına yerleştirmeniz gerekiyorsa çözümünüz & Liste
3'de görüldüğü üzere eğer doğrudan yazsaydık ekrana sadece fazladan bir boşluk
basılacaktı. Onun yerine & işaretinin kodunu & ile değiştiriyoruz.
Liste 3'ün sonucunda 'nin doğru görüntülendiğine ve GetRight ile 3.0 arasındaki
boşluklarla paragraf başlarındaki boşluklara dikkat!
ornek3.html
<HTML>
<HEAD>
<TITLE>Boşluklara Devam</TITLE>
</HEAD>
<BODY>
<CENTER>
  ile yanyana birden çok boşluk bırakmak mümkün!
<P>
<BR>
<B>GetRight 3.0</B>
</CENTER>
<P>
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>
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">
<P ALIGN="center"> ile ortalanmış bir paragraf.
<P>
<BR>
<BR>
<CENTER>
<CENTER> 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 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.
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"><FONT COLOR></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.
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>
<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>
<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>
<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>
VLINK="#800000" ALINK="#0000FF">
Türkiye'de yayınlanan bilgisayar/internet dergilerinin web sayfaları:
<UL>
<LI><A HREF="http://www.adnet.com.tr">ad.net</A>
<LI><A HREF="http://www.chip.com.tr">Chip</A>
<LI><A HREF="http://www.pcmagazine.com.tr">PC Magazine</A>
<LI><A HREF="http://www.pcnet.com.tr">PCnet</A>
<LI><A HREF="http://www.pcworld.com.tr">PC World</A>
</UL>
</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>
VLINK="#800000" ALINK="#0000FF">

<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>
</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>
VLINK="#800000" ALINK="#0000FF">

<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>
</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>
VLINK="#800000" ALINK="#0000FF">

<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>
VLINK="#800000" ALINK="#0000FF">

<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ığı Sütun Başlığı Sütun Başlığı Sütun Başlığı
#1 #2 #3 #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 <table border="1">

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

<tr>
hücre3 hücre4 <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)
<![endif]>
1.Sütun
2.Sütun 3.Sütun
<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.

<tr>
<td>hücre</td>
</tr>
</table>

<tr>
<td>hücre</td>
</tr>
</table>

<tr>
<td>hücre</td>
</tr>
</table>

<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>
<table border="1" cellpadding="5">

hücre <tr>
<td>hücre</td>
</tr>
</table>
hücre <tr>
<td>hücre</td>
</tr>
</table>
cellspacing parametresi hücreler arası marjı belirler.
hücre1 <table border="1" cellspacing="1">

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

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

<tr>
</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 <table border="1" align="left">

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

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

<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>
hücre1
hücre2

<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
<tr>
hücre2 <td bgcolor="#ff0000">hücre1</td>
</tr>
hücre3 <tr>
<td bgcolor="#00ff00">hücre2</td>
hücre4 </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
<tr>
hücre2 <td background="resim1.jpg">hücre1</td>
</tr>
<tr>
hücre3 <td background="resim2.jpg">hücre2</td>
</tr>
hücre4 <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
<tr><td width=120 height=20>hücre1</td></tr>

</table>
hücre1
hücre2 hücre3 hücre4

<tr>
<td width=40 height=30>hücre1</td>
</tr>
</table>
align parametresi hücre içinde yatay hizalama yapar.
hücre1
hücre2
hücre3
<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
<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.
B C D
E F G H
I J K L
<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.
C D
E H
I J K L
<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
F D H
E
J L
<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.
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,*">
<frameset rows="100,*">
</frameset>
</frameset>
<frameset rows="50%,50%">
</frameset>
</frameset>
<frameset rows="*,*,*">
</frameset>
<frame name="d" src="htm4.htm">
</frameset>
<frameset rows="*,*">
</frameset>
</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>
<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>
<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>
<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>
<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>
<FORM METHOD=POST ACTION="mailto:e_posta_adresiniz?subject=Yorumlar"

<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>
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>
<FORM METHOD=POST ACTION="mailto:e_posta_adresiniz?subject=Anket"

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

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

<B>Modeminizin hızı:</B>
<SELECT NAME="Modem">
<OPTION>--Modem--</OPTION>
<OPTION VALUE="14K">14K</OPTION>
<OPTION VALUE="Diger">Diğer</OPTION>
</SELECT>
<P>
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...
Mehmet BASTI / Fatih Üniversitesi

HTML Ders

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Ders

Uploaded by

Copyright:

Available Formats

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

1. Web Tasarımı Tam Olarak Ne Anlama Geliyor?

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

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

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

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

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

2.1 Paragraf Düzenleme İşaretlerine Giriş

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

2.2 Paragraf işareti <P>

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

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

2.5 Paragrafları Sola, Sağa Yaslamak ve Ortalamak

* HTML sayfalarındaki yazılarda kullanılan boşlukların, boş satırların ve cümlelerin bölünüş

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

3.1 Fontlar ve Renklere Giriş

<FONT FACE="..."> Font Değiştirme

3.4 <FONT COLOR=x> Font Rengi

<FONT FACE="Verdana,Arial,Helvetica" SIZE=5>

<FONT FACE="Verdana,Arial,Helvetica" SIZE=2><B>

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

<FONT FACE="Verdana,Arial,Helvetica" SIZE=2><B>

3.6 Fontlar ve Renkler Bölüm Özeti

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

1. Ekranda Resim Görüntülemek

Resimleri kullanırken dikkat etmeniz gerekenler:

4.1 Ekranda Resim Görüntülemek

İki örnek daha...

4.2 Resimleri Çerçeveyle Çevrelemek

4.3 Resimleri Sola veya Sağa Yaslamak

Resimleri, yazılarına soluna veya sağına sırasıyla ALIGN="left" veya ALIGN="right"

4.4 Resimlere Yorum Eklemek

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

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

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

5.1 Bağlantılara Giriş

<FONT FACE="Arial,Helvetica" SIZE=2>

* Sabit diskinizdeki HTML dosyalarınızda bulunan bağlantıları denemek istediğinizde Internet'e

5.2 Bağlantı Renklerini Belirlemek

5.3 Bağlantı Olarak Resim Kullanmak

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

5.5 Alt çizgisiz ve aktif kısayollar:

6.1 Sırasız Listeler

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

<FONT FACE="Tahoma,Arial,Helvetica" SIZE=2>

6.3 Mermi Şeklini Değiştirmek

<FONT FACE="Tahoma,Arial,Helvetica" SIZE=2>

6.4 Sıralı Listeler

<FONT FACE="Tahoma,Arial,Helvetica" SIZE=2>

6.5 İç içe Sıralı Listeler

<FONT FACE="Arial,Helvetica" SIZE=2>

İpucu 1: <UL> ve <OL> işaretlerini iç içe kullanabilirsiniz.

6.6. Tanımlı Listeler

<DT> İnternet Sunucusu

6.7 Listeler Bölüm Özeti

Sonbahar Kış İlkbahar Yaz

Sonbahar Kış İlkbahar Yaz

Başka bir örnek (farklara dikkat ediniz)

hücre <table border="1">

hücre1 hücre2 <table border="1">

hücre1 <table border="1">