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 czerwca 2026 10:09
Data zakończenia: 8 czerwca 2026 10:22

Egzamin zdany!

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Co należy zrobić, gdy rozmiar pliku graficznego jest zbyt duży do umieszczenia w Internecie?

A. zwiększyć jego głębię kolorów

B. zapisać w formacie BMP

C. dodać kanał alfa

D. zmniejszyć jego rozdzielczość

Zmniejszenie rozdzielczości pliku graficznego to jedna z najskuteczniejszych metod redukcji jego rozmiaru, co jest kluczowe przy publikacji w Internecie. Rozdzielczość odnosi się do ilości pikseli, które tworzą obraz, a jej zmniejszenie prowadzi do mniejszej ilości danych do przechowania. Przykładowo, zamiast publikować obraz o rozdzielczości 4000x3000 pikseli, można zmniejszyć go do 1920x1080, co drastycznie zmniejszy wielkość pliku bez zauważalnej utraty jakości wizualnej na ekranach komputera czy urządzeń mobilnych. Zmniejszenie rozdzielczości jest zgodne z najlepszymi praktykami w zakresie optymalizacji zasobów internetowych, w tym zasadami dotyczącymi czasu ładowania strony i wydajności. Dodatkowo, odpowiednia rozdzielczość może poprawić doświadczenia użytkowników, zmniejszając czas ładowania i zwiększając responsywność witryn. Warto również pamiętać o formatowaniu plików graficznych, gdzie JPEG jest często preferowanym formatem dla zdjęć, a PNG dla obrazów z przezroczystością. Stosowanie technologii takich jak responsywne obrazy również przyczynia się do efektywnej prezentacji graficznej w sieci, co ma kluczowe znaczenie w dzisiejszym świecie online.

Pytanie 2

Którego związku selektorów CSS należy użyć w miejscu znaków zapytania, aby zdefiniowany styl został zastosowany tylko do tekstu „paragrafie”?

<!DOCTYPE html>
<html>
  <head>
    <style>
      ???{letter-spacing: 10px; color: red;}
    </style>
  </head>
  <body>
    <p>Styl <b>tekstu</b> w pierwszym <i>paragrafie</i></p>
  </body>
</html>

A. p + i

B. b > i

C. b i

D. p > i

W tym zadaniu kluczowe jest zrozumienie, jak działają różne związki (kombinatory) selektorów w CSS i jak przekładają się one na strukturę drzewa DOM. Cały problem sprowadza się do relacji między znacznikami , i . W kodzie jest bezpośrednim dzieckiem paragrafu, natomiast jest zupełnie osobnym elementem, który nie zawiera w sobie . Jeżeli wybierzemy selektor oparty wyłącznie na listingu nazw znaczników obok siebie, typu „b i”, to w CSS oznacza on: „dowolny element znajdujący się gdziekolwiek wewnątrz elementu ”. W naszym HTML nie ma takiej relacji, bo nie jest potomkiem , więc taki selektor zwyczajnie nie trafi w żaden element. To jest dość typowe myślenie: ktoś patrzy na kolejność znaczników w jednej linii i myli ją z hierarchią zagnieżdżenia.
Podobny problem występuje przy użyciu selektora „b > i”. Kombinator „>” oznacza dziecko bezpośrednie, więc „b > i” wybiera tylko te elementy , które są jednym poziomem niżej w środku . Ponownie, w naszym drzewie DOM nie jest dzieckiem , więc reguła w ogóle się nie zastosuje. Z mojego doświadczenia to częsty błąd: patrzymy na tekst „tekstu w pierwszym paragrafie” i intuicyjnie kojarzymy słowa, zamiast spojrzeć, jak naprawdę są zagnieżdżone tagi.
Jeszcze inna sytuacja dotyczy selektora „p + i”. Znak „+” to tzw. selektor sąsiadującego rodzeństwa (adjacent sibling). Oznacza: „wybierz element , który stoi w DOM bezpośrednio po elemencie , na tym samym poziomie zagnieżdżenia”. W naszym przykładzie nie jest rodzeństwem , tylko jego wnętrzem, więc ten kombinator kompletnie tu nie pasuje. To też jest dość mylące, bo część osób kojarzy „+” z jakimś rodzajem powiązania, ale nie pamięta, że chodzi o dwa znaczniki obok siebie, a nie jeden w środku drugiego.
Podsumowując, wszystkie błędne odpowiedzi ignorują faktyczną strukturę HTML i relacje rodzic–dziecko między elementami. Dobra praktyka jest taka, żeby przed wyborem selektora wyobrazić sobie drzewo DOM albo wręcz rozpisać je w formie wcięć. Dopiero potem dobiera się odpowiedni kombinator: spacja dla dowolnego potomka, „>” dla dziecka, „+” dla sąsiada, „~” dla dalszego rodzeństwa. Świadome korzystanie z tych narzędzi pozwala tworzyć precyzyjne, czytelne i łatwe w utrzymaniu arkusze CSS, zgodne z rekomendacjami W3C i dobrymi praktykami front-endowymi.

Pytanie 3

CAPTCHA to technika zabezpieczeń stosowana na stronach WWW, która pozwala:

A. automatycznie wypełnić formularz danymi użytkownika

B. pominąć proces uwierzytelniania w aplikacji

C. potwierdzić, że dane z formularza wysyła człowiek, a nie program

D. przyspieszyć logowanie do aplikacji internetowej

Pozostałe odpowiedzi przeczą celowi CAPTCHY. Nie przyspiesza ona logowania - wręcz przeciwnie, dokłada dodatkowy krok do wykonania przez użytkownika. Nie pomija też uwierzytelniania: to osobny mechanizm, który nie zastępuje sprawdzania tożsamości, lecz blokuje automaty. Automatyczne wypełnianie formularza danymi to zadanie menedżera haseł lub przeglądarki, a nie CAPTCHY, która ma utrudniać działanie botom. CAPTCHA służy do potwierdzenia, że formularz wypełnia człowiek, dlatego to ta odpowiedź jest poprawna.

Pytanie 4

Aby zastosować styl responsywny dla ekranów o szerokości od 600 px do 800 px, należy użyć reguły CSS:

@media (min-width: 800px) { }

@media screen and (max-width: 800px) and (min-width: 600px) { }

@media (max-width: 800px) (min-width: 600px) { }

@media screen (min-width: 800px) and (max-width: 600px) { }

Pozostałe zapisy są błędne lub obejmują inny zakres. Wariant z samym min-width: 800px dotyczy ekranów od 800 px w górę, więc pomija większość żądanego przedziału. Zapis z dwoma nawiasami warunków bez and jest składniowo nieprawidłowy - media queries wymagają operatora łączącego. Wersja z min-width: 800px i max-width: 600px stawia warunek sprzeczny (nic nie jest jednocześnie ≥ 800 i ≤ 600) i dodatkowo gubi and po screen. Zakres 600-800 px poprawnie opisuje reguła łącząca min-width: 600px i max-width: 800px operatorem and.

Pytanie 5

Podczas transmisji cyfrowego wideo na jakość wpływa bitrate (przepływność). Wielkość ta określa liczbę:

A. pikseli jako stosunek długości obrazu do wysokości

B. bitów przesyłanych w jednostce czasu

C. pikseli obrazu wyświetlanych na ekranie

D. próbek dźwięku w jednostce czasu

Pozostałe wielkości to co innego. Liczba próbek dźwięku w czasie to częstotliwość próbkowania (np. 44,1 kHz). Liczba pikseli na ekranie to rozdzielczość. Stosunek długości do wysokości obrazu to proporcje (aspect ratio). Przepływność to bity na jednostkę czasu.

Pytanie 6

W HTML, aby dodać obrazek z tekstem przylegającym, umiejscowionym na środku obrazka, trzeba użyć znacznika

A. <img src="/obrazek.png" alt="obraz3" height="50%">tekst

B. <img src="/obrazek.png" alt="obraz2" align="middle">tekst

C. <img src="/obrazek.png" alt="obraz1" hspace="30px">tekst

D. <img src="/obrazek.png" alt="obraz4">tekst

Aby wstawić obrazek z tekstem przyległym w HTML, należy skorzystać ze znacznika <img> z atrybutem align ustawionym na 'middle'. Atrybut align jest przestarzały w HTML5, ale nadal może być używany w kontekście tekstów przylegających do obrazków. Ustawiając 'middle', obrazek będzie wyśrodkowany w pionie względem linii tekstu, co pozwala na estetyczne umiejscowienie obrazu w odniesieniu do towarzyszącego mu tekstu. Dobrym przykładem jest zastosowanie <img src='/obrazek.png' alt='obraz2' align='middle'>tekst, co sprawia, że obrazek staje się integralną częścią tekstu, a nie tylko jego dodatkiem. W kontekście standardów, warto zauważyć, że HTML5 zaleca stosowanie CSS do pozycjonowania, dlatego bardziej współczesnym podejściem byłoby użycie stylów CSS, np. 'vertical-align: middle'. Można to osiągnąć poprzez dodanie klasy do obrazka oraz odpowiedniego stylu CSS. Chociaż align jest przestarzały, jego rozumienie jest istotne dla osób przystosowujących starsze strony do nowych standardów.

Pytanie 7

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

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

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

C. float jedynie dla bloków: 3, 4; clear dla bloku 5

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

Odpowiedź czwarta jest prawidłowa, ponieważ użycie właściwości CSS float dla bloków 2, 3 i 4 oraz właściwości clear dla bloku 5 odpowiada oczekiwanemu układowi strony. Float pozwala na ustawienie elementów obok siebie w poziomie. W tym przypadku blok 2, 3 i 4 będą umieszczone w jednej linii dzięki właściwości float: left. Blok 2 będzie zajmował więcej przestrzeni w pionie, co pozwala umieścić bloki 3 i 4 obok siebie. Blok 5 powinien znaleźć się poniżej, więc wymaga zastosowania właściwości clear: both, aby uniknąć zachodzenia na inne elementy pływające. Taki układ jest często stosowany w projektowaniu responsywnych stron internetowych, gdzie float umożliwia elastyczne dostosowanie się elementów do różnych szerokości ekranów. Warto pamiętać, że obecnie często używa się także display: flex lub grid jako nowocześniejszych sposobów układania elementów, jednak float wciąż znajduje zastosowanie w prostych układach. Zrozumienie, jak działa float i clear, jest kluczowe dla tworzenia poprawnych i estetycznych układów bloków na stronie internetowej.

Pytanie 8

Co można powiedzieć o wyświetlonym przez witrynę tekście "test kolorów"?

<p id="p1" style="color:blue;">test kolorów</p>
<button type="button"
  onclick="document.getElementById('p1').style.color='red'">
  test</button>

A. Po wciśnięciu przycisku test kolor tekstu jest niebieski.

B. Wciskanie przycisku test sprawia, że kolor tekstu jest na przemian niebieski i czerwony.

C. Po wciśnięciu przycisku test kolor tekstu jest czerwony.

D. Zaraz po załadowaniu witryny kolor tekstu jest czerwony.

Zauważyłem, że w kodzie HTML kolor tekstu na początku jest niebieski. Jest to ustawione w atrybucie style dla elementu o id='p1'. Po kliknięciu w przycisk, uruchamia się funkcja JavaScript, która zmienia kolor na czerwony. Ta funkcja jest przypisana w atrybucie onclick. Takie podejście to świetny sposób na interakcję użytkownika z witryną, korzystając ze skryptów JavaScript. Myślę, że to bardzo dobry przykład, który pokazuje, jak można robić interaktywne elementy na stronach. Wiedza na ten temat może pomóc lepiej zrozumieć, jak działają strony internetowe i co można zrobić z JavaScriptem.

Pytanie 9

Aby uzyskać płynne przejście pomiędzy dwoma kolorami w grafice, należy zastosować:

A. gradient

B. filtr szumu

C. pikselizację

D. antyaliasing

Gradient to płynne, stopniowe przejście pomiędzy co najmniej dwoma kolorami. Definiuje się w nim kolory skrajne (i ewentualnie pośrednie) oraz kierunek przejścia - liniowy lub promienisty. Używa się go do teł, przycisków i efektów graficznych, a w CSS dostępny jest m.in. jako linear-gradient. Dlatego do uzyskania płynnego przejścia barw służy gradient.

Pytanie 10

Walidator W3C zgłosił błąd o niezamkniętych elementach przy zamykającym . Którego fragmentu dotyczy?

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

<p>Ala ma kota

<p>Ala ma kota</p>

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

Znaczniki trzeba zamykać w ODWROTNEJ kolejności niż otwierano. W Ala ma kota otwarto wewnątrz , ale  zamknięto przed  - tagi się krzyżują, dlatego walidator zgłasza błąd. Dlatego chodzi o ten fragment.

Pytanie 11

Wskaż styl CSS za pomocą którego został uzyskany przedstawiony efekt.

psy
koty
chomiki
świnki morskie
rybki

A. ul li:nth-child(odd) { background-color: DodgerBlue; }

B. ul li:nth-child(even) { background-color: DodgerBlue; }

C. ul li:active { background-color: DodgerBlue; }

D. ul li:hover { background-color: DodgerBlue; }

Wybrane przez Ciebie odpowiedzi są nieprawidłowe. Zacznijmy od selektora CSS 'ul li:active { background-color: DodgerBlue; }' - aktywny stan elementu to moment, kiedy jest on aktualnie klikany, co nie pasuje do obserwowanego efektu. Następnie 'ul li:nth-child(odd) { background-color: DodgerBlue; }' - ten selektor odnosi się do nieparzystych elementów listy, podczas gdy na obrazku parzyste elementy mają niebieskie tło. Na koniec 'ul li:hover { background-color: DodgerBlue; }' - pseudoklasa :hover odnosi się do stanu, kiedy kursor myszy jest nad elementem, co również nie jest zgodne z efektem na obrazku. Wybór nieodpowiedniej pseudoklasy sugeruje, że nie zrozumiałeś do końca ich zastosowania w CSS. Jest to typowy błąd, który można naprawić przez dokładniejsze zapoznanie się z tym aspektem języka CSS, konkretnie z różnymi pseudoklasami i ich zastosowaniem.

Pytanie 12

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

A. aside {float: left; }

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

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

D. nav { float: right; }

W tym zadaniu kluczowe jest zrozumienie, jak naprawdę działa float, a nie tylko samo skojarzenie, że „left to lewo, right to prawo”. Wiele osób myśli, że wystarczy ustawić jeden element na lewo, drugi na prawo i wszystko magicznie się poukłada. W praktyce przeglądarka trzyma się bardzo konkretnych reguł: najpierw liczy kolejność elementów w HTML, potem dopiero stosuje float i układa je możliwie jak najwyżej i jak najbliżej odpowiedniej krawędzi.

Jeśli nada się float tylko dla aside albo tylko dla nav, to zmienia się ich pozycja, ale układ trzech bloków nie spełni warunku z zadania: aside i nav nie zamienią się miejscami z pozostawieniem section w środku. Przykładowo, samo float: left na aside niczego nie „zamieni”, bo element i tak pojawia się jako pierwszy w kodzie, więc będzie u góry, tylko że „przyklejony” do lewej. Z kolei ustawienie nav na prawą stronę bez odpowiedniego floatowania section prowadzi do sytuacji, gdzie section nadal zachowuje się jak normalny blok, zwykle ląduje pod elementami pływającymi albo obok nich w sposób mało przewidywalny dla początkującego.

Częsty błąd myślowy polega też na tym, że ktoś próbuje wszystkim elementom dać float: left, licząc na to, że przeglądarka „ułoży je po swojemu”. Wtedy jednak wszystkie te bloki ustawiają się w jednym kierunku, w kolejności z HTML, więc nie ma mowy o świadomym „zamienianiu miejsc”. Brak zrozumienia, że float wyjmuje element z normalnego przepływu i wpływa na to, jak kolejne elementy zawijają się wokół niego, prowadzi właśnie do takich błędnych odpowiedzi. Z mojego doświadczenia lepiej jest najpierw narysować sobie prosty schemat: w jakiej kolejności idą znaczniki i które z nich mają pływać w prawo, a które zostać w naturalnym układzie. Dopiero wtedy dobiera się konkretne deklaracje CSS. Takie myślenie przydaje się nie tylko przy float, ale też przy nauce flexboxa czy grida, gdzie kolejność w DOM i własności układu też grają ogromną rolę.

Pytanie 13

Która z definicji CSS określa formatowanie nagłówka h1: tekst nadkreślony, z odstępami między wyrazami 10 px i czerwonym kolorem tekstu?

h1{
  text-decoration: overline;
  word-spacing: 10px;
  color: red;
}                       A.

h1{
  text-decoration: overline;
  letter-spacing: 10px;
  color: red;
}                       B.

h1{
  text-transform: none;
  line-height: 10px;
  color: rgb(255,0,0);
}                       C.

h1{
  text-decoration: underline;
  line-height: 10px;
  color: rgb(255,0,0);
}                       D.

A. D.

B. C.

C. A.

D. B.

Niektóre z odpowiedzi, które wybrałeś, zawierają nieprawidłowe pojęcia i błędy w zrozumieniu CSS. Polecenie 'letter-spacing' stosowane w odpowiedzi B jest służy do określania odległości między literami, nie między wyrazami. Jest to różnica kluczowa, która ma duży wpływ na wygląd i czytelność tekstu. Odpowiedź C nie zawiera żadnego z wymaganych stylów, co pokazuje brak zrozumienia dla zadania. Używanie 'underline' zamiast 'overline', jak to miało miejsce w odpowiedzi D, prowadzi do podkreślenia tekstu zamiast nadkreślenia. To ilustruje błąd w zrozumieniu różnych stylów tekstu dostępnych w CSS. W codziennej praktyce, zrozumienie różnicy między tymi dwoma stylami jest kluczowe dla efektywnego formatowania tekstu. W CSS, jest ważne aby dokładnie rozumieć, co każde polecenie robi, oraz jak te polecenia wpływają na ostateczny wygląd strony.

Pytanie 14

W CSS, aby ustalić wewnętrzny górny margines, czyli odstęp pomiędzy elementem a jego obramowaniem, należy zastosować komendę

A. local-top

B. padding-top

C. outline-top

D. border-top

Odpowiedź 'padding-top' jest prawidłowa, ponieważ w CSS termin 'padding' odnosi się do wewnętrznego odstępu, który tworzy przestrzeń pomiędzy zawartością elementu a jego granicą (border). 'padding-top' specyfikuje górny odstęp wewnętrzny, co jest istotne w kontekście estetyki i układu strony. Definiując 'padding-top', możemy dostosować wygląd elementów, aby lepiej pasowały do reszty projektu i poprawiły czytelność. Na przykład, jeśli mamy przycisk z tekstem, użycie 'padding-top: 10px;' zapewni, że tekst nie będzie przyklejony do górnego brzegu przycisku, co zwiększy jego estetykę oraz użyteczność. W praktyce dobrą praktyką jest również stosowanie 'padding' w połączeniu z 'margin', aby osiągnąć odpowiednią separację między różnymi elementami w układzie. Przestrzeganie standardów CSS pomaga w tworzeniu responsywnych i dostosowanych układów, które dobrze działają na różnych urządzeniach.

Pytanie 15

W CSS, co spowoduje poniższy kod z plikiem rysunek.png?

p {background-image: url("rysunek.png");}

A. tłem całej witryny

B. widoczny, jeśli zastosowany zostanie znacznik img w kodzie

C. pokazany obok każdego akapitu

D. tłem dla każdego akapitu

Wybrana odpowiedź jest poprawna ponieważ w arkuszach stylów CSS zastosowanie selektora elementu p z właściwością background-image powoduje że obraz rysunek.png zostanie ustawiony jako tło dla każdego elementu paragrafu na stronie. Jest to przydatna technika gdy chcemy nadać spójny wygląd wszystkim paragrafom w dokumencie. Tło to może być używane do celów estetycznych lub jako część identyfikacji wizualnej strony. Warto pamiętać że w CSS można dodatkowo kontrolować sposób wyświetlania obrazka tła za pomocą właściwości takich jak background-repeat background-size i background-position co pozwala na precyzyjne dostosowanie wyświetlania. Dobre praktyki zalecają aby obrazy tła były odpowiednio zoptymalizowane pod kątem rozmiaru aby nie wpływały negatywnie na szybkość ładowania strony. W praktyce stosowanie obrazów jako tła w paragrafach może wspierać wizualne narracje oraz zwiększać zaangażowanie użytkowników szczególnie gdy są stosowane w przemyślany sposób w kontekście projektowania doświadczeń użytkownika UX.

Pytanie 16

Przedstawiona ikona funkcji edytora grafiki rastrowej o nazwie "kubełek" umożliwia

A. pobranie wskazanej barwy i ustawienie jej, jako aktywnej.

B. zaznaczenie obszaru o takim samym kolorze.

C. wypełnienie zaznaczonego obszaru kolorem.

D. zmianę aktywnych kolorów.

Gratulacje, odpowiedź jest poprawna. Ikona 'kubełek farby' w edytorach grafiki rastrowej jest narzędziem umożliwiającym wypełnienie zaznaczonego obszaru wybranym kolorem. Działanie tego narzędzia jest podobne do rozlewania farby - kolor wypełnia ciągły obszar aż do napotkania krawędzi lub pikseli o innym kolorze. Ta funkcja pozwala na szybkie i efektywne kolorowanie większych powierzchni obrazu. W praktyce, jest to niezwykle przydatne narzędzie, szczególnie gdy potrzebujesz szybko zmienić tło obrazu lub wypełnić obszar jednolitym kolorem. Warto również zauważyć, że różne edytory mogą mieć dodatkowe opcje dla tego narzędzia, takie jak możliwość wyboru tolerancji (która decyduje, jak bardzo podobny kolor musi być, aby został wypełniony) czy wypełnianie według warstwy czy według obrazu.

Pytanie 17

Aby poprawnie zdefiniować hierarchiczną strukturę tekstu na stronie internetowej, należy zastosować:

A. znaczniki <h1>, <h2> oraz 

B. znacznik  z formatowaniem

C. znacznik <div>

D. znaczniki <frame> i <table>

Wszystkie wymienione znaczniki istnieją w HTML, ale tylko nagłówki naprawdę tworzą hierarchię treści. <div> to neutralny pojemnik - grupuje elementy, lecz sam z siebie nic nie znaczy dla struktury. <frame> pochodzi z dawnego, wycofanego sposobu dzielenia okna na ramki, a <table> służy do prezentacji danych tabelarycznych, nie do organizacji tekstu. Akapit  z dodatkowym formatowaniem zmienia jedynie wygląd, ale nie ustala, co jest tytułem, a co podrozdziałem. Dopiero nagłówki <h1>-<h6> (w poprawnej odpowiedzi razem z akapitem ) wyznaczają kolejne poziomy ważności, które rozumieją przeglądarki, wyszukiwarki i technologie wspomagające.

Pytanie 18

Znaczniki HTML oraz używane do wyróżniania istotności tekstu, pod względem formatowania odpowiadają znacznikom

A. `````` oraz ``````

B. `````` oraz ``````

C. `````` oraz ``````

D. `````` oraz ``````

Wybór znacznika oraz jako odpowiedzi na pytanie o semantyczne odpowiedniki oraz można uznać za niepoprawny, ponieważ znaczniki te pełnią inne funkcje. Znacznik służy do wyróżniania tekstu, co ma na celu zwrócenie uwagi na istotne informacje, ale nie odnosi się bezpośrednio do semantycznego akcentowania. Z kolei , mimo że jest używany do kursywnego pisma, nie niesie ze sobą znaczenia semantycznego, które jest kluczowe dla HTML5. Oznaczenie tekstu jako kursywy nie wskazuje, że tekst jest ważniejszy, a użycie do podkreślenia tekstu, które sugeruje tylko wizualne podkreślenie, również nie ma semantycznego znaczenia. Znacznik jest bardziej zbliżony do pod względem wizualnym, ale nie posiada jego semantycznej wartości. Używanie czy do oznaczania ważności tekstu jest również błędne, ponieważ wskazuje na tekst w indeksie górnym, co nie ma związku z akcentowaniem. Typowe błędy myślowe w tym kontekście mogą wynikać z mylenia aspektów wizualnych z semantycznymi w HTML. Dlatego kluczowe jest, aby przy projektowaniu stron używać znaczników zgodnych z ich przeznaczeniem, co nie tylko poprawi strukturalność dokumentu, ale także przyczyni się do lepszego doświadczenia użytkownika oraz dostępności treści.

Pytanie 19

Jak nazywa się zestaw narzędzi i funkcji do tworzenia aplikacji, narzucający jej szkielet, strukturę, a czasem wzorzec budowy?

A. framework

B. middleware

C. komponent

D. biblioteka

Framework to zestaw narzędzi i funkcji narzucający aplikacji SZKIELET i strukturę (a często wzorzec budowy, np. MVC) - programista uzupełnia gotowy stelaż własnym kodem. Dlatego to framework.

Pytanie 20

Zamieszczony kod HTML formularza zostanie wyświetlony przez przeglądarkę w sposób:

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

A. A

B. C

C. D

D. B

Poprawna odpowiedź to forma, w której przeglądarka wyświetli treść formularza, uwzględniając zarówno etykiety, jak i wszystkie zaznaczone opcje. W tym przypadku, po wypełnieniu formularza, użytkownik zobaczy: "stanowisko: obowiązki: sporządzanie dokumentacji pisanie kodu testy oprogramowania". Kluczowym aspektem jest to, że w formularzu użyto atrybutu 'disabled' dla pierwszego checkboxa, co oznacza, że nie będzie on mógł zostać odznaczony przez użytkownika, ale mimo to jego etykieta zostanie wyświetlona. Przeglądarki internetowe renderują formularze na podstawie struktury HTML, a to, co jest niewidoczne dla użytkownika (checkboxy, które są odznaczone lub zablokowane), nie wpływa na wyświetlanie tekstowych etykiet. Zgodnie z zasadami dostępności i użyteczności, ważne jest, aby użytkownik miał pełny wgląd w dostępne opcje, co poprawia interakcję z formularzem. To podejście jest zgodne z dobrymi praktykami projektowania interfejsów użytkownika, które promują przezroczystość i jasność w komunikacji z użytkownikiem.

Pytanie 21

Który format stosuje BEZSTRATNĄ kompresję dźwięku?

A. WWA

B. FLAC

C. MP3

D. AAC

Pozostałe formaty kompresują dźwięk STRATNIE - usuwają część informacji, by mocniej zmniejszyć plik (MP3, AAC). „WWA” nie jest standardowym formatem (mylone z WMA). Bezstratną kompresję zapewnia FLAC.

Pytanie 22

Znak <s> w HTML powoduje

A. migotanie tekstu

B. skreślenie tekstu

C. pochylenie tekstu

D. podkreślenie tekstu

Znacznik <s> w języku HTML jest używany do oznaczania tekstu, który jest przekreślony, co jest przydatne, gdy chcemy wskazać, że dana treść nie jest już aktualna lub jest nieprawidłowa. Na przykład, w dokumencie HTML możemy użyć znacznika <s> do przekreślenia starej ceny produktu, aby podkreślić, że cena została obniżona. Taki sposób prezentacji informacji jest zgodny z zasadami dostępności, ponieważ przekreślony tekst wciąż jest czytelny przez technologie asystujące, co pozwala użytkownikom na zrozumienie zmiany w kontekście treści. W praktyce zastosowanie tego znacznika może również wpłynąć na estetykę strony, eliminując potrzebę stosowania stylów CSS do osiągnięcia tego samego efektu.

Pytanie 23

Wskaż poprawne stwierdzenie dotyczące przedstawionego kodu HTML.
<video width="640" height="480" controls>
<source src="animacja.mp4" type="video/mp4">
</video>

A. Kod może nie działać w przeglądarkach, które nie obsługują HTML5.

B. Plik animacja.mp4 powinien mieć rozdzielczość 640x480 pikseli, aby był odtwarzany.

C. Lokalizacja pliku jest nieprawidłowa, brak w niej ścieżki bezwzględnej.

D. Użytkownik nie będzie miał możliwości kontrolowania odtwarzania wideo.

Pierwsze stwierdzenie sugeruje, że plik animacja.mp4 musi mieć dokładnie rozdzielczość 640x480 pikseli, co jest nieprawdziwe. Format <video> w HTML umożliwia odtwarzanie filmów w różnych rozdzielczościach, a przeglądarka automatycznie dostosuje odtwarzanie w zależności od dostępnych zasobów i jakości pliku wideo. Drugie stwierdzenie, że użytkownik nie będzie miał możliwości sterowania odtwarzaniem, jest sprzeczne z definicją atrybutu 'controls', który dodaje elementy sterujące do odtwarzacza, takie jak play, pause i seek. Trzecie stwierdzenie odnosi się do lokalizacji pliku, podczas gdy w rzeczywistości plik animacja.mp4 może być lokalizowany w różnych folderach, a nie tylko w ścisłej ścieżce bezwzględnej. HTML5 wprowadza wiele standardów i uproszczeń, a deweloperzy są zobowiązani do przestrzegania tych standardów, aby zapewnić, że ich treści będą dostępne na różnych platformach. Typowe błędy myślowe prowadzące do takich wniosków obejmują nieznajomość zasad działania znaczników HTML oraz niepełne zrozumienie mechanizmów, jakie przeglądarki stosują w kontekście odtwarzania multimediów.

Pytanie 24

W CSS zapis

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

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

A. treści akapitu.

B. wszystkich linków.

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

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

Odpowiedź 'odnośników, które otwierają się w osobnej karcie' jest poprawna, ponieważ w CSS selektor 'a[target="_blank"]' odnosi się do elementów <a> (odnośników), które mają atrybut 'target' ustawiony na '_blank'. Oznacza to, że te odnośniki są zaprojektowane do otwierania linków w nowej karcie lub oknie przeglądarki. Przykład zastosowania: jeśli tworzymy stronę internetową z odnośnikami do zewnętrznych zasobów, użycie atrybutu 'target="_blank"' pozwala użytkownikom na zachowanie otwartej strony w przeglądarce. W CSS, kolor czcionki tych odnośników został ustawiony na żółty, co jest praktycznym podejściem do wyróżnienia ich w stosunku do innych linków. Warto również zauważyć, że stosowanie kolorów w kontekście dostępności jest istotne, dlatego dobór kolorów powinien być przemyślany, aby nie wpłynąć negatywnie na czytelność. Dobre praktyki obejmują również dodanie wskazówki do odnośnika, na przykład poprzez użycie atrybutu 'title', co jeszcze bardziej ułatwia użytkownikom zrozumienie, czego mogą się spodziewać po kliknięciu w link.

Pytanie 25

Który format zapisze obraz rastrowy BEZ utraty jakości (bezstratnie) i nadaje się na stronę WWW?

A. JPG

B. PNG

C. CDR

D. BMP

Pozostałe formaty nie spełniają obu warunków. JPG kompresuje STRATNIE (gubi detale, daje artefakty przy ostrych krawędziach). BMP jest praktycznie nieskompresowany, więc daje ogromne pliki nieprzyjazne webowi. CDR to format programu CorelDRAW (wektorowy), nieobsługiwany przez przeglądarki. Bezstratny obraz dla WWW to PNG.

Pytanie 26

W HTML, aby uzyskać rezultat jak w podanym przykładzie, należy użyć struktury `

Duży tekst zwykły tekst

A. <big>Duży tekst</big> zwykły tekst

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

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

D. <strike>Duży tekst zwykły tekst

W każdej z błędnych odpowiedzi pojawiają się istotne nieporozumienia dotyczące użycia odpowiednich znaczników HTML. Odpowiedzi, które wykorzystują znacznik <strike>, mają na celu wyrażenie skreślenia tekstu, co jest zgoła nieodpowiednie w kontekście zwiększania jego rozmiaru. Użycie tego znacznika w przykładzie wskazuje na mylne zrozumienie jego funkcji oraz na niepoprawne podejście do formatowania treści, co prowadzi do nieczytelnych i mniej przyjaznych dla użytkowników interfejsów. Pomijając aspekt stylistyczny, takie podejście może również negatywnie wpłynąć na dostępność, ponieważ osoby korzystające z czytników ekranu mogą mieć trudności z interpretacją skreślonych fragmentów. Z kolei omijanie znacznika <big> lub jego niewłaściwe zagnieżdżenie w odpowiedziach, gdzie nie jest on poprawnie zamknięty, może prowadzić do błędów w renderowaniu tekstu, co z kolei wpływa na ogólną estetykę oraz funkcjonalność witryny. W branży web developmentu kluczowe jest, aby każdy element HTML był używany zgodnie z jego przeznaczeniem, co nie tylko poprawia doświadczenia użytkownika, ale również wspiera najlepsze praktyki programistyczne oraz standardy semantyczne. Z tego powodu błędne koncepcje związane z używaniem znaczników w HTML mogą prowadzić do poważnych problemów w kontekście zarówno wizualnym, jak i funkcjonalnym strony internetowej.

Pytanie 27

Wszelkie dane, które dostarczają informacji o innych danych, nazywane są

A. metalanguage.

B. databus.

C. markup language.

D. metadata.

Poprawna odpowiedź to „metadata”, czyli po polsku metadane. Metadane to wszystkie dane, które opisują inne dane. Można powiedzieć, że są to „informacje o informacji”. Przykład z życia: plik zdjęcia JPG. Sam obraz to dane, a takie elementy jak data wykonania, model aparatu, rozdzielczość, lokalizacja GPS, autor – to właśnie metadane zapisane np. w formacie EXIF. Podobnie w świecie WWW: w dokumencie HTML mamy sekcję <head>, a w niej znaczniki <meta>. Te znaczniki nie są wyświetlane użytkownikowi jako treść strony, ale przekazują wyszukiwarkom i przeglądarkom informacje o stronie, np. opis, słowa kluczowe, kodowanie znaków, język. To jest klasyczny przykład metadanych w praktyce. W bazach danych metadane to np. definicje tabel, typy kolumn, klucze główne, indeksy, ograniczenia. System zarządzania bazą danych przechowuje je w tzw. katalogach systemowych. Dzięki temu wie, jak interpretować rekordy, jakie są relacje między tabelami, jakie są dopuszczalne wartości. Bez metadanych dane byłyby po prostu chaotycznym zbiorem bitów, z którego niewiele da się wyciągnąć. W standardach branżowych stosuje się różne schematy metadanych, np. Dublin Core dla zasobów cyfrowych, czy schema.org dla stron internetowych, aby wyszukiwarki lepiej rozumiały zawartość. Z mojego doświadczenia warto od początku myśleć o metadanych jako o czymś, co podnosi jakość systemu: ułatwia wyszukiwanie, integrację, automatyczne przetwarzanie danych. Dobra praktyka jest taka, żeby dla ważnych zasobów (pliki, rekordy w bazie, strony WWW, API) zawsze planować strukturę metadanych: kto utworzył, kiedy, jaki typ, wersja, status. To bardzo pomaga przy utrzymaniu aplikacji, debugowaniu i rozwoju systemu.

Pytanie 28

Brak którego elementu spowoduje błąd walidatora dokumentu HTML5?

A. prologu <!DOCTYPE html>

B. <meta name="author" content="...">

C. przynajmniej jednego <h1>

D. <body>

Każdy poprawny dokument HTML5 musi zaczynać się od deklaracji typu dokumentu <!DOCTYPE html>. Mówi ona przeglądarce i walidatorowi, że dokument jest w standardzie HTML5, i włącza tryb zgodny ze standardem. Jej brak walidator zgłosi jako błąd. Dlatego niezbędny jest prolog <!DOCTYPE html>.

Pytanie 29

W zaprezentowanym fragmencie kodu HTML zdefiniowano pole input, które można opisać jako

<input type="password" name="pole">

A. pokazuje znaki, które zostały do niego wprowadzone

B. dopuszcza jedynie wprowadzanie wartości liczbowych

C. zawiera domyślny tekst „pole”

D. ukrywa znaki, które zostały do niego wprowadzone

W formularzach HTML często spotykamy różne typy pól input, mające specyficzne zastosowania. Pole input z atrybutem type="text" pozwala na wpisywanie dowolnego tekstu, co sprawia, że jest ono bardziej elastyczne, ale nie zapewnia żadnej ochrony dla wprowadzanych danych. Problematyczne mogą być sytuacje, gdzie takie pole jest używane dla danych wrażliwych, ponieważ nie oferuje ono żadnego poziomu prywatności. Wprowadzenie domyślnego tekstu w polu input jest realizowane poprzez atrybut value, który ustawia początkową wartość, widoczną dla użytkownika. To rozwiązanie bywa mylone z placeholderem, który służy jako podpowiedź wewnątrz pola, ale nie jest domyślną wartością samego pola. Input o typie "number" w HTML ogranicza wprowadzane dane wyłącznie do liczb, co jest przydatne w przypadku pól wymagających wartości liczbowych, takich jak wiek czy ilość. Choć to ograniczenie jest zasadne i chroni przed błędami użytkownika, nie ma zastosowania w kontekście ochrony prywatności danych. Typ password natomiast nie tylko ogranicza wprowadzone dane, ale również ukrywa je przed wglądem, co jest kluczowe dla zapewnienia bezpieczeństwa. Tym samym, zrozumienie różnic w funkcjonalności i zastosowaniu tych różnych typów pól pozwala na lepsze projektowanie bezpiecznych i funkcjonalnych formularzy w aplikacjach webowych. Błędem jest zakładanie, że każde pole input domyślnie zabezpiecza dane, co często prowadzi do niepoprawnych implementacji, które mogą narazić użytkowników na ryzyko wycieku danych.

Pytanie 30

W języku CSS zapis

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

zastosowany na stronie z wieloma paragrafami, z których każdy zawiera kilka linii, spowoduje, że

A. pierwsza linia każdego paragrafu będzie miała mniejszą czcionkę niż pozostałe linie

B. cały tekst paragrafu zostanie powiększony o 150%

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

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

Nieprawidłowe odpowiedzi opierają się na błędnym rozumieniu tego, jak działa selektor 'p::first-line'. Pierwsza odpowiedź sugeruje, że pierwsza linia paragrafu będzie miała mniejszą czcionkę, co to bzdura, bo ten selektor właśnie definiuje styl tylko tej linii, a nie reszty. Z kolei, kiedy mówimy o 'font-size: 150%', to tylko oznacza zwiększenie rozmiaru czcionki, a nie coś innego. W drugiej odpowiedzi jest napisane, że cały tekst będzie większy, co jest błędne, bo '::first-line' odnosi się tylko do tej pierwszej linii. Ostatnia myśl, która dotyczy tylko jednego paragrafu, też mijam się z prawdą, bo stylizacja dotyczy wyłącznie pierwszej linii, a nie wszystkich. Takie nieporozumienia mogą wynikać z niewłaściwego zrozumienia selektorów CSS i ich właściwego użycia. Zawsze warto pamiętać o kontekście i zasadach ich działania przy stylizacji tekstu w CSS.

Pytanie 31

Formatowanie CSS dla akapitu określa styl szarej ramki z następującymi właściwościami:

p {
    padding: 15px;
    border: 2px dotted gray;
}

A. Linia ciągła; grubość 2 px; odległości pomiędzy tekstem a ramką 15 px

B. Linia ciągła; grubość 2 px; odległości poza ramką 15 px

C. Linia kreskowa; grubość 2 px; odległości poza ramką 15 px

D. Linia kropkowa; grubość 2 px; odległości pomiędzy tekstem a ramką 15 px

Analizując błędne odpowiedzi, kluczowe jest zrozumienie, jakie są podstawowe różnice między różnymi stylami ramki oraz ich właściwościami. Niepoprawne odpowiedzi często mylą typ linii ramki z jej grubością i zastosowaniem paddingu. Na przykład, przy styli 'solid' mówimy o linii ciągłej, a nie kropkowej, co jest istotną różnicą w kontekście estetyki i funkcji wizualnej. Grubość 2 px jest poprawna w niektórych odpowiedziach, ale problematyczne są inne elementy, takie jak zrozumienie pojęcia 'marginesu'. Marginesy różnią się od paddingu, ponieważ margines to przestrzeń zewnętrzna oddzielająca elementy od siebie, podczas gdy padding odnosi się do przestrzeni wewnętrznej. Odpowiedzi, które sugerują, że marginesy znajdują się pomiędzy tekstem a ramką, fałszywie interpretują, jak elementy są rozmieszczone na stronie. To prowadzi do mylnych wniosków, ponieważ w rzeczywistości marginesy zewnętrzne nie wpływają na bezpośrednią odległość tekstu od ramki, co może skutkować błędami w projektowaniu i implementacji stron. Zrozumienie tych różnic jest niezbędne dla efektywnego wykorzystania CSS i unikania typowych pułapek w projektach webowych.

Pytanie 32

Narzędzie używane do organizowania i przedstawiania danych z wielu wpisów w celu ich wydruku lub dystrybucji to

A. kwerenda

B. raport

C. makropolecenie

D. formularz

Kwerenda, formularz i makropolecenie to narzędzia, które mają zupełnie inne zadania niż raportowanie. Kwerenda to tak jakby pytanie do bazy danych, które pozwala wyciągać konkretne informacje z całkiem dużej ilości danych. Jej głównym celem jest raczej filtracja niż grupowanie danych, więc niekoniecznie nadaje się do tworzenia raportów. Formularz to interfejs, za pomocą którego możemy wprowadzać lub edytować dane, ale nie pomoże nam w grupowaniu czy ładnej prezentacji w formie raportu. Makropolecenie to natomiast zestaw instrukcji w Excelu, które mogą automatyzować powtarzalne zadania, co jest spoko, ale nie ma tu mowy o tworzeniu raportów. Widać więc, że każde z tych narzędzi ma swoje przeznaczenie i nie może zastąpić efektywnego raportu, który jest kluczowy w analizie danych.

Pytanie 33

Tworzenie struktury logicznej strony internetowej polega na

A. określeniu zawartości witryny

B. stworzonym zestawie grafik dla strony

C. określeniu adresów URL dla podstron serwisu

D. umiejscowieniu elementów w wyznaczonych lokalizacjach witryny

Projektowanie układu strony internetowej to naprawdę ważny krok, który warto dobrze przemyśleć. Chodzi o to, żeby elementy były umieszczone w sensownych miejscach, co z kolei pomaga użytkownikom lepiej się po niej poruszać. Trzeba pamiętać o zasadach UX i UI, bo dzięki nim można stworzyć coś, co będzie intuicyjne i przyjazne. Dobrze jest odpowiednio poukładać tekst, zdjęcia, linki i formularze, żeby wszystko działało sprawnie. Fajnie jest korzystać z siatki do rozmieszczania elementów, bo to pomaga utrzymać ład i równowagę wizualną. Na przykład zasada F-layout świetnie sprawdza się, bo układ przypomina literę „F” i to odpowiada temu, jak ludzie przeglądają treści. Z mojego doświadczenia, ważne jest też, żeby zrozumieć hierarchię wizualną – dzięki temu można lepiej wyróżnić istotne informacje i zaangażować użytkowników.

A. C.

B. A.

C. B.

D. D.

Dokładnie tak powinien wyglądać ten formularz! Zwróć uwagę, jak HTML interpretuje znaczniki – one wymuszają przejście do nowej linii, więc w kodzie wyjściowym każda sekcja obowiązków pojawi się osobno, pod sobą. To, że jeden z checkboxów ma atrybuty disabled oraz checked, powoduje, że jest domyślnie zaznaczony, ale nie można go odznaczyć ani zaznaczyć ponownie – to ważny niuans, bo czasem zapomina się, że disabled nie oznacza tylko „wyszarzony”, ale też „nie bierz udziału w wysyłaniu formularza”. Takie wykorzystanie checkboxów jest powszechne, szczególnie jeśli chcesz pokazać użytkownikowi pewne stałe informacje (np. obowiązek, którego nie można uniknąć). Z mojego doświadczenia, bardzo często w praktycznych projektach „disabled” stosuje się np. przy wymaganych oświadczeniach, gdzie użytkownik ma tylko do wglądu informację, że coś już jest włączone i nie może tego zmienić. No i jeszcze – checked przy pisaniu kodu powoduje, że checkbox jest domyślnie zaznaczony, co jest zgodne z kodem źródłowym. Same nazwy pól (czyli atrybuty name i value) zostaną wysłane do serwera tylko dla tych pól, które nie są disabled i użytkownik je zaznaczył. To też jest bardzo praktyczna rzecz, bo pozwala precyzyjnie sterować tym, co trafia do backendu. Moim zdaniem taka forma zapisu formularza to dobry punkt wyjścia do dalszej rozbudowy – łatwo dodać tutaj walidację, obsługę JavaScript czy zastosować style CSS. Trzymanie się tej składni ułatwia też potem pracę zespołową, bo jest czytelna i zgodna z oczekiwaniami innych programistów. Podsumowując, wybrałeś opcję najbliższą temu, co wyświetli przeglądarka na bazie danego kodu HTML – i to jest podejście zgodne ze standardami, doceniane w branży.

Pytanie 35

W kodzie HTML znajdziemy formularz. Jaki rezultat zostanie pokazany przez przeglądarkę, jeśli użytkownik wprowadził do pierwszego pola wartość "Przykładowy text"?

A. Efekt 1

B. Efekt 4

C. Efekt 3

D. Efekt 2

Niepoprawne odpowiedzi wynikają z błędnego zrozumienia struktury formularza HTML. W przypadku efektu pierwszego widać, że checkboxy zostały zamienione na radiobuttony, co może sugerować, że użytkownik może wybrać tylko jedną z opcji. Jest to niezgodne z kodem, który jasno określa pola jako checkboxy, co pozwala na wielokrotny wybór. Efekt trzeci pokazuje nieprawidłowe pozycjonowanie elementów formularza, które nie odzwierciedla rzeczywistego układu z kodu HTML. Błędne zrozumienie struktury może wynikać z nieznajomości zasady działania poszczególnych elementów formularza, takich jak <textarea> i <input type='checkbox'>. <Textarea> powinno być stosowane do wprowadzania tekstu wielowierszowego, a checkboxy są idealne do prezentacji listy opcji, które mogą być niezależnie zaznaczone. Efekt czwarty przedstawia radiobuttony zamiast checkboxów, co całkowicie zmienia funkcję formularza. Warto w tym kontekście zrozumieć różnicę między radiobuttonami a checkboxami, gdzie pierwsze są używane do wyboru jednej z wielu opcji, a drugie do wielokrotnego wyboru. Kluczowe jest również poprawne stosowanie i testowanie formularzy w celu zapewnienia ich funkcjonalności i intuicyjności dla użytkownika końcowego.

Pytanie 36

Zadanie "drzewo kontekstowe" w edytorze WYSIWYG Adobe Dreamweaver jest przeznaczone do

A. pokazania interaktywnego drzewa struktury HTML dla treści statycznych i dynamicznych

B. formatowania treści za pomocą dostępnych znaczników

C. tworzenia szablonu strony internetowej

D. określenia kaskadowych arkuszy stylów powiązanych z witryną

Definiowanie kaskadowych arkuszy stylów (CSS) i formatowanie tekstu przy użyciu znaczników są ważnymi aspektami tworzenia stron internetowych, jednak nie są one funkcjami drzewka kontekstowego w Adobe Dreamweaver. Arkusze stylów są używane do określenia prezentacji strony, co jest kluczowe w kontekście rozdzielania treści od jej wyglądu, ale nie są one bezpośrednio związane z wizualizacją struktury HTML. Użytkownicy często mylą te koncepcje, sądząc, że narzędzie do edycji struktury jest także odpowiedzialne za stylizację. Ponadto, formatowanie tekstu za pomocą znaczników, takich jak , czy , jest również oddzielnym procesem, który nie ma bezpośredniego związku z analizą struktury dokumentu. Często mylnie zakłada się, że edytor wizualny zajmuje się wszystkimi aspektami tworzenia strony internetowej, co prowadzi do nieporozumień. Tworzenie szablonów stron internetowych to kolejny złożony temat, który jest odrębny od funkcji drzewka kontekstowego. Szablony mają na celu ułatwienie tworzenia spójnych i zorganizowanych stron, ale nie są one funkcją edytora HTML. Użytkownicy powinni zrozumieć, że chociaż wszystkie te elementy są ważne, to ich funkcje są różne, a drzewo kontekstowe skupia się na wizualizacji struktury dokumentu HTML.

Pytanie 37

Użycie standardu ISO-8859-2 ma na celu zapewnienie prawidłowego wyświetlania

A. znaków zarezerwowanych dla języka opisu strony

B. symboli matematycznych

C. polskich znaków, takich jak: ś, ć, ń, ó, ą

D. specjalnych znaków dla języka kodowania strony

Odpowiedzi dotyczące symboli matematycznych, znaków specjalnych dla języka kodów strony oraz znaków zarezerwowanych dla języka opisu strony są niepoprawne w kontekście zastosowania standardu ISO-8859-2. Standard ten nie jest przeznaczony do wyświetlania symboli matematycznych, gdyż istnieją inne kody i standardy, takie jak Unicode, które lepiej radzą sobie z obsługą szerokiego zakresu symboli matematycznych oraz znaków specjalnych. ISO-8859-2 koncentruje się głównie na znakach używanych w językach europejskich, a nie na symbolach, które są specyficzne dla matematyki. Z kolei znaki specjalne dla języka kodów strony, takie jak HTML, wymagają innego podejścia w kodowaniu, na przykład zastosowania encji HTML, które są standardowym sposobem reprezentacji znaków, które mogą być zinterpretowane przez przeglądarki internetowe. Wreszcie, znaki zarezerwowane dla języka opisu strony, takie jak te używane w XML czy HTML, również nie są objęte standardem ISO-8859-2. Każdy z tych tematów wymaga zrozumienia kontekstu, w którym są stosowane, oraz standardów technicznych, które są bardziej odpowiednie do ich obsługi, co podkreśla ograniczenia ISO-8859-2 w obszarze, w którym zostały zaprojektowane.

Pytanie 38

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

A. float:left;

B. style:left;

C. alt:left;

D. align:left;

Właściwość CSS 'float:left;' jest kluczowa dla umieszczania elementów w linii obok siebie. Umożliwia ona 'wypływanie' elementu, jakim jest obrazek, w lewo, co skutkuje tym, że tekst w akapicie będzie go otaczał od prawej strony. Jest to szczególnie przydatne w projektowaniu responsywnych układów stron internetowych, gdzie zachowanie porządku w rozmieszczeniu elementów jest istotne zarówno na desktopach, jak i urządzeniach mobilnych. Przykładowo, jeśli mamy akapit z opisem produktu, który chcemy wizualnie wzbogacić odpowiednim zdjęciem z jego lewej strony, zastosowanie 'float:left;' w stylach CSS sprawi, że tekst będzie płynnie dostosowywał się do rozmiaru obrazka. Zgodnie z dobrymi praktykami, warto również pamiętać o zastosowaniu 'clear:both;' w przypadku elementów, które mają pojawić się poniżej zaganianych elementów, aby uniknąć problemów z układem. Dodatkowo, warto zadbać o odpowiednie wymiary obrazka oraz użycie atrybutu 'alt' w tagu <img>, aby poprawić dostępność strony oraz jej SEO.

Pytanie 39

Aby zdefiniować w języku HTML listę nienumerowaną (wypunktowaną), należy użyć znacznika:

<ol>

<ul>

<dt>

<dd>

Listę nienumerowaną (wypunktowaną) tworzy znacznik <ul> (unordered list), a jej kolejne pozycje umieszcza się w <li>. Domyślnie elementy poprzedzane są punktorami. Dla listy numerowanej używa się <ol>. Dlatego listę wypunktowaną definiuje <ul>.

Pytanie 40

Przedstawiona transformacja obrazu, w edytorze grafiki rastrowej, została wykonana przy pomocy filtru

A. błysk gradientowy.

B. redukcja szumu.

C. rozmycia Gaussa.

D. szum HSV.

Gratulacje, twoja odpowiedź jest prawidłowa. Wybrałeś 'rozmycie Gaussa', które jest odpowiednią odpowiedzią. Na przedstawionym obrazie widzimy, że obraz po prawej stronie jest rozmyty w sposób ciągły i jednolity - to jest charakterystyczne dla rozmycia Gaussa. Filtr rozmycia Gaussa jest powszechnie stosowany w edytorach grafiki rastrowej do uzyskania efektu miękkiego rozmycia, który symuluje efekt obserwacji obiektu przez nieostre medium lub z dużą głębią ostrości. Jest to praktyczne narzędzie, które ma szerokie zastosowanie zarówno w fotografii, jak i w grafice komputerowej. Filtr ten jest często używany do poprawy estetyki obrazów, redukcji szumu i artefaktów, a także w szeroko pojętym przetwarzaniu obrazów, takim jak detekcja krawędzi. Jego nazwa pochodzi od matematyka Karla Gaussa, który opracował koncepcję rozkładu normalnego, na którym opiera się ten filtr.

Rozpocznij nowy egzamin

Powrót do strony głównej