Hypertextové odkazy jsou jednou z hlavních charakteristik internetu. Umožňují uživatelům přejít z jedné stránky na druhou, pohybovat se uvnitř webu a rychle navigovat po internetu. Jak ale nastavit hypertextový odkaz s různými objekty a prvky?
Nejběžnějším způsobem instalace hypertextových odkazů je použití značky . Tato značka vám umožňuje vytvářet odkazy na jiné webové stránky, dokumenty, obrázky, audio a video soubory. K instalaci odkazu na stránku stačí zadat její adresu URL (Uniform Resource Locator) v atributu href.
Existují však i jiné způsoby instalace hypertextových odkazů, například pomocí obrázků. K tomu se používá značka . Tato značka vám umožňuje vložit obrázky na webové stránky. Přidáním atributu usemap s odkazem na obrazovou mapu je možné, aby byl obrázek kliknut a nastavit hypertextový odkaz na konkrétní oblast obrázku.
Možnosti instalace hypertextového odkazu:
Hypertextové odkazy umožňují uživatelům přejít z jednoho webového dokumentu na druhý. V HTML existují různé způsoby instalace hypertextových odkazů:
- Odkaz na jinou webovou stránku pomocí značky :
- Text odkazu
- Odkaz na konkrétní sekci uvnitř aktuální stránky pomocí kotev:
- Text odkazu
- Odkaz na e-mail:
- [email protected]
- Odkaz ke stažení souboru:
- Stáhnout soubor
Pomocí textového prvku
- Textový prvek bez atributů:
- Textová položka s atributem target pro otevření odkazu na nové kartě:
V tomto příkladu, když kliknete na text "odkaz", bude uživatel přesměrován na adresu uvedenou v atributu href. Atribut target= "_blank" zaručuje otevření odkazu na nové kartě prohlížeče.
Instalace hypertextových odkazů pomocí textového prvku je velmi snadný a pohodlný způsob vytváření odkazů na webové stránce. V případě potřeby můžete použít různé atributy a styly k přizpůsobení vzhledu odkazů a jejich chování.
Pomocí obrázku
Hypertextový odkaz lze nastavit na obrázek tak, aby uživatel při kliknutí na něj klikl na daný odkaz.
K tomu je třeba použít značku a atribut href uvedením odkazu ve významu atributu. Uvnitř značky je třeba přidat značku s atributem src ukazující cestu k obrazu.
V tomto příkladu kliknutím na obrázek s image.jpg uživatel bude přesměrován na stránku https://example.com. V atributu alt měl by být uveden alternativní text, který se zobrazí, pokud není obrázek stažen.
Pomocí tlačítka
Chcete-li změnit tlačítko na hypertextový odkaz, musíte použít JavaScript. K tlačítku lze přidat obslužnou rutinu události click, takže po kliknutí na něj dojde k přesměrování na jinou webovou stránku. K tomu je třeba použít metodu window.location.href a zadejte adresu URL stránky, na kterou chcete přejít.
- Vytvořte tlačítko pomocí položky .
- Použijte JavaScript k přidání obslužné rutiny události click k tlačítku.
- Uvnitř obslužného programu události použijte metodu window.location.href pro přesměrování na jinou webovou stránku.
Zde je příklad kódu pro vytvoření tlačítka s hypertextovým odkazem po stisknutí:
Po kliknutí na tlačítko bude uživatel přesměrován na webovou stránku https://example.com .. Tuto adresu URL můžete nahradit jakoukoli jinou, kterou potřebujete.
Pomocí navigační nabídky
-
, a uspořádaný seznam, pomocí značky
.
Příklad použití neuspořádaného seznamu k vytvoření navigační nabídky:
-
namísto
. Pomocí CSS lze také přidat třídy nebo ID do položek nabídky pro styling.
Navigační menu lze umístit do libovolné části webové stránky. Obvykle se nachází v horní nebo boční části webu, aby bylo vidět hned po načtení stránky.