Elementy języka HTML 4 - Hiperłącza

Hiperłącza są podstawą funkcjonowania stron WWW. Bez hiperłączy przeglądanie stron byłoby bardzo utrudnione i wymagałoby znajomości budowy danego serwisu WWW przez odwiedzającego oraz ręcznego wpisywania odpowiednich adresów. Na szczęście mamy hiperłącza i w dość prosty sposób możemy z nich korzystać. Jak na pewno zauważyliście podczas swoich wędrówek, hiperłącza odnoszą się nie tylko do danego serwisu, ale bardzo często mamy podłączone inne strony znajdujące się tysiące kilometrów od przeglądanej witryny, a często na innym kontynencie. Użycie hiperłączy daje wręcz nieograniczone możliwości, które poznamy w dalszej części.

Budowa hiperłącza jest stosunkowo prosta i wygląda tak:

<A HREF="strona.html"> Kliknij tu, by zobaczyć strona.html</A>

Jak łatwo wywnioskować, znacznikiem odpowiedzialnym za odsyłacze jest <A></A>, wzbogacone o pewne atrybuty i tak dla odsyłacza takim obowiązkowym atrybutem jest HREF=" ", określające do jakiego dokumentu bądź miejsca ma prowadzić nasz odnośnik. Nasz odnośnik ma więc postać:

<A HREF="nazwa_pliku.html,,>

To tylko pierwsza część odsyłacza informująca, gdzie mamy się przenieść. Teraz musimy opisać nasz odsyłacz tak, by był widoczny i dostępny ze strony:

<A HREF=Mnazwa_pliku.html"> Kliknij tu, by zmienić stronę </A>

Oczywiście musimy pamiętać o znaczniku zamykającym , gdyż bez niego opis naszego odsyłacza będzie nieskończenie długi.

Odsyłacz może odnosić się do następujących miejsc:

(7kB)

Jak widać, możemy odnosić się praktycznie do wszystkiego, co nam przyjdzie do głowy, a przeglądarka pokaże nam wynik bądź zaproponuje zapisanie na dysku danego obiektu, np. pliku.zip.

Przedstawione odsyłacze do dokumentów odnoszą się do konkretnego pliku ale w połączeniu z kotwicą pozwalają odnieść się do konkretnego miejsca w danym dokumencie. Oznacza to, że odniesienie się do konkretnego pliku i do zadeklarowanej kotwicy spowoduje otwarcie przez przeglądarkę wskazanego pliku oraz przewinięcie dokumentu, tak by linia zawierająca kotwice była możliwie najbliżej górnej krawędzi przeglądarki. Jest to rozwiązanie szalenie przydatne w przypadku tworzenia dokumentów dłuższych niż jedna lub dwie długości ekranu monitora, gdyż ułatwia nawigację.

Deklaracja kotwicy wygląda następująco:

<A NAME="kotwica">Fragment</A> tekstu dokumentu ...

Poniżej przedstawiono efekt odniesienia się do tej kotwicy za pomocą polecenia umieszczonego wewnątrz kodu:

Jeśli chcesz odwołać się do kotwicy znajdującej się na tej stronie, kliknij

<A Elementy języka HTML 4 - Hiperłącza.html"> tutaj </A>.

Strona zostanie przewinięta do odpowiedniego miejsca, w którym wstawiłeś kotwice.

Warto napisać kilka słów na temat odsyłaczy. Istnieją dwa rodzaje odsyłaczy: względne i bezwzględne. Odsyłacz bezwzględny zawiera dokładny adres URL do danego pliku i wygląda tak:

<A href="http://www.http://www.ftj.agh.edu.pl/pic/WFiIS_AGH_plakat.jpg"> to jest odnośnik do pliku na serwerze Wydziału Fizyki i Informatyki Stosowanej AGH</A>

Odnośnik taki ma jedną istotną wadę przy używaniu go do połączenia plików w ramach naszej strony WWW. W przypadku zmiany serwera, na którym publikujemy witrynę, a co za tym idzie - jego adresu, będziemy musieli poprawić wszystkie odnośniki zapisane w ten sposób. Odnośników bezwzględnych powinno się używać do łączenia zewnętrznych stron, a przy dokumentach wewnątrz jednego serwisu należy stosować odnośniki względne.

Odnośnik względny ma następującą postać:

<A href="plik.html"> to jest odnośnik względny</A>

Przykładowe hiperłącze odnosi się do pliku umieszczonego w tym samym katalogu. Rozpatrzmy teraz przypadek, gdy nasz serwis posiada kilka działów, a każdy z nich ma zadeklarowany oddzielny katalog. Struktura wygląda tak:

(3kB)

Nasze pliki znajdują się wewnątrz katalogów. Zaczniemy od zadeklarowania hipotetycznego łącza pomiędzy plikami index.html & plik. html:

<a href=,,plik.html"> Odnośnik do plik.html</A>

Teraz plik.html połączymy z plikiem oferta.html znajdującym się w podkatalogu oferta:

<a href="oferta/oferta.html"> Odnośnik do pliku oferta.html</a>

W następujący sposób połączymy plik info.html z plikiem index.html:

<a href="../index.html"> Odnośnik do index.html</a>

Natomiast łączenie pliku info.html z plikiem oferta.html ma taką postać:

<a href="../oferta/oferta.html> Odnośnik do oferta.html</a>

Dwie kropki .. sugerują, by przeglądarka w poszukiwaniu pliku wróciła o jedno "piętro" wyżej. Deklaracja katalogu bezpośrednio po .. mówi, by przeglądarka zeszła o jedno "piętro" niżej w drzewie katalogów - czyli do katalogu sąsiedniego, w poszukiwaniu danego pliku. Oczywiście ciąg "../../" może być dowolnie długi w zależności od potrzeb.

Omówiliśmy wspólnie odsyłacze tekstowe. Twórcy języka HTML przewidzieli również możliwość deklarowania odsyłaczy graficznych. Inaczej mówiąc, możemy za pomocą znacznika <A> spowodować, by nasz obrazek był hiperłączem do innej strony. Budowa takiego graficznego odnośnika jest bajecznie prosta. Odnośnik graficzny składa się z deklaracji odnośnika oraz znacznika wstawiającego obrazek do strony. Znacznik <A> już znamy natomiast znacznik wstawiający obrazek zostanie pokazany, a jego omówienie znajdzie się w następnej sekcji, poświeconej umieszczaniu grafiki na stronie.

<a href="http://www.helion.com.pl"><IMG SCR="obrazek.gif"></a>

Jak widzimy, część pomiędzy znacznikiem <a> </a> zamiast tekstu będącego odnośnikiem zawiera jedynie deklarację umieszczającą w tym miejscu obrazek.