← Úroveň 1 – Stavitel

Lekce 2 z 12 ⏱ 25 minut

Nadpisy, odstavce a seznamy

Naplníš stránku opravdovým obsahem a naučíš se ho přehledně členit.

Ukaž mi to: obsah má svoje značky

HTML má pro každý druh obsahu vlastní značku. Tady jsou ty, které použiješ nejčastěji:

<h1>Hlavní nadpis – na stránce jen jednou</h1>
<h2>Nadpis kapitoly</h2>
<h3>Menší nadpis uvnitř kapitoly</h3>

<p>Obyčejný odstavec textu.</p>
<p>Další odstavec. Každý odstavec má vlastní značku <p>.</p>

<p>Slova můžeš <strong>zvýraznit tučně</strong> nebo <em>kurzívou</em>.</p>

Nadpisy jdou od <h1> (největší) po <h6> (nejmenší). Funguje to jako v sešitě: <h1> je název na deskách, <h2> jsou kapitoly, <h3> podkapitoly.

Seznamy

<!-- Seznam s puntíky (ul = unordered list, neseřazený) -->
<ul>
  <li>první věc</li>
  <li>druhá věc</li>
</ul>

<!-- Číslovaný seznam (ol = ordered list, seřazený) -->
<ol>
  <li>krok jedna</li>
  <li>krok dva</li>
</ol>

Každá položka seznamu je <li> a všechny jsou zabalené v <ul> (puntíky) nebo <ol> (čísla).

💡

Ten zvláštní řádek <!— text —> je komentář – poznámka pro tebe, prohlížeč ji ignoruje. Programátoři si tak nechávají vzkazy v kódu.

Teď ty 💪

Naplň svoji hlavní stránku obsahem. Měla by mít:

  1. Jeden <h1> (ten už máš),
  2. aspoň dvě kapitoly s nadpisem <h2> a odstavcem textu,
  3. aspoň jeden seznam (<ul> nebo <ol>),
  4. něco tučně pomocí <strong>.

Náměty a řešení pro tvůj projekt:

🏫 Stránky školy – náměty a řešení

Kapitoly třeba: O naší škole, Co se u nás děje, a seznam kroužků.

<h1>Základní škola Moravany</h1>
<p>Vítej na stránkách naší školy.</p>

<h2>O naší škole</h2>
<p>Naše škola stojí v Moravanech už <strong>120 let</strong>. Chodí sem 350 dětí
a máme velkou tělocvičnu i novou učebnu informatiky.</p>

<h2>Kroužky</h2>
<ul>
  <li>florbal</li>
  <li>keramika</li>
  <li>programování</li>
  <li>pěvecký sbor</li>
</ul>

<h2>Co nás čeká</h2>
<ol>
  <li>škola v přírodě (červen)</li>
  <li>sportovní den</li>
  <li>vánoční jarmark</li>
</ol>
🙋 Osobní stránky – náměty a řešení

Kapitoly třeba: Co mě baví, Co umím, seznam oblíbených her nebo knížek.

<h1>Ahoj, já jsem Kuba</h1>
<p>Je mi 10 let a tohle jsou moje stránky.</p>

<h2>Co mě baví</h2>
<p>Nejvíc ze všeho <strong>fotbal</strong> – hraju za žáky Sokola.
Doma stavím světy v Minecraftu a učím se programovat.</p>

<h2>Moje top hry</h2>
<ol>
  <li>Minecraft</li>
  <li>Mario Kart</li>
  <li>Rocket League</li>
</ol>

<h2>Co umím</h2>
<ul>
  <li>žonglovat s míčem</li>
  <li>uvařit palačinky</li>
  <li>postavit webovou stránku (právě teď!)</li>
</ul>
🌍 Cestovatelský deník – náměty a řešení

Kapitoly třeba: Poslední výlet, Kam se chystáme, seznam zemí, kde jsi byl(a).

<h1>Kam jsme vyrazili 🌍</h1>
<p>Deník našich výletů a dobrodružství.</p>

<h2>Poslední výlet: Šumava</h2>
<p>O prázdninách jsme přešli <strong>Šumavu</strong>. Tři dny chůze,
jedno bloudění a stovka borůvek.</p>

<h2>Země, kde jsem byl(a)</h2>
<ul>
  <li>Česko</li>
  <li>Slovensko</li>
  <li>Chorvatsko</li>
  <li>Itálie</li>
</ul>

<h2>Plán na příští rok</h2>
<ol>
  <li>stanování u Lipna</li>
  <li>hory na Slovensku</li>
  <li>moře v Řecku</li>
</ol>
⚽ Web klubu – náměty a řešení

Kapitoly třeba: O klubu, Poslední výsledky, soupiska jako seznam.

<h1>FK Sokol Nebovidy</h1>
<p>Oficiální stránky našeho fotbalového klubu.</p>

<h2>O klubu</h2>
<p>Hrajeme okresní přebor mladších žáků. Trénujeme
<strong>v úterý a ve čtvrtek od 17:00</strong> na hřišti za školou.</p>

<h2>Poslední výsledky</h2>
<ol>
  <li>Sokol Nebovidy – Lipová 3 : 1</li>
  <li>Rohatec – Sokol Nebovidy 2 : 2</li>
  <li>Sokol Nebovidy – Kyjov 4 : 0</li>
</ol>

<h2>Soupiska</h2>
<ul>
  <li>Kuba – brankář</li>
  <li>Matěj – obrana</li>
  <li>Ondra – záloha</li>
  <li>Tomáš – útok</li>
</ul>

Kontrola: Stránka má velký nadpis, menší nadpisy kapitol, odstavce a aspoň jeden seznam s puntíky nebo čísly. Vypadá jako opravdový (zatím nenazdobený) web.

Co si z téhle lekce odnést