zadania egzaminacyjne css, html, Nutria DuzyZajac 10 listopada 2025 0 Komentarze

Zadanie egzaminacyjne – Projekt i stylizacja strony informacyjnej

Temat:

Stwórz stronę internetową „Galeria Miejskich Zabytków” prezentującą trzy wybrane zabytki miasta.

Treść zadania:

Twoim zadaniem jest przygotowanie strony internetowej galeria.html oraz pliku style.css, które wspólnie utworzą prostą, estetyczną witrynę informacyjną o zabytkach miasta.

Strona powinna być czytelna, poprawnie sformatowana i zgodna ze standardami HTML5 i CSS3.

Wymagania dotyczące pliku galeria.html:

Dokument powinien zawierać:
- poprawną deklarację <!DOCTYPE html>,
- sekcję <head> z tytułem strony: Galeria Miejskich Zabytków,
- dołączony zewnętrzny arkusz stylów style.css.
W treści strony umieść:
- Nagłówek główny strony <h1> o treści Galeria Miejskich Zabytków,
- Krótkie wprowadzenie w akapicie <p> z klasą intro,
- Trzy sekcje <section> przedstawiające wybrane zabytki.

Każda sekcja powinna zawierać:

nagłówek drugiego stopnia <h2> z nazwą zabytku,
zdjęcie (może być z folderu „images” – np. zamek.jpg, ratusz.jpg, katedra.jpg),
krótki opis zabytku w akapicie <p> z klasą opis,
link „Dowiedz się więcej” prowadzący do fikcyjnej strony (np. #).

Na końcu strony dodaj stopkę <footer> z identyfikatorem stopka i tekstem:

Strona wykonana w ramach egzaminu zawodowego – Technik informatyk

Wymagania dotyczące pliku style.css:

Kolory i tło:
- Ustaw kolor tła strony na jasnoszary (#f5f5f5),
- Tekst główny ma być w kolorze ciemnoszarym (#333).
Czcionki:
- Użyj czcionki Verdana jako podstawowej, a w razie jej braku – sans-serif.
- Nagłówek główny (h1) wyróżnij większym rozmiarem czcionki (np. 36px), kolorem (#004d99) oraz centrowaniem tekstu.
- Akapity z klasą .opis mają mieć justowanie (text-align: justify) oraz odstęp między wierszami (line-height: 1.5).
Klasy i identyfikatory:
- .intro – tekst pogrubiony, kolor #0066cc, wyrównany do środka, margines dolny 20px.
- .opis – czcionka mniejsza o 10% od domyślnej.
- #stopka – tekst ma być wycentrowany, kursywą i z górną ramką w kolorze #999.
Dodatkowe formatowanie:
- Obrazy w sekcjach mają mieć szerokość 300px i zaokrąglone rogi (border-radius: 10px).
- Linki mają być niebieskie w stanie normalnym, a po najechaniu myszką (:hover) zmieniać kolor na ciemnoniebieski i być podkreślone.