Cechy kompletnego kodu HTML

Rozdział 3

Parę minut temu powstała nasza pierwsza strona internetowa. Muszę Cię jednak nieco zmartwić – nie jest jeszcze kompletna według obowiązujących standardów pisania stron. Tak jak inżynierowie muszą trzymać się wytycznych projektowych, a restauratorzy regulaminu Sanepidu, tak i web developerzy muszą stosować się do pewnych z góry wyznaczonych zasad, które definiują dobrze wykonaną robotę. W przypadku tworzenia stron internetowych powstały standardy sieciowe, które stoją na straży dobrych praktyk. Mówią nam między innymi, jakie tagi możemy zagnieżdżać w jakich (a więc to, co przed chwilą omówiliśmy), czy też jak powinien wyglądać pełny dokument HTML, do którego nikt nie może się przyczepić. No właśnie, zapytasz pewnie: jak? Już tłumaczę!

Zacznijmy od kodu ogłoszenia o pracę:

<h1>Poszukujemy developera HTML i CSS</h1>

<img src="images/white-cat.jpg">
<p>Dla naszego klienta, Kociej Fabryki, <strong>poszukujemy zdolnego programisty</strong> stron internetowych w HTML i CSS. Oferujemy przyzwoite zarobki, worek karmy i zabawek.</p>

<p>Nie czekaj, napisz teraz! Nasza zwariowana ekipa czeka na Ciebie!</p>

Czego tu brakuje, by było "po bożemu"? Zaczynając tradycyjnie od góry, w każdym szanującym się dokumencie HTML należy umieścić najpierw tzw. doctype:

<!DOCTYPE html>
<h1>Poszukujemy developera HTML i CSS</h1>

<img src="images/white-cat.jpg">
<p>Dla naszego klienta, Kociej Fabryki, <strong>poszukujemy zdolnego programisty</strong> stron internetowych w HTML i CSS. Oferujemy przyzwoite zarobki, worek karmy i zabawek.</p>

<p>Nie czekaj, napisz teraz! Nasza zwariowana ekipa czeka na Ciebie!</p>

"Powie" to przeglądarce o tym, że ma na pewno do czynienia z dokumentem HTML i podczas ładowania strony powinna potraktować powyższy kod według ustalonych dla języka standardów. Zostanie więc poinformowana o kilku regułach, jakimi powinna się kierować, wyświetlając naszą stronę – będzie między innymi wiedzieć, jakie tagi mogą być zawarte w jakich, czy też które są dozwolone, a które nie. Pomoże jej to lepiej zinterpretować nasz kod.

Pod doctype’em powinniśmy z kolei umieścić znacznik <html>:

<!DOCTYPE html>
<html>
<h1>Poszukujemy developera HTML i CSS</h1>

<img src="images/white-cat.jpg">
<p>Dla naszego klienta, Kociej Fabryki, <strong>poszukujemy zdolnego programisty</strong> stron internetowych w HTML i CSS. Oferujemy przyzwoite zarobki, worek karmy i zabawek.</p>

<p>Nie czekaj, napisz teraz! Nasza zwariowana ekipa czeka na Ciebie!</p>
</html>

Zauważ, że cały dotychczasowy kod naszej strony umieściliśmy pomiędzy <html></html>:

<!DOCTYPE html>
<html>
nasz kod
</html>

A więc wszystko, co należy do naszej strony zawiera się w tagu <html>. Ma to sens - kod HTML powinien zawierać się w znaczniku <html>.

Idąc dalej, znacznik <html>, który dodaliśmy, nie jest jeszcze gotowy. Musimy umieścić jeszcze informację, w jakim języku jest nasza strona. Jako że jest to język polski, użyjmy stosownego oznaczenia:

<!DOCTYPE html>
<html lang="pl">
<h1>Poszukujemy developera HTML i CSS</h1>

<img src="images/white-cat.jpg">
<p>Dla naszego klienta, Kociej Fabryki, <strong>poszukujemy zdolnego programisty</strong> stron internetowych w HTML i CSS. Oferujemy przyzwoite zarobki, worek karmy i zabawek.</p>

<p>Nie czekaj, napisz teraz! Nasza zwariowana ekipa czeka na Ciebie!</p>
</html>

Niniejszym dodaliśmy do naszego tagu tzw. "atrybut". Atrybutem w HTML jest wszystko, co napiszemy obok nazwy znacznika HTML, ale pomiędzy <>. Atrybuty definiujemy według następującego szablonu:

nazwaAtrybutu="wartość atrybutu"

Pozwól mi podać kilka przykładów z życia. Na swojej drodze jako developer HTML możesz spotkać ich wiele, ponieważ oprócz "lang" jest ich całe mnóstwo:

<div id="sidebar"></div> - nazwą atrybutu jest "id", a jego wartością "sidebar"
<p class="landscape"></body> - nazwą atrybutu jest "class", a jego wartością "landscape"
<input type="text"> - nazwą atrybutu jest "type", a jego wartością "text"

Dlaczego używamy atrybutów? Zauważ, że sam znacznik HTML – w naszym wypadku <html> – może być niewystarczający, jeśli chodzi o informacje, jakie zawiera. Dzięki atrybutom możemy opisywać tagi, których używamy i dodawać więcej informacji o nich. W tym wypadku daliśmy znać, że nasz dokument HTML został napisany w języku polskim, a więc dodaliśmy do tagu <html> atrybut lang (skrót od language po angielsku). Takich przypadków jest więcej i dowiesz się o nich w trakcie lektury tej książki.

Atrybutów dla jednego tagu HTML może być wiele. Tutaj kilka przykładów z życia wziętych:

<input type="text" value="wpisz tutaj tekst">
<a href="http://functionite.pl" title="Strona szkoleniowa firmy Functionite">szkolenie z HTML</a>

I tak dalej.

Ważną informacją jest fakt, że standard języka HTML, oprócz zasad zagnieżdżania tagów, zdefiniował też dla każdego z nich listę dostępnych atrybutów. A więc mając do dyspozycji na przykład tag <p> łatwo dowiemy się, jakich atrybutów możemy użyć z nim w parze.

Kończąc rozprawę o atrybutach warto dodać, że już wcześniej użyłeś jednego z nich. Pamiętasz obrazek? Wstawiłeś go do dokumentu HTML poprzez umieszczenie następującej linijki:

<img src="images/white-cat.jpg">

W tym przypadku został użyty atrybut src z wartością images/white-cat.jpg. Bez niego mielibyśmy jedynie sam tag HTML:

<img>

Jeślibyśmy tak to zostawili, przeglądarka nie miałaby żadnej informacji z jakiego źródła wyświetlić obrazek. Dzięki atrybutowi "src" mówimy przeglądarce: "hej, załaduj obrazek ze źródła, który Ci podałem i wyświetl go". W tym wypadku z "images/white-cat.jpg", a więc przeglądarka w folderze, w którym znajduje się nasza strona poszuka katalogu "images", a potem obrazka "white-cat.jpg". Można również podać adres do pliku znajdującego się na innym serwerze, na przykład http://4.bp.blogspot.com/-z4sMggeD4dg/UO2TB9INuFI/AAAAAAAAdwc/Kg5dqlKKHrQ/s1600/funny-cat-pictures-032-025.jpg.

Tak właśnie działają atrybuty. Dzięki nim podajemy przeglądarce dodatkowe informacje, które są pomocne w wyświetlaniu danych tagów HTML lub czasem też niezbędne - jak przy obrazkach.

Przechodząc jednak z powrotem do ulepszania naszego dokumentu, dodajmy do niego kolejne, niezbędne fragmenty. Tym razem będzie to tag <head>, w którym umieszcza się różne elementy, nieco mniej istotne niż sama treść dokumentu. Na przykład jego tytuł, informacje pomocne dla wyszukiwarek internetowych i tak dalej. <head> umieszczamy w <html>:

<!DOCTYPE html>
<html lang="pl">
  <head>
  </head>
  <h1>Poszukujemy developera HTML i CSS</h1>

  <img src="images/white-cat.jpg">
  <p>Dla naszego klienta, Kociej Fabryki, <strong>poszukujemy zdolnego programisty</strong> stron internetowych w HTML i CSS. Oferujemy przyzwoite zarobki, worek karmy i zabawek.</p>

  <p>Nie czekaj, napisz teraz! Nasza zwariowana ekipa czeka na Ciebie!</p>
</html>

Na razie jest on pusty, jednak jak powiedziałem, można umieścić w nim m.in. tytuł całego dokumentu. Jako że tworzymy stronę z ofertą pracy, niech jej tytuł brzmi "Oferta pracy: developer HTML i CSS". Brzmi w porządku, prawda? Do dzieła, dodajmy go!

<!DOCTYPE html>
<html lang="pl">
  <head>
    <title>Oferta pracy: developer HTML i CSS</title>
  </head>
  <h1>Poszukujemy developera HTML i CSS</h1>

  <img src="images/white-cat.jpg">
  <p>Dla naszego klienta, Kociej Fabryki, <strong>poszukujemy zdolnego programisty</strong> stron internetowych w HTML i CSS. Oferujemy przyzwoite zarobki, worek karmy i zabawek.</p>

  <p>Nie czekaj, napisz teraz! Nasza zwariowana ekipa czeka na Ciebie!</p>
</html>

Jak widzisz, dodaliśmy ten tytuł pomiędzy znacznikiem <title>. Zapewne zapytasz, jaka jest różnica i po co w ogóle to zrobiliśmy? Niech wyjaśnią Ci to dwa poniższe zrzuty ekranu, gdzie pokazane jest wyświetlanie strony z <title> i bez <title>.

Gdyby z kolei Onet nie miał znacznika <title>, ciężko byłoby się połapać choćby w wynikach wyszukiwania:

Jak widzisz, jest to bardzo ważny element kodu Twojej strony. Bez niego byłaby ona bez nazwy, co zdecydowanie odbiłoby się na odwiedzinach internautów – osobiście nie zaufałbym stronie, która nie ma nawet tytułu.

Pozostała nam teoretycznie ostatnia rzecz do naprawienia. Musimy dodać znacznik <body>, w którym zawsze umieszczamy treść całej strony. Wszystko, co wyświetla się w przeglądarce pod paskiem adresu jest umieszczone w <body>.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <title>Oferta pracy: developer HTML i CSS</title>
  </head>
  <body>
    <h1>Poszukujemy developera HTML i CSS</h1>

    <img src="images/white-cat.jpg">
    <p>Dla naszego klienta, Kociej Fabryki, <strong>poszukujemy zdolnego programisty</strong> stron internetowych w HTML i CSS. Oferujemy przyzwoite zarobki, worek karmy i zabawek.</p>

    <p>Nie czekaj, napisz teraz! Nasza zwariowana ekipa czeka na Ciebie!</p>
  </body>
</html>

Hurra! Wygląda to na koniec naszych starań i wydaje się, że wszystko się zgadza. Jako początkujący twórca stron internetowych zapytasz zapewne, jak sprawdzić, czy wszystko jest ok, czy zagnieździłeś odpowiednio tagi i użyłeś dobrych atrybutów. Przecież nie każdy ma wśród znajomych zaawansowanych developerów HTML, których może poprosić o konsultacje. Intuicja Cię nie zawiodła. Istnieje specjalne narzędzie, którym sprawdzamy poprawność naszego kodu. Zrobiła go organizacja W3C, ta sama, która definiuje standard i stoi na straży poprawności dokumentów HTML. To narzędzie nazywa się po prostu walidatorem HTML i jest dostępne na stronie http://validator.w3.org. Gdy wejdziesz na tę stronę powinieneś zobaczyć taki obrazek:

Wykorzystajmy go i sprawdźmy, czy nasz kod jest poprawny.

Ups. Nie udało się. Mamy jeden błąd i 3 ostrzeżenia. Przyjrzyjmy się im.

Jedyny błąd jaki zgłosił walidator dotyczy naszego obrazka. Oto treść komunikatu:

An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

Okazuje się, że tagi <img> w naszym dokumencie muszą mieć zawsze atrybut alt, który zostanie użyty, gdyby przeglądarka nie mogła załadować obrazka. Wtedy wyświetli się treść tego atrybutu - lepsze to, niż pusta przestrzeń, prawda? Przy okazji użytkownik czytający naszą stronę nie straci być może cennych informacji, które zawarte były w postaci graficznej.

Nim wybierzemy wartość atrybutu "alt", zajrzyjmy do specyfikacji języka HTML, by upewnić się, że dokonamy właściwego wyboru. Jak czytamy na stronie WHATWG:

Gives the fallback content for the image. The requirements on the alt attribute's value are described in the next section.

Przechodząc dalej, wiedz, że wyróżniono kilka scenariuszy, kiedy i jak mamy używać atrybutu alt. W naszym wypadku mamy do czynienia z obrazkiem, który został umieszczony dla dekoracji posta i sam w sobie nie zawiera żadnej treści, wykresu czy innej informacji dla czytelnika. W takim razie powinniśmy zostawić atrybut "alt" pusty, a mówi o tym poniższy fragment specyfikacji:

However, a decorative image that isn't discussed by the surrounding text but still has some relevance can be included in a page using the img element. Such images are decorative, but still form part of the content. In these cases, the alt attribute must be present but its value must be the empty string.

W innych przypadkach powinniśmy wybrać taką treść, która słownie zastępowałaby to, co znajduje się na danym obrazku. Bardzo ważne jest, aby zapamiętać, że nie chodzi o sam opis grafiki, a o tekst, który byłby reprezentacją obrazka, gdybyśmy nie mogli go z różnych przyczyn załadować (np. brak internetu, usunięcie materiału z serwera i tak dalej).

Szczegółowe wytyczne dla kilku wyróżnionych przypadków znajdziesz na stronie ze specyfikacją, jak powinniśmy stosować tag <img>: http://www.w3.org/wiki/HTML/Elements/img

Przechodząc jednak do sedna, ustaliliśmy, że należy dodać pusty element alt, więc zróbmy to:

<img src="images/white-cat.jpg" alt="">

Sprawdźmy ponownie, czy teraz nasz dokument jest poprawny...

Udało się, zero błędów!

Zostały jednak ostrzeżenia. Najważniejszy z nich brzmi następująco:

No character encoding information was found within the document, either in an HTML meta element or an XML declaration. It is often recommended to declare the character encoding in the document itself, especially if there is a chance that the document will be read from or saved to disk, CD, etc.

Bez obaw, to prosty komunikat. Nim jednak przejdę do jego wytłumaczenia, spróbuj przez chwilę przeanalizować następujący przykład, który pozwoli Ci jeszcze lepiej zrozumieć problem.

Otóż chciałbym, byś zmodyfikował nieco treść ogłoszenia. Być może zauważyłeś, ale celowo nie umieściłem w nim polskich znaków diakrytycznych. Proszę, dodaj kilka. Ja po prostu umieszczę dodatkowy akapit na końcu:

<p>PS Czyż polskie znaki nie są fajne i w ogóle?</p>

Całość wyświetla się teraz następująco:

Spójrz na ostatnią linijkę. Zamiast polskich znaków wyświetliły się jakieś dziwne krzaczki. Dlaczego tak się stało? Ma to związek z komunikatem, który dostaliśmy od walidatora. Okazuje się, że nie podaliśmy jakiego kodowania znaków ma użyć przeglądarka, więc ta wybrała sobie taki, który nie zawiera polskich znaków diakrytycznych. Kodowanie to nic innego jak zestaw znaków, jakich może użyć przeglądarka do wyświetlenia tekstu. Jak widać, domyślnie jest on bardzo ubogi i nie obsługuje polskich "ogonków" (podobnie byłoby z chińskimi napisami i tak dalej). Zmieńmy to, dodając jedną linijkę w części <head> naszego dokumentu. Tak, to tutaj, gdzie dodajemy różne tzw. metadane, którymi opisujemy nasz dokument. Umieściliśmy tam już tytuł strony, pora teraz na skonfigurowanie kodowania znaków.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8"> 
    <title>Oferta pracy: developer HTML i CSS</title>
  </head>
  <body>
    <h1>Poszukujemy developera HTML i CSS</h1>

    <img src="images/white-cat.jpg">
    <p>Dla naszego klienta, Kociej Fabryki, <strong>poszukujemy zdolnego programisty</strong> stron internetowych w HTML i CSS. Oferujemy przyzwoite zarobki, worek karmy i zabawek.</p>

    <p>Nie czekaj, napisz teraz! Nasza zwariowana ekipa czeka na Ciebie!</p>
  </body>
</html>

Tym razem użyliśmy tagu <meta> z atrybutem charset (z ang. char - znak, set - zbiór) równym "utf-8". Oznacza to wybór systemu kodowania znaków o nazwie utf-8, który wspiera używanie lokalnych znaków diakrytycznych. Stosuj go zawsze na swoich stronach, ponieważ działa on również z innymi językami świata.

Uff! Wygląda na to, że to już koniec pracy nad tym przykładem. Właśnie zbudowałeś swoją pierwszą stronę internetową od podstaw. Brawo!