Ako vložiť a upraviť zoznamy pomocou HTML

Blogger ponúka možnosť vkladať do príspevkov dva typy zoznamov (číslované s arabskými číslicami a neočíslované s čiernymi guľôčkami). Ak však ovládame niekoľko užitočných HTML značiek, naše možnosti sa značne rozširujú a tým, že dokážeme vytvoriť zoznamy s rôznymi znakmi, číslovaním, či dokonca s obrázkami, môžeme odlíšiť náš blog od množstva iných.

zdroj

V službe blogger môžeme vytvárať zoznamy pomocou html značiek dvomi spôsobmi. Jednou z možností je vložiť číslovaný, alebo nečíslovaný zoznam, ktorý blogger ponúka a následne sa prepnúť do zobrazenia html, kde upravíme zoznam do požadovanej podoby. Druhou možnosťou je rovno sa prepnúť do html zobrazenia a vytvoriť vlastný zoznam.

Základné značky na vytváranie zoznamov:

značka	vysvetlenie
<li> …… </li>	položka zoznamu
<ol> …… </ol>	číslovaný zoznam
<ul> …… </ul>	neočíslovaný  zoznam
<dl> …… </dl>	definičný zoznam
<dt> …… </dt>	definovaný termín
<dd> …… </dd>	definícia termínu

Neočíslované (odrážkové) zoznamy

Namiesto čísel a písmen sa pred jednotlivými položkami používajú odrážky. V odrážkových zoznamoch sa na ohraničenie celého zoznamu používajú značky <ul> a </ul> a na ohraničenie položiek zoznamu sa používa <li> a </li>. Odrážkovým zoznamom môžeme nastaviť vlastnosti list style type s hodnotami disc (plný krúžok, predvolené), circle (prázdny krúžok), sqare (štvorec), none (žiaden znak).

HTML KÓD	UKÁŽKA
<UL>  <LI>položka 1</LI>  <LI>položka 2</LI>  <LI>položka 3</LI> </UL>	položka 1 položka 2 položka 3
<UL TYPE="circle">  <LI>položka 1</LI>  <LI>položka 2</LI>  <LI>položka 3</LI> </UL>	položka 1 položka 2 položka 3
<UL TYPE="square">  <LI>položka 1</LI>  <LI>položka 2</LI>  <LI>položka 3</LI> </UL>	položka 1 položka 2 položka 3
<UL TYPE="none">  <LI>položka 1</LI>  <LI>položka 2</LI>  <LI>položka 3</LI> </UL>	položka 1 položka 2 položka 3

K odrážkovým zoznamom sa zaraďujú aj pre nás asi najzaujímavejšie obrázkové zoznamy. Ak chceme vytvoriť obrázkový zoznam, musíme si pripraviť vhodný obrázok (smile, plusy, mínusy, maskot resp. logo blogu). Obrázok upravíme na veľkosť 32 x 32 pixelov (odporúčaná veľkosť pre ikony), resp. menšiu. Najvhodnejším typom obrázkov sú obrázky vo formáte png (jpg totiž menia po nahratí svoju bielu farbu na sivú). Obrázok do formátu png jednoducho prevedieme tak, že si obrázok otvoríme v skicári a dáme uložiť vo formáte png. Obrázok uložíme do nepublikovaného príspevku a skopírujeme jeho url adresu, ktorú vložíme do html kódu.

HTML KÓD	UKÁŽKA
<ul style="list-style-image: url(url adresa obrázka);"> <li>položka 1</li> <li>položka 2</li> <li>položka 3</li> </ul>

Číslované zoznamy

Namiesto kruhov a štvorcov sa pred jednotlivými položkami používajú ako odrážky čísla. V číslovaných zoznamoch sa na ohraničenie celého zoznamu používajú značky <ol> a </ol> a na ohraničenie položiek zoznamu sa používa <li> a </li>. Číslovaným zoznamom môžeme nastaviť atribút type, určujúci typ číslovania s nasledujúcimi hodnotami: 1 arabské číslice, a malé písmená, A veľké písmená, i malé rímske číslá, I veľké rímske čísla.

HTML KÓD	UKÁŽKA
<ol type="1"> <li>Prvá položka</li> <li>Druhá položka</li> <li>Tretia položka</li> </ol>	Prvá položka Druhá položka Tretia položka
<ol type="a"> <li>Prvá položka</li> <li>Druhá položka</li> <li>Tretia položka</li> </ol>	Prvá položka Druhá položka Tretia položka
<ol type="A"> <li>Prvá položka</li> <li>Druhá položka</li> <li>Tretia položka</li> </ol>	Prvá položka Druhá položka Tretia položka
<ol type="i"> <li>Prvá položka</li> <li>Druhá položka</li> <li>Tretia položka</li> </ol>	Prvá položka Druhá položka Tretia položka
<ol type="I"> <li>Prvá položka</li> <li>Druhá položka</li> <li>Tretia položka</li> </ol>	Prvá položka Druhá položka Tretia položka

Definičné zoznamy

Slúžia na definovanie pojmov. Na ohraničenie zoznamu sa používajú značky <dl> a </dl>. Pojmy, ktoré chceme vysvetliť sú ohraničené značkami <dt> a </dt> a definície sú v značkách <dd> a </dd>. Medzi značky je možné vložiť i obrázok, prípadne odkaz.

HTML KÓD	UKÁŽKA
<dl> <dt>Pojem 1</dt> <dd>vysvetlenie pojmu 1</dd> <dt>Pojem 2</dt> <dd>vysvetlenie  pojmu 2</dd> </dl>	Pojem 1 vysvetlenie pojmu 1 Pojem 2 vysvetlenie pojmu 2

 

Vnorené zoznamy

Jednotlivé typy zoznamov je možné do seba vnárať. Vnorený zoznam neobsahuje žiadne počiatočné alebo koncové značky (začína koncovou značkou nadradenej položky a pred ostatnými značkami nadradeného zoznamu. Pomocou tejto metódy možno do seba vnárať ľubovolný typ zoznamov.

 

HTML KÓD	UKÁŽKA
<UL>  <LI>Téma 1    <UL>      <LI>Položka 1        <UL>          <LI>záznam 1</LI>          <LI>záznam 2</LI>        </UL>      </LI>      <LI>Položka 2</LI>    </UL>  </LI> </UL>	Téma 1 Položka 1 §  záznam 1 §  záznam 2 Položka 2

Dúfam, že som vás dnešným návodom inšpirovala.

Zdroje:

www.jakpsatweb.cz

http://suloweb.html.sk/html-zoznamy/

http://tvorbawebu.php5.sk/subor/zoznamy_odrazky.html

http://di.ics.upjs.sk/informatika_na_zs_ss/studijny_material/www_hypertext/www/www4.htm

Schafer, S.(2009): HTML, XHTML a CSS (Bible pro tvorbu WWW stranek)