Przejdź do głównej treści
E.14-03-22.01-SGStyczeń 2022 · 35 kroków · ok. 57 min · 34 kryteria z klucza

Rozwiązanie krok po kroku: Biuro podróży z obsługą ciasteczek (Nowoczesny kod (flex, jedna zmienna PHP))

To drugi sposób rozwiązania tego samego arkusza. Wynik jest ten sam - strona biuro.php z ciasteczkiem, arkusz stylów styl.css, plik regulamin.txt i cztery obrobione zdjęcia - i tak samo spełnia każde kryterium klucza. Inna jest droga:

  • znaczniki semantyczne: baner to <header>, blok lewy - <main>, blok prawy ze zdjęciami - <aside>, stopka - <footer>,
  • flexbox zamiast float: <body> układa bloki w wiersze, a szerokości 35%/65% z arkusza wyznaczają podział; nie trzeba clear,
  • zmienne CSS dla kolorów, box-sizing: border-box, styl :focus-visible dla nawigacji klawiaturą,
  • PHP z jedną zmienną: $firstVisit liczona raz na początku pliku, w bloku ciasteczek krótki zapis <?= ... ?> z operatorem warunkowym,
  • odnośnik w nowym oknie z rel="noopener" od początku.

To arkusz E.14 ze stycznia 2022 - kwalifikacji formuły 2012, którą zastąpiła INF.03. Zdjęcia pochodzą z oryginalnego archiwum CKE (załącznik na stronie arkusza), skrypt jest uruchomiony naprawdę - dwie wizyty z zapamiętanym ciasteczkiem - a układ zmierzony w Chrome.

Jak liczą się punkty. Klucz ma 34 kryteria (R.1.1 - R.5.5), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 26 punktów - można stracić 8 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem.

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

  1. Etap 1: Grafika

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

    Krok 1: Folder zdającego i archiwum pliki3

    ok. 2 min
    Polecenie z arkusza

    Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie pliki3.zip zabezpieczone hasłem: PodRoz3 Archiwum należy rozpakować. Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj numeru, którym został podpisany arkusz. Rozpakowane pliki umieść w tym folderze. Po zakończonej pracy wyniki zapisz w tym folderze.

    Na pulpicie tworzysz folder nazwany numerem, którym podpisano arkusz (PESEL) - w tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora, Bartosz Bryniarski. Archiwum rozpakowujesz do tego folderu z hasłem PodRoz3 (wielkość liter ma znaczenie). W środku są cztery zdjęcia: grecja.jpg (500 × 310 px), hiszpania.jpg (550 × 341 px), polska.jpg (500 × 375 px, z czarną linią w dolnej części) i wlochy.jpg (500 × 310 px).

    Archiwum do pobrania jest na stronie arkusza w serwisie - CKE wydała je pod nazwą pliki6.zip przy zadaniu ze stycznia 2019, z tym samym hasłem i tymi samymi plikami.

  2. Krok 2: grecja.jpg: rozmycie Gaussa

    Kryteria:

    R.1.1 Obraz grecja.jpg jest w całości rozmyty

    ok. 2 min
    Polecenie z arkusza

    Grafika grecja.jpg powinna być rozmyta za pomocą filtru rozmycie Gaussa. Parametry rozmycia muszą być tak dobrane, aby rozmycie było dobrze widoczne. Przykład pokazano na obrazach 1a i 1b.

    W GIMP-ie: Filtry → Rozmycie → Rozmycie Gaussa. W oknie filtra ustawiasz rozmiar rozmycia - w tym rozwiązaniu 6 px (w GIMP 2.10 pola Rozmiar X/Y to odchylenie standardowe rozmycia). Przy wartości 1-2 rozmycie jest ledwo widoczne, a arkusz wymaga, żeby było „dobrze widoczne” - w całym obrazie, więc filtr nakładasz bez zaznaczenia. Zapis: Plik → Nadpisz grecja.jpg.

    Na podglądzie po lewej oryginał, po prawej obraz po rozmyciu.

    Typowe błędy

    Rozmycie tylko zaznaczonego fragmentu albo tak słabe, że obraz wygląda na ostry - klucz wymaga, by grecja.jpg była rozmyta w całości.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 2

  3. Krok 3: Zrzut ekranu rozmycie.png

    Kryteria:

    R.1.2 Czynność rozmycia obrazu udokumentowano zrzutem ekranu o nazwie rozmycie.png , na którym widoczny jest edytor grafiki oraz okno parametrów filtra rozmycia Gaussa

    ok. 2 min
    Polecenie z arkusza

    Udokumentuj zastosowany na grafice grecja.jpg filtr za pomocą zrzutu ekranu, na którym widoczny jest edytor grafiki oraz okno parametrów filtra. Zrzut zapisz w formacie PNG i nazwij rozmycie. Nie kadruj zrzutu. Powinien on obejmować cały ekran, z widocznym paskiem zadań.

    Zrzut robisz, gdy okno Rozmycie Gaussa jest otwarte z ustawionymi parametrami, a za nim widać okno GIMP-a z obrazem - czyli przed kliknięciem OK w poprzednim kroku. Print Screen kopiuje cały ekran z paskiem zadań, Edycja → Wklej jako → Nowy obraz i Plik → Eksportuj jako rozmycie.png.

    W arkuszu jest literówka „grecja,jpg” (przecinek zamiast kropki) - chodzi o plik grecja.jpg, ten sam, który rozmyto w poprzednim kroku.

    Ten zrzut zależy od Twojego stanowiska, dlatego rozwiązanie nie zawiera pliku - to praca do wykonania na egzaminie.

    Typowe błędy

    Zrzut samego okna albo przycięty - bez paska zadań - nie jest oceniany (uwaga w kluczu przy R.1).

  4. Krok 4: hiszpania.jpg: szerokość 500 px

    Kryteria:

    R.1.3 Przeskalowano obraz hiszpania.jpg z zachowaniem proporcji do szerokości 500 px odpowiadająca temu wysokość wynosi 310 px (± 5 px)

    ok. 2 min
    Polecenie z arkusza

    Grafika hiszpania.jpg powinna być przeskalowana. Należy przeskalować obraz z zachowaniem proporcji do szerokości 500 px.

    Obraz → Skaluj obraz, łańcuch między szerokością a wysokością zamknięty, szerokość 500 px. Wysokość przelicza się sama: 341 × 500 / 550 = 310 px - dokładnie tyle sprawdza klucz (310 px ±5). Zapis: Plik → Nadpisz hiszpania.jpg.

    Typowe błędy

    Rozpięty łańcuch daje 500 × 341 - zdjęcie ściśnięte w poziomie, bez punktu.

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

  5. Krok 5: polska.jpg: odcięcie dołu z czarną linią

    Kryteria:

    R.1.4 Przycięto dół obrazu polska.jpg do czarnej linii, linia nie jest widoczna na obrazie

    ok. 2 min
    Polecenie z arkusza

    Grafika polska.jpg powinna być przycięta. Na oryginale jest widoczna czarna linia - na przyciętym obrazie powinien być widoczny jedynie obszar nad linią. Wygląd grafiki po przycięciu na obrazie 1c.

    Czarna linia biegnie przez całą szerokość zdjęcia w wierszach 310-313 (licząc od góry od zera). Zostawiasz obszar nad nią: Obraz → Rozmiar płótna, łańcuch rozpięty, wysokość 310 px, przesunięcie 0, potem Warstwa → Warstwa do rozmiaru obrazu - albo narzędziem Kadrowanie z polem 0, 0, 500 × 310. Wynik ma 500 × 310 px, jak pozostałe zdjęcia, i nie ma na nim ani jednego wiersza linii.

    Typowe błędy

    Cięcie „na oko” narzędziem kadrowania zostawia na dole jeden-dwa wiersze czarnej linii - powiększ widok, zanim zatwierdzisz.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 5

  6. Krok 6: wlochy.jpg: odcienie szarości

    Kryteria:

    R.1.5 Zapisano obraz wlochy.jpg w odcieniach szarości

    ok. 1 min
    Polecenie z arkusza

    Grafika wlochy.jpg powinna być w odcieniach szarości.

    Obraz → Tryb → Skala szarości i Plik → Nadpisz wlochy.jpg. Tryb skali szarości zapisuje obraz z jednym kanałem jasności - zdjęcie Wenecji staje się czarno-białe, jak na obrazie 2.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 6

  7. Etap 2: Strona biuro.php

    Kroki 7-22 · po tym etapie masz 18 z 34 kryteriów (pkt)

    Krok 7: Plik biuro.php

    ok. 1 min
    Polecenie z arkusza

    Cechy witryny: strona główna o nazwie biuro.php.

    Szkielet HTML5 w pliku z rozszerzeniem .php - strona będzie zawierać skrypt wykonywany na serwerze.

    biuro.php PHP nowy plik 
    <!DOCTYPE html>
<html lang="pl">
<head>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  8. Krok 8: Kodowanie polskich znaków i viewport

    Kryteria:

    R.2.1 Witrynę internetową zapisano w pliku biuro.php oraz zastosowano właściwy standard kodowania polskich znaków

    ok. 1 min
    Polecenie z arkusza

    Zastosowany właściwy standard kodowania polskich znaków.

    <meta charset="UTF-8"> - kodowanie polskich znaków. viewport każe telefonowi wyświetlić stronę w jego rzeczywistej szerokości - arkusz tego nie wymaga, ale należy do każdej współczesnej strony.

    biuro.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  9. Krok 9: Tytuł strony

    Kryteria:

    R.2.2 Nadano tytuł strony: "Turystyka moja pasja"

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony widoczny na karcie przeglądarki „Turystyka moja pasja”.

    <title> - napis na karcie przeglądarki i w wynikach wyszukiwania.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Turystyka moja pasja</title>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  10. Krok 10: Podpięcie arkusza stylów styl.css

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

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

    <link rel="stylesheet" href="styl.css"> w <head> - całe formatowanie w tym jednym pliku (R.3.5).

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  11. Krok 11: Pięć bloków ze znaczników semantycznych

    Kryteria:

    R.2.3 Wygląd strony zdefiniowano dzieląc ją na bloki: baner, blok ciasteczek, lewy, prawy oraz stopkę. Zastosowano znaczniki sekcji

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki: baner, poniżej blok ciasteczek, poniżej dwa bloki: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji, tak, aby układ bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2.

    • baner - <header>, nagłówek strony,
    • blok ciasteczek - <section>,
    • blok lewy - <main>: oferta wycieczek i dokumenty to treść główna,
    • blok prawy - <aside>: galeria zdjęć uzupełnia treść główną,
    • stopka - <footer>.

    Czytnik ekranu pozwala przeskoczyć prosto do <main>, a wyszukiwarka wie, która część strony jest najważniejsza.

    biuro.php PHP zmienione: 10 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="banner">
    </header>
    <section id="cookies">
    </section>
    <main id="left">
    </main>
    <aside id="right">
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  12. Krok 12: Baner: „Podróże z uśmiechem”

    ok. 1 min
    Polecenie z arkusza

    Zawartość banera: nagłówek pierwszego stopnia o treści „Podróże z uśmiechem”.

    <h1> w <header>. Blok ciasteczek wypełni skrypt.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="banner">
        <h1>Podróże z uśmiechem</h1>
    </header>
    <section id="cookies">
    </section>
    <main id="left">
    </main>
    <aside id="right">
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  13. Krok 13: Blok lewy: „Nasze wycieczki”

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku lewego: nagłówek drugiego stopnia o treści: „Nasze wycieczki”.

    Nagłówek <h2> - pierwszy poziom pod <h1> z banera.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="banner">
        <h1>Podróże z uśmiechem</h1>
    </header>
    <section id="cookies">
    </section>
    <main id="left">
        <h2>Nasze wycieczki</h2>
    </main>
    <aside id="right">
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  14. Krok 14: Lista numerowana z dwiema listami punktowanymi

    Kryteria:

    R.2.8 W bloku lewym umieszczono listę numerowaną z zagnieżdżonymi dwiema listami punktowanymi o elementach zgodnych z obrazem 3, zastosowano znaczniki <ol>, <ul>, <li> oraz ich zamknięcia

    ok. 3 min
    Polecenie z arkusza

    Zawartość bloku lewego: lista numerowana (uporządkowana) z dwoma zagnieżdżonymi listami punktowanymi (nieuporządkowanymi), której treść przedstawia obraz 3.

    <ol> z elementami „autokarowe” i „samolotem”; każda lista <ul> stoi wewnątrz swojego <li>, po jego tekście - tak zagnieżdżenie jest poprawne składniowo i czytnik ekranu ogłosi je jako podlistę.

    biuro.php PHP zmienione: 15 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="banner">
        <h1>Podróże z uśmiechem</h1>
    </header>
    <section id="cookies">
    </section>
    <main id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
    </main>
    <aside id="right">
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  15. Krok 15: Blok lewy: „Pobierz dokumenty”

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku lewego: nagłówek drugiego stopnia o treści: „Pobierz dokumenty”.

    Drugi <h2> pod listą.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="banner">
        <h1>Podróże z uśmiechem</h1>
    </header>
    <section id="cookies">
    </section>
    <main id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
    </main>
    <aside id="right">
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  16. Krok 16: Plik regulamin.txt

    ok. 1 min
    Polecenie z arkusza

    Należy utworzyć plik tekstowy o nazwie regulamin.txt, z treścią „Regulamin”.

    Zwykły plik tekstowy (np. w Notatniku) z jednym słowem Regulamin, zapisany w folderze zdającego. Za chwilę strona dostanie do niego odnośnik - kliknięcie wyświetli plik w przeglądarce.

    regulamin.txt Tekst nowy plik 
    Regulamin

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

  17. Krok 17: Akapit z odnośnikiem do regulaminu

    Kryteria: ,

    R.3.2 Na stronie zapisano odnośnik o treści "Regulamin biura podróży", którego kliknięcie powoduje wyświetlenie / pobranie dokumentu regulamin.txt

    R.2.4 W banerze zapisano h1: "Podróże z uśmiechem" oraz w bloku lewym zapisano dwa h2: "Nasze wycieczki" i "Pobierz dokumenty" oraz w bloku lewym zapisano przynajmniej jeden paragraf

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku lewego: akapit (paragraf) o treści „Regulamin biura podróży”, który jest odnośnikiem do dokumentu regulamin.txt.

    Odnośnik względny w akapicie <p>. Blok lewy ma teraz komplet elementów R.2.4: <h1> w banerze, dwa <h2> i paragraf.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="banner">
        <h1>Podróże z uśmiechem</h1>
    </header>
    <section id="cookies">
    </section>
    <main id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
        <p><a href="regulamin.txt">Regulamin biura podróży</a></p>
    </main>
    <aside id="right">
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  18. Krok 18: Akapit z odnośnikiem do galerii w nowym oknie

    Kryteria: ,

    R.3.3 Na stronie zapisano odnośnik o treści "Zdjęcia z naszych wycieczek", którego kliknięcie powoduje otwarcie strony http://galeria.pl

    R.3.4 Odnośnik do strony zewnętrznej otwierany jest w osobnym oknie przeglądarki

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku lewego: akapit o treści „Zdjęcia z naszych wycieczek”, który jest odnośnikiem do strony http://galeria.pl/. Odnośnik otwiera się w osobnym oknie.

    target="_blank" otwiera nową kartę albo okno, a rel="noopener" odcina otwartej stronie dostęp do karty biura (window.opener) - obca strona nie podmieni jej na fałszywą.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="banner">
        <h1>Podróże z uśmiechem</h1>
    </header>
    <section id="cookies">
    </section>
    <main id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
        <p><a href="regulamin.txt">Regulamin biura podróży</a></p>
        <p><a href="http://galeria.pl/" target="_blank" rel="noopener">Zdjęcia z naszych wycieczek</a></p>
    </main>
    <aside id="right">
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  19. Krok 19: Blok prawy: tabela 2 × 2 ze zdjęciami

    Kryteria: ,

    R.2.5 W bloku prawym zapisano tabelę o wymiarze: 2 x 2, zastosowano znaczniki <table>, <tr>, <td> oraz ich zamknięcia

    R.2.6 W komórkach tabeli umieszczono obrazy: polska.jpg, wlochy.jpg, grecja.jpg, hiszpania.jpg , ich rozmieszczenie jest zgodne z obrazem 2 arkusza

    ok. 2 min
    Polecenie z arkusza

    Zawartość bloku prawego: tabela 2x2, w komórkach tabeli znajdują się obrazy, kolejno: polska.jpg, wlochy.jpg, grecja.jpg, hiszpania.jpg.

    Arkusz i klucz wymagają tabeli (<table>, <tr>, <td>), więc zostaje tabela, choć dziś galerię zdjęć układa się raczej siatką CSS - tabela służy do danych w wierszach i kolumnach. Kolejność: Kraków, Wenecja, Grecja, Barcelona.

    biuro.php PHP zmienione: 10 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="banner">
        <h1>Podróże z uśmiechem</h1>
    </header>
    <section id="cookies">
    </section>
    <main id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
        <p><a href="regulamin.txt">Regulamin biura podróży</a></p>
        <p><a href="http://galeria.pl/" target="_blank" rel="noopener">Zdjęcia z naszych wycieczek</a></p>
    </main>
    <aside id="right">
        <table>
            <tr>
                <td><img src="polska.jpg"></td>
                <td><img src="wlochy.jpg"></td>
            </tr>
            <tr>
                <td><img src="grecja.jpg"></td>
                <td><img src="hiszpania.jpg"></td>
            </tr>
        </table>
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  20. Krok 20: Teksty alternatywne: Kraków i Wenecja

    Kryteria:

    R.2.7 Nadano tekst alternatywny dla przynajmniej dwóch obrazów: „Zwiedzanie Krakowa” - polska.jpg ; " Wenecja i nie tylko" - wlochy.jpg ; „Gorące greckie wyspy” - grecja.jpg ; „Słoneczna Barcelona” - hiszpania.jpg

    ok. 1 min
    Polecenie z arkusza

    W komórkach tabeli znajdują się obrazy, kolejno: polska.jpg z tekstem alternatywnym „Zwiedzanie Krakowa”, wlochy.jpg z tekstem alternatywnym „Wenecja i nie tylko”.

    alt opisuje zdjęcie dla czytnika ekranu i wyświetla się, gdy obraz się nie wczyta.

    biuro.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="banner">
        <h1>Podróże z uśmiechem</h1>
    </header>
    <section id="cookies">
    </section>
    <main id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
        <p><a href="regulamin.txt">Regulamin biura podróży</a></p>
        <p><a href="http://galeria.pl/" target="_blank" rel="noopener">Zdjęcia z naszych wycieczek</a></p>
    </main>
    <aside id="right">
        <table>
            <tr>
                <td><img src="polska.jpg" alt="Zwiedzanie Krakowa"></td>
                <td><img src="wlochy.jpg" alt="Wenecja i nie tylko"></td>
            </tr>
            <tr>
                <td><img src="grecja.jpg"></td>
                <td><img src="hiszpania.jpg"></td>
            </tr>
        </table>
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  21. Krok 21: Teksty alternatywne: Grecja i Barcelona

    ok. 1 min
    Polecenie z arkusza

    Dalej: grecja.jpg z tekstem alternatywnym „Gorące greckie wyspy”, hiszpania.jpg z tekstem alternatywnym „Słoneczna Barcelona”.

    Dwa pozostałe teksty - komplet czterech.

    biuro.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="banner">
        <h1>Podróże z uśmiechem</h1>
    </header>
    <section id="cookies">
    </section>
    <main id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
        <p><a href="regulamin.txt">Regulamin biura podróży</a></p>
        <p><a href="http://galeria.pl/" target="_blank" rel="noopener">Zdjęcia z naszych wycieczek</a></p>
    </main>
    <aside id="right">
        <table>
            <tr>
                <td><img src="polska.jpg" alt="Zwiedzanie Krakowa"></td>
                <td><img src="wlochy.jpg" alt="Wenecja i nie tylko"></td>
            </tr>
            <tr>
                <td><img src="grecja.jpg" alt="Gorące greckie wyspy"></td>
                <td><img src="hiszpania.jpg" alt="Słoneczna Barcelona"></td>
            </tr>
        </table>
    </aside>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  22. Krok 22: Stopka: autor strony

    Kryteria:

    R.2.9 W stopce umieszczono numer zdającego

    ok. 1 min
    Polecenie z arkusza

    Zawartość stopki: tekst „Stronę przygotował: ”, dalej wstawiony numer zdającego.

    Na egzaminie numer zdającego - tu imię i nazwisko autora.

    biuro.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="banner">
        <h1>Podróże z uśmiechem</h1>
    </header>
    <section id="cookies">
    </section>
    <main id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
        <p><a href="regulamin.txt">Regulamin biura podróży</a></p>
        <p><a href="http://galeria.pl/" target="_blank" rel="noopener">Zdjęcia z naszych wycieczek</a></p>
    </main>
    <aside id="right">
        <table>
            <tr>
                <td><img src="polska.jpg" alt="Zwiedzanie Krakowa"></td>
                <td><img src="wlochy.jpg" alt="Wenecja i nie tylko"></td>
            </tr>
            <tr>
                <td><img src="grecja.jpg" alt="Gorące greckie wyspy"></td>
                <td><img src="hiszpania.jpg" alt="Słoneczna Barcelona"></td>
            </tr>
        </table>
    </aside>
    <footer>
        Stronę przygotował: Bartosz Bryniarski
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  23. Etap 3: Styl CSS

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

    Krok 23: Plik styl.css: zmienne, border-box i krój Georgia

    Kryteria:

    R.4.1 Ustawiono domyślny krój czcionki dla całej strony na Georgia (dla * lub html, lub body, lub kontenera całej strony)

    ok. 2 min
    Polecenie z arkusza

    Cechy formatowania CSS: wspólne dla całej strony: krój czcionki Georgia.

    • zmienne CSS w :root - kolory z arkusza pod nazwami opisującymi rolę, używane dalej przez var(...),
    • box-sizing: border-box - szerokość obejmuje dopełnienie, więc blok z padding i szerokością 100% nie wystaje poza okno,
    • krój Georgia z zapasowym serif.
    styl.css CSS nowy plik 
    :root {
    --indigo: Indigo;
    --cookies: #A1887F;
    --panel: #D7CCC8;
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    font-family: Georgia, serif;
}
    Podgląd strony po tym kroku (biuro.php)

  24. Krok 24: Baner i stopka

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla banera i stopki: kolor tła Indigo, biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 7 px.

    Indigo, biały tekst, wyśrodkowanie, dopełnienie 7 px. width: 100% - w układzie flex blok na całą szerokość zajmuje osobny wiersz.

    styl.css CSS zmienione: 8 linii 
    :root {
    --indigo: Indigo;
    --cookies: #A1887F;
    --panel: #D7CCC8;
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    font-family: Georgia, serif;
}

#banner, footer {
    background-color: var(--indigo);
    color: white;
    text-align: center;
    padding: 7px;
    width: 100%;
}
    Podgląd strony po tym kroku (biuro.php)

  25. Krok 25: Blok ciasteczek

    Kryteria: ,

    R.4.6 Ustawiono wyrównanie tekstu do środka dla banera i stopki oraz do prawej strony dla bloku ciasteczek

    R.4.7 Ustawiono marginesy wewnętrzne (padding) 7px dla banera i stopki, 10px dla bloku ciasteczek

    ok. 1 min
    Polecenie z arkusza

    Dla bloku ciasteczek: kolor tła #A1887F, biały kolor czcionki, marginesy wewnętrzne 10 px, wyrównanie tekstu do prawej strony.

    Kolor ze zmiennej --cookies (#A1887F), tekst przy prawej krawędzi, pełna szerokość wiersza.

    styl.css CSS zmienione: 8 linii 
    :root {
    --indigo: Indigo;
    --cookies: #A1887F;
    --panel: #D7CCC8;
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    font-family: Georgia, serif;
}

#banner, footer {
    background-color: var(--indigo);
    color: white;
    text-align: center;
    padding: 7px;
    width: 100%;
}

#cookies {
    background-color: var(--cookies);
    color: white;
    padding: 10px;
    text-align: right;
    width: 100%;
}
    Podgląd strony po tym kroku (biuro.php)

  26. Krok 26: Blok lewy

    ok. 1 min
    Polecenie z arkusza

    Dla bloku lewego: kolor tła #D7CCC8, szerokość 35%, wysokość 550 px.

    35% szerokości, 550 px wysokości, kolor ze zmiennej --panel.

    styl.css CSS zmienione: 6 linii 
    :root {
    --indigo: Indigo;
    --cookies: #A1887F;
    --panel: #D7CCC8;
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    font-family: Georgia, serif;
}

#banner, footer {
    background-color: var(--indigo);
    color: white;
    text-align: center;
    padding: 7px;
    width: 100%;
}

#cookies {
    background-color: var(--cookies);
    color: white;
    padding: 10px;
    text-align: right;
    width: 100%;
}

#left {
    background-color: var(--panel);
    width: 35%;
    height: 550px;
}
    Podgląd strony po tym kroku (biuro.php)

  27. Krok 27: Blok prawy

    Kryteria: ,

    R.4.2 Ustawiono kolor tła Indigo dla banera i stopki, #A1887F dla bloku ciasteczek oraz #D7CCC8 dla bloków prawego i lewego

    R.4.5 Ustawiono szerokość bloku lewego 35% i prawego 65%

    ok. 1 min
    Polecenie z arkusza

    Dla bloku prawego: kolor tła #D7CCC8, szerokość 65%, wysokość 550 px.

    Ten sam kolor ze zmiennej i wysokość, 65% szerokości. Gdyby oba panele miały kiedyś inny kolor, wystarczy zmienić jedną wartość w :root.

    styl.css CSS zmienione: 6 linii 
    :root {
    --indigo: Indigo;
    --cookies: #A1887F;
    --panel: #D7CCC8;
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    font-family: Georgia, serif;
}

#banner, footer {
    background-color: var(--indigo);
    color: white;
    text-align: center;
    padding: 7px;
    width: 100%;
}

#cookies {
    background-color: var(--cookies);
    color: white;
    padding: 10px;
    text-align: right;
    width: 100%;
}

#left {
    background-color: var(--panel);
    width: 35%;
    height: 550px;
}

#right {
    background-color: var(--panel);
    width: 65%;
    height: 550px;
}
    Podgląd strony po tym kroku (biuro.php)

  28. Krok 28: Układ: flexbox z zawijaniem

    Kryteria:

    R.3.1 Układ bloków po uruchomieniu strony w przeglądarce jest zgodny z Obrazem 2 w arkuszu egzaminacyjnym

    ok. 3 min
    Polecenie z arkusza

    Podział strony na bloki: baner, poniżej blok ciasteczek, poniżej dwa bloki: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji, tak, aby układ bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2.

    <body> jako kontener flex z flex-wrap: wrap: bloki stoją obok siebie, a gdy następny się nie mieści, przechodzi do nowego wiersza. Baner i blok ciasteczek (100%) zajmują po wierszu, blok lewy 35% i prawy 65% dzielą jeden wiersz, stopka zaczyna ostatni. margin: 0 usuwa domyślny odstęp strony od krawędzi okna - jak na obrazie 2.

    Pomiar w Chrome przy oknie 1280 px: blok lewy 448 px, prawy 832 px, oba 550 px wysokości, stopka tuż pod nimi, bez poziomego paska przewijania.

    styl.css CSS zmienione: 6 linii 
    :root {
    --indigo: Indigo;
    --cookies: #A1887F;
    --panel: #D7CCC8;
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    font-family: Georgia, serif;
}

body {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

#banner, footer {
    background-color: var(--indigo);
    color: white;
    text-align: center;
    padding: 7px;
    width: 100%;
}

#cookies {
    background-color: var(--cookies);
    color: white;
    padding: 10px;
    text-align: right;
    width: 100%;
}

#left {
    background-color: var(--panel);
    width: 35%;
    height: 550px;
}

#right {
    background-color: var(--panel);
    width: 65%;
    height: 550px;
}
    Podgląd strony po tym kroku (biuro.php)

  29. Krok 29: Lista punktowana i odnośniki w kolorze Indigo

    Kryteria:

    R.4.3 Ustawiono biały kolor czcionki dla banera, bloku ciasteczek i stopki oraz Indigo dla listy punktowanej i odnośnika

    ok. 2 min
    Polecenie z arkusza

    Wspólne dla selektora listy punktowanej oraz odnośnika: kolor czcionki Indigo.

    Selektor ul, a - obie listy punktowane i oba odnośniki. Dodatkowo :focus-visible: odnośnik wybrany klawiszem Tab dostaje wyraźną ramkę w tym samym kolorze - osoba bez myszy widzi, gdzie jest.

    styl.css CSS zmienione: 9 linii 
    :root {
    --indigo: Indigo;
    --cookies: #A1887F;
    --panel: #D7CCC8;
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    font-family: Georgia, serif;
}

body {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

#banner, footer {
    background-color: var(--indigo);
    color: white;
    text-align: center;
    padding: 7px;
    width: 100%;
}

#cookies {
    background-color: var(--cookies);
    color: white;
    padding: 10px;
    text-align: right;
    width: 100%;
}

#left {
    background-color: var(--panel);
    width: 35%;
    height: 550px;
}

#right {
    background-color: var(--panel);
    width: 65%;
    height: 550px;
}

ul, a {
    color: var(--indigo);
}

a:focus-visible {
    outline: 2px solid var(--indigo);
    outline-offset: 2px;
}
    Podgląd strony po tym kroku (biuro.php)

  30. Krok 30: Obrazy: wysokość, marginesy, rogi i cień pod kursorem

    Kryteria: , , ,

    R.4.4 Ustawiono wysokość bloku lewego i prawego na 550px oraz 240px dla obrazu

    R.4.8 Ustawiono marginesy zewnętrzne (margin) 6px dla obrazu

    R.4.9 Ustawiono zaokrąglenie rogów 20px dla obrazu (border-radius)

    R.4.10 Gdy kursor myszy znajdzie się na obrazie dodawany jest cień o parametrach: bez przesunięcia, rozmycie 10px, szerokość rozmycia 2px kolor Indigo np. box-shadow: 0 0 10px 2px Indigo;

    ok. 2 min
    Polecenie z arkusza

    Dla selektora obrazu: wysokość 240 px, marginesy zewnętrzne 6 px, zaokrąglenie rogów 20 px.

    height: 240px - szerokość przeglądarka dobiera proporcjonalnie (387 px), margin: 6px, border-radius: 20px. Druga reguła img:hover dodaje cień: bez przesunięcia (0 0), rozmycie 10px, rozciągnięcie 2px, kolor Indigo.

    styl.css CSS zmienione: 10 linii 
    :root {
    --indigo: Indigo;
    --cookies: #A1887F;
    --panel: #D7CCC8;
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    font-family: Georgia, serif;
}

body {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

#banner, footer {
    background-color: var(--indigo);
    color: white;
    text-align: center;
    padding: 7px;
    width: 100%;
}

#cookies {
    background-color: var(--cookies);
    color: white;
    padding: 10px;
    text-align: right;
    width: 100%;
}

#left {
    background-color: var(--panel);
    width: 35%;
    height: 550px;
}

#right {
    background-color: var(--panel);
    width: 65%;
    height: 550px;
}

ul, a {
    color: var(--indigo);
}

a:focus-visible {
    outline: 2px solid var(--indigo);
    outline-offset: 2px;
}

img {
    height: 240px;
    margin: 6px;
    border-radius: 20px;
}

img:hover {
    box-shadow: 0 0 10px 2px var(--indigo);
}
    Podgląd strony po tym kroku (biuro.php)

  31. Etap 4: Skrypt PHP

    Kroki 31-32 · po tym etapie masz 34 z 34 kryteriów (pkt)

    Krok 31: Zmienna $firstVisit i ciasteczko

    Kryteria: , ,

    R.5.1 Skrypt lub skrypty napisano w języku uruchamianym po stronie serwera, zawierają przynajmniej jedną zgodną ze składnią instrukcję

    R.5.2 W skrypcie zastosowano funkcję ustawiającą ciasteczko o nazwie „ciastko” i zawartości „1”. Np. setcookie("ciastko", "1");

    R.5.3 Funkcja setcookie jest wołana tylko, gdy nie jest ustawione ciasteczko

    ok. 3 min
    Polecenie z arkusza

    Skrypt w przypadku, gdy witryna jest wyświetlona po raz pierwszy: tworzy ciasteczko o nazwie „ciastko” i zawartości „1”, pozostałe parametry funkcji przyjmują wartości domyślne.

    Na samym początku pliku, przed <!DOCTYPE html> - ciasteczko to nagłówek HTTP, który musi wyjść przed treścią strony. Odpowiedź na pytanie „czy to pierwsza wizyta?” trafia raz do zmiennej $firstVisit (true, gdy przeglądarka nie odesłała ciasteczka), a setcookie('ciastko', '1') z parametrami domyślnymi wykonuje się tylko wtedy.

    Sprawdzone na serwerze: bez ciasteczka odpowiedź ma nagłówek Set-Cookie: ciastko=1, z ciasteczkiem - nie ma go.

    biuro.php PHP zmienione: 7 linii 
    <?php
$firstVisit = !isset($_COOKIE['ciastko']);

if ($firstVisit) {
    setcookie('ciastko', '1');
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="banner">
        <h1>Podróże z uśmiechem</h1>
    </header>
    <section id="cookies">
    </section>
    <main id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
        <p><a href="regulamin.txt">Regulamin biura podróży</a></p>
        <p><a href="http://galeria.pl/" target="_blank" rel="noopener">Zdjęcia z naszych wycieczek</a></p>
    </main>
    <aside id="right">
        <table>
            <tr>
                <td><img src="polska.jpg" alt="Zwiedzanie Krakowa"></td>
                <td><img src="wlochy.jpg" alt="Wenecja i nie tylko"></td>
            </tr>
            <tr>
                <td><img src="grecja.jpg" alt="Gorące greckie wyspy"></td>
                <td><img src="hiszpania.jpg" alt="Słoneczna Barcelona"></td>
            </tr>
        </table>
    </aside>
    <footer>
        Stronę przygotował: Bartosz Bryniarski
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  32. Krok 32: Komunikat w bloku ciasteczek

    Kryteria: ,

    R.5.4 Na stronie, która jest otwarta w przeglądarce po raz pierwszy, skrypt wyświetla komunikat "Witaj! Nasza strona używa ciasteczek" w bloku ciasteczek

    R.5.5 Na stronie, która jest otwarta w przeglądarce po raz kolejny, skrypt wyświetla komunikat "Witaj ponownie na naszej stronie"

    ok. 3 min
    Polecenie z arkusza

    Skrypt w przypadku, gdy witryna jest wyświetlona po raz pierwszy: wyświetla tekst w akapicie (paragrafie) o treści: „Witaj! Nasza strona używa ciasteczek”.

    <?= ... ?> to skrót od <?php echo ... ?>. Operator warunkowy warunek ? a : b wybiera jeden z dwóch tekstów: przy pierwszej wizycie „Witaj! Nasza strona używa ciasteczek”, przy kolejnej - „Witaj ponownie na naszej stronie” (to też spełnia drugie wymaganie arkusza: „W przypadku, gdy witryna jest wyświetlona po raz kolejny, skrypt wyświetla w akapicie tekst o treści „Witaj ponownie na naszej stronie””). Akapit <p> stoi w HTML-u, PHP wstawia tylko tekst.

    Sprawdzone na serwerze z zapamiętanym ciasteczkiem: pierwsze wczytanie - powitanie z informacją o ciasteczkach, drugie (na podglądzie) - „Witaj ponownie”.

    biuro.php PHP zmienione: 1 linia 
    <?php
$firstVisit = !isset($_COOKIE['ciastko']);

if ($firstVisit) {
    setcookie('ciastko', '1');
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Turystyka moja pasja</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header id="banner">
        <h1>Podróże z uśmiechem</h1>
    </header>
    <section id="cookies">
        <p><?= $firstVisit ? 'Witaj! Nasza strona używa ciasteczek' : 'Witaj ponownie na naszej stronie' ?></p>
    </section>
    <main id="left">
        <h2>Nasze wycieczki</h2>
        <ol>
            <li>autokarowe
                <ul>
                    <li>po Polsce</li>
                    <li>do Niemiec i Czech</li>
                </ul>
            </li>
            <li>samolotem
                <ul>
                    <li>Grecja</li>
                    <li>Barcelona</li>
                    <li>Wenecja</li>
                </ul>
            </li>
        </ol>
        <h2>Pobierz dokumenty</h2>
        <p><a href="regulamin.txt">Regulamin biura podróży</a></p>
        <p><a href="http://galeria.pl/" target="_blank" rel="noopener">Zdjęcia z naszych wycieczek</a></p>
    </main>
    <aside id="right">
        <table>
            <tr>
                <td><img src="polska.jpg" alt="Zwiedzanie Krakowa"></td>
                <td><img src="wlochy.jpg" alt="Wenecja i nie tylko"></td>
            </tr>
            <tr>
                <td><img src="grecja.jpg" alt="Gorące greckie wyspy"></td>
                <td><img src="hiszpania.jpg" alt="Słoneczna Barcelona"></td>
            </tr>
        </table>
    </aside>
    <footer>
        Stronę przygotował: Bartosz Bryniarski
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (biuro.php)

  33. Etap 5: Porównanie z wersją podstawową

    Kroki 33-34 · po tym etapie masz 34 z 34 kryteriów (pkt)

    Krok 33: HTML i CSS: co się zmieniło

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki: baner, poniżej blok ciasteczek, poniżej dwa bloki: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji, tak, aby układ bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2.

    • znaczniki: <header>, <main>, <aside>, <footer> zamiast pięciu <section> - przeglądarka i czytnik ekranu wiedzą, gdzie jest nagłówek, treść główna i stopka,
    • układ: jeden display: flex z flex-wrap na <body> zamiast float w dwóch blokach i clear w stopce,
    • kolory ze zmiennych CSS, box-sizing: border-box, ramka :focus-visible dla klawiatury,
    • odnośnik w nowym oknie z rel="noopener" od pierwszej wersji.

    Klucz ocenia efekt (układ zgodny z obrazem 2, cechy stylu) - obie wersje dostają te same punkty.

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

  34. Krok 34: PHP: dwa sprawdzenia a jedna zmienna

    ok. 2 min
    Polecenie z arkusza

    Skrypt w przypadku, gdy witryna jest wyświetlona po raz pierwszy: tworzy ciasteczko o nazwie „ciastko” i zawartości „1”, pozostałe parametry funkcji przyjmują wartości domyślne.

    • wersja podstawowa sprawdza isset($_COOKIE['ciastko']) dwa razy - na początku pliku i w bloku ciasteczek; zmiana nazwy ciasteczka wymaga poprawki w dwóch miejscach,
    • tu odpowiedź jest liczona raz i zapisana w $firstVisit, a w HTML-u stoi tylko <?= ... ?> z operatorem warunkowym - kod PHP w treści strony jest krótszy niż sam akapit,
    • parametry ciasteczka zostają domyślne w obu wersjach, bo tak każe arkusz; wersja podstawowa w etapie dobrych praktyk pokazuje opcje httponly i samesite, których używa się w prawdziwych serwisach.

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

  35. Etap 6: Oddanie pracy

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

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

    ok. 3 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 weryfikowałeś poprawność działania witryny. Nagraj płytę z rezultatami pracy. W folderze powinny się znajdować pliki: biuro.php, grecja.jpg, hiszpania.jpg, polska.jpg, przeglądarka.txt, regulamin.txt, rozmycie.png, styl.css, wlochy.jpg, ewentualnie inne przygotowane pliki.

    W przeglądarka.txt nazwa przeglądarki, w której sprawdzasz stronę. W folderze zdającego: biuro.php, grecja.jpg, hiszpania.jpg, polska.jpg, przeglądarka.txt, regulamin.txt, rozmycie.png, styl.css i wlochy.jpg. Stronę sprawdzasz przez serwer (XAMPP, adres http://localhost/...), nie przez otwarcie pliku - plik .php otwarty z dysku pokaże kod zamiast wyniku. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.

    przeglądarka.txt Tekst nowy plik 
    Google Chrome

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

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