Úvod do HTML

Doc. Dr. Vladimír Homola, Ph.D.

Anotace

Naprostá většina těch, kteří dovedou zapnout počítač, dovede i browsdat po Internetu. Naprostá většina z této naprosté většiny konzumující denně tisíce tzv. webovských stránek však vůbec netuší, na co vlastně zírají. Pravda, ani je to moc nezajímá; hlavně že vidí to co vidět chtějí. Tento článek je určen těm několika málo, kteří chtějí vědět něco více nejen o vizuální formě, ale i o podstatě. Dále je článek určen těm několika více, kteří to vědět musí, protože z toho na některých oborech dodnes dělají zkoušku.

Mechanismů, kterak zobrazit uživateli "něco z Internetu", je více. Tento článek popisuje základní schéma relativně jednoduchého, avšak stále asi nejčastějšího způsobu pomocí interpretace obsahu textového souboru, který je zapsán v tzv. „hypertextovém značkovém jazyce“ (HyperText Markup Language = HTML).

Článek je psán jako výukový materiál především pro účely zmíněné zkoušky, naprosto ho nelze chápat jako referenční manuál. Počítá s tím, že čtenář ho bude číst plynule shora dolu - a vše co je v něm uvedeno může přímo prakticky vyzkoušet. Příklady a postupy v tomto článku popisované se odehrávají v prostředí Microsoft Windows za použití tam běžně instalovaného software. Předpokládá se minimální povědomí o programech Průzkumník Windows (Windows Explorer - najít složku, označit soubor) a Poznámkový blok (Notepad - otevřít, editovat a uložit textový soubor i s jinou příponou než TXT).

K tomu důležitá poznámka: Celý článek sám je psán v HTML. Příklady v něm uváděné jsou přímo prováděny tím prohlížečem, který čtenář používá ke čtení článku. Protože prohlížeč je spuštěn v prostředí nějakého operačního systému, používá v daném systému instalované komponenty. Autor tohoto článku kontroloval jeho obsah a vzhled při zobrazení v prohlížečích Microsoft Edge, Google Chrome a Mozilla Firefox, a to v prostředí Microsoft Windows 10 a 11. Tam bylo vše v pořádku. Už ale při použití prohlížeče Firefox v systému Android se objevily drobné nesrovnalosti, související s absenci konkrétních komponent systému, především použitelných fontů. Proto jsou informace a příklady v článku uvedené relevantní v systému Microsoftu.

Obecné informace

Princip použití HTML

HTML je - zjednodušeně řečeno - publikační jazyk určený původně pro Web. Je však možno ho použít i lokálně, bez jakékoliv vazby na počítačovou síť. Logika celého mechanismu je poměrně jednoduchá: Autor publikace ji zapíše jako normální text prokládaný tzv. značkami (což jsou opět „normální“ písmena a jiné znaky uzavřené do "<" a ">") - tedy podobně jako následující schematická ukázka:

Text Značka Text Značka Text Značka Text
| | | | | | |
XXXXXXX <ZN> XXXXXXXX <ZN> XXXXXXXXX <ZN> XXXXXXXXX

Značka (angl. tag) je určena pro tzv. interpret HTML. Každá značka je určena svým mnemotechnickým jménem (např. <p> = Paragraph, odstavec), za kterým při jejím konkrétním použití mohou následovat konkrétní parametry (např. <p align="center"> = odstavec, zarovnat na střed). Interpret je softwarová komponenta, která čte takto sestavený text a zobrazuje jej - ovšem akceptuje přitom pokyny vyjádřené právě značkami. Třída programových aplikací obsahující především interprety bývá uživatelskou veřejností označována jako prohlížeče (Google Chrome, Mozilla Firefox, Microsoft Edge aj.). Pro programátory dodává Microsoft interpret jako visual objekt v knihovně SHDOCVW.OCX - jde o známé obdélníkové „okno do Webu“ přístupné jako instance objektové třídy WebBrowser.

Poznámka 1: Celá logika syntaxe a použití HTML spočívá v tom, že interpretovaný soubor bude vypadat stejně ve všech prohlížečích všech systémů (nebo alespoň s minimálními odchylkami, to je samozřejmě úkolem autorů prohlížečů). V tomto článku byl pro účely výkladu a zobrazení použit prohlížeč Microsoft Edge. Proto když se v textu tohoto článku použije termín „prohlížeč“, je možno pod ním chápat Chrome, Edge apod.

Poznámka 2: Textový soubor je skutečně v tom nejjednodušším formátu - co byte, to kód jednoho znaku. Tedy rozhodně ne něco jako dokument programu Word aj. Pro začátek výuky je přirozené pro jeho přípravu použít např. program Notepad - Poznámkový blok. Ten je však obecným editorem jakéhokoliv textového souboru bez ohledu na význam jeho obsahu. Pro přípravu textového souboru obsahujícího právě text se značkami HTML existují pohodlnější editory (u Microsoftu FrontPage nebo Expression Web), které např. upozorňují na chyby v zápisu značek, nabízí při zápisu jejich parametry apod. To je však mimo zamýšlený záměr tohoto článku.

Autor publikace HTML pracuje tedy následovně:

Nejprve připravuje obsah textového souboru HTML se zamýšleným obsahem a formátováním (značky pro tučné písmo, pro vkládání obrázků atd). K tomu používá svůj oblíbený textový editor (např. Poznámkový blok :-)
Po dokončení nějaké ucelené části své publikace potřebuje zkontrolovat, zda vzhled při prohlížení odpovídá jeho představám. Otevře tedy doposud vytvořené v prohlížeči a prohlíží a prohlíží - a dělá si přitom poznámky, co je třeba upravit, přidat atd. Pracuje tedy v prostředí prohlížeče.
Pokud publikace potřebuje úpravy, zavře prohlížeč a vrací se k prvnímu bodu.

Zápis zdrojového textu

Při čtení textu ze souboru HTML interpret obecně ignoruje konce řádků - přesněji s koncem řádku a event. následnými počátečními mezerami na začátku následujícího řádku nakládá tak, jako by to byla jediná mezera. Ke zobrazení textu na novém řádku zobrazovacího prvku interpretu dojde až po zaplnění jeho šířky - bez ohledu na zápis textu ve zdrojovém souboru HTM (pokud značkami není určeno jinak).

Je tedy jedno, jestli část textu zdrojového souboru bude na jednom jediném řádku, nebo jestli bude vypadat např. takto:

Moje
<b>
první
</b>
stránka.

Zobrazen interpretem bude text vždy stejně: jednotlivá slova budou skládána na řádek zobrazovacího prvku interpretu tak dlouho (podle šířky tohoto prvku, např. podle aktuální šířky okna prohlížeče), dokud se na řádek vejdou. Jakmile se slovo už na řádek nevejde, interpret ho zobrazí jako první slovo následujícího řádku atd. Tak postupuje interpret při zobrazování textu na stránce, v rámu, v buňce tabulky. Tento standardní způsob zobrazení lze měnit k tomu určenými značkami.

Zatímco způsob zápisu vlastního zobrazovaného textu je poměrně volný, přísnější požadavky jsou kladeny na zápisy značek. Za znakem "<" uvozujícím značku se např. nesmí vyskytnout mezera, víceznakové názvy značek nelze dělit apod. Pokud má značka parametry, pak se jednotlivé parametry oddělují jednou nebo více mezerami, mohou být dokonce na různých řádcích. Na pořadí jednotlivých parametrů nezáleží. Uvnitř zápisu parametru však nesmí být ani mezery ani odřádkování. Porušení těchto pravidel má za následek, že interpret takovou značku bude ignorovat.

Interpret nerozlišuje velikost písmen ve značkách. Značku např. <font> lze zapsat ve stejném významu i jako <FONT> nebo <Font> nebo <FoNt>.

Přestože způsob zápisu textu HTM souboru je velmi volný, doporučuje se autorům dokumentů, aby ve vlastním zájmu zachovávali nějaká pravidla (která si třeba stanoví sami) zajišťující přehlednost a relativní snadnost orientace ve zdrojovém textu svého vlastního dokumentu. Příkladem může být způsob zápisu v textech, které jsou uvedeny níže.

Otevření HTML souboru prohlížečem

Operační systém (zde Microsoft) si vytváří seznam mnoha přípon (Extensions - třebas .TXT nebo .DOC nebo .HTM - ne nutně všech). V tom seznamu má ke každé příponě přiřazenou tzv. asociovanou aplikaci. Účel je mj. tento: Jakmile uživatel v prostředí průzkumníka souborů (Windows Explorer) provede na ikonu některého zobrazeného souboru myší dbl-click (nebo označí ji a stiskne klávesu Enter), pak operační systém spustí aplikaci asociovanou příponě tohoto souboru a předá jí jako první parametr úplné označení tohoto souboru. Co asociovaná aplikace s touto informací o souboru udělá, je záležitostí každé jednotlivé aplikace. Nejčastěji se aplikace pokouší otevřít daný soubor jako svůj vlastní dokument. Pokud nemá soubor strukturu dokumentu očekávanou aplikací, aplikace končí chybou.

Příklad: Operační systém má k příponě .XLS asociovánu aplikaci Excel. Dbl-click na ikonu souboru C:\KURS\NÁKUPY.XLS způsobí spuštění programu Excel, kterému při spouštění předá operační systém jako první parametr úplné označení C:\KURS\NÁKUPY.XLS. Program Excel se ho pak pokouší otevřít jako sešit ve svém vlastním formátu. Pokud je to skutečně soubor vytvořený Excelem jako jeho sešit, otevření se povede a spuštěný Excel ho ve svém prostředí předloží uživateli k dalšímu zpracování. Pokud se to nepovede, následuje chybové hlášení Excelu.

Důsledek: Operační systém Microsoftu má po instalaci k příponě .HTM (a také .HTML) asociovanou aplikaci, kterou je prohlížeč Microsoftu dodávaný s operačním systémem. Dříve to býval program Windows Internet Explorer, v novějších verzích systému Windows je to Microsoft Edge; Uživatel si však může nechat nastavit - nebo i sám nastavit - jiný oblíbený prohlížeč. Pokud tedy uživatel v prostředí průzkumníka souborů provede dbl-click na ikonu souboru SKRIPTA.HTM, spustí operační systém asociovaný prohlížeč a předá mu úplné označení souboru SKRIPTA.HTM. Prohlížeč soubor otevře, předpokládá, že obsahuje „normální“ text prokládaný značkami (tj. formátu HTML), a pokouší se o interpretaci značek na okolní text. Interpretovaný výsledek pak uživatel vidí v prostředí spuštěného prohlížeče.

Tento dbl-click je asi nejrychlejší způsob spuštění interpretace souboru HTML nastaveným prohlížečem.

Všechny prohlížeče jsou koncipovány k interpretaci souborů umístěných „na Internetu“ a přístupných zadáním adresy typu např. http://MojeSkola.cz/Texty/SKRIPTA.HTM. Pokud je však soubor s textem HTML umístěn na počítači uživatele např. na disku D ve složce Texty, pak má přístupová adresa pro otevření a interpretaci zadávaná do adresního řádku prohlížeče tvar

file:///D:/Texty/SKRIPTA.HTM

Málokterý prohlížeč má po instalaci k disposici analogii hlavního menu s položkou Soubor / Otevřít. Většina prohlížečů však následně spouštěný dialog pro otevření souboru zobrazí (při aktivním textovém poli pro zadání adresy) stisknutím kombinace kláves CTRL / O - O ve smyslu anglického Open.

Postup interpretu

Uveďme příklad. Nechť je někde na disku textový soubor PRVNI.HTM (vytvořený např. zmíněným Poznámkovým blokem) s následujícím obsahem:

Moje <b>první</b> stránka.

Otevřme nyní tento soubor prohlížečem - viz výše. Interpret v jeho zobrazovacím prvku postupuje takto:

Čte a zobrazuje „normální“ znaky textu svým přednastaveným písmem, dokud nenarazí na značku. Slovo "Moje" a mezeru za ním zobrazí tedy „normálně“.
Protože interpret narazil na značku, zde "<b>", rozebere ji. Význam této značky je přechod na zobrazení tučným (angl. bold) písmem. Interpret si to zapamatuje a všechny následující znaky textu začne zobrazovat stejným písmem jako předchozí text s jedinou výjimkou - budou tučnými znaky.
Po rozboru značky interpret čte a zobrazuje další „normální“ znaky textu. Protože však má zapamatováno, že předcházela značka "<b>", zobrazuje je tučným písmem. Slovo "první" tedy bude zobrazeno tučně. To provádí tak dlouho, dokud nenarazí na další značku.
Další značkou, na kterou interpret narazí, je "</b>". Význam této značky je ukončení zobrazování tučným písmem - viz níže odstavec „Značky párové a nepárové“. Interpret si to zapamatuje a všechny následující znaky textu už zase nebude zobrazovat tučně. Slovo "stránka" včetně mezery před ním bude tedy zobrazeno zcela „normálně“ přednastaveným písmem.

Výsledkem interpretace je následující zobrazení:

PRVNI.HTM

Moje první stránka.

Značky párové a nepárové

Jazyk HTM obsahuje dva typy značek: párové a nepárové.

Příkladem párové značky je shora uvedená značka <b> pro přechod na tučné písmo. Značka <b> začíná tučný text. Značka </b> ukončuje tučný text - a to je ta druhá do páru. Obecné pravidlo pro párové značky je v uvedeném významu: značka <ZN> něco začíná a značka </ZN> to započaté ukončuje.

Nepárová značka nemá „druhou do páru” - význam má uvedení jen jí samotné. Příkladem může být značka "<img>" (viz kapitoly níže) pro vložení obrázku: prostě na místo, kde je značka uvedena, se vloží obrázek určený parametrem této značky a není třeba nic ukončovat.

Některé značky (párové i nepárové) mohou mít tzv. parametry - např. <font color="blue"> má parametr color. Párovou ukončující značkou je pak jen </font> - tj. bez parametrů.

Určení barvy

Řada značek může obsahovat parametr určující barvu nějakého objektu. Příkladem může být parametr color ve značce <font>:

Barvu lze zadat několika způsoby: svým (anglickým) jménem, číselným kódem, některé prohlížeče akceptují i volání funkce RGB.

Jméno barvy je např. red (červená), blue (modrá), green (zelená), yellow (žlutá). Je vždy anglické a je možno volit jen z nabídky 140 jmen barev. Všechna tato jména jsou však korektně interpretována jen prohlížečem firmy Microsoft^®, u prohlížečů jiných firem není zaručeno, že zobrazí všechny - ty základní jako červená, zelená, modrá (samozřejmě v angličtině) ale zobrazí v pořádku.

Pomocí číselného kódu barvy je možno určit kteroukoliv z 16 milionů barev a na rozdíl od jmen barev jsou barvy takto určené interpretovány stejně ve všech prohlížečích. Mírným problémem je fakt, že se používají vždy dvouciferná čísla a vždy v šestnáctkové (hexadecimální) soustavě - ta má 16 cifer, přičemž pro ně používá znaky 0, 1, ... , 9, A, B, C, D, E a F pro označení počtu 0 až 15. Dvouciferné hexadecimální číslo nabývá hodnot od nuly (=00₁₆) do dvěstě padesáti pěti (=FF₁₆). Pro použití při určení barvy se hodnota chápe jako intenzita jedné ze třech základních složek. Číselný kód barvy se vytvoří jako kombinace intenzit jednotlivých barevných elementů RGB - třeba monitoru (RGB = Red Green Blue = Červená Zelená Modrá - v tomto pořadí) tak, že za znak # se zapíše dvouciferná šestnáctková intenzita červeného elementu, pak dvouciferná šestnáctková intenzita zeleného elementu a nakonec dvouciferná šestnáctková intenzita modrého elementu. Subtraktivním složením barev všech tří elementů je dána výsledná barva celého bodu.

Např. shora uvedená červená (red) barva: je to základní barva, kdy červený element v tomto místě „svítí naplno" (tedy červená složka má maximální intenzitu FF (= 255₁₀), zelený element „nesvítí vůbec" (tedy zelená složka má minimální intenzitu 00 = 0₁₀), a modrý element v tomto místě také „nesvítí vůbec" (tedy modrá složka má rovněž intenzitu 00). Červená barva má proto číselný kód #FF0000:

Podrobněji a s barevnými tabulkami jmen a čísel barev viz Barvy v HTM souborech.

Formátování textu

Formátování úseku znaků textu

Uveďme alespoň nejnutnější značky pro formátování úseků textu.

Text mezi značkami ...	... se zobrazí:
<b> ... </b>	tučně (angl. bold): xyz
<u> ... </u>	podtrženě (angl. underlined): xyz
<i> ... </i>	kurzívou (angl. italic): xyz
<sup> ... </sup>	jako horní index (angl. superscript): x²
<sub> ... </sub>	jako dolní index (angl. subscript): x₂
<font ...> ... </font>	podle parametrů značky <font> - viz níže

HTML nezná něco na způsob „sloučených“ značek - např. "<bu>" pro zobrazení tučně (b) a ještě navíc podtrženě (u). V takových případech je nutno použít dvou samostatných značek "<b><u>" v libovolném pořadí a tučné podtržení písmo ukončit značkami "</b></u>" opět v libovolném pořadí. Důvodem je poskytnutí co největší volnosti při zápisu dokumentu - úseky textu různě formátované se mohou překrývat, jak to ukazuje následující příklad:

Moje <b>první <i>školní</b> osobní</i> stránka.

Slovo "Moje" bude zobrazené standardním přednastaveným písmem. Značka "<b>" začíná tučné písmo, slovo "první" tedy bude tučné. Značka "<i>" začíná kurzívu (ale neukončuje tučné!), slovo "školní" tedy bude nejen tučné, ale i kurzívou - tedy tučnou kurzívou. Značka "</b>" ukončuje tučné (ale neukončuje kurzívu!), slovo "osobní" tedy bude jen kurzívou. Značka "</i>" ukončuje kurzívu, a protože už není nastavená ani kurzíva ani tučné, bude slovo "stránka" zobrazené zase standardním přednastaveným písmem."

PRVNI.HTM

Moje první školní osobní stránka.

Značka <font>

Aby mělo smysl použití párové značky <font>, musí být zadán alespoň jeden její parametr. Značka pak má tvar např. <font color="blue" size="+1">. Již shora bylo zmíněno, že se jednotlivé parametry oddělují jednou nebo více mezerami, mohou být dokonce na různých řádcích. Uvnitř zápisu parametru však nesmí být ani mezery ani odřádkování. Mezera tedy nesmí být před nebo za rovnítkem mezi jménem parametru a jeho hodnotou.

Parametry značky "<font>" nastavují některé vlastnosti písma počínaje ukončující závorkou ">" značky "<font>". Platnost těchto (a pouze těchto) nastavených vlastností ukončuje závorka "<" nejbližší ukončující párové značky "</font>" a vrací jim hodnoty, kterou měly před poslední změnou.

Níže jsou uvedeny alespoň základní parametry značky <font>.

Parametr color - barva

Parametr má tvar

color="BARVA"

kde BARVA je určení barvy jedním ze způsobů popsaných shora v odstavci Určení barvy (viz), tedy např.

nebo

Parametrem je určena barva písma, od tohoto místa dokumentu zobrazovaného na ploše interpretu. Od značky "<font"> uvedené příkladech (parametr "color" určuje v obou případech stejnou barvu, a to červenou) bude následující text zobrazován červeně.

Parametr size - velikost

Parametr má tvar

size="VELIKOST"

kde VELIKOST je celé číslo se znaménkem nebo celé číslo bez znaménka, tedy např.

nebo

Základní velikost písma (tedy taková, která není modifikována ani značkou "<font>" ani definovaným stylem ani jinak) je dána nastavením prohlížeče. Např. Microsoft Edge nastavuje tuto velikost ve svém Nastavení, tam postupně Vzhled / Písma / Přizpůsobit písma - zde má 5 možných stupňů velikosti. Na základě této velikosti jsou pak odvozeny velikostní stupně 1, 2 až 7.

Je-li VELIKOST zadána jako celé číslo bez znaménka, pak jde o určení velikosti znaků v právě popsaných velikostních stupních. Velikostní stupeň 3 bývá tou základní nastavenou velikostí písma. V různých prohlížečích (a jejich verzích) může však tato velikost být pojímána různě. Např. v interpretu firmy Microsoft v dávnověku Internetu odpovídaly velikostní stupně 1 až 7 velikosti v typografických bodech 8, 10, 12, 14, 18, 24 a 36. Větší hodnoty než sedm byly interpretovány jako sedm. Hodnota 0 nebo neuvedený parametr "size" bývala právě nastavená velikost standardního písma.

Je-li VELIKOST zadána jako celé číslo se znaménkem, pak jde o určení relativní velikosti znaků. Výchozí velikostí je velikost uživatelem právě nastaveného standardního písma v jeho prohlížeči (velikost 0 nebo bez parametru "size"). Velikost +1 je pak o jeden pomyslný stupeň větší než standardní velikost, velikost +2 o dva pomyslné stupně větší atd; analogicky záporné hodnoty. Tyto stupně však mohou být u různých prohlížečů různé, stejně tak rozsah, do kterého jsou interpretovány.

Protože ani artificial intelligence se nezmůže na nic lepšího než na jakési pomyslné stupně, je nejlepší si nechat zobrazit tabulku. V prvním řádku jsou hodnoty parametru "size" (bez znaménka a se znaménkem), ve druhém malá písmena "x" pro porovnání s jedním z nejvyšších znaků "|". Protože tento text je záměrně ponechán v HTML a není převeden např. do sice kompaktního, ale už modifikovaného PDF, můžete vidět interpretaci parametru "size" přímo tím prohlížečem, v němž na tuto tabulku zíráte:

-7

-6

-5

-4

-3

-2

-1

bez

x|x

-7

-6

-5

-4

-3

-2

-1

bez

x|x

Parametr face - písmo

Parametr má tvar

face="JMENOFONTU"

kde JMENOFONTU je jméno fontu, který má být použit pro zobrazení znaků textu, tedy např.

Seznam jmen fontů lze získat např. v programech typu Word, Excel apod. rozvinutím nabídky pro písma. Je však třeba upozornit na to, že jméno musí být jménem fontu, který je nainstalován v počítači a v operačním systému, ve kterém se kód HTML interpretuje, nikoliv na počítači, kde je uložen! Dnes se lze celkem obecně spolehnout na to, že v počítačích provozujících systém Windows jsou určitě nainstalovány fonty Arial, Times Roman, Courier a Symbol. Tyto fonty je tedy možno použít celkem bezproblémově, naopak jiné fonty jen velmi obezřetně. Bez nebezpečí je to např. tehdy, kdy má být text interpretován na počítači a v systému, kde vznikl.

Následující tabulka předvádí jednak zmíněné čtyři obvykle Microsoftem standardně instalované fonty. Dále pak několik fontů, která na počítači autora jsou nainstalovány a tedy může vypadat každá ukázka na různých počítačích různě. Na počítači, ze kterého je tento text prohlížen, je pak místo nenainstalovaného fontu použit standardní font (většinou Times Roman): Tedu pokud texty ve druhém sloupci evidentně neodpovídají názvu fontu v prvním sloupci, není tento font na aktuálním počítači a v aktuálním systému nainstalován. To se týká především prohlížení v systémech Android.

<font face="Times Roman">	Text by se mohl zobrazit fontem vlevo.
<font face="Arial">	Text by se mohl zobrazit fontem vlevo.
<font face="Courier">	Text by se mohl zobrazit fontem vlevo.
<font face="Symbol">	Text by se mohl zobrazit fontem vlevo. - viz poznámka níže
Výše uvedené fonty by měla obsahovat každá instalace Microsoft Windows. Následující ukázky používají fonty, které má nainstalovány počítač autora tohoto článku.
<font face="Bauhaus 93">	Text by se mohl zobrazit fontem vlevo.
<font face="Benguiat Bk BT">	Text by se mohl zobrazit fontem vlevo.
<font face="Lucida Calligraphy">	Text by se mohl zobrazit fontem vlevo.
<font face="Script">	Text by se mohl zobrazit fontem vlevo.
<font face="Tahoma">	Text by se mohl zobrazit fontem vlevo.

Důležitý je z tohoto ohledu fakt, že obecně lze používat font Symbol - a to proto, že obsahuje kompletní řeckou abecedu a množství technických a matematických značek. V praxi je však do dokumentů zapotřebí vkládat ještě řadu dalších znaků a značek, která ani ve fontu Symbol nejsou. Lze to zajistit vkládáním pojmenovaných symbolů event. symbolů pomocí číselných kódů. Informace o řadě takových symbolů lze nalézt v Speciální znaky v HTM souborech.

Formátování odstavců

Pojem „odstavec"

Základní organizační jednotkou textu je v HTML - stejně jako v jiných publikačních systémech - odstavec (angl. paragraph). Odstavec je vše, co je uzavřeno mezi značky "<p>" a "</p>". Značka "<p>" je tedy párová, ale připouští se výjimka: jestliže bezprostředně za sebou následuje několik odstavců, může ukončující značka "</p>" před následující značkou "<p>" chybět.

Následující text vytváří při interpretaci dva odstavce:

<p>Moje <b>první</b> stránka.</p>
<p>Jmenuji se Jan Novák a jsem studentem 1. ročníku.</p>

O způsobu zápisu textu platí pravidla uvedená shora. Uvedený text bude zcela stejně interpretován, i když bude zapsán takto:

<p>Moje <b>první</b> stránka.</p><p>Jmenuji se Jan Novák a jsem studentem 1. ročníku.</p>

Že je ovšem první způsob přehlednější, např. při hledání chyb nebo úpravách, je zřejmé. Ještě přehledněji, avšak poněkud rozvláčněji, jde soubor zapsat i takto:

<p>
Moje <b>první</b> stránka.
</p>

<p>
Jmenuji se Jan Novák a
jsem studentem 1. ročníku.
</p>

Ve všech případech bude obsah souboru interpretován takto:

PRVNI.HTM

Moje první stránka.

Jmenuji se Jan Novák a jsem studentem 1. ročníku.

S odstavci nakládá interpret dynamicky:

Začíná-li zobrazovat text odstavce, nejprve ukončí zobrazení předchozího odstavce a nový odstavec začne na novém řádku; oddělí však první řádek nového odstavce od posledního řádku předchozího odstavce zhruba dvojnásobnou mezerou, než kterou jsou oddělovány řádky uvnitř odstavce. Tyto mezery může autor HTML dokumentu definovat např. pomocí stylů.
Jednotlivá slova odstavce zobrazuje za sebou na jednom řádku. Pokud se nově zobrazované slovo už na řádek (mající délku rovnou šířce zobrazovací plochy interpretu!) nevejde, zobrazí ho na další řádek téhož odstavce - tedy zalomí řádek (není vhodné použít termínu "odřádkuje").
Jestliže se změní šířka zobrazovací plochy interpretu (např. se zúží okno programu Internet Explorer), pak interpret svou zobrazovací plochu překreslí za použití stejných pravidel. To obecně znamená, že se především většinou změní počty zobrazených řádků jednotlivých odstavců, protože se na ně vejde jiný počet slov.

Lze to demonstrovat na již uvedeném příkladu. Po zmenšení šířky zobrazovací plochy na čtvrtinu předchozí ukázky bude interpretace stejného souboru vypadat takto:

PRVNI.HTM

Moje první stránka.

Jmenuji se Jan Novák a jsem studentem 1. ročníku.

Uvedená pravidla platí pro odstavce, kterým nejsou standardní vlastnosti přepsány atributy třídy (stylu) - viz dále.

Parametry značky odstavce

Značka "<p>" může mít několik parametrů, které řídí způsob zobrazení odstavce. Níže jsou uvedeny alespoň dva z nich.

Parametr align - zarovnání

Parametr má tvar

align="ZAROVNÁNÍ"

kde ZAROVNÁNÍ je jedno z klíčových slov (psaných libovolnou velikostí písmen) LEFT - vlevo, CENTER - na střed, RIGHT - vpravo, JUSTIFY - na obě strany (v českém Wordu to překládají Do Bloku). Příklad:

Parametr řídí vodorovné zarovnání odstavce do mezí daných kontextem (do zobrazovací plochy interpretu, do buňky tabulky, do rámu atd). Pokud parametr není ve značce uveden, uplatní se zarovnání na levý okraj.

Tedy text souboru PRVNI.HTM obsahující

<p>Moje <b>první</b> stránka.</p>
<p align="right">Jmenuji se Jan Novák a jsem studentem 1. ročníku.</p>

bude zobrazen ve zobrazovací ploše interpretu takto:

PRVNI.HTM

Moje první stránka.

Jmenuji se Jan Novák a jsem studentem 1. ročníku.

Parametr class - třída

Parametr má tvar

class="JMTŘÍDY"

kde JMTŘÍDY je jméno třídy stylu. Tento parametr se uplatní pouze tehdy, když

dokument odkazuje na soubor kaskádových stylů (mají příponu .CSS), a ten obsahuje definici třídy stylu ve tvaru JMTŘÍDY { atributy },
dokument přímo obsahuje definici třídy stylu ve tvaru JMTŘÍDY { atributy }.

Je-li v jednom z uvedených umístění definována třída stylu pod jménem např. Popis , pak odstavec uvozený značkou

bude zobrazen se zobrazovacími atributy standardního textu s výjimkou těch atributů, které jsou explicitně definovány ve stylu Popis.

Popis atributů definice stylu přesahuje záměr tohoto článku. Jen jako příklad uveďme alespoň definici stylu pojmenovaného např. Rovnice:

.Rovnice { font-family: Courier New; font-size: 9pt; color: #C00000; margin-left: 60.0pt;
margin-top: 6.0pt; margin-bottom: 0.0pt }

Poznámka: Třída stylu zhruba odpovídá pojmu Styl známého např. z Wordu. Skutečně také otevře-li se Wordem soubor kaskádových stylů .CSS, rozšíří se o ně množina stylů nabízených Wordem.

Seznamy

Jako elementy textu mohou být vloženy seznamy (seznam, angl. List). Jejich položky jsou opatřeny buď odrážkami nebo číslováním. Uveďme základní tvary značek definujících tyto seznamy.

Položky seznamu

Seznamy jsou tvořeny jednotlivými položkami seznamu (angl. List Item). Jednotlivé položky seznamu obsahují především běžný text „tak jak je“, s běžným formátováním event. odkazy. Může to ale být i text tvořený jedním nebo více odstavci i s případně vloženými obrázky. Takové „přebujelé“ položky seznamu jsou méně časté, protože seznamy mají za úkol především přehledně vyjmenovat nějaké skutečnosti a obsáhlé položky na přehlednosti nepřidají. Položky seznamu jsou omezeny značkami "<li>" a "</li>". Tedy např.

<li>silnice II. třídy</li>
<li>silnice I. třídy</li>
<li>dálnice</li>

jsou tři položky nějakého seznamu.

Řazený seznam

Řazený seznam (angl. Ordered List) je tvořen jednou nebo více položkami seznamu uzavřených do značek "<ol>" a "</ol>". Značka "<ol>" má tvar

kde TYP může nabývat jedné z hodnot "1", "a", "i". Není-li parametr type vůbec uveden, platí type="1".

Je-li type="1", jsou položky seznamu řazeny stylem 1, 2, 3 atd. Je-li type="a", jsou položky seznamu řazeny stylem a, b, c atd. Je-li type="i", jsou položky seznamu řazeny stylem i, ii, iii, iv, v, vi atd. Mnohé prohlížeče připouští (a správně interpretují) i velká písmena I a A.

Tedy seznam uvedený v dokumentu takto:

<ol type="a">
   <li>silnice II. třídy</li>
   <li>silnice I. třídy</li>
   <li>dálnice</li>
</ol>

bude interpretem zobrazen takto:

silnice II. třídy
silnice I. třídy
dálnice

Neřazený seznam

Neřazený seznam (angl. unordered list) je často také v češtině uváděn jako Seznam s odrážkami. Je tvořen jednou nebo více položkami seznamu uzavřených do značek "<ul>" a "</ul>". Značka "<ul>" má tvar

kde TYP může nabývat jedné z hodnot "disc" (plné kolečko), "circle" (prázdné kolečko), "square" (čtverec). Není-li parametr type vůbec uveden, platí type="disc". Parametr udává znak, kterým je tvořena odrážka.

Tedy seznam uvedený v dokumentu takto:

<ul type="square">
   <li>silnice II. třídy</li>
   <li>silnice I. třídy</li>
   <li>dálnice</li>
</ul>

bude interpretem zobrazen takto:

silnice II. třídy
silnice I. třídy
dálnice

Vnoření seznamů

Položkou v seznamu může být i seznam. Neřazený seznam uvedený v dokumentu se třemi položkami má jako obsah třetí položky opět neřazený třípoložkový seznam:

<ul>
   <li>silnice II. třídy</li>
   <li>silnice I. třídy</li>
   <li>dálnice
     <ul>
        <li>D0 = Pražský okruh</li>
        <li>D1 = Praha - Bohumín</li>
        <li>D56 = Ostrava - Frýdek-Místek</li>
     </ul>
   </li>
</ul>

Bude interpretem zobrazen takto (protože není explicitně zadán typ seznamů, zvolí interpret seznam vnořené úrovně odlišného typu) :

silnice II. třídy
silnice I. třídy
dálnice
- D0 = Pražský okruh
- D1 = Praha - Bohumín
- D56 = Ostrava - Frýdek-Místek

Onen „vnitřní“ seznam může být i řazený (opět nebyl uveden typ vnořeného seznamu):

silnice II. třídy
silnice I. třídy
dálnice
1. D0 = Pražský okruh
2. D1 = Praha - Bohumín
3. D56 = Ostrava - Frýdek-Místek

Obrázky

Vložení obrázku

Pokud při procházení textu HTML dokumentu narazí interpret na značku "<img>", zobrazí na aktuální pozici své zobrazovací plochy obrázek. Parametry značky "<img>" určují, o jaký konkrétní obrázek jde a jakým způsobem se má zobrazit. Značka "<img>" je nepárová (tedy neexistuje "</img>"). Má však řadu parametrů, některé následují.

Parametr src - source, zdroj

Parametr má tvar

src="ZDROJ"

kde ZDROJ je označení místa, kde se obrázek nachází. Označením obrázku je především označení souboru s obrázkem, např. MOJEFOTO.JPG, D:\DATA\MOJEFOTO.JPG apod. Parametr ZDROJ může mít ale i tvar "webovské adresy" - tedy to, co je známé pod zkratkou URL (např. "http://MUJWEB.CZ/mapy/img/logo.gif").

Důležitá poznámka: Pokud se jako ZDROJ použije označení souboru pouze ve tvaru JMENO.PRIPONA (např. MUJOBR01.GIF), musí tento soubor být ve stejném adresáři jako zdrojový soubor HTML. Je-li obrázek v pod-adresáři (např. DATA) adresáře se souborem HTML, pak parametr ZDROJ musí mít tvar DATA \ MUJOBR01.GIF nebo DATA / MUJOBR01.GIF - analogicky pro hlubší úrovně vnoření.

Je-li tedy ve stejném adresáři jako zdrojový HTM soubor i obrázek jako soubor s označením např. MUJOBR01.GIF, pak značka "<img>" vložená do textu souboru takto:

<p>
Moje <b>první</b> stránka.
</p>

<p>
Jmenuji se Jan Novák <img src="MUJOBR01.GIF"> a jsem studentem 1. ročníku.
</p>

zajistí při interpretaci zobrazení takto:

PRVNI.HTM

Moje první stránka.

Jmenuji se Jan Novák a jsem studentem 1. ročníku.

Parametr border - ohraničení

Parametr řídí tloušťku ohraničení obrázku. Parametr má tvar

border="N"

kde N je (v bodech - pixelech) zadaná tloušťka čáry tvořící ohraničující rámeček okolo obrázku. Je-li N=0 nebo parametr není vůbec zadán, pak obrázek nemá žádný ohraničující rámeček. Příklad:

Uvedená značka zajistí zobrazení obrázku orámovaného čarou o tloušťce 3 body takto:

PRVNI.HTM

Moje první stránka.

Jmenuji se Jan Novák a jsem studentem 1. ročníku.

Parametr align - zarovnání

Parametr řídí zarovnání okolního textu vzhledem k obrázku nebo naopak obrázku vzhledem k textu. Parametr má tvar

align="ZAROVNÁNÍ"

kde ZAROVNÁNÍ je jedno z klíčových slov (psaných libovolnou velikostí písmen) MIDDLE atd. - viz tabulka níže. Tedy např. značka

zajistí zobrazení obrázku takto:

PRVNI.HTM

Moje první stránka.

Jmenuji se Jan Novák a jsem studentem 1. ročníku.

Přesný význam klíčových slov je uveden v následující tabulce. Jde o doslovný překlad z MSDN; autor tohoto článku neručí za jejich skutečné chování. Proto za tabulkou následují ukázky interpretace v tom prohlížeči, kterým právě teď tento článek čtete.

ZAROVNÁNÍ	Význam
BOTTOM	Zarovná spodní hranu obrázku se spodní hranou obklopujícího textu. Spodní hrana textu je rovna základní čáře minus standardní výška spodního dotahu v textu.
MIDDLE	Zarovná střed obrázku s obklopujícím textem.
TOP	Zarovná horní hranu obrázku s horní hranou obklopujícího textu. Horní hrana textu je rovna základní čáře plus výška písmene se standardním horním dotahem v textu.
LEFT	Zarovná obrázek vlevo od obklopujícího textu. Všechen předcházející a následující text obtéká vpravo obrázek.
RIGHT	Zarovná obrázek vpravo od obklopujícího textu. Všechen předcházející a následující text obtéká vlevo obrázek.
Následující hodnoty parametru jsou sice uvedeny v MSDN, ale v dokumentaci k HTML se nezmiňují. Přesto v prohlížečích Chrome, Edge a Firefox jistým způsobem fungují - dokonce se zná, že shodně.
ABSBOTTOM	Zarovná spodní hranu obrázku s absolutní spodní základnou obklopujícího textu. Absolutní spodní základna je rovna základní čáře textu minus výška největšího spodního dotahu.
BASELINE	Zarovná spodní hranu obrázku se základní čarou obklopujícího textu.
ABSMIDDLE	Zarovná střed obrázku s absolutním středem obklopujícího textu. Absolutní střed je střední bod mezi absolutní spodní základnou a absolutní horní základnou.
TEXTTOP	Zarovná horní hranu obrázku s absolutní horní základnou obklopujícího textu. Absolutní horní základna je rovna základní čáře textu plus výška písmene s největším horním dotahem.

Není-li parametr vůbec uveden, platí BOTTOM.

Názorně ukáže chování parametru "align" nejlépe interpretace vaším konkrétním prohlížečem. Musí to však být na rozsáhlejším textu. Aby opticky lépe vynikla poloha obrázku vzhledem k okolnímu textu, je za slovo "pohraničí" přidán znak podtržítko a značka "<img>" je v textu HTML svým počátečním znakem "<" umístěna bezprostředně za tímto podtržítkem. To má pro puntičkářské čtenáře význam hlavně v případech detailního zkoumání zarovnání na spodní účaří textu - porovnává se poloha levého dolního rohu orámování vzhledem ke koncovému bodu podtržítka. A fakt tam např. mezi BOTTOM a ABSBOTTOM rozdíl je :-)

PRVNI.HTM

Zarovnání obrázku: align=BOTTOM

Jmenuji se Jan Novák a jsem studentem 1. ročníku oboru Geovědní a montánní turismus. Zvolil jsem ho pro zajímavá támata, jako např. to o hradu Grabštejn. Hrad a zámek tohoto jména stojí na strmém ostrohu nedaleko údolí řeky Lužické Nisy v místech, kde tok řeky opouští hornatou krajinu severočeského pohraničí_ a poté i Čechy. O tom, kdy byl původní hrad Grafenštejn založen, dodnes nepanuje mezi historiky shoda. Jisté však je, že se zde ve 2. polovině 13. století, v době vlády Přemysla Otakara II, objevují purkrabí z Donína, pánové na Grafenštejně. Dominantou nově vystavěného hradu i širokého okolí se stala vysoká a mohutná okrouhlá věž. Byla mnohokrát přestavována, dnes je snížena a opatřena historizující helmicí. Věž je nejvýznamnější památkou na nejstarší fázi stavebních dějin Grabštejna. Panství a hrad na strategickém místě v pomezí Čech a Lužice pak byly zejména v 15. století dějištěm řady válečných střetů. Pravděpodobně z této doby je i linie opevnění s flankovacími věžicemi, dnes částečně zachované v hmotě jižního křídla. Opevnění bylo pravděpodobně velmi pevné, neboť odolalo i soustředěnému několikatýdennímu náporu spojených vojsk lužického Šestiměstí a několika severočeských pánů. Donínové se zde udrželi až do poloviny 16. století, kdy hrad museli pro dluhy a spoluvlastnické potíže prodat.

PRVNI.HTM

Zarovnání obrázku: align=MIDDLE

PRVNI.HTM

Zarovnání obrázku: align=TOP

PRVNI.HTM

Zarovnání obrázku: align=LEFT

PRVNI.HTM

Zarovnání obrázku: align=RIGHT

PRVNI.HTM

Zarovnání obrázku: align=ABSBOTTOM

PRVNI.HTM

Zarovnání obrázku: align=BASELINE

PRVNI.HTM

Zarovnání obrázku: align=ABSMIDDLE

PRVNI.HTM

Zarovnání obrázku: align=TEXTTOP

Parametry width a height - šířka a výška

Standardně je obrázek na ploše interpretu zobrazen ve své originální velikosti - jeden bod obrázku = jeden bod obrazovky. Parametry "width" a "height" lze zajistit jinou velikost.

Parametr width řídí šířku obrázku a má tvar

width="N"

kde N je (v bodech - pixelech) zadaná požadovaná šířka obrázku - např. ... width="65" ... zobrazí obrázek tak, že jeho šířka bude 65 bodů obrazovky bez ohledu na původní šířku.

Parametr může mít i tvar

width="P%"

kde P je (v procentech) zadaná požadovaná šířka obrázku - např. ... width="50%" ... zobrazí obrázek tak, že jeho šířka bude 50 procent (tedy polovina). Pozor však: 100% je zde šířka objektu, ve které je obrázek umístěn. Je-li to buňka tabulky, pak 100% je šířka buňky tabulky a obrázek s width="50%" bude mít šířku rovnou polovině šířky buňky. Je-li obrázek součástí odstavce volně umístěného v těle dokumentu, pak 100% je šířka celé zobrazovací plochy interpretu (např. pro maximalizované okno prohlížeče je to zhruba celá obrazovka) a obrázek pak bude mít šířku poloviny celé obrazovky.

Parametr height řídí výšku obrázku a má tvar

height="N"

resp.

height="P%"

a platí o něm analogicky všechno to co parametru "width".

Při určení výšky nebo šířky parametry "width" nebo "height" odlišně od velikosti originálu obrázku je však nutno počítat s tím, že interpretovaný obrázek nebude obsahově totožný s originálem: je-li nově zadávaná např. šířka větší než šířka originálu, přibudou body, je-li menší, ubudou body. Není stanoveno, jak se tak bude dít, zda body které zůstanou budou nějakým způsobem upravovány vzhledem k bodům které ubyly, nebo jak se zjistí barevnost bodů které přibudou apod. Tento mechanismus se ponechává na použitém interpretu a ten to často ponechá na grafickém prostředí nosného operačního systému.

O parametrech "width" a "height" platí dále toto důležité:

Je-li ve značce "<img>" zadán jen jeden z nich, druhý rozměr obrázku se při zobrazování přizpůsobí tak, aby zůstaly zachovány poměry stran originálního obrázku.
Jsou-li ve značce "<img>" zadány oba parametry současně, určí se zobrazené rozměry podle pravidel uvedených výše a lze tedy dosáhnout jiného poměru stran - obrázek bude oproti originálu deformovaný.

Obrázek uváděný v příkladech shora má šířku 147 bodů a výšku 140 bodů (poměr stran je 1.05 : 1, tedy téměř čtverec) a v takové velikosti je shora zobrazen. Značka "<img>" vkládající obrázek a mající parametry

způsobí interpretaci obrázku (poměr stran je zde 2 : 1 = obdélník 2x širší než vyšší) takto :

PRVNI.HTM

Moje první stránka.

Jmenuji se Jan Novák a jsem studentem 1. ročníku.

Odkazy

Odkaz (tak je překládán termín hyperlink) je ta část dokumentu v HTML, která nese informaci o odkazovaném dokumentu (nebo i o konkrétním místě ve stejném dokumentu) a která je „clickable" - „klikatelná" - uživatel na ni může „kliknout". Je to notoricky známý mechanismus, kdy po najetí myší např. na - většinou modře podtržený - text se změní kurzor myši na ruku s nataženým ukazováčkem, jen jen kliknout. A po kliknutí - úžasná věc - už jsem někde jinde!

Označení části dokumentu za oblast s vazbou na jiný dokument zajišťuje značka "<a>" (z anglického anchor - kotva, ukotvení, zajištění). Je párová, musí k ní tedy existovat "</a>". Vazbu na jiný dokument zajišťuje parametr "href" značky. Vše uvnitř tohoto páru značek - počínaje "<a>" a konče "</a>" - může být teoreticky cokoliv, nejčastěji se používá text, obrázek nebo kombinace textu a obrázku. A právě to, co je mezi těmito značkami, bude označeno opticky jinak (často např. modře podtrženě) a to je to „citlivé na kliknutí“.

Značku "<a>" lze také použít pro vložení tzv. záložky do dokumentu. Záložka pojmenovává jedno konkrétní místo v dokumentu, a to parametrem "name" značky "<a>". Může sloužit jako cíl odkazu - nejen v tom dokumentu, kde je definována, ale i jako cíl odkazovaný z jiného dokumentu.

Určení odkazu

Odkaz je uvozen značkou ve tvaru

kde CÍL je označení dokumentu (nebo místa v něm), který má začít interpret interpretovat, jakmile na zobrazovací ploše interpretu někdo „klikne na odkaz". Cílem je především to, co je známo jako URL - „webovská adresa" ve tvaru např. "http://www.seznam.cz". Může to však být i označení souboru - s HTML kódem (např. "DRUHA.HTM"), s obrázkem (např. "MOJEFOTO.JPG") atd.

Je-li druhý odstavec příkladu shora zapsán takto:

<p>Jmenuji se Jan Novák a jsem studentem 1.
ročníku <a href="http://www.vsb.cz">VŠB</a> - Technické
univerzity v Ostravě.</p>

pak interpret zobrazí na své zobrazovací ploše to co je mezi značkou "<a>" a "</a>" (tedy tři znaky VŠB) podtrženě, podle nastavení prohlížeče většinou podtrženě modře nebo fialově, a učiní z nich oblast „citlivou na kliknutí". Jakmile ten, kdo zírá na první stránku Jana Nováka, najede myší na VŠB a klikne, interpret místo stránky Jana Nováka začne interpretovat dokument z adresy www.vsb.cz.

PRVNI.HTM

Moje první stránka.

Jmenuji se Jan Novák a jsem studentem 1. ročníku VŠB - Technické univerzity v Ostravě.

Kdyby však mezi značkami "<a>" a "</a>" byl celý název školy, tj.

<p>Jmenuji se Jan Novák a jsem studentem 1.
ročníku <a href="http://www.vsb.cz">VŠB - Technické
univerzity v Ostravě</a>.</p>

byl by oblastí pro přechod na odkazovaný dokument celý tento text:

PRVNI.HTM

Moje první stránka.

Jmenuji se Jan Novák a jsem studentem 1. ročníku VŠB - Technické univerzity v Ostravě.

Mezi značkami "<a>" a "</a>" může být (třeba samostatně) obrázek (viz značka "<img>") - pak i tento obrázek bude „klikatelný“".

Definice a použití záložky

Záložka je definována značkou ve tvaru

kde JMZÁLOŽKY je jméno nově definované záložky, např.

Protože značka "<a>" je párovou značkou, musí být uvedena i značka "</a>". Protože ale v tomto případě je značkou <a> definováno pouze konkrétní, jedno jediné místo v dokumentu, nemá žádný význam, když mezi "<a>" a "</a>" bude cokoliv jiného. Proto uvádí autoři HTML dokumentů tyto dvě značky bezprostředně za sebou:

Definovaná záložka se pak použije jako cíl odkazu tak, že v parametru "href=" se uvede jméno záložky uvozené znakem "#":

<p> ... viz např. <a href="#KAPITOLA7"> v sedmé kapitole </a> ... </p>

Text v sedmé kapitole bude interpretem označen jako text pro odkaz, kterým je místo v dokumentu označené záložkou KAPITOLA7. Po kliknutí na něj bude interpretace pokračovat o místa, kde je značkou "<a>" záložka KAPITOLA7 definována.

Tabulky

Tabulky jsou primárně jako v každém dokumentu nástrojem pro uspořádání informací ve tvaru tabulky. Tabulky jsou však v dynamicky formátovaném textu HTML dokumentu navíc důležitým nástrojem pro uspořádání objektů na zobrazovací ploše interpretu.

Obecné schéma pro popis tabulky (angl. Table) v HTML dokumentu je následující:

<table>
   ... popis řádku ...
   ... popis řádku ...
   ...
</table>

Obecné schéma pro popis řádku tabulky (angl. Table Row) v HTML dokumentu je následující:

<tr>
   ... popis buňky ...
   ... popis buňky ...
   ...
</tr>

Obecné schéma pro popis datového obsahu buňky tabulky (angl. Table Data) v HTML dokumentu je následující:

<td>
... obsah buňky ...
</td>

Popis tabulky - značka <table>

Značka uvozuje popis jedné tabulky, je párová (musí být někde dále uvedena značka "</table>") a může mít řadu parametrů. Některé parametry jsou ve stručnosti popsány dále.

Parametr border řídí tloušťku čar vykreslujících ohraničení tabulky. Parametr má tvar

border="N"

kde N je (v bodech - pixelech) zadaná tloušťka čar. Je-li N=0, pak tabulka nemá vykresleny žádné čáry ohraničení. Podrobněji viz níže kapitola „Ohraničení v tabulce“.

Parametr align řídí zarovnání tabulky. Parametr má tvar

align="ZAROVNÁNÍ"

kde ZAROVNÁNÍ je jedno z klíčových slov (psaných libovolnou velikostí písmen) LEFT, CENTER, RIGHT (pro zarovnání tabulky po řadě vlevo, na střed a vpravo). Zarovnání je vztaženo k objektu, ve kterém je tabulka umístěna, např. k odstavci, je-li tabulka umístěna uvnitř odstavce. Nejčastěji autoři dokumentu umísťují tabulku na úrovni samostatných odstavců. V tom případě je zarovnání vztaženo k celé zobrazovací plocha interpretu, tedy zhruba k obrazovce. Je-li uvedeno jedno z klíčových slov LEFT nebo RIGHT a tabulka je vložena dovnitř odstavce, je tabulka okolním textem obtékána. Pokud je uvedeno klíčové slovo CENTER nebo pokud parametr vůbec není uveden, tabulka okolním textem obtékána není.

Parametr width řídí šířku tabulky. Parametr má jeden z tvarů

width="N"
width="P%"

kde N je (v bodech - pixelech) zadaná požadovaná šířka tabulky (absolutně) a P je ná šířka align="center" align="center" align="center"tabulky. Pozor však: 100% je zde šířka objektu, ve které je tabulka umístěna. Je-li to buňka jiné tabulky, pak 100% je šířka buňky tabulky a tabulka s width="50%" bude mít šířku rovnou polovině šířky buňky. Je-li tabulka volně umístěna v těle dokumentu, pak 100% je šířka celé zobrazovací plochy interpretu (např. pro maximalizované okno Internet Exploreru je to zhruba celá obrazovka) a tabulka pak bude mít šířku poloviny zobrazovací plochy.

Parametr height řídí výšku tabulky. Parametr má jeden z tvarů

height="N"
height="P%"

kde N je (v bodech - pixelech) zadaná požadovaná výška tabulky (absolutně) a P je (v procentech) zadaná požadovaná výška tabulky. Pozor však: pro 100% výšky platí analogická pravidla jako pro šířku (viz předchozí parametr).

Parametr bgcolor řídí jednolitou barvu pozadí tabulky. Parametr má tvar

bgcolor="BARVA"

kde BARVA je určení barvy jedním ze způsobů popsaných shora v odstavci Určení barvy (viz). Takto nastavená barva platí pro celou tabulku, pokud není v definici konkrétního řádku nebo konkrétní buňky předepsáno jinak.

Parametr background zařídí naplnění plochy pozadí tabulky obrázkem. Parametr má tvar

bgcolor="SOUBOR"

kde SOUBOR je určení souboru s obrázkem (např. MRÁČKY.JPG). Takto nastavené pozadí platí pro celou tabulku, pokud není v definici konkrétní buňky předepsáno jinak.

Popis řádku - značka <tr>

Značka uvozuje popis jednoho řádku tabulky a je párová (musí být někde dále uvedena značka "</tr>"). Tabulka jako celek má pak tolik řádků, kolik dvojic <tr> ... </tr> je uvedeno mezi <table> ... </table>. Značka "<tr>" může mít řadu parametrů. Některé parametry jsou ve stručnosti popsány dále.

Parametr align řídí vodorovné zarovnání na řádku. Parametr má tvar

align="ZAROVNÁNÍ"

kde ZAROVNÁNÍ je jedno z klíčových slov (psaných libovolnou velikostí písmen) LEFT, CENTER, RIGHT (pro zarovnání po řadě vlevo, na střed a vpravo). Zarovnání se týká obsahu všech buněk daného řádku, není-li v definici konkrétních buněk předepsáno jinak.

Parametr valign (vertical alignment) řídí svislé zarovnání na řádku. Parametr má tvar

valign="ZAROVNÁNÍ"

kde ZAROVNÁNÍ je jedno z klíčových slov (psaných libovolnou velikostí písmen) TOP, MIDDLE, BOTTOM (pro zarovnání po řadě na horní okraj, na střed a na dolní okraj). Zarovnání se týká obsahu všech buněk daného řádku, není-li v definici konkrétních buněk předepsáno jinak.

Parametr height řídí výšku řádku. Parametr má jeden z tvarů

height="N"
height="P%"

kde N je (v bodech - pixelech) zadaná požadovaná výška řádku (absolutně) a P je (v procentech) zadaná požadovaná výška řádku. Pozor však: 100% je zde výška celé tabulky.

Parametr bgcolor řídí barvu pozadí řádku tabulky. Parametr má tvar

bgcolor="BARVA"

kde BARVA je určení barvy jedním ze způsobů popsaných shora v odstavci Určení barvy (viz). Takto nastavená barva platí pro celý řádek tabulku, pokud není v definici konkrétní buňky předepsáno jinak.

Popis obsahu buňky - značka <td>

Značka uvozuje popis obsahu jedné buňky v tabulce a je párová (musí být někde dále uvedena značka "</td>"). Řádek jako celek má pak tolik buněk, kolik dvojic <td> ... </td> je uvedeno mezi <tr> a </tr>. Značka "<td>" může mít řadu parametrů. Některé parametry jsou ve stručnosti popsány dále.

Parametr align řídí vodorovné zarovnání obsahu buňky. Parametr má tvar

align="ZAROVNÁNÍ"

kde ZAROVNÁNÍ je jedno z klíčových slov (psaných libovolnou velikostí písmen) LEFT, CENTER, RIGHT (pro zarovnání po řadě vlevo, na střed a vpravo).

Parametr valign (vertical alignment) řídí svislé zarovnání v buňce. Parametr má tvar

valign="ZAROVNÁNÍ"

kde ZAROVNÁNÍ je jedno z klíčových slov (psaných libovolnou velikostí písmen) TOP, MIDDLE, BOTTOM (pro zarovnání po řadě na horní okraj, na střed a na dolní okraj).

Parametr width řídí šířku buňky. Parametr má jeden z tvarů

width="N"
width="P%"

kde N je (v bodech - pixelech) zadaná požadovaná šířka buňky (absolutně) a P je (v procentech) zadaná požadovaná šířka buňky. Pozor však: 100% je zde šířka celé tabulky.

Parametr height řídí výšku buňky. Parametr má jeden z tvarů

height="N"
height="P%"

kde N je (v bodech - pixelech) zadaná požadovaná výška buňky (absolutně) a P je (v procentech) zadaná požadovaná výška buňky. Pozor však: 100% je zde výška celé tabulky.

Parametr bgcolor řídí barvu pozadí buňky. Parametr má tvar

bgcolor="BARVA"

kde BARVA je určení barvy jedním ze způsobů popsaných shora v odstavci Určení barvy (viz). Má přednost před naplněním pozadí tabulky.

Parametr background zařídí naplnění plochy pozadí buňky obrázkem. Parametr má tvar

background="SOUBOR"

kde SOUBOR je určení souboru s obrázkem (např. MRÁČKY.JPG). Má přednost před naplněním pozadí tabulky.

Parametr colspan řídí vodorovné sloučení buněk. Parametr má tvar

colspan="POČET"

kde POČET je počet buněk vpravo od dané buňky, kolik jich (včetně dané buňky) bude sloučeno ve vodorovném směru do buňky jediné. Populárně řečeno: přes kolik sloupců se daná buňka bude roztahovat, nenasyta jedna. Pozor: daný řádek pak bude mít o POČET-1 buněk (tj o POČET-1 párů <td> ... /td>) méně.

Parametr rowspan řídí svislé sloučení buněk. Parametr má tvar

rowspan="POČET"

kde POČET je počet buněk dolu od dané buňky, kolik jich (včetně dané buňky) bude sloučeno ve svislém směru do buňky jediné. Populárně řečeno: přes kolik řádků se daná buňka bude roztahovat. Pozor: daný sloupec pak bude mít o POČET-1 buněk (tj o POČET-1 párů <td> ... /td>) méně.

Parametry rowspan a colspan mohou být v definici buňky uvedeny i současně.

Obsah buňky

Obsahem buňky je to, co je uvedeno mezi značkami "<td>" a "</td>". Obsahem buňky je - zhruba řečeno - víceméně cokoliv, co už bylo popsáno. Obsahem buňky bývá tedy především

samostatný text včetně značek pro formátování textu a event. odkazů
text tvořící jeden nebo více odstavců (značky "<p>" a "</p>")
samostatně nebo i do textu vložených jeden nebo více obrázků (značka "<img>")

Jako příklad může sloužit tabulka 3 ř x 4 sl, obsahem jsou texty ve smyslu adres buněk podobně jako v Excelu. Text značky "<table>" je následující:

Jeho interpretace v okně prohlížeče:

PRVNI.HTM

A1	B1	C1	D1
A2	B2	C2	D2
A3	B3	C3	D3

Ohraničení (Border) v tabulce

Ohraničení vykreslují prohlížeče čarami samostatně pro celou tabulku („obvod“ tabulky), samostatně pak pro každou buňku. Ohraničení pro konkrétní buňku má přednost před ohraničením pro celou tabulku, v níž se buňka nachází.

Ohraničení buňky

Ohraničení konkrétní buňky stanoví její značka "<td>" parametrem style, který má tvar

kde P je tloušťka čáry v px (pixelech), TYP je klíčové slovo řídící typ čáry (solid-plná, dotted-tečkovaná, dashed-čárkovaná, double-dvojitá), BARVA je určení barvy jedním ze způsobů popsaných shora v odstavci Určení barvy.

Příklad pro A2: style="border: 0px;"

Příklad pro C2: style="border: 4px double red;"

Příklad pro D3: style="border: 4px solid blue;"

Buňka A2 bude bez ohraničení (a nemá tedy smysl zadávat typ čáry ani její barvu). Buňku C2 ohraničí červenou dvojitou (double) čarou, přičemž každá z těch dvou čar bude mít tloušťku 1 px a jejich rozestup bude 2 px: 4(celková požadovaná tloušťka)-1(tloušťka vnitřní čáry)-1(tloušťka vnější čáry)=2 px. Buňku D3 ohraničí spojitou (solid) modrou čarou o tloušťce 4 px.

PRVNI.HTM

A1	B1	C1	D1
A2	B2	C2	D2
A3	B3	C3	D3

Ohraničení tabulky

Tloušťku čáry ohraničení celé tabulky řídí parametr border značky "<table>" a zadává se v pixelech. Je-li jeho hodnota nula (tj. border="0") nebo úplně chybí, pak nemá ohraničení ani tabulka ani obecně jednotlivé buňky. V tomto případě však mohou konkrétní buňky definovat své vlastní ohraničení, které má přednost před ohraničením celé tabulky.

Standardně používají interpreti při nenulové tloušťce orámování dvě barvy: jednu pro levou a horní stranu, druhou pro pravou a spodní stranu. Důvod je zřejmě pro dosažení pseudo-prostorového, plastického vzhledu (ten se však zřetelně uplatní až při větších tloušťkách čar).

V nejjednodušším případě je pak tabulka uvozená následující značkou "<table>":

zobrazena takto:

PRVNI.HTM

A1	B1	C1	D1
A2	B2	C2	D2
A3	B3	C3	D3

Ohraničující čáry celé tabulky lze ve značce "<table>" celkem detailně řídit parametrem style obdobně jako ve značce "<td>". Ten má přednost před případně dalšími parametry značky "<table>". Jeho popis však přesahuje záměry této publikace, alespoň příklad: následující značka "<table>"

zobrazí tabulku následovně:

PRVNI.HTM

A1	B1	C1	D1
A2	B2	C2	D2
A3	B3	C3	D3

Za pozornost stojí volba názvů atributů parametru style - např. pro border-width nepoužili jen jedno slovo border, aby to nebylo ve sporu s parametrem border celé značky "<table>". Ten být uveden musí, aby byly ohraničeny jednotlivé buňku obecně všechny a nemuselo se definovat ohraničení pro každou buňku jednotlivě. Zároveň je vidět, že parametr style má přednost před ostatními.

Příklad na tabulku v tabulce

Co je však méně patrné (ale neméně důležité) je to, že obsahem buňky tabulky může být i tabulka:

a1	b1	c1
a2	b2	c2
a3	b3	c3

V uvedeném příkladu jde o tabulku 3 ř x 4 sl, která ve druhé buňce druhého řádku obsahuje tabulku 3 ř x 3 sl.

Příklad na sloučení buněk

Mějme tuto definici tabulky:

<table border="1" width="50%" height="200" bgcolor="#66FF66" align="center" style="border-collapse: collapse">

<tr>                                                                ....   1. řádek tabulky
    <td width="50%">AA</td>                                           ... buňka 1. sloupce
    <td>BB</td>                                                       ... buňka 2. sloupce
    <td>CC</td>                                                       ... buňka 3. sloupce
    <td>DD</td>                                                       ... buňka 4. sloupce
</tr>

<tr valign="middle" height="60%" bgcolor="red" align="center">      ....   2. řádek tabulky
    <td align="right" valign="top" bgcolor="#00FFFF"><b>EE</b></td>   ... buňka 1. sloupce
    <td colspan="2" rowspan="2">FF</td>                               ... buňka 2+3. sloupce a 2+3. řádku
    <td>HH</td>                                                       ... buňka 4. sloupce
</tr>

<tr>                                                                ....   3. řádek tabulky
    <td>II</td>                                                       ... buňka 1. sloupce
    <td>LL</td>                                                       ... buňka 4. sloupce
</tr>

</table>

Tabulku zobrazí interpret takto:

AA	BB	CC	DD
EE	FF		HH
II	FF		LL

K tomu komentář:

Celá tabulka bude mít čáry ohraničující tabulku i jednotlivé buňky o šířce 1 bod. Šířka celé tabulky bude polovina šířky zobrazující plochy interpretu, ale výška bude vždy 200 bodů bez ohledu na výšku zobrazující plochy. Barva pozadí každé z buněk bude (šestnáctkově zapsána) 66 červené, FF zelené a 66 modré - pokud nestanoví definice řádku nebo buňky jinak.. Tabulka bude vycentrována vzhledem ke zobrazující ploše interpretu.
První řádek tabulky je "úplně normální" - snad jen to, že explicitně stanovenou šířkou jeho první buňky je (při absenci stanovení šířek prvních buněk dalších řádků) stanovena šířka celého prvního sloupce - zde na polovinu celé tabulky.
Druhý řádek bude mít výšku rovnou 60% výšky celé tabulky. Jeho buňky budou červené, vodorovně i svisle zarovnané na střed, pokud nestanoví definice konkrétní buňky jinak.
První buňka druhého řádku bude mít obsah zarovnaný vodorovně vpravo a svisle k hornímu okraji. Barvu bude mít azurovou (žádná (00) červená a naplno (FF) zelená a modrá).
Druhá buňka druhého řádku se bude roztahovat na dva sloupce vodorovně (další definovaná buňka druhého řádku bude až třetí - přesněji buňka čtvrtého sloupce) a na dva řádky svisle (další buňka třetího řádku bude druhá - přesněji buňka čtvrtého sloupce).
Třetí řádek bude mít první buňku "normální". Ovšem druhou buňku nebude mít explicitně definovanou, protože ta je definována už druhou buňkou předchozího řádku, která se "roztahuje" na dva řádky. Ale ani třetí buňku nebude mít explicitně definovanou, protože ta je definována už druhou buňkou předchozího řádku, která se "roztahuje" nejen na dva řádky, ale také na dva sloupce. Takže další - druhou - definovanou buňkou třetího řádku bude až buňka ve čtvrtém sloupci třetího řádku.

Struktura HTML dokumentu

Až do tohoto místa byly všechny příklady - přesněji zápisy textu v HTML - uváděny jako jediný, nijak nestrukturovaný obsah souboru s příponou HTM. Definice jazyka HTML však umožňuje vytvořit komplexnější strukturu dokumentu, sestávající z jednotlivých sekcí. V tomto odstavci uveďme jen dvě nejpoužívanější: záhlaví (angl. head) dokumentu a tělo (angl. body) dokumentu. Sekce jsou v zápisu textu dokumentu uzavřeny mezi (párové) značky "<html>" a "</html>".

Zápis textu dokumentu pak vypadá takto:

To, co bylo až do této chvíle uvedeno, bylo vlastně vždy jen tělo dokumentu.

Záhlaví dokumentu

Sekce záhlaví dokumentu je uzavřena mezi (párové) značky "<head>" a "</head>". Sekce neovlivňuje nijak zobrazení interpretovaného dokumentu, poskytuje však informace samotnému interpretu. Sestává z žádné, jedné nebo více značek podle následujících odstavců.

Značka <title> - název, titul

Značka je párová a má tvar např.

<title>Název, titul dokumentu, stránky</title>

Text uzavřený mezi značky se objeví jednak v nadpisu okna prohlížeče, jednak v liště tlačítka Start (obojí platí pro Microsoft Windows a Internet Explorer).

Značka <meta> - metainformace

Důležitá značka pro dokumenty, které mají být umístěny na serveru a mají být přístupné z celého světa. Pomocí těchto značek se především poskytuje interpretu informace o národním prostředí a kódové stránce daného dokumentu, dále může nést informace o autorovi, obsahu, klíčových slovech apod.. Značka je nepárová a má tvar

nebo

Pro nastavení kódové stránky dokumentu v češtině a českého národního prostředí se použijí dvě značky <meta> ve tvaru

Další informace lze zadat značkami ve tvaru např.

Značka <link> - odkaz na související dokument

Značka je nepárová, uveďme alespoň jeden z nejdůležitějších tvarů - odkaz na soubor s definicí vlastních stylů. Ten má tvar např.

kde parametr href obsahuje označení souboru s definicí stylů, klíčové slovo stylesheet parametru rel označuje právě tu skutečnost, že odkazovaný soubor je souborem definic stylů.

Značka <bgsound> - zvuk na pozadí

Značkou se zajistí, že interpret po zobrazení stránky přehraje zvukový zadaný soubor. Značka má tvar např.

kde parametrem src =source, zdroj) je určen zvukový soubor, který se bude přehrávat. Parametrem loop se zadá, kolikrát se má soubor přehrát - je-li tento parametr roven minus jedné, přehrává se donekonečna (přesněji po dobu, po kterou je dokument zobrazen.

Aby byl zvuk slyšitelný, musí být na počítači, na kterém je dokument zobrazen, korektně nainstalován zvukový hardware a dále ovladače pro konkrétní typ zvukového nebo hudebního souboru (MID, WAV apod.).

Tělo dokumentu

Tělo dokumentu je uvozeno značkou "<body>" a ukončeno její párovou značkou "</body>". Mezi těmito dvěma značkami je vloženo vše, co má tvořit interpretovaný obsah dokumentu - tj. cokoliv co bylo popsáno až do začátku této kapitoly. Zvláště to tedy jsou odstavce obsahující (formátovaný) text, obrázky, odkazy a tabulky.

Samotná značka "<body>" má řadu parametrů, uveďme alespoň dva, které řídí pozadí dokumentu:

kde BARVA je určení barvy pozadí celého dokumentu a zadává se jedním ze způsobů popsaných shora v odstavci Určení barvy (viz), tedy např.

a OBRÁZEK je označení souboru s obrázkem, který bude tvořit pozadí dokumentu, tedy např.

Pokud je obrázek menší než zobrazovací plocha, pak se na ni poskládá "dlaždicově".

Rámy - Frames

V předchozí kapitole byla uvedena obvyklá základní struktura dokumentu HTML. V novějších definicích HTML (a novějších prohlížečích, které ji akceptují) byla rozšířena definice dokumentu o typ dokumentu:

Dokument HTML s tělem (body) dokumentu
Dokument HTML s definicí množiny rámů (frameset)

Struktura HTML s tělem dokumentu (je rovněž popsána výše):

Struktura HTML s množinou rámů:

Dokument HTML s množinou rámů jen organizuje zobrazovací plochu interpretu do obdélníkových oblastí (tzv. rámů, angl. frame) a zajišťuje, že se v každé z nich zobrazí nějaký samostatně interpretovaný dokument. Ve velmi hrubém prvním přiblížení lze říci, že je to jako kdyby se z plochy prohlížeče vytvořila tabulka o několika řádcích a několika sloupcích. V každé „buňce“ (=rámu) pak bude zobrazen samostatně interpretovaný HTML soubor.

Pokud je na ploše rámů více, mohou být odděleny vodorovnými a svislými příčkami. Pokud to autor dokumentu povolí, pak může uživatel prohlížející interpretovaný dokument příčkami posouvat. Tím se bude dynamicky měnit velikost jednotlivých rámů a většinou i rozložení interpretovaného obsahu.

Konkrétně: vytvořme soubor HLAVNI.HTM, který bude jen organizovat zobrazovací plochu interpretu do dvou svislých obdélníkových oblastí (dvou rámů) - tedy do dvou „sloupců" - a zajistí, že se v levém zobrazí interpretovaný soubor ABC.HTM a v pravém soubor XYZ.HTM. Takový soubor HLAVNI.HTM tedy bude obsahovat definici množiny dvou rámů, jeden pro ABC.HTM a jeden pro XYZ.HTM.

Obsah soubory ABC.HTM nechť je co nejjednodušší, např.

Jsem soubor ABC.

Analogicky soubor XYZ.HTM:

Jsem soubor XYZ.

Specifikace jednoho rámu - značka <frame>

Jeden rám = jednu obdélníkovou oblast zobrazovací plochy specifikuje nepárová značka <frame>, která musí mít minimálně parametr src:

kde ZDROJ určuje, co se v rámu zobrazí. Má tvar známý jako URL, tedy "webovou" adresu (např. "http://www.vsb.cz") nebo označení souboru ("PRVNI.HTM"). Volitelný parametr JMÉNO přiděluje rámu jméno, který mohou použít odkazy při umísťování odkazovaného dokumentu.

Jednotlivé rámy jsou standardně odděleny příčkami, které může uživatel posouvat a měnit tak rozměry jednotlivých rámů. Pokud autor dokumentu usoudí, že uživateli zakáže měnit rozměr právě tohoto rámu, uvede do značky parametr „NORESIZE“. Pokud mu to chce povolit, parametr neuvede.

Množina rámů - značka <frameset>

Značka <frameset> je párová (musí tedy být někde dále uvedena značka </frameset>) a omezuje specifikace jednotlivých obdélníkových oblastí. Specifikací jednotlivé obdélníkové oblasti je buď specifikace jednoho rámu nebo specifikace množiny rámů. Značka má několik parametrů, musí být uveden nejméně jeden z parametrů rows nebo cols:

kde B je jedna z cifer 0 (nula) nebo 1 (jedna). Parametr „frameborder“ se uvede s hodnotou 0 (nula), jestliže autor dokumentu nechce, aby se zobrazily příčky mezi jednotlivými rámy. Pokud parametr vůbec není uveden nebo je uveden s hodnotou 1 (jedna), příčky zobrazeny budou.

T je celočíselná hodnota v pixelech, řídící tloušťku viditelného ohraničení. Uvedením parametru „noresize“ zakazuje autor dokumentu měnit rozměry rámů této množiny uchopením příslušné příčky a měnit její polohu.

Hodnoty parametrů „rows“ a „cols“ mají stejný tvar. Popišme nejprve hodnoty např. SEZŘÁDKŮ parametru „rows“. Hodnotou je seznam požadovaných výšek jednotlivých řádků oddělených navzájem čárkou. Seznam se řídí následujícími pravidly (uveďme je pro případ, že celá množina pokrývá celou zobrazovací plochu):

Uvede se tolik hodnot, kolik má být rámů pod sebou. První hodnota určuje výšku prvního rámu shora, druhá výšku druhého rámu shora atd.
Každá z hodnot je buď celé číslo (např. 200), nebo celé číslo následované znakem % (např. 30%), nebo hvězdička (*), nebo celé číslo následované hvězdičkou (např. 3*).
Je-li hodnotou celé číslo, pak výška daného řádku bude tolik bodů (např. 200 bodů).
Je-li hodnotou celé číslo následované znakem %, pak výška daného řádku bude tolik procent výšky zobrazovací plochy, kolik je zadané číslo (např. 30 procent).
Je-li hodnotou hvězdička, pak výška daného řádku bude "zbytek" výšky zobrazovací plochy.
Je-li hodnotou celé číslo následované hvězdičkou (např. 3*), pak výška daného řádku bude tolikanásobek "zbytku" výšky zobrazovací plochy rozpočtené na všechny řádky s výškou obsahující hvězdičku, kolik je číslo.

Poslední bod asi vyžaduje příklad. Je-li značka uvedena ve tvaru

pak daná množina řádků bude obsahovat tři řádky. První bude mít výšku 10% zobrazovací plochy (tj. jednu desetinu výšky). Zbývá devět desetin. O ně se budou dělit zbývající dva řádky a to tak, že druhý bude mít výšku 4/10 a třetí 5/10 výšky zobrazovací plochy (jinak řečeno dělí se o zbytek výšky v poměru 4 : 5).

Jestliže množina rámů nepokrývá celou zobrazovací plochu, ale je např. jedním "řádkem" jiné množiny, pak je třeba pojem "výška zobrazovací plochy" zaměnit za "výška definované množiny".

Analogická pravidla platí pro hodnoty SEZSLOUPCŮ parametru „cols“ vzhledem k šířce sloupců.

Specifikace množiny rámů

Specifikace množiny rámů je definována takto:

<frameset border="B" rows="SEZŘÁDKŮ" cols="SEZSLOUPCŮ">
   Specifikace jednoho rámu nebo množiny rámů
   Specifikace jednoho rámu nebo množiny rámů
   ...
</frameset>

V nejjednodušším případě je seznam prvků množiny tvořen specifikací jednotlivých rámů:

Prohlížeč pak zobrazí toto:

Obr. 1:

Množina rámů může být definována i jako „tabulka“ mající dva řádky a dva sloupce:

Prohlížeč zobrazí toto (jsou jen dvě příčky, vodorovná a svislá):

Obr. 2:

Množina rámů ale může být definována i jako „tabulka“ mající dva řádky, přičemž druhým řádkem je „tabulka" mající dva „sloupce":

Prohlížeč pak zobrazí toto:

Obr. 3:

Ovšem pozor: je výrazný (především funkční) rozdíl mezi obr. 2 (viz) a následujícím obr. 4:

Obr. 4:

Na první pohled se zdají stejné. Ovšem množina rámů na obr. 2 má dva "řádky" a dva "sloupce". Vodorovná příčka je zde jenom jedna a lze tedy pouze celé řádky zvýšit nebo snížit; analogicky svislá příčka. Na druhé straně je množina rámů na obr. 4 vytvořena takto:

Má tedy dva "sloupce". Každý s nich je "tabulka" o dvou řádcích. Vodorovná příčka tedy není jedna pro oba sloupce, ale je pro každý sloupec samostatná. Lze tedy po zobrazení rámů nastavit např. tento poměr:

Obr. 5:

což při definici pro obr. 2 nelze. Stav dle obr. 5 lze - přímo po prvotním zobrazení - zajistit následujícím obsahem HLAVNI.HTM:

Rev. 05 / 2007
11 / 2024