![[Fidlin]](http://www.kiv.zcu.cz/~brada/images/fidlin.gif)
Kondenzované HTMLKondenzované 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
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:
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.
<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.
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">.
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:
| Verze | DOCTYPE |
|---|---|
| 2.0 | PUBLIC "-//IETF//DTD HTML//EN" |
| 3.2 | PUBLIC "-//W3C//DTD HTML 3.2//EN" |
| 4.0 | PUBLIC "-//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.
Tyto značky formátují text dokumentu do logických bloků různého druhu.
<h1>...</h1> až
<h6>...</h6> ('heading'; řazeno od
nejdůležitějších k nejméně významným).
<p>...</p>
('paragraph'), přičemž uzavírací značka se vynechává (odstavec je
implicitně ukončen otevírací značkou jiného blokového prvku -- odstavcem,
nadpisem, seznamem). <p align="POZICE"> s
možnostmi POZICE=center,left,right pro zarovnání
vlevo, centrování a zarovnání vpravo.
<ul>...</ul> ('un-ordered list') a
očíslované <ol>...</ol> ('ordered
list'). Prvky seznamu jsou uzavřeny do
<li>...</li> ('list item'), ale
uzavírací znacku je možno vynechat. Seznamy je možné vnořovat.
Pro neočíslované seznamy je v <ul> i
<li> použitelný atribut
type="TYP" s hodnotami square, circle,
disk modifikující typ odrážky; pro očíslované seznamy
TYP s hodnotami 1,a,A,i,I udává styl číslování a
atribut start=CISLO pro <ol>
říká odkud se má začít počítat.
<dl> <dt>definovaný
termín</dt> <dd>definiční data (popis
termínu)</dd> <dt> ... </dl> .
<pre>...</pre>
('pre-formatted'). Pozor ovšem na znaky '<', '>', a
'&' -- prohlížeč je i v tomto textu považuje za znaky
pro vymezení HTML značek a proto je pro jejich zobrazení třeba vložit (ve
stejném pořadí) '<', '>',
'&'. Uvnitř
<pre> je totiž možno použít textové
značky.
<address>...</address> .
<hr> ('horizontal
rule').
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á:
<hr size="N"
width="M%">, kde N je počet pixelů výšky a
M% je délka čáry v procentech šířky stránky.
<div align="VPOZ" class="TŘÍDA"
id="IDENT">...</div>.
<center> ...
</center>.
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í.
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...).
<br> ('break').
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ů)
<em>...</em> pro |zvýrazněný|
('emphasised') text;
<strong>...</strong>
pro |silně zdůrazněný| text;
<dfn>...</dfn> označující např.
|definovaný termín|;
<var>...</var> označující
|proměnné|;
<kbd>...</kbd> použitelné např. pro uvedení
příkladu uživatelova |vstupu z klávesnice|;
<code>...</code> a
<samp>...</samp> pro |krátké úseky
zdrojového kódu| a |příklady výstupu apod.|;
<cite>...</cite> pro |citovaný
text|.
<small>...</small> a
<big>...</big>
pro |zmenšené| a |zvětšené| písmo,
<sup>...</sup>
('superscript') a
<sub>...</sub> ('subscript')
pro |horní| a |dolní| index.
<abbr>...</abbr> pro
|zkratky|
<acronym>...</acronym> pro
|akronymy| čili zkratky vyslovované jako slova.
<q>...</q> označující |citaci v rámci odstavce|;
<del>...</del> a
<ins>...</ins> označující text
|<span>...</span>, což je analogie
<div> -- k jejímu významu viz výše text v části o blokových značkách.
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
<b>...</b> pro tučné písmo
('bold') [nahraditelné <strong>];
<i>...</i> pro kurzívu
('italics') [nahraditelné <em>, <var>];
<tt>...</tt> pro psací stroj
('typewriter type') [nahraditelné <code>,
<kbd>];
<u>...</u> ('underline')
pro podtržení (ale zvýraznění je lépe dělat jinak, tento
element není doporučeno používat);
<strike>...</strike>
('strikethrough') pro <font size="VEL"
color="BARVA">...</font> pro přímé
určení velikosti a/nebo barvy písma (tento element není doporučeno
používat); VEL může být relativní v rozmezí -4..+4 nebo
absolutní v rozmezí 1..7 ; hodnota neurčuje bodovou velikost písma. Značení barev viz níže.
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 jakocolor,alignapod. 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.
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:
http pro Web stránky (HyperText Transfer Protocol);
gopher pro přístup na gopher servery;
telnet pro interaktivní práci (zkuste např. netfind s uživ. jménem
netfind)ftp pro přístup do ftp archivu;
file pro přístup na lokální soubory;
news pro čtení USENET news (není následováno '//', např.
"news:comp.infosystems.www");
mailto pro odesílání pošty (platí totéž, např.
"mailto:brada@kiv.zcu.cz").
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 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 (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
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 ('non-breakable space')
nedělitelnou mezeru:
| s | bez |
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:
<thead>...</thead> (table
head) ohraničuje řádky, které tvoří záhlaví tabulky. Ty mohou např.
být na začátku každé stránky, pokud je velmi dlouhá tabulka tisknuta na
papír; analogicky <tfoot>.
<tfoot>...</tfoot> (table
footer) vymezuje patičku tabulky. Má být definováno před tělem
tabulky, tedy před <tbody>.
<tbody>...</tbody> ohraničuje řádky,
které tvoří vlastní "tělo" tabulky. V tabulce může být více
<tbody> bloků s různým formátováním. Pokud je přítomno
<thead> a/nebo <tfoot>, musí tabulka
obsahovat alespoň jedno <tbody>.
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>:
<col> span="SLO"...</col> (column) definuje společný formát pro následujících
SLO sloupců tabulky; kromě span má atributy jako
<td>.
<colgroup>...</colgroup> (column group) vytváří skupinu sloupců, pro kterou je
mj. možné stanovit společný formát (atributy stejné jako
<col>). Rozdíl od této značky je mj. v kreslení rámečků
tabulky -- sloupce v <col> jsou ohraničeny jednotlivě,
kdežto <colgroup> je orámováno pouze jako celek.
Toto stručné shrnutí snad víc vysvětlí příklad tabulky v HTML 4.0
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ží
<input type="text" ...> pro zadání jedné řádky textu, přičemž
HODNOTA je na počátku nabídnutý text. Typ text se
použije automaticky, pokud je atribut type vynechán. Pole typu
password pro zadání
hesla se chová podobně s tím, že se zadávaný text nevypisuje.
Délka zadávaného textu není omezena, pokud atribut
maxlength="POČET_ZNAKŮ" neurčuje jinak.
<textarea name="JMÉNO" rows="ŘÁDKŮ"
cols="SLOUPCŮ"> TEXT </textarea>
definuje textové pole o rozměru
ŘÁDKUxSLOUPCU znaků. Pokud je zadán, bude
TEXT uveden v textové ploše jako počáteční text uvnitř pole.
Pro výběr z několika možností:
<input ... > s TYPem
checkbox a radio jsou zaškrtávací
políčka a přepínače používané stejně jako jejich jmenovci v různých
dialogových okénkách aplikací. Pole obou těchto typů se obvykle sdružují
do skupin: pro přepínače musí mít skupina stejné JMÉNO a
do scriptu je předána HODNOTA vybraného tlačítka; pro checkboxy
se předává pár JMÉNO=HODNOTA pouze pro ty, které byly
označeny (neoznačené se nepředávají vůbec).
<select> ... </select> (výběr) definuje
výběrový seznam s prvky
definovanými pomocí <option>. Pokud je uveden atribut
multiple, je možné ze seznamu vybrat více prvků.
Jediná značka povolená mezi začátkem a koncem definice seznamu je vzápětí
uvedené <option>.
<option value="HODNOTA">
POPIS definuje jeden prvek seznamu <select>,
který bude na stránce s formulářem mít text POPIS a do scriptu
bude vrácena HODNOTA. Tyto značky mohou být uvedeny pouze mezi
<select> a </select>. V HTML 4.0 je možné tvořit dvouúrovňové
seznamy pomocí <optgroup
label="JMÉNO"> ... </optgroup>
(option group čili skupina voleb). Uvnitř
tohoto elementu smí být pouze <option>s, a atribut
label je povinný (jak jinak určit nadpis dané úrovně seznamu,
že).
selected označuje ty hodnoty z
vícenásobných výběrů, které jsou implicitně (tj. při natažení/resetu
formuláře) vybrané.
Pro spouštění akcí jsou ve formuláři tlačítka:
<input ... > s TYPy submit a
reset definují kontrolní tlačítka formuláře:
submit odesílá data ke zpracování scriptu, reset
vrací pole formuláře na implicitní hodnoty definované HTML dokumentem.
Text tlačítka je možné zadat pomocí HODNOTA .
<input type="button"
value="POPIS" onclick="AKCE()"> je
obyčejné textové tlačítko, které spouští script AKCE() (ten musí
být definován v hlavičce dokumentu; popis scriptů je mimo rámec
Kondenzovaného HTML). Pomocí <button name="JMÉNO"
type="TYP"> ... </button> lze tvořit
tlačítka libovolného druhu -- podobu určuje obsah
"...", chování TYP (submit, reset,
button). Upozornění: prohlížečky, které neumi HTML 4.0,
neumí ani <button ... > -- jeho použití pak může vést k
"nespustitelným" formulářům.
Např. tlačítko s použitím "hýbacího" obrázku:
<button type="reset"> <img src="/icons/reset.gif"
alt="Reset" onmousedown="dolu()" onmouseup="nahoru()"
> </button> .
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:
tabindex="ČÍSLO" -- pořadí prvku při procházení
pomocí tabelátoru; nejprve jsou přístupné prvky s ČÍSLO > 0, pak ty
s tabindexem 0 nebo nedefinovaným
accesskey="KLÁVESA" -- klávesová zkratka pro
prvek; použitelná pro <input>, <button>, <label>,
<legend>, <textarea> a také pro <a
...>.
disabled -- znepřístupňuje prvek a zneplatňuje jeho
hodnotu
readonly -- prvek je přístupný, ale nelze měnit jeho obsah
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.
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.
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 < < Znaménko menší než > > Znaménko vetší než & & Ampersand © © 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 Í Í velké I s čárkou ç ç cedila ö ö přehlasované o
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í:
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.)
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:
<body text="blue">; tato jména umí používat jenom
nové prohlížečky, proto je někdy lépe použít specifikaci...
<body
bgcolor="#FFFFFF"> nastaví bílé pozadí stránky.
| Barva | Česky | Kód |
|---|---|---|
| black | černá | #000000 |
| gray | šedá | #808080 |
| white | bílá | #FFFFFF |
| maroon | kaštanová | #800000 |
| red | červená | #FF0000 |
| purple | purpurová | #800080 |
| fuchsia | fialová | #FF00FF |
| green | zelená | #008000 |
| lime | žlutozelená | #00FF00 |
| olive | olivově zelená | #808000 |
| yellow | žlutá | #FFFF00 |
| navy | námořnická modř | #000080 |
| blue | modrá | #0000FF |
| teal | modrošedá | #008080 |
| aqua | tyrkysová | #00FFFF |
Na webu jsou k dispozici různé vzorníky barev, např:
Další dokumenty vhodné k nahlédnutí jsou
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
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 :-) -->