Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
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í.
BF extended 2022

Lekce 5 - 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

Otevřeme si ve VS Code složku s naším webem z minulých lekcí. Vytvoříme opět novou podstránku, tentokrát 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/:

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. Ukažme si jednoduchý příklad neuspořádaného seznamu:

<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>Programátorská sociální síť a materiálová základna</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 4.-5. 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 30x (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 4.-5. lekci HTML a CSS
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
795 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 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

 

 

Komentáře
Zobrazit starší komentáře (124)

Avatar
Robin Štafl
Člen
Avatar
Robin Štafl:10.11.2021 13:47

Co prosim znamena: "Stránku si opět nalinkujeme z index.html"
To nas vrati na hlavni stranku? Kterou musim mit nekde ve slozce uloženou zvlast?

 
Odpovědět
10.11.2021 13:47
Avatar
Robin Štafl
Člen
Avatar
Robin Štafl:10.11.2021 15:59

Pokud byse uvedla hodnota prázdná nebo žádná u reversed, jak by to ve finale vypadalo?

 
Odpovědět
10.11.2021 15:59
Avatar
Petra Huláková:24. ledna 9:26

<meta charset="utf-8" />
tu nemá byť ukončenie...či sa mýlim?

 
Odpovědět
24. ledna 9:26
Avatar
Bc.Mahmoud Alqimah:13. února 19:17

bylo to zajimavy

Odpovědět
13. února 19:17
Mody
Avatar
Blanka Svobodová:9. června 14:44

Ikonku pro Pascal jsem na uvedené web databázi nenašla, zbývající dvě byly moc veliké. Bylo by fajn je opět nahrát zde, stejně jako ikonky pro notebooky a uvést, v jaké kvalitě obrázky stahovat, aby byly stejně velké, jako v příkladu.

Odpovědět
9. června 14:44
Kdy, když né teď. Kdo, když né já?
Avatar
Ondřej Raška:15. června 12:49

Náhled v prohlížeči neodpovídá tomu co je v kódu. ITnetwork vs. devbook. Chápu, že může být pruda to furt updatovat, navíc zde to není nějak důležité. Při jiných nesrovnalostech by to pak mohlo být matoucí.

 
Odpovědět
15. června 12:49
Avatar
Barbora
Člen
Avatar
Odpovídá na Petra Huláková
Barbora :1. července 20:35

<meta charset="UTF-8">
podle mně by to mělo být takto,když jeto nepárový tag..stejně tak u img <img>...

 
Odpovědět
1. července 20:35
Avatar
Odpovídá na Robin Štafl
Nina Kubačková:2. července 12:05

Vyzkoušela jsem zadání s reversed="rever­sed", stejně jako s pouhým reversed. Obojí funguje stejně.

 
Odpovědět
2. července 12:05
Avatar
Tomáš Pup
Člen
Avatar
Odpovídá na Robin Štafl
Tomáš Pup:18. srpna 8:28

Ahoj, nevím jestli jsi to už dořešil, ale ano je to tak. Jestli si procházel všemi lekcemi tak máš určitě vytvořenou složku s názvem: ,,první web" a tam máš uložena cvičení které jsi dělal (alespoň já to tak dělám), měl by tam být právě index.html, který se dělal na začátku lekce. Takže tě to krásně vrátí na tu stránku kterou jsi tehdy vytvořil.

 
Odpovědět
18. srpna 8:28
Avatar
Jan Trnka
Člen
Avatar
Jan Trnka:7. listopadu 16:16

Ahoj, zase další perfektní článek. Díky.

 
Odpovědět
7. listopadu 16:16
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 134. Zobrazit vše