EE.09-05-20.06-SGCzerwiec 2020 · 39 kroków · ok. 76 min · 33 kryteria z klucza

Rozwiązanie krok po kroku: Salon fryzjerski z cennikiem strzyżenia (Nowoczesny kod (flex, addEventListener))

To drugi sposób rozwiązania tego samego arkusza. Wynik jest ten sam - baza egzamin2 z czterema zapytaniami, dwa przeskalowane zdjęcia i strony index.html oraz fryzura.html z kalkulatorem promocji - i tak samo spełnia każde kryterium klucza. Inna jest droga:

kontener flex zamiast float: pięć bloków stoi w znaczniku <main>, który układa je w kolumny (flex-direction: column i flex-wrap: wrap) - szerokości 70% i 30% dalej są ustawione na samych blokach, a stopka nie potrzebuje clear,
zmienne CSS dla dwóch kolorów z arkusza, pola radio z etykietami <label>,
ceny zapisane przy polach w atrybutach data-price - skrypt nie powtarza cennika, tylko odczytuje cenę zaznaczonego pola,
skrypt w osobnym pliku skrypt.js podpięty z atrybutem defer, przycisk obsłużony przez addEventListener, wynik wpisany przez textContent, a gdy nic nie jest zaznaczone - prośba o wybór zamiast pustej ceny.

Kroki bazy danych i grafiki są takie same jak w wersji podstawowej. Arkusz to EE.09 z czerwca 2020 (formuła 2017, zastąpiona przez INF.03); materiały pochodzą z oryginalnego archiwum CKE egzamin2.zip, zapytania są wykonane na MariaDB 10.4, a skrypt sprawdzony w Chrome dla każdej długości włosów.

Jak liczą się punkty. Klucz ma 33 kryteria (R.1.1 - R.5.4), każde za 1 punkt; próg to 25 punktów.

Arkusz i pliki do pobrania Treść arkusza (PDF) Pobierz pliki rozwiązania (zip)

Etap 1: Baza danych
Kroki 1-7 · po tym etapie masz 6 z 33 kryteriów (pkt)

Krok 1: Folder zdającego i archiwum egzamin2.zip
ok. 2 min
Polecenie z arkusza
Aby wykonać zadanie zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie egzamin2.zip zabezpieczone hasłem: Salon[FryzUr] Archiwum należy rozpakować. Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj swojego numeru PESEL. Umieść w tym folderze rozpakowane pliki.
Na pulpicie tworzysz folder nazwany numerem PESEL - w tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora, Bartosz Bryniarski. Archiwum egzamin2.zip rozpakowujesz do tego folderu, podając hasło Salon[FryzUr] - z nawiasami kwadratowymi i wielkimi literami S, F i U. W środku są trzy pliki: egzamin2.sql, obraz1.jpg i obraz2.jpg.
Do tego folderu trafia wszystko, co powstanie: zrzuty, kwerendy.txt, strony, style i przeskalowane zdjęcia.
Typowe błędy
Hasło przepisuj znak po znaku - nawiasy kwadratowe łatwo pomylić z okrągłymi, a wielkość liter ma znaczenie.
Krok 2: XAMPP i pusta baza egzamin2
ok. 2 min
Polecenie z arkusza
Uruchom usługi MySQL i Apache za pomocą XAMPP Control Panel. Za pomocą narzędzia phpMyAdmin wykonaj podane operacje na bazie danych: Utwórz bazę danych o nazwie egzamin2
W XAMPP Control Panel Start przy Apache i MySQL, potem http://localhost/phpmyadmin, Nowa, nazwa egzamin2 (z cyfrą 2 na końcu), Utwórz. Strony w tym zadaniu nie łączą się z bazą - baza służy do importu i czterech zapytań.
Krok 3: Import pliku egzamin2.sql i zrzut egzamin.jpg
Kryteria:
R.1.1 Wykonano import tabel do bazy danych egzamin2 , czynność udokumentowano plikiem o nazwie egzamin w formacie JPG. Zrzut zawiera cały obszar ekranu monitora z widocznym paskiem zadań
ok. 3 min
Polecenie z arkusza
Do bazy egzamin2 zaimportuj tabele z pliku egzamin2.sql z rozpakowanego archiwum. Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie JPG pod nazwą egzamin, w folderze opisanym numerem PESEL. Nie kadruj zrzutu. Zrzut powinien obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel
Zaznacz bazę egzamin2, karta Import, Wybierz plik → egzamin2.sql, Wykonaj. Plik tworzy sześć tabel, choć arkusz opisuje tylko dwie: kadra (5 pracowników) i uslugi (10 usług) oraz niepotrzebne w tym zadaniu matematycy, typy, uzytkownik i wyniki.
Na zrzucie ma być widać zielony komunikat o sukcesie i tabele w lewym panelu. Zrzut całego ekranu z paskiem zadań zapisujesz jako egzamin.jpg - na przykład Print Screen, wklejenie do edytora grafiki i eksport do JPEG.
Typowe błędy
Zrzut importu ma być w JPG, a zrzuty zapytań w PNG - pomylony format to strata punktu. Wykadrowanego zrzutu albo zrzutu bez paska zadań klucz nie ocenia.
Podgląd strony po tym kroku
Krok 4: Zapytanie 1: pracownicy na stanowisku fryzjer
Kryteria: ,
R.1.2 Zapisano plik tekstowy o nazwie kwerendy zawierający co najmniej jedno zapytanie SQL, wynikające z treści zadania
R.1.3 Utworzono zapytanie 1 wybierające jedynie pola imie i nazwisko z tabeli kadra dla pracowników na stanowisku fryzjer. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT imie, nazwisko FROM kadra WHERE stanowisko = 'fryzjer'; oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczny jest jedynie jeden rekord z danymi Katarzyna Nowak
ok. 3 min
Polecenie z arkusza
Zapisz i wykonaj zapytania SQL działające na bazie egzamin2. Zapytania zapisz w pliku kwerendy.txt, w folderze z numerem PESEL. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie PNG i nadaj im nazwy kw1, kw2, kw3, kw4. Zrzuty powinny obejmować cały ekran monitora, z widocznym paskiem zadań. Zapytanie 1: wybierająca jedynie pola imie i nazwisko z tabeli kadra dla pracowników na stanowisku fryzjer
Zaznacz bazę egzamin2 i otwórz kartę SQL:
SELECT imie, nazwisko - tylko dwie kolumny; „jedynie” wyklucza SELECT *,
FROM kadra,
WHERE stanowisko = 'fryzjer' - tekst w apostrofach, dokładnie tak, jak zapisano go w bazie (małymi literami).
Wynik to jeden rekord: Katarzyna Nowak - ten sam, który podaje klucz. Zapytanie kopiujesz do nowego pliku kwerendy.txt, zrzut całego ekranu - do kw1.png.
Typowe błędy
WHERE stanowisko = fryzjer bez apostrofów to porównanie z kolumną o nazwie fryzjer, której nie ma - błąd #1054.
kwerendy.txt Tekst nowy plik
-- Zapytanie 1 SELECT imie, nazwisko FROM kadra WHERE stanowisko = 'fryzjer';
Podgląd strony po tym kroku
Krok 5: Zapytanie 2: liczba usług fryzjerskich
Kryteria:
R.1.4 Utworzono zapytanie 2 liczące liczbę rekordów w tabeli uslugi dla wszystkich usług fryzjerskich (rodzaj=2). W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT COUNT(*) FROM uslugi WHERE rodzaj=2; (zamiast * może wystąpić dowolna nazwa pola) oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczna jest jedynie wartość 3 wynikająca z wydanego zapytania 2
ok. 2 min
Polecenie z arkusza
Zapytanie 2: liczące liczbę rekordów w tabeli uslugi dla wszystkich usług fryzjerskich (rodzaj odpowiada usługom fryzjerskim)
Arkusz podaje znaczenie pola rodzaj: 1 - usługi kosmetyczne, 2 - fryzjerskie, 3 - inne.
SELECT COUNT(*) - funkcja COUNT liczy wiersze, które przeszły przez warunek,
FROM uslugi,
WHERE rodzaj = 2 - tylko usługi fryzjerskie.
Fryzjerskie są: Farbowanie, Strzyzenie, Czesanie - wynik 3, taki sam jak w kluczu. Zrzut: kw2.png.
Typowe błędy
SUM(rodzaj) doda wartości pola (2 + 2 + 2 = 6) zamiast policzyć rekordy. Zapytanie ma działać dla dowolnych danych - warunek po polu rodzaj.
kwerendy.txt Tekst zmienione: 3 linie
-- Zapytanie 1 SELECT imie, nazwisko FROM kadra WHERE stanowisko = 'fryzjer'; -- Zapytanie 2 SELECT COUNT(*) FROM uslugi WHERE rodzaj = 2;
Podgląd strony po tym kroku
Krok 6: Zapytanie 3: konto fryzjer na localhost
Kryteria:
R.1.5 Utworzono zapytanie 3 tworzące użytkownika fryzjer na localhost z hasłem Fryz12 W pliku z kwerendami lub na zrzucie istnieje zapis np.: CREATE USER 'fryzjer'@'localhost' IDENTIFIED BY 'Fryz12'; oraz wynik działania zapytania udokumentowano zrzutem wskazującym na pomyślne dodanie użytkownika fryzjer nie uznajemy za spełnione jeśli nie jest widoczne hasło (np wygenerowano z kreatora)
ok. 2 min
Polecenie z arkusza
Zapytanie 3: tworzące użytkownika fryzjer na localhost z hasłem Fryz12
CREATE USER 'fryzjer'@'localhost' - nowe konto serwera bazy danych (nie wiersz w tabeli); część @'localhost' oznacza, że konto może się łączyć tylko z tego samego komputera, na którym działa serwer,
IDENTIFIED BY 'Fryz12' - hasło konta; wielkość liter ma znaczenie.
phpMyAdmin odpowiada „MySQL zwrócił pusty wynik” - polecenie niczego nie wybiera, więc to znak sukcesu. Zrzut: kw3.png.
Typowe błędy
Klucz nie uznaje konta założonego kreatorem Dodaj konto użytkownika, bo na zrzucie nie widać hasła - zapytanie wpisz na karcie SQL. Drugie wykonanie zgłosi błąd #1396 - konto już istnieje.
kwerendy.txt Tekst zmienione: 3 linie
-- Zapytanie 1 SELECT imie, nazwisko FROM kadra WHERE stanowisko = 'fryzjer'; -- Zapytanie 2 SELECT COUNT(*) FROM uslugi WHERE rodzaj = 2; -- Zapytanie 3 CREATE USER 'fryzjer'@'localhost' IDENTIFIED BY 'Fryz12';
Podgląd strony po tym kroku
Krok 7: Zapytanie 4: prawa CREATE, ALTER i SELECT do tabeli kadra
Kryteria:
R.1.6 Utworzono zapytanie 4 nadające jedynie prawa tworzenia i modyfikowania struktury tabeli oraz przeglądania danych w tabeli kadra bazy egzamin2 dla użytkownika fryzjer W pliku z kwerendami lub na zrzucie istnieje zapis np.: GRANT CREATE, ALTER, SELECT ON egzamin2.kadra TO 'fryzjer'@'localhost'; oraz wynik działania zapytania udokumentowano zrzutem wskazującym na pomyślne wykonanie zapytania 4
ok. 3 min
Polecenie z arkusza
Zapytanie 4: nadające prawa tworzenia i modyfikowania struktury tabeli oraz przeglądania danych w tabeli kadra bazy egzamin2 dla użytkownika fryzjer
Każda część zdania arkusza to jedno prawo:
tworzenie struktury tabeli - CREATE,
modyfikowanie struktury - ALTER (dodawanie, zmiana i usuwanie kolumn),
przeglądanie danych - SELECT.
Dalej ON egzamin2.kadra - zapis baza.tabela ogranicza prawa do jednej tabeli, i TO 'fryzjer'@'localhost' - konto podane tak samo jak przy tworzeniu, razem z hostem. Sprawdzone poleceniem SHOW GRANTS: konto ma GRANT SELECT, CREATE, ALTER ON egzamin2.kadra - serwer wypisuje prawa w swojej kolejności. Zrzut: kw4.png; plik kwerendy.txt ma komplet czterech zapytań.
Typowe błędy
UPDATE to zmiana danych, a nie struktury - klucz wymaga „jedynie” CREATE, ALTER, SELECT, więc dodatkowe prawo odbiera punkt.
kwerendy.txt Tekst zmienione: 3 linie
-- Zapytanie 1 SELECT imie, nazwisko FROM kadra WHERE stanowisko = 'fryzjer'; -- Zapytanie 2 SELECT COUNT(*) FROM uslugi WHERE rodzaj = 2; -- Zapytanie 3 CREATE USER 'fryzjer'@'localhost' IDENTIFIED BY 'Fryz12'; -- Zapytanie 4 GRANT CREATE, ALTER, SELECT ON egzamin2.kadra TO 'fryzjer'@'localhost';
Podgląd strony po tym kroku
Etap 2: Grafika i strona HTML
Kroki 8-9 · po tym etapie masz 7 z 33 kryteriów (pkt)

Krok 8: Grafika: obraz1.jpg o wysokości 290 px
Kryteria:
R.2.1 Plik obraz1.jpg przeskalowano z zachowaniem proporcji do wysokości 290 px, odpowiadająca temu szerokość wynosi 232 px (± 2 px) lub plik obraz2.jpg przeskalowano z zachowaniem proporcji do szerokości 600 px, odpowiadająca temu wysokość wynosi 262 px (± 2 px)
ok. 2 min
Polecenie z arkusza
Plik obraz1.jpg, wypakowany z archiwum, należy przeskalować z zachowaniem proporcji tak, aby jego wysokość wynosiła dokładnie 290 px
Oryginał ma 352 × 440 px. W GIMP-ie Obraz → Skaluj obraz, łańcuch między szerokością a wysokością złączony (to jest zachowanie proporcji), wysokość 290 - szerokość przelicza się sama: 352 × 290 / 440 = 232 px. Klucz podaje właśnie 232 px (±2). Plik → Nadpisz obraz1.jpg.
Typowe błędy
Ustawienie wymiarów atrybutem height albo w CSS nie zmienia pliku - klucz mierzy sam plik.
Podgląd strony po tym kroku
Krok 9: Grafika: obraz2.jpg o szerokości 600 px
ok. 2 min
Polecenie z arkusza
Plik obraz2.jpg, wypakowany z archiwum, należy przeskalować z zachowaniem proporcji tak, aby jego szerokość wynosiła dokładnie 600 px
Oryginał ma 1000 × 436 px. Ta sama operacja, tym razem wpisujesz szerokość 600 - wysokość: 436 × 600 / 1000 = 261,6, czyli 262 px (klucz: 262 px ±2). Wystarczy jeden z dwóch obrazów, żeby dostać R.2.1, ale arkusz wymaga obu.
Podgląd strony po tym kroku
Etap 3: Strona HTML
Kroki 10-22 · po tym etapie masz 17 z 33 kryteriów (pkt)
Krok 10: Plik index.html i kodowanie
Kryteria:
R.2.2 Witrynę internetową zapisano w plikach HTML o nazwie index i fryzura oraz na przynajmniej jednej stronie zastosowano właściwy standard kodowania polskich znaków
ok. 2 min
Polecenie z arkusza
Składa się ze stron o nazwach index.html oraz fryzura.html. Obie strony różnią się jedynie drugim blokiem lewym. Zastosowany właściwy standard kodowania polskich znaków
Szkielet index.html z <meta charset="UTF-8"> (R.2.2) i znacznikiem viewport dla telefonów. fryzura.html będzie kopią z innym drugim blokiem lewym.
index.html HTML nowy plik
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> </body> </html>
Podgląd strony po tym kroku (index.html)
Krok 11: Tytuł i arkusz stylów
Kryteria: ,
R.2.3 Nadano tytuł: "Usługi fryzjerskie” przynajmniej dla jednej strony
R.3.5 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl2 , formatowanie pochodzi jedynie z tego arkusza Uwaga: kryterium to nie jest spełnione również, gdy zdający źle przypisał co najmniej jeden selektor do bloku (np. kropka zamiast #)
ok. 1 min
Polecenie z arkusza
Tytuł strony widoczny na karcie przeglądarki: „Usługi fryzjerskie”. Arkusz stylów w pliku o nazwie styl2.css prawidłowo połączony z kodem strony
<title> (R.2.3) i <link rel="stylesheet" href="styl2.css"> - nazwa pliku z cyfrą 2, jak w arkuszu (R.3.5).
index.html HTML zmienione: 2 linie
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Usługi fryzjerskie</title> <link rel="stylesheet" href="styl2.css"> </head> <body> </body> </html>
Podgląd strony po tym kroku (index.html)
Krok 12: Bloki w kontenerze main
Kryteria:
R.2.4 Wygląd przynajmniej jednej strony zdefiniowano dzieląc ją na bloki: dwa bloki po lewej stronie i trzy po prawej, poniżej stopka. Zastosowano znaczniki sekcji
ok. 3 min
Polecenie z arkusza
Podział strony na bloki: dwa bloki po lewej stronie i trzy po prawej, poniżej stopka. Podział zrealizowany za pomocą znaczników sekcji tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z Obrazem 2
Pięć bloków to znaczniki <section> (R.2.4) w kontenerze <main>, stopka to <footer> poza nim.
Kolejność w kodzie jest kolumnami: najpierw dwa bloki lewe, potem trzy prawe. W stylach <main> ułoży bloki z góry na dół i po zapełnieniu lewej kolumny przejdzie do prawej - kod czyta się tak, jak wygląda strona.
index.html HTML zmienione: 14 linii
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Usługi fryzjerskie</title> <link rel="stylesheet" href="styl2.css"> </head> <body> <main class="layout"> <section id="left1"> </section> <section id="left2"> </section> <section id="right1"> </section> <section id="right2"> </section> <section id="right3"> </section> </main> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (index.html)

Krok 13: Pierwszy blok lewy: nagłówek-odnośnik i zdjęcie

Kryteria:

R.3.3 Na przynajmniej jednej stronie odnośnik "SALON FRYZJERSKI" prowadzi do strony index.html

ok. 2 min

Polecenie z arkusza

Zawartość pierwszego bloku po lewej stronie: Nagłówek drugiego stopnia o treści „SALON FRYZJERSKI”, który jest jednocześnie odnośnikiem do strony index.html. Obraz o nazwie obraz2.jpg z tekstem alternatywnym „Czesanie”

<h2> z odnośnikiem <a href="index.html"> w środku (R.3.3) i zdjęcie z alt. Atrybuty width i height rezerwują miejsce, zanim obraz się wczyta.

index.html HTML zmienione: 2 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Usługi fryzjerskie</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <main class="layout">
        <section id="left1">
            <h2><a href="index.html">SALON FRYZJERSKI</a></h2>
            <img src="obraz2.jpg" alt="Czesanie" width="600" height="262">
        </section>
        <section id="left2">
        </section>
        <section id="right1">
        </section>
        <section id="right2">
        </section>
        <section id="right3">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.html)

Krok 14: Pierwszy blok prawy: „MENU”

ok. 1 min

Polecenie z arkusza

Zawartość pierwszego bloku po prawej stronie: Nagłówek drugiego stopnia o treści „MENU”

<h2>.

index.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Usługi fryzjerskie</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <main class="layout">
        <section id="left1">
            <h2><a href="index.html">SALON FRYZJERSKI</a></h2>
            <img src="obraz2.jpg" alt="Czesanie" width="600" height="262">
        </section>
        <section id="left2">
        </section>
        <section id="right1">
            <h2>MENU</h2>
        </section>
        <section id="right2">
        </section>
        <section id="right3">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.html)

Krok 15: Drugi blok prawy: lista z podlistą

Kryteria:

R.2.7 Na przynajmniej jednej stronie w drugim bloku prawym umieszczono listę numerowaną z trzema elementami, pierwszy z elementów ma zagnieżdżoną listę punktowaną z czterema elementami, zastosowano znaczniki <ul>, <ol>, <li> oraz ich zamknięcia

ok. 3 min

Polecenie z arkusza

Zawartość drugiego bloku po prawej stronie: Lista numerowana (uporządkowana) z elementami: Strzyżenie, Czesanie, Koloryzacja. Element „Strzyżenie” ma zagnieżdżoną listę punktowaną (nieuporządkowaną) z elementami: krótkie, średnie, półdługie, długie

<ol> i w jej pierwszym elemencie - przed </li> - lista <ul> (R.2.7). Wcięcia w kodzie pokazują zagnieżdżenie.

index.html HTML zmienione: 12 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Usługi fryzjerskie</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <main class="layout">
        <section id="left1">
            <h2><a href="index.html">SALON FRYZJERSKI</a></h2>
            <img src="obraz2.jpg" alt="Czesanie" width="600" height="262">
        </section>
        <section id="left2">
        </section>
        <section id="right1">
            <h2>MENU</h2>
        </section>
        <section id="right2">
            <ol>
                <li><a href="fryzura.html">Strzyżenie</a>
                    <ul>
                        <li>krótkie</li>
                        <li>średnie</li>
                        <li>półdługie</li>
                        <li>długie</li>
                    </ul>
                </li>
                <li>Czesanie</li>
                <li>Koloryzacja</li>
            </ol>
        </section>
        <section id="right3">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.html)

Krok 16: Odnośnik „Strzyżenie”

Kryteria:

R.3.2 Na przynajmniej jednej stronie odnośnik "Strzyżenie" prowadzi do strony fryzura.html

ok. 1 min

Polecenie z arkusza

Tekst elementu „Strzyżenie” jest równocześnie odnośnikiem do strony fryzura.html

Tekst elementu stoi w odnośniku <a href="fryzura.html"> ze ścieżką względną (R.3.2); podlista jest za odnośnikiem.

index.html HTML zmienione: 0 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Usługi fryzjerskie</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <main class="layout">
        <section id="left1">
            <h2><a href="index.html">SALON FRYZJERSKI</a></h2>
            <img src="obraz2.jpg" alt="Czesanie" width="600" height="262">
        </section>
        <section id="left2">
        </section>
        <section id="right1">
            <h2>MENU</h2>
        </section>
        <section id="right2">
            <ol>
                <li><a href="fryzura.html">Strzyżenie</a>
                    <ul>
                        <li>krótkie</li>
                        <li>średnie</li>
                        <li>półdługie</li>
                        <li>długie</li>
                    </ul>
                </li>
                <li>Czesanie</li>
                <li>Koloryzacja</li>
            </ol>
        </section>
        <section id="right3">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>

Podgląd strony bez zmian - taki jak po kroku 15.

Krok 17: Trzeci blok prawy: zdjęcie

Kryteria:

R.2.6 Na przynajmniej jednej stronie umieszczono w trzecim bloku prawym obraz obraz1.jpg z tekstem alternatywnym "Fryzjer" oraz umieszczono w pierwszym lewym bloku obraz obraz2.jpg z tekstem alternatywnym "Czesanie"

ok. 1 min

Polecenie z arkusza

Zawartość trzeciego bloku po prawej stronie Obraz o nazwie obraz1.jpg z tekstem alternatywnym „Fryzjer”

Zdjęcie z alt - razem z obrazem w pierwszym bloku lewym to R.2.6.

index.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Usługi fryzjerskie</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <main class="layout">
        <section id="left1">
            <h2><a href="index.html">SALON FRYZJERSKI</a></h2>
            <img src="obraz2.jpg" alt="Czesanie" width="600" height="262">
        </section>
        <section id="left2">
        </section>
        <section id="right1">
            <h2>MENU</h2>
        </section>
        <section id="right2">
            <ol>
                <li><a href="fryzura.html">Strzyżenie</a>
                    <ul>
                        <li>krótkie</li>
                        <li>średnie</li>
                        <li>półdługie</li>
                        <li>długie</li>
                    </ul>
                </li>
                <li>Czesanie</li>
                <li>Koloryzacja</li>
            </ol>
        </section>
        <section id="right3">
            <img src="obraz1.jpg" alt="Fryzjer" width="232" height="290">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.html)

Krok 18: Stopka

ok. 1 min

Polecenie z arkusza

Zawartość stopki: Akapit (paragraf) o treści „Autor: ”, dalej wstawiony numer PESEL zdającego

Akapit <p> w <footer>; na egzaminie numer PESEL, tu Bartosz Bryniarski.

index.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Usługi fryzjerskie</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <main class="layout">
        <section id="left1">
            <h2><a href="index.html">SALON FRYZJERSKI</a></h2>
            <img src="obraz2.jpg" alt="Czesanie" width="600" height="262">
        </section>
        <section id="left2">
        </section>
        <section id="right1">
            <h2>MENU</h2>
        </section>
        <section id="right2">
            <ol>
                <li><a href="fryzura.html">Strzyżenie</a>
                    <ul>
                        <li>krótkie</li>
                        <li>średnie</li>
                        <li>półdługie</li>
                        <li>długie</li>
                    </ul>
                </li>
                <li>Czesanie</li>
                <li>Koloryzacja</li>
            </ol>
        </section>
        <section id="right3">
            <img src="obraz1.jpg" alt="Fryzjer" width="232" height="290">
        </section>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.html)

Krok 19: Drugi blok lewy index.html

ok. 2 min

Polecenie z arkusza

Zawartość drugiego bloku po lewej stronie dla index.html: Nagłówek piątego stopnia o treści „Kontakt: 111 222 333”. Akapit (paragraf) o treści zgodnej z Obrazem 2, łamanie wiersza zgodne z Obrazem 2 Treść akapitu: „Witaj! Miło nam, że odwiedziłeś nasz salon. Zapoznaj się z ofertą i sprawdź promocje!”

<h5> i akapit z <br> po pierwszym zdaniu, jak na obrazie 2. Strona index.html jest kompletna.

index.html HTML zmienione: 3 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Usługi fryzjerskie</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <main class="layout">
        <section id="left1">
            <h2><a href="index.html">SALON FRYZJERSKI</a></h2>
            <img src="obraz2.jpg" alt="Czesanie" width="600" height="262">
        </section>
        <section id="left2">
            <h5>Kontakt: 111 222 333</h5>
            <p>Witaj! Miło nam, że odwiedziłeś nasz salon.<br>
            Zapoznaj się z ofertą i sprawdź promocje!</p>
        </section>
        <section id="right1">
            <h2>MENU</h2>
        </section>
        <section id="right2">
            <ol>
                <li><a href="fryzura.html">Strzyżenie</a>
                    <ul>
                        <li>krótkie</li>
                        <li>średnie</li>
                        <li>półdługie</li>
                        <li>długie</li>
                    </ul>
                </li>
                <li>Czesanie</li>
                <li>Koloryzacja</li>
            </ol>
        </section>
        <section id="right3">
            <img src="obraz1.jpg" alt="Fryzjer" width="232" height="290">
        </section>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.html)

Krok 20: Strona fryzura.html: nagłówek

Kryteria:

R.2.5 Na przynajmniej jednej stronie w pierwszym bloku lewym zapisano nagłówek h2: "SALON FRYZJERSKI", w pierwszym bloku prawym zapisano nagłówek h2: "MENU", w bloku drugim lewym nagłówek h5: "Kontakt: 111 222 333" i nagłówek h3: "Dziś promocja na strzyżenie włosów" oraz przynajmniej jeden paragraf (znacznik <p>)

ok. 2 min

Polecenie z arkusza

Wygląd drugiego bloku po lewej stronie dla fryzura.html przedstawiono na Obrazie 3, jego zawartość to: Nagłówek trzeciego stopnia o treści „Dziś promocja na strzyżenie włosów”

Kopia index.html jako fryzura.html z nagłówkiem <h3> w drugim bloku lewym. Komplet nagłówków i akapit to R.2.5.

fryzura.html HTML nowy plik

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Usługi fryzjerskie</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <main class="layout">
        <section id="left1">
            <h2><a href="index.html">SALON FRYZJERSKI</a></h2>
            <img src="obraz2.jpg" alt="Czesanie" width="600" height="262">
        </section>
        <section id="left2">
            <h3>Dziś promocja na strzyżenie włosów</h3>
        </section>
        <section id="right1">
            <h2>MENU</h2>
        </section>
        <section id="right2">
            <ol>
                <li><a href="fryzura.html">Strzyżenie</a>
                    <ul>
                        <li>krótkie</li>
                        <li>średnie</li>
                        <li>półdługie</li>
                        <li>długie</li>
                    </ul>
                </li>
                <li>Czesanie</li>
                <li>Koloryzacja</li>
            </ol>
        </section>
        <section id="right3">
            <img src="obraz1.jpg" alt="Fryzjer" width="232" height="290">
        </section>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (fryzura.html)

Krok 21: Cztery pola radio z etykietami i cenami

ok. 3 min

Polecenie z arkusza

Cztery pola radio jedno pod drugim z podpisami: Krótkie, Średnie, Półdługie, Długie. W danym momencie tylko jedno pole radio może być zaznaczone

wspólna nazwa name="length" łączy pola w jedną grupę - zaznaczenie jednego odznacza pozostałe,
<label for> wiąże podpis z polem: kliknięcie napisu zaznacza pole,
data-price - cena z tabeli arkusza przy polu, którego dotyczy; skrypt odczyta ją jako dataset.price,
każde pole we własnym <div> - jedno pod drugim bez <br>.

fryzura.html HTML zmienione: 4 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Usługi fryzjerskie</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <main class="layout">
        <section id="left1">
            <h2><a href="index.html">SALON FRYZJERSKI</a></h2>
            <img src="obraz2.jpg" alt="Czesanie" width="600" height="262">
        </section>
        <section id="left2">
            <h3>Dziś promocja na strzyżenie włosów</h3>
            <div><input type="radio" name="length" id="short" data-price="25"> <label for="short">Krótkie</label></div>
            <div><input type="radio" name="length" id="medium" data-price="30"> <label for="medium">Średnie</label></div>
            <div><input type="radio" name="length" id="halflong" data-price="40"> <label for="halflong">Półdługie</label></div>
            <div><input type="radio" name="length" id="long" data-price="50"> <label for="long">Długie</label></div>
        </section>
        <section id="right1">
            <h2>MENU</h2>
        </section>
        <section id="right2">
            <ol>
                <li><a href="fryzura.html">Strzyżenie</a>
                    <ul>
                        <li>krótkie</li>
                        <li>średnie</li>
                        <li>półdługie</li>
                        <li>długie</li>
                    </ul>
                </li>
                <li>Czesanie</li>
                <li>Koloryzacja</li>
            </ol>
        </section>
        <section id="right3">
            <img src="obraz1.jpg" alt="Fryzjer" width="232" height="290">
        </section>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (fryzura.html)

Krok 22: Przycisk i miejsce na wynik

Kryteria:

R.2.8 Na stronie fryzura.html w drugim bloku lewym umieszczono cztery pola radio oraz przycisk o treści: "Odkryj promocję" oraz w danym momencie tylko jedno pole radio może być zaznaczone

ok. 2 min

Polecenie z arkusza

Poniżej przycisk o treści „Odkryj promocję”. Poniżej wyniki działania skryptu

<button type="button"> z identyfikatorem check, bez onclick - skrypt sam się podłączy. Pusty akapit result na wynik; aria-live="polite" każe czytnikowi ekranu odczytać wynik, gdy się pojawi. Pola radio w jednej grupie i przycisk to R.2.8.

fryzura.html HTML zmienione: 2 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Usługi fryzjerskie</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <main class="layout">
        <section id="left1">
            <h2><a href="index.html">SALON FRYZJERSKI</a></h2>
            <img src="obraz2.jpg" alt="Czesanie" width="600" height="262">
        </section>
        <section id="left2">
            <h3>Dziś promocja na strzyżenie włosów</h3>
            <div><input type="radio" name="length" id="short" data-price="25"> <label for="short">Krótkie</label></div>
            <div><input type="radio" name="length" id="medium" data-price="30"> <label for="medium">Średnie</label></div>
            <div><input type="radio" name="length" id="halflong" data-price="40"> <label for="halflong">Półdługie</label></div>
            <div><input type="radio" name="length" id="long" data-price="50"> <label for="long">Długie</label></div>
            <button type="button" id="check">Odkryj promocję</button>
            <p id="result" aria-live="polite"></p>
        </section>
        <section id="right1">
            <h2>MENU</h2>
        </section>
        <section id="right2">
            <ol>
                <li><a href="fryzura.html">Strzyżenie</a>
                    <ul>
                        <li>krótkie</li>
                        <li>średnie</li>
                        <li>półdługie</li>
                        <li>długie</li>
                    </ul>
                </li>
                <li>Czesanie</li>
                <li>Koloryzacja</li>
            </ol>
        </section>
        <section id="right3">
            <img src="obraz1.jpg" alt="Fryzjer" width="232" height="290">
        </section>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (fryzura.html)

Etap 4: Styl CSS
Kroki 23-33 · po tym etapie masz 28 z 33 kryteriów (pkt)
Krok 23: Zmienne z kolorami i krój Helvetica
Kryteria:
R.4.1 Ustawiono domyślny krój czcionki dla całej strony na Helvetica (dla selektora * lub body, lub html, lub kontenera całej strony)
ok. 2 min
Polecenie z arkusza
Domyślne dla całej strony: krój czcionki Helvetica
Dwa kolory arkusza jako zmienne w :root. font-family: Helvetica, Arial, sans-serif na body (R.4.1) - Helvetiki zwykle nie ma w Windows, więc zapasowy Arial wygląda prawie tak samo.
styl2.css CSS nowy plik
:root { --blue: SteelBlue; --snow: Snow; } body { font-family: Helvetica, Arial, sans-serif; }
Podgląd strony po tym kroku (index.html)
Krok 24: Pierwszy blok lewy
ok. 1 min
Polecenie z arkusza
Dla pierwszego lewego bloku: wysokość 400 px, szerokość 70%, kolor tła Snow, wyrównanie tekstu do środka
Wymiary, tło ze zmiennej i wyśrodkowanie.
styl2.css CSS zmienione: 6 linii
:root { --blue: SteelBlue; --snow: Snow; } body { font-family: Helvetica, Arial, sans-serif; } #left1 { height: 400px; width: 70%; background-color: var(--snow); text-align: center; }
Podgląd strony po tym kroku (index.html)
Krok 25: Drugi blok lewy
Kryteria:
R.4.7 Ustawiono rozmiar czcionki na 150% dla drugiego lewego bloku
ok. 1 min
Polecenie z arkusza
Dla drugiego lewego bloku: wysokość 400 px, szerokość 70%, kolor tła Snow, rozmiar czcionki 150%
Lewe bloki razem: 800 px (R.4.7 - rozmiar 150%).
styl2.css CSS zmienione: 6 linii
:root { --blue: SteelBlue; --snow: Snow; } body { font-family: Helvetica, Arial, sans-serif; } #left1 { height: 400px; width: 70%; background-color: var(--snow); text-align: center; } #left2 { height: 400px; width: 70%; background-color: var(--snow); font-size: 150%; }
Podgląd strony po tym kroku (index.html)

Krok 26: Pierwszy blok prawy

ok. 1 min

Polecenie z arkusza

Dla pierwszego prawego bloku: wysokość 150 px, szerokość 30%, kolor tła SteelBlue, biały kolor czcionki, wyrównanie tekstu do środka

Ciemne tło i biały tekst.

styl2.css CSS zmienione: 7 linii

:root {
    --blue: SteelBlue;
    --snow: Snow;
}
body {
    font-family: Helvetica, Arial, sans-serif;
}
#left1 {
    height: 400px;
    width: 70%;
    background-color: var(--snow);
    text-align: center;
}
#left2 {
    height: 400px;
    width: 70%;
    background-color: var(--snow);
    font-size: 150%;
}
#right1 {
    height: 150px;
    width: 30%;
    background-color: var(--blue);
    color: white;
    text-align: center;
}

Podgląd strony po tym kroku (index.html)

Krok 27: Drugi blok prawy

ok. 1 min

Polecenie z arkusza

Dla drugiego prawego bloku: wysokość 350 px, szerokość 30%, kolor tła SteelBlue, biały kolor czcionki

Bez wyrównania - lista zostaje przy lewej krawędzi.

styl2.css CSS zmienione: 6 linii

:root {
    --blue: SteelBlue;
    --snow: Snow;
}
body {
    font-family: Helvetica, Arial, sans-serif;
}
#left1 {
    height: 400px;
    width: 70%;
    background-color: var(--snow);
    text-align: center;
}
#left2 {
    height: 400px;
    width: 70%;
    background-color: var(--snow);
    font-size: 150%;
}
#right1 {
    height: 150px;
    width: 30%;
    background-color: var(--blue);
    color: white;
    text-align: center;
}
#right2 {
    height: 350px;
    width: 30%;
    background-color: var(--blue);
    color: white;
}

Podgląd strony po tym kroku (index.html)

Krok 28: Trzeci blok prawy

Kryteria: , ,

R.4.4 Ustawiono wysokość bloków lewych na 400px oraz bloków prawych kolejno na 150px, 350px, 300px

R.4.5 Ustawiono szerokość bloków lewych na 70% oraz prawych na 30%

R.4.6 Ustawiono wyrównanie tekstu do środka dla bloków pierwszego lewego oraz pierwszego i trzeciego prawego

ok. 1 min

Polecenie z arkusza

Dla trzeciego prawego bloku: wysokość 300 px, szerokość 30%, kolor tła Snow, wyrównanie tekstu do środka

Prawe bloki razem też mają 800 px. Wysokości (R.4.4), szerokości (R.4.5) i wyrównania (R.4.6) są kompletne.

styl2.css CSS zmienione: 6 linii

:root {
    --blue: SteelBlue;
    --snow: Snow;
}
body {
    font-family: Helvetica, Arial, sans-serif;
}
#left1 {
    height: 400px;
    width: 70%;
    background-color: var(--snow);
    text-align: center;
}
#left2 {
    height: 400px;
    width: 70%;
    background-color: var(--snow);
    font-size: 150%;
}
#right1 {
    height: 150px;
    width: 30%;
    background-color: var(--blue);
    color: white;
    text-align: center;
}
#right2 {
    height: 350px;
    width: 30%;
    background-color: var(--blue);
    color: white;
}
#right3 {
    height: 300px;
    width: 30%;
    background-color: var(--snow);
    text-align: center;
}

Podgląd strony po tym kroku (index.html)

Krok 29: Stopka

Kryteria: ,

R.4.2 Ustawiono kolor tła SteelBlue dla pierwszego i drugiego prawego bloku oraz stopki, a kolor Snow dla pozostałych bloków

R.4.3 Ustawiono biały kolor czcionki dla pierwszego i drugiego prawego bloku oraz stopki

ok. 1 min

Polecenie z arkusza

Dla stopki: kolor tła SteelBlue, biały kolor czcionki

Tła (R.4.2) i biały tekst (R.4.3) są kompletne. Reguła footer p { margin: 0; } zdejmuje domyślny margines akapitu - bez niej wychodzi on poza stopkę i między blokami a paskiem stopki zostaje biały pas 16 px (w wersji podstawowej zjada go clear). Klucz tego nie ocenia.

styl2.css CSS zmienione: 7 linii

:root {
    --blue: SteelBlue;
    --snow: Snow;
}
body {
    font-family: Helvetica, Arial, sans-serif;
}
#left1 {
    height: 400px;
    width: 70%;
    background-color: var(--snow);
    text-align: center;
}
#left2 {
    height: 400px;
    width: 70%;
    background-color: var(--snow);
    font-size: 150%;
}
#right1 {
    height: 150px;
    width: 30%;
    background-color: var(--blue);
    color: white;
    text-align: center;
}
#right2 {
    height: 350px;
    width: 30%;
    background-color: var(--blue);
    color: white;
}
#right3 {
    height: 300px;
    width: 30%;
    background-color: var(--snow);
    text-align: center;
}
footer {
    background-color: var(--blue);
    color: white;
}
footer p {
    margin: 0;
}

Podgląd strony po tym kroku (index.html)

Krok 30: Układ: kontener flex w kolumnach

Kryteria:

R.3.1 Układ bloków po uruchomieniu strony w przeglądarce jest w pełni zgodny z Obrazem 2 w arkuszu egzaminacyjnym

ok. 3 min

Polecenie z arkusza

Podział strony na bloki: dwa bloki po lewej stronie i trzy po prawej, poniżej stopka.

display: flex z flex-direction: column - <main> układa bloki z góry na dół,
flex-wrap: wrap i height: 800px - po zapełnieniu lewej kolumny (400 + 400) kolejny blok przechodzi do nowej kolumny; trzy prawe (150 + 350 + 300) wypełniają ją dokładnie,
szerokość kolumny wynika z szerokości bloków: 70% i 30% szerokości <main>.

Stopka stoi pod kontenerem bez clear. Zmierzone w Chrome przy oknie 1280 px (R.3.1).

styl2.css CSS zmienione: 6 linii

:root {
    --blue: SteelBlue;
    --snow: Snow;
}
body {
    font-family: Helvetica, Arial, sans-serif;
}
#left1 {
    height: 400px;
    width: 70%;
    background-color: var(--snow);
    text-align: center;
}
#left2 {
    height: 400px;
    width: 70%;
    background-color: var(--snow);
    font-size: 150%;
}
#right1 {
    height: 150px;
    width: 30%;
    background-color: var(--blue);
    color: white;
    text-align: center;
}
#right2 {
    height: 350px;
    width: 30%;
    background-color: var(--blue);
    color: white;
}
#right3 {
    height: 300px;
    width: 30%;
    background-color: var(--snow);
    text-align: center;
}
footer {
    background-color: var(--blue);
    color: white;
}
footer p {
    margin: 0;
}
.layout {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 800px;
}

Podgląd strony po tym kroku (index.html)

Krok 31: Nagłówki h2

Kryteria:

R.4.8 Ustawiono styl dla nagłówka h2: rozmiar czcionki 250%

ok. 1 min

Polecenie z arkusza

Dla nagłówka drugiego stopnia: rozmiar czcionki 250%

Selektor h2 (R.4.8).

styl2.css CSS zmienione: 3 linie

:root {
    --blue: SteelBlue;
    --snow: Snow;
}
body {
    font-family: Helvetica, Arial, sans-serif;
}
#left1 {
    height: 400px;
    width: 70%;
    background-color: var(--snow);
    text-align: center;
}
#left2 {
    height: 400px;
    width: 70%;
    background-color: var(--snow);
    font-size: 150%;
}
#right1 {
    height: 150px;
    width: 30%;
    background-color: var(--blue);
    color: white;
    text-align: center;
}
#right2 {
    height: 350px;
    width: 30%;
    background-color: var(--blue);
    color: white;
}
#right3 {
    height: 300px;
    width: 30%;
    background-color: var(--snow);
    text-align: center;
}
footer {
    background-color: var(--blue);
    color: white;
}
footer p {
    margin: 0;
}
.layout {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 800px;
}
h2 {
    font-size: 250%;
}

Podgląd strony po tym kroku (index.html)

Krok 32: Obraz: margines wewnętrzny

Kryteria:

R.4.9 Ustawiono styl dla obrazu: marginesy wewnętrzne (padding) 4px

ok. 1 min

Polecenie z arkusza

Dla obrazu: marginesy wewnętrzne 4 px

padding: 4px (R.4.9).

styl2.css CSS zmienione: 3 linie

:root {
    --blue: SteelBlue;
    --snow: Snow;
}
body {
    font-family: Helvetica, Arial, sans-serif;
}
#left1 {
    height: 400px;
    width: 70%;
    background-color: var(--snow);
    text-align: center;
}
#left2 {
    height: 400px;
    width: 70%;
    background-color: var(--snow);
    font-size: 150%;
}
#right1 {
    height: 150px;
    width: 30%;
    background-color: var(--blue);
    color: white;
    text-align: center;
}
#right2 {
    height: 350px;
    width: 30%;
    background-color: var(--blue);
    color: white;
}
#right3 {
    height: 300px;
    width: 30%;
    background-color: var(--snow);
    text-align: center;
}
footer {
    background-color: var(--blue);
    color: white;
}
footer p {
    margin: 0;
}
.layout {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 800px;
}
h2 {
    font-size: 250%;
}
img {
    padding: 4px;
}

Podgląd strony po tym kroku (index.html)

Krok 33: Obraz pod kursorem

Kryteria:

R.4.10 Ustawiono styl dla obrazu z pseudoklasą hover: marginesy wewnętrzne (padding) 3 px oraz obramowanie linią ciągłą o szerokości 1 px i kolorze SteelBlue

ok. 1 min

Polecenie z arkusza

W momencie, gdy kursor znajduje się na obrazie, styl obrazu zmienia się na: marginesy wewnętrzne 3 px oraz obramowanie linią ciągłą o szerokości 1 px i kolorze SteelBlue (efekt ten jest widoczny na Obrazie 2)

padding mniejszy o 1 px o grubość ramki - obraz zajmuje tyle samo miejsca, nic nie drga (R.4.10).

styl2.css CSS zmienione: 4 linie

:root {
    --blue: SteelBlue;
    --snow: Snow;
}
body {
    font-family: Helvetica, Arial, sans-serif;
}
#left1 {
    height: 400px;
    width: 70%;
    background-color: var(--snow);
    text-align: center;
}
#left2 {
    height: 400px;
    width: 70%;
    background-color: var(--snow);
    font-size: 150%;
}
#right1 {
    height: 150px;
    width: 30%;
    background-color: var(--blue);
    color: white;
    text-align: center;
}
#right2 {
    height: 350px;
    width: 30%;
    background-color: var(--blue);
    color: white;
}
#right3 {
    height: 300px;
    width: 30%;
    background-color: var(--snow);
    text-align: center;
}
footer {
    background-color: var(--blue);
    color: white;
}
footer p {
    margin: 0;
}
.layout {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 800px;
}
h2 {
    font-size: 250%;
}
img {
    padding: 4px;
}
img:hover {
    padding: 3px;
    border: 1px solid var(--blue);
}

Podgląd strony po tym kroku (index.html)

Etap 5: Skrypt JavaScript

Kroki 34-37 · po tym etapie masz 33 z 33 kryteriów (pkt)

Krok 34: Plik skrypt.js podpięty z defer

Kryteria:

R.5.1 Skrypt napisano w języku uruchamianym po stronie przeglądarki i zawiera on co najmniej jedną instrukcję tego języka zapisaną zgodnie ze składnią

ok. 2 min

Polecenie z arkusza

Napisany w języku wykonywanym po stronie przeglądarki

Skrypt w osobnym pliku skrypt.js, podpiętym w <head> strony fryzura.html przez <script src="skrypt.js" defer> - defer wykonuje go po wczytaniu HTML-a, więc przycisk już istnieje (R.5.1). Dwie stałe przechowują przycisk i akapit na wynik.

fryzura.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Usługi fryzjerskie</title>
    <link rel="stylesheet" href="styl2.css">
    <script src="skrypt.js" defer></script>
</head>
<body>
    <main class="layout">
        <section id="left1">
            <h2><a href="index.html">SALON FRYZJERSKI</a></h2>
            <img src="obraz2.jpg" alt="Czesanie" width="600" height="262">
        </section>
        <section id="left2">
            <h3>Dziś promocja na strzyżenie włosów</h3>
            <div><input type="radio" name="length" id="short" data-price="25"> <label for="short">Krótkie</label></div>
            <div><input type="radio" name="length" id="medium" data-price="30"> <label for="medium">Średnie</label></div>
            <div><input type="radio" name="length" id="halflong" data-price="40"> <label for="halflong">Półdługie</label></div>
            <div><input type="radio" name="length" id="long" data-price="50"> <label for="long">Długie</label></div>
            <button type="button" id="check">Odkryj promocję</button>
            <p id="result" aria-live="polite"></p>
        </section>
        <section id="right1">
            <h2>MENU</h2>
        </section>
        <section id="right2">
            <ol>
                <li><a href="fryzura.html">Strzyżenie</a>
                    <ul>
                        <li>krótkie</li>
                        <li>średnie</li>
                        <li>półdługie</li>
                        <li>długie</li>
                    </ul>
                </li>
                <li>Czesanie</li>
                <li>Koloryzacja</li>
            </ol>
        </section>
        <section id="right3">
            <img src="obraz1.jpg" alt="Fryzjer" width="232" height="290">
        </section>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

skrypt.js JavaScript nowy plik

const button = document.getElementById('check');
const result = document.getElementById('result');

Podgląd strony po tym kroku (fryzura.html)

Krok 35: Nasłuchiwanie kliknięcia

Kryteria:

R.3.4 Po wciśnięciu przycisku wywoływana jest funkcja zapisana skryptem

ok. 2 min

Polecenie z arkusza

Uruchamia się po wciśnięciu przycisku na stronie fryzura.html

addEventListener('click', ...) podłącza funkcję do przycisku (R.3.4). price zaczyna od null - „jeszcze nic nie wybrano”, co odróżnia się od każdej ceny.

fryzura.html HTML zmienione: 0 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Usługi fryzjerskie</title>
    <link rel="stylesheet" href="styl2.css">
    <script src="skrypt.js" defer></script>
</head>
<body>
    <main class="layout">
        <section id="left1">
            <h2><a href="index.html">SALON FRYZJERSKI</a></h2>
            <img src="obraz2.jpg" alt="Czesanie" width="600" height="262">
        </section>
        <section id="left2">
            <h3>Dziś promocja na strzyżenie włosów</h3>
            <div><input type="radio" name="length" id="short" data-price="25"> <label for="short">Krótkie</label></div>
            <div><input type="radio" name="length" id="medium" data-price="30"> <label for="medium">Średnie</label></div>
            <div><input type="radio" name="length" id="halflong" data-price="40"> <label for="halflong">Półdługie</label></div>
            <div><input type="radio" name="length" id="long" data-price="50"> <label for="long">Długie</label></div>
            <button type="button" id="check">Odkryj promocję</button>
            <p id="result" aria-live="polite"></p>
        </section>
        <section id="right1">
            <h2>MENU</h2>
        </section>
        <section id="right2">
            <ol>
                <li><a href="fryzura.html">Strzyżenie</a>
                    <ul>
                        <li>krótkie</li>
                        <li>średnie</li>
                        <li>półdługie</li>
                        <li>długie</li>
                    </ul>
                </li>
                <li>Czesanie</li>
                <li>Koloryzacja</li>
            </ol>
        </section>
        <section id="right3">
            <img src="obraz1.jpg" alt="Fryzjer" width="232" height="290">
        </section>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

skrypt.js JavaScript zmienione: 4 linie

const button = document.getElementById('check');
const result = document.getElementById('result');

button.addEventListener('click', () => {
    let price = null;
});

Podgląd strony po tym kroku (fryzura.html)

Krok 36: Cena zaznaczonego pola

Kryteria: ,

R.5.2 Skrypt sprawdza za pomocą instrukcji warunkowej lub wyboru, które pole radio jest zaznaczone

R.5.3 Skrypt ustala cenę strzyżenia w zależności od wyboru dokonanego w polach radio zgodnie z tabelą w arkuszu

ok. 3 min

Polecenie z arkusza

Podaje cenę strzyżenia w zależności od wyboru dokonanego przez pola radio zgodnie z cennikiem w tabeli

querySelectorAll('input[name="length"]') - wszystkie pola grupy, for...of po kolei,
if (radio.checked) - instrukcja warunkowa sprawdza, które pole jest zaznaczone (R.5.2),
Number(radio.dataset.price) - cena z atrybutu data-price jako liczba (R.5.3).

Cennik jest w jednym miejscu, przy polach - nowa długość to nowa linia HTML, bez zmiany skryptu.

fryzura.html HTML zmienione: 0 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Usługi fryzjerskie</title>
    <link rel="stylesheet" href="styl2.css">
    <script src="skrypt.js" defer></script>
</head>
<body>
    <main class="layout">
        <section id="left1">
            <h2><a href="index.html">SALON FRYZJERSKI</a></h2>
            <img src="obraz2.jpg" alt="Czesanie" width="600" height="262">
        </section>
        <section id="left2">
            <h3>Dziś promocja na strzyżenie włosów</h3>
            <div><input type="radio" name="length" id="short" data-price="25"> <label for="short">Krótkie</label></div>
            <div><input type="radio" name="length" id="medium" data-price="30"> <label for="medium">Średnie</label></div>
            <div><input type="radio" name="length" id="halflong" data-price="40"> <label for="halflong">Półdługie</label></div>
            <div><input type="radio" name="length" id="long" data-price="50"> <label for="long">Długie</label></div>
            <button type="button" id="check">Odkryj promocję</button>
            <p id="result" aria-live="polite"></p>
        </section>
        <section id="right1">
            <h2>MENU</h2>
        </section>
        <section id="right2">
            <ol>
                <li><a href="fryzura.html">Strzyżenie</a>
                    <ul>
                        <li>krótkie</li>
                        <li>średnie</li>
                        <li>półdługie</li>
                        <li>długie</li>
                    </ul>
                </li>
                <li>Czesanie</li>
                <li>Koloryzacja</li>
            </ol>
        </section>
        <section id="right3">
            <img src="obraz1.jpg" alt="Fryzjer" width="232" height="290">
        </section>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

skrypt.js JavaScript zmienione: 5 linii

const button = document.getElementById('check');
const result = document.getElementById('result');

button.addEventListener('click', () => {
    let price = null;
    for (const radio of document.querySelectorAll('input[name="length"]')) {
        if (radio.checked) {
            price = Number(radio.dataset.price);
        }
    }
});

Podgląd strony po tym kroku (fryzura.html)

Krok 37: Wynik przez textContent

Kryteria:

R.5.4 Skrypt wypisuje wynik pod przyciskiem według wzoru: „Cena strzyżenia: <wartość>”, gdzie <wartość> oznacza cenę ustaloną przez skrypt

ok. 2 min

Polecenie z arkusza

Wyświetla wynik działania pod przyciskiem według wzoru: „Cena strzyżenia: <wartość>”, gdzie <wartość> oznacza cenę strzyżenia dla wskazanej długości włosów

Szablon tekstowy wstawia cenę w miejsce ${price}, a textContent wpisuje zwykły tekst (R.5.4). Gdy nic nie jest zaznaczone, zamiast „Cena strzyżenia: null” pojawia się prośba o wybór. Sprawdzone w Chrome dla każdej długości i bez wyboru.

fryzura.html HTML zmienione: 0 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Usługi fryzjerskie</title>
    <link rel="stylesheet" href="styl2.css">
    <script src="skrypt.js" defer></script>
</head>
<body>
    <main class="layout">
        <section id="left1">
            <h2><a href="index.html">SALON FRYZJERSKI</a></h2>
            <img src="obraz2.jpg" alt="Czesanie" width="600" height="262">
        </section>
        <section id="left2">
            <h3>Dziś promocja na strzyżenie włosów</h3>
            <div><input type="radio" name="length" id="short" data-price="25"> <label for="short">Krótkie</label></div>
            <div><input type="radio" name="length" id="medium" data-price="30"> <label for="medium">Średnie</label></div>
            <div><input type="radio" name="length" id="halflong" data-price="40"> <label for="halflong">Półdługie</label></div>
            <div><input type="radio" name="length" id="long" data-price="50"> <label for="long">Długie</label></div>
            <button type="button" id="check">Odkryj promocję</button>
            <p id="result" aria-live="polite"></p>
        </section>
        <section id="right1">
            <h2>MENU</h2>
        </section>
        <section id="right2">
            <ol>
                <li><a href="fryzura.html">Strzyżenie</a>
                    <ul>
                        <li>krótkie</li>
                        <li>średnie</li>
                        <li>półdługie</li>
                        <li>długie</li>
                    </ul>
                </li>
                <li>Czesanie</li>
                <li>Koloryzacja</li>
            </ol>
        </section>
        <section id="right3">
            <img src="obraz1.jpg" alt="Fryzjer" width="232" height="290">
        </section>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
</body>
</html>

skrypt.js JavaScript zmienione: 5 linii

const button = document.getElementById('check');
const result = document.getElementById('result');

button.addEventListener('click', () => {
    let price = null;
    for (const radio of document.querySelectorAll('input[name="length"]')) {
        if (radio.checked) {
            price = Number(radio.dataset.price);
        }
    }
    if (price === null) {
        result.textContent = 'Wybierz długość włosów.';
    } else {
        result.textContent = `Cena strzyżenia: ${price}`;
    }
});

Podgląd strony po tym kroku (fryzura.html)

Etap 6: Porównanie z wersją podstawową

Krok 38 · po tym etapie masz 33 z 33 kryteriów (pkt)

Krok 38: Co daje druga wersja

ok. 3 min

Obie wersje dają ten sam wygląd i ten sam wynik, i obie spełniają wszystkie 33 kryteria. Różnice:

	wersja podstawowa	wersja nowoczesna
układ	`float` i `clear`, bloki w kolejności lewy-prawy-prawy-lewy-prawy	`<main>` z `flex` w kolumnach, bloki w kolejności kolumn
kolory	wpisane w każdej regule	zmienne CSS
pola	podpis za polem, `<br>`	`<label for>` w osobnych `<div>`
ceny	cztery gałęzie `if` / `else if` z liczbami w skrypcie	`data-price` przy polach, jedna pętla
skrypt	w `<script>` na stronie, `onclick` w HTML-u	`skrypt.js` z `defer`, `addEventListener`
brak wyboru	pusta cena	prośba o wybór

Na egzaminie wystarczy wersja podstawowa - klucz sprawdza wynik, nie sposób. Nowoczesna pokazuje kod łatwy do rozbudowy: piąta długość włosów nie wymaga zmiany skryptu.

Podgląd strony bez zmian - taki jak po kroku 37.

Etap 7: Oddanie pracy
Krok 39 · po tym etapie masz 33 z 33 kryteriów (pkt)
Krok 39: Plik przeglądarka.txt i nagranie płyty
ok. 5 min
Polecenie z arkusza
Po zakończeniu pracy utwórz plik tekstowy. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Nazwij plik przeglądarka.txt i zapisz go w folderze z numerem PESEL. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz strony i skrypt.
W folderze z numerem PESEL muszą być: egzamin.jpg, fryzura.html, index.html, kw1.png - kw4.png, kwerendy.txt, obraz1.jpg, obraz2.jpg, przeglądarka.txt, skrypt.js i styl2.css. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem PESEL - zapakowana w pudełko zostaje na stanowisku razem z arkuszem.
przeglądarka.txt Tekst nowy plik
Google Chrome
Podgląd strony bez zmian - taki jak po kroku 37.

To jedno z możliwych rozwiązań. Egzaminator ocenia spełnienie kryteriów z klucza odpowiedzi, a nie zgodność z tym kodem - inna, poprawna droga też daje punkty.

Autor rozwiązania: Bartosz Bryniarski. Licencja CC BY-NC 4.0 - kopiowanie i przeróbki do celów niekomercyjnych, z podaniem autora i źródła (link do tej strony) (zasady wykorzystania). Treść arkusza i klucza oceniania pochodzi z CKE.

Rozwiązanie krok po kroku: Salon fryzjerski z cennikiem strzyżenia (Nowoczesny kod (flex, addEventListener))

Etap 1: Baza danych

Krok 1: Folder zdającego i archiwum egzamin2.zip

Krok 2: XAMPP i pusta baza egzamin2

Krok 3: Import pliku egzamin2.sql i zrzut egzamin.jpg

Krok 4: Zapytanie 1: pracownicy na stanowisku fryzjer

Krok 5: Zapytanie 2: liczba usług fryzjerskich

Krok 6: Zapytanie 3: konto fryzjer na localhost

Krok 7: Zapytanie 4: prawa CREATE, ALTER i SELECT do tabeli kadra

Etap 2: Grafika i strona HTML

Krok 8: Grafika: obraz1.jpg o wysokości 290 px

Krok 9: Grafika: obraz2.jpg o szerokości 600 px

Etap 3: Strona HTML

Krok 10: Plik index.html i kodowanie

Krok 11: Tytuł i arkusz stylów

Krok 12: Bloki w kontenerze main

Krok 13: Pierwszy blok lewy: nagłówek-odnośnik i zdjęcie

Krok 14: Pierwszy blok prawy: „MENU”

Krok 15: Drugi blok prawy: lista z podlistą

Krok 16: Odnośnik „Strzyżenie”

Krok 17: Trzeci blok prawy: zdjęcie

Krok 18: Stopka

Krok 19: Drugi blok lewy index.html

Krok 20: Strona fryzura.html: nagłówek

Krok 21: Cztery pola radio z etykietami i cenami

Krok 22: Przycisk i miejsce na wynik

Etap 4: Styl CSS

Krok 23: Zmienne z kolorami i krój Helvetica

Krok 24: Pierwszy blok lewy

Krok 25: Drugi blok lewy

Krok 26: Pierwszy blok prawy

Krok 27: Drugi blok prawy

Krok 28: Trzeci blok prawy

Krok 29: Stopka

Krok 30: Układ: kontener flex w kolumnach

Krok 31: Nagłówki h2

Krok 32: Obraz: margines wewnętrzny

Krok 33: Obraz pod kursorem

Etap 5: Skrypt JavaScript

Krok 34: Plik skrypt.js podpięty z defer

Krok 35: Nasłuchiwanie kliknięcia

Krok 36: Cena zaznaczonego pola

Krok 37: Wynik przez textContent

Etap 6: Porównanie z wersją podstawową

Krok 38: Co daje druga wersja

Etap 7: Oddanie pracy

Krok 39: Plik przeglądarka.txt i nagranie płyty

Podgląd