To drugi sposób rozwiązania tego samego arkusza: salon stylizacji paznokci z bazą paznokcie, grafiką pięciu butelek lakieru i stroną paznokcie.html z trzema zakładkami przełączanymi po najechaniu kursorem oraz galerią dziesięciu wzorów. Obie wersje spełniają wszystkie 39 kryteriów klucza - różni je sposób pisania kodu, nie wynik.
Czym ta wersja różni się od podstawowej:
flex: grid-template-columns: 20% 80% na <body>, a kolory zakładek w zmiennych CSS,active: o kolorach i widoczności decyduje arkusz stylów, a skrypt tylko przenosi klasę - nie wpisuje stylów w style="",aria-controls zamiast numeru doklejanego do identyfikatora,skrypt.js z atrybutem defer, zdarzenia przez addEventListener (mouseenter i focus - działa też klawisz Tab),createElement z tekstem alternatywnym, pola formularza z opisem aria-label,Kroki nadal idą zdanie po zdaniu za treścią arkusza. Każda wersja skryptu była uruchomiona w przeglądarce Chrome z symulowanym najechaniem kursorem i przejściem klawiszem Tab po każdym przycisku; w podglądzie najedź kursorem na „Kształt” albo „Wzór”. Baza i grafiki pochodzą z prawdziwego archiwum pliki15 (załącznik do arkusza, hasło w treści zadania).
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. 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)
Archiwum pliki15.7z ma hasło P@znoKcie? (małpa zamiast „a”, pytajnik na końcu); w środku paznokcie.sql, manicure.jpg, kolory.png, ksztalt.png i wzory 1.jpg - 10.jpg. W phpMyAdmin: Nowa, nazwa paznokcie, porównywanie utf8_polish_ci, albo w zakładce SQL:
CREATE DATABASE paznokcie CHARACTER SET utf8 COLLATE 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 (klucze obce ksztalty_id i wzory_id, pole topKlient - 1 dla ważnego klienta, termin 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 (cały ekran z paskiem zadań), wklej do edytora grafiki i zapisz 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,WHERE topKlient = 1 - ważny klient to wartość 1 (opis pod ilustracją 1).Wynik: sześć wierszy - Anna, Monika, Ewelina, Joanna, Małgorzata, Jagna. Każda klauzula w osobnej linii - SQL nie zwraca uwagi na znaki nowej linii. Zapisz w kwerendy.txt, zrzut jako kw1.png.
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). Cały dzień 23 maja to przedział: od północy 23 maja włącznie (>= '2024-05-23') do północy 24 maja wyłącznie (< '2024-05-24').
Wersja podstawowa pisze DATE(termin) = '2024-05-23', a klucz podaje termin LIKE '2024-05-23%' - wszystkie trzy dają ten sam wynik: Marta, Agnieszka, Zuza, Roma, Małgorzata, Jagna. Przedział ma jedną przewagę: porównuje samą kolumnę, bez funkcji na niej, więc baza może użyć indeksu na termin. Przy dziesiątkach wierszy to bez znaczenia, przy milionach rezerwacji - duże. 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. <= '2024-05-24' zamiast < dołączyłby wizytę o północy 24 maja.
kwerendy.txt Tekst zmienione: 5 linii -- Zapytanie 1
SELECT imie, kolor, cena
FROM klienci
WHERE topKlient = 1;
-- Zapytanie 2
SELECT imie, cena
FROM klienci
WHERE termin >= '2024-05-23' AND termin < '2024-05-24';
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ą
FROM klienci AS k JOIN ksztalty AS s - aliasy tabel (s od „shape”, bo k zajęli klienci),ON s.id = k.ksztalty_id - relacja: kształt wybrany przez klienta,WHERE s.ksztalt = 'migdał' - warunek na nazwie kształtu, jak w poleceniu,SELECT k.imie, k.kolor, s.ksztalt - każde pole z prefiksem swojej tabeli.Wynik: pięć wierszy - Urszula, Anna, Ewa, Monika, Sylwia. Zrzut: kw3.png.
kwerendy.txt Tekst zmienione: 6 linii -- Zapytanie 1
SELECT imie, kolor, cena
FROM klienci
WHERE topKlient = 1;
-- Zapytanie 2
SELECT imie, cena
FROM klienci
WHERE termin >= '2024-05-23' AND termin < '2024-05-24';
-- Zapytanie 3
SELECT k.imie, k.kolor, s.ksztalt
FROM klienci AS k
JOIN ksztalty AS s ON s.id = k.ksztalty_id
WHERE s.ksztalt = 'migdał';
Zapytanie 4: modyfikujące strukturę tabeli wzory, poprzez dodanie kolumny o nazwie doplata, dowolnego typu całkowitego
Strukturę tabeli zmienia ALTER TABLE (a nie UPDATE, który zmienia dane): ADD COLUMN doplata INT dopisuje kolumnę typu całkowitego (R.1.6). Dopisek NOT NULL DEFAULT 0 ustala od razu wartość dla istniejących wzorów: dopłata 0 zamiast NULL. Dopłata to kwota - cena + doplata z NULL daje NULL, a z zerem zwykłą cenę.
Zapytanie niczego nie wyświetla - na zrzucie kw4.png komunikat o wykonaniu albo zakładka Struktura z nową kolumną.
kwerendy.txt Tekst zmienione: 4 linie -- Zapytanie 1
SELECT imie, kolor, cena
FROM klienci
WHERE topKlient = 1;
-- Zapytanie 2
SELECT imie, cena
FROM klienci
WHERE termin >= '2024-05-23' AND termin < '2024-05-24';
-- Zapytanie 3
SELECT k.imie, k.kolor, s.ksztalt
FROM klienci AS k
JOIN ksztalty AS s ON s.id = k.ksztalty_id
WHERE s.ksztalt = 'migdał';
-- Zapytanie 4
ALTER TABLE wzory
ADD COLUMN doplata INT NOT NULL DEFAULT 0;
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.
Grafika jest taka sama w obu wersjach. kolory.png ma przezroczyste tło i trzy rzędy kosmetyków - butelki lakieru są w dolnym. W GIMP-ie zaznacz dolny rząd prostokątem z zapasem, Obraz → Przytnij do zaznaczenia, potem Obraz → Przytnij do zawartości - krawędzie dosuną 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. Eksport do PNG, żeby zostało przezroczyste tło (R.2.1).
Nazwa pliku paznokcie w formacie HTML lub PHP w zależności od implementacji skryptów. Zapisana w języku HTML5
Oba skrypty będą w JavaScripcie, więc plik ma rozszerzenie .html i działa bez serwera. Na początek <!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" - razem z deklaracją HTML5 to jedno kryterium.
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
Plik styl.css. Całe formatowanie pochodzi z tego pliku - także zmiany po najechaniu kursorem: skrypt nie będzie wpisywał stylów do HTML-u.
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
Po lewej <aside>, po prawej <main> z nagłówkiem, menu, trzema sekcjami i stopką - klucz uznaje stopkę w bloku głównym (R.2.4). Sekcje dostają identyfikatory mówiące, co zawierają: color, shape, pattern (zamiast section1 - section3).
Pierwsza sekcja ma od razu klasę active - to stan „ta zakładka jest otwarta”. W CSS klasa zdecyduje o widoczności, a skrypt będzie ją tylko przenosił między sekcjami.
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="color" class="active">
</section>
<section id="shape">
</section>
<section id="pattern">
</section>
<footer>
</footer>
</main>
</body>
</html>Zawartość bloku bocznego: Obraz manicure.jpg z tekstem alternatywnym „Stylizacja paznokci”
<img> z atrybutem alt, bez ukośnika na końcu (HTML5).
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="color" class="active">
</section>
<section id="shape">
</section>
<section id="pattern">
</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”
<h1> w bloku nagłówkowym.
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="color" class="active">
</section>
<section id="shape">
</section>
<section id="pattern">
</section>
<footer>
</footer>
</main>
</body>
</html>Zawartość bloku nawigacyjnego: Przycisk o treści „Kolor”
<button> z trzema atrybutami:
type="button" - zwykły przycisk; bez tego przycisk w formularzu wysyła formularz (domyślny typ to submit),aria-controls="color" - identyfikator sekcji, którą przycisk pokazuje. Czytnik ekranu wie, czym przycisk steruje, a skrypt odczyta z tego atrybutu, którą sekcję otworzyć - bez numerów doklejanych do identyfikatorów,class="active" - tak jak pierwsza sekcja: ta zakładka jest otwarta na starcie.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 type="button" class="active" aria-controls="color">Kolor</button>
</nav>
<section id="color" class="active">
</section>
<section id="shape">
</section>
<section id="pattern">
</section>
<footer>
</footer>
</main>
</body>
</html>Przycisk o treści „Kształt”
Drugi przycisk wskazuje sekcję shape, bez klasy active.
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 type="button" class="active" aria-controls="color">Kolor</button>
<button type="button" aria-controls="shape">Kształt</button>
</nav>
<section id="color" class="active">
</section>
<section id="shape">
</section>
<section id="pattern">
</section>
<footer>
</footer>
</main>
</body>
</html>Przycisk o treści „Wzór”
Trzeci przycisk, sekcja pattern. 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 type="button" class="active" aria-controls="color">Kolor</button>
<button type="button" aria-controls="shape">Kształt</button>
<button type="button" aria-controls="pattern">Wzór</button>
</nav>
<section id="color" class="active">
</section>
<section id="shape">
</section>
<section id="pattern">
</section>
<footer>
</footer>
</main>
</body>
</html>Zawartość bloku sekcja 1: Nagłówek drugiego stopnia o treści „Kolor”
<h2> w sekcji color.
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 type="button" class="active" aria-controls="color">Kolor</button>
<button type="button" aria-controls="shape">Kształt</button>
<button type="button" aria-controls="pattern">Wzór</button>
</nav>
<section id="color" class="active">
<h2>Kolor</h2>
</section>
<section id="shape">
</section>
<section id="pattern">
</section>
<footer>
</footer>
</main>
</body>
</html>Obraz kolory.png z tekstem alternatywnym „Kolory paznokci”
Grafika przygotowana na początku. Są już oba obrazy z kryterium R.2.6.
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 type="button" class="active" aria-controls="color">Kolor</button>
<button type="button" aria-controls="shape">Kształt</button>
<button type="button" aria-controls="pattern">Wzór</button>
</nav>
<section id="color" class="active">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
</section>
<section id="shape">
</section>
<section id="pattern">
</section>
<footer>
</footer>
</main>
</body>
</html>Poniżej pole edycyjne pozwalające wybrać kolor, wartość początkowa pola: #FF0000 (ilustracja 5)
Pole type="color" z wartością początkową value="#FF0000" (czerwony; R.2.8, R.3.4). „Poniżej” obrazu: pole stoi w <div> - element blokowy zawsze zaczyna nowy wiersz, więc nie potrzeba <br>, który tylko łamie linię i nic nie znaczy.
Pole nie ma widocznej etykiety (arkusz jej nie przewiduje), więc dostaje aria-label="Kolor lakieru" - czytnik ekranu przeczyta ten opis zamiast samego „pole koloru”.
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 type="button" class="active" aria-controls="color">Kolor</button>
<button type="button" aria-controls="shape">Kształt</button>
<button type="button" aria-controls="pattern">Wzór</button>
</nav>
<section id="color" class="active">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<div>
<input type="color" value="#FF0000" aria-label="Kolor lakieru">
</div>
</section>
<section id="shape">
</section>
<section id="pattern">
</section>
<footer>
</footer>
</main>
</body>
</html>Zawartość bloku sekcja 2: Nagłówek drugiego stopnia o treści „Kształt”
<h2> w sekcji shape.
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 type="button" class="active" aria-controls="color">Kolor</button>
<button type="button" aria-controls="shape">Kształt</button>
<button type="button" aria-controls="pattern">Wzór</button>
</nav>
<section id="color" class="active">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<div>
<input type="color" value="#FF0000" aria-label="Kolor lakieru">
</div>
</section>
<section id="shape">
<h2>Kształt</h2>
</section>
<section id="pattern">
</section>
<footer>
</footer>
</main>
</body>
</html>Obraz ksztalt.png z tekstem alternatywnym „Kształty paznokci”
Grafika z archiwum bez zmian - ma 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 type="button" class="active" aria-controls="color">Kolor</button>
<button type="button" aria-controls="shape">Kształt</button>
<button type="button" aria-controls="pattern">Wzór</button>
</nav>
<section id="color" class="active">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<div>
<input type="color" value="#FF0000" aria-label="Kolor lakieru">
</div>
</section>
<section id="shape">
<h2>Kształt</h2>
<img src="ksztalt.png" alt="Kształty paznokci">
</section>
<section id="pattern">
</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), w <div> pod obrazem i z opisem aria-label. Opcje bez atrybutu value wysłałyby swój tekst - na tej stronie nic ich nie wysyła. Lista jest wpisana w HTML-u: w tabeli ksztalty nie ma „zaokrąglonego kwadratu”.
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 type="button" class="active" aria-controls="color">Kolor</button>
<button type="button" aria-controls="shape">Kształt</button>
<button type="button" aria-controls="pattern">Wzór</button>
</nav>
<section id="color" class="active">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<div>
<input type="color" value="#FF0000" aria-label="Kolor lakieru">
</div>
</section>
<section id="shape">
<h2>Kształt</h2>
<img src="ksztalt.png" alt="Kształty paznokci">
<div>
<select aria-label="Kształt paznokci">
<option>migdał</option>
<option>zaokrąglony</option>
<option>kwadratowy</option>
<option>balerina</option>
<option>zaokrąglony kwadrat</option>
</select>
</div>
</section>
<section id="pattern">
</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
Pod nagłówkiem pusty <div id="patterns"> - tam skrypt 1 wstawi dziesięć wzorów. Pod nim pole type="number" z min="1" i max="10" (R.3.5); krok domyślny to 1, więc pole przyjmuje liczby całkowite. Opis aria-label="Numer wzoru" mówi, co wpisać.
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 type="button" class="active" aria-controls="color">Kolor</button>
<button type="button" aria-controls="shape">Kształt</button>
<button type="button" aria-controls="pattern">Wzór</button>
</nav>
<section id="color" class="active">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<div>
<input type="color" value="#FF0000" aria-label="Kolor lakieru">
</div>
</section>
<section id="shape">
<h2>Kształt</h2>
<img src="ksztalt.png" alt="Kształty paznokci">
<div>
<select aria-label="Kształt paznokci">
<option>migdał</option>
<option>zaokrąglony</option>
<option>kwadratowy</option>
<option>balerina</option>
<option>zaokrąglony kwadrat</option>
</select>
</div>
</section>
<section id="pattern">
<h2>Wzór</h2>
<div id="patterns"></div>
<div>
<input type="number" min="1" max="10" aria-label="Numer wzoru">
</div>
</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
Tekst uwypuklony to <em> - przeglądarka pisze go kursywą (R.2.10); <i> też pochyla, ale nie niesie znaczenia. Na egzaminie w <em> wpisujesz swój numer zdającego (PESEL) - tu stoi imię i nazwisko autora rozwiązania. Komplet nagłówków i akapitów z klucza (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 type="button" class="active" aria-controls="color">Kolor</button>
<button type="button" aria-controls="shape">Kształt</button>
<button type="button" aria-controls="pattern">Wzór</button>
</nav>
<section id="color" class="active">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<div>
<input type="color" value="#FF0000" aria-label="Kolor lakieru">
</div>
</section>
<section id="shape">
<h2>Kształt</h2>
<img src="ksztalt.png" alt="Kształty paznokci">
<div>
<select aria-label="Kształt paznokci">
<option>migdał</option>
<option>zaokrąglony</option>
<option>kwadratowy</option>
<option>balerina</option>
<option>zaokrąglony kwadrat</option>
</select>
</div>
</section>
<section id="pattern">
<h2>Wzór</h2>
<div id="patterns"></div>
<div>
<input type="number" min="1" max="10" aria-label="Numer wzoru">
</div>
</section>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
</main>
</body>
</html>Kroki 29-38 · 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
Kolory arkusza dostają zmienne CSS nazwane według roli: --active-tab (Salmon) - otwarta zakładka i jej sekcja, --inactive-tab (Crimson) - pozostałe przyciski. Z nazwy widać, dlaczego przycisk i sekcja mają ten sam kolor: otwarty przycisk „zlewa się” ze swoją sekcją.
Reguła *: krój ze spacją w cudzysłowie i rodzina zapasowa sans-serif na końcu (R.4.1).
styl.css CSS nowy plik :root {
--active-tab: Salmon;
--inactive-tab: Crimson;
}
* {
font-family: "Trebuchet MS", sans-serif;
}Dla ciała strony: kolor tła BlanchedAlmond, wyrównanie tekstu do środka
Nazwy kolorów CSS można pisać dowolną wielkością liter.
styl.css CSS zmienione: 5 linii :root {
--active-tab: Salmon;
--inactive-tab: Crimson;
}
* {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
}Dla bloku bocznego: szerokość 20%. Dla bloku głównego: szerokość 80%
<body> staje się siatką o kolumnach 20% 80%: <aside> trafia do pierwszej, <main> do drugiej - stoją obok siebie, a szerokości wynikają z kolumn (klucz dopuszcza grid-template-columns). Nagłówek, menu, sekcje i stopka i tak leżą jedna pod drugą wewnątrz <main> - układ z ilustracji 4 (R.3.1).
styl.css CSS zmienione: 2 linie :root {
--active-tab: Salmon;
--inactive-tab: Crimson;
}
* {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
display: grid;
grid-template-columns: 20% 80%;
}Jedynie dla obrazu w bloku bocznym: szerokość 100%
„Jedynie w bloku bocznym” to selektor potomka aside img - obrazy w sekcjach zostają w swoim rozmiarze (R.4.8).
styl.css CSS zmienione: 4 linie :root {
--active-tab: Salmon;
--inactive-tab: Crimson;
}
* {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
display: grid;
grid-template-columns: 20% 80%;
}
aside img {
width: 100%;
}Dla bloku nawigacyjnego: wyrównanie tekstu do lewej strony, jedynie margines zewnętrzny lewy 10%
text-align: left nadpisuje środkowanie z body; „jedynie lewy” to margin-left (R.4.5).
styl.css CSS zmienione: 5 linii :root {
--active-tab: Salmon;
--inactive-tab: Crimson;
}
* {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
display: grid;
grid-template-columns: 20% 80%;
}
aside img {
width: 100%;
}
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
Tło ze zmiennej --active-tab. Ten sam lewy margines co w menu - przyciski i sekcja zaczynają się w jednej linii (R.4.6).
styl.css CSS zmienione: 7 linii :root {
--active-tab: Salmon;
--inactive-tab: Crimson;
}
* {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
display: grid;
grid-template-columns: 20% 80%;
}
aside img {
width: 100%;
}
nav {
text-align: left;
margin-left: 10%;
}
section {
background-color: var(--active-tab);
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
Domyślnie każda sekcja jest usunięta z układu (display: none w regule section), a sekcja z klasą active - wyświetlana blokowo (display: block). Selektor section.active jest bardziej szczegółowy niż samo section, więc wygrywa. Na starcie klasę ma tylko pierwsza sekcja: w inspektorze sekcja 1 ma block, sekcje 2 i 3 - none (R.4.9).
Reguły nie wiedzą nic o numerach sekcji - otwarcie innej zakładki to tylko przeniesienie klasy.
visibility: hidden tylko ukrywa element i zostawia po nim puste miejsce - klucz wprost uznaje to za błąd.
styl.css CSS zmienione: 5 linii :root {
--active-tab: Salmon;
--inactive-tab: Crimson;
}
* {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
display: grid;
grid-template-columns: 20% 80%;
}
aside img {
width: 100%;
}
nav {
text-align: left;
margin-left: 10%;
}
section {
background-color: var(--active-tab);
margin-left: 10%;
padding: 10px;
height: 250px;
display: none;
}
section.active {
display: block;
}Dla przycisków: szerokość 26%, biały kolor czcionki, brak obramowania, rozmiar czcionki 200%
border: none usuwa ramkę przycisku z przeglądarki. Od razu też tło --inactive-tab - biały tekst na domyślnym szarym tle byłby słabo widoczny (R.4.3, R.4.4, R.4.7).
styl.css CSS zmienione: 8 linii :root {
--active-tab: Salmon;
--inactive-tab: Crimson;
}
* {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
display: grid;
grid-template-columns: 20% 80%;
}
aside img {
width: 100%;
}
nav {
text-align: left;
margin-left: 10%;
}
section {
background-color: var(--active-tab);
margin-left: 10%;
padding: 10px;
height: 250px;
display: none;
}
section.active {
display: block;
}
button {
width: 26%;
color: white;
border: none;
font-size: 200%;
background-color: var(--inactive-tab);
}Dodatkowo dla pierwszego przycisku kolor tła Salmon, dla pozostałych – Crimson
Wszystkie przyciski mają Crimson z poprzedniej reguły, a przycisk z klasą active - Salmon. Na starcie klasę ma „Kolor”, więc pierwszy przycisk jest Salmon, pozostałe Crimson (R.4.2).
styl.css CSS zmienione: 4 linie :root {
--active-tab: Salmon;
--inactive-tab: Crimson;
}
* {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
display: grid;
grid-template-columns: 20% 80%;
}
aside img {
width: 100%;
}
nav {
text-align: left;
margin-left: 10%;
}
section {
background-color: var(--active-tab);
margin-left: 10%;
padding: 10px;
height: 250px;
display: none;
}
section.active {
display: block;
}
button {
width: 26%;
color: white;
border: none;
font-size: 200%;
background-color: var(--inactive-tab);
}
button.active {
background-color: var(--active-tab);
}Dla klasy wzory: szerokość 70 px, marginesy zewnętrzne 5 px, zaokrąglenie rogów 100%
Kwadratowe wzory po border-radius: 100% (wystarczy też 50%) stają się kołami, jak na ilustracji 6. Klasę nada im skrypt 1 (R.4.10).
styl.css CSS zmienione: 6 linii :root {
--active-tab: Salmon;
--inactive-tab: Crimson;
}
* {
font-family: "Trebuchet MS", sans-serif;
}
body {
background-color: BlanchedAlmond;
text-align: center;
display: grid;
grid-template-columns: 20% 80%;
}
aside img {
width: 100%;
}
nav {
text-align: left;
margin-left: 10%;
}
section {
background-color: var(--active-tab);
margin-left: 10%;
padding: 10px;
height: 250px;
display: none;
}
section.active {
display: block;
}
button {
width: 26%;
color: white;
border: none;
font-size: 200%;
background-color: var(--inactive-tab);
}
button.active {
background-color: var(--active-tab);
}
.wzory {
width: 70px;
margin: 5px;
border-radius: 100%;
}Kroki 39-44 · 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
Oba skrypty trafią do pliku skrypt.js, dołączonego w <head> z atrybutem defer: przeglądarka pobiera plik równolegle, ale uruchamia go dopiero po wczytaniu całego HTML-u - przyciski i sekcje już istnieją, gdy skrypt ich szuka.
querySelectorAll('nav button') zbiera trzy przyciski, a pętla for...of przypina każdemu obsługę zdarzenia mouseenter przez addEventListener (R.3.3). Funkcja strzałkowa () => showSection(button) przekazuje do funkcji przycisk, który zdarzenie wywołał. mouseenter to najechanie kursorem jak onmouseover z tabeli 1, ale wywołuje się raz przy wejściu na element, a nie przy każdym ruchu nad jego fragmentami. Funkcja showSection jest na razie pusta.
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">
<script src="skrypt.js" defer></script>
</head>
<body>
<aside>
<img src="manicure.jpg" alt="Stylizacja paznokci">
</aside>
<main>
<header>
<h1>Twoje wymarzone paznokcie</h1>
</header>
<nav>
<button type="button" class="active" aria-controls="color">Kolor</button>
<button type="button" aria-controls="shape">Kształt</button>
<button type="button" aria-controls="pattern">Wzór</button>
</nav>
<section id="color" class="active">
<h2>Kolor</h2>
<img src="kolory.png" alt="Kolory paznokci">
<div>
<input type="color" value="#FF0000" aria-label="Kolor lakieru">
</div>
</section>
<section id="shape">
<h2>Kształt</h2>
<img src="ksztalt.png" alt="Kształty paznokci">
<div>
<select aria-label="Kształt paznokci">
<option>migdał</option>
<option>zaokrąglony</option>
<option>kwadratowy</option>
<option>balerina</option>
<option>zaokrąglony kwadrat</option>
</select>
</div>
</section>
<section id="pattern">
<h2>Wzór</h2>
<div id="patterns"></div>
<div>
<input type="number" min="1" max="10" aria-label="Numer wzoru">
</div>
</section>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
</main>
</body>
</html>skrypt.js JavaScript nowy plik // Skrypt 2: zakładki przełączane po najechaniu kursorem
const tabButtons = document.querySelectorAll('nav button');
function showSection(selectedButton) {
}
for (const button of tabButtons) {
button.addEventListener('mouseenter', () => showSection(button));
}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
Funkcja przechodzi po wszystkich przyciskach. Dla każdego getAttribute('aria-controls') odczytuje identyfikator jego sekcji, a getElementById ją znajduje. classList.toggle('active', warunek) dodaje klasę, gdy warunek jest prawdziwy, i zdejmuje, gdy fałszywy: sekcja przycisku pod kursorem dostaje active, pozostałe ją tracą (R.5.4). Resztę robi CSS - section.active ma display: block, pozostałe display: none.
Skrypt nie zna liczby zakładek ani ich nazw: czwarta zakładka to czwarty przycisk z aria-controls, bez zmian w kodzie. Najedź w podglądzie na „Kształt”: widać drugą sekcję, ale przycisk „Kolor” jest nadal jasny.
skrypt.js JavaScript zmienione: 4 linie // Skrypt 2: zakładki przełączane po najechaniu kursorem
const tabButtons = document.querySelectorAll('nav button');
function showSection(selectedButton) {
for (const button of tabButtons) {
const section = document.getElementById(button.getAttribute('aria-controls'));
section.classList.toggle('active', button === selectedButton);
}
}
for (const button of tabButtons) {
button.addEventListener('mouseenter', () => showSection(button));
}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 przełącznik dla przycisku: wynik porównania trafia do stałej isSelected i klasa active przenosi się razem z sekcją. Kolory Salmon i Crimson ustawia CSS (button i button.active) - skrypt nie zawiera ani jednego koloru, więc zmiana wyglądu zakładek to zmiana tylko w styl.css.
Sprawdzone w Chrome dla każdego przycisku: „Kolor” - sekcja 1 i jasny pierwszy przycisk, „Kształt” - sekcja 2, „Wzór” - sekcja 3, pozostałe przyciski ciemne (R.5.5 - R.5.7).
skrypt.js JavaScript zmienione: 3 linie // Skrypt 2: zakładki przełączane po najechaniu kursorem
const tabButtons = document.querySelectorAll('nav button');
function showSection(selectedButton) {
for (const button of tabButtons) {
const section = document.getElementById(button.getAttribute('aria-controls'));
const isSelected = button === selectedButton;
button.classList.toggle('active', isSelected);
section.classList.toggle('active', isSelected);
}
}
for (const button of tabButtons) {
button.addEventListener('mouseenter', () => showSection(button));
}Zdarzenie najechania kursorem myszy na dowolny przycisk uruchamia skrypt 2
Najechanie kursorem nie istnieje dla osoby bez myszy. Drugie zdarzenie, focus, wywołuje tę samą funkcję, gdy przycisk dostaje fokus - klawiszem Tab albo dotknięciem na telefonie. Sprawdzone w Chrome: przejście Tabem po przyciskach przełącza sekcje tak samo jak kursor. Klucz wymienia focus wśród zdarzeń, które uznaje.
skrypt.js JavaScript zmienione: 1 linia // Skrypt 2: zakładki przełączane po najechaniu kursorem
const tabButtons = document.querySelectorAll('nav button');
function showSection(selectedButton) {
for (const button of tabButtons) {
const section = document.getElementById(button.getAttribute('aria-controls'));
const isSelected = button === selectedButton;
button.classList.toggle('active', isSelected);
section.classList.toggle('active', isSelected);
}
}
for (const button of tabButtons) {
button.addEventListener('mouseenter', () => showSection(button));
button.addEventListener('focus', () => showSection(button));
}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 w tym samym pliku, pod skryptem 2. Pętla for liczy od 1 do 10; w każdym obrocie createElement('img') tworzy obraz, a szablon tekstowy `${number}.jpg` (odwrotne apostrofy, wartość w ${}) skleja nazwę pliku. append dokłada obraz na koniec bloku #patterns (R.5.1, R.5.2).
document.write z wersji podstawowej działa tylko podczas wczytywania strony i musi stać w miejscu, gdzie mają się pojawić obrazy. Tu skrypt jest w osobnym pliku i uruchamia się po wczytaniu HTML-u, więc wstawia obrazy do wskazanego bloku. Najedź na „Wzór”: dziesięć dużych kwadratów, jeszcze bez stylu klasy.
skrypt.js JavaScript zmienione: 9 linii // Skrypt 2: zakładki przełączane po najechaniu kursorem
const tabButtons = document.querySelectorAll('nav button');
function showSection(selectedButton) {
for (const button of tabButtons) {
const section = document.getElementById(button.getAttribute('aria-controls'));
const isSelected = button === selectedButton;
button.classList.toggle('active', isSelected);
section.classList.toggle('active', isSelected);
}
}
for (const button of tabButtons) {
button.addEventListener('mouseenter', () => showSection(button));
button.addEventListener('focus', () => showSection(button));
}
// Skrypt 1: dziesięć wzorów generowanych pętlą
const patterns = document.getElementById('patterns');
for (let number = 1; number <= 10; number++) {
const image = document.createElement('img');
image.src = `${number}.jpg`;
patterns.append(image);
}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)
Trzy właściwości obrazu:
classList.add('wzory') - klasa z arkusza; reguła .wzory robi z kwadratów koła,title - dymek po najechaniu kursorem; String(number) zamienia liczbę na tekst „3” (R.5.3),alt - „Wzór 3”: obraz bez tekstu alternatywnego jest dla czytnika ekranu samą nazwą pliku.Nazwy w skrypcie mówią, do czego służą (R.5.8): tabButtons, showSection, selectedButton, button, section, isSelected, patterns, number, image.
skrypt.js JavaScript zmienione: 3 linie // Skrypt 2: zakładki przełączane po najechaniu kursorem
const tabButtons = document.querySelectorAll('nav button');
function showSection(selectedButton) {
for (const button of tabButtons) {
const section = document.getElementById(button.getAttribute('aria-controls'));
const isSelected = button === selectedButton;
button.classList.toggle('active', isSelected);
section.classList.toggle('active', isSelected);
}
}
for (const button of tabButtons) {
button.addEventListener('mouseenter', () => showSection(button));
button.addEventListener('focus', () => showSection(button));
}
// Skrypt 1: dziesięć wzorów generowanych pętlą
const patterns = document.getElementById('patterns');
for (let number = 1; number <= 10; number++) {
const image = document.createElement('img');
image.src = `${number}.jpg`;
image.alt = `Wzór ${number}`;
image.title = String(number);
image.classList.add('wzory');
patterns.append(image);
}Kroki 45-46 · po tym etapie masz 39 z 39 kryteriów (pkt)
Ocenie podlegać będzie 5 rezultatów: operacje na bazie danych, zawartość witryny internetowej, działanie witryny internetowej, styl CSS witryny internetowej, skrypt.
Obie wersje dają te same punkty. Różnice:
| wersja podstawowa | ta wersja | |
|---|---|---|
| układ | display: flex na <body>, width bloków | siatka 20% 80% |
| widoczność i kolory | skrypt wpisuje style.display i style.backgroundColor | skrypt przenosi klasę active, wygląd z CSS |
| przycisk ↔ sekcja | "section" + number | atrybut aria-controls |
| zdarzenie | atrybut onmouseover w HTML | addEventListener('mouseenter') i focus |
| skrypty | <script> w HTML, document.write | skrypt.js z defer, createElement + append |
| obrazy wzorów | bez alt | alt, title, klasa |
| pola formularza | po <br> | w <div>, z aria-label |
| zapytanie 2 | DATE(termin) = … | przedział >= / < |
Arkusz pozwala napisać skrypt 1 także w PHP (plik paznokcie.php): pętla for z echo "<img src=\"$i.jpg\" class=\"wzory\" title=\"$i\">"; wysłałaby gotowe obrazy w HTML-u, bez JavaScriptu. Skrypt 2 i tak musi zostać w JavaScripcie - reaguje na kursor po stronie przeglądarki.
Podgląd strony bez zmian - taki jak po kroku 44.
Czas przeznaczony na wykonanie zadania wynosi 150 minut.
getElementById, style, onmouseover) wystarczą do pełnych punktów, a każdą linię łatwo sprawdzić w przeglądarce.addEventListener i classList są pisane z pamięci. Jedna pułapka: skrypt w <head> bez defer uruchomiłby się przed przyciskami i querySelectorAll zwróciłby pustą listę - zakładki by nie działały, a w konsoli nie byłoby żadnego błędu.Mieszanie też daje pełne punkty, np. klasy active z tej wersji i onmouseover z podstawowej.
Podgląd strony bez zmian - taki jak po kroku 44.
Krok 47 · 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 nazwa przeglądarki, w której strona była sprawdzana.
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, skrypt.js, styl.css. Po nagraniu sprawdź odczyt płyty.
przeglądarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 44.
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.