HTML v praxi

HTML V PRAXI
HYPERTEXT MARKUP LANGUAGE V PRAXI
Autor: Petr Kříž
1.kapitola - Úvod
Když někdo řekne internetová stránka, téměř každému se vybaví prezentace firmy,
osobní stránka aj. možnosti, které zaručují informovanost a tok většinou nejaktuálnějších
informací. Tahle knížka se nebude zabývat popisem stran které existují, ale klade si za cíl
naučit čtenáře vytvářet internetové či intranetové stránky.
Největší výhodou stránek je jejich možnost propojování (hypertextovým odkazem
nebo-li hyperlinkem) nebo předávání údajů. V knížce se budu zabývat pouze hyperlinkama.
Vysvětlení pár základních údajů:
HTML = Hypertext Markup Language
- základní jazyk který slouží pro nadefinování parametrů stránky, vzájemné
propojování stran a jeho velkou výhodou je definice stylů (písmo, velikost, barva…)
Přestože na styly existuje jazyk CSS (kaskádové styly), jazyk HTML zvládne veškeré
tyto základními požadavky.
URL = Uniform Resoure Locator
- tenhle složitý název znamená: „adresa konkrétní stránky“ Pokud budeme u používat
hyperlinky, bude nutné vždy zadávat jejich konkrétní adresu kam se mají odkázat.
Podle mého názoru nejvíce Vás naučí praxe, takže se pusťme do praktické části. Co
k tomu budeme potřebovat? Naučit se pár základních údajů (viz. další kapitola) a nějaký
textový editor. Napíšu zde výčet asi nejlépe zpracovaných textových editorů a podle svého
uvážení si vyberete. Ke každému editoru nakonec napíši svoji poznámku..
První typ editorů – strukturní typ editorů
Do strukturních editorů se zapisuje přímo HTML kód a je potřeba znát, netroufám si
říct dokonale, HTML jazyk. Mají jednu obrovskou výhodu – umožňují na 100%
kontrolovat obsah stránky a jsou používány většinou profesionálními tvůrci pro tvorbu
statických, ale zejména dynamických stránek nebo pro práci s datovými přenosy.
Notepad (poznámkový blok)
- zcela obyčejný textový editor s kterým dokážete divy na webu. Notepad
nepodporuje zadávání tagů, tudíž je musíte vypsat.
Poznámka: podle mého názoru je notepad nejlepší editor na tvorbu ne moc
grafických stran, protože nepodporuje jejich kontrolu a musíte si je prohlížet ve
Vašem internetovém prohlížeči. Na druhou stránku notepad umožňuje velmi
kvalitní HTML kód a nebude dělat zbytečné zápisy navíc jako jiné editory.
Homesite
- tento textový/grafický editor umožňuje psát HTML kód jako notepad, ale má
navíc několik funkcí, které pomáhají při zápisu HTML kódu. Homesite je velmi
kvalitní editor s nespočetně velkou možností funkcí o kterých by se dala napsat
kniha.
Poznámka: homesitu jsem nějak nepropadnul. Kombinuji používání notepadu
spolu s FrontPagem, ale komu by se zdál homesite lepší než notepad tak mu ho
rozhodně doporučuji.
2
Druhý typ editorů – wysiwyg editory
Zřejmě nejpohodlnější editory s kterými lze pracovat. Tahle prapodivná zkratka
znamená: „What you see is what you get,“ nebo-li do češtiny přeloženo: „Co uvidíš, to
dostaneš.“ Práce s nimi je velmi jednoduchá a sám jsem si je oblíbil při práci na graficky
náročných stránkách. jejich nevýhodou je, že nedokáží dokonale zpracovat HTML kód a
píšou do něho přebytečné věci, proto je potřeba si po skončení práce upravit HTML kód.
Microsoft FrontPage
- nejrozšířenější wysiwyg editor. Umožňuje několik režimů zobrazení, konkrétně
režim návrhu, HTML strukturu, náhled výsledné stránky a pokud budete pracovat
s framovou verzí tak obsahuje i kód HTML stránky rámců.
Poznámka: veškeré svoje poznámky jsem popsal při popisování wysisyg editorů.
Netscape Composer, Macromedia Dreamweaver a další
- s těmito programy se nezabývám, protože wysiwyg editorů existuje hodně velké
množství a v dnešní době se už pomalu nedá vybrat pořádný editor. Za zmínku stojí
ale Macromedia Dreamweaver, který je zřejmě nejdokonalejší wysiwyg editor a bývá
mnoho uživateli kladně hodnocen.
Druhy prohlížečů
Prohlížeče umožňují prohlížení internetových stran.
Microsoft Internet Explorer (IE)
- jedná se o nejrozšířenější internetový prohlížeč. IE lze zařadit mezi kvalitní
prohlížeče od verze 4 a výše – od starších verzích se liší v detailech (ale nejvíce
podporou CSS a JS). Většinou jsou všechny stránky přizpůsobeny právě pro IE.
Mozilla
- jedná se o šestou a sedmou verzi Netscapu, která je o něco lépe zpracovaná než IE
zejména pro podporu CSS ve verzi 2, lepší zvládnutí JS a dobré zpracování XML.
Jedinou nevýhodou je ladění elementů které vykresluje jinak než u IE
Netscape
- nejhorší prohlížeč, protože je velmi nestabilní, velmi často chybuje a stránky padají.
Netscape používají hlavně uživatelé linuxu, ale Ti pomalu přecházejí na Mozillu.
Úplně přesný popis editorů a prohlížečů naleznete spolu s jejich obrázky v dodatku.
PrintScreeny hotových příkladů naleznete v dodatku.
3
2. kapitola – Základy HTML
V téhle kapitole se seznámíte s jednoduchou kostrou HTML stránky kterou si také
vytvoříte. Jazyk HTML je velmi flexibilní přestože má svoji přesnou syntaxi. Tzn. že pokud
se dopustíme chyb, stránka se zobrazí tak jak je chtěl tvůrce zobrazit. (nesmí ale chybět
většina HTML kódu, ale jedná se o nějaké „prkotiny“) Budete se muset naučit ale pár věcí bez
kterých se neobejdete. Jsou to „tagy.“ Tag je klíčové slovo HTML jazyka, které je uzavřeno
do špičatých závorek Veškeré HTML příkazy jsou tagy a co se nalézá mimo tyto tagy je
součástí stránky.
HTML kód nerozlišuje velká a malá písmena (ale pozor, obsah stránky už je rozlišují)
Nepárový tag
- do nepárového tagu se uzavírají objekty (pozadí, obrázek, zvuk...) vkládání údajů se
provádí přímo do špičatých závorek.
např.: <body BgColor=“#202020“>
Párový tag
- párové tagy mezi sebe uzavírají text který se bude zobrazovat na stránce. Definice
textu je zapsána přímo v těchto tagech. Protože se jedná o párové tagy, je potřeba je
nějak začít a nějak ukončit. již název párový znamená, že se jedná o stejný tag, ale
ukončení se provádí předřazením znaménka „/“ před konečný tag....raději to vysvětlím
na příkladu: „ <title></title> “
Příklad na zapsání definice (odborněji atribut)
Obecně: <tag atribut01 atribut02>text na stránce co bude vidět</tag>
Konkrétní příklad: <a href="http://www.seznam.cz“ target="_top">Seznam</a>
Vytvořme si jednoduchou stránku. Otevřete si notepad (prozatím nám bohatě postačí a na
naučení je to zřejmě nejlepší editor) a opište tam tuhle předlohu. Jakmile skončíte se psaním,
uložte stránku do složky „My web“ jako „index.html“ a nyní se pouštím do vysvětlování.
<html>
<head>
<title>Nadpis stránky</title>
</head>
<body>
Text na stránce
</body>
</html>
4
Gratuluji, vytvořili jste první internetovou stránku a zároveň kostru stránky. Prohlédněte si ji
v prohlížeči. Tahle kostra je neměnná, takže se ji musíte naučit a musíte ji vždy uvádět pokud
budete tvořit internetové stránky.
Vysvětlení tagů:
Tag <html></html>
- je zde uvozen cely HTML kód.
Tag <head></head>
- uvození záhlaví stránky....uvádí se zde parametr title, resp. pokud pracujete
s FrontPagem, ukáže se Vám zde i nepárový tag <meta> do kterého se ukazují
parametry o vaší stránce v jakém editoru byla tvořena aj. informace. Záleží na Vás
jestli si je tam ponecháte, ale ze své zkušenosti je mažu (nemají žádný vliv na
funkčnost stránky)
Poznámka: do záhlaví stránky zapisuji i veškeré ostatní proměnné, tzn. třeba
jednodušší skripty, CSS apod. nebo pokud se jedná o složitější či rozsáhlejší projekty,
tak zde externě propojuji aby se to v těle dokumentu neztratilo.
Tag <title></title>
- mezi tenhle párový tag se zapisuje nadpis stránky („to“ nahoře v modrým pruhu,
v tomhle případě konkrétně „Nadpis stránky“)
Tag <body></body>
- je zde uvozeno tělo dokumentu, tzn. že se zde zapisuje HTML kód stránky.
Mezi tento tag se zapisují následující hodnoty:
a) pozadí – barva se zadává převážně v <body bgcolor="#CCCCCC">
b) zvuk na pozadí – téhle sekci je věnována později samostatná kapitola.
c) ostatní věci, které se dozvíte poději (např.: obrázek na pozadí a jeho fixace)
Momentálně přejdu k vysvětlení pojmenování první stránky. Budeme-li ukládat
internetové stránky, musíme použít příponu *.htm nebo *.html (přičemž mezi nimi není žádný
rozdíl, ale přípona *.htm je starší pojmenování) Stránku si můžeme pojmenovat jak chceme,
ale první stránku která má být zobrazena se musí jmenovat „index“ (včetně malého „i“) První
stránka se smí jmenovat i „default“ ale každý server nemusí podporovat tuhle možnost. Na
internetu existuje několik možností druhů přípon, ale ty už většinou slouží při práci s daty
nebo proměnnými.
5
3. kapitola – Formátování textu
Pokud budeme tvořit internetové stránky, jistě se nespokojíte pouze s obyčejným
druhem písma které je psáno za sebou. Pro tyhle účely nám slouží další tagy. Plno autorů by
v tuhle chvíli ukázalo praktické příklady využití všech tagů, ale já dám přednost jen
základním tagům a zkusíme si i složitější příklady na lepší pochopení. U formátování textu
existuje i tag <font></font> který je poměrně složitější na vysvětlování proto si ho ponechám
na konec.
Vytvořte si stránku podle této předlohy a uložte ji jako „Formatovani_textu.html“
<html>
<head>
<title>Formátování textu</title>
</head>
<body>
Tento text je <b>tučný</b><br>
Tento text je <i>kurzívou</i><br>
Tento text je <u>podtržený</u><br>
Tento text je jako <sub>dolní index</sub><br>
Tento text je jako <sup>horní index</sup><br>
Tento text je <s>přeškrknutý</s>
</body>
</html>
Otevřete si stránku v prohlížeči a podívejte se na výsledek. Myslím že nemá cenu
popisovat tyhle tagy protože jsou velmi lehce použity. jediný tag který vysvětlím je tag <br>
který nám definuje, že text má začínat na novém řádku (z angličtiny znamená tahle zkratka
break line). Ukažme si ale složitější případ a poté si ho vysvětleme.
Vytvořte si stránku podle této předlohy a uložte ji jako „Formatovani_slozitejsiho_textu.html“
<html>
<head>
<title>Formátování složitějšího textu</title>
</head>
<body>
<!--Nadpis zacatek-->
<u><b>Formátování textu</b></u><br><hr><br>
<!--Nadpis konec-->
Pokud budeme <i>tvořit internetové stránky</i>, jistě se <i>nespokojíte pouze s obyčejným
druhem písma</i> které je psáno za sebou. <i>Pro tyhle účely nám slouží další <b>tagy</b>.
Plno autorů by v tuhle chvíli ukázalo praktické příklady využití <b>všech tagů</b></i>, ale já
dám přednost jen základním tagům a zkusíme si i složitější příklady na lepší pochopení.
</body>
</html>
6
Myslím že v tuhle chvíli nastalo hodně věcí na vysvětlování. Zapamatujte si že
používání tagů které formátují text se smí využívat kdekoliv v textu. Je to velmi praktické, ale
pokud budete používat hodně kombinování tagů přes sebe, nezapomeňte, že se jedná o
párové tagy a je potřeba je uzavřít a nenechat otevřené. Přibyl nám zde nový tag <hr> který
znamená „vložení vodorovné čáry.“ Dalším novým tagem je <!--poznámka--> Jak už text
uvnitř stránky napovídá, jedná se o tag do kterého se vkládají poznámky které nejsou na
stránce vidět, ale v HTML kódu se zobrazují. Jedná se o velmi praktický a přehledný způsob
jak se vyznat ve složitých HTML kódech, ale nesmí se to s nimi přehánět.
A teďka se dostávám ke zmíněnému tagu <font></font> a nějaké další rozšířenější
tagy bez kterých se neobejdete. Nakonec si uděláme příklad kde využijeme veškeré tyhle
poznatky.
Důležitý párový tag <p></p>
- tento párový tag označuje začátek/konec odstavce. Do tohohle tagu se zapisují
definice společné pro celý odstavec a nejvíce se uplatní při zarovnávání textu. Při
psaní zápisů je mezera mezi řádky velmi velká, proto se využívá tento parametr výšky
pro začátek/konec výšky řádku vzhledem k následujícím řádkům. Využívá se hlavně
při psaní textů.
<p style="margin-top: 0; margin-bottom: 0">Text</p>
Velikost písma
- jazyk HTML nedefinuje velikost písma podle boldů, ale podle velikosti „size“ (např.
size=3) nebo přesně nadefinovanou velikostí udávanou v pixelech (např. size=12px).
Nadpisy
- nadpis se tvoří párovým tagem <hx></hx>, kde „x“ nahrazuje velikost nadpisu,
které se udává v rozpětí 1 až 6 (největší až nejmenší). Příklad.: <h2>Nadpis</h2>
Barva písma
- obdobný případ nastává i v barvě písma. Je možné ho zapisovat přímo (např.
color=red) nebo pomocí složek RGB oddělených čárkou v hexadecimálním tvaru
(např. color=53,4B,D6) nebo bez čárek uvozením znakem „#” (např.
color=#534BD6).
Zarovnání textu
- se provádí pomocí příkazu „align“
Rozeznáváme tyhle druhy zarovnání:
left = zarovnat vlevo
right = zarovnat vpravo
center = doprostřed
justify = na oba okraje.
Zarovnání textu se většinou zapisuje do odstavců (např.: <p align=center>text</p>)
Vodorovná čára <hr>
- s vodorovnou čárou jsem se před chvíli setkali, ale pro vodorovnou čáru platí více
vlastností. Vodorovná čára se sama zobrazuje jako prostorová (pokud nám to dovoluje
prohlížeč), ale dá se této vlastnosti zabránit.
7
Jsou to tyhle vlastnosti:
size = tloušťka čáry
width = délka čáry (nejčastěji se udává v procentech, ale lze ji udat i v pixelech)
noshade = prohlížeč zobrazí čáru úplně obyčejným způsobem (neprostorově)
Příklad zapsání.: <hr size=3 width=75% align=center noshade>
Druh písma – vlastnost „face“
- druh písma se zapisuje ve tvaru <font face=“Arial“> místo Arialu lze použít i jiné
druhy písma, ale doporučuji používat základní druhy, protože ne každý počítač
obsahuje právě Vaše zvolené písmo.
Párový tag <nobr></nobr>
- tímhle tagem se označuje část textu, jenž se nesmí zalamovat jinde než na místech
označených značkou <br>. Prohlížeč defaultně zalamuje řádky tak, aby se vešly do
okna. Použití tohoto tagu je vhodné pro zachování rozmístění textu třeba při výpisu
údajů z databáze.
Párový tag <small></small>
- tento tag zmenší velikost písma o jeden stupeň
Párový tag <big></big>
- tento tag zvětší velikost písma o jeden stupeň
8
Vytvořte si stránku podle této předlohy a uložte ji jako „Vyuziti_formatovani.html“
<html>
<head>
<title>Využití formátování</title>
</head>
<body bgcolor="#CCCCCC">
<!--Nadpis-->
<p><h2 align=center><font color=red>Jak se dělají divy s textem</h2></font></p>
<hr size=2 width=75% align=center>
<hr size=2 width=50% align=center><br>
<font face=“Arial“>Tak tady si napíšeme <big>ukázkový text</big> s kterým se pokusíme
něco udělat:</font>
<br><br>
<!-- Text na formatovani-->
<u>Jak to vypada kdyz zakazu prvnim radku se zalamovat?</u><br>
<nobr>Myslím že v tuhle chvíli nastalo hodně věcí na vysvětlování. Zapamatujte si že
používání tagů které formátují text se smí využívat kdekoliv v textu. Je to velmi praktické, ale
pokud budete používat hodně kombinování tagů přes sebe, nezapomeňte, že se jedná o
párové tagy a je potřeba je uzavřít a nenechat otevřené.</nobr> <!--text by mnel byt na
jednom radku a teprve tedka po tagu "br" se zalomit--> <br>Přibyl nám zde nový tag který
znamená „vložení vodorovné čáry.“ Dalším novým tagem je <!--poznámka--> Jak už text
uvnitř stránky napovídá, jedná se o tag do kterého se vkládají poznámky které nejsou na
stránce vidět, ale v HTML kódu se zobrazují. <font face="Times New Roman"
color=#534BD6>Jedná se o velmi praktický a přehledný způsob jak se vyznat ve složitých
HTML kódech,</font> ale nesmí se to s nimi přehánět.
<!--Konec textu na formatovani-->
</body>
</html>
Tímhle příkladem bych rád uzavřel kapitolu o formátování textu, ale je tu jeden
zádrhel kterého jste si na první pohled zřejmě nevšimli. Jak je napsaná věta: „Dalším novým
tagem je“ a dále začíná nová věta. Co z toho plyne? Že poznámku lze zařadit do jakéhokoliv
místa HTML dokumentu a nebude vidět. A teďka směle do dalších kapitol, kde si ukážeme
práci s hypertextovým textem, práci s odstavci aj. zajímavosti.
9
4. kapitola – Seznamy
Seznamy mají v praktickém využití poměrně málo místa, protože jsou hojně
zastupovány tabulkami. Jedinou výjimkou jsou rozbalovací seznamy které se velmi často
upotřebovávají (těmito seznamy se nebudu zabývat protože je potřeba znát alespoň základy
CSS a JS) ale princip zůstává stejný jako u klasických seznamů. Protože jsou seznamy čistě
psané (bez barevných podkladů atd.) takže můžeme sáhnout po prostředcích pro formátování
textu které seznamy rozhodně oživí.
Až na seznam definic mají všechny seznamy jedno společné...nepárový tag <li> Tento
tag vloží do seznamu novou položku. Příklad použití: <li>položka
Seznamy dělíme do 4 kategorií
Číslované seznamy
- pro číslované seznamy používáme tagy <ol></ol> Tuto definici můžeme využít
v seznamu kolikrát chceme.
Nečíslované seznamy
- pro nečíslované seznamy používáme <ul></ul> Tuto definici můžeme využít
v seznamu kolikrát chceme.
Seznamy s vlastním obrázek
- tyhle seznamy jsou sice velmi působivé na oko. Vytvoří se přiřazením položky
imagesrc="umisteni obrazku" k párovému tagu <ul>
Příklad použití:
Obecně: <ul imagesrc="umístění obrázku + přípona"></ul>
Konkrétní případ: <ul imagesrc="../odrazka.jpg"></ul>
Seznamy definic
- seznam definic se používá především pro rejstříky, slovníky apod. Seznam se
označuje párovou značkou <dl></dl> (z ang. definition list) Tento seznam se úplně
odlišuje od předcházejících seznamů. Každá položka v seznamu se skládá ze dvou
částí. Nejprve je potřeba uvést definovaný termín a posléze jeho definici. Definovaný
termín se uvádí nepárovou značkou <dt>, jeho definice pak taktéž nepárovou
značkou <dd>.
Rozšířené možnosti seznamu
Příkaz align
- v seznamech je minimálně využíván, ale platí pro něho stejné zásady jako při
formátování textu. Příklad zápisu: <ul align=left>
10
Příkaz type
- můžeme rozdělit podle druhu použitých seznamů.
Používáme-li seznam typu <ul> můžeme použít následující příkazy:
disk (plné kolečko)
circle (prázdné kolečko)
square (čtvereček).
Používáme-li seznam <ol> můžeme použít následující příkazy:
A/a (označení položek velkými/malými písmeny)
I/i (označení velkými/malými římskými číslicemi)
1 pro klasické číslice.
Zápis pro <ul>je následující: <ul type=disk>
Zápis pro <ol> je následující: <ol type=A>
Se seznamy se dá velmi dlouho hrát a je to spíše monotónní práce, proto si ukažme jen
jednoduchý příklad který si pak můžete dále rozvíjet dle představivosti.
Vytvořte si stránku podle této předlohy a uložte ji jako „Seznamy.html“
<html>
<head>
<title>Seznamy</title>
</head>
<body>
<ul>
<li>Letadlo
<ol type=A>
<li> Rada 3
<ol type=I>
<li> sedadla
</ol>
</ol>
<ol>
<li>15
<li>16
</ol>
</ul>
</body>
</html>
11
5. kapitola – Tabulky
Budete-li vytvářet internetové stránky, jistě se setkáte s tabulkami. Jedná se o
nejrozšířenější a nejefektivnější způsob jak docílit požadovaných vlastností stránky. Kapitola
Tabulky je poměrně náročná a hodně obsáhlá na vysvětlování, takže se zde uplatní lépe
příklady. Veškeré příklady by byly lépe znatelné kdyby se s nimi pracovalo ve wysiwyg
editorech, (tady se tabulky nejvíce uplatňují) ale postačí nám úplně bez problému notepad.
Jak bychom mohli definovat tabulku. Tabulka je souhrn několika druhů čar které jsou
vzájemně propojeny. Pokud si nebudeme pohrávat se vzdálenosti čar od sebe (ale jimi si
pohrávat budeme, ale až později) tak se Vám tabulka zobrazí vždy správně. Než začnu
vysvětlovat tabulku na příkladu, napišme si základní tagy z kterých se tabulka skládá. Tyhle
tagy se dají zapsat jako nepárové, ale většina editorů si je jako párové sama definuje. U
tabulky existuje pojem „buňka“ tzn. obsah jednoho čtverečku.
Pozn.: ze své praxe doporučuji je jako párové tagy zapisovat
Tabulka se skládá z těchto tagů
Tag <table></table>
- tento tag nám uvozuje začátek/konec tabulky. Do tohohle tagu se zapisují definice
společné pro celou tabulku (tloušťka čar, zarovnání tabulky aj.)
Tag <tr></tr>
- tento tag vytváří nový řádek. Do tohohle tagu lze zapsat definice pro řádek.
Tag <td></td>
- tento tag definuje nový sloupec. Do tohohle tagu lze zapsat definice pro sloupec.
Tag <th></th>
- tento tag definuje obsah buňky. Je hodně využíván u tabulek, kterým se zadává
velikost v pixelech.
Pro lepší pochopení si ukažme 2 příklady, kde jednou bude velikost tabulky tvořena
procentně a druhá tabulka bude tvořena přesně zadanou velikostní nebo-li jinak řečeno,
bude zadaná v procentech.
Tabulku stačí zapsat klasickým způsobem tzn.
<table>
<tr>0
<td>Text</td>
</tr>
</table>
ale pokud budete psát HTML kód, nebude Vám tohle v žádném případě vyhovovat. Nejlepším
řešením i pro úplně obyčejné tabulky je nadefinovat jim alespoň základní údaje. (jak je
uvedeno i v příkladu) Většina wysiwyg editorů využívá možnost „nacpat co nejvíce údajů“
ohledně struktury tabulky, ale zbytečně je to v mnoha případech přeháněno.
Začněme tabulkou, kde bude velikost zadána procentně.
12
Vytvořte si stránku podle této předlohy a uložte ji jako „Tabulka_procenta.html“
<html>
<head>
<title>Tabulky - příklad na tabulku s velikostí zadávanou v procentech</title>
</head>
<body>
<!--Zacatek tabulky-->
<table border="1" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111" width="100%" id="Tabulka_01">
<tr>
<td width="33%">Radek 1 Text 1</td>
<td width="33%">Radek 1 Text 2</td>
<td width="34%">Radek 1 Text 3</td>
</tr>
<tr>
<td width="33%">Radek 2 Text 10</td>
<td width="33%">Radek 2 Text 11</td>
<td width="34%">Redek 2 Text 12</td>
</tr>
</table>
</body>
</html>
Vysvětleme si nyní jednotlivé pojmy. Do tabulky lze za jednotlivé tagy dosadit
definice jako byly u formátování textu (např. barva pozadí, šířka, vlastnost align aj.) Do
párového tagu <table> jsme dosadili následující údaje:
border
- tenhle příkaz znamená tloušťku ohraničení. Lze udávat jakékoliv číslo. Pokud
chceme aby tabulka nebyla vidět, použijeme nulu (border=“0“)
cellpadding
- tenhle příkaz znamená „výplň buněk“ nebo-li srozumitelněji řečeno výšku buňky (je
společná pro všechny buňky v tabulce) Počáteční hodnota 0 (cellpadding=“0“)
znamená, že se výška řádku přizpůsobí výšce písma.
cellspacing
- je podobnou vlastností cellpaddingu, ale tahle vlastnost má za úkol určovat
vzdálenost buněk. (Pozn. tahle vlastnost má minimální využití, ale je dobré ji uvádět)
Volná mezera, nebo-li „&nbsp;“
- nelekejte se, opravdu je tohle příkaz. Tahle směsice písmen je používána
v tabulkách na místě, kde potřebujeme aby bylo vidět ohraničení tabulky, ale nebyl
zde uveden žádný text. Tento znak se vkládá místo textu, ale na stránce nebude vidět.
13
width (platí jak pro celkovou tabulku tak pro jednotlivé buňky)
- tahle vlastnost definuje šířku tabulky i buňky. Vlastnost width se dělí dle dvou
parametrů...máme-li tabulku zadanou přes procenta nebo přes pixely. Pro vlastnost
width platí jedno důležité pravidlo: „Velikost jednotlivých šířek buněk v řádku musí
být stejná jako velikost celkové šířky tabulky.“ Např.: máme tabulku která bude mít
celkovou velikost 90% a bude obsahovat 3 sloupečky (<td>). Jejich šířku si můžeme
zvolit jakou potřebujeme, ale musí nám vždy dát součet 90. To znamená že si šířku
buněk můžeme určit 30+30+30=90, nebo 10+50+30=90 apod. Stejné pravidlo platí i
pro šířku buněk v tabulce, kde velikost zadáváme v pixelech. (šířka buněk = šířka
sloupce za předpokladu, že máme stejně široké řádky v celé tabulce)
Tabulka zadaná přes procenta
- do celkové definice tabulky <table width=“100%“> určujeme šířku tabulky
vzhledem k prohlížeči (bude flexibilní velikost) Tzn. že pokud zadáme 100% bude
tabulka jinak velká při rozlišení 800x600 pixelů a jinak velká při rozlišení 1024x768
pixelů. Jako velikost tabulky můžeme zadat jakékoliv číslo v procentech, ale musí pro
ně platit výše zmíněné pravidlo. Tady bych Vás rád upozornil na jednu skutečnost....
může se stát že zadáte velikost 100% a budete ji potřebovat rozdělit do 3 buněk.
V tomhle případě rozdělte šířku buněk v poměru 33%+33%+34%. V následujícím
příkladě Vám ukážu způsob zapsaní tabulky se dvěma řádkami a třemi sloupci.
<table border="1" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111"
width="100%" id="Tb-56">
<tr>
<td width="33%">&nbsp;</td>
<td width="33%">&nbsp;</td>
<td width="34%">&nbsp;</td>
</tr>
<tr>
<td width="33%">&nbsp;</td>
<td width="33%">&nbsp;</td>
<td width="34%">&nbsp;</td>
</tr>
</table>
14
Tabulka zadaná přes pixely
- do celkové definice tabulky se zapíše požadovaná šířka tabulky udávaná v pixelech
<table width=“300“> Tahle šířka je neflexibilní, takže se při jakémkoliv rozlišení zobrazí
stejně. Platí pro ni také výše popsané pravidlo, ale najdeme zde odlišnost při zadávání
šířky. Bude-li tabulka zapsaná tímhle způsobem
<table border="1" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111"
width="300" id="Tb-125">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
tak se nám šířka buněk (resp. sloupců, protože sloupce máme stejně široké jako šířku
buněk) rozloží přesně na stejné šířky. V tomhle případě je zadaná celková šířka 300 pixelů
a máme zadané 3 buňky v jednom řádku, rozloží se nám jejich šířka po 100 pixelech.
Můžeme si také určit jakou velikost si chceme nastavit. Platí zde výše popsané pravidlo
zachování šířky a zápis bude následující:
<table border="1" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111"
width="300" id="Tb-78">
<tr>
<td width="40">&nbsp;</td>
<td width="133">&nbsp;</td>
<td width="123">&nbsp;</td>
</tr>
<tr>
<td width="40">&nbsp;</td>
<td width="133">&nbsp;</td>
<td width="123">&nbsp;</td>
</tr>
</table>
V tomhle zápisu jsme si nadefinovali jakou šířku budou mít jednotlivé buňky. Protože je
tahle šířka zadávaná také v pixelech, je neflexibilní.
Pokud máte zájem, můžete si vyzkoušet výše uvedené HTML kódy a trochu si pohrát
s čísly nebo procenty.
15
Vytvořte si stránku podle této předlohy a uložte ji jako „Tabulka_pixely.html“
<html>
<head>
<title>Tabulky - příklad na tabulku s velikostí zadávanou v procentech</title>
</head>
<body>
<!--Zacatek tabulky se stejnymi sloupci-->
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse"
bordercolor="#111111" width="300" id="Tabulka_02">
<tr>
<td>Radek 1 Text 1</td>
<td>Radek 1 Text 2</td>
<td>Radek 1 Text 3</td>
</tr>
<tr>
<td>Radek 2 Text 10</td>
<td>Radek 2 Text 11</td>
<td>Radek 3 Text 12</td>
</tr>
</table>
<br><hr><br>
<!--Zacatek tabulky s ruzne velkymi sloupci-->
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse"
bordercolor="#111111" width="300" id="Tabulka_02">
<tr>
<td width="75">Radek 1 Text 1</td>
<td width="165">Radek 1 Text 2</td>
<td width="60">Radek 1 Text 3</td>
</tr>
<tr>
<td width="75">Radek 2 Text 10</td>
<td width="165">Radek 2 Text 11</td>
<td width="60">Radek 3 Text 12</td>
</tr>
</table>
</body>
</html>
16
id
- každý by jistě řekl identifikační číslo. Ano, id může mít hodnotu identifikačního
čísla, ale slouží podobně jako parametr „name“ (o něm se zmíním až ve formulářích) a
může nabývat veškerých hodnot. U tabulek bych mu nepřikládal velkou hodnotu, ale
je lepší si jednotlivé tabulky pojmenovat – zabráníte tím zbytečné nepřehlednosti.
style
- tahle vlastnost určuje ohraničení tabulky (jaký druh čáry se má zvolit) Přestože se
tabulka skládá ze tří čar, určujeme ohraničení jen jedné, tudíž této hlavní čáry. Pokud
budeme chtít použít jiné druhy čar, změníme tím i ostatní údaje (Pozn. wysiwyg
editory jsou na tuhle práci nejlépe stavěné, protože dokážou za Vás zpracovat tyhle
veškeré údaje do HTML kódu, zatímco vy si jen vyberete vše přes průvodce tabulkou)
Protože ve stylech existuje mnoho druhů ohraničení a mnoho knížek je ani neuvádějí
(dají se nalézt na internetu, ale wysiwyg editory za Vás vytvoří HTML kód), já se
zmíním jen o základní plné čáře, se kterou jste se doposud setkávali a navíc připíši
další dvě definice navíc. Vlastní definice zápisu buňky a tabulky v tagu <table> zní:
Případ s použitím borderlight a borderdark
<table border="5" cellpadding="0" cellspacing="0" width="100%"
id="Table_152" style="border-collapse: collapse"
bordercolorlight="#0000FF" bordercolordark="#008000" bgcolor="#C0C0C0">
Případ s použitím bordercolor
<table border="5" cellpadding="0" cellspacing="0" width="100%"
id="Table_152" style="border-collapse: collapse"
bordercolor="#FF0000" bgcolor="#C0C0C0">
Popišme si jednotlivé elementy:
Vlastnost border-collapse: collapse nám definuje, že zvolený typ čáry bude plný.
Vlastnost bordercolor=“barva“ nám definuje celkovou barvu pro tabulku.
Použijeme-li tenhle případ, již neuvádíme vlastnosti borderlight a borderdark.
Vlastnost bordercolorlight=“barva“ nám definuje světlé ohraničení tabulky
Vlastnost bordercolordark=“barva“ nám definuje tmavé ohraničení tabulky
Vlastnost bgcolor=“barva“ nám definuje pozadí buněk.
Pokud jste zvládli následující kroky co se týká tabulek, můžeme přejít do další části, kde
se budu zabývat složitějšími příklady s tabulkami. Základní významy tagů jsem popsal v téhle
lekci, takže si zkuste jeden příklad dle předlohy níže. V další části tabulek již nebudu
popisovat principy tagů které se již zmínily de nahoře. V následujícím příkladu se vyskytne
jeden tag který jsem doposud neprobíral, ale vysvětlím ho později. Jedná se o párový tag
<div></div>.
17
Vytvořte si stránku podle této předlohy a uložte ji jako „Tabulka_zaklady.html“
<html>
<head>
<title>Tabulka se základy</title>
</head>
<body>
<p style="margin-top: 0; margin-bottom: 0"><u><b>
<font color="#000080">Nejdříve si ukážeme dobře vypadající
tabulku:</font></b></u></p><br>
<!--Prvni tabulka - druhy zbozi-->
<table border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111" width="500" id="Tabulka1">
<tr>
<td width="88"><p align="right"><u>Druh zboží:</u></p></td>
<td width="17">&nbsp;</td>
<td width="388">Diskety</td>
</tr>
<tr>
<td width="88">&nbsp;</td>
<td width="17">&nbsp;</td>
<td width="388">CD-R, CD-RW</td>
</tr>
</table>
<br>
<p style="margin-top: 0; margin-bottom: 0">
<font color="#000080"><u>
<b>Další příklad: vnořená tabulka + ukázky s barvami:</b></u></font></p>
<br>
<table border="5" cellpadding="0" cellspacing="0" style="border-collapse: collapse"
bordercolor="#111111" width="100%" id="Tabulka2"
bordercolorlight="#008000" bordercolordark="#000080">
<tr>
<td width="100%" bgcolor="#C0C0C0">
<div align=center>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse:
collapse" bordercolor="#111111" width="50%" id="Tabulka3">
<tr>
<td width="33%" bgcolor="#DFAC4D">&nbsp;</td>
<td width="33%" bgcolor="#F0C771">&nbsp;</td>
<td width="34%" bgcolor="#F0C771">&nbsp;</td>
</tr>
<tr>
<td width="33%" bgcolor="#DFAC4D">&nbsp;</td>
<td width="33%" bgcolor="#F0C771">&nbsp;</td>
<td width="34%" bgcolor="#F0C771">&nbsp;</td>
</tr>
18
<tr>
<td width="33%" bgcolor="#DFAC4D">&nbsp;</td>
<td width="33%" bgcolor="#F0C771">&nbsp;</td>
<td width="34%" bgcolor="#F0C771">&nbsp;</td>
</tr>
</div>
</table>
</td>
</tr>
</table>
</body>
</html>
První část kapitoly máme za sebou a teďka se budu věnovat složitější úpravě tabulek,
jako je například sloučení buněk, použití pozadí do buňky aj. zajímavé věci. Abych Vás
neodradil hnedka ze začátku (když už jsem se zmínil že se jedná o těžší část) tak začneme
vložením pozadí do buňky.
Vložení pozadí do buňky
- pokud jste zvládli minulou lekci, nebude pro Vás tento úkol těžký. Do definice
vlastností se přidá hodnota „background“ Samozřejmě můžete psát do této buňky text,
který bude vidět nad Vámi zvoleném pozadí.
Příklad na zapsání definice
Obecně:
<td width="100%" height="414" bgcolor=“barva“>&nbsp;</td>
Konkrétní případ:
<td width="100%" height="414" bgcolor=“#FF00FF“>&nbsp;</td>
Párový tag <div></div>
- tento tag hraje velkou úlohu v HTML jazyku a zejména v tabulkách. Tento tag se
předřazuje (píše se před konkrétní událost) před veškerý HTML kód, kterého se bude
týkat. Ukončení tagu se provádí pomocí lomítka, protože se jedná o párový tag. Tento
tag zapsaný bez definic nemá žádný význam, ale pokud ho nedefinujeme, bude se
týkat „všeho“ co je uzavřeno mezi tímhle tagem. Pokud chceme vložit jinou definici
v tomhle tagu, nemusíme ho ukončovat, ale stačí ho pouze přerušit. Nejlepší bude
vysvětlit to na příkladu. V tomhle případě nám vlastnost <div align=center>
vycentruje na střed vše, co bude uzavřeno mezi tímto tagem.
<div align=center>
<table width=“300“>
<tr>
<td>Text</td>
</tr>
</table>
</div>
Abychom nemuseli ukončovat tag <div> a znovu ho začínat, tak ho přerušíme.
Přerušení = nadřazení definice před textem. Nastane-li situace, že se např. setkají tři
různá umístění u textu, bude primárně bráno to, které je mu nejdříve přiřazeno.
19
Např.: <td align=right align=center align=left>Text</td> - text bude vpravo.
<div align=center>
<table width=“300“>
<tr>
<td align=left>Text</td>
</tr>
</table>
</div>
Seskupování buněk v řádcích
- pro názornost seskupení buněk v řádcích jsem zde vložil názorný příklad
Seskupování řádků lze uplatnit u každé tabulky tzn. u tabulek které jsou zadávány
v procentech i pixelech (Pozn. v příkladech budu uplatňovat tabulky zadávané
v procentech, protože jsou pro vysvětlování přehlednější) Při seskupování řádků se
definuje vlastnost colspan=“číslo“ kde číslo znamená počet seskupených buněk.
Tahle definice se zapisuje přímo do definice tagu <td>. Vlastnost colspan nám odebírá
počet zapsání řádků ve sloupci. Ukažme si teoretický zápis a pak si zkusme udělat
tabulku která je zobrazena nahoře. Abychom si to neulehčili, přidáme ji navíc barevný
nádech. Většinou se tahle vlastnost zadává spolu s ostatními vlastnosti, takže do
definice přiřadím ještě definici šířky buňky.
Příklad na zapsání definice
Obecně: <td colspan="číslo">&nbsp;</td>
Konkrétní případ: <td width="66%" colspan="2">&nbsp;</td>
20
Vytvořte si stránku podle této předlohy a uložte ji jako „Tabulka_colspan.html“
<html>
<head>
<title>Tabulky - seskupení buněk</title>
</head>
<body>
<div align=center>
<table border="2" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111" width="50%" id="Tabulka1">
<tr>
<td width="33%">&nbsp;</td>
<td width="33%">&nbsp;</td>
<td width="34%">&nbsp;</td>
</tr>
<tr>
<td colspan="2" bgcolor="#00FFFF">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="33%">&nbsp;</td>
<td width="67%" colspan="2" bgcolor="#0000FF">&nbsp;</td>
</tr>
<tr>
<td width="50%" colspan="3" bgcolor="#000080">&nbsp;</td>
</tr>
</table>
</div>
</body>
</html>
Seskupování buněk ve sloupcích
- pro názornost seskupení buněk ve sloupcích jsem zde vložil následující příklad
Stejně jako seskupování buněk v řádcích lze seskupování buněk uplatnit v tabulkách,
kterým se zadává šířka v procentech nebo v pixelech. Při seskupování sloupců se
definuje vlastnost rowspan=“číslo“ kde za číslo se dosadí počet sloučených buněk.
Další vlastností která se běžně nedefinuje, ale je v téhle věci je podle mého názoru
velmi užitečná je heigh, nebo-li výška řádku. Zápis vypadá obdobně height=“číslo“
kde číslo znamená výšku řádku. Pokud budeme chtít používat klasickou výšku řádku,
nemusíme tuhle vlastnost uvádět, ale pokud ji uvedeme můžeme ji přiřadit i nulu.
Zvolíme-li nízké číslo, nemusí se výška vůbec projevit – znatelnost závisí na výšce
udaného čísla (Poznámka: ze zkušenosti uvádím místo nuly malá čísla např. 1,2 aj.)
21
Zkusme si na to obdobný příklad jako byl předtím na colspan.
Příklad na zapsání definice
Obecně: <td rowspan=“číslo“ height=“číslo“>
Konkrétní případ: <td width="25%" rowspan="2" height="1">&nbsp;</td>
Vytvořte si stránku podle této předlohy a uložte ji jako „Tabulka_rowspan.html“
<html>
<head>
<title>Tabulky - seskupení buněk</title>
</head>
<body>
<div align=center>
<table border="2" cellpadding="0" cellspacing="0
style="border-collapse: collapse" bordercolor="#111111"
width="50%" id="Tabulka2" height="1">
<tr>
<td width="25%" height="0">&nbsp;</td>
<td width="25%" rowspan="2" height="1" bgcolor="#00FFFF">&nbsp;</td>
<td width="25%" height="1">&nbsp;</td>
<td width="25%" rowspan="3" height="1" bgcolor="#000080">&nbsp;</td>
</tr>
<tr>
<td width="25%" height="1">&nbsp;</td>
<td width="25%" rowspan="2" height="2" bgcolor="#0000FF">&nbsp;</td>
</tr>
<tr>
<td width="25%" height="1">&nbsp;</td>
<td width="25%" height="1">&nbsp;</td>
</tr>
</div>
</body>
</html>
Absolutní pozice tabulky
- tohle téma jsem si nechával na závěr až si ujasníte z čeho se tabulka skládá.
V mnoha případech budeme potřebovat umístit tabulku do prostoru stránky podle
svých potřeb. V tomhle případě nám pomůže pár rozšířených vlastností k definici
stylu. Jedná se o to, že k dosavadní definici „style="border-collapse: collapse"“
dosadíme 3 vlastnosti (všimněte se že všechny jsou uzavřeny do jedné uvozovky a
jsou odděleny středníky):
style="border-collapse: collapse; position:absolute; left:94; top:93"
Pojďme si je vysvětlit. border-collapse: colapse je již známá vlastnost,
„position:absolute“nám určuje že se jedná o absolutní umístění tabulky a vlastnosti
„left“ a „top“ nám určují jak má být tabulka umístěna zleva a seshora od levého
horního okraje stránky. Ukažme si na to jednoduchý příklad.
22
(Poznámka: Pokud budete používat tuhle vlastnost, doporučuji používat výhradně
velikosti zadané v pixelech – přejdete mnoho zbytečným komplikacím)
Vytvořte si stránku podle této předlohy a uložte ji jako „Tabulka_abolutni_ulozeni.html“
<html>
<head>
<title>Tabulky - absolutní umístění</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0"
style="border-collapse: collapse; position: absolute; left: 139; top: 151"
bordercolor="#111111" width="300" id="Tabulka3x3">
<tr>
<td width="100">&nbsp;</td>
<td width="100">&nbsp;</td>
<td width="100">&nbsp;</td>
</tr>
<tr>
<td width="100">&nbsp;</td>
<td width="100">&nbsp;</td>
<td width="100">&nbsp;</td>
</tr>
<tr>
<td width="100">&nbsp;</td>
<td width="100">&nbsp;</td>
<td width="100">&nbsp;</td>
</tr>
</table>
</body>
</html>
Tímhle příkladem bych rád uzavřel kapitolu na tabulky. Tahle kapitola byla velmi obsáhlá
a nelze v ní vyjmenovat veškeré kombinace tabulek jaké mohou nastat. Proto než se pustíte do
další kapitoly, tak bych Vám doporučil zkusit si udělat několik vlastních kombinací tabulek,
jak pomocí formátování textu, barevných podkladů, seskupování apod. Jak jsem psal již na
úvod téhle kapitoly, tak na tuhle práci se hodí nejvíce pracovat s wysiwyg editory. Pokud
máte možnost vyzkoušet si je tak si to rozhodně zkuste. Tahle kniha se zabývá jazykem
HTML a ne tvorbou stránky podle vzhledu, tudíž zde práci ve wysiwyg editorech nebudu
popisovat.
23
6. kapitola – Grafika WWW
Grafika a grafické prvky na internetu? Úplná samozřejmost. Je tomu ovšem tak?
Umístit obrázky není vůbec těžké (stačil by i papír velikosti A4 na vysvětlení tagů a příklad),
ale nejtěžší je zřejmě uvědomit si okolní skutečnosti, které většinou každý běžný uživatel
přehlíží. K čemu by nám byla stránka která bude designově velmi krásná, ale doba načítání by
byla 30 minut? V téhle kapitole se naučíte základní parametry obrázků, které Vám pomohou
při rozhodování jaké grafické prvky umístit a v jaké míře.Ale začněme od začátku.
Budeme-li chtít umístit na internet grafické prvky, musíme znát alespoň jejich
základní vlastnosti. Grafické prvky rozdělíme do 2 skupin – pozadí a obrázky, které se dále
dělí podle formátu. Já se budu zabývat pouze dvěma formáty.
Pozadí
- s pozadím jsme se jíž setkali v minulých kapitolách, ale používali jsme jako pozadí
pouze jednu barvu. Jako pozadí můžeme použít jakýkoliv obrázek jakéhokoliv typu
(*.jpg, *.gif, *.bmp aj.), ale pozor na důležitou událost. Pozadí stránky se musí
stahovat svižně, takže nemá cenu na stránky použít obrázek s velikostí 500kb
(přestože bude nádherný) kde budeme stránku otevírat min. 3 minuty, ale stačí použít
také originální obrázek s velikostí pár kb které se načtou téměř okamžitě.
Pokud uvážíte tahle dvě hlediska, stojí proti Vám:
1) krásné pozadí s velkou velikostí (např.500kb) x dlouhá doba stahování obrázku
2) krásné pozadí s malou velikostí (např. 20kb) x krátká doba stahování obrázku
Pozadí stránky se skládá buď z plné barvy, nebo obrázků které se skládají vedle sebe
(proto jsou vytvořeny speciální druhy obrázků které mají malou velikost) a vzájemně
na sebe navazují. Takže uvažte která možnost se Vám více zamlouvá (Pozn. pokud je
to možné, doporučuji používat co nejmenší velikosti. Některé stránky se bohužel této
zásadě vyhnout nemůžou kvůli celkovému zpracování, proto je dobré upozornit na
tuhle skutečnost ještě před otevřením téhle stránky) A teďka je na řadě lehký HTML
kód, který srovnám s jednobarevným pozadím pro lepší pochopení. Pokud bych to
mněl zapsat, jedná se o vložení nové definice do tagu <body>.
Příklad na zapsání definice, kde je použita barva jako pozadí:
Obecné zapsání jednobarevného pozadí: <body bgcolor="barva">
Konkrétní zapsání jednobarevného pozadí: <body bgcolor="#C0C0C0">
Příklad na zapsání definice, kde je použitobrázek jako pozadí:
Obecné zapsání pozadí, kde je použit obrázek:
<body backround=“umístění obrázku + přípona“>
Konkrétní zapsání pozadí, kde je použit obrázek:
<body background="../Pozadi_01.jpg">
24
Obrázky ve formátu *.gif
- tenhle formát obrázků slouží pro nejkvalitnější grafiku kterou lze vytvořit. Tenhle
formát nelze kompresovat (snížit velikost) a podporuje animované sekvence tzv. gify,
dále se používá pro ukládání animovaných bannerů. Co dodat závěrem? Používejte
tento formát jen tam kde je to nezbytné, protože kvůli své dokonalé kvalitě hrozně
moc ovlivňuje dobu načítání stránky (prodlužuje dobu)
Obrázky ve formátu *.jpg a *.jpeg
- tyhle formáty jsou nejrozšířenější na internetu zejména pro své vlastnosti. Nemohou
se sice srovnávat s úplně dokonalou grafikou jako mají formáty *.gif a nepodporují
animované sekvence, ale jejich kvalita je na hodně vysoké úrovni. Převážnou většinu
fotek naleznete na internetu (dokonce i digitální fotoaparáty ukládají jako formáty
*.jpg) právě v tomhle formátu. Na závěr snad jen dodat, že používáním těchto formátů
dosáhnete dokonalých výsledků a kvalitu stránky nehorší.
Teďka jsem zde popsal základní dva druhy formátů a pouštím se do vysvětlení
vložení obrázku na stránku. Jelikož předpokládám že minulé kapitoly jste zvládli,
vynechám dopodrobna psané události.
Vložení obrázku
- se provádí přes nepárový tag <img>, ale tenhle tag sám o sobě nic neznamená,
přiřadíme mu další definice, tj. border, src, width a height. Přestože jsem si již některé
zmíněné definice popsali, popišme si je ještě jednou.
border=““ - ohraničení (pokud nechceme vidět rámeček zadáme nulu)
src=““ – umístění obrázku. Můžeme zadat relativní i přesně danou adresu umístění
lowsrc=““ – tento tag je využíván velmi málo, ale je potřený a myslím, že je třeba se
o něm zmínit. Pokud používáme na stránce obrázky, které se stahují velmi dlouho, je
pro Vás potřeba použít tento parametr. Jak to funguje? Obrázek, který by se vám
normálně načetl uložíte ještě jednou, ale tentokrát v horší grafice. Tento parametr nám
definuje, že se nejdříve načtou obrázky s horší grafikou (stránka se svižněji načte) a
teprve po úplném rozjetí stránky se samy tyhle obrázky začnou nahrazovat obrázky,
které jsou uvedeny v src=““
width=““ – určuje nám šířku obrázku
height=““ – určuje nám výšku obrázku
Příklad na zapsání definice
Obecně: <img border=“číslo“ src=“místění + přípona“ width=“číslo“ height=“číslo“>
Konkrétní případ: <img border=“0“ src=“../obr.jpg“ width=“572“ height=“480“>
Poznámka: ohledně umístění relativních a absolutních adres se dozvíte v kapitole
hyperlinky. Doposud zadávejte absolutní adresy tzn. adresu tam, kde se obrázek
nachází (např.: C:/Document a Setting/Obrazky/muj_obrazek.jpg)
Další formátování obrázků se provádí stejně jako formátování textu. Vzhledem k větší
přehlednosti a lepšího zápisu doporučuji uzavírat obrázky do párového tagu <p></p>, protože
do něho můžete napsat přímé definice. Můžete také využít párového tagu <div></div>, ale
nezapomeňte že se týká veškerého textu i obrázků které jsou umístěny mezi tímto tagem.
Budete-li např. chtít vycentrovat obrázek, napíšete:
<p align=center><img border=“0“ src=“../obr.jpg“ width=“572“ height=“480“></p>
25
Pro obrázky platí také více vlastností než je u uváděno u textu. Pokud se budeme
zabývat umístěním na stránce, můžeme použít následující definice tagy:
Zarovnání obrázku
- se aplikuje úplně stejně, jako jsme se doposud setkali, ale u obrázků existuje více
vlastností.
Rozeznáváme tyhle druhy zarovnání:
top = horní okraj grafiky na horní okraj řádku
middle = střed grafiky na účaří řádku
bottom = dolní okraj grafiky na dolní okraj řádku
left = umístění na levý okraj s obtékáním textu zprava
right = umístění na levý okraj s obtékáním textu zleva
texttop = horní okraj grafiky na horní okraj řádku
absmiddle = střed grafiky na střed řádku
baseline = dolní okraj grafiky na účaří řádku
absbottom = dolní okraj grafiky na spodní okraj řádku
Alternativní text: „alt“ a „title“
- alternativní text se může definovat 2-mi vlastnostmi, které se uvádějí do definice
tagů. Mezi těmito dvěmi vlastnostmi alt=““ a title=““ není velký rozdíl, ale title se
používá především u textů a alt u obrázků. Jak to funguje? Pokud přidržíte myš nad
textem resp. obrázkem, zobrazí se popiska. Pokud bude popiska příliš dlouhá, sama se
zalomí na následující řádky. Zejména možnost alt je velmi praktická, protože když má
uživatel vyplé načítání obrázků nebo se mu obrázek špatně načte, zobrazí se mu
namísto obrázku text. Ukažme si to na příkladu.
Poznámka: Popiska se odborně nazývá tooltip text
Poznámka autora: Tooltip text se může občas chovat velni podivně – může a nemusí se
zobrazovat, přestože máme vše správně zapsané. Tahle chyba se dá opravit většinou
restartováním.
Příklad na zapsání definice u textu
Obecně: <p title=“ Tady bude text, který se zobrazí“>Text</p>
Konkrétní případ: <p title=“Přejdete na úvodní stránku“>Úvod</p>
Příklad na zapsání definice obrázku
Obecně:
<img border=“číslo“ src=“místění + přípona“ width=“číslo“ height=“číslo“
alt=“Tady bude text, který se zobrazí“>
Konkrétní případ:
<img border=“0“ src=“../obr.jpg“ width=“572“ height=“480“ alt=“Tady je image“>
26
Vytvořte si stránku podle této předlohy a uložte ji jako „alt_a_title.html“
<html>
<head>
<title>Alt a title</title>
</head>
<body>
<b>Pro zobrazení tooltip textu podržte myší nad textem nebo obrázkem.</b>
<p title="tohle je krátký popisek">Popisek na text č.1 (krátký popis)</p>
<p title="tohle je dloooooooooooooooooooouhýýýýýýýýýýýýýýýýýýý
popisek">Popisek na text č.1 (dlouhý popis)</p>
<u>Špatné načtení obrázku</u><br>
<img border="0" src"spatne_img1.gif" width="200" height="30"
alt="Tady je obrázek prstenu"><br>
<br>
<u>Dobré načtení obrázku</u><br>
<img border="0" src="My web/img1.gif" width="153" height="99"
alt="Tady je obrázek prstenu">
</body>
</html>
Než se začnu zabývat dalšími parametry, vytvořme si jeden lehký příklad, kde
uplatníme výše zmíněné definice a parametry.
27
Vytvořte si stránku podle této předlohy a uložte ji jako „grafika_zaklady.html“
<html>
<head>
<title>Grafika - základy</title>
</head>
<body bgcolor="#F0C771">
<p align=center>Ukažme si nejdříve ohraničení...
zleva je border="0", uprostřed border="1" a zprava border="5"<br><br>
<img border="0" src="img1.gif" width="153" height="99">&nbsp;&nbsp;&nbsp;
<img border="1" src="img1.gif" width="153" height="99">&nbsp;&nbsp;&nbsp;
<img border="5" src="img1.gif" width="153" height="99"><br>
</p>
<p align=center>Vlastnost lowsrc nemá cenu zkoušet offline,
protože obrázek je načten téměř okamžitě</p>
<p align=center>teďka si trochu pohrajeme s výškou a šířkou<br>&nbsp;</p>
<!--Tabulka-->
<table width=100%>
<tr>
<td width=33% align=center><img border="0" src="img1.gif" width="153"
height="40"></td>
<td width=33% align=center><img border="0" src="img1.gif" width="96"
height="63"></td>
<td width=33% align=center><img border="0" src="img1.gif" width="101"
height="126"></td>
</tr>
</table>
</body>
</html>
hspace
- tahle vlastnost nám určuje, kolik bude vynecháno místa v horizontálním směru (tj.
horizontální ose) vedle dalšího obrázku.
vspace
- tahle vlastnost nám určuje, kolik bude vynecháno místa ve svislém směru (tj.
vertikální ose) vedle dalšího obrázku.
Párový tag <map></map>
- funkce tohohle tagu spočívá především při tvorbě map, pozicování objektů při
kliknutí nad určitou část obrázku apod.
Párový tag <area></area>
28
7. kapitola – Formuláře
Každý z vás na stránce viděl rozvírací seznamy, internetový obchod, dotazníky nebo
jiné stránky, do kterých jste zadali nebo vybrali informace a poté je odeslali ke zpracování.
V téhle lekci si ukážeme jak toho docílit.
Formulář si představme jako souhrn několika různých políček, tlačítek aj. věcí, které
jsou uzavřeny v jednom celku. Veškeré události které chceme zpracovávat musí být v tomhle
celku uzavřeny. K tomu nám slouží párový tag <form>. Pokud budeme pracovat s textovými
poli, zaškrtávacími tlačítky atd., slouží pro jejich kontrolu skripty pro kontroly určitých
událostí. Zmiňuji se o tom, protože některé prvky formuláře dokáží tyhle vlastnosti také
nabídnout (tzv. ověřovací pravidla) ale v praxi se děje převážná část přes JavaScript.
Párový tag <form></form>
- do tohohle tagu vkládáme veškeré možnosti formuláře (např.: tlačítka, vstupní pole)
Mezi tento tag zapisujeme také klasický HTML kód (chceme-li udělat ve formuláři
tabulku, zapíšeme ji mezi tyhle tagy). Párový tag <form></form> sám o sobě nic
neznamená, proto se mu přiřazují následující hodnoty a definice jsou zapsány přímo
v těchto tagech.
Příklad na zapsání hodnot (nebo-li definic, či odborněji atribut)
Obecně:
<form action=“událost“ method=“způsob předání údajů“>Naplnění definice</form>
Konkrétní příklad:
<form action="insert.asp" method="post">Naplnění definice</form>
Do tagu <form> můžeme zapsat následující hodnoty:
action = odkaz na skript, který nám zpracuje data ( tudíž se dá říct, že se jedná o
skript který nám bude obsluhovat formulář)
method = způsob předání údajů
enctype = způsob zakódování dat
Jednotlivé hodnoty nabírají následující atributy:
Action=“mailto:[email protected]“
- formulář a jeho hodnoty budou odeslány na uvedený E-Mail.
Action=“stránka.asp“
- formulář a jeho hodnoty bude poslán na příslušnou stránku, která zpracuje
odeslané údaje. Většinou se odkazuje na na stránky typu *.asp, *.php nebo *.jsp apod.
Method=“post“
- veškerá data formuláře se zabalí a odešlou nezávisle na URL adrese. Post je dobré
používat u rozlehlých formulářů nebo tam, kde je předáváno mezi stránkami hodně
informací.
Method=“get“
- veškerá data jsou předávána v URL adrese. Tuhle metodu bych doporučil
používat jen tam, kde se předává minimum parametrů (většina vyhledávačů pracuje na
tomhle principu)
Enctype
- atribut slouží pro kódování češtiny, při posílání souborů atd. Enctype nemá
v párovém tagu <form></form> moc velkou důležitost, protože se užívá převážně u
skriptovacích stránek.
29
Enctype může nabývat tyhle hodnoty:
a) enctype=“text/plain“ – pro posílání jednoduché pošty
b) enctype=“multipart/form-data“ – pro posílání souborů, přesné kódování češtiny
c) další hodnoty: application/x-www-form-urlencoded, libovolná mime deklarace
Příklad použití:
Obecně: <form action=“druh akce“ method=“metoda zpracování dat“></form>
Konkrétní případ: <form action=“odesli.asp“ method=post></form>
Tag <input type=“text“>
- jedná se o nepárový tag, který do stránky vloží obyčejné textové pole.
Do tohohle tagu lze zapsat následující hodnoty:
a) size=“číslo“ – šířka pole ve znacích
b) maxlength=“číslo“ – nejvyšší počet zadaných znaků
c) name=“název“ – kde název je pojmenování pole. Používá se převážně při
předávání údajů mezi stránkami, kde název slouží jako proměnná.
d) value=“text“ – počáteční hodnota
e) disabled – text bude šedý bude mi přiřazená hodnota jakou mu přiřadíte a nelze
jej měnit. Tohle políčko s textem se v Internet Explorer neodesílá. Tahle pravidla
neplatí vždy – záleží na druhu použitého prohlížeče.
f) readonly – text bude viděn, normálně bude mu přiřazená hodnota jakou mu
přiřadíte ale nelze jej měnit. Tahle hodnota pracuje opět jen v některých prohlížečích.
Příklad použití:
Obecně:
<input type=“text“ size=“číslo“ name=“název“ value=“text“ maxlength=“číslo“>
Konkrétní případ:
<input type=“text“ size=“25“ name=“TP1“ value=“něco napiš“ maxlength=“20“>
Tag <input type=“password“>
- jedná se o nepárový tag, který do stránky vloží textové pole které slouží pro
zadávání hesla (místo písma se jeví hvězdičky). Může nabývat stejných hodnot jako
<input type=“text“>
Tag <input type=“hidden“>
- jedná se taktéž o nepárový tag, který vloží do stránky skryté pole. Můžete do něj
zadávat stejné hodnoty jako v minulých případech, ale polem nebude na stránce vidět
(slouží pro přenos tzv. skrytých hodnot)
Tag <input type=“checkbox“>
- jedná se o nepárový tag, který vloží do formuláře zaškrtávací pole. Pokud budete
vkládat více zaškrkávacích polí a pojmenujete je stejně (pomocí vlastnosti name)
s různými hodnotami (value), vytvoří se tak skupina.
30
Do tohoto tagu lze zapsat následující hodnoty:
a) name=“název“ – kde název je pojmenování pole. Používá se převážně při
předávání údajů mezi stránkami, kde název slouží jako proměnná.
b) value=“text“ – hodnota checkboxu, je nutné ho vždy vyplnit.
c) checked – tento příkaz slouží pro zaškrtnuté políčko
d) disabled – zaškrtnuté pole bude šedé, bude mi přiřazená hodnota jakou mu
přiřadíte (zaškrtnuté/nezaškrtnuté) a nelze jej měnit. Tohle políčko se v Internet
Explorer neodesílá. Tohle pravidla neplatí vždy – záleží na druhu použitého
prohlížeče.
Příklad použití při 3 kombinacích:
Obecně:
<input type=“checkbox“ value=“hodnota“ name=“název“ disabled>
Konkrétní případy:
<input type=“checkbox“ value=“C1“ name=“check1“ disabled>
<input type=“checkbox“ value=“C2“ name=“ check1“ checked>
<input type=“checkbox“ value=“C3“ name=“ check1>
Tag <input type=“radio“>
- jedná se o nepárový tag, který vloží do formuláře přepínací pole. Pokud budete
vkládat více přepínacích polí a pojmenujete je stejně (pomocí vlastnosti name)
s různými hodnotami (value), vytvoří se skupina přepínačů.
Do tohoto tagu lze zapsat následující hodnoty:
a) name=“název“ – kde název je pojmenování pole. Používá se převážně při
předávání údajů mezi stránkami, kde název slouží jako proměnná.
b) value=“text“ – pojmenování radiobuttonu.
c) checked – tento příkaz slouží pro zaškrtnuté políčko
d) disabled – přepínací pole bude šedé, bude mi přiřazená hodnota jakou mu
přiřadíte (vybráno/nevybráno) a nelze jej měnit. Tohle políčko se v Internet Explorer
neodesílá. Tohle pravidla neplatí vždy – záleží na druhu použitého prohlížeče.
Příklad použití při 3 kombinacích:
Obecně:
<input type=“radio“ value=“hodnota“ name=“název“ disabled>
Konkrétní případy:
<input type=“radio“ value=“R1“ name=“prep1“ disabled>
<input type=“ radio“ value=“R2“ name=“prep1“ checked>
<input type=“ radio“ value=“R3“ name=“prep1“>
Párový tag <fieldset></fieldset>
- tenhle tag nám slouží pro přidání skupinového rámečku.
31
Do tohoto tagu lze zapsat následující hodnoty:
a) style=“padding: číslo“ – odsazení legendy od levého horního okraje
b) vnořený párový tag <legend>Text</legend> - vloží do ohraničení legendu tzn.
popisek skupinového rámečku. Legenda může nabírat jakékoliv hodnoty zarovnání
(pomocí již dříve zmíněného příkazu align)
c) okraj - pomocí kombinací speciálních příkazů pro čáry upravujeme ohraničení
skupinového rámečku. Grafické úpravy se v praxi uplatňují především přes CSS.
d) Ostatní – např.: width, height se zapisují společně do style tzn. style=“width: 50;
hight: 20... “ a veškeré údaje jsou od sebe odděleny středníkem.
Příklad použití:
Obecně:
<fieldset style=“padding: číslo“><legend>Nápis rámečku</legend></fieldset>
Konkrétní případ:
<fieldset style=“padding: 5“><legend>Skupina přepínačů</legend></fieldset>
Párový tag <select></select>
- tenhle párový tag nám slouží buď pro přidání rozvíracího seznamu nebo seznamu
pro výběr položek. Bez ostatních vložených tagů nemá tenhle tag žádný smysl.
Hodnoty uzavírané do tagu <select>:
a) size=“číslo“ – určuje druh seznamu. Pokud zvolíte-li číslo 1, bude se jednat o
rozvírací seznam, zvolíte-li číslo vyšší než jedna, bude se jednat o seznam pro výběr
položek. Size nesmí nabírat hodnoty nižší než 1.
b) name=“název“ – kde název je pojmenování pole. Používá se převážně při
předávání údajů mezi stránkami, kde název slouží jako proměnná.
c) multiple – tahle hodnota je funkční jen u seznamu pro výběr položek a dovoluje
vybírat více možností naráz (podržíte Ctrl a myší vybíráte položky)
Do tohoto tagu lze zapsat následující hodnoty a tagy:
a) <option>Text</option> - Tento tag se zapisuje mezi párový tag
<select></select> a říká nám, že se do seznamu vloží položka.
b) <optgroup label=“nadpis skupiny“></optgroup> - V první řadě je potřeba
zmínit, že pětkové a nižší verze Internet Explorer tenhle tag nepodporují. Mezi tento
tag uzavíráme skupinu tagů <option>, které chceme mít uzavřené v jednom celku.
Tzn., že veškeré texty (hodnoty value, ale o tom níže) budou odsazeny zleva a budou
mít nad sebou nápis tučnou kurzívou. Nápis který se má nad nimi zobrazit se definuje
do hodnoty label=“Text“
Tag <option> nabírá následující hodnoty:
a) selected – vložíme-li do tagu tuhle hodnotu, bude tahle položka vybraná již při
otevření seznamu.
b) value=“URL adresa“ – do téhle hodnoty zadáváme URL adresu, kam má odkaz
směřovat. Používá se především s kombinací JavaScriptu.
32
Příklad použití pro rozbalovací seznam:
Obecně:
<select size=“počet řádků“ name=“RS1“>
<option selected>vybraný text</option>
<option value=“URL adresa“>Název položky</option>
<optgroup label=“Název skpiny“>
<option>Položka</option>
<option>položka</option>
</optgroup>
</select>
Konkrétní případ:
<select size=“1“ name=“RS1“>
<option selected>Hlavní stránka</option>
<option value=“http://www.kontakty.cz“>Kontakty</option>
<optgroup label=“Jména: “>
<option>Jana</option>
<option>Pavla</option>
</optgroup>
</select>
Příklad použití pro seznam výběru položek:
Obecně:
<select size=“počet řádků“ name=“RS2“ multiple>
<option selected>vybraný text</option>
<option value=“URL adresa“>Název položky</option>
<optgroup label=“Název skpiny“>
<option>Položka</option>
<option>položka</option>
</optgroup>
</select>
Konkrétní případ:
<select size=“6“ name=“RS2“ multiple>
<option selected>Hlavní stránka</option>
<option value=“http://www.kontakty.cz“>Kontakty</option>
<optgroup label=“Jména: “>
<option>Jana</option>
<option>Pavla</option>
</optgroup>
</select>
Tag <input type=“image“> - obrázek vložený přes formulář
- klasický image, platí veškeré paramtry jako u klasického obrázku. Liší se jen ve
způsobu zapsaní. Obrázek vložený do formuláře se kombinuje s několika jinými
hodnotami. Jedná se o nepárový tag.
33
Základní hodnoty které obrázek nabírá:
b) border=“číslo“ – ohraničení obrázku
c) src=“umístění obrázku“ – umístění obrázku
d) name=“název“ – název je pojmenování obrázku. Používá se převážně při
předávání obrázků mezi stránkami, kde název slouží jako proměnná.
f) ostatní paramtry – width, height, lowsrc atd.
Příklad použití:
Obecně:
<input type=“image“ src=“umístění + přípona“ border=“číslo“ name=“obr1“>
Konkrétní případ:
<input type=“image“ src=“letadlo.gif“ border=“0“ name=“obr_letadlo“>
Tag <input type=“file“>
- tenhle tag je nepárový a slouží nám pro přidávání souborů na server či jejich
odesílání. Jeho využití je z velké části závislé na databázi a v praxi má využití např.
v E-Mailu přes webové rozhraní pro přidávání souborů, nebo různé FTP servery atd.
Textové pole se automaticky přidá s tlačítkem procházet.
Do tohoto tagu lze zapsat následující hodnoty:
a) size=“číslo“ – velikost textového pole
b) name=“název“ – název je pojmenování textového pole. Používá se převážně při
předávání obrázků mezi stránkami, kde název slouží jako proměnná
c) value=“Text“ – Počáteční hodnota
Příklad použití:
Obecně: <input type=“file“ name=“název“ size=“číslo“>
Konkrétní případ: <input type=“file“ name=“prochazej_1“ size=“20“>
Tag <input type=“button“>
- jedná se o nepárový tag, který do formuláře vloží tlačítko. Tlačítko je ovládáno
pomocí hodnot, které nabývá formulář nebo jinými skriptovými událostmi.
Do tohoto tagu lze zapsat následující hodnoty:
a) value=“Text“ – kde value je text, který se zobrazí na tlačítku
b) name=“název“ – název je pojmenování tlačítka. U tlačítek nemá hodnota name
velký význam pokud nebudu pracovat s tlačítkem dále, ale je dobré ji uvádět.
Příklad použití:
Obecně: <input type=“button“ name=“název“ value=“text“>
Konkrétní případ: <input type=“button“ name=“tlacitko_1“ value=“Zkontroluj“>
Tag <input type=“submit“>
- jedná se o nepárový tag, který do formuláře vloží tlačítko pro odesílání. Tlačítko je
ovládáno pomocí hodnot, které nabývá formulář nebo jinými skriptovými událostmi.
Do tohoto tagu lze zapsat následující hodnoty:
a) value=“Text“ – kde value je text, který se zobrazí na tlačítku
b) name=“název“ – název je pojmenování tlačítka. U tlačítek nemá hodnota name
velký význam pokud nebudu pracovat s tlačítkem dále, ale je dobré ji uvádět.
34
Příklad použití:
Obecně: <input type=“submit“ name=“název“ value=“text“>
Konkrétní případ: <input type=“submit“ name=“tlacitko_2“ value=“Odešli“>
Tag <input type=“reset“>
- jedná se o nepárový tag, který do formuláře vloží tlačítko pro vymazání všech změn
a údajů, které se ve formuláři změnily. Tlačítko není ovládáno pomocí hodnot, které
nabývá formulář nebo jinými skriptovými událostmi.
Do tohoto tagu lze zapsat následující hodnoty:
a) value=“Text“ – kde value je text, který se zobrazí na tlačítku
b) name=“název“ – název je pojmenování tlačítka. U tlačítek nemá hodnota name
velký význam pokud nebudu pracovat s tlačítkem dále, ale je dobré ji uvádět.
Příklad použití:
Obecně: <input type=“reset“ name=“název“ value=“text“>
Konkrétní případ: <input type=“reset“ name=“tlacitko_3“ value=“Vymaž“>
Tag <textarea></textarea>
- jedná se o párový tag, který do formuláře vloží textové pole. Je nutné do něj zadat
dvě hodnoty tj. rows a cols, jinak se automaticky nastaví jejich počet.
Do tohoto tagu lze zapsat následující hodnoty:
a) rows=“číslo“ – počet řádků, pokud nezadáte tuhle hodnotu, automaticky se
nastaví na 1 řádek.
b) cols=“číslo“ – počet znaků na jeden řádek. pokud nezadáte tuhle hodnotu,
automaticky se nastaví na 20 znaků.
c) name=“název“ - kde název je pojmenování pole. Používá se převážně při
předávání údajů mezi stránkami, kde název slouží jako proměnná.
Příklad použití:
Obecně: <textarea rows=“číslo“ cols=“číslo“ name=“název“>
Konkrétní případ: <textarea rows=“5“ cols=“25“ name=“TA1“>
35
Vytvořte si stránku podle této předlohy a uložte ji jako „Formular.html“
<html>
<head>
<title>Formulář</title>
</head>
<body>
<p align="center">
<u><b><font size="5" color="#000080">Dotazovací formulář</font></b></u></p>
<form method="POST" action="formular.asp">
<fieldset style="padding: 2; width: 500; height: 125">
<legend>Osobní údaje</legend>
Jméno a příjmení: <input type="text" name="T1" size="30"><br><br>
E-Mailová adresa: <input type="text" name="T2" size="30" value="@"><br><br>
Věk: <input type="radio" value="V1" name="R1">Pod 15 let
<input type="radio" name="R1" value="V2" checked>15 - 25 let
<input type="radio" name="R1" value="V3">25-50 let
<input type="radio" name="R1" value="V4"> nad 50 let
</fieldset>
<br><br>
<fieldset style="padding: 2; width:500; height:128">
<legend>Specifikace dotazu</legend>
Dotaz se týká oblasti:
<select size="1" name="D1">
<option selected>Vyberte si oblast...</option>
<optgroup label="Informatika">
<option>Jazyku HTML</option>
<option>Jazyku ASP</option>
<option>Jazyku CSS</option>
<option>Jazyku ostatní</option>
</optgroup>
<optgroup label="Databáze">
<option>Databáze tvořené přes access</option>
<option>Databáze tvořené pomocí SQL</option>
<option>Ostatní databáze</option>
</optgroup>
<option>Dotaz je jiného druhu</option>
</select>
<br><br>
Důležitost dotazu:
<input type="checkbox" name="C1" value="ON"> Velmi malá
<input type="checkbox" name="C1" value="ON"> Malá
36
<input type="checkbox" name="C1" value="ON">Normální
<input type="checkbox" name="C1" value="ON">Důležitá
<br><br>
Kopii dotazu poslat i ostatním členům:
<input type="checkbox" name="C5" value="ON" checked disabled> ANO</fieldset>
<br><br>
Text dotazu:<br>
&nbsp;&nbsp; <textarea rows="5" name="S1" cols="30"></textarea>
<br><br>
<input type="submit" value="Odeslat dotaz" name="B1">
<input type="reset" value="Vymazat formulář" name="B2"></form>
<br>
</body>
</html>
Tímhle složitějším příkladem bych rád uzavřel kapitolu o formulářích.
Poznámka: soubor „formular.asp“ zpracová údaje. Tento soubor je vytvořen pomocí jazyku
ASP (Active Server Pages) a lze si ho stáhnout, nebo si ho můžete podle svých potřeb napsat.
37
8. kapitola – Framy
Pro framy existuje i český název – rámce. V terminologii i v praxi se můžete setkat
s oběma výrazy, proto je zde záměrně uvádím. Pojďme si definovat co to fram je. Jedná se o
několik samostatných stránek, které se v prohlížeči (tedy ve výsledném díle) zobrazují jako
jediná stránka. Při tvorbě framové stránky nutně potřebujete znát následující pravidlo. Každou
stránku vytváříte samostatně a nakonec vytvoříte úplně novou stránku, kde všechny doposud
vytvořené stránky pospojujete v určitém poměru (zadávaný přes procenta nebo přes pixely,
dovolíte měnit velikost apod.). V tuhle chvíli to zní strašně, ale ukažme si to na příkladu.
Potřebuji vytvořit stránku, kde bude potřeba vytvořit záhlaví, boční menu a stránku
pro text. Každou stránku si vytvořím prvně samostatně. Získám 3 na sobě nezávislé stránky
(zahlavi.html, menu.html a text.html). Nyní vytvořím stránku, která tyhle tři stránky pospojuje
a nazvu ji např. index3.html. V téhle situaci nastane ta situace, že když spustím index3.html,
spustím zároveň všechny tři stránky dohromady a v prohlížeči se budou jevit jako jediná
stránka.
Teď si možná říkáte, proč se to má dělat tak složitě, když tahle situace lze řešit
způsobem, že stránky vytvoříme samostatně a propojíme je pomocí hyperlinků (viz. kapitola
dále) Budete například tvořit do framu menu.html seznam CD které máte doma a po kliknutí
na příslušné CD vám se ve framu text.html zobrazí informace o CD. Z tohohle plyne, že
boční menu nemusíme dělat do každé stránky, ale stačí ho vytvořit jen jedenkrát. Je zde velká
praktičnost při aktualizaci, protože seznam CD nemusíte upravovat na každé stránce, ale
upravíte jen menu.html.
Poznámka: v praxi se někteří webový tvůrci framům vyhýbají a řeší situaci pomocí vloženého
skriptu. Tzn. že vytvoří soubor do kterého napíší celé menu.html (včetně umístění apod.) a ve
stránce ho propojí přes příkaz. Tahle metoda sice je o něco lepší než framová verze (framy
mají nedostatky, ale lze je odstranit, viz. ke konci lekce) ale je o hodně pracnější a pro běžné
použití framy bohatě postačí.
Pojďme si nejdříve vytvořit 3 kombinace které mohou nastat (ve skutečnosti můžou
nastat stovky kombinací, ale nám jde jen o tři základní kombinace) Jedná se o framy, které
budou rozděleny na stránce horizontálně, vertikálně a kombinovaně.
38
Příklad použití pro fram, který bude mít 2 horizontální stránky:
Obecně:
<frameset rows="velikost,velikost">
<frame name="pojmenování framu" src="umístění framu">
<frame name=" pojmenování framu " src="umístění framu">
<noframes>
<body>
<p>Text který se zobrazí pro prohlížeče které nepodporují framy</p>
</body>
</noframes>
</frameset>
Konkrétní případ:
<frameset rows="150,*">
<frame name="horní" src="Myweb/Framy/Zahlavi.html">
<frame name="dolní" src=" Myweb/Framy/Uvod.html">
<noframes>
<body>
<p>Na této stránce jsou použity rámce, prohlížeč je však nepodporuje.</p>
</body>
</noframes>
</frameset>
39
Příklad použití pro fram, který bude mít 2 vertikální stránky:
Obecně:
<frameset cols="150,*">
<frame name="pojmenování framu" target="název framu, který slouží pro propojování či
odkazování pomocí hyperlinků" src="umístění framu">
<frame name="pojmenování framu" src="umístění framu">
<noframes>
<body>
<p>Na této stránce jsou použity rámce, prohlížeč je však nepodporuje.</p>
</body>
</noframes>
</frameset>
Konkrétní případ:
<frameset cols="150,*">
<frame name="obsah" target="menu" src="Myweb/Framy/Obsah.html">
<frame name="hlavni" src="Myweb/Framy/Vypis.html ">
<noframes>
<body>
<p>Na této stránce jsou použity rámce, prohlížeč je však nepodporuje.</p>
</body>
</noframes>
</frameset>
40
Příklad použití pro fram, který bude kombinovaný
(záhlaví=horizontální fram + menu=vertikální fram + úvod=vertikální fram):
Obecně:
<frameset rows="140,*">
<frame name="nápis" scrolling="auto" target="obsah" src="nová_stránka_2.htm" noresize>
<frameset cols="232,*">
<frame name="obsah" target="hlavní" src="nová_stránka_4.htm" scrolling="yes">
<frame name="hlavní" src="nová_stránka_3.htm">
</frameset>
<noframes>
<body>
<p>Na této stránce jsou použity rámce, prohlížeč je však nepodporuje.</p>
</body>
</noframes>
</frameset>
Konkrétní případ:
<frameset rows="140,*">
<frame name="nápis" scrolling="auto" target="obsah" src="nová_stránka_2.htm" noresize>
<frameset cols="232,*">
<frame name="obsah" target="hlavní" src="nová_stránka_4.htm" scrolling="yes">
<frame name="hlavní" src="nová_stránka_3.htm">
</frameset>
<noframes>
<body>
<p>Na této stránce jsou použity rámce, prohlížeč je však nepodporuje.</p>
</body>
</noframes>
</frameset>
41
42
9. kapitola – Hypertextový odkaz (hyperlink)
Úplnou samozřejmostí na internetových stránkách je přecházení na jiné stránky.
K tomuto účelu nám slouží hypertextový odkaz, který pracuje na základě předání alternativní
či relativní adresy URL po kliknutí na odkaz. Hypertextovým odkazem můžeme udělat téměř
cokoliv – text, obrázek, tlačítko aj.
Párový tag <a></a>
- vše co je obsaženo mezi tímto tagem (tzn. text, obrázek apod.) je hypertextovým
odkazem. do tohle tagu se nesmí zapisovat další párový tag <a></a>, párový tag
tabulka <table></table> a párový tag pro formulář <form></form>. Tahle značka
vznikla odvozením z anglického slova anchor, nebo-li ukotvení, protože se
„ukotvuje,“ tudíž přidává se k textu či obrázkům. Protože tento tag sám o sobě nic
neznamená, je potřeba mu připsat další hodnoty:
Do tohoto tagu lze zapsat následující hodnoty:
a) href=“URL adresa“ – Zde zadáváme URL adresu kam má stránka odkazovat.
Můžeme zde zapisovat jak relativní tak alternativní adresy URL.
b) name=“název“ – název je pojmenování tlačítka. U tlačítek nemá hodnota name
velký význam pokud nebudu pracovat s tlačítkem dále, ale je dobré ji uvádět.
Příklad použití:
Obecně: <input type=“reset“ name=“název“ value=“text“>
Konkrétní případ: <input type=“reset“ name=“tlacitko_3“ value=“Vymaž“>
do rozisernmych moznosti: automaticke miniatury, maruqe
43
Dodatek č.1 – PrintScreeny stránek
Výsledný příklad index.html“
Výsledný příklad „formátování_textu.html“
44
Výsledný příklad „formatovani_slozitejsiho_textu.html“
Výsledný příklad „vyuziti_formatovani.html“
45
Výsledný příklad „seznamy.html“
Výsledný příklad „tabulka_procenta.html“
46
Výsledný příklad „tabulka_pixely.html“
Výsledný příklad „tabulka_zaklady.jtml“
47
Výsledný příklad „tabulka_colspan.html“
Výsledný příklad „tabulka_rowspan.html“
48
Výsledný příklad „tabulka_absolutni_ulozeni.html“
Výsledný příklad „alt_a_title.html“
49
Výsledný příklad „grafika_zaklady.html“
50
Výsledný příklad „formular.html“
51