ZAWODNIK

Egzamin praktyczny: strona według makiety i arkusz CSS

INF.03 · teoria
autor: redakcja · 09.09.2026
Dwa oceniane rezultaty krok po kroku: plik .php z rysunku układu (HTML5, język, kodowanie, znaczniki sekcji, obrazy z alt, tabela, formularz POST) i zewnętrzny arkusz styl_1.css z kolorami, wymiarami, marginesami, box-shadow, border-collapse i float. Lekcja 13.3 kursu INF.03.
Po tej lekcji zbu­du­jesz plik strony z ry­sun­ku układu w ar­ku­szu i na­pi­szesz do niego ze­wnętrz­ny arkusz stylów, czyli dwa z pięciu oce­nia­nych re­zul­ta­tów: „za­war­tość wi­try­ny in­ter­ne­to­wej" (w innych ar­ku­szach „wygląd wi­try­ny in­ter­ne­to­wej") oraz „styl CSS wi­try­ny in­ter­ne­to­wej". Wy­ma­ga­nia są w ar­ku­szu wy­pi­sa­ne punkt po punk­cie i tak samo, punkt po punk­cie, są spraw­dza­ne, więc po­mi­nię­ty tekst al­ter­na­tyw­ny obrazu znika z re­zul­ta­tu tak samo jak cała bra­ku­ją­ca sekcja. Teorii nie ma tu od nowa: HTML jest w dziale 3, CSS w dziale 4, a ta lekcja mówi, w jakiej ko­lej­no­ści to po­skła­dać i które słowa ar­ku­sza są do­słow­ny­mi wy­ma­ga­nia­mi. Pliki, folder na­zwa­ny nu­me­rem PESEL i płytę opi­su­je ana­to­mia za­da­nia.

Gra­fi­ka, zanim po­wsta­nie strona

Arkusz zwykle wtrąca jedno krót­kie za­da­nie z edy­to­ra gra­fi­ki ra­stro­wej i robi się je przed pi­sa­niem strony, bo gotowy plik jest potem po­trzeb­ny w kodzie. Brzmi ono na przy­kład tak: plik ryba1.jpg należy prze­ska­lo­wać z za­cho­wa­niem pro­por­cji tak, aby jego sze­ro­kość wy­no­si­ła do­kład­nie 400 px. W GIMP-ie robi to Obraz, potem Skaluj obraz: wpi­su­jesz 400 w polu sze­ro­ko­ści i spraw­dzasz, czy ikona łań­cu­cha obok pól jest za­mknię­ta, bo wtedy wy­so­kość prze­li­czy się sama i pro­por­cje zo­sta­ną za­cho­wa­ne. Zapis idzie przez Plik, potem Wy­eks­por­tuj jako, pod nazwą i w for­ma­cie po­da­nym w ar­ku­szu, po­nie­waż zwykłe Zapisz tworzy plik .xcf, któ­re­go prze­glą­dar­ka nie otwo­rzy.
Zmniej­sze­nie obrazu atry­bu­tem width w znacz­ni­ku albo wła­ści­wo­ścią CSS nie jest wy­ko­na­niem tego po­le­ce­nia. Oce­nia­ny jest plik leżący na dysku i jego rze­czy­wi­sty roz­miar w pik­se­lach, a nie to, jak duży wy­glą­da na stro­nie.

Plik strony i głowa do­ku­men­tu

Nazwa pliku stoi w ar­ku­szu i jest do­słow­na: noclegi.php w za­da­niu o biurze tu­ry­stycz­nym, wedkuj.php w za­da­niu o por­ta­lu dla węd­ka­rzy. Roz­sze­rze­nie .php plik do­sta­je od razu, choć pierw­sza wersja strony to czysty HTML, bo Apache po samym roz­sze­rze­niu roz­strzy­ga, czy prze­pu­ścić plik przez in­ter­pre­ter PHP. Kod PHP do­pi­sa­ny póź­niej do pliku .html nie wykona się, tylko zo­sta­nie w źródle strony, a zmiana nazwy pliku na końcu za­da­nia psuje wszyst­ko, co się już do niej od­wo­ły­wa­ło.
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Portal dla wędkarzy</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
</body>
</html>
Pięć wier­szy głowy od­po­wia­da pięciu osob­nym wy­ma­ga­niom ar­ku­sza. De­kla­ra­cja <!DOCTYPE html> to „na­pi­sa­na w języku HTML 5", bez niej do­ku­ment nie jest tym, o co arkusz prosi. Atry­but lang="pl" to „za­de­kla­ro­wa­ny język dla wi­try­ny: polski". Znacz­nik <meta charset="utf-8"> to „jawnie za­sto­so­wa­ny wła­ści­wy stan­dard ko­do­wa­nia pol­skich znaków", a słowo „jawnie" znaczy, że po­praw­nie wy­świe­tlo­ne litery nie wy­star­czą: de­kla­ra­cja ma być w kodzie, a edytor musi za­pi­sy­wać plik w tym samym ko­do­wa­niu, które ta de­kla­ra­cja podaje. Za­war­tość <title> to tytuł wi­docz­ny na karcie prze­glą­dar­ki. Znacz­nik <link> do­łą­cza ZEWNĘTRZNY arkusz o nazwie z ar­ku­sza, na przy­kład styl_1.css, i ten sam wygląd uzy­ska­ny znacz­ni­kiem <style> w głowie albo atry­bu­tem style przy ele­men­cie nie jest tym samym wy­ma­ga­niem. Budowę głowy do­kład­niej opi­su­je lekcja o szkie­le­cie do­ku­men­tu, a trzy spo­so­by do­łą­cza­nia stylów lekcja o do­łą­cza­niu i ka­ska­dzie.

Bloki z ry­sun­ku układu

Arkusz daje obraz układu: pro­sto­ką­ty z pod­pi­sa­mi w ro­dza­ju baner, menu, blok lewy, blok prawy, stopka. Prze­pi­su­jesz go na znacz­ni­ki sekcji jeden do jed­ne­go, w tej samej ko­lej­no­ści i z tym samym za­gnież­dże­niem. Pro­sto­kąt na­ry­so­wa­ny we­wnątrz dru­gie­go to znacz­nik we­wnątrz znacz­ni­ka, a dwa pro­sto­ką­ty sto­ją­ce na ry­sun­ku obok siebie to dwa znacz­ni­ki ro­dzeń­stwa: roz­sta­wia je do­pie­ro CSS, w HTML-u stoją jeden pod drugim.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
<header>
<h1>Portal dla wędkarzy</h1>
</header>
<nav>
<a href="zawody.html">Zawody</a>
</nav>
<main>
<section>
<h3>Ostatnie połowy</h3>
<img src="ryba1.jpg" alt="Szczupak złowiony na jeziorze">
</section>
<article>
<h4>Zapisy</h4>
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</article>
</main>
<footer>Numer zdającego</footer>
</body>
Po­zio­my na­głów­ków arkusz podaje wprost i prze­pi­su­je się je do­słow­nie, nawet gdy prze­skok z h1 na h3 z po­mi­nię­ciem h2 wy­glą­da dziw­nie. Każdy obraz do­sta­je atry­but alt (tekst al­ter­na­tyw­ny) z opisem tego, co widać, bo arkusz wymaga ob­ra­zów „z tek­stem al­ter­na­tyw­nym", a pusty cu­dzy­słów opisem nie jest. Tabela ma do­kład­nie tyle wier­szy i kolumn, ile podaje arkusz: „tabela o dwóch wier­szach i dwóch ko­lum­nach" to dwa znacz­ni­ki <tr>, a w każdym dwa <td>. Ko­mór­ki zo­sta­ją puste, jeśli mają je wy­peł­nić skryp­ty, co robi już lekcja o skryp­tach PHP i JS. Listy, tabele i od­no­śni­ki opi­su­je osobna lekcja HTML.
1
2
3
4
5
6
7
<button onclick="zmienKolory()">Zmień kolory</button>
<form action="wedkuj.php" method="post">
<input type="number" name="dlugosc">
<input type="submit" value="Wyślij">
<input type="reset" value="Kasuj">
</form>
Przy­cisk uru­cha­mia­ją­cy skrypt to <button> albo <input type="button"> z atry­bu­tem onclick wska­zu­ją­cym funk­cję. For­mu­larz idzie metodą POST do TEJ SAMEJ strony, więc w atry­bu­cie action stoi nazwa pliku, w którym ten for­mu­larz się znaj­du­je. Metoda musi być za­pi­sa­na wprost, bo do­myśl­na jest GET, a war­to­ści szłyby wtedy w ad­re­sie za­miast w treści żą­da­nia. Każde pole ma atry­but name, po­nie­waż to on jest klu­czem w ta­bli­cy $_POST i pole bez niego nie doj­dzie do skryp­tu; szcze­gó­ły w lek­cjach o for­mu­la­rzach HTML i for­mu­la­rzach w PHP. Przy­cisk ka­su­ją­cy to reset, który czyści pola, a nie zwykły button. Na końcu strony stoi stopka z tre­ścią podaną w ar­ku­szu, zwykle danymi kon­tak­to­wy­mi albo nu­me­rem zda­ją­ce­go, prze­pi­sa­ną co do znaku.

Arkusz styl_1.css

Arkusz stylów to osobny plik tek­sto­wy w tym samym ka­ta­lo­gu co strona, o nazwie do­kład­nie takiej, jaka stoi w znacz­ni­ku <link>. Arkusz eg­za­mi­na­cyj­ny często dodaje wa­ru­nek: style mają po­wstać „wy­łącz­nie przy pomocy se­lek­to­ra dla danego znacz­ni­ka". Se­lek­to­rem jest wtedy sama nazwa znacz­ni­ka, czyli body, nav, table, footer, a klasa .menu i iden­ty­fi­ka­tor #menu łamią to zdanie nawet wtedy, gdy dają iden­tycz­ny wygląd. Wynika z tego pod­po­wiedź do po­przed­niej części za­da­nia: skoro dwa bloki mają wy­glą­dać różnie, muszą być zbu­do­wa­ne z róż­nych znacz­ni­ków. Ro­dza­je se­lek­to­rów po­rów­nu­je lekcja o se­lek­to­rach CSS.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
font-family: Helvetica;
background-color: #EFEFEF;
width: 80%;
margin: auto;
}
header {
height: 150px;
background-color: #00838F;
padding: 10px;
border-radius: 5px;
box-shadow: 5px 5px 10px gray;
}
Kolory arkusz podaje w jednym z dwóch za­pi­sów i prze­pi­su­je się ten, który jest w treści: na­zwa­mi CSS, jak DeepSkyBlue, Tomato i Maroon, albo szes­nast­ko­wo, jak #00838F, #EFEFEF i #4FB3BF. Zbli­żo­ny odcień do­bra­ny na oko jest inną war­to­ścią. Wy­so­ko­ści idą w pik­se­lach, bo piksel to stała liczba punk­tów ekranu, a sze­ro­ko­ści w pro­cen­tach, bo pro­cent liczy się od sze­ro­ko­ści ro­dzi­ca i blok zwęża się razem z oknem; jed­nost­ki zbiera lekcja o ko­lo­rach i jed­nost­kach. Wła­ści­wość margin (mar­gi­nes ze­wnętrz­ny) odsuwa blok od są­sia­dów, padding (mar­gi­nes we­wnętrz­ny) odsuwa treść od kra­wę­dzi bloku i my­le­nie ich dwóch jest w tym re­zul­ta­cie naj­częst­sze; ry­su­nek obu jest w lekcji o modelu pu­deł­ko­wym. Zapis margin: auto to ar­ku­szo­we „mar­gi­ne­sy wy­li­cza­ne au­to­ma­tycz­nie": prze­glą­dar­ka dzieli wolne miej­sce po równo na lewo i prawo, więc blok staje na środku, ale tylko wtedy, gdy ma podaną sze­ro­kość mniej­szą od ro­dzi­ca. Wła­ści­wość border-radius (pro­mień ob­ra­mo­wa­nia) za­okrą­gla na­roż­ni­ki, a box-shadow (cień pu­deł­ka) rysuje cień i jego skład­nię arkusz podaje w treści za­da­nia: prze­su­nię­cie w po­zio­mie, prze­su­nię­cie w pionie, roz­my­cie i kolor. Cienie i tła sze­rzej opi­su­je lekcja o tłach i cie­niach.
1
2
3
4
5
6
7
8
9
10
11
12
13
table, td {
border: 1px solid Maroon;
border-collapse: collapse;
}
img {
float: left;
margin: 10px;
}
tr:hover {
background-color: DeepSkyBlue;
}
Zapis border-collapse: collapse (scal ob­ra­mo­wa­nie) łączy ramkę tabeli z ram­ka­mi ko­mó­rek w jedną linię i to jest do­kład­nie to, co arkusz nazywa ob­ra­mo­wa­niem „po­łą­czo­nym". Bez niego widać po­dwój­ne kreski z od­stę­pem. Ob­ra­mo­wa­nie trzeba przy tym nadać i tabeli, i ko­mór­kom, bo border na samym table ob­ry­su­je wy­łącz­nie ze­wnętrz­ną kra­wędź. Wła­ści­wość float (opły­wa­nie) wyj­mu­je obraz z nor­mal­ne­go biegu tekstu i dosuwa do kra­wę­dzi bloku, a tekst układa się obok; tak re­ali­zu­je się ar­ku­szo­we „ob­te­ka­nie" i opi­su­je to lekcja o di­splay, po­si­tion i float. Zapis tr:hover to pseu­do­kla­sa :hover (na­je­cha­nie), czyli jedyne w tym ar­ku­szu od­stęp­stwo od sty­lo­wa­nia samym znacz­ni­kiem; arkusz prosi o nią sło­wa­mi o zmia­nie tła wier­sza po na­je­cha­niu kur­so­rem, a listę pseu­do­klas zbiera osobna lekcja.

Spraw­dze­nie w prze­glą­dar­ce

Stronę otwie­rasz ad­re­sem http://localhost/wedkuj.php, a nie po­dwój­nym klik­nię­ciem pliku, bo tylko wtedy prze­cho­dzi ona przez serwer i póź­niej­sze skryp­ty PHP w ogóle się wy­ko­na­ją. Ry­su­nek układu z ar­ku­sza kła­dziesz obok okna i po­rów­nu­jesz blok po bloku: ko­lej­ność, sze­ro­ko­ści, kolory, za­okrą­gle­nia, cień. Po każdej zmia­nie w pliku CSS od­świe­żasz stronę z po­mi­nię­ciem pa­mię­ci pod­ręcz­nej, bo prze­glą­dar­ka trzyma po­przed­nią wersję ar­ku­sza i po­tra­fi po­ka­zy­wać stary wygląd mimo po­pra­wio­ne­go pliku. Na koniec spraw­dzasz pol­skie znaki w tek­ście i to, czy obrazy się wy­świe­tla­ją, bo bra­ku­ją­cy plik gra­ficz­ny i li­te­rów­ka w nazwie pliku CSS wy­glą­da­ją z ze­wnątrz po­dob­nie: strona po prostu wy­glą­da ina­czej, niż po­win­na.

Gdzie traci się punkty

  • ›
    Plik za­pi­sa­ny jako .html albo pod nazwą inną niż podana w ar­ku­szu.
  • ›
    Brak <!DOCTYPE html>, brak lang w znacz­ni­ku <html> albo brak <meta charset>.
  • ›
    De­kla­ra­cja ko­do­wa­nia jest, ale edytor za­pi­sał plik w innym ko­do­wa­niu i za­miast pol­skich liter na stro­nie stoją znaki za­py­ta­nia.
  • ›
    Style wpi­sa­ne w <style> w głowie albo w atry­bu­cie style przy ele­men­cie za­miast w pliku ze­wnętrz­nym.
  • ›
    Li­te­rów­ka w nazwie pliku w znacz­ni­ku <link>: arkusz CSS jest na­pi­sa­ny dobrze, a strona wy­glą­da tak, jakby go nie było.
  • ›
    Bloki zbu­do­wa­ne ze znacz­ni­ków <div>, gdy arkusz każe je wy­ko­nać „za pomocą znacz­ni­ków sekcji".
  • ›
    Inne po­zio­my na­głów­ków niż wska­za­ne w ar­ku­szu.
  • ›
    Obraz bez atry­bu­tu alt albo z atry­bu­tem pustym.
  • ›
    Tabela o innej licz­bie wier­szy lub kolumn niż zadana.
  • ›
    For­mu­larz wy­sy­ła­ny metodą GET, kie­ro­wa­ny do innego pliku niż ta sama strona albo z polem bez atry­bu­tu name.
  • ›
    Klasy i iden­ty­fi­ka­to­ry w CSS tam, gdzie arkusz żąda sty­lo­wa­nia wy­łącz­nie se­lek­to­rem znacz­ni­ka.
  • ›
    Kolor do­bra­ny na oko za­miast war­to­ści po­da­nej w ar­ku­szu.
  • ›
    Wy­so­kość podana w pro­cen­tach, a sze­ro­kość w pik­se­lach, czyli od­wrot­nie niż w wy­ma­ga­niu.
  • ›
    Zapis margin: auto na bloku bez usta­wio­nej sze­ro­ko­ści, przez co nic się nie cen­tru­je.
  • ›
    Obraz zmniej­szo­ny wła­ści­wo­ścią CSS za­miast prze­ska­lo­wa­ny w edy­to­rze gra­fi­ki.
  • ›
    Po­mi­nię­ta stopka albo treść stopki inna niż w ar­ku­szu.

Ściąga

Wy­ma­ga­nie z ar­ku­sza
Zapis
na­pi­sa­na w języku HTML 5
<!DOCTYPE html>
za­de­kla­ro­wa­ny język strony
<html lang="pl">
jawne ko­do­wa­nie pol­skich znaków
<meta charset="utf-8">
tytuł na karcie prze­glą­dar­ki
<title>Portal</title>
do­łą­czo­ny ze­wnętrz­ny arkusz
<link rel="stylesheet" href="styl_1.css">
po­dział za pomocą znacz­ni­ków sekcji
header, nav, main, section, article, aside, footer
obraz z tek­stem al­ter­na­tyw­nym
<img src="ryba1.jpg" alt="opis">
tabela dwa na dwa
dwa <tr>, w każdym dwa <td>
przy­cisk uru­cha­mia­ją­cy skrypt
<button onclick="funkcja()">
for­mu­larz POST do tej samej strony
<form action="wedkuj.php" method="post">
przy­cisk wy­sy­ła­ją­cy i ka­su­ją­cy
<input type="submit">, <input type="reset">
styl tylko se­lek­to­rem znacz­ni­ka
nav { }, nigdy .menu { }
kolor nazwą CSS lub szes­nast­ko­wo
Tomato, #00838F
wy­so­kość w px, sze­ro­kość w %
height: 150px; width: 80%;
mar­gi­nes ze­wnętrz­ny i we­wnętrz­ny
margin: 10px; padding: 10px;
mar­gi­ne­sy wy­li­cza­ne au­to­ma­tycz­nie
margin: auto; przy po­da­nej sze­ro­ko­ści
za­okrą­gle­nie na­roż­ni­ków
border-radius: 5px;
cień bloku
box-shadow: 5px 5px 10px gray;
ob­ra­mo­wa­nie tabeli po­łą­czo­ne
border-collapse: collapse; na table
ob­te­ka­nie obrazu tek­stem
float: left;
zmiana tła wier­sza po na­je­cha­niu
tr:hover { background-color: DeepSkyBlue; }
ska­lo­wa­nie obrazu z pro­por­cja­mi
edytor gra­fi­ki, sze­ro­kość 400 px, za­mknię­ty łań­cuch
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: Egzamin praktyczny: baza w phpMyAdmin i cztery kwerendynastępna: Egzamin praktyczny: skrypt PHP z bazą i skrypt JavaScriptspis działu: Egzamin praktyczny INF.03

[ INF.03: INNE ARTYKUŁY ]

Hub INF.03Zakres materiałuBazy danych i SQL na egzaminie INF.03CSS na egzaminie INF.03Formularze HTML na egzaminie INF.03Grafika i multimedia na egzaminie INF.03HTML na egzaminie INF.03pokaż więcej (51)
ZAWODNIK
egzamin zawodowy INF.02 · INF.03 · INF.04
Serwer Discord›
Egzaminy zawodowe IT/Matury/Studia
@yastor
Polityka prywatnościRegulamin
© 2026 Zawodnik · by Yastor
Arkusze i zasady oceniania pochodzą z CKE. Serwis nie jest powiązany z Centralną Komisją Egzaminacyjną.