Lekce 12 - HTML layout
V minulé lekci, Stylování textu v CSS - Google fonty, velikost fontu a stín, jsme si ukázali stylování písma pomocí Google fontů a nastavili velikost a stín písma.
Dnes v HTML/CSS tutoriálu začneme pracovat na layoutu, pomocí kterého přidáme naší stránce hlavičku a patičku. Po dokončení několika následujících lekcí dotáhneme své webové stránky do této podoby:

Abychom tohoto výsledku dosáhli, musíme se naučit, jak pomocí CSS pozicovat prvky na stránce.
Rozložení stránky
Jistě víte, že webové stránky mají určité rozložení prvků, kterému se často říká layout. U většiny webových stránek nalezneme:
- hlavičku s logem webu,
- v ní nebo pod ní navigaci na nejdůležitější podstránky,
- dále samotný článek s obsahem a
- na konci patičku s informací, kdo web vytvořil.
Níže jsou tyto části zvýrazněné na layoutu, který budeme vytvářet:

Pro tyto elementy HTML poskytuje nové tagy, které si hned představíme.
Každá podstránka na našem webu má pak toto stejné rozložení. Např. tedy jak stránka "O mně", tak stránka "Dovednosti" bude obsahovat tu stejnou hlavičku, navigaci, článek a patičku. Jen v obsahu článku se od sebe samozřejmě jednotlivé stránky odlišují. Layout si vložíme do každé podstránky webu jako HTML kód a jeho elementy poté napozicujeme pomocí CSS tak, aby se zobrazovaly na správných místech.
V minulosti se k vytvoření layoutu používaly tzv. rámy, které ale byly již z HTML odstraněny, jsou nevalidní a proto je nebudeme používat. Navigace byla v minulosti také často v levém sloupci, později se přemístila do vodorovného menu pod hlavičku.
Začněme tím nejjednodušším, a to polem s článkem.
Článek <article>
Na našem webu nyní máme jen článek s informacemi o nás. Ten jsme jako
článek nijak neoznačovali, protože na webu nic dalšího nebylo. Když na
web nyní chceme přidat hlavičku a patičku, je třeba část s
článkem označit jako článek pomocí párového tagu
<article>
, aby se s hlavičkou a patičkou nepletl.
Když tagy na layout jako <article>
a další
ještě neexistovaly, všechny části stránky se obalovaly do
elementů <div>
. Z toho ovšem nebylo poznat, o jakou část
stránky se jedná, a proto se k tvorbě layoutů již nepoužívá. Element
<div>
nenese žádný význam pro webové
vyhledávače, proto bychom se jej měli snažit používat co nejméně.
Slouží k seskupování logicky souvisejících blokových
elementů. Tento element většinou používáme v kombinaci s CSS styly.
Využijeme jej v situacích, kdy potřebujeme skupinu elementů od zbytku obsahu
odlišit pouze vizuálně, ale ne sémanticky.
Části článku -
<header>
a <section>
Samotný článek často neobsahuje jen text, ale také další doplňující
informace jako titulek, autora, datum publikace, hodnocení a podobně. Proto
existují další tagy, kterými lze element <article>
ještě logicky rozdělit. Zpravidla ho rozdělujeme alespoň na dvě části a
to:
- na hlavičku s titulkem článku a
- na sekci s obsahem článku.
Slouží k tomu tagy <header>
a
<section>
. Ukažme si opět o jaké části výsledného webu
se jedná:

V HTML kódu by se článek s rozložením definoval takto:
<article> <header> <h1>O mně</h1> </header> <section> <p>Text článku...</p> </section> </article>
Máme zde tedy článek <article>
, který dále obsahuje
hlavičku <header>
s nadpisem článku. Tagem
<section>
označujeme část článku, ve které je jeho
obsah. Článku můžeme přidat i patičku tagem <footer>
,
kde se zobrazí třeba datum jeho publikace a hodnocení. V
hlavičce by potom mohl být uvedený autor a podobně. My pro jednoduchost
zůstaneme jen u výše uvedené struktury.
Hlavičky v HTML
Jak jste si možná právě uvědomili, již se bavíme o třetí hlavičce v HTML. Abychom si je nepletli, pojďme si je zopakovat:
- hlavička HTML dokumentu
<head>
není vidět a obsahuje informace pro prohlížeč a vyhledávače - hlavičku stránky s logem a navigací si vytvoříme až dále
- hlavička článku
<header>
zpravidla obsahuje nadpis článku
Úprava index.html
Pojďme nyní nové znalosti konečně aplikovat do souboru
index.html
. Zde část s článkem webu označíme jako článek a
ještě ji logicky rozdělíme na hlavičku a obsah, což nám později pomůže
vytvořit dané rozložení webu.
Za značkou <body>
tedy otevřeme element
<article>
s článkem a v něm element
<header>
s nadpisem <h1>
:
... <body> <article> <header> <h1>O mně</h1> ...
Hlavičku následně zavřeme pomocí </header>
a
otevřeme <section>
pro obsah článku, ve kterém bude
zbytek obsahu stránky. Protože obsah na stránce jsme vytvořili někdy v
začátku kurzu, drobně jej rovnou upravíme, aby odpovídal cílenému vzhledu
webu:
</header> <section> <img src="obrazky/avatar.jpg" class="avatar" alt="Programátor HoBi" /> <p> Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde. </p> <p> Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT. Kontaktovat mě můžete na <a href="kontakt.html">kontaktní stránce</a>. </p> <p> Rád čtu a někdy (hlavně v létě) i sportuju. </p> <p> Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>! </p> <h2>Dovednosti</h2> <p> Co umím, jsem sepsal na stránce <a href="dovednosti.html">dovednosti</a>. </p> </section> </article> </body>
Obsah a článek nezapomeneme úplně na konci zavřít pomocí
</section>
a </article>
.
Obrázku jsme přiřadili třídu class="avatar"
, abychom jej
mohli dále v kurzu stylovat. Rovnou ji využijeme pro zmenšení obrázku,
který by nám zabíral moc velký prostor. Obrázek <img>
nebudeme chtít dále jinak stylovat, proto kolem něj již není odstavec s
centrovací třídou, ani nemá atributy k nastavení šířky a výšky s
procenty. Pro zmenšení obrázku do souboru styl.css
přidáme:
.avatar { width: 300px; }
A máme hotovo. Naše stránka teď bude vypadat takto:
Web naleznete jako vždy v příloze ke stažení.
V příští lekci, Pozadí webu a velikost elementů, si ukážeme stylování pozadí webové stránky a nastavíme výšku a šířku elementů.
Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 8833x (2.27 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS