6. diel - Zoznamy v HTML a zopakovanie tabuľky
V minulej lekcii, Tabuľky v HTML , sme si vysvetlili tabuľky.
Dnes si v HTML tutoriále opäť rozšírime náš web pridaním tabuľky, ktorú sme sa novo naučili. Ďalej si spomenieme HTML zoznamy, čo je posledná téma pred CSS a designom webových stránok.
Rozšírenie projektu - Podstránka zručnosti
Vytvoríme opäť novú podstránku. Vo VS Code si otvoríte celý priečinok
prvni_web/
, pokiaľ ešte nemáte, a to kliknutím na možnosť
Otvoriť v Code v prieskumníku Windows. Kliknutím pod súčasné HTML
súbory v ľavom paneli pravým tlačidlom myši a voľbou Nový súbor
pridáme súbor dovednosti.html
.
Vyplníme si všetko potrebné (DOCTYPE
,
<html>
, <head>
, <body>
,
napr. pomocou napísania !
a stlačenia Enter).
Do tela novej stránky vložíme tabuľku s našimi schopnosťami. Tabuľka bude mať dva riadky:
- v prvom bude ikona jazyka, ktorý ovládame,
- v druhom popis toho, čo v danom jazyku vieme.
obrazky/
:
Alebo opäť získať nejaké vlastné pomocou webového nástroja Iconfinder. Celý výsledný kód našej podstránky by mohol vyzerať 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 otvoríme v prehliadači:
Prakticky sme teda použili tabuľku na našich stránkach. Do stránky sme
tiež opäť vložili odkaz na centrálny index.html
. Stránku
zatiaľ z indexu odkazovať nemusíme, neskôr si na ňu pridáme
navigáciu.
Zoznamy v HTML
Zoznam používame vždy, keď potrebujeme vymenovať položky, ktoré so sebou nejako súvisia. Môže ísť napríklad o zoznam použitej literatúry, o číslované kroky v tutoriáli alebo o navigačné menu. Určite ich dobre poznáte ako "odrážky" napr. z MS Wordu.
V HTML máme k dispozícii 3 typy zoznamov:
- Neusporiadaný zoznam
<ul>
- Usporiadaný zoznam
<ol>
- Slovníček pojmov
<dl>
<ul>
Prvým typom zoznamu je neusporiadaný zoznam. Zapisujeme ho
pomocou párového tagu <ul>
(Unordered List -
neusporiadaný zoznam). Tag potom obaľuje položky zoznamu. Položky v ňom sú
neočíslované (neusporiadané) a štandardne sa zobrazujú
pomocou odrážok. Hoci je zoznam chápaný ako neusporiadaný,
poradie prvkov v kóde na vykreslenej stránke samozrejme zostane
zachované.
Položky zoznamu <li>
Tag <li>
(List Item - položka zoznamu) označuje
jednu položku zoznamu a najčastejšie obaľuje text. Môže však obsahovať
aj obrázky a ďalšie ľubovoľné elementy. Tag <li>
je
párový, ale zatvárací tag je možné vynechať. My si ho pre prehľadnosť
budeme uvádzať.
Vytvoríme si nový súbor seznam.html
a vložíme doň opäť
HTML štruktúru pomocou !
a Enter, v lekcii ju už
nebudeme opakovať. Ukážme si jednoduchý príklad neusporiadaného zoznamu,
ktorý 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 vyzerá takto:
Pomocou <ul>
sa často rieši navigačné menu, počas
kurzu si to ukážeme.
2. Usporiadaný zoznam
<ol>
Usporiadaný zoznam (Ordered List) použijeme, pokiaľ z hľadiska
významu záleží na poradí položiek. Položky sú tu
zoradené podľa nejakého kľúča, tým je najčastejšie priorita
alebo postupnosť akcií. Zápis je úplne rovnaký, ako pri neusporiadanom
zozname, použijeme však párový tag <ol>
. Do neho potom
vložíme opäť položky zoznamu <li>
. Miesto odrážok nám
pri položkách zoznamu prehliadač v základnom štýle 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ýsledok vyzerá takto:
Atribúty
Na rozdiel od neusporiadaného zoznamu má element <ol>
niekoľko atribútov:
reversed
- Ak je atribút uvedený, položky zoznamu budú číslované opačne, teda zostupne. Ako hodnota sa obvykle uvádzareversed
(reversed = "reversed"
), ale môže sa uviesť aj prázdna alebo žiadna.start
- Hodnota atribútu určuje prvé číslo v zozname, zadávame ako číslo.type
- Nastavuje typ číslovania, môžeme nastaviť hodnoty:1
,A
,a
,I
,i
pre arabské číslice, latinské písmená a rímske číslice.
<li>
môžeme pridať atribút:
value
- Pri usporiadanom zozname označuje číslo danej položky. Nasledujúce položky sa potom automaticky číslujú od tejto hodnoty.
Príklad usporiadaného zoznamu s atribútmi
Skúsme si ešte pokročilejší príklad:
<ol reversed="reversed" start="4" type="I"> <li>Položka</li> <li>Položka</li> <li>Položka</li> </ol>
Výsledok bude vyzerať takto:
3. Slovníček pojmov
<dl>
Posledným typom zoznamu je slovníček pojmov, pre ktorý
používame tag <dl>
(Definition List). Oproti
prvým dvom typom slovníčok pojmov obsahuje 2 typy položiek, a to:
1. Vysvetľovaný pojem
<dt>
Vysvetľovaný pojem vkladáme to tagu <dt>
(Definition Term).
2. Definícia <dd>
Pojem vysvetlíme v tagu <dd>
(Definition
Definition).
Poďme si urobiť ukážku:
<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ýsledok:
Tešte sa na ďalšie lekcie, pretože onedlho bude náš web vyzerať naozaj k svetu:)
V nasledujúcom cvičení, Riešené úlohy k 5. a 6. lekcii HTML a CSS, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.
Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 717x (2.13 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS