4. HTML - řádkové 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č_04

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

Vzdělávací obor: Informatika

Název: HTML - řádkové prvky

Autor: Mgr. Ondřej Hajduch

Stručná anotace: Vytváření vybraných HTML řádkových prvků, jako jsou obálka, zvýrazněný text, silně zvýrazněný text, tučné písmo, písmo kurzíva, dolní a horní index.

Klíčová slova: obálka, span, silné zvýraznění, strong, zvýraznění, em, dolní index, sub, horní index, sup.

Metodické zhodnocení: Žáci se naučí vytvářet vybrané HTML řádkové prvky, jako jsou obálka, zvýrazněný text, silně zvýrazněný text, tučné písmo, písmo kurzíva, dolní a horní index.

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

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

4.1 HTML - řádkové prvky (studijní text)

Pro připomenutí, řádkové prvky nevkládají na konec znak pro konec řádku, tudíž je lze zobrazovat v libovolném množství na jednou řádku.

Řádkové prvky

Řádkových prvků existuje celá řada, ale dnes se používají jen některé (jsou nahrazeny kaskádovými styly).

<STRONG>

  • silné zvýraznění - zvýrazní označenou část textu tučným písmem,
  • párová značka,
  • pokud chcete silně zvýraznit celý blokový prvek (celý nadpis nebo odstavec), nahraďte tuto značku CSS vlastností font-weight.
<p>Normální text <strong>silně zvýrazněný text</strong>.</p>

<EM>

  • zvýraznění - zvýrazní text kurzívou,
  • párová značka,
  • pokud chcete zvýraznit kurzívou celý blokový prvek (celý nadpis nebo odstavec), nahraďte tuto značku CSS vlastností font-style.
<p>Normální text <em>zvýrazněný text kurzívou</em>.</p>

<B>

  • tučné písmo - označení části textu tučným písmem
  • zastaralé, doporučuje se nahradit značkou <strong>
  • párová značka
<p>Normální text <b>tučný text</b>.</p>

<I>

  • písmo kurzíva - označení části textu kurzívou
  • zastaralé, doporučuje se nahradit značkou <em>
  • párová značka
<p>Normální text <i>zvýrazněný text kurzívou</i>.</p>

<SUB>

  • dolní index (subscript) - zmenšení a snížení textu (chemické vzorce)
  • párová značka
<p>Kyselina sírová - H<sub>2</sub>SO<sub>4</sub>.</p>

<SUP>

  • horní index (superscript) - zmenšení a zvýšení textu (mocniny)
  • párová značka
<p>Rozloha ČR je 78 866 km<sup>2</sup>.</p>

<SPAN>

  • obálka - zahrnuje libovolnou část textu, obrázků, tabulek
  • má stejné využití jako <div>, jen se řadí mezi řádkové prky
  • párová značka
<p>Text, <span>část odstavce, lze formátovat odděleně</span>.</p>

4.2 HTML - řádkové prvky (cvičení)

Úkol č. 1

  • Ve složce WWW si vytvořte složku CV04.
  • Do složky CV04 si stáhněte a rozbalte soubor cv04.zip.
  • Ze složky CV03 si navíc zkopírujte soubor index.html do složky 04.

Úkol č. 2

  • Upravte pomocí editoru soubor index.html ze složky CV04 podle následujícího postupu:
    • ze souboru cv04.txt zkopírujte všechen text a vložte jej před nadpis "Dějiny",
    • z textu "Porovnání..." vytvořte nadpis 3. úrovně,
    • z ostatního textu vytvořte odstavce,
    • názvy států zvýrazněte silně,
    • údaje o rozlohách zvýrazněte kurzívou,
    • přidejte správné nastavení horního indexu.
  • Zkontrolujte na případné chyby a uložte.