Nápověda:Seznamy

Z Wikiverzity
(přesměrováno z Nápověda:Seznam)
Skočit na navigaci Skočit na vyhledávání
Tato stránka není ještě hotová.

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
  • 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
### palec
### ukazováček
### prostředníček
## zápěstí
# noha
## koleno
# hlava
## nos
## uši
  1. ruka
    1. prsty
      1. palec
      2. ukazováček
      3. prostředníček
    2. zápěstí
  2. noha
    1. koleno
  3. hlava
    1. nos
    2. 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
  1. ruka
    • prsty
      1. první je palec
      2. druhý je ukazováček
      3. třetí je prostředníček
    • zápěstí
  2. noha
    1. koleno
  • hlava
    1. nos
    2. 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>
  • ruka
  • noha
  • hlava
<ol>
  <li>ruka</li>
  <li>noha</li>
  <li>hlava</li>
</ol>
  1. první
  2. druhý
  3. třetí
<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>
  1. ruka
    • prsty
      1. první je palec
      2. druhý je ukazováček
      3. třetí je prostředníček
    • zápěstí
  2. noha

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>
  1. první
    • áčko
    • béčko
  2. druhé
    • áčko
    • béčko
<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>
  1. první
    • áčko
    • béčko
  2. druhé
    • áčko
    • béčko

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>
  1. první případ
    • áčko
    • béčko
  2. druhý případ
    • áčko
    • béčko
    • céčko
    • déčko

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>
  1. první případ
    • áčko
    • béčko
  2. druhý případ
    • áčko
    • béčko
    • céčko
    • déčko

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>
  1. první případ
    • áčko
    • béčko
  2. druhý případ
    • áčko
    • béčko
    • céčko
    • déčko