HTML   Lekcja 3.1  - Linki (skróty)

Linki - po polsku skróty lub odsyłacze to podstawowe narzędzie nawigacji na stronie WWW. Zadaniem linku jest poinformowanie przeglądarki o potrzebie pobrania innej strony WWW, jakiegoś pliku, elementu, przewinięcia strony do zaznaczonego miejsca, uruchomienia programu poczty elektronicznej lub potrzebie wykonania jakiegoś zadania. Historycznie linki służyły do załadowania strony zawierającej referencje do omawianego tematu jednakże zakres możliwości ich działania w chwili obecnej jest dużo większy. Na ogół link prowadzi do jakiegoś adresu, lub odwołuje się do JavyScript.

Linki wprowadzamy za pomocą znacznika <A>. Atrybutem linku, który podaje adres ściąganego elementu jest href. Adres powinien zawierać ścieżkę dostępu do pliku podaną w formie względnej np. <A href="../katalog/plik.xxx">. Znacznik linku jest znacznikiem blokowym, a zatem za znacznikiem otwierającym, zawierającego atrybuty znajduje się na ogół text lub/i grafika, na których klika się aby uruchomić link, a następnie znacznik kończący </A>.

Może to wyglądać tak:
<A href="produkty/komputery.htm" TARGET="_self">Skrót do Działu komputerów<img src="../../../grafika/komputer.gif" border=0 hspace=5 vspace=5 alt="zapraszamy do działu komputerów"></A>.
A na stronie tak:

  Skrót do Działu komputerówzapraszamy do działu komputerów
Polecamy szeroki wybór
komputerów stacjonarnych.
W naszym dziale znajdziecie
komputery juz od 800 zł...


Wewnątrz znacznika linku znajdujemy jeszcze jeden atrybut, TARGET. Służy on do przekierowania ściąganej strony do jednej z dostępnych ramek. Wartością domyślną atrybutu Target jest _self, obowiązuje ona w przypadku pominięcia atrybutu.
Wyraz _self oznacza, że nowa strona zostanie umieszczona na miejsce strony na której znajduje się link wywołujący.

W przypadku gdy chcemy skierować stronę do (okna) ramki głównej użyjemy wartości _top, a do ramki rodzica _parent.
Jeśli strona ma się pojawić w całkowicie nowym niezależnym oknie użyjemy wartości _blank. Wpozostałych przypadkach wartością atrybutu target będzie nazwa ramki docelowej.

Zauważmy, że wartości atrybutu target zaczynają się od kreski dolnej co ma istotne znaczenie dla prawidłowego działania linku.
W przypadku użycia nazwy ramki, wcześniej zadeklarowanej w znaczniku frame odpowiedniego dokumentu
np.<frame name="prawa"> kreska nie wstawiamy: target="prawa".

Jeśli przeglądarka potrafi otworzyć ściągnięty plik, wówczas robi to, wyświetlająć lub odtwarzając zawartość, jeśli nie potrafi, system zapyta użytkownika co ma zrobić ze ściągniętym plikiem. Użytkownik ma do wyboru otworzenie pliku za pomocą dostępnej w komputerze aplikacji, zapisanie go na dysku lub odrzucenie.

Załóżmy typowy przypadek kiedy link (skrót) prowadzi do innej strony html. Przedstawione zasady obowiązują także w przypadku innych otwieralnych plików.

Link posiada 3 stany mogące różnić się wyglądem. Ustawia się je w znaczniku body atrybutami  LINKALINK i  VLINK
Ustalają one kolor tekstu odpowiednio do sytuacji stanu oczekiwania, momentu kliknięcia i stanu po wykorzystaniu linku.
Przykład <body link="brown" alink="red" vlink="gray"> Zachowanie się linku może być także ustawione za pomocą arkuszy stylów CSS.

Jak już wspomnieliśmy adresy dotyczące stron WWW znajdujących się w tej samej domenie, a będące wartościami atrybutu href są podawane w formie względnej to znaczy dostęp do plików jest podawany względem pliku w którym znajduje się link. Osiąga się to poprzez stosowanie znaków ../ przy wyjściu z katalogu do katalogu nadrzędnego i nazwy_katalogu w przypadku wejścia do danego katalogu. Na końcu podawana jest nazwa pliku znajdującego się w katalogu docelowym.

Adresy plików znajdujące się w innych domenach muszą być podawane jako bezwzględne. np.
<A href="http://www.firma.pl/folder2/plik7.html#R4">do klikania</A>

Adresy wewnętrzne witryny w postaci względnej gwarantują działanie witryny w środowisku dowolnego serwera, komputera, jak również na płycie CD czy dyskietce. Oczywiście w warunkach internetu przed wysłaniem prośby o dany plik do serwera, przeglądarka uzytkownika (internauty) konweruje używany w danym momencie adres względny na adres bezwzględny aby móc go skutecznie przesłac przez sieć.
Konwewrsja ta dokonuje się w oparciu o bezwzględny adres danego dokumentu oraz adres względny jaki się w nim znajduje.
Dotyczy to adresów nie tylko adresów umieszczanych w linkach, ale także wszystkich innych adresów wewnętrznych jakie znajdują się w znacznikach np znaczniku wstawienia grafiki.

link uruchamiający program do wysyłania poczty e-mail wygląda następująco:
<A href="mailto:jacek@firma.pl">jacek@firma.pl </A> co na stronie będzie wyglądć następująco: jacek@firma.pl
Kolor, czcionka i zachowanie linku są ustawiane przeważnie w arkuszu styli CSS. i mogą wyrózniać link spośród otaczającego go tekstu, przykładowo link powrotny ze strony działu komputerów ma wygląd zgodny z wartościami domyślnymi.

 
Linki do wnętrza strony
Link można wykorzystać także do przewinięcia aktualnej lub ściąganej strony do miejsca zaznaczonego znacznikiem tzw. etykietą. Wiadomo, że dłuższe strony możemy przewijać korzystając z paska przewijania, możemy to jednak robić automatycznie wprowadzając odpowiedni link, którego atrybut href będzie zawierał odnośnik do etykiety. Etykieta to również znacznik <A>, ale posiadający atrybut name, przykładowo <A name="top"> Wartością name może być dowolne wyrażenie zawierające litery bez ogonków, cyfry oraz znaki: myślnik - i znak podkreślenia _.

Jeśli link kieruje nas do wnętrza tej samej strony, to adres w atrybucie href znacznika <A> składa sie tylko z wartości name etykiety poprzedzonej krzyżykiem (przykład 1). Jeśli natomiast przewijana ma być strona właśnie ściągana, z serwera wartość etykiety poprzedzona krzyżykiem powinna być dodana do adresu tej strony w odpowiednim znaczniku linku (przykład 2). A oto przykłady:

Przykład 1.
<A href="#komp">powrót do skrótu do działu komputerów</A> na stronie może wyglądać tak: powrót do skrótu do działu komputerów

Aby przewinięcie strony do założonego miejsca było możliwe, w kodzie źródłowym przed znacznikiem zawierającym link do strony działu komputerów umieściliśmy następującą etykietę: <A name="komp"> &nbsp; </A> Znakiem, którego szuka przeglądarka jest niewidoczna spacja niełamliwa, na której zamknięte są znaczniki etykiety. Znak ten po przewinięciu strony znajdzie sięł się w pierwszym wierszu aktualnej ramki (okna). Efekt jest widoczny po kliknięciu.

Przykład 2.
<A href="produkty/komputery.htm#zaznaczone">Skrót do Działu komputerów do zaznaczonego miejsca.</A> Link prowadzi do zaznaczonego etykietą miejsca strony o komputerach.
Oto link na stronie: Skrót do Działu komputerów do zaznaczonego miejsca.
Na stronie działu komputerów umieszczono w kodzie źródłowym etykietę:
<A name="zaznaczone"> &nbsp; </A> Po sciagnięciu strony przeglądarka postąpi jak w poprzednim przykładzie.

Na stronie działu komputerów umieśiliśmy także skróty do początku strony oraz do wybranego miejsca. strony z naszą lekcją.
Skrótów tych nie będziemy omawiać. Proponujemy natomiast abyście sami doszli jak zostało to wykonane podglądając kod źródłowy z menu widok-źródło przeglądarki.

Java Script jest pełnoprawnym adresem do jakiego może odwoływać się link. Kod źródłowy ma postać:
<A href="javascript: instrukcje">Zdanie (obiekt) do klikania</A> Szczegóły tego zagadnienia omówimy na lekcjach JavaScript.

[dalej]