10. lekce - seznamy
Dalším prvkem stránek jsou tzv. seznamy, tj. přehled nějakých položek (třeba odkazů apod.).
Seznamy jsou dvojího typu, nečíslované a číslované. Struktura nečíslovaného seznamu je následující - začátek a konec seznamu je omezen tagem UL a jednotlivé položky jsou uvozeny tagem LI (konec tagu LI v HTML můžeme opět vynechat, ale pro budoucí XHTML raději zapíšeme), viz například:
<ul>
<li>Jablka</li>
<li>Hrušky</li>
<li>Švestky</li>
<li>Banány</li>
</ul>
Jako odrážky jsou standardně nastavené "puntíky", chcete-li změnit typ odrážky, můžete ve zdroji stránky (html) zkusit parametr TYPE tagu UL s hodnotami circle nebo disc nebo square, například:
<ul type="disc">
Odborníci stylů znalí ovšem použjí úpravu vlastností v souborů stylů (css), pro tyto nečíslované seznamy ul můžeme v kaskádových stylech nadefinovat například tyto vlastnosti:
list-style-type: disc (nebo circle square decimal lower-roman lower-alpha upper-alpha) - typ odrážky
list-style-position: inside (nebo outside) - zarovnání odrážky vzhledem k textu, inside = odrážky v úrovni textu, outside = odrážky mimo text
list-style-image: - definice obrázkové odrážky (v HTML to jde jen dost komplikovaně)
Například doplníme do definice stylů:
li {color: green; list-style-image:url(SIPKA1.GIF); list-style-position: inside; list-style-type: disc}
Všimněte si, že po vložení vlastností do TopStylu bude zápis vypadat jinak, jde o takzvanou hromadnou deklaraci (definici) vlastností, zatím necháme TopStyle, aby ji takto upravoval sám:
ul {list-style: square outside url(SIPKA1.GIF);}
V jednom zápisu je také použitý tag UL, ve druhém zase LI, můžete vyzkoušet, že v tomto případě je to zatím jedno, výsledek bude stejný.
Pro číslované seznamy se používá tag OL:
<ol>
<li>Jablka</li>
<li>Hrušky</li>
<li>Švestky</li>
<li>Banány</li>
</ol>
Seznamy mohou být složitější, například vnořený číslovaný seznam do nečíslovaného seznamu (dovedete si představit, co se zobrazí?):
<ul>
<li>Evropa</li>
<ol>
<li>Německo</li>
<li>Francie</li>
<li>Velká Británie</li>
<li>Česká republika</li>
</ol>
<li>Asie</li>
<ol>
<li>Korea</li>
<li>Japonsko</li>
<li>Indie</li>
</ol>
</ul>
Úkoly:
Úkol (3 body):
Vytvořte stránku učitelé.html, kde bude seznam vašich vyučujících s předměty, které vás učí, podobně jako na obrázku níže (bez obarvení položek). Stránku (případně styl) uložte do složky SKOLA.
Doplňte nadpis, styl, pro odrážku použijte obrázek a nezapomeňte doplnit odkaz do stránky index.html (obrázek pro odrážku můžete použít z této složky - SIPKA1.GIF).
| Název školy: | Základní škola, Hradec Králové, M. Horákové 258 |
| Název projektu: | EU peníze školám |
| Číslo projektu: | CZ.1.07/1.4.00/21.2575 |
| Téma: | Tvorba WWW stránek |
| Název: | VY_32_INOVACE_10_10B_tvorba www10 |
| Autor: | Pavel Petr |