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

Předchozí
Další

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/:

Moderní webdesign Moderní webdesign Moderní webdesign

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 781x (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
Moderní webdesign
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í:
2675 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