HTML 1

1.
HTML Hakknda
2. lk HTML dkmannz yazmak
3. HTML dkmannz dzenlemek
4. Balklar (headings)
5. Paragraflara ayrmak
6. Dkmana stil kazandrmak
7. Listeler (lists)
8. Grafikler ve dosya biimleri
a. Resim kullanm
9. Balantlar kullanmak
a. Yerel dosyalara linkler
b. URLler
c. nternet e linkler oluturmak
d. Bir sayfann blmlerine linkler eklemek
e. Hipergrafik linkleri
10. Text biimi (<pre> belirteci)
11. zel karakterler
12. Aklama listeleri
13. Adres Satrlar ve e-mail linkleri
14. Blockquote belirteci
15. Renk kullanm
16. Text dzenlemeleri
17. <hr> belirteci
18. Text ve grafik konumunu ayarlamak
19. Tablo kullanm
1. HTML Hakknda
HTML, ya da HyperText Markup Language, bir web browsern multimedya
dkmanlarn gsterme yoludur. Dkmanlar aslen ASCII text formatnda baz zel tagler
(belirte) ieren, browserlarn anlayabilecei kodu ierir.
Webdeki ncelikli ama, herkesin yaynclk yapmasn salayacak standart ve

gelitirilmesi basit bir sistem kurmakt. HTMLin zellikleri ilk gnlerinden bu yana olduka
uzun bir yol ald. Bugn, HTML iin ayr standart tanmlanmtr. Bunlar:
HTML 1.0
HTML 2.0
HTML 3.0
Bugn artk genel olarak HTML 2.0 ve HTML 3.0 kullanlmaktadr. HTML 3.0
da eklenen zellikler ise unlardr:
Sayfa dzeni zerinde ileri derecede kontrol
Manetler
Grntlerdeki popler noktalarn istemci tarafndan ilenmesi
zelletirilmi listeler
Matematik denklemler
Stil yapraklar
Form ii tablolar
HTML dkmanmzda hangi standartlar kulanacamz dkmanmzn banda
belirtmemiz gerekir (bir sonraki dersimizde bunu greceiz). Bu sayede, dkman
grntleyen bilgisayar neye gre ilemler yapacan bilir.
2. lk HTML Dkmannz Yazmak

HTML belirteleri nedir?
Bir web browser bir sayfay grntledii zaman, ncelikle normal bir text dosyasndan sayfa
hakknda bilgileri okur ve < ve > iaretlerinin (tag/belirte) kullanld zel kodlara bakar.
Bir HTML belirteci iin genel format yledir:
<belirte_ismi>yazlacak text</belirte_ismi>
rnek olarak, bu ksmdaki bal sayfanzda karmak iin:
<h4>HTML belirteleri nedir?</h4>

Bu belirte, web browserna HTML belirteleri nedir? textini 4lk balk eklinde (bunun
hakknda geni bilgi ileride verilecek) gstermesini syler. HTML belirteleri, bir browsera
texti koyulatrmasn, italik yapmasn, balk olarak gstermesini ya da bir link olarak
gstermesini syleyebilir. Not edilmesi gereken nokta, biti belirtecinin,
</belirte_ismi>
eklinde, bir bl / iareti ile balamasdr. Bu bl iareti, browsera o anki komutun texte
uygulanmasnn bitirilmesini syler. Eer bl iaretini unutursanz, browser son texti izleyen
texte de ayn komutu uygulamaya devam eder; bu da istenmeyen sonular dourur.
NOT: Bir web browser, byk ya da kk harf arasnda ayrm yapmaz.
Mesela, <h3></h3> ile <H3></H3> arasnda bir fark yoktur.
HTMLin, bilgisayar programlarndan bir fark da, dkmanda bir hata yaparsanz browser
ya da bilgisayarnz kilitlenmez, sadece grntlenen dkman yanl grntlenir; bu
durumda dkman ap yanll dzeltirsiniz.
Browsernzn kk bir szl vardr, ve HTMLin ilgin bir yan da bu szlkte
bulamad komutlar sadece gzard etmesidir. Mesela:
<ahmet><h4>HTML belirteleri nedir?</h4></ahmet>

gene ayn bal verir (<ahmet> diye bir komut henz hi bir browser tarafndan
desteklenmiyor!); yani browser <ahmet> komutunu gzard eder.
HTML Dkmannz Oluturmak
Bir HTML dkman iki ayr paradan oluur, head ve body (ba ve vcut). Head ksm,
dkman hakknda ekranda grnmeyen bilgileri tar. Body ise geri kalan tm bilgileri
ierir.
Tm HTML sayfalarnn temel grnts yledir:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 3.2//EN>
<html>
<head>
<!-- bu dkman hakknda ek bilgilerin bulunduu balk ksm , ekranda grnmez ->
</head>
<body>
<!-- grntlenen tm HTML -- >

:
</body>
</html>
lk satr:
teknik olarak gerekli deildir, fakat browsera o anki sayfann hangi HTML standardna gre
yazldn gsterir.
Tm HTML almanz <html></html> belirtelerinin iine yerletirin. Web sayfalarnz
bu belirteler olmadan da bir ok bilgisayarda alabilir, fakat bunlar kullanarak sayfanzn
Uluslararas standartlara tamamen uygun hale gelmesini, ve bu standartlar kullanan her
makinada almasn garanti altna alm olursunuz.
Ayrca dikkat ederseniz <!-- -- > arasnda yer alan satrlar web sayfanzda grnmez,
buraya sayfa hakknda size ya da onu inceleyen bakasna yararl olabilecek bilgileri
yazarsnz. Web sayfalarnz daha kark hale geldiinde (tablolar ve erevelerle alrken
bolca banza gelecek) bu komutlar eski bir sayfanz kontrol ya da update ederken olduka
iinize yarayacak.
te ilk HTML dosyanz oluturmak iin yapmanz gerekenler:
1. nce text editrnz an (bunun iin notepadi kullanmanz neririm).
2. Text editr ekranna gidin.
3. Aadaki texti girin:
<html>
<head>
<title>Volkanlar Sayfas</title>
</head>
<!-- HTML ders notlar iin yaplmtr, Ahmet Mnir Pirolu,
3 Eyll, 2000 -- >
<body>
Bu derste interneti volkanlar hakknda bilgi toplamak iin kullanacak ve
bulgularnzdan bir rapor hazrlayacaksnz.
</body>
</html>
NOT:
<title></title>
belirtecinin
bulunduu
yere
dikkat
edin.
<head></head> belirtecinin iinde bulunuyor ve ekranda grnmyor.

<title></title> belirteci, dkmanlar tanmlamaya yarar ve browsernzn
balk blmndeki yazy belirlemeye yarar.
4. Dkman volkanlar.html isminde kaydedin ve bunun iin ayr bir dizin
yaratmay unutmayn.
NOT: Windows 3.1 kullanclar dosya isminin uzantsn .htm yapmak

zorundadr. Browserlar .html ya da .htm dosyalarn ayn kabul ederek aarlar.
Dkmannz bir web browserda grntlemek

1. Web browsernz an.
2. File mensnden Open File komutunu sein.
3. yunuslar.html dosyanz bulun ve an.
4. imdi browsern balk ksmnda Volkanlar Sayfas yazsn ve aada web
sayfasnda da <body> belirtecinin iine yazdnz yazy gryor olmalsnz.
Sayfanz u an aadaki gibi grnyor olmal:
Bu derste interneti volkanlar hakknda bilgi toplamak iin kullanacak ve bulgularnzdan bir
rapor hazrlayacaksnz.
3. HTML Dkmannz Dzenlemek

lk HTML dkmannz yaptnza gre imdi bir dkman zerinde nasl deiiklikler
yapacanz ve nasl yenileyeceinizi greceksiniz. imdi,
1. Eer deilse browsernzda dkmannz tekrar an.
2. Text editrnz tekrar an (mesela notepad).
3. Text editrnde volkanlar.html dosyasn an.
HTML Dkmannzda Deiiklikler Yapmak

1. Text editr ekranna gidin.
2. Daha nce yazdnz textin altnda bir ka kere ENTER a basn ve aadaki texti
yazn:
Volkan, bir gezegenden erimi kaya

veya mamann yzeye kt noktadr.
Bu k, byk bir patlama ile olabilecei
gibi sessiz ve yava bir ekilde de olabilir.
Dikkat etmeniz gereken nokta, bu text </body> ve </html> belirtelerinin stnde ve

HTML dosyanzn en alt ksmnda olmaldr.
3. File mensnden Save komutunu sein.
Web Browsernzda Dkman Tekrar Yklemek

Dosyanzn bir nceki halinin grntlendii browsera dnn. u an son yazdnz textin
ekranda grnmediine dikkat edin. Deiiklikleri grmek iin Reload tuunu kullann. Bu
komut, browsernza o anki dkman tekrar yklemesini belirtir. Artk yaptnz
deiiklikler ekranda grnyor olmal. Dikkat ederseniz yaz ekranda yazdnz ekilde
grnmez. Browser, normal olarak yazdnz texti tm ekrana yayacak ekilde grntler.
lerleyen derslerde sayfanz istediiniz ekilde dzenlemeyi reneceksiniz.
4. Balklar
Balklar, HTML dilinde bala yazmak istediiniz yazy balk belirteleri arasna
yerletirilerek oluturulur. HTML formatnda balk belirteci u ekildedir:
<hN>Balkta grnecek yaz</hN>
N, 1den 6ya kadar balk boyutlarn belirten bi rakamdr. Deiik boyutlara gre baz
balk rnekleri:
1. Dzey Balk
2. Dzey Balk
3. Dzey Balk
4. Dzey Balk
5. Dzey Balk
6. Dzey Balk
HTML Balklarn Dkmannza Yerletirmek

1. Text editrn tekrar an.
2. volkanlar.html dosyasn an.
3. ncelikle en byk bal yapmak iin <h1> belirtecini kullanacaz. Aadaki
yazy u anki textin zerine ve </head><body> belirtelerinden sonra yerletirin:
<h1>Volkanlar Sayfas</h1>
4. Bunun altna da ileride kullanacamz balklar yazn. (Baz balklarn h3,
bazlarnn h2 ile yazldna dikkat edin, ayn nem derecesine sahip balklar
ayn boyutta kullanrsanz daha dzenli bir sayfanz olur.)
<h2>Giri</h2>
<h2>Volkan Terminolojisi</h2>
<h3>St Helen Da</h3>
<h3>Long Valley</h3>
<h2>Marsta Volkan Blgeleri</h2>
<h3>Aratrma Projesi</h3>
<h3>Referanslar</h3>
5. Text editrnde deiiklikleri kaydedin.

6. Browsernza geri dnn, dkman Reload edin.
Browsernzda sonu yle grnmelidir:
Volkanlar Sayfas
rapor hazrlayacaksnz. Volkan, bir gezegenden erimi kaya veya mamann yzeye kt
noktadr. Bu k, byk bir patlama ile olabilecei gibi sessiz ve yava bir ekilde de
olabilir.
Giri
Volkan Terminolojisi
St Helen Da
Long Valley
Marsta Volkan Blgeleri

Aratrma Projesi
Referanslar
5. Paragraflara Ayrmak
Daha nce browsernzn textinizi yazarken kullandnz ENTERlar gzard ettiini grdk
(browser tm yazy boluklar dolduracak ekilde datyordu). Fakat browser, bir paragraf
belirteci grd anda yazya bir boluk koyar ve yeni bir paragrafa balar. Bir paragraf
balatmak iin yazlmas gereken kod:
<p>
Not edilmesi gereken nokta bu belirtecin bir biti belirtecine ihtiyac yoktur. (Yani </p>
belirtecini kullanmanza genel olarak gerek yok).
Ayrca balk belirtelerinde <p> belirteci hazr olarak vardr, yani <hN> ile <p> belirtecini
birlikte kullanmanza gerek olmaz. (<h> belirteci kullanldnda browser otomatik olarak
baln bana ve sonuna bir satr boluk brakr.)
Paragraf Belirtecini kullanmak

HTML dkmannza paragraf belirteci koymak iin aada anlatlanlar uygulayn.
1. Dkmannz notepadde tekrar an (eer ak deilse).
2. ncelikle (Volkan, bir gezegenden) cmlesiyle balayan blm yeni bir
paragraf yapalm ve ardndan yeni bir paragraf ekleyelim. imdi yazmz yaklak
olarak yle grnmelidir:
Bu derste interneti volkanlar hakkinda bilgi
iin
kullanacak
ve
bulgularinizdan
hazirlayacaksiniz.
<h2>Giri</h2>
toplamak
bir
rapor

gibi sessiz ve yava bir ekilde de olabilir.
<p>
Volkanlar,
insanlardan
almlardr.
nsanlarn
ok
nce
birka
dnya
milyon
tarihinde
yllk
yer
tarihini,
drt milyar yl ile karlatrn.

3. Dkman kaydedin.
4. Browsernza dnn ve sayfay Reload edin.
Yazy blmenin baka yollar

Dkmannz blmlere ayrmak iin hard rule/ hr belirtecini kullanabilirsiniz. Bu
belirte dkmana aadaki gibi bir izgi ekler:
imdi bunu deneyelim. Volkanlar dkmannda ilk paragraftan sonra bir <hr> belirteci
kullann. Dkmann ilgili paras:
<h1>Volkanlar Sayfas</h1>
Bu
derste
iin
interneti
kullanacak
volkanlar
ve
hakknda
bilgi
bulgularnzdan
toplamak
bir
rapor
hazrlayacaksnz.
<hr>
<h2>Giri</h2>
gibi sessiz ve yava bir ekilde de olabilir
<p>
Volkanlar,
almlardr.
insanlardan
nsanlarn
ok
nce
birka
dnya
milyon
drt milyar yl ile karlatrn.
tarihinde
yllk
yer
tarihini,
eklinde grnmelidir.
Son olarak da textin istediiniz yerinden dier satra gemesini salayan bir belirte: <br>.
Bu belirteci bir liste yaparken, bir iirin msralarn yazarken, vb. yerlerde kullanabilirsiniz.
zleyen iki rnekte <br> ve <p> belirteleri arasndaki farklar inceleyin:
Sadece Paragraf Belirteci
HTML
Tm kontrol bilgisayara
Sonu
Tm kontrol bilgisayara brakmaktansa
onu
brakmaktansa onu istediiniz
istediiniz gibi ynlendirmeniz daha iyidir.
ekilde ynlendirmeniz daha

iyidir.
Devam ediyor
<p>
Devam ediyor
<p>
Grdnz gibi belirteler bu i iin
Grdnz gibi belirteler
var!
bu i iin var!
Paragraf <p> ve <br> belirteci

HTML
Sonu
Tm kontrol bilgisayara<br>
Tm kontrol bilgisayara
brakmaktansa onu istediiniz<br>
brakmaktansa istediiniz
ekilde ynlendirmeniz daha
ekilde ynlendirmeniz daha iyidir.
iyidir.
<p>
Devam ediyor
Devam ediyor
Grdnz gibi belirteler
<br>
bu i iin var!
Grdnz gibi belirteler<br>

bu i iin var!
6. Dkmana Stil Kazandrmak

HTML, textinize stil kazandrmak iin size bir ok belirte sunar. Bunlardan bazlar:
Stil Belirteleri
HTML
Sonu
<b>Bu yaz koyu</b>
Bu yaz koyu
<i>Bu yaz italik</i>
Bu yaz italik
<tt>Bu yaz typewriter</tt>
Bu yaz typewriter
Bu belirteleri iie kullanabileceinize dikkat edin. Fakat belirteleri doru sralamaya

dikkat etmeniz gerekiyor, mesela ilk atnz belirteci son olarak kapatmanz gerekir.
<i><b>Bu yaz koyu
Bu yaz koyu ve italik
ve italik</b></i>
<b><i>Bu yaz da</i></b>
Bu yaz da
Ayrca, bu belirteleri balk textinize de uygulayabilirsiniz.
<h2><i>Yeni</i> ve
<tt>Gelimi!</tt></h2>
Yeni ve Gelimi
HTML Dkmannza Eklemeler

1. Dkmannz tekrar an (eer deilse).
2. Text editrnze dnn (volkanlar.html dosyasna).
3. Giri blmndeki ilk kelime olan Volkan kelimesinde bir deiiklik yapacaz.
4. Bu kelimeye u belirteci ekleyin:
<b>Volkan </b>
5. imdi de ikinci cmledeki milyar kelimesinin nemini artrmak
iin bu
kelimeyi koyu ve italik yapacaz. Deiiklikten sonra paragraf yle gzkmeli:

<p>
Volkanlar, insanlardan ok nce dnya tarihinde yer
almlardr.
tarihini,
nsanlarn
drt
birka
milyon
<b><i>milyar</i></b>
yllk
yl
ile
karlatrn.
6. Son olarak, zel bir kelimeyi belirtmek iin typewriter belirtecini kullanacaz
Volkan Terminolojisi bal altnda u texti girin:
Volkan aratrmalar, ya da <tt>Volkanoloji</tt>,
birok garip terim ierir.
7. almanz kaydedin ve browserda tekrar ykleyin (Reload).
7. Listeler (lists)
Bir ok web sayfas listelenmi bilgi gsterir. HTMLde bu listeleri oluturmak kolaydr,
hatta bu listeler liste iinde liste oluturabilirler (mesela bir outline oluturmak iin). Listeler
ayrca bir iindekiler blm hazrlarken ya da bir seri bilginin blmlerini gstermek iin
uygundur.
Srasz (unordered) listeler
Srasz listeler ya da ul belirteci, browserda, banda noktalarla belirtilen satrlar oluturur.

Noktalarn ekli, kullanlan browsera ve yaplan ayarlarna gre deiir (tanmlanan font da
etkilidir; mesela Macintoshta bu noktalar option-8 karakter denen bir karakterle, Times
fontunda bu kk bi kare, Genova fontunda ise byke bir nokta).
Srasz listeye bir rnek:
birinci para
ikinci para
n para
Bu listeyi yapmak iin HTML kodu:

<B>Srasz listeye bir rnek:</B>
<ul>
<li>
birinci para
<li>
ikinci para
<li>
nc para
</ul>
<ul> belirteci listenin balang ve bitiini belirtir.
Sral Listeler
Sral listeler browsern her paraya bir numara atad listelerdir (1., 2. gibi). Srasz listeden
tek fark <ul> belirtelerini <ol> haline deitirmektir. Bir nceki rnei kullanrsak:
Sral listeye bir rnek:
1. Birinci para
2. kinci para
3. nc para
Bu listeyi oluturmak iin HTML kodu:

<B>Sral listeye bir rnek:</B>
<ol>
<li>
Birinci para
<li>
ikinci para
<li>
nc para
</ul>
ie Listeler
Sral ve srasz listeler deiik derecelerde kullanlabilir, her biri browser tarafndan gerektii
gibi ilenecektir. Fakat nem vermeniz gereken nokta her listenin doru bir biti belirteci
olmas ve iie sralannda bir hata olmamasdr.
Tm bu <ol> <li> </ul> <li> belirteleri ile iler biraz karyor gibi grnmeye balayabilir,
fakat ncelikle aklnzda tutmanz gereken listelerin temel grndr.
<ul>
<ol>
<li>
<li>
<li>
<li>
</ul>
</ol>
Baka listelerin iinde kullanlm bir srasz liste:

ie Srasz Liste
Bu birinci para
Bu ikinci para
Bu ikinci parann ilk alt paras
Bu da bir alt parann alt paras
Bu, alt parann ikinci alt paras
Bu, ikinci parann ikinci alt paras
Bu, ikinci parann nc alt paras
Bu nc para
Liste iaretlerinin her derecede deitiine dikkat edin.

Bu format oluturmak iin HTML kodu:
<B>ie Srasz Liste</B>
<ul>
<li>Bu birinci para
<li>Bu ikinci para
<ul>
<li>Bu ikinci parann ilk alt paras
<ul>
<li>Bu da bir alt parann alt paras
<li>Bu, alt parann ikinci alt paras
</ul>
<li>Bu, ikinci parann ikinci alt paras
<li>Bu, ikinci parann nc alt paras
</ul>
<li>Bu nc para
</ul>
ie Listeler Hepsini Kullanmak

Sral listelerde sadece sral listeleri kullanmanz gerekmez, liste eitlerini birlikte iie
kullanabilirsiniz.
Mesela, bu rnekteki sral listenin iinde bir srasz liste kullanlyor:
ie srasz liste
1. Bu birinci para
2. Bu ikinci para
Bu ikinci paranin birinci alt paras
1. Bu da bir alt parann numaral alt paras
2. Bu da bir alt parann numaral baka alt paras
Bu ikinci parann ikinci alt paras
Bu ikinci parann nc alt paras
3. Bu nc para
Bu ktnn salanmas iin gerekli HTML kodu:
<B>ie srasz liste</B>
<ol>
<li>Bu birinci para
<li>Bu ikinci para
<ul>
<li>Bu ikinci paranin birinci alt paras
<ol>
<li> Bu da bir alt parann numaral alt paras
<li>Bu da bir alt parann numaral baka alt paras
</ol>
<li>Bu ikinci parann ikinci alt paras
<li>Bu ikinci parann nc alt paras
</ul>
<li>Bu nc para
</ol>
HTML Dkmannza Listeler Yerletirmek

imdi, liste belirtelerini kullanarak Volkanlar Sayfasna sral ve srasz listeler
koyacaksnz.
1. Ak deilse almanz an.
2. HTML dkmannz text editrnde an.
3. Volkan terminolojisi bal altnda teknik kelime rnekleri gstermek iin srasz
liste belirtelerini kullanacaz. Dkmannzda bu blme gidin.
4. nce aadaki cmleyi yerletirin.
Ne kadarn biliyorsunuz?
5. imdi listeyi oluturmak iin HTML formatn kullanacaz:
<ul>
<li>kaldera
<li>vesikularite
<li>pahoehoe
<li>reoloji
<li>lahar
</ul>
6. imdi, gerekli ksmlarn yazlmas iin sral liste kullanacaz. Aratrma Projesi
ksm altnda aadaki yazy girin:
Greviniz, yukardaki listenin dnda son yz yl
iinde faaliyete gemi bir volkan hakknda bilgi
toplayp rapor etmek. Raporunuzda unlar olmal:
<ol>
<li>Volkann eiti
<li>Jeografik konumu
<li>En
yakn
ehrin
ismi,
poplasyonu,
ve
volkana uzakl
<li>En son faaliyeti ve verdii hasar.
<li>Faaliyetle birlikte grlen olaylar (toprak
kaymalar, depremler, vs.)
</ol>
<p>
Sonra, bu volkann yol at genel hasarlar zerine

bir
gzlem
ve
bunlarn
azaltlmas
iin
neler
gerektii konusunda bir paragraf yazn.

7. HTML dosyanz kaydedin ve browsernzda tekrar ykleyin.
8. Grafikler ve Dosya Biimleri

nternet zerinden sadece text gndermek klasik e-maildan farkl deildir. Grafikleri
kullanmaya baladnzda mesajlarnz ok daha arpc hale gelir.
Webin Grafik Biimleri

Bilgisayar grafikleri iin bir ok grafik biimi vardr. PICT. GIF. TIFF. EPS. BMP. JPEG
Bir browsern grafikleri gsterme yolu, HTML formatnda grafik dosyasnn yerini ve ismini
belirtmektir. Bu format birok browsern tanyabilecei bir format olmaldr.
Teknik olarak sylemek gerekirse, resim formatnz platform bamsz olmaldr. HTMLin
kendisi platform bamszdr, sonuta text karakterleri tm bilgisayarlar tarafndan
anlalabilir.
Bir web sayfasnda grntlenebilen standart format GIF ya da Graphics Interchange
Formatdr. GIF, resim boyutunu sktrr (dolaysyla boyutlarn kltr) ve sonucu
internette gnderilebilecek ikilik (binary) sisteme evirir. GIF sktrmas, grafik byk
boyutlarda tek renk olursa ok etkilidir; ve bir renk yatayda srekli olursa sktrma ok daha
iyidir.
Web de kullanlan dier dosya format JPEGdir (ismini bu format dizayn eden gruptan,
Joint Photographic Expert Group, alr). Eskiden, JPEG resimleri browserlarda direk olarak
gsterilmez, bunun iin yardmc bir program kullanlr ve resim ayr bir ekranda grnrd.
Bugn browserlarn tamamna yakn bu format destekler.
JPEG sktrmas fotorafik resimlerde genellikle ok etkilidir. Bazen dosya boyutunu 1/10 a
kadar drr.
Grafik kullanrken aklda tutulmas gereken baz noktalar

Artk web sayfanz tasarlamaya baladnza gre, resimlerinizi GIF ya da JPEG formatnda
kullanmay renmelisiniz.
Byk ve ok sayda resim sayfanzn mkemmel grnmesini salayabilir fakat
bu resimlerin yklenmesini bekleyecek kullanclar iin sonu skc ve yorucu
olur. Bir tavsiye olarak, resimlerinizin boyutlarn 100kdan az tutmanz iyidir.
Kk boyutlar her zaman iyidir.
Grafik boyutlarn ok byk tutmamanz (genilik 480, ykseklik 300 pixeli
genelde gememeli) iyidir, sonuta sayfanz grntleyenlerin ekran boyutlar her
zaman 21 inch olmaz! Verdiim boyutlarn zerindeki grntleri ekranda
grebilmek iin genelde ekran saa-sola ya da yukar-aa kaydrmak gerekir.
Macintosh bilgisayarlarnda birok koyu ton Windows bilgisayarlarnda grnmez.
Tm resimleri bir anda gstermek yerine bu resimlere balantlar (link) koymak
daha iyidir, bazen internete yava balants olanlar bu resimleri grntlemeyerek
zaman kazanmak isteyebilirler.
Tek bir resim (mesela bir dme) sayfann bir ok yerinde kullanlabilir. Bu
durumda browser her defasnda resimi batan yklemek yerine ilk yklemeden
sonra geri kalan yerlerde bunu hafzadan ykler.
En nemlisi, kullanacanz resimin o sayfa iin gerekli olup olmadndan emin
olun. Bylece gereksiz resimlerin yklemeyi yavalatmasn engellemi olursunuz.
Byk resimlerden olumu ve gzel grnen bir sayfa tasarlam olabilirsiniz, fakat
sayfanz grntlyecek insanlar yava bir modemden ve yava bir hattan sayfanza
ulamaya alyor olabilir.
Sayfanz iin grafikler bulmak
imdi, tasarladnz sayfa iin bir ka resim bulmann tam zaman. nternete girip konuyla
ilgili biraz aratrma yapabilirsiniz. Sayfanz iin yararl olabilecek birka resim bulmaya
aln. Deneyebileceiniz bir ka yer: http://www.yahoo.com, http://altavista.digital.com
8a. Resim Kullanm

Resimleri Gmmek iin HTML Belirteleri
Gmlen resim, bir web sayfasnn texti ile birlikte grlen

resimdir. Buradaki Byk M harfi gibi.
Gmlen resim iin HTML belirteci:

<img src=dosyaismi.gif>
Buradaki dosyaismi.gif, HTML dkmannzn bulunduu dizinde bulunan grafik dosyasdr.
gmlen kelimesiyle kastmz, bir browser bu resimi textlerin arasna yerletirir.
Yukarda Byk Mnin yanndaki yazyla ayn satrda olduuna dikkat edin. Eer bu
resimin kendi bana bir satrda olmasn isteseydik ne yapardk? Resmin kendi bana bir
satrda grnmesini salamak iin,
yanlzca belirtecinin bana bir paragraf belirteci yerletirin:

<p> <img src=dosyaismi.gif>
Text ve Gmlen Resimin Dzeni
<img> belirteciyle baz zellikleri kullanarak text ve resim arasnda nasl bir dzen
olmasn istiyorsanz ayarlayabilirsiniz. <img> belirtecinin iine yerletirilen align zellii
sayesinde aadaki efektleri yapabilirsiniz:
1. align=top
<img align=top src=dosyaismi.gif>
Yaz buraya gelecek. Dikkat ederseniz, ilk satrdan sonraki yaz
boluklar dolduruyor.
2. align=middle
<img align=middle src=dosyaismi.gif>
Yaz buraya gelecek. Bu sefer align=middle yani orta dediimiz

iin yaz grafiin ortasndan devam ediyor.
3. align=bottom (normal)
<img align=bottom src=dosyaismi.gif>
Yaz bu sefer buraya gelecek. align=bottom demekle yaznn en

alt ksmda olacan belirttik.
HTML Dkmanmza Resim Yerletirelim

Bu almada, zerinde altmz dkmana bir giri resmi koyacaz.
1. almanz, ak deilse tekrar an.

2. Text editrnzde volkanlar.html dosyasn an.
3. <h1>Volkanlar Sayfas<h1> balnn zerine unu yazn:
<img src=lava.gif>
Bu belirte, sayfanzn en stne daha nce bulduunuz volkan resimini yerletirir.
lava.gif, bu dosyanzn ismidir; eer dosyanzn ismi deiikse, lava.gif yerine o
ismi yazmalsnz.
4. Dosyanz kaydedin ve browsernzda tekrar ykleyin.
NOT: Dikkat etmeniz gereken nokta, lava.gif ya da kullandnz resim dosyas
HTML
dkmannzla ayn
dizinde olmaldr. Eer deilse, dosyann
bulunabilecei yerin tam yolunu yazmalsnz.

Resimi yerletirdiinizde aklnza neden resim belirtecinden sonra <p> belirtecini
kullanmadnz gelebilir, bunun sebebi resim belirtecinden hemen sonraki belirtecin bir
balk <hN> belirteci olmasyd; daha nce grdmz gibi bir browser balk
belirtelerinden nce ve sonra bir satr boluk brakr (paragraf belirtecine gerek kalmaz).
Alt= zellii
Eer sayfanz yanlzca text tanyan bir browser kullanan kullanclar tarafndan
grntlenecekse, bu kullanclar tarafndan hi bir resim grntlenemez. Ya da bazen,
kullanclar daha hzl eriim iin browsern resimleri ykleme zelliini kapatrlar. Bu
durumda <img> belirtecinde kullanacanz alt zellii resimin yerine, orada bir resim
olduunu belirten bir boluk koyarlar.
Bu gibi durumlarda, yanlzca text kullanan bir browser sizin yaptnz sayfann balang
ksmn u ekilde grrler:
[IMAGE]
Volkanlar Sayfas
Bu derste interneti volkanlar hakknda bilgi toplamak iin

kullanacak ve bulgularnzdan bir rapor hazrlayacaksnz.
Bu sayede kullanc, sayfann banda bir resim olduunu anlar. Buna ek olarak <img>
belirtecini bu gibi durumlarda buraya boluk gelmesi yerine bir text gsterecek ekilde
dzenleyebilirsiniz. Mesela, dzenlediimiz sayfada bu gibi durumlarda resimin yerine
Volkanlar zerine bir inceleme yazsnn gelmesini salayalm. Bunun iin textinizde u
deiiklii yapn:
<img alt=Volkanlar zerine bir inceleme src=lava.gif>
Buradaki alt= zellii gerekli olduunda resimin yerine verdiiniz textin yerlemesini
salar. almamzn bu blm artk yanlz text zellii olan browserlarda u ekilde
grnr:
Volkanlar zerine bir inceleme
Volkanlar Sayfas
Bu derste interneti volkanlar hakknda bilgi toplamak iin
kullanacak ve bulgularnzdan bir rapor hazrlayacaksnz.
Ykseklik (height) ve genilik (width) zellikleri

<img> belirtecinize dahil etmek isteyeceiniz baka iki zellik de height ve width
zellikleridir. Bunlar resimin boyutlarn pixel olarak belirlemenizi salar. Neden? Normal
olarak browsernz bu boyutlara kendi karar vermek zorundadr, eer boyutlar siz
belirlerseniz sayfanzn yklenmesi daha hzl olabilir. Ayrca, bazen HTML 2.0
standratlarn kullanan kullanclarn bana gelen browserlarnn kmesi sorununu
engelleyebilirsiniz.
Bu zellii eklemek iin gerekli biim yledir:
<img src=dosyaismi.gif width=X height=Y >
Burada X resimin genilii, Y de yksekliidir (pixel cinsinden).

Bizim kullandmz lava.gif dosyasnn boyutlar 300 pixel genilik ve 259 pixel
yksekliktir. Bu durumda son olarak u deiiklii yamalyz:
<img alt=Volkanlar zerine bir inceleme src=lava.gif
width=300 height=259>
NOT: Belirtecin iinde kullanlan zelliklerin sras nemli deildir.
zerinde altmz dosyann son grn yle olmal:
Volkanlar Sayfas
rapor hazrlayacaksnz.
Giri
Volkan, bir gezegenden erimi kaya veya mamann yzeye kt noktadr. Bu k, byk
bir patlama ile olabilecei gibi sessiz ve yava bir ekilde de olabilir
Volkanlar, insanlardan ok nce dnya tarihinde yer almlardr. nsanlarn birka milyon
yllk tarihini, drt milyar yl ile karlatrn.
Volkan Terminolojisi
Volkan aratrmalar, ya da Volkanoloji, birok garip terim ierir.
kaldera
vesikularite
pahoehoe
reoloji
lahar
St Helen Da
Long Valley
Marsta Volkan Blgeleri

Aratrma Projesi
Greviniz, yukardaki listenin dnda son yz yl iinde faaliyete gemi bir volkan hakknda
bilgi toplayp rapor etmek. Raporunuzda unlar olmal:
1.Volkann eiti
2.Jeografik konumu
3.En yakn ehrin ismi, poplasyonu, ve volkana uzakl
4.En son faaliyeti ve verdii hasar.
5.Faaliyetle birlikte grlen olaylar (toprak kaymalar, depremler, vs.)
Sonra, bu volkann yol at genel hasarlar zerine bir gzlem ve bunlarn azaltlmas iin
neler gerektii konusunda bir paragraf yazn.
Referanslar
9. Balantlar Kullanmak
URL Nedir?
Webin gerek gc istenen yerlere hipertext balantlar oluturabilmektir. Bu istenen yerler
baka web sayfalar olabilecei gibi, grafikler, sesler, dijital filmler, animasyonlar,
programlar, bir ftp arivi vb. olabilir.
WWW (World Wide Web), URL (Uniform Resource Locators) olarak bilinen bir adresleme
sistemi kullanr. Bu hipertext balantlar (alt izgili ve genellikle mavi olarak grnler)
apa olarak da tannr.
9a. Yerel Dosyalara Linkler

En basit balant ekli, ayn dizinde bulunan baka bir HTML dosyasn amaktr. Bunun iin
yazlmas gereken HTML komutu yledir:
<a href=dosyaismi.html>balanty salayacak yaz</a>
a iin anchor (apa) ve href iin hypertext reference diyebiliriz.
Dosya ismi baka bir HTML dosyas olmaldr. balanty salayacak yaz, hipertext ve alt
izgili olacak yazdr.
imdi, almamzda yerel bir dosyaya balant oluturmak iin aadakileri yapacaz:
1. Volkanlar.html dosyanz text editrnde an.

2. St Helen Da bal altnda unlar yazalm:
Mays
18,
1980de,
Washingtondaki
hakknda
bu
uzun
sessiz
bize
<a
bir
dinlenmeden
da
byk
sonra
patlamalar
href=msh.html>nemli
incelemeler</a> olana sunmutur.

3. almanz kaydedin ve browserda tekrar ykleyin.
4. imdi text editrnzde yeni (New) bir sayfa an.
5. Aadaki yazy girin:
<html>
<head>
<title>St Helens Dalar</title>
</head>
<body>
<h1>Mount St Helens</h1>
Tepesi aalarla kapl ve bir zamanlar sessiz olan
bu da faaliyete getiinde etrafn oyuncaklar gibi
datt.
</body>
</html>
6. Bu dosyay msh.html adnda dier dosya ile ayn yere kaydedin.
7. Browsernzda Volkanlar.html dosyasn tekrar ykleyin.
8. nemli incelemeler balantsn test edin. Buraya kliklediinizde browsern
msh.html dosyasn yklemesi gerekir.
Bir Grafie Balant
Bir grafie balant yaparken kullanacanz biim dosyaya balant yapma mantyla
ayndr. Bu sefer balanty yapan yazya kliklediiniz zaman karnza baka bir dkman
yerine balantnn sonundaki grafik gelir.
Baka Dizinlere Balant

Baka dizinlerdeki dosyalara balant kurmak iin dosya adn yazdnz yere dosyann tam
yerini (path) ve dosya ismini yazmanz gerekir. Mesela, bundan sonra dkmanmzda
kullanacamz resimleri /resimler adl bir dizine koyalm. Bylece resimlerimizin says
arttka oluacak karkl azaltm oluruz.
imdi almamza yeni bir resim ekleyelim:
1. Bilgisayarnzda Volkanlar.html dosyasnn bulunduu yere resimler adnda bir
dizin aalm.
2. Bu dizinin altna St. Helens Dan gsteren bir resim koyalm. Bizdeki bu resimin
ad msh.gif.
3. msh.html dosyasn text editrmzde aalm.
4. Resime ulamak iin gerekli yere bir balant kuralm:
Tepesi aalarla kapl ve bir zamanlar sessiz olan
bu
da
faaliyete
href=resimler/msh.gif>etrafn
getiinde
oyuncaklar
<a
gibi
datt</a>.
5. Dkmannz kaydedin ve browsernzda tekrar ykleyin.
Son olarak etrafn oyuncaklar gibi datt yazsna kliklerseniz aadaki resimin ekranda
grnmesi gerekir:
Grdnz gibi baka dizinlere balant kurarken tm yolu yazmak yerine o an

bulunduumuz dizine gre olan konumu yazmamz yeterli olur. Aslnda bu balantlar
yaparken dosyalarn yolunu root dizininden itibaren yazabilirdik. Fakat kullandmz eklin
bir avantaj, dosyalarmz bilgisayarmzdan baka bir yere tadmzda (mesela kendi
adresine) zerinde deiiklik yapmamza gerek kalmaz. Aksi taktirde dosyalarn bulunduu
yerleri batan yazmak gerekirdi.
st Dizindeki Dosyalara Balant
Eer bir dosya dkmannzn bulunduu dizinden daha nceki dizinlerde yer alyorsa ne
yapacaz? Gene root tan itibaren dizinleri yazmaktansa baka yollar deneyebiliriz.
Mesela u anki dizin ve dosya sralamamz yle olsun (bundan sonra dosyalarmz bu
dzene gre yazacaz):
Bu durumda, msh.html dosyasndan msh.gif dosyasn grntlemek iin:
<img src=../resimler/msh.gif>
yazmamz gerekir. Burada kullandmz .. iki nokta bir nceki dizini belirtir.
imdi dizin ve dosyalarmzn yerinde bir deiiklik daha yapalm. lava.gif dosyasn
resimler dizinin altna yerletirelim. Bunu yaptktan sonra dkmanmz browserda
grntlersek lava.gif dosyasnn grntlenmediini grrz. Bunun sebebi artk dosyann,
bulunduunu belirttiimiz yerde olmamasdr. imdi Volkanlar.html dosyamz text
editrmzde tekrar aalm ve lava.gif dosyasnn sayfaya eklendii yerde u deiiklii
yapalm:
<img
alt="Volkanlar
zerine
bir
inceleme"
src="../resimler/lava.gif" width=300 height=259>

Bir deiiklik daha:
Artk yapmamz gereken deiiklik Volkanlar.html dosyasnn ismini index.html yapmak.
Neden mi? Bu dersleri bitirdiinizde sayfanz TR-netteki accountunuza atacaksnz.
Diyelim ki sayfanzn adresi http://www.deneme.com.tr/ . Son haliyle sayfanza ulamak iin
yazmanz gereken adres: http://www.deneme.com.tr/Volkanlar.html dir. Fakat balang
dosyanzn ad index.html olsayd adrese http://www.deneme.com.tr yazmanz yeterli
olacakt. Bunun sebebi, bir standart olarak browserlar, eer bir dosya ismi belirtilmemise
index.html dosyasnn olup olmadna bakar, varsa bu dosyay grntler.
9b. URLler
URL, WWWnin bilgisayarlar ve dosyalar bulmak iin kulland yoldur. URLin
ierdikleri:
nternet servisi makinasnn eiti
bir internet adresi
ulat dosyann dizin sras (path)

URLler nasl kullanlr?
URLlerin kullanlma ekli udur:
ekil://in.ter.net.adresi/dizin/alt-dizin//dosyaismi
ekil ile belirtilen yer, ulalan servisi makinann cinsini belirler:
http
HyperText Transfer Protocol denen dosya aktarm biimidir.
gopher
dizinlerin bir men eklinde grnd bilgi iletim servisi
ftp
File Transfer Protocol (FTP) denen servisi dosya aktarmnn gereklitii
makinalar iin kullanlr.
telnet
Servisi makinaya uzaktan eriebilmek iin kullanlan bir servistir. Telneti
kullandnzda browsernz, bunun iin yardmc bir program kullanacaktr.
WAIS
Wide Area Indexed Servergenelde bir konu zerine anahtar kelimelerden arama
yapan servisi
file
kendi bilgisayarnzdaki dosyaya ulamak iin kullanlr.
ekil ile belirttiimiz yerden sonra hep :// kullanlr. Bunu ise ulaacamz makinann
internet adresi izler.
NOT: Bir ok serviside byk kk harf aras fark vardr. UNIX ve LINUX
bilgisayarlar byk kk harf duyarldr ve bugn bir ok web sayfas bu
bilgisayarlar zerinden alr (TR-nette olduu gibi).
Volkanlar.html
dosyas
volkanlar.html
dosyasndan farkldr.
9c. nternete Linkler Oluturmak

Daha nce dosyalara balantlar oluturduk. nternetteki sayfalara link oluturmak da ayn
yolla yaplr. Yapmanz gereken sadece dosya yerine yazdklarnz yerine internet adresini
yazmaktr. Yani, yazmanz gereken yaklak olarak yledir:
<a href=URL>Balanty salayacak yaz</a>
imdi, kendi dkmanmza, Marstaki volkanlar gsteren bir sayfann balantsn
yapacaz.
1. index.html dosyanz text editrnzde an.
2. Marsta Volkan Blgeleri balnn altna unlar yazalm:
<a href="http://bang.lanl.gov/solarsys/mars.htm">
Marsn</a> kendine zg volkanik blgeleri vardr. Bunlardan birinde
ise
Gne
Sisteminin
bilinen
en
byk
volkan,
href="http://bang.lanl.gov/solarsys/raw/mars/olympus.gif">
<a
Olympus
Mons</a> yer alr.
3. almanz kaydedin ve browserda tekrar ykleyin.

Buna ek olarak, dkmanmzdaki referanslar ksmna volkanlarla ilgili bir ka balant daha
ekleyelim. Burada listeler ile balantlarn birlikte kullanmna dikkat edin:
<ul>
<li><A HREF="http://www.avo.alaska.edu/">
Alaska Volcano Observatory</A>
<li><A HREF="http://vulcan.wr.usgs.gov/home.html">
Cascades Volcano Observatory</A>
<li><A HREF="http://www.dartmouth.edu/~volcano/">
The Electronic Volcano</A>
<li><A HREF="http://www.geo.mtu.edu/volcanoes/">
Michigan Tech Volcanoes Page</a>
<li><A HREF="http://www.geo.mtu.edu/eos/">
NASA Earth Observing System (EOS) IDS Volcanology Team</A>
<li><A HREF="http://www.geol.ucsb.edu/~fisher/">
Volcano Information Center</a>
<li><A HREF="http://vulcan.wr.usgs.gov/Servers/
earth_servers.html">
Volcano/Earth Science-Oriented Servers</A>
<li><A HREF="http://www.ngdc.noaa.gov/seg/hazard/hazards.html">
NGDC Natural Hazards Data</a>
<li><a href="http://www.nmnh.si.edu/gvp/">
Global Volcanism Program (GVP) </a>
<li><a href= "http://www.soest.hawaii.edu/hvo">
Volcano Watch Newsletter</a>
<li><a href="http://www.jasonproject.org/JASON/HTML/
EXPEDITIONS_JASON_6_home.html">
JASON Project VI: Island Earth</a>
<li><A HREF="http://volcano.und.nodak.edu/">
VolcanoWorld</A>
</ul>
Sayfanzn son hali yle olmaldr:
9d. Bir Sayfann Blmlerine Linkler Eklemek

nternetten sayfalara ve istediiniz dosyaya balantlar kurmay rendiniz. Eer bir
sayfann/dkmann belirli bir blmne (mesela 80. Satrna) balant kurmak isteseydiniz
ne yapardnz? HTML dilinde bu da mmkn. Bu i iin kullanlan belirtelere named
anchor (isimlere balant) deniyor. simlere balant yapabilmek iin aadaki rnei
inceleyin:
<a isim=SM>Balantnn yaplaca yaz</a>
Buradaki SM, balanty yaparken kullanacamz adres yerine gelecek. Bir dkmann
kendisinde (sayfann iinde baka bir yere) balant yaparken belirte:
<a href=#xxxx>Hipertext gibi davranacak yaz</a>
eklinde kullanlr. # sembol browsera dkmann geneline bakmasn ve xxxx isimli
balantya gitmesini syler. Burada Hipertext
gibi
davranacak
yazya
kliklediinizde browser #xxxx isminin olduu yeri ekrann bana getirir.

sterseniz dkmanmzda bu belirteci kullanarak konuyu pekitirelim:
1. Text editrnde index.html dosyasn an.
2. Giri balna gelin ve u ekilde deitirin:
eski hali:
<h2>Giri</h2>
yeni hali:
<h2><a name=balang>Giri</a></h2>
3. Ayn mantkla, dkmandaki dier balklara da birer isim atayalm:
<h2><a name=term>Volkan Terminolojisi</a></h2>
<h2><a name=mars>Marsta Volkan
Blgeleri</a></h2>
<h3><a name=proje>Aratrma Projesi</a></h3>
4. u an dkmannz browserda tekrar yklerseniz bir fark gremezsiniz, isim
balantlar kullanclardan gizlenen belirtelerdir.
Ayn dkmandaki isim balantlarna link eklemek
Son oluturduumuz isim balantlarn kullanabilmek iin kullanclar sayfann bu

blmlerine ynlendirecek hipertext linkleri oluturmamz gerekir. Dkmanmz zerinde
almaya devam edelim:
1. u an ak deilse, index.html dosyasn an.
2. Volkanlar sayfas balnn altndaki cmleden sonra aadakileri yazn:
<hr>
<B>Bu derste</B>
<ul><i>
<li><a href=#balang>Giri</a>
<li><a href=#term>Volkan Terminolojisi</a>
<li><a href=#mars>Marsta Volkan Blgeleri</a>
<li><a href=#proje>Aratrma Projesi</a>
</ul>
3. Dkman kaydedip browserda tekrar ykleyin.
Baka bir dkmana isim balantlar koymak
Bu yntemle baka bir sayfann istediiniz satrna (<a name> belirtecini kullandnz
yerlere) balant yapabilirsiniz. Bu konunun mant da dosyalara ya da internetteki adreslere
balant yapmakla ayndr. Bu sefer ek olarak yazmanz gereken # iaretidir. Deneme
olarak dkmanmzn msh.html dosyasna, index.html dosyasna geri dnmek iin bir
balant koyalm.
1. msh.html dosyasn text editrnde an.
2. Sayfann en altna (</body> belirtecinden hemen nce) takip eden yazy yazn:
<hr>
<a
href=index.html#balang>Volkanlar
dn</a>
Sayfasna
3. Dosyay save edip browsernzda grntleyin.

Artk sayfada Volkanlar Sayfasna dn yazsna kliklerseniz index.html sayfasnn
balang blmne dnersiniz.
Bundan sonra nceki bilgilerinizi de kullanarak bilgisayarnzda ya da internette istediiniz

dosyann istediiniz blmne balant koyabilirsiniz.
9e. Hipergrafik Linkleri

Buraya kadar balantlar yaparken dz text kullandk. HTML de kullanabileceimiz bir
yntem de hipergrafik balantlardr. Bu balantlar kullanarak istediimiz grafie bir
balant atayabiliriz.
imdi dkmanmza dnp bir rnek deneyelim:
1. Text editrnzde index.html dosyanz an.
2. Long Valley bal altna aadakileri yazn:
Bu alan seismometresi volkanlarn yzeye yapt basn
sonucu oluan depremlerin kuvvetini ler. Bulunduu yer,
600 bin yl nce patlam bir volkann platosudur.
<p>
<a href=../resimler/seismo.jpg><img src=../resimler/stamp.gif>
-- [Resimin Byk Hali] -- </a>
<p>
3. Dosyay kaydedin ve browserda tekrar ykleyin.
Ekrandaki resime mouseu gtrrseniz bir hipertext linki olduunu greceksiniz.
10. Text Biimi (<pre> belirteci)

Daha nce grdnz gibi, browserlar yazlar boluklar dolduracak ekilde ekrana yayar.
Fakat yazlarnzn dzenini kendi isteiniz dorultusunda oluturmak isterseniz <pre>
belirtecini kullanmanz gerekir.
Mesela basit bir tablo oluturmak istiyorsunuz:
<pre>
Patlamalar
Tarih
Alan (km3 cinsinden)
-----------
-------
---------------------
Paricutin,Meksika
1943
1.3
Mt. Vesuvius, Italy
MS. 79
Krakatoa, Endonezya
1883
18
</pre>
Sonu:
Patlamalar
Tarih
Alan (km3 cinsinden)
-----------
-------
------------------------
Paricutin,Meksika
1943
Mt. Vesuvius, Italy
MS. 79
Krakatoa, Endonezya
1.3
1883
3
18
Grdnz gibi browserlar <pre></pre> belirteci arasnda kalan yazlar yazdnz eklin
ayns halinde grntler.
Bu belirte ou zaman bir ka satrlk boluk gerektiinde de kullanlr. Mesela sayfanzn
bir blmnde 5 satrlk boluk istiyorsunuz. Yapmanz gereken:
<pre>
</pre>
Browsernz, pre belirtelerinin arasndaki yazy aynen grntleyecei iin bu durumda 5
satrlk boluk brakr.
11. zel Karakterler

>>> yazsn nasl yazarsnz? HTMLde, ISO zel karakterlerini kolaylkla
kullanabilirsiniz. Yazmanz gereken sadece :
&xxxx;
XXXX kullanacanz zel karakterin numarasdr. Browser, & iareti ile balayp ; ile
biten rakamlar ya da baz HTML harflerini ekrana bu karakter ya da numaralara karlk
gelen haliyle aktarr.
Mesela imdiye kadar eer <pre> belirtecini kullanmazsak birden fazla boluk
kullanamyorduk. zel karakterler sayesinde bu mmkn. Ekrana bir boluk karmak iin:

yazmanz yeterli.
Dier karakterleri ise aadaki listeden bakarak kullanabilirsiniz:
ISO Latin-1 kod
sim ya da anlam
¡
Cent iareti
¿
Ters soru iareti
"
"
Trnak iareti

Boluk
Karakter
"
HTML Girii
Semboller
&
&
©
Ampersand
©
Copyright
÷
Blme
>
>
Byktr
<
<
Kktr
µ
Micron
·
Orta nokta
¶
Paragraf
±
Art/eksi
£
Ingiliz Paundu
®
Mseccel marka
§
Blm
¥
Japon Yeni
®
Diakritikler
á
á
Kk a, dar aksan
Á
Á
Byk a, dar aksan
à
à
Kk a, grave accent
À
À
Byk a, grave accent
â
â
Kk a, belgili vurgu aksan
Â
Â
Byk a, belgili vurgu aksan
å
å
Kk a, daire
Å
Å
Byk a, daire
ã
ã
Kk a, tilde
Ã
Ã
Byk a, tilde
ä
ä
Kk a, dieresis veya umlaut iareti
Ä
æ
Æ
Ä
æ
Æ
Byk a, dieresis veya umlaut iareti

Kk ae diphtong (ligatre)
Byk ae diphtong (ligatre)
ç
ç
Ç
Ç
Byk , cedilla
é
é
Kk e, dar aksan
É
É
Byk e, dar aksan
è
è
Kk e, grave accent
È
È
Byk e, grave accent
ê
ê
Kk e, belgili vurgu aksan
Ê
Ê
Byk e, belgili vurgu aksan
ë
ë
Kk e, dieresis veya umlaut iareti
Ë
Ë
Byk e, dieresis veya umlaut iareti
í
í
Kk I, dar aksan
Í
Í
Byk I, dar aksan
ì
ì
Kk I, grave accent
Ì
Ì
Byk I, grave accent
î
î
Kk I, belgili vurgu aksan
Î
Î
Byk I, belgili vurgu aksan
ï
ï
Kk I, dieresis veya umlaut iareti
Ï
Ï
Byk I, dieresis veya umlaut iareti
ñ
ñ
Kk n, tilde
Ñ
Ñ
Byk n, tilde
ó
ó
Kk o, dar aksan
Ó
Ó
Byk o, dar aksan
ò
ò
Kk o, grave accent
Ò
Ò
Byk o, grave accent
ô
ô
Kk o, belgili vurgu aksan
Ô
Ô
Byk , belgili vurgu aksan
Kk , cedilla
ø
ø
Kk o, eik izgi
Ø
Ø
Byk o, eik izgi
õ
õ
Kk o, tilde
Õ
Ö
Õ
Ö
Byk o, tilde
Byk o, dieresis veya umlaut iareti
ß
ß
Kk keskin s
ú
ú
Kk u, dar aksan
Ú
Ú
Byk u, dar aksan
ù
ù
Kk u, grave accent
Ù
Ù
Byk u, grave accent
û
û
Kk u, belgili vurgu aksan
Û
Û
Byk u, belgili vurgu aksan
ü
ü
Kk u, dieresis veya umlaut iareti
Ü
Ü
Byk u, dieresis veya umlaut iareti
ÿ
ÿ
Kk y, dieresis veya umlaut iareti
12. Aklama Listeleri

Daha nce iki eit liste grdk- sral ve srasz listeler - . Bunlara ek olarak aklama listesi
dediimiz ve mantk olarak dier listelere benzeyen bir liste eiti var. Bunun dierlerinden
fark, paralarn bana numara ya da herhangi bir iaret gelmemesidir. Aklama listesi
belirtecinin kullanl yledir:
<dl>
<dt> birinci balk
<dd> birinci aklama
<dt> ikinci balk
<dd> ikinci aklama
:
:
<dt> N. balk
<dd> N. aklama
</dl>
Tm liste <dl></dl> belirteleri arasnda yer alr. Arasnda da balk paralar <dt> ve
aklama paralar <dd> bulunur.
Bir browserda denendiinde yukardaki rnek yle grnr:
birinci balk
birinci aklama
ikinci balk
ikinci aklama
:
:
N. balk
N. aklama
13. Adres Satrlar ve E-Mail Linkleri

Sayfanz ziyaret eden insanlar size mail atmak ya da ulamak isteyebilirler. Bu durumda
adresinizi ve mail adresinizi olduu gibi yazmak yerine bu iler iin kullanlan belirtelerden
faydalanabilirsiniz.
Adres belirtecinin HTML ekli:
<address>
adres blmne yazmak
istediiniz yaz
</address>
Aklda tutulmas gereken nokta, adres belirtelerinin ierisinde dier belirteler serbeste
kullanlabilir.
rnek olarak:
HTML
<address>
<b>Sayfa Bal</b><br>
HTML Notlar<br>
Hazrlayan:<br>
Kutberk Kargn
(kutberk@tr.net)<br>
<a href=http://www.
tr.net>
TR.NET</a><br>
Sonu
Sayfa Bal
HTML Notlar
Hazrlayan:
Kutberk Kargn
(kutberk@tr.net)
TR.NET
Ek olarak, adres ksmna e-mail adresini yazmaktan te mailto komutunu kullanarak mail
adresinizin (ya da herhangi bir yaznn) zerine kliklendiinde size mail gelmesini
salayabilirsiniz. Mesela sayfanzda aadaki gibi bir e-mail hipertext linki oluturun:
<a href=mailto:kutberk@tr.net>Kutberke bir
e-mail atn</a>
Hipertext linkinin zerine kliklendiinde browser mail yazlabilecek bir ekran yaratr (mesela
netscape kullanclar iin netscape mail).
Son olarak, adres satrlarnzn sonuna sayfanzn adresini yazmak iyi bir alkanlktr. Neden
mi? Diyelim ki birisi sayfanz print etti ve kt. Sayfanzda grnen tm bilgileri print etmi
olmasna ramen sayfanzn adresi normal olarak kadn hi bir yerinde grnmeyecektir.
Tabi, sayfann herhangi bir yerine yazmazsanz, bunun iin en uygun yerlerden birisi de
sayfann en alt ksm, adresin altdr (tabiki tercih her zaman sizin- sayfanz istediiniz gibi
tasarlamak sizin elinizde, tabi o sayfay grecek insanlar da akldan karmamak lazm).
imdi dkmanmz tekrar aalm ve sayfann sonuna adresimizi ekleyelim:
1. index.html dosyasn bir text editrnde an.
2. sayfann sonunda (ama </body> belirtecinin zerinde), aadakileri yazalm:
<HR>
<address><B>Volkanlar Sayfas</B> <br>
HTML Notlar , <a href=mailto:ahmet@tr-net.net.tr>
ahmet@tr-net.net.tr</a><br>
<tt>Her Hakk Sakldr</tt>
</address>
<p>
<tt>URL: http://www.volkanlarsayfas.com</tt>
14. Blockquote Belirteci

<blockquote> (alnt) komutu fazla kullanlmayan bir komuttur. Dkmannzda bakalarnn
szlerine yer verdiinizde bu belirtelerin arasna yazabilirsiniz.
Bu belirte, arasnda kalan yazy iki <hr> (hard rule/dz izgi) arasna alr ve sayfada ortalar.
Mesela:
<blockquote>
Bu bir denemedir.
</blockquote>
Sonucu:
Bu bir denemedir.
Grebileceiniz gibi, aslnda blockquote belirtecinin yaptn dier belirteleri kullanarak da

yapabiliriz.
15. Renk Kullanm
Arka plan renkleri:

Sayfamzn arka plann renklendirmek iin yapmamz gereken <body> belirteciyle birlikte
bgcolor zelliini de kullanmak.
<body bgcolor=#XXXXXX>
#XXXXXX, arkada belirecek rengin kodudur. Bu renkler RGB eklinde (Red Green Blue/
Krmz Yeil Mavi) ve onaltlk sistemdedir. Her iki basamak bir renkten ne kadar youn
olacan belirler (toplam 3 renk 6 basamak). Bu durumda basit bir hesapla
kullanabileceimiz toplam renk saysnn 16.7 milyon renk olduunu grrz (genelde bu
kadarna ihtiya duyulmaz). Saynn bandaki # iareti ise saynn Hexadecimal (Onaltlk
sistem) olduunu gsterir.
Elde ettiimiz bilgileri kullanarak zerinde altmz dkmann arka plann siyah
yapalm (RGB formatnda deeri #000000).
Yapmamz gereken tek ey <body> satrn <body bgcolor=#000000> eklinde
deitirmek. Yazya browserda bakn. Evet, artk hi bir ey gremiyoruz! Bunun sebebi, yaz
rengimizin de zaten siyah olmasyd. Neyse ki yaz rengini ayarlayabileceimiz komutlar
HTMLde var:
<body bgcolor=#xxxxxx text=#xxxxxx link=#xxxxxx vlink=#xxxxxx>
xxxxxx renkleri,
bgcolor = arkaplan rengi (normali gri)
text = sayfann normal yaz rengi (normali siyah)
link = sayfadaki hipertext linklerinin rengi (normali mavi)
vlink = daha nce ziyaret edilmi adreslerin rengi (normali mor)
ni belirleyebilir.
imdi sayfamzn okunabilir hale gelmesi iin yle bir renk ayar yapacaz:
<BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#33CCFF VLINK=#CC0000>
Bu bize siyah bir arka plan, sar bir yaz, ak mavi hipertext, ve krmz ziyaret edilmi
hipertext sunacaktr. Gerekli deiiklii yaptktan sonra browserda nasl grndne bakn.
Benim browserm sonucu aadaki gibi gsteriyor:
16. Text Dzenlemeleri

Font Bykl
<font>..</font> belirteci yaz fontunun bykln ayarlamak iin kullanlabilir. Font

bykl saysal olarak belirtilir. 1 en kk ve 7 en byktr (normali 3).
Hatrlamanz gereken, font bykl sayfanzn grntlendii bilgisayarn ayarlarna
baldr. Ama sonuta sayfanzda bir yaznn dierinden byk ya da kk grnmesi sizin
elinizde.
NOT: Eer bir browser <font> belirtecini desteklemiyorsa HTML 3.0 da
kullanlan <big>..</big> ve <small>..</small> belirtelerini kullanabilirsiniz.
<font> belirtecinin format:
<font size=N>deneme</font>
eklindedir. N, 1den 7ye kadar bir saydr. Font boyutlarn kullanmann baka bir yolu da:
<font size=+2>deneme</font>
<font size=-1>deneme</font>
eklinde greceli bir font boyu saptamaktr. Burada kullandmz +2, o anki font boyutunun
zerine eklenecek bir saydr (eksi de de ayn mantk). Bu belirte bir dier belirte ile
ilikilidir- <basefont>.
<basefont size=5>
komutu normal font boyutunu 3den 5e deitirir.
<font> belirteci yaznn sadece boyutunu deitirmeye yaramaz. Bu belirte sayesinde
yaznn rengini ve tipini de deitirebilirsiniz. Dkmanmzda Volkanlar Sayfas yazsn u
ekilde deitirelim:
<b><font
face=Arial,Helvetica
size=+4
color=#FF66FF>V
</font>
<font
face=Arial,Helvetica
color=#dd0055>OLKANLAR SAYFASI</font></b>
size=+3
face komutu yaznn tipini belirler. ki tane tip yazlmasnn sebebi ise, eer browser ilk yaz
tipini gsteremiyorsa ikinci tipi seer. color komutunu ise bgcolor komutundan
tanyorsunuz, ismi hari hereyi ayndr.
Superscript / subscript
Bu iki komut matematiksel yazlmda (bazen baka yerlerde) olduka ie yarar.
<sup></sup>
st
<sub></sub>
taban
Mesela 2 zeri 5 yazsn gsterebilmek iin 2<sup>5</sup> komutunu kullanmak gerekiyor.
<strike>
Bu belirte, <u> (alt izgi) belirtecine benzer. <strike></strike> belirtelerinin arasna
gelen yazy ortas izgili yapar.
17. <hr> Belirteci

Daha nce dkmanmzda <hr> belirtecini kullandk fakat bu belirteci daha geni olarak
kullanmak mmkn. <hr> da kullanlan komutlar:
<hr width=80% size=10>
Bu komut, ekrana izilecek izginin, genilemesine tm ekrann %80 ini kaplamasn,
geniliinin (dikey) ise 10 pixel olacan belirtiyor. Bu belirtece bir de noshade komutu
eklenebilir.
<hr width=80% size=10 noshade>
noshade komutu, browsera izginin glgesi olmayacan syler. Sonu ise yledir:
18. Text ve Grafik Konumunu Ayarlamak

imdiye kadar yazlar normal olarak sol taraftan balyordu. Fakat sayfanz dzenlerken baz
yazlarn sa tarafta olmasn, bir ounun da ortada olmasn isteyeceksiniz. Bu durumda
<p> (paragraf) belirteci ile baz komutlar kullanabiliyoruz.
<p align=center>
Burada <p> belirteci ile kullanlan align komutu tm paragrafn yerleimini belirler. Bir
ey belirtilmezse browser bunu left kabul eder (normali). center, paragrafn ekranda
ortalanmasn salar (enine). right ise yaznn saa kaymasn salar.
Grafik ve Text konumlar
Dkmanmz tekrar aalm ve ilk blmdeki yazy:
<img
alt="Volkanlar
zerine
bir
inceleme"
src="../resimler/lava.gif" width=300 height=259>

<b><font
face="Arial,Helvetica"
size=+4
color=#FF66FF>V
</font>
u yazya evirelim (tek fark <img> belirtecindeki align komutu)
<img
alt="Volkanlar
zerine
bir
inceleme"
src="../resimler/lava.gif" width=300 height=259 align=left>
<b><font
face="Arial,Helvetica"
</font>
Deiiklik yapmadan nce sayfa:
Deiiklik yaptktan sonra:
size=+4
color=#FF66FF>V
Grdnz gibi <img> belirtecinde kullanlan align=left komutundan sonra geriye kalan
yazlar sayfann bo yerlerini dolduracak ekilde dizilir.
<div> belirteci
Bu belirtecin iinde kalan tm text verilen yerleimde grntlenir. Kullanl:
<div align=left></div>
<div align=right></div>
<div align=center></div>
Buradaki son komut, <center> belirteci ile ayn ii grr. <center></center> belirteci,
arada kalan tm yazy ortalayan bir belirtetir.
19. Tablo Kullanm
Dkmanlarnzda tablo yapmak iin kullanacanz belirte, <table> dr. Bir tablonun
balangc:
<table border=N>
:
:
</table>
eklindedir. Bu belirtecin iinde tablonun sralarn ve kolonlarn belirlemek iin <tr> ve
<td> komutlarn kullanacaksnz.
Bir tablonun HTML format genel olarak yledir:
<table border=1>
<tr>
<td>1. satr, 1. kolon</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Bu tablonun grn ise:
Satr ve Kolonlar
Bir <td> belirtecinin iinde colspan ve rowspan zelliklerini kullanarak tablonuzu daha etkin
dzenlemeniz mmkn. Aada bununla ilgili iki rnek bulunmakta.
<table border>
<tr>
<td>Kolon 1 Satr 1</td>
<td align=center colspan=2>
Satr 1 Kolon 2-3</td>
</tr>
<tr>
<td>Satr 2 Kolon 1</td>
</tr>
<tr>
</tr>
</table>
Bu kodun kts:
<table border>
<tr>
<td>Kolon 1 Satr 1</td>
<td align=center colspan=2>
Satr 1 Kolon 2-3</td>
</tr>
<tr>
<td valign=top rowspan=2>
Satr 2 Kolon 2</td>
</tr>
<tr>
</tr>
</table>
Bu kodun kts:
Grnmez Tablolar
Tablolarn dn grnmez yapmak iin border=0 komutu kullanlr. Bu durumda bir tablo
hala vardr fakat kullanc tabloyu gremez. Grnmez tablolar sayfanzn dzeninde olduka
iinize yarayabilir. Tablo kullanmadan dzenleyemeyeceiniz yazlar grnmez tablolara

yerletirirseniz yazlar istediiniz noktada tutmak mmkn olacaktr.
Tablolar Renklendirmek
Tablolarn her bir hcresini istediiniz renkte boyayabilirsiniz. Bunun iin kullanlacak
komut bgcolordr.
Tablo
<table bgcolor=#880000>
tm tabloyu belirtilen renge boyar.

Sra
<tr bgcolor=#880000>
tm sray belirtilen renk ile doldurur.
Hcre
<td bgcolor=#880000>
tek hcreyi belirtilen renk ile doldurur.

HTML 1

Uploaded by

Copyright:

Available Formats

You might also like

HTML 1

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 1

Uploaded by

Copyright:

Available Formats

1.

Webdeki ncelikli ama, herkesin yaynclk yapmasn salayacak standart ve

2. lk HTML Dkmannz Yazmak

rnek olarak, bu ksmdaki bal sayfanzda karmak iin:

<h4>HTML belirteleri nedir?</h4>

<ahmet><h4>HTML belirteleri nedir?</h4></ahmet>

HTML Dkmannz Oluturmak

<!-- grntlenen tm HTML -- >

<head></head> belirtecinin iinde bulunuyor ve ekranda grnmyor.

NOT: Windows 3.1 kullanclar dosya isminin uzantsn .htm yapmak

Dkmannz bir web browserda grntlemek

3. HTML Dkmannz Dzenlemek

HTML Dkmannzda Deiiklikler Yapmak

Volkan, bir gezegenden erimi kaya

Dikkat etmeniz gereken nokta, bu text </body> ve </html> belirtelerinin stnde ve

3. File mensnden Save komutunu sein.

Web Browsernzda Dkman Tekrar Yklemek

HTML Balklarn Dkmannza Yerletirmek

5. Text editrnde deiiklikleri kaydedin.

Marsta Volkan Blgeleri

Paragraf Belirtecini kullanmak

Bu k, byk bir patlama ile olabilecei

drt milyar yl ile karlatrn.

Yazy blmenin baka yollar

drt milyar yl ile karlatrn.

Sadece Paragraf Belirteci

istediiniz gibi ynlendirmeniz daha iyidir.

ekilde ynlendirmeniz daha

Grdnz gibi belirteler bu i iin

Grdnz gibi belirteler

Paragraf <p> ve <br> belirteci

brakmaktansa onu istediiniz<br>

ekilde ynlendirmeniz daha

ekilde ynlendirmeniz daha iyidir.

Grdnz gibi belirteler

Grdnz gibi belirteler<br>

6. Dkmana Stil Kazandrmak

<b>Bu yaz koyu</b>

<i>Bu yaz italik</i>

<tt>Bu yaz typewriter</tt>

Bu belirteleri iie kullanabileceinize dikkat edin. Fakat belirteleri doru sralamaya

Bu yaz koyu ve italik

Ayrca, bu belirteleri balk textinize de uygulayabilirsiniz.

HTML Dkmannza Eklemeler

4. Bu kelimeye u belirteci ekleyin:

kelimeyi koyu ve italik yapacaz. Deiiklikten sonra paragraf yle gzkmeli:

Srasz (unordered) listeler

Srasz listeler ya da ul belirteci, browserda, banda noktalarla belirtilen satrlar oluturur.

Bu listeyi yapmak iin HTML kodu:

Bu listeyi oluturmak iin HTML kodu:

Baka listelerin iinde kullanlm bir srasz liste:

Bu, ikinci parann nc alt paras

Liste iaretlerinin her derecede deitiine dikkat edin.

ie Listeler Hepsini Kullanmak

HTML Dkmannza Listeler Yerletirmek

Sonra, bu volkann yol at genel hasarlar zerine

gerektii konusunda bir paragraf yazn.

8. Grafikler ve Dosya Biimleri