5. 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álu pridáme tabuľku na svoj web a ďalej si zmienime zoznamy. Po zoznamoch sa konečne dostaneme k CSS a dizajnu webových stránok.

Podstránka zručnosti

K nášmu webu si vytvorte opäť novú podstránku, tentokrát ju uložíme ako dovednosti.html. Vyplňte si všetko potrebné (doctype, html, head, body) a do tela novej stránky vložme tabuľku s našimi vedomosťami. Tabuľka bude mať 2 riadky, v prvom bude ikona jazyka, ktorý ovládame, v druhom opis toho, čo vieme. Ikony som opäť získal pomocou webového nástroja http://www.iconfinder.com. 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>

A náhľad v prehliadači:

Stránku si opäť nalinkuje z index.html. Prakticky sme teda použili tabuľku na našich stránkach.

Zoznamy

Zoznam používame vždy, keď potrebujeme vymenovať položky, ktoré so sebou nejako súvisí. Môže sa jednať napr. O zoznam použitej literatúry, o číslované kroky v tutoriálu alebo o navigačné menu. Určite je dobre poznáte ako "zarážky" napr. Z MS Wordu. V HTML máme 3 typy zoznamov.

Neusporiadaný zoznam

Prvým typom zozname je

(ako List Item) označuje jednu položku zoznamu a najčastejšie teda obaľuje jej text. Môže však obsahovať aj obrázky a ďalšie ľubovoľné elementy.
Ukážme si jednoduchý príklad neusporiadaného zoznamu:
```
<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

Pomocou
- . Miesto odrážok nám pri položkách zoznamu prehliadač v základnom štýle zobrazia čí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ýsledok:
  
  Můj prioritní jídelníček
  
  index.html
  
  Na rozdiel od neusporiadaného zoznamu má element
  1. reversed - Ak je atribút uvedený, sú položky zoznamu číslované opačne, teda zostupne. Ako hodnota sa zvyčajne uvádza reversed, ale môže sa uviesť aj prázdna alebo žiadna.
  2. štart - Hodnota atribútu určuje prvé číslo v zozname, zadávame ako číslo.
  3. type - Nastaví typ číslovanie, môžeme nastaviť hodnoty: 1, A, a, I, aj pre arabské číslice, Rímske písmená a rímske číslice.
  4. môžeme pridať nasledujúce atribút:
    - value - U usporiadaného zoznamu označuje číslo danej položky. Nasledujúce položky sa potom automaticky číslujú od tejto hodnoty.
    Skúsme si ešte pokročilejšie príklad:
```
<ol reversed="reversed" start="4" type="I">
  <li>Položka</li>
  <li>Položka</li>
  <li>Položka</li>
</ol>
```
    výsledok:
    
    Pokročilejší příklad HTML seznamů
    
    index.html
    
    Slovníček pojmov
    
    Posledným typom zozname je slovníček pojmov (Definition List). Narozdiel od prvých dvoch obsahuje 2 typy položiek, a to:
    
    Pojem
    Vysvetľovanie pojem vkladáme to tagu

V nasledujúcom cvičení, Riešené úlohy k 4.-5. lekciu 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é 539x (2.13 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

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

Užívateľské hodnotenie:

8 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

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

Podstránka zručnosti

Zoznamy

Neusporiadaný zoznam

Slovníček pojmov

Pojem

Stiahnuť