TNPW1 Technologie pro publikování na webu Přednáška č. 4 seznamy seznamy tabulky tabulky jejich sémantika jejich sémantika Ing. Martin Adámek Katedra informačních technologií FIM UHK

Přednáška TNPW1 – Martin Adámek 2 Seznamy číslované (ordered list) číslované (ordered list) –obsahem jsou položky (list item) –obsahem jsou položky (list item) vlastní číslování: „value“ nečíslované (unordered list) nečíslované (unordered list) –obsahem jsou položky (list item) –obsahem jsou položky (list item) vzhled odrážek lze měnit (příp. odrážku skrýt) seznam definic (definition list) seznam definic (definition list) –obsahem jsou položky definice –obsahem jsou položky definice mají řádkový obsah –a po každém je vždy vysvětlení –a po každém je vždy vysvětlení má blokový (víceřádkový) obsah –

Přednáška TNPW1 – Martin Adámek 3 Nečíslovaný seznam – příklad XHTML kód: <ul> Položka 1 Položka 1 Položka 2 Položka 2 Položka 3 Položka 3 </ul> V prohlížeči se zobrazí: Položka 1Položka 1 Položka 2Položka 2 Položka 3Položka 3

Přednáška TNPW1 – Martin Adámek 4 Číslovaný seznam – příklad XHTML kód: Položka 1 Položka 1 Položka 2 Položka 2 Položka 3 Položka 3 V prohlížeči se zobrazí: 1.Položka 1 2.Položka 2 3.Položka 3

Přednáška TNPW1 – Martin Adámek 5 Sémantika: Seznamy ul x ol nečíslované (unordered list) –nezáleží na pořadí položek –např. seznam požadavků či vlastností číslované (ordered list) –záleží pořadí položek –např. postup činnosti, pořadí kritérií, výsledky soutěže, požadavky řazené dle důležitosti, apod. –položky čísluje automaticky prohlížeč příklad pro ul? příklad pro ol? seznamy lze vnořovat pro vytvoření struktury –i do a naopak –vložený seznam je vložen v položce nadřazeného seznamu –příklad vnoření ol do ul nebo naopak?

Přednáška TNPW1 – Martin Adámek 6 Tabulky Slouží výhradně k přehledné prezentaci dat (dvourozměrná prezentace) Byly používány i pro prostorové rozvržení prvků na stránce –Formátováním částí tabulek lze významně ovlivnit vizuální stránku dokumentu (vytvořit rozložení / layout stránky) –Tabulky pro definici rozložení prvků na stránce nejsou určeny ! Tabulka: Tabulka: –Název tabulky: –Název tabulky: –Řádek: –Řádek: Buňka: Buňka: Buňka záhlaví: Buňka záhlaví:

Přednáška TNPW1 – Martin Adámek 7 Tabulky Příklad kódu tabulky Text popisku tabulky Text popisku tabulky <tr> Roční zisk Roční zisk Pokles/nárůst Pokles/nárůst <tr> Pobočka 1 Pobočka 1 6,3 mil 6,3 mil +11,5% +11,5%

Přednáška TNPW1 – Martin Adámek 8 Tabulky <tr> Pobočka 2 Pobočka 2 +15,2 mil +15,2 mil 16,7% 16,7% <tr> Pobočka 3 Pobočka 3 4,5 mil 4,5 mil -8,5% -8,5%

Přednáška TNPW1 – Martin Adámek 9 Tabulky Ukázka výstupu předcházejícího příkladu: Roční zisk Pokles/nárůst Pobočka 1 6,3 mil +11,5% Pobočka 2 15,2 mil +16,7% Pobočka 3 4,5 mil -8,5% Text popisku tabulky

Přednáška TNPW1 – Martin Adámek 10 Tabulky – syntaxe Tabulka (kostra tabulky) Tabulka (kostra tabulky) - Koncová značka je povinná Řádek tabulky Řádek tabulky - Koncovou značku lze vynechat Buňka Buňka - Koncovou značku lze vynechat Záhlaví sloupce (buňka) Záhlaví sloupce (buňka) - Obsah této buňky (hlavičky) se zobrazuje v různém formátu v závislosti na prohlížeči - Koncovou značku lze vynechat

Přednáška TNPW1 – Martin Adámek 11 Tabulky – syntaxe Titulek tabulky Titulek tabulky - Formát popisku je implicitně také závislý na prohlížeči - Koncová značka je povinná Záhlaví tabulky Záhlaví tabulky - Ohraničuje skupinu řádků tabulky, považovaných za její hlavičku - Slouží pro opakování hlavičky při vícestránkových výstupech - V tabulce může být použito jen jednou - Záhlaví tabulky není v XHTML 1,0 povinné, ale je vhodné - Koncovou značku lze vynechat

Přednáška TNPW1 – Martin Adámek 12 Tabulky – syntaxe Zápatí tabulky Zápatí tabulky - Obdoba záhlaví tabulky - Koncovou značku lze vynechat Oddíl tabulky Oddíl tabulky - Vytváří samostatný oddíl tabulky - Oddíly se nemohou prolínat - Oddíl může obsahovat pouze řádky, tvořené elementem - Oddíl může obsahovat pouze řádky, tvořené elementem - V prohlížeči se vizuálně oddělí jednotlivé oddíly - Koncovou značku lze vynechat

Přednáška TNPW1 – Martin Adámek 13 (Tabulky – syntaxe) Skupina sloupců Skupina sloupců -Koncovou značku lze vynechat Sloupec Sloupec -Definuje vzhled sloupce ve skupině sloupců -Koncovou značku lze vynechat Tyto elementy jsou podporovány pouze v prohlížečích IE 6 a NN 6

Přednáška TNPW1 – Martin Adámek 14 Atributy tabulky Základní atributy tabulky (element ) align … horizontální zarovnání vůči nadřazenému elementu border … ohraničení tabulky cellspacing … prostor mezi buňkami tabulky cellpadding … prostor mezi okrajem buňky a jejím obsahem width … šířka tabulky (lze zadat absolutně v pixelech nebo relativně v %)

Přednáška TNPW1 – Martin Adámek 15 Atributy buňky v tabulce Základní atributy buňky (element, ) align … horizontální zarovnání obsahu v rámci buňky cellspacing … prostor mezi buňkami tabulky cellpadding … prostor mezi okrajem buňky a jejím obsahem colspan … buňka přes více sloupců (column span) height … výška buňky / řádku (stačí uvést u jedné buňky v řádku) nowrap … zalamování textu v buňce rowspan … umožňuje vytvoření buňky přes více řádků (row span) valign … vertikální zarovnání obsahu v rámci buňky width … šířka buňky

Přednáška TNPW1 – Martin Adámek 16 Sémantika: Seznam versus tabulka Seznamy –vyjmenovávají lineární (jednorozměrný) seznam něčeho co je na stejné úrovni, „vedle sebe“, nebo „za sebou“ např. vlastnosti něčeho, pořadí, postup, seznam požadavků, apod. –příklad ? –netříděné x tříděné x seznam definic viz dále

Přednáška TNPW1 – Martin Adámek 17 Sémantika: Seznam versus tabulka Tabulka –přehledně zobrazuje 2D data –rozdělení dat do řádků a sloupců má svůj účel a smysl řádek něco znamená, sloupec něco znamená „souřadnice“ buňky mají význam pokud ne, pak tento obsah nepatří do tabulky –příklad ?

Přednáška TNPW1 – Martin Adámek 18 Sémantika: Tabulka nezneužívá se pro definici rozložení stránky –a to ani pro fotogalerii ! pokud jde o lineární (1D) seznam obrázků, není tabulka na místě –ale při tabulkovém uspořádání/rozdělení dat dle kritérií X a Y mohou být v tabulce obrázky fotky jsou setříděná „data“, naleznutelná dle kritérií v řád. a sloup. např. –fotky by mohly být i ve všech sloupcích, ale musí to mít smysl, např: v řádcích jednotlivé generace ve sloupcích jednotlivá karosářská provedení v buňkách pak patřičné fotky, zařazené dle kritérií jiný příklad legálních obrázků v tabulce ?

Přednáška TNPW1 – Martin Adámek 19 Sémantika: Tabulka (shrnutí) Tabulka –musí být 2D –musí mít více než 1 řádek –musí mít více než 1 sloupec –rozdělení do řádků a sloupců má důvod a systém –jinak to není (nemá být) tabulka

Přednáška TNPW1 – Martin Adámek 20 Příště formuláře další elementy v (X)HTML