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 maja 2026 15:53
Data zakończenia: 12 maja 2026 15:57

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

body{
background-image: url"rysunek.gif");
background-repeat: repeat-y;
}
W przedstawionej definicji stylu CSS, powtarzanie dotyczy

A. rysunku znajdującego się w tle strony w pionie

B. rysunku umieszczonego w tle strony w poziomie

C. rysunku osadzonego znacznikiem img

D. tła każdego znacznika akapitu

W definicji stylu CSS, zastosowane tło z rysunkiem 'rysunek.gif' jest powtarzane w pionie dzięki właściwości 'background-repeat: repeat-y'. Oznacza to, że obrazek będzie powielany wzdłuż osi Y, co skutkuje tym, że obrazek jest umieszczany jeden nad drugim, tworząc wrażenie ciągłości. Aby lepiej zrozumieć działanie tej właściwości, warto przyjrzeć się innym ustawieniom tła. Na przykład, właściwość 'background-repeat: repeat' powtarza obraz zarówno w poziomie, jak i w pionie, natomiast 'background-repeat: no-repeat' zapobiega jakimkolwiek powtórzeniom. W standardach CSS, takich jak CSS3, definiowanie tła w ten sposób jest zgodne z zasadami, które pozwalają na elastyczne projektowanie stron internetowych. W praktyce, użycie powtarzającego się tła może być przydatne w przypadku prostych wzorów, które mają stworzyć efekt wizualny, nie obciążając jednocześnie zbytnio zasobów, co jest istotne dla wydajności ładowania strony.

Pytanie 2

Jaką wartość w systemie RGB uzyskamy dla koloru zapisanego w kodzie heksadecymalnym: #1510FE?

A. rgb(21,16,254)

B. rgb(21,16,FE)

C. rgb(15,10,FE)

D. rgb(21,16,255)

Odpowiedzi rgb(15,10,FE), rgb(21,16,FE) oraz rgb(21,16,255) są błędne z różnych powodów, które wynikają z niepoprawnych konwersji wartości heksadecymalnych do systemu RGB. W pierwszym przypadku, rgb(15,10,FE), wartości czerwonej i zielonej zostały błędnie zinterpretowane. Wartości heksadecymalne 15 (0F) i 10 (0A) nie odpowiadają poprawnym konwersjom z systemu szesnastkowego. Wartość niebieska 'FE' w formacie RGB powinna być również przelicza na wartość dziesiętną, a nie pozostawiana w formie heksadecymalnej, co jest kolejnym źródłem błędu w tej odpowiedzi. Z kolei rgb(21,16,FE) zawiera poprawne wartości czerwonej i zielonej, ale niebieska komponenta jest znów nieprzekształcona i pozostaje w formacie szesnastkowym. Ostatnia odpowiedź, rgb(21,16,255), choć zawiera prawidłowe wartości czerwonej i zielonej, wskazuje na niepoprawną wartość niebieską, ponieważ 255 w systemie dziesiętnym nie odpowiada heksadecymalnemu 'FE', które wynosi 254. Typowe błędy myślowe związane z tymi odpowiedziami obejmują niewłaściwe przeliczanie wartości heksadecymalnych oraz brak zrozumienia, jak funkcjonuje konwersja systemów liczbowych. W praktyce, poprawna przekształcenie wartości kolorów jest kluczowe dla spójności wizualnej w projektach graficznych i cyfrowych, co pokazuje znaczenie znajomości sposobu konwersji kolorów we współczesnym designie.

Pytanie 3

W języku HTML, aby stworzyć pole do wprowadzania hasła, w którym wpisywany tekst będzie ukrywany (zastępowany kropkami), należy zastosować znacznik

A. <input name="password" />

B. <form="password" type="password" />

C. <form input type="password" />

D. <input type="password" />

Odpowiedź <input type="password" /> jest poprawna, ponieważ ten znacznik HTML służy do tworzenia pola edycyjnego, w którym wprowadzane dane są maskowane. W przypadku pól do wpisywania haseł, istotne jest, aby użytkownik nie mógł zobaczyć wpisywanego tekstu, co zwiększa poziom bezpieczeństwa. W HTML, atrybut 'type' z wartością 'password' instruuje przeglądarkę, aby ukrywała znaki wprowadzane przez użytkownika, zastępując je zazwyczaj kropkami lub gwiazdkami. Przykładem zastosowania tego typu znacznika może być formularz logowania, gdzie użytkownicy wpisują swoje hasła. Dobrą praktyką jest również zastosowanie odpowiednich etykiet i walidacji, aby zapewnić, że formularz jest użyteczny i zgodny z WCAG (Web Content Accessibility Guidelines). Warto pamiętać, że bezpieczeństwo haseł powinno być również wspierane przez odpowiednie zabezpieczenia po stronie serwera, w tym haszowanie haseł oraz ochrona przed atakami typu brute force.

Pytanie 4

Czy przedstawione w języku CSS ustawienia czcionki będą dotyczyć dla ```* { font-family: Tahoma; color: Teal; }```?

A. znaczników z klasą przypisaną równą *

B. całego dokumentu HTML, niezależnie od późniejszych reguł CSS

C. znaczników o id równym *

D. całego dokumentu HTML, jako domyślne formatowanie dla wszystkich elementów strony

Właściwość CSS zastosowana w podanym kodzie dotyczy wszystkich elementów HTML na stronie, ponieważ użycie selektora * oznacza, że formatowanie będzie miało zastosowanie do każdego elementu, niezależnie od jego typu. Oznacza to, że czcionka Tahoma oraz kolor Teal będą domyślnie stosowane do tekstu we wszystkich znacznikach HTML. Tego rodzaju podejście jest zgodne z dobrymi praktykami w projektowaniu stron, ponieważ pozwala na jednolite formatowanie bez konieczności stylizowania każdego elementu z osobna. Przykładem zastosowania może być stworzenie spójnego wyglądu strony, gdzie wszystkie nagłówki, akapity i inne teksty mają ten sam styl, co poprawia czytelność i estetykę. Dodatkowo, takie zastosowanie stylów jest efektywne, gdyż zmiana stylu w kontekście całej strony odbywa się poprzez edytowanie jednego miejsca w kodzie CSS, co oszczędza czas i zmniejsza ryzyko błędów.

Pytanie 5

W jakim typie pliku powinno się zapisać zdjęcie, aby mogło być wyświetlane na stronie WWW z zachowaniem efektu przezroczystości?

A. PNG

B. BMP

C. CDR

D. JPG

Wybór formatu JPG (Joint Photographic Experts Group) do przechowywania obrazów na stronach internetowych nie jest odpowiedni, gdyż ten format nie obsługuje przezroczystości. JPG to format stratny, co oznacza, że przy kompresji traci część informacji o obrazie, co skutkuje obniżeniem jakości, zwłaszcza w przypadku obrazów z dużą ilością detali. Dla grafik wymagających przezroczystości, takich jak ikony czy logotypy, JPG nie sprawdzi się, ponieważ nie oferuje opcji przezroczystości, co prowadzi do nieestetycznych efektów, gdy tło obrazu nie pasuje do tła strony. BMP (Bitmap) z kolei jest formatem, który również nie obsługuje przezroczystości i zwykle generuje dużą objętość pliku, co sprawia, że jest mało praktyczny do użycia w sieci. Natomiast CDR (CorelDRAW) jest formatem plików wektorowych, który jest używany głównie w oprogramowaniu Corel, a nie w kontekście publikacji w internecie. Rozważanie tych formatów, w sytuacji gdy konieczne jest zachowanie przezroczystości, wskazuje na nieporozumienie dotyczące ich zastosowań oraz brak zrozumienia standardów dotyczących formatów graficznych. W rzeczywistości najlepszym rozwiązaniem dla obrazów z przezroczystością jest właśnie PNG, który dostarcza odpowiednich narzędzi do efektywnego i estetycznego wyświetlania grafiki w internecie.

Pytanie 6

Który z akapitów został sformatowany według podanego stylu, przy założeniu, że pozostałe właściwości akapitu mają wartości domyślne?

A. Efekt 2

B. Efekt 1

C. Efekt 4

D. Efekt 3

Efekt 3 jest poprawny ponieważ formatowanie CSS zawiera ustawienie padding 20px co oznacza że wokół tekstu znajduje się przestrzeń o szerokości 20 pikseli Dodatkowo kolor tekstu jest niebieski zgodnie z ustawieniem color blue Także font-weight 900 wskazuje że tekst powinien być pogrubiony w najwyższym stopniu co jest widoczne w trzecim efekcie Obramowanie ma szerokość 1 piksel i jest solidne co oznacza że jest to ciągła linia wokół tekstu Efekt 3 dokładnie odzwierciedla te właściwości Formatowanie takie jest użyteczne w tworzeniu przyciągających uwagę nagłówków lub wyróżnień w treści strony internetowej W praktyce taki styl można zastosować do elementów interfejsu użytkownika które wymagają większej czytelności lub estetycznego oddzielenia od reszty treści Ważne jest aby odpowiednio zrozumieć i wykorzystać właściwości CSS dla uzyskania maksymalnej efektywności w projektowaniu stron internetowych Dobre praktyki obejmują także testowanie stylów na różnych urządzeniach aby upewnić się że wygląd spełnia zamierzone cele we wszystkich kontekstach

Pytanie 7

Podczas realizacji grafiki na stronę internetową konieczne jest wycięcie jedynie jej części. Jak nazywa się ta czynność?

A. odwrócenie obrazu

B. łącznie warstw

C. zmiana rozmiaru

D. kadrowanie

Kadrowanie to proces, który polega na przycinaniu obrazu w celu uzyskania określonego obszaru, eliminując zbędne fragmenty. W kontekście przygotowywania grafiki na stronę internetową, kadrowanie jest kluczowe, ponieważ pozwala na dostosowanie wymiarów obrazu do wymagań projektu, co jest szczególnie istotne w kontekście responsywnego designu. Przykładowo, jeśli mamy zdjęcie o wysokiej rozdzielczości, a chcemy je wykorzystać jako tło na stronie, kadrowanie pozwala nam wybrać najważniejszy fragment, który będzie najlepiej komponował się w ustalonym układzie. W praktyce kadrowanie nie tylko poprawia estetykę grafiki, ale także wpływa na jej wydajność, zmniejszając rozmiar pliku, co jest korzystne dla szybkości ładowania strony. Warto również zaznaczyć, że dobrym zwyczajem jest zachowanie proporcji obrazu podczas kadrowania, co można osiągnąć przy pomocy narzędzi takich jak Adobe Photoshop czy GIMP, które oferują funkcje do precyzyjnego wycinania i dostosowywania wymiarów.

Pytanie 8

Który z poniższych kodów HTML odpowiada opisanej tabeli? (W celu uproszczenia zrezygnowano z zapisu stylu obramowania tabeli oraz komórek)

A. Odpowiedź B

B. Odpowiedź C

C. Odpowiedź A

D. Odpowiedź D

W koncepcji struktury tabeli HTML, zrozumienie atrybutów rowspan i colspan jest kluczowe dla poprawnego tworzenia układu danych. W analizie dostępnych odpowiedzi, niektóre z nich błędnie stosują te atrybuty lub ich nie używają, co prowadzi do niepoprawnego renderowania tabeli. Na przykład, w niektórych przypadkach, gdy użycie colspan lub rowspan jest niepotrzebne, może to prowadzić do nieporządku wizualnego i semantycznego. W odpowiedziach, w których zaniedbano atrybut rowspan, nie osiągnięto prawidłowego połączenia wierszy w kolumnie, co powoduje, że dane są wyświetlane w sposób nieczytelny. Typowym błędem myślowym jest zakładanie, że zagnieżdżenie danych w kolejnych komórkach wystarczy do ich poprawnej prezentacji, jednak w praktyce to prowadzi do rozbicia logicznej ciągłości informacji. Takie podejście może zaburzać użytkownikom interakcję z danymi, zwłaszcza gdy przeglądają oni tabele na urządzeniach mobilnych, gdzie przestrzeń jest ograniczona. Właściwe użycie rowspan zapewnia jednolitą prezentację, poprawiając zarówno estetykę, jak i funkcjonalność tabeli, zgodnie z dobrymi praktykami projektowania interfejsów użytkownika.

Pytanie 9

Na ilustracji przedstawiono schemat rozmieszczenia elementów na stronie WWW, gdzie zazwyczaj umieszcza się stopkę strony?

A. 4

B. 2

C. 5

D. 1

Odpowiedź 5 jest poprawna ponieważ w typowym układzie strony WWW stopka umieszczana jest na samym dole strony i obejmuje całą jej szerokość. Stopka to sekcja strony internetowej która zawiera istotne informacje takie jak prawa autorskie polityka prywatności linki do mediów społecznościowych oraz dane kontaktowe. Jest to zgodne z konwencjami projektowania stron internetowych gdzie stopka pełni rolę miejsca do umieszczania informacji które są ważne lecz niekoniecznie powinny być umieszczone na samej górze strony. W praktyce projektowania stron internetowych stosuje się różne technologie takie jak HTML CSS oraz frameworki jak Bootstrap które umożliwiają łatwe tworzenie responsywnych stopek. Stopka powinna być dostępna na każdej podstronie co ułatwia nawigację użytkownikom. Takie rozmieszczenie poprawia również SEO poprzez umieszczanie linków wewnętrznych. Dbałość o szczegóły w projektowaniu stopki zgodnie z dobrymi praktykami UX/UI przyczynia się do lepszej użyteczności strony oraz zadowolenia użytkowników co jest kluczowe w nowoczesnym web designie.

Pytanie 10

Która z list jest interpretacją podanego kodu?

A. Rys. A

B. Rys. B

C. Rys. D

D. Rys. C

Częstym błędem przy interpretacji kodu HTML jest niepoprawne rozumienie zagnieżdżania list lub ich typów. W przypadku pytania mamy do czynienia z jedną listą uporządkowaną ol która zawiera inne listy nieuporządkowane ul W niektórych odpowiedziach przewidziano błędnie że wszystkie elementy są częścią jednej listy nieuporządkowanej co nie jest zgodne z przedstawionym kodem Listy ol i ul pełnią różne role w HTML Specyfikacja HTML jasno określa że uporządkowane listy ol są używane wtedy gdy kolejność elementów ma znaczenie zaś nieuporządkowane ul gdy kolejność jest nieważna Źle zidentyfikowanie tych typów może prowadzić do błędów w prezentacji danych i wpływać na ich semantyczne znaczenie w dokumentach Aby uniknąć takich błędów warto zapoznać się z dokumentacją W3C oraz stosować się do dobrych praktyk kodowania takich jak wyraźne zagnieżdżanie list i zachowanie ich semantycznego sensu Utrzymywanie przejrzystości kodu zwiększa również jego dostępność i SEO co jest ważne w profesjonalnym tworzeniu stron internetowych

Pytanie 11

Jaką właściwość CSS należy zastosować, aby ustawić wewnętrzne marginesy dla danego elementu?

A. margin

B. width

C. hight

D. padding

Właściwość CSS, którą należy zastosować do definiowania marginesów wewnętrznych elementu, to padding. Padding określa przestrzeń wewnętrzną między zawartością elementu a jego granicami. Przy pomocy paddingu możemy dostosować, jak dużo przestrzeni chcemy mieć wokół tekstu, obrazów czy innych elementów wewnątrz danego kontenera. Na przykład, zastosowanie padding: 20px; w CSS sprawi, że wewnętrzny margines będzie wynosił 20 pikseli od wszystkich stron wokół zawartości. Na poziomie praktycznym, padding jest niezwykle użyteczny w projektowaniu responsywnych interfejsów użytkownika, ponieważ pozwala na lepsze dostosowanie elementów do różnych rozmiarów ekranów. Dobrą praktyką jest używanie paddingu w połączeniu z innymi właściwościami, takimi jak margin, aby uzyskać pełną kontrolę nad położeniem i rozkładem elementów na stronie. Warto także pamiętać, że w CSS możemy ustalać padding oddzielnie dla górnej, prawej, dolnej i lewej strony, co daje jeszcze większą elastyczność w projektowaniu.

Pytanie 12

Podczas przygotowywania grafiki na stronę internetową konieczne jest wycięcie jedynie określonego fragmentu. Jak nazywa się ta operacja?

A. kadrowanie.

B. lustrzane odbicie obrazu.

C. łączenie warstw.

D. zmiana rozmiaru.

Kadrowanie to proces polegający na wycinaniu fragmentu obrazu w celu skupienia uwagi na określonym elemencie lub poprawienia kompozycji. W kontekście grafiki internetowej, kadrowanie jest kluczowe, aby dostosować zdjęcia do wymagań wizualnych strony, zachowując jednocześnie wysoką jakość obrazu. Przykładowo, jeśli tworzymy stronę dla restauracji, możemy wyciąć fragment zdjęcia dania, aby lepiej zaprezentować jego szczegóły. Dobre praktyki w kadrowaniu obejmują stosowanie zasady trzech, która polega na umiejscowieniu kluczowych elementów obrazu w punktach przecięcia linii podziału. Warto również pamiętać o rozdzielczości i proporcjach, aby uniknąć rozmycia lub zniekształcenia obrazu. Kadrowanie jest często używane w różnych formatach wizualnych, takich jak posty w mediach społecznościowych, banery reklamowe czy galerie zdjęć. W ten sposób, odpowiednie kadrowanie przyczynia się do lepszej prezentacji treści oraz poprawia estetykę i przejrzystość strony internetowej.

Pytanie 13

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

W kontekście przesyłania danych z formularza do pliku PHP metoda COOKIE nie jest bezpośrednio związana z formularzami HTML. Cookies to małe pliki przechowywane w przeglądarce użytkownika, służące do śledzenia sesji lub przechowywania danych użytkownika. Nie są one używane do bezpośredniego przesyłania danych formularza. Metoda POST, używana w formularzach HTML, wysyła dane jako treść żądania HTTP, co nie jest widoczne w adresie URL. POST jest preferowaną metodą dla przesyłania dużych ilości danych lub danych poufnych, ponieważ nie ogranicza ich ilości i lepiej zabezpiecza przed przypadkowym ujawnieniem. Metoda SESSION odnosi się do mechanizmu przechowywania danych o stanie użytkownika po stronie serwera, który umożliwia śledzenie sesji użytkownika między różnymi żądaniami HTTP. Dane sesji nie są bezpośrednio przesyłane przez formularze HTML, ale mogą być używane do przechowywania informacji po przesłaniu formularza. Często dochodzi do nieporozumień dotyczących tych metod, ponieważ każda z nich pełni inną funkcję w kontekście zarządzania danymi użytkownika w aplikacjach webowych. Kluczowym błędem jest założenie, że wszystkie wymienione metody mogą być używane wymiennie z formularzami HTML, co prowadzi do niepoprawnych wniosków w kontekście tego pytania.

Pytanie 14

W kodzie HTML kolor biały można reprezentować przy użyciu wartości

A. rgb(255, 255, 255)

B. #000000

C. rgb (FF, FF, FF)

D. #255255

Wartości #000000 i #255255 oraz rgb(FF, FF, FF) są nieprawidłowe w kontekście definiowania koloru białego. Zaczynając od pierwszej, #000000 to kod szesnastkowy odpowiadający czarnemu, gdzie wszystkie składniki koloru (czerwony, zielony, niebieski) mają wartość 0, co skutkuje brakiem światła i widzeniem czerni. Typowym błędem jest myślenie, że składniki koloru muszą być wyrażane w systemie szesnastkowym, a nie w zakresie od 0 do 255, co wprowadza w błąd w kontekście RGB. Z kolei #255255 nie jest poprawnym kodem szesnastkowym, ponieważ wartości kolorów w systemie szesnastkowym muszą być w zakresie od 00 do FF dla każdego z kolorów, co oznacza, że każda para cyfr szesnastkowych musi mieścić się w tym zakresie. Zresztą, nie można mieć wartości powyżej 255 w modelu RGB. Przy odpowiedzi rgb(FF, FF, FF) również pojawia się problem, ponieważ wartości w funkcji rgb() powinny być wartościami liczbowymi, a nie szesnastkowymi. Często błędne jest mylenie zapisów szesnastkowych z zapisami liczbowymi, co prowadzi do nieprawidłowych wniosków. Dlatego tak istotne jest zrozumienie różnic w sposobie reprezentacji kolorów oraz stosowanie odpowiednich praktyk przy definiowaniu kolorów w HTML i CSS.

Pytanie 15

Aby prawidłowo zorganizować hierarchiczną strukturę tekstu na stronie internetowej, powinno się wykorzystać

A. znacznik <div>

B. znacznik <p> z formatowaniem

C. znaczniki <h1>, <h2> oraz <p>

D. znaczniki <frame> i <table>

Zastosowanie znaczników <div> do definiowania hierarchicznej struktury treści jest niewłaściwe, ponieważ znacznik ten jest semantycznie neutralny i służy głównie do grupowania elementów w celu stosowania stylów CSS lub skryptów JavaScript. Nie dostarcza on informacji o strukturze treści, co negatywnie wpływa na SEO oraz dostępność strony. Ponadto, znaczniki <frame> i <table> również nie są odpowiednie do definiowania hierarchii treści. Znacznik <frame> jest przestarzały i niezalecany w nowoczesnym HTML, a jego użycie może prowadzić do problemów z nawigacją oraz indeksowaniem przez wyszukiwarki. Z kolei znaczniki <table> powinny być stosowane wyłącznie do prezentacji danych w formacie tabelarycznym, a nie do strukturyzacji treści, co także wpływa na czytelność i dostępność witryny. Formatowanie akapitów za pomocą znaczników <p> jest istotne, jednak użycie ich wyłącznie w połączeniu z innymi znacznikami, które brakują w kontekście hierarchii, nie zapewnia klarownej struktury dla użytkowników oraz robotów wyszukiwarek. Dlatego odpowiednia hierarchia z użyciem <h1>, <h2> oraz <p> jest kluczowa dla poprawnego zdefiniowania treści na stronie.

Pytanie 16

W znaczniku (w sekcji ) strony internetowej nie zamieszcza się informacji odnoszących się do

A. rodzaju dokumentu

B. kodowania

C. autora

D. automatycznego przeładowania

Możesz pomyśleć, że odpowiedź o automatycznym odświeżaniu, kodowaniu czy autorze ma sens, bo te info są faktycznie w znaczniku <meta>. Ale są tu pewne niuanse, które mogą wprowadzać w błąd. Znacznik <meta> dostarcza nam metadanych, ale nie mówi nic o typie dokumentu. Typ dokumentu jest bardzo ważny dla przeglądarek, bo informuje je o tym, w jakim standardzie jest stworzona strona. To rolę pełni deklaracja DOCTYPE, która pojawia się na początku dokumentu HTML. Warto więc ogarnąć różnicę pomiędzy metadanymi a typem dokumentu, bo to częsty błąd. Znacznik <meta> zajmuje się informacjami, które mogą poprawić SEO i doświadczenia użytkownika, natomiast typ dokumentu to bardziej techniczna kwestia, która zapewnia, że strona działa jak należy. Dobrze jest pamiętać, że odpowiednie stosowanie zarówno znaczników <meta>, jak i DOCTYPE jest kluczowe, jeśli chcemy, by nasza strona działała sprawnie.

Pytanie 17

Jak nazywa się element systemu zarządzania treścią, który jest bezpośrednio odpowiedzialny za wygląd strony internetowej?

A. Widżet w systemie WordPress lub moduł w systemie Joomla!

B. Wtyczka w systemie WordPress lub dodatek w systemie Joomla!

C. Kokpit w systemie WordPress lub panel administracyjny w systemie Joomla!

D. Motyw w systemie WordPress lub szablon w systemie Joomla!

Wybranie kokpitu w systemie WordPress lub panelu administracyjnego w systemie Joomla! jako kluczowego elementu odpowiedzialnego za wygląd witryny jest błędne, ponieważ te interfejsy służą przede wszystkim do zarządzania treścią i konfiguracji strony, a nie do jej wizualizacji. Kokpit WordPressa oraz panel Joomla! to narzędzia służące do dodawania, edytowania i organizowania treści, zarządzania użytkownikami oraz różnymi funkcjami witryny. Użytkownicy często mylą te dwa pojęcia, nie zdając sobie sprawy, że odpowiedzialność za estetykę witryny leży w zupełnie innym miejscu. Wtyczki i dodatki, jak sugerowane w kolejnej odpowiedzi, są narzędziami rozszerzającymi funkcjonalność serwisu, ale nie wpływają bezpośrednio na jego wygląd. Wtyczki mogą zmieniać sposób, w jaki treści są prezentowane, ale to motywy i szablony decydują o ich ostatecznym układzie wizualnym. Widżety i moduły, które również były wymienione w odpowiedziach, są elementami interfejsu, które mogą wpływać na rozmieszczenie zawartości w obrębie istniejącego motywu, ale nie są odpowiedzialne za podstawowy wygląd. W związku z tym błędne jest przypisywanie wyglądu witryny do narzędzi administracyjnych czy rozszerzeń, które w rzeczywistości pełnią inne funkcje. Zrozumienie różnicy pomiędzy tymi terminami jest kluczowe dla efektywnego zarządzania i projektowania stron internetowych.

Pytanie 18

W języku HTML kolor biały można przedstawić przy użyciu wartości

A. #255255

B. #000000

C. rgb(255,255,255)

D. rgb(FFFF,FF)

Kolory w HTML można zapisać na kilka sposobów, ale nie każda opcja jest dobra. Zobaczmy błędne odpowiedzi. Pierwsza, #255255, jest zła, bo w systemie szesnastkowym (hex) kolory powinno się zapisywać w formacie #RRGGBB. Tutaj brakuje cyfr, więc to jest błędny zapis. Druga opcja, #000000, to kolor czarny. Wszędzie mamy 0, czyli brak światła w trzech kanałach RGB, co daje nam czarny, a nie biały. Ostatnia odpowiedź, rgb(FFFF,FF), też jest niepoprawna, ponieważ w rgb muszą być liczby całkowite od 0 do 255. Używanie szesnastkowych wartości tutaj to zły pomysł. Generalnie, zrozumienie jak poprawnie zapisywać kolory w HTML jest kluczowe, jeśli chcesz robić fajne i funkcjonalne projekty w sieci.

Pytanie 19

W CSS, aby stylizować tekst przy użyciu przekreślenia, podkreślenia dolnego lub górnego, należy użyć atrybutu

A. text-align

B. text-transform

C. text-decoration

D. text-indent

Atrybut text-decoration w CSS jest kluczowy do formatowania tekstu, umożliwiając zastosowanie efektów takich jak przekreślenie, podkreślenie dolne oraz górne. Można go użyć w prosty sposób, na przykład: 'text-decoration: underline;' dodaje podkreślenie do tekstu, natomiast 'text-decoration: line-through;' umożliwia przekreślenie. Dzięki tym efektom, projektanci stron mogą skutecznie komunikować różne stany tekstu, takie jak usunięte lub nieaktualne informacje. Standardy CSS, określone przez W3C, zalecają użycie text-decoration w kontekście dostępności, co poprawia czytelność i umożliwia lepsze zrozumienie treści przez użytkowników. Warto pamiętać, że text-decoration posiada również wartość 'none', co pozwala na usunięcie wszelkich dekoracji z tekstu. Dzięki temu deweloperzy mogą z łatwością dostosować wygląd tekstu zgodnie z wymaganiami projektu, co stanowi dobrą praktykę w responsywnym web designie.

Pytanie 20

W CSS, aby ustalić różne formatowanie dla pierwszej litery w akapicie, trzeba użyć selektora

A. atrybutu p [first-letter]

B. dziecka p + first-letter

C. pseudoelementu p::first-letter

D. klasy p.first-letter

Aby zdefiniować odmienne formatowanie dla pierwszej litery akapitu w CSS, używamy pseudoelementu p::first-letter. Ten pseudoelement pozwala na stosowanie unikalnych stylów tylko do pierwszej litery pierwszego bloku tekstu w danym elemencie akapitu. Dzięki temu, możemy na przykład zwiększyć rozmiar czcionki, zmienić kolor, dodać marginesy lub inne efekty wizualne, które wyróżnią tę literę. Użycie p::first-letter jest zgodne z aktualnymi standardami CSS, co zapewnia szeroką kompatybilność z różnymi przeglądarkami. Przykładowe zastosowanie to: p::first-letter { font-size: 200%; color: red; } co spowoduje, że pierwsza litera każdego akapitu będzie większa i czerwona. Pseudoelementy, takie jak ::first-letter, są niezwykle użyteczne w projektowaniu typograficznym, umożliwiając artystyczne podejście do prezentacji tekstu, co może przyciągnąć uwagę czytelników i nadać stronie unikalny charakter.

Pytanie 21

Jaką wartość w systemie szesnastkowym przyjmie kolor określony kodem RGB rgb(255, 128, 16)?

A. #ff8010

B. #ff8011

C. #ff0f10

D. #008010

Odpowiedzi takie jak #008010, #ff8011 oraz #ff0f10 są nieprawidłowe z różnych powodów. Zaczynając od #008010, zauważamy, że pierwszy składnik (R) wynosi 0, co oznacza, że kolor nie zawiera czerwonego komponentu. Oryginalny kolor rgb(255, 128, 16) ma maksymalne wartości czerwonego, co wyklucza odpowiedzi z zerowymi wartościami. Przechodząc do #ff8011, widzimy, że ostatnia cyfra jest 1, co wynika z konwersji wartości 16, która w systemie szesnastkowym powinna być 10. Użycie 1 zamiast 10 nie oddaje prawidłowo oryginalnego koloru. Wreszcie, analiza #ff0f10 ujawnia problem z zielonym komponentem, który w tej odpowiedzi wynosi 0, biorąc pod uwagę, że wartość zielona powinna wynosić 128 (80 w systemie szesnastkowym). Te błędy mogą wynikać z nieprecyzyjnego zrozumienia konwersji wartości kolorów między systemami. Ważne jest, aby zrozumieć, że RGB to model addytywny, w którym kolory są tworzone przez łączenie światła czerwonego, zielonego i niebieskiego, a każdy składnik ma swoje przypisane wartości, które muszą być dokładnie odzwierciedlone w kodzie szesnastkowym. Przy pracy z kolorami, szczególnie w projektowaniu cyfrowym, dobrze jest również korzystać z narzędzi do konwersji oraz palet kolorów, aby uniknąć takich pomyłek.

Pytanie 22

Aby na stronie internetowej umieścić logo z przezroczystym tłem, jaki format powinien być zastosowany?

A. CDR

B. JPG

C. PNG

D. BMP

Format PNG (Portable Network Graphics) jest preferowany do przechowywania obrazów z przezroczystym tłem, co czyni go idealnym wyborem dla logo. Główne zalety PNG to obsługa przezroczystości oraz wysoka jakość grafiki bez utraty danych, dzięki kompresji bezstratnej. W praktyce, kiedy logo jest umieszczane na różnych tłach, przezroczystość pozwala na harmonijne wpasowanie się w otoczenie, co zwiększa estetykę strony. Ponadto, PNG obsługuje różne poziomy przezroczystości (alfa), co daje projektantom więcej możliwości w zakresie efektów wizualnych. Użycie PNG w projektach internetowych jest zgodne z dobrymi praktykami w zakresie tworzenia responsywnych i estetycznych interfejsów, a także zapewnia kompatybilność z większością przeglądarek internetowych. Warto zauważyć, że PNG jest również często stosowany w grafikach wektorowych i ikonach, które wymagają przejrzystości. Korzystając z PNG, projektanci mogą być pewni, że ich grafiki będą wyglądać profesjonalnie na każdej platformie.

Pytanie 23

Jakie polecenie w CSS wykorzystuje się do dołączenia zewnętrznego arkusza stylów?

A. import

B. open

C. require

D. include

Wszystkie pozostałe opcje nie są poprawnymi poleceniami CSS do załączania zewnętrznych arkuszy stylów. 'Open' nie jest uznawanym poleceniem w kontekście CSS; nie ma takiej funkcjonalności, co czyni tę odpowiedź niewłaściwą. 'Require' to termin często używany w kontekście programowania, szczególnie w językach takich jak Ruby, ale nie ma zastosowania w CSS i nie służy do włączania stylów. Wreszcie, 'include' również nie jest zastosowaniem w CSS. Choć może być używane w innych językach programowania i systemach szablonów do włączania plików, w kontekście CSS nie odnosi się do żadnej znanej funkcji. Zrozumienie tych terminów jest kluczowe, ponieważ pomaga odróżnić znaczenie i zastosowanie terminologii w różnych językach oraz środowiskach programistycznych. Niezrozumienie różnicy między tymi terminami może prowadzić do błędów w kodowaniu i problemów z organizacją stylów, co z kolei może wpływać na wydajność oraz zarządzanie projektami webowymi.

Pytanie 24

W CSS zapis selektora p > i { color: red; } wskazuje, że kolor czerwony zostanie zastosowany do

A. wyłącznie tekstu w znaczniku <i>, który znajduje się bezpośrednio wewnątrz znacznika <p>

B. tylko tego tekstu w znaczniku <p>, który ma przypisaną klasę o nazwie i

C. wszystkiego tekstu w znaczniku <p> z wyjątkiem tekstu w znaczniku <i>

D. wszelkiego tekstu w znaczniku <p> lub wszelkiego tekstu w znaczniku <i>

Zrozumienie selektorów CSS jest kluczowe dla ich poprawnego zastosowania. W przypadku analizy odpowiedzi, które nie są poprawne, istnieją podstawowe błędy w interpretacji selektorów. Wskazanie, że każdy tekst w znaczniku <p> lub <i> miałby być sformatowany, świadczy o mylnym rozumieniu, jak działają selektory CSS. Selekcja całej zawartości <p> lub <i> ignoruje kluczowy element selektora, jakim jest symbol '>', który precyzyjnie definiuje relację między elementami. Z kolei stwierdzenie, że każdy tekst w znaczniku <p> za wyjątkiem tych w znaczniku <i> byłby formatowany, także wprowadza w błąd, ponieważ nie ma to zastosowania do selektora dzieci. W rzeczywistości, forma ta nie wprowadza w życie żadnych reguł CSS i prowadzi do nieporozumień. Pojęcie przypisania klasy w kontekście selektora określającego <i> jest również mylące; klasy są definiowane oddzielnie i nie mają wpływu na znaczniki bezpośrednio. Kluczowe jest, aby w zrozumieniu CSS zwracać uwagę na hierarchię i relacje między elementami, co pozwala na efektywną kontrolę nad stylem prezentacji treści w dokumentach HTML.

Pytanie 25

W dokumencie HTML umieszczono tekst sformatowany określonym stylem. Aby wprowadzić w treści kilka słów o zróżnicowanym stylu, należy użyć znacznika

A. <span>

B. <table>

C. <hr>

D. <section>

Wybór znaczników <section>, <table> i <hr> jako sposobów na wtrącenie fragmentów tekstu stylizowanych różnie od reszty treści jest niewłaściwy z technicznego punktu widzenia. Znacznik <section> jest przeznaczony do tworzenia sekcji dokumentu, co oznacza, że ma on znaczenie semantyczne i jest używany do grupowania treści, które dotyczą tego samego tematu. Użycie go do stylizacji pojedynczych słów może prowadzić do nieczytelności struktury dokumentu oraz negatywnie wpływać na dostępność treści. Z kolei znacznik <table> służy do tworzenia tabel, które organizują dane w wierszach i kolumnach, a więc jego zastosowanie w kontekście formatowania tekstu byłoby zarówno nieefektywne, jak i niezgodne z przeznaczeniem. Stosowanie <hr> natomiast, które definiuje poziomą linię, nie ma sensu w kontekście zmiany stylu tekstu, ponieważ jego funkcją jest oddzielanie sekcji treści, a nie stylizowanie tekstu. Wybierając nieodpowiednie znaczniki, możemy naruszyć zasady semantyki HTML, co prowadzi do problemów z dostępnością i SEO, a także do trudności w dalszej edycji oraz utrzymaniu kodu. Prawidłowe użycie znaczników jest kluczowym elementem dobrych praktyk w tworzeniu stron internetowych i wpływa na ich czytelność oraz zrozumienie przez różne urządzenia i technologie.

Pytanie 26

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

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

B. nav { float: right; }

C. aside {float: left; }

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

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 27

W języku HTML zapis < spowoduje w przeglądarki wyświetlenie znaku

A. <

B. &

C. "

D. >

W przypadku odpowiedzi, które nie są poprawne, warto zaznaczyć, że wyspecjalizowane znaki mają różne encje HTML, a odpowiedzi, które sugerują inne znaki, nieodpowiednio interpretują zasady użycia. Znak > jest stosowany do reprezentowania większości, a jego encja to >. Użycie znaku > w sytuacji, gdy chcemy wyświetlić go dosłownie, również wymaga zastosowania encji, co sprawia, że ta odpowiedź jest błędna w kontekście pytania dotyczącego znaku <. Znak & jest z kolei używany do wprowadzania encji w HTML i jego książkowa reprezentacja to &. Gdybyśmy spróbowali wyświetlić & bez użycia encji, przeglądarka mogłaby zinterpretować go jako początek nowej encji, co prowadziłoby do błędów w renderowaniu. Ostatni znak " również wymaga encji, aby był wyświetlany poprawnie, ponieważ jego bezpośrednie użycie mogłoby prowadzić do problemów z interpretacją atrybutów w znacznikach. W każdym z tych przypadków musimy stosować odpowiednie encje HTML dla zachowania integralności kodu oraz poprawności wyświetlania treści w przeglądarkach, co jest kluczowe w projektowaniu z wykorzystaniem HTML.

Pytanie 28

<img src="/rysunek.png" alt="pejzaż"> Zapisany został kod HTML, który wstawia obrazek na stronę. Jeśli rysunek.png nie zostanie znaleziony, przeglądarka

A. wyświetli w miejscu grafiki tekst "pejzaż"

B. w miejscu grafiki pokaże tekst "rysunek.png"

C. nie załaduje strony internetowej

D. w miejscu grafiki zasygnalizuje błąd wyświetlania strony

Pierwsza z niepoprawnych odpowiedzi sugeruje, że brak grafiki spowoduje, iż strona internetowa się nie wyświetli. To stwierdzenie jest nieprawdziwe, ponieważ HTML jest zaprojektowany w taki sposób, aby kontynuować rendering strony nawet w przypadku, gdy niektóre zasoby, takie jak obrazy, są niedostępne. Strona internetowa będzie dostępna, a użytkownik zobaczy pozostałe elementy treści. Kolejną nieprawidłowością jest to, że przeglądarka wyświetli tekst 'rysunek.png' w przypadku braku grafiki. Zamiast tego, przeglądarka zareaguje zgodnie z ustawieniami atrybutu 'alt', a nie wypisze nazwy pliku. Taki mechanizm nie tylko umożliwia lepszą interpretację zawartości, ale także zapobiega wyświetlaniu technicznych szczegółów pliku użytkownikowi. Ostatnia z opcji również jest błędna, sugerując, że w przypadku braku pliku zostanie wyświetlony błąd wyświetlania strony. W rzeczywistości, błędy wyświetlania strony wynikają z problemów z ładowaniem całej strony, a nie tylko z pojedynczych zasobów, takich jak obrazy. Takie podejście do zarządzania błędami jest kluczowe w projektowaniu stron internetowych i wpływa na ogólną jakość doświadczeń użytkowników.

Pytanie 29

Wskaż pole edycyjne sformatowane przedstawionym stylem CSS

input {
  border: none;
  border-bottom: 2px solid Blue;
  color: Gray;
  font-weight: 900;
}

Input 1. Podaj imię:

Input 2. Podaj imię:

Input 3. Podaj imię:

Input 4. Podaj imię: Agnieszka

A. Input 2.

B. Input 1.

C. Input 3.

D. Input 4.

Niestety, to nie to. Wybrałeś element, który nie spełnia wszystkich wymagań stylu CSS, który widziałeś w pytaniu. Właściwości takie jak 'border-bottom', 'color' i 'font-weight' są super przydatne, bo dzięki nim możemy dokładnie ustawić wygląd każdego elementu na stronie. W tym przypadku, styl, którego szukaliśmy, określa dolne obramowanie o grubości 2px w kolorze niebieskim, szary tekst oraz pogrubioną czcionkę. Jak coś nie pasuje do tych wymagań, to znaczy, że nie jest poprawnie sformatowane. Często zdarza się pomylić różne właściwości CSS albo nie zrozumieć, jak one wpływają na to, co widzimy na stronie. Ważne, żeby dobrze wiedzieć, jak działa CSS w praktyce, bo to naprawdę pomaga w tworzeniu i poprawianiu stron internetowych.

Pytanie 30

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

input:focus { background-color: LightGreen; }

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

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

C. w każdej sytuacji

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 31

W HTML atrybut alt elementu img służy do określenia

A. treści, która zostanie pokazana, gdy grafika nie może być załadowana

B. parametrów grafiki, takich jak wymiary, ramka, wyrównanie

C. opisu, który pojawi się pod grafiką

D. lokalizacji i nazwy pliku źródłowego grafiki

Istnieje wiele nieporozumień dotyczących roli atrybutu <b>alt</b> w znaczeniu <b>img</b>. Niektórzy mogą błędnie sądzić, że atrybut ten służy do definiowania parametrów grafiki, takich jak rozmiar czy obramowanie. Warto jednak zauważyć, że rozmiar i obramowanie obrazów są regulowane przez inne atrybuty HTML oraz style CSS, a nie przez atrybut <b>alt</b>. Atrybut ten nie ma również nic wspólnego z podpisami pod grafiką, które można osiągnąć za pomocą elementów takich jak <b>figure</b> i <b>figcaption</b>. Kolejnym błędnym podejściem jest mylenie atrybutu <b>alt</b> ze ścieżką do pliku źródłowego grafiki, co jest regulowane przez atrybut <b>src</b>. Atrybut <b>alt</b> nie dostarcza informacji o lokalizacji pliku, ale raczej o jego zawartości w przypadku, gdy nie jest on dostępny. Takie błędne interpretacje mogą prowadzić do nieprawidłowego zrozumienia zagadnień dostępności i optymalizacji treści w sieci, co jest kluczowe w nowoczesnym projektowaniu stron internetowych. Dlatego istotne jest, aby dokładnie poznawać funkcje każdego z atrybutów HTML oraz stosować je zgodnie z ich przeznaczeniem, co przyczyni się do lepszej dostępności i jakości tworzonych treści.

Pytanie 32

W podanym przykładzie pseudoklasa hover spowoduje, że styl pogrubiony zostanie przypisany

a:hover { font-weight: bold; }

A. odnośnikowi, gdy kursor myszy na niego najedzie

B. wszystkim odnośnikom, które były wcześniej odwiedzane

C. każdemu odnośnikowi bez względu na jego bieżący stan

D. wszystkim odnośnikom, które nie były odwiedzane

Pseudoklasa hover jest jedną z najczęściej używanych pseudoklas w CSS stosowaną do stylizacji elementów HTML w momencie, gdy użytkownik najeżdża kursorem myszy na dany element. W podanym przykładzie kodu CSS zastosowano pseudoklasę hover dla elementów a czyli odnośników. Oznacza to, że gdy kursor myszy znajdzie się nad jakimkolwiek odnośnikiem, jego styl zmieni się na pogrubiony dzięki właściwości font-weight: bold. Jest to bardzo przydatne w interaktywnej stylizacji stron internetowych, ponieważ pozwala użytkownikom na wizualne odróżnienie elementów, z którymi mogą wchodzić w interakcję. Praktycznym zastosowaniem tej pseudoklasy jest zwiększenie użyteczności i estetyki strony poprzez subtelne wskazanie elementów interaktywnych, takich jak menu nawigacyjne czy linki w treści. Warto pamiętać o zachowaniu spójności stylizacji dla wszystkich stanów odnośników, co jest zalecane jako dobra praktyka w projektowaniu responsywnych interfejsów użytkownika. Pseudoklasa hover, jako część kaskadowego arkusza stylów, pozwala na dynamiczną interakcję z elementami strony, co znacząco wpływa na doświadczenia użytkownika.

Pytanie 33

Cechy przedstawione w tabeli dotyczą?

Strony ustalają dążenie do konkretnego wyniku
Ważny jest efekt pracy, a nie sposób jej realizacji
Zleceniodawca przekazuje za wykonawcę zaliczkę na podatek dochodowy

A. umowy o dzieło

B. umowy zlecenia

C. umowy agencyjnej

D. umowy o pracę

Umowa o pracę różni się od umowy o dzieło w kilku kluczowych aspektach. Przede wszystkim, umowa o pracę koncentruje się na procesie wykonywania pracy, a nie tylko na jej rezultacie. Pracownik w ramach umowy o pracę podlega określonym przepisom dotyczącym czasu pracy, urlopów i innych świadczeń pracowniczych, co nie ma miejsca w umowie o dzieło. Z kolei umowa zlecenia także skupia się bardziej na wykonywaniu usług niż na osiąganiu konkretnego rezultatu, co oznacza, że zleceniobiorca powinien wykonać powierzone zadanie z należytą starannością, ale niekoniecznie osiągnąć określony efekt końcowy. Umowa agencyjna jest jeszcze innym typem kontraktu, w którym agent działa na rzecz zleceniodawcy, ale niekoniecznie musi dostarczać konkretny produkt lub usługę końcową. Typowym błędem jest mylenie tych umów z uwagi na podobieństwa w formalnościach czy obowiązkach podatkowych, jednak kluczowe jest zrozumienie różnic w zakresie oczekiwań co do efektu pracy i sposobu jej rozliczania.

Pytanie 34

Jaki znacznik powinien być zastosowany, aby wprowadzić nową linię tekstu bez tworzenia akapitu w dokumencie internetowym?

A. </br>

B. <br>

C. <p>

D. </b>

Znaczniki <p> i </b> oraz </br> są błędnymi odpowiedziami w kontekście przełamania linii tekstu. Znacznik <p> służy do definiowania akapitu, co oznacza, że każdorazowe jego użycie powoduje wprowadzenie przerwy między akapitami. W związku z tym, jego zastosowanie do przełamania linii nie byłoby odpowiednie, ponieważ nie umożliwia kontynuacji tekstu w tym samym kontekście. Podobnie, znacznik </b> jest używany do zamykania formatowania pogrubienia, a jego użycie nie ma żadnego związku z przełamaniem linii; jest on tylko elementem prezentacyjnym. Co więcej, </br> nie jest poprawnym znacznikiem w HTML. Chociaż w niektórych kontekstach może być używany przez niektóre silniki renderujące, jego właściwe zastosowanie to <br>, co czyni </br> niepoprawnym i mylącym. Typowe błędy myślowe, prowadzące do takich odpowiedzi, często wynikają z braku zrozumienia semantyki HTML oraz różnicy pomiędzy elementami blokowymi a liniowymi. Użytkownicy często mylą funkcje poszczególnych znaczników, co prowadzi do nieprawidłowego formatowania treści na stronach internetowych. Zrozumienie tych różnic jest kluczowe dla tworzenia poprawnych i efektywnych struktur dokumentu HTML.

Pytanie 35

Który z przedstawionych kodów HTML sformatuje tekst według wzoru?
(uwaga: słowo "stacji" jest zapisane większą czcionką niż reszta słów w tej linii)

Lokomotywa

Stoi na stacji lokomotywa ...

A.
<h1>Lokomotywa</h1>
<p>Stoi na <big>stacji lokomotywa ...</p>

B.
<h1>Lokomotywa</h1>
<p>Stoi na <big>stacji</big> lokomotywa ...</p>

C.
<h1>Lokomotywa</p>
<p>Stoi na <big>stacji</big> lokomotywa ...</p>

D.
<p><small>Lokomotywa</small></p>
<p>Stoi na <big>stacji<big> lokomotywa ...</p>

A. D.

B. C.

C. B.

D. A.

Wybrana odpowiedź nie jest poprawna. Kluczowym elementem tego pytania było zrozumienie, jak konkretny kod HTML wpływa na formatowanie tekstu. Znacznik <big> jest używany do powiększania czcionki, ale musi być poprawnie umieszczony w kodzie, aby efekt był zgodny z oczekiwaniami. Odpowiedzi A, C i D, mimo że używają tego znacznika, nie spełniają tego kryterium. W odpowiedzi A, znacznik <big> jest używany do powiększenia całego tekstu, a nie tylko słowa 'stacji'. W odpowiedzi C, znacznik <big> jest używany w niewłaściwym miejscu. W odpowiedzi D, zastosowano znacznik <small>, który w rzeczywistości zmniejsza rozmiar czcionki. To pytanie pokazuje, jak ważne jest zrozumienie struktury kodu HTML i umiejętność poprawnego stosowania znaczników formatujących. Warto również pamiętać, że znacznik <big> jest przestarzały i zaleca się stosowanie CSS do manipulowania rozmiarem czcionki.

Pytanie 36

Znacznik <ins> w HTML ma na celu wskazanie

A. tekstu, który został dodany

B. bloku tekstu, który jest cytowany

C. tekstu, który został przerobiony

D. tekstu, który został usunięty

Znacznik <ins> w HTML jest używany do oznaczania tekstu, który został dodany w kontekście edytowania treści. Zgodnie ze standardem HTML5, element <ins> reprezentuje wprowadzenie nowego tekstu, co jest szczególnie przydatne w kontekście śledzenia zmian w dokumentach. Używając <ins>, możemy nie tylko oznaczyć dodany tekst, ale także dostarczyć kontekstu dla jego wprowadzenia, na przykład poprzez dodanie atrybutu datetime, który wskazuje, kiedy zmiana została wprowadzona. Praktyczne zastosowanie tego znacznika można zauważyć w edytorach treści, gdzie użytkownicy mogą wprowadzać poprawki, a powstałe zmiany są wizualizowane. Dzięki temu osoby przeglądające dokument mogą łatwo zauważyć, co zostało dodane. Warto również wspomnieć, że w połączeniu z odpowiednim stylem CSS, zmiany te mogą być wyróżnione w sposób, który zwiększa czytelność tekstu. Standardy W3C zalecają stosowanie znaczników semantycznych, takich jak <ins>, aby poprawić dostępność oraz zrozumiałość treści.

Pytanie 37

Który z poniższych kodów HTML odpowiada przedstawionej tabeli? Dla uproszczenia pominięto zapis dotyczący stylu obramowania tabeli oraz komórek?

A. Rys. C

B. Rys. D

C. Rys. B

D. Rys. A

Poprawna odpowiedź to Rys. B ponieważ wykorzystuje atrybut rowspan="2" który łączy dwie komórki w pierwszej kolumnie w jeden wiersz Koncepcja rowspan umożliwia efektywne zarządzanie strukturą danych w tabeli HTML pozwalając na oszczędność miejsca i uniknięcie zduplikowanych komórek W praktyce rowspan jest niezwykle przydatny w projektach gdzie dane muszą być prezentowane w sposób zorganizowany i czytelny Dobre zrozumienie tego atrybutu jest kluczowe w tworzeniu responsywnych i estetycznych stron internetowych Zastosowanie rowspan zgodne jest ze standardami W3C co czyni kod bardziej zgodnym z wieloma przeglądarkami i urządzeniami Warto również pamiętać że prawidłowe użycie atrybutów takich jak rowspan poprawia dostępność strony co jest ważnym aspektem współczesnego projektowania stron internetowych Wiedza o tym jak zarządzać strukturą tabel i używać odpowiednich atrybutów wpływa na lepsze doświadczenie użytkownika Jest to również istotne w kontekście SEO gdyż poprawna semantyka HTML może wpłynąć na lepsze indeksowanie witryny przez wyszukiwarki

Pytanie 38

Zapis CSS postaci:

 ul {
    list-style-image: url('rys.gif');
}

sprawi, że na stronie internetowej

A. rys.gif będzie stanowił ramkę dla listy nienumerowanej.

B. punktorem listy nienumerowanej będzie rys.gif

C. wyświetli się rysunek rys.gif jako tło listy nienumerowanej.

D. każdy z punktów listy będzie miał osobne tło pobrane z grafiki rys.gif

Gratulacje! Poprawnie zidentyfikowałeś, że w podanym kodzie CSS, obrazek 'rys.gif' będzie służył jako punktor listy nienumerowanej. Według standardów CSS, właściwość list-style-image jest używana do określenia obrazka, który będzie używany jako punktor w liście nienumerowanej. Zasada ta jest bardzo przydatna, kiedy chcemy stworzyć niestandardowe punktory listy, które lepiej pasują do designu naszej strony. Możemy użyć dowolnego obrazka, który jest dostępny online lub zasobu z naszej lokalnej przestrzeni roboczej. Pamiętaj jednak, że obrazek powinien być mały i czytelny. W tym konkretnym przypadku, obrazek 'rys.gif' zostanie ustawiony jako punktor dla każdego elementu listy <li> wewnątrz listy nienumerowanej <ul>. Używając tej techniki, możemy stworzyć atrakcyjniejsze i bardziej interaktywne listy na naszej stronie internetowej.

Pytanie 39

Który kod HTML zapewni identyczny efekt formatowania jak na przedstawionym obrazku?

W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

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

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

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

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

Wybór niepoprawnych odpowiedzi wynika z błędnego użycia znaczników HTML, co wpływa na końcowe formatowanie tekstu. Pierwsza odpowiedź zawiera błąd polegający na niewłaściwym zamknięciu znacznika <b> przez dodanie spacji przed ukośnikiem, co powoduje, że przeglądarki mogą błędnie interpretować strukturę HTML. W konsekwencji, tekst może nie być prawidłowo pogrubiony, ponieważ przeglądarka nie rozpoznaje zamknięcia znacznika. Trzecia odpowiedź całkowicie pomija znacznik <b>, co oznacza, że tekst 'zobaczysz' nie zostanie pogrubiony, co jest niezgodne z wymaganym efektem wizualnym. Brak zastosowania odpowiednich znaczników wpływa na semantyczne znaczenie zawartości, co jest kluczowe w kontekście dostępności i dobrych praktyk w web designie. Czwarta odpowiedź błędnie rozdziela znaczniki <i> wokół słowa 'zobaczysz', co nie tworzy efektu jednoczesnej kursywy i pogrubienia. Wiedza dotycząca zagnieżdżania znaczników jest istotna, aby uzyskać pożądany efekt wizualny, a także utrzymać semantykę i dostępność zgodnie z nowoczesnymi standardami tworzenia stron internetowych. Rozumienie hierarchii i poprawne zamykanie znaczników ma kluczowe znaczenie dla renderowania strony zgodnie z oczekiwaniami, jak również dla zachowania zgodności z HTML5.

Pytanie 40

W pliku CSS znajdują się poniższe style. Kiedy klikniemy na hiperłącze i wrócimy na stronę, jego kolor zmieni się na

a { color: Brown; }
a:link { color: Green; }
a:visited { color: Red; }
a:hover { color: Yellow; }

A. brązowy

B. czerwony

C. zielony

D. żółty

W zrozumieniu działania stylów CSS dla hiperłączy kluczowe jest poznanie zastosowania pseudoklas takich jak a:link a:visited i a:hover. Każda z tych pseudoklas odpowiada za inny stan linku. Pseudoklasa a:link stosuje się do linków które użytkownik jeszcze nie odwiedził dlatego kolor zielony przypisany do tej pseudoklasy oznaczałby nieodwiedzony link co w tym przypadku jest nieprawidłowe. Pseudoklasa a:hover zmienia kolor podczas najechania myszką i tutaj ustalono kolor żółty który jest tylko tymczasowy. Błędne byłoby uznawanie że kolor żółty pozostanie po odwiedzeniu linku ponieważ dotyczy on jedynie stanu przejściowego. Pseudoklasa a:visited która definiuje kolor po odwiedzeniu jest tu kluczowa ponieważ określa właśnie kolor po powrocie na stronę. Zastosowanie odpowiednich stylów pomaga w nawigacji i poprawia dostępność. Typowe błędy związane z rozumieniem pseudoklas wynikają z braku znajomości ich specyfiki działania oraz priorytetu jaki mają w kaskadowym modelu stylów. Dlatego zrozumienie i prawidłowe stosowanie tych zasad jest fundamentalne w projektowaniu intuicyjnych i przyjaznych dla użytkownika stron internetowych co jest zgodne z najlepszymi praktykami branżowymi i standardami WCAG.

Rozpocznij nowy egzamin

Powrót do strony głównej