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ší:
<h1>
: Hlavní nadpis stránky (používá se jen jednou na stránce!).<h2>
: Důležité podnadpisy.<h3>
: Podnadpisy pod h2
.<h4>
, <h5>
, <h6>
: Menší a méně důležité nadpisy.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>
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>
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>
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 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 -->
Úkol: otevřete svůj soubor index.html
.
<body>
přidejte hlavní nadpis <h1>
o tom, co máte rád (např. "Moje oblíbené hračky" nebo "Svět zvířat").<h1>
přidejte jeden nebo dva odstavce <p>
, kde o tom něco napíšete.<br>
, abyste zalomil nějaký text uprostřed odstavce.<h2>
(třeba "Moje záliby") a pod ní další odstavce.<hr>
.Uložte soubor a podívejte se, jak to vypadá v prohlížeči přes Live Server!