Zadania na lekcje

HTML: Linki i Nawigacja

HTML
Priorytet: Normalny Szkic

Zadanie 4: Linki i Nawigacja (Łączymy Świat)

Wstęp

Internet to pajęczyna powiązań. Gdyby strony nie były ze sobą połączone, musiałbyś wpisywać każdy adres ręcznie. Hiperłącza (linki) to fundament WWW, który pozwala przeskakiwać z jednej strony na drugą jednym kliknięciem.

Cel zadania

Nauczenie się tworzenia różnego rodzaju linków: do innych stron w internecie, do lokalnych plików oraz do miejsc na tej samej stronie.

Znacznik <a>

Do tworzenia linków służy znacznik <a> (od ang. anchor - kotwica). Jego najważniejszym atrybutem jest href (hypertext reference), który mówi "dokąd mam prowadzić".

<a href="adres-docelowy">Tekst, w który można kliknąć</a>

1. Linki zewnętrzne (Absolute Paths)

Prowadzą do innych serwerów w internecie (np. Google, Facebook). Muszą zawierać pełny adres z https://.

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

Jeśli chcesz, aby link otworzył się w nowej karcie, dodaj atrybut target="_blank".

<a href="https://wikipedia.org" target="_blank">Otwórz Wikipedię w nowej karcie</a>

2. Linki lokalne (Relative Paths)

Prowadzą do plików na Twoim własnym serwerze/komputerze (np. z index.html do kontakt.html).

  • href="kontakt.html" - plik jest w tym samym folderze.
  • href="podstrony/galeria.html" - plik jest w folderze podstrony.
  • href="../index.html" - plik jest katalog wyżej.
<!-- Link do pliku w tym samym folderze -->
<a href="o-mnie.html">Przeczytaj o mnie</a>

3. Kotwice (Linki wewnętrzne)

Pozwalają skakać do konkretnego miejsca na tej samej stronie (np. "Wróć na górę"). Wymaga to dwóch kroków:

  1. Nadania elementowi docelowemu unikalnego id.
  2. Stworzenia linku z href zaczynającym się od # i nazwy tego id.
<!-- Cel skoku -->
<h2 id="sekcja-kontakt">Kontakt</h2>
... (dużo treści) ...
<!-- Link skaczący -->
<a href="#sekcja-kontakt">Skocz do kontaktu</a>

Zadanie do wykonania

  1. Utwórz folder zadanie4.
  2. Stwórz w nim dwa pliki: index.html oraz kontakt.html.
  3. W pliku index.html:
    • Stwórz menu nawigacyjne na górze strony (możesz użyć listy <ul> wewnątrz znacznika <nav>).
    • Dodaj link "Kontakt", który prowadzi do pliku kontakt.html.
    • Dodaj link zewnętrzny do Twojej ulubionej strony (np. YouTube), który otwiera się w nowej karcie.
    • Dodaj dużo treści (np. za pomocą "lorem ipsum" lub kopiując tekst z poprzednich zadań), aby pojawił się pasek przewijania.
    • Na samym dole strony dodaj link "Do góry", który przeniesie użytkownika na sam początek strony (nadaj id nagłówkowi <h1> i zalinkuj do niego).
  4. W pliku kontakt.html:
    • Stwórz prosty nagłówek "Skontaktuj się ze mną".
    • Dodaj link "Powrót do strony głównej", który kieruje z powrotem do index.html.

Przykład rozwiązania

Plik index.html

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Strona Główna</title>
</head>
<body>
    <h1 id="gora">Witaj na mojej stronie</h1>

    <nav>
        <ul>
            <li><a href="index.html">Start</a></li>
            <li><a href="kontakt.html">Kontakt</a></li>
            <li><a href="https://google.com" target="_blank">Szukaj w Google</a></li>
        </ul>
    </nav>
    
    <h2>Długa treść...</h2>
    <p>Tutaj wpisz dużo tekstu, aby sprawdzić działanie kotwicy.</p>
    <p>... więcej tekstu ...</p>
    <p>... i jeszcze trochę ...</p>
    
    <footer>
        <a href="#gora">↑ Wróć na górę</a>
    </footer>
</body>
</html>

Plik kontakt.html

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kontakt</title>
</head>
<body>
    <h1>Napisz do mnie</h1>
    <p>email: [email protected]</p>
    
    <a href="index.html">← Powrót do strony głównej</a>
</body>
</html>