Úvod do tvorby webových stránek

Transkript

Úvod do tvorby webových stránek
Ing. Aleš Kastner, CSc.
Recenzovali:
Prof. Ing. Tomáš Hruška, CSc.,
fakulta informačních technologií, Vysoké učení technické Brno
prom. mat. Vladimír Vrabec
Tato učebnice vznikla s přispěním programu Leonardo
Evropské unie v rámci projektu CZ/00/B/F/PP134029
Internet jako potenciální zdroj nových pracovních příležitostí
pro neslyšící a Ministerstva zdravotnictví ČR.
Názvy produktů a firem, které jsou v knize použity, jsou nebo mohou být ochranné známky
nebo zapsané ochranné známky svých vlastníků.
© 2003 ing. Aleš Kastner, CSc.
Typo © 2003 Hana Züglerová
Cover © 2003 František Štorm
© 2003 Federace rodičů a přátel sluchově postižených, Praha
ISBN 80-86792-06-4
3
OBSAH
Místo úvodu
7
1. Základy vytváření webových stránek v HTML 3.2
9
1.1 Zdroj a obraz webové stránky
1.2 Způsob komunikace
1.3 Prostředky návrhu stránek
1.3.1 FrontPage
1.3.2 InterDev
1.3.2 Netscape
1.3.4 EasyPad
1.4 Základní jazyk tvorby stránek: HTML 3.2
1.4.1 Části stránky
1.4.2 Značky pro záhlaví stránky
1.4.3 Pozadí stránky
1.5 Formátování textu
1.5.1 Normální text
1.5.3 Nastavení velikosti, barvy a řezu (fontu) písma
1.5.4 Odstavce
1.5.5 Speciální znaky
1.5.6 Nadpisy
1.5.7 Nech mi to, jak to chci mít
1.6 Odkazy
1.6.1 Na obrázek
1.6.2 Odkazy na stránku
1.6.3 Odkazy na část stránky
1.6.4 Další druhy odkazů
1.7 Seznamy
1.7.1 Neseřazené seznamy
1.7.2 Číslované seznamy
1.7.3 Definice
1.8 Tabulky
1.8.1 Záhlaví, řádky, sloupce
1.8.2 Orámování
1.8.3 Buňky
1.8.4 Další možnosti formátování tabulky
1.8.5 Formátování sloupců
1.9 Rámce
1.9.1 Druhy rámců
1.9.2 Použití rámců typu 1 - klasických
1.9.3 Použití rámců typu 2 – plovoucích
9
9
9
10
11
13
14
16
16
17
21
22
22
25
27
28
30
31
34
34
46
48
49
50
51
55
56
58
58
60
64
69
75
77
77
78
87
4
ÚVOD DO T VO R BY W E B OV ÝC H ST R Á N E K
1.10 Grafická podoba stránek
1.10.1 Pravidla návrhu stránek
1.10.1.1 Přehlednost
1.10.1.2 Snadná orientace
1.10.1.3 Obrázky a animace
1.10.2 Několik příkladů
1.11 Tvorba formulářových stránek
1.11.1 Značka <FORM>
1.11.2 Speciální použití formuláře
1.12 Zařazení ovládacích prvků
1.12.1 Vstupní pole
1.12.2 Tlačítka
1.12.3 Obrázky - mapy
1.12.4 Volby
1.12.5 Možnosti
1.12.6 Skrytá pole
1.12.7 Seznamy
1.12.8 Víceřádková textová pole
1.12.9 Příklad
1.12.10 Výběr souboru
1.12.11 Příklad
1.13 Jazyk CSS
1.13.1 Zápis stylů
1.13.1.1 Délkové jednotky v CSS
1.13.2 Písmo, fonty
1.13.2.1 Typ písma
1.13.2.2 Řez písma
1.13.2.3 Varianta písma
1.13.2.4 Velikost písma
1.13.3 Barva textu a pozadí
1.13.3.1 Barva textu
1.13.3.2 Barva pozadí
1.13.3.3 Obrázek na pozadí
1.13.3.4 Opakování obrázku
1.13.3.5 Připevnění obrázku na pozadí
1.13.3.6 Umístění obrázku
1.13.3.7 Úplný zápis stylu pozadí
1.13.4 Formátování textu
1.13.4.1 Mezery mezi slovy
1.13.4.2 Mezery mezi písmeny
1.31.4.3 Další vlastnosti písma
1.13.4.4 Svislé zarovnání textu
1.13.4.5 Verzálky, kapitálky, majuskule, minuskule
1.13.4.6 Vodorovné zarovnání textu
1.13.4.7 Odsazení textu od levého okraje
1.13.4.8 Mezera mezi řádky
89
89
89
90
91
92
99
100
100
100
101
101
102
102
103
103
103
104
105
108
109
110
110
111
111
112
112
112
112
113
113
113
113
113
113
113
114
114
114
114
114
114
115
115
115
115
OBSAH
1.13.5 Rámečky
1.13.5.1 Okraje kolem rámečku zvenku
1.13.5.2 Velikost volného prostoru
1.13.5.3 Síla rámečku
1.33.5.4 Barva rámečku
1.13.5.5 Vzorkování rámečku, plastické efekty
1.13.5.6 Parametry pro jednu stranu rámečku
1.13.5.7 Parametry pro celý rámeček
1.13.6 Prvky a práce s nimi
1.13.6.1 Šířka prvku
1.13.6.2 Výška prvku
1.13.6.3 Vodorovné umístění prvku
1.13.6.4 Obtékání prvku
1.13.6.5 Klasifikace prvků
1.13.6.6 Bílé mezery
1.13.6.7 Formátování seznamu
1.13.6.8 Odsazování
1.13.6.9 Speciální prvky
5
115
116
116
116
117
117
117
117
117
118
118
118
118
118
119
119
119
119
1.13.7 Seskupování, nadřazenost a dědičnost
1.13.8 Třídy a identifikátory
120
120
1.13.9 Komentáře a kompatibilita vpřed
122
1.13.10 Import stylů
1.13.11 Kaskádní styly
122
122
1.3.8.1 Třídy
1.13.8.1 Identifikátory
1.13.9.1 Komentář
1.13.9.2 Kompatibilita vpřed
2. Jak dál?
2.1 Skripty na klientské straně
2.1.1 Java skript
2.1.1.1 Příklad 1: kontrola obsahu pole
2.1.1.2 Příklad 2: kontrola hesla
120
121
122
122
131
131
131
132
133
2.1.2 Visual Basic
2.2 Dynamika pomocí programů, filtrů a skriptů
2.2.1 CGI
2.2.2 ISAPI
134
134
135
135
2.3 Napojení na zdroje dat na serverové straně
2.3.1 FileSystem
2.3.1 ODBC ovladače
2.3.2 ADO: Model pro přístup do databází
2.3.4 Princip činnosti ASP + ADO na příkladu
2.3.5 Problémy přístupových práv
138
138
138
138
139
142
2.2.3.1 Základní charakteristika ASP
2.2.3.2 Přístup k údajům z formuláře
2.2.3.3 Vkládání souborů
136
136
137
6
2.4 Rozšířený jazyk tvorby stránek
2.4.1 HTML verze 4
2.4.1.1 URI
2.4.1.2 Ukládání skriptů do zvláštních souborů
2.4.1.3 Podpora mezinárodního použití HTML v mnoha jazycích
2.4.1.4 Podpora pro použití osobami smyslově postiženými
2.4.1.5 Tabulky
2.4.1.6 Složené dokumenty
2.4.1.7 Definice stylů
2.4.1.8 Psaní skriptů
2.4.1.9 Tisk
2.4.2 Příklady zápisu stylů
2.4.2.1 Styl v odděleném souboru
2.4.2.2 Styl je popsán mezi značkami <STYLE>, </STYLE>
2.4.2.3 Styl je popsán přímo v definici <P> toho odstavce, kde je použit
2.4.3 XML
3. Přílohy
142
142
142
142
143
143
143
143
144
146
146
147
147
147
149
149
153
3.1 Základní informace
153
3.1.1 Web, WWW, LAN, WAN, Internet, klient, server, služby,… jak se v tom vyznat? 154
3.1.1.1 Co je to Internet?
3.1.1.2 K čemu Internet slouží?
3.1.1.3 Pracovní stanice a servery
3.1.1.4 Adresy a jména počítačů v Internetu
3.1.1.5 Služby, protokoly a porty
3.1.1.6 Vznik služby WWW
3.1.1.7 Co je to hypertext
3.1.2 To hlavní z protokolu HTTP
3.1.3 Verze jazyka HTML
3.1.3.1 Základní verze
3.1.3.2 Struktura webové stránky
3.1.3.3 Značky
3.1.4 Co všechno může webová stránka obsahovat
3.1.4.1 Informace
3.1.4.1 Programy (skripty)
3.1.5 Jak dostanete hotovou webovou stránku na veřejný server
3.2 Přehled značek
3.3 Přehled parametrů
3.4 Přehled kódů
3.5 Rozšířená barevná paleta
Rejstřík
154
156
157
157
158
165
168
168
170
170
170
171
173
173
175
177
180
183
185
188
197
MÍSTO ÚVO D U
7
MÍSTO ÚVODU
Tento učební text se nazývá Úvod do tvorby webových stránek. To má svůj důvod.
Studenti se zde naučí jen to nejdůležitější, co potřebují k tomu, aby mohli vytvářet jednoduché webové stránky. Kdo se chce vytvářením webových stránek živit, nesmí si myslet, že
tento text obsahuje všechno. Není to ani možné, protože rozvoj zde postupuje velmi rychle.
Studenti se sami přesvědčí, že webové stránky, které mohou dnes vidět na Internetu, používají
například:
Ü reakce na pohyb myši,
Ü pohyblivé reklamy a upoutávky,
Ü texty běžící zprava doleva,
Ü spojení s datovou základnou nebo datovým skladem (objednávky, prodej)
a další vlastnosti, o kterých se v tomto úvodu nepíše, protože by byl velmi dlouhý
a pro začátečníky obtížný k pochopení. Po absolvování budou studenti umět udělat například
webové stránky o sobě nebo své rodině, o svých zálibách atd. Kdo se ale chce tvorbou webových stránek živit, musí pokračovat ve studiu dalších systémů, o kterých je zde jenom zmínka. Jsou to například HTML verze 4, dynamické HTML, serverové skriptování (PHP, ASP,
ASP.NET) a další. Odborné literatury na toto téma je v obchodech dostatek. Studenti si však
už nebudou muset kupovat knihy pro úplné začátečníky.
Text je upraven podle zkušeností, které jsem získal při pozorování výuky sluchově postižených studentů. Studenti měli k dispozici první verzi textu.
Moje dva nejdůležitější poznatky z výuky sluchově postižených jsou:
1. Jít bez dlouhých řečí k jádru věci.
2. Dát studentům co nejdříve prostředky k tomu, aby mohli tvořit webové stránky.
Zároveň jsem chtěl z původního textu zachovat všechno, co považuji za dobré
a správné:
Ü Postupovat s výkladem od jednoduchých věcí ke složitějším.
Ü Nechat v textu i podrobný úvod pro ty, kteří ho potřebují.
Text je tedy připraven takto:
Ü Místo hlavního úvodu dávám podrobný úvod na začátek přílohy. Když nebude
student schopen pracovat od začátku, může se podívat do přílohy a zjistit, co
potřebuje vědět. Když nebude schopna práce většina studentů, může přílohu použít
lektor a vysvětlit, co je potřeba.
Ü Přílohy mají vlastní úvod do Internetu zaměřený na službu WWW a webové stránky.
Ü V poslední době se prosazuje používání CSS – kaskádových stylů. Kaskádové styly
mají vlastnosti vhodné pro tvorbu stránek určených i zdravotně postiženým
(například slepým) lidem. Proto je popis jazyka CSS zařazen jako poslední kapitola
základní části textu.
Ü Mezi první částí HTML, která popisuje jednodušší vlastnosti, a druhou náročnější
částí je „oddechová“ část 1.10.
Ü Část 2 je možno studentům předložit široce upravenou podle stavu programování
webových stránek, jaký právě je. O věci je možno různě diskutovat, uvést příklady
stránek jako elektronické bankovnictví, elektronický obchod atd., odhadnout, jak
jsou stránky asi řešeny, podívat se na jejich zdrojový text, rozebrat ho, atd.
8
Ü Lektor dostává více než 90-stránkovou prezentaci s nejdůležitějšími tématy látky.
Prezentace může sloužit jako podpora nebo vodítko výuky.
Věřím, že takto upravený text bude použitelný a užitečný.
Termín
Vysvětlení
Anglicky
CD
e-business
elektronické obchodování po Internetu; vyžaduje speciální aplikace a zabezpečení
HTML
HyperText Markup Language
značkový jazyk, v němž píšete zdrojové webové stránky
Kaskádové styly
Cascading styles
Služba
Service
základním smyslem Internetu je poskytovat různé služby (WWW, FTP, e-mail,…);
služby jsou umístěny na serverech
Webové stránky
Web pages
texty k publikaci; obsahují značky jazyka HTML
Zdrojový text
Source text
text webové stránky, jak ji napsal programátor (vy)
Jazyková poznámka:
Název „Internet“ zde píši jako název jedinečné
(a obdivuhodné) věci, celosvětové elektronické komunikační
sítě. Je to také v souladu s Pravidly
českého pravopisu, vydání školní, dodatky
z roku 1993:
Internet (vlastní jméno) - celosvětová informační
a komunikační síť.
Autor
9
1. ZÁKLADY VYTVÁŘENÍ
WEBOVÝCH STRÁNEK
V HTML 3.2
1.1 Zdroj a obraz webové stránky
Pro další výklad si vysvětlíme rozdíl mezi zdrojem webové stránky a obrazem webové
stránky.
V prohlížeči vidíte obraz webové stránky. Vypadá tak, jak si přál její autor.
Prohlížeč vytvořil obraz webové stránky ze souboru s příponou HTM nebo HTML.
Soubor si přečetl z web serveru. Soubor obsahuje text v jazyku HTML. Text obsahuje značky.
Aby vznikl obraz webové stránky, musí její autor napsat text se značkami. Je to návod
pro prohlížeč. Podle něj prohlížeč sestaví webovou stránku a zobrazí ji.
Text se značkami se nazývá zdroj webové stránky nebo zdrojový text webové
stránky. Anglicky: source, source text. Soubor, kde je uložen zdrojový text, se nazývá
zdrojový soubor.
Když se bude dále psát o webové stránce nebo jen stránce, mějte prosím na paměti, že
jde vlastně o dvě věci: zdroj a obraz webové stránky.
1.2 Způsob komunikace
Pro odesílání webových stránek, příjem požadavků a parametrů od uživatelů byl
vytvořen protokol HTTP – HyperText Transfer Protocol. Dnes se používají jeho dvě verze:
1.0 a 1.1.
Verze 1.0 pochází z roku 1996. Je sice jednoduchá, ale obsahuje už všechny základní
vlastnosti protokolu. Proto se používá dosud.
Verze 1.1 z roku 1999 přináší různá vylepšení a má více komunikačních funkcí.
1.3 Prostředky návrhu stránek
Pro vytvoření webové stránky potřebujete tři hlavní programy:
1. Textový editor, ve kterém napíšete zdrojový text stránky. Nebo speciální program
pro návrh stránek, kde přímo sestavíte stránku z odstavců textu, obrázků, tabulek,
odkazů atd. Nejjednodušší takový editor je například „Poznámkový blok“ v systému
Windows.
2. Prohlížeč webových stránek, který vám ukáže, jak stránka vypadá, jak ji uvidí
uživatel. V systému Windows poslouží například Internet Explorer nebo Netscape.
3. Klientský program, který odešle hotovou stránku na server k publikaci. Často se
k tomu používá protokol a klient FTP. Ve Windows je klient FTP součástí systému.
(K těmto programům nepočítám grafické systémy pro tvorbu obyčejných a animovaných obrázků. Nové obrázky a animace nepotřebují totiž všichni autoři webových stránek.
Firmy, produkující webové stránky, často zaměstnávají grafiky, kteří potřebné obrázky udělají
podle popisu.)
10
ÚVOD D O T VO R BY W E B OV ÝC H ST R Á N E K
Výrobci software dodávají pro vytváření webových stránek speciální programy,
které obsahují všechny tyto tři programy v jednom. Navíc mají řadu dalších funkcí, které vám
usnadní správné navržení a sestavení webové stránky.
Existuje mnoho takových programů; zde si něco povíme o čtyřech, které se často používají. Jsou to FrontPage, InterDev, Netscape Composer a EasyPad.
1.3.1 FrontPage
FrontPage je program ze skupiny Microsoft Office. Umožňuje navrhovat jednotlivé webové stránky, hned při návrhu ukazovat, jak budou vypadat (náhled), a odesílat je na server.
FrontPage má dále prostředky pro návrh ucelených skupin vzájemně vázaných webových stránek, tzv. web sites (webových sídel). Každý webový server firmy nebo jiné
organizace se skládá z několika stránek, které spolu tvoří web site. FrontPage vám umožňuje
vytvořit si web site ve vašem počítači a po dokončení je přesunout na server.
Pro přesun webových stránek nebo celého web site na server může FrontPage použít dva
prostředky. Prvním z nich je přenos pomocí klienta FTP, druhým přenos protokolem HTTP.
První prostředek vyžaduje, aby na web serveru zároveň běžel program FTP server. Druhý prostředek vyžaduje, aby byl na web serveru instalován doplněk „FrontPage Server Extensions“.
K tomu je nutné, aby web server byl také od firmy Microsoft – IIS (Internet Information
Server).
Hlavní okno FrontPage vypadá takto:
Okno má v základním zobrazení dva panely, které vidíte na obrázku. Levý panel přepíná
různé režimy činnosti programu. Pro vytváření webových stránek se používá „Page“ (stránka). Pravý panel zabírá většinu okna. Na jeho spodní části vidíte tři záložky:
Ü Normal – slouží k návrhu webové stránky podobným způsobem, jakým píšete text
ve Wordu, zařazujete obrázky, tvoříte odstavce a nadpisy.
ZÁKLADY V YT VÁ Ř E N Í W E B OV ÝC H ST R Á N E K V H T M L 3 . 2
11
Ü HTML – zapisujete zdrojový text stránky v jazyku HTML. FrontPage ihned
analyzuje váš text a zobrazuje úhlové závorky značek a všechna klíčová slova jinou
barvou než ostatní text.
Ü Preview – je náhled, kde můžete vidět, jak stránka, kterou vytváříte, právě vypadá.
Záložky se přepínají prostým klepnutím myší. Další obrázek ukazuje náhled stránky,
jejíž zdrojový text je na předchozím obrázku.
Verze FrontPage 2000 umožňuje také prohlídku stránky běžným prohlížečem MS
Internet Explorer, doplnění prvků jazyka HTML 4.0, jako animací, efektů při přejetí textu
nebo obrázku myší atd.
1.3.2 InterDev
InterDev je rovněž program Microsoftu. Patří do rodiny návrhářských programů Visual
Studio. (Spolu s ním jsou tam hlavními programy například Visual Basic, Visual C++ a Visual
FoxPro.)
InterDev je pravděpodobně zkratkou z Internet Developer (vývoj pro Internet). Dají se
s ním vytvářet ucelené skupiny provázaných webových stránek, tvořících tzv. web sites (webová sídla). Používá k tomu způsob, kdy návrháři (lidé vytvářející web site) pracují způsobem
tzv. projektů.
Kromě návrhu stránek v jazyku HTML ovládá InterDev také skriptové prostředky ASP
(Active Server Pages), JavaScript a VBScript (Visual Basic Script).
Na každém projektu může spolupracovat několik lidí. Výsledkem projektu je web site
nebo jeho část. Organizace projektu umožňuje ukládat verze, vytvářet HTML a ASP stránky
nezávisle, odesílat je k publikaci na servery, zkoušet je a opravovat.
12
Přesto, že je InterDev zaměřen na tvorbu celých web sites, je velmi dobře použitelný
i k tvorbě jednotlivých webových stránek. Prostředky, týkající se projektů, nemusíte totiž
vůbec používat.
InterDev má při tvorbě webových stránek v jazyku HTML dvě velké výhody:
Ü barevné označení značek, klíčových slov, parametrů a hodnot,
Ü schopnost okamžitě si prohlédnout výsledek – nepotřebujete spouštět prohlížeč.
Názorně to ukáže obrázek hlavního okna programu InterDev:
Levá strana okna obsahuje prostředky pro tvorbu formulářů (Toolbox).
Prostřední část se používá pro zápis zdroje webové stránky, pro návrh jejího vzhledu
a pro zobrazení výsledku tak, jak bude vypadat v prohlížeči. Závisí to na záložce, kterou zvolíte dole. Můžete tam vidět tři záložky, které přepínají režimy Design (návrh), Source (zdroj)
a QuickView (náhled). Na obrázku je stisknuta záložka Source a v okně je zapsán zdrojový
text. Autor píše text přímo do okna Source a InterDev ho ihned analyzuje a barevně označuje. Úhlové závorky jsou modré, klíčová slova značek hnědá, názvy parametrů červené, jejich
hodnoty modré a publikovaný text je černý. Neznámé značky nebo klíčová slova jsou fialová.
Pravá strana okna obsahuje vlastnosti (Properties), to znamená parametry značek
a jejich hodnoty. Když píšete značku, napíšete napřed úhlovou závorku (<), klíčové slovo
a mezeru. V tom okamžiku InterDev rozpozná klíčové slovo a v pravé části okna zobrazí
značku a její parametry. Totéž udělá, když postavíte kursor dovnitř kterékoli již napsané
značky. Na obrázku je kursor umístěn do značky <BODY>. V části Properties můžete vybrat
nebo napsat hodnoty různých parametrů značky BODY, například vybrat barvu (bgColor).
Parametr, který vyberete, se automaticky přepíše do značky, nemusíte ho psát.
Schopnost programu InterDev analyzovat text už při psaní usnadňuje i zjišťování
a opravy chyb. Když třeba zapomenete koncové úvozovky („), dostane další text jinou barvu,
takže hned vidíte, v čem je chyba. Bez barevného rozlišení by se taková chyba těžko hledala.
13
Stránku můžete vytvářet také v režimu Design. Návrh umožní provádět základní
činnosti, jako psaní textu, jeho úprava, odstavce, vkládání obrázků a odkazů, i vytváření
tabulek a formulářů. Tyto prvky můžete označovat a přemisťovat, příslušné značky vytvoří
InterDev za vás.
Máte-li napsaný text nebo část textu, můžete kdykoli přepnout do režimu náhledu
(QuickView) a podívat se, jak stránka bude vypadat v prohlížeči. InterDev zobrazí i tabulky, rámce a formuláře. Na dalším obrázku vidíte výsledek – webovou stránku, která vznikla
ze zdroje, jehož část je vidět na předchozím obrázku.
Zveřejnění hotové stránky nebo celého projektu web site je součástí „projektových“
funkcí. Nejjednodušším způsobem je připojení adresáře na serveru jako tzv. síťové jednotky
a přenos webové stránky na ni. Ovšem u větších projektů se počítá s tím, že na straně serveru
je instalována speciální podpora „FrontPage Server Extensions“, rovněž produkt Microsoftu.
Pak lze jedním příkazem umístit hotový web site na server.
1.3.2 Netscape
Z produktů firmy Netscape je nejznámější Netscape Navigator. Existují ale i další programy a mezi nimi Netscape Composer, který umožňuje navrhovat webové stránky.
Composer pracuje asi tak, jako režim Design u programu InterDev. To znamená, že autor vytváří webovou stránku pomocí zápisu textu, formátovacích funkcí, vkládání obrázků
a tabulek. Pro tyto činnosti existují tlačítka a funkce menu. Composer pak sám vytvoří zdrojový soubor webové stránky. V běžných případech tak nemusí autor žádné značky sám zapisovat.
Obrázek ukazuje okno programu Netscape Composer. První, širší lišta nástrojů pod
hlavním menu obsahuje tlačítka pro základní činnosti, jako vložení odkazu, obrázku nebo tabulky. Druhá užší lišta slouží k formátování textu. Text sám se zapisuje přímo do okna.
14
Důležitá funkce je Náhled, kdy se zobrazí skutečný vzhled stránky. Za tím účelem
Composer otevře okno programu Netscape Navigator.
Neméně důležitou funkcí je Zveřejni. Používá se k přenosu hotové stránky na server. Lze
použít přenos v protokolu FTP nebo HTTP.
Jestliže má stránka zvláštní obsah, když je nutno použít speciální parametry značek anebo vytvořit definiční stránku rámců, je nutný zápis parametrů přímo do značek. Composer má
funkci zobrazení ve tvaru zdroje, jak ukazuje obrázek:
Je zde zdroj vygenerovaný pro prázdnou stránku. Vidíte, že Composer vytvoří kostru
stránky a standardně do ní vloží značky pro jméno autora a podpis generátoru Netscape.
1.3.4 EasyPad
EasyPad je český produkt, tzv. shareware. Jeho licence se dá zakoupit za menší částku
přímo od autora. Podrobnosti zjistíte na http://www.elka.cz/easypad/.
V současnosti je nejnovější verzí EasyPad 3.4. Ten má schopnost okamžitě analyzovat
zapsaný text a barevně rozlišit klíčová slova – názvy značek, názvy parametrů, hodnoty parametrů a text, stejně jako InterDev.
15
Text webové stránky spolu se značkami zapisujete do pravé části okna. Značky
můžete také vkládat pomocí tlačítek zobrazených v panelu nástrojů přímo nad textem stránky.
Tlačítka vkládají značky přímo do textu v pravé části okna. Když má značka nějaké parametry,
ukáže EasyPad dialog pro zadání parametrů a jejich hodnot. Vidíte to na dalším obrázku.
EasyPad dělí značky HTML na několik skupin, které volíte výběrem záložky: Základní,
Fonty, Tabulky, Formuláře, Seznamy, Rámce atd. Přitom se vždy vymění obsah panelu nástrojů, takže vidíte a můžete používat tlačítka, která zařazují značky z příslušné skupiny.
Značky jazyka HTML si můžete zobrazit ve zvláštním seznamu (viz obrázek). Zde si
vyberete značku a program zobrazí všechny její parametry. K vybrané značce si můžete
ihned zobrazit nápovědu. Vybranou značku můžete vložit do textu a tam pak upravit její
parametry.
16
Program EasyPad má řadu dalších užitečných funkcí. Dokáže ihned zobrazit webovou stránku tak, jak bude vypadat v prohlížeči (funkce „náhled“). Obsahuje
pomocníky pro vytváření stylů, seznamů a tabulek. Umí převádět český text mezi kódy
Windows, Latin 2, Kamenických, ISO. Má také FTP klient pro odesílání vytvořených webových stránek na servery.
1.4 Základní jazyk tvorby stránek: HTML 3.2
1.4.1 Části stránky
Základní kostru stránky jste už viděli. Teď si zopakujeme, jak vypadají její jednotlivé
části.
Identifikace
<HTML>
Záhlaví stránky
Tělo stránky
</HTML>
Identifikace
<!DOCTYPE HTML PUBLIC -“//W3C//DTD HTML 3.2 Final//EN“>
Záhlaví stránky
<HEAD>
Značky určené pro záhlaví stránky
Případně: text skriptů pro klienta
</HEAD>
Tělo stránky
<BODY>
Text a značky určené pro tělo stránky
</BODY>
17
Značka
Každá značka je zapsána v úhlových závorkách: <>
Většina značek je párová (párové značky). Pár tvoří počáteční značka a koncová
značka.
Uvnitř závorek je jméno značky a případně parametry: <P ALIGN=CENTER>. Mezi
jménem značky a parametry je mezera.
Koncová značka má před jménem jedno lomítko: </a>.
Parametry mají jméno a hodnotu. Mezi jménem a hodnotou je rovnítko: =. Hodnota se
často zapisuje do uvozovek: „„. Je-li parametrů více, oddělují se mezerami.
Jména značek a parametrů se mohou psát písmeny malé i velké abecedy: <div> i <DIV>.
Písmena velké abecedy lépe vyniknou v textu zdroje webové stránky.
Poznámka
Je to část textu uzavřená do znaků  (konec
poznámky).
Prohlížeč takovou poznámku přeskočí. Do poznámky můžete uzavřít jakýkoli text
i značky – prohlížeč se jimi nebude zabývat.
Poznámku použijete například pro nějakou část zdroje webové stránky, kterou připravujete, ale nemáte ještě hotovou. Po jejím dokončení smažete znaky začátku a konce poznámky
– zdroj se uplatní.
Příklad:
…konec textu. Začátek textu…
Prohlížeč zobrazí předchozí úsek zdroje takto:
… konec textu. Začátek textu…
1.4.2 Značky pro záhlaví stránky
Nadpis
Párová značka <TITLE> a </TITLE> určuje název stránky. Je to text, který se zobrazí
jako nadpis celého okna prohlížeče vlevo nahoře v pruhu záhlaví.
<HEAD>
<TITLE>Narozeniny</TITLE>
18
se zobrazí:
Narozeniny - …
Název by měl vždy určovat, o čem webová stránka pojednává. Pozor, název je většinou
něco úplně jiného, než jméno souboru HTM, obsahujícího zdroj stránky.
Základní adresář
Značka BASE není párová. Označuje adresář vyjádřený jako URL, například:
http://intranet/osa/
Celá značka vypadá takto:
<BASE HREF=“http://intranet/osa“>
Když je definován základní adresář, můžete psát odkazy související se stránkou, například odkazy na obrázky, mnohem jednodušeji. Řekněme, že všechny obrázky pro vaši stránku
jsou uloženy v podadresáři obr adresáře osa. Když budete potřebovat napsat odkaz na obrázek, normálně by to bylo:
http://intranet/osa/obr/logo.gif
ale s definovaným základním adresářem stačí napsat:
obr/logo.gif
Základní velikost písma
Značka určuje základní velikost písma n od 1 do 7.
<BASEFONT SIZE=n>
Není-li v těle stránky nastavena jiná velikost, bude v celé stránce použito písmo
s velikostí odpovídající číslu n.
Zvuk nebo hudba připojená ke stránce
Je to opět nepárová značka:
<BGSOUND SRC=“zvuk.vaw“ LOOP=“xx“>
Má dva parametry. První je název souboru, případně s cestou, kde je zvuk uložen. Druhý
parametr má tyto možné hodnoty:
Ü xx = číslo 1, 2 atd. – počet, kolikrát po sobě se zvuk přehraje uživateli, který si
stránku zobrazí,
Ü infinite – zvuk se bude přehrávat stále dokola tak dlouho, dokud bude uživatel
stránku prohlížet.
Údaje o webové stránce
Další nepárová značka je META. Má tři možné parametry NAME, CONTENT a HTTPEQUIV.
Parametr NAME definuje název vlastnosti a CONTENT definuje její hodnotu. Použijete
je, když budete své webové stránky nabízet vyhledávacím serverům, aby se daly snadno najít.
<META NAME=“Author“ CONTENT=“Josef Vopička“>
Takto se podepíšete jako autor (pochopitelně svým jménem).
<META NAME=“Keywords“ CONTENT=“slepice, chov, líheň“>
19
Dejme tomu, že váš článek pojednává o chovu slepic a umělé líhni pro kuřata. Pak bude
vyhledávací server informován, že hlavní obsah článku popisují slova slepice, chov a líheň.
Bude-li někdo hledat něco o chovu slepic a zadá hledání ve tvaru například +chov+slepice,
nebo „umělá líheň“, najde vyhledávač kromě jiných i váš článek.
Další možné vlastnosti:
NAME
CONTENT
DESCRIPTION Popis dokumentu
Poznámka
Stručné shrnutí obsahu, například stejný údaj jako je v <TITLE>
SUBJECT
Obsah dokumentu například: „informace“, „odkazy“, „publikace“ nebo „formulář“
CATEGORY
Kategorie obsahu
například: „Internet“ nebo „Chov slepic“, „Auto“ a podobně
GENERATOR
Název programu
Tento údaj se vytvoří automaticky, použijete-li k tvorbě stránky
generátor
Parametr HTTP-EQUIV umožňuje protokolem HTTP sdělit prohlížeči, jaká je kódová
tabulka stránky. Na podrobnější rozbor není v tomto textu místo. Chcete-li parametr použít,
musí mít hodnotu Content-Type. Dále použijete parametr CONTENT, kam zapíšete typ obsahu a kódovou stránku:
<META HTTP-EQUIV=“Content-Type“ CONTENT=“text/html; charset=
Windows-1250“>
Obsahem webové stránky je text v jazyku HTML, a proto bude první část mít hodnotu
text/html. Za druhou část charset= zapíšete název kódu, kterým je stránka zapsána. Pokud
je vytvořena v systému Windows, bude to kódová stránka (anglicky codepage – nepleťte
s webovou stránkou!) číslo 1250 pro jazyky střední a východní Evropy včetně češtiny.
Prohlížeč ukáže kód webové stránky v některém menu podle výrobce a verze. Například
Internet Explorer 5.5 zobrazí kód webové stránky v menu Zobrazit – Kódování.
Některá možná kódování pro webové stránky:
Název kódu
Určen pro jazyky
Používá se v operačním systému
Windows-1252
západní Evropa
Windows
Windows-1250
střední a východní Evropa včetně češtiny
Windows
ISO-8859-1
západní Evropa
UNIX, MacIntosh
ISO-8859-2
UNIX, MacIntosh
cp437
USA
DOS, Windows
cp852
DOS, UNIX
Skript pro klienta
V záhlaví webové stránky může být také umístěn skript pro klienta. Je to program, který
bude vykonávat prohlížeč buď po zavedení stránky, nebo po nějaké akci uživatele. Spuštění
skriptu lze spojit třeba s tlačítkem na formuláři. Jakmile uživatel stiskne tlačítko, spustí
se skript.
Webová stránka, zvláště formulář, může vyžadovat více různých programů spuštěných
při různých akcích uživatele. Proto je možné zapsat do záhlaví stránky více skriptů.
20
Použijete párové značky <SCRIPT> a </SCRIPT>. Mezi ně zapíšete jeden nebo několik skriptů. Protože každý skript je uceleným programem a má tedy jasně vyznačený začátek
a konec, je orientace v části SCRIPT snadná. Příklad:
<SCRIPT LANGUAGE=“JavaScript“>
function checkit() {
var pass1 = document.regform.passw.value;
var pass2 = document.regform.passw2.value;
if ( pass1 == pass2 ) {
document.regform.submit();
return true;
} else
alert(“Pozor - heslo se neshoduje s heslem pro ověření!“);
return false;
}
}
function nsel() {
var ns = document.regform.mails.value;
document.regform.email.value = ns;
}
</SCRIPT>
V příkladu jsou dva programy – skripty v jazyku JavaScript. Jmenují se checkit
a nsel, jsou definovány jako funkce (function). Jazyk skriptů je uveden v počáteční značce:
LANGUAGE=“JavaScript“.
Skripty jsou sdruženy do jedné značky, protože jsou oba napsány ve stejném jazyku. Do stejné značky lze přidat další skripty v JavaScriptu, ale už nelze přidat skripty v jiném jazyku. Na ty je nutno přidat další pár značek SCRIPT a v počáteční značce <SCRIPT
LANGUAGE=“…“> určit jazyk.
Změna standardního formátování
Párová značka <STYLE> a </STYLE> umožňuje zadat standardní formátování pro
celou webovou stránku. Mezi značky zadáte seznam předpisů, jak se bude standardně text
zobrazovat.
Nezadáte-li pro svůj text druh písma, zobrazuje prohlížeč obvykle písmo s patkami (anglicky: Serif), jako Times New Roman. Potřebujete-li, aby se místo toho používalo písmo
bez patek (Sans Serif), použijte styl:
<STYLE>
BODY { font-family: sans-serif }
U
{ font-family: serif }
</STYLE>
Zde se definují dva standardní styly: pro tělo dokumentu (značka BODY) – písmo bez
patek, ale pro podtržený text (značky U) písmo s patkami.
21
V definicích stylu můžete stanovit velké množství parametrů: nejen typ písma, ale také
formát odstavců, barvy atd. Předem připravené styly se dají připojit k webové stránce a velmi
snadno tak změnit její vzhled. Mohou také sjednotit vzhled stránek různých autorů.
Jestliže předpokládáte, že by vaši stránku mohl zobrazit starší prohlížeč, který nezná
značku <STYLE>, upravte zápis pomocí poznámky. Nové prohlížeče poznají sekci <STYLE>
a poznámku ignorují, tj. neberou ji jako poznámku. Staré prohlížeče značku ani obsah poznámky nezobrazí. Bez tohoto opatření by staré prohlížeče vypsaly obsah sekce <STYLE>
jako text.
<STYLE>
<!-BODY { font-family: sans-serif }
U
{ font-family: serif }
-->
</STYLE>
Jazyk CSS pro definice stylů je popsán v příloze.
1.4.3 Pozadí stránky
Značka <BODY> označuje začátek těla stránky. Může mít parametr BACKGROUND,
kterým určíte, jaký obrázek bude na pozadí stránky.
BACKGROUND=“URL“
Můžete použít libovolný odkaz, jehož cílem je obrázek. Doporučuji používat nevtíravé
obrázky zbarvené v odstínech světlé šedi nebo jiných velmi světlých barev. Jinak by se mohlo
snadno stát, že písmo stránky na příliš výrazném pozadí zanikne.
Pokud je obrázek malý, umístí ho prohlížeč na plochu stránky mnohokrát jako dlaždice. Proto v takovém případě vyberte nebo navrhněte takový obrázek, který navazuje na stejný
sousední jak ve svislém, tak ve vodorovném směru.
Zde je příklad takového obrázku. Je umístěn čtyřikrát vedle sebe. Zobrazení je upraveno
tak, aby byly vidět hranice dlaždic. Ve skutečném pozadí tyto hranice splývají, nejsou viditelné.
Standardně se pozadí pohybuje spolu s obsahem stránky. Posouváte-li stránku posuvníkem, jde pozadí s sebou. Ale další parametr značky <BODY> umožňuje nastavit nehybné
pozadí, na němž se posouvá obsah stránky.
22
BGPROPERTIES=“FIXED“
Posouváte-li nyní stránku posuvníkem, zůstává pozadí na místě.
1.5 Formátování textu
Jazyk HTML je navržen především pro publikaci textů. Tyto texty mohou být učebnice,
příručky, jakékoli knihy nebo studijní texty (skripta – neplést se skripty-programy!).
Dále je HTML používán pro pravidelnou publikaci zpráv, ať již jsou to noviny vycházející
denně, nebo časopisy – týdeníky či měsíčníky.
Kromě toho se HTML používá pro získávání údajů od uživatelů pomocí formulářů.
Je tedy nutné, aby jazyk umožnil formátování textu ve velkém rozsahu. Autor webové
stránky může předepsat typ a řez písma (anglicky font), tedy jeho velikost, grafické provedení, tloušťku, sklon, podtržení. Dále může rozdělit text na odstavce a zařadit pevné nebo animované obrázky.
Autor je ale v jedné věci omezen. Nemůže totiž stanovit přesnou šířku odstavce ani
přesné umístění obrázků na stránce. (S jednou výjimkou, kterou probereme později.) Je to
proto, že různé prohlížeče na různých přístrojích mají pro zobrazení stránky k dispozici různě
velký prostor.
Například určitá stránka je autorem navržena původně na standardní obrazovce. Autor
rozvrhl text a obrázky tak, aby se vešly na obraz o velikosti 800×600 bodů (anglicky pixels).
Avšak tuto stránku si bude moci zobrazit:
Ü uživatel u PC s rozlišením obrazu 1024×768 bodů, 1200×1024 bodů, nebo
se speciální obrazovkou „na výšku“, 768×1024 bodů,
Ü uživatel, který si upraví šířku a výšku okna prohlížeče na rozměry, jaké mu právě
vyhovují,
Ü uživatel s kapesním počítačem s mnohem menší obrazovkou, která je podle modelu
řešena na výšku nebo na šířku,
Ü uživatel s kvalitním mobilním telefonem, kam je stránka převedena do zobrazení
WAP.
Proto dává jazyk HTML prohlížeči možnost, aby poskládal stránku podle možností, které má právě k dispozici. Když například zúžíte okénko prohlížeče, všimněte si, jak prohlížeč
přeskládá text a obrázky na užší prostor.
To je umožněno tím, že jazyk HTML jen vyznačuje, kde začíná a končí odstavec, kde
musí být nový řádek a kam do textu přijde obrázek. Neumožňuje ale předem ve zdrojovém
textu určit, kolik mezer bude mezi slovy nebo kolik bodů bude mít odstavec na šířku.
1.5.1 Normální text
Použijte kostru stránky a napište mezi značky <body> a </body> několik řádků textu,
asi takto:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN“>
<HTML>
<head>
<title>Text</title>
23
</head>
<body>
Můžete: sem vložit
a libovolně
třeba
vůbec
jakýkoli
členěný text a mezi slova vložit
i
velmi
mnoho
mezer a nebude na tom
záležet, protože prohlížeč si text
zformátuje.
</body>
</HTML>
Do textu v těle stránky jsem vložil mezery, znaky tabulátor a prázdný řádek.
Když se na stránku podíváte prohlížečem a hodně zmenšíte okénko, dopadne asi
takhle:
Když změníte tvar okénka, prohlížeč text přizpůsobí:
Práci s formátováním textu mezerami, tabulátory nebo řádky si tedy můžeme ušetřit,
protože prohlížeč na ně vůbec nereaguje. Budeme tedy prozatím do textu psát jen mezery
mezi slovy.
Místo tabulátorů a řádků použijeme k formátování značky, které jsou k tomu určeny.
Nejjednoduššího rozdělení textu dosáhnete použitím dvou značek: <BR> a <HR>.
Nový řádek
Text za značkou <BR> začne vždy na novém řádku.
Dejme předchozí větu do těla stránky. Dopadne to takhle (záhlaví a rám okna
vynechám):
24
Text za značkou
začne vždy na novém řádku.
Vodorovný oddělovač
Značkou <HR> vložíte do textu vodorovnou oddělující čáru přes celou šířku odstavce.
Dejme znovu předchozí větu do těla stránky. Prohlížeč zobrazí:
Tučné písmo, kursiva, indexy, podtržení a přeškrtnutí
Tyto značky nemění řez písma neboli font. Mění pouze jeho sílu (tučné), sklon (kursiva),
polohu v řádku (horní a spodní index), přidávají podtržení nebo přeškrtnutí.
<B>, </B> - párové značky pro tučné písmo,
<I>, </I> - párové značky pro ležaté písmo – kursivu,
<SUP>, </SUP> - párové značky pro horní index (anglicky superscript),
<SUB>, </SUB> - párové značky pro spodní index (anglicky subscript),
<U>, </U> - párové značky pro podtržení textu,
<S>, </S> nebo <STRIKE>, </STRIKE> - párové značky pro přeškrtnutí (anglicky
strike).
Vytvoříme si zkušební věty a tyto styly v nich vyzkoušíme. Do těla stránky napišme:
Metr krychlový se značí <B>m<SUP>3</SUP></B> <I>horním</I>
indexem, kdežto v chemických vzorcích nepoužíváme <S><I>horní</I>
index</S>, ale <U><I>spodní</I>
index</U>.<BR>Například líh neboli etylalkohol zapisujeme
<I>C<SUB>2</SUB>H<SUB>5</SUB>OH</I>.
Tím zároveň zkoušíme působení dvou značek současně.
Ve výrazu <S><I>horní</I> index</S> jsou to značky pro přeškrtnutí a kursivu.
Ve výrazu <B>m<SUP>3</SUP></B> jsou to značky pro tučné písmo a horní index.
Ve výrazu <B><I>C<SUB>2</SUB>H<SUB>5</SUB>OH</I></B> jsou to
značky pro tučné písmo, kursivu a spodní index.
A prohlížeč zobrazí:
Metr krychlový se značí m3 horním indexem, kdežto v chemických
vzorcích nepoužíváme horní index, ale spodní index.
Například líh neboli etylalkohol zapisujeme C2H5OH.
1.5.2 Druhy písma
Od vynálezu písma vymysleli typografové velké množství různě vytvarovaných písmen.
Pro latinskou nebo českou abecedu musí typograf vytvořit vždy celou sadu písmen malé abecedy, velké abecedy, číslic a zvláštních znaků, jako jsou různé závorky, otazník, *, & a další.
Teprve pak může říci, že vytvořil jeden řez písma neboli anglicky font.
25
Dříve musel typograf pro jeden druh písma vytvořit množství takových řezů různé velikosti a k tomu jejich ležatou a tučnou variantu. Nyní při práci na počítačích stačí vytvořit plošné obrazy všech písmen v jedné velikosti a programy se už postarají o zvětšení a zmenšení.
Někdy dokážou vytvořit i ležatou a tučnou variantu, někdy tyto verze vytvoří sám typograf.
Proto je pro nás uživatele počítačů nyní jeden font – řez písma – totéž co druh písma.
Těchto druhů bylo vytvořeno velké množství. Abychom se v nich orientovali, byla zavedena
jejich klasifikace (rozdělení) do skupin (kategorií) podle tvaru. Podobné tvary spadají do stejných skupin. Nenajde-li počítač instalovaný předepsaný font, může proto vyhledat co nejpodobnější jiný font.
Přesný tvar písma fontu se anglicky označuje font face (doslova tvář, tvářnost fontu). Označuje se názvem, jaký mu dal jeho tvůrce – typograf. Jsou to například názvy Arial,
Antikva, Courier, Garamond, Century Schoolbook, Times New Roman a další.
Skupiny fontů se dělí zhruba takto: podle šířky písmen, podle váhy neboli „tučnosti“
písma a podle podobnosti tvarů písmen.
Podle šířky písmen rozlišujeme písmo proporcionální a neproporcionální. Písmena
proporcionálního písma jsou různě široká. Například „m“ je mnohem širší než „i“. U písma neproporcionálního jsou všechna písmena stejně široká, takže takové „m“ má někdy prostřední nožičku užší a naopak „i“ má dole podstavec. Neproporcionální písmena mají také
vzdálenost středů písmen od sebe vždy stejnou (anglicky: monospaced). Příkladem neproporcionálního písma je Courier nebo na psacím stroji Pica.
Podle váhy písma rozeznáváme písmo normální a tučné. Některé fonty jsou zvláště tučné. Čím více plochy v prostoru písmene zabírá barva (a tedy méně nepotištěný papír), tím je
písmo těžší.
Podle podobnosti dělíme písma zhruba na písma bez patek – sans serif (Helvetiku)
– například Arial, s patkami – serif – Times, Antikva – a na písma ozdobná – Comic, Script
(jakoby psané rukou). Zvláštní kategorii mají speciální symboly (fonty Symbol, Webdings,
Windings).
Více se dozvíte v kursu typografie. Pro nás je důležité, že určité vlastnosti písma lze programovat do webových stránek. Viděli jsme to už u značky <STYLE>, kde se definovaly skupiny pro jednotlivé značky.
Písmo jako z psacího stroje
Párová značka <TT>, </TT> změní písmo na typy psacího stroje, kde jsou od sebe
všechna písmena stejně vzdálena. Font písma se změní na Courier, Lucida Console nebo
podobný, který má počítač k dispozici jako (anglicky) monospaced (tj. stejné vzdálenosti).
V zápisu našich příkladů bylo použito právě písmo Courier.
1.5.3 Nastavení velikosti, barvy a řezu (fontu) písma
Slouží k tomu párové značky <FONT parametry>, </FONT>.
Parametry určují vlastnosti. V jedné značce <FONT> můžete použít jeden, dva nebo
všechny tři parametry.
SIZE=n
Určuje velikost písma číslicí 1 až 7. Není to velikost v bodech ani jiných mírách.
26
SIZE=+n nebo SIZE=-n
Určuje změnu velikosti. + znamená zvýšení a – snížení o n stupňů. Pokud by vzniklo
nižší číslo než 1, použije se 1. Pokud by vzniklo vyšší číslo než 7, použije se 7.
COLOR=#RRGGBB
Určuje barvu písma. Vyjádření je hexadecimální. RR (red) je sytost červené barvy, GG
(green) zelené barvy a BB (blue) modré barvy. Každé ze tří čísel je v rozsahu 00 až FF, tj. 0 až
255. 00 znamená „žádná barva“, FF je „nejjasnější barva“. Například:
#FF0000 – jasná červená,
#00FF00 – jasná zelená,
#0000FF – jasná modrá,
#800000 – polojasná červená,
#008000 – polojasná zelená,
#000080 – polojasná modrá.
Barvy můžete libovolně skládat. Červená s modrou dává fialovou: #FF00FF (jasná) nebo
#800080 (polojasná), zelená s modrou dává tyrkysovou #00FFFF (jasná) nebo #008080
(polojasná) atd.
Základní barvy jsou též pojmenované. Můžete jejich anglická jména použít místo znaku
# s číslem.
Black = „#000000“
Silver = „#C0C0C0“
Gray = „#808080“
White = „#FFFFFF“
Maroon = „#800000“
Red = „#FF0000“
Purple = „#800080“
Fuchsia = „#FF00FF“
černá
stříbrná
šedá
bílá
hnědá
červená
purpurová
fuchsiová
Green = „#008000“
Lime = „#00FF00“
Olive = „#808000“
Yellow = „#FFFF00“
Navy = „#000080“
Blue = „#0000FF“
Teal = „#008080“
Aqua = „#00FFFF“
zelená
jasná zelená
olivová
žlutá
tmavomodrá
modrá
modrozelená
tyrkysová
Další barvy najdete v příloze 3.5.
FACE=“název“
Určuje název fontu, kterým se text vypíše.
Použijme značku FONT s parametry ve zkušebním textu:
Standard. <FONT SIZE=5>Základní velikost = 5. <FONT SIZE=-3
COLOR=#0F0FFF FACE=“Georgia“>Velikost=2; Modrá; Georgia</FONT>
Zase základ. <FONT FACE=“Trebuchet MS“ SIZE=+1>Velikost=6; Černá;
Trebuchet MS. </FONT>Potřetí základ. </FONT> A standard.
Dostaneme tento výsledek:
27
1.5.4 Odstavce
Základní druhy odstavců:
Ü <DIV>, </DIV> - párové značky pro oddíl textu,
Ü <P>, </P> - párové značky pro odstavec s meziřádkem,
Ü <BLOCKQUOTE>, </BLOCKQUOTE> - párové značky pro odsazení,
Ü <CITE>, </CITE> - párové značky pro citát.
Oddíl textu
Značky <DIV> a </DIV> určují začátek a konec odstavce. (DIV je zkratka anglického
slova division, oddíl.) Za koncem odstavce není žádný meziřádek.
Oddíl textu může mít v počáteční značce parametr ALIGN.
ALIGN=LEFT určuje, že bude odstavec zarovnán doleva.
ALIGN=CENTER – určuje zarovnání na střed.
ALIGN=RIGHT – určuje zarovnání doprava.
ALIGN=JUSTIFY – určuje zarovnání do bloku (na obě strany).
Značky <CENTER> a </CENTER> jsou zkráceným zápisem značek <DIV
ALIGN=CENTER>, </DIV> a pracují úplně stejně: ohraničují odstavec zarovnaný na střed.
Odstavec s meziřádkem
Značky <P>, </P> určují začátek a konec odstavce. (P znamená anglické slovo paragraph, odstavec – česky se paragraf říká odstavci zákona.) Za koncem odstavce je jeden meziřádek.
Odstavec s meziřádkem může mít v počáteční značce parametr ALIGN.
ALIGN=LEFT – určuje odstavec zarovnaný doleva.
Zde již nelze nastavit zarovnání do bloku. Ale při uzavření odstavců <P> do oddílu textu
lze zarovnání nastavit pro celý oddíl a v odstavcích je už neuvádět. Můžete je také pro jednotlivé odstavce nastavit jinak než pro oddíl, když použijete parametr ALIGN ve značce <P>.
Odsazení
Značky <BLOCKQUOTE>, </BLOCKQUOTE> určují odsazený odstavec. Začíná více
vpravo než normální odstavec a končí více vlevo, takže je z obou stran zúžen. Jestliže vezmeme šířku tohoto odstavce za normální šířku stránky prohlížeče, pak:
odstavec uzavřený značkami <BLOCKQUOTE> a </BLOCKQUOTE> je
z obou stran stlačen, takže začíná blíže ke středu stránky a končí také blíže
ke středu stránky. To platí i při zúžení okénka prohlížeče.
Citát
Značky <CITE>, </CITE> určují začátek a konec speciálního odstavce pro citování,
tedy pro doslovný opis jedné až několika málo vět z jakékoli knihy. Může být citována odborná
i zábavná kniha i učebnice – jakákoli literatura.
Je zvykem, že citát se vypisuje ležatým písmem, kursivou. Odstavec CITE automaticky
kursivu nastaví.
28
Za citátem se na zvláštní řádek uvádí jméno autora zarovnané doprava. Celý citát vypadá asi takto:
Nezáleží jen na tom, jaké zkušenosti uděláme, nýbrž ještě více záleží na tom, jaké
zkušenosti dovedeme dělat.
Karel Čapek
Na ukázku upravíme předchozí tři odstavce a jméno autora pomocí značek pro odstavce. Zdroj bude vypadat takto:
<DIV ALIGN=“Left“>Značky <CITE>, </CITE> určují
začátek a konec speciálního odstavce pro citování, tedy pro doslovný opis jedné až několika málo vět z jakékoli knihy. Může být citována odborná i zábavná kniha i učebnice – jakákoli literatura.</DIV>
<DIV ALIGN=“Right“>Je zvykem, že citát se vypisuje ležatým písmem, kursivou.
Odstavec CITE automaticky kursivu nastaví.</DIV>
<P ALIGN=“Center“>Za citátem se na zvláštní řádek uvádí jméno autora zarovnané doprava. Celý citát vypadá asi takto:</P>
<CITE><BLOCKQUOTE>Nezáleží jen na tom, jaké zkušenosti uděláme, nýbrž
ještě více záleží na tom, jaké zkušenosti dovedeme dělat.
<P ALIGN=“Right“>Karel Čapek</P></BLOCKQUOTE></CITE>
(Všimněte si, že kódy < a > se v prohlížeči zobrazí jako znaky < a >. Tím umožňují zobrazení značek přesně tak, jak se zapisují do zdroje. Kdybych značky takto skutečně
do zdroje zapsal, prohlížeč by je interpretoval a už by nebyly vidět.)
1.5.5 Speciální znaky
Často potřebujete zapsat do textu speciální znaky, jako v předešlém případě znaky < a >.
Slouží k tomu dva znaky:
& - ampersand, určuje začátek zápisu speciálního znaku,
; - středník, určuje konec zápisu speciálního znaku.
29
Chcete-li tedy do textu zařadit speciální znak, zapíšete & a ; - mezi ně pak vložíte buď znak
# a dekadickou hodnotu znaku, nebo zkratku znaku.
Důležitým znakem je takzvaná vynucená mezera. Je to taková mezera, kterou prohlížeč
nesmí vynechat, ani ji nesmí nahradit přechodem na nový řádek. Její zkratka je nbsp (anglicky
no-break space, nedělitelná mezera). Její dekadická hodnota je 160. Můžete tedy napsat:
 
nebo
 
Důležité speciální znaky udává tabulka:
Zkratka
Kód
Znak
Název
nbsp
160
(mezera)
vynucená mezera
lt
60
<
levá úhlová závorka
gt
62
>
pravá úhlová závorka
amp
38
&
ampersand
quot
34
„
uvozovka
Další speciální znaky s kódy 128 a více jsou závislé na používané kódové stránce.
Například kód 253 je v kódové tabulce 1250 Windows ANSI písmeno ř, kdežto v kódové
tabulce 437 Latin-1 je to písmeno ý.
1.5.6 Nadpisy
Jazyk HTML má šest úrovní nadpisů. Jsou určeny párovými značkami:
<H1>, </H1> - první úroveň s největším písmem,
<H2>, </H2> - druhá úroveň,
<H3>, </H3> - třetí úroveň,
<H4>, </H4> - čtvrtá úroveň,
<H5>, </H5> - pátá úroveň,
<H6>, </H6> - šestá úroveň s nejmenším písmem.
Do počáteční značky můžete zapsat parametr ALIGN:
ALIGN=LEFT určuje odstavec zarovnaný doleva.
Standardně je nastaveno zarovnání doleva.
Jednoduchý příklad zobrazí všechny nadpisy. Do těla HTML stránky dejte:
<H1 ALIGN=LEFT>Nadpis 1</H1>
<H2 ALIGN=Center>Nadpis 2</H2>
<H3 ALIGN=RIGHT>Nadpis 3</H3>
30
<H4 ALIGN=LEFT>Nadpis 4</H4>
<H5 ALIGN=Center>Nadpis 5</H5>
<H6 ALIGN=Right>Nadpis 6</H6>
Prohlížeč pak zobrazí:
1.5.7 Nech mi to, jak to chci mít
Ve všech odstavcích, které jsme dosud poznali, vynechá prohlížeč nadbytečné mezery,
řádky, tabulátory a poskládá si slova do odstavců tak, jak potřebuje. Teď poznáme výjimku.
<PRE>, </PRE> - tyto párové značky udávají začátek a konec odstavce, který si prohlížeč nesmí přeskládat. Všechny znaky, které použijete pro formátování, musí zůstat na svých
místech tak, jak jsou ve zdrojové stránce. (PREformatted – anglicky: předem formátováno.)
Zkusme například opsat kousek básně a zachovat její úpravu. Když napíšete:
<P>
Verš pravidelný je dnes anathema
a báseň správně rýmovat se nemá,
tož, abych nestřetl se příliš s literárním světem,
budu psát pouze claudelovským versaletem,
jenž sice rýmuje se do kupletů,
však lhostejno, jak dlouhý verš má nebo větu,
zda řádek malý je či veliký
a kolikeré jsou v něm slabiky.
(Jan Křesadlo)
</P>
dopadne to, jak jste čekali:
Verš pravidelný je dnes anathema a báseň správně rýmovat se nemá, tož, abych nestřetl
se příliš s literárním světem, budu psát pouze claudelovským versaletem, jenž sice rýmuje
se do kupletů, však lhostejno, jak dlouhý verš má nebo větu, zda řádek malý je či veliký a kolikeré jsou v něm slabiky. (Jan Křesadlo)
(Anathema znamená zavržený nebo prokletý, kuplet – řádky se rýmují po dvou.)
31
A teď dejte místo <P> <PRE> a místo </P> </PRE>. Jaký rozdíl!
Všimněte si, že odstavec <PRE> nejen zachoval rozvržení, ale použil i písmo „monospaced“, jako bych použil značku <TT>. Chcete-li zde mít jiné písmo, musíte použít značku
<FONT>:
<PRE>
<FONT FACE=“Arial“>Verš pravidelný je dnes anathema
a báseň správně rýmovat se nemá,
tož, abych nestřetl se příliš s literárním světem,
budu psát pouze claudelovským versaletem,
jenž sice rýmuje se do kupletů,
však lhostejno, jak dlouhý verš má nebo větu,
zda řádek malý je či veliký
a kolikeré jsou v něm slabiky.
(Jan Křesadlo)</FONT>
</PRE>
Ještě si všimněte, že jsem značky <FONT FACE=“Arial“> a </FONT> „přilepil“ k textu.
I to má svůj důvod. Všechny znaky pro nový řádek, mezeru a tabulátor se v odstavci <PRE>
kopírují do zobrazeného textu. Značka <PRE> nekopíruje pouze první řádek těsně za sebou
a značka </PRE> zase řádek těsně před sebou. Když tedy napíšete:
<PRE><FONT FACE=“Arial“>
a za to text na nový řádek, nebude už znak „řádek“ těsně za <PRE> a zkopíruje se
do zobrazeného textu. Na začátek básně se tak přidá prázdný meziřádek, což si asi nepřejete.
32
Po úpravě se báseň zobrazí takto:
Zápis odstavce <PRE> má jednu nevýhodu. Šířku řádků určuje autor. Budou-li řádky
příliš dlouhé, prohlížeč jejich konce nezobrazí.
Do značky <PRE> lze zapsat parametr WIDTH=n, kde n je šířka odstavce daná počtem
znaků. To může pomoci některým prohlížečům v zobrazení: mohou vybrat tak velké písmo,
aby se odstavec svojí šířkou vešel do prostoru, který je právě k dispozici.
Pro uvedený příklad by platila hodnota n=58. Je to počet znaků třetího řádku básně.
Řádek je odsazen osmi mezerami nebo jedním tabulátorem. Tabulátor se standardně počítá
za 8 mezer, ale záleží také na nastavení v prohlížeči.
Začátek zdrojového textu těla stránky by pak vypadal takto:
<PRE WIDTH=58><FONT FACE=“Arial“>
1.5.8 Použití poznámek
Jak si pamatujete, poznámka začíná znaky:
<!-a končí znaky
-->
Cokoli je mezi nimi, prohlížeč nezobrazí…? Opravdu cokoli? No, tak úplně ne. Máte
třeba text:
<P>Odkaz URL může směřovat na jiné místo stejné webové stránky,
do jiné stránky stejného WWW serveru, do stránky jiného WWW
serveru nebo do souboru
poskytovaného serverem FTP.</P>
Nevíte určitě, zda platí tvrzení o elektronické poště, proto jste dali tu část textu zdroje
do poznámky. Udělali jste to šikovně tak, aby ve zobrazené webové stránce nebylo nic
poznat:
Odkaz URL může směřovat na jiné místo stejné webové stránky, do jiné stránky
stejného WWW serveru, do stránky jiného WWW serveru nebo do souboru poskytovaného
serverem FTP.
Pokud si později ověříte, že je to s elektronickou poštou pravda, můžete znaky pro začátek a konec poznámky smazat a nemusíte znovu tuto část věty psát.
33
Než se to ale stane, rozhodnete se pro jistotu vynechat i zmínku o FTP serveru. Jestliže
přesunete znaky konce poznámky před koncovou tečku věty, bude vše v pořádku. Ale pokud
je tam přidáte, bude mít poznámka jeden začátek a dva konce:
serveru nebo do souboru
poskytovaného serverem FTP-->.</P>
První konec poznámku ukončí. Druhý konec, ten za zkratkou FTP, se zobrazí.
Odkaz URL může směřovat na jiné místo stejné webové stránky, do jiné stránky
stejného WWW serveru, do stránky jiného WWW serveru nebo do souboru poskytovaného
serverem FTP-->.
Jednu poznámku nemůžete ani vložit do jiné. Po počátečních znacích už prohlížeč
nehlídá další začátek poznámky, pouze její konec. Takže text:
serveru nebo do souboru
poskytovaného serverem FTP-->.</P>
se zobrazí úplně stejně jako v předchozím případě.
Poznámky mohou zablokovat a odblokovat nejen části textu, ale i jakékoli značky.

Tento odkaz může být ze stránky vyřazen na dobu úprav WWW serveru
www.ferda.com. Po jeho opětném uvedení do provozu stačí odstranit znaky začátku a konce
poznámky.
Výhodu poznámek poznáte při nutnosti dočasného blokování několika odstavců
nebo odkazů.
1.6 Odkazy
Odkazy jsou ve webových stránkách nesmírně důležité. Při tvorbě stránek se s nimi
setkáte velmi často.
Můžeme rozlišit dva typy odkazů. První slouží k tomu, aby se na stránce zobrazil obrázek
(případně animovaný) nebo mapa. Slouží k tomu značky <IMG> a <MAP>.
Druhý typ zobrazuje podtržený text nebo obrázek, jehož klepnutím přejde uživatel
na URL, které je za ním skryto. K tomu slouží párové značky <A>, </A> - kotvy (anglicky
anchor, proto A).
1.6.1 Na obrázek
Obrázek je samostatný soubor, který můžete získat různým způsobem: nakreslit a skenovat, nakreslit v některém grafickém programu, vyfotografovat a skenovat, vyfotografovat
digitálním fotoaparátem a přenést, sejmout z obrazovky počítače, stáhnout z WWW serveru
atd.
Soubor s obrázkem můžete umístit do stejné složky, kde je zdroj webové stránky, ale
i do jiné složky stejného serveru nebo ho zobrazit ze složky libovolného dostupného WWW
34
serveru v celém Internetu. To vše lze zařídit různými parametry značky <IMG> (anglicky:
image, obraz). Její základní tvar je:
<IMG SRC=“zdroj_obrázku“>
Značka IMG může mít tyto parametry:
SRC – určuje, odkud obrázek vzít (tj. kde je umístěn soubor s obrázkem)
ALIGN – určuje, jakou polohu bude obrázek mít vzhledem k okolnímu textu
HSPACE, VSPACE – volný prostor kolem obrázku
BORDER – orámování obrázku
ALT – nápis, který se objeví na místě obrázku, není-li ho možno zobrazit
HEIGHT, WIDTH – výška a šířka prostoru vyhrazeného pro obrázek
USEMAP – použití mapy
Probereme je postupně.
Zdroj
Umístění zdroje obrázku, tedy souboru, kde je obrázek uložen, lze napsat několika různými způsoby.
<IMG SRC=“obraz.jpg“>
Soubor s obrázkem budeme v tomto příkladu nazývat obraz.jpg. Je-li tento soubor
umístěn ve stejné složce jako zdroj webové stránky, do které patří, stačí uvést pouze jméno
a příponu.
<IMG SRC=“images/obraz.jpg“>
Tento zápis znamená, že zdroj webové stránky je umístěn v nějaké složce, která má podsložku „images“ určenou pro obrázky. Tam je soubor „obraz.jpg“ umístěn.
<IMG SRC=“../obraz.jpg“>
Zde je obrázek naopak umístěn ve složce bezprostředně nadřazené té, v níž je umístěn
zdroj webové stránky.
Odkazy dosud uvedené se nazývají relativní. Jsou relativní k základnímu umístění zdroje webové stránky. Server zná její URL. Z něj a z parametru SRC vytvoří URL obrázku, najde
jeho umístění a přenese jej do prohlížeče.
<IMG SRC=“J:/HTML/grafika/obraz.jpg“>
Obrázek je v jiném adresáři, k němuž je uvedena plná cesta. Všimněte si, že v cestě k souboru lze použít obyčejná lomítka místo zpětných.
Odkaz začíná písmenem jednotky. Takové odkazy se nazývají absolutní.
<IMG SRC=“http://www.grafika.cz/galerie/obraz.jpg“>
Obrázek je v umístění na tomtéž nebo jiném serveru, k němuž je uvedeno URL.
Zde je použito běžné URL, odkazující na webový server. Mohlo by též odkazovat na FTP
server, pokud by byl obrázek uložen na něm. Připomínám, že v URL by ve zvláštních případech mohl být uveden také port.
I tento druh odkazu lze považovat za absolutní.
35
Poloha
ALIGN=TOP
Horní okraj obrázku (vrchol, anglicky: top) je zarovnán s horní částí nejvyšších písmen
textu. Ale další řádek je až pod obrázkem.
Zdroj pro tyto příklady se liší jenom textem, názvem souboru obrázku a parametrem
ALIGN. Text je viditelný na výsledném zobrazení. Proto zde zkopíruji jenom první zdrojový
text:
<P>Obrázek lze zařadit přímo do textu, jako zde:
ĚŠ<IMG SRC=“WWW-IMG0.jpg“ ALIGN=TOP>ČŘ a pokračovat.<BR>
V předchozím řádku je obrázek s textem zarovnán parametrem
ALIGN=TOP. Horní okraj obrázku je v jedné rovině s horním
okrajem prostoru pro písmena. To je dobře vidět u písmen
velké abecedy s háčky.</P>
ALIGN=BOTTOM
Zde je naopak spodek obrázku (dno, anglicky: bottom) zarovnáno s linkou, na kterou
jsme se snažili usazovat písmena, když jsme se v základní škole učili psát do linkovaných sešitů. Tady sice linka není vidět, ale každý typ písma – font – ji má definovanou.
ALIGN=MIDDLE
Tento parametr srovná střední (anglicky: middle) linii obrázku s myšlenou spodní linkou písma. Je to právě ta, o níž byla řeč u parametru ALIGN=BOTTOM.
36
ALIGN=ABSMIDDLE
Tento parametr srovná střed obrázku se středem řádku písma.
Všimněte si, že při použití parametrů ALIGN= TOP, BOTTOM, MIDDLE a
ABSMIDDLE pokračuje další řádek pod obrázkem. Když je obrázek větší, zůstane kolem něj
nevyužitý prostor.
ALIGN=RIGHT
K tomu, aby se text mohl srovnat podél obrázku, slouží další dva parametry:
ALIGN=LEFT a RIGHT. Při jejich použití je obrázek umístěn na levou stranu (LEFT) nebo
pravou stranu (RIGHT) textu. Říkáme, že text obtéká obrázek (text „teče“ jako řeka kolem
obrázku).
Obrázek začne ve svislém směru tam, kam umístíte značku IMG. Když ji dáte na začátek odstavce nebo před odstavec, bude text odstavce obtékat tak dlouho, dokud stačí obrázek.
Skončí-li text odstavce dříve, bude zbytek obrázku obtékán ještě dalším odstavcem. Skončíli dříve obrázek, bude text odstavce pokračovat pod ním v plné šířce. Oba případy můžete
nastavit změnou šířky stránky v prohlížeči.
37
ALIGN=LEFT
Pro příklad teď umístím do stejného textu jiný obrázek. Jeho značku nedám na začátek,
ale na jiné místo textu. Zarovnání bude doleva. Takto vypadá zdroj:
<p>Obrázek je samostatný soubor, který můžete získat různým
způsobem: nakreslit a skenovat, nakreslit v některém grafickém
programu, vyfotografovat a skenovat,
<IMG SRC=“WWW-IMG1.bmp“ ALIGN=LEFT>
vyfotografovat digitálním fotoaparátem a přenést, sejmout
z obrazovky počítače, stáhnout z WWW serveru atd.</p>
<P>Soubor s obrázkem můžete umístit do stejné složky jako je
zdroj webové stránky, ale i do jiné složky stejného serveru
nebo do složky libovolného dostupného WWW serveru
v celém Internetu. To vše lze zařídit různými parametry
značky <IMG> (anglicky: image, obraz).</P>
Prostor kolem obrázku
HSPACE=m VSPACE=n
Určuje volné místo kolem obrázku. HSPACE ve vodorovném směru, VSPACE ve
svislém směru. Z každé strany se vynechá tolik bodů (pixelů), kolik udává číslo m resp. n.
Jestliže do předchozího zdroje přidáme do značky IMG parametry HSPACE=20
VSPACE=20, bude předchozí obrazovka prohlížeče vypadat takto:
38
Okraj obrázku
BORDER=n
Tento parametr určuje šířku orámování obrázku. Přidáme-li do značky IMG parametr
BORDER=3, ukáže prohlížeč toto:
39
Popis obrázku
ALT=“popis“
Když prohlížeč nenajde obrázek, který je uveden ve značce IMG, nebo když si uživatel nepřeje zobrazit obrázky (lze nastavit v prohlížeči), může na místě obrázku ukázat tento
popis. Autor stránky ho zapíše do parametru ALT.
Parametr ALT se uplatní, i když je obrázek viditelný. Nechá-li uživatel chvíli ukazatel
myši na obrázku, jehož značka IMG obsahuje parametr ALT, ukáže se popis.
Příklad ukazuje dva obrázky s parametrem. První z nich prohlížeč nenajde.
<IMG SRC=“chybí.jpg“ ALIGN=RIGHT BORDER=1 ALT=„Jižní Čechy“>
<p>Obrázek je samostatný soubor, který můžete získat různým
způsobem: nakreslit a skenovat, nakreslit v některém grafickém
programu, vyfotografovat a skenovat, <IMG SRC=“WWW-IMG1.jpg“
ALIGN=LEFT HSPACE=20 VSPACE=20 BORDER=3 ALT=“Zámek Hluboká“>
vyfotografovat digitálním fotoaparátem a přenést, sejmout
z obrazovky počítače, stáhnout z WWW serveru atd.</p>
(atd.)
40
TITLE=“popis“
Parametr TITLE se uplatní, ať je obrázek viditelný nebo není. Nechá-li uživatel chvíli ukazatel myši v rámečku obrázku, jehož značka IMG obsahuje parametr TITLE, ukáže
se popis.
Přitom není důležité, zda obrázek je nebo není zobrazen.
Rozměry obrázku
HEIGHT=x; WIDTH=y
Tyto parametry jsou velmi důležité. Určují totiž, jak bude obrázek zvětšený nebo zmenšený. Přitom lze zvolit jiné zvětšení/zmenšení ve svislém směru a jiné ve směru vodorovném.
Každý obrázek zabere na obrazovce obdélník nebo čtverec s určitým počtem bodů (pixelů) ve vodorovném směru a ve svislém směru. Tyto rozměry určil autor obrázku. Pokud
je neznáte, grafické programy i operační systémy je obvykle umějí vypsat.
41
První výpis rozměrů obrázku je z programu MS Paint (Malování), který je součástí každého operačního systému Windows. Okno otevřete z menu Obrázek funkcí Atributy. Musíte
přepnout na jednotky – pixely. Rozměry jsou tedy 502×370 pixelů.
Druhý výpis získáte přímo zobrazením vlastností souboru s obrázkem. V tomto případě
jsou rozměry 32×32 pixelů (to je velikost větší ikony).
42
Prohlížeč tedy ví, jaké rozměry obrázek má. Ale pokud neuvedete parametr HEIGHT
ani WIDTH, umístí prohlížeč obrázek ve skutečné velikosti, jak je uložen v souboru.
Někdy však potřebujete obrázek zvětšit, zmenšit nebo přizpůsobit.
Ü Když uvedete pouze parametr HEIGHT=x, porovná prohlížeč výšku obrázku
v souboru s vaším údajem x a zvětší nebo zmenší obrázek. Zadali jste výšku.
Prohlížeč si k ní dopočítá správnou šířku tak, aby poměr stran obrázku zůstal stejný.
Ü Když uvedete pouze parametr WIDTH=y, porovná prohlížeč šířku obrázku
v souboru s vaším údajem y a zvětší nebo zmenší obrázek. Zadali jste šířku. Prohlížeč
si k ní dopočítá správnou výšku tak, aby poměr stran obrázku zůstal stejný.
Ü Když uvedete oba parametry, prohlížeč vás poslechne a přizpůsobí oba rozměry
obrázku vašim údajům šířky a výšky. Přitom může upravit šířku v jiném poměru
než výšku.
Například obrázek zámku Hluboká má rozměry 294×263 bodů (pixelů). Vám by
se ale hodily rozměry 100×200 pixelů. Uvedete proto do značky:
<IMG SRC=“WWW-IMG1.jpg“ WIDTH=100 HEIGHT=200>
a dostanete takto zkreslený obrázek:
Zvětšování a zmenšování pracuje velmi dobře u obrázků s formátem JPEG. Je to
ostatně doporučený formát, protože je komprimovaný, zabírá málo místa, a rychle se proto
zavádí do prohlížeče.
Ale při použití formátu bitové mapy (BMP) musíte být opatrní. Zmenšení
a zvětšení je nejlepší v celých násobcích původních rozměrů, jinak dochází ke zkreslení
obrazu. U zmenšení je dále třeba dbát, aby se neztratily důležité čáry – úzké svislé
a vodorovné linky. Při větším zmenšení pak nepůjde poznat, co na obrázku je.
Zde je příklad nevhodně zmenšené bitové mapy. Původní vodorovný rozměr je 275 pixelů. Byl zmenšen pouze na 210 pixelů a některé čáry již zcela zmizely.
43
Vyhrazení místa
Znáte-li předem oba rozměry obrázku, můžete je v značce <IMG> zadat jako parametry
WIDTH a HEIGHT. Prohlížeč potom vyhradí pro obrázek místo a může sestavit stránku ještě
dříve, než obrázky zavede. Po jejich zavedení už nemusí stránku přeskládat.
Mapa
USEMAP=“URL“
Tento parametr označuje mapu obrázku. Mapa určuje, kde jsou na obrázku citlivá místa.
Jsou to části plochy obrázku, které lze definovat jako obdélníky nebo čtverce, kruhy a mnohoúhelníky. Každá taková část má definovánu webovou stránku.
K čemu lze takové mapování použít?
Je to především tehdy, jestliže obrázek je skutečně plánkem nebo mapou. Plánek a mapa
obsahují různá význačná místa. Uživatel se o nich potřebuje něco dozvědět.
Potom při každém klepnutí myší na citlivé místo přejde na webovou stránku, která
je tomu místu přiřazena. Uživatel pozná citlivé místo mapy tak, že se mu tam ukazatel myši
změní ze šipky na ručičku.
Ukažme si příklad. Použijeme plánek sportovního areálu, kde je stadion, restaurace,
kuželna (dlouhá budova s dráhou pro hraní kuželek) s barem a budova ředitelství. Areál patří
nějaké firmě.
Jestliže uživatel klepne do oválu stadionu, má se mu zobrazit stránka sporty.htm o tom,
jaké sporty se zde dají pořádat. Na pravé straně obrázku jsou pod sebou shora dolů: restaurace, ředitelství a kuželna. Při klepnutí na restauraci se má ukázat stránka rest.htm s fotografiemi vnitřku restaurace, otvírací dobou a jídelníčkem. Při klepnutí na kuželnu se má otevřít
stránka zabava.htm s informacemi o otvírací době kuželny a nápojích v baru. A při klepnutí
na ředitelství se má zobrazit stránka firma.htm s údaji o firmě, nabídkou volných míst atd.
Plánek dostanete v propagačním oddělení firmy a oskenujete ho (pomocí scanneru převedete na soubor s obrázkem). Nyní musíte ještě určit budovy a přiřadit jim další webové
stránky. K tomu slouží párové značky <MAP>, </MAP> a nepárová značka <AREA>.
<MAP NAME=“jméno“>, </MAP>
Značky ohraničují seznam citlivých míst (tvarů) v mapě. Parametr NAME pojmenuje
celý seznam, aby se na něj dalo odkázat parametrem USEMAP=„URL“ značky <IMG>.
<AREA HREF=“URL“ ALT=“popis“ SHAPE=“tvar“ COORDS=“seznam souřadnic“>
Značka určuje jeden tvar v mapě. URL je odkaz na zdroj webové stránky, kam prohlížeč
přejde po klepnutí dovnitř tohoto tvaru. Popis se ukáže, když uživatel chvíli nechá ukazatel
myši uvnitř tohoto tvaru.
44
Seznam souřadnic obsahuje všechny číselné údaje potřebné k vytvoření tvaru. Každý
údaj je pozice pixelu měřená od levého horního rohu mapy (obrázku). Dále označené souřadnice x se měří ve vodorovném směru, y ve svislém směru.
Tvar může být RECT (anglicky: rectangle, tj. obdélník nebo čtverec). V tom případě
má seznam souřadnic čtyři čísla. První dvě jsou souřadnice levého horního rohu obdélníka
v pořadí x, y. Druhé dvě jsou souřadnice pravého spodního rohu obdélníka opět v pořadí x, y.
Čísla druhých dvou souřadnic mohou končit znakem procento (%). Pak neurčují souřadnice, ale procento zabrané plochy obrázku. X udává, kolik procent šířky obrázku tvar zabírá. Y udává, kolik procent výšky obrázku tvar zabírá.
Tvar může být CIRCLE (anglicky: kruh). Pak jsou v seznamu souřadnic jen tři čísla.
První dvě udávají souřadnice středu kruhu, třetí číslo je jeho poloměr.
Tvar může být také POLY (polygon, anglicky: mnohoúhelník). Pak se seznam souřadnic
skládá z dvojic x, y. Každá dvojice udává jeden vrchol mnohoúhelníka.
Jako příklad si ukážeme, jak sestavit mapu pro plánek sportovního areálu, který je uveden výše. Napřed si půdorysy budov a stadionu rozložíme na jednoduché tvary.
Stadion tvoří dva kruhy 1, 2 a obdélník 3 (překrývání nevadí). Restaurace je složena
ze dvou obdélníků 4, 5. Ostatní budovy jsou složeny vždy jen z jednoho tvaru – 6, 7. Čísla
uvnitř tvarů odpovídají jednotlivým řádkům – značkám AREA v seznamu shora dolů.
<img src=“WWW-3.bmp“ border=0 usemap=“#mapar“>
<map name=“mapar“>
<area href=sporty.htm alt=“Stadion“ shape=circle coords=“69,70,53“>
<area href=sporty.htm alt=“Stadion“ shape=circle coords=“129,70,53“>
<area href=sporty.htm alt=“Stadion“ shape=rect coords=“69,16,129,123“>
<area href=rest.htm alt=“Restaurace“ shape=rect coords=“187,11,265,30“>
<area href=rest.htm alt=“Restaurace“ shape=rect coords=“247,30,265,58“>
<area href=firma.htm alt=“Ředitelství“ shape=rect coords=“199,53,229,83“>
<area href=zabava.htm alt=“Kuželník“ shape=rect coords=“188,104,266,123“>
</map>
Například tvar 2 je popsán druhým řádkem AREA shora. Je to kruh se středem
na souřadnicích x=129 pixelů vodorovně od levého okraje obrázku, y=70 pixelů svisle od horního okraje obrázku. Kruh má poloměr 53 pixelů.
Tvar 6 je popsán šestým řádkem AREA shora. Je to čtverec 30×30 pixelů. Jeho levý horní
roh má souřadnice x=199, y=53 a pravý spodní roh má souřadnice x=229, y=83. Souřadnice
x a y obou protilehlých rohů se liší o 30 pixelů.
45
Zobrazíme tuto webovou stránku v prohlížeči a budeme po ní jezdit ukazatelem myši.
Přesně uvnitř nakreslených tvarů se ukazatel změní ze šipky na ručičku. Nechte ukazatel
chvíli uvnitř tvaru stát: u ručičky se objeví obdélníček s popisem z parametru ALT.
Na obrázku ukazuje ručička dovnitř plochy stadionu. Ve stavovém řádku vidíte odkaz
na webovou stránku „sporty.htm“.
Hlavní věcí je, že při klepnutí na tvar přejde prohlížeč na webovou stránku dle příslušného URL. Při klepnutí na tvary 1, 2 nebo 3 (dávají dohromady stadion) to bude stránka „sporty.htm“. Dá se to zkontrolovat ve stavovém řádku prohlížeče. Když dáte ukazatel na některý
tvar, ukáže se ve stavovém řádku cesta a název webové stránky, kam by se přešlo při klepnutí.
1.6.2 Odkazy na stránku
Odkazy na webovou stránku, umístěnou kdekoli na Internetu, se řeší značkami <A>,
</A>. Písmeno A je zkratka anglického slova anchor – kotva. Kotva je právě to místo, kam
značky <A>, </A> umístíte.
Značky <A>, </A> jsou párové. URL, které odkazuje na webovou stránku, umístíte
v parametru značky <A>. Text nebo obrázek (IMG) umístěný mezi značky <A> a </A> se stane objektem. Šipka ukazatele myši se na něm mění na ručičku. Proto nesmí jít <A> a </A>
hned po sobě.
Příklad: překládám rozhovor o vzdušných vírech na Marsu. Autor zařadil k textu
obrázky – snímky vírů na povrchu Marsu a jejich stop. Tyto obrázky zavedl značkami
<IMG>.
46
Když budu chtít, aby se čtenář mohl podívat pro srovnání na nějaký obraz malíře Jacksona
Pollacka, musím najít na Internetu webovou stránku s jeho některým dílem. Najdu například
URL „The Uncensored Pollack“: http://www.dougshaw.com/uncensored/pollack.html.
Budu chtít, aby se na malířův obrázek podíval jenom ten, kdo bude mít zájem. Proto nezařadím obrázek značkou <IMG>, ale vložím odkaz značkami <A>, </A>. Značky ohraničují
kousek textu: slovo, dvě nebo nadpis, celou větu i odstavec. V tomto případě tři slova.
HREF=„URL“
HREF je nejdůležitější parametr značky <A>. Udává odkaz, na který prohlížeč přejde,
když uživatel klepne na text nebo obrázek ohraničený značkami <A> a </A>.
<div><B>Otázka:</B> Liší se marťanské vzdušné víry od pozemských?</div>
<div><IMG SRC=“WWW-IMG5.JPG“ ALIGN=RIGHT>
<B>Odpověď:</B> Povrch Marsu je mnohem prašnější než povrch Země, neboť tady na Zemi máme déšť, který spláchne většinu prachu padajícího z oblohy, ale na Marsu déšť není. Marťanské vzdušné víry vytvářejí v prachu pěkná
„umělecká díla“. Nechávají za sebou stopy tam, kde buď zvedly prach nebo ho
rozvířily. Většinou jsou ty stopy tmavší než okolní půda, ale někdy jsou i světlejší - závisí to na povrchu pod tenkou vrstvou prachu, zda je tmavší nebo světlejší než samotný prach. Na některých místech Marsu vidíte stovky křižujících se
stop po vzdušných vírech. Stopy tam vytvářejí obrazce, které něčím
připomínají <A HREF=“http://www.dougshaw.com/uncensored/
pollack.html“>
malby Jacksona Pollacka</A>. Jiné zase vypadají jako čmáranice
dvouletých dětí tužkou.</div>
Prohlížeč ukáže stejný obrázek jako před úpravou, jenom slova „malby Jacksona
Pollacka“ budou mít pravděpodobně modrou barvu a budou podtržena. To ovšem závisí jen
na tom, jak si uživatel nastavil svůj prohlížeč. Dá se nastavit i tak, že text odkazu vypadá přesně jako okolní text. Rozhodující je, že ukazatel myši se na slovech „malby Jacksona Pollacka“
změní na ručičku. Uživatel klepne a přejde na stránku věnovanou malíři.
Tohle ještě není dokonalé. Přemýšlejte chvíli jako uživatel, který si vaši stránku prohlíží. Chce se podívat na malby, přejde na odkaz. Rozhovor o Marsu zmizí z okna prohlížeče
a je nahrazen stránkou s obrázkem J. Pollacka. Uživatel nevidí vedle sebe obrázky Marsu
a malíře a nemůže je srovnat.
V tom případě použijte parametr značky <A> TARGET=„_BLANK“. (Anglicky: target = cíl.) Prohlížeč otevře nové okno a zobrazí odkazovanou stránku v něm. Původní okno
zůstane také otevřeno a uživatel si obě může na obrazovce uspořádat tak, aby viděl obsah
obou zároveň.
<A HREF=“http://www.dougshaw.com/uncensored/pollack.html“ TARGET=
“_BLANK“>
Kotvou odkazu nemusí být jenom text, ale také obrázek. Chcete-li zvýraznit, že odkaz
jde na zcela jiný WWW server, můžete si navrhnout malý obrázek, třeba takový: . Namísto
textu pak zařadíte mezi značky <A>, </A> značku <IMG>:
Stopy tam vytvářejí obrazce, které něčím připomínají malby Jacksona Pollacka
<A HREF=“http://www.dougshaw.com/uncensored/pollack.html“>
<IMG SRC=“WWW-mimo.gif“ ALIGN=ABSMIDDLE></A>
Jiné zase vypadají jako čmáranice dvouletých dětí tužkou.</div>
47
Prohlížeč standardně takový obrázek modře orámuje na znamení, že je na něm odkaz.
Pokud rám vadí, jako právě v tomto případě, odstraníte ho parametrem BORDER=0 značky
<IMG>.
Je rovněž zcela přípustné dát mezi značky <A> a </A> jak text, tak obrázek.
Stopy tam vytvářejí obrazce, které něčím připomínají
<A HREF=“http://www.dougshaw.com/uncensored/pollack.html“>malby
<IMG SRC=“WWW-mimo.gif“ ALIGN=ABSMIDDLE BORDER=0>Jacksona
Pollacka</A>.
Jiné zase vypadají jako čmáranice dvouletých dětí tužkou.</div>
TITLE=“text“
Tento parametr značky <A> použijete stejně jako u značky <IMG>. Při postavení ukazatele myši na odkaz se objeví malý rámeček s textem z parametru TITLE.
Pro příklad si vezmeme předchozí situaci. Do značky <A> přidám parametr TITLE.
Potom se uživateli zobrazí text v libovolném místě odkazu, na textu i na obrázku:
Parametr TITLE bych mohl dát i do značky IMG, ale pak by se text nezobrazil při zastavení ukazatele myši na slovech odkazu, jen na samotném obrázku.
1.6.3 Odkazy na část stránky
Parametr HREF značky <A> může za URL obsahovat znak # a jméno, takzvané návěští.
Tím je odkaz nasměrován na část webové stránky.
<A HREF=“http://www.osapd.cz/informace/zkratky.htm#M“>
Tento zápis znamená, že odkaz směřuje na server www.osapd.cz, do složky resp. oddílu
nazývaného Informace, kde zobrazí stránku zkratky.htm.
Nezobrazí ji ale od začátku, nýbrž tak, aby v okně prohlížeče zcela nahoře začínala část
označená návěštím M. (Začíná tam patrně oddíl zkratek začínajících písmenem M.)
Návěští má jméno M. To určil autor stránky zkratky.htm tak, že na určeném místě
stránky zkratky.htm, mezi zkratkami L… a M…, definoval návěští.
Návěští se definuje značkou <A> s parametrem NAME:
<A NAME=“M“>
Jméno může mít samozřejmě více než jeden znak. Může obsahovat písmena a číslice.
48
Návěští se více používají tehdy, když víte, jaká jsou jejich jména. To lze u cizích webových
stránek zjistit prohlídkou zdroje – ukáže vám ho prohlížeč funkcí Zobrazit zdrojový kód nebo
podobnou podle druhu a jazyka prohlížeče.
Nejlépe však víte, kde jsou jaká návěští, v případě, že píšete odkaz do vlastní stránky.
Speciální případ odkazu na část stránky nastává, když se z nějakého místa rozsáhlé webové stránky odkazujete na jiné místo téže stránky. Odkaz pak v parametru HREF vůbec neobsahuje URL, ale pouze znak # a jméno – návěští.
<A HREF=“#M“>
Například uvedená stránka zkratek může být velmi rozsáhlá. Pro lepší orientaci uživatele přidáte na její začátek řadu odkazů na úseky zkratek začínající písmeny abecedy. Zde
je vidět jenom část s písmenem M a místem, kde je návěští.
(…začátek stránky, odkazy na A až K)
<A HREF=“#Písmeno L“>L</A>
<A HREF=“#Písmeno M“>M</A>
<A HREF=“#Písmeno N“>N</A>
(…odkazy na Ň až Ž)
(…definice zkratek začínajících písmeny A až L)
<p>LSA<BR> Local Security Authority
<BR> místní bezpečnostní autorita
</p>
<p><A NAME=“Písmeno M“>MAC</A><BR> Media Access Control
<BR> řízení přístupu k médiu
</p>
(…definice zkratek začínajících písmeny M, N až Ž)
Návěští zde použité je „Písmeno M“. Všimněte si, že návěštím je označena přesně
zkratka „MAC“, návěští není umístěno před odstavec. To proto, aby nastavení stránky na horní okraj okna prohlížeče bylo přesné.
Jestliže se v odkazu spletete a uvedete neexistující návěští, nebude odkaz účinkovat.
Totéž se stane, když odkaz směřuje na část stránky, která se dosud ze serveru nezavedla.
To znamená, že bude-li uživatel spěchat a klepne na písmeno Z hned po zobrazení začátku
stránky v prohlížeči, nedostane se k cíli. Musí počkat, až se zavede celá stránka.
1.6.4 Další druhy odkazů
Jiné odkazy se liší jenom tím, jaký protokol je uveden v parametru HREF.
FTP server
Obyčejně není problém použít odkaz na server FTP, například:
<A HREF=“ftp://ftp.microsoft.com/public“>
(URL bývá zpravidla mnohem delší a ukazuje na konkrétní soubor ke stažení.)
Není to problém proto, že prohlížeče mají protokol FTP zabudován a přejdou na něj
bez problému. Nemusí volat jiný program.
49
Elektronická pošta
Jinak je tomu s odkazy na adresy elektronické pošty. Takový odkaz používá jako jméno
protokolu slovo mailto (anglicky: pošta pro). Tyto odkazy se používají často, například:
<A HREF=“mailto:[email protected]“>
Autor webové stránky zde předpokládá, že uživatel bude mít instalován program
pro elektronickou poštu. Prohlížeč uživatele musí umět tento program spustit, případně
(když je již spuštěn) aktivovat ho a předat mu URL „mailto“ jako poštovní adresu adresáta.
Poštovní program pak ukáže okno, kam uživatel napíše zprávu pro adresáta, v tomto
případě pro Josefa Nováka. Uživatel odešle zprávu běžným způsobem – to znamená tak, jak
je zvyklý zprávy posílat.
Soubor
Odkaz na soubor lokálního počítače (toho, kde je instalován prohlížeč webových stránek) má jako jméno protokolu slovo file (anglicky: soubor). Za ním, dvojtečkou a dvěma
lomítky pak následuje běžné určení souboru. Je to jednotka, cesta, jméno a přípona souboru:
<A HREF=“file://C:\stazeno\nasa\mars_pathfinder.htm“>
Tato URL se používají pro odkazy na webové stránky, které jsou uloženy na lokálním
počítači, kde jste je vytvořili nebo kam jste je stáhli z Internetu. Často se také používají pro
obrázky, které se mají na stažených webových stránkách objevit.
1.7 Seznamy
V publikovaných textech se často vyskytují seznamy.
Seznam je řada položek tvořících nějaký celek. Aby byl seznam přehledný, tvoří jeho
položky takzvané odrážky. Jsou to odsazené řádky nebo odstavce. Na začátku mají obvykle
grafický znak (tečku, čtvereček) nebo číslo. Můžete například vyjmenovat, z čeho se skládá
auto:
Ü motor,
Ü podvozek,
Ü karoserie.
Takový seznam se nazývá neseřazený a říká, jaké části auto obsahuje. Můžeme je uvést
v libovolném pořadí. Budeme-li jmenovat napřed podvozek a pak motor a karoserii nebo
napřed karoserii a pak podvozek a motor, stále platí, že auto obsahuje tyto tři celky.
Jiný druh seznamu je seznam číslovaný. Ten určuje pořadí činností. Chcete-li třeba
uvařit čaj, postupujte takto:
1. Dejte vařit vodu.
2. Připravte si konvičku a sypaný čaj.
3. Vypláchněte konvičku teplou vodou.
4. Dejte do konvičky několik lžiček čaje podle její velikosti a toho, jak má čaj být silný.
Recept podle počtu šálků na velmi silný čaj: na každý šálek jednu rovnou lžičku čaje
a na konvičku ještě jednu.
5. Nechte lístky čaje v teplé konvičce asi 5 minut rozevřít.
6. Zalijte čaj v konvičce vařící vodou.
7. Nechte čaj 2-3 minuty odstát a pak nalijte do šálků. Dobrou chuť!
50
Vidíte, že činnosti nelze libovolně zaměnit. Zkusíte-li napřed nasypat do konvičky čaj
a pak ji vypláchnout teplou vodou, vypláchnete čaj do dřezu a vyrobíte jen horkou vodu.
Přehození bodů 3 a 4 tedy nevede k úspěchu. Přitom se žádná činnost ze seznamu neztratila!
1.7.1 Neseřazené seznamy
Pro neseřazené seznamy se v jazyku HTML používají párové značky <UL>, </UL>
(z anglického: unordered list, neseřazený seznam).
Odrážky
Pro vyznačení položky seznamu se používá značka <LI> (anglicky: list item, položka
seznamu), která není párová – celý seznam ukončuje značka </UL>. Tato značka určuje, kam
se umístí odrážka.
Ukažme si, jak bude vypadat seznam obsahující části auta. Opatříme jej nadpisem H4:
<H4>Hlavní části automobilu:</H4>
<UL>
<LI>motor,
<LI>podvozek,
<LI>karoserie.
</UL>
(Připomínám, že tuto část těla stránky vložíme do naší zkušební webové stránky
mezi značky <BODY> a </BODY>.) Prohlížeč zobrazí:
Před začátek a za konec seznamu vloží prohlížeč oddělovač – prázdný řádek.
Víceúrovňové seznamy
Jak můžeme ve webové stránce každou část auta rozepsat na další součástky? Jazyk
HTML má možnost napsat další úroveň seznamu. První úroveň tvoří části: motor, podvozek
a karoserie. Další úroveň vytvoříme, když vypíšeme, že motor se skládá z válců, pístů, hlavy,
svíček atd.
<UL>
<LI>motor:
<UL>
<LI>skříň s válci
<LI>hlava válců
<LI>písty
<LI>kliková hřídel
<LI>vačky
51
<LI>...
</UL>
<LI>podvozek:
<UL>
<LI>převodová skříň
<LI>řízení
<LI>přední náprava
<LI>zadní náprava
<LI>kola
<LI>...
</UL>
<LI>karoserie:
<UL>
<LI>samonosná část s podlahou, sloupky a střechou
<LI>blatníky
<LI>dveře
<LI>kryt motoru a zavazadlového prostoru
<LI>sedadla
<LI>...
</UL>
</UL>
Odsazení, které vidíte ve zdrojovém textu, není pro prohlížeč potřebné, ale slouží jen
pro vaši orientaci.
52
Prohlížeč zobrazí:
A takových úrovní můžeme vytvořit více, až do posledních šroubků. Zkusme třetí
úroveň, jen zkráceně:
<UL>
<LI>motor:
<UL>
<LI>skříň s válci
<UL>
<LI>hlava válců
<LI>písty
<LI>kliková hřídel
<LI>vačky
<LI>...
<LI>karburátor
<LI>zapalování
<LI>čerpadlo oleje
<LI>...
</UL>
<LI>podvozek:
53
<UL>
<LI>převodová skříň
<LI>...
</UL>
<LI>karoserie:
<UL>
<LI>samonosná část s podlahou, sloupky a střechou
<LI>sedadla
<LI>...
</UL>
</UL>
</UL>
Bude zobrazena takto:
Všimněte si, že grafické symboly odrážek první úrovně jsou plná kolečka, u druhé
úrovně kroužky a u třetí úrovně jsou to plné čtverečky. Tyto tři symboly můžete volit parametrem TYPE.
TYPE=DISC – plné kolečko,
TYPE=CIRCLE – kroužek,
TYPE=SQUARE – plný čtvereček.
Tento parametr lze použít ve značkách <UL> a <LI>. Ve značce <UL> platí nastavení pro celý seznam. Je-li uveden ve značce <LI>, platí pro tuto odrážku a všechny další
v seznamu (pokud není v některé další značce <LI> uveden další parametr TYPE.
54
Další parametr použitelný ve značkách je COMPACT, který u některých prohlížečů
nastaví hustý (kompaktní) výpis seznamu.
Samozřejmě, že jednotlivé části seznamů můžete doplnit jinými značkami, třeba
pro font písma, pro tučné písmo nebo kursivu atd.
1.7.2 Číslované seznamy
Pro číslované seznamy se v jazyku HTML používají párové značky <OL>, </OL> (z anglického: ordered list, seřazený seznam). Ukažme si je na příkladu receptu. Seznam doplníme
nadpisem a přáním dobré chuti na závěr:
<H4>Příprava čaje</H4>
<OL>
<LI>Dejte vařit vodu.
<LI>Připravte si konvičku a sypaný čaj.
<LI>Vypláchněte konvičku teplou vodou.
<LI>Dejte do konvičky několik lžiček čaje podle její velikosti a
toho, jak má čaj být silný. Recept podle počtu šálků na velmi
silný čaj: na každý šálek jednu rovnou lžičku čaje a na konvičku
ještě jednu.
<LI>Nechte lístky čaje v teplé konvičce asi 5 minut rozvinout.
<LI>Zalijte čaj v konvičce vařící vodou.
<LI>Nechte čaj 2-3 minuty odstát a pak nalijte do šálků.
</OL>
Dobrou chuť!
Prohlížeč zase přidá oddělující meziřádky:
Druhy číslování
Číslovaný seznam nemusí mít položky označené jenom běžnými čísly, ale mohou to být
také římská čísla nebo písmena abecedy. Ovládá to parametr TYPE u značky OL:
55
TYPE=1 – běžná čísla z arabských číslic,
TYPE=A – písmena velké latinské abecedy,
TYPE=a – písmena malé latinské abecedy,
TYPE=I – římská čísla z písmen velké abecedy,
TYPE=i – římská čísla z písmen malé abecedy.
Další parametr značky OL je START. Ten určuje, kterým číslem nebo písmenem seznam začne. Ale u všech typů musíte první číslo zapsat běžným způsobem:
<OL TYPE=A START=3>
Seznam začne písmenem C (je třetí v latinské abecedě).
Chcete-li změnit přirozenou posloupnost číslování v průběhu seznamu, můžete toho dosáhnout parametrem VALUE značky LI. Položky seznamu přejdou na zadané číslo a pokračují v číslování, dokud není parametrem VALUE provedena další změna. Například:
<OL TYPE=I START=7>
<LI>Minimum=7
<LI>=8
<LI>=9
<LI VALUE=255>Přeskok na 255
<LI>=256
<LI VALUE=1950>=1950
<LI VALUE=2000>=2000
<LI>=2001
</OL>
1.7.3 Definice
Párové značky <DFN>, </DFN> ohraničují speciální druh seznamu. Nazývá se definice. Definici použijete tam, kde je třeba vysvětlit neznámá slova, neznámé pojmy.
Seznam definic se dělí na jednotlivé definice. Jsou to dvojice řádků. První z nich obsahuje slovo nebo slova, která chcete vysvětlit. Druhý řádek obsahuje vysvětlení. Je-li vysvětlení
dlouhé, může zabrat i více řádků.
56
Značka <DT> (definice-termín, anglicky: term) uvádí slovo nebo pojem. Je to termín,
případně odborný termín, který chcete vysvětlit. Prohlížeč jej umístí od začátku nového řádku.
Značka <DD> (definice-popis, anglicky: description) uvádí vysvětlení nebo popis.
Prohlížeč jej umístí na nový řádek a odsadí. Je-li popis dlouhý tak, že tvoří celý odstavec, nejsou už další řádky odsazené.
Termín i vysvětlení zobrazí prohlížeč skloněným písmem – kursivou. Značky <DT>
a <DD> nejsou párové. Celý úsek vysvětlivek ukončuje značka </DFN>.
<DFN>
<DT>web
<DD>anglicky: pavučina
<DT>World-wide Web
<DD>anglicky: celosvětová pavučina, tj. Internet; jde vlastně jen
<DD>o publikační službu Internetu a používá se zkratka WWW
<DT>URL (Uniform Resource Locator)
<DD>jednotný ukazatel zdroje - odkaz v rámci celého Internetu
</DFN>
Jsou zde tři definice. Prohlížeč je zobrazí takto:
web
anglicky: pavučina
World-wide Web
anglicky: celosvětová pavučina, tj. Internet; jde vlastně jen
o publikační službu Internetu a používá se zkratka WWW
URL (Uniform Resource Locator)
jednotný ukazatel zdroje - odkaz v rámci celého Internetu
Všimněte si, že vysvětlení k termínu World-wide Web jsem rozdělil na dva řádky a každý z nich má na začátku značku <DD>. Je to kvůli přehlednosti. Kdybych nechal za značkou
<DD> dlouhý odstavec, takto:
<DT>World-wide Web
<DD>anglicky: celosvětová pavučina, tj. Internet; jde vlastně jen o publikační
službu Internetu a používá se zkratka WWW
zobrazil by prohlížeč:
web
anglicky: pavučina
World-wide Web
anglicky: celosvětová pavučina, tj. Internet; jde vlastně jen
o publikační službu Internetu a používá se zkratka WWW
URL (Uniform Resource Locator)
jednotný ukazatel zdroje - odkaz v rámci celého Internetu
Takový zápis není přehledný. Pokračující řádek odstavce není viditelně oddělen od řádku s termínem URL. Totéž se může stát, když zobrazená stránka není dost široká (uživatel
nastaví úzké okno).
57
1.8 Tabulky
Návrh jazyka HTML věnuje tabulkám velkou péči. Definuje tabulku jako poměrně samostatný celek. Tabulka HTML se skládá z řádků. Každý řádek tabulky se skládá z buněk.
Tabulky HTML mají například tyto vlastnosti:
Ü automatické přizpůsobení šířky sloupců,
Ü zobrazení s rámečky i bez nich,
Ü možnost vícebarevného a plastického orámování tabulky,
Ü uspořádání údajů s možností spojování a vynechání buněk,
Ü možnost umístění obrázků do buněk,
Ü možnost umístění tabulky do buňky jiné tabulky, atd.
Autor webové stránky musí párovými značkami <TABLE>, </TABLE> definovat tabulku, párovými značkami <TR>, </TR> řádek tabulky a párovými značkami <TD>, </TD>
nebo <TH>, </TH> definovat buňky v řádku. Tím, že se v každém řádku určí buňky, vznikají
automaticky sloupce tabulky. Sloupce tabulek se proto v HTML nedefinují (avšak dají se stanovit jejich vlastnosti, viz dále).
Prohlížeč zpracovává tabulku vždy tak, že si přečte celou její definici – všechny
řádky a buňky, spočítá počty buněk v řádcích a podle největšího počtu stanoví počet sloupců.
Podle obsahu buněk určí prohlížeč i šířky sloupců, pokud autor v parametrech nestanoví jinak.
Tak se může tabulka zobrazit celá do momentální šířky okna prohlížeče.
Není-li možno text ve sloupcích upravit tak, aby se tabulka vešla na šířku okna, musí
prohlížeč vytvořit tabulku širší a dole v okně zobrazit posuvník (anglicky: scroll bar). Také
autor tabulky může pomocí parametrů stanovit, jak budou sloupce široké.
1.8.1 Záhlaví, řádky, sloupce
U každé tabulky je nutno ve zdrojovém kódu dodržet tuto základní strukturu:
<TABLE>
<TR>
<TD>
řádek 1, sloupec 1
</TD>
……………
<TD>
řádek 1, sloupec x
</TD>
</TR>
<TR>
<TD>
řádek 2, sloupec 1
</TD>
<TD>
……………
</TD>
</TR>
<TR>



















začátek tabulky
začátek prvního řádku
začátek buňky v prvním řádku a prvním sloupci
obsah buňky (1,1)
konec buňky v prvním řádku a prvním sloupci
další buňky prvního řádku: (1,2), (1,3) atd.
začátek poslední buňky prvního řádku
obsah buňky (1,x)
konec poslední buňky prvního řádku
konec prvního řádku
začátek druhého řádku
začátek buňky ve druhém řádku a prvním sloupci
obsah buňky (2,1)
konec buňky ve druhém řádku a prvním sloupci
začátek buňky ve druhém řádku a třetím sloupci
další buňky druhého řádku: (2,2), (2,3) atd.
konec poslední buňky druhého řádku
konec druhého řádku
začátek třetího řádku s buňkami (3,1) až (3,x)
58
……………

další řádky tabulky
</TR>

konec posledního řádku s buňkami (y,1) až (y,x)
</TABLE>

konec tabulky
Pro orientaci ve zdrojovém kódu je vhodné odsadit značky <TR>, </TR> pro řádky
a značky <TD>, </TD> pro buňky, jak je naznačeno. Zdrojový kód se tím ovšem roztahuje
do délky, a proto doporučuji „zhuštěné“ řešení, v němž se ještě můžete dobře vyznat:
<TABLE>
<TR>
<TD>obsah (1,1)</TD>
………………
</TR>
<TR>
………………
</TR>
</TABLE>
Pro zvýraznění písma můžete použít některé ze značek pro font, tučné a/nebo skloněné
písmo. Tyto značky musíte umístit dovnitř každé buňky. Nelze je použít na celý řádek nebo
na celou tabulku.
Záhlaví tabulky
Tabulky HTML mají speciální značky <TH>, </TH> pro záhlaví. Jestliže potřebujete
mít v tabulce nadpisy jednotlivých sloupců, použijte tyto značky pro buňky prvního řádku tabulky. V textu buňky mění značky <TH> a </TH> písmo na tučné a zarovnané na střed.
Značky <TH>, </TH> můžete použít kdekoli, nejen v prvním řádku tabulky. Prohlížeč
jejich použití nekontroluje. Jsou-li nadpisy v prvním sloupci, můžete bez obav pro každou první buňku řádku použít značky <TH>, </TH>.
Nejjednodušší tabulka
Je to taková tabulka, která obsahuje jenom jednu buňku - (1,1). Jak uvidíte, i takovou tabulku můžete jako autoři webových stránek dobře použít.
<TABLE>
<TR>
<TD>Tabulka</TD>
</TR>
</TABLE>
Struktura zdrojového kódu tabulky je povinná. Proto nelze ani v tomto jednoduchém
případě vynechat značky <TR>, </TR>, <TD> a </TD>.
59
1.8.2 Orámování
Zkuste tento kód zařadit do těla naší zkušební stránky a zobrazit. Budete asi překvapeni,
že v okně prohlížeče neuvidíte žádnou tabulku, pouze slovo „Tabulka“.
Je to tím, že jsme neurčili tloušťku orámování. Standardně je nulová, a proto není rámeček tabulky viditelný. Upravíme to parametrem BORDER (anglicky: hranice) značky
<TABLE>:
BORDER=n
Je to počet pixelů a určuje, jak bude rámeček silný. Upravíme-li značku na:
<TABLE BORDER=1>
zobrazí prohlížeč toto:
Všimněte si, že jsme dali šířku rámečku jenom jeden pixel, a přesto je rámeček jakýsi dvojitý. Je to tím, že vlastně vidíte dva rámečky. Jeden, vnější, je rámeček kolem tabulky. Můžete
ho ovlivnit parametrem BORDER. Druhý, vnitřní, je rámeček kolem buňky. Vzdálenost
mezi nimi ovlivníte parametrem CELLSPACING (anglicky: odsazení buňky) značky
<TABLE>:
CELLSPACING=n
Je to počet pixelů mezi vnitřním a vnějším rámečkem. Uplatní se ale jenom tehdy, když
je parametr BORDER nenulový. Doplníme parametr do značky:
<TABLE BORDER=1 CELLSPACING=0>
a prohlížeč zobrazí:
Stále je tam vnitřní rámeček (kolem buňky) a vnější rámeček (kolem celé tabulky),
ale není už mezi nimi žádná mezera.
Text buňky je teď těsně orámován. Chcete-li, aby rámečky buněk nepřiléhaly tak
těsně k obsahu buněk, zadejte parametr CELLPADDING (anglicky: doplnění buňky) značky
<TABLE>:
CELLPADDING=n
Číslo n určuje počet pixelů mezi vnitřním rámečkem a obsahem buňky. Přidejme parametr do značky <TABLE>, kterou používáme:
<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=4>
60
Teď rozšíříme vnější rámeček tabulky. Určíme tloušťku 8 bodů:
<TABLE BORDER=8 CELLSPACING=0 CELLPADDING=4>
a prohlížeč ukáže zajímavý rámeček:
Dostali jsme plasticky vyhlížející orámování. Tuto úpravu můžete použít pro orámování
velmi důležitých částí webové stránky.
Rámeček je složen ze dvou částí: tmavší a světlejší. Další čtyři parametry vám umožňují
tabulku a rámeček nebo jeho části různě obarvit.
BORDERCOLOR=barva
Parametr nastaví jednotnou barvu rámečku. To znamená, že rámeček přestane být plastický. (Anglicky: border = hranice nebo okraj, colour = barva. Americky: color = barva.)
Barvy je možno vyjádřit buď znakem # a šesti hexadecimálními čísly, nebo (anglickým)
názvem. Například barva s číslem #DC143C se nazývá Crimson. Můžete tedy napsat:
<TABLE BORDER=8 BORDERCOLOR=#DC143C>
<TABLE BORDER=8 BORDERCOLOR=„Crimson“>
Obě značky nastaví stejnou barvu. Seznam názvů barev a hexadecimálních kódů je
v příloze 3.5.
BORDERCOLORDARK=barva
Parametr nastaví barvu „tmavší“ části rámečku (anglicky: dark = tmavý). Přesně vzato
jsou to pravá a spodní část rámečku.
BORDERCOLORLIGHT=barva
Parametr nastaví barvu „světlejší“ části rámečku (anglicky: light = světlý, světlo). Přesně
vzato jsou to levá a horní část rámečku.
„Světlou“ a „tmavou“ část můžete samozřejmě obarvit tak, že stínování obrátíte. V šedých tónech to uděláte například takto:
<TABLE BORDER=8 BORDERCOLORLIGHT=„GRAY“ BORDERCOLORDARK=
„LIGHTGREY“>
BGCOLOR=barva
Parametr nastaví barvu pozadí tabulky (BG – zkratka z anglického slova background =
pozadí). Pozadí je podklad pod obsahy buněk. Nesmí proto být vzhledem k písmu příliš tmavý, anebo musíte barvy obrátit a značkou <FONT> nastavit bílé nebo světlé písmo. Třeba takto:
<TABLE BORDER=8 BORDERCOLORLIGHT=„GRAY“
BORDERCOLORDARK=„SILVER“ BGCOLOR=„BLACK“>
<TR>
<TD><FONT COLOR=WHITE><B>Tabulka</B></FONT></TD>
61
</TR>
</TABLE>
Ještě si na obrázku všimněte, že:
Ü vnitřní rámeček je stínován opačně než vnější,
Ü prostor mezi rámečky (CELLSPACING) má stejnou barvu, jako BGCOLOR.
Dosud
uvedené
parametry
pro
barvy
–
BORDERCOLORDARK,
BORDERCOLORLIGHT, BORDERCOLOR a BGCOLOR – můžete použít kromě značky
<TABLE> také ve značkách <TR> a <TD>.
Ve značce <TR> platí uvedené parametry pro orámování a pozadí buněk v řádku.
Ve značce <TD> platí pro orámování a pozadí jedné buňky – té, kde jsou použity.
Ještě jedna možnost orámování tabulky
Teď, když znáte účinek parametrů pro barvy, můžete dosáhnout toho, aby měla tabulka
úplně jednoduchý rámeček tvořený jednou čarou.
Zrušíme vnější rámeček (ve značce <TABLE> vynecháme parametr BORDER). Prostor
mezi oběma rámečky (CELLSPACING) nastavíme na 1. Pozadí celé tabulky nastavíme
černé (BGCOLOR=„Black“). Tím zároveň zrušíme i vnitřní rámeček, protože ten má
opačnou barvu než pozadí, bude tedy bílý.
Ještě zbývá zařídit, aby pozadí buněk nebylo černé, ale bílé. Proto musíme do každé
značky <TR> přidat parametr BGCOLOR=„White“.
Tabulka bude názornější, když bude mít čtyři buňky ve dvou řádcích. První řádek bude
sloužit jako záhlaví tabulky, a proto v něm použijeme značky <TH>, </TH> místo <TD>, </
TD>. Parametr CELLPADDING=3 upraví vzdálenost obsahu buněk od rámečku.
<TABLE BGCOLOR=Black CELLSPACING=1 CELLPADDING=3>
<TR BGCOLOR=White>
<TH>Tabulka</TH>
<TH>Tabulka</TH>
</TR>
<TR BGCOLOR=White>
<TD>Tabulka</TD>
<TD>Tabulka</TD>
</TR>
</TABLE>
Prohlížeč ukáže:
62
Obrázek jako pozadí tabulky
Obrázek lze určit za pozadí celé tabulky nebo i jednotlivých buněk. Parametr
BACKGROUND=„URL“
lze použít ve značkách <TABLE>, <TD> a <TH>. Pro příklad použijeme standardní nastavení a přidáme pouze parametry BACKGROUND. Jedna buňka má jiné pozadí než celá
tabulka. Parametr CELLPADDING=30 zajistí, aby tabulka byla dostatečně veliká.
<TABLE CELLPADDING=30 BACKGROUND=“file://C:\WINNT\Na rybách.bmp“ BORDER=5>
<TR>
<TH>Tabulka</TD>
<TH>Tabulka</TD>
</TR>
<TR>
<TD>Tabulka</TD>
<TD BACKGROUND=“file://C:\WINNT\Textura peří.bmp“>Tabulka</
TD>
</TR>
</TABLE>
Takhle to ukáže prohlížeč:
Nadpis tabulky
Nad tabulku nebo pod ni můžete umístit nadpis, který bude stručně uvádět, co tabulka
obsahuje. Slouží k tomu značky:
<CAPTION>, </CAPTION>
které umístíte ve zdroji nejlépe za značku <TABLE>. Vše, co zapíšete mezi tyto značky,
se stane nadpisem tabulky. (Anglicky: caption = titulek.)
Standardně je nadpis umístěn nad tabulkou a zarovnán na střed. Značka <CAPTION>
však má parametry pro změnu umístění nadpisu.
ALIGN=LEFT
ALIGN=CENTER
ALIGN=RIGHT
Tento parametr již znáte. Určí, kam bude nadpis zarovnán: doleva, na střed, doprava.
63
VALIGN=TOP
Tento parametr určuje, že nadpis bude nad tabulkou.
VALIGN=BOTTOM
Tento parametr určuje, že nadpis bude pod tabulkou.
1.8.3 Buňky
Velikost a umístění obsahu
Každá buňka má parametry HEIGHT, WIDTH, ALIGN a VALIGN.
HEIGHT=n
Parametr určuje výšku buňky – n je počet pixelů.
WIDTH=n
Parametr určuje šířku buňky – n je počet pixelů.
Jestliže stanovíte rozměry buňky, musí prohlížeč přizpůsobit tabulku vašemu přání.
Buňka je umístěna v průsečíku některého řádku a sloupce tabulky. Zadáte-li šířku, bude
se prohlížeč snažit přizpůsobit šířku sloupce, ve kterém buňka je. Zadáte-li výšku buňky, bude
se prohlížeč snažit přizpůsobit výšku řádku, v němž buňka je.
Je-li zadána šířka buňky, prohlížeč zjistí, zda ve stejném sloupci není definována šířka
i u jiných buněk. Pokud ano, vybere největší šířku a tu použije pro celý sloupec.
Je-li zadána výška buňky, prohlížeč zjistí, zda ve stejném řádku není definována výška
i u jiných buněk. Pokud ano, vybere největší výšku a tu použije pro celý řádek.
V následujícím příkladu je pouze u jedné buňky ze čtyř stanovena výška a šířka.
<TABLE BORDER=1>
<TR>
<TD>---</TD>
<TD>---</TD>
</TR>
<TR>
<TD>---</TD>
<TD WIDTH=64 HEIGHT=32>64x32</TD>
</TR>
</TABLE>
Šířka buňky (2,2) je stanovena na 64 pixelů, její výška na 32 pixelů. Prohlížeč přizpůsobí
velikosti buněk (1,2) a (2,1). Buňky (1,1) se řádek 2 ani sloupec 2 netýkají, a proto bude její
velikost dána velikostí textu, který je v ní zapsán.
64
Když nastavím parametry WIDTH anebo HEIGHT buňce (1,1), nedojde k žádnému
konfliktu. Velikosti buněk (1,2) anebo (2,1) se přizpůsobí.
Jestliže ale nastavím například šířku buňky (1,2) na 100 pixelů, bude prohlížeč muset
rozšířit i buňku (2,2) pod ní, aby neporušil pravoúhlý tvar tabulky.
<TABLE BORDER=1>
<TR>
<TD>---</TD>
<TD WIDTH=100>100 x ---</TD>
</TR>
<TR>
<TD>---</TD>
<TD WIDTH=64 HEIGHT=32>64x32</TD>
</TR>
</TABLE>
Ve značce <TR> lze parametrem HEIGHT nastavit výšku pro celý řádek.
Ve značce <TABLE> lze parametry WIDTH a HEIGHT nastavit výšku, šířku, nebo oba
rozměry celé tabulky.
ALIGN=LEFT
ALIGN=CENTER
ALIGN=RIGHT
Tyto parametry určují umístění obsahu v buňce ve vodorovném směru. Obsah, ať jde
o text nebo grafický objekt, může být vystředěn (CENTER), posunut co nejvíce doleva
(LEFT) nebo doprava (RIGHT).
Parametr lze použít také ve značkách <TR> (platí pro celý řádek) a <TABLE> (platí pro
celou tabulku), pokud nemají jednotlivé řádky anebo buňky zadány parametry ALIGN s jinou
hodnotou.
VALIGN=TOP
Parametr posune obsah buňky k její horní straně. (Anglicky: top = vrchol.)
VALIGN=MIDDLE
Parametr posune obsah buňky do středu (vystředí ho).
VALIGN=BOTTOM
Parametr posune obsah buňky k její spodní straně.
VALIGN=BASELINE
Parametr má význam tam, kde jsou v buňkách jednoho řádku použity různě velké typy
písma. Prohlížeč stanoví základní linku (anglicky: baseline) do spodní části prvního řádku
v buňce s největším písmem. Na tuto myšlenou čáru pak zarovná text v prvních řádcích ostatních buněk.
65
Parametr VALIGN se dá také použít pro celý řádek ve značce <TR>. Použijeme této
možnosti, abychom si ukázali působení BASELINE.
Druhy zvířat v tomto příkladu jsou vypsány různě velkými písmy. Parametry WIDTH zajišťují, aby se dva názvy musely vypsat uvnitř buněk na dvou řádcích. Pro celý řádek platí svislé
nastavení VALIGN=TOP.
<TABLE BORDER=1>
<TR VALIGN=TOP>
<TD WIDTH=50>papoušek ara</TD>
<TD><FONT SIZE=5>gorila</FONT></TD>
<TD WIDTH=100><FONT SIZE=6>tygr šavlozubý</FONT></TD>
<TD><FONT SIZE=4>lev</FONT></TD>
</TR>
</TABLE>
Vidíte, že horní části názvů jsou zarovnány k horním okrajům buněk. Takové zarovnání
není na pohled pěkné.
Stejná tabulka s parametrem VALIGN=BASELINE ve značce <TR> se zobrazí takto:
Myšlená čára, na kterou jsou řádky zarovnány, vede pod slovy papoušek, gorila,
tygr a lev.
Když mají všechny texty v řádku stejnou velikost, pracuje parametr VALIGN=BASELINE
stejně jako parametr VALIGN=TOP.
Zákaz zalomení textu
Parametr NOWRAP (bez hodnoty) lze uvést ve značce <TD> a <TH>. Potom text napsaný do buňky nebude zalomen do více řádků, ani když se nevejde na šířku okénka. Místo
zalomení se ve spodní části okna zobrazí vodorovný posuvník, kterým musí uživatel pohybovat, aby celý text viděl. (Anglicky: no wrap = žádné zalomení.)
Vynechané buňky
Někdy se stane, že nejsou obsazeny všechny buňky v řádku. Můžeme si to ukázat na
příkladu.
Máte sestavit tabulku druhů hořčice, která je na skladě. Dostanete tyto údaje:
Ü Plnotučná hořčice je v balení po 50, 100 a 500 g
Ü Kremžská pouze 50 a 500 g
Ü Francouzská pouze po 100 g
66
Sestavíte tabulku:
<TABLE border=1>
<TR>
<TH>Plnotučná</TH>
<TD>50 g</TD>
<TD>100 g</TD>
<TD>500 g</TD>
</TR>
<TR>
<TH>Kremžská</TH>
<TD>50 g</TD>
<TD>500 g</TD>
</TR>
<TR>
<TH>Francouzská</TH>
<TD>100 g</TD>
</TR>
</TABLE>
ale když se podíváte na okno prohlížeče, vidíte, že to není nejlepší. Váhové kategorie
nejsou ve sloupcích pod sebou. Když budete mít více druhů a více různých balení, nebude
tabulka přehledná. Nezjistíte tak snadno, jaké hořčice máte třeba s váhou 500 g.
Potřebujete metodu, jak dostat stejné váhy pod sebe.
Tam, kde hořčice dané váhy není na skladě, zařaďte do tabulky prázdnou buňku značkami <TD></TD>, které neuzavírají žádný obsah.
<TABLE border=1>
<TR>
<TD>50 g</TD>
<TD>100 g</TD>
<TD>500 g</TD>
</TR>
<TR>
<TH>Kremžská</TH>
<TD>50 g</TD>
<TD></TD>
67
<TD>500 g</TD>
</TR>
<TR>
<TD></TD>
<TD>100 g</TD>

</TR>
</TABLE>
Takto je tabulka už přehledná.
(Ještě si mimochodem všimněte, kde jsou použity buňky záhlaví, tj. značky <TH>
a </TH>, aby vytvořily sloupec.)
Někdy se však nehodí, aby v tabulce zůstávaly „díry“. V takových případech doporučuji
dát do každé prázdné buňky jednu nedělitelnou mezeru,  
<TABLE BORDER=1 CELLPADDING=5>
<TR>
<TH WIDTH=120>Plnotučná</TH>
<TD WIDTH=40>50 g</TD>
</TR>
<TR>
<TH>Kremžská</TH>
<TD>50 g</TD>
<TD> </TD>
<TD>500 g</TD>
</TR>
<TR>
<TD> </TD>
<TD>100 g</TD>
<TD> </TD>
</TR>
</TABLE>
68
Tabulku jsem ještě upravil pomocí CELLPADDING a přidáním šířek buněk do prvního
řádku.
1.8.4 Další možnosti formátování tabulky
Zarovnání celé tabulky
Celou tabulku můžete umístit na stránce doleva, do středu nebo doprava. Slouží k tomu
parametr ALIGN značky <TABLE>.
Parametr ALIGN má tři nám již známé hodnoty: LEFT, CENTER a RIGHT.
Tabulka zabere jen část šířky okna
Parametr WIDTH značky <TABLE> může být zadán v procentech:
WIDTH=n%
Parametr stanoví, že tabulka může na šířku zabrat pouze stanovené procento šířky
celého okna prohlížeče. Zároveň můžete tabulku umístit doleva nebo doprava parametrem
ALIGN. Zbytek okna vedle tabulky je volný.
Vaše webová stránka může být řešena jako text, v němž jsou tu a tam obrázky a tabulky.
Text bude tabulku obtékat, jestliže dáte do určitého odstavce (mezi značky <DIV> a </DIV>)
napřed zdrojový kód tabulky s parametry WIDTH v % a ALIGN. Za něj připojíte text, který
má být po straně tabulky.
Buňky přes více sloupců
Někdy je potřebné, aby buňka zabírala více než jeden sloupec. To znamená, aby zabírala
na šířku takové místo, jaké v jiných řádcích zabírají dvě, tři i více buněk.
Dosáhnete toho použitím parametru COLSPAN značky <TD> nebo <TH>. (Anglicky:
COLumn = sloupec, SPANned = přesahující přes.)
COLSPAN=n
Číslo n udává počet sloupců, které rozšířená buňka zabere.
Jako příklad si sestavíme tabulku povolených rychlostí:
<TABLE border=1>
<CAPTION>Povolené rychlosti v ČR</CAPTION>
<TR>
<TH colspan=4>Silnice</TH>
<TH colspan=3>Dálnice</TH>
</TR>
<TR align=center>
<TD colspan=2>Auto</TD>
69
<TD>Moto</TD>
<TD>Kolo</TD>
<TD>Moto</TD>
</TR>
<TR align=center>
<TD>osobní</TD>
<TD>nákladní</TD>
<TD> </TD>
<TD> </TD>
<TD>osobní</TD>
<TD>nákladní</TD>
<TD> </TD>
</TR>
<TR align=center>
<TD>80 km/h</TD>
<TD>70 km/h</TD>
<TD>70 km/h</TD>
<TD>40 km/h</TD>
<TD>130 km/h</TD>
<TD>110 km/h</TD>
<TD>90 km/h</TD>
</TR>
</TABLE>
Musíte si vždy dobře spočítat sloupce.
V tabulce jsem rozdělil dopravní komunikace na silnice a dálnice. Dopravní prostředky
jsem rozdělil na auta, motocykly a jízdní kola. Auta na osobní a nákladní. Po silnici mohou
jezdit auta, motorky i kola, po dálnici jen auta a motorky. Tím máme pro silnici čtyři sloupce,
pro dálnici pouze tři.
(Neručím za správnost a úplnost údajů o povolených rychlostech. Toto je příklad
na HTML tabulky, nikoli instruktáž dopravních předpisů.)
70
Buňky přes více řádků
V některých případech je třeba, aby buňka zabírala více než jeden řádek. Musí pak zabírat na výšku takové místo, jaké v jiných sloupcích zabírají dvě, tři i více buněk.
Dosáhnete toho použitím parametru ROWSPAN značky <TD> nebo <TH>. (Anglicky:
ROW = řada nebo řádek, SPANned = přesahující přes.)
ROWSPAN=n
Číslo n udává počet řádků, které rozšířená buňka zabere.
V našem příkladu vznikly ve třetím řádku prázdné buňky. Pokusme se rozšířit buňky
s názvy „Moto“ a „Kolo“ přes dva řádky. Zde je zdrojový kód druhého a třetího řádku tabulky
– ostatní řádky se nemění:
<TR align=center>
<TD rowspan=2>Moto</TD>
<TD rowspan=2>Kolo</TD>
</TR>
<TR align=center>
<TD>osobní</TD>
<TD>nákladní</TD>
<TD> </TD>
<TD> </TD>
<TD>osobní</TD>
<TD>nákladní</TD>
<TD> </TD>
</TR>
Prohlížeč zobrazí toto:
Ale co to? Prohlížeč „vystrčil“ některé buňky třetího řádku doprava a část tabulky
pro dálnici zobrazil nesprávně! Proč?
Proto, že prohlížeč bere moji úpravu doslovně. Já jsem rozšířil buňky s nápisy „Moto“
a „Kolo“ z druhého do dalšího, třetího řádku. Tím jsem přidal do třetího řádku tři buňky! Třetí
řádek je nyní o tři buňky širší.
71
Opravím to tak, že ze třetího řádku zruším ty buňky, které byly původně prázdné.
Poznám je snadno, obsahují jen nedělitelné mezery  . Právě do těchto tří buněk sahají
rozšířené buňky z druhého řádku. Správný zdrojový kód pro celou tabulku bude:
<TABLE border=1>
<CAPTION>Povolené rychlosti v ČR</CAPTION>
<TR>
<TH colspan=4>Silnice</TH>
<TH colspan=3>Dálnice</TH>
</TR>
<TR align=center>
<TD rowspan=2>Kolo</TD>
</TR>
<TR align=center>
<TD>osobní</TD>
<TD>nákladní</TD>
<TD>osobní</TD>
<TD>nákladní</TD>
</TR>
<TR align=center>
<TD>80 km/h</TD>
<TD>70 km/h</TD>
<TD>70 km/h</TD>
<TD>40 km/h</TD>
<TD>130 km/h</TD>
<TD>110 km/h</TD>
<TD>90 km/h</TD>
</TR>
</TABLE>
72
Teď ukáže prohlížeč tabulku tak, jak jsem si ji představoval:
Zobrazení rámu tabulky
Parametr FRAME značky <TABLE> určuje, které části rámu tabulky budou viditelné.
Parametr má vliv pouze na vnější rám celé tabulky. Ten je složen ze čtyř částí: horní (anglicky:
above), spodní (below), levé a pravé.
(Anglicky: FRAME = rám.)
FRAME=ALL
Standardně je viditelný celý rámeček okolo tabulky. Tabulka je orámována ze všech čtyř
stran. (Anglicky: all = všechno.)
FRAME=VOID
Nebude vidět žádná část rámu. (Anglicky: VOID = zmizelý.)
FRAME=ABOVE
Bude viditelná jenom horní část rámu.
FRAME=BELOW
Bude viditelná jenom spodní část rámu.
FRAME=LHS
Bude viditelná jenom levá část rámu.
FRAME=RHS
Bude viditelná jenom pravá část rámu.
FRAME=HSIDES
Bude viditelná horní a spodní část rámu. (Anglicky: Horizontal SIDES = vodorovné
strany.)
FRAME=VSIDES
Bude viditelná levá a pravá část rámu. (Anglicky: Vertical SIDES = svislé strany.)
Všechny varianty si můžeme ukázat na tabulce „Vlastnosti hořčice“. V jejím zdrojovém kódu budu měnit jen parametr FRAME ve značce <TABLE> a nadpis ve značce
<CAPTION>.
<TABLE BORDER=1 FRAME=ALL>
<CAPTION>FRAME=ALL</CAPTION>
<TR>
<TH> </TH>
<TH>Mletá</TH>
73
<TH>Chuť</TH>
</TR>
<TR>
<TD>jemně</TD>
<TD>štiplavá</TD>
</TR>
<TR>
<TH>Kremžská</TH>
<TD>hrubě</TD>
<TD>nasládlá</TD>
</TR>
</TABLE>
Zobrazení dělicích čar mezi buňkami
Parametr RULES značky <TABLE> určuje, které čáry uvnitř tabulky, oddělující buňky,
budou viditelné. Tento parametr nemá vliv na orámování celé tabulky, jenom na čáry uvnitř
ní.
(Anglicky: RULES = dělicí čáry, linky, také pravidla.)
RULES=ALL
Standardní nastavení, zobrazí vodorovné i svislé vnitřní čáry.
RULES=NONE
Toto nastavení nezobrazí žádné vnitřní čáry. (Anglicky: NONE = žádný.)
RULES=COLS
Zobrazí pouze svislé vnitřní čáry, tj. čáry oddělující sloupce. (Anglicky: COLumnS =
sloupce.)
74
RULES=ROWS
Zobrazí pouze vodorovné vnitřní čáry, tj. čáry oddělující řádky. (Anglicky: ROWS =
řádky.)
Vzhledy tabulek si ukážeme na souhrnném obrázku:
RULES=GROUPS
Pracuje jako RULES=COLS, ale uplatní se jen na skupiny (anglicky: groups) sloupců
se společnými vlastnostmi. Takové sloupce se definují značkou <COLGROUP>, o které bude
řeč dále.
1.8.5 Formátování sloupců
Zarovnání obsahu buněk ve svislém a vodorovném směru a barvu pozadí buněk (vlastnosti dané parametry ALIGN, VALIGN a BGCOLOR) můžete určit pohodlně pro celý řádek,
uvedete-li je ve značce <TR>.
Pro buňky ve sloupcích taková možnost není. Proto je v HTML zavedena nepárová značka <COLGROUP>, která umožňuje tyto parametry zadat pro sloupce. (Anglicky: COLumn
= sloupec, GROUP = skupina.)
Značku <COLGROUP> je nutno uvést před značkou <TR> prvního řádku, pro který
se mají parametry použít. To znamená, že můžete například sloupec obarvit až za záhlavím.
Do značky <COLGROUP> můžete dále vložit parametry WIDTH a TITLE – s oběma
jsme se už setkali.
Značka <COLGROUP> má jeden pomocný parametr:
SPAN=n
Je to počet sloupců, na které se budou vlastnosti vztahovat. Jeho standardní hodnota
(když není uveden) je 1.
V případě, že značka <COLGROUP> obsahuje pouze parametr SPAN, nebudou
se vlastnosti n následujících sloupců měnit. Tyto sloupce se pouze přeskočí.
Pro příklad upravím tabulku o druzích hořčice. Všechny nadpisy, vlevo a nahoře, zůstanou na bílém podkladě. Vlastnosti v ostatních buňkách budou na stříbrném (světle šedém)
podkladě. To znamená, že přidám vlastnost BGCOLOR=„Silver“ až za první řádek tabulky
a budu ji aplikovat jen na sloupce 2 a 3.
Dále stanovím šířku obarvených sloupců na 100 pixelů. Pro představu o skupinách
použiji ještě ve značce <TABLE> parametr RULES=GROUPS.
<TABLE BORDER=1 RULES=GROUPS>
<CAPTION>RULES=GROUPS</CAPTION>
<TR>
<TH><I>HOŘČICE</I></TH>
75
<TH>Mletá</TH>
<TH>Chuť</TH>
</TR>
<COLGROUP SPAN=1>
<COLGROUP BGCOLOR=“Silver“ SPAN=2 WIDTH=100>
<TR>
<TD>jemně</TD>
<TD>štiplavá</TD>
</TR>
<TR>
<TH>Kremžská</TH>
<TD>hrubě</TD>
<TD>nasládlá</TD>
</TR>
<TR>
<TD>jemně</TD>
<TD>ostrá</TD>
</TR>
</TABLE>
Značky <COLGROUP> jsou umístěny před <TR> druhého řádku. První značka jen
určuje, že se první sloupec má přeskočit. Druhá značka <COLGROUP> zavádí požadované
vlastnosti sloupcům 2 a 3, protože SPAN=2.
Protože skupinu tvoří dva sloupce a parametr RULES=GROUPS, je vykreslena jen jedna vnitřní čára: svislá, mezi prvním a druhým sloupcem.
76
1.9 Rámce
Rámce jsou vlastně okénka vytvořená na ploše zobrazené stránky. V každém rámci
je umístěna jiná webová stránka.
Je to podobná situace jako u obrázků vkládaných značkou <IMG>. Tam můžete také
předem stanovit velikost obdélníku, do kterého se obrázek umístí. Místo jednoho obrázku
se však do rámce vkládá celá webová stránka.
Z vložené stránky většinou vedou odkazy. Jsou to často odkazy, které by na jednoduché
stránce způsobily nahrazení celého obsahu okna prohlížeče cílovou stránkou (na kterou vede
odkaz).
U stránky vložené do rámce způsobí takový odkaz nahrazení obsahu rámce. Obsah
ostatních rámců zůstane nezměněn.
To umožňuje autorům například vytvářet webové stránky s částmi, které se přechodem na odkaz mění, a s jinými částmi, které přitom zůstávají stejné. Často se používá vodorovný pruh odkazů v horní části stránky (záhlaví) a svislý pruh odkazů v levé části stránky
(tzv. navigační pole). Oba pruhy slouží k tomu, aby uživatel neustále viděl důležité odkazy
a nemusel se pro jejich použití pokaždé vrátit na domovskou stránku.
Příklad ukazuje stránku společnosti OctoCon. Obsahuje čtyři rámce, které vidíte jako
čtyři barevná pole. V černém poli nahoře zůstává název společnosti. V modrém poli nalevo
zůstávají odkazy na tematické celky WWW serveru. Při přecházení na odkazy uvnitř tohoto
WWW serveru se mění jen obsah největšího, žlutého pole.
1.9.1 Druhy rámců
HTML rozeznává dva základní druhy rámců:
1. Celá stránka je rozdělena na rámce – značka <FRAME>. Na tuto definiční stránku
rámců nelze přidat jinou informaci, text ani obrázky. Všechny informace musí být
na stránkách vložených do rámců. (Tak je vytvořena stránka společnosti OctoCon.)
Tyto rámce byly definovány nejdříve, proto je můžeme nazývat klasické.
2.
77
Na stránce je značkou <IFRAME> vytvořen rámec ve tvaru okénka. Takový rámec
se nazývá plovoucí rámec, protože se zařazuje mezi ostatní informace na stránce,
podobně jako obrázek. Do plovoucího rámce se zobrazují jiné webové stránky.
Kromě plovoucího rámce může stránka obsahovat další informace. Příklad takto
vytvořené stránky je na obrázku:
Všimněte si, že text může obtékat plovoucí rámec. Vedle plovoucího rámce lze umístit
i obrázek.
Dovnitř rámce je zavedena webová stránka obsahující delší text. Celý text se do
rámce nevejde a tak prohlížeč zobrazí svislý posuvník. Kdyby se obsah stránky nevešel do šířky
rámce, přidal by prohlížeč také vodorovný posuvník.
1.9.2 Použití rámců typu 1 - klasických
Klasické rámce musí být definovány v samostatné webové stránce. Stránka s definicí
klasických rámců se používá pouze pro uspořádání dalších, informačních stránek do rámců.
Proto v ní nesmí být použity jiné značky než značky pro definici klasických rámců.
Definici klasických rámců je nutno umístit do záhlaví stránky. Stránka s jejich definicí
tedy má pouze záhlaví – část mezi značkami <HEAD> a </HEAD>:
<HTML>
<HEAD>
<FRAMESET … >
<FRAME … >
<FRAME … >
</FRAMESET>
</HEAD>
</HTML>
Toto je nejjednodušší případ, kdy stránka obsahuje dva rámce.
78
Značky pro definici klasických rámců jsou:
<FRAMESET>, </FRAMESET> – párová značka, která vytváří skupinu obsahující
definice jednotlivých rámců. (Anglicky: FRAME = rámec, SET = skupina, sada.) Skupiny
umožňují autorům webových stránek:
1. rozdělit šířku nebo výšku okna prohlížeče v určitém poměru,
2. definovat skupinu uvnitř jiné skupiny a tím rozdělit okno například na čtyři rámce
uspořádané do dvou sloupců a dvou řádků.
<FRAME> - nepárová značka pro definici jednoho rámce,
<NOFRAMES>, </NOFRAMES> - pomocná párová značka pro informaci uživatelům se staršími prohlížeči, které doposud rámce nezobrazují.
Definice skupiny rámců
Definici skupiny zahajuje značka <FRAMESET> a ukončuje značka </FRAMESET>.
Počáteční značka <FRAMESET> má několik důležitých parametrů:
COLS=„šířka1, šířka2,…,šířka_zbytek“
Parametr určuje, že se stránka rozdělí na rámce tvořící svislé pásy. Parametr obsahuje seznam šířek jednotlivých rámců. Kolik šířek v seznamu použijete, tolik se vytvoří rámců
a přesně tolik značek <FRAME> musíte do skupiny zapsat.
Každou šířku můžete zapsat několika způsoby.
1. Absolutní šířku zapíšete číslem – počtem pixelů. Tím si zajistíte, že příslušný rámec
bude mít vždy zadanou šířku. Využijete toho například v případech, kdy je do tohoto
rámce navržena grafika dané šířky, kterou nelze měnit bez poškození vzhledu.
2. Relativní šířku zapíšete v procentech jako číslo, za nímž je bez mezery znak %.
Rámec zabere tolik procent šířky okna, kolik zadáte. Pokud uživatel změní šířku
okna, rozdělí je prohlížeč znovu tak, aby procentní rozdělení zůstalo stejné.
3. Znak * znamená „zbytek“. Je vhodné uvést ho alespoň pro jeden rámec. Prohlížeč
vždy jeho šířku dopočítá automaticky.
4. Pro poměrné rozdělení můžete místo procent využít znak * jako jednotku. Poměrné
číslo zapíšete před znak *. Například pro rozdělení stránky na tři rámce v poměru
2:3:1 zapište seznam COLS=„2*,3*,*“. První rámec zleva bude dvakrát širší než
třetí a prostřední bude třikrát širší než třetí, ať má uživatel šířku okna prohlížeče
jakoukoli.
ROWS=„výška1, výška2,…,výška_zbytek“
Parametr určuje, že se stránka rozdělí na rámce tvořící vodorovné pásy. Parametr obsahuje seznam výšek jednotlivých rámců. Kolik výšek v seznamu použijete, tolik se vytvoří rámců a přesně tolik značek <FRAME> musíte do skupiny zapsat.
Stejně jako šířku můžete i každou výšku zapsat několika způsoby.
1. Absolutní výšku zapíšete číslem – počtem pixelů. Tím si zajistíte, že příslušný rámec
bude mít vždy zadanou výšku. Využijete toho například v případech, kdy je do tohoto
rámce navržena grafika dané výšky, kterou nelze měnit bez poškození vzhledu.
2. Relativní výšku zapíšete v procentech jako číslo, za nímž je bez mezery znak %.
Rámec zabere tolik procent výšky okna, kolik zadáte. Pokud uživatel změní výšku
okna, rozdělí je prohlížeč znovu tak, aby procentní rozdělení zůstalo stejné.
3. Znak * znamená „zbytek“. Je vhodné uvést ho alespoň pro jeden rámec. Prohlížeč
vždy jeho výšku dopočítá automaticky.
79
4.
Pro poměrné rozdělení můžete místo procent využít znak * jako jednotku. Poměrné
číslo zapíšete před znak *. Například pro rozdělení stránky na dva rámce v poměru
5:3 zapište seznam ROWS=„5*,3*“. Rámce zůstanou v poměru výšek 5:3, ať má
uživatel výšku okna prohlížeče jakoukoli.
Parametry ROWS a COLS jsou velmi důležité. Pro lepší pochopení jejich funkce
uvedu několik příkladů. Aby bylo vidět, která stránka se zavede do kterého rámce, připravil
sem si šest stránek F1.htm až F6.htm – každá z nich vypíše pouze svoji identifikaci. Takto vypadá první z nich:
<HTML>
<HEAD>
<Title>F1</TITLE>
</HEAD>
<BODY>
<H3>Str. 1</H3>
</BODY>
</HTML>
Stránky F1.htm až F6.htm se budou zavádět značkami <FRAME> s parametry NAME
– jméno rámce, SRC – jméno souboru webové stránky, která se do rámce zavede.
Nejjednodušší, ale často používané rozdělení: dva sloupce, pevná šířka vlevo, volný
zbytek.
<FRAMESET COLS=“120,*“>
<FRAME NAME=“Rám1“ SRC=“F1.HTM“>
</FRAMESET>
Poměrné rozdělení do tří sloupců. Zobrazeno při dvou šířkách okna prohlížeče.
<FRAMESET COLS=“17%,50%,*“>
</FRAMESET>
80
Často používané uspořádání ve tvaru T. Horní i levý rámec mají pevnou šířku. Zde už nestačí jedna skupina rámců. Je nutno napřed rozdělit okno na dva rámce vodorovně a spodní
z nich na dva svisle.
<FRAMESET ROWS=“80,*“>
</FRAMESET>
</FRAMESET>
Zdrojový kód lze snadno upravit na podobné uspořádání, kdy je jeden rámec - sloupec
po celé výšce okna vlevo a druhý sloupec je vodorovně rozdělen na dva rámce.
<FRAMESET ROWS=“80,*“>
</FRAMESET>
</FRAMESET>
Proti předchozímu případu jsem zaměnil Rám1 a Rám2, aby se dostaly do odpovídajících míst.
81
Vnější skupina může vytvořit dva sloupce, vnitřní skupiny je rozdělí na různých
místech:
<FRAMESET COLS=“20%,*“>
<FRAMESET ROWS=“33%,*“>
</FRAMESET>
</FRAMESET>
</FRAMESET>
82
Vnější skupina může vytvořit dva řádky, vnitřní skupiny je svisle rozdělí na různých
místech:
</FRAMESET>
</FRAMESET>
</FRAMESET>
Jedna značka <FRAMESET> může mít oba parametry, ROWS i COLS. Jsou-li uvedeny oba, bude stránka rozdělena mřížkou. Následující stránka má rámce uspořádané do tří
sloupců a dvou řádků, celkem 6 rámců:
<FRAMESET COLS=“30%,20%,*“ ROWS=“60%,*“>
</FRAMESET>
83
Vidíte, že prostředky jazyka HTML dovolují rozdělit okno prohlížeče na pravoúhlé
rámce libovolným způsobem.
FRAMEBORDER=0
Často budete chtít složit webovou stránku z více rámců tak, aby mezi rámci nebyly
viditelné hranice, protože grafika stránek v jednotlivých rámech na sebe navazuje. V takovém
případě použijete parametr FRAMEBORDER=0.
FRAMEBORDER=1
Toto je standardní hodnota. Předěly mezi rámci jsou viditelné.
FRAMESPACING=n
Parametr určuje šířku předělu mezi rámci. Standardně n=2. Parametr se uplatní jen
při zadání parametru FRAMEBORDER=1.
BORDERCOLOR=barva
Tento parametr určuje barvu předělu mezi všemi rámci v dané skupině. Barvu předělu
lze ve skupinách podřízených měnit parametrem BORDERCOLOR.
Definice rámce
Každý rámec ve skupině musí být definován nepárovou značkou <FRAME>. Značka
<FRAME> má tyto parametry:
NAME=“jméno_rámce“
Tímto parametrem pojmenujete rámec. Jména rámců pak použijete pro směrování webových stránek do rámců. To znamená, že můžete v odkazu (značka <A>) určit parametrem
TARGET=„jméno_rámce“, do kterého rámce se odkazovaná stránka zavede.
SRC=“URL“
Parametr určuje URL webové stránky, která se do tohoto rámce zavede hned po načtení
stránky určující rámce. URL může být zadán absolutně nebo relativně.
FRAMEBORDER=0
FRAMEBORDER=1
Určuje, zda u tohoto konkrétního rámce bude vykreslen okraj. Při FRAMEBORDER=0
nebude okraj rámce vykreslen, při FRAMEBORDER=1 bude vykreslen.
Parametr se uplatní, jen když je v nadřazené značce <FRAMESET> okraj povolen parametrem FRAMEBORDER=1 (nebo nezadaným).
Chcete-li, aby některé rámce měly svůj okraj a ostatní těsně navazovaly bez předělu, musíte použít ve značce <FRAMESET> parametry FRAMEBORDER=1 a FRAMESPACING=0.
Pak ve značce <FRAME> toho rámce, kde nechcete okraj, použijte FRAMEBORDER=0.
84
Příklad:
<FRAMESET ROWS=“30%,*“ FRAMEBORDER=1 FRAMESPACING=0>
<FRAME NAME=“Rám1“ SRC=“F1.HTM“ FRAMEBORDER=1>
</FRAMESET>
</FRAMESET>
</FRAMESET>
Jestliže povolím předěl (pro zvýraznění dám silný: FRAMESPACING=8 ve značce
<FRAMESET> v prvním řádku příkladu), uvidíte, kudy prochází:
Zde ovšem už rámce těsně nenavazují.
NORESIZE
Jsou-li předěly mezi rámci viditelné, dají se přesouvat myší a tím lze měnit jejich rozložení předepsané autorem. Parametr NORESIZE (bez hodnoty) určuje, že rozměry rámce
nelze měnit. Všechny předěly mezi tímto rámem a ostatními rámci jsou nepohyblivé.
SCROLLING=AUTO
Parametr určuje, že pravý svislý posuvník a spodní vodorovný posuvník zobrazí prohlížeč v tomto rámci, jen když budou nutné.
85
To znamená:
Ü nevejde-li se stránka (daná parametrem SRC) do rámce na výšku, zobrazí se svislý
posuvník,
Ü nevejde-li se stránka do rámce na šířku, zobrazí se vodorovný posuvník.
SCROLLING=NO
Žádný posuvník se nezobrazí, ani když se stránka do rámce nevejde. Použijte pro rámce
pevné velikosti s grafikou, u nichž by posuvníky rušily vzhled.
SCROLLING=YES
Vždy se zobrazí oba posuvníky. Použijte u rámců, kde je předem zřejmé, že se do nich
většina stránek nevejde celá. Též u rámců, kde je požadován jednotný vzhled.
MARGINHEIGHT=n
Parametr udává výšku volného okraje uvnitř rámce nad vloženou stránkou a pod ní.
Číslo n je počet pixelů.
MARGINWIDTH=n
Parametr udává šířku volného okraje uvnitř rámce po obou stranách vložené stránky.
Číslo n je počet pixelů.
Na obrázku má pouze jediný rámec ze tří definovány parametry MARGINHEIGHT=150
a MARGINWIDTH=100. Je to rámec obsahující stránku 3.
Umístění odkazované stránky do rámce
Rámec, který definujete, pojmenujete a na počátku naplníte stránkou:
<FRAME SRC=“odkaz_stranka.htm“ NAME=“Ram1“>
můžete odkázat v kterékoli značce <A>:
<A HREF=“odkaz_stranka_1.htm“ TARGET=“Ram1“>Odkaz1</A>
Jakmile uživatel klepne na odkaz, vymění se obsah rámce jménem „Ram1“. Místo stránky, která v něm právě je, se do něj zavede stránka „odkaz_stranka_1.htm“.
Kromě jmen rámců můžete v parametru TARGET značky <A> uvést tyto hodnoty –
všechny začínají znakem _ (podtržítko), aby se lišily od jmen rámců:
86
TARGET=_BLANK
Stránka se zavede do nového okna. Prohlížeč otevře nové okno, původní okno zůstane
na obrazovce. (Anglicky: blank = čistý, prázdný.)
TARGET=_SELF
Stránka se zavede do stejného okna nebo rámce, kde je odkaz <A> umístěn. Toto je nejčastější případ, „výměna na místě“. (Anglicky: self = on sám, tentýž.)
TARGET=_TOP
Rozdělení na rámce se zruší a stránka se zavede do celého okna prohlížeče. Pokud rámce
nejsou definovány, je funkce _TOP stejná jako _SELF. (Anglicky: top = vrchol.)
TARGET=_PARENT
Jestliže okno s odkazem _PARENT je částí struktury <FRAMESET>, je ta struktura „rodičovská“. (Anglicky: parent = rodič.) Stránka se zavede na místo „rodičovské“
struktury. Není-li okno s odkazem _PARENT částí struktury <FRAMESET>, je funkce stejná
jako _SELF.
Informace pro uživatele starších a jednoduchých prohlížečů
Nejstarší prohlížeče neznaly rámce. Pokud je některý uživatel dosud používá, je potřeba, aby se dozvěděl, že stránka obsahuje rámce, případně aby byl automaticky přesměrován
na jednodušší verzi webové stránky. Stránka definující rámce k tomu používá párové značky:
<NOFRAMES>, </NOFRAMES>
Tyto značky lze umístit za definici rámců (mezi poslední značku </FRAMESET>
a </HEAD>). Mezi ně pak dejte text informující uživatele, že jeho prohlížeč nezná rámce:
<FRAMESET ROWS=“*,3*“>
……………
</FRAMESET>
<NOFRAMES>
Pozor, váš prohlížeč nemůže zobrazit rámce!
</NOFRAMES>
Využívá se zde toho, že v záhlaví webové stránky (v sekci <HEAD>), která definuje rámce, jsou pouze značky a jediný text je pouze mezi značkami <NOFRAMES>
a </NOFRAMES>.
Prohlížeč, který rámce „umí“, pozná značky NOFRAMES a text mezi nimi nevypíše
– jako by to byla poznámka.
Prohlížeč, který „neumí“ rámce, pozná jenom, že v záhlaví stránky jsou nějaké
značky, ale „nerozumí“ jim. Proto na ně nereaguje. Vypíše ale text, který najde mimo značky,
a to je právě naše upozornění.
1.9.3 Použití rámců typu 2 – plovoucích
Plovoucí rámce se definují párovými značkami <IFRAME>, </IFRAME>. Text
a značky, které napíšete mezi značky <IFRAME> a </IFRAME>, se v nových prohlížečích
nezobrazí. Jsou totiž určeny pro staré typy prohlížečů. Je to stejné jako u značek
<NOFRAMES>, </NOFRAMES>: starý typ prohlížeče značky přeskočí a zpracuje část
zdroje mezi nimi.
87
Plovoucí rámec není zcela přesný překlad. Anglicky se nazývá inline frame, vložený
rámec. To znamená, že rámec je umístěn mezi text, obrázky a případné další objekty na webovou stránku. Není třeba dělat speciální stránku jako u rámců typu 1.
Plovoucí rámce mají pevnou velikost určenou autorem stránky. Uživatel nemůže jejich
velikost měnit.
Značka <IFRAME> může obsahovat řadu parametrů. Některé z nich se zapisují stejně
a mají stejný význam jako u značek, o nichž už byla řeč.
Tyto parametry určují svislé zarovnání rámce vzhledem k textu:
ALIGN=TOP
Srovná horní okraj rámce s horní úrovní textu
ALIGN=TEXTTOP
Srovná horní okraj rámce s horní úrovní textu
ALIGN=MIDDLE
Srovná střední úroveň rámce se základní linkou textu
ALIGN=ABSMIDDLE
Srovná střední úroveň rámce se střední úrovní textu
ALIGN=BOTTOM
Srovná spodní okraj rámce se spodní úrovní textu, smyčky přesahují dolů
ALIGN=ABSBOTTOM
Srovná spodní okraj rámce se spodní úrovní textu
ALIGN=BASELINE
Srovná spodní okraj rámce se základní linkou textu
Tyto parametry určují vodorovné umístění rámce v textu:
ALIGN=LEFT
Rámec je vlevo, text ho obtéká zprava
ALIGN=RIGHT
Rámec je vpravo, text ho obtéká zleva
(Parametry ALIGN se používají stejně jako ve značce <IMG>.)
Další parametry mají vliv na úpravu rámce:
FRAMEBORDER=0
Rámec nebude mít okraj.
FRAMEBORDER=1
Rámec bude mít jednoduchý stínovaný okraj.
HEIGHT=n
Výška rámce v počtu pixelů. Je pevná – uživatel ji nemůže změnit.
WIDTH=n
Šířka rámce v počtu pixelů. Je pevná – uživatel ji nemůže změnit.
88
MARGINHEIGHT=n
Výška vodorovného okraje uvnitř rámce, stejně jako u rámců typu 1.
MARGINWIDTH=n
Šířka svislého okraje uvnitř rámce, stejně jako u rámců typu 1.
SCROLLING=AUTO
Svislý a vodorovný posuvník vykreslí prohlížeč podle potřeby. Jestliže stránka, zobrazená v rámci, obsahuje pouze text (kromě <PRE>), je potřebný jen svislý posuvník, protože
text se poskládá do odstavců na šířku rámce.
SCROLLING=NO
Prohlížeč nezobrazí žádné posuvníky, ani když obsah stránky, zobrazené v rámci, přesahuje rozměry rámce.
SCROLLING=YES
Prohlížeč vždy zobrazí oba posuvníky.
NAME=“jméno_rámce“
Parametr NAME pojmenuje rámec a umožní tak do něj směrovat odkazy parametrem
TARGET značky <A>.
SRC=“URL“
Parametr určuje stránku, která se do rámce zavede hned při zobrazení stránky s rámem.
URL může být absolutní i relativní. (Anglicky: SouRCe = zdroj.)
TITLE=“text“
Text, který se zobrazí, nechá-li uživatel chvíli ukazatel myši v rámci.
1.10 Grafická podoba stránek
Psychologie nás učí, že existují jistá pravidla pro to, jak člověk vnímá. Pohlédnete-li
na obrázek, ať v galerii nebo na obrazovce počítače, prochází ho vaše oko určitým způsobem, který je stále skoro stejný. Autoři by měli navrhovat webové stránky tak, aby s využitím
těchto poznatků předložili obsah stránky uživateli ke snadnému vnímání a rychlému rozpoznání obsahu.
Předpokládám rovněž, že aspoň část těchto pravidel, zejména o rozložení údajů na
stránce, bude vyučována v kursu „Typografie“, součásti projektu Leonardo.
1.10.1 Pravidla návrhu stránek
1.10.1.1 Přehlednost
Na stránce nesmí být příliš mnoho informací. Je zjištěno, že člověk obsáhne a zapamatuje si najednou až sedm nových jednoduchých faktů, ale ne více. Průměrná webová stránka
přináší nových faktů mnohem víc, takže je problém s jejich předložením uživateli.
Textovou stránku vnímáme zhruba shora a zleva dolů a doprava. Nejdůležitější údaje
jako nadpis by proto měly být u takových stránek umístěny vlevo nahoře. Toho lze dosáhnout
tak, že text rozdělíte na témata o přibližném rozsahu jedné stránky. Na každé stránce pak
bude jedno téma, jak ukazuje obrázek – část popisu Visual Basic:
89
Nezáleží už příliš na tom, zda část tématu bude „za rohem“ (dole na stránce, již mimo
obrazovku) a bude nutno použít svislý posuvník. Tento pohyb je jednosměrný a často jednorázový (na jeden klik – jedno klepnutí klávesou myši), není-li stránka příliš dlouhá.
Naopak je vhodné zbavit se textů pevné a zároveň velké šířky, protože na ty by uživatel musel stále používat vodorovný posuvník. Prohlížeč text pevné šířky nezalomí a jeho část
se může snadno dostat doprava mimo okno prohlížeče, popř. mimo obrazovku. Totéž platí
pro tabulku, kde je definována šířka buněk.
Když má stránka viditelné rámce, měl by být jeden z nich největší, a to ten, který obsahuje hlavní informace. Jeho velikost napovídá i důležitost. Ostatní rámce bývají pomocné,
jako sloupec pro navigaci nebo komentářový sloupek v novinách. Oko se nejdříve zachytí na
největším rámci.
1.10.1.2 Snadná orientace
Jakmile obsahuje stránka obrázky, je už situace jiná. Záleží na tom, zda je to množství
malých obrázků, nebo z nich jeden vyniká tím, že je větší. Mnoho malých obrázků se podobá
ornamentu a oko se nemá příliš kde zachytit, proto takové řešení není vhodné.
Bohužel u internetových novin, vyhledávačů jako Seznam i některých firemních stránek
je právě potřebné dostat na stránku, zvláště na úvodní domovskou stránku, co nejvíce informací. Autoři to řeší různě, zejména:
Ü optickým rozdělením stránky na pole,
Ü podložením různých částí různými barvami,
Ü připojením textu k upoutávacímu obrázku,
Ü zmenšením písma (noviny),
Ü uvedením pouze titulků a nadpisů s tím, že informaci přesunuli na jinou stránku
(noviny a vyhledávače – úvodní stránka).
Další problémy s orientací mohou být v navigaci. Řada webových sídel (web sites)
je řešena jako sestava klasických rámců tak, že jedna navigační lišta je v horním vodorovném
90
rámci, druhá navigace, obvykle jako řada tlačítek, v levém svislém rámci. Přitom je málokdy
zřejmé, která z nich je vyššího řádu (např. přepíná mezi lokalitami ve světě, nebo mezi sídly
jako prezentace firmy, produkty, ceník, podpora) a která slouží k výběru stránky uvnitř sídla.
Nacházím dokonce stránky, kde na obou lištách jsou některé odkazy stejné.
1.10.1.3 Obrázky a animace
Budete-li chtít někdy obrázky vytvářet, nebo aspoň sbírat, je dobře vědět něco o jejich
tvarech (formátech).
Obrázky se dnes na web serverech vyskytují ponejvíce ve dvou komprimovaných tvarech, vyjádřených příponami .GIF a .JPEG; někdy můžete též vidět tvar .PNG. Komprimace
(neboli komprese) slouží k tomu, aby soubor s obrázkem byl co nejmenší, a proto se přenesl
k uživateli rychle. Metody komprimace jsou různé. U obrázků se používají dvě velké skupiny:
komprese neztrátová a komprese ztrátová.
Po rozbalení obrázku s neztrátovou kompresí dostanete zcela přesně původní obrázek.
Taková komprese se používá také pro přenos programů a dat, kde se nesmí změnit ani bit.
Po rozbalení obrázku se ztrátovou kompresí dostanete původní obrázek jen přibližně,
na stupni komprese záleží, jak hodně nebo málo je obrázek zkreslen. Všeobecně je tato komprese vhodná pro fotografie a nevhodná pro obrázky kreslené, obsahující tenké čáry, případně
pro technické výkresy a vůbec obrázky s ostrými obrysy.
GIF
Obrázky jsou komprimované neztrátovou kompresí a mohou buď obsahovat až 256
barev, nebo mohou být jednobarevné, například černobílé. Barvy nejsou absolutní. To
znamená, že barva s číslem 0 pouze znamená „barvu, kterou má uživatel v paletě pod inde-xem 0“. Samozřejmě, většina palet v rozlišení 256 má pod nulou barvu černou. Index dále
umožní těm uživatelům, kteří mají grafickou kartu s vyšším rozlišením než 256 barev, vybrat
do palety barvy libovolné. Nelze ovšem pod takovou paletou navrhovat obrázek, neboť nevíte, kolik barev má počítač uživatele. Musíte předpokládat, že obrázek uvidí i ti, kteří si mohou
dopřát pouze 256 barev.
Další příjemnou vlastností obrázků GIF je schopnost průhlednosti (transparence).
Jednu z 256 indexovaných barev můžete přiřadit jako „průhlednou“, takže na plochách
obrázku, kde bude tato „barva“, bude vykukovat to, co je právě pod obrázkem, jeho pozadí.
Schopnost prokládání: pro tvar GIF lze zvolit prokládané zobrazení, kdy se obrázek ukazuje již při svém zavádění, napřed v hrubých rysech, pak se zjemňuje. Takové zobrazení se doporučuje pro obrázky GIF větší než 5×5 bodů (pixelů).
A nakonec ještě animace: tvar GIF dovoluje uložit v jednom souboru více obrázků,
s možností uložit animační fáze a stanovit, jak rychle se budou střídat.
JPEG
Podstatné již bylo řečeno: JPEG je nejvhodnější pro kompresi fotografií, případně
obrázků většího formátu bez ostrých přechodů, hran, čar a jemných detailů. Například
mpresionistické obrazy těmto požadavkům dobře vyhovují.
PNG
Podobně jako GIF používá bezeztrátovou kompresi, ale kromě obrázků s 256 barvami
umožňuje uložit obrázky až se 16,7 miliony barev (true colors – pravé barvy). Také postupné
vykreslování při prokládaném zobrazení je řešeno jinak, s efektem jakoby zaostření z „rozma-
91
zané“ mozaikové struktury.
Zobrazení 216 barev na systémech s vysokým rozlišením
Je to doporučení pro autory obrázků. Z možných barev (popis barev viz příloha) víte,
že pravé barvy (16,7 mil.) se zapisují šesti hexadecimálními číslicemi, které tvoří tři dvojice.
Každá dvojice vyjadřuje intenzitu jedné z barev (zleva) červené, zelené a modré. Pro intenzitu
jedné barvy lze uvést 256 hodnot 00..FF.
Jestliže se autor obrázku omezí u každé barvy na intenzity 00, 33, 66, 99, CC a FF, pak
dostane i v systému pravých barev pouze 216 různých barevných kombinací (6 × 6 × 6).
U nich je zaručeno, že prohlížeč (Netscape nebo MS IE) barvu ukáže správně. U ostatních
barev to zaručeno není, i když jsou přípustné. U systémů s 256 barvami záleží na mapování
barev – indexů do uživatelovy palety, jak už bylo uvedeno.
Animace
Největší šanci upoutat oko uživatele má něco, co se pohybuje. Na webových stránkách
jsou to dnes zejména:
Ü animované reklamy,
Ü jiné animované obrázky,
Ü pohyblivé texty.
Animované obrázky lze pořídit celkem snadno, například jako animovaný .GIF (jejich
návrh je už složitější a potřebuje grafický návrhářský systém).
Pro animované texty je třeba využít vlastností HTML 4. Mohou to být texty vodorovně
posouvané jako světelné noviny, nebo lze titulky střídat podobně jako při promítání diapozitivů. Je rovněž možno zapojit prezentace vyrobené například v programu MS PowerPoint.
1.10.2 Několik příkladů
Všechny příklady jsou domovské stránky různých organizací. Dva poznatky jen tak
na úvod:
1. Používání klasických rámců je zjevně na ústupu, aspoň pro domovské stránky.
Všechny až na jednu byly bez rámců a žádoucího rozvržení se dosahovalo tabulkami
<TABLE>.
2. Všechny stránky používaly styly CSS. Nejméně v jednom případě byl soubor stylů
jiný pro prohlížeč Internet Explorer a jiný pro Netscape Navigator.
92
Pěkný příklad optického rozdělení stránky na pole má Microsoft:
Oko postupuje od obrázků ve střední části k textům vpravo od nich. Největší obrázek je
nahoře. Všimněte si také řešení důležitosti odkazů: dvě vodorovné aktivní lišty jsou nahoře
(jedna by byla příliš dlouhá) a podrobné odkazy jsou v levém sloupci.
93
Další pěknou, i když trochu zvláštní firemní domovskou stránku má Hewlett-Packard:
Dva levé sloupce obsahují spíše novinky a upoutávky, též hledání. Dva pravé sloupce obsahují odkazy na části webového sídla (web site), přitom šest nejdůležitějších je řešeno jako
velká barevná pole. Horní pruh obsahuje pouze výběr země, kde má HP pobočku, a kontakt
(adresu firmy). Toto řešení je zvláštní tím, že nenabízí jeden obrázek k upoutání oka, větší než
ostatní, umístěný v nejvýhodnějším místě. Místo toho jsou zde dvě „strany“ a uživatel se musí
zaměřit doleva nebo doprava od firemní značky (loga).
94
Z domácích firemních stránek můžeme uvést třeba AutoCont:
Zde jsou prakticky jen odkazy, jednak v klasické vodorovné horní liště, jednak ve čtyřech
nabídkách ve střední části obrazu. Dole je seznam novinek.
Oko by se zde nemělo příliš čeho zachytit. Obrázek vpravo nahoře je jen ilustrativní.
Avšak na tom správném místě, vlevo nahoře, je AUTOCONT INTERNET SHOP, kde se střídají nabídky jako na světelných novinách pohybem zdola nahoru. Tím je oko uživatele rychle
upoutáno.
Mezi domovskými stránkami firem jsem našel i příklad nepříliš dobrého řešení:
95
Tato jediná stránka je řešena pomocí tří klasických rámců.
Všimněte si, že položky „Neplatiči“ a „WeBLINE“ jsou jak na vodorovné, tak na
svislé liště. Nejsou zde výrazné odkazy na prodávané produkty, musíte na nenápadný
odkaz „ShowRoom“ na horní liště, ještě k tomu anglický termín show room (předváděcí
místnost) neřekne nic zájemcům, kteří anglicky neumějí.
Ovšem hlavní ostuda je v největším poli. Text je prostě anglické hlášení chyby na
serveru. Firma tím ukazuje malou důvěryhodnost, protože tento nápis je na jejich stránce
již dlouho. Zároveň přichází o možnost zaujmout uživatele čerstvou nabídkou zboží hned
na domovské stránce.
96
Dále si ukážeme jednu domovskou stránku vyhledávače a dvě domovské stránky novin.
Toto je velmi hustě obsazená domovská stránka. Je víc „přeplácaná“ než domovské
stránky jiných vyhledávačů resp. portálů. Je to patrně způsobeno tím, že Atlas funguje částečně jako noviny (ve spodní části). Zde se skutečně není čeho chytit (snad kromě reklamy uprostřed) a uživatel musí propátrat titulky v drobném písmu sám. Relativně nejvíce zachycuje
oko nabídka služeb Atlasu vlevo nahoře a přihlášení „Vítejte v síti“ vpravo nahoře.
Jiné portály řeší tento nedostatek pohyblivým textem nebo obrázkem.
97
Obdobný problém mají noviny. Zde je domovská stránka profesionálních novin iDNES
(Mladá fronta dnes):
Pohyblivý text je umístěn ve spodní části, v liště „PRÁVĚ SE STALO“. Další je hned
pod ním, v liště „RADIO iDNES PRÁVĚ VYSÍLÁ“. (iDNES je deník, a tak mu musíme
odpustit, že místo amerického města Houston má česky znějící „Hostoun“.) Stránka je ve
skutečnosti na výšku mnohem delší, ale běžící titulky musí být v části, která se ještě zobrazí
na běžné obrazovce.
Obraz je kvůli přehlednosti rozdělen na tři sloupce a ty ještě na pole s obrázky (vzpomeňte na domovskou stránku firmy Microsoft). Největší obrázek je u (zřejmě) nejsenzačnější
zprávy, která je také umístěna vlevo nahoře, aby upoutala oko co nejdříve.
98
Poslední příklad tvoří amatérské noviny. Dělají je s nadšením pracovníci hvězdárny
v Brně.
Vzhledově jsou „chudší“ než profesionální noviny, ale získávají tím přehlednost. Aktuální
zprávy jsou v prostředním sloupci, který je také nejširší. Články jsou zde doprovázeny fotografiemi. V další části domovské stránky už jsou pouze krátké informace s odkazy na celé články.
Pravý sloupec obsahuje aktuální odkazy na jiná webová sídla, vždy s krátkým popisem. Levý
sloupec obsahuje trvalé odkazy, nahoře na jednotlivé rubriky novin, níže na přílohy.
A tečka za příklady domovských stránek: Stránky slouží různým účelům. Zhruba jsem
je rozdělil na firemní, portálové a novinové. Každý typ má své požadavky, a proto je každý řešen trochu jinak. Nezapomeňte, že domovské stránky jsou vizitkou majitele!
1.11 Tvorba formulářových stránek
Formulář je speciální webová stránka. Slouží k tomu, aby uživatel mohl zadat nějaké parametry, které prohlížeč předá WWW serveru. Může to být třeba jen hledané slovo nebo celý
dotazník. K zadání údajů používá formulář standardní ovládací prvky Windows, které znáte
například z dialogových oken: textová pole, seznamy k výběru, volby a možnosti, tlačítka.
Představte si formulář třeba jako dotaz k vyhledání.
Formulář vždy potřebuje podporu na straně serveru. Je to např. spuštěný speciální
program – filtr, nebo stránka se skriptem pro server (přípony ASP, PHP). Server dostane obsah formuláře, vyplněný uživatelem, jako parametry. Na základě jejich hodnot vytvoří speciální webovou stránku a odešle ji zpět uživateli u prohlížeče.
Představte si odpověď serveru jako seznam nalezených dokumentů s odkazy URL.
Formulář nemusí zabírat celou webovou stránku. Proto je ohraničen párovými značkami <FORM>, </FORM>. Vy, autor webové stránky, mezi ně zařadíte všechny potřebné ovládací prvky, textová pole atd. Formulář je třeba umístit do značek <BODY>, </BODY> nebo
do značek odstavce.
99
1.11.1 Značka <FORM>
Značka <FORM> má tyto parametry:
ACTION=“URL“
Tady se právě zadává URL stránky se skriptem nebo jiným prostředkem serveru, který dokáže formulář zpracovat. To znamená, že ho autor speciálně tak napsal, aby zpracoval
právě tento formulář. Obyčejně je tedy autor formuláře i skriptu pro server stejný: jste to vy.
Jestliže formulář nebo webovou stránku s formulářem zpracuje například ASP skript
„testform“ (skript pro server) umístěný na serveru lektor.frpsp.cz v adresáři „priklad“, bude
URL vypadat asi takto:
http://lektor.frpsp.cz/priklad/testform.asp
METHOD=GET
METHOD=POST
Zde určíte metodu přenosu formuláře protokolem HTTP. Pro formuláře se všeobecně
používá metoda POST.
1.11.2 Speciální použití formuláře
<FORM ACTION=“URL“ ENCTYPE=“multipart/form-data“></FORM>
Tímto způsobem dokážete přenést libovolný soubor z klientského počítače na server
(upload). Soubor vybere uživatel pomocí speciálního ovládacího prvku. Ovšem zde je také
nezbytná podpora skriptu pro server.
1.12 Zařazení ovládacích prvků
Ovládací prvky vytvoříte použitím tří značek. Tabulka dává přehled, které značky je
třeba použít pro které ovládací prvky.
Textové pole
Jednořádkové
Seznam k výběru (menu)
Víceřádkové
<INPUT TYPE={TEXT|PASSWORD}> <TEXTAREA>
Lze zvolit jednu
položku
Lze zvolit více
položek
<SELECT>
<SELECT>
Všechny ostatní ovládací prvky lze vytvořit značkou <INPUT>:
Volby (radio buttons)
Možnosti (check boxes)
Tlačítka (buttons)
Obrázek, mapa
Skrytá pole
Výběr souborů pro upload
<INPUT TYPE=RADIO>
<INPUT TYPE=CHECKBOX>
<INPUT TYPE={SUBMIT|RESET|BUTTON}>
<INPUT TYPE=IMAGE>
<INPUT TYPE=HIDDEN>
<INPUT TYPE=FILE>
Každý ovládací prvek by měl mít své jméno, které jej označuje jako objekt. Pomocí těchto
jmen se můžete na obsah (hodnotu, value) a jiné atributy prvků dostat ze skriptů pro klientský
počítač (JavaScript) i ze skriptů pro server (ASP à VBScript).
100
Ovládací prvek pojmenujete parametrem NAME; pokud parametr nepoužijete,
dokáže pouze některý vývojový nástroj (InterDev) pojmenovat prvek sám. Nepojmenovaný
prvek není ovladatelný!
1.12.1 Vstupní pole
Značka <INPUT> není párová.
<INPUT TYPE=TEXT NAME=název SIZE=počet MAXLENGTH=znaků
VALUE=“text“>
Toto je standardní pole zadávané značkou INPUT, a proto není třeba psát parametr
TYPE=TEXT. Význam parametrů:
NAME=název
Jméno textového pole jako objektu,
SIZE=počet
Velikost viditelné části pole, neboli šířka pole, v počtu znaků; pozor, obsahem pole může
být jak více, tak méně znaků, než udává SIZE; to určuje pouze, kolik znaků bude vidět,
MAXLENGTH=znaků
Počet znaků, které půjdou do pole zapsat; může to být více i méně znaků, než udává parametr SIZE,
VALUE=“text“
Pokud chcete, aby pole mělo předem zadaný text, napište ho sem.
<INPUT TYPE=PASSWORD NAME=název SIZE=počet MAXLENGTH=znaků>
Touto značkou zadáte pole pro heslo. Všechny použité parametry mají stejný význam
jako u typu TEXT. Avšak když uživatel píše do tohoto pole, jeho text není viditelný. Každý
znak je nahrazován hvězdičkou (*), aby heslo nebylo viditelné na obrazovce.
Pozor, to neznamená, že je heslo nějak šifrováno! Program ho dostane jako prostý text.
1.12.2 Tlačítka
<INPUT TYPE=SUBMIT NAME=název VALUE=„popis“>
<INPUT TYPE=RESET NAME=název VALUE=„popis“>
<INPUT TYPE=BUTTON NAME=název VALUE=„popis“ ONCLICK=„akce“>
Tlačítka typu SUBMIT ukončují práci uživatele s formulářem a odešlou jej ke zpracování serveru. Čím jej server zpracuje, to je uvedeno ve značce formuláře <FORM>.
Tlačítka typu RESET uvedou formulář do původního stavu (jako když byl ze serveru zaveden). Všechny změny, které uživatel udělal, jako zapsané texty, výběry ze seznamů, volby
a možnosti, jsou ztraceny. Formulář není odeslán serveru, uživatel ho může vyplnit znovu
a jinak.
Tlačítka typu BUTTON jsou rozšířením HTML. Dávají možnost zpracovat jeden formulář několika způsoby. Použijete-li jako „akci“ například „location=‘URL‘„, pak po stisknutí tlačítka server ke zpracování použije prostředek s URL uvedeným zde, v této značce
<INPUT>, a nikoli s URL uvedeným ve značce <FORM>.
Parametr VALUE určuje text, který bude na tlačítku napsán. Velikost tlačítka se přizpůsobí délce textu.
101
1.12.3 Obrázky - mapy
Tento druh ovládacích prvků umožňuje odeslat polohu danou souřadnicemi (x,y) uvnitř
obrázku. Obrázek často představuje mapu, například mapu přípojných míst služby Internet
2000.
<INPUT TYPE=IMAGE SRC=“URL“ NAME=název ALIGN=zarovnání
[VALUE=“text“]>
Obrázek je uložen v souboru, jehož URL je zadáno parametrem SRC. Hodnoty zarovnání jsou stejné jako u značky <IMAGE>: LEFT, RIGHT, TOP, MIDDLE a BOTTOM, tedy doleva, doprava, nahoru, do středu a dolů.
Klepnutí na obrázek účinkuje stejně jako odesílací tlačítko (TYPE=SUBMIT). Formulář
se odešle serveru. Poloha, kam jste na mapu nebo obrázek klepli, se předá jako dva parametry s hodnotami souřadnice x a y. Jestliže název tohoto prvku je třeba „mapka“, pak vzniknou
dva parametry „mapka.x“ s hodnotou souřadnice x a „mapka.y“ s hodnotou souřadnice y.
Tak může server zjistit, kterou polohu jste zvolili, když jste klepli na obrázek.
Prohlížeč nemusí obrázek vždy ukázat. Buď (je tak starý, že) to neumí, nebo je zobrazení
zakázáno nastavením prohlížeče. Pro tyto případy můžete použít parametr VALUE=„text“,
kde napíšete vhodný text na vysvětlení, například že na tomto místě je mapka.
1.12.4 Volby
Tento ovládací prvek tvoří skupina „tlačítek“ (radio buttons), z nichž se dá zvolit („stisknout“) právě jedno (je-li už stisknuto jiné, pak „vyskočí“).
<INPUT TYPE=RADIO NAME=název VALUE=„hodnota“ [CHECKED]>
Skupina je určena tím, že každá volba skupiny má stejný název. To, čím se jednotlivé
volby liší, je dáno parametrem hodnota a popisem, jak vidíte na příkladu. Jedna volba má mít
parametr CHECKED; ta je zvolena, a je také tak zobrazena.
<INPUT TYPE=RADIO NAME=vek VALUE=„?“ CHECKED>neurčen<BR>
<INPUT TYPE=RADIO NAME=vek VALUE=„0-12“>0-12 let<BR>
<INPUT TYPE=RADIO NAME=vek VALUE=„36-“>36 a více let<BR>
Tato skupina slouží ke zvolení věku uživatele nebo jiné osoby. Tlačítka jsou řazena
pod sebe do sloupce (značky <BR>).
VALUE=“hodnota“
Tento parametr určuje hodnotu, kterou nabude ovládací prvek, když bude formulář odeslán s vybranou příslušnou volbou. Takže jestliže uživatel v našem příkladu zvolí „26-35 let“
a pak odešle formulář, bude hodnota prvku „vek“poslaná serveru: „26-35“.
Popis viditelný uživateli je až za značkou <INPUT> a je to běžný text, není součástí značky. Uživatel vidí jen popis, ne hodnoty VALUE. Proto mohou být různé. Například
v tomto příkladu by bylo možné dát do parametrů VALUE pouze kódy věku, třeba: pro „neurčen“ 0, pro „0-12 let“ 1, pro „13-17 let“ 2, atd. Přitom popis viditelný uživateli by se nezměnil:
„neurčen“, „0-12 let“, „13-17 let“, atd.
102
1.12.5 Možnosti
Tento ovládací prvek je čtvereček, který může být prázdný (možnost nevybrána) nebo
v něm může být známá „fajfka“, případně křížek (možnost vybrána).
<INPUT TYPE=CHECKBOX NAME=název VALUE=“hodnota“ [CHECKED]>
Na rozdíl od prvku „volby“ (TYPE=RADIO) netvoří prvek „možnosti“ žádné
skupiny. Každý čtvereček vystupuje sám za sebe a každý by měl mít svůj vlastní název
odlišný od ostatních.
Parametry NAME, VALUE a CHECKED mají stejný význam jako u ovládacího
prvku „volby“. Také popis viditelný uživateli je nutno zařídit stejným způsobem, tj. napsat ho až
za značku <INPUT>. Zde je příklad:
<INPUT TYPE=CHECKBOX NAME=obcancr VALUE=“ano“ CHECKED>občan
ČR<BR>
Protože možnosti netvoří skupiny, neprovede parametr CHECKED výběr prvku,
ale způsobí, že se ve čtverečku vykreslí zaškrtnutí („fajfka“) hned při zobrazení. Bude-li
možnost zaškrtnuta při odeslání formuláře, dostane server z formuláře prvek „obcancr“
s hodnotou „ano“.
1.12.6 Skrytá pole
Použijete parametr TYPE=HIDDEN. Uživatel takové pole v žádném případě neuvidí.
Prvek poslouží například jako tajná značka, kterou si označujete vydané formuláře v případě,
že si je vytváříte ve skriptu pro server.
<INPUT TYPE=HIDDEN NAME=název VALUE=“hodnota“>
NAME
Musíte zadat jméno, aby server mohl hodnotu dostat výběrem prvku,
VALUE
Hodnota, kterou bude skryté pole mít: je to text.
1.12.7 Seznamy
Seznamy se definují značkou <SELECT>. Tato značka je párová. Mezi značkou
<SELECT> a </SELECT> je tolik značek <OPTION>, kolik je prvků v seznamu. Značka
<OPTION> není párová.
Jsou dva druhy seznamů. Z běžných seznamů se dá vybrat pouze jedna položka.
Ze seznamů s násobným výběrem se dá vybrat více položek. Seznamy s násobným výběrem
jsou označeny parametrem MULTIPLE.
<SELECT NAME=název SIZE=číslo [MULTIPLE]>
<OPTION …>popis 1. položky
<OPTION …>popis 2. položky
…
<OPTION …>popis poslední položky
</SELECT>
Parametr NAME určuje název prvku typu seznam. Parametr SIZE, pokud je použit,
určuje počet viditelných prvků seznamu.
103
Příklad:
Spodní prádlo:<BR>
<SELECT NAME=zk SIZE=3 MULTIPLE>
<OPTION VALUE=a SELECTED>Nátělník
<OPTION VALUE=b SELECTED>Ponožky
<OPTION VALUE=c>Trenky
<OPTION VALUE=d SELECTED>Slipy
<OPTION VALUE=e>Oteplovačky
</SELECT>
Seznam bude mít viditelné tři řádky; při zobrazení formuláře bude vybrán první, druhý
a čtvrtý. Pozor: vždy zadejte aspoň u jedné značky parametr SELECTED.
Podle vzhledu jsou také dva druhy seznamů: normální (list) a rozbalovací (combo box).
Prohlížeč zobrazí rozbalovací seznam při splnění podmínek:
Ü ve značce <SELECT> není použit parametr MULTIPLE,
Ü ve značce <SELECT> není použit parametr SIZE, nebo je jeho hodnota 1.
V rozbalovacím seznamu je po zobrazení vždy vybrána příslušná položka
(SELECTED).
Značka <OPTION> má dva parametry. Popis viditelný uživateli je volný text až
za značkou:
<OPTION VALUE=hodnota [SELECTED]>popis
Parametr VALUE zadává hodnotu, kterou získá prvek pojmenovaný parametrem
NAME značky <SELECT>. Je-li povoleno vybrat více položek, pak tato hodnota bude jednou
ze seznamu hodnot.
Parametr SELECTED určuje, že položka je vybrána.
1.12.8 Víceřádková textová pole
Tyto prvky mají tvar většího rámečku, kam se dá napsat několik řádků textu. Obsah
je zobrazen přesně tak, jak je napsán, stejně jako je zobrazen text mezi značkami <PRE>,
</PRE>. Značky <TEXTAREA>, </TEXTAREA> jsou párové.
<TEXTAREA NAME=název COLS=sloupců ROWS=řádků>
[text]
</TEXTAREA>
Parametr NAME má stejnou funkci jako u všech ovládacích prvků – určuje jméno a dává
možnost přístupu skriptů k prvku.
Parametr COLS udává průměrný počet znaků v řádku, které budou viditelné uživateli.
Je to tedy šířka textového pole v počtu znaků. Mnoho prohlížečů používá pro textová pole
neproporcionální písmo jako třeba Courier, takže šířku lze stanovit velmi přesně.
Parametr ROWS udává počet řádků pole, které budou viditelné uživateli.
Přesah textu ve vodorovném i svislém směru způsobí vykreslení posuvníků. Napíše-li
tedy uživatel delší řádek, než udává parametr COLS, nebo více řádků, než udává parametr
ROWS, nebude text viditelný celý, ale skryté části budou dostupné pomocí posuvníků.
104
Prohlížeč může při malém okně zmenšit rozměry textového pole. Může také zalamovat
řádky, aby byly celé viditelné.
1.12.9 Příklad
Následující příklad je poskládán z několika formulářů tak, aby byla vidět různá výše popsaná pole. Všimněte si, že k uspořádání prvků na formuláři je použita tabulka. Prvky jsou
umístěny do buněk tabulky:
<HTML>
<HEAD>
<Title>Form - 2</TITLE>
</HEAD>
<body>
<H2>Příklad formuláře</H2>
<hr>
<form action=“nast_akt.asp“ method=„POST“>
<table>
<tr><td>
Titulek příspěvku:<br>
<input type=“text“ name=“Hlavicka“ value=“Hlavicka“ maxlength=50 size=50>
</td>
<td>
E-mail:<br>
<input type=“text“ name=“EMAIL“ value=“EMAIL“ size=25 maxlength=40>
</td></tr>
<tr><td colspan=2>
Text příspěvku:<br>
<textarea name=“Popis“ rows=6 cols=55 wrap=virtual >Popis</textarea>
</td></tr>
<tr><td>
Login:<br>
<input type=“hidden“ name=“Login“ value=„Autor“>
Autor
<td>
Heslo:<br>
<input type=“PASSWORD“ name=“Passw“ value=““ size=25 maxlength=40>
</td></tr>
<tr><td>
Dodatečný odkaz - URL:<br>
105
<input type=“text“ name=“URL“ value=“URL“ maxlength=150 size=50>
</td>
<td>
Text odkazu:<br>
<input type=“text“ name=“Link“ value=“Link“ size=25 maxlength=40>
</td></tr>
<tr><td align=center valign=bottom colspan=2>
<input type=“submit“ value=“Odeslat opravu“>
<input type=“reset“ value=“Původní obsah“>
<input type=“button“ value=“ Nápověda“ OnClick=“location=‘../nast_hlp.htm‘„>
<input type=“hidden“ name=“ID“ value=“ID“>
</td>
</tr>
<tr><td>Výběr spodního prádla<BR>
<SELECT NAME=zk SIZE=3 MULTIPLE>
<OPTION VALUE=a SELECTED>Nátělník
<OPTION VALUE=b>Ponožky
<OPTION VALUE=c SELECTED >Trenky
<OPTION VALUE=d>Slipy
<OPTION VALUE=e>Oteplovačky
</SELECT>
</td>
<td><BR>Věk:<BR>
<INPUT TYPE=RADIO NAME=vek VALUE=“?“ CHECKED>neurčen<BR>
<INPUT TYPE=RADIO NAME=vek VALUE=“0-12“>0-12 let<BR>
<INPUT TYPE=RADIO NAME=vek VALUE=“36-“>36 a více let
</td></tr>
<tr><td>
<INPUT TYPE=CHECKBOX NAME=obcancr VALUE=“ano“ CHECKED>občan
ČR<BR>
<INPUT TYPE=CHECKBOX NAME=duchod VALUE=“ano“>důchodce
</td><td>
<SELECT><BR>
Stav<BR>
<OPTION VALUE=0>svobodný/svobodná
106
<OPTION VALUE=1>ženatý/vdaná
<OPTION VALUE=2>rozvedený/rozvedená
</SELECT>
</td></tr>
</table>
</form>
</body>
</HTML>
Takto zobrazí formulář prohlížeč:
107
Uživatel může formulář před odesláním upravit třeba takto:
Vybrané a vyplněné položky se dostanou po stisknutí tlačítka „Odeslat opravu“ na server, kde je zpracuje ASP stránka „ nast_akt.asp „ obsahující skript pro server.
1.12.10 Výběr souboru
Speciální ovládací prvek obsahuje textové pole a vedle tlačítko „Procházet…“
(„Browse…“). Pomocí tlačítka otevřete dialog a v něm vyberete soubor. Je rovněž možno
zapsat cestu a jméno souboru přímo do textového pole.
<INPUT TYPE=FILE SIZE=počet MAXLENGTH=znaků>
Parametry SIZE a MAXLENGTH mají stejný význam jako u textových polí: SIZE
je velikost viditelné části pole, MAXLENGTH je největší počet znaků, které lze do pole zapsat.
Omezení MAXLENGTH je důležité, protože jméno s cestou může u některých souborů dosahovat značné délky, například více než 256 znaků.
108
Při odeslání formuláře dojde k otevření a odeslání souboru (upload). Pro zpracování,
příjem souboru a jeho zápis do složky serveru je nutné mít na serveru prostředek pro příjem,
například skript pro server v souboru ASP. Obyčejně je také potřebná serverová programová
komponenta modelu COM.
Do formuláře můžete zapsat více značek <IMAGE TYPE=FILE …>. Pak může uživatel vybrat více souborů a přenést je najednou z klienta na server. Nevyplněná pole souborů
nezpůsobí žádný problém.
1.12.11 Příklad
Tento příklad pochází z firemního web serveru. Uživatelé mohou nabídnout zajímavé soubory, programy a jiné dokumenty ostatním, když je odešlou do určeného adresáře
na web server:
<html>
<HEAD>
<Title>Form - 1</TITLE>
</HEAD>
<body>
Záznam identifikace uložen. Vyberte soubor a odešlete potvrzením odesílacího tlačítka.. <br>
<form enctype=“multipart/form-data“ action=“DL_upload.asp“ method=„POST“>
Cesta k souboru:<br>
<input type=FILE name=“f1“ value=“soubor.txt“ size=50> <br>
<br>
<input type=“submit“ value=“ Odeslat soubor “>
</form>
</body>
</html>
Formulář po zobrazení prohlížečem:
109
Textové pole a tlačítko „Procházet…“ jsou společně zobrazeny značkou
<INPUT TYPE=FILE>. Uživatel zapíše do pole cestu a jméno souboru, nebo stiskne tlačítko „Procházet…“ a soubor vybere ve standardním dialogu. Po odeslání se pošle obsah
formuláře spolu s obsahem vybraného souboru na server, který je zpracuje ASP stránkou
„DL_upload.asp“.
1.13 Jazyk CSS
Následuje stručný přehled jazyka CSS pro psaní kaskádových stylů. Schopnost formátovat webové stránky podle stylů je ve verzi HTML 4.0 a ovládají ji prohlížeče Netscape i Internet
Explorer, oba od verze 4.0. Způsob, jakým přidáte styly ke své webové stránce, je podrobně
a s příklady probrán v části „2.4.2 Příklady zápisu stylů„ tohoto textu. Teď si pouze uvedeme
nejjednodušší způsob zařazení stylů do webové stránky, abyste si mohli styly vyzkoušet.
Kaskádový styl napsaný v jazyku CSS je možno napsat do záhlaví stránky mezi párové
značky <STYLE type=text/css> a </STYLE>, například:
<HEAD>
<STYLE type=“text/css“>
H1 {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
Řádek, který začíná názvem H1, je napsán v jazyku CSS.
1.13.1 Zápis stylů
Základní formát zápisu:
[.]jméno_stylu_1 {
parametr_1: hodnota_1;
parametr_2: hodnota_2; ...
}
[.]jméno_stylu_2 {
} ...
Tři tečky označují, že se místo nich dají přidávat další parametry a další definice stylů.
Zápis do více řádků je uveden pro přehlednost. Styl s jedním parametrem lze napsat
do jednoho řádku, protože skutečnými oddělovači jsou složené závorky, dvojtečky a středníky, kdežto mezery a řádky je možno doplňovat jen pro přehlednost. Je tedy možno napsat:
H2 { color: Green; background: Orange }
Jak naznačují hranaté závorky, tečka před jménem stylu může a nemusí být. Definice nových stylů je třeba zapisovat s tečkou. Redefinice (nové definice existujících, již definovaných
stylů) se zapisují bez tečky.
110
Každá nebo téměř každá značka (tag) HTML má v HTML 4 již definovaný standardní
styl. Takový styl má v úplné definici až několik desítek hodnot. Navíc počet hodnot s vývojem
jazyka roste. Není proto vůbec potřebné, abyste definovali nové styly, stačí redefinice, kde
změníte jeden nebo několik parametrů. Proto se s definicemi začínajícími tečkou prakticky
nesetkáte.
Příklad: Jména stylů P a P.class znamenají redefinici stylu, jaký má odstavec
(značka <P>).
1.13.1.1 Délkové jednotky v CSS
Relativní délkové jednotky
em
výška fontu textu
ex
výška písmene „x“ (malé x)
px
pixel
%
procento
Absolutní délkové jednotky
cm
centimetr
mm
milimetr
in
palec (inch, coul – 25,4 mm)
pt
typografický bod (0,605 mm, 1/72 palce)
pc
pika (12 bodů, 7,257 mm)
Zkratky jednotek z prvního sloupce lze bez mezery použít přímo za celým nebo desetinným číslem. Například: 24pt, 0.8em. (Používá se desetinná tečka.)
1.13.2 Písmo, fonty
CSS používá přesné jméno fontu čili typu písma, jaké můžete vidět například, rozvinete-li roletové menu v záhlaví Wordu: Courier New, Arial, Times New Roman, Palatino
Linotype. Jméno fontu, které jsem zde uvedl, zastupuje všechny řezy (normální, tučný, kursivu a tučnou kursivu) a označuje se tedy jako „rodina“ fontů (font-family). Jména všech
rodin fontů jsou dostupná v Ovládacích panelech, panel Písma, když z menu Zobrazit
vyberete „Bez variant“.
Kromě toho používá CSS také hrubou charakteristiku fontu, tj. zda je písmo s patkami
(serif), bez patek (sans-serif), neproporcionální písmo (monospace), případně ozdobné
ležaté písmo (cursive) nebo ornamentální písmo (fantasy). (Podrobněji v kursu Typografie.)
Tato charakteristika se označuje jako generické jméno (generic name) – výraz „generický“
říká, že jméno zastupuje velkou skupinu navzájem si podobných písem.
111
1.13.2.1 Typ písma
Parametr typu písma se zapisuje takto:
font-family: jméno_rodiny_fontů|generické_jméno
[,jméno_rodiny_fontů|generické_jméno]...
a používá se obvykle tak, že zleva jsou jména rodin fontů, oddělená čárkami,
a poslední je generické jméno. Prohlížeč hledá zleva doprava, a nenajde-li žádný font
se zadaným jménem rodiny, použije font předepsané charakteristiky, který má instalován,
jako poslední možnost.
Má-li generické jméno více slov oddělených mezerami, musí být v úvozovkách – například „Courier New“.
Příklad:
font-family: “Times New Roman“, Garamond, “Book Antiqua“, serif;
1.13.2.2 Řez písma
Dělí se na dvě skupiny: sklonění a tučnost. Jsou rozděleny, protože tučnost lze vyjádřit
číselně jako tzv. váhu písma (weight), kdežto sklonění o proměnný úhel se nepoužívá.
Sklonění
font-style: normal | italic | oblique
Normal je stojaté písmo, italic je kursiva – skloněné písmo, které má vlastní řez fontu,
kdežto oblique je skloněné písmo, které nemá kursivní řez a musí je vytvořit prohlížeč sám
z písma normálního.
Tučnost
font-weight: normal|bold|bolder|lighter | 100|200|300|400|500|600|700|800|900
Normal – normální tučnost, bold – tučné, bolder – velmi tučné, lighter – méně tučné
než normální. Při číselném vyjádření je 100-300 polotučné, 400-500 tučné, 600-900 velmi
tučné.
1.13.2.3 Varianta písma
Určuje, zda je písmo psáno speciálním stylem: versálkami nebo malými kapitálkami
(SMALL-CAPS).
font-variant: normal | small-caps
1.13.2.4 Velikost písma
Velikost písma (font-size) lze v CSS určit několika způsoby:
font-size: <absolutní_velikost> | <relativní_velikost> | <výška> | <procento>
<absolutní_velikost>: xx-small|x-small|small|medium|large|x-large|xx-large
<relativní_velikost>: larger | smaller
<výška>: nnpt | n.nex | n.nem
<procento>: nnn%
Hodnoty absolutní velikosti tvoří řadu, kde další velikost je 150 % předchozí velikosti.
Má-li základní písmo medium 20 pixelů, bude mít písmo large 30 pixelů.
112
Hodnoty relativní velikosti se vztahují k dříve definovanému, redefinovanému nebo
standardnímu stylu. Například H5{font-size:larger;} dostane vyšší hodnotu z řady absolutních hodnot (x-large místo large), než je standardně pro H5 definováno, pokud nebyl styl H5
už dříve redefinován.
Hodnoty výšky se udávají v počtu typografických bodů (např. font-size: 14pt;), nebo
v násobcích velikosti čtverčíku (např. font-size: 1.2em;). Druhá možnost se v ČR téměř
nepoužívá.
Hodnoty procenta se vztahují k základní velikosti odstavce či záhlaví.
1.13.3 Barva textu a pozadí
1.13.3.1
Barva textu
color: barva | RGB(r,g,b) | rgb(r%,g%,b%) | #RGB | #RRGGBB
Přitom barva je slovní název barvy (viz přílohu 3.5), RGB je vyjádření dekadickými čísly,
rgb je vyjádření procenty, #RGB a #RRGGBB je vyjádření hexadecimálními číslicemi.
Hodnoty r, g, b v RGB mohou být každá v rozsahu 0 až 255. Hodnoty RGB každá 0-F
(jedna hex. číslice, a používají se pro zobrazení v 16 barvách), hodnoty RRGGBB každá 00-FF
pro zobrazení ve 256 a více barvách (opět jako v příloze 3.5). Procenta jsou běžná, 0-100.
1.13.3.2 Barva pozadí
background-color: color | transparent
Slovo color zastupuje všechny varianty nastavení barvy textu. K nim přibývá ještě
„barva“ průhledná (transparentní), kterou je vidět pozadí.
1.13.3.3 Obrázek na pozadí
background-image: url(URL) | none
URL je odkaz na obrázek, „none“ znamená žádný obrázek. Pokud je obrázek zadán,
překrývá barvu pozadí.
1.13.3.4 Opakování obrázku
background-repeat: repeat | repeat-x | repeat-y | no-repeat
Hodnota repeat opakuje obrázek jako dlaždice, repeat-x jej opakuje pouze vedle sebe
vodorovně, repeat-y pod sebou svisle. No-repeat zakazuje opakování.
1.13.3.5 Připevnění obrázku na pozadí
background-attachment: scroll | fixed
Hodnota „scroll“ – obrázek se pohybuje s textem a dalšími objekty stránky (jak je
běžné), kdežto hodnota „fixed“ určuje nehybný obrázek vůči pozadí.
1.13.3.6 Umístění obrázku
background-position: procento-x|velikost-x procento-y|velikost-y
background-position: top|center|bottom left|center|right
Procento-x a procento-y jsou souřadnice jak v obrázku, tak ve větší oblasti (stránce),
kde bude umístěn. Souřadnice udávají bod, v němž se budou oblast s obrázkem krýt. Střed
a hrany obrázku a oblasti (předpokládají se obdélníkové) jsou lépe vyjádřeny druhým způsobem.
113
Takže:
background-position: 0% 0%; je totéž co background-position: top left;
background-position: 100% 0%; je totéž co background-position: top right;
background-position: 0% 100%; je totéž co background-position: bottom left;
background-position: 100% 100%; je totéž co background-position: bottom
right;
atd., a třeba:
background-position: 50% 50%; je totéž co background-position: center center;
K tomu je třeba dodat, že ke krytí hran stačí uvést jedno slovo, jako:
background-position: top;
Velikost-x a velikost-y jsou vzdálenosti v centimetrech, vyjadřují posun obrázku vůči
oblasti.
1.13.3.7 Úplný zápis stylu pozadí
background: -color –image –repeat –attachment –position
kde –color atd. až –position jsou vyjádření hodnot z příslušných parametrů; jsou
oddělena mezerami, na konci je ovšem středník. Příklad:
background: blue url(obr2.jpg) norepeat fixed center;
1.13.4 Formátování textu
Možnosti formátování textu jsou větší než v samotném jazyku HTML.
1.13.4.1 Mezery mezi slovy
word-spacing: normal | n.nem
1.13.4.2 Mezery mezi písmeny
letter-spacing: normal | n.nem
N.n je násobek velikosti čtverčíku vyjádřeného zkratkou em. Při zvětšování mezer mezi
písmeny (prostrkávání) se stejně zvětšují i mezery mezi slovy.
1.31.4.3 Další vlastnosti písma
text-decoration: none | underline | overline | line-through | blink
Zde je underline – podtržení, overline – nadtržení (vodorovná čára nad textem), line-through – přeškrtnutý text, blink – blikající text (jen u některých prohlížečů).
1.13.4.4 Svislé zarovnání textu
vertical-align: baseline|sub|super|top|text-top|middle|bottom|text-bottom|n%
Baseline je základní zarovnání. Sub – spodní index, super – horní index. Middle –
zarovnání na střed prvku, text-top – na nejvyšší body textu, text-bottom – na nejnižší body
textu. Top – zarovná na horní okraj nejvyššího prvku v řádku, bottom – na spodní okraj nejnižšího prvku v řádku. Lze též uvést procento: text je pak vůči základně posunut o udaný počet
procent výšky textu. Procentní hodnoty kladné posouvají text nahoru, záporné dolů.
Prvek je text nebo obrázek vložený do textu. Nastavení odpovídá možnostem HTML
popsaným v části 1.6.1, kde jsou tytéž možnosti textu vzhledem k obrázku.
114
1.13.4.5 Verzálky, kapitálky, majuskule, minuskule
Zní to jako zaklínadlo, ale: VERZÁLKY a MAJUSKULE jsou písmena velké abecedy, minuskule jsou písmena malé abecedy. Kapitálky Jsou Písmena Velké Abecedy Použitá
Na Začátku Každého Slova. (Pozor: Kapitálky ve Wordu jsou jiné, jako font-variant:
small-caps).
text-transform: capitalize | uppercase | lowercase | none
Požadovaná úprava textu: capitalize na kapitálky, uppercase na verzálky (majuskule),
lowercase na minuskule, none – žádná úprava textu.
1.13.4.6 Vodorovné zarovnání textu
text-align: left | right | center | justify
Možnosti zarovnání zde opět odpovídají možnostem HTML, jak zarovnat text v odstavcích: left – doleva, right – doprava, center – na střed, justify – na obě strany (do bloku).
1.13.4.7 Odsazení textu od levého okraje
text-indent: <abs_vzdálenost><jednotka> | <vzdálenost>%
Absolutní vzdálenost odsazení od levého okraje lze uvádět v bodech (jednotka pt), centimetrech (cm), milimetrech (mm), čtverčících (em), případně v procentech celé šířky řádku.
Pozor! Odsazen bude pouze první řádek odstavce!
1.13.4.8 Mezera mezi řádky
line-height: normal | číslo | výška | <výška>%
Výška řádku je standardně 110 % výšky písma. V češtině je potřebných poněkud více,
asi 120 % výšky písma, aby se do řádku vešly čárky a háčky nad písmeny velké abecedy. Číslo
je násobek výšky písma (stačí tedy napsat např. 1.5), výška% je násobek výšky písma vyjádřený v procentech (tedy 150% je totéž co 1.5). Výška bez značky procenta je absolutní velikost s označením jednotky, například 12mm.
1.13.5 Rámečky
Rámeček obklopuje text ze všech stran. Standardně není viditelný, má nulovou sílu a jde
těsně kolem textu. (Pozadí textu se řídí parametry background.)
115
1.13.5.1 Okraje kolem rámečku zvenku
Šířky okrajů kolem rámečku se dají nastavit na každé straně rámečku (a textu, obrázku
nebo jiného objektu) zvlášť. Slouží k tomu parametry margin-top (nad textem), margin-bottom (pod textem), margin-left (vlevo od textu) a margin-right (vpravo od textu).
margin-top: <vzdálenost><jednotka> | <vzdálenost>% | auto
margin-bottom: <vzdálenost><jednotka> | <vzdálenost>% | auto
margin-left: <vzdálenost><jednotka> | <vzdálenost>% | auto
margin-right: <vzdálenost><jednotka> | <vzdálenost>% | auto
Vzdálenost je opět vyjádřena buď absolutně nebo relativně, se zkratkou jednotky nebo
se znakem procenta. Hodnota „auto“ znamená, že šířka bude rovna šířce vnějšího okraje
na protilehlé straně. Tj. dvojice top-bottom, left-right. Celkově lze okraje nastavit souhrnným
parametrem margin:
margin: -top –right –bottom –left
Zadávají se už jen hodnoty v uvedeném pořadí.
1.13.5.2 Velikost volného prostoru
Jde o prostor mezi objektem (třeba textem) a rámečkem, standardně není žádný (jeho
velikost je 0) a rámeček je kolem objektu opsán zcela těsně. Prostor se označuje padding
(výplň) a dá se opět nastavit na každé straně zvlášť nebo na všech zároveň.
padding-top: <vzdálenost><jednotka> | <vzdálenost>%
padding-bottom: <vzdálenost><jednotka> | <vzdálenost>%
padding-left: <vzdálenost><jednotka> | <vzdálenost>%
padding-right: <vzdálenost><jednotka> | <vzdálenost>%
padding: -top –right –bottom –left
Na rozdíl od parametru margin zde nejsou hodnoty „auto“.
1.13.5.3 Síla rámečku
Standardně má rámeček nulovou tloušťku (sílu). Parametry „border-XXX-width“
nastavují jeho sílu a pak mu lze přiřadit barvu.
border-top-width: <vzdálenost><jednotka> | <vzdálenost>% |thin|medium|thick
border-bottom-width: <vzdálenost><jednotka> | <vzdálenost>%|thin|medium|thick
border-left-width: <vzdálenost><jednotka> | <vzdálenost>% |thin|medium|thick
border-right-width: <vzdálenost><jednotka> | <vzdálenost>% |thin|medium|thick
border-width: -top –right –bottom –left
Thin – tenký rámeček (resp. jeho část), medium – středně silný, thick – silný rámeček.
Souhrnně lze tloušťky nastavit parametrem border-width, například:
border-width: medium 12pt medium thin.
Pravidla pro zkrácený zápis – platí pro border-width a border-color:
b-w(b-c): A
~
b-w(b-c): A A A A
b-w(b-c): A B
~
b-w(b-c): A B A B
b-w(b-c): A B
~
b-w(b-c): A B C B
116
1.33.5.4 Barva rámečku
border-top-color: <color>
border-bottom-color: <color>
border-left-color: <color>
border-right-color: <color>
border-color: -top –right –bottom –left
Barevné vyjádření, které je zde zastoupeno symbolem „color“, je stejné jako v odstavci
„Barva textu“.
1.13.5.5 Vzorkování rámečku, plastické efekty
Jsou to různé způsoby vykreslení rámečku.
border-style: none|dotted|dashed|solid|double|grove|ridge|inset|outset
None – žádný rámeček, dotted – tečkovaný, dashed – čárkovaný, solid – pevný (tj. plná
čára nebo výplň), double – dvojitá čára, grove – plasticky vypadající žlábek, ridge – plastický
„vystouplý hřbet“, inset – zapuštěný, outset – vystouplý.
Rozdíl mezi grove a inset, resp. mezi ridge a outset spočívá v tom, že grove a ridge mají
efekt pouze na samotný rámeček (kdy prvek a případná výplň jsou v rovině s okolím), kdežto
inset a outset na celý prvek a případnou výplň (kdy rámeček tvoří „svahy stolové hory“).
1.13.5.6 Parametry pro jednu stranu rámečku
Pro každou ze čtyř stran rámečku existuje příkaz nastavující všechny vlastnosti:
border-top: -width -style color
border-right: -width -style color
border-bottom: -width -style color
border-left: -width -style color
Border-top nastavuje vlastnosti pro horní hranu; border-right nastavuje vlastnosti
pro pravou hranu; border-bottom nastavuje vlastnosti pro dolní hranu; border-left nastavuje vlastnosti pro levou hranu.
-Width jsou hodnoty tloušťky rámečku, -style hodnoty vzorkování/efektů, color je barva.
Například:
border-left: 4pt ridge Aqua;
1.13.5.7 Parametry pro celý rámeček
border: -width -style color
Pokud jsou zadány parametry pro celý rámeček, stranu a jednotlivé údaje, vše pro jeden
styl, pak při konfliktech platí to, co je uvedeno naposledy.
1.13.6 Prvky a práce s nimi
Prvek (element) je nadpis, odstavec textu, obrázek, ovládací prvek formuláře a další objekty na webové stránce. Je-li naformátován stylem, dá se zadat jeho šířka, výška, umístění
a obtékání. Využití následujících vlastností zadaných ve stylech je praktické hlavně pro ovládací prvky formulářů.
117
1.13.6.1 Šířka prvku
width: <šířka><jednotka> | <šířka>% | auto
Šířku lze zadat v jednotkách pro rozměry, v procentech, nebo vlastně nezadat (auto) – to
je možnost, která také nastane, když prvek nemá definován žádný styl. 100 % je šířka prvku
v nadřazené definici stylu (rodičovského prvku, pokud existuje).
Je-li zadána pouze šířka prvku „obrázek“ (IMG) a ne výška, pak se jí výška přizpůsobí,
aby poměr š/v zůstal zachován. Je-li pro obrázek zadána šířka i výška, obrázek se patřičně
upraví.
1.13.6.2 Výška prvku
height: <výška><jednotka> | <výška>% | auto
Výšku lze zadat stejným způsobem jako šířku: v jednotkách pro rozměry, v %, či auto.
Je-li zadána pouze výška prvku „obrázek“ (IMG) a ne šířka, pak se jí šířka přizpůsobí,
aby poměr š/v zůstal zachován. Je-li pro obrázek zadána šířka i výška, obrázek se patřičně
upraví.
1.13.6.3 Vodorovné umístění prvku
float: left | right | none
None – prvek bude umístěn přesně tam, kde byl zadán. Left – prvek bude umístěn vlevo v řádku, kde byl zadán, a text ho bude obtékat zprava. Right – prvek bude umístěn vpravo
v řádku, kde byl zadán, a text ho bude obtékat zleva.
1.13.6.4 Obtékání prvku
clear: none | left | right | both
None – obtékání prvku může dle jeho umístění nastat po obou stranách; left – po levé
straně je obtékání zakázáno a je tam tedy prázdno (clear); right – po pravé straně je obtékání
zakázáno, both – obtékání je zakázáno po obou stranách.
1.13.6.5 Klasifikace prvků
Klasifikace prvků znamená jejich rozdělení do skupin. Parametry, které následují, dělí
prvky do kategorií (parametr display) a řídí jejich zobrazení.
display: block | inline | list-item | none
Skupiny:
Ü block – prvek je typu „blok“ (například nadpis - H1 až H6 anebo odstavec - P); blok
je umístěn do nového rámečku,
Ü inline – prvek je vložen do řádku, kde je zadán, není vytvořen nový řádek; rámeček
je umístěn přímo do řádku a jeho velikost je určena velikostí řádku,
Ü list-item – prvek je typu blok a navíc má značku pro položku seznamu – typicky
<LI>,
Ü none – vypíná zobrazení prvku i s rámečkem a vložených prvků (jako inline).
118
1.13.6.6 Bílé mezery
Bílé mezery (white spaces) jsou mezery a nové řádky v textu (v editorech textu se k bílým
mezerám počítají také znaky tabulátor, TAB, v HTML a CSS ne).
white-space: normal | pre | nowrap
Normal – normální funkce: více bílých mezer po sobě se nahrazuje jednou mezerou
a řádky se zalamují podle potřeby; pre – napsaný text se zachovává přesně, jak je naformátovaný (preformatted); nowrap – automatické zalamování je zrušeno, zalomit uvnitř odstavce
se dá jen značkou <BR>.
1.13.6.7 Formátování seznamu
list-style-type: disc | circle | square | decimal | lower-roman |
upper-roman | lower-alpha | upper-alpha | none
První tři hodnoty určují značky: disc – plné kolečko (disk), circle – prázdné kolečko
(kroužek), square – čtvereček. Tyto hodnoty jsou určeny pro seznam s odrážkami.
Další hodnoty, které jsou platné pro číslované seznamy, určují druh číslování, kde jsou:
decimal – desetinná čísla, lower-roman – malá římská čísla (z písmen malé abecedy), upper-roman – velká římská čísla (z písmen velké abecedy), lower-alpha – „číslování“ písmeny
malé abecedy, upper-alpha – „číslování“ písmeny velké abecedy, none – bez odrážek a číslování.
list-style-image: url(<URL>) | none
Pomocí tohoto parametru se dá pro seznam s odrážkami použít obrázek jako odrážka.
Obrázek je určen svým odkazem URL.
1.13.6.8 Odsazování
list-style-position: inside | outside
U seznamů mohou být jednotlivé položky víceřádkové. Tento parametr řídí odsazení
druhého a dalších řádků: inside – odrážka je srovnána s odstavcem, neboli druhý a další řádek začíná pod odrážkou; outside – odrážka je vysunutá, čili druhý a další řádek začíná až
pod prvním písmenem textu prvního řádku.
Formátování seznamu včetně odsazení a možnosti použít obrázek jako znak odrážky lze
zapsat také souhrnnou definicí:
list-style: -type -position –image
kde -type je jakákoli přípustná hodnota parametru list-style-type, -position je přípustná
hodnota parametru list-style-position a –image je přípustná hodnota parametru list-style-image - praktický význam má jen hodnota „url(URL)“.
1.13.6.9 Speciální prvky
Nejde vlastně o prvky nebo značky, jen o úpravu textu. Proto se označují jako pseudo-prvky (nepravé prvky). Jsou to: first-line (první řádek) a first-letter (první písmeno) textového prvku.
Používají se v definici:
PRVEK:first-line { <definice, parametry stylu> }
PRVEK:first-letter { <definice, parametry stylu> }
Místo typu značky prvku, tedy například P, máme přesnější vyjádření: P:first-line a P:first-letter. Účinek v textu HTML zajistíme opět použitím těchto vyjádření:
119
<PRVEK:first-line> Text... </PRVEK>
<PRVEK:first-letter> Text... </PRVEK>
First-line zajistí zobrazení prvního řádku odstavce stanoveným stylem. Odstavec pak
pokračuje stylem přiřazeným k <PRVEK> nebo standardním pro <P>. First-letter zobrazí první písmeno odstavce v zadaném stylu, například velké písmeno přes několik řádků
odstavce (jako ozdobné iniciály ve starých rukopisech).
Použití například:
<P:first-line> Text odstavce… </P>
<P:first-letter> Text odstavce… </P>
1.13.7 Seskupování, nadřazenost a dědičnost
Seskupování definic znamená, že lze jedinou definicí vytvořit jednu nebo více nových
či předefinujících značek, například:
H1, H2, H3, H4 { font-family: Verdana, sans-serif; }
znamená, že se předefinují čtyři nejvyšší úrovně nadpisů, aby se zobrazovaly písmem
Verdana případně jiným písmem bez patek, pokud není font Verdana v počítači uživatele
nainstalován.
Nadřazenost prvků je v HTML zřejmá. Párová značka může obsahovat vložené značky
resp. prvky. Například značka BODY je nadřazená (rodičovská) všem prvkům, které obsahuje. Pokud pak ve stylech předefinujeme značku BODY, ovlivníme tím definice všech jejích
vložených prvků. Např.:
BODY { color: orange; }
způsobí, že nebudou-li použity pro nadpisy a odstavce redefinice jinou barvou, bude
veškerý text v těle stránky zobrazen oranžově. A
P { line-height: 120%; }
způsobí standardní nastavení vzdálenosti řádků pro všechny odstavce a jejich vložené
prvky.
Dědičnost definic vyplývá již z dědičnosti platné v samotném HTML. Vložený prvek
zachovává formátovací vlastnosti prvku, do kterého je vložen - přidává pouze to, čím se od něj
odlišuje a co definice rodičovského (nadřazeného) elementu neobsahuje. Například:
<H2>Toto je <I>opravdu</I> důležité!</H2>
Standardní definice značky H2 říká, že musí být použito písmo určité výšky, s centrováním, na samostatném řádku. Nevylučuje však kursivu, takže je možné část nadpisu
formátovat značkou <I>, </I>.
1.13.8 Třídy a identifikátory
1.3.8.1 Třídy
Zavedení tříd (třída, anglicky: class) umožňuje řešit případy, kdy určitým prvkům,
například odstavcům (více než jednomu) chceme přiřadit nějaké formátování, kdežto jiných
odstavců se to nemá dotknout, případně jim chceme přiřadit jiné formátování. Přitom jsou
všechny odstavce určeny značkami <P>. Dále pro pořádek chceme, aby v části <HEAD>, </
HEAD> byly styly jen definovány a v části <BODY>, </BODY> použity.
120
Definujeme proto třídu „ctext“ (jméno si zvolíme) u definice stylu pro odstavec <P>:
P.ctext { font-size: 16pt; color=blue; }
Tuto třídu použijeme u odstavce <P>, kde to potřebujeme, jako parametr class:
<P class=ctext>Text odstavce je vyšší a modrý</P>
Jiný odstavec, který nemá parametr class, bude mít text normálního vzhledu. Také jiné
prvky, třeba nadpisy, budou mít vzhled, který nebude naší definicí nijak ovlivněn. Ani když
napíšete:
<H2 class=ctext>Nadpis 2</H2>
nebude nadpis modrý, ale jeho velikost, barva a jiné vlastnosti nebudou parametrem
class změněny.
Obecně napíšete definici třídy takto:
[ jméno_stylu].jméno_třídy {
}
Všimněte si, že jméno stylu nemusí být vůbec zadáno. Tedy pokud začíná definice tečkou
a jménem, které nepatří žádnému prvku HTML, je to definice třídy, která platí pro všechny
prvky! Ale samozřejmě jen pokud mají uveden parametr class=jméno_třídy.
Pro jeden druh značky, i pro všechny značky společně, můžeme definovat libovolné
množství tříd. Ty pak používáme podle potřeby uvedením parametru class v prvcích.
Na jeden prvek lze aplikovat více tříd tímto způsobem:
<PRVEK CLASS=„class_1 class_2 ...“>
CSS předchází konfliktům, které by mohly vzniknout tím, že se na prvek použije více
stylů a nastavení atributů v nich si odporuje. Styly jsou použity v pořadí
1. Prvek – standardní definice nebo styl
2. class
3. ID
4. Styl definovaný přímo ve značce
1.13.8.1 Identifikátory
Identifikátor (ID) má velmi podobnou funkci jako třída, ale měl by se použít ve stránce
jen jednou. Jeho definice:
[ jméno_stylu]#identifikátor {
}
Samotný identifikátor je posloupnost písmen a/nebo číslic. Podobně jako třídu lze identifikátor definovat pro jeden typ značky nebo pro libovolnou značku. Jeho použití ve značce
se zajistí parametrem ID:
<PRVEK ID=identifikátor>
121
1.13.9 Komentáře a kompatibilita vpřed
Tato dvě témata spolu souvisejí, ačkoli se to na první pohled nezdá.
1.13.9.1 Komentář
Komentář čili poznámka, kterou chcete do definice stylu vložit, musí mít začáteční
dvojznak /* a koncový */, stejně jako v jazyku C/C++. Například:
H3 { color: red } /* červená barva textu pro všechny nadpisy úrovně 3 */
1.13.9.2 Kompatibilita vpřed
Počítá se s tím, že jazyk CSS se bude dále vyvíjet a tento vývoj je rychlý. Budoucí
prohlížeč může zpracovat další dnes nedefinované a nenavržené atributy a hodnoty. Přitom
webové stránky, obsahující takové hodnoty a atributy, se musejí dát prohlížet i staršími typy
prohlížečů.
Proto byl jazyk CSS navržen s dopřednou kompatibilitou. Všechny parametry a hodnoty, na které narazí jako na neznámé, považuje za poznámku, ignoruje je (tj. přeskočí je
a neudělá nic). Jestliže například v budoucnosti vznikne parametr „slot“ s hodnotou v procentech, pak z definice
P { color: green; slot: 20%; }
si prohlížeč vezme pouze první parametr (color: green), který zná.
1.13.10 Import stylů
Na připojení souboru .CSS se styly lze použít značku <LINK>, jak je popsáno
v části 2.4.2 Příklady zápisu stylů. Další způsob, jak zavést (připojit, importovat) styly
ze souboru .CSS, je použítím pravidla @imort přímo z oblasti (sekce)
mezi značkami <STYLE>, </STYLE> v té webové stránce, která styly ze souboru
potřebuje.
<STYLE>
@import url(URL);
</STYLE>
Soubor stylů je zadán pomocí URL. V nejjednodušším případě tedy stačí zadat
soubor.CSS, kde soubor stylů je umístěn ve stejné složce jako volající webová stránka.
1.13.11 Kaskádní styly
Kaskádování znamená, že jediný text je ovlivněn několika styly, které jej formátují. Často ho formátuje každý jinak, nenastane však chyba z konfliktu, ale je vyřešeno,
který styl má přednost. U konfliktních stylů, které následují v definici stránky, má přednost ta
definice, která přichází jako poslední.
Lze tedy nastavit implicitní vlastnosti veškerého textu (ve značce <BODY>), tu přepsat
definicí stylu konkrétní značky v sekci STYLE (např. H3 {…} ) a tu ještě změnit v konkrétním
výskytu značky na stránce parametrem SPAN (<H3 SPAN=…>).
Jistě jste si všimli, že mnoho parametrů má za jednu z hodnot slovo normal nebo none.
Tyto hodnoty se uplatní právě v kaskádových stylech. Je to tam, kde styl s nižší prioritou
nastavil jinou hodnotu, ale autor se chce vrátit k hodnotě standardní.
122
Styly lze do stránky importovat ze samostatného souboru .CSS a těchto importů může
být několik. I zde se uplatní později importovaný styl. V celkovém seznamu priorit (pořadí
přednosti) mají však importy nejnižší důležitost – každá lokální definice je důležitější.
Zobrazení dokumentu může ovlivňovat také konfigurace prohlížeče. Nastavení
v prohlížeči je méně důležité než přímé definování stylů v dokumentu HTML.
Aby se dalo přímo ve stránce definovat, který parametr má o stupeň vyšší důležitost,
a tedy přednost před ostatními, byl definován parametr!important (anglicky: důležitý).
Jeho použití ukazuje příklad:
P { font-size: 12pt!important; font-style: italic }
V příkladu má velikost písma (font-size: 12pt) o třídu vyšší prioritu, ale typ písma (font-style: italic) má prioritu normální.
Termín
Vysvětlení
Anglicky
absolutní odkaz
absolute URL
URL obsahuje všechny údaje pro nalezení webové stránky v Internetu
adresář
directory; folder
prostor na serveru nebo jiném počítači, kde se ukládají webové stránky a jiné soubory
ampersand
speciální znak „&“
analyzuje
např. prohlížeč, když čte zdrojový text webové stránky a určuje, jak ho zobrazí
animace
pohyblivé obrázky (např. některé GIF)
animation
areál
místo věnované nějaké činnosti, například sportu
bílé mezery
white spaces
neviditelné znaky, tj. mezery a nové řádky v textu HTML (v editorech též TAB)
buňka
cell
nejmenší část tabulky; tabulka se skládá z buněk seřazených do řádků a sloupců
CSS
cascading style sheets
jednoduchý jazyk pro zápis kaskádových stylů
číslovaný seznam
seznamy položek, kde záleží na pořadí
ordered lists; OL
CD
dědičnost
inheritance
vložený prvek přidává své definice k definicím prvku nadřazeného
definice
definition
zvláštní druh seznamu (DFN); používá se k vysvětlení neznámých pojmů
definiční stránka rámců
webová stránka obsahující pouze rozdělení na klasické rámy
délkové jednotky
absolutní a relativní míry používané v CSS ke stanovení výšky písma, šířky sloupce atd.
File Transfer Protocol
protokol určený k přenosu souborů; také služba Internetu pro stejný účel
formátování textu
text formatting
úprava odstavce textu podle pravidel daných stylem
formuláře
forms
speciální webové stránky k vyplnění uživatelem (dotazníky apod.); obsahují objekty
FTP
posílání souborů a dokumentů; jedna z nejstarších služeb Internetu
FTP server
server, který obsahuje službu FTP a poskytuje soubory
generický
generic
zastupující velkou skupinu podobných věcí, např. podobných řezů písma
grafický systém
aplikace určené pro tvorbu obrázků, animací, schémat atd., i třeba filmů
hodnota
value
parametr značky má jméno a hodnotu; např. ALIGN je jméno, TOP hodnota
HTML
HTTP
HyperText Transfer Protocol
jednoduchý protokol, který se používá pro přenos dokumentů službou WWW
identifikátor
identifier, id
umožňuje použít styl jen pro některé prvky určené stejným id (doplňkovým jménem)
123
124
import stylů
style import
zavedení stylů: a) ze zvláštního souboru s příponou .CSS,
b) ze sekce STYLE webové stránky
jméno značky
první název za znakem „<„ nebo „</“, například A nebo IMG
kaskádování
cascading
jeden text je ovlivněn několika styly; při konfliktu má poslední styl přednost (prioritu)
kaskádové styly
cascading styles
popisy, jak upravit vzhled jednotlivých typů odstavců, nadpisů a dalších prvků HTML
klasické rámce
frames
části, na něž je rozdělena webová stránka; do každé z nich se zavádí opět webová stránka
klasifikace
classifying
rozdělení prvků do skupin podle nějaké vlastnosti, např. podle způsobu zobrazení
klíčová slova
keywords
slova udávající, co dokument obsahuje, o čem pojednává
klient
klient
„zákazník“ - počítač, který se obrací na server a něco od něj žádá
klientský program
client program
např. WWW prohlížeč, FTP program nebo klient elektronické pošty
kódové stránky
codepages
systematické tabulky kódů pro různé jazyky; české např. CP1250, CP852 atd.
kódy
codes
zkráceně se tak značí způsob přiřazení čísel znakům; jsou kódy Latin, ANSI atd.
komentář
comment
poznámka v CSS začíná znaky /* a končí znaky */
kompatibilita
kompatibility
slučitelnost; v CSS je dopředná kompatibilita, neznámé termíny se ignorují (přeskočí)
koncová značka
koncová značka ukončuje oblast působnosti párové značky; má před jménem znak „/“,
nemá parametry
kotva
anchor
místo ve zdroji, kde je umístěna značka IMG; sem je obrázek „zakotven“
kursor
cursor
místo na obrazovce, kam přesně uživatel napíše další znak; označeno blikající svislou
čárkou či blokem
lišta nástrojů
toolbar
pás tlačítek, kde každé má nějakou funkci, například nahoře v okně prohlížeče
menu
menu
též nabídka: seznam funkcí nebo akcí, z nichž si můžete zvolit
META
značka, pomocí níž charakterizuje autor svoji webovou stránku pro portálové servery
nadpisy
headings
v HTML je šest velikostí nadpisů: H1 až H6 od největšího písma
nadřazenost
superiority
text uvnitř párové značky může obsahovat další značky včetně párových
náhled
preview
pohled předem, jak něco bude vypadat, např. vytištěná stránka
navigační pole
rám webové stránky obsahující nejdůležitější odkazy, trvale viditelný
název stránky
page title
text, který se zobrazí jako nadpis celého okna prohlížeče
neseřazený seznam
seznam položek, kde nezáleží na pořadí
unordered list, UO
objekty
objects
u formulářů jsou to různá pole k vyplnění nebo úpravě uživatelem; skripty s nimi
snadno pracují
obraz webové stránky
vzhled webové stránky, jak ji ukáže prohlížeč
obtékání
text flow
text je příslušně zúžen a umístěn vlevo nebo vpravo od prvku (např. obrázku)
odkaz
link
ukazatel z jednoho místa hypertextu na jiné, tj. na tutéž nebo jinou stránku, stejný
i jiný server, v rámci celého Internetu
125
126
odrážky
grafické značky před položkami nečíslovaných seznamů: kroužky, čtverečky apod.
odsazení
indent
vzdálenost začátku řádku nebo odstavce od levého okraje stránky
ovládací prvky
controls
objekty na formulářích (známé i z programů Windows): pole textu, tlačítka atd.
parametry
parameters
údaje, kterými přesně určíte, co bude značka dělat
párové značky
mnoho značek HTML tvoří páry složené z počáteční a koncové značky; značky působí
na text uvnitř páru
plovoucí rámec
inline frame
též vložený rámec: rám pro webovou stránku, umístěný uvnitř jiné webové stránky
počáteční značka
počáteční značka startuje oblast působnosti párové značky; většinou má parametry
port
port
číslo od 1 do 65535, adresuje komunikující program v rámci počítače/ serveru
pozadí
background
obrázek nebo barevná plocha „pod“ obsahem webové stránky
pozadí tabulky
table background
obrázek nebo barevná plocha „pod“ tabulkou
poznámka
comment; remark
posloupnost znaků , kterou prohlížeč přeskakuje
prohlížeč
browser
klientský program pro službu WWW, jako Netscape, Opera, Internet Explorer
projekt
project
větší dílo, na kterém spolupracuje více autorů
protokol
protocol
předepsaný způsob komunikace programů mezi sebou
prvek
element
nadpis, odstavec, obrázek, ovládací prvek formuláře a jiné druhy objektů na stránce;
prvky jsou definovány značkami HTML; prvky se značkami stejného typu se dají
rozlišit třídou (class=) nebo identifikátorem (id=)
rámce
frames
bloky informací obíhající v sítích typu LAN; prázdné speciální stránky nebo části
stránek, kam lze vložit webové stránky
rámeček
border
též okraj; lze jím zvýraznit tabulku, buňky, text, obrázky a různé další části webové
stránky
redefinice
redefining
nová definice existujících, již definovaných stylů
relativní odkaz
relative URL
URL obsahuje pouze údaje pro nalezení webové stránky na serveru, odkud se odkazuje
rozbalovací seznam
drop-down list
jeden z ovládacích prvků používaných na formulářích
řádek tabulky
table row
tabulka se skládá z řádků, které je třeba definovat značkami <TR>
server
server
počítač dostupný z Internetu, na němž běží nějaká služba (FTP, WWW,…)
seskupování
grouping
jedna definice určuje vlastnosti pro více značek
skript pro klienta
client-side script
skript zpravidla psaný v jazyku JavaScript; vykonává ho prohlížeč po zavedení webové
stránky, která jej obsahuje
skriptový jazyk
script language
na straně klienta i serveru se používá JavaScript, VBScript nebo Jscript, na straně
serveru též např. PHP
skripty pro server
server-side scripts
skripty psané v různých jazycích; vykonává je server; vytvářejí nebo doplňují webové
stránky podle požadavků klientů
sloupec tabulky
table column
sloupce vznikají definicí určitého počtu buněk (TD) v každém řádku (TR) tabulky
127
128
služba
service
speciální prvky
pseudo-elements
první řádek a první písmeno textového prvku (nadpisu, odstavce apod.)
speciální znaky
special characters
zvláštní znaky, ani písmena, ani číslice, používané na webových stránkách,
např. „, &, <, >, pevná mezera
standardní styl
default style
základní styl, který je již předem definován v jazyku HTML
styl
style
pravidla pro úpravu nějaké části textu, často odstavce
tabulky
tables
jazyk HTML umožňuje vytvářet webové stránky obsahující přehledné tabulky
tělo stránky
body
část zdroje webové stránky obsahující vlastní data, která prohlížeč zobrazí v okně
titulek
TITLE; ALT
popis k obrázku nebo nadpis webové stránky
tlačítka
buttons
druh ovládacích prvků používaných na formulářích k odeslání apod.
třída
class
umožňuje použít styl jen pro některé prvky určené stejným typem značky
úhlové závorky
angle brackets
znaky < a >, určují začátek a konec značky
URL
Uniform Resource Locator
jednotný ukazatel na zdroj, hlavní část odkazů
vložený rámec
inline frame
též plovoucí rámec: rám pro webovou stránku, umístěný uvnitř jiné webové stránky
webová sídla
web sites
na jednom web severu může být několik webových sídel, každé pro jinou aplikaci
webové sídlo
web site
celek webových stránek umístěný na web serveru, řešící nějaké zadání (aplikaci)
webové stránky
web pages
záhlaví stránky
HEAD
úvodní část webové stránky s údaji o platnosti, nadpisem, klíčovými slovy atd.
zarovnání
ALIGN,VALIGN
vodorovné a svislé zarovnání, např. textů v buňkách tabulky, nebo textu s obrázkem
zdroj webové stránky
web page source
webová stránka, jak ji napsal programátor (vy)
zdrojový soubor
source file
soubor ve zdrojovém tvaru, třeba ve formátu HTML
zdrojový text
source text
značky
marks
krátké texty v závorkách <>, napsané autorem webové stránky, řídící její zobrazení
a funkce v prohlížeči
zveřejnění
publish
publikace: umístění webových stránek na server, kde jsou dostupné z Internetu
129
130
131
2. JAK DÁL?
Několik výhledů do světa, který se nám otevírá po osvojení HTML.
2.1 Skripty na klientské straně
Programové prvky – applety jsou spuštěny na straně klienta, tedy v prohlížeči, a mohou
plnit speciální úkoly. Tyto programy jsou psány v jazyce Java. Chcete-li se stát jejich autorem,
musíte mít znalosti jazyka Java a také překladač Java, který vytvoří program ve tvaru, jakému
rozumí prohlížeč.
Skripty jsou prostředky jednodušší na pochopení a rychlejší na naučení. Zvláště známé jsou Java Script, JScript a VBScript – jejich syntaxe (tj. tvar jazyka, vzhled napsaných
programů) je odvozena od jazyků Java a Visual Basic. Pro skripty nepotřebujete žádný
překladač. Kromě komunikace s uživatelem, například ve formulářích, mají skripty protředky
pro přístup do souborů a databází.
Skripty pracují s objekty určitých objektových modelů. Známe různé druhy systémových
objektových modelů, jako například COM (Component Object Model), COM+ nebo DCOM
(Distributed COM). Skripty používají jednodušší modely, jako je souborový objektový model
pro přístup k souborům, nebo model ADO pro přístup k databázím.
Objektový model v podstatě popisuje strukturu objektů, jako:
Ü z kterých objektů se model skládá,
Ü který objekt je „kontejner“ a může tedy obsahovat další objekty,
Ü jaké objekty a kolik může kontejner obsahovat, „kolekce objektů“, například „folder“
je složka (adresář), tj. kontejner souborů a může obsahovat kolekci souborů,
Ü jaké vlastnosti mají jednotlivé objekty,
Ü jaké metody lze použít u jednotlivých objektů.
2.1.1 Java skript
Java skript je interpretační, objektově orientovaný skriptový jazyk. Nemá sice
takové možnosti jako plně implementované objektově orientované jazyky jako C++ a Java,
ale pro účely psaní skriptů (pro klientskou i serverovou stranu služby WWW) plně postačuje.
Java skript přitom není zjednodušenou verzí jazyka Java, ale je tomuto jazyku podobný svou
skladbou (syntaxí).
Java skript má samozřejmě jistá omezení. Například v něm nelze napsat samostatnou
aplikaci, vždy je závislý na prostředí, například na prohlížeči (obsahujícím interpret Java
skriptu) nebo na službě WWW na serveru (také obsahující interpret Java skriptu). Má také
malé schopnosti číst a vytvářet klasické soubory.
132
2.1.1.1 Příklad 1: kontrola obsahu pole
Příklad ukazuje, jak může skript pro klienta zkontrolovat zápis do prvku formuláře –
do textového pole.
<!-function ntest(i) {
var r1 = document.forms[i].lokalita.value;
if ((r1 == ““) || isNaN(r1)) {
alert(“Lokalita: nutno zadat celé číslo!“);
return false;
}
else
if (r1.lastIndexOf(“.“) > 0) {
alert(“Lokalita: nutno zadat celé číslo!“);
return false;
}
else {
document.forms[i].submit();
return true;
}
}

</SCRIPT>
Kontrola probíhá ve formuláři:
<FORM METHOD=“POST“ ACTION=“lokalita.asp“>
Lokalita: <INPUT TYPE=“text“ NAME=“lokalita“>
Popis: <INPUT TYPE=“text“ NAME=“popis“>
<INPUT TYPE=“hidden“ NAME=“funkce“ VALUE=“NEW“>
<INPUT TYPE=“button“ VALUE=“Přidat“ OnClick=“ntest(1)“>
</FORM>
Tento formulář je jeden z řady formulářů pro přidání více lokalit. Proto má funkce
ve svém argumentu proměnnou i. První formulář má číslo 1. Proto má volání funkce ntest
ve formuláři číslo 1. V každém formuláři je textové pole „lokalita“.
Funkce „ntest se spustí, jakmile uživatel stiskne tlačítko „Přidat“. Funkce zkontroluje,
zda bylo zadáno číslo. K tomu používá standardní funkci Java skriptu, isNaN. Protože tato
funkce by propustila i desetinné číslo zapsané s tečkou, kontroluje funkce „ntest“ dále, zda
zápis v poli „lokalita“ neobsahuje desetinnou tečku. Funkce také kontroluje, zda uživatel
nenechal pole „lokalita“ prázdné, když stiskl tlačítko „Přidat“.
Když není něco v pořádku, vypíše funkce chybové hlášení použitím standardní funkce
Java skriptu „alert“.
133
JAK DÁL?
2.1.1.2 Příklad 2: kontrola hesla
Druhý příklad ukazuje kontrolu hesla. Heslo je nutno zadat dvakrát stejně. Funkce
„checkit“ kontroluje, zda jsou oba zápisy hesla v textových polích „passwd“ a „passwd2“
shodné.
<!-function checkit() {
var pass1 = document.regform.passw.value;
var pass2 = document.regform.passw2.value;
if ( pass1 == pass2 ) {
document.regform.submit();
return true;
} else {
alert(“Pozor - heslo se neshoduje s heslem pro ověření!“);
return false;
}
}

</SCRIPT>
A zde je odpovídající formulář. Všimněte si názvů prvků „passw“ a „passw2“:
<table border=“0“>
<form NAME=“regform“ METHOD=“POST“ ACTION=“heslo_z.asp“>
<tr>
<td>Staré heslo: </td>
<td> <input type=“PASSWORD“ NAME=“passwold“ SIZE=“10“></td>
</tr>
<tr>
<td>Nové heslo: </td>
<td> <input type=“PASSWORD“ NAME=“passw“ SIZE=“10“></td>
</tr>
<tr>
<td>Potvrzení nového hesla: </td>
<td> <input type=“PASSWORD“ NAME=“passw2“ SIZE=“10“></td>
</tr>
<tr><td colspan=“2“>
<center>
<input TYPE=“button“ VALUE=“Odeslat“ onClick=“checkit()“>
</center>
134
</td></tr>
</form>
</table>
2.1.2 Visual Basic
VB skript je velmi podobný programovacímu jazyku Visual Basic. Má malé rozdíly
v syntaxi (například za NEXT nelze napsat proměnnou cyklu). Dá se použít v několika prostředích, včetně klientské i serverové strany WWW služby.
2.2 Dynamika pomocí programů, filtrů a skriptů
Slovo „dynamika“ z hlediska uživatele můžeme nahradit slovem „pružnost“. Normální
publikační systém má obsah svých HTML stránek neměnný. Nezáleží na tom, kdo si je prohlíží, kdy a odkud je prohlíží, jejich obsah je stále stejný, jestliže ho nezmění autor.
Již brzy po vzniku služby WWW začali uživatelé potřebovat, aby server pružně reagoval
na jejich požadavky. Jako příklad může posloužit vyhledávání slova ve slovníku, vyhledávání
pojmu v takových portálech, jako je Seznam nebo AltaVista, nebo hledání v různých databázích třeba zboží v ceníku výrobního závodu či velkoobchodu. Další velkou oblastí je identifikace uživatele jménem a heslem, případně dalšími způsoby. Bezpečná identifikace je základem elektronického bankovního spojení a elektronického obchodování.
Na klientské straně má uživatel k dispozici formulář. Server dostane jeho obsah ve formě parametrů se jmény a hodnotami. Jména určil autor formuláře, hodnoty dodal uživatel
svým výběrem.
Teď je třeba, aby server odpověděl podle toho, jaké jsou zadané parametry. Obyčejně
se podle nich vytvoří nová webová stránka v jazyce HTML, která může případně obsahovat
další formulář. Nová stránka má buď na serveru předlohu, jako šablonu, nebo vzniká činností
programu. Stránka má vždy určitou část, která obsahuje požadované údaje z databáze, souborů apod. Pouze při ověření totožnosti (identifikaci) uživatele je výsledkem přihlášení anebo
sdělení, že uživatele přihlásit nelze.
Server může být pro tyto funkce programován způsobem „program“, „program+šablona“, nebo „skript“, „skript+šablona“. Šablona je předloha webové stránky. Jsou rozšířeny
různé způsoby řešení, jako příklad si uvedeme:
Ü CGI – Common Gateway Interface: program se šablonou anebo skript,
Ü ISAPI – Internet Server Application Program Interface: obvykle program, též skript,
Ü PHP – PHP Hypertext Preprocessor: skript,
Ü ASP – Active Server Pages: skript se šablonou.
Každé z těchto řešení vyžaduje, aby autor dobře znal prostředí Web serveru, který bude
WWW službu poskytovat. Publikační a formulářový mechanismus HTML se pak stává pouze
součástí aplikací spouštěných a využívaných z jednotného prostředí Web prohlížeče.
Poznámka: Ve zkratce PHP zastupuje první písmeno „P“
samotnou zkratku PHP.
JAK DÁL?
135
2.2.1 CGI
Aplikace CGI může být napsána jako program (EXE) nebo skript, například Perl skript.
Program nebo skript CGI se provede, kdykoli Web server obdrží URL odkaz obsahující jméno
programu či skriptu a parametry programem vyžadované.
Pro CGI programy je třeba vytvořit na serveru adresář, standardně se jménem
CGI-BIN, umístit do něj výkonné programy, ale z bezpečnostních důvodů umístit data
jinam. Pokud chcete používat skripty, je třeba získat interpret skriptů, například Perl. Nastavte
pro adresář odpovídající práva. Zaveďte asociaci mezi příponou skriptových souborů
(např. „.PL“ pro Perl) a interpretem.
Interpret je také možno označit jako skriptový stroj (script engine). Pak nelze z adresáře spouštět výkonné soubory EXE, ale spouští se interpret skriptů. Datové soubory a stránky HTML mohou být v tomto případě umístěny ve stejném adresáři jako skripty. Prohlížeč
zobrazí soubory (třeba .GIF) a interpret provede skripty, ale nikdo nemůže z prohlížeče spustit program ani zobrazit obsah skriptu neoprávněně.
2.2.2 ISAPI
Internet Server API (ISAPI) je prostředek pro tvorbu aplikací s vnější formou DLL
knihoven. Tyto programy se zavádějí do paměti při startu služby WWW a zůstávají tam jako
residentní. Proto mohou být výrazně rychlejší než aplikace CGI, a dále mohou být napsány jako tzv. filtry řízené událostmi, které jsou přinášeny požadavky na zpracování stránek
(s formuláři).
Ovládacím jazykem aplikací ISAPI je obvykle C nebo C++, pro něž jsou připraveny
API funkce, ale může to být rovněž skript, například Perl pro ISAPI.
Aplikace ISAPI je aktivována vyplněním a odesláním formuláře HTML nebo odkazem
z HTML stránky. V obou případech dostává od uživatele údaje, na jejichž základě získá, zpracuje nebo vytvoří návratová data. Nakonec generuje odpovědní HTML stránku (příp. více
stránek), která je odeslána uživateli na jeho Web prohlížeč.
136
Filtr ISAPI je speciálním případem aplikace ISAPI. Reaguje na události spojené
s přijetím požadavků a parametrů od uživatele a odesláním generované odpovědi uživateli.
To umožňuje automaticky předzpracovat, například dešifrovat, příchozí údaje a pozpracovat,
například zašifrovat, odchozí údaje (generovanou HTML stránku).
Pro přístup k databázi může ISAPI skript použít prostředek IDC (Internet Database
Connector), který je implementován jako HTTPODBC.DLL.
2.2.3 ASP: Skriptový systém pro serverovou stranu
Po zkušenostech s CGI a ISAPI rozšířil Microsoft řešení postavené na technologii ActiveX. Jeho důležitými složkami jsou prostředky ADO pro přístup k databázi a ASP
pro skriptové ovládání ADO, generování HTML stránek a další činnosti.
2.2.3.1 Základní charakteristika ASP
ASP znamená Active Server Pages. Je to skriptovací systém vyvinutý firmou Microsoft.
Jeho příkazy se provádějí již na serveru a vlastně „dogenerují“ HTML stránku podle určité šablony. Vytvořená stránka se pak přenese ze serveru do prohlížeče, kde se zobrazí nebo může
ještě dojít k interpretaci klientského skriptu.
Charakteristickou zvláštností skriptů ASP je to, že umožňují zařadit šablonu vytvářené webové stránky přímo do skriptu. Lze tedy ASP psát jako „pouze skript“ i jako „skript
se šablonou“.
Jazyk ASP skriptů implementovaných v IIS je buď Java Script nebo VBScript. Skripty
pro server jsou od textu stránky odděleny speciálními dvojznaky <% a %>. Takto vložených
částí může být v textu stránky libovolně mnoho.
Vše, co je uvnitř dvojznaků <% a %>, tedy mezi <% a %>, je částí skriptu, zpracuje to server a ve výsledné stránce se to neobjeví. Objeví se však výsledek činnosti skriptu.
Vše, co je vně dvojznaků <% a %>, tedy mezi %> a <%, je částí HTML šablony. Skript
to může propustit na výstup, a to podle potřeby i opakovaně. Na začátku ASP souboru (běžně
se nazývá „ASP stránka“) je „přepnuto“ na HTML, tj. očekává se značka HTML.
Jestliže chcete dát do ASP stránky záhlaví, bude její první řádek vypadat asi takto:
<% @ LANGUAGE=VBSCRIPT CODEPAGE=1250 %>
Definuje použitý skriptový jazyk pro server (zde VB skript) a kódovou stránku pro znakové řetězce (zde středoevropské jazyky, Windows ANSI). Server definici přijme, ale protože
je uzavřena mezi dvojznaky <% a %>, neobjeví se ve výstupní webové stránce.
Při psaní ASP je dále potřeba dávat pozor na HTML poznámky (mezi ). Protože
skript pro server se vyhodnocuje dříve (na serveru) než značky a poznámky HTML (na klientu), nelze skriptové příkazy uzavírat do HTML poznámek, nebude to účinkovat.
2.2.3.2 Přístup k údajům z formuláře
Je-li potřeba zpracovat formulář, potřebuje autor skriptu přečíst, jak uživatel vyplnil
pole formuláře a nastavil jeho ovládací prvky. To vše, včetně skrytých polí, dostane autor použitím funkce:
Request.Form(„název“)
kde název je přesně ten název, jaký autor formuláře dal ovládacímu prvku parametrem NAME. Prohlídkou definic ovládacích prvků zjistíte, že všechny hodnoty (VALUE)
JAK DÁL?
137
jsou textové. Dají se tedy vyhodnotit po dohodě s autorem formuláře. Formulářová webová
stránka může obsahovat nějaký skript (pro klienta), který zkontroluje, zda určitá pole (jako
třeba PSČ) obsahují jen číslice nebo zda obsahují jenom povolené údaje, případně zda je uživatel vůbec vyplnil. To pak usnadní programování skriptu na ASP stránce.
2.2.3.3 Vkládání souborů
Na libovolné místo skriptu ASP stránky lze vložit obsah jiného souboru. Tyto
vkládané soubory mají příponu .INC. Používají se tehdy, když existuje nějaká společná
část, kterou chcete zařadit do více ASP stránek (a případně z nich generovaných webových
stránek).
Příklad: na konci mnoha webových stránek chcete zobrazit pod čarou svůj podpis,
adresu a název firmy. Před konec každé ASP stránky zařadíte:

Do souboru, v tomto případě footer.inc, zapíšete úsek zdroje, který potřebný výpis
provádí. Prohlížeč nahradí celou poznámku obsahem souboru:
<hr>
<i>Aleš Kastner<br>
PragoData, a.s.<br>
mailto:[email protected]<br></i>
Jednoduchá testovací ASP stránka může vypadat takto (neobsahuje vlastně
žádný skript):
<HTML>
<HEAD>
<Title>Test ASP - 1</TITLE>
</HEAD>
<BODY>
<H2>Test Include</H2>

</BODY>
</HTML>
Takto bude stránka zobrazena v prohlížeči (vše za záhlavím je vloženo ze souboru
footer.inc):
V příkladu je použita relativní adresace (vkládaný soubor je o úroveň výše), ale můžete
sem zapsat jakékoli URL. Pokud je vkládaný soubor ve stejném adresáři jako soubory – zdroje
ASP stránek, stačí napsat jeho jméno s příponou.
138
2.3 Napojení na zdroje dat na serverové straně
2.3.1 FileSystem
Základní skriptový objektový model „Scripting“ obsahuje takové objekty, jako:
Ü FileSystemObject – systém souborů (parametrem funkcí je běžně používaná cesta
k souboru, složená z písmene jednotky, cesty, jména a přípony souboru),
Ü Folder – složka nebo adresář: hledání a další funkce,
Ü TextFile – textový soubor jako řada znaků: čtení, zápis, EOF atd.
Pomocí tohoto modelu se dostanete k běžným textovým souborům serveru.
2.3.1 ODBC ovladače
Ovladače (anglicky: drivery) ODBC (Open Data Base Connectivity, otevřená připojitelnost databáze) umožňují jednotným způsobem pracovat s různými druhy databází. Databáze
jsou pomocí ODBC přístupné z programů a skriptů.
ODBC vychází ze skutečnosti, že všechny dnes používané databázové systémy dovolují pohlížet na databázi jako na skupinu tabulek. Každá tabulka má řádky (jednotlivé záznamy) a sloupce (jednotlivá pole v záznamech). Mezi tabulkami mohou být vazby, přesně vzato
mezi polem jedné tabulky a polem (nebo více poli) jiné tabulky.
Světoví výrobci databází i nezávislé firmy přistoupili na tuto koncepci a vytvářejí pro své
databáze řadu ovladačů ODBC. Známe ovladače ODBC pro databázi Jet, databázi SQL serveru (obě Microsoft), Oracle, SyBase, Progress, FoxBase, dBase a další.
Ovladač ODBC musí mít definováno spojení na databázi. Systémy Windows nabízejí buď
definici předem připravenou a uloženou do systému, anebo definici pomocí tzv. Connection
String (znakového řetězce obsahujícího všechny potřebné parametry). Parametry spojení
se liší podle použitého ODBC driveru, dále podle toho, je-li databáze umístěna na tomtéž
počítači nebo vzdáleném serveru, případně jde-li o soubor (Fox-, dBase) nebo je potřeba
používat služby databázového stroje (Oracle, Progress, SQL server). V příkladu, který následuje dále, je k otevření objektu Connection (a tedy spojení k databázi) použit právě řetězec
Connection String.
Součástí Connection String může být i jméno uživatele a heslo. Programátor skriptu
může samozřejmě oba údaje získat od uživatele pomocí formuláře. Když je použita předem
nachystaná definice ODBC spojení, jsou jméno s heslem jediné potřebné údaje k otevření
databáze.
2.3.2 ADO: Model pro přístup do databází
Skriptovací jazyk má (v Microsoft Internet Information Server) k dispozici jednoduchý
objektový model pro přístup k databázím, například na SQL server. Tento model se nazývá
ADO (Active Data Objects). Umožňuje otevřít spojení přes ODBC ovladač k databázovému
stroji a číst data nebo je zapisovat do databáze, pokládat dotazy jazyka SQL, vytvářet a zpracovávat recordsety. Recordsety jsou objekty - soubory, které vzniknou SQL dotazem nebo jiným
výběrem požadovaných polí všech relevantních záznamů databází. Recordset je v prostředí
HTML dobře zobrazitelný tabulkou.
Z objektového hlediska je ADO jednoduchý model v modelové knihovně „ADODB“.
Model se skládá z těchto druhů objektů:
139
JAK DÁL?
Connection
Error
Command
Parameters
Představuje otevřené spojení na databázový zdroj OLE-DB, například prostřednictvím
ovladače ODBC.
Obsahuje detailní hlášení chyb přístupu; aktualizuje se po každém výskytu chyby
v operaci, která používá ADO.
Definuje příkazy, které chce uživatel s daty DB provést.
Field
Volitelná kolekce parametrů, které chce uživatel předat objektu Command.
Představuje sadu záznamů z tabulky, objektu Command nebo výsledku SQL příkazu.
Lze ji vytvořit bez nutnosti budovat objekt Connection.
Představuje jeden sloupec (pole) dat v sadě záznamů (Recordset).
Property
Kolekce hodnot vlastností objektů předaných do ADO.
Recordset
Prakticky nejpoužívanějšími objekty jsou Connection a Recordset., ovšem také Error
pro testování chyb. Schéma práce s databází je pak velmi jednoduché v častém případě,
že se z databáze pouze čtou záznamy:
Ü Skript vytvoří spojení a otevře je, zkontroluje úspěch.
Ü Skript získá parametry od uživatele a vydá dotaz – příkaz jazyka SQL, který získá
žádané záznamy a vytvoří je ve tvaru objektu Recordset. Často používaný příkaz
může být uložen do objektu Command.
Ü Skript prohledá recordset nebo z něj sestaví tabulku jazyka HTML do vytvářené
webové stránky. Tato stránka se automaticky odešle uživateli, když skript pro server
skončí. Stránka obsahuje konkrétní údaje a proto není uložena trvale a neměla by se
ani udržovat ve vyrovnávací paměti prohlížeče.
Práce s poli záznamů v recordsetu je velmi jednoduchá. Probíhá podle těchto pravidel:
Ü Záznamy recordsetu se podobají souboru. Je vždy přístupný jen jeden záznam,
pro posun na jiný (například další) záznam existují příkazy (metody objektu
Recordset).
Ü Jednotlivá pole jsou dostupná jako název-rec!název-pole, kde název-rec je název
objektu recordset a název-pole je jméno pole, jak je definováno v tabulce databáze.
Ü Je třeba vědět, jakého typu jsou pole záznamu (číselná, textová, datová – obsahující
datum). Podle typu je třeba použít převodní funkci na znakový řetězec ke zobrazení,
nebo použít proměnnou odpovídajícího typu pro uložení údaje.
Obdobná vcelku jednoduchá pravidla platí také pro změny záznamů. Při použití ovladačů ODBC a modelu ADO je skriptový program téměř nebo úplně nezávislý na druhu
databáze. Je téměř nezávislý, používá-li zadání všech údajů v řetězci Connection String.
Je zcela nezávislý, používá-li jen název ODBC spojení, které je definováno prostředky
operačního systému Windows („Datové zdroje“ dostupné z Ovládacích panelů.)
2.3.4 Princip činnosti ASP + ADO na příkladu
Pro základní orientaci následuje velmi jednoduchý ASP skript pro získání dat z databáze a zobrazení tabulkou. Jeho příkazy jsou vlevo očíslovány kvůli odkazům (ve skutečném
skriptu ovšem čísla nejsou).
Skript má dvě roviny: serverovou (ASP používající ADO) a klientskou (HTML).
Vzájemně jsou odděleny dvojicemi znaků <% a %>, které si můžete představit jako závorky: vně závorek je HTML část, uvnitř ASP část. Logicky vzato ASP část tvoří skript, který
generuje proměnné partie HTML části, nebo jen zařazuje do HTML stránky získané údaje.
140
V praxi propouští ASP všechny HTML části do výsledné stránky a zpracuje pouze ASP
části tvořící skript; tyto části již ve výsledné stránce nebudou, bude v ní však výsledek jejich
činnosti.
1
2
3
4
5
6
7
8
<HTML>
<HEAD>
<TITLE>ADO test přístupu do DB</TITLE>
</HEAD>
<BODY BGCOLOR=#CCCCCC>
<%
Set Conn = Server.CreateObject(„ADODB.Connection“)
Conn.Open „Driver={SQL Server};SERVER=kachna.osapd.cz;“_
& „DATABASE=Merkurius;UID=sa;PWD=katastrofa;“
9
Set RS = Server.CreateObject(„ADODB.RecordSet“)
10
RS.Open „SELECT * FROM podat ORDER BY nazev ASC;“,Conn %>
11
<P>
12
<TABLE BORDER=1>
13
<TR>
14
<% For i = 0 to RS.Fields.Count - 1 %>
15
<TD><B><% = RS(i).Name %></B></TD>
16
<% Next %>
17
</TR>
18
<% While Not RS.EOF %>
19
<TR>
20
<% For i = 0 to RS.Fields.Count - 1 %>
21
<TD VALIGN=TOP><% = RS(i) %></TD>
22
<% Next %>
23
</TR>
24
<%
25
RS.MoveNext
26
Wend
27
RS.Close
28
Conn.Close %>
29
</TABLE>
30
<BR>
31
</BODY>
32
</HTML>
Vysvětlení k řádkům skriptu:
Ü Řádky 1 až 5 se zkopírují do výsledné stránky HTML.
Ü Řádkem 6 začíná část ASP skriptu, jehož syntaxe se podobá Visual Basicu.
Ü Na řádku 7 se vytvoří objekt Connection modelu ADODB. Objekt je zastoupen
proměnnou Conn. Tento příkaz lze srovnat s deklarací pro Visual Basic.
Ü Na řádku 8 (s pokračováním) se objekt Conn otevře, čímž se vytvoří spojení
s databází přes ovladač ODBC. Další dodané údaje určují ovladač (driver),
server a zejména uživatele SQL serveru (UID) a heslo (PWD). Řetězec údajů
pro otevření lze napsat několika způsoby, například spojení může být předem
definováno manažerem ODBC a není pak třeba udávat ovladač a server.
141
JAK DÁL?
Ü Na řádku 9 se vytvoří další objekt, a to recordset RS.
Ü Na řádku 10 se tento objekt naplní tabulkou údajů, která vznikne položením
dotazu SQL. Vyberou se všechna pole (sloupce) tabulky Podatelna a všechny
její řádky, které se seřadí podle pole „nazev“.
Ü Zbytek stránky slouží k zobrazení obsahu recordsetu RS v tabulkové formě.
Jeho základní tvar je tedy psán v HTML a ASP části řídí cykly generování
tabulky.
Ü Řádky 11 až 13 se kopírují jako záhlaví tabulky, řádky 14-16 generují nadpisy
sloupců podle názvů polí. Vyjádření „= RS(i).Name“ znamená, že se jméno
pole zkopíruje do buňky tabulky (<TD>...</TD>).
Ü Řádek 17 se kopíruje (nový řádek tabulky).
Ü Řádky 18 až 26 tvoří dvojitý cyklus skriptu ASP. Vnější řídí generování řádků
s posunem na další záznam recordsetu (RS.MoveNext). Vnitřní předává
ke zobrazení údaje jednotlivých polí v záznamu do buněk řádku tabulky.
Ü Řádky 27-28 uzavírají použité objekty.
Ü Řádky 29-32 se opět kopírují a tvoří závěr generované stránky HTML.
Stránka se vykreslí v prohlížeči, který samostatně stanoví další podrobnosti, jako šířku
sloupců tabulky.
Když necháte ASP skript proběhnout a zobrazíte si text výsledné HTML stránky (Source
- Zdroj), dostanete:
<HTML>
<HEAD>
<TITLE>ADO test přístupu do DB</TITLE>
</HEAD>
<BODY BGCOLOR=#CCCCCC>
<P>
<TABLE BORDER=1>
<TR>
<TD><B>idpodat</B></TD>
<TD><B>nazev</B></TD>
</TR>
<TR>
<TD VALIGN=TOP>7</TD>
<TD VALIGN=TOP>Hlavní</TD>
</TR>
<TR>
<TD VALIGN=TOP>Testování</TD>
</TR>
<TR>
<TD VALIGN=TOP>Testování 1</TD>
</TR>
</TABLE>
<BR>
</BODY>
</HTML>
142
2.3.5 Problémy přístupových práv
Tak jako ke službě FTP, je i k Web službě možný dvojí přístup: podle uživatelského účtu
s oprávněním a anonymní. U Web serverů na Internetu je anonymní přístup nejčastější.
Pokud anonymní uživatel pouze prohlíží pevné HTML stránky, nedochází k problémům. Jakmile však použije stránku s ASP skriptem, provádí server na jeho žádost určité
operace, spouští procesy, přistupuje do databází. Pro tyto účely potřebuje server skutečný
účet – pro anonymně přihlášené uživatele – s jistými přesně definovanými právy. Takový účet
se vytváří při instalaci WWW služby na serveru IIS.
2.4 Rozšířený jazyk tvorby stránek
Tyto další poznámky slouží jenom k tomu, aby čtenář zjistil „co to je“ a ne „jak to vypadá“, natož „jak to mám používat“.
2.4.1 HTML verze 4
HTML 4 je nástupce HTML 3.2; DHTML je všeobecný název pro dynamický HTML.
Překotný vývoj způsobil, že dynamika se do HTML dostala dříve, než byl schválen HTML 4
(byl dosud ve stadiu návrhu). DHTML je zkratka pro stránky používající CSS (kaskádové styly) a skripty (pro klienta) Javascript, Jscript, VBScript nebo ECMAScript k dosažení dynamického chování webových stránek v prohlížeči. Prohlížeč MS Internet Explorer je schopen
zobrazovat takové stránky od verze 4.0. Stránky, které snad uvidíte s příponou .DHTML, lze
vytvořit pod HTML 4.
HTML 4 se vyznačuje širokým zapojením objektů do jazyka. Má k dispozici třídy, z nichž
jsou objekty vytvářeny. Třída (anglicky: class) obsahuje program, tedy veškerou „chytrost“
a “umění“ každého objektu, který se z ní vytvoří. Každý objekt má svůj název nebo index, obsahuje svoje vlastnosti a vnitřní data. Tím se liší od jiných objektů vzniklých z téže třídy.
Musím zdůraznit, že prohlížeče jsou od Internet Explorer 4.0 a Netscape 3.0 schopné
zpracovat webové stránky napsané v HTML verze 4. Proto budete pravděpodobně moci vyzkoušet všechny příklady, které jsem do této kapitoly zařadil.
Následují některé rozdíly a rozšíření HTML 4 oproti HTML 3.2.
2.4.1.1 URI
Pojem URL je v HTML 4.0 rozšířen na URI (Uniform Resource Identifier, jednotný
identifikátor zdroje). Definice URI obsahuje části HTML stránek označené návěštími (#návěští) i relativní adresaci vzhledem k umístění aktuální stránky. Zahrnuje také další způsoby,
jak žádaný dokument identifikovat, nejen protokoly. Patří sem například mailto: pro elektronickou poštu a file: pro soubor přístupný na klientském počítači. URI také rozlišuje písmena
velké a malé abecedy.
2.4.1.2 Ukládání skriptů do zvláštních souborů
Parametr SRC značky <SCRIPT> dovoluje uložit skripty pro klienta do oddělených
souborů.
SRC = „URI“
JAK DÁL?
143
2.4.1.3 Podpora mezinárodního použití HTML v mnoha jazycích
Textový obsah dokumentů HTML 4 může být napsán v kterémkoli jazyce a přitom
mohou být tyto dokumenty snadno šířeny po světě. HTML 4 podporuje zápis zprava doleva
i střídavě. Lze používat národní znaky, diakritická znaménka, speciální interpunkci a další jazykové jevy. Podpora dále zahrnuje tzv. indexování, což je hodnocení slov tak, aby bylo
možné hledání podle obsahu, a to ve všech jazycích. Pro osoby zrakově postižené je zde
například lepší převod textu na mluvené slovo.
2.4.1.4 Podpora pro použití osobami smyslově postiženými
Podpora obsahuje technologie pro uspokojení specifických potřeb uživatelů s různými
schopnostmi:
Ü Lepší oddělení struktury a vzhledu dokumentu. Doporučuje se používat styly textu
(.CSS) místo značek pro úpravu textu, jako <B> nebo <I>.
Ü Zlepšení vlastností formulářů, včetně doplněného ovládání pomocí kláves,
schopnosti seskupovat prvky podle jejich významu a použití aktivních návěští.
Ü Schopnost doplnit textový popis vloženého objektu.
Ü Nový mechanismus pro mapy (značka <MAP>) na klientské straně, který dovolí
autorům integrovat (spojit) textové a obrazové odkazy.
Ü Alternativní text může doprovázet jak obrázky (značka <IMG>), tak obrazové mapy
(značka <AREA>).
Ü Parametry TITLE a LANG (jazyk) lze uvést u všech značek.
Ü Nové značky <ABBR> (zkratka složená z počátečních písmen, anglicky:
abbreviation) a <ACRONYM> (akronym, tj. jiný druh zkratky, nepoužívající pouze
počáteční písmena).
Ü Větší sortiment cílových zařízení (elektrický psací stroj, braillovský řádek atd.)
pro použití ve stylech (.CSS).
Ü Zlepšené a nové funkce tabulek – <CAPTION>, <COLGROUP> (byly popsány) –
a nevizuální způsob vykreslení tabulky pro nevidomé osoby.
Autoři, kteří dodrží doporučený způsob návrhu (oddělí strukturu od vzhledu stránky),
budou mít méně práce s přizpůsobením novým technologiím.
2.4.1.5 Tabulky
Je zaveden nový model (v tomto materiálu již popsán). Autoři mají nyní větší vliv
na strukturu a rozvržení tabulky, například pomocí skupin sloupců - <COLGROUP>. Mohou
také doporučit šířky sloupců (par. WIDTH), a tak se může tabulka vykreslovat uživateli
postupně, jak je přijímána ze serveru; jinak by bylo možno ji vykreslit až po příjmu všech
jejích řádků.
2.4.1.6 Složené dokumenty
HTML nyní nabízí standardní mechanismus pro vkládání objektů a aplikací do HTML
dokumentů (čili webových stránek). Značka <OBJECT> (a také <IMG> a <APPLET>)
poskytuje prostředek pro vkládání obrázků, videoklipů, zvuků, vzorců, specializovaných
aplikací a dalších objektů do dokumentu. Dovoluje také autorům stanovit pořadí způsobů
vykreslení nebo jiného předložení uživateli v případech, kdy nelze standardní zobrazení použít
(třeba když klientský systém nemá prostředky k přehrání videoklipu).
144
2.4.1.7 Definice stylů
Styly zjednodušují značkování – úpravu textů a odstavců v dokumentech HTML a značnou měrou oddělují obsah a strukturu stránky HTML od jejího zobrazení. Autor i uživatel
tak mohou ovlivnit různé vlastnosti zobrazení: druhy a řezy písma (fonty), zarovnání textu,
barvy atd.
Údaje o stylu lze určit pro jednotlivé značky i pro skupiny značek. Údaje o stylu je možno
zapsat do dokumentu HTML nebo jako samostatné soubory (*.CSS). Způsob připojení stylu
k dokumentu je nezávislý na jazyku, kterým je styl programován.
Před zavedením stylů museli autoři používat formátovací značky jako <B>, <FONT>,
<CITE> nebo <BLOCKQUOTE>. Autoři k formátování využívali také tabulky i obrázky.
Tyto schopnosti byly zakomponovány do prohlížečů a je předpoklad, že se ještě nějakou dobu
udrží. Ale přednost má použití stylů, a tak značky a atributy, které už „nemají budoucnost“,
jsou v popisu HTML 4 označeny jako „deprecated“ (v útlumu, doslova: zavržené, neschválené). Jsou to značky:
<APPLET>, <BASEFONT>, <CENTER>, <DIR>, <FONT>, <ISINDEX>, <MENU>, <S>,
<STRIKE>, <U>.
Dále vzhledem k interpretaci webových stránek hlasem (pro nevidomé) je doporučeno
dát přednost značce <STRONG> (silné zvýraznění) před <B> (mají téměř stejný význam,
většinou se <STRONG> zobrazí tučně).
Ale vraťme se ke stylům. HTML 4 podporuje následující vlastnosti stylů:
Různé možnosti umístění stylu
Uložení stylu do odděleného souboru umožní jeho snadné vícenásobné a opakované
použití. Soubory mají příponu .CSS, což značí Cascading Style Sheets – kaskádové styly. Kdy
a proč je styl kaskádový, to je popsáno dále. Někdy je ale užitečné umístit definici stylu přímo
v dokumentu, ve webové stránce, kde je použita. Zde můžete styly buď popsat ve speciální
skupině <STYLE>…</STYLE> na začátku dokumentu, nebo zařadit styly mezi atributy značek přímo v těle dokumentu. Pro snadnější manipulaci se styly v rámci webového sídla (web
site) se také popisuje, jak použít záhlaví definovaná protokolem HTTP pro nastavení stylů,
které mají ovlivnit vzhled dokumentu.
Nezávislost na konkrétním jazyku, v němž je styl napsán
Definice HTML 4 nespojuje HTML s určitým konkrétním jazykem pro styly. To umožňuje použít kterýkoli z mnoha takových jazyků, od jednoduchých, vhodných pro většinu uživatelů, ke složitým, které vyhovují několika uživatelům s vysoce specifickými potřebami. Běžným
jazykem, v němž jsou napsány i příklady, je jazyk CSS (Cascading Style Sheet).
Kaskádování
Je to schopnost míchat styly z několika zdrojů dohromady. Kaskádování mají některé jazyky pro psaní stylů, jako právě jazyk CSS. Mohou například existovat firemní styly,
styly společné skupině dokumentů a styly určené pro jediný dokument. Jejich oddělení a zápis
do různých souborů *.CSS umožňuje jejich opakované použití i přenos např. do prostředí jiné
firmy se samočinným přizpůsobením vzhledu dokumentů. Kaskáda definuje posloupnost stylů, kde pravidla stylu pozdějšího v hierarchii mají přednost před pravidly stylu dřívějšího.
Jestliže firma A měla firemní styly definovány v souboru A.CSS a vyvinula dílo zapsané
do webových stránek tvořících webové sídlo, pak vzhled je dán definicemi ze souboru A.CSS.
JAK DÁL?
145
Výjimkami jsou (1) případy, kde existuje soubor SIDLO.CSS s definicemi stylů platnými
pro skupinu stránek a (2) případy, kde je styl určen přímo ve webové stránce.
Poskytne-li firma A toto dílo k použití firmě B, která má vlastní firemní styly B.CSS,
pak nejvhodnější postup je: vytvořit dílo s odkazy na kopii A.CSS, která se bude jmenovat
například FIRMA.CSS. Firma B pak nahradí tento soubor kopií svého souboru stylů, B.CSS
(vytvoří jeho kopii se jménem FIRMA.CSS). Uplatní se všechny styly definované v
B.CSS, které nejsou zároveň definované pro skupinu webových stránek ani v jednotlivých
stránkách.
Závislosti na médiu
HTML 4 dovoluje autorům psát webové stránky nezávislé na médiu. Proto mohou uživatelé vidět tyto stránky pomocí různých zařízení a prostředků. Jsou to například grafické
displeje, počítače se systémy Windows, MacIntosh nebo X11, zařízení, umožňující přístup
na Internet z televizních přijímačů, speciální mobilní telefony, ale také prohlížeče pro nevidomé, převádějící obsah na řeč nebo text na Braillovo hmatové písmo. Těmto jmenovaným
(a jiným) zařízením říkáme souhrnně média.
Styly jsou naopak zaměřeny na konkrétní média nebo skupiny médií. Styl určený pro
obrazovku je použitelný také pro tisk, ale není už použitelný pro „mluvící“ prohlížeč pro nevidomé, který převádí text na řeč. Styly mohou počítat s různými médii. Autor může v jednom
souboru definovat několik stylů určených pro různá média. Styl může obsahovat seznam
médií nebo jejich skupin.
V kapitole 1.13 je popsán jazyk CSS. Existuje již jeho druhá verze CSS2, definující
tato média:
Ü all - všechna média,
Ü aural - zvukové syntezátory,
Ü braille - pro taktilní (dotyková) zařízení pro nevidomé,
Ü embossed - pro tiskámy Braillova písma,
Ü handheld - minipočítače „do ruky“ s malou obrazovkou (PDA),
Ü print - pro tisk,
Ü projection - pro prezentace (promítání),
Ü screen - pro běžné počítačové obrazovky,
Ü tty - pro terminály a jiné jednotky s pevně daným rozměrem znaku,
Ü tv - pro televizní zařízení (WebTV),
Ü a další.
Stránková média
Tiskárny a podobná zařízení si vyžádala schopnost stránkování, tedy rozdělení textu
a obrázků na stránky – části pevné délky. CSS2 má nové pravidlo @page, které umožňuje definovat takové vlastnosti, jako je velikost okraje, zalomení stránky, oboustranný tisk, skládání
více stránek na tiskový arch, orientaci tisku (na šířku, na výšku) a další.
Alternativní styly
Autor může uživateli nabídnout několik způsobů, jak si může webové stránky zobrazit.
Například, zda použije malé nebo větší základní písmo: malé použije, když chce mít na ploše
obrazovky co největší část dokumentu, kdežto velké použije, když chce snížit únavu z čtení
dokumentu. HTML 4 umožňuje autorům zvolit přednostní styl pro zobrazení a nabídnout
také alternativní (jiný) styl vhodný pro jiné uživatele nebo média. Prohlížeč (pokud to dokáže)
může uživateli nabídnout výběr zobrazení.
146
Klesne při použití stylů rychlost zobrazení?
Je jisté, že čtení dalších souborů se styly nebo čtení dlouhých popisů stylů ve zdrojovém
souboru webové stránky zdržuje její zavedení a zobrazení. Když je požadováno, aby se webová stránka přečetla a zobrazila s minimálním zpožděním, mohou autoři použít zápis stylu přímo do značky, které se týká, například do začátku odstavce <P>.
Při aplikaci stylu na více webových stránkách je vhodné, aby byly styly umístěny v samostatném souboru. Ten se při první potřebě zavede do vyrovnávací paměti (cache) prohlížeče
a při dalších odkazech se čte už jen z ní, což probíhá vysokou rychlostí.
2.4.1.8 Psaní skriptů
Autoři mohou ve skriptech (pro klienty) dynamicky vytvářet nové webové stránky, tedy
mohou tvořit „chytré formuláře“, které reagují na to, jak je uživatel vyplní. HTML 4 definuje
řadu událostí, při nichž se dá spustit skript. Například:
Ü onload – prohlížeč dokončil zavedení stránky nebo všech rámců definovaných
ve <FRAMESET>,
Ü onclick – uživatel klepl (klikl) klávesou myši nebo jiného ukazovacího zařízení
na ovládací prvek formuláře,
Ü ondblclick – uživatel provedl dvojklep (dvojklik) klávesou myši nebo jiného
ukazovacího zařízení na ovládací prvek formuláře,
Ü onmouseover – uživatel nasunul ukazatel myši nad ovládací prvek,
Ü onfocus – uživatel přesunul ohnisko (focus) na ovládací prvek, a to buď klávesou
(TAB), nebo pomocí myši (klepnutím na oblast prvku),
Ü onblur – uživatel přesunul ohnisko (focus) pryč z ovládacího prvku, buď klávesou
(TAB), nebo pomocí myši (klepnutím na jiné místo); vhodná příležitost zkontrolovat
přípustný zápis resp. výběr v opouštěném ovládacím prvku,
Ü onsubmit – uživatel odesílá formulář; další příležitost ke kontrole,
Ü onselect – uživatel vybral text nebo jeho část v textovém poli.
Pro každou událost je definován seznam ovládacích prvků, u kterých událost může
nastat.
Způsob vkládání skriptů do dokumentu nezávisí na jazyku, kterým je skript napsán.
2.4.1.9 Tisk
Někdy si autoři přejí umožnit, aby si uživatel mohl vytisknout více dokumentů než pouze
ten, který si právě prohlíží. Tvoří-li dokument část většího díla, pak lze vztah mezi ním a dalšími popsat použitím značky <LINK> anebo RDF (Resource Description Framework – asi
jako: popis zdrojů díla, seznam dokumentů tvořících dílo). Tisková funkce má pak potřebné
návaznosti definovány.
JAK DÁL?
147
2.4.2 Příklady zápisu stylů
Autoři musí určit použitý jazyk stylů pomocí značky <META>. Například pro nastavení
jazyka CSS je třeba dát do záhlaví (<HEAD>) tuto značku:
<META http-equiv=“Content-Style-Type“ content=“text/css“>
Totéž lze definovat záhlavím HTTP:
Content-Style-Type: text/css
Zápis „text/css“ je tzv. MIME klasifikace. Určuje, že vyjádření obsahu bude textové,
v jazyku CSS.
2.4.2.1 Styl v odděleném souboru
Soubor „SPECIAL.CSS“ bude obsahovat definici stylu:
P.special {
color : green;
border: solid red;
}
Do webové stránky zavedete styl použitím značky <LINK>. Není třeba definovat jazyk
značkou META, protože potřebnou definici lze umístit do značky LINK. V oddílu BODY
si všimněte, jak se styl použije:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN“
“http://www.w3.org/TR/html4/strict.dtd“>
<HTML>
<HEAD>
<LINK href=“special.css“ rel=“stylesheet“ type=“text/css“>
</HEAD>
<BODY>
<P class=“special“>Tento odstavec používá speciální zelený text.
</BODY>
</HTML>
Pro odstavec použijeme ve značce <P> parametr CLASS=„special“, protože v souboru stylů je definována třída (class) „P.special“, tedy aplikace stylu „special“ na odstavec
(P, paragraph).
2.4.2.2 Styl je popsán mezi značkami <STYLE>, </STYLE>
V příkladech je řešeno, jak určit, kterých částí HTML stránky se budou definované styly
týkat. Stejné řešení platí i pro případy, kdy je styl uložen ve zvláštním souboru.
Tato definice nakreslí rámeček kolem všech nadpisů úrovně <H1> v celém dokumentu.
<HEAD>
H1 {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
148
Když chcete, aby se tento styl použil jenom na některé nadpisy <H1>, zavedete třídu.
Všechny nadpisy <H1> této třídy použijí definici, kterou upravíte takto:
<HEAD>
H1.myclass {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class=“myclass“>Tento nadpis H1 použije definovaný styl</H1>
<H1>Tento nadpis H1 nepoužije definovaný styl</H1>
</BODY>
Jestliže chcete použít styl na jednotlivé nadpisy (ani na všechny, ani na celou třídu),
upravíte definici a použití stylu pomocí parametru ID:
<HEAD>
#myid {border-width: 1; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class=“myclass“>Tento nadpis H1 nepoužije definovaný styl</H1>
<H1 id=“myid“>Tento nadpis H1 použije definovaný styl</H1>
<H1>Tento nadpis H1 nepoužije definovaný styl</H1>
</BODY>
Ačkoli styl lze použít na mnoho HTML značek, existují dvě značky, kde je jeho použití
zvláště užitečné. Jsou to značky <DIV> a <SPAN>. Obě značky jsou užitečné zvláště s atributy CLASS a ID.
Značka <SPAN> je v HTML 4 nová. Je vytvořena pro účely aplikace stylu na část
odstavce, větu nebo jen několik znaků. Značka je párová. Na rozdíl od <DIV> nezakládá nový
odstavec nebo blok textu.
Příklad ukazuje, jak použít značku <SPAN> pro uplatnění stylu jen na několik slov
odstavce.
<HEAD>
SPAN.sc-ex { font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class=“sc-ex“>První tři slova</SPAN> tohoto odstavce budou
zobrazena v malých kapitálkách.
</BODY>
149
JAK DÁL?
V posledním příkladu se používá značka <DIV> s parametrem CLASS k úpravě textu
na několik odstavců, které představují stručný obsah (tzv. abstrakt) vědeckého článku. Text
bude zarovnán na obou stranách (justify). Použitím parametru CLASS=„Abstract“ lze styl
použít i v jakékoli jiné části dokumentu (webové stránky).
<HEAD>
DIV.Abstract { text-align: justify }
</STYLE>
</HEAD>
<BODY>
<DIV class=“Abstract“>
<P>Sortiment produktů Chieftain je na našem trhu hodnocen
jako vítěz pro příští rok. Tato zpráva ukazuje, jak postavit
produkty Chieftain proti konkurenčním produktům.
</P>
<P>Produkty Chieftain nahrazují řadu Commander, která však
zůstává na cenovém seznamu až do odvolání.
</P>
</DIV>
</BODY>
Jazyková poznámka: Chieftain – anglicky: náčelník,
Commander – anglicky: velitel.
2.4.2.3 Styl je popsán přímo v definici <P> toho odstavce, kde je použit
Toto je nejjednodušší varianta použití:
<P style=“font-size: 12pt; color: fuchsia“>Styl platí pouze v tomto odstavci
(…)
</P>
2.4.3 XML
XML znamená eXtensible Markup Language – rozšiřitelný značkový jazyk. Srovnáním
s HTML (HyperText Markup Language) zjistíte, že už nejde o hypertext, ale o schopnost
jakéhosi „nafukování“. Co ta „rozšiřitelnost“ vlastně znamená?
Ve skutečnosti je XML způsobem zápisu operací s daty. A je to zároveň takový způsob,
který poskytuje metodu, jak popsat strukturu dat a jejich výměnu mezi nejrůznějšími výpočetními systémy. Kromě toho má XML, jak možná tušíte, svůj vlastní objektový model.
A ještě jinak: XML je jazyk s jednoduchou skladbou (syntaxí), který umožňuje snadno
vytvářet další značkovací jazyky nazývané schémata. Samotná schémata popisují struktury
dat. Využijí je především ti programátoři, kteří se zabývají databázovými aplikacemi informačních, řídicích a měřicích systémů. Takové systémy se používají v továrnách, v obchodních
a jiných společnostech a v dalších institucích.
150
Kromě tvorby schémat pro popis dat umožňuje XML také snadnou výměnu dat mezi
partnery, kteří mají třeba zcela odlišné informační systémy. Takové propojení není bez použití
XML snadné. Odvozený jazyk XSLT (eXtensible Stylesheet Language for Transformations)
totiž umožňuje převod dokumentů z jednoho schématu do jiného. Jestliže váš systém
používá schéma A, kdežto systém vašeho partnera používá schéma B, ale v obou jsou
v podstatě tytéž datové prvky se stejným významem, pak dokument lze převést ze struktury
schématu A do B a naopak velmi snadno.
Termín
Vysvětlení
Anglicky
aktualizuje
updates
provádí změny, například prohlížeč, když zobrazuje novou verzi webové stránky
applet
applet
programový prvek obsažený ve stránce, zavedený spolu s ní a spuštěný na straně
klienta
dynamicky
server může webovou stránku vytvořit jednorázově ihned po požadavku z prohlížeče
generované
generated
např. webové stránky, které nejsou předem sestaveny autorem, ale tvoří je server pro
každý požadavek znovu a specificky na dotaz klienta interpretovat brát jednu instrukci
po druhé a vykonávat
Java
Java
programovací jazyk odvozený z C a používaný v mnoha systémech; buď se interpretuje
přímo zdrojový text, nebo překladač vytvoří kódovaný program, který se interpretuje
kontejner
container
objekt, který může obsahovat jiné objekty; může-li obsahovat jen objekty jednoho typu,
je to kolekce
metody
methods
podprogramy objektu, které lze zvenku volat a žádat tak, aby objekt vykonával určené
funkce
nadpisy
headings
v HTML je šest velikostí nadpisů: H1 až H6 od největšího písma
objektový model
object model
soustava objektů a kontejnerů objektů (kolekcí), která slouží jako podpora
programování úloh nějakého druhu; např. ADO nebo COM jsou objektové modely
CD
151
JAK DÁL?
objekty
objects
u formulářů jsou to různá pole k vyplnění nebo úpravě uživatelem; skripty s nimi
snadno pracují; objekt může mít definované vlastnosti, metody a události
ohnisko
focus
má-li uživatel měnit objekt na stránce, třeba napsat text, musí objekt dostat ohnisko
protokol
protocol
předepsaný způsob komunikace programů mezi sebou
skript pro klienta
client-side script
skript zpravidla psaný v jazyku JavaScript; vykonává ho prohlížeč po zavedení webové
stránky, která jej obsahuje
skriptový jazyk
script language
skripty
scripts
programy, které se provádějí (interpretují) přímo ze zdrojového textu
služba
service
tučně
tučné písmo
bold
události
events
událost je např. příchod zprávy: objekt neví, kdy nastane, ale musí určeným způsobem
reagovat
vlastnosti
properties
obvykle proměnné patřící objektu; jimi se objekt dá ovládat nebo poskytuje o sobě
informace
webové sídlo
web site
celek webových stránek umístěný na web serveru, řešící nějaké zadání (aplikaci)
152
153
3. PŘÍLOHY
3.1 Základní informace
Jaká jsou základní pravidla, jak dělat webové stránky?
Budete potřebovat vědět:
Ü jak změnit písmo,
Ü jak umístit obrázek na stránku tam, kde ho chcete mít,
Ü jak udělat tabulky a rámce stránek,
Ü jak zařídit, aby se obrázky hýbaly,
Ü jak dostat hotovou stránku někam, kde by ji mohli vidět ostatní,
a takových „jak“ by se našlo ještě hodně.
Abyste se domluvili s ostatními lidmi, kteří také dělají webové stránky, abyste
mohli rozumět knihám, které o tom napsali, potřebujete znát některá slova – názvy věcí, které
se přitom používají a tvoří. Většinou k nám přicházejí z angličtiny, která je v oboru
počítačů mezinárodním jazykem. Už tady, na začátku úvodu, jsem se nemohl obejít bez slova
web ve spojení webová stránka. Ať tedy slovo web a slova odvozená poslouží jako příklad.
Web je anglicky pavučina, pavoučí síť. Představte si obrovskou síť, která obepíná celý svět. Taková síť skutečně existuje a nazývá se Internet.
Obsahuje uzly a spoje. Slouží k přenosu zpráv
– ke komunikaci. Posílání dopisů, hraní her,
příkazy bance – to vše je založeno na přenosu
zpráv.
Něco, co je rozšířeno po celém světě, co znají
v celém světě, se anglicky řekne world-wide.
Internet je také world-wide a je to síť. Anglicky
hovořící lidé mají rádi, když každé slovo názvu
začíná stejným písmenem. Proto si ke spojení
world-wide vybrali pro síť slovo web – pavučina, i když mohli použít slovo net – síť (rybářská
i počítačová).
Anglicky se v nadpisech a názvech píše každé
slovo s velkým počátečním písmenem. Tak vznikl
název World-Wide Web, zkratka WWW nebo
www. Informace na této „pavučině“ si můžete
představit jako ohromnou spoustu knih. A knihy
se skládají ze stránek. Název webová stránka
tedy znamená malou, ale samostatnou část té
ohromné spousty „knih“ na síti Internet.
Takové objasnění neznámého slova nebo názvu, jako v předchozích třech odstavcích,
se nazývá vysvětlivka, někdy glosa. Knihy obsahují vysvětlivky buď pod čarou, ve spodní
části stránky, na které je slovo poprvé použito, ale v odborných knihách a textech nápovědy
154
jsou vysvětlivky sebrány do zvláštní kapitoly. Je zařazena na konec knihy a často se nazývá
glosář. Zde budeme raději zařazovat vysvětlivky do textu. Budou mít zvláštní úpravu, takže je
snadno poznáte.
Web je „na světě“ asi osm nebo devět let. Za tu dobu se velmi změnil, rozvinul a stal
se složitějším. Zpočátku sloužil ke zveřejnění trvalých informací. To znamená, že autor dodal
na web stránky, které se pak na žádost zobrazily každému zájemci stejně. Nezáleželo na tom,
kdo si stránku prohlíží, ani na tom, jaké je datum nebo co se právě stalo ve světě. Jediná možnost, jak stránky změnit, byla požádat autora nebo vzít jeho text, změnit a nahradit novým.
Tedy lidé se museli rozhodnout a lidé museli změnu provést.
Pozdější vývoj dorozumívání ukázal, že je potřeba, aby obsah stránky záležel na tom, kdo
si ji zobrazí. Někdo může vidět všechny informace, ostatní jenom některé. Člověk zadá údaje, kterými prokáže, že je to právě on, kdo má právo vidět všechny informace. Tyto údaje jsou
jméno a heslo. Počítač si je vyžádá, když chce člověk vidět takovou web stránku, která není
přístupná všem.
Obsah stránky závisí na datumu u internetových novin, jako je Neviditelný pes, iDnes
a další. Ty vycházejí denně - každý den. Hlavní stránka zůstává, ale její obsah je každý den
jiný.
Obsah stránky závisí na jiných událostech, třeba u poměru koruny k penězům jiných
zemí nebo u ceny akcií. Někdy se změní za den několikrát, jindy je cena koruny nebo akcie
stejná několik dní.
3.1.1 Web, WWW, LAN, WAN, Internet, klient, server, služby,… jak se
v tom vyznat?
3.1.1.1 Co je to Internet?
Internet je největší počítačová síť na světě. Pokrývá celý povrch naší planety. Z čeho
se skládá?
Na náčrtku zemské polokoule vidíte největší uzly a spoje Internetu. Uzly jsou často
shodné s polohou velkých měst a průmyslových oblastí. Většina spojů, které vidíte, jsou optické trasy – páteř Internetu. Jsou to svazky skleněných vláken, kterými putuje světlo upravené tak, že přenáší oběma směry miliony až miliardy bitů – jednotek informace – za vteřinu.
Právě se díváte na síť WAN. Zkratka pochází
z anglických slov Wide-Area Network, to znamená rozsáhlá, rozlehlá síť.
Označují se tak počítačové sítě rozložené
po velkém území, jako je okres, kraj, země, stát,
světadíl. Nebo – v našem případě – celý povrch
Země. Je tedy Internet zároveň největší sítí
WAN, jaká existuje.
Jestliže se jednou spojení rozšíří na Měsíc nebo
jiné planety, bude Internet ještě rozsáhlejší než
dnes. WAN síť na Zemi pak bude jenom jednou
jeho částí.
PŘÍLOHY
155
Teď si zvětšíme jeden z uzlů. To, co dříve vypadalo jako uzel, se hodně zvětšilo. Vidíte,
že je to zase síť, ale s menším rozsahem. Pokrývá přibližně rozlohu velkého města nebo
průmyslové oblasti. Vidíte vnitřní spoje a jiné spoje, vedoucí ven mimo rozlohu, kterou
pozorujete.
Vnitřní spoje jsou optické nebo telefonní kabely vedené například pod zemí nebo vzduchem. Některé z nich dokonce nepotřebují žádné kabely, protože jsou vedeny jako rádiové
vlny, z jedné směrové antény na druhou. Dokonce jsou i takové spoje, které vedou na pohyblivé, přenosné mobilní telefony – ty, které mají možnost přístupu na Internet.
Některé spoje vedou mimo pozorovanou rozlohu města. Ty už znáte. Jsou to trasy, které
jste viděli na mapce zemské polokoule.
Na mapce je síť MAN. Zkratka pochází z anglických slov Metropolitan-Area Network.
To znamená síť metropolitního rozsahu.
Metropole je velké nebo hlavní město, takže víte,
že síť MAN pokrývá například území velkého
města, jako je Brusel, Londýn, Praha nebo Vídeň.
Uzly sítě ještě stále nejsou jednotlivé počítače. Navíc rozeznáváte dvě velikosti: větší
a menší. Abyste zjistili, jaký je mezi nimi rozdíl, zvětšíme si jeden z větších uzlů.
Vidíte zase síť, jenže tentokrát zabírá už jenom několik budov, které všechny patří do nějakého areálu. Může to být pozemek školy, továrny, výstaviště nebo sportoviště, tj. stadionu
s okolními budovami.
Síť této velikosti se nazývá CAN. Zase
je to zkratka anglického názvu – Campus-Area
Network. Campus je slovo původně označující
vojenský tábor, dnes jakýkoli pozemek s několika
budovami, které patří k sobě.
Všimněte si, že „uzly“ sítě nejsou body,
ale připomínají obláček prachu nebo písku.
Jednotlivá „zrnka písku“ představují počítače.
Jejich vzájemné spojení není zatím viditelné.
Ale ještě nejsme u konce.
Nakonec zjistíme, jak uvnitř vypadají nejmenší uzly, které jste viděli na plánku města.
Podívejte se zblízka na jeden z nich.
Takový uzel je umístěn v jedné budově nebo v části budovy, například v jednom
poschodí. Uzly jsou už tentokrát opravdu „tečky“ – jednotlivé počítače. Mohou být propojeny
různými způsoby, takže jejich spoje dohromady tvoří hvězdu, kolo, případně trsy. Některé
počítače nejsou vůbec spojeny s ostatními. Buď mají spojení modemem na telefonní linku,
nebo jsou opravdu zcela samostatné, a v tom případě vlastně do Internetu nepatří.
156
Takové malé sítě se nazývají LAN z anglického
názvu Local-Area Network. Protože local znamená místní nebo lokální, jsou to sítě zabírající
malý prostor – lokální sítě. Může to být třeba jen
jedna místnost, ale také celé podlaží nebo dům.
Lokální sítě jsou řešeny různými způsoby.
Na horním obrázku je síť řešená tzv. strukturovanou kabeláží. Je to dnes nejpoužívanější způsob. Vodiče spojují každý počítač se zařízením
HUB (anglicky hřídel, osa) a jednotlivé HUBy
jsou spolu propojeny.
V jednom okamžiku je ve všech místech sítě, na
všech počítačích a HUBech stejná informace,
stejný bit. Takové řešení se nazývá Ethernet.
Pracuje tak, že vždy právě jeden člen sítě vysílá
a ostatní přijímají. Každý musí sám poznat
informaci určenou právě pro něj. Informace jsou
rozděleny na bloky, kterým se říká rámce. Počítače se ve vysílání rámců střídají.
Starší řešení sítě Ethernet je na prostředním
obrázku. Je to koaxiální – souosý – kabel s odbočkami k jednotlivým počítačům. Nepotřebuje
žádný HUB, ale má jiné nevýhody, kvůli kterým
se již prakticky nepoužívá. Je na něm ale dobře
vidět princip Ethernetu.
Na spodním obrázku je znázorněn jiný typ sítě
než Ethernet. Je to tzv. token ring. Tato anglická
slova můžeme přeložit jako „okruh s oběhem žetonu“. Žeton je speciální rámec, který si počítače
posílají do kruhu stále dokola. Počítač, který
právě přijal žeton, má právo vysílat. Pokud má
připraven rámec k odeslání, vyšle jej. Jinak jen
hlídá příchozí rámce a posílá dál ty, které jsou
určeny jiným.
3.1.1.2 K čemu Internet slouží?
Internet je určen k rychlému spojení počítačů a rychlému přenosu zpráv – komunikaci –
mezi nimi. A tato komunikace samozřejmě slouží lidem – uživatelům počítačů. Každý, a také
vy, si může zdarma zařídit „internetovou existenci“ – tvořenou nejčastěji vlastní poštovní přihrádkou na poštovním serveru nějakého poskytovatele (to je organizace, která má na starosti
připojení sítí, počítačů a lidí k Internetu).
I ten, kdo nemá vlastní počítač ani jiné zařízení (mobilní telefon), se může stát uživatelem Internetu – anonymním (jehož jméno není nikde registrováno) -, jestliže si například
zajde do internetové kavárny, knihovny apod.
PŘÍLOHY
157
3.1.1.3 Pracovní stanice a servery
Všimněte si, že na obrázcích jsou znázorněny dva druhy počítačů. „Obrazovka s klávesnicí“ znázorňuje pracovní stanici. Je to vlastně osobní počítač zařazený do sítě. Sedí u něj
člověk, který s ním pracuje.
„Větší bedýnka“ znázorňuje server. Je to počítač, obvykle mnohem výkonnější než
pracovní stanice, u kterého však nikdo nesedí. Přístup k údajům a programům umístěným
na serveru mají lidé sedící u pracovních stanic lokální sítě. Za určitých podmínek mají
k serveru přístup lidé pracující u jakéhokoli počítače v celé síti Internet.
3.1.1.4 Adresy a jména počítačů v Internetu
Aby se kterýkoli počítač v Internetu domluvil s jiným, musí mít každý počítač své vlastní číslo, které se nazývá IP-adresa. V současnosti jsou to vlastně čtyři čísla mezi 0 a 255,
oddělená tečkami.
Například: 193.165.57.13 je IP-adresa.
Zkratka IP znamená „Internet Protocol“. IP je hlavní protokol používaný na Internetu.
O tom, co jsou to protokoly, se dozvíte dále. Tady si jenom řekneme, že protokol je způsob, jak
se programy po síti dorozumívají (komunikují).
S IP-adresami se jistě setkáte, ale orientace podle nich není pro člověka příliš vhodná.
IP-adresy nejsou pro běžné použití „šikovné“, protože se špatně pamatují. Navíc je právě nyní
Internet ve stavu, kdy obsahuje velmi mnoho počítačů. Ani všechny adresy zapsané čtyřmi
čísly pro tolik počítačů nestačí.
Je proto vhodnější počítače pojmenovat. Systém názvů byl pro Internet vymyšlen tak,
že se jména skládají z několika částí a každá část říká něco o umístění hledaného počítače.
Jméno, třeba reg.eliashim.co.il nebo setiathome.berkeley.edu, musíte rozebírat odzadu. Jednotlivé části jsou od sebe odděleny tečkami.
Poslední část má buď dvě, nebo tři písmena.
Dvě písmena označují stát – „il“ = Izrael, „cz“ = Česká republika, „sk“ – Slovensko.
Tři písmena označují obory nebo odvětví bez příslušnosti k státu:
Ü com – komerční (obchodní a výrobní) obor, firmy, společnosti (commerce)
Ü edu – vzdělávání, školství (education)
Ü mil – armáda (military)
Ü net – síť obecně, správa Internetu (network)
Ü org – neziskové organizace (organization)
Pro předposlední část už nejsou žádná pevná pravidla. Některé státy zde mají obor
nebo odvětví, zkrácené na dvě písmena, tedy co, ed, mi, ne, or, ale většinou zde najdete název
organizace (např. microsoft, hp, czech-tv).
Ještě dále vlevo můžete najít část organizace (například provoz) nebo město, kde je
ta část umístěna, jako brno.
Úplně vlevo je uvedeno jméno počítače, např.: setiathome, reg, www, ftp. Jméno
serveru může něco říkat o tom, co server nabízí. Pro jméno pracovní stanice nejsou žádná
pravidla.
158
Jestliže odstraníte jméno počítače a tečku za ním, dostanete takzvané jméno domény.
Doména je prostě nějaká část Internetu. Někdy z jejího jména poznáte, kde je asi umístěna – právě podle zkratky státu a jména nebo zkratky města, jindy to není možné. Například
u domény microsoft.com nemůžete odhadnout žádné umístění – stát ani město.
Jméno počítače spolu s doménou se nazývá plné doménové jméno počítače. Taková
jména jsou důležitou součástí odkazů na webových stránkách.
Teď si jenom připomeneme, jak vypadá odkaz na webové stránce: je to text, obvykle podtržený, nebo obrázek. Podstatné je, že se na něm ukazatel myši změní na ručičku. Za obrázkem nebo textem je skrytý vlastní odkaz neboli URL – Uniform Resource Locator (jednotný
ukazatel zdroje) a jeho částí obvykle bývá plné doménové jméno.
3.1.1.5 Služby, protokoly a porty
Tato kapitola bude asi trochu obtížnější. Je ale důležitá. Všechna tři slova – služby,
protokoly a porty – označují principy, na nichž je Internet postaven. Když budete navrhovat
webové stránky, budete vlastně vytvářet informace (články, reklamní údaje atd.), které bude
publikovat služba WWW. To znamená, že je bude nabízet a posílat zájemcům. Budou se
objevovat na obrazovkách jejich osobních počítačů nebo pracovních stanic.
Během navrhování stránek se určitě budete potřebovat odkázat na jiné stránky. Často
to budou stránky umístěné na jiných serverech v Internetu. Musíte-li do textu své stránky zařadit odkaz, potřebujete vědět, jak ho sestavit. V odkazu potřebujete uvést protokol a někdy
i port.
Pro začátek si stručně řekněme význam slov služba, protokol a port.
Služba
Je to způsob podávání informace v síti Internet.
Síť – její počítače – poskytuje informace lidem a
jiným počítačům. Poskytování informace lidem
je hlavní důvod, proč Internet existuje.
Jistě rozumíte tomu, že například prodej pomocí
Internetu (e-business) funguje jiným způsobem
než elektronická pošta nebo zjišťování přesného
času. Jsou to tři různé služby z mnoha služeb
Internetu. Abyste jich mohli využít, potřebujete
znát určitá pravidla, případně musíte instalovat a používat různé programy.
Protože tedy lidé používají Internet různým způsobem, existují různé způsoby, jak jim Internet
slouží – tedy různé služby.
Služby Internetu mají obvykle slovní názvy:
Electronic mail (elektronická pošta), World-Wide Web. Často se používají jejich zkratky:
E-mail nebo e-mail, WWW. Zde se budeme
zabývat hlavně službou WWW (Web).
159
PŘÍLOHY
Protokol
Je to systém pravidel, podle nichž se mezi sebou
dorozumívají počítače. Pro Internet je definována řada protokolů. Každý protokol je navržen
pro jiný způsob komunikace.
Protokoly se označují písmennými zkratkami,
například FTP, SMTP nebo HTTP. Lze je psát
písmeny velké i malé abecedy: ftp, smtp, http.
Lidé obvykle nepoužívají protokoly přímo. Ale za
každým příkazem komunikačního programu,
za ukázáním a kliknutím myši nebo stisknutím
klávesy Enter je skryta komunikace dle protokolu. Tu komunikaci za vás vede váš program,
například prohlížeč webových stránek.
Port
Je to číslo mezi 1 a 65535. Byl zaveden proto, aby
si každý proces (běžící program) vybral z údajů
přišlých ze sítě jenom ty, které jsou určeny pro
něj. Na každém počítači zapojeném do Internetu totiž běží několik komunikačních procesů.
Port se někdy do češtiny překládá jako „zásuvka“.
Rozsah portů se dělí na dvě části:
• 1 až 1023 – takzvané well-known ports, dobře známé porty. Jsou pevně přiděleny asi do čísla
999 službám a protokolům. Rozsah 1000 až
1023 je v rezervě pro budoucí rozvoj Internetu,
použití v organizacích apod.
• 1024 až 65535 – takzvané uživatelské porty.
Programy i lidé – správci sítí – je mohou přidělovat podle vlastní potřeby.
A nyní podrobnější vysvětlení:
Podívejte se na Internet z hlediska jeho využití. Hlavním důvodem, proč Internet vznikl,
je výměna různých informací mezi lidmi, kteří používají počítače.
Jak Internet tento úkol plní? Můžete se na to dívat tak, že člověk u počítače zná adresu
nebo jméno počítače jiného člověka, kterému chce poslat zprávu nebo jinou informaci, třeba
nový program. Internet musí umět tu informaci doručit, to znamená dopravit k cíli.
Ale co je to Internet? Počítače různých druhů a spoje. Tedy počítače samy musejí
najít cestu od zdroje k cíli a dopravit po ní informaci, kterou nesmějí změnit. Můžeme se proto
na jejich práci dívat také tak, že poskytují lidem službu.
160
Jakmile začnete přemýšlet takhle, určitě si uvědomíte, že doručení informace je jenom
jedna z mnoha možných služeb. Ve skutečnosti lidé, kteří kdysi Internet navrhli, začalipostupně zkoumat, k čemu všemu by mohl sloužit. Postupně tak vznikaly různé služby.
Snad první službou Internetu je elektronická pošta neboli e-mail. (Mail – anglicky pošta.) Slouží k posílání dopisů, podobně jako běžná pošta. Musíte znát přesnou adresu člověka
- adresáta, kterému chcete poslat dopis. Pak dopis napíšete a odešlete. K dopisu se připojí
adresa odesilatele – vaše adresa. Dopis dáte do schránky k odeslání a pošta ho přenese do
schránky adresáta – dopis je doručen.
Adresy elektronické pošty se skládají ze jména
nebo zkratky člověka – adresáta, ze znaku @
a z plného doménového jména počítače – serveru, kde má ten člověk schránku na poštu; někdy
se nazývá poštovní přihrádka. Kromě plného
doménového jména počítače je možno uvést
jenom jméno domény. Počítače samy najdou
správný poštovní server.
Významné vlastnosti elektronické pošty:
(1) Můžete se obracet jenom na osoby, které
znáte – znáte jejich adresy; nemůžete posílat
poštu neznámým lidem.
(2) Pošta počká ve schránce, až si ji adresát (příjemce) vyzvedne. Není třeba, aby byl v okamžiku
doručení přítomen.
Počítače v Internetu, hlavně servery, zařídí, aby elektronické dopisy došly správně
na místo určení. Místo určení je takový poštovní server, který obsahuje schránku adresáta – člověka, kterému jste dopis poslali. Adresát má nastaveno připojení k Internetu, jméno
a heslo, takže se může kdykoli do schránky podívat a došlé dopisy vyzvednout.
(To obvykle znamená, že si je přenese do své pracovní stanice, kde si je přečte, uloží přílohy, odpoví
odesilatelům atd.)
Počítače – servery v Internetu, poskytující služby – nejsou všechny stejné. Jsou specializované. Některé poskytují službu elektronické pošty – poštovní (mail) servery, jiné nabízejí
soubory ke „stažení“ – FTP servery, mnoho jich nabízí texty, obrázky, animace atd. k prohlížení – WWW servery. A samozřejmě existuje mnoho dalších druhů služeb.
Aby mohl server poskytovat službu, musí na něm běžet program, který tu službu
vykonává. Ale ke správné funkci služby v Internetu to ještě nestačí. Každý počítač poskytující
určitou službu se musí umět domluvit s každým jiným počítačem poskytujícím stejnou
službu. Jinak by nastaly velké zmatky. Počítače používající stejný program by si rozuměly,
ale nemohly by se domluvit s počítači, používajícími jiný program. Ale lidé potřebují, aby
mohli poslat dopis na libovolný poštovní server, kterémukoli adresátovi. Zákazníci internetové
kavárny potřebují, aby se ze svého místa podívali na kterýkoli web server v Internetu a nemuseli třeba přecházet do jiné kavárny, když se chtějí podívat na jiný web server.
PŘÍLOHY
161
Nesmí proto záležet na tom, jaký typ počítače a jaký typ programu službu poskytuje.
Všechny programy musí postupovat podle stejných pravidel komunikace. Každá služba používá svoje pravidla. Každý počítač v celém Internetu, který má tu službu poskytovat nebo
používat, je musí přesně dodržovat. Pravidla pro jednu službu se nazývají protokol.
-Promiňte, prosím…Dobrý den.
-Prosím…Co si přejete?
-Nevíte, jak se dostanu na Florenc?
-Nejlepší bude, když půjdete…(atd.)…a
nastoupíte…(atd.)…a jste tam.
-Myslíte, že teď bude pokladna otevřená?
-Nevím, ale jízdenky prodává i řidič.
-Děkuji vám…Nashledanou.
-Nashledanou.
„Protokol“ je soubor pravidel, kterými se řídí
dorozumění neboli komunikace mezi počítači.
„Rozhovor“ počítačů se podobá rozhovoru
mezi lidmi – například dialogu, přednášce nebo
semináři. Pravidla protokolu se proto podobají
pravidlům, kterými se řídí rozhovor lidí.
Když potkáte úplně neznámého člověka
a chcete s ním mluvit, musíte ho napřed upozornit, aby vám naslouchal nebo se na vás díval.
Pak se musíte dohodnout, jakou řečí budete
mluvit. Musíte ji umět oba. Jistě víte, že není
možné předpokládat, že cizí člověk umí znakový
jazyk, a začít na něj rovnou znakovat.
Svoji řeč pravděpodobně zahájíte pozdravem,
na který dostanete odpověď. Pak řeknete druhému člověku (nebo ostatním lidem), co jste
chtěli sdělit, nebo se ho zeptáte, jestliže se od
něj naopak chcete něco dozvědět. Otázek a odpovědí může být několik. Buď se střídají, nebo si
je druhý musí pamatovat a odpovědět najednou.
Rozhovor pak zase ukončíte pozdravem – rozloučením.
Protokol používaný službami jako WWW předepisuje velmi podobný průběh dialogu mezi
počítači. Napřed je třeba navázat spojení.
To odpovídá upozornění, dohodě jazyka a případně úvodnímu pozdravu. Následují přenosy
bloků, které odpovídají buď otázkám a odpovědím, nebo sdělení.
Sdělení je například elektronický dopis,
na který nečeká počítač od jiného počítače odpověď, pouze se ujistí, že je dopis správně předán
(protože odpovídat bude člověk člověku – adresát odesilateli).
Na závěr počítače ukončí spojení, což odpovídá
ukončení rozhovoru, pozdravu a rozloučení.
162
Pro služby Internetu je definováno velké množství protokolů. Používají se jejich písmenné zkratky, kde poslední písmeno bývá P (Protocol). Například:
Ü IP (Internet Protocol – protokol Internetu) základ všech dále jmenovaných
protokolů;
Ü FTP (File Transfer Protocol – protokol služby pro přenos souborů);
Ü HTTP (HyperText Transfer Protocol – protokol pro přenos hypertextu – co je to
hypertext, bude vysvětleno dále);
Ü SMTP (Simple Mail Transfer Protocol – jednoduchý protokol pro přenos pošty);
Ü POP3 (Post Office Protocol 3 – protokol pro výběr pošty ze schránky na serveru).
Jedna služba obvykle používá jeden protokol, ale některá jich může použít i více.
Například služby elektronické pošty používají až tři protokoly. Jedním (SMTP) si předávají dopisy poštovní servery mezi sebou a také je přijímají od odesilatelů, druhé dva (POP3
a IMAP) slouží adresátům k vyzvedávání pošty ze schránek na serverech.
FTP je velmi stará služba. Je určena k přenosu jakýchkoli souborů dat – programů,
textů, databází, záznamů obrazu a zvuku, instalačních balíčků (souborů, ze kterých si instalujete programy) atd. Její zkratka znamená „File Transfer Protocol“ – protokol pro přenos souborů. Protože služba FTP pochází ještě z dob, kdy se podoba dnešního Internetu teprve tvořila,
je její název shodný s názvem protokolu, kterým se dorozumívá.
V Internetu jsou takzvané FTP servery.
Obsahují celé knihovny souborů různého druhu:
programy, texty, dokumenty, obrázky, v poslední době i zvukové a obrazové snímky – hudbu
a filmy.
Chcete-li soubor získat, musíte znát plné doménové jméno serveru, kde je soubor uložen.
Musíte mít takzvaný klientský program – to
je program, který s libovolným FTP serverem
dokáže spolupracovat a umí podle vašich
příkazů najít a nechat si poslat – neboli „stáhnout“ – požadovaný soubor do vašeho počítače.
Významné vlastnosti služby FTP:
(1) FTP server nabízí neboli publikuje soubory, ale nikomu je neposílá sám od sebe.
Vy musíte začít – tj. pomocí klientského
programu FTP se domluvit se serverem, najít
soubor a přikázat mu, aby vám ho poslal.
(2) FTP server musí být v provozu
právě v té chvíli, kdy po něm něco chcete.
To se řeší tak, že tyto servery jsou v provozu stále
– 24 hodin denně a 7 dní v týdnu.
Na příkladu služby FTP si ukážeme jiný typ komunikace. Je to dialog, tj. rozhovor.
163
PŘÍLOHY
V rozhovoru dvou lidí se často jeden ptá a druhý odpovídá. První tedy vyžaduje informace, druhý mu je dává. Říkáme, že mají různé role. Při hovoru dvou lidí se mohou role střídat.
Chvíli se ptá jeden a druhý odpovídá, pak začnou mluvit o něčem jiném, druhý se ptá a první
odpovídá.
U služby FTP jsou role pevné. Program, který poskytuje informace, je server. Program,
který se dotazuje, se nazývá klient. Role jsou podobné, jako při návštěvě lékaře. Nemocný
pacient (klient) přichází (pokud může chodit) k lékaři a žádá od něj informace, jaká je jeho
nemoc a jak ji má léčit. Lékař (server) ho vyšetří a předepíše mu léky. Ale sám mu je obvykle
nevydá. Pa-cient pro ně musí jít do lékárny.
Návštěva lékaře se hodně podobá použití služby FTP. Člověk, který si chce najít a “stáhnout“ nějaký soubor, může například jenom vědět název FTP serveru, kde soubor najde. Má
ale program – klienta. Pomocí něj naváže spojení se serverem (obdoba návštěvy lékaře) a hledá soubor v adresářích serveru (žádá informace). Když soubor najde, požádá o jeho přenos
do svého počítače.
Klient je druh programu. Vyznačuje se tím,
že je aktivní. Navazuje spojení se serverem a dává
mu příkazy, kterými požaduje informace. Klient-program často spolupracuje s člověkem. Sbírá
od člověka údaje, kontroluje je a vytváří z nich
příkazy pro server. Přijímá informace od serveru, upravuje je do přehledného tvaru a ukazuje je
na obrazovce nebo je tiskne.
Server je jiný druh programu. Čeká na požadavky od klientů, vybírá a posílá žádané informace.
Může obsluhovat mnoho klientů zároveň.
Každý klient FTP se může spojit s kterýmkoli
FTP serverem. Jsou jako elektrická zásuvka
a vidlice. Vidlici svého holicího strojku můžete
zasunout do zásuvek doma, v hotelu, na cestách někdy i ve vlaku. Naopak do jedné zásuvky
můžete napřed zapojit třeba vidlici lampy, pak
vysavače, pak televizoru. Víte, že jsou dvojice
zásuvek a vidlic pro 220 voltů, jiné pro 380 voltů
a úplně jiné pro reproduktory. Právě tak existují
různé klientské a serverové programy pro různé
služby Internetu.
Na příkladu služby FTP si ještě objasníme funkci portů.
Víte, že FTP služba se podobá návštěvě lékaře. Ve skutečnosti zahrnuje i funkci lékárny.
Na jedno použití služby FTP, kdy vyhledáte a „stáhnete“ si soubor, poběží na FTP serveru dva
procesy (běžící programy). První proces se podobá lékaři – mluvíte s ním a zjistíte, co potřebujete a kde to najdete, někdy dostanete i informaci, jak se to používá. Druhý proces se podobá lékárně – předložíte recept a dostanete lék; nepotřebujete lékárníka zpovídat, sám vám
řekne, jak se lék užívá.
164
Dokud hledáte soubor, pracujete s prvním procesem (lékař). Jakmile ho najdete
a určíte, že se má přenést na váš počítač, pracuje váš FTP klient s druhým procesem (lékárna).
Ten vám žádaný soubor dodá.
Server potřebuje mít „lékaře“ co nejdříve volného, aby mohl komunikovat s dalšími
klienty. Pro přenos souboru tedy vytvoří proces „lékárna“ a nechá ho běžet. Zatímco čekáte
na přenos souboru, může „lékař“ mluvit s jinými klienty.
Výsledkem je, že na serveru běží mnoho procesů, které vedou komunikaci. Přitom každý
z nich potřebuje jenom tu informaci, která je určena právě jemu. Do počítače v síti ale přicházejí informace pro všechny jeho procesy. Přicházejí v blocích – paketech. Můžete si je představit jako malé balíčky s adresou odesilatele (kdo balíček posílá) a adresáta (komu se má
balíček doručit). Obsahem balíčku je část posílané informace. Někdy je informace tak krátká,
že se do paketu vejde celá.
Každý paket je určen některému procesu, musí se dostat jen k němu a k žádnému jinému. Proto jsou součástí obou adres na paketu takzvané porty. Port je číslo od 1 do 65535.
Představte si počítač jako dům, kde bydlí několik rodin (= procesů). Potřebujete jedné z nich
doručit balíček (= paket). Každou z obou adres
na paketu můžeme přirovnat k obyčejné adrese,
jakou používá normální pošta. Ta se skládá
z adresy domu, tedy názvu města, ulice a čísla
domu. Nebo z názvu vesnice a čísla domu. Tato
část adresy odpovídá plnému doménovému jménu počítače, případně jeho IP adrese – lze použít
jedno nebo druhé.
Když znáte dům, kde adresát bydlí, musíte
se ještě podívat na jeho jméno a číslo bytu.
V našem počítači – domě bydlí v každém bytě
jenom jedna rodina a stačí tedy, když v adrese
bude číslo bytu. Zato těch bytů může být v domě
– počítači až 65535.
Posíláte-li někomu balíček, musíte předem znát jeho adresu. Víte, že v určitém státě, městě, ulici, domě a bytě bydlí někdo, kdo váš balíček přijme. Ale v Internetu to není tak
úplně jisté. Patrně nebudete mít potíž s plným doménovým jménem nebo IP adresou. Ty vám
někdo řekne (jste-li klientský program FTP, bude to člověk, který s vámi pracuje). Svoji vlastní
zpětnou adresu (adresu odesilatele paketu) znáte a port odesilatele si prostě zvolíte – adresát
ho dostane s paketem a může bez problémů odpovědět. Jenom potřebujete zjistit číslo portu
adresáta.
U služby FTP je adresátem FTP server. To je proces, který sleduje („poslouchá“) určitý
port, tedy řekne programům Internetu ve svém počítači, že pakety od kohokoli, ale adresované na ten port, mají dodat jemu. Port, na kterém „poslouchá“, ale nemůže být libovolný.
Musí být zvolen tak, aby ho klientské programy mohly bez problémů doplnit do adresy.
PŘÍLOHY
165
Jedna možnost je odvodit port od služby.
V Internetu je skutečně dohoda, že řídicí port
pro FTP je standardně 21. Klientské programy
služby FTP jsou napsány tak, že standardně
používají port 21.
Taková dohoda značně zjednoduší situaci,
a proto jsou porty rozděleny na dvě skupiny:
• 1 až 1023 (well-known ports, dobře
známé porty); jsou určeny pro služby. Například 20 a 21 pro FTP, 80 pro WWW. Dosud je
obsazeno asi 110 portů, zbytek je ponechán pro
pozdější použití, vzniknou-li nové služby. V počítači existuje soubor s názvem services (služby),
který toto přiřazení obsahuje.
•
10000 až 65535 (user ports, uživatelské
porty); nejsou standardně přiděleny žádné
službě a procesy mohou používat ty, na kterých
se právě dohodnou.
V této chvíli už znáte všechny prvky odkazu, který budete používat v HTML stránkách. Jsou
to: protokol, plné doménové jméno nebo IP adresa, port, cesta a soubor.
3.1.1.6 Vznik služby WWW
Před vznikem služby WWW se pro publikaci používala služba FTP. Publikace znamená
zveřejnění. Od elektronické pošty se liší tím, že nemá určené adresáty. Tím se podobá televiznímu vysílání nebo prodeji novin na stáncích: nevíte předem, kolik lidí se na program dívá
nebo kolik si koupí noviny na stánku. Nevíte ani, kteří lidé to budou.
Služba FTP publikuje různé soubory: programy, texty, obrázky a jiné. Všechny
dohromady se dnes označují slovem dokumenty. Dokument bývá obyčejně kombinovaný: obsahuje text, obrázky, je možno „přibalit“ animované (pohyblivé) obrázky, videoklipy,
zvuky nebo hudbu. Dokumentem může být i celý film nebo televizní pořad.
Většinou je přístup k FTP službě anonymní. To znamená, že server nepotřebuje vědět,
kdo si od něj soubory vyžaduje, poskytne je komukoli. To je zase podobné televiznímu vysílání, které může vidět každý, kdo se někde podívá na televizní přijímač.
Velkou nevýhodou služby FTP je, že musíte předem přesně vědět, co chcete a od kterého serveru to chcete. Kromě souborů vám FTP server nabídne pouze jednoduchý výpis
adresářů. Vidíte jména souborů a jejich délky, případně data vytvoření, ale nemáte popis, co
obsahují. Takový popis musí zvlášť připravit správce serveru. Musí ho uložit do každého
adresáře a stále upravovat, aby odpovídal skutečnosti, například při přidávání souborů nebo
jejich mazání z adresáře.
166
Proto není služba FTP pohodlná. Odborníci tedy vymysleli novou službu, známou jako
WWW (World-Wide Web). Dokumenty této služby jsou kombinované. Prohlížeč WWW
(Netscape Navigator, Internet Explorer a další) dostane základní dokument – webovou
stránku. Na ní jsou odkazy umístěné tam, kde má být obrázek. (Připravil a umístil je autor
stránky.) Prohlížeč sleduje odkazy, najde obrázky a celou stránku sestaví v klientském počítači (například ve vašem PC).
Odkaz (anglicky link) je kousek textu,
který je napsaný podle určitých pravidel tak, aby
se podle něj dal na Internetu najít dokument
nebo soubor.
Služba WWW používá odkazy určitého druhu, který se jmenuje URL (z anglické zkratky
Uniform Resource Locator), což znamená
jednotný ukazatel zdroje.
Ukazatel je vlastně totéž co odkaz. Můžete si
ho představit jako tabuli se šipkou a nápisem.
Takové tabule nebo směrové šipky se vyskytují
na silnicích. Ukazují směr a vzdálenost do nějaké obce.
Zdroj znamená cíl odkazu, tedy dokument nebo
soubor (případně počítač), kam odkaz ukazuje.
Úplný ukazatel URL se skládá z několika částí. Některé z nich se dají vynechat,
ale vždycky se musí dodržet pořadí. Jsou to:
Ü
Ü
Ü
Ü
Ü
protokol,
jméno počítače,
port,
cesta k dokumentu,
jméno (a přípona) dokumentu.
Složení URL si ukážeme na příkladu. Odkaz může vypadat takto:
http://www.microsoft.com:80/cze/2000/default.htm
V tomto odkazu je:
Ü http: - protokol, kterým se bude komunikovat,
Ü //www.microsoft.com – plné doménové jméno počítače – serveru,
Ü :80 – číslo portu standardně používaného službou WWW,
Ü /cze/2000/ - cesta k dokumentu; zápis je stejný, jaký se používá v počítačích třídy
PC, tj. na serveru www.microsoft.com jdete nejdříve do složky cze a z ní dále
do složky 2000; jenom místo zpětných lomítek \ se používají obyčejná lomítka /,
Ü default.htm – název dokumentu, který je uložen ve složce 2000.
Když napíšete takový odkaz a snažíte se na něj přejít v prohlížeči, pokouší se napřed
prohlížeč spojit s uvedeným serverem pomocí uvedeného protokolu a na uvedeném portu.
(Uvedené znamená právě ty údaje, které jste do URL napsali.) Když se mu to podaří, předá
požadavek na cestu a dokument serveru. Jestliže taková cesta a dokument na serveru existují, pošle server obsah dokumentu prohlížeči. Ten zobrazí základní dokument a přečte si z něj
PŘÍLOHY
167
všechny odkazy na obrázky a další soubory, které k dokumentu patří. Prohlížeč pak o ně požádá server (nebo jiné servery) a pokud je dostane, sestaví a zobrazí webovou stránku.
Jestliže se nepodaří hledaný server nebo dokument najít, ukáže prohlížeč stránku
s textem chyby. Jestliže se pouze nenajde některý odkazovaný obrázek, vykreslí prohlížeč
místo něj ve webové stránce prázdné okénko.
Které části je možno v odkazu URL vynechat? Běžně se nezapisuje číslo portu; využívá
se toho, že standardní port služby je 80 a neuvedete-li jiný, doplní se 80.
Obyčejně nemusíte ani napsat jméno dokumentu. Tady se využívá toho, že služba
WWW umožňuje definovat na serveru takzvané defaultní dokumenty (default – anglicky
standardní, výchozí – to, co se předpokládá, když není uvedeno nic). Často se takový dokument nazývá default.htm nebo index.htm.
Můžete tedy URL http://www.microsoft.com:80/cze/2000/default.htm zkráceně
zapsat:
http://www.microsoft.com/cze/2000/
Jestliže znáte pouze IP-adresu počítače a ne jeho plné doménové jméno, dá se odkaz
napsat:
http://212.193.55.15/cze/2000/
Když se obracíte na server, který je ve stejné lokální síti (LAN) jako váš počítač, nebude
pravděpodobně nutné zapisovat plné doménové jméno serveru:
http://www/cze/2000/
A jak to vypadá, chcete-li použít jinou službu, FTP:
ftp://ftp.microsoft.com/public/
Hlavní rozdíl je v tom prvním ftp:, které určuje protokol. Druhé „ftp“ je jméno serveru;
v tomto příkladu je stejné jako název služby FTP a protokolu, ale nemusí to tak být u každého
FTP serveru.
Když zadáte takový odkaz prohlížeči, přijme od serveru a vypíše obsah složky, která
se nazývá public (anglicky: veřejná). Uvidíte jména souborů, složek a další údaje o nich.
168
3.1.1.7 Co je to hypertext
Obsah serverů služby WWW v Internetu
se podobá obrovské knihovně, jejíž části jsou rozmístěny po celém světě. Do každé části knihovny
lze uložit knihy - dokumenty.
Je to knihovna trochu zvláštní. Knihy jsou
v ní vzájemně spojené tak, že se odkazují jedna
na druhou. To znamená, že tam, kde se text
jednoho dokumentu odkazuje na jiný dokument,
vložil autor toho prvního dokumentu odkaz
URL. Ten ukazuje na nějaký jiný dokument
v rámci WWW služby celého Internetu.
Odkaz se na webové stránce zobrazí jako podtržená část textu, případně obrázek, na kterém
se ukazatel myši změní na ručičku. Klepnutím na něj přejde prohlížeč na jiný dokument
podle odkazu. Při použití URL nezáleží na tom,
jestli je ten jiný dokument na stejném serveru
jako původní, nebo na jiném serveru kdekoli
na Internetu.
Takto propojený systém knih – dokumentů, webových stránek atd. – se nazývá hypertext.
Pro snadné vkládání odkazů a značek pro úpravu dokumentu byl sestaven jazyk, který se
nazývá HTML (z anglického HyperText Markup Language – hypertextový značkový jazyk).
K přenosu informací mezi klientem a serverem se používá HTTP (HyperText Transfer Protocol).
3.1.2 To hlavní z protokolu HTTP
Protokol HTTP je protokolem aplikační úrovně. To znamená, že je určen pro přímou komunikaci (dorozumívání a přenos informací) mezi aplikačními programy. Nejčastěji se používá právě pro komunikaci aplikací „web server“ a „web klient“, tedy mezi serverem a prohlížečem webových stránek. Jinými slovy, je využíván službou WWW, a to již od roku 1990.
Protokol HTTP však používají i jiné programy – aplikace speciálního druhu. Jsou to například různé registrační programy, které si ověří správnost licenčního čísla programu, který
jste si zakoupili, a vygenerují pro vás kód, tzv. aktivační klíč, po němž teprve začne váš program fungovat.
Protokol HTTP je bezstavový. To znamená, že neukládá žádné údaje o stavu komunikace, nemá žádné speciální zahájení ani ukončení. Všechny údaje se musí přenést při jediné výměně zpráv: klient zašle serveru požadavek (anglicky: request) a dostane jednu, někdy hodně
dlouhou, odpověď (anglicky: response). Jestliže potřebuje klient další informace (například
při čtení obrázků pro webovou stránku), spustí další výměnu zpráv, která se z hlediska protokolu nijak neliší od jakékoli jiné výměny s jakýmkoli jiným klientem. Proto může prohlížeč
zobrazit webovou stránku dříve, než jsou přečteny všechny obrázky, a proto také nevadí,
když na serveru některý obrázek (například chybou autora) schází: nemůže se sice zobrazit,
ale funkci zbytku stránky to nijak nenaruší.
PŘÍLOHY
169
Protokol HTTP je objektově orientovaný a obsahuje prostředky, kterými se přenesou
nejen údaje samotné, ale i jejich typ. Lze přenést jakákoli, textová, binární nebo různě strukturovaná data.
Výměna zpráv klient-server může probíhat několika metodami (způsoby). Protokol
HTTP verze 1.0 má pouze tři metody, které se nazývají HEAD, GET a POST. O tom, jaká
metoda se použije, rozhoduje autor webové stránky v případě, kdy se odkazuje na nějakou
jinou webovou stránku. Základní metoda GET přečte webovou stránku nebo jiný dokument
ze serveru do klienta. Metoda HEAD přečte pouze hlavičkovou část webové stránky. Metoda
POST přenáší údaje vyplněného formuláře z klienta na server a pak přijme odpověď.
Metoda GET
Používá se pro přenos běžné stránky nebo jiného souboru (obrázku, dokumentu) ze serveru ke klientovi. Klient pošle požadavek (request) – informaci obsahující URL
a případně časový údaj. Server najde žádaný soubor, stránku nebo jiný dokument a pošle ho
klientovi.
Klient (počítač v roli klienta) má pro jednou stažené stránky speciální paměť, takzvanou
cache paměť (zápisník). Tam si na poměrně krátkou dobu ukládá stránky, které si uživatel
v poslední době prohlížel. Součástí stránky je časový údaj, kdy byla vytvořena. Ten je přenesen
k serveru v požadavku GET. Jestliže autor mezitím stránku na serveru změnil, bude mít novější datum, než je v požadavku, takže se stránka znovu stáhne – aktualizuje. Stránka se také
stáhne, když v paměti prohlížeče není. Pokud je ale na serveru i v prohlížeči uložena stránka
se stejným datem, není třeba ji stahovat. Prohlížeč dostane pouze povel, aby zobrazil stránku
ze své paměti.
V požadavku na stránku se také mohou zadat parametry, například pro vyhledání
údaje. Metoda GET umožňuje jejich zápis za URL a znak otazník. Například:
http://www.fiction.com/search?init=yes
Metoda GET může svým URL odkazovat nějaký program nebo skript pro server
a dodat mu parametry. Pak server odešle odpověď, která vzniká dynamicky (není předem
uložena na serveru, ale server ji vytvoří až po příchodu požadavku).
Metoda POST
Používá se pro přenos obsahu vyplněného formuláře na server a příjem odpovědi
serveru. Na serveru musí být nějaký program nebo skript, na který odkazuje URL
požadavku. Ten program nebo skript musí umět zpracovat údaje zaslané klientem a příslušně
na ně odpovědět.
Kromě přenosu formulářů se metody POST používá k přenosu jakýchkoli dokumentů
z klienta na server (takzvaný upload). Toho se využívá k různým účelům, zvláště k přenosu
vytvořených webových stránek na server.
Výsledky přenosu
Výsledky se rozdělují do pěti skupin takto číselně označených:
1. Informace: 1xx
2. Úspěšný přenos: 2xx
3. Přesměrování: 3xx – nastává typicky, když byla požadovaná webová stránka
přemístěna (v rámci serveru nebo na jiný server). Má tedy nový URL, ale klient
se na ni stále obrací původním URL.
170
4.
5.
Chyba na straně klienta: 4xx – hlášení chyb zjištěných klientem.
Chyba na straně serveru: 5xx – hlášení chyb zjištěných serverem.
Na místě xx je číslo 00 až 99. Je to podrobný číselný kód výsledku přenosu.
3.1.3 Verze jazyka HTML
3.1.3.1 Základní verze
Když služba WWW začínala, používala se verze HTML 2.0. Ta je dnes už příliš stará.
V současnosti se pro vytváření webových stránek používá HTML verze 3.2. Je definován
dokumentem HTML 3.2 Reference Specification. Je to anglický popis jazyka a je publikován na:
http://www.w3.org/pub/WWW/TR/.
Existuje již i další verze HTML 4.0, která definuje tzv. dynamický jazyk HTML. V něm je
možno měnit například umístění obrázků, velikost písma nebo polohu nápisů.
V tomto textu si popíšeme verzi HTML 3.2.
3.1.3.2 Struktura webové stránky
Každá webová stránka se skládá ze záhlaví (anglicky head) a „těla“ (anglicky body).
První řádek určuje jazyk a jeho verzi.
Záhlaví uvádí název stránky, jazyk, v němž je napsána, jméno autora, údaje pro snadné
nalezení stránky atd. Jsou zde také případně zapsány skripty, tedy programy, které stránka
používá.
Tělo stránky obsahuje text, který chcete publikovat. Obsahuje-li stránka obrázky
nebo odkazy na jiné stránky, musíte zařadit do textu odkazy, a to právě na místo, kde se má
na stránce obrázek nebo URL odkaz objevit.
Co z textu stránky bude záhlaví a co tělo, určují speciální značky umístěné přímo
v textu. Značka je zvláštní kousek textu, který je umístěn v úhlových závorkách <>. Podívejte
se na příklad. Je to nejjednodušší možná webová stránka, napsaná v jazyce HTML 3.2.
<HTML>
<head>
<title>Pozdrav</title>
</head>
<body>
<p>Zdravím celý svět!</p>
</body>
</HTML>
Takhle tedy vypadá kostra webové stránky. Vidíte, že skoro všechny části textu jsou
uzavřeny do úhlových závorek – třeba <HTML> nebo </p>. Jedině slovo „Pozdrav“ a text
„Zdravím celý svět“ jsou mimo úhlové závorky.
171
PŘÍLOHY
Tato stránka se v prohlížeči zobrazí takto:
Pozdrav - <jméno prohlížeče>
Zdravím celý svět!
Žádná ze značek není na obrazovce přímo vidět. Ale značky zařídily, že se slovo
„Pozdrav“ dostalo do záhlaví a věta „Zdravím celý svět“ do textu stránky.
Teď si dobře prohlédneme zdrojový text. Má 9 řádků. Je uložen v souboru s příponou
HTM nebo HTML jako prostý text. Přípona HTM nebo HTML je nutná, aby prohlížeč zobrazil soubor jako webovou stránku. Soubor se tedy může jmenovat třeba POZDRAV.HTM.
První řádek zdrojového textu určuje, jakým jazykem bude následující text stránky
napsán. Je to konečná (Final) HTML verze 3.2, jazyk pochází od skupiny W3C (WWW
Consortium – skupina osob resp. organizace zabývající se právě vývojem HTML). DTD znamená Document Type Definition (definice typu dokumentu) a EN znamená zápis na základě
ENglish, angličtiny; tj. že slova v úhlových závorkách – klíčová slova ve značkách – jsou anglická. Takový úvodní řádek by měla mít pro pořádek každá webová stránka, i když nejpoužívanější prohlížeče Netscape a Internet Explorer si ho umějí doplnit.
Text stránky začíná značkou <HTML> a končí značkou </HTML>. Stránka se dělí
na záhlaví a tělo; záhlaví začíná značkou <head> a končí značkou </head>, tělo stránky
začíná značkou <body> a končí značkou </body>.
Předběžně si ještě můžeme říci, že <title> znamená titulek – nadpis okénka prohlížeče,
když bude právě zobrazovat tuto stránku, a <p> znamená odstavec textu.
Všimněte si, že značky se používají ve dvojicích „počáteční“ a „koncová“ značka,
podobně jako se v obyčejném textu používá počáteční a koncová závorka, takto:
Obyčejný text
(
text
)
Text webové stránky
<p>
text
</p>
Koncová značka se od počáteční liší lomítkem /.
3.1.3.3 Značky
Jsou to speciální části textu webové stránky. Určují například:
Ü jakou typografickou úpravu bude mít text nebo část textu,
Ü jaký odkaz (link) nebo obrázek, pozadí, zvuk atd. se do textu vloží na místo, kde je
značka umístěna,
Ü jak je webová stránka rozčleněna,
Ü o čem pojednává (tzv. klíčová slova), kdo je její autor, kdy byla vytvořena atd.
Značky se zapisují mezi úhlové závorky <> (například: <pre>) přímo do textu. Jejich
obsahem je typ značky a případné parametry. Typ i název parametru lze zapsat písmeny malé
i velké abecedy.
172
Například značka:
<a href=“http://www.microsoft.com/cze“>
má typ A (anchor, anglicky kotva: určuje místo v textu) a obsahuje odkaz daný parametrem HREF, jehož hodnotou (v uvozovkách) je URL.
Mnoho značek (ale ne všechny!) se vyskytuje párově čili ve dvojicích. První značka
dvojice označuje začátek a druhá konec úseku. Mezi nimi je uzavřen úsek textu, na který
má značka vliv. Například:
text…<B>Toto bude vysazeno tučně.</B>Text…
Věta mezi párovými značkami bude vypsána tučným písmem:
text… Toto bude vysazeno tučně. Text…
(rámeček naznačuje, že takto bude vypadat text na obrazovce prohlížeče).
Všimněte si, že koncová párová značka obsahuje stejný typ značky (B – bold, anglicky:
výrazný a jasný) jako počáteční značka, jenom před názvem typu je znak /, lomítko (/B).
Jiný příklad:
deník <a href=“http://pes.internet.cz“>Neviditelný pes</a> vydává
ukazuje zápis odkazu. Značka A je párová. Počáteční značka obsahuje URL odkazu,
koncová ukončuje odkaz. Text „Neviditelný pes“ mezi nimi bude vidět na obrazovce a bude
podtržený, obvykle bude mít též jinou barvu než okolní text:
deník Neviditelný pes vydává
Na textu odkazu se ukazatel myši změní na ručičku – klepnutím (kliknutím, click) přejdete na URL odkazu, v tomto případě tedy na http://pes.internet.cz.
Značky pro úpravu lze v textu umisťovat libovolně. Například značka <I>, </I>
znamená kurzívu, skloněné písmo (anglicky: italic). Značky můžete kombinovat třeba takto:
jedna <I>dvě <B>tři </I>čtyři </B> pět. ß text na webové stránce
|<- Kurzíva ->|
|<- Tučně ->|
|<T+K>|
ß působení značek na text
a výsledek bude:
jedna dvě tři čtyři pět.
Značky, které rozčleňují text na záhlaví (heading) a tělo (body) nebo udávají autora,
klíčová slova a podobně, nelze umístit kamkoli, pouze na určená místa webové stránky.
PŘÍLOHY
173
3.1.4 Co všechno může webová stránka obsahovat
3.1.4.1 Informace
Základní informace na webové stránce jsou texty a obrázky. Text nebo jakákoli jeho část
může mít připojený odkaz. Také obrázek může mít připojený odkaz. To umožňuje vytvářet
například ikony – malé obrázky zastupující odkazy.
V zásadě není rozdíl mezi:
Ü odkazem ukazujícím zdroj (soubor, dokument, webovou stránku) umístěný spolu
se základní stránkou a
Ü jiným odkazem ukazujícím zdroj umístěný na vzdáleném serveru.
Samozřejmě je rozdíl mezi obrázkem, který je součástí navržené stránky a musí se zavést
spolu s ní, a obrázkem, který si člověk může nebo nemusí zobrazit podle vlastního přání.
Odkaz směřuje nejčastěji na text a obrázky (v několika grafických formátech, např.: GIF,
JPEG i BMP), ale může směřovat na libovolný typ souboru. Záleží zde na tom, má-li prohlížeč
schopnost takový soubor interpretovat. Například zvukové soubory je možno ihned přehrát,
je-li na počítači instalován adaptér pro vytváření zvuků. Pro videoklipy nebo jiné audiovizuální soubory si prohlížeč buď otevře přehrávací program ve zvláštním okně, nebo jej umístí
do svého okna.
Nemá-li prohlížeč definované spojení, nabídne vám soubor aspoň „stáhnout“, tedy přenést ze zdroje do vašeho počítače, kde si jej můžete otevřít později jiným programem.
Většinou slouží webové stránky k publikaci informací. Tedy k tomu, aby se uživateli
zobrazily v okně prohlížeče, případně aby si je vytiskl na tiskárně.
Jsou ale speciální stránky, které slouží k tomu, aby uživatel vyplnil údaje v prohlížeči
a odeslal je serveru. Takové stránky se nazývají formuláře. Připomínají tiskopis k vyplnění,
který můžete dostat na mnoha úřadech. Obsahují text a ovládací prvky, například okénka
k vyplnění, k zatržení nebo výběru.
174
Další příklad ukazuje rozbalovací seznamy: Kategorie a Operační systém.
Ovládací prvky jsou stejné jako v systémech Windows. Jsou to:
Ü okénko nebo pole pro zápis textu, pro zápis hesla,
Ü pole pro výběr souboru (s tlačítkem Procházet),
PŘÍLOHY
175
Ü skupina „puntíků“ pro volbu jediné z několika vzájemně se vylučujících možností,
Ü čtvereček k zatržení vybrané možnosti,
Ü seznam a rozbalovací seznam pro výběr položky,
Ü tlačítka.
3.1.4.1 Programy (skripty)
Kromě informací, které si uživatel pomocí prohlížeče zobrazí, přehraje nebo stáhne,
může z webové stránky získat také programy, které s ním budou hrát hry nebo vykonávat
jakoukoli jinou činnost. Při tvorbě stránek se setkáte s programy ve tvaru skriptů.
Skript je zápis programu v takzvaném zdrojovém tvaru, to znamená tak, jak jej napsal
programátor. Aby mohl takový program pracovat, musí počítač obsahovat interpret skriptů.
Nejběžněji užívané prohlížeče Netscape a Internet Explorer obsahují interprety jazyků Java
(autor: Sun Microsystems) a Visual Basic (autor: Microsoft).
Je velmi důležité rozlišovat mezi dvěma druhy skriptů.
Ü Skripty pro server běží již na Web serveru při požadavku klienta na stažení stránky.
Slouží hlavně k získání informací ze serveru a k okamžitému vytvoření nebo doplnění
stránky.
Ü Skripty pro klient jsou ty, které budou spuštěny prohlížečem, tj. poběží na klientském
počítači po stažení webové stránky. Slouží k nejrůznějším účelům.
Jak skripty pro server, tak skripty pro klient musí napsat autor webové stránky a přidat
je na určené místo do textu webové stránky.
Webové stránky jsou texty se značkami. Jsou uloženy do souborů. Jistě chcete, aby lidé
– uživatelé u svých prohlížečů – mohli vaše stránky vidět. Proto je musíte umístit na nějaký
server.
Takže server je první počítač, který soubor se stránkou otevře, když ji nějaký uživatel
chce vidět. Proto může server napřed zjistit, je-li na stránce skript pro server (tedy pro něj).
Když ano, server tento skript zpracuje – provede instrukce skriptu. Výsledkem je upravená
(například doplněná) webová stránka, která už neobsahuje skript pro server. Ta se odešle
klientovi.
Prohlížeč dostane stránku od serveru a také se nejdříve podívá, není-li v ní skript
pro klient. Pokud ano, zpracuje ho spolu s textem a značkami.
Skripty pro server a jejich výsledek
Tyto skripty se používají k takzvané parametrizaci webové stránky. To znamená, že
server dostane určité údaje o uživateli a případně o údajích, které uživatel zadal například
na odeslaném formuláři. Podle nich pak například najde data v databázi nebo spustí (stále
na serveru) program, který data vytvoří. Výsledky pak vzhledově upraví (například je uspořádá do tabulky) a odešle.
176
Takto ihned vytvářené (neboli generované) stránky jsou obyčejně rozlišeny už tím,
že mají jinou příponu: místo HTM nebo HTML je to například ASP nebo PHP.
Kdo chce navrhovat stránky se skripty pro server, musí znát prostředí serveru
a možnosti, které server nabízí: jaké programy, programové komponenty,
databáze a další objekty jsou na serveru k dispozici a jak pracují. Kromě toho musí
samozřejmě znát skriptový jazyk, který se na serveru dá použít.
Výsledkem činnosti skriptu musí být bezchybná webová stránka, která se odešle uživateli a správně se zobrazí na prohlížeči. To se dá udělat dvěma způsoby, které si může autor
stránky zvolit:
1. Jestliže se na stránce mění jenom poměrně malá část obsahu, můžete si napsat
„kostru“ webové stránky a pouze na místa, která se budou podle zadaných
parametrů lišit, vložíte „kousky“ skriptu, které zjistí a vyberou údaje závislé
na parametrech.
2. Když se výsledné stránky podle parametrů od sebe úplně liší, je lépe napsat složitější
skript, který si připraví celé stránky a hotové předá k odeslání. Psát takové skripty
už většinou vyžaduje dobrou znalost programování.
Skripty pro klient a jejich výsledek
Tyto skripty můžete napsat a zařadit jako součást webové stránky. Jsou ohraničeny značkami <script> a </script>. Je třeba uvést jazyk, v němž je skript napsán.
Jedna webová stránka může obsahovat několik skriptů, které se dají používat v různých situacích. Lze například určit skript, který se automaticky spustí po zavedení stránky.
Jiné skripty lze připojit k objektům, které jste na stránce vytvořili – jsou to například tlačítka.
Takové skripty si spustí sám uživatel, když stiskne tlačítko, k němuž je skript připojen.
Jestliže například píšete webovou stránku jako formulář, který má uživatel vyplnit, můžete vytvořit velmi jednoduchý, ale přitom užitečný skript, který nastaví kursor do nejčastěji
používaného pole (například do pole pro zápis hesla). Uživatel pak nemusí hýbat myší ani
tisknout tlačítko tabulátoru na své klávesnici, aby kursor do pole nastavil, ale může rovnou
psát.
<SCRIPT LANGUAGE=“VBScript“>
Sub Window_onLoad
Document.QForm.SearchString.Focus
End Sub
</SCRIPT>
Skript využívá toho, že každý objekt na webové stránce může být pojmenován (jméno
mu dáte vy v jeho počáteční značce). Objekt má nějaké vlastnosti a jednou z nich je ta, že má
kursor (anglicky focus, tj. ohnisko). Když ji skriptem nastavíte ihned po stažení stránky, bude
kursor umístěn tam, kam uživatel potřebuje.
Výsledek činnosti skriptů pro klient je velmi rozmanitý. Uvedl jsem jednoduchý příklad,
teď uvedu složitější. Skript může obsahovat rozbalování různých menu, tak, jak to můžeme
vidět na mnoha webových stránkách renomovaných firem. Pak stačí, aby uživatel zajel myší
na název menu a objeví se „roletka“ s dalšími položkami.
PŘÍLOHY
177
Roletka se rozvine z pevné polohy:
nebo od polohy ukazatele myši:
Jiné stránky obsahují například skript pro celou karetní hru. Spustí se po zavedení,
ukáže hrací plochu a řídí celý průběh hry, dokud uživatel ze stránky neodejde.
3.1.5 Jak dostanete hotovou webovou stránku na veřejný server
Veřejné servery, jako třeba centrum.cz nebo volny.cz, umožňují každému uživateli
Internetu:
Ü Připojit se uživatelským jménem a heslem.
Ü Vytvořit si vlastní přihrádku elektronické pošty (anglicky: mailbox).
Ü Vytvořit si vlastní webové stránky s celkovou velikostí až 20 MB.
Obvykle si webové stránky připravíte a odzkoušíte na vlastním počítači. Prohlížeč může
otevřít stránku a sledovat odkazy na vašem počítači, bez nutnosti připojení. Když stránky
fungují, potřebujete je přenést na server. Většina veřejných serverů k tomu používá protokol
FTP.
Tak
jako
www.<poskytovatel>.cz
nebo
www.<poskytovatel>.com
je
i ftp.<poskytovatel>.cz nebo ftp.<poskytovatel>.com. (Na místě <poskytovatel> je název,
například: tiscali, centrum, quick, volny.) Přenosový program FTP vám umožní zkopírovat vytvořené webové stránky na server. Jako jeden z přenosových programů můžete použít i prohlížeč (Netscape, Internet Explorer). Musíte zadat URL podle vzoru:
ftp://ftp.<poskytovatel>.cz, uvést svoje uživatelské jméno a heslo.
178
Přesné podrobnosti uživatelského jména a hesla se liší podle poskytovatele a jsou uvedeny na smlouvě, kterou dostanete po založení svého účtu a kterou můžete vytisknout.
Zpravidla je heslo stejné jako heslo, kterým se připojujete. Některý poskytovatel používá
u přihlášení jako jméno uživatele vaši adresu elektronické pošty, některý pouze jméno před
@, jiný dává speciální uživatelské jméno jen pro připojení – to vše je na smlouvě uvedeno.
Po úspěšném přihlášení se otevře okno FTP serveru. Můžete zde vytvářet podadresáře a přenášet soubory oběma směry. Potřebujete hlavně přenos ze svého počítače na server,
anglicky upload. Prohlížeč umožňuje přetahovat soubory myší z Průzkumníka nebo podobného programu přímo do okna prohlížeče. Podadresáře založíte použitím funkce „Nový objekt – Složka“ menu Soubor. Případné stažení souboru (download) provedete obvyklým způsobem (z menu, které se na souboru otevře pravou klávesou myši).
Na FTP server můžete své stránky přenášet i jinými programy. Zde je příklad
z programu Windows Commander. Je to volně dostupný program, tzv. shareware.
Po instalaci musíte do určité doby (1 měsíc) zaplatit autorovi za registraci, nebo program zase
odinstalovat.
PŘÍLOHY
179
Vidíte, že okno programu je rozděleno na dvě. Levé okno ukazuje obsah adresáře
na připojeném serveru FTP. Pravé okno ukazuje místní (lokální, na vašem počítači) adresář,
odkud můžete soubory a jejich skupiny i podadresáře vybírat a přenášet na FTP server.
V řadě tlačítek pod menu „Start“ je tlačítko k založení nového spojení FTP. Zde si
zadáte adresu FTP serveru (zde je jako příklad ftp.volny.cz), určíte, že připojení nebude anonymní (důležité!), způsob spojení (pasivní nebo aktivní klient) a případně ochranný systém
(firewall). V dalších dialozích zadáte jméno uživatele a heslo. Po připojení se ukáže okno, jak
ho vidíte na obrázku.
Rád bych ještě upozornil na jednu nepříjemnou věc. Servery poskytovatelů většinou
rozlišují mezi písmeny malé a velké abecedy v názvech souborů. (Také často chybně „chápou“ česká písmena jako ě, š, č, ř atd.) Například jmenuje-li se soubor „Celkem.jpg“ a vy se
na něj odkážete značkou <img src=„../obr/celkem.jpg“>, pak se soubor nenajde, ani když je
správně uložen v podsložce „obr“. Je to tím, že server hledá a nenajde soubor „celkem.jpg“,
který považuje za jiný soubor než „Celkem.jpg“. Nejjednodušší, ale spolehlivá pravidla
tedy jsou:
Ü Jména souborů psát písmeny malé abecedy (celkem.jpg, ne Celkem.JPG) jak
ve složkách, tak v odkazech ve zdrojích webových stránek.
Ü Ve jménech souborů nepoužívat písmena s háčky a čárkami.
Ü Psát jména souborů jednoduchá (bez mezer) a krátká. Mezery je lépe nahradit znaky
podtržení („_“).
180
3.2 Přehled značek
Tabulka uvádí všechny značky popsané v tomto učebním textu a názvy jejich
parametrů. Zjistíte zde, do jaké části zdrojového textu značka patří (tučná kurzíva), do jaké
skupiny značka patří (kurzíva) a je-li značka párová nebo ne. Navíc je zde uvedena značka
<DL>, která má stejnou funkci jako značka <DFN>.
Identifikace – první řádek zdroje stránky
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 3.2 Final//EN“>
Poznámka, lze použít kdekoli

Ohraničení stránky
<HTML> </HTML>
Záhlaví stránky
<HEAD> </HEAD>
Značky pro záhlaví stránky
<BASE>
HREF
<BASEFONT>
SIZE
<BGSOUND>
LOOP, SRC
<META>
CONTENT, HTTP-EQUIV, NAME
<SCRIPT> </SCRIPT>
LANGUAGE
<STYLE> </STYLE>
<TITLE> </TITLE>
Tělo stránky
<BODY> </BODY>
BACKGROUND, BGCOLOR, BGPROPERTIES,
TEXT
Značky pro tělo stránky
Formátování: písmo, odstavce a nadpisy
<B> </B>
<BLOCKQUOTE> </BLOCKQUOTE>
<BR>
<CENTER> </CENTER>
<CITE> </CITE>
<DIV> </DIV>
ALIGN
<FONT> </FONT>
COLOR, FACE, SIZE
<H1> </H1>
ALIGN
<H2> </H2>
ALIGN
<H3> </H3>
ALIGN
181
PŘÍLOHY
<H4> </H4>
ALIGN
<H5> </H5>
ALIGN
<H6> </H6>
ALIGN
<HR>
ALIGN, SIZE, WIDTH
<I> </I>
<P> </P>
ALIGN
<PRE> </PRE>
WIDTH
<S> </S>
<STRIKE> </STRIKE>
<SUB> </SUB>
<SUP> </SUP>
<TT> </TT>
<U> </U>
Odkazy
<A> </A>
HREF, NAME, TARGET, TITLE
<AREA>
ALT, COORDS, HREF, SHAPE
<IMG>
ALIGN, ALT, BORDER, HEIGHT, HSPACE, SRC, TITLE,
USEMAP, VSPACE, WIDTH
<MAP> </MAP>
NAME
Seznamy
<DD>
<DFN> </DFN>
<DL>
COMPACT
<DT>
<LI>
TYPE, VALUE
<OL> </OL>
COMPACT, START, TYPE
<UL> </UL>
COMPACT, TYPE
Tabulky
<CAPTION> </CAPTION>
ALIGN, VALIGN
<COLGROUP>
SPAN
<TABLE> </TABLE>
ALIGN, BACKGROUND, BGCOLOR, BORDER, BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT,
CELLPADDING, CELLSPACING, FRAME, RULES, WIDTH
<TD> </TD>
ALIGN, BACKGROUND, BGCOLOR, BORDERCOLOR,
BORDERCOLORDARK, BORDERCOLORLIGHT, COLSPAN, HEIGHT, NOWRAP, ROWSPAN, VALIGN, WIDTH
182
<TH> </TH>
ALIGN, BACKGROUND, BGCOLOR, BORDERCOLOR,
BORDERCOLORDARK, BORDERCOLORLIGHT, COLSPAN, HEIGHT, NOWRAP, ROWSPAN, VALIGN, WIDTH
<TR> </TR>
ALIGN, BGCOLOR, BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT, VALIGN
Rámce
<FRAME>
FRAMEBORDER, MARGINHEIGHT, MARGINWIDTH,
NAME, NORESIZE, SCROLLING, SRC
<FRAMESET> </FRAMESET>
BORDERCOLOR, COLS, FRAMEBORDER, FRAMESPACING, ROWS
<IFRAME> </IFRAME>
ALIGN, FRAMEBORDER, HEIGHT, MARGINHEIGHT, MARGINWIDTH, NAME, SCROLLING, SRC, TITLE, WIDTH
<NOFRAMES> </NOFRAMES>
Formuláře
<FORM> </FORM>
ACTION, ENCTYPE, METHOD
<INPUT>
ALIGN, CHECKED, MAXLENGTH, NAME, SIZE, SRC,
TYPE, VALUE
<OPTION>
SELECTED, VALUE
<SELECT> </SELECT>
MULTIPLE, NAME, SIZE
<TEXTAREA> </TEXTAREA>
COLS, NAME, ROWS
183
PŘÍLOHY
3.3 Přehled parametrů
Tato tabulka obsahuje parametry, nápovědu jejich hodnot a značky, v nichž se parametry
mohou použít.
Kurzívou v prvním a třetím sloupci jsou označeny parametry formuláře (<FORM>)
vytvářející ovládací prvky, jako pole k vyplnění, volby a možnosti k výběru.
Kurzívou pouze ve druhém sloupci je označen symbol, za který je třeba dosadit
konkrétní údaj. Tedy jako „URL“ použijete ve skutečném zdrojovém textu například
„http://www.seznam.com“. Jako colour použijete buď název barvy (třeba Black), nebo
její hexadecimální vyjádření (pro černou: #000000). Místo n zapíšete číslo, jakého je
právě zapotřebí, atd. Jsou-li kolem symbolu uvozovky, znamená to, že je musíte zapsat
i do zdrojového textu.
Symbol
Význam
colour
barva vyjádřená názvem (White) nebo hex. číslem (#FFFFFF)
font_name
jméno instalovaného fontu – řezu písma, jako Arial nebo Courier
frame
název cílového rámce
h1,h2,…
výšky řádků (height v ROWS)
language
jazyk skriptu, prakticky buď JavaScript nebo VBScript
n
číslo
[+|-]n
buď zvýšení o n (např. +2), nebo snížení o n (např. –3), nebo nastavení velikosti
na n (např. 5); co je v hranatých závorkách [ ], lze vynechat
n1,n2,…
text
dvojice souřadnic (v COORDS)
jméno, kterým pojmenujete značku anebo objekt, který značka vytváří (třeba rámec)
libovolný potřebný text
URL
Odkaz ve tvaru samotného URL, nebo URL#jméno, nebo pouze #jméno
w1, w2,…
šířky sloupců (width v COLS)
name
Normální stojaté písmo ve druhém sloupci značí, že jako hodnotu použijete přímo uvedené slovo nebo jedno z uvedených slov. Kolmá čárka mezi slovy znamená „nebo“.
Například první parametr ALIGN lze použít ve značce <DIV> buď jako <DIV
ALIGN=LEFT>, nebo jako <DIV ALIGN=CENTER>, nebo <DIV ALIGN=RIGHT>.
Kromě toho lze ve značce <DIV> ještě použít druhý parametr ALIGN jako
<DIV ALIGN=JUSTIFY>.
ACTION
„URL“
<FORM>
<DIV> <H1> <H2> <H3> <H4>
<H5> <H6> <HR> <P> <TABLE>
<TD> <TH> <TR>
<DIV>
ALIGN
LEFT|CENTER|RIGHT
ALIGN
JUSTIFY
ALIGN
TOP|ABSMIDDLE|MIDDLE|
BOTTOM|LEFT|RIGHT
<IMG> <INPUT>
ALIGN
TOP|ABSMIDDLE|MIDDLE|ABSBOTTOM| BOTTOM|LEFT|RIGHT|BASELINE
<IFRAME>
ALIGN
ALT
TOP|BOTTOM
„text“
<CAPTION>
<AREA> <IMG>
184
BACKGROUND
„URL“
<BODY> <TABLE> <TD> <TH>
BGCOLOR
BGPROPERTIES
BORDER
BORDERCOLOR
BORDERCOLORDARK
BORDERCOLORLIGHT
CELLPADDING
CELLSPACING
CHECKED
COLOR
COLS
COLS
COLSPAN
COMPACT
CONTENT
colour
„FIXED“
n
colour
colour
colour
n
n
„text“
<BODY>
<BODY>
<IMG> <TABLE>
<TABLE>
<TABLE>
<TABLE>
<TABLE>
<TABLE>
<INPUT>
<FONT>
<TEXTAREA>
<FRAMESET>
<TD> <TH>
<DL> <OL> <UL>
<META>
COORDS
ENCTYPE
FACE
„n1,n2,…“
„multipart/form-data“
„font_name“
<AREA>
<FORM>
<FONT>
FRAME
ALL|VOID|ABOVE|BELOW|
LHS|RHS|HSIDES|VSIDES
<TABLE>
FRAMEBORDER
0|1
FRAMESPACING
HEIGHT
HREF
HSPACE
HTTP-EQUIV
LANGUAGE
LOOP
MARGINHEIGHT
MARGINWIDTH
MAXLENGTH
METHOD
MULTIPLE
n
n
„URL“
n
„name“
„language“
n
n
n
n
GET|POST
NAME
„name“
NORESIZE
NOWRAP
ROWS
ROWS
ROWSPAN
RULES
SCROLLING
SELECTED
colour
n
„w1,w2,…“
n
n
„h1,h2,…“
n
NONE|ALL|COLS|ROWS|GROUPS
AUTO|NO|YES
<FRAMESET> <FRAME> <IFRAME>
<FRAMESET>
<IFRAME> <IMG> <TD> <TH>
<A> <AREA> <BASE>
<IMG>
<META>
<SCRIPT>
<BGSOUND>
<FRAME> <IFRAME>
<FRAME> <IFRAME>
<INPUT>
<FORM>
<SELECT>
<A> <FRAME> <IFRAME> <INPUT> <MAP> <META> <SELECT>
<TEXTAREA>
<FRAME>
<TD> <TH>
<TEXTAREA>
<FRAMESET>
<TD> <TH>
<TABLE>
<FRAME> <IFRAME>
<OPTION>
185
PŘÍLOHY
SHAPE
CIRCLE|POLY|RECT
SIZE
[+|-]n
SPAN
n
SRC
„URL“
START
VALUE
n
frame|_BLANK|_SELF|_TOP|_
PARENT
colour
„text“
1|A|a|I|i|DISC|CIRCLE|SQUARE
TEXT|PASSWORD|CHECKBOX|RADIO| SUBMIT|RESET|FILE|HIDDEN|IMAGE
„URL“
TOP|MIDDLE|BOTTOM|BASELINE
n|“text“
VSPACE
n
WIDTH
n
TARGET
TEXT
TITLE
TYPE
TYPE
USEMAP
VALIGN
<AREA>
<BASEFONT> <FONT> <HR> <INPUT> <SELECT>
<COLGROUP>
<BASEFONT> <FRAME> <IFRAME> <IMG> <INPUT>
<OL>
<A>
<BODY>
<A> <IFRAME> <IMG>
<OL> <UL> <LI>
<INPUT>
<IMG>
<TD> <TH> <TR>
<LI> <INPUT> <OPTION>
<IMG>
<HR> <IFRAME> <IMG> <PRE>
<TABLE> <TD> <TH>
3.4 Přehled kódů
Tabulka uvádí kódy znaků, které lze zapsat do zdroje HTML stránky mezi znaky
& a ; buď jako kódové číslo #n (n: 0 – 255), nebo jako název znaku.
Znaky s diakritickými znaménky v této tabulce příslušejí
kódu Latin-1, kódové stránce CP-1252 pro jazyky západní
Evropy. V jiných kódových stránkách jsou na mnoha
stejných pozicích jiné znaky!
Název
nbsp
iexcl
Kód
160
161
Popis znaku
no-break space
inverted exclamation mark
Poznámka
nedělitelná mezera
obrácený vykřičník
cent
pound
curren
yen
brvbar
sect
uml
copy
ordf
laquo
not
shy
162
163
164
165
166
167
168
169
170
171
172
173
cent sign
pound sterling sign
general currency sign
yen sign
broken (vertical) bar
section sign
umlaut (dieresis)
copyright sign
ordinal indicator, feminine
angle quotation mark, left
not sign
soft hyphen
měna: cent (USA)
měna: libra (GB)
znak měny
měna: jen (Jap)
přerušená svislá čára
znak oddílu; paragraf
přehláska
copyright
ordinál; ženský rod
dvojitá levá úhlová závorka
znak negace
rozdělovník slov
186
reg
macr
deg
plusmn
sup2
sup3
acute
micro
para
middot
cedil
sup1
ordm
raquo
frac14
frac12
frac34
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
registered sign
macron
degree sign
plus-or-minus sign
superscript two
superscript three
acute accent
micro sign
pilcrow (paragraph sign)
middle dot
cedilla
superscript one
ordinal indicator, masculine
angle quotation mark, right
fraction one-quarter
fraction one-half
fraction three-quarters
znak registrace
pomlčka nahoře
znak stupně
plus-minus
horní index (exponent) 2
horní index (exponent) 3
čárka nad (délka, přízvuk)
znak mikro
znak konce odstavce
tečka uprostřed
„ocásek“ pod, doleva
horní index 1
ordinál; mužský rod
dvojitá pravá úhlová závorka
zlomek: jedna čtvrtina
zlomek: jedna polovina
zlomek: tři čtvrtiny
iquest
Agrave
Aacute
Acirc
Atilde
Auml
Aring
AElig
Ccedil
Egrave
Eacute
Ecirc
Euml
Igrave
Iacute
Icirc
Iuml
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
inverted question mark
capital A, grave accent
capital A, acute accent
capital A, circumflex accent
capital A, tilde
capital A, dieresis or umlaut mark
capital A, ring
capital AE diphthong (ligature)
capital C, cedilla
capital E, grave accent
capital E, acute accent
capital E, circumflex accent
capital E, dieresis or umlaut mark
capital I, grave accent
capital I, acute accent
capital I, circumflex accent
capital I, dieresis or umlaut mark
obrácený otazník
A s čárkou nad, doleva
A s čárkou nad, doprava
A se stříškou (vokáněm)
A s vlnovkou (tildou) nad
A s přehláskou
A s kroužkem nad
dvojznak AE velký
C s cedillou („ocáskem“)
E s čárkou nad, doleva
E s čárkou nad, doprava
E se stříškou
E s přehláskou
I s čárkou nad, doleva
I s čárkou nad, doprava
I se stříškou
I s přehláskou
ETH
Ntilde
Ograve
Oacute
Ocirc
Otilde
Ouml
times
Oslash
Ugrave
Uacute
Ucirc
208
209
210
211
212
213
214
215
216
217
218
219
capital Eth, Icelandic
capital N, tilde
capital O, grave accent
capital O, acute accent
capital O, circumflex accent
capital O, tilde
capital O, dieresis or umlaut mark
multiply sign
capital O, slash
capital U, grave accent
capital U, acute accent
capital U, circumflex accent
velké islandské Eth
N s vlnovkou
O s čárkou nad, doleva
O s čárkou nad, doprava
O se stříškou
O s vlnovkou
O s přehláskou
znak násobení
O škrtnuté lomítkem
U s čárkou nad, doleva
U s čárkou nad, doprava
U se stříškou
187
PŘÍLOHY
Uuml
Yacute
THORN
szlig
agrave
aacute
acirc
atilde
auml
aring
aelig
ccedil
egrave
eacute
ecirc
euml
igrave
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
capital U, dieresis or umlaut mark
capital Y, acute accent
capital THORN, Icelandic
small sharp s, German (sz ligature)
small a, grave accent
small a, acute accent
small a, circumflex accent
small a, tilde
small a, dieresis or umlaut mark
small a, ring
small ae diphthong (ligature)
small c, cedilla
small e, grave accent
small e, acute accent
small e, circumflex accent
small e, dieresis or umlaut mark
small i, grave accent
U s přehláskou
Y s čárkou nad, doprava
velké islandské Thorn
německé ostré „s“
a s čárkou nad, doleva
a s čárkou nad, doprava
a se stříškou
a s vlnovkou
a s přehláskou
a s kroužkem nad
dvojznak ae malý
c s cedillou
e s čárkou nad, doleva
e s čárkou nad, doprava
e se stříškou
e s přehláskou
i s čárkou nad, doleva
iacute
icirc
iuml
eth
ntilde
ograve
oacute
ocirc
otilde
ouml
divide
oslash
ugrave
uacute
ucirc
uuml
yacute
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
small i, acute accent
small i, circumflex accent
small i, dieresis or umlaut mark
small eth, Icelandic
small n, tilde
small o, grave accent
small o, acute accent
small o, circumflex accent
small o, tilde
small o, dieresis or umlaut mark
divide sign
small o, slash
small u, grave accent
small u, acute accent
small u, circumflex accent
small u, dieresis or umlaut mark
small y, acute accent
i s čárkou nad, doprava
i se stříškou
i s přehláskou
malé islandské eth
n s vlnovkou nad
o s čárkou nad, doleva
o s čárkou nad, doprava
o se stříškou
o s vlnovkou nad
o s přehláskou
znak celočíselného dělení
o škrtnuté lomítkem
u s čárkou nad, doleva
u s čárkou nad, doprava
u se stříškou
u s přehláskou
y s čárkou nad, doprava
thorn
yuml
254
255
small thorn, Icelandic
small y, dieresis or umlaut mark
malé islandské Thorn
y s přehláskou
188
3.5 Rozšířená barevná paleta
Většina uživatelů má dnes již počítače s možností zobrazení nejméně 256 barev, ale ani
TrueColor není žádnou výjimkou. Proto bude vhodné uvést k základním barvám také řadu
dalších. Tabulka obsahuje některé velmi pěkné odstíny.
Názvy barev z prvního sloupce lze přímo používat v parametrech COLOR.
Název barvy
Číslo barvy
Poznámka
Název barvy
Číslo barvy
Poznámka
Black
#000000
černá
White
#FFFFFF
bílá
Silver
#C0C0C0
stříbrná
Red
#FF0000
červená
Gray
#808080
šedá
Green
#008000
zelená
Blue
#0000FF
modrá
Yellow
#FFFF00
žlutá
Purple
#800080
purpurová
Olive
#808000
olivová
Navy
#000080
námořnická modř
Aqua
#00FFFF
barva vody
Lime
#00FF00
limetová
Maroon
#800000
kaštanová
Teal
#008080
modrozelená
Fuchsia
#FF00FF
fuchsiová
DarkGreen
#006400
tmavozelená
MidnightBlue
#191970
půlnoční modř
DimGray
#696969
matná šedá
SlateGray
#708090
břidlicově šedá
LightSlateGray
#778899
světlá břidlicová
šeď
DarkBlue
#00008B
tmavě modrá
MediumBlue
#0000CD
středně modrá
DarkCyan
#008B8B
tmavě azurová
DeepSkyBlue
#00BFFF
hluboká modř
oblohy
DarkTurquoise
#00CED1
tmavě tyrkysová
MediumSpringGreen
#00FA9A
střední jarní zeleň
SpringGreen
#00FF7F
jarní zeleň
DodgerBlue
#1E90FF
modř LA Dodgers
*)
LightSeaGreen
#20B2AA
světlá mořská
zeleň
ForestGreen
#228B22
lesní zeleň
SeaGreen
#2E8B57
mořská zeleň
DarkSlateGray
#2F4F4F
tmavá břidlicová
šeď
LimeGreen
#32CD32
limetová zeleň
MediumSeaGreen
#3CB371
střední mořská
zeleň
Turquoise
#40E0D0
tyrkysová
RoyalBlue
#4169E1
královská modř
SteelBlue
#4682B4
ocelová modř
DarkSlateBlue
#483D8B
tmavá břidlicová
modř
MediumTurquoise
#48D1CC
střední tyrkysová
Indigo
#4B0082
indigová modř
DarkOliveGreen
#556B2F
tmavá olivová
zeleň
CadetBlue
#5F9EA0
kadetská modř
CornflowerBlue
#6495ED
chrpová modř
MediumAquamarine
#66CDAA
akvamarín
střední
SlateBlue
#6A5ACD
břidlicová modř
OliveDrab
#6B8E23
olivově šedá
MediumSlateBlue
#7B68EE
střední břidlicová
modř
LawnGreen
#7CFC00
trávníková zeleň
Chartreuse
#7FFF00
šartréská zeleň
189
PŘÍLOHY
Aquamarine
#7FFFD4
akvamarín
SkyBlue
#87CEEB
nebeská modř
LightSkyBlue
#87CEFA
světlá nebeská
modř
BlueViolet
#8A2BE2
modrofialová
DarkRed
#8B0000
tmavočervená
DarkMagenta
#8B008B
tmavofialová
SaddleBrown
#8B4513
odstín hnědé
DarkSeaGreen
#8FBC8B
tmavá mořská
zeleň
LightGreen
#90EE90
světle zelená
MediumPurple
#9370DB
středně purpurová
DarkViolet
#9400D3
tmavě fialková
PaleGreen
#98FB98
bledě zelená
DarkOrchid
#9932CC
temná orchidej
YellowGreen
#9ACD32
žlutozelená
Sienna
#A0522D
siena, odstín
hnědé
Brown
#A52A2A
hnědá
DarkGray
#A9A9A9
tmavošedá
LightBlue
#ADD8E6
světlemodrá
GreenYellow
#ADFF2F
zelenožlutá
PaleTurquoise
#AFEEEE
bledě tyrkysová
LightSteelBlue
#B0C4DE
světlá ocelová
modř
PowderBlue
#B0E0E6
sněhově modrá
Firebrick
#B22222
žáruvzdorná cihla
DarkGoldenrod
#B8860B
tmavě zlatý prut
MediumOrchid
#BA55D3
střední orchidej
RosyBrown
#BC8F8F
růžově hnědá
DarkKhaki
#BDB76B
tmavá khaki
MediumVioletRed
#C71585
střední fialově
červená
IndianRed
#CD5C5C
indická červená
Peru
#CD853F
peruánská hnědá
Chocolate
#D2691E
čokoláda
Tan
#D2B48C
světlehnědá
LightGrey
#D3D3D3
světle šedá
Thistle
#D8BFD8
bodlák
Orchid
#DA70D6
orchidej
Goldenrod
#DAA520
zlatý prut
PaleVioletRed
#DB7093
bledá fialově
červená
Crimson
#DC143C
karmínová
Gainsboro
#DCDCDC
Plum
#DDA0DD
švestková
Burlywood
#DEB887
statný strom
LightCyan
#E0FFFF
světle azurová
Lavender
#E6E6FA
levandulová
DarkSalmon
#E9967A
tmavě lososová
Violet
#EE82EE
fialková
PaleGoldenrod
#EEE8AA
bledý zlatý prut
LightCoral
#F08080
světlý korál
Khaki
#F0E68C
khaki
AliceBlue
#F0F8FF
Honeydew
#F0FFF0
medový meloun
Azur
#F0FFFF
azurová
SandyBrown
#F4A460
pískově hnědá
Wheat
#F5DEB3
pšenice
Beige
#F5F5DC
béžová
WhiteSmoke
#F5F5F5
bílý kouř
MintCream
#F5FFFA
mátový krém
GhostWhite
#F8F8FF
bílý duch
Salmon
#FA8072
lososová
AntiqueWhite
#FAEBD7
antická bílá
Linen
#FAF0E6
len, plátno
LightGoldenrodYellow
#FAFAD2
světle zlatá
Oldlace
#FDF5E6
stará krajka
DeepPink
#FF1493
sytě růžová
OrangeRed
#FF4500
oranžově červená
190
Tomato
#FF6347
rajčata
HotPink
#FF69B4
ostrá růžová
Coral
#FF7F50
korálová
DarkOrange
#FF8C00
tmavooranžová
LightSalmon
#FFA07A
světle lososová
Orange
#FFA500
oranžová
LightPink
#FFB6C1
světle růžová
Pink
#FFC0CB
růžová
Gold
#FFD700
zlatá
Peachpuff
#FFDAB9
broskev
NavajoWhite
#FFDEAD
navažská bílá
Moccasin
#FFE4B5
mokasín
Bisque
#FFE4C4
krémová polévka
MistyRose
#FFE4E1
mlhavá růžová
BlanchedAlmond
#FFEBCD
loupaná mandle
PapayaWhip
#FFEFD5
papájové šodó
LavenderBlush
#FFF0F5
levandule červená
Seashell
#FFF5EE
mořská mušle
Cornsilk
#FFF8DC
kukuřičné hedvábí
LemonChiffon
#FFFACD
citronový šifon
Floral White
#FFFAF0
květinová bílá
Snow
#FFFAFA
sněhobílá
LightYellow
#FFFFE0
světležlutá
Ivory
#FFFFF0
slonovina
*) LA Dodgers – Los Angeles Dodgers, basebalový klub, používá tuto modrou jako klubovou barvu.
Termín
Vysvětlení
Anglicky
adresát
příjemce pošty nebo elektronické pošty
recipient
aktualizuje
updates
provádí změny, například prohlížeč, když zobrazuje novou verzi webové stránky
anonymní
anonymous
server poskytne žádané webové stránky a jiné dokumenty komukoli
aplikační programy
applications
aplikační programy neboli aplikace; např. programy, které se používají
z webových stránek
aplikační úroveň
application level
protokol, kterým spolu komunikují přímo aplikace; například HTTP
areál
místo věnované nějaké činnosti, například sportu
bezstavový
jednoduchý protokol, který nemusí sledovat stav komunikace
blok
malá část informace, například jeden paket
CD
191
PŘÍLOHY
databáze
database
soubor obsahující uspořádané údaje; např. ceník zboží
defaultní
default
hodnota, která se uplatní, když není nic výslovně (např. parametrem) zadáno
dokumenty
documents
soubory obsahující uspořádaná data, jako zvuky, obrázky, texty, animace atd.
doručen
adresát dostane dopis nebo zprávu elektronické pošty; tím je zpráva doručena
dynamicky
server může webovou stránku vytvořit jednorázově ihned po požadavku z prohlížeče
e-business
elektronické obchodování po Internetu; vyžaduje speciální aplikace a zabezpečení
elektronická pošta
e-mail
posílání zpráv a příloh; jedna z nejstarších aplikací Internetu
protokol určený k přenosu souborů; také služba Internetu pro stejný účel
formuláře
forms
speciální webové stránky k vyplnění uživatelem (dotazníky apod.); obsahují objekty
FTP
posílání souborů a dokumentů; další z nejstarších aplikací Internetu
FTP server
server, který obsahuje službu FTP a poskytuje soubory
glosa
krátká vysvětlivka
glosář
soubor vysvětlivek, např. tato tabulka
glossary
grafické formáty
soubory obrázků mají různé vnitřní uspořádání (formáty),
např. GIF, JPEG, BMP, TIFF
HTML
192
HUB
základní propojovací prvek počítačů v lokální síti
hypertext
hypertext
text obsahující odkazy na jiná místa stejného nebo i jiného textu; webové stránky
jsou částí hypertextu
jednoduchý protokol, který se používá pro přenos dokumentů službou WWW
instalační balíček
install package
soubor, z něhož lze instalovat program nebo aplikaci, operační systém atd.
Internet Protocol
základní protokol Internetu, nad ním pracují protokoly aplikací, jako FTP nebo HTTP
IP-adresa
IP address
základní číselné určení počítače v Internetu; každý má svou vlastní IP-adresu
jméno domény
domain name
určení nějakého celku v Internetu, například státu nebo organizace
klient
client
„zákazník“ - počítač, který se obrací na server a něco od něj žádá
klientský počítač
client computer
např. PC s prohlížečem, u něhož sedí uživatel a „surfuje“
klientský program
client program
např. WWW prohlížeč, FTP program nebo klient elektronické pošty
koncová značka
koncová značka ukončuje oblast působnosti párové značky; má před jménem
znak „/“, nemá parametry
kursor
cursor
místo na obrazovce, kam přesně uživatel napíše další znak; označeno blikající
svislou čárkou či blokem
LAN
lokální počítačová síť
Local Area Network
menu
menu
též nabídka: seznam funkcí nebo akcí, z nichž si můžete zvolit
PŘÍLOHY
metoda
method
způsob, jak něco udělat; např. výměna údajů mezi klientem a serverem má
několik metod
metody
methods
podprogramy objektu, které lze zvenku volat a žádat tak, aby objekt vykonával
určené funkce
objekty
objects
u formulářů jsou to různá pole k vyplnění nebo úpravě uživatelem; skripty
s nimi snadno pracují
odkaz
link
ukazatel z jednoho místa hypertextu na jiné, tj. na tutéž nebo jinou stránku,
stejný i jiný server, v rámci celého Internetu
odpověď
response
data přenesená ze serveru klientovi na jeho požadavek
ohnisko
focus
má-li uživatel měnit objekt na stránce, třeba napsat text, musí objekt dostat ohnisko
optické trasy
dálkové spoje s velkou kapacitou, tvořené světlovodnými vlákny
paket
packet
část informace přenášená jako „balíček“ s adresou odesilatele i adresáta
parametry
parameters
údaje, kterými přesně určíte, co bude značka dělat
párové značky
mnoho značek HTML tvoří páry složené z počáteční a koncové značky; značky
působí na text uvnitř páru
plné doménové jméno
server nebo jiný počítač je v Internetu určen plným doménovým jménem, složeným
ze jména serveru a jména domény
počáteční značka
počáteční značka startuje oblast působnosti párové značky; většinou má parametry
port
port
číslo od 1 do 65535, adresuje komunikující program v rámci počítače / serveru
193
194
porty
ports
rozsah portů se dělí na „známé“ (přidělené službám) a uživatelské
poštovní server
mail server
server, který udržuje poštovní přihrádky uživatelů, uschovává pro ně zprávy
požadavek
request
data přenesená z klienta serveru, obvykle požadující webovou stránku nebo
jiný dokument
pracovní stanice
profesionální klientský počítač
workstation
prohlížeč
browser
klientský program pro službu WWW, jako Netscape, Opera, Internet Explorer,…
prostředí serveru
operační systém, skriptové jazyky, způsob řešení služby WWW
publikace
publication
zveřejnění; dokument se stane dostupným komukoli z Internetu
rámce (1)
frames
prázdné speciální stránky nebo části stránek, kam lze vložit webové stránky;
umožňují prohlížečům seskládat na plochu obrazovky několik webových stránek
vedle sebe, jednu do druhé atd.
rámce (2)
frames
bloky informací obíhající v sítích typu LAN
role
role
počítač může pracovat jako klient nebo server, tedy „hraje“ roli klienta nebo serveru
rozbalovací seznam
drop-down list
jeden z ovládacích prvků používaných na formulářích
server
server
počítač dostupný z Internetu, na němž běží nějaká služba (FTP, WWW,…)
schránka
mailbox
místo na poštovním serveru, kde se uchovávají poštovní zprávy pro určitého uživatele
skript pro klienta
client-side script
skript zpravidla psaný v jazyku JavaScript; vykonává ho prohlížeč po zavedení
webové stránky, která jej obsahuje
PŘÍLOHY
skriptový jazyk
script language
skripty
scripts
programy, které se provádějí (interpretují) přímo ze zdrojového textu
skripty pro server
server-side scripts
skripty psané v různých jazycích; vykonává je server; vytvářejí nebo doplňují
webové stránky podle požadavků klientů
služba
service
stáhnout
download
„stažení“ webové stránky nebo jiného dokumentu (souboru) ze serveru do prohlížeče
strukturovaná data
data různě uspořádaná, jako třeba v souboru typu DOC (nebo v jiném dokumentu)
tabulky
tables
jazyk HTML umožňuje vytvářet webové stránky obsahující přehledné tabulky
tělo stránky
body
část zdroje webové stránky obsahující vlastní data, která prohlížeč zobrazí v okně
titulek
TITLE; ALT
popis k obrázku nebo nadpis webové stránky
tlačítka
buttons
druh ovládacích prvků používaných na formulářích k odeslání apod.
upload
upload
odeslání hotových stránek a jiných souborů na server
URL
Uniform Resource Locator
jednotný ukazatel na zdroj, hlavní část odkazů
uzly
nodes
síť se skládá z uzlů a spojů; uzly bývají servery a jiné počítače
uživatelské porty
user ports
porty, které nejsou pevně přiřazeny žádné službě
195
196
veřejná složka
public
na serverech FTP: volně přístupná složka, tj. složka přístupná každému
Vyrovnávací pamět
cache
pracovní paměť prohlížeče pro přijaté webové stránky; zrychluje jejich zobrazení
web
pavučina; síť
web
webové stránky
web pages
záhlaví stránky
head
úvodní část webové stránky s údaji o platnosti, nadpisem, klíčovými slovy atd.
zdrojový text
source text
značky
tags, marks
krátké texty v závorkách <>, napsané autorem webové stránky, řídící její zobrazení
a funkce v prohlížeči
zveřejnění
publish
publikace: umístění webových stránek na server, kde jsou dostupné z Internetu
197
REJSTŘÍK
A
adresář
adresát
aktualizuje
ampersand
analyzuje
Animace
anonymní
aplikační úrovně
aplikačními programy
applety
areál
B
J
18
160
139
28
11, 12
92
165
168
168
131
155
bezstavový
blok
buněk
168
156
58
celosvětová
57
databáze
defaultní
Definice
dokumenty
doručen
dynamicky
134
167
56
162
160
146
e-business
elektronická pošta
158
160
formuláře
FTP
FTP servery
162
173
162
160
generátor
generované
glosa
glosář
grafické systémy
grafických formátech
19
136
153
154
9
173
Hodnota
HTML
HUB
hypertext
17
168
156
168
9
instalačních balíčků
instrukce
Internet Protocol
interpret skriptů
interpretovat
IP-adresa
162
175
157
175
173
157
C
D
E
F
G
H
I
Java
Jazyk CSS
Bílé mezery
dědičnost
Délkové jednotky
Formátování textu
generický
Identifikátory
Import stylů
Kaskádní styly
Kaskádování
Klasifikace
Komentář
Kompatibilita
Nadřazenost
obtékání
Odsazení
Prvek
redefinice
Seskupování
Speciální prvky
standardní styl
styl
třída
jméno domény
jméno značky
131
110
119
120
111
114
111
121
122
122
122
118
122
122
120
117
115
114
111
120
119
111
110
121
160
17
K
kapitola
klíčová slova
klient
klientském počítači
klientský program
kód
kódovou stránku
kontejner
kotva
kursor
158
171
154
166
162
16, 19
19
131
172
12
L
LAN
lišta nástrojů
154
13
menu
META
Metoda
metody
13
18
169
131
M
N
Nadpisy
náhled
název stránky
30, 141, 171
10
17
O
objektový model
objekty
obraz webové stránky
131
88
9
198
Odkaz
odkázat
Odkazy
absolutní
relativní
odpověď
Odrážky
ohnisko
optické trasy
oskenujete
ovládací prvky
168
44
34
35
35
99
51
146
154
44
183
P
paket
panely
parametr
parametrizaci
párové značky
plné doménové jméno
Port
porty
pevně přiděleny
uživatelské porty
poštovní (mail) servery
pozadí 171
Poznámka
požadavků
pracovní stanici
proces
procesy
Prohlížeč
projekt
prostředí serveru
Protokol
Přesměrování
publikuje
164
10
172, 176
175
17
158
159
158
159
159
160
17
9
157
159
163
166
11
176
159
169
162
R
Rámce 77
definiční stránku
klasické
navigační pole
plovoucí rámec
vložený rámec
rámce
rámeček
režimy
role
rozbalovací seznam
77
77
77
78
88
156
60
10, 12
163
174
S
server
Seznamy
číslované
Neseřazené
Víceúrovňové
schránky
skript pro klienta
skriptový jazyk
Skripty
157, 163
50
50
51
51
160
19
176
131
Skripty pro server
Složka
veřejná
Služba
Speciální znaky
stáhnout
strukturovaná data
167
158
28
162
169
Tabulky
pozadí
řádky
sloupce
Tělo stránky
titulek
tlačítka
tučně
58
61
58
58
16
171
175
144
175
T
U
událost
úhlové závorky
upload
URL
uzly
135, 136
171
100
158
153
V
vlastnosti
131
Web
webové stránky
webového sídla
webových sídel
153
175
144
10
Záhlaví stránky
zápisník
zarovnání
Zdroj
zdroj webové stránky
zdrojový soubor
zdrojový text
Značky
koncová
počáteční
zveřejnění
16
169
27
9
9
9
9
171
171
171
154
W
Z
199
ING. ALEŠ KASTNER, CSC.
ÚVOD
DO TVORBY WEBOVÝCH STRÁNEK
Jazyková korektura Kateřina Dejmalová.
Recenzovali Prof. Ing. Tomáš Hruška, CSc.,
fakulta informačních technologií, Vysoké učení technické Brno
a prom. mat. Vladimír Vrabec.
Sazba Hana Züglerová programem Adobe InDesign
písmy JohnSans, Lido ...
a Wingdings (Microsoft Typography).
Obálku navrhl František Štorm.
V roce 2003 vydala jako svou 25. publikaci
Federace rodičů a přátel sluchově postižených,
Hábova 1571, 155 00 Praha 5-Stodůlky
s finanční podporou projektu Internet jako zdroj nových pracovních
příležitostí pro neslyšící programu Leonardo Evropské unie
a Ministerstva zdravotnictví ČR.
Tisk Ikona - grafické studio, spol. s r. o.
Pod Kaplankou 1677, 266 01 Beroun
199 stran, 88 obrázků
ISBN 80-86792-06-4

Úvod do tvorby webových stránek

Transkript

Podobné dokumenty

Nastaveni mozilla FF pro tisk stitku

hypertextové značky a odkazy

Primary schools