Curs HTML5 - Partea I

HTML5 este noua versiune de HTML. Noul standard introduce notiuni noi pe care o sa le studiem in acest curs.

1.1 Introducere
Exemplu: Code:
<!DOCTYPE HTML> <html> <body> <video width="320" hei ht="2!0" "o#t$ol%=""o#t$ol%"> <%o&$"e %$"="'ilm(o " ty)e="video*o " *> <%o&$"e %$"="'ilm(m)!" ty)e="video*m)!" *> <%o&$"e %$"="'ilm(webm" ty)e="video*webm" *> +$ow%e$&l dv% #& %&)o$t, t, -&l video( <*video> <*body> <*html>

Ce este HTML5? HTML5 reprezinta noul standard pentru HTML, XHTML si HTML DOM. Versiunea curenta a HTML (versiunea 4 a aparut in !""". #e atunci insa $e%&ul s&a sc'im%at mult. Tocmai de aceea se impunea aparitia unui nou standard. (nca se lucreaza la acest standard dar multe %ro$sere ()ire*ox, C'rome, +pera au de,a suport pentru HTML-. Cum a aparut HTML5? La realizarea acestui nou standard au cooperat W3C (World W de We! Consort um si WH"TW# (We! H$perte%t "ppl cat on Tec&nolo'$ Wor( n' #roup . .H/T.0 s&a ocupat de *orumularele si aplicatiile $e% iar .1C de 2HTML 3.4. (n anul 3445 cele 3 6rupuri s&au decis sa cola%oreze si sa realizeze impreuna noul standard HTML. )-au sta! l t cat*ea re'ul no + & noile caracteristici tre%uie sa se %azeze pe HTML, C77, #+M si 8ava7cript & se reduce nevoia unor plu6inuri externe (cum ar *i )las' & manipularea mai usoara a erorilor & utilizarea marca,elor pentru a inlocui scriptin6ul & HTML- tre%uie sa *ie independent de dispozitiv (device & procesul de dezvoltare tre%uie sa *ie desc'is pu%licului. Cate*a d n caracter st c le no pe care le are HTML5+ !

& elementul canvas pentru desen & elementele video si audio pentru redare *isiere media & suport mai %un pentru 6azduirea o**line locala & elemente noi pentru continut: article, *ooter, 'eader, nav, section & controale noi pentru *ormulare: calendar, date, time, email, url, searc' ,-DOCT.P/0 pentru HTML5 (n HTML- avem o sin6ura declaratie de tip 9:#+CT;<E=. Document HTML5 m n m Mai ,os aveti exempli*icat un document HTML- simplu, cu minimul de ta6&uri necesare. Exemplu: Code:
<!DOCTYPE html> <html> <he,d> <title>Titl&l do"&me#t&l&i<*title> <*he,d> <body> Co#ti#&t&l do"&me#t&l&i((( <*body> <*html>

7uport n !ro1sere HTML5 nu este momentan standardul o*icial HTML iar %ro$serele nu au suport total pentru acesta. Totusi, cei care realizeaza cele mai cunoscute %ro$sere ()ire*ox, C'rome, +prea, 7a*ar, (nternet Explorer continua sa adau6e carcatersitici menite sa suporte noul standard.

Curs HTML5 - Partea a II-a 2. /lemente no n HTML5
#eoarece internetul s&a sc'im%at mult de la aparitia standardului HTML 4.4! (in !""" multe din elementele acestuia nu sunt *olosite la realizarea unor pa6ini $e% sau nu sunt *olosite pentru ce au *ost ele 6andite. /ceste elemente au *ost eliminate sau rescrise in noul standard HTML. <e lan6a asta, datorita nevoilor impuse, s&au creat elemente noi menite sa *aciliteze realizarea pa6inilor $e%. 2.1 /lemente )emant ce3)tructurale no Mai ,os aveti o lista cu elemente noi de marca, introduse in HTML5

3

Quote:9article= & pentru continut externt (stiri, %lo6, *orum 9aside= & pentru continut deoparte *ata de continutul in care este plasat. Continutul >aside> tre%uie sa *ie le6at de continutul incon,urator. 9%di= & (zoleaza o parte din text ce poate *i *ormatata intr&o directie di*erita *ata de textul din a*ara 9command= & %uton, %uton radio, caseta (c'ec?%ox 9details= & pentru a descrie detaliile unui document sau unei parti dintr&un document 9summar@= & le6enda sau sumar (in interiorul elementului >details> 9*i6ure= & speci*ica continutul independent, ca ilustratiile, dia6ramele, *oto6ra*iile, listari de cod, etc. 9*i6caption= & le6enda unei *i6uri 9*ooter= & pentru s*arsitul unui document sau sectiune. <oate include numele autorului, data documentului, in*ormatii de contact sau de cop@ri6't 9'eader= & pentru introducerea intr&un document sau sectiune. <oate include navi6are. 9'6roup= & o sectiune de ru%rici ('eadin6s de la 9'!= la 9'5=, unde cea mai mare este ru%rica principala iar celelalte sunt su%&ru%rici 9mar?= & marcarea unui text ('i6'li6't 9meter= & pentru masuri (doar daca se cunosc valorile minima si maxima 9nav= & sectiune de navi6are 9pro6ress= & starea unei lucrari in pro6res 9ru%@= & pentru notatii ru%@ (note sau caractere c'inezesti 9rt= & pentru explicarea notatiei elementului ru%@ 9rp= & ca sa arate %ro$serelor care nu suporta elementul ru%@ 9section= & sectiune in document (cepitol, 'eader, *ooter 9time= & pentru de*inire timp, data sau amandoua 9$%r= & pauza intre cuvinte. <entru de*inirea unei oportunitati de >line&%rea?> 2.2 /lemente med a no /ceste elemente elimina utilizarea unor plu6inuri externe cum ar *i )las'. Quote:9audio= & pentru continut audio 9video= & pentru continut video 9source= & pentru elemente media de*inite in elemente audio sau video 9em%ed= & pentru continut incroporat (cum ar *i un plu6&in 9trac?= & de*ineste textul pieselor pentru 9video= si 9audio= 2.3 /lementul can*as Atilizeaza 8ava7cript pentru a realiza desene intr&o pa6ina $e%. Quote:9canvas= & pentru a realiza elemente 6ra*ice cu un script 2.4 /lemente no pentru 5ormulare

1

HTML5 introduce elemente noi pentru *ormulare menite sa im%unatateasca *unctionalitatea acestora. Quote:9datalist= & o lista cu optiuni pentru valori de intrare 9?e@6en= & 6enereaza c'ei pentru autenti*icarea utilizatorilor 9output= & pentru di*erite tipuri de iesiri cum ar *i iesirile scrise de un script 2.4.1 6alor no pentru atr !utele de ntrare Quote:tel & numar de tele*on searc' & cautare url & lin? email & email datetime & data siBsau timp date & data mont' & luna $ee? & saptamana time & timp datetime&local & dataBtimp local num%er & numar ran6e & un numar dintr&o 6ama color & culoare in *ormat 'exazecimal (C))4444 2.5 /lemente retrase Armatoarele elemente HTML 4.4! au *ost retrase in HTML-: Quote:9acron@m= 9applet= 9%ase*ont= 9%i6= 9center= 9dir= 9*ont= 9*rame= 9*rameset= 9no*rames= 9stri?e= 9tt=

Curs HTML5 - Partea a III-a 3 HTML5 6 deo
<ana la aparitia HTML5 nu exista un standard pentru redarea *isierelor video intr&o pa6ina $e%, *isierele *iind pu%licate cu a,utorul unui plu6in (cum ar *i *las' . Necesitatea realizarii unui standard a aparut datorita *aptului ca %ro$serele nu utilizeaza aceleasi plu6inuri pentru redarea 4

2 7ormate * deo s suportul n !ro1sere (n acest moment sunt suportate 1 *ormate video & O'' & *isiere +66 cu codec video T'eora si codec audio Vor%is & MP4 & *isiere M<E04 cu codec video H.1 )uport n !ro1sere (nternet Explorer ". 3. Este recomandat sa includeti si atri%utele $idt' (latime si 'ei6't (inaltime pentru ca spatiul necesar *isierului video sa *ie rezervat cand se incarca pa6ina. - . +pera.3 Cum 5unct onea8a <entru a reda un *isier video in HTML. 3.354 si codec audio //C & We!M & *isiere .*isierelor video. (nsearam continutul intre ta6&urile 9video= si 9Bvideo=. HTML5 rezolva aceste pro%leme prin introducerea unui standard video. aspectul pa6inii se va modi*ica in momentul incarcarii acesteia.aveti nevoie de codul de mai . (n caz contrar.e%M cu codec video V<D si codec audio Vor%is 3.os: Code: (7elect /ll <video %$"="'ilm(o <*video> " "o#t$ol%=""o#t$ol%"> Nota: /tri%utul >controls> este *olosit pentru a adau6a la *isierul video controale (pla@. C'rome si 7a*ari suporta elementul 9video=. Ca sa intele6eti mai %ine tre%uie sa va 6anditi de cate ori ati *ost nevoiti sa utilizati un alt %ro$ser pentru ca cel pe care il *oloseati nu avea suport pentru redarea *isierelor video dintr&o anumita pa6ina sau de cate ori nu a tre%ui sa instalati in %ro$ser un plu6&in nou pentru a putea vedea aceste *isiere video. Nota: (nterenet Explorer D si versiunile mai vec'i nu suporta elementul 9video=. volume . )ire*ox. pause.

e%M. <entru a *unctiona in 7a*ari si versiunile viitoare de C'rome tre%uie sa adau6am un *isier M<E04 si unul . 5 . Fro$serul va reda primul *ormat recunoscut.4 Ta'-ur le HTML5 6 deo .* deo0 Ta' 9video= #e*ineste un *isier video 9source= #e*ineste resurse media multiple pentru elemente media cum ar *i 9video= si 9audio= 9trac?= #e*ineste textul pieselor in pla@erele media Descr ere 3.Quote:9video srcE>*lim. 9Bvideo= Exemplu de mai sus *oloseste un *isier +66 si va *unctiona in +pera.1 "tr !utele ta'-ulu .os atri%utele suportate in HTML 5 pentru ta6&ul 9video=.o66> $idt'E>134> 'ei6'tE>344> controlsE>controls>= Fro$serul dvs nu suporta ta6&ul video.4. Ana din caracteristicile speciale ale ta6&ului video este acela ca suporta mai multe surse ce *aca le6atura catre *isiere video in *ormate di*erite.* deo0 /veti in ima6inea de mai . t. Code: <video width="320" hei ht="2!0" "o#t$ol%=""o#t$ol%"> <%o&$"e %$"="'ilm(o " ty)e="video*o " *> <%o&$"e %$"="'ilm(m)!" ty)e="video*m)!" *> <%o&$"e %$"="'ilm(webm" ty)e="video*webm" *> +$ow%e$&l dv% #& %&)o$t. C'rome si )ire*ox. -&l video( <*video> 3.

cum sa citim si sa sta%ilim propietatile.idt' si videoHei6't sunt disponi%ile imediat. Celelalte propietati sunt disponi%ile dupa ce sunt incarcate metadatele *isierului video.Metode :Met&ods.9video= are deasemenea metode (met'ods . pauza (pausin6 si incarcare (loadin6 .os aveti a*isate metode video. propietati si evenimente suportate de ma. Exemplul urmator ilustreaza. cautare pe care le putem citi sau seta.5 HTML5 6 deo 9 DOM Elementul HTML. Nota: #intre propietatile video.1 HTML5 .< Prop etat :Propert es. cand elementul 9video= porneste.* deo0 . 7pre exemplu. si metodele de apelare. (n ta%elul de mai . <ana la aparitia HTML.oritatea %ro$serelor. cum sa adresam un element 9video=. Exista desemenea evenimente #+M ce ne pot noti*ica. 3. G . s /*en mente :/*ents. spre exemplu. Curs HTML5 . 7unt propietati (ex: durata.Partea a I6-a 3 HTML5 "ud o HTML5 prevede un standard pentru *isierele audio. propietati (properties si evenimente (events . volum.3.5.nu exista un standard pentru rederarea *isierelor audio intr&o pa6ina $e%. *ace pauza sau se opreste etc. doar video. intr&un mod simplu. exista metode pentru pornire (pla@in6 .

3aud o0 pentru %ro$serele care nu suporta elementul audio: Exemplu: Code: <.2 Cum 5unct onea8a? <entru a reda un *isier audio in HTML. Fro$serul va *olosi primul *ormat recunoscut. (nsa nu toate %ro$serele au aceleasi plu6inuri. /cest element poate reda *isiere de sunet sau stream audio. .speci*ica un mod standard de a include *isierele audio cu a.&dio> " "o#t$ol%=""o#t$ol%"> /tri%utul control adau6a %utoanele de control >pla@> (redare . #& %&)o$t."e%t eleme#t( <*.&dio %$"="%o# (o " "o#t$ol%=""o#t$ol%"> +$ow%e$&l d&m#e./stazi. <entru ca *isierul audio sa *ie redat si in (nternet Explorer si 7a*ari.tot ce tre%uie sa scrieti este: Code: <. 4.1 7ormate aud o s suportul n !ro1sere (n acest moment sunt suportate 1 *ormate pentru elementul audio: 4. Elementele sursa pot sa ai%a le6atura catre *isiere audio di*erite.aud o0 si . +pera si C'rome. ma. *ormatul *isierului tre%uie sa *ie MP3. D .&dio> Exemplul anterior *oloseste un *isier O'' si va *unctiona in )ire*ox. Elementul audio permite sa utilizati mai multe elemente sursa. HTML. Continutul se insereaza intre ta6&urile . >pause> (pauza si >volume> (volum .oritatea *isierelor audio sunt redate printr&un plu6in (cum ar *i *las' .%t$.&dio %$"="%o# (o <*.utorul elementului audio.vo.

#& %&)o$t. C'rome si 7a*ari . " .suporta dra6 and drop. )ire*ox. .1 )uport n !ro1sere (nternet Explorer ".3 Ta'-ur le HTML5 "ud o Ta' 9audio= #e*ineste continut audio 9source= #e*ineste resurse media multiple pentru elemente media cum ar *i 9video= si 9audio= Descr ere 4.&dio> 4.3. orice element putand *i tras dintr&un loc in altul.Exemplu: Code: <. Dra' and drop *ace parte din standardul HTML-.& <artea a V&a 5 HTML5 Dra' and Drop #ra6 and drop (prinde si lasa este o propietate *recventa ce ne permite sa mutam prin tra6ere un o%iect.aud o0 Curs HTML.&dio*m)e " *> +$ow%e$&l d&m#e.&dio "o#t$ol%=""o#t$ol%"> <%o&$"e %$"="%o# (o " ty)e=".1 "tr !utele ta'-ulu . dintr&o locatie in alta.!.%t$.3.&dio*o " *> <%o&$"e %$"="%o# (m)3" ty)e=". Nota: #ra6 and drop nu este suportat in 7a*ari -."e%t eleme#t( <*. 5.vo.

8html9(/) " d$.d> <%"$i)t ty)e="te.2 /%emple Dra' and Drop n HTML5 Mai . Metoda dataTrans5er.&lt013 4 <*%"$i)t> <*he.t.#%'e$(%etD. %t.ble="t$&e" o#d$. 0ev1 2 ev(d.v. Exemplu: Code: <!DOCTYPE HTML> <html> <he.113 ev()$eve#tDe'.t"5ev(t.$ et(id13 4 '&#"tio# d$o)0ev1 2 v. care spec*ica data ce va *i trasa.5.t.setData:.#%'e$( etD. sta%ileste tipul si valoarea acestei datei.os aveti un exemplu simplu de dra6 and drop.llowD$o)0ev1 2 ev()$eve#tDe'.t"13 ev(t.T$. 0ev1 2 !4 . i#i*"odebo.llowD$o)0eve#t1"><*div> <im id="d$.t. 7" %$"="im.t*/.%"$i)t"> '&#"tio# . atri%utul ondra6start apeleaza o *unctie.0"Te.t.$ et(. Code: <im d$.$ d.T$.0"Te." *> <*body> <*html> 5. .ble="t$&e" *> /poi va tre%ui sa speci*icam ce se va intampla cand elementul este prins (dra66ed .t. dra6(event .$t="d$.&lt013 4 '&#"tio# d$.t.3 Cum 5ac un element sa poate 5 tras :Dra''a!le.d> <body> <div id="div7" o#d$o)="d$o)0eve#t1" o#d$. (n exemplul anterior.))e#dChild0do"&me#t( etEleme#t+y6d0d. Code: '&#"tio# d$. (nainte de toate tre%uie sa setam valoarea >true> atri%utului dra''a!le al elementului. ove$=".=ev(d. 0eve#t1" width="33:" hei ht=":. .

Armatorul pas este sa vedem unde va *i lasat elementul prins.t.t.#%'e$(%etD. atri%utul ondrop apeleaza *unctia drop(event .6et#ata(>Text> .&lt013 4 Explicarea codului: & preia data prinsa cu metoda dataTrans*er. !! .0"Te. Cand datele prinse sunt lasate. (n mod implicit. are loc un eveniment de aruncare.0"Te.ev(d.prevent#e*ault( pentru evenimentul ondra6over: Code: eve#t()$eve#tDe'. tipul datei este >Text> si valoarea este id&ul elementului prins (>dra6!> . <entru a permite o tra6ere tre%uie sa prevenim manipularea implicita a elementului. Elementul canvas este utilizat pentru a desena intr&o pa6ina $e%. Evenimentul ondra6over speci*ica unde va *i lasata (dropped data prinsa.$ et(id13 4 (n acest caz.T$. /ceasta metoda va returna orice data care are acelasi tip in metoda set#ata( .t. Code: '&#"tio# d$o)0ev1 2 v.#%'e$( etD.t. /cest lucru este posi%il prin apelarea metodei event.))e#dChild0do"&me#t( etEleme#t+y6d0d. dateleBelementele nu pot *i trase in alte elemente. tre%uie sa plasam elementul prins.&lt01 (n *inal.$ d.T$.$ et(.=ev(d.Partea a 6I-a = HTML5 Can*as :Pan8a. Curs HTML5 .t"13 ev(t.t.t. (n exemplul anterior.t"5ev(t. & data prinsa este id&ul elementului prins (>dra6!> & se trans*orma elementul prins in element lasat & se apeleaza prevent#e*ault( pentru a preveni manipularea implicita a datei de catre %ro$ser /lte exemple: Tra6e o ima6ine inainte si inapoi & in acest exemplu este prezentat modul in care puteti muta o ima6ina inainte si inapoi intre doua elemente 9div=.113 ev()$eve#tDe'.

caractere (c'aracters si pentru a adau6a ima6ini.%"13 /poi creaza un o%iect de context: Code: v.#v. latimea si inaltimea elementului: Code: <".#v.%"13 v.utorul 8 Code: <%"$i)t ty)e="te.%" width="200" hei ht="700"><*".Ce este can*as :Pan8a.t="( etCo#te.t0"2d"13 ".t*/.#v. Canvas&ul (<anza este o zona dreptun6'iulara in care puteti controla *iecare pixel. casute (%oxes .t('ill<tyle="=>>0000"3 ".t('ill?e"t005057905@913 <*%"$i)t> >a*a)cr pt utilizeaza id&ul pentru a 6asi elementul canvas: Code: v. )urportul n !ro1sere Cum cream un element can*as <entru a adau6a un element canvas la o pa6ina HTML5 tre%uie sa speci*icam id&ul.%> #upa acest pas desenam canvas&ul cu a.%"$i)t"> v.t0"2d"13 !3 .$ "=do"&me#t( etEleme#t+y6d0")$im&l".$ ".% id=")$im&l". Elementul can*as are di*erite metode pentru a desena traiectorii (pat's .? Elementul HTML5 canvas utilizeaza >a*a)cr pt pentru a desena elemente 6ra*ice intr&o pa6ina $e%.#v.$ ". cercuri (circles .t="( etCo#te.v.#v.$ "=do"&me#t( etEleme#t+y6d0")$im&l".

(n pa6ina de mai .os puteti a*la coordonatele intr&un canvas. casutelor. sunt *olosite pentru a pozitiona desenela in canvas. cu numeroase metode pentru desenarea traiectoriilor. !1 . Coordonatele 2 si .!-4. =.in canvas.(!-4..2 /%emple de can*as-ur a Lne #eseneaza o linie spec*iciand de unde sa porneasca si unde sa se opreasca. caracterelor. <uneti mouse&ul in interiorul dreptun6'ilui.1 Intele'erea coordonatelor Metoda *illHect de mai sus are parametrii (4. ima6inilor etc. /sta inseamna ca: se deseneaza un dreptun6i de !-4xG. este un element HTML. % Cerc #eseneaza un cerc speci*icand dimensiunea. Armatoarele doua linii deseneaza un dreptun6'i rosu: Code: ".G. sus (4. =. incepand de la coltul din stan6a.4 .+%iectul 'etConte%t:?2d?.construit.t('ill?e"t005057905@913 Metoda 5 ll)t$le adau6a culoarea rosie iar metoda 5 ll@ect speci*ica *orma.4.t('ill<tyle="=>>0000"3 ". cercurilor. pozitia si dimensiunea.G. culoarea si pozitia.

Partea a 6II-a A HTML5 Inl ne )6# HTML. d Ima' ne <une o ima6ine in canvas. . Curs HTML5 .o*era suport pentru Inl ne )6# A. Clic? t'is %ar to vie$ ori6inal ima6e (545x!11 .c #rad ent #eseneaza un 6radient cu culorile speci*icate. (ma6e 'as %een scaled do$n !DI (-44x!!4 .e% 7V0 & de*ineste elemente 6ra*ice in *ormat 2ML 7V0 & elementele 6ra*ice 7V0 nu isi pierd din calitate cand *acem zoom pe ele sau cand le redimensionam 7V0 & orice element si orice atri%ut poate *i animat in *isiere 7V0 !4 . Clic? ima6e to open in ne$ $indo$.1 Ce este )6#? 7V0 E )cala!le 6ector #rap& cs 7V0 & este *olosit pentru a de*ini elemente 6ra*ice %azate pe vectori pt.

0"> <)oly o# )oi#t%="700570 !057B0 7. (ma6inile 7V0 pot *i printate cu o calitate inalta la orice rezolutie -. (ma6inile 7V0 pot *i cautate.Partea a 6III-a !- .3 )uport n !ro1sere (nternet Explorer ".4 Includerea )6# d rect n pa' n le HTML (n HTML putem include elemente 7V0 direct in pa6ina HTML. indexate.ml#%="htt)A**www(w3(o$ *2000*%v " ve$%io#="7(7" hei ht="7. )ire*ox. (ma6inile 7V0 pot *i scalate 4. (ma6inile 7V0 pot *i create si editate cu orice editor text 3. Exemplu: Code: <!DOCTYPE html> <html> <body> <%v .1C A. C'rome si 7a*ari suporta inline 7V0.ele utilizari 7V0 in locul altor *ormate (ca 8<E0 sau 0() sunt: !. A.7V0 & este o recomandare . (ma6inile 7V0 pot *i marite (zoom *ara ca ima6inea sa isi piarda din calitate A.2 "*antaBele )6# /vanta.05:0 705:0 7:057B0" %tyle="'illAlime3%t$oCeA)&$)le3%t$oCe-widthA93'ill-$&leAeve#odd3" *> <*%v > <*body> <*html> Hezultat: Curs HTML5 . +pera. scriptate si comprimate 1.

Elementele 6ra*ice desenate cu canvas raman nemodi*icate de catre %ro$ser. dar acestea sunt *undamental di*erite. Comparat e ntre Can*as s )6# Ta%elul urmator prezinta cele mai importante di*erente dintre canvas si 7V0. Canvas&urile sunt redate (incarcate pixel cu pixel. ceea ce inseamna ca *iecare element este disponi%il in cadrul DOM )6#.utorul 8ava7cript. #aca va tre%ui sa modi*icam pozitia. *olosit pentru descrierea elementelor 6ra*ice 3# in 2ML. 7V0 se %azeaza pe 2ML. intrea6a scena tre%uie redesenata. (n 7V0.Partea a IX-a D HTML #eolocal 8are :#eolocat on.C Can*as *s. incluzand si o%iectele care sunt acoperite de elementul 6ra*ic.ocuri • • Curs HTML5 .. Can*as • • • • )6# • • • • dependent de rezolutie nu suporta a6enti de evenimente capa%ilitati reduse pentru redarea textului ima6inea poate *i salvata ca .pn6 sau . )6# 7V0 si canvas va permit sa creati elemente 6ra*ice in %ro$ser. *iecare *orma desenata este prezentata ca un o%iect. <utem atasa a6enti de evenimente 8ava7cript pentru un element. )6# )6# este un lim%a. #aca atri%utele unui o%iect 7V0 sunt modi*icate. %ro$ser&ul va reincarca *orma. Can*as Can*as-ul desneaza instantaneu elemente 6ra*ice 3# cu a.p6 potrivit pentru cazurile in care o%iectele sunt redesenate *recvent independent de rezolutie suporta a6enti de evenimente potrivit pentru cazurile in care tre%uie redate supra*ete mari (0oo6le Maps redare cu viteza mica in cazul unor elemente complexe (orice va *olosi #+M va *i incet nu este potrivit pentru aplicatii de . !5 .

/ceasta optiune poate *i *olosita doar daca vizitatorul accepta localizarea pozitiei sale (datorita con*identialitatii utilizatorilor .to$( eolo".vi .2 )uport n !ro1sere (nternet Explorer ".(i##e$HTML="L.$ .tit&di#eA " E )o%itio#("oo$d%(l.to$( eolo". Exemplu: Code: <%"$i)t> v.1 Introducere /<(&ul 0eolocalizare (#eolocat on o*erit de HTML5 ne da posi%ilitatea de a a*la pozitia 6eo6ra*ica a unui vizitator.(i##e$HTML="Deolo".tio#1 2 #. C'rome. D.tit&de E "<b$ *>Lo# it&di#eA " E )o%itio#("oo$d%(lo# it&de3 4 <*%"$i)t> Explicatii: 7e veri*ica daca %ro$serul suporta 0eolocation.vi .D.tio#( etC&$$e#tPo%itio#0%howPo%itio#13 4 el%e2. !G . )ire*ox. D.os aveti un exemplu simplu de 6eolocalizare care returneaza latitudinea si lon6itudinea pozitiei utilizatorului.tio# i% #ot %&))o$ted by thi% b$ow%e$("34 4 '&#"tio# %howPo%itio#0)o%itio#1 2 . Mai .tio#01 2 i' 0#. pentru a o%tine pozitia utilizatorului.3 Et l 8area #olocat on )olosim metoda 'etCurrentPos t on:. Nota: /<(&ul 0eolocation este mai precis in cazul dispozitivelor prevazute cu 0<7 (ca i<'one .=do"&me#t( etEleme#t+y6d0"demo"13 '&#"tio# etLo". 7a*ari si +pera suporta 0eolocation.

).C3 ".(i##e$HTML="GtiliH.tii de%)$e Lo". se a*iseaza un o%iect de coordonate pentru *unctia speci*icata in parametru ( s'o$<osition .C3 4 4 Coduri de eroare: <ermisiune respinsa (<ermission denied & utilizatorul nu permite 0eolocalizarea <ozitie indisponi%ila (<osition unavaila%le & nu este posi%ila localizarea / expirat (Timeout & operatiunea a expirat D.$e.%e e$$o$(GFKFOLF8E??O?A .1 Ma n pularea eror lor s re5u8ur lor /l doilea parametru al metodei 6etCurrent<osition( este *olosit pentru a manipula erorile. D.$e #e"&#o%"&t. )unctia s&o1Pos t on:.%e e$$o$(T6MEOGTA . #aca nu. Exemplu: Code: '&#"tio# %howE$$o$0e$$o$1 2 %wit"h0e$$o$("ode1 2 ".)i$. preia a*isarea Latitudinii si Lon6itudinii.tie(" b$e.$&t o e$o. Exemplul de mai sus este unul simplu.to$&l . se a*iseaza un mesa.(i##e$HTML="F& %&#t di%)o#ibile i#'o$m. )e#t$& Deolo".4 "5 sarea re8ultatelor pe &arta <entru a a*isa rezultatul intr&o 'arta tre%uie sa accesam un serviciu de 'arti ce poate *olosi latitudinea si lon6itudinea.to$&l&i . 7peci*ica o *unctie ce va *i executata in cazul in care nu se poate determina pozitia vizitatorului.'l.%e e$$o$(PO<6T6OF8GFIJI6LI+LEA .C3 ". *ara manipularea erorilor. $e%)i#% "e$e$e.tiei &tiliH. e.(" b$e. Cel mai recomandat este 0oo6le Maps.t(" b$e.(i##e$HTML="Ce$e$e. #aca metoda 6etCurrent<osition( este executata cu succes.%e e$$o$(PE?M6<<6OF8DEF6EDA . )e#t$& . Exemplu: !D .$e(" b$e. lo".3.#aca suporta /<(&ul atunci se executa metoda 6etCurrent<osition( . de eroare.liH.(i##e$HTML="I .C3 ".

$ l. Exemple: & (n*ormatii locale la zi & /*isarea unor puncte de interes in apropierea utilizatorului & Navi6atie 0<7 !" .$ myO)tio#%=2 "e#te$Al.)holde$(%tyle(hei ht=O290).)Am.)%(F.tlo#E"NHoom=7!N%iHe=!00.tlo#=#ew oo le(m.)%*.)0do"&me#t( etEleme#t+y6d0"m.)Ty)e6dA oo le(m.)5titleA"Yo& .)=#ew oo le(m.)M"e#te$=" El.4.)holde$"15myO)tio#%13 v.ti"m.)Ty)e6d(?OIDMIP5 m.)holde$=do"&me#t( etEleme#t+y6d0Om.Code: '&#"tio# %howPo%itio#0)o%itio#1 2 v.tlo#=)o%itio#("oo$d%(l.)holde$(%tyle(width=O900).O3 m.l%e"3 do"&me#t( etEleme#t+y6d0"m.)Ty)eCo#t$olA'.)i*%t. Exemplu: Code: '&#"tio# %howPo%itio#0)o%itio#1 2 l.)%(M.vi .5 In5ormat spec 5 ce locat e Mai sus am prezentat exemple despre modul in care se poate determina pozitia unui utilizator pe o 'arta.$Ce$=#ew oo le(m.$Ce$02)o%itio#Al.tio#Co#t$olO)tio#%A2%tyleA oo le(m. D.tit&de3 lo#=)o%itio#("oo$d%(lo# it&de3 l. 0eolocalizarea poate *i desemenea *olosita pentru a o%tine in*ormatii speci*ice locatiei.$ m.t5 lo#1 m.)%(M.$e he$e!"413 4 D.)%(L.)holde$O1 m.tlo#5m. zoom si optiuni de tra6ere .1 )cr ptul #oo'le Map (n acest exemplu vom arata cum putem *olosi scriptul 0oo6le Map pentru a crea o 'arta interactiva (cu marca.l%e5 #.)holde$"1(i##e$HTML="<im %$"=O"Eim 8&$lE"O *>"3 4 (n exemplul anterior am utilizat latitudinea si lon6itudinea pentru a arata locatia intr&o 'arta 0oo6le (utilizand o ima6ine statica .)%(M.300N%e#%o$='.O3 v.)%( oo le.tlo#5HoomA7!5 m.$ m..t=)o%itio#("oo$d%(l.$ im 8&$l="htt)A**m.vi .tio#Co#t$ol<tyle(<MILL4 43 v.tit&deE"5"E)o%itio#("oo$d%(lo# it&de3 v.tL# 0l.)i%("om*m.

lon6itudine si precizie sunt intotdeauna returnate.Partea a X-a 34 .tio#01 2 i' 0#.tit&di#eA " E )o%itio#("oo$d%(l. & returneaza pozitia curenta a utilizatorului si continua sa actualizeze aceasta pozitie pe masura ca utilizatorul se misca (ca 0<7&ul intr&o masina .latitude coords. .tio#1 2 #.(i##e$HTML="L.D. clearWatc&:.os.accurac@ coords. speci*icate in ta%elul de mai .tio#("34 4 '&#"tio# %howPo%itio#0)o%itio#1 2 .A O! ectul #eolocat on . sunt returnate daca sunt disponi%ile.to$( eolo".altitude coords. /veti nevoie de un dispozitiv 0<7 precis pentru a testa aceasta metoda (spre exemplu un i<'one .(i##e$HTML="+$ow%e$&l dv%( #& %&)o$t.tio#(w.Date de es re Metoda 6etCurrent<osition( returneaza un o%iect daca este executata cu succes.= Metoda 'etCurrentPos t on:.$ .vi .tit&de E "<b$ *>Lo# it&di#eA " E )o%itio#("oo$d%(lo# it&de3 4 <*%"$i)t> Curs HTML5 . Exemplu.lon6itude coords.=do"&me#t( etEleme#t+y6d0"demo"13 '&#"tio# etLo".altitude/ccurac@ <recizia altitudinii unei pozitii D. Deolo".vi .alte metode nteresante 1atc&Pos t on:. <ropietatile atitudine. (n exemplul urmator prezentam metoda $atc'<osition( . Prop etate coords.'eadin6 coords.speed timestamp Descr ere Latitudinea ca numar zecimal Lon6itudinea ca numar zecimal <recizia unei pozitii /ltitudinea in metrii (desupra nivelului marii <ozitia in 6rade. Code: <%"$i)t> v. & opreste metoda $atc'<osition( .to$( eolo". de la Nord Viteza in metrii pe secunda #ataBtimpul raspunsului coords. masurata in sensul acelor de ceas.t"hPo%itio#0%howPo%itio#13 4 el%e2. Celelalte propietati.

e(l. 1F.v.%t#. #atele sunt stocate in zone di*erite pentru site&uri di*erite si un site poate accesa doar datele stocate de el. e().l<to$. pa6inile $e% pot stoca date local.l<to$. Cum se creeaza si se acceseaza un o%iect local7tora6e: <H< Code: <%"$i)t ty)e="te.*oloseste >a*a)cr pt pentru a stoca si accesa datele.l<to$.%"$i)t"> lo". e(). e"o&#t1 E73 4 3! . in %ro$serul utilizatorului.%t#. e(). HTML. e"o&#t1 2 lo". HTML5 o*era 3 o%iecte noi pentru stocarea de date la client: & local)tora'e & stocarea datelor *ara limita de timp & sess on)tora'e & stocarea datelor pentru o sesiune <ana acum acest lucru era posi%il prin coo( es dar in cazul unei cantitati mari de date.me="<mith"3 do"&me#t(w$ite0lo".l<to$.t*/.v. e(l. se micsoreaza mult viteza de accesare a unui site.l<to$. datorita *aptului ca acestea sunt transmise la *iecare cerere catre server. )uport n !ro1sere+ )tocarea datelor la cl ent Cu HTML-.%"$i)t"> i' 0lo".me13 <*%"$i)t> (n exemplul urmator numaram de cate ori este accesata o pa6ina: <H< Code: <%"$i)t ty)e="te.t*/. e"o&#t=F&mbe$0lo".1F HTML5 )tocare We! :We! )tora'e. ele *iind disponi%ile oricand.1 O! ectul local)tora'e /cest o%iect stoc'eaza datele *ara limita de timp. (n HTML5 datele nu mai sunt trecute la *iecare cerere catre server ci sunt *olosite doar atunci cand e necesar acest lucru. /st*el se poate stoca o mare cantitate de date *ara a a*ecta per*ormantele serverului.

Incarcare redusa a serverului & %ro$serul va descarca doar resursele actualizateBmodi*icate de pe server )uport n !ro1sere+ 33 .l<to$. ceea ce inseamna ca o aplicatie $e% este cac'e&uita. e"o&#t=73 4 do"&me#t(w$ite0"JiHite "E%e%%io#<to$. Navi6are o**line & utilizatorii pot *olosi aplicatia c'iar daca sunt o**line 3. e(). e"o&#t E " o$i("13 <*%"$i)t> 1F. e"o&#t1 E73 4 el%e 2 %e%%io#<to$. Cand utilizatorul inc'ide %ro$serul datele sunt sterse. e().%t.#"3 do"&me#t(w$ite0%e%%io#<to$.l<to$.%t#. i#. *iind ulterior accesi%ila *ara o conexiune la internet. Cum cream si accesam session7tora6e: <H< Code: <%"$i)t ty)e="te. e().%t#. %e%i&#e("13 <*%"$i)t> Curs HTML5 . e"o&#tE" i# . de "E lo".1 O! ectul sess on)tora'e Hetine datele pentru o sesiune.t*/. Cac'e&uirea aplicatiilor o*era trei avanta.me="C$i%ti.%"$i)t"> %e%%io#<to$. e(l. Viteza & resursele cac'e&uite de incarca mai repede 1.t.v."e. viHit. e(). e().el%e 2 lo".me13 <*%"$i)t> (n exemplul urmator numaram de cate ori este accesata o pa6ina intr&o sesiune <H< Code: <%"$i)t ty)e="te.1 Ce este "ppl cat on Cac&e HTML5 introduce application cac'e. e().%"$i)t"> i' 0%e%%io#<to$. e"o&#t1 2 %e%%io#<to$.e unei aplicatii: !.t*/. e().Partea a XI-a 11 HTML5 "pp Cac&e 11. e(l. e"o&#t=73 4 do"&me#t(w$ite0"P.v. e"o&#t=F&mbe$0%e%%io#<to$.

#i'e%t="demo(. An *isier man*i*est tre%uie servit cu tipul M(ME corect care este >textBcac'e&mani*est> si tre%uie sa *ie con*i6urat pe serverul de $e%. #aca atri%utul mani*est nu este speci*icat.2 /%emplu HTML5 Man 5est Cac&e Exemplul urmator arata un document HTML cu cac'e mani*est (pentru navi6are o**line .appcac&e>."he"> <body> Co#ti#&t&l do"&me#t&l&i((( <*body> <*html> 11. C"CH/ M"GI7/)T & *isierele listate su% acest 'eader vor *i cac'e&uite dupar ce sunt 31 ./pplication cac'e este suportat in ma.oritatea %ro$serelor cu exceptia (nternet Explorer. pa6ina nu va *i cac'e&uita (cu exceptia cazului in care pa6ina este speci*icata direct in *isierul mani*est .#i'e%t="demo(. 11."he"> ((( <*html> +rice pa6ina ce are atri%utul mani*est speci*icat va *i cac'e&uita in momentul in care este vizitata. Extensia recomandata pentru *isierul mani*est este: >.))".4 7 s erul Man 5est )isierul mani*est este de tip text si este *olosit pentru a spune %ro$serului ce tre%uie cac'e&uit (si ce nu tre%uie niciodata sa *ie cac'e&uit . 11.))". )isierul mani*est are trei sectiuni: !. Exemplu: Code: <!DOCTYPE HTML> <html m. Exemplu: Code: <!DOCTYPE HTML> <html m.3 Got un de !a8a Cac&e Man 5est <entru a activa application cac'e tre%uie sa includem atri%utul mani*est in ta6&ul .&tml0 al documnetului.

7"LLI"CH & *isierele listate su% acest 'eader speci*ica pa6ini de rezerva in cazul in care o pa6ina nu este accesi%ila 11.2 G/TWO@H 7ectiunea NET. Exemplu: Code: FETLO?KA lo i#()h) #aca *olosim asteris? (K . G/TWO@H & *isierele listate su% acest 'eader necesita o conexiune la server si nu vor *i niciodata cac'e&uite 1.3 7"LLI"CH 7ectiunea )/LLF/CJ de mai .("%% *lo o( i' *m. iar cel de&al doilea este rezerva (*all%ac? .i#(/% 11.1 C"CH/ M"GI7/)T <rima sectiune (C/CHE M/N()E7T este o%li6atorie. Exemplu: Code: CICHE MIF6>E<T *tem.4. toate resurseleB*isierele vor necesita o conexiune la internet.+HJ de mai . Exemplu: Code: *html9* *o''li#e(html Nota: <rimul AH( (uni*orm resource identi*ier este resursa. Exemplu: Code: FETLO?KA P 11.5 "ctual 8area cac&e-ulu 34 .4.os speci*ica ca *isierul >o**line.'tml> va *i servit pentru toate *isierele din *olderul B'tml-B in cazul in care nu se poate sta%ili o conexiune la internet.os speci*ica ca *isierul >lo6in.descarcate pentru prima data 3.p'p> nu va *i niciodata cac'e&uit si nu va *i disponi%il o**line.4. 11.

Curs HTML.& <artea a 2(V&a 14 7ormularele HTML5 14.= O!ser*at cu pr * re la "ppl cat on Cac&e /veti 6ri. Nota: %ro$serele au limite di*erite pentru volumul de date pe care pot sa il cac'e&uiasaca (unele %ro$sere au -MF limita pentru *iecare site . 11. +data ce un *isier este cac'e&uit. )isierul mani*est este modi*icat (vezi nota mai . c'iar daca *isierul de pe server este mo*i*icat.("%% *lo o( i' *m. va tre%ui sa modi*icati *isierul mani*est. aceste operatii nu vor *i re&cac'e&uite.1 T pur de nput HTML5 introduce noi tipuri de input pentru *ormulare. e ramane cac'e&uita pan6a cand una din urmatoarele actiuni se petrece: !. #aca editati o ima6ine sau daca modi*icati o *unctie 8ava7cript.i#(/% FETLO?KA lo i#()h) >ILL+ICKA *html9* *o''li#e(html Nota: Liniile care incep cu >C> reprezinta comentarii dar mai au si un alt scop. %ro$ser&ul va continua sa a*iseze versiunea cac'e&uita. (n acest curs vom discuta despre: 3- . Atilizatorul ster6e cac'e&ul %ro$serului 3. /ctualizarea datei si versiunii in linia de comentariu este o cale de a *ace %ro$ser&ul sa re&cac'e&uiasca *isirele.os 1. Cac'e&ul aplicatiei este actualizat prin pro6ramare Exemplu: Code: CICHE MIF6>E<T = 2072-02-27 v7(0(0 *tem. <entru a va asi6ura ca %ro$serul actualizeaza cac'e&ul. Cac'e&ul unei aplicatii este actualizat cand *isierul mani*est se sc'im%a.+data ce o aplicatie este cac'e&uita.a la ce cac'e&uiti.

. $ee?.ilA <i#)&t ty)e="em. /%emplu+ Code: P&#"teA <i#)&t ty)e="#&mbe$" #. /%emplu+ Code: E-m.me="&%e$8em.& email & url & num%er & ran6e & #ate pic?ers (date.il" *> 14.1.2 T p nput . 35 .1 T p nput .1.il" #.1.num!er )olosit pentru introducerea si validarea datelor de tip numeric.3 T p nput . /%emplu+ Code: Home). eA <i#)&t ty)e="&$l" #. 7e pot inpune restrictii cu privire la numerele acceptate in input. mont'.me=")oi#t%" mi#="7" m.me="&%e$8&$l" *> 14.ema l )olosit pentru introducerea si validarea datelor de tip ema l.url )olosit pentru introducerea si validarea datelor de tip adresa E@L.="70" *> <uteti *olosi urmatoarele atri%ute pentru a adau6a restrictii. datetime. datetime&local & searc' & color 7uport in %ro$sere: Gota+ cel mai %un suport pentru aceste tipuri noi inputuri este o*erit de Opera. time. 14.

color )olosit pentru campuri ce contin culori. luna si anul (timp ATC datetime&local & selecteaza timpul.searc& )olosit pentru campuri de cautare si se comporta ca si campurile o%isnuite de text.t.# e" #.= T p nput . 14.1. /%emplu+ Code: <i#)&t ty)e="$. data. luna si anul mont' & selecteaza luna si anul $ee? & selecteaza saptamana si anul time & selecteaza timpul (ora si minutul datetime & selecteaza timpul. luna si anul (timp local Armatorul exemplu va permite sa selectati o data dintr&un calendar: Code: D.os va permite sa selectati o culoare dintr&un color pic?er.4 T p nput ..="70" *> <uteti *olosi urmatoarele atri%ute pentru a adau6a restrictii.1.1. Exemplul de mai .te" #.Date P c(ers HTML5 o*era mai multe tipuri de input pentru selectarea datei si a timpului: date & selecteaza data. data.5 T p nput .me="&%e$8d.14. 14.1. 3G .ran'e )olosit pentru introducerea si validarea datelor dintr&un ran6e (6ama de numere.A <i#)&t ty)e="d.A T p nput .te" *> 14.me=")oi#t%" mi#="7" m.

Ta6&ul 9?e@6en= speci*ica un 6enerator de perce'e de c'ei intr&un *ormular.l&e="Ch$ome"> <o)tio# v.l&e="O)e$.(e$'en0 este de a o*eri o cale securizata pentru autenti*icarea utilizatorilor.)lo$e$"> <o)tio# v.li%t> An element 9input= cu valori prede*inite in 9datalist=.(e$'en0 7copul elementului . nput0 9?e@6en= & 7peci*ica un camp tip 6enerator de perec'e de c'ei intr&un *ormular 9output= & Heprezinta rezultatul unui calcul Nota: Nu toate %ro$serele suporta noile elemente pentru *ormulare.1.me="&%e$8"olo$" *> Curs HTML.t.l&e="6#te$#et E."> <o)tio# v. 15.datal st0 speci*ica o lista de optiuni prede*inite pentru elementul 9input= si este *olosit pentru a adau6a o optiune de >autocompletare> in elementul 9input=.l&e="<.l&e=">i$e'o.datal st0 Elementul .introduce noi elemente pentru *ormulare: 9datalist= & 7peci*ica o lista de optiuni prede*inite pentru elementul .& <artea a 2V&a 15 /lemente 5ormularelor n HTML5 15.1 Go elemente n 5ormulare HTML.1 /lementul . sunt 6enerate doua c'ei.$i"> <*d. Exemplu: Code: <i#)&t li%t="b$ow%e$%" *> <d."> <o)tio# v. Atilizati lista de atri%ute a elementului 9input= pentru a il le6a cu un element de tip 9datalist=./%emplu+ Code: C&lo. 3D . una privata si una pu%lica.t.$eA <i#)&t ty)e=""olo$" #. Cand *ormularul este trimis.'.li%t id="b$ow%e$%"> <o)tio# v.2 /lementul .1. <uteti totusi sa incepeti sa le utilizati deorece ele se vor comporta ca si campuri text in %ro$serele care nu suporta noile elemente. 15.

(v.t" #. (n particular.me="&%$8#.l&e="90" *> =<o&t)&t #. Exemple de sectiuni pot *i capitolele. ." v.l&e=). acesta putand *olosi certi*icatul pentru urmatoarele autenti*icari.output0 Elementul .$%e6#t0b(v. *ara un element na* 3" .l&e1">0 <i#)&t ty)e="$.sect on0 Elementul sect on reprezinta o sectiune 6enerica a documentului sau a aplicatiei.l&e1E).1.(v. El de*ineste si noi elemente semantice. Go le elemente semant ce d n HTML5 HTML.l&e="90" *>700 E<i#)&t ty)e="#&mbe$" #. + sectiune. Elementul *ooter de unul sin6ur este su*icient pentru ast*el de cazuri. cum ar *i termenii de utilizare."tio#="te%t8Cey e#()h)" method=" et"> GtiliH.output0 reprezinta rezultatul unui calcul (ca cel realizat de un script .nu este doar despre reducerea mar?upului existent (desi *ace destul de mult in acest sens . Exemplu: Code: <'o$m .$eA <Cey e# #. b"><*o&t)&t> <*'o$m> Healizeaza un calcul si arata rezultatul intr&un element de tip 9output=. pa6ina de start sau pa6ina de cop@ri6't." 'o$=".$%e6#t0. in*ormatii de contact. Nu toate 6rupurile de lin?uri de pe o pa6ina tre%uie sa *ie cuprinse intr&un element na* & numai sectiunile care sunt alcatuite din %locuri principale de navi6are sunt potrivite pentru elementul na*.me" *> C$i)t. ta%urile dintr&un dialo6 %azat pe ta%uri sau sectiunile numerotate ale une teze. + pa6ina de start poate *i impartita in sectiuni de introducere.me="%e"&$ity" *> <i#)&t ty)e="%&bmit" *> <*'o$m> An *ormular cu camp 9?e@6en=. C'eia pu%lica poate *i *olosita pentru a 6enera un certi*icat pentru client. este o 6rupare tematica a continutului.# e" #.3 /lementul . Exemplu: Code: <'o$m o#i#)&t=".na*0 Elementul na* reprezinta o sectiune a unei pa6ini care se lea6a de alte pa6ini sau la parti din pa6ina: practic o sectiune cu lin?uri de navi6are.me="b" v.me=".C'eia privata este stocata local. iar c'eia pu%lica este trimisa la server. in acest context. 15. de o%icei avand un antet. .to$A <i#)&t ty)e="te.me=". stiri. este ceva o%isnuit ca in su%solul de pa6ina sa existe o lista scurta de lin?uri la pa6inile uzuale ale unui site.

cum ar *i cine a scris&o. . un comentariu lasat de utilizatori.&r'oup0 Elementul &r'oup reprezinta titlul unei sectiuni. dar acest lucru nu este o%li6atoriu. un *ormulat de cautare sau orice lo6ouri relevante. lin?uri catre documentele conexe. date de cop@ri6't si altele. Elementul &eader poate *i *olosit de asemenea pentru cuprinsul unei sectiuni. pa6ina.art cle0 Elementul art cle reprezinta o componenta a unei pa6ini care consta dintr&o compozitie independenta dintr&un document. reprezinta anexe. /cesta poate *i o postare de pe *orum. . Elementul este *olosit pentru a 6rupa un set de elemente &1 . El contine de o%icei in*ormatii despre sectiune. An element &eader va contine de o%icei titlul unei sectiuni (un element &1 . Cand un element *ooter contine sectiuni intre6i. un articol de ziar sau de revista. cum ar *i su%&titluri. . /semenea sectiuni sunt deseori reprezentate ca %are laterale de tiparituri.t me0 Elementul t me reprezinta ori o reprezentare a orei in *ormat cu 34 de ore ori o data precisa in calendarul 6re6orian. "rt cole Haide sa vedem ce putem sa *acem in le6atura cu acest mar?up: Code: <div "l..$C" 14 .5ooter0 Elementul 5ooter reprezinta un su%sol pentru cel mai apropiat element ierar'ic superior sau element root al sectiunii. 7u%solurile nu tre%uie sa apara neaparat la s*arsitul unei sectiuni.&= cand titlul are niveluri multiple. . titluri alternative sau slo6ane.mar(0 Elementul mar( reprezinta o secventa de text intr&un document evidentiata sau su%liniata in scopuri in*ormative. h$e'="=" $el="booCm.urul elementului si care poate *i considerat separat de continut. indexuri. casete redactionale lun6i. aplicatie sau site si pentru care intentia este sa *ie distru%uita independent sau sa *ie reutilizata. un $id'et sau 6ad6et interactiv sau alta *orma independenta de continut. pentru 6rupuri de elemente na* si pentru alt continut care este considerat separat de continutul principal al pa6inii. optional insotita de ora si *us orar.%%=")o%t-d. Elementul poate *i *olosit pentru e*ecte tipo6ra*ie cum ar *i citatele evidentiate sau %arele laterale. . acorduri de licentiere stu*oase si alte tipuri de continut de acest *el.%%="e#t$y"> <) "l.&eader0 Elementul &eader 6rupeaza un set de detalii introductive sau navi6ationale. desi de o%icei acolo apar. <*)> <h2> <. pentru pu%licitate. .as de0 Elementul as de reprezinta o sectiune a unei pa6ini care consta din continut care este tan6ential le6at de continutul din .te"> O"tobe$ 225 200.&= sau un element &'roup .

d. 7i in HTML.de$> ((( <*. tre%uie sa ne dam inapoi un pas..art cle0. #ar speci*icatiile HTML.te"> O"tobe$ 225 200.%%=")o%t .. /m vazut de. tre%uia sa va limitati la un sin6ur . #ar HTML. #ar. care are un nou nod in sc'ema documentului.o*era un element mai speci*ic pentru cazul o%isnuit de marcare a unui articol pe o pa6ina & numit su6estiv elementul . #aca ati *i vrut un sin6ur nod radacina in sc'ema. Code: <.&10 per document L Nu va da asta peste cap sc'ema articolului L Nu.vel d.vel d.spune ca un element .> <*h7> <*he.&20 intr&un .> <*h2> ((( <*div> #in nou.$ti"le> <he. nu ar tre%ui sa avem un .title="li#C to thi% )o%t"> T$.a elementul .vel d..$ti"le> V&ati prins L /m sc'im%at elementul .valid. (n HTML 4.te"> O"tobe$ 225 200. Va voi arata mai intai si apoi va voi explica: Code: <. h$e'="=" $el="booCm.$C" title="li#C to thi% )o%t"> T$..> <*h2> ((( <*.. singura modalitate de a crea sc'ema unui document a *ost cu a. 1! . <*)> <h7> <.$ti"le> <) "l.de*inesc un al6oritm pentru 6enerarea sc'emei documentului care incorporeaza noi elemente semantice in HTML-.&10 in mar?upul dumneavoastra.&10.*iecare sectiune poate avea elementul propriu . h$e'="=" $el="booCm. 7copul sau este sa impac'eteze toate elementele care *ormeaza antetul articolului (in acest caz.art cle0 creeaza o noua sectiune. /l6oritmul HTML. dar.y <*.&eader0 in actiune. dar nu este totusi atat de simplu. data de pu%licare a articolului si titlul .utorul elementelor . dar pentru a intele6e de ce nu.y <*. acesta este HTML.y <*.d.$C" title="li#C to thi% )o%t"> T$.&eader0.&10 . Mai exista o sc'im%are pe care ar tre%ui sa o *aceti.&10 si l&am impac'etat intr&un element .de$> <) "l. <*)> <h2> <.$ti"le> /'.&=0.%%=")o%t .

HTML 4 nu are element de titlu generic. dar nu pe manadoua. fiti sigur ca erificati re%ultatul in &'()* +utliner si ca schema documentlui dumnea oastra are sens.cu noile elemente de sectiune si noile re6uli pentru elementele de tip titlu existente.art cle0 de*ineste un nod auto&continut in sc'ema documenteului. + %ucata de continut este luata dintr&o sursa si inserata in pa6ina intr&o parte. Cam neplacut. mai ales daca pa6ina dumneavoastra este mai curand >asam%lata> decat >creata>.de$"> <h7> My Leblo <*h7> <) "l.a ca ta6urile si tutlurile sa se potriveasca cu nivelul ierar'ic al ta6urilor de titluri din pa6ina in care o lipiti. /re sase elemente numerotate stric? 9'!= & 9'5=.h((( <*)> <*. elementul .> Este *oarte %ine pentru %ucati mici de continut.y <*h2> <*div> ((( thi% e''o$tle%%( <*)> 13 . 7i aceasta este pro%lema pe care o rezolva HTML. realitate este putin mai complicata decat lasa sa se inteleaga aici. #aca *olositi noi elemente de sectiune.de$> >h7> I %y#di".art cle0. Copiati&o si lipiti&o in pa6ina dumneavoastra.$ti"le> <he.&10 o*era titlul pentru acel nod din sc'ema si toate elementele de sectiune de pe pa6ina vor ramane la ce nivel de ierar'ie erau inainte. Elementul .de$> <)> Lo$em i)%&m bl.vel d. care tre%uie ordonate ierar'ic in exact aceeasi ordine. Pro5esorul Mar(up spune+ Precum toate lucrurile de pe web. va pot da acest mar?up: Code: <. dar daca ceea ce lipiti reprezinta o sectiune intrea6a L (n acest caz. deoarece intre6 codul este continut intr&un .%%="e#t$y"> <h2> T$.Ci# <*div> ((( <div "l. Noile elemente "explicite" de sectiune (cum ar fi <h1> impachetat in <article>) pot interactiona in moduri nebanuite cu echile elemente de sectiune "implicite" (<h1> ! <h"> de unele singure).te )o%t <*h7> <*he.$ti"le> si il puteti copia si lipi oriunde in pagina dumneavoastra *ara modi*icari. >(ata o %ucata de cod HTML. Multe tutoriale sunt structurate in acest *el.%%="t. li#e"> I lot o' e''o$t we#t i#to m.Este o sc'im%are drastica *ata de HTML 4 si iata de ce este un lucru %un.$aca trebuie sa le folositi pe amandoua pe aceeasi pagina. "ntetur Code: <div id="he. Multe pa6ini $e% sunt 6enerate prin intermediul template&urilor. tutorialul va citi ceva de acest 6en: >(ata o %ucata de cod HTML.h bl. #iata a a fi mult mai simpla daca folositi ori o metoda ori cealalta.&10 nu este o pro%lema.> 7a va explic alt*el. o alta %ucata de continut este inserata in alta parte. )aptul ca dispune de un element . Copiati&o si lipiti&o intr&un editor de text si aveti 6ri.

care apan acum nu a dispus de mar?up standard.I lot o' e''o$t we#t i#to m. Este un lucru di*icil sa&l marc'ezi.Ci# ((( <*he. Este HTML. ar *i adau6at un nod *antoma la sc'ema documentului.&eader0 pentru acest scop. elementele .&eader0.vel d.. Code: My Leblo 0h71 Q E .de$> <h7> My Leblo <*h7> <) "l. #ar HTML. 7c'ema pa6inii date exemplu arata asa: Code: My Leblo 0h71 Q E . #aca am *i incercat sa il marcam cu un 9'3=.&10 si .T$.%%="t.Ci# Q thi% e''o$tle%%( 0h21 11 .. dar inseamna ca nu exista un mod pentru a marca slo6anul >/ lot o* e**ort $ent into ma?in6 t'is e**ortless>.&20. il puteti pastra.6Om oi# to P$. li#e"> I lot o' e''o$t we#t i#to m. /ceasta inseamna ca este un su%titlu care nu isi creeaza propria sectiune. (n HTML 4. cum ar *i . 7peci*icatia HTML.o*era cateva elemente semantice aditionale pentru anteturi si sectiuni. adica nimic.are exemple reale de *olosire a elementului . Luate impreuna.. dar nu inseamna nimic. (ata cum ar atata pe pa6ina noastra data exemplu: Code: <he.de$> thi% e''o$tle%%( <*)> E %ine. dau structura pa6ini. &e ! <*h2> <*div> Nu este nimic 6resit cu acest mar?up. Elementul d * nu are semantica de*inita si nici atri%utul d nu are semantica de*inita. Exista unelte online si extensii de %ro$ser care va permit sa vizualizati sc'ema documentului.&=0 erau singura care de a crea sc'ema documentului. /plicatiile de tip >screen reader> *olosesc sc'ema documentului pentru a a.&10 & .valid. Elementele de antet.<div "l. An slo6an este precum un su%titlu. (Anui Aser /6ent nu ii este permisa deductia nici unui inteles din valoarea atri%utului d. HTML.d * dJ?s&a8!ot?0 si ar avea aceeasi valoare semantica. Este o metoda des utilizata. ele creeaza o sc'ema pe care o puteti *olosi pentru a vizualiza (sau navi6a in pa6ina.%%="e#t$y"> <h2> 6Om oi# to P$.y 0h21 Q E .de*ineste un element .d * dJ?&eader?0. #ar ce spuneti despre slo6an L An alt o%icei.uta utilizatorii nevazatori sa navi6'eze in pa6ina. &e ! 0h21 Este %ine. dar este >atasat> titlului principal. #aca va place. Va spune tuturor celor care vor sa stie ca aceasta este un antet. Mai intai 'aideti sa scapam de antetul . /ti putea sc'im%a aici in .

%%="e#t$y"> <h2> 6Om oi# to P$.Ci# . este c'iar mai rau: Code: My Leblo Q E .de$> ((( <div "l.vel d.&'roup0. <ro%a%il am putea marca slo6anul ca un .&30 L Nu.y 0h31 . luate laolalte.y 0h21 Q E .de$> <h $o&)> <h7> My Leblo <*h7> <h2> I lot o' e''o$t we#t i#to thi% e''o$tle%%( <*h2> <*h $o&)> ((( <*he. &e! <*h2> <*div> 14 .E . care a >*urat> copii care apartineau de drept nodului radacina.. &e ! 0h31 thi% e''o$tle%%( 0h21 /cum avem in continuare un nod *antoma in sc'ema documentului. 7i de aceea am a.T$.y <*h2> <*div> ((( <div "l.o*era o solutie pentru aceasta: elementul . &e ! 0h21 #ar aceasta nu este structura documentului. 7lo6anul nu reprezinta o sectiune: este doar un su%titlu.vel d.p classJ?ta'l ne?0 HTML.. ele creeaza un sin6ur nod in sc'ema documentului. #at *iind acest mar?up: Code: <he. (ndi*erent cat de mult incercam sa sc'im%am lucrurile.T$. >/ lot o* e**ort $ent into ma?in6 t'is e**ortless> va ateriza in aceasta reprezentare. Elementul .Q E Q E 0h71 I lot o' e''o$t we#t i#to m..&'roup0 actioneaza ca un am%ala. Ce inseamna >inrudite> L (nseamna ca.%%="e#t$y"> <h2> T$.vel d. 7i aici apare pro%lema: HTML 4 nu o*era o cale pentru a a marca su%titlu *ara a&l adau6a la sc'ema documentului.uns sa *olosim mar?up *ara valoare semantica..6Om oi# to P$.&20 si vom marca *iecare titlu din articol ca un .6Om oi# to P$. asa cum este . pentru doua sau mai multe elemente de titrare inrudite.

din cauza *aptului ca )ire*ox stie ca . #aca includeti mar?up cum ar *i .6Om oi# to P$.T$. dar este un mic sc'epsis pe care tre%uie sa il stiti. #intre %ro$serele ma.utor aici. ast*el incat elementele apar ca *rati. 7i acest lucru mer6e. . lista din Mozilla )ire*ox este stocata in ns/lementTa!le. .. &e ! 0h21 <uteti testa pa6inile dumneavoastra in HTML.vel d. dar *iecare %ro$ser are nevoie de putin a. de exemplu ca si cum ar a ea o regula . .ore. Elementele care nu sunt in aceasta lista sunt tratate ca >elemente necunoscute>.-. #ar daca scrieti . #e exemplu. 1.. ca tre%ui sa de*initi manual stilul de a*isare: Code: 1- . Exista doua pro%leme *undamentale cu elementele necunoscute.un6e sa *ie copil al lui .cpp din Mozilla include in*ormatii despre ce tipuri de alte elemente poate contine *iecare element. raspunsul lui (nternet Explorer la maandoua intre%arile a *ost cel mai pro%lematic. /st*el. al doilea para6ra* il inc'ide in mod implicit pe primul. #ar ce stil implicit tre%uie aplicat acestor elemente necunoscute L 2.span0 a.span0.cpp. elementul span nu inc'ide para6ra*ul. Cum ar tre!u sa arate DOM-ul elementulu ? ns/lementTa!le. Lasati&le sa mosteneasca proprietatile C77 care sunt in vi6oare oriunde apar in pa6ina si lasati autorul pa6inii sa speci*ice toate stilurile prin C77. /ceasta inseamna ca pot contine alte elemente de tip container.span0. stiu . La prima intre%are ar tre%ui sa *ie relativ usor de raspuns.care sunt elemete de tip container. in mare parte. (7ocant. nu in relatie parinte & copil.le vor stiliza implicit ca d spla$+!loc(.!loc(Kuote0 este indentat cu o mar6ine la stan6a si . #aca vreti sa *olositi aceste elemente in %ro$serele mai vec'i.y 0h21 Q E .p0. NA dari nici o stilizare speciala elementelor necunoscute.p0 in #+M.p0.p0 este un element %loc care contine elementul . iar %ro$serele care se con*ormeaza HTML. Pro5esorul Mar(up spune+ 'oate browserele afisea%a elementele necunoscute in linie. #i*eritele %ro$sere raspund acestor intre%ari in mod di*erit./ceasta este sc'ema documentului care este creat: Code: My Leblo 0h7 o' it% h $o&)1 Q E .+utliner pentru a va asi6ura ca *olositi corect elemetnele titrare. Cum se 'est onea8a elementele necunoscute )iecare %ro$ser are o lista de %aza de elemente HTML pe care le suporta.&10 este a*isat intr&un *ont mai mare.p0. Care ar tre!u sa 5 e st lul acestor elemente ? (mplicit.p0 are spatiere deasupra si dedesu%t.d spla$+ nl ne Exista cateva elemente noi de*inite in HTML.

.t*"%%"> .$ti"le> <h7> Lel"ome to 6#ite"h<*h7> <)>Thi% i% yo&$ <%). %olid $ed 4 <*%tyle> ((( <.%).$ti"le 2 di%)l.art cle0 ca un element de tip container si nici nu va pune o %ordura rosie in .t #ode "(" o' h71 #ar acesta este #+M&ul pe care il creeaza versiunile vec'i de (nternet Explorer Code: 15 . #ar stati. Toate elementele la care v&ati asteptat sa *ie copii directi ai elementului necunoscut vor *i introduse ca *rati. (nternet Explorer " rezolva aceasta pro%lema. (ata aici o mostra de arta /7C(( pentru a ilustra di*erenta.t #ode "Thi% i% yo&$ " .yA blo"C3 bo$de$A 7).$ti"le5 . (nternet Explorer nu aplica nici un fel de stilizare pe documentele necunoscute.#> ( <*)> <*. #e exemplu aveati acest mar?up: Code <%tyle ty)e="te.urul elementului..t #ode "Lel"ome to 6#ite"h" . /cesta este #+M&ul pe care il dicteaza HTML-: Code: Q E Q Q Q E Q E Q E Q Q Q E .$ti"le> (nternet Explorer ( pana la si inclusiv (ED nu va trata elementul .)tio#5 'i &$e5 'oote$5 he.. va insera elementul in DOM ca un nod gol fara copii.y" .t #ode "'i$%t d. care rezolva si aceasta pro%lema .te. / doua pro%lema este ca #+M&ul pe care il creeaza %ro$serele atunci cand intalnesc elemente necunoscute.%ide5 det.Heset 7t@les'eet a lui Hic' Clar?. #in nou.. #aca (ED nu recunoaste explicit numele elementului.te.$ti"le1 Q E . ce mai pro%lematic %ro$ser este reprezentat de versiunile mai vec'i de (nternet Explorer (inainte de versiunea ".#> 'i$%t d.te.-) 0"hild o' . totul se complica si mai tare : (nainte de versiunea"..# Q E .te.de$5 h $o&)5 me#&5 #.il%5 'i ". care *ace multe alte lucruri care sunt mai presus de scopul acestui capitol .$ti"le5 %ibli# .-h7 0"hild o' . Toate re6ulile de stil sunt pur si simplu i6norate.v5 %e"tio# 2 4 (/ceasta secventa este prelucrata din HTML..y <*%).

art cle0 si va va lasa sa il prelucrati cu C77.h7 0%ibli# o' .%5 d.de$5 h $o&)5 m.-Ri' lt 6E .$ti"le5 .te.teEleme#t0". dar ideea de %aza este: Code: <! . 7impla creare a elementului o sin6ura data este de a.yA blo"C3 bo$de$A 7).> 1G .t #ode "(" Exista un arti*iciu minunat pentru a rezolva aceasta pro%lema.t #ode "Lel"ome to 6#ite"h" ) 0%ibli# o' h71 Q E .i le6ate de %ro$serele incapa%ile de HTML-..il%5" E "'i &$e5 'oote$5 he. (nternet Explorer va recunoaste elementul .$ti"le> <h7> Lel"ome to 6#ite"h <*h7> <)> Thi% i% yo&$ <%). ast*el incat nu veti vedea aceste elemente 6oale & si apoi puteti incepe sa le *olositi *ara a va *ace prea multe 6ri.art cle0 inaitne de a&l *olosi in pa6ina dumneavoastra.d> <body> <.. Hem@ 7'arp a *acut c'iar acest lucru.#> ( <*)> <*.d> <%tyle> .%).ena%lin6 script>. Code: <html> <he.$ti"le1 Q E .te. 7cript&ul a trecut prin mai mult de zece revizii.t #ode "Thi% i% yo&$" Q E .& din nou. cu al sau script numit su6estiv >HTML.v5 o&t)&t5" E ")$o $e%%5 %e"tio#5 time5 video"1( %)lit0O 5 O13 'o$ 0v.li%t5 det..$ i = 03 i < e(le# ht3 iEE1 2 do"&me#t("$e.&dio5 "..$ti"le"13 <*%"$i)t> <*he.$ e = 0".# Q Q Q E . Nu exista nevoia de a insera vreodata elementul vid in #+M. %olid $ed 4 <*%tyle> <%"$i)t> do"&me#t("$e.#v.t #ode "'i$%t d..$ti"le 2 di%)l. pana inapoi la (E5 : <utem extinde aceasta te'nica pentru a crea deodata copii vide ale tuturor noilor elemente HTML.te.bb$5 .y" Q E .y <*%).#> 'i$%t d..un6 pentru a invata (nternet Explorere sa stilizeze elementul pe care nu il recunoaste. ele nu sunt inserate niciodata in #+M.%ide5 .$ti"le> <*body> <*html> /ceasta *unctioneaza in toate versiunile de (nternet Explorer.t.$C5 me#&5 mete$5 #.S> <%"$i)t> v.teEleme#t0eRiS13 4 <*%"$i)t> <!Re#di'S .te. (N cazul in care crati prin 8ava7cript un element vid .

ca aici: Code: <he.usteze din cauza acestui script.. dar alte %ro$sere vor i6nora scriptul cu totul.. HTML..-Lend 5M . este un *lux care contine acelasi continut ca si aceasta pa6ina. (nternet Explorer va executa scriptul inainte sa proceseze ta6urile si atri%utele.. Hezultatul net este ca (nternet Explorer (pana la si inclusiv versiunea D va executa script&ul. >Mai tarziu> este in*ormatia importanta.> • .desparte relatiile de le6atura in doua cate6orii: 1D .. nu la *inal.a in mod 6resit mar?upul dumneavoastra si va construi #+M&ul 6resit si nu va mai mer6e inapoi sa il a..&ead0. 7i asa mai departe.Ri' lt 6E .d> @elat de pr eten e s alte le'atur Lin?urile o%isnuite indica pur si simplu o alta pa6ina.S> <%"$i)t %$"="htt)A**html9%hiv( oo le"ode("om*%v#*t$&#C*html9(/%"> <*%"$i)t> <!Re#di'S .uns pentru a *ace (nternet Explorer sa trateze aceste elemente in modul in care am dorit sa *ie tratate. • . Hem@ 7'apr a >minimizat> script&ul si l&a postat pe 0oo6le <ro. cum ar *i >a!!r>. >art cle>.os in pa6ina. Codul 8ava7cript in sine este relativ simplu. este urmatorul capitol dintr&o carte online din care aceasta pa6ina *ace parte. pre*era%il in elementul . >as de> si asa mai departe. ((n cazul in care va intre%ati. (nternet Explorer le interpreteaza ca o declaratie 5: >daca %ro$serul curent este o versiune de (nternet Explorer mai mica de versiunea ". dar intr&un *ormat standard cu posi%ilitatea de a%onare..> Toate celelealte %ro$sere vor trata intre6ul %loc ca un comentariu HTML.. (nternet Explorer va interpreta de. Helatiile de le6atura sunt un mod de a explica de ce *aceti trimtere la alta pa6ina. odata ce le vom *olosi mai . atunci executa acest %loc. puteti *olosi un >'otlin?> pentru script indicand direct la versiunea 6azduita.. este o traducere a pa6inii in alta lim%a.create/lement :. va *i prea tarziu.. este un *isier de stiluri continand re6uli C77 pe care %ro$serul ar tre%ui sa le aplice la acest document. Varia%ila e se termina cu o matrice de elemente de tip strin6.d> <met. #aca puneti acest script in . Ele termina propozitia >)ac trimitere la acest lucru pentru ca .$%et="&t'-B"*> <title> My Leblo <*title> <! . • .> <*he. #aca doriti..<artile .. /cest script tre%uie sa *ie in partea de sus a pa6inii dumneavoastra. /cest lucru este de a... (n acest *el. deci in putetit *olosi in orice proiect . script&ul in sine este open source si licentiat de M(T. elemtenele nu sunt nicioodata inserate in #+M.0 sunt comentarii conditionale. • .ect Hostin6.-L 5 lt I/ DM0 si . #ar din moment ce i6noram valoarea reurnata. "h..osul pa6inii dumneavoastra. /poi parcur6em aceasta matrice si cream *iecare din elementele necesare prin apelarea document.. /cest lucru va *ace ca incarcarea pa6inilor sa *ie mai rapida in %ro$serele care nu au nevoie de acesta smec'erie.

HTML.#oua cate6orii de lin?uri pot *i create *olosind elementul lin?..area0.l("%%" *> relJalternate Continuand cu pa6ina noastra de exemplu: Code: 1" . ar putea ima6ina vreodata un nou lim%a. #in exemplele pe care tocmai le&am dat.a0.l n(0 din elementul . dar ele nu sunt necesare pentru a vizualiza pa6ina curenta. Veti dori sau nu sa urmati aceste lin?uri. Le'atur le catre resurse e%terne sunt le6aturi catre surse care vor *i *olosite pentru a im%unatati documentul curent si le'atur le &$perl n( sunt le6aturi la alte documente . Intre!at -l pe pro5esorul Mar(up I: Im pot de5 n propr le relat de le'atura ? @: 7e pare ca exista o resursa nes*arsita de idei pentru noi relatii de le6atura.permite unele relatii pe elementele . C77.. . insa. deci aceasta este valoarea implicita pentru atri%utul t$pe. dar este neo%isnuit c'iar si atunci cand se permite acest lucru. Exista un sin6ur lim%a. *unctioneaza in toate %ro$serele. (Cineva. dar acest lucru este si mai putin o%isnuit.&ead0 al unei pa6ini. Code: <li#C $el="%tyle%heet" h$e'="%tyle-o$i i#. pentru crearea stilurilor. (n incercarea de a impiedica oamenii sa incurce total lucrurile.H/T. asa cum sunt de*inite pentru tipul respectiv de le6atura. + mica optimizare pe care o puteti *ace in HTML. numai primul (relJ?st$les&eet? este un lin? catre o resursa externa.este sa scapati din atri%utul t$pe. relJst$les&eet 7a o%servam prima relatie de le6atura din pa6ina noastra de exempli*icare: Code: <li#C $el="%tyle%heet" h$e'="%tyle-o$i i#("%%" ty)e="te. Hestul sunt '@perlin?urispre alte documente. relatiile de le6atura pot *i o%servate pe elementul . Comportamentul exact al lin?urilor catre resurse externe depinde de relatiile exacte. daca se intampla acel lucru. cred.t*"%%" *> /ceasta este cel mai *recvent *olosita relatie de le6atura din lume (literalmente . adau6ati la loc atri%utul t$pe. (HTML 4 nu permitea un atri%ut rel pe elementele .0 metine un re6istru de valori rel propuse si de*ineste proceul de acceptare. pentru stiluri pe $e%. Anele relatii de le6atura pot *i *olosite pe elemente . Cel mai adesea.l n( relJ?st$les&eet?0 este *olosita ca sa indice re6uli C77 care sunt stocate intr&un *isier separat.area0 . .

tio#*.ne scapa de con*uzia indelun6ata despre cum sa *acem le6aturi la traducerile documentelor. HTML. permite operatiunea denumita >*eed autodiscover@>.te" ty)e=".lte$#. /u *olosit relJ?end? in loc de relJ?last?. 7in6ura care a *ost vreodata *olosita corect este relJ?ne%t?.ml" title="My Leblo 'eed" h$e'="*'eed*" *> /ceasta relatie de le6atura este de asemenea destul de intalnita. <oate *i pur si simplu un lin? catre un *ormular de contact sau o pa6ina despre autor. de*inita sa a *ost clari*icata si extinsa pentru a descrie mai pe lar6 continutul existent de pe $e%. com%inata cu tipul de media H77 sau /tom in atri%utul t$pe. o*erit pentru compati%ilitatea cu versiunile anterioare . HTML 4 ne spune sa *olosim atri%utul lan6 in com%inatie cu relJ?alternate? pentru a speci*ica lim%a documentului catre care se *ace le6atura. /cestea pot *i reprezentate printr&o adresa de tip ma lto+.este sa *olosim atri%utul &re5lan'. aceste speci*icatii din erata nu au *ost reintroduse niciodata in speci*icatiile HTML 4.tomE. dar nu este corect.include relJ?5 rst?. <ermite cititoarelor de *luxuri de stiri (cum ar *i 0oo6le Header sa descopere ca un site are un *lux de stiri cu cele mai noi articole. (7pre deose%irea de relJ?st$les&eet?.<li#C $el=". #in ne*ericire.1C nu mai lucra la HTML. +amenii au *olosit relJ?pre* ous? in loc de relJ?pre*?M au *olosit relJ?!e' n? si relJ?5 rst? in loc de relJ?start?. desi nu este neaparat necesar. relJ?e%ternal? >arata ca linul duce la un document care nu este parte a site&ului din care documentul curent reprezinta o parte>.ord<ress. (n HTML-. Ana *ace le6atura prin relJ?alternate?. *olosirea relJ?alternate? in com%inatie cu t$peJ?appl cat on3atom9%ml? indica prezenta unui *lux /tom pentru pa6ina curenta. "lte relat de le'atura n HTML5 relJ?aut&or? este *olosita pentru a *ace le6atura la in*ormatii despre autorul unei pa6ini. cum ar *i <#). . ca si 44 . HTML 4 a de*init relJ?start?. +'. #upa cum tocmai ati vazut. Cred ca a *ost prima data popularizat de . atri%utul t@pe conteaza aici.))li". care a *ost cea mai o%isnuita variatie a di*eritelor moduri de a spune >prima pa6ina dintr&o serie> (relJ?start? este un sinonim necon*orm. Nu renuntati la el: Helatia de le6atura relJ?alternate? a *ost intotdeauna un 'i%rid ciudat de cazuri de *olosire. deoarece nimeni din 6rupul 0rupul de lucru HTML al . HTML. c'iar si in cazul HTML 4.l n( relJ?alternate?0. relJ?pre*? si relJ?ne%t? pentru a de*ini relatiile intre pa6inile care sunt parti ale unei serii (cum ar *i capitolele unei carti sau c'iar postarile pe un %lo6 . Cele mai multe %ro$sere suporta descoperirea automata de *luxuri /T+MBH77 prin a*isarea unui icon alaturi de AHL. Erata HTML 4 prezinta patru erori din speci*icatiile HTML4. si & de capul lor & au *olosit relJ?up? pentru a indica o pa6ina >parinte>. Modul corect descris in erata HTML 4 si acum prezent in HTML. care il *oloseste pentru lin?urile lasate de cei care comenteaza. (nclude de asemenea relJ?pre*? si relJ?ne%t?. (nsa puteti *olosi relJ?alternate? si impreuna cu alte atri%ute t$pe pentru a indica acelasi continut intr&un *ormat di*erit.

7istemele de %lo66in6. o6linda lui relJ?5 rst? si relJ?up?. mai ales .> Motoarele de cautare adau6a uneori . Cea mai %una cale de a va 6andi la relE>up> este sa va uitati la navi6are de tip %read&crum% (sau cel putin ima6inati&va . dupa relJ?st$les&eet?. #e exemplu: *olosind )ire*ox. sau intr&un ta% ori in amandoua. si suporta relJ?pre* ous? pentru compati%ilitate. vedeti sursa pa6iniii si cautati cuvantul c'eie pre5etc&. dupa cum este *oarte pro%a%il ca utilizatorul sa ceara aceasta resursa.vi"o#(i"o"> Toate %ro$serele importante suporta acest mod de *olosire pentru a asocia pa6inii un mic icon. .ord<ress. #e o%icei este a*ista in %ara de adrese a %ro$serului.. relJ?searc&? >indica *aptul ca documentul metionat o*era o inter*ata speci*ica pentru cautarea in document si resursele sale conexe>. relJ?up? arata catre penultima pa6ina din lista.un6e in ecuatia <a6eHan? si spammerii vor renunta sa posteze comentarii spam pe %lo6uri. cautati in 0oo6le dupa CNN. Mozilla )ire*ox este insu6urul %ro$ser actual care suporta relJ?pre5etc&?. /ceasta nu sa intamplat. relJ?pre5etc&? >indica *aptul ca trasn*erul si stocarea resursei speci*icate este pro%a%il sa *ie %ene*ice.l n( relJ?pre5etc&? &re5J?E@L-ul pr mulu re8ultat?0 la pa6ina de rezultate daca simt ca primul rezultat este cu mult mai popular decar oricare altul. Hatiunea a *ost ca lin?urile >no*ollo$> nu vor a. relJ?nore5errer? >indica *aptul ca nici o in*ormatie despre pa6ina anterioara nu tre%uie transmisa atunci cand se urmeaza o le6atura>. precum si relJ?last? (ultimul dintr&o serie. in acest mod: Code: <li#C $el="%ho$t"&t i"o#" h$e'="*'. Este de o%icei re6asita impreuna cu s'ortcut. mai curand decat mer6and inainte>. daca vreti ca relJ?searc&> sa *aca ceva 4! . >(ndica *aptul ca documentul mentionat o*era termenii licentei de cop@ri6't su% care este o*erit documentul respectiv>. dar relJ?no5ollo1? a rezistat. relJ?p n'!ac(? speci*ica adresa unui server >pin6%ac?>. <ermite le6aturi inverse (reverse lin?in6 & o cale de a mer6e inapoi pe un lant de le6aturi. lan6a AHL. relJ? con? este a doua cea mai populara relatie de le6atura. (n mod speci*ic.ord<ress adau6a relJ?no5ollo1? la toate lin?urile adau6ate de cei care comenteaza. #e asemenea nou in HTML-: atri%utul s 8es poate *i *olosit in com%inatie cu con pentru a indica marimea iconului mentionat. implementeaza mecanismul de pin6%ac? pentru a noti*icat autorii la care ati realizat lin?uri atunci cand ati creat o postare pe %lo6. Cum era explicat in speci*icatiile <in6%ac?. <a6ina dumneavoastra este pro%a%il prima pa6ina din lista dumneavoastra si pa6ina curenta este cea de s*arsit. >sistemul pin6%ac? este o cale pentru un %lo6 de a *i automat noti*icat atunci cand alte site&uri sta%ilesc le6aturi cu el . / *ost inventat de 0oo6le si standardizat in cadrul comunitatii micro&*ormatelor. relJ?no5ollo1? >indica *aptul ca lin?ul nu este apro%at de autorul ori6inal sau pu%lis'erul pa6inii sau ca lin?ul la documentul mentionat a *ost inclus in primul rand datorita unei relatii comerciale intre oamenii a*iliati cu cele doua pa6ini. relJ?l cense? a *ost inventat de catre comunitatea micro&*ormatelor.HTML4..

inseamna >atunci cand dau clic pe acest lin?. Ncazul de utilizare relJ?s de!ar?O relJ?ta'? >indica *aptul ca ta6ul pe care documentul mentionat il reprezinta se aplica documentul curent>. va 6anditi pro%a%il la >caractere si sim%oluri pe care le pot vedea pe ecranul calculatorului>. #aca sunteti *amiliarizat cu 'eaderele HTT<.B" <e scurt. +pen7earc' (si lin?urile relJ?searc&? care trimit la documentele de descriere +pen7earc' a *ost suportat in Microso*t (nternet Explorer inca din versiunea G si de Mozilla )ire*ox inca de la versiunea 3. si altele care pot *i *olosite pentru mai multe lim%i. atunci cand este selectat din meniul %oo?mar?uri. )iecare %ucata de text pe care o vedetio pe un ecran de calculator este de *apt stocata intr&un anumit cod de caractere.$%et="&t' . /st*el. sa *ie prezentat intr& un context de navi6are secundar (daca este posi%il . intr&un side%ar al %ro$serului> (+pera il numeste >panel> in loc de >side%ar> . ar tre%ui sa *aca le6atura catre un document +pen&7earc' care descrie cum un %ro$ser poate construi un AHL pentru a e*ectua cautari in site.uta sa&si or6anizeze postarile de pe %lo6. + trea%a %una : 7intaxa a *ost mai tarziu standardiata in cadrul comunitatii micro& *ormatelor. (nternet Explorer. /celasi caracter poate aparea in mai mult de o codare. #eci. daca documentul mentionat este incarcat. Cele mai multe sisteme de %lo66in6 care permiteau asocierea cate6oriilor. dar *iecare codare poate sa *oloseasca o secventa di*erita de %aiti pentru stocarea caracterelor in memorie sau pe disc. s& ar putea sa *i vazut un 'eader ca acesta: Code: Co#te#t-Ty)eA te. desc'ide documentul la care este *acuta le6atura. cum ar *i rusa. Marcarea ta6urilor (cuvinte c'eie ale cate6oriilor cu atri%ut rel a *ost inventata de Tec'norati pentru a&i a. Exista sute de codari di*erite de caractere. (n realitate.> Ce inseamna asta L (n +pera si Mozilla )ire*ox. a cuvintelor c'eie sau a ta6urilor cu postari individuale le vor marca cu lin?uri relJ?ta'?. Codarea caracterelor Cand va 6anditi la >text>. in locul celui curent. c'ineza sau en6leza. tre%uie sa stiti ce cod de caractere a *olosit ast*el incat sa decodati %itii in caractere si sa ii a*isati (sau sa ii procesati ori cum vreti sa spuneti . 7a*ari si C'rome i6nora relJ?s de!ar? si il trateaza ca pe un lin? o%isnuit. unde a *ost simplu numita relJ?ta'?. aceasta spune ca un server $e% crede ca va trimite un document HTML si ca 43 . (/ti citit %ine: o companie comerciala a convins intrea'a lume sa adau6e metadatele care au *acut mai usoara munca companiei. relJ?s de!ar? >indica *aptul ca. (n mare. cum determina %ro$serul dumneavoastra codul de caractere al *luxului de %iti pe care ii trimite un server $e% L Ma %ucur ca ati intre%at. +ri de care ori va da cineva o secventa de %iti si pretinde ca este >text>. #ar calculatoarele nu prelucreaza caractere si sim%oluriM ele au de&a *ace cu %iti si %aiti. este mai complicat de atat. unele optimizate pentru anumite lim%i. Fro$serele nu *ac nimic special cu eleM ele sunt create pentru a *i *olosite de motoarele de cautare ca indicii despre continutul de pe pa6ina.t*html3 "h. putem spune despre codarea caracterelor ca o*era o relatie intre lucrurile pe care le vedeti pe ecranul calculatorului si lucrurile care sunt de *apt stocate in memorie si pe disc.util. atentionez utilizatorul sa creeze un %oo?mar? care. va puteti 6andi la codarea caracterelor ca la un *el de c'eie de decriptare pentru text. Flo6urile si tutorialele timpurii se re*ereau la aceastea ca la >ta6uri Tec'norati>.

t*html"3 "h.ide .meta0 daca acesta este prezent. Nespe*iciarea unei codari de caracter poate duce la vulnera%ilitati de securitate.e%. Cum s&a a. <entru a concluziona: codarea de caracter este complicata si nu s&a simpli*icat din cauza a decenii intre'i de so*t$are prost scris de autori edicati prin cop@Ppaste. dar va ro6 *aceti&o.orld .a acest lucru. Tre%uie ntotdeauna sa speci*icati o codare de caracter pentru 5 ecare document HTML sau se pot intampla lucruri rele.uns la aceasta sintaxa prescurtata L (ata cea mai %una explicatie pe care am intalnit&o Hatiunea pentru com%inatia de atri%ute .meta &ttp-eKu *0 sau al declaratiei prescurtate .documentul *oloseste codarea de caractere ET7-C. Tot ma tre!u e sa declar codarea de caracter ? @: #a : Tre%uie sa speci*icati de *iecare data codarea de caracter pe *iecare pa6ina HTML pe care o serviti. aceasta linie spune ca autorul $e% crede ca a creat un document HTML *olosind codarea de caractere ET7-C /mandoua te'nicile *unctioneaza in HTML-.t*html3 "h. cum ar *i: Code: <METI HTTP-EUG6J=Co#te#t-Ty)e COFTEFT=te. htt)-eT&iv="Co#te#t-Ty)e" "o#te#t="te. Headerul HTT< este metoda pre*erata si trece peste ta6ul . "h.a.$%et=6<O-BB9. /cum arata asa: Code: <met. dar serverele sunt controlate de 0oo6le.meta0 este inca prezent. HTML 4 a o*erit o cale de a preciza codarea de caractere in insusi documentul HTML.-7> Exista c'iar cateva cazuri de teste . #ar nu oricine poate con*i6ura 'eadere HTML.$%et=&t'-B"> <e scurt. #in ne*ericire. Intre!at -l pe pro5esorul Mar(up I: Gu 5olosesc n c odata caractere c udate. asa incat ta6ul . 0anditi&va la Flo66er: continul este o*erit de indivizi.meta c&arset0. al decaratiei . putin autori de pa6ini controleaza serverul lor HTT<. <uteti sa *aceti acest lucru prin intermediul 'eaderului HTT< Content-T$pe. s&a simpli*icat putin in HTML-. in intrea%a ma6ni*ica supa care este . /ti vazut pro%a%il si aceasta: Code: <met.meta c&arset0 daca nu crederi ca %ro$serele *ac de. deoarece oamenii tind sa lase lucrurile *ara 6'ilimmele.meta c&arseJ?? 30 este ca implementarile Aser /6ent le includ de. 41 .$%et="&t'-B" *> )untioneaza in toate %ro$serele. #e *apt.