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 Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie pliki4.zip zabezpieczone hasłem: @K4wA!
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
Plik logo.png |
Obraz logo.png przeskaluj z zachowaniem proporcji tak, aby wysokość wynosiła dokładnie 100px
Plik kształty.png |
Z grafiki ksztalty.png wytnij kształt filiżanki i imbryka (obraz 1a i 1b) z zachowaniem przezroczystości oraz tak, aby kształty były w całości i żadne fragmenty innych kształtów nie były widoczne. Za pomocą edytora grafiki wektorowej przygotuj nowy obraz zgodny z obrazem 1c. Uwzględnij wymagania:
- Obraz jest przezroczysty
- Widoczne są na nim kształt filiżanki i imbryka. Imbryk znajduje się po prawej stronie, jest obrócony tak jakby jego zawartość wlewała się do filiżanki
- Widoczny jest napisz koloru brązowego o treści "Poczęstuj się kawą"
- Tekst zapisany jest dowolną czcionką typu Serif. Na obrazie 1c jest to Georgia dopuszczalne również inne czcionki Serif, np.: Times New Roman
- Tekst jest opisany na okręgu, okrąg jest niewidoczny
Obraz kawa powinien mieć wysokość nie większą niż 400px
Obraz 1a. Filiżanka |
Obraz 1b. Imbryk |
Obraz 1c. Obraz kawa |
Witryna internetowa
Obraz 2. Witryna internetowa, strona główna |
- Strona główna o nazwie index.html oraz podstrony zamowienia.html i blog.html
- W pliku blog.html należy umieścić jedynie tekst "Strona w trakcie budowy"
- Strona główna oraz podstrona zamówienia są identyczne, za wyjątkiem panelu prawego
Cechy wspólne dla stron index.html i zamówienia.html:
- Zastosowany właściwy standard kodowanie polskich znaków
- Tytuł strony widoczny na karcie przeglądarki "Hurtownia"
- Arkusz stylów w pliku o nazwie styl4.css prawidłowo podłączony z kodem strony
- Podział strony na bloki: na górze dwa bloki: logo i menu, poniżej baner, poniżej dwa bloki: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczków sekcji, zgodnie z obrazem 2
- Zawartość bloku logo:
- obraz logo.png z tekstem alternatywnym "hurtownia"
- Zawartość bloku menu:
- Odnośnik "Strona główna", prowadzący do pliku index.html
- Odnośnik "Zamówienia", prowadzący do pliku zamowienia.html
- Odnośnik "Blog o kawie", prowadzący do pliku blog.html
- Odnośnik "Odwiedź także", prowadzący do strony htttp://gatunki-kawy.pl, odnośnik otwiera się w osobnej karcie przeglądarki
- Zawartość banera:
- nagłówek pierwszego stopnia o treści "Hurtownia kawy"
- Zawartość bloku lewego:
- Nagłówek drugiego stopnia o treści: "Oferta"
- Lista numerowana (uporządkowana) o elementach: "Kawa palona Arabica", "Kawa palona Robusta", "Kawa bezkofeinowa", "Kawa zielona"
- Zawartość stopki w postaci tekstu "Stronę przygotował:", dalej wstawiony numer PESEL, numer PESEL jest zapisany czcionką pogrubioną.
- Obraz kawa z tekstem alternatywnym: "Poczęstuj się"
- Napis "Podaj numer kawy:"
- Poniżej pole edycyjne typu numerycznego
- Poniżej napis "Podaj wagę w dekagramach"
- Poniżej pole edycyjne typu numerycznego
- Poniżej przycisk o treści "Zamów", kliknięcie przycisku powoduje wywołanie skryptu
Styl CSS witryny internetowej
Plik styl4.css zawiera formatowanie:- Wspólne dla całej strony: krój czcionki Arial
- Dla bloku logo: kolor tła RGB 162,117,87; szerokość 20%, wysokość 100px
- Dla bloku menu: kolor tła RGB 162,117,87;, szerokość 40%, wysokość 100px, wyrównanie tekstu do prawej strony
- Wspólne dla banera i stopki: kolor tła RGB 74, 45, 32; biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 30px
- Wspólne dla bloku lewego i prawego: kolor tła RGB 162,117,87; biały kolor czcionki, szerokość 50%, wysokość 500px
- Dla selektora nagłówkowego pierwszego stopnia: odległość między literami 10px
- Dla selektora odnośnika: kolor czcionki RGB 65, 98, 85; marginesy wewnętrzne 20px, marginesy zewnętrzne 10px, rozmiar czcionki 150%, wysokość linii 100px, obramowanie 1px, linią ciągłą o kolorze RGB 65, 98, 85;
- Dla elementu nr 4 ("Kawa zielona") listy umieszczonej w bloku lewym: tekst przekreślony
Skrypt
Wymagania dotyczące skryptu:- Wykonany po stronie przeglądarki
- Wywołany na stronie zamownienia.html po kliknięciu przycisku "Zamów"
- Skrypt pobiera wartości wpisane w oba pola edycyjne i oblicza kosz kawy uwzględniając jej numer i wagę
- Ceny kawy ze względu na jej numer przedstawia tabela 1, w przypadku wpisania innej wartości niż 1-3 cena wynosi 0 zł
- Po obliczeniu całkowitego kosztu kawy jest wyświetlany wynik pod przyciskiem w formacie: "Koszt zamówienia wynosi [koszt] zł", gdzie [koszt] oznacza obliczony koszt.
Tabela 1. Ceny kawy
Numer kawy | Nazwa | Cena za 1 dekagram |
1 | Kawa palona Arabica | 5 zł |
2 | Kawa palona Robusta | 7 zł |
3 | Kawa bezkofeinowa | 6 zł |
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.