Table of contents icon

Obserwuj @varjs

Kodujemy artykuł na bloga

Rozdział 4

Pora na kolejne ćwiczenie, które powinno pokazać Ci filozofię pisania bardziej zaawansowanych stron internetowych w HTML5.

Spróbujmy uzyskać poniższy efekt. Uznajmy, że jest to artykuł na bloga.

Zauważ, że mamy tutaj jeden nagłówek (tytułowy). Poza tym są informacje o autorze, a także zdjęcie z opisem oraz akapit z cytatem (ostatni). Warto dodać, że w przyszłości podczas swojej pracy jako front-end developer z reguły będziesz dostawał od grafika projekt strony w pliku graficznym i na jego podstawie będziesz musiał przenieść wszystko do HTML-a.

Zacznijmy od elementów, które zawsze są stałe i nie zmieniają się. Jak powiedzieliśmy sobie wcześniej, każda strona ma doctype, tag <html>, a w nim <head> i <body>. W <head> powinien z kolei znaleźć się kod, który ustawi odpowiednie kodowanie znaków diakrytycznych. A więc nasz startowy szablon wyglądał będzie tak:

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8"> 
  </head>
  <body>
  </body>
</html>

Na pierwszy rzut oka brakuje jeszcze tytułu całej strony. Dodajmy go!

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Justin Bober zafascynowany HTML-em</title>
  </head>
  <body>
  </body>
</html>

W tym momencie mamy gotowy szablon, który możemy uzupełniać tekstem artykułu.

Jeśli zapiszemy taki plik jako article.html i potem otworzymy go w przeglądarce – nic nie zobaczymy, ponieważ pomiędzy <body></body> nie ma żadnej treści. Czas więc na jej analizę. Zaczynamy standardowo od najbardziej ogólnej części, wyróżniając stopniowo bardziej szczegółowe.

Do czynienia mamy z artykułem/postem na bloga. To pierwsza, bardzo istotna informacja. Następnie mamy część informacji nagłówkowych, jak to w artykułach bywa. Składa się ona z tytułu “Justin Bober: Odkąd nauczyłem się HTML-a, moje życie zmieniło się o 360 stopni" i informacji o autorze - “Napisał: Damian Wielgosik". Potem jest pierwszy akapit tekstu, miejsce na zdjęcie i jego opis oraz ostatni akapit, w którym zaznaczony jest cytat: “Prawdopodobnie zaśpiewam o HTML-u na mojej następnej płycie". To wszystko. Tego typu przeprowadzona analiza bardzo pomaga uzmysłowić sobie w głowie, jak będzie wyglądał kod HTML. Zaczynamy od najbardziej ogólnego elementu (główny rodzic), a następnie wyróżniamy jego dzieci, czyli wszystko, co się w nim zawiera (np. tytuł i informacje o autorze w nagłówku).

Ustaliliśmy, że mamy do czynienia z artykułem (a więc nazwanym materiałem tekstowym, posiadającym między innymi tytuł i kilku akapitów tekstu). Dodajmy tę informację do naszego kodu HTML:

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Justin Bober zafascynowany HTML-em</title>
  </head>
  <body>
    <article>
    </article>
  </body>
</html>

Jak zapewne zauważyłeś, użyliśmy elementu <article>, który oznacza właśnie taki materiał tekstowy w HTML. Artykuł składa się z nagłówka i akapitów stanowiących jego treść, a więc wszystkie tagi reprezentujące nagłówek i akapity znajdą się naturalnie w obrębie <article>.

Idąc dalej według listy elementów, które wyróżniliśmy, natrafiamy na sekcję złożoną z informacji nagłówkowych. A więc tytułu i danych autora. Tego typu sekcję w HTML5 oznaczamy poprzez tag <header> (ang. “header" to nagłówek). Grupuje on różne dane nagłówkowe danej sekcji (w tym przypadku jest to artykuł).

Dodajmy więc <header> do kodu. Przy okazji zauważ, że poruszamy się od góry do dołu, zagłębiając się (zauważ wcięcia) do poszczególnych elementów, tworząc swego rodzaju hierarchię.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Justin Bober zafascynowany HTML-em</title>
  </head>
  <body>
    <article>
      <header>
      </header>
    </article>
  </body>
</html>

Sekcja nagłówkowa gotowa, jednak nic w niej nie ma. Ustaliliśmy, że powinny znaleźć się tutaj tytuł i dane autora.

Tytuł oznaczymy tzw. nagłówkiem pierwszego stopnia, czyli najważniejszym. Będzie to tag <h1>. Jako że nie ma w HTML-u bardziej stosownego tagu do opisania informacji o autorze, używamy z kolei zwykłego <p>.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Justin Bober zafascynowany HTML-em</title>
  </head>
  <body>
    <article>
      <header>
        <h1>Justin Bober: Odkąd nauczyłem się HTML-a, moje życie         zmieniło się o 360 stopni</h1>
        <p>Napisał: Damian Wielgosik</p>
      </header>
    </article>
  </body>
</html>

Przy okazji wiedz, że oprócz <h1> są jeszcze w HTML nagłówki niższych stopni:

Elementy te odwzorowują logiczną strukturę tytułów i podtytułów. A więc jeśli mamy na przykład do czynienia z książką, to jej tytuł będzie zawarty pomiędzy elementem <h1>, czyli najważniejszym, głównym nagłówkiem. Następnie nazwy rozdziałów będą oznaczone tagiem <h2>, a na podrozdziałów - <h3>. Nie można na to spoglądać w ten sposób, że jeśli treść na stronie jest nieco mniej ważna, to ni stąd ni zowąd oznaczymy ją <h4> według naszego “widzimisię" - musimy zachować kolejność, a więc jeśli <h4> to wcześniej musi być gdzieś <h3>, dla którego <h4> to podtytuł. Wcześniej muszą wystąpić kolejno <h2> i <h1>. Na przykładzie tej książki mogłoby to wyglądać tak: 

<h1>Podręcznik do matematyki</h1>
<h2>Liczby</h2>
<h3>Parzyste</h3>
<h2>Funkcje</h2>
<h3>Funkcja logarytmiczna</h3>

Idąc dalej, dodajmy pierwszy akapit tekstu. Aby to zrobić omijamy <header>, ponieważ logika nakazuje, aby treść samego artykułu była bezpośrednio częścią <article>, a nie nagłówka.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Justin Bober zafascynowany HTML-em</title>
  </head>
  <body>
    <article>
      <header>
        <h1>Justin Bober: Odkąd nauczyłem się HTML-a, moje życie zmieniło się o 360 stopni</h1>
        <p>Napisał: Damian Wielgosik</p>
      </header>
      <p>Justin Bober wyznał coś, czego nie spodziewaliby się nawet najwięksi fani tego zdolnego muzyka i eseisty. Młody rockendrolowiec przyznał, że odkąd postawił pierwszy znacznik title, jego życie stało się łatwiejsze. Ponoć prywatnymi mentorami Bobera stali się, jak donoszą osoby z otoczenia Kanadyjczyka, Ryan Losling i Nicolas Klatka. Często spacerują po Los Angeles i rozprawiają godzinami o tym, jak fajnym narzędziem jest walidator HTML.</p>
    </article>
  </body>
</html>

Następnie czas na dodanie zdjęcia i jego opisu. Dla tego typu treści – a więc powiązanych tematycznie z całym dokumentem np. zdjęć, wykresów czy map, stworzono tag <figure>. Warto dodać, że warunkiem użycia jest to, że nie powinien mieć on wpływu na znaczenie całego dokumentu, a więc równie dobrze zamieszczona w nim treść mogłaby być na oddzielnej stronie. Jako dziecko <figure> można użyć dodatkowo elementu <figcaption>, w którym umieścimy opis zdjęcia.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Justin Bober zafascynowany HTML-em</title>
  </head>
  <body>
    <article>
      <header>
        <h1>Justin Bober: Odkąd nauczyłem się HTML-a, moje życie zmieniło się o 360 stopni</h1>
        <p>Napisał: Damian Wielgosik</p>
      </header>
      <p>Justin Bober wyznał coś, czego nie spodziewaliby się nawet najwięksi fani tego zdolnego muzyka i eseisty. Młody rockendrolowiec przyznał, że odkąd postawił pierwszy znacznik title, jego życie stało się łatwiejsze. Ponoć prywatnymi mentorami Bobera stali się, jak donoszą osoby z otoczenia Kanadyjczyka, Ryan Losling i Nicolas Klatka. Często spacerują po Los Angeles i rozprawiają godzinami o tym, jak fajnym narzędziem jest walidator HTML.</p>
      <figure>
        <img src="cat.jpg" alt="Kot Justina Bobera jest zadowolony">
        <figcaption>Zadowolony kot Justina Bobera</figcaption>
      </figure>

    </article>
  </body>
</html>

Po uporaniu się z dodaniem obrazka, pozostało już nam tylko umieścić ostatni akapit na stronie z artykułem. Zauważ, że jego fragment – “Prawdopodobnie zaśpiewam o HTML-u na mojej następnej płycie" – został wyróżniony jako cytat. Należy więc stosownie zaznaczyć to w naszym kodzie, aby całość nabrała sensu semantycznego. Być może w przyszłości ktoś będzie szukał cytatów z Justina Bobera i takie oznaczenie pomoże w szybszym znalezieniu tego cytatu. Inaczej wyszukiwarka miałaby do czynienia z jedną, wielką masą tekstu, z której ciężko byłoby wyłapać cytat.

Do oznaczania cytatów stworzono tag <q>

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Justin Bober zafascynowany HTML-em</title>
  </head>
  <body>
    <article>
      <header>
        <h1>Justin Bober: Odkąd nauczyłem się HTML-a, moje życie zmieniło się o 360 stopni</h1>
        <p>Napisał: Damian Wielgosik</p>
      </header>
      <p>Justin Bober wyznał coś, czego nie spodziewaliby się nawet najwięksi fani tego zdolnego muzyka i eseisty. Młody rockendrolowiec przyznał, że odkąd postawił pierwszy znacznik title, jego życie stało się łatwiejsze. Ponoć prywatnymi mentorami Bobera stali się, jak donoszą osoby z otoczenia Kanadyjczyka, Ryan Losling i Nicolas Klatka. Często spacerują po Los Angeles i rozprawiają godzinami o tym, jak fajnym narzędziem jest walidator HTML.</p>
      <figure>
        <img src="cat.jpg" alt="Kot Justina Bobera jest zadowolony">
        <figcaption>Zadowolony kot Justina Bobera</figcaption>
      </figure>
      <p>Bober stworzył już kilka  stron i nie zamierza na tym poprzestać. <q>Prawdopodobnie zaśpiewam o HTML-u na mojej następnej płycie</q> - dodaje artysta.
      </p>
    </article>
  </body>
</html>

Zapisz teraz cały kod do pliku z rozszerzeniem .html i wyświetl go w przeglądarce. Właśnie stworzyłeś swoją drugą stronę. Świetnie! To kolejny krok do zostania profesjonalnym twórcą stron internetowych.