INF.03 · HTML i CSS
Wprowadzenie do HTML — struktura dokumentu
Dokument, który przeglądarka rozumie.
- Przewidź efekt
- Zmień i sprawdź
- Zbuduj samodzielnie
Po tej lekcji: Zbudujesz i zapiszesz poprawny dokument HTML oraz rozróżnisz dane o stronie od jej treści.
Zrozum, zanim zapiszesz
HTML opisuje znaczenie treści. head przechowuje metadane, a header jest nagłówkiem widocznym wewnątrz body. main obejmuje główną treść; nav nawigację; footer stopkę. Te elementy same nie ustawiają kolumn. Układ dopiero opiszesz w CSS.
Nagłówki h1–h6 tworzą hierarchię, a nie zestaw rozmiarów do ozdabiania tekstu. strong oznacza ważność, em nacisk, hr zmianę tematu. img, meta, link, br to elementy puste: w HTML nie piszesz dla nich znaczników zamykających. Nie nazywaj ich samozamykającymi jak w XML.
Znaczniki i ich role
| Zapis | Rola |
|---|---|
h1–h6 | Hierarchia nagłówków |
p | Akapit |
strong, em | Ważność i nacisk |
header, nav, main, footer | Role części strony |
head | Metadane dokumentu |
Przykład do odtworzenia
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kino szkolne</title>
</head>
<body>
<header><h1>Kino szkolne</h1></header>
<nav><a href="#repertuar">Repertuar</a></nav>
<main>
<section id="repertuar">
<h2>Najbliższy seans</h2>
<p>Zapraszamy w piątek. <strong>Wstęp wolny.</strong></p>
</section>
</main>
<footer><p>Koło filmowe</p></footer>
</body>
</html>Sprawdź w działaniu
Zajrzyj do head i body
Zmień tytuł karty i nagłówek strony. Wyłącz header albo footer, a następnie sprawdź, które treści znikają.
Najpierw przewidź zmianę. Potem wykonaj ją i wyjaśnij różnicę między kodem a efektem.
Ćwiczenie z pomocą · samodzielna praca
Zbuduj samodzielnie — z pomocą, gdy potrzebujesz
Utwórz folder kino, w nim index.html. W edytorze tekstu zapisz plik w UTF-8; w Notatniku wybierz typ Wszystkie pliki, aby nie powstało index.html.txt. Otwórz plik w przeglądarce. Dodaj lang="pl", tytuł karty Kino szkolne, jeden h1 oraz sekcje Repertuar i Kontakt z h2 i akapitami.
Na karcie: Kino szkolne. W dokumencie: nagłówek główny i dwa nagłówki sekcji. Po Ctrl+S i odświeżeniu pojawia się zmieniony tekst.
? Potrzebujesz pomocy? Rozwiązuj krok po kroku.
Krok 1 — pokaż podpowiedź
Najpierw zapisz kompletny szkielet html, head i body.
Krok 2 — pokaż podpowiedź
W head umieść charset, viewport i title; widoczne nagłówki w body.
Krok 3 — pokaż podpowiedź
Zapisz plik, odśwież przeglądarkę i sprawdź rozszerzenie pliku oraz polskie znaki.
Otwórz tylko tyle podpowiedzi, ile potrzebujesz. Po każdym kroku wróć do zadania i sprawdź wynik.
Sprawdź, zanim oddasz
Otwórz plik w przeglądarce i sprawdź, czy kod daje przewidywany wynik. Użyj narzędzi przeglądarki: Elements pokazuje elementy, Styles dopasowane reguły, a Network brakujące zasoby. Sprawdź kod w Nu HTML Checker; przy fragmentach wklej je do pełnego dokumentu z lang, charset, title i body. Komunikaty walidatora nie zastępują próby klawiaturą i kontroli czytelności.
Podsumowanie
Co warto zapamiętać
- Zbudujesz i zapiszesz poprawny dokument HTML oraz rozróżnisz dane o stronie od jej treści.
- Potrafisz wskazać w kodzie przyczynę widocznego efektu.
- Przed oddaniem sprawdzasz wynik w przeglądarce, nie tylko zapis pliku.
Dalej na swoim koncie
Rozgrzewki, quiz i zadania są w biurku ucznia.
Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.
Zaloguj się →