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
  4. zápěstí
  5. noha
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. druhý případ
    • áčko
    • béčko
    • céčko
    • déčko