Szkielet dokumentu HTML

Czego się nauczysz

Zaczynamy od zera. Strona internetowa to zwykły plik tekstowy, a HTML to zestaw znaczników, które mówią przeglądarce, czym jest dany fragment: nagłówkiem, akapitem, listą czy linkiem. Na tej lekcji zbudujesz swoją pierwszą stronę.

Po tej lekcji:

• utworzysz poprawny szkielet dokumentu HTML,
• użyjesz nagłówków i akapitów, żeby uporządkować tekst,
• stworzysz listę wypunktowaną i numerowaną,
• dodasz link i obraz.

Jak przeglądarka czyta stronę

Kod HTML (HyperText Markup Language) składa się ze znaczników, czyli tagów. Tekst wewnątrz znaczników widzi użytkownik – same znaczniki są niewidoczne.

Każdy znacznik ma zwykle parę: otwierający <p> i zamykający </p>. To, co jest między nimi, jest jego zawartością.

Szkielet każdego dokumentu

Ten sam początek ma każda strona, którą napiszesz.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Moja pierwsza strona</title>
</head>
<body>
    ...
</body>
</html>

• <!DOCTYPE html> mówi przeglądarce, że to nowoczesny HTML5.
• <head> to metadane niewidoczne na stronie, m.in. tytuł karty i kodowanie znaków.
• <body> to cała widoczna zawartość.

<meta charset="UTF-8"> jest konieczny, żeby polskie znaki (ą, ć, ż…) wyświetlały się poprawnie.

Nagłówki i akapity

<h1>Witaj na mojej stronie!</h1>
<p>To jest pierwszy akapit tekstu.</p>
<h2>Moje ulubione przedmioty</h2>

• <h1> to najważniejszy nagłówek strony – zwykle tylko jeden na stronę.
• <h2> to nagłówek sekcji, i tak dalej aż do <h6>.
• Zwykły tekst zapisujesz w akapitach <p>. Każdy zaczyna się od nowej linii.

Listy – wypunktowane i numerowane

<ul>
    <li>Informatyka</li>
    <li>Matematyka</li>
</ul>
<ol>
    <li>Zrobić kartę pracy</li>
    <li>Powtórzyć HTML</li>
</ol>

• <ul> (unordered) tworzy listę wypunktowaną.
• <ol> (ordered) tworzy listę numerowaną.
• Każdy element listy zapisujesz w znaczniku <li>, który musi stać wewnątrz <ul> albo <ol>.

Odnośniki

<a href="https://developer.mozilla.org/pl/">strona MDN</a>

<a> (anchor) tworzy klikalny link. Adres docelowy podajesz jako atrybut href – dodatkową informację wewnątrz znacznika otwierającego. Tekst między <a> a </a> to to, co widzi i klika użytkownik.

Obrazy

<img src="kotek.png" alt="Ilustracja kotka">

• src wskazuje ścieżkę do pliku. Obraz musi leżeć w tym samym folderze albo mieć podaną pełną ścieżkę.
• alt to tekst zastępczy – pojawia się, gdy obraz się nie wczyta, i jest odczytywany przez czytniki ekranu.

<img> nie ma znacznika zamykającego. To tak zwany znacznik pusty, podobnie jak <meta> czy <br>.

Spróbuj sam

Utwórz na swoim komputerze plik index.html, wpisz do niego szkielet dokumentu i otwórz go w przeglądarce. Po każdej zmianie zapisz plik i odśwież stronę.

Na karcie pracy do tej lekcji:

• zadania sprawdzające 1–3 – własny szkielet strony, nagłówki i akapity, obie listy,
• zadania domowe 1–5 – rozbudowa własnej strony o linki i obrazy.

Sprawdź się

• Utworzę poprawny szkielet dokumentu HTML (DOCTYPE, html, head, body).
• Użyję nagłówków h1–h2 i akapitów p, żeby uporządkować tekst.
• Stworzę listę wypunktowaną (ul/li) i numerowaną (ol/li).
• Dodam link (a href) i obraz (img src alt).

Na następnej lekcji: tabele, formularze i znaczniki semantyczne (header, nav, main, footer).