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 Visual Studio Code si otvorte celý priečinok first_web/ 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 New File... pridáme súbor skills.html.

Vyplníme si všetko potrebné (DOCTYPE, <html>, <head>, <body>, napríklad 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.

Ikony si môžete stiahnuť nižšie a uložiť do priečinka images/:

JavaScript - Webové stránky krok za krokom

Spring Boot - Webové stránky krok za krokom

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="en">

<head>
    <meta charset="utf-8" />
    <title>Skills</title>
</head>

<body>
    <h1>Skills</h1>
        <table>
            <tr>
                <td>
                    <img src="images/html.png" alt="HTML" />
                </td>
                <td>
                    <img src="images/js.png" alt="JavaScript" />
                </td>
                <td>
                    <img src="images/java.png" alt="Java" />
                </td>
                <td>
                    <img src="images/spring-ico.png" alt="Spring Boot" />
                </td>
            </tr>
            <tr>
                <td>
                    <h2>HTML</h2>
                    <p>With my expertise in HTML, I can structure web content effectively, ensuring it is semantic, accessible, and optimized for search engines.</p>
                </td>
                <td>
                    <h2>JavaScript</h2>
                    <p>Thanks to my proficiency in JavaScript, I can create dynamic, interactive front-end interfaces.</p>
                </td>
                <td>
                    <h2>Java</h2>
                    <p>I learn Java from tutorials on ictdemy.com, enabling me to develop interactive web applications and efficient backend services.</p>
                </td>
                <td>
                    <h2>Spring Boot</h2>
                    <p>I built upon my Java skills with Spring Boot, enabling me to efficiently create RESTful APIs, manage data persistence, and implement security features.</p>
                </td>
            </tr>
        </table>

    <p><a href="index.html">Back to home page</a></p>
</body>

</html>

Stránku uložíme a otvoríme v prehliadači:

Skills

skills.html

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, číslované kroky v tutoriáli alebo navigačné menu. Určite ich dobre poznáte ako "odrážky" napríklad z MS Word.

V HTML máme k dispozícii 3 typy zoznamov:

Neusporiadaný zoznam <ul>
Usporiadaný zoznam <ol>
Slovníček pojmov <dl>

1. Neusporiadaný zoznam `<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 list.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žíme do elementu <body>:

<h2>What I have learned today</h2>
<ul>
    <li>How to create tables</li>
    <li>How to merge cells</li>
    <li>What does semantics mean</li>
    <li>How to create an unordered list</li>
</ul>

Uložíme. A výstup vyzerá takto:

Lists in HTML

list.html

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, ak 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>. Namiesto odrážok nám pri položkách zoznamu prehliadač v základnom štýle zobrazí číslice:

<h2>My Priority Menu</h2>
<ol>
  <li>Spaghetti</li>
  <li>Creamy sauce</li>
  <li>Hamburger</li>
  <li>Cheeseburger</li>
  <li>Broccoli</li>
</ol>

Výsledok vyzerá takto:

My Priority Menu

list.html

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ádza reversed (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.

Aj elementu <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>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Výsledok bude vyzerať takto:

More advanced example of HTML lists

list.html

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>Article glossary</h2>
<dl>
    <dt>Tutorial</dt>
        <dd>A guide to doing things, shown step by step in most cases</dd>
    <dt>ICTdemy</dt>
        <dd>An accredited retraining facility</dd>
    <dt>List</dt>
        <dd>A set of items that are related somehow</dd>
</dl>

A výsledok:

Glossary of Terms for the Article

list.html

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é 30x (2.14 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

Článok pre vás napísal David Hartinger

Užívateľské hodnotenie:

95 hlasov

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity

Najčastejšie vyhľadávané

6. diel - Zoznamy v HTML a zopakovanie tabuľky

Rozšírenie projektu - Podstránka zručnosti

Zoznamy v HTML

1. Neusporiadaný zoznam <ul>

Položky zoznamu <li>

2. Usporiadaný zoznam <ol>

Atribúty

Príklad usporiadaného zoznamu s atribútmi

3. Slovníček pojmov <dl>

1. Vysvetľovaný pojem <dt>

2. Definícia <dd>

Stiahnuť

1. Neusporiadaný zoznam `<ul>`

Položky zoznamu `<li>`

2. Usporiadaný zoznam `<ol>`

3. Slovníček pojmov `<dl>`

1. Vysvetľovaný pojem `<dt>`

2. Definícia `<dd>`