Nápověda:Seznamy
Seznam sestává z několika položek (items), řazených zpravidla pod sebe
Seznamy jednoduše
editovatMediaWiki poskytuje jednoduchou syntaxi na vytváření seznamů. V zásadě rozlišujeme nečíslovaný seznam a číslovaný seznam, které můžeme prakticky libovolně kombinovat:
Napíšeme | Zobrazí se jako |
---|---|
* ruka * noha * hlava |
|
* ruka ** prsty *** palec *** ukazováček *** prostředníček ** zápěstí * noha ** koleno * hlava ** nos ** uši |
|
# ruka ## prsty ### palec ### ukazováček ### prostředníček ## zápěstí # noha ## koleno # hlava ## nos ## uši |
|
# ruka #* prsty #*# první je palec #*# druhý je ukazováček #*# třetí je prostředníček #* zápěstí # noha ## koleno * hlava *# nos *# uši |
|
Seznamy v HTML
editovatPokud chceme mít větší kontrolu nad tím, jak se bude seznam zobrazovat, musíme seznam vytvořit pomocí syntaxe HTML. (HTML kód tu pro větší přehlednost zvýrazňujeme barevně – samozřejmě, že při jeho psaní píšeme normálně černobíle.)
Základní syntaxe
editovatNejdříve (z didaktických důvodů) zkusíme vytvořit pomocí HTML podobné seznamy, které jsme jednoduše vytvářeli už předtím:
Napíšeme | Zobrazí se jako |
---|---|
<ul>
<li>ruka
<li>noha
<li>hlava
</ul>
|
|
<ol>
<li>ruka</li>
<li>noha</li>
<li>hlava</li>
</ol>
|
|
<ol>
<li>ruka</li>
<ul>
<li>prsty</li>
<ol>
<li>první je palec</li>
<li>druhý je ukazováček</li>
<li>třetí je prostředníček</li>
<ol>
<li>zápěstí</li>
</ul>
<li>noha</li>
</ol>
|
|
Odsazení
editovatTo, že na začátku odsazujeme HTML značky podobně jako ve výsledném seznamu, má význam pouze v tom, že se budeme v kódu lépe orientovat – my, kteří kód vytváříme i ti, kteří se mu budou snažit porozumět a budou jej nás chtít dále editovat. Ale ať značky kódu umístíme kamkoliv, zobrazí se nakonec stejně:
Napíšeme | Zobrazí se jako |
---|---|
<ol>
<li>první</li>
<ul>
<li>áčko</li>
<li>béčko</li>
</ul>
<li>druhé</li>
<ul>
<li>áčko</li>
<li>béčko</li>
</ul>
</ol>
|
|
<ol>
<li>
první
</li>
<ul>
<li>
áčko
</li>
<li>
béčko
</li>
</ul>
<li>druhé</li><ul><li>
áčko</li><li>
béčko</li></ul></ol>
|
|
Prvním způsobem zápisu jsme ničeho nedosáhli – odsazení se zobrazuje stále stejně – a druhým vzteklým způsobem zápisu jsme si jej sice nakrásně znepřehlednili, zobrazení však zůstává stále stejné.
Atribut style
editovatNyní přichází na řadu tzv. atributy, kterými můžeme HTML značky různě "vylepšovat". Atributy píšeme dovnitř HTML značek. Častý je atribut style s příslušnými parametry, kterým můžeme měnit způsob zobrazení podobně, jako u kaskádových stylů CSS.
Paremetrem text-indent můžeme měnit odsazení textu. Typografická jednotka em znamená tzv. čtverčík – zhruba šířku písmene M, které by bylo stejně široké, jako je vysoké (pro větší zřetelnost zkusíme měnit parametr po dvojnásobcích em, tedy 2em, 4em atd.):
Napíšeme | Zobrazí se jako |
---|---|
<ol>
<li>první případ</li>
<ul>
<li>áčko</li>
<li>béčko</li>
</ul>
<li style="text-indent: 2em;">druhý případ</li>
<ul style="text-indent: 4em;">
<li>áčko</li>
<li style="text-indent: 6em;">béčko</li>
<li style="text-indent: 8em;">céčko</li>
<li style="text-indent: 0;">déčko</li>
</ul>
</ol>
|
|
Vidíme, že se nám odsadil začátek textu, ale číslování a puntíky nám zůstaly na svých místech. Zkusíme tedy použít parametr padding-left, tj. vyplnění zleva:
Napíšeme | Zobrazí se jako |
---|---|
<ol>
<li>první případ</li>
<ul>
<li>áčko</li>
<li>béčko</li>
</ul>
<li style="padding-left: 2em;">druhý případ</li>
<ul style="padding-left: 4em;">
<li>áčko</li>
<li style="padding-left: 6em;">béčko</li>
<li style="padding-left: 8em;">céčko</li>
<li style="padding-left: 0;">déčko</li>
</ul>
</ol>
|
|
Vidíme, že puntíky se nám ve druhém případě posunuly o stejnou vzdálenost (danou parametrem v tagu
<ul>
) a dál se nám už posunoval okraj textu. Zkusíme nyní použít parametr margin-left, tj. levý okraj:
Napíšeme | Zobrazí se jako |
---|---|
<ol>
<li>první případ</li>
<ul>
<li>áčko</li>
<li>béčko</li>
</ul>
<li style="margin-left: 2em;">druhý případ</li>
<ul style="margin-left: 4em;">
<li>áčko</li>
<li style="margin-left: 6em;">béčko</li>
<li style="margin-left: 8em;">céčko</li>
<li style="margin-left: 0;">déčko</li>
</ul>
</ol>
|
|