IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 6 - Seznamy v HTML a zopakování tabulky

V minulé lekci, Tabulky v HTML, jsme si vysvětlili tabulky.

Dnes si v HTML tutoriálu opět rozšíříme náš web přidáním tabulky, kterou jsme se nově naučili. Dále si zmíníme HTML seznamy, což je poslední téma před CSS a designem webových stránek.

Rozšíření projektu - Podstránka dovednosti

Vytvoříme opět novou podstránku. Ve VS Code si otevřete celou složku prvni_web/, pokud ještě nemáte, a to kliknutím na možnost Otevřít v Code v průzkumníku Windows. Kliknutím pod současné HTML soubory v levém panelu pravým tlačítkem myši a volbou Nový soubor přidáme soubor dovednosti.html.

Vyplníme si vše potřebné (DOCTYPE, <html>, <head>, <body>, např. pomocí napsání ! a stisknutí Enter).

Do těla nové stránky vložíme tabulku s našimi dovednostmi. Tabulka bude mít dva řádky:

  • v prvním bude ikona jazyka, který ovládáme,
  • v druhém popis toho, co v daném jazyce umíme.

Ikony si můžete stáhnout níže a uložit do složky obrazky/:

Webové stránky krok za krokem Webové stránky krok za krokem Webové stránky krok za krokem

Nebo opět získat nějaké vlastní pomocí webového nástroje Iconfinder. Celý výsledný kód naší podstránky by mohl vypadat takto:

<!DOCTYPE html>
<html lang="cs-cz">

<head>
    <meta charset="utf-8" />
    <title>Dovednosti</title>
</head>

<body>
    <h1>Dovednosti</h1>

    <table>
        <tr>
            <td>
                <img src="obrazky/html.png" alt="HTML" />
            </td>
            <td>
                <img src="obrazky/java.png" alt="Java" />
            </td>
            <td>
                <img src="obrazky/pascal.png" alt="Pascal" />
            </td>
        </tr>
        <tr>
            <td>
                <h2>HTML</h2>
                <p>S HTML začínám a umím vytvořit jednoduché webové stránky, jako jsou tyto.</p>
            </td>
            <td>
                <h2>Java</h2>
                <p>Javu se učím z tutoriálů na ITnetwork.cz, dokáži tvořit jednoduché konzolové i okenní aplikace.</p>
            </td>
            <td>
                <h2>Pascal</h2>
                <p>Pascal nás učí ve škole, ale raději se učím moderní jazyky z ITnetwork.</p>
            </td>
        </tr>
    </table>

    <p><a href="index.html">Zpět na hlavní stranu</a></p>
</body>

</html>

Stránku uložíme a otevřeme v prohlížeči:

Dovednosti
dovednosti.html

Prakticky jsme tedy použili tabulku na našich stránkách. Do stránky jsme také opět vložili odkaz na centrální index.html. Stránku zatím z indexu odkazovat nemusíme, později si na ni přidáme navigaci.

Seznamy v HTML

Seznam používáme vždy, když potřebujeme vyjmenovat položky, které se sebou nějak souvisí. Může se jednat např. o seznam použité literatury, o číslované kroky v tutoriálu nebo o navigační menu. Určitě je dobře znáte jako "odrážky" např. z MS Wordu.

V HTML máme k dispozici 3 typy seznamů:

  1. Neuspořádaný seznam <ul>
  2. Uspořádaný seznam <ol>
  3. Slovníček pojmů <dl>

1. Neuspořádaný seznam <ul>

Prvním typem seznamu je neuspořádaný seznam. Zapisujeme jej pomocí párového tagu <ul> (Unordered List - neuspořádaný seznam). Tag potom obaluje položky seznamu. Položky v něm jsou neočíslované (neuspořádané) a standardně se zobrazují pomocí odrážek. Ačkoli je seznam chápán jako neuspořádaný, pořadí prvků v kódu na vykreslené stránce samozřejmě zůstane zachováno.

Položky seznamu <li>

Tag <li> (List Item - položka seznamu) označuje jednu položku seznamu a nejčastěji obaluje text. Může však obsahovat i obrázky a další libovolné elementy. Tag <li> je párový, ale zavírací tag lze vynechat. My si jej pro přehlednost budeme uvádět.

Vytvoříme si nový soubor seznam.html a vložíme do něj opět HTML strukturu pomocí ! a Enter, v lekci ji již nebudeme opakovat. Ukažme si jednoduchý příklad neuspořádaného seznamu, který vložte do elementu <body>:

<h2>Co jsem se dnes naučil</h2>
<ul>
  <li>Vytvářet tabulky</li>
  <li>Slučovat buňky</li>
  <li>Co je to sémantika</li>
  <li>Vytvořit uspořádaný seznam</li>
</ul>

Uložíme. A výstup vypadá takto:

Seznamy v HTML
index.html

Pomocí <ul> se často řeší navigační menu, během kurzu si to ukážeme.

2. Uspořádaný seznam <ol>

Uspořádaný seznam (Ordered List) použijeme, pokud z hlediska významu záleží na pořadí položek. Položky jsou zde řazeny dle nějakého klíče, tím je nejčastěji priorita nebo posloupnost akcí. Zápis je naprosto stejný, jako u neuspořádaného seznamu, použijeme však párový tag <ol>. Do něj pak vložíme opět položky seznamu <li>. Místo odrážek nám u položek seznamu prohlížeč v základním stylu zobrazí číslice:

<h2>Můj prioritní jídelníček</h2>
<ol>
  <li>Špagety</li>
  <li>Smetanový sos</li>
  <li>Hamburger</li>
  <li>Cheese burger</li>
  <li>Brokolice</li>
</ol>

Výsledek vypadá takto:

Můj prioritní jídelníček
index.html

Atributy

Na rozdíl od neuspořádaného seznamu má element <ol> několik atributů:

  • reversed - Pokud je atribut uveden, položky seznamu budou číslovány opačně, tedy sestupně. Jako hodnota se obvykle uvádí reversed (reversed = "reversed"), ale může se uvést i prázdná nebo žádná.
  • start - Hodnota atributu určuje první číslo v seznamu, zadáváme jako číslo.
  • type - Nastavuje typ číslování, můžeme nastavit hodnoty: 1, A, a, I, i pro arabské číslice, latinská písmena a římské číslice.

I elementu <li> můžeme přidat atribut:

  • value - U uspořádaného seznamu označuje číslo dané položky. Následující položky se poté automaticky číslují od této hodnoty.

Příklad uspořádaného seznamu s atributy

Zkusme si ještě pokročilejší příklad:

<ol reversed="reversed" start="4" type="I">
  <li>Položka</li>
  <li>Položka</li>
  <li>Položka</li>
</ol>

Výsledek bude vypadat takto:

Pokročilejší příklad HTML seznamů
index.html

3. Slovníček pojmů <dl>

Posledním typem seznamu je slovníček pojmů, pro který používáme tag <dl> (Definition List). Oproti prvním dvoum typům slovníček pojmů obsahuje 2 typy položek, a to:

1. Vysvětlovaný pojem <dt>

Vysvětlovaný pojem vkládáme to tagu <dt> (Definition Term).

2. Definice <dd>

Pojem vysvětlíme v tagu <dd> (Definition Definition).

Pojďme si udělat ukázku:

<h2>Slovníček pojmů k článku</h2>
<dl>
    <dt>Tutoriál</dt>
        <dd>Názorný návod k použití, většinou krok za krokem</dd>
    <dt>ITnetwork</dt>
        <dd>Akreditované rekvalifikační zařízení</dd>
    <dt>Seznam</dt>
        <dd>Množina položek, které spolu nějakým způsobem souvisí</dd>
</dl>

A výsledek:

Slovníček pojmů k článku
index.html

Těšte se na další lekce, protože zanedlouho bude náš web vypadat opravdu k světu :)

V následujícím cvičení, Řešené úlohy k 5. a 6. lekci HTML a CSS, si procvičíme nabyté zkušenosti z předchozích lekcí.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 693x (2.13 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Tabulky v HTML
Všechny články v sekci
Webové stránky krok za krokem
Přeskočit článek
(nedoporučujeme)
Řešené úlohy k 5. a 6. lekci HTML a CSS
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
2401 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity