ARKUSZ EGZAMINACYJNY

INF.03
Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Zawód: Technik programista
Liczba pytań: 20
Czas trwania: 60 minut (standardowo)
Próg zdawalności: 50% (10 pytań)

Arkusz wygenerowany na platformie zawodowe.edu.pl

Tysiące pytań zgodnych z CKE ze wszystkich kwalifikacji zawodowych
System nauczyciel-uczeń do monitorowania postępów w czasie rzeczywistym
Egzaminy zawodowe próbne dla Twoich uczniów (skórka CKE)
Generator arkuszy PDF z możliwością edycji i udostępniania
Całkowicie darmowy dostęp bez limitów i ukrytych opłat
Bez reklam dla zalogowanych użytkowników

❤️ Dlaczego darmowe? Bo edukacja nie powinna być przywilejem.

Załóż darmowe konto i korzystaj z pełni możliwości:

Śledź swoje postępy • Zapisuj arkusze • Rozwiązuj testy online

Wygenerowano: 14.07.2026 13:44
Token arkusza:_8B0iS6TM9r_FA4f
Link do edycji:zawodowe.edu.pl/generator-arkuszy/klon/_8B0iS6TM9r_FA4f/

1Pytanie 1

Jakie znaki <header>, <article>, <section>, <footer> są typowe dla tego języka?

A. HTML 5

B. XHTML 1.1

C. HTML 4.01 Transitional

D. HTML 4.01 Strict

2Pytanie 2

Wskaż blok, który jest sformatowany zgodnie z podanym stylem CSS.

background: linear-gradient(to right, LightBlue, DarkBlue);

A. Blok 1

B. Blok 2

C. Blok 3

D. Blok 4

3Pytanie 3

Wskaż kod CSS odpowiadający układowi bloków 2 - 5, zakładając, że są one zbudowane w oparciu o przedstawiony kod HTML.

BLOK 1
BLOK 2	BLOK 3	BLOK 4
BLOK 5

<div id="pierwszy">BLOK 1</div>
<div id="drugi">BLOK 2</div>
<div id="trzeci">BLOK 3</div>
<div id="czwarty">BLOK 4</div>
<div id="piaty">BLOK 5</div>

Kod 1.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  float: left;
  width: 30%;
}
#czwarty {
  float: right;
  width: 30%;
}
#piaty {
  clear: both;
  width: 30%;
}

Kod 2.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  float: left;
  width: 30%;
}
#czwarty {
  float: right;
  width: 30%;
}
#piaty {
  float: left;
  width: 30%;
}

Kod 3.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  float: left;
  width: 30%;
}
#czwarty {
  width: 30%;
}
#piaty {
  float: right;
  width: 30%;
}

Kod 4.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  width: 30%;
}
#czwarty {
  width: 30%;
}
#piaty {
  float: right;
  width: 30%;
}

A. Kod 3.

B. Kod 1.

C. Kod 2.

D. Kod 4.

4Pytanie 4

Element

<meta charset="utf-8">

definiuje metadane dotyczące strony internetowej, odnosząc się do

A. opisu witryny

B. języka witryny

C. słów kluczowych

D. kodowania znaków

5Pytanie 5

Który selektor stylizuje akapity z klasą tekst ORAZ element blokowy z identyfikatorem obrazki?

A. <pre class="code-block">p.tekst, div#obrazki</pre>

B. <pre class="code-block">p#tekst, div.obrazki</pre>

C. <pre class="code-block">p.tekst + div#obrazki</pre>

D. <pre class="code-block">p#tekst + div.obrazki</pre>

6Pytanie 6

Który z poniższych fragmentów kodu HTML5 zostanie uznany za niepoprawny przez walidator HTML?

A. <pre>tekst</pre>

B. <pre><style>.a{color:#F00}</style>tekst</pre>

C. <pre>tekst</pre>

D. <pre>tekst</pre>

7Pytanie 7

Wskaż przycisk sformatowany przedstawionym stylem CSS.

#przycisk {
    background-color: white;
    padding: 10px;
    border-width: 2px;
    border-bottom-style: dashed;
}

Przycisk 1

Przycisk 2

Przycisk 3

Przycisk 4

A. Przycisk 4

B. Przycisk 1

C. Przycisk 3

D. Przycisk 2

8Pytanie 8

Który kod HTML spowoduje identyczne formatowanie jak przedstawione na obrazku?

W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

<p>W tym <i>paragrafie zobaczysz sposoby formatowania</i> tekstu w HTML</p>
<p>W tym <b>paragrafie <i>zobaczysz</i> sposoby formatowania</b> tekstu w HTML</p>
<p>W tym <i>paragrafie <b>zobaczysz</b> sposoby formatowania</i> tekstu w HTML</p>
<p>W tym <i>paragrafie </i><b>zobaczysz</b><i> sposoby formatowania</i> tekstu w HTML</p>

A. Odpowiedź A

B. Odpowiedź B

C. Odpowiedź C

D. Odpowiedź D

9Pytanie 9

Do którego akapitu przypisano podaną właściwość stylu CSS?
border-radius: 20%;

A. Rys. A

B. Rys. B

C. Rys. C

D. Rys. D

10Pytanie 10

Zdefiniowany styl CSS spowoduje, że nagłówki pierwszego poziomu będą

A. wyjustowane, pisane wielkimi literami, a odstępy między liniami ustalone na 10 px

B. wyjustowane, pisane małymi literami, a odstępy między literami ustalone na 10 px

C. wyśrodkowane, pisane małymi literami, a odstępy między liniami ustalone na 10 px

D. wyśrodkowane, pisane wielkimi literami, a odstępy między literami ustalone na 10 px

11Pytanie 11

Której właściwości CSS użyć, aby ustawić WYSOKOŚĆ grafiki na stronie?

A. <pre class="code-block">padding</pre>

B. <pre class="code-block">margin</pre>

C. <pre class="code-block">height</pre>

D. <pre class="code-block">width</pre>

12Pytanie 12

Który zapis wyświetli obraz kotek.jpg z tekstem alternatywnym „obrazek kotka”?

A. <pre class="code-block"><img href="/kotek.jpg" title="obrazek kotka"></pre>

B. <pre class="code-block"><img src="/kotek.jpg" title="obrazek kotka"></pre>

C. <pre class="code-block"><img href="/kotek.jpg" alt="obrazek kotka"></pre>

D. <pre class="code-block"><img src="/kotek.jpg" alt="obrazek kotka"></pre>

13Pytanie 13

Dla przedstawionego fragmentu kodu

<img src="kwiat.jpg alt="kwiat">

walidator HTML zwróci błąd, ponieważ

A. użyto niewłaściwego znacznika do wyświetlenia grafiki

B. użyto nieznanego atrybutu alt

C. nie odnaleziono pliku kwiat.jpg

D. nie zamknięto cudzysłowu

14Pytanie 14

Który zapis CSS ustawi NIEBIESKIE tło bloku <div>?

A. <pre class="code-block">div { background-color: blue; }</pre>

B. <pre class="code-block">div { border-color: blue; }</pre>

C. <pre class="code-block">div { color: blue; }</pre>

D. <pre class="code-block">div { shadow: blue; }</pre>

15Pytanie 15

Wskaż kod CSS, który odpowiada layoutowi bloków 2 – 5, zakładając, że są one utworzone na podstawie podanego kodu HTML.

A. Kod 1

B. Kod 2

C. Kod 3

D. Kod 4

16Pytanie 16

Selektor CSS a:link {color:red} w arkuszach stylów nazywanych kaskadowymi określa

A. klasę.

B. pseudoklasę.

C. identyfikator.

D. pseudoelement.

17Pytanie 17

Gdzie umieścić informacje o autorze, opisie i słowach kluczowych strony?

A. w <code><head></code>, w znaczniku <code><meta></code>

B. w <code><head></code>, w znaczniku <code><style></code>

C. w <code><body></code>, w znaczniku <code><meta></code>

D. w <code><body></code>, w znaczniku <code><html></code>

18Pytanie 18

Witryna internetowa powinna mieć zaprezentowaną strukturę bloków. Aby osiągnąć ten układ, należy przypisać sekcjom odpowiednie właściwości w następujący sposób:

A. float wyłącznie dla bloku 5; clear dla bloku 2

B. float tylko dla bloków: 3, 4; clear dla bloku 5

C. float tylko dla bloku 2; clear dla bloków: 3, 4

D. float tylko dla bloków: 2, 3, 4; clear dla bloku 5

19Pytanie 19

W języku HTML aby zdefiniować słowa kluczowe strony, należy użyć zapisu

A. <meta name = "keywords" content = "psy, koty, gryzonie">

B. <meta name = "keywords" = "psy, koty, gryzonie">

C. <meta name = "description" content = "psy, koty, gryzonie">

D. <meta keywords = "psy, koty, gryzonie">

20Pytanie 20

Aby strona internetowa była bardziej dostępna dla osób niewidomych, obrazom wstawianym znacznikiem img należy nadać atrybut:

A. <pre class="code-block">alt</pre>

B. <pre class="code-block">src</pre>

C. <pre class="code-block">text</pre>

D. <pre class="code-block">style</pre>

🔑 KLUCZ ODPOWIEDZI

Token: _8B0iS6TM9r_FA4f | INF.03 | Pytań: 20 | Próg: 10 poprawnych

Numer zadania	Odpowiedź
1	A
2	B
3	C
4	D
5	A
6	B
7	D
8	C
9	B
10	D
11	C
12	D
13	D
14	A
15	B
16	B
17	A
18	D
19	A
20	A

🖨️ Gotowe do wydruku!

ARKUSZ EGZAMINACYJNY

INF.03Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

🔑 KLUCZ ODPOWIEDZI

INF.03
Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych