se vztahuje pouze na font písma, zatímco 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ů: 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 ... , který říká, že následuje např. zdrojový text nějakého programu. V zásadě se neliší od . 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 ... 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ř.: 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ř.: 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ř.:
Zápis tohoto příkazu může tedy vypadat i takto:
formátovaný text...
Pokud chceme nastavit např. barvu celého textu dokumentu, můžeme to udělat v příkazu . Závěrem je nutno říci, že funkce příkazu se nahrazují použitím stylů a samotná značka 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í tučné větší tučná kurzíva větší kurzíva větší normální
normální tučné větší tučná kurzíva větší kurzíva větší normální
Začátek nadpisu střední červená část konec nadpisu
Začátek nadpisu střední červená část konec nadpisu
© Palito 2014
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
. 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ř.:
clear specifikuje způsob obtékání obrázků, jeho hodnotami 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
mohou být:
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 ... . Naopak nepárová značka <WBR> vyznačí, kde řádky zalomit lze. Pokud chceme text logicky členit na odstavce, použijeme příkaz . 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
není povinné, nový odstavec uzavírá předešlý a ruší také případné zarovnání.
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
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
. Definice odstavce může tedy vypadat i takto:
Pokud potřebujeme označit část stránky nebo několik odstavců jako jeden logický celek, můžeme použít příkaz
...
. 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ř.:
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 ...
až ...
, 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. Nadpis
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
) 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 ... , pomocí které můžete formátované objekty (text, obrázky, tabulky) vodorovně zarovnat na střed. Často používaná je nepárová značka
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.
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
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
na
- 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 ...
(a jeho kratší verze ... ) 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. clear
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 ...
která obklopuje značky jednotlivých položek seznamu . 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 , která definuje záhlaví seznamu jako nadpis seznamu . Nečíslovyný seznam tvoří příkaz a značka pro jednotlivé položky je stejná jako v číslovaném seznamu, tedy , rovněž jako značka pro záhlaví seznamu . Seznam definic ohraničuje značka ...
Jednotlivé položky jsou tvořeny ze dvou částí. A to definovaným pojmem, který uvozuje značka a jeho popisu uvozeném značkou . 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 a , ale i do značky - . 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.
- 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 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. © Palito 2014
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" 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 &qout; " 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
¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î
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
Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ
© Palito 2014
Ò 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 ... . 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ř.: 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ř.:
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 , 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 naše stránky.
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ý odkaz 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ř.: NADPIS
Na takto vytvořenou záložku se lze odkazovat příkazem: část 1.
Nebo pokud odkazujete na jiný než aktuální dokument: část 1.
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ř.:náš e-mail: [email protected] 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"> 
Příkaz 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 ![]()
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
Grafika na stránkách S grafikou jsme se již setkali u značky 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 ![]()
. 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: 
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). 
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ý. top - horní okraj grafiky bude zarovnán
s horním okrajem aktuálního řádku textu
midlle bottom
- střed grafiky bude zarovnán na účaří (základní linku) aktuálního řádku textu - 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 alšími užitečnými atributy jsou width pro určení šířky a height pro určení výšky obrázku. D 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ů: (původní rozměry)
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.
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
s atributem clear. V tomto případě by tedy pomohl příkaz
. Další způsobem by bylo použití tabulek. A teď ještě zdrojový příkaz k obrázku vpravo:
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 2 18 (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ší.
© Palito 2014
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 . 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 ...
, tedy Table Row. Do každého řádku se poté zadávají jednotlivé buňky. K tomu slouží značka ... | , 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:
1. buňka, 1. ř. | 2. buňka, 1. ř. |
1. buňka, 1. ř. 2.
buňka, 1. ř.
1. buňka, 2. ř. 2.
buňka, 2. ř.
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 , 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.
1. buňka 2. 3. buňka 4.
buňka buňka
1. buňka 2.
buňka
3. buňka 4.
buňka
1. buňka 2. 3. buňka 4.
buňka buňka
1. buňka 2.
buňka
3. buňka 4.
buňka
Na uvedených příkladech tabulek jsem se dopustil ještě jedné nepřesnosti. U tabulek lze totiž zadat jejich rozměry. A to jak pro celou tabulku, tak i pro jednotlivé buňky. Pokud se rozměry neuvedou, zaujme tabulka
buňky, je zalomen na více řádků. Šířku a výšku tabulky ovlivňují parametry width a height příkazu . 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.
| zde je text uvnitř první buňky | druhá |
| |
zde je text uvnitř první buňky
| zde je text uvnitř první buňky | druhá |
| |
druhá
zde je text uvnitř druhá první buňky
Dalším atributem příkazu 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.
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:
Příkaz 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 ... 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 | ... | (Table Header). Ten se zapíše místo definice buňky, tedy místo . 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ě. Nadpis tabulky | 1.
sloupec | 2.
sloupec | | 1. řádek | 123 | 123 | | 2. řádek | 123 | 123 |
Nadpis tabulky
1. řádek
1. sloupec 123 123
2. řádek
123 123
2. 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 | a | . 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 |
, proto je někdy jistější definovat konkrétní buňku v příkazu , případně zarovnání "zdvojit". hodnoty atributu align pro vodorovné zarovnání: left (implicitní) right center
align="left"align="center"
align="right"
justify (zarovnávání obou okrajů, pokud je to možné) char (zarovnání na znak, typicky desetinná čárka) hodnoty atributu valign pro svislé zarovnání: top middle (implicitní) bottom (zarovnání k dolnímu okraji buňky) baseline (rozšíření Netscape)
valign= "top" valign= "middle"
abc
abc
abc
abc
abc
abc
Pokud chcete u parametru použít hodnotu char, tedy zarovnání na znak, musíte v příkazu | nastavit, který znak to bude. Příkaz by mohl vypadat např. takto: | . Tato možnost zarovnání není ještě ve starších verzích prohlížečů podporována. Dalším atributem příkazů |
a | 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 | , 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 | , 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. | 1 - colspan | 2 - rowspan | | 3 | 4 | | 5 | 6 |
1 - colspan 34 56
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 . 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 a hlavně . 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 . 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 - jen pravá strana
above
- jen horní strana
rhs
below
- jen dolní strana
vsides
hsides
- levá a pravá strana
border/box
- horní a dolní strana
- všechny čtyři
strany
A zbývá již jen atribut rules:
none
- žádné čáry
rows
- čáry mezi řádky
cols
- čáry mezi sloupci
- všechny čáry (implicitní hodnota) all
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.
© Palito 2014
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 . Tento dokument nebude obsahovat tělo dokumentu a tak ani značku . 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:
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:
Když chceme okno rozdělit na rámy nepravidelně, můžeme toho dosáhnout vnořením příkazu pro definici rámů. Např.:
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:
2. dokument:
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 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 | |
