HTML5 - nova generacija. Od izlaska preporuke HTML 4.01 (1999.) prošlo je više od 10 godina, te stoga treba očekivati ​​puno promjena i dopuna. HTML5 specifikacija je trenutno još u razvoju. World Wide Web Consortium ne razvija standarde, već samo izdaje preporuke. Sve počinje radnim razgovorima, zatim se pokreće radni nacrt, izlazi kandidat za ulogu preporuke i tek tada specifikacija konačno dobiva status preporuke. Trenutno je rad na HTML5 još uvijek u fazi radnog nacrta. Unatoč tome, većina najpopularnijih internetskih preglednika već djelomično podržava HTML5 inovacije. Prije nego što ih kratko osvrnem, ponovit ću da svi preglednici ne implementiraju ovu funkcionalnost i još ne u potpunosti. Danas možemo računati na to da Opera, Chrome, Firefox, Safari i Internet Explorer podržavaju HTML5 u različitim stupnjevima.

Što je novo u HTML5

A novoga je doista puno toga. Sada će web programeri imati niz dodatnih značajki, kao što je crtanje geometrijskih oblika na web platnu, ugrađene mogućnosti povlačenja i ispuštanja i reprodukcija video i audio datoteka (ranije se to moglo učiniti samo korištenjem plug-in komponenti kao što su kao Adobe Flash Player) i još mnogo toga, o čemu će biti riječi malo kasnije. Za početak, želio bih reći nekoliko riječi o općim trendovima u razvoju HTML-a.

Dio HTML5 specifikacije koji se ističe u obliku novih oznaka samo je vrh ledenog brijega. Većina naprednih značajki HTML5 dostupna je samo pomoću skriptnog programskog jezika, koji je osnova web programiranja na strani klijenta. Ako uzmemo istu funkcionalnost crtanja implementiranu pomoću oznake, tada ne govorimo o "oznaci crtanja" pomoću oznaka geometrijskog oblika, kao što bi se moglo pretpostaviti. Canvas layout završava postavljanjem canvas elementa na stranicu i to je to. Sam crtež je JavaScript funkcija koja će, nakon što joj se pristupi platnu, prikazati oblike na njemu na sličan način na koji obične Windows aplikacije prikazuju grafiku u prozorima putem GDI (Graphics Device Interface) sučelja. Dakle, specifikacija HTML5 nameće vrlo ozbiljne zahtjeve internetskim preglednicima u smislu implementacije rada s JavaScriptom, koji u velikoj mjeri reguliraju programsko sučelje () za rad s objektnim modelom dokumenta (DOM). Ovo je dobra vijest, budući da mnogi ljudi znaju da različiti preglednici mogu organizirati rad s objektnim modelom kroz programska sučelja koja se međusobno razlikuju. Djelomično je specifikacija softverskog sučelja zasluga organizacije Radna skupina za tehnologiju web hipertekstualnih aplikacija (WHATWG), koji se trudi standardizirati ne samo označni jezik već i API-je koji se koriste u aplikacijama napisanim u skriptnim jezicima kao što je JavaScript. WHATWG je također uključen u razvoj s W3C.

Također možemo zaključiti da su autori HTML5 implementaciju nekih popularnih i traženih zadataka web programiranja pokušali prebaciti na odgovornost samih internetskih preglednika. Na primjer, pomoću HTML5 možete vrlo jednostavno implementirati funkcionalnost povlačenja i ispuštanja elemenata, koja je postala toliko popularna u korisničkim sučeljima online trgovina (odabir proizvoda u košaricu). Prethodno, da biste to učinili, morali ste napisati skriptu u JavaScriptu koristeći razne vrste knjižnica podrške, kao što je . Sada je mnogo lakše implementirati povlačenje i ispuštanje definiranjem brojnih dodatnih atributa i dodavanjem nekoliko rukovatelja događajima za oznake koje su vam potrebne. Organiziranje “drag&drop” pomoću jQueryja također nije posebno komplicirano, ali u slučaju HTML5, bavit ćemo se jednom preporukom za sve klijente internetskog softvera, a to je potpuno drugačija razina podrške i jamstvo kompatibilnosti s više preglednika. Ispostavilo se da će preglednici koji podržavaju HTML5 preporuke sada pružati mogućnost spremanja i vraćanja postavki sesije u kontekstu same web sesije. Na primjer, kada se stranica ponovno učita, podaci koji su prethodno uneseni na njoj neće biti izgubljeni, već će se vratiti iz okruženja trenutne sesije. Ovo već “ulazi u područje” web programiranja na strani poslužitelja, budući da se prije nije moglo raditi samo pomoću HTML-a i JavaScripta.

Pa, sada popis najznačajnijih inovacija u HTML5:

Crtanje na web platnu ili korištenje elementa platna

Kao što je već spomenuto, glavni dio preporuka u vezi s korištenjem novog elementa je specifikacija za softversko sučelje za prikaz grafike na njemu. Za početak postavite oznaku na stranicu određenu širinu i visinu, a zatim mu u JavaScript kodu pristupite (na primjer, pomoću id-a) i počnete crtati po njemu. Crtanje se svodi na sekvencijalno definiranje stila linije strokeStyle, stila ispune fillStyle i pozivanje metoda crtanja kao što su moveTo (pomicanje olovke), lineTo (crtanje linije), arc (crtanje luka) itd. U nastavku pogledajte primjer - najjednostavniji alat za crtanje mišem. Ispod je njegov izvorni kod u JavaScriptu i HTML označavanju. Za crtanje olovkom pritisnite lijevu tipku miša i pomičite kursor preko platna. U načinu rada "linije" ili "poligoni", jednostavno kliknite uzastopce na platnu, označavajući tako vrhove polilinija ili površinskih objekata.

Primjer crtanja na elementu platna

Primjer implementacije operacija crtanja na elementu pomoću HTML5.

JavaScript izvorni kod

//Kôd trenutne operacije var operation=0;

//Status operacije var active=false;

//Pokretanje funkcije grafičke operacije startOperation(e) ( if (operation==0) return; if (active) return; var context = getContext(); context.strokeStyle = getColor("stroke"); context.fillStyle = getColor ( "fill"); var point = getPoint(e); context.moveTo(point.x, point.y); //Kompletna grafička operacija stopOperation() ( if (! active) return; var context = getContext(); context.closePath(); //Mouse events function mouseDown(e) ( var e = e || window.event; if (!active) ( startOperation(e); return; ) else ( var context = getContext(); var point = getPoint(e); context.lineTo(point.x, point.y); context.stroke(); if (operation == 3) context .fill(); ) return true;) funkcija mouseUp(e) ( var e = e || window.event; if (!active || operation != 1) return; stopOperation(); return true; ) function mouseMove( e) ( var e = e ||. window.event; if (!active || operation != 1) return; var context = getContext();

var point = getPoint(e);

Ovo nije ništa više od podrške preglednika za klasični "povuci i ispusti" model, koji je vrlo popularan u regularnim GUI aplikacijama. Za elemente koje ćete “vući” definirajte draggable atribut, a za elemente na koje ćete “baciti” povučene elemente definirate rukovatelje događajima ondragenter , ondragover i ondorp . To je zapravo sve. Primjer ispod.

Primjer HTML5 povuci i ispusti - "Košarkaški koš"

Primjer implementacije drag and drop operacija (draging elements) pomoću HTML5.

//Status operacije var active=false;

HTML5: Povucite i ispustite html, tijelo (familija fonta: Arial veličina fonta: 11px; ) .basket (border: 1px solid #777; širina: 105px; visina: 120px; padding: 10px; border-radius:0 0 10px 10px; boja pozadine: #eee; umetnuta 0px 5px #777; širina: 30px; visina: 15px; sjena okvira: 5px 5px 10px #777 : desno; .lopta (obrub: 1px solid #FF7F50; širina: 20px; visina: 20px; border-radius:10px; background-color: #FF8C00; box-shadow: 0px 0px 5px #777; float: lijevo; margina: 1px;) funkcija startDrag(e) ( var e = e || window.event; e.dataTransfer.setData("Ball", e.target.id); e.dataTransfer.effectAllowed="move"; return true ; ) funkcija endDrag(e) ( var e = e || window.event; e.dataTransfer.clearData("Ball"); return true; ) funkcija drop(e) ( var e = e || window.event; e .target .appendChild(document.getElementById(e.dataTransfer.getData("Ball"))); e.stopPropagation() : e.cancelBubble = true;

vratiti lažno;

) ... Reprodukcija video i audio datoteka Ovdje je sve vrlo jednostavno; imalo bi se što reproducirati i gdje. Stavite oznake

I

na svojoj stranici, definirajte atribut src za njih, naznačujući izvor reprodukcije, i pričekajte da internetski preglednici nauče obraditi ove divne upute i reproducirati najčešće formate. Novi prilagođeni elementi web obrasca

HTML5 obećava nove vrste elemenata

, kontroliranje unosa internetske adrese, adrese e-pošte, numeričkih vrijednosti, datuma, vremena, boje itd. Ako vaš preglednik već podržava sve ove inovacije, u nastavku ćete vidjeti kako to radi. Ako preglednik ne podržava sve nove vrste elemenata, tada će oni s kojima još ne zna raditi izgledati kao obična polja za unos teksta.

Ako vrijednost adrese ne odgovara formatu url, nakon što kliknete [potvrdi], preglednik će to pokušati ispraviti. Ako to ne može učiniti, prikazat će poruku o pogrešci. Ako vrijednost e-pošte ne odgovara formatu elektronička pošta, nakon klika na [potvrdi], preglednik će ispraviti adresu ili prijaviti pogrešku pri unosu.

Vizualizacija numeričkih vrijednosti

Prikaz numeričke vrijednosti u obliku ljestvice s mogućnošću označavanja intervala ispod niske norme i iznad visoke norme, kao i optimalnog optimuma vrijednosti.

Element:

Vizualizacija procesa izvršenja. Možete odrediti samo najveću maksimalnu i trenutnu vrijednost.

Element HTML izvorni kod

Broj iz intervala:

Cijeli broj:

Datum i vrijeme:

Datum:

Vrijeme:

Mjesec:

Tjedan:

Boja:

url:

email:

Upravljanje poviješću pregledavanja

Bit će moguće samostalno upravljati prijelazom na prethodno učitane stranice pomoću JavaScripta i objekta povijesti. Na primjer, pozivanje window.history.length vratit će "duljinu povijesti", a pozivanje window.history.back() , window.history.forward() ili window.history.go(stepCount) izvršit će odgovarajuće prijelaze. Ispod je mali primjer:

Naprijed>

Spremanje stanja sesije

Ova sjajna funkcionalnost omogućit će vam spremanje i vraćanje podataka o sesiji. Ispunili smo narudžbu, otišli pogledati proizvod, vratili se (preko poveznice) ponovno na ispunjavanje narudžbe, ali prethodno uneseni podaci su i dalje bili tu. Prethodno, kako bi se osiguralo takvo svojstvo stranice, bilo je nemoguće učiniti bez dodatnih napora na strani poslužitelja web aplikacije. Sada će biti moguće spremati podatke u kontekstu web sesije ( sessionStorage) ili lokalno u RAM-u preglednika ( lokalna pohrana). sessionStorage bi trebao dopustiti da se podaci zadrže sve dok je aktivna sesija u kojoj su inicijalizirani. Pohranjenim podacima može se pristupiti s različitih web stranica koje učitava preglednik. Opcija localStorage bi navodno trebala spremati podatke dok je sam preglednik otvoren. Budući da bi pristup localStorageu uvijek trebao biti dostupan, čak i ako nema veze s poslužiteljem, svaka stranica koju otvori preglednik može primati podatke iz localStoragea. Stanje sesije u oba slučaja je skup parova ključ-vrijednost kojima se pristupa pozivima xxxStorage.setItem(ključ, vrijednost) i xxxStorage.getItem(ključ).

Primjer: Pogledajte odjeljak o uređivanju sadržaja elementa pomoću novog atributa sadržajno uređivanje, uveden u HTML5, jest. U nastavku su dodana dva gumba, od kojih jedan sprema sadržaj uređenog bloka, a drugi ga vraća. Kliknite [Spremi], uredite sadržaj bloka i kliknite [Vrati]. Ako vaš preglednik podržava HTML5 funkcionalnost sessionStorage, zatim sadržaj bloka sadržajno uređivanjeće se obnoviti.

Vratiti

Spremi Vrati

Razmjena poruka između stranica

Ako vaša stranica sadrži elemente koji učitavaju sadržaj drugih stranica: ne samo stranica vašeg web-mjesta, već i stranica s potpuno druge domene, tada će uz implementaciju HTML5 preporuka biti moguće razmjenjivati ​​poruke s takvim prozorima. Stranica koja šalje poruku to čini pomoću poziva funkcije window.postMessage(message, target), a stranica koja prima poruku mora sadržavati rukovatelja događajem "onmessage", gdje već mora obraditi tekst poruke event.data ako je doista njegov primatelj – odgovara vrijednosnom događaju.podrijetlo . Prije pojave ovog mehanizma nije bilo moguće komunicirati s raznim internetskim resursima na strani klijenta. U nastavku je dan primjer najjednostavnije implementacije komunikacije između dviju stranica pomoću novog mehanizma poruka HTML5. Na prvi pogled može se činiti da se u primjeru ne događa ništa posebno. Točnije, nije jasno zašto je sve to potrebno. Zapravo, razmjena poruka može postati popularna stvaranjem informacijskih portala koji na jednom mjestu kombiniraju različite internetske usluge. Na primjer, pretpostavimo da postoji određena internetska usluga čije se usluge mogu koristiti tek nakon ispunjavanja opsežne elektroničke prijave. Također, pretpostavimo da postoji klijent koji prilično često koristi usluge ove usluge, ali njegovi zahtjevi se svaki put malo razlikuju (većina parametara je uvijek ista). Kada bi takav internetski servis, osim elektroničkog obrasca za ispunjavanje zahtjeva, podržavao i “prijamnik poruka” za automatsku narudžbu svojih usluga, tada bi njegovi klijenti mogli “odvući” prozor ovog servisa na svoje stranice (pomoću elementa), tamo kreirajte vlastite (za sebe optimizirane) prijavne obrasce i funkcije za njihovo slanje ciljnoj usluzi u obliku poruka. Većina parametara u ovom bi slučaju bila automatski generirana, na primjer, podaci o klijentu. Naravno, slična komunikacija se može implementirati kroz http zahtjeve od klijenta prema poslužitelju, u čijem se zaglavlju prenose traženi parametri, ali vrijedi napomenuti da je u slučaju HTML5 mehanizma poruka promet pri prosljeđivanju parametara nula, jer se sve događa na strani klijenta.

Primjer dvije stranice koje razmjenjuju poruke

Primjer implementacije razmjene poruka između stranica pomoću HTML5.

Izvorni kod izvorne stranice poruke

funkcija init() (document.getElementById("forma").onsubmit = sendMessage; ) funkcija sendMessage() ( var lokacija = window.location; var poruka = ​​document.getElementById("message").value; var cilj = dokument. getElementById("target"); target.contentWindow.postMessage(message, location.protocol+"//"+location.host) ...

izvor_poruke.html:

Nije uspjelo učitavanje messages_target.html!

Tekst poruke

Izvorni kod stranice primatelja poruke

funkcija init() ( if (window.addEventListener) window.addEventListener("message", receiveMessage, false); else window.attachEvent("onmessage", receiveMessage); ) funkcija receiveMessage(event) (document.getElementById("target" ).innerHTML = event.data; document.getElementById("origin").innerHTML = "from " + event.origin) ...

messages_target.html:

Čekam poruku... od...

Uređivanje sadržaja elementa

Sada, definiranjem atributa contenteditable, pojedinačne elemente označavanja možete učiniti uređivačkim, na primjer, blokove teksta, popise itd. Koristeći atribut designmode, možete učiniti cijelu stranicu uređivanom. Ova funkcionalnost može biti korisna za organiziranje povratne informacije s vlasnikom resursa, na primjer, za ispunjavanje i slanje prijave, narudžbe ili nečeg sličnog. Kreirate HTML stranicu obrasca u izvornom obliku i dajete je korisniku da je ispuni. Nakon popunjavanja korisnik potvrđuje unesene podatke, a uređeni dokument se šalje na poslužitelj. Primjer oznake koja se može uređivati ​​prikazan je u nastavku:

Sadržaj ovog bloka se može uređivati ​​jer je za njega definiran atribut sadržajno uređivanje:

Prilikom uređivanja ćelija tablice automatski se mijenjaju širina stupaca i visina redaka.

Za unos nove stavke popisa pritisnite .

• Stavka popisa 1
• Stavka popisa 2
• Stavka popisa 3

Nakon dodavanja nove stavke na popis, numeriranje će se automatski ažurirati.

Numerirana stavka popisa 1

Numerirana stavka popisa 2

Numerirana stavka popisa 3

Vektorska grafika

Očekuje se podrška SVG- jezik za označavanje vektorske grafike temeljen na . Grafika će biti umetnuta u markup, što je logično, pomoću oznake , na primjer ovako:

Ako ispod vidite geometrijske oblike, to znači da vaš preglednik već podržava svg.

Matematički izrazi

Očekuje se i podrška MathML- označni jezik za matematičke izraze temeljen na XML-u. Evo primjera označavanja formule za izračunavanje duljine stranice trokuta pomoću kosinusnog teorema:

a = b 2 + c 2 - 2 b c cos α

Ako vidite formulu sa simbolom kvadratnog korijena, vaš preglednik već razumije MathML.

A = b 2 + c 2 - 2 b c cos α

Ostali elementi označavanja

Prije svega, želio bih istaknuti grupu novih elemenata označavanja stranice koji prije nisu izričito postojali. To uključuje oznaku - članak, bilješka, vijest i sl.; - naslov ili zaglavlje članka - podnožje ili podnožje - odjeljak ili poglavlje članka. Zašto je to potrebno ako se ista stvar može učiniti pomoću elemenata različite klase? Ovo je neophodno kako bi značenje vaše oznake bilo jasno i onima koji je pokušavaju analizirati. Ne govorim o osobi koja čita vaš tekst (on ne vidi oznaku, sve mu je jasno i bez nje), već o automatiziranim sustavima, a prije svega to se odnosi na tražilice. Semantičko opterećenje vrlo je važno za tražilice kada izračunavaju relevantnost vaših stranica za određeni upit za pretraživanje. U tom kontekstu, element zaslužuje posebnu pozornost , jer je osmišljen kako bi istaknuo blok s glavnim navigacijskim vezama na vašoj stranici. Možda će tražilice drugačije tretirati takve poveznice. Ispod je tablica sažetka novih HTML5 oznaka koje dodaju značenje oznakama.

Oznaka Kratki opis

	Članak, vijest, bilješka, komentar ili bilo koja druga vrsta pojedinačne objave. Označiti članak kombinira informacije vezane uz jednu temu ili problem. Jedan element članak može uključivati ​​i druge elemente članak(primjer u nastavku).
	Opaska, digresija. Označiti na stranu također se može koristiti za isticanje dijelova teksta koji nisu povezani s glavnim sadržajem stranice, na primjer za postavljanje oglasa.
	Blok detaljnih informacija koji se može proširiti na zahtjev.
	Potpis crteža. Označiti figcaption koristi unutar oznake lik.
	Crtež s potpisom. Ovaj element mora sadržavati sliku img i potpis figcaption.
	Podnožje. Označiti podnožje ima smisla staviti ga i unutar oznake članak za označavanje autora članka ili bilješke.
	Naslov stranice ili uvod u članak. Kada se postavi unutar oznake članak označiti zaglavlje Možete uključiti naslov, kratki opis publikacije i poveznice na povezane materijale.
	Grupiranje naslova h1 - h6 u zaglavlje na više razina.
	Ocjena. Označiti ocjena Ima smisla koristiti ako trebate istaknuti dio teksta drugačijim stilom i uputiti na njega s drugog mjesta u dokumentu.
	Blok navigacijskih veza.
	Odjeljak stranice, poglavlje članka. Kada se stavi unutar članka (tag članak) može se tumačiti kao svoje zasebno poglavlje.

Dolje je primjer HTML označavanja pomoću navedenih oznaka.

HTML5 još nije postao preporuka i postoje kontroverze oko upotrebe njegovih "semantičkih oznaka" kao što su Reprodukcija video i audio datoteka već dosta. Nitko zapravo još ne zna kako ih ispravno umetnuti u markup, ali postoji niz savjeta za korištenje novih HTML5 strukturnih oznaka, s kojima je teško raspravljati, jer je njihovo značenje očito. Evo nekih od njih:

Nemojte koristiti oznaku zaglavlje samo da u njega postavite jednu oznaku naslova h1 - h6 baš kao što nema potrebe stavljati ništa unutar oznaka naslova osim teksta samih naslova. Ne biste trebali učiniti ovo: Naziv stranice

Nemojte koristiti oznaku hgroup za stvaranje grupa naslova iz jednog elementa. Svaki pojedini element iz h1 do h6 pa tako i sam naslov. Evo primjera što ne treba činiti: Naziv stranice

Nema potrebe dodavati elemente odjeljak unutar drugih elemenata, ako uključuju sve glavne sadržaje tih elemenata. U gornjem primjeru nema zasebnih blokova unutar svakog komentara odjeljak kako biste istaknuli sam tekst komentara. Evo primjera dodatnog elementa odjeljak :

Tekst komentara

Objavljeno...

Nije potrebno razumjeti značenje elementa članak doslovno. Ovo nije samo članak, već i svaki oblik izlaganja cjelovite misli. Iz tog razloga su i komentari na članak u prethodno navedenom primjeru odvojeni u zasebne blokove članak.

Koristite oznake strukture HTML5 samo ako vjerujete da će pomoći tražilicama da saznaju više o semantici vašeg označavanja. Ako oznaka nema zasebno značenje, već je dodana samo za "ljepotu", tada je rezultat njenog dodavanja "dodatna težina" vaše stranice, koja je, kao što je poznato, "štetna za zdravlje" mjesto.

To je sve za mene o novim značajkama jezika za označavanje hiperteksta koje bi se trebale pojaviti s objavljivanjem preporuke HTML5.

S izdavanjem HTML5, mnoge su nove značajke dodane u HTML. A ono što je još bolje je da neki preglednici već podržavaju neke od ovih značajki, dok drugi još napreduju prema tome. Na ovoj stranici možete pratiti ove značajke koje se dodaju preglednicima.

1. Novi Doctype i Charset.

Jedna od prednosti HTML5 je njegova jednostavnost.

Da, to je sve. Doslovno dvije riječi. Ova jednostavnost vjerojatno je posljedica činjenice da HTML5 stoji sam za sebe, a ne da ostane dio SGML-a.

Charset je također vrlo jednostavan, koristi utf-8, a specificira se na isti način, doslovno jednom oznakom:

2. Nova struktura

HTML5 razumije da web stranica ima strukturu, baš kao knjiga, na primjer. Obično je to navigacija, sam sadržaj, bočni izbornik (sidebar) i zaglavlje. A HTML5 pruža oznake za sve te elemente.

• – definira dijelove stranice
• – definira naslov stranice
• – definira podnožje stranice
• – definira navigaciju stranicom
• – definira članak ili glavni sadržaj na stranici
• – definira dodatni sadržaj, bočnu traku na stranici
• – definira sliku, napomenu članka

3. Novi ugradbeni elementi.

Ovi novi elementi definiraju neke osnovne koncepte i predstavljaju elemente stranice:

• – za označavanje sadržaja
• – za označavanje vremena ili datuma
• – za označavanje određenih dimenzija, kao što je prostor na disku
• – za označavanje vašeg uspjeha i napredovanja

4. Nova podrška za dinamičke stranice

HTML 5 dizajniran je za pojednostavljenje zadataka web programera, zbog čega postoje mnoge nove značajke za podršku dinamičkim stranicama.

• Kontekstni izbornik – HTML 5 podržava stvaranje i korištenje kontekstnih izbornika na web stranicama i aplikacijama
• asinkroni atribut - Ova oznaka govori pregledniku da se skripta treba učitavati asinkrono kako ne bi usporila učitavanje i renderiranje ostatka stranice.
• – sadrži detaljne podatke o elementu.
• – stvara tablicu koja je stvorena iz baze podataka ili drugog dinamičkog izvora stranice
• – vraćaju se stare oznake, omogućujući vam stvaranje sustava izbornika na vašim web stranicama
• – definira akcije koje bi se trebale dogoditi kada se aktivira dinamički element

5. Nove vrste obrazaca

HTML5 podržava sve stare vrste obrazaca, ali dodani su i novi:

• datumvrijeme
• datum-vrijeme-lokalni
• mjesec
• broj
• domet
• elektronička pošta

6. Novi elementi

Postoje neki novi elementi u HTML5:

• – element koji vam omogućuje korištenje JavaScripta na web stranicama. To vam može omogućiti dodavanje slika ili grafika u opise alata ili jednostavno stvaranje dinamične grafike na stranici u hodu.
• – dodaje video na web stranicu.
• – dodaje zvuk web stranici.

7. Izbrisane stavke

Postoje i HTML4 elementi koji se više ne mogu koristiti u HTML5. Većina njih odavno je zastarjela, pa takve akcije ne čude.

Od autora: Izdanje standarda HTML 5 prije 2 godine izazvalo je pometnju u zajednici programera. Ne samo zato što je u specifikaciji bilo mnogo novih svojstava, već i zato što je to bilo prvo veće ažuriranje HTML-a od HTML 4.01, koji je izašao 1999. Još uvijek možete pronaći stranice na internetu koje se hvale da koriste "moderni" HTML5 standard.

Srećom po nas, ovaj put nismo morali toliko čekati na sljedeću generaciju HTML-a. U listopadu 2015. W3C je započeo s razvojem nacrta HTML 5.1 koji je trebao riješiti niz problema koji su ostali otvoreni u HTML5. Nakon dugo vremena, specifikacija je dosegla status “Candidate Recommendation” u lipnju 2016., status “Proposed Recommendation” u rujnu 2016. i konačno status W3C Recommendation u studenom 2016. Oni koji su pratili razvoj možda su primijetili da je put trnovit. Mnoge primarne značajke HTML 5.1 odbijene su zbog lošeg dizajna i nedostatka podrške preglednika.

HTML 5.1 je još uvijek u razvoju, a W3C je započeo rad na nacrtu HTML 5.2, čije se objavljivanje očekuje krajem 2017. U ovom ćemo članku pogledati nekoliko zanimljivih novih značajki i poboljšanja u verziji 5.1. Podrška za ova svojstva još uvijek je loša, ali reći ćemo vam u kojim preglednicima možete barem isprobati primjere.

Kontekstni izbornik pomoću oznaka izbornika i stavki izbornika

Nacrt 5.1 uvodi dvije vrste elemenata izbornika: kontekst i alatnu traku. Prvi se koristi za proširenje izvornog kontekstnog izbornika, koji se obično prikazuje desnim klikom na stranicu. Drugi definira jednostavne komponente izbornika. Tijekom procesa razvoja, alatna traka je napuštena; oznaka konteksta je još uvijek prisutna.

Pomoću oznake izbornika možete stvoriti izbornik s jednom ili više oznaka stavki izbornika, a zatim dodijeliti te oznake bilo kojem elementu pomoću atributa contextmenu. Oznaka stavke izbornika može biti jedna od tri vrste:

potvrdni okvir – omogućuje odabir ili poništavanje odabira;

naredba – omogućuje izvođenje radnje na klik;

radio – omogućuje odabir jedne opcije iz grupe.

Osnovni slučaj upotrebe, radi u Firefoxu 49, nema podrške u Chromeu 54.

U podržanim preglednicima kontekstni izbornik trebao bi izgledati ovako:

detalji i elementi sažetka

Pojedinosti i oznake sažetka omogućuju vam da prikažete i sakrijete blokove s dodatnim informacijama na klik. To se obično radi u JS-u, ali sada se to može učiniti pomoću detalja i oznaka sažetka. Klikom na oznaku sažetka otvara se sadržaj iz oznake pojedinosti.

Primjer u nastavku testiran je u Firefoxu i Chromeu.

U podržanim preglednicima demo izgleda ovako:

Dodatne vrste polja za unos su mjesec, tjedan i lokalni datum i vrijeme

Arsenal polja za unos proširen je s tri nove vrste: mjesec, tjedan i datum-vrijeme-lokalno.

Prve dvije vrste omogućuju odabir tjedna i mjeseca. U Chromeu su obje ove vrste prikazane kao padajući kalendari u kojima možete odabrati mjesec ili tjedan. Kada mu se pristupi iz JS-a, niz će izgledati otprilike ovako: "2016-W43" za tjedan i "2016-10" za mjesec.

U početku je nacrt 5.1 uveo dva ulaza datum-vrijeme: datetime i datetime-local. Razlika između njih je u tome što datetime-local uvijek odabire vrijeme u vremenskoj zoni korisnika, dok vam datetime omogućuje promjenu vremenske zone. Tijekom razvoja tip datetime je odbačen, ostavljajući samo datetime-local. Polje tipa datetime-local sastoji se od dva dijela: datuma, koji se može odabrati na isti način kao u poljima tipa tjedan i mjesec, i vremena, koje se može posebno navesti.

Demo CodePen u nastavku prikazuje primjere svih vrsta. Radi u Chromeu, još nema podrške u Firefoxu:

U preglednicima koji podržavaju demo to će izgledati ovako:

Responzivne slike

HTML 5.1 uvodi nekoliko novih značajki za rad s responzivnim slikama bez uključivanja CSS-a. Svaka funkcija ima svoje primjere korištenja.

Srcset atributa slike

Atribut slike srcset omogućuje registraciju nekoliko dodatnih slika s različitim gustoćama piksela. Na taj način preglednik može učitati slike potrebne kvalitete za korisnikov uređaj (na temelju gustoće piksela na uređaju, razine zumiranja i brzine mreže). Na primjer, za korisnike s malim telefonima ili sporim mrežama, možete prikazati slike niske rezolucije.

Atribut srcset prihvaća popis URL-ova slika odvojenih zarezima s modifikatorom X. Modifikatori opisuju omjer piksela (broj fizičkih piksela po CSS pikselu) prikladan za svaku sliku. Jednostavan primjer:

< img src = "images/low-res.jpg" srcset = " Slike/low-res.jpg 1x, Slike/high-res.jpg 2x, Slike/ultra-high-res.jpg 3x"

Ako je omjer piksela 1, prikazat će se slika niske razlučivosti, za 2 bit će prikazana visoka razlučivost, za 3 - ultravisoka rezolucija. Možete prikazati slike različitih veličina umjesto omjera piksela. Da biste to učinili, morate koristiti w modifikator:

< img src = "images/low-res.jpg" srcset = " Images/low-res.jpg 600w, Images/high-res.jpg 1000w, Slike/ultra-high-res.jpg 1400w"

U ovom slučaju, slika širine 600 px postavljena je za nisku razlučivost, 1000 px za visoku i 1400 px za ultravisoku.

Veličine atributa slike

Možda ćete htjeti prikazati slike na različite načine, ovisno o veličini vašeg zaslona. Na primjer, možete prikazati slike u dva stupca na širokim zaslonima, ali u jednom stupcu na uskim zaslonima. U tome će vam pomoći atribut veličine. Atribut vam omogućuje prevođenje širine zaslona u prostor dodijeljen slici, nakon čega se pomoću atributa srcset odabire odgovarajuća slika. Primjer:

< img src = "images/low-res.jpg" sizes = "(max-width: 40em) 100vw, 50vw" srcset = "images/low-res.jpg 600w, Images/high-res.jpg 1000w, Slike/ultra-high-res.jpg 1400w"

Kada je širina prozora preglednika veća od 40 em, atribut sizes navodi širinu slike kao 50% širine prozora. Kada je širina prozora manja ili jednaka 40em, širina slike je 100%.

Oznaka slike

Nije dovoljno jednostavno promijeniti veličinu slika kako bi odgovarale različitim zaslonima. Trebate način da prikažete potpuno različite slike. Oznaka slike pomoći će vam u tome. Ova vam oznaka omogućuje registraciju više slika za različite zaslone. Da biste to učinili, trebate zamotati oznaku img u sliku i navesti dodatne izvorne oznake. Oznake izvora sadrže veze na slike.

< picture > < source media = "(max-width: 20em)" srcset = " Images/small/low-res.jpg 1x, > < / picture >

Validacija obrasca pomoću form.reportValidity()

HTML5 ima metodu form.checkValidity(), koja se može koristiti za provjeru polja obrasca protiv validatora. Rezultat je Booleova vrijednost. Nova metoda reportValidity() radi na sličan način. Uz njegovu pomoć možete potvrditi obrazac i vratiti rezultat. Osim toga, ova metoda pokazuje pogreške korisniku izravno u pregledniku. Demo CodePen u nastavku prikazuje rezultat (testiran u Firefoxu i Chromeu):

Polje Ime mora biti istaknuto i ne smije biti prazno. Obično radi ovako:

enablefullscreen atribut za okvire

Novi Boolean atribut za okvire, allowfullscreen, omogućuje vam promjenu načina na koji se sadržaj prikazuje pomoću metode requestFullscreen(). Pomoću njega možete proširiti sadržaj na cijeli zaslon.

Provjera pravopisa pomoću element.forceSpellCheck()

Nova metoda element.forceSpellCheck() omogućuje vam da omogućite provjeru pravopisa tekstualnih elemenata. Ovo je također prva značajka koja još nije podržana ni u jednom pregledniku. Čisto teoretski, ova se metoda može koristiti za provjeru pravopisa elemenata koji se ne mogu uređivati.

Značajke koje nisu implementirane

Neke značajke napisane u ranim nacrtima specifikacije na kraju su uklonjene, uglavnom zbog nedostatka interesa programera preglednika. Evo nekih od zanimljivih značajki:

inertni atribut

Inertni atribut trebao je onemogućiti korisničku interakciju za sve podređene elemente. Isto kao da ručno dodate atribut disabled svim elementima.

Dijalog oznake

Pomoću oznake dijaloga bilo je moguće stvoriti skočne prozore. Čak je osmišljen i prikladan oblik integracije. Atribut metode dijaloške oznake spriječio je slanje obrasca na poslužitelj; umjesto toga, oznaka je vratila vrijednost kreatoru dijaloga.

Oznaka je još uvijek podržana u Firefoxu, primjer kako radi:

Dodatne poveznice

Ovo nipošto nije potpuni popis promjena u HTML 5.1. Specifikacija sadrži mnoge sitnice i promjene koje su usvojene u životnom standardu, kao i mnoge značajke koje su uklonjene. Potpuni popis promjena može se pronaći u odjeljku Promjene u specifikaciji. U međuvremenu, nadajmo se da će programeri preglednika brzo prihvatiti nove značajke!

Što vam se najviše svidjelo kod HTML 5.1? Pišite u komentarima!

Urednik: Pavels Jelisejevs

1. veljače 2008. u 23:51 Što je novo u HTML 5.0? dio 1

• Izrada web stranice

• Prijevod

Web tehnologije neprestano se razvijaju. Svakodnevno se stvaraju nove stranice koje proširuju mogućnosti HTML-a. HTML 4 postoji već gotovo desetljeće, ali izdavači traže nove načine za proširenje funkcionalnosti formata. Međutim, raznolikost jezika i preglednika ograničava neke od njegovih mogućnosti.

Kako bi programerima pružio fleksibilniji, interoperabilni proizvod koji projekte čini interaktivnijima i zanimljivijima, HTML 5 uvodi i proširuje niz značajki uključujući kontrole obrazaca, API-je, multimediju, strukturu i semantiku.

Rad na HTML 5 započeo je 2004. Razvoj se trenutno provodi kao dio zajedničkog napora W3C HTML WG i WHATWG. Mnoge poznate tvrtke uključene su u razvoj, uključujući: Apple, Mozilla, Opera i Microsoft te niz drugih organizacija i pojedinaca s različitim interesima i iskustvom.

Imajte na umu da je specifikacija još uvijek u razvoju i daleko je od potpune. Stoga je moguće da se bilo koja značajka spomenuta u ovom članku promijeni u budućnosti. Ovaj je članak namijenjen opisu novih značajki formata HTML verzija 5.

Struktura

HTML 5 uvodi cijeli niz novih elemenata koji strukturu stranice čine puno jednostavnijom. Većina HTML4 stranica sadrži brojne uobičajene strukture, kao što su zaglavlja i stupci, a danas postaje tradicija njihovo isticanje pomoću div elemenata, dodjeljivanjem klase ili id-a.


Ilustracija prikazuje tipičan raspored u 2 stupca koji koristi div elemente, dodjeljujući im klasu ili id. Struktura sadrži zaglavlje stranice, podnožje, navigacijski izbornik i sadržaj podijeljen u 2 stupca -

Korištenje div elemenata je preferirano jer trenutnoj verziji HTML-a 4 nedostaje semantika za preciznije opisivanje ovih dijelova. HTML 5 rješava ovaj problem uvođenjem novih elemenata od kojih svaki ima svoje zasebno ime.

Kod dokumenta izgleda ovako:

...
...
...

...
...

Nekoliko je prednosti korištenja ovih elemenata. Kada se koristi u kombinaciji s naslovima elemenata (h1 - h6), to omogućuje uvođenje pododjeljka s naslovom u svaku razinu, za razliku od mogućih 6 razina u prethodnoj verziji HTML-a. Specifikacija uključuje detaljan algoritam za generiranje granica. Ovi se elementi mogu koristiti kao autorski alati i alati preglednika za generiranje tablice sadržaja i pomoć korisnicima u kretanju dokumentom.

Na primjer, sljedeća je struktura podijeljena na razine s ugniježđenim h1 elementima:

Razina 1 Razina 2 Razina 3
Imajte na umu da za maksimalnu kompatibilnost s različitim preglednicima možete koristiti različite razine naslova, kao što su h2, h3 itd.

Definiranjem svrhe odjeljaka na stranici pomoću određenih elemenata odjeljaka, ova tehnologija može pomoći korisniku da se lakše kreće po stranici. Na primjer, korisnik može jednostavno skočiti na odjeljak izbornika ili se brzo pomaknuti s jednog članka na sljedeći bez potrebe da razvojni programer stvori takvu vezu za skok. Programeri se također mogu veseliti jer će zamjenom div elemenata s odgovarajućim elementima izvorni kod biti jednostavniji i čišći.

Element zaglavlja predstavlja naslov stranice. Ovaj odjeljak može sadržavati ne samo sam naslov, već i sve podnaslove koji će pomoći korisniku da bolje razumije sadržaj stranice.

Pregled HTML-a 5 od Lachlana HuntExample BlogUmetnite oznaku ovdje.
Element "footer" predstavlja "footer" stranice. Ovaj dio stranice obično sadrži poveznicu na autorska prava, brojače itd.

Element “nav” - definira odjeljak za navigaciju web stranice:

Element "po strani" definira odjeljak neizravno vezan uz sadržaj stranice, najčešće se koristi kao privitak.
Što je novo u HTML5? Razlike između HTML5 i HTML 4

HTML5 specifikacija uvodi mnoge promjene različitih razina i važnosti. U osnovi, ključne promjene mogu se podijeliti u 7 blokova:

a) Semantika (semantičko značenje jezičnih jedinica)

HTML5 uvodi brojne nove semantičke oznake koje vam omogućuju da smislenije organizirate unutarnju strukturu web stranica. To uključuje i blok oznake kao što su zaglavlje, podnožje, članak i oznake za označavanje teksta kao što su oznaka, rubin, detalji. Brojni postojeći HTML4 tagovi su proglašeni zastarjelim, pojedini tagovi su promijenili svoje značenje, a atributi su pretrpjeli određene promjene.

b) Multimedija

HTML5 dodaje izvornu podršku za multimedijski sadržaj (audio i video) izravno u HMTL označavanju -- s pridruženim API-jem za upravljanje.

c) Grafika

Rad s grafikom na strani klijenta postao je osjetno lakši. U HTML5 je dodan element canvas i poseban JavaScript API za rad s njim. Canvas je dinamička "površina" na kojoj možete programski crtati. HTML5 također službeno uključuje oznaku svg, koja vam omogućuje implementaciju vektorske grafike opisane odgovarajućim web standardom SVG (Scalable Vector Graphics).

d) Web obrasci

Novi elementi web obrasca: vrste i atributi koji vam omogućuju da proširite mogućnosti tradicionalnih obrazaca s ugrađenim alatima bez upotrebe dodatnih biblioteka - od savjeta u polju za unos (placeholder) i provjere valjanosti unesenih vrijednosti do posebnih elemenata za unos datuma i boja.

e) JavaScript API-ji.

HTML5 uključuje nove mogućnosti za pomicanje objekata (Drag & Drop), rad s poviješću prijelaza (History API), kao i brojne sitnice, kao što je mogućnost da sadržaj učinite uređivanjem na trenutnoj lokaciji pomoću atributa Content Editable .

f) Novi DOCTYPE

Oznaka DOCTYPE ključna je komponenta web stranica koje tvrde da su u skladu sa standardima: bez nje kôd neće proći validator. DOCTYPE je također važan za ispravan prikaz i funkcioniranje stranice u preglednicima usklađenim sa standardima.

U HTML 4 postoje 3 vrste elemenata:

• 1. Strog
• 2. Prijelazni
• 3. S okvirima (Frameset)

Često je odabir jednog ili drugog DOCTYPE elementa bio prilično težak. U HTML5 DOCTYPE postoji samo jedan, napisan je ovako:

Ovaj kratki unos zamjenjuje stariji, duži oblik:

g) Sintaksa

HTML 5 će imati dvije sintakse - "prilagođeni" HTML i XML. HTML sintaksa definira detaljna pravila parsiranja (uključujući "rukovanje pogreškama").

XML sintaksa je kompatibilna s XHTML1 dokumentima i njihovim implementacijama. Za korištenje ove sintakse tip MIME (višenamjenska proširenja internetske pošte) mora biti deklariran kao XML tip, a elementi moraju biti konstruirani prema XML specifikaciji.

Slika 2 - Osnovna HTML5 svojstva