Arkusz E.14-02-19.01 zJS, zPNG

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.