Przejdź do głównej treści
INF.03-01-24.01-SGStyczeń 2024 · 44 kroki · ok. 85 min · 42 kryteria z klucza

Rozwiązanie krok po kroku: Witryna firmy IT (Wersja podstawowa)

Rozwiązanie buduje witrynę firmy usług informatycznych: najpierw grafika - logo „IT”, dwa banery z myszkami i animacja GIF z tych banerów, potem trzy strony o wspólnym układzie (index.html, uslugi.html, kontakt.html) z ikoną na karcie przeglądarki, style w styl.css i skrypt JavaScript na stronie kontaktowej: po kliknięciu „Prześlij” sprawdza pole wyboru regulaminu i wypisuje pod formularzem albo ostrzeżenie na czerwono, albo imię i nazwisko wielkimi literami z treścią zgłoszenia. 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: bloki 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 dwie pozostałe powstają z jej kopii - różnią się tylko blokiem głównym. 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 materialy1 (załącznik do arkusza, hasło w treści zadania); banery i animacja są wykonane według obrazów 2a i 2b. Skrypt jest sprawdzony na danych z obrazu 3 (Anna Nowak). W podglądzie strony kontaktowej można wypełnić formularz i kliknąć „Prześlij”.

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

    Krok 1: Logo: napis IT na całej grafice, 100 × 100 px

    Kryteria: , ,

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

    R.1.2 Plik z logo zawiera napis "IT" w kolorze niebieskim, wypełniający całą przestrzeń grafiki

    R.1.3 Logo ma wysokość i szerokość 100 px (± 2 px)

    ok. 5 min
    Polecenie z arkusza

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

    W GIMP-ie:

    1. Plik → Nowy: 100 × 100 px, w opcjach zaawansowanych Wypełnienie: Przezroczystość,
    2. narzędzie Tekst, kolor niebieski (0000ff), duży rozmiar, 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 - napis jest wtedy rozciągnięty w pionie,
    4. Eksportuj jako logo.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: grafika i napis „Usługi informatyczne”

    Kryteria: , ,

    R.1.4 Przynajmniej jeden obraz baner1 lub baner2 zawiera obraz z pliku grafika.jpg . Jest on wyrównany do lewej strony oraz umieszczony w banerze w całości (obie myszy są widoczne w całości)

    R.1.5 Plik baner1 zawiera napis o treści „Usługi informatyczne” oraz baner2 napis „doświadczenie, niezawodność, konkurencyjne ceny” w trzech liniach. Zastosowano czcionkę szeryfową, pochyloną, koloru niebieskiego na przynajmniej jednej grafice

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

    ok. 6 min
    Polecenie z arkusza

    Wspólne wytyczne dla dwóch banerów: Cechy obrazu: tło przezroczyste, wysokość 200 px, szerokość 1000 px. Plik grafika.jpg przeskalowany z zachowaniem proporcji do wysokości 200 px, umieszczony w każdym banerze i wyrównany do jego lewej strony. Z prawej strony grafiki znajduje się napis: dla banera1 o treści „Usługi informatyczne”, zgodnie z obrazem 2a. Cechy tekstu: czcionka szeryfowa, pochylona, koloru niebieskiego. Nazwy plików: baner1 i baner2, format umożliwiający zapis przezroczystości.

    1. Plik → Nowy: 1000 × 200 px, wypełnienie przezroczyste,
    2. Plik → Otwórz jako warstwy grafika.jpg (655 × 411), Warstwa → Skaluj warstwę: wysokość 200 z zamkniętym łańcuchem - szerokość wychodzi 319 px; narzędziem Wyrównanie dosuwasz warstwę do lewej i górnej krawędzi. Obie myszy muszą być widoczne w całości (R.1.4),
    3. narzędzie Tekst z prawej strony zdjęcia: czcionka szeryfowa pochylona, np. Georgia Italic, kolor niebieski,
    4. Eksportuj jako baner1.png. Plik .xcf zapisujesz też osobno - posłuży do banera 2.
    Podgląd strony po tym kroku
    Podgląd strony po kroku 2

  3. Krok 3: Baner 2: napis w trzech wierszach

    Kryteria: ,

    R.1.5 Plik baner1 zawiera napis o treści „Usługi informatyczne” oraz baner2 napis „doświadczenie, niezawodność, konkurencyjne ceny” w trzech liniach. Zastosowano czcionkę szeryfową, pochyloną, koloru niebieskiego na przynajmniej jednej grafice

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

    ok. 3 min
    Polecenie z arkusza

    Dla banera2 o treści „doświadczenie, niezawodność, konkurencyjne ceny”, zgodnie z obrazem 2b.

    Z pliku banera 1 zmieniasz tylko tekst: trzy wiersze (Enter po przecinkach) - klucz wymaga napisu w trzech liniach. Mniejsza czcionka, żeby trzy wiersze zmieściły się w 200 px. Eksportuj jako baner2.png.

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

  4. Krok 4: Animacja GIF z opóźnieniem 3000 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 3000 ms (3 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 3000 ms (3 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: 3000 ms, Rozmieszczenie klatek: Jedna klatka na warstwę (zastąpienie) - przy przezroczystym tle bez tego napis z poprzedniej klatki prześwitywałby pod następną,
    3. zanim klikniesz Eksportuj, robisz zrzut całego ekranu z tym oknem i wpisanym 3000 - klatki.jpg, bez kadrowania, z paskiem zadań (R.1.9).

    Podgląd: gotowa animacja - banery zmieniają się co 3 sekundy.

    Typowe błędy

    Zrzut okna bez paska zadań albo wykadrowany nie spełnia R.1.9. Zapis z rozmieszczeniem „połącz” zostawia napis banera 1 widoczny pod napisem banera 2.

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

  5. Etap 2: Strony HTML

    Kroki 5-28 · po tym etapie masz 23 z 42 kryteriów (pkt)

    Krok 5: Plik index.html w HTML5

    Kryteria:

    R.2.1 Witrynę internetową zapisano w plikach index.html, uslugi.html oraz kontakt.html oraz na stronie 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 podstrony: uslugi.html i kontakt.html. Cechy wspólne dla wszystkich stron: Zapisane w języku HTML 5.

    Zbuduj w całości index.html, a podstrony powstaną 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, uslugi.html oraz kontakt.html oraz na stronie 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, uslugi.html oraz kontakt.html oraz na stronie 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ł: "Firma IT"

    ok. 1 min
    Polecenie z arkusza

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

    <title> w <head>.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</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 (za wyjątkiem skryptu) 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>Firma IT</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 logo

    ok. 1 min
    Polecenie z arkusza

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

    Ikonę strony (favicon) dodaje <link rel="icon"> w <head>. Przeglądarki przyjmują zwykły plik PNG - nie trzeba formatu .ico.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.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: blok logo i menu, baner, blok główny, stopkę. Zastosowano znaczniki sekcji

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki: kontener całej strony, w którym znajdują się: obok siebie bloki logo i menu, poniżej baner, poniżej blok główny 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ść - dzięki niemu stronę da się zwęzić i wyśrodkować jedną regułą CSS. W środku znaczniki sekcji: <section id="logo">, <nav id="menu">, <section id="banner">, <main> na blok główny i <footer>. Ustawienie logo i menu obok siebie zrobisz w CSS.

    index.html HTML zmienione: 12 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
        </section>
        <nav id="menu">
        </nav>
        <section id="banner">
        </section>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  12. Krok 12: Blok logo

    Kryteria:

    R.2.5 W bloku logo znajduje się obraz logo z tekstem alternatywnym "firma it" lub w banerze animacja.gif z tekstem alternatywnym "Usługi informatyczne"

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku logo: obraz logo z tekstem alternatywnym „firma it”.

    Obraz z atrybutem alt, małymi literami jak w arkuszu.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
        </nav>
        <section id="banner">
        </section>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  13. Krok 13: Menu: trzy 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 , "Usługi" otwiera stronę uslugi.html i "Kontakt" otwiera stronę kontakt.html

    ok. 2 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 „Usługi”, który prowadzi do strony uslugi.html. Odnośnik o treści „Kontakt”, który prowadzi do strony kontakt.html.

    Trzy <a> z nazwami plików z tego samego folderu. Ten sam blok menu będzie na każdej stronie, więc z każdej da się przejść na każdą (R.3.2). W podglądzie kliknięcia są zablokowane.

    index.html HTML zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
        </section>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  14. Krok 14: Baner: animacja

    Kryteria:

    R.2.5 W bloku logo znajduje się obraz logo z tekstem alternatywnym "firma it" lub w banerze animacja.gif z tekstem alternatywnym "Usługi informatyczne"

    ok. 1 min
    Polecenie z arkusza

    Zawartość banera: plik animacja.gif z tekstem alternatywnym „Usługi informatyczne”.

    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>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  15. Krok 15: Stopka z pogrubionym autorem

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Zawartość stopki: tekst „Autor strony: ”, dalej wstawiony numer zdającego. Numer zdającego jest pogrubiony za pomocą znacznika semantycznego oznaczającego tekst ważny.

    Znacznik tekstu ważnego to <strong> - przeglądarka pogrubia go domyślnie. Na egzaminie w środku stoi twój numer zdającego (PESEL), tu - autor rozwiązania.

    Typowe błędy

    <b> też pogrubia, ale nie znaczy „ważny” - 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>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
        </main>
        <footer>
            Autor strony: <strong>Bartosz Bryniarski</strong>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  16. Krok 16: Strona główna: nagłówek

    Kryteria:

    R.2.6 W bloku głównym zapisano nagłówek h2 o treści: „Firma IT” (index.html ) lub "Oferta" (uslugi.html ), lub "Kontakt" (kontakt.html )

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku głównego dla pliku index.html: Nagłówek drugiego stopnia o treści: „Firma IT”.

    <h2>.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
            <h2>Firma IT</h2>
        </main>
        <footer>
            Autor strony: <strong>Bartosz Bryniarski</strong>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  17. Krok 17: Strona główna: paragraf

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Paragraf (akapit) o treści: „Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT.”

    <p>.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
            <h2>Firma IT</h2>
            <p>Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT.</p>
        </main>
        <footer>
            Autor strony: <strong>Bartosz Bryniarski</strong>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  18. Krok 18: Strona główna: linia pozioma

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Linia pozioma.

    <hr> - znacznik pusty, bez zamknięcia (w HTML5 także bez ukośnika).

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
            <h2>Firma IT</h2>
            <p>Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT.</p>
            <hr>
        </main>
        <footer>
            Autor strony: <strong>Bartosz Bryniarski</strong>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  19. Krok 19: Podstrona uslugi.html z kopii

    Kryteria:

    R.2.6 W bloku głównym zapisano nagłówek h2 o treści: „Firma IT” (index.html ) lub "Oferta" (uslugi.html ), lub "Kontakt" (kontakt.html )

    ok. 2 min
    Polecenie z arkusza

    Zawartość bloku głównego dla pliku uslugi.html: Nagłówek drugiego stopnia o treści: „Oferta”. Linia pozioma.

    Zapisz jako uslugi.html z kopii strony głównej i wymieniasz tylko zawartość <main>: nagłówek „Oferta” i linia pozioma. Głowa strony, logo, menu, baner i stopka zostają takie same - dlatego powstają najpierw.

    uslugi.html HTML nowy plik 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
            <h2>Oferta</h2>
            <hr>
        </main>
        <footer>
            Autor strony: <strong>Bartosz Bryniarski</strong>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (uslugi.html)

  20. Krok 20: Lista numerowana usług

    Kryteria:

    R.2.8 Na stronie uslugi.html w bloku głównym zapisano jedną listę numerowaną (uporządkowaną) z elementami: Outsourcing IT, Konfiguracja komputerów, Sprzęt komputerowy, Strony internetowe; zastosowano znaczniki <ol> i <li>

    ok. 1 min
    Polecenie z arkusza

    Lista numerowana (uporządkowana) z elementami: Outsourcing IT, Konfiguracja komputerów, Sprzęt komputerowy, Strony internetowe.

    Lista uporządkowana to <ol> (ordered list) - przeglądarka sama numeruje elementy <li>.

    uslugi.html HTML zmienione: 6 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
            <h2>Oferta</h2>
            <ol>
                <li>Outsourcing IT</li>
                <li>Konfiguracja komputerów</li>
                <li>Sprzęt komputerowy</li>
                <li>Strony internetowe</li>
            </ol>
            <hr>
        </main>
        <footer>
            Autor strony: <strong>Bartosz Bryniarski</strong>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (uslugi.html)

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

    Kryteria:

    R.2.6 W bloku głównym zapisano nagłówek h2 o treści: „Firma IT” (index.html ) lub "Oferta" (uslugi.html ), lub "Kontakt" (kontakt.html )

    ok. 2 min
    Polecenie z arkusza

    Zawartość bloku głównego dla pliku kontakt.html: Nagłówek drugiego stopnia o treści: „Kontakt”. Tabela o wymiarze 2 kolumny na 6 wierszy, wypełniona kontrolkami. Linia pozioma.

    Znowu kopia strony głównej, kontakt.html. Tabelę z kontrolkami obejmujesz znacznikiem <form> - bez formularza przycisk „Resetuj” nie miałby czego czyścić. Formularz niczego nie wysyła na serwer (nie ma action ani przycisku submit), służy tylko do grupowania kontrolek.

    kontakt.html HTML nowy plik 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
            <h2>Kontakt</h2>
            <form>
                <table>
                </table>
            </form>
            <hr>
        </main>
        <footer>
            Autor strony: <strong>Bartosz Bryniarski</strong>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  22. Krok 22: 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>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
            <h2>Kontakt</h2>
            <form>
                <table>
                    <tr>
                        <td><label for="name">Imię: </label></td>
                        <td><input type="text" id="name"></td>
                    </tr>
                </table>
            </form>
            <hr>
        </main>
        <footer>
            Autor strony: <strong>Bartosz Bryniarski</strong>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  23. Krok 23: 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>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
            <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>
        </main>
        <footer>
            Autor strony: <strong>Bartosz Bryniarski</strong>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

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

    Kryteria:

    R.3.3 Na stronie kontakt.html jedno pole edycyjne jest typu email oraz pole wielowierszowe ma 10 wierszy i 40 kolumn

    ok. 2 min
    Polecenie z arkusza

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

    type="email" - na telefonie pojawi się klawiatura ze znakiem @, a przeglądarka umie sprawdzić format adresu (R.3.3).

    kontakt.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
            <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>
        </main>
        <footer>
            Autor strony: <strong>Bartosz Bryniarski</strong>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  25. Krok 25: Tabela, wiersz 4: Zgłoszenie: pole wielowierszowe 10 × 40

    Kryteria:

    R.3.3 Na stronie kontakt.html jedno pole edycyjne jest typu email oraz pole wielowierszowe ma 10 wierszy i 40 kolumn

    ok. 2 min
    Polecenie z arkusza

    Tabela 1, wiersz 4: Napis „Zgłoszenie ”, pole wielowierszowe o 10 wierszach i 40 kolumnach.

    Pole wielowierszowe to <textarea> - znacznik z zamknięciem. Wielkość ustawiają rows (wiersze) i cols (kolumny, czyli szerokość w znakach) (R.3.3).

    kontakt.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
            <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="request">Zgłoszenie: </label></td>
                        <td><textarea id="request" rows="10" cols="40"></textarea></td>
                    </tr>
                </table>
            </form>
            <hr>
        </main>
        <footer>
            Autor strony: <strong>Bartosz Bryniarski</strong>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  26. Krok 26: Tabela, wiersz 5: Pole wyboru regulaminu

    ok. 2 min
    Polecenie z arkusza

    Tabela 1, wiersz 5: Pusta komórka, pole wyboru i napis „Zapoznałam/em się z regulaminem”.

    Pierwsza komórka pusta, w drugiej <input type="checkbox"> z etykietą. Skrypt sprawdzi właściwość checked tego pola.

    kontakt.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
            <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="request">Zgłoszenie: </label></td>
                        <td><textarea id="request" rows="10" cols="40"></textarea></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="checkbox" id="rules"><label for="rules">Zapoznałam/em się z regulaminem</label></td>
                    </tr>
                </table>
            </form>
            <hr>
        </main>
        <footer>
            Autor strony: <strong>Bartosz Bryniarski</strong>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  27. Krok 27: Tabela, wiersz 6: Przyciski Resetuj i Prześlij

    Kryteria: , ,

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

    R.2.10 Strona zawiera trzy pola edycyjne, jedno wielowierszowe, 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 „Resetuj” czyszczący kontrolki i przycisk „Prześlij”, którego wciśnięcie powoduje uruchomienie skryptu.

    • type="reset" - przycisk czyszczący wszystkie kontrolki formularza, bez ani linijki skryptu,
    • type="button" - zwykły przycisk, który nie wysyła formularza; onclick="send()" wywoła funkcję skryptu. Domyślny typ przycisku w formularzu to submit, który przeładowałby stronę i skasował wpisane dane razem z komunikatem.

    Funkcję send napiszesz w części o skrypcie - na razie kliknięcie „Prześlij” zgłasza w konsoli błąd, bo funkcji jeszcze nie ma.

    kontakt.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
            <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="request">Zgłoszenie: </label></td>
                        <td><textarea id="request" rows="10" cols="40"></textarea></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="checkbox" id="rules"><label for="rules">Zapoznałam/em się z regulaminem</label></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button type="reset">Resetuj</button> <button type="button" onclick="send()">Prześlij</button></td>
                    </tr>
                </table>
            </form>
            <hr>
        </main>
        <footer>
            Autor strony: <strong>Bartosz Bryniarski</strong>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  28. Krok 28: Pusty akapit na komunikat

    ok. 1 min
    Polecenie z arkusza

    Skrypt wyświetla komunikat w bloku głównym, w paragrafie (akapicie) pod poziomą linią.

    Pusty <p id="message"> pod <hr> - skrypt wpisze do niego komunikat, znajdując go po identyfikatorze.

    kontakt.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
            <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="request">Zgłoszenie: </label></td>
                        <td><textarea id="request" rows="10" cols="40"></textarea></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="checkbox" id="rules"><label for="rules">Zapoznałam/em się z regulaminem</label></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button type="reset">Resetuj</button> <button type="button" onclick="send()">Prześlij</button></td>
                    </tr>
                </table>
            </form>
            <hr>
            <p id="message"></p>
        </main>
        <footer>
            Autor strony: <strong>Bartosz Bryniarski</strong>
        </footer>
    </div>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  29. Etap 3: Styl CSS

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

    Krok 29: Plik styl.css: cała strona

    Kryteria:

    R.4.1 Ustawiono dla całej strony (body lub html) krój czcionki Helvetica oraz kolor tła #EEEEEE

    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 #EEEEEE, krój czcionki Helvetica.

    Selektor body. Wszystkie trzy strony podpinają ten sam plik, więc styl wystarczy napisać raz.

    styl.css CSS nowy plik 
    body {
    background-color: #EEEEEE;
    font-family: Helvetica;
}
    Podgląd strony po tym kroku (kontakt.html)

  30. Krok 30: Kontener

    Kryteria: ,

    R.4.4 Ustawiono szerokość kontenera strony na 90%, bloków logo i menu na 50% (width lub grid-template-columns lub flex)

    R.4.7 Ustawiono marginesy zewnętrzne (margin) dla kontenera strony na auto i dla bloku głównego na 50px oraz margines wewnętrzny (padding) górny i dolny na 10px dla bloku logo i menu oraz wszystkie marginesy wewnętrzne 10px dla stopki

    ok. 1 min
    Polecenie z arkusza

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

    margin: auto przy szerokości 90% dzieli wolne 10% po równo na lewo i prawo - strona stoi na środku.

    styl.css CSS zmienione: 4 linie 
    body {
    background-color: #EEEEEE;
    font-family: Helvetica;
}
#container {
    width: 90%;
    margin: auto;
}
    Podgląd strony po tym kroku (kontakt.html)

  31. Krok 31: Bloki logo i menu

    Kryteria: , , ,

    R.4.2 Ustawiono kolor tła bloków: logo, menu i stopki na LightBlue oraz dla banera #DDDDDD

    R.4.4 Ustawiono szerokość kontenera strony na 90%, bloków logo i menu na 50% (width lub grid-template-columns lub flex)

    R.4.5 Ustawiono wysokość bloków logo i menu na 100px, banera na 200px, głównego na 400px

    R.4.7 Ustawiono marginesy zewnętrzne (margin) dla kontenera strony na auto i dla bloku głównego na 50px oraz margines wewnętrzny (padding) górny i dolny na 10px dla bloku logo i menu oraz wszystkie marginesy wewnętrzne 10px dla stopki

    ok. 2 min
    Polecenie z arkusza

    Bloków logo i menu: kolor tła LightBlue, wysokość 100 px, szerokość 50%, margines wewnętrzny górny i dolny 10 px.

    Jedna reguła dla dwóch selektorów. padding: 10px 0 - góra i dół 10 px, boki 0; dzięki temu dwa bloki po 50% mieszczą się obok siebie (dopełnienie po bokach poszerzyłoby je ponad 100%).

    styl.css CSS zmienione: 6 linii 
    body {
    background-color: #EEEEEE;
    font-family: Helvetica;
}
#container {
    width: 90%;
    margin: auto;
}
#logo, #menu {
    background-color: LightBlue;
    height: 100px;
    width: 50%;
    padding: 10px 0;
}
    Podgląd strony po tym kroku (kontakt.html)

  32. Krok 32: Baner

    Kryteria: ,

    R.4.2 Ustawiono kolor tła bloków: logo, menu i stopki na LightBlue oraz dla banera #DDDDDD

    R.4.5 Ustawiono wysokość bloków logo i menu na 100px, banera na 200px, głównego na 400px

    ok. 1 min
    Polecenie z arkusza

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

    Animacja ma przezroczyste tło, więc szary kolor banera prześwituje obok napisów.

    styl.css CSS zmienione: 4 linie 
    body {
    background-color: #EEEEEE;
    font-family: Helvetica;
}
#container {
    width: 90%;
    margin: auto;
}
#logo, #menu {
    background-color: LightBlue;
    height: 100px;
    width: 50%;
    padding: 10px 0;
}
#banner {
    background-color: #DDDDDD;
    height: 200px;
}
    Podgląd strony po tym kroku (kontakt.html)

  33. Krok 33: Blok główny

    Kryteria: , ,

    R.4.3 Ustawiono kolor czcionki Navy dla bloku głównego

    R.4.5 Ustawiono wysokość bloków logo i menu na 100px, banera na 200px, głównego na 400px

    R.4.7 Ustawiono marginesy zewnętrzne (margin) dla kontenera strony na auto i dla bloku głównego na 50px oraz margines wewnętrzny (padding) górny i dolny na 10px dla bloku logo i menu oraz wszystkie marginesy wewnętrzne 10px dla stopki

    ok. 1 min
    Polecenie z arkusza

    Bloku głównego: kolor czcionki Navy, marginesy zewnętrzne 50 px, wysokość 400 px.

    margin: 50px - odstęp ze wszystkich stron, stąd wcięcie treści względem banera i stopki.

    styl.css CSS zmienione: 5 linii 
    body {
    background-color: #EEEEEE;
    font-family: Helvetica;
}
#container {
    width: 90%;
    margin: auto;
}
#logo, #menu {
    background-color: LightBlue;
    height: 100px;
    width: 50%;
    padding: 10px 0;
}
#banner {
    background-color: #DDDDDD;
    height: 200px;
}
main {
    color: Navy;
    margin: 50px;
    height: 400px;
}
    Podgląd strony po tym kroku (kontakt.html)

  34. Krok 34: Stopka

    Kryteria: , ,

    R.4.2 Ustawiono kolor tła bloków: logo, menu i stopki na LightBlue oraz dla banera #DDDDDD

    R.4.6 Ustawiono wyrównanie tekstu do prawej strony dla stopki

    R.4.7 Ustawiono marginesy zewnętrzne (margin) dla kontenera strony na auto i dla bloku głównego na 50px oraz margines wewnętrzny (padding) górny i dolny na 10px dla bloku logo i menu oraz wszystkie marginesy wewnętrzne 10px dla stopki

    ok. 1 min
    Polecenie z arkusza

    Stopki: wyrównanie tekstu do prawej strony, kolor tła LightBlue, marginesy wewnętrzne 10 px.

    Selektor footer.

    styl.css CSS zmienione: 5 linii 
    body {
    background-color: #EEEEEE;
    font-family: Helvetica;
}
#container {
    width: 90%;
    margin: auto;
}
#logo, #menu {
    background-color: LightBlue;
    height: 100px;
    width: 50%;
    padding: 10px 0;
}
#banner {
    background-color: #DDDDDD;
    height: 200px;
}
main {
    color: Navy;
    margin: 50px;
    height: 400px;
}
footer {
    text-align: right;
    background-color: LightBlue;
    padding: 10px;
}
    Podgląd strony po tym kroku (kontakt.html)

  35. Krok 35: Przyciski

    Kryteria:

    R.4.9 Ustawiono styl dla selektorów przycisków: kolor tła LightBlue i czcionki Navy

    ok. 1 min
    Polecenie z arkusza

    Selektora przycisków: kolor tła LightBlue i czcionki Navy.

    Selektor znacznika button - arkusz wymaga stylu zdefiniowanego wyłącznie przez selektor przycisków. Dlatego oba przyciski są znacznikami <button>, a nie <input type="reset">.

    Typowe błędy

    Przy <input type="reset"> selektor button nie zadziała - trzeba by input[type="reset"], a klucz uznaje tylko selektor przycisku.

    styl.css CSS zmienione: 4 linie 
    body {
    background-color: #EEEEEE;
    font-family: Helvetica;
}
#container {
    width: 90%;
    margin: auto;
}
#logo, #menu {
    background-color: LightBlue;
    height: 100px;
    width: 50%;
    padding: 10px 0;
}
#banner {
    background-color: #DDDDDD;
    height: 200px;
}
main {
    color: Navy;
    margin: 50px;
    height: 400px;
}
footer {
    text-align: right;
    background-color: LightBlue;
    padding: 10px;
}
button {
    background-color: LightBlue;
    color: Navy;
}
    Podgląd strony po tym kroku (kontakt.html)

  36. Krok 36: Odnośniki menu

    Kryteria:

    R.4.8 Ustawiono styl dla odnośników z bloku menu: czcionka koloru Navy i rozmiaru 150%, pogrubiona bez podkreślenia, margines zewnętrzny 10px, wewnętrzny 5px; wystarczą ustawione 4 cechy z 6

    ok. 2 min
    Polecenie z arkusza

    Odnośników z bloku menu: czcionka koloru Navy i rozmiaru 150%, pogrubiona bez podkreślenia, margines zewnętrzny 10 px, wewnętrzny 5 px.

    Selektor potomka #menu a - tylko odnośniki w bloku menu (klucz wymaga stylu „jedynie w bloku menu”). Podkreślenie zdejmuje text-decoration: none.

    styl.css CSS zmienione: 8 linii 
    body {
    background-color: #EEEEEE;
    font-family: Helvetica;
}
#container {
    width: 90%;
    margin: auto;
}
#logo, #menu {
    background-color: LightBlue;
    height: 100px;
    width: 50%;
    padding: 10px 0;
}
#banner {
    background-color: #DDDDDD;
    height: 200px;
}
main {
    color: Navy;
    margin: 50px;
    height: 400px;
}
footer {
    text-align: right;
    background-color: LightBlue;
    padding: 10px;
}
button {
    background-color: LightBlue;
    color: Navy;
}
#menu a {
    color: Navy;
    font-size: 150%;
    font-weight: bold;
    text-decoration: none;
    margin: 10px;
    padding: 5px;
}
    Podgląd strony po tym kroku (kontakt.html)

  37. Krok 37: Ramka po wskazaniu odnośnika

    Kryteria:

    R.4.10 Po wskazaniu kursorem myszy odnośnika dodane jest obramowanie linią ciągłą o grubości 1px i kolorze Navy

    ok. 1 min
    Polecenie z arkusza

    Po wskazaniu kursorem myszy na odnośnik menu dodane jest obramowanie linią ciągłą o grubości 1 px i kolorze Navy.

    Pseudoklasa :hover działa, gdy kursor jest nad elementem. Najedź w podglądzie na odnośnik menu - pojawi się ramka.

    styl.css CSS zmienione: 3 linie 
    body {
    background-color: #EEEEEE;
    font-family: Helvetica;
}
#container {
    width: 90%;
    margin: auto;
}
#logo, #menu {
    background-color: LightBlue;
    height: 100px;
    width: 50%;
    padding: 10px 0;
}
#banner {
    background-color: #DDDDDD;
    height: 200px;
}
main {
    color: Navy;
    margin: 50px;
    height: 400px;
}
footer {
    text-align: right;
    background-color: LightBlue;
    padding: 10px;
}
button {
    background-color: LightBlue;
    color: Navy;
}
#menu a {
    color: Navy;
    font-size: 150%;
    font-weight: bold;
    text-decoration: none;
    margin: 10px;
    padding: 5px;
}
#menu a:hover {
    border: 1px solid Navy;
}
    Podgląd strony po tym kroku (kontakt.html)

  38. Krok 38: Układ: logo i menu obok siebie

    Kryteria:

    R.3.1 Na przynajmniej jednej stronie układ bloków po uruchomieniu 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)

    ok. 1 min
    Polecenie z arkusza

    Obok siebie bloki logo i menu, poniżej baner, poniżej blok główny oraz na dole stopka.

    float: left stawia logo i menu w jednym wierszu, a clear: both w banerze sprowadza go pod oba bloki. Reszta bloków stoi pod spodem w zwykłym porządku.

    styl.css CSS zmienione: 6 linii 
    body {
    background-color: #EEEEEE;
    font-family: Helvetica;
}
#container {
    width: 90%;
    margin: auto;
}
#logo, #menu {
    background-color: LightBlue;
    height: 100px;
    width: 50%;
    padding: 10px 0;
}
#banner {
    background-color: #DDDDDD;
    height: 200px;
}
main {
    color: Navy;
    margin: 50px;
    height: 400px;
}
footer {
    text-align: right;
    background-color: LightBlue;
    padding: 10px;
}
button {
    background-color: LightBlue;
    color: Navy;
}
#menu a {
    color: Navy;
    font-size: 150%;
    font-weight: bold;
    text-decoration: none;
    margin: 10px;
    padding: 5px;
}
#menu a:hover {
    border: 1px solid Navy;
}
#logo, #menu {
    float: left;
}
#banner {
    clear: both;
}
    Podgląd strony po tym kroku (kontakt.html)

  39. Etap 4: Skrypt JavaScript

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

    Krok 39: 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 "Prześlij"

    ok. 2 min
    Polecenie z arkusza

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

    Skrypt w <script> na końcu <body> strony kontaktowej. Funkcja ma nazwę z onclick przycisku: send (wyślij). Na razie pusta - kliknięcie już nie zgłasza błędu, ale nic nie robi.

    kontakt.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
            <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="request">Zgłoszenie: </label></td>
                        <td><textarea id="request" rows="10" cols="40"></textarea></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="checkbox" id="rules"><label for="rules">Zapoznałam/em się z regulaminem</label></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button type="reset">Resetuj</button> <button type="button" onclick="send()">Prześlij</button></td>
                    </tr>
                </table>
            </form>
            <hr>
            <p id="message"></p>
        </main>
        <footer>
            Autor strony: <strong>Bartosz Bryniarski</strong>
        </footer>
    </div>
    <script>
        function send() {
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  40. Krok 40: Pobranie wartości z kontrolek

    Kryteria:

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

    ok. 3 min
    Polecenie z arkusza

    Skrypt pobiera wartości wprowadzone do kontrolek.

    • .value pola tekstowego i pola wielowierszowego to wpisany tekst,
    • .checked pola wyboru to true albo false - zaznaczone czy nie,
    • akapit na komunikat zapamiętujesz w zmiennej message, bo użyjesz go w obu gałęziach warunku.

    E-mail nie jest potrzebny w komunikacie, więc go nie pobierasz.

    kontakt.html HTML zmienione: 5 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
            <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="request">Zgłoszenie: </label></td>
                        <td><textarea id="request" rows="10" cols="40"></textarea></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="checkbox" id="rules"><label for="rules">Zapoznałam/em się z regulaminem</label></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button type="reset">Resetuj</button> <button type="button" onclick="send()">Prześlij</button></td>
                    </tr>
                </table>
            </form>
            <hr>
            <p id="message"></p>
        </main>
        <footer>
            Autor strony: <strong>Bartosz Bryniarski</strong>
        </footer>
    </div>
    <script>
        function send() {
            let name = document.getElementById("name").value;
            let surname = document.getElementById("surname").value;
            let request = document.getElementById("request").value;
            let accepted = document.getElementById("rules").checked;
            let message = document.getElementById("message");
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  41. Krok 41: Regulamin niezaznaczony: ostrzeżenie na czerwono

    Kryteria: , ,

    R.5.3 Jeżeli nie zaznaczono pola wyboru, skrypt wyświetla komunikat o treści „Musisz zapoznać się z regulaminem”

    R.5.5 Komunikat jest wyświetlany w bloku głównym, w akapicie

    R.5.6 Jeżeli nie zaznaczono pola wyboru komunikat wyświetlony jest w kolorze czerwonym, w innym przypadku w kolorze Navy

    ok. 2 min
    Polecenie z arkusza

    Jeżeli nie zaznaczono pola wyboru: „Musisz zapoznać się z regulaminem”. Komunikat jest wyświetlony w kolorze czerwonym.

    !accepted - zaprzeczenie: warunek jest prawdziwy, gdy pole nie jest zaznaczone. innerHTML wpisuje tekst do akapitu, a style.color (tabela w arkuszu) zmienia jego kolor. Kliknij w podglądzie „Prześlij” bez zaznaczenia regulaminu.

    kontakt.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
            <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="request">Zgłoszenie: </label></td>
                        <td><textarea id="request" rows="10" cols="40"></textarea></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="checkbox" id="rules"><label for="rules">Zapoznałam/em się z regulaminem</label></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button type="reset">Resetuj</button> <button type="button" onclick="send()">Prześlij</button></td>
                    </tr>
                </table>
            </form>
            <hr>
            <p id="message"></p>
        </main>
        <footer>
            Autor strony: <strong>Bartosz Bryniarski</strong>
        </footer>
    </div>
    <script>
        function send() {
            let name = document.getElementById("name").value;
            let surname = document.getElementById("surname").value;
            let request = document.getElementById("request").value;
            let accepted = document.getElementById("rules").checked;
            let message = document.getElementById("message");
            if (!accepted) {
                message.innerHTML = "Musisz zapoznać się z regulaminem";
                message.style.color = "red";
            }
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  42. Krok 42: Regulamin zaznaczony: dane z formularza

    Kryteria: , , ,

    R.5.4 Jeżeli zaznaczono pole wyboru, skrypt wyświetla dane wprowadzone do kontrolek: w pierwszej linii imię i nazwisko, poniżej tekst „Treść Twojej sprawy:”, następnie treść zgłoszenia

    R.5.6 Jeżeli nie zaznaczono pola wyboru komunikat wyświetlony jest w kolorze czerwonym, w innym przypadku w kolorze Navy

    R.5.7 Dla imienia i nazwiska zastosowano funkcję zmiany na wielkie litery

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

    Jeżeli zaznaczono pole wyboru: „<IMIĘ> <NAZWISKO> Treść Twojej sprawy: <zgłoszenie>”. Komunikat jest wyświetlony w kolorze Navy. Wartości pól <> są pobrane z kontrolek, imię i nazwisko są zawsze zapisane wielkimi literami, po nazwisku występuje łamanie linii.

    • toUpperCase() zamienia tekst na wielkie litery - „Anna” staje się „ANNA” (R.5.7),
    • łamanie linii po nazwisku to znacznik <br> w napisie - dlatego wpisujesz przez innerHTML, który interpretuje znaczniki,
    • komunikat w kolorze Navy.

    Wpisz w podglądzie Anna, Nowak i „Kiedy mogę odebrać naprawiony sprzęt?”, zaznacz regulamin i kliknij „Prześlij” - wynik jak na obrazie 3. Nazwy zmiennych i funkcji są po angielsku i mówią, co przechowują (R.5.8).

    Typowe błędy

    Bez <br> (albo przy textContent) imię, nazwisko i treść sprawy wychodzą w jednym wierszu - klucz wymaga treści w drugiej linii (R.5.4).

    kontakt.html HTML zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
            <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="request">Zgłoszenie: </label></td>
                        <td><textarea id="request" rows="10" cols="40"></textarea></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="checkbox" id="rules"><label for="rules">Zapoznałam/em się z regulaminem</label></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button type="reset">Resetuj</button> <button type="button" onclick="send()">Prześlij</button></td>
                    </tr>
                </table>
            </form>
            <hr>
            <p id="message"></p>
        </main>
        <footer>
            Autor strony: <strong>Bartosz Bryniarski</strong>
        </footer>
    </div>
    <script>
        function send() {
            let name = document.getElementById("name").value;
            let surname = document.getElementById("surname").value;
            let request = document.getElementById("request").value;
            let accepted = document.getElementById("rules").checked;
            let message = document.getElementById("message");
            if (!accepted) {
                message.innerHTML = "Musisz zapoznać się z regulaminem";
                message.style.color = "red";
            } else {
                message.innerHTML = name.toUpperCase() + " " + surname.toUpperCase() + "<br>Treść Twojej sprawy: " + request;
                message.style.color = "Navy";
            }
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (kontakt.html)

  43. Etap 5: Dobre praktyki (poza kluczem)

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

    Krok 43: Treść 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 „Prześlij”.

    Dwie poprawki z prawdziwych projektów:

    • Treść z formularza nie może trafić do innerHTML. Gdy ktoś wpisze w zgłoszeniu <b>pilne</b>, wersja egzaminacyjna pokaże pogrubione „pilne” zamiast tego, co wpisano - przeglądarka wykonała znaczniki. Tą samą drogą da się wstrzyknąć na stronę skrypt (atak XSS). Teraz komunikat składasz z kawałków: replaceChildren wstawia napisy jako zwykły tekst, a łamanie linii jako prawdziwy element <br> utworzony przez createElement. Wpisany znacznik wyświetla się dosłownie,
    • addEventListener("click", send) zamiast atrybutu onclick - przycisk dostaje identyfikator, a zachowanie jest w skrypcie.

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

    kontakt.html HTML zmienione: 6 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png">
</head>
<body>
    <div id="container">
        <section id="logo">
            <img src="logo.png" alt="firma it">
        </section>
        <nav id="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section id="banner">
            <img src="animacja.gif" alt="Usługi informatyczne">
        </section>
        <main>
            <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="request">Zgłoszenie: </label></td>
                        <td><textarea id="request" rows="10" cols="40"></textarea></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="checkbox" id="rules"><label for="rules">Zapoznałam/em się z regulaminem</label></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button type="reset">Resetuj</button> <button type="button" id="send">Prześlij</button></td>
                    </tr>
                </table>
            </form>
            <hr>
            <p id="message"></p>
        </main>
        <footer>
            Autor strony: <strong>Bartosz Bryniarski</strong>
        </footer>
    </div>
    <script>
        function send() {
            let name = document.getElementById("name").value;
            let surname = document.getElementById("surname").value;
            let request = document.getElementById("request").value;
            let accepted = document.getElementById("rules").checked;
            let message = document.getElementById("message");
            if (!accepted) {
                message.textContent = "Musisz zapoznać się z regulaminem";
                message.style.color = "red";
            } else {
                // message.innerHTML = name.toUpperCase() + " " + surname.toUpperCase() + "<br>Treść Twojej sprawy: " + request;
                message.replaceChildren(name.toUpperCase() + " " + surname.toUpperCase(), document.createElement("br"), "Treść Twojej sprawy: " + request);
                message.style.color = "Navy";
            }
        }

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

  44. Etap 6: Oddanie pracy

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

    Krok 44: 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, index.html, klatki.jpg, kontakt.html, logo.png, przeglądarka.txt, styl.css, uslugi.html. 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 43.

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.