Autorem strony jest Aktualizacja Powrót do pomocy programu
Paweł Wimmer
[e-poczta] pawel.wimmer@lupus.waw.pl
[klepsydra] 15-VI-1997 [Pajaczek 2.0] Pajaczek 2.0
[zielona kropka][zielona kropka][zielona kropka]

Odsyłacze

Uwaga: Jeśli przykład nie odzwierciedla oznakowania, oznacza to, że przeglądarka nie akceptuje danego znacznika


[hand]Istota odsyłaczy

Odsyłacze (hiperłącza, łącza hipertekstowe, odnośniki) są chyba najbardziej charakterystycznym elementem dokumentów w światowej sieci World Wide Web. Bez odsyłaczy nie istniałyby powiązania między dokumentami na tym samym serwerze, w tym samym mieście, kraju czy kontynencie.Dzięki odsyłaczom można wiązać ze sobą poszczególne strony, a doskonałym przykładem ich roli jest choćby niniejszy kurs, który został opracowany na wielu, powiązanych ze sobą stronach. Gdyby nie było odsyłaczy, cała treść kursu musiałaby zostać przedstawiona na jednej stronie, która byłaby dość uciążliwa w czytaniu.

Odsyłacz jest niczym innym, jak wskazaniem jakiegoś innego miejsca. Kliknięcie na takim wskazaniu przenosi użytkownika do docelowego miejsca, przy czym może to być z powodzeniem miejsce na tej samej stronie, inna strona w ramach tego samego, złożonego dokumentu, a nawet strona na drugim końcu świata. Użytkownik nie musi nawet w gruncie rzeczy wiedzieć, że powiązane ze sobą tematycznie informacje znajdują się w miejscach oddalonych od siebie nawet o tysiące kilometrów. Najważniejsze jest ich tematyczne powiązanie, a nie lokalizacja. Gdy na przykład czytamy stronę zawierającą opis jakiejś choroby, możemy sięgnąć do całkiem innego miejsca w poszukiwaniu jej etiologii, a do jeszcze innego, gdy będziemy chcieli przeczytać o jej ogniskach.

Hipertekstowe odsyłacze w World Wide Web można porównać ze spisem treści czy odsyłaczami w książce. Informacja, że na stronie 154 znajduje się rozdział pod jakimś tytułem, a na stronie 87 tabela, na którą powołujemy się w jakimś miejscu książki, jest de facto odsyłaczem, choć czytelnik musi wykonać "skok" samodzielnie, wertując po prostu kartki. Elektroniczne odsyłacze są znacznie wygodniejsze w obsłudze, a dość znanym przykładem zastosowania jest edytor WordPerfect czy programy do tworzenia elektronicznych publikacji - Adobe Acrobat czy Novell Envoy. Odsyłacz można też potraktować jako swoistą dygresję. Warto jednak zwrócić uwagę, że zbyt duża liczba odsyłaczy, zwłaszcza w tekście o charakterze na poły "beletrystycznym", może rozpraszać czytelnika, chyba że strona zawiera po prostu z założenia odsyłacze do jakichś źródeł. Warto je jednak stosować z umiarem.


[hand]Etykieta

Można wyróżnić dwa rodzaje konstrukcji odsyłaczowych: do etykiet i do stron.

Etykieta (zwana też kotwicą - ang. anchor) jest znakiem, swoistą elektroniczną zakładką, podobną do zakładek w książce, która zaznacza jakieś miejsce w tekście. Gdy utworzymy etykietę, będziemy mogli się odwoływać nie tylko do zawierającej ją strony, ale i do konkretnego miejsca na stronie. W ten sposób czytelnik będzie mógł natychmiast skoczyć do wskazanego punktu. Jej konstrukcja jest następująca:

<A NAME="nazwa_etykiety"> </A>

Zauważmy, że w taki właśnie sposób zostały utworzone etykiety na stronach kursu. Umożliwiło to zbudowanie czegoś w rodzaju spisów treści, które pozwalają szybko skoczyć do opisu wybranego zagadnienia.

Możemy utworzyć w dokumencie dowolną liczbę etykiet, które będą służyć jako punkty docelowe dla różnych odsyłaczy. Jest to szczególnie wygodne w przypadku dużych objętościowo stron, wymagających podzielenia na pewne logiczne fragmenty, aby były łatwiejsze w czytaniu. Spis zagadnień, z wykorzystaniem odsyłaczy do etykiet-zakładek jest bardzo często stosowany w Internecie.

Dobrym obyczajem jest stosowanie cudzysłowu obejmującego etykiety, podobnie jak i adresów w odsyłaczach. Gdy etykieta zawiera kilka wyrazów, ich użycie jest wręcz konieczne, aby definicja była poprawna. Należy też zwracać uwagę na wielkość liter, gdyż są one na ogół rozróżniane. Można zalecać używanie małych liter zarówno w etykietach, jak i odsyłaczach do nich.


[hand]Odsyłacze

[zielona kropka] Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Jej konstrukcję można obrazowo przedstawić w postaci:

<A HREF="miejsce_docelowe">Tekst, na którym należy kliknąć</A>

Gdy utworzymy odsyłacz, ciąg znaków "tekst, na którym należy kliknąć" będzie zaznaczony innym kolorem, zazwyczaj niebieskim, i podkreślony. Na przykład odsyłacz do elektronicznego magazynu online, poświęconego WordPerfectowi, może mieć postać:

Tutaj znajdziesz WordPerfect Magazine

Gdy przesuniesz kursor myszki nad odsyłacz, kursor przyjmie postać rączki, natomiast w wierszu statusu przeglądarki powinna się pojawić informacja http://www.wpmag.com (Netscape Navigator) czy Skrót do http://www.wpmag.com/ (polska wersja Internet Explorera). Kliknięcie spowoduje natychmiastowy skok do wskazanego miejsca ("natychmiastowość" jest pojęciem względnym - niekiedy trwa to koszmarnie długo!).

Do jakich miejsc możemy się odwoływać?

[zielona kropka] Oczywiście najczęściej stosujemy odsyłacze do stron WWW, których charakterystycznym elementem jest ciąg http://. Konstrukcja może więc mieć postać:

<A HREF="http://host.domena>Tekst</A>.

W pokazanym wyżej przykładzie WordPerfect Magazine posłużyliśmy się adresem http://www.wpmag.com, gdzie host=www, a domena=wpmag.com. Konieczne jest oczywiście użycie w adresie na początku http://.

Zauważmy od razu, że taki adres powoduje wywołanie głównej (domyślnej) strony WWW. Nazwy strony nie podawaliśmy. Dlatego zaleca się, aby strona główna serwisu była plikiem o nazwie index.htm lub index.html.

Gdy zamieszczamy w naszym dokumencie jakiś odsyłacz do strony znajdującej się gdzieś w świecie, należy po prostu przepisać ten adres w trakcie sesji w Internecie. Często jednak będziemy się odwoływali do stron samodzielnie sporządzonych i wtedy wystarczy po prostu podawać ich nazwy, bez konieczności definiowania adresu http. Najwygodniej jest wówczas oczywiście ulokować wszystkie strony i niezbędne pliki graficzne, którymi upstrzyliśmy nasz dokument, w jednym katalogu. Znacznie uprości to życie w trakcie konstruowania dokumentu. Jeśli jednak prowadzimy większy serwis, lepiej jest utworzyć w naszym komputerze i na serwerze odrębne katalogi tematyczne, a dla grafiki wyznaczyć nawet osobny folder, dzięki czemu będziemy się mogli do nich wygodnie odwoływać, jeśli zajdzie taka potrzeba.

Praktyczna uwaga: gdy chcemy wstawić do dokumentu jakiś adres, który znaleźliśmy w Internecie, nie jest konieczne ręczne przepisywanie adresu. Można postąpić w następujący sposób:

[zielona kropka] W dokumencie możemy zamieszczać odsyłacze do różnych typów plików. Najczęściej jest to dokument HTML, choć równie dobrze może to być plik tekstowy (TXT), obrazek GIF lub JPG, plik dźwiękowy WAV, MID, AU czu AIFF, dokument Worda, plik Acrobata lub Envoya. Przeglądarki są uwrażliwione na pewne typy plików, zawierając wbudowane wewnętrzne przeglądarki (odtwarzacze) danych plików. Na przykład w Navigatorze i Internet Explorerze zostanie bez kłopotu zaprezentowany obrazek GIF czy plik tekstowy. Ponieważ jednak coraz częściej w dokumentach internetowych są umieszczane odsyłacze do innych plików, konieczne się stało zaangażowanie do ich obsługi albo zewnętrznych aplikacji, albo specjalnych wtyczek (plug-ins), które pozwalają obejrzeć dany dokument bezpośrednio z poziomu przeglądarki, z użyciem pojawiającego się dodatkowego menu (na ekranie lub pod prawym klawiszem myszki). Doczekaliśmy się już wielu "wtyczek" - VR, VRML, EVY, PDF, CMX itd. Są one bezpłatnie dostępne w Internecie, a ich przegląd można znaleźć m.in. na internetowej stronie Netscape Communications albo Windows95.com Web Browser Plug-ins

Warto też zaglądać na strony:

32-bit Shareware Collection at Windows95.com
Randy's Windows 95 Resource Center - New Uploads
The Ultimate Collection of Winsock Software
The SlaughterHouse

Jeśli przeglądarka nie zawiera wbudowanej obsługi pliku danego typu, ani nie istnieje stosowny plug-in, możemy się także posłużyć aplikacją w naszym komputerze. Na przykład plik Worda można obejrzeć za pomocą Worda lub Word Viewera (ostatnio pojawił się już jednak odpowiedni plug-in). Przeglądarkę można nauczyć reagowania na określone typy plików - Netscape Navigator pozwala to zrobić w okienku dialogowym Preferences (Options / General Preferences) na stronie Helpers.

Warto wiedzieć, że rozróżniamy odsyłacze absolutne i względne (relatywne). Pierwsze zawierają pełny adres internetowy strony, natomiast drugie jedynie fragment ścieżki dostępu.

Adresem absolutnym jest np. strona naszego wydawnictwa:

http://www.polbox.com.pl./lupus/index.html

Adresem relatywnym jest adres numeru 12 PCkuriera, zamieszczony na stronie głównej PCkuriera:

pckurier/pcq12.html

Adres relatywny korzysta z pełnego adresu strony, na której się znajduje. Skoro strona główna PCkuriera ma adres:

http://www.polbox.com.pl./lupus/pcq.html

to automatycznie odsyłacz relatywny numeru 12 jest interpretowany jako:

http://www.polbox.com.pl./lupus/pckurier/pcq12.html

Strona 12 numeru PCkuriera jest położona o jeden szczebel "niżej" w hierarchii katalogów.

Stosowanie odsyłaczy relatywnych jest charakterystyczne dla danego serwisu. Autor nie musi się troszczyć o podawanie pełnego adresu - wystarczy, jeśli poda tylko niezbędny fragment, gdyż resztę przeglądarka doda sama. Odsyłacze absolutne są (absolutnie :-)) konieczne, gdy wskazujemy miejsca na innych serwerach.

Przypomnijmy sobie w tym miejscu uwagi dotyczące polecenia <BASE> w nagłówku strony <HEAD>. Konsekwentne wpisywanie adresu strony bazowej w nagłówku może nas uchronić od konieczności przepisywania wszystkich adresów relatywnych, gdy z jakichś powodów przenosimy stronę w inne miejsce i grozi nam utrata aktualności odsyłaczy względnych.

Kilka prostych przykładów:

Odsyłacz do innej strony HTML (w tym samym katalogu):

<A HREF="nazwa_strony.html">Edytor Pajączek</A>

Edytor Pajączek

Odsyłacz do innej strony w katalogu podrzędnym

<A HREF="katalog_podrzędny/nazwa_strony.html">Inna strona</A>

Odsyłacz do strony w innym katalogu, równorzędnym w hierarchii:

<A HREF="../katalog_równorzędny/nazwa_strony.html">Jeszcze inna strona</A>

Dwie kropki w adresie nakazują przeglądarce "zajrzeć wyżej" w hierarchii katalogów, "zejść" do nowego katalogu i przywołać żądaną stronę.

Odsyłacz do pliku tekstowego TXT
<A HREF="plik_tekstowy.txt">Plik tekstowy TXT</A>
Plik tekstowy TXT

Odsyłacz do pliku graficznego GIF
<A HREF="plik_graficzny.gif">Plik graficzny GIF</A>
Plik graficzny GIF

Możliwe jest tworzenie odsyłaczy do plików dźwiękowych, aczkolwiek nie wchodzą one w zakres HTML 3.2. Zazwyczaj stosuje się dwa typy odsyłaczy - styl Netscape i styl Microsoftu. Przykłady:

Plik dźwiękowy WAV (styl Netscape) - <embed src="../wav/complete.wav" border=0 width=x height=y>
Plik dźwiękowy WAV (styl Microsoft) <bgsound src="../wav/complete.wav" loop=infinite>
Plik dźwiękowy MIDI (styl Netscape) - <embed src="../midi/airwolf.mid" border=0>
Plik dźwiękowy MIDI (styl Microsoft) - <bgsound src="../midi/antartic.mid" loop=1>
Plik wideo AVI (styl Netscape) - <embed src="../DRAGDROP.AVI" border=0>
Plik wideo AVI (styl Microsoft) - <img border=0 alt=" " dynsrc="../DRAGDROP.AVI" loop=infinite start=FILEOPEN>

Zależnie od zainstalowanego oprogramowania na ekranie zostanie wyświetlony odpowiedni element. Jeśli np. dysponujemy wtyczką Crescendo, zostanie wyświetlone jej menu, w którym możemy sterować zachowaniem pliku dźwiękowego. Jeśli nie dysponujemy dodatkowym oprogramowaniem, przeglądarka zaproponuje skojarzenie danego typu pliku z aplikacją w systemie, np. odtwarzaczem dźwięku. Jeśli wstawimy plik dźwiękowy za pomocą polecenia BGSOUND, wczytanie strony spowoduje automatyczne odtworzenie dźwięku "w tle", tyle razy, ile zadeklarowaliśmy w poleceniu (loop=x, loop=infinite).

Powiedzieliśmy wyżej, jak tworzyć odsyłacze do innych dokumentów. Ale nieco wcześniej mówiliśmy także o etykietach, więc warto teraz powiedzieć, jak tworzyć odsyłacze do etykiet.

Konstrukcja jest bardzo prosta:

<A HREF="strona.htm#etykieta">Tekst</A>

Jeśli tworzymy odsyłacz do etykiety na tej samej stronie, wystarczy użyć samej nazwy etykiety, czyli:

<A HREF="#etykieta">Tekst, na którym należy kliknąć</A>

Uwaga: należy zwrócić uwagę na wielkość liter w etykiecie. Gdy etykieta rozpoczyna się z wielkiej litery, także odsyłacz powinien zawierać nazwę etykiety pisaną z wielkiej litery.

Poniższy przykład pozwoli skoczyć do punktu poświęconego istocie odsyłaczy, na początku tej strony. Użyto tu odwołania do etykiety #istota , umieszczonej wcześniej przy punkcie Istota odsyłaczy.

Przeczytaj uwagi o istocie odsyłaczy

[zielona kropka] Często stosowanym odsyłaczem jest konstrukcja pozwalająca czytelnikowi strony wysłać do jej autora (lub jakiejkolwiek innej osoby) pocztę elektroniczną. Jej konstrukcja wygląda następująco:

<A HREF=mailto:imie_nazwisko@adres>Tutaj kliknij</A>

Przykładowa zachęta do wysłania listu mogłaby wyglądać następująco:

<A HREF=mailto:pawel.wimmer@lupus.waw.pl>Jeśli chcesz mi nawrzucać, kliknij w tym miejscu</A>

co w praktyce przybrałoby postać:

Jeśli chcesz mi nawrzucać, kliknij w tym miejscu

albo, w bardziej stonowanej formie:

Wyślij list do autora strony

Oczywiście w miejscu, gdzie należy kliknąć, można też po prostu podać adres poczty, aby był widoczny bezpośrednio na ekranie przeglądarki.

Możemy jeszcze dodatkowo opatrzyć odsyłacz stosownym obrazkiem. W tym miejscu zastosujemy obrazek POCZTA.GIF, wstawiając definicję przed adresem.

[poczta] Wyślij list do autora strony

Zauważ, że gdy przesuniesz kursor nad odsyłacz, w wierszu statusu przeglądarki pojawi się kontrolna informacja
mailto:pawel.wimmer@lupus.waw.pl (Netscape Navigator) lub
Wysyła pocztę do: mailto:pawel.wimmer@lupus.waw.pl (Internet Explorer PL)

Gdybyśmy sobie zażyczyli, aby w momencie wysyłania poczty przez czytelnika strony w polu tematu listu pojawiła się jakaś domyślna treść, możemy zdefiniować odsyłacz na przykład tak:

<a href="mailto:pawel.wimmer@lupus.waw.pl?subject=Panie Wimmer, mam taką sprawę:">

Przy definiowaniu adresu poczty (a nawet szerzej, pełnego adresu) możesz się także posłużyć znacznikiem logicznym <ADDRESS></ADDRESS>, który automatycznie nada odpowiedni atrybut (zazwyczaj interpretowany przez przeglądarki jako kursywa), a całość umieścić w gustownej ramce (definicja tabeli)

Paweł Wimmer
Redaktor
Wydawnictwo Lupus
Warszawa, ul. Stępińska 22/30, 00-739 Warszawa
Tel: 41-00-31 w. 128 lub 154, 41-51-21
Fax: 41-03-74
E-mail: pawel.wimmer@lupus.waw.pl

[zielona kropka] Równie często stosowaną usługą jest FTP, który pozwala sięgnąć do serwera FTP w poszukiwaniu jakichś plików - można w ten sposób wskazać położenie jakiegoś shareware'owego programu. Nasze wydawnictwo posiada swój własny serwer, z którego można skopiować np. listingi zamieszczane w dziale Dla Praktyków w PCkurierze, publikacje elektroniczne czy oprogramowanie. Korzystamy tutaj z protokołu File Transfer Protocol - stąd nazwa FTP.

Odpowiednia konstrukcja wskazująca na FTP ma postać:

<A HREF=ftp://ftp.adres>Jakiś tekst</A>

Gdybyśmy chcieli sięgnąć do serwera Wydawnictwa Lupus, możemy podać odsyłacz:

<A HREF=ftp://ftp.polbox.com.pl/library/!lupus>Tutaj znajdziesz listingi Dla Praktyków</A>

Tutaj znajdziesz listingi Dla Praktyków

Na stronie poświęconej edytorom HTML został zamieszczony odsyłacz do naszego serwera, skąd można skopiować podręcznik poświęcony edytorowi Home Page Author. Ma on postać:

<A HREF=ftp://ftp.polbox.com.pl/library/!lupus/hpauthor.zip>Podręcznik Home Page Author</A>

Podręcznik Home Page Author - ok. 800 KB.

Zauważ, że na końcu adresu znalazł się ciąg HPAUTHOR.ZIP. Jest to nazwa pliku, który zawiera podręcznik. W ten sposób można od razu sięgnąć do konkretnego pliku, a nie tylko do katalogu z plikami. Przeglądarka WWW zapyta wówczas, co zrobić z plikiem. Wystarczy wybrać opcję Save to disk (Netscape Navigator), aby program przystąpił do ściągania pliku na dysk naszego komputera.

Dobrym (bardzo dobrym!) obyczajem jest podawanie przy odsyłaczu do pliku wielkości pobieranego materiału. Czytelnik strony nie powinien być zaskakiwany dużymi plikami, a przede wszystkim ma prawo wiedzieć, jak długo będzie trwać jego kopiowanie. Tę samą zasadę warto zresztą stosować, gdy podajemy odsyłacz do strony, której wczytanie trwa dość długo, gdyż zawiera dużo tekstu i/lub obrazków. Można tu przyjąć granicę 50 KB.

W tym miejscu warto wspomnieć, że jeśli użytkownik dysponuje pakietem do kompresji plików WinZip 6.3, który można zintegrować z przeglądarkami Netscape'a i Microsoftu, program przystąpi do kopiowania plików w formacie zip, do domyślnego folderu, bez pytania, co zrobić z plikiem. Tym bardziej należy podawać wielkość pliku.

[zielona kropka] Konstrukcje odsyłaczowe pozwalają wstawić odwołania do kilku innych usług, jak np. do:

pliku na dysku lokalnym <A HREF=file:///ścieżka/plik></A>,

gophera <A HREF=gopher://...></A>,

telnetu <A HREF=telnet://...></A>,

grup dyskusyjnych <A HREF=news://...></A>,

[zielona kropka] Na zakończenie warto jeszcze podać sposób definiowania odsyłaczy na obrazkach. Jest to o tyle przydatne, że możemy w ten sposób wykorzystać grafikę. Taki sposób definiowania odsyłaczy jest już powszechnie spotykany w World Wide Web, aczkolwiek warto także stosować równoległe odsyłacze tekstowe, gdyż nie wszyscy stosują przeglądarki graficzne i byliby w ten sposób pozbawieni możliwości wykonania skoku.

W tym miejscu pokażemy tzw. mapowanie po stronie klienta, a więc nowocześniejszy sposób, akceptowany przez różne wersje Navigatora i Internet Explorera.

Wyobraźmy sobie, że mamy obrazek, na który chcielibyśmy nałożyć mapę odsyłaczy (niech Czytelnik łaskawie przymknie oko na brak precyzji). Zaznaczone prostokąty mają ilustrować zakres map.

[Odsyłacz]

Na razie jest to grafika bez odsyłaczy.

Poniżej widać obrazek z mapą odsyłaczy. Gdy Czytelnik przesunie kursor myszki nad zaznaczone prostokąty, kursor przyjmie postać "rączki", sygnalizującej istnienie odsyłacza. W wierszu statusu przeglądarki pojawią się adresy stron. Są to adresy fikcyjne, więc kliknięcie nie spowoduje skoku do tak nazwanej strony.

[Odsyłacz]

A oto pełna treść polecenia:

<IMG SRC="odsylacz.gif " USEMAP="#mapa1">
<MAP NAME ="mapa1">
<AREA SHAPE=RECT COORDS=" 1, 1, 50, 50" HREF="1.html">
<AREA SHAPE=RECT COORDS=" 51, 1, 100, 50" HREF="2.html">
<AREA SHAPE=RECT COORDS=" 1, 51, 51, 100" HREF="3.html">
<AREA SHAPE=RECT COORDS=" 51, 51, 100, 100" HREF="4.html">
</MAP>

Pierwszy wiersz polecenia przywołuje obrazek. USEMAP informuje przeglądarkę, że obrazek "odsylacz.gif" jest mapowany, i że mapa nosi nazwę "mapa1".
Drugi wiersz zapoczątkowuje definicję mapy.
Wiersze 3-6 wprowadzają cztery kolejne fragmenty mapy odsyłaczy, odpowiadające prostokątom na rysunku. SHAPE=RECT mówi, że chodzi tutaj o prostokąty (RECT=rectangle). COORDS informuje o współrzędnych, przy czym pierwsze dwie liczby w wierszu podają lewy górny róg prostokąta, a następne dwa - prawy dolny. Warto unikać nakładania na siebie obszarów map, choć przeglądarka akceptuje nakładanie. HREF= stanowi przywołanie jakiegoś dokumentu HTML.
Ostatni wiersz stanowi zakończenie definicji mapy.

Oprócz prostokątów (kwadratów) możemy tworzyć mapy z użyciem okręgów i obszarów nieregularnych.

W przypadku okręgu stosujemy polecenie:

<AREA SHAPE=CIRCLE COORDS=" 25, 25, 19" HREF="dokument.html">

Proszę zwrócić uwagę na SHAPE=CIRCLE oraz przykładowe liczby 25,25,19. Pierwsze dwie liczby informują o położeniu środka okręgu, ostatnia - o długości promienia.

Gdybyśmy chcieli użyć obszaru nieregularnego, musielibyśmy podać przykładowe polecenie, zawierające przynajmniej trzy pary współrzędnych, definiujących "rogi" obszaru:

<AREA SHAPE=POLYGON COORDS=" 23, 33, 82, 16, 82, 80" HREF="dokument.html">


Źródła:

  1. Włodzimierz Macewicz "Język składu dokumentu hipertekstowego", Wydawnictwo Mikom, Warszawa 1996
  2. Stephen Le Hunte "HTML Reference Library", plik Helpu dla Windows 3.1 i 95
  3. Ian Graham "HTML Sourcebook. A Complete Guide to HTML 3.0", New York 1996
  4. Hot Dog Professional, plik Helpu
  5. Rafał Wiosna "Każdy chce mieć własną stronę", cykl publikacji w numerach 26/95, 3/96 dwutygodnika PCkurier