ZAWODNIK

Projekt strony: układ sekcji, makieta, paleta barw, czcionki

INF.03 · teoria
autor: redakcja · 02.11.2026
Od wymagań do makiety sklepu: analiza układu, semantyczna struktura, paleta, typografia i sprawdzenie zgodności z projektem. Przełożenie opisu arkusza na HTML i CSS. Lekcja 6.1 kursu INF.03.
Pro­jekt strony to opis jej treści, układu i wy­glą­du, na pod­sta­wie któ­re­go po­wsta­je gotowa wi­try­na. Na eg­za­mi­nie pi­sem­nym roz­po­zna­jesz struk­tu­rę i zasady doboru ele­men­tów, a w prak­ty­ce prze­kła­dasz ma­kie­tę oraz wy­ma­ga­nia tek­sto­we na HTML i CSS. Za­czy­na­my od tego, co ma zna­leźć się na stro­nie sklepu i jakie za­da­nie ma wy­ko­nać od­bior­ca, zanim do­bie­rze­my kolory.

Wy­ma­ga­nia i ana­li­za pro­jek­tu

Wy­ma­ga­nie okre­śla kon­kret­ny re­zul­tat, który można spraw­dzić. „Strona ma być ładna” po­zo­sta­wia wiele in­ter­pre­ta­cji. „Na­głó­wek za­wie­ra nazwę sklepu, panel boczny listę ka­te­go­rii, a blok główny for­mu­larz za­mó­wie­nia” wska­zu­je ele­men­ty, które muszą ist­nieć. W za­da­niu eg­za­mi­na­cyj­nym wy­ma­ga­niem jest także nazwa pliku, sposób do­łą­cze­nia CSS i użycie okre­ślo­ne­go se­lek­to­ra, nawet jeżeli inny zapis dałby po­dob­ny wygląd.
Po­dziel opis na treść, struk­tu­rę, wygląd oraz dzia­ła­nie. Treść to między innymi nazwy pro­duk­tów i napisy przy­ci­sków. Struk­tu­ra mówi, które ele­men­ty są obok siebie i do jakiej sekcji należą. Wygląd okre­śla wy­mia­ry, barwy oraz fonty. Dzia­ła­nie opi­su­je na przy­kład wy­sła­nie for­mu­la­rza i zmianę widoku. Dzięki temu in­for­ma­cja o me­to­dzie POST nie ginie wśród po­le­ceń do­ty­czą­cych koloru na­głów­ka.
Ma­kie­tę po­rów­nuj z opisem, za­miast oce­niać wy­łącz­nie wi­zu­al­ne po­do­bień­stwo. Obraz może po­ka­zy­wać układ orien­ta­cyj­ny, pod­czas gdy opis podaje do­kład­ne war­to­ści. Jeżeli sze­ro­ko­ści paneli za­pi­sa­no jako 30 i 70 pro­cent, nie zga­du­je­my ich na pod­sta­wie po­mia­ru małego ob­raz­ka. Gdy dwa zapisy wy­glą­da­ją sprzecz­nie, spraw­dza­my kon­tekst i jed­nost­ki. W eg­za­mi­nie istot­ny jest wska­za­ny re­zul­tat, a nie własne ulep­sza­nie pro­jek­tu.

Ma­kie­ta i układ sekcji

Ma­kie­ta to uprosz­czo­ny obraz roz­miesz­cze­nia ele­men­tów. Może mieć postać pro­sto­ką­tów z na­zwa­mi, bez go­to­wych zdjęć i ko­lo­rów. Po­zwa­la zo­ba­czyć, czy naj­waż­niej­sza treść ma wy­star­cza­ją­co miej­sca i czy ko­lej­ność ob­słu­gi jest zro­zu­mia­ła. Dla sklepu pla­nu­je­my na­głó­wek, na­wi­ga­cję, ka­te­go­rie, listę pro­duk­tów, za­mó­wie­nie i stopkę z kon­tak­tem.
Makieta sklepu rozdziela nagłówek, nawigację, kategorie, produkty i stopkę; na wąskim ekranie kategorie oraz produkty tworzą jeden ciąg.
Siatka układu to zestaw kolumn, od­stę­pów i wspól­nych linii wy­rów­na­nia. Panel ka­te­go­rii oraz lista pro­duk­tów mogą two­rzyć dwie ko­lum­ny, na­to­miast na­głó­wek i stopka zaj­mo­wać pełną sze­ro­kość. Odstęp po­mię­dzy ko­lum­na­mi trzeba uwzględ­nić w ra­chun­ku sze­ro­ko­ści. Dwie ko­lum­ny mające razem 100 pro­cent oraz dodana osobno prze­rwa mogą prze­kro­czyć do­stęp­ne miej­sce, za­leż­nie od użytej tech­ni­ki.
Na te­le­fo­nie te same sekcje zwykle prze­cho­dzą do jed­ne­go ciągu. Nie ozna­cza to usu­nię­cia ka­te­go­rii ani for­mu­la­rza. Prio­ry­tet okre­śla ko­lej­ność i wi­docz­ność treści, a re­spon­syw­ność sposób jej roz­miesz­cze­nia. Wąski ekran nie uspra­wie­dli­wia cho­wa­nia przy­ci­sku za­mó­wie­nia pod ob­sza­rem bez moż­li­wo­ści prze­wi­ja­nia. Prze­widź także długą nazwę pro­duk­tu, a nie tylko krótki napis z ma­kie­ty.

Od ma­kie­ty do HTML

Se­man­tycz­na struk­tu­ra to dobór znacz­ni­ków według zna­cze­nia treści. Na­głó­wek wi­try­ny pasuje do <header>, główna na­wi­ga­cja do <nav>, wła­ści­wa treść do <main>, a stopka do <footer>. Panel do­dat­ko­wych in­for­ma­cji może na­le­żeć do <aside>. Sam fakt, że pro­sto­kąt leży po lewej, nie ozna­cza jesz­cze, że jest tre­ścią po­bocz­ną: o se­man­ty­ce de­cy­du­je jego rola.
1
2
3
4
5
6
7
<header><h1>Sklep komputerowy</h1></header>
<nav aria-label="Główna"><a href="produkty.html">Produkty</a></nav>
<div class="uklad">
<aside><h2>Kategorie</h2></aside>
<main><h2>Produkty</h2><p>Wybierz sprzęt do zamówienia.</p></main>
</div>
<footer><p>Kontakt ze sklepem</p></footer>
Kod po­ka­zu­je struk­tu­rę, a nie kom­plet wi­try­ny. Wła­ści­wo­ści układu znaj­du­ją się w ar­ku­szu CSS. Zwykły <div> gru­pu­je ko­lum­ny, po­nie­waż pełni tech­nicz­ną funk­cję po­jem­ni­ka; nie udaje ko­lej­ne­go roz­dzia­łu treści. Sekcję te­ma­tycz­ną należy opisać na­głów­kiem. Szcze­gó­ły znacz­ni­ków roz­wi­ja lekcja o sek­cjach HTML, a zna­cze­nie upo­rząd­ko­wa­nia opi­su­je po­rad­nik struk­tu­ry W3C WAI.
Ko­lej­ność do­ku­men­tu po­win­na dawać sens po wy­łą­cze­niu CSS. Wi­zu­al­ne prze­su­nię­cie for­mu­la­rza nad opis pro­duk­tu nie musi zmie­nić ko­lej­no­ści od­czy­tu i prze­cho­dze­nia kla­wia­tu­rą. Pro­jek­tuj więc struk­tu­rę przed ko­sme­tycz­nym usta­wie­niem bloków. Pra­wi­dło­we znacz­ni­ki uła­twia­ją też póź­niej­sze te­sto­wa­nie i po­praw­ki: wia­do­mo, gdzie kończy się na­wi­ga­cja i za­czy­na treść.

Paleta barw i hie­rar­chia

Paleta to ogra­ni­czo­ny zestaw ko­lo­rów z przy­pi­sa­ny­mi za­da­nia­mi. W skle­pie po­trze­bu­je­my tła, tekstu, linii roz­dzie­la­ją­cych i ak­cen­tu dla dzia­ła­nia. Osobne kolory mogą sy­gna­li­zo­wać błąd oraz po­praw­ny wynik. Po­wta­rzal­ne role po­ma­ga­ją roz­po­znać przy­cisk za­mó­wie­nia na ko­lej­nych pod­stro­nach. Przy­pad­ko­wy nowy kolor przy każdym pro­duk­cie osła­bia ten sygnał.
Kon­trast to róż­ni­ca ja­sno­ści między tre­ścią i jej tłem, mie­rzo­na od­po­wied­nim współ­czyn­ni­kiem. Ciemny tekst na jasnym tle może być czy­tel­niej­szy niż ja­sno­sza­ry napis, choć oba ze­sta­wy pasują do tej samej palety. Dobór barw obej­mu­je także stan na­je­cha­nia, fokus kla­wia­tu­ry i ko­mu­ni­kat błędu. Nie wy­star­czy spraw­dzić wy­łącz­nie widoku po otwar­ciu strony.
Hie­rar­chia wi­zu­al­na wska­zu­je, co czytać naj­pierw. Tworzą ją wiel­kość, po­ło­że­nie, kon­trast, odstęp i gru­po­wa­nie. Nazwa pro­duk­tu po­win­na wy­róż­niać się od po­moc­ni­cze­go numeru ka­ta­lo­go­we­go, a cena i przy­cisk za­mó­wie­nia mieć jasne po­wią­za­nie z pro­duk­tem. Jeśli wszyst­kie napisy są jed­na­ko­wo duże i po­gru­bio­ne, żaden nie pełni funk­cji wy­róż­nie­nia. Upo­rząd­ko­wa­nie nie wymaga wielu ozdób.

Ty­po­gra­fia i od­stę­py

Ty­po­gra­fia to dobór i układ znaków wpły­wa­ją­cy na czy­tel­ność. Krój pisma okre­śla kształ­ty liter, styl na przy­kład po­chy­le­nie, a gru­bość sto­pień po­gru­bie­nia. Roz­miar fontu to tylko jeden pa­ra­metr. Zna­cze­nie ma rów­nież wy­so­kość wier­sza, dłu­gość linii i odstęp między aka­pi­ta­mi. Drobny tekst o cia­snych wier­szach nie staje się czy­tel­ny przez samo do­da­nie moc­niej­sze­go koloru.
Do dłu­gie­go opisu pro­duk­tu wy­bierz prosty, czy­tel­ny krój z pol­ski­mi zna­ka­mi. De­ko­ra­cyj­ny font może po­słu­żyć do krót­kiej nazwy, ale utrud­nia czy­ta­nie spe­cy­fi­ka­cji. Zapisz ro­dzi­nę za­stęp­czą na wy­pa­dek nie­do­stęp­no­ści wy­bra­ne­go fontu. Sprawdź litery „ą”, „ę” i „ł” oraz cyfry ceny, po­nie­waż bra­ku­ją­ce znaki mogą zostać na­ry­so­wa­ne innym krojem.
Spójny rytm od­stę­pów po­rząd­ku­je treść. Mniej­sza prze­rwa wiąże podpis z polem for­mu­la­rza, więk­sza od­dzie­la ko­lej­ne grupy. Nie twórz od­stę­pów serią pu­stych aka­pi­tów ani spa­cja­mi: użyj wła­ści­wo­ści CSS. Wy­mia­ry ob­ra­mo­wa­nia i wy­peł­nie­nia licz zgod­nie z mo­de­lem pu­deł­ko­wym, ina­czej do­kład­nie za­pla­no­wa­ne ko­lum­ny mogą się roz­je­chać.
W pro­jek­cie re­spon­syw­nym tekst ma prze­cho­dzić do na­stęp­ne­go wier­sza bez na­kła­da­nia na są­sied­nie bloki. Stała wy­so­kość karty do­bra­na do jednej krót­kiej nazwy często obcina dłuż­szy opis. Prze­te­stuj długą nazwę mo­ni­to­ra, cenę z więk­szą liczbą cyfr i po­więk­sze­nie tekstu. Pro­jekt jest in­struk­cją za­cho­wa­nia treści, a nie tylko po­je­dyn­czym ob­raz­kiem.

Na eg­za­mi­nie

Py­ta­nie o pro­jekt może spraw­dzać dobór znacz­ni­ka sekcji, czy­tel­ność kroju albo rolę palety. W prak­ty­ce od­ha­czaj wy­ma­ga­nia od­dziel­nie: za­war­tość, ko­lej­ność, roz­mia­ry, kolory i dzia­ła­nie. Dobrze wy­glą­da­ją­cy pro­sto­kąt z nie­wła­ści­wym na­pi­sem nie speł­nia wy­ma­gań treści, a po­praw­na treść bez wy­ma­ga­ne­go układu nie speł­nia opisu wy­glą­du.
Pu­łap­ka: zgod­ność z ma­kie­tą nie polega na uzy­ska­niu po­dob­ne­go zrzutu za pomocą do­wol­nych roz­wią­zań; arkusz może wy­ma­gać kon­kret­nych znacz­ni­ków i wła­ści­wo­ści.
Po zbu­do­wa­niu sklepu po­rów­naj go z pro­jek­tem w usta­lo­nej sze­ro­ko­ści, a na­stęp­nie zwęź okno. Sprawdź kom­plet treści, for­mu­larz i od­no­śni­ki. Zapisz uwagi w kon­kret­nych zda­niach, na przy­kład „długa nazwa na­cho­dzi na cenę”, za­miast „układ wymaga po­pra­wy”. Taki opis pro­wa­dzi do po­praw­ki, którą da się póź­niej po­now­nie zwe­ry­fi­ko­wać.

Ściąga

Ele­ment pro­jek­tu
Co usta­lić
Wy­ma­ga­nia
treść, struk­tu­ra, wygląd, dzia­ła­nie
Ma­kie­ta
roz­miesz­cze­nie i ko­lej­ność sekcji
Siatka
ko­lum­ny, od­stę­py, wy­rów­na­nie
HTML
zna­cze­nie i hie­rar­chia treści
CSS
wygląd i re­ak­cja na sze­ro­kość
Paleta
role ko­lo­rów i kon­trast
Ty­po­gra­fia
krój, roz­miar, wier­sze, pol­skie znaki
We­ry­fi­ka­cja
zgod­ność z opisem i za­cho­wa­nie treści
Pobierz ściągę PDF

[ W TYM DZIALE ]

następna: Dostępność w praktyce: kontrast, alt, klawiatura, powiększenie, WCAG na stroniespis działu: Projekt, CMS, testowanie, publikacja

[ INF.03: INNE ARTYKUŁY ]

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