Przejdź do głównej treści
INF.03-02-24.01-SGStyczeń 2024 · 43 kroki · ok. 83 min · 41 kryteriów z klucza

Rozwiązanie krok po kroku: Witryna pogotowia komputerowego (Nowoczesny kod (grid, osobny skrypt))

To drugi sposób rozwiązania tego samego arkusza: ikona „IT”, dwa banery z myszą i animacja GIF, dwie strony o wspólnym układzie (index.html i kontakt.html) z trzema blokami obok siebie, style w styl.css i skrypt na stronie kontaktowej. Obie wersje spełniają wszystkie 41 kryteriów klucza - różni je sposób pisania kodu, nie wynik.

Czym ta wersja różni się od podstawowej:

  • trzy bloki główne w znaczniku <main> ułożone siatką CSS (display: grid) zamiast float i clear, menu wyśrodkowane flexboksem,
  • kolory z arkusza w zmiennych CSS, style przypięte do klas,
  • przycisk „Wyślij” wysyła formularz (type="submit"), a skrypt przejmuje zdarzenie submit - działa też Enter w polu tekstowym; „Czyść” czyści również wynik,
  • skrypt w osobnym pliku kontakt.js z defer, kontrolki z form.elements, trzy wiersze komunikatu w tablicy wpisanej przez innerText - wpisane w formularzu znaczniki nie wykonują się jako HTML.

Grafika jest taka sama jak w wersji podstawowej - wykonana z prawdziwego archiwum materialy2 według obrazów 1 i 2. Kroki nadal idą zdanie po zdaniu za treścią arkusza. Skrypt jest sprawdzony w prawdziwej przeglądarce Chrome na danych z obrazu 4 (adres [email protected] wypisany małymi literami), ze znacznikiem w imieniu i po kliknięciu „Czyść”. W podglądzie strony kontaktowej można wypełnić formularz i kliknąć „Wyślij”.

Jak liczą się punkty. Klucz ma 41 kryteriów (R.1.1 - R.5.7), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 31 punktów. 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 i animacja

    Kroki 1-4 · po tym etapie masz 9 z 41 kryteriów (pkt)

    Krok 1: Favicon: napis IT na całej grafice, 50 × 50 px

    Kryteria: , ,

    R.1.1 Przynajmniej jeden z obrazów: favicon, baner1 lub baner2 zapisano w formacie umożliwiającym zapis przezroczystości, np. PNG, tło przynajmniej jednego obrazu jest przezroczyste

    R.1.2 Favicon zawiera napis "IT" w kolorze czerwonym, wypełniający całą przestrzeń grafiki

    R.1.3 Favicon ma wysokość i szerokość 50 px (± 2 px)

    ok. 5 min
    Polecenie z arkusza

    Wytyczne dla logo witryny internetowej: Cechy obrazu: tło przezroczyste, wysokość i szerokość: 50 px. Napis o treści „IT”, wypełnia całą przestrzeń grafiki, zgodnie z obrazem 1. Cechy tekstu: czcionka koloru ciemnoczerwonego. Nazwa pliku: favicon, format umożliwiający zapis przezroczystości.

    W GIMP-ie:

    1. Plik → Nowy: 50 × 50 px, w opcjach zaawansowanych Wypełnienie: Przezroczystość,
    2. narzędzie Tekst, kolor ciemnoczerwony (np. ae2500), pogrubiony krój, napis „IT”,
    3. warstwę tekstu rozciągnij narzędziem Skalowanie (z rozpiętym łańcuchem proporcji), aż litery dotkną wszystkich czterech krawędzi - jak na obrazie 1,
    4. Eksportuj jako favicon.png - PNG zapisuje przezroczystość.
    Typowe błędy

    Napis wyśrodkowany z wolnym miejscem dookoła nie „wypełnia całej przestrzeni” (R.1.2).

    Podgląd strony po tym kroku
    Podgląd strony po kroku 1

  2. Krok 2: Baner 1: dwie myszy i czerwony napis

    Kryteria: , ,

    R.1.4 Przynajmniej jeden obraz banera zawiera dwukrotnie umieszczony obraz z pliku mysz.jpg, po lewej stronie – obrócony o 180 stopni, po prawej - niezmieniony. Jest on umieszczony w banerze w całości (obie myszy są widoczne w całości)

    R.1.5 Pliki banera zawierają napis o treści „POGOTOWIE KOMPUTEROWE”. Zastosowano czcionkę bezszeryfową, koloru czerwonego w pierwszym i koloru żółtego w drugim banerze

    R.1.6 Plikom banera nadano wysokość 200 px (± 2 px) i szerokość 1000 px (± 2 px)

    ok. 5 min
    Polecenie z arkusza

    Wspólne wytyczne dla dwóch banerów: Cechy obrazu: tło przezroczyste, wysokość 200 px, szerokość 1000 px. Plik mysz.jpg przeskalowany z zachowaniem proporcji do wysokości 200 px, umieszczony dwukrotnie na banerze: po lewej stronie – z odpowiednim obrotem oraz niezmieniony po prawej, zgodnie z obrazem 2. Pomiędzy obrazami znajduje się napis o treści „POGOTOWIE KOMPUTEROWE”. Dla banera1: czcionka Arial, pogrubiona, koloru czerwonego.

    1. Plik → Nowy: 1000 × 200 px, wypełnienie przezroczyste,
    2. Plik → Otwórz jako warstwy mysz.jpg (327 × 410), Warstwa → Skaluj warstwę: wysokość 200 z zamkniętym łańcuchem - szerokość wychodzi 160 px; dosuń warstwę do prawej krawędzi,
    3. Warstwa → Duplikuj warstwę, na kopii Warstwa → Przekształć → Obróć o 180° - na obrazie 2 lewa mysz ma przewód u góry (klucz: obrót o 180 stopni, R.1.4); kopię dosuń do lewej krawędzi,
    4. narzędzie Tekst między myszami: „POGOTOWIE KOMPUTEROWE” w dwóch wierszach, Arial Bold, kolor czerwony (ff0000), wyśrodkowany,
    5. Eksportuj jako baner1.png, a plik .xcf zapisz osobno - posłuży do banera 2.
    Typowe błędy

    Odbij poziomo zamiast obrotu o 180° zostawia przewód na dole - to inna operacja niż na obrazie 2.

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

  3. Krok 3: Baner 2: żółty napis

    Kryteria: ,

    R.1.5 Pliki banera zawierają napis o treści „POGOTOWIE KOMPUTEROWE”. Zastosowano czcionkę bezszeryfową, koloru czerwonego w pierwszym i koloru żółtego w drugim banerze

    R.1.6 Plikom banera nadano wysokość 200 px (± 2 px) i szerokość 1000 px (± 2 px)

    ok. 2 min
    Polecenie z arkusza

    Dla banera2: czcionka Arial, pogrubiona, koloru żółtego, zgodnie z obrazem 2.

    W pliku banera 1 zmień tylko kolor napisu na żółty, jak na obrazie 2. Eksportuj jako baner2.png.

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

  4. Krok 4: Animacja GIF z opóźnieniem 4000 ms

    Kryteria: , ,

    R.1.7 Animację zapisano jako animacja.gif

    R.1.8 Animacja zawiera obrazy dwóch banerów wyświetlane na zmianę

    R.1.9 Ustawiono opóźnienie między klatkami na 4000 ms (4 s), co udokumentowano zrzutem ekranu o nazwie klatki.jpg , na którym widać okno z wprowadzoną wartością opóźnienia. Zrzut obejmuje cały obszar ekranu z widocznym paskiem zadań

    ok. 5 min
    Polecenie z arkusza

    Animację należy przygotować w programie do obróbki grafiki rastrowej. Animację stanowią obrazy baner1 i baner2 wyświetlane na zmianę. Cechy animacji: opóźnienie między klatkami 4000 ms (4 s). Czynność ustawienia opóźnienia należy udokumentować zrzutem ekranu o nazwie klatki.jpg. Nazwa pliku: animacja.gif.

    W GIMP-ie każda warstwa to jedna klatka animacji:

    1. otwórz baner1.png i Plik → Otwórz jako warstwy baner2.png,
    2. Plik → Eksportuj jako animacja.gif, zaznacz Jako animację i Pętla nieskończona, opóźnienie 4000 ms, rozmieszczenie klatek Jedna klatka na warstwę (zastąpienie) - inaczej czerwony napis prześwitywałby przez przezroczyste tło pod żółtym,
    3. zanim klikniesz Eksportuj, zrób zrzut całego ekranu z tym oknem i wpisanym 4000 - klatki.jpg, bez kadrowania, z paskiem zadań (R.1.9).
    Typowe błędy

    Zrzut okna bez paska zadań albo wykadrowany nie spełnia R.1.9.

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

  5. Etap 2: Strony HTML

    Kroki 5-25 · po tym etapie masz 22 z 41 kryteriów (pkt)

    Krok 5: Plik index.html w HTML5

    Kryteria:

    R.2.1 Witrynę internetową zapisano w plikach index.html i kontakt.html oraz zastosowano deklarację języka HTML5 <!DOCTYPE html> i zdefiniowano język witryny polski np. <html lang="pl"> oraz jawnie zastosowano właściwy standard kodowania polskich znaków

    ok. 1 min
    Polecenie z arkusza

    Cechy witryny: Strona główna o nazwie index.html oraz podstrona kontakt.html. Cechy wspólne dla obu stron: Zapisane w języku HTML 5.

    Najpierw powstaje w całości index.html - podstrona będzie jej kopią. <!DOCTYPE html> włącza tryb standardów HTML5.

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

  6. Krok 6: Język strony

    Kryteria:

    R.2.1 Witrynę internetową zapisano w plikach index.html i kontakt.html oraz zastosowano deklarację języka HTML5 <!DOCTYPE html> i zdefiniowano język witryny polski np. <html lang="pl"> oraz jawnie zastosowano właściwy standard kodowania polskich znaków

    ok. 1 min
    Polecenie z arkusza

    Ustawiony język zawartości strony na polski.

    Atrybut lang="pl" w <html> - z niego korzystają czytniki ekranu i sprawdzanie pisowni.

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

  7. Krok 7: Kodowanie polskich znaków i widok na telefonie

    Kryteria:

    R.2.1 Witrynę internetową zapisano w plikach index.html i kontakt.html oraz zastosowano deklarację języka HTML5 <!DOCTYPE html> i zdefiniowano język witryny polski np. <html lang="pl"> oraz jawnie zastosowano właściwy standard kodowania polskich znaków

    ok. 1 min
    Polecenie z arkusza

    Jawnie zastosowany właściwy standard kodowania polskich znaków.

    <meta charset="UTF-8"> jako pierwszy element <head> (R.2.1). Druga linia, <meta name="viewport">, każe telefonowi pokazać stronę w jego prawdziwej szerokości, zamiast pomniejszać widok komputera - arkusz jej nie wymaga.

    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)

  8. Krok 8: Tytuł strony

    Kryteria:

    R.2.2 Stronie nadano tytuł: "Komputery"

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony widoczny na karcie przeglądarki: „Komputery”.

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

  9. Krok 9: Podpięcie arkusza stylów

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

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

    Nazwa pliku z arkusza: styl.css, ten sam dla obu stron.

    Typowe błędy

    Inna nazwa pliku (style.css) odcina wszystkie style - R.3.5, a rezultat R.4 jest wtedy oceniany tylko z kodu.

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

  10. Krok 10: Ikona na karcie przeglądarki

    Kryteria:

    R.2.3 Na karcie przeglądarki umieszczono ikonę z obrazem favicon

    ok. 1 min
    Polecenie z arkusza

    Na karcie przeglądarki widoczna ikona witryny internetowej z pliku favicon.

    <link rel="icon"> z plikiem favicon.png, a type podaje jego format.

    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>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  11. Krok 11: Kontener i bloki strony

    Kryteria:

    R.2.4 Wygląd strony zdefiniowano dzieląc ją na bloki: kontener, w którym umieszczono: baner, menu, trzy bloki główne, stopkę. Zastosowano znaczniki sekcji

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki: kontener całej strony, w którym znajdują się: baner, poniżej menu, poniżej obok siebie trzy bloki główne oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji tak, aby wygląd układu bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 3.

    Kontener <div class="page">, a w nim bloki w znacznikach, które mówią, czym są:

    • <header class="banner"> - nagłówek witryny z animacją,
    • <nav class="menu"> - nawigacja,
    • trzy bloki główne <section class="column"> objęte jednym znacznikiem <main> - to treść główna strony, a wspólny rodzic pozwoli ułożyć trzy bloki jedną regułą siatki,
    • <footer> (R.2.4).

    Bloki główne mają te same cechy, więc dostają wspólną klasę column.

    index.html HTML zmienione: 16 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="banner">
        </header>
        <nav class="menu">
        </nav>
        <main class="columns">
            <section class="column">
            </section>
            <section class="column">
            </section>
            <section class="column">
            </section>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  12. Krok 12: Baner: animacja

    Kryteria:

    R.2.5 W banerze umieszczono obraz animacja.gif z tekstem alternatywnym "Pogotowie komputerowe" lub na stronie głównej w bloku głównym prawym znajduje się obraz favicon.png z tekstem alternatywnym "Doświadczenie i niezawodność"

    ok. 1 min
    Polecenie z arkusza

    Zawartość banera: animacja.gif z tekstem alternatywnym „Pogotowie komputerowe”.

    Animowany GIF wstawia zwykły <img>. width i height z wymiarów pliku rezerwują miejsce, zanim obraz się wczyta (R.2.5).

    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>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe" width="1000" height="200">
        </header>
        <nav class="menu">
        </nav>
        <main class="columns">
            <section class="column">
            </section>
            <section class="column">
            </section>
            <section class="column">
            </section>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  13. Krok 13: Menu: dwa odnośniki

    Kryteria:

    R.3.2 Na przynajmniej jednej stronie znajdują się odnośniki w bloku menu. Wybranie odnośnika "Strona Główna" otwiera stronę index.html ; "Kontakt" otwiera stronę kontakt.html

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku menu: Odnośnik o treści „Strona Główna”, który prowadzi do strony index.html. Odnośnik o treści „Kontakt”, który prowadzi do strony kontakt.html.

    Dwa <a> z nazwami plików z tego samego folderu, to samo menu na obu stronach (R.3.2). W podglądzie przejścia są zablokowane.

    index.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe" width="1000" height="200">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <main class="columns">
            <section class="column">
            </section>
            <section class="column">
            </section>
            <section class="column">
            </section>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  14. Krok 14: Stopka z pochylonym autorem

    Kryteria:

    R.2.7 W stopce umieszczono numer zdającego w znaczniku np. <em> (znacznik <i> jest błędem) oraz na stronie głównej paragraf o treści: ”Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT.” oraz na podstronie linię poziomą <hr>

    ok. 1 min
    Polecenie z arkusza

    Zawartość stopki: tekst „Autor: ”, dalej wstawiony numer zdającego. Numer zdającego jest pochylony za pomocą znacznika semantycznego.

    Znacznik semantyczny, który przeglądarka pochyla, to <em> - tekst wyróżniony (R.2.7). Na egzaminie w środku wpisujesz swój numer zdającego (PESEL); tu stoi autor rozwiązania.

    Typowe błędy

    <i> też pochyla, ale nie niesie znaczenia - klucz wprost uznaje go za błąd (R.2.7).

    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>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe" width="1000" height="200">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <main class="columns">
            <section class="column">
            </section>
            <section class="column">
            </section>
            <section class="column">
            </section>
        </main>
        <footer>
            <p>Autor: <em>Bartosz Bryniarski</em></p>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  15. Krok 15: Pierwszy blok: nagłówek i akapit

    Kryteria: ,

    R.2.6 Na stronie głównej w blokach głównych zapisano przynajmniej jeden nagłówek h3 z: „Kim jesteśmy?”, "Co robimy?", "Jaki jest nasz znak?" oraz na podstronie zapisano nagłówek h2: "Kontakt"

    R.2.7 W stopce umieszczono numer zdającego w znaczniku np. <em> (znacznik <i> jest błędem) oraz na stronie głównej paragraf o treści: ”Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT.” oraz na podstronie linię poziomą <hr>

    ok. 1 min
    Polecenie z arkusza

    Zawartość trzech bloków głównych dla pliku index.html: Pierwszy blok: Nagłówek trzeciego stopnia o treści: „Kim jesteśmy?”. Paragraf (akapit) o treści „Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT.”

    <h3> i <p> w pierwszej sekcji.

    index.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe" width="1000" height="200">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <main class="columns">
            <section class="column">
                <h3>Kim jesteśmy?</h3>
                <p>Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT.</p>
            </section>
            <section class="column">
            </section>
            <section class="column">
            </section>
        </main>
        <footer>
            <p>Autor: <em>Bartosz Bryniarski</em></p>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  16. Krok 16: Drugi blok: lista usług

    Kryteria:

    R.2.8 Na stronie głównej w bloku głównym środkowym zapisano jedną listę punktowaną (nieuporządkowaną) z elementami: naprawa komputerów, odzyskiwanie danych, wirusy, konfiguracja LAN; zastosowano znaczniki <ul> i <li>

    ok. 1 min
    Polecenie z arkusza

    Drugi blok: Nagłówek trzeciego stopnia o treści: „Co robimy?”. Lista punktowana (nieuporządkowana) z elementami: naprawa komputerów, odzyskiwanie danych, wirusy, konfiguracja LAN.

    Lista nieuporządkowana <ul> z elementami <li> (R.2.8).

    index.html HTML zmienione: 7 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe" width="1000" height="200">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <main class="columns">
            <section class="column">
                <h3>Kim jesteśmy?</h3>
                <p>Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT.</p>
            </section>
            <section class="column">
                <h3>Co robimy?</h3>
                <ul>
                    <li>naprawa komputerów</li>
                    <li>odzyskiwanie danych</li>
                    <li>wirusy</li>
                    <li>konfiguracja LAN</li>
                </ul>
            </section>
            <section class="column">
            </section>
        </main>
        <footer>
            <p>Autor: <em>Bartosz Bryniarski</em></p>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  17. Krok 17: Trzeci blok: znak firmy

    Kryteria:

    R.2.5 W banerze umieszczono obraz animacja.gif z tekstem alternatywnym "Pogotowie komputerowe" lub na stronie głównej w bloku głównym prawym znajduje się obraz favicon.png z tekstem alternatywnym "Doświadczenie i niezawodność"

    ok. 1 min
    Polecenie z arkusza

    Trzeci blok: Nagłówek trzeciego stopnia o treści: „Jaki jest nasz znak?”. Obraz favicon.png z tekstem alternatywnym „Doświadczenie i niezawodność”.

    Ten sam plik co ikona karty - tu jako zwykły obraz z alt.

    index.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe" width="1000" height="200">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <main class="columns">
            <section class="column">
                <h3>Kim jesteśmy?</h3>
                <p>Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT.</p>
            </section>
            <section class="column">
                <h3>Co robimy?</h3>
                <ul>
                    <li>naprawa komputerów</li>
                    <li>odzyskiwanie danych</li>
                    <li>wirusy</li>
                    <li>konfiguracja LAN</li>
                </ul>
            </section>
            <section class="column">
                <h3>Jaki jest nasz znak?</h3>
                <img src="favicon.png" alt="Doświadczenie i niezawodność" width="50" height="50">
            </section>
        </main>
        <footer>
            <p>Autor: <em>Bartosz Bryniarski</em></p>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  18. Krok 18: Podstrona kontakt.html: nagłówek, formularz, linia

    Kryteria: ,

    R.2.6 Na stronie głównej w blokach głównych zapisano przynajmniej jeden nagłówek h3 z: „Kim jesteśmy?”, "Co robimy?", "Jaki jest nasz znak?" oraz na podstronie zapisano nagłówek h2: "Kontakt"

    R.2.7 W stopce umieszczono numer zdającego w znaczniku np. <em> (znacznik <i> jest błędem) oraz na stronie głównej paragraf o treści: ”Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT.” oraz na podstronie linię poziomą <hr>

    ok. 2 min
    Polecenie z arkusza

    Zawartość trzech bloków głównych dla pliku kontakt.html: Pierwszy i trzeci blok: puste. Drugi blok: Nagłówek drugiego stopnia o treści: „Kontakt”. Tabela o wymiarze 2 kolumny na 6 wierszy, wypełniona kontrolkami. Pozioma linia.

    Zapisz jako kontakt.html z kopii szkieletu strony głównej: pierwszy i trzeci blok zostają puste, w drugim nagłówek, formularz z tabelą i linia.

    • <form> daje przyciskowi „Czyść” formularz do wyczyszczenia, a skryptowi - zdarzenie wysłania do przechwycenia,
    • novalidate wyłącza dymki, którymi przeglądarka zatrzymuje formularz z błędnie wpisanym adresem e-mail. Arkusz każe po „Wyślij” zawsze wypisać dane - literówka w adresie nie może zablokować skryptu.
    kontakt.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>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe" width="1000" height="200">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <main class="columns">
            <section class="column">
            </section>
            <section class="column">
                <h2>Kontakt</h2>
                <form class="contact-form" novalidate>
                    <table>
                    </table>
                </form>
                <hr>
            </section>
            <section class="column">
            </section>
        </main>
        <footer>
            <p>Autor: <em>Bartosz Bryniarski</em></p>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  19. Krok 19: Tabela, wiersz 1: Imię i pole edycyjne

    ok. 2 min
    Polecenie z arkusza

    Tabela 1, wiersz 1: Napis „Imię: ”, pole edycyjne.

    <label for> wiąże napis z polem (kliknięcie napisu ustawia kursor w polu). name="firstName" to nazwa, po której skrypt znajdzie pole w form.elements.

    kontakt.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>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe" width="1000" height="200">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <main class="columns">
            <section class="column">
            </section>
            <section class="column">
                <h2>Kontakt</h2>
                <form class="contact-form" novalidate>
                    <table>
                        <tr>
                            <td><label for="first-name">Imię: </label></td>
                            <td><input type="text" id="first-name" name="firstName" autocomplete="given-name"></td>
                        </tr>
                    </table>
                </form>
                <hr>
            </section>
            <section class="column">
            </section>
        </main>
        <footer>
            <p>Autor: <em>Bartosz Bryniarski</em></p>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  20. Krok 20: Tabela, wiersz 2: Nazwisko i pole edycyjne

    ok. 2 min
    Polecenie z arkusza

    Tabela 1, wiersz 2: Napis „Nazwisko: ”, pole edycyjne.

    Tak samo, z nazwą lastName. autocomplete pozwala przeglądarce podpowiedzieć zapisane dane.

    kontakt.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>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe" width="1000" height="200">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <main class="columns">
            <section class="column">
            </section>
            <section class="column">
                <h2>Kontakt</h2>
                <form class="contact-form" novalidate>
                    <table>
                        <tr>
                            <td><label for="first-name">Imię: </label></td>
                            <td><input type="text" id="first-name" name="firstName" autocomplete="given-name"></td>
                        </tr>
                        <tr>
                            <td><label for="last-name">Nazwisko: </label></td>
                            <td><input type="text" id="last-name" name="lastName" autocomplete="family-name"></td>
                        </tr>
                    </table>
                </form>
                <hr>
            </section>
            <section class="column">
            </section>
        </main>
        <footer>
            <p>Autor: <em>Bartosz Bryniarski</em></p>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  21. Krok 21: Tabela, wiersz 3: E-mail i pole typu email

    ok. 2 min
    Polecenie z arkusza

    Tabela 1, wiersz 3: Napis „E-mail: ”, pole edycyjne typu odpowiedniego do wpisywania adresu e-mail.

    type="email" - telefon pokaże klawiaturę ze znakiem @ (R.3.3).

    kontakt.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>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe" width="1000" height="200">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <main class="columns">
            <section class="column">
            </section>
            <section class="column">
                <h2>Kontakt</h2>
                <form class="contact-form" novalidate>
                    <table>
                        <tr>
                            <td><label for="first-name">Imię: </label></td>
                            <td><input type="text" id="first-name" name="firstName" autocomplete="given-name"></td>
                        </tr>
                        <tr>
                            <td><label for="last-name">Nazwisko: </label></td>
                            <td><input type="text" id="last-name" name="lastName" autocomplete="family-name"></td>
                        </tr>
                        <tr>
                            <td><label for="email">E-mail: </label></td>
                            <td><input type="email" id="email" name="email" autocomplete="email"></td>
                        </tr>
                    </table>
                </form>
                <hr>
            </section>
            <section class="column">
            </section>
        </main>
        <footer>
            <p>Autor: <em>Bartosz Bryniarski</em></p>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  22. Krok 22: Tabela, wiersz 4: Lista rozwijana usług

    ok. 2 min
    Polecenie z arkusza

    Tabela 1, wiersz 4: Napis „Zgłoszenie: ”, lista rozwijalna usług: naprawa komputerów, odzyskiwanie danych, wirusy, konfiguracja LAN.

    <select> z czterema <option>. Bez atrybutu value wartością opcji jest jej tekst - dokładnie to, co skrypt wypisze po „Usługa: ”.

    kontakt.html HTML zmienione: 11 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe" width="1000" height="200">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <main class="columns">
            <section class="column">
            </section>
            <section class="column">
                <h2>Kontakt</h2>
                <form class="contact-form" novalidate>
                    <table>
                        <tr>
                            <td><label for="first-name">Imię: </label></td>
                            <td><input type="text" id="first-name" name="firstName" autocomplete="given-name"></td>
                        </tr>
                        <tr>
                            <td><label for="last-name">Nazwisko: </label></td>
                            <td><input type="text" id="last-name" name="lastName" autocomplete="family-name"></td>
                        </tr>
                        <tr>
                            <td><label for="email">E-mail: </label></td>
                            <td><input type="email" id="email" name="email" autocomplete="email"></td>
                        </tr>
                        <tr>
                            <td><label for="service">Zgłoszenie: </label></td>
                            <td>
                                <select id="service" name="service">
                                    <option>naprawa komputerów</option>
                                    <option>odzyskiwanie danych</option>
                                    <option>wirusy</option>
                                    <option>konfiguracja LAN</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                </form>
                <hr>
            </section>
            <section class="column">
            </section>
        </main>
        <footer>
            <p>Autor: <em>Bartosz Bryniarski</em></p>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  23. Krok 23: Tabela, wiersz 5: Pole wyboru, domyślnie zaznaczone

    Kryteria:

    R.3.3 Na podstronie jedno pole edycyjne jest typu email oraz pole wyboru jest zaznaczone (np. checked)

    ok. 2 min
    Polecenie z arkusza

    Tabela 1, wiersz 5: Pusta komórka, pole wyboru i napis „Wyślij kopię wiadomości”, domyślnie zaznaczone.

    Atrybut logiczny checked zaznacza pole od razu po wczytaniu strony (R.3.3).

    kontakt.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>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe" width="1000" height="200">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <main class="columns">
            <section class="column">
            </section>
            <section class="column">
                <h2>Kontakt</h2>
                <form class="contact-form" novalidate>
                    <table>
                        <tr>
                            <td><label for="first-name">Imię: </label></td>
                            <td><input type="text" id="first-name" name="firstName" autocomplete="given-name"></td>
                        </tr>
                        <tr>
                            <td><label for="last-name">Nazwisko: </label></td>
                            <td><input type="text" id="last-name" name="lastName" autocomplete="family-name"></td>
                        </tr>
                        <tr>
                            <td><label for="email">E-mail: </label></td>
                            <td><input type="email" id="email" name="email" autocomplete="email"></td>
                        </tr>
                        <tr>
                            <td><label for="service">Zgłoszenie: </label></td>
                            <td>
                                <select id="service" name="service">
                                    <option>naprawa komputerów</option>
                                    <option>odzyskiwanie danych</option>
                                    <option>wirusy</option>
                                    <option>konfiguracja LAN</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><input type="checkbox" id="copy" name="copy" checked> <label for="copy">Wyślij kopię wiadomości</label></td>
                        </tr>
                    </table>
                </form>
                <hr>
            </section>
            <section class="column">
            </section>
        </main>
        <footer>
            <p>Autor: <em>Bartosz Bryniarski</em></p>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  24. Krok 24: Tabela, wiersz 6: Przyciski Czyść i Wyślij

    Kryteria: ,

    R.2.9 Na podstronie w bloku głównym środkowym zapisano tabelę o 2 kolumnach i 6 wierszach, zastosowano znaczniki <table>, <tr>, <td>

    R.2.10 Strona zawiera trzy pola edycyjne, jedno listy rozwijalnej, jedno wyboru oraz dwa przyciski

    ok. 2 min
    Polecenie z arkusza

    Tabela 1, wiersz 6: Pusta komórka, przycisk „Czyść” czyszczący kontrolki i przycisk „Wyślij”, którego wciśnięcie powoduje uruchomienie skryptu.

    • type="reset" przywraca kontrolki do stanu początkowego, bez skryptu (pole wyboru wraca do zaznaczonego, bo tak zaczynało),
    • type="submit" - przycisk wysyłający formularz. Skrypt przechwyci zdarzenie wysłania formularza i zatrzyma przeładowanie strony; „Wyślij” zadziała też klawiszem Enter w polu tekstowym.

    Na razie skryptu nie ma - kliknięcie „Wyślij” przeładowuje stronę.

    kontakt.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>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe" width="1000" height="200">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <main class="columns">
            <section class="column">
            </section>
            <section class="column">
                <h2>Kontakt</h2>
                <form class="contact-form" novalidate>
                    <table>
                        <tr>
                            <td><label for="first-name">Imię: </label></td>
                            <td><input type="text" id="first-name" name="firstName" autocomplete="given-name"></td>
                        </tr>
                        <tr>
                            <td><label for="last-name">Nazwisko: </label></td>
                            <td><input type="text" id="last-name" name="lastName" autocomplete="family-name"></td>
                        </tr>
                        <tr>
                            <td><label for="email">E-mail: </label></td>
                            <td><input type="email" id="email" name="email" autocomplete="email"></td>
                        </tr>
                        <tr>
                            <td><label for="service">Zgłoszenie: </label></td>
                            <td>
                                <select id="service" name="service">
                                    <option>naprawa komputerów</option>
                                    <option>odzyskiwanie danych</option>
                                    <option>wirusy</option>
                                    <option>konfiguracja LAN</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><input type="checkbox" id="copy" name="copy" checked> <label for="copy">Wyślij kopię wiadomości</label></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><button type="reset">Czyść</button> <button type="submit">Wyślij</button></td>
                        </tr>
                    </table>
                </form>
                <hr>
            </section>
            <section class="column">
            </section>
        </main>
        <footer>
            <p>Autor: <em>Bartosz Bryniarski</em></p>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  25. Krok 25: Pusty akapit na komunikat

    ok. 1 min
    Polecenie z arkusza

    Wyświetla komunikat pod linią poziomą, w paragrafie.

    Pusty akapit pod <hr>, do którego skrypt wpisze dane. aria-live="polite" każe czytnikowi ekranu odczytać nową treść, gdy się pojawi.

    kontakt.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>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe" width="1000" height="200">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <main class="columns">
            <section class="column">
            </section>
            <section class="column">
                <h2>Kontakt</h2>
                <form class="contact-form" novalidate>
                    <table>
                        <tr>
                            <td><label for="first-name">Imię: </label></td>
                            <td><input type="text" id="first-name" name="firstName" autocomplete="given-name"></td>
                        </tr>
                        <tr>
                            <td><label for="last-name">Nazwisko: </label></td>
                            <td><input type="text" id="last-name" name="lastName" autocomplete="family-name"></td>
                        </tr>
                        <tr>
                            <td><label for="email">E-mail: </label></td>
                            <td><input type="email" id="email" name="email" autocomplete="email"></td>
                        </tr>
                        <tr>
                            <td><label for="service">Zgłoszenie: </label></td>
                            <td>
                                <select id="service" name="service">
                                    <option>naprawa komputerów</option>
                                    <option>odzyskiwanie danych</option>
                                    <option>wirusy</option>
                                    <option>konfiguracja LAN</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><input type="checkbox" id="copy" name="copy" checked> <label for="copy">Wyślij kopię wiadomości</label></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><button type="reset">Czyść</button> <button type="submit">Wyślij</button></td>
                        </tr>
                    </table>
                </form>
                <hr>
                <p class="message" aria-live="polite"></p>
            </section>
            <section class="column">
            </section>
        </main>
        <footer>
            <p>Autor: <em>Bartosz Bryniarski</em></p>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  26. Etap 3: Styl CSS

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

    Krok 26: Plik styl.css: kolory z arkusza w zmiennych

    ok. 2 min
    Polecenie z arkusza

    Styl CSS zdefiniowany w zewnętrznym pliku o nazwie styl.css.

    Kolory arkusza w zmiennych CSS w :root: #00838F występuje w banerze i przyciskach, #006064 w menu i stopce, biały w odsyłaczach, stopce i przyciskach. Reguły będą się do nich odwoływać przez var(--nazwa), więc każdy kolor jest wpisany raz.

    Sama definicja zmiennych nic nie zmienia na stronie.

    styl.css CSS nowy plik 
    :root {
    --color-page: #E0F7FA;
    --color-banner: #00838F;
    --color-dark: #006064;
    --color-light: white;
    --color-hover: #80DEEA;
}
    Podgląd strony po tym kroku (index.html)

  27. Krok 27: Cała strona

    Kryteria:

    R.4.1 Ustawiono dla całej strony (body lub html) krój czcionki Arial, wyrównanie tekstu do środka oraz kolor tła #E0F7FA

    ok. 1 min
    Polecenie z arkusza

    Arkusz CSS zawiera formatowanie: Całej strony: kolor tła #E0F7FA, krój czcionki Arial, wyrównanie tekstu do środka.

    Selektor body. Po kroju Arial stoją zapasowe: Helvetica (komputery Apple) i rodzina ogólna sans-serif (R.4.1).

    styl.css CSS zmienione: 6 linii 
    :root {
    --color-page: #E0F7FA;
    --color-banner: #00838F;
    --color-dark: #006064;
    --color-light: white;
    --color-hover: #80DEEA;
}

body {
    background-color: var(--color-page);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
    Podgląd strony po tym kroku (index.html)

  28. Krok 28: Kontener

    Kryteria: ,

    R.4.4 Ustawiono szerokość kontenera strony na 95%, trzech bloków głównych na 33% (width lub grid-template-columns lub flex)

    R.4.7 Ustawiono dla kontenera marginesy zewnętrzne (margin) na auto, oraz marginesy wewnętrzne (padding) dla bloku menu na 15px, dla stopki na 10px

    ok. 1 min
    Polecenie z arkusza

    Kontenera całej strony: szerokość 95%, marginesy zewnętrzne wyliczone przez przeglądarkę.

    margin: auto dzieli wolne 5% po równo na lewo i prawo (R.4.4, R.4.7). Bloki w kontenerze i tak stoją jeden pod drugim, więc kontener nie potrzebuje siatki.

    styl.css CSS zmienione: 5 linii 
    :root {
    --color-page: #E0F7FA;
    --color-banner: #00838F;
    --color-dark: #006064;
    --color-light: white;
    --color-hover: #80DEEA;
}

body {
    background-color: var(--color-page);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.page {
    width: 95%;
    margin: auto;
}
    Podgląd strony po tym kroku (index.html)

  29. Krok 29: Baner

    Kryteria: ,

    R.4.2 Ustawiono kolor tła: bloku banera na #00838F, bloków menu i stopki na #006064

    R.4.5 Ustawiono wysokość bloku banera na 200px oraz trzech bloków głównych na 350px

    ok. 2 min
    Polecenie z arkusza

    Banera: kolor tła #00838F, wysokość 200 px.

    Tło i wysokość 200px (R.4.2, R.4.5). Obraz w banerze jako blok (display: block - bez szpary pod obrazem), wyśrodkowany przez margin-inline: auto, czyli automatyczne marginesy lewy i prawy. max-width: 100% z height: auto zmniejsza baner w wąskim oknie zamiast wypychać go poza stronę.

    styl.css CSS zmienione: 12 linii 
    :root {
    --color-page: #E0F7FA;
    --color-banner: #00838F;
    --color-dark: #006064;
    --color-light: white;
    --color-hover: #80DEEA;
}

body {
    background-color: var(--color-page);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.page {
    width: 95%;
    margin: auto;
}

.banner {
    background-color: var(--color-banner);
    height: 200px;
}

.banner img {
    display: block;
    margin-inline: auto;
    max-width: 100%;
    height: auto;
}
    Podgląd strony po tym kroku (index.html)

  30. Krok 30: Menu

    Kryteria: ,

    R.4.2 Ustawiono kolor tła: bloku banera na #00838F, bloków menu i stopki na #006064

    R.4.7 Ustawiono dla kontenera marginesy zewnętrzne (margin) na auto, oraz marginesy wewnętrzne (padding) dla bloku menu na 15px, dla stopki na 10px

    ok. 2 min
    Polecenie z arkusza

    Bloku menu: kolor tła #006064, marginesy wewnętrzne 15 px.

    Tło i padding: 15px (R.4.2, R.4.7). Odnośniki układa flexbox: justify-content: center stawia je na środku, a gap: 1em daje stały odstęp między nimi - zamiast spacji z kodu HTML, która zależy od tego, jak zapisano znaczniki.

    styl.css CSS zmienione: 8 linii 
    :root {
    --color-page: #E0F7FA;
    --color-banner: #00838F;
    --color-dark: #006064;
    --color-light: white;
    --color-hover: #80DEEA;
}

body {
    background-color: var(--color-page);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.page {
    width: 95%;
    margin: auto;
}

.banner {
    background-color: var(--color-banner);
    height: 200px;
}

.banner img {
    display: block;
    margin-inline: auto;
    max-width: 100%;
    height: auto;
}

.menu {
    background-color: var(--color-dark);
    padding: 15px;
    display: flex;
    justify-content: center;
    gap: 1em;
}
    Podgląd strony po tym kroku (index.html)

  31. Krok 31: Odsyłacze w menu

    Kryteria: ,

    R.4.3 Ustawiono biały kolor czcionki dla odsyłaczy w bloku menu oraz dla stopki

    R.4.8 Ustawiono czcionkę bez podkreślenia o rozmiarze 150% dla odsyłaczy

    ok. 1 min
    Polecenie z arkusza

    Odsyłacze w bloku menu: czcionka kolor biały, bez podkreślenia, rozmiar 150%.

    Selektor potomka .menu a - tylko odsyłacze w menu, bo klucz wymaga stylu „jedynie w bloku menu” (R.4.3, R.4.8).

    styl.css CSS zmienione: 6 linii 
    :root {
    --color-page: #E0F7FA;
    --color-banner: #00838F;
    --color-dark: #006064;
    --color-light: white;
    --color-hover: #80DEEA;
}

body {
    background-color: var(--color-page);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.page {
    width: 95%;
    margin: auto;
}

.banner {
    background-color: var(--color-banner);
    height: 200px;
}

.banner img {
    display: block;
    margin-inline: auto;
    max-width: 100%;
    height: auto;
}

.menu {
    background-color: var(--color-dark);
    padding: 15px;
    display: flex;
    justify-content: center;
    gap: 1em;
}

.menu a {
    color: var(--color-light);
    text-decoration: none;
    font-size: 150%;
}
    Podgląd strony po tym kroku (index.html)

  32. Krok 32: Trzy bloki główne obok siebie

    Kryteria: , ,

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

    R.4.4 Ustawiono szerokość kontenera strony na 95%, trzech bloków głównych na 33% (width lub grid-template-columns lub flex)

    R.4.5 Ustawiono wysokość bloku banera na 200px oraz trzech bloków głównych na 350px

    ok. 3 min
    Polecenie z arkusza

    Trzech bloków głównych: wysokość 350 px, szerokość 33%.

    <main> staje się siatką o trzech kolumnach po 33% - repeat(3, 33%) to skrót od 33% 33% 33% (klucz przyjmuje szerokość w grid-template-columns, R.4.4). Każdy blok .column ma wysokość 350px (R.4.5).

    Trzy kolumny po 33% zajmują 99%. justify-content: space-between rozkłada pozostały 1% na dwie wąskie szczeliny między blokami, więc prawy blok kończy się równo z krawędzią strony. W wersji podstawowej trzy bloki stoją obok siebie dzięki float: left, a stopka potrzebuje clear: both - tu siatka obejmuje tylko trzy bloki i nic nie trzeba czyścić (R.3.1).

    Typowe błędy

    Szerokości bloków wpisuj w grid-template-columns. Dodatkowe width: 33% na .column liczyłoby się od kolumny siatki - blok miałby 11% strony.

    styl.css CSS zmienione: 10 linii 
    :root {
    --color-page: #E0F7FA;
    --color-banner: #00838F;
    --color-dark: #006064;
    --color-light: white;
    --color-hover: #80DEEA;
}

body {
    background-color: var(--color-page);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.page {
    width: 95%;
    margin: auto;
}

.banner {
    background-color: var(--color-banner);
    height: 200px;
}

.banner img {
    display: block;
    margin-inline: auto;
    max-width: 100%;
    height: auto;
}

.menu {
    background-color: var(--color-dark);
    padding: 15px;
    display: flex;
    justify-content: center;
    gap: 1em;
}

.menu a {
    color: var(--color-light);
    text-decoration: none;
    font-size: 150%;
}

.columns {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    justify-content: space-between;
}

.column {
    height: 350px;
}
    Podgląd strony po tym kroku (index.html)

  33. Krok 33: Stopka

    Kryteria: , , ,

    R.4.2 Ustawiono kolor tła: bloku banera na #00838F, bloków menu i stopki na #006064

    R.4.3 Ustawiono biały kolor czcionki dla odsyłaczy w bloku menu oraz dla stopki

    R.4.6 Ustawiono wyrównanie tekstu do prawej strony dla stopki oraz do lewej strony dla selektora ul

    R.4.7 Ustawiono dla kontenera marginesy zewnętrzne (margin) na auto, oraz marginesy wewnętrzne (padding) dla bloku menu na 15px, dla stopki na 10px

    ok. 1 min
    Polecenie z arkusza

    Stopki: kolor tła #006064, biały kolor czcionki, wyrównanie tekstu do prawej strony, marginesy wewnętrzne 10 px.

    Selektor footer (R.4.2, R.4.3, R.4.6, R.4.7). Akapit w stopce bez domyślnych marginesów - inaczej stopka urosłaby ponad 10 px dopełnienia z arkusza.

    styl.css CSS zmienione: 11 linii 
    :root {
    --color-page: #E0F7FA;
    --color-banner: #00838F;
    --color-dark: #006064;
    --color-light: white;
    --color-hover: #80DEEA;
}

body {
    background-color: var(--color-page);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.page {
    width: 95%;
    margin: auto;
}

.banner {
    background-color: var(--color-banner);
    height: 200px;
}

.banner img {
    display: block;
    margin-inline: auto;
    max-width: 100%;
    height: auto;
}

.menu {
    background-color: var(--color-dark);
    padding: 15px;
    display: flex;
    justify-content: center;
    gap: 1em;
}

.menu a {
    color: var(--color-light);
    text-decoration: none;
    font-size: 150%;
}

.columns {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    justify-content: space-between;
}

.column {
    height: 350px;
}

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

footer p {
    margin: 0;
}
    Podgląd strony po tym kroku (index.html)

  34. Krok 34: Lista punktowana do lewej

    Kryteria:

    R.4.6 Ustawiono wyrównanie tekstu do prawej strony dla stopki oraz do lewej strony dla selektora ul

    ok. 1 min
    Polecenie z arkusza

    Selektora listy punktowanej: wyrównanie tekstu do lewej strony.

    Selektor znacznika ul - arkusz zastrzega, że styl listy ma być zdefiniowany wyłącznie selektorem listy. Cała strona jest wyśrodkowana, a lista ma stać przy lewej krawędzi bloku, jak na obrazie 3 (R.4.6).

    Typowe błędy

    Styl dla klasy albo .column ul nie spełnia R.4.6 - klucz uznaje tylko selektor znacznika.

    styl.css CSS zmienione: 4 linie 
    :root {
    --color-page: #E0F7FA;
    --color-banner: #00838F;
    --color-dark: #006064;
    --color-light: white;
    --color-hover: #80DEEA;
}

body {
    background-color: var(--color-page);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.page {
    width: 95%;
    margin: auto;
}

.banner {
    background-color: var(--color-banner);
    height: 200px;
}

.banner img {
    display: block;
    margin-inline: auto;
    max-width: 100%;
    height: auto;
}

.menu {
    background-color: var(--color-dark);
    padding: 15px;
    display: flex;
    justify-content: center;
    gap: 1em;
}

.menu a {
    color: var(--color-light);
    text-decoration: none;
    font-size: 150%;
}

.columns {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    justify-content: space-between;
}

.column {
    height: 350px;
}

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

footer p {
    margin: 0;
}

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

  35. Krok 35: Przyciski

    Kryteria:

    R.4.9 Ustawiono styl dla selektorów przycisków (button lub input[type="button"]): kolor tła #00838F, biały kolor czcionki

    ok. 1 min
    Polecenie z arkusza

    Selektora przycisków: kolor tła #00838F i biały kolor czcionki.

    Selektor znacznika button, bez klasy - wymóg arkusza i klucza (R.4.9). Oba przyciski są znacznikami <button>.

    styl.css CSS zmienione: 5 linii 
    :root {
    --color-page: #E0F7FA;
    --color-banner: #00838F;
    --color-dark: #006064;
    --color-light: white;
    --color-hover: #80DEEA;
}

body {
    background-color: var(--color-page);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.page {
    width: 95%;
    margin: auto;
}

.banner {
    background-color: var(--color-banner);
    height: 200px;
}

.banner img {
    display: block;
    margin-inline: auto;
    max-width: 100%;
    height: auto;
}

.menu {
    background-color: var(--color-dark);
    padding: 15px;
    display: flex;
    justify-content: center;
    gap: 1em;
}

.menu a {
    color: var(--color-light);
    text-decoration: none;
    font-size: 150%;
}

.columns {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    justify-content: space-between;
}

.column {
    height: 350px;
}

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

footer p {
    margin: 0;
}

ul {
    text-align: left;
}

button {
    background-color: var(--color-banner);
    color: var(--color-light);
}
    Podgląd strony po tym kroku (kontakt.html)

  36. Krok 36: Kolor napisu po wskazaniu przycisku

    Kryteria:

    R.4.10 Po wskazaniu kursorem myszy przycisku zmienia się jego kolor czcionki na #80DEEA

    ok. 1 min
    Polecenie z arkusza

    Po wskazaniu kursorem myszy na przycisk zmienia się jego kolor czcionki na #80DEEA.

    Pseudoklasa :hover (R.4.10). :focus-visible daje ten sam kolor, gdy do przycisku przechodzi się klawiszem Tab. Najedź w podglądzie na przycisk.

    styl.css CSS zmienione: 5 linii 
    :root {
    --color-page: #E0F7FA;
    --color-banner: #00838F;
    --color-dark: #006064;
    --color-light: white;
    --color-hover: #80DEEA;
}

body {
    background-color: var(--color-page);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.page {
    width: 95%;
    margin: auto;
}

.banner {
    background-color: var(--color-banner);
    height: 200px;
}

.banner img {
    display: block;
    margin-inline: auto;
    max-width: 100%;
    height: auto;
}

.menu {
    background-color: var(--color-dark);
    padding: 15px;
    display: flex;
    justify-content: center;
    gap: 1em;
}

.menu a {
    color: var(--color-light);
    text-decoration: none;
    font-size: 150%;
}

.columns {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    justify-content: space-between;
}

.column {
    height: 350px;
}

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

footer p {
    margin: 0;
}

ul {
    text-align: left;
}

button {
    background-color: var(--color-banner);
    color: var(--color-light);
}

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

  37. Etap 4: Skrypt JavaScript

    Kroki 37-40 · po tym etapie masz 41 z 41 kryteriów (pkt)

    Krok 37: Plik kontakt.js i obsługa wysłania formularza

    Kryteria: ,

    R.3.4 Jeden przycisk czyści dane z pól, drugi przycisk uruchamia skrypt (obsługa zdarzenia zdefiniowana np. inline w znaczniku jako atrybut onClick lub w skrypcie JS np.: element.addEventListener("click", funkcja); lub element.onClick = …)

    R.5.1 Skrypt napisano w języku uruchamianym po stronie przeglądarki oraz zdefiniowano funkcję wywoływaną po wciśnięciu przycisku "Wyślij"

    ok. 3 min
    Polecenie z arkusza

    Wykonywany po stronie przeglądarki na stronie kontakt.html, wywoływany przyciskiem „Wyślij”.

    Skrypt w osobnym pliku kontakt.js, dołączony w <head> z defer - wykona się dopiero po wczytaniu całego HTML-u, więc formularz już istnieje.

    • dwie stałe z formularzem i akapitem wyniku, wyszukane raz,
    • addEventListener('submit', showRequest) - funkcja showRequest uruchamia się przy wysłaniu formularza przyciskiem „Wyślij” albo Enterem (R.3.4, R.5.1),
    • event.preventDefault() zatrzymuje przeładowanie strony, które skasowałoby wynik.
    kontakt.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>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png" type="image/png">
    <script src="kontakt.js" defer></script>
</head>
<body>
    <div class="page">
        <header class="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe" width="1000" height="200">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <main class="columns">
            <section class="column">
            </section>
            <section class="column">
                <h2>Kontakt</h2>
                <form class="contact-form" novalidate>
                    <table>
                        <tr>
                            <td><label for="first-name">Imię: </label></td>
                            <td><input type="text" id="first-name" name="firstName" autocomplete="given-name"></td>
                        </tr>
                        <tr>
                            <td><label for="last-name">Nazwisko: </label></td>
                            <td><input type="text" id="last-name" name="lastName" autocomplete="family-name"></td>
                        </tr>
                        <tr>
                            <td><label for="email">E-mail: </label></td>
                            <td><input type="email" id="email" name="email" autocomplete="email"></td>
                        </tr>
                        <tr>
                            <td><label for="service">Zgłoszenie: </label></td>
                            <td>
                                <select id="service" name="service">
                                    <option>naprawa komputerów</option>
                                    <option>odzyskiwanie danych</option>
                                    <option>wirusy</option>
                                    <option>konfiguracja LAN</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><input type="checkbox" id="copy" name="copy" checked> <label for="copy">Wyślij kopię wiadomości</label></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><button type="reset">Czyść</button> <button type="submit">Wyślij</button></td>
                        </tr>
                    </table>
                </form>
                <hr>
                <p class="message" aria-live="polite"></p>
            </section>
            <section class="column">
            </section>
        </main>
        <footer>
            <p>Autor: <em>Bartosz Bryniarski</em></p>
        </footer>
    </div>
</body>
</html>
    kontakt.js JavaScript nowy plik 
    const form = document.querySelector('.contact-form');
const message = document.querySelector('.message');

function showRequest(event) {
    event.preventDefault();
}

form.addEventListener('submit', showRequest);
    Podgląd strony po tym kroku (kontakt.html)

  38. Krok 38: Pobranie kontrolek formularza

    Kryteria:

    R.5.2 Skrypt pobiera wartość z przynajmniej jednej kontrolki

    ok. 2 min
    Polecenie z arkusza

    Skrypt pobiera wartości wprowadzone do kontrolek.

    form.elements to kontrolki formularza dostępne po atrybucie name. Destrukturyzacja (nawiasy klamrowe) tworzy jedną linią cztery stałe. Wartości dają .value: tekst pola albo - dla <select> - wartość wybranej opcji (R.5.2).

    kontakt.js JavaScript zmienione: 1 linia 
    const form = document.querySelector('.contact-form');
const message = document.querySelector('.message');

function showRequest(event) {
    event.preventDefault();
    const { firstName, lastName, email, service } = form.elements;
}

form.addEventListener('submit', showRequest);
    Podgląd strony po tym kroku (kontakt.html)

  39. Krok 39: Komunikat w trzech wierszach

    Kryteria: , , , ,

    R.5.3 Skrypt wyświetla dane wprowadzone do kontrolek: w pierwszej linii imię i nazwisko, poniżej email

    R.5.4 Skrypt w trzeciej linii wyświetla napis "Usługa: ", następnie wartość wybranego pola listy rozwijalnej

    R.5.5 Komunikat jest wyświetlany w paragrafie

    R.5.6 Dla pola email zastosowano funkcję zmiany na małe litery

    R.5.7 Zastosowano znaczące nazewnictwo dla wszystkich zmiennych i funkcji w języku polskim lub angielskim. Nazwy odzwierciedlają cel zastosowania

    ok. 4 min
    Polecenie z arkusza

    Wyświetla komunikat pod linią poziomą, w paragrafie, w trzech wierszach, kolejno: imię i nazwisko, adres email – zapisany zawsze małymi literami, napis „Usługa: ”, następnie wartość wybranego pola listy rozwijalnej, zgodnie z obrazem 4.

    • trzy wiersze komunikatu w tablicy lines, każdy w osobnej linii kodu - kolejność z arkusza widać od razu (R.5.3, R.5.4),
    • imię i nazwisko sklejone szablonem tekstowym, trim() obcina spacje z brzegów,
    • toLowerCase() zamienia adres na małe litery: [email protected] daje [email protected] (R.5.6),
    • lines.join('\n') łączy wiersze znakiem nowej linii, a innerText wpisuje tekst do akapitu i każdy znak nowej linii zamienia na łamanie <br> (R.5.5). Wpisana treść zostaje zwykłym tekstem: imię <b>Jan</b> pojawi się dosłownie, zamiast pogrubić się jak przy innerHTML.

    Wpisz w podglądzie Anna, Nowak, [email protected], wybierz „wirusy” i kliknij „Wyślij” - wynik jak na obrazie 4. Nazwy mówią, co przechowują: form, message, lines, showRequest (R.5.7).

    Typowe błędy

    textContent zamiast innerText nie zamienia znaków nowej linii na łamania - trzy informacje wyjdą w jednym wierszu (R.5.3, R.5.4).

    kontakt.js JavaScript zmienione: 6 linii 
    const form = document.querySelector('.contact-form');
const message = document.querySelector('.message');

function showRequest(event) {
    event.preventDefault();
    const { firstName, lastName, email, service } = form.elements;
    const lines = [
        `${firstName.value.trim()} ${lastName.value.trim()}`,
        email.value.trim().toLowerCase(),
        `Usługa: ${service.value}`,
    ];
    message.innerText = lines.join('\n');
}

form.addEventListener('submit', showRequest);
    Podgląd strony po tym kroku (kontakt.html)

  40. Krok 40: Czyść usuwa też wynik

    ok. 2 min
    Polecenie z arkusza

    Przycisk „Czyść” czyszczący kontrolki.

    „Czyść” przywraca kontrolki, ale akapit z wynikiem to nie kontrolka - zostałby na stronie. Drugi słuchacz, na zdarzenie reset formularza, opróżnia też akapit. Funkcja strzałkowa () => { ... } jest potrzebna tylko tutaj, więc nie ma nazwy.

    Arkusz tego nie wymaga, a klucz nie ocenia.

    kontakt.js JavaScript zmienione: 3 linie 
    const form = document.querySelector('.contact-form');
const message = document.querySelector('.message');

function showRequest(event) {
    event.preventDefault();
    const { firstName, lastName, email, service } = form.elements;
    const lines = [
        `${firstName.value.trim()} ${lastName.value.trim()}`,
        email.value.trim().toLowerCase(),
        `Usługa: ${service.value}`,
    ];
    message.innerText = lines.join('\n');
}

form.addEventListener('submit', showRequest);
form.addEventListener('reset', () => {
    message.innerText = '';
});
    Podgląd strony po tym kroku (kontakt.html)

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

    Kroki 41-42 · po tym etapie masz 41 z 41 kryteriów (pkt)

    Krok 41: Co jest inaczej i dlaczego

    ok. 3 min
    Polecenie z arkusza

    Ocenie będzie podlegać 6 rezultatów: grafika i animacja, wygląd witryny internetowej, działanie witryny internetowej, styl CSS witryny internetowej, skrypt.

    Arkusz zapowiada 6 rezultatów, ale wymienia pięć - i tyle ocenia klucz (R.1-R.5). Obie wersje dają te same punkty. Różnice:

    wersja podstawowata wersja
    trzy bloki głównefloat: left + clear: both w stopce<main> z siatką repeat(3, 33%)
    styleidentyfikatory (#menu) i klasa blockklasy (.menu, .column)
    kolorywpisane w każdej regulezmienne w :root
    menuodnośniki w linii tekstuflexbox z gap
    przycisk „Wyślij”type="button" + onclick="send()"type="submit", zdarzenie submit, preventDefault()
    skrypt<script> w kontakt.htmlkontakt.js z defer
    kontrolki w skrypciegetElementById dla każdejform.elements + destrukturyzacja
    komunikatinnerHTML z <br> w napisietablica wierszy, join('\n'), innerText
    „Czyść”czyści polaczyści też wynik

    Skrypt tej wersji jest sprawdzony w prawdziwym Chrome: dane z obrazu 4 (adres małymi literami), <b>Jan</b> w imieniu (wyświetlone dosłownie), spacje wokół nazwiska i adresu, „Czyść” (pusty wynik, pole wyboru znów zaznaczone), a układ zmierzony: trzy bloki po 33% strony w jednym wierszu, ostatni równo z prawą krawędzią, stopka pod nimi.

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

  42. Krok 42: Którą wersję wybrać na egzaminie

    ok. 2 min
    Polecenie z arkusza

    Czas przeznaczony na wykonanie zadania wynosi 150 minut.

    • Wersja podstawowa, gdy liczy się czas: float, onclick, getElementById i innerHTML są w tabelach arkusza, a skrypt to kilka linii w pliku strony.
    • Ta wersja, gdy siatkę CSS i obsługę zdarzenia submit pisze się z pamięci. Plik kontakt.js trzeba nagrać na płytę - bez niego „Wyślij” przestaje działać, a punkty skryptu egzaminator sprawdzi już tylko w kodzie.

    Mieszanie też daje pełne punkty: siatka i zmienne z tej wersji, skrypt z podstawowej.

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

  43. Etap 6: Oddanie pracy

    Krok 43 · po tym etapie masz 41 z 41 kryteriów (pkt)

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

    ok. 5 min
    Polecenie z arkusza

    Po zakończeniu pracy utwórz w folderze z numerem zdającego plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Nagraj płytę z rezultatami pracy.

    W przeglądarka.txt nazwa przeglądarki, w której strony były sprawdzane.

    W folderze: animacja.gif, baner1.png, baner2.png, favicon.png, index.html, klatki.jpg, kontakt.html, przeglądarka.txt, styl.css oraz kontakt.js („ewentualnie inne przygotowane pliki”). Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.

    przeglądarka.txt Tekst nowy plik 
    Google Chrome

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

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.