Zadanie projektowe: Interaktywne Kalendarium „Wojna z terroryzmem w XXI wieku”

Cel zadania: Stworzenie przejrzystej, responsywnej strony internetowej dokumentującej kluczowe wydarzenia, przyczyny i skutki globalnych działań przeciwko terroryzmowi po 11 września 2001 roku.

Wytyczne dotyczące zawartości (HTML):

1. Struktura dokumentu: Użyj poprawnych tagów semantycznych (<header>, <main>, <section>, <article>, <footer>).

2. Nagłówki: Zastosuj hierarchię nagłówków (<h1> dla tytułu strony, <h2> dla głównych sekcji, np. „Geneza”, „Przebieg konfliktów”, „Skutki społeczne”).

3. Multimedia:

   • Wstaw co najmniej dwa zdjęcia (np. World Trade Center, szczyt NATO) z poprawnymi atrybutami alt.

   • Stwórz listę wypunktowaną (<ul>) z najważniejszymi organizacjami zaangażowanymi w działania (np. ONZ, NATO).

4. Tabela: Stwórz tabelę zestawiającą najważniejsze operacje militarne (np. Enduring Freedom, Iraqi Freedom) wraz z latami ich trwania.

Wytyczne dotyczące wyglądu (CSS):

1. Typografia: Dobierz dwa różne kroje pisma (jeden dla nagłówków, drugi dla tekstu głównego) korzystając z Google Fonts.

2. Kolorystyka: Stwórz paletę barw pasującą do powagi tematu (np. odcienie szarości, granatu, stonowanej czerwieni).

3. Layout:

   • Użyj modelu Flexbox lub Grid, aby ułożyć sekcje strony w czytelny sposób.

   • Zadbaj o marginesy (margin) i dopełnienia (padding), aby tekst nie dotykał krawędzi ekranu.

4. Interakcja: Dodaj efekt :hover dla linków oraz zdjęć (np. delikatne powiększenie lub zmiana przezroczystości).

Tematy pomocnicze do opracowania na stronie:

• Ataki z 11 września i ich bezpośrednie następstwa.

• Wojna w Afganistanie i Iraku.

• Pojęcie „Axis of Evil” (Oś zła).

• Wpływ wojny z terroryzmem na bezpieczeństwo lotnicze i inwigilację (np. Patriot Act).

Propozycja struktury plików:

• index.html – główna treść.

• style.css – wszystkie reguły formatowania.

• Folder img/ – grafiki wykorzystane w projekcie.

Kryteria oceny:

• Poprawność składni HTML5 i CSS3.

• Estetyka i czytelność strony.

• Rzetelność przedstawionych informacji historycznych.

• Responsywność (czy strona wygląda dobrze na telefonie i komputerze).