Strona główna - HTML dla bardzo początkujących - Etykieta webmastera - Struktura dokumentu - Czcionki - Bloki - Odsyłacze - Wykazy - Grafika i multimedia - Tabele - Style - Ramki - Pływające ramki - Formularze - Response-O-Matic - TopNet Mailer - Liczniki wizyt - Księga gości - Kanały informacyjne - Wprowadzenie do JavaScript - Przykłady skryptów - Narzędzia - Słowniczek - Znaki specjalne - Ankieta - Kolory

Istota odsyłaczy | Etykieta | Odsyłacze | Mapy odsyłaczy na obrazkach

Odsyłacze

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ć 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. Jej konstrukcja jest następująca:

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, 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.

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

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 miesięcznika ENTER:

Tutaj znajdziesz miesięcznik ENTER

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

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</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:

Jeśli używasz Netscape Navigatora, ustaw kursor na odsyłaczu, kliknij prawym przyciskiem myszki i wybierz opcję Copy this link location. 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 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ć do rozmaitych serwisów shareware'owych, jak TUCOWS czy Slaughterhouse. Ich spis znajdzie Czytelnik na stronie głównej PCkuriera.

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 - 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 PCkuriera:

http://www.pckurier.pl

Adresem relatywnym jest adres numeru 13'99 PCkuriera:

/1999/13/index.html

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

http://www.pckurier.pl

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

http://www.pckurier.pl/1999/13/index.html

Strona 13 numeru PCkuriera jest położona o dwa szczeble 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

Odsyłacz do pliku dźwiękowego
<a href="../multimed/pinkpant.mid">Plik dźwiękowy</a>
Plik dźwiękowy

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

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

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

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@pckurier.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.

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@pckurier.pl (Netscape Navigator) lub
Wysyła pocztę do: mailto:pawel.wimmer@pckurier.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:

W podobny sposób można predefiniować adres odbiorcy, do którego idzie kopia listu:

albo tzw. ślepa lub ukryta kopia, czyli BCC (żaden inny odbiorca listu nie zobaczy tego adresu):

Można też zdefiniować fragment ciała listu, a więc już bezpośrednio w oknie edycji:

Pocztę może też otrzymać kilka osób jednocześnie, adresowanych w polu głównym. Adresy trzeba rozdzielić po prostu średnikami:

Powstaje pytanie, czy można połączyć wszystkie te elementy "do kupy". Otóż można i robi się to bardzo prosto, stosując jako łącznik znak &.

<a href="mailto:pawel.wimmer@pckurier.pl?cc=jan.kowal@firma.pl&bcc=jozef.kwiatek@firma.pl&subject=Bardzo ważny list&body=Witajcie Panowie">Wyślij pocztę</a>

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 gustownej ramce (definicja tabeli)

Paweł Wimmer
Redaktor
PCkurier
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@pckurier.pl

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>

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ę 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ę 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ę 50-100 KB.

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>,

WAIS <A HREF=wais://...></A>

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

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

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, np.:

Odsyłacz do serwera news.fuw.edu.pl (Netscape może mieć kłopoty).

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

<A HREF="news://news.fuw.edu.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.

[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:

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:

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: