Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Grupowanie znaczników za pomocą div

Na temat tego znacznika powiedzielismy już dużo przy okazji omawiania układu treści strony. Stosowaliśmy go podczas konstruowaniu szkieletu strony oraz analizowania struktury DOM przykładowej strony. Można powiedzieć, że znacznik <div>...</div> może grupować wszystko, w odróżnieniu od <figure>...</figure>, który jest przeznaczony do grupowania elementów tworzących logiczną całość. W szczególności div, może obejmować inny div, który z kolei obejmuje następny div, itd. Podstawową zasadą stosowania znacznika div, jest sprawdzenie czy aby objęty nim obszar nie ma znaczenia semantycznego. Jeżeli tak jest, to należy zastowować jeden ze znaczników: section, article, nav, header, footer lub aside. Warto wiedzieć, że w poprzednich wersjach HTML, div był jedynym znacznikiem - pełniącym funkcje wszystkich wymienionych znaczników. Kod pokazany poniżej pokazuje przykład zastosowania znacznika div:

<body>
  <article>
    <h1>Zwierzęta hodowane w Polsce</h1>
    <p>
      W Polsce hoduje sie między innymi krowy, świnie, konie, kury, kaczki i gęsi.
    </p>
    <div style="background-color:#d1dcf3;">
      <section>
        <h3>Krowy</h3>
        <p>
          Krowa jest fajnym zwierzaczkiem, bo daje mleko.
        </p>
      </section>
      <section>
        <h3>Świnki</h3>
        <p>
          Zwane są oficjalnie trzodą chlewną.
        </p>
      </section>
    </div>
    <div style="background-color:#d5e7d5;">
      <section>
        <h3>Kury</h3>
        <p>
          Wcześniej mówiliśmy o ssakach, natomiast kury są ptakami.
        </p>
      </section>
    </div>
  </article>	
</body>

Zwróć uwagę, że wprowadzone tutaj znaczniki div, pełnią tylko jedną rolę - zmieniają w swoich obszarach kolor tła, powodują to fragmenty zanaczone kolorem jasnozielonym, będziesz się o tym uczył podczas omawiania CSS.

Ćwiczenie 2_1_8_1

Stosując kod pokazany wyżej, wykonaj stronę pokazującą zastosowanie znacznika div. Po wykonaniu, Twoja strona powinna wyglądać następująco:

Praca domowa

Wykonaj stronę na dowolny temat, na której zademonstrujesz zastosowanie znacznika <div>...</div>.


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.