formulář může vypadat, víte. Při letmém pohledu na zdrojový kód a výsledné
zobrazení v prohlížeči vidíte, že se skládá z tabulky, která jej formátuje (ale není pro samot−
ný formulář důležitá), a ze značek definujících jednotlivá políčka a tlačítka.
Celý formulář je ohraničen párovou značkou

, která zejména definuje
jméno formuláře parametrem NAME. Parametr NAME je také důležitý u všech prvků vlastního
formuláře. Umožňuje jeho provázání s akcí definovanou skriptem. Pojmenováním prvku se
tak prvek stává objektem, kterému uživatel přiřazuje svojí odezvou nějakou hodnotu, nějaké
vlastnosti. Můžete tak třeba napsat skript, který provede přesměrování na nějakou jinou
webovou stránku v případě, že klepnete na tlačítko Další.
Parametr NAME se používá jednotlivých položek formuláře, abychom mohli později vyhod−
nocovat i hodnoty jednotlivých položek. I tyto položky formuláře vytvoří na stránce objekty,
jejichž hodnoty můžeme číst, zpracovávat a dokonce ovlivňovat.
Značka FORM má i další parametry, které např. definují akce, jež s formulářem zamýšlíte
(např. zaslání dat elektronickou poštou nebo zapsání do databáze). Těm se budu věnovat až
v další kapitole, zatím by to bylo jen mlácení prázdné slámy, bez jakékoliv vazby.

První kroky do života
stránky
Formuláře v HTML
Skripty – interaktivita na Internetu
Kaskádové styly
První kroky do života stránky

Druhá část této knihy je určena těm, kteří mají pouze základní znalosti, zhruba ty, co byly
zrekapitulovány ve třetí kapitole předchozí části knihy, popř. těm, kteří mají znalosti zhruba
v rozsahu předchozího dílu, Tvorba WWW stránek pro úplné začátečníky. Půjde tu o práci
s formuláři, které poskytují tvůrci webové stránky základní možnost odezvy návštěvníků,
o seznámení se skripty a jejich začlenění do webové stránky a konečně o kaskádové styly,
které samy o sobě vnesou do vašich stránek život. Je to takový rychlý start do virtuálního
světa Internetu plného pohybu a života.
1. Formuláře v HTML
Skripty se často využívají ke zpracování dat z formulářů, prvku webové stránky, který
umožňuje základní feedback mezi vámi a uživateli vašich stránek. Určitě jste se již s nimi
setkali, kdykoliv jste např. hlasovali v nějaké v anketě (např. jak se vám stránky líbí nebo jaký
máte názor na nějakou věc), mohli jste tak posílat zprávy do e−mailové schránky tvůrce
stránky nebo třeba nakupovat zboží v internetovém obchodě. V této krátké kapitole popíšu
základní prvky výstavby formulářů – tlačítka, okna pro vepsání textu a roletky, zatím bez
jakéhokoliv programování. To přijde na řadu až v příští části věnované JavaScriptu. Zatím tedy
budou sloužit pouze k vytvoření vzhledu stránky a k vytvoření formuláře jako takového.
Pokud se podíváte na následující příklad, uvidíte, k čemu lze také takový formulář využít.
Je to lepší než jakékoliv vysvětlování a popis.

Vaše jméno
Co jíte k snídani?
Váš oblíbený nápoj
Chcete mi něco vzkázat?	35 Programování WWW stránek pro úplné začátečníky Jak takový 36

Doplňkový komentář odkazu
Podobně jako je možné u obrázku zadat popisek, který se vypíše formou bublinky, pokud
nad obrázkem zobrazeným v prohlížeči podržíte chvíli kurzor myši, lze totéž provést
i u odkazu. Funguje to analogicky s komentáři v textové editoru Microsoft Word – tam pokud
chcete vložit komentář k nějakému slovu nebo větě, aniž byste narušili vzhled stránky, lze
vložit bublinkový komentář, který se zobrazí jakmile přejedete takto označené slovo myší.
Pokud tedy nechcete takovýmito komentáři rušit vzhled stránky, nadefinujte odkazům
vysvětlující nebo doplňující popisky:
Úvod do Internetu

Internet Explorer se ptá, co má udělat se souborem
Archiv
přičemž v prohlížeči se odkaz vykreslí stejně jako kdyby tento parametr chyběl.
Z předchozího příkladu je zjevné, že komentář u odkazu v žádném případě nenaruší
vzhled stránky. Kdo si bude chtít komentář přečíst, ten si ho také přečte, a kdo ne, nechá jej
bez povšimnutí.
Komentář lze také zobrazit u odkazu, který představuje obrázek, avšak pouze tehdy, není−
li definován popisek parametrem ALT značky IMG. Pokud ano, má přednost popisek obrázku
a komentář odkazu se nezobrazí.
Otevření stránky do nového okna
Určitě jste se setkali s tím, že po kliknutí na odkaz se stránka otevře v novém okně, aby ta
původní zůstala viditelná, místo aby se načetla do okna původního, jak je zvykem. Toho se
dociluje posledním velice důležitým parametrem TARGET.
Abyste tedy dosáhli výše zmíněného efektu, přidejte do značky A, která odkaz definuje,
parametr
TARGET="_blank"
Další hodnoty parametru TARGET souvisí s rámy, kterými se podrobně zabývá kniha Tvorba
WWW stránek pro úplné začátečníky, proto je zde nebudu dále rozebírat.
Takže to bychom měli. Teď máte základy vytváření stránek v HTML, umíte ovládat Internet
Explorer. Není nic jednoduššího než jít dále. Předmětem další kapitoly budou formuláře, jak
se tvoří a k čemu slouží, jak vytvořit a začlenit skript vytvořený ve skriptovacím jazyku do
webové stránky a základy práce s kaskádovými styly, CSS.
Programování WWW stránek pro úplné začátečníky

Odkaz na soubor
Kromě elektronické pošty a webové stránky může být odkazem také jakýkoliv jiný soubor,
třeba obrázek nebo archiv ZIP. Syntaxe takového odkazu je úplně stejná jako na webovou
stránku:
Programování WWW stránek pro úplné začátečníky

Archív
Rozdíl je v tom, že zatímco stránka je načtena a zobrazena, jedná−li se o soubor, zobrazí
prohlížeč nabídku, v níž máte možnost buďto daný soubor stáhnout z Internetu a uložit na
lokální disk, nebo spustit přímo z internetového serveru; lze také nastavit, že se soubory
daného typu budou rovnou spouštět nebo rovnou stahovat.
Pokud zvolíte uložení, zjistí prohlížeč od serveru informace o délce souboru a začne jej
ukládat na váš pevný disk, což trvá úměrně tomu, jak je soubor dlouhý a jak rychlé je spo−
jení se serverem.
Využijete−li druhé možnosti, spuštění z Internetu, je potřeba mít v systému asociovanou
aplikaci, tedy aplikaci, která umí s daným typem souboru pracovat. Tento soubor bude
následně stažen na lokální disk, pak se spustí patřičná aplikace, do níž bude tento soubor
načten. Výjimku tvoří spustitelný soubor (EXE, COM), který se po stažení spustí sám.
Existují však i soubory, s kterými umí pracovat i samotný prohlížeč. Jedná se např.
o obrázky, videoklipy, zvuky, různé animace. Pokud klepnete na odkaz, jehož cílem je právě
takovýto soubor, pak se již prohlížeč na nic neptá a přímo jej sám spustí (přehraje, zobrazí).
Pokud chcete tento soubor, který je přiřazen k nějaké akci přímo v prohlížeči, stáhnout na
lokální disk, musíte na to jít přes pravé tlačítko, které zobrazí lokální nabídku, v níž kromě
jiného bude možnost uložení cílového souboru.

Odkazy
Odkazy zpřehledňují práci s Internetem. Rozdělují jej na množství různých kapitola a pod−
kapitol, takže se uživatel snadno orientuje ve velkém množství informací. Díky tomu můžete
na Internetu také velice snadno vyhledávat, třeba jako u knihy: Pokud hledáte konkrétní kapi−
tolu, podíváte se do obsahu a nalistujete si patřičnou stránku, kde kapitola začíná. Něco
podobného, a dokonce efektivnějšího, lze díky odkazům vytvořit i v HTML.
Základ práce s odkazy
Aby se daný prvek v HTML stal odkazem, je nutné jej uzavřít do párové značky

kde A je vlastní značka a HREF parametr definující stránku, která se má po kliknutí na tento
odkaz zobrazit v prohlížeči. Hodnota parametru HREF může být i jakýkoliv binární soubor
(videoklip, archív ZIP, aj.) nebo URL (adresa Internetu), zatím však bude odkaz směřovat pro
jednoduchost pouze na konkrétní stránku, tedy soubor HTML.
Odkazem, tedy to, co bude na stránce vidět jako odkaz (text, obrázek), je tedy prvek uza−
vřen značkou A. Pokud chcete, aby se odkazem stal text „Toto je odkaz na další stránku“,
vložte do zdrojového textu řádek
Toto je odkaz na další stránku
Odkaz (text) bude v prohlížeči podtržen a zobrazen modře (nebo barvou, která je definovaná
na začátku sekce BODY). Když na tento text klepnete kurzorem myši, načte prohlížeč do
aktuálního okna (nebo toho, které definujete) soubor stranka.html, pokud se nachází
Část první: Úvod do Internetu
29
Implicitní zarovnání textu a obrázku je nastaveno na bottom
v aktuálním adresáři (pokud se nachází jinde, je třeba zadat cestu). Odkaz také může být
pouze součástí věty, nejen věta celá. Lze tak vytvořit i několik odkazů v jednom odstavci:
V textu může být i více odkazů. Toto
je první odkaz, toto pak HREF="stranka.html">druhý a nakonec i HREF="stranka.html">třetí.
To, co prohlížeč zobrazí jako odkaz, může být i obrázek nebo kombinace textu a obrázku.
Pokud tedy chcete, aby se odkazem stal obrázek, zkuste napsat do zdrojového kódu



Daný obrázek (obrazek.gif) se v prohlížeči zobrazí s modrým rámečkem o velikosti dvou
bodů, pokud to nezakážete:

Samozřejmě orámování může mít libovolnou velikost, kterou nastavíte parametrem BORDER.
Z předchozích příkladů tedy vyplynuly dva shrnující fakty:
_ Odkaz může být umístěn uvnitř věty, může tvořit samostatnou větu nebo dokonce
i celý odstavec. Kromě textu může být součástí odkazu i obrázek.
_ Text, který je ohraničen značkou A může být jakýmkoliv způsobem, dostupným
v HTML, formátován a zvýrazňován. Značka A totiž definuje pouze ten fakt, že tento
text bude odkazem na nějakou stránku či soubor. Na text definovaný jako odkaz
nebude mít platnost pouze nastavení barvy značkou FONT, ta je totiž definována na
začátku dokumentu ve značce BODY parametrem LINK.
Jako odkaz nemusí být pouze soubor nebo stránka HTML, ale také adresa elektronické pošty:
Pošli vzkaz
Klepnete−li na tento odkaz, spustí se klient elektronické pošty (který je nastaven jako výchozí)
a umožní vám na zadanou adresu zaslat e−mail. Aby byl odkaz odlišen, nemá modrou, ale
tmavě červenou barvu.

Rámeček okolo obrázku

Rámeček okolo obrázku
Obrázek také může mít volitelně okolo sebe rámeček různé velikosti – to se hodí zejména
tehdy, nemá−li okraj vlastní a tento okraj by přispěl k přehlednosti celého dokumentu (např.
je bílý jak pozadí obrázku, tak pozadí stránky, a tudíž není patrné, kde se nachází ohraničení
obrázku).
Rámeček se definuje parametrem BORDER:

kde n je šířka rámečku v obrazových bodech. Barva rámečku je vždy černá, výjimku tvoří pří−
pad, kdy je obrázek zároveň odkazem, tehdy je barva rámečku modrá (či má barvu odkazu
definovanou ve značce BODY) a má velikost rámečku dva body. Pokud neuvede parametr
BORDER, nebude rámeček zobrazen.
Část první: Úvod do Internetu
Volné okraje okolo obrázku
Určitě jste si již všimli, že pokud text obtéká obrázek, je na něj vždy těsně nalepen − mezi
ním a obrázkem tedy není žádná mezera, a to nepůsobí moc esteticky. Tomu lze zabránit
dvěma parametry, které nastavují volný prostor mezi obrázkem a dalšími prvky, které se
okolo nich vyskytují, v našem případě textem:
HSPACE="n" Nastaví velikost volného prostoru v bodech na levé a pravé straně.
VSPACE="n" Nastaví velikost volného prostoru v bodech nad a pod obrázkem.
Různá nastavení volného prostoru okolo obrázku jsou patrná z příkladu:

Tento obrázek nemá okolo sebe definován žádný prostor. Text
jej tedy bezprostředně obtéká jak ze stran, tak i zespodu
a z vrchu.

Tento obrázek má nastaven volný prostor ze stran o
velikosti 10 bodů, což odsadilo nejen text po straně, ale
i obrázek samotný od okraje.

Tento obrázek má nastaven okolo sebe volný prostor o
velikosti 30 bodů, což odsadilo obrázek nejen do strany,
ale i posunulo dolů, zároveň jej text obtéká v patřičné
vzdálenosti.

TIP: Práce s obrázky je mnohem pestřejší, než je ukázáno v této podkapitole. Jejím cílem však
není toto všechno obsáhnout; pokud chcete vědět o práci s obrázky a vůbec webovou grafikou
více, nalistujte si knihy Tvorba WWW stránek pro úplné začátečníky nebo Vytváříme WWW
stránky a spravujeme moderní web site z našeho nakladatelství.

rogramování WWW stránek pro úplné začátečníky

3.5.3 Jak zadat velikost obrázků
HTML umožňuje zadávat jako další parametry značky IMG také velikost obrázku. Pokud ji
nezadáte, zobrazí se obrázek normálně, budou dodrženy jeho rozměry. Pokud má tedy
obrázek výšku 100 bodů a šířku 50 bodů, pak se tak i zobrazí na obrazovce. Někdy je potře−
ba zobrazit obrázek větší nebo menší, než je jeho skutečná velikost. Pokud tedy nastavíte
rozměry jiné, než je pravá velikost obrázků, prohlížeč jej adekvátně zvětší nebo zmenší do
Programování WWW stránek pro úplné začátečníky
26
Dva způsoby obtékání obrázku zarovnaného vpravo
Implicitní zarovnání textu a obrázku je nastaveno na bottom
vámi určené velikosti. Pro nastavení velikosti obrázku jsou definovány tyto parametry značky
IMG:
WIDTH="šířka v obrazových bodech"
HEIGHT="výška v obrazových bodech"
Lze také zadat pouze jeden parametr, výšku nebo šířku. Pokud takto učiníte, bude zbývající
rozměr obrázku automaticky dopočítán do daného poměru.
3.5.4 Popisek obrázku
HTML umožňuje přiřadit každému obrázku jeden jakýkoliv popisek, který je využit v násle−
dujících případech:
_ zobrazí se nad obrázkem ve formě bublinky, kdykoliv nad něj najedete kurzorem
myši,
_ ukáže v rámečku vyhrazeném pro načítání během stahování obrázku, které někdy
trvá opravdu dlouho (nemusíte pak čekat, až se načte celý, stačí se orientovat podle
těchto popisků),
_ zobrazí na místě obrázků, pokud vypnete zobrazování obrázků kvůli rychlejšímu
zobrazování.
Tento parametr má syntaxi

DOPORUČENÍ: Tyto popisky používejte vždy, protože předem nevíte, jak dlouho se u případného
uživatele bude stránka s obrázky načítat nebo zda nemá vypnuto zobrazování grafiky.
Popisky na takových stránkách usnadňují orientaci.