Wstęp do HTML'a

HTML (ang. HyperText Markup Language) tłumacząc ten akronim na język polski otrzymujemy "hipertekstowy język znaczników". Język ten jest z góry narzucony wszystkim webmasterom i stanowi fundament KAŻDEJ strony internetowej. HTML przeważnie korzysta z asysty języka CSS (ang. Cascading Style Sheets) do nadania odpowiedniej formy treści przedstawionej między znacznikami HTML'a i także nie istnieje dla CSS'a żadna alternatywa. Niestety w praktyce języki te mimo dosyć przemyślanej architektury działają nie do końca przewidywalnie co będę starał się udowodnić na łamach mojego kursu.


Zatem kończąc wstęp pora na mały szablonik kodu HTML:

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>tytuł</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <!-- zawartość strony -->
  </body>
</html>
  • Zaczynając od początku <!DOCTYPE html> mówi przeglądarce w jakiej wersji języka HTML jest napisana reszta strony. W tym przypadku jest to standard HTML5 (póki co najnowszy). Zawsze warto dodać tę linijkę na początku kodu strony, jednak w praktyce przeglądarka i tak domniema odpowiedni standard po użytych znacznikach w dalszym kodzie.

  • Znacznik w drugiej linijce kodu <html> określa początek właściwego kodu HTML, który zamyka się na końcu dokumentu znacznikiem </html>. Parametr lang="pl" określa język w jakim została napisana strona i jest on opcjonalny. W tym przypadku wskazuje na język Polski.

  • Następujący po <html> znacznik <head> określa "głowę" dokumentu. Ten znacznik również zamyka się tak jak znacznik <html> poprzez następny znacznik z przedrostkiem "/", czyli </head>. Wewnątrz znaczników umieszcza się znaczniki określające wygląd strony, mechanikę strony i wszystko to co nie wyświetla się bezpośrednio na stronie.

  • Znacznik meta prawie zawsze występuje z parametrem "charset" na stronie, nie wymaga zamykania i warunkuje kodowanie naszej strony. Zwykle parametrowi "charset" nadajemy wartość utf-8 bądź iso-8859-2, żeby uzyskać na stronie znaki łacińskie i by móc spokojnie przeczytać napis: "zażółć gęsią jaźń". (znacznik meta pełni rolę informacyjną)

  • Między znacznikami <title> oraz </title> umieszczamy tytuł naszej strony jest on wyświetlony na zakładkach przeglądarki bądź na pasku tytułu.

  • Znacznik <link> wymaga dodania parametrów zwykle jest to rel="stylesheet" i href przyjmujący za wartość ścieżkę do pliku .css który określa sposób/wygląd wyświetlania treści na stronie.

  • Kolejny znacznik występuje w dwóch formach. Pierwsza z tych form jest zastosowana w szablonie z ustawionym parametrem "src" odsyłającym do zewnętrzenego pliku, druga forma różni się brakiem parametru i zawartością pliku między znacznikiem otwierającym, a zamykającym.

  • Ostatnie znaczniki <body> i </body> określają miejsce na właściwą treść strony do wyświetlenia w oknie przeglądarki.

Na podstawie tego co już wiemy możemy śmiało wyróżnić pewne cechy znaczników:

  1. Mamy do dyspozycji znaczniki pojedyńcze zaczynające się znakiem "<" i kończące ">" oraz otaczające "<znacznik>treść</znacznik>",
  2. Znaczniki mogą być wielokrotnie zagnieżdżane węwnątrz siebie,
  3. Do każdego znacznika można przypisać jakieś parametry,
  4. Do każdego parametru można przypisać jakieś wartości