Schopnost vytvořit odkaz v dokumentu, který vás přenese k jinému dokumentu, možná v síti na půli cesty po celém světě, je pravděpodobně jediným nejdůležitějším důvodem, proč byla vynalezena World Wide Web. Tyto odkazy nazývané hypertextové odkazy jsou "H" v jazyce HTML - HyperText Markup Language. Bez hypertextových odkazů by web nebyl velmi užitečný. Nebyly by žádné vyhledávače, sociální média nebo bannerové reklamy (dobře, většina z nás by mohla vidět, že jdou).
Když vytváříte vlastní webové stránky, budete chtít vytvořit hypertextové odkazy a KompoZer má nástroje, které usnadňují přidávání odkazů jakéhokoli typu. Vzorová stránka zobrazená v tomto kurzu bude obsahovat odkazy na jiné webové stránky ve čtyřech kategoriích, na jiné části stejné webové stránky a spuštění e-mailové zprávy. Začnu s nadpisem a čtyřmi kategoriemi H3 pro každou kategorii. Na další stránce přidáme několik odkazů.
01 z 05
Vytvoření hypertextového odkazu pomocí aplikace KompoZer
Nástroje hypertextového odkazu společnosti KompoZer jsou přístupné kliknutím na tlačítko Propojit na panelu nástrojů. Vytvoření hypertextového odkazu:
- Umístěte kurzor na stránku, na které chcete zobrazit hypertextový odkaz.
- Klikněte na tlačítko Propojit na panelu nástrojů. Zobrazí se dialogové okno Vlastnosti propojení.
- První pole, které potřebujete vyplnit, je pole Text odkazu. Zadejte text, který chcete zobrazit na stránce pro váš hypertextový odkaz.
- Druhé pole, které musíte vyplnit, je pole Lokalita odkazu. Zadejte adresu URL stránky, kterou váš hypertextový odkaz přijme při kliknutí na uživatele. Je dobré kopírovat a vložit adresu URL z adresního řádku prohlížeče. Je mnohem méně pravděpodobné, že uděláte chybu tímto způsobem a víte, alespoň v době vytváření odkazu, že stránka je naživu a že odkaz není přerušený.
- Klepněte na tlačítko OK a dialogové okno Vlastnosti propojení se zavře. Váš odkaz se nyní zobrazí na vaší stránce.
Na většině prohlížečů se hypertextový odkaz ve výchozím nastavení zobrazí s modrým podtrženým textem. Můžete použít vlastní styly na hypertextové odkazy s KompoZer, ale prozatím budeme držet základní hypertextový odkaz. Je dobré ukázat si stránku ve webovém prohlížeči a kliknout na odkazy a ujistit se, že fungují.
02 z 05
Vytváření kotvícího spojení s KompoZerem
Existuje další druh hypertextového odkazu, který vás po kliknutí přenese do jiné části stejné webové stránky. Tento druh hypertextového odkazu se nazývá kotevní odkaz a oblast stránky, na které jste přiřazeni při kliknutí na tento odkaz, se nazývá kotva. Pokud jste někdy použili odkaz "zpět nahoru" v dolní části webové stránky, kliknete na odkaz na kotvu.
Komposer umožňuje vytvářet kotvy, ke kterým můžete propojit, pomocí nástroje Ukotvení na panelu nástrojů.
- Klikněte na oblast stránky, kde chcete kotvu. To znamená, že chcete, aby prohlížeč stránek byl při klepnutí na ukotvovací odkaz. V tomto příkladu jsem kliknul těsně před "F" v záhlaví oblíbené hudby.
- Klikněte na tlačítko Ukotvení na panelu nástrojů. Zobrazí se dialogové okno Vlastnosti pojmenované kotvy.
- Každá kotva na stránce potřebuje jedinečný název. Pro tuto kotvu jsem použil jméno "hudba".
- Klepněte na tlačítko OK a měli byste vidět a na místě, kde jste chtěli kotvu, se objeví symbol ukotvení. Tento symbol se nezobrazí na vaší webové stránce, je to, jak vám KompoZer ukáže, kde jsou vaše kotvy.
- Opakujte postup pro všechny další oblasti stránky, kde chcete, aby uživatelé mohli přejít. Pokud máte na stránce mnoho textu oddělených hlavičkami nebo jiným logickým děličem, kotvy jsou snadný způsob navigace na stránce.
Dále vytvoříme odkazy, které převezmou čtenář na kotvy, které jste vytvořili.
03 ze dne 05
Vytváření navigace pomocí aplikace KompoZer
Nyní, když máte kotvy na vaší stránce, vytvoříme odkazy, které budou použity jako zkratky pro tyto kotvy. Pro tento tutoriál jsem vytvořil 1 řádek, 4 tabulku sloupců pod horní hlavičkou stránky. Každá buňka tabulky obsahuje stejný text jako hlavičky kategorie, které slouží k oddělení odkazů na stránce. V každém z těchto buněk tabulky vytvoříme odkaz na odpovídající kotvu.
04 z 05
Vytváření hypertextových odkazů na kotvy s KompoZerem
Nyní, když máme naši kotvy na místě a text, který použijeme pro zadání navigace na stránce, můžeme tyto textové bloky změnit na odkazy. Budeme znovu používat tlačítko Link, ale tentokrát to bude trochu jinak.
- Vyberte text, který chcete proměnit v odkaz. V tomto příkladu jsem zvolil text "Oblíbená hudba", který se nachází v první buňce tabulky v horní části stránky.
- Klikněte na tlačítko Propojit na panelu nástrojů. Zobrazí se dialogové okno Vlastnosti propojení.
- V tomto případě jsme vybrali text ještě předtím, než jsme klepli na tlačítko Propojit, takže část textu s odkazem v okně je již vyplněna a nelze ji editovat. Klepněte na šipku dolů v části Umístění odkazu. Zobrazí se seznam kotev, které jste vytvořili v předchozích krocích. V tomto příkladu jsem zvolil #music kotvu.
- Klepněte na tlačítko OK. Text oblíbené hudby v navigačním panelu se změní na odkaz, který způsobí, že prohlížeč přeskočí na tuto sekci na stránce, když klikne.
Všimneme si, že každá pojmenovaná kotva v rozevírací nabídce má znak "#" před sebou. Takto byste vytvořili odkaz na kotvu v jazyce HTML. "#" Před názvem kotvy informuje prohlížeč, že tento odkaz vás přivede na jiné místo na stejné stránce.
05 z 05
Vytvoření hypertextového odkazu z obrázku pomocí aplikace KompoZer
Věděli jste, že můžete vytvořit odkaz z obrázků, stejně jako z textu? Nástroj KompoZer vám to umožňuje pouze s několika kliknutími. Zde jsem vložil malý obrázek s ikonou ukazující směrem nahoru a text "TOP" na spodní straně stránky. Chystám se použít tento obrázek jako odkaz pro skok zpět do horní části stránky.
- Klepněte pravým tlačítkem myši na obrázek a z kontextového štítku vyberte Vlastnosti obrázku a vazby. Zobrazí se dialogové okno Vlastnosti obrazu.
- Na kartě Umístění se zobrazí název souboru a náhled miniatury, který již byl vyplněn. Do textového pole Alternativa byste měli zadat nějaký text. Toto je to, co se objeví, když přesunete myš nad obrázek, a také to, co čte čtenář obrazovky, když člověk se zrakovým postižením přečte webovou stránku.
- Klikněte na kartu Odkaz. Zde můžete zvolit kotvu z nabídky, stejně jako u kotvících spojů. Tento obrázek je ve skutečnosti používán jako ukotvení. Vybrala jsem kotvu #Links_Of_Interest, která nás zavedla zpět nahoru.
- Klepněte na tlačítko OK. Obraz se nyní klepá zpět na horní část stránky.