Odsyłacze...

Odsyłacze

---

O rozdziale: Rozdział Odsyłacze wyjaśnia, w jaki sposób za pomocą odsyłaczy hipertekstowych wiążemy ze sobą rozmaite zasoby w World Wide Web, dzięki czemu możemy za pomocą kliknięć przenosić się w inne miejsca w Internecie lub w tym samej witrynie, pobierać pliki, uruchamiać pocztę itd.

Istota odsyłaczy

---

Odsyłacze (inaczej: hiperłącza, łącza hipertekstowe, odnośniki, linki) 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. Odsyłacz można też potraktować jak 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.

Etykieta

---

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

Etykieta (zwana też zakładką lub 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.

Konstrukcja etykiety 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 na poszczególnych stronach, u góry, 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.

Konieczne 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 niezbędne, aby definicja była poprawna. Należy też zwracać uwagę na wielkość liter, gdyż są one na ogół rozróżniane. Należy zalecać używanie małych liter zarówno w etykietach, jak i odsyłaczach do nich.

Uwaga: wielowyrazowe zakładki, nawet ujęte w cudzysłowy, są ignorowane przez niektóre przeglądarki, np. Lynx. Można temu zaradzić, łącząc wyrazy, np. "to_jest_zakładka_dla_pewnego_tematu".

Odsyłacze

---

Czym jest odsyłacz?

---

Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Jej budowę 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 (choć można to zmienić). Na przykład odsyłacz do miesięcznika PC World Komputer:

<a href="http://www.pcworld.pl">Tutaj znajdziesz miesięcznik PC World Komputer</a>

Tutaj znajdziesz miesięcznik PC World Komputer

Gdy przesuniesz kursor myszki nad odsyłacz, kursor przyjmie postać rączki, natomiast w wierszu statusu przeglądarki powinna się pojawić informacja http://www.pcworld.pl. Kliknięcie spowoduje natychmiastowy skok do wskazanego miejsca ("natychmiastowość" jest pojęciem względnym - niekiedy trwa to całkiem długo, jeśli łącza są przeciążone...).

ISTOTNA UWAGA: przy tworzeniu odsyłaczy należy zwracać uwagę na wielkość liter w odsyłaczach. Dla wielu serwerów internetowych ta sama wielka i mała litera są dwoma różnymi znakami, więc "MojaFirma" nie jest tym samym co "mojafirma". Praktyka pokazuje, że wiele osób nie zwraca na to uwagi, wskutek czego nie można wczytać strony albo obrazka czy pliku dźwiękowego na konkretnej stronie - gdy plik na serwerze zawiera jakieś wielkie litery, koniecznie należy to uwzględnić w odsyłaczu.

 

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

---

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 odsyłacza</a>.

W pokazanym wyżej przykładzie PC World Komputera posłużyliśmy się adresem http://www.pcworld.pl, gdzie host=www, a domena=pcworld.pl. 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. Naturalnie pomijamy tutaj sytuację, gdy w serwisie stosowany jest język skryptowy server-side, np. PHP - wtedy rozszerzenie pliku ma zwykle postać .php.

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ć nazwy samych plików, 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:

• Jeśli używasz Firefoksa lub Operę, ustaw kursor na odsyłaczu, kliknij prawym przyciskiem myszki i wybierz opcję Kopiuj adres odnośnika. Przejdź do redagowanego dokumentu i wstaw ze schowka skopiowany adres.
• Jeśli używasz Internet Explorera PL, ustaw kursor nad odsyłaczem, kliknij prawym przyciskiem myszki i wybierz opcję Kopiuj skrót. W redagowanym dokumencie wstaw ze schowka skopiowany adres.

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. 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 Firefoksie, Operze czy Internet Explorerze zostanie bez kłopotu zaprezentowany obrazek GIF czy plik tekstowy.

Ponieważ jednak nierzadko 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. Jest jednak także faktem, że same przeglądarki coraz częściej samodzielnie obsługują rozmaite nietypowe formaty.

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, a nowsze wersje Internet Explorera potrafią bezpośrednio wczytać plik Worda, jeśli edytor jest obecny na dysku. Przeglądarkę można nauczyć reagowania na określone typy plików, co zwykle odbywa się w oknie dialogowym preferencji.

Odsyłacze absolutne i względne

---

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 PC World Komputera:

http://www.pcworld.pl

Adresem relatywnym jest np. adres jakiejś wiadomości w numerze miesięcznika PC World Komputer:

/news/96251.html

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

http://www.pcworld.pl

to automatycznie odsyłacz relatywny wiadomości jest interpretowany jako:

http://www.pcworld.pl/news/96251.html

Wiadomość jest położona o 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, że 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>. w rozdziale Struktura dokumentu. Wpisanie 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:

darmowe gry online

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

Odsyłacz do pliku dźwiękowego

<a href="../multimed/pinkpant.mid">Plik dźwiękowy</a>

Plik dźwiękowy

Odsyłacz do pliku PDF

<a href="licence.pdf">dokument PDF</a>

Dokument PDF ukazuje się zwykle bezpośrednio w przeglądarce (Internet Explorer i Firefox) i jest opatrzony narzędziami nawigacyjno-zarządzającymi Acrobat Readera. Sam Reader uruchamia się także w tle (odrębna "instancja"), jeśli jest to wersja 3, natomiast w wersji 4 uruchamia się wyłącznie jako wtyczka w przeglądarce. Ponadto wersja 4 Readera pozwala zapisywać plik PDF bezpośrednio z poziomu przeglądarki (ikonka dyskietki w menu Readera), na co nie pozwala wersja 3. Opera uruchamia osobną instancję Acroba Readera.

Obszerniejsze informacje o sposobach dołączania plików multimedialnych do dokumentów WWW są zawarte na stronie Multimedia.

Odsyłacze do etykiet

---

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#nazwa_etykiety">Tekst</a>

Zwróć uwagę na znak # oddzielający nazwę strony od nazwy etykiety.

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

<a href="#nazwa_etykiety">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.

nformacje o odsyłaczach w dokumencie zawierającym ramki są podane na stronie poświęconej ramkom.

Odsyłacze do poczty elektronicznej i FTP

---

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:webmaster123@op.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

 

 

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 email.png, wstawiając definicję przed adresem.

No to wypróbujmy - proszę, kliknij, ale nie wysyłaj :-)

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 obramowanym bloku div.

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 (już nieaktualny):

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

Możemy także dać bezpośredni odsyłacz do pliku:

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

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ę zapisania na dysku, aby program przystąpił do ściągania pliku na dysk naszego komputera.

Dobrym (wręcz 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ę można 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ę 100-200 KB, aczkolwiek problem ten traci szczęśliwie na znaczeniu w miarę rozwoju stałych łączy internetowych.

Odsyłacze do innych usług

---

Niektóre z tych usług są już niezmiernie rzadko używane.

Plik na dysku lokalnym

<a href="file:///ścieżka/plik"></a>,

Gopher

<a href="gopher://..."></a>,

Telnet

<a href="telnet://..."></a>,

Wais

<a href="wais://..."></a>

Grupy dyskusyjne

<a href="news://..."></a>,

Jeśli podasz np. nazwę konkretnej grupy dyskusyjnej, kliknięcie na odsyłaczu do niej spowoduje uruchomienie domyślnego programu obsługi grup, np. Outlook Express w Internet Explorerze) i ustawienie kursora na na danej grupie. Na przykład:

<a href="news:pl.comp.www"></a>

Odsyłacz do grupy dyskusyjnej pl.comp.www

Zauważmy, że uruchamiany jest domyślny serwer newsów.

Nigdy nie wiemy, który serwer newsów zaabonował nasz czytelnik. Jeśli chcemy skierować naszego gościa do ściśle określonego serwera, możemy podać w odsyłaczu adres serwera, np.:

 

Mało tego, możemy także skierować od razu do wskazanej grupy:

<a href="news://news.tpi.pl/pl.comp.www">grupa dyskusyjna pl.comp.www</a>

grupa dyskusyjna pl.comp.www

Mapy odsyłaczy na obrazkach

---

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.

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.

A oto pełna treść polecenia:

• 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">

Kingdom Rush

Ręczne tworzenie map odsyłaczy jest dość uciążliwe i lepiej jest się posługiwać programami, które oferują narzędzia graficzne - takie wbudowane narzędzia posiada m.in. Pajączek.