Výuka IT

Nadpisy a texty

Nadpisy

Nadpisy jsou velmi důležité, protože pomáhají čtenářům (i vyhledávačům) pochopit, o čem vaše stránka je a jak je uspořádaná. HTML má pro nadpisy šest úrovní, od největšího a nejdůležitějšího po nejmenší:

Pamatujte si, že byste měli používat nadpisy v logickém pořadí (jako kapitoly v knize) a ne podle toho, jak velké písmo chcete. Velikost písma můžete později změnit pomocí CSS.

<h1>Moje pohádková kniha</h1>
<h2>Kapitola 1: Kouzelný les</h2>
<p>Jednoho slunečného rána...</p>
<h2>Kapitola 2: Dobrodružství draka</h2>
<p>A tak se stalo...</p>

Odstavce

Když chcete na stránku přidat obyčejný text, použijte značku <p> (jako "paragraph", neboli odstavec). Prohlížeč automaticky přidá prázdnou řádku před a za každým odstavcem, aby byl text přehlednější.

<p>Jednou, dávno tomu, žil v malé vesnici chlapec jménem Honza. Honza miloval dobrodružství a snil o tom, že se jednou vydá do světa a prožije něco neobyčejného.</p>
<p>Jednoho dne, když pomáhal dědečkovi na poli, našel starou, zaprášenou mapu. Vypadala jako mapa k pokladu!</p>

Zlomení řádku

Někdy chcete text zalamovat na nový řádek, ale nechcete začít úplně nový odstavec (tj. nechcete, aby se udělala prázdná mezera). K tomu slouží značka <br> (jako "break", neboli zlom). Je to samouzavírací značka, takže nepotřebuje uzavírací značku.

<p>Moje adresa je:<br>
Kouzelná ulice 123<br>
Pohádkové město</p>

Vodorovná čára

Značka <hr> (jako "horizontal rule", neboli vodorovná linka) vytvoří na stránce vodorovnou čáru. Je to také samouzavírací značka. Používá se k vizuálnímu oddělení sekcí obsahu.

<h2>První příběh</h2>
<p>Dlouhý text prvního příběhu...</p>
<hr>
<h2>Druhý příběh</h2>
<p>Dlouhý text druhého příběhu...</p>

Komentáře

Komentáře jsou super pro programátory! Můžete do nich napsat poznámky k Vašemu kódu. Prohlížeč je úplně ignoruje a nezobrazí je na stránce. Jsou to jen připomínky pro Vás.

<!-- Tohle je komentář a nikdo ho na stránce neuvidí! -->
<p>Dobrý den, jsem viditelný text.</p>
<!-- Tady začíná sekce o obrázcích -->

Cvičení: Tvorba vlastní stránky s textem!

Úkol: otevřete svůj soubor index.html.

  1. Do sekce <body> přidejte hlavní nadpis <h1> o tom, co máte rád (např. "Moje oblíbené hračky" nebo "Svět zvířat").
  2. Pod nadpis <h1> přidejte jeden nebo dva odstavce <p>, kde o tom něco napíšete.
  3. Použijte značku <br>, abyste zalomil nějaký text uprostřed odstavce.
  4. Vytvořte další sekci s nadpisem <h2> (třeba "Moje záliby") a pod ní další odstavce.
  5. Oddělte sekce vodorovnou čárou <hr>.
  6. Přidejte nějaké komentáře.

Uložte soubor a podívejte se, jak to vypadá v prohlížeči přes Live Server!