Przejdź do głównej treści
EE.09-02-22.06-SGCzerwiec 2022 · 45 kroków · ok. 81 min · 39 kryteriów z klucza

Rozwiązanie krok po kroku: Pomocnik CSS z paletą HSL (Nowoczesny kod (grid, JS w pliku))

To drugi sposób rozwiązania tego samego arkusza. Wynik jest ten sam - baza sklep z czterema zapytaniami, wykadrowana i rozciągnięta grafika przestrzeni barw oraz strona kolory.html, która po kliknięciu „Generuj paletę” koloruje tabelę odcieniami hsl() - i tak samo spełnia każde kryterium klucza. Inna jest droga:

  • siatka CSS zamiast float: kontener strony ma dwie kolumny po 50%, banery zajmują po jednej, a blok główny i stopka - całą szerokość; nic nie trzeba „czyścić” przez clear,
  • znaczniki opisujące rolę bloków: pierwszy baner to <header>, drugi - <nav> (menu strony), a kolory strony są zmiennymi CSS,
  • skrypt w osobnym pliku skrypt.js z atrybutem defer, obsługa kliknięcia przez addEventListener zamiast atrybutu onclick w HTML-u,
  • wartość z pola jest sprawdzana: pusta, ułamkowa albo spoza zakresu 0-360 daje komunikat zamiast cicho złej palety,
  • jedna pętla po komórkach z tablicą nasyceń zamiast pięciu prawie takich samych linii.

To arkusz EE.09 z czerwca 2022 - kwalifikacji formuły 2017, którą zastąpiła INF.03. Baza i grafika pochodzą z oryginalnego archiwum CKE zad2.zip (załącznik na stronie arkusza), zapytania i zrzuty są policzone na MariaDB 10.4, a skrypt był uruchomiony w Chrome z wartością 200 z obrazu 2 i ze złymi danymi.

Jak liczą się punkty. Klucz ma 39 kryteriów (R.1.1 - R.5.6), 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; klucz przyjmuje zarówno atrybut onclick, jak i słuchacza zdarzenia click.

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

  1. Etap 1: Baza danych

    Kroki 1-7 · po tym etapie masz 6 z 39 kryteriów (pkt)

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

    ok. 2 min
    Polecenie z arkusza

    Na pulpicie znajduje się archiwum o nazwie zad2.zip zabezpieczone hasłem: Css_$_Css Archiwum należy rozpakować. Na pulpicie konta Egzamin należy utworzyć folder. Jako nazwy folderu należy użyć numeru zdającego, którym został podpisany arkusz. Rozpakowane pliki należy umieścić w tym folderze.

    Folder na pulpicie nazwany numerem PESEL (w tym rozwiązaniu w jego miejscu stoi Bartosz Bryniarski), do niego archiwum zad2.zip rozpakowane z hasłem Css_$_Css. W środku: sklep.sql i kolory.jpg. Strona nie ma PHP, więc otwierasz ją wprost z dysku.

  2. Krok 2: XAMPP i pusta baza sklep

    ok. 2 min
    Polecenie z arkusza

    Za pomocą narzędzia phpMyAdmin należy wykonać operacje na bazie danych: Utworzenie bazy danych o nazwie: sklep z zestawem polskich znaków (np. utf8_unicode_ci)

    Start przy Apache i MySQL, potem http://localhost/phpmyadmin, Nowa, nazwa sklep, porównywanie utf8_unicode_ci, Utwórz.

  3. Krok 3: Import pliku sklep.sql i zrzut import.jpg

    Kryteria:

    R.1.1 Wykonano import tabel do bazy danych sklep , czynność udokumentowano plikiem o nazwie import w formacie JPEG

    ok. 3 min
    Polecenie z arkusza

    Import do bazy sklep z pliku sklep.sql. Czynność należy udokumentować zrzutem ekranu, na którym powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel. Zrzut należy zapisać w formacie JPEG, pod nazwą import. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań.

    Baza sklep, karta Import, plik sklep.sql, Wykonaj. Po imporcie są cztery tabele: kategorie (4 rekordy), klient (7), produkty (11) i zamowienia (12). Zrzut całego ekranu z komunikatem o sukcesie - import.jpg.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 3

  4. Krok 4: Zapytanie 1: klienci z Legionowa i Warszawy

    Kryteria: ,

    R.1.2 Zapisano plik tekstowy o nazwie kwerendy zawierający co najmniej jedno zapytanie SQL, wynikające z treści zadania

    R.1.3 Utworzono zapytanie 1 wybierające jedynie imię, nazwisko i miasto klientów z miast Legionowo, Warszawa. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT imie, nazwisko, miasto FROM klient WHERE miasto = "Legionowo" OR miasto = "Warszawa"; oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczne są dokładnie 4 rekordy: Piotr Górski Legionowo, Adam Binder Warszawa, Robert Halicki Warszawa, Alicja Warkowska Legionowo

    ok. 3 min
    Polecenie z arkusza

    Zapytania SQL na bazie sklep zapisane do pliku kwerendy.txt. Zapytanie 1: wybierające jedynie imię, nazwisko i miasto klientów z miast: Legionowo, Warszawa

    IN ('Legionowo', 'Warszawa') - wiersz przechodzi, gdy miasto jest jednym z wymienionych; to krótszy zapis dwóch warunków z OR, wygodny, gdy miast przybędzie. Wynik: 4 klientów (Górski, Binder, Halicki, Warkowska). Zapytanie do kwerendy.txt (R.1.2), zrzut - kw1.png. Zrzut pokazuje zapis z OR z wersji podstawowej - wynik jest identyczny.

    kwerendy.txt Tekst nowy plik 
    -- Zapytanie 1
SELECT imie, nazwisko, miasto
FROM klient
WHERE miasto IN ('Legionowo', 'Warszawa');
    Podgląd strony po tym kroku
    Podgląd strony po kroku 4

  5. Krok 5: Zapytanie 2: produkty droższe niż 500 zł

    Kryteria:

    R.1.4 Utworzono zapytanie 2 wybierające jedynie nazwę produktu dla produktów o cenie brutto wyższej od 500 zł. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT nazwa FROM produkty WHERE cena_brutto > 500; oraz wynik działania zapytania udokumentowano zrzutem, na którym widocznych jest dokładnie 5 rekordów: Corei5-7400, Goodram, HyperX, Patriot, Kingston SSD

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 2: wybierające jedynie nazwę produktu dla produktów o cenie brutto wyższej od 500 zł

    Ostra nierówność cena_brutto > 500, liczba bez apostrofów. Wynik: 5 produktów - Corei5-7400, Goodram, HyperX, Patriot i Kingston SSD. Zrzut: kw2.png.

    kwerendy.txt Tekst zmienione: 5 linii 
    -- Zapytanie 1
SELECT imie, nazwisko, miasto
FROM klient
WHERE miasto IN ('Legionowo', 'Warszawa');

-- Zapytanie 2
SELECT nazwa
FROM produkty
WHERE cena_brutto > 500;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 5

  6. Krok 6: Zapytanie 3: średnia cena w każdej kategorii

    Kryteria:

    R.1.5 Utworzono zapytanie 3 wybierające nazwę z tabeli kategorie i odpowiadającą jej wartość średniej arytmetycznej cen brutto produktów z tabeli produkty . W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT nazwa_kategorii, AVG(cena_brutto) FROM produkty JOIN kategorie USING(id_kat) GROUP BY produkty.id_kat; (lub porównanie kluczy po WHERE albo po ON, poprawne też GROUP BY nazwa_kategorii) oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczne są dokładnie 4 rekordy z danymi (AVG dowolna liczba miejsc po przecinku): Procesory 520, Płyty_główne 365, Pamięci 602, Dyski 376 lub 377 (zaokrąglenie)

    ok. 3 min
    Polecenie z arkusza

    Zapytanie 3: wybierające nazwę kategorii z tabeli kategorie i odpowiadającą jej wartość średniej arytmetycznej cen brutto produktów tej kategorii z tabeli produkty. Należy posłużyć się relacją.

    Złączenie kategorii z produktami po id_kat, funkcja agregująca AVG i GROUP BY nazwa_kategorii - jedna średnia na kategorię. Każda klauzula w osobnej linii, JOIN także. Wynik: Dyski 376,67, Pamięci 602,38, Płyty_główne 365 i Procesory 520,1 - drobna końcówka …006 to skutek typu float kolumny cena_brutto. W prawdziwym sklepie ceny trzyma się w typie DECIMAL, który zapisuje grosze dokładnie. Zrzut: kw3.png.

    kwerendy.txt Tekst zmienione: 6 linii 
    -- Zapytanie 1
SELECT imie, nazwisko, miasto
FROM klient
WHERE miasto IN ('Legionowo', 'Warszawa');

-- Zapytanie 2
SELECT nazwa
FROM produkty
WHERE cena_brutto > 500;

-- Zapytanie 3
SELECT nazwa_kategorii, AVG(cena_brutto)
FROM kategorie
JOIN produkty ON kategorie.id_kat = produkty.id_kat
GROUP BY nazwa_kategorii;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 6

  7. Krok 7: Zapytanie 4: zamówienia klienta nr 2

    Kryteria:

    R.1.6 Utworzono zapytanie 4 wybierające id zamówienia, ilość i wartość z tabeli zamowienia oraz odpowiadającą im nazwę z tabeli produkty dla klienta o id równym 2. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT id_zam, ilosc, wartosc, nazwa FROM zamowienia JOIN produkty USING(id_prod) WHERE id_klient = 2; (lub porównanie kluczy po WHERE albo po ON) oraz wynik działania zapytania udokumentowano zrzutem na którym widoczne są dokładnie 3 rekordy, jedynie pola id_zam, ilosc, wartosc, nazwa dla id_zam = 3, 4, 11

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 4: wybierające id zamówienia, ilość i wartość z tabeli zamowienia oraz odpowiadającą im nazwę produktu z tabeli produkty dla klienta o id równym 2. Należy posłużyć się relacją

    Złączenie zamówień z produktami po id_prod i warunek id_klient = 2 - numer klienta jest w tabeli zamowienia, więc tabeli klient nie trzeba dołączać. Wynik: zamówienia 3, 4 i 11. Zrzut: kw4.png.

    kwerendy.txt Tekst zmienione: 6 linii 
    -- Zapytanie 1
SELECT imie, nazwisko, miasto
FROM klient
WHERE miasto IN ('Legionowo', 'Warszawa');

-- Zapytanie 2
SELECT nazwa
FROM produkty
WHERE cena_brutto > 500;

-- Zapytanie 3
SELECT nazwa_kategorii, AVG(cena_brutto)
FROM kategorie
JOIN produkty ON kategorie.id_kat = produkty.id_kat
GROUP BY nazwa_kategorii;

-- Zapytanie 4
SELECT id_zam, ilosc, wartosc, nazwa
FROM zamowienia
JOIN produkty ON zamowienia.id_prod = produkty.id_prod
WHERE id_klient = 2;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 7

  8. Etap 2: Grafika i strona HTML

    Kroki 8-27 · po tym etapie masz 21 z 39 kryteriów (pkt)

    Krok 8: Grafika: kadr samej przestrzeni barw

    ok. 3 min
    Polecenie z arkusza

    Cechy grafiki z pliku kolory.jpg: Wykadrowana tak, aby była widoczna jedynie przestrzeń barw zgodnie z obrazem 3

    GIMP, narzędzie Kadrowanie: prostokąt dokładnie na krawędziach kolorowego pola, bez szarego tła, osi i podpisów. W tym pliku pole ma 262 × 73 px.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 8

  9. Krok 9: Grafika: szerokość 500 px bez zachowania proporcji

    Kryteria:

    R.2.1 Obraz w pliku kolory .jpg wykadrowano tak, aby była widoczna jedynie przestrzeń barw oraz jego szerokość to 500 px, wysokość 75 px (± 10 px) barwy są rozciągnięte względem pierwotnego obrazu

    ok. 2 min
    Polecenie z arkusza

    Przeskalowana bez zachowania proporcji do szerokości 500 px, wysokość pozostaje bez zmian i wynosi około 75 px (przybliżony wymiar, zależny od kadrowania)

    Skaluj obraz z rozpiętym łańcuchem: szerokość 500 px, wysokość zostaje 73 px - barwy rozciągają się w poziomie. Zapis jako kolory.jpg (R.2.1).

    Podgląd strony po tym kroku
    Podgląd strony po kroku 9

  10. Krok 10: Plik kolory.html z deklaracją HTML5

    Kryteria:

    R.2.2 Witrynę internetową zapisano w pliku o nazwie kolory.html

    ok. 1 min
    Polecenie z arkusza

    Cechy witryny: Składa się ze stron o nazwach kolory.html, czcionki.html, style.html

    Plik kolory.html od razu z <!DOCTYPE html> w pierwszej linii i szkieletem <html>, <head>, <body>. Dwie pozostałe strony powstaną przy menu.

    kolory.html HTML nowy plik 
    <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  11. Krok 11: Kodowanie polskich znaków

    ok. 1 min
    Polecenie z arkusza

    Jawnie zastosowano właściwy standard kodowania polskich znaków

    <meta charset="UTF-8"> jako pierwszy element <head>, plik zapisany w UTF-8.

    kolory.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  12. Krok 12: Język strony: polski

    Kryteria:

    R.2.3 Zapisano jawnie standard kodowania polskich znaków i deklarację HTML5 <!DOCTYPE HTML> oraz zadeklarowano dla witryny język polski (np. lang = 'pl')

    ok. 1 min
    Polecenie z arkusza

    Zadeklarowany język zawartości witryny: polski

    lang="pl" w znaczniku <html> - deklaracja HTML5, kodowanie i język są gotowe (R.2.3).

    kolory.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  13. Krok 13: Tytuł strony i viewport

    Kryteria:

    R.2.4 Nadano tytuł strony: Pomocnik CSS

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony widoczny na karcie przeglądarki: „Pomocnik CSS”

    <title> z tytułem z arkusza (R.2.4) i <meta name="viewport"> - bez niej telefon pokazuje stronę jak pomniejszony ekran komputera.

    kolory.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pomocnik CSS</title>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  14. Krok 14: Podpięcie arkusza stylów styl2.css

    Kryteria:

    R.3.7 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl2.css , formatowanie pochodzi jedynie z tego arkusza (lub skryptu generującego kolory tła tabeli) Uwaga: kryterium to nie jest spełnione również, gdy zdający źle przypisał co najmniej jeden selektor do bloku (np. kropka zamiast #)

    ok. 1 min
    Polecenie z arkusza

    Arkusz stylów w pliku o nazwie styl2.css prawidłowo połączony z kodem strony

    <link rel="stylesheet" href="styl2.css"> - całe formatowanie pochodzi z tego pliku, kolory komórek ustawi skrypt (R.3.7).

    kolory.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  15. Krok 15: Kontener, dwa bloki banera, blok główny i stopka

    Kryteria:

    R.2.5 Wygląd strony zdefiniowano tworząc kontener całej strony zawierający dwa bloki banera, blok główny i stopkę. Zastosowano znaczniki sekcji

    ok. 2 min
    Polecenie z arkusza

    Podział strony na: kontener całej strony, a w nim obok siebie dwa bloki banera, blok główny, stopka. Podział zrealizowany za pomocą znaczników sekcji

    Kontener <div id="container">, w nim bloki w kolejności z obrazu 2 (R.2.5). Każdy blok dostaje znacznik, który mówi, czym jest:

    • pierwszy baner z nazwą aplikacji - <header> (nagłówek strony),
    • drugi baner z menu - <nav> (nawigacja); czytnik ekranu ogłasza go jako menu i pozwala do niego przeskoczyć,
    • blok główny - <main>, stopka - <footer>.

    Oba banery mają wspólną klasę banner - arkusz podaje dla nich jeden zestaw stylów.

    kolory.html HTML zmienione: 10 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <header class="banner">
        </header>
        <nav class="banner">
        </nav>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  16. Krok 16: Pierwszy blok banera: nagłówek pierwszego stopnia

    ok. 1 min
    Polecenie z arkusza

    Zawartość pierwszego bloku banera: nagłówek pierwszego stopnia o treści „Pomocnik CSS”

    <h1> w <header>.

    kolory.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <header class="banner">
            <h1>Pomocnik CSS</h1>
        </header>
        <nav class="banner">
        </nav>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  17. Krok 17: Drugi blok banera: lista z odnośnikiem Kolory

    Kryteria:

    R.3.2 Kliknięcie odnośnika Kolory prowadzi do strony kolory.html

    ok. 2 min
    Polecenie z arkusza

    Zawartość drugiego bloku banera: lista punktowana (nieuporządkowana) z elementami, które jednocześnie są odnośnikami: element Kolory prowadzący do strony kolory.html

    Lista <ul> w <nav>, odnośnik <a> w każdym <li> (R.3.2). Atrybut aria-current="page" oznacza bieżącą stronę - czytnik ekranu powie „bieżąca strona”, a CSS mógłby ją wyróżnić.

    kolory.html HTML zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <header class="banner">
            <h1>Pomocnik CSS</h1>
        </header>
        <nav class="banner">
            <ul>
                <li><a href="kolory.html" aria-current="page">Kolory</a></li>
            </ul>
        </nav>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  18. Krok 18: Pliki czcionki.html i style.html

    ok. 1 min
    Polecenie z arkusza

    Pliki czcionki.html, style.html zawierają jedynie tekst „strona w trakcie budowy”, pozostałe cechy dotyczą tylko pliku kolory.html

    Dwa pliki, każdy z jedną linią „strona w trakcie budowy” - arkusz mówi „jedynie tekst”, więc bez szkieletu HTML.

    czcionki.html HTML nowy plik 
    strona w trakcie budowy
    style.html HTML nowy plik 
    strona w trakcie budowy

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

  19. Krok 19: Odnośniki Czcionki i Style CSS

    Kryteria:

    R.3.3 Kliknięcie odnośnika Czcionki prowadzi do strony czcionki.html lub kliknięcie odnośnika Style CSS prowadzi do strony style.html

    ok. 1 min
    Polecenie z arkusza

    element Czcionki prowadzący do strony czcionki.html. element Style CSS prowadzący do strony style.html

    Dwa elementy listy z odnośnikami do plików z poprzedniego kroku (R.3.3).

    kolory.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <header class="banner">
            <h1>Pomocnik CSS</h1>
        </header>
        <nav class="banner">
            <ul>
                <li><a href="kolory.html" aria-current="page">Kolory</a></li>
                <li><a href="czcionki.html">Czcionki</a></li>
                <li><a href="style.html">Style CSS</a></li>
            </ul>
        </nav>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  20. Krok 20: Odnośnik Pomoc otwierany w nowej karcie

    Kryteria: ,

    R.3.4 Kliknięcie odnośnika Pomoc inicjuje otwarcie strony https://www.w3schools.com/css/ w osobnej zakładce przeglądarki

    R.2.7 W drugim bloku banera umieszczono listę punktowaną o elementach: Kolory, Czcionki, Style CSS, Pomoc. Zastosowano znaczniki <ul>, <li>

    ok. 1 min
    Polecenie z arkusza

    element Pomoc prowadzący do strony https://www.w3schools.com/css/, odnośnik powinien otwierać się w nowej karcie przeglądarki

    Pełny adres i target="_blank" (R.3.4); lista ma komplet czterech elementów (R.2.7). rel="noopener noreferrer" - obca strona w nowej karcie nie dostaje dostępu do karty „Pomocnika CSS” (window.opener) ani adresu, z którego przyszedł użytkownik.

    kolory.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <header class="banner">
            <h1>Pomocnik CSS</h1>
        </header>
        <nav class="banner">
            <ul>
                <li><a href="kolory.html" aria-current="page">Kolory</a></li>
                <li><a href="czcionki.html">Czcionki</a></li>
                <li><a href="style.html">Style CSS</a></li>
                <li><a href="https://www.w3schools.com/css/" target="_blank" rel="noopener noreferrer">Pomoc</a></li>
            </ul>
        </nav>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  21. Krok 21: Blok główny: nagłówek drugiego stopnia

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku głównego: nagłówek drugiego stopnia o treści „Podaj składową H koloru w kodzie HSL”

    <h2> w <main>. H to odcień - kąt 0-360° na kole barw.

    kolory.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <header class="banner">
            <h1>Pomocnik CSS</h1>
        </header>
        <nav class="banner">
            <ul>
                <li><a href="kolory.html" aria-current="page">Kolory</a></li>
                <li><a href="czcionki.html">Czcionki</a></li>
                <li><a href="style.html">Style CSS</a></li>
                <li><a href="https://www.w3schools.com/css/" target="_blank" rel="noopener noreferrer">Pomoc</a></li>
            </ul>
        </nav>
        <main>
            <h2>Podaj składową H koloru w kodzie HSL</h2>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  22. Krok 22: Paragraf z zakresami odcieni

    Kryteria:

    R.2.6 W pierwszym bloku banera zapisano nagłówek h1: "Pomocnik CSS", w bloku głównym h2: "Podaj składową H koloru w kodzie HSL" oraz przynajmniej jeden paragraf

    ok. 1 min
    Polecenie z arkusza

    paragraf treści: „0 do 30 czerwienie, do 60 żółcie, do 150 zielenie, do 250 niebieskie, do 360 fiolet i purpura”

    Paragraf <p> - na stronie są <h1>, <h2> i paragraf (R.2.6).

    kolory.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <header class="banner">
            <h1>Pomocnik CSS</h1>
        </header>
        <nav class="banner">
            <ul>
                <li><a href="kolory.html" aria-current="page">Kolory</a></li>
                <li><a href="czcionki.html">Czcionki</a></li>
                <li><a href="style.html">Style CSS</a></li>
                <li><a href="https://www.w3schools.com/css/" target="_blank" rel="noopener noreferrer">Pomoc</a></li>
            </ul>
        </nav>
        <main>
            <h2>Podaj składową H koloru w kodzie HSL</h2>
            <p>0 do 30 czerwienie, do 60 żółcie, do 150 zielenie, do 250 niebieskie, do 360 fiolet i purpura</p>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  23. Krok 23: Obraz kolory.jpg z tekstem alternatywnym

    Kryteria:

    R.2.8 W bloku głównym umieszczono obraz kolory.jpg z tekstem alternatywnym "Przestrzeń barw HSL"

    ok. 1 min
    Polecenie z arkusza

    obraz kolory.jpg z tekstem alternatywnym „Przestrzeń barw HSL”

    <img> z tekstem alternatywnym (R.2.8) i prawdziwymi wymiarami pliku w width i height - przeglądarka rezerwuje miejsce, zanim obraz się wczyta, więc pole pod nim nie „skacze”.

    kolory.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <header class="banner">
            <h1>Pomocnik CSS</h1>
        </header>
        <nav class="banner">
            <ul>
                <li><a href="kolory.html" aria-current="page">Kolory</a></li>
                <li><a href="czcionki.html">Czcionki</a></li>
                <li><a href="style.html">Style CSS</a></li>
                <li><a href="https://www.w3schools.com/css/" target="_blank" rel="noopener noreferrer">Pomoc</a></li>
            </ul>
        </nav>
        <main>
            <h2>Podaj składową H koloru w kodzie HSL</h2>
            <p>0 do 30 czerwienie, do 60 żółcie, do 150 zielenie, do 250 niebieskie, do 360 fiolet i purpura</p>
            <img src="kolory.jpg" alt="Przestrzeń barw HSL" width="500" height="73">
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  24. Krok 24: Pole liczbowe z maksimum 360 i podpowiedzią

    Kryteria:

    R.3.6 Pole edycyjne jest typu numerycznego i ma ustawiony atrybut max = "360" oraz placeholder = "0 – 360"

    ok. 2 min
    Polecenie z arkusza

    Pole edycyjne typu numerycznego o maksymalnej wartości 360 i podpowiedzi o treści „0 – 360”

    type="number", max="360" i placeholder="0 – 360" z arkusza (R.3.6). Dodatki: min="0" i step="1" - strzałki nie zejdą poniżej zera i chodzą co 1. Pole nie ma widocznej etykiety (obraz 2 jej nie pokazuje), dlatego aria-label podaje czytnikowi ekranu jego nazwę - sama podpowiedź znika po wpisaniu wartości.

    Pole i przycisk stoją w bloku <div class="controls"> - ich wiersz pod obrazem, bez <br>.

    kolory.html HTML zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <header class="banner">
            <h1>Pomocnik CSS</h1>
        </header>
        <nav class="banner">
            <ul>
                <li><a href="kolory.html" aria-current="page">Kolory</a></li>
                <li><a href="czcionki.html">Czcionki</a></li>
                <li><a href="style.html">Style CSS</a></li>
                <li><a href="https://www.w3schools.com/css/" target="_blank" rel="noopener noreferrer">Pomoc</a></li>
            </ul>
        </nav>
        <main>
            <h2>Podaj składową H koloru w kodzie HSL</h2>
            <p>0 do 30 czerwienie, do 60 żółcie, do 150 zielenie, do 250 niebieskie, do 360 fiolet i purpura</p>
            <img src="kolory.jpg" alt="Przestrzeń barw HSL" width="500" height="73">
            <div class="controls">
                <input type="number" id="hue" min="0" max="360" step="1" placeholder="0 – 360" aria-label="Składowa H koloru">
            </div>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  25. Krok 25: Przycisk „Generuj paletę”

    Kryteria:

    R.2.10 W bloku głównym umieszczono pole edycyjne i przycisk

    ok. 1 min
    Polecenie z arkusza

    Przycisk „Generuj paletę”, którego wciśnięcie uruchamia skrypt

    <button type="button"> z identyfikatorem generate - po nim skrypt podepnie obsługę kliknięcia. type="button" mówi wprost, że przycisk niczego nie wysyła. Pole i przycisk są w bloku głównym (R.2.10).

    kolory.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <header class="banner">
            <h1>Pomocnik CSS</h1>
        </header>
        <nav class="banner">
            <ul>
                <li><a href="kolory.html" aria-current="page">Kolory</a></li>
                <li><a href="czcionki.html">Czcionki</a></li>
                <li><a href="style.html">Style CSS</a></li>
                <li><a href="https://www.w3schools.com/css/" target="_blank" rel="noopener noreferrer">Pomoc</a></li>
            </ul>
        </nav>
        <main>
            <h2>Podaj składową H koloru w kodzie HSL</h2>
            <p>0 do 30 czerwienie, do 60 żółcie, do 150 zielenie, do 250 niebieskie, do 360 fiolet i purpura</p>
            <img src="kolory.jpg" alt="Przestrzeń barw HSL" width="500" height="73">
            <div class="controls">
                <input type="number" id="hue" min="0" max="360" step="1" placeholder="0 – 360" aria-label="Składowa H koloru">
                <button type="button" id="generate">Generuj paletę</button>
            </div>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  26. Krok 26: Tabela 4 × 2 i miejsce na komunikat

    Kryteria:

    R.2.9 W bloku głównym umieszczono tabelę o czterech kolumnach i dwóch wierszach, z czego pierwszy wiersz ma wszystkie komórki połączone (colspan='4'), zastosowano znaczniki <table>, <tr>, <td>

    ok. 3 min
    Polecenie z arkusza

    Tabela o czterech kolumnach i dwóch wierszach, z czego pierwszy wiersz ma wszystkie komórki połączone, wypełniona zgodnie z Obrazem 2

    Pierwszy wiersz to jedna komórka z colspan="4", drugi - cztery zwykłe komórki (R.2.9).

    Nad tabelą pusty paragraf <p id="message"> - skrypt wpisze do niego komunikat o złej wartości. aria-live="polite" każe czytnikowi ekranu przeczytać nowy komunikat, gdy się pojawi, bez przerywania tego, co właśnie czyta.

    kolory.html HTML zmienione: 12 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <header class="banner">
            <h1>Pomocnik CSS</h1>
        </header>
        <nav class="banner">
            <ul>
                <li><a href="kolory.html" aria-current="page">Kolory</a></li>
                <li><a href="czcionki.html">Czcionki</a></li>
                <li><a href="style.html">Style CSS</a></li>
                <li><a href="https://www.w3schools.com/css/" target="_blank" rel="noopener noreferrer">Pomoc</a></li>
            </ul>
        </nav>
        <main>
            <h2>Podaj składową H koloru w kodzie HSL</h2>
            <p>0 do 30 czerwienie, do 60 żółcie, do 150 zielenie, do 250 niebieskie, do 360 fiolet i purpura</p>
            <img src="kolory.jpg" alt="Przestrzeń barw HSL" width="500" height="73">
            <div class="controls">
                <input type="number" id="hue" min="0" max="360" step="1" placeholder="0 – 360" aria-label="Składowa H koloru">
                <button type="button" id="generate">Generuj paletę</button>
            </div>
            <p id="message" aria-live="polite"></p>
            <table>
                <tr>
                    <td colspan="4">Kolor główny</td>
                </tr>
                <tr>
                    <td>kolor 2</td>
                    <td>kolor 3</td>
                    <td>kolor 4</td>
                    <td>kolor 5</td>
                </tr>
            </table>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  27. Krok 27: Stopka: autor

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku stopki: paragraf o treści „Autor: ”, dalej wstawiony numer zdającego

    Paragraf w stopce. Na egzaminie po dwukropku wpisujesz swój numer PESEL; tu stoi Bartosz Bryniarski.

    kolory.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <header class="banner">
            <h1>Pomocnik CSS</h1>
        </header>
        <nav class="banner">
            <ul>
                <li><a href="kolory.html" aria-current="page">Kolory</a></li>
                <li><a href="czcionki.html">Czcionki</a></li>
                <li><a href="style.html">Style CSS</a></li>
                <li><a href="https://www.w3schools.com/css/" target="_blank" rel="noopener noreferrer">Pomoc</a></li>
            </ul>
        </nav>
        <main>
            <h2>Podaj składową H koloru w kodzie HSL</h2>
            <p>0 do 30 czerwienie, do 60 żółcie, do 150 zielenie, do 250 niebieskie, do 360 fiolet i purpura</p>
            <img src="kolory.jpg" alt="Przestrzeń barw HSL" width="500" height="73">
            <div class="controls">
                <input type="number" id="hue" min="0" max="360" step="1" placeholder="0 – 360" aria-label="Składowa H koloru">
                <button type="button" id="generate">Generuj paletę</button>
            </div>
            <p id="message" aria-live="polite"></p>
            <table>
                <tr>
                    <td colspan="4">Kolor główny</td>
                </tr>
                <tr>
                    <td>kolor 2</td>
                    <td>kolor 3</td>
                    <td>kolor 4</td>
                    <td>kolor 5</td>
                </tr>
            </table>
        </main>
        <footer>
            <p>Autor: Bartosz Bryniarski</p>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  28. Etap 3: Styl CSS

    Kroki 28-38 · po tym etapie masz 32 z 39 kryteriów (pkt)

    Krok 28: Plik styl2.css: kolory jako zmienne i kontener strony

    Kryteria:

    R.4.1 Ustawiono krój czcionki Helvetica, sans-serif dla kontenera całej strony lub body (czcionka Helvetica jako pierwsza)

    ok. 2 min
    Polecenie z arkusza

    Styl CSS zdefiniowany w całości w zewnętrznym pliku o nazwie styl2.css. Dla kontenera całej strony: krój czcionki Helvetica, w przypadku braku sans-serif, kolor tła Linen, kolor czcionki #222, marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę, szerokość 90%

    Na początku zmienne CSS w :root: pięć kolorów z arkusza dostaje nazwy (--page-bg, --text, --dark, --light, --link). Czarny i biały występują w arkuszu po kilka razy - zmiana motywu to wtedy kilka linii na górze pliku.

    Kontener: krój Helvetica, sans-serif (R.4.1), tło i kolor tekstu ze zmiennych, margin: auto przy szerokości 90% - kontener stoi na środku okna.

    styl2.css CSS nowy plik 
    :root {
    --page-bg: Linen;
    --text: #222;
    --dark: black;
    --light: white;
    --link: #aaa;
}

#container {
    font-family: Helvetica, sans-serif;
    background-color: var(--page-bg);
    color: var(--text);
    margin: auto;
    width: 90%;
}
    Podgląd strony po tym kroku (kolory.html)

  29. Krok 29: Oba bloki banera: czarne tło, biały tekst, wysokość

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla obu bloków banera: czarny kolor tła, biały kolor czcionki, szerokość 50%, wysokość 100 px

    Klasa .banner trafia w <header> i <nav> naraz. Szerokość 50% to szerokość kolumny siatki - ustawi ją reguła kontenera w kroku „Układ”.

    styl2.css CSS zmienione: 6 linii 
    :root {
    --page-bg: Linen;
    --text: #222;
    --dark: black;
    --light: white;
    --link: #aaa;
}

#container {
    font-family: Helvetica, sans-serif;
    background-color: var(--page-bg);
    color: var(--text);
    margin: auto;
    width: 90%;
}

.banner {
    background-color: var(--dark);
    color: var(--light);
    height: 100px;
}
    Podgląd strony po tym kroku (kolory.html)

  30. Krok 30: Układ: siatka z dwiema kolumnami po 50%

    Kryteria: ,

    R.3.1 Układ bloków po uruchomieniu strony w przeglądarce jest zgodny z Obrazem 2 w arkuszu egzaminacyjnym (prawidłowo zastosowano właściwości CSS układające bloki na stronie, np. float i clear albo display flex albo grid)

    R.4.4 Ustawiono wysokość 100px dla obu banerów oraz szerokość 90% dla kontenera całej strony lub body i szerokość 50% dla obu banerów (width lub grid-template-columns lub flex)

    ok. 3 min
    Polecenie z arkusza

    Podział zrealizowany za pomocą znaczników sekcji tak, aby wygląd układu bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2

    Kontener staje się siatką: display: grid i grid-template-columns: 50% 50% - dwie równe kolumny. Bloki wypełniają komórki po kolei: <header> - pierwszą, <nav> - drugą, więc banery stoją obok siebie.

    Blok główny i stopka mają grid-column: 1 / -1 - od pierwszej linii siatki do ostatniej (-1 liczy od końca), czyli przez obie kolumny. Każdy zaczyna nowy wiersz pod banerami, bez float i clear (R.3.1). Klucz przyjmuje grid-template-columns jako szerokość 50% banerów; z wysokością 100 px i szerokością kontenera 90% daje to R.4.4.

    Typowe błędy

    Bez grid-column: 1 / -1 blok główny trafi do lewej kolumny pod pierwszym banerem, a stopka - obok niego, w prawej.

    styl2.css CSS zmienione: 7 linii 
    :root {
    --page-bg: Linen;
    --text: #222;
    --dark: black;
    --light: white;
    --link: #aaa;
}

#container {
    font-family: Helvetica, sans-serif;
    background-color: var(--page-bg);
    color: var(--text);
    margin: auto;
    width: 90%;
    display: grid;
    grid-template-columns: 50% 50%;
}

.banner {
    background-color: var(--dark);
    color: var(--light);
    height: 100px;
}

main,
footer {
    grid-column: 1 / -1;
}
    Podgląd strony po tym kroku (kolory.html)

  31. Krok 31: Blok główny: marginesy wewnętrzne

    ok. 1 min
    Polecenie z arkusza

    Dla bloku głównego: marginesy wewnętrzne 20 px

    padding: 20px na main.

    styl2.css CSS zmienione: 4 linie 
    :root {
    --page-bg: Linen;
    --text: #222;
    --dark: black;
    --light: white;
    --link: #aaa;
}

#container {
    font-family: Helvetica, sans-serif;
    background-color: var(--page-bg);
    color: var(--text);
    margin: auto;
    width: 90%;
    display: grid;
    grid-template-columns: 50% 50%;
}

.banner {
    background-color: var(--dark);
    color: var(--light);
    height: 100px;
}

main,
footer {
    grid-column: 1 / -1;
}

main {
    padding: 20px;
}
    Podgląd strony po tym kroku (kolory.html)

  32. Krok 32: Stopka: czarne tło, biały tekst, marginesy, wyśrodkowanie

    Kryteria:

    R.4.2 Ustawiono kolor tła Linen dla kontenera całej strony lub body oraz czarny dla obu banerów i stopki

    ok. 1 min
    Polecenie z arkusza

    Dla stopki: czarny kolor tła, biały kolor czcionki, marginesy wewnętrzne 20 px, wyrównanie tekstu do środka

    Te same zmienne co w banerach. Kolory tła kontenera, banerów i stopki są ustawione (R.4.2).

    styl2.css CSS zmienione: 7 linii 
    :root {
    --page-bg: Linen;
    --text: #222;
    --dark: black;
    --light: white;
    --link: #aaa;
}

#container {
    font-family: Helvetica, sans-serif;
    background-color: var(--page-bg);
    color: var(--text);
    margin: auto;
    width: 90%;
    display: grid;
    grid-template-columns: 50% 50%;
}

.banner {
    background-color: var(--dark);
    color: var(--light);
    height: 100px;
}

main,
footer {
    grid-column: 1 / -1;
}

main {
    padding: 20px;
}

footer {
    background-color: var(--dark);
    color: var(--light);
    padding: 20px;
    text-align: center;
}
    Podgląd strony po tym kroku (kolory.html)

  33. Krok 33: Tabela: marginesy zewnętrzne

    ok. 1 min
    Polecenie z arkusza

    Dla selektora tabeli: marginesy zewnętrzne 40 px

    Selektor znacznika table - arkusz wymaga selektorów znaczników dla tabeli, komórki i elementu listy, klasy klucz nie uzna.

    styl2.css CSS zmienione: 4 linie 
    :root {
    --page-bg: Linen;
    --text: #222;
    --dark: black;
    --light: white;
    --link: #aaa;
}

#container {
    font-family: Helvetica, sans-serif;
    background-color: var(--page-bg);
    color: var(--text);
    margin: auto;
    width: 90%;
    display: grid;
    grid-template-columns: 50% 50%;
}

.banner {
    background-color: var(--dark);
    color: var(--light);
    height: 100px;
}

main,
footer {
    grid-column: 1 / -1;
}

main {
    padding: 20px;
}

footer {
    background-color: var(--dark);
    color: var(--light);
    padding: 20px;
    text-align: center;
}

table {
    margin: 40px;
}
    Podgląd strony po tym kroku (kolory.html)

  34. Krok 34: Komórki tabeli: marginesy, wyśrodkowanie, pogrubienie

    Kryteria:

    R.4.5 Ustawiono wyrównanie tekstu do środka dla stopki i selektora td

    ok. 1 min
    Polecenie z arkusza

    Dla selektora komórki tabeli: marginesy wewnętrzne 30 px, wyrównanie tekstu do środka, czcionka pogrubiona

    Selektor td. Wyśrodkowanie stopki i komórek jest gotowe (R.4.5).

    styl2.css CSS zmienione: 6 linii 
    :root {
    --page-bg: Linen;
    --text: #222;
    --dark: black;
    --light: white;
    --link: #aaa;
}

#container {
    font-family: Helvetica, sans-serif;
    background-color: var(--page-bg);
    color: var(--text);
    margin: auto;
    width: 90%;
    display: grid;
    grid-template-columns: 50% 50%;
}

.banner {
    background-color: var(--dark);
    color: var(--light);
    height: 100px;
}

main,
footer {
    grid-column: 1 / -1;
}

main {
    padding: 20px;
}

footer {
    background-color: var(--dark);
    color: var(--light);
    padding: 20px;
    text-align: center;
}

table {
    margin: 40px;
}

td {
    padding: 30px;
    text-align: center;
    font-weight: bold;
}
    Podgląd strony po tym kroku (kolory.html)

  35. Krok 35: Odnośniki: szary kolor bez podkreślenia

    Kryteria: ,

    R.4.3 Ustawiono kolor czcionki #222 dla kontenera całej strony lub body, biały dla obu banerów i stopki, #aaa dla odnośnika

    R.4.7 Ustawiono atrybuty czcionki: pogrubienie dla komórki tabeli, bez podkreślenia dla odnośnika

    ok. 1 min
    Polecenie z arkusza

    Dla odnośnika: kolor czcionki #aaa bez podkreślenia

    text-decoration: none zdejmuje podkreślenie. Kolory tekstu (R.4.3) oraz pogrubienie komórek i brak podkreślenia (R.4.7) są ustawione.

    styl2.css CSS zmienione: 5 linii 
    :root {
    --page-bg: Linen;
    --text: #222;
    --dark: black;
    --light: white;
    --link: #aaa;
}

#container {
    font-family: Helvetica, sans-serif;
    background-color: var(--page-bg);
    color: var(--text);
    margin: auto;
    width: 90%;
    display: grid;
    grid-template-columns: 50% 50%;
}

.banner {
    background-color: var(--dark);
    color: var(--light);
    height: 100px;
}

main,
footer {
    grid-column: 1 / -1;
}

main {
    padding: 20px;
}

footer {
    background-color: var(--dark);
    color: var(--light);
    padding: 20px;
    text-align: center;
}

table {
    margin: 40px;
}

td {
    padding: 30px;
    text-align: center;
    font-weight: bold;
}

a {
    color: var(--link);
    text-decoration: none;
}
    Podgląd strony po tym kroku (kolory.html)

  36. Krok 36: Odnośnik pod kursorem i z klawiatury: biały

    Kryteria:

    R.4.10 Gdy kursor znajdzie się na dowolnym odnośniku kolor czcionki zmienia się na biały (za pomocą pseudoklasy :hover)

    ok. 1 min
    Polecenie z arkusza

    W momencie, gdy kursor znajdzie się na odnośniku kolor czcionki tego odnośnika zmienia się na biały

    :hover - kursor nad odnośnikiem (R.4.10). Ten sam wygląd dostaje :focus-visible - odnośnik wybrany klawiszem Tab; bez myszy też widać, gdzie się jest w menu.

    styl2.css CSS zmienione: 5 linii 
    :root {
    --page-bg: Linen;
    --text: #222;
    --dark: black;
    --light: white;
    --link: #aaa;
}

#container {
    font-family: Helvetica, sans-serif;
    background-color: var(--page-bg);
    color: var(--text);
    margin: auto;
    width: 90%;
    display: grid;
    grid-template-columns: 50% 50%;
}

.banner {
    background-color: var(--dark);
    color: var(--light);
    height: 100px;
}

main,
footer {
    grid-column: 1 / -1;
}

main {
    padding: 20px;
}

footer {
    background-color: var(--dark);
    color: var(--light);
    padding: 20px;
    text-align: center;
}

table {
    margin: 40px;
}

td {
    padding: 30px;
    text-align: center;
    font-weight: bold;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--light);
}
    Podgląd strony po tym kroku (kolory.html)

  37. Krok 37: Elementy listy: kontener liniowo-blokowy z dolną linią

    Kryteria: , ,

    R.4.6 Ustawiono marginesy zewnętrzne (margin) auto dla kontenera całej strony lub body, 40px dla selektora table i 10px dla selektora li oraz marginesy wewnętrzne (padding) 20px dla bloku głównego i stopki, 30px dla komórki tabeli i 5px dla selektora li

    R.4.8 Ustawiono dolną linię obramowania (border-bottom) 1px solid white dla elementu listy

    R.4.9 Dla elementu listy ustawiono własność display: inline-block

    ok. 2 min
    Polecenie z arkusza

    Dla selektora elementu listy: sposobem wyświetlenia jest kontener liniowo-blokowy (patrz Tabela 3), marginesy wewnętrzne 5 px, zewnętrzne 10 px, dolna linia obramowania ciągła o szerokości 1 px i kolorze białym

    Selektor li: display: inline-block (R.4.9) - elementy obok siebie, ale z marginesami i obramowaniem jak bloki; marginesy z arkusza są komplet (R.4.6); border-bottom - biała linia pod każdym odnośnikiem (R.4.8).

    styl2.css CSS zmienione: 7 linii 
    :root {
    --page-bg: Linen;
    --text: #222;
    --dark: black;
    --light: white;
    --link: #aaa;
}

#container {
    font-family: Helvetica, sans-serif;
    background-color: var(--page-bg);
    color: var(--text);
    margin: auto;
    width: 90%;
    display: grid;
    grid-template-columns: 50% 50%;
}

.banner {
    background-color: var(--dark);
    color: var(--light);
    height: 100px;
}

main,
footer {
    grid-column: 1 / -1;
}

main {
    padding: 20px;
}

footer {
    background-color: var(--dark);
    color: var(--light);
    padding: 20px;
    text-align: center;
}

table {
    margin: 40px;
}

td {
    padding: 30px;
    text-align: center;
    font-weight: bold;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--light);
}

li {
    display: inline-block;
    padding: 5px;
    margin: 10px;
    border-bottom: 1px solid var(--light);
}
    Podgląd strony po tym kroku (kolory.html)

  38. Krok 38: Wiersz z polem i przyciskiem

    ok. 1 min

    Dodatek spoza arkusza: blok .controls jako flex z odstępem gap: 5px - pole i przycisk stoją w jednym wierszu pod obrazem, w równym odstępie, bez <br> i bez spacji w HTML-u. Klucz tego nie ocenia.

    styl2.css CSS zmienione: 6 linii 
    :root {
    --page-bg: Linen;
    --text: #222;
    --dark: black;
    --light: white;
    --link: #aaa;
}

#container {
    font-family: Helvetica, sans-serif;
    background-color: var(--page-bg);
    color: var(--text);
    margin: auto;
    width: 90%;
    display: grid;
    grid-template-columns: 50% 50%;
}

.banner {
    background-color: var(--dark);
    color: var(--light);
    height: 100px;
}

main,
footer {
    grid-column: 1 / -1;
}

main {
    padding: 20px;
}

footer {
    background-color: var(--dark);
    color: var(--light);
    padding: 20px;
    text-align: center;
}

table {
    margin: 40px;
}

td {
    padding: 30px;
    text-align: center;
    font-weight: bold;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--light);
}

li {
    display: inline-block;
    padding: 5px;
    margin: 10px;
    border-bottom: 1px solid var(--light);
}

.controls {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}
    Podgląd strony po tym kroku (kolory.html)

  39. Etap 4: Skrypt JavaScript

    Kroki 39-43 · po tym etapie masz 39 z 39 kryteriów (pkt)

    Krok 39: Plik skrypt.js podpięty z atrybutem defer

    Kryteria:

    R.5.1 Skrypt zapisano językiem JavaScript i zawarto w nim przynajmniej jedną instrukcję języka

    ok. 3 min
    Polecenie z arkusza

    Skrypt: Napisany w języku JavaScript

    Skrypt w osobnym pliku skrypt.js, podpięty w <head> znacznikiem <script src="skrypt.js" defer>. Atrybut defer każe pobrać plik od razu, ale wykonać go dopiero po wczytaniu całego HTML-a - pole, przycisk i tabela już wtedy istnieją, choć znacznik stoi na górze strony. Arkusz nie mówi, gdzie ma być skrypt, a osobny plik oddziela zachowanie strony od jej treści.

    W pliku:

    • 'use strict' - tryb ścisły: literówka w nazwie zmiennej daje błąd zamiast cicho tworzyć nową zmienną globalną,
    • const - stałe na elementy strony, pobrane raz (pole, przycisk, paragraf komunikatu),
    • document.querySelectorAll('td') - wszystkie komórki tabeli, w kolejności z kodu (R.5.1).
    kolory.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
    <script src="skrypt.js" defer></script>
</head>
<body>
    <div id="container">
        <header class="banner">
            <h1>Pomocnik CSS</h1>
        </header>
        <nav class="banner">
            <ul>
                <li><a href="kolory.html" aria-current="page">Kolory</a></li>
                <li><a href="czcionki.html">Czcionki</a></li>
                <li><a href="style.html">Style CSS</a></li>
                <li><a href="https://www.w3schools.com/css/" target="_blank" rel="noopener noreferrer">Pomoc</a></li>
            </ul>
        </nav>
        <main>
            <h2>Podaj składową H koloru w kodzie HSL</h2>
            <p>0 do 30 czerwienie, do 60 żółcie, do 150 zielenie, do 250 niebieskie, do 360 fiolet i purpura</p>
            <img src="kolory.jpg" alt="Przestrzeń barw HSL" width="500" height="73">
            <div class="controls">
                <input type="number" id="hue" min="0" max="360" step="1" placeholder="0 – 360" aria-label="Składowa H koloru">
                <button type="button" id="generate">Generuj paletę</button>
            </div>
            <p id="message" aria-live="polite"></p>
            <table>
                <tr>
                    <td colspan="4">Kolor główny</td>
                </tr>
                <tr>
                    <td>kolor 2</td>
                    <td>kolor 3</td>
                    <td>kolor 4</td>
                    <td>kolor 5</td>
                </tr>
            </table>
        </main>
        <footer>
            <p>Autor: Bartosz Bryniarski</p>
        </footer>
    </div>
</body>
</html>
    skrypt.js JavaScript nowy plik 
    'use strict';

const hueInput = document.getElementById('hue');
const generateButton = document.getElementById('generate');
const message = document.getElementById('message');
const cells = document.querySelectorAll('td');
    Podgląd strony po tym kroku (kolory.html)

  40. Krok 40: Funkcja generatePalette i słuchacz kliknięcia

    Kryteria: ,

    R.3.5 Dla przycisku zdefiniowano obsługę zdarzenia kliknięcia (atrybut onClick lub słuchacz zdarzenia click lub właściwość onclick obiektu DOM)

    R.5.2 Zapisano w skrypcie funkcję, która jest wywoływana po wciśnięciu przycisku

    ok. 2 min
    Polecenie z arkusza

    Składa się z funkcji wywoływanej po wciśnięciu przycisku

    Funkcja generatePalette, na razie pusta, i addEventListener('click', generatePalette) - przycisk wywoła ją przy każdym kliknięciu (R.3.5, R.5.2). Funkcję podajesz bez nawiasów: przekazujesz samą funkcję, a wywoła ją przeglądarka. W HTML-u nie ma atrybutu onclick - cały kod JavaScript jest w jednym pliku.

    Typowe błędy

    addEventListener('click', generatePalette()) z nawiasami wywołuje funkcję raz, przy wczytaniu strony, i przekazuje jej wynik (undefined) - kliknięcie nic nie robi.

    skrypt.js JavaScript zmienione: 5 linii 
    'use strict';

const hueInput = document.getElementById('hue');
const generateButton = document.getElementById('generate');
const message = document.getElementById('message');
const cells = document.querySelectorAll('td');

function generatePalette() {
}

generateButton.addEventListener('click', generatePalette);
    Podgląd strony po tym kroku (kolory.html)

  41. Krok 41: Pobranie i sprawdzenie wartości z pola

    Kryteria:

    R.5.3 Zapisano instrukcję pobierania wartości wpisanej w polu edycyjnym

    ok. 3 min
    Polecenie z arkusza

    Pobiera wartość wpisaną w polu edycyjnym

    • hueInput.value - wartość z pola (R.5.3), zawsze napis; Number() zamienia ją na liczbę,
    • warunek odrzuca pole puste, liczbę niecałkowitą (Number.isInteger) i spoza zakresu 0-360. Atrybut max="360" tego nie załatwia - blokuje tylko strzałki, a z klawiatury da się wpisać 500, które jako kąt barwy dałoby zieleń (500° = 140°),
    • przy złej wartości komunikat przez textContent (zwykły tekst, nigdy kod HTML) i return - funkcja kończy się, zanim zmieni kolory; przy dobrej komunikat znika.

    W podglądzie wpisz 500 i kliknij - pod polem pojawia się komunikat.

    skrypt.js JavaScript zmienione: 7 linii 
    'use strict';

const hueInput = document.getElementById('hue');
const generateButton = document.getElementById('generate');
const message = document.getElementById('message');
const cells = document.querySelectorAll('td');

function generatePalette() {
    const hue = Number(hueInput.value);

    if (hueInput.value === '' || !Number.isInteger(hue) || hue < 0 || hue > 360) {
        message.textContent = 'Wpisz liczbę całkowitą od 0 do 360.';
        return;
    }
    message.textContent = '';
}

generateButton.addEventListener('click', generatePalette);
    Podgląd strony po tym kroku (kolory.html)

  42. Krok 42: Kolor główny: nasycenie 100%

    Kryteria: ,

    R.5.4 W kodzie jest ustalany przynajmniej jeden kolor w postaci hsl(<wartość pobrana>, S, 50%) gdzie S przyjmuje jedną z wartości: 100%, 80%, 60%, 40% lub 20%

    R.5.5 Przynajmniej jeden kolor w formacie hsl jest widoczny w przeglądarce jako tło dowolnej komórki tabeli

    ok. 2 min
    Polecenie z arkusza

    Ustala tło w formacie HSL dla komórek tabeli. Składowa H odpowiada wartości pobranej z pola edycyjnego, wartość L jest stała i wynosi zawsze 50%, wartość S jest różna dla poszczególnych komórek tabeli i wynosi: dla pierwszego wiersza 100%

    cells[0] to komórka „Kolor główny”. Napis koloru powstaje z szablonu tekstowego - tekst w odwróconych apostrofach (backtick), a w nim ${hue} wstawia wartość zmiennej. Dla 200 wychodzi hsl(200, 100%, 50%) (R.5.4), widoczne jako tło komórki (R.5.5). Szablon czyta się łatwiej niż sklejanie "hsl(" + h + ", 100%, 50%)".

    skrypt.js JavaScript zmienione: 1 linia 
    'use strict';

const hueInput = document.getElementById('hue');
const generateButton = document.getElementById('generate');
const message = document.getElementById('message');
const cells = document.querySelectorAll('td');

function generatePalette() {
    const hue = Number(hueInput.value);

    if (hueInput.value === '' || !Number.isInteger(hue) || hue < 0 || hue > 360) {
        message.textContent = 'Wpisz liczbę całkowitą od 0 do 360.';
        return;
    }
    message.textContent = '';
    cells[0].style.backgroundColor = `hsl(${hue}, 100%, 50%)`;
}

generateButton.addEventListener('click', generatePalette);
    Podgląd strony po tym kroku (kolory.html)

  43. Krok 43: Wszystkie komórki: tablica nasyceń i pętla

    Kryteria:

    R.5.6 Skrypt wyświetla w przeglądarce kolory tła komórek tabeli: pierwszy wiersz: hsl(<pob.wartość>, 100%, 50%) drugi wiersz, kolejno: hsl(<pob.wartość>, 80%, 50%), hsl(<pob.wartość>, 60%, 50%), hsl(<pob.wartość>, 40%, 50%), hsl(<pob.wartość>, 20%, 50%)

    ok. 3 min
    Polecenie z arkusza

    dla drugiego wiersza, kolejno w czterech komórkach: 80%, 60%, 40% i 20%

    Pięć nasyceń z arkusza w tablicy SATURATIONS na górze pliku, a zamiast pięciu prawie identycznych linii - jedna pętla forEach: dla każdej komórki dostaje ją samą (cell) i jej numer (index), a nasycenie bierze z tablicy pod tym samym numerem. Zmiana palety (np. sześć odcieni) to zmiana tablicy, nie kodu (R.5.6).

    Sprawdzone w Chrome: po wpisaniu 200 komórki mają kolory hsl(200, 100%, 50%) … hsl(200, 20%, 50%) - niebieskie, jak na obrazie 2; po wpisaniu 500 albo 120.5 paleta zostaje, a pod polem stoi komunikat.

    skrypt.js JavaScript zmienione: 6 linii 
    'use strict';

const hueInput = document.getElementById('hue');
const generateButton = document.getElementById('generate');
const message = document.getElementById('message');
const cells = document.querySelectorAll('td');

// nasycenie S kolejnych komórek: kolor główny, potem kolory 2-5
const SATURATIONS = [100, 80, 60, 40, 20];

function generatePalette() {
    const hue = Number(hueInput.value);

    if (hueInput.value === '' || !Number.isInteger(hue) || hue < 0 || hue > 360) {
        message.textContent = 'Wpisz liczbę całkowitą od 0 do 360.';
        return;
    }
    message.textContent = '';
    cells.forEach((cell, index) => {
        cell.style.backgroundColor = `hsl(${hue}, ${SATURATIONS[index]}%, 50%)`;
    });
}

generateButton.addEventListener('click', generatePalette);
    Podgląd strony po tym kroku (kolory.html)

  44. Etap 5: Porównanie z wersją podstawową

    Krok 44 · po tym etapie masz 39 z 39 kryteriów (pkt)

    Krok 44: Co jest inaczej i którą wersję wybrać na egzaminie

    ok. 3 min

    Obie wersje dają komplet 39 punktów. Różnice:

    wersja podstawowawersja nowoczesna
    układfloat: left banerów, clear bloku głównegosiatka kontenera, grid-column: 1 / -1
    szerokość 50% banerówwidthgrid-template-columns
    bloki baneradwa <section><header> i <nav>
    kolorywpisane w każdej regulezmienne w :root
    skrypt<script> na końcu <body>plik skrypt.js z defer
    kliknięcieatrybut onclick w HTML-uaddEventListener('click', …)
    komórkigetElementsByTagName, pięć liniiquerySelectorAll, tablica i forEach
    napis kolorusklejanie +szablon ${hue}
    złe danedopisane w „Dobrych praktykach”sprawdzane od początku
    dostępnośćbrakaria-label, aria-live, aria-current, :focus-visible

    Na egzaminie wersja podstawowa trzyma się funkcji i zdarzeń z tabeli 1 arkusza i łatwiej ją napisać bez dokumentacji. Nowoczesna jest łatwiejsza do rozbudowy (nowy kolor to jedna liczba w tablicy) i nie pokazuje cicho złej palety - a klucz przyjmuje obie.

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

  45. Etap 6: Oddanie pracy

    Krok 45 · po tym etapie masz 39 z 39 kryteriów (pkt)

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

    ok. 5 min
    Polecenie z arkusza

    UWAGA: po zakończeniu pracy utwórz w folderze z numerem, którym został podpisany arkusz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Nagraj płytę z rezultatami pracy.

    W przeglądarka.txt nazwa przeglądarki. W folderze: czcionki.html, import.jpg, kolory.html, kolory.jpg, kw1.png - kw4.png, kwerendy.txt, przeglądarka.txt, skrypt.js, styl2.css i style.html (arkusz dopuszcza „ewentualnie inne przygotowane pliki”). Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.

    przeglądarka.txt Tekst nowy plik 
    Google Chrome

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

Podgląd

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: . 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.

Potwierdzenie

Informacja