kursy tutoriale

Dodawanie linków (hiperłączy) w treści strony [HTML]

Czas czytania: 3 minut

Linki (inaczej hiperłącza, łącza hipertekstowe, odnośniki, odsyłacze) stanowią najbardziej charakterystyczny element internetu, bez nich praktycznie sieć by nie istniała.

Najczęściej składają się z krótkich fraz, haseł, obrazków po kliknięciu których np. zostajemy przeniesieni na inną stronę lub do innego fragmentu witryny. W tym wpisie omówię jedynie tematykę samych hiperłączy. Dlatego jeśli szukasz informacji np. o łączach (odsyłacze i etykiety) takich jak na stronach typu One page zapraszam cię do mojego innego wpisu. Gdzie omawiam dokładnie tą tematykę.

Kilka prostych przykładów linków:

Poniżej umieściłam przykładowe typy linków:

Hiperłącze prowadzące do innej strony mieszczącej się w tym samym katalogu:

<a href="nazwa_strony.html">Jakaś strona</a>

Odsyłacz przenoszący do innej strony znajdującej się w katalogu podrzędnym czyli niżej:

<a href="katalog_podrzędny/nazwa_strony.html">Inna strona</a>

Odnośnik do strony znajdującej się innym katalogu, równorzędnym w hierarchii, znajdującym się obok katalogu rodzica:

<a href="../katalog_równorzędny/nazwa_strony.html">Jeszcze inna strona</a>

Jak to działa w praktyce: Dwie kropki w adresie umieszczone przed znakiem slash informują przeglądarkę by „zajrzeć wyżej” w hierarchii katalogów, następnie „zejść” do nowego katalogu o nazwie „katalog_równorzędny”  i wywołać żądaną stronę.

Budowa prostego linka

Zasadniczo każdy link składa się z:

  • <a></a> – znacznik otwarcia i zamknięcia
  • href – miejsce gdzie wpisujemy co chcemy otworzyć

Jak zapewne każdy zauważył linki mogą otwierać się na różne sposoby. W przypadku zwykłych linków odpowiada za to atrybut target. W zależności od tego jaką przyjmuje wartość link będzie się inaczej otwierać.

  • _self – otwiera dokument / stronę w tej samej karcie, w której dokonaliśmy kliknięcia
  • _blank – otwiera dokument w nowej karcie
  • _parent – otwiera połączony dokument w ramce nadrzędnej
  • _top – otwiera dokument w całym oknie

Przykład zastosowania:

<a href="nazwa_strony.html" target="_blank">Jeszcze inna strona</a>

Hiperłącza prowadzące do różnego typu plików

Linki możemy dodawać także do innych obiektów takich jak obrazki, pliki.

Link do pliku tekstowego TXT – w tym przypadku plik txt zastanie zapisany na naszym komputerze

<a href="plik_tekstowy.txt">Plik tekstowy TXT</a>

Link do pliku graficznego GIF – w zalerznosi od przeglądarki grafika otworzy się w oknie lub zostanie pobrana

<a href="plik_graficzny.gif">Plik graficzny GIF</a>

Odnośnik do pliku dźwiękowego zapisanego np. mid

<a href="pinkpant.mid">Plik dźwiękowy</a>

Link do pliku PDF – zależności od ustawień naszej przeglądarki plik zostanie pobrany lub otworzy się na komputerze

<a href="licence.pdf">dokument PDF</a>

Dodanie linka do adresu e-mail – odsyłacz pocztowy

Jednym z ułatwień (dla niektórych utrudnień) jakie można utworzyć na stronie z pomocą linków są odsyłacze pocztowe. Utworzenie takiego obiektu, jest stosunkowo proste i użyteczne. Po kliknięciu w tego typu link na komputerze otwiera się zainstalowany program pocztowy. Dla części użytkowników może to być więc bardzo użyteczne, nie muszą bowiem przekopiowywać a pole z odbiorcą samo się uzupełni. Dla reszty może to być nieco irytujące.

<a href="mailto:przykladowy@adres-poczty.pl">przykladowy@adres-poczty.pl</a>

W miejscu “przykladowy@adres-poczty.pl” umieszczamy kontaktowy adres e-mail. Z kolei zamiast “link z twoim adresem e-mail” możemy go powtórzyć lub wpisać inny dowolny tekst np. kontakt.

Jak to działa? – Jeśli korzystamy z różnego typu programów pocztowych (np. Outlook ) to po kliknięciu w taki link powinna się otworzyć nowa karta z “Nową wiadomością”.  Będzie ona miała wypełniony adres odbiorcy dokładnie tym co w linku.


W treści linka możemy również umieści tytuł wiadomości e-mail, po kliknięciu zostanie on umieszczony w odpowiednim polu

<a href="mailto:przykladowy@adres-poczty.pl?subject=tytuł listu">przykladowy@adres-poczty.pl</a>

Kopia listu zostanie wysłana do właściciela drugiego adresu (2 adresy e-mail)

<a href="mailto:przykladowy@adres-poczty.pl?cc=adres-kopi@kopia.pl">przykladowy@adres-poczty.pl</a>

Ukryta kopia (żaden odbiorca listu nie zobaczy adresu umieszczonego w bcc)

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

W treści listu pojawi się wpisany tekst

<a href="mailto:przykladowy@adres-poczty.pl?body=tu wpisz tekst">przykladowy@adres-poczty.pl</a>

List zostanie wysłany do kilku wpisanych 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&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>

Interaktywny numer telefonu

Z pewnością zastanawiasz się teraz po co ci taka funkcja na stronie. Okazuje się że choć funkcja jest mało przydatna i praktycznie nie wykorzystywana na komputerze to na telefonie (smartphone) ułatwia skontaktowanie się z tobą potencjalnym klientom. Nie muszą oni w tedy wchodzić w kontakt i przepisywać numeru telefonu, po prostu klikają w link i dzwonią.

Zasada działania jest podobna jak w przypadku pocztowego. Jego funkcją jak nazwa wskazuje jest linkowanie numeru telefonu.

<a href="tel:123456789">opis</a>

Warto przeczytać również

Źródło:

http://webmaster.helion.pl/index.php/odsylacze

http://www.kurshtml.edu.pl/html/odsylacz_pocztowy,odsylacze.html