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