Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

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

Egzamin zdany!

Wynik: 29/40 punktów (72,5%)

Wymagane minimum: 20 punktów (50%)

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Kolor zdefiniowany kodem RGB o wartości rgb(128, 16, 8) w formacie szesnastkowym przyjmuje wartość

A. #FF1008

B. #801008

C. #800F80

D. #FF0F80

Odpowiedzi takie jak #FF1008, #800F80 i #FF0F80 są wynikiem błędnych konwersji wartości RGB do formatu szesnastkowego. Gdybyśmy przyjrzeli się pierwszej z tych odpowiedzi, widzimy, że wartość 'FF' oznacza 255 w systemie dziesiętnym, co nie odpowiada wartości 128 w kanale czerwonym tego koloru. Zastosowanie 'FF' w tym kontekście prowadzi do znacznego przeszacowania intensywności koloru czerwonego. Przechodząc do drugiej odpowiedzi, #800F80, wartość '0F' odpowiada 15, co również nie jest zgodne z pierwotną wartością 16 w kanale zielonym. To wskazuje na niedoszacowanie intensywności zielonej, co wpływa na percepcję koloru. Ostatnia odpowiedź, #FF0F80, znowu używa 'FF' w kanale czerwonym, co prowadzi do podobnych błędów jak w pierwszym przypadku. Kluczowym błędem, który można zidentyfikować w tych odpowiedziach, jest nieprawidłowe przeliczenie wartości RGB do formatu szesnastkowego, co jest powszechnym problemem dla osób, które nie są zaznajomione z konwersją systemów liczbowych. W praktyce, aby uniknąć takich pomyłek, warto korzystać z narzędzi online lub specjalistycznego oprogramowania, które automatycznie wykonuje te konwersje, co pozwala na zaoszczędzenie czasu i zminimalizowanie ryzyka błędów.

Pytanie 2

W CSS zapis w postaci ```h1::first-letter{color:red;}``` spowoduje, że kolor czerwony będzie dotyczył

A. pierwszej litery nagłówka pierwszego poziomu

B. pierwszej linii akapitu

C. pierwszej litery nagłówka drugiego poziomu

D. tekstów nagłówka pierwszego poziomu

Zapis CSS h1::first-letter {color: red;} odnosi się do selektora pseudo-elementu first-letter, który jest używany do stylizacji pierwszej litery bloku tekstowego w nagłówkach. W tym wypadku, gdy selektor jest zastosowany do elementu h1, oznacza to, że kolor pierwszej litery nagłówka pierwszego stopnia (h1) zostanie zmieniony na czerwony. Pseudo-element first-letter działa tylko dla elementów blokowych, takich jak nagłówki, akapity czy listy. W praktyce, jeśli w dokumencie HTML mamy element <h1> z tekstem, np. 'Witaj świecie', to wyłącznie litera 'W' zostanie wyświetlona w kolorze czerwonym. To podejście jest zgodne ze standardami CSS, które definiują pseudo-elementy jako specyficzne fragmenty dokumentu, które można stylizować niezależnie od reszty zawartości. Warto również zauważyć, że stosowanie takich selektorów pozwala na uzyskanie bardziej złożonych efektów wizualnych bez konieczności modyfikacji struktury HTML. Umożliwia to projektantom stron internetowych większą elastyczność i kontrolę nad estetyką treści.

Pytanie 3

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-height: 30px; }

C. p { line-indent: 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 4

W CSS przypisano regułę: float: left; dla elementu blokowego. Jakie będzie jej zastosowanie?

A. ustawienia bloku na lewo w stosunku do innych

B. wyrównania elementów tabeli do lewej strony

C. wyrównania tekstu do lewej strony

D. układania bloków jeden pod drugim

Reguła CSS 'float: left;' jest używana do ustawienia elementu blokowego po lewej stronie kontenera, co pozwala na swobodne rozmieszczanie innych elementów w otaczającym go obszarze. Elementy, które są ustawione jako 'float', nie zajmują miejsca w normalnym przepływie dokumentu, co oznacza, że inne elementy mogą 'przepływać' wokół nich. Przykładem zastosowania tej reguły może być układ strony internetowej, gdzie zdjęcia są umieszczone z lewej strony tekstu, co pozwala na estetyczne i funkcjonalne połączenie grafiki z treścią. Zgodnie z wytycznymi W3C, właściwości 'float' powinny być używane z rozwagą, aby uniknąć problemów z układaniem stron, na przykład należy pamiętać o zastosowaniu właściwości 'clear', aby uniknąć niechcianych efektów wizualnych. W praktyce, float jest często stosowany w układach siatki lub responsywnych, gdzie elastyczne i dynamiczne rozmieszczenie elementów jest kluczowe dla użyteczności i estetyki strony.

Pytanie 5

Z jakich elementów składa się tabela generowana przez poniższy kod?

<table border="1">
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
</table>

A. jednego wiersza oraz dwóch kolumn

B. dwóch wierszy oraz jednej kolumny

C. jednego wiersza oraz jednej kolumny

D. dwóch wierszy i dwóch kolumn

Kod w pytaniu przedstawia strukturę HTML dla tabeli. Tabela składa się z jednej pary znaczników <tr>, co oznacza, że zawiera jeden wiersz. Wewnątrz tego wiersza znajdują się dwa znaczniki <td>, reprezentujące dwie komórki, czyli kolumny. Praktyczne zastosowanie tabel w HTML obejmuje prezentację danych w sposób strukturalny, co jest szczególnie użyteczne w przypadku raportów, cenników czy kalendarzy. Dobre praktyki w projektowaniu stron internetowych sugerują stosowanie tabel do prezentacji danych, nie zaś do układania treści na stronie, co było popularne w starszych wersjach HTML. W nowoczesnym podejściu do front-endu, używa się CSS i Flexbox lub Grid do układania elementów. Jednak zrozumienie podstaw HTML, takich jak prawidłowa struktura tabeli, jest kluczowe dla tworzenia semantycznych i dostępnych stron WWW. Tabele powinny być też wzbogacone o elementy takie jak <thead>, <tbody> i <tfoot> dla lepszej organizacji danych i wsparcia przez technologie asystujące dla osób z niepełnosprawnościami.

Pytanie 6

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

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

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

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

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

Odpowiedź jest prawidłowa, ponieważ reguły CSS wyrażone w stylu są poprawnie zinterpretowane w kontekście podanej definicji. Wartość text-align: center oznacza, że tekst wewnątrz elementu h1 będzie wyśrodkowany. Centrum tekstu jest powszechnie stosowane w projektowaniu stron internetowych w celu zwiększenia czytelności i estetyki nagłówków co jest korzystne w wizualnym uporządkowaniu treści. Wartość text-transform: uppercase przekształca wszystkie litery w sekcji na wielkie litery co jest pomocne w przypadku nagłówków gdzie wyróżnienie jest kluczowe i potęguje efekt wizualny. Stosowanie wielkich liter w nagłówkach jest klasycznym podejściem w projektowaniu ponieważ przyciąga uwagę użytkownika. Dodatkowo letter-spacing: 10px zwiększa odstępy między literami co poprawia ich czytelność zwłaszcza w dużych formatach tekstu. Zastosowanie takich właściwości jest zgodne z dobrymi praktykami projektowymi które dążą do optymalizacji wizualnej i funkcjonalnej stron internetowych co jest kluczowe dla pozytywnego doświadczenia użytkownika

Pytanie 7

Co można powiedzieć o stylu hiperłącza na podstawie opisu CSS, zakładając, że żadne inne style nie zostały zdefiniowane?

a:link {
  color: green;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: underline;
}

A. Tekst odwiedzonego hiperłącza jest koloru czerwonego.

B. Gdy kursor znajdzie się na obszarze hiperłącza, pojawia się podkreślenie i tekst przyjmuje kolor czerwony.

C. Gdy hiperłącze jest nieodwiedzone, jego tekst jest koloru niebieskiego z podkreśleniem.

D. Hiperłącze jest zawsze podkreślone.

Twoja odpowiedź jest poprawna. W przypadku hiperłącza, w momencie, gdy kursor znajduje się na obszarze hiperłącza, pojawia się podkreślenie i tekst przyjmuje kolor czerwony. Jest to efekt zastosowania stylu CSS w stanie 'hover'. Styl ten umożliwia dynamiczną zmianę wyglądu elementu, kiedy kursor myszy znajduje się nad nim. Jest to praktyka powszechnie stosowana w celu zwiększenia użyteczności i interaktywności stron internetowych. Dobrą praktyką jest również zapewnienie kontrastu między kolorem tła a tekstem dla lepszej czytelności. W tym przypadku, kolor tekstu zmienia się na czerwony, co zapewnia wyraźny kontrast i zwraca uwagę użytkownika. Równocześnie dodanie podkreślenia jest dodatkowym wizualnym wskaźnikiem, że dany element jest hiperłączem. Zastosowanie takiego stylu pozwala na intuicyjne i efektywne poruszanie się po stronie internetowej.

Pytanie 8

Który z przedstawionych obrazów ma zastosowany poniższy styl CSS?

img {
    padding: 5px;
    border: 1px solid grey;
    border-radius: 10px;
}

A. A.

B. B.

C. D.

D. C.

Obraz A został sformatowany za pomocą stylu CSS, który określa podstawowe cechy estetyczne elementu graficznego. Pierwszym aspektem jest zastosowanie właściwości padding wynoszącej 5px, co oznacza, że wokół obrazu znajduje się wewnętrzny margines o szerokości 5 pikseli. To zapewnia przestrzeń między obrazem a jego ramką, zwiększając czytelność i estetykę wizualną. Następnie, użyto border o grubości 1px z kolorem solid grey. Ten cienki, szary obrys dodaje subtelny akcent, który pomaga wyróżnić obraz na tle strony. Wartość border-radius wynosi 10px, co dodaje zaokrąglone rogi, nadając nowoczesny wygląd. Takie zaokrąglenie jest często stosowane w nowoczesnym designie, aby nadać strony bardziej przyjazny i estetyczny wygląd. Stylizacja obrazów w ten sposób jest zgodna z zasadami responsywności i dostępności, co jest istotne w projektowaniu interfejsów użytkownika. Stosowanie takich technik pozwala na tworzenie spójnych i estetycznych stron internetowych, które są zgodne z obecnymi standardami UX i UI.

Pytanie 9

W semantycznym HTML odpowiednikiem elementu <b>, który nie tylko pogrubia tekst, ale także wskazuje na jego większe znaczenie, jest

A. <mark>

B. <ins>

C. <em>

D. <strong>

Znacznik <strong> w HTML semantycznym służy nie tylko do pogrubienia tekstu, ale także do wskazania, że dany fragment ma większe znaczenie w kontekście semantycznym. Zgodnie z zaleceniami W3C, użycie tego znacznika poprawia dostępność treści, ponieważ technologie wspomagające, takie jak czytniki ekranu, interpretują <strong> jako tekst o podwyższonej wadze, co może pomóc w lepszym zrozumieniu struktury dokumentu przez osoby z niepełnosprawnościami. Przykładem zastosowania może być podkreślenie ważnych informacji na stronie, takich jak zasady, ostrzeżenia czy kluczowe dane, które użytkownicy powinni zauważyć. W praktyce, stosowanie elementów semantycznych, takich jak <strong>, zamiast czysto stylistycznych, jest zgodne z zasadami budowania stron przyjaznych dla użytkowników i poprawia SEO, ponieważ wyszukiwarki mogą lepiej analizować kontekst treści. Warto pamiętać, że w przypadku użycia <strong>, nie zmienia to tylko sposobu wyświetlania, ale także wzbogaca znaczenie tekstu w kontekście całej strony.

Pytanie 10

Aby osiągnąć efekt przedstawiony na ilustracji, w kodzie HTML należy zastosować znacznik skrótu <abbr> z atrybutem

A. name

B. title

C. dfn

D. alt

Znacznik <abbr> w HTML pełni rolę semantyczną, pomagając w oznaczaniu skrótów i akronimów. Atrybut alt jest stosowany w znacznikach <img> do opisywania obrazów, co jest istotne dla dostępności i SEO, ale nie ma związku ze znacznikami tekstowymi jak <abbr>. Alt informuje o treści obrazu, co jest kluczowe dla użytkowników niewidzących, lecz nie pełni funkcji rozwijania skrótów tekstowych. Atrybut dfn służy do definiowania terminów w tekście, zazwyczaj używany w połączeniu ze znacznikiem <dfn>, a nie <abbr>. Chociaż dfn dostarcza definicji, nie jest używany do rozwijania skrótów. Atrybut name nie jest związany z rozwijaniem tekstu ani z <abbr>. Jest on stosowany głównie w formularzach HTML do identyfikacji elementów, takich jak <input>, umożliwiając ich rozróżnienie. Mylenie tych atrybutów wynika często z braku zrozumienia ich specyficznych zastosowań w kontekście HTML i dostępności. Właściwe używanie atrybutów to klucz do tworzenia semantycznie poprawnych i dostępnych stron internetowych.

Pytanie 11

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

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

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

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

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

Błędy, jakie pojawiają się przy używaniu float i clear, zazwyczaj wynikają z niezrozumienia ich funkcji w kontekście układu stron. Przypisanie float tylko do bloku 5 oraz clear dla bloku 2 pokazuje, że blok 2 powinien być pod blokiem 5, co nie zgadza się z tym, co jest w diagramie, bo blok 2 jest nad blokami 3 i 4. Z kolei przypisanie float dla bloków 3 i 4 oraz clear dla bloku 5 sugeruje, że te dwa bloki powinny być w jednej linii, a blok 5 miałby być poniżej. To jest poprawne, ale nie naprawia całkowicie układu, bo blok 2 nie jest w tym ujęciu uwzględniony. Cała koncepcja przypisania float tylko dla bloku 2 i clear dla bloków 3 i 4 też ma swoje wady, bo blok 2 ma za zadanie otaczać bloki 3 i 4, ale nie może być przesunięty w taki sposób, żeby osiągnąć układ z diagramu. Często problem ze zrozumieniem float i clear bierze się z błędnego rozumienia relacji między elementami i ich wpływu na układ całościowy. Dlatego rozwiązaniem jest dokładne przypisanie float tym elementom, które trzeba przesunąć, oraz zastosowanie clear tam, gdzie ma się zakończyć efekt przesunięcia. W ten sposób elementy będą się wyświetlały według oczekiwanego układu. Myślę, że zrozumienie tych zasad jest kluczowe do tworzenia poprawnych i estetycznych układów na stronach www.

Pytanie 12

Aby uzyskać dane z formularza HTML bez ich widoczności w adresie URL, powinno się użyć

A. metody GET

B. samych kontrolek bez zastosowania formularza

C. wyłącznie funkcji z biblioteki PDO

D. metody POST

Wybór metody POST do przesyłania danych z formularza HTML jest odpowiedni, gdyż ta metoda nie ujawnia przesyłanych informacji w adresie URL, co zwiększa bezpieczeństwo danych. Metoda POST wysyła dane w treści żądania HTTP, co oznacza, że nie są one widoczne dla użytkowników, a także nie są rejestrowane w historii przeglądarki ani w logach serwera tak, jak ma to miejsce w przypadku metody GET. W praktyce, metodę POST wykorzystuje się w sytuacjach, gdy przesyłane są wrażliwe dane, takie jak hasła czy dane osobowe. Na przykład, podczas rejestracji użytkownika na stronie internetowej, dane osobowe są najczęściej przesyłane metodą POST, aby zminimalizować ryzyko ich wycieku. Dobrą praktyką jest również stosowanie HTTPS w połączeniu z metodą POST, co dodatkowo zabezpiecza przesyłane dane przed przechwyceniem przez osoby trzecie. W kontekście standardów, zaleca się stosowanie metody POST, gdyż zapewnia ona większą kontrolę nad przesyłanymi danymi i umożliwia większą ilość danych w porównaniu do metody GET, która jest ograniczona do około 2048 znaków w adresie URL.

Pytanie 13

Kaskadowe arkusze stylów są tworzone w celu

A. zwiększenia szybkości ładowania grafiki na stronie internetowej

B. dodania na stronie internetowej treści tekstowych

C. określenia metod formatowania elementów na stronie internetowej

D. ulepszenia nawigacji dla użytkownika

Wybór odpowiedzi, które nie dotyczą głównego celu kaskadowych arkuszy stylów, pokazuje niepełne zrozumienie ich funkcji. Kaskadowe arkusze stylów nie są narzędziem do ułatwienia użytkownikowi nawigacji po stronie, ponieważ nawigacja jest głównie zrealizowana przez HTML oraz JavaScript, a CSS jej nie wspiera w kontekście strukturalnym. CSS wpływa na wygląd elementów, ale nie definiuje samej struktury nawigacyjnej. Z kolei CSS nie służy do dodawania treści tekstowych na stronach internetowych. Treści są wprowadzane poprzez HTML, a CSS jedynie stylizuje te elementy. Tworzenie interfejsu użytkownika to nie tylko kwestia estetyki, lecz także odpowiedniego zarządzania danymi i treściami, co jest zadaniem HTML. Jeśli chodzi o przyspieszanie wyświetlania grafiki, CSS nie jest odpowiedzialny za optymalizację czasu ładowania obrazów; ten aspekt leży w gestii technik takich jak kompresja obrazów, użycie odpowiednich formatów oraz technik lazy loading. CSS skupia się na stylizacji elementów, a nie na ich wydajności. W związku z powyższym, każda z tych odpowiedzi pomija kluczową funkcję CSS, jaką jest definiowanie stylów dla elementów, co jest jego głównym celem.

Pytanie 14

Na obrazie przedstawiono projekt układu bloków witryny internetowej. Zakładając, że bloki są realizowane za pomocą znaczników sekcji, ich formatowanie w CSS, oprócz ustawionych szerokości dla bloków: 1, 2,
3, 4 (blok 5 nie ma ustawionej szerokości), powinno zawierać właściwość

A. float: left dla wszystkich bloków.

B. clear: both dla bloku 5 oraz float: left dla pozostałych bloków.

C. clear: both dla wszystkich bloków.

D. clear: both dla bloku 5 oraz float: left jedynie dla 1 i 2 bloku.

Twoja odpowiedź nie jest poprawna, ale nie przejmuj się, błąd może wynikać z niepełnego zrozumienia zastosowania właściwości 'float' i 'clear' w CSS. Zastosowanie 'float: left' dla wszystkich bloków nie jest dobrym pomysłem, ponieważ spowoduje to, że wszystkie bloki będą się starały zmieścić w jednym rzędzie, co jest niezgodne z założonym układem. Podobnie, dodawanie 'clear: both' do wszystkich bloków też nie jest poprawne, ponieważ spowoduje to, że wszystkie bloki będą wyświetlane jeden pod drugim, zamiast obok siebie. Właściwość 'clear' powinna być stosowana do bloków, które chcemy wyświetlić poniżej innych bloków, natomiast 'float: left' powinien być stosowany do bloków, które chcemy wyświetlić obok siebie. Pamiętaj, że zrozumienie tych właściwości i umiejętność ich stosowania jest kluczowe dla tworzenia efektywnych i atrakcyjnych layoutów stron internetowych.

Pytanie 15

Do zapisania prostej animacji na stronę internetową można zastosować format

A. JPG

B. CDR

C. GIF

D. PNG

Format GIF (Graphics Interchange Format) jest idealny do zapisywania prostych animacji na potrzeby stron internetowych. GIF obsługuje do 256 kolorów w palecie, co czyni go odpowiednim do animacji o niskiej rozdzielczości i małej liczbie kolorów. Animacje GIF składają się z serii klatek, które są wyświetlane w szybkim tempie, co pozwala na płynne przejścia między różnymi etapami animacji. Dzięki swojej powszechności i wsparciu w większości przeglądarek internetowych, GIF stał się standardem dla prostych animacji w sieci. Format ten wspiera również przezroczystość, co pozwala na umiejscowienie animacji na różnych tłach bez widocznego prostokątnego obramowania. Przykłady zastosowania GIF obejmują ikony ładowania, animacje przycisków czy krótkie klipy wideo zamienione na animacje. GIF jest także często wykorzystywany w marketingu internetowym i mediach społecznościowych, aby przyciągnąć uwagę użytkowników. Standardy dotyczące GIF są określone przez specyfikacje formatów obrazów i są szeroko akceptowane przez deweloperów webowych, co czyni go wygodnym wyborem dla twórców stron internetowych.

Pytanie 16

Który z poniższych znaczników HTML można wykorzystać do stworzenia struktury witryny internetowej?

A. <mark>

B. <aside>

C. <input>

D. <em>

<aside> to znacznik, który dodaje coś ekstra do treści głównej na stronie, jak np. informacje poboczne. Używanie go jest zgodne z zasadami HTML5, które promują sensowne budowanie dokumentów. Możesz go używać np. do wyróżniania sekcji z informacjami o autorze lub linkami do innych artykułów. Dzięki temu, że stosujesz semantyczne znaczniki jak <aside>, twoje treści stają się lepiej zrozumiałe dla użytkowników. Co więcej, to też polepsza dostępność strony dla osób korzystających z technologii wspomagających, jak czytniki ekranu. Dobrze zastosowane <aside> ułatwia organizację treści, co pozytywnie wpływa na SEO, bo wyszukiwarki łatwiej rozumieją strukturę strony. A i tak w ogóle, używanie semantycznych znaczników pozwala utrzymać kod w lepszej formie, co ważne, zwłaszcza przy pracy w zespołach nad większymi projektami.

Pytanie 17

Jaka linia w języku HTML wskazuje kodowanie znaków używane w dokumencie?

A. <encoding="UTF-8">

B. <meta encoding="UTF-8">

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

D. <charset="UTF-8">

Zapis <meta charset="UTF-8"> jest poprawną deklaracją kodowania znaków w dokumencie HTML, ponieważ jest zgodny z aktualnymi standardami W3C. Element <meta> powinien znajdować się w sekcji <head> dokumentu HTML i pozwala przeglądarkom na właściwe interpretowanie znaków w treści strony. Kodowanie UTF-8 jest szeroko stosowane, ponieważ obsługuje wszystkie znaki w standardzie Unicode, co czyni go idealnym dla aplikacji wielojęzycznych. Użycie poprawnego kodowania jest kluczowe, aby uniknąć problemów z wyświetlaniem tekstu, takich jak błędne znaki lub krzaki, które pojawiają się, gdy przeglądarka nie wie, jak zinterpretować dane. Przykładowo, jeżeli mamy stronę internetową w kilku językach, użycie UTF-8 zapewnia, że znaki diakrytyczne w języku polskim, czeskim czy niemieckim będą poprawnie wyświetlane. Warto również pamiętać, aby zawsze umieszczać tę deklarację jako pierwszą w sekcji <head>, aby zapewnić, że przeglądarka prawidłowo zinterpretuje wszystkie inne elementy. W kontekście SEO oraz dostępności, poprawne kodowanie jest istotne, ponieważ wpływa na indeksowanie treści przez wyszukiwarki oraz ich prezentację dla użytkowników.

Pytanie 18

Reguła CSS, która ustawia tekst paragrafu w pionie na środku, to:

A. align: middle

B. vertical-align: middle

C. text-align: center

D. vertical-align: center

Odpowiedzi, które zostały podane jako alternatywne, są niepoprawne z różnych powodów. 'Vertical-align: center' nie jest uznawane za poprawną regułę CSS, ponieważ nie istnieje właściwość 'center' w kontekście 'vertical-align'. Tylko wartości takie jak 'top', 'middle', 'bottom' oraz 'baseline' są dozwolone. Z kolei 'text-align: center' jest właściwością, która odpowiada za poziome centrowanie tekstu wewnątrz elementu blokowego lub kontenera, a nie za wyśrodkowanie w pionie. Użycie tej reguły sprawi, że tekst będzie wyśrodkowany w poziomie, co jest zupełnie inną operacją niż pionowe centrowanie. Ostatnia propozycja, 'align: middle', jest również niepoprawna, ponieważ nie jest to właściwość CSS. W kontekście wyśrodkowywania elementów w CSS, 'align' nie jest używane, a zamiast tego powinno się stosować 'vertical-align' lub techniki takie jak flexbox, które pozwalają na bardziej elastyczne i nowoczesne podejście do układania elementów. Zrozumienie różnicy między tymi właściwościami jest kluczowe dla efektywnego projektowania stron internetowych, ponieważ stosowanie niewłaściwych reguł może prowadzić do nieoczekiwanych rezultatów w układzie strony.

Pytanie 19

Który z poniższych znaczników wchodzi w skład sekcji <head> dokumentu HTML?

A. <span>

B. <section>

C. <title>

D. <img>

<title> jest jednym z kluczowych znaczników w sekcji <head> dokumentu HTML. Odpowiada za definiowanie tytułu strony, który jest wyświetlany w pasku tytułu przeglądarki oraz w wynikach wyszukiwania. Tytuł jest istotnym elementem SEO, ponieważ informuje zarówno użytkowników, jak i wyszukiwarki o tematyce strony. Przykład użycia znacznika <title>: <head><title>Moja Strona Internetowa</title></head>. Należy pamiętać, że tytuł powinien być zwięzły, ale jednocześnie opisowy, zazwyczaj nie powinien przekraczać 60 znaków. W kontekście standardów, HTML5, który jest obecnie najnowszą wersją HTML, wciąż podkreśla znaczenie znacznika <title> jako fundamentalnego dla struktury dokumentu. Odpowiedni tytuł nie tylko poprawia doświadczenia użytkowników, ale również zwiększa widoczność strony w wynikach wyszukiwania, dlatego jego prawidłowe użycie ma kluczowe znaczenie w web designie i marketingu internetowym.

Pytanie 20

Jaki zapis w HTML służy do określenia kodowania znaków w dokumencie?

A. <charset="UTF-8">

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

C. <encoding="UTF-8">

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

Wszystkie zapisy w pozostałych odpowiedziach są niepoprawne, ponieważ nie stosują przyjętej przez standardy HTML metody deklarowania kodowania znaków. Na przykład, zapis <encoding="UTF-8"> nie jest zgodny z HTML, ponieważ nie istnieje taki element w tej specyfikacji. Kodowanie znaków powinno być zawsze deklarowane przez element <meta> z atrybutem 'charset', co stanowi dobre praktyki w web development. Ponadto, zapis <meta encoding="UTF-8"> również zawiera błędne przypisanie atrybutu, gdyż 'encoding' nie jest rozpoznawanym atrybutem w kontekście tagu <meta>. Takie nieprawidłowe deklaracje mogą prowadzić do problemów z wyświetlaniem treści, co z kolei wpływa na doświadczenie użytkowników. Można też zauważyć, że zapis <charset="UTF-8"> w ogóle nie jest poprawnym elementem HTML, ponieważ nie istnieje tag na poziomie dokumentu o takiej formie. Tego rodzaju nieprawidłowości mogą wyniknąć z nieznajomości aktualnych standardów HTML oraz podstawowych zasad dotyczących kodowania znaków. Dlatego kluczowe jest, aby twórcy stron internetowych byli dobrze zaznajomieni z obowiązującymi normami i potrafili je stosować w praktyce, aby uniknąć błędów, które mogą wpłynąć na funkcjonalność i dostępność ich witryn.

Pytanie 21

Jakie polecenie HTML poprawnie odwzorowuje przedstawioną hierarchiczną strukturę tekstu, która została wyświetlona przez przeglądarkę w następujący sposób: Rozdział 1 tekst Podrozdział 1.1 tekst Podrozdział 1.2?

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

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

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

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

Poprawny kod HTML do definiowania hierarchicznej struktury tekstu oparty jest na semantycznym znaczeniu tagów. W tym przypadku, użycie <h1> dla 'Rozdział 1' jako głównego nagłówka jest zgodne z zasadami projektowania stron internetowych, gdyż <h1> powinien być używany dla najważniejszego nagłówka na stronie. Następnie zastosowanie <h2> dla 'Podrozdział 1.1' i 'Podrozdział 1.2' wskazuje na hierarchię, gdzie te podrozdziały są podkategoriami głównego rozdziału. Tag <p> jest użyty do definiowania paragrafów tekstowych, co zapewnia odpowiednie formatowanie i czytelność. Taki układ jest zgodny z wytycznymi W3C, które rekomendują używanie nagłówków w strukturze dokumentu HTML, co ułatwia zarówno przeglądarkom, jak i użytkownikom zrozumienie hierarchii treści. Przykładowo, strona internetowa z taką strukturą będzie lepiej indeksowana przez wyszukiwarki, co przyczyni się do poprawy SEO.

Pytanie 22

Znacznik <pre> </pre> służy do wyświetlania

A. znaku wielokropkowego

B. treści czcionką w języku polskim

C. treści czcionką o stałej szerokości

D. znaku skreślenia

Znacznik <pre> </pre> jest używany do wyświetlania treści w formacie, który zachowuje oryginalny układ oraz czcionkę o stałej szerokości. Umożliwia on prezentację tekstu w takiej formie, w jakiej został wprowadzony, co jest szczególnie przydatne w kontekście kodu źródłowego, danych tabelarycznych lub innych elementów, gdzie zachowanie spacji, łamań linii i innych formatów jest istotne. Przykładem zastosowania znacznika <pre> może być wyświetlanie fragmentów kodu w dokumentacji HTML lub na stronach internetowych, gdzie istotne jest, aby użytkownik mógł widzieć dokładnie, jak kod wygląda, bez modyfikacji przestrzeni lub układu, co jest często problematyczne w przypadku standardowego tekstu HTML. Używanie tego znacznika jest zgodne z dobrymi praktykami w tworzeniu przejrzystych i czytelnych interfejsów, zwłaszcza w kontekście tworzenia stron internetowych o charakterze technicznym.

Pytanie 23

Elementy <header>, <article>, <section>, <footer> są typowe dla języka

A. HTML 5

B. HTML 4.01 Strict

C. XHTML 1.1

D. HTML 4.01 Transitional

Odpowiedź HTML 5 jest prawidłowa, ponieważ to właśnie w tej wersji języka HTML wprowadzono nowe semantyczne znaczniki, takie jak <header>, <article>, <section> oraz <footer>. Te znaczniki mają na celu lepsze strukturalne organizowanie treści w dokumentach internetowych, co ułatwia zarówno odczyt zrozumienia przez przeglądarki, jak i poprawia dostępność dla osób korzystających z technologii wspomagających. Na przykład, <header> zazwyczaj zawiera nagłówki i elementy nawigacyjne, podczas gdy <article> służy do oznaczenia niezależnej jednostki treści, np. artykułu prasowego. <section> jest używane do grupowania powiązanych sekcji, a <footer> zawiera informacje takie jak prawa autorskie czy linki do polityki prywatności. Wdrożenie tych znaczników zgodnie z najlepszymi praktykami zwiększa semantykę strony, co jest korzystne dla SEO, a także pozwala na lepsze zrozumienie struktury strony przez roboty indeksujące. HTML 5 jest obecnie standardem w tworzeniu stron internetowych i jego znajomość jest kluczowa dla współczesnych deweloperów.

Pytanie 24

Którego elementu nie powinno się umieszczać w nagłówku pliku HTML?

A. <meta>

B. <title>

C. <h2>

D. <link>

Udzielenie odpowiedzi na pytanie o znaczniki w nagłówku dokumentu HTML może prowadzić do nieporozumień, jeśli nie zrozumie się właściwego kontekstu użycia każdej z opcji. Znacznik <link>, używany do powiązania dokumentu HTML z zasobami zewnętrznymi, takimi jak arkusze stylów CSS, powinien być umieszczany w sekcji <head>, a nie w <body>. Jego zastosowanie ma kluczowe znaczenie dla ładowania stylów na stronie, co wpływa na jej wygląd i układ. Z kolei znaczniki <title> i <meta> również są przeznaczone do umieszczania w sekcji <head> i dostarczają istotnych informacji o stronie, takich jak tytuł, opis i słowa kluczowe. Tytuł wyświetlany jest na pasku tytułowym przeglądarki oraz w wynikach wyszukiwania, a metadane wpływają na SEO oraz udostępnianie treści w serwisach społecznościowych. Niepoprawne byłoby zatem umieszczanie tych znaczników w sekcji <body>, ponieważ nie spełniają swojej funkcji w kontekście strukturalnym dokumentu. Warto pamiętać, że nieprawidłowe umiejscowienie znaczników w HTML narusza standardy W3C, co może prowadzić do problemów z renderowaniem strony i jej użytecznością. Zrozumienie, gdzie i jak stosować różne znaczniki, jest niezbędne dla tworzenia poprawnych i efektywnych stron internetowych.

Pytanie 25

Na ilustracji przedstawiono rezultat stosowania stylów CSS oraz odpowiadający mu kod HTML, który generuje ten przykład. Przyjmując, że marginesy wewnętrzne mają wartość 50 px, natomiast zewnętrzne wynoszą 20 px, styl CSS dla tego obrazu wygląda następująco

A. Odpowiedź B

B. Odpowiedź D

C. Odpowiedź A

D. Odpowiedź C

Odpowiedź C jest poprawna, ponieważ zdefiniowany styl CSS zawiera wszystkie elementy odpowiadające przedstawionemu formatowaniu obrazu. Styl ten określa kolor tła jako Teal, co jest zgodne z opisem wizualnym obrazu. Dodatkowo zastosowanie solidnej czarnej ramki o grubości 4 pikseli odpowiada profesjonalnym standardom, które zapewniają wyraźne oddzielenie obrazu od reszty treści przez wyróżnienie go. Zastosowanie marginesów zewnętrznych o wartości 20 pikseli oraz wewnętrznych paddingów o wartości 50 pikseli jest zgodne z podanym założeniem, co pozwala na właściwe umiejscowienie obrazu na stronie, dając przestrzeń wokół i wewnątrz elementu. Dbałość o takie szczegóły jest kluczowa dla tworzenia responsywnych i estetycznych stron internetowych. Praktyczne stosowanie tego typu stylizacji umożliwia poprawienie czytelności oraz przyciąga uwagę użytkowników na znaczące elementy strony. Warto przy tym pamiętać o zasadzie KISS (Keep It Simple, Stupid), która zachęca do utrzymywania prostoty w projektach, co nie tylko ułatwia ich tworzenie ale też późniejsze utrzymanie.

Pytanie 26

W kodzie źródłowym zapisanym w języku HTML wskaż błąd walidacji dotyczący tego fragmentu. <h6>CSS</h6>
<p>Kaskadowe arkusze stylów <b>ang.<i>Cascading Style Sheets</b></i>)<br>to język służący...</p>

A. Znacznik h6 jest nieznany.

B. Znak br nie może być użyty wewnątrz znacznika p.

C. Znak br nie został prawidłowo zamknięty.

D. Znak zamykający /b jest niezgodny z zasadą zagnieżdżania.

W analizowanym fragmencie kodu HTML występuje błąd związany z niewłaściwym zagnieżdżeniem znaczników. W szczególności, znacznik zamykający </b> został umieszczony przed zamknięciem znacznika <i>, co narusza zasady zagnieżdżania elementów w HTML. Zgodnie z wytycznymi W3C (World Wide Web Consortium), każdy znacznik otwierający musi mieć odpowiedni znacznik zamykający w odpowiedniej kolejności, a zagnieżdżanie elementów musi być przestrzegane, aby zapewnić poprawną strukturę dokumentu. W tym przypadku poprawna sekwencja powinna wyglądać następująco: <i>...</i><b>...</b>, co oznacza, że znacznik <i> powinien być zamknięty po znaczniku <b>. Przykładowo, prawidłowy zapis mógłby wyglądać tak: <p>Kaskadowe arkusze stylów <b>ang.<i>Cascading Style Sheets</i></b> to język służący...</p>. Taka struktura zapewnia, że znaczniki są poprawnie zagnieżdżone, co przekłada się na lepszą interpretację przez przeglądarki oraz narzędzia do walidacji HTML.

Pytanie 27

Po przeprowadzeniu walidacji dokumentu HTML pojawił się błąd przedstawiony na zrzucie. Jak można go usunąć?

A. zmienić zapis </h1> na <h1>

B. dodać atrybut alt do grafiki

C. w znaczniku img zmienić nazwę atrybutu src na alt

D. w znaczniku img zmienić nazwę atrybutu src na href

Atrybut alt w znaczniku img jest kluczowym elementem poprawnego i dostępnego kodu HTML. Służy on do dostarczenia tekstowego opisu zawartości obrazu co jest niezwykle ważne dla osób korzystających z technologii asystujących takich jak czytniki ekranu. Dodanie atrybutu alt poprawia również indeksowanie strony przez wyszukiwarki internetowe co wpływa na SEO. Zgodnie z wytycznymi W3C oraz WCAG każda grafika powinna posiadać ten atrybut aby zapewnić dostępność treści. Przykładowo jeśli obraz przedstawia logo firmy alt powinien zawierać nazwę firmy. W przypadku obrazów dekoracyjnych atrybut alt może być pusty co sygnalizuje że obraz nie niesie istotnej informacji. Takie praktyki wspierają budowanie witryn przyjaznych i zgodnych ze standardami co jest nie tylko wymogiem prawnym w wielu jurysdykcjach ale także dobrym nawykiem programistycznym. W związku z tym dodanie atrybutu alt jest nie tylko środkiem do eliminacji błędu walidacji ale również krokiem w stronę odpowiedzialnego tworzenia treści internetowych.

Pytanie 28

Według zasad walidacji HTML5, właściwym zapisem dla znacznika hr jest

A. </ hr>

B. </hr?>

C. </ hr />

D. <hr>

Odpowiedź <hr> jest poprawna, ponieważ zgodnie z regułami HTML5, znacznik <hr> jest znakiem samodzielnym, co oznacza, że nie wymaga zamknięcia. Jest to element blokowy, który służy do wprowadzania poziomej linii w dokumencie, co często wykorzystuje się do rozdzielania sekcji treści. Standard HTML5 zezwala na użycie skróconej formy, a zatem <hr> jest wystarczające do oznaczenia poziomej linii. W praktyce, użycie tego znacznika jest istotne dla strukturyzacji dokumentów i poprawy ich czytelności. Dobrą praktyką jest również stosowanie odpowiednich atrybutów, takich jak 'class' czy 'id', co może ułatwić późniejsze stylizowanie za pomocą CSS. Warto pamiętać, że w HTML5, chociaż można używać atrybutów takich jak 'style' czy 'title', powinny one być stosowane odpowiedzialnie, aby nie zaburzać semantyki dokumentu. Ponadto, korzystanie z tego znacznika jest zgodne z WAI-ARIA, co wspiera dostępność aplikacji webowych.

Pytanie 29

Który z wartości atrybutu background-attachment w CSS powinien być użyty, aby tło strony pozostało nieruchome w stosunku do okna przeglądarki?

A. Inherit

B. Local

C. Fixed

D. Scroll

Atrybut background-attachment w języku CSS służy do określenia, w jaki sposób tło elementu jest powiązane z przewijaniem okna przeglądarki. Wybór wartości 'fixed' sprawia, że tło jest nieruchome w stosunku do widoku przeglądarki, co oznacza, że podczas przewijania zawartości strony tło pozostaje na swoim miejscu. Przykładowo, jeśli ustawimy tło za pomocą 'background-attachment: fixed;' w naszym arkuszu stylów, efekt wizualny pozwoli na stworzenie głębi oraz wrażenia trójwymiarowości, co jest często wykorzystywane w projektach graficznych i stronach internetowych. Ta technika jest zgodna z standardami CSS, które umożliwiają deweloperom tworzenie atrakcyjnych interfejsów użytkownika. Ponadto, zastosowanie tła nieruchomego może wpłynąć na doświadczenia użytkownika, zwłaszcza w przypadku stron zawierających dużą ilość przewijanej treści. Warto również wspomnieć, że background-attachment: fixed; może być używane z innymi atrybutami, takimi jak background-image, background-size czy background-position, aby uzyskać jeszcze lepsze efekty wizualne.

Pytanie 30

Walidator W3C zgłosił błąd walidacji: Zakończony tag p został znaleziony, jednak były otwarte elementy. Który element kodu to dotyczy?

A. <p>Ala ma <b>kota</p></b>

B. <p>Ala ma <b>kota</b></p>

C. <p>Ala ma kota

D. <p>Ala ma kota</p>

Wybrana odpowiedź odnosi się do sytuacji, w której niepoprawnie zamknięto elementy HTML. W niniejszym przykładzie, tag <b> otwarty przed tagiem <p> jest niepoprawnie zamknięty w złą stronę. Poprawny kod HTML powinien najpierw zamknąć element <b>, zanim zamknie element <p>. Oznacza to, że powinien on wyglądać tak: <p>Ala ma <b>kota</b></p>. Standardy W3C, które dotyczą walidacji HTML, podkreślają znaczenie poprawnego zagnieżdżania elementów. Gdy nieprzestrzegamy tej zasady, pojawią się błędy walidacji, co może prowadzić do problemów z wyświetlaniem strony lub interpretacją przez przeglądarki. Zrozumienie zasad poprawnego zagnieżdżania elementów HTML jest kluczowe, aby tworzyć strony internetowe, które są zarówno semantyczne, jak i dostępne. Dlatego ważne jest, by zawsze zwracać uwagę na poprawną strukturę kodu HTML, co zwiększa jego wydajność i użyteczność.

Pytanie 31

W katalogu www znajdują się foldery html oraz style, w których umieszczone są odpowiednio pliki o rozszerzeniu html i pliki o rozszerzeniu css. Aby dołączyć styl.css do pliku HTML, należy użyć

A. <link rel="Stylesheet" type="text/css" href="/style/styl.css" />

B. <link rel="Stylesheet" type="text/css" href="/www/style/styl.css" />

C. <link rel="Stylesheet" type="text/css" href="/../style/styl.css" />

D. <link rel="Stylesheet" type="text/css" href="/styl.css" />

W kontekście programowania stron internetowych istnieje wiele aspektów związanych z dołączaniem stylów CSS w dokumentach HTML, które mogą prowadzić do niepoprawnych ścieżek. Wybrane przez nas niepoprawne odpowiedzi zawierają błędy związane głównie z nieprawidłowym określeniem lokalizacji pliku styl.css. W przypadku pierwszej odpowiedzi, href='/styl.css' wskazuje na to, że plik CSS znajduje się w głównym folderze serwera, co jest niezgodne z przedstawioną strukturą folderów. Z kolei w drugiej odpowiedzi, href='/style/styl.css' sugeruje bezpośrednią ścieżkę do folderu 'style' z poziomu głównego katalogu serwera, co również nie odpowiada układowi folderów, gdzie 'style' jest zagnieżdżony w katalogu 'www'. W trzeciej odpowiedzi, href='/www/style/styl.css' nie jest poprawne, ponieważ sugeruje, że folder 'www' jest katalogiem głównym serwera, co jest niezgodne z rzeczywistością. W rzeczywistości, folder 'www' jest folderem, z którego zwykle serwowane są pliki, a nie folderem, który jest bezpośrednio dostępny z poziomu WWW. Te wszystkie błędy ilustrują potrzebę zrozumienia struktury katalogów i zasad dotyczących ścieżek w HTML i CSS, by zapewnić, że pliki zostaną prawidłowo załadowane i będą dostępne dla przeglądarek internetowych.

Pytanie 32

Jak można w języku CSS ustawić kolor czerwony dla tekstu?

A. color: rgb(255,0,0);

B. color: rgb(#FF0000);

C. text-color: rgb(#FF0000);

D. text-color: rgb(255,0,0);

Odpowiedź 'color: rgb(255,0,0);' jest poprawna, ponieważ właściwość 'color' w CSS służy do definiowania koloru tekstu. Użycie funkcji rgb() umożliwia określenie koloru za pomocą składowych czerwonej, zielonej i niebieskiej (RGB), gdzie wartości mogą wynosić od 0 do 255. Wartość rgb(255,0,0) oznacza pełny czerwony kolor, co jest zgodne z zasadami kolorystyki cyfrowej. W praktyce, deklarując kolor tekstu w stylach CSS, warto skorzystać z tej metody, gdyż jest ona szeroko wspierana i zrozumiała dla przeglądarek internetowych. Dobrą praktyką jest także testowanie stylów w różnych przeglądarkach, aby upewnić się, że efekt wizualny zgodny jest z oczekiwaniami. Używanie kolorów w CSS można także łączyć z innymi właściwościami, takimi jak 'background-color', co pozwala na uzyskanie atrakcyjniejszych efektów wizualnych na stronach internetowych. Warto również zaznaczyć, że CSS3 wprowadził dodatkowe metody definiowania kolorów, jak na przykład przez nazwy kolorów, HEX lub HSL, co zwiększa elastyczność w projektowaniu graficznym.

Pytanie 33

W ramce przedstawiono właściwości pliku graficznego:

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

W celu optymalizacji czasu ładowania rysunku na stronę WWW należy:

A. zmienić format grafiki na CDR.

B. zwiększyć rozdzielczość.

C. zmniejszyć wymiary rysunku.

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

Odpowiedź jest poprawna. Czas ładowania obrazu na stronę WWW jest w dużej mierze zależny od jego rozmiaru. Zasada jest prosta: im mniejszy rozmiar pliku, tym szybciej zostanie załadowany. Zmniejszenie wymiarów rysunku prowadzi do zmniejszenia rozmiaru pliku, co optymalizuje czas ładowania. W praktyce, oznacza to, że jeżeli masz obraz o wymiarach 2000x2000 pikseli, a na stronie prezentowany jest w wymiarach 500x500 pikseli, to wartość ta jest zdecydowanie za duża i może spowalniać ładowanie strony. Dobrą praktyką jest dostosowanie rozmiaru obrazu do rozmiaru, w jakim ma być wyświetlany na stronie. Warto jednak pamiętać, że zmniejszanie rozmiaru obrazu może wpływać na jego jakość, dlatego ważne jest znalezienie odpowiedniego balansu pomiędzy czasem ładowania a jakością prezentowanego rysunku.

Pytanie 34

Emblemat systemu CMS o nazwie Joomla! to

A. Rys. D

B. Rys. B

C. Rys. C

D. Rys. A

Prawidłową odpowiedzią na to pytanie jest Rys. B, który przedstawia logo systemu Joomla!. Joomla! to jeden z najpopularniejszych systemów zarządzania treścią (CMS), używany do tworzenia stron internetowych i aplikacji online. Logo Joomla! składa się z czterech złączonych elementów, które symbolizują społeczność i współpracę, kluczowe wartości tej platformy open source. Joomla! oferuje wiele funkcji takich jak łatwe zarządzanie treścią, rozszerzalność przez moduły i komponenty oraz szerokie wsparcie dla różnych formatów multimedialnych. Platforma ta jest ceniona za elastyczność i możliwość dostosowania do specyficznych potrzeb projektowych, co czyni ją idealnym wyborem dla różnych typów stron, od prostych witryn po skomplikowane portale biznesowe. Wybierając Joomla! zyskujemy dostęp do społeczności deweloperów oraz bogatej bazy zasobów edukacyjnych i wsparcia technicznego. Zrozumienie znaczenia i zastosowania systemów CMS jak Joomla! jest kluczowe dla specjalistów zajmujących się tworzeniem i zarządzaniem stronami internetowymi, ponieważ umożliwia efektywną obsługę i rozwój dynamicznych treści.

Pytanie 35

Jak nazywa się organizacja odpowiedzialna za wyznaczanie standardów dla języka HTML?

A. ISO

B. W3C

C. WYSIWYG

D. NASK

Organizacja zajmująca się ustalaniem standardu dla języka HTML nosi nazwę W3C, co oznacza World Wide Web Consortium. Jest to międzynarodowa społeczność, która opracowuje standardy internetowe i zapewnia ich udostępnienie. W3C zostało założone w 1994 roku przez Tima Berners-Lee, twórcę WWW, z celem wspierania rozwijania wspólnych standardów, które mają na celu zapewnienie długoterminowego wzrostu i interoperacyjności w sieci. Standard HTML, a także jego kolejne wersje, są kluczowymi elementami tej inicjatywy. W3C odpowiada również za inne standardy, takie jak CSS, XML czy SVG. Dbanie o zgodność oraz poprawność kodu HTML jest niezbędne dla zapewnienia właściwego działania stron internetowych w różnych przeglądarkach. Przykłady standardów, które W3C wprowadziło, to HTML5, który wprowadził nowe elementy, takie jak <article>, <section> czy <canvas>. Te standardy pozwalają na tworzenie bardziej zaawansowanych interfejsów użytkownika, lepszą dostępność oraz efektywność. Dlatego W3C odgrywa kluczową rolę w ekosystemie internetu, wpływając na sposób, w jaki tworzymy i konsumujemy treści online.

Pytanie 36

Dla strony internetowej stworzono grafikę rysunek.jpg o wymiarach: szerokość 200 px, wysokość 100 px. Jak można wyświetlić tę grafikę jako miniaturę – pomniejszoną z zachowaniem proporcji, używając znacznika?

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

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

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

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

Pozostałe odpowiedzi niestety nie trzymają się zasady zachowania proporcji, jak zmniejszamy grafikę. W pierwszej opcji, <img src="rysunek.png" style="width: 25px; height:50px"> zestawione wartości szerokości i wysokości są krzywe, co powoduje zniekształcenie obrazu. Oryginalny rysunek ma proporcje 2:1, a tu wychodzi 1:2, co może wprowadzać ludzi w błąd. W trzeciej opcji, <img src="rysunek.png"> brak wskazania szerokości i wysokości sprawia, że obrazek wyświetla się w swoim pierwotnym rozmiarze, a to nie jest cel, bo chcemy mieć miniaturę. A ostatnia odpowiedź, <img src="rysunek.png" style="width: 25px; height:25px;"> ustala jednakowe wymiary, przez co wychodzi kwadratowa miniaturka, co nie zgadza się z oryginalnymi proporcjami. Generalnie, niepoprawne odpowiedzi mogą wynikać z braku zrozumienia, dlaczego dbanie o proporcje w grafikach jest takie ważne. To kluczowe zagadnienie w projektowaniu stron, bo dobre proporcje to podstawa estetyki i funkcjonalności wizualnych elementów na stronie.

Pytanie 37

Pokazane pole input pozwala na

A. wybranie opcji

B. wprowadzenie dowolnego tekstu

C. wprowadzenie hasła

D. selekcja opcji z listy o wartościach text1 i text2

Odpowiedź "zaznaczenie opcji" jest na pewno trafna, bo pole checkbox (<input type='checkbox'>) jest stworzone do tego, żeby użytkownicy mogli wybrać jedną lub więcej opcji z danej grupy. Widzisz, checkboxy są bardzo popularne w formularzach internetowych, bo pozwalają na różnorodność wyborów, w przeciwieństwie do przycisków radiowych, które pozwalają na zaznaczenie tylko jednej opcji. Na przykład, jak się rejestrujesz na stronie, możesz zaznaczyć różne zgody na przetwarzanie danych, co daje możliwość wyboru więcej niż jednej opcji. Z punktu widzenia HTML i najlepszych praktyk w projektowaniu formularzy, warto dodać odpowiednie etykiety (label) do checkboxów, żeby ułatwić korzystanie z nich osobom, które używają technologii asystujących. Jeśli dobrze ustalimy atrybuty 'name' i 'value', to dane po przesłaniu formularza będą odpowiednio przetworzone. Pamiętaj, że wartość checkboxa jest przesyłana tylko wtedy, gdy jest zaznaczony, co jest zgodne z oczekiwaniami użytkowników oraz standardami W3C.

Pytanie 38

W CSS, stosowanie poniższego kodu na stronie z kilkoma akapitami, gdzie każdy składa się z kilku linijek, spowoduje, że

p::first-line
 {
     font-size: 150%;
 }

A. pierwsza linia każdego z paragrafów będzie miała mniejszą wielkość czcionki od pozostałych linii

B. pierwszy paragraf na stronie będzie miał powiększoną czcionkę w całości

C. pierwsza linia każdego paragrafu będzie miała większą czcionkę niż pozostałe linie

D. cały tekst w paragrafie zostanie powiększony o 150%

Zapis CSS p::first-line { font-size: 150%; } używa selektora pseudo-elementu ::first-line który stosuje stylizację do pierwszej linii każdego paragrafu. W tym przypadku zmieniamy rozmiar czcionki pierwszej linii na 150% jej domyślnej wartości co oznacza że będzie ona o 50% większa niż reszta tekstu. Pseudo-element ::first-line jest często stosowany w projektowaniu stron internetowych aby wyróżnić pierwsze zdanie lub akapit co może pomóc w lepszej organizacji treści i zwiększeniu czytelności. Ten sposób formatowania jest zgodny ze standardami CSS i jest wspierany przez większość nowoczesnych przeglądarek internetowych. Takie podejście może być użyteczne w projektach gdzie istotne jest nadanie unikalnego wyglądu nagłówkom sekcji lub wprowadzeniom bez zmieniania struktury HTML. Ważne jest aby pamiętać że ::first-line stosuje się tylko do elementów blokowych takich jak paragrafy co ogranicza jego użycie do tych specyficznych scenariuszy ale jednocześnie pozwala na precyzyjne dostosowanie stylu tekstu w dokumencie.

Pytanie 39

.format1 {
    …
}

W CSS określono wspólne style dla pewnej grupy elementów. Użycie takich stylów w kodzie HTML odbywa się za pomocą atrybutu:

A. div = "format1"

B. class = "format1"

C. style = "format1"

D. id = "format1"

Użycie atrybutu class w języku HTML do formatowania grupy znaczników jest zgodne z najlepszymi praktykami web developmentu. Atrybut class pozwala na zastosowanie tej samej definicji stylu CSS do wielu elementów, co jest efektywne i utrzymuje porządek w kodzie. Umożliwia to również łatwą zmianę wyglądu strony poprzez modyfikację tylko jednej definicji CSS zamiast ręcznego edytowania stylów każdego z elementów z osobna. Dzięki takiemu podejściu, programista może szybko aktualizować wygląd całej strony lub jej części bez ryzyka, że pominięte zostaną pojedyncze elementy. Ponadto użycie klas jest zgodne ze standardami W3C, co zapewnia kompatybilność i poprawne renderowanie w różnych przeglądarkach. Praktycznym przykładem zastosowania jest stronie, gdzie wszystkie elementy z klasą .format1 będą miały jednolity wygląd, na przykład wszystkie przyciski na stronie mogą mieć jednakowy kolor i styl. Pozwala to na tworzenie spójnych interakcji użytkownika i ułatwia przyszłą rozbudowę strony o dodatkowe funkcje.

Pytanie 40

W CSS określono stylizację dla paragrafu, która nada mu następujące właściwości:

A. tło niebieskie, kolor tekstu czerwony, marginesy wewnętrzne ustawione na wartość 40 px

B. tło czerwone, kolor tekstu niebieski, marginesy zewnętrzne ustawione na wartość 40 px

C. tło czerwone, kolor tekstu niebieski, marginesy wewnętrzne ustawione na wartość 40 px

D. tło niebieskie, kolor tekstu czerwony, marginesy zewnętrzne ustawione na wartość 40 px

W CSS stylizacja elementów HTML jest kluczowa dla tworzenia estetycznych i funkcjonalnych stron internetowych W przypadku tego pytania analizujemy przypisanie właściwości stylu do elementu paragrafu Kod CSS background-color red ustawia tło na czerwone color blue przypisuje niebieski kolor tekstu natomiast margin 40px ustawia marginesy zewnętrzne wokół elementu na 40 pikseli Każda z tych właściwości pełni określoną rolę background-color odnosi się do koloru tła całego elementu co jest przydatne w wyróżnianiu lub oddzielaniu sekcji strony color zmienia kolor tekstu co jest istotne dla czytelności i estetyki treści natomiast margin wpływa na odstęp pomiędzy elementami zapewniając przejrzystość i poprawne rozmieszczenie na stronie Zrozumienie tych właściwości jest kluczowe dla projektowania responsywnych i estetycznych stron internetowych W praktyce używa się ich do tworzenia interfejsów które są atrakcyjne wizualnie i funkcjonalne dla użytkowników Zgodnie z dobrymi praktykami warto dbać o kontrast i spójność wizualną co jest bezpośrednio związane z omawianymi właściwościami

Rozpocznij nowy egzamin

Powrót do strony głównej