Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 12 maja 2026 10:07
Data zakończenia: 12 maja 2026 10:26

Egzamin zdany!

Wynik: 25/40 punktów (62,5%)

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

Do jakich działań można wykorzystać program FileZilla?

A. publikacji strony internetowej.

B. walidacji strony internetowej.

C. kompilacji skryptu na stronie.

D. debugowania skryptu na stronie.

Wszystkie pozostałe odpowiedzi dotyczą różnych aspektów tworzenia i zarządzania stronami internetowymi, ale nie są związane z funkcjonalnością programu FileZilla. Kompilacja skryptu na stronie jest procesem, w którym kod źródłowy jest przekształcany w format wykonywalny, co jest zazwyczaj zarezerwowane dla języków programowania, takich jak C++ czy Java, a nie dla aplikacji do przesyłania plików. Walidacja strony internetowej odnosi się do procesu sprawdzania, czy kod HTML i CSS spełniają określone standardy, co można zrobić za pomocą narzędzi takich jak W3C Validator. Debugowanie skryptu na stronie z kolei polega na identyfikacji i naprawie błędów w kodzie, co najczęściej wymaga użycia dedykowanych narzędzi do debugowania w przeglądarkach, jak Chrome DevTools, a nie programu do przesyłania plików. Typowym błędem myślowym jest zakładanie, że jedno narzędzie może pełnić wiele ról w procesie tworzenia stron, podczas gdy w rzeczywistości każdy etap wymaga specjalistycznych narzędzi dostosowanych do konkretnych zadań. Zrozumienie, jakie narzędzie jest odpowiednie do danego zadania, jest kluczowe w pracy nad projektami webowymi, co stanowi fundamentalną część profesjonalizmu w branży IT.

Pytanie 2

Język HTML oferuje nagłówki, które służą do tworzenia hierarchii zawartości. Te nagłówki występują wyłącznie w zakresie

A. h1 - h4

B. h1 - h8

C. h1 - h6

D. h1 - h10

Odpowiedź h1 - h6 jest poprawna, ponieważ w języku HTML nagłówki są definiowane w ramach sześciu poziomów, od h1 do h6. Nagłówki te pełnią kluczową rolę w organizacji treści na stronie internetowej, umożliwiając tworzenie hierarchii oraz struktury dokumentu. h1 jest najważniejszym nagłówkiem i powinien być używany do oznaczania głównego tytułu strony, podczas gdy h2, h3, h4, h5 i h6 służą do tworzenia podtytułów i hierarchii treści w miarę potrzeby. Na przykład, nagłówek h2 może być użyty do oznaczenia sekcji podrzędnej w stosunku do h1, a h3 do następnej sekcji podrzędnej. Takie zrozumienie hierarchii nagłówków jest istotne z punktu widzenia SEO, ponieważ wyszukiwarki korzystają z tych struktur do indeksowania treści. Dobrze zorganizowane nagłówki poprawiają również dostępność strony, co jest zgodne z najlepszymi praktykami webowymi, a także ułatwiają nawigację użytkownikom, zarówno ludziom, jak i robotom wyszukiwarek.

Pytanie 3

Które z poniższych formatowań nie jest zapisane w języku CSS?

A. Fragment pliku strona.html: <style> body {background-color: yellow;} </style>

B. Fragment pliku strona.html: <body style="background-color:yellow;">

C. Fragment pliku formatowanie.css: body {background-color: yellow;}

D. Fragment pliku strona.html: <body bgcolor="yellow">

Fragmenty <style> body {background-color: yellow;} oraz body {background-color: yellow;} są poprawnie wyrażone w języku CSS. Stylizowanie za pomocą CSS jest uznawane za najlepszą praktykę w tworzeniu stron internetowych, a zastosowanie tagu <style> pozwala na definiowanie stylów bezpośrednio w dokumencie HTML. To podejście jest szczególnie użyteczne w przypadku mniejszych projektów lub prototypów. Z drugiej strony, zewnętrzny plik CSS, jak wskazano w drugim przykładzie, to jeszcze lepsze rozwiązanie w przypadku większych aplikacji, pozwalające na dzielenie kodu i lepszą organizację stylów. Kolejny fragment <body style="background-color:yellow;"> również korzysta z CSS, jednak w formie stylu inline, co może prowadzić do trudności w zarządzaniu dużymi projektami, gdyż wprowadza powtarzalność stylów i zmniejsza możliwości ponownego użycia kodu. Łatwo zauważyć, że wszystkie trzy niepoprawne odpowiedzi korzystają z CSS, co jest zgodne z aktualnymi standardami tworzenia stron internetowych. Użycie CSS zapewnia nie tylko stylizację, ale także ułatwia implementację responsywności i dostępności, co jest kluczowe w dzisiejszych czasach, gdy różnorodność urządzeń jest tak duża.

Pytanie 4

Który z poniższych języków jest używany do stylizacji stron WWW?

A. HTML

B. SQL

C. CSS

D. Python

CSS, czyli Cascading Style Sheets, to język używany do opisywania wyglądu dokumentu HTML. Dzięki niemu możemy określić, jak mają wyglądać elementy na stronie, takie jak kolory, czcionki, odstępy między elementami, a także układ całej strony. CSS jest nieodłącznym elementem nowoczesnego tworzenia stron internetowych, ponieważ pozwala na oddzielenie treści od formy, co jest jedną z zasad dobrych praktyk w web development. Umożliwia tworzenie responsywnych projektów, które dobrze wyglądają na różnych urządzeniach, od komputerów po smartfony. Stylowanie za pomocą CSS pozwala na zdefiniowanie stylów globalnych, które mogą być zastosowane do wielu elementów na stronie, co znacznie ułatwia zarządzanie wyglądem witryny. Praktycznym zastosowaniem CSS jest na przykład zmiana koloru tekstu na stronie za pomocą prostej reguły, czy też tworzenie zaawansowanych animacji, które zwiększają interaktywność stron. CSS jest kluczowy w procesie tworzenia estetycznych i funkcjonalnych stron internetowych, co czyni go niezbędnym narzędziem dla każdego web developera.

Pytanie 5

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

A. <img>

B. <span>

C. <title>

D. <section>

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

Pytanie 6

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

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

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

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

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

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

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

Pytanie 7

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

A. <aside>

B. <em>

C. <input>

D. <mark>

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

Pytanie 8

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

Stosowanie float tylko dla bloku 5 i clear dla bloku 2 nie jest właściwe, ponieważ float jest używane do umieszczania elementów obok siebie, a clear do zapobiegania takiemu zachowaniu. W przypadku float dla bloków 3 i 4 oraz clear dla bloku 5, blok 2 nie miałby żadnej właściwości float, co oznacza, że nie mógłby być poprawnie umieszczony obok bloków 3 i 4, a to prowadziłoby do nieprawidłowego ułożenia bloku 5. Użycie float tylko dla bloku 2 i clear dla bloków 3 i 4 byłoby błędne, ponieważ clear zapobiega przyleganiu elementów do boku, co jest niezgodne z celem floatowania bloków 2, 3 i 4 w jednej linii. Typowym błędem myślowym jest traktowanie clear jako narzędzia do rozmieszczania bloków w poziomie, co jest funkcją float. Zamiast tego, clear blokuje wpływ elementów pływających, co może być użyteczne w końcowych elementach układu jak blok 5, ale nie w środku. Dobre zrozumienie działania float i clear jest kluczowe dla efektywnego tworzenia layoutów stron internetowych, gdzie precyzyjne kontrolowanie pozycji bloków jest istotne dla estetyki i funkcjonalności projektu.

Pytanie 9

Fragment dokumentu HTML sugeruje, że

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

A. kod HTML zapisano w wersji 4 języka.

B. kod HTML zapisano w wersji 5 języka.

C. wszystkie znaczniki w kodzie HTML powinny być zapisywane wielkimi literami.

D. znaczniki końcowe są wymagane w kodzie HTML, także dla znaczników samozamykających się.

Kluczowe nieporozumienie dotyczące wersji HTML wynika z interpretacji deklaracji DOCTYPE która w tym przypadku jednoznacznie wskazuje na HTML 4.01. Częstym błędem jest mylenie z nowszą wersją HTML5 która nie wymaga tak szczegółowej deklaracji DOCTYPE i jest bardziej elastyczna umożliwiając użycie zarówno znaczników semantycznych jak i przestarzałych w razie potrzeby. W przeciwieństwie do HTML 4.01 HTML5 wprowadził uproszczoną deklarację <!DOCTYPE html> która nie odnosi się do żadnego zewnętrznego DTD. Błędne jest stwierdzenie że wszystkie znaczniki HTML muszą być zapisane wielkimi literami. W HTML 4.01 oraz we wszystkich nowoczesnych wersjach języka HTML zaleca się stosowanie małych liter dla znaczników co wpływa na czytelność i zgodność z XHTML. Kolejnym nieporozumieniem jest kwestia użycia znaczników zamykających. W HTML 4.01 dla niektórych znaczników można stosować uproszczenia jednak nie jest to bezwzględny wymóg dla znaczników samozamykających jak w przypadku XHTML gdzie takie wymogi są ściśle przestrzegane. Warto również zauważyć że HTML5 wprowadza jeszcze bardziej elastyczne podejście umożliwiając zarówno stosowanie znaczników zamykających jak i ich pomijanie w pewnych kontekstach co byłoby sprzeczne z zasadami HTML 4.01 Strict. Dlatego dla dokładnego zrozumienia wymagań każdej wersji HTML konieczne jest szczegółowe zapoznanie się z jej specyfikacją i zaleceniami W3C które wytyczają najlepsze praktyki w projektowaniu nowoczesnych stron WWW. Poprawne zrozumienie tematu wymaga uwzględnienia przejściowych różnic pomiędzy poszczególnymi wersjami HTML oraz ich wpływu na rozwój i kompatybilność aplikacji webowych w długofalowej perspektywie

Pytanie 10

Który z linków ma prawidłową budowę?

A. <a href='mailto:adres'> tekst </a>

B. <a href='http://adres'> tekst </a>

C. <a href="mailto:adres"> tekst </a>

D. <a href="http://adres"> tekst <a>

Odpowiedzi, które nie spełniają standardów HTML, prowadzą do niepoprawnych wyników. Na przykład, użycie pojedynczych cudzysłowów w atrybucie href, jak w konstrukcji <a href='mailto:adres'> tekst </a>, choć działa w wielu przeglądarkach, nie jest zgodne z zaleceniami HTML5, które preferują podwójne cudzysłowy. Ten błąd może prowadzić do problemów z interpretacją przez parsery HTML, a w ekstremalnych przypadkach może uniemożliwić poprawne wyświetlanie odsyłaczy. Dodatkowo, ostatnia odpowiedź <a href="http://adres"> tekst <a> jest błędna, ponieważ nie zamyka znacznika <a>, co skutkuje usunięciem semantycznego znaczenia linku i może prowadzić do problemów z dostępnością oraz indeksowaniem przez wyszukiwarki. Tego typu błędy są często wynikiem niedbałości lub braku zrozumienia podstaw HTML. Poprawna konstrukcja odsyłaczy jest kluczowa w budowaniu dostępnych stron internetowych, które są łatwe do nawigacji i interpretacji przez różne urządzenia i technologie asystujące. Przykłady błędów w HTML mogą również prowadzić do frustracji użytkowników, którzy mogą mieć problemy z interakcją z witryną, co w efekcie wpływa na ich postrzeganie jakości i profesjonalizmu danej strony.

Pytanie 11

Jakiego elementu HTML należy użyć, aby uzyskać tekst z czcionką o stałej szerokości znaku, w którym uwzględnione są dodatkowe spacje, tabulacje oraz znaki końca linii?

A. <code> ... </code>

B. <pre> ... </pre>

C. <ins> ... </ins>

D. <blockquote> ... </blockquote>

Znacznik <pre> w HTML jest używany do wyświetlania tekstu w formacie preformatowanym. Oznacza to, że w tym przypadku przeglądarka internetowa zachowuje wszystkie wprowadzone spacje, tabulacje i znaki końca linii, co jest kluczowe dla prezentacji kodu źródłowego lub tekstu, który wymaga zachowania dokładnej struktury. Element <pre> wyświetla tekst czcionką o stałej szerokości, co ułatwia czytelność, zwłaszcza w kontekście programowania. Na przykład, jeśli chcemy pokazać fragment kodu w HTML, możemy użyć znacznika <pre>, aby zachować wcięcia i dokładną formę kodu. Przykładowy kod HTML może wyglądać tak: <pre>function helloWorld() { console.log('Hello, World!'); }</pre>. Zgodnie z wytycznymi W3C, element <pre> powinien być używany z umiarem, ponieważ może prowadzić do problemów z dostępnością, jeśli jest stosowany w kontekście, w którym nie jest potrzebny. Należy również zwrócić uwagę, że tekst w <pre> nie jest automatycznie dostosowywany do szerokości kontenera, co może być istotne w projektowaniu responsywnym.

Pytanie 12

Które z pól edycyjnych zostało przedstawione w opisanym stylu, zakładając, że pozostałe atrybuty pola mają wartości domyślne, a użytkownik wpisał imię Krzysztof w przeglądarce?

A. Pole 3

B. Pole 4

C. Pole 2

D. Pole 1

Dobrze, że dopasowałeś Pole 2 do stylu z kodu CSS. Widać, że dobrze ogarniasz te rzeczy! Ten padding 10px, co dałeś, naprawdę robi różnicę. Dzięki temu tekst ma więcej przestrzeni wokół siebie. A kolor tła Teal? Super wybór, bo to taki fajny pośredni odcień między niebieskim a zielonym. Biały tekst na tym tle jest świetnie widoczny, co jest mega ważne. No i brak obramowania, czyli border none, dodaje nowoczesności! Zaokrąglenie krawędzi, które ustawiłeś na 7px, sprawia, że pole wygląda przyjemniej. Takie rzeczy są często stosowane, by przygotować interfejsy, które są estetyczne i funkcjonalne. Jak projektujesz, pamiętaj o kontrastach, bo to naprawdę podnosi jakość aplikacji. Troska o estetykę i użyteczność to kluczowa sprawa. Dobra robota!

Pytanie 13

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. tr { background-color: Pink; }

B. tr:active { background-color: Pink; }

C. tr:hover { background-color: Pink; }

D. td, th { background-color: Pink; }

Poprawny selektor to tr:hover { background-color: Pink; }, bo dokładnie opisuje sytuację pokazaną na filmie: efekt pojawia się dopiero po najechaniu kursorem na cały wiersz tabeli. Pseudo-klasa :hover w CSS służy właśnie do definiowania stylów w momencie, gdy użytkownik „najeżdża” myszką na dany element. Jeśli więc chcemy, żeby podświetlał się cały rząd tabeli, logiczne i zgodne z dobrymi praktykami jest przypięcie efektu do znacznika tr, a nie do pojedynczych komórek. W praktyce taki zapis stosuje się bardzo często w interfejsach webowych: w panelach administracyjnych, listach zamówień, tabelach z uczniami, produktami, logami systemowymi itd. Dzięki temu użytkownik łatwiej śledzi, który wiersz właśnie ogląda. To niby detal, ale z punktu widzenia UX robi sporą różnicę. Z mojego doświadczenia to jeden z tych prostych trików CSS, które od razu poprawiają „odczuwalną” jakość strony. Ważne jest też to, że :hover jest częścią standardu CSS (opisane m.in. w specyfikacji CSS Selectors Level 3/4) i działa w praktycznie wszystkich współczesnych przeglądarkach. Nie trzeba do tego żadnego JavaScriptu, żadnych skomplikowanych skryptów – czysty CSS. Dobrą praktyką jest również używanie bardziej stonowanych kolorów niż Pink w prawdziwych projektach, np. #f5f5f5 albo lekki odcień niebieskiego, tak żeby kontrast był czytelny i nie męczył wzroku. Warto też pamiętać, że podobny mechanizm możesz zastosować na innych elementach: np. a:hover dla linków, button:hover dla przycisków czy nawet div:hover dla całych kafelków w layoutach. Kluczowe jest to, żeby pseudo-klasa :hover była przypięta dokładnie do tego elementu, który ma reagować na interakcję użytkownika.

Pytanie 14

Elementarna animacja może być zapisana w formacie

A. PSD

B. GIF

C. BMP

D. TIFF

Format GIF (Graphics Interchange Format) jest powszechnie stosowany do tworzenia prostych animacji ze względu na swoją zdolność do kompresji obrazów i obsługi przez większość przeglądarek internetowych. GIF pozwala na zapisanie sekwencji obrazów w jednej pliku, co umożliwia ich wyświetlanie jako animacji. Standard GIF obsługuje maksymalnie 256 kolorów z palety, co czyni go idealnym do prostych grafik, takich jak ikony czy animacje internetowe. Dzięki metodzie kompresji Lempel-Ziv-Welch (LZW) możliwe jest zmniejszenie rozmiaru pliku bez utraty jakości, co jest kluczowe w kontekście transferu danych przez sieć. Przykłady zastosowania formatu GIF obejmują animowane banery reklamowe, emotikony oraz krótkie klipy wideo w formie GIF, które stały się popularne na platformach społecznościowych. Ponadto GIF wspiera przezroczystość i animacje w cyklu, co podnosi jego użyteczność w wielu aplikacjach multimedialnych. Z tego powodu GIF jest formatem, który oferuje zarówno funkcjonalność, jak i kompatybilność, co czyni go najlepszym wyborem dla prostych animacji.

Pytanie 15

Zaprezentowano tabelę stworzoną za pomocą kodu HTML, bez zastosowania stylów CSS. Który z poniższych fragmentów kodu HTML odnosi się do pierwszego wiersza tabeli?

A. A

B. D

C. B

D. C

W przypadku odpowiedzi A zastosowano znaczniki <td> co jest błędną praktyką dla nagłówków tabeli. Znaczniki <td> służą do definiowania zwykłych komórek danych a nie komórek nagłówkowych. Użycie <td> w nagłówkach pozbawia tabelę odpowiednich walorów semantycznych co utrudnia jej późniejsze stylizowanie oraz dostępność. W odpowiedzi B użyto znacznika <i> jako części nagłówków co jest nieoptymalne ponieważ znacznik ten semantycznie oznacza zmianę tonu lub stylu i nie jest przeznaczony do formatowania komórek tabeli. Oznacza to że formatowanie takie może być odebrane jako nieodpowiednie przez czytniki ekranowe co dodatkowo wpływa na dostępność. Natomiast w odpowiedzi C zastosowano znacznik <center> wewnątrz <td> co jest przestarzałą techniką HTML oraz nie jest zalecane we współczesnym tworzeniu stron internetowych. Znacznik <center> został zdeprecjonowany w HTML 4.01 i nie powinien być używany ponieważ jego funkcjonalność można osiągnąć za pomocą CSS. Wszystkie te podejścia pomijają aspekty semantycznego tworzenia stron internetowych co jest kluczowe dla utrzymania prawidłowej struktury dokumentu oraz dostępności dla użytkowników z różnymi potrzebami.

Pytanie 16

Aby umieścić plik wideo na stronie internetowej z widocznymi przyciskami sterującymi oraz zapętlonym odtwarzaniem, należy w znaczniku <video> użyć atrybutów

A. controls i loop

B. loop i muted

C. controls i autoplay

D. autoplay i preload

Odpowiedź "controls i loop" jest całkiem dobra, bo te dwa atrybuty są naprawdę istotne, żeby wideo działało jak należy na stronie. Atrybut "controls" dodaje do odtwarzacza przyciski, które pozwalają na zatrzymywanie, odtwarzanie i regulowanie głośności, co jest bardzo wygodne dla ludzi. Z kolei "loop" sprawia, że filmik odtwarza się w kółko, co może być super użyteczne, szczególnie w prezentacjach albo reklamach, które chcemy pokazać kilka razy. Przykładowo, <video src='video.mp4' controls loop> wstawia wideo z przyciskami, które można łatwo obsługiwać, no i od razu się zapętla. W ogóle, korzystanie z tych atrybutów to dobra praktyka, bo sprawia, że strony są bardziej przyjazne dla użytkowników oraz poprawia ich doświadczenia.

Pytanie 17

W języku CSS określono formatowanie znacznika h1 według poniższego wzoru. Zakładając, że do znacznika h1 nie dodano żadnego innego formatowania, wskaż sposób formatowania tego znacznika.

h1 {
    font-style: oblique;
    font-variant: small-caps;
    text-align: right;
}

A. B.

B. D.

C. A.

D. C.

Niestety, Twoja odpowiedź nie jest prawidłowa. Wszystkie odpowiedzi innych niż 'C' nie spełniają kryteriów określonych dla formatowania znacznika h1 w CSS. Formatowanie styli CSS polega na zrozumieniu i zastosowaniu właściwości CSS. W tym przypadku, h1 powinien mieć pochyłą czcionkę ('font-style: oblique'), małe wielkie litery ('font-variant: small-caps') i być wyrównany do prawej ('text-align: right'). Gdybyśmy zastosowali inne właściwości, efekt końcowy niewątpliwie byłby inny. Częstym błędem jest nieuwzględnienie wszystkich właściwości podanych w definicji stylu, co prowadzi do nieprawidłowego renderowania elementu. Inny błąd to mylenie właściwości - na przykład, 'font-style: oblique' nie jest tym samym co 'font-style: italic', chociaż oba skutkują pochyleniem czcionki. Pamiętaj, że precyzyjne zrozumienie i zastosowanie właściwości CSS jest kluczem do tworzenia efektywnych i estetycznych stron internetowych.

Pytanie 18

Aby film wyglądał płynnie, liczba klatek (które nie nakładają się na siebie) na sekundę powinna wynosić przynajmniej w przedziale

A. 20-23 fps

B. 24-30 fps

C. 31-36 fps

D. 16-19 fps

Odpowiedź 24-30 fps jest poprawna, ponieważ standardowy zakres klatek na sekundę dla filmów wynosi właśnie 24-30 fps. W praktyce, 24 fps jest uznawane za minimum dla filmów kinowych, co pozwala uzyskać wrażenie ruchu, które ludzie uznają za płynne. Przykładowo, filmy kręcone w tej klatkażu, takie jak klasyczne produkcje Hollywood, często korzystają z techniki zwanej 'motion blur', która dodatkowo poprawia wrażenie płynności. W przypadku telewizji, większa liczba klatek może być stosowana, co pozwala na lepszą jakość obrazu podczas szybkich ruchów, jednak 30 fps to standard dla wielu programów telewizyjnych. Ważne jest również zrozumienie, że zbyt niska liczba klatek, jak na przykład 16-19 fps, może prowadzić do efektu stroboskopowego, co jest nieprzyjemne dla widza. Normy branżowe, takie jak SMPTE (Society of Motion Picture and Television Engineers), potwierdzają, że liczba klatek między 24 a 30 fps jest odpowiednia do uzyskania zamierzonego efektu wizualnego w filmie.

Pytanie 19

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

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

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

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

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

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

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

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

Pytanie 20

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

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

B. znaku skreślenia

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

D. znaku wielokropkowego

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

Pytanie 21

W skrypcie JavaScript użyto metody DOM getElementsByClassName('akapit'). Ta metoda odniesie się do akapitu

A. <p id="akapit">akapit2</p>

B. <p href="/akapit">akapit3</p>

C. <p>akapit</p>

D. <p class="akapit">akapit4</p>

Metoda DOM getElementsByClassName jest jedną z najważniejszych funkcji w JavaScript, która pozwala na selekcję elementów na stronie internetowej na podstawie ich klas CSS. W tym przypadku, odpowiedź <p class="akapit">akapit4</p> jest poprawna, ponieważ element ten ma przypisaną klasę "akapit", co czyni go bezpośrednim kandydatem do selekcji przez metodę getElementsByClassName('akapit'). Metoda ta zwraca kolekcję elementów (HTMLCollection), które mają podaną klasę, a następnie można z nimi pracować w kodzie JavaScript. Na przykład, możemy zmieniać ich style, zawartość lub dodawać zdarzenia. Dobrą praktyką jest stosowanie klas do stylizacji oraz manipulacji DOM, co pozwala na lepszą organizację kodu i zwiększa jego czytelność. Pamiętaj, że klasy są bardziej uniwersalne i elastyczne niż identyfikatory (ID), które powinny być unikalne na stronie. W przypadku konieczności stosowania metod do manipulacji elementami DOM, warto znać również inne metody, takie jak querySelector i querySelectorAll, które oferują bardziej zaawansowane opcje selekcji, umożliwiające wykorzystanie kombinacji klas, identyfikatorów i innych atrybutów.

Pytanie 22

Kolor zaprezentowany na ilustracji, zapisany w modelu RGB, w formacie szesnastkowym będzie określony w następujący sposób

A. 77A0C1

B. 76A3C1

C. 77A1C1

D. 71A0B2

Kolor w modelu RGB zapisany jako 119 160 193 odpowiada wartości szesnastkowej 77A0C1. W systemie RGB każda z trzech składowych kolorów czerwonego zielonego i niebieskiego jest reprezentowana przez wartość od 0 do 255. Przy konwersji do systemu szesnastkowego używamy par znaków dla każdej z wartości. Dla wartości 119 uzyskujemy 77 dla 160 otrzymujemy A0 a dla 193 wynik to C1. Sumując te wartości uzyskujemy kod 77A0C1 który jest szeroko stosowany w projektach graficznych i webowych. W praktyce znajomość zapisu szesnastkowego jest niezbędna w branży IT zwłaszcza w web designie oraz przy tworzeniu interfejsów użytkownika. Standardem jest wykorzystywanie tego zapisu w stylach CSS gdzie precyzyjne określenie koloru ma kluczowe znaczenie dla estetyki i funkcjonalności projektu. Prawidłowy dobór i zapis kolorów wpływa na UX i branding dlatego znajomość sposobów konwersji i czytania kolorów w różnych systemach jest kluczowa dla profesjonalistów w tej dziedzinie.

Pytanie 23

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

A. <input name="password" />

B. <input type="password" />

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

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

W przypadku odpowiedzi <input name="password" /> brakuje kluczowego atrybutu 'type', co uniemożliwia prawidłowe zdefiniowanie pola do wprowadzania hasła. Standard HTML wymaga, aby każdy input miał określony typ, aby przeglądarka wiedziała, jak ma obsługiwać dane wejściowe. Użycie tylko 'name' bez 'type' sprawia, że przeglądarka interpretuje to pole jako standardowe pole tekstowe, co nie maskuje wprowadzanych danych i naraża hasło na nieautoryzowany dostęp. W przypadku zastosowania <form="password" type="password" /> oraz <form input type="password" /> zawężamy logikę do niewłaściwego użycia znaczników formularzy. 'form' jest elementem kontenerowym dla grupy inputów, a jego atrybuty powinny odnosić się do dodatkowych informacji, ale nie pozwalają na umieszczenie inputa wewnątrz samego formularza w taki sposób. Te błędne konstrukcje mogą prowadzić do nieczytelności kodu i problemów z interpretacją przez przeglądarki, co jest szczególnie niekorzystne w kontekście dostępności i użyteczności. Warto przy projektowaniu formularzy przestrzegać standardów HTML oraz praktyk takich jak semantyczne użycie elementów, aby poprawić zarówno SEO, jak i UX.

Pytanie 24

Jak można dodać zewnętrzny arkusz stylów do dokumentu HTML?

A. <link>

B. <css>

C. <style>

D. <meta>

Dołączenie zewnętrznego arkusza stylów do kodu HTML realizowane jest przy użyciu znacznika <link>, który znajduje się w sekcji <head> dokumentu HTML. Ten znacznik umożliwia przeglądarkom internetowym odnalezienie i załadowanie zewnętrznego pliku CSS, co pozwala na zastosowanie stylów do elementów HTML. Przy użyciu atrybutu 'href' wskazujemy lokalizację arkusza stylów, natomiast atrybut 'rel' definiuje relację między dokumentem HTML a plikiem stylów, zazwyczaj ustawiając go na 'stylesheet'. Przykładowa struktura to: <link rel='stylesheet' href='styles.css'>. Taki sposób organizacji stylów pozwala na lepsze zarządzanie kodem, umożliwia wielokrotne wykorzystanie tych samych stylów w różnych dokumentach oraz przyspiesza ładowanie strony poprzez caching. Użycie zewnętrznych arkuszy stylów jest zgodne z najlepszymi praktykami programowania front-endowego, co wpływa pozytywnie na wydajność oraz SEO, umożliwiając lepszą indeksację przez wyszukiwarki. Dodatkowo, umożliwia to łatwiejsze wprowadzanie zmian w stylach bez potrzeby edytowania każdego pliku HTML z osobna.

Pytanie 25

W języku HTML, aby połączyć w pionie dwie sąsiadujące komórki w kolumnie tabeli, należy użyć atrybutu

A. cellpadding

B. colspan

C. cellspacing

D. rowspan

W kontekście scalania komórek w pionie w HTML, inne proponowane atrybuty są nieodpowiednie. Atrybut colspan służy do scalania komórek w poziomie, co oznacza, że pozwala na połączenie kilku komórek w jednym wierszu, co jest zupełnie inną operacją niż scalanie w pionie. Używanie colspan byłoby nieodpowiednie w sytuacji, gdy celem jest połączenie komórek w kolumnie. Atrybut cellpadding dotyczy natomiast przestrzeni wewnętrznej, określającej odstęp pomiędzy zawartością komórki a jej krawędziami. Jego zastosowanie nie wpływa na scalanie komórek, a jedynie na ich wygląd, co sprawia, że jest to zupełnie inny aspekt formatowania tabeli. Podobnie atrybut cellspacing, który jest używany do definiowania odstępów między komórkami tabeli, również nie ma zastosowania w procesie scalania komórek. Obydwa te atrybuty mogą być użyte do poprawy estetyki tabeli, ale nie wpływają na strukturę danych w sposób, który byłby wymagany do osiągnięcia pionowego scalania komórek. Użycie ich zamiast rowspan jest błędne i prowadzi do niepoprawnego zrozumienia struktury HTML oraz sposobu, w jaki tabele powinny być zbudowane.

Pytanie 26

W języku CSS stworzono określony styl. Sekcja sformatowana tym stylem będzie miała obramowanie o szerokości

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

A. 2 px oraz marginesy zewnętrzne tego obramowania

B. 20 px oraz marginesy zewnętrzne tego obramowania

C. 2 px oraz marginesy wewnętrzne tego obramowania

D. 20 px oraz marginesy wewnętrzne tego obramowania

Wybór odpowiedzi która nie uwzględnia prawidłowego połączenia właściwości border i margin prowadzi do błędnych założeń Odpowiedzi które sugerują że marginesy znajdują się wewnątrz obramowania są mylące ponieważ w CSS właściwość padding odpowiada za marginesy wewnętrzne natomiast margin dotyczy przestrzeni na zewnątrz obramowania Częstym błędem jest mylenie tych dwóch pojęć co prowadzi do niepoprawnego stylizowania elementów na stronie internetowej W przypadku definicji CSS przedstawionej na obrazku właściwość margin jest ustawiona na 20px co oznacza że do każdego z boków elementu dodawane jest 20 pikseli przestrzeni na zewnątrz jego obramowania Obramowanie samo w sobie ma 2 piksele grubości co precyzyjnie określa border 2px Próby rozumienia tej definicji w kategoriach wewnętrznych marginesów są błędne i wynikają z niepoprawnego zrozumienia struktury boksu w CSS Poprawne zrozumienie różnic między margin i padding jest kluczowe dla prawidłowego stosowania stylów CSS w praktyce projektowania stron internetowych oraz dla uzyskania estetycznych i funkcjonalnych układów które poprawiają doświadczenie użytkownika poprzez właściwe zarządzanie przestrzenią i separacją elementów

Pytanie 27

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

A. Rys. D

B. Rys. C

C. Rys. B

D. Rys. A

Rysunek A jest niepoprawny ponieważ zawiera osobne komórki dla każdego numeru telefonu co prowadzi do nieprawidłowego renderowania tabeli w kontekście prezentowanego układu Rysunek C również nie spełnia wymagań gdyż używa atrybutu colspan="2" w ostatnim wierszu co jest błędne z perspektywy przedstawionego układu ponieważ próbuje połączyć komórki w poziomie zamiast w pionie Rysunek D stosuje colspan w wierszach gdzie numer telefonu powinien być wyświetlany oddzielnie co prowadzi do problemów w wyświetlaniu danych w wierszach Tę sytuację można uznać za powszechny błąd popełniany przez osoby które nie mają doświadczenia w zarządzaniu strukturą tabel HTML Wybierając nieprawidłowe podejście łatwo można wprowadzić chaos w logice prezentacji danych co wpływa na czytelność i użyteczność strony internetowej Użytkownicy często mylnie interpretują funkcje colspan i rowspan co prowadzi do nieprawidłowego układu wizualnego i funkcjonalnego w tabelach HTML Właściwe zrozumienie różnicy między colspan a rowspan oraz ich zastosowania w różnych scenariuszach jest kluczowe dla tworzenia profesjonalnych i zgodnych ze standardami stron internetowych Poprawna odpowiedź wymaga rozumienia semantyki HTML i umiejętności praktycznego zastosowania tej wiedzy do tworzenia struktur tabelowych które są efektywne i estetyczne

Pytanie 28

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

a:hover { font-weight: bold; }

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

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

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

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

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

Pytanie 29

W kodzie HTML atrybut alt w tagu img służy do określenia

A. tekstu, który będzie prezentowany, gdy obraz nie może być załadowany

B. atrybutów obrazu, takich jak rozmiar, ramka, wyrównanie

C. ścieżki oraz nazwy pliku źródłowego

D. opisu, który pojawi się pod obrazem

Atrybut alt w znaczniku img w HTML to naprawdę ważny element, jeśli chodzi o dostępność stron www. Jego głównym zadaniem jest pomóc osobom z problemami ze wzrokiem zrozumieć, co widnieje na obrazku. Jeśli nie da się wyświetlić grafiki – na przykład przez zły internet czy błąd w ścieżce do pliku – tekst w atrybucie alt pokazuje się jako alternatywa. Na przykład <img src='example.jpg' alt='Zachód słońca nad morzem'>, co by ułatwiło osobom korzystającym z czytników ekranu zrozumienie treści. Warto też pamiętać, że ten atrybut ma znaczenie dla SEO, bo wyszukiwarki mogą go wykorzystać do lepszego zrozumienia zawartości strony, co wpływa na jej indeksowanie. Ogólnie rzecz biorąc, używanie odpowiednich atrybutów alt to dobra praktyka w budowaniu stron www.

Pytanie 30

W HTML, aby ustawić tytuł dokumentu na "Moja strona", który pojawi się na karcie przeglądarki internetowej, należy użyć zapisu

A. <title>Moja strona</title>

B. <head>Moja strona</head>

C. <meta title="Moja strona">

D. <meta name="title" content="Moja strona">

Element <title> w HTML jest naprawdę ważny, bo to właśnie on ustala, co zobaczysz na zakładce w przeglądarce. Powinien być umieszczony w sekcji <head>, co jest zgodne z tym, co mówi W3C. Poprawny zapis wygląda tak: <title>Moja strona</title>, co sprawia, że "Moja strona" będzie się pokazywać jako tytuł w przeglądarce. Tytuł strony ma spore znaczenie dla SEO, bo wpływa na to, jak strona jest pozycjonowana w wynikach wyszukiwania. Warto, żeby tytuł był krótki, ale jednocześnie zawierał istotne informacje, a najlepiej, żeby nie miał więcej niż 60 znaków, żeby się nie obcinał w wynikach. Fajnie też umieścić w tytule kluczowe słowa, które opisują, o czym jest strona, bo to może zwiększyć jej atrakcyjność i CTR. Dobrze skonstruowany tytuł to też lepsza dostępność, bo ułatwia użytkownikom poruszanie się i orientowanie w otwartych zakładkach.

Pytanie 31

Aby włączyć kaskadowy arkusz stylów zapisany w zewnętrznym pliku, należy zastosować poniższy fragment kodu HTML?

A. <meta charset="styl.css" />

B. <optionvalue="styl.css" type="text/css" />

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

D. <div id="styl.css" relation="css" />

Odpowiedź <link rel="stylesheet" type="text/css" href="styl.css" /> jest poprawna, ponieważ jest to standardowy sposób dołączania zewnętrznych arkuszy stylów w HTML. Element <link> jest używany do powiązania dokumentu HTML z zewnętrznym źródłem CSS. Atrybut 'rel' informuje przeglądarkę, że jest to arkusz stylów, natomiast atrybut 'href' wskazuje ścieżkę do pliku CSS. Dzięki temu przeglądarka może załadować stylizacje z pliku, co pozwala na oddzielenie treści od stylu, co jest zgodne z zasadą separacji, kluczową w projektowaniu stron internetowych. Na przykład, dodając ten fragment kodu w sekcji <head> dokumentu HTML, możemy łatwo zarządzać wyglądem wielu stron, zmieniając tylko jeden plik CSS. To podejście zwiększa wydajność i ułatwia konserwację strony, co jest szczególnie ważne w większych projektach. W praktyce, aby załadować różne style dla różnych urządzeń, możemy użyć atrybutu 'media', co pozwoli na bardziej elastyczne podejście do zarządzania stylami.

Pytanie 32

W CSS zapis w formie: p{background-image: url"rysunek.jpg")} spowoduje, że rysunek.png stanie się

A. tłem każdego bloku tekstowego

B. tłem całej witryny

C. wyświetlany obok każdego bloku tekstowego

D. pokazany, jeśli w kodzie użyty będzie znacznik img

Zapis p{background-image: url('rysunek.jpg')} oznacza, że każdy <p>, czyli paragraf, dostanie jako tło obrazek o nazwie rysunek.jpg. To jest po prostu sposób, żeby nadać każdyemu paragrafowi ten sam wygląd. Działa to świetnie, gdy chcesz, żeby cały tekst miał spójny styl czy dodać coś wizualnego do treści. Ważne, żeby ten plik rysunek.jpg był w dobrym miejscu, bo jak go nie znajdziesz, to przeglądarka go nie wczyta. Można to wykorzystać, żeby strona wyglądała bardziej estetycznie i przyciągała wzrok – każdy paragraf z własnym tłem na pewno sprawi, że będzie się lepiej czytało. Możesz też bawić się dodatkowymi właściwościami w CSS, jak background-repeat czy background-size, bo to otwiera drzwi do jeszcze ciekawszych efektów wizualnych.

Pytanie 33

Jaki rezultat zostanie wyświetlony po wykonaniu przedstawionego kodu HTML?

<ol>
    <li>punkt</li>
    <li>punkt
        <ul>
            <li>punkt</li>
            <li>punkt</li>
        </ul>
    </li>
    <li>punkt</li>
</ol>
<ol type="A" start="4">
    <li>punkt</li>
</ol>

1. punkt

2. punkt

punkt
punkt

3. punkt

4. punkt

1. punkt

2. punkt

punkt
punkt

3. punkt

4. punkt

1. punkt

2. punkt

punkt
punkt

3. punkt

D. punkt

1. punkt

2. punkt

punkt
punkt

3. punkt

D. punkt

A. B.

B. A.

C. C.

D. D.

Gratulacje, wybrałeś poprawną odpowiedź, która jest 'D'. Twoja znajomość struktury i semantyki kodu HTML jest na dobrym poziomie. Kod HTML w pytaniu składa się z dwóch uporządkowanych list (``), z których pierwsza zawiera trzy elementy. Drugi element pierwszej listy uporządkowanej zawiera zagnieżdżoną nieuporządkowaną listę (``) z dwoma elementami. Zwróć uwagę, że elementy listy nieuporządkowanej są wyświetlane z kropkami. Druga lista uporządkowana zaczyna numerację od litery 'D', co jest zgodne z odpowiedzią 'D'. W praktyce, zagnieżdżone listy są często używane do tworzenia struktur menu w aplikacjach webowych, a atrybut start w liście uporządkowanej pozwala na kontrolowanie numeracji elementów listy. Pamiętaj, że zrozumienie struktury i semantyki tagów HTML jest kluczowe dla tworzenia efektywnych i użytecznych stron internetowych.

Pytanie 34

Aplikacja o nazwie FileZilla umożliwia

A. publikację witryny internetowej na zdalnym serwerze

B. przeprowadzenie testów aplikacji

C. sprawdzanie poprawności plików HTML oraz CSS

D. wniesienie bazy danych na stronę CMS Joomla!

FileZilla to popularny program typu FTP (File Transfer Protocol), który umożliwia użytkownikom przesyłanie plików między komputerem a serwerem internetowym. Jego głównym celem jest publikacja stron internetowych na odległych serwerach, co jest kluczowe dla procesu tworzenia i utrzymania stron w sieci. Program obsługuje różne protokoły, takie jak FTP, FTPS oraz SFTP, co zapewnia elastyczność i bezpieczeństwo podczas transferu danych. W praktyce, aby opublikować stronę, użytkownik może przeciągnąć pliki z lokalnego folderu do odpowiedniego katalogu na serwerze, co jest intuicyjne i efektywne. FileZilla wspiera również funkcje takie jak synchronizacja folderów, co pozwala na łatwe aktualizowanie zawartości strony. Zgodnie z branżowymi standardami, korzystanie z odpowiednich narzędzi do przesyłania plików, takich jak FileZilla, jest niezbędne dla każdego dewelopera webowego, aby zapewnić bezpieczeństwo i zgodność z najlepszymi praktykami w zakresie publikacji stron internetowych.

Pytanie 35

Jakie znaki <header>, <article>, <section>, <footer> są typowe dla tego języka?

A. XHTML 1.1

B. HTML 5

C. HTML 4.01 Strict

D. HTML 4.01 Transitional

Znaczniki <header>, <article>, <section>, <footer> są częścią specyfikacji HTML5, która wprowadziła bardziej semantyczne podejście do strukturyzacji dokumentów webowych. Te elementy umożliwiają programistom tworzenie bardziej przejrzystych i zrozumiałych dokumentów, zarówno dla ludzi, jak i dla maszyn. Na przykład, znacznik <header> definiuje nagłówek strony lub sekcji, <article> służy do oznaczania samodzielnych treści, które mogą być niezależnie dystrybuowane, <section> grupuje powiązane tematycznie elementy, a <footer> zawiera informacje o końcu strony lub sekcji. Użycie tych znaczników ma kluczowe znaczenie dla SEO, ponieważ wyszukiwarki mogą lepiej zrozumieć strukturę treści na stronie. Dodatkowo, zastosowanie tych elementów wspiera dostępność, ułatwiając nawigację osobom korzystającym z czytników ekranu. W praktyce, stosując te znaczniki, programiści tworzą bardziej uporządkowane i zrozumiałe strony, co jest zgodne z najlepszymi praktykami w branży.

Pytanie 36

W języku HTML w celu określenia słów kluczowych dla danej strony, należy zastosować następujący zapis

A. <meta name="keywords" content="psy, koty, gryzonie">

B. <meta name="description" content="psy, koty, gryzonie">

C. <meta keywords="psy, koty, gryzonie">

D. <meta name="keywords" = "psy, koty, gryzonie">

Pierwsza z niepoprawnych odpowiedzi, <meta keywords="psy, koty, gryzonie">, jest błędna z powodu braku atrybutu 'name'. W standardzie HTML każdy element <meta> powinien zawierać atrybut 'name' lub 'property', który określa, jakiego rodzaju metadane są dostarczane. Pominięcie tego atrybutu sprawia, że przeglądarki mogą nieprawidłowo interpretować ten element, co negatywnie wpływa na SEO strony. Druga odpowiedź, <meta name="keywords" = "psy, koty, gryzonie">, zawiera błędną składnię. Równanie atrybutu w HTML powinno być zapisane z wykorzystaniem znaku ' ', a nie '='. Poprawny zapis powinien wyglądać: <meta name="keywords" content="psy, koty, gryzonie">. Błąd ten jest częstym źródłem problemów w kodzie HTML, prowadzącym do niezrozumienia przez przeglądarki, co może skutkować ignorowaniem tego elementu przez algorytmy wyszukiwarek. Ostatnia odpowiedź, <meta name="description" content="psy, koty, gryzonie">, jest niepoprawna, ponieważ nie dotyczy słów kluczowych, lecz opisu strony. Chociaż atrybut 'description' również jest istotny i wpływa na SEO, to jego zastosowanie w tym kontekście nie odpowiada na pytanie o definicję słów kluczowych. Poprawne użycie metadanych polega na precyzyjnym dobraniu atrybutów do ich funkcji, co jest kluczowe dla efektywnej optymalizacji strony.

Pytanie 37

Strona internetowa została stworzona w języku XHTML. Który z poniższych kodów reprezentuje realizację zaprezentowanego fragmentu strony, jeśli nie zdefiniowano żadnych stylów CSS?

A. B

B. D

C. A

D. C

Odpowiedzi nieprawidłowe nie spełniają wymogów semantycznych oraz składniowych XHTML. XHTML wymaga, aby dokumenty były poprawne pod względem składniowym, co oznacza między innymi zamykanie wszystkich znaczników oraz stosowanie poprawnej struktury dokumentu. Warianty odpowiedzi, które używają znacznika <b> zamiast semantycznych nagłówków jak <h1>, nie są zgodne z dobrymi praktykami, ponieważ <h1> nadaje kontekst semantyczny, informując o hierarchii treści. W przypadku XHTML, znaczniki powinny być zamykane, a ich nazwy pisane małymi literami, co jest kluczowe dla zgodności z XML. Brak odpowiedniej struktury, jak w przypadku użycia <b> do nagłówków, może prowadzić do niepoprawnej interpretacji przez przeglądarki oraz problemy z dostępnością dla technologii wspomagających. Ponadto, używanie znaczników inline jak <br> do wizualnego formatowania tekstu nie jest zalecane, gdyż nie oddziela treści od prezentacji, co jest jednym z fundamentalnych założeń nowoczesnego tworzenia stron internetowych. To może prowadzić do problemów z dostępnością oraz negatywnie wpływać na SEO, jako że wyszukiwarki lepiej interpretują treści poprawnie zorganizowane i semantycznie poprawne.

Pytanie 38

Jaką technologię zaleca się przy budowie witryn WWW, aby użytkownicy bez umiejętności programistycznych mogli samodzielnie wprowadzać zmiany w treści bez kodowania?

A. SSL

B. SEO

C. CMS

D. FTP

SEO, czyli optymalizacja dla wyszukiwarek, to temat, który dotyczy poprawy widoczności strony w wynikach wyszukiwania. Choć jest szalenie ważne w marketingu internetowym, to nie ma bezpośredniego związku z tym, jak zarządzać treścią na stronie. Użytkownicy nie mogą zmieniać treści za pomocą SEO; chodzi raczej o to, żeby to, co już jest, było bardziej przyjazne dla robotów wyszukiwarek. Trzeba pamiętać, że jeśli się skupiamy na SEO, ale nie mamy porządnego CMS-a, to aktualizacja treści może być trudna, co w dłuższym czasie źle wpłynie na pozycjonowanie. FTP, czyli protokół transferu plików, jest do przesyłania plików między komputerami a serwerami, ale żeby z niego korzystać, trzeba znać strukturę plików, więc dla kogoś bez technicznych umiejętności to nie jest rozwiązanie. SSL, czyli bezpieczne połączenia, to ważna rzecz, ale z zarządzaniem treścią nie ma za bardzo wspólnego. Użytkownicy mogą się pogubić, myśląc, że te technologie wystarczą do zarządzania treścią, co może wprowadzać w błąd i powodować, że zasoby internetu będą wykorzystywane nieefektywnie.

Pytanie 39

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

A. tekstów nagłówka pierwszego poziomu

B. pierwszej linii akapitu

C. pierwszej litery nagłówka pierwszego poziomu

D. pierwszej litery nagłówka drugiego poziomu

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

Pytanie 40

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

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

B. wymiary obrazów jedynie w pikselach

C. wymiary obrazów w procentach

D. tylko znane fonty, takie jak Arial

Różne podejścia do definiowania rozmiarów obrazów na stronach WWW mogą prowadzić do poważnych problemów z responsywnością. Używanie wyłącznie tabel do rozkładu strony to przestarzała metoda projektowania, która nie sprzyja elastyczności ani skalowalności layoutu. Tabele są statyczne i nie adaptują się do zmieniających się rozmiarów ekranów, co może powodować, że strona będzie wyglądać nieestetycznie na urządzeniach mobilnych. Z kolei definiowanie rozmiarów obrazów wyłącznie w pikselach ogranicza ich zdolność do dostosowywania się do różnych rozdzielczości. Przy stałych wartościach w pikselach obrazy mogą być zbyt małe na dużych ekranach lub zniekształcone na mniejszych urządzeniach, co negatywnie wpływa na użytkowanie. Ponadto, ograniczenie się do znanych czcionek, takich jak Arial, nie sprzyja różnorodności projektowej i może prowadzić do wizualnej monotonii strony. Współczesne praktyki projektowania zachęcają do korzystania z szerszej gamy czcionek oraz do technik takich jak @font-face, co pozwala na większą elastyczność estetyczną. Kluczowym błędem w myśleniu o responsywności jest brak zrozumienia, że wszystkie elementy strony powinny być traktowane w sposób dynamiczny i elastyczny, co jest podstawą nowoczesnego podejścia do tworzenia stron internetowych.

Rozpocznij nowy egzamin

Powrót do strony głównej