Kako postaviti pametne telefone i računala. Informativni portal
  • Dom
  • vijesti
  • Strukturne html5 oznake. Referenca za HTML oznaku

Strukturne html5 oznake. Referenca za HTML oznaku

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:

  1. 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: , <title> , <TiTlE>- ovi su pravopisi točni i ekvivalentni.</li> <li>html5 kombinira dva <a href="https://bumotors.ru/hr/kak-napisat-fail-index-html-kak-sozdat-html-stranicu-poshagovaya-instrukciya.html">html tehnologije</a> i xhtml, kao rezultat toga, mogućnost mješovitih pravila kodiranja je eliminirana. Ako je ranije bilo moguće susresti pisanje neuparenih oznaka: <br> <meta charset="utf-8"/>tako <meta charset="utf-8"> <br> <br/>tako</br> <br>zatim u html5 standardu <a href="https://bumotors.ru/hr/mezhdunarodnaya-akciya-zolotoi-e-mail-podrobnyi-otzyv-pravilnoe.html">ispravan pravopis</a> je: <br> <meta charset="utf-8"> <br></li> </ol><h2>Promjene oznaka: zastarjeli i prilagođeni elementi</h2> <p>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.</p> <h3>Hiperveza</h3> <p><h1>Primjer</h1></p> <p>što je u prethodnim standardima uzrokovalo pogreške jer <a href="https://bumotors.ru/hr/blochnye-i-strochnye-tegi-html---strochnye-i-blochnye-elementy-kak.html">inline element</a> omotani blok, valjan u HTML5.</p> <p><i>Jedan od naj <a href="https://bumotors.ru/hr/samye-populyarnye-voprosy-alise-pochemu-alisa-aktiviruetsya-kogda-ee-ne.html">popularna pitanja</a> početnici slagači je: " <b>Kako napraviti hipervezu na <a href="https://bumotors.ru/hr/osnovy-css-vyravnivanie-shrifta-i-probely-vyravnivanie-blokov-div-po-centru-css.html">div blok</a>? </b>". I najčešće odgovarao: "Koristite JS". Kao što možete vidjeti iz primjera, u HTML5 možete jednostavno staviti potrebne blokove unutar hiperveze.</i></p> <h3>oznake <b>I <i></h3> <p>Oznake se vraćaju u HTML 5 <b>(podebljava font) i <i>(kurziv). U modernoj interpretaciji, ove oznake služe samo za vizualni dizajn i ne nose semantičko opterećenje.</p> <h3>mala oznaka</h3> <p>Označiti <small>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 <a href="https://bumotors.ru/hr/kak-otkryt-nevidimyi-brauzer-rezhim-inkognito-v-razlichnyh.html">različitim preglednicima</a> dovelo do pomaka ovog elementa <a href="https://bumotors.ru/hr/chto-takoe-teg-span-opisanie-tega-span-html-chto-eto-kak-polzovatsya.html">span tag</a>što je mnogo prikladnije za korištenje.</p> <p>U <b>HTML5</b> označiti <small>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 <a href="https://bumotors.ru/hr/cifrovoe-efirnoe-televidenie-kak-nastroit-antennu-pri.html">raznim uvjetima</a> dionice. Vizualno također smanjuje veličinu fonta teksta koji se prelama.</p> <h3>adresna oznaka</h3> <p>Za razliku od <a href="https://bumotors.ru/hr/ustanovit-prezhnyuyu-versiyu-vindovs-7-kak-vernut-failu-prezhnyuyu.html">prethodne verzije</a> 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).</p> <p>Kao što je već spomenuto, unutar <a href="https://bumotors.ru/hr/vosstanovlenie-failov-na-telefone-samsung-android-vosstanovlenie-dannyh.html">ovu lekciju</a> nemoguće je razmotriti sve promjene u oznakama, gore smo razmotrili prilagođene oznake, sada ćemo navesti zastarjele:</p> <ul><li><applet> , <object>zamijenjen oznakom <embed>(koristi se za ubrizgavanje objekata);</li> <li><acronym>- zamijenjeno oznakom <abbr>(koristi se za kratice);</li> <li><bgsound>- zamijenjeno oznakom <audio>(za ugradnju playera na stranicu);</li> <li><frame>- zamijenjen sa <iframe> ;</li> <li><listing> , <xmp>- promijenjeno u oznake <pre>I <code>(za umetanje popisa programa i kodova);</li> <li><plaintext>- zamijenjen sa <pre></li> </ul><p>Svojstva oblikovanja teksta <big> , <center> , <font> , <u>- uklonjeno, umjesto toga treba koristiti CSS za oblikovanje.</p> <p><i>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.</i></p> <p>HTML 5 i CSS 3 dodali su ogroman broj novih oznaka i svojstava u izgled. Provjerite mogućnosti animacije s novim svojstvima CSS 3.</p> <p>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.</p> <p>Čitanje članka će vam dati <a href="https://bumotors.ru/hr/abonentskii-dogovor-trikolor-tv-obrazec-i-vot-svershilos.html">jasno razumijevanje</a> 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.</p> <p>Želim se posvetiti <a href="https://bumotors.ru/hr/1s-zup-3-vygruzka-v-buhgalteriyu-publikacii-vygruzka-dannyh-iz.html">ovu publikaciju</a> 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 <a href="https://bumotors.ru/hr/zapret-indeksacii-robots-txt-skrytie-ssylok-s-pomoshchyu-skriptov.html">konkretnim primjerima</a> kodirati. A sad prijeđimo na sam sok!</p> <h2>Glavni zapovjednik za označavanje stranice, poznati html</h2> <p>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!</p> <p>Početnici u ovom području znanja ne bi trebali brinuti. Posebno ću ponoviti glavne definicije.</p> <blockquote> <p>Dakle, prije svega, zapamtite to <b>html</b> je jezik za označavanje hiperteksta, t.j. tekst, koji sadrži međusobno povezane elemente teksta, videa, audio i <a href="https://bumotors.ru/hr/kakoe-rasshirenie-mozhet-imet-rastrovoe-graficheskoe-izobrazhenie-kakie-formaty.html">grafički formati</a>. <a href="https://bumotors.ru/hr/programma-dlya-skrytiya-papok-i-failov-zashchita-papok-i-failov-obzor.html">Ovaj alat</a> neophodan za projektiranje strukture web-mjesta, oblikovanje izgleda stranica i određivanje položaja objekata na njima.</p> </blockquote> <p>Jezične oznake koriste se za upravljanje sadržajem web-mjesta. Što znači "oznaka" i čemu služi?</p> <blockquote> <p><b>Označiti</b>- ovo je jedinica označnog jezika koja pomaže u postavljanju određenog prikaza na stranici web-mjesta <a href="https://bumotors.ru/hr/privet-student-model-obekt---svoistvo---otnoshenie-vybor-konkretnoi.html">određeni objekt</a>, kao i navođenje njegove vrste (link, slika itd.).</p> </blockquote> <p>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.</p> <p>Svaki element web jezika o kojem se raspravlja ima svoj skup atributa. “Još jedan termin? A čemu on služi? - pitaš. Jao, nema terminologije.</p> <p><b>Atributi</b> potrebni su za proširenje raspona mogućnosti jedne oznake, kao i za fleksibilnije upravljanje <a href="https://bumotors.ru/hr/mozhno-li-ispolzovat-linux-v-ofise-ne-narushaya-zakon-lichnyi-opyt-vneshnii-vid.html">izgled</a> posude. Naravno, elementi označnog jezika mogu lako postojati bez definiranja atributa. Zatim će ih postaviti na zadano formatiranje.</p><p>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. <br></p><table><tbody><tr><td colspan="2" width="779">Pojedinačne oznake</td> </tr><tr><td width="307"><meta charset="utf-8" name = «GENERATOR» content = «Microsoft FrontPage 4.0»> </td> <td width="472">U <a href="https://bumotors.ru/hr/abstraktnyi-tip-dannyh-c-primer-abstraktnyi-tip-dannyh-derevo.html">ovaj primjer</a> predstavljen singl <a href="https://bumotors.ru/hr/kakaya-informaciya-raspolagaetsya-v-tege-meta-chto-takoe-metategi-kak-pravilno.html">meta oznaka</a>, 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.</td> </tr><tr><td width="307"><img src='https://i1.wp.com/image/cars.jpeg' height="450" width="200" loading=lazy loading=lazy> </td> <td width="472">Oznaka je odgovorna za prikaz <a href="https://bumotors.ru/hr/formaty-graficheskih-failov-gif-rasprostranennye-formaty.html">grafičke datoteke</a> 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.</td> </tr><tr><td colspan="2" width="779">Uparene oznake</td> </tr><tr><td width="307"><a href= «tip.html» target="_blank" title="Kliknite na vezu i ona će se otvoriti u novoj kartici">Kako kuhati tepsiju?</a> </td> <td width="472">Oznaka stvara sidro (tj. vezu). href specificira adresu datoteke na koju će se dogoditi prijelaz, cilj specificira kako će se točno učitati <a href="https://bumotors.ru/hr/how-to-open-a-tab-in-a-new-window-organize-configure-and-close-chrome-tabs.html">otvori link</a>(u ovom primjeru otvorit će se u novoj kartici), title je odgovoran za opis alata kada se lebdi iznad sidra.</td> </tr></tbody></table><h2>Bliski srodnik html jezika</h2> <p><img src='https://i2.wp.com/romanchueshov.ru/wp-content/uploads/2016/06/html5-1.jpg' width="100%" loading=lazy loading=lazy></p> <p>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 <a href="https://bumotors.ru/hr/vybiraem-horoshii-smartfon-na-platforme-android-firefox-os-novaya-platforma.html">nova platforma</a>, čiji je glavni zadatak podržavati audio i video datoteke, animacije, prikaz geolokacije i još mnogo toga.</p> <p>Ova specifikacija oprema web stranice novim značajkama i govori DOM-u ( <a href="https://bumotors.ru/hr/modeli-predstavleniya-dannyh-obektno-orientirovannaya-model.html">objektni model</a> dokument) o prisutnosti novih objekata na njemu. To ubrzava učitavanje stranice i olakšava preglednicima.</p> <p>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 <video>I <audio>, nema potrebe za korištenjem naslijeđenih oznaka podrške za medije. To uključuje: <bgsound>, <dir>, <rb>, <applet>i drugi.</p> <p>A sada želim navesti glavne oznake specifikacije, koje uključuju članak, stranu i druge, te također opisati za što su stvorene.</p> <h2>Semantičke oznake</h2> <p>Pojavom html 5 platforme pojavile su se i semantičke oznake. Sada ću jednostavno objasniti što je to.</p> <p>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.</p> <p>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.</p> <p>Ovi elementi samo standardiziraju osnovne jedinice stranice s istim nazivima oznaka za sve resurse. To uključuje <header>, <footer>I <nav>. <header>odgovoran je za određivanje naslova ili naslova teksta na stranici, <footer>- za "podnožje" na dnu web stranice, i <nav>za navigaciju stranice.</p> <p>Za asimilaciju gradiva želim da isprobate praktični primjer:</p> <p><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Vaša web stranica

    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:

    ,