Chci geek triko! Chci geek triko!
Extra 10 % bodů navíc a tričko zdarma při zadání kódu "TRIKO10"

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

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

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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 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 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.

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

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


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
68 hlasů
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 sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
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
Aktivity (6)

 

 

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

Avatar
Rico ThreeDmax:10. července 22:48

Tolze jedine opakovanim a praxi

 
Odpovědět 10. července 22:48
Avatar
Andy Scheuchzer:27. července 12:20

Nevím, jestli to patří zrovna sem, ale tak jde o seznamy:
původní kód:

<h3>Nadpis</h3>
<ul>
        <li>položka</li>
        <!-- atd. -->
</ul>

po uložení v LibreOffice:

<h3 class="western">Nadpis</h3>
<ul>
        <li/>
<p style="margin-bottom: 0cm">položka</p>
        <!-- atd. -->
</ul>

Čekal jsem, že to ten kód nechá tak a bude to upravovat jenom obsah…

No, nakonec jsem musel použít verzování od Win, takže jsem ztratil 3 hodiny práce… ;-(

OPRAVDU NIKDY NEZKOUŠEJTE TAKOVOU HLOUPOST!!!

Odpovědět 27. července 12:20
Za správnost neručím.
Avatar
fischer.p
Člen
Avatar
fischer.p:19. srpna 20:52

Něco se mi nezdá - u uspořádaného seznamu s atributem reversed nejsou položky sestupně, ani tady ve vaší ukázce ani když to zkouším doma.

 
Odpovědět 19. srpna 20:52
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na fischer.p
David Čápka:19. srpna 21:33

Zkus to v jiném prohlížeči, mě to funguje korektně.

Odpovědět 19. srpna 21:33
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Lukáš Otáhal:29. srpna 20:37

Nefungují mi "speciální" znaky, tím myslím háčky, čárky a tak. Zkoušel jsem otevřít v jiném prohlížeči Chrome/Edge ( normálně mi tam všechno funguje, v obou dvou ) ale u téhle lekce ne, dokonce jsem pro ověření zkusil kompletně celý kód stránky "dovednosti" co je napsán zde vložit do pspadu a stejně mi to háže místo háčků a čárek otazníky.
Někdo nějaká rada? :)

 
Odpovědět 29. srpna 20:37
Avatar
Odpovídá na Lukáš Otáhal
Lukáš Otáhal:29. srpna 20:50

tak chyba zjištěna, podařilo se mi udělat chybu v utef-8 a jak na potvoru se ji podařilo udělat i vám zde :D po asi 8 přečtení celého kódu a kontrolou s kódy z minulých lekcí jsem to našel. Tak bych vás na ni rád upozornil že v "Podstránce dovednosti" máte v kódu chybičku v zápisu utef-8, je tam pouze utf-8, tak aby to nezmátlo ještě někoho :D

 
Odpovědět 29. srpna 20:50
Avatar
Odpovídá na Lukáš Otáhal
Andy Scheuchzer:29. srpna 21:24

A co je podle tebe na UTF-8 (teda utf-8, abych to napsal stejně) špatně? Zkoušel jsem "utef-8" hledat, výsledky pouze utf-8, takže to asi nebude vůbec nic, natož kódování.

Odpovědět 29. srpna 21:24
Za správnost neručím.
Avatar
Odpovídá na Andy Scheuchzer
Lukáš Otáhal:30. srpna 7:01

No tak v tom případě nevím. V mém případě, mi nefungovali háčky ani čárky, měl jsem na pozicích s háčkem místo písmene otazník... A když jsem změnil utf-8 na utef-8 tak se mi zobrazili normálně. Našel jsem utef-8 v kódu z minulé lekce ( u sebe ), zkusil a fungovalo, ale pokud teda utef-8 opravdu nic neznamená tak nechápu proč s utf to nefunguje s utef ano.

Editováno 30. srpna 7:02
 
Odpovědět 30. srpna 7:01
Avatar
Odpovídá na Lukáš Otáhal
Lukáš Otáhal:30. srpna 7:10

Tím pádem se omlouvám za upozornění na chybu která neni chybou, ale potřeboval bych objasnit proč mi UTF-8 nefunguje ( ani v případě, že jsem celý kód zde zveřejněný zkopíroval a vložil do pspadu ) a zápis UTEF-8 ( který opravdu neexistuje jak mě upozornil Andy a sám jsem si to googlil ) mi funguje a diakritika se zobrazí.

 
Odpovědět 30. srpna 7:10
Avatar
Odpovídá na Lukáš Otáhal
Andy Scheuchzer:30. srpna 7:28

S jakým kódováním to ukládáš? V některé lekci tady jsme to řešili, zkus si pročíst komentáře.

Odpovědět 30. srpna 7:28
Za správnost neručím.
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 94. Zobrazit vše