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: 8 grudnia 2025 08:09
Data zakończenia: 8 grudnia 2025 08:09

Egzamin niezdany

Wynik: 0/40 punktów (0,0%)

Wymagane minimum: 20 punktów (50%)

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Który z przedstawionych rysunków ilustruje efekt działania zamieszczonego fragmentu kodu HTML?

A. rys. B

B. rys. D

C. rys. A

D. rys. C

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź rys. C jest prawidłowa, ponieważ kod HTML przedstawia tabelę z dwiema komórkami w pierwszym wierszu, gdzie pierwsza komórka ma atrybut rowspan o wartości 2. Oznacza to, że komórka ta rozciąga się na dwa wiersze. Efektem tego jest układ, w którym pierwszy element znajduje się w jednej kolumnie ale zajmuje miejsce w dwóch wierszach. Pozostałe komórki są umieszczone zgodnie z kolejnością ich definicji w kodzie. W praktyce rowspan jest często używany do tworzenia bardziej złożonych układów tabeli, gdzie potrzebne jest łączenie komórek w pionie. Jest to ważne w kontekście dostępności i czytelności danych, szczególnie przy prezentacji skomplikowanych zestawień. Stosowanie rowspan powinno być dobrze przemyślane i zgodne z semantyką HTML ułatwiając interpretację danych przez przeglądarki i technologie wspomagające. Ważne jest także, aby używać tabel zgodnie z ich przeznaczeniem czyli do prezentacji danych tabelarycznych a nie do tworzenia layoutu strony co jest uznawane za złą praktykę od czasu wprowadzenia CSS

Pytanie 2

Strona internetowa została wyświetlona przez przeglądarkę w poniższy sposób. Wskaż kod HTML, który prawidłowo reprezentuje zaprezentowaną hierarchiczną strukturę tekstu:

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>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest w porządku! Użycie znaczników <h1> i <h2> wraz z <p> to dobry krok, bo to właśnie tak powinno wyglądać semantyczne formatowanie w HTML. Znacznik <h1> to taki główny nagłówek, który mówi, o czym jest cała strona lub sekcja, a to naprawdę kluczowe dla porządku w treści i SEO. Dzięki nagłówkom w HTML łatwiej jest zrozumieć, co jest na stronie, zarówno dla ludzi, jak i programów, które przeszukują internet. Jak już masz <h2>, to świetnie, bo to pokazuje podrozdziały, a więc hierarchię informacji. Użycie <p> dla tekstu to też dobry pomysł, bo sprawia, że tekst jest bardziej czytelny. Warto pamiętać, że semantyczne znaczniki HTML pomagają osobom z niepełnosprawnościami korzystać z internetu. Według wytycznych WCAG powinno się je stosować, żeby poprawić dostępność. A jak to robić z głową, to łatwiej potem stylować stronę przy użyciu CSS, bo możesz zmieniać wygląd bez bawienia się w treść HTML. Generalnie, dobrze jest, gdy dokumenty są jasne zarówno dla ludzi, jak i dla maszyn – to standard w nowoczesnym webdesignie.

Pytanie 3

Na ilustracji ukazano rezultat stylizacji za pomocą CSS oraz kod HTML generujący ten przykład. Zakładając, że marginesy wewnętrzne wynoszą 50 px, a zewnętrzne 20 px, jak wygląda styl CSS dla tego obrazu?

A. D.

B. C.

C. B.

D. A.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź C wskazuje na właściwe zastosowanie właściwości CSS z użyciem solidnego czarnego obramowania o grubości 4 pikseli oraz marginesów wewnętrznych i zewnętrznych. Właściwa konfiguracja stylów CSS pozwala na precyzyjne kontrolowanie wyglądu elementów na stronie, co jest kluczowe w tworzeniu responsywnych i estetycznych stron internetowych. Użycie właściwości background-color z wartością Teal pozwala na ustawienie koloru tła, co może być istotne dla zachowania spójności wizualnej projektu. Padding ustawia wewnętrzne marginesy elementu umożliwiając kontrolę nad przestrzenią wokół zawartości, co może wpływać na czytelność i estetykę. Margins z kolei określają przestrzeń zewnętrzną oddzielając element od innych sąsiednich elementów. Poprawne zrozumienie tych stylów pozwala na efektywne projektowanie UI z myślą o użytkowniku końcowym. Dodatkowo praktyczne zastosowanie solidnych obramowań jest powszechne w podkreślaniu istotnych sekcji wizualnych, co jest zgodne z dobrymi praktykami w projektowaniu stron.

Pytanie 4

W HTML znacznik <i> powoduje uzyskanie takiego samego efektu wizualnego jak znacznik

A. <u>

B. <pre>

C. <em>

D. <strong>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <em> w HTML służy do podkreślenia wyrazu w sposób, który jest semantyczny oraz wizualny. Oznacza on, że dany tekst ma szczególne znaczenie, co jest zgodne z dobrymi praktykami w tworzeniu dostępnych stron internetowych. Użycie <em> jest preferowane w sytuacjach, gdy chcemy wyróżnić określone słowa lub frazy, co jest istotne dla zrozumienia treści. Przykładem może być zdanie: "Wartość ta jest <em>szczególnie</em> istotna w kontekście analizy". W takim przypadku tekst "szczególnie" będzie wyróżniony nie tylko dla użytkownika, ale również dla wyszukiwarek oraz technologii asystujących, co przyczynia się do lepszej dostępności strony. W przeciwieństwie do znaczników, które mają głównie funkcję wizualną, takich jak <i>, <em> przynosi dodatkowe znaczenie semantyczne, co czyni go bardziej odpowiednim w kontekście tworzenia dokumentów HTML zgodnych z standardami W3C.

Pytanie 5

Jak przeglądarka zaprezentuje kod HTML formularza?

<form>
stanowisko: <input type="text"><br>
obowiązki:<br>
<input type="checkbox" name="obowiazek1" value="1" disabled checked>
sporządzanie dokumentacji<br>
<input type="checkbox" name="obowiazek2" value="2" checked>
pisanie kodu<br>
<input type="checkbox" name="obowiazek3" value="3">
testy oprogramowania<br>
</form>

A. B

B. D

C. A

D. C

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłowa odpowiedź to D ponieważ kod HTML formularza definiuje trzy pola wyboru typu checkbox z różnymi atrybutami wpływającymi na ich stan początkowy. Pierwsze pole wyboru dotyczące sporządzania dokumentacji posiada atrybuty disabled i checked co oznacza że będzie zaznaczone ale nieaktywne dla użytkownika. Oznacza to że użytkownik nie może zmienić jego stanu w przeglądarce. Drugie pole dotyczące pisania kodu ma tylko atrybut checked co oznacza że będzie zaznaczone i dostępne do edycji. Trzecie pole dotyczące testów oprogramowania nie posiada żadnego z tych atrybutów więc będzie domyślnie niezaznaczone i edytowalne. To zachowanie jest zgodne ze standardami HTML i dobrymi praktykami kodowania gdzie atrybuty kontrolują interakcje użytkownika z formularzami. Wiedza ta jest kluczowa dla projektantów stron internetowych aby zapewnić prawidłowe działanie formularzy i poprawne doświadczenie użytkownika. Formularze są podstawowym elementem interakcji z użytkownikiem dlatego zrozumienie ich działania jest niezbędne w tworzeniu funkcjonalnych i intuicyjnych interfejsów użytkownika.

Pytanie 6

W HTML wprowadzono tag a. Co oznacza wartość nofollow w atrybucie rel?

<a href="http://website.com" rel="nofollow">link</a>

A. oznacza, że naciśnięcie na link spowoduje jego otwarcie w nowej karcie przeglądarki

B. jest komunikatem dla robota wyszukiwarki Google, by nie śledził tego linku

C. jest wskazówką dla przeglądarki internetowej, aby nie interpretowała słowa 'link' jako hiperłącza

D. oznacza, że kliknięcie na link nie przekieruje do strony website.com

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut nofollow w linkach jest bardzo ważny dla tego, jak wyszukiwarki podchodzą do linków na stronach. Wprowadzenie go miało na celu ograniczenie spamu w komentarzach i w miejscach, gdzie autorzy stron nie chcieli, żeby te linki były traktowane jako polecenia. Gdy Google napotyka link z nofollow, to nie przekaże PageRank do strony, do której prowadzi. W praktyce oznacza to, że taki link nie pomoże w pozycjonowaniu tej docelowej strony. To jest super przydatne dla adminów, szczególnie przy linkach w komentarzach czy reklamach, gdzie nie zawsze można sprawdzić jakość tych linków. Dobrze jest stosować nofollow, kiedy link pojawia się automatycznie lub gdy nie jesteśmy pewni jego wartości merytorycznej.

Pytanie 7

Użycie znacznika <b> do pogrubienia tekstu może być również osiągnięte poprzez zastosowanie reguły CSS

A. font-weight

B. text-size

C. text-weight

D. font-size

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwość CSS 'font-weight' to naprawdę ważne narzędzie, które pozwala nam kontrolować grubość tekstu na stronie. Dzięki niemu możemy nie tylko pogrubić tekst, ale też ustawić różne inne wartości, jak 'normal', 'bold', 'bolder' oraz liczby od 100 do 900. To daje nam fajne możliwości w zakresie typografii. Na przykład, jak użyjesz zapisu CSS 'p { font-weight: bold; }', to wszystkie akapity na stronie będą się wyświetlały pogrubioną czcionką. Dobrze jest pamiętać, że korzystanie z 'font-weight' jest zgodne z najlepszymi praktykami, bo odseparowuje treść od stylizacji. Moim zdaniem dobrze jest ograniczać użycie znaczników HTML, takich jak <b>, do sytuacji, kiedy zależy nam na podkreśleniu ważności jakiejś treści. Projektując strony, musimy myśleć też o tym, jak strony będą odbierane przez użytkowników i jak będą dostępne. Dobre style mogą bardzo poprawić czytelność tekstu.

Pytanie 8

W języku HTML, aby uzyskać efekt podobny do tego w przykładzie, trzeba użyć konstrukcji

A. <p><strike>Duży tekst</strike> zwykły tekst</p>

B. <p><strike>Duży tekst zwykły tekst</p>

C. <p><big>Duży tekst</big> zwykły tekst</p>

D. <p><big>Duży tekst</p> zwykły tekst

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest prawidłowa, ponieważ w języku HTML, aby zwiększyć rozmiar czcionki dla części tekstu, można użyć znacznika <big>. Znacznik ten powoduje, że tekst wewnątrz jest wyświetlany w większym rozmiarze niż tekst otaczający. Jest to przydatne w sytuacjach, gdy chcemy wyróżnić część tekstu bez stosowania zaawansowanego stylu CSS. Chociaż <big> jest uznawany za przestarzały w nowoczesnym HTML, dla celów edukacyjnych i zgodności z starszymi dokumentami HTML wciąż może być stosowany. Praktyką zalecaną w aktualnych standardach jest używanie stylów CSS, np. poprzez przypisanie klasy lub bezpośrednie stylowanie in-line. Warto zaznaczyć, że stosowanie <big> nie jest zalecane w nowych projektach, ponieważ CSS oferuje większą elastyczność i kontrolę nad wyglądem tekstu. Niemniej jednak, znajomość takich znaczników jak <big> pomaga w zrozumieniu, jak rozwijał się HTML i jakie są różnice między starszymi a nowoczesnymi metodami formatowania tekstu.

Pytanie 9

Które z poniższego oprogramowania nie jest zaliczane do systemów zarządzania treścią (CMS)?

A. Mambo

B. WordPress

C. Joomla

D. Apache

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Apache to popularny serwer HTTP, który jest odpowiedzialny za zarządzanie i dostarczanie stron internetowych do przeglądarek użytkowników. Choć Apache może być używany w połączeniu z systemami zarządzania treścią (CMS) takimi jak WordPress, Joomla czy Mambo, sam w sobie nie jest systemem CMS. Systemy zarządzania treścią, takie jak Joomla, WordPress i Mambo, są platformami, które umożliwiają użytkownikom łatwe tworzenie, edytowanie i zarządzanie treściami na stronach internetowych bez potrzeby posiadania zaawansowanej wiedzy programistycznej. Apache działa na poziomie serwera, obsługując żądania HTTP i wysyłając odpowiednie pliki, podczas gdy CMS zajmuje się strukturą treści, interfejsem użytkownika oraz zarządzaniem bazą danych. Ponadto, Apache zapewnia wsparcie dla różnych języków programowania oraz technologii webowych, ale nie oferuje funkcji zarządzania treścią, które są kluczowe dla systemów CMS. Dlatego odpowiedź na pytanie jest jednoznaczna – Apache nie jest systemem zarządzania treścią, lecz serwerem, który wspiera ich działanie.

Pytanie 10

W przedstawionym kodzie HTML, zaprezentowany styl CSS jest stylem:

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

A. dynamicznym

B. nagłówkowym

C. lokalnym

D. zewnętrznym

Brak odpowiedzi na to pytanie.

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

Pytanie 11

Tekst można pogrubić za pomocą znacznika <b>, a także stosując odpowiednie właściwości CSS.

A. font-weight

B. text-size

C. font-size

D. text-weight

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 'font-weight' jest poprawna, ponieważ jest to właściwość CSS, która kontroluje grubość tekstu w elementach HTML. Używając 'font-weight', możesz określić grubość czcionki w sposób zarówno liczbowy (np. 400 dla normalnej grubości, 700 dla pogrubionej) jak i słowny (np. 'normal', 'bold'). Przykładem zastosowania może być stylizacja nagłówków na stronie internetowej, gdzie chcesz wyróżnić ważne informacje. W praktyce, stylizując nagłówki h1, h2, h3, można użyć 'font-weight: bold;' aby przyciągnąć uwagę czytelników. Zgodnie z najlepszymi praktykami, ważne jest, aby nie przesadzać z używaniem pogrubienia, ponieważ może to prowadzić do problemów z czytelnością tekstu. Warto również pamiętać, że dostępność stron internetowych jest kluczowa, dlatego należy testować różne style na różnych urządzeniach i w różnych przeglądarkach, aby upewnić się, że tekst jest czytelny dla wszystkich użytkowników.

Pytanie 12

Kolor Chartreuse przedstawiony w formie heksadecymalnej jako #7FFF00 odpowiada wartości RGB wynoszącej

A. rgb(127, 255, 0)

B. rgb(192, 255, 0)

C. rgb(64, 255, 0)

D. rgb(128, 255, 0)

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź rgb(127, 255, 0) jest poprawna, ponieważ odpowiada wartościom RGB z koloru Chartreuse zapisanego w postaci heksadecymalnej #7FFF00. W systemie heksadecymalnym, pierwsze dwa znaki (7F) odpowiadają wartości czerwonej (R), drugie dwa znaki (FF) wartości zielonej (G), a ostatnie dwa znaki (00) wartości niebieskiej (B). Przekształcając te wartości na system dziesiętny, 7F w heksadecymalnym to 127 w dziesiętnym, FF to 255, a 00 to 0. Użycie tego koloru w projektach graficznych, web designie czy w aplikacjach mobilnych jest szerokie, zwłaszcza w kontekście tworzenia interfejsów użytkownika, gdzie Chartreuse może być wykorzystany jako kolor akcentujący, przyciągający uwagę. Dobrą praktyką jest stosowanie kolorów o wysokim kontraście dla elementów interaktywnych, co sprawia, że korzystanie z tak żywego koloru jak Chartreuse może poprawić użyteczność oraz estetykę projektu. Warto również zaznaczyć, że znajomość konwersji kolorów między różnymi modelami (HEXA, RGB, CMYK) jest kluczowa dla każdego projektanta wizualnego, z uwagi na różne zastosowania w druku i w mediach cyfrowych.

Pytanie 13

Przedstawiono kod tabeli 3×2. Jaką modyfikację należy wprowadzić w drugim wierszu, aby tabela wyglądała jak na obrazie z niewidocznym wierszem?

<table>
  <tr>
    <td style="border: solid 1px;">Komórka 1</td>
    <td style="border: solid 1px;">Komórka 2</td>
  </tr>
  <tr>
    <td style="border: solid 1px;">Komórka 3</td>
    <td style="border: solid 1px;">Komórka 4</td>
  </tr>
  <tr>
    <td style="border: solid 1px;">Komórka 5</td>
    <td style="border: solid 1px;">Komórka 6</td>
  </tr>
</table>

Komórka 1	Komórka 2
Komórka 3	Komórka 4
Komórka 5	Komórka 6

A. <tr style="visibility: hidden">

B. <tr style="display: table-cell">

C. <tr style="clear: none">

D. <tr style="display: none">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwość CSS 'visibility: hidden' jest używana do ukrycia elementu, ale jednocześnie zachowuje ona jego miejsce w układzie strony. Jest to idealne dla sytuacji, kiedy chcemy ukryć konkretny element, ale nie chcemy wpływać na układ pozostałych elementów. W kontekście naszego pytania, jeśli chcielibyśmy ukryć drugi wiersz tabeli, ale nie chcemy, aby pozostałe wiersze zmieniały swoje położenie, 'visibility: hidden' jest idealnym rozwiązaniem. W przeciwnym razie, gdybyśmy użyli 'display: none', wiersz zostałby całkowicie usunięty z układu strony, a pozostałe wiersze przesunęłyby się do góry, aby zapełnić puste miejsce. W praktyce, właściwość 'visibility: hidden' jest często używana w połączeniu z JavaScript do tworzenia efektów 'hide/show', gdzie ukryte elementy mogą być później odkrywane bez wpływu na układ strony.

Pytanie 14

Aby obraz dodany za pomocą kodu HTML był zrozumiały dla programów wspierających osoby niewidome, konieczne jest zdefiniowanie atrybutu

A. alt

B. border

C. sizes

D. src

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut 'alt' w znaczniku <img> jest kluczowy dla dostępności treści internetowych. Jego główną funkcją jest dostarczenie alternatywnego opisu obrazu, który jest odczytywany przez programy wspierające osoby niewidome i niedowidzące, takie jak czytniki ekranu. Dzięki atrybutowi 'alt', użytkownicy, którzy nie mogą zobaczyć obrazu, są w stanie zrozumieć, co on przedstawia. Na przykład, jeśli obrazek przedstawia psa bawiącego się w parku, odpowiednia treść atrybutu 'alt' mogłaby brzmieć: 'Pies bawiący się w parku'. To nie tylko zwiększa dostępność strony, ale również poprawia doświadczenia użytkowników. Zgodnie z wytycznymi WCAG (Web Content Accessibility Guidelines), dostarczenie tekstu alternatywnego dla wszystkich obrazów jest niezbędne do zapewnienia pełnej dostępności treści. Przykład zastosowania: W przypadku strony e-commerce, gdzie obrazy produktów są kluczowe, odpowiednio zdefiniowany atrybut 'alt' pozwala osobom z ograniczeniami wzrokowymi na pełne zrozumienie oferty, co może wpłynąć na ich decyzje zakupowe.

Pytanie 15

Jakie polecenie powinno być zastosowane, aby tekst TEKST był widoczny w kolorze czarnym w oknie przeglądarki internetowej?

A. <font color="#000000">TEKST</font>

B. <font color="czarny">TEKST</font>

C. <body bgcolor="black">TEKST</body>

D. <body color="black">TEKST</font>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Aby wyraz TEKST został wyświetlony w kolorze czarnym w oknie przeglądarki internetowej, należy skorzystać z tagu <font> z atrybutem color ustawionym na wartości #000000, co stanowi standardowy kod heksadecymalny dla koloru czarnego. Atrybut ten pozwala na precyzyjne określenie koloru tekstu, co jest zgodne z zasadami HTML i daje możliwość dostosowania wyglądu strony do wymagań projektowych. Tag <font> jest przestarzały w HTML5, jednak wciąż może być używany w kontekście starszych dokumentów HTML. Warto zauważyć, że dla bardziej nowoczesnych praktyk zaleca się korzystanie z CSS (Cascading Style Sheets), gdzie definiowanie kolorów odbywa się w ramach stylów, zamiast bezpośrednio w znacznikach. Przykładowo, w CSS można użyć: .czarnyTekst { color: #000000; } i następnie zastosować tę klasę w znaczniku. Takie podejście poprawia semantykę kodu i ułatwia zarządzanie stylami na stronie, co jest istotne w kontekście optymalizacji SEO i dostępności dla różnych urządzeń."

Pytanie 16

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

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

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź, że tło strony będzie przewijane razem z tekstem, jest prawidłowa, ponieważ właściwość 'background-attachment: scroll' definiuje, jak tło elementu powinno się zachowywać podczas przewijania strony. Kiedy używamy tej właściwości, tło jest związane z zawartością strony, co oznacza, że przewija się ono w tym samym tempie, co tekst i inne elementy. To podejście jest często wykorzystywane w projektowaniu stron internetowych, gdzie chcemy uzyskać efekt płynności i spójności. Na przykład, w przypadku długich artykułów, które wymagają przewijania, zastosowanie 'background-attachment: scroll' sprawia, że użytkownik nie jest rozpraszany przez statyczną grafikę tła, co może prowadzić do lepszego doświadczenia podczas czytania. Dobrą praktyką jest również testowanie różnych efektów tła w responsywnych projektach, aby zapewnić, że zawartość pozostaje czytelna na różnych urządzeniach. Warto również pamiętać, że styl tła można łączyć z innymi właściwościami CSS, aby osiągnąć pożądany efekt wizualny, co jest kluczowe w nowoczesnym web designie.

Pytanie 17

Aby określić styl czcionki w CSS, należy zastosować właściwość

A. text-family

B. font-family

C. font-style

D. text-style

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwość CSS 'font-family' jest kluczowym elementem definiowania kroju czcionki w stylach CSS. Umożliwia ona określenie, jaki krój czcionki ma być użyty dla danego elementu na stronie. Możemy podać pojedynczy krój czcionki, na przykład 'Arial', lub listę alternatywnych krojów, jak 'Helvetica, sans-serif', co zapewnia większą elastyczność w przypadku, gdy wybrany krój nie jest dostępny na urządzeniu użytkownika. Zaleca się również stosowanie nazw krojów czcionek w postaci cudzysłowów, zwłaszcza jeśli nazwa zawiera spacje, jak 'Times New Roman'. Zgodnie z najlepszymi praktykami, dobór odpowiedniego kroju czcionki jest kluczowy dla czytelności i estetyki strony, dlatego warto przeprowadzić testy A/B, aby sprawdzić, które krój czcionki lepiej wpływa na doświadczenia użytkowników. Oprócz 'font-family', warto również zwrócić uwagę na inne właściwości, takie jak 'font-size', 'font-weight' czy 'line-height', które wspólnie kształtują wygląd tekstu na stronie.

Pytanie 18

W języku CSS zdefiniowano styl. Sformatowana tym stylem sekcja będzie zawierała obramowanie o szerokości:

div { border: solid 2px blue;
       margin: 20px;}

A. 2 px oraz marginesy zewnętrzne tego obramowania

B. 20 px oraz marginesy wewnętrzne tego obramowania

C. 20 px oraz marginesy zewnętrzne tego obramowania

D. 2 px oraz marginesy wewnętrzne tego obramowania

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W definicji stylu CSS podano, że sekcja div będzie miała obramowanie o szerokości 2 pikseli oraz marginesy zewnętrzne o wartości 20 pikseli. Obramowanie jest definiowane przez właściwość 'border', gdzie 'solid' oznacza typ obramowania i '2px' to jego szerokość, a 'blue' to kolor. Marginesy zewnętrzne są definiowane za pomocą właściwości 'margin', która w tym przypadku ma wartość 20 pikseli. Jest to odległość między brzegiem obiektu a innymi elementami na stronie. Zrozumienie tych właściwości jest kluczowe w projektowaniu responsywnych i dobrze zorganizowanych układów stron internetowych. Stosując te właściwości, twórcy stron mogą łatwo kontrolować wygląd i odległości między elementami, co jest szczególnie ważne w kontekście użyteczności i estetyki witryny. Przykładowo, jeśli chciałbyś dodać więcej przestrzeni pomiędzy sekcjami, wystarczy zwiększyć wartość 'margin'. Warto również zaznaczyć, że te właściwości są zgodne z aktualnymi standardami CSS, co pozwala na ich wszechstronne wykorzystanie w praktyce.

Pytanie 19

Aby przekształcić obraz z formatu JPEG do PNG bez utraty jakości, tak aby kolor biały w oryginalnym obrazie został zastąpiony przezroczystością w wersji docelowej, należy najpierw

A. dodać kanał alfa

B. obniżyć rozdzielczość obrazu

C. usunięcie gumką wszystkich białych miejsc

D. załadować obraz do programu do edycji grafiki wektorowej

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Żeby zmienić obrazek z formatu JPEG na PNG i zachować przezroczystość tam, gdzie wcześniej był biały kolor, ważny krok to dodanie kanału alfa. To w zasadzie taka dodatkowa warstwa w obrazie, która mówi, które piksele mają być przezroczyste. JPEG nie umie obsługiwać przezroczystości, więc białe obszary będą się pokazywać jako nieprzezroczyste. Jak już dodasz ten kanał alfa, możesz ustawić przezroczystość dla białych pikseli, co pozwoli na ich ukrycie lub zamianę na przezroczystość w końcowym obrazku. Na przykład, w programach jak Adobe Photoshop można użyć narzędzia do zaznaczania kolorów, żeby wybrać wszystkie białe piksele i potem je usunąć, zostawiając tylko przezroczystość. W ten sposób dostajesz efekt, którego chcesz w obrazie PNG, co jest zgodne z dobrą praktyką w obróbce grafiki i pomaga utrzymać wysoką jakość obrazu bez żadnych strat.

Pytanie 20

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

A. WYSIWYG

B. W3C

C. ISO

D. NASK

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
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 21

Jaki selektor stylizuje akapity tekstu z klasą tekst oraz element blokowy z identyfikatorem obrazki?

A. p#tekst + div.obrazki

B. p#tekst, div.obrazki

C. p.tekst + div#obrazki

D. p.tekst, div#obrazki

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to 'p.tekst, div#obrazki', ponieważ selektor 'p.tekst' odnosi się do wszystkich elementów <p>, które mają klasę 'tekst'. To podejście jest zgodne z zasadami CSS, gdzie '.' oznacza klasę. Z kolei 'div#obrazki' to selektor, który odnosi się do elementu <div> o ID 'obrazki'. W tym przypadku '#' jest używane do wskazania unikalnego identyfikatora. Dzięki temu możemy dostosować style do konkretnych elementów w HTML. Przykład zastosowania: jeżeli chcemy, aby akapity z klasą 'tekst' miały określony kolor tła oraz aby element <div> z ID 'obrazki' był wyśrodkowany na stronie, możemy napisać odpowiednie reguły CSS, które zastosują te style tylko do wskazanych elementów. Praktyka ta zwiększa przejrzystość kodu oraz ułatwia jego późniejsze zarządzanie. Zastosowanie odpowiednich selektorów zgodnych z zasadami CSS to klucz do efektywnego stylizowania stron internetowych oraz dobrych praktyk w zakresie tworzenia responsywnych interfejsów użytkownika.

Pytanie 22

Określ, w jaki sposób należy odnosić się do pliku default.css, jeżeli index.html znajduje się bezpośrednio w folderze Strona?

A. <link rel="stylesheet" type="text/css" href="c:\style/default.css" />

B. <link rel="stylesheet" type="text/css" href="...\style\default.css" />

C. <link rel="stylesheet" type="text/css" href="./style/default.css" />

D. <link rel="stylesheet" type="text/css" href="c:/style/default.css" />

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź wskazuje na relatywną ścieżkę do pliku CSS. W HTML, stosowanie ścieżek relatywnych jest standardem i dobrą praktyką. Relatywna ścieżka ./style/default.css oznacza, że plik default.css znajduje się w folderze style, który jest bezpośrednio wewnątrz katalogu, w którym znajduje się plik index.html. Stosowanie relatywnych ścieżek zapewnia większą elastyczność i przenośność projektu, ponieważ nie są one zależne od struktury folderów na danym komputerze. Jest to szczególnie ważne w kontekście aplikacji webowych, które mogą być przenoszone między różnymi środowiskami serwerowymi. Zaleca się, aby projektanci stron zawsze używali ścieżek relatywnych, aby uniknąć problemów z odwoływaniem się do zasobów po zmianie lokalizacji projektu. Użycie poprawnej składni w tagu link, jak rel=stylesheet oraz type=text/css, zgodnie z dobrymi praktykami zapewnia poprawne załadowanie stylów CSS, co wpływa na poprawne wyświetlanie się strony w przeglądarkach.

Pytanie 23

Kolor reprezentowany w formacie heksadecymalnym #0000FF to

A. zielony

B. czerwony

C. czarny

D. niebieski

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kolor zapisany w notacji heksadecymalnej #0000FF to odcień niebieskiego. Notacja heksadecymalna jest powszechnie stosowana w projektowaniu stron internetowych oraz grafice komputerowej do definicji kolorów w systemie RGB. W tej notacji sześć znaków reprezentuje wartości czerwonego, zielonego i niebieskiego (RGB), gdzie pierwsze dwa znaki to wartość czerwonego, kolejne dwa to wartość zielonego, a ostatnie dwa to wartość niebieskiego. W przypadku #0000FF, wartości są następujące: 00 (czerwony), 00 (zielony), FF (niebieski), co oznacza maksymalny poziom niebieskiego światła. Taki kolor jest czystym niebieskim, uzyskiwanym gdy intensywność czerwonego i zielonego jest zerowa, a niebieskiego maksymalna. Przykładami użycia niebieskiego w designie mogą być logo Facebooka, które wykorzystuje podobny odcień, czy tła niektórych stron internetowych. Heksadecymalne kody kolorów są zgodne z standardem W3C, co zapewnia ich uniwersalność i spójność w różnych aplikacjach graficznych i interfejsach użytkownika.

Pytanie 24

Który z poniższych wpisów w dokumencie HTML umożliwia połączenie z zewnętrznym arkuszem stylów o nazwie style.css?

A. <link rel="stylesheet' src="/style.css">

B. <a href="/style.css">

C. <link rel="stylesheet" href="/style.css">

D. <a src="/style.css">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Czyli tak, zapis <link rel="stylesheet" href="/style.css"> to rzeczywiście dobry sposób na dodanie arkusza stylów zewnętrznych do HTML-a. Element <link> jest super dołączany do zewnętrznych zasobów, a ten atrybut rel mówi przeglądarce, co tak naprawdę dołączamy – w tym wypadku arkusz stylów CSS. Jak ustalamy rel="stylesheet", to mówimy przeglądarce: hej, ten plik to CSS. A atrybut href? No, on wskazuje, gdzie ten plik się znajduje, tutaj to będzie style.css w głównym katalogu serwera. Fajnie jest mieć zewnętrzne arkusze stylów, ponieważ to uporządkowuje nam kod. Możemy zmieniać style w jednym pliku, a nie bawić się w edytowanie każdej strony z osobna. Dodatkowo, przeglądarki mogą buforować te pliki, co przyspiesza ładowanie. No i nie zapominaj o dobrej organizacji plików i sensownych nazwach – to naprawdę ułatwia późniejsze życie z projektem.

Pytanie 25

Aby strona internetowa była dostosowana do różnych urządzeń, należy między innymi określać

A. wymiary obrazów w procentach

B. tylko znane fonty, takie jak Arial

C. wymiary obrazów jedynie w pikselach

D. układ strony wyłącznie przy pomocy tabel

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Definiowanie rozmiarów obrazów w procentach jest kluczowym elementem tworzenia responsywnych stron internetowych. Dzięki temu obrazy mogą dostosowywać się do różnych rozmiarów ekranów, co jest niezbędne w erze urządzeń mobilnych. Używając procentów, możemy zapewnić, że obrazy zachowają swoje proporcje w ramach kontenera, co eliminuje problem z rozciąganiem lub zniekształceniem grafiki. Na przykład, ustawiając szerokość obrazu na 50%, obraz zajmie połowę szerokości kontenera, niezależnie od tego, czy jest to telefon, tablet, czy komputer stacjonarny. Taki sposób definiowania rozmiarów jest zgodny z zasadami projektowania responsywnego, w tym z technikami, które określają elastyczne układy oparte na jednostkach względnych, takich jak em, rem, czy vw. W praktyce przyjęcie takiego podejścia nie tylko poprawia doświadczenie użytkownika, ale również zwiększa dostępność strony, co jest istotnym aspektem w kontekście standardów WCAG (Web Content Accessibility Guidelines).

Pytanie 26

Która z list jest interpretacją podanego kodu?

A. Rys. D

B. Rys. C

C. Rys. A

D. Rys. B

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kod HTML zawiera uporządkowaną listę ol z dwoma głównymi elementami muzyka i filmy Każdy z tych elementów ma zagnieżdżoną listę nieuporządkowaną ul z odpowiednimi wpisami W HTML użycie listy ol oznacza że elementy główne będą numerowane Kolejność elementów w kodzie muzyka a następnie filmy jest zgodna z ilustracją C gdzie każdy element nadrzędny zawiera swoją własną zagnieżdżoną listę nieuporządkowaną ul Prawidłowe zagnieżdżanie list jest kluczowe dla struktury semantycznej dokumentu HTML co ma znaczenie dla SEO i dostępności Dobrym przykładem praktyki jest używanie odpowiednich znaczników aby zachować logiczną hierarchię Użycie ol i ul w odpowiednich miejscach pozwala na lepsze zrozumienie i interpretację treści przez przeglądarki i czytniki ekranowe Zapewnienie poprawnej struktury list pomaga również w utrzymaniu porządku w kodzie i lepszym zarządzaniu stylem za pomocą CSS

Pytanie 27

Aby stworzyć szablon strony z trzema ustawionymi obok siebie kolumnami, można użyć stylu CSS.

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

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest prawidłowa. W CSS do tworzenia szablonu strony z trzema kolumnami ustawionymi obok siebie stosuje się właściwość 'float: left;', a dodatkowo ustawia się szerokość każdej kolumny na 'width: 33%;'. Ta technika pozwala na równomierne rozmieszczenie trzech kolumn w poziomie na stronie. Właściwość 'float' służy do opływania elementów strony, a właściwość 'width' umożliwia kontrolę nad szerokością elementów. To są standardy w branży w projektowaniu stron internetowych. W stylach CSS zawsze powinniśmy starać się zapewnić jak najbardziej płynne i spójne doświadczenia dla użytkowników, a ten sposób tworzenia szablonów trzech kolumn jest jednym z niezbędnych narzędzi w naszym arsenale. Pamiętaj, że zrozumienie i umiejętne stosowanie CSS jest kluczowe dla tworzenia estetycznych i funkcjonalnych stron internetowych.

Pytanie 28

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

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

B. znaku skreślenia

C. znaku wielokropkowego

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
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 29

Jaką właściwość należy zastosować w selektorze CSS, aby osiągnąć efekt rozrzucenia liter?

A. text-decoration

B. text-space

C. letter-spacing

D. letter-transform

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwość CSS, która pozwala na uzyskanie efektu rozstrzelenia liter, to 'letter-spacing'. Używając tej właściwości, możemy dostosować odstęp pomiędzy poszczególnymi literami w tekście, co jest szczególnie przydatne w projektowaniu typograficznym oraz w celu zwiększenia czytelności tekstu. Wartość 'letter-spacing' może być określona w jednostkach takich jak piksele (px), em lub rem, co daje projektantom elastyczność w dostosowywaniu odstępów do różnych rozmiarów czcionek. Na przykład, ustawiając 'letter-spacing: 2px;', uzyskujemy dodatkowy odstęp 2 pikseli między literami, co sprawia, że tekst staje się bardziej przejrzysty. Zgodnie z zaleceniami W3C, stosowanie 'letter-spacing' powinno być rozważane w kontekście całego projektu, aby nie zaburzać harmonii wizualnej. Użycie tej właściwości jest istotnym elementem w planowaniu stylów CSS, który wpływa na estetykę oraz funkcjonalność stron internetowych.

Pytanie 30

Formaty wideo, które są wspierane przez standard HTML5, to

A. MP4, AVI

B. Ogg, QuickTime

C. Ogg, AVI, MPEG

D. MP4, Ogg, WebM

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź MP4, Ogg, WebM jest poprawna, ponieważ te trzy formaty wideo są oficjalnie obsługiwane przez standard HTML5, co oznacza, że są zgodne z różnymi przeglądarkami internetowymi bez potrzeby używania dodatkowych wtyczek. Format MP4, oparty na kontenerze MPEG-4, jest szeroko stosowany z uwagi na jego efektywność w kompresji oraz wysoką jakość obrazu i dźwięku. Ogg to otwarty format, który wspiera kodek VP8, co czyni go popularnym wśród projektów o otwartym oprogramowaniu. WebM, z kolei, jest również formatem otwartym, zoptymalizowanym dla wideo w Internecie, co czyni go dobrym wyborem dla zastosowań webowych. Te formaty są zgodne z najlepszymi praktykami w zakresie wydajności i dostępności, co sprawia, że są preferowane podczas tworzenia treści wideo do zastosowań online. Przykładem ich użycia może być osadzanie wideo na stronach internetowych, gdzie różnorodność formatów pozwala na ich odtwarzanie na różnych urządzeniach oraz w różnych systemach operacyjnych.

Pytanie 31

W CSS zapis selektora

p > i { color: red;}

wskazuje, że kolorem czerwonym będzie wyróżniony

A. tylko ten tekst znacznika <p>, który ma przypisaną klasę o nazwie i

B. każdy tekst w znaczniku <p> z wyjątkiem tych w znaczniku <i>

C. jedynie tekst w znaczniku <i>, który znajduje się bezpośrednio wewnątrz znacznika <p>

D. wszystkie teksty w znaczniku <p> lub każdy tekst w znaczniku <i>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź ta jest poprawna, ponieważ selektor CSS <pre>p > i { color: red; }</pre> definiuje regułę, która odnosi się jedynie do elementów <i> znajdujących się bezpośrednio wewnątrz elementu <p>. Operator > jest selektorem potomka bezpośredniego, co oznacza, że tylko te <i>, które są bezpośrednio dzieckiem <p>, będą miały przypisany kolor czerwony. Na przykład, jeśli w kodzie HTML mamy <p><i>Tekst</i></p>, to ten tekst będzie czerwony. Z drugiej strony, jeżeli <i> znajduje się zagnieżdżone w innym elemencie wewnątrz <p>, jak <p><span><i>Tekst</i></span></p>, to ten tekst nie będzie formatowany na czerwono. Tego typu selektory są niezwykle przydatne w praktycznym zastosowaniu, gdyż pozwalają na precyzyjne określenie stylów dla konkretnych elementów, co jest zgodne z najlepszymi praktykami projektowania stron internetowych, takimi jak utrzymanie czytelności kodu i unikanie niezamierzonych efektów formatowania.

Pytanie 32

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

a:hover { font-weight: bold; }

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

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
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

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

A. PNG

B. CDR

C. JPG

D. BMP

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
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 34

Na ilustracji przedstawiono projekt struktury bloków strony internetowej. Przy założeniu, że bloki są realizowane przy użyciu znaczników sekcji, ich stylizacja w CSS, poza określonymi szerokościami dla bloków: 1, 2, 3, 4 (blok 5 nie ma przypisanej szerokości), powinna obejmować właściwość

A. clear: both dla wszystkich bloków

B. clear: both dla bloku 5 oraz float: left tylko dla bloków 1 i 2

C. float: left dla wszystkich bloków

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Czwarta odpowiedź jest na miejscu, bo dzięki float: left dla bloków 1, 2, 3 i 4, te elementy będą się ładnie ustawiać w linii, zgodnie z ich szerokością. Potem, z clear: both dla bloku 5, unikniesz sytuacji, gdy nachodzi on na inne pływające bloki i pojawi się poniżej nich. Wiesz, float często stosuje się do robienia układów, gdzie elementy muszą być obok siebie. Ale float ma to do siebie, że nie wpływa na rodziców, co czasami sprawia, że wszystko może się zdezorganizować, jeśli nie użyjesz clear. To też jest ważne, bo clear mówi, które elementy nie powinny nachodzić na te pływające - dzięki temu wszystko jest uporządkowane. Dobrze jest to wykorzystać, na przykład, gdy chcesz zrobić kolumny na stronie. Generalnie, stosowanie float jest jak najbardziej w porządku, ale musi iść w parze z clear, żeby strona była czytelna i dobrze zorganizowana, zgodnie ze standardami HTML i CSS.

Pytanie 35

Która z czynności NIE WPŁYNIE na wielkość zajmowanej pamięci pliku graficznego?

A. Skalowanie obrazu przy użyciu atrybutów HTML

B. Zmiana rozdzielczości obrazu

C. Kompresja

D. Interpolacja

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Skalowanie obrazu za pomocą atrybutów HTML nie wpływa na rozmiar pliku graficznego, ponieważ ta operacja odbywa się po stronie klienta, w przeglądarce, a nie na samym pliku. Gdy obraz jest wyświetlany w HTML, atrybuty takie jak 'width' i 'height' mogą zmienić jego wizualny rozmiar na stronie, ale nie modyfikują samego pliku. W praktyce oznacza to, że niezależnie od tego, jak duży lub mały wyświetlany jest obraz, jego rzeczywisty rozmiar na dysku pozostaje niezmieniony. Dobrą praktyką w web designie jest stosowanie odpowiednich rozmiarów i formatów obrazów w zależności od kontekstu, co może poprawić szybkość ładowania strony i doświadczenie użytkownika. Warto również pamiętać, że zbyt duże obrazy mogą powodować dłuższy czas ładowania, co wpływa na SEO i oceny wydajności witryny. Dlatego zaleca się optymalizację obrazów przed ich dodaniem do strony, co jest bardziej efektywne niż poleganie na zmianie rozmiarów przez HTML.

Pytanie 36

Wykorzystanie definicji stylu CSS spowoduje, że nagłówki drugiego poziomu będą się wyświetlać

h2 {
    text-decoration: overline;
    font-style: italic;
    line-height: 60px;
}

A. czcionką standardową, z linią pod tekstem, odległość między znakami wynosi 60 px

B. czcionką standardową, z linią nad tekstem, wysokość wiersza wynosi 60 px

C. czcionką kursywną, z linią nad tekstem, wysokość wiersza wynosi 60 px

D. czcionką kursywną, z linią pod tekstem, wysokość wiersza wynosi 60 px

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź numer 2 jest poprawna, ponieważ definicja stylu CSS zawiera właściwości, które dokładnie odpowiadają tej opcji. Właściwość font-style: italic sprawia, że tekst nagłówka będzie zapisany czcionką pochyloną, co jest często stosowane w celu nadania tekstowi bardziej dynamicznego i estetycznego wyglądu. Jest to szczególnie przydatne w projektowaniu stron internetowych, gdzie wyróżnienie nagłówków ma kluczowe znaczenie dla czytelności i atrakcyjności wizualnej. text-decoration: overline dodaje linię nad tekstem, co jest mniej powszechnym, ale interesującym sposobem na wyróżnienie tekstu. Może być używane w nowoczesnych projektach, aby nadać stronie unikalny charakter. Wysokość wiersza line-height: 60px zapewnia odpowiednią przestrzeń między wierszami, co zwiększa czytelność, szczególnie przy większych czcionkach. Taki sposób formatowania jest zgodny ze standardami projektowania UX/UI, które kładą nacisk na estetykę i funkcjonalność. Dlatego zrozumienie tych właściwości i ich zastosowanie jest kluczowe dla każdego projektanta stron internetowych.

Pytanie 37

Podaj nazwę Systemu Zarządzania Treścią, którego logo jest widoczne na zamieszczonym rysunku?

A. WordPress

B. Joomla!

C. Drupal

D. MediaWiki

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Joomla! to popularny system zarządzania treścią CMS który jest szeroko stosowany do tworzenia stron internetowych aplikacji online i portali. Dzięki swojej elastyczności Joomla! jest wybierany przez wiele firm i organizacji do zarządzania treścią online. System ten charakteryzuje się modułową architekturą która umożliwia łatwe rozszerzanie jego funkcjonalności za pomocą komponentów modułów i wtyczek. Jednym z głównych atutów Joomla! jest intuicyjny interfejs użytkownika który umożliwia zarządzanie treścią bez potrzeby głębokiej wiedzy technicznej. Dodatkowo Joomla! wspiera wiele języków co czyni go idealnym wyborem dla międzynarodowych organizacji. Warto również zaznaczyć że Joomla! jest open-source co oznacza że jest rozwijany przez społeczność programistów z całego świata którzy regularnie aktualizują i ulepszają oprogramowanie. Wybranie Joomla! jako CMS pozwala na korzystanie z dużej liczby szablonów i dodatków które umożliwiają personalizację witryny zgodnie z wymaganiami klienta. Dzięki solidnej bazie użytkowników i deweloperów Joomla! oferuje wsparcie techniczne i dokumentację która ułatwia rozwiązywanie problemów. W praktyce Joomla! jest wykorzystywany przez różnorodne witryny od małych blogów po rozbudowane platformy e-commerce co potwierdza jego wszechstronność i skuteczność.

Pytanie 38

Który atrybut należy dodać do znacznika <video>, aby wyciszyć dźwięk odtwarzanego w przeglądarce filmu?

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

A. controls

B. loop

C. autoplay

D. muted

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest poprawna. Atrybut 'muted' jest używany w znaczniku <video>, aby wyłączyć dźwięk dla filmu wyświetlanego w przeglądarce. Jest to sposób na sterowanie dźwiękiem bez konieczności korzystania z dodatkowych elementów kontrolujących odtwarzanie filmu. Jest to bardzo przydatne, gdy chcemy, aby film był odtwarzany w tle bez zakłócania użytkownika dźwiękiem, co jest często stosowane na stronach internetowych. Ważne jest to, że to atrybut 'muted' jest odpowiedzialny za początkowy stan dźwięku filmu, a nie za to, czy użytkownik będzie mógł go później włączyć. Dodatkowo, dobrą praktyką jest pozostawienie użytkownikowi możliwości sterowania dźwiękiem, nawet jeśli jest on domyślnie wyłączony, co można osiągnąć dodając atrybut 'controls'.

Pytanie 39

W zamieszczonym przykładzie pseudoklasa hover sprawi, że styl pogrubiony będzie przypisany

a:hover { font-weight: bold; }

A. wszystkim odnośnikom odwiedzonym.

B. odnośnikowi, w momencie kiedy najechał na niego kursor myszy.

C. każdemu odnośnikowi niezależnie od aktualnego stanu.

D. wszystkim odnośnikom nieodwiedzonym.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest prawidłowa. Pseudoklasa :hover w CSS jest używana do stylizacji elementów, na które najechał kursor myszy. Na przykład, jeżeli użyjemy stylu 'font-weight: bold;' z pseudoklasą :hover, tekst odnośnika stanie się pogrubiony tylko wtedy, kiedy na niego najedziemy kursorem. Jest to bardzo przydatne w interaktywnym designie strony internetowej, gdzie możemy w prosty sposób zasygnalizować użytkownikowi, że dany element jest aktywny lub interaktywny. Pamiętaj, że pseudoklasy w CSS są potężnym narzędziem, które pozwala nam na tworzenie zaawansowanych efektów bez konieczności użycia JavaScriptu. Znajomość i umiejętność wykorzystania pseudoklas jest zatem kluczową umiejętnością każdego front-end developera.

Pytanie 40

W poniższym kodzie CSS czcionka zmieni kolor na żółty

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

A. odnośników, które otwierają się w tej samej karcie

B. każdego linku

C. tekstu akapitu

D. odnośników, które otwierają się w nowej karcie

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłowa odpowiedź wskazuje na zastosowanie selektora a[target="_blank"] w języku CSS. Ten selektor odnosi się do wszystkich odnośników HTML, które otwierają się w nowej karcie przeglądarki dzięki użyciu atrybutu target z wartością "_blank". Stylizacja tych odnośników na kolor żółty jest możliwa przez przypisanie właściwości color z odpowiednią wartością. Jest to praktyczne podejście, które pozwala na wizualne wyróżnienie linków otwierających się w osobnych zakładkach. Takie podejście jest zgodne z dobrymi praktykami projektowania stron internetowych, gdzie wskazane jest, aby użytkownicy mieli wyraźne sygnały o nietypowych działaniach linków. W kontekście dostępności webowej, takie stylizowanie wspiera użytkowników w szybszym orientowaniu się w sposobie działania poszczególnych elementów interfejsu. Separacja stylu i treści zgodnie z zasadami CSS umożliwia bardziej elastyczne zarządzanie wyglądem strony i ułatwia utrzymanie spójności wizualnej na całej witrynie. Przykład ten ilustruje, jak CSS może wpływać na interakcję użytkownika z elementami strony, co jest kluczowe w procesie tworzenia przyjaznych i intuicyjnych interfejsów użytkownika.

Rozpocznij nowy egzamin

Powrót do strony głównej