close

HTML5

Salt la navigare Salt la căutare
Limbajul de programare HTML 5
Sigla HTML5 și wordmark.svg
AutorTim Berners Lee
Data originii1989
Ultima versiuneHTML5
UtilizareProgramare site-uri WEB
TastareTare
Extensii comunehtml și htm
Implementarea de referință
Sistem de operareWindows, macOS, Android, iOS, Linux.
LicențăSursa deschisa
Site-ul webwww.w3.org/TR/html5/

HTML este cel mai folosit limbaj de marcare de pe Web. Practic, este folosit pentru a crea și structura site-uri web. Versiunea 5 a fost lansată din octombrie 2014, concepută pentru a defini standarde funcționale (ex. Video / Audio player) și API-uri de programare multiplatformă. Este în continuă evoluție.

Istorie

Dezvoltarea a fost inițiată de Web Hypertext Application Technology Working Group ( WHATWG ) (înființat în 2004 de dezvoltatori aparținând Apple , Mozilla Foundation și Opera Software ) care și-a propus să proiecteze specificații pentru dezvoltarea aplicațiilor web, concentrându-se pe îmbunătățiri și completări la HTML și tehnologiile conexe.

Inițial, spre deosebire de World Wide Web Consortium pentru încetineala în procesul de evoluție a standardului html și pentru decizia W3C de a orienta standardizarea către XHTML 2 care nu garanta compatibilitatea inversă, același W3C a recunoscut apoi aceste motive ca fiind valabile. , anunțând crearea unui grup special pentru standardizarea HTML5 și abandonarea XHTML 2.0 [1] .

Din 2007 , WHATWG a colaborat cu W3C în acest proces de standardizare, iar apoi a decis în 2012 să se separe de procesul de standardizare W3C [2] , creând efectiv două versiuni de HTML5: versiunea WHATWG este definită ca „HTML Living Standard” și deci în continuă evoluție, în timp ce cea a W3C va fi o singură versiune corespunzătoare unui „instantaneu” al Standardului de viață.

Prima recomandare a candidatului a fost publicată de W3C pe 17 decembrie 2012, iar prima versiune a standardului a fost publicată ca recomandare pe 28 octombrie 2014.

Versiunea HTML 5.1 a fost publicată de W3C ca recomandare la 1 noiembrie 2016.

Versiunea HTML 5.2 a fost publicată de W3C ca recomandare pe 14 decembrie 2017 [3]

Versiunea HTML 5.3 a fost publicată de W3C ca recomandare pe 28 ianuarie 2021. [4]

Etichete depreciate

HTML5 a depreciat următoarele etichete și atribute găsite în HTML4, deoarece funcția lor este acum gestionată de CSS3 [5] :

Elemente HTML4 depreciate în HTML5
Elemente HTML4 depreciate în HTML5

CSS3

HTML5 și CSS3 (evoluția CSS2) constituie un limbaj turing complet [6] [7] , o condiție suficientă pentru ca un limbaj să fie considerat un limbaj de programare .

SEO

HTML5 este conceput pentru a îmbunătăți SEO față de versiunile anterioare de HTML.

Suport browser

Exemplu de pagină HTML5 în Internet Explorer 7
Exemplu de pagină HTML5 în Internet Explorer 7 . Pare nesincronizat deoarece browserul nu recunoaște specificațiile

La nașterea HTML5 motorul de randare Webkit (Chrome și Safari) a fost primul care a interpretat corect multe dintre noile coduri, al doilea care a actualizat din acest punct de vedere a fost Gecko (Firefox) și în sfârșit Trindent (Internet Explorer). De câțiva ani, site-urile web care foloseau noile etichete HTML disponibile au fost vizualizate diferit în funcție de browserul folosit de utilizator [8] . În parte, această problemă a fost rezolvată prin tehnici precum CSS alternativ special pentru Internet Explorer , comentarii condiționate adaptate acestuia și biblioteci JavaScript , cum ar fi Modernizr [9] [10] [11] . Din 2019 , Microsoft Edge acceptă majoritatea specificațiilor HTML5 [12] .

Știri

Inovațiile introduse de HTML5 față de HTML4 vizează mai ales îmbunătățirea decuplării dintre structură, definită prin marcaj, caracteristicile de randare (font, culori etc.), definite prin directive de stil , și conținutul unei pagini web, definit de actualul text. Mai mult, HTML5 oferă suport pentru stocarea locală a unor cantități mari de date descărcate din browserul web , pentru a permite utilizarea aplicațiilor bazate pe web (cum ar fi căsuțele poștale Google sau alte servicii similare) chiar și în absența conexiunii la Internet.

În special [13] :

  • regulile de structurare a textului în capitole, paragrafe și secțiuni sunt mai stricte;
  • sunt introduse elemente de control pentru meniurile de navigare;
  • elementele de control pentru formularele electronice sunt îmbunătățite și extinse, adică noi atribute și tipuri de introducere pentru formulare (formulare de înregistrare și contact);
  • sunt introduse elemente specifice pentru controlul conținuturilor multimedia (tag -uri <video>și <audio>), cu HTML4 care poate fi încorporat doar prin Adobe Flash .
  • o serie de atribute sunt extinse la toate etichetele, în special cele care vizează accesibilitate ( WAI-ARIA ), prevăzute anterior doar pentru unele etichete;
  • Canvas este acceptat, ceea ce vă permite să utilizați JavaScript pentru a crea animații (posibil doar cu Adobe Flash la momentul HTML4) și grafică bitmap;
Un exemplu de stocare HTML5. Utilizatorul poate crea note și, chiar dacă browserul este reîmprospătat, acestea vor rămâne salvate.
Un exemplu de stocare HTML5. Utilizatorul poate crea note și, chiar dacă browserul este reîmprospătat, acestea vor rămâne salvate [14] .
  • introducerea geolocalizării , datorită unei puternice extinderi a sistemelor de operare mobile (precum Android și iOS , printre cele mai populare);
  • sistem alternativ cookie -urilor normale , numit Web Storage, mai eficient, care permite o economie considerabilă a lățimii de bandă;
  • standardizarea programelor JavaScript, numite Web Workers și posibilitatea utilizării offline a unor site-uri;
  • înlocuind doctipul lung și complex cu unul simplu <!DOCTYPE html>.
  • Microdate noi care descriu conținutul etichetelor (de exemplu, dacă este un nume, un prenume, o adresă, un număr de telefon, un e-mail etc.);
  • WebSocket API: capacitatea de a stabili și menține o conexiune de date între browser și server la distanță pe care să trimită mesaje în ambele direcții;
  • Drag and Drop (tragerea și fixarea obiectelor în interiorul unui container, de exemplu în cazul jocurilor video sau produselor care urmează să fie plasate în coș pe site- urile de comerț electronic );
  • SVG și MathML : posibilitatea de a insera grafică vectorială și formule matematice în HTML, care în HTML4 ar putea fi importate doar ca imagini sau create în Adobe Flash .
Etichetă [13] DOMENIUL DE APLICARE
Noi elemente structurale și semantice
Antet
Comparație între pagina de bază HTML4 și 5
Comparație între pagina de bază HTML4 și 5
Subsol
Secțiune
Nav
Articolul (în cazul articolelor de pe pagina principală)
Deoparte (conținut legat de principal)
Grupul H Grupați etichetele de titlu
<figura> și <figcaption> Subtitrări pentru conținut
Încorporare Inserați conținut interactiv sau multimedia
Rubin Specificați adnotări Ruby
Wbr Browserul poate insera o linie nouă
<comandă> și <meniu> Acestea definesc bare de instrumente sau meniuri contextuale
<detalii> și <rezumat> Widget de informații pentru utilizatori
marcă O parte din text marcată sau evidențiată pentru utilizator
atributele <time> și pubdate și datetime 24 de ore sau o dată din calendarul gregorian
Metru Măsură scalară a unui interval cunoscut sau a unei valori fracționale
Progres Starea de finalizare a unei sarcini
Imagine Container pentru imagini
Microdate Atributele semantice pot fi specificate pentru fiecare etichetă HTML
Noi atribute și tipuri de intrare pentru formulare
focalizare automată, substituent și formă
formă
Focalizarea automată în acest caz este în roșu. Tipurile de intrare sunt echivalente cu spațiile de completat (în acest caz există „e-mail”). Substituentul este exemplul de text al fiecărui spațiu
Tip intrare: tel
Tip de intrare: căutare
Tip de intrare: url
Tip de intrare: e-mail
Tip de intrare: număr
Tip de intrare: interval
Tip de intrare: culoare
Datalist Completare automată pe un element de formular
Completare automată Permite sau nu permite browserului să completeze câmpurile

a formularului automat

Minim maxim Acestea definesc valoarea minimă și maximă permisă
Multiplu Permite utilizatorului să introducă mai multe valori pentru aceeași intrare
Model Verificați dacă valoarea introdusă respectă anumite reguli
Necesar Face obligatorie completarea unui spațiu din formular
Etapa Acesta definește distanța dintre o valoare și următoarea
keygen Generator de chei numerice într-un formular
ieșire Returnează rezultatul unui calcul
API pentru aplicații web
Aplicații web offline (fișier ".manifest") După prima sesiune de navigare online,

unele obiecte vor rămâne și ele accesibile

în absenţa unei conexiuni la reţea.

API-ul bazei de date indexate Creați și manipulați o bază de date în browser
API-ul WebStorage De exemplu, le puteți păstra deschise în același timp

două conturi sociale sau de e-mail în același browser și fiecare navigare

pe primul va avea ca rezultat deconectarea celui de-al doilea și invers

Web Workers API Acestea permit executarea unor bucăți de cod Javascript

fără a afecta performanța paginii web

API -ul WebSocket Ei stabilesc și mențin o conexiune de date între browsere

și server la distanță pe care să trimită mesaje

în ambele sensuri

Tragere și plasare Trageți și plasați obiecte
API de localizare geografică Geolocalizare
Multimedia
SVG și MathML Imagini vectoriale și formule matematice
Canvas / WebGL API potrivită pentru desenarea de linii, cercuri, dreptunghiuri, imagini și obiecte 3D
Video Inserați fișiere video (anterior fezabil numai cu Adobe Flash )
Audio Inserați fișiere audio

WAI ARIA

WAI-ARIA ( Web Accessibility Initiative - Accessible Rich Internet Applications ) este un set de documente publicate de W3C ( World Wide Web Consortium ) care specifică modul de creștere a accesibilității conținutului dinamic și a componentelor interfeței cu utilizatorul dezvoltate cu AJAX , HTML , JavaScript și alte tehnologii conexe. HTML5 a adăugat noi reguli WAI ARIA [15] .

Orientarea dispozitivului

Exemplu de orientare și mișcare a dispozitivului
Exemplu de orientare și mișcare a dispozitivului

Evenimentul deviceorientationeste declanșat atunci când sunt disponibile date noi de la un senzor de orientare despre orientarea curentă a dispozitivului în raport cu cadrul de coordonate Pământ . Aceste date sunt colectate de un magnetometru din interiorul dispozitivului. În practică, atunci când rotiți dispozitivul pe care este afișată pagina web, obiectul care conține acest API se rotește în funcție de axa x, y sau z a dispozitivului [16] [17] .

Cod de bază:

fereastra . addEventListener ( 'deviceorientation' ,  function ( event )  { 
  var  a  =  event . alpha ; 
  var  b  =  event . beta ; 
  var  g  =  event . gamma ; 
},  false );

Mișcare

Evenimentele de mișcare sunt tratate în același mod ca și evenimentele de orientare, cu excepția faptului că au propriul nume de eveniment: devicemotion[18] [19] .

Exemplu:

fereastra . addEventListener ( „devicemotion” ,  handleMotion ,  true );

În ceea ce privește deviceorientationinformațiile furnizate în obiect, DeviceMotionEventacestea devin parametri ai funcției HandleMotion .

Evenimentul de mișcare conține patru proprietăți:

  • DeviceMotionEvent.acceleration
  • DeviceMotionEvent.accelerationIncludingGravity
  • DeviceMotionEvent.rotationRate
  • DeviceMotionEvent.interval

Valori de mișcare

Obiectele DeviceMotionEventoferă informații despre viteza schimbărilor în poziția și orientarea dispozitivului. Modificările sunt prevăzute pe trei axe [20] .

Pentru accelerationși accelerationIncludingGravityaceste axe corespund:

  • x: Reprezintă axa de la vest la est
  • y: Reprezintă axa de la Sud la Nord
  • z: Reprezintă axa perpendiculară pe sol

Pentru rotationRateinformatii corespund:

  • alpha: Reprezintă o viteză de rotație de-a lungul axei perpendiculare pe dispozitiv.
  • beta: Reprezintă o viteză de rotație de-a lungul axei care merge de la stânga la dreapta a dispozitivului.
  • gamma: Reprezintă o viteză de rotație de-a lungul axei care merge de jos în sus a dispozitivului.

intervalreprezintă intervalul de timp, în milisecunde, în care datele sunt obținute de la dispozitiv.

HTML5test

Pagina de test HTML5 vizualizată într-un browser Chrome
Pagina de test HTML5 vizualizată în browserul Chrome

HTML5test este o aplicație web pentru evaluarea acurateței unui browser web în implementarea standardelor web HTML5 și a bazei de date Web SQL (dezvoltat de World Wide Web Consortium ), precum și a standardului WebGL (dezvoltat de Fundația Mozilla și Grupul Khronos ) [ 21] .

Suita de testare a fost dezvoltată de programatorul web olandez Niels Leenheer și lansată în martie 2010. Pentru a testa un browser web, utilizatorul trebuie să viziteze pagina de pornire a site-ului, situată la . Aplicația returnează un scor întreg de până la 555 de puncte. Totalul punctelor s-a modificat de mai multe ori prin evoluția software-ului; Ulterior, Leenheer a introdus un sistem de notare ca parte a unei reproiectări majore a testelor introduse în noiembrie 2013 [23] . html5test.com[22]

HTML5test evaluează suportul browserului pentru stocarea web, API-ul de geolocalizare W3C, elemente HTML specifice HTML5 (inclusiv elementul Canvas ) și alte caracteristici [24] [25] . Nu evaluează conformitatea unui browser cu alte standarde web, cum ar fi Cascading Style Sheets , ECMAScript , Scalable Vector Graphics sau Document Object Model . Testarea de conformitate pentru aceste standarde este responsabilitatea Acid3 , un test automat publicat de Ian Hickson în 2008 [26] . De asemenea, Acid3 nu evaluează conformitatea cu HTML5 a unui browser. Domeniul de testare al HTML5test și cel al testului Acid3 se exclud reciproc.

Exemple

  • Tabel receptiv și interactiv în HTML5 și CSS3 care se adaptează dispozitivului

    Tabel receptiv și interactiv în HTML5 și CSS3 care se adaptează dispozitivului

  • Exemple de diagrame interactive, hărți interactive și aplicații de desen HTML5

    Exemple de diagrame interactive, hărți interactive și aplicații de desen HTML5

  • Exemplu de WebGL 3D interactiv

    Exemplu de WebGL 3D interactiv

Note

  1. ^ Grupul de lucru XHTML 2 se așteaptă să oprească activitatea la sfârșitul anului 2009, W3C va crește resursele pe HTML5 , pe w3.org , World Wide Web Consortium. Consultat la 15 februarie 2011 .
  2. ^ Actualizare privind relația dintre standardul de viață HTML WHATWG și specificația W3C HTML5 , pe lists.w3.org , World Wide Web Consortium. Consultat la 22 iulie 2012 .
  3. ^ https://www.w3.org/TR/html52/ Recomandare HTML 5.2 W3C
  4. ^ https://www.w3.org/TR/html53/ Recomandare HTML 5.3 W3C
  5. ^ Etichete HTML care sunt depreciate în HTML5 , la c-sharpcorner.com . Preluat la 3 februarie 2021 .
  6. ^ Stupid Machines - regula 110 , pe github.com .
  7. ^ Rule 110 OnLine Demonstration , la eli.fox-epste.in .
  8. ^ Getting to Grips with HTML5 Browser Compatibility , pe Speckyboy Design Magazine , 26 martie 2012. Recuperat la 3 februarie 2021 .
  9. ^ Css3 pe Internet Explorer 8? - de astăzi puteți , pe Target Web.it , 8 aprilie 2011. Recuperat la 3 februarie 2021 .
  10. ^ Internet Explorer Conditional Comments - SitePoint , la sitepoint.com . Preluat la 3 februarie 2021 .
  11. ^ Faruk Ateş, Taking advantage of HTML5 and CSS3 with Modernizr , on Italian A List Apart , 5 iulie 2010. Recuperat la 3 februarie 2021 .
  12. ^ HTML5test - Cât de bine acceptă browserul tău HTML5? , la html5test.com . Preluat la 3 februarie 2021 .
  13. ^ a b HTML5: ghid complet , pe HTML.it. Preluat la 29 ianuarie 2021 .
  14. ^ Creați un efect de notă lipicioasă în 5 pași simpli cu CSS3 și HTML5 , pe Code Envato Tuts + . Extras 8 octombrie 2021 .
  15. ^ Aplicații Internet bogate accesibile (WAI-ARIA ) 1.1 , la w3.org . Preluat la 22 februarie 2021 .
  16. ^ Fereastra : eveniment de orientare dispozitiv - API-uri web | MDN , la developer.mozilla.org . Extras 8 octombrie 2021 .
  17. ^ DeviceOrientation Event Specification , la w3.org . Extras 8 octombrie 2021 .
  18. ^ Sandro Paganotti, HTML5 Device Orientation API și WebSocket , pe HTML.it. Extras 8 octombrie 2021 .
  19. ^ Utilizarea orientării dispozitivului în HTML5 - SitePoint , la sitepoint.com . Extras 8 octombrie 2021 .
  20. ^ Sandro Paganotti, Video: HTML5, DeviceOrientation & WebSocket API , pe HTML.it. Extras 8 octombrie 2021 .
  21. ^ Niels Leenheer, HTML5test Frequently Asked Questions , la HTML5test.com , Niels Leenheer. Recuperat la 10 iulie 2014 .
  22. ^ Martin Brinkmann, HTML5 Test Your Web Browser , pe gHacks Technology News . Recuperat la 10 iulie 2014 .
  23. ^ Niels Leenheer, Noul test HTML5 este aici! , pe blog.html5test.com , 13 noiembrie 2013. Consultat la 12 iulie 2014 .
  24. ^ Scriitor de personal , Testează-ți browserul pentru compatibilitatea HTML5 , pe CyberNet News . Recuperat la 10 iulie 2014 .
  25. ^ Erez Zukerman, Test your browser's HTML5 prowes with the HTML5 test , pe Switched , AOL , 8 august 2010. Recuperat la 10 iulie 2014 (arhivat din original la 26 aprilie 2019) .
  26. ^ Acid3: Punerea din nou pe producătorii de browsere. , pe webstandards.org , Web Standards Project , 3 martie 2008. Consultat la 10 iulie 2014 .

Bibliografie

  • Jeffrey Zeldman, Ethan Marcotte, Dezvoltarea site-urilor cu standarde web , Milano, Apogeo, 2010, ISBN  978-88-503-2964-9 .
  • Mark Pilgrim, HTML5: Ghid operațional , Milano, New Techniques Hops, 2010, ISBN  978-88-481-2504-8 .
  • Gabriele Gigliotti, HTML5: Developing the Web of Tomorrow Today , Milano, Apogeo, 2012, ISBN  978-88-503-3116-1 .

Articole înrudite

Alte proiecte

Link- uri externe

Preluat de la " https://it.wikipedia.org/w/index.php?title=HTML5&oldid=127626557 "