21. Struktura strony HTML5

> Dodaj do ulubionych

W poprzednich rozdziałach skupialiśmy się głównie na semantyce tekstu, czyli elementach HTML5 służących do oznaczania różnych rodzajów treści tekstowej, np. skrótów, wstawionych i usuniętych fragmentów, linków, bardzo ważnych fragmentów tekstu itd. Czyli można powiedzieć, że spoglądaliśmy na stronę od jej najbardziej wewnętrznej warstwy.

Robotnicy na budowie

Teraz, zgodnie z zapowiedzią, przyjmujemy odwrotną perspektywę, czyli zajmiemy się ogólną ramą konstrukcyjną dokumentu HTML5.

Podstawowe elementy konstrukcyjne strony

Budowa typowej strony internetowej obejmuje kilka charakterystycznych elementów, takich jak nagłówek, stopka, pasek boczny, czy obszar treści głównej. W każdym z nich znajdziemy dość standardowy zestaw komponentów, które zazwyczaj umieszcza się w określonym miejscu.

  • Nagłówek: nagłówek strony internetowej (nie mylić z nagłówkiem dokumentu oznaczanym elementem head) to najczęściej szeroki poziomy pas biegnący w górnej części strony. Zazwyczaj zawiera logo serwisu, nawigację główną, pole wyszukiwania, a czasami też na przykład dane kontaktowe i ewentualnie inne elementy.

    Do oznaczania nagłówka strony w języku HTML5 może być używany element header. Reprezentuje on ogólnie różnego rodzaju treści wprowadzające, a więc idealnie nadaje się też do reprezentowania podstawowych komponentów wstępnych, które występują w takiej samej postaci na wszystkich stronach witryny.

  • Treść właściwa: jest to obszar strony, w którym prezentujemy właściwą treść, którą chcemy pokazać użytkownikom, a więc na przykład treść wpisu na blogu, rozdział książki, rozdział kursu itd.

    Treść główną w HTML5 umieszczamy w elemencie main.

  • Pasek boczny: w pasku bocznym zazwyczaj są umieszczone różne informacje dodatkowe, często, choć niekoniecznie, związane z treścią główną strony. W tym miejscu można na przykład znaleźć dodatkową nawigację, listę kategorii bloga, chmurkę tagów, informacje o autorze, pole wyszukiwania, dane kontaktowe i wiele innych informacji.

    Do oznaczania pasków bocznych w języku HTML5 można używać elementu aside.

  • Stopka: w stopce najczęściej umieszcza się informacje o prawach autorskich, linki do stron typu Kontakt, O firmie, Polityka prywatności, czy dane kontaktowe.

    Elementem semantycznym HTML5 służącym do oznaczania stopki strony jest footer.

Poniżej znajduje się schemat przedstawiający typową budowę prostej strony internetowej zawierającej opisane części:

Struktura strony HTML5

Ten schemat przedstawia budowę bardzo prostej strony, którą można podzielić na trzy główne obszary: nagłówek, treść główna (obejmująca treść właściwą i pasek boczny) oraz stopkę. Oczywiście istnieją też o wiele bardziej skomplikowane strony, ale nawet wśród nich większość można sprowadzić z grubsza do tych ram.

Niektóre strony mogą na przykład mieć dwa paski boczne po jednej stronie lub po jednym z lewej i prawej strony treści właściwej, inne mogą mieć treść właściwą podzieloną na parę kolumn itd. Ostatecznie jednak bardzo często wszystko sprowadza się do tego trzyczęściowego schematu.

We wcześniejszych rozdziałach utworzyliśmy trzy strony o ciekawych ludziach, które też dobrze działały, choć nie nadaliśmy im powyższej struktury i nie użyliśmy ani jednego z opisanych w tym rozdziale elementów. Robiliśmy tak, ponieważ naszym celem było poznanie podstaw języków HTML5 i CSS oraz oswojenie się z podstawowymi narzędziami do pracy z nimi.

To podejście ma wiele wad. Na przykład, obecnie nasze strony nie tworzą jednego spójnego serwisu, a jedynie są zbieraniną niespecjalnie ze sobą powiązanych stron o podobnej tematyce. Gdyby czytelnik wszedł na stronę o Erdősie i chciał poczytać o innych ciekawych ludziach, to czekałby go straszny zawód – na tej stronie nie ma żadnego menu ani żadnych odnośników w innej formie, które pozwoliłyby mu otworzyć inne strony witryny.

Zmartwiony chłopiec

Jeśli nie chcemy przysparzać naszym czytelnikom zmartwień, musimy dać im możliwość znalezienia wszystkich stron należących do naszej witryny. W tym celu opracujemy standardową strukturę według powyższego schematu, na której będzie oparta każda strona, i przede wszystkim dodamy stronę główną.

Struktura strony głównej

Każda witryna musi mieć stronę główną, czyli coś w rodzaju okładki książki. Jest to ta strona, która otwiera się w oknie przeglądarki po wpisaniu nazwy domeny, np. shebang.pl, w pasku adresu. Na stronie głównej najczęściej można znaleźć ogólne informacje na temat zawartości witryny, listę paru najpopularniejszych stron serwisu, listę najnowszych artykułów, najświeższe wiadomości itd. Projektanci stron wykazują się naprawdę wielką pomysłowością w zakresie projektu stron głównych.

Nasza strona główna będzie zawierała krótką notkę na temat tego, dlaczego warto poznawać ciekawe osobowości, ozdobioną atrakcyjną grafiką. Zanim jednak napiszemy tę notkę, utworzymy ramową stronę, na której będziemy mogli oprzeć wszystkie pozostałe strony należące do naszej witryny.

Zaczniemy od utworzenia nowego pliku HTML. Standardowo plik strony głównej ma nazwę index z odpowiednim rozszerzeniem. W naszym przypadku jego pełną nazwą będzie index.html, ponieważ nie używamy żadnych technologii serwerowych, typu PHP. Gdybyśmy na naszych stronach używali języka PHP, plik naszej strony głównej nazywałby się index.php.

Teoretycznie strona główna mogłaby mieć dowolną nazwę, ale serwery standardowo traktują plik index jako stronę główną, którą serwują po wpisaniu w pasku adresu przeglądarki nazwy domeny. Inaczej mówiąc, kiedy w przeglądarce wpisujesz adres shebang.pl, to tak naprawdę serwer otwiera stronę index.php tej witryny.

Utwórz więc nowy plik o nazwie index.html w swojej witrynie Ciekawi_ludzie i skopiuj do niego poniższy kod. Zawiera on parę nowych elementów HTML, których opis znajduje się poniżej.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Ciekawi ludzie</title>
    <style></style>
  </head>
  <body>
    <header>
      <hgroup>
        <h1></h1>
        <p></p>
      </hgroup>
      <nav></nav>
    </header>
    <main>
      <article></article>  
    </main>
    <footer></footer>
  </body>
</html>

To jest podstawowa rama konstrukcyjna strony głównej naszej przyszłej witryny. Zawiera trzy opisywane wcześniej podstawowe elementy: nagłówek strony (element header), treść główną (element main) oraz stopkę (footer). Gdybyśmy teraz otworzyli tę stronę w przeglądarce internetowej, to zobaczylibyśmy pusty biały ekran, ponieważ nie dodaliśmy jeszcze żadnej treści. Wkrótce się tym zajmiemy.

Strona główna często różni się od podstron, dlatego nie ma na niej paska bocznego zawierającego elementy aside. Dodamy go później, kiedy będziemy pracować nad podstronami.

Ponadto w tym dokumencie znajduje się kilka nowych elementów, którym musimy się przyjrzeć.

Dodatkowe elementy konstrukcyjne

Nowe elementy HTML w naszym dokumencie ramowym to hgroup, nav i article. Przyjrzymy się im bliżej.

Element hgroup (ang. header group) grupuje nagłówek h1-h6 z powiązaną z nim treścią w formie akapitów. Może to być na przykład tytuł strony w elemencie h1 (coś jak tytuł książki) i znajdujący się pod nim tekst dodatkowy w elemencie p (coś jak podtytuł).

W naszej witrynie możemy na przykład użyć tytułu Ciekawi ludzie (h1) i opatrzyć go podpisem Poznaj ciekawe osoby ze świata nauki i techniki (p).

Następny nowy element to nav (ang. navigation), który reprezentuje nawigację na stronie. Umieścimy w nim menu główne naszej witryny, dzięki któremu użytkownicy będą mogli odnaleźć wszystkie należące do niej strony.

Ostatni z grupy nowych elementów to article. Jego nazwa jest dość zwodnicza, ponieważ automatycznie nasuwa na myśl słowo artykuł (taki jak w gazecie), ale nie o to znaczenie tego angielskiego rzeczownika chodziło redaktorom specyfikacji HTML5. Oznacza ona „artykuł” w sensie „rzecz, przedmiot, obiekt”, czyli coś co stanowi samodzielną odrębną całość na stronie internetowej. Takim czymś może być na przykład treść wpisu na blogu albo artykuł na temat ciekawej osoby.

Skoro mamy już kompletną ramę konstrukcyjną naszej strony, możemy w końcu napełnić ją standardową treścią.

Olbrzym sypiący złoto do dziury

Treść strony głównej

Wypełnianie naszej strony głównej treścią zaczniemy od nagłówka, który jest podzielony na dwie części – tytuł witryny w elemencie hgroup i nawigację główną w elemencie nav:

<header>
  <hgroup>
    <h1>Ciekawi ludzie</h1>
    <p>Poznaj ciekawe osoby ze świata nauki i techniki</p>
  </hgroup>
  <nav>
    <a href="index.html">Główna</a>
    <a href="erdos.html">Paul Erdős</a>
    <a href="feynman.html">Richard Feynman</a>
    <a href="why-the-lucky-stiff.html">why the lucky stiff</a>
  </nav>
</header>

Kolejna część to treść właściwa umieszczona w elemencie article znajdującym się w elemencie main. Dodamy parę akapitów i grafikę, aby uatrakcyjnić naszą stronę główną:

<main>
  <article>
    <img src="img/home-featured.png" alt="" class="featured">
    <p>W świecie nauki i techniki można znaleźć wiele nietuzinkowych i czasami genialnych postaci, które odcisnęły niezatarte piętno na swoich dziedzinach wiedzy.</p>
    <p>Niektóre z tych osób, jak na przykład słynny matematyk Paul Erdős czy genialny fizyk teoretyczny Richard Feynman, miały usposobienie ekstrawertyczne i nie stroniły od zainteresowania innych ludzi.</p>
    <p>Inni są introwertykami, których męczy rozgłos. Należy do nich na przykład znany programista o pseudonimie why the lucky stiff, a także należał nieżyjący już słynny fizyk teoretyczny Paul Dirac.</p>
    <p>Jeśli lubisz poznawać niezwykłe osobowości, które wsławiły się ciekawymi dokonaniami w dziedzinie nauki lub techniki, to w naszej witrynie z pewnością znajdziesz coś dla siebie.</p>
  </article>
</main>

Ostatnia sekcja obejmuje stopkę, w której umieścimy informację o prawach autorskich i parę standardowych odnośników.

<footer>
  <p>Copyright &copy; Shebang 2023 || <a href="kontakt.html">Kontakt</a> | <a href="o-nas.html">O nas</a> | <a href="wspolpraca.html">Współpraca</a></p>
</footer>

Ramy konstrukcyjne strony głównej naszej witryny są gotowe, więc możemy sprawdzić, jak to wygląda w przeglądarce. Skopiuj trzy powyższe fragmenty kodu HTML do elementu body w swoim pliku index.html i wyświetl ten plik w przeglądarce. Widok powinien być mniej więcej taki:

Strona index.html bez grafiki i CSS

Jak na razie nie wygląda to imponująco, ale za pomocą CSS sprawimy, że nasza strona zmieni się nie do poznania. Zwróć uwagę, że w kodzie HTML znajduje się znacznik img dodający obraz, ale jeszcze go nie przygotowaliśmy, więc przeglądarka nie miała czego wyświetlić.

Do kodowania strony w HTML powinno się przystępować na podstawie gotowego projektu. Najczęściej przygotowuje go ktoś inny, np. projektant posługujący się programem graficznym typu Photoshop albo nawet zespół grafików i projektantów. My też już mamy taki gotowy projekt przekazany nam przez nasz zespół projektowy. Oto on:

Finalna strona główna

Może być Ci trudno w to uwierzyć, ale ta strona i poprzednia są prawie identyczne pod względem kodu HTML. Różnią się tylko tym, że do pierwszej nie dołączyliśmy żadnego arkusza stylów, a do drugiej tak (i oczywiście obecnością obrazu graficznego, który możesz pobrać tutaj).

Wbrew pozorom osiągnięcie takiego efektu nie jest trudne i wymaga zastosowania zaledwie paru reguł CSS, na dodatek zawierających prawie wyłącznie znane nam już własności. Jedna z nowości dotyczy formatowania list HTML, więc nie ma co się dziwić, że jej nie znamy. Przecież nie umiemy jeszcze tworzyć list…

Listy HTML to nieskomplikowane konstrukcje, które przede wszystkim służą do prezentowania informacji w punktach. W postaci listy przedstawimy na przykład wykaz zakupów, kroki instrukcji do wykonania itd.

Oprócz tego na stronach internetowych list używa się także do budowy menu nawigacyjnych i właśnie to zastosowanie będzie nas teraz najbardziej interesować, ponieważ przecież w nagłówku mamy menu.

Żołnierz

Krótko mówiąc, aby mieć całą wiedzę potrzebną do utworzenia naszej strony głównej, musimy załatwić jeszcze jeden drobiazg – nauczyć się tworzyć listy i formatować je za pomocą CSS. Temu jest poświęcony następny rozdział.

Podsumowanie

Sum
  • W HTML5 dostępne są semantyczne elementy, których można używać do budowy ram strukturalnych stron.
  • Element header reprezentuje nagłówek strony.
  • W elemencie hgroup można umieścić nagłówek, np. h1, z towarzyszącymi mu innymi elementami.
  • Element nav reprezentuje nawigację główną na stronie.
  • Element main obejmuje właściwą treść główną strony.
  • Element article reprezentuje samodzielny fragment treści, np. tekst wpisu na blogu.
  • Elementu aside można używać do reprezentowania paska bocznego.
  • Element footer zawiera stopkę.