Odsyłacze

W tym rozdziale dowiesz się...

Wstęp

Odsyłacze - inaczej hiperłącza, odnośniki hipertekstowe, linki - stanowią całą istotę Internetu. Bez nich byłby on jedynie wielką siecią do pobierania "suchych" danych, a dokumenty znajdujące się w niej, nie byłyby w żaden sposób ze sobą powiązane. Praktycznie na każdej stronie WWW spotyka się odsyłacze. Najczęściej stanowi je specjalnie wyróżniony krótki tekst (lub obrazek), po kliknięciu którego, następuje przeniesienie do innej strony. Przy czym strona taka może wchodzić w skład tego samego serwisu, ale równie dobrze może znajdować się na drugim końcu świata. Przeglądarki internetowe wyświetlają odsyłacze najczęściej w innym kolorze oraz podkreślają je (można to oczywiście zmienić) - w ten sposób są one lepiej widoczne i odróżniają się od zwykłego tekstu.

Użytkownika można odsyłać również do cudzych stron, a nie tylko do własnych i nie jest to w żaden sposób łamanie praw autorskich (jeśli nie podpiszemy się jako autorzy takiej strony :-) - przeciwnie - jest to darmowa reklama dla strony, do której następuje odwołanie. Ważne jest jedynie, aby dokumenty były w jakiś sposób powiązane ze sobą tematycznie (chociaż nie jest to wymóg - można przecież umieścić na własnej stronie linki do różnych ciekawych miejsc w Internecie, które nie muszą mieć ze sobą związku). To jest właśnie istota hipertekstu - pozwala on uzyskać system połączeń pomiędzy różnymi dokumentami w sieci.

Odsyłacze są wykorzystywane głównie do dwóch najważniejszych celów:

  1. Tworzenie spisu treści serwisu - spis taki jest podobny do tego, który występuje w zwykłych książkach. Jego zaletą jest jednak to, że nie trzeba ręcznie przeszukiwać całej zawartości w poszukiwaniu określonego numeru strony, ale wystarczy kliknąć odsyłacz i zostaniemy automatycznie przeniesieni we wskazane miejsce.
  2. Linki do innych ciekawych miejsc w Internecie - zawiera je niemal każdy serwis internetowy. Jeśli użytkownik będzie chciał przeczytać więcej o danym zagadnieniu, będzie mógł skorzystać z takich odsyłaczy. W porównaniu z wyszukiwarkami internetowymi, linki mają taką zaletę, że autor zwykle starannie je wybrał i dlatego zawierają najczęściej rzetelne informacje, których odszukanie w tradycyjny sposób mogłoby zająć dużo więcej czasu.

Gdyby nie odsyłacze, cały ten kurs musiałby składać się z jednej ogromnej strony lub z wielu nie powiązanych ze sobą dokumentów, przez co nawigacja w takim serwisie byłaby niezwykle utrudniona. Aby wejść na dowolną stronę (nawet w tym samym serwisie), za każdym razem trzeba by było wpisywać jej adres w przeglądarce.

UWAGA! Nie można zagnieżdżać znaczników odsyłaczy, tzn. umieszczać jednego w drugim.

Do podstrony

(w obrębie tego samego serwisu)

Tak jak każda książka składa się z rozdziałów, tak samo serwisy internetowe składają się zwykle z podstron. Każda podstrona jest osobnym plikiem HTML i zawiera treść, która dość znacznie różni się tematycznie od pozostałych. Taka organizacja ułatwia użytkownikowi nawigację oraz zapobiega niepotrzebnemu wczytywaniu całego serwisu od razu (co trwałoby prawdopodobnie bardzo długo).

<a href="względna ścieżka dostępu">opis</a>
gdzie jako "względna ścieżka dostępu" należy podać lokalizację na dysku, gdzie znajduje się podstrona, do której chcemy się przenieść.
W miejsce wyrazu "opis" wpisujemy krótki tekst, który pojawi się na ekranie i po kliknięciu którego nastąpi uruchomienie odsyłacza (ścieżka dostępu pojawia się jedynie na pasku statusu przeglądarki).

Praktycznie każdy serwis internetowy składa się z pewnej ilości podstron, zapisanych w osobnych plikach HTML. Aby umożliwić w nich nawigację, wstawia się właśnie takie polecenia, odnoszące się do wszystkich podstron serwisu. Jest to pomocne przy tworzeniu spisu treści, chociaż hiperłącza mogą znajdować się również w zwykłym tekście, odsyłając użytkownika do miejsca, gdzie dany temat jest szerzej opisany. Odsyłacz taki może odnosić się do innej podstrony, ale tylko w obrębie tego samego dysku (ten sam serwis internetowy).

Ponieważ sposób przełamywania wierszy w przeglądarce nie zależy od sposobu wpisania tekstu w edytorze, czasami może się zdarzyć, że pojedynczy odsyłacz zostanie przedzielony na dwie kolejne linijki. Może się to wydawać nieestetyczne. Aby tego uniknąć, należy w opisie odsyłacza zastąpić wszystkie spacje znakami &nbsp; [zobacz: Znaki specjalne]. Nie dotyczy to jednak tekstu, w którym znajdują się: "%" (procent) lub "-" (myślnik).

UWAGA!
Bardzo ważne: w nazwach plików lepiej nie używać:
  • wielkich liter
  • znaków, np.: \ / : * ? " < > |
  • spacji (jeśli musisz, w zamian używaj podkreślnika "_")
  • polskich liter (ą, ć, ę, ł, ń... itd.)

Jeśli nie zastosujesz się do tych zaleceń, może się okazać, że po wprowadzeniu strony do Internetu, pliki takie nie wczytają się (nawet jeśli na Twoim komputerze wszystko jest w porządku)!

Za pomocą tego typu odsyłacza można się odnosić do dowolnego pliku znajdującego się na koncie FTP razem ze stroną. Dzięki temu można zbudować dział download, tzn. odsyłacze do pobierania plików.

Przykład:

To jest odsyłacz do strony głównej kursu HTML: Strona główna

Dymek narzędziowy

Dobrym pomysłem może się również okazać, zastosowanie atrybutu title="...". Powoduje on, że po wskazaniu odsyłacza myszką, wyświetli się tekst pomocniczy w "dymku" narzędziowym. Można tam podać np. szerszy opis strony, do której ma nastąpić przeniesienie, np. po wpisaniu:

<a href="../index.html" title="Do strony głównej">Strona&nbsp;główna</a>

Otrzymamy (wskaż odsyłacz myszką, aby zobaczyć opis):

Strona główna

Nowe okno

Jeśli chcesz, aby po kliknięciu odsyłacza otworzyło się nowe okno, wpisz następujący kod (dotyczy to również pozostałych typów odsyłaczy przedstawionych na tej stronie):

<a target="_blank" href="adres">opis</a>

kliknij tutaj

[Aby określić wygląd nowego okna (rozmiar, położenie, pokazanie/ukrycie pasków menu, narzędzi, statusu itd.), zobacz: Otwarcie nowego okna].

Do etykiety

Etykieta - inaczej zakładka lub kotwica (ang. anchor) - to pewne zaznaczone miejsce na stronie. Jeśli zdefiniujemy taką zakładkę, będziemy mogli się później do niej bezpośrednio przenosić. Etykiety są wykorzystywane, gdy w jednym dokumencie znajduje się więcej ważnych miejsc - podrozdziałów, a wstawienie ich do osobnych plików, byłoby uciążliwe, ze względu na ich liczbę.

Tak jak w książce - każdy rozdział składa się z mniejszych podrozdziałów - tak samo na każdej osobnej stronie HTML definiuje się zakładki. Dzięki takiej konstrukcji, nawigacja w serwisie staje się dużo łatwiejsza. Po kliknięciu odsyłacza do etykiety, przeglądarka internetowa przenosi użytkownika bezpośrednio do podrozdziału, a nie na początek strony, przez co nie jest on zmuszony do samodzielnego odszukania wybranego tematu (co w przypadku obszernych dokumentów mogłoby długo potrwać). Etykietę można zdefiniować w dowolnym miejscu strony - również wewnątrz zwykłego tekstu.

Jeśli chcemy używać etykietę, najpierw należy ją zdefiniować w wybranym miejscu strony za pomocą polecenia:

<a id="nazwa_etykiety"></a>

Następnie możemy się do niej odwoływać, zarówno z tej samej jak i z innej strony, za pomocą zwykłych odsyłaczy:

<a href="(ścieżka do strony)#nazwa_etykiety">opis odsyłacza</a>

Istnieją dwa rodzaje odsyłaczy do etykiet:

  1. Etykieta zdefiniowana na tej samej stronie
    <a href="#nazwa_etykiety">opis odsyłacza</a>
    (...)
    <a id="nazwa_etykiety">(opis etykiety)</a>
    lub
    <a id="nazwa_etykiety">(opis etykiety)</a>
    (...)
    <a href="#nazwa_etykiety">opis odsyłacza</a>
  2. Etykieta zdefiniowana na innej stronie
    <a href="ścieżka dostępu lub adres internetowy#nazwa_etykiety">opis odsyłacza</a>

    UWAGA! Na podanej stronie musi zostać zdefiniowana etykieta - polecenie:
    <a id="nazwa_etykiety">(opis etykiety)</a>

We wszystkich przypadkach <a id="nazwa_etykiety">...</a> oznacza etykietę, do której nastąpi przeniesienie, po kliknięciu odsyłacza <a href="(ścieżka dostępu)#nazwa_etykiety">...</a>.

Polecenie powoduje przejście do innego miejsca (etykiety) na tej samej lub innej stronie. Zasady wpisywania ścieżki dostępu są takie same jak w przypadku odsyłacza do podstrony. Należy jedynie pamiętać, że nazwa etykiety w poleceniu odsyłacza: <a href="#... oraz w definicji etykiety: <a id="... musi być bezwzględnie taka sama (włączając w to wielkość liter), jedynie w odsyłaczu nazwę należy poprzedzić znakiem # (krzyżyk)!

Można również zauważyć, że kolejność wpisywania odsyłacza <a href="#... oraz etykiety <a id="... na stronie jest dowolna, tzn. etykieta może znajdować się wcześniej niż odsyłacz do niej (powodując np. przeniesienie na samą górę strony). Dodatkowo opis etykiety nie jest konieczny (ale konieczny jest opis odsyłacza, bo w przypadku gdy go nie podamy, odsyłacz nie pojawi się na ekranie).

Na stronach WWW bardzo często umieszcza się etykiety bez opisu (ale należy pamiętać o zamknięciu znacznika). Chociaż zakładka taka nie jest widoczna na ekranie, to znajduje się w kodzie źródłowym strony i można się do niej odnosić.

Etykietę (czyli atrybut id="nazwa_etykiety") można ustawiać nie tylko na znaczniku A, ale na prawie wszystkich elementach (oprócz: BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE). Można do tego również wykorzystać istniejące wcześniej na stronie znaczniki. Idealnym przykładem są tytuły. Zwykle naturalnie wyznaczają on ważne miejsca na stronie, do którym prawdopodobnie możemy chcieć wstawić bezpośrednie odsyłacze.

UWAGA! Bardzo ważne: w nazwach etykiet lepiej nie używać:
  • wielkich liter
  • znaków, np.: \ / : * ? " < > |
  • spacji (jeśli musisz, w zamian używaj podkreślnika "_")
  • polskich liter (ą, ć, ę, ł, ń... itd.)

Dodatkowo należy bezwzględnie pamiętać, że na tej samej stronie nie mogą się znajdować dwie identyczne etykiety! Można natomiast umieścić takie same etykiety na różnych stronach.

Przykład:

Odsyłacz pierwszego rodzaju (do etykiety "#testowa_etykieta" na tej stronie):
Przejdź do testowej etykiety...

...
...
...
...
...
...
...
...
...
...

...testowa etykieta


Odsyłacz drugiego rodzaju (do etykiety "#wstep" na stronie "przegladarki.html" - spójrz na pasek stanu przeglądarki po wskazaniu odsyłacza myszką):
Przeglądarki - wstęp...

Do adresu internetowego

(w obrębie całego Internetu)

  1. Połączenie niezabezpieczone
    <a href="http://adres strony">opis</a>
  2. Bezpieczne połączenie SSL
    <a href="https://adres strony">opis</a>

    Protokół SSL (Secure Sockets Layer - Bezpieczna Warstwa Gniazdek) został opracowany przez firmę Netscape Communications Corporation. Jest używany do przesyłana poufnych danych. Teoretyczne za jego pomocą można nawiązać połączenie ze zwykłą stroną HTML - analogicznie jak w przypadku niezabezpieczonego odsyłacza do adresu internetowego. Jednak aby to zrealizować, serwer musi obsługiwać tego typu połączenia, a dodatkowo posiadać własny certyfikat, dzięki któremu użytkownik może być pewny, że łączy się ze stroną, której żądał. Ponieważ dane są szyfrowane, więc nawet jeśli osoba niepowołana przechwyci je po drodze podczas przesyłania, nie będzie potrafiła ich odczytać. Protokół SSL jest powszechnie stosowany przez sklepy i banki internetowe.

    Niestety nie wszystkie serwery obsługują połączenie SSL. Również starsze przeglądarki internetowe mogą go nie interpretować (jest obsługiwane przez Internet Explorer oraz Netscape Navigator od wersji 3).

W miejsce "adres strony" należy podać pełny adres internetowy strony, do której chcemy się przenieść (np.: www.onet.pl).

Adres strony internetowej zawsze musi rozpoczynać się od http:// lub https://

Odsyłacz taki jest przydatny, jeśli chcemy umieścić w swoim serwisie tzw. linki do dowolnych stron w obrębie całego Internetu. Jeśli surfując w sieci, trafimy na jakąś ciekawą stronę, możemy skopiować jej adres (z paska adresu przeglądarki) i umieścić w odsyłaczu. Dzięki temu wszyscy użytkownicy odwiedzający naszą witrynę, będą mogli przenieść się bezpośrednio do wskazanej strony, bez potrzeby wpisywania jej adresu.

Przykład:

Odsyłacz do portalu internetowego onet.pl

Odsyłacz pocztowy

(e-mail)

<a href="mailto:adres e-mail">opis</a>
gdzie jako "adres e-mail" należy podać adres poczty elektronicznej osoby, do której ma zostać wysłany list (np.: jan_kowalski@example.com).

Dzięki temu odsyłaczowi, użytkownicy oglądający Twoją stronę, będą mogli wysłać list e-mail pod adres podany w poleceniu. Po kliknięciu takiego odnośnika, list nie zostanie wysłany natychmiastowo, lecz nastąpi otwarcie domyślnego programu pocztowego użytkownika (np. Outlook Express), w którym będzie on mógł wpisać treść listu, a potem go wysłać do wskazanego adresata, którego e-mail pojawi się automatycznie. Jeśli podasz swój własny adres, będziesz w stałym kontakcie z użytkownikami odwiedzającymi Twój serwis.

Przykład:

Tutaj możesz wysłać list do mnie (tylko proszę, jeśli nie masz nic konkretnego do napisania, nie przysyłaj mi pustych listów :-)

Pamiętaj, że podanie swojego adresu na stronie WWW, może spowodować, że zaczną do Ciebie przychodzić niechciane wiadomości - reklamówki (tzw. spam). Dobrym pomysłem może być założenie sobie darmowego konta pocztowego w dowolnym portalu internetowym i podanie adresu takiego konta na swojej stronie - darmowe konto zawsze można zmienić. Zakładając stronę WWW na darmowym serwerze, często dostajemy również konto e-mail. Wtedy można z niego skorzystać.

Ochrona adresu e-mail

Aby zabezpieczyć się przed tzw. żniwiarkami (ang. harvesters) - czyli specjalnymi programami, które automatycznie gromadzą adresy e-mail, umieszczone na stronach WWW - można posłużyć się skryptem. Zamiast typowego odsyłacza pocztowego, umieść na stronie:

<script>
var uzytkownik = 'jan_kowalski';
var domena = 'example.com';
var dodatkowe = '?subject=Temat listu&body=Napisz co%9C:%0A';
var opis = 'Wyślij do mnie list';
document.write('<a hr' + 'ef="mai' + 'lto:' + uzytkownik + '\x40' + domena + dodatkowe + '">');
if (opis) document.write(opis + '<'+'/a>');
else document.write(uzytkownik + '\x40' + domena + '<'+'/a>');
</script>
Przy czym wyróżnione wartości oznaczają:
jan_kowalski
Pierwszy człon adresu, znajdujący się przed znakiem @ (np. jan_kowalski@example.com)
example.com
Drugi człon adresu, znajdujący się po znaku @ (np. jan_kowalski@example.com)
?subject=Temat listu&body=Napisz co%9C:%0A
Dodatkowe parametry (patrz poniżej). Zwróć szczególną uwagę, że parametry rozpoczynają się od pytajnika
Wyślij do mnie list
Opis odsyłacza, który pojawi się na ekranie

Dwie ostatnie wartości nie są wymagane, tzn. można ich nie podawać.

Wadą stosowania skryptu zamiast zwykłego odsyłacza pocztowego jest to, że jeśli przeglądarka użytkownika nie obsługuje skryptów JavaScript, nie zobaczy on żadnego odnośnika i nie będzie się mógł z Tobą skontaktować. Na szczęście znacząca większość używanych dzisiaj przeglądarek internetowych, bez trudu sobie z tym radzi, dlatego ryzyko błędu nie jest takie duże.

Uwaga! Jeśli zdecydujesz się na wykorzystanie skryptu, musi on zastąpić wszystkie zwykłe odsyłacze pocztowe, na wszystkich stronach serwisu. Pozostawienie chociaż jednego z nich sprawi, że sposób ten straci sens i nie spełni swojego zadana!

Przykład:

Dodatkowe parametry odsyłacza pocztowego

Możliwe jest także podanie odsyłacza pocztowego na inne sposoby:

  1. List e-mail będzie miał podany przez nas tytuł
    <a href="mailto:adres e-mail?subject=tytuł listu">opis</a>
  2. Kopia listu będzie wysłana do podanej osoby
    <a href="mailto:adres e-mail?cc=adres e-mail gdzie wysłać kopię">opis</a>
  3. Ukryta kopia (żaden inny odbiorca listu nie zobaczy adresu podanego w bcc)
    <a href="mailto:adres e-mail?bcc=adres e-mail gdzie wysłać ukrytą kopię">opis</a>
  4. W treści listu pojawi się podany tekst
    <a href="mailto:adres e-mail?body=tu wpisz tekst">opis</a>
  5. List zostanie wysłany do kilku podanych adresatów
    <a href="mailto:pierwszy adres e-mail;drugi adres e-mail;trzeci adres e-mail">opis</a>
  6. Połączenie powyższych elementów
    <a href="mailto:pierwszy adres e-mail;drugi adres e-mail;trzeci adres e-mail?subject=tytuł listu&amp;cc=adres e-mail gdzie wysłać kopię&amp;bcc=adres e-mail gdzie wysłać ukrytą kopię&amp;body=tutaj wpisz treść listu">opis</a>

UWAGA! Jeśli w powyższych parametrach występują znaki: & (ampersand - angielskie "and"), " (cudzysłów), % (procent) albo chcemy wstawić znak nowej linii (użycie Enter nic nie da), należy zamiast nich wpisać odpowiednio: %26, %22, %25 oraz %0A.

Dodatkowo (dotyczy to przede wszystkim systemu Windows) jeśli w dokumencie została użyta strona kodowa utf-8, zamiast polskich liter mogą pojawić się zupełnie nieprzewidziane znaki. Na dodatek istnieją widoczne różnice kodowania znaków np. między różnymi wersjami systemu Windows i praktycznie nie da się dobrać jednej działającej metody zapisu tych liter. Dlatego na dzień dzisiejszy najlepszym rozwiązaniem jest nie używanie polskich znaków w odsyłaczach pocztowych.

Odsyłacz FTP

<a href="ftp://ftp.adres">opis</a>

Protokół FTP (File Transfer Protocol - Protokół Transmisji Plików) służy do pobierania i wysyłania plików z/do specjalnych serwerów. Możliwe jest zabezpieczenie połączenia hasłem dostępu lub udostępnienie plików wszystkim użytkownikom - tzw. logowanie anonymous (adres e-mail jako nazwa użytkownika).

Aby zrealizować na stronie dział "download" - tzn. możliwość pobierania plików przez czytelników - należy się posłużyć odsyłaczem do podstrony.

Przykład:

ftp://sunsite.icm.edu.pl/pub/

Z podaniem użytkownika (login)

<a href="ftp://użytkownik@ftp.adres">opis</a>

Jeżeli do zalogowania wymagane jest hasło, aplikacja FTP poprosi o jego wprowadzanie.

Z podaniem użytkownika (login) i hasła

<a href="ftp://użytkownik:hasło@ftp.adres">opis</a>
UWAGA!
To jest BARDZO ważne - przeczytaj dokładnie!

Podanie hasła jest zwykle równoznaczne z oddaniem pełnego dostępu (do odczytu i zapisu - w tym kasowania plików) każdemu użytkownikowi, który kliknie na podany link! Dlatego tego typu odnośników nie powinno się stosować. Zwłaszcza nie stosuj ich podając adres konta FTP, na którym znajduje się Twoja strona WWW!

Komunikatory internetowe

Gadu-Gadu

<a href="gg:numer">opis</a>

Status użytkownika

<img src="http://status.gadu-gadu.pl/users/status.asp?id=numer&amp;styl=styl" alt="Gadu-Gadu">
gdzie jako styl należy podać liczbę 1. Jeżeli podamy 2, zamiast obrazka zostanie zwrócona liczba odzwierciedlająca status użytkownika: 1 - "niedostępny", 2 - "dostępny", 3 - "zaraz wracam".

Tlen

<a href="tlen://chat|użytkownik|">opis</a>

Status użytkownika

<img src="http://status.tlen.pl/?u=użytkownik&amp;t=styl" alt="Tlen">
gdzie jako styl należy podać liczbę 1, 2 lub 3.

Skype

<a href="skype:użytkownik">opis</a>
<a href="skype:użytkownik?akcja">opis</a>
akcja
  • call - rozmowa głosowa
  • chat - rozmowa tekstowa
  • add - dodaj do kontaktów
  • userinfo - profil użytkownika
  • voicemail - poczta głosowa
  • sendfile - wyślij plik

Status użytkownika

<img src="http://mystatus.skype.com/ikony/użytkownik" alt="Skype">
gdzie jako ikony należy podać zestaw ikon: smallicon, mediumicon, smallclassic, bigclassic, balloon.

Aby status wyświetlał się poprawnie, należy w ustawieniach komunikatora zaznaczyć opcję:
Narzędzia/Opcje/Prywatność/Pozwól na wyświetlanie mojego statusu.

Jabber

<a href="xmpp:użytkownik@serwer">opis</a>

ICQ

<a href="icq:numer">opis</a>

Status użytkownika

<img src="http://web.icq.com/whitepages/online?icq=numer&amp;img=obrazek" alt="ICQ">
gdzie jako obrazek należy podać liczbę od 1 do 25.

Yahoo! Messenger

<a href="ymsgr:sendim?użytkownik">opis</a>

Status użytkownika

<img src="http://opi.yahoo.com/online?u=użytkownik&amp;m=g&amp;t=typ" alt="Yahoo! Messenger">
gdzie jako typ należy podać liczbę 0, 1 lub 2.

AIM

<a href="aim:goim?screenname=użytkownik&amp;message=wiadomość">opis</a>

Inne

Odsyłacz do grup dyskusyjnych

  1. Serwer domyślny:
    <a href="news:nazwa grupy">opis</a>
  2. Wskazany serwer:
    <a href="news://serwer/">opis</a>
  3. Wskazana grupa na podanym serwerze:
    <a href="news://serwer/nazwa grupy">opis</a>

Grupy dyskusyjne to usługa obsługiwana przez programy pocztowe, pozwalająca wypowiedzieć się na jakiś temat na forum oraz przeczytać wypowiedzi innych. Od zwykłego chatu różni się tym, że dyskusja nie odbywa się czasie rzeczywistym, tzn. nie można oczekiwać natychmiastowej odpowiedzi na zadane pytanie.

Przykład:

news:pl.comp.www (serwer domyślny)

news://news.fuw.edu.pl/ (podany serwer)

news://news.fuw.edu.pl/pl.comp.www (wskazana grupa dyskusyjna)

Odsyłacz NNTP

<a href="nntp://adres">opis</a>

NNTP (Network News Tranport Protocol - Sieciowy Protokół Transportu Wiadomości) to protokół, na którym opierają się grupy dyskusyjne. Możliwe jest podanie odwołania do wybranej grupy bezpośrednio poprzez protokół NNTP.

Odsyłacz newsrc

<a href="newsrc://adres">opis</a>

Plik .newsrc zawiera informacje na temat grupy dyskusyjnej: czy została przez użytkownika zasubskrybowana oraz które artykuły zostały przeczytane. Dzięki temu można używać kilku programów odczytujących grupy dyskusyjne bez konieczności ponownego subskrybowania i powtórnego czytania tych samych artykułów.

Odsyłacz telnet

<a href="telnet://adres">opis</a>
<a href="telnet://użytkownik@adres">opis</a>

Telnet to usługa, dzięki której możemy połączyć się z innym komputerem i nim sterować (znając komendy Unix'a) - wymagane jest posiadanie konta. Z uwagi na brak szyfrowania transmisji jest wypierany przez SSH.

Odsyłacz SSH

<a href="ssh://adres">opis</a>
<a href="ssh://użytkownik@adres">opis</a>

Odpowiednik telnetu z szyfrowaną transmisją.

Odsyłacz do skryptu

<a href="javascript:polecenia">opis</a>

Odsyłacz ten, po kliknięciu, spowoduje wykonanie podanych poleceń języka JavaScript.

Po wskazaniu takiego odsyłacza myszką, na pasku stanu przeglądarki mogą pojawić się nieestetyczne napisy. Jeśli nie chcesz, aby użytkownik widział taką treść, możesz zmienić wpis na pasku statusu, poprzez dodanie atrybutów: onmouseover="..." oraz onmouseout="...".

Przykład:

javascript:alert('To jest okno ostrzeżenia')

Odsyłacz WAIS

<a href="wais://adres">opis</a>

WAIS (Wide Area Information Server - Rozproszony Serwer Informacji) to system wyszukiwania tekstów na zdalnych komputerach z architekturą typu klient-serwer. Z powodu prymitywnego interfejsu oraz bankructwa firmy będącej twórcą tego protokołu (Thinking Machines z Cambridge), obecnie WAIS jest bardzo rzadko stosowany.

Odsyłacz Gopher

<a href="gopher://adres">opis</a>

Pozwala na dostęp do informacji w Kampusowych Rozległych Systemach Informacyjnych (CWIS - Campus-Wide Information System). Integruje w sobie protokoły takie jak: FTP, telnet czy WAIS. Z uwagi na ograniczoną multimedialność oraz mało elastyczną i niewygodną strukturę obecnie Gopher jest bardzo rzadko stosowany.

Odsyłacz obrazkowy

Do tej pory przedstawione zostały jedynie odsyłacze tekstowe, tzn. na ekranie był wyświetlany pewien krótki tekst (opis odsyłacza), po kliknięciu którego, następowało przeniesienie do wskazanego adresu. Łatwo zauważyć, że to nie wszystkie możliwości, jakie dają odsyłacze. Na większości stron internetowych można spotkać "aktywne" obrazki, symulujące przyciski. Po kliknięciu, zachowują się one jak zwykły odsyłacz (w istocie są one odsyłaczami). Wprowadzenie takich przycisków na stronę jest prostsze niż myślisz - wystarczy pamiętać, że wewnątrz znacznika odsyłacza (pomiędzy <a href="..."> a </a>) można umieszczać nie tylko tekst, ale również inne znaczniki - m.in. odpowiadające za zmianę wyglądu tekstu (pogrubienie, pochylenie itd.), czy też wstawienie obrazka. Ważne jest jedynie, aby nie wstawiać tam elementów wyświetlanych w bloku, ponieważ jest to niedozwolone!

Podstawowy odsyłacz obrazkowy

<a href="adres"><img src="ścieżka dostępu do obrazka" alt="tekst alternatywny"></a>
gdzie jako "ścieżka dostępu" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek.
Zasady wpisywania adresu są analogiczne jak w przypadku odsyłaczy do: podstrony, etykiety, adresu internetowego, poczty e-mail czy dowolnych innych odsyłaczy (w zależności od wybranego typu odsyłacza).

Odsyłacz ten zostanie uruchomiony, gdy klikniemy myszką obrazek, do którego podajemy ścieżkę dostępu. Dzięki niemu możemy stworzyć np. efektowne przyciski odsyłaczowe w menu strony.

Obrazki przycisków najlepiej zapisywać w formacie GIF, większe zdjęcia - JPG. Jeśli nie masz zacięcia artystycznego, nie musisz samodzielnie rysować wszystkich grafik. W Internecie na pewno znajdziesz wiele stron, gdzie możesz darmowo pobrać gotowe przyciski.

Tekst alternatywny (atrybut alt="..." dla znacznika <img>) może pojawić się w "dymku" narzędziowym po wskazaniu obrazka myszką (Microsoft Intetnet Explorer). Jest to jednak przede wszystkim informacja dla przeglądarek tekstowych, które nie wyświetlają grafiki. Dzięki temu również w takich przeglądarkach możliwe będzie używanie odsyłacza obrazkowego, chociaż grafika nie zostanie wyświetlona.

Jeżeli nie podasz tekstu alternatywnego (atrybut alt="..." dla znacznika <img>) dla obrazka w odsyłaczu, użytkownicy z przeglądarkami tekstowymi albo z wyłączonym wyświetlaniem obrazów mogą mieć utrudnioną lub wręcz uniemożliwioną nawigację w takim menu!

Przykład:

Kliknij na tym przycisku: Kliknij

Aby usunąć obramowanie wokół obrazka, należy wpisać:

<a href="..."><img src="..." style="border: 0" alt="tekst alternatywny"></a>

Przykład:

Kliknij

Rozszerzony odsyłacz obrazkowy (mapa odsyłaczy)

<img src="ścieżka dostępu do obrazka" alt="tekst alternatywny" usemap="#nazwa_mapy">
<map id="nazwa_mapy" name="nazwa_mapy">
	<area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny">
	<area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny">
	(...)
</map>
nazwa_mapy
Dowolny tekst, byleby był on taki sam w pierwszej i w drugiej linii, a dodatkowo w pierwszym wierszu musi być poprzedzony znakiem krzyżyka (#). Na jednej stronie nie mogą się znajdować dwie mapy o takiej samej nazwie!
(...)
Dalsze polecenia typu: <area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny">, które stworzą następne aktywne pola na obrazku.
kształt
Kształt obszaru w mapie odsyłaczy:
  • "rect" - pole ograniczone prostokątem
  • "poly" - pole ograniczone wielokątem nieregularnym
  • "circle" - koło
współrzędne
  1. "xp,yp, xk,yk" - w przypadku prostokąta (rect):
    • xp - współrzędna pozioma lewego-górnego wierzchołka prostokąta
    • yp - współrzędna pionowa lewego-górnego wierzchołka
    • xk - współrzędna pozioma prawego-dolnego wierzchołka prostokąta
    • yk - współrzędna pionowa prawego-dolnego wierzchołka
  2. "x1,y1, x2,y2, x3,y3..." - w przypadku wielokąta (poly):
    • "xn,yn - współrzędne poziome i pionowe kolejnych wierzchołków wielokąta
  3. "x,y, r" - w przypadku koła (circle):
    • "x,y" - współrzędne środka
    • "r" - długość promienia

We wszystkich przypadkach współrzędne są liczone od lewego górnego wierzchołka obrazka, który stanowi punkt zerowy układu współrzędnych.

Po wywołaniu tej komendy, zostanie wczytany obrazek o podanej ścieżce dostępu. Następnie będzie on podzielony na kilka pól (w sposób niewidoczny), z których każde będzie przyporządkowane oddzielnemu odsyłaczowi. Dzięki temu na tylko jednym rysunku możemy umiejscowić więcej niż jeden odnośnik.

Wiele edytorów HTML posiada wbudowany generator mapy odsyłaczy, dzięki któremu można w prosty i szybki sposób określić współrzędnie poszczególnych obszarów, wskazując kolejne punkty myszką na wyświetlonym obrazku.

UWAGA! Wielu użytkowników Internetu wyłącza wyświetlanie grafiki na stronach, aby przyspieszyć wczytywanie. W takim przypadku praktycznie nie będą oni mogli przenieść się do miejsc wskazanych na obrazkowej mapie odsyłaczy.

Z tego powodu warto również umieścić gdzieś zwykłe odsyłacze hipertekstowe, prowadzące do tych samych dokumentów. Można także zastosować odnośnik do strony alternatywnej - dla przeglądarek które nie wyświetlają grafiki. Ponadto tekst alternatywny jest informacją dla przeglądarek tekstowych, które nie wyświetlają grafiki.

Przykład:

Mapa odsyłaczyDo podstronyDo etykietyDo adresu internetowego

Aby usunąć obramowanie wokół obrazka, należy podać atrybut style="border: 0" dla znacznika <img>.

Przykład:

Mapa odsyłaczyDo podstronyDo etykietyDo adresu internetowego

Nakładanie obszarów

Załóżmy, że chcemy uzyskać następujący efekt: definiujemy na przygotowanym obrazku jeden okrągły i jeden trójkątny obszar z odsyłaczami, ale chcemy dodatkowo, aby kliknięcie na dowolnych pozostałych częściach grafiki, odsyłało na osobny adres. Możemy tego dokonać definiując na końcu trzeci kształt, o takich samych rozmiarach jak wymiary całego obrazka. Jeżeli powierzchnie, zdefiniowane na obrazku za pomocą znacznika <area>, nakładają się, pierwszeństwo mają te obszary, które zostały zdefiniowane wcześniej. Dlatego kształt wstawiony na końcu, nie przykrywa ustalonych wcześniej obszarów, ale zostaje umieszczony pod nimi.

Mapa odsyłaczy po stronie serwera

<a href="..."><img src="..." alt="..." ismap></a>

Czasami obszary odsyłaczy zdefiniowane na obrazku, mogą być bardzo skomplikowane. Może się zdarzyć, że nie uzyskamy pożądanego kształtu z pomocą <area shape="...">. W takim przypadku można skorzystać z mapy odsyłaczy po stronie serwera. Idea jest prosta: w kodzie źródłowym strony nie definiujemy żadnych obszarów, a jedynie po kliknięciu linku wysyłamy razem z nim współrzędne "x, y" punktu na obrazku, który kliknął użytkownik. Następnie oprogramowanie na serwerze (np. skrypt PHP) odczyta te współrzędne i wyświetli odpowiednią treść. Na przykład można wstawić na stronę grafikę z mapą geograficzną jakiegoś terenu, a kliknięcie na wybrany punkt spowoduje wyświetlenie zbliżenia tego obszaru albo informacji o wskazanej okolicy.

Aby użyć mapy odsyłaczy po stronie serwera, wystarczy dodać do obrazka atrybut ismap. Po kliknięciu, przeglądarka automatycznie doklei na końcu adresu odsyłacza ?x,y - czyli współrzędne punktu kliknięcia liczone od lewego-górnego narożnika grafiki.

Przykład:

Po kliknięciu na poniższym obrazku, do linku zostaną doklejone współrzędne wskazanego punktu (po wczytaniu nowej strony, zobacz pasek adresu Twojej przeglądarki):

Przykład mapy odsyłaczy po stronie serwera

Quiz

Sprawdź swoją wiedzę, nabytą w tym rozdziale, rozwiązując testowy QUIZ (online).