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─Ö.