tnpw1 technologie pro publikování na webu

TNPW1TNPW1Technologie pro publikování na webuTechnologie pro publikování na webu

Přednáška č. 4Přednáška č. 4 seznamyseznamy tabulkytabulky jejich sémantikajejich sémantika

Ing. Martin AdámekKatedra informačních technologií FIM UHK

Přednáška TNPW1 – Martin AdámekPřednáška TNPW1 – Martin Adámek 22

SeznamySeznamyčíslované (ordered list) <ol>číslované (ordered list) <ol>– obsahem jsou položky (list item) <li>obsahem jsou položky (list item) <li>

vlastní číslování: „value“vlastní číslování: „value“

nečíslované (unordered list) <ul>nečíslované (unordered list) <ul>– obsahem jsou položky (list item) <li>obsahem jsou položky (list item) <li>

vzhled odrážek lze měnit (příp. odrážku skrýt)vzhled odrážek lze měnit (příp. odrážku skrýt)

seznam definic (definition list) <dl>seznam definic (definition list) <dl>– obsahem jsou položky definice <dt>obsahem jsou položky definice <dt>

mají řádkový obsahmají řádkový obsah– a po každém <dt> je vždy vysvětlení <dd>a po každém <dt> je vždy vysvětlení <dd>

má blokový (víceřádkový) obsahmá blokový (víceřádkový) obsah– http://interval.cz/clanky/xhtml-seznamy-a-vycty/http://interval.cz/clanky/xhtml-seznamy-a-vycty/


Nečíslovaný seznam – příkladNečíslovaný seznam – příklad

XHTML kód:XHTML kód:<ul><ul>

<li><li>Položka 1Položka 1</li></li><li><li>Položka 2Položka 2</li></li><li><li>Položka 3Položka 3</li></li>

</ul></ul>

V prohlížeči se zobrazí:V prohlížeči se zobrazí:• Položka 1Položka 1• Položka 2Položka 2• Položka 3Položka 3


Číslovaný seznam – příkladČíslovaný seznam – příklad

XHTML kód:XHTML kód:<<ool>l>

<li><li>Položka 1Položka 1</li></li><li><li>Položka 2Položka 2</li></li><li><li>Položka 3Položka 3</li></li>

</</ool>l>

V prohlížeči se zobrazí:V prohlížeči se zobrazí:1.1. Položka 1Položka 12.2. Položka 2Položka 23.3. Položka 3Položka 3


Sémantika: Seznamy ul x olSémantika: Seznamy ul x olnečíslované (unordered list)nečíslované (unordered list)– nezáleží na pořadí položeknezáleží na pořadí položek– např. seznam požadavků či vlastnostínapř. seznam požadavků či vlastností

číslované (ordered list)číslované (ordered list)– záleží pořadí položekzáleží pořadí položek– např. postup činnosti, pořadí kritérií, výsledky soutěže, např. postup činnosti, pořadí kritérií, výsledky soutěže,

požadavky řazené dle důležitosti, apod.požadavky řazené dle důležitosti, apod.– položky čísluje automaticky prohlížečpoložky čísluje automaticky prohlížeč

příklad pro ulpříklad pro ul??příklad pro olpříklad pro ol??seznamy lze vnořovat pro vytvoření strukturyseznamy lze vnořovat pro vytvoření struktury– i <ul> do <ol> a naopaki <ul> do <ol> a naopak– vložený seznam je vložen v položce nadřazeného seznamuvložený seznam je vložen v položce nadřazeného seznamu– příklad vnoření ol do ul nebo naopakpříklad vnoření ol do ul nebo naopak??


TabulkyTabulky

Slouží Slouží výhradněvýhradně k přehledné prezentaci dat k přehledné prezentaci dat (dvourozměrná prezentace)(dvourozměrná prezentace)

Byly používány i pro prostorové rozvržení prvků na stránceByly 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 Formátováním částí tabulek lze významně ovlivnit vizuální stránku

dokumentu (vytvořit rozložení / layout stránky)dokumentu (vytvořit rozložení / layout stránky)– Tabulky pro definici rozložení prvků na stránce nejsou určeny !Tabulky pro definici rozložení prvků na stránce nejsou určeny !

Tabulka: <table>Tabulka: <table>– Název tabulky: <caption>Název tabulky: <caption>– Řádek: <tr>Řádek: <tr>

Buňka: <td>Buňka: <td>Buňka záhlaví: <th>Buňka záhlaví: <th>


TabulkyTabulky

Příklad kódu tabulkyPříklad kódu tabulky<<table border="1" cellspacing="0" cellpadding="5"table border="1" cellspacing="0" cellpadding="5">><<captioncaption>Text popisku tabulky</>Text popisku tabulky</captioncaption>><tr><tr>

<<ttd> </d> </ttd>d> <<tth>Roh>Roční ziskční zisk</</tth>h><<tth>h>Pokles/nárůstPokles/nárůst</</tth>h>

</</ttr>r><tr><tr>

<<ttd>d>Pobočka 1Pobočka 1</</ttd>d><<tdtd>>6,3 mil6,3 mil</</tdtd>><<tdtd>>+11,5%+11,5%</</tdtd>>

</</ttr>r>


TabulkyTabulky

<tr><tr>

<<ttd>d>Pobočka 2Pobočka 2</</ttd>d>

<<tdtd>>+15,2 mil+15,2 mil</</tdtd>>

<<tdtd>>16,7%16,7%</</tdtd>>

</</ttr>r>

<tr><tr>

<<ttd>d>Pobočka 3Pobočka 3</</ttd>d>

<<tdtd>4,5>4,5 mil mil</</tdtd>>

<<tdtd>>-8,5%-8,5%</</tdtd>>

</</ttr>r>

<</table/table>>


TabulkyTabulky

Ukázka výstupu předcházejícího příkladu:Ukázka výstupu předcházejícího příkladu:

Roční ziskRoční zisk Pokles/nárůstPokles/nárůst

Pobočka 1Pobočka 1 6,3 mil6,3 mil +11,5%+11,5%

Pobočka 2Pobočka 2 15,2 mil15,2 mil +16,7%+16,7%

Pobočka 3Pobočka 3 4,5 mil4,5 mil -8,5%-8,5%

Text popisku tabulky


Tabulky – syntaxe Tabulky – syntaxe

TabulkaTabulka (kostra tabulky) (kostra tabulky) <table></table><table></table>- KKoncovoncová značka je povinnáá značka je povinná

Řádek tabulkyŘádek tabulky <t<trr></t></trr>>- KoncovKoncovou značku lze vynechatou značku lze vynechat

BuňkaBuňka <t<tdd></t></tdd>>- KoncovKoncovou značku lze vynechatou značku lze vynechat

Záhlaví sloupceZáhlaví sloupce (buňka)(buňka) <t<thh></t></thh>>- Obsah této buňky (hlavičky) se zobrazuje v různém formátu v závislosti Obsah této buňky (hlavičky) se zobrazuje v různém formátu v závislosti

na prohlížečina prohlížeči- KoncovKoncovou značku lze vynechatou značku lze vynechat


Tabulky – syntaxeTabulky – syntaxe

Titulek tabulkyTitulek tabulky <<captioncaption></></captioncaption>>- Formát popisku je implicitně také závislý na prohlížečiFormát popisku je implicitně také závislý na prohlížeči- KoncovKoncová značka je povinnáá značka je povinná

Záhlaví tabulkyZáhlaví tabulky <t<theadhead></t></theadhead>>- Ohraničuje skupinu řádků tabulky, považovaných za její hlavičkuOhraničuje skupinu řádků tabulky, považovaných za její hlavičku- Slouží pro opakování hlavičky při vícestránkových výstupechSlouží pro opakování hlavičky při vícestránkových výstupech- V tabulce může být použito jen jednouV tabulce může být použito jen jednou- Záhlaví tabulky není v XHTML 1,0 povinné, ale je vhodnéZáhlaví tabulky není v XHTML 1,0 povinné, ale je vhodné- KoncovKoncovou značku lze vynechatou značku lze vynechat


Tabulky – syntaxeTabulky – syntaxe

Zápatí tabulkyZápatí tabulky <<tfoottfoot></></tfoottfoot>>- Obdoba záhlaví tabulkyObdoba záhlaví tabulky- KoncovKoncovou značku lze vynechatou značku lze vynechat

Oddíl tabulkyOddíl tabulky <t<tbodybody></t></tbodybody>>- Vytváří samostatný oddíl tabulkyVytváří samostatný oddíl tabulky- Oddíly se nemohou prolínatOddíly se nemohou prolínat- Oddíl může obsahovat pouze řádky, Oddíl může obsahovat pouze řádky, ttvořené elementem vořené elementem <tr><tr>- V prohlV prohlížeči se vizuálně oddělí jednotlivé oddílyížeči se vizuálně oddělí jednotlivé oddíly- KoncovKoncovou značku lze vynechatou značku lze vynechat


(Tabulky – syntaxe)(Tabulky – syntaxe)

Skupina sloupcůSkupina sloupců <<colgroupcolgroup></></colgroupcolgroup>>- KoncovKoncovou značku lze vynechatou značku lze vynechat

SloupecSloupec <<colcol></></colcol>>- Definuje vzhled sloupce ve skupině sloupcůDefinuje vzhled sloupce ve skupině sloupců- KoncovKoncovou značku lze vynechatou značku lze vynechat

Tyto elementy jsou podporovány Tyto elementy jsou podporovány pouze v prohlížečích IE 6 a NN 6pouze v prohlížečích IE 6 a NN 6


Atributy tabulkyAtributy tabulky

Základní atributy tabulkyZákladní atributy tabulky (element(element <<tabletable>> ))

alignalign … horizontální zarovnání vůči nadřazenému elementu … horizontální zarovnání vůči nadřazenému elementu

borderborder … ohraničení tabulky … ohraničení tabulky

cellspacingcellspacing … prostor mezi buňkami tabulky … prostor mezi buňkami tabulky

cellpaddingcellpadding … prostor mezi okrajem buňky a jejím obsahem … prostor mezi okrajem buňky a jejím obsahem

widthwidth … šířka tabulky (lze zadat absolutně v pixelech nebo … šířka tabulky (lze zadat absolutně v pixelech nebo relativně v relativně v %)%)


Atributy buňky v tabulceAtributy buňky v tabulce

Základní atributy buňkyZákladní atributy buňky (element (element <<tdtd>>, , <<thth>>))

alignalign … horizontální zarovnání obsahu v rámci buňky … horizontální zarovnání obsahu v rámci buňky

cellspacingcellspacing … prostor mezi buňkami tabulky … prostor mezi buňkami tabulky

cellpaddingcellpadding … prostor mezi okrajem buňky a jejím obsahem … prostor mezi okrajem buňky a jejím obsahem

colspancolspan … buňka přes více sloupců (column span) … buňka přes více sloupců (column span)

heightheight … výška buňky / řádku (stačí uvést u jedné buňky v řádku) … výška buňky / řádku (stačí uvést u jedné buňky v řádku)

nowrapnowrap … zalamování textu v buňce … zalamování textu v buňce

rowspanrowspan … umožňuje vytvoření buňky přes více řádků (row span) … umožňuje vytvoření buňky přes více řádků (row span)

valignvalign … vertikální zarovnání obsahu v rámci buňky … vertikální zarovnání obsahu v rámci buňky

widthwidth … šířka buňky … šířka buňky


Sémantika: Seznam versus tabulkaSémantika: Seznam versus tabulkaSeznamySeznamy– vyjmenovávají vyjmenovávají lineárnílineární (jednorozměrný) (jednorozměrný)

seznam něčehoseznam něčehoco je na stejné úrovni, „vedle sebe“, nebo „za co je na stejné úrovni, „vedle sebe“, nebo „za sebou“sebou“např. vlastnosti něčeho, pořadí, postup, seznam např. vlastnosti něčeho, pořadí, postup, seznam požadavků, apod.požadavků, apod.

– příklad příklad ??– netříděné x tříděné x seznam definicnetříděné x tříděné x seznam definic

viz dáleviz dále


Sémantika: Seznam versus tabulkaSémantika: Seznam versus tabulkaTTabulkaabulka– přehledně zobrazuje přehledně zobrazuje 2D2D data data– rozdělení rozdělení dat dat do řádků a sloupců má svůj do řádků a sloupců má svůj

účel účel a smysla smyslřádek něco znamená, sloupec něco znamenářádek něco znamená, sloupec něco znamená

„„souřadnice“ souřadnice“ buňky buňky mají význammají význam

pokud ne, pak pokud ne, pak tento obsah tento obsah nepatří do tabulkynepatří do tabulky

– příklad příklad ??


Sémantika: Sémantika: TTabulkaabulkanezneužívá se pro definici rozložení nezneužívá se pro definici rozložení stránkystránky– a to a to ani pro fotogalerii ani pro fotogalerii !!

pokud jde o lineární (1D) seznam obrázků, není tabulka na pokud jde o lineární (1D) seznam obrázků, není tabulka na místěmístě

– ale při tabulkovém uspořádání/rozdělení dat dle ale při tabulkovém uspořádání/rozdělení dat dle kritérií X a Y mohou být v tabulce obrázkykritérií X a Y mohou být v tabulce obrázky

fotky jsou setříděná „data“, naleznutelná dle kritérií v řád. a fotky jsou setříděná „data“, naleznutelná dle kritérií v řád. a sloup.sloup.např. např. http://www.adamek.cz/dodavky/transit/prehledgeneraci.htmhttp://www.adamek.cz/dodavky/transit/prehledgeneraci.htm

– fotky by mohly být i ve všech sloupcích, ale musí to mít smysl, fotky by mohly být i ve všech sloupcích, ale musí to mít smysl, např:např:

v řádcích jednotlivé generacev řádcích jednotlivé generaceve sloupcích jednotlivá karosářská provedeníve sloupcích jednotlivá karosářská provedenív buňkách pak v buňkách pak patřičné patřičné fotky, fotky, zařazené dle kritériízařazené dle kritérií

jiný příklad legálních obrázků v tabulce jiný příklad legálních obrázků v tabulce ??


Sémantika: Sémantika: TTabulka (shrnutí)abulka (shrnutí)

TabulkaTabulka– musí být 2Dmusí být 2D– musí mít více než 1 řádekmusí mít více než 1 řádek– musí mít více než 1 sloupecmusí mít více než 1 sloupec– rozdělení do řádků a sloupců má důvod a rozdělení do řádků a sloupců má důvod a

systémsystém

– jinak to není (nemá být) tabulkajinak to není (nemá být) tabulka


PříštěPříště

formulářeformuláře

další elementy v (X)HTMLdalší elementy v (X)HTML

tnpw1 technologie pro publikování na webu

Documents