INF.03-01-24.01-SGStyczeń 2024 · 48 kroków · ok. 93 min · 42 kryteria z klucza

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

To drugi sposób rozwiązania tego samego arkusza: logo „IT”, dwa banery z myszkami i animacja GIF, trzy strony o wspólnym układzie (index.html, uslugi.html, kontakt.html), style w styl.css i skrypt na stronie kontaktowej. Obie wersje spełniają wszystkie 42 kryteria klucza - różni je sposób pisania kodu, nie wynik.

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

układ na siatce CSS (display: grid z nazwanymi obszarami) zamiast float i clear - cały podział strony widać w jednej regule kontenera,
kolory z arkusza w zmiennych CSS (--color-accent, --color-text...), style przypięte do klas, a nie do identyfikatorów,
ramka odnośnika menu nie przesuwa napisów przy najechaniu i pojawia się też przy przechodzeniu klawiszem Tab (:focus-visible),
przycisk „Prześlij” jest zwykłym przyciskiem wysyłającym formularz (type="submit"), a skrypt przejmuje zdarzenie submit - działa też Enter w polu tekstowym,
skrypt w osobnym pliku kontakt.js dołączonym z defer, podpięty przez addEventListener; komunikat składany z węzłów tekstowych (replaceChildren), więc znaczniki wpisane w formularzu nie wykonują się jako HTML, a kolor komunikatu pochodzi z klas w styl.css.

Grafika jest taka sama jak w wersji podstawowej - wykonana z prawdziwego archiwum materialy1 według obrazów 1, 2a i 2b. Kroki nadal idą zdanie po zdaniu za treścią arkusza. Skrypt jest sprawdzony w prawdziwej przeglądarce Chrome na danych z obrazu 3 (Anna Nowak), bez zaznaczonego regulaminu, ze znacznikiem w treści zgłoszenia i po kliknięciu „Resetuj”. 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. 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)

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:
Plik → Nowy: 100 × 100 px, w opcjach zaawansowanych Wypełnienie: Przezroczystość,
narzędzie Tekst, kolor niebieski (0000ff), duży rozmiar, napis „IT”,
warstwę tekstu rozciągnij narzędziem Skalowanie (z rozpiętym łańcuchem proporcji), aż litery dotkną wszystkich czterech krawędzi - tak wygląda obraz 1,
Eksportuj jako logo.png - PNG zapisuje przezroczystość.
Ten sam plik posłuży jako ikona strony na karcie przeglądarki.
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
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. 5 min
Polecenie z arkusza
Wspólne wytyczne dla dwóch banerów: Cechy obrazu: tło przezroczyste, wysokość 200 px, szerokość 1000 px. Plik 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.
Plik → Nowy: 1000 × 200 px, wypełnienie przezroczyste,
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 dosuń warstwę do lewej i górnej krawędzi (obie myszy w całości, R.1.4),
narzędzie Tekst z prawej strony zdjęcia: krój szeryfowy pochylony, np. Georgia Italic, kolor niebieski,
Eksportuj jako baner1.png, a plik .xcf zapisz osobno - posłuży do banera 2.
Podgląd strony po tym kroku
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.
W pliku banera 1 zmień tylko tekst: trzy wiersze (Enter po przecinkach) - klucz wymaga napisu w trzech liniach. Mniejszy rozmiar czcionki, żeby trzy wiersze zmieściły się w 200 px. Eksportuj jako baner2.png.
Podgląd strony po tym kroku
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:
otwórz baner1.png i Plik → Otwórz jako warstwy baner2.png,
Plik → Eksportuj jako animacja.gif, w oknie eksportu zaznacz Jako animację i Pętla nieskończona, opóźnienie 3000 ms, rozmieszczenie klatek Jedna klatka na warstwę (zastąpienie) - przy przezroczystym tle inaczej napis z poprzedniej klatki prześwitywałby pod następną,
zanim klikniesz Eksportuj, zrób zrzut całego ekranu z tym oknem i wpisanym 3000 - klatki.jpg, bez kadrowania, z paskiem zadań (R.1.9).
GIF to jedyny format animacji, którego wymaga arkusz; animowane WebP i APNG byłyby lżejsze, ale klucz ocenia plik animacja.gif.
Typowe błędy
Zrzut okna bez paska zadań albo wykadrowany nie spełnia R.1.9. Rozmieszczenie „połącz” zostawia napis banera 1 widoczny pod napisem banera 2.
Podgląd strony po tym kroku
Etap 2: Strony HTML
Kroki 5-28 · po tym etapie masz 22 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.
Najpierw powstaje w całości index.html - podstrony będą jej kopiami. <!DOCTYPE html> włącza w przeglądarce tryb standardów HTML5.
index.html HTML nowy plik
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Podgląd strony po tym kroku (index.html)
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 <html> - z niego korzystają czytniki ekranu (polska wymowa) i słowniki sprawdzania pisowni.
index.html HTML zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> </head> <body> </body> </html>
Podgląd strony po tym kroku (index.html)
Krok 7: Kodowanie polskich znaków i widok na telefonie
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> (R.2.1),
<meta name="viewport"> - bez tej linii telefon udaje ekran szerokości ok. 980 px i pomniejsza stronę. Arkusz tego nie wymaga, ale to standardowa druga linia każdego nowego dokumentu.
index.html HTML zmienione: 2 linie
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> </body> </html>
Podgląd strony po tym kroku (index.html)
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"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Firma IT</title> </head> <body> </body> </html>
Podgląd strony po tym kroku (index.html)
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.
Nazwa pliku z arkusza: styl.css. Wszystkie trzy strony podepną ten sam plik, więc wygląd całej witryny zmienia się w jednym miejscu.
Typowe błędy
Inna nazwa pliku (style.css) odcina wszystkie style - R.3.5, a rezultat R.4 jest wtedy oceniany tylko z kodu.
index.html HTML zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Firma IT</title> <link rel="stylesheet" href="styl.css"> </head> <body> </body> </html>
Podgląd strony po tym kroku (index.html)
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.
<link rel="icon"> z plikiem logo.png; atrybut type podpowiada przeglądarce format, zanim pobierze plik. Format .ico nie jest potrzebny.
index.html HTML zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Firma IT</title> <link rel="stylesheet" href="styl.css"> <link rel="icon" href="logo.png" type="image/png"> </head> <body> </body> </html>
Podgląd strony po tym kroku (index.html)
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 class="page"> - zwykły div, bo nie niesie znaczenia, tylko zbiera bloki, żeby ustawić je siatką. W środku pięć bloków, każdy w znaczniku, który mówi, czym jest:
<header class="logo"> - nagłówek witryny z logo,
<nav class="menu"> - nawigacja,
<section class="banner">, <main> (treść główna, jedna na stronę) i <footer> (R.2.4).
Bloki dostają klasy, a nie identyfikatory: identyfikator musi być jedyny na stronie, a klasa opisuje rolę i można jej użyć wiele razy. Ułożenie logo i menu obok siebie zrobisz w CSS.
index.html HTML zmienione: 12 linii
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Firma IT</title> <link rel="stylesheet" href="styl.css"> <link rel="icon" href="logo.png" type="image/png"> </head> <body> <div class="page"> <header class="logo"> </header> <nav class="menu"> </nav> <section class="banner"> </section> <main> </main> <footer> </footer> </div> </body> </html>
Podgląd strony po tym kroku (index.html)

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 (R.2.5). Atrybuty width i height z prawdziwym rozmiarem pliku pozwalają przeglądarce zarezerwować miejsce, zanim obraz się wczyta - strona nie „skacze” przy ładowaniu.

index.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="logo">
            <img src="logo.png" alt="firma it" width="100" height="100">
        </header>
        <nav class="menu">
        </nav>
        <section class="banner">
        </section>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>

Podgląd strony po tym kroku (index.html)

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 (R.3.2). Znacznik <nav> mówi czytnikom ekranu, że to nawigacja witryny - można do niej przeskoczyć jednym skrótem. W podglądzie przejścia między stronami są zablokowane.

index.html HTML zmienione: 3 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="logo">
            <img src="logo.png" alt="firma it" width="100" height="100">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="banner">
        </section>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>

Podgląd strony po tym kroku (index.html)

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 wstawia zwykły <img> - przeglądarka sama odtwarza klatki. width i height znów z wymiarów pliku: 1000 × 200.

index.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="logo">
            <img src="logo.png" alt="firma it" width="100" height="100">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="banner">
            <img src="animacja.gif" alt="Usługi informatyczne" width="1000" height="200">
        </section>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>

Podgląd strony po tym kroku (index.html)

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> (R.2.7). Tekst stopki stoi w akapicie <p> - goły tekst w bloku też by zadziałał, ale akapit to jednostka treści, którą łatwo potem ostylować. Na egzaminie w miejscu nazwiska wpisujesz swój numer zdającego (PESEL); tu stoi 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">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="logo">
            <img src="logo.png" alt="firma it" width="100" height="100">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="banner">
            <img src="animacja.gif" alt="Usługi informatyczne" width="1000" height="200">
        </section>
        <main>
        </main>
        <footer>
            <p>Autor strony: <strong>Bartosz Bryniarski</strong></p>
        </footer>
    </div>
</body>
</html>

Podgląd strony po tym kroku (index.html)

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

Nagłówek drugiego stopnia to <h2>.

index.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="logo">
            <img src="logo.png" alt="firma it" width="100" height="100">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="banner">
            <img src="animacja.gif" alt="Usługi informatyczne" width="1000" height="200">
        </section>
        <main>
            <h2>Firma IT</h2>
        </main>
        <footer>
            <p>Autor strony: <strong>Bartosz Bryniarski</strong></p>
        </footer>
    </div>
</body>
</html>

Podgląd strony po tym kroku (index.html)

Krok 17: Strona główna: paragraf

Kryteria:

ok. 1 min

Polecenie z arkusza

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

Akapit <p>.

index.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="logo">
            <img src="logo.png" alt="firma it" width="100" height="100">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="banner">
            <img src="animacja.gif" alt="Usługi informatyczne" width="1000" height="200">
        </section>
        <main>
            <h2>Firma IT</h2>
            <p>Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT.</p>
        </main>
        <footer>
            <p>Autor strony: <strong>Bartosz Bryniarski</strong></p>
        </footer>
    </div>
</body>
</html>

Podgląd strony po tym kroku (index.html)

Krok 18: Strona główna: linia pozioma

Kryteria:

ok. 1 min

Polecenie z arkusza

Linia pozioma.

<hr> - znacznik pusty, w HTML5 bez ukośnika na końcu.

index.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="logo">
            <img src="logo.png" alt="firma it" width="100" height="100">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="banner">
            <img src="animacja.gif" alt="Usługi informatyczne" width="1000" height="200">
        </section>
        <main>
            <h2>Firma IT</h2>
            <p>Jesteśmy firmą z wieloletnim doświadczeniem w zakresie IT.</p>
            <hr>
        </main>
        <footer>
            <p>Autor strony: <strong>Bartosz Bryniarski</strong></p>
        </footer>
    </div>
</body>
</html>

Podgląd strony po tym kroku (index.html)

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 i wymień tylko zawartość <main>: nagłówek „Oferta” i linia pozioma. Wszystko poza <main> zostaje bez zmian.

uslugi.html HTML nowy plik

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="logo">
            <img src="logo.png" alt="firma it" width="100" height="100">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="banner">
            <img src="animacja.gif" alt="Usługi informatyczne" width="1000" height="200">
        </section>
        <main>
            <h2>Oferta</h2>
            <hr>
        </main>
        <footer>
            <p>Autor strony: <strong>Bartosz Bryniarski</strong></p>
        </footer>
    </div>
</body>
</html>

Podgląd strony po tym kroku (uslugi.html)

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 <ol> z elementami <li> - numery dopisuje przeglądarka (R.2.8).

uslugi.html HTML zmienione: 6 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="logo">
            <img src="logo.png" alt="firma it" width="100" height="100">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="banner">
            <img src="animacja.gif" alt="Usługi informatyczne" width="1000" height="200">
        </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>
            <p>Autor strony: <strong>Bartosz Bryniarski</strong></p>
        </footer>
    </div>
</body>
</html>

Podgląd strony po tym kroku (uslugi.html)

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.

Kolejna kopia strony głównej - kontakt.html. Tabelę z kontrolkami obejmuje <form>: przycisk „Resetuj” czyści pola swojego formularza, a skrypt przechwyci zdarzenie wysłania formularza. Formularz nie ma atrybutu action - dane nigdzie nie wychodzą, zajmie się nimi skrypt.

Atrybut novalidate wyłącza dymki, którymi przeglądarka zatrzymuje wysyłanie formularza z błędnie wpisanym adresem e-mail. Tu o tym, co pokazać, decyduje skrypt: arkusz każe po kliknięciu „Prześlij” zawsze wyświetlić komunikat, a literówka w adresie (którego nie ma nawet w komunikacie) nie może tego zablokować.

kontakt.html HTML nowy plik

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="logo">
            <img src="logo.png" alt="firma it" width="100" height="100">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="banner">
            <img src="animacja.gif" alt="Usługi informatyczne" width="1000" height="200">
        </section>
        <main>
            <h2>Kontakt</h2>
            <form class="contact-form" novalidate>
                <table>
                </table>
            </form>
            <hr>
        </main>
        <footer>
            <p>Autor strony: <strong>Bartosz Bryniarski</strong></p>
        </footer>
    </div>
</body>
</html>

Podgląd strony po tym kroku (kontakt.html)

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> wiąże napis z polem - kliknięcie napisu ustawia kursor w polu, a czytnik ekranu odczyta nazwę pola. name="firstName" to nazwa, po której skrypt sięgnie po pole przez form.elements. autocomplete="given-name" pozwala przeglądarce podpowiedzieć zapisane imię.

kontakt.html HTML zmienione: 4 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="logo">
            <img src="logo.png" alt="firma it" width="100" height="100">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="banner">
            <img src="animacja.gif" alt="Usługi informatyczne" width="1000" height="200">
        </section>
        <main>
            <h2>Kontakt</h2>
            <form class="contact-form" novalidate>
                <table>
                    <tr>
                        <td><label for="first-name">Imię: </label></td>
                        <td><input type="text" id="first-name" name="firstName" autocomplete="given-name"></td>
                    </tr>
                </table>
            </form>
            <hr>
        </main>
        <footer>
            <p>Autor strony: <strong>Bartosz Bryniarski</strong></p>
        </footer>
    </div>
</body>
</html>

Podgląd strony po tym kroku (kontakt.html)

Krok 23: Tabela, wiersz 2: Nazwisko i pole edycyjne

ok. 2 min

Polecenie z arkusza

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

Tak samo: name="lastName", podpowiedź family-name.

kontakt.html HTML zmienione: 4 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="logo">
            <img src="logo.png" alt="firma it" width="100" height="100">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="banner">
            <img src="animacja.gif" alt="Usługi informatyczne" width="1000" height="200">
        </section>
        <main>
            <h2>Kontakt</h2>
            <form class="contact-form" novalidate>
                <table>
                    <tr>
                        <td><label for="first-name">Imię: </label></td>
                        <td><input type="text" id="first-name" name="firstName" autocomplete="given-name"></td>
                    </tr>
                    <tr>
                        <td><label for="last-name">Nazwisko: </label></td>
                        <td><input type="text" id="last-name" name="lastName" autocomplete="family-name"></td>
                    </tr>
                </table>
            </form>
            <hr>
        </main>
        <footer>
            <p>Autor strony: <strong>Bartosz Bryniarski</strong></p>
        </footer>
    </div>
</body>
</html>

Podgląd strony po tym kroku (kontakt.html)

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" - telefon pokaże klawiaturę ze znakiem @, a przeglądarka zna format adresu (R.3.3).

kontakt.html HTML zmienione: 4 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="logo">
            <img src="logo.png" alt="firma it" width="100" height="100">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="banner">
            <img src="animacja.gif" alt="Usługi informatyczne" width="1000" height="200">
        </section>
        <main>
            <h2>Kontakt</h2>
            <form class="contact-form" novalidate>
                <table>
                    <tr>
                        <td><label for="first-name">Imię: </label></td>
                        <td><input type="text" id="first-name" name="firstName" autocomplete="given-name"></td>
                    </tr>
                    <tr>
                        <td><label for="last-name">Nazwisko: </label></td>
                        <td><input type="text" id="last-name" name="lastName" autocomplete="family-name"></td>
                    </tr>
                    <tr>
                        <td><label for="email">E-mail: </label></td>
                        <td><input type="email" id="email" name="email" autocomplete="email"></td>
                    </tr>
                </table>
            </form>
            <hr>
        </main>
        <footer>
            <p>Autor strony: <strong>Bartosz Bryniarski</strong></p>
        </footer>
    </div>
</body>
</html>

Podgląd strony po tym kroku (kontakt.html)

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> - z zamknięciem. Rozmiar: rows="10" wierszy, cols="40" znaków szerokości (R.3.3).

kontakt.html HTML zmienione: 4 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="logo">
            <img src="logo.png" alt="firma it" width="100" height="100">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="banner">
            <img src="animacja.gif" alt="Usługi informatyczne" width="1000" height="200">
        </section>
        <main>
            <h2>Kontakt</h2>
            <form class="contact-form" novalidate>
                <table>
                    <tr>
                        <td><label for="first-name">Imię: </label></td>
                        <td><input type="text" id="first-name" name="firstName" autocomplete="given-name"></td>
                    </tr>
                    <tr>
                        <td><label for="last-name">Nazwisko: </label></td>
                        <td><input type="text" id="last-name" name="lastName" autocomplete="family-name"></td>
                    </tr>
                    <tr>
                        <td><label for="email">E-mail: </label></td>
                        <td><input type="email" id="email" name="email" autocomplete="email"></td>
                    </tr>
                    <tr>
                        <td><label for="request">Zgłoszenie: </label></td>
                        <td><textarea id="request" name="request" rows="10" cols="40"></textarea></td>
                    </tr>
                </table>
            </form>
            <hr>
        </main>
        <footer>
            <p>Autor strony: <strong>Bartosz Bryniarski</strong></p>
        </footer>
    </div>
</body>
</html>

Podgląd strony po tym kroku (kontakt.html)

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ą - kliknięcie napisu też zaznacza pole. Skrypt sprawdzi jego właściwość checked.

Pole nie ma atrybutu required: przeglądarka zablokowałaby wtedy wysłanie formularza własnym dymkiem i skrypt nigdy nie wyświetliłby komunikatu „Musisz zapoznać się z regulaminem”, którego wymaga arkusz.

kontakt.html HTML zmienione: 4 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="logo">
            <img src="logo.png" alt="firma it" width="100" height="100">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="banner">
            <img src="animacja.gif" alt="Usługi informatyczne" width="1000" height="200">
        </section>
        <main>
            <h2>Kontakt</h2>
            <form class="contact-form" novalidate>
                <table>
                    <tr>
                        <td><label for="first-name">Imię: </label></td>
                        <td><input type="text" id="first-name" name="firstName" autocomplete="given-name"></td>
                    </tr>
                    <tr>
                        <td><label for="last-name">Nazwisko: </label></td>
                        <td><input type="text" id="last-name" name="lastName" autocomplete="family-name"></td>
                    </tr>
                    <tr>
                        <td><label for="email">E-mail: </label></td>
                        <td><input type="email" id="email" name="email" autocomplete="email"></td>
                    </tr>
                    <tr>
                        <td><label for="request">Zgłoszenie: </label></td>
                        <td><textarea id="request" name="request" rows="10" cols="40"></textarea></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="checkbox" id="rules" name="rules"> <label for="rules">Zapoznałam/em się z regulaminem</label></td>
                    </tr>
                </table>
            </form>
            <hr>
        </main>
        <footer>
            <p>Autor strony: <strong>Bartosz Bryniarski</strong></p>
        </footer>
    </div>
</body>
</html>

Podgląd strony po tym kroku (kontakt.html)

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

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" czyści wszystkie kontrolki formularza bez ani linijki skryptu,
type="submit" - zwykły przycisk wysyłający formularz. Skrypt przechwyci zdarzenie wysłania formularza i zatrzyma przeładowanie strony. Dzięki temu „Prześlij” działa także klawiszem Enter w polu tekstowym.

Na razie skryptu nie ma - kliknięcie „Prześlij” przeładowuje stronę i czyści pola. To zmieni się w części o skrypcie.

kontakt.html HTML zmienione: 4 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="logo">
            <img src="logo.png" alt="firma it" width="100" height="100">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="banner">
            <img src="animacja.gif" alt="Usługi informatyczne" width="1000" height="200">
        </section>
        <main>
            <h2>Kontakt</h2>
            <form class="contact-form" novalidate>
                <table>
                    <tr>
                        <td><label for="first-name">Imię: </label></td>
                        <td><input type="text" id="first-name" name="firstName" autocomplete="given-name"></td>
                    </tr>
                    <tr>
                        <td><label for="last-name">Nazwisko: </label></td>
                        <td><input type="text" id="last-name" name="lastName" autocomplete="family-name"></td>
                    </tr>
                    <tr>
                        <td><label for="email">E-mail: </label></td>
                        <td><input type="email" id="email" name="email" autocomplete="email"></td>
                    </tr>
                    <tr>
                        <td><label for="request">Zgłoszenie: </label></td>
                        <td><textarea id="request" name="request" rows="10" cols="40"></textarea></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="checkbox" id="rules" name="rules"> <label for="rules">Zapoznałam/em się z regulaminem</label></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button type="reset">Resetuj</button> <button type="submit">Prześlij</button></td>
                    </tr>
                </table>
            </form>
            <hr>
        </main>
        <footer>
            <p>Autor strony: <strong>Bartosz Bryniarski</strong></p>
        </footer>
    </div>
</body>
</html>

Podgląd strony po tym kroku (kontakt.html)

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 akapit pod <hr> - skrypt wpisze do niego komunikat. aria-live="polite" sprawia, że czytnik ekranu odczyta komunikat sam, gdy się pojawi; bez tego osoba niewidoma nie dowie się, że coś się zmieniło.

kontakt.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png" type="image/png">
</head>
<body>
    <div class="page">
        <header class="logo">
            <img src="logo.png" alt="firma it" width="100" height="100">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="banner">
            <img src="animacja.gif" alt="Usługi informatyczne" width="1000" height="200">
        </section>
        <main>
            <h2>Kontakt</h2>
            <form class="contact-form" novalidate>
                <table>
                    <tr>
                        <td><label for="first-name">Imię: </label></td>
                        <td><input type="text" id="first-name" name="firstName" autocomplete="given-name"></td>
                    </tr>
                    <tr>
                        <td><label for="last-name">Nazwisko: </label></td>
                        <td><input type="text" id="last-name" name="lastName" autocomplete="family-name"></td>
                    </tr>
                    <tr>
                        <td><label for="email">E-mail: </label></td>
                        <td><input type="email" id="email" name="email" autocomplete="email"></td>
                    </tr>
                    <tr>
                        <td><label for="request">Zgłoszenie: </label></td>
                        <td><textarea id="request" name="request" rows="10" cols="40"></textarea></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="checkbox" id="rules" name="rules"> <label for="rules">Zapoznałam/em się z regulaminem</label></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button type="reset">Resetuj</button> <button type="submit">Prześlij</button></td>
                    </tr>
                </table>
            </form>
            <hr>
            <p class="message" aria-live="polite"></p>
        </main>
        <footer>
            <p>Autor strony: <strong>Bartosz Bryniarski</strong></p>
        </footer>
    </div>
</body>
</html>

Podgląd strony po tym kroku (kontakt.html)

Etap 3: Styl CSS
Kroki 29-40 · po tym etapie masz 33 z 42 kryteriów (pkt)
Krok 29: Plik styl.css: kolory z arkusza w zmiennych
ok. 2 min
Polecenie z arkusza
Styl CSS zdefiniowany w zewnętrznym pliku o nazwie styl.css.
Arkusz używa czterech kolorów, w tym dwóch wielokrotnie (LightBlue w logo, menu, stopce i przyciskach, Navy w tekście, odnośnikach i ramce). Zapisz je raz jako zmienne CSS (custom properties) w :root, czyli dla całego dokumentu; reguły będą się do nich odwoływać przez var(--nazwa). Zmiana koloru firmowego to wtedy jedna linia.
Sama definicja zmiennych niczego nie zmienia na stronie.
styl.css CSS nowy plik
:root { --color-page: #EEEEEE; --color-accent: LightBlue; --color-banner: #DDDDDD; --color-text: Navy; }
Podgląd strony po tym kroku (kontakt.html)
Krok 30: 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
Arkusz CSS zawiera formatowanie: Całej strony: kolor tła #EEEEEE, krój czcionki Helvetica.
Selektor body. Po kroju Helvetica stoją zapasowe: Arial, a na końcu rodzina ogólna sans-serif. Helvetica jest na komputerach Apple, a w Windows zwykle jej nie ma - bez zapasowych przeglądarka sięgnęłaby po domyślny krój szeryfowy (R.4.1).
styl.css CSS zmienione: 5 linii
:root { --color-page: #EEEEEE; --color-accent: LightBlue; --color-banner: #DDDDDD; --color-text: Navy; } body { background-color: var(--color-page); font-family: Helvetica, Arial, sans-serif; }
Podgląd strony po tym kroku (kontakt.html)
Krok 31: 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 (R.4.4, R.4.7).
styl.css CSS zmienione: 5 linii
:root { --color-page: #EEEEEE; --color-accent: LightBlue; --color-banner: #DDDDDD; --color-text: Navy; } body { background-color: var(--color-page); font-family: Helvetica, Arial, sans-serif; } .page { width: 90%; margin: auto; }
Podgląd strony po tym kroku (kontakt.html)
Krok 32: Układ: siatka z nazwanymi obszarami
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)
R.4.4 Ustawiono szerokość kontenera strony na 90%, bloków logo i menu na 50% (width lub grid-template-columns lub flex)
ok. 3 min
Polecenie z arkusza
Obok siebie bloki logo i menu, poniżej baner, poniżej blok główny oraz na dole stopka.
Kontener staje się siatką (display: grid) o dwóch kolumnach po 50% - to szerokość bloków logo i menu z arkusza, zapisana w siatce zamiast w każdym bloku (klucz przyjmuje grid-template-columns, R.4.4).
grid-template-areas rysuje układ obrazu 3 w kodzie: w pierwszym wierszu logo i menu, w kolejnych banner, main i footer przez obie kolumny. Każdy blok trafia na swoje miejsce przez grid-area. W wersji podstawowej ten sam układ dają float: left i clear: both - tu nie trzeba pamiętać o czyszczeniu opływania, a zmiana kolejności bloków to zmiana jednego napisu (R.3.1).
Typowe błędy
Szerokości bloków w siatce wpisuj tylko w grid-template-columns. Dodatkowe width: 50% na .logo liczyłoby się od kolumny siatki, nie od strony - blok miałby ćwierć szerokości kontenera.
styl.css CSS zmienione: 13 linii
:root { --color-page: #EEEEEE; --color-accent: LightBlue; --color-banner: #DDDDDD; --color-text: Navy; } body { background-color: var(--color-page); font-family: Helvetica, Arial, sans-serif; } .page { width: 90%; margin: auto; display: grid; grid-template-columns: 50% 50%; grid-template-areas: "logo menu" "banner banner" "main main" "footer footer"; } .logo { grid-area: logo; } .menu { grid-area: menu; } .banner { grid-area: banner; } main { grid-area: main; } footer { grid-area: footer; }
Podgląd strony po tym kroku (kontakt.html)
Krok 33: 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.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.
tło ze zmiennej --color-accent (LightBlue, R.4.2), wysokość 100px (R.4.5),
padding-block: 10px - margines wewnętrzny górny i dolny jedną właściwością („blok” to kierunek z góry na dół). To samo co padding: 10px 0, ale bez zera, które trzeba odczytać (R.4.7),
szerokość 50% daje siatka z poprzedniego kroku.
styl.css CSS zmienione: 7 linii
:root { --color-page: #EEEEEE; --color-accent: LightBlue; --color-banner: #DDDDDD; --color-text: Navy; } body { background-color: var(--color-page); font-family: Helvetica, Arial, sans-serif; } .page { width: 90%; margin: auto; display: grid; grid-template-columns: 50% 50%; grid-template-areas: "logo menu" "banner banner" "main main" "footer footer"; } .logo { grid-area: logo; } .menu { grid-area: menu; } .banner { grid-area: banner; } main { grid-area: main; } footer { grid-area: footer; } .logo, .menu { background-color: var(--color-accent); height: 100px; padding-block: 10px; }
Podgląd strony po tym kroku (kontakt.html)

Krok 34: 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. 2 min

Polecenie z arkusza

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

Tło #DDDDDD i wysokość 200px (R.4.2, R.4.5). Animacja ma przezroczyste tło, więc szary kolor prześwituje obok napisów.

Dla obrazu w banerze dwie linie spoza arkusza: display: block usuwa kilkupikselową szparę pod obrazkiem (obraz w linii tekstu stoi na linii pisma), a max-width: 100% z height: auto zmniejsza baner w wąskim oknie zamiast wypychać go poza stronę.

styl.css CSS zmienione: 11 linii

:root {
    --color-page: #EEEEEE;
    --color-accent: LightBlue;
    --color-banner: #DDDDDD;
    --color-text: Navy;
}

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

.page {
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas:
        "logo   menu"
        "banner banner"
        "main   main"
        "footer footer";
}

.logo   { grid-area: logo; }
.menu   { grid-area: menu; }
.banner { grid-area: banner; }
main    { grid-area: main; }
footer  { grid-area: footer; }

.logo,
.menu {
    background-color: var(--color-accent);
    height: 100px;
    padding-block: 10px;
}

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

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

Podgląd strony po tym kroku (kontakt.html)

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

Kolor tekstu ze zmiennej --color-text (R.4.3), margin: 50px (R.4.7), height: 400px (R.4.5). Margines elementu siatki działa wewnątrz jego obszaru: blok główny jest o 2 × 50 px węższy od kontenera, tak jak w wersji podstawowej.

styl.css CSS zmienione: 6 linii

:root {
    --color-page: #EEEEEE;
    --color-accent: LightBlue;
    --color-banner: #DDDDDD;
    --color-text: Navy;
}

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

.page {
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas:
        "logo   menu"
        "banner banner"
        "main   main"
        "footer footer";
}

.logo   { grid-area: logo; }
.menu   { grid-area: menu; }
.banner { grid-area: banner; }
main    { grid-area: main; }
footer  { grid-area: footer; }

.logo,
.menu {
    background-color: var(--color-accent);
    height: 100px;
    padding-block: 10px;
}

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

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

main {
    color: var(--color-text);
    margin: 50px;
    height: 400px;
}

Podgląd strony po tym kroku (kontakt.html)

Krok 36: 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

ok. 1 min

Polecenie z arkusza

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

Selektor footer (R.4.2, R.4.6, R.4.7). Akapit w stopce dostaje margin: 0 - domyślne marginesy akapitu powiększyłyby stopkę ponad 10 px dopełnienia z arkusza.

styl.css CSS zmienione: 10 linii

:root {
    --color-page: #EEEEEE;
    --color-accent: LightBlue;
    --color-banner: #DDDDDD;
    --color-text: Navy;
}

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

.page {
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas:
        "logo   menu"
        "banner banner"
        "main   main"
        "footer footer";
}

.logo   { grid-area: logo; }
.menu   { grid-area: menu; }
.banner { grid-area: banner; }
main    { grid-area: main; }
footer  { grid-area: footer; }

.logo,
.menu {
    background-color: var(--color-accent);
    height: 100px;
    padding-block: 10px;
}

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

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

main {
    color: var(--color-text);
    margin: 50px;
    height: 400px;
}

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

footer p {
    margin: 0;
}

Podgląd strony po tym kroku (kontakt.html)

Krok 37: 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 zastrzega, że styl przycisków ma być zdefiniowany wyłącznie przez selektor przycisków (klucz nie przyjmie klasy, R.4.9). Dlatego oba przyciski są znacznikami <button>, a nie <input>.

Typowe błędy

Klasa (.btn) albo <input type="reset"> ze stylem input[type=reset] nie spełniają R.4.9 - klucz uznaje tylko selektor elementu przycisku.

styl.css CSS zmienione: 5 linii

:root {
    --color-page: #EEEEEE;
    --color-accent: LightBlue;
    --color-banner: #DDDDDD;
    --color-text: Navy;
}

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

.page {
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas:
        "logo   menu"
        "banner banner"
        "main   main"
        "footer footer";
}

.logo   { grid-area: logo; }
.menu   { grid-area: menu; }
.banner { grid-area: banner; }
main    { grid-area: main; }
footer  { grid-area: footer; }

.logo,
.menu {
    background-color: var(--color-accent);
    height: 100px;
    padding-block: 10px;
}

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

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

main {
    color: var(--color-text);
    margin: 50px;
    height: 400px;
}

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

footer p {
    margin: 0;
}

button {
    background-color: var(--color-accent);
    color: var(--color-text);
}

Podgląd strony po tym kroku (kontakt.html)

Krok 38: 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 menu, bo klucz wymaga stylu „jedynie w bloku menu” (R.4.8): kolor ze zmiennej, font-size: 150%, font-weight: bold, text-decoration: none, margin: 10px, padding: 5px.

Ostatnia linia to przygotowanie pod następny krok: przezroczysta ramka o grubości 1 px. Zajmuje miejsce od początku, więc gdy po najechaniu zmieni kolor, napisy nie przesuną się o piksel.

styl.css CSS zmienione: 10 linii

:root {
    --color-page: #EEEEEE;
    --color-accent: LightBlue;
    --color-banner: #DDDDDD;
    --color-text: Navy;
}

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

.page {
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas:
        "logo   menu"
        "banner banner"
        "main   main"
        "footer footer";
}

.logo   { grid-area: logo; }
.menu   { grid-area: menu; }
.banner { grid-area: banner; }
main    { grid-area: main; }
footer  { grid-area: footer; }

.logo,
.menu {
    background-color: var(--color-accent);
    height: 100px;
    padding-block: 10px;
}

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

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

main {
    color: var(--color-text);
    margin: 50px;
    height: 400px;
}

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

footer p {
    margin: 0;
}

button {
    background-color: var(--color-accent);
    color: var(--color-text);
}

.menu a {
    color: var(--color-text);
    font-size: 150%;
    font-weight: bold;
    text-decoration: none;
    margin: 10px;
    padding: 5px;
    border: 1px solid transparent;
}

Podgląd strony po tym kroku (kontakt.html)

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

Pod kursorem (:hover) ramka 1 px linią ciągłą dostaje kolor Navy - wygląda jak dodana, a odnośniki stoją w miejscu (R.4.10).

:focus-visible daje tę samą ramkę, gdy do odnośnika przechodzi się klawiszem Tab - osoba bez myszy też widzi, gdzie jest. Najedź w podglądzie na odnośnik menu.

Typowe błędy

Sama border: 1px solid Navy pod :hover też daje punkt, ale napisy menu drgną przy każdym najechaniu - ramka dokłada piksel z każdej strony.

styl.css CSS zmienione: 5 linii

:root {
    --color-page: #EEEEEE;
    --color-accent: LightBlue;
    --color-banner: #DDDDDD;
    --color-text: Navy;
}

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

.page {
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas:
        "logo   menu"
        "banner banner"
        "main   main"
        "footer footer";
}

.logo   { grid-area: logo; }
.menu   { grid-area: menu; }
.banner { grid-area: banner; }
main    { grid-area: main; }
footer  { grid-area: footer; }

.logo,
.menu {
    background-color: var(--color-accent);
    height: 100px;
    padding-block: 10px;
}

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

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

main {
    color: var(--color-text);
    margin: 50px;
    height: 400px;
}

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

footer p {
    margin: 0;
}

button {
    background-color: var(--color-accent);
    color: var(--color-text);
}

.menu a {
    color: var(--color-text);
    font-size: 150%;
    font-weight: bold;
    text-decoration: none;
    margin: 10px;
    padding: 5px;
    border: 1px solid transparent;
}

.menu a:hover,
.menu a:focus-visible {
    border-color: var(--color-text);
}

Podgląd strony po tym kroku (kontakt.html)

Krok 40: Klasy kolorów komunikatu

ok. 1 min

Polecenie z arkusza

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

Kolory komunikatu też trafiają do arkusza stylów, jako dwie klasy: .message-error (czerwony) i .message-ok (Navy). Skrypt nie będzie ustawiał koloru sam - tylko przypnie akapitowi jedną z klas. Wygląd zostaje w CSS, zachowanie w skrypcie, a zmiana koloru ostrzeżenia nie wymaga zaglądania do kodu JavaScript.

To polecenie należy do skryptu, więc punkt za kolory (R.5.6) przyznaje krok, w którym skrypt przypina klasy.

styl.css CSS zmienione: 8 linii

:root {
    --color-page: #EEEEEE;
    --color-accent: LightBlue;
    --color-banner: #DDDDDD;
    --color-text: Navy;
}

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

.page {
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas:
        "logo   menu"
        "banner banner"
        "main   main"
        "footer footer";
}

.logo   { grid-area: logo; }
.menu   { grid-area: menu; }
.banner { grid-area: banner; }
main    { grid-area: main; }
footer  { grid-area: footer; }

.logo,
.menu {
    background-color: var(--color-accent);
    height: 100px;
    padding-block: 10px;
}

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

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

main {
    color: var(--color-text);
    margin: 50px;
    height: 400px;
}

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

footer p {
    margin: 0;
}

button {
    background-color: var(--color-accent);
    color: var(--color-text);
}

.menu a {
    color: var(--color-text);
    font-size: 150%;
    font-weight: bold;
    text-decoration: none;
    margin: 10px;
    padding: 5px;
    border: 1px solid transparent;
}

.menu a:hover,
.menu a:focus-visible {
    border-color: var(--color-text);
}

.message-error {
    color: red;
}

.message-ok {
    color: var(--color-text);
}

Podgląd strony po tym kroku (kontakt.html)

Etap 4: Skrypt JavaScript

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

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

Kryteria: ,

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

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

ok. 3 min

Polecenie z arkusza

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

Skrypt w osobnym pliku kontakt.js, dołączony w <head> strony kontaktowej z atrybutem defer: przeglądarka pobiera plik równolegle, a uruchamia go dopiero po wczytaniu całego HTML-u - formularz już istnieje, gdy skrypt go szuka.

dwie stałe const z formularzem i akapitem komunikatu - wyszukane raz, przy starcie,
addEventListener('submit', showMessage) - funkcja showMessage uruchamia się, gdy formularz jest wysyłany przyciskiem „Prześlij” albo klawiszem Enter (R.3.4, R.5.1),
event.preventDefault() zatrzymuje domyślne działanie, czyli przeładowanie strony. Bez tej linii komunikat mignąłby i zniknął razem z wpisanymi danymi.

Kliknięcie „Prześlij” w podglądzie już niczego nie czyści - i jeszcze niczego nie wyświetla.

kontakt.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Firma IT</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="logo.png" type="image/png">
    <script src="kontakt.js" defer></script>
</head>
<body>
    <div class="page">
        <header class="logo">
            <img src="logo.png" alt="firma it" width="100" height="100">
        </header>
        <nav class="menu">
            <a href="index.html">Strona Główna</a>
            <a href="uslugi.html">Usługi</a>
            <a href="kontakt.html">Kontakt</a>
        </nav>
        <section class="banner">
            <img src="animacja.gif" alt="Usługi informatyczne" width="1000" height="200">
        </section>
        <main>
            <h2>Kontakt</h2>
            <form class="contact-form" novalidate>
                <table>
                    <tr>
                        <td><label for="first-name">Imię: </label></td>
                        <td><input type="text" id="first-name" name="firstName" autocomplete="given-name"></td>
                    </tr>
                    <tr>
                        <td><label for="last-name">Nazwisko: </label></td>
                        <td><input type="text" id="last-name" name="lastName" autocomplete="family-name"></td>
                    </tr>
                    <tr>
                        <td><label for="email">E-mail: </label></td>
                        <td><input type="email" id="email" name="email" autocomplete="email"></td>
                    </tr>
                    <tr>
                        <td><label for="request">Zgłoszenie: </label></td>
                        <td><textarea id="request" name="request" rows="10" cols="40"></textarea></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="checkbox" id="rules" name="rules"> <label for="rules">Zapoznałam/em się z regulaminem</label></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><button type="reset">Resetuj</button> <button type="submit">Prześlij</button></td>
                    </tr>
                </table>
            </form>
            <hr>
            <p class="message" aria-live="polite"></p>
        </main>
        <footer>
            <p>Autor strony: <strong>Bartosz Bryniarski</strong></p>
        </footer>
    </div>
</body>
</html>

kontakt.js JavaScript nowy plik

const form = document.querySelector('.contact-form');
const message = document.querySelector('.message');

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

form.addEventListener('submit', showMessage);

Podgląd strony po tym kroku (kontakt.html)

Krok 42: Pobranie kontrolek formularza
Kryteria:
R.5.2 Skrypt pobiera wartość z przynajmniej jednej kontrolki
ok. 2 min
Polecenie z arkusza
Skrypt pobiera wartości wprowadzone do kontrolek.
form.elements to zbiór kontrolek formularza dostępnych po ich atrybucie name. Zapis z nawiasami klamrowymi to destrukturyzacja: jedna linia tworzy cztery stałe firstName, lastName, request i rules - zamiast czterech wywołań getElementById.
Wartości odczytuje się z nich w następnych krokach: .value daje wpisany tekst, .checked - czy pole wyboru jest zaznaczone (R.5.2). Adres e-mail nie występuje w komunikacie, więc nie jest pobierany.
kontakt.js JavaScript zmienione: 1 linia
const form = document.querySelector('.contact-form'); const message = document.querySelector('.message'); function showMessage(event) { event.preventDefault(); const { firstName, lastName, request, rules } = form.elements; } form.addEventListener('submit', showMessage);
Podgląd strony po tym kroku (kontakt.html)
Krok 43: 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
ok. 2 min
Polecenie z arkusza
Jeżeli nie zaznaczono pola wyboru: „Musisz zapoznać się z regulaminem”. Komunikat jest wyświetlony w kolorze czerwonym.
!rules.checked - warunek prawdziwy, gdy pole nie jest zaznaczone,
className ustawia akapitowi klasy message message-error - kolor czerwony pochodzi z arkusza stylów,
textContent wpisuje zwykły tekst (R.5.3, R.5.5),
return kończy funkcję - to „wczesne wyjście”: dalszy kod obsługuje już tylko przypadek z zaznaczonym regulaminem, bez bloku else.
Kliknij w podglądzie „Prześlij” bez zaznaczenia regulaminu.
kontakt.js JavaScript zmienione: 6 linii
const form = document.querySelector('.contact-form'); const message = document.querySelector('.message'); function showMessage(event) { event.preventDefault(); const { firstName, lastName, request, rules } = form.elements; if (!rules.checked) { message.className = 'message message-error'; message.textContent = 'Musisz zapoznać się z regulaminem'; return; } } form.addEventListener('submit', showMessage);
Podgląd strony po tym kroku (kontakt.html)
Krok 44: 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. 4 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.
szablon tekstowy w odwrotnych apostrofach skleja imię i nazwisko ze spacją, trim() obcina przypadkowe spacje z brzegów, a toUpperCase() zamienia całość na wielkie litery - „Anna Nowak” daje „ANNA NOWAK” (R.5.7),
klasa message-ok daje kolor Navy (R.5.6),
replaceChildren wstawia do akapitu trzy części naraz: napis, prawdziwy element <br> z createElement (łamanie linii po nazwisku) i drugi napis z treścią sprawy (R.5.4). Napisy trafiają jako zwykły tekst: gdy ktoś wpisze w zgłoszeniu <b>pilne</b>, strona pokaże te znaki dosłownie, zamiast wykonać je jako HTML. Przy innerHTML taka treść zamieniłaby się w kod strony - tą drogą da się wstrzyknąć skrypt (atak XSS).
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 mówią, co przechowują: form, message, fullName, showMessage (R.5.8).
Typowe błędy
Samo textContent z całym zdaniem gubi łamanie linii - imię, nazwisko i treść sprawy wyjdą w jednym wierszu, a klucz wymaga treści w drugiej linii (R.5.4).
kontakt.js JavaScript zmienione: 4 linie
const form = document.querySelector('.contact-form'); const message = document.querySelector('.message'); function showMessage(event) { event.preventDefault(); const { firstName, lastName, request, rules } = form.elements; if (!rules.checked) { message.className = 'message message-error'; message.textContent = 'Musisz zapoznać się z regulaminem'; return; } const fullName = `${firstName.value.trim()} ${lastName.value.trim()}`.toUpperCase(); message.className = 'message message-ok'; message.replaceChildren(fullName, document.createElement('br'), `Treść Twojej sprawy: ${request.value}`); } form.addEventListener('submit', showMessage);
Podgląd strony po tym kroku (kontakt.html)

Krok 45: Resetuj czyści też komunikat

ok. 2 min

Polecenie z arkusza

Przycisk „Resetuj” czyszczący kontrolki.

Przycisk „Resetuj” czyści pola, ale komunikat pod linią to nie kontrolka - zostałby na stronie, opisując dane, których już nie ma. Drugi słuchacz, na zdarzenie reset formularza, czyści też akapit. Funkcja strzałkowa () => { ... } jest krótka i potrzebna tylko tutaj, więc nie ma osobnej nazwy.

Arkusz tego nie wymaga, a klucz nie ocenia.

kontakt.js JavaScript zmienione: 4 linie

const form = document.querySelector('.contact-form');
const message = document.querySelector('.message');

function showMessage(event) {
    event.preventDefault();
    const { firstName, lastName, request, rules } = form.elements;

    if (!rules.checked) {
        message.className = 'message message-error';
        message.textContent = 'Musisz zapoznać się z regulaminem';
        return;
    }

    const fullName = `${firstName.value.trim()} ${lastName.value.trim()}`.toUpperCase();
    message.className = 'message message-ok';
    message.replaceChildren(fullName, document.createElement('br'), `Treść Twojej sprawy: ${request.value}`);
}

form.addEventListener('submit', showMessage);
form.addEventListener('reset', () => {
    message.className = 'message';
    message.textContent = '';
});

Podgląd strony po tym kroku (kontakt.html)

Etap 5: Porównanie z wersją podstawową

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

Krok 46: Co jest inaczej i dlaczego

ok. 3 min

Polecenie z arkusza

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

Obie wersje dają te same punkty. Różnice:

	wersja podstawowa	ta wersja
układ bloków	`float: left` + `clear: both`	`display: grid` i `grid-template-areas`
szerokość logo i menu	`width: 50%` w bloku	kolumny siatki `50% 50%`
style bloków	identyfikatory (`#logo`)	klasy (`.logo`)
kolory	wpisane w każdej regule	zmienne w `:root`
ramka odnośnika	pojawia się i przesuwa napisy	przezroczysta od początku, także pod `Tab`
przycisk „Prześlij”	`type="button"` + `onclick="send()"`	`type="submit"`, zdarzenie `submit`, `preventDefault()`
skrypt	`<script>` w `kontakt.html`	`kontakt.js` z `defer`
kontrolki w skrypcie	`getElementById` dla każdej	`form.elements` + destrukturyzacja
komunikat	`innerHTML` z `<br>` w napisie	`replaceChildren` (tekst + element `br`)
kolor komunikatu	`style.color` w skrypcie	klasy `.message-error` i `.message-ok` w CSS

Skrypt tej wersji jest sprawdzony w prawdziwym Chrome: dane z obrazu 3 (ANNA NOWAK w kolorze Navy), brak zaznaczenia regulaminu (czerwony komunikat), <b>pilne</b> w zgłoszeniu (wyświetlone dosłownie), „Resetuj” (pusty komunikat i pola), a układ zmierzony: logo i menu po 50% kontenera w jednym wierszu.

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

Krok 47: Którą wersję wybrać na egzaminie
ok. 2 min
Polecenie z arkusza
Czas przeznaczony na wykonanie zadania wynosi 150 minut.
Wersja podstawowa, gdy liczy się czas: float, onclick, getElementById, innerHTML i style.color są w tabelach arkusza, a cały skrypt to kilkanaście linii w pliku strony.
Ta wersja, gdy siatkę CSS, addEventListener i preventDefault pisze się z pamięci. Osobny plik kontakt.js trzeba nagrać na płytę razem z resztą - bez niego formularz przestaje reagować, a punkty skryptu egzaminator sprawdzi już tylko w kodzie.
Mieszanie też daje pełne punkty: siatka i zmienne z tej wersji, skrypt z podstawowej.
Podgląd strony bez zmian - taki jak po kroku 45.
Etap 6: Oddanie pracy
Krok 48 · po tym etapie masz 42 z 42 kryteriów (pkt)
Krok 48: Plik przeglądarka.txt i nagranie płyty
ok. 5 min
Polecenie z arkusza
Po zakończeniu pracy utwórz w folderze z numerem zdającego plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt nazwa przeglądarki, w której strony były sprawdzane.
W folderze: animacja.gif, baner1.png, baner2.png, index.html, klatki.jpg, kontakt.html, logo.png, przeglądarka.txt, styl.css, uslugi.html oraz kontakt.js („ewentualnie inne przygotowane pliki”). Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.
przeglądarka.txt Tekst nowy plik
Google Chrome
Podgląd strony bez zmian - taki jak po kroku 45.

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: Bartosz Bryniarski. 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.

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

Etap 1: Grafika i animacja

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

Krok 2: Baner 1: grafika i napis „Usługi informatyczne”

Krok 3: Baner 2: napis w trzech wierszach

Krok 4: Animacja GIF z opóźnieniem 3000 ms

Etap 2: Strony HTML

Krok 5: Plik index.html w HTML5

Krok 6: Język strony

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

Krok 8: Tytuł strony

Krok 9: Podpięcie arkusza stylów

Krok 10: Ikona na karcie przeglądarki

Krok 11: Kontener i bloki strony

Krok 12: Blok logo

Krok 13: Menu: trzy odnośniki

Krok 14: Baner: animacja

Krok 15: Stopka z pogrubionym autorem

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

Krok 17: Strona główna: paragraf

Krok 18: Strona główna: linia pozioma

Krok 19: Podstrona uslugi.html z kopii

Krok 20: Lista numerowana usług

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

Krok 22: Tabela, wiersz 1: Imię i pole edycyjne

Krok 23: Tabela, wiersz 2: Nazwisko i pole edycyjne

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

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

Krok 26: Tabela, wiersz 5: Pole wyboru regulaminu

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

Krok 28: Pusty akapit na komunikat

Etap 3: Styl CSS

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

Krok 30: Cała strona

Krok 31: Kontener

Krok 32: Układ: siatka z nazwanymi obszarami

Krok 33: Bloki logo i menu

Krok 34: Baner

Krok 35: Blok główny

Krok 36: Stopka

Krok 37: Przyciski

Krok 38: Odnośniki menu

Krok 39: Ramka po wskazaniu odnośnika

Krok 40: Klasy kolorów komunikatu

Etap 4: Skrypt JavaScript

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

Krok 42: Pobranie kontrolek formularza

Krok 43: Regulamin niezaznaczony: ostrzeżenie na czerwono

Krok 44: Regulamin zaznaczony: dane z formularza

Krok 45: Resetuj czyści też komunikat

Etap 5: Porównanie z wersją podstawową

Krok 46: Co jest inaczej i dlaczego

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

Etap 6: Oddanie pracy

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

Podgląd