Linki w HTML

W HTML, linki są tworzone przy użyciu znacznika <a> (anchor). Linki służą do łączenia stron internetowych, plików, lub do nawigacji w obrębie tej samej strony.

Struktura linku w HTML

        <a href="URL">Tekst lub element linku</a>
            

• href: Atrybut href określa adres URL, do którego prowadzi link.
• Treść linku: To tekst lub element (np. obraz) między otwierającym a zamykającym znacznikiem <a>.

Przykłady linków

1. Podstawowy link do strony internetowej

        <a href="https://www.example.com">Przejdź do Example</a>
            

Kliknięcie tego linku przenosi użytkownika do strony https://www.example.com.

2. Link do innej strony na tym samym serwerze

        <a href="/about.html">O nas</a>
            

Link prowadzi do strony about.html znajdującej się w tej samej domenie lub katalogu.

3. Link otwierający stronę w nowej karcie

        <a href="https://www.example.com" target="_blank">Otwórz w nowej karcie</a>
            

Atrybut target="_blank" powoduje otwarcie linku w nowej zakładce przeglądarki.

4. Link prowadzący do określonej sekcji na stronie

        <a href="#sekcja1">Przejdź do Sekcji 1</a>
            

Symbol # przed nazwą oznacza odwołanie do elementu o identyfikatorze (ID) na tej samej stronie.

        <h2 id="sekcja1">Sekcja 1</h2>
            

5. Link z plikiem do pobrania

        <a href="plik.pdf" download>Pobierz plik PDF</a>
            

Atrybut download wskazuje, że plik ma zostać pobrany zamiast otwierania go w przeglądarce.

6. Link z obrazem zamiast tekstu

        <a href="https://www.example.com">
            <img src="obrazek.jpg" alt="Kliknij, aby przejść do Example">
        </a>
            

Zamiast tekstu, w linku znajduje się obraz.

7. Link e-mail

        <a href="mailto:kontakt@example.com">Wyślij wiadomość e-mail</a>
            

Po kliknięciu otwiera domyślną aplikację do wysyłania e-maili z adresem kontakt@example.com.

Stylizowanie linków (CSS)

Domyślnie przeglądarki stylizują linki w następujący sposób:

• Niezwykłe linki: Niebieskie i podkreślone.
• Odwiedzone linki: Fioletowe i podkreślone.
• Aktywne linki: Czerwone podczas kliknięcia.

Możesz zmienić te style za pomocą CSS:

        <style>
        a {
            color: green; /* Kolor tekstu linku */
            text-decoration: none; /* Usuwa podkreślenie */
        }
        a:hover {
            color: orange; /* Kolor po najechaniu myszą */
            text-decoration: underline; /* Dodaje podkreślenie */
        }
        </style>
            

Uwagi

• Jeśli atrybut href jest pusty, link jest nadal klikalny, ale nie prowadzi do żadnego miejsca:

        <a href="#">Nieaktywny link</a>
                

• Unikaj martwych linków (tj. takich, które nie prowadzą do żadnej istniejącej strony).

Linki są jednym z najważniejszych elementów HTML, umożliwiając nawigację między stronami i tworzenie interaktywnych witryn internetowych.