kursy tutoriale
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ę.
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ę.
Zasadniczo każdy link składa się z:
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ć.
Przykład zastosowania:
<a href="nazwa_strony.html" target="_blank">Jeszcze inna strona</a>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>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):
<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:przykladowy@adres-poczty.pl?bcc=adres-kopi@kopia.pl">opis</a>W treści listu pojawi się wpisany tekst
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>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>Źródło:
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…