Jak podzielić stronę na sekcje?

Każda profesjonalna strona internetowa – nawet najprostsza wizytówka – składa się z sekcji, czyli logicznych części strony. Dzięki nim użytkownik łatwiej odnajduje się na stronie, a Ty masz większą kontrolę nad jej wyglądem i funkcjonalnością.

W tej lekcji pokażemy Ci, jak zaplanować i stworzyć układ strony wizytówki. Będziesz wiedzieć, co dokładnie umieścić w kodzie HTML i jak wszystko podzielić na czytelne bloki.

🔹 Co to są sekcje?

Sekcja (ang. section) to część strony odpowiadająca za konkretną treść – np. nagłówek, informacje o sobie, oferta, dane kontaktowe, stopka.

Podział strony na sekcje pomaga:

✔ uporządkować kod HTML
✔ łatwiej ostylować elementy w CSS
✔ zadbać o dostępność i SEO
✔ tworzyć strony bardziej profesjonalne i przejrzyste

🔧 Przykładowa struktura strony wizytówki

Oto klasyczny układ strony typu „wizytówka”, który wykorzystamy w tym module:

<header>
  Nagłówek z imieniem, nazwiskiem lub nazwą firmy
</header>

<nav>
  Pasek nawigacyjny – np. linki do sekcji „O mnie”, „Usługi”, „Kontakt”
</nav>

<main>
  <section>O mnie – zdjęcie i krótki opis</section>
  <section>Usługi – np. 2-3 bloki ofertowe</section>
  <section>Kontakt – formularz lub dane kontaktowe</section>
</main>

<footer>
  Stopka – np. copyright, linki do social media
</footer>

Ten układ możesz oczywiście rozbudować – np. dodać tło, grafikę w nagłówku, czy animacje – ale najważniejsze to mieć czytelny szkielet.

📁 Główne sekcje w HTML – do czego służą?

Znacznik	Opis
`<header>`	Nagłówek strony lub sekcji – może zawierać logo, tytuł, menu
`<nav>`	Sekcja z nawigacją – linki do innych części strony lub zewnętrzne
`<main>`	Główna zawartość strony (tylko jedna na stronie)
`<section>`	Logiczny blok tematyczny (np. o mnie, usługi, kontakt)
`<footer>`	Stopka – informacje końcowe, np. prawa autorskie

Uwaga: jeśli nie pamiętasz dokładnie, czym są te znaczniki, możesz wrócić do lekcji 6: Semantyczne HTML5 lub do podstaw HTML z modułu 1 i 2.

✍️ Jak przygotować projekt?

Zanim przejdziesz do pisania kodu, zaplanuj:

📌 Jakie sekcje chcesz mieć na stronie
📌 Jakie treści w nich umieścisz (tekst, zdjęcie, oferta, kontakt)
📌 Jak chcesz, aby wyglądały (np. kolor tła, układ bloków)

Nie musisz rysować projektu – wystarczy notatka lub szkic, np. na kartce papieru. Im lepiej zaplanujesz, tym łatwiej będzie pisać kod!

📂 Co przygotować przed kolejną lekcją?

Za chwilę stworzysz dwa pliki:

index.html – główny dokument strony
style.css – plik z Twoim kodem CSS

Połączysz je ze sobą i zaczniesz budować stronę wizytówkę od zera.

Jeśli nie pamiętasz, jak to zrobić – wróć do lekcji z Modułu 1 i 2, gdzie tworzyliśmy pierwszy dokument HTML i uczyliśmy się dodawać CSS.

✅ Podsumowanie

Strona powinna być podzielona na logiczne sekcje: <header>, <main>, <footer> itd.
Każda sekcja pełni inną rolę – od nawigacji po dane kontaktowe
Dobry plan struktury to klucz do przejrzystego i łatwego kodu
Jeśli czegoś nie pamiętasz, śmiało wróć do wcześniejszych lekcji!

➡️ W kolejnym temacie nauczysz się tworzyć pliki HTML i CSS oraz połączyć je ze sobą w praktyce.

Previous Zagadnienie

Back to Zagadnienie

Next Temat