Linki (inaczej hiperłącza, łącza hipertekstowe, odnośniki, odsyłacze) stanowią najbardziej charakterystyczny element internetu, bez nich praktycznie sieć by nie istniała.
Co znajdziesz w tym wpisie
Jak dodać link z przekierowaniem na stronę HTML
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 (anchor):
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&cc=adres e-mail gdzie wysłać kopię&bcc=adres e-mail gdzie wysłać ukrytą kopię&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ż
- https://www.aurainweb.pl/2016/09/kotwice-stronie-html-odsylacze-edykiety/
- https://www.aurainweb.pl/2015/11/zmieniajacy-kolor-link-po-najechaniu-kursorem-css/
Źródło:
- http://webmaster.helion.pl/index.php/odsylacze
- http://www.kurshtml.edu.pl/html/odsylacz_pocztowy,odsylacze.html
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.