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

Rozwiązanie krok po kroku: Witryna pogotowia komputerowego (Wersja podstawowa)

Rozwiązanie buduje witrynę pogotowia komputerowego: najpierw grafika - ikona „IT”, dwa banery z myszą (raz obróconą, raz nie) i animacja GIF z tych banerów, potem dwie strony o wspólnym układzie (index.html i kontakt.html) z trzema blokami obok siebie, style w styl.css i skrypt JavaScript na stronie kontaktowej: po kliknięciu „Wyślij” wypisuje pod formularzem w trzech wierszach imię i nazwisko, adres e-mail małymi literami i wybraną usługę. Ten arkusz nie ma bazy danych ani PHP - strony otwierają się wprost z dysku.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, osobny skrypt)” jest drugi sposób rozwiązania tego samego arkusza: trzy bloki główne ułożone siatką CSS, kolory w zmiennych, formularz wysyłany przyciskiem submit i skrypt w osobnym pliku z nasłuchiwaczem zdarzenia - obie wersje są zgodne z kluczem.

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ą. Strona główna powstaje w całości, a kontaktowa powstaje z jej kopii - różni się tylko blokami głównymi. Skrypt jest najpierw pisany najprościej (onclick, innerHTML), a na końcu zostaje przerobiony na wersję z prawdziwych projektów.

Grafika pochodzi z prawdziwego archiwum materialy2 (załącznik do arkusza, hasło w treści zadania); banery i animacja są wykonane według obrazu 2. Skrypt jest sprawdzony na danych z obrazu 4 (Anna Nowak, adres wpisany wielkimi literami). 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 - można stracić 10 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 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. żeby napis wypełnił całą grafikę jak na obrazie 1, warstwę tekstu przerabiasz narzędziem Skalowanie (bez zachowania proporcji) tak, by litery dotykały wszystkich czterech krawędzi,
    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. 7 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; warstwę dosuwasz 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, czyli jest obrócona do góry nogami (klucz: obrót o 180 stopni, R.1.4); kopię dosuwasz do lewej krawędzi,
    4. narzędzie Tekst pomiędzy myszami: „POGOTOWIE KOMPUTEROWE” w dwóch wierszach, Arial Bold, kolor czerwony (ff0000), wyśrodkowany,
    5. Eksportuj jako baner1.png. Plik .xcf zapisujesz też 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.

    Z pliku banera 1 zmieniasz 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. otwierasz baner1.png, Plik → Otwórz jako warstwy baner2.png - obraz ma dwie warstwy,
    2. Plik → Eksportuj jako animacja.gif, w oknie eksportu zaznaczasz Jako animację i Pętla nieskończona, Opóźnienie między klatkami, jeśli nie określono: 4000 ms, Rozmieszczenie klatek: Jedna klatka na warstwę (zastąpienie) - przy przezroczystym tle bez tego czerwony napis prześwitywałby pod żółtym,
    3. zanim klikniesz Eksportuj, robisz zrzut całego ekranu z tym oknem i wpisanym 4000 - klatki.jpg, bez kadrowania, z paskiem zadań (R.1.9).

    Podgląd: gotowa animacja - kolor napisu zmienia się co 4 sekundy.

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

    Zbuduj w całości index.html, a podstrona powstanie z jej kopii. <!DOCTYPE html> mówi przeglądarce, że to 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 znaczniku <html>.

    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

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

    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)

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

    W tym arkuszu plik nazywa się styl.css.

    Typowe błędy

    Inna nazwa pliku (style.css, styles.css) odcina wszystkie style - kryterium 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">
    <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.

    Ikonę strony dodaje <link rel="icon"> w <head>. Przeglądarki przyjmują zwykły plik PNG.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.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 id="container"> obejmuje całą treść. W środku: <section id="banner">, <nav id="menu">, trzy bloki główne i <footer>. Bloki główne mają te same cechy, więc dostają wspólną klasę block zamiast trzech identyfikatorów - jedna reguła CSS ustawi wszystkie trzy.

    index.html HTML zmienione: 14 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <div id="container">
        <section id="banner">
        </section>
        <nav id="menu">
        </nav>
        <section class="block">
        </section>
        <section class="block">
        </section>
        <section class="block">
        </section>
        <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 wstawiasz zwykłym <img> - przeglądarka sama odtwarza klatki.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <div id="container">
        <section id="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe">
        </section>
        <nav id="menu">
        </nav>
        <section class="block">
        </section>
        <section class="block">
        </section>
        <section class="block">
        </section>
        <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 będzie na obu stronach (R.3.2). W podglądzie kliknięcia są zablokowane.

    index.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <div id="container">
        <section id="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="block">
        </section>
        <section class="block">
        </section>
        <section class="block">
        </section>
        <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 uwypuklony). Na egzaminie w środku stoi twój numer zdającego (PESEL), tu - autor rozwiązania.

    Typowe błędy

    <i> też pochyla, ale nie jest znacznikiem semantycznym - 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">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <div id="container">
        <section id="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="block">
        </section>
        <section class="block">
        </section>
        <section class="block">
        </section>
        <footer>
            Autor: <em>Bartosz Bryniarski</em>
        </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 block.

    index.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <div id="container">
        <section id="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="block">
            <h3>Kim jesteśmy?</h3>
            <p>Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT.</p>
        </section>
        <section class="block">
        </section>
        <section class="block">
        </section>
        <footer>
            Autor: <em>Bartosz Bryniarski</em>
        </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 to <ul> - z punktorami zamiast numerów.

    index.html HTML zmienione: 7 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <div id="container">
        <section id="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="block">
            <h3>Kim jesteśmy?</h3>
            <p>Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT.</p>
        </section>
        <section class="block">
            <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="block">
        </section>
        <footer>
            Autor: <em>Bartosz Bryniarski</em>
        </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 favicon.png, który jest ikoną karty, tu jako zwykły obraz.

    index.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <div id="container">
        <section id="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="block">
            <h3>Kim jesteśmy?</h3>
            <p>Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT.</p>
        </section>
        <section class="block">
            <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="block">
            <h3>Jaki jest nasz znak?</h3>
            <img src="favicon.png" alt="Doświadczenie i niezawodność">
        </section>
        <footer>
            Autor: <em>Bartosz Bryniarski</em>
        </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, a w drugim nagłówek, tabela i linia. Tabelę obejmujesz znacznikiem <form> - bez formularza przycisk „Czyść” nie miałby czego czyścić.

    kontakt.html HTML nowy plik 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <div id="container">
        <section id="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="block">
        </section>
        <section class="block">
            <h2>Kontakt</h2>
            <form>
                <table>
                </table>
            </form>
            <hr>
        </section>
        <section class="block">
        </section>
        <footer>
            Autor: <em>Bartosz Bryniarski</em>
        </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="name"> wiąże napis z polem o id="name" - kliknięcie napisu ustawia kursor w polu. Identyfikator przyda się też skryptowi.

    kontakt.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <div id="container">
        <section id="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="block">
        </section>
        <section class="block">
            <h2>Kontakt</h2>
            <form>
                <table>
                    <tr>
                        <td><label for="name">Imię: </label></td>
                        <td><input type="text" id="name"></td>
                    </tr>
                </table>
            </form>
            <hr>
        </section>
        <section class="block">
        </section>
        <footer>
            Autor: <em>Bartosz Bryniarski</em>
        </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.

    Drugi wiersz - tak samo, z identyfikatorem surname.

    kontakt.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <div id="container">
        <section id="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="block">
        </section>
        <section class="block">
            <h2>Kontakt</h2>
            <form>
                <table>
                    <tr>
                        <td><label for="name">Imię: </label></td>
                        <td><input type="text" id="name"></td>
                    </tr>
                    <tr>
                        <td><label for="surname">Nazwisko: </label></td>
                        <td><input type="text" id="surname"></td>
                    </tr>
                </table>
            </form>
            <hr>
        </section>
        <section class="block">
        </section>
        <footer>
            Autor: <em>Bartosz Bryniarski</em>
        </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" - przeglądarka zna format adresu, a 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">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <div id="container">
        <section id="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="block">
        </section>
        <section class="block">
            <h2>Kontakt</h2>
            <form>
                <table>
                    <tr>
                        <td><label for="name">Imię: </label></td>
                        <td><input type="text" id="name"></td>
                    </tr>
                    <tr>
                        <td><label for="surname">Nazwisko: </label></td>
                        <td><input type="text" id="surname"></td>
                    </tr>
                    <tr>
                        <td><label for="email">E-mail: </label></td>
                        <td><input type="email" id="email"></td>
                    </tr>
                </table>
            </form>
            <hr>
        </section>
        <section class="block">
        </section>
        <footer>
            Autor: <em>Bartosz Bryniarski</em>
        </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.

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

    kontakt.html HTML zmienione: 11 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <div id="container">
        <section id="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="block">
        </section>
        <section class="block">
            <h2>Kontakt</h2>
            <form>
                <table>
                    <tr>
                        <td><label for="name">Imię: </label></td>
                        <td><input type="text" id="name"></td>
                    </tr>
                    <tr>
                        <td><label for="surname">Nazwisko: </label></td>
                        <td><input type="text" id="surname"></td>
                    </tr>
                    <tr>
                        <td><label for="email">E-mail: </label></td>
                        <td><input type="email" id="email"></td>
                    </tr>
                    <tr>
                        <td><label for="service">Zgłoszenie: </label></td>
                        <td>
                            <select id="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="block">
        </section>
        <footer>
            Autor: <em>Bartosz Bryniarski</em>
        </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 checked (bez wartości) sprawia, że pole jest zaznaczone od razu po wczytaniu strony (R.3.3).

    kontakt.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <div id="container">
        <section id="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="block">
        </section>
        <section class="block">
            <h2>Kontakt</h2>
            <form>
                <table>
                    <tr>
                        <td><label for="name">Imię: </label></td>
                        <td><input type="text" id="name"></td>
                    </tr>
                    <tr>
                        <td><label for="surname">Nazwisko: </label></td>
                        <td><input type="text" id="surname"></td>
                    </tr>
                    <tr>
                        <td><label for="email">E-mail: </label></td>
                        <td><input type="email" id="email"></td>
                    </tr>
                    <tr>
                        <td><label for="service">Zgłoszenie: </label></td>
                        <td>
                            <select id="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" checked><label for="copy">Wyślij kopię wiadomości</label></td>
                    </tr>
                </table>
            </form>
            <hr>
        </section>
        <section class="block">
        </section>
        <footer>
            Autor: <em>Bartosz Bryniarski</em>
        </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

    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 = …)

    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" - przycisk przywracający kontrolki formularza do stanu początkowego, bez skryptu (pole wyboru wraca do zaznaczonego, bo tak zaczynało),
    • type="button" - przycisk, który nie wysyła formularza; onclick="send()" wywoła funkcję skryptu. Domyślny submit przeładowałby stronę i skasował wynik.

    Funkcję send napiszesz w części o skrypcie.

    kontakt.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <div id="container">
        <section id="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="block">
        </section>
        <section class="block">
            <h2>Kontakt</h2>
            <form>
                <table>
                    <tr>
                        <td><label for="name">Imię: </label></td>
                        <td><input type="text" id="name"></td>
                    </tr>
                    <tr>
                        <td><label for="surname">Nazwisko: </label></td>
                        <td><input type="text" id="surname"></td>
                    </tr>
                    <tr>
                        <td><label for="email">E-mail: </label></td>
                        <td><input type="email" id="email"></td>
                    </tr>
                    <tr>
                        <td><label for="service">Zgłoszenie: </label></td>
                        <td>
                            <select id="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" checked><label for="copy">Wyślij kopię wiadomości</label></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button type="reset">Czyść</button> <button type="button" onclick="send()">Wyślij</button></td>
                    </tr>
                </table>
            </form>
            <hr>
        </section>
        <section class="block">
        </section>
        <footer>
            Autor: <em>Bartosz Bryniarski</em>
        </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

    Skrypt wyświetla komunikat pod linią poziomą, w paragrafie.

    Pusty <p id="message"> pod <hr> - skrypt wpisze do niego komunikat.

    kontakt.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <div id="container">
        <section id="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="block">
        </section>
        <section class="block">
            <h2>Kontakt</h2>
            <form>
                <table>
                    <tr>
                        <td><label for="name">Imię: </label></td>
                        <td><input type="text" id="name"></td>
                    </tr>
                    <tr>
                        <td><label for="surname">Nazwisko: </label></td>
                        <td><input type="text" id="surname"></td>
                    </tr>
                    <tr>
                        <td><label for="email">E-mail: </label></td>
                        <td><input type="email" id="email"></td>
                    </tr>
                    <tr>
                        <td><label for="service">Zgłoszenie: </label></td>
                        <td>
                            <select id="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" checked><label for="copy">Wyślij kopię wiadomości</label></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button type="reset">Czyść</button> <button type="button" onclick="send()">Wyślij</button></td>
                    </tr>
                </table>
            </form>
            <hr>
            <p id="message"></p>
        </section>
        <section class="block">
        </section>
        <footer>
            Autor: <em>Bartosz Bryniarski</em>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  26. Etap 3: Styl CSS

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

    Krok 26: Plik styl.css: 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

    Styl CSS zdefiniowany w zewnętrznym pliku o nazwie styl.css. Arkusz CSS zawiera formatowanie: Całej strony: kolor tła #E0F7FA, krój czcionki Arial, wyrównanie tekstu do środka.

    Selektor body. Obie strony podpinają ten sam plik.

    styl.css CSS nowy plik 
    body {
    background-color: #E0F7FA;
    font-family: Arial;
    text-align: center;
}
    Podgląd strony po tym kroku (index.html)

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

    styl.css CSS zmienione: 4 linie 
    body {
    background-color: #E0F7FA;
    font-family: Arial;
    text-align: center;
}
#container {
    width: 95%;
    margin: auto;
}
    Podgląd strony po tym kroku (index.html)

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

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

    Animacja ma przezroczyste tło, więc kolor banera prześwituje wokół napisu. Animacja jest wyśrodkowana, bo text-align: center z body działa też na obrazy.

    styl.css CSS zmienione: 4 linie 
    body {
    background-color: #E0F7FA;
    font-family: Arial;
    text-align: center;
}
#container {
    width: 95%;
    margin: auto;
}
#banner {
    background-color: #00838F;
    height: 200px;
}
    Podgląd strony po tym kroku (index.html)

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

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

    Selektor #menu.

    styl.css CSS zmienione: 4 linie 
    body {
    background-color: #E0F7FA;
    font-family: Arial;
    text-align: center;
}
#container {
    width: 95%;
    margin: auto;
}
#banner {
    background-color: #00838F;
    height: 200px;
}
#menu {
    background-color: #006064;
    padding: 15px;
}
    Podgląd strony po tym kroku (index.html)

  30. Krok 30: 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, jak wymaga klucz.

    styl.css CSS zmienione: 5 linii 
    body {
    background-color: #E0F7FA;
    font-family: Arial;
    text-align: center;
}
#container {
    width: 95%;
    margin: auto;
}
#banner {
    background-color: #00838F;
    height: 200px;
}
#menu {
    background-color: #006064;
    padding: 15px;
}
#menu a {
    color: white;
    text-decoration: none;
    font-size: 150%;
}
    Podgląd strony po tym kroku (index.html)

  31. Krok 31: Trzy bloki główne

    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.5 Ustawiono wysokość bloku banera na 200px oraz trzech bloków głównych na 350px

    ok. 1 min
    Polecenie z arkusza

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

    Jedna reguła dla klasy block ustawia wszystkie trzy sekcje. 3 × 33% = 99% - zostaje zapas, więc bloki zmieszczą się w jednym wierszu.

    styl.css CSS zmienione: 4 linie 
    body {
    background-color: #E0F7FA;
    font-family: Arial;
    text-align: center;
}
#container {
    width: 95%;
    margin: auto;
}
#banner {
    background-color: #00838F;
    height: 200px;
}
#menu {
    background-color: #006064;
    padding: 15px;
}
#menu a {
    color: white;
    text-decoration: none;
    font-size: 150%;
}
.block {
    height: 350px;
    width: 33%;
}
    Podgląd strony po tym kroku (index.html)

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

    styl.css CSS zmienione: 6 linii 
    body {
    background-color: #E0F7FA;
    font-family: Arial;
    text-align: center;
}
#container {
    width: 95%;
    margin: auto;
}
#banner {
    background-color: #00838F;
    height: 200px;
}
#menu {
    background-color: #006064;
    padding: 15px;
}
#menu a {
    color: white;
    text-decoration: none;
    font-size: 150%;
}
.block {
    height: 350px;
    width: 33%;
}
footer {
    background-color: #006064;
    color: white;
    text-align: right;
    padding: 10px;
}
    Podgląd strony po tym kroku (index.html)

  33. Krok 33: 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 - cała strona jest wyśrodkowana, a lista ma stać przy lewej krawędzi, jak na obrazie 3.

    Typowe błędy

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

    styl.css CSS zmienione: 3 linie 
    body {
    background-color: #E0F7FA;
    font-family: Arial;
    text-align: center;
}
#container {
    width: 95%;
    margin: auto;
}
#banner {
    background-color: #00838F;
    height: 200px;
}
#menu {
    background-color: #006064;
    padding: 15px;
}
#menu a {
    color: white;
    text-decoration: none;
    font-size: 150%;
}
.block {
    height: 350px;
    width: 33%;
}
footer {
    background-color: #006064;
    color: white;
    text-align: right;
    padding: 10px;
}
ul {
    text-align: left;
}
    Podgląd strony po tym kroku (index.html)

  34. Krok 34: 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 - dlatego oba przyciski są znacznikami <button>, a nie <input>.

    styl.css CSS zmienione: 4 linie 
    body {
    background-color: #E0F7FA;
    font-family: Arial;
    text-align: center;
}
#container {
    width: 95%;
    margin: auto;
}
#banner {
    background-color: #00838F;
    height: 200px;
}
#menu {
    background-color: #006064;
    padding: 15px;
}
#menu a {
    color: white;
    text-decoration: none;
    font-size: 150%;
}
.block {
    height: 350px;
    width: 33%;
}
footer {
    background-color: #006064;
    color: white;
    text-align: right;
    padding: 10px;
}
ul {
    text-align: left;
}
button {
    background-color: #00838F;
    color: white;
}
    Podgląd strony po tym kroku (kontakt.html)

  35. Krok 35: 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 - najedź w podglądzie na przycisk.

    styl.css CSS zmienione: 3 linie 
    body {
    background-color: #E0F7FA;
    font-family: Arial;
    text-align: center;
}
#container {
    width: 95%;
    margin: auto;
}
#banner {
    background-color: #00838F;
    height: 200px;
}
#menu {
    background-color: #006064;
    padding: 15px;
}
#menu a {
    color: white;
    text-decoration: none;
    font-size: 150%;
}
.block {
    height: 350px;
    width: 33%;
}
footer {
    background-color: #006064;
    color: white;
    text-align: right;
    padding: 10px;
}
ul {
    text-align: left;
}
button {
    background-color: #00838F;
    color: white;
}
button:hover {
    color: #80DEEA;
}
    Podgląd strony po tym kroku (kontakt.html)

  36. Krok 36: Układ: trzy bloki 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)

    ok. 1 min
    Polecenie z arkusza

    Poniżej obok siebie trzy bloki główne oraz na dole stopka.

    float: left stawia trzy bloki w jednym wierszu, a clear: both w stopce sprowadza ją pod nie.

    styl.css CSS zmienione: 6 linii 
    body {
    background-color: #E0F7FA;
    font-family: Arial;
    text-align: center;
}
#container {
    width: 95%;
    margin: auto;
}
#banner {
    background-color: #00838F;
    height: 200px;
}
#menu {
    background-color: #006064;
    padding: 15px;
}
#menu a {
    color: white;
    text-decoration: none;
    font-size: 150%;
}
.block {
    height: 350px;
    width: 33%;
}
footer {
    background-color: #006064;
    color: white;
    text-align: right;
    padding: 10px;
}
ul {
    text-align: left;
}
button {
    background-color: #00838F;
    color: white;
}
button:hover {
    color: #80DEEA;
}
.block {
    float: left;
}
footer {
    clear: both;
}
    Podgląd strony po tym kroku (kontakt.html)

  37. Etap 4: Skrypt JavaScript

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

    Krok 37: Funkcja send wywoływana przyciskiem

    Kryteria:

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

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

    Skrypt w <script> na końcu <body> strony kontaktowej. Funkcja ma nazwę z onclick przycisku: send. Na razie pusta.

    kontakt.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <div id="container">
        <section id="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="block">
        </section>
        <section class="block">
            <h2>Kontakt</h2>
            <form>
                <table>
                    <tr>
                        <td><label for="name">Imię: </label></td>
                        <td><input type="text" id="name"></td>
                    </tr>
                    <tr>
                        <td><label for="surname">Nazwisko: </label></td>
                        <td><input type="text" id="surname"></td>
                    </tr>
                    <tr>
                        <td><label for="email">E-mail: </label></td>
                        <td><input type="email" id="email"></td>
                    </tr>
                    <tr>
                        <td><label for="service">Zgłoszenie: </label></td>
                        <td>
                            <select id="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" checked><label for="copy">Wyślij kopię wiadomości</label></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button type="reset">Czyść</button> <button type="button" onclick="send()">Wyślij</button></td>
                    </tr>
                </table>
            </form>
            <hr>
            <p id="message"></p>
        </section>
        <section class="block">
        </section>
        <footer>
            Autor: <em>Bartosz Bryniarski</em>
        </footer>
    </div>
    <script>
        function send() {
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  38. Krok 38: Pobranie wartości z kontrolek

    Kryteria:

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

    ok. 2 min
    Polecenie z arkusza

    Skrypt pobiera wartości wprowadzone do kontrolek.

    .value pola tekstowego to wpisany tekst, a .value listy rozwijanej - wartość wybranej opcji, czyli jej tekst.

    kontakt.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <div id="container">
        <section id="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="block">
        </section>
        <section class="block">
            <h2>Kontakt</h2>
            <form>
                <table>
                    <tr>
                        <td><label for="name">Imię: </label></td>
                        <td><input type="text" id="name"></td>
                    </tr>
                    <tr>
                        <td><label for="surname">Nazwisko: </label></td>
                        <td><input type="text" id="surname"></td>
                    </tr>
                    <tr>
                        <td><label for="email">E-mail: </label></td>
                        <td><input type="email" id="email"></td>
                    </tr>
                    <tr>
                        <td><label for="service">Zgłoszenie: </label></td>
                        <td>
                            <select id="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" checked><label for="copy">Wyślij kopię wiadomości</label></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button type="reset">Czyść</button> <button type="button" onclick="send()">Wyślij</button></td>
                    </tr>
                </table>
            </form>
            <hr>
            <p id="message"></p>
        </section>
        <section class="block">
        </section>
        <footer>
            Autor: <em>Bartosz Bryniarski</em>
        </footer>
    </div>
    <script>
        function send() {
            let name = document.getElementById("name").value;
            let surname = document.getElementById("surname").value;
            let email = document.getElementById("email").value;
            let service = document.getElementById("service").value;
        }
    </script>
</body>
</html>
    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. 3 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 rozdziela znacznik <br> w napisie, dlatego wpisujesz przez innerHTML,
    • toLowerCase() zamienia adres na małe litery - „[email protected]” staje się „[email protected]” (R.5.6).

    Wpisz w podglądzie Anna, Nowak, [email protected], wybierz „wirusy” i kliknij „Wyślij” - wynik jak na obrazie 4. Nazwy zmiennych i funkcji są po angielsku i mówią, co przechowują (R.5.7).

    Typowe błędy

    Bez <br> trzy informacje wychodzą w jednym wierszu - klucz wymaga ich w kolejnych liniach (R.5.3, R.5.4).

    kontakt.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <div id="container">
        <section id="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="block">
        </section>
        <section class="block">
            <h2>Kontakt</h2>
            <form>
                <table>
                    <tr>
                        <td><label for="name">Imię: </label></td>
                        <td><input type="text" id="name"></td>
                    </tr>
                    <tr>
                        <td><label for="surname">Nazwisko: </label></td>
                        <td><input type="text" id="surname"></td>
                    </tr>
                    <tr>
                        <td><label for="email">E-mail: </label></td>
                        <td><input type="email" id="email"></td>
                    </tr>
                    <tr>
                        <td><label for="service">Zgłoszenie: </label></td>
                        <td>
                            <select id="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" checked><label for="copy">Wyślij kopię wiadomości</label></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button type="reset">Czyść</button> <button type="button" onclick="send()">Wyślij</button></td>
                    </tr>
                </table>
            </form>
            <hr>
            <p id="message"></p>
        </section>
        <section class="block">
        </section>
        <footer>
            Autor: <em>Bartosz Bryniarski</em>
        </footer>
    </div>
    <script>
        function send() {
            let name = document.getElementById("name").value;
            let surname = document.getElementById("surname").value;
            let email = document.getElementById("email").value;
            let service = document.getElementById("service").value;
            document.getElementById("message").innerHTML = name + " " + surname + "<br>" + email.toLowerCase() + "<br>Usługa: " + service;
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  40. Etap 5: Dobre praktyki (poza kluczem)

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

    Krok 40: Dane z formularza jako tekst, nie HTML; słuchacz zdarzenia

    ok. 5 min
    Polecenie z arkusza

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

    Trzy poprawki z prawdziwych projektów:

    • Dane z formularza nie trafiają do innerHTML. Imię wpisane jako <b>Jan</b> wersja egzaminacyjna pokaże pogrubione - przeglądarka wykonała znaczniki; tą drogą da się wstrzyknąć na stronę skrypt (atak XSS). Teraz replaceChildren wstawia napisy jako zwykły tekst, a łamania linii jako prawdziwe elementy <br> z createElement,
    • trim() przed toLowerCase() - usuwa przypadkowe spacje z początku i końca adresu,
    • addEventListener("click", send) zamiast onclick w HTML.

    Sprawdzone na atrapie strony: dane z obrazu 4 dają ten sam wynik, a <b>Jan</b> zostaje tekstem. Stara linia zostaje w komentarzu. Na egzaminie wystarczy wersja wcześniejsza - klucz przyjmuje onclick i innerHTML.

    kontakt.html HTML zmienione: 9 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Komputery</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png">
</head>
<body>
    <div id="container">
        <section id="banner">
            <img src="animacja.gif" alt="Pogotowie komputerowe">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="block">
        </section>
        <section class="block">
            <h2>Kontakt</h2>
            <form>
                <table>
                    <tr>
                        <td><label for="name">Imię: </label></td>
                        <td><input type="text" id="name"></td>
                    </tr>
                    <tr>
                        <td><label for="surname">Nazwisko: </label></td>
                        <td><input type="text" id="surname"></td>
                    </tr>
                    <tr>
                        <td><label for="email">E-mail: </label></td>
                        <td><input type="email" id="email"></td>
                    </tr>
                    <tr>
                        <td><label for="service">Zgłoszenie: </label></td>
                        <td>
                            <select id="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" checked><label for="copy">Wyślij kopię wiadomości</label></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button type="reset">Czyść</button> <button type="button" id="send">Wyślij</button></td>
                    </tr>
                </table>
            </form>
            <hr>
            <p id="message"></p>
        </section>
        <section class="block">
        </section>
        <footer>
            Autor: <em>Bartosz Bryniarski</em>
        </footer>
    </div>
    <script>
        function send() {
            let name = document.getElementById("name").value;
            let surname = document.getElementById("surname").value;
            let email = document.getElementById("email").value.trim().toLowerCase();
            let service = document.getElementById("service").value;
            // document.getElementById("message").innerHTML = name + " " + surname + "<br>" + email.toLowerCase() + "<br>Usługa: " + service;
            document.getElementById("message").replaceChildren(
                name + " " + surname, document.createElement("br"),
                email, document.createElement("br"),
                "Usługa: " + service);
        }

        document.getElementById("send").addEventListener("click", send);
    </script>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  41. Etap 6: Oddanie pracy

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

    Krok 41: 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 wpisujesz nazwę przeglądarki.

    W folderze: animacja.gif, baner1.png, baner2.png, favicon.png, index.html, klatki.jpg, kontakt.html, przeglądarka.txt, styl.css. 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.