tmw 2 html2_2010

doc. Ing. Zdislav EXNAR, CSc.

Tvorba multimediálnych web stránokTvorba multimediálnych web stránok

HTML - 2

Obsah prednášky

1. Zoznamy2. Hypertextové odkazy3. E-mailová adresa ako odkaz4. Záložky5. Obrázky vo VEB dokumente6. Tabuľky

Zoznamy

Zoznamy tvoria dôležitú zložku, ktorá sa používa pri tvorbe štruktúrovaných WEB dokumentov.

Značky zoznamov

ZnačkaVýznam

počiatočná koncová

<ul> </ul> Unordered list – nezoradený zoznam

<ol> </ol> Ordered list – zoradený (číslovaný) zoznam

<li> </li> List item – položka zoznamu

<dl> </dl> Definičný zoznam

<dt> </dt> Položka definičného zoznamu

<dd> </dd> Vlastná definícia

Nečíslovaný zoznam

Číslovaný zoznam

Definičné zoznamy

Vnorené zoznamy

Zoradený zoznam

Hypertextové odkazy

Umožňujú previazanie jednotlivých dokumentov v sieti Internet.

Každej stránke na Internete je pridelená adresa URL (Uniform Resource Lacator) napr. http://www.lm.uniza.sk/~exnar/tms/literatura.pdf

URL je možné zadávať do WEB dokumentu absolútne alebo relatívne. Absolútne zadanie URL predstavuje úplnú cestu a názov súboru. Relatívne zadanie obsahuje len názov súboru alebo časť cesty (keď sa súbor nachádza v koreňovom adresári) alebo po použití značky <base>.

Hypertextové odkazy

Na vkladanie odkazov sa používa značka <a>...</a>

E-mailová adresa ako odkaz

Záložky

Hypertextový odkaz môže odkazovať aj na jednotlivé časti dokumentu.

Obrázky vo VEB dokumente

Štandard HTML podporuje grafické formáty GIF a JPG.

Pri vkladaní obrázkov do dokumentu je potrebné venovať pozornosť veľkosti obrázku. Veľké obrázky sa pomaly načítajú. Obrázky je potrebné komprimovať.

Obrázky

Obrázok je vhodné umiestniť do samostatného odseku alebo za značku <br />, inak bude obrázok prilepený na koniec predchádzajúceho textu.

Obrázky

Ďalej je potrebné určiť miesto, kam má byť obrázok umiestnený a jeho veľkosť.

Obrázky

Obtekanie obrázkov textom.

Obrázky na pozadí

Vzhľad dokumentu je možné výrazne ovplyvniť voľbou farby pozadia. Je možné použiť ako pozadie aj obrázok, ktorý bude slúžiť ako tapeta na pozadí stránky.

Obrázok by nemal mať výrazné hrany a mozaiku, pretože by rušil celkový dojem dokumentu.

Zásady používania obrázkov

Pri použití obrázkov dodržujte tieto zásady:• nepoužívajte obrázky tam, kde to nie je potrebné,• používajte obrázky s maximálne 256 farbami,• používajte atribút alt, pretože umožní zobrazenie

kódu stránky i keď obrázky nebudú zobrazené,• používajte atribút width a height, pretože tým

zrýchlite načítanie stránky prehliadačom,• animované obrázky (formát gif) používajte v

rozumnej miere, pretože sú veľké a stránka sa pohybom stáva málo prehľadná.

Tabuľka

Je základným stavebným prvkom WEB dokumentu. Vloženie tabuľky <table> ...</table>, riadky tabuľky <tr>...</tr> ,jednotlivé bunky <td>...</td> , hlavička tabuľky <th>...</th> ,popis tabuľky <caption>...</caption> ,rámček tabuľky <table border="5"> ,odsadenie textu <table cellpadding="4"> ,medzera medzi bunkami <table cellspacing="7" >.

Tabuľky

Spájanie buniek

Bunky je možné spojiť:v riadku pomocou atribútu <td colspan="2">...</td>v stĺpcoch <td rowspan="2">...</td>

Veľkosť buniek

Veľkosť bunky sa automaticky nastavuje podľa textu, ktorý je umiestnený v bunke. Šírka stĺpcov sa nastaví podľa najdlhšieho textu v danom stĺpci.

Veľkosť stĺpca je možno nastaviť pomocou atribútu buniek napríklad v prvom riadku. Šírka sa nastavuje pomocou absolútnej hodnoty v bodoch alebo relatívnej hodnoty v percentách vzhľadom k šírke okna.

Veľkosť buniek a zarovnaní textu v bunke

Relatívna veľkosť tabuľky a stĺpcov