Wprowadzenie do HTML — struktura dokumentu

Po co się tego uczymy?

Zanim nauczysz się cokolwiek liczyć czy zapisywać do bazy danych, strona internetowa musi w ogóle ISTNIEĆ jako dokument, który przeglądarka umie poprawnie odczytać i wyświetlić. HTML to fundament, na którym stawiasz wszystko inne — CSS (wygląd), JavaScript (interaktywność) i PHP (dane).

Teoria

Zanim strona internetowa połączy się z bazą danych (dział Bazy danych i SQL) czy zacznie coś liczyć w PHP, musi w ogóle ISTNIEĆ jako dokument, który przeglądarka umie wyświetlić. Tym dokumentem jest HTML (HyperText Markup Language) — język znaczników, nie język programowania.

Znacznik (tag) to para <nazwa>...</nazwa> opisująca, czym jest dany fragment treści — nagłówkiem, akapitem, listą, obrazkiem. Większość znaczników trzeba zamknąć (<p>tekst</p>), niektóre są samozamykające (<br>, <img>).

Każdy dokument HTML ma stały szkielet:
<!DOCTYPE html> — informacja dla przeglądarki, że to dokument HTML5.
<html> — korzeń całego dokumentu.
<head> — dane O stronie: tytuł karty przeglądarki, kodowanie znaków, linki do plików CSS — użytkownik tego nie widzi bezpośrednio.
<body> — cała widoczna treść strony.

Podstawowe znaczniki tekstowe: <h1>-<h6> (nagłówki, od najważniejszego do najmniej ważnego), <p> (akapit), <strong> (pogrubienie ważnego tekstu), <em> (wyróżnienie), <br> (złamanie linii), <hr> (pozioma linia).

Schemat

<!DOCTYPE html>
└── <html>
    ├── <head>   (dane o stronie: tytuł, kodowanie, linki do CSS)
    │   ├── <meta charset="UTF-8">
    │   └── <title>Tytuł strony</title>
    └── <body>   (to, co widzi użytkownik)
        ├── <h1>Nagłówek</h1>
        └── <p>Akapit tekstu</p>

Przykład z życia

Kiedy wpisujesz adres strony w przeglądarce, serwer odsyła jej właśnie taki dokument HTML — przeglądarka czyta go od góry do dołu i na tej podstawie buduje to, co widzisz na ekranie. Jeśli klikniesz prawym przyciskiem na dowolnej stronie i wybierzesz "Wyświetl źródło strony", zobaczysz dokładnie taki kod.

Kod (HTML)

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Moja pierwsza strona</title>
</head>
<body>
    <h1>Witaj na mojej stronie!</h1>
    <p>To jest pierwszy akapit tekstu na tej stronie.</p>
    <p>A to jest <strong>ważna</strong> informacja oraz <em>wyróżniony</em> fragment.</p>
    <hr>
    <p>Stopka strony.</p>
</body>
</html>

Komentarz i wyjaśnienie kodu

lang="pl" w znaczniku <html> informuje przeglądarkę (i czytniki ekranu dla niewidomych), że treść jest po polsku. <meta charset="UTF-8"> jest kluczowe — bez tego polskie znaki (ą, ę, ć, ł) mogą się wyświetlić jako krzaczki. Zwróć uwagę, że każdy znacznik otwierający ma swój odpowiednik zamykający w tej samej kolejności, w jakiej został otwarty (zagnieżdżenie) — to jedna z najczęstszych przyczyn błędów w HTML.

Ćwiczenie samodzielne

Stwórz plik .html z tytułem strony, jednym nagłówkiem <h1> i dwoma akapitami <p>, otwórz go w przeglądarce (dwuklik na pliku).

Zadania do pracy własnej

Dodaj do swojej strony nagłówek drugiego poziomu (<h2>) i akapit z jednym wyróżnionym (<strong>) słowem.
Zbuduj stronę "O mnie" z nagłówkiem głównym, trzema akapitami opisującymi Twoje zainteresowania i poziomą linią (<hr>) oddzielającą sekcje.
Zbuduj szkielet strony przyszłego serwisu filmowego (z działu Aplikacje internetowe PHP): nagłówek główny "Serwis filmowy", krótki akapit powitalny, oraz trzy sekcje-akapity zapowiadające przyszłe funkcje strony (katalog filmów, logowanie, koszyk) — same teksty, bez stylowania (to przyjdzie w CSS).

Typowe błędy

Częsty błąd to zapomnienie zamknięcia znacznika (np. <p>tekst bez </p>) — przeglądarka często "jakoś" to wyświetli, ale błąd zaczyna psuć strukturę dalszej części strony. Drugi błąd: brak <!DOCTYPE html> — przeglądarka może wtedy przełączyć się w tzw. "tryb zgodności" i inaczej interpretować CSS. Trzeci: pomylenie kolejności zagnieżdżenia, np. <p><strong>tekst</p></strong> zamiast <p><strong>tekst</strong></p>.

Nawiązanie do egzaminu zawodowego

HTML nie ma własnego, osobnego efektu w podstawie programowej INF.03.5, ale jest niezbędnym fundamentem efektu INF.03.5.3.4 ("definiuje skrypty obsługujące formularze i kontrolki HTML") — bez znajomości struktury dokumentu HTML nie da się zrozumieć, jak JavaScript czy PHP odbierają dane z formularza.