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 skadnię 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 nzawy 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 przeźroczystość została dodana na wiekszych obaszarach 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 nadeć jej nazwę napisy
Brak obrazu proszę zgłosić do supportu
Obraz 1. Obraz napisy,pole szachownicy oznacza przezroczystość
Witryna internetowa
Brak obrazu proszę głosić do supportu
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śc 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.
  • 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łowkowym. W drugiej kolumnie dwa ostatnie wiersze są scalone. Tekst, który powinien znajdować się w komórkach przedstawia obraz 4.
  • Brak obrazu proszę zgłosić do supportu
    Obraz 3. Lista
    Brak obrazu proszę zgłosić do supportu
    Obraz 4. Tabela
  • Zawartośc trzeciego panelu głownego:
    1. obraz napisany z tekstem alternetywnym "technologia web"
  • Zawartość panelu głównego:
    1. Paragrag (akapit) z tekstem "Podaj rozmair 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 "Owiedź także" prowadzący do strony foramtowanie.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ł 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 cznionki, szerokośc 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ęrzne 50px
  • Dla stopki: kolor tła #824555, biały kolor czcionki, wyrówanie tekstu do środka, marginesy wewnętrzne 20px
  • Wspólne dla selektora tabeli, komórki i komórki nagłowka: 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 pragrafu o treści "To jest przykład paragrafu, który..." znajdującego się w panelu głównym
  • Po wciśniecuy czerwonego przycisku, zmieniny 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óej weryfikowaleś 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.
PODANE ROZWIĄZANIE JEST TYLKO PRZYKŁADEM.