Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET
Využij akce až 80% zdarma při nákupu e-learningu. Více informací .
BF summer

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 přidáme tabulku na svůj web a dále si zmíníme seznamy. Po seznamech se konečně dostaneme k CSS a designu webových stránek.

Podstránka dovednosti

K našemu webu si vytvořte opět novou podstránku, tentokrát ji uložíme jako dovednosti.html. Vyplňte si vše potřebné (doctype, html, head, body) a 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 umíme. Ikony jsem opět získal pomocí webového nástroje http://www.iconfinder.com. 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>

A náhled v prohlížeči:

HTML tabulka pro výpis dovedností

Stránku si opět nalinkujeme z index.html. Prakticky jsme tedy použili tabulku na našich stránkách.

Seznamy

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 3 typy seznamů.

Neuspořádaný seznam

Prvním typem seznamu je <ul> (Unordered List = neuspořádaný seznam). 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. <ul> je tag párový a obaluje položky seznamu.

Položka seznamu

Tag <li> (jako List Item) označuje jednu položku seznamu a nejčastěji tedy obaluje její text. Může však obsahovat i obrázky a další libovolné elementy.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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>

Výstup:

Seznamy v HTML
index.html

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

Uspořádaný seznam

Uspořádaný seznam (Ordered List) se liší od neuspořádaného tím, že prvky jsou ř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, opět <ol> obalíme 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>

A výsledek:

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

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

  • reversed - Pokud je atribut uveden, jsou položky seznamu číslovány opačně, tedy sestupně. Jako hodnota se obvykle uvádí 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.

Elementu <li> můžeme přidat následující 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.

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:

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

Slovníček pojmů

Posledním typem seznamu je slovníček pojmů (Definition List). Narozdíl od prvních dvou obsahuje 2 typy položek, a to:

Pojem

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

Definice

Pojem vysvětlíme v tagu <dd> (jako 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ší díly, 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í.


 

Předchozí článek
Tabulky v HTML
Všechny články v sekci
Webové stránky krok za krokem
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
98 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi 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 (8)

 

 

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

Avatar
Pavel Kubalík:16.10.2020 14:34

Dobrý den
Možná, že jsem s tím už trapný, ale ono to je opravdu výborné. Dobrá práce.
Dnes jsem se rozhodl, že se budu opravdu snažit vydržet a dostudovat HTML a v průběhu začít ještě PHP.
Zatím to je pro mne rozhodnutí, jako že příští podzim vyhraji Velkou pardubickou.
Chtěl bych mít opravdu svůj web a na něm databázi. Uvidíme. Snad i ten covid nějak přežiji.
Děkuji PK

 
Odpovědět
16.10.2020 14:34
Avatar
Anita Gasparikova:9.11.2020 18:10

<tr>
<td> <img src="obrazky/les­.png" alt="les"/> </td>
neviem , čo je zle, nefunguje

 
Odpovědět
9.11.2020 18:10
Avatar
Štefan Murza:17.11.2020 15:48

Ďakujem, funguje to.

 
Odpovědět
17.11.2020 15:48
Avatar
Filip Fabián:20.12.2020 16:32

Ahoj, nevíte někdo jak u prvního cvičení "dovednosti" upravit velikost obrázků? Děkuji :)

 
Odpovědět
20.12.2020 16:32
Avatar
Veronika MAREČKOVÁ :24. ledna 18:06

Ahoj, osobně jsem to upravovala ve Photoshopu, ale zde je odkaz bez instalace programu: https://www.adobe.com/…editing.html

 
Odpovědět
24. ledna 18:06
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Veronika MAREČKOVÁ :24. ledna 18:22

chybí zde

</tr>

+ zde nevidím označení tabulky

<table> </table>

, kód by měl vypadat takto:

<table>
        <tr>
            <td></td>
        </tr>
    </table>

Table = tabulka, Tr = řádek tabulky Td = sloupec tabulky a pokud je kód tabulky stejný tak bych se podívala kde mám uložený obrázek a pod jakým názvem.

 
Odpovědět
24. ledna 18:22
Avatar
Aleš Masařík:24. února 16:27

Super, vše výborně popsané :-)

 
Odpovědět
24. února 16:27
Avatar
Dusan Fedor
Člen
Avatar
Dusan Fedor:15. dubna 14:44

Ja to vše skoušim ve Visual studio a zatím je to na 1

 
Odpovědět
15. dubna 14:44
Avatar
weverka
Člen
Avatar
Odpovídá na Dusan Fedor
weverka:16. dubna 8:20

Není Visual Studio přehnané na jednoduché HTML. Možná Visual Studio code, ale lepší máš PSPad nebo Sublime text

Odpovědět
16. dubna 8:20
Weby jsou budoucnost IT
Avatar
Dusan Fedor
Člen
Avatar
Odpovídá na weverka
Dusan Fedor:16. dubna 11:11

Weverka, mne sa zdá právě Visual velice jednoduchý, v něm můžu skoušet HTML,CSS a javuscript najednou, jenom nevím jak to dostat na web a věci kolem toho. Jak říkam jsem amtér a mám rád výzvy no podívam se na tvůj tip.
Děkuji

 
Odpovědět
16. dubna 11:11
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 123. Zobrazit vše