HTML5 standard je finaliziran i objavljen 2014. godine, a to je ono što bi HTML trebao biti kad je prva verzija pokrenuta prije svih tih godina. HTML 2.0 bio je prvi pravi 'standard', objavljen sve do 1995. Dvije godine kasnije objavljen je HTML 3. Dvije dvije godine kasnije, uveden je HTML 4.01 i od tada je radni konj interneta.
Prvi "radni nacrt" HTML5 predstavljen je još 2008. godine, a tada je bila iznenađujuće široka podrška preglednika. HTML5 kakav danas poznajemo uvelike se razlikuje od nekadašnjeg HTML-a, a ovdje ćemo razgovarati o tome što se najnovijim standardom promijenilo njegovim izdanjem. Otkad je HTML5 lansiran, on je široko prihvaćen i sve njegove značajke i mogućnosti sada podržavaju svi glavni preglednici. Tu i tamo još uvijek postoji nekoliko štucanja, ali sveukupni HTML5 dobro se uskladio s modernim internetskim iskustvom.
Kao web programer mogli biste biti stari profesionalac koji je savladao starije standarde ili novorođenče znatiželjno gledajući razvoj novih standarda u stranu. Bilo kako bilo, na kraju morate prijeći na HTML5.
HTML Vs HTML5 Infografski
Prvi korak prelaska na HTML5 ili učenje je razumijevanje razlike između starijeg i najnovijeg standarda. Evo nekoliko ključnih razlika između HTML-a i HTML5:
-
HTML5 je živi jezik
HTML5 je živi jezik, u tijeku je rad. Nevjerojatno je vidjeti što HTML5 može učiniti, ali je također važno znati da HTML5 nije potpuno standardizirana verzija poput HTML4-a, koja je starija od deset godina i postavljeni standard, nepromjenjiv.
Ako ulazite u HTML5, morat ćete izvršiti neka ažuriranja. Atributi i elementi se dodaju i redovno mijenjaju svake godine. To također ovisi o tome koliko koristite bogate elemente, ali definitivno je jedan od rizika povezanih s korištenjem fluidnog, mijenjanjem jezika poput HTML5.
-
HTML5 je jednostavniji
Iako HTML5 ima rizike poput stalnih ažuriranja, obično je lako pratiti promjene i ažuriranja zbog jednostavnije sintakse u usporedbi s HTML4. Na primjer, na početku stranice imate vrlo jednostavnu deklaraciju kako biste je postavili kao HTML5 stranicu:
Jednostavna Doctype deklaracija jedno je od pojednostavljenja napravljenih u sintaksi HTML-a, a kompatibilna je sa svim inačicama HTML4-a i sve do XHTML1. Međutim, HTML5 nije kompatibilan sa SGML-om.
Preporučeni tečajevi
- Besplatna obuka programiranja Python-a
- Besplatni tečaj za testiranje softvera
- Besplatni tečajevi programiranja Java
- Kompletan PERL tečaj
-
Novi element
HTML5 dolazi s velikim brojem novih elemenata i eliminira nekoliko drugih (o kojima ćemo govoriti u skorije vrijeme), ali jedan od njegovih ključnih dodanih elemenata je što je vrlo utjecalo na upotrebu Adobe Flash-a na web stranicama. Iako je Flash još uvijek u uporabi na nekoliko web stranica, HTML5 su usvojili mnogi i mnogi ljudi misle da će to s vremenom Flash učiniti zastarjelim. Samo će vrijeme odlučiti o tome; do tada, kaskadni element HTML5 pokazao se kao dobra alternativa Flashu.
Element se može koristiti za crtanje grafike različitih oblika i boja putem skriptiranja, obično JavaScript. Element je jednostavno spremnik za grafiku; za definiranje grafike trebate koristiti skriptu. Po zadanom, platno je pravokutno područje bez sadržaja ili obruba. Tržište je tako:
Za definiranje veličine platna važno je odrediti atribut id, kao i širinu i visinu. Za definiranje granica možete dodati atribut stila.
Možete koristiti i JavaScript kao slijedeći primjer:
var c = document.getElementById ("myCanvas");
var ctx = c.getContext ("2d");
ctx.fillStyle = "# FF0000";
ctx.fillRect (0, 0, 150, 75);
-
Novo i Elementi
Sljedeći veliki dodatak koji dolazi s HTML5 su novi i elementi, što ukazuje na novu anatomiju interneta. S ovim novim oznakama nema potrebe više identificirati dva elementa s oznakom.
Specifikacije definiraju zaglavni element koji predstavlja skupinu "navigacijskih" ili "uvodnih" pomagala. Kao takav, element se može koristiti za definiranje uvoda u dio stranice ili u cijelu stranicu. Ovdje je isječak koda koji koristi element zaglavlja.
Titula
Autor Pisao u Web 2.0
Tijelo teksta
Specifikacije HTML5 odnose se na podnožni element koji predstavlja "podnožje za sadržaj odjeljka s najbližim predakom ili korijenski element odjeljka" i obično sadrži podatke o odjeljku, poput imena autora, podataka o autorskim pravima, veza do dokumenata i tako dalje.
Logično je da se podnožje nalazi na dnu web stranice. Ali može biti i na kraju odjeljka stranice. Evo nekoliko primjera kodiranja koji koristi element podnožja:
Naslov sadržaja
Autor Pisao u Web 2.0
Tijelo teksta.
Oznake: naredbeni redak, kompas, CSS, Sass, terminal
10 lajkova
Ovdje podnožje sadrži oznake postova i post „Facebook voli“.
-
I elementi
Da ste prošli kroz gornje primjere primijetili biste još nekoliko novih elemenata, poput. Ovaj element, zajedno s elementom, omogućuje vam označavanje određenih dijelova vašeg izgleda i izuzetno je koristan za optimizaciju tražilice. Element članka je određen tako da predstavlja samostalnu komponentu web stranice koju je moguće samostalno ponovo upotrijebiti ili distribuirati. To mogu biti novine, forumi, članci u časopisu, unosi na blog ili bilo što drugo.
Element članka obično ima svoj naslov u elementu zaglavlja, a možda čak i podnožje, kao što ste vidjeli u gornjem primjeru. Element možete jednostavno zamisliti kao unos u blog ili samostalni dio sadržaja; lukav dio je identificiranje onoga što je neovisno. Jednostavno rečeno, neovisni dio sadržaja onaj koji ima smisla sam po sebi.
Dobar način da saznate je li dio sadržaja neovisan postavljanjem pitanja ima li smisla unutar RSS feeda. Članci bloga i statičke stranice imaju smisla, a neke web stranice sadrže feedove komentara. Ali odlomak u članku ne bi imao nikakvog smisla odvojen od ostatka sadržaja. Slijedi isječak koda s podnožjem i objavom oznaka.
Naslov sadržaja
Objavljeno: 24.02.2016
Tijelo teksta
Licenca Creative Commons Attribution-ShareAlike
Element odjeljka, prema W3C specifikacijama, predstavlja "generički odjeljak" aplikacije ili dokumenta. Moglo bi se zbuniti s oznakom, pa odmah razjasnimo zbrku. Oznaka odjeljka koristi se kada sadržaj unutar nje mora biti grupiran odvojeno od ostatka stranice s jednom temom, a kada bi ga trebalo vidjeti kao unos u obrisu stranice. Element div, međutim, naveden je kao "generički spremnik", što znači da nije odvojen od same glavne stranice, osim vlastitog atributa naslova, jezika i klase.
-
Novi i elementi
HTML5 novi i elementi dio su specifikacija Interaktivnih elemenata, ali programeri su među elementima s najmanje razgovora. S obzirom na činjenicu da se web promijenio u tek međusobno povezane stranice i dokumente, ovi su elementi dobrodošli dodatak za veću interaktivnost na webu.
Element se ne smije miješati s elementom koji je definiran kao HTML navigacijska oznaka koja predstavlja blok za navigaciju stranice. Obično sadrži veze za korisnike koji mogu preskočiti odjeljke unutar stranice ili neke druge stranice. S druge strane, oznaka izbornika predstavlja naredbe izbornika za jednostavnost u stolnim i mobilnim aplikacijama. Evo primjera elementa u akciji:
Pozdrav svijete
U međuvremenu, element je još jedan način slaganja slika i teksta. Koristi se zajedno s elementom za označavanje ilustracija, dijagrama i fotografija. Slijedi dolje kratki isječak koda koji sadrži oba elementa u akciji.
-
Novi i elementi
Ovo su dva glavna dodatka HTML5 standardu. Zvučna oznaka, poput videooznake, omogućuje programerima da ugrađuju glazbu i zvuk na svoju web stranicu. Za razliku od prethodnog standarda, niste ograničeni na dodavanje midi glazbe, iako i dalje postoje određena ograničenja u vrsti korištenih datoteka. Većina preglednika koji se odnose na Webkit podržavaju redovne MP3 datoteke, ali drugi podržavaju samo OGG format. Dobra vijest je da postoje tone pretvarača datoteka i jednostavno možete opskrbiti dvije verzije audio datoteke; prava verzija će se pokupiti automatski.
Zvučnu oznaku možete koristiti kao i bilo koji drugi element. Evo primjera isječka:
Zvučna oznaka također ima niz atributa za dodatne kontrole, uključujući atribute događaja, a događaji uključuju događaje prozora, događaje oblika, medijske događaje i događaje miša. Video element također ima brojne sadržajne atribute, uključujući SRC, globalne atribute, petlju, kontrolu, prednalaganje i poster. Atributi SRC, petlje, automatska igra i kontrola prilično su nerazumljivi i isti su za sve medijske elemente, dok su globalni atributi zajednički za sve elemente. Uključuju dir, skrivenu, kontekstni izbornik i još mnogo toga.
Postoji nekoliko drugih multimedijskih atributa i elemenata koji dolaze s HTML5, poput elementa zapisa koji pruža tekstualne zapise za video element.
-
Novi oblici
HTML5 sada dolazi sa oblikom i elementima. Ako ne planirate koristiti mnoge tablice na stranici, također možete ukloniti atribut i pogledati promjene koje su učinjene prije nego što krenete naprijed.
-
Nema više elemenata
To znači da svi atributi koji omogućuju programerima da izrade savršeno postavljenu, zatamnjenu tablicu, poput obruba, bgcolor-a, poravnanja, visine, pravila i još mnogo toga. Svi ovi atributi zamjenjuju se CSS-om.
-
Nema više, i
To je sjajno za one programere koji su radili u HTML-u do ranih dana. Atributi okvira, okvira i noframes u potpunosti su uklonjeni, zajedno s drugima kao što su treptaj, osnovni font i još više. Morat ćete upravljati bez upotrebe tablica za izgled. Tablice su još uvijek dio HTML5, ali više nisu namijenjene pikselima. Specifikacije kažu da se tablice ne smiju koristiti za pomoć pri izgledu i za kontrolu izgleda stranice.
Zaključak
Kao što jasno vidite, u HTML5 postoji mnogo promjena i trebate ga koristiti pažljivo i oprezno. Također morate ažurirati svoje znanje o jeziku, jer se s vremenom mijenja i dobiva više ažuriranja. Morate zaustaviti upotrebu elemenata koje je HTML5 uklonio iz sebe i upotrijebiti nove HTML5 elemente koji će se definitivno zadržati, poput oznaka zaglavlja ili podnožja |
Ono što ste vidjeli iznad je samo pojednostavljena verzija koliko je promjena HTML5 izvršio svojim pokretanjem. Ali budimo ovdje iskreni; nema načina da se HTML5 usvoji, a novi standard dodaje puno mogućnosti koje su ključne za moderno korisničko iskustvo. Trebate biti ukorak s novim jezikom i naučiti neki CSS, koji ima veću ulogu nego prije.
Dobra stvar ovih promjena je u tome što su, iako su velike, na bolje i to razumiju svi dionici koji su ovdje uključeni. Preglednici će biti snažniji kako se kreću prema oblaku, s mogućnošću da sami rukuju više. S stvarima kao što je Ajax, s ugrađivanjem video i audio zapisa i tako dalje, bit će mnogo lakše kodirati se jednostavnom metodom i omogućiti pregledniku da preuzme veliku dužnost. Na primjer, novi elementi strukture, kao što su slika, podnožje, sažetak i odjeljak, odnose se na strukturu dokumenta, a prikaz je prepušten pretraživaču.
Povezani članci:-
Evo nekoliko članaka koji će vam pomoći da saznate više detalja o HTML-u u odnosu na HTML5 pa samo prođite vezu.
- HTML i XML
- HTML5 vs Flash Top 9 razlika (uz Infographics)
- HTML u odnosu na XHTML
- HTML5 vs Flash
- Iznenađujuće razlike HTML5 u odnosu na JavaScript
- 10 izvrsnih savjeta za programiranje Pythona (trikovi)