Przejdź do głównej treści
E.14-01-24.01-SGStyczeń 2024 · 40 kroków · ok. 78 min · 34 kryteria z klucza

Rozwiązanie krok po kroku: Fabryka cukierków z zamówieniem koloru (Nowoczesny kod (flex, addEventListener))

To drugi sposób rozwiązania tego samego arkusza. Wynik jest ten sam - strony index.html i zamowienie.html z sześcioma blokami, arkusz stylów styl10.css, skrypt wypisujący zamówiony kształt i barwiący przycisk „Kolor”, a do tego trzy grafiki - i tak samo spełnia każde kryterium klucza. Inna jest droga:

  • znaczniki semantyczne: baner to <header>, blok lewy - <main> (główna treść strony), blok prawy z ofertą - <aside>, bloki górne - <section>,
  • flexbox zamiast float: <body> układa bloki w wiersze (flex-wrap), a szerokość 50% z arkusza wyznacza, ile bloków mieści się w wierszu; nie trzeba clear,
  • zmienne CSS dla kolorów z arkusza i box-sizing: border-box, dzięki któremu wysokość 80 px banera obejmuje też jego dopełnienie,
  • etykiety <label for> przy polach formularza i ograniczenia min/max w polach RGB,
  • skrypt w osobnym pliku skrypt.js z atrybutem defer, obsługa kliknięcia przez addEventListener, słownik kształtów zamiast drabinki if, textContent zamiast innerHTML i sprawdzenie składowych RGB przed zmianą koloru.

To arkusz E.14 ze stycznia 2024 - kwalifikacji formuły 2012, którą zastąpiła INF.03. Treść zadania jest taka sama jak w czerwcu 2022, ale klucz jest przebudowany: tabela i obrazy są oceniane osobnymi kryteriami (R.2.1 - R.2.9), a skrypt ma cztery kryteria. Zdjęcia pochodzą z oryginalnego archiwum CKE materialy3.zip (załącznik na stronie arkusza), układ jest zmierzony w Chrome, a skrypt sprawdzony prawdziwym kliknięciem.

Jak liczą się punkty. Klucz ma 34 kryteria (R.1.1 - R.5.4), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 26 punktów - można stracić 8 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem. Klucz przyjmuje zarówno onclick w HTML, jak i addEventListener w skrypcie.

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

  1. Etap 1: Grafika

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

    Krok 1: Folder zdającego i archiwum materialy3

    ok. 2 min
    Polecenie z arkusza

    Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie materialy3.zip zabezpieczone hasłem: Wyp@kujMni3. Archiwum należy rozpakować. Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj swojego numeru PESEL lub innego identyfikatora, którym został podpisany arkusz. Rozpakowane pliki umieść w tym folderze. Wyniki swojej pracy zapisz 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 materialy3.zip rozpakowujesz do tego folderu z hasłem Wyp@kujMni3 (wielkość liter i znak @ mają znaczenie). W środku są trzy zdjęcia: cukierki1.jpg (200 × 150 px, kolorowe żelki), cukierki2.png (640 × 387 px, kilka żelków na przezroczystym tle) i cukierki3.jpg (640 × 480 px).

    Wszystko, co powstanie - grafika, strony i arkusz stylów - trafia do tego folderu. Archiwum do pobrania jest na stronie arkusza w serwisie (to samo archiwum, z tym samym hasłem, CKE wydała przy zadaniu ze stycznia 2020).

    Typowe błędy

    Pliki zapisane poza folderem zdającego nie trafią na płytę - a ocenia się tylko to, co jest na płycie.

  2. Krok 2: cukierki1.jpg w odcieniach szarości

    Kryteria:

    R.1.2 Zdjęcie cukierki1.jpg jest zapisane w kolorach szarości, jest czarno-białe

    ok. 2 min
    Polecenie z arkusza

    Zdjęcie cukierki1.jpg należy zapisać w odcieniach szarości.

    Otwórz cukierki1.jpg w edytorze grafiki rastrowej (np. GIMP). Odcienie szarości to Kolory → Odbarwianie → Odbarwianie albo zmiana trybu obrazu: Obraz → Tryb → Skala szarości - druga operacja zostawia w pliku tylko jasność, bez kanałów barw. Zapis pod tą samą nazwą: Plik → Nadpisz cukierki1.jpg (zwykłe Zapisz w GIMP-ie tworzy plik .xcf).

    To zdjęcie nie stoi na stronie jako obraz - zostanie tłem odnośnika „Zamów cukierki” (styl CSS), dlatego na obrazie 2 arkusza żelki pod napisem są szare.

    Typowe błędy

    Samo zmniejszenie nasycenia do połowy zostawia kolor - klucz wymaga zdjęcia czarno-białego.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 2

  3. Krok 3: Logotyp: sam czerwony żelek

    Kryteria:

    R.1.3 Plik z logotypem zawiera czerwonego żelka w kształcie misia, żadne inne żelki nie są widoczne

    ok. 4 min
    Polecenie z arkusza

    Logotyp należy przygotować przy pomocy programu do obróbki grafiki rastrowej i/lub wektorowej, na podstawie zdjęcia cukierki2.png: zdjęcie cukierki2.png powinno być tak skadrowane, aby był widoczny jedynie czerwony żelek.

    Otwórz cukierki2.png. Zdjęcie ma już przezroczyste tło, a na nim kilka żelków - zostać ma tylko czerwony miś. W GIMP-ie: narzędzie Zaznaczanie rozmytego (różdżka) kliknięte na czerwonym misiu zaznacza go razem z wygładzoną krawędzią; Obraz → Kadruj do zaznaczenia obcina płótno do jego prostokąta (199 × 188 px), a resztki sąsiednich żelków, które wejdą w ten prostokąt, usuwasz: Zaznaczenie → Odwróć i Delete.

    Podgląd pokazuje wynik na szachownicy - tak edytory grafiki rysują przezroczystość.

    Typowe błędy

    Prostokątne kadrowanie bez usunięcia resztek zostawia w rogach fragmenty innych żelków - klucz wymaga, by żaden inny żelek nie był widoczny.

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

  4. Krok 4: Logotyp: napis „Cukierki” na okręgu

    Kryteria:

    R.1.4 Plik z logotypem zawiera napis "Cukierki" nad żelkiem opisany na kole zgodnie z obrazem 1 arkusza, zapisany czcionką typu serif (z szeryfami) oraz napis jest koloru fioletowego (dowolny odcień)

    ok. 5 min
    Polecenie z arkusza

    Nad żelkiem powinien znaleźć się napis o treści „Cukierki”. Cechy tekstu: tekst powinien być opisany na okręgu zgodnie z obrazem 1, czcionka Georgia lub Times New Roman, pogrubiona, wypełnienie koloru fioletowe.

    Napis ma iść po łuku nad misiem. W GIMP-ie:

    • powiększ płótno (Obraz → Rozmiar płótna, np. do 560 × 500 px, miś na środku), żeby łuk miał gdzie się zmieścić,
    • narysuj okrąg narzędziem Zaznaczanie eliptyczne (z klawiszem Shift - koło) wokół misia i zamień zaznaczenie na ścieżkę: Zaznaczenie → Na ścieżkę,
    • narzędziem Tekst wpisz Cukierki, krój Georgia Bold (albo Times New Roman Bold), duży rozmiar,
    • kliknij warstwę tekstu prawym przyciskiem: Tekst wzdłuż ścieżki - powstaje nowa ścieżka w kształcie liter na okręgu,
    • na nowej warstwie: Zaznaczenie → Ze ścieżki i wypełnij zaznaczenie kolorem fioletowym (Edycja → Wypełnij kolorem pierwszoplanowym, np. #8e24aa); warstwę z prostym tekstem ukryj albo usuń.

    W programie wektorowym (np. Inkscape) to samo daje Tekst → Wstaw na ścieżkę. Litery mają stać na zewnątrz okręgu, nad głową misia - jak na obrazie 1. W tym rozwiązaniu napis jest tekstem na ścieżce w kształcie okręgu (promień 102 px), z odstępem 6 px między literami.

    Typowe błędy

    Krój bez szeryfów (np. Arial) albo zwykły prosty napis nad misiem to strata punktu - klucz sprawdza i łuk, i szeryfy, i kolor.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 4

  5. Krok 5: Logotyp: przezroczyste tło i wysokość 170 px

    Kryteria: ,

    R.1.5 Plik z logotypem ma przezroczyste tło

    R.1.6 Wysokość logotypu wynosi 170 px

    ok. 3 min
    Polecenie z arkusza

    Cechy obrazu: tło przezroczyste, wysokość dokładnie 170 px.

    Tło zostaje przezroczyste, o ile obraz ma kanał alfa, a pod napisem i misiem nie ma żadnej wypełnionej warstwy (w GIMP-ie: Warstwa → Przezroczystość → Dodaj kanał alfa, warstwa tła ukryta albo usunięta). Najpierw przytnij płótno do treści: Obraz → Przytnij do zawartości. Potem Obraz → Skaluj obraz z zamkniętym łańcuchem proporcji i wysokością 170 px - szerokość przeliczy się sama, tu wychodzi 193 px.

    Typowe błędy

    Wysokość ma być dokładnie 170 px. Skalowanie przed przycięciem do zawartości daje obraz o wysokości 170 px, ale z pustym marginesem - logotyp wychodzi wtedy mniejszy niż na obrazie 2.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 5

  6. Krok 6: Zapis logotyp.png

    Kryteria:

    R.1.1 Plik logotyp zapisano w formacie umożliwiającym zapis przezroczystości, np. PNG

    ok. 1 min
    Polecenie z arkusza

    Obraz zapisany jako logotyp w formacie umożliwiającym zapis przezroczystości.

    Plik → Wyeksportuj jako…, nazwa logotyp.png. PNG zapisuje kanał alfa, czyli przezroczystość; JPEG jej nie ma - przezroczyste miejsca wypełniłby białym albo czarnym kolorem. Na stronie logotyp leży na zielonym tle bloku i widać, że tło pliku jest naprawdę przezroczyste.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 6

  7. Krok 7: cukierki3.jpg: 600 × 450 px

    Kryteria:

    R.1.7 Zdjęcie cukierki3.jpg ma szerokość 600 px (± 2 px) oraz wysokość 450 px (± 2 px)

    ok. 1 min
    Polecenie z arkusza

    Zdjęcie cukierki3.jpg należy skalować do rozmiaru 600 px na 450 px.

    cukierki3.jpg ma 640 × 480 px, czyli proporcje 4:3 - tak samo jak 600 × 450. Obraz → Skaluj obraz, szerokość 600, wysokość wyjdzie 450 sama (przy zamkniętym łańcuchu). Zapis: Plik → Nadpisz cukierki3.jpg.

    Typowe błędy

    Rozmiar płótna zamiast Skaluj obraz przycina zdjęcie zamiast je zmniejszyć.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 7

  8. Etap 2: Strona index.html

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

    Krok 8: Plik index.html

    ok. 1 min
    Polecenie z arkusza

    Cechy witryny: strona główna o nazwie index.html oraz podstrona zamowienie.html.

    Szkielet HTML5: <!DOCTYPE html>, <html lang="pl">, <head> i <body>. Strona główna powstaje pierwsza - podstrona zamówień będzie jej kopią z innym banerem i blokiem lewym.

    index.html HTML nowy plik 
    <!DOCTYPE html>
<html lang="pl">
<head>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  9. Krok 9: Kodowanie polskich znaków i viewport

    ok. 1 min
    Polecenie z arkusza

    Cechy wspólne dla obu stron: zastosowany właściwy standard kodowania polskich znaków.

    <meta charset="UTF-8"> - kodowanie polskich znaków (plik zapisany w UTF-8). Druga linia, viewport, każe telefonowi wyświetlać stronę w jego rzeczywistej szerokości zamiast pomniejszonej wersji „komputerowej” - arkusz jej nie wymaga, ale należy do każdej współczesnej strony. Klucz ocenia kodowanie razem z nazwami obu plików - punkt przyjdzie po utworzeniu zamowienie.html.

    index.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">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  10. Krok 10: Tytuł strony

    Kryteria:

    R.2.2 Dla przynajmniej jednej strony nadano tytuł strony: "Fabryka cukierków”, jest on widoczny na karcie przeglądarki

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony widoczny na karcie przeglądarki: „Fabryka cukierków”.

    <title> - napis na karcie przeglądarki i w wynikach wyszukiwarki.

    index.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>Fabryka cukierków</title>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  11. Krok 11: Podpięcie arkusza stylów styl10.css

    ok. 1 min
    Polecenie z arkusza

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

    <link rel="stylesheet" href="styl10.css"> w <head>. Plik stylów powstanie po HTML-u.

    index.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>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  12. Krok 12: Sześć bloków ze znaczników semantycznych

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki: dwa bloki górne, pod nimi baner, poniżej dwa bloki główne: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji, zgodnie z obrazem 2.

    Każdy blok dostaje znacznik, który mówi, czym jest jego treść:

    • dwa bloki górne - <section> z klasą top (wspólny styl) i własnymi identyfikatorami,
    • baner - <header>, nagłówek strony,
    • blok lewy - <main>, główna treść: zdjęcie na stronie głównej, formularz zamówienia na podstronie,
    • blok prawy - <aside>, treść uzupełniająca (oferta jest taka sama na obu stronach),
    • stopka - <footer>.

    Czytnik ekranu pozwala przeskoczyć prosto do <main>, a wyszukiwarka wie, co jest treścią główną. Identyfikatory są te same co w wersji podstawowej.

    index.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>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left" class="top">
    </section>
    <section id="top-right" class="top">
    </section>
    <header id="banner">
    </header>
    <main id="left">
    </main>
    <aside id="right">
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  13. Krok 13: Pierwszy blok górny: odnośnik „Zamów cukierki”

    ok. 1 min
    Polecenie z arkusza

    Zawartość pierwszego górnego bloku: odnośnik o treści „Zamów cukierki”, którego wybranie prowadzi do strony zamowienie.html.

    <a href="zamowienie.html"> z identyfikatorem order-link - tylko ten odnośnik dostanie tło ze zdjęciem. Odnośnik zadziała po utworzeniu podstrony.

    index.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>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left" class="top">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right" class="top">
    </section>
    <header id="banner">
    </header>
    <main id="left">
    </main>
    <aside id="right">
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  14. Krok 14: Drugi blok górny: logotyp jako odnośnik

    Kryteria: ,

    R.2.8 Na przynajmniej jednej stronie umieszczono obraz logotyp w bloku górnym po prawej stronie lub na stronie index.html obraz cukierki3.jpg w bloku głównym po lewej stronie

    R.2.9 Obraz logotypu ma tekst alternatywny "Nasze logo" lub obraz z cukierkami ma tekst alternatywny "Nasze cukierki"

    ok. 2 min
    Polecenie z arkusza

    Zawartość drugiego górnego bloku: odnośnik, którego wybranie prowadzi do strony index.html. Odnośnik jest w formie obrazu logotyp z tekstem alternatywnym „Nasze logo”.

    Obraz wewnątrz <a> jest odnośnikiem do strony głównej. Atrybuty width="193" height="170" to rzeczywiste wymiary pliku: przeglądarka rezerwuje miejsce na obraz, zanim go pobierze, więc tekst strony nie „podskakuje” po wczytaniu grafiki.

    index.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>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left" class="top">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right" class="top">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo" width="193" height="170"></a>
    </section>
    <header id="banner">
    </header>
    <main id="left">
    </main>
    <aside id="right">
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  15. Krok 15: Blok prawy: nagłówek „Nasza oferta”

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku głównego prawego: nagłówek drugiego stopnia o treści: „Nasza oferta”.

    <h2> w bloku <aside>. R.2.4 (nagłówki i stopka) przyjdzie po kroku z banerem.

    index.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>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left" class="top">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right" class="top">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo" width="193" height="170"></a>
    </section>
    <header id="banner">
    </header>
    <main id="left">
    </main>
    <aside id="right">
        <h2>Nasza oferta</h2>
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  16. Krok 16: Tabela 2 × 2 ze scaloną drugą kolumną

    Kryteria:

    R.2.5 W bloku prawym umieszczono tabelę o rozmiarze 2x2, zastosowano znaczniki table, tr, td

    ok. 3 min
    Polecenie z arkusza

    Zawartość bloku głównego prawego: tabela o rozmiarze 2x2 (wiersze drugiej kolumny są scalone).

    <table>, wiersze <tr>, a druga kolumna to jedna komórka z rowspan="2", rozciągnięta na oba wiersze - dlatego drugi wiersz ma tylko jedną komórkę.

    Pierwsza komórka zawiera napis „Kształty”, który jest nagłówkiem listy pod nim - stąd <th scope="row"> zamiast <td>: czytnik ekranu przeczyta go jako opis wiersza. Klucz wymienia znaczniki table, tr, td - wszystkie są w tabeli (komórki z tekstem oferty i z listą to <td>).

    index.html HTML zmienione: 9 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left" class="top">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right" class="top">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo" width="193" height="170"></a>
    </section>
    <header id="banner">
    </header>
    <main id="left">
    </main>
    <aside id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <th scope="row"></th>
                <td rowspan="2"></td>
            </tr>
            <tr>
                <td></td>
            </tr>
        </table>
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  17. Krok 17: Pierwszy wiersz: „Kształty” i tekst z łamaniem

    Kryteria:

    R.2.6 Druga kolumna ma scalone wiersze i znajduje się w nich tekst

    ok. 2 min
    Polecenie z arkusza

    W pierwszym wierszu znajdują się napisy „Kształty” oraz „Możesz zamówić dowolny kolor cukierka”, łamanie tekstu po słowie „zamówić”.

    <br> łamie wiersz dokładnie po słowie „zamówić” - to jedno z niewielu miejsc, gdzie <br> jest właściwym narzędziem (miejsce złamania należy do treści).

    index.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>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left" class="top">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right" class="top">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo" width="193" height="170"></a>
    </section>
    <header id="banner">
    </header>
    <main id="left">
    </main>
    <aside id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <th scope="row">Kształty</th>
                <td rowspan="2">Możesz zamówić<br>dowolny kolor cukierka</td>
            </tr>
            <tr>
                <td></td>
            </tr>
        </table>
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  18. Krok 18: Drugi wiersz: lista numerowana

    Kryteria:

    R.2.7 W tabeli zapisano listę numerowaną o elementach „cytryna”, „liść”, „banan” oraz zastosowano znaczniki ol, li

    ok. 1 min
    Polecenie z arkusza

    W drugim wierszu znajduje się lista numerowana (uporządkowana) o elementach: „cytryna”, „liść”, „banan”.

    <ol> z trzema <li> - kolejność odpowiada numerom kształtów w skrypcie: 1 cytryna, 2 liść, 3 banan.

    index.html HTML zmienione: 7 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left" class="top">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right" class="top">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo" width="193" height="170"></a>
    </section>
    <header id="banner">
    </header>
    <main id="left">
    </main>
    <aside id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <th scope="row">Kształty</th>
                <td rowspan="2">Możesz zamówić<br>dowolny kolor cukierka</td>
            </tr>
            <tr>
                <td>
                    <ol>
                        <li>cytryna</li>
                        <li>liść</li>
                        <li>banan</li>
                    </ol>
                </td>
            </tr>
        </table>
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  19. Krok 19: Stopka: autor strony

    ok. 1 min
    Polecenie z arkusza

    Zawartość stopki: tekst „Autor strony: PESEL”, gdzie PESEL to Twój numer PESEL. PESEL jest pogrubiony.

    Na egzaminie numer PESEL - tu w jego miejscu imię i nazwisko autora. <strong> oznacza tekst ważny (przeglądarka pogrubia go domyślnie); klucz przyjmuje <b> i <strong>.

    index.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>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left" class="top">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right" class="top">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo" width="193" height="170"></a>
    </section>
    <header id="banner">
    </header>
    <main id="left">
    </main>
    <aside id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <th scope="row">Kształty</th>
                <td rowspan="2">Możesz zamówić<br>dowolny kolor cukierka</td>
            </tr>
            <tr>
                <td>
                    <ol>
                        <li>cytryna</li>
                        <li>liść</li>
                        <li>banan</li>
                    </ol>
                </td>
            </tr>
        </table>
    </aside>
    <footer>
        Autor strony: <strong>Bartosz Bryniarski</strong>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  20. Krok 20: Baner strony głównej: „Słodka kraina”

    Kryteria:

    R.2.4 Na przynajmniej jednej stronie zapisano w banerze nagłówek h1: "Słodka kraina" lub "Strefa zamówień" oraz na przynajmniej jednej stronie w bloku prawym nagłówek h2: "Nasza oferta” oraz w stopce umieszczono PESEL zdającego oraz jest on pogrubiony (znacznik b lub strong lub w CSS)

    ok. 1 min
    Polecenie z arkusza

    Cechy odrębne dla pliku index.html: zawartość banera: nagłówek pierwszego stopnia o treści: „Słodka kraina”.

    <h1> w <header>. Strona ma teraz komplet do R.2.4: <h1> w banerze, <h2> w bloku prawym i pogrubionego autora w stopce.

    index.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>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left" class="top">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right" class="top">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo" width="193" height="170"></a>
    </section>
    <header id="banner">
        <h1>Słodka kraina</h1>
    </header>
    <main id="left">
    </main>
    <aside id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <th scope="row">Kształty</th>
                <td rowspan="2">Możesz zamówić<br>dowolny kolor cukierka</td>
            </tr>
            <tr>
                <td>
                    <ol>
                        <li>cytryna</li>
                        <li>liść</li>
                        <li>banan</li>
                    </ol>
                </td>
            </tr>
        </table>
    </aside>
    <footer>
        Autor strony: <strong>Bartosz Bryniarski</strong>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  21. Krok 21: Blok lewy strony głównej: zdjęcie cukierków

    ok. 1 min
    Polecenie z arkusza

    Cechy odrębne dla pliku index.html: zawartość bloku głównego lewego: obraz cukierki3.jpg z tekstem alternatywnym o treści „Nasze cukierki”.

    Zdjęcie 600 × 450 px z rzeczywistymi wymiarami w atrybutach width i height (miejsce zarezerwowane przed wczytaniem). Na wąskim ekranie zmniejszy je reguła CSS max-width: 100%.

    index.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>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left" class="top">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right" class="top">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo" width="193" height="170"></a>
    </section>
    <header id="banner">
        <h1>Słodka kraina</h1>
    </header>
    <main id="left">
        <img src="cukierki3.jpg" alt="Nasze cukierki" width="600" height="450">
    </main>
    <aside id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <th scope="row">Kształty</th>
                <td rowspan="2">Możesz zamówić<br>dowolny kolor cukierka</td>
            </tr>
            <tr>
                <td>
                    <ol>
                        <li>cytryna</li>
                        <li>liść</li>
                        <li>banan</li>
                    </ol>
                </td>
            </tr>
        </table>
    </aside>
    <footer>
        Autor strony: <strong>Bartosz Bryniarski</strong>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  22. Etap 3: Strona zamowienie.html

    Kroki 22-26 · po tym etapie masz 17 z 34 kryteriów (pkt)

    Krok 22: Plik zamowienie.html i baner „Strefa zamówień”

    Kryteria: ,

    R.2.1 Witrynę internetową zapisano w plikach index.html oraz zamowienie.html oraz zastosowano właściwy standard kodowania polskich znaków

    R.3.1 Na przynajmniej jednej stronie znajdują się działające odnośniki. Wybranie odnośnika z logotypem otwiera stronę index.html, wybranie odnośnika "Zamów cukierki" otwiera stronę zamowienie.html

    ok. 2 min
    Polecenie z arkusza

    Cechy odrębne dla pliku zamowienie.html: zawartość banera: nagłówek pierwszego stopnia o treści: „Strefa zamówień”.

    Kopia index.html zapisana jako zamowienie.html: inny nagłówek w banerze, a <main> opróżniony - dostanie formularz zamówienia. Oba odnośniki działają.

    zamowienie.html HTML nowy plik 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left" class="top">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right" class="top">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo" width="193" height="170"></a>
    </section>
    <header id="banner">
        <h1>Strefa zamówień</h1>
    </header>
    <main id="left">
    </main>
    <aside id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <th scope="row">Kształty</th>
                <td rowspan="2">Możesz zamówić<br>dowolny kolor cukierka</td>
            </tr>
            <tr>
                <td>
                    <ol>
                        <li>cytryna</li>
                        <li>liść</li>
                        <li>banan</li>
                    </ol>
                </td>
            </tr>
        </table>
    </aside>
    <footer>
        Autor strony: <strong>Bartosz Bryniarski</strong>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienie.html)

  23. Krok 23: Numer kształtu z etykietą

    ok. 2 min
    Polecenie z arkusza

    Zawartość bloku głównego lewego: tekst: „Numer kształtu: ”, poniżej pole edycyjne typu numerycznego.

    Tekst „Numer kształtu: ” jest etykietą pola: <label for="shape"> łączy go z polem o id="shape". Kliknięcie napisu ustawia kursor w polu, a czytnik ekranu odczyta nazwę pola. step="1" mówi przeglądarce, że chodzi o liczby całkowite.

    zamowienie.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>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left" class="top">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right" class="top">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo" width="193" height="170"></a>
    </section>
    <header id="banner">
        <h1>Strefa zamówień</h1>
    </header>
    <main id="left">
        <label for="shape">Numer kształtu: </label><br>
        <input type="number" id="shape" step="1"><br>
    </main>
    <aside id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <th scope="row">Kształty</th>
                <td rowspan="2">Możesz zamówić<br>dowolny kolor cukierka</td>
            </tr>
            <tr>
                <td>
                    <ol>
                        <li>cytryna</li>
                        <li>liść</li>
                        <li>banan</li>
                    </ol>
                </td>
            </tr>
        </table>
    </aside>
    <footer>
        Autor strony: <strong>Bartosz Bryniarski</strong>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienie.html)

  24. Krok 24: Trzy pola składowych RGB

    Kryteria:

    R.3.2 Na stronie zamówienia znajdują się cztery pola edycyjne oraz przynajmniej jedno z nich jest typu number

    ok. 2 min
    Polecenie z arkusza

    Poniżej tekst: „skomponuj swój kolor, podaj RGB: ”, poniżej trzy pola edycyjne typu numerycznego, każde poprzedzone tekstem: „R:”, „G:”, „B:”.

    Litery R, G, B są etykietami swoich pól. min="0" max="255" to zakres składowej koloru: strzałki pola nie wyjdą poza niego, a przeglądarka oznaczy wartość spoza zakresu jako niepoprawną (pole dostaje stan :invalid). Wpisanej ręcznie wartości to nie blokuje - dlatego skrypt i tak sprawdzi składowe.

    zamowienie.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left" class="top">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right" class="top">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo" width="193" height="170"></a>
    </section>
    <header id="banner">
        <h1>Strefa zamówień</h1>
    </header>
    <main id="left">
        <label for="shape">Numer kształtu: </label><br>
        <input type="number" id="shape" step="1"><br>
        <span>skomponuj swój kolor, podaj RGB: </span><br>
        <label for="red">R:</label> <input type="number" id="red" min="0" max="255">
        <label for="green">G:</label> <input type="number" id="green" min="0" max="255">
        <label for="blue">B:</label> <input type="number" id="blue" min="0" max="255"><br>
    </main>
    <aside id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <th scope="row">Kształty</th>
                <td rowspan="2">Możesz zamówić<br>dowolny kolor cukierka</td>
            </tr>
            <tr>
                <td>
                    <ol>
                        <li>cytryna</li>
                        <li>liść</li>
                        <li>banan</li>
                    </ol>
                </td>
            </tr>
        </table>
    </aside>
    <footer>
        Autor strony: <strong>Bartosz Bryniarski</strong>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienie.html)

  25. Krok 25: Przycisk „Zamówienie” i paragraf na wynik

    ok. 2 min
    Polecenie z arkusza

    Przycisk o treści „Zamówienie”, którego wciśnięcie powoduje wywołanie skryptu. Poniżej paragraf, w którym pierwotnie znajduje się tekst: „Twoje zamówienie”, tekst jest modyfikowany przez skrypt.

    Przycisk nie ma w HTML-u atrybutu onclick - obsługę kliknięcia podepnie skrypt po identyfikatorze order-button. type="button" mówi wprost, że to zwykły przycisk, a nie wysyłanie formularza. Paragraf result ma atrybut aria-live="polite": czytnik ekranu sam przeczyta nowy tekst, gdy skrypt go zmieni.

    zamowienie.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>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left" class="top">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right" class="top">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo" width="193" height="170"></a>
    </section>
    <header id="banner">
        <h1>Strefa zamówień</h1>
    </header>
    <main id="left">
        <label for="shape">Numer kształtu: </label><br>
        <input type="number" id="shape" step="1"><br>
        <span>skomponuj swój kolor, podaj RGB: </span><br>
        <label for="red">R:</label> <input type="number" id="red" min="0" max="255">
        <label for="green">G:</label> <input type="number" id="green" min="0" max="255">
        <label for="blue">B:</label> <input type="number" id="blue" min="0" max="255"><br>
        <button type="button" id="order-button">Zamówienie</button>
        <p id="result" aria-live="polite">Twoje zamówienie</p>
    </main>
    <aside id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <th scope="row">Kształty</th>
                <td rowspan="2">Możesz zamówić<br>dowolny kolor cukierka</td>
            </tr>
            <tr>
                <td>
                    <ol>
                        <li>cytryna</li>
                        <li>liść</li>
                        <li>banan</li>
                    </ol>
                </td>
            </tr>
        </table>
    </aside>
    <footer>
        Autor strony: <strong>Bartosz Bryniarski</strong>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienie.html)

  26. Krok 26: Przycisk „Kolor”

    ok. 1 min
    Polecenie z arkusza

    Przycisk o treści „Kolor”.

    Przycisk bez własnej akcji - tło zmieni mu skrypt przycisku „Zamówienie”.

    zamowienie.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>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left" class="top">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right" class="top">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo" width="193" height="170"></a>
    </section>
    <header id="banner">
        <h1>Strefa zamówień</h1>
    </header>
    <main id="left">
        <label for="shape">Numer kształtu: </label><br>
        <input type="number" id="shape" step="1"><br>
        <span>skomponuj swój kolor, podaj RGB: </span><br>
        <label for="red">R:</label> <input type="number" id="red" min="0" max="255">
        <label for="green">G:</label> <input type="number" id="green" min="0" max="255">
        <label for="blue">B:</label> <input type="number" id="blue" min="0" max="255"><br>
        <button type="button" id="order-button">Zamówienie</button>
        <p id="result" aria-live="polite">Twoje zamówienie</p>
        <button type="button" id="color">Kolor</button>
    </main>
    <aside id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <th scope="row">Kształty</th>
                <td rowspan="2">Możesz zamówić<br>dowolny kolor cukierka</td>
            </tr>
            <tr>
                <td>
                    <ol>
                        <li>cytryna</li>
                        <li>liść</li>
                        <li>banan</li>
                    </ol>
                </td>
            </tr>
        </table>
    </aside>
    <footer>
        Autor strony: <strong>Bartosz Bryniarski</strong>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienie.html)

  27. Etap 4: Styl CSS

    Kroki 27-34 · po tym etapie masz 29 z 34 kryteriów (pkt)

    Krok 27: Plik styl10.css: zmienne, border-box i krój Helvetica

    Kryteria: ,

    R.4.1 Ustawiono krój czcionki dla całej strony na Helvetica

    R.3.4 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl10.css, formatowanie pochodzi jedynie od CSS (poza pogrubieniem nr PESEL)

    ok. 2 min
    Polecenie z arkusza

    Cechy formatowania CSS działające na stronie: wspólne dla całej strony: krój czcionki Helvetica.

    Na górze pliku trzy rzeczy:

    • zmienne CSS w :root - dwa kolory z arkusza dostają nazwy --green i --brown; reguły bloków użyją ich przez var(--green), więc zmiana koloru to jedna linia,
    • box-sizing: border-box - wysokość i szerokość elementu obejmują jego dopełnienie i ramkę. Blok o szerokości 50% z dopełnieniem nadal ma 50%, a baner o wysokości 80 px ma 80 px razem z marginesem wewnętrznym 5 px,
    • krój Helvetica z krojami zapasowymi: w Windowsie Helvetiki nie ma, więc przeglądarka weźmie Arial, a gdyby i jego brakło - dowolny krój bezszeryfowy (sans-serif).
    styl10.css CSS nowy plik 
    :root {
    --green: rgb(146, 184, 112);
    --brown: rgb(100, 61, 49);
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    font-family: Helvetica, Arial, sans-serif;
}
    Podgląd strony po tym kroku (index.html)

  28. Krok 28: Bloki górne

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla dwóch bloków górnych: kolor tła RGB: 146, 184, 112; wyrównanie tekstu do środka, szerokość 50%, wysokość 170 px.

    Oba bloki górne mają klasę top, więc wystarczy jedna reguła. Kolor tła z zmiennej --green (to rgb(146, 184, 112) z arkusza).

    styl10.css CSS zmienione: 7 linii 
    :root {
    --green: rgb(146, 184, 112);
    --brown: rgb(100, 61, 49);
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    font-family: Helvetica, Arial, sans-serif;
}

.top {
    background-color: var(--green);
    text-align: center;
    width: 50%;
    height: 170px;
}
    Podgląd strony po tym kroku (index.html)

  29. Krok 29: Baner i stopka

    Kryteria: , ,

    R.4.3 Ustawiono biały kolor czcionki dla banera i stopki

    R.4.6 Ustawiono wyrównanie tekstu do środka dla bloków górnych, banera i stopki

    R.4.7 Ustawiono marginesy wewnętrzne dla banera i stopki na 5px

    ok. 2 min
    Polecenie z arkusza

    Wspólne dla banera i stopki: kolor tła RGB: 100, 61, 49; biały kolor czcionki, wyrównanie tekstu do środka, wysokość 80 px, marginesy wewnętrzne 5 px.

    Brązowe tło, biały tekst, wyśrodkowanie, wysokość 80 px i dopełnienie 5 px - przy border-box blok ma dokładnie 80 px wysokości. width: 100% przyda się w układzie flex: blok na całą szerokość zawsze zajmie osobny wiersz.

    styl10.css CSS zmienione: 9 linii 
    :root {
    --green: rgb(146, 184, 112);
    --brown: rgb(100, 61, 49);
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    font-family: Helvetica, Arial, sans-serif;
}

.top {
    background-color: var(--green);
    text-align: center;
    width: 50%;
    height: 170px;
}

#banner, footer {
    background-color: var(--brown);
    color: white;
    text-align: center;
    height: 80px;
    padding: 5px;
    width: 100%;
}
    Podgląd strony po tym kroku (index.html)

  30. Krok 30: Bloki główne

    Kryteria: , ,

    R.4.2 Ustawiono kolor tła rgb(146, 184, 112) lub #92B870 dla bloków górnych i bloków głównych oraz kolor tła rgb(100, 61, 49) lub #643D31 dla banera i stopki

    R.4.4 Ustawiono wysokość bloków górnych na 170px, banera i stopki na 80px, bloków głównych na 450px

    R.4.5 Ustawiono szerokość bloków górnych oraz bloków głównych na 50%

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla bloków głównych: kolor tła RGB: 146, 184, 112; szerokość 50%, wysokość 450 px.

    Zielone tło, połowa szerokości, 450 px wysokości.

    styl10.css CSS zmienione: 6 linii 
    :root {
    --green: rgb(146, 184, 112);
    --brown: rgb(100, 61, 49);
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    font-family: Helvetica, Arial, sans-serif;
}

.top {
    background-color: var(--green);
    text-align: center;
    width: 50%;
    height: 170px;
}

#banner, footer {
    background-color: var(--brown);
    color: white;
    text-align: center;
    height: 80px;
    padding: 5px;
    width: 100%;
}

#left, #right {
    background-color: var(--green);
    width: 50%;
    height: 450px;
}
    Podgląd strony po tym kroku (index.html)

  31. Krok 31: Układ: flexbox z zawijaniem

    Kryteria:

    R.2.3 Wygląd przynajmniej jednej strony zdefiniowano dzieląc ją na bloki: dwa bloki górne, pod nimi baner, poniżej dwa bloki główne: lewy i prawy oraz na dole stopka. Zastosowano znaczniki sekcji i strona po uruchomieniu w przeglądarce ma układ zgodny z obrazem 2 w arkuszu

    ok. 3 min
    Polecenie z arkusza

    Podział strony na bloki: dwa bloki górne, pod nimi baner, poniżej dwa bloki główne: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji, zgodnie z obrazem 2.

    <body> staje się kontenerem flex: jego bloki stoją w wierszu jeden obok drugiego, a flex-wrap: wrap przenosi do nowego wiersza blok, który już się nie mieści. Resztę robią szerokości z arkusza: dwa bloki po 50% wypełniają wiersz, a baner i stopka (100%) zawsze zajmują wiersz same. Kolejność bloków w HTML jest kolejnością na stronie, więc float i clear nie są potrzebne. margin: 0 usuwa domyślny odstęp <body> od krawędzi okna - bloki dotykają brzegów, jak na obrazie 2.

    img { max-width: 100% } zmniejsza zdjęcie na wąskim ekranie (np. w telefonie), a na komputerze zostaje 600 × 450 px. Pomiar w Chrome przy oknie 1280 px: bloki po 640 px, wysokości 170, 80, 450 i 80 px, bez poziomego paska przewijania.

    Typowe błędy

    Bez box-sizing: border-box baner z width: 100% i dopełnieniem 5 px jest o 10 px szerszy od okna - pojawia się poziomy pasek przewijania.

    styl10.css CSS zmienione: 11 linii 
    :root {
    --green: rgb(146, 184, 112);
    --brown: rgb(100, 61, 49);
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    font-family: Helvetica, Arial, sans-serif;
}

body {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

img {
    max-width: 100%;
    height: auto;
}

.top {
    background-color: var(--green);
    text-align: center;
    width: 50%;
    height: 170px;
}

#banner, footer {
    background-color: var(--brown);
    color: white;
    text-align: center;
    height: 80px;
    padding: 5px;
    width: 100%;
}

#left, #right {
    background-color: var(--green);
    width: 50%;
    height: 450px;
}
    Podgląd strony po tym kroku (index.html)

  32. Krok 32: Odnośnik „Zamów cukierki”: tło ze zdjęcia

    Kryteria:

    R.4.8 Ustawiono styl jedynie dla jednego odnośnika: tło w postaci obrazu cukierki1.jpg (np. background-image: url("cukierki1.jpg")), margines wewnętrzny prawy 30px, wewnętrzny dolny 120px, rozmiar czcionki 150%, bez podkreślenia (np. przez selektor klasy lub id) - wystarczą ustawione 4 cechy z 5

    ok. 2 min
    Polecenie z arkusza

    Odnośnika „Zamówienie” z drugiego bloku górnego: tło w postaci obrazu cukierki1.jpg, margines wewnętrzny prawy 30 px, dolny 120 px, rozmiar czcionki 150%, bez podkreślenia.

    Selektor identyfikatora #order-link - styl dostaje tylko ten jeden odnośnik: szare zdjęcie jako tło, dopełnienie prawe 30 px i dolne 120 px, napis 150% i bez podkreślenia.

    ⚠️ Rozbieżność arkusz-klucz: arkusz każe ostylować „odnośnik „Zamówienie” z drugiego bloku górnego”, ale w drugim bloku górnym jest tylko odnośnik-obraz z logotypem, a „Zamówienie” to napis na przycisku w bloku lewym strony zamówień. Na obrazie 2 tło z szarymi żelkami ma odnośnik „Zamów cukierki” z pierwszego bloku górnego - i ten odnośnik dostaje styl. Klucz R.4.8 mówi wprost o stylu „jedynie dla jednego odnośnika” - ważne, żeby styl dostał jeden odnośnik, a nie wszystkie.

    styl10.css CSS zmienione: 8 linii 
    :root {
    --green: rgb(146, 184, 112);
    --brown: rgb(100, 61, 49);
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    font-family: Helvetica, Arial, sans-serif;
}

body {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

img {
    max-width: 100%;
    height: auto;
}

.top {
    background-color: var(--green);
    text-align: center;
    width: 50%;
    height: 170px;
}

#banner, footer {
    background-color: var(--brown);
    color: white;
    text-align: center;
    height: 80px;
    padding: 5px;
    width: 100%;
}

#left, #right {
    background-color: var(--green);
    width: 50%;
    height: 450px;
}

#order-link {
    background-image: url("cukierki1.jpg");
    padding-right: 30px;
    padding-bottom: 120px;
    font-size: 150%;
    text-decoration: none;
}
    Podgląd strony po tym kroku (index.html)

  33. Krok 33: Tabela i komórki

    Kryteria:

    R.4.9 Ustawiono styl tabeli i komórki tabeli: obramowanie 2px, linią kreskowaną, zieloną (dowolny odcień) oraz marginesy zewnętrzne 30px, wewnętrzne 20px

    ok. 2 min
    Polecenie z arkusza

    Tabeli i komórki tabeli: obramowanie 2 px, linią kreskowaną zieloną; marginesy zewnętrzne 30 px, wewnętrzne 20 px.

    Ta sama reguła dla tabeli i jej komórek - także komórki nagłówkowej <th>, inaczej „Kształty” zostałyby bez ramki. border: 2px dashed green to grubość, kreskowana linia i zielony kolor; margin odsuwa tabelę, padding - tekst od ramek komórek.

    styl10.css CSS zmienione: 6 linii 
    :root {
    --green: rgb(146, 184, 112);
    --brown: rgb(100, 61, 49);
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    font-family: Helvetica, Arial, sans-serif;
}

body {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

img {
    max-width: 100%;
    height: auto;
}

.top {
    background-color: var(--green);
    text-align: center;
    width: 50%;
    height: 170px;
}

#banner, footer {
    background-color: var(--brown);
    color: white;
    text-align: center;
    height: 80px;
    padding: 5px;
    width: 100%;
}

#left, #right {
    background-color: var(--green);
    width: 50%;
    height: 450px;
}

#order-link {
    background-image: url("cukierki1.jpg");
    padding-right: 30px;
    padding-bottom: 120px;
    font-size: 150%;
    text-decoration: none;
}

table, th, td {
    border: 2px dashed green;
    margin: 30px;
    padding: 20px;
}
    Podgląd strony po tym kroku (index.html)

  34. Krok 34: Nagłówek pierwszego stopnia

    Kryteria:

    R.4.10 Ustawiono styl nagłówka pierwszego stopnia: odległość między literami 20px, rozmiar czcionki 250%

    ok. 2 min
    Polecenie z arkusza

    Nagłówka pierwszego stopnia: odległość między literami 20 px, rozmiar czcionki 250%.

    letter-spacing: 20px i font-size: 250% z arkusza. Dwie linie więcej: margin: 0 usuwa domyślne marginesy nagłówka, a line-height: 70px (wysokość banera bez dopełnienia) ustawia napis dokładnie na środku banera w pionie - bez nich nagłówek o tak dużym kroju wystaje poza baner.

    styl10.css CSS zmienione: 7 linii 
    :root {
    --green: rgb(146, 184, 112);
    --brown: rgb(100, 61, 49);
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    font-family: Helvetica, Arial, sans-serif;
}

body {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

img {
    max-width: 100%;
    height: auto;
}

.top {
    background-color: var(--green);
    text-align: center;
    width: 50%;
    height: 170px;
}

#banner, footer {
    background-color: var(--brown);
    color: white;
    text-align: center;
    height: 80px;
    padding: 5px;
    width: 100%;
}

#left, #right {
    background-color: var(--green);
    width: 50%;
    height: 450px;
}

#order-link {
    background-image: url("cukierki1.jpg");
    padding-right: 30px;
    padding-bottom: 120px;
    font-size: 150%;
    text-decoration: none;
}

table, th, td {
    border: 2px dashed green;
    margin: 30px;
    padding: 20px;
}

h1 {
    letter-spacing: 20px;
    font-size: 250%;
    margin: 0;
    line-height: 70px;
}
    Podgląd strony po tym kroku (index.html)

  35. Etap 5: Skrypt

    Kroki 35-37 · po tym etapie masz 34 z 34 kryteriów (pkt)

    Krok 35: skrypt.js: obsługa kliknięcia „Zamówienie”

    Kryteria: ,

    R.5.1 Skrypt napisano w języku uruchamianym po stronie przeglądarki i zawiera przynajmniej jedną instrukcję zgodną ze składnią i wynikającą z zadania

    R.3.3 Na stronie zamówienia znajduje się przycisk "Zamówienie", którego wciśnięcie powoduje uruchomienie skryptu (obsługa zdarzenia zdefiniowana w HTML np. onClick lub w skrypcie np. addEventListener zmienna.onClick = …)

    ok. 3 min
    Polecenie z arkusza

    Wymagania dotyczące skryptu: wykonywany po stronie przeglądarki, wywoływany przyciskiem „Zamówienie”.

    Skrypt ma własny plik skrypt.js, dołączony w <head> znacznikiem <script src="skrypt.js" defer>. Atrybut defer każe przeglądarce wykonać skrypt dopiero po wczytaniu całego HTML-a - dlatego document.querySelector znajdzie przyciski i pola, choć znacznik stoi na górze strony.

    • const - stałe odwołania do pola kształtu i paragrafu wyniku, wyszukane raz,
    • addEventListener('click', …) podpina funkcję strzałkową pod kliknięcie przycisku order-button - HTML zostaje bez kodu JavaScript,
    • Number(shapeInput.value) zamienia tekst z pola na liczbę (puste pole daje 0).
    Typowe błędy

    Bez defer (albo bez przeniesienia znacznika na koniec <body>) skrypt w <head> działa przed powstaniem przycisku - querySelector zwraca null i addEventListener kończy się błędem.

    skrypt.js JavaScript nowy plik 
    const shapeInput = document.querySelector('#shape');
const result = document.querySelector('#result');

document.querySelector('#order-button').addEventListener('click', () => {
    const shape = Number(shapeInput.value);
});
    zamowienie.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>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
    <script src="skrypt.js" defer></script>
</head>
<body>
    <section id="top-left" class="top">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right" class="top">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo" width="193" height="170"></a>
    </section>
    <header id="banner">
        <h1>Strefa zamówień</h1>
    </header>
    <main id="left">
        <label for="shape">Numer kształtu: </label><br>
        <input type="number" id="shape" step="1"><br>
        <span>skomponuj swój kolor, podaj RGB: </span><br>
        <label for="red">R:</label> <input type="number" id="red" min="0" max="255">
        <label for="green">G:</label> <input type="number" id="green" min="0" max="255">
        <label for="blue">B:</label> <input type="number" id="blue" min="0" max="255"><br>
        <button type="button" id="order-button">Zamówienie</button>
        <p id="result" aria-live="polite">Twoje zamówienie</p>
        <button type="button" id="color">Kolor</button>
    </main>
    <aside id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <th scope="row">Kształty</th>
                <td rowspan="2">Możesz zamówić<br>dowolny kolor cukierka</td>
            </tr>
            <tr>
                <td>
                    <ol>
                        <li>cytryna</li>
                        <li>liść</li>
                        <li>banan</li>
                    </ol>
                </td>
            </tr>
        </table>
    </aside>
    <footer>
        Autor strony: <strong>Bartosz Bryniarski</strong>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienie.html)

  36. Krok 36: Nazwa kształtu ze słownika

    Kryteria: ,

    R.5.2 Skrypt pobiera dane z pola edycyjnego do wpisania numeru kształtu i wypisuje tekst „Twoje zamówienie to cukierek ”, a dalej w zależności od wprowadzonej wartości: 1 – „cytryna”, 2 – „liść”, 3 – „banan”, inny – „inny”

    R.5.3 Tekst jest wypisany w akapicie poniżej przycisku „Zamówienie”

    ok. 3 min
    Polecenie z arkusza

    Skrypt sprawdza wprowadzony numer kształtu i wypisuje w akapicie poniżej przycisku „Zamówienie” tekst „Twoje zamówienie to cukierek ”, a dalej w zależności od wprowadzonej wartości: 1 – „cytryna”, 2 – „liść”, 3 – „banan”, inny – „inny”, np. „Twoje zamówienie to cukierek liść”.

    Zamiast drabinki if - obiekt-słownik SHAPES: numer kształtu jest kluczem, nazwa - wartością. SHAPES[shape] dla numeru spoza słownika zwraca undefined, a operator ?? podstawia wtedy „inny”. Nowy kształt to jedna linia w słowniku, bez dopisywania kolejnego else if.

    Tekst powstaje z szablonu w odwrotnych apostrofach: ${name} wstawia nazwę w środek napisu. textContent wpisuje go do paragrafu jako zwykły tekst (bez interpretowania znaczników - bezpieczny nawyk, gdy kiedyś trafiłyby tu dane od użytkownika).

    skrypt.js JavaScript zmienione: 8 linii 
    const shapeInput = document.querySelector('#shape');
const result = document.querySelector('#result');

const SHAPES = {
    1: 'cytryna',
    2: 'liść',
    3: 'banan',
};

document.querySelector('#order-button').addEventListener('click', () => {
    const shape = Number(shapeInput.value);
    const name = SHAPES[shape] ?? 'inny';
    result.textContent = `Twoje zamówienie to cukierek ${name}`;
});
    Podgląd strony po tym kroku (zamowienie.html)

  37. Krok 37: Sprawdzenie RGB i kolor przycisku „Kolor”

    Kryteria:

    R.5.4 Skrypt pobiera wartości RGB, a następnie zmienia tło przycisku „Kolor” na kolor odpowiadający podanej wartości RGB

    ok. 4 min
    Polecenie z arkusza

    Następnie skrypt sprawdza wartości RGB, a następnie zmienia kolor tła przycisku „Kolor” na kolor odpowiadający podanej wartości RGB.

    • rgbInputs - trzy pola znalezione jednym wywołaniem map na liście selektorów,
    • funkcja rgbValue sprawdza jedno pole: niepuste, liczba całkowita, zakres 0-255; zwraca liczbę albo null,
    • przypisanie destrukturyzujące const [r, g, b] = … rozkłada tablicę wyników na trzy stałe,
    • gdy choć jedna składowa jest błędna (includes(null)), paragraf dostaje podpowiedź, a return kończy obsługę - kolor się nie zmienia,
    • w przeciwnym razie style.backgroundColor dostaje kolor z szablonu rgb(${r}, ${g}, ${b}).

    Sprawdzone kliknięciem w Chrome: kształty 1, 2, 3 i 7 dają cytrynę, liść, banan i „inny”, składowe 255, 0, 128 - różowy przycisk, a puste pole G - podpowiedź zamiast cichego zignorowania koloru.

    skrypt.js JavaScript zmienione: 14 linii 
    const shapeInput = document.querySelector('#shape');
const result = document.querySelector('#result');
const colorButton = document.querySelector('#color');
const rgbInputs = ['#red', '#green', '#blue'].map((selector) => document.querySelector(selector));

const SHAPES = {
    1: 'cytryna',
    2: 'liść',
    3: 'banan',
};

function rgbValue(input) {
    const value = Number(input.value);
    return input.value !== '' && Number.isInteger(value) && value >= 0 && value <= 255 ? value : null;
}

document.querySelector('#order-button').addEventListener('click', () => {
    const shape = Number(shapeInput.value);
    const name = SHAPES[shape] ?? 'inny';
    result.textContent = `Twoje zamówienie to cukierek ${name}`;

    const [r, g, b] = rgbInputs.map(rgbValue);
    if ([r, g, b].includes(null)) {
        result.textContent += ' (kolor: podaj trzy liczby całkowite od 0 do 255)';
        return;
    }
    colorButton.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
});
    Podgląd strony po tym kroku (zamowienie.html)

  38. Etap 6: Porównanie z wersją podstawową

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

    Krok 38: HTML i CSS: co się zmieniło

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki: dwa bloki górne, pod nimi baner, poniżej dwa bloki główne: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji, zgodnie z obrazem 2.

    Obie wersje dają na ekranie ten sam układ i te same punkty. Różnice:

    • znaczniki: w wersji podstawowej bloki są <section>, tu <main> i <aside> mówią, która treść jest główna, a która uzupełniająca; „Kształty” to komórka nagłówkowa <th>,
    • układ: float + clear kontra jeden display: flex z flex-wrap na <body>. Flex nie wymaga „sprzątania” po opływaniu, a kolejność bloków w HTML jest kolejnością na ekranie,
    • wymiary: border-box sprawia, że 80 px banera to naprawdę 80 px (w wersji podstawowej 90 px z dopełnieniem); kolory z arkusza są w zmiennych,
    • formularz: etykiety <label for> i zakresy min/max przy polach RGB.

    Na egzaminie wystarczy dowolna z tych wersji - klucz wymienia float i clear, display: flex i grid jako równoprawne.

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

  39. Krok 39: Skrypt: onclick a addEventListener

    ok. 2 min
    Polecenie z arkusza

    Wymagania dotyczące skryptu: wykonywany po stronie przeglądarki, wywoływany przyciskiem „Zamówienie”.

    • wywołanie: onclick="order()" w HTML wymaga funkcji globalnej i miesza kod z treścią; addEventListener w osobnym pliku zostawia HTML czystym i pozwala podpiąć kilka funkcji pod to samo zdarzenie,
    • wybór nazwy: drabinka if kontra słownik z ?? - nowy kształt to jedna linia danych zamiast nowej gałęzi kodu,
    • wypisanie: innerHTML kontra textContent - ten drugi nigdy nie wykona znaczników,
    • kolor: wersja podstawowa (przed etapem dobrych praktyk) ignoruje po cichu puste pole, tu każda składowa jest sprawdzona, a użytkownik dostaje podpowiedź.

    Klucz przyjmuje obie formy obsługi kliknięcia - wprost wymienia onClick i addEventListener.

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

  40. Etap 7: Oddanie pracy

    Krok 40 · po tym etapie masz 34 z 34 kryteriów (pkt)

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

    ok. 3 min
    Polecenie z arkusza

    Po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Umieść go w folderze z numerem PESEL. Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny się znajdować pliki: cukierki1, cukierki3, index, logotyp, przeglądarka, styl10, zamowienie, ewentualnie inne przygotowane pliki.

    W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz strony. W folderze zdającego: cukierki1.jpg, cukierki3.jpg, logotyp.png, index.html, zamowienie.html, styl10.css, skrypt.js (bez niego przycisk „Zamówienie” nic nie zrobi) i przeglądarka.txt. 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 37.

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