Her Yönüyle HTML5

7/26/2019 Her Ynyle HTML5

1/368


2/368

1 HTML5E GRfi 1Genel Bakfl 1

HTML5in Yaps 2Yeni DOCTYPE Bildirimi 3

Yeni Character Set Bildirimi 4

HTML5 Sz Dizimi Kurallar 6

HTML5 iin Tarayc Destei 8

Tarayc Grntleme Motoru (Layout Engine) ve

JavaScript Motoru (JavaScript Engine) 9

Firefox 10

Opera 10

Internet Explorer 10Safari 11

HTML5 ile Yeni Tanmlanan Elemanlara ve

zelliklere Tarayclarn Verdii Destek 12

Dier Specifications (W3C Bildirimleri) ve

Teknolojilere Tarayclarn Verdii Destek 15

HTML5 Dili erisindeki Tm Etiketlerin Listesi 15

2 YEN ELEMANLAR VE ZELLKLER 21

Standart zellikler 22accesskey 22

class 22

contenteditable 24

contextmenu 26

dir 26

draggable 26

dropzone 26

id 27

lang 28spellcheck 28

style 29

tabindex 30

title 30

hidden 30

HTML5in Getirdii Yeni Elemanlar 30

NDEKLER

+HTML5-icindekiler 6/17/11 4:23 PM Page vii


3/368

Yapsal Elemanlar 30

31

32 32

35

37

41

44

46

Dier Elemanlar 50

50

51 53

53

54

3 HTML5 VE JAVASCRIPT 55querySelector() 57

querySelectorAll() 64

getElementsByClassName() 71

Seici Metotlarn Desteklemeyen

Tarayc Srmleri iin zm 75Sonu 82

4 HTML5 ve CSS3 87CSS3 Selectors 87

Structural Pseudo-Classesn

(Yapsal Szde Snflar) ncelenmesi 97

:nth-child() 97

:nth-of-type() 101

:nth-last-child() 104

:nth-last-of-type() 106

:first-child ve :last-child 108

:first-of-type ve :last-of-type 110

:only-child, :only-of-type, :root ve :empty 111

Yapsal Szde Snflar in Tarayc Destei 113

HER YNYLE HTML5viii

+HTML5-icindekiler 6/17/11 4:23 PM Page viii


4/368

5 HTML5 VE WEB FORMLARI 115Form Nesnesi 116

Input Eleman zellikleri ve Type Tanmlamalar 118Input Eleman 18

autocomplete 119

list 119pattern 122

placeholder 125

required 125Form Elemanna Ait zellikleri Tekrar Tanmlayan zellikler 126

Type Tanmlamalar 128

button 128checkbox 128

password 128radio 128

image 128

submit 129text 129

reset 129

file 129hidden 129

email 129search, url ve tel 131

number 132

range 133color 134

date, month, week, time, datetime-local, datetime [HTML5] 140

6 CANVAS 143getContext() 144

toDataUrl() 145Canvas RenderingContext2D (2 Boyutlu izim Alan) Nesnesi

zellik ve Metotlar (izim Oluflturmak) 147

Canvas Koordinat Sistemi 147

context2D Nesnesi zellikleri 149

canvas 149

strokeStyle ve fillStyle 150

NDEKLER ix

+HTML5-icindekiler 6/17/11 4:23 PM Page ix


5/368

globalAlpha 153

globalCompositeOperation 156

shadowColor, shadowOffsetX, shadowOffsetY,shadowBlur 160

lineWidth, lineCap, lineJoin ve miterLimit 162

context2D Nesnesi Metotlar 167

save() ve restore() 167

Dikdrtgen izim Metotlar 170

fillRect() 170

strokeRect() 172

clearRect() 174

Path Metotlar (Karmaflk fiekiller izmek) 175beginPath() 175

moveTo() 175

lineTo() 178

quadraticCurveTo() 179

bezierCurveTo() 180

closePath() 182

arc () 184

rect () 190

fill() ve stroke() 192clip() Metodu 193

Gradient ve Pattern Metotlar 194

addColorStop() 194

createLinearGradient() 195

createRadialGradient() 198

createPattern() 204

Transformation Metotlar 206

scale() 207

rotate() 209translate() 211

transform() ve setTransform() 212

Canvas zerinde Metin fllemleri 215

font, textAlign, textBaseline zellikleri 215

fillText() ve strokeText() 218

measureText() 220

HER YNYLE HTML5x

+HTML5-icindekiler 6/17/11 4:23 PM Page x


6/368

Resimlerle alflmak 221

drawImage() Metodu 221

Pixel Manipulation 227createImageData() 227

getImageData () 229

putImageData() 231

Canvas ile Animasyon Temelleri 249

Nesnelerin Yatay ya da Dikeyde Dz

Bir izgi zerinde Hareket Ettirilmesi 249

Nesnelerin Yatay ve Dikeyde Beraber Hareket Ettirilmesi 255

Nesnelerin Dairesel Olarak Hareket Ettirilmesi 266

Tarayc Destei 2777 HTML5 VE SVG 281

SVG ve HTML5 Kullanm 281

Dikdrtgen izimi 283

Daire izimi 285

Elips izimi 285

izgi izimi 286

oklu izgi izimi 287

okgen izimi 287

Yol izimi 288

8 HTML5 AUDIO VE VIDEO ELEMANLARI 291 291

src 292

controls 292

autoplay 293

preload 293

loop 293

294

poster 294

295

HTMLMediaElement Arayz ile Tanmlanan zellikler ve Metotlar 298

zellikler (Properties) 298

Metotlar 301

canPlayType() 301

NDEKLER xi

+HTML5-icindekiler 6/17/11 4:23 PM Page xi


7/368

load() 303

play() 303

pause() 303Medya eriini Kontrol Etmek iin Kullanlabilecek Olaylar 307

HTML Event Handlers (HTML Olay Ynlendiricileri) 308

DOM Level 0 Event Handlers 308

DOM Level 2,3 Event Listener 309

9 SRKLE-BIRAK fiLEMLER ARAYZ (DRAG and DROP API) 321dataTransfer Nesnesi 321

dataTransfer Nesnesi zellikleri 321

dataTransfer Nesnesi Metotlar 322

DragEvent (Srkleme Olaylar) 323

10 GEOLOCATION API 331geolocation Nesnesi 331

getCurrentPosition() 332

watchPosition() 333

clearWatch() 334

position Nesnesi 334

coords Nesnesi 334

positionError Nesnesi 335

positionOptions Nesnesi 337

Online Harita Servislerini Kullanmak 338

Tarayc Destei 344

11 WEB STORAGE 345sessionStorage (Oturum Depolama) 345

localStorage (Yerel Depolama) 346

Storage Nesnesi (sessionStorage, localStorage) zellik ve Metotlar 346

setItem() 346

getItem() 346removeItem() 347

clear() 347

key() 347

length zellii 348

Tarayc Destei 356

HER YNYLE HTML5xii

+HTML5-icindekiler 6/17/11 4:23 PM Page xii


8/368

Yayn Datm Yazlm ve Eitim

Hizmetleri San. ve Tic. Ltd. fiti.

brahimelikbilek

HER YNYLEHTML5

+HTML5-kunye 6/17/11 4:21 PM Page i


9/368

KODLAB 53

HER YNYLE HTML5

BRAHM ELKBLEK

ISBN 978-605-4205-48-6

Yaynclk Sertifika No: 13206

1. Bask: Haziran 2011

Yayn Ynetmeni: Uur Geliflken

Sayfa Dzeni: Mehmet ztrk

Satfl: Hseyin stnel

Bask: fiefik Basm ve Yaynclk San. Tic. Ltd. fiti. Tel: (212) 549 62 62

Bu kitabn btn yayn haklar Kodlab Yayn Datm Yazlm ve Eitim Hizmetleri

San. ve Tic. Ltd. fiti.ne aittir. Yaynevimizin yazl izni olmakszn ksmen veya ta-

mamen alnt yaplamaz, kopya ekilemez, oaltlamaz ve yaynlanamaz.

KODLAB Yayn Datm Yazlm ve Eitim Hizmetleri San. ve Tic. Ltd. fiti.

Alemdar Mah. Salkm St Sok. Aa fl Han

No: 20 Kat:1 D: 3 Sultanahmet / STANBUL

tel: (212) 514 55 66 fax: (212) 514 66 61

e-posta: [email protected] web: www.kodlab.com

+HTML5-kunye 6/17/11 4:21 PM Page ii


10/368

brahim elikbilek

1980 Kars doumludur. 2002 ylnda Frat niversitesi T.E.Fni bitirdi. eflitli eitim

kurulufllarnda yazlm uzmanl ile ilgili dersler verdi. 2005 ylnda Suflehri AtatrkEndstri Meslek Lisesine Bilgisayar retmeni olarak atand. 2009 Ylndan itibarenbu grevini Kocaelide srdrmektedir. JavaScript, CSS, DHTML, AJAX, ASP.NETve C# konularnda seminerler verdi ve makaleler yazd. Web programlama alanndabirok uygulama gelifltirdi. Ayrca yazarmzn daha nce KODLABtan JavaScript veXHTML ve CSS kitaplar kmfltr.

Yazarmz hakknda daha detayl bilgi almak iin;http://www.ibrahimcelikbilek.comadresini ziyaret edebilirsiniz.

+HTML5-kunye 6/17/11 4:21 PM Page iii


11/368

nszKitabn siz okurlarm iin faydal olmas dileiyle szlerime bafllamak istiyorum.

Kitap ierisinde HTML5 yaps ile birlikte bu yap ierisinde bulunan yeni eleman-lar, zellikler ve HTML5in duyurulmas ile beraber nemi artan ek teknolojilerhakknda genifl bilgiler bulabilirsiniz.

Konular iyice kavrayabilmek iin; kitap iinde verilen rnekleri dikkatlice incele-yip uygulamal ve bu rnekleri referans alarak yeni uygulamalar gelifltirmeye alfl-malsnz.

HTML5; html dili iin yeni stratejiler ve hedefler ortaya koyan ve farkl web taray-clar iin standardizasyonu amalayan yeni nesil bir srm olarak karflmza kmak-tadr. Olaya bu adan yaklaflrsak; bu dilin nmzdeki srete hzl bir flekilde ge-lifleceini ve poplaritesini daha da arttracan grebiliriz. Aslnda dilin sadece ken-disi deil kulland ek teknolojilerde geliflime ak olmakla beraber bu dile bykg katmaktadr.

Kitap ierisindeki konularn daha iyi anlafllmas bakmndan az da olsa JavaScriptve CSS bilgilerine sahip olmanz gerekmektedir. nk HTML5 yapsnn kullan-d programlama dili JavaScripttir. Bu adan HTML5 ile beraber JavaScript dili-nin hak ettii konuma geldiini dflnmekteyim.

HTML5 ya da dier programlama konular ile ilgili sorularnz www.kodlab.comsitesinde bulunan yazara sor ksmndan ya da www.ibrahimcelikbilek.comadresin-den bana iletebilirsiniz.

brahim elikbilek

Gerekli ProgramlarKitabn siz okurlarm iin faydal olmas dileiyle szlerime bafllamak istiyorum.

Kitap ierisindeki konular anlatlrken temelde kod mantn kavramanz hedeflen-mifltir. Kodlar rendikten sonra uygulamalar istediiniz herhangi bir programda,hatta bir metin editrnde bile gelifltirebilirsiniz. Profesyonel uygulamalar oluflturur-ken; gerek tasarm ekran, gerek sunduu yardmc aralar ve dier zellikleri ile ge-

liflmifl web sayfas editrlerini kullanmak iflinizi kolaylafltracaktr.Kitab verimli bir flekilde takip etmek iin kullanabileceiniz programlar flunlardr:

Aptana Studio 3:www.aptana.com adresinden indirebilirsiniz.

Expression Web 4: Deneme srmn www.microsoft.com/expression/ adresindenindirebilirsiniz.

Dreamweaver CS5.5: Deneme srmn www.adobe.com adresinden indirebilirsiniz.

iv

+HTML5-kunye 6/17/11 4:21 PM Page iv


12/368

Merhum Babam Ali Osman ELKBLEKin ansna...

v

+HTML5-kunye 6/17/11 4:21 PM Page v


13/368

vi

+HTML5-kunye 6/17/11 4:21 PM Page vi


14/368

Genel BakflHTML5, html dilinin en son srmdr. Modern web uygulamalar gelifltirmekiin yeni eklentiler ve zellikler sunar. HTML5; html dili iin yeni stratejiler ve he-defler ortaya koyan ve farkl web tarayclar iin standardizasyonu amalayan ye-ni nesil bir srm olarak karflmza kmaktadr. HTML5 ile html dilinin ifllevselli-i, programlama ve sunum gc artmfltr. HTML5e yeni eklenen yapsal eleman-

lar sayesinde fazla kod yazmadan sitenizin grsel tasarmn yapabilir, JavaScriptve CSS3 teknolojilerini daha etkili bir flekilde kullanabilirsiniz. HTML5 tasarmc-larn web sayfalarnda zengin medya ierikleri kullanmalarna ve interaktif web uy-gulamalar gelifltirebilmelerine olanak salayan yeni elemanlar, zellikler ve tekno-lojiler barndrr.

HTML5 iinde bulunan tm teknolojiler aslnda HTML5 ile beraber yeni oluflturulanve duyurulan teknolojiler deildir. W3C tarafndan nceden oluflturulmufl ve modernweb tarayclar tarafndan ksmen desteklenen bir takm teknolojilerde (rnein;SVG-Scalable Vector Graphics) HTML5 ierisine dahil edilmifltir. W3C HTML5 di-

lini gelifltirmeye devam etmektedir bu adan ilerleyen zaman dilimlerinde dile yenieklentilerin olmas muhtemeldir. Ayrca HTML5 dilinin dier bir avantaj da,HTML5 dili iinde bulunmayan fakat HTML5in duyurulmas (kullanlmas) ile be-raber etkinlii (nemi) artan (artacak olan) dier teknolojilerin de modern web tara-yclar tarafndan desteklenmeye bafllanmasdr. (rnein; WebGL, FileReader,Faster JavaScript, Geolocation APIgibi.)

HTML5E GRfi 1

+HTML5-BOLUM1 6/17/11 4:37 PM Page 1


15/368

Ksaca HTML5 dilini flyle zetleyebiliriz:

Sadelefltirilmifl, dzeltilmifl HTML4 ve XHTML dillerinin son srmdr.

Daha fazla yapsal elemana, form elemanlarna ve yeni zelliklere sahiptir.

Geliflmifl multimedia destei sunmaktadr.

erisinde yeni teknolojiler barndrr ya da nceden var olan teknolojilerin kul-lanmn salar.

JavaScript ve CSS3 teknolojilerini daha etkili bir flekilde kullanmamz salar.

HTML5in nasl ortaya kt ile ilgili ksa bir bilgi verelim...

1999 ylnda W3C (Word Wide Web Consortium) tarafndan HTML 4.01 duyurul-

mufltur. HTMLin bu srmnden ksa bir sre sonra XML 1.0 yaps yaynland.W3C HTML dilini XML tabanl yapmak iin bu iki yapy birlefltirdi ve 2001 yln-da XHTML 1.0 olarak duyurdu. 2003 ylnda W3C tarafndan XForms 1.0(XHTML Extended Forms) yaynlanarak var olan XHTML yaps glendirilmekistendi. W3C yazarlarnn dflncesi XHTML yapsnn gelifltirilmesi ve ek tekno-lojilerle desteklenmesi fleklindeydi (XHTML2+XForms+SVG+MathMl+RDFa).Bu yap tarayc reticileri tarafndan kabul grmedii iin 2004 ylnda Apple, Mo-zilla Foundation (Firefox) ve Opera tarayc reticileri bir araya gelerekWHATWG (Web Hypertext Application Technology Working Group) isimli bir

alflma gurubu oluflturdular. Aslnda HTML5in doufl hikayesi burada bafllamfltr.

2006 ylnda W3C konsorsiyumu XHTML dilini gelifltirmekten vazgeipHTML5in geliflimine katlacan duyurdu. 2008 ylnda W3C tarafndanHTML5in (First Public Working Draft) ilk alflma tasla duyuruldu. W3C kon-sorsiyumu 2009 ylnda XHTML 2.0 alflmalarn durduracan aklamfltr.

HTML5in YapsHTML5in temel elemanlar iin getirdii yeniliklere bakalm;

HTML5

HER YNYLE HTML52



16/368

Yeni DOCTYPE Bildirimi

Belge trn ayarlamak iin kullandmz bu etiket, HTML5 ile daha ksa ve kulla-nfll bir hale getirilmifltir. rnein; XHTML 1.0da belge tr flekilde ayarlana-biliyordu ve tanmlama olduka uzundu. HTML5, bu karmaflay ortadan kaldrmflve geriye doru uyumluluu (eski HTML srmleri ile) korumufltur. Bu etiketinHTML5 aa yaps iinde belgenin en baflnda tanmlanmas zorunludur.

fiimdi nceki HTML srmlerinde yaplan DOCTYPE tanmlamalarna bakalm.XHTML 1.0 DOCTYPE (Transitional) tanmlamas:

XHTML 1.0 DOCTYPE (Strict) tanmlamas:

HTML 4.01 DOCTYPE (Strict) tanmlamas:

Dikkat ederseniz tanmlamalar olduka uzun ve aslnda Strict olan yaplar geriye do-ru uyumluluu desteklemiyor. rnein; sayfanzda XHTML 1.0 DOCTYPE (Strict)tanmlamasn kullanrsanz. Belge ierisinde sadece XHTML 1.0 srmnde varolan (desteklenen) etiketleri ya da zellikleri kullanmanza izin verilir. Strict tanm-lamas yaparsanz nceki HTML srmlerinde var olan fakat XHTML 1.0 tarafndan

desteklenmeyen etiket ya da zellikleri kullanmanza izin verilmez. flte bu durum,Strcit yapsnn geriye doru uyumlu olmad anlamna gelir.

Belge ierisinde DOCTYPE tanmlamasn yapmazsak, tarayc sayfay QuirksModda alfltracaktr. Tam da burada tarayc modlar ile ilgili bilgi vermek istiyo-rum. Tarayc modlar taraycnn web sayfasn nasl yorumladn/yorumlayaca-n gsterir. IE5/MAC srm ile beraber tarayclarda gsterilecek web sayfalarnn

HTML5E GRfi 3



17/368

standartlara uymas beklenmifltir. Standartlara bal kalnmadan yazlan eski websayfalarnn tarayclar tarafndan gsterilebilmesi iin IE5 ile beraber Microsoft

DOCTYPE kavramn ortaya atmfltr. Buna gre web belgesinin en baflnda DOCTYPEtanmlamas olan sayfalar standart modda, DOCTYPE tanmlamas olmayan (eskisayfalar) tuhaf modda alflr. Dier tarayc firmalarnn da benimsemesi ile Tara-yc Modlar kavram ortaya kmfltr.

Standard olarak tane tarayc modu bulunmaktadr. fiimdi bunlar inceleyelim.

Quirks Mode: DOCTYPE tanmlamasn yapmazsak taraycnn sayfay QuirksModda alfltracan sylemifltik. Bu durumda sayfanz oluflturulurken taray-c W3C standartlarna bal kalmaz. Sayfa grnm ya da elemanlarn yerle-

flimi kullanlan taraycya bal olarak deifliklik gsterebilir. DOCTYPE tanmla-mas yapmamfl iseniz; web sayfanz taraycnn var olan eski kurallarna gredeerlendirilecek ve taraycda oluflturulacaktr. Tarayc, Quirks modda alfl-tnda farkl tarayclarda CSS zelliklerinin doru olarak sayfa elemanlarnauygulanmasnda farkl problemler kabilmektedir. Ayrca tarayc QuirksModda kurallara bamllk asndan daha esnek davranacaktr. rnein;DOCTYPE tanmlamas yapmazsanz IE6 ve alt srmleri W3C kutu modeli ye-rine kendi kutu modelini kullanr.

Standart Mode: DOCTYPE tanmlamas yaparak sayfamzn tarayc tarafndan

standart modda gsterileceini belirtmifl oluruz. Standart modda tarayclarstandartlara dayal sayfamz yorumlayacaktr. Standart modda tarayc sk birdenetim yapar ve sayfa grnts oluflturur. HTML5 bildiriminde no quirksmode olarak adlandrlmfltr.

Almost Standart Mode: Standart mod ile hemen hemen ayn olan bu mod;Opera, Safari, Chrome, Firefox ve IE8 tarafndan desteklenmektedir. HTML5bildiriminde limited quirks mode olarak adlandrlmfltr.

Yeni Character Set Bildirimi

Meta etiketi etiketleri arasnda bildirilir ve sayfa hakknda tarayclara yada arama motorlarna bir takm bilgiler sunar. charset zellii belge ierisindekullanlacak karakter seti (kmesi) tanmlamas iin kullanlr.

nceki HTML srmlerinde charset tanmlamasnn nasl yapldna bakalm.

HER YNYLE HTML54



18/368

meta etiketinin zelliklerine ksaca bakalm. (Standart zellikler 2. Blmde an-

latlacaktr.)

name: Meta etiketi ierisinde deer atanacak nceden tanml alt zellik isimle-rini tanmlamak iin kullanlr. Bu zellikle tanmlanan alt zellie deer ata-mak iin content zellii kullanlr.

name zelliine atanabilecek alt zellikler aflada listelenmifltir.

application-name: Uygulama adn tanmlamak iin kullanlr.

author: Web sayfasn oluflturan kifli hakknda bilgi tanmlamak iin kullanlr.

description: Sayfa ierii ile ilgili tanmlayc bir bilgi (aklama) tanmla-mak iin kullanlr.

generator: Sayfann oluflturulduu program (yazlm) ile ilgili bilgi tanmla-mak iin kullanlr.

keywords: Arama motorlar iin virglle ayrlmfl anahtar kelimeler tanmla-mak iin kullanlr.

rnek:

Yukardaki bildirim web sitesi ile ilgili arama motorlar iin anahtar kelimelertanmlar. Ayrca WHATWG MetaExtensions ile tanmlanan afladaki altzellikleri de kullanabilirsiniz.

creator, googlebot, publisher, robots, slurp, viewport

http-equiv: default-style, refresh alt zelliklerini deer atamak iin ta-nmlar. Belirtilen alt zelliklere content zellii ile deerler atanr.

default-style: Alternatif stil tanmlamas yapmak iin kullanlr.

refresh: Belirtilen sre sonunda sayfay tekrar yklemek ya da kullancybaflka bir URL adresine ynlendirmek iin bu alt zellii kullanabilirsiniz.

rnek:

Mevcut sayfa yklendikten 5 sn sonra kullanc url ile belirtilen adrese ynlen-dirilecektir.

HTML5E GRfi 5



19/368

content: http-equiv ya da name zelliklerinde tanmlanan alt zelliklere de-er atamak iin kullanlr.

charset (HTML5): Sayfada kullanlan karakter seti (kmesi)ni tanmlamakiin kullanlr. HTML5 ile yeni tanmlanan bir zelliktir. Aslnda UTF8 kul-lanmak ou zaman yeterli olacaktr. Sayfanz iin bir charset tanmlamasyapmazsanz sayfanzdaki karakter ya da sembollerin gsteriminde problem ya-flayabilirsiniz. charset ile karakter setini tanmlamak aslnda tarayclarn ka-rakter ya da sembolleri dzgn bir flekilde gstermeleri iin kullanlan algorit-mann bir parasdr.

HTML5 bildiriminde; meta etiketinin scheme zellii ve http-equiv zellii-nin content-type, content-language, set-cookie alt zelliklerinin kullanl-

mas nerilmemektedir.

HTML5 Sz Dizimi KurallarHTML5, XHTML gibi XML temelli olmad iin programclara ok gevflek birsz dizimi yaps sunar. rnein; bir HTML5 sayfas olufltururken html, head,body etiketlerini belirli flartlar altnda kullanmayabilirsiniz. Bu durumda sizin yaz-madnz html, head, body etiketleri tarayc tarafndan sayfaya dahil edilecektir.Ancak bu durum kullanfll deildir. nk bu durumda IEde problemler yaflabili-riz. Afladaki uygulamamz HTML5in ne kadar esnek bir sz dizimi olduunu

gstermek iin yapyorum. Biz uygulamalarmzda html, head, body elemanlarnHTML5 temel aa yaps ierisinde her zaman kullanacaz. Afladaki rneifarkl tarayclarda alfltrp sonuca bakalm.

Her Ynyle HTML5

HTML5in Getirdikleri

HER YNYLE HTML56

Firefox (Firebug)



20/368

Dikkat ederseniz Firefox ve Opera sayfay gsterirken; html, head, body eleman-larn sayfaya dahil etti. Bunun yannda IE8 yazlmayan html, head, body etiketle-rinin sadece alfl taglarn oluflturulur.

HTML5in sz dizimi kurallarna bakalm...

1. Alan tm etiketler kapatlmaldr. Baz etiketler bir ierik barndrmaz, sakla-dklar ierikler etiketin bir zellii ile tanmlanr. Bu durumda etiket alfl ta-gnda/ karakteri ile kapatlr. Burada flunu belirtmek isterim. Eer elemanmzvoid elements (alfl kapanfl taglar arasnda bir text (metin) ya da baflka bireleman bulunmayan, yani sadece alfl tag (etiketi) bulunan elemanlar; r-

nein; area, base, br, col, command, embed, hr, img, input, keygen, link,me-ta, param, source) ise bu durumda / karakterinin, bu elemanlar zerinde bir et-kisi olmayacaktr. Yani bu karakteri kullanmayabilirsiniz. Fakat elemanmz fo-reign elements (namespace-isim alan ieren elemanlar) ise bu durumda alfltag / karakteri ile kapatlmaldr.

rnek kullanmlar:

Link (Yanlfl, kapanfl etiketi yok.)

Aklama

(Yanlfl, kapanfl etiketi yok.)

Div eleman ierii (Doru.) (Doru.)

ya da (kisi de doru.)

HTML5E GRfi 7

NOT Tavsiye: Sadece alfl etiketi bulunan tm elemanlar kapatmadan nce / karakte-rini kullannz. rnein;

Opera (Dragonfly)



21/368

2. ie girmifl, bir biri ierisine yuvalanmfl elemanlarda elemanlarn kapanfl s-rasna dikkat edilmelidir. lk nce alan etiket, en sonda kapatlmaldr.

Div eleman ierii (Doru)Div eleman ierii (Yanlfl)

3. Etiket ierisinde kullanlan zellik isimleri byk ya da kk harfle yazlabilir.zelliin deeri kendisi ile ayn ismi taflyorsa sadece zellik ad yazlabilir.zellik deerleri eer bir boflluk iermiyorsa trnak ierisine alnmayabilir. Ya daisterseniz zellik isimlerini tek trnak ya da ift trnak ierisine alabilirsiniz.

rnek kullanmlar:

checked zelliinin deeri checked olduundan yazlmad. Sadece zellikad yazld.

alt zelliine atanan metin tek trnak ierisine alnarak yazld.

class zelliine atanan deer trnak ierisine alnmadan yazld.

Yukardaki kullanmlar HTML5 iin doru olarak kabul edilir.

Temiz (okunabilir), tutarl (az hatal) kodlar oluflturmak iin tavsiyelere uymanzneririm.

HTML5 iin Tarayc DesteiPeki, HTML5i tarayclar, ne kadar destekliyor?

Aflada ayrntl bir flekilde anlatacam ama flunu bilmenizi isterim. Yeni nesil ta-rayclar (Modern web tarayclarnn son srmleri), HTML5in yeni getirdii tek-nolojileri, elemanlar ve zellikleri destekleme konusunda hzl admlar atmaktadr-lar. Bu admlar sonucunda tarayclarn son srmleri (IE9, Firefox 4, Safari 5,Opera 11.11) HTML5i byk lde destekler duruma gelmifllerdir. HTML5e ta-rayclar tarafndan verilen destei sadece yeni elemanlar ya da zelliklere verilendestek olarak dflnmemek gerekir. Bu destek; CSS3, JavaScript eklentileri, DOM

HER YNYLE HTML58

NOT Tavsiye: Etiket ismi, etiket iinde kullanlan zellik ismi ya da zellie atanan de-erleri kk harfle yaznz. Deerleri ift trnak ierisine alarak zelliklere ataynz.



22/368

(Document Object Model) ve HTML5in duyurulmas (kullanlmas) ile beraber et-kinlii (nemi) artan (artacak olan) yeni ya da var olan teknolojileri de bir paket

olarak iermektedir. Bu nedenle aflada HTML5 teknolojisinin getirdii ya daHTML5 ile beraber kullanm artan/kullanm giren tm teknolojilerin tarayclartarafndan ne lde desteklendiine bakmfl olacaz.

Tarayc Grntleme Motoru(Layout Engne) ve JavaScrpt Motoru(JavaScrpt Engne)Tarayc grntleme motoru, web sayfasnn ieriini tarayc ekrannda olufltur-mak/gstermekle sorumludur. Tarayclar modler sistemi benimsemifllerdir. Bu

flu anlama gelir tarayc yaps genel olarak kullanc arayz ve ifl yapan arabirim-ler olmak zere ikiye ayrlabilir. Web taraycs gelifltiricileri aslnda grntlememotoru temelli tarayc olufltururlar. Tarayclar kendi oluflturduklar grntlememotorlarn kullanrlar ve bunlar gncellerler (Aslnda grntleme motorlarngncellediklerinde belirtilen tarayc iin yeni bir srm ortaya kmfl olur). Bugrntleme motorlarna dayal uygulamalar gelifltirirler. Bir taraycnn yeni tek-nolojileri desteklemesi; grntleme motorunun belirtilen teknolojileri destekle-mesi anlamna gelir. Tarayclarda kullanc arayzleri sadece grntleme moto-runun iflledii verileri kullancya gsteren ve kullanc ile iletiflimde bulunan bir

yap olarak tanmlanabilir.

Tarayclar, web belgesi ierisindeki JavaScript kodlarn yorumlamak ve ifllevleri-ni yerine getirmek (derlemek) iin kendi oluflturduklar JavaScript motorlarn (Ja-vaScript Engine) kullanlrlar (Bu JavaScript motorlarnn bir ksm ak kaynakkodludur). JavaScript yorumlayclar kullandklar bellek miktar ya da dier zel-likleri ile tarayc hzn etkileyen en nemli faktrlerin baflnda gelir.

Tarayclarn kullandklar grntleme motorlar, JavaScript yorumlayclar afla-da listelenmifltir.

HTML5E GRfi 9



23/368

FrefoxLayout Engine Ad: Gecko

OperaLayout Engine Ad: Presto

Internet ExplorerLayout Engine Ad: Trident

HER YNYLE HTML510

Gecko Versiyonu Tarayc Srm

Gecko 1.7 Firefox 1.0

Gecko 1.8 Firefox 1.5

Gecko 1.8.1 Firefox 2

Gecko 1.9 Firefox 3

Gecko 1.9.2 Firefox 3.6

Gecko 2 Firefox 4

(JS Yorumlaycs JgerMonkey)

Presto Versiyonu Tarayc Srm

1.0 Opera 7.0

2.0 Opera 9.0

2.1 Opera 9.52.1.1 Opera 9.6

2.2.15 Opera 10.0, Opera 10.1

2.5.24 Opera 10.5

2.6.30 Opera 10.6

2.7.62 Opera 11 (JS Yorumlaycs Carakan)

Trident Versiyonu Tarayc Srm

4.0 IE8

IE9 (JS Yorumlaycs Chakra)

5.0 Dier alt srmleri iinmodler bir isim belirtilmemifltir.



24/368

SafarLayout Engine Ad: WebKit

Yukardaki liste de Windows iflletim sistemi iin retilen Safari srmleri ve Web-Kit versiyonlar yazlmfltr.

Afladaki tablolarda tarayclarn tm versiyonlarnn; HTML5 etiket, zellik ve

teknolojilerini destek durumlarn daha iyi gstermek iin tarayclarn Layout En-gine versiyon numaralar kullanlmfltr.

Tablolardaki yeni eleman, zellik ya da teknolojinin karflsnda bulunan LayoutEngine srm ve daha sonra kan srmleri ilgili eleman, zellik ya da teknolo-jiyi destekler. Ayrca afladaki tarayc destek durumlar bu kitap yazld tarih iti-bariyle var olan durumdur.

HTML5E GRfi 11

WebKit Versiyonu Tarayc Srm

526.12.2 , 528.1.1 , Safari 4.0528.16 , 528.17

530.17 Safari 4.1

530.19.1 Safari 4.0.2

531.9.1 Safari 4.0.3

531.21.10 Safari 4.0.4

531.22.7 Safari 4.0.5

533.16 Safari 5.0

533.18.5 Safari 5.0.2

533.19.4 Safari 5.0.3 (JS Yorumlaycs Nitro)



25/368

HTML5 ile Yeni Tanmlanan Elemanlara vezelliklere Tarayclarn Verdii Destek

Yeni Yapsal Elemanlar

Yeni Media Elemanlar

HER YNYLE HTML512

Eleman Ad Internet Explorer Firefox Opera Safari

Trident 5.0 Gecko2 WebKit 533

Presto 2.7

Nightly Build* eklentisi le

Yok Yok

Yok Yok Yok Yok

Yok Yok Presto 2.7 Destei var

Yok Yok Yok Yok

Yok Yok Yok Ksmen

Yok Yok Yok Ksmen

, , Destei Var Yok Yok WebKit 533


Trident 5.0 Gecko1.9.1 Presto 2.5 WebKit 525(Firefox 3.5) (Safari 3.0)

IE 3.0 Gecko 1.7 Presto 1.0 Destei var

Win7 iin yok



26/368

Canvas Eleman

Belirtilen tarayclarn canvas elemann hangi zellik ve yntemlerini desteklediiBlm 6da ayrntl bir flekilde anlatlacaktr.

Yeni Form Elemanlar

Input Etiketinin Type zelliine Atanabilecek Yeni Deerler

HTML5E GRfi 13


Trident 5.0 Gecko1.9.2 Presto 2.0 Destei var


Yok

Destei var Presto 1.0 Destei var

YokNightly Build*eklentisi ile

Gecko 2.0 Presto 2.0

Deer Ad Internet Explorer Firefox Opera Safari

search Destei var

tel

urlemail

datetime

date

month Yok Presto 2.0

week

Time Yok

datetime-local

Number

range Destei var

color Presto 2.7 Win7 iin yok

Presto 2.7

WebKit 528

Gecko 2.0

Win7 iin yok



27/368

Input Etiketi iin Yeni zellikler

HER YNYLE HTML514

zellik Ad Internet Explorer Firefox Opera Safari

autocomplete Destei var (IE 8.0)

autofocus

form

height and Destei var (IE 8.0) Yok Presto 2.5.24width

list Gecko 2.0 Presto 2.0 Yok

min, max, step Yok Presto 2.0

multiple Presto 2.7

novalidate Presto 2.7

pattern Gecko 2.0 Gecko 2.0 Presto 2.0

placeholder Presto 2.7

required Presto 2.0 WebKit 528

formtarget

formaction

formmethod Presto 2.7

formenctype

formnovalidate WebKit 528

Gecko1.9.1(Firefox 3.5)

Yok Gecko 2.0

Presto 2.0

Destei var(Safari 4.0)

Nightly Build*eklentisi ile


min,maxNightly Build*eklentisi lestepWebKit 528

Gecko1.9.1(Firefox 3.5)Sadecetype=filein


Nightly Build*eklentisi ile

Yok

WebKit 528



28/368

Dier Specfcatons (W3C Bildirimleri) veTeknolojilere Tarayclarn Verdii Destek

HTML5 ile beraber gelen Standart (Ortak) zellikler ve elemanlar iin tanmlanandier yeni zellikler 2. Blmde anlatlacaktr.

HTML5 Dili erisindekiTm Etiketlerin Listesi

HTML5E GRfi 15

zellik Ad Internet Explorer Firefox Opera Safari

Selectors API Level1 Opera 10

Web Storage Opera 10.5

Web SQL Database Yok Yok Opera 10.5 Safari 3.2

WebSockets Yok Firefox 4 Opera 11 Safari 5

Web Workers Yok

Geolocation API Yok Firefox 3.5 Opera 10.6

Offline Web Applications Yok Safari 4

WebGl Yok Firefox 4 Yok Nightly Build*eklentisi ile

Drag-And-Drop Ksmen Firefox 3.5 Yok Destei var

IE8 Firefox 3.5

Safari 5

Safari 3

Etiket Durum

HTML5 tarafndan desteklenmiyor.


Yeni (HTML5)

Yeni (HTML5)

Yeni (HTML5)



29/368

HER YNYLE HTML516



Yeni (HTML5)


Yeni (HTML5)

Yeni (HTML5)

Yeni (HTML5)


Yeni (HTML5)



30/368

HTML5E GRfi 17

Yeni (HTML5)

Yeni (HTML5)


Yeni (HTML5)

, HTML5 tarafndan desteklenmiyor.

..

Yeni (HTML5)

Yeni (HTML5)

Yeni (HTML5)

Yeni (HTML5)



31/368

HER YNYLE HTML518

Yeni (HTML5)


Yeni (HTML5)

Yeni (HTML5)

Yeni (HTML5)

Yeni (HTML5)

Yeni (HTML5)

Yeni (HTML5)

Yeni (HTML5)




32/368

HTML5E GRfi 19

Yeni (HTML5)

Yeni (HTML5)



Yeni (HTML5)

Yeni (HTML5)

NOT HTML5 dili ierisine eklenen yeni etiketler ilerleyen blmlerde uygu-lamal olarak anlatlacaktr. Fakat HTML diline yeni bafllyorsanz,HTML5 yapsnda bulunan ve nceki HTML srmlerinden gelen eskietiketlerle ilgili bilgi almak iin; KODLABtan kan XHTML veCSS isimli kitabmdan faydalanabilirsiniz.



33/368

HER YNYLE HTML520



34/368

Bu blmde HTML5 ile beraber yeni tanmlanan elemanlar ve zelliklere bakacaz.Fakat daha nce ierik modeli ve tm elemanlarn sahip olduklar ortak zellikleri in-celeyelim.

HTML5 dilinde elemanlarn saklayabilecekleri ierikler guruplandrlmfl ve erikModeli (Content Models) olarak adlandrlmfltr. erik modeli elemanlarn ne e-flit bir ierie sahip olabileceklerini tanmlamak iin kullanlr. Bir eleman birden

fazla ierik trn destekleyebilir.HTML5 tarafndan tanmlanan ierik trleri flyledir:

YEN ELEMANLARve ZELLKLER 2

Content Type Aklama

Embedded Dfl kaynakl ve ya baflka bir etiketleme dili ile ya da programatikolarak (rnein; JavaScript ile Canvas eleman kullanm)tanmlanan ierikler. Bu ierik trn kullanan elemanlara rnek;, , , , , ,, ,

Flow Metin, baflka bir eleman ya da gml olarak tanmlanan ierikler.Bu ierik trn kullanan elemanlara rnek; , ,, , , , , ,,
, , , , ,, , , , , ,

Heading Bir blmn baflln tanmlayan ierikler. Bu ierik trn kullananelemanlara rnek; , , , , , ,



35/368

Standart zelliklerHTML5de her eleman afladaki ortak zelliklere sahiptir. fiimdi bu zelliklerinneler olduuna bakalm.

accesskey id

class lang

contenteditable [HTML5] spellcheck [HTML5]

contextmenu [HTML5] style

dir tabindex

draggable [HTML5] title

dropzone [HTML5] hidden [HTML5]

accesskey

Alabilecei Deer: {Karakter}

HTML elemanna klavye ksayolu tanmlamak iin kullanlr.

class

Ald Deerler: {SnfSeiciAd [*Birdenfazlasnf seiciad yazlabilir]}

Oluflturulmufl bir snf seiciyi HTML elemanna atamak (uygulanmasn salamak)iin kullanlr.

HER YNYLE HTML522

Sectioning , , , elemanlarnn ierik trdr.

Metadata , , , , , ,

, elemanlarnn ierik trdr. Sayfalarn grselliinive davranfllarn deifltirebilen ieriklerdir.

Phrasing Paragraflar oluflturan metin ya da baflka bir eleman olaraktanmlanan ierikler. Bu ierik trn kullanan elemanlara rnek;, , , , , , ,, , , , , , ,,

Interactive Kullanc ile etkileflim iin tanmlanmfl interaktif ierikler. Bu ieriktrn kullanan elemanlara rnek; , , ,, , , , ,



36/368

rnek:

class zellii

/*Bu Kitap boyunca uygulamalarda CSS ve JavaScript dilleri ile ilgili ksa ve uygulamayaynelik bilgiler verilecektir.*/

/*box-shadow zell ii; html eleman iin tanml olan kutuya glge efekti vermek iin kullanl rve CSS3 ile tanmlanan bir zelliktir.

Sz Dizimi:

box-shadow:inset ;

inset,blur-radius,spread-radius,color ; istee bal

:gerekli*/

.shadow{

margin-top:20px;

width:230px;

height:100px;

background-color:khaki;

/*Firefox 3.5 ve 3.6 iin*/

-moz-box-shadow:20px -10px crimson;

/*IE9 , Opera 10.5 , Firefox 4.0 iin CSS3 zell ii*/

box-shadow:20px -10px crimson;/*Safari iin*/

-webkit-box-shadow:20px -10px crimson;

/*IE9 alt srmleri iin*/filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=20,OffY=-10, Color=crimson, Positive=true);

}

.renk{

font-family:calibri;

color:blue;

}

Birinci div eleman

kinci div eleman

YEN ELEMANLAR VE ZELLKLER 23



37/368

Eer class zelliine birden fazla snf seici ad yazlmfl ise, son yazlan snf se-ici en ncelikli olur.

Sayfamzn grnts:

contentedtable [HTML5]

Alabilecei Deerler: {true, false}

Eleman ieriinin dzenlenebilir olup olmadn ayarlamak iin kullanlr.

true deeri atanmflsa eleman ierii kullanc tarafndan dzenlenebilir/deifl-tirilebilir.

false deeri atanmflsa eleman ierii kullanc tarafndan dzenlenemez.

Eer bu zellik bir elemana atanmflsa kaltsal olarak elemann iinde bulunan alt

elemanlara geer. Bu zellii deeri ile beraber kullanmak flarttr.rnein;

fleklindeki bir kullanm yanlfl olacaktr.

Dorusu;

fleklinde olmaldr.

HER YNYLE HTML524

Firefox 3.6 ekran grnts

IE8 ekran grnts



38/368

rnek:

contenteditable zellii

Dzenlenebilir erik

Dikkat ederseniz sayfada bulunan div elemanlar iin contenteditable zellii truedeeri ile tanmlanmfltr. Bu durumda iki div elemannn da ierikleri kullanc tara-fndan deifltirilebilir. Burada fluna dikkatinizi ekmek istiyorum. kinci div eleman-

nn ierisinde bulunan img eleman, bu zellii kaltsal olarak almaktadr. Tm tara-yclar img elemannn kullanc tarafndan silinmesine izin verir, fakat sadece IE veFirefox img elemannn sayfa zerindeki boyutlarn deifltirmemize izin verecektir.


Sayfann normal (varsaylan) ekran grnts




39/368

Tarayc Destei: Internet Explorer 5.5 +, Firefox3+, Opera 9.0+, Safari (Destei var.)

contextmenu [HTML5]

Alabilecei Deer: {menu eleman id deeri}

Bir eleman menu eleman ile iliflkilendirmek iin kullanlr.

Tarayc Destei: Internet Explorer (Yok), Firefox (Yok), Opera (Yok), Safari (Yok)

dr

Alabilecei Deerler: {ltr, rtl}

HTML elemannn ierdii metnin yazlfl ynn ayarlamak iin kullanlr. ltr ilertl deerlerinden birini alr.

draggable [HTML5]

Alabilecei Deerler: {true, false, auto}

Bir HTML elemannn srklenebilir olup olmayacan ayarlamak iin kullanlr.

true deeri atanmflsa kullanc mouse ile elemannn konumunu deifltirebilir.

(Eleman srklenebilir) false deeri atanmflsa eleman srklenemez.

auto deeri atanmflsa ve yukardaki deerler kullanlmamfl ise tarayc kendivarsaylan deerini kullanlr.

Tarayc Destei: Internet Explorer (Yok), Firefox 3.5+, Opera (Yok), Safari 5.0+

dropzone

Alabilecei Deerler: {copy, move, link }

Srkle-brak ifllemlerinde brakma anndaki tarayc davranfln tanmlamak iinkullanlr.

HER YNYLE HTML526

NOT + karakteri belirtilen srm ve daha sonra kan srmler anlamna gelmektedir.

NOT Bu zellik, Drag and Drop isimli blmde ayrntl bir flekilde anlatlacaktr.



40/368

copy deeri atanrsa srkleme iflleminin bittii yerde srklenen datann kop-yas oluflturulur.

move deeri atanrsa srklenen datay srkleme iflleminin bittii yere taflr. link deeri atanrsa srkleme iflleminin bittii yerde srklenen dataya bir

link oluflturur.

Tarayc Destei: Yok.

d

Alabilecei Deer: {Bir HTML elemann id zelliine atanan deer}

HTML elemanlarna benzersiz bir isim vermek iin kullanlr. Aslnda id zellii

ile HTML elemanlarna bir kimlik numaras verilir. JavaScript ile id zelliine de-er atanmfl yani bir kimlii olan elemanlara ulaflabilir ve alflma annda bu elema-nn stil ve yapsal zelliklerini deifltirebiliriz.

rnek:

id zellii

var goster = function (){

var yeni_text = document.createTextNode(id zellii);

/* Yeni bir text (metin) dm oluflturmak iin createTextNode() metodunukullandk.

*Kullanm:

*createTextNode(String):String (Bu gsterim Metodun hangi tip deeraldn ve metodun geri dndrd deer trn tanmlar.)

*Dom Level 1,2

*/

var div = document.getElementById(icerik);/* id zelliine icerik deerini almfl div elemannn referansn

aldk. getElementById() metodu belirtilen id deerini almfl elemanobje(Nesne) olarak dndrr.

*Kullanm:

*getElementById(String):HTMLElement

*Dom Level 1,2

*/




41/368

div.appendChild(yeni_text);

/* yeni_text isimli metin dmn appendChild() metodu ile div elemanierisine ekledik.

*Kullanm:*appendChild(Node):Node

*Dom Level 1,2

*/

}

#icerik

{

height: 50px;

width: 200px;

background-color: lightblue;

overflow:hidden;

}

id zelliine icerik deeri almfl elemannMouse ile zerine gelindiinde yandaki ekran g-rnts oluflur.

lang

Alabilecei Deer: {Dil Kodu}

HTML elemanlarnn ierdikleri metinlerin ya da zelliklerine aldklar deerlerindilini ayarlamak iin kullanlr. rnein; Trke: tr, Almanca: de, ngilizce: en

spellcheck [HTML5]

Alabilecei Deerler: {true, false}

Eer true deeri atanmflsa eleman iindeki metinde dilbilgisi ve yazm hatalarkontrol edilir. false deeri atanmflsa kontrol edilmez. Bu zellii dzenlenebilir

HER YNYLE HTML528




42/368

ierie sahip elemanlarda kullanabilirsiniz. rnein; textarea, input ya dacontenteditable=true deerini almfl dier elemanlar.

Tarayc Destei: Internet Explorer (Yok), Firefox 2+, Opera (Yok), Safari (Yok)

style

Alabilecei Deerler: {CSS tanmlamalar(zellik:Deer)}

Bu zellii kullanarak HTML elemanlarna satr ii CSS kodlar yazabilirsiniz. BuCSS kodlar style zellii ile yazldklar HTML elemanna uygulanr. Stylezelliine yazlan CSS kodlar bir eleman hedef alan CSS kodlar iinde en nce-likli tanmlamalar olacaktr.

rnek:

style zellii

p

{

color: Maroon; /*color tanmlamas, p elemanna uygulanmaz.

nk ncelikli olan color tanmlamas style zelliine yazlan tanmlamadr.*/

width: 100px;

}

Her Ynyle HTML5

p elemanna atanan CSS zelliklerine grsel olarak inceleyelim.




43/368

Ekran grntsne bakalm.

tabndex

Alabilecei Deer: {Say}

HTML eleman iin sekme srasn ayarlar.

ttle

Alabilecei Deer: {Metin}

HTML etiketine bilgi ve aklama ekleyebilirsiniz.

hdden [HTML5]Alabilecei Deer: {hidden}

HTML elemann gizlemek iin kullanlr.

Tarayc Destei: Internet Explorer (Yok), Firefox 4.0, Opera (Presto/2.7.7), Safari(Nightly Build* ile)

HTML5in GetirdiiYeni ElemanlarHTML5 yapsnda bulunan yeni elemanlara bakalm.

Yapsal Elemanlar

Bir web sayfas tasarlarken muhtemelen sayfanz kabaca bir st bafllk alan (sitenin ta-ntm iin), bir ierik alan ve yine ierik alan ierisinde deiflik alt bafllklar (blm-ler), bir alt bafllk ve bir ya da daha fazla navigasyon (ynlendirme) alanlarndan olu-flacaktr (Deiflik site tasarmlar olabilir. Burada genel yaklaflmdan sz edilmektedir).Sitenizin yapsn tasarlarken HTML5 ile yeni gelen yapsal elemanlar kullanabilirsi-niz. Bu elemanlarn kullanlmas; kod okunabilirliini arttrr, anlaml eleman gurup-lar oluflturulmasn salar ve CSSi daha etkili bir flekilde kullanmanza yardmc olur.

HER YNYLE HTML530

Firefox 3.6 ekran grntsp elemanna atanan CSS zellikleri



44/368

Bafllk eleman, bu eleman kullanarak sayfa bafllk alan (sayfa hakknda bilgiler ie-

ren blm), blm veya alt blm bafll ya da ynlendirme alanlar iin bafllk olufl-turabilirsiniz. Genelde h1, h2, h3 .. h6 elemanlarn ya da hgroup elemann ierir.

zellikleri: [Standart zellikler]

rnek:

Header Eleman

header

{

width: 600px;

height: 85px;

background-color: #e8ff8c;

margin: 0px auto;

padding: 5px;

}

header h1{

font-family: calibri;

color: #ad3f23;

margin: 0px;

}

header img

{

float: right;

}

header span

{

font-style: italic;

}




45/368

Her Ynyle HTML5

Yeni Nesil ve Zenginletirilmi HTML srm


46/368

rnein;

Birinci Link

kinci Link

nc Link

Drdnc Link

...fleklindeki bir kullanm yerine afladaki kullanm tercih edebilirsiniz.

Birinci Link

kinci Link

nc Link

Drdnc Link

rnek:

nav Eleman

nav

{

width: 145px;

height: 260px;

background-color: #ae364c;

padding: 5px;


/*CSS3 border-radius zell ii yuvarlak kenarl kutular oluflturmamz salar.*/

/* IE9,Firefox 4.0, Opera 10.5+, Safari 4.0,5.0 iin [CSS3 Standard]*/

border-radius: 5px 30px;

/*safari 3.0*/

-webkit-border-radius: 5px 30px;




47/368

/*Firefox 3.6 ve alt srmleri iin*/

-moz-border-radius: 5px 30px;

}

nav h4

{

color: white;

margin-left: 8px;

margin: 0px;

}

nav > ul

{

margin: 5px 0px;

padding-left: 20px;

list-style-type: none;

}

nav > ul a

{

text-decoration: none;

color: #ffff00;

}

Yapsal Elemanlar

Header

Footer

Section

Aside

Hgroup


HER YNYLE HTML534



48/368

Sayfann ana ierik alannda anlamsal bir btnl olan (farkl konu bafllklarna yada davranfllara gre ayrlmfl) alt blmler (ierikler) oluflturmak iin kullanlr. r-nein; bir blog sayfasnda ana ierik blm iindeki farkl blog yaz alanlarn buelemanla oluflturabilirsiniz. Ya da gazete, dergi makaleleri ieren alanlar, kullanc

girifli, kullanc yorumlar gibi alanlar bu elemanla oluflturmanz mmkndr. ar-ticle elemann kullanarak biimlendirdiiniz alanlar sayfann deiflik blgelerin-de kullanabilirsiniz.


rnek:

article Eleman

p,h3

{

margin: 0px;

}


Firefox 4.0Beta11 ekrangrnts



49/368

article p

{


font-style: italic;}

footer

{

text-align: right;

}

footer a

{

background-color: hsl(306, 83%, 36.9%); /*HSL hue (renk) -saturation (doygunluk) lightness (parlaklk, aydnlk) hsl (H,S,L)

CSS3 ile beraber gelen renk deeri tanmlama metodudur.hue deeri 0-360 arasnda bir say alabilir. rnein; 240 mavi,

360 krmz gibi.

saturation ve lightness tanmlamalar yzde olarak yaplr.

[IE9 alt srmleri bu tanmlama metodunu desteklemez]

*/

color: white;

font-family: verdana;

font-size: 11px;


}article

{

width: 437px;

height: 110px;

background-color: hsl(0, 100%, 91.4%);

padding: 15px;

/*IE9(Alt srmleri desteklemiyor), Firefox 4.0, Opera 10.5+,

Safari 4.0,5.0 iin [CSS3 Standard]

*/

border-radius: 30px;/*safari 3.0 */

-webkit-border-radius: 30px;

/*Firefox 3.6 ve alt srmleri iin */

-moz-border-radius: 30px;

}

HER YNYLE HTML536



50/368

JavaScript ve Kaltsallk

JavaScript Nesne Tabanl Programlamaya olanak salar.

rnein Oluturduunuz bir yapc Fonksiyonun(Constructor

Function) ierisindeki zellik ve yntemleri kaltsal

olarak (prototype zelliini kullanarak) baka bir yapc

fonksiyona aktarabilirsiniz.

Yaznn Devam iin Tklayn


Sayfa ierisinde genel blmler (ana ierik blm, dier blmler vb.) oluflturmak

iin kullanlr. HTML5 bu eleman mantksal, tematik alanlar (rnein; eer flylederseniz birinci eleman ierisinde bulunan etiketler sayfann ana icerikblmn oluflturuyor. Bu durumda section elemannn oluflturduu alan mantksalbir alan olarak ifade edilebilir) oluflturmak iin tanmlasa da biz section elemannsadece mantksal alanlar oluflturmak iin deil, ayn zamanda div elemannn yerinebiimlendirilmifl ana blmler oluflturmak iinde kullanabiliriz.


Firefox 4.0ekrangrnts



51/368


rnek:

section Eleman

div#content

{

margin: 0px auto;

width: 642px;

height: 280px;background-color:lightblue;

}

section

{

float: left;

margin: 5px;

}

p, h3

{

margin: 0px;}

article p

{


font-style: italic;

}

footer

{

text-align: right;

}

footer a

{


color: white;

font-family: verdana;

font-size: 11px;


HER YNYLE HTML538



52/368

}

article

{

width: 437px;height: 110px;


padding: 15px;

/*IE9(Alt srmleri desteklemiyor), Firefox 4.0, Opera 10.5+,

Safari 4.0,5.0 iin [CSS3 Standard] */

border-radius: 30px;

/*safari 3.0 */


/*Firefox 3.6 ve alt srmleri iin */

-moz-border-radius: 30px;}

nav

{

width: 145px;

height: 260px;

background-color: #ae364c;

padding: 5px;


border-radius: 5px 30px;-webkit-border-radius: 5px 30px;

-moz-border-radius: 5px 30px;

}

nav h4

{

color: white;

margin-left: 8px;

margin: 0px;

}

nav > ul{

margin: 5px 0px;

padding-left: 20px;

list-style-type: none;

}

nav > ul a

{




53/368


color: #ffff00;

}

Yapsal Elemanlar

Header

Footer

SectionAside

Hgroup


JavaScript Nesne Tabanl Programlamaya olanak

salar. rnein Oluturduunuz bir yapc

Fonksiyonun(Constructor Function) ierisindeki

zellik ve yntemleri kaltsal olarak(prototype

zelliini kullanarak) baka bir yapc

fonksiyona aktarabilirsiniz.

Yaznn Devam iin Tklayn

HER YNYLE HTML540



54/368

Sayfamzn ekran grntsne bakalm.

Elemanlarn yerleflimine grsel olarak bakalm.

erik blmleri ile alakal ek bilgi alanlar oluflturmak iin kullanlrlar. Bu durum-da ierik blmnn yanna konumlandrlrlar. Ya da sayfann ana blmlerinindflnda sayfa kenarlarnda reklam alanlar, yan aklama ve ek bilgi alanlar tanm-lamak iin kullanlrlar.





55/368


rnek:

aside Eleman

p,h3

{

margin: 0px;

}

article p, article pre, aside

{


font-style: italic;

font-size: 12px;

}

article

{

width: 437px;

height: 250px;

background-color:#F9DAAE;

padding: 15px;

position: relative;

border-radius: 30px;


-moz-border-radius: 30px;

}

aside

{

position: absolute;

top: 50px;

right: -120px;

background-color: #DEE17C;

width: 120px;

height: 170px;

text-indent: 5px;

}

HER YNYLE HTML542



56/368


JavaScript Nesne Tabanl Programlamaya olanak salar.

rnein Oluturduunuz bir yapc Fonksiyonun(Constructor

Function) ierisindeki zellik ve yntemleri kaltsal

olarak(prototype zelliini kullanarak) baka bir

yapc fonksiyona aktarabilirsiniz.

var ana_constructor = function (ad) {

if (ad == undefined) {

this.ad = Her Ynyle html5

} else {

this.ad = ad;

}

};

var child_const = function (ad) { };

child_const.prototype = new ana_constructor();

// child_const isimli yapc metodtan reti len nesneler// ad zell iine sahip olacaklar.

Daha Fazla Bilgi in




57/368

Ekran grntsne bakalm:

Bu eleman kullanarak sayfa, blm ya da alt blmler iin alt bilgi alanlar olufl-turabilirsiniz. Alt bilgi alanlar genelde ierik yazar hakknda bilgi, ieriin olufl-turulma tarihi ya da sayfa sahibi ile ilgili iletiflim bilgilerini ierir.


rnek:

aside Eleman

footer {

/*IE9 ,firefox 4.0 ,Safari 5.0 alt srmleri iin

display:block tanmlamas yaplmfltr*/display:block;

width:600px;

height:70px;

font-family:consolas;

font-size:12px;

padding-top:10px;

HER YNYLE HTML544

Firefox 4.0ekrangrnts



58/368

/*Arkaplan rengi olarak bir gradient tanmlama (renk geifli)*/

/*Mozi lla Firefox 3.6+*/

background:-moz-linear-gradient(left top,#F5F3F0,#2CDEDE);

/*Safari 4.0+*/

background:-webkit-gradient(linear, 46% 0%, 100% 100%,

from(#F5F3F0), to(#2CDEDE));

/*IE 5.5+*/

filter:Progid:DXImageTransform.Microsoft.gradient(startColorstr=#F5F3F0,

endColorstr=#2CDEDE,gradientType=1);

}

footer p {

width:300px;

font-family:consolas;

font-size:12px;

padding-left:10px;

}

Kitap Sat Dnyas Copyright 2005 - 2011

Her Hakk Sakldr Tel:xxx.xxx.xx.




59/368

Ekran grntlerimize bakalm:

Resim, fotoraf alanlar (ya da media alanlar) tanmlamak iin kullanlr. Bu flekilalanlarna bir metin ilifltirmek iin eleman kullanlr.


rnein;

ya da resme tanmlayc bir metin ekleyebilirsiniz.

irketimizin Arge Blm

HER YNYLE HTML546


IE8 ekrangrnts

NOT HATIRLATMA

Yukarda anlatlan elemanlarn blok seviyesinden elemanlar olduklarn fark etmifl-sinizdir. HTML elemanlar sayfadaki yerleflim dzeylerine gre ikiye ayrlr. Bunlar;satr ii (inline element), blok seviyesi eleman (block level element)dr. Taraycblok seviyesi elemanndan nce ve sonra bir satr sonu oluflturur.



60/368

rnek:

Hatrlatma

body> * {

background-color: crimson;

}

header

footer

article

aside

hgroup

section

nav

figure




61/368

Ekran grnts:

Yukarda anlatlan elemanlar IE9, Firefox 4, Opera (Presto 2.7.70), Safari 5.0 tara-yclarnn alt srmleri tarafndan desteklenmemektedir. Peki, ya bu alt srmlerbu eleman sayfaya nasl yerlefltirecekler? Hemen aklayalm.

Internet Explorer alt srmleri bu elemanlar hi tanmayacaktr. Bu elemanlarhedef alan CSS kodlarn uygulamazlar. Bu durumun zm iin JavaScript yar-dmyla belirtilen elemanlar programatik olarak oluflturmak yeterli olacaktr.IE9un tanmad dier yeni elemanlar da bu flekilde oluflturup sayfa ierisindekullanabilirsiniz.

HER YNYLE HTML548

Firefox 4.0Beta11 ekran grnts



62/368

Yukardaki Script blou sadece IE9 alt srmlerinde alflacaktr.

Belirtilen elemanlar IE9 alt srmlerinde blok seviyesin den bir eleman olarak kul-

lanmak iin afladaki CSS tanmlamasn yapalm.

header, hgroup, nav, article, section, aside, footer, figure {

display:block;

}

Artk IE9 alt srmlerinde bu elemanlar kullanabiliriz.

rnek:

IE9 alt srmleri


display:block;

}

header {

background-color:lightblue;

}

header Eleman




63/368

Ekran grntsne bakalm:

Firefox 4.0 ve Opera (Presto 2.7.70) gibi dier tarayclarn alt srmleri bu eleman-lar satr ii bir eleman olarak olufltururlar oysa ki bu elemanlar sayfa blmleri ve alt

blmler oluflturmak iin kullanlrlar (Blok seviyesinden elemanlar olmalar gerekir).Bu problemin zm iin afladaki CSS tanmlamas yeterli olacaktr.


display:block;

}

Dier Elemanlar

Yukarda anlatlan yapsal elemanlar dflnda HTML5 yaps ierisinde duyurulan

dier ifllevsel elemanlara bakalm.

Metni iflaretlemek iin kullanlr. Bu eleman kullanarak okuyucunun dikkatini e-kecek vurgulu metinler oluflturabilir ya da metnin referans olarak tanmlanmasnsalayabilirsiniz. Satr ii bir elemandr.


rnein;

Metni

iaretlemek

iin kullanlr.

HER YNYLE HTML550

IE8 ekran grnts



64/368

CSS kodlar ile mark eleman ierisindeki metne stil vererek okuyucunun dikkatinibu kelimeye ekebilirsiniz.

rnek:

Bu durumun zm iin JavaScript yardmyla belirtilen

elemanlar programatik olarak oluturmamz yeterli olacaktr.

IE9un tanmad dier yeni elemanlar da bu

ekilde oluturup IE9 alt srmlerinde

ortaya kan bu problemi zebilirsiniz.

Sayfada yaplacak aramalarda bulunacak ayn metin paralarnn hepsini bu etiketierisine alp, nceden bir stil tanmlamas yapabilirsiniz.

Belirlediiniz bir aralk iinde bir deeri (lm) kullancya grsel olarak gster-mek iin kullanlr. Bu eleman bir ilerleme ubuu (progress bar) olarak kullanl-mamaldr.

zellikleri: [Standart zellikler] ile form, high, low, max, min, optimum, value

form: meter elemannn bir form eleman ile iliflkili olup olmadn tanmla-

mak iin kullanlr. Bu zellie elemann iliflkili olduu form elemannn idzelliine atanan deer yazlr. Aralarnda boflluk brakmak kaydyla birdenfazla form id deeri yazlabilir.

high: min, max zellikleri ile tanmlanan aralkta yksek olarak kabul edilecekdeeri tanmlar. Belirtilmezse ya da high zelliine atanan deer max zelliineatanan deerden yksek ise max zelliine atanan deer yksek deer olarak ka-bul edilir. lowve optimal zellikleri ile beraber kullanlr.

low: min, max zellikleri ile tanmlanan aralkta dflk olarak kabul edilecek

deeri tanmlar. Belirtilmezse ya da lowzelliine atanan deer min zelliineatanan deerden dflkse, min zelliine atanan deer, dflk deer olarak ka-bul edilir. high ve optimal zellikleri ile beraber kullanlr.

max, min: Araln en dflk ve en yksek deerlerini tanmlamak iin kullan-lrlar. lm, (sonuta kullancya grsel olarak sunulacak deer) bu deerlerarasndadr. Eer bu zellikler tanmlanmazsa varsaylan olarak max=1.0,min=0 deerlerini alr.




65/368

optimum: min, max deerleri arasnda en uygun deer tanmlamas yapmak iinkullanlr. Bu deer high deerinden byk ise yksek deerler, lowdeerinden

kk ise kk deerler uygun deerler olarak kabul edilebilir. Belirtilmezsemin, max deerleri arasndaki orta nokta optimum deer olarak kabul edilir.

value(Gerekli): lm deerini (sonuta kullancya grsel olarak sunulacakdeer) tanmlamak iin kullanlr. Bu deer min, max deerleri arasnda olmaldr.Bu zellie deer atanmazsa varsaylan deer 0 olur. min deerden daha dflkolursa value=min, max deerden daha byk olursa value=max olur.

Afladaki rnekte value deeri low(aralkta dflk olarak kabul edilen deer) de-erinden daha kktr.

llen A:

Ekran grnts:

fiimdi de value deerine high (aralkta yksek olarak kabul edilen deer) deerin-den daha byk bir deer verelim.

llen A:

Ekran grnts:

HER YNYLE HTML552

Opera 11.ekran grnts

Opera 11 ekran grnts



66/368

Dikkat ederseniz her iki durumda da ilerleme ubuunun dolgu rengi ayn olacak-tr. nk deerlerden birincisi dflk olarak kabul edilen deerden (low) daha k-

k dieri ise byk olarak kabul edilen deerden (high) daha byktr.value zelliine low, high deerlerinin arasnda bir deer atanrsa, ilerleme ubu-unun dolgu rengi yukardaki durumlardan farkl olacaktr (yeflil olur).

llen A:

Ekran grnts:

Sayfada grntlenen (rnein; menu eleman ierisinde) ya da grntlenmeyen birkomut dmesi tanmlamak iin kullanlr. Type zelliini kullanarak bu eleman

checkbox ya da radio elemanlarna dnfltrebilirsiniz. Bu elemana flu an iin tara-yc destei bulunmamaktadr.

zellikleri: [Standart zellikler] ve checked, disabled, icon, label, radiogroup,type

Bir grevin, ifllemin tamamlanma/ilerleme srecini kullancya gstermek iin ya-ni ilerleme ubuu oluflturmak iin kullanlr.

zellikleri: [Standart zellikler] ve max,value max: Grevin ya da ifllemin bitirilme durumunu tanmlayan deer.

value: Grevin ya da ifllemin flu andaki durumunu gsteren deer.


Opera 11.01 grnts



67/368

rnek:

lemin Durumu:

Ekran grnts:

Zaman ya da tarih ya da her ikisini birden ieren tanmlamalar yapmak iin kullanlr.

zellikleri: [Standart zellikler] ve datetime, pubdate

datetime zellii tarih ya da zaman tanmlamak iin kullanlr. Afladaki formatagre tarih ya da zaman deerlerini girebilirsiniz.

Yl-Ay-Gn Saat:Dakika:Saniye TZD (Time Zone Designator, Saat dilimi

Tanmlaycs)

Yukardaki tanmlamada kullanlan argmanlar istee baldr.

rnek:

e Balama Tarihi: Ocak 10.

HER YNYLE HTML554

Opera 11 ekran grnts



68/368

HTML5 yaps kendinden nceki HTML srmleri gibi JavaScript programlamadilini kullanr. JavaScript, tarayc da alflan ve Nesne Tabanl Programlama imka-n sunan bir dildir. Browser, JavaScript komutlarn yorumlayarak ifllevlerini yeri-ne getirir. JavaScript ECMAScript-262 (5. srm) standardn kullanr. Bilinme-si gereken dier bir konuda DOM (Document Object Model)dir. DOM, HTML veXML belgeleri iin oluflturulmufl bir programlama arayzdr (API).

DOM (Dokman Nesne Modeli), sayfadaki tm elemanlar birer nesne olarak ta-nmlar. JavaScript yardmyla DOMun tanmlad bu nesnelere (nesnelerin zel-lik ya da metotlarna) ulaflabilir ve kod yazabiliriz. DOM bildirimleri sayfa eleman-larnn dflnda sayfann iflleyifli, olay akfl ve dier durumlar iin zel nesneler ta-nmlar ve kullanma sunar.

Aflada DOM bildirimleri verilmifltir.

Document Object Model Level 1

Document Object Model Level 1 (W3C Recommendation)

Document Object Model Level 1 (Second Edition) (W3C Working Draft)


Document Object Model Level 2 Core (W3C Recommendation)

Document Object Model Level 2 Views (W3C Recommendation)

Document Object Model Level 2 Events (W3C Recommendation)

HTML5 veJAVASCRIPT 3



69/368

Document Object Model Level 2 Style (W3C Recommendation)

Document Object Model Level 2 Traversal and Range (W3C Recommendation)

Document Object Model Level 2 HTML (W3C Recommendation)


Document Object Model Level 3 Core (W3C Recommendation)

Document Object Model Level 3 Load and Save (W3C Recommendation)

Document Object Model Level 3 Validation (W3C Recommendation)

Dier Bildirimler (Sadece Selector Apiler listelenmifltir)

Selectors API Level 1 Selectors API Level 2 (W3C Working Draft)

Dikkat ederseniz; DOM bildirimleri para para yaplmfl olup, core bildirimleri il-gili srmn ekirdek yapsn oluflturmaktadr. Tarayclar asndan olaya bakar-sak; modern web tarayclarnn yeni modelleri DOM Level 2 bildirimlerine bykbir lde destek vermekle beraber, DOM Level 3 bildirimlerine desteklerini hzlaaklamaktadrlar. DOM bildirimlerinde tanmlanan nesnelere, nesnelerin zellikya da metotlarna tarayclarn eski srmleri ya ksmen destek verirler ya da hivermezler. Bu durum bizi farkl tarayclar iin farkl kodlar yazmaya yneltir.

rnein; Document Object Model Level 2 Events bildirimi ile tanmlanan olay akfl evreden oluflur. Bunlar; capturing, target, bublingdir. Peki, bu modeli tarayc-lar destekliyor mu? Yani Document Object Model Level 2 Events bildirimine taray-c destei nedir?

IE9 alt srmleri olay akfln sadece bubling evresinden ibaret grr. Yani dierevreleri desteklemez ve bu bildirim iinde bulunan olay dinleyicilerini de destekle-mediinden, biz de uygulama olufltururken farkl tarayc kodlar yazarz. Syle-

mek istediim fley; tarayclarn bu bildirimleri farkl oranda destekledikleridir.Peki, HTML5 ile bunun ne alakas var?

HTML5 tarayclarn DOM bildirimlerine verdikleri destei hzlandrmalarna nedenolmufltur. Tarayclar HTML5 verdikleri destekleri akladklar sayfalarda DOM,JavaScript ve dier ek teknolojilere verdikleri destekleri de aklamaktadrlar.HTML5, JavaScript, DOM i ie gemifl yaplardr.

HER YNYLE HTML556



70/368

Tarayclar, DOM nesnelerini ve nesneler iin tanmlanan zellik ve metotlar deste-ledike istemci tarafl web uygulamalar gelifltirmek daha konforlu bir hal alacaktr.

JavaScript dilinin etkinlii (gc) artacak ve HTML5 dilini daha etkili bir flekilde kul-lanabileceiz. fiimdi aflada HTML5 yaps ile beraber tarayclarn destek verdik-lerini akladklar ve W3C Selectors API Level 1 bildiriminde bulunan yeni me-totlara bakalm.

querySelector()

W3C Selectors API Level 1 bildiriminde bulunan bu metot ile CSS seicilerinikullanarak belgedeki bir elemann referansn alabilirsiniz.

Kullanm: elemanReferans=document.querySelector(selectors)

lk durumda; belge ierisinde seici tarafndan hedef alnan ilk elemann referansngeriye dndrr.

elemanReferans=temelEleman.querySelector(selectors)

kinci durumda; belirtilen temel eleman iinde seici tarafndan hedef alnan ilkelemann referansn geriye dndrr.

Eer seici tarafndan hedef alnan eleman bulunamazsa (seici ile eflleflen elemanolmazsa) geriye null deeri dner.

Seici tarafndan hedef alnmak ne demektir?

CSS seicileri, HTML eleman isimleri ve birok zel karakterler ierebilir. Olufl-turduunuz seiciler en kaba tabiriyle iinde barndrdklar CSS kodlarnn uygu-lanmas iin eleman ya da elemanlar seer (bu adan seiciler birer sorgu deyimigibidirler). Seici tanmlamalar yaparak CSS kodlarnn uygulanaca elemanlarseilir, yani hedef alnr.

rnek:

Yeil

HTML5 VE JAVASCRIPT 57

NOT Tarayclarn DOM ve CSS bildirimlerine verdikleri destekleri grmek iin tarayc

destek sayfalarna ya da http://www.quirksmode.org/sitesine bakabilirsiniz.



71/368

Beyaz

Krmz

Sar

Mavi

Seicilerimize bakalm...

nav ol li {

/*Bu seici srasyla nav ve ol elemanlarnn soyundan

gelen li elemanlarn hedef alr (seer).*/

color:blue;

}

nav ol> li#acil+ li {

/*Bu seici srasyla nav ve ol elemanlarnn soyundan

gelen li#acil elemannn kardefli olan li elemann hedef alr (seer).*/

color:red;

}

Ekran grnts:

rnek:

HER YNYLE HTML558

Firefox 4.0 Beta11 ekran grnts



72/368

Selector

/*

* Direk script etiketleri arasnda(sayfa yklenmeden nce) bir

* elemann referansn alamayz.

* nk tarayc bu satrlar body elemann yorumlamadan (sayfaya

* yklemeden) nce okuyacandan belirtilen eleman bulamaz ve

* null deerini dndrr.

*/

var init= function() {

/* ilk nce id zel liine html5 deeri atanmfl elemanaulaflalm (referansn alalm, nesne olarak elde edelim)*/

var elemanHtml5=document.querySelector(#html5);

/*element.textContent:String (geriye String deer dndrr)

Dm ierisindeki metni verir.

Bildirim: DOM Level 3 Core */

console.log(elemanHtml5.textContent);

/* div#content eleman ier isindeki en son div elemanna ulaflalm.*/

var elemanJs=document.querySelector(div#content>div#css+div);

console.log(elemanJs.textContent);

/* div#html5 eleman ierisindeki span elemannn referansn alal m.*/var elemanSpan=elemanHtml5.querySelector(span);

console.log(elemanSpan.textContent);

/* Srasyla div#html5 ve span elemanlarnn iinde olan b elemannn

referansn alalm.*/

var elemanB=elemanHtml5.querySelector(span>b);

console.log(elemanB.textContent);

}

Her YnyleHTML5

Xhtml ve CSS

javascript




73/368

Firebug; Firefox tarafndan desteklenen, hata ayklama iin kullanabileceimiz, CSSzelliklerinin eleman zerindeki etkisini grsel olarak grebileceimiz, elemanlarn

DOM zellik ve yntemlerini ayrntl bir flekilde gsteren ve dier birok zellii ba-rndran web sayfas tasarmclar iin bulunmaz bir aratr. alflma annda firebugkonsoluna deiflken, nesne ya da bir deer yazdrmak iin console.log() metodukullanlr.

fiimdi ekran grntsne bakalm.

rnek:

querySelector


var elemanDiv=document.querySelector(div#content div)

/*Oluflturduumuz seici ile aslnda div#content eleman iindeki

tm div elemanlar seilmifl yani hedef alnmfltr.

Fakat querySelector() metodu seici tarafndan hedef alnan belge

aacndaki ilk elemann referansn dndrr.*/

HER YNYLE HTML560

Firefox 3.6 ve Firebug 1.6.2 ekran grnts

NOT Firebug aracn http://getfirebug.com/sitesinden indirebilirsiniz.



74/368

console.log(elemanDiv.id);

}

Ekran grnts:

Elemanlarn yapsal olarak grnts:





75/368

rnek:

querySelector


var elemanDiv=document.querySelector(div#content>div)

/*Oluflturduumuz seici ile div#content elemannn ocuu olan

ilk div elemanna ulaflmak istedik. Fakat byle bir eleman yoktur (seici ile

eflleflen eleman yok).Dolaysyla geriye null deeri dner.*/

console.log(elemanDiv);

}

Html5

Ekran grnts:

HER YNYLE HTML562




76/368

rnek:

querySelector


/*querySelector() metoduna arada virgl koymak kaydyla bir ya da daha fazla seici yazlabilir.

Bu durumda; eer belge zerinde birinci seicinin hedef ald eleman bulunamazsa ikinci

seicinin hedef ald eleman aranr.*/

var elemanDiv=document.querySelector(#div1,#div2);var elemanP=document.querySelector(.p1,.p2);

alert(elemanDiv.id + \n + elemanP.className);

}

Aptana Studio 3

Dom Level 2




77/368

Ekran grnts:

Tarayc destei: Internet Explorer 8+, Firefox 3.5+, Opera 10+, Safari 3.2+

querySelectorAll()W3C Selectors API Level 1 bildirimi ile tanmlanan bu metot CSS seicilerini kul-lanarak belgedeki eleman ya da elemanlar nesne olarak elde etmek iin kullanlr.

Kullanm: elemanlistesi=document.querySelectorAll(selectors)

lk durumda; belge ierisinde seici ile eflleflen elemanlarn listesini (StaticNode-List) dndrr.

elemanlistesi=temelEleman.querySelector(selectors)

kinci durumda; Belirtilen temel eleman iinde seici ile eflleflen elemanlarn liste-sini (StaticNodeList) dndrr.

Eer seici tarafndan hedef alnan eleman ya da elemanlar bulunamazsa (seici ile

eflleflen eleman olmazsa) geriye null deeri dner.StaticNodeList (static dm listesi); querySelectorAll() metodu ile Static-NodeList nesnesi elde edildikten sonra, DOM metotlar ile belge aa yapsndaprogramatik olarak yaplan deifliklikler olduunda (eleman ekleme, karma)StaticNodeList iindeki eleman listesi gncellenmez.

StaticNodeList nesnesinin (querySelectorAll() metodunu atadmz deiflken)

HER YNYLE HTML564




78/368

iindeki eleman referanslarna ulaflmak iin; StaticNodeList[index numaras]ya da StaticNodeList.item(index numaras)yntemlerinden birini kullanabilir-

siniz. index numaras 0dan bafllayacaktr.lk rneimizi NodeList ve StaticNodeList arasndaki fark anlatmak iin yapalm;

rnek:

querySelectorAll


var elemanlar1=document.querySelectorAll(div#div1>*);

/*div#div1 eleman ierisindeki tm elemanlarn static bir

listesi(StaticNodeList) alnd(elemanlar1 iinde)*/

var elemanlar2=document.getElementsByTagName(p);

/*Belge ierisindeki tm p elemanlarnn canl b ir listesi

(NodeList) alnd (elemanlar2 iinde)*/

/*StaticNodeList iindeki eleman saysn yazdral m*/

console.log(StaticNodeList(querySelectorAll) eleman says+:+elemanlar1.length);

/*StaticNodeList iindeki elemanlar konsola yazdral m*/

for(var i=0;i


79/368

yeni_eleman.textContent=yeni bir div eleman;

var elemanDiv=document.querySelector(#div1);

elemanDiv.appendChild(yeni_eleman);

/*StaticNodeList iindeki eleman saysn tekrar yazdral m*/console.log(StaticNodeList(querySelectorAll) eleman says+

:+elemanlar1.length);

/*StaticNodeList iindeki elemanlar konsola yazdral m*/

for(var i=0;i


80/368

Ekran grnts:

rnekten de anlafllaca zere NodeList, canl (gncellenen) bir eleman dmlistesi iken, StaticNodeList gncellenmeyen statik dm listesidir.

rnek:

querySelectorAll


var staticlistDiv=document.querySelector(div#div1>div);

/*div#div1 elemannn ocuu olan herhangi bir div eleman

olmadndan geriye null deeri dner*/

console.log(staticlistDiv);

// sonu: nul l

}


Firefox 3.6 ve

Firebug 1.6.2

ekran grnts



81/368

Aptana Studio 3

Dom Level 2

rnek:

querySelectorAll


var staticlistP=document.querySelectorAll(div#div1>p);

/*div#div1 elemannn ocuu olan p elemanlar nn

listesi geriye dner*/

for(var i=0;i


82/368

Aptana Studio 3

Dom Level 2

Dom Level 3

Ekran grnts:

rnek:

querySelectorAll


var staticlistDiv=document.querySelectorAll(body>div);

/*belge ierisinde seici ile eflleflen(seici tarafndan sei len) sadece

bir div eleman var. Bu durumda StaticNodeList(StaticElemanListesi)

ierisinde sadece bir div eleman olacaktr*/





83/368

console.log(staticlistDiv.length);

console.log(staticlistDiv[0]);

var staticlistP=document.querySelectorAll(p);

/*belge ierisindeki tm p elemanlarnn listesi staticlistP nesnesine aktarld.

Aslnda liste trn(NodeList,StaticNodeList) gz ard ederseniz

getElementsByTagName() metodu ile ayn ifllemi yapt*/

console.log(staticlistP.length);

console.log(staticlistP[0]+\n +staticlistP[1]);

}

div ierii

birinci paragraf

ikinci Paragraf

Ekran grnts:

HER YNYLE HTML570

Firefox 3.6 ve

Firebug 1.6.2 ekran grnts



84/368

Tarayc destei: Internet Explorer 8+, Firefox 3.5+, Opera 10+, Safari 3.2 +

getElementsByClassName()HTML5 bildirimi iinde bulunur. Bu metot, belirtilen snf seiciyi kullanan elemanya da elemanlarn canl (dinamik) bir listesini dndrr (bu metot, geriye NodeListnesnesi dndrr).

Kullanm: elemanlistesi = document.getElementsByClassName(classNames)

lk durumda; belge ierisinde belirtilen snf seici adn kullanan (yani belirtilen s-nf seicinin atand) elemanlarn listesini (NodeList) dndrr.

elemanlistesi = temelEleman.getElementsByClassName(classNames)

kinci durumda; belirtilen temel eleman (referans alnan eleman) ierisinde bulu-nan ve belirtilen snf seici adn kullanan elemanlarn listesini (NodeList) dn-drr.

NodeList nesnesinin iindeki eleman referanslarna ulaflmak iin;

NodeList[index numaras] ya da NodeList.item(index numaras) yntemle-rinden birini kullanabilirsiniz (index numaras 0dan bafllayacaktr).

rnek:

getElementsByClassName

var init=function(){

/*class zel liine onem snf seici deeri atanmfl belge ierisindeki tm

elemanlarn Dinamik bir listesine ulaflalm ve bu listeyi bir deiflkene atayalm(Listenin atand deiflken artk bir NodeList nesnesi olacaktr)*/

var elemanlarOnem=document.getElementsByClassName(onem);

/*NodeList nesnesi (elemanlarOnem) iindeki elemanlarn referansna

ulaflalm ve bu elemanlara bir color tanmlamas yapalm*/

for(var i=0;i


85/368

}

}

Context2DRendering

Context3DRendering

CanvasUygulamalar

Ekran grnts:

rnek:



/*class zelli ine onem sn f seici deeri atanmfl belge ier isindeki tm

elemanlarn Dinamik bir listesine ulaflalm ve bu listeyi bir deiflkene atayalm

(Listenin atand deiflken artk bir NodeList nesnesi olacaktr)*/

var elemanlarOnem=document.getElementsByClassName(onem);

/*NodeList nesnesi(elemanlarOnem) iindeki elemanlarn referansna ulaflalm ve

bu elemanlara bir color tanmlamas yapalm*/

HER YNYLE HTML572




86/368

for(var i=0;i


87/368

Ekran grnts:

rnek:



/*class zelli ine onem baslik(iki tane sn f seici ad) snf seiciisim listesi atanmfl belge ierisindeki tm elemanlarn dinamik bir

listesine ulaflalm ve bu listeyi bir deiflkene atayalm(Listenin atand

deiflken artk bir NodeList nesnesi olacaktr)*/

var elemanlarOnem=document.getElementsByClassName(onem baslik);

/*NodeList nesnesi(elemanlarOnem) iindeki elemanlarn referansna

ulaflalm ve bu elemanlarn ieriklerini firebug konsoluna yazdralm*/

for(var i=0;i


88/368

Ekran grnts:

Tarayc destei: Internet Explorer 9, Firefox 3+, Opera 9.5+, Safari 3.1+

Seici Metotlarn DesteklemeyenTarayc Srmleri iin zmYukarda anlatlan metotlarn hangi tarayclar tarafndan ne lde desteklendii-

ni nceki konuda anlatmfltk. Ne yazk ki tarayclar W3C bildirimlerini ya da di-er bal teknolojileri ayn oranda desteklememektedirler. Bu durum programcyaek bir yk getirir. Dflnn sayfa tasarlarken bir eleman (nesne) ya da zel bir nes-ne kullanacaksanz ilk nce tarayc desteine bakp, daha sonra desteklemeyen ta-rayclar iin ek kod yazmanz gerekecektir. Yani farkl tarayclar iin farkl kod-lar yazmanz gerekebilir. Afladaki rnee bakp konumuza devam edelim.

rnee gemeden nce...

firstElementChild (Bir elemann iindeki ilk eleman dmne ulaflmak iin),

lastElementChild (Bir elemann iinde bulunan son eleman dmne ulaflmak iin),

nextElementSibling (HTML aa yapsnda referans alnan elemandan sonra ge-len elemann (kardefl eleman) referansn almak iin),

previousElementSibling (HTML aa yapsnda referans alnan elemandan ncegelen elemann (kardefl eleman) referansn almak iin) kullanlrlar ve bu zellik-ler element dmleri (elemanlar) iin tanmldrlar.


Firefox 3.6 ve Firebug 1.6.2

ekran grnts



89/368

Bu zellikler Document Object Model Level 2 Traversal and Range bildirimiile tanmlanmfllardr. Bu zelliklere tarayclar tarafndan verilen destee bakalm.

Tarayc destei: Internet Explorer 9, Firefox 3.5+, Opera 10.10+, Safari 4+

fiimdi tarayclarn desteklemeyen srmleri iin bu zellikleri kullanlabilir halegetirelim. Kodlarmz yazmaya bafllayalm.

Document Object Model Level 2 Traversal and Range

var jsharp = {

/*jsharp javascript Framework 1.0

* (Document Object Model Level 2 Traversal and Range

partial support)

* brahim elikbilek*/

_firstElementChild:function(e_ref/*e_ref:elemanReferans*/){

/*Bir elemann iindeki i lk eleman dmne ulaflmak iin

*_firstElementChild() metodunu tanmladk.Eer eleman baflka

bir eleman iermiyorsa _firstElementChild() metodu geriye

null deerini dndrr.*/if (e_ref.firstElementChild == undefined) {

//Eer firstElementChild zellii desteklenmiyorsa;

//firstChild zel lii kullanlr .

//bu zel lik elemann iindeki i lk dm(Node)

//geriye dndrr.

var child = e_ref.firstChild;

//e_ref ile tanml elemannn ilk ocuk dmne ulafltk.

while (child) {

if (child.nodeType == 1) {/*Bir dmn trne bakarak bu dmn ne dm

olduunu anlayabiliriz.(Element, Text...)

* Bir dmn trne ulaflmak iin nodeType zellii

kullanlr.

* var type = node.nodeType;

* Aflada dm trleri ve nodeType deerleri

verilmifltir;

HER YNYLE HTML576



90/368

* ELEMENT_NODE = 1(Eer dmn nodeType zelliinin

deeri 1 ise bu dm element dmdr.)

* ATTRIBUTE_NODE = 2

* TEXT_NODE = 3* .......*/

return child;

/*e_ref ile tanml elemannn ocuk dm eer

element dm ise bu elemenin referans geriye

dndrlecek ve dngden klacak.*/

}

else {

child = child.nextSibling;

/* e_ref i le tanml elemannn ilk ocukdm eer element dm deil ise bu

durumda bu dmn kardefli olan dier

dmn referansn nextSibling zellii ile aldk.

*Eer eleman ierisinde kardefl dm yoksa

nextSibling zellii geriye null deerini dndrr.

Bu deerde while(null){} tanmlamasna

neden olacandan dngden klr.*/

}

}

}else {

/* Eer tarayc firstChildElement zel liini destekliyorsa;

Kullanm:

childNode=elNodeReference.firstElementChild;

elemann iindeki ilk elemannn referansn dndrr.*/

return e_ref.firstElementChild;

}

return null;

/*Eer eleman ierisinde bir element yoksa ya da

element dm yoksa geriye null deerini dndreceiz*/},

_lastElementChild: function(e_ref/*e_ref:elemanReferans*/){

/*Bir elemann iinde bulunan son eleman dmne

ulaflmak iin_lastElementChild() metodunu tanmladk*/

if (e_ref.lastElementChild == undefined) {




91/368

/* e_ref tanml elemann iindeki en son dme ulafltk..*/

var child = e_ref.childNodes[e_ref.childNodes.length - 1];

/* e_ref referansna sahip elemann iindeki en son

elemana ulaflmak iin childNodes zellii kullanld.

Bu zellik eleman iindeki tm dmlerin

bir listesini oluflturur.(NodeList)*/

while (child) {

if (child.nodeType == 1) {

return child;

/* e_ref ile tanml elemann iindeki en son

dm eer element dm ise bu

elementin referans geriye dndrld.*/

}

else {

child = child.previousSibling;

/* e_ref tanml elemann iindeki en son

dm eer element dm deilse, en

son dmden bir nceki dme gemek

(bir nceki dmn referansn) almak

iin previousSibling zelliini kullandk. */

}

}

}

else {

/* Eer lastElementChild zel liini destekliyorsa;

Kullanm:

childNode = elNodeReference.lastElementChild;

elemann iindeki son elemannn referansn dndrr.*/

return e_ref.lastElementChild;

}

return null;

/*Eer eleman iererisinde bir element yoksa ya da element

dm yoksa geriye null deerini dndreceiz */

},

_nextElementSibling: function(e_ref/*e_ref:elemanReferans*/){

/*

HTML aa yapsnda referans alnan elemandan sonra

gelen elemann(Kardefl eleman) referansn almak iin

_nextElementSibling()metodunu tanmladk*/

if (e_ref.nextElementSibling == undefined) {

HER YNYLE HTML578



92/368

// nextElementSibling zel lii desteklenmiyorsa...

var child = e_ref.nextSibling;

while (child) {


return child;

}

else {

child = child.nextSibling;

}

}

}

else {

return e_ref.nextElementSibling;

}

return null;

},

_previousElementSibling: function(e_ref/*e_ref:elemanReferans*/){

/* HTML aa yapsnda referans alnan elemandan nce

gelen elemann (kardefl eleman) referansn almak iin

_previousElementSibling metodunu tanmladk*/

if (e_ref.previousElementSibling == undefined) {

//previousElementSibling zellii desteklenmiyorsa. ..

var child = e_ref.previousSibling;

while (child) {


return child;

}

else {

child = child.previousSibling;

}

}

}

else {return e_ref.previousElementSibling;

}

return null;

}

}

var init = function(){




93/368

var eleman = document.getElementById(bir);

var child_element_first = jsharp._firstElementChild(eleman);

var child_element_last = jsharp._lastElementChild(eleman);

var nextSiblingElement = jsharp._nextElementSibling(eleman);

var previousSiblingElement = jsharp._previousElementSibling(eleman);

alert(child_element_first.id + \n+

child_element_last.id+\n +nextSiblingEl

Her Yönüyle HTML5

Documents

Transcript of Her Yönüyle HTML5