8/20/2019 10 Bolum HTML

1/20

X Bölüm

HTML Kod

179

8/20/2019 10 Bolum HTML

2/20

180

8/20/2019 10 Bolum HTML

3/20

HTMLHTML (Hyper Text Markup Language) bir döküman formatama

diidir! "eb #ayfaar$ teme oarak HTML tagar$ndan (etiket) ou%ur!Tagar ie &eb #ayfa#$ndaki ya'$ar biimendiriir re#im ya da ink

ekenir! *ir &eb #ayfa#$n$n kayna+$na bakar#an$' bu HTML tagar$n$görebiir#ini'! *roer bu tagar$ yorumayarak &eb #ayfa#$n$görüntüer! Tagar

, ie ba%ar -e . ie biter! *a#it bir &eb #ayfa#$n$n kodar$ a%a+$dad$r/

,tm.,ead.,tite.eneme,2tite.,2ead.

,body.,p.Meraba,2p.,2body.,2tm.

*u HTML kodar$n$ bir text editörü ie ya'abiir#ini'! *u i% iin 3not defteri4 bie yateridir! HTML kodar$n$ ya'd$ktan #onra 3tm4 yada 3tm4 u'ant$#$ ie kaydedip bir broer ie aarak #ayfan$'$görüntüeyebiir#ini'!

Her tag geneike ,tite. ,2tite. örne+inde odu+u gibi ifttir!*ütün tagar kapat$ma$d$r! 5n6ak bunun ba'$ i#ti#naar$ -ard$r

örne+in ,br. tag$ gibi! Tagar a$ma #$ra#$na göre kapat$ma$d$r! k181

8/20/2019 10 Bolum HTML

4/20

a$an tag en #on kapat$$r! Tagar$ ya'$m$nda büyük arf ya da küükarf kura$ yoktur! Tagar$n tamam$n$ büyük arfe ya'abie6e+ini' gibiküük arfere de ya'abiir#ini'! Hatta büyük -e küük arferi kar$%$kbir %ekide kuanarak tagar ya'$abiir!

"eb #ayfaar$nda ik tag ,tm. tag$d$r! *u tag broeraHTML döküman$n ba%ad$+$n$ bidirir! ,2tm. tag$ i#e HTMLdöküman$n bitti+ini beirtir!

,ead. -e ,2ead. ara#$na i#e #ayfaya igii bigier ya'$$r! :rne+in#ayfan$n ba%$+$ burada beirtiir!

;ayfan$n ba%$+$ ,tite. ie ,2tite. ara#$na ya'$$r! ;ayfa ba%$+$broer pen6ere#inin ba%$k ubu+unda görüntüenir!

,body. ie ,2body. ara#$na i#e e#iti biimendirme tagar$ ya'$$r!Başlıklar

*a%$k ya'mak iin ,1. den ,,2>.,?.*a%$k ?,2?.,@.*a%$k @,2@.,A.*a%$k A,2A.,

8/20/2019 10 Bolum HTML

5/20

Paragraflar

Caragrafar ,p. tag$ ie tan$man$r! *u tag kuan$d$+$ndaparagraftan #onra bo% bir #at$r meydana geir!:rnek oarak/

,p.*irin6i paragraf,2p.,p.kin6i paragraf,2p.

18?

8/20/2019 10 Bolum HTML

6/20

Metni i'aamak iin 3aign4 ö'ei+i kuan$$r! ;oa ya#amakiin 3eft4 #a+a i'aamak iin 3rigt4 ortaamak iin 36enter4 iki yanaya#amak iin 3Du#tify4 kuan$$r! :rne+in/

,p aignEF6enterF.Meraba,2p.

Satır Sonları

,p. tag$ kuan$d$+$nda paragraftan #onra ya'$an ya'$arara#$nda bir #at$r bo%uk meydana geir! *unu i#temiyor#an$' ,br.tag$n$ kuanman$' gerekir! ,br. tag$ndan #onra ya'$an ya'$ar aradabo%uk omadan bir at #at$rda görüntüenir! i+er tagar$n ak#ine,br. tag$n$n kapat$ma#$ gerekmemektedir! :rnek oarak/

*irin6i #at$r,br.kin6i #at$r,br.

Ba'$ya bir at #at$rdan de-am etmek i#tiyor#an$' mutaka ,p.

ya da ,br. tagar$ndan birini kuanman$' gerekir! Got defterinde#at$r$n #onunda 3enter4 tu%una ba#$p at #at$rdan ya'maya de-amet#eni' bie broer bunu gö' önüne amaya6akt$r! *u ya'd$kar$n$'$yanyana görüntüeye6ektir!

18@

8/20/2019 10 Bolum HTML

7/20

Metin Biçimlendirme Tagları

Koyu Yaıoyu ya'$ ,b. tag$ ie tan$man$r! :rne+in/

,b.oyu ya'$,2b.

!"ik yaı=+ik ya'$ ,i. tag$ ie tan$man$r! :rne+in/

,i.=+ik ya'$,2i.

#lt $igi5t$ i'gii ya'$ ya'mak iin ,u. tag$ kuan$$r! :rne+in/

,u.5t i'gi,2u.

oyu e+ik -e at i'gii bir metin ya'mak iin bu ü tag$n kuan$m$i#e/

,b.,i.,u.oyu e+ik -e ati'gii,2u.,2i.,2b.

18A

8/20/2019 10 Bolum HTML

8/20

%ont KullanımıHTMLde fontar ,font. tag$ ie tan$man$r!

,font fa6eEFIerdanaF #i'eEF>F 6oorEFJ008080F.eneme,2font.

uan$a6ak fontun i#mi 3fa6e4 ö'ei+i ie tan$man$r! Kontbüyükü+ü 3#i'e4 ö'ei+i ie tan$man$r! enk i#e 36oor4 ö'ei+i ietan$man$r! enk ek#ede#ima kodara odu+u gibi rengin ingii'6ekar%$$+$n$ ya'arak ta tan$manabiir! Hek#ede#ima kodamada Jkarakterinden #onra #$ra#$ya k$rm$'$ ye%i -e ma-i renkerin de+ereritan$man$r! enk bu ü teme rengin kar$%$m$ndan ede ediir! :rne+ink$rm$'$ renk iin 6oorEFJff0000F ya da 6oorEFredF kuan$abiir!

&e'im !kleme

"eb #ayfa#$na re#im ekemek iin ,img. tag$ kuan$$r!

,img borderEF0F #r6EFre#im!gifF aignEFeftF &idtEF?>9FeigtEF>A?F atEFLogoF.

e#im ad$ 3#r64 ö'ei+i ie tan$man$r!5ign ö'ei+i re#mi i'aamak iin kuan$$r! ;oa ya#amak iin 3eft4

#a+a ya#amak iin 3rigt4 -e ortaamak iin 36enter4 kuan$$r! 3&idt4 re#min geni%i+ini 3eigt4 yük#eki+ini tan$mar! 3at4 ö'ei+i ie fare ime6i re#im ü'erine gedi+inde görüne6ek metinbeirenir!

 3border4 i#e re#min ere-e ka$n$+$n$ beiremek iin kuan$$r!

Link !kleme

Herangi bir tm #ayfaya re#me ya da erangi bir do#yayaink -ermek iin ,a. tag$ kuan$$r! :rne+in ;üeyman emire

ni-er#ite#ine ink -ermek iin/,a refEFttp/22&&&!#du!edu!trF.;üeyman emireni-er#ite#i,2a.

 3ref4 ie ink -erie6ek ur #ayfa ya da do#ya ad$ tan$man$r!*ir HTML #ayfaya ink -erie6ek#e ,a refEF#ayfa!tmF. %ekindekuan$$r! =+er do#ya bir ü#t di'indey#e ,a refEF!!2#ayfa!tmF.%ekinde kuan$$r!

18

8/20/2019 10 Bolum HTML

9/20

Link -ermek iin re#im kuan$a6ak#a/

,a refEFttp/22&&&!#du!edu!trF.,img borderEF0F #r6EFre#im!gifF aignEFeftF &idtEF?>9F

eigtEF>A?F atEFLogoF.,2a.

Linkin yeni #ayfada a$ma#$ iin i#e %öye bir kod ya'$abiir/

,a refEFttp/22&&&!#du!edu!trF targetEFNbankF.;üeymanemire ni-er#ite#i,2a.

*ir #ayfa iinde fark$ k$#$mara ink -ermek iin ik ön6e#ayfadaki ink -erie6ek yerer tan$manma$d$r! :rne+in #ayfam$'daiindekier böümüne ink -ereim! indekierin ba%ad$+$ yere

,a nameEFi6indekierF.indekier,2a.

 ya'$$r! *uraya ink -ermek iin i#e

,a refEF Ji6indekierF.indekier,2a.

kuan$$r!

Ta(lolar

Taboar ,tabe. tag$ ie ou%turuur! Tabo ou%turuurken ön6e tabo#at$rar$ ,tr. tag$ ie ou%turuur! ;onra ou%turuan #at$r ,td. tag$ ieü6reere böünür! Tabo iine ya'$a6ak bigier ,td. -e ,2td. tagar$ara#$na ya'$$r!

,tabe borderEF1F.,tr.,td.#at$r 1 ü6re 1,2td.,td.#at$r 1 ü6re >,2td.

,2tr.,tr.

,td.#at$r > ü6re 1,2td.,td.#at$r > ü6re >,2td.

,2tr.,2tabe.

187

8/20/2019 10 Bolum HTML

10/20

 3border4 ö'ei+i tabonun ere-e#inin ka$n$+$n$ beirer! 0de+eri -eriir#e tabo ere-e#i gö'ükmeye6ektir!

 36epadding4 ü6re kenarar$ ie ya'$ar ara#$ndaki bo%u+u beirer!uan$m$/

,tabe borderEF1F 6epaddingEFAF.

 36e#pa6ing4 ü6reer ara#$ndaki bo%u+u beirer! uan$m$/

,tabe borderEF1F 6e#pa6ingEFAF.

188

8/20/2019 10 Bolum HTML

11/20

Tabonun boyutar$ ü6re iindeki metinerin büyükü+üne görebroer taraf$ndan beirenir! Tabonun boyutar$ #abit tutumaki#teniyor#a 3&idt4 -e 3eigt4 ö'eikeri kuan$$r! 3&idt4 -e 3eigt4 de+ereri yü'de -e pik#e omak ü'ere iki %ekide beirenir! =+er yü'deoarak tan$man$r#a tabo boyutu broer pen6ere#inin boyutuna görede+i%ir! Cik#e oarak tan$man$r#a tabo boyutu #abit our! =+er taboboyutu pen6ere boyutundan büyük#e tabonun bir k$#m$gö'ükmeye6ektir! Bü'de oarak tan$man$r#a/

,tabe borderEF1F &idtEF90OF eigtEF80OF.

Cik#e oarak tan$man$r#a/,tabe borderEF1F &idtEF>A0F eigtEF100F.

189

8/20/2019 10 Bolum HTML

12/20

Hü6reerin boyutar$n$ ayaramak iin i#e 3&idt4 -e 3eigt4 ,td.tag$ya kuan$ma$d$r!

Tabo iindeki metinerin i'aanma#$ iin 3aign4 ö'ei+ikuan$$r!*ir #at$rdaki tüm ü6reerdeki metinerin i'aanma#$ iin ,tr. tag$yakuan$$r! :rne+in/

,tr aignEF6enterF.,td.,2td.,td.,2td.,2tr.

%ekinde kuan$abiir! ;ade6e bir ü6redeki metinerini'aanma#$ iin ,td. tag$ya kuan$$r! :rne+in/

,tr.,td aignEF6enterF.,2td.,td.,2td.,2tr.

Tabonun arkapan rengini de+i%tirmek iin 3bg6oor4 ö'ei+ikuan$$r! Tabonun tamam$n$n arkapan rengini de+i%tirmek iin/

,tabe borderEF1F bg6oorEFJ

8/20/2019 10 Bolum HTML

13/20

Hü6re yük#eki+inin di+er ü6reerden daa fa'a oma#$ iin 3ropan4 geni%i+inin daa fa'a oma#$ iin 36o#pan4 kuan$$r!

)*ol'+an, kullanımı

,tabe borderEF1F.,tr.

,td.1! ü6re,2td.,td 6o#panEF>F.>! ü6re,2td.

,2tr.,tr.

,td.?! ü6re,2td.,td.@! ü6re,2td.,td.A! ü6re,2td.

,2tr.,2tabe.

)ro-'+an, kullanımı

,tabe borderEF1F.,tr.,td ropanEF>F.1! ü6re,2td.,td.>! ü6re,2td.,td.?! ü6re,2td.

,2tr.,tr.

,td.@! ü6re,2td.,td.A! ü6re,2td.

,2tr.

,2tabe.191

8/20/2019 10 Bolum HTML

14/20

Yatay $igiBatay i'gi ou%turmak iin ,r. tag$ kuan$$r! *u tag$ kapatmayagerek yoktur! :rne+in/

,tm.,ead.,tite.eneme,2tite.,2ead.,body.

,p.eneme,2p.

,r.,p.bir iki ü,2p.

,2body.,2tm.

19>

8/20/2019 10 Bolum HTML

15/20

Li'teler.ü Li'telerü' i#teere ba%amak iin ,u. i#te eemanar$n$ ou%turmak iin i#e

,i. tag$ kuan$$r! ,i. tag$n$ kapatmaya gerek yoktur! :rne+in/,u.

,i.=ma,i.5rmut,i.Cortaka

,2u.

/umaralı Li'teler

Gumara$ i#teere ba%amak iin ,o. i#te eemanar$n$ ou%turmakiin i#e ,i. tag$ kuan$$r!

,o.,i.=ma,i.5rmut,i.Cortaka

,2o.

19?

8/20/2019 10 Bolum HTML

16/20

;at$rar$n numaraar$n$ de+i%tirmek iin -aue ö'ei+i kuan$$r!

Tanımlama li'teleri

Tan$mama i#teeri bir terim -e a$kama#$ buunan i#teeriou%turmak iin kuan$abiir! Tan$mama i#teerine ba%amak iin,d. terim ya'mak iin i#e ,dt. terimin a$kama#$n$ ya'mak iin,dd. tag$ kuan$$r! *u tagar$ kapatmaya gerek yoktur!

,d.,dt.Kire&a,dd.:'e a+ kaynakar$n$ di+er a+ kuan$6$ar$ndankorumak iin bir geit #unu6u#una yere%tirien uyguama!,dt.Kiber opti6

,dd.6am pa#tik kabo ya da fiber ü'erinde ieti%imin $%$kdarbeeri ie yap$ma#$n$ #a+ayan teknooDi -e ortam!

,2d.

Sayfa 0ellikleriSayfa 1emin &engi 2e &e'mi;ayfan$n 'emin rengini de+i%tirmek iin ,body. tag$n$n 3bg6oor4'emin re#mi ekemek iin 3ba6kground4 ö'eikeri kuan$$r! :rne+in/

,body bg6oorEFJKKKKKKF ba6kgroundEFre#im!gifF.

Sayfa Kenar Boşlukları

19@

8/20/2019 10 Bolum HTML

17/20

;ayfan$n kenar bo%ukar$ ,body. tag$n$n margin ö'eikeri ieayaran$r! ;o kenardan bo%uk 3eftmargin4 ü#tbo%uk i#e 3topmargin4 ö'ei+i ie ayaran$r! :rne+in/

,body topmarginEF10F eftmarginEF10F.

0el Karakterler*a'$ karaktereri ya'mak iin kodar$n$ kuanmak gerekir! HTML

kodar$ ieri#inde ne kadar bo%uk kuan$$r#a kuan$#$n #ade6e birtane bo%uk görüntüenir! ;ayfa ieri#inde ard arda geen bo%ukya'mak iin 3Qnb#p4 kuanmak gerekir!

Sem(ol Kod 0rnekPopyrigt Q6opy R

egi#tered trademark Qreg STrademark QJ8@8>

üük Qt ,*üyük Qgt .

5mper#and Qamp Q  *o%uk Qnb#pT$rnak QUuot F

3SSP;; (Pa#6ading ;tye ;eet#) HTMLnin ba'$ ek#ik yönerini kapatmak

ama6$ya gei%tirimi%tir!;tier ,ead. ,2ead. tagar$ ara#$nda tan$man$r! P;;dekiö'eikerin de+ereri ya'$$rken t$rnak i%areti kuan$ma'! :rne+in#ayfan$n ö'eierini P;; ie de+i%tirmek iin/

,#tye typeEFtext26##F.body V 6oor/ ba6k ba6kground/ &ite W

,2#tye.

*urada 36oor4 metnin rengini 3ba6kground4 i#e arkapan rengini

beirer!

Metin BiçimlendirmeP;; ie metin biimendirmeyi bir örneke a$kaya$m/

,#tye typeEFtext26##F.p V fontXfamiy/ -erdana Yaramond fontX#i'e/10pt

6oor/greenW,2#tye.

19A

8/20/2019 10 Bolum HTML

18/20

Bukar$daki örnekteki #ti ie paragrafar$n biimi de+i%tirimi%tir!,p. tag$ kuan$d$+$nda bu #tier geeri our! *u #ayede erparagrafta metnin biimini beirtmeye gerek kama' ,p. tag$n$kuanmak yeteridir! Kont türü 3fontXfamiy4 ö'ei+i ie tan$man$r! k

oarak tan$manan font kuan$$r bu font kuan$6$n$n bigi#ayar$ndayok#a ikin6i font kuan$$r! Kont büyükü+ü 3fontX#i'e4 rengi i#e 36oor4 ö'ei+i ie tan$man$r!a$n ya'$ iin 3fontX&eigt/ bod4 e+ik ya'$ iin 3fontX#tye/ itai64 kuan$$r!=+er er paragrafta ayn$ #tii kuanmak i#temiyor#an$' a%a+$daki gibikuanma$#$n$'!

,tm.,ead.

,tite.eneme,2tite.,#tye typeEFtext26##F.

p!ya'i V fontXfamiy/ -erdana Yaramond fontX#i'e/10pt 6oor/greenW,2#tye.,2ead.,body.

,p 6a##EFya'iF.Meraba,2p.,2body.,2tm.

,p. tag$nda odu+u gibi #tier di+er tagara da kuan$abiir!=+er #tandart tagar kuan$madan #tier kuan$mak i#teniyor#a/

,tm.,ead.,tite.eneme,2tite.,#tye typeEFtext26##F.

di-!ya'i V fontXfamiy/ -erdana Yaramond fontX#i'e/10pt 6oor/greenW,2#tye.,2ead.,body.

,di- 6a##EFya'iF.Meraba,2di-. ünya

,2body.,2tm.

19

8/20/2019 10 Bolum HTML

19/20

e#imde görüdü+ü gibi ,2di-. tag$ndan #onra ya'$anar bir at

#at$rdan de-am eder! *u durum i#tenmiyor#a 3#pan4 kuan$ma$d$r!:rne+in/

,tm.,ead.,tite.eneme,2tite.,#tye typeEFtext26##F.

#pan!ya'i V fontXfamiy/ -erdana Yaramond fontX#i'e/10pt 6oor/greenW

,2#tye.

,2ead.,body.

,#pan 6a##EFya'iF.Meraba,2#pan. ünya,2body.,2tm.

Linkler197

8/20/2019 10 Bolum HTML

20/20

Linkerin e%iti ö'eikeri de P;; ie de+i%tiriebiir! :rne+in/

,tm.

,ead.,tite.eneme,2tite.,#tye typeEFtext26##F.

a/ink V textXde6oration/none 6oor/ rgb(0 0 0) Wa/-i#ited V textXde6oration/none 6oor/ rgb(1A? 0

1A?) Wa/a6ti-e V textXde6oration/none 6oor/ rgb(>AA 0

10>) Wa/o-er V textXde6oration/underine 6oor/ rgb(0 9AA) W

,2#tye.,2ead.,body.

,a refEFttp/22bimmag!#du!edu!trF.*MMaga'in,2a.,2body.,2tm.

*urada 3ink4 'iyaret edimemi% 3-i#ited4 'iyaret edien

 3a6ti-e4 t$kan$n6a 3o-er4 mou#e ime6i ü'erine getiriin6e inkinö'eikerini tan$mar! 3textXde6oration4 ie at i'ginin durumutan$man$r 3rgb4 ie de renk tan$man$r (k$rm$'$ ye%i -e ma-irenkerin kar$%$m$)!

198