[MCSD 70-480] Tworzenie struktury dokumentu HTML5

W dwóch dotychczasowych postach w tym roku zapewniłem, że będę się w tym roku przygotowywał do egzaminu 70-480 Programming in HTML5 with JavaScript and CSS3. Słowo się rzekło, pora na konkrety. W dzisiejszym wpisie opiszę dokładnie Tworzenie struktury dokumentu HTML5, które jest częścią punktu Wdrożenie i edycja struktur i obiektów dokumentu. Zapraszam do wspólnej nauki 🙂

Wdrożenie i edycja struktur i obiektów dokumentu

Pierwsza część materiału, który będzie sprawdzany w czasie egzaminu to przede wszystkim HTML5. Dokładny opis materiału kształtuje się tak:

Tworzenie struktury dokumentu

  • Tworzenie struktury interfejsu użytkownika przy użyciu znaczników semantycznych, w tym dla aparatów wyszukiwania i czytników ekranu (elementy Section, Article, Nav, Header, Footer i Aside); tworzenie kontenera układu w języku HTML

Pisanie kodu współdziałającego z formantami interfejsu użytkownika

  • Programowe dodawanie i modyfikowanie elementów HTML; wdrażanie sterowania mediami; wdrażanie elementu HTML5 canvas i grafiki SVG

Programowe stosowanie stylów do elementów HTML

  • Zmiana lokalizacji elementu; stosowanie przekształcenia; pokazywanie i ukrywanie elementów

Wdrażanie interfejsów API HTML5

  • Wdrażanie interfejsów API magazynu, interfejsów API AppCache i interfejsów API geolokalizacji

Określanie zakresu obiektów i zmiennych

  • Definiowanie okresu istnienia zmiennych; utrzymywanie obiektów poza globalną przestrzenią nazw; stosowanie słowa kluczowego „this” w celu odwołania się do obiektu, który wyzwolił zdarzenie; lokalne i globalne ustalanie zakresu zmiennych

Tworzenie i wdrażanie obiektów i metod

  • Wdrażanie obiektów natywnych; tworzenie obiektów i właściwości niestandardowych dla obiektów natywnych przy użyciu prototypów i funkcji; dziedziczenie z obiektu; wdrażanie metod macierzystych i tworzenie metod niestandardowych

Dzisiaj skupię się na pierwszej części w której omówię nowe elementy semantyczne, a także sposóby na tworzenie kontenera układu w języku HTML5.

Zrozumienie struktury strony HTML5

HTML oznaczony piątką na końcu nie zmienia podstawowych zasad programowania w tym języku. Wciąż obowiązują standardy przyjęte już dawno temu dotyczące struktury każdej strony internetowej. Każda witryna powinna mieć znaną wszystkim, którzy mieli jakąkolwiek styczność z tym językiem, strukturę.

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8" />
      <title>Tytuł strony</title>
    </head>
    <body>
      <!-- treść strony -->
      </body>
  </html>

I tak patrząc na powyższy przykład każda strona powinna zawierać się pomiędzy znacznikami <html></html>.

Znaczniki <head></head> wyznaczają nam metainformacje dla strony, które nie są wyświetlane dla użytkownika.

Pomiędzy <body> i </body> należy umieścić główną treść strony.

To co odznacza HTML5 to nowe znaczniki, które stosowane są do stworzenia logicznej struktury strony.

Tworzenie struktury interfejsu użytkownika przy użyciu znaczników semantycznych

HTML5 wprowadza wiele nowych znaczników do swojego kodu. Znaczniki te mają za zadanie przede wszystkim pomóc programistom w logicznym ułożeniu struktury dokumentu, ale stosowane są również przez mechanizmy przeszukiwania stron jakie stosowane są przez wyszukiwarki internetowe jak Google, czy Bing.

Microsoft zaleca, aby skupić się na znacznikach przedstawionych w poniższej tabeli:

Znacznik Opis
 <article>  Definiuje niezależny obszar na stronie
 <aside>  Definiuje mniejszy obszar poza główną częścią strony (np. banery reklamowe, dodatkowe informacje nie będące częścią artykułu)
 <figcaption>  Definiuje podpis pod obrazkami, tabelami. wykresy itp.
 <figure>  Definiuje obrazki, tabele, wykresy itp.
 <footer>  Definiuje sekcję na dole strony (stopkę)
 <header>  Definiuje nagłówek do strony, artykułu, sekcji
 <hgroup>  Definiuje grupę nagłówków (H1 – H6)
 <mark>  Definiuje tekst, który powinien zostać wyróżniony
 <nav>  Definiuje nawigację na stronie
 <progress>  Definiuje postęp wykonywanych czynności
 <section>  Definiuje odrębny obszar na stronie

<article>

Znacznik <article> został wprowadzony w celu zdefiniowania niezależnego obszaru na stronie. Artykuł powinien stanowić sens sam sobie i powinien móc być wyświetlany nawet jako całość strony.

Przykład artykułu (ze strony W3schools)

<article>
  <h1>Google Chrome</h1>
  Google Chrome is a free, open-source web browser developed by Google, released in 2008.
</article>

Dobrym przykładem artykułu mogą być:

  • post na bloga
  • wpis na forum
  • komentarz pod artykułem

<aside>

Znacznik <aside> został wprowadzony w celu oddzielenia części strony, która nie stanowi głównej jej treści. Może to być dygresja do artykułu, baner reklamowy, czy sekcja zachęcająca do polubienia strony na facebooku.

Przykład znacznika <aside> (ze strony W3schools)

<p>My family and I visited The Epcot center this summer.</p>
<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

<figure> i <figcaption>

Znaczniki <figure> i <figcaption> zostały wprowadzone w celu standaryzacji przestrzeni do wyświetlania elementów takich jak obrazki, tabele czy wykresy do artykułów. Element taki wprowadzamy w znaczniku <figure>, natomiast <figcaption> używany jest jako podpis pod elementem.

Przykład znaczników <figure> i <figcaption (ze strony W3schools)

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

<footer>

Znacznik <footer> został wprowadzony w celu zdefiniowania stopki strony. W tej sekcji powinny zostać umieszczone informacje takie jak autor strony, krótki formularz kontaktowy, polityka prywatności, czy mapa strony.

Przykład znacznika <footer> (ze strony W3schools)

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

<header>

Znacznik <header> został wprowadzony w celu zdefiniowania nagłówka. Może to być nagłówek zarówno całej strony, ale także artykułu. W nagłówku można zamieścić nagłówki (H1 – H6), ale także logo strony/firmy czy dane autora.

Przykład znacznika <header> (ze strony W3schools)

<article>
  <header>
    <h1>Most important heading here</h1>
    <h3>Less important heading here</h3>
    <p>Some additional information here</p>
  </header>
  <p>Lorem Ipsum dolor set amet....</p>
</article>

<hgroup>

Znacznik <hgroup> został wprowadzony, aby pogrupować nagłówki strony. Może być stosowany w przypadku pisania artykułów zawierających kilka nagłówków (H1 – H6) następujących po sobie. Możemy w ten sposób w przejrzysty sposób wprowadzić początek nowego rozdziału razem z podrozdziałem.

Przykład znacznika <hgroup> (z książki Exam Ref 70-480 Programming in HTML5 with JavaScript and CSS3)

<article>
  <header>
    <hgroup>
      <h1>Our first new Article</h1>
      <h2>Section 1</h2>
    </hgroup>
  </header>
    <section>
      Some useful information
    </section>
</article>

<mark>

Znacznik <mark> został wprowadzony w celu oznaczenia fragmentu tekstu, który powinien zostać wyróżniony.

Przykład znacznika <mark> (ze strony W3schools)

<p>Do not forget to buy <mark>milk</mark> today.</p>

<nav>

Znacznik <nav> został wprowadzony w celu wydzielenia sekcji nawigacji na stronie. W sekcji tej wprowadzamy linki do podstron znajdujących się w witrynie internetowej.

Przykład znacznika <nav> (ze strony W3schools)

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

<progress>

Znacznik <progress> został wprowadzony, aby wyświetlać pasek postępu przy wybranych czynnościach. Pasek taki ma swoje dwie odmiany.

Możemy zdefiniować pasek, który odlicza nam konkretne wartości. Może to być na przykład pasek postępu przy zbieraniu datków w fundacjach charytatywnych, albo pasek oznaczający ilość osiągnięć w grze potrzebnych do odblokowania nowego poziomu.

Przykład znacznika <progress> ze zdefiniowaną wartością:

<p>Nasz cel to 100zł</p>
<progress value="22" max="100"></progress>

Nie zawsze jednak w przypadku czynności wykonywanych w internecie mamy możliwość ustawienia określonej wartości końcowej. Nieoznaczony postęp możemy stosować w przypadku wykonywania czynności asynchronicznych, czy podczas ściągania plików z zewnętrznego web service gdzie nie wiemy jaka jest faktyczna wielkość pliku.

Przykład znacznika <progress> bez zdefiniowanej wartości:

<progress max="5"></progress>

Jak widać znaczniki te różnią się jedynie elementem wskazującym aktualną wartość.

Uwaga! Znaczniki postępu wyglądają odmiennie na różnych przeglądarkach.

Poniżej przykłady z Internet Explorera:

progress_bez_wartosci

progress_z_wartoscia

<section>

Znacznik <section> został wprowadzony w celu zaznaczenia sekcji dokumentu. Może to być na przykład rozdział artykułu, bądź inna niezależna część większego bloku tekstu.

Przykład znacznika <section> (ze strony W3schools)

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

Inne znaczniki

Wspomniane powyżej znaczniki są wyróżnione przez Microsoft, jako te które powinny być używane właściwie na każdej stronie. To jednak nie oznacza tego, że tylko te znaczniki są nowością.

Mamy również między innymi:

  • <main> -wskazujący główną treść strony (wszystko to co nie wchodzi w footer, header, czy nav)
  • <audio> <video> – wyświetlający pliki dźwiękowe i wideo na stronie
  • wiele, wiele innych

W czasie przygotowań do egzaminu polecam zajrzeć na stronę W3schools (tagi) i zapoznać się ze wszystkimi znacznikami, a w szczególności tymi oznaczonymi logiem HTML5.

Tworzenie kontenera układu graficznego w HTML

Na przestrzeni lat sposób tworzenia kontenera układu graficznego w HTML zmieniał się wiele razy.

Tabele

W czasach kiedy byłem jeszcze w podstawówce, czy gimnazjum królowały tabele. Cała strona internetowa była jedną wielką tabelą, której komórki rozdzielały pasek nawigacji, nagłówki, stopkę i główną część strony. Wyglądało to mniej więcej tak:

<table>
  <tr>
    <td colspan="3" id="Header"></td>
  </tr>
  <tr>
    <td rowspan="3" id="LeftBar"></td>
    <td rowspan="3" id="MainContent"></td>
    <td id="RightSideTop"></td>
  </tr>
  <tr>
    <td id="RightSideMiddle"></td>
  </tr>
  <tr>
    <td id="RightSideBottom"></td>
  </tr>
  <tr>
    <td colspan="3" id="Footer"></td>
  </tr>
</table>

Na szczęście ktoś po jakimś czasie zauważył, że sposób ten jest bardzo nieefektywny. Po pierwsze tabele powinny być używane TYLKO i WYŁĄCZNIE w celu wyświetlania danych statycznych, a po drugie taka struktura dokumentu wymagała od nas kopiowania całej tabeli pomiędzy podstronami.

Dzisiaj na szczęście czasy się zmieniły i zdecydowanie ODRADZAM stosowania tabel do tworzenia układu strony.

Divy

Po tabelach przyszedł czas na tworzenie kontenera na znacznikach <div>. Znacznik ten jest używany jako swoisty kontener na treść. Jest to bardzo elastyczna struktura, która sama w sobie nie wyświetla się w żaden sposób, jednak przy użyciu odpowiedniego kodu CSS możemy zdziałać na nim bardzo dużo. Do dzisiejszego dnia wiele stron zbudowanych jest po prostu na divach ze względu na to, że przeglądarki doskonale sobie radzą z ich odczytaniem i często nie ma potrzeby na przepisywanie istniejącej strony po to tylko, aby użyć nowych znaczników.

Przykład z tabelami można przerobić na divy w bardzo prosty sposób:

<div id="Header"></div>
<div id="LeftBar"></div>
<div id="MainContent"></div>
<div id="RightSideTop"></div>
<div id="RightSideMiddle"></div>
<div id="RightSideBottom"></div>
<div id="Footer"></td>

Kod ten oczywiście pomimo tego, że poprawny nie da nam takiego samego rezultatu jak tabele. Tak jak wspomniałem powyżej divy nie są wyświetlane w żaden szczególny sposób. Aby osiągnąć efekt jak przy tabelach należy do tego kodu dołożyć jeszcze odpowiednie style CSS.

Nowa semantyka

Nowe znaczniki, które zalecane są przy najnowszych stronach internetowych działają na bardzo podobnej zasadzie. Powyższy przykład można przerobić po prostu zastępując divy odpowiednimi znacznikami takimi jak <header>, <footer>, <nav>, <aside> itp.

img_sem_elements

Dzięki temu, a także zastosowaniu styli CSS możemy uzyskać strukturę widoczną powyżej.

Optymalizacja strony pod SEO oraz czytników ekranu

Jak wszyscy wiedzą strony internetowe nie istnieją jeśli nie znajdują się w Googlu, albo Bingu (przede wszystkim to pierwsze 🙂 ). Dodatkowo jeżeli prowadzimy biznes chcemy, aby nasza strona wyświetlała się w wynikach wyszukiwania jak najwyżej. Aby to osiągnąć musimy od samego początku myśleć o optymalizacji pod kątem wyszukiwarek (SEO – Search Engine Optimization). Google i Bing nigdy nie śpią. Ich roboty codziennie w każdej minucie przeczesują internet indeksując treści na każdej ze stron. W dużym skrócie im cenniejszą mamy treść na stronie tym wyżej będziemy wyświetlani w czasie wyszukiwania. Pierwszą zasadą którą należy się kierować jest odpowiednia struktura strony. Google bardzo często zmienia algorytmy indeksowania stron, jednak możemy mieć pewność, że jeżeli mamy dobrą strukturę strony to roboty lepiej odczytają to co mamy do przekazania i dostaniemy więcej punktów. Dlatego też bardzo ważne jest, aby nowoczesne strony internetowe zawierały nowe znaczniki HTML5.

Czytniki ekranów są specjalnymi programami, które są w stanie zamienić tekst na mowę (ang. Text to Speech), których używają osoby niewidome. Nowe znaczniki HTML5 mocno ułatwiają pracę takim czytnikom. Programy do czytania są w stanie pominąć takie znaczniki jak <footer>, czy <nav>, a skupić się na faktycznej treści strony.

Jeżeli mamy odpowiednią strukturę zawartą w znacznikach <article><section><h1>-<h6> czytniki są w stanie odczytać naszą stronę w sposób zrozumiały dla osób, które tekstu nie mogą zobaczyć.

Co więcej?

Och dużo tej wiedzy jak na pierwszy niewielki rozdział. Jednak trzeba pamiętać o tym, że egzamin nie musi się skupiać tylko na nowych znacznikach języka HTML5. Myślę, że dodatkowo warto zapoznać się ze wszystkimi znacznikami (nowymi i starymi) dostępnymi na W3schools (tagi), czy poczytać o tworzeniu konspektu dokumentu na Html5doctor

Related posts

  • Pingback: dotnetomaniak.pl()

  • Kacper Werema

    Powodzenia w zrobieniu certyfikatu! 🙂 Chętnie będę śledził postępy i może sam czegoś nowego się dowiem w dalszej części tej „serii” 🙂

    • Kajetan Duszyński

      Hej. Wielkie dzięki. Mam nadzieję, że pomimo mocno technicznych wpisów będzie Ci się dobrze czytało 🙂