Hlavne menu We are sorry, but magazine AMMO is suspended. Here is just read-only access to the articles archive. Some features are removed because they were outdated, pointless in read-only (voting and pools), or it was missused by spammers (comments) etc. Now the webpages aren't maintained so when something will get broken most probably it won't be fixed at all. If you liked our magazine then please make donation with paypal so we can pay for traffic on this server.

TOP Výuka
01 Maľované krížovky 103 bodov
02 OpenGL, lákadlo 38 bodov
03 MySQL (+ použitie Visual C++ a PHP) 28 bodov
04 OpenGL, časť 1 21 bodov
05 Huffmanove kódovanie 19 bodov
06 Pascal, časť 1 18 bodov
07 Ako tlačiť s HP 16 bodov
08 Základy HTML časť 2 16 bodov
09 Hry pre nenáročných + zdrojáky 10 bodov
10 OpenGL, úvod 8 bodov
11 Faktúrka v4.0 + zdrojáky v MS Visual C++ 6.0 7 bodov
12 OpenGL – Intermezzo 1 7 bodov
13 OpenGL povinná literatúra 6 bodov
14 Základy HTML časť 1 6 bodov
15 WinSocket Communication via VC++ 6 bodov
Najnovsie clanky
Kvalitné služby podľa skúseností iných - TopSlužby.sk
LOTR - Dve veže - Parodia - Scénka 2. časť
Neverwinter nights
Children Of Bodom-Hatebreeder
Kult Duny - 6. časť (Bonus)
Kult Duny - 5. časť (Filmy, Hry)
Dobré ráno. (morc certa, hora incerta...)
Kult Duny - 4. časť (Knihy 2/2)
Stretnutie Spoločenstva Tolkiena
GRAVE DIGGER – Knights Of The Cross
Kult Duny - 3. časť (Knihy 1/2)
Kult Duny - 2. časť (Pojmy)
Kult Duny - 1. časť (Úvod)
LOTR - Dve veže - Parodia - Scénka
Jackass
Vsetky clanky
Airsoft - Specnaz [4 clanky]
Básne [6 clankov]
Fantázia [4 clanky]
Filmy a DVD [51 clankov]
Hardware [10 clankov]
Hry [170 clankov]
Hry, návody [6 clankov]
Hudba [8 clankov]
Internet [7 clankov]
Knihy [6 clankov]
O AMME [4 clanky]
Pandemonium [10 clankov]
Poviedky [14 clankov]
Programy [18 clankov]
Rôzne [8 clankov]
Technické [3 clanky]
Úvahy [8 clankov]
Výuka [50 clankov]
Ako tlačiť s HP
Algoritmy v grafoch
Fake2
Faktúrka
Faktúrka v4.0 + zdrojáky v MS Visual C++ 6.0
Fract
HLSaver
Hry pre nenáročných + zdrojáky
Huffmanove kódovanie
IPicture2 & aggresiveoptimize.h
Maľované krížovky
MySQL (+ použitie Visual C++ a PHP)
OpenGL - GLWnd
OpenGL AMMO Saver
OpenGL povinná literatúra
OpenGL – Intermezzo 1
OpenGL, časť 10
OpenGL, časť 11
OpenGL, časť 12
OpenGL, časť 13
OpenGL, časť 14
OpenGL, časť 15
OpenGL, časť 16
OpenGL, časť 17
OpenGL, časť 18
OpenGL, časť 8
OpenGL, časť 9
Opengl – Cloth Simulation
RenameR
SkinMagic
WinSocket Communication via VC++
Údajové štruktúry
viac...
Zábava [5 clankov]
Zdravie [15 clankov]
Celkovy pocet clankov: 407
Základy HTML časť 3 
Výuka | Dna 20.2.2002 | Petr Grolmus | 19 znamok, priemer 2.89 | 3898 videni | 76 WAP videni

Co je to formulář?



Pomocí příkazů pro tvorbu formulářů lze do jazyka HTML zabudovat políčka pro zadávání textu a tlačítka. Údaje vyplněné uživatelem se zasílají serveru, kde se také zpracovávají (v drtivé většině případů jsou odeslaná data zpracována CGI skriptem, který je nutné umístit do adresáře CGI skriptů - je nutné kontaktovat administrátora serveru a požádat jej o umístění vašeho CGI programu do tohoto adresáře).
Již jazyk HTML 2.0 poskytuje příkazy pro tvorbu formulářů. Části dokumentů, které mají sloužit k získávání informací, lze vytvořit v podobě formuláře, do něhož autor může umístit jak vstupní pole, tak i seznamy s možnostmi, z nichž se položky vybírají pomocí tlačítka nebo zaškrtávacích tlačítek. Jakmile uživatel stiskne po vyplnění formuláře tlačítko "Submit", jsou údaje získané tímto formulářem odeslány na server.
V tomto místě však nastávají problémy. Bez programu, který by na serveru dále zpracoval data z formuláře, nelze prakticky nic dělat. Naštěstí existuje jedna výjimka, kdy se zadaná data místo na server mohou zaslat pomocí funkce mailto na libovolnou e-mailovou adresu. Bohužel došlý výsledek na danou adresu není příliš přehledný, neboť obsahuje spoustu speciálních znaků. I přesto však zůstává funkce mailto tím nejschůdnějším řešením, jak využít HTML formuláře a dostat se k vyhodnocení získaných výsledků.

Činnost formuláře



Definice formuláře je uzavřena mezi návěští <FORM> a </FORM>. Do kontejneru FORM jsou pomocí mnohostranného příkazu <INPUT> vkládána vstupní pole. Atribut TYPE u příkazu INPUT může nabývat dvou speciálních hodnot "submit" a "reset". V obou případech je zobrazeno odpovídající tlačítko. Úkolem tlačítka "Submit" je zaslat získaná data z formuláře na server k dalšímu zpracování. V nejjednodušším případě si prohlížeč znovu vyžádá aktuální HTML stránku, ke které připojí informaci zadanou uživatelem. Tlačítko "Reset" vymaže z formuláře všechny již zadané hodnoty.


Ilustrativní příklad:

<FORM>
<INPUT NAME="Test"><BR>
<INPUT TYPE="submit">
</FORM>

<FORM action="url_skriptu" method=[get | post] enctype="způsob_kódování" script="url_skriptu" target="cílové_okno">
...prvky formuláře...
</FORM>
párová značka vymezující formulář, kterým se získávají informace od uživatele; formuláře nelze vnořovat
action URL skriptu, který zpracuje data odeslaná pomocí formuláře
method způsob odeslání dat
get doplněním na konec aktivního URL (implicitní)
post v těle požadavku
enctype způsob kódování dat (implicitně application/x-www-form-urlencoded)
script lokátor jednoúčelového CGI skriptu, který prohlížecí program zavede za účelem předzpracování výstupů formuláře před jejich odesláním na cíl specifikovaný atributem action
target jméno okna, rámce, nebo prohlížeče, ve kterém má být zobrazen výsledek získaný odesláním formuláře



<INPUT type=[text | password | checkbox | radio | submit | reset | hidden | image | file | range | scribble | jot] name="jméno_pole" value="hodnota" checked min=dolní_mez max=horní_mez src="url_grafiky" size="rozměry_pole" maxlength=max_znaků align=[top | middle | bottom | left | right] accept="souborový_typ" dissabled error="chybové_hlášení">
nepárová značka sloužící k definici jednoho jednoduchého vstupního pole formuláře; formulář zpravidla obsahuje několik <INPUT> prvků
type druh vstupního pole
text jednořádkové vstupní pole; atributem value lze zadat počáteční hodnotu pole
password jako text, ale není zobrazována uživatelem zapisovaná hodnota
checkbox zaškrtávací políčko, atributem value lze specifikovat hodnotu vracenou při zaškrtnutí tohoto políčka
radio volba právě jedné možnosti; atributem value lze specifikovat hodnotu vracenou pro tuto volbu
submit tlačítko odesílající data k serveru; atributem value lze definovat popis tlačítka
reset tlačíto pro nastavení implicitních hodnot prvků formuláře; atributem value lze definovat popis tlačítka
hidden skryté pole; atributem value lze specifikovat pevnou hodnotu nezadávanou uživatelem
image na poklep citlivá grafika specifikovaná atributem src - pokyn k odeslání dat serveru s připojenými souřadnicemi místa odkliknutí
file pole pro zadání jména souboru; umožňuje k výstupu formuláře připojit jeden nebo více lokálních souborů; atributem value lze specifikovat implicitní název souboru; atributem accept lze vymezit přípustné typy souborů; tento typ pole vyžaduje v deklaraci formuláře atributy enctype="multipart/form-data" method=post
range číselný interval (přetáčecí pole)
scribble "počmáratelná" grafika specifikovaná atributem src
jot "popsatelná" grafika specifikovaná atributem src

name symbolické jméno pole odesílané serveru (musí být v rámci formuláře jednoznačné); pro typ pole checkbox|radio může mít řada INPUT prvků vytvářejících blok totožné symbolické jméno
value hodnota pole (dle typu)
checked specifikuje implicitní zaškrtnutí pole typu checkbox nebo určuje implicitní volbu pole typu radio
min dolní mez číselného intervalu pro typ pole range
max horní mez číselného intervalu pro typ pole range
src URL grafiky pro typ pole image, scribble, jot
size počet_znaků | počet_znaků, počet_řádků; fyzický rozměr pole typu text|password
maxlength maximální počet znaků akceptovaný v poli typu text|password
align ovlivňuje umístění objektu vůči okolí
top horní okraj objektu bude zarovnán s horním okrajem řádku
middle střed objektu bude zarovnán na účaří řádku
bottom dolní okraj objektu bude zarovnán se spodním okrajem řádku
left vodorovné umístění objektu na levý okraj
right vodorovné umístění objetu na pravý okraj
accept seznam MIME typů nebo vzorů přípustných pro pole typu file, který je skript ochoten přijímat; je na prohlížecím programu, aby podle přípony zkontroloval, zda uživatel zadal přípustný soubor
disabled zobrazení pole bez možnosti jeho modifikace
error hlášení pro případ chybné hodnoty


Aby mohl být výstup z formuláře dále zpracováván, musí být tato stránka spojena s nějakým CGI skriptem, který komunikuje s dalším programem uloženým na straně serveru. Program vyhodnotí zaslaná data a výsledek odešle klientskému browseru.
Data doplňená do formuláře jsou připojována za název dokumentu otazníkem. Po otazníku následuje označení (label) vstupního pole, které je shodné s hodnotou atributu NAME zadaného v návěští <INPUT>. Mezery jsou nahrazeny znaménky plus (+). Speciální znaky jsou zapsány v hexadecimálním kódu, kterému předchází znak %.


Tvorba formuláře



Největší část práce ve formulářích obstarává příkaz <INPUT>. Typ vstupního pole je určen atributem TYPE, který může nabývat následujících hodnot:


<INPUT TYPE="text">
Typ "text" slouží k zadávání jednořádkových textů. Tento typ je definován jako implicitní, takže je použit i v případě, že u příkazu INPUT není typ definován. Délku tohoto vstupního pole je možné omezit pomocí atributu SIZE. Maximální délku zobrazovaného pole je možné omezit atributem MAXLENGTH. Pokud je MAXLENGTH menší než SIZE, pak se text v okénku posouvá (roluje).


<INPUT TYPE="password">
Políčka typu "password" jsou velice podobná políčkům pro zadávání textu ovšem s výjimkou, že místo hodnoty zapisované do pole typu "password" jsou vypisovány hvězdičky. Je však nutné upozornit na to, že tento způsob zadávání hesla není nejbezpečnější a není velkým problémem toto heslo odhalit.


<INPUT TYPE="checkbox">
Políčko typu "checkbox" je zobrazeno buď v podobě malého čtverečku, který lze zakřížkovat, nebo tlačítka, které lze vypnout nebo zapnout. Na rozdíl od textových polí, jejichž obsah je posílán na server i v případě, že jejich obsah je prázdný, je název checkboxu sdělen serveru pouze v případě, když je aktivní. Hodnota aktivního checkboxu je stanovena na základě atributu VALUE, který standardně přechází do stavu "on".




<FORM>
<INPUT TYPE="checkbox" NAME="MAJ"> Vlastním televizor
</FORM>

Nebo při definování:

<INPUT TYPE="checkbox" NAME="MAJ" VALUE="BTV"> Vlastním barevný televizor

Atribut VALUE umožňuje zabránit kolizím v případech, kdy je stejným jménem označeno několik checkboxů. V těchto případech je nutné atributu VALUE přiřadit různé hodnoty.


Příklad:

<FORM>
Vlastním:<BR>
<INPUT TYPE="checkbox" NAME="MAJ" VALUE="TV"> Televizor<BR>
<INPUT TYPE="checkbox" NAME="MAJ" VALUE="VR"> Videorekordér<BR>
<INPUT TYPE="checkbox" NAME="MAJ" VALUE="HF"> Hi-Fi soupravu<BR>
</FORM>

Například po zaškrtnutí skupin televizoru a videorekordéru se odešle na server:

MAJ="TV"&MAJ="VR"

Pomocí atributu CHECKED je možné označit několik políček, které již budou v nabídnutém formuláři zaškrtnuty. Uživatel má samozřejmě možnost toto zaškrtnutí zrušit.

Příklad:

<FORM>
Vlastním:<BR>
<INPUT TYPE="checkbox" NAME="MAJ" VALUE="TV" CHECKED> Televizor<BR>
<INPUT TYPE="checkbox" NAME="MAJ" VALUE="VR"> Videorekordér<BR>
<INPUT TYPE="checkbox" NAME="MAJ" VALUE="HF"> Hi-Fi soupravu<BR>
</FORM>

<INPUT TYPE="radio">
Tlačítka typu "radio" se chovají obdobně jako checkboxy. Vyznačují se kruhovým zaškrtávacím políčkem a v daném okamžiku je možné mít zaškrtnuto maximálně jedno políčko. Těmto tlačítkům musí být hodnota VALUE zadána povinně. I v tomto případě je možné nastavit předvolbu pomocí atributu CHECKED. Pokud bude tato předvolba použita u více prvků, bude použit jako aktivní poslední z nich.


Příklad radiobuttonů:

<FORM>
Vlastním televizor<BR>
<INPUT TYPE="radio" NAME="TV" VALUE="B" CHECKED> barevný
<INPUT TYPE="radio" NAME="TV" VALUE="C" > černobílý
</FORM>

<INPUT TYPE="reset">
Atribut TYPE="reset" je značkou INPUT zobrazen jako obyčejné tlačítko, které má však speciální funkci. Stisknutím tohoto tlačítka dojde k přenastavení všech údajů ve formuláři na počáteční nastavení. Standardní nápis "Reset" lze změnit nastavením atributu VALUE.


<INPUT TYPE="submit">
Také funkce typu "submit" je zpracována stejným způsobem jako typ "reset". Avšak stisknutím tohoto tlačítka dojde k odeslání zaškrtnutých hodnot na server k dalšímu zpracování. I u této funkce je možné přenastavit standardní nápis "Submit Query" pomocí atributu VALUE.

<TEXTAREA> ... </TEXTAREA>
Návěští TEXTAREA umožňuje ve formuláři zadat víceřádkový text. Šířku okna (udanou počtem znaků) a výšku okna je možné nastavit atributy COLS a ROWS. Těmito atributy však není délka textu omezena, neboť v okně je možné listovat. Text mezi počátečním a koncovým návěštím TEXTAREA bude zapsán v okně jako předvolba.


Příklad příkazu TEXTAREA:

<FORM>
<CENTER>
<TEXTAREA NAME="text" ROWS=5 COLS=40> Předurčená hodnota</TEXTAREA>
</CENTER>
</FORM>

<TEXTAREA name="jméno_pole" rows="počet_řádků" cols="počet_sloupců" wrap=[off | virtual | physical] align=[top | middle | bottom | left | right] disabled error="chybové_hlášení"
...text...
</TEXTAREA>
párová značka sloužící k definici víceřádkového vstupního pole formuláře; smí se vyskytnout pouze v prvku FORM a nesmí být vnořována; text uložený mezi počáteční a koncovou značku je vložen do pole jako předvolba
name symbolické jméno odesílané serveru
rows počet řádků pole (v počtu znaků)
cols počet sloupců pole (v počtu znaků)
wrap zalamování textu uvnitř pole
off data jsou odesílána přesně jak jsou zapisována (implicitní hodnota)
virtual text je v poli zalamován, ale data jsou odesílána přesně jak byla zapsána
physical text je v poli zalamován a v bodě zlomu je odesílán nový řádek
align ovlivňuje umístění objektu vůči okolí
top horní okraj objektu bude zarovnán s horním okrajem řádku
middle střed objektu bude zarovnán na účaří řádku
bottom dolní okraj objektu bude zarovnán se spodním okrajem řádku
left vodorovné umístění objektu na levý okraj
right vodorovné umístění objetu na pravý okraj
disabled zobrazení pole bez možnosti jeho modifikace
error hlášení pro případ neplatné hodnoty pole


<SELECT>
Funkce SELECT umožňuje výběr ze seznamu nabízených možností, které jsou vždy v rámci kontejneru <SELECT> uvozeny návěštím <OPTION>.

Příklad na prvek <SELECT>

<FORM>
<SELECT NAME="volby" SIZE=3>
<OPTION VALUE=1>hodnota 1</OPTION>
<OPTION VALUE=2>hodnota 2</OPTION>
<OPTION VALUE=3>hodnota 3</OPTION>
<OPTION VALUE=4>hodnota 4</OPTION>
<OPTION VALUE=5>hodnota 5</OPTION>
</SELECT>
</FORM>

<SELECT name="jméno_pole" size=počet_zobrazených multiple src="url_grafiky" width=šířka_grafiky height=výška_grafiky units=jednotka align=[top | middle | bottom | left | right] disabled error="chybové_hlášení"
<OPTION> ...
...
</SELECT>
párová značka sloužící k výběru z nabídky definované prvky <OPTION> uvnitř kontejneru <SELECT>
name symbolické jméno odesílané serveru
size určuje počet zobrazených položek při inicializaci formuláře; pokud je počet položek větší než číslo uvedené u size dochází k jejich rolování
multiple možnost výběru více položek současně (implicitně 1)
src absolutní/relativní URL grafiky zobrazované pro tuto nabídku místo OPTION textů identifikovaných na grafice jako "hotspot"
width požadovaná šířka grafiky
height požadovaná výška grafiky
units jednotka pro zadání rozměrů grafiky (implicitně pixely)
align ovlivňuje umístění objektu vůči okolí
top horní okraj objektu bude zarovnán s horním okrajem řádku
middle střed objektu bude zarovnán na účaří řádku
bottom dolní okraj objektu bude zarovnán se spodním okrajem řádku
left vodorovné umístění objektu na levý okraj
right vodorovné umístění objetu na pravý okraj
disabled zobrazení pole bez možnosti jeho modifikace
error hlášení pro případ neplatné hodnoty pole

<OPTION selected value="odesílaná_hodnota" shape="tvar_hotspot" disabled error="chybové_hlášení" >
...identifikace volby...
</OPTION>
párová značka identifikující volbu uvnitř kontejneru <SELECT>
selected počáteční vybraná volba
value určení odesílané hodnoty pro tuto volbu; není-li atribut uveden, odesílá se obsah volby
shape tvar "hotspotu" na grafickém objektu definovaném atributem src; navrhované hodnoty jsou: "default", "circle x,y,z", "rect x,y,w,h", "polygon x1,y1,x2,y2,..."
disabled zobrazení hodnoty bez možnosti její volby
error hlášení pro případ neplatné volby

Standardní tlačítka



Pomocí formulářových funkcí lze do dokumentu zabudovat také standardní tlačítka sloužící jako hyperlinky. Vysvětlení podá následující příklad.


<FORM ACTION="help.htm">
<INPUT TYPE="submit" VALUE="Help">
</FORM>

Toto tlačítko umožňuje vyvolání dokumentu help.htm, který je uložen v aktuálním adresáři:


Popis tabulek



Tabulky jsou v jazyce HTML velmi mocným nástrojem. Jejich použitím lze nejen tisknout přehledné sloupce různých hodnot, ale i vytvořit profesionálně vyhlížející stránku použitím různých tabulkových "triků", které budou popsány v rámci této kapitoly.
Nutno předem upozornit, že tabulky jsou do standardu jazyka zahrnuty až od jeho verze 3.0, a tedy některé starší prohlížeče je nemusí umět používat.
Definice tabulky je dána návěštím <TABLE> a </TABLE>. Atribut BORDER této značky umožňuje zviditelnění tabulky. Stejně jako u formulářů, je nutné i v tomto případě v kontejneru tabulky použít další příkazy, které umožňují specifikovat konečný vzhled celé tabulky. Návěští <TR> definuje řádek tabulky, který obsahuje návěští (většinou několik) <TD> představující sloupce dat.
Návěští <TH> (table header) pak definuje nadpis jednotlivých sloupečků dat. Pomocí značky <CAPTION> je možné přidat k tabulce popisek, který bude zarovnán na střed tabulky.


Příklad použití tabulky:

<TABLE BORDER>
<CAPTION>Specifikace jmen souborů Výuky HTML</CAPTION>
<TR>
<TH></TH> <TH>Ascii</TH>
<TH>Latin2</TH> <TH>Kamenik</TH>
</TR>
<TR>
<TD>Windows</TD> <TD>html_wa.zip</TD>
<TD>html_wl2.zip</TD> <TD>html_wk.zip</TD>
</TR>
<TR>
<TD>Unix</TD> <TD>html_ua.tgz</TD>
<TD>html_ul2.tgz</TD> <TD>html_uk.tgz</TD>
</TR>
</TABLE>

Poznámka: Jistě jste si všimli, že hned první políčko je bez okrajů, protože neobsahuje žádná data. Pokud tomu chcete zabránit, je možné jako hodnotu toho pole dát mezeru vloženou do kontejneru <PRE> ... </PRE> (předformátovaný text). Samotnou mezeru bez tohoto příkazu prohlížeč nezobrazí.

<TABLE BORDER>
<CAPTION>Specifikace jmen souborů Výuky HTML</CAPTION>
<TR>
<TH><PRE> </PRE></TH> <TH>Ascii</TH>
<TH>Latin2</TH> <TH>Kamenik</TH>
</TR>
...
</TABLE>

Zobrazení:

<TABLE width="šířka_tabulky" cols=počet_sloupců colspec=specifikace_sloupců align=[left | right | center | justify | bleedleft | bleedright] frame=[void | above | below | hsides | rhs | lhs | vsides | box | border] border=tloušťka_rámu rules=[none | basic | rows |cols |all] cellspacing="mezera_mezi_buňkami" cellpadding="mezera_uvnitř_buňky" clear=[left | right | all] noflow units=[en | relative | pixels] nowrap>
...posloupnost_prvků_tabulky...
</TABLE>
width specifikuje šířku tabulky (implicitně v pixelech), použitím přípony "%" je možno hodnoty zadávat i relativně vzhledem k šířce okna prohlížeče (např. width="50%")
cols specifikuje celkový počet sloupců tabulky a napomáhá prohlížecímu programu určit počáteční zobrazení tabulky
colspec specifikuje šířky a zarovnání jednotlivých sloupců (např. colspec="L8 C20 R50"; L,R,C specifikuje zarovnání vlevo, vpravo, centrovaně)
align ovlivňuje umístění objektu vůči okolí
left vodorovné umístění objektu na levý okraj
right vodorovné umístění objektu na pravý okraj
center zarovnání doprostřed mezi levý a pravý okraj okna
justify zarovnání do bloku (roztažení mezi levý a pravý okraj okna - pokud to jde)
bleedleft rozšíření Netscape
bleedright rozšíření Netscape

frame určuje způsob zobrazení vnějších obrysů tabulky
none/void žádný obrys (implicitní hodnota)
above jen horní strana
below jen dolní strana
hsides horní a dolní strana
lhs jen levá strana
rhs jen pravá strana
vsides levá a pravá strana
border/box všechny čtyři strany
border určuje tloušťku vnějšího obrysu (implicitně v pixelech)
rules předepisuje vzhled tabulkové mřížky (oddělujících čar uvnitř tabulky)
none žádné čáry
basic vodorovné čárky mezi skupinami (THEAD, TFOOT, TBODY)
rows čáry mezi řádky
cols čáry mezi sloupci
all všechny čáry (implicitní hodnota)
cellspacing nastavuje velikost mezery mezi jednotlivými buňkami tabulky
cellpadding nastavuje velikost mezi okrajem buňky tabulky a jejím obsahem
clear specifikuje způsob obtékání tabulky
left obtékány budou obrázky umístěné vlevo
right obtékány budou obrázky umístěné vpravo
all pokračuje se až pod všemi obrázky
noflow zákaz plovoucího textu v tabulce (rozšíření Netscape)
nowrap způsob zalamování textu uvnitř buňek tabulky
units specifikuje další volby pro atribut colspec
en v počtu písmen "n"
relative relativní šířka sloupce
pixels šířka v pixelech (implicitní hodnota)


<CAPTION align=[top | bottom | left | right]>
...nadpis_tabulky...
</CAPTION>
párová značka specifikující nadpis tabulky nebo obrázku
align určuje pozici nadpisu vůči vnějším okrajům tabulky
top nahoře uprostřed (implicitní hodnota)
bottom dole uprostřed
left vlevo
right vpravo



<TR align=[left | center | right | justify | char] char="znak" charoff="offset_znaku" valign=[top | middle | bottom | baseline]>
...posloupnost tabulkových polí...
</TR>
párová značka specifikující tabulkový řádek v jedné ze tří sekcí (THEAD, TFOOT a TBODY); musí obsahovat nejméně jeden prvek TH nebo TD; koncová značka je nepovinná align určuje způsob zarovnávání textu
left zarovnávání vlevo (implicitní)
right zarovnávání vpravo
center centrování na střed
justify zarovnávání obou okrajů (pokud je to možné)
char zarovnání na znak (typicky desetinná čárka)
char znak, na který se vztahuje zarovnání vyžádané atributem align=char (implicitně desetinná čárka podle národního nastavení)
charoff specifikuje v pixelech offset pro první výskyt znaku char na každém řádku; implicitní hodnota je 50%
valign definuje implicitní způsob vertikálního zarovnání obsahu buňek pro tento řádek
top zarovnání k hornímu okraji buňky
middle zarovnání doprostřed buňky (standardní hodnota)
bottom zarovnání k dolnímu okraji buňky
baseline totéž jako bottom (rozšíření Netscape)


<TD align=[left | center | right | justify | char] char="znak" charoff="offset_znaku" valign=[top | middle | bottom | baseline] nowrap bgcolor="barva" width="šířka" colspan=počet_sloučených_sloupců rowspan=počet_sloučených_řádků axis="návěští_buňky" axis="seznam_návěští_buňky">
...obsah pole...
</TD>
párová značka specifikující běžnou buňku; koncová značka </TD> je nepovinná align určuje způsob zarovnávání textu
left zarovnávání vlevo (implicitní)
right zarovnávání vpravo
center centrování na střed
justify zarovnávání obou okrajů (pokud je to možné)
char zarovnání na znak (typicky desetinná čárka)
char znak, na který se vztahuje zarovnání vyžádané atributem align=char (implicitně desetinná čárka podle národního nastavení)
charoff specifikuje v pixelech offset pro první výskyt znaku char na každém řádku; implicitní hodnota je 50%
valign definuje implicitní způsob vertikálního zarovnání obsahu buňek pro tento řádek
top zarovnání k hornímu okraji buňky
middle zarovnání doprostřed buňky (standardní hodnota)
bottom zarovnání k dolnímu okraji buňky
baseline totéž jako bottom (rozšíření Netscape)
nowrap potlačuje automatické dělení řádků uvnitř buňky
bgcolor barva pozadí
width určuje požadovanou šířku tabulky
colspan počet sloupců, které mají být sloučeny do jednoho; vlastně prodlužuje buňku doprava přes n sloupců
rowspan počet řádků, které mají být sloučeny do jednoho; vlastně prodlužuje buňku dolů přes n řádků
axis umožňuje specifikovat návěští buňky (např. jako název databázového pole); chybí-li, použije se obsah buňky
axes seznam axis návěští oddělených čárkou, která dohromady identifikují názvy polí řádku a sloupce obsahujících buňku


<TH align=[left | center | right | justify | char] char="znak" charoff="offset_znaku" valign=[top | middle | bottom | baseline] nowrap bgcolor="barva" width="šířka" colspan=počet_sloučených_sloupců rowspan=počet_sloučených_řádků axis="návěští_buňky" axis="seznam_návěští_buňky">
...obsah pole...
</TH>
párová značka označující hlavičku sloupce nebo řádku; zpravidla je vzhledově odlišena od ostatních buňek; atributy má totožné jako značka <TD>


Parametry tabulek



Pomocí atributů COLSPAN a ROWSPAN lze docílit sjednocení několika sousedních buňek tabulky ve vodorovném (svislém) směru. Tímto způsobem lze jednoduše docílit zpřehlednění tabulky.



Spojování buněk tabulky:

<TABLE BORDER>
<CAPTION>Specifikace jmen souborů Výuky HTML</CAPTION>
<TR>
<TH><PRE> </PRE></TH> <TH>Ascii</TH>
<TH>Latin2</TH> <TH>Kamenik</TH>
</TR>
<TR>
<TD>Windows</TD> <TD ROWSPAN=2>html_a.zip</TD>
<TD>html_wl2.zip</TD> <TD>html_wk.zip</TD>
</TR>
<TR>
<TD>Unix</TD>
<TD>html_ul2.tgz</TD> <TD>html_uk.tgz</TD>
</TR>
</TABLE>

Zobrazení:

Specifikace jmen souborů Výuky HTML
Ascii Latin2 Kamenik
Windows html_a.zip html_wl2.zip html_wk.zip
Unix html_ul2.tgz html_uk.tgz

Poznámka: Obdobným způsobem lze za pomoci atributu COLSPAN spojit dvě políčka ve vodorovném směru.



U příkazu TABLE slouží jeho atribut WIDTH k určení šířky tabulky. Velikost lze zadávat i relativně, tedy např. WIDTH=100% způsobí vykreslení tabulky přes celou šíři okna prohlížeče.


Použití tabulek



V současné době se tabulkových příkazů používá většinou nikoliv k zarovnávání číselných hodnot, ale k celkové úpravě HTML stránky. Například lze do několika sloupečků tabulky umístit obrázky, které budou na stránce pravidelně rozmístěny nezávisle na šířce okna prohlížeče.
Jako další příklad mohou sloužit všechny lekce výuky jazyka HTML, které jsou zpracovány jako vycentrované tabulky o šířce 500 pixelů.
Tabulkami je možné výrazně zpřehlednit i formuláře. Zaškrtávací políčka lze umístit do jedné buňky tabulky, zatímco jejich popis bude ve vedlejším sloupečku.



Příklad (nejprve bez tabulky):

<FORM>
<CENTER>
<FONT SIZE=+2><B>Anketa</B></FONT>
</CENTER>
Jméno a příjmení <INPUT NAME="jmeno" SIZE=30><BR>
Bydliště <INPUT NAME="adresa" SIZE=30><BR>
Vlastním:<BR>
<INPUT TYPE="checkbox" NAME="MAJ" VALUE="TV" CHECKED> Televizor<BR>
<INPUT TYPE="checkbox" NAME="MAJ" VALUE="VR"> Videorekordér<BR>
<INPUT TYPE="checkbox" NAME="MAJ" VALUE="HF"> Hi-Fi soupravu<BR>
</FORM>


Nyní s použitím tabulek:

<FORM>
<CENTER>
<TABLE>
<TR>
<TD ALIGN=center COLSPAN=2>
<FONT SIZE=+2><B>Anketa</B></FONT></TD>
</TR>
<TR>
<TD>Jméno a příjmení</TD>
<TD><INPUT NAME="jmeno" SIZE=30></TD>
</TR>
<TR>
<TD>Bydliště</TD>
<TD><INPUT NAME="adresa" SIZE=30></TD>
</TR>
<TR>
<TD VALIGN=top ALIGN=right>Vlastním:</TD>
<TD><INPUT TYPE="checkbox" NAME="MAJ" VALUE="TV" CHECKED> Televizor<BR>
<INPUT TYPE="checkbox" NAME="MAJ" VALUE="VR"> Videorekordér<BR>
<INPUT TYPE="checkbox" NAME="MAJ" VALUE="HF"> Hi-Fi soupravu</TD>
<TR>
</TABLE>
</CENTER>
</FORM>

Co to jsou rámce?



Pomocí rámců (frames) je možné rozdělit okno prohlížeče na několik oblastí. V každé oblasti je možné zobrazit jiný dokument, který může být (a většinou též je) provázán s ostatními dokumenty v jiných rámcích.
Nejčastěji bývá rámců použito k rozdělení okna na úzký sloupeček umístěný vlevo (méně častěji vpravo) obsahující nabídku HTML dokumentů, a větší okno, ve kterém jsou tyto dokumenty zobrazovány. Stejným způsobem je tvořena i tato výuka jazyka HTML (viz. úvodní okno).


Rozdělení okna prohlížeče



Rámce jsou definovány ve speciálním HTML dokumentu, který neobsahuje příkaz <BODY>. Místo něj je použit kontejner <FRAMESET>, ve kterém je definován počet rámců a jejich rozmístění v okně prohlížeče. Pomocí atributu COLS je definováno vertikální rozdělení zobrazovací plochy, atributem ROWS pak členění horizontální. Hodnota těchto atributů je zadávána v počtu pixelů, případně procentuálně. Hvězdička v definici těchto atributů vymezuje rámci zbylý prostor okna (v případě použití více "hvězdičkových" hodnot, je zbývající prostor plochy prohlížeče spravedlivě rozdělen mezi tyto rámce). Počet hodnot atributů COLS a ROWS určuje počet rámců v okně.
Uvnitř kontejneru FRAMESET se používá příkazu <FRAME> a příslušného atributu SRC, s jehož pomocí se specifikuje dokument, který má být v daném okně zobrazen. Atribut NAME pak přiřazuje danému rámci jeho jméno, které se stává cílem hypertextových odkazů.



Rozdělení okna prohlížeče ve výuce jazyka HTML

<HTML>
<HEAD>
<TITLE> Výuka jazyka HTML </TITLE>
</HEAD>

<FRAMESET COLS="180,*">
<FRAME SRC="obsah.htm" NAME="obsah" SCROLLING=auto NORESIZE>
<FRAME SRC="main.htm" NAME="main" SCROLLING=auto NORESIZE>
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<H2> HTML dokument vyžaduje podporu FRAMEů</H2><BR>
Prohlížeč je možné získat na adrese:
<A HREF="http://www.netscape.com"> http://www.netscape.com</A> </CENTER>
</BODY>
</NOFRAMES>
</HTML>

Poznámka: tímto jsme získali levý sloupeček s názvem obsah a pravé okno se jménem main.



<FRAMESET rows="podélné_dělení_okna" cols="svislé_dělení_okna">
...<FRAME>...
</FRAMESET>
párová značka sloužící k rozdělení okna prohlížecího programu; používá se v HTML dokumentu místo příkazu <BODY>; uvnitř tohoto kontejneru se smí vyskytovat pouze příkaz <FRAME>, případně další skupina <FRAMESET> (vnořování je přípustné)
rows podélné dělení okna; seznam je dělený čárkou
cols svislé dělení okna; seznam je dělený čárkou
* dělení ve stejném poměru
n% procentuální dělení
n absolutní dělení (v pixelech)

!prvek není standardizován


<FRAME src="url_dokumentu" name="jméno_rámu" marginheight="výška_okraje" marginwidth="šířka_okraje" scrolling=[yes | no | auto] noresize>
nepárová značka definující jeden rám uvnitř prvku <FRAMESET> src URL dokumentu, který má být obsahem rámu
name jméno rámu, které může sloužit jako cíl pro hypertextové odkazy
marginheight vzdálenost mezi textem a okrajem rámu ve svislém směru (v pixelech)
marginwidth vzdálenost mezi textem a okrajem rámu ve vodorovném směru (v pixelech)
scrolling opatření rámu posuvnými pruhy
yes ano
no ne
auto automaticky, jsou-li potřeba (implicitní hodnota)
noresize zákaz měnit velikost rámu uživatelem

!prvek není standardizován


Příkaz FRAMESET je možné vkládat do sebe, tedy například okno je rozděleno na dva vodorovné rámce. Každý z těchto rámců je pak dále dělitelný svisle (samozřejmě je možné jej dělit znovu i ve vodorovném směru).



Ukázka vnořování příkazu FRAMESET:

<HTML>
<HEAD>
<TITLE> Test </TITLE>
</HEAD>

<FRAMESET ROWS="*,33%">
<FRAMESET COLS="25%,*,25%">
<FRAME SRC="test.htm">
<FRAME SRC="test.htm">
<FRAME SRC="test.htm">
</FRAMESET>
<FRAMESET COLS="33%,*">
<FRAME SRC="test.htm">
<FRAME SRC="test.htm">
</FRAMESET>
</FRAMESET>
</HTML>


Pohyb v rámcích



Rámce získávají smysl v okamžiku, kdy v HTML dokumentu jsou hypertextové odkazy na jiné HTML stránky, které jsou pak nataženy do různých rámců. Jako příklad zde uvádíme část dokumentu, který je zobrazen v levé části okna prohlížeče při zpracování výuky jazyka HTML.


Příklad na pohyb v rámcích:

<OL>
<LI> Lekce</LI><BR>
<A HREF="zaklady.htm" TARGET="main"> Základy</A>
<LI> Lekce</LI><BR>
<A HREF="struktur.htm" TARGET="main"> Strukturování dokumentu</A>
<LI> Lekce</LI><BR>
<A HREF="format.htm" TARGET="main"> Formátování textu</A>
</OL>

Poznámka: tento dokument je otevřen v rámu, který je pojmenován obsah, a jak je patrné, všechny odkazy jsou přesměrovávány do jiného okna s názvem main.


Prohlížeče bez podpory rámců



Prohlížeče, které neumějí rámce zpracovávat, přeskočí rozdělení obrazovky a neudělají vůbec nic. Na tuto možnost je pamatováno zavedením příkazu <NOFRAMES>, který se provede právě v případě prohlížeče neznajícího rámce. V tomto kontejneru je možné umístit celé tělo HTML dokumentu s upozorněním, že pro zobrazení následujících stránek je nutné mít prohlížeč s podporou rámců, případně sem lze umístit alternativní "nerámcové" zpracování těchto stránek.


Příklad použití příkazu NOFRAMES:

<HTML>
<HEAD>
<TITLE> Výuka jazyka HTML </TITLE>
</HEAD>

<FRAMESET COLS="180,*">
<FRAME SRC="obsah.htm" NAME="obsah" SCROLLING=auto NORESIZE>
<FRAME SRC="main.htm" NAME="main" SCROLLING=auto NORESIZE>
</FRAMESET>
<NOFRAMES>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<H2> HTML dokument vyžaduje podporu FRAMEů</H2><BR>
Prohlížeč je možné získat na adrese:
<A HREF="http://www.netscape.com"> http://www.netscape.com</A> </CENTER>
</BODY>
</NOFRAMES>
</HTML>






<NOFRAMES>
...tělo dokumentu...
</NOFRAMES>
párová značka obsahující HTML dokument, který je zobrazen v prohlížečích neumějících zpracovávat rámce při použití dělení obrazovky příkazem <FRAMESET>

!prvek není standardizován

Pou�ita literat�ra

Heiko Knappe, Till S.Schwalm: HTML a Java - Chip Special (katal.č.:CH036)
z tohoto zdroje byla čerpďż˝na předev��m nďż˝plň vďż˝ech vďż˝ukovďż˝ch lekcďż˝
(c) 1996 Vydavatelstvďż˝ Vogel Publishing, s.r.o. v licenci německďż˝ho nakladatelstvďż˝ Vogel International Verlag GmbH

Pavel Mikle: Referenčnďż˝ přďż˝ručka jazyka HTML
kniha obsahuje seznam přďż˝kazů jazyka HTML verze 3.2
(c) 1996 Unis Publishing s.r.o.

Petr Lampa: Syst�m WWW (8.d�l) - Connect 11/96
tento člďż˝nek (strana 38 - 40) se zabďż˝vďż˝ nestandradnďż˝mi roz��řenďż˝mi jazyka HTML
vydalo nakladatelstvďż˝ Computer Press, s.r.o.


Najnovsie clanky od tohto redaktora
Podobne clanky