Odsyłacze#
Konstrukcja#
<a href="miejsce docelowe">Opis odsyłacza</a>
Polecenie pozwala utworzyć odnośnik prowadzący do pewnego miejsca w Internecie (strona, plik).
Wewnątrz elementu a
(anchor) podajemy tekst, który będzie widoczny dla czytelnika. Treść powinna jasno wskazywać na zawartość linku (odpadają zwroty typu "tu", "kliknij tu", "zobacz" itp).
Atrybut href #
(hypertext reference) definiuje adres strony lub miejsca, do których następuje odwołanie. Szczegółowe konstrukcje omówione zostaną w kolejnych rozdziałach.
Nie można zagnieżdżać odsyłaczy (umieszczać <a>
w <a>
) ani otaczać nim elementów blokowych, można jedynie elementy liniowe.
W przeglądarkach internetowych odsyłacze domyślnie uzyskują odpowiednie formatowanie w zależności od stanu linka (nieodwiedzone, odwiedzone, aktywne), niezależnie od wyglądu elementów, w których się znajdują. Również rodzaj wskaźnika ulega zmianie (np. ze strzałki w rączkę). Wygląd poszczególnych własności możemy dowolnie modyfikować.
Łącze może mieć cel, który określa, w jaki sposób przeglądarka ma przetworzyć zasób docelowy – a konkretniej w którym oknie lub ramce wyświetlić jego treść. Cel łącza definiuje się za pomocą atrybutu target
, który może zawierać nazwę okna lub ramki albo też jedną z następujących zarezerwowanych wartości:
_blank
- otwarcie w nowym oknie_parent
- otwarcie w oknie nadrzędnym_self
- otwarcie w bieżącym oknie (domyślnie)_top
- otwarcie w pełnym oknie na wierzchu stosu
Dokładny opis powyższych wartości dla atrybutu target
umieściłem w odpowiednim dziale dla Ramek.
Obecnie atrybut TARGET nie wchodzi w skład Strict DTD. Można go bez przeszkód używać wykorzystując Transitional DTD.
Odsyłacze łączą ze sobą dwa zasoby umieszczone w Internecie. Każde hiperłącze ma dwa końce, zwane kotwicami oraz kierunek (destination). Kotwicę początkową umieszczamy za pomocą znacznika <a>
w treści danego dokumentu. Kotwicą końcową jest zasób docelowy - najczęściej strona WWW, ale mogą to być pliki dowolnego typu. Kotwicę końcową definiujemy poprzez podanie URL w atrybucie href
kotwicy początkowej. Kierunek określa to, w którą stronę może zachodzić aktywacja łącza, powodująca przetworzenie kotwicy końcowej.
Aktywacja danego łącza następuje w większości wypadków przez jego kliknięcie - jednak łącze można także aktywować, używając klawiatury, a w przeglądarkach głosowych również poleceniem głosowym.
Przetworzenie to najczęściej wyświetlenie danej strony w oknie przeglądarki, ale w przeglądarkach głosowych strona może być również po prostu przeczytana. W celu przetworzenia zasobu może być również wymagane uruchomienie innego niż przeglądarka programu, jeśli browser nie potrafi obsłużyć danego typu treści.
Przełamanie wiersza#
Sposób wyświetlania zawartości odsyłacza nie zależy od sposobu przełamywania wierszy w edytorach. Może się zdarzyć, że pojedynczy odsyłacz zostanie przedzielony na dwie kolejne linijki. Wprowadza to dezorientację i wygląda nieestetycznie. Aby tego uniknąć, należy wewnątrz znaczników odnośnika (<a></a>
) zastąpić wszystkie spacje odpowiednią encją
.
Prosty przykład blokujący przełamanie tekstu:
<p>Szperając po internecie natrafiłem na bardzo ciekawą stronę poświęconą hodowli mrówek.
Mimo wielu atrakcji, hobby wciąż pozostaje w strefie niszowej. Zapraszam
wszystkich do wnikliwej analizy
<a href="http://www.antmania.pl">Portalu Myrmekologicznego</a>.</p>
Efekt:
Szperając po internecie natrafiłem na bardzo ciekawą stronę poświęconą hodowli mrówek. Mimo wielu atrakcji, hobby wciąż pozostaje w strefie niszowej. Zapraszam wszystkich do wnikliwej analizy Portalu Myrmekologicznego.
Uwaga nie dotyczy tekstu, w którym znajdują się znaki: "%"
lub "-"
(myślnik).
Dymek narzędziowy#
Każdy odsyłacz możemy uzupełnić atrybutem title="..."
. Powoduje on, że po wskazaniu odnośnika myszką, wyświetli się dodatkowy tekst pomocniczy w "dymku" (tooltip). Ewentualnie treść tytuł może pojawi się na pasku stanu przeglądarki.
Krótki przykład:
<a href="http://wiki.whatwg.org/wiki/HTML_vs._XHTML#Differences_Between_HTML_and_XHTML"
title="Ciekawy artykuł opisujący różnice między XHTML a HTML">HTML vs. XHTML</a>
Efekt:
HTML vs. XHTMLMądre stosowanie tytułów linków może zwiększyć użyteczność stron internetowych posiadających hiperłącza. Nie warto więc ignorować tej dodatkowej możliwości ułatwienia życia osobom, które odwiedzają nasze strony.
Wymuszenie otwierania w nowym oknie#
Atrybut target
usunięty został nie bez powodu. Nowe okna są problematyczne z punktu widzenia użyteczności, dostępności i kompatybilności.
Klikając odsyłacz okraszony omawianym atrybutem dostajemy okno z wyzerowaną historią stron (nie działa przycisk "Wstecz"
). Dla osób z pewnymi upośledzeniami sytuacja wprowadza dezorientację.
W przeglądarkach nie obsługujących kart (np. IE6), każde kolejne okno niepotrzebnie zabałagania pasek zadań, dodatkowo może wymusić grupowanie podobnych elementów w systemie Windows.
Uwierz mi, czytelnik nie jest głupi, doskonale wie jak chce otworzyć odnośnik (w nowym oknie, nowej kracie lub tym samym oknie/karcie). Daj mu wolny wybór a z pewnością z niego skorzysta.
Unikaj poniższej metody:
<a href="http://www.antmania.pl" target="_blank">Forum Myrmekologiczne</a>