Wprowadzenie do linków (<a>)

Lekcja 5.1: Wprowadzenie do linków (<a>)

Strona główna > Rozdział 5: Linki > Wprowadzenie do linków (<a>)

Czym są linki (hiperłącza)?

Linki, znane również jako hiperłącza, są jednym z fundamentalnych elementów sieci WWW. Pozwalają użytkownikom na nawigację pomiędzy różnymi stronami internetowymi, dokumentami lub określonymi miejscami w obrębie tej samej strony. Bez linków internet, jaki znamy, nie mógłby istnieć.

W HTML linki tworzy się głównie za pomocą znacznika <a> (od angielskiego "anchor" - kotwica).

Podstawowa struktura linku

Najprostszy link składa się ze znacznika <a>, atrybutu href (hypertext reference), który określa adres docelowy linku, oraz treści linku, która jest widoczna dla użytkownika i klikalna.

<a href="https://www.google.com">Przejdź do Google</a>

Przejdź do Google

W tym przykładzie:

<a> - rozpoczyna i kończy znacznik linku.
href="https://www.google.com" - atrybut href wskazuje adres URL, do którego użytkownik zostanie przeniesiony po kliknięciu linku.
Przejdź do Google - to jest treść linku, która jest wyświetlana na stronie. Może to być tekst, obrazek lub inny element HTML.

Atrybut `href`

Atrybut href jest kluczowy dla działania linku. Może on przyjmować różne typy wartości, określające cel linku:

1. Adresy URL (bezwzględne i względne)

Adres bezwzględny (absolutny): Pełny adres URL zasobu w internecie, zawierający protokół (np. http://, https://), domenę i ścieżkę. Używany do linkowania do innych stron internetowych.

<a href="https://www.wikipedia.org">Wikipedia</a>

Adres względny: Ścieżka do zasobu względem bieżącej strony lub katalogu. Używany do linkowania do innych stron w obrębie tej samej witryny.

<!-- Link do pliku w tym samym katalogu -->
<a href="kontakt.php">Kontakt</a>

<!-- Link do pliku w katalogu nadrzędnym -->
<a href="../index.php">Strona główna</a>

<!-- Link do pliku w podkatalogu -->
<a href="obrazy/logo.png">Logo</a>

2. Identyfikatory fragmentów (linki wewnętrzne)

Pozwalają na przejście do określonego miejsca (fragmentu) na tej samej stronie. Wymagają użycia atrybutu id w elemencie docelowym.

<!-- Link -->
<a href="#sekcja2">Przejdź do Sekcji 2</a>

<!-- Element docelowy -->
<h2 id="sekcja2">Sekcja 2</h2>

Kliknięcie linku spowoduje przewinięcie strony do elementu z id="sekcja2". Więcej o tym w kolejnych lekcjach.

3. Adresy e-mail (mailto:)

Pozwalają na utworzenie linku, który po kliknięciu otworzy domyślny program pocztowy użytkownika z nową wiadomością zaadresowaną na podany adres.

<a href="mailto:kontakt@przyklad.com">Napisz do nas</a>

4. Numery telefonów (tel:)

Na urządzeniach mobilnych pozwalają na zainicjowanie połączenia telefonicznego.

<a href="tel:+48123456789">Zadzwoń: 123-456-789</a>

Wygląd linków

Przeglądarki domyślnie stylizują linki w charakterystyczny sposób:

Niebieski kolor tekstu dla nieodwiedzonych linków.
Fioletowy kolor tekstu dla odwiedzonych linków.
Podkreślenie tekstu.
Zmiana kursora na "rączkę" po najechaniu myszką.

Wygląd ten można oczywiście całkowicie zmienić za pomocą CSS, używając pseudoklas takich jak :link, :visited, :hover, :active.

Treść linku

Treścią linku (tym, co znajduje się między <a> a </a>) może być nie tylko tekst, ale również inne elementy HTML, np. obrazki.

<a href="index.php">
    <img src="logo.png" alt="Logo strony - powrót na stronę główną">
</a>

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Stwórz stronę HTML zawierającą link do Twojej ulubionej strony internetowej oraz link do adresu e-mail.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Moje Linki</title>
</head>
<body>
    <h1>Moje Ulubione Linki</h1>
    
    <p>Odwiedź moją ulubioną stronę: 
        <a href="https://www.wikipedia.org/">Wikipedia</a>.
    </p>
    
    <p>Masz pytania? 
        <a href="mailto:pytania@przyklad.com">Napisz do mnie</a>.
    </p>

</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

Stwórz link tekstowy do dowolnej strony zewnętrznej.
Stwórz link, którego treścią będzie obrazek (użyj dowolnego obrazka lub placeholdera).
Stwórz link typu "mailto:" z predefiniowanym tematem wiadomości (poszukaj w internecie, jak to zrobić - podpowiedź: użyj ?subject=...).
Stwórz link typu "tel:".

Najczęściej zadawane pytania

Do czego służy znacznik <a>?

Znacznik <a> (anchor) służy do tworzenia hiperłączy (linków) w HTML. Pozwala użytkownikom nawigować do innych stron internetowych, plików, adresów e-mail, numerów telefonów lub określonych miejsc na tej samej stronie.

Co to jest atrybut href?

Atrybut href (hypertext reference) jest obowiązkowym atrybutem znacznika <a> i określa adres docelowy linku. Może zawierać adres URL (bezwzględny lub względny), identyfikator fragmentu (#id), adres e-mail (mailto:) lub numer telefonu (tel:).

Jaka jest różnica między adresem bezwzględnym a względnym?

Adres bezwzględny to pełny adres URL (np. https://www.example.com/page.html), używany do linkowania do innych witryn. Adres względny to ścieżka do pliku względem bieżącej lokalizacji (np. kontakt.html, ../images/pic.jpg), używany do linkowania w obrębie tej samej witryny.

Czy obrazek może być linkiem?

Tak, dowolny element HTML, w tym obrazek (<img>), może być umieszczony wewnątrz znacznika <a>, stając się klikalną treścią linku. Jest to często używane np. dla logotypów linkujących do strony głównej.

Jak zmienić domyślny wygląd linków?

Domyślny wygląd linków (kolor, podkreślenie) można łatwo zmienić za pomocą CSS. Używa się do tego selektora 'a' oraz pseudoklas :link, :visited, :hover, :active, aby zdefiniować style dla różnych stanów linku.