Linki w HTML — ćwiczenia z odnośnikami, ścieżkami i kotwicami

Hiperłącza to powód, dla którego internet jest siecią: jedno kliknięcie przenosi do innego fragmentu strony, innej strony koła albo zupełnie innej witryny. Link jest prosty — znacznik a z atrybutem href — ale ma kilka zasad, których nieprzestrzeganie łatwo pogarsza użyteczność i bezpieczeństwo: opisowy tekst, poprawna ścieżka, rel przy otwieraniu w nowej karcie. Na lekcji uczniowie dodają do strony koła trzy rodzaje linków.

Scenariusz jest przeznaczony na 45 minut dla klasy po lekcjach o strukturze strony — na przykład po lekcji o nagłówkach i akapitach.

Przygotowanie stanowisk

Potrzebne są przeglądarka i edytor tekstu (Notatnik++, VS Code lub podobny — nie Word). Rozpakuj pakiet z sekcji materiałów do osobnego folderu. W folderze start jest plik index.html z komentarzami zadań; otwierasz go w edytorze i w przeglądarce, a po każdej zmianie zapisujesz plik i odświeżasz stronę. Gotowe rozwiązanie jest w folderze rozwiazanie. Internet nie jest wymagany.

Cele i plan lekcji

Po zajęciach uczeń potrafi:

• zapisać link wewnątrz strony (kotwica #id) i do innego pliku (ścieżka względna);
• zapisać link zewnętrzny z target="_blank" oraz rel="noopener noreferrer";
• zapisać link do adresu e-mail (mailto:);
• napisać opisowy tekst linku zamiast „kliknij tutaj”.

Rodzaje adresów w href

Ścieżka względna liczy się od położenia bieżącego pliku: kontakt.html to plik w tym samym folderze, ../ — plik folder wyżej, materialy/plan.html — plik w podfolderze. Kotwica wymaga, aby gdzieś na stronie istniał element z odpowiednim id; identyfikator musi być unikalny.

Dobre praktyki

• Tekst linku opisuje cel: „plan zajęć”, a nie „kliknij tutaj” czy „link”. Czytniki ekranu potrafią wyświetlić listę samych linków i tekst musi mieć sens bez kontekstu.
• Link otwierany w nowej karcie (target="_blank") zawsze dostaje rel="noopener noreferrer" — chroni to stronę przed możliwością przejęcia kontroli przez otwieraną witrynę — i warto uprzedzić czytelnika, że otworzy się nowa karta.
• Każdy link sprawdzamy kliknięciem; martwe odnośniki to jedna z najczęstszych usterek stron.

Zadania

Zadanie 1. Menu. W elemencie nav wstaw trzy linki: do sekcji Plan (#plan), do sekcji Materiały (#materialy) i do pliku kontakt.html.

Zadanie 2. Link w tekście i kotwice. W zdaniu pod nagłówkiem „Plan” zamień słowa „stronie kontaktowej koła” na link do kontakt.html. Nadaj nagłówkom „Plan” i „Materiały” identyfikatory plan i materialy.

Zadanie 3. Zewnętrzny, e-mail i powrót. Zamień „kursie HTML w TablicaPro” na link do https://tablicapro.pl/kursy/html otwierany w nowej karcie (z rel i informacją w tekście), adres e-mail na link mailto:, a na końcu dodaj link „Wróć do planu”.

Dla chętnych: dodaj w pliku kontakt.html link prowadzący do sekcji Materiały na stronie głównej (ścieżka z kotwicą: index.html#materialy).

Rozwiązanie i wyniki

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Koło informatyczne — linki</title>
</head>
<body>
  <header>
    <h1>Koło informatyczne</h1>
    <nav>
      <a href="#plan">Plan</a>
      <a href="#materialy">Materiały</a>
      <a href="kontakt.html">Kontakt</a>
    </nav>
  </header>
  <main>
    <h2 id="plan">Plan</h2>
    <p>Spotykamy się w środy o 15:30. Szczegółowy opis zajęć znajdziesz w <a href="kontakt.html">stronie kontaktowej koła</a>.</p>

    <h2 id="materialy">Materiały</h2>
    <p>Materiały do zajęć są dostępne w <a href="https://tablicapro.pl/kursy/html" target="_blank" rel="noopener noreferrer">kursie HTML w TablicaPro (otwiera się w nowej karcie)</a>.</p>
    <p>Pytania o zajęcia wysyłaj na adres <a href="mailto:kolo@example.com">kolo@example.com</a>.</p>
    <p><a href="#plan">Wróć do planu</a></p>
  </main>
</body>
</html>

Kliknij każdy link w przeglądarce: menu przewija stronę do sekcji, link „strona kontaktowa” otwiera plik kontakt.html (w pakiecie jest obok), link zewnętrzny otwiera się w nowej karcie (wymaga internetu), a mailto: uruchamia program pocztowy, jeśli jest skonfigurowany. Struktura została sprawdzona automatycznym parserem HTML (kotwice mają cele, plik kontakt.html istnieje, linki zewnętrzne mają rel, teksty linków są opisowe); samo kliknięcie w przeglądarce nie było sprawdzane automatycznie.

Typowe błędy

Pytania kontrolne i punktacja

1. Co musi istnieć na stronie, aby działał link href="#plan"?
2. Dlaczego link z target="_blank" dostaje rel="noopener noreferrer"?
3. Dlaczego „kliknij tutaj” jest złym tekstem linku?

Odpowiedzi: Element z atrybutem id="plan". Aby otwierana strona nie mogła uzyskać dostępu do strony, z której ją otwarto. Bo nie opisuje celu — czytnik ekranu czytający listę linków powie tylko „kliknij tutaj”.

Proponowana punktacja (razem 10 punktów): zadanie 1 — menu w nav 1 pkt, trzy poprawne href 2 pkt; zadanie 2 — link w zdaniu 1 pkt, dwa identyfikatory 1 pkt; zadanie 3 — link zewnętrzny z target i rel 2 pkt, mailto: 1 pkt, link powrotny 1 pkt; opisowe teksty linków 1 pkt. Zadanie dla chętnych nie jest wymagane do pełnej oceny.

Materiały do pobrania

• Pakiet HTML: materiały do lekcji, rozwiązanie i karta pracy
• Karta pracy ucznia — otwórz i wydrukuj

Rozpakuj ZIP przed otwarciem plików. Materiały są dostępne bez logowania; publiczne rozwiązanie służy nauce i samodzielnemu sprawdzeniu, a nie poufnemu sprawdzianowi.

Co dalej?

Następny krok to obrazy, tabele i znaczniki semantyczne tworzące nawigację. Ten materiał rozwija dział o podstawach HTML w kursie HTML w TablicaPro, gdzie znajdziesz prezentacje, ćwiczenia i testy do prowadzenia lekcji.

Źródła techniczne: linki w MDN oraz element a. Zobacz też lekcję o nagłówkach i akapitach.