Tworzenie stron internetowych często zaczyna się od podstaw, a jednym z najważniejszych elementów są hiperłącza. Dzięki nim możemy łączyć różne strony, pliki lub zasoby w sieci. Jeśli zastanawiasz się, jak zrobić hiperłącze w HTML, ten artykuł pokaże Ci krok po kroku, jak to zrobić.
Co to jest hiperłącze?
Hiperłącze (ang. hyperlink) to element na stronie internetowej, który po kliknięciu przenosi użytkownika do innej strony, pliku lub miejsca na tej samej stronie. W HTML (HyperText Markup Language) do tworzenia hiperłączy używamy znacznika <a>, który oznacza „anchor” (kotwica). To właśnie ten znacznik pozwala tworzyć połączenia między zasobami.
Jak stworzyć podstawowe hiperłącze w HTML?
Aby zrobić hiperłącze, używamy znacznika <a> oraz atrybutu href, który określa adres URL (Uniform Resource Locator) strony lub zasobu, do którego ma prowadzić link. Oto prosty przykład:
<a href=”https://www.przykład.com”>Kliknij tutaj</a>
W tym przykładzie:
-
href="https://www.przykład.com"— określa adres strony, do której ma prowadzić link. -
Tekst między znacznikami
<a>i</a>(„Kliknij tutaj”) to treść, na którą użytkownik może kliknąć.
Tworzenie hiperłącza do strony zewnętrznej
Jeśli chcesz dodać link do zewnętrznej strony internetowej, wystarczy wstawić pełny adres URL w atrybucie href:
<a href=”https://www.google.com”>Przejdź do Google</a>
Po kliknięciu tego linku, użytkownik zostanie przeniesiony do strony Google.
Tworzenie hiperłącza do innej strony na tej samej witrynie
Czasami potrzebujesz połączyć różne strony w obrębie tej samej witryny. W takim przypadku zamiast pełnego adresu URL, wystarczy podać ścieżkę do pliku:
<a href=”/kontakt.html”>Przejdź do strony kontaktowej</a>
W tym przykładzie hiperłącze prowadzi do pliku „kontakt.html”, który znajduje się w tym samym katalogu, co bieżąca strona.
Jak stworzyć hiperłącze otwierające się w nowej karcie?
Jeśli chcesz, aby hiperłącze otwierało się w nowej karcie przeglądarki, dodaj atrybut target="_blank" do znacznika <a>:
Dzięki temu użytkownik nie straci dostępu do Twojej strony, ponieważ nowa strona otworzy się w osobnej karcie.
Hiperłącza do e-maila
Możesz również stworzyć link, który otworzy domyślny program pocztowy z wypełnionym polem adresata. Użyj wtedy przedrostka mailto: w atrybucie href:
<a href=”mailto:[email protected]”>Wyślij e-mail</a>
Po kliknięciu tego linku, użytkownik zostanie przeniesiony do swojego programu pocztowego, a adres odbiorcy zostanie automatycznie wpisany.
Hiperłącze do pliku lub zasobu
Możliwe jest również stworzenie hiperłącza prowadzącego do pliku, który można pobrać, na przykład dokumentu PDF:
<a href=”/pliki/dokument.pdf”>Pobierz dokument PDF</a>
Ten link pozwoli użytkownikowi pobrać plik „dokument.pdf” znajdujący się na Twoim serwerze.
Jak zrobić hiperłącze do konkretnego miejsca na tej samej stronie?
Hiperłącza mogą prowadzić nie tylko do innych stron, ale także do określonych miejsc na tej samej stronie. W tym celu musisz dodać identyfikator (ID) do elementu docelowego oraz link, który do niego prowadzi. Oto jak to zrobić:
-
Dodaj atrybut
iddo elementu, do którego chcesz skierować użytkownika:
<h2 id=”sekcja1″>Sekcja 1</h2>
-
Utwórz link, który prowadzi do tego elementu:
<a href=”#sekcja1″>Przejdź do Sekcji 1</a>
Po kliknięciu tego linku, użytkownik zostanie automatycznie przeniesiony do sekcji o identyfikatorze „sekcja1”.
Podsumowanie
Teraz już wiesz, jak zrobić hiperłącze w HTML. Pamiętaj, że hiperłącza to jeden z kluczowych elementów każdej strony internetowej, umożliwiający nawigację między różnymi zasobami. Dzięki znacznikowi <a> i atrybutowi href możesz tworzyć połączenia do stron zewnętrznych, plików, adresów e-mail, a nawet do określonych miejsc na tej samej stronie.
