Hiperłącza

Hiperłącza zwane linkami mają mają na celu umożliwienie użytkownikowi sprawnego nawigowania pomiędzy stronami i treścią w nich zawartą. To dzieki nim możemy porcjować dane dzieląc je na poszczególne podstrony i poprzez budowę sprawnej nawigacji pomóc doprowadzić odwiedzającego dokładnie do tych informacji, których poszukuje.

Łącza bezwzględne

Przykładowe hiperłącze:

<a href="https://expose.pl/baza-wiedzy-expose">Link do strony 2</a>

W powyższym kodzie po raz pierwszy pojawił się atrybut znacznika. W przypadku linków: “href” ma jako wartość podany adres strony, do której zostaniemy przeniesieni po kliknięciu na tekst wpisany wewnątrz tagu.

Do innych serwisów www można linkować jedynie za pomocą linków bezwzględnych.

W przypadku umieszczenia katalogu ze stroną na dysku twardym adres bezwzględny mogłby wyglądać np. tak:

<a href="c:wwwstronystrona1index.html">Link do dysku</a>

Jak widać takie linki nie są łatwe do zapamiętania, są za to niewygodne do wpisywania i mają jeszcze jedną poważną wadę. Jeżeli ścieżka obejmuje lokalizację na serwerze bądź na dysku twardym to w przypadku przeniesienia folderu z plikami strony w inne miejsce wszystkie łącza przestaną działać. Rozwiązaniem takiego problemu mogą być linki względne.

Łacza względne

<a href="strona2.html">Link do strony 2</a>

Linki względne mają taką zaletę, że ich działanie jest całkowicie niezależne od lokalizacji w jakiej się znajduje strona (nieważne jaki katalog czy domena) – ważne jedynie aby jej poszczególne pliki były odpowiednio rozmieszczone względem samych siebie.

Linki względne do innego folderu

Wyobraźmy sobie, że mamy nasz plik index.html oraz folder images na obrazki. Chcemy w indexie umieścić link do pliku obrazek.png znajdującego się w folderze images. Jak to zrobić?

<a href="./images/obrazek.png">Link do strony 2</a>

Jak widać wystarczy zacząć od znaków ./ i podać dalszą część ścieżki bezwzględnej aż do obrazka.

Linki względne do folderu poprzedzającego

A co jeżeli potrzebujemy się nieco cofnąć w drzewie katalogów? Np. kiedy edytujemy plik obrazki.html umieszczony w folderze images i chemy umieścić link “powrót” do znajdującego się poziom niżej pliku index.html.

<a href="../index.html">Link do strony 2</a>

Dodając więcej kropek możemy się cofnąć o więcej poziomów w drzewie.

Kotwice

Czasami w przypadku szczególnie długich dokumentów może zajść potrzeba wykonania nawigacji wewnątrz pojedyńczego pliku HTML. W takiej stytuacji można skorzystać z tzw. kotwic (anchor). Są to zwykłe linki, różnią się jednak wartością atrybutu href. Zamiast nazwy pliku bądź ścieżki podajemy identyfikator dowolnego znacznika wewnątrz dokumentu poprzedzony znakiem #.

<a href="#identyfikator1">Link do id</a>

Aby link działał jak należy musimy dodać jeszcze w tagu, do którego chcemy się odwołać atrybut id (identyfikator) o wartości identyfikator1.

<h2 id="indetyfikator1">Nagłówek do, którego linkujemy</h2>

Dzięki takiemu rozwiązaniu po kliknięciu w link, strona sama przewinie się do miejsca, w którym znajduje się wskazany identyfikatorem nagłówek. Można również linkować do id w innych dokumentach.

<a href="./images/obrazki.html#identyfikator1">Link do id w innym dokumencie</a>