Zadanie: Witryna „Portal Turystyczny”

Twoim zadaniem jest stworzenie szkieletu strony internetowej oraz arkusza stylów, który zdefiniuje jej wygląd.

1. Struktura HTML (plik index.html)

Strona musi składać się z następujących sekcji (użyj znaczników <div> lub semantycznych jak <header>, <main>, <footer>):

• Baner: Zawiera nagłówek $H1$ z tekstem „Odkryj Karkonosze”.

• Blok Lewy: Zawiera listę punktowaną (ul) z trzema elementami: Śnieżka, Szrenica, Śnieżne Kotły.

• Blok Prawy: Zawiera obraz gory.jpg (użyj dowolnego obrazu zastępczego) oraz akapit tekstu (minimum 3 zdania o turystyce).

• Stopka: Zawiera tekst: „Autor strony: [Twój Numer PESEL]”.

2. Formatowanie CSS (plik styl.css)

Arkusz stylów musi spełniać następujące wytyczne:

• Reset marginesów: Ustaw marginesy i dopełnienia dla całej strony na 0.

• Baner: * Wysokość: 120 px.

  • Kolor tła: #4A6572.

  • Tekst: biały, wyśrodkowany w pionie (np. za pomocą line-height) i poziomie.

• Układ Kolumn (Blok Lewy i Prawy):

  • Blok lewy: szerokość 35%, tło #F1F1F1, wysokość 500 px.

  • Blok prawy: szerokość 65%, tło #FFFFFF, wysokość 500 px.

  • Oba bloki muszą sąsiadować ze sobą w poziomie (użyj float: left; lub display: flex;).

• Obraz w bloku prawym:

  • Szerokość: 300 px.

  • Obramowanie: 2 px, ciągłe, kolor czarny.

  • Marginesy zewnętrzne: 20 px.

• Stopka:

  • Tło: takie samo jak w banerze.

  • Tekst: biały, wyrównany do prawej strony.

Kluczowe elementy do przećwiczenia

Podczas rozwiązywania tego zadania zwróć szczególną uwagę na model pudełkowy (Box Model). Na egzaminie często odejmowane są punkty, jeśli szerokości bloków (np. 35% + 65%) sumują się do więcej niż 100% przez dodane marginesy lub obramowania.

Pro Tip: Pamiętaj o dopisaniu w CSS właściwości box-sizing: border-box; dla wszystkich elementów. To uratowało niejednego zdającego przed „rozjechaniem się” strony!

Co warto zapamiętać na egzamin?

1. Selektory: Używaj #id dla unikalnych elementów (jak baner czy stopka) i .klasa dla elementów powtarzalnych.

2. Ścieżki: Pamiętaj, że na egzaminie plik CSS i obrazki muszą być w tym samym folderze co HTML (chyba że polecenie mówi inaczej).

3. Właściwość alt: Zawsze dodawaj opis alternatywny do obrazków (<img alt="...">) – to niemal zawsze jest punktowane.