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.

Ciało dokumentu (treść strony)

W ćwiczeniach wykonanych do tej pory umieszczaliśmy krótkie teksty w znaczniku <body></body>. W obszarze wyznaczonym tym znacznikiemm umieszczamy treść strony, czyli wszystko to co przeglądarka wyświetli w swoim oknie. Gdyby na stronach umieszczano tylko tekst, to w tej chwili wiedziałbyś już prawie wszystko o tworzeniu stron WWW, ponieważ jednak tak nie jest, to musisz zdać sobie sprawę, że Twoja nauka dopiero tak naprawdę w tym miejscu się zaczyna...
To jest moment na który na pewno z niecierpliwością czekałeś, ponieważ od tej chwili będziemy się zajmować treścią strony.
Na wstępie musimy mocno podkreślić znaczenie dwóch pojęć:

  • strona internetowa, w skrócie strona posiada konkretny, niepowtarzalny adres URL i jest pokazywana w oknie przeglądarki
  • Serwis internetowy, w skrócie serwis lub witryna - grupa stron internetowych powiązanych ze sobą porzez hiperłącza

Schemat układu treści strony

Webmaster musi dokładnie przemyśleć jak ma wyglądać dana strona. Musi mieć na uwadze, że powinna być logicznie powiązana z innymi stronami witryny. W efekcie powinien podzielić wyświetlany przez przeglądarkę obszar, tak aby poszczególne jego fragmenty - sekcje (znacznik <section></section>) niosły odpowiednie znaczenia semantyczne. W tym ujęciu można by mówić o szkielecie treści (treść to <body></body>), przy czym nie można tego pojęcia mylić ze szkieletem dokumentu, co jak wiemy znaczy coś zupełnie innego. Można wyróżnić następujące główne elementy typowej strony:

  • Nagłówek serwisu (znacznik <header></header>), który występuje w podobnej postaci na wszystkich stronach witryny. Zazwyczaj umieszczamy tutaj logo, tematykę serwisu, nazwę firmy, formularz wyszukujący, jakąś bardzo krótką, zwięzłą informację, itp. W sensie logicznym oraz wizualnym nagłówek rozpoczyna stronę. Nagłówek może posiadać elementy nawigacyjne np. odnośnik do strony głównej serwisu. Pojęcie nagłówka może być mylące ponieważ oznacza ono również:
  • Stopka serwisu (znacznik <footer></footer>) - zamyka stronę. Inaczej będzie wyglądała w przypadku oficjalnej strony firmowej, inaczej na prywatnej stronie a jeszcze inaczej na blogu czy sklepie internetowym. Należy jednak pamiętać, że stopka powinna być swym wyglądem dopasowana do wyglądu strony. Najczęściej występujace elementy:
    • informacje o autorze strony, prawa autorskie,
    • na stronach firmowych odnośnik do podstrony np. Praca,
    • odnośnik przenoszący do góry strony,
    • linki pozycjonujące,
    • w przypadku stron firmowych w stopce umieszcza się również nazwę i dane firmy, regulamin serwisu czy politykę prywatności,
    • odnośniki do serwisów społecznościowych np. do facebooka czy twittera,
    • stopki blogowe często zawierają np. odnośniki do ostatnich artykułów komentarzy, archiwum.
    Ilość informacji zawartych w stopce należy ograniczyć do niezbędnego minimum.
    Poszczególne sekcje, mogą posiadać własne stopki.
  • Sekcja nawigacyjna serwisu (znacznik <nav></nav>) - zawiera listę linków do innych stron albo do określonych fragmentów na tej samej stronie. Nie wszystkie odnośniki na stronie powinny być umieszczane w tej sekcji, a tytlko te, które decydują o funkcjonowaniu witryny. Na przykład, często w stopce serwisu znajdują się linki które nie mają charakteru sekcji nawigacyjnej serwisu.
    Poszczególne sekcje strony mogą posiadać własne sekcje nawigacyjne.
Schemat szkieletu treści strony
Rysunek 1_2_0_1. Schemat przykładowego szkieletu treści witryny (<body></body>)
Kod dla powyższego przykładu będzie wyglądał następująco:
<body>
  <header>
    Nagłówek <header></header>
  </header>
  <nav>
    Menu <nav></nav>
  </nav>
    <section>
      Sekcja 1 <section></section>
    </section>
    <section>
      Sekcja 2 <section></section>
    </section>
  <footer>
    Stopka <footer></footer>
  </footer>		
</body>

Ćwiczenie 1_2_0_1

Wykonaj stronę WWW wykorzystując wykonany wcześniej szkielet dokumentu oraz powyższy kod. Stronie nadaj tytuł Schemat układu treści strony.

Tak powinna wyglądać poprawnie wykonana strona:

Powiecie zapewne - zaraz, zaraz, co to ma być? Gdzie są kolorowe prostokąty rozmieszczone w całym oknie przeglądarki? Spokojnie, wszystko jest w porządku, tyle że brakuje jednej rzeczy - zdefiniowanych stylów CSS. Widzicie jaka jest ich moc? Jak je poznamy,to powrócimy do tego ćwiczenia.

Praca domowa

Wykonaj w zeszycie szkic przykładowego układu treści witryny. Opisz własnymi słowami znaczenie poszczególnych sekcji.


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.