Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Odnośniki

Email Drukuj PDF

Odnośniki jeszcze do niedawna odróżniały strony WWW od wszystkich innych dokumentów elektronicznych. Możliwość deklarowania odnośników do innych dokumentów — niezależnie od ich umiejscowienia w globalnej Sieci — zrewolucjonizowała świat informacji. Czy klikając odnośnik przenoszący Cię z jednego artykułu do drugiego, możesz sobie wyobrazić, że kiedyś korzystano z globalnej Sieci komputerowej bez ich pomocy?

Odnośniki, nazywane czasem połączeniami (lub „linkami” — od angielskiego słowa link), są bardzo wygodnym narzędziem o wielkich możliwościach. Co ciekawe, tworzy się je wyjątkowo łatwo.

Adresy internetowe dzielą się na:

  • bezwzględne (na przykład http://www.helion.pl/) — podany adres od początku do końca (bezwzględnie) definiuje położenie strony WWW i może być stosowany w takiej samej postaci niezależnie od strony WWW, na której go użyjemy,

  • względne (na przykład .../teksty/opis.html lub też nowy.html) — podany adres definiuje położenie strony WWW wyłącznie względem aktualnej strony; użycie go na innej stronie WWW (umieszczonej w innym katalogu tego samego serwera lub na innym serwerze) uniemożliwi odszukanie wskazywanego przez odnośnik dokumentu.

Wskazówka
Adresy internetowe często nazywane są też adresami URL lub URI — od angielskich nazw Uniform Resource Locator oraz Uniform Resource Identifier (jednolity lokalizator/identyfikator zasobu).

Tworzenie odnośnika

Aby utworzyć odnośnik prowadzący do dowolnego punktu w Internecie, wystarczy objąć elementem <a> (czyli znacznikami: otwierającym <a> i zamykającym </a>) tekst, którego kliknięcie ma spowodować zadziałanie odnośnika. Adres docelowy podaje się w atrybucie href znacznika otwierającego. Aby na przykład w zdaniu Więcej szczegółów znajdziesz na stronach Wydawnictwa Helion zamienić wyrazy Wydawnictwa Helion na odnośnik prowadzący do strony WWW Wydawnictwa, musisz wprowadzić następujące zmiany w kodzie (rysunek 4.1):

<p>Więcej szczegółów znajdziesz na stronach

<a href="http://www.helion.pl/">Wydawnictwa Helion</a>.</p>

Rysunek 4.1. Wystarczy jeden element języka XHTML, by dowolny tekst zmienił się w odnośnik prowadzący do innej strony WWW

Najczęściej odnośniki umieszcza się wewnątrz akapitu tekstu, czyli wewnątrz elementu <p>. Staraj się unikać definiowania jako odnośników sformułowań typu „kliknij tutaj” — jest to nieeleganckie i świadczy najczęściej o małym doświadczeniu twórcy stron WWW. Staraj się maksymalnie wykorzystywać odnośniki do łączenia ze sobą stron powiązanych tematycznie, lecz nie ulegnij pokusie upstrzenia całej strony WWW odnośnikami.

Zauważ, że w powyższym przykładzie użyłem adresu w formie http://nazwa.serwera.www/. To jedyna poprawna forma, jeżeli odnośnik ma przenosić czytelnika na stronę WWW umieszczoną na innym serwerze niż Twoja strona; jest to wspomniany już adres bezwzględny. Gdybyś chciał skierować odnośnik do strony WWW należącej do Twojego serwisu, pomijasz adres serwera i podajesz tylko ścieżkę dostępu lub wręcz samą nazwę pliku, jeżeli oba pliki znajdują się w tym samym katalogu.

Tworzenie odnośnika pocztowego

Najprawdopodobniej nieraz widziałeś na stronach WWW odnośniki, których kliknięcie automatycznie otwierało okno Twojego programu pocztowego z nową, automatycznie zaadresowaną wiadomością. Wbrew pozorom przygotowanie takiego odnośnika jest znacznie łatwiejsze niż zwykłego odnośnika.

Umieszczenie na stronie odnośnika prowadzącego do Twojej skrzynki pocztowej zdecydowanie podniesie jakość tworzonej przez Ciebie strony, gdyż umożliwi jej czytelnikom zgłaszanie pod Twoim adresem uwag jej dotyczących. Nie zapominaj zatem o tym szczególe — najlepiej zaś przygotuj sobie szablon pustej strony (na podstawie którego będziesz tworzył kolejne strony podrzędne serwisu) z utworzonym w jej stopce odnośnikiem pocztowym.

Odnośnik pocztowy zamiast ścieżki do pliku zawiera wewnątrz atrybutu href słowo mailto (ang. mail to —poczta do), dwukropek i adres pocztowy. Na przykład:

Autor serwisu: <a href="mailto: Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. ">Jan&nbsp;Kowalski</a>

Oczywiście element <a> powinien obejmować tekst kojarzący się z adresem pocztowym lub pocztą — najczęściej jest to sam adres pocztowy lub imię i nazwisko osoby, do której zaadresowana będzie wiadomość. Kliknięcie tak przygotowanego odnośnika spowoduje pojawienie się okna nowej wiadomości pocztowej, już zaadresowanej i gotowej do wysłania zaraz po wprowadzeniu treści listu (rysunek 4.2).

Wskazówka
Oczywiście na komputerze, na którym zostanie kliknięty odnośnik, musi być zainstalowany i skonfigurowany niezależny program pocztowy. Taki odnośnik nie zadziała, jeżeli osoba czytająca Twoją stronę WWW używa systemu pocztowego dostępnego za pośrednictwem przeglądarki WWW.

Rysunek 4.2. Stworzenie odnośnika pocztowego automatyzuje wysyłanie wiadomości pocztowych przez czytelników strony

Pamiętaj, że zamieszczenie adresu pocztowego na stronie WWW dostępnej w Internecie jest równoznaczne z ujawnieniem go wszystkim osobom rozsyłającym hurtowo niechciane wiadomości elektroniczne (tak zwany spam). Jeśli zdecydujesz się dać czytelnikom Twojej strony możliwość kontaktowania się z Tobą, zadbaj o zabezpieczenie swojej skrzynki pocztowej przed napływem spamu.

Wskazówka
Pewnego rodzaju rozwiązaniem kwestii spamu jest umieszczenie na stronie WWW swojego adresu pocztowego w postaci obrazka i niekorzystanie z opcji tworzenia odnośnika umożliwiającego wysłanie poczty. Utrudni to jednak czytelnikom Twojego serwisu WWW kontakt z Tobą. Ponieważ priorytetem jest zadowolenie i wygoda użytkownika, raczej należy zamieszczać odnośniki pocztowe, a przed spamem chronić się za pomocą filtrów usuwających spam. Jest to tym lepsze rozwiązanie, że przed spamem bardzo trudno jest uciec — lepiej zatem nie uciekać, lecz aktywnie z nim walczyć.

Definiowanie domyślnego tematu wiadomości pocztowej

Jeśli chcesz jeszcze bardziej zautomatyzować proces wysyłania wiadomości pocztowej, możesz podać bezpośrednio w kodzie odnośnika domyślny temat tworzonej wiadomości. W tym celu umieść kursor wewnątrz wartości atrybutu href znacznika <a>, zaraz za wprowadzonym docelowym adresem pocztowym, i wprowadź tekst ?Subject= oraz domyślną treść tematu wiadomości pocztowej (rysunek 4.3):

Zgłaszanie uwag: <a href="mailto: Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. ?Subject=Uwagi dotyczace dzialania serwisu WWW">Jan&nbsp;Kowalski</a>

Rysunek 4.3. W odnośniku pocztowym może zostać zapisany również temat wiadomości tworzonej po jego kliknięciu

Staraj się zapisywać domyślne tematy wiadomości pocztowych wyłącznie z wykorzystaniem znaków alfabetu łacińskiego, bez stosowania polskich znaków diakrytycznych. Pozwoli Ci to uniknąć problemów związanych z różnorodnością standardów kodowania znaków.

Nawigacja w obrębie jednej strony WWW

Tworzenie etykiety

Nie zawsze informacja, do której należy zapewnić szybki dostęp za pomocą odnośnika, znajduje się na innej stronie WWW. Często przydaje się możliwość zdefiniowania odnośnika przenoszącego czytelnika do innego miejsca tej samej strony WWW. Najszerzej stosowane jest to w celu umożliwienia powrotu do początku strony (zawierającego na przykład spis treści) z dowolnego miejsca tekstu.

Pierwszym krokiem przy tworzeniu takiego odnośnika jest zdefiniowanie etykiety (zwanej też czasem zakotwiczeniem — od jej angielskiej nazwy anchor), czyli punktu docelowego dla odnośników. Aby stworzyć etykietę, umieść kursor w miejscu kodu, które ma zostać oznaczone taką etykietą, wprowadź kod elementu <a>, zamiast atrybutu href wpisując atrybut id zawierający unikatowy identyfikator (nazwę) etykiety. Wewnątrz elementu wpisz fragment tekstu, do którego będziesz się odnosił:

<a id="nazwa-etykiety">.......</a>

Nazwa etykiety powinna składać się wyłącznie z liter alfabetu łacińskiego i nie może zawierać znaków spacji. Zastosowanie innych znaków może spowodować, że odnośniki prowadzące do etykiety nie będą funkcjonować. Pamiętaj też, że etykiety są całkowicie niewidoczne podczas przeglądania strony za pomocą przeglądarki internetowej — dopóki zatem nie stworzysz odnośnika prowadzącego do etykiety — czego nauczysz się już za chwilę — jej istnienie nie wpłynie na stronę WWW ani funkcjonalnie, ani wizualnie.

Tworzenie odnośnika prowadzącego do etykiety

Wykorzystanie stworzonej etykiety wymaga utworzenia odnośnika do niej prowadzącego (rysunek 4.4). Odnośnik taki prawie niczym nie różni się od zwykłego — jedynie zamiast nazwy serwera, katalogu czy pliku w jego atrybucie href zapisana musi być nazwa etykiety poprzedzona znakiem #:

<a href="#poczatek">Początek&nbsp;strony</a>

Przed kliknięciem odnośnika:

Po kliknięciu odnośnika:

Rysunek 4.4. Odnośniki prowadzące do zakotwiczeń mogą zostać wykorzystane w celu usprawnienia nawigacji w ramach jednej strony WWW

Pamiętaj, że odnośniki prowadzące do etykiet będą działać tylko w przypadku, gdy etykieta, do której prowadzi odnośnik, umieszczona jest w miejscu strony niewidocznym w danym momencie w oknie przeglądarki. Nie zdziw się więc, jeśli po stworzeniu bardzo krótkiej strony testowej zawierającej etykietę i prowadzący do niej odnośnik skorzystanie z odnośnika nie da żadnego efektu — mechanizm ten został przystosowany do nawigowania po wyjątkowo obszernych stronach WWW.

Tworzenie odnośnika prowadzącego do etykiety zadeklarowanej na innej stronie WWW

Etykiety i prowadzące do nich odnośniki najłatwiej jest wykorzystać do uproszczenia nawigacji w ramach jednej strony WWW. Jednak odnośnik może również prowadzić do etykiety znajdującej się na zupełnie innej stronie! Wykorzystując tę możliwość języka XHTML, umożliwisz czytelnikowi Twojego serwisu WWW przechodzenie do określonego fragmentu dowolnej strony za pomocą jednego tylko kliknięcia odnośnika.

Aby utworzyć taki odnośnik, musisz połączyć obie znane Ci techniki. Wewnątrz atrybutu href musi pojawić się zarówno adres strony WWW, do której prowadzi odnośnik, jak i unikatowy identyfikator (nazwa) etykiety. Do ich rozdzielenia posłuży oczywiście znak # (rysunek 4.5).

<p><a href="05b.html#druga">Druga część tekstu</a></p>

Rysunek 4.5. Odnośnik może łączyć w sobie informację o adresie docelowej strony WWW oraz nazwie docelowego zakotwiczenia, przenosząc czytelnika od razu we właściwe miejsce strony

Oczywiście nie masz wpływu na etykiety utworzone w ramach obcych stron WWW i choć możesz dowiedzieć się o ich istnieniu (podglądając kod źródłowy strony w przeglądarce) lub nawet poprosić autora strony o dodanie etykiety w odpowiadającym Ci miejscu, w razie braku współpracy nic nie zdziałasz. Możesz natomiast do woli dodawać etykiety na swoich stronach WWW i prowadzić czytelnika z jednej strony do drugiej, przenosząc go od razu we właściwe miejsce i oszczędzając mu żmudnego przeszukiwania tekstu.

Wskazówka
Dobrym pomysłem jest opracowanie jednolitego systemu oznaczania rozdziałów i podrozdziałów wszystkich Twoich stron WWW i wstawianie etykiet wszędzie tam, gdzie pojawia się nowa partia tekstu, do której możesz chcieć odwoływać się w przyszłości. W ten sposób nie będzie potrzeby modyfikowania treści już istniejących stron WWW w przyszłości. Ponadto ułatwi to znacząco autorom innych stron WWW odwoływanie się do co ciekawszych fragmentów Twojego serwisu.

Podsumowanie

Prawidłowo skonstruowany system odnośników może znacznie podnieść jakość Twojego serwisu internetowego. Jeśli dłuższe strony WWW wyposażysz w prosty spis treści utworzony z odnośników prowadzących do fragmentów tekstu, a na końcu każdego fragmentu umieścisz dyskretny odnośnik umożliwiający powrót do początku strony oraz do głównej strony serwisu, nawigacja po stronie będzie znacznie przyjemniejsza i efektywniejsza.

Postaraj się przećwiczyć najważniejsze zagadnienia dotyczące odnośników:

  • stwórz długą stronę WWW (możesz ją wypełnić bezsensownym zbiorem znaków), podziel ją na fragmenty opatrzone tytułami, a następnie — wykorzystując etykiety i odnośniki — stwórz na początku strony menu prowadzące do poszczególnych części tekstu,

  • przygotuj stronę zawierającą odnośniki prowadzące do najczęściej przez Ciebie odwiedzanych serwisów internetowych; jeśli dobrze ją przygotujesz, możesz nawet pokusić się o wykorzystanie jej jako Twojej strony domowej i rozpoczynanie surfowania po Sieci właśnie od niej.

 

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15281239