9. diel - Layout a pozadie v HTML

V minulej lekcii, Triedne selektor a štýlovanie textu v CSS , sme si ukázali základy štýlovanie textu. Dnes v HTML / CSS tutoriálu začneme robiť na layoutu.

Rozloženie stránky

Iste viete, že webové stránky majú určité rozloženie prvkov, ktorému sa často hovorí layout. V minulosti sa k tomu používali tzv. Rámy, ktoré ale boli už z HTML odstránené, sú nevalidí a preto ich nebudeme používať.

U väčšiny webových stránok nájdeme hlavičku, v nej alebo pod ňou navigáciu, ďalej samotný článok s obsahom a na konci pätičku. Navigácia bola v minulosti v podobe zvislého menu s odkazmi v ľavom stĺpci, neskôr sa premiestnila do vodorovného menu pod hlavičku, určite je dobrý nápad dať ju práve tam. Zvykom býva umiestniť na web i bočný panel napravo, ako je napr. Tu na ITnetwork. O tomto rozloženie sa niekedy hovorí ako o koncepcii Web 2.0.

Každá stránka na webe má toto rovnaké rozloženie, teda obsahuje hlavičku, navigáciu a pätičku. Len v obsahu článku sa od seba stránky odlišujú. Layout sa vytvorí tak, že do HTML vložíme elementy pre rôzne časti webu a tie potom nastylujeme pomocou CSS tak, aby boli umiestnené ako chceme.

Pozíciovanie nie je práve silná stránka CSS, ale my sa tým prebojujeme Aby som vás na začiatok namotivoval, po dokončení niekoľkých nasledujúcich článkov dotiahneme svoje webové stránky do tejto podoby:

Založte si nový súbor rozlozeni.html, ako vždy do neho vložíme patričnú HTML štruktúru a napojíme ho na náš styl.css:

<!DOCTYPE html>
<html lang="cs-cz">

    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="styl.css" type="text/css" />
        <title>HoBiho portfolio</title>
    </head>

    <body>

    </body>
</html>

Článok

Začnime tým najjednoduchším a to poľom s článkom. Na obrázku vyššie je to tá modrá oblasť.

Článok sa v HTML vkladá do párového tagu

. V minulosti sa na tento účel používal tag

, čo je však zle a už sa to nerobí.Tag article vložme do tela stránky. Samotný obsah článku môžeme ešte rozdeliť do dvoch častí - na hlavičku a sekciu. Slúži na to tagy

. Header je hlavička nejakej časti HTML obsahu a nemala by sa pliesť s head, čo je hlavička samotnej HTML stránky, ktorá nie je vidieť. Header spravidla obsahuje nadpis článku alebo hneď niekoľko nadpisov. Section je časť článku, v ktorej je jeho obsah. Článku by sme mohli pridať aj pätičku tagom

, kde by bolo potrebné dátum jeho publikácie a hodnotenie, tu ale u nášho osobného webu potrebovať nebudeme.

Kód vášho body by mal teraz vyzerať takto:

<article>
    <header>
    </header>

    <section>
    </section>
</article>

Do časti header umiestnime nadpis prvej úrovne. Do časti section umiestnime časť obsahu zo stránky index.html, aby sme mali rozloženie na čom skúšať:

<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 class="centrovany"><img src="obrazky/avatar.png" alt="Programátor HoBi" /></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>
    </section>
</article>

Pozadia

Article teraz nastavíme pozadie. Pozadím bude modrý obrázok s tzv. Šumom, čo je teraz veľmi moderné. Jedná sa o obrázok so základovou farbou, cez ktorý je priehľadný vzor čiernobieleho šumu. Výsledok je ostrý a pritom nerušivý dojem. Opäť vidíte, že dizajn tvoria malé detaily. Mnoho malých detailov vytvoria nádherný webový návrh.

Pozadie sa šumom si necháme vygenerovať, rovnako ako som vám prezradil adresu na databázu ikon, teraz sa zoznámime s nástrojom, ktorý dokáže generovať obrázky šumu, nájdete ho na adrese: http://www.noisetexturegenerator.com/. Pohrajte sa s nastavením a následne šum stiahnite tlačidlom nižšie a uložte ako pozadi.png do našej zložky obrazky.

Mnou vygenerovaný šum vyzerá takto:

Background

Pozadie časti s článkom nastavíme pomocou vlastnosti background vo styl.css takto:

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

Všimnite si funkcie URL, ktorá slúži na vloženie obrázku z určitého umiestnenia. Mali by ste vidieť niečo podobné:

U pozadí by sme mali počítať s tým, že sa obrázok nemusí vždy načítať alebo že to môže chvíľu trvať. Z toho dôvodu špecifikujeme ešte modrú farbu v prípade, že sa obrázok nenačíta, zobrazí sa pozadie jednoducho modrej. Keby sme totiž na modrom pozadí použili treba biely text a tento modrý obrázok na pozadí by sa z nejakého dôvodu nenačítalo, zostalo by pozadí bielej a text by nebol vidieť. Preto u pozadí vždy definujeme ako obrázok, tak farbu.

Farbu zapíšeme jednoducho za určenie obrázku na pozadí. Background je podobne ako font sumarizuje vlastnosť a slúži ako k nastavenie obrázku na pozadí, tak farby pozadia. Môžeme do nej dať aj oboje, ako vykonáme teraz. Samozrejme by bolo možné vložiť len farbu.

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

O štýlovanie pozadia by toho vydalo na niekoľko článkov, záujemcov opäť odkázať na český CSS 3 manuál - Pozadie.

Určite ste si všimli, že je nadpis v article o niečo menší, než keď je mimo neho. Z toho dôvodu upravíme jeho štýl a zmeníme aj farbu:

h1 {
    font-size: 2em;
    font-weight: normal;
    color: white;
    text-align: center;
    text-shadow: 2px 2px 1px #0a294b;
}

h1 tiež vyberieme zo selektora s ostatnými nadpismi.

Všetky vlastnosti poznáme až na font-weight, tou určujeme, či chceme text tučný alebo normálne. Nadpisy sú ako predvolené tučné, ale to by v rozložení nevyzeralo pekne, preto do vlastnosti dosadíme hodnotu normal. Pre tučný text by sme použili hodnotu bold.

V rozložení budeme chcieť mať nadpis vľavo a článok vpravo. Nemá to žiadny význam, ide len o dizajn. V budúcej lekcii, Riešené úlohy k 6.-9. lekciu HTML a CSS , si vysvetlíme základy pozicovanie a ukážeme si, ako dávať elementy takto vedľa seba. Web máte ako vždy v prílohe k stiahnutiu.

V nasledujúcom cvičení, Riešené úlohy k 6.-9. lekciu HTML a CSS, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 7308x (2.27 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

Článok pre vás napísal David Čápka

Užívateľské hodnotenie:

2 hlasov

David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity