XHTML je vhodný pre učenie a vývoj správneho štýlu rozloženia vďaka svojim formálnym pravidlám a prísnejšej syntaxe v porovnaní s HTML. Za desať rokov, ktoré uplynuli od vydania XHTML, však zastaral a prestal vyhovovať moderným podmienkam. Najmä neexistujú štandardné nástroje na prehrávanie zvukových a videoklipov, nechýba podpora geolokácie, možnosť kresliť priamo v prehliadači, chýbajú niektoré prvky formulára a oveľa viac. Niektoré z týchto problémov boli samozrejme už dávno vyriešené prostredníctvom doplnkov prehliadača tretích strán, napríklad Adobe Flash prehráva video, Google Gears implementuje lokálne databázy a na pozadí spúšťa skripty. Programovací jazyk JavaScript umožňuje implementovať na stránke chýbajúcu funkčnosť formulárov a rôznych efektov. Všetky tieto technológie majú ale určité obmedzenia - doplnky je potrebné nainštalovať dodatočne, aj keď nemusia fungovať ako Flash v zariadeniach iPhone a iPad, nie všetko dokáže JavaScript. Popularita mobilných zariadení, vývoj komunikačných kanálov presunula zameranie webových technológií na multimédiá, t.j. prehrávanie streamovaného zvuku a videa, ako aj súvisiacich súborov. V XHTML nič z toho nie je.

W3 Consortium, vývojár špecifikácií HTML a XHTML, začalo pracovať na XHTML 2.0, ktoré by obišlo tieto nedostatky predchádzajúcej verzie. Výsledkom bolo, že tento projekt bol zmrazený a nebol dokončený. Znepokojení pomalým pokrokom založili vývojári prehľadávačov Safari, Firefox a Opera vlastnú organizáciu WHATWG (pracovná skupina pre webovú hypertextovú aplikačnú technológiu), ktorá sa ujala padlého banneru. Myšlienky W3C, moderné potreby používateľov a názory webových vývojárov boli zakomponované do nového značkovacieho jazyka s názvom HTML5.

Malo by sa chápať, že aj keď sú názvy podobné, HTML5 nie je pokračovaním HTML4 alebo XHTML. Hovoríme skôr o novom jazyku Web Applications 1.0, ktorý sa pre marketingové účely nazýva známa skratka a je postavený na vrchole HTML.

Oficiálne štandard HTML5 ešte nie je dokončený, ale moderné prehliadače s ním už čiastočne dokážu pracovať. Čo teda robí HTML5 pre nás? Tu sú niektoré z jeho možností.

• Podpora geolokácie - určenie polohy používateľa na mape a použitie týchto informácií na výpočet trasy jeho pohybu, zobrazenie okolitých obchodov, kín, kaviarní a ďalších údajov.
• Prehrávanie videa.
• Prehrávajte zvukové súbory.
• Lokálne úložisko - umožňuje webom ukladať informácie do miestneho počítača a pristupovať k nim neskôr.
• Výpočet na pozadí je štandardný spôsob spustenia JavaScriptu v prehliadači na pozadí.
• Aplikácie offline sú stránky, ktoré môžu fungovať, keď je odpojený internet.
• Kresba - vo vnútri štítku Pomocou JavaScriptu môžete kresliť tvary, čiary, vytvárať prechody a transformovať objekty za behu.
• Nové prvky formulára: pre dátum, čas, vyhľadávanie, čísla, výber farieb atď.

Okrem týchto funkcií obsahuje kód HTML5 nové značky na označovanie dokumentov, odstránil zastarané značky a upravil niektoré ďalšie. Ak chcete usporiadať webové stránky, musíte najskôr pochopiť, čo sa zmenilo a ako preložiť stránku do formátu HTML5.

Od autora: Odkedy sa na webe začali objavovať články demonštrujúce nové vlastnosti HTML5 a CSS3, napadla ma myšlienka vytvoriť rozloženie stránok bez obrázkov. Vyzbrojený vylepšeniami v HTML5 a CSS3 (oproti ctihodným predchádzajúcim špecifikáciám) nie je príliš ťažké napísať slušne vyzerajúci web, ktorý sa pri svojej značke nemusí spoliehať na obrázky.

Tu je obrázok webu, ktorý budeme kódovať v jazykoch HTML5 a CSS3:

Skôr ako začneme s praktickými krokmi, odporúčam vám pozrieť si ukážkový výsledok práce.

Prvok hlavičky predstavuje úvodnú skupinu alebo navigačné pomôcky.

Na základe ich odporúčania bude prvok hlavičky obsahovať naše logo, podnadpis a hlavnú navigáciu. Keď zadáme prvok hlavičky, hlavičku, máme detail značky, ktorý obsahuje všetky časti stránky, ktoré si intuitívne predstavujeme ako hlavičku. (Alebo všetky podrobnosti o stránke, ktoré budú vnorené do divu s ID názvu.) Element záhlavia je možné na stránke použiť viackrát a znova ho použijeme v prvkoch článku, ktoré budú obsahovať úvod do príspevkov.

Prvok hgroup

Prvý vo vnútri prvku nadpisu je ďalšia nová značka, hgroup. Použijeme ho na zobrazenie loga nášho webu a podnadpisov v značkách h1 a h2.

Prvok hgroup sa používa na zoskupenie sady prvkov h1-h6, keď má nadpis viac úrovní, ako sú napríklad podnadpisy, alternatívne nadpisy alebo podnadpisy.

Prvok hgroup sa môže javiť ako prehnaný, pokiaľ nadpisy nezalomíte obvyklým spôsobom tak, aby mali názov alebo podnázov normálne pozadie alebo štýl. Avšak hgroup hrá v schéme dokumentov dôležitú úlohu. Algoritmus schémy skontroluje vašu stránku a odovzdá štruktúru hlavičky. Pozrite sa na náčrt svojej práce s nástrojom Outliner. Keď algoritmus schémy narazí na prvok hgroup, bude ignorovať všetko okrem nadpisu najvyššej úrovne (zvyčajne h1).

Teraz máme problém: obvodový algoritmus nie je bezchybný alebo úplný. Napríklad nasledujúcim prvkom, o ktorom budeme diskutovať, je navigačný prvok a značky ho označia ako „Bez názvu“. Vývojári značiek boli požiadaní, aby zmenili algoritmus schémy tak, aby predstavoval prvok navigácie ako „Navigácia“. V každom prípade vám prvok hgroup poskytuje spôsob, ako zoskupiť jeho nadpisy, a usporiadať ich tak štrukturálne aj sémanticky.

Nav prvok

Prejdeme k ďalšiemu prvku HTML5 - nav. V navigácii zahrnieme hlavnú navigáciu po stránkach, ktorá je zabalená v neusporiadanom zozname.

Prvok navigácie predstavuje časť stránky, ktorá odkazuje na iné stránky alebo oblasti v rámci stránky: oblasť s navigačnými odkazmi.

Používanie navigácie na vytvorenie hlavnej navigácie na vašom webe je trochu samozrejmosťou, ale okolnosti sú také, že na vašom webe bude viac oblastí odkazov; otázkou je, ktoré z nich by ste mali zabaliť do značky nav. Tu je niekoľko prípadov použitia, ktoré by podľa mňa mohli fungovať:

Súvisiace príspevky.

Podľa špecifikácie to môže alebo nemusí byť vhodné použitie pre navigačný prvok. Špecifikácia nie je veľmi jasná a uvedené príklady nie sú veľmi užitočné. Aj keď špecifikácia nie je konečná a konkrétnejšia, na vývojársku komunitu sa dá spoľahnúť iba pri určení správnej metódy použitia prvku nav.

Prvok článku

Ďalším prvkom, ktorý vám chcem predstaviť, je článok. Hlavná oblasť našej ukážkovej stránky obsahuje tri citáty z príspevkov a každý z nich zabalíme štítkom s článkom.

XHTML

Tu je definícia W3C pre prvok článku:

Prvok článku predstavuje modulárnu kompozíciu [...] v dokumente, takže sa má stať samostatným alebo opakovane použiteľným napríklad v publikácii (publikovanie obsahu na viac webových stránok súčasne).

Tentokrát je špecifikácia jasnejšia a príspevok na blogu (alebo výňatok) je oveľa lepší ( venujte pozornosť zmienke o syndikácii) ide k článku. Na stránku samozrejme môžeme umiestniť veľa prvkov článku.

Určite si všimnete, že sme do článku umiestnili prvky hlavičky a päty. Hlavičku aj pätu je možné na jednej stránke HTML použiť viac ako raz. Keďže hlavička je „úvodná skupina alebo navigačná pomôcka“, zahrnuli sme do nej dátum, názov a počet komentárov. Ďalej tu máme odsek s výňatkom z príspevku, za ktorým nasleduje päta (päta).

Prvok päty

Ako som už uviedol, pätu je možné na tej istej stránke použiť toľkokrát, koľkokrát je potrebné, a predstavuje segment päty stránky v dokumente alebo v časti dokumentu.

Prvok päty predstavuje pätu prístupovej sekcie. Päta zvyčajne obsahuje informácie o jej sekcii, ako napríklad uvedenie zdroja, odkazy na súvisiace dokumenty, dátum autorských práv a ďalšie.

Na našej ukážkovej stránke máme štyri prvky päty: jeden pre každý z troch prvkov článku a spoločná päta pre celú stránku. Päta v prvku článku obsahuje meno autora príspevku, značky a tlačidlo odkazu na úplnú verziu príspevku na blogu.

Spoločná päta obsahuje tri prvky sekcie a poznámku o autorských právach. Obidve použitia prvku päty sú legálne a odporúčajú W3C.

Prvok sekcie

Spoločná oblasť päty našej ukážkovej stránky obsahuje tri prvky sekcie. V nich uvádzame zoznam najpopulárnejších blogových príspevkov, posledných komentárov a krátke biografické údaje o našej fiktívnej spoločnosti.

Element sekcie predstavuje všeobecnú oblasť dokumentu alebo aplikácie. Sekcia je v tomto prípade tematické zoskupenie obsahu, zvyčajne s nadpisom.

Element sekcie je dosť zložitý, pretože sa zdá byť veľmi podobný prvku div v definícii špecifikácie. Spadol som do tejto pasce, keď som začal písať kód na ukážkovú stránku; Do prvku sekcie som umiestnil tri prvky článku. Čoskoro som si uvedomil omyl svojich metód. Jediným spôsobom, ako sa rozhodnúť, či použiť sekciu, je zistiť, či oblasť, ktorú chcete zalomiť elementom sekcie, potrebuje nadpis (nadpis). Ako je zrejmé z definície, prvok sekcie má zvyčajne nadpis.

Ďalšou otázkou, ktorú je užitočné položiť na overenie platnosti použitia prvku sekcie, je: Pridávate ho výlučne pre štýly? Pridáte ju jednoducho preto, lebo chcete túto časť zvýrazniť pomocou JavaScriptu, alebo preto, že do nej chcete vložiť normálny štýl, a musíte namiesto toho použiť prvok div.

Zabalenie troch prvkov článku našej ukážkovej stránky do značky sekcie by bolo oprávnené, ak by sekcia obsahovala nadpis ako „Posledné blogové príspevky“. Malo by to zmysel; v opačnom prípade značka, v ktorej sú umiestnené prvky článku, predstavuje jednoduchú podporu štýlov - niečo, čo nám pomáha zacieliť ju pomocou JavaScriptu alebo CSS.

Bočný prvok

Posledný prvok HTML5 použitý na ukážkovú stránku je stranou; použili sme to ako kontajner na bočnom paneli.

Element stranou predstavuje časť stránky zloženú z obsahu povrchne súvisiaceho s obsahom okolo stranou, ktorú je možné vnímať ako samostatnú od tohto obsahu. Tieto oddiely sú v typografii často reprezentované ako bočné stĺpce.

Ako môžete vidieť zo špecifikácie, jedným príkladom ideálneho použitia prvku stranou je bočný panel. Nižšie v grafe vidíte hierarchiu prvku bokom na našej ukážkovej stránke.

Umiestnili sme dva oddiely a jeden nav. Prvý prvok sekcie obsahuje odkazy na Twitter a RSS a druhý predstavuje najaktuálnejší tweet (príspevok používateľa na Twitteri). Druhý prvok, oddiel, je tiež jedným zo zriedkavých prípadov, keď mu chýba nadpis. Mohlo to mať názov, napríklad „Posledný Tweet“, ale myslím si, že to nie je potrebné, pretože čitatelia sú zvyknutí takéto bloky vidieť a značka Twitter pod citátom je veľmi dobre rozpoznateľná. Náš navigačný prvok bočného panela slúži na zobrazenie zoznamu blogov a na rozdiel od hlavnej navigácie má názov.

Posledné slovo

Týmto prichádza koniec prvej časti nášho článku venovanej rozloženiu stránok v HTML5 a CSS3. Snažil som sa to udržať čo najkratšie a netráviť príliš veľa času nejasnosťami v špecifikácii HTML5, pretože to ešte nie je hotové. Medzitým sa budeme musieť spoliehať na komunitu a prácu liečiteľov HTML5, ktorí nás budú sprevádzať pri zavádzaní nových prvkov do webov.

Ďakujeme za prečítanie a nenechajte si ujsť 2. časť tohto článku, kde diskutujeme o vlastnostiach CSS3 používaných na zdobenie značiek.

Ako obvykle sa teším na akékoľvek otázky a pripomienky. Neváhajte a ozvite sa a začnite diskusiu o použití nových prvkov, pretože tak je možné najlepšie objasniť ich užitočnosť.

Redakcia: Rog Victor a Andrey Bernatsky. Tím webformácie seba.

Po dôkladnom preštudovaní tejto časti sa naučíte, ako nezávisle od nuly vytvárať nezávislé webové stránky bez akýchkoľvek dizajnérov a CMS, ale iba s použitím HTML 5 a CSS 3. V budúcnosti, keď už budete robiť projekty s využitím populárneho CMS, uplatnením získaných poznatkov môžete zasiahnuť v zdrojový kód webu, ktorý prepracováva dizajn a štruktúru tak, aby vyhovoval vašim potrebám.

Kurz pozostáva z 25 lekcií. Prvá časť vás naučí porozumieť a písať HTML kód, druhá vás zoznámi s kaskádovými štýlmi (CSS). Práve s týmito materiálmi odporúčam začať študovať stavbu staveniska.

• 1 Ako vytvoriť webovú stránku v programe Poznámkový blok

  Vytvorte svoju prvú stránku HTML bez toho, aby ste sa uchýlili k niečomu inému, ako je známy najjednoduchší textový editor zabudovaný do ľubovoľného systému Windows - Poznámkový blok. Ale nerobte to len tak, ale pochopte, ako to funguje.

• 2 Adobe Dreamweaver - softvér na tvorbu webových stránok
  

  Zoznámite sa s jedným z najpopulárnejších a multifunkčných nástrojov určených na zjednodušenie každodenného života dizajnérov rozloženia a webových dizajnérov - Adobe Dreamweaver.

• 3 Čo je to HTML
  

  Základné otázky trápiace nováčikov. Čo je to HTML? Prečo je to potrebné? Čo ti umožňuje robiť? Čo je lepšie - HTML4 alebo HTML5? Všetky odpovede sú v článku.

• 4 štítky
  

  Značky sú základnou jednotkou jazyka HTML. Žiadna webová stránka nie je úplná bez nich. Tento článok vás oboznámi so základnými kontajnermi HTML. Z nej sa naučíte, ako správne písať značky, naučíte sa čiastočne porozumieť HTML kódu.

• 5 atribútov
  

  Značky majú nielen obsah, ale aj atribúty, ktoré sú zase obdarené hodnotami. To všetko sa bude diskutovať v článku. Kde nájsť atribúty? Ako správne písať? Aké atribúty je možné priradiť ľubovoľnej značke bez výnimky? Dozviete sa tiež, ako umožniť používateľovi upravovať ľubovoľné prvky na stránke, ako nastaviť pre každý objekt jedinečné kontextové menu a ako skryť obsah prvku, aby sa nezobrazil v prehliadači.

• 6 Formátovanie textu v HTML
  

  Všetko, čo súvisí s dizajnom textu: ako vytvárať nadpisy, priraďovať tučné alebo kurzíva, zmenšovať / zväčšovať veľkosť textu alebo niečo citovať. V článku nájdete oveľa viac zaujímavých tajomstiev formátovania textu pomocou HTML. A čo je najdôležitejšie, to všetko ukazujú názorné príklady.

• 7 Vytváranie zoznamov
  

  Odrážky, očíslované, vnorené - čokoľvek chcete. Dozviete sa tiež, ako číslovať zoznam veľkými latinskými písmenami alebo rímskymi číslicami, a dokonca aj v opačnom smere, ako začať číslovať zoznam s iným ako jedným a podobne. A tiež sa oboznámite s málo známym zoznamom definícií.

• 8 Budovanie prepojenia
  

  Odkazy sú takmer hlavným prvkom internetu, bez ktorého by nebolo pripojenie k webu. Naučte sa vytvárať odkazy pomocou príkladov, zistite, ako sa líšia relatívne cesty od absolútnych, zoznámte sa s internými a grafickými odkazmi, naučte sa, ako ich umiestňovať na e-mail a Skype.

• 9 Vkladanie obrázkov
  

  Fotografie zdobia stránku, takže ich pridanie je veľmi užitočná zručnosť. A ak z obrázku urobíte navigačnú mapu, stane sa nielen roztomilým, ale aj veľmi užitočným prvkom. Naučte sa, ako také objekty vytvárať, pomocou názorných príkladov v článku.

• 10 Vkladanie tabuliek
  

  Po dôkladnom preštudovaní tejto časti sa naučíte, ako pracovať s tabuľkami samostatne. Celé štruktúry stránok boli kedysi vytvorené na základe tabuliek, ale o tom sa bude diskutovať v nasledujúcej lekcii.

• 11 Tabuľkové usporiadanie stránky
  

  Ako je možné usporiadať celú webovú stránku? Existuje veľa spôsobov, jedným z nich je urobiť to pomocou tabuliek. Dozviete sa, čo je taká metóda. Názorné príklady, ako vždy, sú prítomné a pomôžu vám ľahko zvládnuť tabuľkový prístup.

• 12 rámikov
  

  Tento článok je určený pre tých, ktorí sa chcú naučiť, ako zobraziť úplne inú stránku v jednom dokumente HTML. Dozviete sa, čo sú to rámce, ako boli vytvorené predtým a ako sú vytvárané teraz, a tiež sa oboznámite s atribútmi, ktoré majú k dispozícii.

13 Čo je to CSS

Čo sú základné operátory a prvky obsiahnuté v dokumente kaskádovej šablóny štýlov, čo je to tento CSS všeobecne, prečo je potrebný a v čom sa líši od HTML, a čo je najdôležitejšie - ako spojiť kaskádovú šablónu štýlov s prvkom HTML.

• 14 text CSS
  

  Príklady ukazujú, ako zarovnať text vodorovne a zvisle, zmeniť odsadenie a medzery medzi riadkami, pridať podčiarknutie alebo podčiarknutie, zväčšenie medzery medzi znakmi a zmenu veľkých a malých písmen.

• 15 písiem CSS
  

  Po prečítaní článku pochopíte princípy zoskupovania fontov v CSS, zistíte, ktoré podporuje ktorýkoľvek prehliadač, naučíte sa meniť ich veľkosť a štýl, farbu a sýtosť. Pochopte skratky RGB a HSL a tiež zistite, prečo sa k nim niekedy pridáva písmeno A.

• 16 odkazov CSS
  

  Po osvojení odkazov v HTML sa oplatí prečítať, pretože tento článok ich naučí netvoriť, ale navrhovať a môžete nastaviť ich vzhľad nielen pre rôzne odkazy, ale aj pre ten istý, ktorý je v rôznych štátoch. Predpokladajme, že ak ešte nebol prekročený, bude modrý, ak umiestnite kurzor myši - zelený s podčiarknutým textom, kliknutý - žltý a tučný a krížený - kurzíva a fialová.

• 17 tabuliek CSS
  

  Všetko o správnom rozložení tabuliek: šírka a výška, poloha hlavičky, odstránenie dvojitých okrajov, určenie vzdialeností, skrytie pozadia a oveľa viac, podporené živými príkladmi.

• 18 zoznamov CSS
  

  Vedeli ste, že ako značku v zozname môžete určiť nielen kruh, ale aj kruh alebo dokonca štvorec? Áno, aj ľubovoľný obrázok. Vedeli ste, že okrem štandardného číslovania môžete ustanoviť napríklad aj tradičné arménske? Ako zmeníte značku z podmnožiny na zjednodušenú? Nie? Potom sa pozrite na článok, je tu nielen teória, ale aj príklady.

• 19 Pozadie CSS
  

  Všetko o pozadí. Farba, proti ktorej je text napísaný. Obrázok, proti ktorému je zobrazená celá stránka: horizontálne, vertikálne, vo všetkých smeroch súčasne, umiestnené, zmenšené atď.

• 20

Teraz sme pripravení zašpiniť si ruky atramentom. Cítite sa ako návrhár dispozícií v typografii z polovice 20. storočia. Rytmický zvuk tlačiarenských strojov, vôňa čerstvej tlače, klikanie mosadzných písmen tlačené na svoje miesto. Veľké role čerstvého novinového papiera, ktoré čakajú na získanie časti informácií o obehu. A vy, sediaci za sadzačom, umiestnite informačný blok na správne miesto ...

Je to tak dobré, že prišli aj počítače. Môžete si vytvoriť správnu atmosféru, aby ste mohli začať vytvárať v pokojnej atmosfére. V skutočnosti to urobíme teraz.

Dokončenie úloh, ktoré budete potrebovať (bude existovať dôvod na aktualizáciu):

V prípade záujmu môžete skontrolovať, do akej miery váš webový prehliadač štandard podporuje HTML5... Kliknite na odkaz http://html5test.com, tam uvidíte body, ktorých súčet je tvorený počtom podporovaných bodov zo štandardu. V čase písania tohto článku získal Opera11.10 na mojom počítači (Ubuntu 10.10) 258 bodov a FireFox4 iba 240. Zaujímalo by ma, čo máte?

V tomto výučbe:

• poďme s vami vytvoriť stránku podľa štandardu HTML5
• použijeme nové sémantické prvky,
• poďme trochu nakresliť,
• skontrolujte, ako sa video zobrazuje na našej stránke,
• poďme skontrolovať prácu nových prvkov formulára.

Na prácu nám bude stačiť, aby sme si ho vytvorili Súbor HTML index.html a jeden Súbor CSS štýly.css... Po dokončení úloh sa na stránke objavia skripty, takže buďte pripravení na to, že vás o tom bude prehliadač varovať. Na stránke budete musieť povoliť vykonávanie skriptov.

Príprava rámčeka stránky

Prehliadač musí stránku poznať z videnia! Ak mu nepoviete, o koho ide a odkiaľ je, zapne režim kompatibility a vy musíte hádať - „ako bude vaše slovo reagovať“ v klientovom prehliadači. Aby ste tomu zabránili, musíte si na začiatku stránky zapísať správny typ dokumentu zodpovedajúci kódu stránky.

Zdá sa, že po vypočutí prosieb návrhárov rozloženia, chalanov z W3C zľutoval sa a vytvoril krátku značku pre štandard HTML5 ... Každá webová stránka, ktorá podporuje najnovší štandard, by mala začínať týmto textom. A pamätajte, ako to bolo predtým ... verejné … prechodný alebo prísny ... tiež adresa súboru s popisom typu dokumentu, no, táááák dlho.

Začnime. Vytvorte si na pracovnej ploche priečinok, ktorý bude obsahovať našich pár skvelých súborov HTML a CSS. Vytvorte jednoduchý textový súbor index.html, kódovaný v utf-8. Toto kódovanie znakov je už dlho štandardom pre všetky texty v inom ako anglickom jazyku.

Prvý riadok - napíšeme typ dokumentu.
Ako druhé otvoríme hlavnú značku celého html dokumentu a zadáme parameter lang, zapíšeme si základný jazyk stránky - ruština.
Prejdeme k titulu.
Prvá vec, ktorú označíme, je kódovanie znakov dokumentu.
Potom nadpis okna prehliadača.
Potom bez váhania zahrňme súbor so štýlom.
Nakoniec pridajte prázdny kontajner pre telo dokumentu.

Všetko, čo sme tu opísali, je v zozname č. 1:

Výpis 1. Základná štruktúra dokumentu HTML5

Upozorňujeme, že väčšina značiek už nie je taká dlhá ako predtým. Tegu okrem toho nie je potrebné nič iné lang... Pre metaznačku stačí napísať znaková sada... Tiež pre značku odkaz netreba konkretizovať typu.

Rámec je pripravený, ale je príliš skoro na to, aby sme stránku mohli zobraziť v prehliadači. Poďme ďalej - sémantické prvky stránky.

Robíme označovanie obsahu

Na drôtový model umiestnite sémantické bloky

Teraz si poďme presnejšie definovať, čo na stránke budeme mať. Začnime s týmto: musíme čo najviac využiť nové sémantické prvky HTML5.

Naša stránka bude slúžiť na zobrazenie úplného textu správ o spoločnosti, ktorej je web určený. Prístup k nim získate buď z hlavnej stránky, na ktorej sú zverejnené najnovšie správy, alebo z archívu správ.

Vložte bloky do nádoby ... Budeme dodržiavať nasledujúcu postupnosť týchto prvkov:

- hlavička
- - skupina
- nav
- článok
hlavička
- - "obsah"
- - oddiel
- - - hlavička
- - - „obsah“
- päta

Najskôr budeme mať blok - názov stránky. so skupinou nadpisov, ktoré hovoria o danom webe. Potom sémantický blok pre menu. Vytvorme falošné odkazy v ponuke. Potom začne článok, ktorý je označený príslušným sémantickým blokom. Obsahuje rohový razítko na zaznamenanie názvu článku a dátumu uverejnenia. Ďalej je to obsah článku, ku ktorému sa pridávajú vlastné závery autora, ktorý správu napísal. Tento doplnok je štylizovaný do sekcie, ktorá je tiež sprevádzaná rohovým rohom a obsahom. Na konci stránky sa nachádza blok pätav ktorých uverejníme ďalšie informácie o obsahu našich stránok.

Všetko, čo sme tu opísali, je uvedené v zozname č. 2. Nezadávame celý kód stránky, ale iba to, čo by malo byť medzi značkami … .

Zoznam 2. Umiestnenie sémantických blokov HTML5

Stránku je teraz možné zobraziť v prehliadači. Stále to však vyzerá nenápadne. Ale nie nadarmo sme sa už postarali a prepojili súbor so štýlmi.

Natrieme fasádu

Naša stránka je stále nudná a nie atraktívna. Spravme jej mejkap. Implementujme to do našej šablóny štýlov štýly.css Prvá vec, ktorú urobíme, je definovanie písma pre celý dokument. Ak niekto nevie, potom sa napríklad uskutočnil výskum, ktoré písmo je lepšie vnímané z obrazovky monitora, ukázalo sa - to, ktoré nemá pätky. Takéto písma sa nazývajú bezpätkové - bez pätky. Patria sem napríklad: Arial, Helvetica, Verdana... Poďme ďalej, definujeme pravidlá pre návrh všetkých prvkov našej stránky v poradí. Aby sme neutekali príliš dopredu, zatiaľ použijeme niekoľko čipov - tiene a zaoblené hrany blokov.

Väčšina z toho, čo tu kódujeme, bola k dispozícii v raných štandardoch CSS. Uvedieme zoznam nových funkcií.

tieňový box
Tento parameter je určený pre prvok blokovej stránky a vytvára okolo neho tieň. Prvé štyri čísla sú lineárne parametre tieňa, ktoré sú označené buď v pixeloch pxalebo iné lineárne jednotky ( em, bod) alebo bez nich v prípade nulovej veľkosti. Prvé číslo znamená - vodorovné vrhanie tieňa doprava, ak to chcete urobiť doľava - vložte záporné číslo. Ďalšia z nich je zvislá nadol, aby sa doplnilo - vložte záporné číslo. Ďalej - miera rozmazania tieňa, potom - šírenie tieňa. Po lineárnych rozmeroch je označená farba tieňa a ak chcete vnútorný tieň, potom kľúčové slovo vložka... Ak vám jeden tieň nestačí, implementujte svoje tieňové fantázie oddelené čiarkami.

tieňový text
Tento parameter je svojím nastavením podobný predchádzajúcemu, rozdiel je iba v absencii rozptylu tieňov a vnútorného tieňa. A nikto vás tiež netrápi, aby ste fantazírovali o počte tieňov oddelených čiarkami.

border-radius (-moz-border-radius, -webkit-border-radius)
Polomer zaoblenia pre bloky. Blok môže mať štyri rohy a tento parameter môže mať rovnaký počet prvkov. Vymenované v smere hodinových ručičiek od ľavého horného rohu. Názvy parametrov v zátvorkách sa používajú v prehliadačoch rodiny Mozilla a na jadre Webkit (Chrome, Safari). Duplikujte teda nastavenia určené pre polomer hranice aj v tejto dvojici parametrov.

Dizajn, ktorý sme navrhli a kódovali, bude vyzerať, ako je uvedené v zozname č. 3. Tento kód musíte vložiť do súboru štýly.css.

Zoznam 3. CSS pre nové sémantické prvky HTML5

* (rodina fontov: Lucida Sans, Arial, Helvetica, sans-serif;) telo (šírka: 480px; okraj: 0px auto;) hlavička.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;) hlavička h1 (veľkosť písma: 36px; okraj: 0px;) hlavička h2 (veľkosť písma: 18px; okraj: 0px; farba: # 888; font-style: italic;) nav ul ( list-style: none; padding: 0px; display: block; clear: right; color-background: # 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-right: 1px solid #ccc;) nav ul li a (color: # EFD3D3; text -decoration: none; font-size: 13px; font-weight: bold;) nav ul li a: hover (color: #fff;) article\u003e time header (font-size: 14px; display: block; width: 26px; výplň: 2px; t ext-align: stred; farba pozadia: # 993333; farba: #fff; váha písma: tučné; -moz-border-radius: 6px; -webkit-border-radius: 6px; polomer okraja: 6px; plavák: vľavo; spodný okraj: 10px; ) článok\u003e časové rozpätie hlavičky (font-size: 10px; font-weight: normal; text-transform: uppercase;) article\u003e header h1 (font-size: 20px; float: left; margin-left: 14px; text-shadow : 2px 2px 1px #FFFFFF, 2px 2px 5px # 888;) článok\u003e hlavička h1 a (farba: # 993333; text-decoration: none;) článok\u003e hlavička sekcie h1 (veľkosť písma: 16px;) článok p (číry: both;) footer p (text-align: center; font-size: 12px; color: # 888; margin-top: 24px;) article\u003e section (-moz-border-radius: 6px 0 0 0; -webkit-border -radius: 6px 0 0 0; radius: 6px 0 0 0; box-shadow: 3px 3px 3px 0 # vložka FFAA88; polstrovanie: 5px; farba: # 665588; okraj: 40px;)

Ak teraz otvoríte svoju indexovú stránku, bude už vyzerať, nie tak nudne, pozri obrázok 1. V porovnaní s predchádzajúcim zobrazením bude iba SUPER.

Obrázok 1. Pohľad na štylizovanú stránku

Ak stránka vyzerá inak, otvorili ste ju v nesprávnom prehliadači. Pod „nesprávnym“ myslím iný prehliadač ako Mozilla4 +, Chrome11.0 +, Opera11.10 +, zobrazujú stránku rovnako - začiarknuté.

Poznámka: Ak niekto nerozumie položkám pravidiel v zozname, nechápe napríklad, prečo je potrebné použiť\u003e v selektore? Potom napíšte svoje otázky do komentárov.