Przejdź do głównej zawartości

Układ strony (layout)

Wprowadzenie

Układ strony polega na odpowiednim rozmieszczeniu nagłówka, nawigacji, treści i stopki.

Teoria / Wyjaśnienia

Typowe sekcje strony:
- nagłówek (header),
- menu nawigacyjne (nav),
- główna treść (main),
- stopka (footer).
Na poczatku wystarczy prosty układ blokowy, pózniej można użyć CSS (flex, grid).

Praktyczne przykłady

Przykład

<body>
  <header>
    <h1>Moja strona</h1>
  </header>

  <nav>
    <a href="#start">Start</a>
    <a href="#o-nas">O nas</a>
    <a href="#kontakt">Kontakt</a>
  </nav>

  <main>
    <h2 id="start">Witamy!</h2>
    <p>Tu bedzie glowna tresc.</p>
  </main>

  <footer>
    &copy; 2025 Moja strona
  </footer>
</body>

Ćwiczenie

Rozrysuj prosty szkic swojej strony (na kartce lub w notatniku).
Zamień go na strukture HTML z nagłówkiem, nawigacją, treścią i stopką.
Dla chętnych: dodaj podstawowe style z poprzedniej lekcji, aby odróżnić sekcje kolorami.