HTML5 standard je jezik za strukturiranje i prezentaciju sadržaja na internetu koji je uveden i preporučen za korištenje 2014. godine. Trenutno gotovo svi preglednici podržavaju većinu HTML5 inovacija, ali ne zaboravite da se razvoj jezika nastavlja, a World Wide Web Consortium nastavlja mijenjati i poboljšavati petu verziju.
Imajte na umu da počevši od pete verzije HTML jezik 5 prikazan je ne samo kao jezik strukturiranja, već i kao jezik prezentacije, što se ogleda u semantičkom izgledu, tj. HTML se sada koristi u novom kapacitetu.
Posvajanje HTML5 standard dovelo do smanjenja širenja postojeće tehnologije raspored. Dakle, prije ovog standarda, verzije 4.01 HTML-a i standardi XHTML 1.0 i 1.1 bile su naširoko korištene, zbog čega su stranice bile predstavljene mješavinom ovih tehnologija, što je pregledniku otežavalo tumačenje stranica. uveden je novi doctype za standard HTML5:
Razmotrite glavne promjene koje prije svega treba razmotriti:
- prema HTML5, html jezik ne razlikuje velika i mala slova, tako da se oznake mogu pisati bilo kojom kombinacijom malih i malih slova velika slova:
, , - ovi su pravopisi točni i ekvivalentni. - html5 kombinira dva html tehnologije i xhtml, kao rezultat toga, mogućnost mješovitih pravila kodiranja je eliminirana. Ako je ranije bilo moguće susresti pisanje neuparenih oznaka:
tako
tako
zatim u html5 standardu ispravan pravopis je:
Promjene oznaka: zastarjeli i prilagođeni elementi
Navođenje svih promjena u oznakama nemoguće je u okviru jedne lekcije, budući da su promjene u standardu utjecale na ogroman broj oznaka, pa pogledajmo glavne promjene koje će nam trebati u našem radu.
Hiperveza
Primjer
što je u prethodnim standardima uzrokovalo pogreške jer inline element omotani blok, valjan u HTML5.
Jedan od naj popularna pitanja početnici slagači je: " Kako napraviti hipervezu na div blok? ". I najčešće odgovarao: "Koristite JS". Kao što možete vidjeti iz primjera, u HTML5 možete jednostavno staviti potrebne blokove unutar hiperveze.
oznake I
Oznake se vraćaju u HTML 5 (podebljava font) i (kurziv). U modernoj interpretaciji, ove oznake služe samo za vizualni dizajn i ne nose semantičko opterećenje.
mala oznaka
Označiti je korišten u prethodnim verzijama za postavljanje veličine fonta manje od teksta (njegova suprotnost bila je velika oznaka - koja je povećala veličinu fonta). Različiti prikazi u različitim preglednicima dovelo do pomaka ovog elementa span tagšto je mnogo prikladnije za korištenje.
U HTML5 označiti je vraćen, ali se njegova interpretacija promijenila, sada se koristi za prelamanje teksta koji bi trebao biti na stranici, ali ne smije oduzeti glavni sadržaj, te biti što manje uočljiv. Analogno - tekst po fusnotama, odn raznim uvjetima dionice. Vizualno također smanjuje veličinu fonta teksta koji se prelama.
adresna oznaka
Za razliku od prethodne verzije HTML u petom izdanju koristi se samo za označavanje podataka za kontakt autora materijala. Nemojte koristiti oznaku za navođenje podataka za kontakt na web stranici organizacije (za to se trebaju koristiti mikroformati i mikropodaci).
Kao što je već spomenuto, unutar ovu lekciju nemoguće je razmotriti sve promjene u oznakama, gore smo razmotrili prilagođene oznake, sada ćemo navesti zastarjele:
- - zamijenjeno oznakom (koristi se za kratice);
- zamijenjeno oznakom - - zamijenjen sa
, - promijenjeno u oznake I
(za umetanje popisa programa i kodova);
- zamijenjen sa
Svojstva oblikovanja teksta ,
Podsjetimo da preglednici podržavaju mnoge zastarjele oznake, ali stranice sa zastarjelim oznakama neće proći provjeru valjanosti. Zato ga nakon završetka izgleda stranice trebate provjeriti na validatoru.
HTML 5 i CSS 3 dodali su ogroman broj novih oznaka i svojstava u izgled. Provjerite mogućnosti animacije s novim svojstvima CSS 3.
Pozdrav gosti ovog bloga i moji vjerni pretplatnici. S brzim razvojem tehnologije, znanosti i programiranja, kao što se danas može vidjeti, nije iznenađujuće da potražnja potrošača raste. A to znači da će prije ili kasnije doći do poboljšanih verzija programa, opreme i, što je najvažnije, jezika.
Čitanje članka će vam dati jasno razumijevanje granice između html-a i html-a 5. Osim toga, moći ćete raditi sa stečenim znanjem i rasporediti sve svoje stranice koje već koriste html 5 oznake.
Želim se posvetiti ovu publikaciju rasprava o html 5. S vama ćemo analizirati glavne značajke platforme, nove elemente jezika i njihovu razliku od starih, a također ćemo razmotriti konkretnim primjerima kodirati. A sad prijeđimo na sam sok!
Glavni zapovjednik za označavanje stranice, poznati html
Nakon čitanja, kao i drugih izvora informatičkih tema, mislim da vas mogu sa sigurnošću nazvati "guruima-majstori". Uostalom, neće vam biti teško reći što je html jezik i zašto je nastao. super ste!
Početnici u ovom području znanja ne bi trebali brinuti. Posebno ću ponoviti glavne definicije.
Dakle, prije svega, zapamtite to html je jezik za označavanje hiperteksta, t.j. tekst, koji sadrži međusobno povezane elemente teksta, videa, audio i grafički formati. Ovaj alat neophodan za projektiranje strukture web-mjesta, oblikovanje izgleda stranica i određivanje položaja objekata na njima.
Jezične oznake koriste se za upravljanje sadržajem web-mjesta. Što znači "oznaka" i čemu služi?
Označiti- ovo je jedinica označnog jezika koja pomaže u postavljanju određenog prikaza na stranici web-mjesta određeni objekt, kao i navođenje njegove vrste (link, slika itd.).
Elementi jezika su pojedinačni i spremnici (obično se nazivaju i parovi). Razlikuju se samo po tome što upareni mogu sadržavati druge elemente u sebi: oznake ili tekst.
Svaki element web jezika o kojem se raspravlja ima svoj skup atributa. “Još jedan termin? A čemu on služi? - pitaš. Jao, nema terminologije.
Atributi potrebni su za proširenje raspona mogućnosti jedne oznake, kao i za fleksibilnije upravljanje izgled posude. Naravno, elementi označnog jezika mogu lako postojati bez definiranja atributa. Zatim će ih postaviti na zadano formatiranje.
U nastavku sam priložio tablicu s primjerima uparenih i pojedinačnih uobičajenih html oznaka s njihovim najčešće korištenim atributima. Nažalost, teško je dati potpuni popis atributa, previše ih je. Da biste to učinili, bolje je pogledati jezične specifikacije.
Pojedinačne oznake | |
U ovaj primjer predstavljen singl meta oznaka, koji sadrži informacije koje se ne prikazuju u pregledniku. Skup znakova, naziv i sadržaj su atributi elementa, odgovorni za kodiranje dokumenta, naziv meta oznake i postavljanje vrijednosti prethodno navedene u nazivu. | |
![]() |
Oznaka je odgovorna za prikaz grafičke datoteke na stranicama web resursa. Atribut src specificira put do same slike, width specificira širinu objekta, a visina specificira visinu, alt je dizajniran za prikaz alternativnog teksta ako se slika ne može učitati. |
Uparene oznake | |
Kako kuhati tepsiju? | Oznaka stvara sidro (tj. vezu). href specificira adresu datoteke na koju će se dogoditi prijelaz, cilj specificira kako će se točno učitati otvori link(u ovom primjeru otvorit će se u novoj kartici), title je odgovoran za opis alata kada se lebdi iznad sidra. |
Bliski srodnik html jezika
Kao što je već spomenuto u mojim prethodnim člancima, nemojte brkati html i html 5. Html 5, iako je u nekom smislu "relativan" html-u, potpuno je nova platforma, čiji je glavni zadatak podržavati audio i video datoteke, animacije, prikaz geolokacije i još mnogo toga.
Ova specifikacija oprema web stranice novim značajkama i govori DOM-u ( objektni model dokument) o prisutnosti novih objekata na njemu. To ubrzava učitavanje stranice i olakšava preglednicima.
Velika prednost za programere je da s pojavom html 5 ništa ne treba ponovno učiti. Podržava sve html 4 oznake i popunjava ih modernim. Ovome ću dodati još jednu pozitivnu činjenicu. Pojavom elemenata kao što su
A sada želim navesti glavne oznake specifikacije, koje uključuju članak, stranu i druge, te također opisati za što su stvorene.
Semantičke oznake
Pojavom html 5 platforme pojavile su se i semantičke oznake. Sada ću jednostavno objasniti što je to.
Prije pisanja web servisa s korisničkim sučeljem i isticanjem zaglavlja web-mjesta, njegovog glavnog dijela i “podnožja” (mjesto na dnu stranice za dodatne informacije ili atribuciju), korišten je blok raspored pomoću divova.
Možda je to s jedne strane bilo zgodno za programere, ali tražilicama, kao i preglednicima, bilo je teško. Stoga je pronađeno rješenje u obliku semantičkih oznaka.
Ovi elementi samo standardiziraju osnovne jedinice stranice s istim nazivima oznaka za sve resurse. To uključuje
Za asimilaciju gradiva želim da isprobate praktični primjer:
Blog za IT ljude
Naslov posta
Tekst prvog članka
Omiljeni bloger s autorskim pravima
Ovaj primjer pokazuje praktičnost strukturiranja koda pomoću html 5. Želio bih napomenuti da danas programeri koji poštuju sebe koriste specifikaciju html 5 i css3 u svojim web resursima. Oni poboljšavaju interakciju preglednika s
HTML5 uvodi nekoliko novih oznaka za strukturu koda: