CELÁ OBRAZOVKA ZPĚT NA OBSAH



2.opakování

(shrnutí lekcí 5 až 7)

Obsah lekce :

Hypertextové odkazy

Hypertextové odkazy tvoří základní kámen jazyka HTML. Díky těmto odkazům je možné skákat na jiná místa v rámci jednoho dokumentu nebo otevírat libovolné dokumenty, které jsou uloženy na jakémkoliv WWW serveru kdekoliv na světě. Hypertextové odkazy jsou definovány příkazem <A>.
Například u dlouhých dokumentů je velice užitečné, když autor uvede hned na začátku dokumentu jeho stručný obsah, z jehož jednotlivých položek vedou hypertextová spojení, která čtenáře jedním kliknutím myši přenesou na požadované místo v dokumentu . V tomto případě je nutné označit v textu místa, na která budou hyperlinky odkazovat. Druhou nezbytností jsou vlastní hyperlinky. Oba příkazy jsou uvozeny návěštím <A> (anchor). Místo v dokumentu, ke kterému se vztahuje nějaký hypertextový odkaz, se nazývá "kotva" a je definována atributem NAME. Příkaz ke skoku na tuto kotvu (nebo skok na jiný dokument) je definován atributem HREF (hypertext reference). Při odkazování na kotvu musí názvu této kotvy předcházet v atributu HREF znak "#". Při použití atributu HREF je oblast mezi návěštími <A> a </A> použita jako hypertextový odkaz, na který když kliknete myší, skočíte na jiné místo dokumentu, příp. na jiný dokument. Z tohoto důvodu nesmí zůstat kontejner <A> prázdný. Naopak při použití atributu NAME nemá obsah téhož kontejneru žádný význam.


<UL>
<LH><B>Obsah lekce:</B></LH>
<A HREF="#local">
<LI>hyperlinky v rámci jednoho dokumentu</LI></A>
<A HREF="#remote">
<LI>hyperlinky na jiné HTML dokumenty</LI></A>
</UL>

Někde v dokumentu se nachází kotvy:
<A NAME="local"></A>
<A NAME="remote"></A>

Bude zobrazeno (s plně funkčními hyperlinky) takto:


Pomocí atributu HREF je možno odkazovat v aktuálním dokumentu na kotvu i na soubory, které v sobě skrývají jiné dokumenty HTML. Při odkazování na soubory na jednom serveru je výhodné zadávat k souborům relativní cesty. Při takovém způsobu se vychází z adresáře, v němž je uložena aktuální stránka. Pro zadání cesty k podadresářům se nepoužívají obrácená lomítka "\" (jako je tomu například u systému MS-DOS), ale lomítka normální "/".
Název kotvy umístěný v požadovaném dokumentu (je-li zadán jako součást hodnoty atributu HREF), vás kliknutím myši přenese přímo na požadované místo v novém dokumentu.


Předchozí příklad, upravený pro jiný soubor ze stejného adresáře

<UL>
<LH><B>Obsah lekce:</B></LH>
<A HREF="hyperlnk.htm#local">
<LI>hyperlinky v rámci jednoho dokumentu</LI></A>
<A HREF="hyperlnk.htm#remote">
<LI>hyperlinky na jiné HTML dokumenty</LI></A>
</UL>


Zřejmě největší význam hyperlinků se projeví až při použití odkazu na úplné (absolutní) URL adresy. Tímto způsobem je totiž možné propojovat libovolné HTML dokumenty, které jsou uloženy na kterémkoliv serveru ve světě.


Předchozí příklad, upravený pro odkaz z jiného serveru

<UL>
<LH><B>Obsah lekce:</B></LH>
<A HREF="http://sellene.zcu.cz:88/indy/hyperlnk.htm#local">
<LI>hyperlinky v rámci jednoho dokumentu</LI></A>
<A HREF="http://sellene.zcu.cz:88/indy/hyperlnk.htm#remote">
<LI>hyperlinky na jiné HTML dokumenty</LI></A>
</UL>

Grafika

Jazyk HTML umožňuje vkládat obrázky přímo do dokumentu prostřednictvím příkazu <IMG>. Obrázky jsou na WWW stránkách používány ve stále hojnější míře. V podstatě celý dokument se může skládat jen z obrázků, ovšem doba přenosu takovéto stránky z jiného serveru na Internetu může trvat i několik desítek minut.
Obrázky, které uvidíte v jakémkoliv dokumentu nejsou součástí zdrojového kódu, ale jsou někde uloženy na WWW serveru, nejčastěji v grafickém formátu GIF nebo JPEG. Název souboru s obrázem se do dokumentu vkládá pomocí atributu SRC.


Příklad :

<IMG SRC="images/grafika.gif">


V tomto příkladu je použita relativní URL adresa obrázku. Tato relativní adresa je vztažena k adresáři, v němž se nachází aktuální HTML stránka. Stejně jako u hypertextových odkazů lze použít i absolutní URL adresu. Příkaz <IMG> prohlížeč chápe jako jakýkoliv jiný příkaz pro psaní textu. V praxi to znamená, že obrázek není nijak odsazován, ani umístěn do nového odstavce.
Pokud následuje za sebou několik příkazů <IMG> tak, že mezi nimi není žádné návěští <P> (nový odstavec) nebo <BR> (vynucený přechod na novou řádku), prohlížeč zobrazí odpovídající obrázky vedle sebe, ovšem za předpokladu, že je k dispozici dostatek místa.
Obrázky lze centrovat buď pomocí příkazu <CENTER> nebo jejich umístěním do vystředěného odstavce (<P ALIGN=center>).

Podobně jako text mohou být v rámci kontejneru příkazu <A> (hypertextové odkazy) umístěny i obrázky. V tomto případě se pak jedná o tzv. "hypertextovou grafiku". Tímto způsobem lze velice jednoduše realizovat grafická menu.

Všude tam, kde používáte jako hyperlinků grafiku, je výhodné zadávat atribut ALT a do něj vepisovat text, který se zobrazí v prohlížečích, které neumějí grafiku zpracovávat. Bez tohoto opatření nelze hypertextovou grafiku v negrafických prohlížečích vůbec sledovat. Dalším důvodem k používání atributu ALT je výpis alternativního textu po celou dobu natahování obrázku. Díky tomu lze hyperlink použít dříve, než se na obrazovce objeví obrázek.
Obrázky je možné umísťovat v rámci řádku s textem. V tomto případě je s obrázkem zacházeno jako s každým jiným znakem textu. Výška obrázku například určuje výšku celého řádku a v normálním případě není možné, aby vedle jednoho obrázku bylo umístěno více řádek textu. K umísťování obrázku vůči řádku textu se používá atribut ALIGN.

Pomocí nových hodnot atributu ALIGN "right" a "left" lze překonat zastaralé umísťování obrázků do textu a obrázky vložit na stránku zcela nezávisle na textu buď vlevo nebo vpravo - dochází k "obtékání" obrázku textem. Pomocí atributů HSPACE a VSPACE lze zajistit, aby text nebyl příliš blízko okraje obrázku.

Atributy WIDTH a HEIGHT umožňují měnit šířku a výšku obrázku. Je-li zadán pouze jeden z nich, prohlížeč upraví velikost druhé (nezadané) hodnoty tak, aby poměr stran zůstal stále stejný jako v originále. Zvětšení obrázku zpravidla vede ke ztrátě kvality. Naopak, pokud chcete zobrazovat obrázek menší, je lépe vytvořit obrázek nový (v požadovaném měřítku), aby nebylo nutné přenášet sítí velké množství dat. Zadání obou hodnot atributů lze využít k různým efektům. Například obrázek tvořený jediným barevným pixelem je možné použít jako oddělovač textu (viz. příklad).

V případě obrázků na HTML stránkách je výhodné využívat možnosti, že jednou natažený obrázek v normálním případě prohlížeč uloží do vyrovnávací paměti, odkud je brán v případě, že je ze serveru opětovaně požadován. Když například opatříte všechny své dokumenty nějakým logem nebo stále se opakujícím grafickým symbolem, postačí tento obrázek stáhnout ze serveru pouze jednou, a to i přesto, že se vyskytuje všude.
Na HTML stránkách Internetu se často setkáte s obrázky, v jejichž rámci jsou definovány různé "klikací" oblasti. Podle toho, v jaké oblasti kliknete myší, provede se konkrétní akce (většinou dojde k natažení určitého HTML dokumentu). Dříve tato funkce byla implementována pomocí CGI scriptů, avšak nyní je zpracování "klikacích" obrázků velmi jednoduché. Vše co o klikací oblasti potřebujete znát, jsou souřadnice těchto oblastí. K jejich určení existuje několik utilit (například sharewareový produkt MapThis, který je volně přístupný na Internetu).

Barvy

V jazyce HTML lze nastavit motiv pozadí celého HTML dokumentu pomocí atributu BACKGROUND u návěští <BODY>. Tomuto atributu je přiřazena URL adresa grafiky, ze které je pak poskládán podklad stránky tak, že těsně na jeden obrázek navazuje další. Pokud je motiv zvolen chytře, lze pomocí jednoho malého obrázku vytvořit velmi působivé pozadí. Při výběru pozadí dokumentu je však nutné mít stále na paměti, že musí být voleno tak, aby nepůsobilo rušivě, a aby text stránky byl dobře čitelný.
Vůbec nejideálnější případ je, když obrázek tvořící pozadí působí po sesazení jednolitým dojmem. Takovéto plochy lze vytvořit například využitím "Kai's Power Tools" filtrů pro program Adobe Photoshop.

V novějších verzích prohlížečů lze definovat barvy pozadí i písma. Barvu je nutné zadat ve formátu šestimístného kódu hexadecimálních číslic. Vždy dva po sobě jdoucí znaky definují odstín jedné ze tří základních barev modelu RGB (R - red, G - green, B - blue = červená, zelená, modrá). Hodnoty odstínů barev je tedy možné ukládat v rozmezí 0 - 255 (! převedených do hexadecimálního kódu !) ve tvaru RRGGBB, před který se přidá znak "#".

Tento způsob zápisu je již na první pohled velmi nepohodlný. Z tohoto důvodu zavedl Netscape běžné názvy pro barvy, například: "yellow", "blue", ... Používat toto zjednodušení se však nedoporučuje, neboť ostatní prohlížeče neznají toto rozšíření a zmíněné barvy přečíst nedokáží. Například barva "red" způsobí v Exploreru modré zabarvení pozadí.
V některých HTML editorech jsou implementovány také šikovné funkce pro volbu barev. Příkladem těchto editorů mohou být například Kenn Nesbitt's Web Edit a HTML Assistant Pro.
V Netscape Navigatoru lze v rámci příkazu <BODY> definovat atributy: BACKGROUND, BGCOLOR, TEXT, LINK, VLINK, ALINK.


Příklad

Napište zdrojový program v jazyce HTML, jehož výsledkem bude následujících 15 řádek :

Toto je sparťanské a slávistické logo.

SLAVIA - SPARTA
1 : 1 (1:1)

Branky : 5. Vágner - 11. Siegl
Rozhodčí : Krondl
Žluté karty : Lerch, Vlček, Řehák, Horváth, P. Novotný - Z. Svoboda, V. Svoboda, Siegl, Votava, Hašek
Diváků : 12.123

SPARTA : Čaloun - Votava - Horňák, Novotný - V. Svoboda (79. Jarošík), Z. Svoboda, Hašek, Frýdek (58. Gabriel), Čížek - Siegl, Lokvenc

SLAVIA : Stejskal - Ašanin - Vlček, Řehák - Pěnička, P.Novotný (85. Vávra), Lerch (63. Jindráček), Horváth, Ulich - Vágner, Vácha

Jedno z možných řešení najdete zde


Testování - zde si můžete vyzkoušet, jak jste danou látku zvládli

CELA OBRAZOVKA ZPET NA OBSAH