Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 12 czerwca 2026 09:47
Data zakończenia: 12 czerwca 2026 10:04

Egzamin niezdany

Wynik: 17/40 punktów (42,5%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Aby wykonać przycisk na stronę internetową zgodnie z przedstawionym wzorem, w programie graficznym należy skorzystać z opcji:

A. zniekształcenie i deformacja

B. zaokrąglenie narożników (prostokąt z zaokrąglonymi rogami)

C. propagacja wartości

D. wybór eliptyczny

Wzór przedstawia prostokątny przycisk z zaokrąglonymi rogami. Taki kształt rysuje się w programie graficznym narzędziem prostokąta z zaokrąglonymi rogami (albo zaokrąglając zaznaczenie o zadanym promieniu), co daje równe, gładkie narożniki zgodne z przykładem. Dlatego poprawna jest opcja zaokrąglenia narożników.

Pytanie 2

Dokument HTML określa akapit oraz grafikę. Aby grafika była umieszczona przez przeglądarkę w tej samej linii co akapit po jego lewej stronie, w stylu CSS grafiki należy ustawić właściwość

A. align:left;

B. alt:left;

C. float:left;

D. style:left;

Właściwości 'style:left;' oraz 'align:left;' są przykładami powszechnych nieporozumień dotyczących stylizacji elementów w CSS. 'Style:left;' nie istnieje jako właściwość CSS, co prowadzi do błędów w interpretacji przez przeglądarki. Z kolei 'align:left;' stosowano w przeszłości w kontekście HTML, ale obecnie jest przestarzałą metodą, nie zalecaną w nowoczesnym kodowaniu. Współczesne standardy zalecają korzystanie z CSS do zarządzania układem i pozycjonowaniem elementów, co czyni 'align:left;' niewłaściwym wyborem w kontekście współczesnego web designu. Zastosowanie nieodpowiednich właściwości CSS może prowadzić do problemów z responsywnością, a także do trudności w utrzymaniu i rozwoju kodu. Warto zwrócić uwagę, że właściwości CSS powinny być używane zgodnie z ich przeznaczeniem, dlatego kluczowe jest zrozumienie, jak działają różne techniki pozycjonowania, aby skutecznie projektować strony internetowe. Zamiast polegać na przestarzałych metodach, nowoczesne podejście do stylizacji stron powinno opierać się na elastycznych układach opartych na Flexbox lub CSS Grid.

Pytanie 3

Jaką rozdzielczość należy przyjąć, aby uzyskać proporcje obrazu 16:9, zakładając, że piksel ma formę kwadratu?

A. 800 na 480 pikseli

B. 320 na 240 pikseli

C. 1366 na 768 pikseli

D. 2560 na 2048 pikseli

Pozostałe opcje rozdzielczości nie spełniają wymogów proporcji 16:9. Rozdzielczość 320 na 240 pikseli, choć popularna w starszych urządzeniach, ma proporcje 4:3, co jest niewłaściwe dla szerokokątnych zastosowań i nie oddaje pełni nowoczesnych treści wizualnych. W przypadku rozdzielczości 800 na 480 pikseli, proporcje wynoszą około 15:9, co również nie jest zgodne z wymaganym standardem 16:9. Ta rozdzielczość może być używana w niektórych telefonach komórkowych, ale nie nadaje się do oglądania współczesnych filmów i programów telewizyjnych, które są produkowane w formacie 16:9. Natomiast rozdzielczość 2560 na 2048 pikseli, mimo że oferuje wysoką jakość obrazu, ma proporcje 5:4, co jest zbliżone do formatu 4:3 i nie odpowiada wymaganiom współczesnych treści wizualnych. Proporcje te są niestandardowe i nie są idealne do wyświetlania materiałów wideo, co ogranicza ich zastosowanie w nowoczesnych mediach.

Pytanie 4

Który znacznik HTML umożliwia DYNAMICZNE generowanie grafiki na stronie (bez dodatkowych plików)?

<img>

<canvas>

<object>

<embed>

Pytanie dotyczy generowania grafiki w locie skryptem. <img> tylko wyświetla gotowy plik. <object> i <embed> osadzają zewnętrzne zasoby (np. PDF, multimedia), a nie rysują grafiki kodem. Dynamiczne tworzenie grafiki na stronie umożliwia <canvas>.

Pytanie 5

Kolor zielony to szesnastkowo #008000. Jaki to zapis RGB?

rgb(0, 80, 0)

rgb(0, 160, 0)

rgb(0, 100, 0)

rgb(0, 128, 0)

Pozostałe odpowiedzi błędnie przeliczają parę 80. To nie 80 dziesiętnie (taki byłby zapis #005000), nie 160 (#00A000) ani 100 (#006400). Szesnastkowe 80 równa się 128, więc #008000 to rgb(0, 128, 0).

Pytanie 6

Grafika, która ma być pokazana na stronie, powinna mieć transparentne tło. Podaj format pliku graficznego, w którym należy go zapisać.

A. PNG

B. JPEG

C. CDR

D. BMP

Format PNG (Portable Network Graphics) jest idealnym rozwiązaniem dla obrazów z przezroczystym tłem, ponieważ obsługuje kanał alpha, który umożliwia definiowanie przezroczystości poszczególnych pikseli. Dzięki temu, gdy obraz PNG jest umieszczany na różnym tle, zachowuje naturalny wygląd i nie wymaga dodatkowego dostosowywania, co jest szczególnie ważne w projektach graficznych, które wymagają elastyczności w prezentacji. Przykładowe zastosowania PNG obejmują ikony, logo oraz wszelkie grafiki, które muszą być nałożone na inne elementy wizualne bez widocznych krawędzi czy tła. W branży grafiki komputerowej oraz web designu, PNG stał się standardem dla materiałów wymagających wysokiej jakości obrazu z zachowaniem przezroczystości. Dobrą praktyką jest również stosowanie PNG w przypadku grafik, które zawierają tekst, ponieważ format ten nie wprowadza strat jakości, co może mieć miejsce w przypadku innych formatów kompresji. Warto również zaznaczyć, że PNG nie traci jakości przy wielokrotnym zapisywaniu, co czyni go preferowanym wyborem tam, gdzie jakość jest kluczowa.

Pytanie 7

Na przedstawionym obrazie widać wynik formatowania przy użyciu styli CSS oraz kod HTML, który go generuje. Przy założeniu, że marginesy wewnętrzne wynoszą 50 px, a zewnętrzne 20 px, jak wygląda styl CSS dla tego obrazu?

A. Rys. C

B. Rys. D

C. Rys. B

D. Rys. A

Błędne odpowiedzi wynikają głównie z nieprawidłowego przypisania wartości marginesów i marginesów wewnętrznych w stylach CSS. W przypadku niepoprawnych stylów, takich jak w Rys. A i D, zastosowano linię przerywaną, co nie spełnia warunków pytania, które wymaga zastosowania linii ciągłej. Solidna linia graniczna jest bardziej preferowana w projektach profesjonalnych, ponieważ dodaje wyrazistości i estetyki. Warianty, gdzie nie zachowano odpowiednich wartości marginesów i marginesów wewnętrznych, mogą prowadzić do niezamierzonego zachowania w układzie strony, takich jak zły odstęp między elementami, co negatywnie wpływa na użyteczność i estetykę interfejsu użytkownika. Niewłaściwe ustawienie tych wartości często wynika z niedostatecznego zrozumienia modelu pudełkowego w CSS, który jest fundamentem w projektowaniu rozmieszczenia elementów na stronie. Model pudełkowy umożliwia dokładne określenie, jak elementy są wyświetlane, co jest niezbędne do tworzenia responsywnych i estetycznie przyjemnych stron internetowych. Zrozumienie i prawidłowe zastosowanie marginesów i marginesów wewnętrznych jest kluczowe dla osiągnięcia profesjonalnych wyników w projekcie.

Pytanie 8

Który z podanych formatów pozwala na zapis zarówno dźwięku, jak i obrazu?

A. PNG

B. MP3

C. MP4

D. WAV

Format MP4, znany również jako MPEG-4 Part 14, jest jednym z najpopularniejszych formatów multimedialnych, który umożliwia jednoczesny zapis zarówno dźwięku, jak i obrazu. Dzięki zastosowaniu zaawansowanej kompresji, MP4 pozwala na przechowywanie wysokiej jakości materiałów w stosunkowo małych plikach, co czyni go idealnym do przesyłania i strumieniowania w Internecie. MP4 obsługuje wiele kodeków, takich jak H.264 dla wideo oraz AAC dla dźwięku, co pozwala na szeroką kompatybilność z różnymi urządzeniami, od smartfonów po odtwarzacze multimedialne. Format ten jest zgodny z wieloma standardami, co czyni go wszechstronnym wyborem dla twórców treści. Przykłady jego zastosowania obejmują filmy wideo na platformach streamingowych, klipy muzyczne i wideoklipy. Dzięki swoim zaletom, MP4 stał się de facto standardem w przemyśle multimedialnym, co w znacznym stopniu przyczyniło się do jego popularności oraz wszechstronności.

Pytanie 9

Której pseudoklasy/pseudoelementu użyć, aby wyróżnić kolorem wiersz tabeli, NAD którym jest kursor?

:visited

::first-line

::marker

:hover

Pseudoklasa :hover stylizuje element, NAD którym znajduje się kursor - np. tr:hover { background: #eee; } podświetli wiersz tabeli pod myszą. Dlatego do tego efektu służy :hover.

Pytanie 10

Co spowoduje zapis

h2 { background-color: green; }

A. zielone tło nagłówków drugiego poziomu (<h2>)

B. zieloną czcionkę nagłówków drugiego poziomu

C. zieloną czcionkę wszystkich nagłówków

D. zielone tło całej strony

Reguła h2 { background-color: green; } ustawia zielone TŁO elementom <h2>, czyli nagłówkom drugiego poziomu. Selektor h2 ogranicza działanie tylko do tych nagłówków. Dlatego daje zielone tło nagłówków <h2>.

Pytanie 11

Jak nazywa się metoda dodawania arkusza stylów do dokumentu HTML zastosowana w poniższym kodzie?

<p style="color: red;">tekst paragrafu</p>

A. Styl alternatywny, zewnętrzny

B. Styl zewnętrzny

C. Styl wewnętrzny

D. Styl wpisany, lokalny

Podczas analizy alternatywnych metod dołączania arkuszy stylów do HTML, warto skupić się na ich kontekście i funkcjonalności. Styl alternatywny, zewnętrzny, najczęściej odnosi się do zewnętrznych plików CSS, które są dołączane do dokumentu HTML przy użyciu tagu <link>. Jest to podejście, które pozwala na centralne zarządzanie stylami dla całej strony, co zwiększa modularność i ułatwia aktualizacje. Styl wewnętrzny to metoda, w której style są umieszczane w sekcji <style> w nagłówku dokumentu. Chociaż oba te podejścia mają swoje zastosowania, ich niepoprawne zrozumienie może prowadzić do chaosu w kodzie. Styl wpisany, lokalny, z kolei, jest odpowiedni tylko dla niewielkich, jednorazowych stylizacji. W przypadku bardziej złożonych projektów, poleganie na stylach wpisanych może prowadzić do problemów z zarządzaniem i duplikacją kodu. Użytkownicy mogą mylić styl wpisany z innymi metodami, co może wynikać z braku wiedzy na temat ich zastosowań. Kluczowym błędem jest utożsamianie lokalnych stylów z bardziej uniwersalnymi rozwiązaniami, co w dłuższej perspektywie może prowadzić do trudności w utrzymaniu i aktualizacji projektów. Teoretyczne podejście do stylizacji w HTML wymaga zrozumienia, że różne metody mają swoje miejsce i zastosowanie, a ich wybór powinien być uzależniony od specyfiki projektu.

Pytanie 12

Jak w CSS ustawić, aby hiperłącze nieodwiedzone było żółte, a odwiedzone zielone?

a:hover { color: yellow; } a:visited { color: green; }

a:hover { color: green; } a:link { color: yellow; }

a:link { color: yellow; } a:visited { color: green; }

a:visited { color: yellow; } a:link { color: green; }

Pozostałe zapisy mylą pseudoklasy lub kolory. Wariant z a:visited { color: yellow; } i a:link { color: green; } zamienia kolory miejscami - nieodwiedzony wyszedłby zielony zamiast żółty. Dwie inne odpowiedzi używają :hover, które reaguje na najechanie kursorem, a nie na to, czy link był odwiedzony, i pomijają regułę dla stanu :link. Stan nieodwiedzony opisuje :link, a odwiedzony :visited, dlatego poprawny jest zapis a:link { color: yellow; } a:visited { color: green; }.

Pytanie 13

Który z obrazków ilustruje efekt działania podanego fragmentu kodu HTML?

A. Obrazek D

B. Obrazek A

C. Obrazek B

D. Obrazek C

Prawidłowa odpowiedź to C ponieważ atrybut rowspan="2" w komórce oznacza że komórka ta zajmuje miejsce w dwóch wierszach. W kodzie HTML mamy tabelę z dwoma wierszami. W pierwszym wierszu znajdują się dwie komórki pierwsza z tekstem 'pierwszy' ma ustawiony rowspan na 2 co sprawia że zajmuje miejsce w obu wierszach tabeli. Druga komórka w pierwszym wierszu zawiera tekst 'drugi'. W drugim wierszu znajduje się jedna komórka z tekstem 'trzeci'. Taki układ powoduje że komórka z 'pierwszy' rozciąga się na wysokość dwóch wierszy a pozostałe komórki 'drugi' i 'trzeci' są obok siebie w pierwszym i drugim wierszu obok tej rozciągniętej komórki. Zastosowanie atrybutu rowspan to popularna technika w tworzeniu złożonych układów tabeli i pozwala na efektywne wykorzystanie przestrzeni układu. Jest to dobra praktyka stosowana w celu zachowania czytelności danych w tabelach na stronach internetowych a także pomagająca w poprawnym renderowaniu danych w czytnikach ekranu co wspiera dostępność strony WWW.

Pytanie 14

Jaki wynik pojawi się po wykonaniu zaprezentowanego kodu HTML?

A. Odpowiedź D

B. Odpowiedź C

C. Odpowiedź B

D. Odpowiedź A

W analizie kodu HTML istotne jest zrozumienie struktury zagnieżdżonych list. Błędne odpowiedzi wynikają z niedokładnej interpretacji hierarchii i stylizacji list. Listy uporządkowane oznaczone tagiem ol oraz nieuporządkowane ul są podstawą do strukturalizacji informacji w HTML. Częsty błąd polega na nieuwzględnieniu, jak przeglądarki interpretują zagnieżdżone listy. Element ol z atrybutami type i start zmienia styl numeracji. Wersje z atrybutem type=A zmieniają numerację na literową, a start=4 decyduje o punkcie startowym. Pominięcie tego aspektu prowadzi do błędnych wniosków. Dobre praktyki obejmują klarowność struktury HTML poprzez właściwe użycie tagów i atrybutów, co jest kluczowe dla dostępności i użyteczności stron. Przy projektowaniu, warto pamiętać o spójności formatowania i zgodności z semantyką HTML, co poprawia doświadczenia użytkowników i wydajność SEO. Właściwe zrozumienie i zastosowanie atrybutów list ułatwia zarządzanie złożonymi strukturami na stronach internetowych.

Pytanie 15

Wskaź poprawną formę kodowania polskich znaków w pliku HTML?

A. <meta charset="UTF-8">

B. <meta content='UTF8'>

C. <meta char set= "UTF-8">

D. <meta "content=UTF-8">

Odpowiedź <meta charset="UTF-8"> to strzał w dziesiątkę! To zgodny z nowoczesnymi standardami HTML sposób na określenie kodowania znaków w dokumencie. Dzięki temu, że używamy atrybutu 'charset' z wartością 'UTF-8', mówimy przeglądarkom, że tekst powinien być interpretowany według tego kodowania. UTF-8 jest super popularne, bo obsługuje wszystkie znaki w Unicode. To oznacza, że możemy pisać wszystkie polskie znaki diakrytyczne, czyli te jak ą, ć, ę, ł itd., bez obaw o błędy w wyświetlaniu. Jeśli wstawisz ten tag w sekcji <head> swojego dokumentu HTML, masz pewność, że strona będzie dobrze wyglądać w różnych przeglądarkach i na różnych urządzeniach. Dobrze jest umieszczać go na początku sekcji <head>, żeby uniknąć problemów z pokazywaniem treści. Co więcej, korzystanie z UTF-8 jest rekomendowane przez W3C, więc to naprawdę dobry wybór dla nowoczesnych aplikacji webowych.

Pytanie 16

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. A.

B. D.

C. C.

D. B.

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 17

Podczas przygotowywania grafiki do umieszczenia na stronie internetowej konieczne jest wycięcie tylko pewnego fragmentu. Jak nazywa się ta czynność?

A. łączanie warstw.

B. kadrowanie.

C. zmiana rozmiaru.

D. odwracanie obrazu.

Skalowanie to po prostu zmiana rozmiaru obrazka, ale nie zmienia on jego zawartości. Jak robimy grafikę na stronę, to może to się nie najlepiej skończyć, bo obraz może się zniekształcić, a tego chyba nikt nie chce w profesjonalnych projektach. Odbicie obrazu to lustrzane odwzorowanie grafiki, które tak naprawdę nie ma nic wspólnego z kadrowaniem. Może w sztuce się przyda, ale do wycinania nie pasuje. Łączenie warstw to technika, gdzie nakładamy różne elementy na siebie i to też nie ma nic wspólnego z wycinaniem, a bardziej z integracją. Ogólnie rzecz biorąc, to wszystko wynika z mylenia podstawowych pojęć związanych z edycją grafiki. Ludzie mogą myśleć, że te techniki są podobne, co prowadzi do nieporozumień. Ważne jest, żeby wiedzieć, że każda z tych technik ma swoje cele, a kadrowanie to coś, co skupia się na wycinaniu i kompozycji.

Pytanie 18

Który zapis w HTML deklaruje kodowanie znaków dokumentu?

<charset="UTF-8">

<encoding="UTF-8">

<meta encoding="UTF-8">

<meta charset="UTF-8">

Kodowanie znaków dokumentu deklaruje się znacznikiem <meta charset="UTF-8">, umieszczanym na początku sekcji <head>. Informuje on przeglądarkę, jak interpretować bajty tekstu - UTF-8 obsługuje m.in. polskie znaki diakrytyczne, więc jego brak lub błędne kodowanie powoduje „krzaczki” zamiast ą, ę, ł. Atrybutem niosącym tę informację jest charset. Dlatego poprawny zapis to <meta charset="UTF-8">.

Pytanie 19

W CSS, aby ustawić wcięcie pierwszej linii akapitu na 30 pikseli, należy użyć następującego zapisu

A. p { text-spacing: 30px; }

B. p { line-indent: 30px; }

C. p { line-height: 30px; }

D. p { text-indent: 30px; }

Analizując inne opcje, można zauważyć, że zapisy takie jak line-indent, line-height, czy text-spacing nie są poprawne w kontekście wcięcia pierwszej linii akapitu w CSS. Właściwość line-indent nie istnieje w specyfikacji CSS, co czyni tę odpowiedź zupełnie niewłaściwą. Użytkownicy mogą mylić terminologię, sądząc, że line-indent odnosi się do wcięcia, jednak nie jest to termin rozpoznawany przez standardy CSS. Bardziej odpowiednią właściwością do modyfikacji wysokości linii jest line-height, która jednak nie ma związku z wcięciem tekstu, lecz z odstępem pomiędzy poszczególnymi liniami tekstu w akapicie. Użycie line-height do uzyskania wcięcia prowadzi do nieporozumień i niepożądanych efektów wizualnych. Z kolei text-spacing, będący inną niepoprawną odpowiedzią, nie jest uznaną właściwością CSS i nie wpływa na wcięcia. Dobre praktyki w projektowaniu stron internetowych wymagają znajomości standardów CSS i ich zastosowania w praktyce. Ważne jest, aby przyzwyczaić się do stosowania właściwości, które są uznawane przez wiodące przeglądarki i standardy webowe, aby uniknąć takich błędów i uzyskać zamierzony efekt wizualny. Zapewnienie, że używamy odpowiednich właściwości, jest kluczowe dla poprawności i jakości kodu CSS, który ma bezpośredni wpływ na końcowy rezultat, czyli wygląd i funkcjonalność stron internetowych.

Pytanie 20

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

width

margin

hight

padding

Pozostałe właściwości robią co innego. margin to margines ZEWNĘTRZNY (odstęp od sąsiednich elementów), a nie wewnętrzny. width ustawia szerokość elementu. hight to literówka - prawidłowa nazwa height ustala wysokość. Margines wewnętrzny daje padding.

Pytanie 21

Która zasada dotycząca sekcji <head> w HTML jest POPRAWNA?

A. w sekcji <head> nie wolno umieszczać kodu CSS, tylko odwołanie do pliku

B. w sekcji <head> zawiera się sekcja <body>

C. w sekcji <head> mogą wystąpić <meta>, <title>, <link>

D. w sekcji <head> buduje się szablon strony znacznikami <div>

<body> to OSOBNA sekcja z treścią, nie jest zagnieżdżona w <head>. <div> buduje układ w <body>, nie w nagłówku. W <head> WOLNO też umieścić CSS w <style>, nie tylko odwołanie do pliku. Poprawne jest stwierdzenie o <meta>, <title> i <link>.

Pytanie 22

W języku HTML zapisano formularz. Który z efektów działania kodu będzie wyświetlony przez przeglądarkę zakładając, że w drugie pole użytkownik wpisał wartość "ala ma kota"?

<form>
  <select>
    <option value="v1">Kraków</option>
    <option value="v2">Poznań</option>
    <option value="v3">Szczecin</option>
  </select> <br>
  <input type="password" />
</form>

Efekt 1

Efekt 2

Efekt 3

Efekt 4

A. Efekt 3.

B. Efekt 4.

C. Efekt 1.

D. Efekt 2.

Odpowiedź 'Efekt 2' jest poprawna, ponieważ odpowiada ona opisowi działania kodu HTML formularza. W kodzie HTML formularza, mamy pole wyboru miasta z opcjami 'Kraków', 'Poznań', 'Szczecin', a także pole hasła. W momencie, kiedy użytkownik wpisuje do pola hasła wartość 'ala ma kota', przeglądarka reprezentuje te dane jako ciąg znaków zastępczych, czyli kropeczki. Efekt 2 pokazuje rozwinięte menu wyboru z zaznaczonym 'Kraków' oraz pole hasła z kropeczkami, co jest zgodne z opisanym działaniem formularza przy wpisaniu 'ala ma kota' do pola hasła. Jest to zgodne ze standardami tworzenia formularzy w HTML, gdzie pola hasła są zazwyczaj reprezentowane jako kropeczki dla poprawienia bezpieczeństwa danych użytkownika. Dodatkowo, HTML pozwala na tworzenie różnego rodzaju pól formularzu, które mogą przyjmować różne wartości, co daje duże możliwości personalizacji formularza.

Pytanie 23

Do poprawnego wyświetlania czego służy standard kodowania ISO-8859-2?

A. symboli matematycznych

B. znaków specjalnych języka kodu strony

C. polskich liter (ś, ć, ń, ó, ą)

D. znaków zarezerwowanych języka opisu strony

ISO-8859-2 to kodowanie ZNAKÓW tekstu, a nie symboli matematycznych czy specjalnych znaczników języka opisu strony. Jego rolą jest poprawne odwzorowanie liter narodowych - dla polszczyzny: ś, ć, ń, ó, ą i pozostałych.

Pytanie 24

Gdzie w dokumencie HTML mogą być umieszczane fragmenty kodu JavaScript?

A. tak w sekcji <head>, jak i <body>, w znaczniku <java>

B. jedynie w sekcji <head>, w znaczniku <script>

C. wyłącznie w sekcji <body>, w znaczniku <java>

D. zarówno w sekcji <head>, jak i <body>, w znaczniku <script>

Umieszczanie JavaScript w znaczniku <java> to całkowita pomyłka, bo taki znacznik nie istnieje w HTML. To może być mylące dla początkujących, którzy mogą pomyśleć, że to dobry sposób na dodawanie skryptów. Powinieneś używać znacznika <script>, to jest standard. Innym typowym błędem jest mylenie <head> z <body>. <head> zawiera różne metadane, jak linki do stylów czy skrypty, które powinny być załadowane na start. Ale wrzucanie skryptów tylko do <head> może spowolnić renderowanie treści. Najlepiej korzystać z obu sekcji w odpowiedni sposób, żeby optymalnie ładować stronę. Pamiętaj, że w HTML5 <script> ma atrybuty jak 'async' czy 'defer', które pomagają w zarządzaniu kolejnością skryptów i szybszym ładowaniu strony, co jest bardzo ważne przy tworzeniu nowoczesnych aplikacji.

Pytanie 25

Na ilustracji przedstawiono strukturę bloków na stronie internetowej. Który z poniższych fragmentów CSS odpowiada takim ustawieniom? (Dla uproszczenia pominięto właściwości dotyczące koloru tła, wysokości oraz czcionki)

A. #pierwszy {float:left; width:30%;} #drugi {float:left; width:70%;} #trzeci {float:left; width:70%;} #czwarty {clear:both; }

B. #pierwszy{float:left; width:30%;} #drugi {clear:both; width:70%;} #trzeci {clear:both; width:70%;} #czwarty {float:left; width:100%;}

C. #pierwszy {float:left; width:30%; } #drugi {clear:both; width:70%; } #trzeci {float:left; width:70%; } #czwarty {clear:both; }

D. #pierwszy { width: 30%; } #drugi { width: 70%; } #trzeci { width: 70%; } #czwarty { width: 100%; }

Inne odpowiedzi wykorzystują niewłaściwe zastosowanie właściwości float oraz clear, co skutkuje nieprawidłowym wyświetlaniem elementów na stronie. Użycie clear:both dla elementów, które powinny być wyświetlane w tej samej linii co inne elementy, powoduje, że te elementy są przesuwane do nowej linii, co nie jest zgodne z zamierzonym układem. Clear:both powinno być stosowane w celu zakończenia efektu float i rozpoczęcia nowego wiersza dla elementów, które mają być poniżej tych unoszących się. Ponadto brak użycia float przy elementach takich jak #drugi i #trzeci oznacza, że nie będą one ułożone w jednej linii, co jest kluczowe dla zaawansowanego rozplanowania przestrzeni na stronie. Niepoprawne użycie tych właściwości może prowadzić do niezgodności w różnych przeglądarkach, co jest częstym błędem w projektowaniu stron. Wiedza o tym, jak i kiedy stosować float oraz clear, jest niezbędna w tworzeniu funkcjonalnych i estetycznych layoutów. Zrozumienie właściwego użycia tych mechanizmów pozwala na unikanie problemów związanych z układem strony, szczególnie w kontekście responsywności i kompatybilności z różnymi urządzeniami. Dlatego ważne jest, aby dobrze zrozumieć zasady relacji między elementami, aby tworzyć bardziej złożone struktury stron internetowych, które są zgodne z obecnymi standardami web developmentu.

Pytanie 26

W CSS zapis

a[target="_blank"] {color: yellow;}

spowoduje, że tekst linków przybierze kolor żółty.

A. linków, które otwierają się w tej samej karcie.

B. wszystkich linków.

C. treści akapitu.

D. linków, które otwierają się w nowej karcie.

Odpowiedzi sugerujące, że kolor żółty dotyczy 'wszystkich odnośników', 'tekstu paragrafu' lub 'odnośników, które otwierają się w tej samej karcie' są błędne z kilku powodów. Po pierwsze, selektor CSS 'a[target="_blank"]' jest specyficzny dla odnośników, które otwierają się w nowej karcie, a więc nie obejmuje on wszystkich odnośników. Każdy odnośnik zdefiniowany w HTML jako <a> może mieć różne cele, a atrybut 'target' odgrywa kluczową rolę w tym, jak te odnośniki są obsługiwane przez przeglądarkę. Po drugie, nie istnieje możliwość, aby tekst paragrafu był objęty tym selektorem, ponieważ jest on dedykowany wyłącznie linkom. Warto pamiętać, że CSS służy do stylizacji elementów HTML, a nie do zachowania ich struktury semantycznej. Kolejną nieprawidłową koncepcją jest to, że kolor tekstu dotyczy odnośników otwierających się w tej samej karcie, ponieważ żaden z tych odnośników nie ma przypisanego atrybutu 'target="_blank"'. W praktyce, ważne jest, aby dobrze rozumieć selektory CSS oraz ich zastosowanie, co pozwoli na bardziej precyzyjne projektowanie interfejsów użytkownika oraz zapewnienie lepszej użyteczności i dostępności stron internetowych.

Pytanie 27

Na podstawie filmu wskaż, która cecha dodana do stylu CSS zamieni miejscami bloki aside i nav, pozostawiając w środku blok section?

A. aside {float: left; }

B. nav { float: right; }

C. nav { float: left; } aside { float: left; }

D. nav { float: right; } section { float: right; }

Prawidłowa odpowiedź opiera się na tym, jak działają własności float w CSS i w jakiej kolejności przeglądarka renderuje elementy blokowe. Jeśli w dokumencie HTML kolejność znaczników to np. <aside>, potem <section>, a na końcu <nav>, to bez dodatkowego stylowania wszystkie trzy ustawią się pionowo, jeden pod drugim, w tej właśnie kolejności. Dodanie float zmienia sposób, w jaki elementy „odpływają” od normalnego przepływu dokumentu i jak układają się obok siebie.

W stylu nav { float: right; } section { float: right; } sprawiamy, że zarówno nav, jak i section są przesuwane do prawej krawędzi kontenera, natomiast aside (bez float) pozostaje w normalnym przepływie, czyli z lewej strony. Ponieważ przeglądarka układa elementy w kolejności występowania w kodzie, najpierw wyrenderuje aside po lewej, potem section „odpłynie” w prawo, a na końcu nav też „odpłynie” w prawo, ustawiając się po prawej stronie, ale dalej od góry niż section. Efekt wizualny jest taki, że po lewej mamy aside, po prawej nav, a section ląduje między nimi, dokładnie tak jak było pokazane na filmie.

Moim zdaniem to zadanie dobrze pokazuje, że przy floatach zawsze trzeba myśleć o trzech rzeczach naraz: kolejności elementów w HTML, kierunku „pływania” (left/right) oraz o tym, które elementy pozostawiamy w normalnym przepływie. W praktyce w nowoczesnych projektach częściej używa się flexboxa albo CSS Grid do takich układów, bo są czytelniejsze i mniej problematyczne. Przykładowo, zamiast kombinować z float, można by użyć display: flex; na kontenerze i ustawić order dla aside i nav. Float nadal jednak pojawia się w starszych layoutach i w zadaniach egzaminacyjnych, więc warto dobrze rozumieć jego zachowanie, choćby po to, żeby poprawnie modyfikować istniejące style lub naprawiać „rozjechane” układy w starszych projektach.

Pytanie 28

W języku HTML, atrybut shape w znaczniku area, który definiuje typ obszaru, może mieć wartość

A. rect, sąuare, circle

B. style="margin-bottom: 0cm;">poły, square, circle

C. style="margin-bottom: 0cm;">rect, triangle, circle

D. rect, poły, circle

Atrybut shape znacznika area w języku HTML jest kluczowy dla określenia kształtu interaktywnego obszaru na mapie obrazów. Przyjmuje on wartości, które definiują geometrię obszaru w kontekście mapy, a do najpopularniejszych z nich należą 'rect', 'circle' oraz 'poly'. Wartość 'rect' definiuje prostokątny obszar, gdzie użytkownik może kliknąć w dowolnym miejscu w obrębie prostokąta. 'Circle' z kolei pozwala na stworzenie okrągłego obszaru kliknięcia, definiując jego środek oraz promień. Z kolei 'poly' umożliwia zdefiniowanie wielokątnego obszaru poprzez podanie współrzędnych wierzchołków. Te wartości są zgodne z definicjami przedstawionymi w standardach W3C, które określają sposób, w jaki przeglądarki interpretują te atrybuty. Przykładowo, dla atrybutu shape='rect' można podać współrzędne lewego górnego i prawego dolnego narożnika prostokąta, co sprawia, że jest to użyteczne w implementacji interaktywnych map. Zrozumienie tych wartości jest istotne dla programistów webowych, którzy chcą tworzyć dostępne i interaktywne treści.

Pytanie 29

Której wartości użyć w CSS, aby obramowanie było linią KRESKOWĄ?

dotted

dashed

groove

solid

Decyduje wartość border-style. solid to linia ciągła, dotted to linia z kropek, a groove daje efekt „wytłoczonej” ramki 3D. Linię z kresek daje wartość dashed.

Pytanie 30

Zapis koloru w formacie #ff00e0 jest równoważny reprezentacji

A. rgb(255, 0, 224)

B. rgb(f, 0, e0)

C. rgb(ff, 0, e0)

D. rgb(255, 0, 128)

Odpowiedzi rgb(f, 0, e0) oraz rgb(ff, 0, e0) zawierają błędy dotyczące formatu wartości RGB. W przypadku formatu RGB, wartości składowych koloru muszą być liczbami całkowitymi w przedziale od 0 do 255. W pierwszym przypadku 'f' i 'e0' nie są poprawnymi wartościami, ponieważ 'f' nie reprezentuje liczby w systemie dziesiętnym, a 'e0' nie zostało przeliczone na wartość dziesiętną, co czyni tę odpowiedź niezgodną ze standardami definiowania kolorów. Z kolei druga odpowiedź, rgb(ff, 0, e0), również nie przekształca wartości szesnastkowych na format dziesiętny. Standard RGB wymaga, aby wartości były zrozumiałe dla silnika renderującego, dlatego niepoprawne są wartości, które nie są liczbami całkowitymi. Pojawiają się też koncepcje dotyczące odczytywania wartości szesnastkowych, gdzie podstawowym błędem jest brak znajomości konwersji między tymi systemami liczbowymi. Wartości szesnastkowe trzeba zamieniać na dziesiętne, aby prawidłowo interpretować kolory. W przypadku rgb(255, 0, 128), wartość niebieska została błędnie określona jako 128, co jest znacznie niższe niż 224, co prowadzi do błędnej interpretacji koloru. Używanie błędnych wartości w definicji kolorów może skutkować niezgodnością wizualną w projektach graficznych i webowych.

Pytanie 31

Jaką maksymalną liczbę znaczników <td> można zastosować w tabeli składającej się z trzech kolumn i trzech wierszy, która nie zawiera złączeń między komórkami oraz wiersza nagłówkowego?

A. 9

B. 6

C. 12

D. 3

Odpowiedź 9 jest poprawna, ponieważ w tabeli składającej się z trzech kolumn i trzech wierszy, każdy wiersz może zawierać trzy komórki danych. Zatem, aby obliczyć maksymalną liczbę znaczników <td>, należy pomnożyć liczbę kolumn przez liczbę wierszy: 3 kolumny x 3 wiersze = 9 znaczników <td>. Ważne jest, aby pamiętać, że w kontekście HTML, znacznik <td> służy do definiowania komórek tabeli i jest używany tylko do umieszczania danych w tabeli. Przy projektowaniu tabel w HTML, dobrym rozwiązaniem jest stosowanie przejrzystej struktury oraz odpowiednich znaczników, aby poprawić czytelność i dostępność stron. Zgodnie z dobrymi praktykami, zawsze warto używać znaczników <th> do nagłówków kolumn, ale w tym przypadku, zgodnie z treścią pytania, zakładamy, że nie stosujemy wiersza nagłówkowego. W efekcie maksymalna liczba komórek, które można wykorzystać w takiej tabeli, wynosi 9. Przykładem zastosowania takiej tabeli może być wyświetlanie danych o produktach, gdzie każda komórka zawierać może różne informacje, takie jak nazwa produktu, cena i ilość.

Pytanie 32

Którym znacznikiem wstawić listę NUMEROWANĄ (uporządkowaną)?

<ol>

<dl>

<li>

<ul>

Pozostałe znaczniki tworzą co innego. <ul> to lista PUNKTOWANA (z kropkami, bez numerów). <dl> to lista definicji (pary termin-opis). <li> to pojedynczy ELEMENT listy, a nie cała lista - musi znaleźć się wewnątrz <ol> lub <ul>. Listę numerowaną tworzy <ol>.

Pytanie 33

W HTML5 semantycznym znacznikiem, który służy do określenia dwóch sekcji widocznych po prawej stronie na rysunku, zawierających wiadomości oraz aktualności, jest

A. <main>

B. <footer>

C. <article>

D. <nav>

Bardzo często osoby uczące się HTML5 mylą znaczniki semantyczne, szczególnie gdy chodzi o takie elementy jak <nav>, <main>, <footer> czy <article>. To w sumie zrozumiałe, bo na pierwszy rzut oka mogą się wydawać podobne, ale każdy z nich ma swoje konkretne zadanie. <nav> to sekcja nawigacyjna – zawiera odnośniki do innych części serwisu, więc zwykle stosuje się go do menu, bocznych pasków z linkami czy paneli nawigacyjnych. Umieszczenie w <nav> sekcji z wiadomościami czy aktualnościami to klasyczny przykład złego zrozumienia przeznaczenia tego elementu – w praktyce taka struktura zaburza logikę nawigacji i dostępność strony. <main> z kolei oznacza główną i unikalną treść dokumentu, tej, która jest najważniejsza dla danej podstrony. Jednak <main> używamy tylko raz na stronie – nie powinno się go powielać ani używać do oznaczania pojedynczych sekcji, takich jak wiadomości, bo to prowadzi do błędnej interpretacji przez wyszukiwarki i czytniki ekranowe. <footer> odpowiada za stopkę strony lub sekcji, czyli miejsce na informacje jak prawa autorskie, dane kontaktowe, linki do polityk czy podsumowania – wrzucenie tam wiadomości czy aktualności byłoby mocno nielogiczne. Wybierając niewłaściwy znacznik, można popełnić błąd, który potem utrudnia rozwój strony, jej pozycjonowanie czy poprawność dostępności. Najczęstszy błąd to kierowanie się wyglądem, a nie semantyką – a w HTML5 to właśnie semantyka daje najwięcej korzyści na dłuższą metę.

Pytanie 34

Jaką wartość w formacie heksadecymalnym będzie miała barwa określona kodem rgb(255, 10, 22)?

A. #2551022

B. #FF1016

C. #251022

D. #FF0A16

Wybór błędnych odpowiedzi wynika najczęściej z niezrozumienia zasad konwersji kolorów z formatu RGB do formatu heksadecymalnego. Odpowiedzi takie jak #2551022 czy #251022 sugerują, że użytkownik nie zrozumiał, jak działa system szesnastkowy, w którym każda para cyfr reprezentuje jeden z trzech kanałów koloru. Na przykład, w odpowiedzi #2551022 widzimy zbyt wiele cyfr, co jest niezgodne z formatem heksadecymalnym, który wymaga dokładnie sześciu znaków. Dodatkowo, odpowiedzi te mogą prowadzić do błędnych wyników w projektach graficznych i programistycznych, gdzie precyzyjne określenie kolorów jest kluczowe. W przypadku #FF1016, choć niektóre cyfry są poprawne, znowu pojawia się problem z wartościami kanału zielonego, gdzie odpowiednia wartość powinna być 0A, a nie 10. Przykłady te pokazują, jak ważne jest zrozumienie, że kanały kolorów w RGB są reprezentowane w skali szesnastkowej jako dwucyfrowe liczby szesnastkowe, a ich nadmiar lub zmiana kolejności może prowadzić do nieprawidłowych kolorów. Dobra praktyka w projektowaniu to upewnienie się, że konwersje są wykonywane poprawnie, aby uniknąć niepożądanych wyników.

Pytanie 35

W systemie kolorów RGB kolor żółty uzyskuje się przez zmieszanie dwóch barw: zielonej i czerwonej. Jaki kod szesnastkowy reprezentuje kolor żółty?

A. #FFFF00

B. #F0F0F0

C. #FF00FF

D. #00FFFF

Kolor żółty w palecie RGB jest uzyskiwany przez połączenie maksymalnej wartości czerwonego (FF) oraz maksymalnej wartości zielonego (FF), przy zerowej wartości niebieskiego (00). Kod szesnastkowy #FFFF00 oznacza, że czerwony ma wartość 255 (FF), zielony również ma wartość 255 (FF), a niebieski ma wartość 0 (00). Przykładowe zastosowanie koloru żółtego znajduje się w projektowaniu graficznym, gdzie jest on często wykorzystywany do wyróżniania istotnych elementów, takich jak przyciski lub informacje, które mają przyciągnąć uwagę użytkownika. W kontekście aplikacji internetowych, stosowanie barw RGB zgodnie z ich reprezentacją szesnastkową jest zgodne z dobrymi praktykami w zakresie UX/UI, zapewniając spójność i czytelność interfejsów. Standardy dotyczące kolorów, takie jak WCAG, również zalecają odpowiednie kontrasty, które można osiągnąć przy użyciu kolorów takich jak żółty. Poznanie różnych kodów kolorów oraz ich zastosowań jest kluczowe dla skutecznego projektowania wizualnego, co przyczynia się do lepszej interakcji użytkownika z aplikacjami i stronami internetowymi.

Pytanie 36

Styl ten generuje pojedyncze obramowanie, które charakteryzuje się następującymi właściwościami:

border: solid 1px;
border-color: red blue green yellow;

A. krawędź lewa ma kolor czerwony, krawędź dolna jest w kolorze niebieskim, krawędź prawa jest koloru zielonego, krawędź górna ma kolor żółty

B. krawędź górna jest czerwonego koloru, krawędź lewa jest w kolorze niebieskim, krawędź dolna ma kolor zielony, krawędź prawa ma kolor żółty

C. krawędź górna ma kolor czerwony, krawędź prawa jest w kolorze niebieskim, krawędź dolna ma kolor zielony, krawędź lewa jest koloru żółtego

D. krawędź prawa jest koloru czerwonego, krawędź dolna ma kolor niebieski, krawędź lewa ma kolor zielony, krawędź górna ma kolor żółty

Podana odpowiedź jest prawidłowa, ponieważ opisuje właściwe przypisanie kolorów do krawędzi obramowania według standardów CSS. W zapisie border-color: red blue green yellow; kolory są przypisywane zgodnie z kierunkiem wskazówek zegara, zaczynając od góry. Zatem krawędź górna jest koloru czerwonego, prawa koloru niebieskiego, dolna zielonego, a lewa żółtego. Jest to zgodne z praktykami projektowania stron internetowych, gdzie priorytetem jest zrozumiała i spójna struktura kodu. W praktyce takie zrozumienie pozwala na efektywne tworzenie stylów w CSS, przyspieszając proces tworzenia responsywnych i estetycznych interfejsów użytkownika. Wiedza o przypisywaniu kolorów do krawędzi jest przydatna w tworzeniu zaawansowanych układów graficznych, pozwalając na lepsze wykorzystanie przestrzeni wizualnej i wprowadzenie unikalnych elementów stylistycznych. Takie podejście do CSS jest zgodne z nowoczesnymi standardami projektowania, które kładą nacisk na czytelność i efektywność kodu oraz zapewniają lepsze doświadczenia użytkownika.

Pytanie 37

Dla celu strony internetowej stworzono grafikę rysunek.jpg o wymiarach: szerokość 200 px, wysokość 100 px. Aby zaprezentować tę grafikę jako miniaturę – pomniejszoną z zachowaniem proporcji, można użyć znacznika

A. <img src="/rysunek.png" style="width: 50px">

B. <img src="/rysunek.png">

C. <img src="/rysunek.png" style="width: 25px; height:50px;">

D. <img src="/rysunek.png" style="width: 25px; height:25px;">

Wybór innych opcji, takich jak <img src="/rysunek.png" style="width: 25px; height:50px;"> czy <img src="/rysunek.png" style="width: 25px; height:25px;"> prowadzi do nieproporcjonalnego wyświetlenia obrazu, co skutkuje jego zniekształceniem. Ustalenie zarówno szerokości, jak i wysokości w stylach CSS sprawia, że obrazek jest zmuszony do dopasowania się do tych wymiarów, co narusza jego naturalne proporcje. To podejście jest niezgodne z zaleceniami dotyczącymi responsywności, które sugerują, aby ograniczać się do jednego wymiaru, co pozwala drugiemu na automatyczne dostosowanie. Typowym błędem jest przyjęcie, że podanie obu wymiarów w pikselach zawsze przyniesie optymalny efekt wizualny, co jest mylące i może prowadzić do złego doświadczenia użytkownika. Zniekształcenie obrazów nie tylko obniża estetykę strony, ale także może wpływać na jej użyteczność oraz SEO. Dobrą praktyką jest również używanie atrybutów 'alt' w znacznikach obrazów, aby poprawić dostępność i SEO, co nie zostało uwzględnione w żadnej z opcji. Warto także zauważyć, że stosowanie odpowiednich formatów obrazów i ich optymalizacja pod względem rozmiaru pliku są kluczowe dla przyspieszenia ładowania strony.

Pytanie 38

Którą technologię poleca się, aby treść serwisu mogli edytować użytkownicy bez umiejętności programowania?

A. SSL

B. CMS

C. FTP

D. SEO

Aby treść serwisu mogli edytować użytkownicy bez umiejętności programowania, stosuje się system CMS - zarządza się nią przez gotowy panel, bez pisania kodu. Dlatego poleca się CMS.

Pytanie 39

W firmie zajmującej się technologiami informacyjnymi otwarta jest rekrutacja na stanowisko administratora e-sklepu. Do jego zadań należy instalacja i konfiguracja systemu zarządzania treścią, który jest przeznaczony jedynie dla sklepu internetowego, zmiana szablonów wizualnych oraz dostosowanie grafiki. Jakie umiejętności powinien posiadać nowy pracownik?

A. Photoshop, Gimp, JavaScript

B. HTML, CSS, Photoshop

C. CMS WordPress, HTML, Gimp

D. CMS PrestaShop, CSS, Gimp

Wybór odpowiedzi CMS PrestaShop, CSS, Gimp jest prawidłowy, ponieważ dokładnie odpowiada wymaganiom związanym z rolą administratora sklepu internetowego. PrestaShop to jeden z najpopularniejszych systemów zarządzania treścią (CMS) dedykowanych dla e-commerce. Jego znajomość jest kluczowa, gdyż pozwala na efektywną instalację i konfigurację platformy sklepowej, co jest jednym z głównych obowiązków administratora. CSS jest niezbędnym narzędziem do zmiany szablonów i dostosowania wyglądu sklepu zgodnie z wymaganiami klienta oraz standardami responsywnego designu, co zapewnia lepsze doświadczenia użytkowników na różnych urządzeniach. Gimp jako narzędzie graficzne umożliwia modyfikację grafik i tworzenie nowych elementów wizualnych, co jest istotne dla personalizacji sklepu. Dobrą praktyką w branży jest umiejętność integrowania graficznych oraz technologicznych komponentów w celu stworzenia atrakcyjnej i funkcjonalnej platformy handlowej, co znacząco wpływa na konwersje i wyniki sprzedaży. Ponadto, znajomość PrestaShop otwiera drzwi do wielu zasobów i społeczności, co dodatkowo wspiera rozwój zawodowy administratora.

Pytanie 40

Którego znacznika HTML NIE można użyć do wstawienia grafiki (dynamicznej) na stronę?

<object>

<embed>

<strike>

<img>

Pozostałe znaczniki potrafią umieścić grafikę na stronie. <img> wstawia obraz, a <embed> i <object> osadzają zewnętrzne zasoby (w tym grafikę dynamiczną czy multimedia). Do grafiki nie nadaje się tekstowy <strike>.

Rozpocznij nowy egzamin

Powrót do strony głównej