Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
BF extended 2022

Lekce 9 - Layout a pozadí v HTML

V minulé lekci, Třídní selektor a stylování textu v CSS, jsme si ukázali základy stylování textu.

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.

Pro tyto elementy HTML poskytuje nové tagy, které si hned představíme.

Každá stránka na webu má pak toto stejné rozložení, tedy obsahuje hlavičku, navigaci a patičku. Jen v obsahu článku se od sebe 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.

Čá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>. Článek na stránce pak vypadá asi takto:

<article>
    <header>
        <h1>Nadpis článku</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.

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

Když tagy na layout jako <article> a další ještě neexistovaly, všechny části stránky se obalovaly do elementu <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.

Definování článku v index.html

Pojďme nyní nové znalosti aplikovat do souboru index.html. Do části <header> umístíme nadpis první úrovně a do části <section> umístíme poupravený původní obsah našeho <body>. Obrázek však vložíme až za <section>, protože jej budeme chtít v budoucnu umístit napravo od zbývajícího obsahu článku:

...
<body>
    <article>
        <header>
            <h1>O mně</h1>
        </header>

        <section>
            <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>

        <img src="obrazky/avatar.jpg" alt="Programátor HoBi" />
    </article>
</body>

Obrázek <img> již nebudeme chtít mít centrovaný, proto ho neobalujeme odstavcem <p> se třídou centrovany. Odebrali jsme mu taktéž nastavení výšky a šířky, to totiž zajistíme pomocí CSS.

Naše stránka teď bude vypadat nějak takto:

Moje první webová stránka
index.html

Vlastnost background - Nastavení pozadí

Nyní se začneme zajímat o pozadí stránky. Zatímco dříve bylo běžné využívat barvy, pracovat s texturami a vytvářet barevný a veselý web (který ovšem neztrácel na čitelnosti!), dnes je moderní držet se zásad minimalismu, a pozadí většinou zůstává bílé, někdy ve světlých odstínech šedé. O kombinování barev na webové stránce se dočtete v článku Jak na barvy.

Ve styl.css nastavíme jednobarevné pozadí na elementu <body> pomocí vlastnosti background takto:

background: #F9F9F9;

Obrázek na pozadí

Zmiňme si jen, jak by to vypadalo, pokud bychom chtěli na pozadí využít nějaký obrázek. Může se jednat o fotografii, ale třeba i šum nebo texturu. Do vlastnosti background můžeme vložit url daného obrázku. Vypadalo by to například takto:

background: url('obrazky/pozadi.png');

K tomu je nutné podotknout dvě věci

  • vždy je lepší odkazovat na obrázek, který máme fyzicky ve složce projektu, než na nějaký externí na internetu.
  • je dobré počítat s tím, že načíst obrázek je datově náročnější než vykreslit barvu, a může se stát, že se obrázek z různých důvodů nenačte. Pro takový případ je dobré stejně ještě připsat nějakou barvu, která bude v pozadí místo daného obrázku:
background: url('obrazky/pozadi.png') #F9F9F9;

Vlastnost background je opět pouze zkratkou za spoustu jiných vlastností, které se dají použít pro nastavení pozadí. Barvu pozadí bychom mohli například nastavit taktéž pomocí vlastnosti background-color, obrázek bychom však pomocí ní do pozadí nenastavili.

O stylování pozadí by toho vydalo na několik lekcí, zájemce opět odkážeme na český CSS 3 manuál - Pozadí. V našem webovém portfoliu budeme využívat na pozadí pouze barvy :-)

Vlastnosti width a height - Výška a šířka elementů

Výšku a šířku elementů nastavujeme pomocí vlastností height a width. Těmto vlastnostem můžeme nastavit především tyto hodnoty:

  • Číselnou hodnotu s jednotkou - například px, em nebo %
  • auto - velikost se vypočítá a zvolí automaticky. Jedná se o výchozí hodnotu
  • max-content - skutečná maximální šířka nebo výška obsahu. U textového obsahu to znamená, že se obsah vůbec nezalomí, i kdyby měl přetéct
  • min-content - skutečná minimální šířka nebo výška obsahu. Například v případě šířky je to u textového obsahu šířka nejdelšího slova

Obě vlastnosti mají poté ještě minimální a maximální varianty, máme tedy min-height, min-width, max-height a max-width. Vlastnostmi min-height a min-width nastavujeme minimální velikost daného elementu a vlastnostmi max-height a max-width jeho maximální velikost. Při počítání velikosti elementu mají tyto vlastnosti přednost před vlastnostmi height a width.

To znamená, že pokud bychom elementu nastavili šířku width na 200px a max-width na 100px, tak element bude široký pouze 100px.

Nyní si v souboru styl.css nastavíme velikost obrázku a hlavičky článku:

article header {
    height: 100px;
}

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
    color: #00386B;
}

img {
    width: 300px;
}

Všechny původní selektory nadpisů h1, h2, h3, h4, h5 a h6 ze souboru odebereme. Už je nebudeme potřebovat.

Složitější selektory

Objevuje se nám zde nový typ CSS selektorů, a to takových, u kterých jednotlivé elementy neoddělujeme čárkou, ale pouze mezerou. Prvním takovým selektorem je article header, který vybere všechny hlavičky všech článků na stránce (tedy všechny elementy <header>, vložené v elementu <article>).

Jelikož na stránce budeme mít vždy např. jen jeden článek a v něm jednu hlavičku, bude to fungovat správně. V tuto chvíli by jistě stačilo vybrat jen element <header>, ale v budoucnu jich na stránce budeme mít více, proto zde vkládáme na první místo ono article, abychom upřesnili výběr.

Daný zápis by fungoval i v případě, že by byl <header> vložen v článku třeba ještě takto do tagu <div>:

<article>
    <div>
        <header>
        ...
        </header>
    </div>
    ...
</article>

Selektoru stačí, že <header> bude někde uvnitř <article>.

Kdybychom chtěli, aby selektor vybral jen přímo vnořený element (hovoříme o dítěti - child), použijeme >:

article > header {
}

Nyní by se <header> v příkladu výše nevybral, jelikož není přímo v <article>, ale je přímým potomkem elementu <div>.

To bylo jen malé odbočení, abychom si rozšířili zásobu selektorů. Jaký použijete je na vás.

Na selektoru article h1, article h2, article h3, article h4, article h5, article h6 lze hezky vidět, že v jednom selektoru můžeme kombinovat více typů selektorů. Tento selektor vybere nadpisy všech úrovní, které jsou v jakémkoliv elementu <article>.

Vlastnost max-width - Maximální šířka

Dnešní monitory jsou hodně široké a kdyby byl článek přes úplně celou šířku prohlížeče, museli bychom jezdit očima dlouhou vzdálenost a špatně by se četl. Weby proto omezují maximální šířku svých článků, nejvíce je to asi vidět na novinových webech, kde jsou krátké články, které jsou velmi úzké. Náš článek omezíme na šířku 960px pomocí vlastnosti max-width:

article {
    max-width: 960px;
}
margin 0 auto - Centrování bloků

Článek je nyní užší, ale je přilepený na levé hraně monitoru (a uživatel sedí veprostřed). Proto článek vycentrujeme. Dostáváme se do situace, kdy potřebujeme vycentrovat blokový element (<article>) v blokovém elementu (<body>). Nejjednodušší způsob, který funguje pouze pro jeden element, je nastavit vlastnost margin. Ta nám udává velikost vnějšího okraje daného elementu, tedy odsazení od okolních elementů. My zde nastavíme velikost horního a dolního okraje na 0 a velikost bočních okrajů na hodnotu auto, která zajistí stejné odsazení z obou stran.

Vlastnosti margin se budeme blíže věnovat dále v kurzu, proto toto její použití můžeme zatím chápat pouze jako takovou kouzelnou formulku, pomocí které lze centrovat blokové elementy.

article {
    max-width: 960px;
    margin: 0 auto;
}

Zbylé styly

Dále přidáme selektory pro úpravu stylu prvních dvou úrovní nadpisů a odstavců s odkazy:

article h1 {
    font-size: 2.3em;
    font-weight: bold;
    text-transform: uppercase;
    width: max-content;
}

article h2 {
    font-size: 2em;
}

article section p {
    line-height: 1.8em;
}

article section a {
    color: #EF6534;
}

Rozeberme si, co dělají jednotlivé použité vlastnosti:

  • Vlastností font-weight určujeme, zda chceme text tučný nebo normální. Pro tučný text použijeme hodnotu bold. Pro normální text použijeme hodnotu normal. Nadpisy jsou jako výchozí tučné, ale je dobré znát možnosti nastavení.
  • Vlastnost text-transform převede všechna písmena na velká (uppercase), malá (lowercase) nebo například vypíše všechna první písmena velká (capitalize).
  • Vlastností line-height nastavíme výšku řádky.

Protože nadpis <h1> článku budeme v budoucnu podtrhávat a budeme chtít, aby jeho šířka nebyla delší, než jeho text, přidali jsme k němu width: max-content. Nyní se tato změna nijak neprojeví.

Další vlastnosti už známe, a tak si jejich účel v CSS jistě dokážeme odvodit :-)

A zde vidíme výsledek dnešní lekce (všimněme si, že se odsazení mění v závislosti na velikosti okna):

Moje první webová stránka
index.html

V rozložení budeme chtít mít nadpis vlevo a článek pod ním. Do pravé části později přemístíme fotografii. Nemá to žádný význam, jde pouze o design.

Web naleznete jako vždy v příloze ke stažení.

V následujícím cvičení, Řešené úlohy k 6.-9. lekci HTML a CSS, si procvičíme nabyté zkušenosti z předchozích lekcí.


 

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 7132x (2.27 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Třídní selektor a stylování textu v CSS
Všechny články v sekci
Webové stránky krok za krokem
Přeskočit článek
(nedoporučujeme)
Řešené úlohy k 6.-9. lekci HTML a CSS
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
589 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

Komentáře
Zobrazit starší komentáře (326)

Avatar
Kateřina Zákostelská:5. září 17:58

trvalo mi se srovnat s tím, že se skáče ze souboru CSS a HTML, části kódu jsem musela hledat k čemu patří a kam patří, občas mi to - na rozdíl od předchozích článku, přišlo zmatené, musela jsem si stáhnout konečnou verzi, abych mohla porovnávat kde jsou změny a pohrát si na stránce se zdrojovým kódem abych viděla změny bez toho měnit a přepisovat svoje soubory. Asi bych to potřebovala víc rozkouskovat a detailněji vysvětlit některé změny

 
Odpovědět
5. září 17:58
Avatar
Alena Melicharová:6. září 18:32

Proč mi nefunguje pozadí na stránce, co jsem vložila do CSS?

Odpovědět
6. září 18:32
"Svět patří těm, co se nepo*****" (Charles Bukowski)
Avatar
Jiri Z
Člen
Avatar
Jiri Z:2. října 19:50

Tak jsem v styl.css nepoužil mezi article h1 až h6 vždy na konci čárku a strašně jsem se celkem dlouho divil proč mi nefunguje vlastnost color u nadpisu h1 a h2. Jinak pobrat tuhle lekci bylo pro mě náročnější na čas víc než předchozí lekce.

 
Odpovědět
2. října 19:50
Avatar
Renáta Vyšatová:8. října 20:24

Tady jsem se opravdu ztrácela. Nevěděla jsem, co kam vepisovat, něco jsem napsala, ale pak jsem to musela smazat nebo přesunout... Uf, nerozumněla jsem tomu, měla jsem tam pěkný binec, musela jsem si v tom udělat pořádek až podle přílohy ke stažení. Musím si udělat poznámky, nabiflovat se a až pak se vrhnout na test k 6.-9. lekci

 
Odpovědět
8. října 20:24
Avatar
Martin Maksa
Člen
Avatar
Martin Maksa:17. října 19:34

Tady přituhuje, budu si to muset přečíst ještě několikrát a snad si v tom udělám pořádek. na jednu lekci je tu velké množství informací.

 
Odpovědět
17. října 19:34
Avatar
Lucie Hejnalová:25. října 10:47

Už to není taková brnkačka. Ale stačí si to párkrát přečíst a zkoušet co to udělá. Za mě dobrý.

 
Odpovědět
25. října 10:47
Avatar
Karolína Švarcová:31. října 8:09

Oproti jiným lekcím byla tahle celkem chaotická. Nakonec jsem to nějak dala dohromady, ale asi to úplně pochopím, až budu zkoušet něco vlastního. 🙂

 
Odpovědět
31. října 8:09
Avatar
Lenka Pospíšilová:31. října 13:28

Tady už to začíná být trochu složitější, už to chce více času a vyzkoušet si, jak to funguje. Jdu se vrhnout na cvičení, snad to zvládnu :)

 
Odpovědět
31. října 13:28
Avatar
Jan Trnka
Člen
Avatar
Jan Trnka:9. listopadu 8:46

Ano, tady je to složitější, ale nebude se bát.

 
Odpovědět
9. listopadu 8:46
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:Včera 15:36

Na vaše podněty jsme lekci zrevidovali a zjednodušili.

Editováno 11:21
Odpovědět
Včera 15:36
One of the most common causes of failure is the habit of quitting when one is overtaken by temporary defeat.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 336. Zobrazit vše