INF.03 · HTML i CSS

Projekt: Mój Bohater — kompletna strona z HTML, CSS i odrobiną JS

Projekt, który potrafisz obronić.

  • Przewidź efekt
  • Zmień i sprawdź
  • Zbuduj samodzielnie

Po tej lekcji: Połączysz HTML i CSS w dostępną, responsywną stronę oraz sprawdzisz ją według jawnych kryteriów.

Zrozum, zanim zapiszesz

Zacznij od planu: odbiorca, nagłówek, nawigacja, biografia, osiągnięcia, galeria i stopka ze źródłami. Najpierw sprawdź strukturę bez CSS. Potem dodaj jeden zewnętrzny arkusz style.css. Zdjęcia umieść w obrazy i opisz ich pochodzenie.

Na wąskim ekranie zbuduj jedną kolumnę; przy szerszym dwie. Zachowaj kolejność treści w DOM i widoczny fokus. Dobierz nagłówki, kontrast, alt i opisy linków. Nie kopiuj cudzych tekstów ani nie publikuj danych prywatnych. W modelu jest autorska ilustracja, którą można pobrać.

JavaScript jest dodatkiem zapowiadającym kolejny dział. Struktura, biografia i linki muszą działać bez niego. Na tym etapie nie oceniaj ucznia za niepoznane jeszcze skrypty. Walidacja HTML wykrywa część błędów składni; nie ocenia prawdziwości treści ani całej dostępności.

Przykład do odtworzenia

index.htmlhtml
<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mój bohater</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header><h1>Mój bohater</h1></header>
  <nav aria-label="Sekcje strony"><a href="#biografia">Biografia</a> · <a href="#osiagniecia">Osiągnięcia</a></nav>
  <main class="uklad">
    <section id="biografia"><h2>Biografia</h2><p>Tu napisz własne wprowadzenie.</p></section>
    <section id="osiagniecia"><h2>Osiągnięcia</h2><ul><li>Tu podaj sprawdzony fakt.</li></ul></section>
  </main>
  <footer><p>Autor i źródła materiałów</p></footer>
</body>
</html>

Sprawdź w działaniu

Zobacz projekt na dwóch szerokościach

Przełącz stronę o Spocku między telefonem i szerokim widokiem. Zmień akcent. Zobacz w kodzie, jak gradient, cień i obramowanie nadają głębię, a media query układa treść.

Ta interakcja wymaga włączonego JavaScriptu.

Najpierw przewidź zmianę. Potem wykonaj ją i wyjaśnij różnicę między kodem a efektem.

Drugi plik: style.css

style.csscss
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; line-height: 1.6; color: #173047; background: #f3f7fa; }
header, nav, main, footer { padding: 1rem; }
.uklad { display: grid; gap: 1rem; max-width: 70rem; margin-inline: auto; }
section { background: white; padding: 1rem; min-width: 0; }
a { color: #075481; }
a:focus-visible { outline: 3px solid #b04b00; outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
@media (min-width: 45rem) { .uklad { grid-template-columns: 1fr 1fr; } }

Obraz do ćwiczeń

Pobierz autorską ilustrację „Plakat koła filmowego” przyciskiem w warsztacie. Utwórz folder obrazy obok index.html i zapisz w nim plakat.svg. Arkusz style.css trzymaj obok index.html. Ten sam plik posłuży w kolejnych lekcjach. Ilustracja jest materiałem własnym BitEdu do ćwiczeń.

Ćwiczenie z pomocą · samodzielna praca

Zbuduj samodzielnie — z pomocą, gdy potrzebujesz

Zbuduj stronę o wybranym bohaterze: index.html, style.css i katalog obrazy. Dodaj header/nav/main/footer, biografię z h2, listę trzech osiągnięć, tabelę dwóch dat, obraz z alt i dwa działające linki do źródeł. Poniżej 45rem zastosuj jedną kolumnę. Oddaj ZIP oraz krótką kartę testów 390px, 1280px i klawiatura.

Oczekiwany rezultat
Przenośny komplet plików. Brak poziomego przewijania, widoczny fokus, logiczne nagłówki i działające ścieżki.
Potrzebujesz pomocy? Rozwiązuj krok po kroku.
Krok 1 — pokaż podpowiedź

Najpierw przygotuj treść i odnośniki bez CSS.

Krok 2 — pokaż podpowiedź

Podłącz style.css i buduj wygląd od wąskiego ekranu.

Krok 3 — pokaż podpowiedź

Sprawdź kartę Network, walidator HTML i działanie po przeniesieniu całego folderu.

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ć

  1. Połączysz HTML i CSS w dostępną, responsywną stronę oraz sprawdzisz ją według jawnych kryteriów.
  2. Potrafisz wskazać w kodzie przyczynę widocznego efektu.
  3. 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ę →
Źródła i dalsza nauka