Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Zasady tworzenia dokumentu html

Pamiętaj, że po wrzuceniu do sieci, twoje "dzieło" będzie mógł obejrzeć prawie każdy mieszkaniec planety Ziemia (a może nie tylko). Wystarczy wybrać z menu podręcznego Pokaż źródło i już możemy obejrzeć "co poeta miał na myśli pisząc...". Niektóre zasady zostały już omówione, teraz dodamy jeszcze kilka ważnych zasad. Aby tworzyć w miarę profesjonalne dokumenty html należy stosować następujace zasady:

Nie rób "przekładańca" ze znaczników

Niebezpieczeństwo takie może zaistnieć podczas zagnieżdżania znaczników, a więc wtedy gdy jedna para znaczników obejmuje inną parę. Para wewnętrzna może obejmować następną parę, ta z kolei następną itd. Znamy już znacznik <b> wyróżniający stylistyczne od reszty tekstu, co przeglądarki domyślnie interpretują jako czcionka pogrubiona, oraz znacznik akapitu <p>.
Przykład poprawnego stosowania

  <p>
    mamy jakiś tekst<b>tu zaczyna się tekst pisany czcionką pogrubioną </b>od tego miejsca 
    zaczyna się "zwykły" tekst
  </p>

Przeglądarka pokaże:

Przykład błędnego stosowania - zamieniłem między sobą znaczniki zamykąjace
Kod html:

  <p>
    mamy jakiś tekst<b>tu zaczyna się tekst pisany czcionką pogrubioną </p>od tego miejsca 
    zaczyna się "zwykły" tekst
  </b>

Przeglądarka pokaże:

Chociaż stosując różne "łamańce, przekładańce" udałoby się zapewne uzyskać oczekiwany efekt, ale taki kod nie wystawiałby autorowi dobrego świadectwa.

Twórz kod poprawny semantycznie

Patrząc na liczbę znaczników, służących na przykład do formatowania tekstu, można się zastanawiać: po co jest ich aż tyle? Jaki był sens wprowadzania znacznika <strong>...</strong> (mocne wyróżnienie), skoro właściwie zwykle jest on wyświetlany tak samo jak <b>...</b> (pogrubienie)? Czy nie lepiej tworzyć akapity za pomocą podwójnych znaczników <br /> zamiast <p>...</p>?
Działanie organizacji W3C jest jak najbardziej celowe - otóż w przypadku znaczników semantycznych to nie sposób formatowania jest najważniejszy, ale informacje jakie ze sobą niosą. Element <strong>...</strong> wskazuje, że objęty nimi tekst jest bardzo ważny, natomiast znacznik <b> nie niesie znaczenia semantycznego, podobnie <br /> wymusza nowy wiersz tekstu, natomiast <p> informuje że zaczyna się fragment tekstu, który ze względów zawartych w nim treści powinien zostać wydzielony. Tak więc możemy mówić o znacznikach formatujących i semantycznych. Jest ich oczywiście dużo więcej i w toku nauki będziemy zwracać uwagę na to jakie znaczenie niesie stosowanie danego znacznika. Należy w tym miejscu podkreślić, że kod powinien być poprawny semantycznie.
Takie "dodatkowe komplikacje" są potrzebne, ponieważ:

  • pomagają w utrzymania kodu,
  • są niezbędne dla syntezatorów mowy,
  • mają niebagatelne znaczenie dla robotów wyszukiwarek sieciowych,
  • ich stosowanie odróżnia osobę doświadczoną od nowicjusza.

Posumowując:
Stosuj znaczniki formatujące tylko wtedy, gdy obejmowany nimi tekst nie niesie ze sobą jakiegoś specjalnego znaczenia, a zależy Ci tylko na tym, aby był wyświetlony tak, jak to przewidziałeś. Znaczniki semantyczne należy używać wszędzie tam, gdzie chcemy wskazać specjalne znaczenie obejmowanego nimi tekstu i jest to dla nas ważniejsze, niż jednoznaczne określenie jego wyglądu.

Uważaj ze znakami specjalnymi

Skoro znacznik jest otoczony znakami < oraz > to są to znaki zarezerwowane dla kodu html. Są to znaki specjalne, tzw. encje. To co zrobić, aby przeglądarka pokazała te właśnie znaki? Zamiast < należy wpisać &lt;, zamiast > należy wpisać &gt;, zaś np. zamiast & &amp;. Znak zaczyna się znakiem & "ampersand" a kończy średnikiem o którym nie wolno zapomnieć.
Warto także wiedzieć że znaki specjalne HTML mogą zostać napisane na jeden z trzech sposobów, a więc np. znak < możemy napisać:

  • poprzez podanie nazwy znaku, a więc napiszemy &lt;,
  • poprzez podanie kodu dziesiętnego znaku poprzedzonego znakiem #, a więc napiszemy &#60;,
  • poprzez podanie kodu szestnastkowego znaku poprzedzonego znakami #x, a więc napiszemy &#x3C;.

W sieci, bez problemu znajdziesz pełny zestaw znaków specjalnych, na przykład tutaj

Sprawdź swoje dzieło w kilku przeglądarkach

Rozwój HTML i CSS jest niezwykle dynamiczny, producenci przeglądarek często nie nadążają. W rezultacie piękne efekty, które pokazuje Ci jedna przeglądarka, inna może zupełnie ignorować. Typowy przykład stanowi fakt, że przeglądarka Internet Explorer do wersji 8.0 (włącznie) nie pozwala formatować nowych znaczników HTML5 za pomocą stylów CSS. Na szczęście jest na to bardzo prosta rada - wystarczy wstawić gdzieś w nagłówku dokumentu następujący kod JavaScript:
<script>
document.createElement('article');
document.createElement('aside');
document.createElement('audio');
document.createElement('bdi');
document.createElement('canvas');
document.createElement('command');
document.createElement('datalist');
document.createElement('details');
document.createElement('dialog');
document.createElement('embed');
document.createElement('figcaption');
document.createElement('figure');
document.createElement('footer');
document.createElement('header');
document.createElement('keygen');
document.createElement('main');
document.createElement('mark');
document.createElement('meter');
document.createElement('nav');
document.createElement('output');
document.createElement('progress');
document.createElement('rp');
document.createElement('rt');
document.createElement('ruby');
document.createElement('section');
document.createElement('source');
document.createElement('summary');
document.createElement('time');
document.createElement('track');
document.createElement('wbr');
document.createElement('video');
</script>

Pokazanego wyżej kodu, nie ucz się na pamięć, teraz jest on podany jako przykład, zastosujesz go dopiero, gdy Twoja wiedza pozwoli go zrozumieć.
Jeszcze lepiej usunąć z powyższego kodu pierwszą i ostatnią linijkę, a następnie zapisać tak przygotowany tekst w osobnym pliku pod nazwą np. "html5.js". Wtedy w nagłówku zamiast powyższego dość obszernego kodu, wystarczy wstawić:
<script src="html5.js"></script>

Ważne, aby plik "html5.js" znajdował się w tym samym katalogu, co dokumenty *.html, w których został osadzony. W przeciwnym razie należy zastosować odpowiednią ścieżkę dostępu (np. src="../html5.js").

Ponadto przeglądarki które nie obsługują nowych znaczników, zwykle próbują wyświetlać je w linii. Aby ujednolicić sposób wyświetlania elementów HTML5 w starszych przeglądarkach, powinniśmy dodatkowo wstawić do dokumentu specjalny arkusz stylów:

article, aside, details, dialog, figcaption, figure, footer, header, main, nav, section 
{
  display:block;
}

audio, canvas, embed, keygen, meter, progress, video
{
  display:inline-block;
}

[hidden]
{
  display:none;
}
Pokazanego wyżej kodu, nie ucz się na pamięć, teraz jest on podany jako przykład, zastosujesz go dopiero, gdy Twoja wiedza pozwoli go zrozumieć.
Co prawda zagadnienia te poznasz dopiero w dalszym toku nauki ale w tym miejscu należało na nie zwrócić uwagę.

Stosuj komentarze

Komentarz to tekst, który nie jest wyświetlany przez przeglądarkę, ale jest widoczny w źródle.
<!-- Treść komentarza -->
Treść komentarza będzie zignorowana przez przeglądarkę, ale może przechowywać ważne informacje dla autora strony. Dobrym zwyczajem jest stosowanie komentarzy, jednak pamiętajmy aby nie przesadzić. Wewnątrz komentarza zwykłe znaczniki nie są interpretowane, więc bez obaw możemy je tam wpisać. Komentarz może być wieloliniowy, np.

<!-- Ten tekst
zostanie zignorowany
przez przeglądarkę -->

W komentarzach i własnych nazwach staraj się posługiwać językiem angielskim

Bardzo często będziesz musiał wymyślać własne nazwy - choćby podczas definiowania stylów. Dobrze jest, kiedy inni rozumieją co masz na myśli...

Ćwiczenie 0_2_0_1

Wypisz w zeszycie Zasady tworzenia dokumentu html wraz z wytłumaczeniem na czym one polegają

Praca domowa

Naucz się wymieniać Zasady tworzenia dokumentu html oraz tłumaczyć na czym one polegają.