Przejdź do głównej treści
E.14-01-22.06-SGCzerwiec 2022 · 40 kroków · ok. 80 min · 34 kryteria z klucza

Rozwiązanie krok po kroku: Fabryka cukierków z zamówieniem koloru (Wersja podstawowa)

Witryna fabryki cukierków: dwie strony - index.html i zamowienie.html - z tym samym układem sześciu bloków (dwa górne, baner, dwa główne i stopka), wspólny arkusz stylów styl10.css i skrypt JavaScript, który po kliknięciu przycisku „Zamówienie” wypisuje nazwę wybranego kształtu cukierka i barwi przycisk „Kolor” na kolor złożony z trzech składowych RGB. Do tego trzy grafiki: zdjęcie w odcieniach szarości (tło odnośnika), przeskalowane zdjęcie cukierków i logotyp - czerwony żelek z napisem „Cukierki” na okręgu, na przezroczystym tle.

To arkusz E.14 z czerwca 2022 - kwalifikacji formuły 2012, którą zastąpiła INF.03. CKE wydała go jeszcze dwa razy (styczeń 2024 i styczeń 2025) z tą samą treścią, ale z przebudowanym kluczem - te arkusze mają w serwisie osobne rozwiązania. Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypt jest napisany najprościej, tak jak podpowiada tabela metod DOM w arkuszu (getElementById, innerHTML, style), a na końcu sprawdzony na błędnych danych i poprawiony.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (flex, addEventListener)” jest drugi sposób rozwiązania tego samego arkusza: znaczniki semantyczne, układ flexbox, zmienne CSS, etykiety <label> i skrypt w osobnym pliku z obsługą zdarzenia w JavaScripcie - obie wersje są zgodne z kluczem.

Zdjęcia pochodzą z oryginalnego archiwum CKE materialy3.zip (załącznik na stronie arkusza). Układ stron jest zmierzony w przeglądarce Chrome, a skrypt sprawdzony prawdziwym kliknięciem dla kształtów 1, 2, 3 i 7.

Jak liczą się punkty. Klucz ma 34 kryteria (R.1.1 - R.5.5), 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.

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ść pliku z logotypem 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 13 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.

    W edytorze zaznaczającym składnię (np. Notepad++, Visual Studio Code) tworzysz w folderze zdającego plik index.html ze szkieletem dokumentu HTML5: <!DOCTYPE html>, <html lang="pl"> (treść jest po polsku), <head> i <body>. Strona główna powstaje pierwsza - podstrona zamówień będzie jej kopią z innym banerem i blokiem lewym, więc wszystko, co wspólne, wpisujesz tylko raz.

    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

    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"> jako pierwsza linia w <head>. Bez niej „Słodka kraina”, „liść” i „Strefa zamówień” mogą wyświetlić się z krzakami. Plik trzeba też zapisać w UTF-8 (w Notepad++ menu Kodowanie). Klucz ocenia kodowanie razem z nazwami obu plików - punkt przyjdzie po utworzeniu zamowienie.html.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (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> w <head> - napis na karcie przeglądarki, nie na stronie. Nie myl go z nagłówkiem banera („Słodka kraina”).

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <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>. Nazwa ma w sobie liczbę: styl10.css. Sam plik stylów powstanie po HTML-u - do tego czasu przeglądarka po prostu nie znajdzie go i pokaże stronę bez formatowania.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <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 strony

    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.

    Bloki w kolejności, w jakiej czyta się stronę na obrazie 2: dwa górne (<section> z identyfikatorami top-left i top-right), baner <header>, dwa główne <section> - left i right - i stopka <footer>. Wszystkie to znaczniki sekcji, których wymaga arkusz. Identyfikatory są potrzebne, bo bloki dostaną różne style (nazwy po angielsku - arkusz ich nie narzuca).

    Na razie bloki są puste i stoją jeden pod drugim; obok siebie ustawi je CSS.

    Typowe błędy

    Bloki zrobione samymi <div> bez znaczników sekcji klucz ocenia gorzej - R.2.3 wymaga „znaczników sekcji”.

    index.html HTML zmienione: 12 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
    </section>
    <section id="top-right">
    </section>
    <header id="banner">
    </header>
    <section id="left">
    </section>
    <section id="right">
    </section>
    <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 napisem „Zamów cukierki”. Odnośnik dostaje identyfikator order-link - za chwilę tylko on dostanie w CSS tło ze zdjęciem cukierki1.jpg. Plik zamowienie.html jeszcze nie istnieje, więc kliknięcie da na razie błąd - odnośnik zadziała po utworzeniu podstrony.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right">
    </section>
    <header id="banner">
    </header>
    <section id="left">
    </section>
    <section id="right">
    </section>
    <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 Przynajmniej jeden obraz ma tekst alternatywny: dla logotypu - "Nasze logo", dla cukierki3.jpg - "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 wstawiony wewnątrz znacznika <a> staje się odnośnikiem - kliknięcie logotypu otwiera index.html. Atrybut alt to tekst, który przeczyta czytnik ekranu i który pokaże się, gdy plik się nie wczyta. Znacznik <img> w HTML5 nie ma znacznika zamykającego.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo"></a>
    </section>
    <header id="banner">
    </header>
    <section id="left">
    </section>
    <section id="right">
    </section>
    <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”.

    Drugiego stopnia to <h2>. Klucz R.2.4 sprawdza go razem z <h1> w banerze i pogrubionym autorem w stopce - punkt przyjdzie po kroku z nagłówkiem „Słodka kraina”.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo"></a>
    </section>
    <header id="banner">
    </header>
    <section id="left">
    </section>
    <section id="right">
        <h2>Nasza oferta</h2>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

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

    ok. 3 min
    Polecenie z arkusza

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

    Tabela to <table>, wiersz - <tr>, komórka - <td>. Dwa wiersze i dwie kolumny, ale drugą kolumnę tworzy jedna komórka rozciągnięta na oba wiersze: rowspan="2". Dlatego pierwszy wiersz ma dwie komórki, a drugi tylko jedną - miejsce w drugiej kolumnie zajmuje już scalona komórka z wiersza wyżej.

    Typowe błędy

    Druga komórka <td> dopisana w drugim wierszu przy rowspan="2" wypycha tabelę do trzech kolumn - wtedy to już nie jest tabela 2 × 2.

    index.html HTML zmienione: 9 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo"></a>
    </section>
    <header id="banner">
    </header>
    <section id="left">
    </section>
    <section id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <td></td>
                <td rowspan="2"></td>
            </tr>
            <tr>
                <td></td>
            </tr>
        </table>
    </section>
    <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.5 Na przynajmniej jednej stronie w bloku prawym umieszczono tabelę o rozmiarze 2x2, druga kolumna ma scalone wiersze i znajduje się w nich tekst zastosowano znaczniki table, tr, td

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

    Łamanie wiersza w tekście to <br> - przeglądarka przenosi dalszy ciąg do nowej linii dokładnie w tym miejscu, po słowie „zamówić”. Zwykły znak nowego wiersza w kodzie HTML przeglądarka traktuje jak spację.

    index.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo"></a>
    </section>
    <header id="banner">
    </header>
    <section id="left">
    </section>
    <section id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <td>Kształty</td>
                <td rowspan="2">Możesz zamówić<br>dowolny kolor cukierka</td>
            </tr>
            <tr>
                <td></td>
            </tr>
        </table>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  18. Krok 18: Drugi wiersz: lista numerowana

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

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

    Lista numerowana (uporządkowana) to <ol>, każdy jej element - <li>. Numery 1, 2, 3 dopisze przeglądarka. Kolejność ma znaczenie: skrypt będzie zamieniał numer kształtu na nazwę w tej samej kolejności - 1 to cytryna, 2 liść, 3 banan.

    Typowe błędy

    <ul> daje listę punktowaną - klucz wymaga znaczników ol i li.

    index.html HTML zmienione: 7 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo"></a>
    </section>
    <header id="banner">
    </header>
    <section id="left">
    </section>
    <section id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <td>Kształty</td>
                <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>
    </section>
    <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 wpisujesz swój numer PESEL - w tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora. Pogrubienie daje <b> (albo <strong>) - to jedyne formatowanie, które klucz pozwala zrobić w HTML zamiast w CSS.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo"></a>
    </section>
    <header id="banner">
    </header>
    <section id="left">
    </section>
    <section id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <td>Kształty</td>
                <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>
    </section>
    <footer>
        Autor strony: <b>Bartosz Bryniarski</b>
    </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 pierwszego stopnia: "Słodka kraina" lub "Strefa zamówień" oraz na przynajmniej jednej stronie w bloku prawym nagłówek drugiego stopnia: "Nasza oferta” oraz w stopce umieszczono numer zdającego oraz jest on pogrubiony

    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 banerze - jedyny nagłówek pierwszego stopnia na stronie. Teraz strona ma komplet do R.2.4: <h1> w banerze, <h2> „Nasza oferta” w bloku prawym i pogrubionego autora w stopce.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo"></a>
    </section>
    <header id="banner">
        <h1>Słodka kraina</h1>
    </header>
    <section id="left">
    </section>
    <section id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <td>Kształty</td>
                <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>
    </section>
    <footer>
        Autor strony: <b>Bartosz Bryniarski</b>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

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

    Kryteria:

    R.2.7 Na przynajmniej jednej stronie umieszczono obraz z logotypem w bloku górnym po prawej stronie oraz na stronie index.html obraz cukierki3.jpg w bloku głównym po lewej stronie

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

    <img> ze zdjęciem przeskalowanym na początku do 600 × 450 px. Wymiarów nie ustawiasz w HTML - plik ma już właściwy rozmiar, a atrybuty width/height niczego by nie zmniejszyły na dysku.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo"></a>
    </section>
    <header id="banner">
        <h1>Słodka kraina</h1>
    </header>
    <section id="left">
        <img src="cukierki3.jpg" alt="Nasze cukierki">
    </section>
    <section id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <td>Kształty</td>
                <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>
    </section>
    <footer>
        Autor strony: <b>Bartosz Bryniarski</b>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  22. Etap 3: Strona zamowienie.html

    Kroki 22-26 · po tym etapie masz 16 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ń”.

    Podstrona ma ten sam układ i te same bloki, więc zapisujesz index.html pod nazwą zamowienie.html (bez polskiej litery w nazwie pliku - tak jak w arkuszu) i zmieniasz dwie rzeczy: w banerze „Strefa zamówień”, a blok lewy opróżniasz - dostanie formularz zamówienia.

    Teraz działają oba odnośniki: „Zamów cukierki” otwiera tę stronę, a logotyp wraca na stronę główną.

    zamowienie.html HTML nowy plik 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo"></a>
    </section>
    <header id="banner">
        <h1>Strefa zamówień</h1>
    </header>
    <section id="left">
    </section>
    <section id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <td>Kształty</td>
                <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>
    </section>
    <footer>
        Autor strony: <b>Bartosz Bryniarski</b>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienie.html)

  23. Krok 23: Numer kształtu

    ok. 1 min
    Polecenie z arkusza

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

    Tekst, <br> i pole <input type="number"> - pole liczbowe ma w przeglądarce strzałki zmiany wartości. Identyfikator shape jest dla skryptu: po nim getElementById znajdzie pole i odczyta wpisaną liczbę.

    zamowienie.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo"></a>
    </section>
    <header id="banner">
        <h1>Strefa zamówień</h1>
    </header>
    <section id="left">
        Numer kształtu: <br>
        <input type="number" id="shape"><br>
    </section>
    <section id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <td>Kształty</td>
                <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>
    </section>
    <footer>
        Autor strony: <b>Bartosz Bryniarski</b>
    </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 zamowienie.html 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:”.

    Trzy pola liczbowe w jednej linii, każde poprzedzone literą składowej (jak na obrazie 2). Identyfikatory red, green, blue - po nich skrypt odczyta składowe koloru. Strona ma teraz cztery pola edycyjne typu number.

    zamowienie.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo"></a>
    </section>
    <header id="banner">
        <h1>Strefa zamówień</h1>
    </header>
    <section id="left">
        Numer kształtu: <br>
        <input type="number" id="shape"><br>
        skomponuj swój kolor, podaj RGB: <br>
        R: <input type="number" id="red">
        G: <input type="number" id="green">
        B: <input type="number" id="blue"><br>
    </section>
    <section id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <td>Kształty</td>
                <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>
    </section>
    <footer>
        Autor strony: <b>Bartosz Bryniarski</b>
    </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.

    Atrybut onclick="order()" każe przeglądarce po kliknięciu wywołać funkcję order - napiszesz ją w kroku ze skryptem (do tego czasu kliknięcie zgłosi w konsoli błąd „order is not defined”). Paragraf <p> z identyfikatorem result ma na start tekst „Twoje zamówienie”, który skrypt podmieni.

    zamowienie.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo"></a>
    </section>
    <header id="banner">
        <h1>Strefa zamówień</h1>
    </header>
    <section id="left">
        Numer kształtu: <br>
        <input type="number" id="shape"><br>
        skomponuj swój kolor, podaj RGB: <br>
        R: <input type="number" id="red">
        G: <input type="number" id="green">
        B: <input type="number" id="blue"><br>
        <button onclick="order()">Zamówienie</button>
        <p id="result">Twoje zamówienie</p>
    </section>
    <section id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <td>Kształty</td>
                <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>
    </section>
    <footer>
        Autor strony: <b>Bartosz Bryniarski</b>
    </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”.

    Ten przycisk niczego nie wywołuje - to skrypt przycisku „Zamówienie” zmieni jego tło. Identyfikator color pozwoli skryptowi go znaleźć.

    zamowienie.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo"></a>
    </section>
    <header id="banner">
        <h1>Strefa zamówień</h1>
    </header>
    <section id="left">
        Numer kształtu: <br>
        <input type="number" id="shape"><br>
        skomponuj swój kolor, podaj RGB: <br>
        R: <input type="number" id="red">
        G: <input type="number" id="green">
        B: <input type="number" id="blue"><br>
        <button onclick="order()">Zamówienie</button>
        <p id="result">Twoje zamówienie</p>
        <button id="color">Kolor</button>
    </section>
    <section id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <td>Kształty</td>
                <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>
    </section>
    <footer>
        Autor strony: <b>Bartosz Bryniarski</b>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienie.html)

  27. Etap 4: Styl CSS

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

    Krok 27: Plik styl10.css: krój Helvetica

    Kryteria: ,

    R.4.1 Ustawiono krój czcionki dla całej strony (* lub body lub html lub kontener 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 (z wyjątkiem pogrubienia numeru zdającego) Uwaga: kryterium to nie jest spełnione również, gdy zdający źle przypisał co najmniej jeden selektor do bloku (np. kropka zamiast #)

    ok. 1 min
    Polecenie z arkusza

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

    Plik styl10.css w folderze zdającego. Selektor * obejmuje wszystkie elementy strony - także pola formularza i przyciski, które nie dziedziczą kroju po body. W Windowsie nie ma kroju Helvetica, więc przeglądarka podstawia podobny (Arial) - w kodzie i tak ma stać nazwa z arkusza. Od tej chwili obie strony są połączone z działającym arkuszem stylów.

    Typowe błędy

    Plik zapisany jako styl10.css.txt (ukryte rozszerzenia w Windows) albo styl.css - strona nie dostanie żadnego stylu, a z nim przepada R.3.4.

    styl10.css CSS nowy plik 
    * {
    font-family: Helvetica;
}
    Podgląd strony po tym kroku (index.html)

  28. Krok 28: Bloki górne

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

    Jedna reguła dla dwóch bloków - selektory po przecinku. Kolor z arkusza zapisujesz wprost funkcją rgb(146, 184, 112) (to samo co #92B870). Szerokość 50% liczy się od szerokości okna, więc bloki zajmą po połowie strony - na razie jeszcze jeden pod drugim.

    styl10.css CSS zmienione: 6 linii 
    * {
    font-family: Helvetica;
}
#top-left, #top-right {
    background-color: rgb(146, 184, 112);
    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 (padding) 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 padding: 5px (marginesy wewnętrzne ze wszystkich stron). Całkowita wysokość bloku to 90 px: wysokość dotyczy samej treści, a dopełnienie dochodzi z góry i z dołu.

    styl10.css CSS zmienione: 7 linii 
    * {
    font-family: Helvetica;
}
#top-left, #top-right {
    background-color: rgb(146, 184, 112);
    text-align: center;
    width: 50%;
    height: 170px;
}
#banner, footer {
    background-color: rgb(100, 61, 49);
    color: white;
    text-align: center;
    height: 80px;
    padding: 5px;
}
    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.

    Ten sam zielony co w blokach górnych, połowa szerokości i 450 px wysokości. W tym miejscu wszystkie kolory, wysokości i szerokości z arkusza są już ustawione.

    styl10.css CSS zmienione: 5 linii 
    * {
    font-family: Helvetica;
}
#top-left, #top-right {
    background-color: rgb(146, 184, 112);
    text-align: center;
    width: 50%;
    height: 170px;
}
#banner, footer {
    background-color: rgb(100, 61, 49);
    color: white;
    text-align: center;
    height: 80px;
    padding: 5px;
}
#left, #right {
    background-color: rgb(146, 184, 112);
    width: 50%;
    height: 450px;
}
    Podgląd strony po tym kroku (index.html)

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

    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 bloków zgodny z obrazem 2 w arkuszu (prawidłowo zastosowano właściwości CSS układające bloki na stronie, np. float i clear lub width:100% albo display flex albo grid)

    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.

    • float: left w blokach górnych i głównych - blok „opływa” do lewej, a następny staje obok niego, dopóki mieści się w szerokości strony; dwa bloki po 50% wypełniają cały wiersz,
    • clear: both w banerze i stopce - ten blok nie może stać obok bloku opływanego, więc schodzi pod niego i zajmuje całą szerokość.

    Układ jest teraz taki jak na obrazie 2. Pomiar w Chrome przy oknie szerokim na 1280 px: bloki górne po 632 px i 170 px wysokości, baner 90 px, bloki główne po 450 px, stopka zaraz pod nimi.

    Typowe błędy

    float bez clear w banerze sprawia, że baner wjeżdża pod bloki górne (jego tło zaczyna się na górze strony). Bloki z dopełnieniem (padding) przy szerokości 50% nie mieszczą się we dwa w wierszu.

    styl10.css CSS zmienione: 3 linie 
    * {
    font-family: Helvetica;
}
#top-left, #top-right {
    background-color: rgb(146, 184, 112);
    text-align: center;
    width: 50%;
    height: 170px;
    float: left;
}
#banner, footer {
    background-color: rgb(100, 61, 49);
    color: white;
    text-align: center;
    height: 80px;
    padding: 5px;
    clear: both;
}
#left, #right {
    background-color: rgb(146, 184, 112);
    width: 50%;
    height: 450px;
    float: left;
}
    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 odnośnika Zamówienie: 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. 3 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.

    Styl dostaje tylko jeden odnośnik - przez identyfikator #order-link. background-image: url("cukierki1.jpg") wstawia szare zdjęcie jako tło, dopełnienie prawe 30 px i dolne 120 px powiększa obszar tła pod napisem, a text-decoration: none usuwa podkreślenie. Napis ma 150% rozmiaru zwykłego tekstu - razem z dopełnieniem tło zajmuje prostokąt bliski wymiarom zdjęcia (200 × 150 px), jak na obrazie 2.

    ⚠️ 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 pisze „styl jedynie dla odnośnika Zamówienie” i ocenia cechy stylu (wystarczą 4 z 5), nie to, który odnośnik je ma - ważne, żeby styl dostał jeden odnośnik, a nie wszystkie.

    Typowe błędy

    Selektor a zamiast #order-link daje tło ze zdjęcia także odnośnikowi z logotypem - klucz wymaga stylu „jedynie” dla jednego odnośnika.

    styl10.css CSS zmienione: 7 linii 
    * {
    font-family: Helvetica;
}
#top-left, #top-right {
    background-color: rgb(146, 184, 112);
    text-align: center;
    width: 50%;
    height: 170px;
    float: left;
}
#banner, footer {
    background-color: rgb(100, 61, 49);
    color: white;
    text-align: center;
    height: 80px;
    padding: 5px;
    clear: both;
}
#left, #right {
    background-color: rgb(146, 184, 112);
    width: 50%;
    height: 450px;
    float: left;
}
#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.

    border: 2px dashed green - grubość, styl linii (kreskowana) i kolor w jednej właściwości. Reguła obejmuje i tabelę, i komórki, dlatego ramki są dwie: zewnętrzna wokół tabeli i osobne wokół każdej komórki. margin odsuwa tabelę od nagłówka i krawędzi bloku, padding - tekst od ramek komórek (margines zewnętrzny komórek przeglądarka pomija - komórki tabeli go nie mają).

    styl10.css CSS zmienione: 5 linii 
    * {
    font-family: Helvetica;
}
#top-left, #top-right {
    background-color: rgb(146, 184, 112);
    text-align: center;
    width: 50%;
    height: 170px;
    float: left;
}
#banner, footer {
    background-color: rgb(100, 61, 49);
    color: white;
    text-align: center;
    height: 80px;
    padding: 5px;
    clear: both;
}
#left, #right {
    background-color: rgb(146, 184, 112);
    width: 50%;
    height: 450px;
    float: left;
}
#order-link {
    background-image: url("cukierki1.jpg");
    padding-right: 30px;
    padding-bottom: 120px;
    font-size: 150%;
    text-decoration: none;
}
table, 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. 1 min
    Polecenie z arkusza

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

    letter-spacing: 20px rozstawia litery, a font-size: 250% - dwa i pół raza większy niż zwykły tekst. Reguła działa na obu stronach, bo <h1> jest tylko w banerze.

    styl10.css CSS zmienione: 4 linie 
    * {
    font-family: Helvetica;
}
#top-left, #top-right {
    background-color: rgb(146, 184, 112);
    text-align: center;
    width: 50%;
    height: 170px;
    float: left;
}
#banner, footer {
    background-color: rgb(100, 61, 49);
    color: white;
    text-align: center;
    height: 80px;
    padding: 5px;
    clear: both;
}
#left, #right {
    background-color: rgb(146, 184, 112);
    width: 50%;
    height: 450px;
    float: left;
}
#order-link {
    background-image: url("cukierki1.jpg");
    padding-right: 30px;
    padding-bottom: 120px;
    font-size: 150%;
    text-decoration: none;
}
table, td {
    border: 2px dashed green;
    margin: 30px;
    padding: 20px;
}
h1 {
    letter-spacing: 20px;
    font-size: 250%;
}
    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: Funkcja order: odczyt numeru kształtu

    Kryteria: , ,

    R.5.1 Skrypt napisano w języku uruchamianym po stronie przeglądarki i zawiera przynajmniej jedną instrukcję poprawną składniowo

    R.5.2 Skrypt pobiera dane z przynajmniej jednego pola edycyjnego

    R.3.3 Pod polami edycyjnymi znajduje się przycisk "Zamówienie", którego wciśnięcie powoduje uruchomienie skryptu

    ok. 3 min
    Polecenie z arkusza

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

    Skrypt JavaScript działa w przeglądarce. Znacznik <script> stoi na końcu <body>, po wszystkich elementach strony. W nim funkcja order - ta, którą wywołuje onclick przycisku „Zamówienie”.

    Pierwsza instrukcja: document.getElementById("shape") znajduje pole numeru kształtu, a .value to tekst, który w nim wpisano. Zmienna let shape przechowuje go do dalszych instrukcji. Kliknięcie przycisku już niczego nie psuje, ale też jeszcze nic nie wypisuje.

    Typowe błędy

    getElementById("Shape") - wielkość liter w identyfikatorze ma znaczenie; funkcja zwróci null, a .value zakończy skrypt błędem.

    zamowienie.html HTML zmienione: 5 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo"></a>
    </section>
    <header id="banner">
        <h1>Strefa zamówień</h1>
    </header>
    <section id="left">
        Numer kształtu: <br>
        <input type="number" id="shape"><br>
        skomponuj swój kolor, podaj RGB: <br>
        R: <input type="number" id="red">
        G: <input type="number" id="green">
        B: <input type="number" id="blue"><br>
        <button onclick="order()">Zamówienie</button>
        <p id="result">Twoje zamówienie</p>
        <button id="color">Kolor</button>
    </section>
    <section id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <td>Kształty</td>
                <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>
    </section>
    <footer>
        Autor strony: <b>Bartosz Bryniarski</b>
    </footer>
    <script>
        function order() {
            let shape = document.getElementById("shape").value;
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienie.html)

  36. Krok 36: Nazwa kształtu w paragrafie

    Kryteria: ,

    R.5.3 Skrypt wyświetla 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.4 Tekst jest wypisany w akapicie poniżej przycisku do zamówienia

    ok. 4 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ść”.

    Drabinka if / else if / else wybiera nazwę: 1 - cytryna, 2 - liść, 3 - banan, a każda inna wartość (także puste pole) - „inny”. Porównanie == zamienia tekst z pola na liczbę, więc "2" == 2 jest prawdą.

    Ostatnia linia wpisuje tekst do paragrafu result: innerHTML podmienia całą jego zawartość, a + dokleja nazwę do stałego początku „Twoje zamówienie to cukierek ” (ze spacją na końcu). Wpisz w podglądzie 2 i kliknij „Zamówienie” - paragraf pokaże „Twoje zamówienie to cukierek liść”.

    Typowe błędy

    Brak spacji na końcu „cukierek ” skleja wyraz z nazwą: „cukierekliść”. Wypisanie przez document.write kasuje całą stronę zamiast zmienić paragraf.

    zamowienie.html HTML zmienione: 11 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo"></a>
    </section>
    <header id="banner">
        <h1>Strefa zamówień</h1>
    </header>
    <section id="left">
        Numer kształtu: <br>
        <input type="number" id="shape"><br>
        skomponuj swój kolor, podaj RGB: <br>
        R: <input type="number" id="red">
        G: <input type="number" id="green">
        B: <input type="number" id="blue"><br>
        <button onclick="order()">Zamówienie</button>
        <p id="result">Twoje zamówienie</p>
        <button id="color">Kolor</button>
    </section>
    <section id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <td>Kształty</td>
                <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>
    </section>
    <footer>
        Autor strony: <b>Bartosz Bryniarski</b>
    </footer>
    <script>
        function order() {
            let shape = document.getElementById("shape").value;
            let name;
            if (shape == 1) {
                name = "cytryna";
            } else if (shape == 2) {
                name = "liść";
            } else if (shape == 3) {
                name = "banan";
            } else {
                name = "inny";
            }
            document.getElementById("result").innerHTML = "Twoje zamówienie to cukierek " + name;
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienie.html)

  37. Krok 37: Kolor tła przycisku „Kolor”

    Kryteria:

    R.5.5 Skrypt zmienia tło przycisku „Kolor” na kolor odpowiadający podanej wartości RGB

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

    Trzy składowe odczytane tak samo jak numer kształtu, a potem sklejone w zapis koloru CSS: dla 255, 0, 128 powstaje napis rgb(255, 0, 128). Właściwość style.backgroundColor to w JavaScripcie odpowiednik background-color z CSS (myślnik znika, następna litera robi się wielka) - przypisanie zmienia tło jednego elementu, przycisku color.

    Sprawdzone prawdziwym kliknięciem w Chrome: kształty 1, 2, 3 i 7 dają cytrynę, liść, banan i „inny”, a składowe 255, 0, 128 - różowe tło przycisku „Kolor”.

    zamowienie.html HTML zmienione: 5 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo"></a>
    </section>
    <header id="banner">
        <h1>Strefa zamówień</h1>
    </header>
    <section id="left">
        Numer kształtu: <br>
        <input type="number" id="shape"><br>
        skomponuj swój kolor, podaj RGB: <br>
        R: <input type="number" id="red">
        G: <input type="number" id="green">
        B: <input type="number" id="blue"><br>
        <button onclick="order()">Zamówienie</button>
        <p id="result">Twoje zamówienie</p>
        <button id="color">Kolor</button>
    </section>
    <section id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <td>Kształty</td>
                <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>
    </section>
    <footer>
        Autor strony: <b>Bartosz Bryniarski</b>
    </footer>
    <script>
        function order() {
            let shape = document.getElementById("shape").value;
            let name;
            if (shape == 1) {
                name = "cytryna";
            } else if (shape == 2) {
                name = "liść";
            } else if (shape == 3) {
                name = "banan";
            } else {
                name = "inny";
            }
            document.getElementById("result").innerHTML = "Twoje zamówienie to cukierek " + name;

            let r = document.getElementById("red").value;
            let g = document.getElementById("green").value;
            let b = document.getElementById("blue").value;
            document.getElementById("color").style.backgroundColor = "rgb(" + r + ", " + g + ", " + b + ")";
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienie.html)

  38. Etap 6: Dobre praktyki (poza kluczem)

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

    Krok 38: Walidacja wejścia: składowe 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.

    Arkusz każe skryptowi „sprawdzić wartości RGB”, a wersja z poprzedniego kroku bierze je bez sprawdzania. Test w Chrome: składowe 200, 200, 200 dają szary przycisk; potem pole G wyczyszczone i ponowne kliknięcie - powstaje napis rgb(200, , 200), przeglądarka uznaje go za niepoprawny kolor i po cichu zostawia stary. Użytkownik nie wie, że jego kolor nie został przyjęty. Tak samo kończy się wpisanie 2e5 czy -0.5.

    Funkcja poprawna sprawdza każdą składową: pole nie jest puste, Number.isInteger - to liczba całkowita, i mieści się w przedziale 0-255. Kolor zmienia się tylko dla trzech poprawnych składowych, a w przeciwnym razie paragraf dostaje dopisek z podpowiedzią. Stara linia zostaje w komentarzu. Na egzaminie wystarczy wersja z poprzedniego kroku - klucz tego nie sprawdza, ale sprawdzanie danych wejściowych to pierwsza zasada każdego programu, który przyjmuje dane od użytkownika.

    zamowienie.html HTML zmienione: 11 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo"></a>
    </section>
    <header id="banner">
        <h1>Strefa zamówień</h1>
    </header>
    <section id="left">
        Numer kształtu: <br>
        <input type="number" id="shape"><br>
        skomponuj swój kolor, podaj RGB: <br>
        R: <input type="number" id="red">
        G: <input type="number" id="green">
        B: <input type="number" id="blue"><br>
        <button onclick="order()">Zamówienie</button>
        <p id="result">Twoje zamówienie</p>
        <button id="color">Kolor</button>
    </section>
    <section id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <td>Kształty</td>
                <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>
    </section>
    <footer>
        Autor strony: <b>Bartosz Bryniarski</b>
    </footer>
    <script>
        function poprawna(wartosc) {
            let liczba = Number(wartosc);
            return wartosc !== "" && Number.isInteger(liczba) && liczba >= 0 && liczba <= 255;
        }

        function order() {
            let shape = document.getElementById("shape").value;
            let name;
            if (shape == 1) {
                name = "cytryna";
            } else if (shape == 2) {
                name = "liść";
            } else if (shape == 3) {
                name = "banan";
            } else {
                name = "inny";
            }
            document.getElementById("result").innerHTML = "Twoje zamówienie to cukierek " + name;

            let r = document.getElementById("red").value;
            let g = document.getElementById("green").value;
            let b = document.getElementById("blue").value;
            // document.getElementById("color").style.backgroundColor = "rgb(" + r + ", " + g + ", " + b + ")";
            if (poprawna(r) && poprawna(g) && poprawna(b)) {
                document.getElementById("color").style.backgroundColor = "rgb(" + r + ", " + g + ", " + b + ")";
            } else {
                document.getElementById("result").innerHTML += " (kolor: podaj trzy liczby całkowite od 0 do 255)";
            }
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienie.html)

  39. Krok 39: textContent zamiast innerHTML

    ok. 2 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ść”.

    innerHTML traktuje przypisany napis jako kod HTML - przeglądarka go interpretuje. Tutaj trafiają do niego tylko stałe teksty ze skryptu, więc nic złego się nie dzieje. Ale wystarczy, że ktoś kiedyś dopisze do komunikatu coś wpisanego przez użytkownika (np. uwagi do zamówienia z pola tekstowego), a wpis <img src=x onerror=alert(1)> stanie się prawdziwym obrazkiem z uruchomionym skryptem - to atak XSS.

    textContent wstawia napis zawsze jako zwykły tekst - znaczniki pokażą się dosłownie i nie zostaną wykonane. Do wypisywania komunikatów to bezpieczny nawyk, a efekt na stronie jest identyczny. Klucz przyjmuje obie formy; stare linie zostają w komentarzu.

    zamowienie.html HTML zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Fabryka cukierków</title>
    <link rel="stylesheet" href="styl10.css">
</head>
<body>
    <section id="top-left">
        <a href="zamowienie.html" id="order-link">Zamów cukierki</a>
    </section>
    <section id="top-right">
        <a href="index.html"><img src="logotyp.png" alt="Nasze logo"></a>
    </section>
    <header id="banner">
        <h1>Strefa zamówień</h1>
    </header>
    <section id="left">
        Numer kształtu: <br>
        <input type="number" id="shape"><br>
        skomponuj swój kolor, podaj RGB: <br>
        R: <input type="number" id="red">
        G: <input type="number" id="green">
        B: <input type="number" id="blue"><br>
        <button onclick="order()">Zamówienie</button>
        <p id="result">Twoje zamówienie</p>
        <button id="color">Kolor</button>
    </section>
    <section id="right">
        <h2>Nasza oferta</h2>
        <table>
            <tr>
                <td>Kształty</td>
                <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>
    </section>
    <footer>
        Autor strony: <b>Bartosz Bryniarski</b>
    </footer>
    <script>
        function poprawna(wartosc) {
            let liczba = Number(wartosc);
            return wartosc !== "" && Number.isInteger(liczba) && liczba >= 0 && liczba <= 255;
        }

        function order() {
            let shape = document.getElementById("shape").value;
            let name;
            if (shape == 1) {
                name = "cytryna";
            } else if (shape == 2) {
                name = "liść";
            } else if (shape == 3) {
                name = "banan";
            } else {
                name = "inny";
            }
            // document.getElementById("result").innerHTML = "Twoje zamówienie to cukierek " + name;
            document.getElementById("result").textContent = "Twoje zamówienie to cukierek " + name;

            let r = document.getElementById("red").value;
            let g = document.getElementById("green").value;
            let b = document.getElementById("blue").value;
            // document.getElementById("color").style.backgroundColor = "rgb(" + r + ", " + g + ", " + b + ")";
            if (poprawna(r) && poprawna(g) && poprawna(b)) {
                document.getElementById("color").style.backgroundColor = "rgb(" + r + ", " + g + ", " + b + ")";
            } else {
                document.getElementById("result").textContent += " (kolor: podaj trzy liczby całkowite od 0 do 255)";
            }
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienie.html)

  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 (otwierasz index.html dwuklikiem - ta witryna nie potrzebuje serwera).

    W folderze z numerem zdającego muszą być: cukierki1.jpg (szary), cukierki3.jpg (600 × 450), logotyp.png, index.html, zamowienie.html, styl10.css i przeglądarka.txt; oryginalny cukierki2.png może zostać. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego. Pusta lub nieczytelna płyta to zero punktów za wszystkie pięć rezultatów.

    przeglądarka.txt Tekst nowy plik 
    Google Chrome

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

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