Rozwiązanie buduje witrynę salonu fryzjerskiego: baza fryzjer i cztery zapytania - warunek „albo” (OR), liczba i maksimum w grupie (COUNT, MAX), złączenie tabel (JOIN) i nowa kolumna (ALTER TABLE ... ADD), potem dwa obrazy przeskalowane do zadanej szerokości, dwie strony (index.html i fryzura.html) z trzema blokami po lewej i dwoma po prawej, style w styl8.css i skrypt JavaScript na stronie promocji: po wybraniu długości włosów i kliknięciu przycisku pokazuje cenę strzyżenia o 10 zł niższą niż w cenniku.
Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Strona główna powstaje w całości, a fryzura.html powstaje z jej kopii - różni się tylko drugim blokiem lewym. Skrypt jest najpierw pisany najprościej (onclick, osobny if dla każdego pola), a na końcu zostaje przerobiony na wersję z prawdziwych projektów.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, JS w pliku)” jest drugi sposób rozwiązania tego samego arkusza: siatka CSS z kolumnami 72% i 28% zamiast float i clear (bloki w kodzie w naturalnej kolejności), kolory w zmiennych CSS i skrypt w osobnym pliku z addEventListener i cennikiem w jednym obiekcie - obie wersje są zgodne z kluczem.
Baza i grafiki pochodzą z prawdziwego archiwum materialy8 (załącznik do arkusza, hasło w treści zadania). Zapytania i zrzuty są policzone na MariaDB 10.4 - tej samej, która jest w XAMPP. Skrypt jest sprawdzony dla każdej długości włosów i dla przypadku, gdy nic nie zaznaczono; w podglądzie strony fryzura.html można wybierać pola i klikać „Odkryj promocję”.
Jak liczą się punkty. Klucz ma 37 kryteriów (R.1.1 - R.5.6), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 28 punktów - można stracić 9 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem.
Kroki 1-7 · po tym etapie masz 6 z 37 kryteriów (pkt)
Utwórz bazę danych o nazwie fryzjer.
Rozpakuj materialy8.7z z pulpitu (hasło XSaloon[Fryz]) do folderu z numerem zdającego: egzamin2.sql, obraz1.jpg i obraz2.jpg. W phpMyAdmin: Nowa, nazwa fryzjer.
Do bazy fryzjer zaimportuj tabele z pliku egzamin2.sql z rozpakowanego archiwum.
Import → egzamin2.sql. W zadaniu potrzebne są dwie tabele z obrazu 1: uslugi (z rodzajem: 1 - kosmetyczne, 2 - fryzjerskie, 3 - inne, oraz kluczem obcym kadra_id) i kadra (pracownicy).
Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie PNG pod nazwą import. 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.
Print Screen i zapis jako import.png. Zrzuty zapytań mają być w JPEG (kw1.jpg - kw4.jpg) i zawierać treść zapytania.
Zapytanie 1: wybierające jedynie pola imie, nazwisko, stanowisko z tabeli kadra dla pracowników na stanowisku fryzjer albo stylista.
SELECT imie, nazwisko, stanowisko FROM kadra - trzy kolumny,WHERE stanowisko = 'fryzjer' OR stanowisko = 'stylista' - „albo” to OR: wystarczy, że spełniony jest jeden z warunków (krócej: stanowisko IN ('fryzjer', 'stylista')).Wynik: dwie osoby - Aleksandra Wilk (stylista) i Katarzyna Nowak (fryzjer), jak w kluczu. Zapytanie do kwerendy.txt, zrzut kw1.jpg.
AND zamiast OR szuka osoby, która jest jednocześnie fryzjerem i stylistą - wynik jest pusty.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT imie, nazwisko, stanowisko FROM kadra WHERE stanowisko = 'fryzjer' OR stanowisko = 'stylista';
Zapytanie 2: liczące liczbę usług fryzjerskich oraz wskazujące najwyższą cenę usług fryzjerskich.
COUNT(*) - liczba wierszy, MAX(cena) - największa cena,WHERE rodzaj = 2 - usługi fryzjerskie mają rodzaj 2.Wynik: 3 i 50 - trzy usługi fryzjerskie, najdroższa za 50 zł. Zrzut kw2.jpg.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT imie, nazwisko, stanowisko FROM kadra WHERE stanowisko = 'fryzjer' OR stanowisko = 'stylista';
-- Zapytanie 2
SELECT COUNT(*), MAX(cena) FROM uslugi WHERE rodzaj = 2;
Zapytanie 3: wybierające nazwy usług oraz przypisane do nich imiona osób z tabeli kadra dla rodzaju usług: fryzjerskie albo inne, należy posłużyć się relacją.
FROM uslugi JOIN kadra ON uslugi.kadra_id = kadra.id - relacja: usługa dostaje wiersz pracownika, na którego wskazuje jej kadra_id,WHERE rodzaj = 2 OR rodzaj = 3 - fryzjerskie albo inne (działa też rodzaj > 1).Wynik: 5 usług - Ustalenie diety (Anna), Farbowanie, Strzyżenie i Czesanie (Katarzyna), Masaż twarzy (Piotr). Zrzut kw3.jpg.
ON kadra_id = id bez nazwy tabeli przy id daje błąd „kolumna niejednoznaczna” - obie tabele mają kolumnę id.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT imie, nazwisko, stanowisko FROM kadra WHERE stanowisko = 'fryzjer' OR stanowisko = 'stylista';
-- Zapytanie 2
SELECT COUNT(*), MAX(cena) FROM uslugi WHERE rodzaj = 2;
-- Zapytanie 3
SELECT nazwa, imie FROM uslugi JOIN kadra ON uslugi.kadra_id = kadra.id WHERE rodzaj = 2 OR rodzaj = 3;
Zapytanie 4: dodające kolumnę do tabeli uslugi o nazwie opinia typu napisowego.
ALTER TABLE zmienia budowę tabeli, a ADD opinia TEXT dopisuje kolumnę na końcu. Typ napisowy to TEXT albo VARCHAR(...). Istniejące wiersze dostają w nowej kolumnie NULL. Zrzut kw4.jpg - komunikat albo struktura tabeli z kolumną opinia.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT imie, nazwisko, stanowisko FROM kadra WHERE stanowisko = 'fryzjer' OR stanowisko = 'stylista';
-- Zapytanie 2
SELECT COUNT(*), MAX(cena) FROM uslugi WHERE rodzaj = 2;
-- Zapytanie 3
SELECT nazwa, imie FROM uslugi JOIN kadra ON uslugi.kadra_id = kadra.id WHERE rodzaj = 2 OR rodzaj = 3;
-- Zapytanie 4
ALTER TABLE uslugi ADD opinia TEXT;
Kroki 8-23 · po tym etapie masz 20 z 37 kryteriów (pkt)
Plik obraz1.jpg, wypakowany z archiwum, należy przeskalować z zachowaniem proporcji tak, aby jego szerokość wynosiła dokładnie 250 px. Plik obraz2.jpg, wypakowany z archiwum, należy przeskalować z zachowaniem proporcji tak, aby jego szerokość wynosiła dokładnie 650 px.
W GIMP-ie Obraz → Skaluj obraz z zamkniętym łańcuchem: obraz1.jpg - szerokość 250, wysokość wychodzi 312 px; obraz2.jpg - szerokość 650, wysokość 283 px, jak w kluczu (±5 px).
Cechy witryny: Składa się ze stron o nazwach index.html oraz fryzura.html. Obie strony różnią się jedynie drugim blokiem lewym. Strony index.html i fryzura.html zapisane w języku HTML 5.
Zbuduj w całości index.html, a fryzura.html powstanie z jej kopii z innym drugim blokiem lewym.
index.html HTML nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Ustawiony język zawartości stron na polski.
Atrybut lang="pl".
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
</head>
<body>
</body>
</html>Jawnie zastosowany właściwy standard kodowania polskich znaków.
<meta charset="UTF-8">.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony widoczny na karcie przeglądarki: „Fryzjerstwo”.
<title> w <head>.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fryzjerstwo</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl8.css prawidłowo połączony z kodem strony.
Nazwa z cyfrą: styl8.css.
styl.css bez ósemki odcina wszystkie style (R.3.6).
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fryzjerstwo</title>
<link rel="stylesheet" href="styl8.css">
</head>
<body>
</body>
</html>Podział strony na bloki: trzy bloki po lewej stronie i dwa 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ęć <section> i <footer>. Kolejność w kodzie jest naprzemienna: lewy 1, prawy 1, lewy 2, prawy 2, lewy 3 - tak jak bloki leżą na stronie, czytane od góry. To ułatwi ułożenie ich w dwóch kolumnach mimo różnych wysokości (krok układu w CSS).
index.html HTML zmienione: 12 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fryzjerstwo</title>
<link rel="stylesheet" href="styl8.css">
</head>
<body>
<section id="left1">
</section>
<section id="right1">
</section>
<section id="left2">
</section>
<section id="right2">
</section>
<section id="left3">
</section>
<footer>
</footer>
</body>
</html>Zawartość pierwszego bloku po lewej stronie: Nagłówek pierwszego stopnia o treści „SALON FRYZJERSKI”, który jest odnośnikiem do strony index.html.
Odnośnik stoi wewnątrz nagłówka: <h1><a href="index.html">...</a></h1> - nagłówek zostaje nagłówkiem, a jego tekst da się kliknąć (R.3.3).
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fryzjerstwo</title>
<link rel="stylesheet" href="styl8.css">
</head>
<body>
<section id="left1">
<h1><a href="index.html">SALON FRYZJERSKI</a></h1>
</section>
<section id="right1">
</section>
<section id="left2">
</section>
<section id="right2">
</section>
<section id="left3">
</section>
<footer>
</footer>
</body>
</html>Zawartość pierwszego bloku po prawej stronie: Nagłówek czwartego stopnia o treści „Ceny strzyżenia”, który jest odnośnikiem do strony fryzura.html. Tabela o pięciu wierszach i dwóch kolumnach, w pierwszym wierszu znajdują się komórki nagłówkowe. Tabela jest zgodna z Tabelą 1 arkusza egzaminacyjnego.
<h4> z odnośnikiem do strony promocji (R.3.2) i tabela z Tabeli 1: wiersz nagłówkowy <th> i cztery wiersze cen.
index.html HTML zmienione: 23 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fryzjerstwo</title>
<link rel="stylesheet" href="styl8.css">
</head>
<body>
<section id="left1">
<h1><a href="index.html">SALON FRYZJERSKI</a></h1>
</section>
<section id="right1">
<h4><a href="fryzura.html">Ceny strzyżenia</a></h4>
<table>
<tr>
<th>Długość włosów</th>
<th>Cena</th>
</tr>
<tr>
<td>Krótkie</td>
<td>25</td>
</tr>
<tr>
<td>Średnie</td>
<td>30</td>
</tr>
<tr>
<td>Półdługie</td>
<td>40</td>
</tr>
<tr>
<td>Długie</td>
<td>50</td>
</tr>
</table>
</section>
<section id="left2">
</section>
<section id="right2">
</section>
<section id="left3">
</section>
<footer>
</footer>
</body>
</html>Zawartość drugiego bloku po prawej stronie: Obraz o nazwie obraz1.jpg z tekstem alternatywnym „Fryzjerka”.
Obraz z atrybutem alt.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fryzjerstwo</title>
<link rel="stylesheet" href="styl8.css">
</head>
<body>
<section id="left1">
<h1><a href="index.html">SALON FRYZJERSKI</a></h1>
</section>
<section id="right1">
<h4><a href="fryzura.html">Ceny strzyżenia</a></h4>
<table>
<tr>
<th>Długość włosów</th>
<th>Cena</th>
</tr>
<tr>
<td>Krótkie</td>
<td>25</td>
</tr>
<tr>
<td>Średnie</td>
<td>30</td>
</tr>
<tr>
<td>Półdługie</td>
<td>40</td>
</tr>
<tr>
<td>Długie</td>
<td>50</td>
</tr>
</table>
</section>
<section id="left2">
</section>
<section id="right2">
<img src="obraz1.jpg" alt="Fryzjerka">
</section>
<section id="left3">
</section>
<footer>
</footer>
</body>
</html>Zawartość trzeciego bloku po lewej stronie: Akapit (paragraf) o treści: „Witaj! Miło nam, że odwiedziłeś nasz salon. Sprawdź promocje!”. Nagłówek czwartego stopnia o treści „Kontakt: 444 555 666”.
Akapit i <h4>.
index.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fryzjerstwo</title>
<link rel="stylesheet" href="styl8.css">
</head>
<body>
<section id="left1">
<h1><a href="index.html">SALON FRYZJERSKI</a></h1>
</section>
<section id="right1">
<h4><a href="fryzura.html">Ceny strzyżenia</a></h4>
<table>
<tr>
<th>Długość włosów</th>
<th>Cena</th>
</tr>
<tr>
<td>Krótkie</td>
<td>25</td>
</tr>
<tr>
<td>Średnie</td>
<td>30</td>
</tr>
<tr>
<td>Półdługie</td>
<td>40</td>
</tr>
<tr>
<td>Długie</td>
<td>50</td>
</tr>
</table>
</section>
<section id="left2">
</section>
<section id="right2">
<img src="obraz1.jpg" alt="Fryzjerka">
</section>
<section id="left3">
<p>Witaj! Miło nam, że odwiedziłeś nasz salon. Sprawdź promocje!</p>
<h4>Kontakt: 444 555 666</h4>
</section>
<footer>
</footer>
</body>
</html>Zawartość stopki: Akapit (paragraf) o treści „Autor: ”, dalej wstawiony numer zdającego.
Na egzaminie po „Autor:” wpisujesz swój numer zdającego (PESEL), tu - autor rozwiązania.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fryzjerstwo</title>
<link rel="stylesheet" href="styl8.css">
</head>
<body>
<section id="left1">
<h1><a href="index.html">SALON FRYZJERSKI</a></h1>
</section>
<section id="right1">
<h4><a href="fryzura.html">Ceny strzyżenia</a></h4>
<table>
<tr>
<th>Długość włosów</th>
<th>Cena</th>
</tr>
<tr>
<td>Krótkie</td>
<td>25</td>
</tr>
<tr>
<td>Średnie</td>
<td>30</td>
</tr>
<tr>
<td>Półdługie</td>
<td>40</td>
</tr>
<tr>
<td>Długie</td>
<td>50</td>
</tr>
</table>
</section>
<section id="left2">
</section>
<section id="right2">
<img src="obraz1.jpg" alt="Fryzjerka">
</section>
<section id="left3">
<p>Witaj! Miło nam, że odwiedziłeś nasz salon. Sprawdź promocje!</p>
<h4>Kontakt: 444 555 666</h4>
</section>
<footer>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</body>
</html>Zawartość drugiego bloku po lewej stronie dla strony index.html: Obraz o nazwie obraz2.jpg z tekstem alternatywnym „Strzyżenie”.
Obraz z atrybutem alt.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fryzjerstwo</title>
<link rel="stylesheet" href="styl8.css">
</head>
<body>
<section id="left1">
<h1><a href="index.html">SALON FRYZJERSKI</a></h1>
</section>
<section id="right1">
<h4><a href="fryzura.html">Ceny strzyżenia</a></h4>
<table>
<tr>
<th>Długość włosów</th>
<th>Cena</th>
</tr>
<tr>
<td>Krótkie</td>
<td>25</td>
</tr>
<tr>
<td>Średnie</td>
<td>30</td>
</tr>
<tr>
<td>Półdługie</td>
<td>40</td>
</tr>
<tr>
<td>Długie</td>
<td>50</td>
</tr>
</table>
</section>
<section id="left2">
<img src="obraz2.jpg" alt="Strzyżenie">
</section>
<section id="right2">
<img src="obraz1.jpg" alt="Fryzjerka">
</section>
<section id="left3">
<p>Witaj! Miło nam, że odwiedziłeś nasz salon. Sprawdź promocje!</p>
<h4>Kontakt: 444 555 666</h4>
</section>
<footer>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</body>
</html>Zawartość drugiego bloku po lewej stronie dla strony fryzura.html (Obraz 3): Nagłówek drugiego stopnia o treści „PROMOCJA!”.
Zapisz jako fryzura.html z kopii strony głównej - wymieniasz tylko zawartość #left2.
fryzura.html HTML nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fryzjerstwo</title>
<link rel="stylesheet" href="styl8.css">
</head>
<body>
<section id="left1">
<h1><a href="index.html">SALON FRYZJERSKI</a></h1>
</section>
<section id="right1">
<h4><a href="fryzura.html">Ceny strzyżenia</a></h4>
<table>
<tr>
<th>Długość włosów</th>
<th>Cena</th>
</tr>
<tr>
<td>Krótkie</td>
<td>25</td>
</tr>
<tr>
<td>Średnie</td>
<td>30</td>
</tr>
<tr>
<td>Półdługie</td>
<td>40</td>
</tr>
<tr>
<td>Długie</td>
<td>50</td>
</tr>
</table>
</section>
<section id="left2">
<h2>PROMOCJA!</h2>
</section>
<section id="right2">
<img src="obraz1.jpg" alt="Fryzjerka">
</section>
<section id="left3">
<p>Witaj! Miło nam, że odwiedziłeś nasz salon. Sprawdź promocje!</p>
<h4>Kontakt: 444 555 666</h4>
</section>
<footer>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</body>
</html>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.
To, że zaznaczyć można tylko jedno pole, robi wspólna nazwa: wszystkie cztery mają name="length" - przeglądarka traktuje je jako jedną grupę (R.3.5). Identyfikatory muszą być różne - po nich skrypt sprawdzi, które pole jest zaznaczone.
Różne name w każdym polu pozwalają zaznaczyć kilka naraz - R.3.5 nie jest spełnione.
fryzura.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fryzjerstwo</title>
<link rel="stylesheet" href="styl8.css">
</head>
<body>
<section id="left1">
<h1><a href="index.html">SALON FRYZJERSKI</a></h1>
</section>
<section id="right1">
<h4><a href="fryzura.html">Ceny strzyżenia</a></h4>
<table>
<tr>
<th>Długość włosów</th>
<th>Cena</th>
</tr>
<tr>
<td>Krótkie</td>
<td>25</td>
</tr>
<tr>
<td>Średnie</td>
<td>30</td>
</tr>
<tr>
<td>Półdługie</td>
<td>40</td>
</tr>
<tr>
<td>Długie</td>
<td>50</td>
</tr>
</table>
</section>
<section id="left2">
<h2>PROMOCJA!</h2>
<input type="radio" name="length" id="short"><label for="short">Krótkie</label><br>
<input type="radio" name="length" id="medium"><label for="medium">Średnie</label><br>
<input type="radio" name="length" id="halflong"><label for="halflong">Półdługie</label><br>
<input type="radio" name="length" id="long"><label for="long">Długie</label><br>
</section>
<section id="right2">
<img src="obraz1.jpg" alt="Fryzjerka">
</section>
<section id="left3">
<p>Witaj! Miło nam, że odwiedziłeś nasz salon. Sprawdź promocje!</p>
<h4>Kontakt: 444 555 666</h4>
</section>
<footer>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</body>
</html>Poniżej przycisk o treści „Odkryj promocję”, którego wciśnięcie powoduje wykonanie skryptu.
onclick="discover()" wywoła funkcję skryptu, a pusty <p id="result"> pod przyciskiem przyjmie wynik.
fryzura.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fryzjerstwo</title>
<link rel="stylesheet" href="styl8.css">
</head>
<body>
<section id="left1">
<h1><a href="index.html">SALON FRYZJERSKI</a></h1>
</section>
<section id="right1">
<h4><a href="fryzura.html">Ceny strzyżenia</a></h4>
<table>
<tr>
<th>Długość włosów</th>
<th>Cena</th>
</tr>
<tr>
<td>Krótkie</td>
<td>25</td>
</tr>
<tr>
<td>Średnie</td>
<td>30</td>
</tr>
<tr>
<td>Półdługie</td>
<td>40</td>
</tr>
<tr>
<td>Długie</td>
<td>50</td>
</tr>
</table>
</section>
<section id="left2">
<h2>PROMOCJA!</h2>
<input type="radio" name="length" id="short"><label for="short">Krótkie</label><br>
<input type="radio" name="length" id="medium"><label for="medium">Średnie</label><br>
<input type="radio" name="length" id="halflong"><label for="halflong">Półdługie</label><br>
<input type="radio" name="length" id="long"><label for="long">Długie</label><br>
<button onclick="discover()">Odkryj promocję</button>
<p id="result"></p>
</section>
<section id="right2">
<img src="obraz1.jpg" alt="Fryzjerka">
</section>
<section id="left3">
<p>Witaj! Miło nam, że odwiedziłeś nasz salon. Sprawdź promocje!</p>
<h4>Kontakt: 444 555 666</h4>
</section>
<footer>
<p>Autor: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 24-30 · po tym etapie masz 31 z 37 kryteriów (pkt)
Ustawione domyślne wartości dla wszystkich selektorów stylu CSS: krój czcionki Garamond, wyrównanie tekstu do środka.
Selektor uniwersalny *.
styl8.css CSS nowy plik * {
font-family: Garamond;
text-align: center;
}Wspólne dla wszystkich bloków lewych: szerokość 72%. Dla pierwszego lewego bloku: kolor tła #795548, rozmiar czcionki 170%. Dla drugiego lewego bloku: wysokość 400 px.
Wspólna szerokość w jednej regule, reszta osobno.
styl8.css CSS zmienione: 10 linii * {
font-family: Garamond;
text-align: center;
}
#left1, #left2, #left3 {
width: 72%;
}
#left1 {
background-color: #795548;
font-size: 170%;
}
#left2 {
height: 400px;
}Wspólne dla obu prawych bloków: kolor tła #BCAAA4, kolor czcionki #795548, wysokość 400 px, szerokość 28%.
72% + 28% = cała szerokość.
styl8.css CSS zmienione: 6 linii * {
font-family: Garamond;
text-align: center;
}
#left1, #left2, #left3 {
width: 72%;
}
#left1 {
background-color: #795548;
font-size: 170%;
}
#left2 {
height: 400px;
}
#right1, #right2 {
background-color: #BCAAA4;
color: #795548;
height: 400px;
width: 28%;
}Dla stopki: kolor tła #795548, biały kolor czcionki, marginesy wewnętrzne 20 px.
Selektor footer.
styl8.css CSS zmienione: 5 linii * {
font-family: Garamond;
text-align: center;
}
#left1, #left2, #left3 {
width: 72%;
}
#left1 {
background-color: #795548;
font-size: 170%;
}
#left2 {
height: 400px;
}
#right1, #right2 {
background-color: #BCAAA4;
color: #795548;
height: 400px;
width: 28%;
}
footer {
background-color: #795548;
color: white;
padding: 20px;
}Dla selektora tabeli: marginesy zewnętrzne wyliczane automatycznie przez przeglądarkę, szerokość 80%, obramowanie linią ciągłą o szerokości 1 px i kolorze #795548. W momencie, gdy kursor znajduje się na wierszu tabeli, jego tło zmienia się na Sienna, a kolor czcionki na biały.
tr:hover - pseudoklasa dla wiersza, więc podświetla się cały wiersz, nie pojedyncza komórka. Najedź w podglądzie na wiersz cennika.
styl8.css CSS zmienione: 9 linii * {
font-family: Garamond;
text-align: center;
}
#left1, #left2, #left3 {
width: 72%;
}
#left1 {
background-color: #795548;
font-size: 170%;
}
#left2 {
height: 400px;
}
#right1, #right2 {
background-color: #BCAAA4;
color: #795548;
height: 400px;
width: 28%;
}
footer {
background-color: #795548;
color: white;
padding: 20px;
}
table {
margin: auto;
width: 80%;
border: 1px solid #795548;
}
tr:hover {
background-color: Sienna;
color: white;
}Dla selektora nagłówka czwartego stopnia: rozmiar czcionki 200%. Dla selektora obrazu: marginesy wewnętrzne 20 px, zaokrąglenie rogów 40 px. Dla selektora odnośnika: biały kolor czcionki. Dla pola radio: marginesy zewnętrzne 7 px.
h4, img, a - selektory znaczników, jak wymaga arkusz,border-radius: 40px zaokrągla rogi obrazu,input[type="radio"] - selektor atrybutu: tylko te <input>, które są polami radio, a nie każde pole formularza.styl8.css CSS zmienione: 13 linii * {
font-family: Garamond;
text-align: center;
}
#left1, #left2, #left3 {
width: 72%;
}
#left1 {
background-color: #795548;
font-size: 170%;
}
#left2 {
height: 400px;
}
#right1, #right2 {
background-color: #BCAAA4;
color: #795548;
height: 400px;
width: 28%;
}
footer {
background-color: #795548;
color: white;
padding: 20px;
}
table {
margin: auto;
width: 80%;
border: 1px solid #795548;
}
tr:hover {
background-color: Sienna;
color: white;
}
h4 {
font-size: 200%;
}
img {
padding: 20px;
border-radius: 40px;
}
a {
color: white;
}
input[type="radio"] {
margin: 7px;
}Podział strony na bloki: trzy bloki po lewej stronie i dwa po prawej, poniżej stopka, tak aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z Obrazem 2.
float: left i clear: left - każdy staje pod poprzednim lewym, przy lewej krawędzi,float: right i clear: right - każdy pod poprzednim prawym, przy prawej krawędzi,clear: both - pod najniższym blokiem z obu kolumn.Działa dzięki naprzemiennej kolejności w HTML: element pływający nie może stanąć wyżej niż poprzedni element pływający, więc pierwszy prawy blok musi być w kodzie przed drugim lewym.
Same float: left dla wszystkich bloków: drugi lewy blok wskoczy obok pierwszego zamiast pod niego.
styl8.css CSS zmienione: 11 linii * {
font-family: Garamond;
text-align: center;
}
#left1, #left2, #left3 {
width: 72%;
}
#left1 {
background-color: #795548;
font-size: 170%;
}
#left2 {
height: 400px;
}
#right1, #right2 {
background-color: #BCAAA4;
color: #795548;
height: 400px;
width: 28%;
}
footer {
background-color: #795548;
color: white;
padding: 20px;
}
table {
margin: auto;
width: 80%;
border: 1px solid #795548;
}
tr:hover {
background-color: Sienna;
color: white;
}
h4 {
font-size: 200%;
}
img {
padding: 20px;
border-radius: 40px;
}
a {
color: white;
}
input[type="radio"] {
margin: 7px;
}
#left1, #left2, #left3 {
float: left;
clear: left;
}
#right1, #right2 {
float: right;
clear: right;
}
footer {
clear: both;
}Kroki 31-34 · po tym etapie masz 37 z 37 kryteriów (pkt)
Napisany w języku wykonywanym po stronie przeglądarki. Uruchamia się po wciśnięciu przycisku na stronie fryzura.html.
Skrypt na końcu <body> strony fryzura.html, funkcja o nazwie z onclick: discover (odkryj).
fryzura.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fryzjerstwo</title>
<link rel="stylesheet" href="styl8.css">
</head>
<body>
<section id="left1">
<h1><a href="index.html">SALON FRYZJERSKI</a></h1>
</section>
<section id="right1">
<h4><a href="fryzura.html">Ceny strzyżenia</a></h4>
<table>
<tr>
<th>Długość włosów</th>
<th>Cena</th>
</tr>
<tr>
<td>Krótkie</td>
<td>25</td>
</tr>
<tr>
<td>Średnie</td>
<td>30</td>
</tr>
<tr>
<td>Półdługie</td>
<td>40</td>
</tr>
<tr>
<td>Długie</td>
<td>50</td>
</tr>
</table>
</section>
<section id="left2">
<h2>PROMOCJA!</h2>
<input type="radio" name="length" id="short"><label for="short">Krótkie</label><br>
<input type="radio" name="length" id="medium"><label for="medium">Średnie</label><br>
<input type="radio" name="length" id="halflong"><label for="halflong">Półdługie</label><br>
<input type="radio" name="length" id="long"><label for="long">Długie</label><br>
<button onclick="discover()">Odkryj promocję</button>
<p id="result"></p>
</section>
<section id="right2">
<img src="obraz1.jpg" alt="Fryzjerka">
</section>
<section id="left3">
<p>Witaj! Miło nam, że odwiedziłeś nasz salon. Sprawdź promocje!</p>
<h4>Kontakt: 444 555 666</h4>
</section>
<footer>
<p>Autor: Bartosz Bryniarski</p>
</footer>
<script>
function discover() {
}
</script>
</body>
</html>Na podstawie wybranego przycisku radio wyświetla promocyjną cenę strzyżenia. Cena promocyjna jest o 10 zł niższa od ceny strzyżenia zawartej w Tabeli 1.
Właściwość checked pola radio jest true, gdy to pole jest wybrane. Cenę zapisujesz jako 25 - 10 - od razu widać, skąd się wzięła (cena z Tabeli 1 minus 10 zł promocji).
fryzura.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fryzjerstwo</title>
<link rel="stylesheet" href="styl8.css">
</head>
<body>
<section id="left1">
<h1><a href="index.html">SALON FRYZJERSKI</a></h1>
</section>
<section id="right1">
<h4><a href="fryzura.html">Ceny strzyżenia</a></h4>
<table>
<tr>
<th>Długość włosów</th>
<th>Cena</th>
</tr>
<tr>
<td>Krótkie</td>
<td>25</td>
</tr>
<tr>
<td>Średnie</td>
<td>30</td>
</tr>
<tr>
<td>Półdługie</td>
<td>40</td>
</tr>
<tr>
<td>Długie</td>
<td>50</td>
</tr>
</table>
</section>
<section id="left2">
<h2>PROMOCJA!</h2>
<input type="radio" name="length" id="short"><label for="short">Krótkie</label><br>
<input type="radio" name="length" id="medium"><label for="medium">Średnie</label><br>
<input type="radio" name="length" id="halflong"><label for="halflong">Półdługie</label><br>
<input type="radio" name="length" id="long"><label for="long">Długie</label><br>
<button onclick="discover()">Odkryj promocję</button>
<p id="result"></p>
</section>
<section id="right2">
<img src="obraz1.jpg" alt="Fryzjerka">
</section>
<section id="left3">
<p>Witaj! Miło nam, że odwiedziłeś nasz salon. Sprawdź promocje!</p>
<h4>Kontakt: 444 555 666</h4>
</section>
<footer>
<p>Autor: Bartosz Bryniarski</p>
</footer>
<script>
function discover() {
let price = 0;
if (document.getElementById("short").checked) {
price = 25 - 10;
}
}
</script>
</body>
</html>Cena promocyjna jest o 10 zł niższa od ceny strzyżenia zawartej w Tabeli 1.
Zaznaczone jest zawsze najwyżej jedno pole radio, więc spełni się najwyżej jeden z czterech warunków. Ceny: 15, 20, 30 i 40 zł.
fryzura.html HTML zmienione: 9 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fryzjerstwo</title>
<link rel="stylesheet" href="styl8.css">
</head>
<body>
<section id="left1">
<h1><a href="index.html">SALON FRYZJERSKI</a></h1>
</section>
<section id="right1">
<h4><a href="fryzura.html">Ceny strzyżenia</a></h4>
<table>
<tr>
<th>Długość włosów</th>
<th>Cena</th>
</tr>
<tr>
<td>Krótkie</td>
<td>25</td>
</tr>
<tr>
<td>Średnie</td>
<td>30</td>
</tr>
<tr>
<td>Półdługie</td>
<td>40</td>
</tr>
<tr>
<td>Długie</td>
<td>50</td>
</tr>
</table>
</section>
<section id="left2">
<h2>PROMOCJA!</h2>
<input type="radio" name="length" id="short"><label for="short">Krótkie</label><br>
<input type="radio" name="length" id="medium"><label for="medium">Średnie</label><br>
<input type="radio" name="length" id="halflong"><label for="halflong">Półdługie</label><br>
<input type="radio" name="length" id="long"><label for="long">Długie</label><br>
<button onclick="discover()">Odkryj promocję</button>
<p id="result"></p>
</section>
<section id="right2">
<img src="obraz1.jpg" alt="Fryzjerka">
</section>
<section id="left3">
<p>Witaj! Miło nam, że odwiedziłeś nasz salon. Sprawdź promocje!</p>
<h4>Kontakt: 444 555 666</h4>
</section>
<footer>
<p>Autor: Bartosz Bryniarski</p>
</footer>
<script>
function discover() {
let price = 0;
if (document.getElementById("short").checked) {
price = 25 - 10;
}
if (document.getElementById("medium").checked) {
price = 30 - 10;
}
if (document.getElementById("halflong").checked) {
price = 40 - 10;
}
if (document.getElementById("long").checked) {
price = 50 - 10;
}
}
</script>
</body>
</html>Wynik działania wyświetla się w akapicie pod przyciskiem według wzoru: „cena promocyjna: <wartość>”, gdzie <wartość> oznacza obliczoną cenę.
Wybierz w podglądzie „Średnie” i kliknij „Odkryj promocję” - „cena promocyjna: 20”, jak na obrazie 3. Nazwy zmiennych i funkcji są po angielsku i mówią, co przechowują (R.5.6).
fryzura.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fryzjerstwo</title>
<link rel="stylesheet" href="styl8.css">
</head>
<body>
<section id="left1">
<h1><a href="index.html">SALON FRYZJERSKI</a></h1>
</section>
<section id="right1">
<h4><a href="fryzura.html">Ceny strzyżenia</a></h4>
<table>
<tr>
<th>Długość włosów</th>
<th>Cena</th>
</tr>
<tr>
<td>Krótkie</td>
<td>25</td>
</tr>
<tr>
<td>Średnie</td>
<td>30</td>
</tr>
<tr>
<td>Półdługie</td>
<td>40</td>
</tr>
<tr>
<td>Długie</td>
<td>50</td>
</tr>
</table>
</section>
<section id="left2">
<h2>PROMOCJA!</h2>
<input type="radio" name="length" id="short"><label for="short">Krótkie</label><br>
<input type="radio" name="length" id="medium"><label for="medium">Średnie</label><br>
<input type="radio" name="length" id="halflong"><label for="halflong">Półdługie</label><br>
<input type="radio" name="length" id="long"><label for="long">Długie</label><br>
<button onclick="discover()">Odkryj promocję</button>
<p id="result"></p>
</section>
<section id="right2">
<img src="obraz1.jpg" alt="Fryzjerka">
</section>
<section id="left3">
<p>Witaj! Miło nam, że odwiedziłeś nasz salon. Sprawdź promocje!</p>
<h4>Kontakt: 444 555 666</h4>
</section>
<footer>
<p>Autor: Bartosz Bryniarski</p>
</footer>
<script>
function discover() {
let price = 0;
if (document.getElementById("short").checked) {
price = 25 - 10;
}
if (document.getElementById("medium").checked) {
price = 30 - 10;
}
if (document.getElementById("halflong").checked) {
price = 40 - 10;
}
if (document.getElementById("long").checked) {
price = 50 - 10;
}
document.getElementById("result").innerHTML = "cena promocyjna: " + price;
}
</script>
</body>
</html>Krok 35 · po tym etapie masz 37 z 37 kryteriów (pkt)
Na podstawie wybranego przycisku radio wyświetla promocyjną cenę strzyżenia.
Wersja z egzaminu ma dwa słabe punkty, oba sprawdzone na atrapie strony: bez wyboru pokazuje „cena promocyjna: 0”, a ceny są wpisane w skrypt drugi raz (pierwszy raz są w tabeli).
data-price,document.querySelector('input[name="length"]:checked') od razu znajduje zaznaczone pole grupy - zamiast czterech if; gdy nic nie zaznaczono, zwraca null i skrypt prosi o wybór,DISCOUNT - zmiana promocji na 15 zł to jedna liczba,addEventListener zamiast onclick, textContent zamiast innerHTML.Dla każdej długości wynik jest taki sam jak wcześniej. Stary kod zostaje w komentarzu. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
fryzura.html HTML zmienione: 33 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fryzjerstwo</title>
<link rel="stylesheet" href="styl8.css">
</head>
<body>
<section id="left1">
<h1><a href="index.html">SALON FRYZJERSKI</a></h1>
</section>
<section id="right1">
<h4><a href="fryzura.html">Ceny strzyżenia</a></h4>
<table>
<tr>
<th>Długość włosów</th>
<th>Cena</th>
</tr>
<tr>
<td>Krótkie</td>
<td>25</td>
</tr>
<tr>
<td>Średnie</td>
<td>30</td>
</tr>
<tr>
<td>Półdługie</td>
<td>40</td>
</tr>
<tr>
<td>Długie</td>
<td>50</td>
</tr>
</table>
</section>
<section id="left2">
<h2>PROMOCJA!</h2>
<input type="radio" name="length" id="short" data-price="25"><label for="short">Krótkie</label><br>
<input type="radio" name="length" id="medium" data-price="30"><label for="medium">Średnie</label><br>
<input type="radio" name="length" id="halflong" data-price="40"><label for="halflong">Półdługie</label><br>
<input type="radio" name="length" id="long" data-price="50"><label for="long">Długie</label><br>
<button id="discover">Odkryj promocję</button>
<p id="result"></p>
</section>
<section id="right2">
<img src="obraz1.jpg" alt="Fryzjerka">
</section>
<section id="left3">
<p>Witaj! Miło nam, że odwiedziłeś nasz salon. Sprawdź promocje!</p>
<h4>Kontakt: 444 555 666</h4>
</section>
<footer>
<p>Autor: Bartosz Bryniarski</p>
</footer>
<script>
// wersja z egzaminu - cztery osobne if z cenami w skrypcie
// function discover() {
// let price = 0;
// if (document.getElementById("short").checked) {
// price = 25 - 10;
// }
// if (document.getElementById("medium").checked) {
// price = 30 - 10;
// }
// if (document.getElementById("halflong").checked) {
// price = 40 - 10;
// }
// if (document.getElementById("long").checked) {
// price = 50 - 10;
// }
// document.getElementById("result").innerHTML = "cena promocyjna: " + price;
// }
const DISCOUNT = 10;
function discover() {
const selected = document.querySelector('input[name="length"]:checked');
const result = document.getElementById("result");
if (selected === null) {
result.textContent = "Wybierz długość włosów.";
return;
}
result.textContent = "cena promocyjna: " + (Number(selected.dataset.price) - DISCOUNT);
}
document.getElementById("discover").addEventListener("click", discover);
</script>
</body>
</html>Krok 36 · po tym etapie masz 37 z 37 kryteriów (pkt)
Po zakończeniu pracy utwórz w folderze z numerem zdającego plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt wpisujesz nazwę przeglądarki.
W folderze: fryzura.html, import.png, index.html, kw1.jpg - kw4.jpg, kwerendy.txt, obraz1.jpg, obraz2.jpg, przeglądarka.txt, styl8.css. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.
przeglądarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 35.
Symulacja ekranu w przeglądarce - w Android Studio / Visual Studio wygląd może się nieco różnić.
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.