9. diel - Layout a pozadie v HTML

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.