Multimediální výchova

OPVK_hor_zkraceny_bezTextu_RGB_eng

ODKAZY


Dalším prvkem internetových stránek jsou odkazy. Představují skutečnou revoluci v pojetí brouzdání po internetu. Hypertextový odkaz poznáme nejčastěji jako podtržený text barevně odlišený od jiného textu. Když na takový odkaz najedeme myší, změní se kurzor na ruku a v případě kliknutí se objeví nová stránka nebo se stane nějaká jiná událost. Např. server seznam.cz obsahuje mnoho odkazů, které se zobrazují jako červeně podtržené texty.
K vytvoření odkazu potřebujeme znát nový tag. Otevřeme si nyní program PsPad a v nově otevřeném dokumentu vytvořte následující skript:

Pasted Graphic
Tento nový soubor uložte jako pozdravy.html a nyní otevřete soubor index.html. Tento soubor upravte podle následujícího příkladu:
Pasted Graphic 2
Oba soubory uložte do jedné společné složky a nyní v prohlížeči otevřere soubor index.html. Měli byste vidět tohle:
Pasted Graphic 1
Pod obrázkem picasa nalezneme novou větu: Moje pozdravy. Tato věta je barevná a podtržená. Když na ni najedeme myší, kurzor se změní a v tu chvíli můžeme kliknout. Proveďte tak a otevře se vám nová stránka:
Pasted Graphic 3
Co se stalo? V prvním souboru jsme umístili do 8. řádku nový tag:
Pasted Graphic 4
Uvnitř tagu odstavce P je nový tag A s parametrem HREF. Tag A slouží k odkazování - je to párový tag. Jeho parametr HREF je pro odkazy nutný a určuje vlastně jméno stránky, která se otevře když kliknu na určitý text. Oním textem je “Moje pozdravy” - je umístěn mezi tagy <a> a </a>. Proto jsme vytvořili nový soubor, abychom se na něj odkazovali a to je přesně to, co jsme chtěli. Odkaz umístěný v prvním souboru index.html nám otevřel druhý soubor pozdrav.html.
Máme však jeden problém. Když bych se chtěl nyní dostat do hlavní stránky s obrázkem, jak na to? Mohu využít kliknutí na zpěv v prohlížeči, ale dáte mi za pravdu - není to konfortní řešení, protože šipka tam nemusí být zobrazena a při jejím hledání ztrácím čas. Proto použijeme do druhého souboru odkaz, kterým se navrátíme zpět do hlavního souboru index.html. Nyní si otevřeme soubor pozdravy.html a upravíme obsah podle následujícího:
Pasted Graphic 5
A nyní je na čase, abychom se celý proces vyzkoušeli od začátku. V prohlížeči otevřete soubor index.html a klikněte na odkaz. Otevře se následující upravená stránka:
Pasted Graphic 6
Když kliknete na odkaz Zpět, vrátíte se do první stránky. A je to.
Odkazy se používají nejen na stránky, které jsme si vytvořili sami, ale také na cizí stránky. Když byste např. chtěli odkazovat na seznam, napíšete do souboru index.html tento skript:
Pasted Graphic
Po otevření (nebo znovunačtení souboru) v prohlížeči by se mělo zobrazit následující:
Pasted Graphic 1
Po kliknutí na odkaz “Moje nejoblíbenšější stránka” se otevře stránka seznamu. Všimněte si ale jedné skutečnosti. Odkaz na jinou stránku musí obsahovat celou adresu vč. hlavičky http://www. pokus byste do parametru HREF napsali pouze seznam.cz, pak by se napsalo chybové hlášení.
No, a opět jsme pokročili v chápání html a tvorby internetových stránek, tentokráte po stránce vkládání odkazů. Můžete si nyní vyzkoušet splnit domácí úkol: vytvořte si nový soubor odkazy.html a vložte do něj své nejoblíbenější odkazy na různé internetové stránky. Do souboru index.html pak vložte odkaz na soubor odkazy.html.