Przejdź do głównej treści
E.14-02-22.01-SGStyczeń 2022 · 39 kroków · ok. 72 min · 36 kryteriów z klucza

Rozwiązanie krok po kroku: Hurtownia kawy z kalkulatorem zamówienia (Nowoczesny kod (flex, addEventListener))

To drugi sposób rozwiązania tego samego arkusza. Wynik jest ten sam - strony index.html, zamowienia.html i blog.html, arkusz stylów styl.css, skrypt liczący koszt zamówienia, przeskalowane logo i obraz kawa.png - i tak samo spełnia każde kryterium klucza. Inna jest droga:

  • znaczniki semantyczne: menu to <nav>, blok lewy - <main>, blok prawy z ofertą - <aside>, baner - <header>,
  • flexbox zamiast float: <body> układa bloki w wiersze, a szerokości 75%/25% i 50%/50% z arkusza wyznaczają podział; nie trzeba clear,
  • zmienne CSS dla kolorów, box-sizing: border-box, przekreślenie trzeciego elementu listy przez :nth-child(3) (bez dopisywania identyfikatora w HTML) i styl :focus-visible dla nawigacji klawiaturą,
  • etykiety <label for> przy polach formularza,
  • skrypt w osobnym pliku skrypt.js z defer, addEventListener, cennik z tabeli 1 jako słownik zamiast drabinki if, sprawdzenie wagi i textContent.

To arkusz E.14 ze stycznia 2022 - kwalifikacji formuły 2012, którą zastąpiła INF.03. Obrazy pochodzą z oryginalnego archiwum CKE (załącznik na stronie arkusza), układ jest zmierzony w Chrome, a skrypt sprawdzony prawdziwym kliknięciem.

Jak liczą się punkty. Klucz ma 36 kryteriów (R.1.1 - R.5.4), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 27 punktów - można stracić 9 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem. Klucz ocenia działanie przycisku i obliczenia, nie sposób podpięcia funkcji.

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 36 kryteriów (pkt)

    Krok 1: Folder zdającego i archiwum pliki2

    ok. 2 min
    Polecenie z arkusza

    Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie pliki2.zip zabezpieczone hasłem: @K4wA! Archiwum należy rozpakować. Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj numeru, którym został podpisany arkusz. Rozpakowane pliki umieść w tym folderze. Wyniki swojej pracy zapisz w tym folderze.

    Na pulpicie tworzysz folder nazwany numerem, którym podpisano arkusz (PESEL) - w tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora, Bartosz Bryniarski. Archiwum rozpakowujesz do tego folderu z hasłem @K4wA! (wielkość liter ma znaczenie). W środku są dwa obrazy: logo.png (220 × 122 px, napis „I ♥ COFFEE” z ziaren kawy) i ksztalty.png (414 × 492 px, naczynia kuchenne na przezroczystym tle).

    Archiwum do pobrania jest na stronie arkusza w serwisie - CKE wydała je pod nazwą pliki4.zip przy zadaniu ze stycznia 2019, z tym samym hasłem i tymi samymi plikami.

  2. Krok 2: logo.png: wysokość 110 px

    Kryteria:

    R.1.1 Obraz logo przeskalowano z zachowaniem proporcji tak, że jego wysokość wynosi 110 px, odpowiadająca temu szerokość wynosi 198 px (± 5 px)

    ok. 2 min
    Polecenie z arkusza

    Obraz logo.png przeskaluj z zachowaniem proporcji tak, aby wysokość wynosiła dokładnie 110 px.

    W edytorze grafiki rastrowej (np. GIMP): Obraz → Skaluj obraz, łańcuch między szerokością a wysokością zamknięty (to jest „zachowanie proporcji”), wysokość 110 px. Szerokość przelicza się sama: 220 × 110 / 122 = 198,4, czyli 198 px - dokładnie tyle podaje klucz (198 px ±5). Eksport pod tą samą nazwą: Plik → Nadpisz logo.png. Wysokość 110 px to także wysokość bloku menu i logo na stronie.

    Typowe błędy

    Rozpięty łańcuch i sama wysokość 110 px dają logo 220 × 110 - spłaszczone, bez punktu.

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

  3. Krok 3: Wycięcie filiżanki i imbryka

    ok. 4 min
    Polecenie z arkusza

    Z grafiki ksztalty.png wytnij kształt filiżanki i imbryka (obrazy 1a i 1b) z zachowaniem przezroczystości oraz tak, aby kształty były w całości i żadne fragmenty innych kształtów nie były widoczne.

    W ksztalty.png naczynia leżą blisko siebie - imbryk sąsiaduje z dzbankiem i mleczniczką, a filiżanka ze spodkiem stoi tuż pod nim. W GIMP-ie narzędzie Zaznaczanie rozmytego kliknięte na imbryku zaznacza tylko jego (przezroczyste tło oddziela kształty); pokrywka i ucho są połączone z korpusem, więc wejdą w zaznaczenie w całości. Edycja → Kopiuj i Edycja → Wklej jako → Nowy obraz - nowy obraz zachowuje przezroczystość. To samo z filiżanką: kliknięcie zaznacza ją razem ze spodkiem.

    Na podglądzie oba wycięte kształty na szachownicy (tak edytor pokazuje przezroczystość) - bez fragmentów sąsiednich naczyń.

    Typowe błędy

    Zaznaczenie prostokątne zostawia w rogach kawałki dzbanka albo mleczniczki - klucz R.1.4 wymaga, by żadne fragmenty innych kształtów nie były widoczne.

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

  4. Krok 4: Obraz kawa: filiżanka i pochylony imbryk

    Kryteria: ,

    R.1.3 Obraz z R.1.2 jest przezroczysty

    R.1.4 Na obrazie umieszczono kształt filiżanki i imbryka. Imbryk znajduje się po prawej stronie, jest pochylony, tak jakby jego zawartość wlewała się do filiżanki oraz kształty są w całości i żadne fragmenty innych kształtów nie są widoczne

    ok. 4 min
    Polecenie z arkusza

    Za pomocą edytora grafiki wektorowej przygotuj nowy obraz zgodny z obrazem 1c. Uwzględnij wymagania: obraz jest przezroczysty; widoczne są na nim kształt filiżanki i imbryka. Imbryk znajduje się po prawej stronie, jest obrócony, tak jakby jego zawartość wlewała się do filiżanki.

    Kompozycję składasz w edytorze grafiki wektorowej (np. Inkscape) - jest potrzebny do napisu na kole. Nowy dokument, Plik → Importuj oba wycięte kształty (PNG zachowa przezroczystość). Filiżankę ustaw po lewej, niżej, imbryk po prawej, wyżej. Imbryk obróć narzędziem zaznaczania: drugie kliknięcie na obiekcie pokazuje strzałki obrotu - w tym rozwiązaniu o 30 stopni w lewo, tak że dziobek opada nad filiżankę, jakby kawa się z niego wlewała (obraz 1c). W Inkscape obrót o konkretny kąt daje Obiekt → Przekształć → Obrót.

    Tło dokumentu zostaje przezroczyste - w Inkscape strona nie ma tła, dopóki go nie ustawisz.

  5. Krok 5: Napis „Poczęstuj się kawą” na niewidocznym kole

    Kryteria: ,

    R.1.5 Na obrazie umieszczono napis koloru brązowego (dowolny odcień) o treści: „Poczęstuj się kawą” oraz tekst jest zapisany dowolną czcionką typu Serif (widoczne szeryfy)

    R.1.6 Tekst jest opisany na kole i koło nie jest widoczne

    ok. 5 min
    Polecenie z arkusza

    Widoczny jest napis koloru brązowego o treści „Poczęstuj się kawą”. Tekst zapisany jest dowolną czcionką typu Serif. Na obrazie 1c jest to Georgia, dopuszczalne również inne czcionki Serif, np. Times New Roman. Tekst jest opisany na kole, koło jest niewidoczne.

    W Inkscape:

    • narzędziem Elipsa z klawiszem Ctrl rysujesz koło wokół filiżanki i imbryka,
    • narzędziem Tekst piszesz Poczęstuj się kawą, krój Georgia (szeryfowy), duży rozmiar, kolor brązowy (tu #8b5a00),
    • zaznaczasz tekst i koło (Shift) i wybierasz Tekst → Wstaw na ścieżkę - litery układają się wzdłuż okręgu,
    • koło ma zostać niewidoczne: zaznacz je (np. w panelu Obiekty) i zdejmij mu obrys i wypełnienie (X na pasku kolorów przy wciśniętym Shift usuwa obrys). Nie usuwaj koła - tekst zniknąłby razem ze ścieżką.

    Początek tekstu przesuwasz, obracając koło - napis ma biec od lewego dołu przez górę na prawo, jak na obrazie 1c. Tu został wyśrodkowany na łuku od 120 do 25 stopni (licząc zgodnie z ruchem wskazówek zegara od godziny 3).

    Typowe błędy

    Usunięte koło zabiera ze sobą tekst na ścieżce. Koło z widocznym obrysem to strata R.1.6.

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

  6. Krok 6: Zrzut ekranu edytor.png

    Kryteria:

    R.1.7 Czynność umieszczenia tekstu na kole udokumentowano zrzutem ekranu w pliku edytor.png , na którym widoczny jest edytor grafiki wektorowej i funkcja wstawiająca tekst na ścieżkę

    ok. 2 min
    Polecenie z arkusza

    Aby udokumentować umieszczenie tekstu na kole wykonaj zrzut ekranu, na którym będzie widoczne środowisko edytora grafiki wektorowej oraz funkcja (np. menu ze wskazaną funkcją) realizująca to zadanie. Zrzut zapisz w formacie PNG i nazwij edytor. Nie kadruj zrzutu. Powinien on obejmować cały ekran, z widocznym paskiem zadań.

    Zrzut robisz w chwili, gdy na ekranie widać okno Inkscape i rozwinięte menu Tekst z podświetloną pozycją Wstaw na ścieżkę - najprościej tuż przed jej kliknięciem w poprzednim kroku. Klawisz Print Screen kopiuje cały ekran (z paskiem zadań), wklejasz go jako nowy obraz w GIMP-ie (Edycja → Wklej jako → Nowy obraz) i eksportujesz jako edytor.png.

    Ten zrzut zależy od Twojego stanowiska, dlatego rozwiązanie nie zawiera pliku - to praca do wykonania na egzaminie.

    Typowe błędy

    Zrzut samego okna (Alt+Print Screen) albo przycięty - bez paska zadań - nie jest oceniany (uwaga w kluczu przy R.1).

  7. Krok 7: Zapis kawa.png, wysokość najwyżej 400 px

    Kryteria:

    R.1.2 Obraz kawa zapisano w formacie umożliwiającym zapis przezroczystości, np. PNG oraz jego wysokość jest nie większa niż 400 px

    ok. 2 min
    Polecenie z arkusza

    Utworzony obraz należy zapisać jako kawa w formacie umożliwiającym zapisanie przezroczystości. Obraz kawa powinien mieć wysokość nie większą niż 400 px.

    Plik → Eksportuj (w Inkscape panel eksportu), format PNG - zapisuje przezroczystość; obszar eksportu: rysunek (sama treść, bez pustej strony). Wysokość ustawiasz w polach rozmiaru eksportu, tu 380 px przy szerokości 439 px - mniej niż dopuszczalne 400 px. Nazwa pliku: kawa.png.

    Typowe błędy

    Eksport do JPEG wypełnia tło białym kolorem - przepada przezroczystość (R.1.3) i format (R.1.2). Eksport całej strony A4 daje obraz wyższy niż 400 px.

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

  8. Etap 2: Strona index.html

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

    Krok 8: Plik index.html

    ok. 1 min
    Polecenie z arkusza

    Cechy witryny: strona główna o nazwie index.html oraz podstrony zamowienia.html i blog.html. Strona główna oraz podstrona zamówienia są identyczne, za wyjątkiem panelu lewego.

    Szkielet HTML5 strony głównej. Podstrona zamówień będzie jej kopią z innym 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 stron index.html i zamówienia.html: zastosowany właściwy standard kodowania polskich znaków.

    <meta charset="UTF-8"> - kodowanie polskich znaków. viewport każe telefonowi wyświetlić stronę w jego rzeczywistej szerokości - arkusz tego nie wymaga, ale należy do każdej współczesnej strony. R.2.1 przyjdzie po utworzeniu blog.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 Przynajmniej jednej stronie nadano tytuł: "Kochamy kawę”

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony widoczny na karcie przeglądarki „Kochamy kawę”.

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

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

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

    ok. 1 min
    Polecenie z arkusza

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

    <link rel="stylesheet" href="styl.css"> w <head>.

    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>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

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

    Kryteria:

    R.2.3 Wygląd przynajmniej jednej strony zdefiniowano dzieląc ją na bloki: menu, logo, baner, lewy, prawy, stopka. Zastosowano znaczniki sekcji

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki: na górze dwa bloki: menu i logo, poniżej baner, poniżej dwa bloki: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji tak, aby układ bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2.

    • menu - <nav>, blok z główną nawigacją witryny (czytnik ekranu pozwala do niego przeskoczyć),
    • logo - <section>,
    • baner - <header>,
    • blok lewy - <main>: obraz kawa na stronie głównej, formularz na podstronie - to jest treść główna,
    • blok prawy - <aside>: oferta, ta sama na obu stronach,
    • stopka - <footer>.

    Identyfikatory zostają te same co w wersji podstawowej, żeby style trafiały w bloki jednoznacznie.

    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>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <nav id="menu">
    </nav>
    <section id="logo">
    </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: Menu: cztery odnośniki

    ok. 2 min
    Polecenie z arkusza

    Zawartość bloku menu: odnośnik „Strona główna”, prowadzący do pliku index.html; odnośnik „Zamówienia”, prowadzący do pliku zamowienia.html; odnośnik „Blog”, prowadzący do pliku blog.html; odnośnik „Gatunki kawy”, prowadzący do strony http://gatunki-kawy.pl/

    Trzy odnośniki względne do plików w folderze i jeden bezwzględny, z http://, do innej witryny. Podstrony powstaną za chwilę.

    index.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>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <nav id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </nav>
    <section id="logo">
    </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: Blok logo

    Kryteria:

    R.2.6 Na przynajmniej jednej stronie w bloku logo umieszczono grafikę logo.png z tekstem alternatywnym "Kawa"

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku logo: obraz logo.png z tekstem alternatywnym „Kawa”.

    Logo z tekstem alternatywnym i rzeczywistymi wymiarami w width="198" height="110" - przeglądarka rezerwuje miejsce, zanim pobierze obraz.

    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>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <nav id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </nav>
    <section id="logo">
        <img src="logo.png" alt="Kawa" width="198" height="110">
    </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: Baner: „Sklep z kawą”

    ok. 1 min
    Polecenie z arkusza

    Zawartość banera: nagłówek pierwszego stopnia o treści „Sklep z kawą”.

    <h1> w <header>.

    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>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <nav id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </nav>
    <section id="logo">
        <img src="logo.png" alt="Kawa" width="198" height="110">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <main id="left">
    </main>
    <aside id="right">
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  16. Krok 16: Blok prawy: nagłówek „Oferta”

    Kryteria:

    R.2.4 Na przynajmniej jednej stronie w banerze zapisano h1: "Sklep z kawą" oraz w bloku prawym zapisano h3: "Oferta"

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku prawego: nagłówek trzeciego stopnia o treści: „Oferta”.

    Arkusz wymaga <h3>, choć na stronie nie ma <h2>. Na egzaminie znacznik musi być taki, jak w arkuszu; w zwykłym projekcie poziomy nagłówków szłyby po kolei (<h1>, potem <h2>), bo czytniki ekranu budują z nich spis treści strony.

    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>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <nav id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </nav>
    <section id="logo">
        <img src="logo.png" alt="Kawa" width="198" height="110">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <main id="left">
    </main>
    <aside id="right">
        <h3>Oferta</h3>
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  17. Krok 17: Lista punktowana z ofertą

    Kryteria:

    R.2.5 Na przynajmniej jednej stronie w bloku prawym zapisano listę punktowaną o elementach: „Arabica”, „Robusta”, „bezkofeinowa”, „zielona”, zastosowano znaczniki <ul>, <li> oraz ich zamknięcia

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku prawego: lista punktowana (nieuporządkowana) o elementach: „Arabica”, „Robusta”, „bezkofeinowa”, „zielona”.

    <ul> z czterema <li>. Trzeci element nie potrzebuje identyfikatora - CSS znajdzie go po pozycji w liście.

    index.html HTML zmienione: 6 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <nav id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </nav>
    <section id="logo">
        <img src="logo.png" alt="Kawa" width="198" height="110">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <main id="left">
    </main>
    <aside id="right">
        <h3>Oferta</h3>
        <ul>
            <li>Arabica</li>
            <li>Robusta</li>
            <li>bezkofeinowa</li>
            <li>zielona</li>
        </ul>
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  18. Krok 18: Stopka: autor strony

    Kryteria:

    R.2.9 Na przynajmniej jednej stronie w stopce umieszczono numer zdającego zapisany czcionką pogrubioną

    ok. 1 min
    Polecenie z arkusza

    Zawartość stopki: tekst „Stronę przygotował: ”, dalej wstawiony numer zdającego, numer jest zapisany czcionką pogrubioną.

    Na egzaminie numer zdającego - tu imię i nazwisko autora, w <strong> (klucz przyjmuje pogrubienie znacznikiem).

    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>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <nav id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </nav>
    <section id="logo">
        <img src="logo.png" alt="Kawa" width="198" height="110">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <main id="left">
    </main>
    <aside id="right">
        <h3>Oferta</h3>
        <ul>
            <li>Arabica</li>
            <li>Robusta</li>
            <li>bezkofeinowa</li>
            <li>zielona</li>
        </ul>
    </aside>
    <footer>
        Stronę przygotował: <strong>Bartosz Bryniarski</strong>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  19. Krok 19: Blok lewy strony głównej: obraz kawa

    Kryteria:

    R.2.7 Na stronie głównej w bloku lewym umieszczono grafikę kawa z tekstem alternatywnym „filiżanka kawy?”

    ok. 1 min
    Polecenie z arkusza

    Cechy bloku lewego dla strony index.html: obraz kawa z tekstem alternatywnym „filiżanka kawy?”.

    Obraz z tekstem alternatywnym z arkusza i wymiarami pliku w atrybutach.

    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>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <nav id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </nav>
    <section id="logo">
        <img src="logo.png" alt="Kawa" width="198" height="110">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <main id="left">
        <img src="kawa.png" alt="filiżanka kawy?" width="439" height="380">
    </main>
    <aside id="right">
        <h3>Oferta</h3>
        <ul>
            <li>Arabica</li>
            <li>Robusta</li>
            <li>bezkofeinowa</li>
            <li>zielona</li>
        </ul>
    </aside>
    <footer>
        Stronę przygotował: <strong>Bartosz Bryniarski</strong>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  20. Etap 3: Podstrony zamowienia.html i blog.html

    Kroki 20-24 · po tym etapie masz 19 z 36 kryteriów (pkt)

    Krok 20: Plik zamowienia.html

    Kryteria:

    R.3.2 Na przynajmniej jednej stronie kliknięcie odnośnika „Strona główna” otwiera plik index.html i kliknięcie odnośnika „Zamówienia” otwiera zamowienia.html

    ok. 1 min
    Polecenie z arkusza

    Strona główna oraz podstrona zamówienia są identyczne, za wyjątkiem panelu lewego.

    Kopia index.html jako zamowienia.html z pustym <main> - dostanie formularz. Działają odnośniki „Strona główna” i „Zamówienia”.

    zamowienia.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>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <nav id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </nav>
    <section id="logo">
        <img src="logo.png" alt="Kawa" width="198" height="110">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <main id="left">
    </main>
    <aside id="right">
        <h3>Oferta</h3>
        <ul>
            <li>Arabica</li>
            <li>Robusta</li>
            <li>bezkofeinowa</li>
            <li>zielona</li>
        </ul>
    </aside>
    <footer>
        Stronę przygotował: <strong>Bartosz Bryniarski</strong>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  21. Krok 21: Pole numeru kawy z etykietą

    Kryteria:

    R.3.4 Przynajmniej jedno pole edycyjne jest typu number

    ok. 1 min
    Polecenie z arkusza

    Cechy bloku lewego dla strony zamowienia.html: napis „Podaj numer kawy: ”, pole edycyjne typu numerycznego.

    <label for="coffee"> łączy napis z polem o tym identyfikatorze: kliknięcie napisu ustawia kursor w polu, a czytnik ekranu odczyta jego nazwę. step="1" - numer kawy jest liczbą całkowitą.

    zamowienia.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>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <nav id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </nav>
    <section id="logo">
        <img src="logo.png" alt="Kawa" width="198" height="110">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <main id="left">
        <label for="coffee">Podaj numer kawy: </label><input type="number" id="coffee" step="1"><br>
    </main>
    <aside id="right">
        <h3>Oferta</h3>
        <ul>
            <li>Arabica</li>
            <li>Robusta</li>
            <li>bezkofeinowa</li>
            <li>zielona</li>
        </ul>
    </aside>
    <footer>
        Stronę przygotował: <strong>Bartosz Bryniarski</strong>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  22. Krok 22: Pole wagi z etykietą

    ok. 1 min
    Polecenie z arkusza

    Poniżej napis „Podaj wagę w dekagramach: ”, pole edycyjne typu numerycznego.

    min="0" - strzałki pola nie zejdą poniżej zera; step="any" dopuszcza wagę z częścią ułamkową (np. 2,5 dag). Wpisanej ręcznie wartości ujemnej to nie blokuje - sprawdzi ją skrypt.

    zamowienia.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>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <nav id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </nav>
    <section id="logo">
        <img src="logo.png" alt="Kawa" width="198" height="110">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <main id="left">
        <label for="coffee">Podaj numer kawy: </label><input type="number" id="coffee" step="1"><br>
        <label for="weight">Podaj wagę w dekagramach: </label><input type="number" id="weight" min="0" step="any"><br>
    </main>
    <aside id="right">
        <h3>Oferta</h3>
        <ul>
            <li>Arabica</li>
            <li>Robusta</li>
            <li>bezkofeinowa</li>
            <li>zielona</li>
        </ul>
    </aside>
    <footer>
        Stronę przygotował: <strong>Bartosz Bryniarski</strong>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  23. Krok 23: Przycisk „Zamów” i paragraf na wynik

    Kryteria:

    R.2.8 Na stronie zamówień w bloku lewym umieszczono dwa pola edycyjne i przycisk "Zamów"

    ok. 2 min
    Polecenie z arkusza

    Poniżej przycisk o treści „Zamów”, kliknięcie przycisku powoduje wywołanie skryptu.

    Przycisk bez onclick - kliknięcie podepnie skrypt po identyfikatorze order-button. Paragraf result z aria-live="polite": czytnik ekranu przeczyta wynik, gdy się pojawi.

    zamowienia.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>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <nav id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </nav>
    <section id="logo">
        <img src="logo.png" alt="Kawa" width="198" height="110">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <main id="left">
        <label for="coffee">Podaj numer kawy: </label><input type="number" id="coffee" step="1"><br>
        <label for="weight">Podaj wagę w dekagramach: </label><input type="number" id="weight" min="0" step="any"><br>
        <button type="button" id="order-button">Zamów</button>
        <p id="result" aria-live="polite"></p>
    </main>
    <aside id="right">
        <h3>Oferta</h3>
        <ul>
            <li>Arabica</li>
            <li>Robusta</li>
            <li>bezkofeinowa</li>
            <li>zielona</li>
        </ul>
    </aside>
    <footer>
        Stronę przygotował: <strong>Bartosz Bryniarski</strong>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  24. Krok 24: Plik blog.html

    Kryteria: ,

    R.2.1 Witrynę internetową zapisano w plikach index.html, zamowienia.html i blog.html oraz w przynajmniej jednym pliku zastosowano właściwy standard kodowania polskich znaków

    R.3.3 Na przynajmniej jednej stronie działa przynajmniej jeden odnośnik z: „Blog” - blog.html lub „Gatunki kawy” - http://gatunki-kawy.pl/

    ok. 1 min
    Polecenie z arkusza

    W pliku blog.html należy umieścić jedynie tekst „Strona w trakcie budowy”.

    Jedno zdanie, bez szkieletu HTML - tyle wymaga arkusz („jedynie tekst”). W prawdziwej witrynie taka strona miałaby szkielet z kodowaniem i tytułem, ale tu dodatkowa treść byłaby niezgodna z poleceniem.

    blog.html HTML nowy plik 
    Strona w trakcie budowy
    Podgląd strony po tym kroku (blog.html)

  25. Etap 4: Styl CSS

    Kroki 25-33 · po tym etapie masz 31 z 36 kryteriów (pkt)

    Krok 25: Plik styl.css: zmienne, border-box i krój Garamond

    Kryteria: ,

    R.4.1 Ustawiono domyślny krój czcionki dla całej strony na Garamond (dla * lub html, lub body, lub kontenera całej strony)

    R.3.6 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl.css , formatowanie pochodzi jedynie z tego arkusza (poza pogrubieniem numeru zdającego) Uwaga: kryterium to nie jest spełnione również, gdy źle przypisano co najmniej jeden selektor do bloku (np. kropka zamiast #)

    ok. 2 min
    Polecenie z arkusza

    Cechy formatowania CSS: wspólne dla całej strony: krój czcionki Garamond.

    • zmienne CSS w :root - trzy kolory z arkusza (nazwy kolorów CSS) pod nazwami opisującymi rolę: góra strony, ciemne pasy, panele,
    • box-sizing: border-box - szerokość i wysokość obejmują dopełnienie, więc baner z padding: 30px i szerokością 100% nie wystaje poza okno,
    • krój Garamond z zapasowymi: gdy go nie ma, Times New Roman albo dowolny szeryfowy (serif).
    styl.css CSS nowy plik 
    :root {
    --top: Olive;
    --dark: SaddleBrown;
    --panel: Wheat;
}

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

* {
    font-family: Garamond, 'Times New Roman', serif;
}
    Podgląd strony po tym kroku (index.html)

  26. Krok 26: Bloki menu i logo

    ok. 2 min
    Polecenie z arkusza

    Dla bloku logo: kolor tła Olive; szerokość 25%, wysokość 110 px. Dla bloku menu: kolor tła Olive; szerokość 75%, wysokość 110 px.

    Kolor ze zmiennej --top (Olive), szerokości 75% i 25%, wysokość 110 px. display: block dla obrazu logo usuwa kilkupikselowy odstęp pod obrazem, który przeglądarka zostawia dla liter z ogonkami (obraz w linii tekstu stoi na linii bazowej) - logo o wysokości 110 px wypełnia blok dokładnie.

    styl.css CSS zmienione: 16 linii 
    :root {
    --top: Olive;
    --dark: SaddleBrown;
    --panel: Wheat;
}

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

* {
    font-family: Garamond, 'Times New Roman', serif;
}

#menu {
    background-color: var(--top);
    width: 75%;
    height: 110px;
}

#logo {
    background-color: var(--top);
    width: 25%;
    height: 110px;
}

#logo img {
    display: block;
}
    Podgląd strony po tym kroku (index.html)

  27. Krok 27: Baner i stopka

    Kryteria: ,

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

    R.4.7 Ustawiono marginesy wewnętrzne (padding) 30px dla banera i stopki

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla banera i stopki: kolor tła SaddleBrown, biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 30 px.

    SaddleBrown, biały tekst, wyśrodkowanie, dopełnienie 30 px. width: 100% - w układzie flex blok na całą szerokość zawsze zajmie osobny wiersz.

    styl.css CSS zmienione: 8 linii 
    :root {
    --top: Olive;
    --dark: SaddleBrown;
    --panel: Wheat;
}

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

* {
    font-family: Garamond, 'Times New Roman', serif;
}

#menu {
    background-color: var(--top);
    width: 75%;
    height: 110px;
}

#logo {
    background-color: var(--top);
    width: 25%;
    height: 110px;
}

#logo img {
    display: block;
}

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

  28. Krok 28: Blok lewy i prawy

    Kryteria: , , ,

    R.4.2 Ustawiono kolor tła Olive dla bloku logo i menu oraz SaddleBrown dla banera i stopki, oraz Wheat dla bloku lewego i prawego

    R.4.4 Ustawiono wysokość bloków logo i menu na 110px oraz bloków lewego i prawego na 450px

    R.4.5 Ustawiono szerokość logo na 25%, menu na 75%, bloków lewego i prawego na 50%

    R.4.6 Ustawiono wyrównanie tekstu do środka dla banera, bloku lewego i stopki oraz rozmiar czcionki 150% bloku lewego i prawego

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla bloku lewego i prawego: kolor tła Wheat, szerokość 50%, wysokość 450 px, rozmiar czcionki 150%. Dodatkowo dla bloku lewego: wyrównanie czcionki do środka.

    Wspólna reguła dla obu paneli i krótka reguła z wyśrodkowaniem tylko dla lewego.

    styl.css CSS zmienione: 11 linii 
    :root {
    --top: Olive;
    --dark: SaddleBrown;
    --panel: Wheat;
}

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

* {
    font-family: Garamond, 'Times New Roman', serif;
}

#menu {
    background-color: var(--top);
    width: 75%;
    height: 110px;
}

#logo {
    background-color: var(--top);
    width: 25%;
    height: 110px;
}

#logo img {
    display: block;
}

#banner, footer {
    background-color: var(--dark);
    color: white;
    text-align: center;
    padding: 30px;
    width: 100%;
}

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

#left {
    text-align: center;
}
    Podgląd strony po tym kroku (index.html)

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

    Kryteria:

    R.3.1 Układ bloków po uruchomieniu przynajmniej jednej strony w przeglądarce jest zgodny z Obrazem 2 w arkuszu egzaminacyjnym

    ok. 3 min
    Polecenie z arkusza

    Podział strony na bloki: na górze dwa bloki: menu i logo, poniżej baner, poniżej dwa bloki: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji tak, aby układ bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2.

    <body> jako kontener flex z flex-wrap: wrap: bloki stoją obok siebie, a gdy następny się nie mieści, przechodzi do nowego wiersza. Szerokości z arkusza robią resztę - menu 75% + logo 25% to pierwszy wiersz, baner (100%) drugi, panele 50% + 50% trzeci, stopka czwarty. margin: 0 usuwa domyślny odstęp strony od krawędzi okna. Reguła img z max-width: 100% zmniejsza obrazy na wąskim ekranie.

    Pomiar w Chrome przy oknie 1280 px: menu 960 px, logo 320 px, panele po 640 × 450 px, bez poziomego paska przewijania.

    styl.css CSS zmienione: 11 linii 
    :root {
    --top: Olive;
    --dark: SaddleBrown;
    --panel: Wheat;
}

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

* {
    font-family: Garamond, 'Times New Roman', serif;
}

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

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

#menu {
    background-color: var(--top);
    width: 75%;
    height: 110px;
}

#logo {
    background-color: var(--top);
    width: 25%;
    height: 110px;
}

#logo img {
    display: block;
}

#banner, footer {
    background-color: var(--dark);
    color: white;
    text-align: center;
    padding: 30px;
    width: 100%;
}

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

#left {
    text-align: center;
}
    Podgląd strony po tym kroku (index.html)

  30. Krok 30: Nagłówek pierwszego stopnia

    ok. 1 min
    Polecenie z arkusza

    Dla selektora nagłówka pierwszego stopnia: odległość między literami 12 px.

    letter-spacing: 12px rozstawia litery „Sklep z kawą”.

    styl.css CSS zmienione: 4 linie 
    :root {
    --top: Olive;
    --dark: SaddleBrown;
    --panel: Wheat;
}

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

* {
    font-family: Garamond, 'Times New Roman', serif;
}

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

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

#menu {
    background-color: var(--top);
    width: 75%;
    height: 110px;
}

#logo {
    background-color: var(--top);
    width: 25%;
    height: 110px;
}

#logo img {
    display: block;
}

#banner, footer {
    background-color: var(--dark);
    color: white;
    text-align: center;
    padding: 30px;
    width: 100%;
}

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

#left {
    text-align: center;
}

h1 {
    letter-spacing: 12px;
}
    Podgląd strony po tym kroku (index.html)

  31. Krok 31: Odnośniki menu

    Kryteria:

    R.4.8 Ustawiono cechy: odległość między literami 12px dla selektora h1 oraz wysokość linii 110px, bez podkreślenia dla selektora a

    ok. 2 min
    Polecenie z arkusza

    Dla selektora odnośnika: kolor czcionki LightGrey, marginesy zewnętrzne 30 px, rozmiar czcionki 150%, wysokość linii 110 px, bez podkreślenia.

    line-height: 110px równe wysokości menu stawia napisy w połowie jego wysokości. Marginesy 30 px rozsuwają odnośniki w poziomie.

    ⚠️ Rozbieżność w kluczu: kryterium R.4.8 łączy odstęp liter nagłówka z wysokością linii i brakiem podkreślenia odnośnika, a R.4.10 sprawdza te dwie cechy odnośnika jeszcze raz, razem z resztą jego stylu. Kryteria się pokrywają - oba są spełnione przez ten sam kod.

    styl.css CSS zmienione: 8 linii 
    :root {
    --top: Olive;
    --dark: SaddleBrown;
    --panel: Wheat;
}

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

* {
    font-family: Garamond, 'Times New Roman', serif;
}

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

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

#menu {
    background-color: var(--top);
    width: 75%;
    height: 110px;
}

#logo {
    background-color: var(--top);
    width: 25%;
    height: 110px;
}

#logo img {
    display: block;
}

#banner, footer {
    background-color: var(--dark);
    color: white;
    text-align: center;
    padding: 30px;
    width: 100%;
}

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

#left {
    text-align: center;
}

h1 {
    letter-spacing: 12px;
}

a {
    color: LightGrey;
    margin: 30px;
    font-size: 150%;
    line-height: 110px;
    text-decoration: none;
}
    Podgląd strony po tym kroku (index.html)

  32. Krok 32: Odnośnik pod kursorem i przy nawigacji klawiaturą

    Kryteria:

    R.4.10 Dla odnośnika ustawiono: kolor czcionki LightGrey, rozmiar czcionki 150%, marginesy zewnętrzne 30 px, oraz wysokość linii (line-height) 110px, bez podkreślenia dla selektora a (text-decoration: none) oraz gdy kursor znajdzie się na odnośniku jego kolor czcionki zmienia się na biały oraz dodawane jest jedynie dolne obramowanie 1 px, linią ciągłą o białym kolorze

    ok. 2 min
    Polecenie z arkusza

    Gdy kursor znajdzie się na odnośniku jego kolor czcionki zmienia się na biały oraz dodawane jest jedynie dolne obramowanie 1 px, linią ciągłą o białym kolorze.

    :hover - kursor nad odnośnikiem. Ten sam wygląd dostaje :focus-visible - odnośnik wybrany klawiszem Tab: osoba, która nie używa myszy, też widzi, gdzie jest. border-bottom dodaje tylko dolną krawędź - ciągłą, białą, 1 px.

    styl.css CSS zmienione: 6 linii 
    :root {
    --top: Olive;
    --dark: SaddleBrown;
    --panel: Wheat;
}

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

* {
    font-family: Garamond, 'Times New Roman', serif;
}

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

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

#menu {
    background-color: var(--top);
    width: 75%;
    height: 110px;
}

#logo {
    background-color: var(--top);
    width: 25%;
    height: 110px;
}

#logo img {
    display: block;
}

#banner, footer {
    background-color: var(--dark);
    color: white;
    text-align: center;
    padding: 30px;
    width: 100%;
}

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

#left {
    text-align: center;
}

h1 {
    letter-spacing: 12px;
}

a {
    color: LightGrey;
    margin: 30px;
    font-size: 150%;
    line-height: 110px;
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: white;
    border-bottom: 1px solid white;
}
    Podgląd strony po tym kroku (index.html)

  33. Krok 33: Przekreślona „bezkofeinowa”

    Kryteria:

    R.4.9 Ustawiono styl tekstu przekreślonego, który zastosowano tylko do trzeciego elementu listy "bezkofeinowa"

    ok. 1 min
    Polecenie z arkusza

    Dla elementu nr 3 („bezkofeinowa”) listy umieszczonej w bloku lewym: tekst przekreślony.

    Pseudoklasa :nth-child(3) wybiera trzeci element wśród rodzeństwa - tu trzeci element listy w bloku prawym. HTML zostaje bez dodatkowego identyfikatora (sprawdzone w Chrome: przekreślony jest tylko trzeci element).

    ⚠️ Rozbieżność arkusz-klucz: arkusz pisze o liście „umieszczonej w bloku lewym”, ale jedyna lista na stronie stoi w bloku prawym (blok lewy ma obraz kawa albo formularz zamówienia). Klucz R.4.9 mówi po prostu o trzecim elemencie listy „bezkofeinowa” - przekreślenie dostaje element listy z bloku prawego.

    styl.css CSS zmienione: 4 linie 
    :root {
    --top: Olive;
    --dark: SaddleBrown;
    --panel: Wheat;
}

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

* {
    font-family: Garamond, 'Times New Roman', serif;
}

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

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

#menu {
    background-color: var(--top);
    width: 75%;
    height: 110px;
}

#logo {
    background-color: var(--top);
    width: 25%;
    height: 110px;
}

#logo img {
    display: block;
}

#banner, footer {
    background-color: var(--dark);
    color: white;
    text-align: center;
    padding: 30px;
    width: 100%;
}

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

#left {
    text-align: center;
}

h1 {
    letter-spacing: 12px;
}

a {
    color: LightGrey;
    margin: 30px;
    font-size: 150%;
    line-height: 110px;
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: white;
    border-bottom: 1px solid white;
}

#right li:nth-child(3) {
    text-decoration: line-through;
}
    Podgląd strony po tym kroku (index.html)

  34. Etap 5: Skrypt

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

    Krok 34: skrypt.js: odczyt pól po kliknięciu „Zamów”

    Kryteria: , ,

    R.5.1 Skrypt napisano w języku JavaScript, zawiera on przynajmniej jedną zgodną ze składnią instrukcję

    R.5.2 Skrypt prawidłowo pobiera wartości z pól edycyjnych

    R.3.5 Kliknięcie przycisku powoduje wywołanie skryptu (nazwa funkcji w skrypcie jest skojarzona z odpowiednim zdarzeniem przycisku)

    ok. 3 min
    Polecenie z arkusza

    Wymagania dotyczące skryptu: wykonywany po stronie przeglądarki; wywoływany na stronie zamowienia.html po kliknięciu przycisku „Zamów”.

    Plik skrypt.js dołączony w <head> z atrybutem defer - wykona się po wczytaniu całego HTML-a, więc znajdzie pola i przycisk. Stałe const trzymają odwołania do elementów, addEventListener('click', …) podpina funkcję strzałkową pod przycisk, a Number(…) zamienia tekst z pól na liczby.

    Typowe błędy

    Bez defer skrypt w <head> wykonuje się przed powstaniem przycisku - querySelector zwraca null i podpięcie kliknięcia kończy się błędem.

    skrypt.js JavaScript nowy plik 
    const coffeeInput = document.querySelector('#coffee');
const weightInput = document.querySelector('#weight');
const result = document.querySelector('#result');

document.querySelector('#order-button').addEventListener('click', () => {
    const number = Number(coffeeInput.value);
    const weight = Number(weightInput.value);
});
    zamowienia.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>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
    <script src="skrypt.js" defer></script>
</head>
<body>
    <nav id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </nav>
    <section id="logo">
        <img src="logo.png" alt="Kawa" width="198" height="110">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <main id="left">
        <label for="coffee">Podaj numer kawy: </label><input type="number" id="coffee" step="1"><br>
        <label for="weight">Podaj wagę w dekagramach: </label><input type="number" id="weight" min="0" step="any"><br>
        <button type="button" id="order-button">Zamów</button>
        <p id="result" aria-live="polite"></p>
    </main>
    <aside id="right">
        <h3>Oferta</h3>
        <ul>
            <li>Arabica</li>
            <li>Robusta</li>
            <li>bezkofeinowa</li>
            <li>zielona</li>
        </ul>
    </aside>
    <footer>
        Stronę przygotował: <strong>Bartosz Bryniarski</strong>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  35. Krok 35: Cennik ze słownika i koszt

    Kryteria:

    R.5.3 Skrypt oblicza całkowity koszt kawy mnożąc wagę i cenę kawy ustaloną na podstawie numeru kawy (1 - 5zł, 2 - 7zł, 4 - 6zł, inne - 0 zł)

    ok. 3 min
    Polecenie z arkusza

    Skrypt pobiera wartości z obu pól edycyjnych i oblicza koszt kawy uwzględniając jej numer i wagę, zgodnie z tabelą 1; w przypadku, gdy podano inną wartość niż 1, 2, 4 cena wynosi 0 zł.

    Tabela 1 to dane, więc zamiast drabinki if stoi słownik PRICES: numer kawy jest kluczem, cena - wartością. PRICES[number] dla numeru spoza tabeli daje undefined, a ?? podstawia wtedy 0 zł - tak każe arkusz. Nowa kawa w ofercie to jedna linia w słowniku.

    skrypt.js JavaScript zmienione: 9 linii 
    const coffeeInput = document.querySelector('#coffee');
const weightInput = document.querySelector('#weight');
const result = document.querySelector('#result');

// tabela 1 arkusza: numer kawy -> cena za 1 dag (zł)
const PRICES = {
    1: 5,
    2: 7,
    4: 6,
};

document.querySelector('#order-button').addEventListener('click', () => {
    const number = Number(coffeeInput.value);
    const weight = Number(weightInput.value);
    const price = PRICES[number] ?? 0;
    const cost = price * weight;
});
    Podgląd strony po tym kroku (zamowienia.html)

  36. Krok 36: Sprawdzenie wagi i wynik pod przyciskiem

    Kryteria:

    R.5.4 Wynik obliczeń jest wyświetlany pod przyciskiem w formacie: „Koszt zamówienia wynosi: <koszt> zł”, gdzie <koszt> oznacza obliczoną wartość

    ok. 3 min
    Polecenie z arkusza

    Po obliczeniu całkowitego kosztu kawy jest wyświetlany wynik pod przyciskiem w formacie: „Koszt zamówienia wynosi: <koszt> zł”, gdzie <koszt> oznacza obliczoną wartość.

    Przed liczeniem skrypt sprawdza wagę: puste pole albo liczba nie większa od zera daje komunikat zamiast kosztu (bez tego waga -4 dałaby „-20 zł”), a return kończy obsługę kliknięcia. Wynik powstaje z szablonu w odwrotnych apostrofach (${cost} wstawia liczbę) i trafia do paragrafu przez textContent - jako zwykły tekst.

    Sprawdzone kliknięciem w Chrome: 1 i 10 dag - „Koszt zamówienia wynosi: 50 zł”, 2 i 3 dag - 21 zł, 4 i 5 dag - 30 zł, numer 3 lub 9 - 0 zł, waga -4 - komunikat.

    skrypt.js JavaScript zmienione: 7 linii 
    const coffeeInput = document.querySelector('#coffee');
const weightInput = document.querySelector('#weight');
const result = document.querySelector('#result');

// tabela 1 arkusza: numer kawy -> cena za 1 dag (zł)
const PRICES = {
    1: 5,
    2: 7,
    4: 6,
};

document.querySelector('#order-button').addEventListener('click', () => {
    const number = Number(coffeeInput.value);
    const weight = Number(weightInput.value);
    const price = PRICES[number] ?? 0;

    if (weightInput.value === '' || weight <= 0) {
        result.textContent = 'Podaj wagę większą od zera';
        return;
    }

    const cost = price * weight;
    result.textContent = `Koszt zamówienia wynosi: ${cost} zł`;
});
    Podgląd strony po tym kroku (zamowienia.html)

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

    Kroki 37-38 · po tym etapie masz 36 z 36 kryteriów (pkt)

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

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki: na górze dwa bloki: menu i logo, poniżej baner, poniżej dwa bloki: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji tak, aby układ bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2.

    • znaczniki: <nav>, <main>, <aside> zamiast samych <section> - przeglądarka i czytnik ekranu wiedzą, gdzie jest nawigacja, a gdzie treść,
    • układ: jeden display: flex z flex-wrap na <body> zamiast float w czterech blokach i clear w dwóch,
    • przekreślenie: :nth-child(3) zamiast identyfikatora dopisanego do elementu listy - HTML zostaje czystą treścią,
    • dostępność: etykiety <label for> przy polach i styl :focus-visible dla nawigacji klawiaturą.

    Klucz ocenia efekt (układ zgodny z obrazem 2, cechy stylu) - obie wersje dostają te same punkty.

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

  38. Krok 38: Skrypt: onclick a addEventListener

    ok. 2 min
    Polecenie z arkusza

    Skrypt pobiera wartości z obu pól edycyjnych i oblicza koszt kawy uwzględniając jej numer i wagę, zgodnie z tabelą 1; w przypadku, gdy podano inną wartość niż 1, 2, 4 cena wynosi 0 zł.

    • wywołanie: onclick="order()" w HTML kontra addEventListener w osobnym pliku - HTML bez kodu JavaScript, a skrypt można podpiąć pod kilka stron,
    • cennik: drabinka if kontra słownik PRICES z ?? - tabela 1 zapisana jako dane,
    • dane wejściowe: wersja podstawowa (przed etapem dobrych praktyk) liczy koszt z wagi ujemnej i pustej, tu waga jest sprawdzona,
    • wypisanie: innerHTML z doklejaniem + kontra textContent z szablonem.

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

  39. Etap 7: Oddanie pracy

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

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

    ok. 3 min
    Polecenie z arkusza

    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 folderze powinny się znajdować pliki: blog, edytor, index, kawa, logo, przeglądarka, styl, zamowienia, ewentualnie inne przygotowane pliki.

    W przeglądarka.txt nazwa przeglądarki, w której sprawdzasz strony. W folderze zdającego: blog.html, edytor.png, index.html, kawa.png, logo.png, przeglądarka.txt, styl.css, zamowienia.html i skrypt.js (bez niego przycisk „Zamów” nic nie zrobi). 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 36.

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