Przejdź do głównej treści
INF.03-10-24.06-SGCzerwiec 2024 · 45 kroków · ok. 83 min · 37 kryteriów z klucza

Rozwiązanie krok po kroku: Witryna z kartami pracowników (Wersja podstawowa)

Rozwiązanie obejmuje bazę kadra (pracownicy i stanowiska) z czterema zapytaniami - grupowanie z COUNT(*) i sortowaniem malejącym, złączenie tabel z warunkiem na staż, przedział lat pracy i ALTER TABLE dodający kolumnę - potem logo z przezroczystym tłem, wykadrowane i przeskalowane do 100 px wysokości, stronę pracownicy.html z dwoma banerami, trzema kartami pracowniczymi, blokiem cytatów i stopką, style w styl.css (cień bloku, zmiana koloru po najechaniu kursorem) oraz skrypt JavaScript, który po kliknięciu w cytat ukrywa go i pokazuje następny (po trzecim wraca pierwszy).

Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypt powstaje najpierw w najprostszej postaci, metodami z tabeli 1 arkusza (atrybut onclick, getElementById, style.display), a na końcu zostaje przerobiony na wersję z prawdziwych projektów: obsługa zdarzeń w skrypcie (addEventListener), jedna reguła zamiast trzech gałęzi if i obsługa klawiatury.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid)” jest drugi sposób rozwiązania tego samego arkusza: bloki i karty na siatce CSS, kolory w zmiennych, cytaty ukryte selektorem sąsiedztwa i przełączane jedną funkcją z obsługą klawiatury od początku - obie wersje są zgodne z kluczem.

Baza, zdjęcia i teksty pochodzą z prawdziwego archiwum pliki10 (załącznik do arkusza, hasło w treści zadania). Zrzuty wyników zapytań są odtworzone z tej bazy - na egzaminie robisz je sam, z całego ekranu. Każda wersja skryptu była uruchomiona w przeglądarce Chrome z trzema kliknięciami w widoczny cytat; w podglądzie kliknij cytat pod kartami, żeby go zmienić.

Jak liczą się punkty. Klucz ma 37 kryteriów (R.1.1 - R.5.7), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 28 punktów - można stracić 9 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: Baza danych

    Kroki 1-7 · po tym etapie masz 6 z 37 kryteriów (pkt)

    Krok 1: Baza danych kadra

    ok. 2 min
    Polecenie z arkusza

    Utwórz bazę danych o nazwie kadra, z zestawem polskich znaków (np. utf8_unicode_ci)

    Najpierw rozpakowanie pliki10.zip z pulpitu (hasło K@dra_FirMy# - małpa zamiast „a”, podkreślnik, wielkie M i krzyżyk na końcu) do folderu nazwanego numerem zdającego. W phpMyAdmin: Nowa, nazwa kadra, porównywanie utf8_unicode_ci.

    Typowe błędy

    Klucz w R.1.1 wymaga importu do bazy o nazwie kadra - literówka w nazwie bazy może kosztować ten punkt.

  2. Krok 2: Import tabel z pliku baza.sql

    ok. 2 min
    Polecenie z arkusza

    Do bazy zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum

    Zaznacz bazę kadra, potem Import → baza.sql → Wykonaj. Powstają dwie tabele z obrazu 1: pracownicy (imię, nazwisko, pensja, staż w latach i klucz obcy stanowiska_id) oraz stanowiska (identyfikator i nazwa).

  3. Krok 3: Zrzut ekranu import.png

    Kryteria:

    R.1.1 Wykonano import tabel do bazy danych kadra czynność udokumentowano plikiem o nazwie import w formacie PNG

    ok. 2 min
    Polecenie z arkusza

    Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie PNG i nazwij import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel.

    Print Screen, wklejenie do edytora grafiki i zapis jako import.png. Uwaga na formaty: import idzie do PNG, a zrzuty zapytań do JPEG (kw1.jpg - kw4.jpg).

    Typowe błędy

    Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).

  4. Krok 4: Zapytanie 1: liczba osób z każdą pensją

    Kryteria: ,

    R.1.2 Zapisano plik kwerendy.txt zawierający co najmniej jedno zapytanie SQL, wynikające z treści zadania

    R.1.3 Wykonano zapytanie 1 wybierające jedynie liczbę wierszy i pensję grupując pracowników według pensji i sortując dane malejąco ze względu na pensję. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT COUNT(*), pensja FROM pracownicy GROUP BY pensja ORDER BY pensja DESC; oraz wynik działania udokumentowano zrzutem, na którym jest widocznych dokładnie 7 rekordów z danymi: 1 8000; 2 6000; 1 5050; 3 5000; 2 4700; 3 4000; 2 3800

    ok. 3 min
    Polecenie z arkusza

    Zapytanie 1: wybierające jedynie liczbę wierszy i pensję grupując pracowników według pensji i sortując dane malejąco ze względu na pensję. W wyniku zapytania są wyświetlane poszczególne pensje oraz liczba osób, które pobierają taką pensję

    • SELECT COUNT(*), pensja - liczba wierszy w grupie i wartość, po której grupujesz,
    • FROM pracownicy,
    • GROUP BY pensja - jedna grupa na każdą różną pensję, COUNT(*) liczy wiersze w grupie,
    • ORDER BY pensja DESC - od najwyższej pensji.

    Wynik: 7 wierszy, od 1 osoby z pensją 8000 do 2 osób z pensją 3800 - dokładnie jak w kluczu. Zapytania zapisujesz w kwerendy.txt, zrzut jako kw1.jpg.

    Typowe błędy

    ORDER BY bez DESC sortuje rosnąco - zapytanie zwraca te same 7 wierszy, ale w odwrotnej kolejności i nie spełnia polecenia.

    kwerendy.txt Tekst nowy plik 
    -- Zapytanie 1
SELECT COUNT(*), pensja FROM pracownicy GROUP BY pensja ORDER BY pensja DESC;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 4

  5. Krok 5: Zapytanie 2: pracownicy ze stażem powyżej 10 lat

    Kryteria:

    R.1.4 Wykonano zapytanie 2 wybierające jedynie imiona i nazwiska pracowników oraz odpowiadające im nazwy stanowisk dla pracowników o stażu wyższym niż 10 lat. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT imie, nazwisko, nazwa FROM pracownicy JOIN stanowiska ON stanowiska_id = stanowiska.id WHERE staz > 10; (możliwe również INNER JOIN lub porównanie kluczy po WHERE) oraz wynik działania udokumentowano zrzutem, na którym są widoczne dokładnie 4 rekordy z wartościami: Krzysztof Dobromilski Dyrektor, Ewa Nowak Kadrowa, Joanna Trojanowska Kierownik, Konrad Grzegorzewski Kierownik

    ok. 3 min
    Polecenie z arkusza

    Zapytanie 2: wybierające jedynie imiona i nazwiska pracowników oraz odpowiadające im nazwy stanowisk dla pracowników o stażu wyższym niż 10 lat. Należy posłużyć się relacją

    • SELECT imie, nazwisko, nazwa - nazwa stanowiska leży w drugiej tabeli,
    • FROM pracownicy JOIN stanowiska - złączenie obu tabel („posłużyć się relacją”),
    • ON pracownicy.stanowiska_id = stanowiska.id - klucz obcy pracownika wskazuje identyfikator stanowiska (relacja Rel_01 z obrazu 1),
    • WHERE staz > 10 - „wyższym niż 10”, więc bez równości.

    Wynik: 4 wiersze - Dobromilski (Dyrektor), Nowak (Kadrowa), Trojanowska i Grzegorzewski (Kierownik). Jan Nowacki ma staż równy 10 i słusznie nie wchodzi. Zrzut: kw2.jpg.

    Typowe błędy

    staz >= 10 dopisuje piątego pracownika (Nowacki) - klucz wymaga dokładnie 4 rekordów.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT COUNT(*), pensja FROM pracownicy GROUP BY pensja ORDER BY pensja DESC;

-- Zapytanie 2
SELECT imie, nazwisko, nazwa FROM pracownicy JOIN stanowiska ON pracownicy.stanowiska_id = stanowiska.id WHERE staz > 10;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 5

  6. Krok 6: Zapytanie 3: staż od 10 do 20 lat

    Kryteria:

    R.1.5 Wykonano zapytanie 3 wybierające jedynie nazwiska i pensję dla pracowników, których staż wynosi od 10 do 20 lat. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT nazwisko, pensja FROM pracownicy WHERE staz >= 10 AND staz <= 20; (możliwe również z zastosowaniem BETWEEN) oraz wynik działania udokumentowano zrzutem, na którym jest widocznych dokładnie 5 rekordów z danymi: Nowak 5000, Trojanowska 6000, Nowacki 5050, Grzegorzewski 6000, Trębosz 4000

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 3: wybierające jedynie nazwiska i pensję dla pracowników, których staż wynosi od 10 do 20 lat

    • SELECT nazwisko, pensja,
    • FROM pracownicy,
    • WHERE staz BETWEEN 10 AND 20 - BETWEEN obejmuje oba końce, więc to samo co staz >= 10 AND staz <= 20.

    Wynik: 5 wierszy - Nowak 5000, Trojanowska 6000, Nowacki 5050, Grzegorzewski 6000, Trębosz 4000. Tym razem staż 10 (Nowacki, Trębosz) i 20 (Nowak) wchodzą. Zrzut: kw3.jpg.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT COUNT(*), pensja FROM pracownicy GROUP BY pensja ORDER BY pensja DESC;

-- Zapytanie 2
SELECT imie, nazwisko, nazwa FROM pracownicy JOIN stanowiska ON pracownicy.stanowiska_id = stanowiska.id WHERE staz > 10;

-- Zapytanie 3
SELECT nazwisko, pensja FROM pracownicy WHERE staz BETWEEN 10 AND 20;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 6

  7. Krok 7: Zapytanie 4: kolumna minPensja

    Kryteria:

    R.1.6 Wykonano zapytanie 4 Dodające do tabeli stanowiska kolumnę o nazwie minPensja dowolnego typu całkowitego. W pliku z kwerendami lub na zrzucie istnieje zapis np.: ALTER TABLE stanowiska ADD COLUMN minPensja INT; (COLUMN jest opcjonalne, dozwolone różne inne typy całkowite) oraz wynik działania udokumentowano zrzutem, na którym widoczne jest poprawnie wykonane zapytanie lub struktura tabeli stanowiska z kolumną minPensja

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 4: Dodające do tabeli stanowiska kolumnę o nazwie minPensja dowolnego typu całkowitego

    Zmiana struktury tabeli to ALTER TABLE, a dodanie kolumny - ADD COLUMN (słowo COLUMN można pominąć). Typ całkowity: INT (pasują też SMALLINT, BIGINT i inne całkowite). Zapytanie nie zwraca wierszy, więc na zrzucie kw4.jpg pokazujesz komunikat o wykonaniu albo strukturę tabeli stanowiska z nową kolumną - na zrzucie obok jest struktura po zmianie.

    Typowe błędy

    DECIMAL albo FLOAT to nie typ całkowity - kryterium nie jest spełnione.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT COUNT(*), pensja FROM pracownicy GROUP BY pensja ORDER BY pensja DESC;

-- Zapytanie 2
SELECT imie, nazwisko, nazwa FROM pracownicy JOIN stanowiska ON pracownicy.stanowiska_id = stanowiska.id WHERE staz > 10;

-- Zapytanie 3
SELECT nazwisko, pensja FROM pracownicy WHERE staz BETWEEN 10 AND 20;

-- Zapytanie 4
ALTER TABLE stanowiska ADD COLUMN minPensja INT;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 7

  8. Etap 2: Grafika i strona HTML

    Kroki 8-26 · po tym etapie masz 17 z 37 kryteriów (pkt)

    Krok 8: Logo: przezroczyste tło, kadr i 100 px wysokości

    Kryteria:

    R.2.1 Nadano grafice logo.png przezroczyste tło oraz wykadrowano tak, aby kształt wypełniał całość obrazu. Wymiary grafiki to: wysokość 100 px i szerokość 102 px (± 10 px)

    ok. 4 min
    Polecenie z arkusza

    Dla grafiki logo.png (górny lewy róg obrazu 2) należy: Ustawić przezroczyste tło. Skadrować, tak aby kształt wypełniał całość obrazu. Przeskalować z zachowaniem proporcji do dokładnej wysokości 100 px

    Trzy operacje w GIMP-ie, w tej kolejności:

    1. Warstwa → Przezroczystość → Dodaj kanał alfa, różdżka kliknięta w białe tło i Delete - białe pasy między wstęgami kuli łączą się z tłem, więc też znikają i na banerze prześwituje przez nie kolor tła,
    2. Obraz → Przytnij do zawartości - obraz kurczy się z 640 × 640 px do samej kuli: 330 × 325 px,
    3. Obraz → Skaluj obraz, wysokość 100 px przy zamkniętym łańcuchu proporcji - szerokość wychodzi 102 px (klucz: 102 ±10).

    Eksport pod tą samą nazwą, w PNG (JPEG nie ma przezroczystości). Po lewej oryginał, po prawej wynik na szachownicy, która oznacza przezroczystość.

    Typowe błędy

    Skalowanie przed kadrowaniem daje obraz 100 × 100 px z małą kulą w środku - kształt nie wypełnia obrazu i wymiary nie zgadzają się z kluczem.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 8

  9. Krok 9: Plik pracownicy.html w HTML5

    ok. 2 min
    Polecenie z arkusza

    Składa się ze strony o nazwie pracownicy.html zapisanej w języku HTML5

    Deklaracja <!DOCTYPE html> i szkielet z sekcjami <head> i <body>. Plik zapisz w folderze z numerem zdającego, obok zdjęć i logo.

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

  10. Krok 10: Język strony

    ok. 1 min
    Polecenie z arkusza

    Ustawiony język zawartości strony na polski

    Atrybut lang="pl" w znaczniku <html>.

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

  11. Krok 11: Kodowanie polskich znaków

    Kryteria:

    R.2.2 Witrynę internetową zapisano w pliku pracownicy.html oraz zapisano jawnie standard kodowania polskich znaków i deklarację HTML5 <!DOCTYPE HTML> i zadeklarowano język witryny polski np.<HTML lang="pl">. Strona zawiera sekcje head i body

    ok. 1 min
    Polecenie z arkusza

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

    <meta charset="UTF-8"> jako pierwszy element <head>. Z deklaracją HTML5, językiem i sekcjami head i body to jedno kryterium klucza.

    pracownicy.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 (pracownicy.html)

  12. Krok 12: Tytuł strony

    Kryteria:

    R.2.3 Nadano tytuł stronie: Nasz zespół

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony widoczny na karcie przeglądarki: „Nasz zespół”

    <title> w <head> - widać go na karcie przeglądarki, nie na samej stronie.

    pracownicy.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

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

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

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

    Nazwa pliku: styl.css. Całe formatowanie ma pochodzić z tego pliku - żadnych atrybutów style ani znacznika <style> w HTML-u (R.3.5).

    pracownicy.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

  14. Krok 14: Bloki: dwa banery, główny, cytaty, stopka

    Kryteria:

    R.2.4 Układ strony zdefiniowano dzieląc ją na: dwa bloki banera, blok główny, blok cytatu, stopka. Zastosowano semantyczne znaczniki sekcji HTML5 zgodnie z ich znaczeniem, w tym do części nagłówkowej - header, stopki - footer, dopuszcza się zagnieżdżenie bloków div w znacznikach semantycznych

    ok. 3 min
    Polecenie z arkusza

    Podział strony na: dwa bloki banera obok siebie, poniżej blok główny, poniżej blok cytatu, na dole stopka. Podział zrealizowany wyłącznie za pomocą semantycznych znaczników sekcji języka HTML5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 2

    Pięć bloków w kolejności z obrazu 2, wyłącznie znaczniki semantyczne (klucz R.2.4: nagłówek to header, stopka to footer):

    • dwa banery - dwa elementy <header> (na stronie może być ich kilka) ze wspólną klasą banner, żeby oba dostały jeden styl,
    • blok główny - <main>,
    • blok cytatów - <section> z identyfikatorem quotes,
    • stopka - <footer>.

    Banery staną obok siebie dopiero w CSS - w HTML-u wystarczy, że są pierwsze.

    pracownicy.html HTML zmienione: 10 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header class="banner">
    </header>
    <header class="banner">
    </header>
    <main>
    </main>
    <section id="quotes">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

  15. Krok 15: Pierwszy baner: logo

    Kryteria:

    R.2.5 W pierwszym bloku banera umieszczono obraz logo.png z tekstem alternatywnym "logo firmy"

    ok. 1 min
    Polecenie z arkusza

    Zawartość pierwszego banera: obraz logo.png z tekstem alternatywnym „logo firmy”

    <img> z przygotowanym plikiem i alt="logo firmy".

    pracownicy.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header class="banner">
        <img src="logo.png" alt="logo firmy">
    </header>
    <header class="banner">
    </header>
    <main>
    </main>
    <section id="quotes">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

  16. Krok 16: Drugi baner: nagłówek

    ok. 1 min
    Polecenie z arkusza

    Zawartość drugiego banera: nagłówek pierwszego stopnia o treści „Nasz zespół”

    Pierwszego stopnia, czyli <h1>. Ten sam tekst co w tytule strony, ale tym razem widoczny na stronie.

    pracownicy.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header class="banner">
        <img src="logo.png" alt="logo firmy">
    </header>
    <header class="banner">
        <h1>Nasz zespół</h1>
    </header>
    <main>
    </main>
    <section id="quotes">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

  17. Krok 17: Pierwsza karta pracownicza

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku głównego: trzy bloki kart pracowniczych, umieszczone obok siebie. Zawartość kart jest zgodna z obrazem 2. Dane do kart należy skopiować do dokumentu HTML z pliku tekstyNaStrone.txt, wypakowanego z archiwum.

    Karta to zamknięta, samodzielna treść o jednej osobie - semantycznie pasuje do niej <article>. Wszystkie trzy karty dostaną wspólną klasę card, bo arkusz każe formatować je jednakowo. Najpierw pusta karta, potem jej zawartość element po elemencie, na końcu dwie kopie z danymi pozostałych osób z pliku tekstyNaStrone.txt.

    pracownicy.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header class="banner">
        <img src="logo.png" alt="logo firmy">
    </header>
    <header class="banner">
        <h1>Nasz zespół</h1>
    </header>
    <main>
        <article class="card">
        </article>
    </main>
    <section id="quotes">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

  18. Krok 18: Karta: zdjęcie z tekstem alternatywnym

    Kryteria:

    R.2.7 Umieszczono obraz osoba1.jpg z tekstem alternatywnym "Dyrektor" lub obraz osoba2.jpg z tekstem alternatywnym "Kierownik logistyków" lub obraz osoba3.jpg z tekstem alternatywnym "Kadry"

    ok. 1 min
    Polecenie z arkusza

    Każdy z bloków zawiera: Obraz z tekstem alternatywnym

    Plik i tekst alternatywny są podane w tekstyNaStrone.txt (dla dyrektora: osoba1.jpg, „Dyrektor”). Zdjęcie ma na razie naturalną szerokość 500 px - do szerokości karty dopasuje je CSS.

    pracownicy.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header class="banner">
        <img src="logo.png" alt="logo firmy">
    </header>
    <header class="banner">
        <h1>Nasz zespół</h1>
    </header>
    <main>
        <article class="card">
            <img src="osoba1.jpg" alt="Dyrektor">
        </article>
    </main>
    <section id="quotes">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

  19. Krok 19: Karta: imię i nazwisko

    ok. 1 min
    Polecenie z arkusza

    Imię i nazwisko w nagłówku drugiego stopnia

    Nagłówek <h2> - drugi stopień, bo pierwszy (<h1>) jest w banerze.

    pracownicy.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header class="banner">
        <img src="logo.png" alt="logo firmy">
    </header>
    <header class="banner">
        <h1>Nasz zespół</h1>
    </header>
    <main>
        <article class="card">
            <img src="osoba1.jpg" alt="Dyrektor">
            <h2>Krzysztof Dobromilski</h2>
        </article>
    </main>
    <section id="quotes">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

  20. Krok 20: Karta: stanowisko

    ok. 1 min
    Polecenie z arkusza

    Stanowisko w nagłówku trzeciego stopnia

    Nagłówek <h3> ze stanowiskiem.

    pracownicy.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header class="banner">
        <img src="logo.png" alt="logo firmy">
    </header>
    <header class="banner">
        <h1>Nasz zespół</h1>
    </header>
    <main>
        <article class="card">
            <img src="osoba1.jpg" alt="Dyrektor">
            <h2>Krzysztof Dobromilski</h2>
            <h3>Dyrektor</h3>
        </article>
    </main>
    <section id="quotes">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

  21. Krok 21: Karta: opis i telefon

    ok. 1 min
    Polecenie z arkusza

    Opis i numer telefonu w dwóch paragrafach (akapitach)

    Dwa osobne akapity <p>: opis i „telefon: 111222333”. Teksty kopiujesz z pliku bez poprawiania - drobne literówki i tak nie zabierają punktów (uwaga przy R.2).

    pracownicy.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header class="banner">
        <img src="logo.png" alt="logo firmy">
    </header>
    <header class="banner">
        <h1>Nasz zespół</h1>
    </header>
    <main>
        <article class="card">
            <img src="osoba1.jpg" alt="Dyrektor">
            <h2>Krzysztof Dobromilski</h2>
            <h3>Dyrektor</h3>
            <p>Firma logistyczna była jego marzeniem. Zrealizował je 10 lat temu. Nasza firma prosperuje dzięki Krzysztofowi</p>
            <p>telefon: 111222333</p>
        </article>
    </main>
    <section id="quotes">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

  22. Krok 22: Karta: odnośnik „Kontakt” w nagłówku piątego stopnia

    Kryteria: ,

    R.2.8 Umieszczono w przynajmniej jednym bloku karty nagłówek h2 z imieniem i nazwiskiem, h3 ze stanowiskiem, h5 z odnośnikiem oraz dwa paragrafy z opisem i numerem telefonu

    R.3.3 Umieszczono przynajmniej jeden odnośnik pocztowy o treści "Kontakt" , prowadzący do adresu email, np. <a href="mailto:[email protected]">Kontakt</a>

    ok. 2 min
    Polecenie z arkusza

    Odnośnik pocztowy o treści „Kontakt” do adresu e-mail danej osoby, zapisany w nagłówku piątego stopnia

    Odnośnik pocztowy to <a> z adresem zaczynającym się od mailto: - kliknięcie otwiera program pocztowy z wpisanym odbiorcą. Arkusz każe zapisać go „w nagłówku piątego stopnia”, więc <a> stoi wewnątrz <h5>. Pierwsza karta jest kompletna: nagłówki h2, h3, h5 z odnośnikiem i dwa akapity (R.2.8).

    Typowe błędy

    Adres bez mailto: (href="[email protected]") przeglądarka traktuje jak plik na serwerze - odnośnik nie jest pocztowy.

    pracownicy.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header class="banner">
        <img src="logo.png" alt="logo firmy">
    </header>
    <header class="banner">
        <h1>Nasz zespół</h1>
    </header>
    <main>
        <article class="card">
            <img src="osoba1.jpg" alt="Dyrektor">
            <h2>Krzysztof Dobromilski</h2>
            <h3>Dyrektor</h3>
            <p>Firma logistyczna była jego marzeniem. Zrealizował je 10 lat temu. Nasza firma prosperuje dzięki Krzysztofowi</p>
            <p>telefon: 111222333</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
    </main>
    <section id="quotes">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

  23. Krok 23: Druga i trzecia karta

    ok. 3 min
    Polecenie z arkusza

    Zawartość kart jest zgodna z obrazem 2.

    Kopia pierwszej karty dwa razy i podmiana danych z tekstyNaStrone.txt: Joanna Trojanowska (osoba2.jpg, alt „Kierownik logistyków”) i Ewa Nowak (osoba3.jpg, alt „Kadry”, stanowisko „Księgowość i kadry”). Każda karta ma swój adres w mailto:. Karty stoją na razie jedna pod drugą - obok siebie postawi je CSS.

    pracownicy.html HTML zmienione: 16 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header class="banner">
        <img src="logo.png" alt="logo firmy">
    </header>
    <header class="banner">
        <h1>Nasz zespół</h1>
    </header>
    <main>
        <article class="card">
            <img src="osoba1.jpg" alt="Dyrektor">
            <h2>Krzysztof Dobromilski</h2>
            <h3>Dyrektor</h3>
            <p>Firma logistyczna była jego marzeniem. Zrealizował je 10 lat temu. Nasza firma prosperuje dzięki Krzysztofowi</p>
            <p>telefon: 111222333</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba2.jpg" alt="Kierownik logistyków">
            <h2>Joanna Trojanowska</h2>
            <h3>Kierownik logistyków</h3>
            <p>Od początku firmy z nami. Wie jak zorganizować pracę swoich logistyków aby wszystko było na czas</p>
            <p>telefon: 222333444</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba3.jpg" alt="Kadry">
            <h2>Ewa Nowak</h2>
            <h3>Księgowość i kadry</h3>
            <p>Od lat finanse powierzamy niezawodnej Ewie. Twardą ręką trzyma kasę i dba o wszystkich pracowników</p>
            <p>telefon: 333444555</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
    </main>
    <section id="quotes">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

  24. Krok 24: Blok cytatów: pierwszy cytat

    Kryteria:

    R.2.9 W bloku cytatów umieszczono przynajmniej jeden cytat, zastosowano znacznik blockquote lub q

    ok. 2 min
    Polecenie z arkusza

    Zawartość bloku cytatów: Trzy cytaty, które należy skopiować do dokumentu HTML z pliku tekstynastrone.txt. Do zdefiniowania poszczególnych cytatów należy zastosować znacznik semantyczny przeznaczony dla cytatu. Treść cytatu jest zapisana w cudzysłowach, imię w paragrafie.

    Znacznik semantyczny dla dłuższego cytatu to <blockquote> (krótki cytat w zdaniu to <q>). Treść stoi wewnątrz razem ze zwykłymi cudzysłowami, tak jak w pliku z tekstami, a autor - w akapicie <p>. Każdy cytat dostaje identyfikator (quote1, quote2, quote3) - po nim skrypt będzie go ukrywał i pokazywał.

    pracownicy.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header class="banner">
        <img src="logo.png" alt="logo firmy">
    </header>
    <header class="banner">
        <h1>Nasz zespół</h1>
    </header>
    <main>
        <article class="card">
            <img src="osoba1.jpg" alt="Dyrektor">
            <h2>Krzysztof Dobromilski</h2>
            <h3>Dyrektor</h3>
            <p>Firma logistyczna była jego marzeniem. Zrealizował je 10 lat temu. Nasza firma prosperuje dzięki Krzysztofowi</p>
            <p>telefon: 111222333</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba2.jpg" alt="Kierownik logistyków">
            <h2>Joanna Trojanowska</h2>
            <h3>Kierownik logistyków</h3>
            <p>Od początku firmy z nami. Wie jak zorganizować pracę swoich logistyków aby wszystko było na czas</p>
            <p>telefon: 222333444</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba3.jpg" alt="Kadry">
            <h2>Ewa Nowak</h2>
            <h3>Księgowość i kadry</h3>
            <p>Od lat finanse powierzamy niezawodnej Ewie. Twardą ręką trzyma kasę i dba o wszystkich pracowników</p>
            <p>telefon: 333444555</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
    </main>
    <section id="quotes">
        <blockquote id="quote1">
            "Każdego dnia stawiam sobie nieosiągalne wyzwania i próbuję je wykonać"
            <p>- Krzysztof</p>
        </blockquote>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

  25. Krok 25: Drugi i trzeci cytat

    ok. 1 min
    Polecenie z arkusza

    Trzy cytaty, które należy skopiować do dokumentu HTML z pliku tekstynastrone.txt.

    Dwie kopie bloku z cytatami Joanny i Ewy. Na razie widać wszystkie trzy - drugi i trzeci ukryje CSS.

    pracownicy.html HTML zmienione: 8 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header class="banner">
        <img src="logo.png" alt="logo firmy">
    </header>
    <header class="banner">
        <h1>Nasz zespół</h1>
    </header>
    <main>
        <article class="card">
            <img src="osoba1.jpg" alt="Dyrektor">
            <h2>Krzysztof Dobromilski</h2>
            <h3>Dyrektor</h3>
            <p>Firma logistyczna była jego marzeniem. Zrealizował je 10 lat temu. Nasza firma prosperuje dzięki Krzysztofowi</p>
            <p>telefon: 111222333</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba2.jpg" alt="Kierownik logistyków">
            <h2>Joanna Trojanowska</h2>
            <h3>Kierownik logistyków</h3>
            <p>Od początku firmy z nami. Wie jak zorganizować pracę swoich logistyków aby wszystko było na czas</p>
            <p>telefon: 222333444</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba3.jpg" alt="Kadry">
            <h2>Ewa Nowak</h2>
            <h3>Księgowość i kadry</h3>
            <p>Od lat finanse powierzamy niezawodnej Ewie. Twardą ręką trzyma kasę i dba o wszystkich pracowników</p>
            <p>telefon: 333444555</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
    </main>
    <section id="quotes">
        <blockquote id="quote1">
            "Każdego dnia stawiam sobie nieosiągalne wyzwania i próbuję je wykonać"
            <p>- Krzysztof</p>
        </blockquote>
        <blockquote id="quote2">
            "Nie bój się porażek, im więcej ich rozwiążesz, tym szybciej osiągniesz cel"
            <p>- Joanna</p>
        </blockquote>
        <blockquote id="quote3">
            "Niezadowolony pracownik jest dla mnie źródłem nauki"
            <p>- Ewa</p>
        </blockquote>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

  26. Krok 26: Stopka

    Kryteria:

    R.2.6 W drugim bloku banera zapisano nagłówek h1 "Nasz zespół" , zapisano przynajmniej jeden paragraf w bloku cytatów oraz paragraf w bloku stopki

    ok. 1 min
    Polecenie z arkusza

    Zawartość stopki: paragraf o treści: „Stronę wykonał: ”, dalej wstawiony numer zdającego.

    Akapit w <footer>. Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL) - tutaj stoi imię i nazwisko autora rozwiązania. Z nagłówkiem <h1>, akapitem w bloku cytatów i tym akapitem spełnione jest kryterium R.2.6.

    pracownicy.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header class="banner">
        <img src="logo.png" alt="logo firmy">
    </header>
    <header class="banner">
        <h1>Nasz zespół</h1>
    </header>
    <main>
        <article class="card">
            <img src="osoba1.jpg" alt="Dyrektor">
            <h2>Krzysztof Dobromilski</h2>
            <h3>Dyrektor</h3>
            <p>Firma logistyczna była jego marzeniem. Zrealizował je 10 lat temu. Nasza firma prosperuje dzięki Krzysztofowi</p>
            <p>telefon: 111222333</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba2.jpg" alt="Kierownik logistyków">
            <h2>Joanna Trojanowska</h2>
            <h3>Kierownik logistyków</h3>
            <p>Od początku firmy z nami. Wie jak zorganizować pracę swoich logistyków aby wszystko było na czas</p>
            <p>telefon: 222333444</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba3.jpg" alt="Kadry">
            <h2>Ewa Nowak</h2>
            <h3>Księgowość i kadry</h3>
            <p>Od lat finanse powierzamy niezawodnej Ewie. Twardą ręką trzyma kasę i dba o wszystkich pracowników</p>
            <p>telefon: 333444555</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
    </main>
    <section id="quotes">
        <blockquote id="quote1">
            "Każdego dnia stawiam sobie nieosiągalne wyzwania i próbuję je wykonać"
            <p>- Krzysztof</p>
        </blockquote>
        <blockquote id="quote2">
            "Nie bój się porażek, im więcej ich rozwiążesz, tym szybciej osiągniesz cel"
            <p>- Joanna</p>
        </blockquote>
        <blockquote id="quote3">
            "Niezadowolony pracownik jest dla mnie źródłem nauki"
            <p>- Ewa</p>
        </blockquote>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

  27. Etap 3: Styl CSS

    Kroki 27-38 · po tym etapie masz 30 z 37 kryteriów (pkt)

    Krok 27: Plik styl.css: krój Bookman Old Style

    Kryteria:

    R.4.1 Ustawiono domyślne formatowanie wszystkich selektorów (dla *): krój czcionki "Bookman Old Style", Serif - tylko taka kolejność jest poprawna

    ok. 1 min
    Polecenie z arkusza

    Domyślne formatowanie wszystkich selektorów: krój czcionki Bookman Old Style, w przypadku braku - Serif

    Selektor uniwersalny *. Nazwę kroju ze spacjami zapisuje się w cudzysłowie, a na końcu stoi rodzina zapasowa serif - klucz uznaje tylko tę kolejność.

    styl.css CSS nowy plik 
    * {
    font-family: "Bookman Old Style", serif;
}
    Podgląd strony po tym kroku (pracownicy.html)

  28. Krok 28: Oba banery

    Kryteria:

    R.4.4 Ustawiono wysokość obu banerów: 100px

    ok. 2 min
    Polecenie z arkusza

    Dla obu bloków banera: kolor tła DarkCyan, biały kolor czcionki, szerokość 50%, wysokość 100 px, odstępy między literami 15 px

    Wspólna klasa .banner łapie oba banery jedną regułą. Odstępy między literami to letter-spacing - stąd rozstrzelony napis „N a s z z e s p ó ł” z obrazu 2. Banery mają już szerokość 50%, ale stoją jeden pod drugim - to zmieni reguła układu.

    styl.css CSS zmienione: 7 linii 
    * {
    font-family: "Bookman Old Style", serif;
}
.banner {
    background-color: DarkCyan;
    color: white;
    width: 50%;
    height: 100px;
    letter-spacing: 15px;
}
    Podgląd strony po tym kroku (pracownicy.html)

  29. Krok 29: Stopka

    ok. 1 min
    Polecenie z arkusza

    Dla bloku stopki kolor tła DarkCyan, biały kolor czcionki

    Selektor znacznika footer.

    styl.css CSS zmienione: 4 linie 
    * {
    font-family: "Bookman Old Style", serif;
}
.banner {
    background-color: DarkCyan;
    color: white;
    width: 50%;
    height: 100px;
    letter-spacing: 15px;
}
footer {
    background-color: DarkCyan;
    color: white;
}
    Podgląd strony po tym kroku (pracownicy.html)

  30. Krok 30: Karta pracownicza: tło, szerokość i cień

    Kryteria:

    R.4.8 Ustawiono dla bloków kart pracowniczych cień bloku o przesunięciu w obu osiach 4px, rozmyciu 8px, kolorze DimGray, np. box-shadow: 4px 4px 8px DimGray;

    ok. 2 min
    Polecenie z arkusza

    Dla bloku karty pracowniczej: kolor tła Azure, szerokość 30%, marginesy zewnętrzne 1%, cień bloku o przesunięciu w obu osiach 4 px, rozmyciu 8 px, kolorze DimGray

    Cień bloku to box-shadow - wartości w kolejności z tabeli w arkuszu: przesunięcie poziome, pionowe, rozmycie, kolor (4px 4px 8px DimGray). Dodatnie przesunięcia kładą cień w prawo i w dół, jak na obrazie 2. Trzy karty po 30% plus marginesy 1% z obu stron to 96% szerokości - zmieszczą się obok siebie.

    styl.css CSS zmienione: 6 linii 
    * {
    font-family: "Bookman Old Style", serif;
}
.banner {
    background-color: DarkCyan;
    color: white;
    width: 50%;
    height: 100px;
    letter-spacing: 15px;
}
footer {
    background-color: DarkCyan;
    color: white;
}
.card {
    background-color: Azure;
    width: 30%;
    margin: 1%;
    box-shadow: 4px 4px 8px DimGray;
}
    Podgląd strony po tym kroku (pracownicy.html)

  31. Krok 31: Zdjęcia tylko w kartach

    ok. 1 min
    Polecenie z arkusza

    Jedynie dla obrazów w karcie pracowniczej: szerokość 100%

    „Jedynie” - samo img objęłoby też logo w banerze i rozciągnęło je na całą szerokość. Selektor potomka .card img trafia tylko w obrazy wewnątrz kart. Szerokość 100% to szerokość karty, wysokość dopasuje się sama w proporcji.

    styl.css CSS zmienione: 3 linie 
    * {
    font-family: "Bookman Old Style", serif;
}
.banner {
    background-color: DarkCyan;
    color: white;
    width: 50%;
    height: 100px;
    letter-spacing: 15px;
}
footer {
    background-color: DarkCyan;
    color: white;
}
.card {
    background-color: Azure;
    width: 30%;
    margin: 1%;
    box-shadow: 4px 4px 8px DimGray;
}
.card img {
    width: 100%;
}
    Podgląd strony po tym kroku (pracownicy.html)

  32. Krok 32: Akapity i nagłówki h2, h3

    ok. 1 min
    Polecenie z arkusza

    Dla paragrafu oraz nagłówków drugiego i trzeciego stopnia: marginesy zewnętrzne 15 px

    Trzy selektory po przecinku w jednej regule. Marginesy zewnętrzne to margin - odsuwają tekst od brzegów karty.

    styl.css CSS zmienione: 3 linie 
    * {
    font-family: "Bookman Old Style", serif;
}
.banner {
    background-color: DarkCyan;
    color: white;
    width: 50%;
    height: 100px;
    letter-spacing: 15px;
}
footer {
    background-color: DarkCyan;
    color: white;
}
.card {
    background-color: Azure;
    width: 30%;
    margin: 1%;
    box-shadow: 4px 4px 8px DimGray;
}
.card img {
    width: 100%;
}
p, h2, h3 {
    margin: 15px;
}
    Podgląd strony po tym kroku (pracownicy.html)

  33. Krok 33: Odnośniki: biały tekst

    Kryteria:

    R.4.3 Ustawiono biały kolor czcionki dla obu banerów, stopki oraz selektora a

    ok. 1 min
    Polecenie z arkusza

    Dla selektora odnośnika: biały kolor czcionki

    Uwaga w arkuszu i w kluczu: styl odnośnika wyłącznie selektorem znacznika a, nie klasą ani identyfikatorem. Biały tekst na razie ginie na tle karty - tło dostanie nagłówek h5 w następnym kroku. Banery, stopka i odnośniki mają już biały tekst (R.4.3).

    Typowe błędy

    Reguła .contact a albo #kontakt nie spełnia R.4.3, nawet jeśli tekst jest biały - klucz sprawdza selektor.

    styl.css CSS zmienione: 3 linie 
    * {
    font-family: "Bookman Old Style", serif;
}
.banner {
    background-color: DarkCyan;
    color: white;
    width: 50%;
    height: 100px;
    letter-spacing: 15px;
}
footer {
    background-color: DarkCyan;
    color: white;
}
.card {
    background-color: Azure;
    width: 30%;
    margin: 1%;
    box-shadow: 4px 4px 8px DimGray;
}
.card img {
    width: 100%;
}
p, h2, h3 {
    margin: 15px;
}
a {
    color: white;
}
    Podgląd strony po tym kroku (pracownicy.html)

  34. Krok 34: Nagłówek piątego stopnia: pasek „Kontakt”

    Kryteria: ,

    R.4.2 Ustawiono kolor tła DarkCyan dla obu banerów i stopki oraz Azure dla bloków kart pracowniczych i Teal dla nagłówka h5

    R.4.5 Ustawiono szerokość obu banerów 50% (width lub grid-template-columns lub flex), bloków kart pracowniczych 30%, nagłówka h5 100%, oraz jedynie obrazów w blokach kart pracowniczych 100%

    ok. 2 min
    Polecenie z arkusza

    Dla nagłówka piątego stopnia: kolor tła Teal, szerokość 100%, wyrównanie tekstu do środka, marginesy wewnętrzne górny i dolny 10 px, pozostałe 0

    padding z dwiema wartościami: pierwsza to góra i dół (10px), druga to lewo i prawo (0). Ta reguła zamyka kryteria kolorów tła (banery, stopka, karty, h5 - R.4.2) i szerokości (banery, karty, h5, zdjęcia w kartach - R.4.5).

    styl.css CSS zmienione: 6 linii 
    * {
    font-family: "Bookman Old Style", serif;
}
.banner {
    background-color: DarkCyan;
    color: white;
    width: 50%;
    height: 100px;
    letter-spacing: 15px;
}
footer {
    background-color: DarkCyan;
    color: white;
}
.card {
    background-color: Azure;
    width: 30%;
    margin: 1%;
    box-shadow: 4px 4px 8px DimGray;
}
.card img {
    width: 100%;
}
p, h2, h3 {
    margin: 15px;
}
a {
    color: white;
}
h5 {
    background-color: Teal;
    width: 100%;
    text-align: center;
    padding: 10px 0;
}
    Podgląd strony po tym kroku (pracownicy.html)

  35. Krok 35: Kursor na pasku „Kontakt”

    Kryteria:

    R.4.10 W momencie gdy kursor myszy znajdzie się na nagłówku h5 jego kolor tła zmienia się na LightSeaGreen

    ok. 1 min
    Polecenie z arkusza

    W momencie gdy kursor myszy znajdzie się na nagłówku piątego stopnia jego kolor tła zmienia się na LightSeaGreen (patrz obraz 2 – środkowa karta)

    Pseudoklasa :hover działa, dopóki kursor jest nad elementem. Najedź w podglądzie na „Kontakt” w dowolnej karcie - pasek jaśnieje jak w środkowej karcie na obrazie 2.

    styl.css CSS zmienione: 3 linie 
    * {
    font-family: "Bookman Old Style", serif;
}
.banner {
    background-color: DarkCyan;
    color: white;
    width: 50%;
    height: 100px;
    letter-spacing: 15px;
}
footer {
    background-color: DarkCyan;
    color: white;
}
.card {
    background-color: Azure;
    width: 30%;
    margin: 1%;
    box-shadow: 4px 4px 8px DimGray;
}
.card img {
    width: 100%;
}
p, h2, h3 {
    margin: 15px;
}
a {
    color: white;
}
h5 {
    background-color: Teal;
    width: 100%;
    text-align: center;
    padding: 10px 0;
}
h5:hover {
    background-color: LightSeaGreen;
}
    Podgląd strony po tym kroku (pracownicy.html)

  36. Krok 36: Blok cytatów

    Kryteria: , ,

    R.4.6 Ustawiono wyrównanie tekstu do środka dla nagłówka h5 i bloku cytatów

    R.4.7 Ustawiono marginesy wewnętrzne (padding) dla nagłówka h5 jedynie górny i dolny 10px, dla bloku cytatów jedynie górny i dolny 30px oraz zewnętrzne (margin) dla paragrafu, nagłówków h2 i h3 15px, dla bloków kart pracowniczych 1%

    R.4.9 Ustawiono dla obu banerów odstępy między literami 15px (letter-spacing) oraz dla bloku cytatów czcionkę pochyloną

    ok. 2 min
    Polecenie z arkusza

    Dla bloku cytatów: wyrównanie tekstu do środka, marginesy wewnętrzne górny i dolny 30 px, pozostałe 0, czcionka pochylona

    Selektor identyfikatora #quotes. Ten sam zapis dwóch wartości padding co przy h5. Pochylenie to font-style: italic. Spełnione są teraz kryteria wyrównania (h5 i cytaty - R.4.6), marginesów (R.4.7) oraz rozstrzelenia liter w banerach i kursywy cytatów (R.4.9).

    styl.css CSS zmienione: 5 linii 
    * {
    font-family: "Bookman Old Style", serif;
}
.banner {
    background-color: DarkCyan;
    color: white;
    width: 50%;
    height: 100px;
    letter-spacing: 15px;
}
footer {
    background-color: DarkCyan;
    color: white;
}
.card {
    background-color: Azure;
    width: 30%;
    margin: 1%;
    box-shadow: 4px 4px 8px DimGray;
}
.card img {
    width: 100%;
}
p, h2, h3 {
    margin: 15px;
}
a {
    color: white;
}
h5 {
    background-color: Teal;
    width: 100%;
    text-align: center;
    padding: 10px 0;
}
h5:hover {
    background-color: LightSeaGreen;
}
#quotes {
    text-align: center;
    padding: 30px 0;
    font-style: italic;
}
    Podgląd strony po tym kroku (pracownicy.html)

  37. Krok 37: Drugi i trzeci cytat ukryte

    Kryteria:

    R.5.2 W stanie początkowym wyświetlany jest tylko pierwszy cytat ("Każdego dnia…"), pozostałe są niewidoczne

    ok. 1 min
    Polecenie z arkusza

    Drugi i trzeci cytat jest usunięty (nie jest wyświetlany)

    „Usunięty” w sensie CSS to display: none - element jest w kodzie, ale nie zajmuje miejsca na stronie (tabela z display w arkuszu). Na starcie widać tylko pierwszy cytat, jak wymaga klucz (R.5.2) - sprawdzone w Chrome: display cytatów to block, none, none.

    styl.css CSS zmienione: 3 linie 
    * {
    font-family: "Bookman Old Style", serif;
}
.banner {
    background-color: DarkCyan;
    color: white;
    width: 50%;
    height: 100px;
    letter-spacing: 15px;
}
footer {
    background-color: DarkCyan;
    color: white;
}
.card {
    background-color: Azure;
    width: 30%;
    margin: 1%;
    box-shadow: 4px 4px 8px DimGray;
}
.card img {
    width: 100%;
}
p, h2, h3 {
    margin: 15px;
}
a {
    color: white;
}
h5 {
    background-color: Teal;
    width: 100%;
    text-align: center;
    padding: 10px 0;
}
h5:hover {
    background-color: LightSeaGreen;
}
#quotes {
    text-align: center;
    padding: 30px 0;
    font-style: italic;
}
#quote2, #quote3 {
    display: none;
}
    Podgląd strony po tym kroku (pracownicy.html)

  38. Krok 38: Układ bloków zgodny z obrazem 2

    Kryteria: ,

    R.3.1 Układ bloków po uruchomieniu strony w przeglądarce jest zgodny z obrazem 2 w arkuszu egzaminacyjnym, nie należy brać pod uwagę zawartości bloku głównego (prawidłowo zastosowano właściwości CSS decydujące o układzie strony, np. float i clear albo display flex albo grid)

    R.3.2 W bloku głównym zdefiniowano trzy bloki kart pracowniczych, umieszczone obok siebie zgodnie z obrazem 2

    ok. 3 min
    Polecenie z arkusza

    Podział strony na: dwa bloki banera obok siebie, poniżej blok główny, poniżej blok cytatu, na dole stopka. Zawartość bloku głównego: trzy bloki kart pracowniczych, umieszczone obok siebie.

    Dwie sprawy:

    • banery obok siebie - float: left przy szerokości 50% stawia drugi baner tuż za pierwszym; blok główny dostaje clear: both, żeby zaczął się dopiero pod banerami,
    • karty obok siebie - display: flex na <main> ustawia jego dzieci w rzędzie, a każda karta zachowuje swoją szerokość 30%.

    Blok cytatów i stopka nie potrzebują nic więcej - stoją pod blokiem głównym w kolejności z HTML-a (R.3.1, R.3.2).

    Typowe błędy

    Bez clear: both blok główny wsuwa się pod pływające banery i karty zachodzą na nagłówek - punkt za układ przepada.

    styl.css CSS zmienione: 7 linii 
    * {
    font-family: "Bookman Old Style", serif;
}
.banner {
    background-color: DarkCyan;
    color: white;
    width: 50%;
    height: 100px;
    letter-spacing: 15px;
}
footer {
    background-color: DarkCyan;
    color: white;
}
.card {
    background-color: Azure;
    width: 30%;
    margin: 1%;
    box-shadow: 4px 4px 8px DimGray;
}
.card img {
    width: 100%;
}
p, h2, h3 {
    margin: 15px;
}
a {
    color: white;
}
h5 {
    background-color: Teal;
    width: 100%;
    text-align: center;
    padding: 10px 0;
}
h5:hover {
    background-color: LightSeaGreen;
}
#quotes {
    text-align: center;
    padding: 30px 0;
    font-style: italic;
}
#quote2, #quote3 {
    display: none;
}
.banner {
    float: left;
}
main {
    clear: both;
    display: flex;
}
    Podgląd strony po tym kroku (pracownicy.html)

  39. Etap 4: JavaScript

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

    Krok 39: Zdarzenie kliknięcia w cytat

    Kryteria:

    R.3.4 Dla dowolnego cytatu zdefiniowano zdarzenie związane z jego kliknięciem , które uruchamia funkcję skryptu (atrybut onClick lub słuchacz zdarzenia click lub właściwość onclick obiektu DOM)

    ok. 2 min
    Polecenie z arkusza

    W momencie kliknięcia na cytat jest wywoływana funkcja JavaScript (arkusz opisuje ją w części o skrypcie).

    Kliknięcie to zdarzenie onclick (tabela 1 arkusza). Arkusz pozwala na „jedną funkcję parametrową”, więc każdy cytat wywołuje tę samą funkcję changeQuote ze swoim numerem. Funkcja stoi w <script> na końcu <body> i na razie jest pusta - kliknięcie niczego jeszcze nie zmienia.

    pracownicy.html HTML zmienione: 7 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header class="banner">
        <img src="logo.png" alt="logo firmy">
    </header>
    <header class="banner">
        <h1>Nasz zespół</h1>
    </header>
    <main>
        <article class="card">
            <img src="osoba1.jpg" alt="Dyrektor">
            <h2>Krzysztof Dobromilski</h2>
            <h3>Dyrektor</h3>
            <p>Firma logistyczna była jego marzeniem. Zrealizował je 10 lat temu. Nasza firma prosperuje dzięki Krzysztofowi</p>
            <p>telefon: 111222333</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba2.jpg" alt="Kierownik logistyków">
            <h2>Joanna Trojanowska</h2>
            <h3>Kierownik logistyków</h3>
            <p>Od początku firmy z nami. Wie jak zorganizować pracę swoich logistyków aby wszystko było na czas</p>
            <p>telefon: 222333444</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba3.jpg" alt="Kadry">
            <h2>Ewa Nowak</h2>
            <h3>Księgowość i kadry</h3>
            <p>Od lat finanse powierzamy niezawodnej Ewie. Twardą ręką trzyma kasę i dba o wszystkich pracowników</p>
            <p>telefon: 333444555</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
    </main>
    <section id="quotes">
        <blockquote id="quote1" onclick="changeQuote(1)">
            "Każdego dnia stawiam sobie nieosiągalne wyzwania i próbuję je wykonać"
            <p>- Krzysztof</p>
        </blockquote>
        <blockquote id="quote2" onclick="changeQuote(2)">
            "Nie bój się porażek, im więcej ich rozwiążesz, tym szybciej osiągniesz cel"
            <p>- Joanna</p>
        </blockquote>
        <blockquote id="quote3" onclick="changeQuote(3)">
            "Niezadowolony pracownik jest dla mnie źródłem nauki"
            <p>- Ewa</p>
        </blockquote>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
    <script>
        function changeQuote(number) {
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

  40. Krok 40: Kliknięcie w pierwszy cytat

    Kryteria: , ,

    R.5.1 Skrypt zapisano w języku JavaScript i zawiera on przynajmniej jedną instrukcję zapisaną zgodnie ze składnią

    R.5.3 Po kliknięciu na cytat jeżeli jest wyświetlony pierwszy cytat, zostaje on ukryty, a wyświetlony zostaje drugi cytat ("Nie bój się porażek...")

    R.5.6 Przynajmniej jedna czynność z R.5.3 do R.5.5 jest zrealizowana poprzez zmianę właściwości display lub visibility stylu CSS

    ok. 3 min
    Polecenie z arkusza

    Działanie funkcji dla kliknięcia w pierwszy cytat: Pierwszy cytat jest usuwany/ukryty. Drugi cytat jest uwidoczniony (blokowo)

    Funkcja dostaje numer klikniętego cytatu. Dla 1 ukrywa pierwszy cytat (style.display = "none") i pokazuje drugi - „blokowo”, czyli "block". Arkusz wymaga, żeby ukrywanie odbywało się przez zmianę właściwości CSS, a style.display to właśnie właściwość display elementu (R.5.6). Kliknij cytat Krzysztofa w podglądzie - pojawia się cytat Joanny.

    pracownicy.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header class="banner">
        <img src="logo.png" alt="logo firmy">
    </header>
    <header class="banner">
        <h1>Nasz zespół</h1>
    </header>
    <main>
        <article class="card">
            <img src="osoba1.jpg" alt="Dyrektor">
            <h2>Krzysztof Dobromilski</h2>
            <h3>Dyrektor</h3>
            <p>Firma logistyczna była jego marzeniem. Zrealizował je 10 lat temu. Nasza firma prosperuje dzięki Krzysztofowi</p>
            <p>telefon: 111222333</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba2.jpg" alt="Kierownik logistyków">
            <h2>Joanna Trojanowska</h2>
            <h3>Kierownik logistyków</h3>
            <p>Od początku firmy z nami. Wie jak zorganizować pracę swoich logistyków aby wszystko było na czas</p>
            <p>telefon: 222333444</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba3.jpg" alt="Kadry">
            <h2>Ewa Nowak</h2>
            <h3>Księgowość i kadry</h3>
            <p>Od lat finanse powierzamy niezawodnej Ewie. Twardą ręką trzyma kasę i dba o wszystkich pracowników</p>
            <p>telefon: 333444555</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
    </main>
    <section id="quotes">
        <blockquote id="quote1" onclick="changeQuote(1)">
            "Każdego dnia stawiam sobie nieosiągalne wyzwania i próbuję je wykonać"
            <p>- Krzysztof</p>
        </blockquote>
        <blockquote id="quote2" onclick="changeQuote(2)">
            "Nie bój się porażek, im więcej ich rozwiążesz, tym szybciej osiągniesz cel"
            <p>- Joanna</p>
        </blockquote>
        <blockquote id="quote3" onclick="changeQuote(3)">
            "Niezadowolony pracownik jest dla mnie źródłem nauki"
            <p>- Ewa</p>
        </blockquote>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
    <script>
        function changeQuote(number) {
            if (number == 1) {
                document.getElementById("quote1").style.display = "none";
                document.getElementById("quote2").style.display = "block";
            }
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

  41. Krok 41: Kliknięcie w drugi cytat

    Kryteria:

    R.5.4 Po kliknięciu na cytat jeżeli jest wyświetlony drugi cytat, zostaje on ukryty, a wyświetlony zostaje trzeci cytat ("Niezadowolony pracownik...")

    ok. 2 min
    Polecenie z arkusza

    Działanie funkcji dla kliknięcia w drugi cytat: Drugi cytat jest usuwany/ukryty. Trzeci cytat jest uwidoczniony (blokowo)

    Gałąź else if dla numeru 2: ukryj drugi, pokaż trzeci. Sprawdzone w Chrome: po dwóch kliknięciach widać tylko cytat Ewy.

    pracownicy.html HTML zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header class="banner">
        <img src="logo.png" alt="logo firmy">
    </header>
    <header class="banner">
        <h1>Nasz zespół</h1>
    </header>
    <main>
        <article class="card">
            <img src="osoba1.jpg" alt="Dyrektor">
            <h2>Krzysztof Dobromilski</h2>
            <h3>Dyrektor</h3>
            <p>Firma logistyczna była jego marzeniem. Zrealizował je 10 lat temu. Nasza firma prosperuje dzięki Krzysztofowi</p>
            <p>telefon: 111222333</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba2.jpg" alt="Kierownik logistyków">
            <h2>Joanna Trojanowska</h2>
            <h3>Kierownik logistyków</h3>
            <p>Od początku firmy z nami. Wie jak zorganizować pracę swoich logistyków aby wszystko było na czas</p>
            <p>telefon: 222333444</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba3.jpg" alt="Kadry">
            <h2>Ewa Nowak</h2>
            <h3>Księgowość i kadry</h3>
            <p>Od lat finanse powierzamy niezawodnej Ewie. Twardą ręką trzyma kasę i dba o wszystkich pracowników</p>
            <p>telefon: 333444555</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
    </main>
    <section id="quotes">
        <blockquote id="quote1" onclick="changeQuote(1)">
            "Każdego dnia stawiam sobie nieosiągalne wyzwania i próbuję je wykonać"
            <p>- Krzysztof</p>
        </blockquote>
        <blockquote id="quote2" onclick="changeQuote(2)">
            "Nie bój się porażek, im więcej ich rozwiążesz, tym szybciej osiągniesz cel"
            <p>- Joanna</p>
        </blockquote>
        <blockquote id="quote3" onclick="changeQuote(3)">
            "Niezadowolony pracownik jest dla mnie źródłem nauki"
            <p>- Ewa</p>
        </blockquote>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
    <script>
        function changeQuote(number) {
            if (number == 1) {
                document.getElementById("quote1").style.display = "none";
                document.getElementById("quote2").style.display = "block";
            } else if (number == 2) {
                document.getElementById("quote2").style.display = "none";
                document.getElementById("quote3").style.display = "block";
            }
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

  42. Krok 42: Kliknięcie w trzeci cytat: powrót do pierwszego

    Kryteria: ,

    R.5.5 Po kliknięciu na cytat jeżeli jest wyświetlony trzeci cytat, zostaje on ukryty, a wyświetlony zostaje pierwszy cytat

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

    ok. 2 min
    Polecenie z arkusza

    Działanie funkcji dla kliknięcia w trzeci cytat: Trzeci cytat jest usuwany/ukryty. Pierwszy cytat jest uwidoczniony (blokowo)

    Ostatnia gałąź else zamyka koło: trzeci cytat znika, wraca pierwszy. Test w Chrome - trzy kliknięcia w widoczny cytat: Joanna, Ewa, znowu Krzysztof. Nazwy w skrypcie mówią, do czego służą: funkcja changeQuote („zmień cytat”), parametr number, identyfikatory quote1 - quote3 (R.5.7).

    pracownicy.html HTML zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header class="banner">
        <img src="logo.png" alt="logo firmy">
    </header>
    <header class="banner">
        <h1>Nasz zespół</h1>
    </header>
    <main>
        <article class="card">
            <img src="osoba1.jpg" alt="Dyrektor">
            <h2>Krzysztof Dobromilski</h2>
            <h3>Dyrektor</h3>
            <p>Firma logistyczna była jego marzeniem. Zrealizował je 10 lat temu. Nasza firma prosperuje dzięki Krzysztofowi</p>
            <p>telefon: 111222333</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba2.jpg" alt="Kierownik logistyków">
            <h2>Joanna Trojanowska</h2>
            <h3>Kierownik logistyków</h3>
            <p>Od początku firmy z nami. Wie jak zorganizować pracę swoich logistyków aby wszystko było na czas</p>
            <p>telefon: 222333444</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba3.jpg" alt="Kadry">
            <h2>Ewa Nowak</h2>
            <h3>Księgowość i kadry</h3>
            <p>Od lat finanse powierzamy niezawodnej Ewie. Twardą ręką trzyma kasę i dba o wszystkich pracowników</p>
            <p>telefon: 333444555</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
    </main>
    <section id="quotes">
        <blockquote id="quote1" onclick="changeQuote(1)">
            "Każdego dnia stawiam sobie nieosiągalne wyzwania i próbuję je wykonać"
            <p>- Krzysztof</p>
        </blockquote>
        <blockquote id="quote2" onclick="changeQuote(2)">
            "Nie bój się porażek, im więcej ich rozwiążesz, tym szybciej osiągniesz cel"
            <p>- Joanna</p>
        </blockquote>
        <blockquote id="quote3" onclick="changeQuote(3)">
            "Niezadowolony pracownik jest dla mnie źródłem nauki"
            <p>- Ewa</p>
        </blockquote>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
    <script>
        function changeQuote(number) {
            if (number == 1) {
                document.getElementById("quote1").style.display = "none";
                document.getElementById("quote2").style.display = "block";
            } else if (number == 2) {
                document.getElementById("quote2").style.display = "none";
                document.getElementById("quote3").style.display = "block";
            } else {
                document.getElementById("quote3").style.display = "none";
                document.getElementById("quote1").style.display = "block";
            }
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

  43. Etap 5: Dobre praktyki (poza kluczem)

    Kroki 43-44 · po tym etapie masz 37 z 37 kryteriów (pkt)

    Krok 43: Zdarzenia w skrypcie i reszta z dzielenia

    ok. 3 min
    Polecenie z arkusza

    W momencie kliknięcia na cytat jest wywoływana funkcja JavaScript (arkusz opisuje ją w części o skrypcie).

    Dwie zmiany w tych samych liniach. addEventListener przypina obsługę kliknięcia w skrypcie, więc w HTML-u nie ma już atrybutów onclick. querySelectorAll zbiera cytaty do listy, a następny cytat wskazuje reszta z dzielenia: (index + 1) % quotes.length daje 1, 2 i 0 - po ostatnim wraca pierwszy bez osobnej gałęzi. Czwarty cytat wystarczy dopisać w HTML-u (i ukryć w CSS, jak drugi i trzeci) - skrypt się nie zmienia. Sprawdzone w Chrome tymi samymi trzema kliknięciami. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

    pracownicy.html HTML zmienione: 14 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header class="banner">
        <img src="logo.png" alt="logo firmy">
    </header>
    <header class="banner">
        <h1>Nasz zespół</h1>
    </header>
    <main>
        <article class="card">
            <img src="osoba1.jpg" alt="Dyrektor">
            <h2>Krzysztof Dobromilski</h2>
            <h3>Dyrektor</h3>
            <p>Firma logistyczna była jego marzeniem. Zrealizował je 10 lat temu. Nasza firma prosperuje dzięki Krzysztofowi</p>
            <p>telefon: 111222333</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba2.jpg" alt="Kierownik logistyków">
            <h2>Joanna Trojanowska</h2>
            <h3>Kierownik logistyków</h3>
            <p>Od początku firmy z nami. Wie jak zorganizować pracę swoich logistyków aby wszystko było na czas</p>
            <p>telefon: 222333444</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba3.jpg" alt="Kadry">
            <h2>Ewa Nowak</h2>
            <h3>Księgowość i kadry</h3>
            <p>Od lat finanse powierzamy niezawodnej Ewie. Twardą ręką trzyma kasę i dba o wszystkich pracowników</p>
            <p>telefon: 333444555</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
    </main>
    <section id="quotes">
        <blockquote id="quote1">
            "Każdego dnia stawiam sobie nieosiągalne wyzwania i próbuję je wykonać"
            <p>- Krzysztof</p>
        </blockquote>
        <blockquote id="quote2">
            "Nie bój się porażek, im więcej ich rozwiążesz, tym szybciej osiągniesz cel"
            <p>- Joanna</p>
        </blockquote>
        <blockquote id="quote3">
            "Niezadowolony pracownik jest dla mnie źródłem nauki"
            <p>- Ewa</p>
        </blockquote>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
    <script>
        const quotes = document.querySelectorAll("#quotes blockquote");

        function showNextQuote(index) {
            quotes[index].style.display = "none";
            quotes[(index + 1) % quotes.length].style.display = "block";
        }

        quotes.forEach(function (quote, index) {
            quote.addEventListener("click", function () { showNextQuote(index); });
        });
        /* Wersja z egzaminu: atrybut onclick="changeQuote(N)" w każdym cytacie
           i funkcja changeQuote z trzema gałęziami if / else if / else. */
    </script>
</body>
</html>
    Podgląd strony po tym kroku (pracownicy.html)

  44. Krok 44: Cytaty dostępne z klawiatury

    ok. 3 min
    Polecenie z arkusza

    W momencie kliknięcia na cytat jest wywoływana funkcja JavaScript (arkusz opisuje ją w części o skrypcie).

    Cytat nie jest przyciskiem, więc osoba bez myszy nie ma jak go „kliknąć”. Skrypt nadaje każdemu cytatowi tabIndex = 0 (da się do niego przejść klawiszem Tab) i obsługuje klawisz Enter zdarzeniem keydown - fokus przechodzi od razu na kolejny cytat. Dymek title podpowiada, co zrobić, a w CSS kursor nad cytatem zmienia się w rączkę (cursor: pointer), jak nad odnośnikiem. Sprawdzone w Chrome: trzy naciśnięcia Enter dają ten sam obieg co trzy kliknięcia. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

    pracownicy.html HTML zmienione: 8 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Nasz zespół</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header class="banner">
        <img src="logo.png" alt="logo firmy">
    </header>
    <header class="banner">
        <h1>Nasz zespół</h1>
    </header>
    <main>
        <article class="card">
            <img src="osoba1.jpg" alt="Dyrektor">
            <h2>Krzysztof Dobromilski</h2>
            <h3>Dyrektor</h3>
            <p>Firma logistyczna była jego marzeniem. Zrealizował je 10 lat temu. Nasza firma prosperuje dzięki Krzysztofowi</p>
            <p>telefon: 111222333</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba2.jpg" alt="Kierownik logistyków">
            <h2>Joanna Trojanowska</h2>
            <h3>Kierownik logistyków</h3>
            <p>Od początku firmy z nami. Wie jak zorganizować pracę swoich logistyków aby wszystko było na czas</p>
            <p>telefon: 222333444</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
        <article class="card">
            <img src="osoba3.jpg" alt="Kadry">
            <h2>Ewa Nowak</h2>
            <h3>Księgowość i kadry</h3>
            <p>Od lat finanse powierzamy niezawodnej Ewie. Twardą ręką trzyma kasę i dba o wszystkich pracowników</p>
            <p>telefon: 333444555</p>
            <h5><a href="mailto:[email protected]">Kontakt</a></h5>
        </article>
    </main>
    <section id="quotes">
        <blockquote id="quote1">
            "Każdego dnia stawiam sobie nieosiągalne wyzwania i próbuję je wykonać"
            <p>- Krzysztof</p>
        </blockquote>
        <blockquote id="quote2">
            "Nie bój się porażek, im więcej ich rozwiążesz, tym szybciej osiągniesz cel"
            <p>- Joanna</p>
        </blockquote>
        <blockquote id="quote3">
            "Niezadowolony pracownik jest dla mnie źródłem nauki"
            <p>- Ewa</p>
        </blockquote>
    </section>
    <footer>
        <p>Stronę wykonał: Bartosz Bryniarski</p>
    </footer>
    <script>
        const quotes = document.querySelectorAll("#quotes blockquote");

        function showNextQuote(index) {
            quotes[index].style.display = "none";
            quotes[(index + 1) % quotes.length].style.display = "block";
        }

        quotes.forEach(function (quote, index) {
            quote.tabIndex = 0;
            quote.title = "Kliknij albo naciśnij Enter, aby zobaczyć kolejny cytat";
            quote.addEventListener("click", function () { showNextQuote(index); });
            quote.addEventListener("keydown", function (event) {
                if (event.key == "Enter") {
                    showNextQuote(index);
                    quotes[(index + 1) % quotes.length].focus();
                }
            });
        });
        /* Wersja z egzaminu: atrybut onclick="changeQuote(N)" w każdym cytacie
           i funkcja changeQuote z trzema gałęziami if / else if / else. */
    </script>
</body>
</html>
    styl.css CSS zmienione: 3 linie 
    * {
    font-family: "Bookman Old Style", serif;
}
.banner {
    background-color: DarkCyan;
    color: white;
    width: 50%;
    height: 100px;
    letter-spacing: 15px;
}
footer {
    background-color: DarkCyan;
    color: white;
}
.card {
    background-color: Azure;
    width: 30%;
    margin: 1%;
    box-shadow: 4px 4px 8px DimGray;
}
.card img {
    width: 100%;
}
p, h2, h3 {
    margin: 15px;
}
a {
    color: white;
}
h5 {
    background-color: Teal;
    width: 100%;
    text-align: center;
    padding: 10px 0;
}
h5:hover {
    background-color: LightSeaGreen;
}
#quotes {
    text-align: center;
    padding: 30px 0;
    font-style: italic;
}
#quote2, #quote3 {
    display: none;
}
.banner {
    float: left;
}
main {
    clear: both;
    display: flex;
}
blockquote {
    cursor: pointer;
}
    Podgląd strony po tym kroku (pracownicy.html)

  45. Etap 6: Oddanie pracy

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

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

    ok. 5 min
    Polecenie z arkusza

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

    W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzana była strona.

    W folderze z numerem zdającego: import.png, kw1.jpg - kw4.jpg, kwerendy.txt, logo.png, osoba1.jpg - osoba3.jpg, pracownicy.html, przeglądarka.txt, styl.css. Po nagraniu płyty 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 44.

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.