Search the Community

Sintaxe HTML5 Prezentarea elementelor noi API . Tag 'clasic' <p> bla bla bla bla ... </p> * Tag 'gol' <img src="image_R0cc0.jpg" alt="o poza cu R0cc0"> * Tag 'autoclose' <rect x="150" y="40" width="60" height="30" fill="black" stroke="black"/> Elementele HTML5 se pot divide in trei categorii in baza tipologiei de tag pe care le folosim la implementari . 1 : Elemente normale : sunt acelea care pot inchide continuturi sub forma de text , comenturi HTML , si alte element HTML . Exemple : Paragrafe : " <p> " Liste : " <ul> " Titluri : " <h1> " etc . Pe parcurs ce vom aprofunda vom om vedea tagul se inchidere si deschidere " <p> R0cc0 </p> ". 2 : Elemente goale : elementele goale sunt acelea care nu pot sa aiba nici un continut , pentru aceste elemente se foloseste un tag gol . Exemple : area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr. Pentru elementele goale inchiderea tagului nu este obligatorie in XHTML . Deci putem definii un tag : " <img> " urmand regulile XHTML . Exemplu : <img src="image.png" alt="text" /> Sau cu vechiul HTML4 : <img src="image.png" alt="text"> 3 : Elemente provenite de la alte namespace-uri : pentru astea sunt cerute tagurile autoclose , este vorba de elemente adoptate din extern ca si SVG si MathML . MAJUSCULE si minuscule Una dintre diferente principale respectand regulile XHTML , se refera la folosirea MAJUSCULELOR si cea a minusculelor , pentru a definii un tag in XHTML este obligatoriu sa folosim minusculele , in HTML5 este voie sa scriem un tag folosind minusculele . <IMG src="image.png" alt="text"> Cazuri particulare : Exista anumite cazuri particulare pentru care un tag clasic poate limpsii din partea de deschidere sau de inchidere , asta se intampla cand browser-ul este in gradul de determinare limitele de operativitate a elementului , Cum ar fii : " head , body , si html " , care pot sa fie omise atata timp cat nu contin cun coment sau text ca instructie succesiva . Exemplu : <meta charset="utf-8"> <title>Page HTML5 valid</title> <p>Un paragraf poate sa nu aiba partea de inchidere <ol> **<li>si un element de lista </ol> Vedem cum ne arata exemplul , ca si tag-urile " p si li " pot fii scrise omitand partea de inchidere , doar daca elementul succesiv este inauntrul unui cerc de elemente , definit specific . In aceste optiuni pentru simplificare de viata , este insa gresit sa credem ca elementul " html " lipseste din ceea ce genereaza codul de mai sus , defapt el este implicit adaugat cand user-agent va face " runtime " . Pentru ceva mai detaliat puteti intra aici . Atribute Atributele HTML5 ne da o libertate mai mare fata de cele in XHTML , nu mai este obligatoriu inchiderea valorilor atributelor intre ghilimele . Cazurile pentru aceasta regula sunt 4 : Atributele goale : nu este necesar sa definim o valoare pentru atribut , este de ajus numele , valoare se introduce implicit din strin-ul gol . Exemplu : Urmand regulile XHTML: <input checked="checked" /> * In HTML5: <input checked> Atribute fara ghilimele : este prfect legal in HTML5 definire un atribut fara sa il inchidem valoarea intre ghilimele . Exemplu : <div class=test> Atribute cu apostrof " ' " : Valoare unui atribut poate fii inchisa intre apostrofuri . Exemplu : <div class='test'> Atribute cu ghilimele ( " ) : pentru a incheia si clarifica , este posibil sa folosim la sintaxele care prevad folosira ghilimelelor pentr a inchide valoarea unui atribut . Exemplu : <div class="test"> Simplificari Aici ne oprim un pic la simplificarile " style si script " . Sintaxele XHTML prevad specificarea de atrbute accesorii ca si " type " . <style type="text/css"> reguli CSS... </style>* <script type="text/javascript" src="script.js"> </script> In HTML5 putem sa scriem : <style> reguli CSS... </style>* <script src="script.js"> </script> Elemente concepute pentru un web modern La inceput erau tabele , trebuia sa construim structuri complexe , rupandule in intern cu o grila infinita " <tr> i <td> , acum multumita elementului " <div> " putem creea pagini HTML elegante , fara prea multe batai de cap . Exemplu : <html> <head> </head> **<body> ****<div id="header"> ******--- Titlu de cap --- ****</div> ****<div id="body"> *******<div id="meniu"> *******--- Voci de Meniu --- *******</div> *******<div id="main_content"> **********<div class="post"> **********--- Un Post --- **********</div> **********<div class="post"> **********--- Un alt Post --- **********</div> ******</div> ****</div> **</body> </html> In internul acestui constructor totul este foarte simplu de interpretat , este de ajus sa urmam fluxul de reintrate lasandu-ne condusi de valorile semantice atribuite la ID si Clasa . In anii trecuti modelul incepuse sa ne prezinte primele sale puncte slabe , in primul rand ne-am dat seama de nici o parte nu era o regula colectiva , pentru un svilupator ra " body " , iar pentru altul era " corp " , practic nici browser-ele nu mai pteam beneficia de aceasta divizie sematica , din vina acetei cauze care permitea milioanelor de site-uri care permiteau sa fie in structuri similare , dar diferite intre ele . In acest mod s-a creeat una dintre cele mai mari probleme ale HTML4 , incapacitatea de a descrie semnificatia informatiilor dintr-o pagin web intr-un format intrepretabil de alte software . Un exemplu ar fii asta . <span class="hrecipe"> ****<span class="fn">Ciorba de burta</span> ****<span class="ingredient">2 cubri de delicat</span> ****<span class="ingredient">1 Kg de burta</span> ****<span class="yield">2</span> ****<span class="instructions"> ********Lasati la fiert aproximativ 2 H pana la o temp de 95°C; ********mai adaugati niste telina; ********si mai lasatio la fiert inca 10 minute; ********puneti in castroane si serviti. ****</span> ****<span class="duration"> ********<span class="value-title" title="PT90M"></span> 120 min ****</span> </span> HTML5 a fost facut sa gestioneze si sa rezolve toate aceste probleme . Atribute globale Atributele globale sunt cele care se pot aplica la toate elementele HTML , care au fost mereu , bazate pe gandirea clasica " id " , diponibile din totdeauna asupra elementelor . HTML5 reformeaza aceasta definitie si o imbogateste cu noi membre de tag . Modificarea unei pagini contenteditable TinyMCE, CKEditor si WYMeditor sunt doar 3 dintr-o lista mare de librarii care ofera un instrument pentru editarea pagini web care trece de tipul clasic de text . Rezultatele sunt excelente , sunt aproape prosude desktop , cum ar fii Microsoft Word . HTML5 abordand aceasta problema a creat " rich-editing " document , reintroducand un set de specifice implementari in versiunea 5.5 a internetului explorer . Acest lucru a facut posibila creearea unui nou atribut global " contenteditable " , care daca este setat " true " asupra oricarui element , il face modificabil din browser . Practic ce inseamna modificare in browser : aceasta libertate este permisa doar dupa regulile HTML5 , iar asta difera de la browser la browser , un exemplu teoretic este : Cine cel care traduce un text via " <br> " , iar cel care creeaza un nou paragraf cu " <p> " , in paralele toate aste sunt disponibile intr-un set API , pentru a insista in zola modificabila cu , comenzi venite din extern , exemplu dintr-un tool-bar . Un buton care activeaza / dezactiveaza stilul BOLD , asta ar trebuii sa invove urmatoarea functie : document.execCommand('bold') Meniul contextual asociat unui element ( contextmenu ) Atributul globat " contextmenu " folosete la asocierea unui element cu meniul " contextmenu ", acesta forma de interactionare este foarte rar comuna in web dar foarte practica pe desktop unde , de exemplu , pe optiuni de sistem unde sunt actiuni ca si " copy , delete , rename . Exemplu : <img src="http://farm4.static.flickr.com/3623/3527155504_6a47fb4988_d.jpg" contextmenu="image_menu"> <menu type="context" id="image_menu"> ****<command label="Modifica il contrasto" onclick="contrastDialog();"> ****<command label="Negative" onclick="negative();"> </menu> Click-and cu , click dreapta pe imagine in browser ar trebuii sa arate un meniu , care contine 2 actiuni sau mai multe . Atributul " data-* " HTML5 predispune de posibilitate de a asocia cu fiecare element al unei pagini , un numar arbitrar de atribute ale caror nume pot fii definite in functie de nevoile personale , atat tip cat au sufitul " -data " . Exemplu : <img id="shadow" ****class="dog" ****data-dog-breed="German Shepherd” ****data-dog-age="5" ****data-dog-color="black" ****src="image_of_my_dog.jpg"> Spellcheck Majoritatea browser-elor astazi contin un motor de verificare a sintaxelor gramaticale . Cele HTML5 introduc un mecanism de abilitare sau dezabilitare a controlului sintaxelor pe portiuni de pagina modificabile de utilizator . Atribulul acesta se chiama " Spellcheck " si cand e impostat " true " , ordoneaza browser-ului de activare propriul corector al elementului curent si asuprea ramurilor acestuia . Alte atribute globale Sunt o multime de atribute globale specifice si nu le-am adus in discutie , cum ar fii " degradable si aria-*; " . Fac o lista cu toate atributele globale previste pentru acest tutorial . accesskey, class, contenteditable, contextmenu, dir, draggable hidden, id, lang, spellcheck, style, tabindex, title Tabel cu suportul pe browser : Un nou content model Cam asa se pot coda noile elemente pe care le-am prezentat mai sus : <!doctype html> <html lang="IT"> <head> </head> **<body> ****<header> ****--- Titlu de cap --- ****</header> ****<nav> ****--- Voci de Meniu --- ****</nav> ****<article> ****--- Un Post --- ****</article> ****<article> ****--- Un alt Post --- ****</article> </body> </html> Dupa cum puteti vedea , tagurile introduse au un nume apropriat relevantei sale , asta rezolva in mod elegant problema utilizarii atributului class cu valoare semantica , si problema recunoasterii unei singure eree a documentului din parea browser-ului . Introducerea lui " article , nav , header si alte tag-uri pe care le vom explica , impune si noutati in modul in care " user – agent " trebuie sa se comporte la interpretarea acelor elemente . Tot continutul intr-unul Exemplu HTML4 : <html> <body> **<h1>Jurnale de calatorie:</h1> **<h2>In calatorie prin lume pentru a descoperii noi culturi:</h2> **<h3>Inconjurul Britaniei in scop turistic</h3> **<p>Dove cel mai bun sapun de corp</p> **<h3>Calatorie in Turcia</h3> **<p>Dove cel mai bun gel de dus.</p> **<h3>Craiova oras natal</h3> **<p>Dove pentru barbati cel mai bun sampon</p> **<p>Toate calatoriile au fost interesant , chiar si hotelurile au avut preturi mici.</p> </body> </html> Rezultatul acestui cod , este 1 structurat : Sa dividem acum astea , dar vom fii nevoiti sa schimbat " h3 " in " h4 " in modul in care vom face spatiu divizarilor . <html> <body> **<h1>Jurnale de calatorie:</h1> **<h2>In calatorie prin lume pentru a descoperii noi culturi:</h2> **<h3>Europa</h3> **<h4>Inconjurul Britaniei in scop turistic</h4> **<p>Dove cel mai bun sapun de corp</p> **<h4>Calatorie in Turcia</h4> **<p>Dove pentru barbati cel mai bun sampon</p> **<h3>Africa</h3> **<h4>Dove cel mai bun gel de dus</h4> **<p>Craiova oras natal</p> **<p>Toate calatoriile au fost interesant , chiar si hotelurile au avut preturi mici</p> </body> </html> Asta se intampla deoarece ierarhia rubricii este bsoluta in ceea ce priveste intregul document si fiecare tag <h*> este obliigat sa respecte . In mare parte acest comportament este greu deoarece este foarte comun si interactioneaza cu articolele si comenturile , deci vom vrea sa avem statuturi independente . In HTML5 asta este posibil definind o noua tipologie de content model , numit " sectioning content " , de care apartin elemente ca si articole si sectii . Exemplu : <!doctype html> <html> <head> **<title>Jurnale de calatorie</title> </head> <body> **<header> ****<hgroup> ******<h1>Jurnale de calatorie:</h1> ******<h2>In calatorie prin lume pentru a descoperii noi culturi:</h2> ****</hgroup> **</header> **<section> ****<h1>Europa</h1> ******<article> ********<h1>Inconjurul Britaniei in scop turistic</h1> ********<p>Dove cel mai bun sapun de corp</p> ******</article> ******<article> ********<h1>Craiova oras natal</h1> ********<p>Dove cel mai bun sapun de corp</p> ******</article> **</section> **<section> ****<h1>Africa</h1> ****<article> ******<h1>Calatorie in turcia</h1> ******<p>Dove dove dove</p> ****</article> **</section> **<p>Toate calatoriile au fost interesant , chiar si hotelurile au avut preturi mici</p> </body> </html> Mult mai bine , acum singurii componenti din acest document sunt atomici si pot sa fie mutati in internul pagini fara sa trebuiasca sa schimbam structura lor interna . Scuzati greselile gramaticale . The end , va urma ...