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 :-) ).
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 |