Rozwiązanie buduje stronę rezerwacji biura podróży: baza wyprawy (wycieczki i rezerwacje) i cztery zapytania - SELECT z warunkiem, COUNT z dwoma warunkami, złączenie tabel JOIN i suma z grupowaniem GROUP BY - potem grafika z przezroczystym tłem, strony rezerwacja.html i wycieczki.html z formularzem w dwóch sekcjach i dziewięcioma zdjęciami w bloku bocznym, style w styl.css (układ na pływających blokach, przyciski z różnymi marginesami w pionie i poziomie) oraz skrypt JavaScript: przyciski „Uczestnik” i „Rezerwacja” włączają kontrolki jednej sekcji i wyłączają drugiej, a znaki « i » przewijają zdjęcia wycieczek z zawinięciem.
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: funkcje wywoływane atrybutem onclick, każda kontrolka osobno przez document.getElementById, przewijanie z instrukcją if. Na końcu skrypt zostaje przerobiony na wersję z prawdziwych projektów: <fieldset disabled> zamiast wyłączania pól po kolei, reszta z dzielenia przy przewijaniu, zdjęcia bloku bocznego z pętli i nasłuchiwacze zdarzeń. W tym arkuszu nie ma PHP - strona rezerwacja jest zapisana jako HTML, co arkusz dopuszcza.
Obok jest druga wersja tego rozwiązania - zakładka Nowoczesny kod (grid, fieldset): te same punkty, ale układ na siatce CSS, grupy pól <fieldset>, stan przycisków w atrybucie aria-pressed i skrypt w osobnym pliku z nasłuchiwaczami zdarzeń od pierwszej linijki.
Baza i grafiki pochodzą z prawdziwego archiwum pliki4 (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: kolory przycisków, aktywność kontrolek i kolejność zdjęć zgadzają się z ilustracjami 4 i 5 oraz z kolejnością podaną w arkuszu.
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 6 z 39 kryteriów (pkt)
Utwórz bazę danych o nazwie wyprawy, z zestawem polskich znaków (np. utf8_polish_ci)
Rozpakuj pliki4.7z z pulpitu (hasło RezErw@cjE - wielkie R, E i E, małpa zamiast „a”) i załóż folder z numerem zdającego. W phpMyAdmin: Nowa, nazwa wyprawy, porównywanie utf8_polish_ci.
Do utworzonej bazy zaimportuj tabele z pliku wyprawy.sql
Zaznacz bazę wyprawy, potem Import → wyprawy.sql → Wykonaj. Dwie tabele z ilustracji 1: wycieczki (Barcelona, Rzym, Londyn) i rezerwacje (10 rezerwacji). Klucz obcy Wycieczki_id wskazuje wycieczkę, osob mówi, dla ilu osób jest rezerwacja, a wyzywienie to 1 - śniadania, 2 - śniadania i obiadokolacje, 3 - all inclusive.
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.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie imiona i nazwiska osób rezerwujących wycieczki z wyżywieniem typu 3 (all inclusive)
Dwie kolumny i warunek wyzywienie = 3. Wynik: Anna, Jan, Judyta i Jolanta - jak w kluczu. Zapytanie zapisujesz w kwerendy.txt, zrzut jako kw1.png.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT imie, nazwisko FROM rezerwacje WHERE wyzywienie = 3;
Zapytanie 2: zliczające rezerwacje na wycieczkę o id równym 2 i wylocie z Warszawy
COUNT(*) - liczy wiersze spełniające warunek, zamiast je wypisywać,WHERE Wycieczki_id = 2 AND wylot = 'Warszawa' - oba warunki naraz.Wynik: 2. Sam warunek na wycieczkę dałby 5 - tyle jest wszystkich rezerwacji do Rzymu. Zrzut: kw2.png.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT imie, nazwisko FROM rezerwacje WHERE wyzywienie = 3;
-- Zapytanie 2
SELECT COUNT(*) FROM rezerwacje WHERE Wycieczki_id = 2 AND wylot = 'Warszawa';
Zapytanie 3: wybierające jedynie miejsca wycieczek i odpowiadające im imiona i nazwiska rezerwujących. Należy posłużyć się relacją
SELECT miejsce, imie, nazwisko - miejsce z wycieczki, osoba z rezerwacje,FROM wycieczki JOIN rezerwacje - złączenie tabel,ON wycieczki.id = rezerwacje.Wycieczki_id - klucz główny wycieczki równa się kluczowi obcemu rezerwacji.Wynik: 10 wierszy, po jednym dla każdej rezerwacji. Zrzut: kw3.png.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT imie, nazwisko FROM rezerwacje WHERE wyzywienie = 3;
-- Zapytanie 2
SELECT COUNT(*) FROM rezerwacje WHERE Wycieczki_id = 2 AND wylot = 'Warszawa';
-- Zapytanie 3
SELECT miejsce, imie, nazwisko FROM wycieczki JOIN rezerwacje ON wycieczki.id = rezerwacje.Wycieczki_id;
Zapytanie 4: wybierające jedynie miejsca wycieczek i sumujące liczbę osób, dla których została zarezerwowana wycieczka. Jedna osoba (jeden rekord) może rezerwować wycieczkę dla kilku osób. Należy posłużyć się relacją i grupowaniem
To samo złączenie, a do tego GROUP BY miejsce - wiersze z tym samym miejscem zlewają się w jeden, a SUM(osob) dodaje liczby osób z wszystkich rezerwacji grupy. Wynik: Barcelona 5, Londyn 4, Rzym 10. Zrzut: kw4.png.
COUNT(*) zamiast SUM(osob) liczy rezerwacje, nie osoby: Barcelona 3, Londyn 2, Rzym 5 - arkusz uprzedza, że jedna rezerwacja może być dla kilku osób.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT imie, nazwisko FROM rezerwacje WHERE wyzywienie = 3;
-- Zapytanie 2
SELECT COUNT(*) FROM rezerwacje WHERE Wycieczki_id = 2 AND wylot = 'Warszawa';
-- Zapytanie 3
SELECT miejsce, imie, nazwisko FROM wycieczki JOIN rezerwacje ON wycieczki.id = rezerwacje.Wycieczki_id;
-- Zapytanie 4
SELECT miejsce, SUM(osob) FROM wycieczki JOIN rezerwacje ON wycieczki.id = rezerwacje.Wycieczki_id GROUP BY miejsce;
Kroki 8-35 · po tym etapie masz 20 z 39 kryteriów (pkt)
Tło przezroczyste
osoba.png ma 640 × 640 px i jasnoszare tło. W GIMP-ie najpierw Warstwa → Przezroczystość → Dodaj kanał alfa (bez niego usunięte tło zamieni się w kolor), potem Zaznaczenie rozmyte z progiem ok. 15 i klik w tło, Edycja → Wyczyść. Sylwetka jest ciemniejsza od tła, więc różdżka jej nie zaznaczy. Usuń tło na pełnej rozdzielczości, dopiero potem przeskaluj - na dużym obrazie granica jest dokładniejsza.
Cechy grafiki osoba.png: Przeskalowana z zachowaniem proporcji do szerokości 100 px
Obraz → Skaluj obraz, szerokość 100 px przy zamkniętym łańcuchu - obraz jest kwadratowy, więc wysokość też wychodzi 100 px (klucz: 100 × 100 z przezroczystym tłem). Eksport do PNG, żeby zachować kanał alfa.
Cechy strony rezerwacja: Zapisana w języku HTML5
Arkusz pozwala zapisać stronę rezerwacja jako PHP albo HTML. Nie ma tu żadnego skryptu po stronie serwera, więc wybierasz rezerwacja.html - otworzy się nawet bez XAMPP-a. Deklaracja <!DOCTYPE html> i szkielet strony.
rezerwacja.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>.
rezerwacja.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>.
rezerwacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony widoczny na karcie przeglądarki: „Biuro turystyczne”
<title> w <head>.
rezerwacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
Nazwa: styl.css.
rezerwacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>Witryna składa się z podstron o nazwach rezerwacja (format PHP lub HTML), wycieczki.html. W pliku wycieczki.html należy zapisać „Strona w trakcie budowy”
Druga strona to sam napis w szkielecie HTML5. Zapisz ją teraz, żeby odnośnik „Do strony głównej” miał dokąd prowadzić.
wycieczki.html HTML nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Wycieczki</title>
</head>
<body>
<p>Strona w trakcie budowy</p>
</body>
</html>Podział strony na bloki: nagłówkowy, główny i stopki. Blok główny zawiera bloki: nawigacyjny, dwa bloki sekcji i blok boczny. 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ą 3
Klucz wymaga header, w main znaczników nav, dwóch section i aside, potem footer (R.2.4). Blok boczny piszesz w <main> jako pierwszy: na ilustracji 3 sięga od góry bloku nawigacyjnego do dołu sekcji, a element pływający w prawo (float: right) zaczyna się najwyżej tam, gdzie stoi w kodzie. Postawiony za sekcjami zacząłby się dopiero na ich wysokości.
rezerwacja.html HTML zmienione: 14 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
</header>
<main>
<aside>
</aside>
<nav>
</nav>
<section>
</section>
<section>
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku nagłówkowego: nagłówek pierwszego stopnia o treści „Rezerwacja wycieczek”
<h1> w <header>.
rezerwacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
</aside>
<nav>
</nav>
<section>
</section>
<section>
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku bocznego: 9 obrazów z tekstem alternatywnym „wycieczki”. Obrazy są zapętlone: 1.jpg, 2.jpg, 3.jpg, 1.jpg itd. Sposób realizacji dowolny
Dziewięć <img> w kolejności 1, 2, 3, 1, 2, 3, 1, 2, 3 - „sposób dowolny”, więc najprościej wpisać je w HTML-u. Wersję z pętlą pokażesz w dobrych praktykach. Na razie zdjęcia są w pełnym rozmiarze; zmniejszy je styl bloku bocznego.
rezerwacja.html HTML zmienione: 9 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
</nav>
<section>
</section>
<section>
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku nawigacyjnego: Przycisk o treści „Uczestnik”, którego kliknięcie powoduje wywołanie funkcji uczestnika
<button> z identyfikatorem participant - po nim skrypt zmieni kolor przycisku. Wywołanie funkcji dopiszesz, gdy funkcja będzie gotowa.
rezerwacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
</nav>
<section>
</section>
<section>
</section>
</main>
<footer>
</footer>
</body>
</html>Przycisk o treści „Rezerwacja”, którego kliknięcie powoduje wywołanie funkcji rezerwacji
Drugi przycisk z identyfikatorem booking.
rezerwacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
</section>
<section>
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość pierwszego bloku sekcji: Nagłówek drugiego stopnia o treści „Dane Klienta”
<h2> w pierwszej <section>.
rezerwacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
</section>
<section>
</section>
</main>
<footer>
</footer>
</body>
</html>Obraz osoba.png z tekstem alternatywnym „Klient”
Grafika przygotowana wcześniej, 100 × 100 px z przezroczystym tłem.
rezerwacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
</section>
<section>
</section>
</main>
<footer>
</footer>
</body>
</html>Poniżej etykieta „Imię” oraz pole edycyjne z nią powiązane
<br> przenosi etykietę pod obraz. <label for="firstName"> łączy się z polem po id - tego samego identyfikatora użyje skrypt, żeby pole włączać i wyłączać.
rezerwacja.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
</section>
<section>
</section>
</main>
<footer>
</footer>
</body>
</html>Poniżej etykieta „Nazwisko” oraz pole edycyjne z nią powiązane
Tak samo, z identyfikatorem lastName.
rezerwacja.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
</section>
<section>
</section>
</main>
<footer>
</footer>
</body>
</html>Paragraf z odnośnikiem o treści „Do strony głównej”, który prowadzi do strony wycieczki.html
Ścieżka względna - obie strony leżą w tym samym folderze.
rezerwacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość drugiego bloku sekcji: Nagłówek drugiego stopnia o treści „Dane rezerwacji”
<h2> w drugiej <section>.
rezerwacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
</section>
</main>
<footer>
</footer>
</body>
</html>Ogólny znacznik liniowy <span> ze znakiem «, jego kliknięcie powoduje zmianę zdjęcia w bloku sekcji drugiej
Znak « zapisujesz encją « (left angle quotation mark - lewy cudzysłów francuski). Obsługę kliknięcia dopiszesz razem z funkcją przewijania.
rezerwacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span>«</span>
</section>
</main>
<footer>
</footer>
</body>
</html>Obraz 1.jpg z tekstem alternatywnym „wycieczka”
Identyfikator tripImage - skrypt będzie podmieniał src tego obrazu. Z tym krokiem są wszystkie obrazy z klucza: osoba.png, 1.jpg i dziewięć zdjęć w bloku bocznym.
rezerwacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span>«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
</section>
</main>
<footer>
</footer>
</body>
</html>Ogólny znacznik liniowy <span> ze znakiem », jego kliknięcie powoduje zmianę zdjęcia w bloku sekcji drugiej
Encja ». Oba znaki i obraz to elementy liniowe, więc stoją w jednym wierszu, a znaki wyrównują się do dolnej krawędzi zdjęcia - jak na ilustracji 2.
rezerwacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span>«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span>»</span>
</section>
</main>
<footer>
</footer>
</body>
</html>Nagłówek czwartego stopnia o treści „Barcelona”
<h4> z identyfikatorem tripName - skrypt zmieni jego treść razem ze zdjęciem.
rezerwacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span>«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span>»</span>
<h4 id="tripName">Barcelona</h4>
</section>
</main>
<footer>
</footer>
</body>
</html>Etykieta „Liczba osób:” oraz pole edycyjne z nią powiązane. Pole jest typu numerycznego, przyjmuje wartości od 1 do 4, wyświetla wartość 2. Pole jest nieaktywne
type="number" z min="1" i max="4" - strzałki pola nie wyjdą poza ten zakres. value="2" to wartość na starcie, a atrybut disabled wyłącza pole: jest wyszarzone i nie da się w nim pisać.
rezerwacja.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span>«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span>»</span>
<h4 id="tripName">Barcelona</h4>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2" disabled>
</section>
</main>
<footer>
</footer>
</body>
</html>Poniżej etykieta „Miejsce wylotu:” oraz pole listy rozwijanej z nią powiązane. Opcje listy: „Warszawa”, „Kraków”, „Wrocław”. Pole listy jest nieaktywne
<select> z trzema opcjami i atrybutem disabled.
rezerwacja.html HTML zmienione: 7 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span>«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span>»</span>
<h4 id="tripName">Barcelona</h4>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2" disabled>
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure" disabled>
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
</section>
</main>
<footer>
</footer>
</body>
</html>Poniżej zgrupowane trzy pola opcji (w jednym momencie możliwe jest wybranie tylko jednego pola), powiązane z etykietami „Śniadania”, „Śniadania i obiadokolacje”, „All inclusive”. Wszystkie pola są nieaktywne, pierwsze jest zaznaczone
Pola type="radio" z tym samym name="food" tworzą grupę - zaznaczenie jednego odznacza pozostałe. Pierwsze dostaje checked, wszystkie disabled. Teraz wszystkie pola drugiej sekcji są nieaktywne, jak w stanie początkowym na ilustracji 2.
Różne wartości name przy polach opcji pozwalają zaznaczyć wszystkie trzy naraz - klucz wymaga, by można było wybrać tylko jedno (R.3.6).
rezerwacja.html HTML zmienione: 7 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span>«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span>»</span>
<h4 id="tripName">Barcelona</h4>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2" disabled>
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure" disabled>
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked disabled>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2" disabled>
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3" disabled>
<label for="food3">All inclusive</label>
</section>
</main>
<footer>
</footer>
</body>
</html>Poniżej przycisk „Sprawdź cenę”. Przycisk nie ma funkcjonalności
Zwykły <button> bez obsługi kliknięcia. Arkusz nie każe go wyłączać, więc zostaje aktywny i skrypt go nie przełącza.
rezerwacja.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span>«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span>»</span>
<h4 id="tripName">Barcelona</h4>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2" disabled>
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure" disabled>
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked disabled>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2" disabled>
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3" disabled>
<label for="food3">All inclusive</label>
<br>
<button>Sprawdź cenę</button>
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku stopki: paragraf o treści „Autor strony: ”, dalej wstawiony numer zdającego. Numer zdającego jest zapisany w semantycznym znaczniku oznaczającym tekst uwypuklony, formatowany domyślnie jako pochylony
Tekst uwypuklony to <em> (kursywa). Na egzaminie w <em> wpisujesz swój numer zdającego (PESEL); tutaj stoi imię i nazwisko autora rozwiązania. Z tym krokiem są wszystkie nagłówki z klucza.
rezerwacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span>«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span>»</span>
<h4 id="tripName">Barcelona</h4>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2" disabled>
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure" disabled>
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked disabled>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2" disabled>
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3" disabled>
<label for="food3">All inclusive</label>
<br>
<button>Sprawdź cenę</button>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
</body>
</html>Kroki 36-46 · po tym etapie masz 31 z 39 kryteriów (pkt)
Domyślnie, dla wszystkich selektorów: krój czcionki „Bookman Old Style”
Nazwa ze spacjami w cudzysłowie.
styl.css CSS nowy plik * {
font-family: "Bookman Old Style";
}Dla ciała strony: kolor tła AliceBlue
Selektor body.
styl.css CSS zmienione: 3 linie * {
font-family: "Bookman Old Style";
}
body {
background-color: AliceBlue;
}Dla bloku nagłówkowego i stopki: kolor tła SkyBlue, wyrównanie tekstu do środka, marginesy wewnętrzne 1 px, zaokrąglenie rogów 15 px
Jedna reguła dla dwóch selektorów.
styl.css CSS zmienione: 6 linii * {
font-family: "Bookman Old Style";
}
body {
background-color: AliceBlue;
}
header, footer {
background-color: SkyBlue;
text-align: center;
padding: 1px;
border-radius: 15px;
}Dla bloku nawigacyjnego: szerokość 90%, wyrównanie tekstu do środka
text-align: center wyśrodkowuje przyciski, bo to elementy liniowe.
styl.css CSS zmienione: 4 linie * {
font-family: "Bookman Old Style";
}
body {
background-color: AliceBlue;
}
header, footer {
background-color: SkyBlue;
text-align: center;
padding: 1px;
border-radius: 15px;
}
nav {
width: 90%;
text-align: center;
}Dla obu bloków sekcji: szerokość 45%, wysokość 640 px
Selektor section działa na obie sekcje.
styl.css CSS zmienione: 4 linie * {
font-family: "Bookman Old Style";
}
body {
background-color: AliceBlue;
}
header, footer {
background-color: SkyBlue;
text-align: center;
padding: 1px;
border-radius: 15px;
}
nav {
width: 90%;
text-align: center;
}
section {
width: 45%;
height: 640px;
}Dla bloku bocznego: szerokość 10%, wysokość 700 px, w przypadku przepełnienia bloku zawartość wystająca poza blok jest ukryta
overflow: hidden - to, co nie mieści się w 700 px, zostaje obcięte bez paska przewijania. Teraz zdjęcia mają jeszcze pełny rozmiar, więc widać fragment pierwszego; po zmniejszeniu do szerokości bloku ich wysokość zależy od szerokości okna, a na szerokim ekranie dziewięć zdjęć przekracza 700 px - na ilustracji 2 ostatnie jest ucięte w połowie.
styl.css CSS zmienione: 5 linii * {
font-family: "Bookman Old Style";
}
body {
background-color: AliceBlue;
}
header, footer {
background-color: SkyBlue;
text-align: center;
padding: 1px;
border-radius: 15px;
}
nav {
width: 90%;
text-align: center;
}
section {
width: 45%;
height: 640px;
}
aside {
width: 10%;
height: 700px;
overflow: hidden;
}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ą 3
Arkusz nie mówi, jak ustawić bloki - wybierasz float, bo szerokości z arkusza składają się dokładnie na 100%: blok boczny (pierwszy w kodzie) pływa w prawo od samej góry, blok nawigacyjny (90%) staje obok niego, a dwie sekcje po 45% mieszczą się w kolejnym rzędzie, nadal po lewej stronie bloku bocznego (700 px wysokości). Stopka dostaje clear: both, żeby zaczęła się pod wszystkimi pływającymi blokami. Równie dobra jest siatka grid z szerokościami w grid-template-columns - klucz przyjmuje oba sposoby (R.3.1, R.4.3), a siatkę pokazuje wersja nowoczesna (zakładka obok).
Blok boczny postawiony w kodzie za sekcjami z float: right zaczyna się na wysokości sekcji, a nie bloku nawigacyjnego - układ różni się od ilustracji 3.
styl.css CSS zmienione: 9 linii * {
font-family: "Bookman Old Style";
}
body {
background-color: AliceBlue;
}
header, footer {
background-color: SkyBlue;
text-align: center;
padding: 1px;
border-radius: 15px;
}
nav {
width: 90%;
text-align: center;
}
section {
width: 45%;
height: 640px;
}
aside {
width: 10%;
height: 700px;
overflow: hidden;
}
aside {
float: right;
}
nav, section {
float: left;
}
footer {
clear: both;
}Jedynie dla obrazów w bloku bocznym: szerokość 100%
Selektor potomka aside img - „jedynie” znaczy, że osoba.png i zdjęcie wycieczki zostają w swoim rozmiarze. Sam selektor img rozciągnąłby wszystkie obrazy.
styl.css CSS zmienione: 3 linie * {
font-family: "Bookman Old Style";
}
body {
background-color: AliceBlue;
}
header, footer {
background-color: SkyBlue;
text-align: center;
padding: 1px;
border-radius: 15px;
}
nav {
width: 90%;
text-align: center;
}
section {
width: 45%;
height: 640px;
}
aside {
width: 10%;
height: 700px;
overflow: hidden;
}
aside {
float: right;
}
nav, section {
float: left;
}
footer {
clear: both;
}
aside img {
width: 100%;
}Dla znacznika span: rozmiar czcionki 200%, kursor pointer
cursor: pointer pokazuje rączkę nad znakami - podpowiedź, że da się je kliknąć.
styl.css CSS zmienione: 4 linie * {
font-family: "Bookman Old Style";
}
body {
background-color: AliceBlue;
}
header, footer {
background-color: SkyBlue;
text-align: center;
padding: 1px;
border-radius: 15px;
}
nav {
width: 90%;
text-align: center;
}
section {
width: 45%;
height: 640px;
}
aside {
width: 10%;
height: 700px;
overflow: hidden;
}
aside {
float: right;
}
nav, section {
float: left;
}
footer {
clear: both;
}
aside img {
width: 100%;
}
span {
font-size: 200%;
cursor: pointer;
}Dla przycisku: kolor tła SkyBlue, szerokość 45%, zaokrąglenie rogów 15 px, marginesy wewnętrzne górny i dolny 15 px, pozostałe 40 px, marginesy zewnętrzne górny i dolny 3 px, pozostałe 2%
Skrót z dwiema wartościami: pierwsza to góra i dół, druga lewa i prawa - padding: 15px 40px i margin: 3px 2%. Dwa przyciski po 45% plus marginesy po 2% z każdej strony mieszczą się w jednym wierszu bloku nawigacyjnego.
styl.css CSS zmienione: 7 linii * {
font-family: "Bookman Old Style";
}
body {
background-color: AliceBlue;
}
header, footer {
background-color: SkyBlue;
text-align: center;
padding: 1px;
border-radius: 15px;
}
nav {
width: 90%;
text-align: center;
}
section {
width: 45%;
height: 640px;
}
aside {
width: 10%;
height: 700px;
overflow: hidden;
}
aside {
float: right;
}
nav, section {
float: left;
}
footer {
clear: both;
}
aside img {
width: 100%;
}
span {
font-size: 200%;
cursor: pointer;
}
button {
background-color: SkyBlue;
width: 45%;
border-radius: 15px;
padding: 15px 40px;
margin: 3px 2%;
}Dla kontrolek (pola edycyjne, lista rozwijana, pola opcji): marginesy zewnętrzne 3 px
Pola edycyjne i pola opcji to <input>, lista to <select> - dwa selektory po przecinku obejmują wszystkie kontrolki.
styl.css CSS zmienione: 3 linie * {
font-family: "Bookman Old Style";
}
body {
background-color: AliceBlue;
}
header, footer {
background-color: SkyBlue;
text-align: center;
padding: 1px;
border-radius: 15px;
}
nav {
width: 90%;
text-align: center;
}
section {
width: 45%;
height: 640px;
}
aside {
width: 10%;
height: 700px;
overflow: hidden;
}
aside {
float: right;
}
nav, section {
float: left;
}
footer {
clear: both;
}
aside img {
width: 100%;
}
span {
font-size: 200%;
cursor: pointer;
}
button {
background-color: SkyBlue;
width: 45%;
border-radius: 15px;
padding: 15px 40px;
margin: 3px 2%;
}
input, select {
margin: 3px;
}Kroki 47-59 · po tym etapie masz 39 z 39 kryteriów (pkt)
Stan początkowy: Kolor tła przycisku „Uczestnik” jest ustawiony na DodgerBlue
Skrypt w <script> na końcu <body> - przyciski już istnieją, gdy się wykonuje. Instrukcja poza funkcją działa raz, przy wczytaniu strony. Nazwy właściwości CSS z myślnikiem w JavaScripcie piszesz łącznie, z wielką literą: background-color → backgroundColor.
rezerwacja.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span>«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span>»</span>
<h4 id="tripName">Barcelona</h4>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2" disabled>
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure" disabled>
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked disabled>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2" disabled>
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3" disabled>
<label for="food3">All inclusive</label>
<br>
<button>Sprawdź cenę</button>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
</script>
</body>
</html>Funkcja uczestnika wywoływana po wciśnięciu przycisku „Uczestnik”: Zmieniane są kolory tła przycisków: „Uczestnik” na DodgerBlue, „Rezerwacja” na SkyBlue
Funkcja participant (uczestnik) ustawia kolor obu przycisków - zawsze obu, bo przed kliknięciem nie wiadomo, który był wyróżniony.
rezerwacja.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span>«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span>»</span>
<h4 id="tripName">Barcelona</h4>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2" disabled>
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure" disabled>
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked disabled>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2" disabled>
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3" disabled>
<label for="food3">All inclusive</label>
<br>
<button>Sprawdź cenę</button>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
function participant() {
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
document.getElementById("booking").style.backgroundColor = "SkyBlue";
}
</script>
</body>
</html>Kontrolki pierwszego bloku sekcji są aktywowane
Atrybut disabled z HTML-a w JavaScripcie to właściwość logiczna: disabled = false włącza pole, true je wyłącza.
rezerwacja.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span>«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span>»</span>
<h4 id="tripName">Barcelona</h4>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2" disabled>
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure" disabled>
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked disabled>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2" disabled>
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3" disabled>
<label for="food3">All inclusive</label>
<br>
<button>Sprawdź cenę</button>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
function participant() {
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
document.getElementById("booking").style.backgroundColor = "SkyBlue";
document.getElementById("firstName").disabled = false;
document.getElementById("lastName").disabled = false;
}
</script>
</body>
</html>Kontrolki drugiego bloku sekcji są nieaktywne
Pięć kontrolek drugiej sekcji - liczba osób, lista wylotów i trzy pola opcji - dostaje disabled = true. Każdą trzeba wyłączyć osobno; w dobrych praktykach zrobisz to jedną linią.
rezerwacja.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span>«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span>»</span>
<h4 id="tripName">Barcelona</h4>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2" disabled>
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure" disabled>
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked disabled>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2" disabled>
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3" disabled>
<label for="food3">All inclusive</label>
<br>
<button>Sprawdź cenę</button>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
function participant() {
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
document.getElementById("booking").style.backgroundColor = "SkyBlue";
document.getElementById("firstName").disabled = false;
document.getElementById("lastName").disabled = false;
document.getElementById("people").disabled = true;
document.getElementById("departure").disabled = true;
document.getElementById("food1").disabled = true;
document.getElementById("food2").disabled = true;
document.getElementById("food3").disabled = true;
}
</script>
</body>
</html>Przycisk o treści „Uczestnik”, którego kliknięcie powoduje wywołanie funkcji uczestnika
onclick="participant()" przy przycisku. Wpisz coś w pole imienia - działa, bo pierwsza sekcja jest aktywna od początku.
rezerwacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant" onclick="participant()">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span>«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span>»</span>
<h4 id="tripName">Barcelona</h4>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2" disabled>
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure" disabled>
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked disabled>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2" disabled>
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3" disabled>
<label for="food3">All inclusive</label>
<br>
<button>Sprawdź cenę</button>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
function participant() {
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
document.getElementById("booking").style.backgroundColor = "SkyBlue";
document.getElementById("firstName").disabled = false;
document.getElementById("lastName").disabled = false;
document.getElementById("people").disabled = true;
document.getElementById("departure").disabled = true;
document.getElementById("food1").disabled = true;
document.getElementById("food2").disabled = true;
document.getElementById("food3").disabled = true;
}
</script>
</body>
</html>Funkcja rezerwacji wywoływana po wciśnięciu przycisku „Rezerwacja”: Zmieniane są kolory tła przycisków: „Uczestnik” na SkyBlue na, „Rezerwacja” na DodgerBlue
Funkcja booking (rezerwacja) to lustrzane odbicie: kolory zamienione miejscami. Drugie „na” w poleceniu to literówka arkusza.
rezerwacja.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant" onclick="participant()">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span>«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span>»</span>
<h4 id="tripName">Barcelona</h4>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2" disabled>
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure" disabled>
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked disabled>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2" disabled>
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3" disabled>
<label for="food3">All inclusive</label>
<br>
<button>Sprawdź cenę</button>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
function participant() {
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
document.getElementById("booking").style.backgroundColor = "SkyBlue";
document.getElementById("firstName").disabled = false;
document.getElementById("lastName").disabled = false;
document.getElementById("people").disabled = true;
document.getElementById("departure").disabled = true;
document.getElementById("food1").disabled = true;
document.getElementById("food2").disabled = true;
document.getElementById("food3").disabled = true;
}
function booking() {
document.getElementById("participant").style.backgroundColor = "SkyBlue";
document.getElementById("booking").style.backgroundColor = "DodgerBlue";
}
</script>
</body>
</html>Kontrolki pierwszego bloku sekcji są nieaktywne
Te same dwa pola co w funkcji uczestnika, tym razem z true.
rezerwacja.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant" onclick="participant()">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span>«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span>»</span>
<h4 id="tripName">Barcelona</h4>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2" disabled>
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure" disabled>
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked disabled>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2" disabled>
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3" disabled>
<label for="food3">All inclusive</label>
<br>
<button>Sprawdź cenę</button>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
function participant() {
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
document.getElementById("booking").style.backgroundColor = "SkyBlue";
document.getElementById("firstName").disabled = false;
document.getElementById("lastName").disabled = false;
document.getElementById("people").disabled = true;
document.getElementById("departure").disabled = true;
document.getElementById("food1").disabled = true;
document.getElementById("food2").disabled = true;
document.getElementById("food3").disabled = true;
}
function booking() {
document.getElementById("participant").style.backgroundColor = "SkyBlue";
document.getElementById("booking").style.backgroundColor = "DodgerBlue";
document.getElementById("firstName").disabled = true;
document.getElementById("lastName").disabled = true;
}
</script>
</body>
</html>Kontrolki drugiego bloku sekcji są aktywowane
Pięć kontrolek drugiej sekcji z false.
rezerwacja.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant" onclick="participant()">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span>«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span>»</span>
<h4 id="tripName">Barcelona</h4>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2" disabled>
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure" disabled>
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked disabled>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2" disabled>
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3" disabled>
<label for="food3">All inclusive</label>
<br>
<button>Sprawdź cenę</button>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
function participant() {
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
document.getElementById("booking").style.backgroundColor = "SkyBlue";
document.getElementById("firstName").disabled = false;
document.getElementById("lastName").disabled = false;
document.getElementById("people").disabled = true;
document.getElementById("departure").disabled = true;
document.getElementById("food1").disabled = true;
document.getElementById("food2").disabled = true;
document.getElementById("food3").disabled = true;
}
function booking() {
document.getElementById("participant").style.backgroundColor = "SkyBlue";
document.getElementById("booking").style.backgroundColor = "DodgerBlue";
document.getElementById("firstName").disabled = true;
document.getElementById("lastName").disabled = true;
document.getElementById("people").disabled = false;
document.getElementById("departure").disabled = false;
document.getElementById("food1").disabled = false;
document.getElementById("food2").disabled = false;
document.getElementById("food3").disabled = false;
}
</script>
</body>
</html>Przycisk o treści „Rezerwacja”, którego kliknięcie powoduje wywołanie funkcji rezerwacji
Kliknij „Rezerwacja” w podglądzie: przycisk robi się ciemnoniebieski, pola klienta szarzeją, a liczba osób, lista i pola opcji dają się zmieniać - jak na ilustracji 5. „Uczestnik” przywraca stan z ilustracji 4.
rezerwacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant" onclick="participant()">Uczestnik</button>
<button id="booking" onclick="booking()">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span>«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span>»</span>
<h4 id="tripName">Barcelona</h4>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2" disabled>
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure" disabled>
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked disabled>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2" disabled>
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3" disabled>
<label for="food3">All inclusive</label>
<br>
<button>Sprawdź cenę</button>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
function participant() {
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
document.getElementById("booking").style.backgroundColor = "SkyBlue";
document.getElementById("firstName").disabled = false;
document.getElementById("lastName").disabled = false;
document.getElementById("people").disabled = true;
document.getElementById("departure").disabled = true;
document.getElementById("food1").disabled = true;
document.getElementById("food2").disabled = true;
document.getElementById("food3").disabled = true;
}
function booking() {
document.getElementById("participant").style.backgroundColor = "SkyBlue";
document.getElementById("booking").style.backgroundColor = "DodgerBlue";
document.getElementById("firstName").disabled = true;
document.getElementById("lastName").disabled = true;
document.getElementById("people").disabled = false;
document.getElementById("departure").disabled = false;
document.getElementById("food1").disabled = false;
document.getElementById("food2").disabled = false;
document.getElementById("food3").disabled = false;
}
</script>
</body>
</html>Funkcja wywoływana po wciśnięciu znaku «: Zmienia się obraz oraz nazwa miejsca wycieczki na poprzedni, w przypadku pierwszego – na ostatni (obrazy są przewijane do tyłu)
Dwie tablice w tej samej kolejności - zdjęcie i nazwa pod tym samym indeksem - oraz zmienna current z numerem pokazywanej wycieczki (0 = Barcelona). Funkcja zmniejsza current, a gdy spadnie poniżej zera, przeskakuje na ostatni element: images.length - 1. Potem ustawia src obrazu i treść <h4>. Kolejność do tyłu: Barcelona → Londyn → Rzym → Barcelona, jak w arkuszu.
rezerwacja.html HTML zmienione: 11 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant" onclick="participant()">Uczestnik</button>
<button id="booking" onclick="booking()">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span>«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span>»</span>
<h4 id="tripName">Barcelona</h4>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2" disabled>
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure" disabled>
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked disabled>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2" disabled>
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3" disabled>
<label for="food3">All inclusive</label>
<br>
<button>Sprawdź cenę</button>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
function participant() {
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
document.getElementById("booking").style.backgroundColor = "SkyBlue";
document.getElementById("firstName").disabled = false;
document.getElementById("lastName").disabled = false;
document.getElementById("people").disabled = true;
document.getElementById("departure").disabled = true;
document.getElementById("food1").disabled = true;
document.getElementById("food2").disabled = true;
document.getElementById("food3").disabled = true;
}
function booking() {
document.getElementById("participant").style.backgroundColor = "SkyBlue";
document.getElementById("booking").style.backgroundColor = "DodgerBlue";
document.getElementById("firstName").disabled = true;
document.getElementById("lastName").disabled = true;
document.getElementById("people").disabled = false;
document.getElementById("departure").disabled = false;
document.getElementById("food1").disabled = false;
document.getElementById("food2").disabled = false;
document.getElementById("food3").disabled = false;
}
var images = ["1.jpg", "2.jpg", "3.jpg"];
var places = ["Barcelona", "Rzym", "Londyn"];
var current = 0;
function previousTrip() {
current = current - 1;
if (current < 0) {
current = images.length - 1;
}
document.getElementById("tripImage").src = images[current];
document.getElementById("tripName").innerHTML = places[current];
}
</script>
</body>
</html>Ogólny znacznik liniowy <span> ze znakiem «, jego kliknięcie powoduje zmianę zdjęcia w bloku sekcji drugiej
onclick działa na każdym elemencie, nie tylko na przyciskach. Kliknij « w podglądzie: pojawia się Londyn.
rezerwacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant" onclick="participant()">Uczestnik</button>
<button id="booking" onclick="booking()">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span onclick="previousTrip()">«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span>»</span>
<h4 id="tripName">Barcelona</h4>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2" disabled>
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure" disabled>
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked disabled>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2" disabled>
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3" disabled>
<label for="food3">All inclusive</label>
<br>
<button>Sprawdź cenę</button>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
function participant() {
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
document.getElementById("booking").style.backgroundColor = "SkyBlue";
document.getElementById("firstName").disabled = false;
document.getElementById("lastName").disabled = false;
document.getElementById("people").disabled = true;
document.getElementById("departure").disabled = true;
document.getElementById("food1").disabled = true;
document.getElementById("food2").disabled = true;
document.getElementById("food3").disabled = true;
}
function booking() {
document.getElementById("participant").style.backgroundColor = "SkyBlue";
document.getElementById("booking").style.backgroundColor = "DodgerBlue";
document.getElementById("firstName").disabled = true;
document.getElementById("lastName").disabled = true;
document.getElementById("people").disabled = false;
document.getElementById("departure").disabled = false;
document.getElementById("food1").disabled = false;
document.getElementById("food2").disabled = false;
document.getElementById("food3").disabled = false;
}
var images = ["1.jpg", "2.jpg", "3.jpg"];
var places = ["Barcelona", "Rzym", "Londyn"];
var current = 0;
function previousTrip() {
current = current - 1;
if (current < 0) {
current = images.length - 1;
}
document.getElementById("tripImage").src = images[current];
document.getElementById("tripName").innerHTML = places[current];
}
</script>
</body>
</html>Funkcja wywoływana po wciśnięciu znaku »: Zmienia się obraz oraz nazwa miejsca wycieczki na następny, w przypadku ostatniego – na pierwszy
Lustrzana funkcja: current rośnie, a po ostatnim elemencie wraca do 0. Kolejność: Barcelona → Rzym → Londyn → Barcelona.
rezerwacja.html HTML zmienione: 8 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant" onclick="participant()">Uczestnik</button>
<button id="booking" onclick="booking()">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span onclick="previousTrip()">«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span>»</span>
<h4 id="tripName">Barcelona</h4>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2" disabled>
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure" disabled>
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked disabled>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2" disabled>
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3" disabled>
<label for="food3">All inclusive</label>
<br>
<button>Sprawdź cenę</button>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
function participant() {
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
document.getElementById("booking").style.backgroundColor = "SkyBlue";
document.getElementById("firstName").disabled = false;
document.getElementById("lastName").disabled = false;
document.getElementById("people").disabled = true;
document.getElementById("departure").disabled = true;
document.getElementById("food1").disabled = true;
document.getElementById("food2").disabled = true;
document.getElementById("food3").disabled = true;
}
function booking() {
document.getElementById("participant").style.backgroundColor = "SkyBlue";
document.getElementById("booking").style.backgroundColor = "DodgerBlue";
document.getElementById("firstName").disabled = true;
document.getElementById("lastName").disabled = true;
document.getElementById("people").disabled = false;
document.getElementById("departure").disabled = false;
document.getElementById("food1").disabled = false;
document.getElementById("food2").disabled = false;
document.getElementById("food3").disabled = false;
}
var images = ["1.jpg", "2.jpg", "3.jpg"];
var places = ["Barcelona", "Rzym", "Londyn"];
var current = 0;
function previousTrip() {
current = current - 1;
if (current < 0) {
current = images.length - 1;
}
document.getElementById("tripImage").src = images[current];
document.getElementById("tripName").innerHTML = places[current];
}
function nextTrip() {
current = current + 1;
if (current > images.length - 1) {
current = 0;
}
document.getElementById("tripImage").src = images[current];
document.getElementById("tripName").innerHTML = places[current];
}
</script>
</body>
</html>Ogólny znacznik liniowy <span> ze znakiem », jego kliknięcie powoduje zmianę zdjęcia w bloku sekcji drugiej
Kliknij » trzy razy: Rzym, Londyn i znów Barcelona. Obie funkcje korzystają z tej samej zmiennej current, więc można przewijać na zmianę w obie strony.
rezerwacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant" onclick="participant()">Uczestnik</button>
<button id="booking" onclick="booking()">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<br>
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span onclick="previousTrip()">«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span onclick="nextTrip()">»</span>
<h4 id="tripName">Barcelona</h4>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2" disabled>
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure" disabled>
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked disabled>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2" disabled>
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3" disabled>
<label for="food3">All inclusive</label>
<br>
<button>Sprawdź cenę</button>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
function participant() {
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
document.getElementById("booking").style.backgroundColor = "SkyBlue";
document.getElementById("firstName").disabled = false;
document.getElementById("lastName").disabled = false;
document.getElementById("people").disabled = true;
document.getElementById("departure").disabled = true;
document.getElementById("food1").disabled = true;
document.getElementById("food2").disabled = true;
document.getElementById("food3").disabled = true;
}
function booking() {
document.getElementById("participant").style.backgroundColor = "SkyBlue";
document.getElementById("booking").style.backgroundColor = "DodgerBlue";
document.getElementById("firstName").disabled = true;
document.getElementById("lastName").disabled = true;
document.getElementById("people").disabled = false;
document.getElementById("departure").disabled = false;
document.getElementById("food1").disabled = false;
document.getElementById("food2").disabled = false;
document.getElementById("food3").disabled = false;
}
var images = ["1.jpg", "2.jpg", "3.jpg"];
var places = ["Barcelona", "Rzym", "Londyn"];
var current = 0;
function previousTrip() {
current = current - 1;
if (current < 0) {
current = images.length - 1;
}
document.getElementById("tripImage").src = images[current];
document.getElementById("tripName").innerHTML = places[current];
}
function nextTrip() {
current = current + 1;
if (current > images.length - 1) {
current = 0;
}
document.getElementById("tripImage").src = images[current];
document.getElementById("tripName").innerHTML = places[current];
}
</script>
</body>
</html>Kroki 60-63 · po tym etapie masz 39 z 39 kryteriów (pkt)
Kontrolki drugiego bloku sekcji są nieaktywne
Wersja z egzaminu wyłącza siedem kontrolek osobno w każdej funkcji. Znacznik <fieldset> grupuje pola formularza, a jego atrybut disabled wyłącza wszystkie kontrolki w środku naraz. Każda sekcja dostaje swoją grupę (clientFields, bookingFields), druga zaczyna z disabled, a funkcje przełączają po jednej właściwości - dodanie nowego pola nie wymaga już zmian w skrypcie. Ramkę, którą przeglądarka rysuje wokół fieldset, zdejmujesz w CSS. Sprawdzone w przeglądarce: przyciski dają ten sam efekt co wcześniej. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
rezerwacja.html HTML zmienione: 14 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant" onclick="participant()">Uczestnik</button>
<button id="booking" onclick="booking()">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<fieldset id="clientFields">
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
</fieldset>
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span onclick="previousTrip()">«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span onclick="nextTrip()">»</span>
<h4 id="tripName">Barcelona</h4>
<fieldset id="bookingFields" disabled>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2">
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure">
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2">
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3">
<label for="food3">All inclusive</label>
</fieldset>
<br>
<button>Sprawdź cenę</button>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
function participant() {
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
document.getElementById("booking").style.backgroundColor = "SkyBlue";
document.getElementById("clientFields").disabled = false;
document.getElementById("bookingFields").disabled = true;
// wersja z egzaminu: osobno firstName, lastName (false) i people, departure, food1-food3 (true)
}
function booking() {
document.getElementById("participant").style.backgroundColor = "SkyBlue";
document.getElementById("booking").style.backgroundColor = "DodgerBlue";
document.getElementById("clientFields").disabled = true;
document.getElementById("bookingFields").disabled = false;
}
var images = ["1.jpg", "2.jpg", "3.jpg"];
var places = ["Barcelona", "Rzym", "Londyn"];
var current = 0;
function previousTrip() {
current = current - 1;
if (current < 0) {
current = images.length - 1;
}
document.getElementById("tripImage").src = images[current];
document.getElementById("tripName").innerHTML = places[current];
}
function nextTrip() {
current = current + 1;
if (current > images.length - 1) {
current = 0;
}
document.getElementById("tripImage").src = images[current];
document.getElementById("tripName").innerHTML = places[current];
}
</script>
</body>
</html>styl.css CSS zmienione: 5 linii * {
font-family: "Bookman Old Style";
}
body {
background-color: AliceBlue;
}
header, footer {
background-color: SkyBlue;
text-align: center;
padding: 1px;
border-radius: 15px;
}
nav {
width: 90%;
text-align: center;
}
section {
width: 45%;
height: 640px;
}
aside {
width: 10%;
height: 700px;
overflow: hidden;
}
aside {
float: right;
}
nav, section {
float: left;
}
footer {
clear: both;
}
aside img {
width: 100%;
}
span {
font-size: 200%;
cursor: pointer;
}
button {
background-color: SkyBlue;
width: 45%;
border-radius: 15px;
padding: 15px 40px;
margin: 3px 2%;
}
input, select {
margin: 3px;
}
fieldset {
border: none;
padding: 0;
margin: 0;
}Zmienia się obraz oraz nazwa miejsca wycieczki na następny, w przypadku ostatniego – na pierwszy
Funkcje „do tyłu” i „do przodu” różnią się tylko kierunkiem, więc zostaje jedna: showTrip(step) z krokiem -1 albo 1. Zawinięcie robi reszta z dzielenia %: przy trzech zdjęciach (2 + 1) % 3 daje 0, a dodane images.length sprawia, że krok w tył z zera daje (0 - 1 + 3) % 3 = 2, a nie liczbę ujemną. Sprawdzone w przeglądarce: ta sama kolejność w obie strony. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
rezerwacja.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside>
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
<img src="1.jpg" alt="wycieczki">
<img src="2.jpg" alt="wycieczki">
<img src="3.jpg" alt="wycieczki">
</aside>
<nav>
<button id="participant" onclick="participant()">Uczestnik</button>
<button id="booking" onclick="booking()">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<fieldset id="clientFields">
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
</fieldset>
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span onclick="showTrip(-1)">«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span onclick="showTrip(1)">»</span>
<h4 id="tripName">Barcelona</h4>
<fieldset id="bookingFields" disabled>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2">
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure">
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2">
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3">
<label for="food3">All inclusive</label>
</fieldset>
<br>
<button>Sprawdź cenę</button>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
function participant() {
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
document.getElementById("booking").style.backgroundColor = "SkyBlue";
document.getElementById("clientFields").disabled = false;
document.getElementById("bookingFields").disabled = true;
// wersja z egzaminu: osobno firstName, lastName (false) i people, departure, food1-food3 (true)
}
function booking() {
document.getElementById("participant").style.backgroundColor = "SkyBlue";
document.getElementById("booking").style.backgroundColor = "DodgerBlue";
document.getElementById("clientFields").disabled = true;
document.getElementById("bookingFields").disabled = false;
}
var images = ["1.jpg", "2.jpg", "3.jpg"];
var places = ["Barcelona", "Rzym", "Londyn"];
var current = 0;
function showTrip(step) {
current = (current + step + images.length) % images.length;
document.getElementById("tripImage").src = images[current];
document.getElementById("tripName").innerHTML = places[current];
}
// wersja z egzaminu: previousTrip() i nextTrip() z instrukcją if
</script>
</body>
</html>Zawartość bloku bocznego: 9 obrazów z tekstem alternatywnym „wycieczki”. Obrazy są zapętlone: 1.jpg, 2.jpg, 3.jpg, 1.jpg itd. Sposób realizacji dowolny
„Sposób realizacji dowolny” zostawia miejsce na pętlę: for od 0 do 8 tworzy obraz (document.createElement("img")), bierze plik z tablicy images pod indeksem i % images.length (0, 1, 2, 0, 1, 2...) i dokleja go do bloku bocznego. Ta sama reszta z dzielenia co przy przewijaniu, a zmiana liczby zdjęć to jedna liczba zamiast przepisywania HTML-a. Klucz uznaje obrazy dodane skryptem (R.2.7). Na egzaminie wystarczy wersja wcześniejsza z dziewięcioma znacznikami.
rezerwacja.html HTML zmienione: 7 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside id="gallery">
</aside>
<nav>
<button id="participant" onclick="participant()">Uczestnik</button>
<button id="booking" onclick="booking()">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<fieldset id="clientFields">
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
</fieldset>
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span onclick="showTrip(-1)">«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span onclick="showTrip(1)">»</span>
<h4 id="tripName">Barcelona</h4>
<fieldset id="bookingFields" disabled>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2">
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure">
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2">
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3">
<label for="food3">All inclusive</label>
</fieldset>
<br>
<button>Sprawdź cenę</button>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
function participant() {
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
document.getElementById("booking").style.backgroundColor = "SkyBlue";
document.getElementById("clientFields").disabled = false;
document.getElementById("bookingFields").disabled = true;
// wersja z egzaminu: osobno firstName, lastName (false) i people, departure, food1-food3 (true)
}
function booking() {
document.getElementById("participant").style.backgroundColor = "SkyBlue";
document.getElementById("booking").style.backgroundColor = "DodgerBlue";
document.getElementById("clientFields").disabled = true;
document.getElementById("bookingFields").disabled = false;
}
var images = ["1.jpg", "2.jpg", "3.jpg"];
var places = ["Barcelona", "Rzym", "Londyn"];
var current = 0;
for (var i = 0; i < 9; i++) {
var photo = document.createElement("img");
photo.src = images[i % images.length];
photo.alt = "wycieczki";
document.getElementById("gallery").appendChild(photo);
}
function showTrip(step) {
current = (current + step + images.length) % images.length;
document.getElementById("tripImage").src = images[current];
document.getElementById("tripName").innerHTML = places[current];
}
// wersja z egzaminu: previousTrip() i nextTrip() z instrukcją if
</script>
</body>
</html>Przycisk o treści „Uczestnik”, którego kliknięcie powoduje wywołanie funkcji uczestnika
Na koniec HTML bez atrybutów onclick: znaki dostają identyfikatory previous i next, a skrypt przypina obsługę przez addEventListener("click", ...). Funkcje z parametrem (showTrip(-1)) opakowujesz w funkcję anonimową - podanie samego showTrip(-1) wywołałoby ją od razu, przy wczytaniu strony. Sprawdzone w przeglądarce cały zestaw kliknięć z ilustracji 4 i 5. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
rezerwacja.html HTML zmienione: 9 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Rezerwacja wycieczek</h1>
</header>
<main>
<aside id="gallery">
</aside>
<nav>
<button id="participant">Uczestnik</button>
<button id="booking">Rezerwacja</button>
</nav>
<section>
<h2>Dane Klienta</h2>
<img src="osoba.png" alt="Klient">
<fieldset id="clientFields">
<label for="firstName">Imię</label>
<input type="text" id="firstName">
<br>
<label for="lastName">Nazwisko</label>
<input type="text" id="lastName">
</fieldset>
<p><a href="wycieczki.html">Do strony głównej</a></p>
</section>
<section>
<h2>Dane rezerwacji</h2>
<span id="previous">«</span>
<img src="1.jpg" alt="wycieczka" id="tripImage">
<span id="next">»</span>
<h4 id="tripName">Barcelona</h4>
<fieldset id="bookingFields" disabled>
<label for="people">Liczba osób:</label>
<input type="number" id="people" min="1" max="4" value="2">
<br>
<label for="departure">Miejsce wylotu:</label>
<select id="departure">
<option>Warszawa</option>
<option>Kraków</option>
<option>Wrocław</option>
</select>
<br>
<input type="radio" name="food" id="food1" checked>
<label for="food1">Śniadania</label>
<input type="radio" name="food" id="food2">
<label for="food2">Śniadania i obiadokolacje</label>
<input type="radio" name="food" id="food3">
<label for="food3">All inclusive</label>
</fieldset>
<br>
<button>Sprawdź cenę</button>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
function participant() {
document.getElementById("participant").style.backgroundColor = "DodgerBlue";
document.getElementById("booking").style.backgroundColor = "SkyBlue";
document.getElementById("clientFields").disabled = false;
document.getElementById("bookingFields").disabled = true;
// wersja z egzaminu: osobno firstName, lastName (false) i people, departure, food1-food3 (true)
}
function booking() {
document.getElementById("participant").style.backgroundColor = "SkyBlue";
document.getElementById("booking").style.backgroundColor = "DodgerBlue";
document.getElementById("clientFields").disabled = true;
document.getElementById("bookingFields").disabled = false;
}
var images = ["1.jpg", "2.jpg", "3.jpg"];
var places = ["Barcelona", "Rzym", "Londyn"];
var current = 0;
for (var i = 0; i < 9; i++) {
var photo = document.createElement("img");
photo.src = images[i % images.length];
photo.alt = "wycieczki";
document.getElementById("gallery").appendChild(photo);
}
function showTrip(step) {
current = (current + step + images.length) % images.length;
document.getElementById("tripImage").src = images[current];
document.getElementById("tripName").innerHTML = places[current];
}
// wersja z egzaminu: previousTrip() i nextTrip() z instrukcją if
document.getElementById("participant").addEventListener("click", participant);
document.getElementById("booking").addEventListener("click", booking);
document.getElementById("previous").addEventListener("click", function () { showTrip(-1); });
document.getElementById("next").addEventListener("click", function () { showTrip(1); });
// wersja z egzaminu: atrybuty onclick przy przyciskach i znakach
</script>
</body>
</html>Krok 64 · 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: 1.jpg, 2.jpg, 3.jpg, import.png, kw1.png - kw4.png, kwerendy.txt, osoba.png, przeglądarka.txt, rezerwacja.html, styl.css, wycieczki.html. 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 63.
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.