Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET. Zároveň využij akce až 50 % zdarma při nákupu e-learningu. Více informací:
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Slevovy týden 3/50

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:

HTML tabuľka pre výpis zručností

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

 

Predchádzajúci článok
Tabuľky v HTML
Všetky články v sekcii
Webové stránky krok za krokom
Preskočiť článok
(neodporúčame)
Riešené úlohy k 4.-5. lekciu HTML a CSS
Článok pre vás napísal David Čápka
Avatar
Užívateľské hodnotenie:
7 hlasov
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity