[Fidlin]Kondenzované HTML

Nejlepší přes URL: http://www.kiv.zcu.cz/~brada/KondenzovaneHTML/
Poslední aktualizace:


Toto jest kondenzovaný, několika lžičkami příkladů doslazený popis HTML aktualizovaný na verzi HTML 4.0, sepsaný Přemkem Bradou. Prosím vás o připomínky a návrhy k tomuto textu -- protože víc hlav víc ví, a tohle píšu kvůli vám, ne kvůli sobě ;-) .

Kondenzované HTML si nedělá nárok na úplnost, cílem je spíše hutný popis prakticky použitelných značek pro začátečníky a středně pokročilé. Proto začíná u jednoduchých základů a postupně zahušťuje. Sférou zájmu je pouze HTML samotné, oblast dynamických dokumentů (CGI, skriptování, Java) jakož i kaskádní styly ponechává stranou. Čtenář znalý angličtiny najde ostatně vše potřebné u tvůrců Webu na W3C.

U čtenáře předpokládá základní povědomí o tom, jak ovládat nějakou prohlížečku HTML (např. Netscape nebo Lynx) a -- pokud se podle něj chce naučit psát dokumenty -- i o tom jak a kde takový soubor vytvořit. Doporučuji přitom koukat "přes rameno" již zkušeným autorům, tj. zobrazit si zdrojový text rozumně napsané stránky a učit se opisováním ;-) .

Copyright Kondenzovaného HTML (c) 1996-2000 Přemek Brada, <brada@kiv.zcu.cz>.

Text je dovoleno libovolně kopírovat a používat pro osobní potřebu s podmínkou, že při použití jakékoli jeho části v jiném textu bude zřetelně uvedena předchozí informace o copyrightu, tak jak je to koneckonců mezi slušnými lidmi zvykem. Jakékoli komerční využití výslovně nedovoluji.

Kondenzované HTML je k nalezení v Seznamu, U zdroje


Obsah


Co je vlastně HTML

HTML = HyperText Markup Language: jednoduchý jazyk sloužící k označování obyčejného textu tak, aby mohl být zobrazen jako hypertextový dokument (formátování, obrázky, 'horké' odkazy vedoucí od "klíčových slov" na vysvětlující dokumenty).

Text v HTML obsahuje značky (elementy) podle kterých prohlížeč text patřičně zobrazuje. Vetšina značek má formu "závorek" označujících začátek a konec formátování: <značka> znamená začátek daného formátu, </značka> jeho konec. Názvy značek jsou anglická slova nebo zkratky -- např. <B> pro tučný text je odvozeno od "bold". Značky lze zhruba dělit do tří skupin:

  1. blokové formátují tok textu a způsobují dělení na odstavce (nadpisy, odstavce, seznamy, tabulky atd.);
  2. textové mění podobu písma (tučné, zdrojový text, apod.) v rámci odstavce nebo vkládají do textu hypertextové prvky (obrázky, odkazy na jiné dokumenty);
  3. jiné představují různé značky, které se přímo nezobrazují ale které mají význam pro definice různých vlastností hypertextu (značky v hlavičce, komentář).

Značky HTML by měly (podle záměru tvůrců jazyka) popisovat co text znamená (např. "toto je citace"); HTML tedy používá přístup tzv. logického značkování na rozdíl od procedurálního značkování, které popisuje jak se má daný text formátovat a zobrazit (to je v případě HTML věcí prohlížeček). Podstatnou výhodou logického značkování je vysoká vypovídací schopnost o struktuře textu a téměř naprostá nezávislost na softwarových a hardwarových platformách.

Jazyk je na úrovni verze 2.0 (1995) standardizován v RFC 1866, nyní nejpoužívanější jsou standardy verze 3.2 (od 1997) a verze 4.0 (od 1998, aktualizace 2000). Podstatné informace přímo "od zdroje" jsou k dispozici na website tvůrců HTML, organizace W3C čili WWW Konsorcia.


Struktura dokumentu

Celá stránka čili HTML dokument je ohraničen značkami <html> a </html>. Dokumenty mají jednoduchou základní strukturu: začínají záhlavím, po kterém následuje tělo dokumentu s vlastním textem.

Záhlaví obsahuje informace o dokumentu (název, verzi HTML atd.) používané pro interní potřeby prohlížeček, serverů a různých vyhledávacích strojů; na stránce se nezobrazují. Takto např. vypadá záhlaví jednoduchého dokumentu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>

<head>
<title>
Moje první stránka
</title>
<meta name="Author" content="Premysl Brada, 27-Dec-1995">
</head>

<title>...</title> obsahuje nadpis (název) dokumentu poskytovaný pro základní orientaci čtenáře.

Tělo dokumentu obsahuje vlastní text stránky. Např:

<body>
<h1>Velky nadpis</h1>
<!-- toto je komentář -->

<p>
Toto je odstavec textu.  Obsahuje jedno <em>zvýrazněné</em>
a jedno <b>tučně</b> vytištěné slovo.  HTML dokumenty
mohou také obsahovat <img src="www.gif" align="top" alt="www">
obrázky.

<p>
Další odstavec má v sobě krátký očíslovaný seznam
<ol>
  <li>první prvek;
  <li>a druhý.
</ol>

<p>
Z dokumentu se můžete odkazovat na jiné pomocí 
<a href="http://www.kiv.zcu.cz/">hypertextových odkazů</a>.
Celý dokument je ukončen např. čarou.
<hr>

</body>

</html>
(Zkuste si prohlédnout tento příkladový dokument; pak proužijte tlačítko Back prohlížečky pro návrat zpět sem.)

Značky <body> ... </body> ohraničují tělo dokumentu. V HTML 3.2 lze této značce přidat parametry pomocí <body bgcolor="BARVA" text="BARVA" background="URL"> pro definici barvy pozadí a textu dokumentu, resp. uvést v URL odkaz na (malý) obrázek, kterým se má pozadí vydláždit. Systém značení barev a udávání URL odkazů viz níže.


Základní značky

Uvedeme zde nejčastěji používané HTML značky. Povinné části značek jsou uvedeny tučně, nepovinné normálním písmem. Ellipsis (...) značí vložený text, proměnné pro hodnoty parametrů jsou značeny TAKTO.

Ještě na začátku poznámka k používání uvozovek u parametrů značek (např <img src="obrazek.gif" align=right border=0>). Všeobecně řečeno, uvozovkami nic nezkazíte. Pokud si chcete jejich psaní ušetřit, pak bez uvozovek je možno psát jednoslovné a celočíselné hodnoty parametrů; jako např. hodnoty pro align a border v uvedeném příkladě. Ve všech ostatních případech jsou uvozovky nutné, tedy i v procentuálních mírách <hr width="66%"> a víceslovných popisech <a name="psani uvozovek">.


Záhlaví HTML dokumentu

Každý správný HTML dokument musí začínat uvedením deklarace <DOCTYPE...>. Ta specifikuje v dokumentu používanou verzi HTML odkazem na definici typu dokumentu (DTD, Document Type Definition) -- což je, zhruba řečeno, vymezení pravidel pro používání značek v dokumentu podle příslušné verze HTML (tato značka nás zavádí do vod SGML, viz další četba). Je doporučeno ji v dokumentu uvést, aby bylo možno ověřit jeho platnost pomocí různých validátorů HTML a správně jej zobrazovat; platné hodnoty pro jednotlivé verze HTML jsou:

Tab. 1: Platné veřejné identifikátory HTML
VerzeDOCTYPE
2.0PUBLIC "-//IETF//DTD HTML//EN"
3.2PUBLIC "-//W3C//DTD HTML 3.2//EN"
4.0PUBLIC "-//W3C//DTD HTML 4.0//EN"
Netscape rozšířeníPUBLIC "-//WebTechs//DTD Mozilla HTML//EN"
Microsoft rozšířeníPUBLIC "-//Microsoft//DTD Internet Explorer 3.0 HTML//EN"

V dokumentu neviditelné značky pro vlastní záhlaví (ohraničeno <head> ... </head> umístěným před <body>) jsou užitečné buď jako direktivy pro server či prohlížečku, nebo jako tzv. metadata říkající něco o obsahu dokumentu.

<title> ... </title> ('titulek, nadpis') udává název dokumentu zobrazovaný např. v rámečku okna prohlížečky.

Metainformace o dokumentu, např. jméno autora, stručný obsah, použité kódování češtiny a podobě, se udávají pomocí <meta name="DRUH" content="OBSAH">, kde DRUH má (pro uvedené případy) tvar např. Author, Content, Content-encoding; OBSAH je třeba příslušně dopsat. Meta značky udávající autora, obsah, klíčová slova dokumentu a podobně jsou využívána některými automatickými prohledávači WWW jako jsou např. Lycos nebo Seznam.

Pokud známe prvky hlavičky HTTP, čili protokolu kterým se přenáší HTML dokumenty ze serveru na prohlížečku, můžeme některé nastavit pomocí <meta http-equiv="PRVEK" content="OBSAH" -- nejčastěji se vyskytují varianty <meta http-equiv="Refresh" content="5;URL=http://novy.server.cz/nova/cesta/dokumentu.html"> pro automatické nové nahrání dokumentu (zde po 5 vteřinách) a/nebo zároveň přesměrování na jiné URL pokud je uvedeno. K dalším použitelným prvkům patří http-equiv="Expires" s hodnotou určující čas ukončení platnosti tohoto dokumentu (např. content="Tue, 20 Aug 1996 14:25:27 GMT"). Podrobnosti o možných hlavičkách viz RFC 2068.

HTML 3.2 přidává:

Do hlavičky je možno vložit text jednoduchého programu čili scriptu v některém příslušném programovacím jazyce, např. JavaScript nebo VBScript, který umožňuje oživit stránku různými zajímavými prvky (např. automatické doplňování slov do formuláře v prohledávači AltaVista), a sice pomocí značky <script> ... </script> -- popis těchto jazyků je mimo rámec a možnosti Kondenzovaného HTML.

HTML 4.0 přidává:

Standardní značkou patřící do záhlaví je také <style>...</style> -- s její pomocí je možno provázat dokument s kaskádním stylem popisujícím jak se má text uvnitř jednotlivých značek formátovat. Popis stylů je, opět, mimo rozsah Kondenzovaného HTML a čtenáře tedy odkáži na doporučenou další četbu.


Blokové značky

Tyto značky formátují text dokumentu do logických bloků různého druhu.

Pokud je popis značek pro seznamy neprůhledný, podívejte se na příklady seznamů. K blokovým značkám patří také tabulky a formuláře, o kterých se zmíníme později.

HTML 3.2 přidává:

HTML 4.0 přidává:

Značky DIV a SPAN (viz textové, níže) mají významně posílený význam pro strukturování dokumentu a spolupráci s kaskádními styly (viz doporučená četba: pomocí atributů id a class se určí, co daný blok textu vlastně představuje (např. <div class="adresa" id="adr: Josef Vonásek"> ... </div> říká, že data uzavřená v tomto bloku představují adresu J.Vonáska). Přitom atribut id="kód" uvádí pomocí vloženého kódu jedinečnou identifikaci příslušné značky v celém dokumentu, class="třída" pak její příslušnost k nějaké třídě či druhu značek (např. k adresám).

Kaskádní styl, pokud je použit, potom může definovat zobrazení bloků textu třídy adresa jiné, než kdyby šlo o obyčejný text byť i se stejnými značkami; bez kaskádního stylu se takovéto použití značky <div> a <span> na zobrazení textu nijak neodrazí.


Textové značky

Tyto značky formátují písmo v rámci bloku. V seznamech jsou příslušnou značkou vyznačená slova oddělena pomocí "|", abyste mohli zjistit jak váš prohlížeč příslušnou značku renderuje (nebo že je k nerozeznání od obyčejného textu...).

Vzhled písma modifikují tzv. frázové značky které mnoho vypovídají o textu který obsahují (v tom je právě síla HTML a podobných jazyků)

HTML 3.2 přidává: HTML 4.0 přidává:

Značky pro přímou manipulaci s fontem (které nedoporučuji příliš používat pro jejich malou vypovídací schopnost oproti frázovým značkám) říkají přímo, jak se má text zobrazit

HTML 3.2 přidává:

Poznámky:

Je třeba na tomto místě uvést, že rozšíření HTML používané např. Microsoftem umožňuje ještě další manipulace, např. pomocí <font name="JMÉNO FONTU"> přímo určit název fontu v textu -- toto je možná pěkné, ale pokud nemá prohlížečka daný font k dispozici (např. čtete dokument na UNIXu nebo v DOSu, nebo i ve Windows pokud font není nainstalovaný) veškerá pracně naaranžovaná nádhera se ztratí. V některých případech dokonce prohlížečka nemusí text vůbec zobrazit, takže se prosím pokud možno vyhýbejte se takovým "vylepšením", pokud chcete dokument poskytnout celosvětovému publiku.

Otázkami podoby formátování HTML dokumentů (tj. "<em> zobraz jako kurzívu, pro <h1> použij bezpatkový font velikosti 20 bodů" apod.) se zabývá norma kaskádních stylů. HTML 4.0 proto říká, že všechny atributy jako color, align apod. jsou nedoporučené -- místo nich se má použít příslušný styl pro dokument. Viz diskuse o značkách <div> a <span> u blokových značek a doporučená četba.


Hypertextové značky

Odkaz na jinou HTML stránku se vytvoří pomocí <a href="URL">POPIS</a> ('anchor' čili kotva). POPIS obsahuje text odkazu (v prohlížeči většinou podtržený a aktivovatelný). URL ('Uniform Resource Locator', jednotná identifikace zdroje) je adresa příslušné HTML stránky. Formát je typ://stroj.doména:port/adresář/soubor
(například http://www.kiv.zcu.cz:80/index_c.html; implicitní hodnota pro port je právě 80).

Často používané typy zdrojů jsou:

Pokud je začátek URL (typ://stroj.doména:port/) vynechán, cílová stránka je adresována relativně vůči aktuální (např: href="../texty/pokec.txt") podle pravidel přechodů mezi adresáři na serveru, kde jsou stránky uloženy.

Lokální odkaz v rámci souboru se vytvoří pomocí <a href="#návěští">POPIS</a> a odkazuje na místo definované pomocí <a name="návěští"></a>.


Obrázky a aktivní mapy

Obrázky se do dokumentu vkládají pomocí <img src="SOUBOR" align="POZICE" alt="POPIS"> ('image SouRCe, ALTernate text'). SOUBOR je jméno souboru (relativní nebo absolutní URL) daného obrázku; prohlížeče umí nejčastěji zobrazovat pouze formát GIF a JPEG. POZICE označuje umístění obrázku vzhledem k okolnímu textu, může mít hodnoty top, middle, bottom. POPIS je slovní popis vypsaný v případě, kdy obrázek není možné zobrazit (doporučeno uvádět u každého obrázku).

HTML 3.2 přidává:

Atribut POZICE může mít také hodnoty left a right udávající umístění vzhledem k odstavci; dále jsou možné parametry width="PIX" a height="PIX" napovídající prohlížečce jak velký obrázek bude, aby mohla vynechat příslušné místo.

HTML 4.0 mění:

Atribut ALT je povinný, tj. doporučení uvádět popisný text pro negrafické prohlížečky se mění ve striktní požadavek.

Aktivní mapy

Aktivní mapy (clickable image maps, klikací obrázkové mapy neboli slangově "obrázky s klikou") se používají např. pro tvorbu grafických menu. Jejich definice mohou mít dvě podoby podle místa zpracování souřadnic kliknutí: v prohlížečce nebo na straně serveru.

Zpracování na straně uživatele:

Od doby HTML 3.2 je možné zpracování mapy přímo v prohlížečce -- mapa se definuje <img src="URL" usemap="URL#MAPA">, přičemž usemap indikuje mapovitost s klientským zpracováním a URL#MAPA udává odkaz (při vynechání URL lokální v rámci souboru) na mapování souřadnic na URL.

Toto mapování se definuje pomocí <map name="MAPA"> ... </map>, kde MAPA je stejné jako v příslušném <img ... usemap="...">. Mezi těmito značkami jsou uzavřené <area shape="TVAR" coords="SOUR" href="URL" alt="POPIS"> určující tvar a umístění citlivých oblastí v obrázku a jim odpovídající URL. Formát a význam TVAR, SOUR a URL je stejný jako u map pro HTML 2.0 popsaných níže, s tím že souřadnice mohou být udány také relativně jako N% šířky/výšky obrázku (problém ovšem je, že ne všechny prohlížečky umí toto relativní určení správně zpracovat [za upozornění děkuji F.Veličkovovi]). POPIS je textová podoba oblasti pro případ, že obrázek mapy nejde zobrazit, a je povinný aby mapy mohli používat i lidé bez grafických prohlížeček.

Podívejte se tedy na příklad mapy s klientským zpracováním. Ještě dodám, že pro snazší vyrábění těchto map existují prográmky, pomocí kterých do zvoleného obrázku nakreslíte klikací oblasti a dopíšete příslušná URL.

Zpracování na straně serveru:

Jde o starší a dnes nedoporučovaný způsob (je z doby HTML 2.0, a server musí umožňovat zpracování mapy pomocí zvláštního programu zvaného nejčastěji imagemap). Mapa se definuje jako 'obrázek v odkazu' <a href="URLa"><img src="URLi" alt="[mapa s klikou]" border=0 ismap></a>, parametr ismap indikuje, že se obrázek URLi chová jako mapa. URLa udává soubor s mapováním souřadnic na URL stránky, která jim odpovídá.

Tento soubor obsahuje na každé řádce popis oblasti v obrázku a jí odpovídající URL ve formátu TVAR URL SOUR. TVAR oblasti může být rect, circle, poly, default (obdélník, kruh, mnohoúhelník, pozadí čili oblast nepokrytá ostatními oblastmi); hodnotu default lze uvést max. jednou. SOUR určuje polohu a rozměry oblasti a má pro uvedené tvary podobu "LevýHorníX, LevýHorníY, PravýDolníX, PravýDolníY" pro rect, "StředX, StředY, Poloměr" pro circle, "Bod1X,Bod1Y, Bod2X,Bod2Y, ..." pro poly (oblast nemusí být uzavřená, tj. poslední bod je s prvním "automaticky" spojen). URL udává dokument, který se má zobrazit po kliknutí do dané oblasti. Např. soubor s názvem kancel_e.map obsahuje:

  default /clenove/index_e.html
  rect /mistnosti/laboratore/ch_kancel_e.html	  0,  0 555, 70
  rect /clenove/bokr_e.html		         10, 70 235,116
  rect /mistnosti/kancelare/uk423_e.html	 10,116 235,165
  rect /mistnosti/kancelare/uk421_e.html	 10,165 235,212
  rect /clenove/benesova_e.html		         10,212 132,261
  rect /clenove/hesova_e.html		        132,212 235,261


Tabulky

Od doby HTML 3.2 je možné text formátovat také do tabulek; ty se skládají z řádek obsahujících buňky s daty/textem. Tabulky je možné vnořovat, tj. uvnitř buňky tabulky je možné definovat jinou tabulku. Příklad jednoduché tabulky snad osvětlí následující popis příslušných značek.

Tabulka je ohraničena značkami <table align="POZ" width="ŠÍŘ" border="RÁM"> ... </table>. POZ udává umístění na stránce s možnostmi left, center, right. ŠÍŘ udává šířku tabulky buď absolutně v počtu obrazovkových pixelů (např. width="300"), nebo relativně v procentech šířky stránky (např. width="80%"); při vynechání parametru se šířka tabulky určí podle jejího obsahu. RÁM udává v pixelech šířku čáry mřížky tabulky; hodnota 0 značí tabulku bez mřížky.

K tabulce je možné (a vhodné) přidat popisku pomocí <caption align="POZ"> TEXT </caption>, přičemž vhodná podoba TEXTu je např. Tab.1: Průměrné tloušťky žížal. POZ může nabývat hodnot top (popiska nad tabulkou) a bottom (pod tabulkou).

<tr> ... </tr> značí řádku tabulky ('table row'). Může mít parametry align="VPOZ" a valign="SPOZ" určující vodorovné, resp. svislé zarovnání dat v buňkách řádky (hodnoty center, left, right).

Každá buňka v řádce je označena <th> ... </th> ('table header', hlavička tabulky) má-li obsahovat nadpis sloupce/řádky, resp. <td> ... </td> ('table data', data tabulky) pokud obsahuje obyčejná data/text. Obě otevírací značky mohou mít parametry align="VPOZ" a valign="SPOZ" s významem obdobným jako u <tr> (s tím, že implicitní hodnota je center pro <th> a left pro <td>), a také rowspan="ŘÁD" a colspan="SLO" určující přes kolik řádků ŘÁD, resp. sloupců SLO se má buňka roztahovat (oba mají implicitní hodnotu 1, samozřejmě).

Trik: pokud prohlížečka nechce zobrazit prázdnou buňku (pro kterou nechcete text ale chcete ji mít vidět v tabulce), dejte jako její text &nbsp; ('non-breakable space') nedělitelnou mezeru:

s  bez
 

Rozšíření zavedená v HTML 4.0

Nová verze HTML doplňuje popis tabulek o několik významných aspektů -- skupiny sloupců a řádek, selektivní orámování, a rozšířené možnosti formátování textu v buňkách tabulky.

Sdružování řádků do skupin umožňuje mj. snadné definování společného formátu řádek ve skupině. Provádí jej tři značky:

Všechny tyto značky mají společné formátovací atributy valign="SPOZ" align="POZ" char="ZNAK". SPOZ viz výše <tr>u tabulek v HTML 3.2, POZ je oproti HTML 3.2 rozšířené o hodnoty justify (oboustranné zarovnání) a char -- ta udává zarovnání sloupců na společný ZNAK, takže je možné např. zarovnání čísel podle desetinné tečky/čárky apod. Všechny tři značky mohou mít také atributy class a id, využívané při formátování pomocí kaskádních stylů. Všechny řádky ve skupině musí mít stejný počet sloupců.

Sdružování sloupců do skupin má podobný význam. Provádí jej následující značky, které musí být umístěné mezi <caption> a <thead>:

Toto stručné shrnutí snad víc vysvětlí příklad tabulky v HTML 4.0


Formuláře

Interaktivní formuláře jsou těsně svázány s programy pro jejich obsluhu, zvanými CGI scripty. Návod na tvorbu těchto programů vydá na samostatný text; zde uvedeme pouze formulářové značky. Možná pomůže podívat se také na příklad formuláře, kde je uveden i jeho zdrojový text v HTML.

<form action="/cgi-bin/script-name" method="TYP"> a </form> ohraničují formulář. script-name je název příslušného obslužného programu; ty jsou obvykle uloženy na serveru, odkud přišel dokument s formulářem, a přístup k nim má většinou pouze správce serveru. TYP určuje způsob doručení dat z formuláře do scriptu: GET je předává pomocí příkazové řádky, POST přes standardní vstup.

Základní značkou uvnitř je <input type="TYP" name="JMÉNO" value="HODNOTA"> definující vstupní prvek formuláře. Ty mohou být různého TYPu (viz dále), ale každé musí mít uvedené jednoznačné JMÉNO, které jej identifikuje a používá se také pro přístup k jeho datům v obslužném scriptu (JMÉNO pak označuje proměnnou a HODNOTA její obsah).

Pro zadávání textu slouží

Pro výběr z několika možností:

Pro spouštění akcí jsou ve formuláři tlačítka:

Sdružování a popis prvků, přístup klávesami

HTML 4.0 přidává visačky prvků, užitečné jednak pro popis prvků, druhak jako místo definice jejich společné klávesové zkratky (vhodné zejména pro přepínače a zaškrtávací políčka). Formy jsou dvě: explicitní vazba <label for="PRVEK"> TEXT_VISAČKY </label> pro visačku prvku s <input id="PRVEK" ...>, nebo implicitní svázání s obsahovaným prvkem formou <label> TEXT_VISAČKY <input ... > </label>. Pokud má definovanou klávesovou zkratku, předává při aktivaci řízení spřaženému prvku.

<fieldset> ... </fieldset> definuje skupinu prvků formuláře; značka má podobný význam jako <div> pro obyčejný text, tedy definuje logickou skupinu např. pro použití s kaskádními styly. <legend accesskey="KLÁVESA"> LEGENDA </legend> přidává popisku takové skupiny prvků; je mj. užitečná pro umístění klávesové zkratky.

Ke (skoro) každému prvku formuláře je dále možno přidat následující atributy pro přístup pomocí kláves:


Rámce (frames)

Od HTML 3.2 varianty frameset je možné v grafických prohlížečkách rozdělit jejich okno do několika rámců, přičemž v každém je jiný dokument. To umožňuje některé šikovné triky, např. společné navigační rámce přístupné na všech stránkách jednoho website (obdoba menu u programů).

Základní odlišností dokumentu s rámci je použití značky <frameset>...</frameset> (tedy sady rámců namísto těla dokumentu, tj. <body>...</body>. Atributy cols="VEL" a rows="VEL" určují, na kolik a jak širokých, resp. vysokých, sloupců resp. řádek bude obrazovka rozdělena. V hodnotě VEL jsou čárkami oddělené jejich velikosti, které mohou být dány relativně (v procentech či poměrnými částmi, např. "40%,60%" nebo "4*,6*" udávají dělení v poměru 4:6) nebo absolutně v počtu pixelů (např. "150,400" -- je třeba dát pozor na to, aby rámec zůstal viditelný a čitelný). Je povoleno tyto způsoby také míchat, např. "40%,300,*,3*". Značky <frameset>...</frameset> je možno také vnořovat.

Obsahem <frameset>...</frameset> jsou jednotlivé rámce definované značkou <frame src="URL" name="JMÉNO> . Hodnota URL udává adresu stránky, která se má do rámce natáhnout při prvním jeho zobrazení, JMÉNO identifikuje rámec pro další dokumenty -- pokud chceme dokument zobrazit do nějakého rámce, musíme v hyperlinku přidat atribut <a href="..." target="JMÉNO"> odkazující na jméno rámce definované ve <frame>. K dalším atributům značky <frame> patří např. scrolling="SCROL" (hodnoty SCROL jsou yes, no, auto udávající, že posuvníky se v rámu mají zobrazit vždy, nikdy, resp. dle potřeby) a noresize (říká, že nelze měnit velikost rámce zobrazeného v prohlížečce taháním za jeho okraj).

Je dobré vědět, že standardem HTML jsou předdefinována některá význačná jména rámců: _top odkazuje na celé okno prohlížeče (jeho uvedení v odkazu způsobí tedy zrušení rámců), _parent odkazuje na nadřazený frameset, _self odkazuje na aktuální rámec, a _blank způsobí natažení dokumentu do nově otevřeného okna prohlížečky. Toto poslední jméno je zvláště důležité pro odkazy na cizí stránky -- je značně neslušné zobrazovat cizí stránky v některém ze svých rámců, protože to pak vytváří lživý dojem že jste je vlastně psali sami.

Poslední důležitou složkou obsahu je alternativa pro prohlížeče nepodporující rámce. Značka <noframes>...</noframes> uváděná obvykle za deklaracemi <frame> obsahuje libovolný HTML text, který se zobrazí pokud prohlížečka neumí rámce. Obvyklým vhodným obsahem je odkaz na hlavní dokument (nesoucí podstatné informace, nikoli např. navigační odkazy), který by se zobrazil v některém rámci.

Podívejte se teď na příklad na rámce, který toto vše uvádí v život.

Na závěr jedno upozornění. S rámci jsou obecně na webu potíže nebo aspoň jistá rozpačitost, způsobená jejich těžkou převoditelností na jiné než grafické prohlížeče. Jaké starosti to působí např. nevidomým si přečtěte na stránkách Bezbariérovém Webu -- jsou psané člověkem, který ví co říká. Rozumnou a poměrně používanou náhradou jsou navigační lišty apod. formátované pomocí tabulek ve spojení s dynamickým generováním stránek na straně serveru.


Přílohy

V následujících přílohách je uvedeno jak psát některé speciální znaky (např. '<'), jak uvádět barvy pomocí jmen a kódů, v čem se dají HTML dokumenty tvořit a konečně co číst dále pro zdokonalování se v umění HTML.


Speciální znaky

Prohlížeče HTML používají implicitně znakovou sadu ISO Latin 1 (znaky pro západní Evropu a severní Ameriku). K přímému zobrazení vyhrazených nebo diakritických znaků se používají speciální kódy, jejichž obecná forma je &název-znaku;. Nejčastěji použitelné jsou

ZNAK	NÁZEV		VÝZNAM
<       &lt;    	Znaménko menší než
>       &gt;    	Znaménko vetší než
&       &amp;   	Ampersand
©       &copy;          Copyright (ne vždy funkční!)

Z diakritických znaků uvedeme pouze několik, doporučuje se prohlédnout si celou sadu znaků, také v lokálním provedení s přepínáním zobrazení (viz diskuse níže).

ZNAK	NÁZEV		VÝZNAM
Í	&Iacute;	velké I s čárkou
ç	&ccedil;	cedila
ö	&ouml;		přehlasované o


Čeština

Co se češtiny týče, je běžné psát dokumenty "rovnou" s použítím háčků a čárek, neboť je již k dispozici dostatek prostředků pro převod do různých jiných kódování (např. SaCzech nebo mod_czech). Každý z nich ovšem používá jiný způsob uvádění informace o typu kódování použitém v dokumentu -- je dobré zeptat se správce serveru, na němž chcete stránky uložit, jak se máte zařídit.

Pro správné zobrazení diakritiky je ovšem třeba několika věcí:

  1. Prohlížečka musí mít k dispozici české fonty (což nebývá problém).
  2. Musí být nastavená (přes menu Options | Document encoding nebo podobné) na chtěné kódování.
  3. Kódování češtiny použité v textu stránky zaslaném prohlížečce serverem musí souhlasit s kódováním používaným fonty prohlížečky (a protože těchto kódování je z různých důvodů bohužel mnoho, jsou užitečné výše uvedené převodní prostředky).

Zde si také dovolím upozornit, že neuvěřitelně velké množství autorů stránek (nebo spíš správců web serverů, kteří by v tomto měli mít větší přehled a "rozum") se prohřešuje proti přikázání "Navěky se pod přísahou zřekneš toho zcestného a zavrženíhodného učení, že 'Všude je VAX' (nebo Windows)..." (viz Desatero přikázání pro programátory v C) a jejich stránky psané pouze pro CP1250 bez následné nabídky na překódování jsou pak na prohlížečkách pod UNIXy nebo Macintoshy nepoužitelné...

Pokud chcete na své stránce kombinovat znaky české a např. francouzské, dostáváte se bohužel do neřešitelné situace: protože v ASCII tabulce pro kódování znaků je málo místa, nelze mít současně 'n' s háčkem a 'c' s ocáskem -- ten první je z východoevropské sady (ISO Latin 2, CP1250 apod), ten druhý ze západoevropské (ISO Latin 1). Můžete věc vyřešit tak, že stránku napíšete jen česky nebo jen francouzsky, a v záhlaví (pomocí <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> nebo <... charset=ISO-8859-2"> uvedete typ kódování. Některé prohlíže (mj. Netscape 3, Communicator, MS Internet Explorer) si pak umí přepnout font na příslušnou znakovou sadu -- vyzkoušejte si to na malém příkladu. (Upozornění: pokud toto uvedené kódování v hlavičce nesouhlasí s kódováním textu stránky zaslané prohlížečce, není to čtenáři nic platné, protože opět dostane špatně čitelný text.)


Značení barev

HTML 3.2 umožňuje zadat barvu různých objektů (pozadí, text, odkaz, font), k čemuž používá značení ve dvou podobách:

Tab. 2: Barvy a jejich kódy
BarvaČeskyKód
blackčerná#000000
gray šedá#808080
whitebílá#FFFFFF
maroonkaštanová#800000
redčervená#FF0000
purplepurpurová#800080
fuchsiafialová#FF00FF
greenzelená#008000
limežlutozelená#00FF00
oliveolivově zelená#808000
yellowžlutá#FFFF00
navynámořnická modř#000080
bluemodrá#0000FF
tealmodrošedá#008080
aquatyrkysová#00FFFF

Na webu jsou k dispozici různé vzorníky barev, např:


Zdroje informací a další četba

Při přípravě tohoto návodu byly použity následující dokumenty:

Další dokumenty vhodné k nahlédnutí jsou


Podpůrné nástroje pro tvorbu HTML

Osobně jsem v tomto velmi konzervativní: domnívám se totiž, že nejlepší je psát HTML ručně proto, že všemožné generátory a "překvachávače" obvykle produkují nekvalitní a také lidsky nečitelný (a tedy velmi obtížně upravovatelný) HTML kód; navíc estetická stránka obvykle hodně napovídá o kvalitě zpracování podobně jako u programovacích jazyků. Uznávám ale, že tento přístup není někdy možné z praktických důvodů dodržet na 100%, takže i já se občas uchyluji k nástrojům jako

Pro ruční psaní používám editor vim což je vylepšená odrůda UNIXového starého dobrého vi-čka (ano, opravdu --- nenašel jsem zatím lepší editor na plain ASCII texty, který by byl snadno doplňovatelný o různá makra a přitom funkční na platformách UNIX, X-Window, MS-DOS i Windows). Pro tenhle super editor mám a nabízím

Pokud jej někdo použijete, budu velmi vděčný za připomínky, návrhy a názory na věc.


A tím Kondenzované HTML končí. Můžete se teď buďto vrátit zpátky na jeho obsah, a nebo odejít třeba jinam -- každopádně děkuji moc, že jste jej dočetli až sem. Nashledanou!

Douška na závěr: patička dole nabízí kontrolu zdrojového textu pomocí validátoru - když ji vyzkoušíte, objeví se spousta chyb... aneb "kovářova kobyla chodí bosa". Já to někdy spravím :-) -->