Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
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í.

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:

Webové stránky krok za krokem

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:

Součásti layoutu stránky - Webové stránky krok za krokem

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á:

Součásti layoutu článku - Webové stránky krok za krokem

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:

Moje první webová stránka
index.html

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

 

Předchozí článek
Stylování textu v CSS - Google fonty, velikost fontu a stín
Všechny články v sekci
Webové stránky krok za krokem
Přeskočit článek
(nedoporučujeme)
Pozadí webu a velikost elementů
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
2013 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 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