Bu bölümdeki konu başlıklarımız;
1. Web Tasarımı Tam Olarak Ne Anlama Geliyor?
2. İlk Sayfamızı Oluşturalım
3. < ile > Arasındaki Şeyler Ne İşe Yarıyor?
4. Doküman içinde açıklama satırları nasıl yazılır?
5. Özet
1.2 İlk Sayfamızı Oluşturalım!
Bu iş için basit bir metin editörü veya kelime işlemci yeterli. Eğer işletim
sisteminiz Windows ise Not Defterini (NotePad), MacOS ise TeachText'i, Unix'se
vi'yi kullanabilirsiniz. Aslında olasılıkların sınırı yok. Başlangıç için bu
basit editörleri öneriyorum; çünkü ayrıca satın almanız gerekmiyor - işletim
sisteminizle beraber geliyorlar. Karışık Web sayfalarında Not Defteri ve
TeachText size biraz zorluk çıkaracaktır; çünkü bunların Bul/Değiştir özelliği
yok. Yine de şimdilik fazlasıyla yeterliler. Evet hadi başlayalım!
Metin Editörünüzü yükleyin ve aşağıdaki satırları editörünüzde yazın.
ornek1.html
<HTML>
<HEAD>
<TITLE>İlk Sayfam</TITLE>
</HEAD>
<BODY>
<CENTER>Örnek Sayfa #1</CENTER>
<P>
<B>Kalın yazılar</B> genellikle vurgulanması gereken şeyler için kullanılır.
<I>Yatık (italik) yazılar</I> ise benzer amaçlarla kullanılabilir; ama estetik
amaçlı kullanımları daha yaygındır.
</BODY>
</HTML>
Sonra bu metni diskiniz üzerinde bir yere ornek1.htm ismiyle kaydedin
(karışıklığı önlemek için bu yazı dizisindeki örneklere özel bir klasör
kullanmanız önerilir) ve sayfamızı görüntülemek için şu an bu yazıyı
görüntülediğiniz web tarayıcınıza geçin ve Ctrl+N'ye basarak yeni bir pencere
açın.
Sıra Ctrl+O'ya basarak dosyamızı açmaya geldi. Internet Explorer kullanıyorsanız
Browse'a, Netscape Communicator kullanıyorsanız Choose File düğmesine tıklayarak
çıkan dosya ve klasör listesinden ornek1.htm'in bulunduğu klasörü bulun ve
ornek1.html'in ismi üstüne çift tıklayın. Tekrar Dosya açma diyalog kutusuna
geri döndük; ama artık ornek1.html'in tam yeri görünmekte. ornek1.html benim E:
diskimde web adlı klasörün içinde. Sizinki bambaşka bir yerde olabilir tabi ki.
Neyse Open'a basın ve ilk sayfamız nasıl görünüyor bir bakalım.
Not: Rahatlıkla fark edebileceğiniz gibi buradaki örnekleri görüntülemek için
ilgili listeyi yukarıda anlatılan yöntemle diske kaydedip tekrar açmanıza gerek
yok. Liste başlıklarının yanında görüntülenen "Göster" düğmesi basmanız da
yeterli; ancak örnekler üzerinde oynamak ve sonuçlarını görmek için yine de
yukarıda anlatılanları uygulamanız en kısa yöntem.
1.3 < ile > Arasındaki Şeyler Ne İşe Yarıyor?
Fark ettiğiniz gibi ekranda görüntülediğimiz metnin arasına serpiştirdiğimiz
küçüktür (<) ve büyüktür (>) karakterleri arasındaki yazılar ekranda
görüntülenmiyor. Bunun yerine bunlar yazının nasıl görüntüleneceğini belirliyor.
Diğer bir deyişle < ve > karakterleri arasındaki her şey HTML işaretlerine
karşılık geliyor ve bu işaretler kendilerinden sonra gelen metin üzerinde
değişikliklere yol açıyorlar. Örneğin <CENTER> ile </CENTER> arasında kalan
"Örnek Sayfa #1" ortalanıyor; <B> ile </B> arasında kalan "Kalın yazılar" ise
ekranda kalın olarak görüntüleniyor. Buradan çıkarabileceğimiz sonuç bir HTML
işaretinin etkisinin bittiği yerin aynı HTML işaretinin önüne / işareti konarak
belirlendiği.
Peki eğer bir işareti kapatmazsak ne olur? Örneğin </B>'yi kaldıralım. Sonuç pek
istediğimiz gibi olmayacaktır. Eğer bir işareti kapatmayı unutursanız o
işaretten sonra gelen tüm metin o işaret ne yapıyorsa ondan etkilenecektir.
ornek1b.html
<HTML>
<HEAD>
<TITLE>İlk Sayfam</TITLE>
</HEAD>
<BODY>
<CENTER>Örnek Sayfa #1</CENTER>
<P>
<B>Kalın yazılar genellikle vurgulanması gereken şeyler için kullanılır.
<I>Yatık (italik) yazılar</I> ise benzer amaçlarla kullanılabilir; ama estetik
amaçlı kullanımları daha yaygındır.
</BODY>
</HTML>
<HTML>
Bir HTML dosyasının ilk satırı daima <HTML> son satırı da </HTML> olmalıdır. Bu
iki işaret, Web tarayıcınızın, bir dosyanın HTML dosyası olup olmadığını
anlamasının iki yolundan biridir. İki yolundan biridir dedik çünkü <HTML>
işaretini kullanmasanız bile tarayıcınızın görüntületmek istediğiniz dosyanın
bir HTML dosyası olup olmadığını anlamasının bir yolu daha var; o da dosyanın
uzantısını .HTM veya .HTML yapmak. Siz yine de değişik Web tarayıcılarının sorun
çıkarabileceği olasılığını göz önüne alıp her zaman için <HTML> ve </HTML>
işaretlerini kullanın.
<HEAD>
<HEAD> ve </HEAD> arasında kalan bölüm HTML dosyası hakkındaki bilgileri tutar.
Bunlardan bir tanesinin <TITLE> yani başlık satırı olduğunu gördük. Geri
kalanları şimdilik ileriki bölümlere bırakalım. <HEAD> işaretini kullanmak
zorunda değilsiniz; ama ileride özellikle kullanmanız gereken durumlardan
bahsedeceğiz.
<TITLE>
Web tarayıcınızın başlık satırında görüntülenmekte olan HTML dosyasının
başlığını göstermek için kullanılır. ornek1.htm için başlık olarak "İlk Sayfam"ı
kullandık. Eğer bu işareti kullanmazsanız başlık olarak hiçbir şey
görüntülenmez.
<BODY>
Asıl HTML dosyamız yani ekranda görüntülenecek herşey <BODY> ile </BODY>
işaretlerinin arasında yer alır. Yine bu iki işareti kullanmak zorunda
değilsiniz; ama ileride <BODY>'nin önemli başka işlere yaradığını göreceğiz.
Diğerleri...
<CENTER>, <P>, <B> ve <I>'nin ne işe yaradığını ileriki bölümlerde
inceleyeceğiz. Aslında <P> hariç diğerlerine kısaca değindik. İzleyen bölümde
daha ayrıntılı bilgiler bulacaksınız.
1.4 HTML Dökümanı İçinde Açıklama Satırları :
HTML Döküman İçinde, kodu takip etmede kolaylıklar sağlayacak bazı açıklama
satırları konabilir. Döküman içinde herhangi biryerde, "<!--" ve "-->"
belirteçleri arasında kalan hiçbirşey web istemcileri tarafından dikkate
alınmaz.Örnek;
<!-- Bu bir açıklama satırıdır ve web istemcisinde görüntülenmez -->
1.5 Özet
* Web sayfası tasarımının ne demek olduğunu ve HTML'in bir programlama dili
değil işaretleme dili olduğunu öğrendik.
* Bir metin editörüyle basit bir sayfa hazırladık (ornek1.html).
* Her HTML dosyasının -zorunlu olmasa da- <HTML>, <HEAD> ve <BODY> satırlarını
içermesi gerektiğini gördük:
* <HTML> işaretinin Web tarayıcılarının bir dosyanın HTML dosyası olup
olmadığını anlamasında kullanıldığını,
* <HEAD> ile </HEAD> arasında kalan bölümün HTML dosyaları hakkında bilgi tutma
işine yaradığını,
* HTML dosyasının esas görüntülenen bölümünün <BODY> ile </BODY> arasında yer
aldığını öğrendik.
* <TITLE> işaretinin, görüntülenen HTML dosyasının başlığının Web tarayıcısının
başlık satırında gösterilmesinde kullanıldığı öğrendik.
Eğer buraya kadar kafanızda bazı sorular oluştuysa ya da bazı şeyler size karışık geldiyse cesaretiniz kırılmasın; izleyen bölümler pek çok örnekle kafanızdaki soruların çoğunu temizleyecektir.
Bu bölümdeki konu başlıklarımız;
1. Giriş
2. Paragraf İşareti <P>
3. Satır Kesme İşareti <BR>
4. Yanyana Birden Çok Boşluk Kullanımı ve Özel Karakter Kodları
5. Paragrafları Sola, Sağa Yaslamak ve Ortalamak
6. Özet
2.1 Paragraf Düzenleme İşaretlerine Giriş
Bir Web tarayıcısı bir HTML sayfasını, aşağı yukarı standart bir kelime işlemci
(örneğin MS Word) bir metni nasıl görüntülüyorsa öyle görüntüler. Bir kelime
işlemcide paragraflar ancak siz Enter tuşuna bastığınızda ayrılır; metni sola,
sağa yaslayabilir veya ortalayabilirsiniz. Bütün bunları yapmak bir HTML
sayfasında da mümkün. Ancak önemli bir farkı hemen söyleyelim: Bir Web
tarayıcısı için bir HTML dosyasında yer alan metin içinde yeralan yanyana üç,
beş veya elli boşluğun tek bir boşluktan farkı yoktur; hepsi tek boşlukmuş gibi
görüntülenir. Üstelik boş satırların ve bir satırın en başındaki boşlukların da
bir önemi yoktur - hiç görüntülenmezler.
ornek2.html
<HTML>
<HEAD>
<TITLE>Boşluklar</TITLE>
</HEAD>
<BODY>
Bir Web sayfasında boşlukların hiçbir önemi yoktur.
<P>
Örneğin aşağıdaki metin hep aynı görüntülenecektir:
<P>
01 boşluk<BR>
03 boşluk<BR>
05 boşluk<BR>
50 boşluk
<P>
<BR>
En baştaki boşluklar ise hiç görüntülenmez:
<P>
3 boşlukla içerden başlanmış bir paragraf en soldan başlar.
</BODY>
</HTML>
Peki yanyana birden çok boşluk kullanamıyorsak paragraflara nasıl içeriden başlayacağız veya tablo şeklindeki verileri nasıl ekranda doğru göstereceğiz gibi sorular aklınıza gelebilir. Bunların hepsinin çözümü var. Okumaya devam edin!
2.2 Paragraf işareti <P>
Liste 2'de <P> işaretini koymamızın nedeni -her bir cümleyi paragraf olarak
düşünürsek- paragrafları birbirinden bir boş satırla ayırmak. Eğer ilk iki cümle
arasında <P> kullanmazsak her ne kadar Liste 2'de bu cümleler alt alta yer
alıyor olsalar da bu iki cümle birbirine bitişir. O zaman <P>'yi paragrafları
birbirinden ayırmak için kullanıyoruz ve Web tarayıcısı bir <P> işareti
gördüğünde önceki paragrafı bitiriyor, bir boş satır bırakıyor ve yeni paragrafa
başlıyor.
Burada önemli olan sizin bir metinde cümleleri ve paragraflarını nereden
kestiğiniz değil. Herhangi bir kelime işlemcide yazdığınız yazıların, sayfa
genişliğini değiştirdiğinizde otomatik olarak o sayfa genişliğine göre
hizalandığını hatırlayın. Web tarayıcısı da çok benzer bir mantıkla çalışır: <P>
ile bölünen paragraflar Web tarayıcınızın penceresinin boyutlarına göre otomatik
olarak hizalanırlar. Böylece bir paragrafın ilk cümlesi 8. kelimeden bölünürken
pencerenin boyutunu büyüttüğünüzde 10. kelimeden bölünebilir.
Birden çok boş satır bırakmak istiyorsak birden çok <P> mi kullanmalıyız peki?
Hayır, ne yazık ki bu bir işe yaramaz. Bu iş için <BR>'yi kullanıyoruz.
ornek2.html
<HTML>
<HEAD>
<TITLE>Boşluklar</TITLE>
</HEAD>
<BODY>
Bir Web sayfasında boşlukların hiçbir önemi yoktur.
<P>
Örneğin aşağıdaki metin hep aynı görüntülenecektir:
<P>
01 boşluk<BR>
03 boşluk<BR>
05 boşluk<BR>
50 boşluk
<P>
<BR>
En baştaki boşluklar ise hiç görüntülenmez:
<P>
3 boşlukla içerden başlanmış bir paragraf en soldan başlar.
</BODY>
</HTML>
2.3 ………….
2.4 Yanyana Birden Çok Boşluk Kullanımı ve Özel Karakter Kodları
Yanyana birden çok boşluk koymanın normal yollardan mümkün olmadığından
bahsetmiştik; ama bunun bir yolu var: Özel karakterler kullanmak. Normalde
klavyeden giremediğiniz özel karakterleri, karşılık gelen kodlarla yazabiliriz.
Tüm özel karakter & ile ; arasında yer alan kodlarla gösterilir. En çok
kullanılan birkaç tanesini burada veriyorum.
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>
&nbsp; 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.
Bu bölümdeki konu başlıklarımız;
1. Giriş
2. <FONT FACE="..."> Font Değiştirme
3. <FONT SIZE=x> Font Büyüklüğü
4. <FONT COLOR=x> Font Rengi
5. Bir Web Sayfasının Arkaplan Rengini Değiştirmek
6. Özet
3.1 Fontlar ve Renklere Giriş
İkinci bölümde paragraflarla ilgili işaretleri gördük; ama doğrusunu söylemek
gerekirse şimdiye kadar yaptığımız tüm örnekler hep düz yazıdan oluştuğu için
biraz kuru gözüküyordu. Bu bölümde düz yazılara nasıl canlılık getireceğimizi
göreceğiz.
İlk olarak önceki bölümlerden zaten bildiğiniz ya da işlevini tahmin ettiğiniz
temel işaretlere kısaca bir değinelim. Farkedeceğiniz gibi burada yeni olan
sadece <U>:
<B> Kalın Yazı
<B> ve </B> işaretleri arasındaki tüm metin kalın görüntülenir.
<I> İtalik Yazı
<I> ve </I> işaretleri arasındaki tüm metin italik (yatık) görüntülenir.
<U> Altı çizili Yazı
<U> ve </U> işaretleri arasındaki tüm metin altı çizili olarak görüntülenir.
3.2 <FONT FACE="..."> Font Değiştirme
<FONT> Font Ayarları
<FONT> işareti tek başına bir iş yapmaz. Arkasına doğru parametreleri vermemiz
gerekir:
<FONT FACE="..."> Font Değiştirme
Bu işaretle kullanılan fontu değiştirebiliriz. Örneğin fontu Arial yapmak için
<FONT FACE="Arial"> yazmak yeterlidir. Ancak font isimleri bazen oldukça uzun ve
karmaşık olabiliyor. Kullanmak istediğiniz fontun tam ismini öğrenmek için
kullandığınız tarayıcılardan yararlanabilirsiniz.
Eğer Netscape Navigator 4.x kullanıyorsanız Edit menüsünden Preferences'ı seçin
ve çıkan diyalog kutusunun sol tarafındaki panelde Fonts'un üstüne tıklayın.
Buradan kullanabileceğiniz fontların isimlerini görebileceğiniz gibi aynı
zamanda varsayım font ayarlamalarını da yapabilirsiniz. Eğer Internet Explorer
5.x kullanıyorsanız Tools menüsünden Internet Options'ı seçin ve çıkan diyalog
kutusundaki Fonts düğmesine tıklayın. Netscape Navigator'daki aynı ayarlamaları
burada da yapabilirsiniz.
Bir HTML dosyasında herhangi bir <FONT FACE="..."> işareti yer almıyorsa
tarayıcınız varsayım fontu kullanacaktır. Varsayım fontlar tarayıcıdan
tarayıcıya değişir ve biraz önce gördüğümüz gibi siz de bunları değiştirebilme
olanağına sahipsiniz. Bu yüzden eğer <FONT FACE="..."> işareti kullanmazsak Web
sayfalarımız değişik tarayıcılarda farklı gözükebilir.
Internet, pek çok değişik bilgisayar sisteminin bağlı olduğu muazzam büyüklükte
bir ağ olduğundan bağlı her bilgisayar üzerinde sizdeki fontların aynısının
olmasını bekleyemezsiniz. Örneğin bir Mac'te Windows'un standart fontu Arial'ı
bulmanız oldukça düşük bir olasılıktır. Hatta aynı işletim sistemini kullanan
bilgisayarlar bile font uyuşmazlığı sorununu sık sık yaşayabilirler. Örneğin
sistemimdeki fontlara göz gezdirdiğimde Stonehenge isminde antik yazı
karakterleri görüntülemekte kullanılan bir fontum olduğunu hatırladım. Doğrusunu
söylemek gerekirse bu fontun nereden geldiğini hatırlamıyorum. Internet
üzerindeki bir siteden çekmiş olabilirim, kullandığım yazılım paketlerinden biri
haberli veya habersiz sistemime kurmuş olabilir vs. Tahmin edeceğiniz üzere
Internet'te sörf yapanların büyük bir bölümünde bu fontun olma olasılığı oldukça
düşük. Bu yüzden olabildiğince yaygın kullanıma sahip fontlar kullanmaya gayret
edin. Yoksa sayfanızı ziyaret eden insanların tarayıcıları, kullandığınız
fontları kendi sistemlerinde bulamazlarsa varsayım font ayarlamalarını
kullanırlar ki bu da istenmeyen bazı sonuçlara yol açabilir.
Neyse ki font uyuşmazlığı problemlerine bir ara çözüm mevcut. Eğer <FONT
FACE="..."> işareti içinde adı geçen font sistemde mevcut değilse bunun yerine
başka fontların kullanılmasını sağlayabilirsiniz. Örneğin <FONT
FACE="Verdana,Arial,Helvetica"> işaretini gören bir tarayıcı eğer sistemde
Verdana mevcut değilse sırasıyla Arial ve Helvetica'yı deneyecektir. Eğer bu üç
font da sistem de yoksa yine varsayım font neyse ona kaldık ama bu fontlardan
birinin bulunma olasılığı oldukça yüksek; çünkü ilk iki font neredeyse tüm
Windows kurulu bilgisayarlarda bulunurken sonuncu font Helvetica ise Mac'lerin
çoğunda standart olarak kuruludur. Bu arada font isimlerini yanlış yazmamaya
dikkat edin; çünkü tahmin edeceğiniz gibi "font bulunamadı" türünden bir hata
İ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.
Bu bölümdeki konu başlıklarımız;
1. Ekranda Resim Görüntülemek
2. Resimleri Çerçeveyle Çevrelemek
3. Resimleri Sola veya Sağa Yaslamak
4. Resimlere Yorum Eklemek
5. Resimlerin Boyutlarını Belirlemek
6. Özet
Gelelim web dünyasının en önemli öğelerinden birine, resimlere. HTML dilinde her
şey çok kolay olduğu gibi sayfalara resim yerleştirmek de çok kolaydır. Resimler
sayfa içerisinde metne göre sağa, sola, aşağı ve yukarı doğru
yerleştirilebilirler, ayrıca boyutları sadece belirli değerler değiştirilerek
ayarlanabilir.
Dokümanın herhangi bir yerine bir resim yerleştirmek için en sade haliyle
<IMG SRC="RESIM.GIF"> tag'ını kullanabilirsiniz. Bu tag'ı kullandığınızda
resim hiç bir yere yaslanmayacak, boyutu ayarlanmayacak, metin olarak bir
alternatifi olmayacaktır.
Yukarda da belirttiğimiz gibi resimleri kullanırken bir çok seçeneğiniz var, bu
seçenekler sayfanın görünümünde kuşkusuz büyük rol oynayacaktır. Seçeneklerden
birincisi Internet erişiminin yavaş olduğunu bildiğimiz ülkemizde sayfalarınızı
görüntüleyecek olan kişilere biraz yardımcı olmak en azından resim yüklenene
kadar kullanıcının meraklarını gidermek için kullanılabilir, bahsettiğimiz takı
"ALT" tır. <IMG SRC="RESIM.GIF" ALT="deneme resmi"> satırını yazdığınızda web
tarayıcınız RESIM.GIF adlı resmi yüklenmeden önce resmin yerine "deneme resmi"
metnini girecektir, böylece kullanıcı resmi görmeden ne olduğunu bilecek ve
anında STOP tuşuna basabilecektir. (!)
Seçeneklerden biri de resmin ekranda görünecek boyutlarını ayarlamak için
kullanılır bu takı HEIGHT ve WIDTH'tir. Bu takılar bir arada kullanılmalıdır,
tek başına kullanıldığında web tarayıcısı takıyı göz ardı edecektir. <IMG
SRC="RESIM.GIF" WIDTH=100 HEIGHT=50> satırını yazdığınızda RESIM.GIF isimli
resmin boyutu ne olursa olsun 50 piksel yüksekliğe ve 100 piksel genişliğine
getirilerek ekranda gösterilecektir. Resim gösterirken işinize yarayacak diğer
bir seçenek ise BORDER'dır. Bu takı ileride değineceğimiz "Internet Kısayolları"
(Hyper Link) ile ilgili olsa da şimdi birkaç püf noktası vermek gerekir. Başka
bir URL'ye kısayol yaratıldığında kısayolun ismi bir alt çizgi ile belirlenir,
bu işlem resimlerde resmin mavi bir çerçeve içerisine alınmasıyla belirtilir,
Eğer bir resmi başka bir sayfaya kısayol olarak kullanacaksanız ve çerçevenin
görünmesini istemiyorsanız BORDER=0 ifadesini kullanmalısınız.
Resimleri kullanırken dikkat etmeniz gerekenler:
* Daha önce de belirttiğimiz gibi Internet'te uzun süredir yer alan
kullanıcılar, sitelerdeki büyük resimleri çok işlerine yaramadığı sürece görmek
istemeyeceklerdir. Bu yüzden, her zaman resimlerin boyutunu küçük, miktarını az
tutmalısınız.
* Eğer büyük resimler kullanacaksanız, (büyük resim derken ekranı kaplayacak
kadar büyük değil), bunları JPEG formatına çevirmenizi ve kalitesini düşürmenizi
tavsiye ederiz. JPEG resimler her zaman GIF'lerden daha az yer kaplarlar, bu
yüzden daha hızlı yüklenirler.
* Resimlere her zaman ALT tag'ını kullanarak alternatif metinler verin,
Internet'i kullananların her zaman resim görüntüleyebilecek, browser'ı olan
makineler olduğunu varsaymayın. Eğer resimlere alternatif metinler verirseniz
terminal ekranı kullanan kullanıcılarda bilgiye erişebilirler.
* GIF'leri kullanırken "Interlaced" haline getirin, bu tip GIF'ler kademe kademe
yüklenir ve yavaş yavaş netleşerek resmi daha hızlı yükleniyormuş gibi gösterir.
4.1 Ekranda Resim Görüntülemek
Şimdiye kadar hep ekrana nasıl yazı yazacağımızı gördük. Artık resim de
kullanmanın zamanı geldi.
Ekranda resim görüntülemek oldukça basit bir iş. Elinizdeki GIF, JPG veya PNG
formatındaki herhangi bir resim dosyasını <IMG SRC="dosyaismi.uzantısı"> ile
tarayıcınızda görüntüleyebilirsiniz. Hatta bu şekilde animasyon içeren GIF
dosyalarını da kullanabilirsiniz. Hemen bir örnekle neler yapabileceğimizi
görelim.
Not: PNG formatındaki dosyaları sadece en yeni web tarayıcıları
görüntüleyebilir.
ornek10.html
<HTML>
<HEAD>
<TITLE>İlk Resmimiz</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<CENTER>
<IMG SRC="zak.jpg">
<BR>
<FONT FACE="Arial" SIZE=2><B>İlk resmimiz</B></FONT>
</CENTER>
</BODY>
</HTML>
ornek10'daki bizim için tek yeni satır <IMG SRC="zak.jpg">. Bu işareti gören web
tarayıcısı ornek10.hml'in bulunduğu klasörün içinde zak.jpg dosyasını arayacak
ve bulursa görüntüleyecek.
Peki kullanmak istediğimiz resimler html dosyamızla aynı klasörde değilse?
Örneğin yandaki duruma bakalım. Resimleri görüntüleyecek dosyamızın web adlı
klasörde bulunduğunu varsayalım ve resimler klasöründeki "kapak1999_05.gif"
dosyasını göstermek istediğimizi düşünelim. Bu ne biçim isim derseniz, web
sitemizdeki ad.net'in Mayıs 1999 kapağının resmini içeren dosyanın ismi diyelim.
Bu resmi görüntülemek için
<IMG SRC="resimler/kapak1999_05.gif">
yazmamız yeterli. Fakettiğiniz gibi bir klasördeki dosyayı belirtmek için
klasörle dosya ismi arasına "/" işaretini koyuyoruz. Yalnız burada bu satırı
içeren HTML dosyanızın hangi klasörde bulunduğu çok önemli. Eğer HTML dosyamız,
resimler klasöründe olsaydı "resimler/" bölümünü çıkarmamız gerekirdi. Eğer HTML
dosyamız simgeler klasöründe olsaydı ve yine aynı resmi görüntülemek
isteseydik... Bu sefer
<IMG SRC="../kapak1999_05.gif">
yazmamız gerekecekti. Yanyana iki noktanın (..) anlamı bir üst klasör demek. Bu
durumda bir üst klasör resimler oluyor. Yine dosya ismiyle klasör ismi arasına
"/" işaretini koyuyoruz.
İki örnek daha...
Diyelim ki HTML dosyamız web klasöründe ve simgeler klasöründeki "yildiz.gif"
isimli gif dosyasını görüntülemek istiyoruz. O zaman
<IMG SRC="resimler/simgeler/yildiz.gif">
yazmamız gerekiyor. Bu yazım "resimler klasörünün içindeki simgeler klasöründe
bulunan yildiz.gif dosyasını görüntüle" ye karşılık geliyor.
Son olarak bir de iki klasör yukarıda bulunan bir dosyayı nasıl
görüntüleyebileceğimizi görelim. Örneğin HTML dosyamız simgeler klasöründe,
resim dosyamız logo.gif de web klasöründe olsun. Bu durumda
<IMG SRC="../../logo.gif">
yazmamız yeterli. İşin mantığı gördüğünüz gibi oldukça basit. Aynı mantığı 5.
bölümde bağlantılarda da kullanacağız.
4.2 Resimleri Çerçeveyle Çevrelemek
Bir resmin çevresine çerçeve kaplamak istiyorsanız BORDER=x parametresini
vermeniz yeterli.
Örneğin <IMG SRC="zak.jpg" BORDER=1>, bir önceki örnekteki resmin
çevresine varsayım metin rengiyle 1 piksel kalınlığında bir çerçeve çizer.
4.3 Resimleri Sola veya Sağa Yaslamak
Resimleri, yazılarına soluna veya sağına sırasıyla ALIGN="left" veya
ALIGN="right" parametreleriyle yaslayabiliriz.
<IMG SRC="resimler/logo.gif" WIDTH=200 HEIGHT=250 BORDER=1 ALIGN="right"
ALT="Fatih Üniversitesi Logo">
4.4 Resimlere Yorum Eklemek
Internet bağlantınızın hızı, ulaşmaya çalıştığınız web sayfasının üstünde
tutulduğu sunucunun (server) hızı, o anki Internet trafiği ve ilgili web
sayfasındaki resim sayısı ile boyutlarına bağlı olarak bir web sayfasının
tamamen yüklenmesi çok değişik süreler alabilir.
Çok fazla resim içeren bir sayfanın yüklenmesi genelde yavaş olur; ama az resim
(hatta sadece bir tane bile olabilir) içeren bir sayfayı yüklemek de resmin disk
üzerinde kapladığı alana bağlı olarak dakikalar alabilir. Örneğin web tasarımına
yeni başlayanların sık sık yaptığı bir hata sayfalarına koyacakları resimleri
çok büyük veya yeterince optimize etmeden kullanmaktır. İlerleyen bölümlerde
resim dosyalarını nasıl küçük boyutlara indirebileceğimizi göreceğiz. Ama önce
resimlere yorum ekleyerek nasıl potansiyel ziyaretçilerimizin çoğunu
kaçırmayacağımıza bakalım.
Çok miktarda resim ve az yazı içeren bir sayfa yüklenirken ekran uzun süre
bomboş kalabilir. Resimler yüklenirken en azından resimlerin ne resmi olduğunu
açıklayan kısa bir yorum kullanmak zaten çabucak sıkılma eğiliminde olan
ziyaretçilerinizin bir kısmının Back düğmesine basma eğilimlerini törpüler. Aynı
zamanda resimlerinize yorum eklemekle tarayıcılarındaki resimleri yükleme
seçeneğini kapatarak daha hızlı sörf yapmaya çalışan kullanıcıları da kaçırmamış
olursunuz.
Peki resimlere nasıl yorum ekliyoruz? Bu iş için ALT parametresini kullanmak
yeterli.
<IMG SRC="resimler/logo.gif" ALT=" Fatih Üniversitesi Logo ">
Bir web tarayıcısı yukarıdaki satırı gördüğünde resmi yüklemeye başlamasa bile
sizin yazdığınız yorumu görüntüler. Böylece ekranınız boş kalmayacağı gibi
yüklenecek resmin ne olduğu da belli olmuş olur.
4.5 Resimlerin Boyutlarını Belirlemek
Resimlerin boyutlarını belirlemek web tarayıcınıza bir resmin genişliğinin ve
yüksekliğinin ne kadar olduğunu söylemek anlamına geliyor. Örneğin
örneklerimizde sürekli kullandığımız ad.net mayıs kapağının genişliği 200,
yüksekliği de 250 piksel. Bu değerleri sırasıyla WIDTH ve HEIGHT
paremetreleriyle belirtebiliriz:
<IMG SRC="resimler/logo.gif" WIDTH=200 HEIGHT=250>
Peki bir resmin boyutlarını belirlemek ne işimize yarayacak. Normalde bunları
yazmadan da web tarayıcımız resmi sorunsuz olarak görüntülüyor. Yanıt olarak üç
kazancımız olacağından bahsedelim.
İlk olarak; bir resmin boyutlarını belirlediğimizde, web tarayıcısı resmi
yüklemeye başlamasa bile ekranda resmin boyutları kadar bir çerçeve çizerek
resmin ne kadar yer kaplayacağını gösterir.
İkinci olarak, 7. bölümde tabloları göreceğiz. Tablo yaparken resim boyutlarını
belirlemek tablolarımızın daha hızlı görüntülenmesi avantajını getirecek.
Üçüncü ve son olarak da, WIDTH ve HEIGHT parametrelerine resmin gerçek
boyutlarını vermeyip de daha büyük ve daha küçük değerler girersek verdiğimiz
değerlere göre resmimiz otomatikman ya büyütülür ya da küçültülür. Yalnız bu
durumda resimde bazı bozulmalar olacaktır. Tavsiyem çok zorda kalmadıkça
kullanacağınız resimlerin boyutlarını bu şekilde değiştirmeyin. Bunun yerine
ücretsiz olarak bulunabilen görüntü işlem programlarını veya Photoshop gibi
ticari programları kullanabilirsiniz.
Bu arada kullanacağımız bir resmin boyutlarını nasıl öğrenebiliriz diye
sorabilirsiniz. Eğer elinizde bu işi yapacak hiçbir program yoksa ve Netscape
Navigator kullanıyorsanız resminizi normal <IMG SRC=x> işaretini kullanarak
görüntüleyin ve resmin üstüne sağ fare tuşuyla tıklayarak View Image seçeneğini
seçin. Web tarayıcınızın başlık satırında dosya boyutlarını bu şekilde
görebilirsiniz. Yok eğer Internet Explorer kullanıyorsanız işiniz biraz daha
zor. Yine resmin üstüne sağ fare tuşuyla tıklayıp Copy'i seçin. Daha sonra da
Başlat menünüzün Donatılar bölümünde bulabileceğiniz MS Paint programını açıp
Edit menüsünden Paste komutunu seçerek resmi MS Paint'e transfer edin. Bu
programla resminizin boyutlarını öğrenebilirsiniz. Ancak benim kişisel önerim
Shareware.net'ten IrfanView adlı programı çekmeniz. Böylece web tasarımında
ihtiyaç duyacağınız grafik işlem gücünün büyük bir bölümünü ücretsiz olarak elde
edebileceğiniz gibi aynı zamanda resimlerinizin boyutlarını da rahatlıkla
öğrenebilirsiniz.
İpucu: Diğer HTML işaretlerinde olduğu gibi <IMG SRC="dosya ismi.uzantısı">
işaretinde de tüm parametreleri bir arada kullanabilirsiniz. Örneğin aşağıdaki
satıra bir bakın:
<IMG SRC="resimler/logo.gif" WIDTH=200 HEIGHT=250 BORDER=1 ALIGN="right"
ALT="Fatih Üniversitesi Logo">
4.6 Özet
* GIF, JPG veya PNG formatındaki resimleri web sayfalarımızda <IMG SRC="dosya
ismi.uzantısı"> işaretiyle görüntüleyebileceğimizi öğrendik.
* HTML dosyamızın bulunduğu klasörden farklı bir klasörde yer alan resimleri
nasıl görüntüleyebileceğimizi gördük.
* Resimlerin çevresine BORDER parametresiyle -istenilen kalınlıkta- varsayım
metin rengiyle çerçeve çizebileceğimizi gördük.
* Resimleri, yazılarına soluna veya sağına sırasıyla ALIGN="left" veya
ALIGN="right" parametreleriyle yaslayabileceğimizi öğrendik.
* Resimlere yorum eklemenin ALT parametresiyle yapılabileceğini ve bunun
avantajlarını gördük.
* Resimlerin boyutlarını belirlemenin avantajlarını öğrendik ve bir resmin
boyutlarını nasıl öğrenebileceğimizi gördük.
1. Giriş
2. Bağlantı Renklerini Belirlemek
3. Bağlantı Olarak Resim Kullanmak
4. Döküman içi Bağlantılar
5. Altı çizgisiz aktif bağlantılar
6. Özet
5.1 Bağlantılara Giriş
Web'in belki de en çekici tarafı bağlantılar (link) sayesinde bir sayfadan
ötekine geçişin çok kolay bir şekilde gerçekleştirilmesidir. Bağlantılar -başka
bir deyişle hipermetin- özelliği olmasaydı kuşkusuz hem web (örümcek ağı)
kelimesinin pek bir anlamı kalmazdı hem de Internet çok sıkıcı bir yer olurdu.
Sayfamızdan başka bir sayfaya bağlantı vermek istediğimizde <A HREF="">
işaretini kullanıyoruz. Hemen bir örnekle bunu görelim.
ornek12.html
<HTML>
<HEAD>
<TITLE>Bağlanıyoruz!</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<FONT FACE="Arial,Helvetica" SIZE=2>
Internet'in en popüler sitesi kuşkusuz <A HREF="http://www.yahoo.com">Yahoo</A>.
Milyonlarca siteye bağlantı içeren bu devasa sitenin yanında bu örnek sayfa
sadece iki bağlantı içeriyor; ama önemli olan bağlantı sayısının fazlalığı değil
kalitesi 8)
<P>
İşte ikinci bağlantımız geçen bölümdeki son örneğimize gidiyor:
<P>
<A HREF="ornek11.html">Tıklayın!</A>
</FONT>
</BODY>
</HTML>
Fark ettiğiniz gibi üstüne tıklayabileceğimiz yazılar <A HREF=""> ile </A>
arasında kalan bölüm. Örneğin Yahoo'nun üzerine tıkladığımızda Yahoo'nun web
sitesine gidebileceğiz -tabi <A HREF=""> içindeki adresi doğru yazdıysanız-. Bu
örnekte iki bağlantı bulunuyor; ama birinin başında http:// öneki var, diğerinde
yok.
http:// önekini bizim web sitemizin adresinden farklı bir adrese (örneğin
http://www.yahoo.com/) bağlantı verirken kullanıyoruz. Diyelim ki web
sayfalarımız http://www.abc.com/ adresinde bulunsun. Eğer http:// önekini
kullanmasaydık Yahoo'nun üstüne tıkladığınızda web tarayıcınız
http://www.abc.com/www.yahoo.com adresine gitmeye çalışacaktı ki tabi bu da bir
hatayla sonuçlanacaktı. Diğer bir deyişle http:// önekini kullanmadığımızda web
tarayıcısı bizim sitemizin içindeki bir HTML dosyasına erişmek istediğimizi
düşünür. İkinci bağlantımız da bu duruma örnek. "Tıklayın!" yazısının üstüne
tıkladığınızda http://www.abc.com/ornek11.html'e gidilecektir. Bu arada eğer
geçen bölümde web sayfalarımızda kullanmak istediğimiz resimlere, bulundukları
klasörlere göre, nasıl ulaşabileceğimizi anlatan yazıyı hatırlarsanız; aynı
şeylerin bağlantılar için de geçerli olduğunu farkedeceksinizdir. Eninde sonunda
html dosyaları da resim dosyaları gibi birer dosya ve bulundukları klasörlere
göre doğru olarak çağrılmaları gerekiyor.
Not: Kendi web sitemizdeki dosyalara bağlantı vermek için http:// önekini
kullanabilirsiniz (örneğin http://www.abc.com/ornek11.html); ama bunun iki büyük
dezavantajı var:
* Sabit diskinizdeki HTML dosyalarınızda bulunan bağlantıları denemek
istediğinizde Internet'e bağlanmanız gerekir (tabi önce bu dosyaları daha
deneyemeden web sunucunuza yüklemeniz de gerekecek).
* Web sitenizin adresi değişince tüm HTML dosyalarınızda bulunan bağlantıları
buna göre değiştirmeniz gerekir.
5.2 Bağlantı Renklerini Belirlemek
Üçüncü bölümde arkaplan ve metin renklerini <BODY> işaretinin içinde yeralan
BGCOLOR ve TEXT parametrelerine verilen değerlerle değiştirebileceğimizi
görmüştük. Bağlantıların renklerini değiştirmek için ise üç parametre
kullanabiliyoruz: LINK, VLINK ve ALINK. Eğer bu parametreleri kullanmazsanız web
tarayıcınız varsayım renkler kullanır. Tabi bu varsayım renkleri her zaman için
web tarayıcınızın ayarlar bölümünden değiştirebilirsiniz.
LINK parametresi ile belli bir süredir ya da hiç ziyaret etmediğiniz
bağlantıların renklerini belirleyebilirsiniz. Örneğin Netscape Navigator'ın 4.6
sürümü, son 9 gün içinde ziyaret etmediğiniz sayfalara giden bağlantıları
ziyaret edilmemiş olarak gösterir. LINK, pek çok web tarayıcısında varsayım
olarak saf mavi renge ayarlıdır.
VLINK parametresi ziyaret edilmiş bağlantıların rengidir ve genellikle LINK'e
göre daha koyu bir tona ayarlanır. VLINK pek çok web tarayıcısında varsayım
olarak koyu mavi renge ayarlıdır.
Bir bağlantıya tıkladığınızda bağlantının rengi kısa bir süre için değişir. Eğer
farenin düğmesini yeterince uzun basılı tutarsanız bu rengin ne olduğunu
görebilirsiniz. İşte ALINK ile bu rengin ne olacağını belirleyebiliyoruz. Pek
çok web tarayıcısında varsayım olarak kırmızı renge ayarlıdır.
Bu kadar teorik bilgiden sonra bir örnek iyi gider:
ornek13.html
<HTML>
<HEAD>
<TITLE>Bağlantılar ve Renkler</TITLE>
</HEAD>
<BODY BGCOLOR="#0000A0" TEXT="#FFFFFF" LINK="#FFFF00" VLINK="#808000"
ALINK="#FF0000">
<CENTER>
<FONT FACE="Arial,Helvetica" SIZE=3>
<B>Internet'teki en popüler arama motorlarından beş tanesi:</B>
<P>
<A HREF="http://www.altavista.com">Alta Vista</A>
<P>
<A HREF="http://www.excite.com">Excite</A>
<P>
<A HREF="http://www.lycos.com">Lycos</A>
<P>
<A HREF="http://www.webcrawler.com">WebCrawler</A>
<P>
<A HREF="http://www.hotbot.com">HotBot</A>
</FONT>
</CENTER>
</BODY>
</HTML>
örnek 13'ün sonucunda açık sarı renkte görüntülen bağlantılar (LINK) uzun zamandır ziyaret etmediğiniz -belki de hiç girmediğiniz- arama motorları. Eğer bu bağlantılar arasında koyu sarı renkli olan varsa bu yakınlarda onu kullanmış olmalısınız (VLINK). Bu bağlantılardan herhangi birinin üstüne tıklarsanız rengi kısa bir süre için kırmızı olur (ALINK).
5.3 Bağlantı Olarak Resim Kullanmak
Web'de mutlaka görmüşsünüzdür. Pekçok web sayfasında alt alta veya yanyana bazen
şık bazen de çirkin düğmeler sıralanır ve bunların herhangi birine bastığınızda
ilgili sayfaya gidersiniz. Bu düğmeler aslında birer resimden başka bir şey
değiller. İşte size bir örnek:
ornek14.html
<HTML>
<HEAD>
<TITLE>Resimler & Bağlantılar</TITLE>
</HEAD>
<BODY BGCOLOR="#0000A0" TEXT="#FFFFFF">
<CENTER>
<FONT FACE="Arial,Helvetica" SIZE=3>
<B>İşte tıklanacak bir düğme:</B>
<P>
<A HREF="http://www.fatih.edu.tr/onerin.html"><IMG SRC="onerin.gif" WIDTH=90
HEIGHT=30 ALT="Bu siteyi sevdiklerinize önerin" BORDER=0></A>
</FONT>
</CENTER>
</BODY>
</HTML>
örnek 14'ün örnek 12 ve 13'ten tek farkı <A HREF=""> ve </A> işaretleri arasında metin yerine resim göstermekte kullandığımız <IMG SRC=""> işaretinin bulunması. Böylece bir resmi bağlantı olarak kullanabiliyoruz. Yalnız <IMG SRC=""> işaretindeki BORDER=0 parametresine dikkat. Normalde BORDER parametresinin resimlerin çevresine önplan renginde bir çerçeve çizmekte kullanıldığını biliyoruz ve eğer bu parametreyi kullanmazsak çerçeve de çizilmiyordu; ama eğer bir resmi bağlantı olarak kullanacaksanız ve BORDER parametresini de kullanmazsanız web tarayıcınız resmin çevresine otomatik olarak bağlantı renginde bir çerçeve atar. Bu genelde istenen bir durum olmadığından BORDER=0 ile bu çerçeveyi yok edebilirsiniz.
5.4 Döküman içi Bağlantılar
Şimdiye kadar hep başka sayfalara bağlantılar verdik; ama aslında böyle bir zorunluluk yok. Bir HTML dökümanının değişik yerlerine tek tıklamayla ulaşmak için de bağlantılar yerleştirebilirsiniz. Böylece uzun bir dökümanı ayrı ayrı sayfalara bölmeye gerek kalmadan hemen hemen aynı işlevselliği elde edebiliriz. Örnek olarak ad.net'in Haziran ayı için seçtiği en iyi yerli web siteleri sayfasından (TM10) bir alıntı yaptım. Çok uzun olur diye sadece açılış bölümü ile üç numaralı sitenin yazıları var. Liste 15'te bu yazıların önemli kısmını da kestim; ama tüm HTML işaretlerini bıraktım. Liste 15'e yakından bakarsanız ilk üç sitenin bağlantılarının gösterdiği adresler pek alışık olduğumuz adres yapısına benzemiyor. Hepsinin başında diyez (#) işareti var. Bu bağlantıların biraz altında ise daha önce görmediğimiz bir işaret göreceksiniz:
<A NAME="muzik_kutusu">...</A>
Bu işaret ile dökümanın belli bir yerine isim vererek (bu durumda muzik_kutusu)
<A HREF="#muzik_kutusu"> ile dökümanın o yerine bağlantı verebilirsiniz. Böylece
Müzik Kutusu bağlantısına tıklandığında otomatikman o bölüme gidebilirsiniz.
Yalnız kullanacağınız isimler boşluk veya türkçe karakter içermemeli. Küçük
büyük harf ayrımına da dikkat edin. Gerçi çoğu web tarayıcısı bu ayrıma
aldırmıyor; ama tedbiri elden bırakmamakta yarar var.
Bu arada liste 15'in sonucunda gelen sayfanın altında yer alan "yukarı" isimli
bir bağlantı dikkatinizi çekecektir. Bu bağlantıya tıklarsanız bu listenin en
başında yer alan <A NAME="yukari"></A> işareti sayesinde dökümanın en başına
rahatlıkla ulaşabilirsiniz.
İpucu: Başka bir dökümanın içinde yer alan bir bölüme de bağlantı
verebilirsiniz. Örneğin <A HREF="ornek15.html#muzik_kutusu">
ornek15.html
<HTML>
<HEAD>
<TITLE>Döküman İçi Bağlantılar</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000"
ALINK="#0000FF">
<A NAME="yukari"></A>
<FONT FACE="Tahoma,Arial,Helvetica" SIZE=2>
Türkiye'nin yerli içerik sorunu yıllardır gündemde. Ama son birkaç yıldır hiç
azımsanamayacak bir yerli Web patlaması var...
<P>
<CENTER>
<B>İlk 3:</B><BR>
<A HREF="#teymur">Cengiz Teymur</A><BR>
<A HREF="#eskisehir_net">Eskişehir.net</A><BR>
<A HREF="#muzik_kutusu">Müzik Kutusu</A>
</CENTER>
<P>
<BR>
<BR>
<IMG SRC="muzik_kutusu.gif" BORDER=1 ALIGN="right">
<A NAME="muzik_kutusu"><B>Müzik Kutusu (www.muzikkutusu.com)</B></A>
<P>
Hepimizin görmekten bıktığı, asla güncellenmeyen, sadece MP3'lerle dolu müzik
sitelerine, bir müzik sitesinin nasıl olması gerektiğini gösteriyor...
<P>
<BR>
<BR>
<CENTER><A HREF="#yukari">Yukarı</A>
<P>
</BODY>
</HTML>
5.5 Alt çizgisiz ve aktif kısayollar:
Bu günlerde alt çizgisiz ve klasik mavi renge sahip olmayan Internet kısayolları
kullanmak çok moda oldu. Herkes gerekli olsun olmasın bu tip kısayolları
kullanıyor. Eğer siz de bu tip link'lerin sayfanızın genel görünümünü
güzelleştireceğine inanıyor ve bunları kullanmak istiyorsanız size bu işi nasıl
becerebileceğinizi anlatalım.
Alt çizgisiz bir kısayol oluşturmak için <A HREF… takısının içinde bir stil
tanımı kullanmanız yeterli. Bu stil takısını kullandığınızda hem kısayol alt
çizgisiz olacak hem de ziyaret edildikten sonra rengi değişecek.
<p>Alt çizgisiz kısayol:<br>
<A HREF="http:// www.fatih.edu.tr " STYLE="text-decoration: none"> Fatih
Üniversitesi </a><p>
Dilerseniz bir adım daha ileri giderek altı çizili olmasına rağmen üzerine
gidince rengi değişen bir link oluşturalım. Bunu yapmak için uzun kodlar
kullanmaya gerek yok sadece onmouseover özelliğini kullanmak yeterli.
<p>Aktif ve normal kısayol:<br>
<A HREF="http:// www.fatih.edu.tr" onmouseover="this.style.color='#CC0000'"
onmouseout="this.style.color='blue'"> Fatih Üniversitesi </a>
Şimdide hem altçizgisiz hem de üzerine gelince renklenen bir link kullanalım.
Tahmin edebileceğiniz gibi hem onmouseover hem de STYLE özelliklerini
kullanacağız.
<p>Aktif ve alt çizgisiz kısayol:<br>
<A HREF="http://www.fatih.edu.tr" STYLE="text-decoration: none"
onmouseover="this.style.color='#CC0000'" onmouseout="this.style.color='blue'">
Fatih Üniversitesi </a>
5.6 Özet:
* Bir web sayfasından diğer bir sayfaya bağlantı vermek için <A HREF="">
işaretini kullanmamız gerektiğini öğrendik. <A HREF=""> ile </A> işaretleri
arasında yer alan metnin üstüne tıklandığında ilgili sayfaya gidildiğini gördük.
* Eğer kendi web sitemiz dışında yer alan bir web sayfasına bağlantı vereceksek
http:// öneki kullanmamız gerektiğini gördük.
* Bağlantı renklerini değiştirmek için <BODY> işaretinin arkasına LINK, VLINK ve
ALINK parametrelerini vermemiz gerektiğini;
* LINK'in uzun zamandır ya da hiç ziyaret edilmemiş sayfalara giden
bağlantıların rengini,
* VLINK'in yakın zaman içinde ziyaret ettiğimiz sayfaları gösteren bağlantıların
rengini,
* ALINK'in bir bağlantıya tıklama sırasında bağlantının alacağı rengi
belirlemek için kullanıldığını gördük.
* Bağlantı olarak resimlerin de kullanılabileceğini, bunun için <A HREF=""> ve
</A> işaretleri arasında <IMG SRC=""> işaretinin gelmesi gerektiğini gördük.
Eğer <IMG SRC=""> işaretinin arkasına BORDER=0 parametresini eklemezsek
resmimizin çevresine otomatikman bağlantı renginde bir çerçeve çizileceğini
öğrendik.
* Bir dökümanın istediğimiz yerlerine <A NAME="isim"> işaretiyle isimler vererek
<A HREF="#isim"> işaretiyle bu yerlere bağlantı verebileceğimizi gördük.
1. Sırasız Listeler
2. İç içe Sırasız Listeler
3. Mermi Şeklini Değiştirmek
4. Sıralı Listeler
5. İç içe Sıralı Listeler
6. Tanımlı Listeler
7. Özet
6.1 Sırasız Listeler
Sıranın önemi olmadığı maddelerden oluşan listeler oluşturmak için her bir
maddenin önüne <LI> işaretini koyup bütün bu maddeleri <UL> ve </UL>
işaretleriyle çevreliyoruz. Örneğin Türkiye'de yayınlanan bilgisayar/internet
dergilerinin isimlerini sıralayalım. Rahat okunsun diye örnek 16'daki her bir
maddeyi üç karakter içeriden yazdım; ama siz nasıl isterseniz öyle
yazabilirsiniz.
ornek16.html
<HTML>
<HEAD>
<TITLE>Sırasız Listeler</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#0000FF">
<FONT FACE="Tahoma,Arial,Helvetica" SIZE=2>
Türkiye'de yayınlanan bilgisayar/internet dergilerinin web sayfaları:
<UL>
<LI><A HREF="http://www.adnet.com.tr">ad.net</A>
<LI><A HREF="http://www.chip.com.tr">Chip</A>
<LI><A HREF="http://www.pcmagazine.com.tr">PC Magazine</A>
<LI><A HREF="http://www.pcnet.com.tr">PCnet</A>
<LI><A HREF="http://www.pcworld.com.tr">PC World</A>
</UL>
</FONT>
</BODY>
</HTML>
<UL> işareti listemizin başladığını gösteriyor. <UL>'den önce yeni bir satıra geçmek için <P> veya <BR> işaretlerini kullanmanız gerekmiyor çünkü <UL> zaten otomatik olarak bir satır boşluk bırakarak, <LI> ile başlayan her satırın (maddenin) önüne bir mermi (bullet) koyarak -biraz içeriden- bu maddeleri listeliyor. Yalnız listeleyeceğiniz maddeler bitince liste bitirme işareti </UL>'yi kullanmayı unutmayın yoksa listenizden sonra gelen tüm metin ve resimler listenizle aynı hizadan başlar.
6.2 İç içe Sırasız Listeler
<UL> işaretini kapatmadan yeni bir <UL> işareti kullanırsanız iç içe sırasız
listeler oluşturabilirsiniz. Yalnız her bir alt liste bittikten sonra bu alt
listeyi </UL> ile kapatmayı unutmayın. Örnek olarak ad.net'in web sitesinde
neler varmış bir bakalım.
ornek17.html
<HTML>
<HEAD>
<TITLE>İç içe Sırasız Listeler</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000"
ALINK="#0000FF">
<FONT FACE="Tahoma,Arial,Helvetica" SIZE=2>
Türkiye'de yayınlanan bilgisayar/internet dergilerinin web sayfaları:
<UL>
<LI><A HREF="http://www.adnet.com.tr">ad.net</A>
<UL>
<LI>Köşe Yazıları
<LI>Sinema
<LI>TM 10
<LI>ad.network
<LI>Çözüm Hattı
<LI>Web Tasarımı
<LI>Resimler
<LI>Oyunlar
<LI>Shareware.net
</UL>
<LI><A HREF="http://www.chip.com.tr">Chip</A>
<LI><A HREF="http://www.pcmagazine.com.tr">PC Magazine</A>
<LI><A HREF="http://www.pcnet.com.tr">PCnet</A>
<LI><A HREF="http://www.pcworld.com.tr">PC World</A>
</UL>
</FONT>
</BODY>
</HTML>
6.3 Mermi Şeklini Değiştirmek
Önceki örneklerin sonuçlarına dikkatle baktıysanız her düzeyde farklı tür mermi
kullanıldığını ve bunların şeklinin standart olduğunu farketmişsinizdir. Örneğin
Netscape Navigator, ilk düzey için içi dolu daire, ikinci düzey için içi boş
daire, üçüncü düzey için de içi dolu kare kullanır ve bu böyle devam eder; ama
bunların sırasını değiştirmek elinizde. Tek yapmanız gereken <UL> işaretinin
arkasına TYPE parametresini eklemek. TYPE parametresinin alabileceği değerler
disc (içi dolu daire), circle (içi boş daire) ve square (içi dolu kare).
Bir önceki örneğimizin mermilerini biz belirleyelim bu sefer:
ornek18.html
<HTML>
<HEAD>
<TITLE>Değişik Mermili Sırasız Listeler</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#0000FF">
<FONT FACE="Tahoma,Arial,Helvetica" SIZE=2>
Türkiye'de yayınlanan bilgisayar/internet dergilerinin web sayfaları:
<UL TYPE="circle">
<LI><A HREF="http://www.memphisreal.cjb.net">Memphis</A>
<UL TYPE="square">
<LI>Güncel
<LI>Bilgisayar
<LI>Şiir
<LI>Sinema
<LI>Çözüm Hattı
<LI>Web Tasarımı
<LI>Resimler
<LI>Oyunlar
<LI>Shareware
</UL>
<LI><A HREF="http://www.chip.com.tr">Chip</A>
<LI><A HREF="http://www.pcmagazine.com.tr">PC Magazine</A>
<LI><A HREF="http://www.pcnet.com.tr">PCnet</A>
<LI><A HREF="http://www.pcworld.com.tr">PC World</A>
</UL>
</FONT>
</BODY>
</HTML>
6.4 Sıralı Listeler
Sıralı listelerin oluşturulması sırasız listelerinkiyle tamamen aynı şekilde
yapılıyor. Tek farklılık <UL> yerine <OL> işaretini kullanmamız. Hemen bir
örnekle görelim:
ornek19.html
<HTML>
<HEAD>
<TITLE>Sıralı Listeler</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000"
ALINK="#0000FF">
<FONT FACE="Tahoma,Arial,Helvetica" SIZE=2>
<FONT COLOR="#0000C0"><B>Şimdiye kadar gördüğümüz bölümler:</B></FONT>
<OL>
<LI>Web Tasarımına Giriş
<LI>Paragraf Düzenleme İşaretleri
<LI>Fontlar ve Renkler
<LI>Resimler
<LI>Bağlantılar
<LI>Listeler
</OL>
</FONT>
</BODY>
</HTML>
Sıralı listelerde bizim herhangi birşekilde numara yazmamız gerekmiyor. Numaralar otomatik olarak veriliyor. Böylece herhangi bir maddenin yerini değiştirdiğinizde bütün numaraları baştan yazmak zorunda kalmadığınız gibi tıpkı sırasız listelerde olduğu gibi bu listeler de otomatikman içeriden başlayarak gösteriliyor.
6.5 İç içe Sıralı Listeler
Tıpkı sırasız listelerde olduğu gibi <OL> işaretini kapatmadan yeni bir <OL>
işareti kullanırsanız iç içe sıralı listeler oluşturabilirsiniz. Yine her bir
alt liste bittikten sonra bu alt listeyi </OL> ile kapatmamız gerekiyor. Yalnız
sıralı alt listelerde numaralandırma web tarayıcısı tarafından varsayım olarak
hep aynı şekilde yapıldığından numaralandırma şeklini değiştirmek
isteyebilirsiniz. Bunun için <OL> işaretinin arkasına TYPE parametresini ekleyip
bu parametreye aşağıdaki değerlerden herhangi birini verebilirsiniz:
1 - Standart numaralandırma (1, 2, 3, 4, ...)
a - Küçük harf (a, b, c, d, ...)
A - Büyük harf (A, B, C, D, ...)
i - Küçük Roma rakamları (i, ii, iii, iv, ...)
I - Büyük Roma rakamları (I, II, III, IV, ...)
Örnek olarak 6. bölümde ne anlatılıyor bir bakalım.
ornek20.html
<HTML>
<HEAD>
<TITLE>İç içe Sıralı Listeler</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000"
ALINK="#0000FF">
<FONT FACE="Arial,Helvetica" SIZE=2>
<FONT COLOR="#0000C0"><B>Şimdiye kadar gördüğümüz bölümler:</B></FONT>
<OL>
<LI>Web Tasarımına Giriş
<LI>Paragraf Düzenleme İşaretleri
<LI>Fontlar ve Renkler
<LI>Resimler
<LI>Bağlantılar
<LI>Listeler
<OL TYPE="a">
<LI>Sırasız Listeler
<OL TYPE="i">
<LI>İç içe Sırasız Listeler
<LI>Mermi Şeklini Değiştirmek
</OL>
<LI>Sıralı Listeler
<OL TYPE="i">
<LI>İç içe Sıralı Listeler
</OL>
</OL>
</OL>
</FONT>
</BODY>
</HTML>
İpucu 1: <UL> ve <OL> işaretlerini iç içe kullanabilirsiniz.
İpucu 2: Eğer <UL> ve </UL> işaretleri arasında <LI> işaretini kullanmazsanız bu
iki işaret arasındaki tüm metin ve resimler bir miktar içeriden başlar. Daha
içeriden başlamak istiyorsanız içiçe birden çok <UL> işareti kullanabilirsiniz
6.6. Tanımlı Listeler
Genellikle birden fazla başlığı olan, her başlık altında kısa bir metin içeren
yazılar, tanımlı listeler ile oluşturulur. Tanımı yapılacak başlık, <dt> ile
belirtilir, <dd> ile başlık altına metin girilir. Tüm liste, <dl> ile </dl>
arasına alınır.
<DL>
<DT> Kişisel Kullanım
<DD> Linux evinde veya işinde UNIX işletim sistemi altında çalışmak
isteyenler için ideal bir platformdur.
<DT> İnternet Sunucusu
<DD> Linux doğrudan TCP/IP desteği ile gelmektedir.
</DL>
Ekrandaki çıktı şu şekilde görünür:
Kişisel Kullanım
Linux evinde veya işinde UNIX işletim sistemi altında çalışmak isteyenler için
ideal bir platformdur.
İnternet Sunucusu
Linux doğrudan TCP/IP desteği ile gelmektedir.
6.7 Listeler Bölüm Özeti
* Sıranın önemli olmadığı listeler oluşturmak için <UL> işaretinin
kullanıldığını, listedeki her bir maddenin başına ise <LI> işaretinin
getirildiğini öğrendik.
* İç içe sırasız listeler oluşturmak için bir üst düzeydeki <UL> işaretini
kapatmadan yeni bir <UL> işaretinin kullanıldığını gördük.
* Sırasız listelerdeki mermi şeklini değiştirmek için <UL> işaretinin arkasına
TYPE parametresini eklemiz gerektiğini gördük. Bu parametrenin alabileceği
değerlerin disc, circle ve square olduğunu öğrendik.
* Sıralı listelerin sırasız listelerle aynı mantıkla çalıştığını, tek farkın <UL>
yerine <OL> kullanmak olduğunu gördük.
* Sıralı listelerde iç içe listeler oluşturmanın sırasız listelerle olduğu gibi
yapıldığını ancak numaralandırma şeklini TYPE parametresiyle belirlememizin iyi
olacağını öğrendik.
<table>...</table>
Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece şu ana kadar öğrendiklerinizle yapamayacağınız gerçek düzenlemeyi yapabilirsiniz. Elbette HTML dizayn konusunda bir masaüstü yayıncılık programının gösterdiği hassasiyeti göstermez, bir de browserların tablo etiketlerini yorumlamada gösterdiği farklılıklar da buna eklenirse, genel ziyaretçi kesimine hitab etmenin ne kadar zor olduğu anlaşılır. Fakat burada konumuz bunu tartışmak değil tablolar konusunu işlemek.
İşte tablolar,
|
Sonbahar |
Kış |
İlkbahar |
Yaz |
|
Eylül |
Aralık |
Mart |
Haziran |
|
Ekim |
Ocak |
Nisan |
Temmuz |
|
Kasım |
Şubat |
Mayıs |
Ağustos |
Tabloyu renklendirelim
|
Sonbahar |
Kış |
İlkbahar |
Yaz |
|
Eylül |
Aralık |
Mart |
Haziran |
|
Ekim |
Ocak |
Nisan |
Temmuz |
|
Kasım |
Şubat |
Mayıs |
Ağustos |
Başka bir örnek (farklara dikkat ediniz)
|
|
ÖLÇÜLER |
||
|
|
Boy |
Kilo |
|
|
1. |
Zafer |
1.77 |
80 |
|
2. |
Mustafa |
1.82 |
75 |
|
3. |
Osman |
1.75 |
83 |
|
|
|
||
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Bu örneklerde de görüldüğü gibi tablolar satır ve sütunlardan oluşur. Tabloya genel bir başlık atayabiliriz. Her sütun için de kendi başlığını oluşturmak mümkündür. Üstteki tablo başlığının altında veya tablonun sona erdiği satırdan sonraki satıra açıklama (thead/caption) koyabiliriz. Ayrıca tablo hücrelerini yanındaki veya altındaki hücrelerle birleştirebiliriz:
|
Tablo Başlığı (thead) Sütun Başlığı |
Sütun Başlığı |
Sütun Başlığı |
Sütun Başlığı |
|
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.
|
<table
border="1"> |
||||
|
<table
border="1"> |
||||
|
<table
border="1"> |
||||
|
<table
border="1"> |
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;
|
|
<![endif]>
|
||||
|
<table
border="1"> |
|
||||
|
|
|
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.
|
<table
border="0"> |
|
|
<table
border="2"> |
|
|
<table
border="4"> |
|
|
<table border="6"> |
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.
|
<table border="1" cellpadding="0"> |
|
|
<table border="1" cellpadding="5"> |
|
|
<table border="1" cellpadding="10"> |
cellspacing parametresi hücreler arası marjı belirler.
|
<table border="1" cellspacing="1"> |
||
|
<table border="1" cellspacing="5"> |
||
|
<table border="1" cellspacing="10"> |
align parametresi tabloyu düşey hizalamada kullanılır, align=left sola, align=right sağa dayalı yapar, align=center ortalar
|
<table border="1" align="left"> |
||
|
<table border="1" align="center"> |
||
|
<table border="1" align="right"> |
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.
|