Arkusz E.14 : 2019 - styczeń - zad. 02 (js)

Oznaczenie: E.14-02-19.01   Limit czasu: 150 minut

Zadanie 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 Egzamin 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

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 przezroczystość została dodana na większych obszarach bieli, pomijając obszary pomiędzy literami w napisach. Przykład dodania przezroczystości jest przedstawiony na obrazie 1
• Grafika powinna być przeskalowana z zachowaniem proporcji tak, aby jej wysokość wynosiła dokładnie 300 px
• Grafika powinna być w skali szarości

Grafikę należy zapisać w formacie umożliwiającym zapis przezroczystości i nadać jej nazwę napisy

Witryna internetowa

Cechy witryny:

• Strona główna o nazwie formaty.html
• Zastosowany właściwy standard kodowania polskich znaków
• Tytuł strony widoczny na karcie przeglądarki: „Formatowanie”
• Arkusz stylów w pliku o nazwie styl2.css prawidłowo połą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:
  • nagłówek pierwszego stopnia o treści „Formatowanie dokumentów HTML”
• Zawartość pierwszego panelu górnego:
  • Nagłówek drugiego stopnia o treści: „Przykład listy - hobby”
  • Lista punktowana (nieuporządkowana) z zagnieżdżoną listą numerowaną (uporządkowaną), której treść przedstawia obraz 3
• Zawartość drugiego panelu górnego:
  • Nagłówek drugiego stopnia o treści: „Przykład tabeli - rozkład dnia”
  • Tabela o wymiarze: 2 kolumny na 5 wierszy, z czego pierwszy jest wierszem nagłówkowym. W drugiej kolumnie dwa ostatnie wiersze są scalone. Tekst, który powinien być wpisany do tabeli, przedstawia obraz 4

• Zawartość trzeciego panelu górnego:
  • obraz napisy z tekstem alternatywnym „technologia web”
• Zawartość panelu głównego:
  • Paragraf (akapit) z tekstem „Podaj rozmiar tekstu w procentach: ”, polem edycyjnym typu numerycznego oraz znakiem „%” za polem
  • Paragraf z listą wyboru, w której znajdują się elementy: „prosty” oraz „kursywa”
  • Paragraf z tekstem „Jakim kolorem sformatować tekst? Wybierz przycisk”, pod tekstem trzy przyciski. Wciśnięcie każdego przycisku wywołuje skrypt
  • Paragraf z tekstem „To jest przykład paragrafu, który może być dowolnie formatowany przez JavaScript”
• Zawartość stopki:
  • Paragraf o treści: „Formatowaniem tekstu zajmował się: ”, dalej wstawiony numer PESEL, numer PESEL jest zapisany czcionką pochyloną
  • 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ść 300px
• Dla trzeciego panelu górnego: kolor tła #A26475, biały kolor czcionki, szerokość 40%, wysokość 300px, wyrównanie tekstu do prawej strony
• Dla panelu głównego: kolor tła #F0EAE2, marginesy wewnętrzne 50px
• Dla stopki: kolor tła #824555, biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 20px
• 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:

• Wykonywany 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, zmieniany 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:
  • 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%
  • 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 przeglądarka.txt.

Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny się znajdować pliki: formaty.html, napisy.png, przeglądarka.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.