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

Rozwiązanie krok po kroku: Pomocnik CSS z paletą HSL (Wersja podstawowa)

Aplikacja internetowa „Pomocnik CSS”: baza sklep zaimportowana z pliku sklep.sql i cztery zapytania (klienci z dwóch miast, produkty droższe niż 500 zł, średnia cena w kategoriach z AVG i GROUP BY, zamówienia klienta nr 2 ze złączeniem tabel). Do tego grafika przestrzeni barw wykadrowana i rozciągnięta do 500 px, strona kolory.html z dwoma blokami banera obok siebie, menu z listy odnośników, polem liczbowym i tabelą 2 × 4, arkusz styl2.css oraz skrypt JavaScript, który po kliknięciu „Generuj paletę” koloruje komórki tabeli odcieniami hsl().

To arkusz EE.09 z czerwca 2022 - kwalifikacji formuły 2017, którą zastąpiła INF.03. W tym zadaniu nie ma PHP: baza jest osobną częścią, a strona działa w samej przeglądarce. Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypt jest napisany najprościej, funkcjami z tabeli 1 arkusza (getElementById, getElementsByTagName, style, atrybut onclick), a na końcu zabezpieczony przed złymi danymi z pola.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, JS w pliku)” jest drugi sposób rozwiązania tego samego arkusza: siatka CSS, zmienne CSS, <nav>, skrypt w osobnym pliku z addEventListener i tablicą nasyceń - obie wersje są zgodne z kluczem.

Baza i grafika pochodzą z oryginalnego archiwum CKE zad2.zip (załącznik do pobrania na stronie arkusza, hasło w treści zadania). Zapytania i zrzuty są policzone na MariaDB 10.4 - tej samej, która jest w XAMPP, a skrypt był uruchomiony w Chrome z wartością 200 z obrazu 2.

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 - można stracić 9 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia.

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.

    Na pulpicie tworzysz folder nazwany numerem PESEL - w tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora, Bartosz Bryniarski. Archiwum zad2.zip rozpakowujesz do tego folderu z hasłem Css_$_Css (wielkość liter ma znaczenie). W środku są dwa pliki: sklep.sql (tabele z danymi) i kolory.jpg (grafika do obróbki).

    Do tego folderu trafia wszystko, co powstanie: zrzuty, kwerendy.txt, grafika i trzy pliki HTML. Strona nie ma kodu PHP, więc otwierasz ją wprost z dysku, dwuklikiem w kolory.html - serwer Apache potrzebny jest tylko dla phpMyAdmin.

  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)

    W XAMPP Control Panel Start przy Apache i MySQL, potem http://localhost/phpmyadmin. Nowa w lewym panelu, nazwa sklep, porównywanie napisów utf8_unicode_ci, Utwórz. Porównywanie decyduje o zapisie i sortowaniu polskich liter - w danych są np. „Górski” i „Płyty_główne”.

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

    Zaznacz bazę sklep, karta Import, Wybierz plik → sklep.sql, Wykonaj. Plik tworzy cztery tabele z obrazu 1 i wypełnia je danymi: kategorie (4 rekordy), klient (7), produkty (11) i zamowienia (12).

    Zielony komunikat „Import zakończył się sukcesem” i lista tabel w lewym panelu to „elementy wskazujące na poprawny import”. Zrzut całego ekranu z paskiem zadań zapisujesz jako import.jpg.

    Typowe błędy

    Zrzut importu ma format JPEG, a zrzuty zapytań - PNG. Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany.

    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

    Zaznacz bazę sklep i otwórz kartę SQL:

    • SELECT imie, nazwisko, miasto - tylko trzy kolumny, o które prosi arkusz (kolumny w bazie są bez polskich liter, jak na obrazie 1),
    • FROM klient,
    • WHERE miasto = 'Legionowo' OR miasto = 'Warszawa' - OR (lub): wiersz przechodzi, gdy spełniony jest którykolwiek z warunków. Krótszy zapis tego samego to WHERE miasto IN ('Legionowo', 'Warszawa').

    Wynik: 4 klientów - Piotr Górski z Legionowa, Adam Binder i Robert Halicki z Warszawy, Alicja Warkowska z Legionowa. Zapytanie kopiujesz do nowego pliku kwerendy.txt (R.1.2), a cały ekran zapisujesz jako kw1.png.

    Typowe błędy

    WHERE miasto = 'Legionowo' AND miasto = 'Warszawa' zwraca zero wierszy - klient nie mieszka w dwóch miastach naraz.

    kwerendy.txt Tekst nowy plik 
    -- Zapytanie 1
SELECT imie, nazwisko, miasto
FROM klient
WHERE miasto = 'Legionowo' OR miasto = '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ł

    • SELECT nazwa - jedna kolumna,
    • FROM produkty,
    • WHERE cena_brutto > 500 - „wyższej od” to ostra nierówność >; liczby w SQL pisze się bez apostrofów i bez „zł”.

    Wynik: 5 produktów - Corei5-7400, Goodram, HyperX, Patriot i Kingston SSD. Zrzut: kw2.png.

    Typowe błędy

    >= zamiast > dołożyłby produkty kosztujące dokładnie 500 zł - tu takiego nie ma, ale zapytanie przestaje odpowiadać poleceniu.

    kwerendy.txt Tekst zmienione: 5 linii 
    -- Zapytanie 1
SELECT imie, nazwisko, miasto
FROM klient
WHERE miasto = 'Legionowo' OR miasto = '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. 4 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ą.

    • SELECT nazwa_kategorii, AVG(cena_brutto) - AVG to funkcja agregująca: liczy średnią arytmetyczną z wielu wierszy,
    • FROM kategorie JOIN produkty ON kategorie.id_kat = produkty.id_kat - relacja z obrazu 1: produkt wskazuje swoją kategorię polem id_kat. Nazwa tabeli przed kropką jest konieczna, bo kolumna id_kat jest w obu tabelach,
    • GROUP BY nazwa_kategorii - dzieli produkty na grupy według kategorii; bez tej klauzuli AVG policzyłaby jedną średnią ze wszystkich produktów.

    Wynik: 4 kategorie - Dyski 376,67, Pamięci 602,38, Płyty_główne 365 i Procesory 520.100006 (kolejność alfabetyczna, bo grupy powstają po nazwie). Klucz przyjmuje dowolną liczbę miejsc po przecinku. Końcówka …006 przy procesorach bierze się z typu kolumny: cena_brutto to float, a liczby zmiennoprzecinkowe nie zapisują dokładnie części ułamków dziesiętnych. Zrzut: kw3.png.

    Typowe błędy

    GROUP BY id_kat bez nazwy tabeli kończy się błędem #1052 „Column id_kat in group statement is ambiguous”.

    kwerendy.txt Tekst zmienione: 5 linii 
    -- Zapytanie 1
SELECT imie, nazwisko, miasto
FROM klient
WHERE miasto = 'Legionowo' OR miasto = '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. 3 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ą

    • SELECT id_zam, ilosc, wartosc, nazwa - trzy kolumny z zamowienia i nazwa z produkty,
    • FROM zamowienia JOIN produkty ON zamowienia.id_prod = produkty.id_prod - relacja zamówienie → produkt,
    • WHERE id_klient = 2 - zamówienia klienta nr 2. Tabeli klient nie trzeba dołączać: numer klienta jest już w tabeli zamowienia.

    Wynik: 3 zamówienia - 3 (Corei5-7400), 4 (Gigabyte) i 11 (Patriot), jak w kluczu. Zrzut: kw4.png; plik kwerendy.txt ma komplet czterech zapytań.

    kwerendy.txt Tekst zmienione: 5 linii 
    -- Zapytanie 1
SELECT imie, nazwisko, miasto
FROM klient
WHERE miasto = 'Legionowo' OR miasto = '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-28 · 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

    Oryginał ma 317 × 109 px: kolorowe pole otacza szare tło z osiami „L” i „H” oraz podpisami 0°, 120°, 240°, 360°. Zostać ma samo pole barw - od bieli u góry do czerni u dołu, od czerwieni do czerwieni w poziomie.

    W GIMP-ie narzędzie Kadrowanie (Shift + C), prostokąt dokładnie na krawędziach pola i Enter. Przy powiększeniu 400% widać, gdzie kończy się kolor, a zaczyna szare tło - w tym pliku pole ma 262 × 73 px. Lepiej uciąć 1 px koloru niż zostawić szary pasek przy krawędzi.

    Typowe błędy

    Szare paski albo kawałki podpisów przy krawędziach to grafika „niewykadrowana” - kryterium R.2.1 wymaga widocznej jedynie przestrzeni barw.

    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)

    Obraz → Skaluj obraz, rozpięty łańcuch przy szerokości i wysokości - tylko wtedy można zmienić jeden wymiar bez drugiego. Szerokość 500 px, wysokość zostaje 73 px. Barwy rozciągają się w poziomie, bo z 262 px robi się 500 px - i tego oczekuje klucz („barwy są rozciągnięte względem pierwotnego obrazu”).

    Zapis pod tą samą nazwą: Plik → Nadpisz kolory.jpg (albo Eksportuj jako kolory.jpg). Wynik 73 px mieści się w tolerancji klucza 75 ± 10 px (R.2.1).

    Typowe błędy

    Przy zamkniętym łańcuchu wysokość urośnie razem z szerokością (do ok. 140 px) - grafika jest wtedy przeskalowana proporcjonalnie, a arkusz każe „bez zachowania proporcji”.

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

  10. Krok 10: Plik kolory.html

    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

    W edytorze tworzysz plik kolory.html - główną stronę aplikacji. Szkielet: <html>, nagłówek dokumentu <head> i treść <body>. Dwie pozostałe strony powstaną przy menu.

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

  11. Krok 11: Deklaracja HTML5

    ok. 1 min
    Polecenie z arkusza

    Zapisana w języku HTML5

    <!DOCTYPE html> w pierwszej linii - przeglądarka pracuje wtedy w trybie standardów HTML5, a nie w trybie zgodności ze starymi stronami.

    kolory.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  12. Krok 12: 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>, a plik zapisany w UTF-8 - bez tego „składową”, „żółcie” i „paletę” zastąpią krzaki.

    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)

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

    Atrybut 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)

  14. Krok 14: Tytuł strony

    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> w <head> - napis na karcie przeglądarki (R.2.4). Ten sam tekst będzie w nagłówku banera, ale to dwa różne miejsca: tytuł karty i treść strony.

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

  15. Krok 15: 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"> - nazwa z cyfrą 2. Całe formatowanie strony pochodzi z tego pliku; kolory komórek tabeli ustawi skrypt, i klucz to dopuszcza (R.3.7).

    Typowe błędy

    Klucz odbiera R.3.7, gdy choć jeden selektor nie trafia w swój blok (np. kropka zamiast #).

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

  16. Krok 16: 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"> obejmuje całą treść strony - CSS nada mu szerokość 90% i wyśrodkuje go. W środku bloki w kolejności z obrazu 2 (R.2.5):

    • dwa bloki banera jako <section> z wspólną klasą banner - arkusz podaje dla nich jeden zestaw stylów („wspólne dla obu bloków banera”), więc jedna klasa to jedna reguła CSS,
    • blok główny jako <main> - znacznik głównej treści strony,
    • stopka <footer>.

    Nazwy po angielsku, bo arkusz ich nie narzuca. Bloki banera stoją na razie jeden pod drugim - obok siebie ustawi je CSS.

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

  17. Krok 17: 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 pierwszej sekcji. Kryterium R.2.6 sprawdza go razem z nagłówkiem <h2> i paragrafem w bloku głównym.

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

  18. Krok 18: 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 punktowana to <ul>, każdy jej element - <li>. „Elementy, które jednocześnie są odnośnikami” to odnośnik <a> wewnątrz każdego <li>. Pierwszy prowadzi do bieżącej strony, kolory.html - ścieżka względna, bo plik leży w tym samym folderze (R.3.2).

    Typowe błędy

    <a> bezpośrednio w <ul>, bez <li>, to błąd składni HTML - lista może zawierać tylko elementy <li>.

    kolory.html HTML zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <section class="banner">
            <h1>Pomocnik CSS</h1>
        </section>
        <section class="banner">
            <ul>
                <li><a href="kolory.html">Kolory</a></li>
            </ul>
        </section>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  19. Krok 19: 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 nowe pliki w folderze zdającego, każdy z jedną linią tekstu: „strona w trakcie budowy”. Arkusz mówi „jedynie tekst”, więc bez szkieletu HTML - przeglądarka i tak wyświetli taki plik jako stronę z tym zdaniem. Wszystkie pozostałe wymagania (kodowanie, tytuł, style) dotyczą tylko kolory.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 18.

  20. Krok 20: 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 kolejne elementy listy z odnośnikami do plików z poprzedniego kroku (R.3.3). Napis „Style CSS” to treść odnośnika, a style.html - nazwa pliku: różnią się i tak ma być.

    kolory.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <section class="banner">
            <h1>Pomocnik CSS</h1>
        </section>
        <section class="banner">
            <ul>
                <li><a href="kolory.html">Kolory</a></li>
                <li><a href="czcionki.html">Czcionki</a></li>
                <li><a href="style.html">Style CSS</a></li>
            </ul>
        </section>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  21. Krok 21: 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 z https:// i atrybut target="_blank" - otwarcie w nowej karcie (R.3.4). Lista ma komplet czterech elementów (R.2.7). Podgląd: cztery odnośniki jeden pod drugim, z kropkami listy - w poziomie ułoży je CSS.

    Typowe błędy

    target="_new" też otwiera nową kartę, ale zawsze tę samą (nazwaną „_new”) - poprawna wartość to _blank.

    kolory.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <section class="banner">
            <h1>Pomocnik CSS</h1>
        </section>
        <section class="banner">
            <ul>
                <li><a href="kolory.html">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">Pomoc</a></li>
            </ul>
        </section>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  22. Krok 22: 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 bloku głównym. HSL to zapis koloru trzema liczbami: H (hue, odcień, kąt 0-360° na kole barw), S (saturation, nasycenie w %) i L (lightness, jasność w %).

    kolory.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <section class="banner">
            <h1>Pomocnik CSS</h1>
        </section>
        <section class="banner">
            <ul>
                <li><a href="kolory.html">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">Pomoc</a></li>
            </ul>
        </section>
        <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)

  23. Krok 23: 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> z tekstem bez cudzysłowów. 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">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <section class="banner">
            <h1>Pomocnik CSS</h1>
        </section>
        <section class="banner">
            <ul>
                <li><a href="kolory.html">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">Pomoc</a></li>
            </ul>
        </section>
        <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)

  24. Krok 24: 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 grafiką przygotowaną wcześniej (500 px szerokości) i tekstem alternatywnym (R.2.8). Na obrazie poziomo biegnie odcień H od 0 do 360, w pionie jasność - dlatego pomaga dobrać liczbę do pola poniżej.

    kolory.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <section class="banner">
            <h1>Pomocnik CSS</h1>
        </section>
        <section class="banner">
            <ul>
                <li><a href="kolory.html">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">Pomoc</a></li>
            </ul>
        </section>
        <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">
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  25. Krok 25: 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" - pole liczbowe: ma strzałki do zmiany wartości i nie przyjmuje liter,
    • max="360" - największa wartość, do której dojdą strzałki,
    • placeholder="0 – 360" - szara podpowiedź widoczna, dopóki pole jest puste (R.3.6),
    • id="hue" - identyfikator, po którym skrypt odczyta wartość.

    <br> przenosi pole pod obraz, jak na obrazie 2.

    Typowe błędy

    max ogranicza strzałki i sprawdzanie w formularzach, ale nie blokuje wpisania z klawiatury liczby 500 - zajmie się tym etap „Dobre praktyki”.

    kolory.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <section class="banner">
            <h1>Pomocnik CSS</h1>
        </section>
        <section class="banner">
            <ul>
                <li><a href="kolory.html">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">Pomoc</a></li>
            </ul>
        </section>
        <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">
            <br>
            <input type="number" id="hue" max="360" placeholder="0 – 360">
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  26. Krok 26: 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> z napisem z arkusza, w tej samej linii co pole. Pole i przycisk są w bloku głównym (R.2.10); obsługę kliknięcia przycisk dostanie razem ze skryptem.

    kolory.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <section class="banner">
            <h1>Pomocnik CSS</h1>
        </section>
        <section class="banner">
            <ul>
                <li><a href="kolory.html">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">Pomoc</a></li>
            </ul>
        </section>
        <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">
            <br>
            <input type="number" id="hue" max="360" placeholder="0 – 360">
            <button>Generuj paletę</button>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  27. Krok 27: Tabela 4 × 2 z połączonym pierwszym wierszem

    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

    <table> z dwoma wierszami <tr>:

    • pierwszy wiersz ma jedną komórkę <td> z atrybutem colspan="4" - komórka rozciąga się na cztery kolumny, czyli „wszystkie komórki połączone”, z napisem „Kolor główny”,
    • drugi wiersz ma cztery zwykłe komórki: „kolor 2” - „kolor 5”.

    Razem pięć komórek - tyle kolorów wygeneruje skrypt (R.2.9). Podgląd: tabela w stanie początkowym, jeszcze bez tła - jak na obrazie 4.

    Typowe błędy

    Cztery komórki w pierwszym wierszu z samym napisem w jednej z nich to nie jest połączenie komórek - klucz wymaga colspan.

    kolory.html HTML zmienione: 11 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <section class="banner">
            <h1>Pomocnik CSS</h1>
        </section>
        <section class="banner">
            <ul>
                <li><a href="kolory.html">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">Pomoc</a></li>
            </ul>
        </section>
        <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">
            <br>
            <input type="number" id="hue" max="360" placeholder="0 – 360">
            <button>Generuj paletę</button>
            <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)

  28. Krok 28: Stopka: autor

    ok. 1 min
    Polecenie z arkusza

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

    Paragraf <p> w stopce. Na egzaminie po dwukropku wpisujesz swój numer PESEL; w tym rozwiązaniu w jego miejscu stoi Bartosz Bryniarski.

    kolory.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <section class="banner">
            <h1>Pomocnik CSS</h1>
        </section>
        <section class="banner">
            <ul>
                <li><a href="kolory.html">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">Pomoc</a></li>
            </ul>
        </section>
        <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">
            <br>
            <input type="number" id="hue" max="360" placeholder="0 – 360">
            <button>Generuj paletę</button>
            <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)

  29. Etap 3: Styl CSS

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

    Krok 29: Plik styl2.css: kontener całej 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%

    Nowy plik styl2.css, pierwsza reguła dla #container (z krzyżykiem - w HTML-u jest id="container"):

    • font-family: Helvetica, sans-serif - Helvetica, a gdy jej brak (w Windows zwykle brak) - dowolny krój bezszeryfowy (R.4.1),
    • background-color: Linen - nazwa koloru z listy CSS (jasny beż), color: #222 - prawie czarny tekst,
    • margin: auto - „marginesy automatycznie wyliczane przez przeglądarkę”: wolne miejsce po bokach dzieli się po równo, więc kontener o szerokości 90% stoi na środku okna.
    Typowe błędy

    margin: auto wyśrodkowuje blok tylko wtedy, gdy ma on ustaloną szerokość - bez width: 90% kontener zajmuje całą szerokość i nie ma czego dzielić.

    styl2.css CSS nowy plik 
    #container {
    font-family: Helvetica, sans-serif;
    background-color: Linen;
    color: #222;
    margin: auto;
    width: 90%;
}
    Podgląd strony po tym kroku (kolory.html)

  30. Krok 30: Oba bloki banera: czarne tło, biały tekst, wymiary

    Kryteria:

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

    Selektor klasy .banner (z kropką) trafia w oba bloki naraz. Szerokość 50% liczy się od kontenera, więc dwa bloki razem zajmują całą jego szerokość. Wysokość banerów oraz szerokości kontenera i banerów są ustawione (R.4.4).

    styl2.css CSS zmienione: 6 linii 
    #container {
    font-family: Helvetica, sans-serif;
    background-color: Linen;
    color: #222;
    margin: auto;
    width: 90%;
}
.banner {
    background-color: black;
    color: white;
    width: 50%;
    height: 100px;
}
    Podgląd strony po tym kroku (kolory.html)

  31. Krok 31: Układ: banery obok siebie

    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)

    ok. 2 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

    Banery dostają float: left - pierwszy staje przy lewej krawędzi kontenera, drugi zaraz obok (50% + 50% = 100%). Blok główny z clear: both zaczyna się dopiero pod nimi, a stopka stoi pod blokiem głównym zwyczajnie (R.3.1).

    Druga reguła .banner w pliku nie zastępuje pierwszej - przeglądarka łączy deklaracje obu. Klucz przyjmuje też flex albo grid - pokazuje to wersja nowoczesna.

    Typowe błędy

    Bez clear: both blok główny wsuwa się pod pływające banery - jego tekst omija je z boku, a tło zaczyna się pod czarnym paskiem.

    styl2.css CSS zmienione: 6 linii 
    #container {
    font-family: Helvetica, sans-serif;
    background-color: Linen;
    color: #222;
    margin: auto;
    width: 90%;
}
.banner {
    background-color: black;
    color: white;
    width: 50%;
    height: 100px;
}
.banner {
    float: left;
}
main {
    clear: both;
}
    Podgląd strony po tym kroku (kolory.html)

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

    ok. 1 min
    Polecenie z arkusza

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

    Selektor znacznika main - na stronie jest jeden taki blok. padding: 20px odsuwa nagłówek, obraz i tabelę od krawędzi kontenera.

    styl2.css CSS zmienione: 3 linie 
    #container {
    font-family: Helvetica, sans-serif;
    background-color: Linen;
    color: #222;
    margin: auto;
    width: 90%;
}
.banner {
    background-color: black;
    color: white;
    width: 50%;
    height: 100px;
}
.banner {
    float: left;
}
main {
    clear: both;
}
main {
    padding: 20px;
}
    Podgląd strony po tym kroku (kolory.html)

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

    Cztery właściwości z arkusza. Kolory tła kontenera, banerów i stopki są ustawione (R.4.2).

    styl2.css CSS zmienione: 6 linii 
    #container {
    font-family: Helvetica, sans-serif;
    background-color: Linen;
    color: #222;
    margin: auto;
    width: 90%;
}
.banner {
    background-color: black;
    color: white;
    width: 50%;
    height: 100px;
}
.banner {
    float: left;
}
main {
    clear: both;
}
main {
    padding: 20px;
}
footer {
    background-color: black;
    color: white;
    padding: 20px;
    text-align: center;
}
    Podgląd strony po tym kroku (kolory.html)

  34. Krok 34: Tabela: marginesy zewnętrzne

    ok. 1 min
    Polecenie z arkusza

    Dla selektora tabeli: marginesy zewnętrzne 40 px

    Selektor znacznika table - arkusz wymaga dla tabeli, komórki i elementu listy wyłącznie selektorów znaczników („projekt późniejszej rozbudowy witryny”), a klucz nie uzna klasy. margin: 40px odsuwa tabelę od pola i przycisku - na obrazie 2 tabela stoi wyraźnie wcięta.

    styl2.css CSS zmienione: 3 linie 
    #container {
    font-family: Helvetica, sans-serif;
    background-color: Linen;
    color: #222;
    margin: auto;
    width: 90%;
}
.banner {
    background-color: black;
    color: white;
    width: 50%;
    height: 100px;
}
.banner {
    float: left;
}
main {
    clear: both;
}
main {
    padding: 20px;
}
footer {
    background-color: black;
    color: white;
    padding: 20px;
    text-align: center;
}
table {
    margin: 40px;
}
    Podgląd strony po tym kroku (kolory.html)

  35. Krok 35: 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. padding: 30px robi z komórek duże pola koloru, text-align: center stawia napisy na środku, font-weight: bold je pogrubia. Wyśrodkowanie stopki i komórek jest gotowe (R.4.5).

    styl2.css CSS zmienione: 5 linii 
    #container {
    font-family: Helvetica, sans-serif;
    background-color: Linen;
    color: #222;
    margin: auto;
    width: 90%;
}
.banner {
    background-color: black;
    color: white;
    width: 50%;
    height: 100px;
}
.banner {
    float: left;
}
main {
    clear: both;
}
main {
    padding: 20px;
}
footer {
    background-color: black;
    color: white;
    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)

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

    Selektor a. text-decoration: none zdejmuje domyślne podkreślenie odnośników. Kolory tekstu kontenera, banerów, stopki i odnośników (R.4.3) oraz pogrubienie komórek i brak podkreślenia (R.4.7) są ustawione.

    styl2.css CSS zmienione: 4 linie 
    #container {
    font-family: Helvetica, sans-serif;
    background-color: Linen;
    color: #222;
    margin: auto;
    width: 90%;
}
.banner {
    background-color: black;
    color: white;
    width: 50%;
    height: 100px;
}
.banner {
    float: left;
}
main {
    clear: both;
}
main {
    padding: 20px;
}
footer {
    background-color: black;
    color: white;
    padding: 20px;
    text-align: center;
}
table {
    margin: 40px;
}
td {
    padding: 30px;
    text-align: center;
    font-weight: bold;
}
a {
    color: #aaa;
    text-decoration: none;
}
    Podgląd strony po tym kroku (kolory.html)

  37. Krok 37: Odnośnik pod kursorem: 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

    Pseudoklasa :hover dopisana bez spacji do selektora a - działa, gdy kursor jest nad odnośnikiem (R.4.10).

    styl2.css CSS zmienione: 3 linie 
    #container {
    font-family: Helvetica, sans-serif;
    background-color: Linen;
    color: #222;
    margin: auto;
    width: 90%;
}
.banner {
    background-color: black;
    color: white;
    width: 50%;
    height: 100px;
}
.banner {
    float: left;
}
main {
    clear: both;
}
main {
    padding: 20px;
}
footer {
    background-color: black;
    color: white;
    padding: 20px;
    text-align: center;
}
table {
    margin: 40px;
}
td {
    padding: 30px;
    text-align: center;
    font-weight: bold;
}
a {
    color: #aaa;
    text-decoration: none;
}
a:hover {
    color: white;
}
    Podgląd strony po tym kroku (kolory.html)

  38. Krok 38: 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 - „kontener liniowo-blokowy” z tabeli 3: elementy listy stają obok siebie jak słowa w linii (inline), ale przyjmują marginesy i obramowanie jak bloki (block). Znikają też kropki listy, bo pokazuje je tylko display: list-item (R.4.9),
    • padding: 5px i margin: 10px - marginesy wewnętrzne i zewnętrzne; wszystkie marginesy z arkusza są ustawione (R.4.6),
    • border-bottom: 1px solid white - tylko dolna krawędź: grubość, styl (ciągła) i kolor (R.4.8).

    Podgląd: menu w jednej linii, każdy odnośnik podkreślony białą kreską - jak na obrazie 2.

    styl2.css CSS zmienione: 6 linii 
    #container {
    font-family: Helvetica, sans-serif;
    background-color: Linen;
    color: #222;
    margin: auto;
    width: 90%;
}
.banner {
    background-color: black;
    color: white;
    width: 50%;
    height: 100px;
}
.banner {
    float: left;
}
main {
    clear: both;
}
main {
    padding: 20px;
}
footer {
    background-color: black;
    color: white;
    padding: 20px;
    text-align: center;
}
table {
    margin: 40px;
}
td {
    padding: 30px;
    text-align: center;
    font-weight: bold;
}
a {
    color: #aaa;
    text-decoration: none;
}
a:hover {
    color: white;
}
li {
    display: inline-block;
    padding: 5px;
    margin: 10px;
    border-bottom: 1px solid white;
}
    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: Znacznik script i funkcja generatePalette

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

    Skrypt: Napisany w języku JavaScript. Składa się z funkcji wywoływanej po wciśnięciu przycisku

    Skrypt w znaczniku <script> na końcu <body>, za kontenerem - wtedy pole i tabela już istnieją, gdy przeglądarka czyta skrypt. W nim funkcja generatePalette (nazwa po angielsku, „generuj paletę”). Ciało jest na razie puste - dojdą do niego kolejne instrukcje (R.5.1).

    kolory.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <section class="banner">
            <h1>Pomocnik CSS</h1>
        </section>
        <section class="banner">
            <ul>
                <li><a href="kolory.html">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">Pomoc</a></li>
            </ul>
        </section>
        <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">
            <br>
            <input type="number" id="hue" max="360" placeholder="0 – 360">
            <button>Generuj paletę</button>
            <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>
    <script>
        function generatePalette() {
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  40. Krok 40: Wywołanie funkcji po kliknięciu przycisku

    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. 1 min
    Polecenie z arkusza

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

    Atrybut zdarzenia onclick z tabeli 1 arkusza: po kliknięciu przeglądarka wykona kod z atrybutu, czyli wywoła funkcję generatePalette() - z nawiasami (R.3.5, R.5.2).

    Typowe błędy

    onclick="generatePalette" bez nawiasów tylko wskazuje funkcję, ale jej nie wywołuje - kliknięcie nic nie robi.

    kolory.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <section class="banner">
            <h1>Pomocnik CSS</h1>
        </section>
        <section class="banner">
            <ul>
                <li><a href="kolory.html">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">Pomoc</a></li>
            </ul>
        </section>
        <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">
            <br>
            <input type="number" id="hue" max="360" placeholder="0 – 360">
            <button onclick="generatePalette()">Generuj paletę</button>
            <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>
    <script>
        function generatePalette() {
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  41. Krok 41: Pobranie wartości z pola

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Pobiera wartość wpisaną w polu edycyjnym

    document.getElementById("hue") zwraca pole po jego id, a właściwość .value - wpisaną wartość. Trafia ona do zmiennej h (składowa H koloru). Wartość pola jest zawsze napisem, np. "200", ale do sklejenia tekstu hsl(...) nic więcej nie trzeba (R.5.3).

    kolory.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <section class="banner">
            <h1>Pomocnik CSS</h1>
        </section>
        <section class="banner">
            <ul>
                <li><a href="kolory.html">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">Pomoc</a></li>
            </ul>
        </section>
        <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">
            <br>
            <input type="number" id="hue" max="360" placeholder="0 – 360">
            <button onclick="generatePalette()">Generuj paletę</button>
            <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>
    <script>
        function generatePalette() {
            var h = document.getElementById("hue").value;
        }
    </script>
</body>
</html>
    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. 3 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%

    • document.getElementsByTagName("td") - wszystkie komórki tabeli w kolejności z kodu: cells[0] to „Kolor główny”, cells[1] - cells[4] to „kolor 2” - „kolor 5”,
    • .style.backgroundColor - kolor tła komórki (zapis z tabeli 1: w JavaScripcie background-color pisze się backgroundColor),
    • "hsl(" + h + ", 100%, 50%)" - operator + skleja napisy: dla 200 powstaje hsl(200, 100%, 50%), dokładnie jak w tabeli 2 arkusza.

    Kolor w formacie hsl z wartością z pola (R.5.4) jest widoczny jako tło komórki (R.5.5). W podglądzie wpisz 200 i kliknij „Generuj paletę” - komórka „Kolor główny” staje się niebieska.

    Typowe błędy

    style.background-color jest w JavaScripcie odejmowaniem (style.background - color) - przeglądarka zgłosi błąd i nic się nie zmieni.

    kolory.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <section class="banner">
            <h1>Pomocnik CSS</h1>
        </section>
        <section class="banner">
            <ul>
                <li><a href="kolory.html">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">Pomoc</a></li>
            </ul>
        </section>
        <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">
            <br>
            <input type="number" id="hue" max="360" placeholder="0 – 360">
            <button onclick="generatePalette()">Generuj paletę</button>
            <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>
    <script>
        function generatePalette() {
            var h = document.getElementById("hue").value;
            var cells = document.getElementsByTagName("td");
            cells[0].style.backgroundColor = "hsl(" + h + ", 100%, 50%)";
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  43. Krok 43: Drugi wiersz: nasycenie 80%, 60%, 40% i 20%

    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. 2 min
    Polecenie z arkusza

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

    Cztery takie same linie dla komórek 1-4, różnią się tylko nasyceniem S. Odcień i jasność zostają, więc paleta to jeden kolor coraz bardziej „wyblakły” - przy 20% prawie szary (R.5.6).

    Sprawdzone w Chrome: po wpisaniu 200 i kliknięciu komórki mają kolory hsl(200, 100%, 50%), hsl(200, 80%, 50%) … hsl(200, 20%, 50%) - niebieskie, jak na obrazie 2.

    kolory.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <section class="banner">
            <h1>Pomocnik CSS</h1>
        </section>
        <section class="banner">
            <ul>
                <li><a href="kolory.html">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">Pomoc</a></li>
            </ul>
        </section>
        <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">
            <br>
            <input type="number" id="hue" max="360" placeholder="0 – 360">
            <button onclick="generatePalette()">Generuj paletę</button>
            <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>
    <script>
        function generatePalette() {
            var h = document.getElementById("hue").value;
            var cells = document.getElementsByTagName("td");
            cells[0].style.backgroundColor = "hsl(" + h + ", 100%, 50%)";
            cells[1].style.backgroundColor = "hsl(" + h + ", 80%, 50%)";
            cells[2].style.backgroundColor = "hsl(" + h + ", 60%, 50%)";
            cells[3].style.backgroundColor = "hsl(" + h + ", 40%, 50%)";
            cells[4].style.backgroundColor = "hsl(" + h + ", 20%, 50%)";
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  44. Etap 5: Dobre praktyki (poza kluczem)

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

    Krok 44: Zabezpieczenie: rel="noopener" przy odnośniku do obcej strony

    ok. 2 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

    Strona otwarta przez target="_blank" dostaje w starszych przeglądarkach dostęp do karty, z której ją otwarto, przez obiekt window.opener. Obca strona mogłaby wtedy po cichu podmienić kartę „Pomocnika CSS” na fałszywą kopię, np. z formularzem logowania - użytkownik wraca do karty i niczego nie zauważa. To atak nazywany reverse tabnabbing.

    • rel="noopener" - nowa karta nie dostaje window.opener,
    • noreferrer - dodatkowo przeglądarka nie wysyła obcej stronie adresu, z którego przyszedł użytkownik.

    Nowe przeglądarki dla target="_blank" same zakładają noopener, ale atrybut zostaje dla starszych. Klucz tego nie sprawdza - na egzaminie wystarczy wersja wcześniejsza. Stara linia zostaje w komentarzu HTML.

    kolory.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <section class="banner">
            <h1>Pomocnik CSS</h1>
        </section>
        <section class="banner">
            <ul>
                <li><a href="kolory.html">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">Pomoc</a></li> -->
                <li><a href="https://www.w3schools.com/css/" target="_blank" rel="noopener noreferrer">Pomoc</a></li>
            </ul>
        </section>
        <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">
            <br>
            <input type="number" id="hue" max="360" placeholder="0 – 360">
            <button onclick="generatePalette()">Generuj paletę</button>
            <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>
    <script>
        function generatePalette() {
            var h = document.getElementById("hue").value;
            var cells = document.getElementsByTagName("td");
            cells[0].style.backgroundColor = "hsl(" + h + ", 100%, 50%)";
            cells[1].style.backgroundColor = "hsl(" + h + ", 80%, 50%)";
            cells[2].style.backgroundColor = "hsl(" + h + ", 60%, 50%)";
            cells[3].style.backgroundColor = "hsl(" + h + ", 40%, 50%)";
            cells[4].style.backgroundColor = "hsl(" + h + ", 20%, 50%)";
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  45. Krok 45: Zabezpieczenie: sprawdzenie wartości z pola

    ok. 4 min
    Polecenie z arkusza

    Pobiera wartość wpisaną w polu edycyjnym

    Skrypt ufa każdej wartości z pola. Sprawdzone w Chrome na wersji z poprzednich kroków:

    • pole puste - powstaje napis hsl(, 100%, 50%), którego przeglądarka nie rozumie, więc po cichu go odrzuca: paleta się nie zmienia i nie ma żadnego komunikatu,
    • 500 wpisane z klawiatury - atrybut max="360" tego nie blokuje, a hsl(500, …) to kąt 500° = 140°: paleta robi się zielona, choć użytkownik wpisał liczbę spoza zakresu.

    Poprawka - dane z pola zawsze sprawdza skrypt:

    • Number(value) zamienia napis na liczbę, a Number.isInteger sprawdza, czy to liczba całkowita (odpadają 120.5 i pusty napis),
    • warunek h < 0 || h > 360 - zakres z arkusza; przy złej wartości return kończy funkcję, zanim zmieni kolory,
    • komunikat trafia do nowego paragrafu <p id="message"> przez textContent, nie innerHTML. textContent zawsze wstawia zwykły tekst - nawet gdyby komunikat zawierał kiedyś dane od użytkownika (np. z pola tekstowego), znaczniki nie zamienią się w kod strony. Pole type="number" samo nie przepuszcza liter, ale nawyk chroni przy każdym innym polu.

    Stara linia zostaje w komentarzu. W podglądzie wpisz 500 i kliknij - pojawia się komunikat, a paleta zostaje bez zmian.

    Typowe błędy

    Sama walidacja w HTML (min, max, required) działa tylko przy wysyłaniu formularza - tu nie ma formularza, więc przeglądarka niczego nie sprawdzi za skrypt.

    kolory.html HTML zmienione: 10 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pomocnik CSS</title>
    <link rel="stylesheet" href="styl2.css">
</head>
<body>
    <div id="container">
        <section class="banner">
            <h1>Pomocnik CSS</h1>
        </section>
        <section class="banner">
            <ul>
                <li><a href="kolory.html">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">Pomoc</a></li> -->
                <li><a href="https://www.w3schools.com/css/" target="_blank" rel="noopener noreferrer">Pomoc</a></li>
            </ul>
        </section>
        <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">
            <br>
            <input type="number" id="hue" max="360" placeholder="0 – 360">
            <button onclick="generatePalette()">Generuj paletę</button>
            <p id="message"></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>
    <script>
        function generatePalette() {
            // var h = document.getElementById("hue").value;
            var value = document.getElementById("hue").value;
            var message = document.getElementById("message");
            var h = Number(value);
            if (value === "" || !Number.isInteger(h) || h < 0 || h > 360) {
                message.textContent = "Wpisz liczbę całkowitą od 0 do 360.";
                return;
            }
            message.textContent = "";
            var cells = document.getElementsByTagName("td");
            cells[0].style.backgroundColor = "hsl(" + h + ", 100%, 50%)";
            cells[1].style.backgroundColor = "hsl(" + h + ", 80%, 50%)";
            cells[2].style.backgroundColor = "hsl(" + h + ", 60%, 50%)";
            cells[3].style.backgroundColor = "hsl(" + h + ", 40%, 50%)";
            cells[4].style.backgroundColor = "hsl(" + h + ", 20%, 50%)";
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (kolory.html)

  46. Etap 6: Oddanie pracy

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

    Krok 46: 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 wpisujesz nazwę przeglądarki, w której sprawdzasz stronę.

    W folderze muszą być: czcionki.html, import.jpg, kolory.html, kolory.jpg, kw1.png, kw2.png, kw3.png, kw4.png, kwerendy.txt, przeglądarka.txt, styl2.css i style.html (sklep.sql z archiwum może zostać). 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 45.

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