A máme tu třetí část seriálu o jazyku html. Dnes jsou na řadě tabulky, formuláře a zvláštní znaky. Tentokrát již znak "<7F>" reprezentuje sám sebe a znak "&" také, takže již žádné nahrazování.
TABULKY
Tabulky se staly velmi populárními, ovšem vytvořit skutečně pěkně vypadající tabulku není vždy snadné. V html existuje velké množství příkazů, pomocí kterých lze dělat s tabulkami téměř cokoliv. V přiložených souborech uvidíte opět několik praktických ukázek.
Základním příkazem, kterým se tabulky vytváří, je uzavřený příkaz
<TABLE>...</TABLE>
Každá tabulka musí tímto příkazem začínat a končit. Příkaz TABLE může mít následující parametry:
BORDER - určuje velikost okrajů tabulky. Nezadáme-li jej, bude tabulka bez okrajů (resp. nebudou vidět), použijeme-li číslo větší než nula, budou zobrazeny okraje o velikosti definované číslem. Ponecháme-li parametr BORDER bez čísla, bere se jako roven 1. Příkazem BORDER se mění pouze velikost vnějších okrajů, okraje uvnitř tabulky zůstanou nezměněny.
CELLPADDING - určuje mezeru mezi okraji pole a obsahem pole. Default je 1.
CELLSPACING - udává mezeru mezi jednotlivými poli a tím vlastně šířku vnitřních okrajů polí. Lepší je však používat příkaz CELLPADING.
WIDTH - šířka celé tabulky. Pokud ji neudáte, je na browseru, resp. na jeho tvůrcích, jak tabulku zobrazí. Šířka se pak odvíjí od množství sloupců a řádků a od velikosti obsahu polí. Šířku si však můžete zadat, a to jak absolutně (v pixelech), tak i relativně - v procentech. 100% znamená, že tabulka bude rozprostřena po celé šířce okna.
HEIGHT - analogicky jako šířka.
BGCOLOR - barva pozadí tabulky. Pokud použijeme jako parametr k příkazu TABLE, bude touto barvou vyplněna celá tabulka. Parametr BGCOLOR lze však použít i zvlášť pro každý řádek, sloupec, nebo každé pole. Tím dosáhneme různobarevných tabulek.
BACKGROUND - tabulka může mít uvnitř (na pozadí) také obrázek. Tímto příkazem určíme, který to bude (vložíme URL obrázku).
ALIGN - horizontální zarovnání pro okolní text (LEFT, RIGHT, CENTER)
VALIGN - vertikální zarovnání pro okolní text
HSPACE - horizontální mezera mezi tabulkou a okolním textem
VSPACE - vertikální mezera mezi tabulkou a okolním textem
BORDERCOLOR - barva okrajů tabulky
BORDERCOLORLIGHT - barva světlé části okrajů
BORDERCOLORDARK - barva tmavé části okrajů. CAB však tyto dva příkazy nepodporuje.
MSIExplorer zná ještě parametr FRAME, jenž udává, které strany vnějších okrajů tabulky budou zobrazeny. Možné atributy jsou:
- VOID = žádné vnější okraje
- ABOVE = zobrazí okraj na horní straně tabulky
- BELOW = okraj na spodní straně
- HSIDES = předchozí dva dohromady
- LHS = zobrazí levostranný okraj
- RHS = pravostranný okraj
- VSIDES = předchozí dva dohromady
- BOX = zobrazí okraj na všech stranách tabulky
- BORDER = stejné jako BOX.
Stejně tak zná MSIE i příkaz RULES, jenž udává, které vnitřní okraje tabulku budou zobrazeny. Atributy:
- NONE = žádné vnitřní okraje
- GROUPS = zobrazí vnitřní okraje mezi různými grupy, jak THEAD, TFOOT, TBODY a COLGROUP
- ROWS = zobrazí vnitřní okraje mezi řádky
- COLS = zobrazí vnitřní okraje mezi sloupci
- ALL = zobrazí vnitřní kraje mezi všemi řádky i sloupci.
To bylo tedy pár příkazů i pro MSIE, které např. CAB nezná.
Tabulka může mít i svůj nadpis, zde uzavřeným příkazem
<CAPTION>...</CAPTION>, který může mít jako parametr
<ALIGN="...">, jenž specifikuje umístění nadpisu. Možné atributy jsou:
- LEFT, RIGHT, BOTTOM a TOP.
Následují příkazy pro formátování samotné tabulky (uvnitř). Rozeznáváme základní jednorázové příkazy <TH>, <TD> a <TR>.
<TR> značí Table Row, tedy řádek tabulky. Jedno <TR> reprezentuje jeden řádek, který může obsahovat několik <TH> a/nebo <TD>. Možné parametry pro <TR> jsou:
ALIGN - horizontální zarovnání obsahu řádku. Možné atributy jsou LEFT, RIGHT a CENTER
BGCOLOR - barva pozadí řádku
BORDERCOLOR - barva okrajů řádku
BORDERCOLORLIGHT - světlá barva při 3D okrajích
BORDERCOLORDARK - tmavá barvy u 3D okrajů
VALIGN - vertikální zarovnání obsahu řádku, možné atributy jsou TOP, MIDDLE, BOTTOM a BASELINE
HEIGHT - výška polí řádku.
<TH> znamená Table Header a určuje hlavičku tabulky. Tato hlavička je vždy součástí tabulky a je vždy vytištěna tučně. Jedno <TH> reprezentuje jedno pole tabulky. Možné parametry jsou:
ALIGN - horizontální zarovnání obsahu pole (viz výše)
NOWRAP - zabraňuje word wrappingu uvnitř pole
BGCOLOR - viz výše
BORDERCOLOR - viz výše
BORDERCOLORLIGHT - viz výše
BORDERCOLORDARK - viz výše
VALIGN - vertikální zarovnání (viz výše)
ROWSPAN - počet řádků, do kterých se pole rozdělí
COLSPAN - jako rowspan, ale pčet sloupců
WIDTH - šířka tabulky
HEIGHT - výška tabulky.
<TD> značí Table Data, tedy obsah tabulky, resp. jednotlivých polí. Je to prakticky stejný příkaz jako <TH> jen s tím rozdílem, že zde se jedná o běžná data, která jsou tištěna běžným písmem. Opět platí že jedno <TD> rovná se obsah jednoho pole. Možné parametry a atributy jsou stejné jako u <TH>.
TD, TH a TR mohou mít i své ukončovací příkazy </TD>, </TH> a </TR> ale není to nutno.
Tolik tedy k tabulkám. Jak vidno, lze vytvořit skutečně nejrůznější tabulky. Pole mohou pak samozřejmě obsahovat text, obrázky či odkazy. Pokud chcete nějaké pole nechat prázdné, doporučuji do něj vložit mezeru jako zvláštní znak příkazem
(viz zvláštní znaky).
Základní tabulku si můžete vytvořit např. i v TEXELu, vyexportovat ji jako HTML a pak si ji jen upravit do vlastní představy. I Papyrus umí ukládat HTML dokumenty.
FORMULÁŕE
Formuláře se v html používají pro zaslání různých informací od uživatele na vybraný server. Můžete si tak např. objednávat zboží či služy přes internet.
Pro formuláře máme uzavřený příkaz
<FORM>...</FORM>, jenž v praxi vypadá takto:
<FORM ACTION="URL" METHOD=metoda_výměny_dat> ...tělo formuláře... </FORM>
a který může mít samozřejmě několik parametrů:
ACTION - specifikuje adresu pro odeslání vyplněného formuláře. Většinou se jedná o adresu CGI souboru (skript), který formulář zpracuje. Lze také nastavit e-mailovou adresu (mailto) pro odeslání do e-mailu místo na server (nové verze browserů).
METHOD - udává metodu použitou pro výměnu dat mezi formulářem a scriptem na serveru (URL). Možné atributy jsou:
- POST - informace jsou nastaveny jako HTTP transakce, data jsou posílána scriptu (nejčastěji)
- GET - data jsou ze scriptu získávaána (server přidá argumetry na konec adresy (ACTION) - spíše pro přenášení dat mezi dvěma scripty.
TARGET - specifikuje okno, do kterého bude nahrán výsledek formuláře. Jako cíl (target) může být název dříve specifikovaného rámu FRAME, nebo jeden z následujících atributů:
="_blank" - výsledky do nového okna
="_parent" - výsledky do prvního nadřazeného okna
="_self" - právě aktivní okno (to stejné), default
="_top" - výsledky do celého těla aktuáního okna (nejvyšší struktury).
ENCTYPE - specifikuje typ kódování; pouze nové verze browserů.
Příklad:
<FORM ACTION="http://server/cgi_bin/register" METHOD=POST>
... tělo ...
</FORM>
Dále půjde o tělo formuláře.
Tělo se skládá z jednotlivých polí. Typy těchto polí jsou editovací řádka, editovací okno, list box, combobox, tlačítko, radio button a check box.
Jednorázový příkaz <INPUT> specifikuje vkládací pole formuláře. Forma příkazu je takováto:
<INPUT TYPE="typ" NAME="jméno" VALUE="hodnota">
Možné parametry jsou:
ALIGN - je-li TYPE="image", udává zarovnání textu kolem obrázku. Možné atributy jsou TOP, MIDDLE, BOTTOM, LEFT a RIGHT.
CHECKED - má argument pouze pro TYPE="checkbox" nebo ="radio". Uvádí, že daný checkbox bude vybrán.
MAXLENGTH - pouze pro TYPE="text" nebo "password". Maximální počet znaků, jež mohou být vloženy do editačního řádku.
NAME - definuje jméno přidružené proměnné pole <INPUT>.
SIZE - pouze pro TYPE="text" nebo "=password". Jde o číslo udávající šířku editačního řádku v počtech znaků.
SRC - je-li TYPE="image", udává adresu (název) obrázku.
TYPE - určuje datový typ proměnné. Možná atributy TYPE jsou:
- CHECKBOX - pole může být vybrané nebo nevybrané
- HIDDEN - skryté pole, které obsahuje neměnné informace, jež jsou posílány z formuláře do scriptu
- IMAGE - jako submit, formulář může být odeslán kliknutím na obrázek.
- PASSWORD - editační řádka pro vložení hesla. Každý znak se zobrazí jako "*" nebo se nezobrazí vůbec (záleží na browseru).
- RADIO - několik polí téhož jména umožňují výběr pouze jedné hodnotě
- RESET - tlačítko, které vymaže obsah formuláře a všechny proméné nastaví na počáteční hodnoty
- SUBMIT - tlačítko pro odeslání formuláře na server
- TEXT - editační řádka, šířku lez nastavit pomocí SIZE.
VALUE - nastavuje impicitní hodnotu přidružené proměnné. Význam textu "hodnota" závisí na typu argumentu TYPE: -> je-li TYPE="reset" nebo ="submit", má text "hodnota" význam popisu příslušného tlačítka
-> je-li TYPE="text" nebo ="password" je "hodnota" text, který se v daném editačním poli objeví na počátku při zobrazení formuláře
-> je-li TYPE="checkbox" nebo ="radio" značí "hodnota" text (hodnotu), který bude scriptu poslán bude-li checkbox zaškrtnutý.
<SELECT NAME="jméno">...</SELECT> vytváří výběrové pole. Definuje listbox resp. combobox ve formuláři. Tělem tohoto pole je sada volitelných položek, ze kterých lze vybrat buď jednu nebo více.
Každá položka musí být definována příkazem OPTION uvnitř uzavřeného příkazu <SELECT> a </SELECT>.
Možné parametry:
NAME - jméno přidružené proměnné pole <SELECT>
SIZE - udává délku listboxu; jdeo maximální počet položek, které budou vidět současně. Není-li tento atribut uveden, výběrové pole bude comboboxem, tzn. že vidět bude jen jedna položka současně.
MULTIPLE - bez argumentu. Definuje vícevýběrový listbox.
<OPTION hodnota="...">položka
specifikuje jednu položku. Název "položka" bude zobrazen ve formuláři.
HODNOTA (value) - specifikuje vrácenou hodnotu
- SELECTED - tato položka bude zvýrazněna již při otevření formuláře.
Nyní se podíváme na textové okno.
<TEXTAREA> implicitní_text </TEXTAREA>
Tento příkaz definuje v těle formuláře víceřádkové okno, do něhož může uživatel zapisovat text. Text implicitní_text bude zobrazen při zobrazení celého dokumentu s formulářem.
Parametry:
NAME - jméno přidružené proměnné pole <TEXTAREA>
ROWS - udává výšku okna v počtech řádků
COLS - definuje počet znaků na řádce, tj. šířku okna.
WRAP - specifikuje jak bude text obtékat. Možné atributy jsou "HARD", "SOFT" a "NONE".
Tolik tedy k formulářím. Příklad formuláře najdete v ukázkovém souboru. Formuláře jsou již pokračilým typem html elementů a nebývá vždy jednoduché vytvořit pěkný a 100% funkční formulář. Pro využití všech nových vlastností formulářů je dnes (bohužel) třeba MSIE 5.
ZVLÁŠTNÍ ZNAKY
Jazyk html má vyhrazeny některé speciální znaky. Jedná se o "<" a ">". Kromě nich se dále používají ještě některé speciální znaky.
Nejprve dva příkazy, které nelze zařadit přímo mezi zvláštní znaky, ale mají poněkud zvláštní postavení v html dokumentu.
<!-- poznámka -->
Tato značka slouží k vkládání poznámek do html dokumentu. Text poznámka nebude zobrazen, bude ignorován. Jako poznámku lze též označit i část dokumentu.
<ADDRESS> text </ADDRESS> Tento příkaz se v html dokumentech většinou používá k určení autora daného dokumentu (např. e-mail). "text" je zobrazen kurzívou. Tento příkaz bývá posledním příkazem v těle dokumentu a bývá umisťován na samostatný řádek.
Jazyk html má vyhrazeny dvě speciání značky: "<" a ">". Tyto určují jednotlivé příkazy. Chceme-li je zobrazit v textu, musíme využít speciálních znaků. Ty mají formu:
&klíčové_slovo;
(znak "and" na začátku a středník na konci jsou povinné!).
Takovýto příkaz zobrazí znak určený speciální zkratkou "klíčové_slovo". Seznam těchto klíčových slov a jejich význam je zde:
& ... znak "&"
< ... znak "<"
> ... znak ">"
® ... znak "registred trademark"
© ... znak "copyright"
... pevná mezera (non-breaking space)
  ... mezera (polovina znaku)
  ... mezera (jeden znak aktuálního fontu)
&endash; . dělící znaménko (polovina znaku)
&emdash; . dělící znaménko (jeden znak)
& ... znak "&" (and)
" ... uvozovky (")
&xuml; ... přehlásky. Znak "x" zde reprezentuje znaky, které lze přehlasovat (a, o, u, atp. - využívají především v německy mluvících zemích).
&xacute; . čárky. Znak "x" reprezentuje všechna písmena, která mohou být dlouhá, s čárkou (a,i,o,u,e,y).
I zde však již záleží na použitém fontu.
Dále lze vkládat (zvláštní) znaky pomocí sekvence
&<7F>ascii_ekvivalent;
("&", "<7F>" a středník jsou nutné).
Takovýto příkaz zobrazí znak odpovídající ASCII hodnotě "ascii_ekvivalent".
&<7F>09; ... horizontální tabulátor
&<7F>10; ... line feed
&<7F>32; ... mezera
&<7F>33; ... vykřičník
&<7F>34; ... uvozovky nahoře
&<7F>35; ... dvojitý kříž ("<7F>")
&<7F>36; ... dolar ("$")
&<7F>37; ... procenta
&<7F>38; ... znak "and" ("&")
&<7F>39; ... apostrof
&<7F>40; ... levá závorka (
&<7F>41; ... pravá závorka )
&<7F>42; ... hvězdička
&<7F>43; ... plus
&<7F>44; ... čárka
&<7F>45; ... dělící znaménko
&<7F>46; ... tečka
&<7F>47; ... lomítko
&<7F>48; - &<7F>57; ... číslice 0-9
&<7F>58; ... dvojtečka
&<7F>59; ... středník
&<7F>60; ... menší než ("<")
&<7F>61; ... rovná se ("=")
&<7F>62; ... větší než (">")
&<7F>63; ... otazník
&<7F>64; ... zavináč
&<7F>65;-&<7F>90; ... písmena A až Z
&<7F>91; ... levá hranatá závorka
&<7F>92; ... zpětné lomítko
&<7F>93; ... pravá hranatá závorka
&<7F>95; ... dolní podtržítko
&<7F>96; ... levý apostrof
&<7F>97;-&<7F>122; ... písmena a - z
&<7F>123; ... levá psací závorka
&<7F>124; ... vertikální čára
&<7F>125; ... pravá psací závorka
&<7F>126; ... vlnovka
Dále to již záleží na použitém fontu (české znaky, přehlásky či některé další znaky).
Je třeba si vždy uvědomit, že záleží na použitém fontu, jaké obsahuje znaky. Zde uvedené jsou standardní.
Tolik třetí část našeho seriálu. V příští, poslední části, se podíváme na některá doplnění již známých věcí.
Neznámý vojín