3. HTML - blokové prvky

22. základní škola Plzeň, Na Dlouhých 49, příspěvková organizace

Tento materiál byl vytvořen v rámci projektu Operačního programu Vzdělávání pro konkurenceschopnost.

Projekt MŠMT ČR	EU PENÍZE ŠKOLÁM
Číslo projektu	CZ.1.07/1.4.00/21.2732
Název projektu školy	EU Peníze školám
Klíčová aktivita III/2	Inovace a zkvalitnění výuky prostřednictvím ICT

Sada č. 1

Identifikátor DUM: VY_32_INOVACE_1ICT9roč_03

Vzdělávací oblast: Informační a komunikační technologie

Vzdělávací obor: Informatika

Název: HTML - blokové prvky

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Vytváření vybraných HTML blokových prvků, jako jsou odstavce, nadpisy, oddíly, řádkové zlomy, vodorovné čáry.

Klíčová slova: blokový element, odstavec, nadpis, oddíl, řádkový zlom, vodorovná čára

Metodické zhodnocení: Žáci se naučí vytvářet vybrané HTML blokové prvky, jako jsou odstavce, nadpisy, oddíly, řádkové zlomy, vodorovné čáry.

Ověřeno: 17. 1. 2013 (IX.A)

Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Ondřej Hajduch

3.1 HTML - blokové prvky (studijní text)

Základní stavebními kameny obsahu v HTML jsou tzv. blokové prvky. Blokem se rozumí HTML prvky, který je ukončen znakem pro konec řádku (standardně nelze zobrazit více bloků na jeden řádek).

Na druhé straně jsou potom tzv. řádkové prvky, které nejsou ukončeny koncem řádku (mohou být několikrát na jednom řádku).

Blokové prvky

<P>

odstavec - základní blok obsahující převážně text
párová značka
odstavce jsou od sebe oddáleny vertikální mezerou pro lepší přehlednost

<p>Tento odstavec obsahuje jen jednu větu.</p>

<H1>, <H2>, <H3>, <H4>, <H5>, <H6>

nadpisy 1. až 6. úrovně - graficky odlišeny velikostí písma
praktické využití mají jen nadpisy do 4. úrovně
párová značka
stejně jako odstavce jsou od sebe oddáleny vertikální mezerou

<h1>Hlavní nadpis stránky (vel. 24 px)</h1>
<h2>Podnadpis, kapitoly (vel. 18 px)</h2>
<h3>Mezinadpisy (vel. 16 px)</h3>
<h4>Důležité odstavce (vel. 14 px)</h4>

<DIV>

oddíl - zahrnuje libovolnou část HTML obsahu,
párová značka,
na rozdíl od odstavců a nadpisů nejsou nijak předformátovány,
využívají se při rozdělování HTML dokumentu do několika nezávislých částí, které lze poté formátovat odděleně.

<div>
  <h1>Nadpis</h1>
  <p>Tento odstavec obsahuje jen jednu větu.</p>
</div>

<BR>

řádkový zlom - vloží zalomení řádku (tzv. měkký Enter)
nepárová značka
na rozdíl od odstavce není oddálen vertikální mezerou

<p>Text se zobrazí na první řádce,<br>
  toto už bude na druhé řádce,<br>
  ale pořád je to jeden odstavec</p>

3.2 HTML - blokové prvky (cvičení)

Úkol č. 1

Ve složce WWW si vytvořte složku CV03.
Do této složky si stáhněte a rozbalte soubor cv03.zip (1).
Otevřete si rozbalený soubor cv03.txt v HTML editoru (např. PSPad).
Převeďte si tento soubor do HTML souboru a uložte jej pod názvem index.html .
- nápověda pro menu PSPadu: HTML > Konverze > Text na HTML.

Úkol č. 2

Upravte pomocí editoru soubor index.html podle následujícího klíče:
- nastavte titulek stránky na "Česká republika"
- převeďte text na nadpisy podle čísla v závorkách na začátku (čísla znamenají příslušnou úroveň nadpisu),
- ostatní text (bez čísla na začátku) převeďte na běžný odstavec,
- odstraňte všechny zbylé řádkové zlomy <br>.