DIV


Do budowy sekcji możemy użyć elementu blokowego <div> (ang. division – oddział, wydział, sekcja). Element ten nazywany jest również box’em (pudełkiem), albo kontenerem (ang. container, contain – zawierać w sobie), z tego względu, że zawiera on w sobie inne elementy.

<div></div>

Do elementu <div> dodajmy dotychczasowe elementy naszego nagłówka, czyli logo i menu główne.

<div>
  <a href="http://how2html.pl">
    <img src="logo.png" alt="logo how2html">
  </a>
  <ul>
    <li><a href="#">Strona Główna</a></li>
    <li><a href="lekcja-1">Lekcja 1</a></li>
    <li><a href="lekcja-2">Lekcja 2</a></li>
  </ul>
</div>

Element <div> jest elementem blokowym, tzn. zajmie całą szerokość strony. Sam element <div> nic szczególnego nie wnosi do naszego kodu, jeśli chodzi o formatowanie. Domyślnie nie zostanie dodana żadna ramka, czy inny kolor tła, żeby wizualnie odróżnić poszczególne sekcje. Będziemy musieli tego dokonać sami, gdy nauczymy się języka CSS.

W celu odróżnienia poszczególnych sekcji od siebie, możemy posłużyć się  atrybutem id, gdyż atrybut ten nadaje unikalność elementom html (żaden inny element html nie powinien posiadać tego samego id). Można powiedzieć, że wartości atrybutu id jaką będziemy nadawać poszczególnym sekcjom to są ich nazwy. Poszczególnym sekcjom możemy nadać dowolne nazwy, jednak powszechnie stosowanymi są angielskie, m.in. header, main oraz footer. Dodajmy nazwę do naszej sekcji nagłówkowej poprzez atrybut id.

<div id="header"></div>

<div id="header">
  <a href="http://how2html.pl">
    <img src="logo.png" alt="logo how2html">
  </a>
  <ul>
    <li><a href="#">Strona Główna</a></li>
    <li><a href="lekcja-1">Lekcja 1</a></li>
    <li><a href="lekcja-2">Lekcja 2</a></li>
  </ul>
</div>

Dokonaliśmy pogrupowania sekcji nagłówkowej. W takim sam sposób możemy tworzyć kolejne sekcje strony internetowej, np. treść główną oraz stopkę.

<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>