Úvod do programování HTML

Transkript

1 Ú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

2 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. Palito 2014

3 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">

4 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"> Palito 2014

5 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.

6 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í

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

8 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 ("non-break-space"). Např. "u 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.

9 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

10 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

11 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 písmen na jednom řádku se pro čtenáře stává těžko čitelným a velmi unavuje. Palito 2014

12 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 , 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ší... & &#153; ± < > &qout; & 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). < > " < levá šípová závorka > pravá šípová závorka " uvozovky Ï Ð Ñ Ï capital I, dieresis or umlaut mark Ð capital Eth, Icelandic Ñ capital N, tilde

13 ª «± ² ³ µ ¹ º» ¼ ½ ¾ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î 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 Ò Ó Ô Õ Ö Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ø ù ú û ü ý þ ÿ Ò 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 Palito 2014

14 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=" 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=" 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

15 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áš 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.

16 <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í. Palito 2014

17 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í. V lastní 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"> A tribut 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

18 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

19 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"> P okud 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.

20 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 2 18 ( ) možných barevných odstínů. (počet na 2 18 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 2 24 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ší. T ento 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ý.

21 Pro fotografie je neideálnější formát JPEG (soubory *.jpg). Takový soubor může obsahovat několik tisíc barev najednou (max 2 24 ). 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ší. Palito 2014

22 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

23 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> </TD> </TR> </TABLE> <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> </TD> </TR> </TABLE> zde je text uvnitř první buňky zde je text uvnitř první buňky druhá 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"

24 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 1. řádek řádek sloupec 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"