Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik programista
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 17 czerwca 2026 14:41
Data zakończenia: 17 czerwca 2026 15:05

Egzamin zdany!

Wynik: 27/40 punktów (67,5%)

Wymagane minimum: 20 punktów (50%)

Nowe

Analiza przebiegu egzaminu- sprawdź jak rozwiązywałeś pytania

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

W języku CSS wprowadzone zostało następujące formatowanie:

h1 i {color:red;}

Kolor czerwony będzie stosowany do

A. tylko tekstu pochylonego nagłówka pierwszego poziomu

B. całego tekstu nagłówka pierwszego stopnia oraz całego tekstu pochylonego, niezależnie od lokalizacji na stronie

C. całego tekstu nagłówka pierwszego stopnia oraz tekstu pochylonego w akapicie

D. wyłącznie pochylonego tekstu w każdym rodzaju nagłówka

W języku CSS, zapis 'h1 i {color:red;}' wskazuje na regułę stylowania, która dotyczy elementów 'i' znajdujących się wewnątrz nagłówka pierwszego stopnia 'h1'. W związku z tym, tylko tekst, który jest oznaczone jako pochylony (italic) w obrębie h1, zostanie wyświetlony na czerwono. W CSS, selektor 'h1 i' jest przykładem selektora potomka, który działa na zasadzie dziedziczenia stylów przez elementy znajdujące się w danym kontekście. Przykładowo, skoro element 'i' jest bezpośrednio związany z 'h1', to tylko tekst w tym elemencie zyska czerwony kolor. W praktyce, jeśli w nagłówku pierwszego stopnia mamy tekst 'To jest nagłówek <i>pochylony</i>', to jedynie słowo 'pochylony' będzie czerwone, podczas gdy pozostała część nagłówka pozostanie w domyślnym kolorze. Tego typu stylizacje są zgodne z standardami CSS, które promują modularność i precyzyjność w określaniu stylów dla różnych elementów dokumentu.

Pytanie 2

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

padding

margin

width

height

Wysokość elementu (w tym grafiki) ustawia w CSS właściwość height, np. height: 200px;. Dlatego wysokość grafiki ustawia height.

Pytanie 3

Zastosowana w dokumencie HTML definicja multimediów sprawi, że na stronie:

<video controls>
    <source src="video1.mp4" type="video/mp4">
    <source src="video1.ogg" type="video/ogg">
    Komunikat dotyczący video
</video>

A. zostanie wyświetlony film z pliku video1.mp4 lub, w przypadku nierozpoznania formatu MPEG-4, film z pliku video1.ogg.

B. pod wyświetlanym filmem zostanie wyświetlony napis „Komunikat dotyczący video”.

C. zostaną wyświetlone obok siebie dwa filmy z plików: video1.mp4 oraz video1.ogg.

D. wyświetlony film zostanie automatycznie uruchomiony zaraz po załadowaniu strony internetowej.

Niestety, twoja odpowiedź nie jest prawidłowa. Kod HTML, który analizowaliśmy, nie sugeruje, że pod wyświetlanym filmem zostanie wyświetlony napis 'Komunikat dotyczący video' ani że zostaną wyświetlone obok siebie dwa filmy. Takie zachowanie strony wymagałoby dodatkowego kodu HTML i CSS. Także automatyczne uruchomienie filmu po załadowaniu strony nie jest domyślnym zachowaniem elementu video. Warto zauważyć, że takie automatyczne odtwarzanie może być uciążliwe dla użytkowników i jest często uważane za niezgodne z dobrymi praktykami projektowania stron internetowych. Również, aby film automatycznie się odtwarzał, w elemencie video powinien być umieszczony atrybut 'autoplay'. Zrozumienie, jak działa element video HTML i jakie ma atrybuty, jest kluczowe do tworzenia efektywnych i użytecznych stron internetowych.

Pytanie 4

Ile maksymalnie znaczników <td> może być zastosowanych w tabeli, która ma trzy kolumny oraz trzy wiersze, nie zawierając przy tym złączeń komórek i wiersza nagłówkowego?

A. 3

B. 9

C. 12

D. 6

Odpowiedź 9 jest prawidłowa, ponieważ w tabeli o trzech kolumnach i trzech wierszach, gdzie nie ma złączeń komórek ani wiersza nagłówkowego, maksymalna liczba znaczników <td> wynosi 9. Każda kolumna w każdym wierszu może być wypełniona osobnym znacznikiem <td>. Tabela składająca się z 3 wierszy i 3 kolumn daje w sumie 3 x 3 = 9 komórek, które są reprezentowane przez znaczniki <td>. Przykładową strukturę HTML takiej tabeli można przedstawić następująco: <table><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></table>. Warto również zauważyć, że zgodnie z zaleceniami W3C, użycie odpowiednich znaczników w tabelach jest kluczowe dla zapewnienia właściwej dostępności i semantyki dokumentu HTML, co jest zgodne z dobrymi praktykami tworzenia stron internetowych.

Pytanie 5

Która rozdzielczość daje proporcje obrazu 16:9 (przy kwadratowym pikselu)?

A. 320 × 240

B. 2560 × 2048

C. 800 × 480

D. 1366 × 768

Po przeliczeniu pozostałe rozdzielczości dają inne kształty obrazu. 320 × 240 to ≈ 1,33, czyli klasyczne 4:3 (stare monitory), a 800 × 480 ≈ 1,67. 2560 × 2048 daje ≈ 1,25, blisko proporcji 5:4. Tylko 1366 × 768 wychodzi ≈ 1,78, czyli 16:9.

Pytanie 6

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. td, th { background-color: Pink; }

B. tr:hover { background-color: Pink; }

C. tr { background-color: Pink; }

D. tr:active { background-color: Pink; }

Poprawny selektor to tr:hover { background-color: Pink; }, bo dokładnie opisuje sytuację pokazaną na filmie: efekt pojawia się dopiero po najechaniu kursorem na cały wiersz tabeli. Pseudo-klasa :hover w CSS służy właśnie do definiowania stylów w momencie, gdy użytkownik „najeżdża” myszką na dany element. Jeśli więc chcemy, żeby podświetlał się cały rząd tabeli, logiczne i zgodne z dobrymi praktykami jest przypięcie efektu do znacznika tr, a nie do pojedynczych komórek.

W praktyce taki zapis stosuje się bardzo często w interfejsach webowych: w panelach administracyjnych, listach zamówień, tabelach z uczniami, produktami, logami systemowymi itd. Dzięki temu użytkownik łatwiej śledzi, który wiersz właśnie ogląda. To niby detal, ale z punktu widzenia UX robi sporą różnicę. Z mojego doświadczenia to jeden z tych prostych trików CSS, które od razu poprawiają „odczuwalną” jakość strony.

Ważne jest też to, że :hover jest częścią standardu CSS (opisane m.in. w specyfikacji CSS Selectors Level 3/4) i działa w praktycznie wszystkich współczesnych przeglądarkach. Nie trzeba do tego żadnego JavaScriptu, żadnych skomplikowanych skryptów – czysty CSS. Dobrą praktyką jest również używanie bardziej stonowanych kolorów niż Pink w prawdziwych projektach, np. #f5f5f5 albo lekki odcień niebieskiego, tak żeby kontrast był czytelny i nie męczył wzroku. Warto też pamiętać, że podobny mechanizm możesz zastosować na innych elementach: np. a:hover dla linków, button:hover dla przycisków czy nawet div:hover dla całych kafelków w layoutach. Kluczowe jest to, żeby pseudo-klasa :hover była przypięta dokładnie do tego elementu, który ma reagować na interakcję użytkownika.

Pytanie 7

W CSS, aby zastosować efekt przekreślenia, a także podkreślenia dolnego lub górnego w tekście, należy użyć

A. text-align

B. text-decoration

C. text-transform

D. text-indent

Odpowiedź 'text-decoration' jest prawidłowa, ponieważ ta właściwość CSS umożliwia dodawanie różnych efektów dekoracyjnych do tekstu, takich jak przekreślenie, podkreślenie oraz nadkreślenie. Przykładowo, aby przekreślić tekst, możesz użyć następującego kodu: 'text-decoration: line-through;'. Z kolei dla podkreślenia tekstu zastosujesz 'text-decoration: underline;'. W kontekście standardów CSS3, 'text-decoration' ma na celu nie tylko estetykę, ale także poprawę czytelności, co jest kluczowe w projektowaniu responsywnych i dostępnych stron internetowych. Warto również pamiętać o dobrych praktykach, takich jak unikanie nadmiernego stosowania dekoracji, które mogą odwracać uwagę od treści. W praktyce, kontrolowanie wyglądu tekstu za pomocą 'text-decoration' pozwala na tworzenie bardziej zróżnicowanych i atrakcyjnych interfejsów użytkownika, co w efekcie może zwiększyć zaangażowanie odwiedzających stronę.

Pytanie 8

Jaką szerokość przeznaczono dla treści strony według podanej definicji CSS?

body {
   border: 2px;
   height: 600px;
   width: 560px;
}

A. 560 px

B. 640 px

C. 600 px

D. 2 px

Twoja odpowiedź jest poprawna. Szerokość strony została zdefiniowana na 560 pikseli w kodzie CSS. W kontekście strony internetowej, to oznacza, że cała zawartość strony będzie wyświetlana w obszarze o szerokości nie większej niż 560 pikseli. To jest bardzo ważne podczas projektowania stron internetowych. Szerokość strony często jest ustalana na stałą wartość, aby zapewnić spójność wyglądu strony na różnych urządzeniach. W praktyce, jeśli chcesz, aby strona była 'responsywna', szerokość powinna być ustawiona na wartość procentową, co pozwoli na dynamiczne dostosowanie się strony do rozmiaru okna przeglądarki. Jednak w niektórych sytuacjach, jak na przykład w przypadku określonego układu strony, możliwe jest użycie stałej wartości szerokości. W każdym razie, zapamiętaj, że szerokość strony jest jednym z najważniejszych aspektów przy projektowaniu stron internetowych, który ma bezpośredni wpływ na doświadczenia użytkownika.

Pytanie 9

Która z poniższych technologii działa po stronie klienta (front-end, w przeglądarce)?

A. Node.js

B. Perl

C. PHP

D. CSS

Pozostałe technologie działają po stronie serwera. Node.js to środowisko uruchomieniowe pozwalające wykonywać JavaScript właśnie na serwerze (np. do budowy API) - mimo że JS kojarzy się z przeglądarką, Node.js to back-end. Perl to język skryptowy ogólnego przeznaczenia, tradycyjnie wykorzystywany w skryptach serwerowych. PHP również wykonuje się na serwerze i odsyła do przeglądarki gotowy HTML. Po stronie klienta przetwarzany jest CSS, dlatego ta odpowiedź jest poprawna.

Pytanie 10

Strona internetowa została zaprezentowana w taki sposób:

Rozdział 1

tekst

Podrozdział 1.1

tekst

Podrozdział 1.2

Jakie są poprawne znaczniki do tego formatu?

A. <big>Rozdział 1</big>tekst<big>Podrozdział 1.1</big>tekst<big>Podrozdział 1.2</big>

B. <h1>Rozdział 1<p>tekst <h2>Podrozdział 1.1<p>tekst <h2>Podrozdział 1.2

C. <h1>Rozdział 1</h1> <p>tekst</p> <h2>Podrozdział 1.1</h2> <p>tekst</p> <h2>Podrozdział 1.2</h2>

D. <ul><li>Rozdział 1<li>tekst<li>Podrozdział 1.1<li>tekst<li>Podrozdział 1.2</ul>

Odpowiedź zawierająca znaczniki <h1>, <p> oraz <h2> jest poprawna, ponieważ odzwierciedla właściwą strukturę dokumentu HTML. Znaczniki nagłówków <h1> i <h2> są kluczowe dla hierarchii treści na stronie, co ma istotne znaczenie z punktu widzenia SEO oraz dostępności. Właściwe stosowanie tych znaczników wpływa na to, jak wyszukiwarki indeksują zawartość strony, a także ułatwia nawigację osobom korzystającym z urządzeń asystujących. Na przykład, znacznik <h1> powinien być używany raz na stronę, aby wskazać główny temat, podczas gdy <h2> może być stosowany do podziału treści na sekcje. Dodatkowo, znaczniki <p> są przeznaczone do wyświetlania akapitów tekstu, co jest standardową praktyką w tworzeniu treści webowych. Warto również pamiętać o zachowaniu odpowiednich zasad semantyki HTML, co bezpośrednio przekłada się na poprawę doświadczeń użytkowników oraz wydajność strony.

Pytanie 11

<source src="plik.mp4" type="video/mp4">

Aby osadzić plik wideo na stronie WWW, przedstawiony kod HTML5 należy umieścić wewnątrz znaczników:

A. <div> </div>

B. <embed> </embed>

C. <video> </video>

D. <section> </section>

Poprawna odpowiedź to umieszczenie znacznika `<source>` wewnątrz `<video>...</video>`. W HTML5 to właśnie element `<video>` jest kontenerem odpowiedzialnym za osadzanie plików wideo na stronie WWW. Atrybuty takie jak `controls`, `autoplay`, `loop`, `muted`, `width` czy `height` przypisujemy właśnie do `<video>`, a nie do `<source>`. Znacznik `<source>` służy głównie do wskazania konkretnego pliku multimedialnego i jego typu MIME, np.: `<video controls width="640" height="360"><source src="film.mp4" type="video/mp4"><source src="film.webm" type="video/webm">Twoja przeglądarka nie obsługuje elementu video.</video>`. Przeglądarka przechodzi po kolei po elementach `<source>` i wybiera pierwszy format, który potrafi odtworzyć. To jest zgodne ze specyfikacją HTML Living Standard (WHATWG) oraz zaleceniami W3C dotyczącymi multimediów w sieci. W praktyce, w projektach komercyjnych, często dodaje się kilka formatów (np. MP4, WebM), właśnie po to, by zapewnić maksymalną kompatybilność między różnymi przeglądarkami i systemami. Moim zdaniem warto od razu wyrabiać sobie nawyk pisania pełnej, semantycznie poprawnej struktury: `<video>` jako główny element odtwarzacza, w środku jeden lub więcej `<source>` i ewentualnie tekst alternatywny. Dzięki temu kod jest czytelny, łatwiej go stylować w CSS, a także lepiej zachowuje się w kontekście dostępności (np. czytniki ekranu widzą, że to element wideo). Dodatkowo, `<video>` można łatwo obsługiwać z poziomu JavaScript, korzystając z jego API (play, pause, currentTime, volume itd.), co w praktyce daje sporą kontrolę nad odtwarzaniem multimediów na stronie.

Pytanie 12

Dokument HTML określa akapit oraz obrazek. Aby obrazek był wyświetlany przez przeglądarkę w tej samej linii co akapit po jego lewej stronie, należy w stylu CSS obrazka uwzględnić właściwość

A. alt: left;

B. float: left;

C. align: left;

D. style: left;

Odpowiedź "float: left;" jest naprawdę trafna. Ta właściwość w CSS sprawia, że elementy układają się obok siebie, co w tym przypadku oznacza, że rysunek wyląduje po lewej stronie akapitu. Jak użyjemy float, to rysunek 'przesuwa się' na lewo, a tekst z akapitu otacza go z prawej strony. To taki popularny sposób w webdesignie, który pozwala na ładniejsze połączenie obrazków z tekstem. Warto pamiętać, że czasem trzeba zastosować clearfix, zwłaszcza gdy mamy pływające elementy w większym układzie, żeby uniknąć problemów z rozmieszczeniem. Stosowanie float w CSS to dobra praktyka, bo pomaga zachować czytelność i estetykę tekstu. Na przykład, jeśli mamy sekcję artykułu z obrazem, który ilustruje omawiany temat, to zastosowanie float: left; sprawi, że treść będzie ładnie się układać i poprawi wrażenia użytkownika.

Pytanie 13

Jaki jest cel wykorzystania znacznika <i> w języku HTML?

A. określenia formularza

B. zmiany kroju pisma na pochylony

C. określenia nagłówka w treści

D. wstawienia obrazka

Znacznik <i> w języku HTML jest używany do oznaczania tekstu, który powinien być wyświetlany w kroju pisma pochyłym. Takie użycie jest zgodne ze standardami HTML, gdzie <i> zwykle wskazuje na tekst, który ma być wyróżniony w kontekście stylistycznym, na przykład w przypadku tytułów książek, nazw gatunków czy terminów technicznych. Z perspektywy semantycznej, HTML5 wprowadza większą elastyczność w definiowaniu znaczenia tekstu, co czyni <i> bardziej konwencjonalnym narzędziem niż w poprzednich wersjach. Warto zaznaczyć, że dla lepszej dostępności i SEO, często zaleca się użycie znacznika <em>, który nie tylko zmienia styl, ale także podkreśla znaczenie tekstu. Przykład zastosowania <i>: <i>„Wojna i pokój”</i> to książka autorstwa Lwa Tołstoja. Z perspektywy użytkowników i wyszukiwarek, ważne jest, aby znać różnice między tymi znacznikami, co pozwala na efektywniejsze tworzenie treści internetowych.

Pytanie 14

W przedstawionym kodzie HTML, zaprezentowany styl CSS jest stylem:

<p style="color:red;">To jest przykładowy akapit.</p>

A. zewnętrznym

B. lokalnym

C. nagłówkowym

D. dynamicznym

Styl CSS określony wewnątrz elementu HTML poprzez atrybut style jest przykładem stylu lokalnego. Styl lokalny pozwala na bezpośrednie przypisanie konkretnych własności CSS do pojedynczego elementu co umożliwia szybkie i łatwe testowanie oraz modyfikacje wyglądu bez potrzeby edytowania zewnętrznych plików CSS. Praktyczne zastosowanie stylów lokalnych odnajdujemy w sytuacjach gdy chcemy wprowadzić zmiany dla pojedynczego elementu na stronie nie wpływając na inne elementy. Na przykład jeśli w jednym miejscu chcemy podkreślić wagę tekstu stosując kolor czerwony możemy użyć stylu lokalnego jak pokazano w pytaniu. Jednak styl lokalny nie jest zalecany dla większych projektów czy skomplikowanych stron ze względu na fakt że utrudnia zarządzanie i utrzymywanie spójnego stylu w całym projekcie. W takich przypadkach lepiej korzystać ze stylów zewnętrznych lub nagłówkowych które oferują lepszą organizację i elastyczność. Warto również pamiętać że implementacja stylu lokalnego może nadpisywać inne style co jest istotne przy rozwiązywaniu problemów związanych z dziedziczeniem stylów CSS.

Pytanie 15

Który styl ustawi trzy kolumny OBOK siebie (każda na 1/3 szerokości)?

.kolumny { float: left; width: 40%; }

.kolumny { float: left; width: 33%; }

.kolumny { clear: both; height: 33%; }

.kolumny { float: right; height: 33%; }

Trzy kolumny obok siebie powstają, gdy każdy blok „pływa” w lewo i zajmuje jedną trzecią szerokości: .kolumny { float: left; width: 33%; }. Kluczowe są float (układ poziomy) i width (szerokość). Dlatego poprawny jest zapis z float: left i width: 33%.

Pytanie 16

Która grupa znaczników HTML służy do GRUPOWANIA elementów i budowy struktury dokumentu?

A. <div>, <article>, <header>

B. <table>, <tr>, <td>

C. <br>, <img>, <hr>

D. <span>, <strong>, <em>

Do grupowania elementów i budowy struktury dokumentu służą znaczniki blokowe i semantyczne: <div> (uniwersalny kontener) oraz <article> i <header> (sekcje HTML5). Wyznaczają one układ strony. Dlatego strukturę buduje grupa <div>, <article>, <header>.

Pytanie 17

W języku CSS zdefiniowano style dla znacznika h1 zgodnie z podanym wzorem. Przy założeniu, że żadne inne style nie są zastosowane do znacznika h1, wskaż właściwy sposób stylizacji tego elementu

A. D

B. B

C. A

D. C

Odpowiedź C jest prawidłowa, ponieważ zastosowane style CSS poprawnie odzwierciedlają zasady formatowania zdefiniowane w pytaniu. Styl font-style: oblique; powoduje, że tekst jest pochylony, ale nie jest to zwykła kursywa używana w normalnym tekście. Oblique jest bardziej subtelne i mniej formalne. Font-variant: small-caps; przekształca małe litery w małe kapitaliki, co nadaje tekstowi bardziej formalny i elegancki wygląd. Jest to użyteczne w nagłówkach, które często wymagają wyrazistości i czytelności. Text-align: right; wyrównuje tekst do prawej, co może być stosowane do tworzenia asymetrycznych, nowoczesnych projektów stron internetowych. Takie formatowanie stosowane jest dla zwiększenia czytelności lub dostosowania tekstu do innych elementów strony. Właściwe stosowanie CSS pozwala na pełne kontrolowanie wyglądu i prezentacji treści, co jest kluczowe w profesjonalnym tworzeniu stron internetowych. Przykładowo, użycie oblique i small-caps może być stosowane w projektach graficznych, takich jak logotypy, gdzie pożądany jest specyficzny styl wizualny. Dobre praktyki w CSS to unikanie nadmiernego użycia stylów, które mogą wpłynąć negatywnie na dostępność i użyteczność strony. W tym kontekście, wybrane style są skutecznie zastosowane, zapewniając zarówno estetykę, jak i funkcjonalność.

Pytanie 18

W języku HTML, aby uzyskać następujący efekt formatowania, należy zapisać kod:

pogrubiony pochylony lub w ^{górnym indeksie}

A. <i>pogrubiony <b>pochylony lub w </i><sup>górnym indeksie</sup>

B. <b>pogrubiony <i>pochylony</i></b> lub w <sub>górnym indeksie</sub>

C. <b>pogrubiony </b><i>pochylony</i> lub w <sup>górnym indeksie</sup>

D. <i>pogrubiony </i><b>pochylony</b> lub w <sub>górnym indeksie</sub>

Poprawna odpowiedź to: <b>pogrubiony </b><i>pochylony</i> lub w <sup>górnym indeksie</sup>. Ta odpowiedź prawidłowo wykorzystuje trzy kluczowe tagi HTML do formatowania tekstu: <b>, <i> i <sup>. Tag <b> służy do wyświetlania tekstu w pogrubionym formacie, co pozwala na podkreślenie istotnych fragmentów tekstu. Przykładem może być wyróżnienie tytułów, nagłówków lub kluczowych punktów w treści. Tag <i> jest używany do wyświetlania tekstu w formacie kursywy, co jest często używane do wyróżnienia tytułów książek, filmów, cytowań lub podkreślenia ważnych punktów. Tag <sup> jest używany do wyświetlania napisów jako tekst górnego indeksu, co jest często używane do wskazania numerów stron, przypisów, lub dla oznaczeń matematycznych lub naukowych. Pamiętaj, że prawidłowe użycie tych tagów jest kluczowe dla tworzenia jasnej, czytelnej i profesjonalnie wyglądającej strony internetowej.

Pytanie 19

Do czego służy atrybut alt w znaczniku <img>?

A. do ustawienia rozmiaru, ramki i wyrównania obrazu

B. do podpisu wyświetlanego pod obrazem

C. do podania ścieżki i nazwy pliku źródłowego

D. do tekstu wyświetlanego, gdy obraz nie może zostać załadowany

Atrybut alt w <img> zawiera tekst alternatywny opisujący obraz. Wyświetla się, gdy obrazu nie da się załadować, a przede wszystkim odczytują go czytniki ekranu osobom niewidomym - to podstawa dostępności i wartość dla SEO. Dlatego alt służy do tekstu pokazywanego, gdy obrazu nie można załadować.

Pytanie 20

Która technologia zapewnia SZYFROWANE połączenie ze stroną (HTTPS)?

A. SSL

B. SEO

C. FTP

D. CMS

Pozostałe skróty dotyczą czego innego. CMS to system zarządzania treścią, SEO to optymalizacja pod wyszukiwarki, a FTP to protokół przesyłania plików na serwer. Szyfrowanie połączenia HTTPS zapewnia SSL.

Pytanie 21

Aby tworzyć strony internetowe w sposób graficzny, należy skorzystać z

A. programu typu WYSIWYG

B. przeglądarki internetowej

C. programu MS Office Picture Manager

D. edytora CSS

Programy typu WYSIWYG (What You See Is What You Get) są narzędziami umożliwiającymi tworzenie stron internetowych w sposób wizualny, co znacznie ułatwia proces projektowania. Użytkownik może edytować strony bez konieczności znajomości języków programowania, takich jak HTML czy CSS, ponieważ te programy generują kod automatycznie na podstawie działań użytkownika. Przykładami takich aplikacji są Adobe Dreamweaver, Wix czy WordPress, które pozwalają na łatwe dodawanie treści, stylów i multimediów. Dzięki zastosowaniu programów WYSIWYG, projektanci mogą skupić się na estetyce i funkcjonalności stron, co jest zgodne z dobrymi praktykami branżowymi, które promują użyteczność i dostępność. Warto również zauważyć, że wiele z tych narzędzi oferuje szereg szablonów i komponentów, które przyspieszają proces tworzenia i zapewniają zgodność z aktualnymi standardami webowymi (np. W3C).

Pytanie 22

W języku CSS określono formatowanie znacznika h1 według poniższego wzoru. Zakładając, że do znacznika h1 nie dodano żadnego innego formatowania, wskaż sposób formatowania tego znacznika.

h1 {
    font-style: oblique;
    font-variant: small-caps;
    text-align: right;
}

A. B.

B. D.

C. A.

D. C.

Gratulacje, Twoja odpowiedź jest prawidłowa. W CSS określono, że znacznik h1 ma być wyświetlany z pochyłą czcionką, co jest osiągane za pomocą właściwości 'font-style: oblique'. Dodatkowo, małe wielkie litery są realizowane przez 'font-variant: small-caps', które zmieniają wszystkie małe litery na wielkie litery, ale z zachowaniem mniejszego rozmiaru. Wreszcie, do wyrównania tekstu do prawej strony służy 'text-align: right'. Wszystko to razem składa się na formatowanie znacznika h1, które zostało zdefiniowane w CSS. To jest dobra praktyka, aby zrozumieć i zapamiętać różne właściwości CSS, ponieważ pozwalają one na bardzo szczegółowe kontrolowanie wyglądu i układu elementów na stronie. Pamiętaj, że CSS jest niezwykle potężnym narzędziem w rękach doświadczonego programisty front-end i pozwala na tworzenie estetycznych, responsywnych i przyjaznych dla użytkownika interfejsów.

Pytanie 23

Deklaracja background-attachment: scroll sprawia, że:

A. grafika tła będzie powtarzana (kafelki)

B. tło będzie przewijane razem z zawartością strony

C. grafika tła pojawi się w prawym górnym rogu

D. tło będzie nieruchome, a treść będzie się przewijać

Pozostałe efekty dają inne właściwości tła. Powtarzanie tła w kafelki ustawia background-repeat, a nie background-attachment. Nieruchome tło, po którym przewija się treść, uzyskuje się wartością fixed - czyli odwrotnością scroll. Położenie obrazu tła (np. w rogu) określa background-position. Wartość scroll odpowiada wyłącznie za to, że tło przewija się wraz z zawartością strony, dlatego ta odpowiedź jest poprawna.

Pytanie 24

Zastosowanie bloku deklaracji background-attachment: scroll sprawia, że

A. tło strony będzie się przesuwać razem z tekstem

B. grafika tła znajdzie się w prawym górnym rogu strony

C. tło strony pozostanie statyczne, a tekst będzie się przesuwał

D. grafika tła będzie się powtarzać (kafelki)

Inne odpowiedzi na to pytanie są niepoprawne z kilku powodów. Stwierdzenie, że grafika tła będzie wyświetlona w prawym górnym rogu strony, jest mylące, ponieważ właściwość 'background-attachment' nie wpływa na położenie tła, a jedynie na jego zachowanie podczas przewijania. Pozycjonowanie tła jest kontrolowane za pomocą właściwości 'background-position', która definiuje, gdzie tło ma być umieszczone, a nie jak się zachowuje w kontekście przewijania. Warto również zauważyć, że tło strony może być umieszczone w dowolnym miejscu, a nie tylko w jednym rogu. Inną nieprawidłową koncepcją jest stwierdzenie, że tło strony będzie stałe, a tekst będzie się przewijał. Taka konfiguracja odpowiada właściwości 'background-attachment: fixed', która rzeczywiście utrzymuje tło w stałej pozycji podczas przewijania zawartości. To prowadzi do błędnych wniosków, ponieważ mieszanie tych właściwości może skutkować niezamierzonymi efektami wizualnymi. Ostatnia odpowiedź, sugerująca, że grafika tła będzie powtarzana, odnosi się do 'background-repeat', która kontroluje, czy tło powinno być powtarzane, co jest niezwiązane z przewijaniem. Użytkownicy często mylą te właściwości, co prowadzi do niepoprawnych interpretacji efektów wizualnych. W praktyce ważne jest, aby zrozumieć, że każda z tych właściwości ma swoje unikalne zastosowanie i wpływ na wygląd oraz funkcjonalność strony internetowej.

Pytanie 25

Której właściwości CSS należy użyć, aby ustawić marginesy wewnętrzne elementu?

padding

margin

hight

width

Marginesy WEWNĘTRZNE - odstęp między treścią elementu a jego obramowaniem - ustawia w CSS padding, np. padding: 10px; daje 10 px wolnego miejsca dookoła treści wewnątrz ramki. To część modelu pudełkowego (box model). Zapamiętaj różnicę: padding jest WEWNĄTRZ ramki, a margin na ZEWNĄTRZ.

Pytanie 26

W dokumencie HTML utworzono formularz wysyłający dane do skryptu formularz.php. Po naciśnięciu przycisku typu submit, przeglądarka przekierowuje nas do określonego adresu. Na podstawie podanego linku można wywnioskować, że dane do pliku formularz.php przesłano metodą

.../formularz.php?imie=Anna&nazwisko=Kowalska

A. SESSION

B. POST

C. GET

D. COOKIE

Metoda GET w HTTP jest używana do przesyłania danych w adresie URL. Dane są dołączane jako parametry zapytania po znaku zapytania w formacie klucz=wartość. Przykład w pytaniu pokazuje, że dane imie=Anna oraz nazwisko=Kowalska są przesyłane jako część adresu URL do formularz.php. Jest to typowe dla metody GET, która umożliwia łatwe przesyłanie danych przez przeglądarkę i ich późniejsze przetwarzanie po stronie serwera. Metoda GET jest często stosowana w przypadku, gdy dane nie zawierają poufnych informacji, a ich objętość jest niewielka. Standard HTTP rekomenduje używanie metody GET do pobierania danych i niepowinno być używane do przesyłania lub modyfikowania danych. Dokumentacja W3C wskazuje, że GET jest metodą idempotentną, co oznacza, że wielokrotne wykonanie tego samego zapytania nie spowoduje dodatkowych efektów ubocznych. W praktyce GET jest używana np. w zapytaniach wyszukiwania w witrynach, gdzie parametry wyszukiwania są umieszczane w URL.

Pytanie 27

W instrukcjach mających na celu odtwarzanie dźwięku na witrynie internetowej jako podkładu muzycznego nie stosuje się atrybutu

A. loop="10"

B. balance="-10"

C. href="C:/100.wav">

D. volume="-100"

Wybór atrybutów, takich jak 'volume="-100"', 'balance="-10"' oraz 'loop="10"', może prowadzić do nieporozumień dotyczących ich zastosowania w kontekście odtwarzania dźwięku na stronach internetowych. Atrybut 'volume', w rzeczywistości, nie jest standardowym atrybutem HTML. Wprowadzenie atrybutu 'volume' z wartością '-100' sugeruje błędne podejście do zarządzania głośnością, gdyż głośność powinna być regulowana w sposób programowy, często przy użyciu JavaScript, aby zapewnić bardziej precyzyjną kontrolę nad poziomem dźwięku. Z kolei 'balance' także nie jest standardowym atrybutem HTML i nie istnieje możliwość bezpośredniego jego zastosowania w tagach HTML dla dźwięku. Aby zrównoważyć dźwięk, należy skorzystać z dedykowanych narzędzi audio w JavaScript lub edytorów audio. Warto również zauważyć, że 'loop="10"' jest błędnym wykorzystaniem atrybutu 'loop', który w HTML działa jako prosty przełącznik, bez możliwości określenia liczby powtórzeń. Przykład wartości boolean 'loop' w tagu <audio> polega na tym, że plik audio będzie powtarzany w nieskończoność, a nie przez 10 razy. Te nieporozumienia mogą prowadzić do rozczarowania wśród deweloperów, jeśli nie są świadomi funkcji i ograniczeń atrybutów HTML. Kluczowe jest zrozumienie, że użycie atrybutów powinno być zgodne z ich przeznaczeniem w standardach HTML, aby zapewnić prawidłowe działanie aplikacji webowych.

Pytanie 28

W języku CSS atrybut font-size przyjmuje, zgodnie z nazwami, wartości

A. jedynie small, smaller, large, larger

B. z zestawu xx-small, x-small, medium, large, x-large, xx-large

C. wyłącznie small, medium, large

D. zaledwie big oraz small

Właściwość font-size w CSS pozwala na określenie rozmiaru czcionki za pomocą różnych wartości, w tym predefiniowanych słów kluczowych, które umożliwiają łatwe dostosowanie wielkości tekstu w dokumentach HTML. Oprócz typowych wartości takich jak small, medium i large, CSS oferuje również bardziej szczegółowe opcje, takie jak xx-small, x-small, x-large oraz xx-large. Dzięki temu projektanci mogą lepiej dopasować rozmiar tekstu do kontekstu wizualnego strony. Użycie tych wartości pozwala na uniknięcie problemów z uniwersalnością, gdyż są one zrozumiałe i zgodne z różnymi rozdzielczościami ekranów. Na przykład, podczas projektowania responsywnej witryny, zastosowanie wartości xx-large dla nagłówków oraz x-small dla przypisów skutecznie poprawia czytelność i estetykę. Zgodnie z najlepszymi praktykami, warto również rozważyć użycie jednostek względnych, takich jak em czy rem, co pozwala na jeszcze większą elastyczność w dostosowywaniu rozmiarów tekstu do preferencji użytkownika oraz rozmiaru ekranu.

Pytanie 29

Jak zapisać marginesy zewnętrzne: górny i dolny 20 px, lewy i prawy 40 px?

margin: 40px 20px;

margin: 20px 20px 40px 40px;

margin: 20px 40px;

margin: 20px 40px 40px 20px;

Kolejność ma znaczenie. margin: 40px 20px; ustawia odwrotnie (góra/dół 40, boki 20). Zapisy czterowartościowe margin: 20px 20px 40px 40px; i margin: 20px 40px 40px 20px; idą w kolejności góra-prawo-dół-lewo i dają inny układ niż wymagany. Poprawny jest margin: 20px 40px;.

Pytanie 30

W której z technologii NIE da się przetwarzać danych wprowadzonych przez użytkownika na stronie WWW?

A. AJAX

B. JavaScript

C. CSS

D. PHP

Przetwarzanie danych wymaga logiki programistycznej. PHP robi to na serwerze, JavaScript w przeglądarce, a AJAX wymienia dane z serwerem w tle. CSS jako język stylów nie przetwarza danych wejściowych - odpowiada tylko za wygląd.

Pytanie 31

Emblemat systemu CMS o nazwie Joomla! to

A. C.

B. D.

C. B.

D. A.

Logo systemu CMS Joomla! różni się od logotypów innych znanych systemów jak Drupal czy WordPress, co jest dość oczywiste. Zrozumienie ich to klucz do ogarnięcia tych platform, bo każda z nich ma swoje zastosowania i funkcje. Drupala przedstawia niebieska kropla, a to narzędzie jest naprawdę potężne do budowy złożonych systemów webowych, ale potrzeba sporej wiedzy programistycznej, więc początkujący mogą mieć z nim trudności. Z kolei WordPress z literą W w czarnym kółku to najpopularniejszy CMS, zwłaszcza wśród blogerów i małych firm, bo jest łatwy w obsłudze. Ale ten logo z pomarańczową gwiazdką nie jest związane z żadnym z tych CMS-ów, więc można się w tym pogubić. Trzeba zrozumieć różnice i jak się te systemy wizualnie identyfikuje, żeby mądrze wybierać platformy do swoich projektów. Kluczowe jest nie tylko widzieć logotypy, ale jeszcze ogarnąć, co każdy z tych systemów potrafi, żeby skutecznie je wykorzystać w pracy.

Pytanie 32

Który z przedstawionych obrazów został przetworzony przy użyciu podanego stylu CSS?

A. Rys. B

B. Rys. D

C. Rys. A

D. Rys. C

Wybór Rys. A jako poprawnej odpowiedzi jest uzasadniony zastosowaniem właściwości CSS, które są użyte w stylu. Styl CSS określa padding na 5 pikseli, co oznacza, że wokół obrazu powinna być przestrzeń wynosząca dokładnie 5 pikseli. Właściwość border ustawia obramowanie na 1 piksel, w kolorze szarym i o stylu solid, co oznacza ciągłą linię otaczającą obraz. Z kolei border-radius o wartości 10 pikseli zaokrągla rogi obramowania, co nadaje całości bardziej zaokrąglony kształt. Wszystkie te cechy są widoczne na obrazie Rys. A. W praktyce stosowanie właściwości takich jak border-radius jest często używane w projektach webowych, aby uzyskać bardziej estetyczne i nowoczesne efekty wizualne. Zaokrąglone krawędzie są estetycznie przyjemniejsze dla użytkownika i mogą poprawić czytelność oraz odbiór wizualny strony. Znajomość tych właściwości CSS jest niezbędna dla każdego front-end developera, który dąży do tworzenia nowoczesnych i funkcjonalnych interfejsów użytkownika. Praktyczne zastosowanie tego stylu może być widoczne w projektach stron internetowych, aplikacjach sieciowych oraz w tworzeniu elementów UI, które zachowują spójność wizualną z resztą projektu.

Pytanie 33

W tabeli pokazano cechy pliku graficznego. Aby rysunek ładował się szybciej na stronie WWW, należy

Wymiary: 4272 x 2848px
 Rozdzielczość: 72 dpi
 Format: JPG

A. zmienić format grafiki na CDR

B. zmniejszyć wymiary rysunku

C. zwiększyć rozdzielczość

D. zmienić proporcje szerokości do wysokości

Zmniejszenie wymiarów rysunku to kluczowy krok w optymalizacji czasu ładowania grafiki na stronę WWW. Mniejsze wymiary oznaczają mniejszą ilość danych do przesłania, co skraca czas ładowania strony. Praktycznym przykładem jest zmniejszenie wymiarów obrazu z 4272 x 2848 pikseli do bardziej standardowego rozmiaru, jak np. 1920 x 1080 pikseli dla grafik wyświetlanych na ekranach. Zmniejszenie wymiarów nie tylko przyspiesza ładowanie ale także zmniejsza zużycie transferu danych co jest istotne przy ograniczeniach mobilnych. Warto pamiętać że mniejsze grafiki są też mniej zasobożerne dla urządzeń użytkowników co wpływa na ogólną wydajność strony. Zastosowanie odpowiednich wymiarów jest zgodne z dobrymi praktykami optymalizacji webowej rekomendowanymi przez Google PageSpeed Insights i inne narzędzia analityczne. Optymalizacja grafiki poprzez zmniejszenie jej wymiarów jest podstawową czynnością w procesie tworzenia responsywnych i szybko działających witryn internetowych.

Pytanie 34

Parametr face elementu <font> jest używany do wskazania

A. rozmiaru czcionki

B. koloru czcionki

C. efektów czcionki

D. nazwa czcionki

Odpowiedzi sugerujące, że parametr face dotyczy barwy, wielkości lub efektów czcionki opierają się na nieprawidłowym zrozumieniu funkcji znacznika <font>. Chociaż kolory czcionek można faktycznie definiować w HTML, to odpowiedzialny za nie jest inny atrybut – color. Warto zauważyć, że barwa tekstu jest istotnym elementem projektowania stron, ale jest to niezwiązane z parametrem face. Wielkość czcionki z kolei jest regulowana przez atrybut size, co również jest osobną kwestią. Efekty czcionki, takie jak pogrubienie czy kursywa, są osiągane za pomocą atrybutów takich jak bold i italic, natomiast face precyzuje wyłącznie nazwę czcionki. Powszechnym błędem w myśleniu jest zakładanie, że wszystkie aspekty stylizacji czcionek są ze sobą powiązane w jednym parametrze. Kluczowe jest zrozumienie, że HTML i CSS mają różne role w tworzeniu stron internetowych. HTML skupia się na strukturze dokumentu, podczas gdy CSS odpowiada za jego wygląd. W przypadku nowoczesnych praktyk kodowania, atrybut face jest uznawany za przestarzały, co sprawia, że korzystanie z CSS jest bardziej efektywne i zgodne z aktualnymi standardami projektowania stron. Zamiast polegać na starych metodach, warto dostosować się do współczesnych technik kodowania, które oferują większą elastyczność oraz lepsze wsparcie dla responsywności stron.

Pytanie 35

W zapisie rgba(100, 40, 50, 0.2) czego dotyczy OSTATNIA wartość?

A. przezroczystości, gdzie 1 = pełna przezroczystość, 0 = brak

B. nasycenia koloru czarnego

C. saturacji barw RGB

D. przezroczystości, gdzie 0 = pełna przezroczystość, 1 = brak

W zapisie rgba(100, 40, 50, 0.2) ostatnia wartość to kanał ALFA (przezroczystość): 0 oznacza pełną przezroczystość (element niewidoczny), a 1 brak przezroczystości (pełna krycie). Tu 0.2 to kolor mocno prześwitujący. Zapamiętaj: w rgba czwarta liczba to krycie - 0 znika, 1 widać w pełni.

Pytanie 36

Emblemat systemu CMS o nazwie Joomla! to

A. Rys. D

B. Rys. C

C. Rys. B

D. Rys. A

Logo przedstawione na Rys. A nie jest związane z Joomla!, ale z systemem Drupal. Drupal, podobnie jak Joomla!, jest systemem zarządzania treścią, ale różnią się one filozofią i strukturą. Drupal często wybierany jest do bardziej złożonych projektów, które wymagają dużej elastyczności i skalowalności, jednak jego administracja może być bardziej skomplikowana w porównaniu do Joomla!. Rys. C przedstawia logo mniej znanego systemu CMS o nazwie Mambo, który był pierwowzorem Joomla!, ale obecnie jest rzadko używany z powodu społeczności, która przeniosła się do Joomla!. Z kolei Rys. D to logo WordPressa, najpopularniejszego CMS na świecie, znanego z prostoty użycia i ogromnej liczby dostępnych wtyczek oraz motywów, co czyni go idealnym wyborem dla blogów i stron komercyjnych. Łatwość, z jaką można zmieniać wygląd i funkcjonalności WordPressa, przyciąga użytkowników, którzy preferują szybkie wdrożenie i łatwość obsługi. Rozpoznanie, które logo reprezentuje dany CMS, jest ważne dla specjalistów IT, ponieważ pozwala na szybki wybór odpowiedniej platformy do określonych potrzeb projektowych oraz unikanie potencjalnych błędów związanych z wyborem nieodpowiedniego narzędzia do realizacji zamierzonych celów. Zrozumienie tych różnic jest kluczowe dla efektywnego zarządzania projektami webowymi i dostosowania technologii do specyfiki zadania oraz wymagań klienta. Wybór odpowiedniego systemu CMS powinien być oparty na analizie potrzeb projektu oraz kompetencjach zespołu, co pozwala na optymalizację workflow i osiągnięcie zamierzonych celów biznesowych w sposób efektywny i zrównoważony.

Pytanie 37

Który znacznik daje TAKI SAM efekt wizualny co <i> (kursywa)?

<em>

<u>

<strong>

<pre>

Znacznik <em> domyślnie wyświetla tekst KURSYWĄ, tak samo jak <i>, więc bez stylów CSS wyglądają identycznie. Różnią się znaczeniem: <em> niesie nacisk znaczeniowy (emphasis), a <i> to czysto wizualne pochylenie. Dlatego ten sam efekt co <i> daje <em>.

Pytanie 38

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

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

B. w <body>, w znaczniku <html>

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

D. w <head>, w znaczniku <style>

Informacje o autorze, opisie i słowach kluczowych to METADANE strony - umieszcza się je w sekcji <head> w znaczniku <meta> (np. <meta name="author" ...>). Dlatego należą do <head>, w <meta>.

Pytanie 39

W CSS zdefiniowano styl dla pola edycji. Taki obszar będzie miał jasnozielone tło

input:focus { background-color: LightGreen; }

A. po kliknięciu myszą w celu wprowadzenia tekstu

B. w każdej sytuacji

C. gdy zostanie na niego najechane kursorem myszy bez kliknięcia

D. jeśli jest to pierwsze wystąpienie tego elementu w dokumencie

W języku CSS pseudoklasa :focus jest używana do definiowania stylów dla elementów, które są w stanie aktywnego fokusu. W przypadku elementów formularza, takich jak pola tekstowe input, fokus uzyskuje się poprzez kliknięcie myszą lub użycie klawisza tab, co pozwala na wprowadzenie tekstu. Pseudoklasa :focus umożliwia stylizację elementu tylko wtedy, gdy jest aktywny, co jest kluczowe dla poprawy użyteczności interfejsu użytkownika. W przykładzie podanym w pytaniu, gdy pole edycyjne input uzyska fokus, jego tło zmieni się na jasnozielone dzięki właściwości background-color ustawionej na LightGreen. Takie zastosowanie stylów CSS jest powszechne w projektowaniu formularzy, gdzie wizualne wskazanie aktywnego elementu jest istotne dla użytkownika. Dobre praktyki projektowania interfejsów kładą nacisk na czytelność i intuicyjność, co zwiększa dostępność i wygodę użytkowania aplikacji webowych. Stylowanie z wykorzystaniem pseudoklasy :focus pozwala projektantom i deweloperom tworzyć interfejsy, które są nie tylko estetyczne, ale także funkcjonalne, wspierając użytkowników w efektywnym korzystaniu z aplikacji.

Pytanie 40

W formularzu zdefiniowano kontrolki do wpisania imienia i nazwiska. Który atrybut reprezentuje podpowiedź umiejscowioną w polu kontrolki, znikającą w momencie, gdy użytkownik rozpocznie wpisywanie wartości?

<label for="imie">Imię: </label>
<input id="imie" value="Wpisz dane" title="Wpisz imię"><br>
<label for="nazw">Nazwisko: </label>
<input id="nazw" placeholder="Wpisz dane" title="Wpisz nazwisko">

A. value

B. placeholder

C. for

D. title

Wybrałeś niepoprawną odpowiedź. Atrybut 'placeholder' w elemencie input HTML jest używany do wyświetlania podpowiedzi wewnątrz pola formularza, która znika, gdy użytkownik zaczyna wpisywanie danych. Inne atrybuty, takie jak 'title', 'value' i 'for', mają inne zastosowania. Atrybut 'title' służy do dodawania etykietki wyświetlanej po najechaniu kursorem na element, a nie do wyświetlania podpowiedzi w polu formularza. Atrybut 'value' określa domyślną wartość pola formularza, a nie podpowiedź dla użytkownika. Wreszcie, atrybut 'for' jest używany do powiązania etykiety z konkretnym polem input, a nie do wyświetlania podpowiedzi. Pamiętaj, że ważne jest zrozumienie, do czego służy każdy atrybut, aby móc skutecznie tworzyć interaktywne formularze HTML.

Rozpocznij nowy egzamin

Powrót do strony głównej