R0cc0 Posted March 3, 2013 Report Posted March 3, 2013 (edited) Sintaxe HTML5Prezentarea 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 globaleAtributele 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 contenteditableTinyMCE, 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">SpellcheckMajoritatea 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 globaleSunt 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, titleTabel 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 ... Edited March 3, 2013 by R0cc0 Quote
