Rozwiązanie buduje kartę produktu sklepu meblowego: baza sklep i cztery zapytania - SELECT z warunkiem i sortowaniem, widok (CREATE VIEW), funkcje agregujące z aliasami liczone na tym widoku i DELETE z dwoma warunkami - potem trzy fotele wycięte z jednej grafiki z zachowaniem przezroczystości, strony kartaProduktu.html i sklep.html, style w styl.css z oknem nakładanym na stronę (position: fixed, z-index, display: none) i skrypt JavaScript: miniatury podmieniają obraz główny, kliknięcie obrazu głównego otwiera okno z powiększeniem, a znak × je zamyka.
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 najpierw pisany najprościej, jak robi to większość zdających: funkcje wywoływane atrybutem onclick i document.getElementById z tabeli 1 arkusza, a na końcu zostaje przerobiony na wersję z prawdziwych projektów: nasłuchiwacze zdarzeń, zamykanie okna klawiszem Esc i kliknięciem w tło, opisy dla czytników ekranu. W tym arkuszu nie ma PHP.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, JS)” jest drugi sposób rozwiązania tego samego arkusza: sekcja i artykuł na siatce CSS, skrypt w osobnym pliku z addEventListener od pierwszej linii - obie wersje są zgodne z kluczem.
Baza i grafika pochodzą z prawdziwego archiwum pliki3 (załącznik do arkusza, hasło w treści zadania). Zrzuty wyników zapytań są odtworzone z tej bazy - na egzaminie robisz je sam, z całego ekranu. Skrypt został sprawdzony w prawdziwej przeglądarce: kliknięcie trzeciej miniatury, obrazu głównego i znaku × daje dokładnie to, co pokazują ilustracje 3 i 6.
Jak liczą się punkty. Klucz ma 39 kryteriów (R.1.1 - R.5.7), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 30 punktów - można stracić 9 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem.
Kroki 1-7 · po tym etapie masz 7 z 39 kryteriów (pkt)
Utwórz bazę danych o nazwie sklep, z zestawem polskich znaków (np. utf8_polish_ci)
Rozpakuj pliki3.7z z pulpitu (hasło #Kart@ProduKtu - z krzyżykiem na początku, małpą i wielkim K) i załóż folder z numerem zdającego. W phpMyAdmin: Nowa, nazwa sklep, porównywanie utf8_polish_ci.
Do utworzonej bazy zaimportuj tabele z pliku sklep.sql
Zaznacz bazę sklep, potem Import → sklep.sql → Wykonaj. Powstają trzy tabele z ilustracji 1: klienci (3 osoby), meble (11 mebli) i pusta zakupy, która łączy klientów z meblami w relacji m:n. W meble pole kategoria to 1 - sofy, 2 - fotele, 3 - komody, a czyNowy to 1 dla mebla nowego i 0 dla używanego.
Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie PNG pod nazwą import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel
Print Screen, wklejasz do edytora grafiki i zapisujesz jako import.png. W tym arkuszu wszystkie zrzuty są w PNG - także zrzut importu (w wielu innych arkuszach import idzie do JPEG).
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie nazwę, styl i cenę tylko nowych mebli, których cena nie przekracza 1000 zł. Rekordy powinny być posortowane począwszy od najniższej ceny
SELECT nazwa, styl, cena - trzy pola,FROM meble,WHERE czyNowy = 1 AND cena <= 1000 - „nie przekracza” znaczy „mniejsza lub równa”, więc <=,ORDER BY cena - rosnąco, to kierunek domyślny (ASC można dopisać).Wynik: trzy meble za 700, 800 i 1000 zł - jak w kluczu. Zapytanie zapisujesz w kwerendy.txt, zrzut jako kw1.png.
Warunek cena < 1000 gubi brązową sofę za dokładnie 1000 zł - na zrzucie są wtedy 2 wiersze zamiast 3.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT nazwa, styl, cena FROM meble WHERE czyNowy = 1 AND cena <= 1000 ORDER BY cena;
Zapytanie 2: tworzące widok (perspektywę) o nazwie komody zawierający jedynie pola idMeble, nazwa, kategoria, cena z tabeli meble jedynie dla kategorii równej 3. W pliku ze zrzutem należy przedstawić zawartość widoku komody
Widok to zapisane zapytanie, którego można potem używać jak tabeli: CREATE VIEW komody AS i dalej zwykły SELECT z warunkiem kategoria = 3. Samo utworzenie widoku nie zwraca wierszy, dlatego arkusz każe pokazać na zrzucie jego zawartość: klikasz komody w lewym panelu (albo SELECT * FROM komody). Pięć komód o identyfikatorach 4 - 8. Zrzut: kw2.png.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT nazwa, styl, cena FROM meble WHERE czyNowy = 1 AND cena <= 1000 ORDER BY cena;
-- Zapytanie 2
CREATE VIEW komody AS SELECT idMeble, nazwa, kategoria, cena FROM meble WHERE kategoria = 3;
Zapytanie 3: zliczające cenę średnią, minimalną i maksymalną. Nazwy kolumn (aliasy): Średnia cena – „Średnia cena komód”, minimalna cena – „Minimalna”, maksymalna cena – „Maksymalna”. Średnia cena powinna być dowolnie zaokrąglona do liczby całkowitej. W zapytaniu należy posłużyć się utworzonym widokiem
AVG, MIN, MAX - funkcje agregujące liczą jedną wartość z wielu wierszy,ROUND - bez drugiego argumentu zaokrągla do całości; bez niego średnia wyszłaby jako 2180.0000,AS "Średnia cena komód" - alias ze spacjami i polskimi literami musi być w cudzysłowach (albo odwróconych apostrofach),FROM komody - widok zamiast tabeli, więc warunek na kategorię jest już w nim zaszyty.Wynik: 2180, 700, 4000. Zrzut: kw3.png.
FROM meble WHERE kategoria = 3 daje te same liczby, ale arkusz wymaga widoku - osobne kryterium (R.1.5) za użycie komody przepada.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT nazwa, styl, cena FROM meble WHERE czyNowy = 1 AND cena <= 1000 ORDER BY cena;
-- Zapytanie 2
CREATE VIEW komody AS SELECT idMeble, nazwa, kategoria, cena FROM meble WHERE kategoria = 3;
-- Zapytanie 3
SELECT ROUND(AVG(cena)) AS "Średnia cena komód", MIN(cena) AS "Minimalna", MAX(cena) AS "Maksymalna" FROM komody;
Zapytanie 4: usuwające z tabeli klienci rekord, dla którego imię to Tomasz, a nazwisko Nowak
DELETE FROM klienci z dwoma warunkami połączonymi AND - sam warunek na nazwisko usunąłby każdego Nowaka. phpMyAdmin pyta, czy na pewno wykonać DELETE, i po potwierdzeniu pokazuje „Usuniętych rekordów: 1”. W tabeli zostają Anna Kowalska i Julita Nowakowska. Zrzut: kw4.png.
DELETE FROM klienci; bez WHERE usuwa wszystkich klientów - przed wykonaniem zawsze przeczytaj warunek.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT nazwa, styl, cena FROM meble WHERE czyNowy = 1 AND cena <= 1000 ORDER BY cena;
-- Zapytanie 2
CREATE VIEW komody AS SELECT idMeble, nazwa, kategoria, cena FROM meble WHERE kategoria = 3;
-- Zapytanie 3
SELECT ROUND(AVG(cena)) AS "Średnia cena komód", MIN(cena) AS "Minimalna", MAX(cena) AS "Maksymalna" FROM komody;
-- Zapytanie 4
DELETE FROM klienci WHERE imie = 'Tomasz' AND nazwisko = 'Nowak';
Kroki 8-30 · po tym etapie masz 20 z 39 kryteriów (pkt)
Z grafiki fotele.png należy wyciąć trzy fotele z pierwszej kolumny i nazwać kolejno fotel1.png, fotel2.png, fotel3.png
fotele.png (1920 × 1814 px) ma już przezroczyste tło - dziewięć mebli w trzech kolumnach. W GIMP-ie Zaznaczenie prostokątne wokół górnego fotela z lewej kolumny, Obraz → Przytnij do zaznaczenia, potem Eksportuj jako fotel1.png. Cofnij przycięcie (Ctrl+Z) i powtórz dla kolejnych foteli z tej samej kolumny.
Fotele powinny być obcięte bezpośrednio przy krawędziach, przezroczystość powinna być zachowana. Obrazów nie należy skalować
Ręczny prostokąt prawie zawsze zostawia pasek pustego tła. Po przycięciu do zaznaczenia wybierasz Obraz → Przytnij do zawartości - GIMP sam odcina przezroczyste brzegi i kadr dotyka fotela z każdej strony (biała ramka na ilustracji 4). Wymiary bierzesz takie, jakie wyjdą: fotel1.png ma 539 × 489 px, bo grafiki nie skalujesz. Eksport do PNG zachowuje kanał alfa.
Zapis do JPEG zamienia przezroczyste tło na białe - klucz wymaga przezroczystości (R.2.1).
Podgląd strony bez zmian - taki jak po kroku 8.
Z grafiki fotele.png należy wyciąć trzy fotele z pierwszej kolumny i nazwać kolejno fotel1.png, fotel2.png, fotel3.png
Tak samo środkowy i dolny fotel z lewej kolumny: fotel2.png ma 543 × 488 px, fotel3.png (z guzikiem na oparciu) 554 × 552 px. Podgląd pokazuje trzy fotele na szachownicy przezroczystości, jak w GIMP-ie.
Cechy strony kartaProduktu.html: Zapisana w języku HTML5
Deklaracja <!DOCTYPE html> i szkielet strony. Nazwa pliku z wielką literą P w środku: kartaProduktu.html - na serwerze z Linuksem wielkość liter w nazwie ma znaczenie.
kartaProduktu.html HTML nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Zadeklarowany polski język zawartości witryny
Atrybut lang="pl" w znaczniku <html>.
kartaProduktu.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
</head>
<body>
</body>
</html>Jawnie zastosowany właściwy standard kodowania polskich znaków
<meta charset="UTF-8"> jako pierwszy element <head>.
kartaProduktu.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony „Fotel”
<title> w <head>.
kartaProduktu.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
Nazwa: styl.css. Całe formatowanie ma pochodzić z tego pliku.
kartaProduktu.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>Witryna składa się z dwóch stron: kartaProduktu.html i sklep.html. Na stronie sklep.html znajduje się jedynie napis „strona w trakcie budowy”
Druga strona to sam napis w poprawnym szkielecie HTML5 - zapisujesz ją od razu, żeby odnośnik „Do strony głównej” miał dokąd prowadzić. Klucz w jednym kryterium sprawdza, że oba pliki istnieją, oraz deklarację HTML5 i język strony kartaProduktu.html.
sklep.html HTML nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sklep meblowy</title>
</head>
<body>
<p>strona w trakcie budowy</p>
</body>
</html>Podział strony na bloki: nagłówkowy, główny i stopkę. Blok główny zawiera blok sekcji i blok artykułu. Podział zrealizowany za pomocą semantycznych znaczników języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków był zgodny z ilustracją 5
Klucz wymaga header, main z section i article w środku oraz footer (R.2.4). Sekcja i artykuł staną obok siebie w CSS.
kartaProduktu.html HTML zmienione: 10 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
</header>
<main>
<section>
</section>
<article>
</article>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku nagłówkowego: Nagłówek pierwszego stopnia o treści: „Sklep meblowy”
<h1> w <header>.
kartaProduktu.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
</header>
<main>
<section>
</section>
<article>
</article>
</main>
<footer>
</footer>
</body>
</html>Linia pozioma
<hr> - element pusty, w HTML5 bez ukośnika zamykającego.
kartaProduktu.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
</section>
<article>
</article>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku sekcji: Obraz główny fotel1.png z tekstem alternatywnym „fotel”. Obraz jest formatowany klasą o nazwie obraz. Jego kliknięcie powoduje wywołanie funkcji JavaScript otwierającej okno
class="obraz" dla stylu, a id="mainImage" dla skryptu - po identyfikatorze document.getElementById znajdzie ten obraz, żeby zmienić jego źródło. Wywołanie funkcji po kliknięciu dopiszesz, gdy funkcja będzie gotowa.
kartaProduktu.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
</section>
<article>
</article>
</main>
<footer>
</footer>
</body>
</html>Poniżej trzy obrazy miniatur fotel1.png, fotel2.png, fotel3.png z tekstem alternatywnym „miniatura”. Obrazy są formatowane klasą miniatury. Kliknięcie każdej miniatury powoduje wywołanie funkcji JavaScript podmieniającej obraz główny
Obrazy są elementami liniowymi - po nadaniu szerokości w CSS (40% i 3 × 15%) wszystkie cztery zmieściłyby się w jednym wierszu. <br> po obrazie głównym przenosi miniatury do nowej linii, jak na ilustracji 2. Klasa miniatury przy każdym z trzech obrazów.
kartaProduktu.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<br>
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
</section>
<article>
</article>
</main>
<footer>
</footer>
</body>
</html>Blok okna z ilustracji 3 formatowany klasą o nazwie okno, zawierający: Znacznik ogólny liniowy <span> z zawartością × i formatowany klasą zamknij. Kliknięcie znacznika powoduje wywołanie funkcji zamykającej okno. Obraz bez źródła formatowany klasą obrazOkno
Blok <div class="okno"> z identyfikatorem popup - skrypt będzie go pokazywał i chował. W środku <span class="zamknij"> z encją ×, którą przeglądarka rysuje jako znak mnożenia ×, i <img class="obrazOkno"> bez atrybutu src - źródło wstawi skrypt w chwili otwarcia okna. Na razie okno widać w sekcji jako znak × i pusty obraz; schowa je styl display: none. Z tym krokiem wszystkie siedem elementów ma klasy z arkusza.
kartaProduktu.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<br>
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
<div class="okno" id="popup">
<span class="zamknij">×</span>
<img class="obrazOkno" id="popupImage">
</div>
</section>
<article>
</article>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku artykułu: Nagłówek drugiego stopnia o treści: „Żółty Fotel”
<h2> w <article>.
kartaProduktu.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<br>
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
<div class="okno" id="popup">
<span class="zamknij">×</span>
<img class="obrazOkno" id="popupImage">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
</article>
</main>
<footer>
</footer>
</body>
</html>Dwa paragrafy z treścią przekopiowaną z pliku opisFotel.txt zgodnie z ilustracją 2
Plik opisFotel.txt ma dwie linie i każda staje się osobnym <p>: długi opis wariantów i zdanie o bezpłatnej dostawie. Skopiuj tekst dokładnie, bez przepisywania z ilustracji.
kartaProduktu.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<br>
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
<div class="okno" id="popup">
<span class="zamknij">×</span>
<img class="obrazOkno" id="popupImage">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
</article>
</main>
<footer>
</footer>
</body>
</html>Tekst „Wybierz wariant fotela” zapisany za pomocą znacznika semantycznego oznaczającego tekst ważny, formatowany domyślnie jako pogrubiony
Znacznik semantyczny tekstu ważnego to <strong> (nie <b>, który tylko pogrubia, bez znaczenia).
kartaProduktu.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<br>
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
<div class="okno" id="popup">
<span class="zamknij">×</span>
<img class="obrazOkno" id="popupImage">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<strong>Wybierz wariant fotela</strong>
</article>
</main>
<footer>
</footer>
</body>
</html>Lista rozwijana z elementami „wariant 1”, „wariant 2”, „wariant 3”
<select> z trzema <option>. <strong> i <select> są liniowe, więc stoją w jednym wierszu - jak na ilustracji 2.
kartaProduktu.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<br>
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
<div class="okno" id="popup">
<span class="zamknij">×</span>
<img class="obrazOkno" id="popupImage">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<strong>Wybierz wariant fotela</strong>
<select>
<option>wariant 1</option>
<option>wariant 2</option>
<option>wariant 3</option>
</select>
</article>
</main>
<footer>
</footer>
</body>
</html>Paragraf z przyciskiem „KUP TERAZ”. Przycisk nie ma funkcjonalności
<button> w akapicie. Nie ma formularza ani skryptu, więc kliknięcie nic nie robi - tak chce arkusz.
kartaProduktu.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<br>
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
<div class="okno" id="popup">
<span class="zamknij">×</span>
<img class="obrazOkno" id="popupImage">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<strong>Wybierz wariant fotela</strong>
<select>
<option>wariant 1</option>
<option>wariant 2</option>
<option>wariant 3</option>
</select>
<p><button>KUP TERAZ</button></p>
</article>
</main>
<footer>
</footer>
</body>
</html>Paragraf z odnośnikiem do pliku sklep.html o treści „Do strony głównej”
Ścieżka względna sklep.html - oba pliki leżą w tym samym folderze. Podwójna spacja w poleceniu arkusza to literówka.
kartaProduktu.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<br>
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
<div class="okno" id="popup">
<span class="zamknij">×</span>
<img class="obrazOkno" id="popupImage">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<strong>Wybierz wariant fotela</strong>
<select>
<option>wariant 1</option>
<option>wariant 2</option>
<option>wariant 3</option>
</select>
<p><button>KUP TERAZ</button></p>
<p><a href="sklep.html">Do strony głównej</a></p>
</article>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku stopki: Linia pozioma
Drugi <hr>, tym razem na początku stopki.
kartaProduktu.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<br>
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
<div class="okno" id="popup">
<span class="zamknij">×</span>
<img class="obrazOkno" id="popupImage">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<strong>Wybierz wariant fotela</strong>
<select>
<option>wariant 1</option>
<option>wariant 2</option>
<option>wariant 3</option>
</select>
<p><button>KUP TERAZ</button></p>
<p><a href="sklep.html">Do strony głównej</a></p>
</article>
</main>
<footer>
<hr>
</footer>
</body>
</html>Paragraf o treści „Autor strony: ”, dalej wstawiony numer zdającego. Numer zdającego jest zapisany za pomocą znacznika semantycznego oznaczającego tekst uwypuklony, formatowany domyślnie jako pochylony
Tekst uwypuklony to <em> - przeglądarka pokazuje go kursywą. Na egzaminie w <em> wpisujesz swój numer zdającego (PESEL); tutaj stoi imię i nazwisko autora rozwiązania.
kartaProduktu.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<br>
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
<div class="okno" id="popup">
<span class="zamknij">×</span>
<img class="obrazOkno" id="popupImage">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<strong>Wybierz wariant fotela</strong>
<select>
<option>wariant 1</option>
<option>wariant 2</option>
<option>wariant 3</option>
</select>
<p><button>KUP TERAZ</button></p>
<p><a href="sklep.html">Do strony głównej</a></p>
</article>
</main>
<footer>
<hr>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
</body>
</html>Kroki 31-42 · po tym etapie masz 31 z 39 kryteriów (pkt)
Domyślnie, dla wszystkich selektorów: krój czcionki „Century Gothic", w przypadku braku sans-serif
Nazwa kroju ze spacją musi być w cudzysłowie: "Century Gothic". Na końcu rodzina zapasowa sans-serif.
styl.css CSS nowy plik * {
font-family: "Century Gothic", sans-serif;
}Dla ciała strony: kolor tła Beige, rozmiar czcionki 140%
Selektor body.
styl.css CSS zmienione: 4 linie * {
font-family: "Century Gothic", sans-serif;
}
body {
background-color: Beige;
font-size: 140%;
}Dla bloku nagłówkowego i stopki: wyrównanie tekstu do środka, marginesy wewnętrzne 20 px
Jedna reguła dla dwóch selektorów.
styl.css CSS zmienione: 4 linie * {
font-family: "Century Gothic", sans-serif;
}
body {
background-color: Beige;
font-size: 140%;
}
header, footer {
text-align: center;
padding: 20px;
}Dla bloku sekcji i bloku artykułu: szerokość 50%, wysokość 600 px
Dwa bloki po połowie szerokości. Na razie stoją jeden pod drugim - to bloki, każdy zaczyna się w nowej linii.
styl.css CSS zmienione: 4 linie * {
font-family: "Century Gothic", sans-serif;
}
body {
background-color: Beige;
font-size: 140%;
}
header, footer {
text-align: center;
padding: 20px;
}
section, article {
width: 50%;
height: 600px;
}Podział zrealizowany za pomocą semantycznych znaczników języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków był zgodny z ilustracją 5
Arkusz nie mówi, jak postawić sekcję obok artykułu - wybierasz display: flex na <main>: dzieci stają w rzędzie, 50% + 50% wypełnia szerokość, a stopka zostaje pod spodem bez clear. Klucz uznaje też float, grid albo position, byle bloki na siebie nie zachodziły (R.3.1).
styl.css CSS zmienione: 3 linie * {
font-family: "Century Gothic", sans-serif;
}
body {
background-color: Beige;
font-size: 140%;
}
header, footer {
text-align: center;
padding: 20px;
}
section, article {
width: 50%;
height: 600px;
}
main {
display: flex;
}Dla przycisku: kolor tła Tan, zaokrąglenie rogów 20 px, marginesy wewnętrzne 10 px, rozmiar czcionki 150%
Selektor znacznika button. Ta reguła zamyka kryteria kolorów tła i rozmiarów czcionki.
styl.css CSS zmienione: 6 linii * {
font-family: "Century Gothic", sans-serif;
}
body {
background-color: Beige;
font-size: 140%;
}
header, footer {
text-align: center;
padding: 20px;
}
section, article {
width: 50%;
height: 600px;
}
main {
display: flex;
}
button {
background-color: Tan;
border-radius: 20px;
padding: 10px;
font-size: 150%;
}Dla klasy obraz: szerokość 40%, marginesy wewnętrzne 20 px, obramowanie linią ciągłą o szerokości 1 px i kolorze Tan
Selektor klasy z kropką. Margines wewnętrzny odsuwa fotel od ramki - na ilustracji 2 widać jasną ramkę wokół obrazu głównego.
styl.css CSS zmienione: 5 linii * {
font-family: "Century Gothic", sans-serif;
}
body {
background-color: Beige;
font-size: 140%;
}
header, footer {
text-align: center;
padding: 20px;
}
section, article {
width: 50%;
height: 600px;
}
main {
display: flex;
}
button {
background-color: Tan;
border-radius: 20px;
padding: 10px;
font-size: 150%;
}
.obraz {
width: 40%;
padding: 20px;
border: 1px solid Tan;
}Dla klasy miniatury: szerokość 15%
Szerokość w procentach liczy się od sekcji; wysokość dopasuje się sama, z zachowaniem proporcji.
styl.css CSS zmienione: 3 linie * {
font-family: "Century Gothic", sans-serif;
}
body {
background-color: Beige;
font-size: 140%;
}
header, footer {
text-align: center;
padding: 20px;
}
section, article {
width: 50%;
height: 600px;
}
main {
display: flex;
}
button {
background-color: Tan;
border-radius: 20px;
padding: 10px;
font-size: 150%;
}
.obraz {
width: 40%;
padding: 20px;
border: 1px solid Tan;
}
.miniatury {
width: 15%;
}Dla klasy okno: kolor tła czarny z przezroczystością 0.7, szerokość 80%, pozycjonowana względem okna przeglądarki, od lewej strony 0, od góry 0, zawsze na wierzchu, element jest usunięty
rgba(0, 0, 0, 0.7) - czarne tło przepuszczające 30% tego, co pod spodem; opacity: 0.7 (klucz też je uznaje) zrobiłoby półprzezroczyste całe okno razem z fotelem, a na ilustracji 3 fotel jest pełny,position: fixed z left: 0 i top: 0 - przyklejenie do lewego górnego rogu okna przeglądarki (tabela 3 arkusza),z-index: 10 - dodatnia wartość, okno nad resztą strony,display: none - „element jest usunięty”: okna nie ma, dopóki skrypt go nie pokaże. Dlatego znak × i pusty obraz właśnie zniknęły z podglądu.styl.css CSS zmienione: 9 linii * {
font-family: "Century Gothic", sans-serif;
}
body {
background-color: Beige;
font-size: 140%;
}
header, footer {
text-align: center;
padding: 20px;
}
section, article {
width: 50%;
height: 600px;
}
main {
display: flex;
}
button {
background-color: Tan;
border-radius: 20px;
padding: 10px;
font-size: 150%;
}
.obraz {
width: 40%;
padding: 20px;
border: 1px solid Tan;
}
.miniatury {
width: 15%;
}
.okno {
background-color: rgba(0, 0, 0, 0.7);
width: 80%;
position: fixed;
left: 0;
top: 0;
z-index: 10;
display: none;
}Dla klasy obrazOkno: marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę, blokowy sposób wyświetlania
margin: auto wyśrodkowuje tylko element blokowy o szerokości mniejszej niż rodzic - dlatego para display: block i margin: auto. Obraz liniowy zignorowałby automatyczne marginesy.
styl.css CSS zmienione: 4 linie * {
font-family: "Century Gothic", sans-serif;
}
body {
background-color: Beige;
font-size: 140%;
}
header, footer {
text-align: center;
padding: 20px;
}
section, article {
width: 50%;
height: 600px;
}
main {
display: flex;
}
button {
background-color: Tan;
border-radius: 20px;
padding: 10px;
font-size: 150%;
}
.obraz {
width: 40%;
padding: 20px;
border: 1px solid Tan;
}
.miniatury {
width: 15%;
}
.okno {
background-color: rgba(0, 0, 0, 0.7);
width: 80%;
position: fixed;
left: 0;
top: 0;
z-index: 10;
display: none;
}
.obrazOkno {
margin: auto;
display: block;
}Dla klasy zamknij: pozycjonowanie względem pierwszego rodzica, od góry 15 px, od prawej strony 35 px, czcionka koloru Beige, pogrubiona, o rozmiarze 40 px
position: absolute liczy top i right od najbliższego pozycjonowanego przodka - okno ma position: fixed, więc znak × trafia w prawy górny róg okna, nie strony.
styl.css CSS zmienione: 8 linii * {
font-family: "Century Gothic", sans-serif;
}
body {
background-color: Beige;
font-size: 140%;
}
header, footer {
text-align: center;
padding: 20px;
}
section, article {
width: 50%;
height: 600px;
}
main {
display: flex;
}
button {
background-color: Tan;
border-radius: 20px;
padding: 10px;
font-size: 150%;
}
.obraz {
width: 40%;
padding: 20px;
border: 1px solid Tan;
}
.miniatury {
width: 15%;
}
.okno {
background-color: rgba(0, 0, 0, 0.7);
width: 80%;
position: fixed;
left: 0;
top: 0;
z-index: 10;
display: none;
}
.obrazOkno {
margin: auto;
display: block;
}
.zamknij {
position: absolute;
top: 15px;
right: 35px;
color: Beige;
font-weight: bold;
font-size: 40px;
}Gdy kursor znajdzie się na elemencie przypisanym do klasy zamknij, zmienia się na pointer
Pseudoklasa :hover i cursor: pointer - rączka podpowiada, że znak da się kliknąć. Samo cursor: pointer w regule .zamknij działa tak samo, ale arkusz opisuje to jako zachowanie pod kursorem.
styl.css CSS zmienione: 3 linie * {
font-family: "Century Gothic", sans-serif;
}
body {
background-color: Beige;
font-size: 140%;
}
header, footer {
text-align: center;
padding: 20px;
}
section, article {
width: 50%;
height: 600px;
}
main {
display: flex;
}
button {
background-color: Tan;
border-radius: 20px;
padding: 10px;
font-size: 150%;
}
.obraz {
width: 40%;
padding: 20px;
border: 1px solid Tan;
}
.miniatury {
width: 15%;
}
.okno {
background-color: rgba(0, 0, 0, 0.7);
width: 80%;
position: fixed;
left: 0;
top: 0;
z-index: 10;
display: none;
}
.obrazOkno {
margin: auto;
display: block;
}
.zamknij {
position: absolute;
top: 15px;
right: 35px;
color: Beige;
font-weight: bold;
font-size: 40px;
}
.zamknij:hover {
cursor: pointer;
}Kroki 43-48 · po tym etapie masz 39 z 39 kryteriów (pkt)
Po kliknięciu dowolnej miniatury jest podmieniany obraz główny na obraz z miniatury. Na ilustracji 6 kliknięto miniaturę fotel3.png, obraz główny zmienił się na fotel3.png
Skrypt w <script> na końcu <body> - wtedy wszystkie elementy strony są już w drzewie dokumentu (DOM) i getElementById je znajdzie (same pliki obrazów mogą się jeszcze pobierać, ale to skryptowi nie przeszkadza). Funkcja changeImage dostaje klikniętą miniaturę jako parametr i przepisuje jej src do obrazu głównego znalezionego po id. Jedna funkcja obsłuży wszystkie trzy miniatury, bo każda przekaże samą siebie.
kartaProduktu.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<br>
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
<div class="okno" id="popup">
<span class="zamknij">×</span>
<img class="obrazOkno" id="popupImage">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<strong>Wybierz wariant fotela</strong>
<select>
<option>wariant 1</option>
<option>wariant 2</option>
<option>wariant 3</option>
</select>
<p><button>KUP TERAZ</button></p>
<p><a href="sklep.html">Do strony głównej</a></p>
</article>
</main>
<footer>
<hr>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
function changeImage(thumbnail) {
document.getElementById("mainImage").src = thumbnail.src;
}
</script>
</body>
</html>Kliknięcie każdej miniatury powoduje wywołanie funkcji JavaScript podmieniającej obraz główny
Atrybut onclick="changeImage(this)" przy każdej miniaturze: słowo this oznacza element, który kliknięto. Kliknij trzecią miniaturę w podglądzie - obraz główny zmienia się na fotel z guzikiem, jak na ilustracji 6.
kartaProduktu.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<br>
<img src="fotel1.png" alt="miniatura" class="miniatury" onclick="changeImage(this)">
<img src="fotel2.png" alt="miniatura" class="miniatury" onclick="changeImage(this)">
<img src="fotel3.png" alt="miniatura" class="miniatury" onclick="changeImage(this)">
<div class="okno" id="popup">
<span class="zamknij">×</span>
<img class="obrazOkno" id="popupImage">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<strong>Wybierz wariant fotela</strong>
<select>
<option>wariant 1</option>
<option>wariant 2</option>
<option>wariant 3</option>
</select>
<p><button>KUP TERAZ</button></p>
<p><a href="sklep.html">Do strony głównej</a></p>
</article>
</main>
<footer>
<hr>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
function changeImage(thumbnail) {
document.getElementById("mainImage").src = thumbnail.src;
}
</script>
</body>
</html>Pojawienie się okna jest realizowane poprzez: Zmianę sposobu wyświetlania bloku okna na blokowy
Styl .okno ma display: none. Skrypt nadpisuje to stylem wpisanym w sam element: style.display = "block" - okno się pojawia, a reszta reguły (tło, pozycja, z-index) działa dalej.
kartaProduktu.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<br>
<img src="fotel1.png" alt="miniatura" class="miniatury" onclick="changeImage(this)">
<img src="fotel2.png" alt="miniatura" class="miniatury" onclick="changeImage(this)">
<img src="fotel3.png" alt="miniatura" class="miniatury" onclick="changeImage(this)">
<div class="okno" id="popup">
<span class="zamknij">×</span>
<img class="obrazOkno" id="popupImage">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<strong>Wybierz wariant fotela</strong>
<select>
<option>wariant 1</option>
<option>wariant 2</option>
<option>wariant 3</option>
</select>
<p><button>KUP TERAZ</button></p>
<p><a href="sklep.html">Do strony głównej</a></p>
</article>
</main>
<footer>
<hr>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
function changeImage(thumbnail) {
document.getElementById("mainImage").src = thumbnail.src;
}
function openPopup() {
document.getElementById("popup").style.display = "block";
}
</script>
</body>
</html>Przypisanie do obrazu w bloku okna źródła grafiki z obrazu głównego
Obraz w oknie dostaje to samo src, co obraz główny w chwili kliknięcia - jeśli wcześniej wybrano trzecią miniaturę, w oknie też będzie fotel3.png.
kartaProduktu.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<br>
<img src="fotel1.png" alt="miniatura" class="miniatury" onclick="changeImage(this)">
<img src="fotel2.png" alt="miniatura" class="miniatury" onclick="changeImage(this)">
<img src="fotel3.png" alt="miniatura" class="miniatury" onclick="changeImage(this)">
<div class="okno" id="popup">
<span class="zamknij">×</span>
<img class="obrazOkno" id="popupImage">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<strong>Wybierz wariant fotela</strong>
<select>
<option>wariant 1</option>
<option>wariant 2</option>
<option>wariant 3</option>
</select>
<p><button>KUP TERAZ</button></p>
<p><a href="sklep.html">Do strony głównej</a></p>
</article>
</main>
<footer>
<hr>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
function changeImage(thumbnail) {
document.getElementById("mainImage").src = thumbnail.src;
}
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("popupImage").src = document.getElementById("mainImage").src;
}
</script>
</body>
</html>Po kliknięciu obrazu głównego otwiera się okno z tym obrazem (ilustracja 3)
onclick="openPopup()" przy obrazie głównym. W podglądzie kliknij fotel: na stronę nakłada się przyciemnione okno z fotelem w naturalnym rozmiarze - jak na ilustracji 3.
kartaProduktu.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage" onclick="openPopup()">
<br>
<img src="fotel1.png" alt="miniatura" class="miniatury" onclick="changeImage(this)">
<img src="fotel2.png" alt="miniatura" class="miniatury" onclick="changeImage(this)">
<img src="fotel3.png" alt="miniatura" class="miniatury" onclick="changeImage(this)">
<div class="okno" id="popup">
<span class="zamknij">×</span>
<img class="obrazOkno" id="popupImage">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<strong>Wybierz wariant fotela</strong>
<select>
<option>wariant 1</option>
<option>wariant 2</option>
<option>wariant 3</option>
</select>
<p><button>KUP TERAZ</button></p>
<p><a href="sklep.html">Do strony głównej</a></p>
</article>
</main>
<footer>
<hr>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
function changeImage(thumbnail) {
document.getElementById("mainImage").src = thumbnail.src;
}
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("popupImage").src = document.getElementById("mainImage").src;
}
</script>
</body>
</html>Po kliknięciu znaku × okno jest usuwane poprzez zastosowanie odpowiedniej właściwości CSS
Funkcja closePopup przywraca display: none, a onclick="closePopup()" przy znaku × ją wywołuje. Okno znika, strona pod spodem zostaje bez zmian.
kartaProduktu.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage" onclick="openPopup()">
<br>
<img src="fotel1.png" alt="miniatura" class="miniatury" onclick="changeImage(this)">
<img src="fotel2.png" alt="miniatura" class="miniatury" onclick="changeImage(this)">
<img src="fotel3.png" alt="miniatura" class="miniatury" onclick="changeImage(this)">
<div class="okno" id="popup">
<span class="zamknij" onclick="closePopup()">×</span>
<img class="obrazOkno" id="popupImage">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<strong>Wybierz wariant fotela</strong>
<select>
<option>wariant 1</option>
<option>wariant 2</option>
<option>wariant 3</option>
</select>
<p><button>KUP TERAZ</button></p>
<p><a href="sklep.html">Do strony głównej</a></p>
</article>
</main>
<footer>
<hr>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
function changeImage(thumbnail) {
document.getElementById("mainImage").src = thumbnail.src;
}
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("popupImage").src = document.getElementById("mainImage").src;
}
function closePopup() {
document.getElementById("popup").style.display = "none";
}
</script>
</body>
</html>Kroki 49-51 · po tym etapie masz 39 z 39 kryteriów (pkt)
Kliknięcie każdej miniatury powoduje wywołanie funkcji JavaScript podmieniającej obraz główny
Atrybuty onclick mieszają HTML ze skryptem. W prawdziwych projektach HTML zostaje czysty, a skrypt sam przypina obsługę zdarzeń: addEventListener("click", ...) dla każdej miniatury (znalezionych przez querySelectorAll(".miniatury")), dla obrazu głównego i dla znaku ×. Funkcje się nie zmieniły, a dawne wywołania zostały opisane w komentarzu. Sprawdzone w przeglądarce: te same kliknięcia dają ten sam wynik co wersja z onclick. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
kartaProduktu.html HTML zmienione: 14 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<br>
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
<div class="okno" id="popup">
<span class="zamknij">×</span>
<img class="obrazOkno" id="popupImage">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<strong>Wybierz wariant fotela</strong>
<select>
<option>wariant 1</option>
<option>wariant 2</option>
<option>wariant 3</option>
</select>
<p><button>KUP TERAZ</button></p>
<p><a href="sklep.html">Do strony głównej</a></p>
</article>
</main>
<footer>
<hr>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
function changeImage(thumbnail) {
document.getElementById("mainImage").src = thumbnail.src;
}
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("popupImage").src = document.getElementById("mainImage").src;
}
function closePopup() {
document.getElementById("popup").style.display = "none";
}
// Wersja z egzaminu: atrybuty onclick="changeImage(this)", onclick="openPopup()" i onclick="closePopup()" w znacznikach.
var thumbnails = document.querySelectorAll(".miniatury");
for (var i = 0; i < thumbnails.length; i++) {
thumbnails[i].addEventListener("click", function () {
changeImage(this);
});
}
document.getElementById("mainImage").addEventListener("click", openPopup);
document.querySelector(".zamknij").addEventListener("click", closePopup);
</script>
</body>
</html>Po kliknięciu znaku × okno jest usuwane poprzez zastosowanie odpowiedniej właściwości CSS
Mały znak × to jedyna droga wyjścia z okna, a użytkownicy odruchowo wciskają Esc albo klikają obok obrazu. Dwa nasłuchiwacze: keydown na całym dokumencie sprawdza event.key === "Escape", a click na oknie zamyka je tylko wtedy, gdy kliknięto samo tło (event.target === this) - kliknięcie fotela okna nie zamyka. Sprawdzone w przeglądarce: Esc zamyka, klik w fotel zostawia okno, klik w tło zamyka. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
kartaProduktu.html HTML zmienione: 10 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<br>
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
<div class="okno" id="popup">
<span class="zamknij">×</span>
<img class="obrazOkno" id="popupImage">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<strong>Wybierz wariant fotela</strong>
<select>
<option>wariant 1</option>
<option>wariant 2</option>
<option>wariant 3</option>
</select>
<p><button>KUP TERAZ</button></p>
<p><a href="sklep.html">Do strony głównej</a></p>
</article>
</main>
<footer>
<hr>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
function changeImage(thumbnail) {
document.getElementById("mainImage").src = thumbnail.src;
}
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("popupImage").src = document.getElementById("mainImage").src;
}
function closePopup() {
document.getElementById("popup").style.display = "none";
}
// Wersja z egzaminu: atrybuty onclick="changeImage(this)", onclick="openPopup()" i onclick="closePopup()" w znacznikach.
var thumbnails = document.querySelectorAll(".miniatury");
for (var i = 0; i < thumbnails.length; i++) {
thumbnails[i].addEventListener("click", function () {
changeImage(this);
});
}
document.getElementById("mainImage").addEventListener("click", openPopup);
document.querySelector(".zamknij").addEventListener("click", closePopup);
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
closePopup();
}
});
document.getElementById("popup").addEventListener("click", function (event) {
if (event.target === this) {
closePopup();
}
});
</script>
</body>
</html>Obraz bez źródła formatowany klasą obrazOkno
Trzy drobiazgi, które wychwytuje walidator HTML i czytnik ekranu. Obraz w oknie dostaje alt - bez niego czytnik przeczyta tylko „obraz” (sam brak src walidator też zgłasza, ale tu jest celowy: źródło wstawia skrypt). Napis „Wybierz wariant fotela” staje się etykietą listy (<label for> + id), więc kliknięcie napisu otwiera listę, a czytnik wie, czego dotyczy wybór. Przycisk bez działania dostaje type="button" - gdyby kiedyś trafił do formularza, nie wyśle go przypadkiem. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
kartaProduktu.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<br>
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
<div class="okno" id="popup">
<span class="zamknij">×</span>
<img class="obrazOkno" id="popupImage" alt="powiększony fotel">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<label for="variant"><strong>Wybierz wariant fotela</strong></label>
<select id="variant" name="variant">
<option>wariant 1</option>
<option>wariant 2</option>
<option>wariant 3</option>
</select>
<p><button type="button">KUP TERAZ</button></p>
<p><a href="sklep.html">Do strony głównej</a></p>
</article>
</main>
<footer>
<hr>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
function changeImage(thumbnail) {
document.getElementById("mainImage").src = thumbnail.src;
}
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("popupImage").src = document.getElementById("mainImage").src;
}
function closePopup() {
document.getElementById("popup").style.display = "none";
}
// Wersja z egzaminu: atrybuty onclick="changeImage(this)", onclick="openPopup()" i onclick="closePopup()" w znacznikach.
var thumbnails = document.querySelectorAll(".miniatury");
for (var i = 0; i < thumbnails.length; i++) {
thumbnails[i].addEventListener("click", function () {
changeImage(this);
});
}
document.getElementById("mainImage").addEventListener("click", openPopup);
document.querySelector(".zamknij").addEventListener("click", closePopup);
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
closePopup();
}
});
document.getElementById("popup").addEventListener("click", function (event) {
if (event.target === this) {
closePopup();
}
});
</script>
</body>
</html>Krok 52 · po tym etapie masz 39 z 39 kryteriów (pkt)
Po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Umieść go w folderze z numerem zdającego. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz stronę.
W folderze z numerem zdającego: fotel1.png, fotel2.png, fotel3.png, import.png, kartaProduktu.html, kw1.png - kw4.png, kwerendy.txt, przeglądarka.txt, sklep.html, styl.css. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.
przeglądarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 51.
Symulacja ekranu w przeglądarce - w Android Studio / Visual Studio wygląd może się nieco różnić.
To jedno z możliwych rozwiązań. Egzaminator ocenia spełnienie kryteriów z klucza odpowiedzi, a nie zgodność z tym kodem - inna, poprawna droga też daje punkty.
Autor rozwiązania: Bartosz Bryniarski. Licencja CC BY-NC 4.0 - kopiowanie i przeróbki do celów niekomercyjnych, z podaniem autora i źródła (link do tej strony) (zasady wykorzystania). Treść arkusza i klucza oceniania pochodzi z CKE.