Przejdź do głównej treści
EE.09-07-22.01-SGStyczeń 2022 · 33 kroki · ok. 70 min · 33 kryteria z klucza

Rozwiązanie krok po kroku: Galeria zdjęć z ciekawych miejsc (Wersja podstawowa)

Galeria zdjęć z ciekawych miejsc: baza podroze z tabelami samolotów, odlotów i przylotów (samolot ma wiele lotów - relacja 1..n), cztery zapytania - przyloty bez statusu, odloty boeingów 787 (JOIN), rejsy z „LX” w numerze (LIKE) i zmiana nazwy linii (UPDATE). Do tego zdjęcie przeskalowane do szerokości 350 px, strona galeria.html z dużym zdjęciem, paskiem miniatur, tabelką i ikoną „Polub nas”, style w styl7.css oraz skrypt w JavaScript: kliknięcie miniatury pokazuje ją w bloku głównym, a kliknięcie serca przełącza je między pustym a pełnym.

To arkusz EE.09 ze stycznia 2022 - 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, polami i zdarzeniami z tabeli 1 arkusza (onclick, src, indexOf). Strona nie ma PHP, więc podgląd od kroku z HTML-em to działająca strona - miniatury można klikać.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (flex, addEventListener)” jest drugi sposób rozwiązania tego samego arkusza: semantyczne znaczniki z układem flex, zmienne CSS i skrypt w osobnym pliku, podpięty przez addEventListener - obie wersje są zgodne z kluczem.

Baza i zdjęcia pochodzą z oryginalnego archiwum CKE pliki7 (załącznik do pobrania na stronie arkusza, hasło w treści zadania). Zapytania i zrzuty są policzone na MariaDB 10.4, a działanie skryptu sprawdzone w Chrome.

Jak liczą się punkty. Klucz ma 33 kryteria (R.1.1 - R.5.4), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 25 punktów (75% z 33 to 24,75, zaokrąglone w górę) - można stracić 8 kryteriów i nadal zdać. Przełączanie ikony serca arkusz wymaga, ale klucz go nie punktuje. Przy każdym kroku jest napisane, które kryteria spełnia.

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 33 kryteriów (pkt)

    Krok 1: Folder zdającego i archiwum pliki7

    ok. 2 min
    Polecenie z arkusza

    Należy utworzyć folder o nazwie odpowiadającej numerowi PESEL zdającego lub w przypadku jego braku innemu numerowi, którym został podpisany arkusz. Archiwum należy rozpakować do tego folderu. Wszystkie wykonane w czasie egzaminu pliki w tym zrzuty ekranu, pliki strony, stylów należy umieścić 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 pliki7.zip rozpakowujesz do tego folderu, podając hasło {Ciekaw3Zdjecia} (z nawiasami klamrowymi i cyfrą 3 zamiast „e”). W środku są: podroze.sql, pięć zdjęć (lanzarotte.jpg, pekin.jpg, serengeti.jpg, tajlandia.jpg, wenecja.jpg) i dwie ikony serca: icon-off.png i icon-on.png.

  2. Krok 2: XAMPP i pusta baza podroze

    ok. 2 min
    Polecenie z arkusza

    Uruchom usługi MySQL i Apache za pomocą XAMPP Control Panel. Za pomocą narzędzia phpMyAdmin wykonaj podane operacje na bazie danych: Utwórz bazę danych o nazwie podroze

    W XAMPP Control Panel Start przy Apache i MySQL, potem http://localhost/phpmyadmin, Nowa, nazwa podroze (bez polskich liter), Utwórz. Strona tego zadania nie łączy się z bazą - baza służy tylko do czterech zapytań.

  3. Krok 3: Import pliku podroze.sql i zrzut egzamin.jpg

    Kryteria:

    R.1.1 Wykonano import tabel do bazy podroze , czynność udokumentowano plikiem o nazwie egzamin w formacie JPEG

    ok. 3 min
    Polecenie z arkusza

    Do bazy podroze zaimportuj plik podroze.sql z rozpakowanego archiwum. Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w folderze z numerem PESEL lub w przypadku jego braku w folderze z innym numerem, którym został podpisany arkusz, w formacie JPEG o nazwie egzamin. 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ę podroze, karta Import, Wybierz plik → podroze.sql, Wykonaj. Plik tworzy trzy tabele: samoloty (4 wiersze), odloty (10) i przyloty (8). Każdy lot ma kolumnę samoloty_id - numer samolotu, który go obsługuje. Na zrzucie widać zielony komunikat o sukcesie i trzy tabele w lewym panelu.

    Zrzut całego ekranu z paskiem zadań zapisujesz jako egzamin.jpg.

    Typowe błędy

    Zrzut importu ma być w JPEG, a zrzuty zapytań w PNG.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 3

  4. Krok 4: Zapytanie 1: przyloty bez statusu lotu

    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 pola kierunek i czas z tabeli przyloty dla lotów, które nie mają wpisu w polu status_lotu. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT kierunek, czas FROM przyloty WHERE status_lotu = ""; oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczne są jedynie kolumny kierunek i czas, jedynie rekordy dla miast: Wiedeń, Berlin, Hamburg, Monachium, Zurych

    ok. 3 min
    Polecenie z arkusza

    Zapisz i wykonaj zapytania SQL działające na bazie podroze. Zapytania zapisz w pliku kwerendy.txt, w folderze z numerem PESEL lub w przypadku jego braku w folderze z innym numerem, którym został podpisany arkusz. 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 pola kierunek i czas z tabeli przyloty dla lotów, które nie mają wpisu w polu status_lotu

    • SELECT kierunek, czas - tylko dwie kolumny,
    • FROM przyloty,
    • WHERE status_lotu = '' - pole z pustym napisem.

    „Brak wpisu” w tej bazie to pusty napis, a nie NULL - sprawdzone: żaden z 8 przylotów nie ma w tej kolumnie NULL, a pięć ma ''. Dlatego działa = '', a IS NULL zwróciłoby pusty wynik. Wynik: Wieden, Berlin, Hamburg, Monachium, Zurych z godzinami (w bazie „Wieden” bez „ń” - tabela ma kodowanie latin1). Zapytanie kopiujesz do nowego pliku kwerendy.txt, zrzut - do kw1.png.

    Typowe błędy

    Na egzaminie dobrze jest najpierw obejrzeć dane: SELECT * FROM przyloty pokaże, czy puste pola to NULL (phpMyAdmin pisze wtedy kursywą NULL), czy puste napisy. Bezpieczny warunek na oba przypadki: WHERE status_lotu = '' OR status_lotu IS NULL.

    kwerendy.txt Tekst nowy plik 
    -- Zapytanie 1
SELECT kierunek, czas FROM przyloty WHERE status_lotu = '';
    Podgląd strony po tym kroku
    Podgląd strony po kroku 4

  5. Krok 5: Zapytanie 2: odloty samolotów Boening 787

    Kryteria:

    R.1.4 Utworzono zapytanie 2 wybierające pola kierunek i dzien z tabeli odloty dla lotów obsługiwanych samolotem typu boening 787. Zapytanie wykorzystuje relację, w klauzuli warunku jest sprawdzany typ samolotu. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT kierunek, dzien FROM odloty JOIN samoloty ON odloty.samoloty_id = samoloty.id WHERE samoloty.typ = "boening 787"; możliwe również INNER JOIN lub przyrównanie kluczy w warunku oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczne są jedynie kolumny kierunek i dzień dla: Neapol, ALICANTE, Londyn LT, Malta, Wiedeń

    ok. 4 min
    Polecenie z arkusza

    Zapytanie 2: wybierające pola kierunek i dzien z tabeli odloty dla lotów obsługiwanych samolotem typu Boening 787. Zapytanie wykorzystuje relację, w klauzuli warunku jest sprawdzany typ samolotu

    Typ samolotu jest w tabeli samoloty, a loty w odloty - łączy je relacja przez samoloty_id:

    • SELECT kierunek, dzien,
    • FROM odloty JOIN samoloty ON odloty.samoloty_id = samoloty.id - do każdego odlotu jego samolot,
    • WHERE samoloty.typ = 'Boening 787' - warunek na typie samolotu.

    Typ wpisujesz dokładnie tak, jak w bazie i w arkuszu: „Boening” (poprawnie producent nazywa się Boeing, ale zapytanie porównuje napisy, a w tabeli jest literówka). Boeingi 787 to samoloty nr 1 i 3, a ich odloty to Neapol, ALICANTE, Londyn LT, Malta, Wieden - wszystkie 25 lipca 2019. Zrzut: kw2.png.

    Typowe błędy

    WHERE typ = 'Boeing 787' (poprawna pisownia) zwróci pusty wynik - baza ma „Boening”.

    kwerendy.txt Tekst zmienione: 5 linii 
    -- Zapytanie 1
SELECT kierunek, czas FROM przyloty WHERE status_lotu = '';

-- Zapytanie 2
SELECT kierunek, dzien
FROM odloty JOIN samoloty ON odloty.samoloty_id = samoloty.id
WHERE samoloty.typ = 'Boening 787';
    Podgląd strony po tym kroku
    Podgląd strony po kroku 5

  6. Krok 6: Zapytanie 3: rejsy z „LX” w numerze

    Kryteria:

    R.1.5 Utworzono zapytanie 3 wybierające numer rejsu i kierunek z tabeli przyloty dla rejsów, których numer zawiera w dowolnym miejscu ciąg znaków LX. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT nr_rejsu, kierunek FROM przyloty WHERE nr_rejsu LIKE "%LX%"; oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczne są jedynie kolumny nr_rejsu i kierunek, jedynie dla lotów: LX3447, LX5473, LX5728

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 3: wybierające numer rejsu i kierunek z tabeli przyloty dla rejsów, których numer zawiera w dowolnym miejscu ciąg znaków LX

    • SELECT nr_rejsu, kierunek FROM przyloty,
    • WHERE nr_rejsu LIKE '%LX%' - LIKE porównuje z wzorcem, a % oznacza dowolny ciąg znaków (także pusty). %LX% to „LX gdziekolwiek”: na początku, w środku albo na końcu.

    Wynik: LX3447, LX5473, LX5728 (rejsy linii SWISS, której kod to LX). Zrzut: kw3.png.

    Typowe błędy

    LIKE 'LX%' szuka tylko numerów zaczynających się od LX - tu wynik byłby ten sam, ale arkusz każe szukać „w dowolnym miejscu”, a klucz ocenia zapytanie uniwersalne.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT kierunek, czas FROM przyloty WHERE status_lotu = '';

-- Zapytanie 2
SELECT kierunek, dzien
FROM odloty JOIN samoloty ON odloty.samoloty_id = samoloty.id
WHERE samoloty.typ = 'Boening 787';

-- Zapytanie 3
SELECT nr_rejsu, kierunek FROM przyloty WHERE nr_rejsu LIKE '%LX%';
    Podgląd strony po tym kroku
    Podgląd strony po kroku 6

  7. Krok 7: Zapytanie 4: linia SWISS zmienia nazwę na SWISS2

    Kryteria:

    R.1.6 Utworzono zapytanie 4 uaktualniające pole linie w tabeli samoloty . Firma SWISS zmieniła swoją nazwę na SWISS2. W pliku z kwerendami lub na zrzucie istnieje zapis np.: UPDATE samoloty SET linie="SWISS2" WHERE linie = "SWISS"; oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczny jest efekt poprawnie wykonanego zapytania

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 4: uaktualniające pole linie w tabeli samoloty. Firma SWISS zmieniła swoją nazwę na SWISS2

    • UPDATE samoloty - zmiana danych w tabeli,
    • SET linie = 'SWISS2' - nowa wartość kolumny,
    • WHERE linie = 'SWISS' - tylko w wierszach starej nazwy.

    phpMyAdmin odpowiada „Zmieniono rekordów: 1” - linie SWISS ma jeden samolot (nr 3). Zrzut: kw4.png; kwerendy.txt ma komplet czterech zapytań.

    Typowe błędy

    Bez WHERE zapytanie zmieni nazwę linii we wszystkich samolotach - patrz krok w etapie dobrych praktyk.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT kierunek, czas FROM przyloty WHERE status_lotu = '';

-- Zapytanie 2
SELECT kierunek, dzien
FROM odloty JOIN samoloty ON odloty.samoloty_id = samoloty.id
WHERE samoloty.typ = 'Boening 787';

-- Zapytanie 3
SELECT nr_rejsu, kierunek FROM przyloty WHERE nr_rejsu LIKE '%LX%';

-- Zapytanie 4
UPDATE samoloty SET linie = 'SWISS2' WHERE linie = 'SWISS';
    Podgląd strony po tym kroku
    Podgląd strony po kroku 7

  8. Etap 2: Grafika i strona HTML

    Kroki 8-20 · po tym etapie masz 18 z 33 kryteriów (pkt)

    Krok 8: Grafika: serengeti.jpg o szerokości 350 px

    Kryteria:

    R.2.1 Plik serengeti.jpg jest przeskalowany z zachowaniem proporcji do szerokości dokładnie 350 px odpowiadająca temu wysokość wynosi 233 px ±5 px

    ok. 3 min
    Polecenie z arkusza

    Plik serengeti.jpg, wypakowany z archiwum należy przeskalować z zachowaniem proporcji tak, aby szerokość wynosiła dokładnie 350 px i zapisać obraz pod tą samą nazwą. Pozostałych obrazów nie należy modyfikować.

    Oryginał ma 400 × 267 px, pozostałe zdjęcia - 350 px szerokości. W GIMP-ie Obraz → Skaluj obraz, łańcuch złączony, szerokość 350 - wysokość zmieni się sama na 234 px (267 × 350 / 400 = 233,6). Klucz przyjmuje 233 ± 5 px. Plik → Nadpisz serengeti.jpg.

    Po skalowaniu wszystkie miniatury mają tę samą szerokość, więc przy wspólnej wysokości z CSS układają się w równy pasek.

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

  9. Krok 9: Plik galeria.html

    Kryteria:

    R.2.2 Witrynę internetową zapisano w pliku HTML o nazwie galeria

    ok. 2 min
    Polecenie z arkusza

    Składa się ze strony o nazwie galeria.html

    Plik galeria.html w folderze zdającego, obok zdjęć. Strona nie potrzebuje PHP - można ją otworzyć prosto z dysku.

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

  10. Krok 10: Kodowanie polskich znaków

    Kryteria:

    R.2.3 Zastosowano właściwy standard kodowania polskich znaków dla witryny

    ok. 1 min
    Polecenie z arkusza

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

    <meta charset="UTF-8"> jako pierwszy element <head>, plik zapisany w UTF-8 - „Przeglądaj zdjęcia” wyświetli się z polskimi literami.

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

  11. Krok 11: Tytuł strony

    Kryteria:

    R.2.4 Nadano tytuł strony: "Galeria”

    ok. 1 min
    Polecenie z arkusza

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

    <title>Galeria</title> w <head>.

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

  12. Krok 12: Podpięcie arkusza stylów styl7.css

    Kryteria:

    R.3.4 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl7.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 styl7.css prawidłowo połączony z kodem strony

    <link rel="stylesheet" href="styl7.css"> w <head>. Plik stylów powstanie po HTML-u.

    Typowe błędy

    Klucz uznaje R.3.4 tylko wtedy, gdy każdy selektor trafia w swój blok - kropka zamiast # przy identyfikatorze odbiera punkt.

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

  13. Krok 13: Bloki: baner, główny, lewy, prawy i stopka

    Kryteria:

    R.2.5 Wygląd strony zdefiniowano dzieląc ją na bloki: baner, główny, bloki lewy i prawy, stopka. Zastosowano znaczniki sekcji

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki: baner, główny, poniżej obok siebie lewy i prawy, poniżej stopka. Podział zrealizowany za pomocą znaczników sekcji tak, aby wygląd układu bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2

    Cztery znaczniki <section> z identyfikatorami banner, main, left i right oraz <footer> - w kolejności z góry na dół. Obok siebie ustawi blok lewy i prawy CSS (R.2.5).

    galeria.html HTML zmienione: 10 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Galeria</title>
    <link rel="stylesheet" href="styl7.css">
</head>
<body>
    <section id="banner">
    </section>
    <section id="main">
    </section>
    <section id="left">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (galeria.html)

  14. Krok 14: Baner: nagłówek drugiego stopnia

    ok. 1 min
    Polecenie z arkusza

    Zawartość banera: nagłówek drugiego stopnia o treści „Galeria miejsc ciekawych”

    Drugiego stopnia to <h2>.

    galeria.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Galeria</title>
    <link rel="stylesheet" href="styl7.css">
</head>
<body>
    <section id="banner">
        <h2>Galeria miejsc ciekawych</h2>
    </section>
    <section id="main">
    </section>
    <section id="left">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (galeria.html)

  15. Krok 15: Blok główny: zdjęcie lanzarotte.jpg

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku głównego: obraz lanzarotte.jpg z tekstem alternatywnym „galeria”

    <img> z plikiem lanzarotte.jpg i alt="galeria". Identyfikator big jest potrzebny skryptowi: po kliknięciu miniatury podmieni właśnie ten obraz.

    galeria.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Galeria</title>
    <link rel="stylesheet" href="styl7.css">
</head>
<body>
    <section id="banner">
        <h2>Galeria miejsc ciekawych</h2>
    </section>
    <section id="main">
        <img src="lanzarotte.jpg" alt="galeria" id="big">
    </section>
    <section id="left">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (galeria.html)

  16. Krok 16: Blok lewy: nagłówek i pięć miniatur

    Kryteria:

    R.2.8 W bloku lewym umieszczono 5 zdjęć zgodnych z obrazem 2 w arkuszu egzaminacyjnym. Ich teksty alternatywne są takie same jak nazwa pliku (mogą być bez rozszerzenia lub z)

    ok. 3 min
    Polecenie z arkusza

    Zawartość bloku lewego: Nagłówek trzeciego stopnia o treści „Przeglądaj zdjęcia”. 5 zdjęć JPG o nazwach kolejno: lanzarotte, pekin, serengeti, wenecja, tajlandia oraz tekście alternatywnym takim jak nazwa zdjęcia

    <h3> i pięć obrazów w kolejności z arkusza (tajlandia jest ostatnia, choć alfabetycznie byłaby przed wenecją). Tekst alternatywny każdego to nazwa zdjęcia bez rozszerzenia (R.2.8).

    Wszystkie miniatury mają tę samą klasę thumb - CSS nada im wspólną wysokość, a klucz wprost uznaje za błąd ten sam identyfikator przy kilku obrazach: identyfikator musi być na stronie jednoznaczny.

    galeria.html HTML zmienione: 6 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Galeria</title>
    <link rel="stylesheet" href="styl7.css">
</head>
<body>
    <section id="banner">
        <h2>Galeria miejsc ciekawych</h2>
    </section>
    <section id="main">
        <img src="lanzarotte.jpg" alt="galeria" id="big">
    </section>
    <section id="left">
        <h3>Przeglądaj zdjęcia</h3>
        <img src="lanzarotte.jpg" alt="lanzarotte" class="thumb">
        <img src="pekin.jpg" alt="pekin" class="thumb">
        <img src="serengeti.jpg" alt="serengeti" class="thumb">
        <img src="wenecja.jpg" alt="wenecja" class="thumb">
        <img src="tajlandia.jpg" alt="tajlandia" class="thumb">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (galeria.html)

  17. Krok 17: Blok prawy: nagłówek i tabela

    Kryteria:

    R.2.9 W bloku prawym umieszczono tabelę o dwóch wierszach i trzech kolumnach, zastosowano znaczniki <table>, <tr>, <td> wraz z ich zamknięciami

    ok. 3 min
    Polecenie z arkusza

    Zawartość bloku prawego: Nagłówek trzeciego stopnia o treści „Obrazy w naszej galerii”. Tabela o dwóch wierszach i trzech kolumnach i wartościach: Wiersz pierwszy: Europa, Azja, Afryka. Wiersz drugi: 2, 2, 1

    <h3>, a pod nim tabela: <table>, dwa wiersze <tr>, w każdym trzy komórki <td> - wszystkie znaczniki z zamknięciami (R.2.9). Liczby to zdjęcia z każdego kontynentu: Europa - Lanzarote i Wenecja, Azja - Pekin i Tajlandia, Afryka - Serengeti.

    Komórki pierwszego wiersza można zapisać jako nagłówki <th>, ale arkusz mówi o dwóch zwykłych wierszach, a klucz sprawdza <td>.

    galeria.html HTML zmienione: 13 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Galeria</title>
    <link rel="stylesheet" href="styl7.css">
</head>
<body>
    <section id="banner">
        <h2>Galeria miejsc ciekawych</h2>
    </section>
    <section id="main">
        <img src="lanzarotte.jpg" alt="galeria" id="big">
    </section>
    <section id="left">
        <h3>Przeglądaj zdjęcia</h3>
        <img src="lanzarotte.jpg" alt="lanzarotte" class="thumb">
        <img src="pekin.jpg" alt="pekin" class="thumb">
        <img src="serengeti.jpg" alt="serengeti" class="thumb">
        <img src="wenecja.jpg" alt="wenecja" class="thumb">
        <img src="tajlandia.jpg" alt="tajlandia" class="thumb">
    </section>
    <section id="right">
        <h3>Obrazy w naszej galerii</h3>
        <table>
            <tr>
                <td>Europa</td>
                <td>Azja</td>
                <td>Afryka</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>1</td>
            </tr>
        </table>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (galeria.html)

  18. Krok 18: Blok prawy: akapit „Polub nas” z ikoną serca

    Kryteria: ,

    R.2.6 Zapisano: w banerze nagłówek h2: "Galeria miejsc ciekawych", w bloku lewym nagłówek h3: "Przeglądaj zdjęcia", w bloku prawym nagłówek h3: "Obrazy w naszej galerii" oraz paragraf

    R.2.7 W bloku głównym po uruchomieniu strony wstawiono zdjęcie lanzarotte.jpg z tekstem alternatywnym "galeria" oraz w bloku prawym umieszczono obraz icon-off.png

    ok. 1 min
    Polecenie z arkusza

    Paragraf (akapit) zawierający treść „Polub nas” i obraz icon-off.png

    Akapit z tekstem i obrazem pustego serca icon-off.png (50 × 50 px). Identyfikator like przyda się skryptowi, który będzie podmieniał ikonę. Nagłówki <h2> i dwa <h3> oraz ten akapit dają R.2.6, a obraz w bloku głównym i ikona w bloku prawym - R.2.7.

    galeria.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Galeria</title>
    <link rel="stylesheet" href="styl7.css">
</head>
<body>
    <section id="banner">
        <h2>Galeria miejsc ciekawych</h2>
    </section>
    <section id="main">
        <img src="lanzarotte.jpg" alt="galeria" id="big">
    </section>
    <section id="left">
        <h3>Przeglądaj zdjęcia</h3>
        <img src="lanzarotte.jpg" alt="lanzarotte" class="thumb">
        <img src="pekin.jpg" alt="pekin" class="thumb">
        <img src="serengeti.jpg" alt="serengeti" class="thumb">
        <img src="wenecja.jpg" alt="wenecja" class="thumb">
        <img src="tajlandia.jpg" alt="tajlandia" class="thumb">
    </section>
    <section id="right">
        <h3>Obrazy w naszej galerii</h3>
        <table>
            <tr>
                <td>Europa</td>
                <td>Azja</td>
                <td>Afryka</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>1</td>
            </tr>
        </table>
        <p>Polub nas <img src="icon-off.png" alt="serce" id="like"></p>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (galeria.html)

  19. Krok 19: Odnośnik do pixabay.com w nowej karcie

    Kryteria: ,

    R.3.2 Wybranie odnośnika "Odkryj więcej zdjęć" inicjuje otwarcie strony https://pixabay.com

    R.3.3 Odnośnik otwiera się w osobnej karcie przeglądarki

    ok. 1 min
    Polecenie z arkusza

    Odnośnik do adresu https://pixabay.com o treści „Odkryj więcej zdjęć”, odnośnik otwiera się w osobnej karcie przeglądarki

    <a href="https://pixabay.com"> z treścią z arkusza (R.3.2). Osobną kartę otwiera atrybut target="_blank" (R.3.3). Adres jest pełny, z https:// - bez protokołu przeglądarka szukałaby pliku pixabay.com w folderze strony.

    galeria.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Galeria</title>
    <link rel="stylesheet" href="styl7.css">
</head>
<body>
    <section id="banner">
        <h2>Galeria miejsc ciekawych</h2>
    </section>
    <section id="main">
        <img src="lanzarotte.jpg" alt="galeria" id="big">
    </section>
    <section id="left">
        <h3>Przeglądaj zdjęcia</h3>
        <img src="lanzarotte.jpg" alt="lanzarotte" class="thumb">
        <img src="pekin.jpg" alt="pekin" class="thumb">
        <img src="serengeti.jpg" alt="serengeti" class="thumb">
        <img src="wenecja.jpg" alt="wenecja" class="thumb">
        <img src="tajlandia.jpg" alt="tajlandia" class="thumb">
    </section>
    <section id="right">
        <h3>Obrazy w naszej galerii</h3>
        <table>
            <tr>
                <td>Europa</td>
                <td>Azja</td>
                <td>Afryka</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>1</td>
            </tr>
        </table>
        <p>Polub nas <img src="icon-off.png" alt="serce" id="like"></p>
        <a href="https://pixabay.com" target="_blank">Odkryj więcej zdjęć</a>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (galeria.html)

  20. Krok 20: Stopka z autorem strony

    ok. 1 min
    Polecenie z arkusza

    Zawartość stopki: napis o treści „Autor: ”, dalej wstawiony numer PESEL zdającego lub w przypadku jego braku inny numer, 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.

    galeria.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Galeria</title>
    <link rel="stylesheet" href="styl7.css">
</head>
<body>
    <section id="banner">
        <h2>Galeria miejsc ciekawych</h2>
    </section>
    <section id="main">
        <img src="lanzarotte.jpg" alt="galeria" id="big">
    </section>
    <section id="left">
        <h3>Przeglądaj zdjęcia</h3>
        <img src="lanzarotte.jpg" alt="lanzarotte" class="thumb">
        <img src="pekin.jpg" alt="pekin" class="thumb">
        <img src="serengeti.jpg" alt="serengeti" class="thumb">
        <img src="wenecja.jpg" alt="wenecja" class="thumb">
        <img src="tajlandia.jpg" alt="tajlandia" class="thumb">
    </section>
    <section id="right">
        <h3>Obrazy w naszej galerii</h3>
        <table>
            <tr>
                <td>Europa</td>
                <td>Azja</td>
                <td>Afryka</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>1</td>
            </tr>
        </table>
        <p>Polub nas <img src="icon-off.png" alt="serce" id="like"></p>
        <a href="https://pixabay.com" target="_blank">Odkryj więcej zdjęć</a>
    </section>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (galeria.html)

  21. Etap 3: Styl CSS

    Kroki 21-27 · po tym etapie masz 29 z 33 kryteriów (pkt)

    Krok 21: Plik styl7.css: krój Helvetica dla całej strony

    Kryteria:

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

    ok. 1 min
    Polecenie z arkusza

    Cechy formatowania CSS: Są zawarte wyłącznie w zewnętrznym arkuszu stylów. Domyślne dla całej strony: krój czcionki Helvetica

    Nowy plik styl7.css. Selektor * z font-family: Helvetica (R.4.1). W Windows bez Helvetiki przeglądarka podstawia Arial - klucz ocenia regułę w kodzie.

    styl7.css CSS nowy plik 
    * {
    font-family: Helvetica;
}
    Podgląd strony po tym kroku (galeria.html)

  22. Krok 22: Baner i stopka: tło RGB, biały tekst, wysokość, wyśrodkowanie

    ok. 3 min
    Polecenie z arkusza

    Dla banera i stopki: kolor RGB tła 70, 130, 180; biały kolor czcionki, wysokość 30 px, wyrównanie tekstu do środka

    Kolor RGB zapisuje się funkcją rgb(70, 130, 180) - trzy składowe od 0 do 255: czerwona, zielona, niebieska (to kolor SteelBlue). Wspólna reguła dla banera i stopki.

    #banner h2 { margin: 0 } - nagłówek ma domyślne marginesy, które w 30-pikselowym banerze zepchnęłyby napis w dół i odsłoniły białą szczelinę nad banerem. Na obrazie 2 napis mieści się w pasku.

    styl7.css CSS zmienione: 9 linii 
    * {
    font-family: Helvetica;
}
#banner, footer {
    background-color: rgb(70, 130, 180);
    color: white;
    height: 30px;
    text-align: center;
}
#banner h2 {
    margin: 0;
}
    Podgląd strony po tym kroku (galeria.html)

  23. Krok 23: Blok główny: tło, marginesy wewnętrzne, wyśrodkowanie

    Kryteria: ,

    R.4.6 Ustawiono wyrównanie tekstu do środka dla banera, stopki i bloku głównego

    R.4.7 Ustawiono marginesy wewnętrzne (padding) 50px dla bloku głównego

    ok. 2 min
    Polecenie z arkusza

    Dla bloku głównego: kolor RGB tła 176, 196, 222; marginesy wewnętrzne 50 px, wyrównanie tekstu do środka

    • rgb(176, 196, 222) - jasny niebieskoszary (LightSteelBlue),
    • padding: 50px - margines wewnętrzny z każdej strony (R.4.7),
    • text-align: center - wyśrodkowuje też obraz, bo <img> jest elementem liniowym jak tekst. Wyrównanie banera, stopki i bloku głównego: R.4.6.
    styl7.css CSS zmienione: 5 linii 
    * {
    font-family: Helvetica;
}
#banner, footer {
    background-color: rgb(70, 130, 180);
    color: white;
    height: 30px;
    text-align: center;
}
#banner h2 {
    margin: 0;
}
#main {
    background-color: rgb(176, 196, 222);
    padding: 50px;
    text-align: center;
}
    Podgląd strony po tym kroku (galeria.html)

  24. Krok 24: Blok lewy i prawy: tło, kolor, wysokość, szerokość

    Kryteria: , , ,

    R.4.2 Ustawiono kolor tła rgb(70, 130, 180) dla banera, stopki, bloku lewego i prawego oraz rgb(176, 196, 222) dla bloku głównego

    R.4.3 Ustawiono biały kolor czcionki dla bloków banera, lewego, prawego i stopki

    R.4.4 Ustawiono wysokość 30px dla banera i stopki oraz 300px dla bloku lewego i prawego

    R.4.5 Ustawiono szerokość bloku lewego 80% oraz prawego 20%

    ok. 2 min
    Polecenie z arkusza

    Dla bloku lewego: kolor RGB tła 70, 130, 180; biały kolor czcionki, wysokość 300 px, szerokość 80%. Dla bloku prawego: kolor RGB tła 70, 130, 180; biały kolor czcionki, wysokość 300 px, szerokość 20%

    Dwie reguły z tymi samymi cechami i różną szerokością. Komplet: tła wszystkich bloków (R.4.2), biały tekst banera, bloków i stopki (R.4.3), wysokości 30 i 300 px (R.4.4), szerokości 80% i 20% (R.4.5).

    Tabela w bloku prawym dziedziczy biały kolor tekstu w Chrome (arkusz zaznacza, że czarny tekst tabeli w innej przeglądarce też jest poprawny).

    styl7.css CSS zmienione: 12 linii 
    * {
    font-family: Helvetica;
}
#banner, footer {
    background-color: rgb(70, 130, 180);
    color: white;
    height: 30px;
    text-align: center;
}
#banner h2 {
    margin: 0;
}
#main {
    background-color: rgb(176, 196, 222);
    padding: 50px;
    text-align: center;
}
#left {
    background-color: rgb(70, 130, 180);
    color: white;
    height: 300px;
    width: 80%;
}
#right {
    background-color: rgb(70, 130, 180);
    color: white;
    height: 300px;
    width: 20%;
}
    Podgląd strony po tym kroku (galeria.html)

  25. Krok 25: Układ: blok lewy i prawy obok siebie

    Kryteria:

    R.3.1 Układ bloków po uruchomieniu strony w przeglądarce jest zgodny z Obrazem 2 w arkuszu egzaminacyjnym (prawidłowo zastosowano właściwości CSS układające bloki na stronie, np. float i clear albo display flex albo grid)

    ok. 2 min
    Polecenie z arkusza

    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

    Baner i blok główny to zwykłe bloki na całą szerokość. Pod nimi blok lewy i prawy z float: left stają obok siebie (80% + 20%), a stopka z clear: both schodzi pod oba (R.3.1).

    styl7.css CSS zmienione: 6 linii 
    * {
    font-family: Helvetica;
}
#banner, footer {
    background-color: rgb(70, 130, 180);
    color: white;
    height: 30px;
    text-align: center;
}
#banner h2 {
    margin: 0;
}
#main {
    background-color: rgb(176, 196, 222);
    padding: 50px;
    text-align: center;
}
#left {
    background-color: rgb(70, 130, 180);
    color: white;
    height: 300px;
    width: 80%;
}
#right {
    background-color: rgb(70, 130, 180);
    color: white;
    height: 300px;
    width: 20%;
}
#left, #right {
    float: left;
}
footer {
    clear: both;
}
    Podgląd strony po tym kroku (galeria.html)

  26. Krok 26: Zdjęcie w bloku głównym: odstęp, ramka kreskowana, zaokrąglone rogi

    Kryteria:

    R.4.8 Ustawiono styl zdjęcia w bloku głównym: marginesy wewnętrzne (padding) 3px, obramowanie linią kreskowaną w kolorze niebieskim (dowolny odcień) grubości 1px, zaokrąglenie rogów obrazu o 10px

    ok. 2 min
    Polecenie z arkusza

    Dla zdjęcia w bloku głównym: marginesy wewnętrzne 3 px, obramowanie linią kreskowaną w kolorze niebieskim grubości 1 px, zakrzywienie rogów obrazu o 10 px

    • padding: 3px - odstęp między zdjęciem a ramką,
    • border: 1px dashed blue - linia kreskowana to dashed (kropkowana to dotted),
    • border-radius: 10px - zaokrąglenie rogów ramki o promieniu 10 px (R.4.8).

    Selektor #big trafia tylko w zdjęcie bloku głównego - miniatury ramki nie mają.

    styl7.css CSS zmienione: 5 linii 
    * {
    font-family: Helvetica;
}
#banner, footer {
    background-color: rgb(70, 130, 180);
    color: white;
    height: 30px;
    text-align: center;
}
#banner h2 {
    margin: 0;
}
#main {
    background-color: rgb(176, 196, 222);
    padding: 50px;
    text-align: center;
}
#left {
    background-color: rgb(70, 130, 180);
    color: white;
    height: 300px;
    width: 80%;
}
#right {
    background-color: rgb(70, 130, 180);
    color: white;
    height: 300px;
    width: 20%;
}
#left, #right {
    float: left;
}
footer {
    clear: both;
}
#big {
    padding: 3px;
    border: 1px dashed blue;
    border-radius: 10px;
}
    Podgląd strony po tym kroku (galeria.html)

  27. Krok 27: Miniatury: wysokość 40% i biała ramka pod kursorem

    Kryteria: ,

    R.4.9 Ustawiono styl dla wszystkich zdjęć w bloku lewym: wysokość 40% (np. za pomocą klasy, dodanie tego samego id do wszystkich zdjęć jest błędem)

    R.4.10 Gdy kursor myszy znajdzie się na obrazie miniatury pojawia się obramowanie linią ciągłą koloru białego i grubości 1px (np. za pomocą pseudoklasy hover)

    ok. 2 min
    Polecenie z arkusza

    Dla wszystkich zdjęć w bloku lewym: wysokość 40%, gdy mysz znajdzie się na obrazie pojawia się obramowanie linią ciągłą koloru białego i grubości 1px, co widać na Obrazie 2 (trzecia miniatura)

    Selektor klasy .thumb obejmuje wszystkie pięć miniatur (R.4.9). Wysokość w procentach liczy się od wysokości rodzica - blok lewy ma 300 px, więc miniatura ma 120 px, a szerokość dopasowuje się proporcjonalnie (ok. 180 px).

    :hover dokłada ramkę tylko wtedy, gdy kursor jest nad obrazem (R.4.10). Ramka ma 1 px, więc najechana miniatura minimalnie się powiększa - na obrazie 2 tak samo.

    Typowe błędy

    height: 40% działa tylko dlatego, że blok lewy ma ustaloną wysokość. Bez niej procent nie ma od czego się liczyć i miniatury zostałyby w pełnym rozmiarze.

    styl7.css CSS zmienione: 6 linii 
    * {
    font-family: Helvetica;
}
#banner, footer {
    background-color: rgb(70, 130, 180);
    color: white;
    height: 30px;
    text-align: center;
}
#banner h2 {
    margin: 0;
}
#main {
    background-color: rgb(176, 196, 222);
    padding: 50px;
    text-align: center;
}
#left {
    background-color: rgb(70, 130, 180);
    color: white;
    height: 300px;
    width: 80%;
}
#right {
    background-color: rgb(70, 130, 180);
    color: white;
    height: 300px;
    width: 20%;
}
#left, #right {
    float: left;
}
footer {
    clear: both;
}
#big {
    padding: 3px;
    border: 1px dashed blue;
    border-radius: 10px;
}
.thumb {
    height: 40%;
}
.thumb:hover {
    border: 1px solid white;
}
    Podgląd strony po tym kroku (galeria.html)

  28. Etap 4: Skrypt JavaScript

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

    Krok 28: Funkcja pokazująca miniaturę w bloku głównym

    Kryteria: ,

    R.5.1 Przynajmniej jeden skrypt napisano w języku JavaScript oraz zawiera on przynajmniej jedną instrukcję poprawną składniowo

    R.5.2 Dla przynajmniej jednego zdarzenia kliknięcia obrazu przypisano do niego funkcję JavaScript (może być pusta)

    ok. 3 min
    Polecenie z arkusza

    Skrypt: Obsługuje akcje wywoływane kliknięciem na zdjęciach z bloku lewego za pomocą języka JavaScript. Po kliknięciu na dowolnej miniaturze jest ona wyświetlona w bloku głównym (zamiast lanzarotte.jpg)

    Skrypt stoi w znaczniku <script> na końcu <body>. Funkcja show(thumbnail) dostaje klikniętą miniaturę i przepisuje jej adres obrazu (src) do dużego zdjęcia #big - przeglądarka od razu wczytuje nowy plik.

    Pierwsza miniatura dostaje atrybut onclick="show(this)". Słowo this w atrybucie zdarzenia oznacza element, na którym zdarzenie zaszło - funkcja wie, którą miniaturę kliknięto. Skrypt w JavaScript (R.5.1) i funkcja przypisana do kliknięcia obrazu (R.5.2) już są; pozostałe miniatury - w następnym kroku.

    galeria.html HTML zmienione: 6 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Galeria</title>
    <link rel="stylesheet" href="styl7.css">
</head>
<body>
    <section id="banner">
        <h2>Galeria miejsc ciekawych</h2>
    </section>
    <section id="main">
        <img src="lanzarotte.jpg" alt="galeria" id="big">
    </section>
    <section id="left">
        <h3>Przeglądaj zdjęcia</h3>
        <img src="lanzarotte.jpg" alt="lanzarotte" class="thumb" onclick="show(this)">
        <img src="pekin.jpg" alt="pekin" class="thumb">
        <img src="serengeti.jpg" alt="serengeti" class="thumb">
        <img src="wenecja.jpg" alt="wenecja" class="thumb">
        <img src="tajlandia.jpg" alt="tajlandia" class="thumb">
    </section>
    <section id="right">
        <h3>Obrazy w naszej galerii</h3>
        <table>
            <tr>
                <td>Europa</td>
                <td>Azja</td>
                <td>Afryka</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>1</td>
            </tr>
        </table>
        <p>Polub nas <img src="icon-off.png" alt="serce" id="like"></p>
        <a href="https://pixabay.com" target="_blank">Odkryj więcej zdjęć</a>
    </section>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
    <script>
        function show(thumbnail) {
            document.getElementById('big').src = thumbnail.src;
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (galeria.html)

  29. Krok 29: Wszystkie pięć miniatur

    Kryteria: ,

    R.5.3 Po kliknięciu na przynajmniej jednej miniaturze, odpowiadający jej obraz jest wyświetlany w bloku głównym

    R.5.4 Kliknięcie jest obsłużone zgodnie z R.5.3 dla każdej z pięciu miniatur

    ok. 2 min
    Polecenie z arkusza

    Po kliknięciu na dowolnej miniaturze jest ona wyświetlona w bloku głównym (zamiast lanzarotte.jpg)

    To samo onclick="show(this)" przy pozostałych czterech miniaturach - jedna funkcja obsługuje wszystkie, bo this za każdym razem wskazuje inny obraz. Sprawdzone w Chrome: kliknięcie każdej z pięciu miniatur pokazuje jej zdjęcie w bloku głównym (R.5.3, R.5.4), a kliknięcie pierwszej wraca do Lanzarote.

    Kliknij miniatury w podglądzie. Tekst alternatywny dużego zdjęcia zostaje „galeria” - arkusz go nie zmienia.

    Typowe błędy

    Pięć osobnych funkcji (showPekin(), showSerengeti()…) też zdobędzie punkty, ale każde nowe zdjęcie wymagałoby nowej funkcji.

    galeria.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Galeria</title>
    <link rel="stylesheet" href="styl7.css">
</head>
<body>
    <section id="banner">
        <h2>Galeria miejsc ciekawych</h2>
    </section>
    <section id="main">
        <img src="lanzarotte.jpg" alt="galeria" id="big">
    </section>
    <section id="left">
        <h3>Przeglądaj zdjęcia</h3>
        <img src="lanzarotte.jpg" alt="lanzarotte" class="thumb" onclick="show(this)">
        <img src="pekin.jpg" alt="pekin" class="thumb" onclick="show(this)">
        <img src="serengeti.jpg" alt="serengeti" class="thumb" onclick="show(this)">
        <img src="wenecja.jpg" alt="wenecja" class="thumb" onclick="show(this)">
        <img src="tajlandia.jpg" alt="tajlandia" class="thumb" onclick="show(this)">
    </section>
    <section id="right">
        <h3>Obrazy w naszej galerii</h3>
        <table>
            <tr>
                <td>Europa</td>
                <td>Azja</td>
                <td>Afryka</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>1</td>
            </tr>
        </table>
        <p>Polub nas <img src="icon-off.png" alt="serce" id="like"></p>
        <a href="https://pixabay.com" target="_blank">Odkryj więcej zdjęć</a>
    </section>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
    <script>
        function show(thumbnail) {
            document.getElementById('big').src = thumbnail.src;
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (galeria.html)

  30. Krok 30: Serce: przełączanie ikony funkcją

    ok. 3 min
    Polecenie z arkusza

    Po kliknięciu ikony icon-off.jpg jest ona podmieniana na ikonę icon-on.jpg. Po ponownym kliknięciu – powraca do icon-off.jpg i tak na zmianę – realizowane za pomocą funkcji.

    Funkcja toggleLike przypięta do kliknięcia ikony:

    • indexOf('icon-off') (metoda napisu z tabeli 1) zwraca pozycję szukanego tekstu w adresie obrazu albo -1, gdy go nie ma. Przeglądarka trzyma w src pełny adres (file:///…/icon-off.png), więc szuka się fragmentu, a nie porównuje całości,
    • jeśli teraz jest puste serce - ustaw pełne, w przeciwnym razie - puste.

    Sprawdzone w Chrome: kolejne kliknięcia dają icon-on, icon-off, icon-on. Klucz nie ma kryterium dla serca, ale arkusz go wymaga.

    ⚠️ Rozbieżność w arkuszu: część o skrypcie podaje nazwy icon-off.jpg i icon-on.jpg, a część o witrynie i archiwum pliki7 - icon-off.png i icon-on.png. W skrypcie są nazwy plików, które naprawdę są w archiwum: .png. Z .jpg serce zamieniłoby się w ikonę uszkodzonego obrazu.

    galeria.html HTML zmienione: 10 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Galeria</title>
    <link rel="stylesheet" href="styl7.css">
</head>
<body>
    <section id="banner">
        <h2>Galeria miejsc ciekawych</h2>
    </section>
    <section id="main">
        <img src="lanzarotte.jpg" alt="galeria" id="big">
    </section>
    <section id="left">
        <h3>Przeglądaj zdjęcia</h3>
        <img src="lanzarotte.jpg" alt="lanzarotte" class="thumb" onclick="show(this)">
        <img src="pekin.jpg" alt="pekin" class="thumb" onclick="show(this)">
        <img src="serengeti.jpg" alt="serengeti" class="thumb" onclick="show(this)">
        <img src="wenecja.jpg" alt="wenecja" class="thumb" onclick="show(this)">
        <img src="tajlandia.jpg" alt="tajlandia" class="thumb" onclick="show(this)">
    </section>
    <section id="right">
        <h3>Obrazy w naszej galerii</h3>
        <table>
            <tr>
                <td>Europa</td>
                <td>Azja</td>
                <td>Afryka</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>1</td>
            </tr>
        </table>
        <p>Polub nas <img src="icon-off.png" alt="serce" id="like" onclick="toggleLike()"></p>
        <a href="https://pixabay.com" target="_blank">Odkryj więcej zdjęć</a>
    </section>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
    <script>
        function show(thumbnail) {
            document.getElementById('big').src = thumbnail.src;
        }

        function toggleLike() {
            var icon = document.getElementById('like');
            if (icon.src.indexOf('icon-off') != -1) {
                icon.src = 'icon-on.png';
            } else {
                icon.src = 'icon-off.png';
            }
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (galeria.html)

  31. Etap 5: Dobre praktyki (poza kluczem)

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

    Krok 31: Zabezpieczenie: odnośnik do obcej strony w nowej karcie

    ok. 2 min
    Polecenie z arkusza

    Odnośnik do adresu https://pixabay.com o treści „Odkryj więcej zdjęć”, odnośnik otwiera się w osobnej karcie przeglądarki

    Strona otwarta przez target="_blank" dostawała kiedyś dostęp do karty, z której ją otwarto (window.opener) - i mogła po cichu podmienić ją na fałszywą stronę logowania, zanim użytkownik wróci (atak tabnabbing). Obecne przeglądarki (Chrome od wersji 88, Firefox od 79, Safari od 12.1) przy _blank same tego dostępu nie dają, ale jawny atrybut nie zależy od wersji przeglądarki:

    • noopener - otwarta strona nie dostaje window.opener,
    • noreferrer - przeglądarka nie wysyła obcej stronie adresu, z którego przyszedł użytkownik.

    Odnośnik działa tak samo i nadal otwiera się w nowej karcie. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

    galeria.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Galeria</title>
    <link rel="stylesheet" href="styl7.css">
</head>
<body>
    <section id="banner">
        <h2>Galeria miejsc ciekawych</h2>
    </section>
    <section id="main">
        <img src="lanzarotte.jpg" alt="galeria" id="big">
    </section>
    <section id="left">
        <h3>Przeglądaj zdjęcia</h3>
        <img src="lanzarotte.jpg" alt="lanzarotte" class="thumb" onclick="show(this)">
        <img src="pekin.jpg" alt="pekin" class="thumb" onclick="show(this)">
        <img src="serengeti.jpg" alt="serengeti" class="thumb" onclick="show(this)">
        <img src="wenecja.jpg" alt="wenecja" class="thumb" onclick="show(this)">
        <img src="tajlandia.jpg" alt="tajlandia" class="thumb" onclick="show(this)">
    </section>
    <section id="right">
        <h3>Obrazy w naszej galerii</h3>
        <table>
            <tr>
                <td>Europa</td>
                <td>Azja</td>
                <td>Afryka</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>1</td>
            </tr>
        </table>
        <p>Polub nas <img src="icon-off.png" alt="serce" id="like" onclick="toggleLike()"></p>
        <a href="https://pixabay.com" target="_blank" rel="noopener noreferrer">Odkryj więcej zdjęć</a>
    </section>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
    <script>
        function show(thumbnail) {
            document.getElementById('big').src = thumbnail.src;
        }

        function toggleLike() {
            var icon = document.getElementById('like');
            if (icon.src.indexOf('icon-off') != -1) {
                icon.src = 'icon-on.png';
            } else {
                icon.src = 'icon-off.png';
            }
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (galeria.html)

  32. Krok 32: UPDATE zawsze z WHERE - sprawdzone na bazie

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 4: uaktualniające pole linie w tabeli samoloty. Firma SWISS zmieniła swoją nazwę na SWISS2

    UPDATE bez WHERE nie pyta o potwierdzenie i zmienia każdy wiersz tabeli. Sprawdzone na bazie z archiwum: UPDATE samoloty SET linie = 'SWISS2'; - „Zmieniono rekordów: 4”, a RYANAIR, WIZZAIR i LUFTHANSA też nazywają się teraz SWISS2 (zrzut obok). Nie ma przycisku „cofnij”.

    Zwyczaje, które przed tym chronią:

    • najpierw SELECT z tym samym warunkiem - SELECT * FROM samoloty WHERE linie = 'SWISS'; pokazuje dokładnie te wiersze, które zmieni UPDATE,
    • przy ważnych danych transakcja: START TRANSACTION;, UPDATE …;, sprawdzenie wyniku i dopiero wtedy COMMIT; (albo ROLLBACK;, gdy liczba zmienionych rekordów się nie zgadza),
    • konto, którym łączy się strona, nie dostaje uprawnień UPDATE do tabel, których nie zmienia.

    Na egzaminie wystarczy zapytanie z kroku 7 - a gdyby phpMyAdmin pokazał więcej niż 1 zmieniony rekord, trzeba ponownie zaimportować bazę, żeby zrzut i dane się zgadzały.

    kwerendy.txt Tekst zmienione: 0 linii 
    -- Zapytanie 1
SELECT kierunek, czas FROM przyloty WHERE status_lotu = '';

-- Zapytanie 2
SELECT kierunek, dzien
FROM odloty JOIN samoloty ON odloty.samoloty_id = samoloty.id
WHERE samoloty.typ = 'Boening 787';

-- Zapytanie 3
SELECT nr_rejsu, kierunek FROM przyloty WHERE nr_rejsu LIKE '%LX%';

-- Zapytanie 4
UPDATE samoloty SET linie = 'SWISS2' WHERE linie = 'SWISS';
    Podgląd strony po tym kroku (galeria.html)
    Podgląd strony po kroku 32

  33. Etap 6: Oddanie pracy

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

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

    ok. 5 min
    Polecenie z arkusza

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

    W folderze z numerem zdającego muszą być: egzamin.jpg, galeria.html, icon-off.png, icon-on.png, kw1.png - kw4.png, kwerendy.txt, lanzarotte.jpg, pekin.jpg, przeglądarka.txt, serengeti.jpg, styl7.css, tajlandia.jpg i wenecja.jpg. Nagraj płytę, sprawdź jej odczyt w obecności przewodniczącego zespołu nadzorującego i opisz ją numerem zdającego.

    przeglądarka.txt Tekst nowy plik 
    Google Chrome
    Podgląd strony po tym kroku (galeria.html)

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