HTML – Odsyłacze czyli linki do innych stron lub podstron

Poniżej są opisane wszystkie typy odsyłaczy które mogą się znaleźć na stronie www.

Temat był już wcześniej poruszany na zasadzie trzech prostych argumentów. Tutaj opiszę te zgadanie na nieco szerszą skalę.

Odsyłacz do podstrony w obrębie jednego serwisu

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

Dymek narzędziowy po najechaniu na link

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

Po najechaniu na link wyświetli się dymek z napisaem „do strony głównej”

Otwarcie odsyłacza w nowym oknie

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

Odnośnik 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ę.

Definicja etykiety

<a name="nazwa_etykiety"></a>

Odwołanie do etykiety

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

Jeśli etykieta jest zdefiniowana na tej samej stronie, w innej części tekstu to używamy tylko nazwy etykiety

<a href="#nazwa_etykiety">opis odsyłacza</a>

Jeśli etykieta znajduje się na innej stronie musimy podać najpierw adres, później nazwę etykiety

<a href="ścieżka dostępu lub adres internetowy#nazwa_etykiety">opis odsyłacza</a>

Pamiętaj – wielkość liter jest ważne a etykietach.

Etykietę można również utworzyć, stosując atrybut id="identyfikator". Różnica polega na tym, że atrybut ID można użyć w stosunku do prawie wszystkich znaczników (oprócz: BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE).

Odsyłacz obrazowy

<a href="adres"><img src="ścieżka dostępu do obrazka" alt="tekst alternatywny" /></a>

Usunięcie obramowanie wokół grafiki

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

Pamiętaj iż w przypadku tej ramki lepiej stosować style.

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.

Mapa odsyłaczy po stronie serwera

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

Odsyłacz do adresu internetowego

<a href="http://adres strony">opis</a>

Odsyłacz do adresu mailowego

<a href="mailto:adres e-mail">opis</a>

Dodatkowe parametry:

Tytuł maila

<a href="mailto:adres e-mail?subject=tytuł listu">opis</a>

Kopia listu

<a href="mailto:adres e-mail?cc=adres e-mail gdzie wysłać kopię">opis</a>

Ukryta kopia

<a href="mailto:adres e-mail?bcc=adres e-mail gdzie wysłać ukrytą kopię">opis</a>

Tekst w mailu

<a href="mailto:adres e-mail?body=tu wpisz tekst">opis</a>

Wysłanie listu do kilku adresatów

<a href="mailto:pierwszy adres e-mail;drugi adres e-mail;trzeci adres e-mail">opis</a>

Połączenie powyższych elementów 🙂

<a href="mailto:pierwszy adres e-mail;drugi adres e-mail;trzeci adres e-mail?subject=tytuł listu&cc=adres e-mail gdzie wysłać kopię&bcc=adres e-mail gdzie wysłać ukrytą kopię&body=tutaj wpisz treść listu">opis</a>

Odsyłacz do FTP

<a href="ftp://ftp.adres">opis</a>
Odsyłacz ftp z podaniem loginu
<a href="ftp://użytkownik@ftp.adres">opis</a>

Odsyłacz ftp z podaniem loginu i hasła

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

Jeśli nie podasz hasła, przeglądarka lub klient ftp sam zapyta o nie. Udostępniając hasło w linku, dajesz dostęp do serwera ftp każdemu kto na niego kliknie.

KOMUNIKATORY INTERNETOWE

GG

<a href="gg:numer">opis</a>
<img src="http://status.gadu-gadu.pl/users/status.asp?id=numer&styl=styl" alt="Gadu-Gadu" />

Tlen

<a href="tlen://chat|użytkownik|">opis</a>
<img src="http://status.tlen.pl/?u=użytkownik&t=styl" alt="Tlen" />

Skype

<a href="skype:użytkownik">opis</a>
<a href="skype:użytkownik?akcja">opis</a>

Akcje:

  • call – rozmowa głosowa
  • chat – rozmowa tekstowa
  • add – dodaj do kontaktów
  • userinfo – profil użytkownika
  • voicemail – poczta głosowa
  • sendfile – wyślij plik
<img src="http://mystatus.skype.com/ikony/użytkownik" alt="Skype" />

Jaber

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

ICQ

<a href="icq:numer">opis</a>
<img src="http://web.icq.com/whitepages/online?icq=numer&amp;img=obrazek" alt="ICQ" />

Yahoo Mesenger

<a href="ymsgr:sendim?użytkownik">opis</a>
<img src="http://opi.yahoo.com/online?u=użytkownik&m=g&t=typ" alt="Yahoo! Messenger" />

Aim

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

Odsyłacz do grup dyskusyjnych

<a href="news://serwer/nazwa grupy">opis</a>

Odsyłacz NNTP

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

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

Bezpieczne połączenie SSL

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

Odsyłacz do skryptu

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

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

Podstawowy odsyłacz obrazkowy

<a href="adres"><img src="ścieżka dostępu do obrazka" alt="tekst alternatywny" /></a>