Z tego artykułu dowiesz się, co to jest link oraz jak go utworzyć. Warto wykorzystywać linki na swojej stronie po to, by ułatwić nawigację. Trzeba pamiętać także o tym, że linki mogą mieć wpływ na pozycjonowanie strony.
Co to jest link?
Link to odnośnik, za pomocą któremu użytkownik może przenieść się pod wskazany w nim adres. Inne nazwy dla linku to:
- odnośnik,
- odsyłacz,
- hiperłącze,
- hiperlink.
Dzięki linkom użytkownik może łatwiej poruszać się po Twojej witrynie. Możesz także przekierować internautów ze swojej strony do innego serwisu, np. Twojego partnera lub źródła, na które powołujesz się w artykule.
Odsyłacze, czyli popularne linki można podzielić na cztery kategorie:
Jak wygląda link?
Link może mieć czystą postać – wtedy po prostu klikamy w adres strony, by się na nią przenieść. O wiele częściej wykorzystywany jest anchor text – wtedy link ukrywa się pod konkretnym słowem lub wyrażeniem. Linki mogą mieć także formę graficzną – wówczas klikając w obrazek, przenosimy się do innej lokalizacji w sieci.
Odsyłacze (linki) wewnętrzne
Linki wewnętrzne odnoszą się do podstron w ramach serwisu.
Przykład:
<a href="omnie.html">Więcej informacji o Mnie</a>
Efektem tego przykładu będzie stworzenie odsyłacza do pliku omnie.html, gdzie podlinkowanym tekstem będzie „Więcej informacji o mnie”.
Odsyłacze dalekie (linki zewnętrzne)
Odsyłacze dalekie, czyli linki zewnętrzne odnoszą się do stron na innych serwisach internetowych.
Przykład:
<a href="https://home.pl/?utm_source=pomoc&utm_medium=pomoc_home&utm_campaign=pomoc_offer">Firma home.pl</a>
Przykład ten jest podobny do poprzedniego, jednakże ścieżka do pliku wygląda trochę inaczej. Rozpoczyna się ona od „https://”, który oznacza z jakiego połączenia będziesz korzystać – w tym przypadku będą to strony WWW. Jest jednak możliwość wskazania na inna usługę:
- http:// – strony WWW,
- ftp:// – serwer FTP,
- news:// – grupy dyskusyjne,
- telnet:// – zdalne podłączenie.
W poprzednim przykładzie podana była tylko nazwa pliku, do którego ma prowadzić link, ponieważ miał on przekierować do lokalizacji wewnątrz serwisu. W tym przykładzie konieczne jest podanie całego adresu URL, ponieważ link będzie kierował z jednej domeny na inną.
Link do adresu e-mail
Możesz także stworzyć link do adresu e-mail.
Przykład:
<a href="mailto:info@home.pl">Biuro Obsługi Klienta home.pl</a>
Po kliknięciu na taki link, zostanie otworzony domyślny program pocztowy.
Linki – kotwice
Kotwice umożliwiają nawigację wewnątrz jednego dokumentu.
Przykład:
<a href="#top">Powrót do góry strony</a>
Instrukcja tworzenia kotwicy w dokumencie HTML:
- Zdefiniuj kotwicę, do której będziesz linkować. W tym celu wstaw kod
<a name=”nazwa_kotwicy”>Nazwa odsyłacza</a> w odpowiednim miejscu dokumentu HTML. - Wstaw link <a href=”#nazwa_kotwicy”>Nazwa odsyłacza</a>, który po kliknięciu przesunie okno przeglądarki do miejsca gdzie zdefiniowałeś kotwicę.
Linki graficzne i mapy na grafice
Linki graficzne pozwalają „ukryć” link pod obrazkiem. Wówczas użytkownik zostanie przeniesiony na inną stronę lub do innego miejsca na stronie po kliknięciu w grafikę.
Przykład:
<a href="https://home.pl/?utm_source=pomoc&utm_medium=pomoc_home&utm_campaign=pomoc_offer"><img src="obrazek.jpg" alt="logo home"></a>
W zależności od tego, czy chcesz, by po kliknięciu w obrazek, użytkownik przeszedł do innego miejsca na podstronie, do innej podstrony w witrynie bądź do innego serwisu, wpisz ścieżkę do miejsca docelowego zgodnie z przykładami przedstawionymi wcześniej.
W kolejnej części kodu podaj ścieżkę dostępu do obrazka, a w atrybucie alt wpisz tekst alternatywny, czyli krótki opis tego, co znajduje się na grafice. To pomocne dla użytkowników, ponieważ ten tekst wyświetli się np. w sytuacji, gdy z jakiegoś powodu obrazek nie będzie mógł się załadować.
Mapy na grafice
Czasami zachodzi potrzeba umieszczenia na obrazku więcej niż jednego odsyłacza, bądź też podlinkowania tylko wybranej części grafiki. Nie można tego zrobić przy użyciu znacznika. Istnieje za to możliwość zamapowania obrazka i ustawienia odsyłaczy do tych map.
Przykład:
<img height="400" border="0" width="300" src="obrazek.jpg" usemap="#mapa" /> <br /><map name="mapa"> <area href="img01.html" coords="7, 10, 20, 20" shape="rectangle"> </area> <area href="img02.html" coords="100, 120, 25" shape="circle"> </area> <area href="img03.html" coords="241, 213, 153, 67, 138" shape="polygon"> </area> </map>
- Wstaw obrazek – zauważ, że dodaliśmy parametr usemap – określa on jakiej definicji mapy będziesz używać.
- Otwórz definicję mapy.
- Narysuj kwadracik – opcja rectangle mówi, że będziesz rysować czworobok, dlatego też jako koordynanty podaj cztery wierzchołki figury.
- circle określa, że rysujesz okrąg lub elipsę. Parametry, które podajesz to współrzędne środka figury oraz promień.
- Jest też możliwość tworzenia nieregularnych figur. Opcja polygon pozwala na tworzenie figury poprzez łączenie liniami kolejnych punktów.
- Zamknij definicję mapy.
