EE.09-03-23.01-SGStyczeń 2023 · 29 kroków · ok. 72 min · 35 kryteriów z klucza

Rozwiązanie krok po kroku: Gazeta codzienna z rozwijanymi artykułami (Nowoczesny kod (flex, addEventListener))

To drugi sposób rozwiązania tego samego arkusza. Baza, zapytania, zrzuty i przeskalowane zdjęcie są takie same jak w wersji podstawowej, strona informacje.html wygląda i działa tak samo i spełnia każde kryterium klucza. Inna jest droga:

flexbox zamiast float: blok artykułów i stopka redakcyjna stoją w znaczniku <main>, który rozsuwa je do krawędzi (justify-content: space-between) - szerokości 70% i 20% zostają na blokach, tak jak zapisuje je klucz,
stopka redakcyjna to <aside> - treść obok głównej, a nie stopka strony,
zmienne CSS dla trzech kolorów z arkusza,
przyciski z type="button" i atrybutami aria-controls / aria-expanded - czytnik ekranu ogłasza, który artykuł przycisk otwiera i czy jest rozwinięty,
skrypt w pliku skrypt.js wczytywanym z defer, bez atrybutów onclick: jedna funkcja i nasłuchiwanie zdarzeń addEventListener na wszystkich przyciskach naraz - piąty przycisk z artykułem nie wymaga zmian w skrypcie.

To arkusz EE.09 ze stycznia 2023 - kwalifikacji formuły 2017, którą zastąpiła INF.03. Baza, zdjęcie i treści pochodzą z oryginalnego archiwum CKE zad3 (załącznik na stronie arkusza), zapytania i zrzuty są policzone na MariaDB 10.4, układ zmierzony, a skrypt klikany w przeglądarce Chrome.

Jak liczą się punkty. Klucz ma 35 kryteriów (R.1.1 - R.5.5), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 27 punktów. Klucz przyjmuje układ na float, flex albo grid (R.3.1) i obsługę kliknięcia atrybutem onclick albo słuchaczem zdarzenia (R.3.3).

Arkusz i pliki do pobrania Treść arkusza (PDF) Pobierz pliki rozwiązania (zip)

Etap 1: Baza danych
Kroki 1-7 · po tym etapie masz 6 z 35 kryteriów (pkt)

Krok 1: Folder zdającego i archiwum zad3
ok. 2 min
Polecenie z arkusza
Archiwum należy rozpakować. Na pulpicie konta Egzamin należy utworzyć folder. Jako nazwy folderu należy użyć numeru zdającego, którym został podpisany arkusz. Rozpakowane pliki należy umieścić w tym folderze. Po skończonej pracy wszystkie wyniki należy zapisać w tym folderze.
Na pulpicie tworzysz folder nazwany numerem PESEL - w tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora, Bartosz Bryniarski. Archiwum zad3.zip rozpakowujesz do tego folderu, podając hasło Gaz3t@Codzienn@! (wielkość liter, cyfra 3 zamiast „e” i dwa znaki @ mają znaczenie). W środku są trzy pliki: gazeta.sql (tabela do importu), obraz.jpg (zdjęcie redaktora) i tresci na stronie.txt (teksty artykułów).
Plik z treściami jest zapisany w starym kodowaniu Windows-1250. Notepad++ albo VS Code otwierają go czasem jako UTF-8 i zamiast „ą”, „ś” pokazują krzaki - wtedy w Notepad++ wybierz Kodowanie → Zestawy znaków → Środkowoeuropejski → Windows-1250 i dopiero potem kopiuj tekst do strony.
Typowe błędy
Teksty skopiowane z pliku otwartego w złym kodowaniu trafią na stronę z krzakami. Klucz wybacza drobne błędy literowe, ale „Szczepimy senior�w” w każdym tytule to już problem z czytelnością strony.
Krok 2: Pusta baza gazeta
ok. 2 min
Polecenie z arkusza
Za pomocą narzędzia phpMyAdmin wykonaj operacje na bazie danych: Utwórz bazę danych o nazwie gazeta
W XAMPP Control Panel klikasz Start przy Apache i MySQL, potem w przeglądarce otwierasz http://localhost/phpmyadmin. Nowa w lewym panelu, nazwa gazeta, porównywanie np. utf8_polish_ci (arkusz go nie narzuca), Utwórz. Tabelę doda import.
Krok 3: Import pliku gazeta.sql i zrzut import.jpg
Kryteria:
R.1.1 Wykonano import tabel do bazy danych gazeta , czynność udokumentowano plikiem o nazwie import w formacie JPEG
ok. 3 min
Polecenie z arkusza
Do bazy gazeta zaimportuj tabele z pliku gazeta.sql z rozpakowanego archiwum. Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie JPEG 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
Zaznacz bazę gazeta w lewym panelu, karta Import, Wybierz plik → gazeta.sql, Wykonaj. Plik tworzy tabelę ogloszenia (sześć kolumn, jak na obrazie 1) i dodaje do niej 5 ogłoszeń. Po komunikacie o sukcesie kliknij tabelę ogloszenia (karta Przeglądaj) i zrób zrzut całego ekranu z paskiem zadań: import.jpg.
Uwaga na formaty w tym arkuszu: zrzut importu to JPEG, a zrzuty zapytań - PNG (odwrotnie niż w wielu innych arkuszach).
Typowe błędy
Zrzut zapisany jako import.png albo nazwany egzamin nie spełnia R.1.1. Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Podgląd strony po tym kroku
Krok 4: Zapytanie 1: id i tytuł posortowane po tytule
Kryteria: ,
R.1.2 Zapisano plik tekstowy o nazwie kwerendy zawierający co najmniej jedno zapytanie SQL, wynikające z treści zadania
R.1.3 Utworzono zapytanie 1 wybierające jedynie pola id i tytul z tabeli ogloszenia posortowane rosnąco według pola tytul. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT id, tytul FROM ogloszenia ORDER BY tytul; (opcjonalnie ASC) oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczne jest dokładnie 5 rekordów kolejno o id: 3, 1, 5, 2, 4 z odpowiadającymi tytułami
ok. 3 min
Polecenie z arkusza
Wykonaj zapytania SQL działające na bazie gazeta. Zapytania zapisz w pliku kwerendy.txt. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie PNG i nadaj im nazwy kw1, kw2, kw3, kw4. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań. Zapytanie 1: wybierające jedynie pola id i tytul z tabeli ogloszenia posortowane rosnąco według pola tytul
Zaznacz bazę gazeta i otwórz kartę SQL. Zapytanie klauzula po klauzuli:
SELECT id, tytul - tylko dwie kolumny z arkusza („jedynie” wyklucza SELECT *),
FROM ogloszenia - nazwa tabeli bez polskich liter, tak jak w bazie,
ORDER BY tytul - sortowanie po tytule; bez słowa DESC kolejność jest rosnąca (alfabetyczna). Można dopisać ASC, wynik będzie ten sam.
Wynik: 5 wierszy w kolejności id 3, 1, 5, 2, 4 - Buick, Daniel Craig, Imagine Dragons, Selekcja, Tytus - dokładnie taki, jakiego wymaga klucz. Zapytanie kopiujesz do pliku kwerendy.txt w folderze zdającego (wystarczy w nim jedno zapytanie, żeby zaliczyć R.1.2), a cały ekran zapisujesz jako kw1.png.
Typowe błędy
Plik z zapytaniami nazywa się kwerendy.txt - kwerendy.sql albo zapytania.txt to strata punktu R.1.2.
kwerendy.txt Tekst nowy plik
-- Zapytanie 1 SELECT id, tytul FROM ogloszenia ORDER BY tytul;
Podgląd strony po tym kroku
Krok 5: Zapytanie 2: kategoria 1 i podkategoria 13
Kryteria:
R.1.4 Utworzono zapytanie 2 wybierające jedynie pole tytul z tabeli ogloszenia z kategorii 1 oraz podkategorii 13. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT tytul FROM ogloszenia WHERE kategoria = 1 AND podkategoria = 13; oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczne są jedynie tytuły Selekcja, Buick
ok. 2 min
Polecenie z arkusza
Zapytanie 2: wybierające jedynie pole tytul z tabeli ogloszenia z kategorii 1 oraz podkategorii 13
SELECT tytul FROM ogloszenia - jedna kolumna,
WHERE kategoria = 1 AND podkategoria = 13 - oba warunki naraz, więc AND. Liczby bez apostrofów - kolumny są liczbowe.
Wynik: Selekcja i Buick - dokładnie te tytuły wymienia klucz. Zrzut: kw2.png.
Typowe błędy
OR zamiast AND zwróci wszystkie ogłoszenia z kategorii 1 (cztery tytuły), bo warunek „lub” wystarczy spełnić jednym polem.
kwerendy.txt Tekst zmienione: 3 linie
-- Zapytanie 1 SELECT id, tytul FROM ogloszenia ORDER BY tytul; -- Zapytanie 2 SELECT tytul FROM ogloszenia WHERE kategoria = 1 AND podkategoria = 13;
Podgląd strony po tym kroku
Krok 6: Zapytanie 3: zmiana podkategorii rekordu 5
Kryteria:
R.1.5 Utworzono zapytanie 3 aktualizujące dane w tabeli ogloszenia w rekordzie o id równym 5, pole podkategoria przyjmuje wartość 1. W pliku z kwerendami lub na zrzucie istnieje zapis np.: UPDATE ogloszenia SET podkategoria = 1 WHERE id = 5; oraz wynik działania zapytania udokumentowano zrzutem, wskazującym na poprawną aktualizację pola
ok. 2 min
Polecenie z arkusza
Zapytanie 3: aktualizujące dane w rekordzie o id równym 5 w tabeli ogłoszenia: pole podkategoria przyjmuje nową wartość równą 1
UPDATE ogloszenia - zmiana danych w tabeli; arkusz pisze tu „ogłoszenia” z polską literą, ale tabela w bazie nazywa się ogloszenia - tak wpisujesz,
SET podkategoria = 1 - nowa wartość pola,
WHERE id = 5 - tylko ten jeden rekord.
phpMyAdmin odpowiada „1 wiersz zmieniony”. Na zrzucie kw3.png najlepiej widać skutek, gdy po zapytaniu otworzysz kartę Przeglądaj: ogłoszenie 5 (Imagine Dragons) ma teraz podkategorię 1 zamiast 0.
Typowe błędy
UPDATE bez WHERE zmieni podkategorię we wszystkich pięciu ogłoszeniach - phpMyAdmin pyta wtedy o potwierdzenie, ale tylko gdy zapytanie wpisane jest w kartę SQL tabeli, nie bazy.
kwerendy.txt Tekst zmienione: 3 linie
-- Zapytanie 1 SELECT id, tytul FROM ogloszenia ORDER BY tytul; -- Zapytanie 2 SELECT tytul FROM ogloszenia WHERE kategoria = 1 AND podkategoria = 13; -- Zapytanie 3 UPDATE ogloszenia SET podkategoria = 1 WHERE id = 5;
Podgląd strony po tym kroku
Krok 7: Zapytanie 4: usunięcie kolumny uzytkownik_id
Kryteria:
R.1.6 Utworzono zapytanie 4 usuwające kolumnę uzytkownik_id z tabeli ogloszenia . W pliku z kwerendami lub na zrzucie istnieje zapis np.: ALTER TABLE ogloszenia DROP COLUMN uzytkownik_id; (możliwe bez COLUMN) oraz wynik działania zapytania udokumentowano zrzutem wskazującym na poprawne usunięcie kolumny
ok. 2 min
Polecenie z arkusza
Zapytanie 4: usuwające kolumnę uzytkownik_id z tabeli ogloszenia
Zmiana struktury tabeli to ALTER TABLE, a usunięcie kolumny - klauzula DROP COLUMN z nazwą kolumny (słowo COLUMN można pominąć, klucz przyjmuje obie formy). Po zapytaniu karta Struktura pokazuje już tylko pięć kolumn: id, kategoria, podkategoria, tytul, tresc - to jest dowód na zrzucie kw4.png. Plik kwerendy.txt ma komplet czterech zapytań.
Typowe błędy
DELETE usuwa wiersze, nie kolumny - DELETE uzytkownik_id FROM ogloszenia kończy się błędem składni. Kolumny zmienia tylko ALTER TABLE.
kwerendy.txt Tekst zmienione: 3 linie
-- Zapytanie 1 SELECT id, tytul FROM ogloszenia ORDER BY tytul; -- Zapytanie 2 SELECT tytul FROM ogloszenia WHERE kategoria = 1 AND podkategoria = 13; -- Zapytanie 3 UPDATE ogloszenia SET podkategoria = 1 WHERE id = 5; -- Zapytanie 4 ALTER TABLE ogloszenia DROP COLUMN uzytkownik_id;
Podgląd strony po tym kroku
Etap 2: Grafika i strona HTML
Kroki 8-17 · po tym etapie masz 18 z 35 kryteriów (pkt)

Krok 8: Grafika: dokładnie 250 × 250 px
Kryteria:
R.2.1 Plik obraz .jpg przeskalowano dokładnie do rozmiarów 250 px na 250 px
ok. 2 min
Polecenie z arkusza
Plik obraz.jpg, wypakowany z archiwum, należy przeskalować dokładnie do rozmiarów 250 px na 250 px
Oryginał ma 307 × 307 px - jest kwadratem, więc przeskalowanie do 250 × 250 nie zniekształca zdjęcia. W GIMP-ie Obraz → Skaluj obraz, szerokość 250, wysokość 250 (przy zamkniętym łańcuchu druga wartość wpisze się sama), potem Plik → Nadpisz obraz.jpg - zwykłe Zapisz w GIMP-ie zapisuje format .xcf.
Typowe błędy
Zmiana samego rozmiaru wyświetlania w CSS nie zmienia pliku - klucz sprawdza wymiary pliku obraz.jpg.
Podgląd strony po tym kroku
Krok 9: Szkielet informacje.html: HTML5, kodowanie, język, tytuł, styl
Kryteria: , , ,
R.2.2 Witrynę internetową zapisano w pliku o nazwie informacje.html
R.2.3 Zastosowano deklarację języka HTML5, jawnie zapisany standard kodowania polskich znaków oraz zadeklarowano język witryny (np. <html lang = 'pl'>)
R.2.4 Nadano tytuł stronie: "Gazeta"
R.3.4 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl3.css , formatowanie 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. 3 min
Polecenie z arkusza
Składa się ze strony o nazwie informacje.html. Zapisana w języku HTML5. Jawnie zastosowany właściwy standard kodowania polskich znaków. Zadeklarowany język zawartości witryny: polski. Tytuł strony widoczny na karcie przeglądarki: „Gazeta”. Arkusz stylów w pliku o nazwie styl3.css prawidłowo połączony z kodem strony
Pięć wymagań nagłówka, które w każdej stronie wyglądają tak samo, w jednym kroku:
<!DOCTYPE html> - HTML5, <html lang="pl"> - język polski, <meta charset="UTF-8"> jako pierwszy element <head> (R.2.3),
<title>Gazeta</title> (R.2.4),
<link rel="stylesheet" href="styl3.css"> - całe formatowanie z tego jednego pliku (R.3.4).
Doszedł <meta name="viewport">: telefon pokazuje stronę w szerokości ekranu, zamiast pomniejszać widok komputerowy. Arkusz tego nie wymaga, a klucz nie ocenia.
Typowe błędy
Atrybut style w którymkolwiek znaczniku albo blok <style> odbiera R.3.4.
informacje.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>Gazeta</title> <link rel="stylesheet" href="styl3.css"> </head> <body> </body> </html>
Podgląd strony po tym kroku (informacje.html)
Krok 10: Bloki: baner, a pod nim main z artykułami i stopką redakcyjną
Kryteria:
R.2.5 Wygląd strony zdefiniowano dzieląc ją na bloki: baner, artykuły i stopka redakcyjna. Zastosowano znaczniki sekcji
ok. 2 min
Polecenie z arkusza
Podział strony na: blok banera, poniżej obok siebie blok artykułów i stopki redakcyjnej. 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 2
<header> z nagłówkiem <h1>Gazeta codzienna</h1> - baner,
<main> - główna treść strony; to on ustawi dwa bloki obok siebie, więc oba muszą być jego dziećmi,
<section id="articles"> - blok artykułów,
<aside id="editorial"> - stopka redakcyjna. W gazecie to ramka z redaktorem i zespołem obok tekstów; <aside> oznacza właśnie treść poboczną względem głównej. <footer> byłby stopką całej strony, a ta ramka stoi z boku (obraz 2).
Wszystkie cztery to znaczniki sekcji HTML5 (R.2.5).
informacje.html HTML zmienione: 9 linii
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Gazeta</title> <link rel="stylesheet" href="styl3.css"> </head> <body> <header> <h1>Gazeta codzienna</h1> </header> <main> <section id="articles"> </section> <aside id="editorial"> </aside> </main> </body> </html>
Podgląd strony po tym kroku (informacje.html)

Krok 11: Przycisk i blok pierwszego artykułu

ok. 3 min

Polecenie z arkusza

Przycisk o treści: „Sekcja wiadomości z kraju”, jego wciśnięcie powoduje uruchomienie funkcji w skrypcie. Blok pierwszego artykułu, a w nim: Tytuł „Szczepimy seniorów” zapisany nagłówkiem drugiego stopnia. Treść „Od piątku...” zapisana w paragrafie (akapicie)

Treści kopiujesz z pliku tresci na stronie.txt (zapisanego w Windows-1250 - otwórz go w tym kodowaniu, inaczej polskie litery będą krzakami).

<button type="button"> - przycisk, który niczego nie wysyła. Bez type przycisk w formularzu domyślnie go wysyła; tu formularza nie ma, ale jawny typ chroni przed niespodzianką, gdy ktoś później obejmie blok formularzem,
aria-controls="article1" - mówi technologiom asystującym, którym blokiem steruje przycisk; skrypt odczyta z tego atrybutu identyfikator artykułu,
aria-expanded="false" - artykuł jest zwinięty; skrypt zmieni to na true przy otwarciu,
<article id="article1"> z tytułem w <h2> i pełną treścią w <p> zaraz po przycisku - pokaże się pod nim.

informacje.html HTML zmienione: 5 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <main>
        <section id="articles">
            <button type="button" aria-controls="article1" aria-expanded="false">Sekcja wiadomości z kraju</button>
            <article id="article1">
                <h2>Szczepimy seniorów</h2>
                <p>Od piątku osoby powyżej 80 lat mogą zarejestrować się na szczepienie przeciw COVID-19. Do wyboru mają niemal sześć tysięcy przychodni, w których od 25 stycznia będą odbywać się szczepienia. Termin można zarezerwować telefonicznie, przez internet lub w punkcie szczepień. Na szczepienie przeciw COVID-19 od piątku mogą się umawiać seniorzy powyżej 80. roku życia, a tydzień później ruszą zapisy dla osób, które ukończyły 70 lat. Szczepienia dla seniorów rozpoczną się 25 stycznia.</p>
            </article>
        </section>
        <aside id="editorial">
        </aside>
    </main>
</body>
</html>

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

Krok 12: Przycisk i blok drugiego artykułu

ok. 2 min

Polecenie z arkusza

Przycisk o treści: „Sekcja sportowa” (patrz obraz 3a), jego wciśnięcie powoduje uruchomienie funkcji w skrypcie. Blok drugiego artykułu, a w nim: Tytuł „Stoch i Kubacki ...” zapisany nagłówkiem drugiego stopnia. Treść „W środę ...” zapisana w paragrafie

Ten sam wzór: przycisk z aria-controls="article2" i blok artykułu o skokach narciarskich.

informacje.html HTML zmienione: 5 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <main>
        <section id="articles">
            <button type="button" aria-controls="article1" aria-expanded="false">Sekcja wiadomości z kraju</button>
            <article id="article1">
                <h2>Szczepimy seniorów</h2>
                <p>Od piątku osoby powyżej 80 lat mogą zarejestrować się na szczepienie przeciw COVID-19. Do wyboru mają niemal sześć tysięcy przychodni, w których od 25 stycznia będą odbywać się szczepienia. Termin można zarezerwować telefonicznie, przez internet lub w punkcie szczepień. Na szczepienie przeciw COVID-19 od piątku mogą się umawiać seniorzy powyżej 80. roku życia, a tydzień później ruszą zapisy dla osób, które ukończyły 70 lat. Szczepienia dla seniorów rozpoczną się 25 stycznia.</p>
            </article>
            <button type="button" aria-controls="article2" aria-expanded="false">Sekcja sportowa</button>
            <article id="article2">
                <h2>Stoch i Kubacki na podium w Bischofshofen</h2>
                <p>W środę w Bischofshofen odbędzie się ostatni konkurs 69. Turnieju Czterech Skoczni. Po trzech zawodach prowadzi Kamil Stoch z dużą przewagą nad Dawidem Kubackim i Norwegiem Halvorem Egnerem Granerudem. Skocznia im. Paula Ausserleitnera w Bischofshofen, gdzie tradycyjnie kończy się TCS, jest szczęśliwa dla reprezentantów Polski, którzy wygrali tu trzy z ostatnich czterech konkursów - Stoch w 2017 i 2018, a Kubacki - w ubiegłym roku.</p>
            </article>
        </section>
        <aside id="editorial">
        </aside>
    </main>
</body>
</html>

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

Krok 13: Przycisk i blok trzeciego artykułu

ok. 2 min

Polecenie z arkusza

Przycisk o treści: „Sekcja aktualności” (patrz obraz 3b), jego wciśnięcie powoduje uruchomienie funkcji w skrypcie. Blok trzeciego artykułu, a w nim: Tytuł „Dzień Babci 2021 ...” zapisany nagłówkiem drugiego stopnia. Treść „Dzień Babci to ...” zapisana w paragrafie

Przycisk z aria-controls="article3" i artykuł o Dniu Babci z pełnym tytułem z pliku.

informacje.html HTML zmienione: 5 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <main>
        <section id="articles">
            <button type="button" aria-controls="article1" aria-expanded="false">Sekcja wiadomości z kraju</button>
            <article id="article1">
                <h2>Szczepimy seniorów</h2>
                <p>Od piątku osoby powyżej 80 lat mogą zarejestrować się na szczepienie przeciw COVID-19. Do wyboru mają niemal sześć tysięcy przychodni, w których od 25 stycznia będą odbywać się szczepienia. Termin można zarezerwować telefonicznie, przez internet lub w punkcie szczepień. Na szczepienie przeciw COVID-19 od piątku mogą się umawiać seniorzy powyżej 80. roku życia, a tydzień później ruszą zapisy dla osób, które ukończyły 70 lat. Szczepienia dla seniorów rozpoczną się 25 stycznia.</p>
            </article>
            <button type="button" aria-controls="article2" aria-expanded="false">Sekcja sportowa</button>
            <article id="article2">
                <h2>Stoch i Kubacki na podium w Bischofshofen</h2>
                <p>W środę w Bischofshofen odbędzie się ostatni konkurs 69. Turnieju Czterech Skoczni. Po trzech zawodach prowadzi Kamil Stoch z dużą przewagą nad Dawidem Kubackim i Norwegiem Halvorem Egnerem Granerudem. Skocznia im. Paula Ausserleitnera w Bischofshofen, gdzie tradycyjnie kończy się TCS, jest szczęśliwa dla reprezentantów Polski, którzy wygrali tu trzy z ostatnich czterech konkursów - Stoch w 2017 i 2018, a Kubacki - w ubiegłym roku.</p>
            </article>
            <button type="button" aria-controls="article3" aria-expanded="false">Sekcja aktualności</button>
            <article id="article3">
                <h2>Dzień Babci 2021. Pomysły na prezent i historia święta w Polsce</h2>
                <p>Dzień Babci to wyjątkowe święto, w którym zewsząd płyną życzenia skierowane właśnie w stronę babć. Najmłodsi własnoręcznie lub z drobną pomocą wykonują piękne laurki, a nieco starsze wnuczęta z pewnością mają przygotowany niejeden prezent. Tego dnia w szkołach często przygotowywane są także różne przedstawienia, a oryginalne scenariusze często wywołują u dziadków łzy wzruszenia.</p>
            </article>
        </section>
        <aside id="editorial">
        </aside>
    </main>
</body>
</html>

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

Krok 14: Przycisk i blok czwartego artykułu

Kryteria:

R.2.10 W bloku artykułów umieszczono cztery przyciski

ok. 2 min

Polecenie z arkusza

Przycisk o treści: „Sekcja ogłoszeń”, jego wciśnięcie powoduje uruchomienie funkcji w skrypcie. Blok czwartego artykułu, a w nim: Tytuł „Zaginione / znalezione” zapisany nagłówkiem drugiego stopnia. Treść „W Oławie ...” zapisana w paragrafie

Czwarty przycisk (R.2.10) z aria-controls="article4" i ogłoszenie o znalezionym kotku. Blok artykułów ma komplet: cztery pary przycisk - artykuł.

informacje.html HTML zmienione: 5 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <main>
        <section id="articles">
            <button type="button" aria-controls="article1" aria-expanded="false">Sekcja wiadomości z kraju</button>
            <article id="article1">
                <h2>Szczepimy seniorów</h2>
                <p>Od piątku osoby powyżej 80 lat mogą zarejestrować się na szczepienie przeciw COVID-19. Do wyboru mają niemal sześć tysięcy przychodni, w których od 25 stycznia będą odbywać się szczepienia. Termin można zarezerwować telefonicznie, przez internet lub w punkcie szczepień. Na szczepienie przeciw COVID-19 od piątku mogą się umawiać seniorzy powyżej 80. roku życia, a tydzień później ruszą zapisy dla osób, które ukończyły 70 lat. Szczepienia dla seniorów rozpoczną się 25 stycznia.</p>
            </article>
            <button type="button" aria-controls="article2" aria-expanded="false">Sekcja sportowa</button>
            <article id="article2">
                <h2>Stoch i Kubacki na podium w Bischofshofen</h2>
                <p>W środę w Bischofshofen odbędzie się ostatni konkurs 69. Turnieju Czterech Skoczni. Po trzech zawodach prowadzi Kamil Stoch z dużą przewagą nad Dawidem Kubackim i Norwegiem Halvorem Egnerem Granerudem. Skocznia im. Paula Ausserleitnera w Bischofshofen, gdzie tradycyjnie kończy się TCS, jest szczęśliwa dla reprezentantów Polski, którzy wygrali tu trzy z ostatnich czterech konkursów - Stoch w 2017 i 2018, a Kubacki - w ubiegłym roku.</p>
            </article>
            <button type="button" aria-controls="article3" aria-expanded="false">Sekcja aktualności</button>
            <article id="article3">
                <h2>Dzień Babci 2021. Pomysły na prezent i historia święta w Polsce</h2>
                <p>Dzień Babci to wyjątkowe święto, w którym zewsząd płyną życzenia skierowane właśnie w stronę babć. Najmłodsi własnoręcznie lub z drobną pomocą wykonują piękne laurki, a nieco starsze wnuczęta z pewnością mają przygotowany niejeden prezent. Tego dnia w szkołach często przygotowywane są także różne przedstawienia, a oryginalne scenariusze często wywołują u dziadków łzy wzruszenia.</p>
            </article>
            <button type="button" aria-controls="article4" aria-expanded="false">Sekcja ogłoszeń</button>
            <article id="article4">
                <h2>Zaginione / znalezione</h2>
                <p>W Oławie, na ulicy Lipowej w piątek wieczorem znalazłam czarnego małego kotka. Jest zadbany i ufny, ma czerwoną obróżkę. Telefon 600100200.</p>
            </article>
        </section>
        <aside id="editorial">
        </aside>
    </main>
</body>
</html>

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

Krok 15: Stopka redakcyjna: cytat, zdjęcie, redaktor

Kryteria: ,

R.2.8 W bloku stopki redakcyjnej umieszczono obraz o nazwie obraz.jpg z tekstem alternatywnym „redaktor naczelny"

R.2.9 W bloku stopki redakcyjnej umieszczono cytat, zastosowano jeden ze znaczników: <blockquote>, <q> lub <cite>

ok. 3 min

Polecenie z arkusza

Zawartość bloku stopki redakcyjnej: Cytat o treści „Pierwszym obowiązkiem ...”, cytat umieszczony w znaczniku przeznaczonym dla cytatów. Obraz o nazwie obraz.jpg i tekście alternatywnym „redaktor naczelny”. Nagłówek piątego stopnia o treści: „Jan Nowak Redaktor naczelny gazety codziennej” podzielony na trzy wiersze, zgodnie z obrazem 2

<blockquote> - samodzielny cytat (R.2.9),
<img> z tekstem alternatywnym (R.2.8) i atrybutami width="250" height="250" - przeglądarka zna proporcje zdjęcia, zanim plik się pobierze, i od razu rezerwuje na nie miejsce; tekst pod spodem nie „skacze” przy wczytywaniu. Rozmiar wyświetlania i tak ustala CSS,
<h5> z dwoma <br> - jeden nagłówek w trzech wierszach.

informacje.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>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <main>
        <section id="articles">
            <button type="button" aria-controls="article1" aria-expanded="false">Sekcja wiadomości z kraju</button>
            <article id="article1">
                <h2>Szczepimy seniorów</h2>
                <p>Od piątku osoby powyżej 80 lat mogą zarejestrować się na szczepienie przeciw COVID-19. Do wyboru mają niemal sześć tysięcy przychodni, w których od 25 stycznia będą odbywać się szczepienia. Termin można zarezerwować telefonicznie, przez internet lub w punkcie szczepień. Na szczepienie przeciw COVID-19 od piątku mogą się umawiać seniorzy powyżej 80. roku życia, a tydzień później ruszą zapisy dla osób, które ukończyły 70 lat. Szczepienia dla seniorów rozpoczną się 25 stycznia.</p>
            </article>
            <button type="button" aria-controls="article2" aria-expanded="false">Sekcja sportowa</button>
            <article id="article2">
                <h2>Stoch i Kubacki na podium w Bischofshofen</h2>
                <p>W środę w Bischofshofen odbędzie się ostatni konkurs 69. Turnieju Czterech Skoczni. Po trzech zawodach prowadzi Kamil Stoch z dużą przewagą nad Dawidem Kubackim i Norwegiem Halvorem Egnerem Granerudem. Skocznia im. Paula Ausserleitnera w Bischofshofen, gdzie tradycyjnie kończy się TCS, jest szczęśliwa dla reprezentantów Polski, którzy wygrali tu trzy z ostatnich czterech konkursów - Stoch w 2017 i 2018, a Kubacki - w ubiegłym roku.</p>
            </article>
            <button type="button" aria-controls="article3" aria-expanded="false">Sekcja aktualności</button>
            <article id="article3">
                <h2>Dzień Babci 2021. Pomysły na prezent i historia święta w Polsce</h2>
                <p>Dzień Babci to wyjątkowe święto, w którym zewsząd płyną życzenia skierowane właśnie w stronę babć. Najmłodsi własnoręcznie lub z drobną pomocą wykonują piękne laurki, a nieco starsze wnuczęta z pewnością mają przygotowany niejeden prezent. Tego dnia w szkołach często przygotowywane są także różne przedstawienia, a oryginalne scenariusze często wywołują u dziadków łzy wzruszenia.</p>
            </article>
            <button type="button" aria-controls="article4" aria-expanded="false">Sekcja ogłoszeń</button>
            <article id="article4">
                <h2>Zaginione / znalezione</h2>
                <p>W Oławie, na ulicy Lipowej w piątek wieczorem znalazłam czarnego małego kotka. Jest zadbany i ufny, ma czerwoną obróżkę. Telefon 600100200.</p>
            </article>
        </section>
        <aside id="editorial">
            <blockquote>Pierwszym obowiązkiem dziennikarza jest nie nudzić. Drugim: nie bać się. Trzecim: niczego nie wyrzucać.</blockquote>
            <img src="obraz.jpg" alt="redaktor naczelny" width="250" height="250">
            <h5>Jan Nowak<br>Redaktor naczelny<br>gazety codziennej</h5>
        </aside>
    </main>
</body>
</html>

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

Krok 16: Nagłówek „Zespół” i tabela

Kryteria: ,

R.2.6 W bloku banera zapisano nagłówek h1: "Gazeta codzienna", w bloku artykułów przynajmniej jeden h2, w bloku stopki redakcyjnej h5: "Jan Nowak Redaktor naczelny gazety codziennej" i h3: „Zespół" oraz przynajmniej jeden paragraf

R.2.7 W bloku stopki redakcyjnej umieszczono tabelę o czterech wierszach i dwóch kolumnach, zastosowano znaczniki <table>, <tr>, <td>

ok. 2 min

Polecenie z arkusza

Nagłówek trzeciego stopnia o treści „Zespół”. Tabela o czterech wierszach i dwóch kolumnach zgodna z obrazem 2. O treściach: Ewa, wiadomości z kraju; Krzysiek, sport; Ewelina, aktualności; Robert, ogłoszenia.

<h3> i tabela <table> / <tr> / <td> - cztery wiersze po dwie komórki (R.2.7). Strona ma już wszystkie nagłówki i akapity z R.2.6.

Komórki z imionami mogłyby być nagłówkami wierszy (<th scope="row">) - semantycznie to trafniejsze, ale klucz wymienia wprost <td>, a <th> dostaje domyślnie pogrubienie, którego nie ma na obrazie 2. Zostają <td>.

informacje.html HTML zmienione: 19 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <main>
        <section id="articles">
            <button type="button" aria-controls="article1" aria-expanded="false">Sekcja wiadomości z kraju</button>
            <article id="article1">
                <h2>Szczepimy seniorów</h2>
                <p>Od piątku osoby powyżej 80 lat mogą zarejestrować się na szczepienie przeciw COVID-19. Do wyboru mają niemal sześć tysięcy przychodni, w których od 25 stycznia będą odbywać się szczepienia. Termin można zarezerwować telefonicznie, przez internet lub w punkcie szczepień. Na szczepienie przeciw COVID-19 od piątku mogą się umawiać seniorzy powyżej 80. roku życia, a tydzień później ruszą zapisy dla osób, które ukończyły 70 lat. Szczepienia dla seniorów rozpoczną się 25 stycznia.</p>
            </article>
            <button type="button" aria-controls="article2" aria-expanded="false">Sekcja sportowa</button>
            <article id="article2">
                <h2>Stoch i Kubacki na podium w Bischofshofen</h2>
                <p>W środę w Bischofshofen odbędzie się ostatni konkurs 69. Turnieju Czterech Skoczni. Po trzech zawodach prowadzi Kamil Stoch z dużą przewagą nad Dawidem Kubackim i Norwegiem Halvorem Egnerem Granerudem. Skocznia im. Paula Ausserleitnera w Bischofshofen, gdzie tradycyjnie kończy się TCS, jest szczęśliwa dla reprezentantów Polski, którzy wygrali tu trzy z ostatnich czterech konkursów - Stoch w 2017 i 2018, a Kubacki - w ubiegłym roku.</p>
            </article>
            <button type="button" aria-controls="article3" aria-expanded="false">Sekcja aktualności</button>
            <article id="article3">
                <h2>Dzień Babci 2021. Pomysły na prezent i historia święta w Polsce</h2>
                <p>Dzień Babci to wyjątkowe święto, w którym zewsząd płyną życzenia skierowane właśnie w stronę babć. Najmłodsi własnoręcznie lub z drobną pomocą wykonują piękne laurki, a nieco starsze wnuczęta z pewnością mają przygotowany niejeden prezent. Tego dnia w szkołach często przygotowywane są także różne przedstawienia, a oryginalne scenariusze często wywołują u dziadków łzy wzruszenia.</p>
            </article>
            <button type="button" aria-controls="article4" aria-expanded="false">Sekcja ogłoszeń</button>
            <article id="article4">
                <h2>Zaginione / znalezione</h2>
                <p>W Oławie, na ulicy Lipowej w piątek wieczorem znalazłam czarnego małego kotka. Jest zadbany i ufny, ma czerwoną obróżkę. Telefon 600100200.</p>
            </article>
        </section>
        <aside id="editorial">
            <blockquote>Pierwszym obowiązkiem dziennikarza jest nie nudzić. Drugim: nie bać się. Trzecim: niczego nie wyrzucać.</blockquote>
            <img src="obraz.jpg" alt="redaktor naczelny" width="250" height="250">
            <h5>Jan Nowak<br>Redaktor naczelny<br>gazety codziennej</h5>
            <h3>Zespół</h3>
            <table>
                <tr>
                    <td>Ewa</td>
                    <td>wiadomości z kraju</td>
                </tr>
                <tr>
                    <td>Krzysiek</td>
                    <td>sport</td>
                </tr>
                <tr>
                    <td>Ewelina</td>
                    <td>aktualności</td>
                </tr>
                <tr>
                    <td>Robert</td>
                    <td>ogłoszenia</td>
                </tr>
            </table>
        </aside>
    </main>
</body>
</html>

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

Krok 17: Odnośnik w nowej karcie i autor strony

Kryteria:

R.3.2 Na stronie umieszczono odnośnik, którego kliknięcie inicjuje otwarcie strony http://dziennikarz.pl/ w nowej karcie przeglądarki (opcjonalnie https://dziennikarz.pl/)

ok. 2 min

Polecenie z arkusza

Odnośnik do strony http://dziennikarz.pl/ otwierany w nowej karcie przeglądarki i podpisany „Więcej artykułów”. Paragraf o treści „Stronę gazety codziennej przygotował: ”, dalej wstawiony numer zdającego, którym został podpisany arkusz

target="_blank" otwiera nową kartę (R.3.2), a rel="noopener noreferrer" odcina obcej stronie dostęp do karty gazety przez window.opener - bez tego mogłaby ją po cichu przekierować na fałszywą stronę logowania (atak tabnabbing) - i nie wysyła jej adresu strony, z której przyszło kliknięcie.

W akapicie po dwukropku na egzaminie wpisujesz numer PESEL; tu stoi imię i nazwisko autora: Bartosz Bryniarski. HTML jest kompletny - brakuje tylko skryptu.

informacje.html HTML zmienione: 2 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <main>
        <section id="articles">
            <button type="button" aria-controls="article1" aria-expanded="false">Sekcja wiadomości z kraju</button>
            <article id="article1">
                <h2>Szczepimy seniorów</h2>
                <p>Od piątku osoby powyżej 80 lat mogą zarejestrować się na szczepienie przeciw COVID-19. Do wyboru mają niemal sześć tysięcy przychodni, w których od 25 stycznia będą odbywać się szczepienia. Termin można zarezerwować telefonicznie, przez internet lub w punkcie szczepień. Na szczepienie przeciw COVID-19 od piątku mogą się umawiać seniorzy powyżej 80. roku życia, a tydzień później ruszą zapisy dla osób, które ukończyły 70 lat. Szczepienia dla seniorów rozpoczną się 25 stycznia.</p>
            </article>
            <button type="button" aria-controls="article2" aria-expanded="false">Sekcja sportowa</button>
            <article id="article2">
                <h2>Stoch i Kubacki na podium w Bischofshofen</h2>
                <p>W środę w Bischofshofen odbędzie się ostatni konkurs 69. Turnieju Czterech Skoczni. Po trzech zawodach prowadzi Kamil Stoch z dużą przewagą nad Dawidem Kubackim i Norwegiem Halvorem Egnerem Granerudem. Skocznia im. Paula Ausserleitnera w Bischofshofen, gdzie tradycyjnie kończy się TCS, jest szczęśliwa dla reprezentantów Polski, którzy wygrali tu trzy z ostatnich czterech konkursów - Stoch w 2017 i 2018, a Kubacki - w ubiegłym roku.</p>
            </article>
            <button type="button" aria-controls="article3" aria-expanded="false">Sekcja aktualności</button>
            <article id="article3">
                <h2>Dzień Babci 2021. Pomysły na prezent i historia święta w Polsce</h2>
                <p>Dzień Babci to wyjątkowe święto, w którym zewsząd płyną życzenia skierowane właśnie w stronę babć. Najmłodsi własnoręcznie lub z drobną pomocą wykonują piękne laurki, a nieco starsze wnuczęta z pewnością mają przygotowany niejeden prezent. Tego dnia w szkołach często przygotowywane są także różne przedstawienia, a oryginalne scenariusze często wywołują u dziadków łzy wzruszenia.</p>
            </article>
            <button type="button" aria-controls="article4" aria-expanded="false">Sekcja ogłoszeń</button>
            <article id="article4">
                <h2>Zaginione / znalezione</h2>
                <p>W Oławie, na ulicy Lipowej w piątek wieczorem znalazłam czarnego małego kotka. Jest zadbany i ufny, ma czerwoną obróżkę. Telefon 600100200.</p>
            </article>
        </section>
        <aside id="editorial">
            <blockquote>Pierwszym obowiązkiem dziennikarza jest nie nudzić. Drugim: nie bać się. Trzecim: niczego nie wyrzucać.</blockquote>
            <img src="obraz.jpg" alt="redaktor naczelny" width="250" height="250">
            <h5>Jan Nowak<br>Redaktor naczelny<br>gazety codziennej</h5>
            <h3>Zespół</h3>
            <table>
                <tr>
                    <td>Ewa</td>
                    <td>wiadomości z kraju</td>
                </tr>
                <tr>
                    <td>Krzysiek</td>
                    <td>sport</td>
                </tr>
                <tr>
                    <td>Ewelina</td>
                    <td>aktualności</td>
                </tr>
                <tr>
                    <td>Robert</td>
                    <td>ogłoszenia</td>
                </tr>
            </table>
            <a href="http://dziennikarz.pl/" target="_blank" rel="noopener noreferrer">Więcej artykułów</a>
            <p>Stronę gazety codziennej przygotował: Bartosz Bryniarski</p>
        </aside>
    </main>
</body>
</html>

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

Etap 3: Styl CSS
Kroki 18-24 · po tym etapie masz 29 z 35 kryteriów (pkt)
Krok 18: Zmienne kolorów, krój i tło strony
Kryteria:
R.4.1 Ustawiono dla selektora strony (body lub html, lub kontenera strony): krój czcionki Georgia i kolor tła AliceBlue
ok. 2 min
Polecenie z arkusza
Styl CSS powinien być zdefiniowany jedynie w zewnętrznym pliku CSS. Dla selektora strony: krój czcionki Georgia, kolor tła AliceBlue
Na początku pliku styl3.css trzy zmienne CSS w regule :root (cały dokument): kolor banera, róż przycisków i stopki oraz tło strony. Róż występuje w arkuszu dwa razy - przy zmianie palety poprawia się go w jednym miejscu. Zmienną odczytuje funkcja var(--nazwa).
Selektor strony to body: krój Georgia i tło AliceBlue (R.4.1).
styl3.css CSS nowy plik
:root { --banner: #A00037; --pink: #D81B60; --page: AliceBlue; } body { font-family: Georgia; background-color: var(--page); }
Podgląd strony po tym kroku (informacje.html)
Krok 19: Baner
ok. 1 min
Polecenie z arkusza
Dla bloku banera: kolor tła #A00037, biały kolor czcionki, wyrównanie tekstu do środka, rozmiar czcionki 150%, marginesy wewnętrzne 3 px
Pięć właściwości z arkusza na selektorze header; kolor tła ze zmiennej --banner.
styl3.css CSS zmienione: 8 linii
:root { --banner: #A00037; --pink: #D81B60; --page: AliceBlue; } body { font-family: Georgia; background-color: var(--page); } header { background-color: var(--banner); color: white; text-align: center; font-size: 150%; padding: 3px; }
Podgląd strony po tym kroku (informacje.html)
Krok 20: Układ: main jako flex, blok artykułów 70%
Kryteria:
R.3.1 Układ bloków po uruchomieniu strony w przeglądarce jest zgodny z Obrazem 2 w arkuszu egzaminacyjnym, nie uwzględnia się bloków z artykułami (prawidłowo zastosowano właściwości CSS układające bloki na stronie, np. float i clear albo display flex albo grid)
ok. 3 min
Polecenie z arkusza
Dla bloku artykułów: szerokość 70%
display: flex na <main> - jego dzieci, czyli blok artykułów i stopka redakcyjna, stają obok siebie w rzędzie,
justify-content: space-between - pierwszy blok przy lewej krawędzi, ostatni przy prawej, wolne miejsce między nimi; tak jest na obrazie 2,
align-items: flex-start - oba bloki zaczynają się u góry i mają własną wysokość. Domyślne stretch rozciągnęłoby stopkę redakcyjną do wysokości kolumny artykułów (i odwrotnie), a jej cień ciągnąłby się do końca otwartego artykułu.
Szerokość 70% stoi na bloku artykułów, tak jak zapisuje ją klucz (R.4.4). Pod blokami nie ma treści, więc nie trzeba niczego „czyścić” jak przy float (R.3.1).
styl3.css CSS zmienione: 10 linii
:root { --banner: #A00037; --pink: #D81B60; --page: AliceBlue; } body { font-family: Georgia; background-color: var(--page); } header { background-color: var(--banner); color: white; text-align: center; font-size: 150%; padding: 3px; } main { display: flex; justify-content: space-between; align-items: flex-start; } #articles { width: 70%; }
Podgląd strony po tym kroku (informacje.html)

Krok 21: Przyciski

ok. 2 min

Polecenie z arkusza

Dla przycisków: kolor tła #D81B60, biały kolor czcionki, marginesy wewnętrzne 15 px, zewnętrzne 20 px, szerokość 100%

Selektor znacznika button - klucz przy R.4.5 i R.4.7 wymaga stylu dla selektora, nie dla klasy. Szerokość 100% to szerokość bloku artykułów, a margines 20 px dochodzi z boku - prawa krawędź przycisku wchodzi 20 px w odstęp przed stopką, jak na obrazie 2.

styl3.css CSS zmienione: 8 linii

:root {
    --banner: #A00037;
    --pink: #D81B60;
    --page: AliceBlue;
}

body {
    font-family: Georgia;
    background-color: var(--page);
}

header {
    background-color: var(--banner);
    color: white;
    text-align: center;
    font-size: 150%;
    padding: 3px;
}

main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#articles {
    width: 70%;
}

button {
    background-color: var(--pink);
    color: white;
    padding: 15px;
    margin: 20px;
    width: 100%;
}

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

Krok 22: Artykuły ukryte

Kryteria:

R.4.9 Ustawiono dla czterech bloków artykułu: bloki nie są wyświetlane (np. display: none;)

ok. 1 min

Polecenie z arkusza

Dla bloków pierwszego, drugiego, trzeciego i czwartego artykułu: bloki nie są wyświetlane

display: none na znaczniku article - cztery bloki naraz nie są wyświetlane i nie zajmują miejsca (R.4.9).

styl3.css CSS zmienione: 4 linie

:root {
    --banner: #A00037;
    --pink: #D81B60;
    --page: AliceBlue;
}

body {
    font-family: Georgia;
    background-color: var(--page);
}

header {
    background-color: var(--banner);
    color: white;
    text-align: center;
    font-size: 150%;
    padding: 3px;
}

main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#articles {
    width: 70%;
}

button {
    background-color: var(--pink);
    color: white;
    padding: 15px;
    margin: 20px;
    width: 100%;
}

article {
    display: none;
}

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

Krok 23: Stopka redakcyjna
Kryteria: , , ,
R.4.2 Ustawiono kolor tła #A00037 dla bloku banera, #D81B60 dla bloku stopki redakcyjnej i dla przycisków
R.4.3 Ustawiono biały kolor czcionki dla banera, stopki redakcyjnej i przycisków
R.4.4 Ustawiono szerokość 70% dla bloku artykułów i 20% dla bloku stopki redakcyjnej
R.4.6 Ustawiono dla stopki redakcyjnej cień o cechach: oba przesunięcia 15px, rozmycie 12px kolor DimGrey, np. box-shadow: 15px 15px 12px DimGrey (lub 15px 15px 12px 0 DimGrey)
ok. 3 min
Polecenie z arkusza
Dla bloku stopki redakcyjnej: kolor tła #D81B60, biały kolor czcionki, szerokość 20%, marginesy wewnętrzne 5 px, zewnętrzne 10 px, cień bloku z przesunięciem równym 15 px w poziomie i pionie, rozmycie 12 px i kolor DimGray
Selektor #editorial (identyfikator <aside>). Szerokość 20% na bloku (R.4.4), cień box-shadow: 15px 15px 12px DimGray - przesunięcie w poziomie, w pionie, rozmycie i kolor (R.4.6; DimGray i DimGrey to w CSS ten sam kolor). Margines 10 px zostawia stopkę 10 px od prawej krawędzi.
Kolory tła (R.4.2) i białe napisy (R.4.3) banera, przycisków i stopki są ustawione.
styl3.css CSS zmienione: 9 linii
:root { --banner: #A00037; --pink: #D81B60; --page: AliceBlue; } body { font-family: Georgia; background-color: var(--page); } header { background-color: var(--banner); color: white; text-align: center; font-size: 150%; padding: 3px; } main { display: flex; justify-content: space-between; align-items: flex-start; } #articles { width: 70%; } button { background-color: var(--pink); color: white; padding: 15px; margin: 20px; width: 100%; } article { display: none; } #editorial { background-color: var(--pink); color: white; width: 20%; padding: 5px; margin: 10px; box-shadow: 15px 15px 12px DimGray; }
Podgląd strony po tym kroku (informacje.html)
Krok 24: Cytat, nagłówek piątego stopnia, obraz i tabela
Kryteria: , , ,
R.4.5 Ustawiono marginesy zewnętrzne (margin) 20px dla przycisków, 10px dla stopki redakcyjnej, 0 dla selektora cytatu i selektora h5 oraz marginesy wewnętrzne (padding) 3px dla banera, 15px dla przycisków, 5px dla stopki redakcyjnej
R.4.7 Ustawiono wysokość 100% dla obrazu, szerokość 100% dla przycisków i obrazu oraz 95% dla selektora tabeli
R.4.8 Ustawiono wyrównanie tekstu do środka dla banera, cytatu i h5 oraz rozmiar czcionki 150% dla banera, styl czcionki pochylony dla h5 i cytatu (wystarczy dla 4 cech z 6)
R.4.10 Ustawiono dla tabeli: marginesy zewnętrzne auto (margin), obramowanie 1 px linią ciągłą o kolorze AliceBlue
ok. 3 min
Polecenie z arkusza
Dla selektora nagłówka piątego stopnia i cytatu: tekst pochylony, wyrównany do środka, brak marginesów zewnętrznych. Dla selektora obrazu: wysokość i szerokość 100%. Dla selektora tabeli: marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę, szerokość 95%, obramowanie 1 px linią ciągłą o kolorze AliceBlue
Trzy reguły na selektorach znaczników - tak każe arkusz (i klucz przy R.4.5, R.4.7):
h5, blockquote - kursywa, środek, margin: 0 (domyślne 40 px z boków cytatu zabrałyby połowę wąskiej stopki),
img - 100% szerokości stopki; wysokość 100% przy stopce bez ustalonej wysokości daje wysokość automatyczną, a proporcje zna przeglądarka z atrybutów width i height - zdjęcie zostaje kwadratem,
table - wyśrodkowana (margin: auto), 95%, obramowanie w kolorze tła strony (zmienna --page).
Marginesy (R.4.5), szerokości i wysokości (R.4.7), wyrównania i kursywa (R.4.8) oraz tabela (R.4.10) - komplet stylów z arkusza.
styl3.css CSS zmienione: 18 linii
:root { --banner: #A00037; --pink: #D81B60; --page: AliceBlue; } body { font-family: Georgia; background-color: var(--page); } header { background-color: var(--banner); color: white; text-align: center; font-size: 150%; padding: 3px; } main { display: flex; justify-content: space-between; align-items: flex-start; } #articles { width: 70%; } button { background-color: var(--pink); color: white; padding: 15px; margin: 20px; width: 100%; } article { display: none; } #editorial { background-color: var(--pink); color: white; width: 20%; padding: 5px; margin: 10px; box-shadow: 15px 15px 12px DimGray; } h5, blockquote { font-style: italic; text-align: center; margin: 0; } img { width: 100%; height: 100%; } table { margin: auto; width: 95%; border: 1px solid var(--page); }
Podgląd strony po tym kroku (informacje.html)

Etap 4: JavaScript

Kroki 25-27 · po tym etapie masz 35 z 35 kryteriów (pkt)

Krok 25: Plik skrypt.js i funkcja pokazująca artykuł

Kryteria: ,

R.5.1 Skrypt zapisano w języku JavaScript i zawarto w nim przynajmniej jedną poprawną składniowo instrukcję języka

R.5.2 Zapisano w skrypcie poprawną składniowo funkcję zmieniającą dla bloku pojedynczego artykułu wartość właściwości display lub innej o podobnym działaniu (wymagana prawidłowa definicja funkcji i zastosowanie funkcji getElementBy…)

ok. 4 min

Polecenie z arkusza

Napisany w języku JavaScript. Składa się z funkcji (jednej lub kilku) obsługujących przyciski z bloku informacji. W stanie początkowym każdy z artykułów nie jest widoczny (Obraz 2)

Skrypt w osobnym pliku skrypt.js, podpięty w <head> atrybutem defer: przeglądarka pobiera go równolegle ze stroną, a uruchamia dopiero po zbudowaniu całego dokumentu - przyciski już istnieją, choć znacznik stoi w nagłówku. Stan początkowy (wszystkie artykuły ukryte) zapewnia CSS, skrypt nie musi niczego robić przy starcie.

document.querySelectorAll('#articles button') - lista czterech przycisków z bloku artykułów (arkusz nazywa go tu „blokiem informacji”),
funkcja showArticle(button) dostaje kliknięty przycisk, odczytuje z jego aria-controls identyfikator artykułu i odszukuje blok przez getElementById (R.5.2 wymaga funkcji getElementBy…),
style.display = 'block' pokazuje artykuł, aria-expanded="true" ogłasza, że jest rozwinięty (R.5.1, R.5.2).

informacje.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>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
    <script src="skrypt.js" defer></script>
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <main>
        <section id="articles">
            <button type="button" aria-controls="article1" aria-expanded="false">Sekcja wiadomości z kraju</button>
            <article id="article1">
                <h2>Szczepimy seniorów</h2>
                <p>Od piątku osoby powyżej 80 lat mogą zarejestrować się na szczepienie przeciw COVID-19. Do wyboru mają niemal sześć tysięcy przychodni, w których od 25 stycznia będą odbywać się szczepienia. Termin można zarezerwować telefonicznie, przez internet lub w punkcie szczepień. Na szczepienie przeciw COVID-19 od piątku mogą się umawiać seniorzy powyżej 80. roku życia, a tydzień później ruszą zapisy dla osób, które ukończyły 70 lat. Szczepienia dla seniorów rozpoczną się 25 stycznia.</p>
            </article>
            <button type="button" aria-controls="article2" aria-expanded="false">Sekcja sportowa</button>
            <article id="article2">
                <h2>Stoch i Kubacki na podium w Bischofshofen</h2>
                <p>W środę w Bischofshofen odbędzie się ostatni konkurs 69. Turnieju Czterech Skoczni. Po trzech zawodach prowadzi Kamil Stoch z dużą przewagą nad Dawidem Kubackim i Norwegiem Halvorem Egnerem Granerudem. Skocznia im. Paula Ausserleitnera w Bischofshofen, gdzie tradycyjnie kończy się TCS, jest szczęśliwa dla reprezentantów Polski, którzy wygrali tu trzy z ostatnich czterech konkursów - Stoch w 2017 i 2018, a Kubacki - w ubiegłym roku.</p>
            </article>
            <button type="button" aria-controls="article3" aria-expanded="false">Sekcja aktualności</button>
            <article id="article3">
                <h2>Dzień Babci 2021. Pomysły na prezent i historia święta w Polsce</h2>
                <p>Dzień Babci to wyjątkowe święto, w którym zewsząd płyną życzenia skierowane właśnie w stronę babć. Najmłodsi własnoręcznie lub z drobną pomocą wykonują piękne laurki, a nieco starsze wnuczęta z pewnością mają przygotowany niejeden prezent. Tego dnia w szkołach często przygotowywane są także różne przedstawienia, a oryginalne scenariusze często wywołują u dziadków łzy wzruszenia.</p>
            </article>
            <button type="button" aria-controls="article4" aria-expanded="false">Sekcja ogłoszeń</button>
            <article id="article4">
                <h2>Zaginione / znalezione</h2>
                <p>W Oławie, na ulicy Lipowej w piątek wieczorem znalazłam czarnego małego kotka. Jest zadbany i ufny, ma czerwoną obróżkę. Telefon 600100200.</p>
            </article>
        </section>
        <aside id="editorial">
            <blockquote>Pierwszym obowiązkiem dziennikarza jest nie nudzić. Drugim: nie bać się. Trzecim: niczego nie wyrzucać.</blockquote>
            <img src="obraz.jpg" alt="redaktor naczelny" width="250" height="250">
            <h5>Jan Nowak<br>Redaktor naczelny<br>gazety codziennej</h5>
            <h3>Zespół</h3>
            <table>
                <tr>
                    <td>Ewa</td>
                    <td>wiadomości z kraju</td>
                </tr>
                <tr>
                    <td>Krzysiek</td>
                    <td>sport</td>
                </tr>
                <tr>
                    <td>Ewelina</td>
                    <td>aktualności</td>
                </tr>
                <tr>
                    <td>Robert</td>
                    <td>ogłoszenia</td>
                </tr>
            </table>
            <a href="http://dziennikarz.pl/" target="_blank" rel="noopener noreferrer">Więcej artykułów</a>
            <p>Stronę gazety codziennej przygotował: Bartosz Bryniarski</p>
        </aside>
    </main>
</body>
</html>

skrypt.js JavaScript nowy plik

const buttons = document.querySelectorAll('#articles button');

function showArticle(button) {
    const article = document.getElementById(button.getAttribute('aria-controls'));
    article.style.display = 'block';
    button.setAttribute('aria-expanded', 'true');
}

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

Krok 26: Nasłuchiwanie kliknięć na wszystkich przyciskach
Kryteria: ,
R.3.3 Dla dowolnego przycisku zdefiniowano obsługę zdarzenia kliknięcia (atrybut onClick lub słuchacz zdarzenia click, lub właściwość onclick obiektu DOM)
R.5.3 Po wybraniu przynajmniej jednego przycisku wyświetlana jest pod nim treść artykułu
ok. 3 min
Polecenie z arkusza
Po wybraniu dowolnego przycisku ukazuje się artykuł pod przyciskiem. Obraz 3a przedstawia efekt wciśnięcia przycisku „Sekcja sportowa”
forEach przechodzi po liście przycisków, a addEventListener('click', ...) podpina każdemu tę samą obsługę: wywołanie showArticle z tym właśnie przyciskiem (R.3.3). HTML nie ma żadnego onclick - zachowanie strony jest w całości w pliku skryptu.
Sprawdzone w Chrome: „Sekcja sportowa” pokazuje artykuł o Stochu i Kubackim pod przyciskiem - obraz 3a (R.5.3). W podglądzie możesz klikać.
skrypt.js JavaScript zmienione: 6 linii
const buttons = document.querySelectorAll('#articles button'); function showArticle(button) { const article = document.getElementById(button.getAttribute('aria-controls')); article.style.display = 'block'; button.setAttribute('aria-expanded', 'true'); } buttons.forEach(function (button) { button.addEventListener('click', function () { showArticle(button); }); });
Podgląd strony po tym kroku (informacje.html)
Krok 27: Poprzedni artykuł się chowa
Kryteria: ,
R.5.4 Gdy jest wyświetlona treść artykułu to wybranie przynajmniej jednego innego przycisku powoduje ukrycie treści dotychczas wyświetlanego artykułu
R.5.5 Obsłużono wszystkie cztery przyciski na ukrywanie i wyświetlanie artykułu zgodnie z kryteriami R.5.3 i R.5.4
ok. 3 min
Polecenie z arkusza
Następnie po wybraniu innego przycisku, wcześniej wyświetlany artykuł jest chowany, natomiast ukazuje się nowo wybrany. Obraz 3b przedstawia ten efekt, wcześniej wybrany artykuł Sekcji sportowej został schowany, wyświetlony został artykuł Sekcji aktualności
Na początku funkcji pętla po wszystkich przyciskach chowa ich artykuły i ustawia aria-expanded="false", a dopiero potem otwiera wybrany. Funkcja nie musi pamiętać, co było otwarte, a liczba artykułów nie jest nigdzie wpisana - nowa para przycisk - artykuł w HTML-u działa bez zmian w skrypcie.
Sprawdzone w Chrome: „Sekcja sportowa”, potem „Sekcja aktualności” - widać tylko artykuł o Dniu Babci (obraz 3b, R.5.4), tak samo dla każdej pary przycisków (R.5.5), a aria-expanded="true" ma zawsze tylko jeden przycisk.
Typowe błędy
Pętla chowająca postawiona za linią pokazującą ukryje także właśnie otwarty artykuł.
skrypt.js JavaScript zmienione: 4 linie
const buttons = document.querySelectorAll('#articles button'); function showArticle(button) { buttons.forEach(function (other) { document.getElementById(other.getAttribute('aria-controls')).style.display = 'none'; other.setAttribute('aria-expanded', 'false'); }); const article = document.getElementById(button.getAttribute('aria-controls')); article.style.display = 'block'; button.setAttribute('aria-expanded', 'true'); } buttons.forEach(function (button) { button.addEventListener('click', function () { showArticle(button); }); });
Podgląd strony po tym kroku (informacje.html)

Etap 5: Porównanie z wersją podstawową

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

Krok 28: Co jest inaczej i którą wersję wybrać na egzaminie

ok. 3 min

Obie wersje dają komplet 35 punktów. Różnice:

	wersja podstawowa	wersja nowoczesna
układ bloków	`float: left` / `float: right`	`<main>` z `display: flex` i `space-between`
stopka redakcyjna	`<section>`	`<aside>` - treść poboczna
kolory	wpisane w każdej regule	zmienne `--banner`, `--pink`, `--page`
przyciski	sam `<button>`	`type="button"`, `aria-controls`, `aria-expanded`
gdzie jest skrypt	`<script>` na końcu `<body>`	plik `skrypt.js` z `defer` w `<head>`
obsługa kliknięcia	`onclick="showArticle(2)"` w HTML	`addEventListener` w pętli
chowanie artykułów	cztery wpisane linie `article1` - `article4`	pętla po przyciskach - dowolna liczba
zdjęcie	bez wymiarów w HTML	`width` i `height` - brak przeskoku przy wczytywaniu

Skrypt w osobnym pliku pozwala też włączyć na serwerze politykę Content-Security-Policy (script-src 'self'), która blokuje każdy skrypt wpisany w HTML - najmocniejszą obronę przed wstrzyknięciem obcego kodu (XSS). Strona z atrybutami onclick przy takiej polityce przestałaby działać.

Na egzaminie wersja podstawowa trzyma się tabeli 1 arkusza (getElementById, style.display, atrybut onclick) i łatwiej ją napisać bez dokumentacji. Nowoczesna jest dostępniejsza i łatwiej ją rozbudować - a klucz przyjmuje obie.

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

Etap 6: Oddanie pracy
Krok 29 · po tym etapie masz 35 z 35 kryteriów (pkt)
Krok 29: Plik przeglądarka.txt i nagranie płyty
ok. 5 min
Polecenie z arkusza
Po zakończeniu pracy utwórz w folderze z numerem, którym został podpisany arkusz, 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 sprawdzana była strona. W folderze z numerem zdającego: import.jpg, informacje.html, kw1.png - kw4.png, kwerendy.txt, obraz.jpg, przeglądarka.txt, skrypt.js i styl3.css. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.
przeglądarka.txt Tekst nowy plik
Google Chrome
Podgląd strony bez zmian - taki jak po kroku 27.

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: Gazeta codzienna z rozwijanymi artykułami (Nowoczesny kod (flex, addEventListener))

Etap 1: Baza danych

Krok 1: Folder zdającego i archiwum zad3

Krok 2: Pusta baza gazeta

Krok 3: Import pliku gazeta.sql i zrzut import.jpg

Krok 4: Zapytanie 1: id i tytuł posortowane po tytule

Krok 5: Zapytanie 2: kategoria 1 i podkategoria 13

Krok 6: Zapytanie 3: zmiana podkategorii rekordu 5

Krok 7: Zapytanie 4: usunięcie kolumny uzytkownik_id

Etap 2: Grafika i strona HTML

Krok 8: Grafika: dokładnie 250 × 250 px

Krok 9: Szkielet informacje.html: HTML5, kodowanie, język, tytuł, styl

Krok 10: Bloki: baner, a pod nim main z artykułami i stopką redakcyjną

Krok 11: Przycisk i blok pierwszego artykułu

Krok 12: Przycisk i blok drugiego artykułu

Krok 13: Przycisk i blok trzeciego artykułu

Krok 14: Przycisk i blok czwartego artykułu

Krok 15: Stopka redakcyjna: cytat, zdjęcie, redaktor

Krok 16: Nagłówek „Zespół” i tabela

Krok 17: Odnośnik w nowej karcie i autor strony

Etap 3: Styl CSS

Krok 18: Zmienne kolorów, krój i tło strony

Krok 19: Baner

Krok 20: Układ: main jako flex, blok artykułów 70%

Krok 21: Przyciski

Krok 22: Artykuły ukryte

Krok 23: Stopka redakcyjna

Krok 24: Cytat, nagłówek piątego stopnia, obraz i tabela

Etap 4: JavaScript

Krok 25: Plik skrypt.js i funkcja pokazująca artykuł

Krok 26: Nasłuchiwanie kliknięć na wszystkich przyciskach

Krok 27: Poprzedni artykuł się chowa

Etap 5: Porównanie z wersją podstawową

Krok 28: Co jest inaczej i którą wersję wybrać na egzaminie

Etap 6: Oddanie pracy

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

Podgląd

Podgląd

Potwierdzenie

Informacja