Linki (inaczej hiperłącza, łącza hipertekstowe, odnośniki, odsyłacze) stanowią najbardziej charakterystyczny element Internetu, bez nich praktycznie sieć by nie istniała.
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” czyli po mailto 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):
- przykladowy@adres-poczty.pl
- adres-kopi@kopia.pl
<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)
- przykladowy@adres-poczty.pl
- adres-kopi@kopia.pl – adres e-mail gdzie wysłać ukrytą kopię
<a href="mailto:przykladowy@adres-poczty.pl?bcc=adres-kopi@kopia.pl">opis</a>W treści listu pojawi się wpisany tekst
- przykladowy@adres-poczty.pl
- treść wiadomości pisze się po
body=
<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 klikalny numer telefonu w HTML. Okazuje się że choć funkcja może wydawać się mało przydatna 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">123456789</a>Pamiętaj, że zawsze możesz dodać do linka np. grafikę z telefonem. Poprawi to nie tylko wygląd, ale także ułatwi kontakt.
Nie ma też problemu by w HTML dodać numer telefonu po zagranice polski lub po prostu z numerem kierunkowym. Może to wyglądać tak:
<a href="tel:+48612222222">+48612222222</a>Warto przeczytać również
- Dodawanie kotwicy na stronie (pomocne przy przechodzeniu do różnych sekcji strony)
- Zmiana koloru linka po najechaniu kursorem myszy
Ź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ą.