8 klasa — 3. Budujemy stronę: div i struktura dokumentu

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

Cel lekcji

Grupujesz elementy za pomocą div i klas.
Rozróżniasz neutralny kontener div od header, main, section i footer.
Tworzysz dwie karty z powtarzalnym stylem.
Sprawdzasz układ przy szerokim i wąskim podglądzie.

Wstęp

Na stronie Klubu Odkrywców są już teksty i kolory. Teraz potrzebujesz porządku: wprowadzenia, głównej treści, opisu projektu i stopki. Struktura ułatwia rozbudowę. Jeśli każdą część oznaczysz konsekwentnie, później dodasz menu bez szukania przypadkowych miejsc w kodzie.

Kontynuujesz ten sam projekt. Zachowaj kopię etapu 2. Dzisiejsza zmiana polega na przeniesieniu istniejących treści do odpowiednich kontenerów, a nie na skasowaniu własnych opisów. Wzorcowy kod pokazuje kompletny układ, ale możesz pozostawić swój temat i zdania.

Div jako pojemnik na elementy

div jest neutralnym kontenerem: grupuje inne elementy, lecz sam nie mówi, czy zawiera menu, artykuł lub stopkę. Domyślnie jest wyświetlany blokowo. Możesz nadać mu klasę i wspólny wygląd. Nie staje się przyciskiem tylko dlatego, że ma kolor i obramowanie.

<div class="karta">
  <h3>Obserwacja</h3>
  <p>Porównujemy kształty liści.</p>
</div>

Oba elementy są dziećmi kontenera div. Jeśli ustawisz mu tło i padding, obejmą one wspólny obszar karty. Druga karta z tą samą klasą otrzyma te same style. Dzięki temu nie musisz powtarzać arkusza dla każdego fragmentu.

Kiedy użyć znacznika o konkretnym znaczeniu

header oznacza część wprowadzającą, nav grupę odsyłaczy nawigacyjnych, main główną treść, section część tematyczną, a footer stopkę. W naszym projekcie każda sekcja ma nagłówek h2. Gdy znaczenie fragmentu jest znane, wybieramy właściwy znacznik zamiast nazywać wszystko div.

Kontener div class="strona" posłuży do ograniczenia szerokości całego układu, a div class="karty" do rozłożenia kart. Identyfikatory o-klubie, projekt i zrodla przygotują cele menu z następnej lekcji. Nazwy zapisujemy bez spacji. Każde id występuje tylko raz.

Układ kart i szerokość strony

max-width ogranicza maksymalną szerokość; margin: 0 auto pozwala wyśrodkować kontener, gdy ma miejsce po bokach. display: flex włącza układ elastyczny, gap daje odstęp między kartami, a flex-wrap: wrap pozwala im przechodzić do kolejnego wiersza.

W zapisie flex: 1 1 240px karta może rosnąć i się kurczyć, a punktem wyjścia jest 240 pikseli. Nie musisz dziś pamiętać wszystkich wariantów tej właściwości: sprawdź praktycznie, jak zachowują się dwie karty. box-sizing: border-box sprawia, że zadana szerokość obejmuje treść, padding i obramowanie; margines pozostaje poza nią.

Schemat strony: header, nav, main z sekcjami i kartami div oraz footer. Div grupuje elementy.

Ćwiczenie krok po kroku

Zadanie: zbuduj trzy sekcje, dwie karty i stopkę. Zaplanuj około 8 minut na szkic, 27 minut na kod i 10 minut na test.

Na kartce narysuj cztery prostokąty: nagłówek, miejsce na przyszłe menu, treść główna i stopka. W treści zaznacz trzy sekcje.
W panelu HTML przebuduj poprzedni kod zgodnie z poniższym przykładem. Zachowaj własne zdania. Nie wklejaj drugiego kompletnego projektu pod pierwszym.
Przenieś elementy razem z ich znacznikami zamykającymi. Każdy nowy poziom zagnieżdżenia oznacz wcięciem.
Na końcu arkusza z etapu 2 dodaj przedstawione reguły CSS.
Zmień padding klasy karta. Sprawdź, czy obie karty zmieniły się jednakowo.
Zwęź podgląd. Karty powinny ustawić się jedna pod drugą, gdy zabraknie miejsca. Nie wprowadzaj sztywnej szerokości większej od ekranu.
Zapisz etap 3. Poproś drugą osobę, aby wskazała w kodzie kontener, sekcję i kartę.

<div class="strona" lang="pl">
  <header id="start">
    <p class="etykieta">Projekt klasy 8</p>
    <h1>Klub Odkrywców</h1>
    <p class="wprowadzenie">To miejsce dla osób, które lubią poznawać świat.</p>
  </header>
  <main>
    <section id="o-klubie">
      <h2>O klubie</h2>
      <p>Łączymy <strong>ciekawość</strong> z uważną obserwacją.</p>
    </section>
    <section id="projekt">
      <h2>Nasz projekt</h2>
      <p>Przygotowujemy atlas drzew. Najpierw obserwujemy, potem opisujemy.</p>
      <div class="karty">
        <div class="karta">
          <h3>Obserwacja</h3>
          <p>Porównujemy kształty liści i opisujemy ich cechy.</p>
        </div>
        <div class="karta">
          <h3>Ilustracja</h3>
          <p>Rysujemy własne ilustracje i zapisujemy wnioski.</p>
        </div>
      </div>
      <ul>
        <li>Rozpoznajemy kształty liści.</li>
        <li>Rysujemy własne ilustracje.</li>
        <li>Porównujemy wyniki obserwacji.</li>
      </ul>
    </section>
    <section id="zrodla">
      <h2>Źródła</h2>
      <p>Teksty projektu przygotowujemy samodzielnie.</p>
    </section>
  </main>
  <footer><p>Klub Odkrywców — szkolny projekt HTML i CSS.</p></footer>
</div>

CSS do dopisania pod arkuszem z lekcji 2

* { box-sizing: border-box; }
.strona { max-width: 960px; margin: 0 auto; }
header, footer { padding: 24px; background-color: #dcebe8; }
section { margin: 24px 0; }
.etykieta { font-weight: bold; }
.karty { display: flex; flex-wrap: wrap; gap: 16px; }
.karta {
  flex: 1 1 240px;
  background-color: #ffffff;
  border: 1px solid #bac8d3;
  border-radius: 12px;
  padding: 20px;
}
.karta h3 { margin-top: 0; }

Własna modyfikacja: dodaj trzecią kartę „Wnioski” z nagłówkiem h3 i akapitem. Wykorzystaj istniejącą klasę. Nie twórz id=”karta” dla wszystkich kart, ponieważ identyfikatory nie powinny się powtarzać.

Gdy układ się rozsypie: sprawdź, czy obie karty znajdują się wewnątrz kontenera karty oraz czy zamknąłeś wszystkie div. Samo wcięcie nie zmienia zagnieżdżenia — robią to znaczniki. Nie wkładaj całej sekcji ani div do środka akapitu p.

Sprawdź swoją pracę

Mam jeden main i trzy sekcje z nagłówkami.
Każda karta ma klasę karta i znajduje się w kontenerze karty.
Identyfikatory sekcji są unikalne.
Nagłówek i stopka mają odpowiednie znaczniki.
Układ pozostaje czytelny po zwężeniu podglądu.

Podsumowanie

Div pomaga grupować elementy do wspólnego układu, a znaczniki semantyczne opisują rolę części strony. Masz już szkielet gotowy do nawigacji. Na kolejnej lekcji menu będzie prowadzić bezpośrednio do przygotowanych sekcji.

Materiały i źródła

Pytania kontrolne

Do czego służy div?
Czy każdy fragment strony należy budować wyłącznie z div?
Jaką rolę pełni main?
Czym różni się section od neutralnego kontenera?
Dlaczego karty mają wspólną klasę?
Dlaczego identyfikator projekt powinien wystąpić tylko raz?
Co daje flex-wrap?
Jak rozpoznać, czy element jest dzieckiem innego kontenera?

ilość wywołań: 7