Przejdź do głównej treści
EE.09-03-23.01-SGStyczeń 2023 · 48 kroków · ok. 84 min · 35 kryteriów z klucza

Rozwiązanie krok po kroku: Gazeta codzienna z rozwijanymi artykułami (Wersja podstawowa)

Strona gazety codziennej: baza gazeta z tabelą ogloszenia, na której cztery zapytania sortują tytuły (ORDER BY), wybierają ogłoszenia z kategorii i podkategorii, poprawiają jeden rekord (UPDATE) i usuwają kolumnę (ALTER TABLE ... DROP COLUMN). Do tego zdjęcie redaktora przeskalowane do 250 × 250 px, strona informacje.html z czterema przyciskami sekcji i ukrytymi artykułami, stopką redakcyjną z cytatem, tabelą zespołu i cieniem bloku oraz styl styl3.css. Na końcu skrypt JavaScript: kliknięcie przycisku pokazuje artykuł pod nim i chowa ten, który był otwarty wcześniej.

To arkusz EE.09 ze stycznia 2023 - kwalifikacji formuły 2017, którą zastąpiła INF.03. 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 jest napisany najprościej, funkcjami z tabeli 1 arkusza (getElementById, style.display, atrybut onclick), a na końcu są dwa kroki o zabezpieczeniach, których klucz nie sprawdza.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (flex, addEventListener)” jest drugi sposób rozwiązania tego samego arkusza: układ na flex, zmienne CSS, skrypt w osobnym pliku z nasłuchiwaniem zdarzeń i atrybutami dostępności przycisków - obie wersje są zgodne z kluczem.

Baza, zdjęcie i treści artykułów pochodzą z oryginalnego archiwum CKE zad3 (załącznik do pobrania na stronie arkusza, hasło w treści zadania). Zapytania i zrzuty są policzone na MariaDB 10.4 - tej samej, która jest w XAMPP, a działanie skryptu sprawdzone klikaniem 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 (75% z 35 to 26,25, a punktów nie dzieli się na części). 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 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.

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

  3. 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
    Podgląd strony po kroku 3

  4. 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
    Podgląd strony po kroku 4

  5. 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
    Podgląd strony po kroku 5

  6. 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
    Podgląd strony po kroku 6

  7. 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
    Podgląd strony po kroku 7

  8. Etap 2: Grafika i strona HTML

    Kroki 8-30 · 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
    Podgląd strony po kroku 8

  9. Krok 9: Plik informacje.html w HTML5

    Kryteria:

    R.2.2 Witrynę internetową zapisano w pliku o nazwie informacje.html

    ok. 2 min
    Polecenie z arkusza

    Składa się ze strony o nazwie informacje.html. Zapisana w języku HTML5

    W folderze zdającego tworzysz plik informacje.html (R.2.2). Pierwsza linia <!DOCTYPE html> to deklaracja HTML5 - przeglądarka rysuje wtedy stronę w trybie standardów, a nie w trybie zgodności ze starymi stronami. Strona jest czystym HTML-em z JavaScriptem, bez PHP, więc działa także otwarta wprost z dysku.

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

  10. Krok 10: Kodowanie polskich znaków

    ok. 1 min
    Polecenie z arkusza

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

    <meta charset="UTF-8"> jako pierwszy element <head> - „jawnie” znaczy właśnie, że kodowanie jest zapisane w pliku, a nie zgadywane przez przeglądarkę. Plik zapisz w UTF-8 (w Notepad++ menu Kodowanie) - inaczej niż plik z treściami.

    informacje.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  11. Krok 11: Język strony: polski

    Kryteria:

    R.2.3 Zastosowano deklarację języka HTML5, jawnie zapisany standard kodowania polskich znaków oraz zadeklarowano język witryny (np. <html lang = 'pl'>)

    ok. 1 min
    Polecenie z arkusza

    Zadeklarowany język zawartości witryny: polski

    Atrybut lang="pl" w znaczniku <html>. Czytnik ekranu czyta wtedy tekst polskim głosem, a przeglądarka dzieli wyrazy według polskich zasad. Deklaracja HTML5, kodowanie i język razem dają R.2.3.

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

  12. Krok 12: Tytuł strony

    Kryteria:

    R.2.4 Nadano tytuł stronie: "Gazeta"

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony widoczny na karcie przeglądarki: „Gazeta”

    <title>Gazeta</title> w <head> (R.2.4). Uwaga na dwa podobne teksty: tytuł karty to samo „Gazeta”, a nagłówek banera - „Gazeta codzienna”.

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

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

    Kryteria:

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

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

    <link rel="stylesheet" href="styl3.css"> w <head>. Nazwa z cyfrą 3. Sam plik stylów powstanie po HTML-u; klucz uznaje R.3.4 dopiero wtedy, gdy połączenie działa i całe formatowanie pochodzi z tego pliku.

    Typowe błędy

    Atrybut style w którymkolwiek znaczniku albo blok <style> w nagłówku odbiera R.3.4 - formatowanie ma być jedynie w styl3.css.

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

  14. Krok 14: Bloki: baner, artykuły i stopka redakcyjna

    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

    Trzy bloki z arkusza: baner jako <header>, a blok artykułów i stopka redakcyjna jako dwa znaczniki <section> z identyfikatorami articles i editorial (nazwy po angielsku - arkusz ich nie narzuca). „Stopka redakcyjna” w gazecie to ramka z redaktorem i zespołem, a nie stopka strony - na obrazie 2 stoi z prawej strony, obok artykułów, dlatego nie jest to <footer>. Obok siebie ustawi je CSS.

    informacje.html HTML zmienione: 6 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
    </header>
    <section id="articles">
    </section>
    <section id="editorial">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  15. Krok 15: Baner: nagłówek pierwszego stopnia

    ok. 1 min
    Polecenie z arkusza

    Zawartość banera: nagłówek pierwszego stopnia o treści „Gazeta codzienna”

    <h1> w <header>.

    informacje.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
    </section>
    <section id="editorial">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  16. Krok 16: Przycisk „Sekcja wiadomości z kraju”

    ok. 1 min
    Polecenie z arkusza

    Przycisk o treści: „Sekcja wiadomości z kraju”, jego wciśnięcie powoduje uruchomienie funkcji w skrypcie

    Treści na stronie kopiujesz z pliku tresci na stronie.txt - pierwsza linia bloku to napis na przycisku. Przycisk to znacznik <button>, a napis jest jego treścią. Funkcję, którą uruchomi kliknięcie, dopiszesz w etapie JavaScript - na razie przycisk nic nie robi.

    informacje.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button>Sekcja wiadomości z kraju</button>
    </section>
    <section id="editorial">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  17. Krok 17: Blok pierwszego artykułu

    ok. 2 min
    Polecenie z arkusza

    Blok pierwszego artykułu, a w nim: Tytuł „Szczepimy seniorów” zapisany nagłówkiem drugiego stopnia. Treść „Od piątku...” zapisana w paragrafie (akapicie)

    Każdy artykuł to osobny blok - znacznik <article>, przeznaczony właśnie na samodzielny tekst, np. wpis albo artykuł prasowy. Blok dostaje identyfikator article1: skrypt odnajdzie go po tym id, a numer na końcu ułatwi obsługę czterech przycisków jedną funkcją. W środku tytuł w <h2> i treść w <p> - skopiowane w całości z pliku, w arkuszu są tylko skrócone („Od piątku...”).

    Na razie artykuł widać pod przyciskiem - ukryje go dopiero CSS.

    informacje.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button>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>
    <section id="editorial">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  18. Krok 18: Przycisk „Sekcja sportowa”

    ok. 1 min
    Polecenie z arkusza

    Przycisk o treści: „Sekcja sportowa” (patrz obraz 3a), jego wciśnięcie powoduje uruchomienie funkcji w skrypcie

    Drugi <button>, pod blokiem pierwszego artykułu - kolejność w kodzie decyduje, że artykuł pokaże się pod swoim przyciskiem (obraz 3a).

    informacje.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button>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>Sekcja sportowa</button>
    </section>
    <section id="editorial">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  19. Krok 19: Blok drugiego artykułu

    ok. 1 min
    Polecenie z arkusza

    Blok drugiego artykułu, a w nim: Tytuł „Stoch i Kubacki ...” zapisany nagłówkiem drugiego stopnia. Treść „W środę ...” zapisana w paragrafie

    <article id="article2"> z pełnym tytułem „Stoch i Kubacki na podium w Bischofshofen” w <h2> i treścią w <p>.

    informacje.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button>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>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>
    <section id="editorial">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  20. Krok 20: Przycisk „Sekcja aktualności”

    ok. 1 min
    Polecenie z arkusza

    Przycisk o treści: „Sekcja aktualności” (patrz obraz 3b), jego wciśnięcie powoduje uruchomienie funkcji w skrypcie

    Trzeci <button>.

    informacje.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button>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>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>Sekcja aktualności</button>
    </section>
    <section id="editorial">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  21. Krok 21: Blok trzeciego artykułu

    ok. 1 min
    Polecenie z arkusza

    Blok trzeciego artykułu, a w nim: Tytuł „Dzień Babci 2021 ...” zapisany nagłówkiem drugiego stopnia. Treść „Dzień Babci to ...” zapisana w paragrafie

    <article id="article3"> - tytuł „Dzień Babci 2021. Pomysły na prezent i historia święta w Polsce” i akapit treści.

    informacje.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button>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>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>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>
    <section id="editorial">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  22. Krok 22: Przycisk „Sekcja ogłoszeń”

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Przycisk o treści: „Sekcja ogłoszeń”, jego wciśnięcie powoduje uruchomienie funkcji w skrypcie

    Czwarty <button> - blok artykułów ma komplet czterech przycisków (R.2.10).

    informacje.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button>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>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>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>Sekcja ogłoszeń</button>
    </section>
    <section id="editorial">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  23. Krok 23: Blok czwartego artykułu

    ok. 1 min
    Polecenie z arkusza

    Blok czwartego artykułu, a w nim: Tytuł „Zaginione / znalezione” zapisany nagłówkiem drugiego stopnia. Treść „W Oławie ...” zapisana w paragrafie

    <article id="article4"> z ogłoszeniem o znalezionym kotku. Cztery bloki artykułów mają identyfikatory article1 - article4.

    informacje.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button>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>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>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>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>
    <section id="editorial">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  24. Krok 24: Stopka redakcyjna: cytat

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku stopki redakcyjnej: Cytat o treści „Pierwszym obowiązkiem ...”, cytat umieszczony w znaczniku przeznaczonym dla cytatów

    Dłuższy cytat stojący osobno to <blockquote> (krótki cytat w zdaniu to <q>; klucz R.2.9 przyjmuje oba i <cite>). Treść z ostatniej części pliku tresci na stronie.txt.

    informacje.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button>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>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>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>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>
    <section id="editorial">
        <blockquote>Pierwszym obowiązkiem dziennikarza jest nie nudzić. Drugim: nie bać się. Trzecim: niczego nie wyrzucać.</blockquote>
    </section>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  25. Krok 25: Stopka redakcyjna: zdjęcie

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Obraz o nazwie obraz.jpg i tekście alternatywnym „redaktor naczelny”

    <img> z atrybutami src i alt (R.2.8). Tekst alternatywny przeczyta czytnik ekranu zamiast zdjęcia; pokaże się też, gdy plik się nie wczyta.

    informacje.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button>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>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>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>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>
    <section 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">
    </section>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  26. Krok 26: Nagłówek piątego stopnia w trzech wierszach

    ok. 1 min
    Polecenie z arkusza

    Nagłówek piątego stopnia o treści: „Jan Nowak Redaktor naczelny gazety codziennej” podzielony na trzy wiersze, zgodnie z obrazem 2

    <h5> z dwoma znacznikami <br> - łamanie wiersza w środku nagłówka. Podział jak w pliku z treściami: „Jan Nowak” / „Redaktor naczelny” / „gazety codziennej”. Trzy osobne <h5> dałyby trzy nagłówki zamiast jednego.

    informacje.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button>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>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>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>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>
    <section 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">
        <h5>Jan Nowak<br>Redaktor naczelny<br>gazety codziennej</h5>
    </section>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  27. Krok 27: Nagłówek „Zespół”

    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

    ok. 1 min
    Polecenie z arkusza

    Nagłówek trzeciego stopnia o treści „Zespół”

    <h3> pod nagłówkiem piątego stopnia. Kolejność stopni jest tu nietypowa (h5 przed h3), ale tak każe arkusz. Strona ma już komplet nagłówków i akapitów, które sprawdza R.2.6: <h1> w banerze, <h2> w artykułach, <h5> i <h3> w stopce redakcyjnej oraz akapity treści artykułów.

    informacje.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button>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>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>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>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>
    <section 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">
        <h5>Jan Nowak<br>Redaktor naczelny<br>gazety codziennej</h5>
        <h3>Zespół</h3>
    </section>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  28. Krok 28: Tabela zespołu

    Kryteria:

    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

    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.

    <table> z czterema wierszami <tr>, w każdym dwie komórki <td> (R.2.7). Na obrazie 2 tabela nie ma nagłówka kolumn, więc nie ma też <th>. Średnik w arkuszu oddziela wiersze, przecinek - komórki.

    informacje.html HTML zmienione: 18 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button>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>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>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>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>
    <section 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">
        <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>
    </section>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  29. Krok 29: Odnośnik otwierany w nowej karcie

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

    Odnośnik do strony http://dziennikarz.pl/ otwierany w nowej karcie przeglądarki i podpisany „Więcej artykułów”

    <a href="..."> z adresem z arkusza i atrybutem target="_blank" - to on otwiera stronę w nowej karcie (R.3.2). Adres ze schematem http:// - bez niego przeglądarka szukałaby pliku dziennikarz.pl w folderze strony.

    informacje.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button>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>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>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>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>
    <section 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">
        <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">Więcej artykułów</a>
    </section>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  30. Krok 30: Paragraf z autorem strony

    ok. 1 min
    Polecenie z arkusza

    Paragraf o treści „Stronę gazety codziennej przygotował: ”, dalej wstawiony numer zdającego, którym został podpisany arkusz

    Na egzaminie po dwukropku wpisujesz swój numer PESEL. W tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora: Bartosz Bryniarski. HTML strony jest kompletny.

    informacje.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button>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>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>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>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>
    <section 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">
        <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">Więcej artykułów</a>
        <p>Stronę gazety codziennej przygotował: Bartosz Bryniarski</p>
    </section>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  31. Etap 3: Styl CSS

    Kroki 31-40 · po tym etapie masz 29 z 35 kryteriów (pkt)

    Krok 31: Plik styl3.css: 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. 1 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

    Nowy plik styl3.css w folderze zdającego - od teraz każda reguła trafia tylko tutaj. „Selektor strony” to body (klucz R.4.1 przyjmuje też html). AliceBlue to nazwa koloru CSS - bardzo jasny błękit tła z obrazu 2. Krój dziedziczą wszystkie elementy poza przyciskami, które mają własny krój systemowy - na obrazie 2 napisy na przyciskach też są bezszeryfowe.

    styl3.css CSS nowy plik 
    body {
    font-family: Georgia;
    background-color: AliceBlue;
}
    Podgląd strony po tym kroku (informacje.html)

  32. Krok 32: Baner: tło, kolor, wyrównanie, rozmiar, margines wewnętrzny

    ok. 2 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 na selektorze header. Kolor zapisany szesnastkowo #A00037 (ciemna czerwień), padding: 3px - margines wewnętrzny z każdej strony. Rozmiar 150% liczy się od rozmiaru rodzica, a nagłówek <h1> w środku jest jeszcze dwa razy większy od swojego rodzica - dlatego napis w banerze jest tak duży.

    styl3.css CSS zmienione: 7 linii 
    body {
    font-family: Georgia;
    background-color: AliceBlue;
}
header {
    background-color: #A00037;
    color: white;
    text-align: center;
    font-size: 150%;
    padding: 3px;
}
    Podgląd strony po tym kroku (informacje.html)

  33. Krok 33: Blok artykułów: szerokość 70%

    ok. 1 min
    Polecenie z arkusza

    Dla bloku artykułów: szerokość 70%

    Selektor identyfikatora #articles - z krzyżykiem, bo w HTML-u jest id="articles".

    styl3.css CSS zmienione: 3 linie 
    body {
    font-family: Georgia;
    background-color: AliceBlue;
}
header {
    background-color: #A00037;
    color: white;
    text-align: center;
    font-size: 150%;
    padding: 3px;
}
#articles {
    width: 70%;
}
    Podgląd strony po tym kroku (informacje.html)

  34. Krok 34: Przyciski: tło, kolor, marginesy, szerokość

    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 obejmuje wszystkie cztery przyciski. padding: 15px powiększa przycisk od środka, margin: 20px odsuwa go od sąsiadów, a width: 100% - szerokość bloku artykułów. Przycisk w przeglądarce liczy szerokość razem z marginesem wewnętrznym, ale margines zewnętrzny dochodzi do niej z boku - prawa krawędź przycisku wystaje więc o 20 px poza blok artykułów, w odstęp przed stopką redakcyjną (tak samo jest na obrazie 2).

    styl3.css CSS zmienione: 7 linii 
    body {
    font-family: Georgia;
    background-color: AliceBlue;
}
header {
    background-color: #A00037;
    color: white;
    text-align: center;
    font-size: 150%;
    padding: 3px;
}
#articles {
    width: 70%;
}
button {
    background-color: #D81B60;
    color: white;
    padding: 15px;
    margin: 20px;
    width: 100%;
}
    Podgląd strony po tym kroku (informacje.html)

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

    Selektor znacznika article obejmuje cztery bloki naraz, a display: none usuwa je z układu strony - nie zajmują miejsca, przyciski stoją jeden pod drugim jak na obrazie 2 (R.4.9). Treść nadal jest w pliku HTML; pokaże ją skrypt.

    Typowe błędy

    visibility: hidden też ukrywa blok, ale zostawia po nim puste miejsce - przyciski rozjadą się na stronie.

    styl3.css CSS zmienione: 3 linie 
    body {
    font-family: Georgia;
    background-color: AliceBlue;
}
header {
    background-color: #A00037;
    color: white;
    text-align: center;
    font-size: 150%;
    padding: 3px;
}
#articles {
    width: 70%;
}
button {
    background-color: #D81B60;
    color: white;
    padding: 15px;
    margin: 20px;
    width: 100%;
}
article {
    display: none;
}
    Podgląd strony po tym kroku (informacje.html)

  36. Krok 36: Stopka redakcyjna: tło, kolor, wymiary, cień

    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. Cień to właściwość box-shadow - jej opis z w3schools jest na ostatniej stronie arkusza. Kolejność wartości: przesunięcie poziome 15px, pionowe 15px, rozmycie 12px, kolor DimGray (ciemnoszary; nazwy DimGray i DimGrey znaczą w CSS to samo, klucz pisze tę drugą). Dodatnie przesunięcia kładą cień w prawo i w dół (R.4.6).

    Ten sam róż tła co przyciski i biały tekst - kolory tła (R.4.2) i białe napisy banera, stopki i przycisków (R.4.3) są ustawione, a z tą regułą także szerokości obu bloków (R.4.4).

    Typowe błędy

    W box-shadow czwarta liczba to rozproszenie (spread) - 15px 15px 12px 5px DimGray daje inny, większy cień. Arkusz podaje tylko trzy wymiary.

    styl3.css CSS zmienione: 8 linii 
    body {
    font-family: Georgia;
    background-color: AliceBlue;
}
header {
    background-color: #A00037;
    color: white;
    text-align: center;
    font-size: 150%;
    padding: 3px;
}
#articles {
    width: 70%;
}
button {
    background-color: #D81B60;
    color: white;
    padding: 15px;
    margin: 20px;
    width: 100%;
}
article {
    display: none;
}
#editorial {
    background-color: #D81B60;
    color: white;
    width: 20%;
    padding: 5px;
    margin: 10px;
    box-shadow: 15px 15px 12px DimGray;
}
    Podgląd strony po tym kroku (informacje.html)

  37. Krok 37: Nagłówek piątego stopnia i cytat: kursywa, środek, bez marginesów

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

    ok. 2 min
    Polecenie z arkusza

    Dla selektora nagłówka piątego stopnia i cytatu: tekst pochylony, wyrównany do środka, brak marginesów zewnętrznych

    Jedna reguła na dwa selektory znaczników: h5, blockquote. Arkusz każe stylować je wyłącznie selektorami znaczników (uwaga pod listą stylów) - klasa albo #id nie dałyby punktu. Tekst pochylony to font-style: italic. margin: 0 jest tu szczególnie potrzebne przy cytacie: <blockquote> ma domyślnie 40 px marginesu z lewej i prawej, które w wąskiej stopce zjadłyby połowę szerokości.

    Marginesy zewnętrzne i wewnętrzne wszystkich elementów z arkusza są ustawione (R.4.5), podobnie wyrównanie, rozmiar i kursywa (R.4.8).

    styl3.css CSS zmienione: 5 linii 
    body {
    font-family: Georgia;
    background-color: AliceBlue;
}
header {
    background-color: #A00037;
    color: white;
    text-align: center;
    font-size: 150%;
    padding: 3px;
}
#articles {
    width: 70%;
}
button {
    background-color: #D81B60;
    color: white;
    padding: 15px;
    margin: 20px;
    width: 100%;
}
article {
    display: none;
}
#editorial {
    background-color: #D81B60;
    color: white;
    width: 20%;
    padding: 5px;
    margin: 10px;
    box-shadow: 15px 15px 12px DimGray;
}
h5, blockquote {
    font-style: italic;
    text-align: center;
    margin: 0;
}
    Podgląd strony po tym kroku (informacje.html)

  38. Krok 38: Obraz: szerokość i wysokość 100%

    ok. 1 min
    Polecenie z arkusza

    Dla selektora obrazu: wysokość i szerokość 100%

    Selektor znacznika img. Zdjęcie wypełnia szerokość stopki redakcyjnej - na szerokim ekranie jest większe niż 250 px, na wąskim mniejsze. Wysokość 100% liczy się od wysokości rodzica, a stopka nie ma ustawionej wysokości - dlatego zdjęcie zachowuje kwadratowy kształt, tak jak na obrazie 2.

    styl3.css CSS zmienione: 4 linie 
    body {
    font-family: Georgia;
    background-color: AliceBlue;
}
header {
    background-color: #A00037;
    color: white;
    text-align: center;
    font-size: 150%;
    padding: 3px;
}
#articles {
    width: 70%;
}
button {
    background-color: #D81B60;
    color: white;
    padding: 15px;
    margin: 20px;
    width: 100%;
}
article {
    display: none;
}
#editorial {
    background-color: #D81B60;
    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%;
}
    Podgląd strony po tym kroku (informacje.html)

  39. Krok 39: Tabela: wyśrodkowana, 95%, obramowanie

    Kryteria: ,

    R.4.7 Ustawiono wysokość 100% dla obrazu, szerokość 100% dla przycisków i obrazu oraz 95% dla selektora tabeli

    R.4.10 Ustawiono dla tabeli: marginesy zewnętrzne auto (margin), obramowanie 1 px linią ciągłą o kolorze AliceBlue

    ok. 2 min
    Polecenie z arkusza

    Dla selektora tabeli: marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę, szerokość 95%, obramowanie 1 px linią ciągłą o kolorze AliceBlue

    • margin: auto - przeglądarka dzieli wolne miejsce po równo z lewej i prawej, więc tabela o szerokości 95% stoi na środku stopki,
    • border: 1px solid AliceBlue - skrót: grubość, rodzaj linii (solid - ciągła) i kolor.

    Obramowanie dostaje tylko tabela, nie komórki - jak na obrazie 2. Szerokości obrazu, przycisków i tabeli są ustawione (R.4.7), a tabela ma komplet z R.4.10.

    styl3.css CSS zmienione: 5 linii 
    body {
    font-family: Georgia;
    background-color: AliceBlue;
}
header {
    background-color: #A00037;
    color: white;
    text-align: center;
    font-size: 150%;
    padding: 3px;
}
#articles {
    width: 70%;
}
button {
    background-color: #D81B60;
    color: white;
    padding: 15px;
    margin: 20px;
    width: 100%;
}
article {
    display: none;
}
#editorial {
    background-color: #D81B60;
    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 AliceBlue;
}
    Podgląd strony po tym kroku (informacje.html)

  40. Krok 40: Układ: artykuły z lewej, stopka redakcyjna z prawej

    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

    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

    Blok artykułów dostaje float: left, a stopka redakcyjna float: right - na obrazie 2 stopka przylega do prawej krawędzi strony (z marginesem 10 px), a między nią a artykułami zostaje wolne pasmo. Szerokości 70% i 20% plus marginesy stopki mieszczą się w jednym rzędzie. Pod blokami nie ma już niczego, więc clear nie jest potrzebny (R.3.1).

    Osobne, krótkie reguły na końcu pliku - właściwości układu zebrane w jednym miejscu łatwo potem zmienić. Klucz przyjmuje float, flex albo grid - wersja nowoczesna pokazuje ten sam układ na flex.

    Typowe błędy

    Dwa bloki z float: left ustawią stopkę zaraz za artykułami - też obok siebie, ale z pustym pasem po prawej, inaczej niż na obrazie 2.

    styl3.css CSS zmienione: 6 linii 
    body {
    font-family: Georgia;
    background-color: AliceBlue;
}
header {
    background-color: #A00037;
    color: white;
    text-align: center;
    font-size: 150%;
    padding: 3px;
}
#articles {
    width: 70%;
}
button {
    background-color: #D81B60;
    color: white;
    padding: 15px;
    margin: 20px;
    width: 100%;
}
article {
    display: none;
}
#editorial {
    background-color: #D81B60;
    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 AliceBlue;
}
#articles {
    float: left;
}
#editorial {
    float: right;
}
    Podgląd strony po tym kroku (informacje.html)

  41. Etap 4: JavaScript

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

    Krok 41: Skrypt i funkcja obsługi przycisków

    ok. 2 min
    Polecenie z arkusza

    Napisany w języku JavaScript. Składa się z funkcji (jednej lub kilku) obsługujących przyciski z bloku informacji.

    Skrypt w znaczniku <script> na końcu <body> - wykona się, gdy przyciski i artykuły są już w dokumencie. Jedna funkcja showArticle(number) obsłuży wszystkie cztery przyciski: dostanie numer artykułu jako parametr. Arkusz mówi tu o „bloku informacji” - chodzi o blok artykułów, w którym stoją przyciski.

    Funkcja jest na razie pusta; treść dostanie w kolejnych krokach.

    informacje.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button>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>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>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>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>
    <section 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">
        <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">Więcej artykułów</a>
        <p>Stronę gazety codziennej przygotował: Bartosz Bryniarski</p>
    </section>
    <script>
        function showArticle(number) {
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  42. Krok 42: Stan początkowy: wszystkie artykuły ukryte

    ok. 1 min
    Polecenie z arkusza

    W stanie początkowym każdy z artykułów nie jest widoczny (Obraz 2)

    Stan początkowy zapewnia już reguła article { display: none; } z arkusza stylów - skrypt nie musi niczego ukrywać przy wczytaniu strony. Podgląd: same przyciski i stopka redakcyjna, jak na obrazie 2.

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

  43. Krok 43: Funkcja pokazuje wybrany 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. 3 min
    Polecenie z arkusza

    Po wybraniu dowolnego przycisku ukazuje się artykuł pod przyciskiem. Obraz 3a przedstawia efekt wciśnięcia przycisku „Sekcja sportowa”

    Jedna instrukcja z tabeli 1 arkusza:

    • 'article' + number - skleja napis z liczbą: dla 2 powstaje article2, czyli id bloku drugiego artykułu,
    • document.getElementById(...) - odszukuje ten blok,
    • .style.display = 'block' - nadpisuje display: none z arkusza stylów; styl ustawiony skryptem ma pierwszeństwo przed regułą z pliku CSS.

    Tabela 1 podaje wartości inline | none, ale artykuł z nagłówkiem i akapitami to blok - block wyświetla go tak, jak zwykły <article> bez ukrywania. Funkcja jest poprawna składniowo i zmienia display bloku artykułu (R.5.1, R.5.2).

    informacje.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button>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>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>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>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>
    <section 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">
        <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">Więcej artykułów</a>
        <p>Stronę gazety codziennej przygotował: Bartosz Bryniarski</p>
    </section>
    <script>
        function showArticle(number) {
            document.getElementById('article' + number).style.display = 'block';
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  44. Krok 44: Przyciski uruchamiają funkcję

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

    Przycisk o treści: „Sekcja sportowa” (patrz obraz 3a), jego wciśnięcie powoduje uruchomienie funkcji w skrypcie

    Każdy przycisk dostaje atrybut onclick z wywołaniem funkcji i numerem artykułu, który stoi pod nim: showArticle(1) przy wiadomościach z kraju, showArticle(2) przy sekcji sportowej itd. To obsługa zdarzenia kliknięcia z tabeli 1 (R.3.3).

    Sprawdzone w przeglądarce Chrome: kliknięcie „Sekcja sportowa” pokazuje artykuł „Stoch i Kubacki na podium w Bischofshofen” pod przyciskiem - jak na obrazie 3a (R.5.3). W podglądzie możesz klikać.

    Typowe błędy

    onclick="showArticle" bez nawiasów niczego nie wywołuje - to tylko nazwa funkcji. Wywołanie wymaga () z argumentem.

    informacje.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button onclick="showArticle(1)">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 onclick="showArticle(2)">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 onclick="showArticle(3)">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 onclick="showArticle(4)">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>
    <section 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">
        <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">Więcej artykułów</a>
        <p>Stronę gazety codziennej przygotował: Bartosz Bryniarski</p>
    </section>
    <script>
        function showArticle(number) {
            document.getElementById('article' + number).style.display = 'block';
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  45. Krok 45: Wcześniejszy 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

    Funkcja nie musi pamiętać, który artykuł był otwarty: na początku chowa wszystkie cztery (display = 'none'), a dopiero potem pokazuje wybrany. Ukrycie bloku, który już jest ukryty, niczego nie psuje.

    Sprawdzone w Chrome: po „Sekcja sportowa” i potem „Sekcja aktualności” widać tylko artykuł o Dniu Babci, a artykuł o skokach znika - obraz 3b (R.5.4). Tak samo działa każda para przycisków (R.5.5).

    Typowe błędy

    Gdy linie chowające stoją po linii pokazującej, funkcja ukryje też właśnie otwarty artykuł i kliknięcie nie da żadnego efektu.

    informacje.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button onclick="showArticle(1)">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 onclick="showArticle(2)">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 onclick="showArticle(3)">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 onclick="showArticle(4)">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>
    <section 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">
        <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">Więcej artykułów</a>
        <p>Stronę gazety codziennej przygotował: Bartosz Bryniarski</p>
    </section>
    <script>
        function showArticle(number) {
            document.getElementById('article1').style.display = 'none';
            document.getElementById('article2').style.display = 'none';
            document.getElementById('article3').style.display = 'none';
            document.getElementById('article4').style.display = 'none';
            document.getElementById('article' + number).style.display = 'block';
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  46. Etap 5: Dobre praktyki (poza kluczem)

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

    Krok 46: Zabezpieczenie: odnośnik bez dostępu do karty gazety

    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”

    Strona otwarta przez target="_blank" dostawała kiedyś w JavaScripcie obiekt window.opener - odwołanie do karty, z której ją otwarto. Obca strona mogła nim po cichu podmienić adres karty z gazetą na fałszywą stronę logowania (atak nazywany tabnabbing): uczeń wraca do karty, widzi „zaloguj się ponownie” i podaje hasło oszustowi.

    • rel="noopener" - nowa karta nie dostaje window.opener,
    • noreferrer - przeglądarka nie wysyła też adresu strony, z której przyszło kliknięcie (nagłówek Referer).

    Chrome, Firefox i Edge od 2021 roku stosują noopener domyślnie przy target="_blank", ale atrybut wpisany jawnie chroni też w starszych przeglądarkach. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

    informacje.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button onclick="showArticle(1)">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 onclick="showArticle(2)">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 onclick="showArticle(3)">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 onclick="showArticle(4)">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>
    <section 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">
        <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>
    </section>
    <script>
        function showArticle(number) {
            document.getElementById('article1').style.display = 'none';
            document.getElementById('article2').style.display = 'none';
            document.getElementById('article3').style.display = 'none';
            document.getElementById('article4').style.display = 'none';
            document.getElementById('article' + number).style.display = 'block';
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (informacje.html)

  47. Krok 47: Zabezpieczenie: skrypt w osobnym pliku, bez onclick

    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.

    Najgroźniejszy atak na strony to XSS - wstrzyknięcie obcego skryptu do treści strony (np. w komentarzu albo ogłoszeniu wpisanym przez użytkownika). Najmocniejsza obrona przeglądarki to nagłówek Content-Security-Policy wysyłany przez serwer, np. script-src 'self': przeglądarka wykonuje wtedy tylko skrypty z plików .js z tego samego serwera, a każdy kod wpisany w HTML - blok <script> i atrybut onclick - blokuje. Wstrzyknięty skrypt przestaje działać, ale razem z nim przestałyby działać przyciski tej strony.

    Dlatego skrypt przechodzi do pliku skrypt.js:

    • funkcja showArticle bez zmian,
    • zamiast atrybutów onclick pętla po przyciskach z addEventListener('click', ...) - przycisk numer i pokazuje artykuł i + 1,
    • w HTML zostaje sam <script src="skrypt.js"></script> na końcu <body>.

    Strona działa tak samo (sprawdzone w Chrome). Na egzaminie wystarczy wersja wcześniejsza - klucz przyjmuje i atrybut onclick, i nasłuchiwanie zdarzeń (R.3.3), a nagłówki CSP ustawia się w konfiguracji serwera, nie w arkuszu.

    informacje.html HTML zmienione: 5 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Gazeta</title>
    <link rel="stylesheet" href="styl3.css">
</head>
<body>
    <header>
        <h1>Gazeta codzienna</h1>
    </header>
    <section id="articles">
        <button>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>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>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>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>
    <section 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">
        <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>
    </section>
    <script src="skrypt.js"></script>
</body>
</html>
    skrypt.js JavaScript nowy plik 
    // skrypt.js - obsługa przycisków sekcji (przeniesiona z informacje.html)
function showArticle(number) {
    document.getElementById('article1').style.display = 'none';
    document.getElementById('article2').style.display = 'none';
    document.getElementById('article3').style.display = 'none';
    document.getElementById('article4').style.display = 'none';
    document.getElementById('article' + number).style.display = 'block';
}

const buttons = document.getElementsByTagName('button');
for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function () {
        showArticle(i + 1);
    });
}
    Podgląd strony po tym kroku (informacje.html)

  48. Etap 6: Oddanie pracy

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

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

    ok. 5 min
    Polecenie z arkusza

    Po zakończeniu pracy utwórz w folderze z numerem, 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 wpisujesz nazwę przeglądarki, w której sprawdzasz stronę.

    W folderze z numerem zdającego muszą być: import.jpg, informacje.html, kw1.png, kw2.png, kw3.png, kw4.png, kwerendy.txt, obraz.jpg, przeglądarka.txt i styl3.css (pliki z archiwum mogą zostać). Wersja z dobrymi praktykami ma jeszcze skrypt.js - arkusz dopuszcza „ewentualnie inne przygotowane pliki”. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego. Pusta lub nieczytelna płyta to zero punktów za wszystkie pięć rezultatów.

    przeglądarka.txt Tekst nowy plik 
    Google Chrome

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

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.

Potwierdzenie

Informacja