Úvod do programování HTML Tím, čím se internetové dokumenty výrazně odlišují od ostatních dokumentů, je používání hypertextu. Ten umožňuje provázat internetové stránky mezi sebou. Pokud tedy aktivujeme odkaz na jedné stránce, zobrazí se nám jiný, související dokument, ale třeba i obrázek, zvukový soubor, animace nebo soubor určený ke stažení. Odkazem může být nejčastěji text, obrázek nebo jiný grafický objekt.

K vytváření hypertextových dokumentů se používá jazyk HTML (Hypertext Markup Language). Základem stránky je prostý text. Teprve vložením určitých příkazů do textu dosáhneme jeho správného umístění, barvy či velikosti. Právě tak můžeme vytvářet i odkazy a dokumenty propojovat. Soubory HTML mají standardně koncovku *.html nebo častěji *.htm. Kratší verze se prosadila až později díky konvencím používaným v operačním systému Windows.

Hypertextové dokumenty lze otevřít v prohlížeči (browseru), který příkazy interpretuje do grafické podoby. Protože prohlížeče nabízí více firem, není ani interpretace stránek v těchto prohlížečích jednotná. Nehledě k tomu, že často obsahují některé výraznější odlišnosti nebo nadstandardní funkce, které jiné postrádají. A také proto, že se jazyk HTML vyvíjí spolu s technickou úrovní výpočetní techniky, vyvíjí se i prohlížeče.

Důsledkem je to, že uživatelé používají různé prohlížeče v různých verzích, navíc v různém rozlišení obrazu při různém nastavení svých browserů. Není jednoduché napsat stránku tak, aby byla zobrazena ve všech případech tak, jak autor zamýšlel. Vyhýbejte se proto používání těchto nestandardních funkcí a konstrukcí.

I proto by při tvorbě stránky měl být kladen důraz na její logickou strukturu. Nehledě k tomu, že stránky mohou být prohlíženy negrafickými browsery (např. i pro nevidomé). Proto je důležitější aby prohlížeč poznal, že se jedná např. o hlavní nadpis ap. Podle úrovně nadpisu se orientují také i internetové vyhledávače.

Strukturu stránky a její formátování zajišťují speciální příkazy. Prohlížeč (browser) stránky musí umět rozlišit text určený k formátování od těchto příkazů. Pro odlišení jsou příkazy - značky ohraničeny tzv. šípovými závorkami "< >". (Ty lze jednodušeji na klávesnici napsat pomocí zkratky <Alt> + <,> nebo <Alt> + <.>).

Některé příkazy - tagy [tegy] - značky, jsou párové (ohraničují tak vybraný text) a jiné ne. Párové příkazy jsou ukončeny, resp. uzavírací příkaz obsahuje lomítko. Např.: <tag> formátovaný text </tag>

Můžete se setkat taky s tím, že jsou někdy uzavírací znaky vynechány. To je sice v zásadě možné (např. tabulkové příkazy, ukončení odstavce), ale může nastat případ, kdy to nedopadne dobře. To záleží také na "inteligenci" prohlížeče. Proto raději všechna pravidla dodržujte a předejdete tak možným chybám a různým interpretacím v různých prohlížečích.

Některé tagy mají navíc různé atributy, které se zapisují dovnitř příkazu. Těmito atributy jsou nejčastěji příkazy pro zarovnání, barvu text, jeho velikost ap. Hodnota atributu se zapisuje mezi uvozovky, které jsou nezbytné především u víceslovných hodnot. Např.: <P align="right"> libovolný text </P>

Toto znamená, že text začíná na novém odstavci (P), a je zarovnán (align) napravo (right), pro další text to již neplatí(</P>) a je zarovnáván jako obvykle vlevo. Atributy se nemusí psát všechny (obvykle je jich víc), stačí jen ty, které potřebujeme. Podrobně se k takovým příkazům vrátíme později.

Strukturu či sazbu textu tedy ovlivňují speciální příkazy (párové, nepárové, s atributy). Pokud použijeme následující konstrukci příkazu: <!-- libovolný text, příkaz, komentář -->, dosáhneme toho, že je text nebo příkaz ignorován. Je totiž interpretován jako komentář. To můžete využít např. při ladění stránky, nebo

pro zapsání poznámek. Dejte však pozor na správné zakončení příkazu.

Příkazy ani jejich atributy nejsou "case sensitiv", to znamená, že je celkem jedno, jestli je budete psát velkými nebo malými písmeny. Ale pro lepší přehlednost je lépe psát příkazy velkými písmeny.

Je důležité si uvědomit, že prohlížeče ignorují zarovnání textu tak jak je ve zdrojovém souboru. Ignoruje tedy odstavce a odsazení. Zalomení řádku "entrem" (konec řádku), prázdné řádky, dvojité a vícenásobné mezery jsou interpretovány jako jedna mezera.

© Marek Bryl 2000

Základní struktura A teď už konečně k vlastní konstrukci stránky a příkazům. Stránku vymezuje párový příkaz <HTML> ... </HTML>. Za ní následuje rovněž párová značka <HEAD> ... </HEAD>, kde se uvádí některé důležité informace o dokumentu, jako např. použitá kódová stránka, jméno autora a titul stránky. Základní struktura stránky vypadá tedy takto:

<HTML> <HEAD> <META name="Author" content="Vaše jméno"> <META http-equiv="Content-Type" content="text/html; charset=windows-1250"> <TITLE>Název dokumentu</TITLE> </HEAD> <BODY> (zde je vlastní tělo stránky) </BODY> </HTML>

Titul uvozený značkou <TITLE> ... </TITLE> se zobrazí v záhlaví prohlížeče a uloží se případně do bookmarku. Měl by být krátký (max. 64 znaků), ale plně vystihovat obsah stránky. Jeho uvedení není ovšem podmínkou, stejně tak jako i uvedení verze jazyka, která se píše ještě před uvozovací značku <HTML>. Pro verzi 4.0 může vypadat následovně: <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">

Do hlavičky se ještě před titul vkládají pomocí nepárové značky <META> tzv. metainformace. To jsou informace o zvolené kódové stránce, kdo je autorem stránky, popis stránky a klíčová slova, a nebo také pokud byla stránka vytvořena v nějakém programu, tak se tam tato informace objeví také. Uvedený příklad říká, že dokument používá znaky z kódové stránky 1250, tedy českou (středoevropskou) sadu znaků. Mimo to, lze nastavit jazyk pro jakoukoli část dokumentu pomocí vlastnosti (atributu) LANG, kterou lze nastavit u většiny příkazů, např.: <BODY LANG="cs"> nebo <BODY LANG="en">.

Atribut name příkazu <META> s parametry description nebo keywords určí, zda atribut content obsahuje jméno autora, popis dokumentu či seznam klíčových slov. Atribut content může obsahovat text nebo čárkami oddělený seznam klíčových slov. Př.:

<META name="author" content="Vaše jméno"> <META name="description" content="HTML snadno a rychle - základní struktura"> <META name="keywords" content="struktura, HTML, zaklad, atribut, meta, body, head">

Značku <META> lze využít i k automatickému přesměrování stránek na jinou stránku nebo adresu po určité době zadané v sekundách. K tomu slouží již známý atribut http-equiv a jeho hodnotou je tentokrát refresh. Poté je nutné vypsat do atributu content počet sekund a url odkazovaného souboru. Př.:

<META http-equiv="refresh" content="12; url=soubor.html">

Tělo dokumentu Příkaz <BODY> ... </BODY> ohraničuje vlastní "viditelné" tělo stránky. Do tohoto příkazu je možné přidat řadu dalších parametrů. Protože některé z nich jsou užitečné, tak si je ukážeme.

<BODY background="tapety/dark.jpg" bgcolor="#002033" text="#008000" link="#008000" vlink="#808000" alink="#000080">

Tyto parametry říkají jaký obrázek bude použit na pozadí (tapeta). Zde je dobré připomenout, že pokud je obrázek pozadí menší, než je okno prohlížeče, je načten "dlaždicovým" způsobem přes celé okno. Za parametr background se uvádí adresa obrázku. Parametr bgcolor říká, jaká bude barva pozadí (pokud nebude překryta pozadím). Hodnoty lze zadat slovně díky předdefinovanému označení základních barev, nebo pomocí hexadecimálního kódu, který by se měl ještě indikovat znakem "#".

Termín bezpečné barvy označuje sadu systémových barev, které budou zobrazeny vždy ve správném odstínu. Paleta bezpečných barev se skládá z 216 barev. Jde o barvy, které by měl mít k dispozici každý internetový prohlížeč v libovolném operačním systému, podporujícím 256 barev. Každá barva je vyjádřena kombinací šesti hodnot (00, 33, 66, 99, CC a FF). Pokud tedy použijeme bezpečnou barvu, vyhneme se nevzhlednému ditheringu (zrnitá směs dvou či více barev, které mají navodit dojem barvy zamýšlené) nebo ještě v horším případě substituci (náhrada za nejbližší barvu z podporované palety) v případech, kdy prohlížeč není schopen zobrazit zamýšlenou původní barvu.

Parametr text definuje obdobným způsobem jaká bude barva textu. Ta se většinou neuvádí, ponechává se implicitní. Další série tří parametrů ovlivňují barvy hypertextových odkazů. Lze tak změnit předvolené nastavení z obvyklé modré a fialové. Tyto parametry se týkají nezvoleného odkazu, odkazu dříve navštíveného a aktivního odkazu (aktuálně voleného).

Dalšími parametry nastavují odsazení od okrajů okna, pokud implicitní nastavení prohlížeče z nějakého důvodu nevyhovuje. Implicitně je také nastaveno, aby se pozadí pohybovalo s textem při jeho posouvání současně. Pokud chceme, aby bylo pozadí vzhledem k textu "pevné" použijeme poslední uvedený parametr. Musím však upozornit, že některé parametry starší prohlížeče nepodporují.

<BODY topmargin="5" bottommargin="1" leftmargin="8" rightmargin="0" bgproperties="fixed">

© Marek Bryl 2000

Formátování písma Dále se podívejme na příkazy ovlivňující řez, styl a velikost písma. Většina značek je párových a lze je mezi sebou kombinovat. Pro tučné písmo slouží příkaz <B> ... </B>, pro kurzívu <I> ... </I>. Příkaz pro podtržení písma <U>...</U> se nedoporučuje používat, neboť se podtržení používá pro odkazy a navíc podtržení písma je typograficky nevhodné. Rovněž jako příkaz <S> ... </S> nebo též <STRIKE> ... </STRIKE> pro přeškrtnuté písmo a příkaz <BLINK> ... </BLINK> pro blikající text. Tyto příkazy nejsou také často některými prohlížeči podporovány.

Existují i značky, které provádějí logické označení textu. Graficky pak text odlišuje změnou formátu nebo řezu písma. Jeho konkrétní podoba není daná a závisí na konkrétním prohlížeči. Takové příkazy jsou <EM> ... </EM> pro zvýraznění textu (obvykle kurzívou), <STRONG> ... </STRONG> pro silné zvýraznění textu (nejčastěji tučné), nebo <CITE> ... </CITE> označující citaci literatury ap. (kurzíva).

Pro zvětšení a zmenšení písma lze použít rovněž párové příkazy <BIG> ... </BIG> a <SMALL> ... </SMALL>. Příkaz <BASEFONT> s povinným atributem size nastaví standardní velikost písma. Rozsah možných hodnot je od 1 do 7. Nastavit velikost písma lze také pomocí příkazu <FONT>, který si ale uvedeme později.

Užitečnými příkazy jsou značky pro dolní a horní index. Obě jsou opět párové. Jsou to <SUB> ... </SUB> pro spodní a <SUP> ... </SUP> pro horní index.

Při použití následujících příkazů, je text psán neproporcionálním písmem s pevnou šířkou znaku jako má např. psací stroj (většinou fonty Courier). Jsou to párové příkazy <TT> ... </TT> a <PRE> ... </PRE>. Příkaz <TT> se vztahuje pouze na font písma, zatímco <PRE> je párová značka pro text, který má být zobrazen přesně tak, jak je napsán ve zdrojovém textu (včetně všech mezer, tabulátorů nových a prázdných řádků). Text zobrazován neproporcionálním fontem s konstantní šířkou znaku. V předformátovaném textu se smí použít pouze hyperlinky a frázové prvky. Příkazy definující formátování textu nesmí být použity. Tato značka má několik nepovinných atributů:

<PRE clear=" " width=" "> clear - způsob obtékání obrázků:

left - obtékány budou pouze obrázky umístěné vlevo right - obtékány budou pouze obrázky umístěné vpravo all - pokračuje se až pod všemi obrázky

width - šířka bloku - maximální počet znaků v řádku Dalším podobným příkazem je <CODE> ... </CODE>, který říká, že následuje např. zdrojový text nějakého programu. V zásadě se neliší od <TT>. Tyto dvě značky ale nebyly staršími prohlížeči vždy podporovány.

Použití příkazu "FONT" Důležitý příkaz tvoří párová značka <FONT>... </FONT> se třemi atributy určující barvu, font a velikost písma. Atribut color nastaví barvu písma. Ta může být vyjádřena hexadecimálním číslem (uvozeným znakem #), nebo standardizovaným anglickým jménem některé ze základních barev (RED, GREEN, BLUE, WHITE, BLACK, GRAY, NAVY, LIME, YELLOW, PURPLE, SILVER, BROWN,

MAROON, FUCHSIA, AQUA, TEAL). Slovní vyjádření barvy se však příliš nedoporučuje používat, protože může být nesprávně interpretováno. Hexadecimální číslo vyjadřuje poměr tří základních barev podle schématu RGB, červené, zelené a modré, tedy "#ččzzmm". Např.: <FONT color="#8A00F4">

Atribut face určuje typ písma, kterým je text zobrazen. Ovšem je třeba, aby zvolený font byl nainstalován na počítači, kde je stránka prohlížena. Proto volte spíš standardní fonty. Nebo nám pomůže, že lze zapsat místo jednoho typu písma výčet druhů "náhradních". Jednotlivé typy se zapíší jako jeden parametr atributu, pouze se oddělí čárkou a mezerou jako slova ve větě. Když prohlížeč nenajde v systému první písmo, bude se snažit použít druhé atd. Pokud písmo není uvedeno vůbec, nebo jej nenajde, použije písmo předvolené (nejčastěji Times New Roman).

Ještě je třeba upozornit, že některé systémy volí kódovou stránku písma automaticky, jiné vyžadují její specifikaci přímo u jména fontu. Pro českou sadu je to "CE" - Central Europe. Abychom se vyhli komplikacím, je lépe vypsat pro formátovanou větu, kde jsou znaky s diakritikou, obě verze. Např.: <FONT face="Arial CE, Verdana CE, Arial, Verdana, sans-serif">

Třetí atribut size udává velikost písma. Velikost písma lze nastavit absolutně hodnotami od 1 (nejmenší) do 7 (největší). Standardně je text v prohlížečích zobrazován písmem o velikosti odpovídající hodnotě 3. Pokud nechceme nastavit velikost písma absolutně, můžeme tak udělat relativně. To se provede zapsáním znaménka plus nebo mínus před hodnotu, o kterou chceme písmo zvětšit nebo zmenšit. Výsledná velikost je však omezena stejným rozsahem jako u absolutního nastavení. Tento druhý způsob se mi zdá vhodnější. Např.: <FONT size="+2">

Zápis tohoto příkazu může tedy vypadat i takto: <FONT face="Arial, sans-serif" color="green" size="+1"> formátovaný text... </font>

Pokud chceme nastavit např. barvu celého textu dokumentu, můžeme to udělat v příkazu <BODY text="">. Závěrem je nutno říci, že funkce příkazu <FONT> se nahrazují použitím stylů a samotná značka <FONT> by se měla přestat používat.

Následuje ukázka, jak by se měly příkazy strukturovat, aby zabraly co nejméně místa, a zdrojový text byl přehledný. Nemusí se každá část textu formátovat znovu, ale lze využít neuzavření příkazů části předešlé.

normální <B>tučné <big><I>větší tučná kurzíva</B> větší kurzíva </i>větší</big> normální normální tučné větší tučná kurzíva větší kurzíva větší normální

<H3>Začátek nadpisu <FONT color="red">střední červená část </FONT>konec nadpisu</H3> Začátek nadpisu střední červená část konec nadpisu

© Marek Bryl 2000

Sazba textu Některé příkazy sloužící k zarovnání - umístění různých objektů na stránce. Těmito objekty je míněn prostý text, obrázky, tabulky, tlačítka a další. Je dobré říci, že se např. obrázek chová jako obyčejné písmeno. "Začátek" obrázku, na který se příkaz vztahuje je levý dolní okraj, jako u písma. To často mate, hlavně když je obrázek velký. Teď si tedy ukážeme několik nejdůležitějších příkazů používaných k sazbě objektů.

Zalomení řádku ve zdrojovém textu je stejně jako odsazení či více mezer interpretováno jako jedna mezera. Text v okně prohlížeče je zalamován automaticky, podle šířky okna. Záleží tedy na velikosti okna, na tom jestli je minimalizované nebo maximalizované ap. Pokud chceme na určitém místě zalomení řádku vynutit, použijeme příkaz <BR>. Když použijeme několik těchto příkazů za sebou, vznikne svislá mezera. Tento příkaz obsahuje i několik nepovinných parametrů, např.:

<BR clear=" "> clear specifikuje způsob obtékání obrázků, jeho hodnotami mohou být:

left - obtékány budou obrázky umístěné vlevo right - obtékány budou obrázky umístěné vpravo all - pokračuje se až pod všemi obrázky

Někdy se dostaneme do situace, kdy je zalomení řádku na určitém místě přímo nežádoucí. Nejčastěji po jednopísmenné předložce či spojce, mezi číslem a jednotkou nebo po iniciále ap. K tomu slouží tzv. nezalomitelná (nebo též pevná, tvrdá či neoddělitelná) mezera, která se zapíše místo normální mezery. Její značka se píše &nbsp; ("non-break-space"). Např. "u&nbsp;domu". Pokud jich zapíšeme více za sebou, docílíme odsazení textu.

Můžeme se setkat ještě s jednou zajímavou značkou, která zakazuje automaticky zalamovat text podle šířky okna prohlížeče. Je to párová značka <NOBR> ... </NOBR>. Naopak nepárová značka <WBR> vyznačí, kde řádky zalomit lze.

Pokud chceme text logicky členit na odstavce, použijeme příkaz <P>. V tištěném textu jsme zvyklí na odsazení prvního slova odstavce. To se zde ale nepoužívá. Standardně se pouze vynechá mezi odstavci jeden řádek nebo půlřádek (to podle prohlížeče). Tato značka může obsahovat atribut align, který říká, jak bude text zarovnán. Použití koncové značky </P> není povinné, nový odstavec uzavírá předešlý a ruší také případné zarovnání.

<P align=" "> left - zarovnání textu k levému okraji (tato hodnota je implicitní) right - zarovnání textu k pravému okraji center - vycentrování textu vzhledem ke stránce justify - zarovnání na oba okraje roztažením textu doplněním větších mezer mezi slova

Jestliže uvedete značku <P> několikrát za sebou ve snaze "odřádkovat" svislou mezeru v textu, nebudete úspěšní. Platit bude pouze první značka. To lze obejít tím, že příkaz zkombinujete s tvrdou mezerou. Tento postup je ale nestandardní a nevhodný. Raději používejte značku na zalomení řádku.

Parametr nowrap zakazuje automatické lámání řádků uvnitř odstavce. Povoluje jen místa, kde je lámání vynuceno příkazem <BR>. Definice odstavce může tedy vypadat i takto: <P nowrap align="right">

Pokud potřebujeme označit část stránky nebo několik odstavců jako jeden logický celek, můžeme použít příkaz <DIV> ... </DIV>. Příkaz je párový a tak je druhá značka nutná. Příkaz má stejné parametry jako značka pro odstavec, včetně nowrap. Pokud je použijeme, nemusíme je pro jednotlivé odstavce ohraničené tímto příkazem vypisovat. Př.:

<DIV align="justify"> <P> ... <P> ... </DIV>

Specifickou částí jsou nadpisy. Ty pomáhají vytvořit logickou strukturu dokumentu. Používá se šest úrovní nadpisů, tedy šest logických úrovní, které se graficky odlišují většinou jen velikostí písma. Pro nadpisy se používají párové značky <H1> ... </H1> až <H6> ... </H6>, přičemž první je nejdůležitější a největší a šestý nejméně důležitý. Nadpis může mít několik atributů, z nichž některé jsou poměrně nestandardní a proto je neuvádím.

<H3 align="center" clear="left" nowrap> Nadpis </H3> src - URL adresa grafiky, která má být vložena před vlastní text nadpisu nowrap - zakazuje lámání řádků uvnitř nadpisu (s výjimkou míst vynuceného přechodu na nový řádek <BR>) align - slouží pro určení pozice nadpisu ve vodorovném směru

left - zarovnání vlevo (implicitní) right - zarovnání vpravo center - zarovnání na střed justify - zarovnání obou okrajů

clear - specifikace způsobu obtékání obrázků left - obtékány budou obrázky uložené vlevo right - obtékány budou obrázky uložené vpravo all - pokračuje se až pod všemi obrázky

Dalším užitečným a často používaným příkazem je značka <CENTER> ... </CENTER>, pomocí které můžete formátované objekty (text, obrázky, tabulky) vodorovně zarovnat na střed.

Často používaná je nepárová značka <HR> vytvářející vodorovnou čáru v textu. Také tato značka může mít řadu nepovinných parametrů. Zase ovšem platí, že starší verze prohlížečů nemusí podporovat všechny.

<HR size="5" width="90%" noshade src="1.gif" align="right" clear="all"> size - tloušťka čáry v pixelech (zobrazovaných bodech) width - délka čáry udaná buď počtem pixelů nebo relativní šířkou v procentech (vztaženo na aktuální šířku okna) noshade - zákaz vytvoření stínu - čára se nebude jevit plasticky src - URL grafiky, kterou má být realizována dělící čára align - způsob umístění čáry v okně

left - zarovnání k levému okraji (implicitní) right - zarovnání k pravému okraji center - zarovnání do středu

clear - specifikuje způsob obtékání obrázků left - obtékány budou obrázky umístěné vlevo right - obtékány budou obrázky umístěné vpravo all - pokračuje se až pod všemi obrázky

Příkaz <BLOCKQUOTE> ... </BLOCKQUOTE> (a jeho kratší verze <BQ> ... </BQ>) je párová značka pro citovaný text. Typicky je text odsazen od levého i pravého okraje s mezerou před a za blokem citovaného textu. Některé prohlížeče ho ještě zvýrazňují zúženými řádky. Uvnitř tohoto příkazu je možné použít všechny ostatní značky.

Seznamy Další kapitolou (logické) sazby textu v HTML jsou seznamy. Jejich tvorba je celkem jednoduchá a přispívají k přehlednosti dokumentu. Používají se tři různé typy seznamů. A to číslovaný, nečíslovaný a seznam definic.

Číslovaný seznam se vytvoří párovou značkou <OL> ... </OL> která obklopuje značky jednotlivých položek seznamu <LI>. Značka je sice též párová, ale koncové značky se obvykle vypouští. Nověji lze použít i další párovou značku <LH>, která definuje záhlaví seznamu jako nadpis seznamu .

Nečíslovyný seznam tvoří příkaz <UL> ... </UL> a značka pro jednotlivé položky je stejná jako v číslovaném seznamu, tedy <LI>, rovněž jako značka pro záhlaví seznamu <LH>.

Seznam definic ohraničuje značka <DL> ... </DL> Jednotlivé položky jsou tvořeny ze dvou částí. A to definovaným pojmem, který uvozuje značka <DT> a jeho popisu uvozeném značkou <DD>.

Všechny typy seznamů lze kombinovat a vnořovat do sebe. Graficky seznamy vypadají tak, že je vynechán prázdný řádek před a za seznamem. Jednotlivé položky jsou odsazeny. Jednotlivé typy seznamů mají také spoustu atributů, které jejich vzhled ovlivňují. Atributy lze zapsat do značek <OL> a <UL>, ale i do značky <LI>. Používaných atributů je několik, ale některé prohlížeče si přidávají své vlastní. Ze standardních uvedu align a clear. Jejich hodnoty a účinky jsou uvedeny u příkazů výše. Dalším atributem je type, který určí způsob číslování nebo značení položek. Nepovinný atribut start určuje, kterým číslem začne číslování seznamu.

<OL type="a" start="1"> - způsob číslování položek seznamu a - malými písmeny abecedy - a,b,c A - velkými písmeny abecedy - A,B,C i - římskými číslicemi (malá písmena) - i, ii, iii I - římskými číslicemi (velká písmena) - I, II, III 1 - arabskými číslicemi (implicitní) - 1, 2, 3

<UL type="circle"> vzhled grafických symbolů zahajujících položky seznamu

• disk - plné tečky (implicitní) o circle - prázdná kolečka square - čtverečky

Kromě všech těchto příkazů existuje ještě sada speciálních příkazů určených k formátování matematických vzorců. Starší prohlížeče tyto příkazy nepodporují a běžní uživatelé na ně narazí jen zřídka. Proto je prozatím vynechám.

Autor, který text na stránce formátuje by měl dodržovat alespoň základní pravidla. Jedno z nich např. říká, že řádek běžně velikého textu, který má více jak 60 - 65 písmen na jednom řádku se pro čtenáře stává těžko čitelným a velmi unavuje.

© Marek Bryl 2000

Symboly a speciální znaky Dříve než si řekneme, jak napsat některé "nedostupné" znaky, povíme si, které znaky dostupné jsou. Napsat lze jen znaky, které jsou v tzv. znakové sadě. Z historicko-technických důvodů obsahuje taková sada pouze 256 znaků (8 bitová). Celá problematika vyjadřování znaků je pro laiky velice složitá a tak se ji vyhneme. Vpodstatě je znak vyjádřen číslem od 0 do 255. Textový dokument tedy vlastně neobsahuje písmenka, ale osmibitová čísla. Podle používané znakové sady je jim systémem přiřazen odpovídající znak. Pokud autor textu použil systém s jinou sadou než čtenář a dokument neobsahuje informaci, v které znakové sadě byl vytvořen, některá písmena (především s čárkami a háčky) nebudou správná.

Časem vznikaly různé sady tak, aby lépe vyhověly různým národním abecedám, neboť ty často obsahují spoustu odlišných speciálních znaků. (Jen pro češtinu existuje asi 8 sad, např.: ASCII, Windows, ISO 8859-2, Kamenici, PC

Latin 2, KOI 8 CS). Počítačové firmy se tuto situaci pokusily vyřešit zavedením nové rozsáhlejší znakové sady, která obsahuje snad všechny známé znaky, včetně orientálních písem. Tato sada se jmenuje Unicode. Ovšem zatím se zdá, že to přispělo ještě k většímu zmatku.

Používat můžeme tedy pouze ty znaky, které jsou obsaženy v té které znakové sadě. Proto jsme se znakovou sadu definovali na začátku html souboru v hlavičce. Tento odkaz obsahuje ukázku tří znakových sad. Myslíte, že tam najdete písmeno, které potřebujete napsat? O tom, jak využít jazyka HTML pro snazší vypsání speciálních znaků si povíme teď.

Možná Vás už napadlo, jak na stránce zobrazit některé znaky, kterými se uvozují příkazy (<>&;"), nebo nejsou na klávesnici (speciální znaky). Tento problém se řeší použitím tzv. speciálních symbolů. Speciální symbol se skládá z uvozovacího znaku & (end, ampersand) a je ukončen středníkem. Uvedeme si teď ty nejpoužívanější... &amp; &nbsp; &brvbar; &copy; &reg; &#153; &deg; &plusmn; &para; &sect; &lt; &gt; &qout; &shy;

& znak "and" neoddělitelná mezera ¦ horizontální dělící čára © copyright ® registered ™ trade mark ° stupeň (Celsia ap.) ± značka plus/mínus ¶ znak zalomení odstavce § paragraf < levá lomená závorka > pravá lomená závorka " uvozovky - spojovník

A velká spousta dalších, jestli je však zvládne prohlížeč, to závisí na stáří jeho verze. Dají se takto nahradit např. matematické symboly a písma (integrál, suma, ...), řecká písmena, přehlasovaná a jiná písmena s akcenty z různých abeced, i grafické symboly známé z W9x ap. Pro ukázku následuje větší množství symbolů, které jsou ale z těch nejjednodušších (pro starší prohlížeče). &lt; &gt; &quot;

< levá šípová závorka > pravá šípová závorka " uvozovky

&Iuml; &ETH; &Ntilde;

Ï capital I, dieresis or umlaut mark Ð capital Eth, Icelandic Ñ capital N, tilde

&nbsp; &iexcl; &cent; &pound; &curren; &yen; &brvbar; &sect; &uml; &copy; &ordf; &laquo; &not; &shy; &reg; &macr; &deg; &plusmn; &sup2; &sup3; &acute; &micro; &para; &middot; &cedil; &sup1; &ordm; &raquo; &frac14; &frac12; &frac34; &iquest; &Agrave; &Aacute; &Acirc; &Atilde; &Auml; &Aring; &AElig; &Ccedil; &Egrave; &Eacute; &Ecirc; &Euml; &Igrave; &Iacute; &Icirc;

no-break space ¡ inverted exclamation mark ¢ 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 ® 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 ¿ 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

&Ograve; &Oacute; &Ocirc; &Otilde; &Ouml; &times; &Oslash; &Ugrave; &Uacute; &Ucirc; &Uuml; &Yacute; &THORN; &szlig; &agrave; &aacute; &acirc; &atilde; &auml; &aring; &aelig; &ccedil; &egrave; &eacute; &ecirc; &euml; &igrave; &iacute; &icirc; &iuml; &eth; &ntilde; &ograve; &oacute; &ocirc; &otilde; &ouml; &divide; &oslash; &ugrave; &uacute; &ucirc; &uuml; &yacute; &thorn; &yuml;

Ò 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 Ü 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 í 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 þ small thorn, Icelandic ÿ small y, dieresis or umlaut mark

© Marek Bryl 2000

Odkazy a mapy Teď se konečně podíváme, jak se dělají odkazy. Odkaz se vytvoří pomocí párové značky <A> ... </A>. Uvnitř značek je text nebo obrázek, který slouží jako samotný odkaz. Cíl odkazu určuje parametr href. Adresa může být absolutní nebo relativní.

Relativní adresa je "částečná" adresa. Určuje umístění odkazovaného dokumentu nebo grafiky ve vztahu k aktuálnímu dokumentu, resp. jeho umístění. Pokud je odkazovaný dokument ve stejném adresáři (složce), napíše se jako hodnota parametru pouze jméno odkazovaného souboru. Pokud je ještě zanořen do adresářů, uvede se celá tato cesta. Ještě připomenu, že pokud je třeba dostat se do nadřazeného adresáře, musíme použít ve specifikaci cesty dvě tečky. Př.: <A href="../adresar/obrazky/obr1.gif">

U absolutní adresy uvádíme celou URL adresu dokumentu. Absolutní adresu musíme použít v případě, že se soubor nachází na jiném serveru (nejčastěji odkazy na jiné stránky). Pokud za posledním adresářem není specifikován konkrétní soubor, tak se prohlížeč pokusí v daném adresáři najít a zobrazit některý ze souborů index.htm nebo default.htm (případně *.html). To se využívá hlavně pro úvodní stránky. Když se takto totiž pojmenuje úvodní stránka, nemusí se uvádět jméno tohoto souboru do adresy. Př.: <A href="http://www.server.cz/firma/prezentace/grafika/logo.gif">

Text, který slouží jako odkaz je standardně podtržen a má modrou barvu. Odkaz, který jsme již dříve navštívili, má implicitně barvu fialovou a právě aktivní odkaz je červený. Informaci o tom, které odkazy jsme již navštívili uchovává Vás prohlížeč v závislosti na jeho nastavení. Pochopitelně lze tyto informace odstranit. U obrázků je to stejné, jen jsou zvýrazněny orámováním v barvě odkazu. Jak lze tuto skutečnost ovlivnit, si řekneme v kapitole o grafice.

Jak změnit barvy odkazů jsme si již řekli u příkazu <BODY>, jsou to konkrétně atributy link (nenavštívený), vlink (navštívený) a alink (aktivní). Podtržení textu lze rušit např. pomocí definice stylů. Ale o tom až na závěr.

Užitečným atributem je vlastnost title. Hodnotou atributu je text, který se v dokumentu zobrazí při najetí kurzoru myši nad odkaz jako "hint", nápovědný text v rámečku u kurzoru. Př.:

Odkaz na naše stránky.

Odkaz na <A href="http://www.savci.upol.cz" title="Stránky o savcích">naše stránky</a>.

Podobně se chová prvek onmouseover. Jeho hodnota se zobrazí na stavové liště okna vlevo dole. Aby text zmizel, když kurzor už není nad odkazem, je třeba ještě doplnit příkaz o prvek onmouseout. Př.:

pokusný odkaz s mouseover

pokusný <A HREF="URL" onmouseout="window.status=''; return true" onmouseover="window.status='pokusný text na liště'; return true">odkaz</a> s mouseover

Jestliže se chcete odkázat na určité místo nějakého dokumentu, nebo na jiné místo téže stránky, musíme použít bookmark - záložku. Nejprve se tedy musí vytvořit záložka a to pomocí vlastnosti name. Mezi značkami nemusí sice být žádný text, ale pokud nějaký text mezi značky uvedete, lépe se "odroluje" stránka na ten správný řádek. Př.:

<A name="nadpis1">NADPIS</a>

Na takto vytvořenou záložku se lze odkazovat příkazem:

<A href="#nadpis1>část 1.</a>

Nebo pokud odkazujete na jiný než aktuální dokument:

<A href="firma/uvod.htm#nadpis1>část 1.</a>

Při vytváření odkazu na záložku, musí být před jejím jménem znak "#", jinak by se prohlížeč snažil interpretovat jméno záložky jako jméno souboru. V jednom dokumentu nesmí být více záložek stejného jména a při odkazování by se měla dodržovat velikost písma.

Posledním atributem je target. Ten definuje jméno okna, kam se má načíst odkazovaná stránka. Tento atribut se používá zejména při použití rámů a nebo třeba pokud chcete, aby se odkazovaná stránka otevřela v novém okně. Pak stačí když do parametru target napíšete hodnotu _blank.

Když potřebujete na stránky umístit odkaz s mailovou adresou tak, aby se po odkliknutí odkazu zobrazilo okno poštovního klienta, musíte specifikovat parametr href pomocí metody mailto. Např.:<A href="mailto:savci@upol.cz">náš e-mail: savci@upol.cz</a>

V případě, že nebude odkazovaný soubor dokument typu *.htm (*.html ap.) nebo grafický soubor, prohlížeč nabídne jeho uložení na disk. Můžete tak snadno odkazovat na soubory (dokumenty, archivy, programy - doc, xls, txt, zip, rar, arj, exe, com atd.), které si může uživatel "stáhnout" a uložit na pevný disk.

Obecně platí, že by se měly odkazy používat střídmě. Mějte na paměti, že náhodný návštěvník se ve struktuře vašich stránek nevyzná tak jako Vy a mohl by se snadno ztratit. Učebnicový pověstný příklad nevhodně volené věty zní "Zajímavý odkaz najdete zde". Z odkazu by mělo být poznat, co lze za ním očekávat.

Odkazové mapy Možná jste se již setkali s obrázkem, který sloužil jako odkaz, přičemž jednotlivé části obrázku odkazovali na různá místa. Podívejte se, jak lze jednoduše nadefinovat aktivní oddíly na vloženém obrázku pomocí párového příkazu <MAP> a vlastnosti name. Myslím, že k tomu nemusím příliš dodávat, snad jen že musíte hranice určit pomocí souřadnic jednotlivých bodů. Ty se vždy vztahují na obrázek, který jste definovali a nezáleží tak na jeho pozici na stránce.

<MAP name="jméno_mapy"> <AREA shape="circle" coords="150, 100, 50" href="uvod.htm"> <AREA shape="rect" coords="200, 200, 350, 250" href="back.htm"> <AREA shape="poly" coords="300, 100, 500, 50, 500, 150, 400, 100, 450, 150" href="color.htm"> <AREA shape="default" nohref> </MAP>

<IMG src="csim.gif" usemap="#jméno_mapy">

Příkaz <AREA> definuje tvar oblasti pomocí atributu shape s možnými hodnotami circle - kruh, rect - pravoúhelník a poly (někdy polygon) - mnohoúhelník. Atribut coors definuje souřadnice jednotlivých bodů. Nejprve ve vodorovném směru a poté ve svislém. Počátek souřadnic je horní levý roh obrázku. U kruhové oblasti se nejprve definuje střed a poté poloměr. U pravoúhelníku se definuje levý horní a pravý spodní roh. Kam bude odkaz směřován vyjádříme pomocí známého atributu href.

Pokud se dvě oblasti překrývají, platná bude ta, která byla nadefinovaná dříve. Zbylou plochu obrázku určíme atributem default a pokud nechceme, aby nějaká definovaná plocha obsahovala odkaz, pak místo atributu href použijeme nohref. Pomocí tohoto atributu můžeme i definované plochy "odečítat" a tak třeba uvnitř kruhu nadefinovat plochu bez odkazu.

Atribut alt příkazu <IMG> nese alternativní text, kterým se nahrazuje grafika v případě, kdy prohlížecí program neumí nebo nesmí zobrazovat grafiku. Nezapomeňte uvést u "namapovaného" obrázku do atributu usemap jméno mapy (uvozené mřížkou #), jinak by prohlížeč nevěděl, k čemu se definice odkazů vztahují.

© Marek Bryl 2000

Grafika na stránkách S grafikou jsme se již setkali u značky <BODY> u parametru background. Ještě jednou připomenu, že se pomocí tohoto atributu nastaví pozadí stránky, resp. jaký obrázek bude na pozadí. Pokud bude menší než stránka, bude se opakovat dlaždicovým způsobem. Toho lze využít k různým efektům. Častou chybou začátečníků je, že použijí velice výrazné nebo křiklavé pozadí, ve kterém se text ztrácí.

Vlastní obrázky se do dokumentu vkládají pomocí nepárové značky <IMG>. Příkaz má jeden povinný atribut a několik nepovinných. Povinný atribut src je tzv. lokátor obrázku, to znamená, že udává cestu k zobrazovanému grafickému souboru. Pro zapsání adresy platí stejná pravidla jako pro odkazy. Může být tedy relativní (doporučuji), nebo absolutní. Nedoporučuje se používat grafiku umístěnou na jiném serveru, než je samotná stránka, nemusela by být vždy dostupná. Celý příkaz může vypadat takto: <IMG src="obrazky/obr1.gif">

Novější verze prohlížečů používají také atribut lowsrc. Ten odkazuje na adresu konceptové grafiky. Prohlížeč nejprve přenese konceptový obrázek, pak dokompletuje celý dokument a až poté začne přenášet plné verze obrázků zadané atributy src. Tato "finta" je však efektivní pouze v případě, že je "náhradní dočasný" grafický soubor velice malý a pochopitelně pokud je tento atribut podporován prohlížečem.

Dalším atributem je alt. Jeho hodnotou je alternativní text k obrázku. Text se zobrazuje místo grafického souboru v případě, že je soubor nedostupný nebo prohlížeč neumí zobrazit daný formát souboru, když prohlížeč grafiku nezobrazuje (textový klient pro nevidomé, které text převádí do mluvené řeči), nebo když má uživatel pro zrychlení načítání stránek zobrazování obrázků zakázáno. Alternativní text se také zobrazí jako "hint" - nápovědný text, když nad obrázek najedete kurzorem myši.

Jesti nápovědný text použijete, závisí na vašem uvážení. V některých situacích (např. různé oddělovače, ikony ap.) je to zbytečné a nevhodné, jinak je to velice užitečná pomůcka pro návštěvníky. Proto se snažte o maximální výstižnost a stručnost popisného textu. Podívejte se na příklad využití alternativního textu (v prvním případě je špatně adresa).

<IMG src="braz.jpg" alt="Slunečnice"> <IMG src="obraz.jpg" alt="Reprodukce obrazu Slunečnice">

Atribut align umožňuje nastavit umístění (zarovnání) obrázku na stránce. Ovlivní se tím také mimo polohy obrázku na stránce i způsob jakým jej bude obtékat text. Je dobré říci, že obrázky se chovají jako velké počáteční písmeno, tzn. jsou součástí textu který je obklopuje. To je často matoucí, především když je obrázek velký.

<IMG src="obraz.jpg" align=""> top - horní okraj grafiky bude zarovnán s horním okrajem aktuálního řádku textu

midlle - střed grafiky bude zarovnán na účaří (základní linku) aktuálního řádku textu bottom - dolní okraj grafiky bude zarovnán se spodním okrajem aktuálního řádku textu left - vodorovné umístění k levému okraji, text obtéká grafiku zprava right - vodorovné umístění k pravému okraji, text obtéká grafiku zleva

Následující hodnoty podporují až novější verze prohlížečů

texttop - horní okraj grafiky bude zarovnán s horním okrajem textu na řádku absmiddle - střed grafiky bude zarovnán na střed aktuálního řádku textu baseline - dolní okraj grafiky bude zarovnán na účaří aktuálního řádku textu absbottom - dolní okraj grafiky bude zarovnán se spodním okrajem aktuálního řádku textu

Dalšími užitečnými atributy jsou width pro určení šířky a height pro určení výšky obrázku. Lze tak předem nastavit, v jaké velikosti se má obrázek vykreslit. Pokud zadáme menší hodnoty, než jaká je skutečná velikost obrázku, prohlížeč ho zmemší a naopak. Hodnotu můžeme zadat buď v procentech (vztaženo k aktuální velikosti okna), nebo absolutně v pixelech - obrazových bodech.

Musíme ovšem počítat s tím, že když chceme měnit rozměry obrázku, musíme dát pozor na správný poměr stran. Změnou velikosti také dojde ke snížení kvality obrázku. Pokud uvedeme jen jednu hodnotu, prohlížeč druhou změní ve správném poměru, ale na druhou stranu musí čekat na načtení obrázku. A teď několik příkladů:

<IMG src="obraz.jpg" width="79" Height="100"> (původní rozměry) <IMG src="obraz.jpg" width="58" Height="75"> <IMG src="obraz.jpg" width="95"> <IMG src="obraz.jpg" width="100" Height="75"> <IMG src="braz.jpg" width="79" Height="100" alt="nenačtený obrázek s danými rozměry"> <IMG src="braz.jpg" alt="nenačtený obrázek bez rozměrů s popisem">

Použití těchto atributů není povinné, ale doporučuje se používat, i když rozměry obrázku nebudete měnit. Při načítání stránky si totiž prohlížeč pro obrázek vyhradí místo předem a načte ihned text na to "správné" místo. Pokud tento údaj chybí, pak v horším případě prohlížeč čeká na načtení obrázku a poté teprve zobrazí text. V lepším případě nejprve zobrazí text (často se zástupným symbolem místo obrázku) a pak do něho vloží obrázek, což vede k "odskočení" textu. Pokud navíc použijete atribut alt, vyhradí se nejprve prostor o velikosti textu tohoto atributu.

Posledním standardním atributem, o kterém se zmíním je border. Tento atribut určuje, jestli bude kolem obrázku vykreslen rámeček. Hodnota atributu určuje šířku čáry rámečku. Pokud je nulová, tak rámeček není vykreslen. Ovšem pokud atribut neuvedete, tak se standardně rámeček nevykresluje. Jiný případ nastane, když použijete obrázek jako odkaz. V tomto

případě se implicitně vykresluje rámeček kolem obrázku o tloušťce jednoho bodu v barvě odkazů. Atributem border lze sílu rámečku nastavit, nebo okraj zakázat úplně (hodnotou nula). Někdy by totiž rámeček rušil grafický design stránky.

<IMG src="obraz.jpg" border="5"> <a href="_logo.htm"><IMG src="obraz.jpg"></a> <a href="_logo.htm"><IMG src="obraz.jpg" Border="0"></a>

Atributy hspace a vspace určují o kolik bodů horizontálně či vertikálně odsadí okraje obrázku od okolních objektů či textu. Existují i další atributy obrázků, ale tyto pro začátek plně stačí. Většinou nepoužijete všechny najednou.

Na závěr ještě jeden příklad definice obrázku. Obrázek je zarovnaný k pravému okraji, a aby ho celý text odstavce obtékal zleva, musí být příkaz před začátkem tohoto odstavce.

Někdy je třeba z různých důvodů začít text dalšího odstavce až na řádku pod obrázkem. Protože je však obrázek vyšší než je prostor vyplněný textem, máme problém. Použití "odřádkování" volného místa je nebezpečné, protože v různě velkých oknech je prostor pro text různě velký. Rovněž použití příkazů pro odstavce třeba i s atributy pro zarovnání selhává. Zdánlivě beznadějnou situaci řeší známý příkaz <BR> s atributem clear. V tomto případě by tedy pomohl příkaz <BR clear="right">. Další způsobem by bylo použití tabulek. A teď ještě zdrojový příkaz k obrázku vpravo: <IMG src="obraz.jpg" alt="obrázek zarovnaný do prava" align="right" border="0" width="79" height="100">

Pokud se rozhodnete na stránku umístit nějakou grafiku, myslete na jeji velikost. Asi nikdo nebude čekat, až se na Vaší stránce načte veliká fotografie, zvlášť když je připojení uživatele pomalé ap. Velikost dokumentu (včetně grafických souborů) by neměla příliš přesahovat 100 kB. Doporučená maximální velikost je kolem 50 kB a méně. Je také vhodné místo velké fotografie umístit na stránku její zmenšeninu - náhled, který bude odkazem na originální velkou fotografii. Zmenšeniny nemusí být kvalitní a tak mohou být i více komprimované, případně černobílé. A nezapomeňte na ještě jednu důležitou věc - vkus.

Grafické formáty Na úplný závěr této kapitoly se ještě zmíním o grafických formátech, kterých existuje nepřeberné množství. S trochou nadsázky lze říci, že každý grafický program má svůj vlastní formát. Principiálně rozlišujeme dva typy grafických formátů - rastrové (bitmapové) a vektorové.

Vektorové ukládají informaci o obrázku pomocí vektorových definic přímek a křivek. Obrazové soubory jsou poměrně malé, ale hlavně je lze zvětšovat a zmenšovat a stále mají správné proporce a ostré hrany. Na internetu se pokud vím příliš nepoužívají, také proto, že se nehodí na složitější grafiku a pro fotografie je jejich použití nemožné.

Rastrové obrázky uchovávají informaci o obrázku v podobě pravoúhlého pole složeného z jednotlivých barevných bodů. Při velkém zvětšení zjistíme, že se jednotlivé tvary skládají z "kostiček". Formáty souborů se navzájem liší použitou kompresní metodou a hloubkou barev. Obojí se projevuje na výsledné velikosti souboru a jeho kvalitě. Velikost souboru ovlivňují samozřejmě vlastní rozměry obrázku.

Pokud je hloubka barev jednobitová, postačí na zobrazení dvou barev (obvykle černá a bílá). Se čtyřmi bity lze zobrazit 16 barev. Šestibitová hloubka se používá pro 64 barev, což se využívá hlavně pro monochromatické a černobílé obrázky. Osm bitů je třeba na zobrazení 256 barev.

Ve skutečnosti je to ještě složitější, protože tyto bity nejsou využity k popisu konkrétní barvy, ale pouze určují pořadí barvy v tzv. barevné paletě. Nutno podotknout, že v paletě mohou být libovolné barvy z 218 (262 144) možných barevných odstínů. (počet na 218 omezen převodníky analogových monitorů; barva je vyjadřována 6 bity pro každou ze tří složek barvy, nověji 8 bity, kdy je zobrazitelných 224 tedy 16,77 mil. barevných odstínů - truecolor).

U grafických formátů, které obsahují více barev než je 256 se paleta nepoužívá a informace o barvě se se vyjadřuje přímo. Aby toho nebylo málo, situaci ještě komplikuje systémová barevná paleta ve Windows. Pokud máte nastaven operační systém na 256 nebo dokonce 16 barev, nezobrazí jiné barvy, než má v paletě.

Tolik tedy teorie. Pokud chceme aby naše grafika nebyla zbytečně objemná, musíme zvolit vhodný formát a hloubku barev. Naprosto nepoužitelným formátem pro internet jsou nekomprimované bitové mapy (*.bmp), protože jsou neúnosně veliké.

Nejpoužívanější je formát GIF (soubory *.gif). Pracuje s paletou, proto je maximum 256 barev při 8 bitové hloubce. Hodí se tedy na grafické objekty, které neobsahují příliš mnoho barevných odstínů (na druhou stranu i jednodušší fotografie vypadají obstojně (ale soubor je větší a méně kvalitní, než při použití jpg)). Pokud obsahuje velice málo barev, je možné snížit barevnou hloubku. Tím že se zmenší paleta ale hlavně počet bitů určujících barvu z palety (např. 16 barev 4 bitová hloubka), soubor se znatelně zmenší.

Tento formát navíc umožňuje ve své novější verzi nastavit jednu barvu jako průhlednou - transparentní. A také umožňuje vytvářet jednoduché animace pomocí střídajících se jednotlivých obrázků obsažených v souboru. Formát GIF je proto velice oblíbený a používaný.

Pro fotografie je neideálnější formát JPEG (soubory *.jpg). Takový soubor může obsahovat několik tisíc barev najednou (max 224). JPEG rozloží obrázek na tři základní barevné složky (purpurová, žlutá, mageta) do tří rovin - monochromatických obrázků. Následně se provede redukce pixelů v každé rovině (např. 2x2 bude 1) a na závěr se zkomprimují. Komprese je tedy ztrátová a projeví se nejvíce na ostrosti hran a na velkých jednobarevných plochách. Snížení počtu barev je zbytečné a neúčinné. Zmenšit soubor lze zvětšením kompresního poměru, nebo zmenšením rozměrů obrázku. Při použití černobílého JPEG se uchovává informace pouze o jedné barevné rovině a tak je soubor také patřičně menší.

© Marek Bryl 2000

Tabulky Tabulky jsou velice mocným nástrojem při tvorbě internetové stránky. Nemusí totiž sloužit jen jako datové tabulky v dokumentu, ale lze je využít pro formátování celé stránky. Lze do nich umístit různě dlouhý text, obrázky, formuláře, ale i jiné tabulky ap. Pomocí tabulek lze docílit toho, že tyto prvky budou vždy na svém místě. Tabulky jsou proto velice využívaný konstrukční prvek při vytváření stránek. Mimochodem tento text je také v tabulce :-)

Tabulku vytvoříme pomocí několika značek. Celou tabulku ohraničuje párová značka <TABLE> ... </TABLE>. Pokud příkaz pro tabulku zapomenete uzavřít, nebude zobrazena vůbec. Tabulka se definuje po řádcích. Řádek se vytvoří párovým příkazem <TR> ... </TR>, tedy Table Row. Do každého řádku se poté zadávají jednotlivé buňky. K tomu slouží značka <TD> ... </TD>, Table Data. Obsahem buňky může být jakýkoliv objekt a to i další tabulka.

Ve všech řádcích by měl být stejný počet buněk, i když jsou některé z nich prázdné. Značku, která zakončuje buňku a řádek lze i vynechat, ale to nedoporučuji. Pokud je tabulka celkem jednoduchá, nic se nestane. Ale pokud obsahuje další tabulky, nemusí to prohlížeč správně interpretovat a pak do dopadne katastrofálně. Navíc Zdrojový kód tabulky s řádně zakončenými buňkami a řádky je přehlednější.

Příklad jednoduché tabulky: <TABLE>

<TR> <TD>1. buňka, 1. ř.</TD> <TD>2. buňka, 1. ř.</TD>

</TR> <TR>

<TD>1. buňka, 2. ř.</TD> <TD>2. buňka, 2. ř.</TD>

</TR> </TABLE>

1. buňka, 1. ř. 2. buňka, 1. ř. 1. buňka, 2. ř. 2. buňka, 2. ř.

Na první demonstrační tabulce jsem se dopustil jisté nepřesnosti. Nechal jsem zde vykreslit okraje tabulky. Pokud by se totiž tabulka zadala uvedeným způsobem, její okraje by nebyly vidět. Tuto vlastnost tabulky ovlivňuje atribut border značky <TABLE>, jehož hodnota určuje šířku hranice buňky. Pokud se atribut neuvede, je hodnota "0". Pokud se do značky zapíše atribut bez hodnoty, je jeho hodnota "1". Podívejme se tedy na účinek tohoto parametru. Všimněte si, že vnitřní hranice mezi buňkami tento atribut neovlivňuje.

<TABLE>

<TABLE border="1">

<TABLE border="0">

<TABLE border="10">

1. buňka 2. buňka 3. buňka 4. buňka

1. buňka 2. buňka 3. buňka 4. buňka

1. buňka 2. buňka 3. buňka 4. buňka

1. buňka 2. buňka 3. buňka 4. buňka

Na uvedených příkladech tabulek jsem se dopustil ještě jedné nepřesnosti. U tabulek lze totiž zadat jejich rozměry. A to jak pro celou tabulku, tak i pro jednotlivé buňky. Pokud se rozměry neuvedou, zaujme tabulka

buňky, je zalomen na více řádků.

Šířku a výšku tabulky ovlivňují parametry width a height příkazu <TABLE>. Rozměry mohou být zadány absolutně v pixelech nebo v procentech. V druhém případě je rozměr vztažen k aktuální šířce okna prohlížeče, nebo pokud je tabulka uvnitř buňky jiné tabulky, tak je vypočten ze šířky této buňky. V případě, že je šířka tabulky větší, než šířka okna, bude mít okno pochopitelně vodorovný posuvník, ap. Pokud jsou rozměry buněk větší, nebo chybně zadaná procenta nedávají součet buněk na řádku 100%, jsou rozměry buněk přepočítány v daném poměru.

Podívejte se na dva příklady tabulek, kde v první nejsou rozměry nijak definovány. V druhé je nastavena šířka tabulky a velikost první buňky v procentech. Rozměr buněk na dalším řádku je přizpůsoben buňce na prvnímu řádku. Všimněte si také, že pokud buňka neobsahuje žádný text, nebo jiný objekt, není vykreslena. Pokud se tato vlastnost právě nehodí, lze ji obejít zapsáním tvrdé mezery do prázdné buňky.

<TABLE border="1"> <TR>

<TD>zde je text uvnitř první buňky</TD> <TD>druhá</TD>

</TR> <TR>

<TD></TD> <TD>&nbsp;</TD>

</TR> </TABLE>

zde je text uvnitř první buňky druhá

<TABLE border="1" width="150"> <TR>

<TD width="50%">zde je text uvnitř první buňky</TD> <TD>druhá</TD>

</TR> <TR>

<TD></TD> <TD>&nbsp;</TD>

</TR> </TABLE>

zde je text uvnitř první buňky

druhá

Dalším atributem příkazu <TABLE> je align, který slouží k zarovnání tabulky na stránce. Hodnotami atributu jsou left, center a right pro zarovnání vlevo, na střed a vpravo. Nověji lze použít i hodnotu justify pro text roztažený do bloku. Zajímavými atributy jsou cellspacing, který určuje mezeru mezi buňkami a cellpadding, určující mezeru mezi vnitřním okrajem buňky a textem. Pokud se atributy neuvedou, jsou implicitní hodnoty pro mezeru mezi buňkami "2" a pro mezeru mezi buňkou a textem "1" bod.

<TABLE cellspacing="10" cellpadding="0" border="1" width="250" height="180">

<TABLE cellspacing="0" cellpadding="12" border="1" width="250"

height="180">

Tyto dva atributy oceníte zejména když potřebujete "sesadit" v tabulce několik obrázků tak, aby navazovali a nebyly mezi nimi žádné mezery. Pochopitelně musí být i atribut border roven nule. Příkaz bude tedy bude vypadat takto: <TABLE border="0" cellspacing="0" cellpadding="0">

Příkaz <TABLE> má ještě několik zajímavých atributů. Počet sloupců v tabulce lze předem definovat parametrem cols. Způsob obtékání tabulky textem lze nastavit pomocí atributu clear s hodonotami left, right a all. Atribut nowrap zakáže zalamování textu v buňce. Existuje ještě několik dalších atributů, ale ty už se příliš nepoužívají a starší prohlížeče si s nimi neporadí.

Pomocí doplňkové párové značky <CAPTION> ... </CAPTION> lze tabulce přiřadit nadpis. Pokud se rozhodnete příkaz využít, napíšete jeho značku před definici prvního řádku tabulky. Mimo to, lze ještě využít párový příkaz <TH> ... </TH> (Table Header). Ten se zapíše místo definice buňky, tedy místo <TD>. Je to v podstatě táž značka, ovšem s tím rozdílem, že obsah takto definované buňky je chápán jako záhlaví. Text je vycentrovaný a zvýrazněný tučně.

<TABLE border="1" width="280" height="200"> <CAPTION>Nadpis tabulky</CAPTION>

<TR> <TD></TD> <TH>1.<br>sloupec</TH> <TH>2.<br>sloupec</TH>

</TR> <TR>

<TH>1. řádek</TH> <TD>123</TD> <TD>123</TD>

</TR> <TR>

<TH>2. řádek</TH> <TD>123</TD> <TD>123</TD>

</TR> </TABLE>

Nadpis tabulky

1. sloupec

2. sloupec

1. řádek 123 123 2. řádek 123 123

Možná jste si již všimli, že text uvnitř každé buňky je zarovnán doleva a vertikálně na střed. To je implicitní nastavení a samozřejmě ho lze změnit. Tuto vlastnost ovlivňují atributy align pro vodorovné zarovnání a valign pro svislé zarovnán. Oba parametry patří k příkazům <TR> a <TD>. Někdy je nutné nastavit zarovnání jen pro určitou buňku a jindy je výhodnější zadat způsob zarovnání pro celý řádek buněk. Starší prohlížeče někdy nepodporovali zarovnání u značky <TR>, proto je někdy jistější definovat konkrétní buňku v příkazu <TD>, případně zarovnání "zdvojit".

hodnoty atributu align pro vodorovné zarovnání: left (implicitní) right center

align="left" align="center" align="right"

justify (zarovnávání obou okrajů, pokud je to možné) char (zarovnání na znak, typicky desetinná čárka)

hodnoty atributu valign pro svislé zarovnání: top middle (implicitní) bottom (zarovnání k dolnímu okraji buňky) baseline (rozšíření Netscape)

valign="top"

abc abc abc

valign="middle" abc abc abc

Pokud chcete u parametru použít hodnotu char, tedy zarovnání na znak, musíte v příkazu <TD> nastavit, který znak to bude. Příkaz by mohl vypadat např. takto: <TD align="char" char="x">. Tato možnost zarovnání není ještě ve starších verzích prohlížečů podporována.

Dalším atributem příkazů <TR> a <TD> je nowrap, který zakáže lámání textu v buňce, pokud ovšem není zadána pevná šířka tabulky. Nastavit šířku a výšku buňky lze již dříve zmíněným atributem width a height v příkazu <TD>, a to opět jak absolutně v pixelech, tak i v procentech. Rozměr je pak vztažen k rozměrům celé tabulky.

Při konstrukce tabulek, je velice často třeba několik buněk sloučit do jedné. K tomu slouží atributy rowspan a colspan příkazu <TD>, které definují kolik buněk se má sloučit ve svislém nebo vodorovném směru. Tedy kolik řádků nebo sloupců se má spojit. Musíme se však uvědomit, že pokud sloučíme např. dvě buňky pod sebou, nebude se již v dalším řádku tato druhá buňka definovat vůbec. Podobně tomu je u sloučení buněk v řádku.

<TABLE border="1" width="250" height="200"> <TR>

<TD colspan="2">1 - colspan</TD> <TD rowspan="3">2 - rowspan</TD>

</TR> <TR>

<TD>3</TD> <TD>4</TD>

</TR> <TR>

<TD>5</TD> <TD>6</TD>

</TR> </TABLE>

1 - colspan 3 4 5 6

2 - rowspan

Tím by mohl končit popis vlastností a možností při konstrukci tabulek. Ale tabulky mohou být i barevné. A o tom si povíme teď. Začneme u příkazu <TABLE>. Lze totiž změnit barvy rámečku a to pomocí parametru bordercolor. Pokud chceme zachovat plastický vzhled ohraničení tabulky, použijete dva parametry - bordercolordark, pro tmavší barvu stínu rámečku a bordercolorlight pro světlejší části rámečku.

Pozadí celé tabulky lze nastavit pomocí atributu bgcolor a pomocí background lze nastavit tapetu nebo obrázek pro pozadí celé tabulky. Tyto dva atributy však nejsou standardním, tedy podporovaným prvkem ve všech prohlížečích, a proto je raději nepoužívejte. Všech pět výše jmenovaných atributů pro nastavení barvy nebo pozadí totiž obsahuje příkaz <TR> a hlavně <TD>. Pak se ovšem nastavení týká pouze daného řádku nebo buňky. I zde platí, že nejlepší je si vše vyzkoušet.

text záhlaví

nadpis vnitřní tabulky

Na závěr se ještě můžeme podívat na možnosti ohraničení buněk. Lze ještě totiž definovat, zda budou buňky ohraničeny např. jen horní a dolní ap. Ovšem toto nastavení se definuje pro všechny buňky v tabulce v příkazu <TABLE>. K tomu slouží atributy frame, který určuje způsob zobrazení vnějších obrysů tabulky a rules, který předepisuje vzhled tabulkové mřížky, tedy oddělujících čar uvnitř tabulky.

Podívejme se na možné hodnoty a účinky atributu frame:

none/void - žádný obrys (implicitní) lhs - jen levá strana

above - jen horní strana rhs - jen pravá strana below - jen dolní strana vsides - levá a pravá strana

hsides - horní a dolní strana border/box - všechny čtyři strany

A zbývá již jen atribut rules:

none - žádné čáry

all - všechny čáry (implicitní hodnota)

rows - čáry mezi řádky

cols - čáry mezi sloupci

pro úplnost dodejme, že existuje i atribut basic - vodorovné čárky mezi skupinami (THEAD, TFOOT, TBODY), které jsme si ovšem neuváděli, neboť se příliš nepoužívají

Uvedené dva atributy lze pochopitelně kombinovat a tak docílit požadovaného vzhledu. Pro názornost byly oba atributy demonstrovány jednotlivě. V prvním případě je v tabulkách pouze jedna buňka, aby více buněk neodvádělo pozornost od ohraničení tabulky. V druhém případě bylo ponecháno ohraničení celé tabulky (jak jej zrušit již víme). Jednotlivé buňky jsou pro názornost podbarveny.

© Marek Bryl 2001

Rámy - frames Použití rámů umožní rozdělit okno prohlížeče na několik částí - rámů (frames). V každém rámu může být zobrazena jiná stránka a dokonce zůstane zachováno nastavení globálních vlastností (barvy odkazů, kódové stránky ap.) pro každou tuto stránku.

Rámy se používají, chceme-li např. mít zobrazeny v jednom okně dvě nebo více stránek nezávisle na sobě. Nejčastějším využitím jsou různé rozcestníky, kdy v jednom rámu je rozcestí, které zůstává stále viditelné a na stejném místě a do druhého rámu se načítají odkazované stránky.

Na použití rámů existuje několik názorů a někteří je považují za nevhodné. Mezi nevýhody rámů totiž patří to, že se stránky s rámy obtížně pamatují v bookmaks (oblíbené položky). Když si totiž uživatel chce uložit stránku s rámy, neuloží se aktuální stránka na kterou se "proklikal", ale původní nastavení rámů, tak jak to bylo při prvním načtení stránky s rámy. Programátor zase ze stejného důvodu nemůže dát odkaz na zanořenou stránku tak, aby se načetla jako stránka začleněná v nadřazených rámech.

Další nevýhodou je jistá nepřehlednost. V okně je aktivní vždy pouze jeden rám. K němu se vztahují nabídky z menu a klávesové příkazy. Někdy tedy může uživatele tato vlastnost obtěžovat, když chce např. posunout jednu stránku dolu a posune se mu ta druhá, protože byla právě aktuální.

Především z těchto důvodů se někteří autoři snaží rámům vyhýbat a nahrazují je tabulkami. Ovšem tabulky neumožňují nezávislý pohyb dvou částí dokumentu. Pokud tedy zrealizujete rozcestník pomocí tabulky, bude se pohybovat i s dokumentem a navíc bude muset být tato tabulka v každém odkazovaném dokumentu.

A teď si povíme, jak se rámy definují. Nejprve je třeba vytvořit základní dokument, který bude definovat rozložení rámů. Rámy se nadefinují uvnitř párové značky <FRAMESET> ... </FRAMESET>. Tento dokument nebude obsahovat tělo dokumentu a tak ani značku <BODY>.

Rozdělení okna na rámy se definuje pomocí parametrů cols (pro sloupce) a rows (pro řádky). Hodnotou parametrů je výčet rozměrů jednotlivých rámů oddělený čárkami. Hodnoty lze zadat v procentech nebo absolutně v obrazovkových bodech. Třetí možností je hvězdička "*". Rám s touto hodnotou zabere celý zbytek prostoru, který není obsazen jinými rámy.

Pokud chceme rozdělit okno na tři svislé rámy, z nichž první bude mít šířku 200 bodů, třetí bude mít 25% střední zabere zbytek prostoru, nadefinujeme rámy takto:

<FRAMESET cols="100,*,25%"> ... zbytek definice rámů...

</FRAMESET>

Pro rozdělení na vodorovné rámy, použijeme analogicky atribut rows. Pokud tyto atributy uvedeme společně, dosáhneme rozdělení okna na mřížku:

<FRAMESET cols="120,100,*" rows="200,200,*"> ... zbytek definice rámů...

</FRAMESET>

Když chceme okno rozdělit na rámy nepravidelně, můžeme toho dosáhnout vnořením příkazu pro definici rámů. Např.:

<FRAMESET cols="100,300,*"> ...obsah prvního rámu... <FRAMESET rows="250,*">

...obsah druhého rámu, první části...

...obsah druhého rámu, druhé části... </FRAMESET> ...obsah třetího rámu...

</FRAMESET>

Druhou možností je vytvořit dva dokumenty s rozvržením rámů, kdy se první dokument (v našem případě v části definice druhého rámu) bude odvolávat na ten druhý. Př.:

1. dokument: <FRAMESET cols="100,300,*"> ...obsah prvního rámu... obsah druhého rámu, který je definován v 2. dokumentu...obsah třetího rámu... </FRAMESET>

2. dokument: <FRAMESET rows="250,*"> ...obsah druhého rámu, první části... ...obsah druhého rámu, druhé části... </FRAMESET>

Výhodou druhého způsobu je, že lze případně načíst jiný dokument do celého středního rámu. Nevýhodou je rozložení definice do dvou souborů.

Protože neznáme předem velikost okna, kde bude stránka s rámy prohlížena, může dojít ke konfliktním situacím. Pokud je součet všech velikostí větší, než aktuální šířka nebo výška okna, budou rozměry v patřičném poměru zmenšeny. V opačném případě budou příslušně zvětšeny.

Zatím jsme definovali pouze rozložení rámů. Nyní pomocí příkazu <FRAME> nadefinujeme stránky, které se mají do jednotlivých rámů načíst. Tento příkaz se zapisuje pro každý rám - stránku mezi značky párového příkazu <FRAMESET>. Odhadnout, pro který rám je příkaz přiřazen je celkem intuitivní. Jen poznamenám, že při rozdělení okna na tabulku, se přiřazují příkazy <FRAME> jednotlivým rámům podle toho, v jakém pořadí bylo rozdělení definováno.

Nejdůležitějším atributem příkazu <FRAME> je src, jehož hodnotou je adresa souboru (html dokument, obrázek), který se načte do rámu. Adresa může být pochopitelně jak absolutní, tak i relativní.

Další atributy ovlivňují vlastnosti rámů. Atribut frameborder slouží k nastavení šířky hranice, která je mezi rámy standardně vykreslena. Pokud ji chceme zneviditelnit, nastavíme hodnotu na frameborder="0". Ovšem

stejné nastavení musí být i u sousedního rámu.

Velikost rámů nastavuje autor při jejich definici, ale standardně si návštěvník může rozměry sám pomocí myši měnit - přetahovat. Pokud tuto skutečnost chceme zakázat, použijeme atribut noresize (je bez hodnoty).

Důležitým atributem je také vlastnost scrolling, který může mít tři hodnoty - auto, yes, no. Tento atribut nastavuje zobrazení posuvníků. Hodnota "auto", která je implicitní, říká, že posuvníky budou zobrazeny v případě, že je velikost rámu menší než velikost obsahu. S hodnotou "yes" budou posuvníky zobrazeny vždy. Pokud nebudou právě zapotřebí, nebudou aktivní. Hodnota "no" zakazuje použití posuvníků a to i když bude velikost okna menší než obsah.

Následující atributy nastavují vzdálenost mezi textem a okrajem rámu v pixelech. Jsou to marginheight, který nastaví vzdálenost ve svislém směru a marginwidth pro vodorovný směr.

Rámy jsou na sobě nezávislá okna. Pokud kliknete na odkaz, tak se načte právě do toho rámu, ve kterém byl dokument s tímto odkazem. Když budeme chtít, aby se odkazovaný dokument načetl do jiného okna, budeme muset využít atributu name. Ten vlastně jednotlivým rámům přiřadí jména, podle kterých se pak prohlížeč může orientovat. Do pojmenovaného okna se odkazujeme pomocí standardního příkazu <A> s atributem target, jehož hodnotou je jméno rámu.

Atribut target může mít i některé speciální hodnoty. Hodnota "_blank" říká, že odkazovaný dokument bude zobrazen v novém okně prohlížeče. Hodnota "_top", říká, že dokument bude načten do celého, hlavního okna prohlížeče. Hodnota "_self" je vlastně implicitní, dokument se načítá do aktuálního okna. A konečně hodnota _parent odkazuje na "rodiče" aktuální stránky. Tyto hodnoty jsou velice užitečné.

Dejte jen pozor, abyste případně nepojmenovali rám jednou z těchto hodnot. Dávejte také pozor na duplicitu jmen. Velké potíže vyrobíte, pokud budete načítat do rámu tentýž rám (odkaz na sama sebe). V případě, že se budete odkazovat na neexistující jméno rámu, otevře se dokument v okně novém.

A co v případě, že návštěvníkův prohlížeč rámy nepodporuje, nebo jejich zobrazování má vypnuto? V tom případě se k obsahu rámů nedostane. Můžeme ho jen na přítomnost rámů upozornit pomocí párového příkazu <NOFRAMES> ... </NOFRAMES>, který se zapíše za definici rámů. Mezi značky se zapíše ono nepříjemné upozornění.

Závěrem ještě jeden celý příklad definice rámů:

<HTML> <HEAD> <TITLE>příklad rámů</TITLE> </HEAD> <FRAMESET cols="20%,*">

<FRAME name="menu" src="obsah.htm" frameborder="0" noresize scrolling="no"> <FRAME name="main" src="uvod.htm" frameborder="0" noresize>

</FRAMESET>

<NOFRAMES>Tento dokument obsahuje rámy, které váš prohlížeč nepodporuje. Pokud chcete dokument vidět podívejte se <A href="nahradni.htm">náhradí adresu</a>. Děkuji</NOFRAMES>

</HTML>

Do hlavního okna by odkazoval odkaz v rozcestníku nalevo tímto způsobem:

<A href="doc1.htm" target="main"> úvod </A>

Zajímavou implementací rámů je tzv. vnitřní rám - inner frame. Pomocí příkazu <IFRAME></IFRAME> lze do dokumentu vložit okno, kam lze odkázat libovolný jiný htm dokument a nebo třeba obrázek. Zvláště efektní je to v případě, že samotný obrázek má větší rozměr než původní stránka a v rámovém okně je ho vidět pouze část, přičemž obrázek lze v okně posouvat. Př.:

<IFRAME name="xy" src="large.htm" width="320" height="320"></IFRAME>

Na konec musím ještě připomenout, že rámy nejsou standardním prvkem HTML a nepodporují je všechny prohlížeče. Od jejich používání se spíše upouští. Je jen na vás, jak zvážíte potřebnost jejich použití na Vašich stránkách. Pokud se rozhodnete pro jejich použití, neměli byste to s jejich využitím přehnat. A také myslete na uživatele, kteří nemají možnost rámy ve svých prohlížečích prohlížet (i když jich už není mnoho :-)).

© Marek Bryl 2000

Formuláře Formuláře také patří mezi klasické prvky internetových stránek. Na běžných uživatelských stránkách se s nimi příliš nesetkáme, ale jsou zato neodmyslitelnou součástí portálů a vyhledávačů, dotazníků nebo třeba i chatu, tedy on-line diskusních fórech. Umožňují totiž uživateli mimo jiné komunikaci s programem na serveru nebo další navigaci na stránkách na základě vyplněných údajů ap.

Problematika tvorby, ladění a vyhodnocování formulářů je popsána již v mnoha specializovaných publikacích. Velké množství rad a návodů se také nachází na internetu. Téma tvorby formulářů je rozsáhlé a složité a podrobnější popis by přesáhl možnosti a účel této příručky. A proto se zde zmíním jen o nejzákladnějších prvcích a principech. Sám s formuláři nemám mnoho zkušeností a tak promiňte případné nedostatky.

Formulář může být sestaven z několika typů objektů, jako jsou různá tlačítka, zaškrtávací políčka, jedno- nebo víceřádková textová vstupní pole, výběrová menu ap. Některé tyto objekty mohou být na stránce samostatně, tedy mimo formulář, ale pak je jako formulář nelze použít. Tlačítko lze využít např. pro místo s odkazem. Formulář vymezuje párová značka <FORM> ... </FORM> s několika atributy. Dodejme, že formuláře nelze do sebe vnořovat.

Mezi nejdůležitější atributy patří action a method. První atribut action určuje URL skriptu, který zpracuje data odeslaná pomocí formuláře. Pokud zde zadáme e-mailovou adresu, budou na ni výsledky formuláře zaslány. Atribut method určí způsob odeslání dat. Jeho hodnotou může být post nebo get. Metoda get doplní informace na konec aktivního URL, tedy jako by byly v adresovém řádku. Tato metoda je implicitní. Metoda post předává parametry jako standardní vstup v těle požadavku. Metoda get je omezena množstvím odesílaných dat, ale post je jednodušeji odposlouchávatelná.

Dalšími atributy značky <FORM> jsou enctype, který určuje způsob kódování dat (implicitně application/x-www-form-urlencoded), atribut script, jenž je lokátor jednoúčelového CGI skriptu, který prohlížecí program zavede za účelem předzpracování výstupů formuláře před jejich odesláním na cíl specifikovaný atributem action. Atribut target definuje jméno okna, rámce, nebo prohlížeče, ve kterém má být zobrazen výsledek získaný odesláním formuláře. Pokud je na stránce více formulářů, lze využít i atribut name.

Formulář může být definován např. <FORM action="http://server.cz/moje/prog.php" method="get">, nebo <FORM action="mailto:moje.posta@server.cz" method="post">. Pokud data zadaná prostřednictvím formuláře bude zpracovávat skript, který je součástí stránky s formulářem, může být definován např. také jako <FORM name="formular" onSubmit="return go()">. Zde je zadaná také funkce z použitého skriptu, pomocí které jsou data zpracovaná.

Mezi značky vymezující formulář se vkládají jednotlivé prvky a objekty, které lze formátovat a umisťovat na stránce pomocí známých značek. Vlastní formulářové objekty se vkládají pomocí příkazu <INPUT> s povinným parametrem type. Ten určuje, o jaký druh objektu se bude jednat a podle toho se také budou lišit další možnosti a atributy příkazu <INPUT>. Zde následuje přehled možných hodnot atributu type, tedy objektů a jejich popis.

text - jednořádkové vstupní pole; atributem value lze zadat počáteční hodnotu pole password - stejné jako text, ale není zobrazována uživatelem zapisovaná hodnota checkbox - zaškrtávací políčko; atributem value lze zadat hodnotu vracenou při zaškrtnutí radio - volba právě jedné možnosti; atributem value lze zadat hodnotu vracenou pro tuto volbu submit - tlačítko odesílající data k serveru; atributem value lze definovat text na tlačítku reset - tlačíto pro nastavení původních hodnot formuláře; atributem value definuje text na tlačítku

hidden - skryté pole; atributem value lze specifikovat pevnou hodnotu nezadávanou uživatelem image - na poklep citlivá grafika; lokátor src; po kliknutí pošle data serveru a se souřadnicemi místa kliknutí file - pole pro zadání jména souboru; umožní k výstupu formuláře připojit jeden nebo více lokálních souborů; atributem value lze zadat implicitní název souboru; atributem accept lze vymezit povolené typy souborů; tento typ vyžaduje v deklaraci formuláře atributy enctype="multipart/form-data" method="post" range - číselný interval (přetáčecí pole); atributy min a max určí hranice intervalu scribble - "počmáratelná" grafika specifikovaná atributem src jot - "popsatelná" grafika specifikovaná atributem src

Když definujeme typ objektu, můžeme mu přiřadit symbolické jméno atributem name. To musí být v rámci formuláře jednoznačné. Pro typ objektu checkbox a radio platí výjimka. Pokud tyto prvky tvoří logickou skupinu, tedy zaškrtnutím jednoho radio prvku se zruší zaškrtnutí jiného, mají tyto prvky stejné jmého. U těchto dvou objektů lze specifikovat implicitní zaškrtnutí pomocí atributu checked.

Atribut value nastaví hodnotu pole, to podle typu objektu. Konkrétní uplatnění jsme si již uvedli u výčtu možných objektů. Atribut align ovlivňuje umístění objektu vůči okolí. jeho hodnotami mohou být: top (horní okraj objektu bude zarovnán s horním okrajem řádku), middle (střed objektu bude zarovnán na účaří řádku), bottom (dolní okraj objektu bude zarovnán se spodním okrajem řádku), left (vodorovné umístění objektu na levý okraj), right (vodorovné umístění objetu na pravý okraj).

Velikost pole typu text a password určuje atribut size, jehož hodnoty určují délku na počet znaků a počet řádků. Atribut maxlength nastaví maximální počet znaků akceptovaný v těchto polích. Pomocí atributu disabled lze dosáhnout, že určitý objekt je sice zobrazen, ale bez možnosti jeho modifikace. Využitelný je také atribut error, který umožní výpis hlášení pro případ chybné zadané hodnoty.

Na závěr tedy ještě jeden příklad jednoduchého formuláře. Pochopitelně by bylo nutné vytvořit program, který by získaná data zpracoval. Ten ale vynechám. Před odesláním dat z formuláře by měl být ještě také provedena kontrola, zda data mají smysl. Tedy jestli e-mail obsahuje "@" a zda adresa obsahuje doménu ap.

Malý dotazník

Stránky se Vám nelíbí protože:

je zde moc textu

je tu málo příkladů

dotazník je nepřehledný

Tuto příručku jste získal - - - - - - - - -

celkově příručku hodnotíte:

kladně

záporně

Vaše heslo:

Váš e-mail: @

Odeslat

Reset

<FORM action="mailto:jmeno@server.cz?subject=dotaznik" method="get">

Stránky se Vám nelíbí protože:<br> <INPUT type="checkbox" name="moc_textu" value="1"> je zde moc textu<br> <INPUT type="checkbox" name="malo_prikadu" value="1"> je tu málo příkladů<br><INPUT type="checkbox" name="neprehledny" value="1"> dotazník je nepřehledný

<p>Tuto příručku jste získal <SELECT size="1" name="ziskal">

<OPTION option value="---">- - - - - - -</OPTION> <OPTION value="nelegalne">nelegálně</OPTION> <OPTION value="ve_skole">ve škole</OPTION> <OPTION value="od_kamarada">od kamaráda</OPTION> <OPTION value="z_internetu">z internetu</OPTION>

</SELECT>

<p>celkově příručku hodnotíte:<br> <INPUT type="radio" name="hodnoti" value="kadne"> kladně<br> <INPUT type="radio" name="hodnoti" value="zaporne"> záporně

<p>Vaše heslo: <INPUT type="password" name="heslo" size="20">

<p>Váš e-mail: <INPUT type="text" name="mail" size="20" value="@">

<INPUT type="submit" value="odeslat"> <INPUT type="reset" value="Reset">

</FORM> Pokud chcete odeslat formulář jinak, než za účasti poštovního klienta, můžete jej odkázat na nějaký skript na serveru, který obsah již sám odešle. V tomto případě, by úvodní příkaz mohl vypadat např. takto:

<form action="http://www.server.cz/marek.bryl/mail.php" method="post" name="formular">

© Marek Bryl 2001

Zvuk a media Vkládání zvuku nebylo ještě nedávno obvyklé. Dnes je již naprosto běžnou záležitostí. Je nutno mít ovšem na paměti, že zdaleka ne všechny stanice jsou vybaveny po hardwarové a softwarové stránce tak, aby mohli využít zvukový doprovod na stránce. Předem zvažte, zda je opravdu nutný zvukový doprovod nebo efekt na vaší stránce. Takový "nevyžádaný" zvuk může totiž být do značné míry obtěžující. A navíc takové soubory představují nemalý objem dat, což je velice závažné kritérium.

Pokud se rozhodnete zvuky používat, můžete pomocí příkazu <BGSOUND> nastavit, aby byl zvukový soubor automaticky přehráván na pozadí po načtení stránky. Jedná se však o nestandardní prvek IE, který navíc většina starších prohlížečů nezvládne. Příkaz se vkládá do hlavičky souboru. Parametr loop určí, zda je zvuk přehrán jednou nebo vícekrát. Hodnota infinite nebo "-1" způsobí, že je zvuk nekonečně opakován. Atribut title je nepovinný atribut popisující soubor s hudbou nebo zvukem. Např.: <BGSOUND src="Welcome.wav" loop="-1">

Zvuk, který se přehraje "na vyžádání", tedy kliknutím na odkaz, se do dokumentu vloží pomocí příkazu <A>. Tedy např. <A href="zvuk.wav">odkaz</A>. Podobnou funkci má i příkaz <EMBED SRC="URL/zvuk.wav">, který ale patří mezi nestandardní prvky a raději jej nepoužívejte.

Pro vložení videosouboru (pouze ve formátu avi) je možné použít také příkaz <IMG>. Pro vložený objekt platí všechny atributy jako pro obrázek, ale navíc existují ještě další atributy. Atribut start určí, při jaké události je sekvence přehrána. Hodnota fileopen zajistí, že se soubor začne přehrávat ihned po nahrání souboru, mouseover dovolí animaci spustit až když je nad ní kurzor myši. Atribut loop udává počet přehrání. Hodnota infinite zajistí nekonečné přehrávání. Atribut controls zajistí zobrazení ovládacích prvků videa pod zobrazenou animací. Př.:

<IMG DYNSRC="../nekde/zdoj.avi" start="mouseover" loop="1" controls>

Dnešní technologie umožňují vkládat do dokumentu multimediální soubory, tedy audio i video. Zejména využití technologie ActiveX je v poslední době velice využívaným nástrojem. Při použití této technologie prohlížeč využívá programové knihovny, které jsou vytvořeny pro jiné aplikace. Podrobněji se tomu věnovat nebudeme.

Kaskádové styly V současnosti se velice častěji prosazují pro formátování textu na stránkách kaskádové styly CSS (Cascading Style Sheets). Zdají se být šťastnějším řešením pro úpravu textu, než klasické staré prvky. Kaskádové styly mají několik výhod. Můžeme totiž nadefinovat určité výsledné vzhledy textu a přiřadit je pro určité značky. Takto si můžete předem připravit několik typů vzhledu písma. Pomocí krátké značky jej pak přiřadíte k požadovanému textu. Navíc lze definici stylů uložit do jednoho zvláštního souboru a na něj pak odkazovat ze všech stránek. Tím získáte jednotný vzhled všech stránek v projektu. Mimo to si výrazně zjednodušíte situaci, když se rozhodnete změnit např. vzhled nadpisu na všech stránkách. Pak totiž stačí změnit jen definici určitého stylu. Pomocí stylů lze v odkazech zrušit podtržení nebo třeba umístit text o libovolný počet bodů mimo řádek. Ale pozor, styly jsou podporovány od verze NN4 a IE3.

Pokud se rozhodnete definovat styly uvnitř stránky, použijete příkaz s párovou značkou <STYLE> ... </STYLE>. Definice se zpravidla zapisuje do hlavičky dokumentu. Atribut type udává typ a formát definice stylu. Další

případný atribut src odkazuje na externí soubor s dalšími definicemi stylů. Vlastní definice stylů se provede pomocí instrukce, selektor[, selektor[, ...]] {deklarace[, deklarace[, ...]]}, kde selektor je libovolný prvek HTML a deklarace je dvojice vlastnost:hodnota. Př.:

<STYLE type=text/css> <!-- A:link { TEXT-DECORATION: none; COLOR: rgb(0,100,0) } A:visited { TEXT-DECORATION: none; COLOR: rgb(0,100,0) } A:active { TEXT-DECORATION: underline; COLOR: rgb(0,140,0) } A:hover { TEXT-DECORATION: underline; COLOR: rgb(0,140,0) }

H1 {font_family:helvetica, color:red; TEXT-ALIGN: right; FONT-WEIGHT: bold;}

B.nove_1 {COLOR: rgb(60,45,122); FONT-FAMILY: helvetica; FONT-SIZE: 10pt} B.nove_2 {COLOR: rgb(60,45,50); FONT-FAMILY: helvetica; FONT-SIZE: 12pt}

.novejmeno {COLOR: #ddc682; FONT-FAMILY: helvetica; FONT-STYLE: normal}

--> </STYLE>

Definování selektorů je pro příklad uvedeno čtyřmi způsoby. V prvním případě jsme definovali styl odkazů (příkaz <A>). Zde je určeno, zda bude text podtržen a jakou bude mít odkazový text barvu. (Jednotlivé definice odpovídají atributům link, vlink a alink. Poslední se týká situace, kdy je nad odkazem myš.) Druhý způsob je jednoduché přiřazení stylu libovolnému příkazu. Pomocí dalšího způsobu definice lze díky přiřazenému jménu rozlišit více typů definice stylů pro značku libovolného příkazu. Na konec je uveden způsob deklarace, kde není selektorem žádná značka, ale pouze nové jméno odlišené úvodní tečkou. Z části s deklarací stylu je zřejmé, jaký bude mít vliv na formátovaný text a tak ji nebudu rozepisovat.

Ve vlastním těle dokumentu se přiřazení určitého stylu k vybranému textu provede použitím určitého příkazu. Jeho uzavírací značka ukončí i definovaný styl. Složitější situace nastane, pokud v definici k příkazu přiřazujete také jméno selektoru, nebo dokonce pouze jméno selektoru. V tomto případě poslouží atribut class, jehož hodnotou je ono jméno a lze ho využít různými způsoby. Např.:

<B class="nove_2">text</B> <div class="novejmeno">text</div> <class="novejmeno">text</class>

Pokud budete mít definici stylů ve zvláštním externím souboru, označíte jej koncovkou *.css a do hlavního dokumentu vložíte odkaz např. <LINK type="text/css" rel="StyleSheet" href="muj_styl.css">. V externím souboru se definice již příkazem <STYLE> neuvozuje. Uvedené způsoby lze kombinovat, ale je třeba dát pozor na to, že definice použité pro konkrétní text má větší váhu, než definice pro celou stránku v externím souboru.

Následuje tabulka s výčtem základních atributů, jejich hodnotami a významem.

Název atributu Význam atributu Hodnoty atributu Příklad použití

font-family druh písma název písma {font-family: Arial} font-size výška písma body (pt), palce (in), {font-size: 30px}

centimetry (cm), pixely (px)

font-weight tloušťka písma

extra-light light demi-light medium demi-bold bold extra-bold

{font-weight: extra-bold}

line-height vzdálenost mezi řádky

body (pt), palce (in) centimetry (cm), pixely (px), procento (%)

{line-height: 30px}

font-style italika normal italic {font-style: italic}

text-decoration podtržení a apod.

none - nic underline - podtržení italic - italika line-through - proškrtnutí

{text-decoration: none}

color barva textu jméno barvy, RGB hodnota

{color: green}

background-color barva pozadí jméno barvy,

RGB hodnota {background-color: blue}

margin-left margin-right margin-top

vzdálenost od okraje body (pt), palce (in) centimetry (cm), pixely (px)

{margin-left: -100px}

text-align zarovnání textu left - nalevo center - centrovat right - napravo

{text-align: center}

text-indent odsazení textu odleva body (pt), palce (in) centimetry (cm), pixely (px)

{text-indent: 2cm}

Skripty Pomocí skriptovacích jazyků lze stánky oživit, umožňují uživateli ovlivnit jejich obsah, naprogramovat jednoduché hry, atd. Stránky tak přestávají být pouze statickým objektem, ale stávají se dynamickými interaktivními stránkami reagující na volby a potřeby uživatele. Skriptovací programy mohou být součástí zdrojového kódu stránky, a pak se program vykonává přímo na stránkách u uživatele, nebo mohou být použity programy, které jsou uloženy na serveru.

V druhém případě program na serveru vyhodnocuje data zaslaná uživatelem a zpět odesílá již speciálně sestavené stránky a data pro klientův prohlížeč. Nejčastějším případem takovýchto programů je zpracovávání dat z vyplněných formulářů a práce s databázemi na serveru. Neznámější programy jsou ASP (Active Server Pages), CGI (Common Gateway Interface) a PHP (Hypertext Preprocesor).

Mezi běžnými uživateli se ale nejvíce používá první skupina programovacích prostředků. Tedy ty skripty, které jsou součástí zdrojového kódu stránky. Nejrozšířenější jsou Visual Basic Script, ale hlavně Java Script,

který nás bude zajímat především. Jedná se o celkem nenápadný prostředek, ale má rozsáhlé možnosti. Pomocí skriptu lze manipulovat s obsahem textu na stránkách, používat matematické výpočty, pracovat s grafikou, ale i ovlivňovat chování prohlížeče, jako je zobrazování různých informativních a varovných oken, ovlivňování zobrazení nástrojových a funkčních lišt, nebo otvírání a zavírání nových oken prohlížeče s určeným obsahem ap.

Popis nebo návod na používání skriptovacího jazyka by vydal na silnějsí příručku nebo knihu. A také proto, že programování dynamických stránek přesahuje rámec této příručky, nebudu se zde více o používání skriptu rozepisovat. Pokud budete mít zájem, naučit se alespoň základní dovednosti s JavaScripty, můžete se podívat na internet, kde si můžete vybrat z několika různých stránek nebo návodů. Na závěr si ale uvedeme alespoň jeden malý příklad. Funkce použitá v odkazu otevře nové okno s uvedeným obsahem podle definice ve skriptu. Nové okno bude bez lišty "toolbar", bude mít rozměry 600x80 a bude 50 pixelů od levého okraje.

<SCRIPT language="JavaScript"> <!--// function openWindow() { window.open("","nove",'toolbar=0,scrollbars=1,width=600,height=80,resizable=1,left=50'); } //--> </SCRIPT>

<A HREF="sample.html" onClick="openWindow()" target="_blank">odkaz</A>

Počítadla Poté co své stránky vytvoříte a zkontrolujete jejich funkčnost, můžete je "vystavit" na internet. Nejčastěji na některý server, který nabízí místo pro stránky zdarma. Nejčastější způsob přenosu stránek na internetový server je pomocí FTP protokolu, který bývá součástí běžných souborových manažerů. Některé servery nabízejí ještě podporu programovacích jazyků (PHP, ASP, CGI, ap.) pro vaše skripty.

To ale bývají většinou placené servery, které ovšem navíc mohou nabízet i statistiky přístupů na Vaše stránky. Pokud ne, nezbude Vám než využít služby jiných serverů, které nabízejí webová počítadla přístupů. Ty mají většinou podobu obrázku s čísly, které vyjadřují počet návštěv. Princip je jednoduchý. Při načtení stránky se obrázek počítadla načítá z onoho serveru, který ovšem registruje počet dotazů na tento obrázek a podle toho zasílá zpět adekvátní sestavu číslic tvořících obrázek počítadla. Porozhlédněte se na internetu po nějakém serveru, který tuto službu nabízí.

Aby však Vaše stránky někdo našel, musíte o nich dát vědět. To se provede jednoduše tím, že své stránky zaregistrujete na vyhledávacích serverech a portálech. Tam vyplníte jednoduchý formulář a pod vhodnou charakteristikou Vašich stránek je zařadíte do některé podkapitoly v rozcestníku na serveru.

© Marek Bryl 2002

Na co nezapomenout

Na závěr ještě zmíním několik rad a upozornění, na které se nedostalo v jednotlivých kapitolách. Především se nesnažte použít na své nové stránce najednou všechny příkazy co znáte. Výrazné prvky a odkazy používejte střídmě, myslete na to, aby se náhodný návštěvník neztratil ve spoustě odkazů a grafiky. Pokud Vás něco zaujme na cizí stránce, podívejte se jak je to uděláno. Tím se naučíte velice mnoho nového. Ale nesnažte se kopírovat vybrané části z cizích stránek a nebo dokonce vytvářet slepence z kousků cizích stránek. Výsledek nebude valný, nehledě k tomu, že si přivlastníte práci někoho jiného (a můžete se tak dostat i do křížku se zákonem).

I velice dobře graficky zpracované stránky ztrácejí důvěryhodnost pokud se na nich vyskytují stylistické nebo dokonce pravopisné chyby. Dobře své texty překontrolujte, zejména pokud vytváříte i verzi v cizím jazyce. Ušetříte si tak mnoho trapných situací. Kromě toho existují i jistá typografická pravidla. Jazyk HTML nemá dostatek nástrojů k tomu, aby "vysázel" obsah podle všech pravidel. Ale postačuje k tomu, aby byly splněny alespoň základní normy.

Hlavním problémem HTML je řádkový zlom a z principu není možné dělit slova. Pokud jsou pak odstavce členěny do bloku, mohou vznikat skrz odstavce nevzhledné "řeky" z širokých mezer mezi slovy. Dalším problémem je, že na konci řádku by neměly zůstat jednopísmenné spojky nebo předložky, s výjimkou malého "a". Že se takovéto situaci lze bránit pomocí tzv. "tvrdé" mezery, jsme si již řekli v příslušné kapitole. Pevnou mezeru použijete také pro spojení iniciály jména s příjmením, čísla se zkratkou jednotky, nebo v datumu, kde by den a měsíc měli být na stejném řádku.

Častou chybou bývají nevhodně napsané nebo chybějící mezery kolem interpunkčních znamének a závorek ve větě. Takže pro úplnost, před znaménkem se mezera nepíše, za ním ano. To platí i pro tři tečky, které ukončují text. Pokud větu ukončuje zkratka s tečkou (ap. atd.), pak se již další tečka na konci věty nepíše, stejně jako tomu je u tří teček. U závorek a uvozovek zase platí, že uvnitř se mezery nedělají, zatímco vně ano. Pokud je za závorkou nebo uvozovkou interpunkční znaménko, následuje samozřejmě ihned za ní. Pokud se měsíc v datu píše slovně, je mezi ním a tečkou u dne data také mezera. Také kolem pomlčky by měly být mezery, kdežto kolem spojovníku ne.

Využití editorů Pro napsání stránky postačí jakýkoli jednoduchý textový editor. Ten je pro začátečníky nevhodnější, zejména pokud chtějí do psaní v HTML proniknout a porozumět mu. Později, až se v HTML budou orientovat, mohou jako pomůcku zkusit některý ze specializovaných editorů. Dnes tyto nástroje kombinují možnost upravovat zdrojový text a tzv. WYSIWYG editor. Pojmem WYSIWYG je zkratka od What You See Is What You Get, což doslovně znamená "co vidíš, to dostaneš", tedy jak to je vidět při návrhu, tak to i bude v prohlížeči.

Použití editoru nabízí několik výhod. Je zde možnost barevně odlišit text od příkazů a jejich parametrů, automatické dokončování značek párových příkazů, nabídka možných atributů příkazu, kontrola pravopisu a kontrola (validizace) použitých příkazů nebo snadná kontrola výsledku ve vnitřním prohlížeči. Často bývají součástí i průvodci pro nové stránky a umožňují správu celého projektu stránek. Uživatel může tvořit skripty a styly aniž by musel znát všechna pravidla.

Takovýchto editorů je už spousta a podle zásady "co má jeden, má zanedlouho druhý", si začínají být podobné jako příslovečné vejce vejci. Mezi nejznámější editory patří např. HomeSite (shareware; www.allaire.com),

HotDog (shareware; www.sausage.com), 1st Page2000 (freeware; www.evrsoft.com), Golden HTML editor (freeware cz; http://golden.zde.cz) ap. Sharewarové produkty jsou časově omezené a po uplynutí doby zpravidla 30 dní, je nelze bez zaplacení licence používat. Freewarové produkty jsou nabízeny zdarma, obvykle jen za bezplatné zaregistrování.

Určitě jste si všimli, že většina dnešních pokročilejších textových editorů nabízí možnost uložit dokument také do formátu HTML. Teto postup však vůbec nedoporučuji. Tyto editory (jde o známé textové a tabulkové editory kancelářských balíčků) používají složité metody a postupy pro vytváření svých dokumentů. Při pokusu o převedení do HTML se snaží zachovat rozvržení a formát textu, tabulek a všech dalších objektů tak, jak jsou v klasickém dokumentu. Nezvládnutelné pasáže dokonce převádí na obrázky. Většinou to celé dopadne tak, že nový HTML dokument má neadekvátní velikost, používá nezvyklé konstrukce a obsahuje příliš mnoho stále se opakujících příkazů pro formátování textu. Tyto příkazy často zabírají více místa v souboru než vlastní text.

Závěrem Na těchto stránkách není dokonalý ani úplný návod, jak psát dokumenty v HTML. To také není ani cílem této příručky. Přesto její konečná podoba je již obsáhlejší a svým rozsahem by vás mohla odradit. Snažil jsem se zde vyhýbat uvádění nestandardních prvků a příkazů, ať již jde o rozšíření NN nebo IE. A těch není málo. Pokud jsem je přesto uvedl, pak jen proto, že se používají častěji.

Tato příručka je určena pro úplné začátečníky. V případě, že by někdo chtěl prostudovat problém hlouběji a nebo hledal odpověď na něco, co zde nezmiňuji, může se podívat na některé další internetové příručky či učebnice. Ty, podle mého názoru, nejkvalitnější a stránky které by pokročilý autor internetových stránek měl znát uvádím na stránce s internetovými tipy.

Tyto stránky, příručku nebo návod, jak kdo chce, jsem vytvořil pro své známé a pro své potřeby. Později jsem využil doplněnou verzi jako semestrální práci (tímto zdravím SPŠSE a VOŠ Liberec :o) ). Při psaní jsem čerpal pouze ze svých zkušeností, protože jsem tehdy neměl k dispozici odbornou literaturu. Nevím tedy ani jak se taková příručka nebo učebnice píše, ale na druhou stranu jsem tak nebyl ovlivněn jiným zdrojem. Poslední verzi jsem revidoval s pomocí stručného seznamu příkazů a jejich atributů z nápovědy Golden HTML editoru.

Nestojím příliš o šíření těchto stránek, ale nemohu tomu bránit. Pokud se Vám tyto stránky dostanou do rukou, napište. Pokud zde naleznete nějaké věcné nebo pravopisné chyby, budu rád, když na ně upozorníte.

Doufám, že tato příručka bude užitečná a přínosem a nikoli "zmatkovníčkem v HaTMatiLce", jak ji nazval jeden kolega. Na střední škole mě češtinářky utvrzovaly v tom, že nemám literární nadání (malý pozdrav do Gymnázia ve Frýdlantě :-) ) a tak si ani nedělám iluze o kvalitě textu na těchto stránkách. Buďte prosím shovívaví ;-)

Marek Bryl mrk.volny@volny.cz

© Marek Bryl 2002