Webmastering i sieci IT

Odsyłacze

Za pomocą odsyłaczy możemy ze sobą powiązać przeróżne zasoby w sieci. Począwszy od poruszania się między stronami witryny, pobierania plików, uruchamiania poczty czy przeniesienia się na inne strony www.
Odsyłacz (inaczej: hiperłącze, link, odnośnik) jest to wskazanie jakiegoś innego miejsca. Można to porównać do funkcjonowania katalogu bibliotecznego. Karta katalogowa informuje nas gdzie dana książka się znajduje (np. regał, półka), z tym, że samodzielnie musimy do niej iść. Natomiast odsyłacz automatycznie po kliknięciu przenosi nas w wybrane miejsce.

Etykiety - odwołanie do innego miejsca w tekście strony. Na jej podstawie można zbudować spis treści na początku dokumentu i odsyłać użytkownika do poszczególnych fragmentów strony.

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

Odsyłacz (hiperłącze, link) - struktura służąca do odsyłania użytkownika w inne miejsce po kliknięciu na niego kursorem.
Ogólna zasada budowy odsyłacza:

<a href="/adres_docelowy">wyświetlany tekst</a>

Przykład:

<a href="http://www.e-drink.eu/">Sztuka barmańska</a>
Sztuka barmańska

Przykłady innych odsyłaczy:

Odsyłacz do innej strony HTML (w tym samym katalogu):

<a href="/css.html">Kurs CSS</a>

Odsyłacz do innej strony w katalogu podrzędnym

<a href="/kursy/css.html">Kurs CSS</a>

Odsyłacz do strony w innym katalogu, równorzędnym w hierarchii:

<a href="/../kursy/php.html">Kurs PHP</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>

Odsyłacz do pliku graficznego JPG

<a href="/rysunek.jpg">Plik graficzny JPG</a>

Odsyłacz do pliku dźwiękowego

<a href="/../muzyka/melodia.mp3">Plik dźwiękowy</a>

Odsyłacz do pliku PDF

<a href="/gazeta.pdf">Artykuł PDF</a>

Odsyłacz do etykiety na tej samej stronie

<a href="#nazwa_etykiety">Tekst</a>

Odsyłacz do etykiety na innej stronie

<a href="/strona.html#nazwa_etykiety">Tekst</a>

Odsyłacze do poczty elektronicznej:

Często stosuje się odsyłacze o konstrukcja pozwalająca czytelnikowi strony wysłać pocztę elektroniczną.

<a href="/mailto:imie_nazwisko@adres">Wiadomość</a>

Odsyłacz e-mailowy można rozbudować o domyślne wartości dla tytułu, treści maila lub większą liczbę użytkowników:

W polu tematu listu pojawiła się jakaś domyślna treść:

<a href="mailto: Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. ?subject=Ważna informacja">

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

<a href="mailto: Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. ?cc= Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. ">

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

<a href="/ Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. ?bcc= Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. ">

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

<a href="mailto: Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. ?body=Witam, piszę do Pana w sprawie...">

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

<a href="mailto: Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. ; Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. ">

Powstaje pytanie, czy można połączyć wszystkie te elementy razem. Można i robi się to stosując jako łącznik ciąg &amp;.

<a href="mailto: Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. ?cc= Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. &amp;
bcc= Adres poczty elektronicznej jest chroniony przed robotami spamującymi. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć. &amp;subject=Ważna wiadomość&amp;
body=Witajcie Panowie">Wyślij e-mail</a>

Mapy odsyłaczy - definiowanie odsyłaczy na obiektach graficznych (np. pliki gif, jpg, itp)

Przykład polecenia:

• Pierwszy wiersz polecenia przywołuje obrazek. USEMAP informuje przeglądarkę, że obrazek "rysunek.jpg" jest mapowany, i że mapa nosi nazwę "mapa".
• Drugi wiersz zapoczątkowuje definicję mapy.
• Wiersze 3-6 wprowadzają cztery kolejne fragmenty mapy odsyłaczy, odpowiadające prostokątom. 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.

Przykład:

Oprócz prostokątów (kwadratów) możemy tworzyć mapy z użyciem okręgów i obszarów nieregularnych.

W przypadku okręgu stosujemy polecenie:

<area shape="circle" coords=" 25, 25, 19" href="/strona.html">

Pierwsze dwie liczby informują o położeniu środka okręgu, ostatnia - o długości promienia.

Używając obszaru nieregularnego musimy podać polecenie, zawierające przynajmniej trzy pary współrzędnych, definiujących "rogi" obszaru:

<area shape="polygon" coords=" 23, 33, 82, 16, 82, 80" href="/strona.html">