Kurs HTML - Odsyłacze

Autor: Rafał Jan Świrk

Opublikowano: 2011-10-07

Bardzo często spotykamy w sieci odsyłacze, hiperłącza, odnośniki, linki, wiele nazw określających ten sam element. Występują one zazwyczaj w formie niebieskiego fragmentu tekstu lub jakiegoś obrazka. Ciężko sobie wyobrazić, jak Internet mógłby bez nich funkcjonować. Ułatwiają nam nawigację na stronie, szybkie przejście między poszczególnymi podstronami, czy nawet wysłanie e-maila pod wskazany adres.

Standardowym przykładem wykorzystania odsyłaczy jest tworzenie menu na stronach. Znacząco upraszcza to poruszanie się po portalu. W innym przypadku wykorzystujemy je jako odnośniki do innych serwisów internetowych. Naturalnie na tym nie kończy się ich funkcjonalność.

Po zapoznaniu się z tym artykułem będziesz:

• znał typy odsyłaczy i ich zastosowanie,
• potrafił wykorzystywać odsyłacze do nawigacji na własnej stronie WWW,
• wiedział, jak zamieścić link do innej strony,
• umiał stworzyć mapę odsyłaczy.

Implementacja

Składnia typowego hiperłącza wygląda następująco:

<a href="adres strony">tekst wyświetlany w oknie przeglądarki</a>

• a – (ang. anchor – kotwica) określa odnośnik do innej strony WWW lub miejsca na tej samej stronie,
• href – (ang. hyperlink referrer – hiperłącze odsyłające) – określa miejsce, w które zostanie przeniesiony użytkownik po kliknięciu w odnośnik,

Wyróżniamy wiele typów odsyłaczy:

• względne/bezwzględne,
• etykiety,
• wewnętrzne,
• mailto,
• ftp,
• news,
• mapy odsyłaczy.

Zacznijmy od podziału odsyłaczy na względne i bezwzględne. Odsyłacze względne zawierają dokładny adres strony w sieci, np. https://msdn.microsoft.com/. Zazwyczaj używa się ich jako odnośników do stron, znajdujących się poza portalem. Nie powinno się ich używać do komunikacji stronna własnej stronie WWW. Powód jest prosty, w przypadku zmiany serwera WWW, będziemy musieli poprawić adresy wszystkich stron.

Przykład kodu odnośnika bezwzględnego:

<a href="https://msdn.microsoft.com/">Link prowadzący do portalu MSDN</a>

Rys.1. Przykład odnośnika bezwzględnego.

Przykład kodu odnośnika względnego:

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

Rys.2. Przykład odnośnika względnego.

Jeśli strona, do której chcemy dodać bezpośredni odnośnik, znajduje się w innym katalogu, musimy to uwzględnić przy podawaniu ścieżki do pliku, np. jeśli strona o nazwie „galeria.html” znajduje się w podkatalogu o nazwie „obrazki” to link powinien mieć następującą postać:

<a href="obrazki/galeria.html">Odnośnik bezpośredni do pliku "galeria.html" w katalogu obrazki</a>

Gdy tworzymy rozbudowaną stronę, opisującą niezwykle rozwiąźle bardzo skomplikowane zagadnienie, niekiedy przybiera ona bardzo długą formę. Pojawia się wtedy problem, który dotyczy przewijania tekstu. W jaki sposób ułatwić nawigację na tej stronie, żeby użytkownik nie musiał przewijać dużej ilości tekstu za pomocą rolki na myszce. W takich sytuacjach z pomocą przychodzą etykiety (z ang. anchor – kotwica). Najprościej rzecz ujmując są to zakładki, które po kliknięciu przenoszą nas w określone miejsce i co najważniejsze, nie muszą się znajdować na tej samej stronie. Przyjrzyjmy się im od strony technicznej. Na początku musimy utworzyć zakładkę w następujący sposób:

<a name="NazwaEtykiety">Opis</a>

Odwołujemy się do niej tak samo jak w przypadku standardowych odnośników:

<a href="#NazwaEtykiety">Opis</a>

Oczywiście pole „Opis” będzie zawierało tekst wyświetlany w przeglądarce. W przypadku, gdy będziemy chcieli odwołać się do innej strony, składnia będzie miała następującą postać:

<a href="Tutaj podajemy adres strony#NazwaEtykiety">Opis</a>

Niekiedy spotykamy się z odsyłaczami, które nazywamy wewnętrznymi. Odsyłacze wewnętrzne to po prostu etykiety, umożliwiające nawigację wewnątrz jednego dokumentu.

Informacja

Kliknięcie na odsyłacz wewnętrzny powoduje przeniesienie użytkownika w określone miejsce w dokumencie, bez jego przeładowania.

Jak już wcześniej wspomniałem, możliwości odnośników nie kończą się tylko na nawigacji po poszczególnych stronach internetowych. Przyjrzyjmy się teraz ich mniej typowej funkcjonalności. Na początku zajmiemy się odnośnikami do poczty elektronicznej (tzw. mailto). Wbrew temu co można wnioskować po nazwie, nie wysyłają one maila zaraz po kliknięciu. Zamiast tego otwierają program pocztowy, ustawiony w systemie jako domyślny (np. Outlook Express), z wypełnionym polem adresu. Kod takiego linka wygląda następująco:

<a href="mailto:adres e-mail">Opis wyświetlany w przeglądarce</a>

W przypadku, gdy chcemy wysłać kilka e-maili, musimy rozdzielić je średnikami. Oto przykład:

<a href="mailto:adres e-mail_1;adres e-mail_2;">Opis wyświetlany w przeglądarce</a>

Możemy również definiować inne wartości. Oto ich przykłady zastosowania w następujących kodach:

• temat e-maila:

<a href="mailto:adres e-mail?subject=Temat listu">Opis...</a>

• treść:

<a href="mailto:adres e-mail?body=treść e-maila">Opis...</a>

• adres odbiorcy, który otrzyma kopię listu:

<a href="mailto:adres e-mail?cc=adres_odbiorcy@przyklad.pl">Opis...</a>

• ukryty adres odbiorcy (adres nie będzie widoczny przez innych odbiorców)

<a href="mailto:adres e-mail?bcc=ukryty_adres_odbiorcy@przyklad.pl">Opis...</a>

Istnieje możliwość umieszczania wszystkich powyższych parametrów w jednym odnośników. Aby to zrobić użyjemy parametru &amp:

<a href="mailto:adres e-mail_1@przyklad.pl;adres e-mail_2@przyklad.pl &amp ?subject=Dzienna korespondencja &amp ?body= Dzień dobry &amp ">Opis...</a>

Inny rodzaj odsyłaczy to ftp. Umożliwiają one pobieranie plików z serwerów ftp ( z ang. File Transport Protocol – protokół transmisji plików). Ich konstrukcja jest następująca:

<a href="ftp://ftp.adresik.przykladowy.pl/pliczek.zip">Tekst w przeglądarce</a>

Do naszej strony możemy również dodać odnośnik do grupy dyskusyjnej, tzw. news. W praktyce wygląda to następująco:

<a href="news:NazwaGrupy">Opis</a>

Odsyłacze możemy wykorzystać do obsługi rzadziej używanych usług, takich jak:

• Gopher: <a href="gopher://..."></a>,
• Telnet: <a href="telnet://..."></a>,
• WAIS: <a href="wais://..."></a>,
• itp.

Ostatnim elementem z grupy odsyłaczy jest mapa odsyłaczy. Umożliwia ona wykorzystanie obrazka jako odnośnika do jednego lub wielu elementów. Struktura takiej mapy wygląda następująco:

<img src="mapa.gif " usemap="#mapa1">
<map name ="mapa1">
<area shape="rect" coords="1, 1, 50, 50" href="str1.html" alt="Strona 1">
<area shape="rect" coords="51, 1, 100, 50" href="str2.html" alt="Strona 2">
<area shape="rect" coords="1, 51, 51, 100" href="str3.html" alt="Strona 3">
<area shape="rect" coords="51, 51, 100, 100" href="str4.html" alt="Strona 4">
</map>

Niektórych może przerazić taka ilość kodu, ale ,wbrew pozorom, nie jest on skomplikowany. W pierwszym wierszu wczytujemy obrazek na stronę, pole usemap informuje przeglądarkę, że ma do czynienia z odsyłaczem obrazkowym, który jest mapowany. Drugi wiersz to początek definicji mapy. W kolejnych podajemy współrzędne prostokątów, które będą tworzyły odnośniki. Mapy możemy również tworzyć za pomocą innych kształtów, np. koła. Wtedy zamiast parametru rect używamy circle i podajemy współrzędne środka koła oraz jego promień. Aby zdefiniować jakiś nieregularny kształt, używamy parametru polygon i podajemy co najmniej trzy pary współrzędnych. Na samym końcu podajemy zakończenie definicji mapy.

Rys.3. Mapa odsyłaczy.

Podsumowanie

W tym artykule poznaliśmy podstawowe typy odsyłaczy. Dowiedzieliśmy się, że mogą one przybierać formę tekstu lub obrazków, możemy je wykorzystywać nie tylko do nawigacji po stronach, ale również do wysyłania poczty, pobierania plików oraz wielu innych rzeczy.

---