E.14-01-20.06-SGCzerwiec 2020 · 43 kroki · ok. 89 min · 36 kryteriów z klucza

Rozwiązanie krok po kroku: Koszty farby i kalkulator puszek (Wersja podstawowa)

Strona o kosztach malowania: baza malarz zbudowana kreatorami phpMyAdmin - tabela farby z danymi z tabeli 1 arkusza i tabela malowanie z kluczem złożonym z dwóch pól, kluczem obcym i danymi zaimportowanymi z pliku tekstowego - trzy kwerendy (cena farby, cena litra liczona z dwóch pól, kolory farb w pomieszczeniu przez JOIN) i eksport bazy do pliku SQL. Do tego obraz przeskalowany do 200 × 200 px w JPEG, trzy podstrony index.html, mieszamy.html i cena.html z banerem, dwoma panelami i stopką, style w styl.css oraz skrypt w JavaScript, który liczy, ile litrowych puszek farby potrzeba na podaną powierzchnię.

To arkusz E.14 z czerwca 2020 - kwalifikacji formuły 2012, którą zastąpiła INF.03. Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypt jest napisany najprościej, polami i zdarzeniami z tabeli 2 arkusza (getElementById, onclick, innerHTML). Podstrony nie mają PHP, więc podgląd od kroku z HTML-em to działająca strona - pole i przycisk na cena.html można wypróbować.

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

Plik malowanie.txt i obraz pochodzą z oryginalnego archiwum CKE (załącznik do pobrania na stronie arkusza, hasło w treści zadania). Baza, kwerendy i eksport są wykonane na MariaDB 10.4 - tej samej, która jest w XAMPP. Działanie skryptu sprawdzone w Chrome.

Jak liczą się punkty. Klucz ma 36 kryteriów (R.1.1 - R.5.5), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 27 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.

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

Etap 1: Baza danych
Kroki 1-11 · po tym etapie masz 10 z 36 kryteriów (pkt)

Krok 1: Folder zdającego i archiwum egzamin1.zip
ok. 2 min
Polecenie z arkusza
Aby wykonać zadanie zaloguj się bez hasła na konto Egzamin. Na pulpicie znajduje się plik egzamin1.zip z plikami potrzebnymi do rozwiązania zadania. Plik ten zabezpieczony jest hasłem 2ws3ed!# Na pulpicie utwórz folder i nazwij go Twoim numerem PESEL. Wszystkie pliki utworzone w czasie egzaminu umieść w tym folderze.
Na pulpicie tworzysz folder nazwany numerem PESEL - w tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora, Bartosz Bryniarski. Archiwum egzamin1.zip rozpakowujesz hasłem 2ws3ed!# (same małe litery, cyfry i dwa znaki specjalne na końcu). W środku są dwa pliki: malowanie.txt z danymi do tabeli i obraz.png.
Krok 2: Baza malarz
ok. 2 min
Polecenie z arkusza
Za pomocą wizualnych narzędzi (kreatorów) przystawki phpMyAdmin utwórz bazę danych wraz z tabelami i danymi na podstawie opisu: Baza danych o nazwie malarz
W XAMPP Control Panel Start przy Apache i MySQL, potem http://localhost/phpmyadmin, Nowa, nazwa malarz, porównywanie napisów utf8mb4_polish_ci (polskie litery w kolorach „biały”, „żółty”), Utwórz. Arkusz każe pracować kreatorami - tabele i dane wprowadzasz formularzami phpMyAdmin, nie pisząc CREATE TABLE ręcznie.
Krok 3: Tabela farby: cztery kolumny i klucz podstawowy
Kryteria:
R.1.2 Utworzono strukturę tabeli farby , zawiera ona pole kolor dowolnego typu tekstowego oraz pola cena i pojemnosc dowolnego typu całkowitego
ok. 4 min
Polecenie z arkusza
Dwie tabele: farby i malowanie. Tabela farby zawiera kolumny z informacjami o puszkach farby: id_farby (klucz podstawowy), kolor, cena, pojemosc (kolor jest typu tekstowego, pozostałe pola - całkowite)
W bazie malarz: Utwórz tabelę, nazwa farby, 4 kolumny, Wykonaj. W formularzu:
id_farby - typ INT, w kolumnie Indeks wybierz PRIMARY (klucz podstawowy),
kolor - typ VARCHAR, długość 20 (tekst),
cena i pojemnosc - typ INT (liczby całkowite).
Zapisz. Zrzut karty Struktura tej tabeli zapisz jako struktura_farby.jpg (cały ekran z paskiem zadań, format JPEG).
⚠️ Sprzeczność w arkuszu: w opisie tabeli kolumna nazywa się pojemosc (bez litery n), ale tabela 1, kwerenda 2 i klucz CKE używają nazwy pojemnosc. Rozwiązanie używa nazwy pojemnosc - tej, której wymaga klucz w kryterium R.1.2 i w kwerendzie 2. Za literówkę w nazwie kolumny klucz punktu nie odbiera, ale kwerenda musi używać tej samej nazwy co tabela.
Typowe błędy
Typ VARCHAR wymaga podania długości - bez niej phpMyAdmin nie zapisze tabeli. Pole kolor jako INT przyjmie liczby zamiast nazw kolorów.
Podgląd strony po tym kroku
Krok 4: Tabela malowanie: klucz podstawowy z dwóch pól
Kryteria: ,
R.1.1 Utworzono bazę danych o nazwie malarz z tabelami farby o kluczu podstawowym id_farby oraz malowanie o kluczu podstawowym id_pomieszczenia + id_sciany
R.1.3 Utworzono strukturę tabeli malowanie , zawiera ona pola dowolnego typu całkowitego: liczba_puszek oraz id_farby
ok. 4 min
Polecenie z arkusza
Tabela malowanie zawiera kolumny z informacjami o liczbie zużytych puszek farby w poszczególnych pomieszczeniach, na poszczególne ściany i składa się z pól: id_pomieszczenia (klucz podstawowy), id_sciany (klucz podstawowy), id_farby (klucz obcy wiążący do tabeli farby), liczba_puszek. Wszystkie pola typu całkowitego
Utwórz tabelę malowanie, 4 kolumny, wszystkie typu INT. W kolumnie Indeks wybierz PRIMARY przy id_pomieszczenia i przy id_sciany - phpMyAdmin zapyta, czy dołożyć pole do istniejącego klucza; potwierdź. Powstaje klucz złożony: niepowtarzalna jest dopiero para (pomieszczenie, ściana), bo ściana numer 1 jest w każdym pomieszczeniu. Pola id_farby i liczba_puszek - bez indeksu.
Baza ma teraz obie tabele z kluczami podstawowymi (R.1.1), a tabela malowanie - pola id_farby i liczba_puszek typu całkowitego (R.1.3). Zrzut karty Struktura: struktura_malowanie.jpg - po następnym kroku, żeby było na nim widać też klucz obcy.
Typowe błędy
Dwa osobne klucze PRIMARY są niemożliwe - tabela ma jeden klucz podstawowy, więc drugie pole trzeba dołożyć do istniejącego, a nie tworzyć nowy.
Krok 5: Klucz obcy id_farby do tabeli farby
ok. 3 min
Polecenie z arkusza
id_farby (klucz obcy wiążący do tabeli farby)
W tabeli malowanie: karta Struktura → Widok relacyjny. W wierszu dla kolumny id_farby wybierz bazę malarz, tabelę farby i kolumnę id_farby, Zapisz. phpMyAdmin wykona polecenie:
ALTER TABLE malowanie ADD FOREIGN KEY (id_farby) REFERENCES farby (id_farby);
Klucz obcy działa tylko w tabelach InnoDB (domyślny silnik w XAMPP) i wymaga indeksu na id_farby - MariaDB zakłada go sama. Od tej chwili do tabeli malowanie można wpisać tylko numer farby, który istnieje w tabeli farby - dlatego farby trzeba wprowadzić przed importem. Teraz zrzut karty Struktura: struktura_malowanie.jpg.
Podgląd strony po tym kroku
Krok 6: Dane tabeli farby z tabeli 1
Kryteria:
R.1.4 Wstawiono do tabeli farby 7 rekordów danych, zgodnych z tabelą 1 arkusza
ok. 4 min
Polecenie z arkusza
Dane z tabeli farby zawiera Tabela 1. Należy wypełnić tabelę tymi danymi
Tabela farby, karta Wstaw: formularz ma domyślnie miejsce na 2 wiersze - na dole ustaw „Kontynuuj wstawianie z 7 wierszami” albo wstawiaj po dwa. Siedem rekordów z tabeli 1: biały 20 zł / 5 l, czerwony 30 / 3, niebieski 35 / 3, żółty 22 / 4, zielony 30 / 4, czarny 50 / 2, fioletowy 64 / 3 (R.1.4).
Zrzut karty Przeglądaj z siedmioma rekordami: dane_farby.jpg.
Podgląd strony po tym kroku
Krok 7: Import malowanie.txt do tabeli malowanie
Kryteria:
R.1.5 Zaimportowano dane z pliku malowanie.txt do tabeli malowanie , zawiera ona 13 rekordów
ok. 4 min
Polecenie z arkusza
Dane z tabeli malowanie znajdują się w pliku malowanie.txt. Należy zaimportować plik do tabeli. Wykonaj zrzuty ekranu dokumentujące utworzenie bazy danych. Zrzuty ekranu należy zapisać w formacje JPEG i muszą one zawierać cały obszar monitora z widocznym paskiem zadań. Powinny zawierać strukturę tabeli farby i malowanie (nazwy struktura_farby, struktura_malowanie) oraz dane zapisane do tabeli farby i malowanie (nazwa dane_farby, dane_malowanie)
Plik ma 13 wierszy po cztery liczby oddzielone spacją, w kolejności kolumn tabeli: pomieszczenie, ściana, farba, liczba puszek. Tabela malowanie, karta Import: plik malowanie.txt, format CSV, w ustawieniach formatu Kolumny oddzielone - wpisz spację zamiast średnika, Kolumny zawarte w - wyczyść pole, Wykonaj.
W tabeli jest 13 rekordów (R.1.5). Zrzut karty Przeglądaj: dane_malowanie.jpg.
Typowe błędy
W linii 12 pliku (5 1 2 2) po ostatniej liczbie stoi spacja. MariaDB przy imporcie poleceniem LOAD DATA wczytuje wiersz z ostrzeżeniem, ale jeśli phpMyAdmin zgłosi niewłaściwą liczbę kolumn w linii 12, usuń tę spację w Notatniku i zaimportuj plik jeszcze raz. Import przed wpisaniem farb kończy się błędem klucza obcego.
Podgląd strony po tym kroku
Krok 8: Kwerenda 1: cena niebieskiej farby
Kryteria: ,
R.1.6 Zapisano plik kwerendy.txt zawierający co najmniej jedno zapytanie SQL, wynikające z treści zadania
R.1.7 Zapisano zapytanie 1 wybierające jedynie cenę niebieskiej puszki farby. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT cena FROM farby WHERE kolor = "niebieski"; oraz udokumentowano działanie kwerendy zrzutem ekranu, na którym widoczna jest jedynie cena: 35
ok. 3 min
Polecenie z arkusza
Zaprojektuj kwerendy i zapisz je w pliku kwerendy.txt. Udokumentuj wykonanie kwerend za pomocą zrzutów w formacie JPEG o nazwach kw1, kw2, kw3. Zapytania powinny mieć charakter uniwersalny, czyli powinny działać dla dowolnych danych wpisanych do tabeli. Zrzuty ekranu powinny zawierać cały obszar monitora z widocznym paskiem zadań. Opis kwerend: Kwerenda 1: wybierającą jedynie cenę niebieskiej puszki farby
Karta SQL bazy malarz:
SELECT cena - jedynie cena,
FROM farby,
WHERE kolor = 'niebieski' - warunek po nazwie koloru, nie po numerze 3: „uniwersalnie”, więc kwerenda działa także wtedy, gdy farby wpisano w innej kolejności.
Wynik: 35. Zapytanie do nowego pliku kwerendy.txt, zrzut: kw1.jpg - tym razem także w JPEG (R.1.6, R.1.7).
kwerendy.txt Tekst nowy plik
-- Kwerenda 1 SELECT cena FROM farby WHERE kolor = 'niebieski';
Podgląd strony po tym kroku
Krok 9: Kwerenda 2: kolor i cena jednego litra
Kryteria:
R.1.8 Zapisano zapytanie 2 wybierające jedynie nazwę koloru oraz cenę jednego litra farby obliczoną za pomocą pól cena i pojemnosc dla wszystkich wierszy tabeli farby. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT kolor, cena/pojemnosc FROM farby; oraz udokumentowano działanie kwerendy zrzutem ekranu, na którym widoczne są jedynie pola kolor oraz wyliczona cena: 4 dla białej farby, 10 dla czerwonej, 11,67 dla niebieskiej, 5,5 dla żółtej, 7,5 dla zielonej, 25 dla czarnej, 21,33 dla fioletowej (dowolnie zaokrąglona)
ok. 3 min
Polecenie z arkusza
Kwerenda 2: wybierającą jedynie nazwę koloru oraz cenę jednego litra farby obliczoną za pomocą pól cena i pojemnosc dla wszystkich wierszy tabeli farby
SELECT kolor, cena / pojemnosc - druga kolumna wyniku to wyrażenie: cena puszki podzielona przez jej pojemność w litrach daje cenę litra,
FROM farby - bez warunku, bo wszystkie wiersze.
MariaDB dzieli z dokładnością do czterech miejsc po przecinku: biały 4,0000, czerwony 10,0000, niebieski 11,6667, żółty 5,5000, zielony 7,5000, czarny 25,0000, fioletowy 21,3333 - te same wartości wymienia klucz (zaokrąglenie dowolne). Kolumna wyniku nazywa się tak jak wyrażenie; ładniejszy nagłówek daje alias AS cena_litra, ale klucz go nie wymaga. Zrzut: kw2.jpg (R.1.8).
kwerendy.txt Tekst zmienione: 3 linie
-- Kwerenda 1 SELECT cena FROM farby WHERE kolor = 'niebieski'; -- Kwerenda 2 SELECT kolor, cena / pojemnosc FROM farby;
Podgląd strony po tym kroku
Krok 10: Kwerenda 3: kolory farb w pomieszczeniu 3
Kryteria:
R.1.9 Zapisano zapytanie 3 wybierające jedynie nazwy kolorów farb dla pomieszczenia 3. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT kolor FROM malowanie JOIN farby ON malowanie.id_farby = farby.id_farby WHERE id_pomieszczenia = 3; Możliwe również porównanie kluczy po WHERE lub INNER JOIN lub z wykorzystaniem podzapytania SQL oraz udokumentowano działanie kwerendy zrzutem ekranu, na którym widoczne są jedynie nazwy kolorów: zielony i czerwony
ok. 3 min
Polecenie z arkusza
Kwerenda 3: wybierającą jedynie nazwy kolorów farb dla pomieszczenia 3
Numer pomieszczenia jest w tabeli malowanie, a nazwa koloru - w tabeli farby, więc potrzebne jest złączenie:
SELECT kolor,
FROM malowanie JOIN farby - łączy wiersze obu tabel,
ON malowanie.id_farby = farby.id_farby - wiersz malowania z wierszem jego farby; nazwa tabeli przed kropką jest konieczna, bo kolumna id_farby jest w obu tabelach,
WHERE id_pomieszczenia = 3.
Pomieszczenie 3 ma dwie ściany, malowane farbą 5 i 2 - wynik: zielony i czerwony, jak w kluczu. Zrzut: kw3.jpg (R.1.9).
Typowe błędy
Złączenie bez warunku ON daje iloczyn kartezjański: każdy wiersz malowania z każdą z 7 farb - 14 wierszy zamiast 2.
kwerendy.txt Tekst zmienione: 3 linie
-- Kwerenda 1 SELECT cena FROM farby WHERE kolor = 'niebieski'; -- Kwerenda 2 SELECT kolor, cena / pojemnosc FROM farby; -- Kwerenda 3 SELECT kolor FROM malowanie JOIN farby ON malowanie.id_farby = farby.id_farby WHERE id_pomieszczenia = 3;
Podgląd strony po tym kroku

Krok 11: Eksport bazy do pliku malarz.sql

Kryteria:

R.1.10 Wyeksportowano bazę danych malarz do pliku malarz.sql . Czas generowania wpisany w nagłówku pliku jest zgodny z datą i godziną egzaminu

ok. 2 min

Polecenie z arkusza

Wyeksportuj tabele do pliku malarz w formacie SQL

Zaznacz bazę malarz (nie tabelę), karta Eksport, metoda Szybka, format SQL, Wykonaj. Plik pobiera się jako malarz.sql - przenieś go do folderu z numerem PESEL. Zawiera polecenia CREATE TABLE obu tabel, klucze i INSERT z danymi.

Klucz sprawdza też, kiedy plik powstał: w nagłówku eksportu phpMyAdmin stoi linia „Czas generowania:” z datą i godziną, która musi zgadzać się z dniem egzaminu (R.1.10). Eksport zrobiony przed egzaminem albo przyniesiony z zewnątrz tego nie spełni. Plik w tym kroku wygenerowano programem mysqldump z tej samej bazy - treść SQL jest taka sama, a czas powstania stoi w ostatniej linii: -- Dump completed on 2026-11-10 10:19:45.

Typowe błędy

Eksport z zaznaczoną jedną tabelą zapisze tylko ją. Nazwa pliku ma być malarz.sql - phpMyAdmin nadaje ją sam po nazwie bazy.

malarz.sql SQL nowy plik

-- MariaDB dump 10.19  Distrib 10.4.27-MariaDB, for Win64 (AMD64)
--
-- Host: 127.0.0.1    Database: malarz
-- ------------------------------------------------------
-- Server version	10.4.27-MariaDB

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
/*!40103 SET TIME_ZONE='+00:00' */;
/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;

--
-- Table structure for table `farby`
--

DROP TABLE IF EXISTS `farby`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `farby` (
  `id_farby` int(11) NOT NULL,
  `kolor` varchar(20) NOT NULL,
  `cena` int(11) NOT NULL,
  `pojemnosc` int(11) NOT NULL,
  PRIMARY KEY (`id_farby`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_polish_ci;
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `farby`
--

LOCK TABLES `farby` WRITE;
/*!40000 ALTER TABLE `farby` DISABLE KEYS */;
INSERT INTO `farby` VALUES (1,'biały',20,5);
INSERT INTO `farby` VALUES (2,'czerwony',30,3);
INSERT INTO `farby` VALUES (3,'niebieski',35,3);
INSERT INTO `farby` VALUES (4,'żółty',22,4);
INSERT INTO `farby` VALUES (5,'zielony',30,4);
INSERT INTO `farby` VALUES (6,'czarny',50,2);
INSERT INTO `farby` VALUES (7,'fioletowy',64,3);
/*!40000 ALTER TABLE `farby` ENABLE KEYS */;
UNLOCK TABLES;

--
-- Table structure for table `malowanie`
--

DROP TABLE IF EXISTS `malowanie`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `malowanie` (
  `id_pomieszczenia` int(11) NOT NULL,
  `id_sciany` int(11) NOT NULL,
  `id_farby` int(11) NOT NULL,
  `liczba_puszek` int(11) NOT NULL,
  PRIMARY KEY (`id_pomieszczenia`,`id_sciany`),
  KEY `id_farby` (`id_farby`),
  CONSTRAINT `malowanie_ibfk_1` FOREIGN KEY (`id_farby`) REFERENCES `farby` (`id_farby`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_polish_ci;
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `malowanie`
--

LOCK TABLES `malowanie` WRITE;
/*!40000 ALTER TABLE `malowanie` DISABLE KEYS */;
INSERT INTO `malowanie` VALUES (1,1,1,3);
INSERT INTO `malowanie` VALUES (1,2,3,2);
INSERT INTO `malowanie` VALUES (1,3,1,3);
INSERT INTO `malowanie` VALUES (1,4,1,2);
INSERT INTO `malowanie` VALUES (2,1,7,4);
INSERT INTO `malowanie` VALUES (2,2,6,3);
INSERT INTO `malowanie` VALUES (2,3,5,5);
INSERT INTO `malowanie` VALUES (2,4,3,2);
INSERT INTO `malowanie` VALUES (3,1,5,2);
INSERT INTO `malowanie` VALUES (3,2,2,2);
INSERT INTO `malowanie` VALUES (4,4,5,2);
INSERT INTO `malowanie` VALUES (5,1,2,2);
INSERT INTO `malowanie` VALUES (5,2,6,4);
/*!40000 ALTER TABLE `malowanie` ENABLE KEYS */;
UNLOCK TABLES;
/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

-- Dump completed on 2026-11-10 10:19:45

Etap 2: Grafika i strona HTML
Kroki 12-29 · po tym etapie masz 21 z 36 kryteriów (pkt)

Krok 12: Grafika: obraz.jpg 200 × 200 px
Kryteria:
R.2.1 Obraz obraz.jpg przeskalowano do wymiarów 200 px na 200 px (± 2 px)
ok. 2 min
Polecenie z arkusza
Plik obraz.png przeskalowany do rozmiarów 200 px na 200 px oraz zapisany w formacie JPEG
Oryginał ma 500 × 500 px - jest kwadratowy, więc 200 × 200 zachowuje proporcje. W GIMP-ie Obraz → Skaluj obraz, 200 × 200, potem Plik → Eksportuj jako obraz.jpg (format wybiera rozszerzenie nazwy) (R.2.1). Zapisz zapisałby projekt GIMP-a w formacie XCF, a nie JPEG.
Podgląd strony po tym kroku
Krok 13: Plik index.html
ok. 2 min
Polecenie z arkusza
Witryna internetowa zawiera podstrony index.html, mieszamy.html i cena.html.
Najpierw powstaje komplet strony index.html. Podstrony mieszamy.html i cena.html różnią się od niej tylko zawartością panelu prawego, więc będą jej kopiami. <!DOCTYPE html> oznacza HTML5, lang="pl" - treść po polsku.
index.html HTML nowy plik
<!DOCTYPE html> <html lang="pl"> <head> </head> <body> </body> </html>
Podgląd strony po tym kroku (index.html)
Krok 14: Kodowanie polskich znaków
Kryteria:
R.2.2 Witrynę internetową zapisano w plikach index.html, mieszamy.html i cena.html oraz zastosowano właściwy standard kodowania polskich znaków przynajmniej na jednej stronie
ok. 1 min
Polecenie z arkusza
Zastosowany standard kodowania polskich znaków
<meta charset="UTF-8"> jako pierwszy element <head>, plik zapisany w UTF-8. Trzy pliki o nazwach z arkusza i kodowanie to R.2.2 - pozostałe dwa powstaną za kilka kroków.
index.html HTML zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> </head> <body> </body> </html>
Podgląd strony po tym kroku (index.html)
Krok 15: Tytuł strony
Kryteria:
R.2.3 Przynajmniej jednej stronie nadano tytuł "malarz”
ok. 1 min
Polecenie z arkusza
Tytuł strony: malarz
<title>malarz</title> - małymi literami, jak w arkuszu.
index.html HTML zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>malarz</title> </head> <body> </body> </html>
Podgląd strony po tym kroku (index.html)
Krok 16: Podpięcie arkusza stylów styl.css
Kryteria:
R.3.6 Przynajmniej jedna strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl.css formatowanie pochodzi jedynie od pliku CSS. Uwaga: kryterium to nie jest spełnione również, gdy zdający źle przypisał co najmniej jeden selektor do bloku (np. kropka zamiast #)
ok. 1 min
Polecenie z arkusza
Połączenie z zewnętrznym stylem CSS o nazwie styl.css
<link rel="stylesheet" href="styl.css"> w <head>. Całe formatowanie idzie do tego pliku - klucz R.3.6 wymaga, żeby pochodziło jedynie z niego.
Typowe błędy
Kropka zamiast # przy identyfikatorze bloku odbiera R.3.6, nawet gdy reszta stylów działa. Atrybut style w HTML-u łamie zasadę „jedynie z pliku CSS”.
index.html HTML zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>malarz</title> <link rel="stylesheet" href="styl.css"> </head> <body> </body> </html>
Podgląd strony po tym kroku (index.html)
Krok 17: Bloki: baner, dwa panele, stopka
Kryteria:
R.2.4 Układ przynajmniej jednej strony zdefiniowano dzieląc ją na bloki: baner, poniżej obok siebie panel lewy i prawy, poniżej stopka. Podział na bloki przy pomocy znaczników sekcji
ok. 2 min
Polecenie z arkusza
Strona podzielona na bloki: baner, poniżej obok siebie panel lewy i prawy, poniżej stopka. Podział na bloki przy pomocy znaczników sekcji
Trzy znaczniki <section> z identyfikatorami banner, left, right i <footer> na stopkę, w kolejności z góry na dół i od lewej. Panele staną obok siebie dopiero po dodaniu stylów (R.2.4).
index.html HTML zmienione: 8 linii
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>malarz</title> <link rel="stylesheet" href="styl.css"> </head> <body> <section id="banner"> </section> <section id="left"> </section> <section id="right"> </section> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (index.html)
Krok 18: Baner: nagłówek-odnośnik „Koszty farby”
Kryteria:
R.3.2 Na przynajmniej jednej stronie wybranie odsyłacza "Koszty farby" prowadzi do strony index.html
ok. 1 min
Polecenie z arkusza
Zawartość banera: nagłówek pierwszego stopnia o treści: „Koszty farby”, który jest odnośnikiem do pliku index.html
<h1>, a w nim odnośnik <a href="index.html"> obejmujący tekst. Ścieżka względna - sama nazwa pliku (R.3.2). Z każdej podstrony nagłówek prowadzi na stronę główną.
Typowe błędy
Ścieżka bezwzględna file:///C:/Users/Egzamin/Desktop/... działa tylko na komputerze zdającego - klucz wymaga ścieżki względnej.
index.html HTML zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>malarz</title> <link rel="stylesheet" href="styl.css"> </head> <body> <section id="banner"> <h1><a href="index.html">Koszty farby</a></h1> </section> <section id="left"> </section> <section id="right"> </section> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (index.html)

Krok 19: Panel lewy: nagłówek

ok. 1 min

Polecenie z arkusza

Zawartość panelu lewego: Nagłówek trzeciego stopnia o treści: „Mieszamy czy wyceniamy?”

Trzeciego stopnia to <h3>.

index.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>malarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </section>
    <section id="left">
        <h3>Mieszamy czy wyceniamy?</h3>
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.html)

Krok 20: Odnośnik „Mieszamy”
Kryteria:
R.3.3 Na przynajmniej jednej stronie wybranie odsyłacza "Mieszamy" prowadzi do strony mieszamy.html
ok. 1 min
Polecenie z arkusza
Odnośnik o treści: „Mieszamy”, prowadzący do strony mieszamy.html
<a href="mieszamy.html"> pod nagłówkiem (R.3.3). Podstrona powstanie za chwilę - do tego czasu odnośnik prowadzi donikąd.
index.html HTML zmienione: 1 linia
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>malarz</title> <link rel="stylesheet" href="styl.css"> </head> <body> <section id="banner"> <h1><a href="index.html">Koszty farby</a></h1> </section> <section id="left"> <h3>Mieszamy czy wyceniamy?</h3> <a href="mieszamy.html">Mieszamy</a> </section> <section id="right"> </section> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (index.html)
Krok 21: W nowej linii odnośnik „Wyceniamy”
Kryteria:
R.3.4 Na przynajmniej jednej stronie wybranie odsyłacza "Wyceniamy" prowadzi do strony cena.html
ok. 1 min
Polecenie z arkusza
W nowej linii odnośnik o treści: „Wyceniamy” prowadzący do strony cena.html
Odnośnik jest elementem w linii, więc dwa odnośniki stanęłyby obok siebie. <br> po pierwszym przenosi drugi do nowej linii, jak na obrazie 1 (R.3.4).
index.html HTML zmienione: 2 linie
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>malarz</title> <link rel="stylesheet" href="styl.css"> </head> <body> <section id="banner"> <h1><a href="index.html">Koszty farby</a></h1> </section> <section id="left"> <h3>Mieszamy czy wyceniamy?</h3> <a href="mieszamy.html">Mieszamy</a><br> <a href="cena.html">Wyceniamy</a> </section> <section id="right"> </section> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (index.html)

Krok 22: Stopka: dwa napisy w osobnych liniach

ok. 1 min

Polecenie z arkusza

Zawartość stopki: dwa napisy w osobnych liniach o treści: „MALARZ” oraz „Stronę opracował:”, dalej wstawiony numer PESEL zdającego

Dwa napisy rozdzielone <br>. Bez akapitów, bo stopka ma mieć tylko 50 px wysokości - marginesy dwóch akapitów <p> by się w niej nie zmieściły. Na egzaminie po dwukropku wpisujesz swój numer PESEL, w tym rozwiązaniu w jego miejscu stoi Bartosz Bryniarski.

index.html HTML zmienione: 2 linie

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>malarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </section>
    <section id="left">
        <h3>Mieszamy czy wyceniamy?</h3>
        <a href="mieszamy.html">Mieszamy</a><br>
        <a href="cena.html">Wyceniamy</a>
    </section>
    <section id="right">
    </section>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.html)

Krok 23: Panel prawy index.html: akapit

ok. 1 min

Polecenie z arkusza

Zawartość panelu prawego podstrony index.html: Paragraf (akapit) o treści: „Strona poświęcona malarstwu:)”

Akapit <p>. Znaki :) na końcu należą do treści.

index.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>malarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </section>
    <section id="left">
        <h3>Mieszamy czy wyceniamy?</h3>
        <a href="mieszamy.html">Mieszamy</a><br>
        <a href="cena.html">Wyceniamy</a>
    </section>
    <section id="right">
        <p>Strona poświęcona malarstwu:)</p>
    </section>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.html)

Krok 24: Panel prawy index.html: obraz

Kryteria:

R.2.6 W bloku prawym strony index.html umieszczono obraz obraz.jpg z tekstem alternatywnym "abstrakcja"

ok. 1 min

Polecenie z arkusza

Obraz obraz.jpg z tekstem alternatywnym o treści: „abstrakcja”

<img> z przeskalowanym plikiem JPEG i atrybutem alt (R.2.6). Strona index.html jest kompletna.

index.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>malarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </section>
    <section id="left">
        <h3>Mieszamy czy wyceniamy?</h3>
        <a href="mieszamy.html">Mieszamy</a><br>
        <a href="cena.html">Wyceniamy</a>
    </section>
    <section id="right">
        <p>Strona poświęcona malarstwu:)</p>
        <img src="obraz.jpg" alt="abstrakcja">
    </section>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.html)

Krok 25: Podstrona mieszamy.html

ok. 2 min

Polecenie z arkusza

Zawartość panelu prawego podstrony mieszamy.html: Paragraf o treści: „Strona w trakcie budowy”

Plik index.html zapisujesz jako mieszamy.html i w panelu prawym zamieniasz akapit z obrazem na jeden akapit. Baner, panel lewy i stopka zostają bez zmian - odnośniki działają z każdej podstrony.

mieszamy.html HTML nowy plik

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>malarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </section>
    <section id="left">
        <h3>Mieszamy czy wyceniamy?</h3>
        <a href="mieszamy.html">Mieszamy</a><br>
        <a href="cena.html">Wyceniamy</a>
    </section>
    <section id="right">
        <p>Strona w trakcie budowy</p>
    </section>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
</body>
</html>

Podgląd strony po tym kroku (mieszamy.html)

Krok 26: Podstrona cena.html: nagłówek
Kryteria:
R.2.5 Na przynajmniej jednej stronie zapisano minimum jeden paragraf (znacznik <p>) oraz nagłówki: h1 "Koszty farby” w banerze, h3 "Mieszamy czy wyceniamy?” w bloku lewym oraz na stronie cena.html h3 „Obliczanie na podstawie powierzchni zapotrzebowania na farbę” w bloku prawym
ok. 2 min
Polecenie z arkusza
Zawartość panelu prawego podstrony cena.html: Nagłówek trzeciego stopnia o treści: „Obliczanie na podstawie powierzchni zapotrzebowania na farbę”
Kolejna kopia index.html - jako cena.html, z nagłówkiem <h3> w panelu prawym. Komplet nagłówków z klucza (<h1> w banerze, <h3> w panelu lewym i ten) oraz akapit to R.2.5.
cena.html HTML nowy plik
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>malarz</title> <link rel="stylesheet" href="styl.css"> </head> <body> <section id="banner"> <h1><a href="index.html">Koszty farby</a></h1> </section> <section id="left"> <h3>Mieszamy czy wyceniamy?</h3> <a href="mieszamy.html">Mieszamy</a><br> <a href="cena.html">Wyceniamy</a> </section> <section id="right"> <h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3> </section> <footer> MALARZ<br> Stronę opracował: Bartosz Bryniarski </footer> </body> </html>
Podgląd strony po tym kroku (cena.html)

Krok 27: Napis i pole na powierzchnię

ok. 2 min

Polecenie z arkusza

Napis o treści: „Podaj powierzchnię:”. Obok pole edycyjne służące do wprowadzenia liczby rzeczywistej, będącej powierzchnią do pomalowania

Napis i zaraz za nim pole - stoją w jednej linii, jak na obrazie 2. Pole liczbowe to <input type="number">, a step="any" pozwala wpisać liczbę rzeczywistą (np. 5,5) - bez tego przeglądarka uznaje za poprawne tylko liczby całkowite. Identyfikator area posłuży skryptowi. <br> przenosi przycisk do nowej linii.

cena.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>malarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </section>
    <section id="left">
        <h3>Mieszamy czy wyceniamy?</h3>
        <a href="mieszamy.html">Mieszamy</a><br>
        <a href="cena.html">Wyceniamy</a>
    </section>
    <section id="right">
        <h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3>
        Podaj powierzchnię: <input type="number" step="any" id="area"><br>
    </section>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
</body>
</html>

Podgląd strony po tym kroku (cena.html)

Krok 28: Przycisk „Policz”

Kryteria:

R.2.7 W bloku prawym strony cena.html umieszczono pole edycyjne oraz przycisk "Policz"

ok. 1 min

Polecenie z arkusza

Poniżej przycisk „Policz”, po jego wybraniu uruchamia się skrypt

<button> poza formularzem - nic nie wysyła, wywoła tylko funkcję skryptu. Pole i przycisk w panelu prawym cena.html to R.2.7.

cena.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>malarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </section>
    <section id="left">
        <h3>Mieszamy czy wyceniamy?</h3>
        <a href="mieszamy.html">Mieszamy</a><br>
        <a href="cena.html">Wyceniamy</a>
    </section>
    <section id="right">
        <h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3>
        Podaj powierzchnię: <input type="number" step="any" id="area"><br>
        <button>Policz</button>
    </section>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
</body>
</html>

Podgląd strony po tym kroku (cena.html)

Krok 29: Miejsce na wynik

ok. 1 min

Polecenie z arkusza

Obliczony wynik jest wyświetlony pod przyciskiem

Pusty akapit result pod przyciskiem - skrypt wpisze do niego wynik.

cena.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>malarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </section>
    <section id="left">
        <h3>Mieszamy czy wyceniamy?</h3>
        <a href="mieszamy.html">Mieszamy</a><br>
        <a href="cena.html">Wyceniamy</a>
    </section>
    <section id="right">
        <h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3>
        Podaj powierzchnię: <input type="number" step="any" id="area"><br>
        <button>Policz</button>
        <p id="result"></p>
    </section>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
</body>
</html>

Podgląd strony po tym kroku (cena.html)

Etap 3: Styl CSS
Kroki 30-35 · po tym etapie masz 30 z 36 kryteriów (pkt)
Krok 30: Baner
ok. 2 min
Polecenie z arkusza
Arkusz CSS zawiera formatowanie dla: banera: kolor tła: #829EB9, wysokość bloku: 80 px, tekst wyśrodkowany, czcionką Arial, margines wewnętrzny górny: 10 px
Nowy plik styl.css. Selektor #banner - krzyżyk, bo to identyfikator. padding-top to margines wewnętrzny tylko z góry. Wysokość height dotyczy treści bloku, więc baner zajmuje na stronie 80 + 10 = 90 px.
styl.css CSS nowy plik
#banner { background-color: #829EB9; height: 80px; text-align: center; font-family: Arial; padding-top: 10px; }
Podgląd strony po tym kroku (index.html)
Krok 31: Panel lewy
ok. 2 min
Polecenie z arkusza
panelu lewego: kolor tła: #B3C6D9, wysokość: bloku 500 px, szerokość: 25%, margines wewnętrzny górny: 100 px, tekst wyśrodkowany, rozmiar czcionki: 20 px
Siedem cech z arkusza, każda jedną właściwością. Margines górny 100 px spycha nagłówek i odnośniki w dół panelu, jak na obrazie 1.
styl.css CSS zmienione: 8 linii
#banner { background-color: #829EB9; height: 80px; text-align: center; font-family: Arial; padding-top: 10px; } #left { background-color: #B3C6D9; height: 500px; width: 25%; padding-top: 100px; text-align: center; font-size: 20px; }
Podgląd strony po tym kroku (index.html)
Krok 32: Panel prawy
Kryteria: , ,
R.4.4 Ustawiono szerokość panelu lewego na 25%, panelu prawego na 75%
R.4.6 Ustawiono rozmiar czcionki 20px dla bloku prawego i lewego
R.4.7 Ustawiono margines wewnętrzny górny (padding-top lub padding: 10px 0 0 0) dla banera na 10px, dla panelu lewego i prawego na 100px
ok. 2 min
Polecenie z arkusza
panelu prawego: kolor tła: #E0E9F1, wysokość bloku 500 px, szerokość: 75%, tekst wyśrodkowany, rozmiar czcionki: 20 px, margines wewnętrzny górny: 100 px
Szerokości 25% i 75% (R.4.4) sumują się do 100% - panele wypełnią całą szerokość, bo nie mają marginesów bocznych. Rozmiar 20 px w obu panelach (R.4.6) i górne marginesy wewnętrzne 10 i 100 px (R.4.7) są ustawione.
styl.css CSS zmienione: 8 linii
#banner { background-color: #829EB9; height: 80px; text-align: center; font-family: Arial; padding-top: 10px; } #left { background-color: #B3C6D9; height: 500px; width: 25%; padding-top: 100px; text-align: center; font-size: 20px; } #right { background-color: #E0E9F1; height: 500px; width: 75%; text-align: center; font-size: 20px; padding-top: 100px; }
Podgląd strony po tym kroku (index.html)
Krok 33: Stopka
Kryteria: , , ,
R.4.1 Ustawiono kolor tła dla banera: #829EB9, panelu lewego: #B3C6D9, panelu prawego: #E0E9F1 oraz żółty dla stopki (dowolny odcień)
R.4.2 Ustawiono wysokość banera 80px, obu paneli 500px i stopki 50px
R.4.3 Ustawiono wyrównanie tekstu do środka dla wszystkich bloków
R.4.5 Ustawiono krój czcionki Arial dla banera i stopki
ok. 2 min
Polecenie z arkusza
stopki: żółty kolor tła, tekst wyśrodkowany, czcionką Arial, wysokość bloku: 50 px
yellow - nazwa koloru (klucz przyjmuje dowolny odcień żółtego). Komplet: tła wszystkich bloków (R.4.1), wysokości 80, 500, 500 i 50 px (R.4.2), wyśrodkowanie we wszystkich blokach (R.4.3) i Arial w banerze i stopce (R.4.5). Panele mają domyślny krój przeglądarki (szeryfowy) - tak jak na obrazie 1.
styl.css CSS zmienione: 6 linii
#banner { background-color: #829EB9; height: 80px; text-align: center; font-family: Arial; padding-top: 10px; } #left { background-color: #B3C6D9; height: 500px; width: 25%; padding-top: 100px; text-align: center; font-size: 20px; } #right { background-color: #E0E9F1; height: 500px; width: 75%; text-align: center; font-size: 20px; padding-top: 100px; } footer { background-color: yellow; text-align: center; font-family: Arial; height: 50px; }
Podgląd strony po tym kroku (index.html)

Krok 34: Obraz: marginesy

Kryteria:

R.4.8 Ustawiono dla selektora obrazu margines zewnętrzny (margin) 30 px, margines wewnętrzny (padding) 10 px

ok. 1 min

Polecenie z arkusza

selektora obrazu: margines zewnętrzny 30 px, margines wewnętrzny 10 px

Selektor znacznika img: margin - odstęp na zewnątrz obrazu, padding - wewnątrz, między zdjęciem a jego krawędzią (R.4.8).

styl.css CSS zmienione: 4 linie

#banner {
    background-color: #829EB9;
    height: 80px;
    text-align: center;
    font-family: Arial;
    padding-top: 10px;
}
#left {
    background-color: #B3C6D9;
    height: 500px;
    width: 25%;
    padding-top: 100px;
    text-align: center;
    font-size: 20px;
}
#right {
    background-color: #E0E9F1;
    height: 500px;
    width: 75%;
    text-align: center;
    font-size: 20px;
    padding-top: 100px;
}
footer {
    background-color: yellow;
    text-align: center;
    font-family: Arial;
    height: 50px;
}
img {
    margin: 30px;
    padding: 10px;
}

Podgląd strony po tym kroku (index.html)

Krok 35: Układ: panele obok siebie
Kryteria:
R.3.1 Układ bloków po uruchomieniu strony w przeglądarce jest w pełni zgodny z obrazem 1 w arkuszu
ok. 2 min
Polecenie z arkusza
Strona podzielona na bloki: baner, poniżej obok siebie panel lewy i prawy, poniżej stopka.
float: left na obu panelach ustawia je obok siebie: lewy przy lewej krawędzi, prawy zaraz za nim,
clear: both w stopce sprowadza ją pod panele.
Zmierzone w Chrome przy szerokości okna 1280 px: baner na całą szerokość, panele 25% i 75% w jednym rzędzie, oba po 600 px wysokości (500 px treści + 100 px marginesu), stopka zaraz pod nimi (R.3.1).
Typowe błędy
Szerokość 25% + 75% bez zapasu działa tylko dlatego, że panele nie mają marginesów i obramowań w poziomie - dodany padding: 10px zamiast padding-top zepchnąłby prawy panel pod lewy.
styl.css CSS zmienione: 6 linii
#banner { background-color: #829EB9; height: 80px; text-align: center; font-family: Arial; padding-top: 10px; } #left { background-color: #B3C6D9; height: 500px; width: 25%; padding-top: 100px; text-align: center; font-size: 20px; } #right { background-color: #E0E9F1; height: 500px; width: 75%; text-align: center; font-size: 20px; padding-top: 100px; } footer { background-color: yellow; text-align: center; font-family: Arial; height: 50px; } img { margin: 30px; padding: 10px; } #left, #right { float: left; } footer { clear: both; }
Podgląd strony po tym kroku (index.html)

Etap 4: Skrypt JavaScript

Kroki 36-40 · po tym etapie masz 36 z 36 kryteriów (pkt)

Krok 36: Funkcja calculate uruchamiana przyciskiem

Kryteria: ,

R.3.5 Wybranie przycisku powoduje uruchomienie funkcji ze skryptu

R.5.1 Skrypt napisano w języku JavaScript, zawiera on przynajmniej jedną instrukcję języka zgodną ze składnią

ok. 2 min

Polecenie z arkusza

Skrypt jest wykonywany po stronie przeglądarki, na podstronie cena.html

Skrypt w JavaScript, w znaczniku <script> na końcu <body> strony cena.html. Funkcja calculate() jest na razie pusta, a przycisk dostaje onclick="calculate()" - zdarzenie z tabeli 2 arkusza (R.3.5, R.5.1).

Typowe błędy

onclick="calculate" bez nawiasów nie wywoła funkcji.

cena.html HTML zmienione: 5 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>malarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </section>
    <section id="left">
        <h3>Mieszamy czy wyceniamy?</h3>
        <a href="mieszamy.html">Mieszamy</a><br>
        <a href="cena.html">Wyceniamy</a>
    </section>
    <section id="right">
        <h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3>
        Podaj powierzchnię: <input type="number" step="any" id="area"><br>
        <button onclick="calculate()">Policz</button>
        <p id="result"></p>
    </section>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
    <script>
        function calculate() {
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (cena.html)

Krok 37: Odczyt powierzchni z pola

Kryteria:

R.5.2 Skrypt pobiera z pola edycyjnego wielkość powierzchni do pomalowania

ok. 2 min

Polecenie z arkusza

Skrypt pobiera z pola edycyjnego wielkość powierzchni do pomalowania

.value pola zwraca to, co wpisał użytkownik, jako tekst - na przykład "5.5". Zapamiętuje to zmienna area (R.5.2).

cena.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>malarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </section>
    <section id="left">
        <h3>Mieszamy czy wyceniamy?</h3>
        <a href="mieszamy.html">Mieszamy</a><br>
        <a href="cena.html">Wyceniamy</a>
    </section>
    <section id="right">
        <h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3>
        Podaj powierzchnię: <input type="number" step="any" id="area"><br>
        <button onclick="calculate()">Policz</button>
        <p id="result"></p>
    </section>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
    <script>
        function calculate() {
            var area = document.getElementById('area').value;
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (cena.html)

Krok 38: Ile litrów farby: powierzchnia przez 4

Kryteria:

R.5.3 Skrypt oblicza minimalną liczbę puszek wystarczających do pomalowania pobranej powierzchni. Jedna puszka zawiera 1 litr farby, 1 litr farby wystarcza na pomalowanie 4 m2 powierzchni

ok. 2 min

Polecenie z arkusza

Na podstawie tej wartości wylicza minimalną liczbę puszek wystarczających do pomalowania tej powierzchni, wiedząc, że: Jedna puszka zawiera 1 litr farby. 1 litr farby wystarcza do pomalowania powierzchni 4 m2

Litr maluje 4 m², więc potrzeba area / 4 litrów - a ponieważ puszka ma jeden litr, to też liczba puszek przed zaokrągleniem (R.5.3). Operator / sam zamienia tekst "5.5" na liczbę: wynik to 1,375.

cena.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>malarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </section>
    <section id="left">
        <h3>Mieszamy czy wyceniamy?</h3>
        <a href="mieszamy.html">Mieszamy</a><br>
        <a href="cena.html">Wyceniamy</a>
    </section>
    <section id="right">
        <h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3>
        Podaj powierzchnię: <input type="number" step="any" id="area"><br>
        <button onclick="calculate()">Policz</button>
        <p id="result"></p>
    </section>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
    <script>
        function calculate() {
            var area = document.getElementById('area').value;
            var litres = area / 4;
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (cena.html)

Krok 39: Zaokrąglenie w górę: Math.ceil

Kryteria:

R.5.4 Obliczona liczba puszek jest liczbą całkowitą, zawsze zaokrągloną do góry (dowolną metodą), należy sprawdzić dla liczb dodatnich

ok. 2 min

Polecenie z arkusza

Obliczona liczba puszek musi być liczbą całkowitą (zaokrąglona do góry). Np. do pomalowania powierzchni 6 m2, potrzeba 2 puszek, a nie 1 i pół.

Math.ceil zaokrągla zawsze w górę: 1,5 → 2, 1,375 → 2, ale 1 zostaje 1. Math.round dałby przy 5 m² (1,25) jedną puszkę - za mało farby (R.5.4).

Typowe błędy

Math.round i parseInt nie spełniają R.5.4 - zaokrąglają w dół części wyników.

cena.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>malarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </section>
    <section id="left">
        <h3>Mieszamy czy wyceniamy?</h3>
        <a href="mieszamy.html">Mieszamy</a><br>
        <a href="cena.html">Wyceniamy</a>
    </section>
    <section id="right">
        <h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3>
        Podaj powierzchnię: <input type="number" step="any" id="area"><br>
        <button onclick="calculate()">Policz</button>
        <p id="result"></p>
    </section>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
    <script>
        function calculate() {
            var area = document.getElementById('area').value;
            var litres = area / 4;
            var cans = Math.ceil(litres);
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (cena.html)

Krok 40: Wynik pod przyciskiem

Kryteria:

R.5.5 Pod przyciskiem wyświetlony jest wynik działania skryptu, w postaci tekstu: „Liczba jednolitrowych puszek farby potrzebnych do pomalowania wynosi: <wynik>”, gdzie <wynik> został obliczony skryptem

ok. 2 min

Polecenie z arkusza

Obliczony wynik jest wyświetlony pod przyciskiem, a jego treść to: „Liczba jednolitrowych puszek farby potrzebnych do pomalowania wynosi: ”, dalej wstawiony obliczony skryptem wynik

Akapit result dostaje przez innerHTML stały napis sklejony operatorem + z liczbą puszek (R.5.5).

Sprawdzone w Chrome: 5,5 m² → 2 (jak na obrazie 2), 6 → 2, 4 → 1, 4,01 → 2, 0,1 → 1, 13 → 4, 100 → 25. Wpisz powierzchnię w podglądzie i kliknij „Policz”.

cena.html HTML zmienione: 1 linia

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>malarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </section>
    <section id="left">
        <h3>Mieszamy czy wyceniamy?</h3>
        <a href="mieszamy.html">Mieszamy</a><br>
        <a href="cena.html">Wyceniamy</a>
    </section>
    <section id="right">
        <h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3>
        Podaj powierzchnię: <input type="number" step="any" id="area"><br>
        <button onclick="calculate()">Policz</button>
        <p id="result"></p>
    </section>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
    <script>
        function calculate() {
            var area = document.getElementById('area').value;
            var litres = area / 4;
            var cans = Math.ceil(litres);
            document.getElementById('result').innerHTML = 'Liczba jednolitrowych puszek farby potrzebnych do pomalowania wynosi: ' + cans;
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (cena.html)

Etap 5: Dobre praktyki (poza kluczem)
Kroki 41-42 · po tym etapie masz 36 z 36 kryteriów (pkt)
Krok 41: Klucz obcy odrzuca nieistniejącą farbę
ok. 2 min
Polecenie z arkusza
id_farby (klucz obcy wiążący do tabeli farby)
Klucz obcy to zabezpieczenie spójności danych, nie ozdoba schematu. Sprawdzone na bazie z tego rozwiązania - próba zapisania malowania farbą numer 9, której nie ma w tabeli farby:
INSERT INTO malowanie VALUES (6, 1, 9, 2);
kończy się błędem ERROR 1452 (23000): Cannot add or update a child row: a foreign key constraint fails … i wiersz nie trafia do tabeli. Bez klucza obcego zapis by przeszedł, a kwerenda 3 dla pomieszczenia 6 nie zwróciłaby żadnego koloru - błąd wyszedłby dopiero przy wycenie. Tak samo nie da się usunąć farby, która jest użyta w malowaniu. W tabelach powiązanych zawsze zakładaj klucz obcy - na egzaminie i tak go wymaga arkusz.
Podgląd strony po tym kroku (cena.html)

Krok 42: Nie ufaj danym z pola: sprawdzenie i textContent

ok. 3 min

Polecenie z arkusza

Skrypt pobiera z pola edycyjnego wielkość powierzchni do pomalowania

Wersja z kluczem przyjmuje wszystko, co jest w polu. Sprawdzone w Chrome: po wpisaniu -8 strona pisze „…wynosi: -2”, a przy pustym polu „…wynosi: 0” - wynik bez sensu, który ktoś może przepisać do zamówienia. Zasada bezpieczeństwa „nie ufaj danym wejściowym” dotyczy każdego pola: zanim liczba trafi do obliczeń, sprawdź ją.

area === '' - puste pole (pole liczbowe zwraca pusty napis także wtedy, gdy wpisano coś, co nie jest liczbą),
!(area > 0) - zero i liczby ujemne,
return - kończy funkcję po komunikacie, obliczenie się nie wykona.

Wynik i komunikat są wstawiane przez textContent zamiast innerHTML - tekst trafia na stronę dosłownie i nie zostanie zinterpretowany jako HTML, gdyby kiedyś zawierał dane od użytkownika. Stara linia zostaje w komentarzu; dla poprawnych powierzchni wyniki są takie same jak wcześniej. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

cena.html HTML zmienione: 7 linii

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>malarz</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </section>
    <section id="left">
        <h3>Mieszamy czy wyceniamy?</h3>
        <a href="mieszamy.html">Mieszamy</a><br>
        <a href="cena.html">Wyceniamy</a>
    </section>
    <section id="right">
        <h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3>
        Podaj powierzchnię: <input type="number" step="any" id="area"><br>
        <button onclick="calculate()">Policz</button>
        <p id="result"></p>
    </section>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
    <script>
        function calculate() {
            var area = document.getElementById('area').value;
            var result = document.getElementById('result');
            if (area === '' || !(area > 0)) {
                result.textContent = 'Podaj powierzchnię większą od zera.';
                return;
            }
            var litres = area / 4;
            var cans = Math.ceil(litres);
            // document.getElementById('result').innerHTML = 'Liczba jednolitrowych puszek farby potrzebnych do pomalowania wynosi: ' + cans;
            result.textContent = 'Liczba jednolitrowych puszek farby potrzebnych do pomalowania wynosi: ' + cans;
        }
    </script>
</body>
</html>

Podgląd strony po tym kroku (cena.html)

Etap 6: Oddanie pracy
Krok 43 · po tym etapie masz 36 z 36 kryteriów (pkt)
Krok 43: Plik przeglądarka.txt i nagranie płyty
ok. 5 min
Polecenie z arkusza
Po zakończeniu pracy utwórz w folderze z numerem PESEL plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz strony.
W folderze z numerem PESEL muszą być: cena.html, dane_farby.jpg, dane_malowanie.jpg, index.html, kw1.jpg - kw3.jpg, kwerendy.txt, malarz.sql, mieszamy.html, obraz.jpg, przeglądarka.txt, struktura_farby.jpg, struktura_malowanie.jpg i styl.css. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem PESEL.
przeglądarka.txt Tekst nowy plik
Google Chrome
Podgląd strony bez zmian - taki jak po kroku 42.

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.

Rozwiązanie krok po kroku: Koszty farby i kalkulator puszek (Wersja podstawowa)

Etap 1: Baza danych

Krok 1: Folder zdającego i archiwum egzamin1.zip

Krok 2: Baza malarz

Krok 3: Tabela farby: cztery kolumny i klucz podstawowy

Krok 4: Tabela malowanie: klucz podstawowy z dwóch pól

Krok 5: Klucz obcy id_farby do tabeli farby

Krok 6: Dane tabeli farby z tabeli 1

Krok 7: Import malowanie.txt do tabeli malowanie

Krok 8: Kwerenda 1: cena niebieskiej farby

Krok 9: Kwerenda 2: kolor i cena jednego litra

Krok 10: Kwerenda 3: kolory farb w pomieszczeniu 3

Krok 11: Eksport bazy do pliku malarz.sql

Etap 2: Grafika i strona HTML

Krok 12: Grafika: obraz.jpg 200 × 200 px

Krok 13: Plik index.html

Krok 14: Kodowanie polskich znaków

Krok 15: Tytuł strony

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

Krok 17: Bloki: baner, dwa panele, stopka

Krok 18: Baner: nagłówek-odnośnik „Koszty farby”

Krok 19: Panel lewy: nagłówek

Krok 20: Odnośnik „Mieszamy”

Krok 21: W nowej linii odnośnik „Wyceniamy”

Krok 22: Stopka: dwa napisy w osobnych liniach

Krok 23: Panel prawy index.html: akapit

Krok 24: Panel prawy index.html: obraz

Krok 25: Podstrona mieszamy.html

Krok 26: Podstrona cena.html: nagłówek

Krok 27: Napis i pole na powierzchnię

Krok 28: Przycisk „Policz”

Krok 29: Miejsce na wynik

Etap 3: Styl CSS

Krok 30: Baner

Krok 31: Panel lewy

Krok 32: Panel prawy

Krok 33: Stopka

Krok 34: Obraz: marginesy

Krok 35: Układ: panele obok siebie

Etap 4: Skrypt JavaScript

Krok 36: Funkcja calculate uruchamiana przyciskiem

Krok 37: Odczyt powierzchni z pola

Krok 38: Ile litrów farby: powierzchnia przez 4

Krok 39: Zaokrąglenie w górę: Math.ceil

Krok 40: Wynik pod przyciskiem

Etap 5: Dobre praktyki (poza kluczem)

Krok 41: Klucz obcy odrzuca nieistniejącą farbę

Krok 42: Nie ufaj danym z pola: sprawdzenie i textContent

Etap 6: Oddanie pracy

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

Podgląd