Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET
Využij akce až 80% zdarma při nákupu e-learningu. Více informací .
BF summer

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 dělat na layoutu.

Rozložení stránky

Jistě víte, že webové stránky mají určité rozložení prvků, kterému se často říká layout. V minulosti se k tomu používaly tzv. rámy, které ale byly již z HTML odstraněny, jsou nevalidí a proto je nebudeme používat.

U většiny webových stránek nalezneme hlavičku, v ní nebo pod ní navigaci, dále samotný článek s obsahem a na konci patičku. Navigace byla v minulosti v podobě svislého menu s odkazy v levém sloupci, později se přemístila do vodorovného menu pod hlavičku, určitě je dobrý nápad dát ji zrovna tam. Zvykem bývá umístit na web i postranní panel napravo, jako je např. zde na ITnetwork. O tomto rozložení se někdy hovoří jako o koncepci Web 2.0.

Každá stránka na webu má toto stejné rozložení, tedy obsahuje hlavičku, navigaci a patičku. Jen v obsahu článku se od sebe stránky odlišují. Layout se vytvoří tak, že do HTML vložíme elementy pro různé části webu a ty poté nastylujeme pomocí CSS tak, aby byly umístěné jak chceme.

Pozicování není zrovna silná stránka CSS, ale my se tím probojujeme :) Abych vás na začátek namotivoval, po dokončení několika následujících článků dotáhneme své webové stránky do této podoby:

Hotový layout v HTML a CSS

Založte si nový soubor rozlozeni.html, jako vždy do něj vložíme patřičnou HTML strukturu 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ánek

Začněme tím nejjednodušším a to polem s článkem. Na obrázku výše je to ta modrá oblast.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Článek se v HTML vkládá do párového tagu <article>. V minulosti se k tomuto účelu používal tag <div>, což je však špatně a již se to nedělá.

Tag article vložme do těla stránky. Samotný obsah článku můžeme ještě rozdělit do dvou částí - na hlavičku a sekci. Slouží k tomu tagy <header> a <section>. Header je hlavička nějaké části HTML obsahu a neměla by se plést s head, což je hlavička samotné HTML stránky, která není vidět. Header zpravidla obsahuje nadpis článku nebo hned několik nadpisů. Section je část článku, ve které je jeho obsah. Článku bychom mohli přidat i patičku tagem <footer>, kde by bylo třeba datum jeho publikace a hodnocení, tu ale u našeho osobního webu potřebovat nebudeme.

Kód vašeho body by měl nyní vypadat takto:

<article>
    <header>
    </header>

    <section>
    </section>
</article>

Do části header umístíme nadpis první úrovně. Do části section umístíme část obsahu ze stránky index.html, abychom měli rozložení na čem zkoušet:

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

Pozadí

Article nyní nastavíme pozadí. Pozadím bude modrý obrázek s tzv. šumem, což je nyní velice moderní. Jedná se o obrázek se základovou barvou, přes který je průhledný vzor černobílého šumu. Výsledek je ostrý a přitom nerušivý dojem. Opět vidíte, že design tvoří malé detaily. Mnoho malých detailů vytvoří nádherný webový návrh.

Pozadí se šumem si necháme vygenerovat, stejně jako jsem vám prozradil adresu na databázi ikon, nyní se seznámíme s nástrojem, který umí generovat obrázky šumu, naleznete ho na adrese: http://www.noisetexturegenerator.com/. Pohrajte si s nastavením a následně šum stáhněte tlačítkem níže a uložte jako pozadi.png do naší složky obrazky.

Mnou vygenerovaný šum vypadá takto:

Šum na pozadí
Background

Pozadí části s článkem nastavíme pomocí vlastnosti background ve styl.css takto:

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

Všimněte si funkce URL, která slouží k vložení obrázku z určitého umístění. Měli byste vidět něco podobného:

Pozadí článku v HTML

U pozadí bychom měli počítat s tím, že se obrázek nemusí vždy načíst nebo že to může chvíli trvat. Z toho důvodu specifikujeme ještě modrou barvu v případě, že se obrázek nenačte, zobrazí se pozadí prostě modré. Kdybychom totiž na modrém pozadí použili třeba bílý text a tento modrý obrázek na pozadí by se z nějakého důvodu nenačetl, zůstalo by pozadí bílé a text by nebyl vidět. Proto u pozadí vždy definujeme jak obrázek, tak barvu.

Barvu zapíšeme jednoduše za určení obrázku na pozadí. Background je podobně jako font shrnující vlastnost a slouží jak k nastavení obrázku na pozadí, tak barvy pozadí. Můžeme do ní dát i oboje, jak provedeme nyní. Samozřejmě by bylo možné vložit jen barvu.

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

O stylování pozadí by toho vydalo na několik článků, zájemce opět odkáži na český CSS 3 manuál - Pozadí.

Určitě jste si všimli, že je nadpis v article o něco menší, než když je mimo něj. Z toho důvodu upravíme jeho styl a změníme i barvu:

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

h1 také vyndáme ze selektoru s ostatními nadpisy.

Všechny vlastnosti známe až na font-weight, tou určujeme, zda chceme text tučný nebo normální. Nadpisy jsou jako výchozí tučné, ale to by v rozložení nevypadalo hezky, proto do vlastnosti dosadíme hodnotu normal. Pro tučný text bychom použili hodnotu bold.

Styl nadpisu v HTML layoutu

V rozložení budeme chtít mít nadpis vlevo a článek vpravo. Nemá to žádný význam, jde pouze o design. Web máte 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 6060x (75.12 kB)
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
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
80 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi 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 (6)

 

 

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

Avatar
Josef Břečka:11.7.2020 19:33

Článek parádní, jen jsem zapomněl v CSS souboru před background vložit article{}. Takže jsem chvilku řešil, proč nefunguje pozadí. Už je to OK :)

Odpovědět
11.7.2020 19:33
Prostě buďte happy :)
Avatar
Jiří Vrána:20.9.2020 12:06

Zkus napovědět cestu, viz toto:

article {
background: url(../obrazky/po­zadi.png) rgba(150, 149, 149, 0.856);
}

Ty dvojtečky a lomítko před odkazem obrázku. Nějakou chvíli mi trvalo to zjistit, ale už to funguje.
Jsem noob, takže netuším, proč někde je třeba deklarovat cestu an někde stačí jen"podsložka a jméno obrázku". :-)

 
Odpovědět
20.9.2020 12:06
Avatar
Michal Stisek:26.9.2020 15:01

Pokud máte html soubory v kořenovém adresáři a pak složky pro obrázky a styl, pak v css souboru musí být pro cestu k pozadí právě ty dvě tečky (../obrazky/po­zadi.png). Pokud byste měli soubor css v kořenovém adresáři s html, pak stačí mit v url jen (obrazky/poza­di.png)

BTW: chci se zeptat jestli někdo nevíte proč se nadpis h1 v elementu article udela menším, než když je jen v body. Někdo nějaké vysvětlení?

Odpovědět
26.9.2020 15:01
Jít pořád dál má smysl
Avatar
Jakub Jílek
Člen
Avatar
Jakub Jílek:17.11.2020 22:25

Jak už psal Luboun, je to potřeba mít v Body v tom styl.css.

 
Odpovědět
17.11.2020 22:25
Avatar
Virtual
Super redaktor
Avatar
Virtual:21.12.2020 13:19

Fajn článek – díky.
Drobná životní zkušenost:
Když jsem si přečetla větu: "... V minulosti se k tomuto účelu používal tag <div>, což je však špatně a již se to nedělá.", snažila jsem se všechny <div> přepisovat na <article> a to i např. v automaticky generovaném kódu v _Layout.cshtml u .NET Core MVC. :-P
Až pak jsem zjistila, že se <div> běžně používá kvůli Bootstrapu a zas tak špatný ani přežitý tag to není...

Odpovědět
21.12.2020 13:19
Rozdíl mezi tím, kým jsme a tím, kým chceme být, je jen v tom, co děláme.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Veronika MAREČKOVÁ :27. ledna 11:41

Zdravím, Vytvořila jsem si fialový png obrázek, který bych ráda měla na pozadí stránky, ale stále se mi to nedaří. Prosím napište mi, kde dělám chybu, na kterou nemůžu přijít.
Text mám bez diakritiky. Fialový obrázek mi program sám dokonce nabízí, ale v prohlížeči se fialové pozadí stále nezobrazuje.
Kam správně background: url('../obraz­ky/fialova.png') ; se do css zadává?

body { font-family: Verdana, Geneva, Tahoma, sans-serif;
background: url('../obraz­ky/fialova.png')}

i když zadám article {
background: url(../obrazky/fi­alova.png);
}

tak se nic nezobrazí.
Děkuji.

 
Odpovědět
27. ledna 11:41
Avatar
Odpovídá na Veronika MAREČKOVÁ
Veronika MAREČKOVÁ :27. ledna 13:02

Kdyby se náhodou ještě někomu stalo něco podobného jako mě tak ať si css styly nezapomene propojit s webovou stránkou. ;-) Jinak ty dvě tečky od Jirky pomohly.
tj. ../obrazky/po­zadi.png

<link rel="stylesheet" href="css/styly.css" type="text/css" />
<link rel="stylesheet" href="styly.css" type="text/css" />
 
Odpovědět
27. ledna 13:02
Avatar
Erika urbanová:17. června 19:35

Ahoj vymazala som všetko z predchádzajúcich lekcií a išla nanovo, ale zasa sa na tomto mieste, ako vložiť obrázok farby na podklad neviem pohnúť, rozbalila som si váš kod, ale tiež mi nefunguje, skúsila som aj iný prehliadač, doteraz super všetko zobrazovalo, takže v prepojení by to byť nemalo,skúsila som:
SAMOSTATNE:
article{
background: url(../'obraz­ky/pozadi.png');
}
skúsila som vložiť do BODY:
body{

font-family:Verdana;
font-size:14px;
background: url(../'obraz­ky/pozadi.png');
}

 
Odpovědět
17. června 19:35
Avatar
Aleš Masařík:18. června 17:28

Blblo mi jak se píše v diskuzi pozadí, bralo to mi to pozadí napsané #číslo, ale obrázek z noise texture generator ne, tak jsem dal pozadí na celé tělo takto:

body    {
   background: url(pozadi3.png);}

je tam rozdíl oproti návodu tady, že tam nejsou uvozovky a mě to funguje

 
Odpovědět
18. června 17:28
Avatar
Ivana Fajnorová:21. června 20:39

tak toto mi teda trvalo... bohužiaľ nezobrazovalo sa mi pozadie podľa tohto postupu, tak som si prečítala český CSS 3 manuál - Pozadí a urobila som to podľa toho návodu a funguje to :)

 
Odpovědět
21. června 20:39
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 269. Zobrazit vše