Odsyłacze HTML, bardziej znane jako linki, zwane także odnośnikami lub hiperłączami są łącznikiem pomiędzy dokumentami HTML serwisu internetowego. Innymi słowy umożliwiają przejście pomiędzy kolejnymi podstronami, a także jej częściami (kotwica).
W tym artykule omówię, jak tworzyć odsyłacze HTML, jak stylizować je za pomocą CSS oraz jak korzystać z różnych funkcji linków.
Tworzenie odsyłaczy
Aby utworzyć podstawowy odsyłacz, użyjemy znacznika <a> wraz z atrybutem href, który określa adres docelowy, czyli stronę, do której chcemy się odsyłać.
Oto przykład prostego odsyłacza:
<a href="https://kurshtmlcss.pl">Odnośnik do strony głównej kursu</a>W tym przykładzie:
<a>– oznacza rozpoczęcie odsyłacza.href– to atrybut, który określa adres URL docelowej strony.Odnośnik do strony głównej kursu– to tekst wyświetlany jako link.
Atrybuty odsyłaczy
Odsyłacze HTML mają różne atrybuty, które nadają im różne funkcje i właściwości. Oto kilka ważnych atrybutów:
href– określa adres docelowy odsyłacza.target– określa, gdzie zostanie otwarty odsyłacz (np._blankdla nowej karty).rel– określa relację między bieżącym dokumentem a dokumentem docelowym.- rel=”nofollow” – ta wartość informuje wyszukiwarki internetowe, aby nie śledziły linku i nie indeksowały strony, do której prowadzi link. Jest to często stosowane w przypadku linków sponsorowanych lub niezaufanych.
- rel=”noopener”– z kolei ta wartość zapobiega atakom typu tabnabbing, zabezpieczając użytkowników przed przekierowaniem na złośliwe strony po kliknięciu linku i otwarciu nowej karty. Jest to szczególnie istotne, gdy link otwiera się w nowej karcie (
target="_blank"). - rel=”noreferrer” – podobnie jak
noopener, wartośćnoreferrerzapobiega przekazywaniu informacji o przeglądarce użytkownika do strony docelowej. Zapewnia to dodatkową warstwę bezpieczeństwa, ograniczając możliwość śledzenia użytkowników przez strony docelowe. - rel=”nofollow noopener noreferrer” – często stosowana kombinacja wartości, która łączy oba zabezpieczenia –
noopenerinoreferrer, zapewniając kompleksową ochronę przed atakami tabnabbingu i ograniczając przekazywanie danych użytkownika.
title– dodaje dodatkowy tekst wyświetlany po najechaniu myszką na odsyłacz.
Otwieranie linku w nowej karcie
Czasami chcemy, aby link otwierał się w nowym oknie lub karcie przeglądarki, zachowując aktualną stronę otwartą. Aby to osiągnąć, możemy dodać atrybut target="_blank" do naszego znacznika <a>:
<a href="https://www.example.com" target="_blank">Otwórz w Nowej Karcie</a>Linki do stron lokalnych
Możesz również tworzyć linki do innych stron w swoim projekcie internetowym, używając ścieżki względnej do pliku HTML.
<a href="inne-strony/moja-strona.html">Moja Strona</a>W tym przykładzie, zakładając, że plik HTML moja-strona.html znajduje się w folderze inne-strony w tym samym katalogu, link spowoduje nawigację do tej konkretnej strony po kliknięciu.
Linki do innych lokalizacji na stronie – kotwica
Linki mogą także przenosić użytkownika do innych lokalizacji na tej samej stronie, co jest szczególnie przydatne w przypadku długich dokumentów lub stron internetowych. Aby to zrobić, musimy użyć tzw. „kotwic” (ang. anchors) i odpowiednich identyfikatorów:
<a href="#sekcja2">Przejdź do sekcji 2</a>
<h2 id="sekcja2">Sekcja 2</h2>
<p>Tutaj znajduje się treść sekcji 2.</p>W powyższym przykładzie, po kliknięciu linku „Przejdź do sekcji 2”, użytkownik zostanie przewinięty do sekcji z identyfikatorem sekcja2.
W poniższym przykładzie kliknięcie na odnośnik umożliwi przeniesienie na górę strony do pierwszego zdania.
Linki z obrazkami
Możesz również tworzyć linki, które zawierają obrazki, zamiast tekstu. W takich przypadkach, obrazek staje się klikalny, prowadząc użytkownika do określonej lokalizacji.
<a href="https://www.example.com">
<img src="obrazki/moja-ikona.png" alt="Moja Ikona">
</a>W tym przykładzie, obrazek moja-ikona.png zostanie wyświetlony jako klikalny link, prowadzący do https://www.example.com.
Poniżej praktyczny przykład, w którym dodałem logo kursu, którego kliknięcie przeniesie do strony głównej kursu.
Linki do plików
Linki mogą również prowadzić do różnych rodzajów plików, takich jak dokumenty PDF, obrazy, pliki dźwiękowe, itp. Wystarczy podać odpowiedni adres URL do pliku w atrybucie href. Na przykład:
<a href="plik.pdf">Pobierz plik PDF</a>W powyższym przykładzie, kliknięcie na link „Pobierz plik PDF” spowoduje pobranie pliku PDF o nazwie „plik.pdf”.
Użycie odsyłaczy w listach
Odsyłacze możemy również używać wewnątrz list, co umożliwi nam tworzenie nawigacji lub menu. Na przykład:
<ul>
<li><a href="#sekcja1">Przejdź do Sekcji 1</a></li>
<li><a href="#sekcja2">Przejdź do Sekcji 2</a></li>
<li><a href="#sekcja3">Przejdź do Sekcji 3</a></li>
</ul>Odsyłacz pocztowy
Aby utworzyć odsyłacz pocztowy, używamy znacznika <a> tak samo jak w przypadku linków, ale w atrybucie href umieszczamy specjalny protokół mailto: oraz adres e-mail docelowego odbiorcy. Możemy również dodać dodatkowe opcje, takie jak temat e-maila, treść wiadomości itp.
<a href="mailto:example@example.com">Wyślij e-mail</a>Przykład Wyślij e-mail
W powyższym przykładzie, po kliknięciu na link „Wyślij e-mail”, program pocztowy użytkownika zostanie otwarty, a w polu odbiorcy będzie widoczny adres e-mail example@example.com.
Możemy również dodawać dodatkowe parametry do linku mailto, takie jak temat wiadomości (subject) czy treść (body). Oto przykład z dodanym tematem wiadomości:
<a href="mailto:adres@email.com?subject=Temat wiadomości">Wyślij e-mail</a>W tym przypadku, po kliknięciu na link, program pocztowy otworzy się z adresem „adres@email.com” w polu „Do” oraz wypełnionym polem „Temat” o treści „Temat wiadomości”.
Dzięki temu, po kliknięciu na link, otworzy się program pocztowy użytkownika z wypełnionym polem tematu i treścią wiadomości.
Odsyłacze w formularzach
Odsyłacze mogą być również używane wewnątrz formularzy HTML, co pozwala na nawigację użytkowników do innych stron w ramach interakcji z formularzem.
<form action="submit.php" method="post">
<input type="text" name="email" placeholder="Twój Email">
<input type="submit" value="Wyślij">
<a href="rejestracja.html">Zarejestruj się</a>
</form>Stylizacja linków za pomocą CSS
Linki mogą być stylizowane za pomocą CSS, co pozwala na dostosowanie ich wyglądu do projektu strony internetowej. Możemy zmieniać kolor, rozmiar, czcionkę i wiele innych właściwości.
<style>
/* Stylizacja linku */
a {
color: blue; /* Kolor tekstu */
text-decoration: none; /* Usunięcie domyślnego podkreślenia */
}
/* Stylizacja linku po najechaniu myszką */
a:hover {
color: red; /* Zmiana koloru tekstu na czerwony */
text-decoration: underline; /* Podkreślenie po najechaniu myszką */
}
</style>
<a href="https://www.example.com">Stylizowany link</a>Odsyłacze HTML – podsumowanie
Linki są nieodłączną częścią każdej witryny internetowej, umożliwiając użytkownikom łatwe przemieszczanie się między różnymi stronami. Teraz, kiedy już znasz podstawy tworzenia odsyłaczy w HTML, możesz zacząć wykorzystywać je do tworzenia interaktywnych i łatwych w nawigacji stron internetowych. Warto również eksperymentować z różnymi stylami i technikami, aby dopasować odsyłacze do estetyki swojej strony.