Kurs HTML - HTML - Odsy³acze

Strona 1

Kurs HTML - HTML - Odsyłacze

2008-02-07 18:45:46

http://www.kurshtml.boo.pl/html/odsylacze.print.html

Odsyłacze

W tym rozdziale dowiesz się...

Jak stworzyć przejście do innej strony WWW (linki)?
W jaki sposób przenieść uŜytkownika do jednej z podstron serwisu?
Jak stworzyć formę elektronicznej zakładki na stronie?
W jaki sposób wstawić linki do innych stron w sieci?
Jak wstawić adres e-mail na stronie WWW?
Jak zrobić bezpośredni odsyłacz do pliku na serwerze FTP?
W jaki sposób wstawić na stronie WWW odsyłacz: Gadu-Gadu, Tlen, Jabber, Skype, ICQ, AIM, Yahoo!
Messenger? Jak wstawić status Gadu-Gadu, Tlen, Jabber itp. na stronie WWW?
Jak wstawić na stronie WWW odsyłacz: grupy dyskusyjnej (news), NNTP, newsrc, telnet, SSH, SSL,
JavaScript, Gopher, WAIS?
W jaki sposób wstawić na stronie WWW odnośnik (link, hiperłącze, odsyłacz hipertekstowy) obrazkowy
(graficzny), czyli klikalny przycisk?

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ć - zobacz: Kolor odsyłaczy) - 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

Strona 2

Kurs HTML - HTML - Odsyłacze

2008-02-07 18:45:46

http://www.kurshtml.boo.pl/html/odsylacze.print.html

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.

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

[zobacz: Znaki specjalne]. Nie dotyczy to jednak tekstu, w którym znajdują się: "%" (procent) lub "-" (myślnik). W
takim przypadku moŜna uŜyć blokady przełamania wiersza.

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.

Strona 3

Kurs HTML - HTML - Odsyłacze

2008-02-07 18:45:46

http://www.kurshtml.boo.pl/html/odsylacze.print.html

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 główna</a>

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

Strona główna

Pasek statusu (stanu)

Po wskazaniu odsyłacza myszką, w pasku statusu przeglądarki domyślnie pojawia się adres strony, do której ma
nastąpić przeniesienie (atrybut HREF). MoŜna jednak to zmienić i sprawić, aby pojawił się tam inny napis. NaleŜy
jednak pamiętać, Ŝe na pasku statusu nie zmieści się zbyt długi tekst.

<a href="../index.html" onmouseover="window.status='Do strony głównej'; return true"

onmouseout="window.status=''; return true">Strona główna</a>

WskaŜ poniŜszy odsyłacz myszką i popatrz na pasek stanu przeglądarki:

Strona główna

Nowe okno

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

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

UWAGA!
Atrybut TARGET nie wchodzi w skład Strict DTD. Natomiast moŜna go bez przeszkód uŜywać wykorzystując
Transitional DTD.

Istnieją co najmniej dwie drogi rozwiązania tego problemu:

1. JavaScript

Strona 4

Kurs HTML - HTML - Odsyłacze

2008-02-07 18:45:46

http://www.kurshtml.boo.pl/html/odsylacze.print.html

Tworzymy plik o dowolnej nazwie z rozszerzeniem

*.js

- np.

target.js

i zapisujemy w nim

następujący kod:

function aTarget(el, name)

{

var wnd = window.open(typeof el == 'string' ? el : el.href, typeof name != 'undefined' ?

name : '',

'menubar=yes,toolbar=yes,location=yes,directories=no,status=yes,scrollbars=yes,resizable=yes');

if (!wnd) return false;

wnd.focus();

return true;

}

Następnie w nagłówku dokumentu (sekcja HEAD) umieszczamy:

W wyróŜnionym miejscu naleŜy podać lokalizację utworzonego przed momentem pliku

*.js

. JeŜeli

znajduje się w tym samym katalogu, wystarczy podać jego nazwę wraz z rozszerzeniem.
Ostatecznie linki, które mają się otwierać w nowym oknie, tworzymy następująco:

Przykład:

www.google.pl w nowym oknie

2. DTD

Wykorzystując modularyzację języka XHTML, moŜna utworzyć własną wersję DTD, czyli plik zawierający
definicję wszystkich znaczników i atrybutów języka, łączącą w sobie podstawową wersję DTD XHTML oraz
moduł XHTML Target 1.0, w którym zawiera się atrybut

target="..."

. NaleŜy utworzyć plik pod

nazwą

xhtml11-target1.dtd

i zapisać go na swoim koncie FTP w katalogu

DTD

(uwaga na wielkość

liter!):

<!ENTITY % XHTML.version

"-//W3C//DTD XHTML 1.1 + XHTML Target 1.0//EN">

<!ENTITY % xhtml11.dtd

PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

%xhtml11.dtd;

<!ENTITY % xhtml-target.mod

PUBLIC "-//W3C//ELEMENTS XHTML Target 1.0//EN"

"http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-target-1.mod">

%xhtml-target.mod;

Pomysł: Dave H

Dokumenty XHTML tworzymy przy uŜyciu następującego szablonu:

<?xml version="1.0" encoding="iso-8859-2"?>

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.1 + XHTML Target 1.0//EN"

"URL/DTD/xhtml11-target1.dtd">

Strona 5

Kurs HTML - HTML - Odsyłacze

2008-02-07 18:45:46

http://www.kurshtml.boo.pl/html/odsylacze.print.html

<head>

<title>Tytuł dokumentu</title>

</head>

<body>

Tu wpisuje si

tre

ść

strony

</body>

</html>

Jako URL/DTD trzeba wpisać pełny adres do katalogu, w którym znajduje się utworzony przed chwilą plik

xhtml11-target1.dtd

, np.

http://www.example.com/DTD

NaleŜy przy tym zauwaŜyć, Ŝe mamy tutaj do czynienia z dokumentem XHTML 1.1, a więc nie moŜna w
nim stosować znaczników i elementów zdeprecjonowanych! Ponadto powinniśmy zadbać o przesyłanie
takiego dokumentu z odpowiednim typem MIME. W rozdziale Typy MIME dokumentów XHTML dowiesz
się więcej na ten temat. Znajdziesz tam równieŜ skrypt PHP negocjacji zawartości, dzięki któremu
dokumenty XHTML mogą się wyświetlać poprawnie w kaŜdej przeglądarce (Microsoft Internet Explorer 7.0
nie potrafi wyświetlić dokumentu XHTML z typem MIME application/xhtml+xml!). Dla omawianego tutaj
rozwiązania, wystarczy ustawić w tym skrypcie preferowaną wersję DTD jako

XHTML 1.1

i drugą

preferowaną DTD (w przypadku braku pełnej interpretacji XHTML 1.1) -

XHTML 1.0 Transitional

a następnie w pliku "

mime/XHTML 1.1.inc.php

" zapisać:

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.1 + XHTML Target 1.0//EN"

"URL/DTD/xhtml11-target1.dtd">

<head>

Opis instalacji znajdziesz we wskazanym wcześniej rozdziale. Trzeba jednak zdawać sobie sprawę, Ŝe w
przestarzałych przeglądarkach (np. MSIE 7.0) nie uzyskamy w ten sposób XHTML 1.1 ani
XHTML 1.0 Strict! W takim przypadku skrypt automatycznie dobierze XHTML 1.0 Transitional, poniewaŜ
tylko w nim domyślnie moŜna wykorzystywać atrybut

target="..."

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:

Strona 6

Kurs HTML - HTML - Odsyłacze

2008-02-07 18:45:46

http://www.kurshtml.boo.pl/html/odsylacze.print.html

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 name="nazwa_etykiety">(opis etykiety)</a>

lub

<a name="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 name="nazwa_etykiety">(opis etykiety)</a>

We wszystkich przypadkach

<a name="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 name="...

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 name="...

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

UWAGA! Bardzo waŜne: w nazwach etykiet lepiej nie uŜywać:

wielkich liter
znaków, np.:

\ / : * ? " < > |

Strona 7

Kurs HTML - HTML - Odsyłacze

2008-02-07 18:45:46

http://www.kurshtml.boo.pl/html/odsylacze.print.html

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 "#do_adresu_internetowego" na tej stronie):
Do adresu internetowego

Odsyłacz drugiego rodzaju (do etykiety "#paragraf" na stronie "tekst.html" - spójrz na pasek stanu przeglądarki po
wskazaniu odsyłacza myszką):
Paragraf

Do adresu internetowego

(w obrębie całego Internetu)

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

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)

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ść

Strona 8

Kurs HTML - HTML - Odsyłacze

2008-02-07 18:45:46

http://www.kurshtml.boo.pl/html/odsylacze.print.html

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

Wyślij list do autora kursu HTML

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:

// <![CDATA[

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

Strona 9

Kurs HTML - HTML - Odsyłacze

2008-02-07 18:45:46

http://www.kurshtml.boo.pl/html/odsylacze.print.html

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!

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ł

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

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

5. List zostanie wysłany do kilku podanych adresatów

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&cc=adres e-mail gdzie wysła

kopi

&bcc=adres e-mail gdzie wysła

ukryt

kopi

&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

iso-8859-2

, zamiast polskich liter mogą pojawić się zupełnie nieprzewidziane znaki. Na dodatek istnieją

widoczne róŜnice kodowania znaków np. między Windows 98 a Windows XP i praktycznie nie da się dobrać jednej

Strona 10

Kurs HTML - HTML - Odsyłacze

2008-02-07 18:45:46

http://www.kurshtml.boo.pl/html/odsylacze.print.html

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

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 równoznacze 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

Status uŜytkownika

Strona 11

Kurs HTML - HTML - Odsyłacze

2008-02-07 18:45:46

http://www.kurshtml.boo.pl/html/odsylacze.print.html

gdzie jako styl naleŜy podać liczbę

. JeŜeli podamy

, zamiast obrazka zostanie zwrócona liczba

odzwierciedlająca status uŜytkownika:

- "niedostępny",

- "dostępny",

- "zaraz wracam".

Tlen

<a href="tlen://chat|u

ytkownik|">opis</a>

Status uŜytkownika

<img src="http://status.tlen.pl/?u=u

ytkownik&t=styl" alt="Tlen" />

gdzie jako styl naleŜy podać liczbę

lub

Jabber

<a href="xmpp:u

ytkownik@serwer">opis</a>

Status uŜytkownika

<img src="http://edgar.netflint.net/status.php?jid=u

ytkownik@

serwer&type=typ&iconset=ikony" alt="Jabber" />

type

html

- (domyślnie) identyfikator, obrazek statusu i opis statusu

text

- status i opis statusu

image

- obrazek statusu

ikony

Zestaw ikon:

gabber

stellar

dudes

icq

licq

phpbb

invision

frickenhuge

Aby status wyświetlał się poprawnie, naleŜy w swoim komunikatorze dodać do kontaktów uŜytkownika edgar@
jabber.netflint.net po czym go autoryzować.

JeŜeli podany powyŜej sposób odczytu statusu nie działa poprawnie, moŜesz skorzystać z bota Elmer. Pamiętaj, aby
dokładnie wykonać wszystkie instrukcje podane na wymienionej stronie, inaczej wskaźnik statusu nie będzie
działał!

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

Strona 12

Kurs HTML - HTML - Odsyłacze

2008-02-07 18:45:46

http://www.kurshtml.boo.pl/html/odsylacze.print.html

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.

ICQ

Status uŜytkownika

gdzie jako obrazek naleŜy podać liczbę od

AIM

<a href="aim:goim?screenname=u

ytkownik&message=wiadomo

ść

">opis</a>

Status uŜytkownika

<img src="http://big.oscar.aol.com/u

ytkownik?on_url=http://www.aim.com/

remote/gr/MNB_online.gif&off_url=http://www.aim.com/remote/gr/MNB_
offline.gif" alt="AIM" />

Yahoo! Messenger

<a href="ymsgr:sendim?u

ytkownik">opis</a>

Status uŜytkownika

<img src="http://opi.yahoo.com/online?u=u

ytkownik&m=g&t=typ" alt="Yahoo!

Messenger" />

gdzie jako typ naleŜy podać liczbę

lub

Inne

Odsyłacz do grup dyskusyjnych

Strona 13

Kurs HTML - HTML - Odsyłacze

2008-02-07 18:45:46

http://www.kurshtml.boo.pl/html/odsylacze.print.html

1. Serwer domyślny:

2. Wskazany serwer:

3. Wskazana grupa na podanym serwerze:

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

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

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.

Strona 14

Kurs HTML - HTML - Odsyłacze

2008-02-07 18:45:46

http://www.kurshtml.boo.pl/html/odsylacze.print.html

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

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 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ł, a całą transmisja będzie
szyfrowana. 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ć. Nie naleŜy jednak łączyć się w ten sposób z kaŜdym dokumentem
poniewaŜ szyfrowanie zabiera trochę czasu i strona wczytuje się wolniej. 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).

Odsyłacz do skryptu

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

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

Strona 15

Kurs HTML - HTML - Odsyłacze

2008-02-07 18:45:46

http://www.kurshtml.boo.pl/html/odsylacze.print.html

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>

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

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

Strona 16

Kurs HTML - HTML - Odsyłacze

2008-02-07 18:45:46

http://www.kurshtml.boo.pl/html/odsylacze.print.html

Przykład:

Atrybut BORDER jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

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

- współrzędna pozioma lewego-górnego wierzchołka prostokąta

- współrzędna pionowa lewego-górnego wierzchołka

- współrzędna pozioma prawego-dolnego wierzchołka prostokąta

- 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

" - długość promienia

Strona 17

Kurs HTML - HTML - Odsyłacze

2008-02-07 18:45:46

http://www.kurshtml.boo.pl/html/odsylacze.print.html

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 (X)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:

Aby usunąć obramowanie wokół obrazka, naleŜy podać atrybut

border="0"

dla znacznika

<img />

Przykład:

Quiz

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