Arkusz E.14-02-19.01

Zadania egzaminacyjne

Wykonaj aplikację internetową prezentującą możliwości HTML,CSS i JavaScript. Wykorzystaj pakiet XAMPP jako środowisko bazowo-aplikacyjne, edytor zaznaczający składnię oraz program do obróbki grafiki rastrowej i wektorowej.
Aby wykonać zadanie, zaloguj się na konto Egazamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie pliki2.zip zabezpieczone hasłem: ZdJeCiE
Archiwum należy rozpakować
Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj swojego numeru PESEL. Rozpakowane pliki umieść w tym folderze. Wyniki swojej pracy zapisz w tym folderze.

Grafika

tekst.jpg

Grafikę tekst.jpg przygotuj przy pomocy programu do obróbki grafiki rastrowej według wymagań:
  • Grafika powinna być przezroczysta w miejscach, gdzie teraz jest kolor biały. Dopuszcza się, aby przeźroczystość została dodana na większych obszarach bieli, pomijając obszary pomiędzy literami w napisach. Przykład dodania przeźroczystości jest przedstawiony na obrazie 1
  • Grafika powinna być przeskalowana z zachowaniem proporcji tak, aby wysokość wynosiła dokładnie 300px
  • Grafika powinna być w skali szarości
  • Grafikę należy zapisać w formacie umożliwiającym zapis przezroczystości i nadać jej nazwę napisy
Obraz 1. Obraz napisy,pole szachownicy oznacza przezroczystość

Witryna internetowa

Obraz 2. Witryna internetowa

Cechy witryny:
  • Strona główna o nazwie formaty.html
  • Zastosowany właściwy standart kodowania polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki: "Formatowanie"
  • Arkusz stylów o nazwie styl2.css prawidłowo podłączony z kodem strony
  • Podział strony na bloki: baner, poniżej trzy panele górne, ułożone obok siebie, poniżej panel główny oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji, zgodnie z obrazem 2
  • Zawartość banera:
    1. Nagłówek pierwszego stopnia o treści "Formatowanie dokumentów HTML"
  • Zawartość pierwszego panelu górnego:
    1. Nagłówek drugiego stopnia o treści:"Przykład listy - hobby"
    2. Lista punktowana (nieuporządkowana) z zagnieżdżoną listą numerowaną (uporządkowaną) treść przedstawia obraz 3.
      Obraz 3. Lista
  • Zawartość drugiego panelu górnego:
    1. Nagłówek drugiego stopnia o treści: "Przykład tabeli - rozkład dnia"
    2. Tabela o wymiarze: 2 kolumny na 5 wierszy, z czego pierwszy wiersz jest wierszem nagłówkowym. W drugiej kolumnie dwa ostatnie wiersze są scalone. Tekst, który powinien znajdować się w komórkach przedstawia obraz 4.
      Obraz 4. Tabela
  • Zawartość trzeciego panelu głównego:
    1. obraz napisany z tekstem alternatywnym "technologia web"
  • Zawartość panelu głównego:
    1. Paragraf (akapit) z tekstem "Podaj rozmiar tekstu w procentach: ", polem edycyjnym typu numerycznego oraz znakiem "%" za polem
    2. Paragraf z listą wyboru, w której znajdują się elementy: "prosty" oraz "kursywa"
    3. Paragraf z tekstem "Jakim kolorem sformatować tekst? Wybierz przycisk", pod tekstem trzy przyciski. Wciśnięcie każdego przycisku wywołuje skrypt
    4. Paragraf z tekstem "To jest przykład paragrafu, który może być dowolnie formatowany przez Java Script"
  • Zawartość stopki:
    1. Paragraf o treści "Formatowaniem tekstu zajmował się:", dalej wstawiony numer PESEL, numer PESEL jest zapisany czcionką pochyloną
    2. Odnośnik o treści "Odwiedź także" prowadzący do strony formatowanie.pl. Odnośnik otwiera się w osobnym oknie.

Styl CSS witryny internetowej

Plik styl2.css zawiera formatowanie
  • Wspólne dla całej strony: krój czcionki Georgia
  • Dla banera: kolor tła #824555, biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 20px
  • Wspólne dla pierwszego i drugiego panelu górnego: kolor tła #A26475, biały kolor czcionki, szerokość 30%, wysokość 300 px
  • Dla trzeciego panelu górnego: kolor tła #A26475, biały kolor czcionki, szerokość 40% wysokość 300 px, wyrównanie tekstu do prawej strony
  • Dla panelu głównego: kolor tła #F0EAE2, marginesy wewnętrzne 50 px
  • Dla stopki: kolor tła #824555, biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 20 px
  • Wspólne dla selektora tabeli, komórki i komórki nagłówka: obramowanie 2px, linią ciągłą kolor #69293A, marginesy wewnętrzne 7px, obramowanie sąsiednich komórek tabeli za pomocą wspólnej linii (komórki nie są obramowanie osobnymi liniami)
  • Dla selektora lisy punktowanej: styl punktora - kwadrat
  • Dla pierwszego przycisku kolor tła czerwony
  • Dla drugiego przycisku kolor tła zielony
  • Dla trzeciego przycisku kolor tła niebieski

Skrypt

Wymagania dotyczące skryptu:
  • Wykonywanie po stronie przeglądarki, wywoływany przez zdarzenie kliknięcia w dowolny przycisk
  • Skrypt ma za zadanie zmienić styl CSS dla paragrafu o treści "To jest przykład paragrafu, który..." znajdującego się w panelu głównym
  • Po wciśnięciu czerwonego przycisku, zmieniony jest kolor tekstu paragrafu na czerwony. Po wciśnięciu zielonego przycisku - na zielony. Po wciśnięciu niebieskiego przycisku - na niebieski
  • Ponadto wciśnięcie dowolnego przycisku powoduje:
    1. Pobranie wartości z pola edycyjnego i ustawienie rozmiaru czcionki paragrafu pobraną wartością wyrażoną w procentach. Na przykład, jeżeli wpisano wartość 150 - rozmiar czcionki powinien być ustawiony na "150%"
    2. Pobranie wyboru z listy i ustawienie czcionki paragrafu na pochyłą lub wyprostowaną
UWAGA: po zakończeniu pracy utwórz plik tekstowy. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny, zapisz go w folderze z numerem PESEL, jako przegladarka.txt. Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny znajdować się pliki: formaty.html, napisy.png, przegladarka.txt, styl2.css, ewentualnie inne przygotowane pliki. Po nagraniu płyty sprawdź poprawność nagrania. Opisz płytę swoim numerem PESEL i pozostaw na stanowisku, zapakowaną w pudełku wraz z arkuszem egzaminacyjnym.

Czas przeznaczony na wykonanie zadania wynosi 150 minut.

Ocenie będzie podlegać 5 rezultatów:
  • grafika,
  • wygląd witryny internetowej,
  • działanie witryny internetowej,
  • styl CSS witryny internetowej,
  • skrypt.