5. díl - Seznamy v HTML a zopakování tabulky

HTML a CSS Statický web Seznamy v HTML a zopakování tabulky American English version English version

V minulém dílu našeho seriálu tutoriálů pro HTML jsme si vysvětlili tabulky. Dnes si 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 2 řá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 devbook.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 devbooku.</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.

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:

Neuspořádaný seznam ul – HTML tutoriál

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:

Uspořádaný seznam ol – HTML tutoriál

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:

Složitější uspořádaný seznam ol – HTML tutoriál

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>devbook</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ů dl – HTML 5 manuál

A víte co nás čeká příště? Úvod do stylování! Těšte se, protože zanedlouho bude náš web vypadat opravdu k světu :)


 

  Aktivity (3)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (32 hlasů) :
4.843754.843754.843754.843754.84375


 


Miniatura
Předchozí článek
Tabulky v HTML
Miniatura
Všechny články v sekci
Webové stránky krok za krokem
Miniatura
Následující článek
Cvičení k 4.-5. lekci HTML a CSS

 

 

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

Avatar
Mego
Člen
Avatar
Mego:

Ale úrovňou je v roku 2002 :D Dneska aj tak všetci robia všetko na storme

Odpovědět 1. prosince 12:07
Radšej 15 minút skôr, ako 15 sekúnd neskoro...
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Mego
David Čápka:

Pleteš si pojmy editor a IDE a pojmy programovací jazyk a značkovací jazyk. Komentuješ pod úvod do HTML, PSPad je tu naprosto v pořádku a jako editor nabízí také rozumnou funkcionalitu.

Odpovědět  +1 1. prosince 12:17
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Mego
Člen
Avatar
Odpovídá na David Čápka
Mego:

Nepletem... ale kto by dneska robil v editore, keď može robiť v IDE? HTML neni programovací jazyk, to dobre viem. Ale Storm sa na neho upotrebiť dá ;) A čo ti je lepšie, vedieť poriadne jedno IDE a používať ho na všetko, alebo na html používať PSpad, na CSS používať sublime, na SQL workbench, na PHP storm, na javascript Netbeans?

Odpovědět 1. prosince 12:30
Radšej 15 minút skôr, ako 15 sekúnd neskoro...
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Mego
David Čápka:

HTML není vázané na PHP, proto nemá žádný smysl doporučovat PHPstorm v tomto kurzu. Ten člověk může začít dělat v ASP.NET ve Visual Studio nebo v NetBeans v Javě. PHPStorm je navíc placený a na HTML zbytečný a nevhodný. Kdybys měl praktické lektorské zkušenosti, věděl bys také co za lidi v HTML začíná a jaké problémy jim dělá používat cokoli, co generuje projekty a podobně.

Odpovědět  +3 1. prosince 13:55
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

PSPad je z pravěku. To že je nejnovější verze někdy z roku 2016 neznamená, že jde o jakkoliv moderní software.

Odpovědět 1. prosince 16:14
Creating websites is awesome till you see the result in another browser ...
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Jiří Gracík
David Čápka:

PSpad je úplně normální editor. To je jako bys říkal cyklistovi, že kolo je z pravěku a že teď máme auta :)

Odpovědět  +1 1. prosince 16:15
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na David Čápka
Jiří Gracík:

Ne, to je jako bys říkal cyklistovi, že mezi kolem z kamene a bambusu a mezi karbonovo-hliníkovým kolem v podstatě není rozdíl. Jsou tu vzhlednější, kompaktnější, pohodlnější a svižnější editory a IDE, než PSPad

Editováno 1. prosince 16:20
Odpovědět 1. prosince 16:20
Creating websites is awesome till you see the result in another browser ...
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Jiří Gracík
David Čápka:

Bohužel jsi mě nepochopil, nevadí :) Ať se daří.

Odpovědět 1. prosince 16:20
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovědět 1. prosince 16:22
Creating websites is awesome till you see the result in another browser ...
Avatar
Michal Martinec:

Pozrite, mne osobne ako cloveku, ktory s tymto vsetkym len zacina a uci sa z roznych zdrojov (itnetwork.cz je len jednym z nich), mi uplne PSPad vyhovuje a to z viacerych dovodov. Vsade inde na zaciatok odporucaju prave Storm. Bol som na ich stranke a ked som si vsimol ze je to len trial verzia na 30 dni a nasledne si za to treba platit, hned som to vypol. Nevidim totiz dovod platit za Storm, ked sa len ucim popri robote a boh vie kolko sa este len ucit budem. Storm sa mi oplati po tom, co sa vsetko naucim a budem sa chciet posunut niekam dalej.

 
Odpovědět  +1 2. prosince 21:51
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 75. Zobrazit vše