12a – Strona tematyczna z tabelą, galerią i efektem paralaksy

Ćwiczenie: Strona tematyczna z tabelą, galerią i efektem paralaksy

Cel ćwiczenia

Celem ćwiczenia jest utrwalenie umiejętności tworzenia strony internetowej w HTML i CSS z wykorzystaniem:

• tabel HTML,
• grafiki (co najmniej 4 obrazy),
• efektu paralaksy w CSS.

Opis zadania

Wykonaj prostą stronę internetową (index.html), np. na temat:

• podróży,
• zabytków,
• historii (np. epoki historyczne),
• przyrody,
• miasta lub kraju.

Temat możesz wybrać dowolnie.

Wymagania techniczne

1. Struktura HTML

Strona powinna zawierać:

• nagłówek (header) z tytułem strony,
• co najmniej jedną sekcję z efektem paralaksy,
• sekcję z tabelą danych,
• sekcję z galerią zdjęć (min. 4 obrazy),
• stopkę (footer).

2. Tabela

Tabela powinna:

• zawierać minimum 3 kolumny i 4 wiersze danych,
• mieć nagłówki (<th>),
• być ostylowana w CSS (obramowania, kolory, padding).

Przykładowe dane:

• nazwa obiektu,
• data,
• krótki opis.

3. Grafika

• Użyj minimum czterech obrazów (<img>),
• obrazy mogą pochodzić z darmowych banków zdjęć (np. Unsplash, Pixabay),
• obrazy powinny być responsywne (np. max-width: 100%).

4. Efekt paralaksy

Efekt paralaksy wykonaj za pomocą CSS, np.:

• background-image,
• background-attachment: fixed,
• background-size: cover.

Sekcja paralaksy powinna:

• mieć określoną wysokość (np. 300–500px),
• zawierać tekst widoczny na tle obrazu.

Przykładowa struktura plików

Kryteria oceny

• poprawna struktura HTML (semantyka),
• poprawne użycie tabeli,
• minimum 4 obrazy na stronie,
• poprawnie działający efekt paralaksy,
• estetyczne formatowanie CSS,
• brak błędów składniowych.

(Opcjonalnie – dla chętnych)

• dodaj efekt :hover do obrazów,
• zastosuj czcionki z Google Fonts,
• dodaj prostą nawigację (nav).

Efekt końcowy

Strona powinna być czytelna, estetyczna i poprawnie wyświetlać się w przeglądarce.