To drugi sposób rozwiązania tego samego arkusza. Wynik jest ten sam - baza kadra z czterema zapytaniami, logo z przezroczystym tłem i strona pracownicy.html z dwoma banerami, trzema kartami pracowniczymi, cytatami zmienianymi kliknięciem i stopką - i tak samo spełnia każde kryterium klucza. Inna jest droga:
50% 50% (klucz R.4.5 przyjmuje grid-template-columns), a pod nimi pozostałe bloki na całą szerokość - bez float i clear; trzy karty też na siatce,blockquote + blockquote, a skrypt pracuje na liście cytatów,const, querySelectorAll, addEventListener i jedna funkcja z resztą z dzielenia zamiast trzech gałęzi if,COUNT(*), aliasy tabel i nieujemny typ nowej kolumny.Na końcu krótkie porównanie z wersją podstawową (zakładka obok). Baza, zdjęcia i teksty pochodzą z prawdziwego archiwum pliki10, zapytania zostały wykonane na tej bazie w MariaDB z XAMPP-a, a skrypt jest sprawdzony w prawdziwej przeglądarce Chrome: kliknięcia, Enter i spacja, położenie bloków i kart.
Jak liczą się punkty. Klucz ma 37 kryteriów (R.1.1 - R.5.7), każde za 1 punkt. Próg zdania to 75%, czyli 28 punktów. Przy każdym kroku jest napisane, które kryteria spełnia.
Kroki 1-7 · po tym etapie masz 6 z 37 kryteriów (pkt)
Utwórz bazę danych o nazwie kadra, z zestawem polskich znaków (np. utf8_unicode_ci)
Archiwum pliki10.zip rozpakuj hasłem K@dra_FirMy# (małpa zamiast „a”, podkreślnik, wielkie M, krzyżyk na końcu) do folderu z numerem zdającego. W phpMyAdmin Nowa → kadra, porównywanie utf8_unicode_ci, albo zapytaniem:
CREATE DATABASE kadra CHARACTER SET utf8 COLLATE utf8_unicode_ci;
Do bazy zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum
Zaznaczona baza kadra, Import → baza.sql. Dwie tabele z obrazu 1: pracownicy (imię, nazwisko, pensja, staż w latach i klucz obcy stanowiska_id) oraz stanowiska (identyfikator i nazwa).
Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie PNG i nazwij import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel.
Cały ekran z paskiem zadań, w PNG. Zrzuty zapytań idą później do JPEG (kw1.jpg - kw4.jpg).
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie liczbę wierszy i pensję grupując pracowników według pensji i sortując dane malejąco ze względu na pensję. W wyniku zapytania są wyświetlane poszczególne pensje oraz liczba osób, które pobierają taką pensję
GROUP BY pensja - jedna grupa na każdą różną pensję, COUNT(*) liczy wiersze w grupie,AS liczbaOsob - bez aliasu kolumna wyniku nazywa się dosłownie COUNT(*); alias mówi, co liczba znaczy (arkusz go nie wymaga),ORDER BY pensja DESC - od najwyższej pensji.Wynik: 7 wierszy, od 1 osoby z pensją 8000 do 2 osób z pensją 3800, jak w kluczu. Zapytania zapisz w kwerendy.txt, zrzut jako kw1.jpg.
ORDER BY bez DESC sortuje rosnąco - te same 7 wierszy w odwrotnej kolejności nie spełnia polecenia.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT COUNT(*) AS liczbaOsob, pensja
FROM pracownicy
GROUP BY pensja
ORDER BY pensja DESC;
Zapytanie 2: wybierające jedynie imiona i nazwiska pracowników oraz odpowiadające im nazwy stanowisk dla pracowników o stażu wyższym niż 10 lat. Należy posłużyć się relacją
Aliasy p (pracownicy) i s (stanowiska) - przy każdej kolumnie widać tabelę, a ON s.id = p.stanowiska_id pokazuje parę kluczy relacji. p.staz > 10 - „wyższym niż 10”, bez równości, więc Jan Nowacki ze stażem 10 odpada. Wynik: 4 wiersze - Dobromilski (Dyrektor), Nowak (Kadrowa), Trojanowska i Grzegorzewski (Kierownik). Zrzut: kw2.jpg.
staz >= 10 dopisuje piątego pracownika (Nowacki) - klucz wymaga dokładnie 4 rekordów.
kwerendy.txt Tekst zmienione: 6 linii -- Zapytanie 1
SELECT COUNT(*) AS liczbaOsob, pensja
FROM pracownicy
GROUP BY pensja
ORDER BY pensja DESC;
-- Zapytanie 2
SELECT p.imie, p.nazwisko, s.nazwa
FROM pracownicy AS p
JOIN stanowiska AS s ON s.id = p.stanowiska_id
WHERE p.staz > 10;
Zapytanie 3: wybierające jedynie nazwiska i pensję dla pracowników, których staż wynosi od 10 do 20 lat
BETWEEN 10 AND 20 obejmuje oba końce - to samo co staz >= 10 AND staz <= 20, a czyta się jak polecenie. Wynik: 5 wierszy - Nowak 5000, Trojanowska 6000, Nowacki 5050, Grzegorzewski 6000, Trębosz 4000; staż 10 i 20 wchodzi. Zrzut: kw3.jpg.
kwerendy.txt Tekst zmienione: 5 linii -- Zapytanie 1
SELECT COUNT(*) AS liczbaOsob, pensja
FROM pracownicy
GROUP BY pensja
ORDER BY pensja DESC;
-- Zapytanie 2
SELECT p.imie, p.nazwisko, s.nazwa
FROM pracownicy AS p
JOIN stanowiska AS s ON s.id = p.stanowiska_id
WHERE p.staz > 10;
-- Zapytanie 3
SELECT nazwisko, pensja
FROM pracownicy
WHERE staz BETWEEN 10 AND 20;
Zapytanie 4: Dodające do tabeli stanowiska kolumnę o nazwie minPensja dowolnego typu całkowitego
ALTER TABLE ... ADD COLUMN. Typ INT UNSIGNED - pensja nie bywa ujemna, a w tabeli pracownicy kolumna pensja ma właśnie ten typ, więc obie wartości da się porównywać bez zastrzeżeń. NULL wprost: dla istniejących stanowisk minimalnej pensji jeszcze nie ustalono. Klucz przyjmuje dowolny typ całkowity. Na zrzucie kw4.jpg struktura tabeli stanowiska z nową kolumną.
DECIMAL albo FLOAT to nie typ całkowity - kryterium nie jest spełnione.
kwerendy.txt Tekst zmienione: 4 linie -- Zapytanie 1
SELECT COUNT(*) AS liczbaOsob, pensja
FROM pracownicy
GROUP BY pensja
ORDER BY pensja DESC;
-- Zapytanie 2
SELECT p.imie, p.nazwisko, s.nazwa
FROM pracownicy AS p
JOIN stanowiska AS s ON s.id = p.stanowiska_id
WHERE p.staz > 10;
-- Zapytanie 3
SELECT nazwisko, pensja
FROM pracownicy
WHERE staz BETWEEN 10 AND 20;
-- Zapytanie 4
ALTER TABLE stanowiska
ADD COLUMN minPensja INT UNSIGNED NULL;
Kroki 8-18 · po tym etapie masz 17 z 37 kryteriów (pkt)
Dla grafiki logo.png (górny lewy róg obrazu 2) należy: Ustawić przezroczyste tło. Skadrować, tak aby kształt wypełniał całość obrazu. Przeskalować z zachowaniem proporcji do dokładnej wysokości 100 px
Grafika jest taka sama jak w wersji podstawowej. W GIMP-ie, w tej kolejności:
Eksport pod tą samą nazwą, w PNG. Po lewej oryginał, po prawej wynik na szachownicy.
Skalowanie przed kadrowaniem daje obraz 100 × 100 px z małą kulą w środku - kształt nie wypełnia obrazu.
Składa się ze strony o nazwie pracownicy.html zapisanej w języku HTML5. Ustawiony język zawartości strony na polski. Jawnie zastosowany właściwy standard kodowania polskich znaków
<!DOCTYPE html>, <html lang="pl"> i <meta charset="UTF-8"> jako pierwszy element <head> - razem jedno kryterium (R.2.2).
pracownicy.html HTML nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony widoczny na karcie przeglądarki: „Nasz zespół”
<title> i viewport - telefon nie pomniejsza strony do rozmiaru ekranu komputera.
pracownicy.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nasz zespół</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
Całe formatowanie pochodzi ze styl.css - bez atrybutów style i znacznika <style> w HTML-u (R.3.5).
Klucz odbiera R.3.5 także wtedy, gdy choć jeden selektor nie trafia w blok (np. kropka zamiast #).
pracownicy.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nasz zespół</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>Podział strony na: dwa bloki banera obok siebie, poniżej blok główny, poniżej blok cytatu, na dole stopka. Podział zrealizowany wyłącznie za pomocą semantycznych znaczników sekcji języka HTML5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 2
<header> (klucz R.2.4 wymaga header dla części nagłówkowej; na stronie może ich być kilka). Każdy ma dwie klasy: wspólną banner (jeden styl dla obu) i własną - logo albo title - która wskaże mu kolumnę siatki,<main>, blok cytatów <section class="quotes">, stopka <footer>.Klasy zamiast identyfikatorów: identyfikator musi być jedyny na stronie, a klasa niczego nie zakłada - przy stylach to wygodniejszy i częstszy wybór. Identyfikatorów nie będzie potrzebował nawet skrypt (R.2.4).
pracownicy.html HTML zmienione: 10 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nasz zespół</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header class="banner logo">
</header>
<header class="banner title">
</header>
<main>
</main>
<section class="quotes">
</section>
<footer>
</footer>
</body>
</html>Zawartość pierwszego banera: obraz logo.png z tekstem alternatywnym „logo firmy”
<img> z przygotowanym plikiem i alt="logo firmy".
pracownicy.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nasz zespół</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header class="banner logo">
<img src="logo.png" alt="logo firmy">
</header>
<header class="banner title">
</header>
<main>
</main>
<section class="quotes">
</section>
<footer>
</footer>
</body>
</html>Zawartość drugiego banera: nagłówek pierwszego stopnia o treści „Nasz zespół”
<h1> - jedyny nagłówek pierwszego stopnia na stronie.
pracownicy.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nasz zespół</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header class="banner logo">
<img src="logo.png" alt="logo firmy">
</header>
<header class="banner title">
<h1>Nasz zespół</h1>
</header>
<main>
</main>
<section class="quotes">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku głównego: trzy bloki kart pracowniczych, umieszczone obok siebie. Zawartość kart jest zgodna z obrazem 2. Dane do kart należy skopiować do dokumentu HTML z pliku tekstyNaStrone.txt, wypakowanego z archiwum. Każdy z bloków zawiera: Obraz z tekstem alternatywnym. Imię i nazwisko w nagłówku drugiego stopnia. Stanowisko w nagłówku trzeciego stopnia. Opis i numer telefonu w dwóch paragrafach (akapitach). Odnośnik pocztowy o treści „Kontakt” do adresu e-mail danej osoby, zapisany w nagłówku piątego stopnia
Karta to zamknięta treść o jednej osobie - <article> z klasą card. W środku, w kolejności z arkusza:
<img> z plikiem i tekstem alternatywnym z tekstyNaStrone.txt (dla dyrektora osoba1.jpg, „Dyrektor”) - R.2.7,<h2> z imieniem i nazwiskiem, <h3> ze stanowiskiem, dwa akapity: opis i telefon,<h5> z odnośnikiem mailto: - kliknięcie otwiera program pocztowy z wpisanym odbiorcą (R.3.3).Pierwsza karta jest kompletna (R.2.8).
Adres bez mailto: przeglądarka traktuje jak plik na serwerze - odnośnik nie jest pocztowy.
pracownicy.html HTML zmienione: 8 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nasz zespół</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header class="banner logo">
<img src="logo.png" alt="logo firmy">
</header>
<header class="banner title">
<h1>Nasz zespół</h1>
</header>
<main>
<article class="card">
<img src="osoba1.jpg" alt="Dyrektor">
<h2>Krzysztof Dobromilski</h2>
<h3>Dyrektor</h3>
<p>Firma logistyczna była jego marzeniem. Zrealizował je 10 lat temu. Nasza firma prosperuje dzięki Krzysztofowi</p>
<p>telefon: 111222333</p>
<h5><a href="mailto:[email protected]">Kontakt</a></h5>
</article>
</main>
<section class="quotes">
</section>
<footer>
</footer>
</body>
</html>Zawartość kart jest zgodna z obrazem 2.
Dwie kopie karty z danymi z tekstyNaStrone.txt: Joanna Trojanowska (osoba2.jpg, alt „Kierownik logistyków”) i Ewa Nowak (osoba3.jpg, alt „Kadry”, stanowisko „Księgowość i kadry”). Obok siebie postawi je CSS.
pracownicy.html HTML zmienione: 16 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nasz zespół</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header class="banner logo">
<img src="logo.png" alt="logo firmy">
</header>
<header class="banner title">
<h1>Nasz zespół</h1>
</header>
<main>
<article class="card">
<img src="osoba1.jpg" alt="Dyrektor">
<h2>Krzysztof Dobromilski</h2>
<h3>Dyrektor</h3>
<p>Firma logistyczna była jego marzeniem. Zrealizował je 10 lat temu. Nasza firma prosperuje dzięki Krzysztofowi</p>
<p>telefon: 111222333</p>
<h5><a href="mailto:[email protected]">Kontakt</a></h5>
</article>
<article class="card">
<img src="osoba2.jpg" alt="Kierownik logistyków">
<h2>Joanna Trojanowska</h2>
<h3>Kierownik logistyków</h3>
<p>Od początku firmy z nami. Wie jak zorganizować pracę swoich logistyków aby wszystko było na czas</p>
<p>telefon: 222333444</p>
<h5><a href="mailto:[email protected]">Kontakt</a></h5>
</article>
<article class="card">
<img src="osoba3.jpg" alt="Kadry">
<h2>Ewa Nowak</h2>
<h3>Księgowość i kadry</h3>
<p>Od lat finanse powierzamy niezawodnej Ewie. Twardą ręką trzyma kasę i dba o wszystkich pracowników</p>
<p>telefon: 333444555</p>
<h5><a href="mailto:[email protected]">Kontakt</a></h5>
</article>
</main>
<section class="quotes">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku cytatów: Trzy cytaty, które należy skopiować do dokumentu HTML z pliku tekstynastrone.txt. Do zdefiniowania poszczególnych cytatów należy zastosować znacznik semantyczny przeznaczony dla cytatu. Treść cytatu jest zapisana w cudzysłowach, imię w paragrafie.
<blockquote> - znacznik dłuższego cytatu (R.2.9). Treść w cudzysłowach, jak w pliku, autor w akapicie. Cytaty nie mają identyfikatorów: skrypt weźmie je jako listę, w kolejności z kodu.
Cytat zmienia się po kliknięciu, więc działa jak przycisk - i tak go opisują dwa atrybuty:
tabindex="0" - do cytatu można przejść klawiszem Tab (zwykły blok tekstu nie dostaje fokusu),role="button" - czytnik ekranu zapowie go jako przycisk, czyli coś, co da się nacisnąć.pracownicy.html HTML zmienione: 12 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nasz zespół</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header class="banner logo">
<img src="logo.png" alt="logo firmy">
</header>
<header class="banner title">
<h1>Nasz zespół</h1>
</header>
<main>
<article class="card">
<img src="osoba1.jpg" alt="Dyrektor">
<h2>Krzysztof Dobromilski</h2>
<h3>Dyrektor</h3>
<p>Firma logistyczna była jego marzeniem. Zrealizował je 10 lat temu. Nasza firma prosperuje dzięki Krzysztofowi</p>
<p>telefon: 111222333</p>
<h5><a href="mailto:[email protected]">Kontakt</a></h5>
</article>
<article class="card">
<img src="osoba2.jpg" alt="Kierownik logistyków">
<h2>Joanna Trojanowska</h2>
<h3>Kierownik logistyków</h3>
<p>Od początku firmy z nami. Wie jak zorganizować pracę swoich logistyków aby wszystko było na czas</p>
<p>telefon: 222333444</p>
<h5><a href="mailto:[email protected]">Kontakt</a></h5>
</article>
<article class="card">
<img src="osoba3.jpg" alt="Kadry">
<h2>Ewa Nowak</h2>
<h3>Księgowość i kadry</h3>
<p>Od lat finanse powierzamy niezawodnej Ewie. Twardą ręką trzyma kasę i dba o wszystkich pracowników</p>
<p>telefon: 333444555</p>
<h5><a href="mailto:[email protected]">Kontakt</a></h5>
</article>
</main>
<section class="quotes">
<blockquote tabindex="0" role="button">
"Każdego dnia stawiam sobie nieosiągalne wyzwania i próbuję je wykonać"
<p>- Krzysztof</p>
</blockquote>
<blockquote tabindex="0" role="button">
"Nie bój się porażek, im więcej ich rozwiążesz, tym szybciej osiągniesz cel"
<p>- Joanna</p>
</blockquote>
<blockquote tabindex="0" role="button">
"Niezadowolony pracownik jest dla mnie źródłem nauki"
<p>- Ewa</p>
</blockquote>
</section>
<footer>
</footer>
</body>
</html>Zawartość stopki: paragraf o treści: „Stronę wykonał: ”, dalej wstawiony numer zdającego.
Akapit w <footer>. Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL), tu stoi autor rozwiązania. Z <h1> i akapitami w cytatach to R.2.6.
pracownicy.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nasz zespół</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header class="banner logo">
<img src="logo.png" alt="logo firmy">
</header>
<header class="banner title">
<h1>Nasz zespół</h1>
</header>
<main>
<article class="card">
<img src="osoba1.jpg" alt="Dyrektor">
<h2>Krzysztof Dobromilski</h2>
<h3>Dyrektor</h3>
<p>Firma logistyczna była jego marzeniem. Zrealizował je 10 lat temu. Nasza firma prosperuje dzięki Krzysztofowi</p>
<p>telefon: 111222333</p>
<h5><a href="mailto:[email protected]">Kontakt</a></h5>
</article>
<article class="card">
<img src="osoba2.jpg" alt="Kierownik logistyków">
<h2>Joanna Trojanowska</h2>
<h3>Kierownik logistyków</h3>
<p>Od początku firmy z nami. Wie jak zorganizować pracę swoich logistyków aby wszystko było na czas</p>
<p>telefon: 222333444</p>
<h5><a href="mailto:[email protected]">Kontakt</a></h5>
</article>
<article class="card">
<img src="osoba3.jpg" alt="Kadry">
<h2>Ewa Nowak</h2>
<h3>Księgowość i kadry</h3>
<p>Od lat finanse powierzamy niezawodnej Ewie. Twardą ręką trzyma kasę i dba o wszystkich pracowników</p>
<p>telefon: 333444555</p>
<h5><a href="mailto:[email protected]">Kontakt</a></h5>
</article>
</main>
<section class="quotes">
<blockquote tabindex="0" role="button">
"Każdego dnia stawiam sobie nieosiągalne wyzwania i próbuję je wykonać"
<p>- Krzysztof</p>
</blockquote>
<blockquote tabindex="0" role="button">
"Nie bój się porażek, im więcej ich rozwiążesz, tym szybciej osiągniesz cel"
<p>- Joanna</p>
</blockquote>
<blockquote tabindex="0" role="button">
"Niezadowolony pracownik jest dla mnie źródłem nauki"
<p>- Ewa</p>
</blockquote>
</section>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 19-30 · po tym etapie masz 30 z 37 kryteriów (pkt)
Domyślne formatowanie wszystkich selektorów: krój czcionki Bookman Old Style, w przypadku braku - Serif
Kolory z arkusza w zmiennych na :root - nazwy mówią, do czego służą (--contact-hover), a nie jaki to kolor. Krój ze spacjami w cudzysłowie, rodzina zapasowa serif na końcu - klucz uznaje tylko tę kolejność (R.4.1).
styl.css CSS nowy plik :root {
--banner-color: DarkCyan;
--card-color: Azure;
--contact-color: Teal;
--contact-hover: LightSeaGreen;
}
* {
font-family: "Bookman Old Style", serif;
}Podział strony na: dwa bloki banera obok siebie, poniżej blok główny, poniżej blok cytatu, na dole stopka. Podział zrealizowany wyłącznie za pomocą semantycznych znaczników sekcji języka HTML5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 2
grid-template-areas rysuje obraz 2: w pierwszym wierszu dwa banery obok siebie, pod nimi blok główny, cytaty i stopka - każdy przez obie kolumny. grid-template-columns: 50% 50% to od razu szerokości banerów z arkusza (klucz R.4.5 przyjmuje je w tej postaci). Bez float nie trzeba clear - blok główny ma swój wiersz (R.3.1).
styl.css CSS zmienione: 30 linii :root {
--banner-color: DarkCyan;
--card-color: Azure;
--contact-color: Teal;
--contact-hover: LightSeaGreen;
}
* {
font-family: "Bookman Old Style", serif;
}
body {
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas:
"logo title"
"main main"
"quotes quotes"
"footer footer";
}
.logo {
grid-area: logo;
}
.title {
grid-area: title;
}
main {
grid-area: main;
}
.quotes {
grid-area: quotes;
}
footer {
grid-area: footer;
}Dla obu bloków banera: kolor tła DarkCyan, biały kolor czcionki, szerokość 50%, wysokość 100 px, odstępy między literami 15 px
Wspólna klasa .banner. Szerokość 50% daje kolumna siatki - dopisane width: 50% liczyłoby się od kolumny i zwęziło baner do ćwierci strony. letter-spacing rozstrzela litery „Nasz zespół” jak na obrazie 2 (R.4.4).
width: 50% na banerze w kolumnie 50% daje baner szeroki na 25% strony - procent szerokości elementu siatki liczy się od jego kolumny.
styl.css CSS zmienione: 7 linii :root {
--banner-color: DarkCyan;
--card-color: Azure;
--contact-color: Teal;
--contact-hover: LightSeaGreen;
}
* {
font-family: "Bookman Old Style", serif;
}
body {
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas:
"logo title"
"main main"
"quotes quotes"
"footer footer";
}
.logo {
grid-area: logo;
}
.title {
grid-area: title;
}
main {
grid-area: main;
}
.quotes {
grid-area: quotes;
}
footer {
grid-area: footer;
}
.banner {
background-color: var(--banner-color);
color: white;
height: 100px;
letter-spacing: 15px;
}Dla bloku stopki kolor tła DarkCyan, biały kolor czcionki
Ten sam kolor co banery - ze zmiennej.
styl.css CSS zmienione: 5 linii :root {
--banner-color: DarkCyan;
--card-color: Azure;
--contact-color: Teal;
--contact-hover: LightSeaGreen;
}
* {
font-family: "Bookman Old Style", serif;
}
body {
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas:
"logo title"
"main main"
"quotes quotes"
"footer footer";
}
.logo {
grid-area: logo;
}
.title {
grid-area: title;
}
main {
grid-area: main;
}
.quotes {
grid-area: quotes;
}
footer {
grid-area: footer;
}
.banner {
background-color: var(--banner-color);
color: white;
height: 100px;
letter-spacing: 15px;
}
footer {
background-color: var(--banner-color);
color: white;
}Dla bloku karty pracowniczej: kolor tła Azure, szerokość 30%, marginesy zewnętrzne 1%, cień bloku o przesunięciu w obu osiach 4 px, rozmyciu 8 px, kolorze DimGray
main dostaje własną siatkę: repeat(3, 30%) to trzy kolumny po 30% - szerokość karty z arkusza zapisana raz, w siatce. Karty stają obok siebie (R.3.2),margin: 1% - jak każe arkusz. Uwaga na siatkę: procentowy margines elementu siatki liczy się od jego kolumny (30%), więc wychodzi drobniejszy niż w wersji podstawowej. Odstęp między kartami daje column-gap: 2% - tyle, ile dwa marginesy po 1% w wersji podstawowej,box-shadow: 4px 4px 8px DimGray - przesunięcie w poziomie i w pionie, rozmycie, kolor (R.4.8).styl.css CSS zmienione: 12 linii :root {
--banner-color: DarkCyan;
--card-color: Azure;
--contact-color: Teal;
--contact-hover: LightSeaGreen;
}
* {
font-family: "Bookman Old Style", serif;
}
body {
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas:
"logo title"
"main main"
"quotes quotes"
"footer footer";
}
.logo {
grid-area: logo;
}
.title {
grid-area: title;
}
main {
grid-area: main;
}
.quotes {
grid-area: quotes;
}
footer {
grid-area: footer;
}
.banner {
background-color: var(--banner-color);
color: white;
height: 100px;
letter-spacing: 15px;
}
footer {
background-color: var(--banner-color);
color: white;
}
main {
display: grid;
grid-template-columns: repeat(3, 30%);
column-gap: 2%;
}
.card {
background-color: var(--card-color);
margin: 1%;
box-shadow: 4px 4px 8px DimGray;
}Jedynie dla obrazów w karcie pracowniczej: szerokość 100%
Selektor potomka .card img - logo w banerze zostaje w swoim rozmiarze. display: block (dodatek) usuwa kilka pikseli przerwy pod zdjęciem: obraz w linii tekstu zostawia pod sobą miejsce na „ogonki” liter.
styl.css CSS zmienione: 5 linii :root {
--banner-color: DarkCyan;
--card-color: Azure;
--contact-color: Teal;
--contact-hover: LightSeaGreen;
}
* {
font-family: "Bookman Old Style", serif;
}
body {
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas:
"logo title"
"main main"
"quotes quotes"
"footer footer";
}
.logo {
grid-area: logo;
}
.title {
grid-area: title;
}
main {
grid-area: main;
}
.quotes {
grid-area: quotes;
}
footer {
grid-area: footer;
}
.banner {
background-color: var(--banner-color);
color: white;
height: 100px;
letter-spacing: 15px;
}
footer {
background-color: var(--banner-color);
color: white;
}
main {
display: grid;
grid-template-columns: repeat(3, 30%);
column-gap: 2%;
}
.card {
background-color: var(--card-color);
margin: 1%;
box-shadow: 4px 4px 8px DimGray;
}
.card img {
width: 100%;
display: block;
}Dla paragrafu oraz nagłówków drugiego i trzeciego stopnia: marginesy zewnętrzne 15 px
Trzy selektory w jednej regule - odsuwają tekst od brzegów karty.
styl.css CSS zmienione: 4 linie :root {
--banner-color: DarkCyan;
--card-color: Azure;
--contact-color: Teal;
--contact-hover: LightSeaGreen;
}
* {
font-family: "Bookman Old Style", serif;
}
body {
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas:
"logo title"
"main main"
"quotes quotes"
"footer footer";
}
.logo {
grid-area: logo;
}
.title {
grid-area: title;
}
main {
grid-area: main;
}
.quotes {
grid-area: quotes;
}
footer {
grid-area: footer;
}
.banner {
background-color: var(--banner-color);
color: white;
height: 100px;
letter-spacing: 15px;
}
footer {
background-color: var(--banner-color);
color: white;
}
main {
display: grid;
grid-template-columns: repeat(3, 30%);
column-gap: 2%;
}
.card {
background-color: var(--card-color);
margin: 1%;
box-shadow: 4px 4px 8px DimGray;
}
.card img {
width: 100%;
display: block;
}
p, h2, h3 {
margin: 15px;
}Dla selektora odnośnika: biały kolor czcionki
Uwaga w arkuszu i w kluczu: wyłącznie selektor a - nie klasa, nie h5 a. Tu nowoczesność ustępuje projektowi: arkusz zastrzega to pod „późniejszą rozbudowę witryny”. Banery, stopka i odnośniki mają już biały tekst (R.4.3).
Reguła .card a albo h5 a nie spełnia R.4.3, nawet jeśli tekst jest biały - klucz sprawdza selektor.
styl.css CSS zmienione: 4 linie :root {
--banner-color: DarkCyan;
--card-color: Azure;
--contact-color: Teal;
--contact-hover: LightSeaGreen;
}
* {
font-family: "Bookman Old Style", serif;
}
body {
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas:
"logo title"
"main main"
"quotes quotes"
"footer footer";
}
.logo {
grid-area: logo;
}
.title {
grid-area: title;
}
main {
grid-area: main;
}
.quotes {
grid-area: quotes;
}
footer {
grid-area: footer;
}
.banner {
background-color: var(--banner-color);
color: white;
height: 100px;
letter-spacing: 15px;
}
footer {
background-color: var(--banner-color);
color: white;
}
main {
display: grid;
grid-template-columns: repeat(3, 30%);
column-gap: 2%;
}
.card {
background-color: var(--card-color);
margin: 1%;
box-shadow: 4px 4px 8px DimGray;
}
.card img {
width: 100%;
display: block;
}
p, h2, h3 {
margin: 15px;
}
a {
color: white;
}Dla nagłówka piątego stopnia: kolor tła Teal, szerokość 100%, wyrównanie tekstu do środka, marginesy wewnętrzne górny i dolny 10 px, pozostałe 0
padding-block: 10px - margines wewnętrzny górny i dolny, padding-inline: 0 - lewy i prawy. To właściwości logiczne: dokładnie to, co mówi arkusz, bez liczenia, która wartość skrótu padding jest która. Ta reguła domyka kolory tła (R.4.2) i szerokości (R.4.5: banery w kolumnach, karty 30%, h5 i zdjęcia 100%).
styl.css CSS zmienione: 8 linii :root {
--banner-color: DarkCyan;
--card-color: Azure;
--contact-color: Teal;
--contact-hover: LightSeaGreen;
}
* {
font-family: "Bookman Old Style", serif;
}
body {
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas:
"logo title"
"main main"
"quotes quotes"
"footer footer";
}
.logo {
grid-area: logo;
}
.title {
grid-area: title;
}
main {
grid-area: main;
}
.quotes {
grid-area: quotes;
}
footer {
grid-area: footer;
}
.banner {
background-color: var(--banner-color);
color: white;
height: 100px;
letter-spacing: 15px;
}
footer {
background-color: var(--banner-color);
color: white;
}
main {
display: grid;
grid-template-columns: repeat(3, 30%);
column-gap: 2%;
}
.card {
background-color: var(--card-color);
margin: 1%;
box-shadow: 4px 4px 8px DimGray;
}
.card img {
width: 100%;
display: block;
}
p, h2, h3 {
margin: 15px;
}
a {
color: white;
}
h5 {
background-color: var(--contact-color);
width: 100%;
text-align: center;
padding-block: 10px;
padding-inline: 0;
}W momencie gdy kursor myszy znajdzie się na nagłówku piątego stopnia jego kolor tła zmienia się na LightSeaGreen (patrz obraz 2 – środkowa karta)
:hover - kursor nad nagłówkiem (R.4.10). :focus-within - nagłówek, w którym coś ma fokus: przejście klawiszem Tab do odnośnika „Kontakt” podświetla cały pasek tak samo jak kursor.
styl.css CSS zmienione: 5 linii :root {
--banner-color: DarkCyan;
--card-color: Azure;
--contact-color: Teal;
--contact-hover: LightSeaGreen;
}
* {
font-family: "Bookman Old Style", serif;
}
body {
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas:
"logo title"
"main main"
"quotes quotes"
"footer footer";
}
.logo {
grid-area: logo;
}
.title {
grid-area: title;
}
main {
grid-area: main;
}
.quotes {
grid-area: quotes;
}
footer {
grid-area: footer;
}
.banner {
background-color: var(--banner-color);
color: white;
height: 100px;
letter-spacing: 15px;
}
footer {
background-color: var(--banner-color);
color: white;
}
main {
display: grid;
grid-template-columns: repeat(3, 30%);
column-gap: 2%;
}
.card {
background-color: var(--card-color);
margin: 1%;
box-shadow: 4px 4px 8px DimGray;
}
.card img {
width: 100%;
display: block;
}
p, h2, h3 {
margin: 15px;
}
a {
color: white;
}
h5 {
background-color: var(--contact-color);
width: 100%;
text-align: center;
padding-block: 10px;
padding-inline: 0;
}
h5:hover,
h5:focus-within {
background-color: var(--contact-hover);
}Dla bloku cytatów: wyrównanie tekstu do środka, marginesy wewnętrzne górny i dolny 30 px, pozostałe 0, czcionka pochylona
Te same właściwości logiczne co przy h5, font-style: italic dla pochylenia. Domknięte: wyrównanie (h5 i cytaty - R.4.6), marginesy (R.4.7), rozstrzelenie liter banerów i kursywa cytatów (R.4.9).
styl.css CSS zmienione: 7 linii :root {
--banner-color: DarkCyan;
--card-color: Azure;
--contact-color: Teal;
--contact-hover: LightSeaGreen;
}
* {
font-family: "Bookman Old Style", serif;
}
body {
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas:
"logo title"
"main main"
"quotes quotes"
"footer footer";
}
.logo {
grid-area: logo;
}
.title {
grid-area: title;
}
main {
grid-area: main;
}
.quotes {
grid-area: quotes;
}
footer {
grid-area: footer;
}
.banner {
background-color: var(--banner-color);
color: white;
height: 100px;
letter-spacing: 15px;
}
footer {
background-color: var(--banner-color);
color: white;
}
main {
display: grid;
grid-template-columns: repeat(3, 30%);
column-gap: 2%;
}
.card {
background-color: var(--card-color);
margin: 1%;
box-shadow: 4px 4px 8px DimGray;
}
.card img {
width: 100%;
display: block;
}
p, h2, h3 {
margin: 15px;
}
a {
color: white;
}
h5 {
background-color: var(--contact-color);
width: 100%;
text-align: center;
padding-block: 10px;
padding-inline: 0;
}
h5:hover,
h5:focus-within {
background-color: var(--contact-hover);
}
.quotes {
text-align: center;
padding-block: 30px;
padding-inline: 0;
font-style: italic;
}Drugi i trzeci cytat jest usunięty (nie jest wyświetlany)
blockquote + blockquote to selektor sąsiedztwa: cytat, który stoi bezpośrednio po innym cytacie. Pierwszy cytat nie ma poprzednika, więc zostaje; drugi i trzeci znikają (display: none - nie zajmują miejsca). Bez identyfikatorów i bez wyliczania numerów - czwarty cytat w HTML-u też byłby na starcie ukryty (R.5.2).
cursor: pointer pokazuje rączkę nad cytatem - podpowiedź, że da się go kliknąć.
styl.css CSS zmienione: 8 linii :root {
--banner-color: DarkCyan;
--card-color: Azure;
--contact-color: Teal;
--contact-hover: LightSeaGreen;
}
* {
font-family: "Bookman Old Style", serif;
}
body {
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas:
"logo title"
"main main"
"quotes quotes"
"footer footer";
}
.logo {
grid-area: logo;
}
.title {
grid-area: title;
}
main {
grid-area: main;
}
.quotes {
grid-area: quotes;
}
footer {
grid-area: footer;
}
.banner {
background-color: var(--banner-color);
color: white;
height: 100px;
letter-spacing: 15px;
}
footer {
background-color: var(--banner-color);
color: white;
}
main {
display: grid;
grid-template-columns: repeat(3, 30%);
column-gap: 2%;
}
.card {
background-color: var(--card-color);
margin: 1%;
box-shadow: 4px 4px 8px DimGray;
}
.card img {
width: 100%;
display: block;
}
p, h2, h3 {
margin: 15px;
}
a {
color: white;
}
h5 {
background-color: var(--contact-color);
width: 100%;
text-align: center;
padding-block: 10px;
padding-inline: 0;
}
h5:hover,
h5:focus-within {
background-color: var(--contact-hover);
}
.quotes {
text-align: center;
padding-block: 30px;
padding-inline: 0;
font-style: italic;
}
blockquote {
cursor: pointer;
}
blockquote + blockquote {
display: none;
}Kroki 31-34 · po tym etapie masz 37 z 37 kryteriów (pkt)
Działanie funkcji dla kliknięcia w pierwszy cytat: Pierwszy cytat jest usuwany/ukryty. Drugi cytat jest uwidoczniony (blokowo)
Skrypt na końcu <body>, w pliku strony (klucz sprawdza go „w kodzie strony”).
const quotes - lista trzech cytatów, w kolejności z HTML-u,showNextQuote(index) ukrywa cytat o podanej pozycji i pokazuje następny „blokowo”. Klucz R.5.6 wymaga zmiany właściwości display (albo visibility) stylu, dlatego skrypt ustawia style.display, a nie klasę CSS,forEach podpina każdemu cytatowi nasłuchiwacz click; funkcja strzałkowa pamięta pozycję cytatu (index) i przekazuje ją dalej (R.3.4).Arkusz pozwala na „jedną funkcję parametrową”. W podglądzie: kliknięcie cytatu Krzysztofa pokazuje cytat Joanny.
pracownicy.html HTML zmienione: 12 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nasz zespół</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header class="banner logo">
<img src="logo.png" alt="logo firmy">
</header>
<header class="banner title">
<h1>Nasz zespół</h1>
</header>
<main>
<article class="card">
<img src="osoba1.jpg" alt="Dyrektor">
<h2>Krzysztof Dobromilski</h2>
<h3>Dyrektor</h3>
<p>Firma logistyczna była jego marzeniem. Zrealizował je 10 lat temu. Nasza firma prosperuje dzięki Krzysztofowi</p>
<p>telefon: 111222333</p>
<h5><a href="mailto:[email protected]">Kontakt</a></h5>
</article>
<article class="card">
<img src="osoba2.jpg" alt="Kierownik logistyków">
<h2>Joanna Trojanowska</h2>
<h3>Kierownik logistyków</h3>
<p>Od początku firmy z nami. Wie jak zorganizować pracę swoich logistyków aby wszystko było na czas</p>
<p>telefon: 222333444</p>
<h5><a href="mailto:[email protected]">Kontakt</a></h5>
</article>
<article class="card">
<img src="osoba3.jpg" alt="Kadry">
<h2>Ewa Nowak</h2>
<h3>Księgowość i kadry</h3>
<p>Od lat finanse powierzamy niezawodnej Ewie. Twardą ręką trzyma kasę i dba o wszystkich pracowników</p>
<p>telefon: 333444555</p>
<h5><a href="mailto:[email protected]">Kontakt</a></h5>
</article>
</main>
<section class="quotes">
<blockquote tabindex="0" role="button">
"Każdego dnia stawiam sobie nieosiągalne wyzwania i próbuję je wykonać"
<p>- Krzysztof</p>
</blockquote>
<blockquote tabindex="0" role="button">
"Nie bój się porażek, im więcej ich rozwiążesz, tym szybciej osiągniesz cel"
<p>- Joanna</p>
</blockquote>
<blockquote tabindex="0" role="button">
"Niezadowolony pracownik jest dla mnie źródłem nauki"
<p>- Ewa</p>
</blockquote>
</section>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
<script>
const quotes = document.querySelectorAll(".quotes blockquote");
function showNextQuote(index) {
quotes[index].style.display = "none";
quotes[index + 1].style.display = "block";
}
quotes.forEach((quote, index) => {
quote.addEventListener("click", () => showNextQuote(index));
});
</script>
</body>
</html>Działanie funkcji dla kliknięcia w drugi cytat: Drugi cytat jest usuwany/ukryty. Trzeci cytat jest uwidoczniony (blokowo)
Ten przypadek działa bez nowej linii kodu: drugi cytat ma pozycję 1, więc funkcja ukrywa quotes[1] i pokazuje quotes[2] - trzeci. Jedna reguła („ukryj ten, pokaż następny”) obsługuje każdy cytat, który ma następcę. Sprawdzone w Chrome: po dwóch kliknięciach widać tylko cytat Ewy (R.5.4).
Podgląd strony bez zmian - taki jak po kroku 31.
Działanie funkcji dla kliknięcia w trzeci cytat: Trzeci cytat jest usuwany/ukryty. Pierwszy cytat jest uwidoczniony (blokowo)
Trzeci cytat ma pozycję 2, a quotes[3] nie istnieje. Reszta z dzielenia przez liczbę cytatów zawija numerację: (2 + 1) % 3 daje 0 - pierwszy cytat. Dla pozostałych nic się nie zmienia (1 % 3 = 1, 2 % 3 = 2). Bez trzeciej gałęzi if i bez liczby 3 w kodzie (R.5.5).
Bez reszty z dzielenia kliknięcie trzeciego cytatu kończy się błędem quotes[3] is undefined - trzeci znika, a pierwszy się nie pojawia.
pracownicy.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nasz zespół</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header class="banner logo">
<img src="logo.png" alt="logo firmy">
</header>
<header class="banner title">
<h1>Nasz zespół</h1>
</header>
<main>
<article class="card">
<img src="osoba1.jpg" alt="Dyrektor">
<h2>Krzysztof Dobromilski</h2>
<h3>Dyrektor</h3>
<p>Firma logistyczna była jego marzeniem. Zrealizował je 10 lat temu. Nasza firma prosperuje dzięki Krzysztofowi</p>
<p>telefon: 111222333</p>
<h5><a href="mailto:[email protected]">Kontakt</a></h5>
</article>
<article class="card">
<img src="osoba2.jpg" alt="Kierownik logistyków">
<h2>Joanna Trojanowska</h2>
<h3>Kierownik logistyków</h3>
<p>Od początku firmy z nami. Wie jak zorganizować pracę swoich logistyków aby wszystko było na czas</p>
<p>telefon: 222333444</p>
<h5><a href="mailto:[email protected]">Kontakt</a></h5>
</article>
<article class="card">
<img src="osoba3.jpg" alt="Kadry">
<h2>Ewa Nowak</h2>
<h3>Księgowość i kadry</h3>
<p>Od lat finanse powierzamy niezawodnej Ewie. Twardą ręką trzyma kasę i dba o wszystkich pracowników</p>
<p>telefon: 333444555</p>
<h5><a href="mailto:[email protected]">Kontakt</a></h5>
</article>
</main>
<section class="quotes">
<blockquote tabindex="0" role="button">
"Każdego dnia stawiam sobie nieosiągalne wyzwania i próbuję je wykonać"
<p>- Krzysztof</p>
</blockquote>
<blockquote tabindex="0" role="button">
"Nie bój się porażek, im więcej ich rozwiążesz, tym szybciej osiągniesz cel"
<p>- Joanna</p>
</blockquote>
<blockquote tabindex="0" role="button">
"Niezadowolony pracownik jest dla mnie źródłem nauki"
<p>- Ewa</p>
</blockquote>
</section>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
<script>
const quotes = document.querySelectorAll(".quotes blockquote");
function showNextQuote(index) {
quotes[index].style.display = "none";
quotes[(index + 1) % quotes.length].style.display = "block";
}
quotes.forEach((quote, index) => {
quote.addEventListener("click", () => showNextQuote(index));
});
</script>
</body>
</html>Dodatek spoza arkusza - klucz go nie ocenia. Element z role="button" obiecuje zachowanie przycisku, a prawdziwy przycisk działa Enterem i spacją. Nasłuchiwacz keydown:
Enter i spację (" "), === porównuje bez zamiany typów,preventDefault() - spacja nie przewija przy okazji strony,Nazwy mówią, do czego służą: quotes, showNextQuote, index (R.5.7).
pracownicy.html HTML zmienione: 7 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nasz zespół</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header class="banner logo">
<img src="logo.png" alt="logo firmy">
</header>
<header class="banner title">
<h1>Nasz zespół</h1>
</header>
<main>
<article class="card">
<img src="osoba1.jpg" alt="Dyrektor">
<h2>Krzysztof Dobromilski</h2>
<h3>Dyrektor</h3>
<p>Firma logistyczna była jego marzeniem. Zrealizował je 10 lat temu. Nasza firma prosperuje dzięki Krzysztofowi</p>
<p>telefon: 111222333</p>
<h5><a href="mailto:[email protected]">Kontakt</a></h5>
</article>
<article class="card">
<img src="osoba2.jpg" alt="Kierownik logistyków">
<h2>Joanna Trojanowska</h2>
<h3>Kierownik logistyków</h3>
<p>Od początku firmy z nami. Wie jak zorganizować pracę swoich logistyków aby wszystko było na czas</p>
<p>telefon: 222333444</p>
<h5><a href="mailto:[email protected]">Kontakt</a></h5>
</article>
<article class="card">
<img src="osoba3.jpg" alt="Kadry">
<h2>Ewa Nowak</h2>
<h3>Księgowość i kadry</h3>
<p>Od lat finanse powierzamy niezawodnej Ewie. Twardą ręką trzyma kasę i dba o wszystkich pracowników</p>
<p>telefon: 333444555</p>
<h5><a href="mailto:[email protected]">Kontakt</a></h5>
</article>
</main>
<section class="quotes">
<blockquote tabindex="0" role="button">
"Każdego dnia stawiam sobie nieosiągalne wyzwania i próbuję je wykonać"
<p>- Krzysztof</p>
</blockquote>
<blockquote tabindex="0" role="button">
"Nie bój się porażek, im więcej ich rozwiążesz, tym szybciej osiągniesz cel"
<p>- Joanna</p>
</blockquote>
<blockquote tabindex="0" role="button">
"Niezadowolony pracownik jest dla mnie źródłem nauki"
<p>- Ewa</p>
</blockquote>
</section>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
<script>
const quotes = document.querySelectorAll(".quotes blockquote");
function showNextQuote(index) {
quotes[index].style.display = "none";
quotes[(index + 1) % quotes.length].style.display = "block";
}
quotes.forEach((quote, index) => {
quote.addEventListener("click", () => showNextQuote(index));
quote.addEventListener("keydown", (event) => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
showNextQuote(index);
quotes[(index + 1) % quotes.length].focus();
}
});
});
</script>
</body>
</html>Krok 35 · po tym etapie masz 37 z 37 kryteriów (pkt)
Obie wersje dają komplet 37 punktów. Różnice:
| wersja podstawowa | wersja nowoczesna | |
|---|---|---|
| banery | float: left, width: 50%, clear bloku głównego | kolumny siatki 50% 50% na <body> |
| karty | display: flex w <main>, width: 30% | siatka repeat(3, 30%) w <main> |
| ukrycie cytatów | identyfikatory #quote2, #quote3 | selektor sąsiedztwa blockquote + blockquote |
| odstępy | skrót padding: 10px 0 | padding-block i padding-inline |
| zdarzenie | atrybut onclick="changeQuote(N)" | addEventListener w pętli forEach |
| zmiana cytatu | trzy gałęzie if / else if / else | jedna linia z resztą z dzielenia |
| klawiatura | dopiero w dobrych praktykach | od początku: tabindex, role="button", Enter i spacja |
W obu wersjach zostały dwie rzeczy wymuszone przez klucz: selektor a dla odnośników (R.4.3) i zmiana style.display w skrypcie (R.5.6) - zamiast przestawiania klasy CSS, które w innych arkuszach jest wygodniejsze.
Na egzaminie trzy gałęzie if z wersji podstawowej trudno pomylić i łatwo sprawdzić kliknięciem. Wersja nowoczesna jest krótsza i działa dla dowolnej liczby cytatów. Przy siatce pilnuj, żeby szerokości bloków stały w grid-template-columns, a nie w width.
Podgląd strony bez zmian - taki jak po kroku 34.
Krok 36 · po tym etapie masz 37 z 37 kryteriów (pkt)
UWAGA: 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 nazwa przeglądarki, w której sprawdzana była strona. W folderze z numerem zdającego: import.png, kw1.jpg - kw4.jpg, kwerendy.txt, logo.png, osoba1.jpg - osoba3.jpg, pracownicy.html, przeglądarka.txt, 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 34.
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.