Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Curs Html5

    Încărcat de

    Claudia Silvia Andrei
    541 vizualizări43 pagini
    html5

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    DOC, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    html5

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    541 vizualizări43 pagini

    Curs Html5

    Încărcat de

    Claudia Silvia Andrei
    html5

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 43

    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

    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

    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

    *isierelor video. 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. HTML5 rezolva aceste pro%leme prin introducerea unui standard video. 3.1 )uport n !ro1sere

    (nternet Explorer ", )ire*ox, +pera, C'rome si 7a*ari suporta elementul 9video=. Nota: (nterenet Explorer D si versiunile mai vec'i nu suporta elementul 9video=. 3.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.354 si codec audio //C & We!M & *isiere .e%M cu codec video V<D si codec audio Vor%is 3.3 Cum 5unct onea8a <entru a reda un *isier video in HTML- aveti nevoie de codul de mai ,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@, pause, volume . 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. (n caz contrar, aspectul pa6inii se va modi*ica in momentul incarcarii acesteia. (nsearam continutul intre ta6&urile 9video= si 9Bvideo=.

    Quote:9video srcE>*lim.o66> $idt'E>134> 'ei6'tE>344> controlsE>controls>= Fro$serul dvs nu suporta ta6&ul video. 9Bvideo= Exemplu de mai sus *oloseste un *isier +66 si va *unctiona in +pera, C'rome si )ire*ox. <entru a *unctiona in 7a*ari si versiunile viitoare de C'rome tre%uie sa adau6am un *isier M<E04 si unul .e%M. 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. Fro$serul va reda primul *ormat recunoscut. 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, t, -&l video( <*video>

    3.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.4.1 "tr !utele ta'-ulu ,* deo0 /veti in ima6inea de mai ,os atri%utele suportate in HTML 5 pentru ta6&ul 9video=.

    3.5 HTML5 6 deo 9 DOM Elementul HTML- 9video= are deasemenea metode (met'ods , propietati (properties si evenimente (events . 7pre exemplu, exista metode pentru pornire (pla@in6 , pauza (pausin6 si incarcare (loadin6 . 7unt propietati (ex: durata, volum, cautare pe care le putem citi sau seta. Exista desemenea evenimente #+M ce ne pot noti*ica, spre exemplu, cand elementul 9video= porneste, *ace pauza sau se opreste etc. Exemplul urmator ilustreaza, intr&un mod simplu, cum sa adresam un element 9video=, cum sa citim si sa sta%ilim propietatile, si metodele de apelare. 3.5.1 HTML5 ,* deo0 - Metode :Met&ods;< Prop etat :Propert es; s /*en mente :/*ents; (n ta%elul de mai ,os aveti a*isate metode video, propietati si evenimente suportate de ma,oritatea %ro$serelor.

    Nota: #intre propietatile video, doar video.idt' si videoHei6't sunt disponi%ile imediat. Celelalte propietati sunt disponi%ile dupa ce sunt incarcate metadatele *isierului video.

    Curs HTML5 - Partea a I6-a 3 HTML5 "ud o


    HTML5 prevede un standard pentru *isierele audio. <ana la aparitia HTML- nu exista un standard pentru rederarea *isierelor audio intr&o pa6ina $e%. G

    /stazi, ma,oritatea *isierelor audio sunt redate printr&un plu6in (cum ar *i *las' . (nsa nu toate %ro$serele au aceleasi plu6inuri. HTML- speci*ica un mod standard de a include *isierele audio cu a,utorul elementului audio. /cest element poate reda *isiere de sunet sau stream audio. 4.1 7ormate aud o s suportul n !ro1sere

    (n acest moment sunt suportate 1 *ormate pentru elementul audio:

    4.2 Cum 5unct onea8a? <entru a reda un *isier audio in HTML- tot ce tre%uie sa scrieti este: Code:
    <,&dio %$"="%o# (o <*,&dio> " "o#t$ol%=""o#t$ol%">

    /tri%utul control adau6a %utoanele de control >pla@> (redare , >pause> (pauza si >volume> (volum . Continutul se insereaza intre ta6&urile ,aud o0 si ,3aud o0 pentru %ro$serele care nu suporta elementul audio: Exemplu: Code:
    <,&dio %$"="%o# (o " "o#t$ol%=""o#t$ol%"> +$ow%e$&l d&m#e,vo,%t$, #& %&)o$t, ,"e%t eleme#t( <*,&dio>

    Exemplul anterior *oloseste un *isier O'' si va *unctiona in )ire*ox, +pera si C'rome. <entru ca *isierul audio sa *ie redat si in (nternet Explorer si 7a*ari, *ormatul *isierului tre%uie sa *ie MP3. Elementul audio permite sa utilizati mai multe elemente sursa. Elementele sursa pot sa ai%a le6atura catre *isiere audio di*erite. Fro$serul va *olosi primul *ormat recunoscut. D

    Exemplu: Code:
    <,&dio "o#t$ol%=""o#t$ol%"> <%o&$"e %$"="%o# (o " ty)e=",&dio*o " *> <%o&$"e %$"="%o# (m)3" ty)e=",&dio*m)e " *> +$ow%e$&l d&m#e,vo,%t$, #& %&)o$t, ,"e%t eleme#t( <*,&dio>

    4.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.3.1 "tr !utele ta'-ulu ,aud o0

    Curs 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, dintr&o locatie in alta. Dra' and drop *ace parte din standardul HTML-, orice element putand *i tras dintr&un loc in altul. 5.1 )uport n !ro1sere

    (nternet Explorer ", )ire*ox, C'rome si 7a*ari - suporta dra6 and drop. Nota: #ra6 and drop nu este suportat in 7a*ari -.!.3. "

    5.2 /%emple Dra' and Drop n HTML5 Mai ,os aveti un exemplu simplu de dra6 and drop. Exemplu: Code:
    <!DOCTYPE HTML> <html> <he,d> <%"$i)t ty)e="te.t*/,v,%"$i)t"> '&#"tio# ,llowD$o)0ev1 2 ev()$eve#tDe',&lt013 4 '&#"tio# d$, 0ev1 2 ev(d,t,T$,#%'e$(%etD,t,0"Te.t"5ev(t,$ et(id13 4 '&#"tio# d$o)0ev1 2 v,$ d,t,=ev(d,t,T$,#%'e$( etD,t,0"Te.t"13 ev(t,$ et(,))e#dChild0do"&me#t( etEleme#t+y6d0d,t,113 ev()$eve#tDe',&lt013 4 <*%"$i)t> <*he,d> <body> <div id="div7" o#d$o)="d$o)0eve#t1" o#d$, ove$=",llowD$o)0eve#t1"><*div> <im id="d$, 7" %$"="im, i#i*"odebo.8html9(/) " d$, ,ble="t$&e" o#d$, %t,$t="d$, 0eve#t1" width="33:" hei ht=":;" *> <*body> <*html>

    5.3 Cum 5ac un element sa poate 5 tras :Dra''a!le; (nainte de toate tre%uie sa setam valoarea >true> atri%utului dra''a!le al elementului. Code:
    <im d$, ,ble="t$&e" *>

    /poi va tre%ui sa speci*icam ce se va intampla cand elementul este prins (dra66ed . (n exemplul anterior, atri%utul ondra6start apeleaza o *unctie, dra6(event , care spec*ica data ce va *i trasa. Metoda dataTrans5er.setData:; sta%ileste tipul si valoarea acestei datei. Code:
    '&#"tio# d$, 0ev1 2

    !4

    ev(d,t,T$,#%'e$(%etD,t,0"Te.t"5ev(t,$ et(id13 4

    (n acest caz, tipul datei este >Text> si valoarea este id&ul elementului prins (>dra6!> . Armatorul pas este sa vedem unde va *i lasat elementul prins. Evenimentul ondra6over speci*ica unde va *i lasata (dropped data prinsa. (n mod implicit, dateleBelementele nu pot *i trase in alte elemente. <entru a permite o tra6ere tre%uie sa prevenim manipularea implicita a elementului. /cest lucru este posi%il prin apelarea metodei event.prevent#e*ault( pentru evenimentul ondra6over: Code:
    eve#t()$eve#tDe',&lt01

    (n *inal, tre%uie sa plasam elementul prins. Cand datele prinse sunt lasate, are loc un eveniment de aruncare. (n exemplul anterior, atri%utul ondrop apeleaza *unctia drop(event . Code:
    '&#"tio# d$o)0ev1 2 v,$ d,t,=ev(d,t,T$,#%'e$( etD,t,0"Te.t"13 ev(t,$ et(,))e#dChild0do"&me#t( etEleme#t+y6d0d,t,113 ev()$eve#tDe',&lt013 4

    Explicarea codului: & preia data prinsa cu metoda dataTrans*er.6et#ata(>Text> . /ceasta metoda va returna orice data care are acelasi tip in metoda set#ata( . & 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=.

    Curs HTML5 - Partea a 6I-a = HTML5 Can*as :Pan8a;


    Elementul canvas este utilizat pentru a desena intr&o pa6ina $e%. !!

    Ce este can*as :Pan8a;? Elementul HTML5 canvas utilizeaza >a*a)cr pt pentru a desena elemente 6ra*ice intr&o pa6ina $e%. Canvas&ul (<anza este o zona dreptun6'iulara in care puteti controla *iecare pixel. Elementul can*as are di*erite metode pentru a desena traiectorii (pat's , casute (%oxes , cercuri (circles , caractere (c'aracters si pentru a adau6a ima6ini. )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, latimea si inaltimea elementului: Code:
    <",#v,% id=")$im&l",#v,%" width="200" hei ht="700"><*",#v,%>

    #upa acest pas desenam canvas&ul cu a,utorul 8 Code:


    <%"$i)t ty)e="te.t*/,v,%"$i)t"> v,$ "=do"&me#t( etEleme#t+y6d0")$im&l",#v,%"13 v,$ ".t="( etCo#te.t0"2d"13 ".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,$ "=do"&me#t( etEleme#t+y6d0")$im&l",#v,%"13 /poi creaza un o%iect de context: Code:
    v,$ ".t="( etCo#te.t0"2d"13

    !3

    +%iectul 'etConte%t:?2d?; este un element HTML- construit, cu numeroase metode pentru desenarea traiectoriilor, casutelor, cercurilor, caracterelor, ima6inilor etc. Armatoarele doua linii deseneaza un dreptun6'i rosu: Code:
    ".t('ill<tyle="=>>0000"3 ".t('ill?e"t005057905@913

    Metoda 5 ll)t$le adau6a culoarea rosie iar metoda 5 ll@ect speci*ica *orma, pozitia si dimensiunea. =.1 Intele'erea coordonatelor Metoda *illHect de mai sus are parametrii (4,4,!-4,G- . /sta inseamna ca: se deseneaza un dreptun6i de !-4xG- (!-4,G- in canvas, incepand de la coltul din stan6a, sus (4,4 . Coordonatele 2 si ; sunt *olosite pentru a pozitiona desenela in canvas. (n pa6ina de mai ,os puteti a*la coordonatele intr&un canvas. <uneti mouse&ul in interiorul dreptun6'ilui. =.2 /%emple de can*as-ur a Lne #eseneaza o linie spec*iciand de unde sa porneasca si unde sa se opreasca.

    % Cerc #eseneaza un cerc speci*icand dimensiunea, culoarea si pozitia.

    !1

    c #rad ent #eseneaza un 6radient cu culorile speci*icate. (ma6e 'as %een scaled do$n !DI (-44x!!4 . Clic? t'is %ar to vie$ ori6inal ima6e (545x!11 . Clic? ima6e to open in ne$ $indo$.

    d Ima' ne <une o ima6ine in canvas.

    Curs HTML5 - Partea a 6II-a


    A HTML5 Inl ne )6#
    HTML- o*era suport pentru Inl ne )6#

    A.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. .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

    7V0 & este o recomandare .1C A.2 "*antaBele )6# /vanta,ele utilizari 7V0 in locul altor *ormate (ca 8<E0 sau 0() sunt: !. (ma6inile 7V0 pot *i create si editate cu orice editor text 3. (ma6inile 7V0 pot *i cautate, indexate, scriptate si comprimate 1. (ma6inile 7V0 pot *i scalate 4. (ma6inile 7V0 pot *i printate cu o calitate inalta la orice rezolutie -. (ma6inile 7V0 pot *i marite (zoom *ara ca ima6inea sa isi piarda din calitate A.3 )uport n !ro1sere

    (nternet Explorer ", )ire*ox, +pera, C'rome si 7a*ari suporta inline 7V0. A.4 Includerea )6# d rect n pa' n le HTML (n HTML putem include elemente 7V0 direct in pa6ina HTML. Exemplu: Code:
    <!DOCTYPE html> <html> <body> <%v .ml#%="htt)A**www(w3(o$ *2000*%v " ve$%io#="7(7" hei ht="7;0"> <)oly o# )oi#t%="700570 !057B0 7;05:0 705:0 7:057B0" %tyle="'illAlime3%t$oCeA)&$)le3%t$oCe-widthA93'ill-$&leAeve#odd3" *> <*%v > <*body> <*html>

    Hezultat:

    Curs HTML5 - Partea a 6III-a


    !-

    C Can*as *s. )6#


    7V0 si canvas va permit sa creati elemente 6ra*ice in %ro$ser, dar acestea sunt *undamental di*erite. )6# )6# este un lim%a, *olosit pentru descrierea elementelor 6ra*ice 3# in 2ML. 7V0 se %azeaza pe 2ML, ceea ce inseamna ca *iecare element este disponi%il in cadrul DOM )6#. <utem atasa a6enti de evenimente 8ava7cript pentru un element. (n 7V0, *iecare *orma desenata este prezentata ca un o%iect. #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,utorul 8ava7cript. Canvas&urile sunt redate (incarcate pixel cu pixel. Elementele 6ra*ice desenate cu canvas raman nemodi*icate de catre %ro$ser. #aca va tre%ui sa modi*icam pozitia, intrea6a scena tre%uie redesenata, incluzand si o%iectele care sunt acoperite de elementul 6ra*ic. Comparat e ntre Can*as s )6# Ta%elul urmator prezinta cele mai importante di*erente dintre canvas si 7V0. Can*as

    )6#

    dependent de rezolutie nu suporta a6enti de evenimente capa%ilitati reduse pentru redarea textului ima6inea poate *i salvata ca .pn6 sau .,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 ,ocuri

    Curs HTML5 - Partea a IX-a


    D HTML #eolocal 8are :#eolocat on;

    !5

    D.1 Introducere
    /<(&ul 0eolocalizare (#eolocat on o*erit de HTML5 ne da posi%ilitatea de a a*la pozitia 6eo6ra*ica a unui vizitator. /ceasta optiune poate *i *olosita doar daca vizitatorul accepta localizarea pozitiei sale (datorita con*identialitatii utilizatorilor .

    D.2 )uport n !ro1sere

    (nternet Explorer ", )ire*ox, C'rome, 7a*ari si +pera suporta 0eolocation. Nota: /<(&ul 0eolocation este mai precis in cazul dispozitivelor prevazute cu 0<7 (ca i<'one .

    D.3 Et l 8area #olocat on


    )olosim metoda 'etCurrentPos t on:; pentru a o%tine pozitia utilizatorului. Mai ,os aveti un exemplu simplu de 6eolocalizare care returneaza latitudinea si lon6itudinea pozitiei utilizatorului. Exemplu: Code:
    <%"$i)t> v,$ .=do"&me#t( etEleme#t+y6d0"demo"13 '&#"tio# etLo",tio#01 2 i' 0#,vi ,to$( eolo",tio#1 2 #,vi ,to$( eolo",tio#( etC&$$e#tPo%itio#0%howPo%itio#13 4 el%e2.(i##e$HTML="Deolo",tio# i% #ot %&))o$ted by thi% b$ow%e$("34 4 '&#"tio# %howPo%itio#0)o%itio#1 2 .(i##e$HTML="L,tit&di#eA " E )o%itio#("oo$d%(l,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.

    !G

    #aca suporta /<(&ul atunci se executa metoda 6etCurrent<osition( . #aca nu, se a*iseaza un mesa, de eroare. #aca metoda 6etCurrent<osition( este executata cu succes, se a*iseaza un o%iect de coordonate pentru *unctia speci*icata in parametru ( s'o$<osition . )unctia s&o1Pos t on:; preia a*isarea Latitudinii si Lon6itudinii. Exemplul de mai sus este unul simplu, *ara manipularea erorilor. D.3.1 Ma n pularea eror lor s re5u8ur lor /l doilea parametru al metodei 6etCurrent<osition( este *olosit pentru a manipula erorile. 7peci*ica o *unctie ce va *i executata in cazul in care nu se poate determina pozitia vizitatorului. Exemplu: Code:
    '&#"tio# %howE$$o$0e$$o$1 2 %wit"h0e$$o$("ode1 2 ",%e e$$o$(PE?M6<<6OF8DEF6EDA .(i##e$HTML="GtiliH,to$&l , $e%)i#% "e$e$e, )e#t$& Deolo",liH,$e(" b$e,C3 ",%e e$$o$(PO<6T6OF8GFIJI6LI+LEA .(i##e$HTML="F& %&#t di%)o#ibile i#'o$m,tii de%)$e Lo",tie(" b$e,C3 ",%e e$$o$(T6MEOGTA .(i##e$HTML="Ce$e$e, )e#t$& ,'l,$e, lo",tiei &tiliH,to$&l&i , e.)i$,t(" b$e,C3 ",%e e$$o$(GFKFOLF8E??O?A .(i##e$HTML="I ,),$&t o e$o,$e #e"&#o%"&t,(" b$e,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.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. Cel mai recomandat este 0oo6le Maps. Exemplu: !D

    Code:
    '&#"tio# %howPo%itio#0)o%itio#1 2 v,$ l,tlo#=)o%itio#("oo$d%(l,tit&deE"5"E)o%itio#("oo$d%(lo# it&de3 v,$ im 8&$l="htt)A**m,)%( oo le,)i%("om*m,)%*,)i*%t,ti"m,)M"e#te$=" El,tlo#E"NHoom=7!N%iHe=!00.300N%e#%o$=',l%e"3 do"&me#t( etEleme#t+y6d0"m,)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 . D.4.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,, zoom si optiuni de tra6ere . Exemplu: Code:
    '&#"tio# %howPo%itio#0)o%itio#1 2 l,t=)o%itio#("oo$d%(l,tit&de3 lo#=)o%itio#("oo$d%(lo# it&de3 l,tlo#=#ew oo le(m,)%(L,tL# 0l,t5 lo#1 m,)holde$=do"&me#t( etEleme#t+y6d0Om,)holde$O1 m,)holde$(%tyle(hei ht=O290).O3 m,)holde$(%tyle(width=O900).O3 v,$ myO)tio#%=2 "e#te$Al,tlo#5HoomA7!5 m,)Ty)e6dA oo le(m,)%(M,)Ty)e6d(?OIDMIP5 m,)Ty)eCo#t$olA',l%e5 #,vi ,tio#Co#t$olO)tio#%A2%tyleA oo le(m,)%(F,vi ,tio#Co#t$ol<tyle(<MILL4 43 v,$ m,)=#ew oo le(m,)%(M,)0do"&me#t( etEleme#t+y6d0"m,)holde$"15myO)tio#%13 v,$ m,$Ce$=#ew oo le(m,)%(M,$Ce$02)o%itio#Al,tlo#5m,)Am,)5titleA"Yo& ,$e he$e!"413 4

    D.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. 0eolocalizarea poate *i desemenea *olosita pentru a o%tine in*ormatii speci*ice locatiei. Exemple: & (n*ormatii locale la zi & /*isarea unor puncte de interes in apropierea utilizatorului & Navi6atie 0<7

    !"

    D.= Metoda 'etCurrentPos t on:; - Date de es re


    Metoda 6etCurrent<osition( returneaza un o%iect daca este executata cu succes. <ropietatile atitudine, lon6itudine si precizie sunt intotdeauna returnate. Celelalte propietati, speci*icate in ta%elul de mai ,os, sunt returnate daca sunt disponi%ile. Prop etate coords.latitude coords.lon6itude coords.accurac@ coords.altitude 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, masurata in sensul acelor de ceas, de la Nord Viteza in metrii pe secunda #ataBtimpul raspunsului

    coords.altitude/ccurac@ <recizia altitudinii unei pozitii

    D.A O! ectul #eolocat on - alte metode nteresante


    1atc&Pos t on:; & returneaza pozitia curenta a utilizatorului si continua sa actualizeze aceasta pozitie pe masura ca utilizatorul se misca (ca 0<7&ul intr&o masina . clearWatc&:; & opreste metoda $atc'<osition( . (n exemplul urmator prezentam metoda $atc'<osition( . /veti nevoie de un dispozitiv 0<7 precis pentru a testa aceasta metoda (spre exemplu un i<'one . Exemplu. Code:
    <%"$i)t> v,$ .=do"&me#t( etEleme#t+y6d0"demo"13 '&#"tio# etLo",tio#01 2 i' 0#,vi ,to$( eolo",tio#1 2 #,vi ,to$( eolo",tio#(w,t"hPo%itio#0%howPo%itio#13 4 el%e2.(i##e$HTML="+$ow%e$&l dv%( #& %&)o$t, Deolo",tio#("34 4 '&#"tio# %howPo%itio#0)o%itio#1 2 .(i##e$HTML="L,tit&di#eA " E )o%itio#("oo$d%(l,tit&de E "<b$ *>Lo# it&di#eA " E )o%itio#("oo$d%(lo# it&de3 4 <*%"$i)t>

    Curs HTML5 - Partea a X-a


    34

    1F HTML5 )tocare We! :We! )tora'e;


    )uport n !ro1sere+

    )tocarea datelor la cl ent Cu HTML-, pa6inile $e% pot stoca date local, in %ro$serul utilizatorului. 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, datorita *aptului ca acestea sunt transmise la *iecare cerere catre server, se micsoreaza mult viteza de accesare a unui site. (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. #atele sunt stocate in zone di*erite pentru site&uri di*erite si un site poate accesa doar datele stocate de el. HTML- *oloseste >a*a)cr pt pentru a stoca si accesa datele.

    1F.1 O! ectul local)tora'e


    /cest o%iect stoc'eaza datele *ara limita de timp, ele *iind disponi%ile oricand. Cum se creeaza si se acceseaza un o%iect local7tora6e: <H< Code:
    <%"$i)t ty)e="te.t*/,v,%"$i)t"> lo",l<to$, e(l,%t#,me="<mith"3 do"&me#t(w$ite0lo",l<to$, e(l,%t#,me13 <*%"$i)t>

    (n exemplul urmator numaram de cate ori este accesata o pa6ina: <H< Code:
    <%"$i)t ty)e="te.t*/,v,%"$i)t"> i' 0lo",l<to$, e(), e"o&#t1 2 lo",l<to$, e(), e"o&#t=F&mbe$0lo",l<to$, e(), e"o&#t1 E73 4

    3!

    el%e 2 lo",l<to$, e(), e"o&#t=73 4 do"&me#t(w$ite0"P, i#, viHit,t, de "E lo",l<to$, e(), e"o&#t E " o$i("13 <*%"$i)t>

    1F.1 O! ectul sess on)tora'e


    Hetine datele pentru o sesiune. Cand utilizatorul inc'ide %ro$serul datele sunt sterse. Cum cream si accesam session7tora6e: <H< Code:
    <%"$i)t ty)e="te.t*/,v,%"$i)t"> %e%%io#<to$, e(l,%t#,me="C$i%ti,#"3 do"&me#t(w$ite0%e%%io#<to$, e(l,%t#,me13 <*%"$i)t>

    (n exemplul urmator numaram de cate ori este accesata o pa6ina intr&o sesiune <H< Code:
    <%"$i)t ty)e="te.t*/,v,%"$i)t"> i' 0%e%%io#<to$, e(), e"o&#t1 2 %e%%io#<to$, e(), e"o&#t=F&mbe$0%e%%io#<to$, e(), e"o&#t1 E73 4 el%e 2 %e%%io#<to$, e(), e"o&#t=73 4 do"&me#t(w$ite0"JiHite "E%e%%io#<to$, e(), e"o&#tE" i# ,"e,%t, %e%i&#e("13 <*%"$i)t>

    Curs HTML5 - Partea a XI-a


    11 HTML5 "pp Cac&e
    11.1 Ce este "ppl cat on Cac&e HTML5 introduce application cac'e, ceea ce inseamna ca o aplicatie $e% este cac'e&uita, *iind ulterior accesi%ila *ara o conexiune la internet. Cac'e&uirea aplicatiilor o*era trei avanta,e unei aplicatii: !. Navi6are o**line & utilizatorii pot *olosi aplicatia c'iar daca sunt o**line 3. Viteza & resursele cac'e&uite de incarca mai repede 1. Incarcare redusa a serverului & %ro$serul va descarca doar resursele actualizateBmodi*icate de pe server )uport n !ro1sere+ 33

    /pplication cac'e este suportat in ma,oritatea %ro$serelor cu exceptia (nternet Explorer. 11.2 /%emplu HTML5 Man 5est Cac&e Exemplul urmator arata un document HTML cu cac'e mani*est (pentru navi6are o**line . Exemplu: Code:
    <!DOCTYPE HTML> <html m,#i'e%t="demo(,))","he"> <body> Co#ti#&t&l do"&me#t&l&i((( <*body> <*html>

    11.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. Exemplu: Code:
    <!DOCTYPE HTML> <html m,#i'e%t="demo(,))","he"> ((( <*html>

    +rice pa6ina ce are atri%utul mani*est speci*icat va *i cac'e&uita in momentul in care este vizitata. #aca atri%utul mani*est nu este speci*icat, pa6ina nu va *i cac'e&uita (cu exceptia cazului in care pa6ina este speci*icata direct in *isierul mani*est . Extensia recomandata pentru *isierul mani*est este: >.appcac&e>. 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%. 11.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 . )isierul mani*est are trei sectiuni: !. C"CH/ M"GI7/)T & *isierele listate su% acest 'eader vor *i cac'e&uite dupar ce sunt 31

    descarcate pentru prima data 3. G/TWO@H & *isierele listate su% acest 'eader necesita o conexiune la server si nu vor *i niciodata cac'e&uite 1. 7"LLI"CH & *isierele listate su% acest 'eader speci*ica pa6ini de rezerva in cazul in care o pa6ina nu este accesi%ila 11.4.1 C"CH/ M"GI7/)T <rima sectiune (C/CHE M/N()E7T este o%li6atorie. Exemplu: Code:
    CICHE MIF6>E<T *tem,("%% *lo o( i' *m,i#(/%

    11.4.2 G/TWO@H 7ectiunea NET.+HJ de mai ,os speci*ica ca *isierul >lo6in.p'p> nu va *i niciodata cac'e&uit si nu va *i disponi%il o**line. Exemplu: Code:
    FETLO?KA lo i#()h)

    #aca *olosim asteris? (K , toate resurseleB*isierele vor necesita o conexiune la internet. Exemplu: Code:
    FETLO?KA P

    11.4.3 7"LLI"CH 7ectiunea )/LLF/CJ de mai ,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. Exemplu: Code:
    *html9* *o''li#e(html

    Nota: <rimul AH( (uni*orm resource identi*ier este resursa, iar cel de&al doilea este rezerva (*all%ac? . 11.5 "ctual 8area cac&e-ulu 34

    +data ce o aplicatie este cac'e&uita, e ramane cac'e&uita pan6a cand una din urmatoarele actiuni se petrece: !. Atilizatorul ster6e cac'e&ul %ro$serului 3. )isierul mani*est este modi*icat (vezi nota mai ,os 1. Cac'e&ul aplicatiei este actualizat prin pro6ramare Exemplu: Code:
    CICHE MIF6>E<T = 2072-02-27 v7(0(0 *tem,("%% *lo o( i' *m,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. Cac'e&ul unei aplicatii este actualizat cand *isierul mani*est se sc'im%a. #aca editati o ima6ine sau daca modi*icati o *unctie 8ava7cript, aceste operatii nu vor *i re&cac'e&uite. /ctualizarea datei si versiunii in linia de comentariu este o cale de a *ace %ro$ser&ul sa re&cac'e&uiasca *isirele. 11.= O!ser*at cu pr * re la "ppl cat on Cac&e /veti 6ri,a la ce cac'e&uiti. +data ce un *isier este cac'e&uit, %ro$ser&ul va continua sa a*iseze versiunea cac'e&uita, c'iar daca *isierul de pe server este mo*i*icat. <entru a va asi6ura ca %ro$serul actualizeaza cac'e&ul, va tre%ui sa modi*icati *isierul mani*est. 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 .

    Curs HTML- & <artea a 2(V&a


    14 7ormularele HTML5
    14.1 T pur de nput HTML5 introduce noi tipuri de input pentru *ormulare. (n acest curs vom discuta despre:

    3-

    & email & url & num%er & ran6e & #ate pic?ers (date, mont', $ee?, time, datetime, datetime&local & searc' & color 7uport in %ro$sere:

    Gota+ cel mai %un suport pentru aceste tipuri noi inputuri este o*erit de Opera. 14.1.1 T p nput - ema l )olosit pentru introducerea si validarea datelor de tip ema l. /%emplu+ Code:
    E-m,ilA <i#)&t ty)e="em,il" #,me="&%e$8em,il" *>

    14.1.2 T p nput - url )olosit pentru introducerea si validarea datelor de tip adresa E@L. /%emplu+ Code:
    Home), eA <i#)&t ty)e="&$l" #,me="&%e$8&$l" *>

    14.1.3 T p nput - num!er )olosit pentru introducerea si validarea datelor de tip numeric. 7e pot inpune restrictii cu privire la numerele acceptate in input. /%emplu+ Code:
    P&#"teA <i#)&t ty)e="#&mbe$" #,me=")oi#t%" mi#="7" m,.="70" *>

    <uteti *olosi urmatoarele atri%ute pentru a adau6a restrictii. 35

    14.1.4 T p nput - ran'e )olosit pentru introducerea si validarea datelor dintr&un ran6e (6ama de numere. /%emplu+ Code:
    <i#)&t ty)e="$,# e" #,me=")oi#t%" mi#="7" m,.="70" *>

    <uteti *olosi urmatoarele atri%ute pentru a adau6a restrictii. 14.1.5 T p nput - Date P c(ers HTML5 o*era mai multe tipuri de input pentru selectarea datei si a timpului: date & selecteaza data, luna si anul mont' & selecteaza luna si anul $ee? & selecteaza saptamana si anul time & selecteaza timpul (ora si minutul datetime & selecteaza timpul, data, luna si anul (timp ATC datetime&local & selecteaza timpul, data, luna si anul (timp local Armatorul exemplu va permite sa selectati o data dintr&un calendar: Code:
    D,t,A <i#)&t ty)e="d,te" #,me="&%e$8d,te" *>

    14.1.= T p nput - searc& )olosit pentru campuri de cautare si se comporta ca si campurile o%isnuite de text. 14.1.A T p nput - color )olosit pentru campuri ce contin culori. Exemplul de mai ,os va permite sa selectati o culoare dintr&un color pic?er. 3G

    /%emplu+ Code:
    C&lo,$eA <i#)&t ty)e=""olo$" #,me="&%e$8"olo$" *>

    Curs HTML- & <artea a 2V&a


    15 /lemente 5ormularelor n HTML5 15.1 Go elemente n 5ormulare HTML- introduce noi elemente pentru *ormulare: 9datalist= & 7peci*ica o lista de optiuni prede*inite pentru elementul , 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. <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.1.1 /lementul ,datal st0 Elementul ,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=. Atilizati lista de atri%ute a elementului 9input= pentru a il le6a cu un element de tip 9datalist=. Exemplu: Code:
    <i#)&t li%t="b$ow%e$%" *> <d,t,li%t id="b$ow%e$%"> <o)tio# v,l&e="6#te$#et E.)lo$e$"> <o)tio# v,l&e=">i$e'o."> <o)tio# v,l&e="Ch$ome"> <o)tio# v,l&e="O)e$,"> <o)tio# v,l&e="<,',$i"> <*d,t,li%t>

    An element 9input= cu valori prede*inite in 9datalist=. 15.1.2 /lementul ,(e$'en0 7copul elementului ,(e$'en0 este de a o*eri o cale securizata pentru autenti*icarea utilizatorilor. Ta6&ul 9?e@6en= speci*ica un 6enerator de perce'e de c'ei intr&un *ormular. Cand *ormularul este trimis, sunt 6enerate doua c'ei, una privata si una pu%lica. 3D

    C'eia privata este stocata local, iar c'eia pu%lica este trimisa la server. C'eia pu%lica poate *i *olosita pentru a 6enera un certi*icat pentru client, acesta putand *olosi certi*icatul pentru urmatoarele autenti*icari. Exemplu: Code:
    <'o$m ,"tio#="te%t8Cey e#()h)" method=" et"> GtiliH,to$A <i#)&t ty)e="te.t" #,me="&%$8#,me" *> C$i)t,$eA <Cey e# #,me="%e"&$ity" *> <i#)&t ty)e="%&bmit" *> <*'o$m>

    An *ormular cu camp 9?e@6en=. 15.1.3 /lementul ,output0 Elementul ,output0 reprezinta rezultatul unui calcul (ca cel realizat de un script . Exemplu: Code:
    <'o$m o#i#)&t=".(v,l&e=),$%e6#t0,(v,l&e1E),$%e6#t0b(v,l&e1">0 <i#)&t ty)e="$,# e" #,me="," v,l&e="90" *>700 E<i#)&t ty)e="#&mbe$" #,me="b" v,l&e="90" *> =<o&t)&t #,me="." 'o$=", b"><*o&t)&t> <*'o$m>

    Healizeaza un calcul si arata rezultatul intr&un element de tip 9output=. Go le elemente semant ce d n HTML5 HTML- nu este doar despre reducerea mar?upului existent (desi *ace destul de mult in acest sens . El de*ineste si noi elemente semantice. ,sect on0 Elementul sect on reprezinta o sectiune 6enerica a documentului sau a aplicatiei. + sectiune, in acest context, este o 6rupare tematica a continutului, de o%icei avand un antet. Exemple de sectiuni pot *i capitolele, 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, stiri, in*ormatii de contact. ,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. 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*. (n particular, 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 termenii de utilizare, pa6ina de start sau pa6ina de cop@ri6't. Elementul *ooter de unul sin6ur este su*icient pentru ast*el de cazuri, *ara un element na*

    3"

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

    14

    title="li#C to thi% )o%t"> T$,vel d,y <*,> <*h2> ((( <*div>

    #in nou, acesta este HTML- valid. #ar HTML- o*era un element mai speci*ic pentru cazul o%isnuit de marcare a unui articol pe o pa6ina & numit su6estiv elementul ,art cle0. Code:
    <,$ti"le> <) "l,%%=")o%t - d,te"> O"tobe$ 225 200; <*)> <h2> <, h$e'="=" $el="booCm,$C" title="li#C to thi% )o%t"> T$,vel d,y <*,> <*h2> ((( <*,$ti"le>

    /', dar nu este totusi atat de simplu. Mai exista o sc'im%are pe care ar tre%ui sa o *aceti. Va voi arata mai intai si apoi va voi explica: Code:
    <,$ti"le> <he,de$> <) "l,%%=")o%t - d,te"> O"tobe$ 225 200; <*)> <h7> <, h$e'="=" $el="booCm,$C" title="li#C to thi% )o%t"> T$,vel d,y <*,> <*h7> <*he,de$> ((( <*,$ti"le>

    V&ati prins L /m sc'im%at elementul ,&20 intr&un ,&10 si l&am impac'etat intr&un element ,&eader0. /m vazut de,a elementul ,&eader0 in actiune. 7copul sau este sa impac'eteze toate elementele care *ormeaza antetul articolului (in acest caz, data de pu%licare a articolului si titlul . #ar... dar... nu ar tre%ui sa avem un ,&10 per document L Nu va da asta peste cap sc'ema articolului L Nu, dar pentru a intele6e de ce nu, tre%uie sa ne dam inapoi un pas. (n HTML 4, singura modalitate de a crea sc'ema unui document a *ost cu a,utorul elementelor ,&10 - ,&=0. #aca ati *i vrut un sin6ur nod radacina in sc'ema, tre%uia sa va limitati la un sin6ur ,&10 in mar?upul dumneavoastra. #ar speci*icatiile HTML- de*inesc un al6oritm pentru 6enerarea sc'emei documentului care incorporeaza noi elemente semantice in HTML-. /l6oritmul HTML- spune ca un element ,art cle0 creeaza o noua sectiune, care are un nou nod in sc'ema documentului. 7i in HTML- *iecare sectiune poate avea elementul propriu ,&10.

    1!

    Este o sc'im%are drastica *ata de HTML 4 si iata de ce este un lucru %un. Multe pa6ini $e% sunt 6enerate prin intermediul template&urilor. + %ucata de continut este luata dintr&o sursa si inserata in pa6ina intr&o parte, o alta %ucata de continut este inserata in alta parte. Multe tutoriale sunt structurate in acest *el. >(ata o %ucata de cod HTML. Copiati&o si lipiti&o in pa6ina dumneavoastra.> Este *oarte %ine pentru %ucati mici de continut, dar daca ceea ce lipiti reprezinta o sectiune intrea6a L (n acest caz, tutorialul va citi ceva de acest 6en: >(ata o %ucata de cod HTML. Copiati&o si lipiti&o intr&un editor de text si aveti 6ri,a ca ta6urile si tutlurile sa se potriveasca cu nivelul ierar'ic al ta6urilor de titluri din pa6ina in care o lipiti.> 7a va explic alt*el. HTML 4 nu are element de titlu generic. /re sase elemente numerotate stric? 9'!= & 9'5=, care tre%uie ordonate ierar'ic in exact aceeasi ordine. Cam neplacut, mai ales daca pa6ina dumneavoastra este mai curand >asam%lata> decat >creata>. 7i aceasta este pro%lema pe care o rezolva HTML- cu noile elemente de sectiune si noile re6uli pentru elementele de tip titlu existente. #aca *olositi noi elemente de sectiune, va pot da acest mar?up: Code:
    <,$ti"le> <he,de$> >h7> I %y#di",te )o%t <*h7> <*he,de$> <)> Lo$em i)%&m bl,h bl,h((( <*)> <*,$ti"le>

    si il puteti copia si lipi oriunde in pagina dumneavoastra *ara modi*icari. )aptul ca dispune de un element ,&10 nu este o pro%lema, deoarece intre6 codul este continut intr&un ,art cle0. Elementul ,art cle0 de*ineste un nod auto&continut in sc'ema documenteului, elementul ,&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.

    Pro5esorul Mar(up spune+


    Precum toate lucrurile de pe web, realitate este putin mai complicata decat lasa sa se inteleaga aici. 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). #iata a a fi mult mai simpla daca folositi ori o metoda ori cealalta, dar nu pe manadoua.$aca trebuie sa le folositi pe amandoua pe aceeasi pagina, fiti sigur ca erificati re%ultatul in &'()* +utliner si ca schema documentlui dumnea oastra are sens. "ntetur Code:
    <div id="he,de$"> <h7> My Leblo <*h7> <) "l,%%="t, li#e"> I lot o' e''o$t we#t i#to m,Ci# <*div> ((( <div "l,%%="e#t$y"> <h2> T$,vel d,y <*h2> <*div> ((( thi% e''o$tle%%( <*)>

    13

    <div "l,%%="e#t$y"> <h2> 6Om oi# to P$, &e ! <*h2> <*div>

    Nu este nimic 6resit cu acest mar?up. #aca va place, il puteti pastra. Este HTML- valid. #ar HTML- o*era cateva elemente semantice aditionale pentru anteturi si sectiuni. Mai intai 'aideti sa scapam de antetul ,d * dJ?&eader?0. Este o metoda des utilizata, dar nu inseamna nimic. Elementul d * nu are semantica de*inita si nici atri%utul d nu are semantica de*inita. (Anui Aser /6ent nu ii este permisa deductia nici unui inteles din valoarea atri%utului d. /ti putea sc'im%a aici in ,d * dJ?s&a8!ot?0 si ar avea aceeasi valoare semantica, adica nimic. HTML- de*ineste un element ,&eader0 pentru acest scop. 7peci*icatia HTML- are exemple reale de *olosire a elementului ,&eader0. (ata cum ar atata pe pa6ina noastra data exemplu: Code:
    <he,de$> <h7> My Leblo <*h7> <) "l,%%="t, li#e"> I lot o' e''o$t we#t i#to m,Ci# ((( <*he,de$>

    thi% e''o$tle%%( <*)>

    E %ine. Va spune tuturor celor care vor sa stie ca aceasta este un antet. #ar ce spuneti despre slo6an L An alt o%icei, care apan acum nu a dispus de mar?up standard. Este un lucru di*icil sa&l marc'ezi. An slo6an este precum un su%titlu, dar este >atasat> titlului principal. /ceasta inseamna ca este un su%titlu care nu isi creeaza propria sectiune. Elementele de antet, cum ar *i ,&10 si ,&20, dau structura pa6ini. Luate impreuna, ele creeaza o sc'ema pe care o puteti *olosi pentru a vizualiza (sau navi6a in pa6ina. /plicatiile de tip >screen reader> *olosesc sc'ema documentului pentru a a,uta utilizatorii nevazatori sa navi6'eze in pa6ina. Exista unelte online si extensii de %ro$ser care va permit sa vizualizati sc'ema documentului. (n HTML 4, elementele ,&10 & ,&=0 erau singura care de a crea sc'ema documentului. 7c'ema pa6inii date exemplu arata asa: Code:
    My Leblo 0h71 Q E - - T$,vel d,y 0h21 Q E - - 6Om oi# to P$, &e ! 0h21

    Este %ine, dar inseamna ca nu exista un mod pentru a marca slo6anul >/ lot o* e**ort $ent into ma?in6 t'is e**ortless>. #aca am *i incercat sa il marcam cu un 9'3=, ar *i adau6at un nod *antoma la sc'ema documentului. Code:
    My Leblo 0h71 Q E - - I lot o' e''o$t we#t i#to m,Ci# Q

    thi% e''o$tle%%( 0h21

    11

    E - - T$,vel d,y 0h21 Q E - - 6Om oi# to P$, &e ! 0h21

    #ar aceasta nu este structura documentului. 7lo6anul nu reprezinta o sectiune: este doar un su%titlu. <ro%a%il am putea marca slo6anul ca un ,&20 si vom marca *iecare titlu din articol ca un ,&30 L Nu, este c'iar mai rau: Code:
    My Leblo Q E - Q E Q E 0h71 I lot o' e''o$t we#t i#to m,Ci# - - T$,vel d,y 0h31 - - 6Om oi# to P$, &e ! 0h31 thi% e''o$tle%%( 0h21

    /cum avem in continuare un nod *antoma in sc'ema documentului, care a >*urat> copii care apartineau de drept nodului radacina. 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. (ndi*erent cat de mult incercam sa sc'im%am lucrurile, >/ lot o* e**ort $ent into ma?in6 t'is e**ortless> va ateriza in aceasta reprezentare. 7i de aceea am a,uns sa *olosim mar?up *ara valoare semantica, asa cum este ,p classJ?ta'l ne?0 HTML- o*era o solutie pentru aceasta: elementul ,&'roup0. Elementul ,&'roup0 actioneaza ca un am%ala, pentru doua sau mai multe elemente de titrare inrudite. Ce inseamna >inrudite> L (nseamna ca, luate laolalte, ele creeaza un sin6ur nod in sc'ema documentului. #at *iind acest mar?up: Code:
    <he,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,de$> ((( <div "l,%%="e#t$y"> <h2> T$,vel d,y <*h2> <*div> ((( <div "l,%%="e#t$y"> <h2> 6Om oi# to P$, &e! <*h2> <*div>

    14

    /ceasta este sc'ema documentului care este creat: Code:


    My Leblo 0h7 o' it% h $o&)1 Q E - - T$,vel d,y 0h21 Q E - - 6Om oi# to P$, &e ! 0h21

    <uteti testa pa6inile dumneavoastra in HTML- +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. #e exemplu, lista din Mozilla )ire*ox este stocata in ns/lementTa!le.cpp. Elementele care nu sunt in aceasta lista sunt tratate ca >elemente necunoscute>. Exista doua pro%leme *undamentale cu elementele necunoscute. 1. Care ar tre!u sa 5 e st lul acestor elemente ? (mplicit, ,p0 are spatiere deasupra si dedesu%t, ,!loc(Kuote0 este indentat cu o mar6ine la stan6a si ,&10 este a*isat intr&un *ont mai mare. #ar ce stil implicit tre%uie aplicat acestor elemente necunoscute L 2. Cum ar tre!u sa arate DOM-ul elementulu ? ns/lementTa!le.cpp din Mozilla include in*ormatii despre ce tipuri de alte elemente poate contine *iecare element. #aca includeti mar?up cum ar *i ,p0,p0, al doilea para6ra* il inc'ide in mod implicit pe primul, ast*el incat elementele apar ca *rati, nu in relatie parinte & copil. #ar daca scrieti ,p0,span0, elementul span nu inc'ide para6ra*ul, din cauza *aptului ca )ire*ox stie ca ,p0 este un element %loc care contine elementul ,span0. /st*el, ,span0 a,un6e sa *ie copil al lui ,p0 in #+M. #i*eritele %ro$sere raspund acestor intre%ari in mod di*erit. (7ocant, stiu . #intre %ro$serele ma,ore, raspunsul lui (nternet Explorer la maandoua intre%arile a *ost cel mai pro%lematic, dar *iecare %ro$ser are nevoie de putin a,utor aici. La prima intre%are ar tre%ui sa *ie relativ usor de raspuns. NA dari nici o stilizare speciala elementelor necunoscute. 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. 7i acest lucru mer6e, in mare parte, dar este un mic sc'epsis pe care tre%uie sa il stiti.

    Pro5esorul Mar(up spune+


    'oate browserele afisea%a elementele necunoscute in linie, de exemplu ca si cum ar a ea o regula ,-- d spla$+ nl ne Exista cateva elemente noi de*inite in HTML- care sunt elemete de tip container. /ceasta inseamna ca pot contine alte elemente de tip container, iar %ro$serele care se con*ormeaza HTML- le vor stiliza implicit ca d spla$+!loc(. #aca vreti sa *olositi aceste elemente in %ro$serele mai vec'i, ca tre%ui sa de*initi manual stilul de a*isare: Code: 1-

    ,$ti"le5 ,%ide5 det,il%5 'i ",)tio#5 'i &$e5 'oote$5 he,de$5 h $o&)5 me#&5 #,v5 %e"tio# 2 4

    (/ceasta secventa este prelucrata din HTML- Heset 7t@les'eet a lui Hic' Clar?, care *ace multe alte lucruri care sunt mai presus de scopul acestui capitol . #ar stati, totul se complica si mai tare : (nainte de versiunea", (nternet Explorer nu aplica nici un fel de stilizare pe documentele necunoscute. #e exemplu aveati acest mar?up: Code
    <%tyle ty)e="te.t*"%%"> ,$ti"le 2 di%)l,yA blo"C3 bo$de$A 7). %olid $ed 4 <*%tyle> ((( <,$ti"le> <h7> Lel"ome to 6#ite"h<*h7> <)>Thi% i% yo&$ <%),#> 'i$%t d,y <*%),#> ( <*)> <*,$ti"le>

    (nternet Explorer ( pana la si inclusiv (ED nu va trata elementul ,art cle0 ca un element de tip container si nici nu va pune o %ordura rosie in ,urul elementului. Toate re6ulile de stil sunt pur si simplu i6norate. (nternet Explorer " rezolva aceasta pro%lema. / doua pro%lema este ca #+M&ul pe care il creeaza %ro$serele atunci cand intalnesc elemente necunoscute. #in nou, ce mai pro%lematic %ro$ser este reprezentat de versiunile mai vec'i de (nternet Explorer (inainte de versiunea ", care rezolva si aceasta pro%lema . #aca (ED nu recunoaste explicit numele elementului, va insera elementul in DOM ca un nod gol fara copii. Toate elementele la care v&ati asteptat sa *ie copii directi ai elementului necunoscut vor *i introduse ca *rati. (ata aici o mostra de arta /7C(( pentru a ilustra di*erenta. /cesta este #+M&ul pe care il dicteaza HTML-: Code:
    Q E Q Q Q E Q E Q E Q Q Q E - -h7 0"hild o' ,$ti"le1 Q E - - te.t #ode "Lel"ome to 6#ite"h" - -) 0"hild o' ,$ti"le5 %ibli# - - te.t #ode "Thi% i% yo&$ " - - %),# Q E - - te.t #ode "'i$%t d,y" - - te.t #ode "(" o' h71

    #ar acesta este #+M&ul pe care il creeaza versiunile vec'i de (nternet Explorer Code: 15

    h7 0%ibli# o' ,$ti"le1 Q E - - te.t #ode "Lel"ome to 6#ite"h" ) 0%ibli# o' h71 Q E - - te.t #ode "Thi% i% yo&$" Q E - - %),# Q Q Q E - - te.t #ode "'i$%t d,y" Q E - - te.t #ode "("

    Exista un arti*iciu minunat pentru a rezolva aceasta pro%lema. (N cazul in care crati prin 8ava7cript un element vid ,art cle0 inaitne de a&l *olosi in pa6ina dumneavoastra, (nternet Explorer va recunoaste elementul ,art cle0 si va va lasa sa il prelucrati cu C77. Nu exista nevoia de a insera vreodata elementul vid in #+M. 7impla creare a elementului o sin6ura data este de a,un6 pentru a invata (nternet Explorere sa stilizeze elementul pe care nu il recunoaste. Code:
    <html> <he,d> <%tyle> ,$ti"le 2 di%)l,yA blo"C3 bo$de$A 7). %olid $ed 4 <*%tyle> <%"$i)t> do"&me#t("$e,teEleme#t0",$ti"le"13 <*%"$i)t> <*he,d> <body> <,$ti"le> <h7> Lel"ome to 6#ite"h <*h7> <)> Thi% i% yo&$ <%),#> 'i$%t d,y <*%),#> ( <*)> <*,$ti"le> <*body> <*html>

    /ceasta *unctioneaza in toate versiunile de (nternet Explorer, pana inapoi la (E5 : <utem extinde aceasta te'nica pentru a crea deodata copii vide ale tuturor noilor elemente HTML- & din nou, ele nu sunt inserate niciodata in #+M, ast*el incat nu veti vedea aceste elemente 6oale & si apoi puteti incepe sa le *olositi *ara a va *ace prea multe 6ri,i le6ate de %ro$serele incapa%ile de HTML-. Hem@ 7'arp a *acut c'iar acest lucru, cu al sau script numit su6estiv >HTML- ena%lin6 script>. 7cript&ul a trecut prin mai mult de zece revizii, dar ideea de %aza este: Code:
    <! - -Ri' lt 6E ;S> <%"$i)t> v,$ e = 0",bb$5 ,$ti"le5 ,%ide5 ,&dio5 ",#v,%5 d,t,li%t5 det,il%5" E "'i &$e5 'oote$5 he,de$5 h $o&)5 m,$C5 me#&5 mete$5 #,v5 o&t)&t5" E ")$o $e%%5 %e"tio#5 time5 video"1( %)lit0O 5 O13 'o$ 0v,$ i = 03 i < e(le# ht3 iEE1 2 do"&me#t("$e,teEleme#t0eRiS13 4 <*%"$i)t> <!Re#di'S - - >

    1G

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

    @elat de pr eten e s alte le'atur Lin?urile o%isnuite indica pur si simplu o alta pa6ina. Helatiile de le6atura sunt un mod de a explica de ce *aceti trimtere la alta pa6ina. Ele termina propozitia >)ac trimitere la acest lucru pentru ca ...> ... este un *isier de stiluri continand re6uli C77 pe care %ro$serul ar tre%ui sa le aplice la acest document. ... este un *lux care contine acelasi continut ca si aceasta pa6ina, dar intr&un *ormat standard cu posi%ilitatea de a%onare. ... este o traducere a pa6inii in alta lim%a. ... este urmatorul capitol dintr&o carte online din care aceasta pa6ina *ace parte. 7i asa mai departe. HTML- desparte relatiile de le6atura in doua cate6orii: 1D

    #oua cate6orii de lin?uri pot *i create *olosind elementul lin?. 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 ... Comportamentul exact al lin?urilor catre resurse externe depinde de relatiile exacte, asa cum sunt de*inite pentru tipul respectiv de le6atura. #in exemplele pe care tocmai le&am dat, numai primul (relJ?st$les&eet? este un lin? catre o resursa externa. Hestul sunt '@perlin?urispre alte documente. Veti dori sau nu sa urmati aceste lin?uri, dar ele nu sunt necesare pentru a vizualiza pa6ina curenta. Cel mai adesea, relatiile de le6atura pot *i o%servate pe elementul ,l n(0 din elementul ,&ead0 al unei pa6ini. Anele relatii de le6atura pot *i *olosite pe elemente ,a0, dar este neo%isnuit c'iar si atunci cand se permite acest lucru. HTML- permite unele relatii pe elementele ,area0, dar acest lucru este si mai putin o%isnuit. (HTML 4 nu permitea un atri%ut rel pe elementele ,area0 .

    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. (n incercarea de a impiedica oamenii sa incurce total lucrurile, .H/T.0 metine un re6istru de valori rel propuse si de*ineste proceul de acceptare.

    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.t*"%%" *>

    /ceasta este cel mai *recvent *olosita relatie de le6atura din lume (literalmente . ,l n( relJ?st$les&eet?0 este *olosita ca sa indice re6uli C77 care sunt stocate intr&un *isier separat. + mica optimizare pe care o puteti *ace in HTML- este sa scapati din atri%utul t$pe. Exista un sin6ur lim%a, pentru stiluri pe $e%, C77, deci aceasta este valoarea implicita pentru atri%utul t$pe. *unctioneaza in toate %ro$serele. (Cineva, cred, ar putea ima6ina vreodata un nou lim%a, pentru crearea stilurilor, insa, daca se intampla acel lucru, adau6ati la loc atri%utul t$pe. Code:
    <li#C $el="%tyle%heet" h$e'="%tyle-o$i i#,l("%%" *>

    relJalternate
    Continuand cu pa6ina noastra de exemplu: Code: 1"

    <li#C $el=",lte$#,te" ty)e=",))li",tio#*,tomE.ml" title="My Leblo 'eed" h$e'="*'eed*" *>

    /ceasta relatie de le6atura este de asemenea destul de intalnita. ,l n( relJ?alternate?0, com%inata cu tipul de media H77 sau /tom in atri%utul t$pe, permite operatiunea denumita >*eed autodiscover@>. <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. Cele mai multe %ro$sere suporta descoperirea automata de *luxuri /T+MBH77 prin a*isarea unui icon alaturi de AHL. (7pre deose%irea de relJ?st$les&eet?, atri%utul t@pe conteaza aici. Nu renuntati la el: Helatia de le6atura relJ?alternate? a *ost intotdeauna un 'i%rid ciudat de cazuri de *olosire, c'iar si in cazul HTML 4. (n HTML-, de*inita sa a *ost clari*icata si extinsa pentru a descrie mai pe lar6 continutul existent de pe $e%. #upa cum tocmai ati vazut, *olosirea relJ?alternate? in com%inatie cu t$peJ?appl cat on3atom9%ml? indica prezenta unui *lux /tom pentru pa6ina curenta. (nsa puteti *olosi relJ?alternate? si impreuna cu alte atri%ute t$pe pentru a indica acelasi continut intr&un *ormat di*erit, cum ar *i <#). HTML- ne scapa de con*uzia indelun6ata despre cum sa *acem le6aturi la traducerile documentelor. 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, dar nu este corect. Erata HTML 4 prezinta patru erori din speci*icatiile HTML4. Ana *ace le6atura prin relJ?alternate?. Modul corect descris in erata HTML 4 si acum prezent in HTML- este sa *olosim atri%utul &re5lan'. #in ne*ericire, aceste speci*icatii din erata nu au *ost reintroduse niciodata in speci*icatiile HTML 4, deoarece nimeni din 6rupul 0rupul de lucru HTML al .1C nu mai lucra la HTML.

    "lte relat de le'atura n HTML5


    relJ?aut&or? este *olosita pentru a *ace le6atura la in*ormatii despre autorul unei pa6ini. /cestea pot *i reprezentate printr&o adresa de tip ma lto+, desi nu este neaparat necesar. <oate *i pur si simplu un lin? catre un *ormular de contact sau o pa6ina despre autor. relJ?e%ternal? >arata ca linul duce la un document care nu este parte a site&ului din care documentul curent reprezinta o parte>. Cred ca a *ost prima data popularizat de .ord<ress, care il *oloseste pentru lin?urile lasate de cei care comenteaza. HTML 4 a de*init relJ?start?, 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 . 7in6ura care a *ost vreodata *olosita corect este relJ?ne%t?. +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?. /u *olosit relJ?end? in loc de relJ?last?. +', si & de capul lor & au *olosit relJ?up? pentru a indica o pa6ina >parinte>. HTML- include relJ?5 rst?, 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, o*erit pentru compati%ilitatea cu versiunile anterioare . (nclude de asemenea relJ?pre*? si relJ?ne%t?, ca si 44

    HTML4, si suporta relJ?pre* ous? pentru compati%ilitate, precum si relJ?last? (ultimul dintr&o serie, o6linda lui relJ?5 rst? si relJ?up?. 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 . <a6ina dumneavoastra este pro%a%il prima pa6ina din lista dumneavoastra si pa6ina curenta este cea de s*arsit. relJ?up? arata catre penultima pa6ina din lista. relJ? con? este a doua cea mai populara relatie de le6atura, dupa relJ?st$les&eet?. Este de o%icei re6asita impreuna cu s'ortcut, in acest mod: Code:
    <li#C $el="%ho$t"&t i"o#" h$e'="*',vi"o#(i"o">

    Toate %ro$serele importante suporta acest mod de *olosire pentru a asocia pa6inii un mic icon. #e o%icei este a*ista in %ara de adrese a %ro$serului, lan6a AHL, sau intr&un ta% ori in amandoua. #e asemenea nou in HTML-: atri%utul s 8es poate *i *olosit in com%inatie cu con pentru a indica marimea iconului mentionat. relJ?l cense? a *ost inventat de catre comunitatea micro&*ormatelor. >(ndica *aptul ca documentul mentionat o*era termenii licentei de cop@ri6't su% care este o*erit documentul respectiv>. 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. / *ost inventat de 0oo6le si standardizat in cadrul comunitatii micro&*ormatelor. .ord<ress adau6a relJ?no5ollo1? la toate lin?urile adau6ate de cei care comenteaza. Hatiunea a *ost ca lin?urile >no*ollo$> nu vor a,un6e in ecuatia <a6eHan? si spammerii vor renunta sa posteze comentarii spam pe %lo6uri. /ceasta nu sa intamplat, dar relJ?no5ollo1? a rezistat. relJ?nore5errer? >indica *aptul ca nici o in*ormatie despre pa6ina anterioara nu tre%uie transmisa atunci cand se urmeaza o le6atura>. relJ?p n'!ac(? speci*ica adresa unui server >pin6%ac?>. Cum era explicat in speci*icatiile <in6%ac?, >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 ... <ermite le6aturi inverse (reverse lin?in6 & o cale de a mer6e inapoi pe un lant de le6aturi, mai curand decat mer6and inainte>. 7istemele de %lo66in6, mai ales .ord<ress, implementeaza mecanismul de pin6%ac? pentru a noti*icat autorii la care ati realizat lin?uri atunci cand ati creat o postare pe %lo6. relJ?pre5etc&? >indica *aptul ca trasn*erul si stocarea resursei speci*icate este pro%a%il sa *ie %ene*ice, dupa cum este *oarte pro%a%il ca utilizatorul sa ceara aceasta resursa.> Motoarele de cautare adau6a uneori ,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. #e exemplu: *olosind )ire*ox, cautati in 0oo6le dupa CNN, vedeti sursa pa6iniii si cautati cuvantul c'eie pre5etc&. Mozilla )ire*ox este insu6urul %ro$ser actual care suporta relJ?pre5etc&?. relJ?searc&? >indica *aptul ca documentul metionat o*era o inter*ata speci*ica pentru cautarea in document si resursele sale conexe>. (n mod speci*ic, daca vreti ca relJ?searc&> sa *aca ceva 4!

    util, 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. +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. relJ?s de!ar? >indica *aptul ca, daca documentul mentionat este incarcat, sa *ie prezentat intr& un context de navi6are secundar (daca este posi%il , in locul celui curent.> Ce inseamna asta L (n +pera si Mozilla )ire*ox, inseamna >atunci cand dau clic pe acest lin?, atentionez utilizatorul sa creeze un %oo?mar? care, atunci cand este selectat din meniul %oo?mar?uri, desc'ide documentul la care este *acuta le6atura, intr&un side%ar al %ro$serului> (+pera il numeste >panel> in loc de >side%ar> . (nternet Explorer, 7a*ari si C'rome i6nora relJ?s de!ar? si il trateaza ca pe un lin? o%isnuit, Ncazul de utilizare relJ?s de!ar?O relJ?ta'? >indica *aptul ca ta6ul pe care documentul mentionat il reprezinta se aplica documentul curent>. Marcarea ta6urilor (cuvinte c'eie ale cate6oriilor cu atri%ut rel a *ost inventata de Tec'norati pentru a&i a,uta sa&si or6anizeze postarile de pe %lo6. Flo6urile si tutorialele timpurii se re*ereau la aceastea ca la >ta6uri Tec'norati>. (/ti citit %ine: o companie comerciala a convins intrea'a lume sa adau6e metadatele care au *acut mai usoara munca companiei. + trea%a %una : 7intaxa a *ost mai tarziu standardiata in cadrul comunitatii micro& *ormatelor, unde a *ost simplu numita relJ?ta'?. Cele mai multe sisteme de %lo66in6 care permiteau asocierea cate6oriilor, a cuvintelor c'eie sau a ta6urilor cu postari individuale le vor marca cu lin?uri relJ?ta'?. 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. Codarea caracterelor Cand va 6anditi la >text>, va 6anditi pro%a%il la >caractere si sim%oluri pe care le pot vedea pe ecranul calculatorului>. #ar calculatoarele nu prelucreaza caractere si sim%oluriM ele au de&a *ace cu %iti si %aiti. )iecare %ucata de text pe care o vedetio pe un ecran de calculator este de *apt stocata intr&un anumit cod de caractere. Exista sute de codari di*erite de caractere, unele optimizate pentru anumite lim%i, cum ar *i rusa, c'ineza sau en6leza, si altele care pot *i *olosite pentru mai multe lim%i. (n mare, 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. (n realitate, este mai complicat de atat. /celasi caracter poate aparea in mai mult de o codare, dar *iecare codare poate sa *oloseasca o secventa di*erita de %aiti pentru stocarea caracterelor in memorie sau pe disc. /st*el, va puteti 6andi la codarea caracterelor ca la un *el de c'eie de decriptare pentru text. +ri de care ori va da cineva o secventa de %iti si pretinde ca este >text>, 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 . #eci, 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. #aca sunteti *amiliarizat cu 'eaderele HTT<, s& ar putea sa *i vazut un 'eader ca acesta: Code:
    Co#te#t-Ty)eA te.t*html3 "h,$%et="&t' - B"

    <e scurt, aceasta spune ca un server $e% crede ca va trimite un document HTML si ca 43

    documentul *oloseste codarea de caractere ET7-C. #in ne*ericire, in intrea%a ma6ni*ica supa care este .orld .ide .e%, putin autori de pa6ini controleaza serverul lor HTT<. 0anditi&va la Flo66er: continul este o*erit de indivizi, dar serverele sunt controlate de 0oo6le. HTML 4 a o*erit o cale de a preciza codarea de caractere in insusi documentul HTML. /ti vazut pro%a%il si aceasta: Code:
    <met, htt)-eT&iv="Co#te#t-Ty)e" "o#te#t="te.t*html"3 "h,$%et=&t'-B">

    <e scurt, 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-. Headerul HTT< este metoda pre*erata si trece peste ta6ul ,meta0 daca acesta este prezent. #ar nu oricine poate con*i6ura 'eadere HTML, asa incat ta6ul ,meta0 este inca prezent. #e *apt, s&a simpli*icat putin in HTML-. /cum arata asa: Code:
    <met, "h,$%et="&t'-B" *>

    )untioneaza in toate %ro$serele. Cum s&a a,uns la aceasta sintaxa prescurtata L (ata cea mai %una explicatie pe care am intalnit&o Hatiunea pentru com%inatia de atri%ute ,meta c&arseJ?? 30 este ca implementarile Aser /6ent le includ de,a, deoarece oamenii tind sa lase lucrurile *ara 6'ilimmele, cum ar *i: Code:
    <METI HTTP-EUG6J=Co#te#t-Ty)e COFTEFT=te.t*html3 "h,$%et=6<O-BB9;-7>

    Exista c'iar cateva cazuri de teste ,meta c&arset0 daca nu crederi ca %ro$serele *ac de,a acest lucru.

    Intre!at -l pe pro5esorul Mar(up


    I: Gu 5olosesc n c odata caractere c udate. 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. Nespe*iciarea unei codari de caracter poate duce la vulnera%ilitati de securitate. <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. Tre%uie ntotdeauna sa speci*icati o codare de caracter pentru 5 ecare document HTML sau se pot intampla lucruri rele. <uteti sa *aceti acest lucru prin intermediul 'eaderului HTT< Content-T$pe, al decaratiei ,meta &ttp-eKu *0 sau al declaratiei prescurtate ,meta c&arset0, dar va ro6 *aceti&o.

    41

    S-ar putea să vă placă și