Linki - Edutago

Linki są podstawowym elementem stron internetowych, umożliwiającym nawigację między różnymi zasobami dostępnymi online. HTML oferuje szeroki zakres możliwości tworzenia linków, od prostych odnośników do innych stron, po bardziej zaawansowane użycie, takie jak linki do adresów e-mail, numerów telefonów, a nawet kotwic w obrębie tej samej strony. W tej lekcji omówimy różne typy linków dostępne w HTML, w tym linki absolutne i relatywne, oraz jak używać obrazków jako linków.

Przykład kodu

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład użycia linków w HTML</title>
</head>
<body>
    <!-- Link absolutny do zewnętrznej strony -->
    <a href="https://www.example.com" target="_blank">Odwiedź Example.com</a>

    <!-- Link relatywny do innej strony w tej samej domenie -->
    <a href="/kontakt.html">Kontakt</a>

    <!-- Obrazek jako link -->
    <a href="https://www.example.com">
        <img src="logo.png" alt="Logo Example.com">
    </a>

    <!-- Link do adresu e-mail -->
    <a href="mailto:example@example.com">Wyślij do nas e-mail</a>

    <!-- Link do numeru telefonu -->
    <a href="tel:+48123456789">Zadzwoń do nas</a>

    <!-- Kotwica do sekcji na tej samej stronie -->
    <a href="#sekcja1">Przejdź do sekcji 1</a>
    
    <!-- Cel kotwicy -->
    <h2 id="sekcja1">Sekcja 1</h2>
    <p>Tutaj zaczyna się treść sekcji 1.</p>
</body>
</html>

Opis

Link absolutny: odnośnik do zewnętrznej strony internetowej, zawierający pełny adres URL. Atrybut target="_blank" powoduje otwarcie linku w nowej karcie przeglądarki.
Link relatywny: odnośnik do innej strony lub zasobu znajdującego się na tej samej domenie. Ścieżka jest relatywna w stosunku do aktualnej lokalizacji.
Obrazek jako link: umieszczenie elementu <img> wewnątrz <a> sprawia, że obrazek staje się klikalny i pełni funkcję linku.
Link do adresu e-mail: używa schematu mailto:, aby otworzyć domyślny program pocztowy użytkownika z nową wiadomością skierowaną na wskazany adres.
Link do numeru telefonu: używa schematu tel:, aby umożliwić użytkownikom uruchomienie funkcji dzwonienia na wskazany numer telefonu.
Kotwica: umożliwia nawigację do określonej części tej samej strony. Atrybut href zawiera identyfikator sekcji (prefiksowany znakiem #), do której ma zostać przewinięta strona.

Podsumowanie

Linki są niezbędnym elementem stron internetowych, umożliwiającym efektywną nawigację i interakcję z użytkownikiem. HTML oferuje różnorodne metody tworzenia linków, począwszy od prostych odnośników do innych stron, poprzez linki do adresów e-mail i numerów telefonów, aż po zaawansowane techniki, takie jak kotwice.

Poprzedni

Następny