Jazyk HTML verze 3.2

Jazyk HTML verze 3.2 reflektuje stav daný vývojem prohlížečů a zahrnuje společnou množinu nových rysů jazyka implementovanou v nejrozšířenějších prohlížečích. První informace o nové verzi jazyka byla oznámena v květnu 1996. Úplnou specifikaci jazyka lze nalézt na adrese http://www.w3.org/pub/WWW/TR/REC-html32.html.

Označení verze jazyka

Dokumenty zapsané v jazyce HTML by měly mít na začátku deklaraci použité verze jazyka. Zatím není tato deklarace bezpodmínečně nutná, protože všechny nové vlastnosti jazyka jsou pouze přidávány k existujícím, takže zatím nenastávají konflikty při interpretaci. Prohlížeč může interpretovat dokument dle nejvyšší verze jazyka, které rozumí, a značky, kterým nerozumí může ignorovat. V budoucnu se ale může stát, že některé verze jazyka nebudou kompatibilní zdola nahoru a prohlížeč bude muset vědět, dle jaké verze jazyka má dokument interpretovat. Proto by měl již nyní každý dokument obsahovat na začátku deklaraci typu dokumentu s uvedením verze jazyka HTML: 
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN">
<HTML>
...

Definice barev a pozadí

Značka těla dokumentu <BODY> byla doplněna o atributy barevného zobrazení dokumentu. Patří mezi ně BGCOLOR - barva pozadí, TEXT - barva textu, LINK - barva nepoužitého hypertextového odkazu, ALINK - barva vybraného odkazu, VLINK - barva použitého odkazu. Barvy mohou být zadány hexadecimálním číslem (#RRGGBB) nebo jménem barvy ze standardní palety karet VGA: aqua (akvamarín, jasná tmavozelená), black (černá), blue (modrá), fuchsia (anilínová červeň), gray (šedá), green (zelená), lime (citrónová zelená), maroon (kaštanová), navy (tmavá modř), olive (olivová), purple (purpurová), red (červená), silver (stříbrná), teal (tmavá modrozelená), white (bílá) a yellow (žlutá).

Další nový atribut BACKGROUND umožňuje zadat vložený obrázek, který je zobrazen opakovaně jako podklad textu. Tento atribut je běžně používán již delší dobu a zajisté oživil fádní jednobarevné pozadí textových stránek.. Někteří autoři dokumentů však používají natolik výrazná pozadí, že tím silně ztěžují čitelnost textu. Proto dávejte při použití podkladu pozor na to, zda je text čitelný, a to nejen na počítači a prohlížeči, který používáte, ale také jinde. 

<BODY BGCOLOR="yellow" TEXT="navy" LINK="red" 
VLINK="black" ALINK="purple">
Text na žlutém pozadí
<UL>
<LI><A href="link.html">Dosud nepoužitý odkaz</a>
<LI><A href="exb1.html">Již zobrazený odkaz</a>
<LI><A href="link.html">Vybraný text</a>
</UL>

Zarovnání nadpisů a odstavců

Úvodní značky vymezující nadpisy <H1> až <H6> a značka odstavce <P> mohou být doplněny atributy zarovnání textu ALIGN. Zarovnání textu může být nastaveno vlevo (implicitně, LEFT), na střed (CENTER), vpravo (RIGHT), nebo do sloupce (JUSTIFY). Většina posledních verzí prohlížečů tyto atributy správně interpretuje. 
<H1 ALIGN="CENTER">Centrovaný nadpis</H1>
<P ALIGN="RIGHT">Text zarovnaný vpravo

Centrovaný nadpis

Text zarovnaný vpravo

Značka <P> není příliš vhodná pro zarovnání textu na úrovni slov a znaků, protože je určena pro vymezení odstavců a prohlížeče obvykle vkládají mezi odstavce vertikální mezeru. Pro změnu zarovnání, či jiných atributů textu v odstavci byla proto zavedena nová značka <DIV>. Tato značka může obsahovat stejné atributy jako značka <P>, liší se pouze tím, že nemá definován žádný význam pro strukturu dokumentu. Pro centrování textu je dále doplněna zkratka <CENTER>, která má stejný význam jako značka <DIV ALIGN=CENTER>.

Oddělovací čára

Značka oddělovací čáry <HR> byla doplněna novými atributy. Atributem SIZE lze zadat výšku oddělovací čáry v bodech a atributem WIDTH její šířku v bodech nebo procentech šířky okna prohlížeče (pokud následuje za číslem znak %). Pokud není oddělovací čára zobrazena přes celou šířku okna, pak má význam také atribut zarovnání ALIGN, podobně jako při zarovnání textu. Posledním novým atributem je NOSHADE, který vypíná 3D zobrazení oddělovací čáry: 
<HR SIZE="4" WIDTH="75%" ALIGN="CENTER">
<CENTER>Centrovaný text a oddělovač</CENTER>
<HR SIZE="4" WIDTH="75%" ALIGN="CENTER" NOSHADE>
Centrovaný text a oddělovač

Seznamy

U seznamů je nejvíce novinek v číslovaných a nečíslovaných seznamech, zatímco seznam definic nemá žádné nové rysy. U číslovaných seznamů je povoleno ve značce <OL> zadat atributem START číslo v první odrážce. Navíc lze zadat hodnotu každé odrážky přímo ve značce <LI> atributem VALUE. Další novinkou v číslovaných seznamech je volba formátu číslování atributem TYPE. Formát číslování může být zadán řetězcem "1" - číslování arabskými číslicemi, "a" - malými písmeny abecedy, "A" - velkými písmeny abecedy, "i" - malými římskými čísly nebo "I" - velkými římskými čísly. 
<OL START="4" TYPE="I">
<LI>bod č. 4
<LI VALUE="8">bod č. 8
<LI TYPE="1">a teď arabskými číslicemi č. 9
</OL>
  1. bod č. 4
  2. bod č. 8
  3. a teď arabskými číslicemi č. 9
Pro nečíslované seznamy byla doplněna volba tvaru odrážky atributem TYPE ve značce <UL> i <LI>. Tvar odrážek je zadáván hodnotami DISC, SQUARE a CIRCLE: 
<UL TYPE="SQUARE">
<LI>čtvereček
<LI TYPE="CIRCLE">kolečko
<LI TYPE="DISC">disk
</UL>
Prohlížeč Netscape 3.0 zvládá tyto nové značky bez problémů, Internet Explorer 3.0 beta 2 zobrazuje všechny odrážky stejně.

Vložené obrázky

Značka <IMG> má doplněny atributy WIDTH, HEIGHT, BORDER, HSPACE a VSPACE, které dovolují zadat velikost obrázku a odsazení a tím vymezit prostor pro obrázek na stránce. Stránka tak může být zobrazena se správným rozložením ještě před tím, než prohlížeč přenese všechny vložené obrázky. Všechny rozměry jsou zadávány v bodech. Rozměr obrázku je definován šířkou WIDTH a výškou HEIGHT. Pokud má přenesený obrázek jinou velikost, je zmenšen nebo zvětšen na deklarovanou velikost. Atribut BORDER definuje šířku rámečku obrázku. Pokud je obrázek citlivým obrázkem, má rámeček stejnou barvu jako text hypertextového odkazu. Pokud není obrázek citlivý, je rámeček průhledný. Atributy HSPACE a VSPACE definují horizontální a vertikální odsazení obrázku. Takto vymezený prostor je prázdný a na rozdíl od rámečku obrázku není u citlivých obrázků vybarven.

Atribut zarovnání obrázku ALIGN je obohacen o další povolené hodnoty. Hodnota LEFT má význam zarovnání obrázku na levý okraj stránky a následujícího bloku textu po pravé straně obrázku. Podobně hodnota RIGHT znamená zarovnání obrázku k pravému okraji stránky a textu po levé straně obrázku. Nový význam má hodnota MIDDLE, která znamená v centrovaném odstavci centrování obrázku. Pokud je na stejném řádku text, který se vejde včetně obrázku na šířku stránky, je vedle sebe rozložen text i obrázek: 

<P align="center">text nad obrázkem<BR>
text zleva<IMG SRC="/images/undercon.gif" align="middle">text zprava
<BR clear="all">
text pod obrázkem

text nad obrázkem
text zlevatext zprava
text pod obrázkem

Při toku textu kolem obrázku nastává problém, jak zahájit další text, který nemá být zalomen kolem obrázku a má začít až pod obrázkem. Proto byl doplněn do značky <BR> atribut CLEAR. Jeho hodnotou může být LEFT, RIGHT nebo ALL. Hodnota LEFT posune následující text až na místo, kde je levý okraj normální, čistý (clear). Podobně RIGHT posune text na místo, kde je normální pravý okraj, a hodnota ALL na místo, kde jsou oba okraje normální.

Citlivé obrázky

Citlivé obrázky jsou obrázky, které reagují na stisknutí. Pokud má vložený obrázek ve značce <IMG> atribut ISMAP a značka je umístěna uvnitř hypertextového odkazu, tvoří vložený obrázek aktivační plochu sady hypertextových odkazů. Volba konkrétního odkazu závisí na místě stisknutí. Při stisknutí tlačítka myši doplní prohlížeč URL zadaného hypertextového odkazu o otazník (?) a relativní pozici grafického kurzoru vzhledem k levému hornímu rohu obrázku v okamžiku, kdy uživatel stisknul tlačítko. 
<a href="/cgi-bin/imagemap/map/picture.map">
<img src="picture.gif" ismap></A>
Pokud stiskne uživatel tlačítko myši a kurzor je na pozici (20,10) od levého horního rohu obrázku, je aktivováno URL "/cgi-bin/imagemap?20,10". Toto URL vede na straně serveru ke spuštění programu imagemap a ten interpretuje zadané souřadnice. K tomu potřebuje pro každý citlivý obrázek vymezení citlivých ploch a seznam odkazů, které mají být aktivovány. Definice citlivých ploch musí být předem připravena a uložena v souboru na serveru.

Pro vyhledání definičního souboru, který odpovídá danému citlivému obrázku, je používáno předávání nadbytečné části URL spuštěnému programu. Dle konfigurace serveru vede počáteční část URL "/cgi-bin/imagemap" na spuštění programu imagemap a zbytek URL "/map/picture.map" je nadbytečný. Tato nadbytečná část URL je předána programu v proměnných prostředí PATH_INFO a PATH_TRANSLATED. Proměnná PATH_TRANSLATED obsahuje část URL doplněnou na začátku jménem kořenového adresáře hierarchie dokumentů WWW serveru. Pokud tedy zbytek URL obsahuje jméno souboru, v proměnné PATH_TRANSLATED dostane program jeho úplné jméno. Správný tvar URL ve značce citlivého obrázku a odpovídající umístění definičního souboru musí zajistit autor dokumentu.

Formát zápisu citlivých ploch závisí na používaném programu. Program imagemap dodávaný k serverům NCSA (http://www.ncsa.uiuc.edu) a Apache (http://www.apache.org) interpretuje definice ve tvaru: 

RECT http://www/map/news.html 20,20 199,39
CIRCLE http://www/map/products.html 100,100 40 
DEFAULT http://www/map/default.html
Citlivou plochou může být obdélník (RECT), kruh (CIRCLE) nebo obecný mnohoúhelník (POLY). Obdélník je popsán souřadnicemi levého horního rohu a pravého dolního rohu. Kruh je definován souřadnicí středu a poloměrem. Mnohoúhelník je definován souřadnicemi jednotlivých vrcholů. Nevymezené plochy obrázku mohou být pasivní nebo mohou mít také přiřazen odkaz definicí DEFAULT.

Starší program htimage, který je dodáván k serveru CERN (http://www.w3.org), má zápis citlivých ploch poněkud odlišný: 

RECT (20,20) (199,39) http://www/map/news.html
CIRCLE (100,100) 40 http://www/map/products.html
DEFAULT http://www/map/default.html
Pro vytváření definičních souborů jsou samozřejmě dostupné specializované programy. Pracují jako jednoduché grafické kreslící programy. Zobrazí obrázek a pomocí nástrojů umožní uživateli graficky vymezit citlivé plochy obrázku. Příkladem může být kvalitní volně dostupný program Map This, který umí generovat všechny typu definičních souborů (http://galadriel.ecaetc.ohio-state.edu/tc/mt/).

Zadávání citlivých ploch na straně serveru má jednu podstatnou nevýhodu: vyžaduje spolupráci serveru. Pokud je dokument uložen na lokálním disku a uživatel si jej chce prohlídnout prohlížečem, citlivé obrázky nebudou reagovat, protože prohlížeč nezná tvary citlivých ploch a odpovídající aktivované URL. Prohlížení dokumentů bez přístupu k WWW serveru je velice důležitou aplikací prohlížečů (hypertextová dokumentace) a proto byla poměrně rychle doplněna možnost definice citlivých ploch v dokumentu do všech prohlížečů. Formát zápisu je již publikován ve formě dokumentu RFC 1980, viz http://www.fee.vutbr.cz/pub/doc/rfc/rfc1980.txt.

Definice citlivých ploch na straně klienta je k obrázku přiřazena přímo hypertextovým odkazem v atributu USEMAP. Odkaz obvykle vede na pojmenovanou definici ploch ve stejném dokumentu, ale může vést také na definici ploch v jiném hypertextovém dokumentu. Odkaz na definici v dokumentu je odkazem dovnitř dokumentu a proto začíná znakem #, podobně jako normální hypertextový odkaz uvnitř dokumentu. Pro univerzální zápis citlivých obrázku je doporučen tento formát: 

<A HREF="/htbin/imagemap/map/picture.map">
<IMG SRC="picture.gif" USEMAP="#map" ISMAP></A>
Pokud je ve značce <IMG> atribut USEMAP a prohlížeč mu rozumí, pak jej upřednostní před hypertextovým odkazem <A>. Prohlížeč vyhledá definici citlivých ploch dle atributu USEMAP a značku <A> ignoruje. Prohlížeč, který neumí zpracovávat definici citlivých ploch na straně klienta, atribut USEMAP ignoruje a zpracuje citlivý obrázek původní metodou.

Pro definici citlivých ploch jsou zavedeny nové značky <MAP> a <AREA>. Každému použitému odkazu musí odpovídat definice citlivých ploch značkou <MAP>. Jméno uvedené v atributu USEMAP musí odpovídat jménu uvedenému v atributu NAME značky <MAP>: 

<MAP NAME="map">
<AREA SHAPE="rect" COORDS="20,20,199,39" HREF="news.html" ALT="Novinky">
<AREA SHAPE="circle" COORDS="100,100,40" HREF="index.html" ALT="Index">
<AREA SHAPE="default" HREF="default.html">
</MAP>
Citlivé plochy jsou popsány značkami <AREA>. Formát zadávání citlivých ploch odpovídá zadávání ploch na straně serveru. Atributy SHAPE a COORDS určují tvar a rozměry plochy. Plochou může být obdélník (RECT), kruh (CIRCLE) nebo obecný mnohoúhelník (POLY). Obdélník je popsán souřadnicemi levého horního rohu a pravého dolního rohu. Kruhová plocha je popsána souřadnicí středu a poloměrem. Mnohoúhelník je popsán souřadnicemi jednotlivých vrcholů. Atribut HREF definuje cíl odkazu.

Definice citlivých obrázků na straně klienta je podporována v běžných prohlížečích (Netscape 2.0, Microsoft Internet Explorer 2.0).

Typografické značky

Firma Netscape zavedla u svých prohlížečů celou řadu doplňků, z nichž se mnohé týkají typografického řízení zobrazení dokumentu. Tyto značky implementovala také firma Microsoft ve svém prohlížeči Internet Explorer a staly se tak de facto standardem. Proto byly posléze zahrnuty do standardu jazyka HTML verze 3.2. Jedná se o řízení typu písma a typografické značky <BIG>, <SMALL>, <SUB> a <SUP>. V následujícím přehledu jsou uvedeny značky jazyka HTML verze 2.0 a zvýrazněně nové značky.

Logické značky

Značka Zobrazení Význam
<CITE>Systém WWW</CITE> Systém WWW citace
<CODE>x = a + i*b</CODE> x = a + i*b kód programu
<DFN>termín</DFN> termín definice termínu
<EM>nelze</EM> nelze zdůraznění
<KBD>rm abc</KBD>rm abc vstup uživatele
<SAMP>XmNwidth</SAMP> XmNwidth výpis, konstanta
<STRONG>nikdy</STRONG> nikdy silné zdůraznění
<VAR>filename</VAR> filename proměnná

Typografické značky

Značka Zobrazení
<B>tučně</B> tučně
<BIG>velkým</BIG> velkým
<I>kurzíva</I> kurzíva
<SMALL>malým</SMALL> malým
<S>přeškrknutě</S> přeškrknutě
<SUB>dolní index</SUB> dolní index
<SUP>horní index</SUP> horní index
<TT>neproporcionálně</TT> neproporcionálně
<U>podtrženě</U> podtrženě

Pro řízení typu písma byla zavedena párová značka <FONT> s atributy SIZE, COLOR a FACE. Atribut SIZE je určen pro nastavení velikosti písma. Velikost písma může být zadána relativně nebo absolutně. Absolutní velikost je číslo v rozmezí 1 až 7, čím větší, tím větší velikost písma. Implicitní velikost normálního písma v odstavci je 3. Relativní velikost je číslo začínající znaménkem plus nebo minus a vztahuje se k velikosti písma zadané značkou <BASEFONT>, nebo pokud není tato značka uvedena, pak k normální velikosti písma.

Značka <FONT> i <BASEFONT> může mít atribut COLOR a FACE. Atribut COLOR definuje barvu písma stejným způsobem jako je definována barva písma ve značce <BODY>. Atribut FACE je určen pro volbu typu písma. Typ je zadán seznamem jmen písem. Prohlížeč použije pro zobrazení textu první písmo ze seznamu, které má dostupné. 

<FONT SIZE="+1" COLOR="blue" FACE="Century Gothic,Arial">
Modrý text větším písmem</FONT><BR>
Normální velikost<BR>
<FONT SIZE="-1" COLOR="red">
Červený text menším písmem</FONT> <BR>
<FONT SIZE=1>Písmo velikosti 1</FONT><BR>
<FONT SIZE=2>Písmo velikosti 2</FONT><BR>
<FONT SIZE=3>Písmo velikosti 3</FONT><BR>
<FONT SIZE=4>Písmo velikosti 4</FONT><BR>
<FONT SIZE=5>Písmo velikosti 5</FONT><BR>
<FONT SIZE=6>Písmo velikosti 6</FONT><BR>
<FONT SIZE=7>Písmo velikosti 7</FONT><BR>
Pokud nevidíte následující řádek česky, je vina na straně prohlížeče!
Modrý text větším písmem
Normální velikost
Červený text menším písmem
Písmo velikosti 1
Písmo velikosti 2
Písmo velikosti 3
Písmo velikosti 4
Písmo velikosti 5
Písmo velikosti 6
Písmo velikosti 7