Czym jest HTML i struktura strony
Zrozum z czego składa się każda strona internetowa
HTML — szkielet budynku
Każda strona internetowa ma trzy warstwy: HTML (szkielet — struktura), CSS (design — jak wygląda), JavaScript (zachowanie — co robi). HTML opisuje CO jest na stronie: nagłówek, akapit, przycisk, obrazek. Bez CSS wszystko jest szare i niestylizowane, ale struktura już tam jest.
Struktura dokumentu HTML
Każdy plik HTML zaczyna się od tej samej podstawowej struktury:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tytuł strony</title>
</head>
<body>
<!-- Tu umieszczamy całą widoczną treść -->
<h1>Cześć, świecie!</h1>
</body>
</html><!DOCTYPE html>— informuje przeglądarkę że to HTML5<html lang="pl">— element główny,langokreśla język<head>— informacje meta (niewidoczne dla użytkownika)<body>— cała widoczna treść strony
Tagi — cegiełki HTML
Tag to polecenie dla przeglądarki wyglądające tak: <nazwa>treść</nazwa>
Prawie wszystkie tagi mają wariant otwierający <p> i zamykający </p>.
Podstawowe tagi tekstowe:
| Tag | Przeznaczenie | Przykład |
|---|---|---|
<h1> do <h6> | Nagłówki (h1 jest największy) | <h1>Główny nagłówek</h1> |
<p> | Akapit tekstu | <p>Zwykły tekst</p> |
<strong> | Tekst pogrubiony | <strong>Ważne!</strong> |
<em> | Kursywa | <em>Wyróżnienie</em> |
<br> | Łamanie linii (bez tagu zamykającego) | Linia 1<br>Linia 2 |
<hr> | Linia pozioma | <hr> |
Kompletna podstawowa strona. Zwróć uwagę na wcięcia — pomagają czytać strukturę.
Otwórz dowolną stronę w przeglądarce i kliknij prawym przyciskiem → 'Pokaż źródło strony' (lub F12). Zobaczysz HTML tej strony. DevTools to twoje najlepsze narzędzie do nauki tworzenia stron.