Wyniki egzaminu

Informacje o egzaminie:
  • Zawód: Technik informatyk
  • Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
  • Data rozpoczęcia: 22 czerwca 2026 11:20
  • Data zakończenia: 22 czerwca 2026 11:54

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Nowe
Analiza przebiegu egzaminu- sprawdź jak rozwiązywałeś pytania
Udostępnij swój wynik
Szczegółowe wyniki:
Pytanie 1

Który efekt został zaprezentowany na filmie?

A. Zwiększenie ostrości zdjęcia.
B. Przenikanie zdjęć.
C. Zmiana jasności zdjęć.
D. Zmniejszenie kontrastu zdjęcia.
Poprawnie wskazany efekt to przenikanie zdjęć, często nazywane też płynnym przejściem (ang. crossfade). Polega to na tym, że jedno zdjęcie stopniowo zanika, jednocześnie drugie pojawia się z narastającą widocznością. W praktyce technicznej realizuje się to najczęściej przez zmianę przezroczystości (opacity) dwóch warstw – jedna warstwa z pierwszym obrazem ma zmniejszaną wartość opacity z 1 do 0, a druga z kolejnym zdjęciem zwiększaną z 0 do 1. Na stronach WWW taki efekt robi się zwykle za pomocą CSS (transition, animation, keyframes) albo JavaScriptu, czasem z użyciem bibliotek typu jQuery czy gotowych sliderów. Moim zdaniem to jest jeden z podstawowych efektów, który warto umieć odtworzyć, bo pojawia się w galeriach, sliderach na stronach głównych, prezentacjach produktów czy prostych pokazach slajdów. W materiałach multimedialnych, np. w edycji wideo, dokładnie ten sam efekt nazywa się przejściem typu „cross dissolve” lub „fade”, i zasada działania jest identyczna – płynne nakładanie się dwóch klatek obrazu w czasie. Dobre praktyki mówią, żeby nie przesadzać z czasem trwania przenikania: zwykle 0,5–1,5 sekundy daje przyjemny, profesjonalny wygląd, bez wrażenia „zamulenia” interfejsu. Warto też pilnować spójności – jeśli na stronie używasz przenikania w jednym miejscu, dobrze jest utrzymać podobny styl animacji w innych elementach, żeby całość wyglądała konsekwentnie i nie rozpraszała użytkownika. W kontekście multimediów na WWW przenikanie jest też korzystne wydajnościowo, bo operuje głównie na właściwości opacity i transformacjach, które przeglądarki potrafią optymalizować sprzętowo.

Pytanie 2

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

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

Pytanie 3

W HTML-u, aby umieścić animację FLASH (z rozszerzeniem .swf) na stronie www, powinno się wykorzystać znacznik

A. <img>
B. <audio>
C. <video>
D. <object>
Użycie <audio>, <img> i <video> do wstawiania animacji FLASH jest błędne z kilku powodów. Znacznik <audio> jest tylko do dźwięku, więc nie załatwia sprawy z animacjami. <img> to tylko do wyświetlania statycznych obrazków, a nie czegoś interaktywnego jak animacje FLASH. A <video> też jest tylko dla plików wideo i w ogóle nie obsługuje FLASH. Wiesz, to wszystko często wynika z tego, że nie do końca wiadomo, jak te znaczniki działają. Ważne, żeby wiedzieć, jakie elementy HTML można użyć do różnych treści. No i nie oszukujmy się – technologia FLASH jest coraz mniej na czasie, lepiej iść w kierunku HTML5, bo to jest bezpieczniejsze i działa lepiej z obecnymi przeglądarkami. Użycie starszych technologii, jak FLASH, może przynieść problemy z kompatybilnością i bezpieczeństwem, więc to nie jest najlepszy pomysł w nowoczesnym web developmencie.

Pytanie 4

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

Ilustracja do pytania
A. <p><big>Duży tekst</p> zwykły tekst
B. <p><big>Duży tekst</big> zwykły tekst</p>
C. <p><strike>Duży tekst zwykły tekst</p>
D. <p><strike>Duży tekst</strike> zwykły tekst</p>
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 5

W CSS zastosowano poniższe formatowanie. Kolorem czerwonym będzie wyświetlony

h1 i {
   color: red;
}
A. cały tekst nagłówka pierwszego stopnia oraz tekst italic akapitu
B. jedynie tekst italic we wszystkich poziomach nagłówków
C. tylko tekst italic nagłówka pierwszego stopnia
D. cały tekst nagłówka pierwszego stopnia oraz wszelki tekst italic, niezależnie od lokalizacji na stronie
W stylach CSS selektor złożony h1 i oznacza, że formatowanie będzie stosowane tylko do elementów pochylonych i znajdujących się wewnątrz nagłówka pierwszego poziomu h1. W praktyce oznacza to, że taki zapis CSS zmienia kolor na czerwony tylko dla tekstu wewnątrz tagu <i> znajdującego się w <h1>. Selekcja złożona umożliwia precyzyjne określanie, które elementy są formatowane, co jest kluczowe w przypadku dużych i złożonych stron internetowych. Zrozumienie działania selektorów jest fundamentem efektywnego stylizowania dokumentów HTML. Pozwala to na zachowanie spójności wizualnej oraz lepszą kontrolę nad wyglądem strony. Dobór odpowiednich selektorów w CSS to również jedna z dobrych praktyk, które sprzyjają czytelności kodu oraz jego łatwiejszej konserwacji w przyszłości. Taki zapis pozwala na minimalizację konfliktów stylów, które mogą się pojawić przy bardziej ogólnych selektorach. Praktyczne użycie selektorów złożonych jest więc zalecane w celu uzyskania bardziej kontrolowanego i przewidywalnego wyglądu strony internetowej, co jest zgodne ze standardami webowymi promującymi semantyczne i uporządkowane kodowanie.

Pytanie 6

Jaki minimalny kontrast tekstu (standardowego rozmiaru) do tła wymaga WCAG 2.x na poziomie AA?

A. 1,5 : 1
B. 2,0 : 1
C. 2,5 : 1
D. 4,5 : 1
Pozostałe wartości są zbyt niskie, by spełnić AA dla zwykłego tekstu. Kontrasty 1,5:1, 2,0:1 czy 2,5:1 dają tekst trudny do odczytania na tle. Wymagane minimum WCAG AA dla standardowego tekstu to 4,5:1.

Pytanie 7

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

A. znaczniki <h1>, <h2> oraz <p>
B. znaczniki <frame> i <table>
C. znacznik <div>
D. znacznik <p> z formatowaniem
Hierarchię tekstu na stronie budują znaczniki nagłówków <h1> do <h6>, gdzie <h1> to tytuł najważniejszy, a kolejne poziomy oznaczają sekcje i podsekcje. Przeglądarka, wyszukiwarki i czytniki ekranu odczytują z nich plan dokumentu, dlatego nagłówków używa się zgodnie ze znaczeniem, a nie dla samego wyglądu. Akapity <p> uzupełniają tę strukturę właściwą treścią. Taki układ poprawia czytelność, dostępność i pozycjonowanie strony - i właśnie dlatego poprawna odpowiedź łączy nagłówki z akapitem.

Pytanie 8

W CSS wartości underline, overline, blink są przypisane do atrybutu

A. font-style
B. font-weight
C. text-decoration
D. text-style
Zwracając uwagę na 'text-style', 'font-style' i 'font-weight', można się pogubić, bo to są różne rzeczy. Po pierwsze, 'text-style' w ogóle nie istnieje w CSS, więc jeśli ktoś tego użyje, to nie uzyska zamierzonych efektów. Często ludzie mylą 'font-style' z 'text-decoration', a to są zupełnie różne rzeczy. 'Font-style' odpowiada za styl czcionki, taki jak normalny czy kursywa, a 'text-decoration' dodaje różne efekty dekoracyjne do tekstu. Z kolei 'font-weight' to grubość czcionki, co wpływa na to, jak tekst wygląda, ale nie ma nic wspólnego z podkreślaniem. Jest to typowy błąd, bo niektórzy myślą, że te właściwości można wymieniać bez konsekwencji. Żeby dobrze stylizować tekst, trzeba rozumieć, co każda z tych właściwości robi i jak ich używać. To naprawdę pomaga w tworzeniu ładnych i funkcjonalnych stron internetowych.

Pytanie 9

W CSS, aby ustawić różne stylizacje dla pierwszej litery w akapicie, należy wykorzystać selektor

A. pseudoelementu p::first-letter
B. klasy p.first-letter
C. dziecka p + first-letter
D. atrybutu p [first-letter]
W języku CSS do formatowania pierwszej litery akapitu używamy pseudoelementu '::first-letter'. Jest to specjalny selektor, który pozwala na zastosowanie stylów tylko do pierwszego znaku w danym elemencie, na przykład w akapicie <p>. Pseudoelement ten może być używany do nadawania unikalnych właściwości typograficznych, takich jak rozmiar czcionki, kolor, font-weight czy marginesy, co może znacząco wzbogacić stylizację tekstu. Przykładowo, używając stylu 'p::first-letter { font-size: 2em; color: red; }', pierwsza litera każdego akapitu stanie się większa i czerwona. To podejście jest zgodne z dobrymi praktykami w CSS, ponieważ umożliwia selektywne stylizowanie elementów bez wpływu na resztę treści. Aby uzyskać większą kontrolę nad układem i estetyką stron internetowych, warto zaznajomić się z innymi pseudoelementami, takimi jak '::first-line', które działają analogicznie. Prawidłowe używanie pseudoelementów jest kluczowe dla tworzenia bardziej zaawansowanych i atrakcyjnych wizualnie projektów.

Pytanie 10

Według zasad walidacji HTML5, jakie jest prawidłowe użycie znacznika hr?

A. &lt;/ hr&gt;
B. &lt;/ hr /&gt;
C. &lt;/hr?&gt;
D. &lt;hr&gt;
Wszystkie inne odpowiedzi dotyczące znacznika <hr> są błędne, i to z kilku powodów. Po pierwsze, odpowiedź &lt;/ hr&gt; sugeruje, że <hr> potrzebuje zamknięcia, co nie jest zgodne z zasadami HTML5. Znaczniki samodzielne, jak <hr>, nie mają zamykających wersji, bo to właśnie ich urok. Następnie, &lt;/hr?&gt; ma ten dziwny znak zapytania, co sprawia, że trudno to rozczytać. Tego typu znaki nie mogą być w nazwach znaczników, więc przeglądarki się w tym gubią. I jeszcze inna odpowiedź, &lt;/ hr /&gt;, wraca do starych wersji HTML, gdzie można było takie rzeczy robić, ale teraz to nie ma sensu. Niepoprawne znaczniki mogą sprawić, że strona będzie działać dziwnie, a to nie jest fajne dla użytkowników. Lepiej trzymać się aktualnych zasad, żeby wszystko działało jak należy.

Pytanie 11

W dokumencie HTML utworzono formularz wysyłający dane do skryptu formularz.php. Po naciśnięciu przycisku typu submit, przeglądarka przekierowuje nas do określonego adresu. Na podstawie podanego linku można wywnioskować, że dane do pliku formularz.php przesłano metodą

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

Pytanie 12

W języku HTML, aby uzyskać efekt taki jak na przykładzie, należy zastosować konstrukcję

Duży tekst zwykły tekst

A. <p><big>Duży tekst</p> zwykły tekst
B. <p><strike>Duży tekst zwykły tekst</p>
C. <p><big>Duży tekst</big> zwykły tekst</p>
D. <p><strike>Duży tekst</strike> zwykły tekst</p>
W języku HTML, użycie znacznika <big> jest właściwym sposobem na zwiększenie rozmiaru tekstu, co w efekcie pozwala na wyróżnienie go w kontekście pozostałej treści. Znacznik ten jest jednak przestarzały i niezalecany w nowoczesnych praktykach, ponieważ CSS oferuje bardziej elastyczne i zaawansowane metody stylizacji. Przykładowo, zamiast stosować <big>, można wykorzystać stylizację CSS, aby uzyskać podobny efekt, co zwiększa kontrolę nad wyglądem elementów. Ponadto, zastosowanie znacznika <p> jako kontenera dla tekstu zapewnia semantyczną strukturę dokumentu, co jest zgodne z wytycznymi W3C i poprawia dostępność. Przykładowo, użycie CSS może wyglądać tak: <p style='font-size: 1.5em;'>Duży tekst</p>zwykły tekst, co jest bardziej zalecane dla zachowania zgodności ze standardami. Warto pamiętać, że unikanie przestarzałych znaczników i stosowanie CSS zwiększa elastyczność i estetykę projektów HTML.

Pytanie 13

Jaką operację trzeba wykonać podczas edytowania zdjęcia w programie graficznym, aby zamienić białe tło na przezroczystość?

A. Skadrować obraz
B. Zmienić saturację obrazu
C. Maksymalnie zmniejszyć jasność
D. Dodać kanał alfa
Aby zamienić białe tło na przezroczystość w edytorze grafiki, kluczowym krokiem jest dodanie kanału alfa do obrazu. Kanał alfa jest używany do zarządzania przezroczystością pikseli w obrazie rastrowym, co pozwala na zachowanie tylko tych elementów, które mają być widoczne. Proces ten jest szczególnie istotny przy pracy z grafiką stosowaną w projektach multimedialnych, takich jak strony internetowe, animacje czy prezentacje. Po dodaniu kanału alfa, można użyć narzędzi selekcji, takich jak różdżka czy lasso, aby zaznaczyć obszar białego tła i usunąć go, co skutkuje uzyskaniem przezroczystości. Dobrą praktyką jest również zapisanie pliku w formacie obsługującym przezroczystość, jak PNG, co zapewnia, że efekt końcowy zostanie zachowany, a tło będzie rzeczywiście przezroczyste. Przykład zastosowania można znaleźć w tworzeniu grafik do mediów społecznościowych, gdzie przezroczystość tła pozwala na lepsze dopasowanie elementów do różnych szablonów.

Pytanie 14

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

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

Pytanie 15

Za pomocą którego protokołu można bezpiecznie (z szyfrowaniem) przesłać pliki strony internetowej na serwer WWW?

A. Telnet
B. POP3
C. SFTP
D. IMAP
SFTP (SSH File Transfer Protocol) przesyła pliki w ramach sesji SSH, dlatego cała komunikacja - zarówno dane plików, jak i login oraz hasło - jest szyfrowana. To właśnie czyni go bezpiecznym sposobem na wgranie plików witryny (HTML, CSS, JavaScript, grafik) na serwer WWW: nawet w sieci publicznej nikt postronny nie odczyta przesyłanej zawartości ani danych logowania. SFTP działa na jednym połączeniu (domyślnie port 22) i pozwala nie tylko kopiować pliki, ale też tworzyć katalogi, zmieniać nazwy czy usuwać pliki na serwerze. Dlatego przy publikacji strony, gdy zależy nam na poufności transferu, wybieramy SFTP zamiast klasycznego, nieszyfrowanego FTP.

Pytanie 16

Co oznacza dodanie kanału alfa podczas obróbki grafiki rastrowej?

A. zwiększenie głębi ostrości
B. wprowadzenie warstwy z przezroczystością
C. wyostrzenie krawędzi obrazu
D. ustalenie balansu bieli
Dodanie kanału alfa oznacza wprowadzenie dodatkowej warstwy informacji o PRZEZROCZYSTOŚCI pikseli - dzięki niej fragmenty obrazu mogą być przezroczyste lub półprzezroczyste. Dlatego to wprowadzenie warstwy z przezroczystością.

Pytanie 17

Której właściwości CSS użyć, aby ustawić odstępy między WYRAZAMI?

A.
word-spacing
B.
white-space
C.
letter-space
D.
line-spacing
Odstępy między WYRAZAMI ustawia w CSS właściwość word-spacing, np. word-spacing: 5px; rozsuwa słowa. Dlatego do odstępów między wyrazami służy word-spacing.

Pytanie 18

Domyślna CAPTCHA
CAPTCHA - reCAPTCHA

W CMS Joomla! opcja konfiguracji globalnej, pokazana na ilustracji, służy do
A. zapobiegania atakom typu SQL Injection.
B. wyświetlania okna informującego o zgodzie użytkownika na pliki cookie.
C. wyświetlenia okna umożliwiającego wyszukiwanie tekstu na stronie.
D. dopuszczenia do przesyłania danych z formularzy wypełnionych tylko przez człowieka.
Na ilustracji widoczna jest opcja wyboru domyślnej CAPTCHA w konfiguracji globalnej Joomla!, czyli mechanizmu służącego do ochrony formularzy przed botami. Łatwo tu wpaść w kilka typowych pułapek myślowych i skojarzyć ten element z innymi funkcjami bezpieczeństwa lub interfejsu, które z CAPTCHA nie mają wiele wspólnego.

Częstym błędem jest utożsamianie każdego „zabezpieczenia” w panelu administracyjnym z ochroną przed SQL Injection lub innymi atakami na bazę danych. Ochrona przed SQL Injection polega na poprawnym programowaniu po stronie serwera: stosowaniu przygotowanych zapytań (prepared statements), filtrowaniu i walidacji danych wejściowych, poprawnym użyciu API bazy danych. CAPTCHA w ogóle nie dotyka warstwy SQL – jej zadaniem jest ograniczenie liczby automatycznych zgłoszeń z formularzy, a nie filtrowanie treści pod kątem złośliwych zapytań. To jest inna warstwa zabezpieczeń.

Podobnie mylące bywa skojarzenie z wyszukiwarką na stronie. Okno wyszukiwania to zwykły formularz z polem tekstowym, którego wygląd i działanie zależy od modułu lub komponentu wyszukiwarki, a nie od globalnej opcji „Domyślna CAPTCHA”. Ustawienie CAPTCHA nie dodaje żadnego pola wyszukiwania, nie wpływa też na mechanizm przeszukiwania treści, tylko na to, czy przed wysłaniem formularza pojawi się test antybotowy.

Kolejne skojarzenie to okna związane z RODO i zgodą na pliki cookie. Bannery cookie, pop-upy z informacją o polityce prywatności czy zgody marketingowe są realizowane przez osobne wtyczki lub skrypty JavaScript, często całkowicie niezależne od mechanizmu CAPTCHA. Ich zadaniem jest spełnienie wymogów prawnych, a nie weryfikacja, czy użytkownik jest człowiekiem. CAPTCHA nie służy do obsługi zgód na cookies, nie zarządza ciasteczkami, nie pokazuje komunikatów o prywatności.

Sedno tej opcji w Joomla! polega na wskazaniu, który mechanizm antybotowy ma być standardowo używany w formularzach. Dzięki temu dane z formularzy mogą być przyjmowane tylko wtedy, gdy użytkownik przejdzie test potwierdzający, że nie jest automatem. Jeśli myli się tę funkcję z wyszukiwaniem, banerem cookie czy obroną przed SQL Injection, to w praktyce oznacza niezrozumienie warstwowego podejścia do bezpieczeństwa i użyteczności: CAPTCHA to filtr na poziomie interakcji człowiek–formularz, a nie ogólny „magiczny przełącznik” bezpieczeństwa lub interfejsu.

Pytanie 19

Najłatwiejszym i najmniej czasochłonnym sposobem na przetestowanie funkcjonowania strony internetowej w różnych przeglądarkach oraz ich wersjach jest

A. użycie emulatora przeglądarek internetowych, np. Browser Sandbox
B. zainstalowanie na kilku maszynach różnych przeglądarek i przeprowadzenie testu witryny
C. testowanie strony w programie Internet Explorer, zakładając, że inne przeglądarki będą kompatybilne
D. skorzystanie z narzędzia do walidacji kodu HTML
Wykorzystywanie walidatora języka HTML do testowania witryny w różnych przeglądarkach nie jest wystarczającą metodą. Walidatory są narzędziami, które sprawdzają poprawność kodu HTML pod kątem zgodności ze standardami W3C, ale nie oceniają, jak rzeczywiście strona będzie działać w różnych przeglądarkach. Możliwe jest, że strona przejdzie test walidacji, ale w rzeczywistości może wyświetlać się inaczej w różnych przeglądarkach z powodu różnych silników renderujących. Instalowanie różnych przeglądarek na wielu komputerach również nie jest efektywnym rozwiązaniem, gdyż wymaga znacznych nakładów czasu i zasobów, a także trudności w utrzymaniu aktualizacji i wersji. Testowanie jedynie w programie Internet Explorer, zakładając, że inne przeglądarki będą działać podobnie, jest mylne, gdyż różnice w implementacji standardów HTML, CSS i JavaScript w różnych przeglądarkach mogą prowadzić do nieoczekiwanych błędów. Takie podejście może skutkować poważnymi problemami z użytecznością, a także obniżyć jakość doświadczenia użytkownika. Istnieje zatem ryzyko, że aplikacja webowa nie będzie działać prawidłowo na kluczowych platformach, co w dzisiejszym zróżnicowanym środowisku przeglądarek stanowi istotne zagrożenie dla reputacji i funkcjonalności witryny.

Pytanie 20

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

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

Pytanie 21

Jakiego elementu HTML brakuje, aby walidator HTML zgłosił ostrzeżenie lub błąd?

A. <meta name="author" content="....">
B. co najmniej jednego <h1>
C. <link>
D. <title>
Elementy <link>, <meta name="author" content="...."> oraz przynajmniej jedno <h1> mają swoje specyficzne zastosowania, ale ich brak nie powoduje błędów walidacyjnych w kontekście standardów HTML. Element <link> jest używany do odniesienia się do zewnętrznych zasobów, takich jak style CSS, lecz jego nieobecność nie wpłynie na walidację samego dokumentu HTML. Użytkownicy często mylą tę sytuację, zakładając, że każdy element w sekcji <head> jest obligatoryjny, co nie jest prawdą. Z kolei <meta name="author"> dostarcza informacje o autorze strony, ale nie jest to element wymagany do poprawnej walidacji. W kontekście SEO, jego brak może ograniczyć kontekstualizację strony, ale nie prowadzi do błędów walidacyjnych. Element <h1> jest ważny z punktu widzenia struktury treści, gdyż określa główny nagłówek strony, jednak nie jest bezwzględnie konieczny do walidacji HTML. Często można spotkać błędne przekonanie, że wszystkie te elementy muszą być obecne, co jest mylne. W rzeczywistości HTML pozwala na różne konfiguracje dokumentów, a istotne jest, aby przestrzegać podstawowych zasad dotyczących struktury i semantyki, co nie zawsze oznacza posiadanie każdego elementu w sekcji <head>.

Pytanie 22

W programie do edycji grafiki rastrowej, aby skoncentrować się na wybranej części obrazu, nie wpływając na pozostałe jego fragmenty, można zastosować

A. odwrócenie
B. przycinanie
C. zmianę rozmiaru
D. warstwy
Warstwy w edytorach grafiki rastrowej to fundamentalne narzędzie umożliwiające pracę na poszczególnych elementach obrazu bez wpływu na całość. Dzięki zastosowaniu warstw można oddzielić różne elementy graficzne, co pozwala na edytowanie, przekształcanie i manipulowanie nimi niezależnie. Na przykład, można umieścić tekst na oddzielnej warstwie, a następnie dowolnie zmieniać jego położenie, rozmiar czy kolor, nie wpływając na tło. Dodatkowo, warstwy umożliwiają łatwe tworzenie efektów przezroczystości oraz cieni, co zwiększa możliwości artystyczne i techniczne podczas projektowania. W praktyce, standardy dotyczące pracy z warstwami są powszechnie stosowane w branży, co podkreśla ich znaczenie w profesjonalnych edytorach takich jak Adobe Photoshop czy GIMP. Warto również dodać, że organizacja pracy z warstwami, poprzez odpowiednie ich nazywanie i grupowanie, znacznie ułatwia zarządzanie złożonymi projektami graficznymi.

Pytanie 23

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

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

Pytanie 24

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

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

Pytanie 25

Program FileZilla może być użyty do

A. walidacji strony internetowej
B. zmiany domyślnych ustawień hostingu dla strony internetowej
C. publikacji strony internetowej na serwerze
D. zarządzania bazami danych strony internetowej
Wybór odpowiedzi, która nie odnosi się do publikacji strony internetowej na serwerze, jest typowym błędem związanym z myleniem różnych funkcji i zastosowań technologii internetowych. Walidacja strony internetowej, choć ważna, odnosi się do sprawdzania poprawności kodu HTML oraz zgodności z standardami W3C, co nie ma bezpośredniego związku z przesyłaniem plików na serwer. Użytkownicy często zakładają, że weryfikacja poprawności ich kodu jest wystarczająca do publikacji, co jest nieścisłe, ponieważ nawet poprawny kod nie będzie dostępny online bez przesłania na serwer. Zmiana domyślnych ustawień hostingu również nie ma związku z funkcjonalnością FileZilla, ponieważ takie zmiany zazwyczaj dokonuje się w panelu zarządzania hostingiem, a nie przez klienta FTP. Ponadto zarządzanie bazami danych, które jest inną kluczową częścią rozwoju aplikacji webowych, wymaga użycia narzędzi takich jak PHPMyAdmin czy konsola SQL, a nie narzędzi do przesyłania plików. Zrozumienie tych różnic jest niezbędne dla efektywnego korzystania z technologii webowych i unikania typowych pułapek, które mogą prowadzić do błędnych wniosków oraz problemów w procesie publikacji stron internetowych.

Pytanie 26

W formularzu HTML wykorzystano znacznik <input>. Wyświetlane pole będzie przeznaczone do wprowadzania maksymalnie

Ilustracja do pytania
A. 30 znaków, które są widoczne podczas wpisywania
B. 30 znaków, które nie są widoczne w polu tekstowym
C. 20 znaków, które nie są widoczne w polu tekstowym
D. 20 znaków, które są widoczne podczas wpisywania
Zrozumienie działania atrybutów size i maxlength w znaczniku <input> jest kluczowe dla prawidłowego projektowania formularzy HTML. Atrybut size określa, ile znaków będzie widocznych w polu tekstowym, jednak to nie ogranicza faktycznej liczby znaków, które można wprowadzić. Działa to bardziej jako wskazówka dla użytkownika, jak szerokie może być pole, aby pomieścić określoną liczbę widocznych znaków. Dlatego odpowiedź, że size determinuje maksymalną ilość wprowadzanych znaków, jest błędna. Natomiast atrybut maxlength rzeczywiście ogranicza liczbę znaków, które można wprowadzić. Dzięki temu atrybutowi możemy kontrolować długość danych wejściowych, co jest często wykorzystywane w aplikacjach wymagających wprowadzania haseł lub innych danych tekstowych o określonej długości. W przypadku inputów typu password, wprowadzone znaki są maskowane, co oznacza, że użytkownik nie widzi tego, co wpisuje, a jego odpowiednik wprowadzenia tekstu typu tekstowego nie działa w ten sam sposób. Odpowiedzi zakładające, że dane są widoczne lub że size wpływa na długość wprowadzanych znaków, wynikają z niepełnego zrozumienia działania poszczególnych atrybutów HTML i ich roli w projektowaniu interfejsów użytkownika. Dobre praktyki projektowania formularzy wymagają jasnego rozróżnienia tych dwóch funkcji, co znacznie zwiększa użyteczność i dostępność aplikacji webowych oraz ułatwia użytkownikom korzystanie z formularzy zgodnie z ich przeznaczeniem.

Pytanie 27

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="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.

stanowisko: obowiązki: sporządzanie dokumentacji
pisanie kodu
testy oprogramowania

B.

stanowisko:
obowiązki:
sporządzanie dokumentacji
pisanie kodu
testy oprogramowania

C.

stanowisko:
obowiązki:
sporządzanie dokumentacji
pisanie kodu
testy oprogramowania

D.

stanowisko:
obowiązki:
sporządzanie dokumentacji
pisanie kodu
testy oprogramowania
A. D.
B. A.
C. B.
D. C.
Dokładnie tak powinien wyglądać ten formularz! Zwróć uwagę, jak HTML interpretuje znaczniki <br> – 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 28

Która reguła dotycząca sekcji <head> w HTML jest poprawna?

A. w sekcji <head> zawiera się sekcja <body>
B. w sekcji <head> definiuje się szablon strony znacznikami <div>
C. w sekcji <head> mogą wystąpić znaczniki <meta>, <title>, <link>
D. w sekcji <head> nie można umieszczać kodu CSS, a jedynie odwołanie do pliku CSS
Pozostałe reguły są błędne. W <head> jak najbardziej można umieścić style - wewnętrzny arkusz w <style> - więc nie jest prawdą, że dozwolone jest tylko odwołanie do pliku CSS. Sekcja <body> nie zawiera się w <head> - obie są bezpośrednimi „dziećmi” <html> i nie nakładają się. Szablonu z widocznymi <div> nie buduje się w nagłówku, lecz w <body>, bo <head> nie służy do prezentacji treści. Poprawnie w <head> występują <meta>, <title> i <link>, dlatego ta odpowiedź jest właściwa.

Pytanie 29

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

A. Plik animacja.mp4 powinien mieć rozdzielczość 640x480 pikseli, aby był odtwarzany.
B. Użytkownik nie będzie miał możliwości kontrolowania odtwarzania wideo.
C. Kod może nie działać w przeglądarkach, które nie obsługują HTML5.
D. Lokalizacja pliku jest nieprawidłowa, brak w niej ścieżki bezwzględnej.
Pierwsze stwierdzenie sugeruje, że plik animacja.mp4 musi mieć dokładnie rozdzielczość 640x480 pikseli, co jest nieprawdziwe. Format &lt;video&gt; 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 30

W edytorze grafiki wektorowej stworzono przedstawiony kształt, który powstał z dwóch figur: trójkąta i koła. W celu stworzenia tego kształtu, po narysowaniu figur i odpowiednim ich ustawieniu, należy skorzystać z funkcji

Ilustracja do pytania
A. sumy.
B. wykluczenia.
C. różnicy.
D. rozdzielenia.
Wybór odpowiedzi 'Wykluczenia', 'Różnicy' lub 'Rozdzielenia' jest błędny w tym kontekście. Funkcje te są używane w innych celach w edytorach grafiki wektorowej. 'Różnica' jest używana do odejmowania jednej figury od innej, co nie jest potrzebne do tworzenia kształtu pokazanego na zdjęciu. 'Rozdzielenie' służy do rozdzielania złożonych kształtów na prostsze elementy, co także nie jest potrzebne w tym przypadku. 'Wykluczenia' używa się do tworzenia kształtów z wykluczeniem wspólnych obszarów. Często błędem jest mylenie tych funkcji i niewłaściwe ich stosowanie, co prowadzi do niespodziewanych wyników. Zasada jest taka, że każda z tych funkcji ma swoje specyficzne zastosowanie, i ważne jest zrozumienie tego, zanim zaczniemy pracować z edytorem grafiki wektorowej. W tym przypadku, aby uzyskać pokazany kształt, powinniśmy skorzystać z funkcji 'Sumy'.

Pytanie 31

Głównym zadaniem systemu CMS jest:

A. konwersja języka obiektowego na strukturalny
B. ujednolicenie tematyczne zawartości stron
C. ułatwienie zarządzania treścią strony internetowej
D. przyspieszenie projektowania aplikacji desktopowych
Pozostałe odpowiedzi nie opisują celu CMS. Przyspieszanie projektowania aplikacji desktopowych dotyczy zupełnie innego rodzaju oprogramowania - CMS służy do stron i serwisów WWW. „Ujednolicenie tematyczne” treści nie jest funkcją CMS: system nie narzuca tego, o czym jest strona, a jedynie ułatwia zarządzanie zawartością. Konwersja języka obiektowego na strukturalny to operacja związana z kompilacją/tłumaczeniem kodu, niemająca związku z zarządzaniem treścią. CMS ułatwia zarządzanie treścią witryny, dlatego ta odpowiedź jest poprawna.

Pytanie 32

Która właściwość języka CSS może przyjmować wartości: underline, overline, line-through?

A. text-decoration
B. text-style
C. font-weight
D. font-style
Poprawna odpowiedź to właściwość CSS `text-decoration`. To właśnie ona odpowiada za dodawanie różnych „linii” do tekstu: podkreślenia (`underline`), nadkreślenia (`overline`) oraz przekreślenia (`line-through`). W praktyce zapis wygląda np. tak: `a { text-decoration: underline; }` – klasyczny przykład dla linków, albo `del { text-decoration: line-through; }` dla tekstu usuniętego. W nowszych specyfikacjach CSS (CSS Text Decoration Module Level 3) ta właściwość została trochę rozbita na bardziej szczegółowe, jak `text-decoration-line`, `text-decoration-style`, `text-decoration-color`, ale w codziennym kodowaniu dalej bardzo często używa się skrótu `text-decoration`.
Moim zdaniem warto od razu kojarzyć, że `text-decoration` nie służy do zmiany kroju pisma, pogrubienia czy kursywy, tylko właśnie do „ozdabiania” tekstu dodatkowymi liniami. Dobra praktyka jest taka, żeby świadomie używać tej właściwości przy stylowaniu linków: np. usuwamy podkreślenie `a { text-decoration: none; }`, a potem przy najechaniu myszką dajemy `a:hover { text-decoration: underline; }`. Dzięki temu interfejs jest czytelniejszy, a użytkownik widzi, że element jest klikalny.
Warto też wiedzieć, że `text-decoration` może przyjmować kilka wartości naraz, np. `text-decoration: underline overline;`, co rzadko się używa, ale czasem w jakichś specyficznych projektach UI może się przydać. Z mojego doświadczenia w projektach komercyjnych najczęściej korzysta się z `underline`, `none` i czasem `line-through` np. przy cenach promocyjnych: stara cena przekreślona, nowa obok. To jest taki mały szczegół CSS, ale bardzo często używany w praktyce.

Pytanie 33

Cechą formatu PNG jest:

A. reprezentacja grafiki wektorowej
B. bezstratna kompresja
C. brak obsługi kanału alfa
D. obsługa animacji
PNG to rastrowy format graficzny z kompresją bezstratną - przy zapisie nie traci jakości, więc dobrze nadaje się do grafik, logo i zrzutów ekranu z ostrymi krawędziami. Obsługuje też kanał alfa, czyli przezroczystość. Nie zapisuje natomiast animacji (do tego służy GIF) i nie jest formatem wektorowym. Dlatego cechą PNG jest bezstratna kompresja.

Pytanie 34

Aby grupować sekcje na poziomie bloków, które będą stilizowane za pomocą znaczników, jakiego należy użyć?

A. <div>
B. <param>
C. <span>
D. <p>
Znak <p> jest przeznaczony wyłącznie do definiowania akapitów tekstowych, co czyni go niewłaściwym narzędziem do ogólnego grupowania obszarów. Nie jest to element blokowy, który mógłby pomieścić inne znaczniki w sposób, który umożliwiałby ich efektywne stylizowanie jako całości. Zastosowanie <p> do grupowania elementów np. obrazków i przycisków mogłoby prowadzić do nieoczekiwanych rezultatów w prezentacji treści oraz problemów z dostępnością. Z kolei znacznik <span> jest elementem inline, co oznacza, że nie łamie linii i może być używany do stylizacji mniejszych fragmentów tekstu. Jego zastosowanie do grupowania bloków treści byłoby nieodpowiednie, ponieważ nie potrafi on zarządzać rozkładem elementów na stronie. Ostatnim błędem w wyborze niepoprawnych odpowiedzi jest <param>, który jest znakiem używanym do definiowania parametrów dla obiektów w znaczeniu <object>. Jest on całkowicie nieadekwatny w kontekście grupowania treści, ponieważ nie służy do stylizacji ani strukturalizacji dokumentu HTML. Użycie <param> w tym kontekście jest mylące i nie odzwierciedla rzeczywistych potrzeb związanych z organizacją treści w dokumentach webowych.

Pytanie 35

Tworzenie struktury logicznej strony internetowej polega na

A. określeniu zawartości witryny
B. określeniu adresów URL dla podstron serwisu
C. stworzonym zestawie grafik dla strony
D. umiejscowieniu elementów w wyznaczonych lokalizacjach witryny
Wiesz, wiele osób myli projektowanie witryny z robieniem grafik czy pisaniem treści. Całkiem to zrozumiałe, bo jest sporo różnych rzeczy związanych z tworzeniem stron. Jasne, grafiki są istotne, ale to nie wszystko, na czym się skupiamy, bo sama estetyka nie wystarczy, żeby strona była funkcjonalna. No i ustalanie adresów URL dla podstron też jest ważne, ale bardziej dotyczy struktury strony niż samego układu. Definiowanie treści to jedno, ale najważniejsze jest to, jak je prezentujemy. Często ludzie myślą, że układ i treść to to samo, a w rzeczywistości układ to to, jak treści są ułożone i jakie działania ułatwiają. Żeby dobrze zaprojektować stronę, trzeba spojrzeć na całość i zrozumieć, jakie funkcje ma spełniać, nie tylko skupiać się na pojedynczych grafikach czy tekstach. W moim odczuciu kluczowe jest, żeby myśleć o interakcji użytkownika z witryną - to wymaga umiejętności projektowania i analizy, by stworzyć efektywny interfejs.

Pytanie 36

Który znacznik lub grupa znaczników nie są stosowane do definiowania struktury strony HTML?

A. <section>
B. <header>, <footer>
C. <i>, <b>, <u>
D. <div>
Użycie znaczników <div>, <header>, <footer>, i <section> wskazuje na nieporozumienie dotyczące roli, jaką każdy z tych elementów pełni w strukturze HTML. Znacznik <div> jest uniwersalnym kontenerem, używanym do grupowania innych elementów, co ułatwia stylizację i układ strony. <header> i <footer> są semantycznymi znacznikami, które jasno definiują nagłówki i stopy strony, a ich użycie poprawia dostępność i SEO. Znacznik <section> z kolei służy do dzielenia strony na różne sekcje treści, co jest kluczowe dla strukturalnej organizacji dokumentu. Wprowadzenie zmiany w podejściu do budowy stron internetowych, w oparciu o semantykę, zaczyna być standardem webowym. Konwencje te nie tylko poprawiają czytelność kodu, ale także wpływają na jego interpretację przez różne technologie asystujące, takie jak czytniki ekranu. Zastosowanie znaczników semantycznych ułatwia zrozumienie treści przez przeglądarki i roboty wyszukiwarek, co może mieć kluczowe znaczenie dla widoczności strony w wynikach wyszukiwania. Typowe błędy, takie jak mylenie roli znaczników wizualnych z semantycznymi, prowadzą do nieefektywnego zarządzania treścią oraz wpływają na doświadczenia użytkowników, którzy korzystają z technologii wspomagających. Dlatego tak istotne jest zrozumienie i stosowanie właściwych znaczników w odpowiednich kontekstach.

Pytanie 37

Aby elementy <li> listy menu wyświetlały się w jednej linii (poziomo), której właściwości CSS użyć?

A.
outline
B.
text-align
C.
display
D.
position
Trzeba zmienić typ wyświetlania elementu. outline rysuje obrys, position steruje pozycjonowaniem, a text-align wyrównuje tekst WEWNĄTRZ elementu, a nie układa <li> poziomo. Poziomy układ listy daje display.

Pytanie 38

Przedstawiony serwis internetowy służy do walidacji

Ilustracja do pytania
A. bazy danych SQL.
B. arkuszy stylów.
C. skryptów JavaScript.
D. dokumentów HTML.
Wygląda na to, że wybrałeś niepoprawną odpowiedź. Aby poprawnie odpowiedzieć na to pytanie, musisz zrozumieć funkcję różnych technologii internetowych i jak są one walidowane. Dokumenty HTML, bazy danych SQL i skrypty JavaScript są częściami składowymi stron internetowych, ale walidacja każdego z nich wymaga różnych narzędzi. Na przykład, dokumenty HTML są walidowane za pomocą narzędzi takich jak 'HTML Validation Service', podczas gdy bazy danych SQL i skrypty JavaScript są sprawdzane za pomocą różnych narzędzi do debugowania i testowania. Wybranie jednej z tych opcji sugeruje, że nie zrozumiałeś, do czego służy serwis 'CSS Validation Service'. Ten konkretny serwis jest stworzony do walidacji arkuszy stylów CSS, nie do walidacji dokumentów HTML, baz danych SQL czy skryptów JavaScript. Pamiętaj, że każda technologia webowa ma swoje specificzne narzędzia do walidacji, co umożliwia tworzenie zgodnych, efektywnych i bezbłędnych stron internetowych.

Pytanie 39

W CSS zdefiniowano regułę

input:focus { background-color: LightGreen; }
Kiedy pole edycyjne będzie miało jasnozielone tło?
A. po kliknięciu w nie, gdy jest aktywne do wpisywania tekstu
B. jeśli to pierwsze wystąpienie tego elementu w dokumencie
C. gdy zostanie najechane kursorem (bez kliknięcia)
D. w każdej sytuacji
:focus nie odnosi się do pierwszego wystąpienia elementu ani nie działa „w każdej sytuacji”. Reakcja na samo najechanie kursorem (bez kliknięcia) to :hover, a nie :focus. Jasnozielone tło pojawi się, gdy pole stanie się aktywne do wpisywania tekstu.

Pytanie 40

Który z zapisów znacznika <div> może pojawić się w dokumencie HTML tylko raz, a ponowne jego użycie spowoduje błędy podczas walidacji tego dokumentu?

A. <div class="klasa">
B. <div id="identyfkator">
C. <div class="klasa1 klasa2">
D. <div>
Wybór innego znacznika <div> z atrybutami class lub bez atrybutów, takich jak <div class="klasa">, <div class="klasa1 klasa2"> czy <div>, może sugerować, że ich użycie nie jest ograniczone do pojedynczego wystąpienia w dokumencie. Te odpowiedzi nie uwzględniają kluczowej zasady dotyczącej atrybutu id, który, jak wcześniej wspomniano, musi być unikalny. Atrybut class z kolei nie ma podobnych ograniczeń; można go wielokrotnie przypisywać różnym elementom, co pozwala na grupowanie stylów. To często prowadzi do nieporozumień, w których użytkownicy mylą pojęcie unikalności id z możliwością wielokrotnego użycia class. Również przy użyciu znacznika <div> bez jakichkolwiek atrybutów, programiści mogą nieświadomie tworzyć wiele divów, które nie są jednoznacznie identyfikowalne, co może prowadzić do nieefektywnego kodu oraz problemów z dostępnością. Konsolidowanie wiedzy o tym, jak atrybuty wpływają na zachowanie i strukturyzację dokumentu HTML, jest kluczowe dla tworzenia poprawnych i wydajnych aplikacji webowych. W praktyce, zauważając różnice w zastosowaniu id i class, można lepiej organizować kod i unikać błędów walidacji.