HTML5

HTML 5
programmeringsspråk
ForfatterTim Berners Lee
Opprinnelsesdato1989
Siste versjonHTML5
Brukprogrammering av nettsider
SkrivingHøyt
Vanlige utvidelserhtml og htm
Referanseimplementering
OperativsystemWindows, macOS, Android, iOS, Linux.
TillatelseÅpen kilde
Nettstedwww.w3.org/TR/html5/

HTML er det mest brukte markup-språket på nettet. I utgangspunktet brukes det til å lage og strukturere nettsider. Versjon 5 ble utgitt siden oktober 2014, designet for å definere funksjonelle standarder (f.eks. video-/lydspiller) og API-er for programmering på tvers av plattformer. Det er i stadig utvikling.

Historie

Utviklingen ble initiert av Web Hypertext Application Technology Working Group ( WHATWG ) (grunnlagt i 2004 av utviklere som tilhører Apple , Mozilla Foundation og Opera Software ) som satte seg som mål å designe spesifikasjoner for utvikling av webapplikasjoner, med fokus på forbedringer og tillegg til HTML og relaterte teknologier.

I utgangspunktet i motsetning til World Wide Web Consortium for tregheten i utviklingsprosessen av html-standarden og for beslutningen til W3C om å orientere standardiseringen mot XHTML 2 som ikke garanterte bakoverkompatibilitet, anerkjente den samme W3C disse grunnene som gyldige , kunngjør å opprette en spesiell gruppe for standardisering av HTML5 og å forlate XHTML 2.0 [1] .

Siden 2007 har WHATWG samarbeidet med W3C i denne standardiseringsprosessen, og bestemte seg deretter i 2012 for å skille seg fra W3C standardiseringsprosessen [2] , og har i realiteten laget to versjoner av HTML5: versjonen av WHATWG er definert som "HTML Living Standard" og derfor i kontinuerlig utvikling, mens den for W3C vil være en enkeltversjon som tilsvarer et "øyeblikksbilde" av Living Standard.

Den første kandidatanbefalingen ble publisert av W3C 17. desember 2012, og den første versjonen av standarden ble publisert som en anbefaling 28. oktober 2014.

HTML 5.1-versjonen ble publisert av W3C som en anbefaling 1. november 2016.

HTML 5.2-versjonen ble publisert av W3C som en anbefaling 14. desember 2017 [3]

HTML 5.3-versjonen ble publisert av W3C som en anbefaling 28. januar 2021. [4]

Utdaterte tagger

HTML5 avviklet følgende tagger og attributter funnet i HTML4 ettersom funksjonen deres nå håndteres av CSS3 [5] :

CSS3

HTML5 og CSS3 (utviklingen av CSS2) utgjør et komplett turing -språk [6] [7] , en tilstrekkelig betingelse for at et språk kan anses som et programmeringsspråk .

SEO

HTML5 er utviklet for å forbedre SEO i forhold til tidligere versjoner av HTML.

Nettleserstøtte

Ved fødselen av HTML5 var Webkit -gjengivelsesmotoren (Chrome og Safari) den første som tolket mange av de nye kodene riktig, den andre som oppdaterte fra det synspunktet var Gecko (Firefox) og til slutt Trindent (Internet Explorer). I noen år ble nettsteder som brukte de nye HTML-taggene som var tilgjengelige sett på forskjellig avhengig av nettleseren som ble brukt av brukeren [8] . Dette problemet ble delvis løst ved hjelp av teknikker som alternativ CSS spesifikt for Internet Explorer , betingede kommentarer skreddersydd for det, og JavaScript -biblioteker som Modernizr [9] [10] [11] . Fra og med 2019 støtter Microsoft Edge de fleste HTML5-spesifikasjoner [12] .

Nyheter

Innovasjonene introdusert av HTML5 sammenlignet med HTML4 er fremfor alt rettet mot å forbedre avkoblingen mellom struktur, definert av markering, gjengivelsesegenskaper (font, farger, etc.), definert av stildirektiver og innholdet på en nettside, definert av den faktiske tekst. Videre gir HTML5 støtte for lokal lagring av store datamengder lastet ned fra nettleseren , for å tillate bruk av nettbaserte applikasjoner (som Google - postbokser eller andre lignende tjenester) selv i fravær av Internett-tilkobling.

Spesielt [13] :

TAG [13] OMFANG
Nye strukturelle og semantiske elementer
Overskrift
Bunntekst
Seksjon
Nav
Artikkel (når det gjelder artikler på hjemmesiden)
Til side (innhold relatert til hoved)
H-gruppe Grupper Overskrift-taggene
<figur> og <figcaption> Bildetekster for innhold
Bygg inn Sett inn interaktivt eller multimedieinnhold
Rubin Spesifiser Ruby-kommentarer
Wbr Nettleseren kan sette inn en ny linje
<kommando> og <meny> De definerer verktøylinjer eller kontekstmenyer
<detaljer> og <sammendrag> Informasjonswidget for brukere
merke En del av teksten er merket eller uthevet for brukeren
<time> og pubdate og datetime attributter 24-timers tid eller en dato i den gregorianske kalenderen
Måler Skalært mål for et kjent område eller brøkverdi
Framgang Status for fullføring av en oppgave
Bilde Beholder for bilder
Mikrodata Semantiske attributter kan spesifiseres for hver HTML-tag
Nye attributter og inndatatyper for skjemaer
autofokus, plassholder og form
Inndatatype: tlf
Inndatatype: søk
Inndatatype: url
Inndatatype: e-post
Inndatatype: nummer
Inndatatype: område
Inndatatype: farge
Dataliste Autofullfør på et skjemaelement
Autofullfør Tillater eller forbyr nettleseren å fylle ut feltene

av skjemaet automatisk

Min, maks De definerer minimum og maksimum tillatt verdi
Flere Den lar brukeren legge inn flere verdier for samme inngang
Mønster Bekreft at den angitte verdien samsvarer med visse regler
Obligatorisk Det gjør det obligatorisk å fylle ut et mellomrom i skjemaet
Steg Den definerer avstanden mellom en verdi og den neste
keygen Numerisk nøkkelgenerator i et skjema
produksjon Returnerer resultatet av en beregning
API for nettapplikasjoner
Frakoblet nettapplikasjoner (.manifest-fil) Etter den første nettlesingsøkten,

noen objekter vil også forbli tilgjengelige

i fravær av nettverkstilkobling.

Indexed Database API Opprett og manipuler en database i nettleseren
WebStorage API Du kan for eksempel holde dem åpne samtidig

to sosiale kontoer eller e-postkontoer i samme nettleser og hver navigering

på den første vil det resultere i utlogging av den andre og omvendt

Web Workers API De tillater kjøring av deler av Javascript-kode

uten å påvirke ytelsen til nettsiden

WebSocket API De etablerer og vedlikeholder en dataforbindelse mellom nettlesere

og ekstern server for å sende meldinger

i begge retninger

Dra og slipp Dra og slipp objekter
Geolocation API Geolokalisering
Multimedia
SVG og MathML Vektorbilder og matematiske formler
Lerret / WebGL API egnet for å tegne linjer, sirkler, rektangler, bilder og 3D-objekter
Video Sett inn videofiler (tidligere bare mulig med Adobe Flash )
Lyd Sett inn lydfiler

WAI ARIA

WAI-ARIA ( Web Accessibility Initiative - Accessible Rich Internet Applications ) er et sett med dokumenter publisert av W3C ( World Wide Web Consortium ) som spesifiserer hvordan man kan øke tilgjengeligheten til dynamisk innhold og brukergrensesnittkomponenter utviklet med AJAX , HTML , JavaScript og andre relaterte teknologier. HTML5 la til nye WAI ARIA -regler [15] .

Enhetsorientering

Hendelsen deviceorientationoppstår når nye data er tilgjengelige fra en orienteringssensor om enhetens gjeldende orientering i forhold til jordkoordinatrammen . Disse dataene samles inn av et magnetometer inne i enheten. I praksis, når du roterer enheten som nettsiden vises på, roterer objektet som inneholder denne API-en i henhold til x-, y- eller z-aksen til enheten [16] [17] .

Grunnkode:

vindu . addEventListener ( 'deviceorientation' , function ( hendelse ) { var a = hendelse . alpha ; var b = hendelse . beta ; var g = hendelse . gamma ; }, falsk );

Bevegelse

Bevegelseshendelser håndteres på samme måte som orienteringshendelser, bortsett fra at de har sitt eget hendelsesnavn: devicemotion[18] [19] .

Eksempel:

vindu . addEventListener ( "devicemotion" , handleMotion , true );

Med hensyn til deviceorientationinformasjonen som er gitt i objektet DeviceMotionEvent, blir de parametere for HandleMotion- funksjonen .

Bevegelseshendelsen inneholder fire egenskaper:

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

Objekter DeviceMotionEventgir informasjon om hastigheten på endringer i enhetens posisjon og orientering. Modifikasjonene er gitt langs tre akser [20] .

For accelerationog accelerationIncludingGravitydisse aksene tilsvarer:

  • x: Representerer aksen fra vest til øst
  • y: Representerer aksen fra sør til nord
  • z: Representerer aksen vinkelrett på bakken

For rotationRateinformasjon tilsvarer:

  • alpha: Representerer en rotasjonshastighet langs aksen vinkelrett på enheten.
  • beta: Representerer en rotasjonshastighet langs aksen som går fra venstre til høyre for enheten.
  • gamma: Representerer en rotasjonshastighet langs aksen som går fra bunnen til toppen av enheten.

intervalrepresenterer tidsintervallet, i millisekunder, der dataene hentes fra enheten.

HTML5test

HTML5test er en nettapplikasjon for å evaluere nøyaktigheten til en nettleser ved implementering av HTML5 webstandarder og Web SQL Database (utviklet av World Wide Web Consortium ), samt WebGL -standarden (utviklet av Mozilla Foundation og Khronos Group ) [ 21] .

Testpakken ble utviklet av den nederlandske nettprogrammereren Niels Leenheer og utgitt i mars 2010. For å teste en nettleser, må brukeren besøke nettsidens hjemmeside på . Applikasjonen returnerer en heltallsscore på opptil 555 poeng. Summen av poeng har endret seg flere ganger gjennom utviklingen av programvaren; Leenheer introduserte deretter et poengsystem som en del av en større testredesign som ble introdusert i november 2013 [23] . html5test.com[22]

HTML5test evaluerer nettleserstøtte for nettlagring, W3C geolocation API, HTML5-spesifikke HTML-elementer (inkludert Canvas -elementet ) og andre funksjoner [24] [25] . Den evaluerer ikke nettleserens samsvar med andre nettstandarder, for eksempel Cascading Style Sheets , ECMAScript , Scalable Vector Graphics eller Document Object Model . Samsvarstesting for disse standardene er ansvaret til Acid3 , en automatisert test publisert av Ian Hickson i 2008 [26] . Acid3 evaluerer heller ikke nettleserens HTML5-samsvar. Testomfanget til HTML5test og testomfanget til Acid3 utelukker hverandre.

Eksempler

  • Responsiv og interaktiv tabell i HTML5 og CSS3 som tilpasser seg enheten

  • Eksempler på interaktive diagrammer, interaktive kart og HTML5-tegneapper

  • Eksempel på interaktiv 3D WebGL

Merknader

  1. ^ XHTML 2 Working Group forventes å stoppe arbeidet i slutten av 2009, W3C for å øke ressursene på HTML5 , på w3.org , World Wide Web Consortium. Hentet 15. februar 2011 .
  2. ^ Oppdatering om forholdet mellom WHATWG HTML-levestandarden og W3C HTML5-spesifikasjonen , på lists.w3.org , World Wide Web Consortium. Hentet 22. juli 2012 .
  3. ^ https://www.w3.org/TR/html52/ HTML 5.2 W3C-anbefaling
  4. ^ https://www.w3.org/TR/html53/ HTML 5.3 W3C-anbefaling
  5. ^ HTML-tagger som er avviklet i HTML5 , på c-sharpcorner.com . Hentet 3. februar 2021 .
  6. ^ Stupid Machines - regel 110 , på github.com .
  7. ^ Regel 110 Online-demonstrasjon , på eli.fox-epste.in .
  8. ^ Få tak i HTML5-nettleserkompatibilitet , på Speckyboy Design Magazine , 26. mars 2012. Hentet 3. februar 2021 .
  9. ^ Css3 på Internet Explorer 8? - fra i dag kan du , på Target Web.it , 8. april 2011. Hentet 3. februar 2021 .
  10. ^ Internet Explorer betingede kommentarer - SitePoint , på sitepoint.com . Hentet 3. februar 2021 .
  11. ^ Faruk Ateş, Dra nytte av HTML5 og CSS3 med Modernizr , på italiensk A List Apart , 5. juli 2010. Hentet 3. februar 2021 .
  12. ^ HTML5test - Hvor godt støtter nettleseren din HTML5? , på html5test.com . Hentet 3. februar 2021 .
  13. ^ a b HTML5: komplett veiledning , på HTML.it. Hentet 29. januar 2021 .
  14. ^ Lag en Sticky Note-effekt i 5 enkle trinn med CSS3 og HTML5 , på Code Envato Tuts+ . Hentet 8. oktober 2021 .
  15. ^ Tilgjengelige Rich Internet Applications (WAI-ARIA ) 1.1 , på w3.org . Hentet 22. februar 2021 .
  16. ^ Window : deviceorientation event - Web APIer | MDN , på developer.mozilla.org . Hentet 8. oktober 2021 .
  17. ^ DeviceOrientation Event Specification , på w3.org . Hentet 8. oktober 2021 .
  18. ^ Sandro Paganotti, HTML5 Device Orientation API og WebSocket , på HTML.it. Hentet 8. oktober 2021 .
  19. ^ Bruke enhetsorientering i HTML5- SitePoint , på sitepoint.com . Hentet 8. oktober 2021 .
  20. ^ Sandro Paganotti, Video: HTML5, DeviceOrientation & WebSocket API , på HTML.it. Hentet 8. oktober 2021 .
  21. ^ Niels Leenheer, HTML5test Frequently Asked Questions , på HTML5test.com , Niels Leenheer. Hentet 10. juli 2014 .
  22. ^ Martin Brinkmann, HTML5 Test din nettleser , på gHacks Technology News . Hentet 10. juli 2014 .
  23. ^ Niels Leenheer, Den nye HTML5-testen er her! , på blog.html5test.com , 13. november 2013. Hentet 12. juli 2014 .
  24. ^ Personalskribent , Test nettleseren din for HTML5-kompatibilitet , på CyberNet News . Hentet 10. juli 2014 .
  25. ^ Erez Zukerman, Test nettleserens HTML5-dyktighet med HTML5-testen , på Switched , AOL , 8. august 2010. Hentet 10. juli 2014 (arkivert fra originalen 26. april 2019) .
  26. ^ Acid3: Sette nettleserskapere på varsel, igjen. , på webstandards.org , Web Standards Project , 3. mars 2008. Hentet 10. juli 2014 .

Bibliografi

  • Jeffrey Zeldman, Ethan Marcotte, Utvikling av nettsteder med nettstandarder , Milan, Apogeo, 2010, ISBN  978-88-503-2964-9 .
  • Mark Pilgrim, HTML5: Operational Guide , Milan, New Techniques Hops, 2010, ISBN  978-88-481-2504-8 .
  • Gabriele Gigliotti, HTML5: Developing the Web of Tomorrow Today , Milan, Apogeo, 2012, ISBN  978-88-503-3116-1 .

Relaterte elementer

Andre prosjekter

Eksterne lenker