Marcin Mika materiały do zajęć imiki Marcin Mika

8 klasa — 4. Menu, odsyłacze, załączniki i przyciski

2026-08-31
8 klasa - Hiperłącza i publikacja lokalna

Klasa 8 · Lekcja 4 z 6 · HTML i CSS w CodePen

Cel lekcji

  • Tworzysz menu z odsyłaczy prowadzących do sekcji tej samej strony.
  • Odróżniasz link, link wyglądający jak przycisk i prawdziwy button.
  • Dodajesz odsyłacz do pliku oraz opisujesz możliwe zachowanie przeglądarki.
  • Sprawdzasz nawigację klawiaturą i używasz details.

Wstęp

Strona może mieć dobrą treść, a mimo to być niewygodna. Czytelnik powinien szybko przejść do interesującej go części. Dzisiaj wykorzystasz identyfikatory z lekcji 3 i zbudujesz menu. Dodasz również odsyłacz do materiału PDF i prosty element rozwijany. Wszystkie te działania oprzesz na możliwościach HTML i CSS.

Otwórz etap 3. Nie tworzysz nowej witryny: rozwijasz stronę Klubu Odkrywców. Korzystaj z elementów HTML i reguł CSS pokazanych w ćwiczeniu.

Odsyłacz łączy miejsce startu i cel

<a href="#projekt">Nasz projekt</a>
<section id="projekt">
  <h2>Nasz projekt</h2>
</section>

Element a z atrybutem href jest odsyłaczem. Wartość #projekt wskazuje element o id=”projekt” w bieżącym dokumencie. Krzyżyk wpisujemy w href, ale nie w id. Literówka albo różnica wielkości liter może przerwać połączenie. Widoczny tekst powinien mówić, dokąd prowadzi link; „Nasz projekt” jest bardziej zrozumiałe niż „Kliknij tutaj”.

Pełny adres zaczynający się od https:// prowadzi do innej strony. W projekcie domyślnie otwieramy linki w tej samej karcie. Jeśli cel ma się otworzyć w nowej, można dodać target=”_blank” oraz rel=”noopener” i poinformować o nowej karcie w treści linku.

Załącznik to także cel odsyłacza

Link może prowadzić do PDF, obrazu lub innego pliku. Plik musi znajdować się pod rzeczywistym adresem dostępnym dla odbiorcy. Ścieżka z Twojego komputera, np. C:\Dokumenty\plik.pdf, nie udostępnia go w CodePen. Korzystamy z materiału umieszczonego przez nauczyciela albo z publicznego źródła.

<a href="https://uodo.gov.pl/pl/file/6079">Poradnik UODO o wizerunku dziecka (PDF)</a>

Po kliknięciu przeglądarka może pokazać PDF lub go pobrać. Zależy to od ustawień i odpowiedzi serwera. Atrybut download nie gwarantuje pobrania dowolnego obcego pliku; jego działanie jest ograniczone m.in. pochodzeniem adresu. Dlatego w ćwiczeniu podajemy uczciwie typ pliku zamiast obiecywać wymuszone pobieranie.

Przycisk i link mają inne zadania

Odsyłacz prowadzi do miejsca. Przycisk wykonuje działanie, np. wysłanie albo reset formularza. CSS może nadać linkowi wygląd przycisku, ale nie zmienia jego roli. Nie wkładaj button do środka a i nie rób przycisku z przypadkowego div.

button type="button" bez przypisanego zachowania nie wykona w tym ćwiczeniu żadnej akcji. Żeby pokazać prawdziwe działanie, wykorzystamy type="reset" wewnątrz formularza. Przywraca on wartości początkowe pól; nasza początkowo pusta notatka zostanie wyczyszczona. To demonstracja, nie system wysyłania lub zapisywania wiadomości.

Elementy details i summary umożliwiają natywne rozwijanie treści. Działają dzięki funkcjom przeglądarki. Summary jest etykietą, którą użytkownik aktywuje myszą lub klawiaturą.

Nawigacja: odsyłacz prowadzi do sekcji, przycisk resetuje pole formularza, menu łączy części strony.

Ćwiczenie krok po kroku

Zadanie: dodaj menu, dwa rodzaje odsyłaczy i działający przycisk resetowania. Na wyjaśnienia przeznacz około 10 minut, na rozbudowę 25 minut, a na test klawiatury 10 minut.

  1. Między zamknięciem header a otwarciem main wstaw poniższe menu. Sprawdź zgodność href z identyfikatorami istniejących sekcji.
  2. W sekcji projekt pod jej akapitem, przed kontenerem karty, dodaj link wyróżniony klasą przycisk, details oraz formularz demonstracyjny.
  3. W sekcji zrodla dodaj link do W3Schools i link do PDF z przykładu powyżej. Zachowaj informację, że własne teksty przygotowujesz samodzielnie.
  4. Dopisz CSS z tej lekcji do dotychczasowego arkusza.
  5. Kliknij każdy element menu. Jeżeli strona jest krótka, powiększ treść akapitów lub zwęź podgląd, aby zauważyć przewijanie.
  6. Wpisz do pola tylko próbne słowo, kliknij Wyczyść notatkę i sprawdź rezultat. Rozwiń i zwiń details. Nie wpisuj danych osobowych.
  7. Kliknij obszar podglądu i przejdź po elementach klawiszem Tab. Link aktywuj Enterem; przycisk sprawdź także spacją. Fokus powinien być widoczny.
  8. Zapisz etap 4 oraz kopie HTML i CSS.

Menu do wstawienia przed main

<nav aria-label="Menu główne">
    <ul class="menu">
      <li><a href="#o-klubie">O klubie</a></li>
      <li><a href="#projekt">Projekt</a></li>
      <li><a href="#zrodla">Źródła</a></li>
    </ul>
  </nav>

Elementy do dodania w sekcji projekt

<p><a class="przycisk" href="#zrodla">Zobacz źródła</a></p>
      <details>
        <summary>Jak przygotować obserwację?</summary>
        <p>Wybierz drzewo, obejrzyj liście i zapisz trzy dostrzeżone cechy.</p>
      </details>
      <form aria-label="Ćwiczenie przycisku resetowania">
        <p><label for="notatka">Próbna notatka — bez danych osobowych</label></p>
        <textarea id="notatka" rows="3"></textarea>
        <p><button type="reset">Wyczyść notatkę</button></p>
      </form>

CSS do dopisania

.menu { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; }
a { color: #124d75; text-decoration: underline; }
.menu a, .przycisk, button {
  display: inline-block;
  padding: 10px 16px;
  border: 2px solid #12395b;
  border-radius: 8px;
  background-color: #12395b;
  color: #ffffff;
  font: inherit;
}
.menu a:hover, .przycisk:hover, button:hover { background-color: #20577c; }
a:focus-visible, button:focus-visible, summary:focus-visible, textarea:focus-visible {
  outline: 3px solid #9b3c00;
  outline-offset: 3px;
}
summary, button { cursor: pointer; }
details, form { margin: 20px 0; }
textarea { display: block; max-width: 100%; width: 100%; font: inherit; }

Ważne: pole demonstracyjne nie ma przycisku wysyłania i nie służy do kontaktu. Sam HTML nie zapewnia skrzynki odbiorczej ani przechowywania wiadomości. Użyty textarea nie ma atrybutu name, ponieważ nie przygotowujemy wysyłki danych.

Dla chętnych: dodaj w stopce odsyłacz „Wróć na górę” prowadzący do #start. Sprawdź, czy nagłówek ma dokładnie takie id. Nie usuwaj obramowania fokusu, nawet jeśli jego wygląd różni się od stanu hover.

Sprawdź swoją pracę

  • Wszystkie trzy linki menu prowadzą do odpowiednich sekcji.
  • Link do PDF ma opis i informację o typie pliku.
  • Potrafię wskazać link wyglądający jak przycisk oraz prawdziwy button.
  • Przycisk resetowania działa w formularzu, a details rozwija treść.
  • Elementy interaktywne mają widoczny fokus i działają z klawiatury.
  • Wykonałem ćwiczenie za pomocą HTML i CSS.

Podsumowanie

Nawigację tworzymy za pomocą HTML i CSS. HTML zapewnia odsyłacze, podstawowe działania formularza i rozwijanie treści. O funkcji elementu decyduje jego znaczenie i konfiguracja, a nie sam wygląd. Na kolejnej lekcji sprawdzisz działanie całego projektu i poprawisz usterki.

Materiały i źródła

Pytania kontrolne

  1. Co oznacza #projekt w href?
  2. Dlaczego id nie zawiera znaku #?
  3. Czym różni się odsyłacz od przycisku?
  4. Czy klasa przycisk zamienia link w element button?
  5. Co resetuje button type=”reset”?
  6. Dlaczego plik z dysku nie staje się załącznikiem dostępnym dla wszystkich?
  7. Czy download zawsze wymusza pobranie pliku z innej domeny?
  8. Po co sprawdzać menu klawiszem Tab?
ilość wywołań: 3