HTML_pro_zacatecniky

Ú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
•
o
ƒ
disk - plné tečky (implicitní)
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ší...
& znak "and"
&amp;
neoddělitelná mezera
&nbsp;
¦ horizontální dělící čára
&brvbar;
© copyright
&copy;
® registered
&reg;
™ trade mark
&#153;
° stupeň (Celsia ap.)
&deg;
± značka plus/mínus
&plusmn;
&para;
¶ znak zalomení odstavce
§ paragraf
&sect;
< levá lomená závorka
&lt;
> pravá lomená závorka
&gt;
" uvozovky
&qout;
- spojovník
&shy;
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;
© Marek Bryl 2000
Ò 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
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:[email protected]">náš e-mail: [email protected]</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>
</TR>
<TR>
</TR>
</TABLE>
<TD>1. buňka, 1. ř.</TD>
<TD>2. buňka, 1. ř.</TD>
1. buňka, 1. ř.
2. buňka, 1. ř.
1. buňka, 2. ř.
2. buňka, 2. ř.
<TD>1. buňka, 2. ř.</TD>
<TD>2. buňka, 2. ř.</TD>
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>
1. buňka
3. buňka
2. buňka
4. buňka
<TABLE border="1">
<TABLE border="0">
1. buňka
2. buňka
3. buňka
4. buňka
1. buňka
3. buňka
2. buňka
4. buňka
<TABLE border="10">
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
<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>
druhá
zde je text
uvnitř
druhá
první
buňky
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)
abc
abc
abc
valign=
"middle" abc
abc
abc
valign=
"top"
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
2rowspan
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í tabulk
y
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
rows - čáry mezi řádky
cols - čáry mezi sloupci
all - všechny čáry
(implicitní hodnota)
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/xwww-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:[email protected]" 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:[email protected]?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
<OPTION
<OPTION
<OPTION
</SELECT>
option value="---">- - - - - - -</OPTION>
value="nelegalne">nelegálně</OPTION>
value="ve_skole">ve škole</OPTION>
value="od_kamarada">od kamaráda</OPTION>
value="z_internetu">z internetu</OPTION>
<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
B.nove_2
{COLOR: rgb(60,45,122); FONT-FAMILY: helvetica; FONT-SIZE: 10pt}
{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)
tloušťka písma
extra-light
light
demi-light
medium
demi-bold
bold
extra-bold
{font-weight: extrabold}
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í
{text-decoration: none}
italic - italika
line-through - proškrtnutí
color
barva textu
jméno barvy,
RGB hodnota
{color: green}
backgroundcolor
barva pozadí
jméno barvy,
RGB hodnota
{background-color: blue}
margin-left
margin-right
margin-top
vzdálenost od okraje
body (pt), palce (in)
{margin-left: -100px}
centimetry (cm), pixely (px)
text-align
zarovnání textu
left - nalevo
center - centrovat
right - napravo
text-indent
odsazení textu odleva
body (pt), palce (in)
{text-indent: 2cm}
centimetry (cm), pixely (px)
font-weight
{text-align: center}
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
[email protected]
© Marek Bryl 2002