Tvorba webových stránek

Tvorba webových stránek

Seznamy Seznam je skupina odstavců označených odrážkou.  Seznam je: 

 číslovaný – je označen pořadovým číslem

nebo písmenem,  nečíslovaný – je označen značkou (odrážkou)

Seznam Celý blok seznamu má dvě části.  Nejprve je definován typ seznamu (číslovaný, nečíslovaný).  Uvnitř značky se pak nachází jednotlivé položky seznamu. 

Položka seznamu 

Položka seznamu je uzavřena v párové značce

(z angl. list item).

Pro správné zobrazení musí být uvnitř definice seznamu.  Zobrazuje se vždy na novém řádku za číslem nebo za odrážkou.  Mezi jednotlivými položkami nejsou zvětšené vertikální mezery. 

Nečíslovaný seznam 

Celý nečíslovaný seznam je uzavřen v párové značce

(unordered list).

Uvnitř se smějí vyskytovat pouze elementy
• .  V zanořeném tagu
• se ale pak mohou objevovat další tagy. 
  
  Nečíslovaný seznam Před položkami se jako odrážka zobrazí puntík.  Víceúrovňové odrážky se dají dělat zanořováním dalšího
  do
  • . Atribut type určuje vzhled odrážky: 
    
     disk – plné kolečko,  circle – kroužek,  square – čtvereček.
    
    Nečíslovaný seznam Nečíslovaný seznam s osmi položkami (bez atributů a stylů)
    
    A jeho zobrazení v prohlížeči (v seznamu není nastavena barva písma)
    
    Nečíslovaný seznam Nečíslovaný seznam s osmi položkami (s použitím atributu type)
    
    A jeho zobrazení v prohlížeči (odrážka je kroužek, u Země je plné kolečko)
    
    Číslovaný seznam 
    
    Celý číslovaný seznam je uzavřen v párové značce
    (ordered list).
    
    Uvnitř se smějí vyskytovat pouze elementy
    1. (číslované řádky).  V zanořeném tagu
    2. se ale pak mohou objevovat další tagy.  Čísla k položkám samozřejmě přidá prohlížeč, o to není třeba se starat. 
       
       Číslovaný seznam 
       
       Atribut type určuje způsob číslování:  1 – číslování arabskými čísly,  A – velká písmena,
       
        a – malá písmena,  I – římské číslice,  i – malé římské číslice.
       
       
       
       Atribut start určuje hodnotu čísla u první položky.
       
       Číslovaný seznam Číslovaný seznam s osmi položkami (bez atributů a stylů)
       
       A jeho zobrazení v prohlížeči (v seznamu není nastavena barva písma)
       
       Číslovaný seznam Číslovaný seznam s osmi položkami (s atributem type)
       
       A jeho zobrazení v prohlížeči (položky jsou označeny malými písmeny)
       
       Seznam definic Seznam definic se dnes používá hlavně k členění textu.  Celý seznam je uvozen značkou

       (definition list).  V seznamu se opakují značky

       a

       . 
       
       Seznam definic Značka

       (defined term) označuje definovaný termín.  Může se vyskytovat pouze uvnitř elementu

       . 
       
       
       
       Zobrazuje se vždy na novém řádku u levého okraje stránky.
       
       Seznam definic 
       
       Definice předchozího termínu se uvede značkou

       .
       
       Může se vyskytovat pouze uvnitř elementu

       .  Mezi

       a

       není žádná vertikální mezera.  Klasická velikost odsazení

       je 40 pixelů, ale dá se měnit pomocí CSS vlastnosti margin-left. 
       
       Seznam definic Seznam definic se třemi položkami
       
       A jeho zobrazení v prohlížeči
       
       Styly a seznamy 
       
       Použití stylů v seznamech nabízí i další možnosti volby typu odrážky a vzhledu seznamu.  list-style-image – použití obrázku u odrážky: ○ none – normální označení (bez obrázku) ○ URL(cesta) – obrázek  list-style-position – umístění odrážky: ○ inside – odrážky v úrovni textu ○ outside – odrážka mimo text
       
       Styly a seznamy  list-style-type – typ odrážky nebo čísla: ○ disc – puntík ○ circle – kolečko ○ square – čtvereček ○ decimal – arabské číslování ○ lower-roman – malé římské číslice ○ lower-alpha – malá písmena ○ upper-alpha – velká písmena ○ none – bez odrážek
       
       Styly a seznamy
       
       Nečíslovaný seznam s osmi položkami (s použitím stylu)
       
       A jeho zobrazení v prohlížeči
       
       Poznámka Všechny ukázky jsou vytvářeny v programu PSPad.  Bylo ponecháno základní nastavení zvýraznění syntaxe. 
       
       Zdroje 
       
       Texty:  http://www.jakpsatweb.cz/html/seznamy.html  http://www.jakpsatweb.cz/css/css-vlastnosti-
       
       hodnoty-prehled.html#seznamy  http://cs.wikipedia.org/wiki/Planeta  http://cs.wikipedia.org/wiki/Planetka  http://cs.wikipedia.org/wiki/M%C4%9Bs%C3% ADc_(satelit) 
       
       Obrázky:  Vlastní