Black friday Black friday
Pouze tento týden až 80% sleva na PHP, Nette, Symfony!
Aprílový black friday tě nenechá v klidu! Až 80 % prémiového obsahu zdarma. Více informací

Lekce 9 - Layout a pozadí v HTML

HTML a CSS Statický web Layout a pozadí v HTML American English version English version

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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.

Č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. V příští lekci, Plovoucí obsah v HTML, si vysvětlíme základy pozicování a ukážeme si, jak dávat elementy takto vedle sebe. Web máte jako vždy v příloze ke stažení.


 

Stáhnout

Staženo 4974x (75.12 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
62 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Všechny články v sekci
Webové stránky krok za krokem
Miniatura
Následující článek
Cvičení k 6.-9. lekci HTML a CSS
Aktivity (4)

 

 

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

Avatar
Peter Butora
Člen
Avatar
Peter Butora:14.1.2018 21:51

Ahoj neví někdo proč mi to nechce zobrazit/načíst obrázek? (Fotku ne pozadí)

Odpovědět 14.1.2018 21:51
Péťa
Avatar
Peter Butora
Člen
Avatar
Odpovídá na Peter Butora
Peter Butora:14.1.2018 21:54

Omlouvám se již jsem přišel na chybu :D
Jelikož jsem okopíroval kod ze stránky minulé lekce a mám tam zdroj obrázku (v kodu)
zapomněl jsem na to že v této složce minulý obrázek nemám

Odpovědět 14.1.2018 21:54
Péťa
Avatar
Erik Hawlasek:28.5.2018 12:21

Super článek, baví mě to čím dál více :-)

Odpovědět 28.5.2018 12:21
Za zeptání nic nedáš.
Avatar
Jaroslav Patrný:25.7.2018 23:28

Ahoj, v editoru (např. v PSPadu) jsi neměl nastaveno kódování UTF-8.

 
Odpovědět 25.7.2018 23:28
Avatar
Patrik Pastor:22. února 21:20

to nechápu.... Cesta začíná tam kde je uloženy css soubor. Přece obrázek pozadí můžeš mít uložený v jiné složce než je css soubor (mam to tak), a tedy cesta cede od toho obrázku (resp. od složky, ve které je uložený), přece nepůjde cesta od css souboru do css souboru ne?

 
Odpovědět 22. února 21:20
Avatar
Jiří Rys
Člen
Avatar
Jiří Rys:1. března 20:48

Docela se stydím, že jsem se zasekl na této začátečnické věci.
Ale proč se mi nevybarvuje pozadí na "article"?

body {
        font: 14px Verdana;
}
h2, h3, h4, h5, h6 {
        text-align: center;
        color: #0a294b;
        font-family: Arial;
        text-shadow: 3px 3px 7px #666666;
}

h2 {
        font-size: 1.7em;
}

h1 {
        font-size: 2em;
        font-weight: normal;
        color: white;
        text-align: center;
        text-shadow: 2px 2px 1px #0a294b;
}
.centrovany  {
        text-align: center;
}
article {
        background: url('obrazky/red.png');
}
<!DOCTYPE html>
<html lang="cs-cz">
        <head>
                <meta charset="utf-8" />
                <link rel="stylesheet" href="styl.css" type="text/css">
                <title>test</title>
        </head>
<body>
<article>
        <header>
                <h1>test</h1>
        </header>
        <section>
                <p>Vítejte na zdejším testu</p>
                <p class="centrovany"><img src="obrazky/koloseum.jpg" alt="Koloseum"></p>
        </section>
</article>
</body>
</html>
 
Odpovědět 1. března 20:48
Avatar
Jiří Rys
Člen
Avatar
Jiří Rys:1. března 22:38

vyřešeno

 
Odpovědět 1. března 22:38
Avatar
Matěj Bína
Člen
Avatar
Matěj Bína:4. března 15:30

Lidem jako já, co neradi nahrávají do pozadí obrázky, doporučuji web CSS3 Patterns Gallery. Krásné vzorky, 100% CSS kód.

 
Odpovědět  +1 4. března 15:30
Avatar
Lucie Cholevová:Včera 10:33

mám dotaz: snažím se tady podle návodu učit, nicméně mi bylo řečeno že article není nadřízen tagu header nebo section. co si o tom myslet?

 
Odpovědět Včera 10:33
Avatar
Odpovídá na Lucie Cholevová
Tomáš Novotný:Včera 11:10

Ahoj, myslet si můžeš to, že toto tvrzení je ok. Tag header stejně tak jako section se nemusí používat jen "uvnitř" article. Viz příklad.

<!DOCTYPE html>
<html lang="cs-cz">
  <head>
  </head>
  <body>
    <header>
      <h1>hlavička stránky</h1>
    </header>
    <section>
      <article>
        <header>
          <h1>hlavička článku 1</h1>
        </header>
        <section>
          <p>obsah článku 1</p>
        </section>
      </article>
      <article>
        <header>
          <h1>hlavička článku 2</h1>
        </header>
        <section>
          <p>obsah článku 2</p>
        </section>
      </article>
    </section>
  </body>
</html>

Dá se to chápat i tak, že header označuje hlavičku, section zase sekci bez dalších podmínek...popisují tak nějakou významově ucelenou oblast v rámci nejbližšího vnějšího parent tagu. Tím může být třeba article tj. článek. Ale třeba i skupina článků, sloupec na stránce, celá stránka atp...

Editováno Včera 11:11
Odpovědět Včera 11:10
∞ ... the exact amount of possibilities how to deal with the situation ... so by calm, your solution is one of many
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 222. Zobrazit vše