Izradite HTML5 dokument. Ovo je naslov teksta. LLC Rogovi i kopita

Zadnje ažuriranje: 08.04.2016

Elementi su građevni blokovi koji čine html5 dokument. Da bismo izradili dokument, moramo izraditi jednostavan tekstualna datoteka, i navedite kao ekstenziju datoteke *.html

Kreirajmo tekstualnu datoteku, nazovimo je index i promijenimo joj nastavak u .html.

Zatim otvorite ovu datoteku u bilo kojem uređivaču teksta, na primjer, Notepad++. Dodajte sljedeći tekst u datoteku:

Za izradu HTML5 dokumenta prvo su nam potrebna dva elementa: DOCTYPE i html. doctype element ili vrsta dokumenta Deklaracija govori web pregledniku o kojoj se vrsti dokumenta radi.ukazuje na to ovaj dokument je html dokument i da se koristi html5, a ne html4 ili neka druga verzija jezika za označavanje.

A html element, između svojih početnih i završnih oznaka, sadrži cijeli sadržaj dokumenta.

Iznutra html element možemo postaviti još dva elementa: glavu i tijelo . Element head sadrži metapodatke web stranice - naslov web stranice, vrstu kodiranja itd., kao i veze na vanjski resursi- stilovi, skripte, ako se koriste. Element body zapravo definira sadržaj html stranice.

Sada promijenimo sadržaj datoteke index.html na sljedeći način:

HTML5 dokument

Sadržaj HTML5 dokumenta

Element glave definira dva elementa:

element naslova predstavlja naslov stranice

Meta element specificira meta informacije stranice. Za ispravan prikaz znakova, poželjno je odrediti kodiranje. U u ovom slučaju pomoću atributa charset="utf-8" specificiramo utf-8 kodiranje.

Unutar body elementa postoji samo jedan element - div - koji tvori blok. Sadržaj ovog bloka je jednostavan niz.

Budući da smo odabrali utf-8 kao kodiranje, preglednik će prikazati web stranicu u ovom kodiranju. Međutim, potrebno je da i sam tekst dokumenta odgovara odabranom utf-8 kodiranju. U pravilu, u raznim uređivači teksta Postoje odgovarajuće postavke za postavljanje kodiranja. Na primjer, u Notepad++ trebate otići na izbornik Encodings i odabrati stavku na popisu koji se otvori Pretvori u UTF-8 bez BOM-a:

Nakon toga, moći ćete vidjeti u retku statusa UTF-8 bez BOM-a , što će pokazati da je potrebno kodiranje instalirano.

Spremite i otvorite datoteku index.html u pregledniku:

Tako smo stvorili prvi HTML5 dokument. Pošto smo naznačili u elementu naslov naslov“HTML5 dokument”, onda je to naziv koji će imati kartica preglednika.

Budući da je kodiranje utf-8, web preglednik će ispravno prikazati ćirilične znakove.

I vidjet ćemo sav tekst definiran unutar elementa tijela u glavnom polju preglednika.

Prilikom izrade web stranice prvo što trebate zamisliti je kako je web stranica oblikovana. Ovo je neka vrsta "temelja" u izgradnji web stranice. Stoga je preporučljivo imati barem osnovno znanje o HTML-u prije nego što se upustite u složenije tehnologije izrade web stranica. U ovu lekciju naći ćemo se HTML, idemo to riješiti Struktura HTML dokumenta i dalje praktični primjeri Učvrstimo stečeno znanje.

Što je HTML?

HTML označava HyperText Markup Language. Ovaj jezik je odgovoran za točno kako će hipertekst biti prikazan na stranicama web mjesta. Sada shvatimo što je hipertekst? Nije tajna da jedna web stranica može sadržavati puno različitih vrsta informacija, bilo da se radi o tekstu, nekim tablicama, grafikonima, videima, audio zapisima itd. Dakle, sve te informacije možemo nazvati jednom riječju – hipertekst.

Imajte na umu da je HTML označni jezik, a ne programski jezik. U dati jezik Nema logičke funkcije i na njemu je nemoguće napraviti bilo kakve matematičke proračune. HTML stranice imati nastavak .html ili .htm i obrađuju ih preglednici - IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera itd.

Sada shvatimo kako preglednik razumije što i kako prikazati na web stranici? Vrlo je jednostavno. Označni jezik HTML hipertekst ima ugrađene naredbe, nazivaju se oznake. Na njih je orijentiran preglednik.

Struktura HTML dokumenta

Bilo koje HTML dokument(web stranica) mora imati određenu strukturu. Ovo će izbjeći mogući problemi prilikom otvaranja stranica u preglednicima. Kao primjer, pogledajmo stranicu koja sadrži slijedeći HTML kodirati:

Struktura HTML dokumenta ...

Pogledajmo redom što je uključeno u ovu strukturu:

1. Prvo što ide u HTML dokument je oznaka verzije (prvi redak). Za ispravan rad ovaj redak treba navesti prilikom postavljanja web stranice.

3. Zatim dolazi područje za vrh stranice (zaglavlje). Za to se koristi oznaka . U zaglavlju označavamo naziv naše stranice tako da naslov stranice stavimo između oznaka I. Zatim je naznačeno kodiranje HTML dokumenta (peti red). Ovo se radi kako bi se ćirilica ispravno prikazala. Zatvaranje područja zaglavlja oznakom.

4. Meta oznaka “description” - sažetak stranice, namijenjen tražilicama. Ova oznaka je važna za optimizaciju tražilice i mora se ispuniti.

5. Meta oznaka “ključne riječi” - ključne riječi koje se mogu pojaviti na stranici. Ova oznaka također je namijenjena tražilicama. Ova oznaka se danas rijetko koristi.

6. Tijelo stranice se otvara s oznakom i zatvara se, u skladu s tim, oznakom

. Tijelo web stranice obično sadrži glavni sadržaj - tekst, video, audio i druge informacije.

Tako smo odgovorili na pitanje što je HTML i proučili strukturu HTML dokumenta. Informacije dobivene u ovoj lekciji osnovni su pojmovi, bez njih ne možete. O složenijim stvarima govorit ćemo u drugim lekcijama.

Zdravo! U ovoj lekciji NEĆETE pronaći ništa korisno ako ste VEĆ upoznati s formiranjem strukture HTML dokumenta. Za one koji NISU upoznati, pokazat ću ispravnu (važeću) strukturu HTML web dokumenta, uključujući i WordPress stranicu.

Općenito ispravna struktura HTML dokumenta

Prije svega, bez puno uvoda, opća struktura svakog HTML dokumenta trebala bi biti ovakva:

/*Označava trenutnu vrstu DTD dokumenta*/ /*Pokazuje početak dokumenta*/ /*Pokazuje početak naslova (zaglavlje)*/ Test/*Pokazuje naslov*//*Pokazuje početak naslova*/ /*Pokazuje početak glavnog dijela dokumenta (tijelo)*/ /*Sadržaj dokumenta*/

/*Pokazuje kraj glavnog dijela dokumenta*//*Pokazuje kraj dokumenta*/

Ako uklonite objašnjenja koja sam pokazao nakon svake oznake, tada jednostavna struktura HTML dokumenta izgleda ovako

Test

Trenutačna vrsta DTD dokumenta

Trenutačna vrsta dokumenta ( Definicija vrste dokumenta, DTD) potreban je kako bi preglednik razumio kako interpretirati trenutnu web stranicu, jer HTML jezik postoji u nekoliko verzija.

Osim toga, postoje i drugi označni jezici osim HTML-a, kao što je XHTML.

Bilješka: XHTML je EXtensible HyperText Markup Language, što prevodimo kao prošireni hipertekstualni označni jezik.

XHTML je sličan HTML-u, ali je sintaksa drugačija. Kako biste spriječili brkanje preglednika među jezicima, morate ga prikazati u prvom retku koda, tip trenutnog dokumenta je DOCTYPE.

Koncept oznake u HTML-u

Jeste li primijetili da je cijela struktura HTML dokumenta određena određenim oznakama - određenim riječima u uglastim zagradama.

Riječ u uglastim zagradama u HTML dokumentu naziva se oznaka. Svaka oznaka ima svoje značenje, određeno pravilima označavanja.

Tag označava naslov html dokumenta. Head oznake pohranjuju informacije za preglednike i tražilice. Uključujući u obliku meta oznaka;
Tag označava glavni sadržaj html dokumenta. Odnosno tekst, slike, Java Script skripte itd.;
Oznaka [p] je blok element i uvijek počinje u novom retku. To znači odlomak glavnog sadržaja html dokumenta.

Važno! Sve HTML oznake moraju biti uparene. Odnosno, početna oznaka<тег>, mora se zatvoriti završnom oznakom s kosom crtom .

Oznake naslova i podnaslova h1-h6

Za poboljšanje strukturiranja teksta dokumenta, kao i za poboljšanje SEO-a web stranica, postoje dodatne oznake sadržaja tijela. Zovu se oznake naslova i podnaslova od h1 do h6, ukupno 6.

One, baš kao i oznake [p]-odlomaka, koje vam omogućuju da istaknete semantičke dijelove teksta, omogućuju vam da podijelite tekst na semantičke dijelove, dajući svakom odjeljku vlastiti naslov.

Oznake h1—h6 imaju podređenu ovisnost, niža razina ove podređenosti je paragraf.

Važno je napomenuti da prekidanje podređene ovisnosti oznaka h1—h6—str neće poremetiti prikaz i valjanost dokumenta, već će samo pogoršati njegovu optimizaciju za tražilice.

Primjer razvijene strukture HTML dokumenta

Dopustite mi da vam dam akademski primjer razvijenije strukture HTML dokumenta:

Test

Glavni naslov

Prvi podnaslov

Glavni naslov

Drugi podnaslov

Prvi manji podnaslov

HTML 5 struktura

U HTML 5, struktura dokumenta bi trebala biti ovakva:

Ovo je izjava koja pokazuje da je ovaj dokument u HTML5;

ovo je korijenski element HTML stranice;

Element s meta oznakama o dokumentu;

Ovaj element definira naslov za dokument;</p><p><body>Ovaj element sadrži vidljivi sadržaj stranice;</p><p><h1>Element definira veliki naslov</p><p><p>Element definira odlomak.</p><p>H2 - h6 oznake rade u html5</p><p><i>Sve oznake su dvostruke. Početna oznaka se naziva početna oznaka, a završna oznaka se naziva završna oznaka.</i></p><h2>HTML označavanje na WordPress stranici</h2><p>Unatoč činjenici da je WordPress skripta napisana u PHP-u, sve datoteke stranice, odnosno sve datoteke radnog predloška stranice, imaju html oznake. Pogledajmo primjer u datoteci header.php predloška <b>Dvadeset sedamnaest</b>:</p><p> <?php ?><!DOCTYPE html> <html <?php language_attributes(); ?>class="no-js no-svg"> <head> <meta charset="<?php bloginfo("charset"); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="page" class="site"> <?php _e("Skip to content", "twentyseventeen"); ?> <header id="masthead" class="site-header" role="banner"> <?php get_template_part("template-parts/header/header", "image"); ?> <?php if (has_nav_menu("top")) : ?> <div class="navigation-top"> <div class="wrap"> <?php get_template_part("template-parts/navigation/navigation", "top"); ?> </div> </div> <?php endif; ?> </header> <?php if ((is_single() || (is_page() && ! twentyseventeen_is_frontpage())) && has_post_thumbnail(get_queried_object_id())) : echo "<div class="single-featured-image-header">"; echo get_the_post_thumbnail(get_queried_object_id(), "twentyseventeen-featured-image"); echo "</div>"; endif; ?> <div class="site-content-contain"> <div id="content" class="site-content"> </p><p>To možete vidjeti ako su sve WordPress funkcije smještene u klasično HTML označavanje. Postoji vrsta dokumenta:<!DOCTYPE html></p><p>Uparene oznake,</p><p>Oznaka za otvaranje.</p><p>Završna oznaka se nalazi u datoteci footer.php.</p><h2>Kako vidjeti HTML kod stranice WordPress stranice</h2><p>Ono što pišete u uređivaču stranice, stvarajući članke ili stranice, samo je dio HTML stranice stranice. Ovo čak nije ni cijeli dio stranice.</p><p>Za pregled HTML koda stranice WordPress stranice, a to je vrlo često potrebno, trebate:</p><p>Otvorite stranicu u pregledniku;</p><p>Prebacite se na engleski font tipkovnice;</p><p>Pritisnite sljedeće gumbe:</p><ul><li>Chrome: Ctrl+U</li><li>Opera: Ctrl+U</li><li>Mozilla: Ctrl+U</li> </ul><p>Možda još ne znate zašto je to potrebno. Vjerujte mi, ovo će vam trebati više puta za analizu vaše web stranice i možda web stranica konkurencije.</p><h2>Zaključak</h2><p>Zaključno, htio sam izvući zaključak, ali jedino što mi pada na pamet je da se članak pokazao potpuno za početnike. Na prvi pogled postoji velika razlika između primjera koda članka i primjera sa stvarnih stranica. Međutim, sve datoteke imaju istu strukturu HTML dokumenta i iznimno je važno ne narušiti ovu strukturu pri radu sa web mjestom.</p> <p>Danas ćemo govoriti o semantici u HTML5. Već sam napisao kratku recenziju o . Preporučujem da se upoznate s njim prije čitanja ovog članka. Sada ćemo detaljnije razmotriti ovo pitanje, o tome kako ispravno i kompetentno sastaviti semantičku strukturu HTML5 dokumenta.</p><p>U ovom ćemo članku postupno izraditi HTML stranicu i ukrasiti je semantičkim HTML5 oznakama.</p><p><img src='https://i0.wp.com/rightblog.ru/wp-content/uploads/2015/09/HTML5-semantin-infografic_rightblog.ru_.png' width="100%" loading=lazy loading=lazy></p><p>Slika - Semantička struktura za HTML5 stranicu.</p><h3>DOCTYPE i meta oznake u naslovu stranice</h3><p>Počnimo sa standardnim predloškom HTML5 dokumenta i dodamo meta oznake u glavu:</p><p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Naslov stranice

Dodao sam oznaku koji je odgovoran za ključne riječi. I označiti koji je odgovoran za opis stranice. Ove su oznake potrebne za SEO optimizaciju. Također je potrebno ispravno ispuniti oznaku . Naslov stranice mora biti jedinstven za cijelu stranicu, te u naslovu sadržavati cjelokupnu bit stranice za koju je navedena.</p><p>Idemo dalje. HTML5 uvodi nove oznake koje se koriste za stvaranje semantičkog označavanja u dokumentu. To su oznake zaglavlje, navigacija, glavna, članak, aside, podnožje itd. Što se tiče prikaza, rade isto kao i obični. <div>oznake, odnosno to su blok elementi. Ali ako <div>nema semantičko opterećenje, tada se zaglavlje, nav, glavno i drugi trebaju koristiti samo smisleno.</p><h3>Naslov stranice</h3><p>Zaglavlje stranice formatirano je u oznaci zaglavlja. Imajte na umu da je naslov stranice napisan pomoću oznake h1.</p><p>  <header> <h1>Naslov stranice</h1> </header> </p><p>Ako uz naslov imamo i slogan, onda ga stavljamo u p, div ili span.</p><p>  <header> <h1>Naslov stranice</h1> <p>slogan stranice</p> </header> </p><p><b>Napomena o oznaci H1</b></p><p>Treba napomenuti da se u HTML5 oznaka H1 koristi za označavanje naslova spremnika u kojem se nalazi (to može biti zaglavlje, odjeljak, članak itd.)</p><p>Prije pojave HTML5 oznaka, semantika je bila nešto drugačija i drukčija. Dakle, u HTML4 može postojati samo jedan H1 naslov po stranici! U pravilu je to bio naslov članka ili naslov stranice (npr. ako se radi o stranici kategorije na kojoj je prikazano više članaka). H2 je korišten za podnaslove, odnosno za dijelove glavnog članka. H3 za podsekcije i tako dalje.</p><h3>Navigacija po stranici</h3><p>Dizajn glavne navigacije stranice trebao bi biti sadržan u nav oznaci. Također biste trebali zapamtiti da se smatra dobrom praksom dizajnirati navigaciju s elementima popisa.</p><p>  <nav> <ul> <li>Dom</li> <li>Portfelj</li> <li>Galerija</li> <li>Kontakti</li> </ul> </nav> </p><h3>Sadržaj na stranici</h3><p>Glavni sadržaj stranice formatiran je u glavnoj oznaci. To može biti jedan članak ili nekoliko pregleda članaka ako govorimo o stranici bloga s nekoliko unosa. Ne možete postaviti bočnu traku, zaglavlje stranice, podnožje ili glavnu navigaciju u glavnu oznaku!</p><p>  <main>...sadržaj glavne stranice...</main> </p><h3>Dizajn artikla</h3><p>Oznaka članka koristi se za omotavanje članaka. Općenito, ova oznaka sadrži blok sadržaja koji se može izvaditi iz konteksta stranice i zasebno koristiti negdje drugdje. To može biti članak (cijeli tekst članka ili pregled), objava na forumu itd.</p><p>U donjem primjeru prikazao sam dizajn članka u kontekstu, unutar glavne oznake. Članak ima blok zaglavlja s naslovom članka. Datum objave članka određen je posebnom vremenskom oznakom koja se prikazuje kao obični inline element. Vremenska oznaka ima poseban atribut u kojem se mora navesti vrijeme objave u strojnom formatu. To može biti samo datetime="2015-09-30" ili sa satima minutama i sekundama datetime="2015-09-30T15:25:55" . Parametar pubdate označava da je članak objavljen u isto vrijeme kad je i napisan. Ako je ovo vijest, onda je moguće da je vrijeme vijesti jedno, a vrijeme objavljivanja različito, za to morate dvaput navesti vremensku oznaku i staviti pubdate samo u oznaku gdje je naznačeno vrijeme objave.</p><p> <main> ...  <article>  <header>  <h1>Naslov članka</h1>  <time datetime="2015-09-30T15:25:55" pubdate>30. rujna</time> </header>  <h2>Podnaslov članka</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p><p>Iz gornjeg primjera možete vidjeti da su oznake zaglavlja i podnožja korištene unutar članka za isticanje naslova i podnožja članka.</p><h3>Bočna traka ili stupac s widgetima</h3><p>Za svaki pojedinačni element bočne trake koristimo bočni blok. Unutar njega, naslov je oblikovan s oznakom h1. Dakle, stupac na bočnoj traci može izgledati ovako:</p><p>  <div class="sidebar">  <aside> <h1>Naslov widgeta</h1> ... </aside>  <aside> <h1>Posljednje bilješke</h1> ... </aside>  <aside> <h1>Popularni komentari</h1> ... </aside> </div> </p><h3>Oznaka odjeljka</h3><p>Oznaka odjeljka koristi se za predstavljanje grupe ili odjeljka tematski povezanog sadržaja. Njegova je upotreba slična onoj u članku s glavnom razlikom što sadržaj unutar elementa ne smije imati nikakvo značenje <section>izvan konteksta same stranice. Preporučljivo je koristiti oznake ( <h1> – <h6>) za označavanje teme odjeljka.</p><p>Da biste dali primjer članka koji sada čitate, mogli biste svaki odlomak zamotati u oznaku <section>. Na primjer, oznaka odjeljka može se koristiti za isticanje blokova sadržaja na odredišnoj stranici. Ovo zvuči slično definiciji div elementa, koji se često koristi kao spremnik za sadržaj. Razlika je u tome što div nema semantičko značenje i ne govori ništa o sadržaju unutar njega. Oznaka odjeljka, naprotiv, koristi se za jasno označavanje da je sadržaj unutar nje povezan po značenju. Neke od svojih div oznaka možete zamijeniti oznakama odjeljaka, ali uvijek si postavite pitanje: "Je li ovaj sadržaj povezan ili ne?"</p><p>Primjer korištenja oznake odjeljka na popisu gradova:</p><p> <h1>Odvojeni događaj</h1> <section> <header> <h2>Gradovi</h2> </header> <p>Pridružite nam se u ovim gradovima 2010.</p> <section> <header> <h3>Seattle</h3> </header> <p>Slijedite cestu od žute cigle.</p> <section> <header> <h3>Boston</h3> </header> <p>To je Beantown za svoje prijatelje.</p> <section> <header> <h3>Minneapolis</h3> </header> <p>To je tako <em>Lijepo</em>.</p> <small>Smještaj nije osiguran.</small> </p><h3>Podnožje stranice - Footer</h3><p>Podnožje stranice dizajnirano je s oznakom <footer></p><p>  <footer> <p class="copyright">© 2015 stranica Autorska prava</p> </footer> </p><h3>Zaključak</h3><p>Za provjeru strukture stranice možete upotrijebiti alat HTML5 Outliner. Prikazuje strukturu stranice po blokovima i naslovima.</p><p>Semantika u HTML5 nije ograničena na oznake navedene iznad u članku. No pomoću gornjih primjera možete osvježiti svoje oznake i učiniti svoju web-lokaciju prilagođenijom tražilicama, što će rezultirati višim rangom vaše web-lokacije u rezultatima pretraživanja.</p><p>Da biste nastavili ovu temu, možete istražiti druge nove HTML5 oznake. Kao i mikro formate za dizajniranje i strukturiranje podataka, kao što je schema.org</p><p><b>Važna napomena o korištenju HTML5 oznaka.</b> Specifikacija ne navodi stroga pravila za korištenje semantičkih oznaka, ona samo daje preporuke za njihovu upotrebu. Ako ne razumijete ili ne znate gdje i koju HTML5 oznaku koristiti, bolje je koristiti div kako ne biste oštetili ili pokvarili strukturu dokumenta.</p><p><b>Članci i materijali</b></p> <p>Sada smo spremni zaprljati ruke tintom. Osjećajte se poput dizajnera prijeloma u tiskari iz sredine 20. stoljeća. Ritmična buka tiskarskih strojeva, miris svježeg tiska, klikovi mjedenih slova koja se guraju na svoje mjesto. Velike role netaknutog novinskog papira, čekaju da dobiju dio informacija o nakladi. A vi, sjedeći za strojem za slaganje, postavite informacijski blok na pravo mjesto...</p> <p>Dobro je da su se ovoga dosjetili kompjuteri. Možete stvoriti pravu atmosferu za sebe da počnete stvarati u mirnom okruženju. Zapravo, to je ono što ćemo sada učiniti.</p> <p>Za dovršenje zadataka koji će vam trebati (bit će razloga za nadogradnju):</p> <p>Ako ste zainteresirani, možete provjeriti koliko vaš web preglednik podržava standard <b>HTML5</b>. Pratite poveznicu http://html5test.com, tamo ćete vidjeti bodove čiji je zbroj formiran brojem podržanih bodova iz standarda. U vrijeme pisanja, na mom računalu (Ubuntu10.10), Opera11.10 je postigla 258 bodova, a FireFox4 samo 240. Pitam se što vi imate?</p> <p><i>U ovom vodiču mi:</i></p> <ul><li>S vama ćemo izraditi stranicu prema HTML5 standardu</li> <li>upotrijebimo nove semantičke elemente,</li> <li>crtajmo malo,</li> <li>Provjerimo kako je video prikazan na našoj stranici,</li> <li>Provjerimo rad novih elemenata obrasca.</li> </ul><p>Za rad će nam biti dovoljno stvoriti jedan <b>HTML datoteka</b> <i>index.html</i> i jedan <b>CSS datoteka</b> <i>stilovi.css</i>. Skripte će se pojaviti na stranici dok izvršavate zadatke, pa budite spremni da će vas preglednik upozoriti na to. Morat ćete dopustiti pokretanje skripti na stranici.</p> <h2>Priprema okvira stranice</h2> <p>Preglednik mora poznavati stranicu iz viđenja! Ako mu ne kažete tko je ona i odakle je, on će uključiti način kompatibilnosti, a vi ćete morati pogađati "kako će vaša riječ reagirati" u pregledniku klijenta. Da se to ne bi dogodilo, trebate zapisati ispravnu vrstu dokumenta koja odgovara šifri stranice na samom početku stranice.</p> <p>Navodno, čuvši molbe dizajnera izgleda, dečki iz <b>W3C</b> sažalio se i napravio kratku oznaku za HTML5 standard<!DOCTYPE HTML>. Svaka web stranica koja podržava najnoviji standard mora započeti s njim. Sjećate li se kako je bilo prije... <i>javnost</i> … <i>prijelazni</i> ili <i>strog</i>... također adresu datoteke opisa vrste dokumenta, koja je jako duga.</p> <p>Započnimo. Napravite mapu na radnoj površini, sadržavat će naš slatki par HTML i CSS datoteka. Napravite jednostavnu tekstualnu datoteku index.html, u utf-8 kodiranju. Ovo kodiranje znakova dugo je bilo standard za sve neengleske tekstove.</p> <p>U prvom redu pišemo vrstu dokumenta. <br>Drugo, otvaramo glavnu oznaku cijelog html dokumenta i specificiramo parametar lang, upisujući tamo osnovni jezik stranice - ruski. <br>Prijeđimo na naslov. <br>Prvo što ćemo navesti je kodiranje znakova dokumenta. <br>Zatim naslov za prozor preglednika. <br>Zatim, bez oklijevanja, spojit ćemo datoteku stila. <br>Na kraju, dodajmo prazan spremnik tijela dokumenta.</p> <p>Sve što smo ovdje opisali nalazi se u popisu br. 1:</p> <p><b>Ispis 1. Osnovna struktura HTML5 dokumenta</b></p><p> <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Investitori vide budućnost

Imajte na umu da većina oznaka sada nije tako dugačka kao prije. Tegu ništa više nije potrebno osim jezik. Za meta oznaku samo napišite skup znakova. Također, za oznaku veza nije potrebno specificirati tip.

Framework je spreman, ali je prerano za prikaz stranice u pregledniku. Prijeđimo na semantičke elemente stranice.

Označavanje sadržaja

Postavimo semantičke blokove na okvir

Budimo sada precizniji o tome što ćemo imati na stranici. Poći ćemo od sljedećeg: trebamo maksimalno iskoristiti nove semantičke elemente HTML5.

Naša stranica služit će za prikaz cjelovitog teksta vijesti o tvrtki kojoj je stranica posvećena. Prijelaz na njega dogodit će se ili s glavne stranice na kojoj su objavljene najnovije vijesti ili iz arhive vijesti.

Stavimo blokove u posudu

. Pridržavat ćemo se sljedećeg slijeda ovih elemenata:

- Zaglavlje
– – hgrupa
– nav
– članak
- - Zaglavlje
– – “sadržaj”
– – odjeljak
- - - Zaglavlje
– – – „sadržaj”
– podnožje

Na početku ćemo imati blok - naslov stranice. sa skupinom naslova koji govore o mjestu. Zatim semantički blok za izbornik. Učinimo veze u izborniku fiktivnima. Nakon toga počinje članak, označen odgovarajućim semantičkim blokom. Sadrži blok zaglavlja za bilježenje naslova članka i datuma objave. Slijedi sadržaj članka kojemu su dodani vlastiti zaključci autora koji je vijest napisao. Ovaj je dodatak dizajniran kao odjeljak i također ga prati blok naslova i sadržaj. Na kraju stranice nalazi se blok podnožje, u kojem ćemo objavljivati dodatne informacije o sadržaju naših stranica.

Sve što smo ovdje opisali prikazano je u Listingu br. 2. Ne dajemo puni kod stranice, već samo ono što bi trebalo biti između oznaka …

.

Ispis 2. Postavljanje HTML5 semantičkih blokova

LLC Rogovi i kopita

Cijeli tekst vijesti

26. travnja

Investitori vide budućnost

Ništa ne sprječava ljude da koriste rogove zečice. Međutim, on nema kopita.

Što javnost misli

U stvarnosti postoji samo Ubuntu s tako čudnim imenom "Harelope".

Sada se stranica može vidjeti u pregledniku. Međutim, i dalje izgleda neprivlačno. Ali nije uzalud što smo se već pobrinuli i uključili datoteku sa stilovima.

Obojimo fasadu

Naša stranica i dalje izgleda dosadno i neprivlačno. Idemo je našminkati. Implementirajmo ga u našu stilsku datoteku stilovi.css Prvo što ćemo učiniti je odlučiti se za font za cijeli dokument. Ako netko ne zna, recimo da je provedeno istraživanje koji se font bolje percipira s ekrana monitora i pokazalo se da je to onaj koji nema serifa. Ti se fontovi nazivaju sans-serif- bez serifa. To uključuje, na primjer: Arial, Helvetica, Verdana. Idemo dalje, redom ćemo odrediti pravila za dizajn svih elemenata naše stranice. Kako ne bismo previše pretjerivali, upotrijebimo za sada nekoliko značajki - sjene i zaobljene rubove na blokovima.

Većina onoga što ćemo ovdje kodirati bila je dostupna u ranim CSS standardima. Navest ćemo nove značajke.

kutija-sjena
Ovaj je parametar naveden za element blok stranice i stvara sjenu oko njega. Prva četiri broja su linearni parametri sjene; odnosno, naznačeni su u pikselima px, ili druge linearne jedinice ( em, točka), ili bez njih, u slučaju nulte veličine. Prvi broj označava horizontalno bacanje sjene udesno, ako želite da je bacate ulijevo, stavite negativan broj. Sljedeći je okomito prema dolje; da biste ga nadoknadili, stavite negativan broj. Sljedeća je količina zamućenja sjene, zatim širenje sjene. Nakon linearnih dimenzija naznačena je boja sjene, a ako želite unutarnju sjenu onda ključna riječ umetnuti. Ako vam jedna sjena nije dovoljna, onda svoje fantazije o sjeni ostvarite odvojene zarezima.

tekst-sjena
Ovaj je parametar u svojim postavkama sličan prethodnom, jedina razlika je odsutnost raspršene sjene i unutarnje sjene. I nitko vas ne sprječava da maštate o broju sjena, odvojenih zarezima.

rubni radijus (-moz-border-radius, -webkit-border-radius)
Radijus zaokruživanja blokova. Blok može imati četiri kuta, tako da ovaj parametar može imati isti broj elemenata. Navedeno u smjeru kazaljke na satu počevši od gornjeg lijevog kuta. Imena parametara navedenih u zagradama koriste se u preglednicima obitelji Mozilla i na Webkit motoru (Chrome, Safari). Dakle, duplicirajte postavke navedene za pravilo granični radijus također u ovih par parametara.

Dizajn koji smo osmislili i kodirali izgledat će kao što je prikazano u popisu br. 3. Ovaj kod trebate staviti u datoteku stilovi.css.

Ispis 3. CSS za nove HTML5 semantičke elemente

* (obitelj-fontova: Lucida Sans, Arial, Helvetica, sans-serif; ) tijelo (širina: 480px; margina: 0px auto;) header.mainH (-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 3px 5px 0 #AA4400; -moz-box-shadow: 0 3px 5px 0 #AA4400; box-shadow: 0 3px 5px 0 #AA4400; padding: 5px ; text-align: center; ) zaglavlje h1 (veličina fonta: 36px; margina: 0px; ) zaglavlje h2 (veličina fonta: 18px; margina: 0px; boja: #888; stil fonta: kurziv; ) nav ul ( list-style: nijedan; padding: 0px; display: block; clear: right; background-color: #666; padding-left: 4px; height: 24px; -webkit-border-radius: 12px; -moz-border-radius : 12px; border-radius: 12px; ) nav ul li ( display: inline; padding: 0px 20px 5px 10px; height: 24px; border-desno: 1px solid #ccc; ) nav ul li a (boja: #EFD3D3; tekst -dekoracija: nema; veličina fonta: 13px; težina fonta: podebljano; ) nav ul li a:hover (boja: #fff; ) članak > vrijeme zaglavlja (veličina fonta: 14px; prikaz: blok; širina: 26px; ispuna: 2px; poravnanje teksta: središte; boja pozadine: #993333; boja: #fff; font-weight: bold; -moz-border-radius: 6px; -webkit-border-radius: 6px; radijus granice: 6px; plovak: lijevo; margina-dno: 10px; ) članak > vremenski raspon zaglavlja (veličina fonta: 10px; težina fonta: normalna; transformacija teksta: velika slova; ) članak > zaglavlje h1 (veličina fonta: 20px; lebdenje: lijevo; lijevo lijevo: 14px; sjena teksta : 2px 2px 1px #FFFFFF, 2px 2px 5px #888; ) članak > zaglavlje h1 a (boja: #993333; dekoracija teksta: nema; ) članak > zaglavlje odjeljka h1 (veličina fonta: 16px; ) članak p (jasno: oboje; ) podnožje p ( poravnanje teksta: središte; veličina fonta: 12 px; boja: #888; margina na vrhu: 24 px; ) članak > odjeljak ( -moz-border-radius: 6px 0 0 0; -webkit-border -radius:6px 0 0 0; border-radius: 6px 0 0 0; box-shadow: 3px 3px 3px 0 #FFAA88 inset; padding: 5px; color: #665588; margin-top: 40px; )

Ako sada otvorite svoju index stranicu, neće izgledati tako dosadno, pogledajte sliku 1. U usporedbi s prethodnim prikazom, bit će jednostavno SUPER

Slika 1. Pogled na stiliziranu stranicu

Ako stranica izgleda drugačije, to znači da ste je otvorili u pogrešnom pregledniku. Pod "pogrešnim" mislim na preglednik koji nije Mozilla4+, Chrome11.0+, Opera11.10+, oni prikazuju stranicu na isti način - testirano.

Napomena: Ako netko ne razumije unose pravila u popisu, na primjer, ne razumijete zašto trebate koristiti > u selektoru? Zatim napišite svoja pitanja u komentarima.