Nápověda:Seznamy
Seznam sestává z několika položek (items), řazených zpravidla pod sebe
Seznamy jednoduše[editovat]
MediaWiki 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[editovat]
Pokud 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[editovat]
Nejdří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í[editovat]
To, ž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[editovat]
Nyní 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>
|
|