HTML/CSS, Poradniki webdevelopera

Jak wstawić hiperłącze w HTML?

0

Zarządzając stroną internetową, nie raz pewnie potrzebowałeś/aś stworzyć odnośnik do np. innej podstrony czy też innego serwisu. W tym artykule przedstawimy jak prawidłowo deklarować hiperłącza oraz poprzemy to praktycznymi przykładami, zapraszamy do artykułu.

Tagi odpowiadające za deklarowanie hiperłączy

W celu utworzenia odnośnika do strony, musimy skorzystać z tagów:

<a href="Adres strony internetowej">Tekst, który będzie odnośnikiem</a>

Dlaczego znacznik definiujący link to właśnie <a>? Nazwa pochodzi od angielskiego słowa „anchor”, który wprost oznacza kotwicę (w samej treści zakotwiczamy link do źródła zewnętrznego).

Jak widzimy, sam tag posiada atrybut href, w którym deklarujemy docelowy link (miejsce do którego zostaniemy przekierowani po kliknięciu).

Trochę praktyki: jeżeli chcemy utworzyć link do np. strony cyberiusz.pl o nazwie Blog IT to kod będzie wyglądał następująco:

<a href="https://cyberiusz.pl/">Blog IT </a>

Dodatkowe atrybuty hiperłączy

Powyżej przedstawiliśmy podstawową składnię odnośników, jednak to nie wszystko co w nich możemy zrobić. Każdemu odnośnikowi możemy dodać atrybuty, które wprost będą wpływać na proces przekierowania np.:

  • target=”_blank” – dodanie właściwości _blank spowoduje, że po kliknięciu link otworzy się w nowej karcie przeglądarki.
  • target=”_self” – dodanie właściwości _self spowoduje, że po kliknięciu w link zostaniemy przekierowani na nowy adres w tym samym oknie przeglądarki (jest to ustawienie domyślne)
  • target=”_parent” oraz target=”_top” – otworzy nowy adres w odpowiedniej ramce – jest to ściśle powiązane z tzw. framesetem. Właściwość _parent otworzy witrynę w ramce o jeden poziom wyżej (według wewnętrznej hierarchii), natomiast _top w nadrzędnej ramce. Projektowanie stron opartych o ramki to relikt przeszłości od którego się niemal w całości odeszło.

Jak zmienić kolor odnośnika – trochę praktyki

W ramach ćwiczenia i powtórzenia, utworzymy link w podstawowej strukturze HTML i zmienimy jego kolor z podstawowego niebieskiego na np. zielony. Sam link po kliknięciu ma wymusić otworzenie nowej karty wyszukiwarki z docelowym adresem. Zaczynajmy!

Krok 1.

Przygotowujemy strukturę HTML (wraz z linkiem):

<!DOCTYPE HTML>
<html lang="pl">
<head>
<title>Ćwiczymy hiperłącza</title>
<style>
</style>
</head>
<body>
 
< a href="https://cyberiusz.pl/" target="_blank">Przykładowy link</a>
 
</body>
</html>

Krok 2.

Zmieniamy jego kolor poprzez nadpisanie. Wewnątrz tagów <style></style> w sekcji <head></head> możemy nadpisać nasze style dla odnośników:


<style>
a {color:green;}
</style>

Cały kod wygląda następująco:

<!DOCTYPE HTML>
<html lang="pl">
<head>
<title>Ćwiczymy hiperłącza</title>
<style>
a {color:green;}
</style>
</head>
<body>
 
< a href="https://cyberiusz.pl/" target="_blank">Przykładowy link</a>
 
</body>
</html>

Efekt naszego kodu:

Przykładowy link

Podsumowanie

Zapoznając się z powyższym artykułem pozyskałeś/aś kompletną wiedzę z zakresu linków w HTML. Mamy nadzieję, że całe zagadnienie jest w pełni zrozumiałe, jeżeli pojawią się jakieś pytania to zapraszamy do pozostawienia komentarzy.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *