Ako vytvoriť hypertextový odkaz s

Schopnosť vytvoriť odkaz v dokumente, ktorý vás zavedie do iného dokumentu, možno v sieti na polceste po celom svete, je pravdepodobne najdôležitejším dôvodom, prečo bola vynájdená World Wide Web. Tieto odkazy nazývané hypertextové odkazy sú "H" v jazyku HTML - HyperText Markup Language. Bez hypertextových odkazov by web nebol veľmi užitočný. Neboli by existovali žiadne vyhľadávacie nástroje, sociálne médiá ani bannerové reklamy (v poriadku, väčšina z nás by mohla vidieť tých, ktorí idú).

Pri vytváraní vlastných webových stránok budete chcieť vytvoriť hypertextové odkazy a KompoZer má nástroje, ktoré uľahčujú pridávanie odkazov akéhokoľvek typu. Vzorová stránka zobrazená v tomto návode obsahuje odkazy na iné webové stránky v štyroch kategóriách, na iné časti tej istej webovej stránky a na spustenie e-mailovej správy. Začnem s nadpisom a štyrmi položkami H3 pre každú kategóriu. Na ďalšej stránke pridáme niekoľko odkazov.

01 z 05

Vytvorenie hypertextového odkazu s

Nástroje hypertextového odkazu spoločnosti KompoZer sa zobrazia kliknutím na tlačidlo Prepojenie na paneli s nástrojmi. Vytvorenie hypertextového odkazu:

1. Umiestnite kurzor na stránku, na ktorej sa má váš hypertextový odkaz zobraziť.
2. Kliknite na tlačidlo Prepojenie na paneli s nástrojmi. Zobrazí sa dialógové okno Vlastnosti odkazu.
3. Prvé pole, ktoré musíte vyplniť, je textové pole odkazu. Zadajte text, ktorý sa má zobraziť na stránke pre váš hypertextový odkaz.
4. Druhé pole, ktoré musíte vyplniť, je políčko Lokalita odkazu. Zadajte adresu URL stránky, ktorú váš odkaz dostane užívateľ pri kliknutí. Je dobré skopírovať a prilepiť adresu URL z panela s adresou vášho prehliadača. Máte oveľa menej pravdepodobnosť, že urobíte chybu týmto spôsobom a viete, aspoň v čase vytvárania vášho odkazu, že stránka je nažive a že odkaz nie je zlomený.
5. Kliknite na tlačidlo OK a dialógové okno Vlastnosti odkazu sa zatvorí. Váš odkaz sa teraz zobrazí na vašej stránke.

Vo väčšine prehliadačov sa hypertextový odkaz v predvolenom nastavení zobrazí s modrým podčiarknutým textom. Môžete použiť svoje vlastné štýly na hypertextové odkazy s KompoZerom, ale teraz budeme držať základný hypertextový odkaz. Je dobré prezrieť si stránku vo webovom prehliadači a kliknúť na odkazy, aby ste sa uistili, že fungujú.

02 z 05

Vytvorenie kotviaceho spojenia s KompoZerom

Existuje iný druh hypertextového odkazu, ktorý vás po kliknutí prenesie do inej časti tej istej webovej stránky. Tento druh hypertextového odkazu sa nazýva kotvové prepojenie a oblasť stránky, na ktorú ste sa pripojili po kliknutí na tento odkaz, sa nazýva kotva. Ak ste niekedy používali odkaz "späť na začiatok" v spodnej časti webovej stránky, kliknete na odkaz na kotvu.

Komposer umožňuje vytvárať kotvy, s ktorými môžete prepojiť pomocou nástroja Kotva na paneli s nástrojmi.

1. Kliknite na oblasť vašej stránky, kde chcete ukotviť. To znamená, že chcete, aby bol prehliadač stránok použitý pri kliknutí na ukotvenie. V tomto príklade som klikol tesne pred "F" v hlavičke obľúbenej hudby.
2. Kliknite na tlačidlo ukotvenia na paneli s nástrojmi. Zobrazí sa dialógové okno Named Anchor Properties.
3. Každá kotva na stránke potrebuje jedinečný názov. Pre túto kotvu som používal názov "hudba".
4. Kliknite na tlačidlo OK a mali by ste vidieť a objaví sa symbol ukotvenia na mieste, kde ste chceli kotvu. Tento symbol sa nezobrazí na vašej webovej stránke, je to, ako vám KompoZer ukáže, kde sú vaše kotvy.
5. Opakujte postup pre všetky ostatné oblasti stránky, na ktorých chcete, aby sa používatelia mohli skočiť. Ak máte na stránke mnoho textu oddelených hlavičkami alebo iným logickým deličom, kotvy sú jednoduchým spôsobom navigácie na stránke.

Ďalej vytvoríme prepojenia, ktoré prenesú čitateľa na vytvorené kotvy.

03 z 05

Vytváranie navigácie stránky pomocou programu KompoZer

Teraz, keď máte na svojej stránke kotvy, vytvoríme odkazy, ktoré sa použijú ako skratky pre tieto kotvy. Pre tento tutoriál som vytvoril 1 riadok, 4 stĺpcový stĺpec pod hornou hlavičkou stránky. Každá bunka tabuľky obsahuje rovnaký text ako jeden z hlavičiek kategórií, ktoré sa používajú na oddelenie odkazov na stránke. V každom z týchto buniek tabuľky vytvoríme odkaz na zodpovedajúcu kotvu.

04 z 05

Vytváranie hypertextových odkazov na kotvy s KompoZerom

Teraz, keď máme naše kotvy na mieste a text, ktorý budeme používať na zadanie navigácie na stránke, môžeme tieto textové bloky zmeniť na odkazy. Budeme používať tlačidlo prepojenia znova, ale tentoraz to bude fungovať trochu inak.

1. Vyberte text, ktorý chcete zmeniť na odkaz. V tomto príklade som vybral text "obľúbená hudba", ktorý sa nachádza v prvej bunke tabuľky v hornej časti stránky.
2. Kliknite na tlačidlo Prepojenie na paneli s nástrojmi. Zobrazí sa dialógové okno Vlastnosti odkazu.
3. V tomto prípade sme vybrali text skôr, ako sme klikli na tlačidlo prepojenia, takže sekcia Link Text v okne je už vyplnená a nedá sa upraviť. Kliknite na šípku nadol v časti Lokalita odkazov. Zobrazí sa zoznam kotviacich prvkov, ktoré ste vytvorili v predchádzajúcich krokoch. V tomto príklade vyberiem #music kotvu.
4. Kliknite na tlačidlo OK. Text "obľúbená hudba" v navigačnom paneli sa premení na prepojenie, ktoré spôsobí, že divák prejde na danú časť stránky po kliknutí.

Všimnite si, že každá pomenovaná kotva v rozbaľovacej ponuke má znak "#" pred ňou. Takto by ste vytvorili odkaz na kotvu v jazyku HTML. "#" Pred názvom kotvy informuje prehliadač, že tento odkaz vás presmeruje na iné miesto na tej istej stránke.

05 z 05

Vytvorenie hypertextového odkazu z obrázka pomocou programu KompoZer

Vedeli ste, že môžete vytvoriť odkaz z obrázkov, ako aj z textu? KompoZer vám to umožní len s niekoľkými kliknutiami. Tu som vložil malý obrázok s ikonou zobrazujúcou smerujúcu šípku nahor a text "TOP" v spodnej časti stránky. Použijem tento obrázok ako odkaz na preskočenie späť na začiatok stránky.

1. Kliknite pravým tlačidlom myši na obrázok a z kontextového označenia vyberte Vlastnosti obrázka a prepojení. Zobrazí sa dialógové okno Vlastnosti obrázka.
2. Na karte Poloha uvidíte názov súboru a zobrazenie miniatúry už vyplnené. Do textového poľa Alternate by ste mali zadať nejaký text. Toto sa zobrazuje, keď myšou presuniete obrázok, a tiež to, čo číta čítačka obrazovky, keď osoba s poškodením zraku číta webovú stránku.
3. Kliknite na kartu Odkaz. Tu si môžete vybrať kotvu z menu, rovnako ako to urobili s kotvovými spojmi. V skutočnosti sa tento obrázok používa ako kotvové spojenie. Vybrala som kotvu #Links_Of_Interest, ktorá nás nasmeruje späť na začiatok.
4. Kliknite na tlačidlo OK. Obraz sa teraz prepája späť na začiatok stránky po kliknutí.