Rozwiązanie buduje witrynę salonu stylizacji paznokci: baza paznokcie (klienci, kształty i wzory) i cztery zapytania - warunek na polu logicznym, wybór dnia z pola daty i godziny, złączenie z warunkiem na nazwę kształtu i ALTER TABLE dodający kolumnę - potem grafika z pięcioma butelkami lakieru wycięta z większego obrazu, strona paznokcie.html z blokiem bocznym, trzema przyciskami i trzema sekcjami (w jednej chwili widać tylko jedną), style w styl.css oraz dwa skrypty JavaScript: przełączanie sekcji po najechaniu kursorem na przycisk (zdarzenie onmouseover) i galeria dziesięciu wzorów generowana pętlą.
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ą. Skrypty są najpierw pisane najprościej, metodami z tabeli 1 arkusza (getElementById, style, document.write, atrybut onmouseover), a na końcu zostają przerobione na wersję z prawdziwych projektów: obsługa zdarzeń w skrypcie (addEventListener) także dla klawiatury, pętla zamiast trzech kopii i obrazy tworzone przez createElement.
Baza i grafiki pochodzą z prawdziwego archiwum pliki15 (załącznik do arkusza, hasło w treści zadania). Zrzuty wyników zapytań są odtworzone z tej bazy - na egzaminie robisz je sam, z całego ekranu. Każda wersja skryptu była uruchomiona w przeglądarce Chrome z symulowanym najechaniem kursorem na każdy przycisk; w podglądzie najedź kursorem na „Kształt” albo „Wzór”, żeby przełączyć sekcję.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, JS)” jest drugi sposób rozwiązania tego samego arkusza: układ na siatce CSS, skrypt w osobnym pliku, zdarzenia przypinane przez addEventListener, stan zakładek w klasach CSS i atrybutach ARIA, a wzory tworzone przez createElement od pierwszej linii - obie wersje są zgodne z kluczem.
Jak liczą się punkty. Klucz ma 39 kryteriów (R.1.1 - R.5.8), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 30 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 39 kryteriów (pkt)
Utwórz bazę danych o nazwie paznokcie, z zestawem polskich znaków (np. utf8_polish_ci)
Rozpakuj pliki15.7z z pulpitu (hasło P@znoKcie? - z małpą zamiast „a” i pytajnikiem na końcu) i załóż folder z numerem zdającego. W archiwum są paznokcie.sql, zdjęcie manicure.jpg, grafiki kolory.png i ksztalt.png oraz dziesięć wzorów 1.jpg - 10.jpg. W phpMyAdmin: Nowa, nazwa paznokcie, porównywanie utf8_polish_ci.
Z rozpakowanego archiwum zaimportuj tabele z pliku paznokcie.sql do utworzonej bazy
Zaznacz bazę paznokcie, potem Import → paznokcie.sql → Wykonaj. Powstają trzy tabele z ilustracji 1: klienci (z kluczami obcymi ksztalty_id i wzory_id, polem topKlient - 1 dla ważnego klienta - i terminem wizyty z datą i godziną), ksztalty i wzory.
Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie PNG pod nazwą import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel
Print Screen, wklejasz do edytora grafiki i zapisujesz jako import.png. Wszystkie zrzuty w tym arkuszu są w formacie PNG.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie imię, kolor i cenę tylko dla ważnych klientów
SELECT imie, kolor, cena - trzy pola,FROM klienci - jedna tabela,WHERE topKlient = 1 - ważny klient to wartość 1 (treść arkusza pod ilustracją 1).Wynik: sześć wierszy - Anna, Monika, Ewelina, Joanna, Małgorzata i Jagna. Zapytanie zapisujesz w kwerendy.txt, zrzut jako kw1.png (cały ekran z paskiem zadań).
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT imie, kolor, cena FROM klienci WHERE topKlient = 1;
Zapytanie 2: wybierające jedynie imię i cenę dla klientów umówionych na dzień 2024-05-23
Pole termin przechowuje datę z godziną (2024-05-23 12:00:00). Funkcja DATE(termin) odcina godzinę i zostawia sam dzień, który porównujesz z '2024-05-23'. Klucz podaje też wariant termin LIKE '2024-05-23%' - procent zastępuje dowolną godzinę; oba dają ten sam wynik: Marta, Agnieszka, Zuza, Roma, Małgorzata, Jagna. Zrzut: kw2.png.
WHERE termin = '2024-05-23' porównuje z północą tego dnia i zwraca 0 wierszy - klucz wprost nazywa ten zapis błędem.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT imie, kolor, cena FROM klienci WHERE topKlient = 1;
-- Zapytanie 2
SELECT imie, cena FROM klienci WHERE DATE(termin) = '2024-05-23';
Zapytanie 3: wybierające jedynie imię i kolor z tabeli klienci oraz odpowiadającą im nazwę kształtu z tabeli ksztalty dla kształtu „migdał”. Należy posłużyć się relacją
SELECT klienci.imie, klienci.kolor, ksztalty.ksztalt - dwa pola klientów i nazwa kształtu,FROM klienci JOIN ksztalty ON klienci.ksztalty_id = ksztalty.id - relacja: kształt wybrany przez klienta,WHERE ksztalty.ksztalt = 'migdał' - warunek na nazwie, nie na numerze kształtu.Wynik: pięć wierszy - Urszula, Anna, Ewa, Monika, Sylwia. Zrzut: kw3.png.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT imie, kolor, cena FROM klienci WHERE topKlient = 1;
-- Zapytanie 2
SELECT imie, cena FROM klienci WHERE DATE(termin) = '2024-05-23';
-- Zapytanie 3
SELECT klienci.imie, klienci.kolor, ksztalty.ksztalt FROM klienci JOIN ksztalty ON klienci.ksztalty_id = ksztalty.id WHERE ksztalty.ksztalt = 'migdał';
Zapytanie 4: modyfikujące strukturę tabeli wzory, poprzez dodanie kolumny o nazwie doplata, dowolnego typu całkowitego
Struktury tabeli nie zmienia UPDATE (ten zmienia dane), tylko ALTER TABLE: ADD COLUMN doplata INT dopisuje kolumnę na końcu tabeli. Słowo COLUMN można pominąć, a zamiast INT może stać inny typ całkowity (TINYINT, SMALLINT). Zapytanie niczego nie wyświetla, więc na zrzucie kw4.png widać komunikat o wykonaniu albo zakładkę Struktura z nową kolumną.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT imie, kolor, cena FROM klienci WHERE topKlient = 1;
-- Zapytanie 2
SELECT imie, cena FROM klienci WHERE DATE(termin) = '2024-05-23';
-- Zapytanie 3
SELECT klienci.imie, klienci.kolor, ksztalty.ksztalt FROM klienci JOIN ksztalty ON klienci.ksztalty_id = ksztalty.id WHERE ksztalty.ksztalt = 'migdał';
-- Zapytanie 4
ALTER TABLE wzory ADD COLUMN doplata INT;
Kroki 8-28 · po tym etapie masz 19 z 39 kryteriów (pkt)
Cechy grafiki kolory.png (ilustracja 3): Grafikę należy skadrować tak, aby były widoczne jedynie butelki lakierów do paznokci. Grafikę należy przyciąć dokładnie do kształtów butelek.
kolory.png ma przezroczyste tło i trzy rzędy kosmetyków: pędzelki, paletki cieni i na dole pięć butelek lakieru. W GIMP-ie zaznaczasz prostokątem dolny rząd z zapasem, Obraz → Przytnij do zaznaczenia, a potem Obraz → Przytnij do zawartości - krawędzie dosuwają się do butelek. Kadr: 566 × 182 px.
Grafikę należy przeskalować z zachowaniem proporcji do wysokości 70 px
Obraz → Skaluj obraz, łańcuch zamknięty, wysokość 70 px - szerokość wychodzi sama: 218 px. Wyeksportuj pod tą samą nazwą do PNG, żeby zostało przezroczyste tło.
Nazwa pliku paznokcie w formacie HTML lub PHP w zależności od implementacji skryptów. Zapisana w języku HTML5
Oba skrypty piszesz w JavaScripcie (arkusz pozwala na skrypt 1 w PHP, ale nie ma potrzeby - nie korzysta z bazy), więc plik ma rozszerzenie .html i otwiera się w przeglądarce bez serwera. Na początek deklaracja <!DOCTYPE html> i szkielet.
paznokcie.html HTML nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Zadeklarowany polski język zawartości witryny
Atrybut lang="pl" w znaczniku <html> - razem z deklaracją HTML5 to jedno kryterium klucza.
paznokcie.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"> jako pierwszy element <head>.
paznokcie.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: „Stylizacja paznokci"
<title> w <head>. Kodowanie i tytuł to razem jedno kryterium.
paznokcie.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
Nazwa pliku: styl.css (nie style.css). Całe formatowanie ma pochodzić z tego pliku.
paznokcie.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>Podział strony na bloki zrealizowany za pomocą semantycznych znaczników bloków języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków na stronie był zgodny z ilustracją 4
Na ilustracji 4 blok boczny zajmuje całą wysokość z lewej, a po prawej jeden pod drugim stoją: nagłówek, menu, trzy nałożone na siebie sekcje i stopka. Wszystko z prawej kolumny wkładasz więc do <main> - klucz uznaje stopkę w bloku głównym (R.2.4). Sekcje dostają identyfikatory section1 - section3: skrypt będzie je pokazywał i chował po numerze.
paznokcie.html HTML zmienione: 16 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
</aside>
<main>
<header>
</header>
<nav>
</nav>
<section id="section1">
</section>
<section id="section2">
</section>
<section id="section3">
</section>
<footer>
</footer>
</main>
</body>
</html>Zawartość bloku bocznego: Obraz manicure.jpg z tekstem alternatywnym „Stylizacja paznokci”
<img> z atrybutem alt. Zdjęcie ma 252 px szerokości - w CSS rozciągniesz je na szerokość bloku.
paznokcie.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
</header>
<nav>
</nav>
<section id="section1">
</section>
<section id="section2">
</section>
<section id="section3">
</section>
<footer>
</footer>
</main>
</body>
</html>Zawartość bloku głównego: blok nagłówkowy, blok nawigacyjny, bloki: sekcja 1, sekcja 2, sekcja 3 (w jednym momencie tylko jedna sekcja jest widoczna). Zawartość bloku nagłówkowego: Nagłówek pierwszego stopnia o treści „Twoje wymarzone paznokcie”
Pierwszego stopnia, czyli <h1>. To, że widać tylko jedną sekcję, zrobisz w CSS i skrypcie 2 - w HTML-u są wszystkie trzy.
paznokcie.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
</nav>
<section id="section1">
</section>
<section id="section2">
</section>
<section id="section3">
</section>
<footer>
</footer>
</main>
</body>
</html>Zawartość bloku nawigacyjnego: Przycisk o treści „Kolor”
Znacznik <button>. Przyciski nie wysyłają tu żadnego formularza - posłużą do przełączania sekcji, dlatego dostają identyfikatory button1 - button3, numerowane tak samo jak sekcje.
paznokcie.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
<button id="button1">Kolor</button>
</nav>
<section id="section1">
</section>
<section id="section2">
</section>
<section id="section3">
</section>
<footer>
</footer>
</main>
</body>
</html>Przycisk o treści „Kształt”
Drugi przycisk, button2.
paznokcie.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
<button id="button1">Kolor</button>
<button id="button2">Kształt</button>
</nav>
<section id="section1">
</section>
<section id="section2">
</section>
<section id="section3">
</section>
<footer>
</footer>
</main>
</body>
</html>Przycisk o treści „Wzór”
Trzeci przycisk, button3. Komplet trzech przycisków w bloku nawigacyjnym (R.2.7).
paznokcie.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
<button id="button1">Kolor</button>
<button id="button2">Kształt</button>
<button id="button3">Wzór</button>
</nav>
<section id="section1">
</section>
<section id="section2">
</section>
<section id="section3">
</section>
<footer>
</footer>
</main>
</body>
</html>Zawartość bloku sekcja 1: Nagłówek drugiego stopnia o treści „Kolor”
<h2> w pierwszej sekcji.
paznokcie.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
<button id="button1">Kolor</button>
<button id="button2">Kształt</button>
<button id="button3">Wzór</button>
</nav>
<section id="section1">
<h2>Kolor</h2>
</section>
<section id="section2">
</section>
<section id="section3">
</section>
<footer>
</footer>
</main>
</body>
</html>Obraz kolory.png z tekstem alternatywnym „Kolory paznokci”
Grafika przygotowana na początku. Z nią są już oba obrazy z kryterium R.2.6: zdjęcie w bloku bocznym i obraz w sekcji.
paznokcie.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
<button id="button1">Kolor</button>
<button id="button2">Kształt</button>
<button id="button3">Wzór</button>
</nav>
<section id="section1">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
</section>
<section id="section2">
</section>
<section id="section3">
</section>
<footer>
</footer>
</main>
</body>
</html>Poniżej pole edycyjne pozwalające wybrać kolor, wartość początkowa pola: #FF0000 (ilustracja 5)
Pole type="color" to w przeglądarce kolorowy prostokąt; kliknięcie otwiera okno wyboru barwy (ilustracja 5). Wartość początkową podajesz w value zapisem szesnastkowym: #FF0000 to czerwony. „Poniżej” obrazu, więc przed polem stawiasz <br> - obraz i pole są elementami liniowymi i bez złamania stanęłyby obok siebie.
paznokcie.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
<button id="button1">Kolor</button>
<button id="button2">Kształt</button>
<button id="button3">Wzór</button>
</nav>
<section id="section1">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<br>
<input type="color" value="#FF0000">
</section>
<section id="section2">
</section>
<section id="section3">
</section>
<footer>
</footer>
</main>
</body>
</html>Zawartość bloku sekcja 2: Nagłówek drugiego stopnia o treści „Kształt”
<h2> w drugiej sekcji.
paznokcie.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
<button id="button1">Kolor</button>
<button id="button2">Kształt</button>
<button id="button3">Wzór</button>
</nav>
<section id="section1">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<br>
<input type="color" value="#FF0000">
</section>
<section id="section2">
<h2>Kształt</h2>
</section>
<section id="section3">
</section>
<footer>
</footer>
</main>
</body>
</html>Obraz ksztalt.png z tekstem alternatywnym „Kształty paznokci”
Grafika z archiwum bez zmian - ma już 70 px wysokości, jak butelki.
paznokcie.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
<button id="button1">Kolor</button>
<button id="button2">Kształt</button>
<button id="button3">Wzór</button>
</nav>
<section id="section1">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<br>
<input type="color" value="#FF0000">
</section>
<section id="section2">
<h2>Kształt</h2>
<img src="ksztalt.png" alt="Kształty paznokci">
</section>
<section id="section3">
</section>
<footer>
</footer>
</main>
</body>
</html>Poniżej pole listy rozwijanej z opcjami: „migdał”, „zaokrąglony”, „kwadratowy”, „balerina”, „zaokrąglony kwadrat”
<select> z pięcioma <option> w kolejności z arkusza (R.2.9). Lista jest wpisana w HTML-u, nie pobierana z bazy - w tabeli ksztalty są tylko cztery kształty, „zaokrąglonego kwadratu” tam nie ma.
paznokcie.html HTML zmienione: 8 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
<button id="button1">Kolor</button>
<button id="button2">Kształt</button>
<button id="button3">Wzór</button>
</nav>
<section id="section1">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<br>
<input type="color" value="#FF0000">
</section>
<section id="section2">
<h2>Kształt</h2>
<img src="ksztalt.png" alt="Kształty paznokci">
<br>
<select>
<option>migdał</option>
<option>zaokrąglony</option>
<option>kwadratowy</option>
<option>balerina</option>
<option>zaokrąglony kwadrat</option>
</select>
</section>
<section id="section3">
</section>
<footer>
</footer>
</main>
</body>
</html>Zawartość bloku sekcja 3: Nagłówek drugiego stopnia o treści „Wzór”. Efekt działania skryptu 1. Poniżej pole edycyjne przeznaczone do wpisywania wartości całkowitych jedynie od 1 do 10
Pole type="number" przyjmuje liczby, a atrybuty min="1" i max="10" ograniczają zakres - strzałkami nie wyjdziesz poza 1 - 10 (R.3.5). Między nagłówkiem a polem zostawiasz miejsce na skrypt 1: tam pojawi się dziesięć wzorów, a <br> przeniesie pole pod nie.
paznokcie.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
<button id="button1">Kolor</button>
<button id="button2">Kształt</button>
<button id="button3">Wzór</button>
</nav>
<section id="section1">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<br>
<input type="color" value="#FF0000">
</section>
<section id="section2">
<h2>Kształt</h2>
<img src="ksztalt.png" alt="Kształty paznokci">
<br>
<select>
<option>migdał</option>
<option>zaokrąglony</option>
<option>kwadratowy</option>
<option>balerina</option>
<option>zaokrąglony kwadrat</option>
</select>
</section>
<section id="section3">
<h2>Wzór</h2>
<br>
<input type="number" min="1" max="10">
</section>
<footer>
</footer>
</main>
</body>
</html>Zawartość bloku stopki: Paragraf o treści „Autor strony: ”, dalej wstawiony numer zdającego. Numer zdającego jest zapisany za pomocą znacznika semantycznego oznaczającego tekst uwypuklony, formatowany domyślnie jako pochylony
Znacznik semantyczny tekstu uwypuklonego to <em> (emphasis) - przeglądarka domyślnie pisze go kursywą (R.2.10). <i> też daje kursywę, ale nie jest znacznikiem semantycznym. Na egzaminie w <em> wpisujesz swój numer zdającego (PESEL) - tutaj stoi imię i nazwisko autora rozwiązania. Z tym krokiem są wszystkie nagłówki z klucza: <h1>, trzy <h2> i akapit w stopce (R.2.5).
paznokcie.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
<button id="button1">Kolor</button>
<button id="button2">Kształt</button>
<button id="button3">Wzór</button>
</nav>
<section id="section1">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<br>
<input type="color" value="#FF0000">
</section>
<section id="section2">
<h2>Kształt</h2>
<img src="ksztalt.png" alt="Kształty paznokci">
<br>
<select>
<option>migdał</option>
<option>zaokrąglony</option>
<option>kwadratowy</option>
<option>balerina</option>
<option>zaokrąglony kwadrat</option>
</select>
</section>
<section id="section3">
<h2>Wzór</h2>
<br>
<input type="number" min="1" max="10">
</section>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
</main>
</body>
</html>Kroki 29-40 · po tym etapie masz 30 z 39 kryteriów (pkt)
Domyślnie, dla wszystkich selektorów: krój czcionki Trebuchet MS, w przypadku braku sans-serif
Selektor *. Nazwę kroju ze spacją bierzesz w cudzysłów, na końcu rodzina zapasowa sans-serif - klucz sprawdza tę kolejność.
styl.css CSS nowy plik * {
font-family: "Trebuchet MS", sans-serif;
}Dla ciała strony: kolor tła BlanchedAlmond, wyrównanie tekstu do środka
Nazwy kolorów CSS (BlanchedAlmond, Salmon, Crimson) można pisać dowolną wielkością liter.
styl.css CSS zmienione: 4 linie * {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
}Dla bloku bocznego: szerokość 20%
Szerokość w procentach liczy się od rodzica, czyli od <body>.
styl.css CSS zmienione: 3 linie * {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
}
aside {
width: 20%;
}Jedynie dla obrazu w bloku bocznym: szerokość 100%
„Jedynie w bloku bocznym” to selektor potomka aside img - butelki i kształty w sekcjach zostają w swoim rozmiarze. Wysokość dopasuje się sama z proporcji zdjęcia.
styl.css CSS zmienione: 3 linie * {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
}
aside {
width: 20%;
}
aside img {
width: 100%;
}Dla bloku głównego: szerokość 80%
20% + 80% to cała szerokość strony.
styl.css CSS zmienione: 3 linie * {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
}
aside {
width: 20%;
}
aside img {
width: 100%;
}
main {
width: 80%;
}Podział strony na bloki zrealizowany za pomocą semantycznych znaczników bloków języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków na stronie był zgodny z ilustracją 4
Na stronie są tylko dwa bloki najwyższego poziomu: <aside> i <main>. display: flex na <body> stawia je obok siebie, a reszta (nagłówek, menu, sekcje, stopka) i tak leży jedna pod drugą wewnątrz <main>. To osobna reguła dla body - można ją też dopisać do poprzedniej (R.3.1).
styl.css CSS zmienione: 3 linie * {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
}
aside {
width: 20%;
}
aside img {
width: 100%;
}
main {
width: 80%;
}
body {
display: flex;
}Dla bloku nawigacyjnego: wyrównanie tekstu do lewej strony, jedynie margines zewnętrzny lewy 10%
text-align: left nadpisuje środkowanie z body - przyciski są elementami liniowymi, więc ustawiają się do lewej. „Jedynie lewy” to margin-left. To zamyka kryterium wyrównań (R.4.5).
styl.css CSS zmienione: 4 linie * {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
}
aside {
width: 20%;
}
aside img {
width: 100%;
}
main {
width: 80%;
}
body {
display: flex;
}
nav {
text-align: left;
margin-left: 10%;
}Dla trzech bloków sekcji: kolor tła Salmon, jedynie margines zewnętrzny lewy 10%, marginesy wewnętrzne 10 px, wysokość 250 px
Selektor section obejmuje wszystkie trzy sekcje. Ten sam lewy margines co w menu - przyciski i sekcja zaczynają się w jednej linii, jak zakładki w segregatorze. Komplet marginesów z klucza (R.4.6).
styl.css CSS zmienione: 6 linii * {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
}
aside {
width: 20%;
}
aside img {
width: 100%;
}
main {
width: 80%;
}
body {
display: flex;
}
nav {
text-align: left;
margin-left: 10%;
}
section {
background-color: Salmon;
margin-left: 10%;
padding: 10px;
height: 250px;
}Dodatkowo blok sekcji 1 jest wyświetlany w sposób blokowy, natomiast bloki sekcji 2 i 3 są usunięte z układu
Tabela 3 arkusza: display: block - element wyświetlany w bloku, display: none - element usunięty. Usunięty element nie zajmuje miejsca, więc stopka podjeżdża pod pierwszą sekcję. Po starcie strony widać zakładkę „Kolor”, jak na ilustracji 2.
visibility: hidden tylko ukrywa element, ale zostawia po nim puste miejsce - klucz wprost uznaje to za błąd.
styl.css CSS zmienione: 6 linii * {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
}
aside {
width: 20%;
}
aside img {
width: 100%;
}
main {
width: 80%;
}
body {
display: flex;
}
nav {
text-align: left;
margin-left: 10%;
}
section {
background-color: Salmon;
margin-left: 10%;
padding: 10px;
height: 250px;
}
#section1 {
display: block;
}
#section2, #section3 {
display: none;
}Dla przycisków: szerokość 26%, biały kolor czcionki, brak obramowania, rozmiar czcionki 200%
border: none usuwa szarą ramkę przycisku z przeglądarki. Biały tekst na razie słabo widać - tła przycisków dodasz w następnym kroku. Z szerokością przycisków masz komplet wysokości i szerokości z klucza (R.4.4).
styl.css CSS zmienione: 6 linii * {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
}
aside {
width: 20%;
}
aside img {
width: 100%;
}
main {
width: 80%;
}
body {
display: flex;
}
nav {
text-align: left;
margin-left: 10%;
}
section {
background-color: Salmon;
margin-left: 10%;
padding: 10px;
height: 250px;
}
#section1 {
display: block;
}
#section2, #section3 {
display: none;
}
button {
width: 26%;
color: white;
border: none;
font-size: 200%;
}Dodatkowo dla pierwszego przycisku kolor tła Salmon, dla pozostałych – Crimson
Pierwszy przycisk ma kolor sekcji - wygląda jak otwarta zakładka, a pozostałe są ciemniejsze. Kolory tła z klucza są kompletne (R.4.2).
styl.css CSS zmienione: 6 linii * {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
}
aside {
width: 20%;
}
aside img {
width: 100%;
}
main {
width: 80%;
}
body {
display: flex;
}
nav {
text-align: left;
margin-left: 10%;
}
section {
background-color: Salmon;
margin-left: 10%;
padding: 10px;
height: 250px;
}
#section1 {
display: block;
}
#section2, #section3 {
display: none;
}
button {
width: 26%;
color: white;
border: none;
font-size: 200%;
}
#button1 {
background-color: Salmon;
}
#button2, #button3 {
background-color: Crimson;
}Dla klasy wzory: szerokość 70 px, marginesy zewnętrzne 5 px, zaokrąglenie rogów 100%
Wzory są kwadratowe (100 × 100 px), a border-radius: 100% (wystarczy też 50%) zaokrągla rogi tak mocno, że z kwadratu robi się koło - jak na ilustracji 6. Obrazów z tą klasą jeszcze nie ma; wygeneruje je skrypt 1 (R.4.10).
styl.css CSS zmienione: 5 linii * {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
}
aside {
width: 20%;
}
aside img {
width: 100%;
}
main {
width: 80%;
}
body {
display: flex;
}
nav {
text-align: left;
margin-left: 10%;
}
section {
background-color: Salmon;
margin-left: 10%;
padding: 10px;
height: 250px;
}
#section1 {
display: block;
}
#section2, #section3 {
display: none;
}
button {
width: 26%;
color: white;
border: none;
font-size: 200%;
}
#button1 {
background-color: Salmon;
}
#button2, #button3 {
background-color: Crimson;
}
.wzory {
width: 70px;
margin: 5px;
border-radius: 100%;
}Kroki 41-45 · po tym etapie masz 39 z 39 kryteriów (pkt)
Zdarzenie najechania kursorem myszy na dowolny przycisk uruchamia skrypt 2. Skrypt 2: Wykonywany po stronie klienta, po najechaniu kursorem na przycisk
Zacznij od skryptu 2, bo bez niego sekcja 3 jest stale ukryta (display: none) i nie byłoby widać wyniku skryptu 1. Najechanie kursorem to zdarzenie onmouseover (tabela 1 arkusza). Każdy przycisk wywołuje tę samą funkcję showSection ze swoim numerem - jedna funkcja zamiast trzech. Funkcję piszesz w <script> na końcu <body>; na razie jest pusta.
paznokcie.html HTML zmienione: 7 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
<button id="button1" onmouseover="showSection(1)">Kolor</button>
<button id="button2" onmouseover="showSection(2)">Kształt</button>
<button id="button3" onmouseover="showSection(3)">Wzór</button>
</nav>
<section id="section1">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<br>
<input type="color" value="#FF0000">
</section>
<section id="section2">
<h2>Kształt</h2>
<img src="ksztalt.png" alt="Kształty paznokci">
<br>
<select>
<option>migdał</option>
<option>zaokrąglony</option>
<option>kwadratowy</option>
<option>balerina</option>
<option>zaokrąglony kwadrat</option>
</select>
</section>
<section id="section3">
<h2>Wzór</h2>
<br>
<input type="number" min="1" max="10">
</section>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
</main>
<script>
function showSection(number) {
}
</script>
</body>
</html>Działanie w przypadku zdarzenia, gdy kursor najedzie na przycisk „Kolor” (ilustracja 2): Pierwszy blok sekcji jest wyświetlany w postaci blokowej. Pozostałe bloki są usunięte
Najprościej: najpierw usuwasz wszystkie trzy sekcje (style.display = "none"), potem pokazujesz jedną. getElementById szuka elementu po identyfikatorze, a identyfikator składasz z tekstu i liczby: "section" + number daje "section2" dla przycisku „Kształt”. Tak samo działa dla „Kolor” i „Wzór” - nie trzeba osobnego if na każdy przycisk. Najedź w podglądzie na „Kształt”: widać drugą sekcję, ale przycisk „Kolor” jest nadal jasny.
paznokcie.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
<button id="button1" onmouseover="showSection(1)">Kolor</button>
<button id="button2" onmouseover="showSection(2)">Kształt</button>
<button id="button3" onmouseover="showSection(3)">Wzór</button>
</nav>
<section id="section1">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<br>
<input type="color" value="#FF0000">
</section>
<section id="section2">
<h2>Kształt</h2>
<img src="ksztalt.png" alt="Kształty paznokci">
<br>
<select>
<option>migdał</option>
<option>zaokrąglony</option>
<option>kwadratowy</option>
<option>balerina</option>
<option>zaokrąglony kwadrat</option>
</select>
</section>
<section id="section3">
<h2>Wzór</h2>
<br>
<input type="number" min="1" max="10">
</section>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
</main>
<script>
function showSection(number) {
document.getElementById("section1").style.display = "none";
document.getElementById("section2").style.display = "none";
document.getElementById("section3").style.display = "none";
document.getElementById("section" + number).style.display = "block";
}
</script>
</body>
</html>Pierwszy przycisk ma kolor tła Salmon. Pozostałe przyciski mają kolor tła Crimson. Działanie w przypadku zdarzenia, gdy kursor najedzie na przycisk „Kształt” (ilustracja 7): Drugi blok sekcji jest wyświetlany w postaci blokowej. Pozostałe bloki są usunięte. Drugi przycisk ma kolor tła Salmon. Pozostałe przyciski mają kolor tła Crimson. Działanie w przypadku zdarzenia, gdy kursor najedzie na przycisk „Wzór” (ilustracja 6): Trzeci blok sekcji jest wyświetlany w postaci blokowej. Pozostałe bloki są usunięte. Trzeci przycisk ma kolor tła Salmon. Pozostałe przyciski mają kolor tła Crimson
Ten sam wzór dla przycisków: wszystkie trzy dostają Crimson, a wskazany - Salmon. W JavaScripcie właściwość CSS background-color nazywa się backgroundColor (bez myślnika, druga część wielką literą - tabela 1 arkusza). Sprawdzone w Chrome dla każdego przycisku: „Kolor” pokazuje sekcję 1 i jest jasny, „Kształt” - sekcję 2, „Wzór” - sekcję 3, pozostałe przyciski są ciemne (R.5.5 - R.5.7).
paznokcie.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
<button id="button1" onmouseover="showSection(1)">Kolor</button>
<button id="button2" onmouseover="showSection(2)">Kształt</button>
<button id="button3" onmouseover="showSection(3)">Wzór</button>
</nav>
<section id="section1">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<br>
<input type="color" value="#FF0000">
</section>
<section id="section2">
<h2>Kształt</h2>
<img src="ksztalt.png" alt="Kształty paznokci">
<br>
<select>
<option>migdał</option>
<option>zaokrąglony</option>
<option>kwadratowy</option>
<option>balerina</option>
<option>zaokrąglony kwadrat</option>
</select>
</section>
<section id="section3">
<h2>Wzór</h2>
<br>
<input type="number" min="1" max="10">
</section>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
</main>
<script>
function showSection(number) {
document.getElementById("section1").style.display = "none";
document.getElementById("section2").style.display = "none";
document.getElementById("section3").style.display = "none";
document.getElementById("section" + number).style.display = "block";
document.getElementById("button1").style.backgroundColor = "Crimson";
document.getElementById("button2").style.backgroundColor = "Crimson";
document.getElementById("button3").style.backgroundColor = "Crimson";
document.getElementById("button" + number).style.backgroundColor = "Salmon";
}
</script>
</body>
</html>Skrypt 1: Zapisany w języku JavaScript lub PHP (w przypadku PHP plik musi nazywać się paznokcie.php). Wyświetla za pomocą pętli 10 obrazów o nazwach, kolejno: 1.jpg, 2.jpg, 3.jpg ... 10.jpg
Skrypt 1 stoi dokładnie tam, gdzie mają się pojawić obrazy - w sekcji 3, między nagłówkiem a polem liczbowym. document.write (tabela 1 arkusza) wpisuje tekst w miejscu, w którym przeglądarka właśnie czyta stronę. Pętla for liczy od 1 do 10, a nazwę pliku sklejasz z liczby i tekstu: i + ".jpg". Najedź na „Wzór”: dziesięć dużych kwadratów, jeszcze bez stylu klasy.
paznokcie.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
<button id="button1" onmouseover="showSection(1)">Kolor</button>
<button id="button2" onmouseover="showSection(2)">Kształt</button>
<button id="button3" onmouseover="showSection(3)">Wzór</button>
</nav>
<section id="section1">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<br>
<input type="color" value="#FF0000">
</section>
<section id="section2">
<h2>Kształt</h2>
<img src="ksztalt.png" alt="Kształty paznokci">
<br>
<select>
<option>migdał</option>
<option>zaokrąglony</option>
<option>kwadratowy</option>
<option>balerina</option>
<option>zaokrąglony kwadrat</option>
</select>
</section>
<section id="section3">
<h2>Wzór</h2>
<script>
for (let i = 1; i <= 10; i++) {
document.write('<img src="' + i + '.jpg">');
}
</script>
<br>
<input type="number" min="1" max="10">
</section>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
</main>
<script>
function showSection(number) {
document.getElementById("section1").style.display = "none";
document.getElementById("section2").style.display = "none";
document.getElementById("section3").style.display = "none";
document.getElementById("section" + number).style.display = "block";
document.getElementById("button1").style.backgroundColor = "Crimson";
document.getElementById("button2").style.backgroundColor = "Crimson";
document.getElementById("button3").style.backgroundColor = "Crimson";
document.getElementById("button" + number).style.backgroundColor = "Salmon";
}
</script>
</body>
</html>Każdy obraz ma przypisaną klasę wzory. Po najechaniu kursorem na obraz jest wyświetlany dymek z nazwą (numerem) obrazu (na ilustracji 6 wskazano obraz3.jpg, więc dymek zawiera liczbę 3)
Klasa w atrybucie class="wzory" - teraz działa reguła .wzory z CSS i obrazy robią się okrągłe. Dymek po najechaniu kursorem to atrybut title: przeglądarka pokazuje jego treść po chwili bezruchu kursora. W title wpisujesz samą liczbę i (R.5.3). Napis HTML jest w apostrofach, więc cudzysłowy atrybutów mieszczą się w nim bez ukośników. W skryptach są funkcja showSection i zmienne number oraz i - nazwy mówią, do czego służą (R.5.8).
paznokcie.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
<button id="button1" onmouseover="showSection(1)">Kolor</button>
<button id="button2" onmouseover="showSection(2)">Kształt</button>
<button id="button3" onmouseover="showSection(3)">Wzór</button>
</nav>
<section id="section1">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<br>
<input type="color" value="#FF0000">
</section>
<section id="section2">
<h2>Kształt</h2>
<img src="ksztalt.png" alt="Kształty paznokci">
<br>
<select>
<option>migdał</option>
<option>zaokrąglony</option>
<option>kwadratowy</option>
<option>balerina</option>
<option>zaokrąglony kwadrat</option>
</select>
</section>
<section id="section3">
<h2>Wzór</h2>
<script>
for (let i = 1; i <= 10; i++) {
document.write('<img src="' + i + '.jpg" class="wzory" title="' + i + '">');
}
</script>
<br>
<input type="number" min="1" max="10">
</section>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
</main>
<script>
function showSection(number) {
document.getElementById("section1").style.display = "none";
document.getElementById("section2").style.display = "none";
document.getElementById("section3").style.display = "none";
document.getElementById("section" + number).style.display = "block";
document.getElementById("button1").style.backgroundColor = "Crimson";
document.getElementById("button2").style.backgroundColor = "Crimson";
document.getElementById("button3").style.backgroundColor = "Crimson";
document.getElementById("button" + number).style.backgroundColor = "Salmon";
}
</script>
</body>
</html>Kroki 46-47 · po tym etapie masz 39 z 39 kryteriów (pkt)
Zdarzenie najechania kursorem myszy na dowolny przycisk uruchamia skrypt 2
Trzy zmiany naraz, bo dotyczą tych samych linii. addEventListener przypina obsługę zdarzenia w skrypcie, więc HTML przycisków zostaje czysty (bez onmouseover). querySelectorAll zbiera przyciski i sekcje do list, a jedna pętla ustawia każdemu elementowi stan „wybrany” albo „ukryty” - sześć linii getElementById zamieniło się w dwie, a czwarta zakładka nie wymagałaby zmian w skrypcie. Do tego zdarzenie focus: osoba bez myszy przechodzi po przyciskach klawiszem Tab i sekcje też się przełączają (sprawdzone w Chrome). Klucz uznaje addEventListener i focus za równoważne. Stara wersja jest opisana w komentarzu. Na egzaminie wystarczy wersja wcześniejsza.
paznokcie.html HTML zmienione: 17 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
<button id="button1">Kolor</button>
<button id="button2">Kształt</button>
<button id="button3">Wzór</button>
</nav>
<section id="section1">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<br>
<input type="color" value="#FF0000">
</section>
<section id="section2">
<h2>Kształt</h2>
<img src="ksztalt.png" alt="Kształty paznokci">
<br>
<select>
<option>migdał</option>
<option>zaokrąglony</option>
<option>kwadratowy</option>
<option>balerina</option>
<option>zaokrąglony kwadrat</option>
</select>
</section>
<section id="section3">
<h2>Wzór</h2>
<script>
for (let i = 1; i <= 10; i++) {
document.write('<img src="' + i + '.jpg" class="wzory" title="' + i + '">');
}
</script>
<br>
<input type="number" min="1" max="10">
</section>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
</main>
<script>
const buttons = document.querySelectorAll("nav button");
const sections = document.querySelectorAll("main section");
function showSection(number) {
for (let i = 0; i < sections.length; i++) {
sections[i].style.display = (i + 1 == number) ? "block" : "none";
buttons[i].style.backgroundColor = (i + 1 == number) ? "Salmon" : "Crimson";
}
}
buttons.forEach(function (button, index) {
button.addEventListener("mouseover", function () { showSection(index + 1); });
button.addEventListener("focus", function () { showSection(index + 1); });
});
/* Wersja z egzaminu: atrybut onmouseover w każdym przycisku
i po trzy linie getElementById dla sekcji oraz dla przycisków. */
</script>
</body>
</html>Wyświetla za pomocą pętli 10 obrazów o nazwach, kolejno: 1.jpg, 2.jpg, 3.jpg ... 10.jpg
document.write działa tylko w trakcie wczytywania strony - wywołane później (np. po kliknięciu) skasowałoby całą stronę, dlatego w nowym kodzie się go nie używa. Zamiast tego createElement("img") tworzy obraz jako obiekt, ustawiasz mu właściwości (src, alt, className, title) i appendChild dokłada go do pustego <div> w sekcji. Przy okazji obrazy dostają tekst alternatywny. Wygląd strony się nie zmienia. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
paznokcie.html HTML zmienione: 9 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stylizacja paznokci</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
<button id="button1">Kolor</button>
<button id="button2">Kształt</button>
<button id="button3">Wzór</button>
</nav>
<section id="section1">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<br>
<input type="color" value="#FF0000">
</section>
<section id="section2">
<h2>Kształt</h2>
<img src="ksztalt.png" alt="Kształty paznokci">
<br>
<select>
<option>migdał</option>
<option>zaokrąglony</option>
<option>kwadratowy</option>
<option>balerina</option>
<option>zaokrąglony kwadrat</option>
</select>
</section>
<section id="section3">
<h2>Wzór</h2>
<div id="patterns"></div>
<script>
const patterns = document.getElementById("patterns");
for (let i = 1; i <= 10; i++) {
const image = document.createElement("img");
image.src = i + ".jpg";
image.alt = "wzór " + i;
image.className = "wzory";
image.title = i;
patterns.appendChild(image);
}
// wersja z egzaminu: document.write('<img src="' + i + '.jpg" class="wzory" title="' + i + '">');
</script>
<br>
<input type="number" min="1" max="10">
</section>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
</main>
<script>
const buttons = document.querySelectorAll("nav button");
const sections = document.querySelectorAll("main section");
function showSection(number) {
for (let i = 0; i < sections.length; i++) {
sections[i].style.display = (i + 1 == number) ? "block" : "none";
buttons[i].style.backgroundColor = (i + 1 == number) ? "Salmon" : "Crimson";
}
}
buttons.forEach(function (button, index) {
button.addEventListener("mouseover", function () { showSection(index + 1); });
button.addEventListener("focus", function () { showSection(index + 1); });
});
/* Wersja z egzaminu: atrybut onmouseover w każdym przycisku
i po trzy linie getElementById dla sekcji oraz dla przycisków. */
</script>
</body>
</html>Krok 48 · po tym etapie masz 39 z 39 kryteriów (pkt)
UWAGA: po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Umieść go w folderze z numerem zdającego. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz stronę.
W folderze z numerem zdającego: 1.jpg - 10.jpg, import.png, kolory.png, ksztalt.png, kw1.png - kw4.png, kwerendy.txt, manicure.jpg, paznokcie.html, przeglądarka.txt, styl.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 47.
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.