7. lekce - obrázky jako odkazy

Na obrázky fungující jako odkaz narazíte především ve fotogaleriích - většinou mají jako úvodní stránku s náhledy, na které je možno kliknout pro zobrazení většího obrázku (fotografie). Obrázek jako odkaz je použitý také na těch stránkách, na kterých jsou použita obrázková tlačítka - takových spíše ubývá, přece jen pomocí stylů se dají odkazy dostatečně vylepšit a každý obrázek na stránce navíc zvětšuje dobu načítání stránky. Pro toho, kdo si pamatuje, jak vytvořit odkaz a jak vložit obrázek na stránku, bude tato lekce snadná:

Abychom mohli použít obrázek jako odkaz, musíme si připomenout tagy z minulých lekcí:
odkaz: <a href="stránka.html"> text odkazu </a>
obrázek: <img src = "foto.jpg" alt="Foto Sněžky">
Pokud si uvědomíte, že místo na text odkazu chcete kliknout na obrázek, možná byste i sami přišli na to, jak použít obrázek jako odkaz:
<a href="stránka.html"> <img src = "foto.jpg"> </a>
Jak je vidět, text odkazu, na který se kliká, se jen nahradí obrázkem, první závorka zůstává stejná - obsahuje název (či adresu) stránky, která se má po kliknutí otevřít.
Má-li se po kliknutí otevřít jen "holý" obrázek (bez jakéhokoliv další textu či jiného obsahu), je možné místo adresy stránky použít jen název obrázku (samozřejmě většího než náhledového):
<a href="větší foto.jpg"> <img src = "foto.jpg"> </a>
Za normálních okolností (nastavení) prohlížeče obrázek zobrazí, problém by nastal, pokud je vypnuté zobrazení obrázků.

Pro splnění následujícího úkolu se naučíme ještě používat klávesu PrintScreen (PrtSc) - klávesa Printscreen zkopíruje do schránky to, co je momentálně zobrazeno na monitoru, potom už stačí obrázek vložit (Ctrl+V) do grafického editoru (dá se použít i Malování z Příslušenství Windows), případně upravit a uložit. Tyto "sejmuté" obrazovky (screenshoty) se používají třeba do stránek o hrách, různých návodů, kurzů či lekcí (že :-) ).


Úkol:

Úkol (3 body):

Vytvoř novou stránku hry.html. Má na ní být nadpis a alespoň tři náhledové (menší obrázky) odkazy na větší obrázky z her. Alespoň jeden z obrázků získej pomocí klávesy PrintScreen, další dva můžeš použít ze složky "tvorba WWWů. (Vlastně potřebuješ šest obrázků - tři v původní velikosti a tytéž tři zmenšené.) Na stránku index.html přidej odkaz na tuto novou stránku hry.html.

Název školy:Základní škola, Hradec Králové, M. Horákové 258
Název projektu:EU peníze školám
Číslo projektu:CZ.1.07/1.4.00/21.2575
Téma:Tvorba WWW stránek
Název:VY_32_INOVACE_07_10B_tvorba www7
Autor:Pavel Petr
Použité zdroje: Není-li uvedeno jinak, jsou všechny ilustrační obrázky dílem autora.