Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 8 kwietnia 2026 11:44
Data zakończenia: 8 kwietnia 2026 12:04

Egzamin zdany!

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

Wymagane minimum: 20 punktów (50%)

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Którą wartość atrybutu name znacznika <meta> wykorzystuje się do kontrolowania obszaru widzialnego na różnych urządzeniach, na których jest wyświetlana strona internetowa?

A. generator

B. keywords

C. description

D. viewport

Poprawnie wskazana została wartość „viewport”. W praktyce właśnie meta name="viewport" służy do kontrolowania tzw. obszaru widzialnego (ang. viewport) na urządzeniach mobilnych i desktopowych. Przeglądarka mobilna domyślnie zakłada szeroką stronę i sztucznie ją pomniejsza, żeby „zmieściła się” na ekranie telefonu. Dopiero meta viewport mówi jej: potraktuj szerokość ekranu urządzenia jako bazową szerokość strony. Najczęściej spotykana, zgodna z dobrymi praktykami konstrukcja to: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Parametr width=device-width ustawia szerokość obszaru widzialnego na szerokość ekranu urządzenia, a initial-scale=1.0 definiuje początkowe powiększenie. Dzięki temu layout responsywny oparty na media queries w CSS działa poprawnie, bez dziwnych przeskalowań i zbyt małej czcionki. W nowoczesnym front-endzie przyjmuje się, że każda strona, która ma być używalna na telefonach, tabletach i laptopach, powinna mieć prawidłowo ustawiony meta viewport. Moim zdaniem to jest absolutna podstawa RWD, zaraz obok poprawnego użycia jednostek względnych (np. %, vw, em) i zaprojektowania siatki w CSS. Warto też pamiętać, żeby nie przesadzać z blokowaniem powiększania (np. user-scalable=no), bo to pogarsza dostępność strony dla osób słabiej widzących i jest uznawane za złą praktykę. Podsumowując: jeśli chcesz mieć stronę, która naprawdę „żyje” na różnych ekranach, meta name="viewport" to obowiązkowy element w sekcji <head>.

Pytanie 2

W celu uzyskania efektu widocznego na rysunku, w kodzie HTML, należy umieścić znacznik skrótu <abbr> z atrybutem

A. dfn

B. name

C. title

D. alt

Wybrałeś niepoprawną odpowiedź. Przeanalizujmy inne opcje. 'alt' to atrybut używany w znacznikach obrazów (<img>) w HTML, służy do dostarczania tekstu alternatywnego, który jest wyświetlany, gdy obraz nie może być załadowany. 'dfn' to znacznik HTML używany do zdefiniowania terminu, ale nie ma on żadnej roli w określaniu skrótów. 'name' to atrybut używany w różnych znacznikach HTML, takich jak <input>, <form>, <map>, <meta>, <param> oraz <button>, ale nie jest związany ze znacznikami skrótów. W HTML, atrybutem używanym wraz ze znacznikiem skrótu <abbr> jest 'title', który dostarcza pełną formę skrótu. Proszę pamiętać o tej informacji na przyszłość.

Pytanie 3

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

A. local-top

B. padding-top

C. border-top

D. outline-top

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

Pytanie 4

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

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

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

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

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

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

Pytanie 5

Zestawienie dwóch kolorów znajdujących się po przeciwnych stronach na kole barw stanowi zestawienie

A. trójkątnym

B. dopełniającym

C. monochromatycznym

D. sąsiednim

Wybór sąsiadujących barw oznaczałby połączenie kolorów, które leżą obok siebie na kole barw, co prowadzi do efektu harmonijnego i spokojnego, ale nie intensywnego, jak w przypadku barw dopełniających. Tego typu zestawienia są często stosowane w projektach wymagających łagodnych przejść kolorystycznych, np. w architekturze wnętrz. Monochromatyczne zestawienia, z drugiej strony, polegają na używaniu różnych odcieni, tonów lub nasycenia jednej barwy, uzyskując efekt spójności, ale bez kontrastu. Takie podejście może być stosowane w minimalistycznych projektach, ale nie wykorzystuje pełnego potencjału kontrastów. Natomiast koncepcja trójkątnych zestawień kolorystycznych odnosi się do używania trzech kolorów, które tworzą trójkąt równoboczny na kole barw, co także prowadzi do harmonii, ale niekoniecznie do dynamiki i intensywności, które charakteryzują połączenia dopełniające. Typowym błędem myślowym jest pomylenie pojęcia kontrastu z harmonią, co prowadzi do niepoprawnych wniosków o funkcji poszczególnych zestawień kolorystycznych w praktyce projektowej.

Pytanie 6

W HTML zdefiniowano hiperłącze zawierające znak #. Co się wydarzy po kliknięciu na ten odsyłacz?

<a href="#dane"></a>

A. Strona przewinie się do elementu o id równym dane

B. Zostanie wskazany względny adres URL o nazwie dane

C. Uruchomi się skrypt o nazwie dane

D. Otworzy się nowa karta przeglądarki o nazwie dane

W HTML znacznik <a> to taki element, który tworzy hiperłącza. Dzięki nim możesz przeskakiwać po stronie lub między różnymi stronami. Atrybut href wskazuje, dokąd prowadzi to łącze. Jak widzisz, gdy href zaczyna się od #, to znaczy, że przeniesie Cię do konkretnego miejsca na tej samej stronie, które jest oznaczone atrybutem id. Czyli, jeśli masz href="#dane", to strona przewinie się do elementu z id="dane". To bardzo przydatna rzecz, szczególnie na długich stronach, bo zamiast przewijać wszystko, możesz od razu trafić do odpowiedniej sekcji. To zgodne z tymi sztywnymi zasadami W3C, które mówią o tym, że strony powinny być łatwe w obsłudze. Powinieneś też pamiętać, żeby zawsze sprawdzać, czy id, do którego się odnosisz, istnieje. Dzięki temu unikniesz problemów z nawigacją.

Pytanie 7

Systemy CMS charakteryzują się

A. możliwością programowania w zaawansowanych frameworkach dla aplikacji Web.

B. wbudowanym serwerem poczty elektronicznej.

C. możliwością edycji treści bez konieczności znajomości HTML.

D. wbudowanym edytorem grafiki wektorowej.

Systemy CMS bywają czasem mylone z kombajnem do wszystkiego, ale ich główne zadanie jest dość konkretne: zarządzanie treścią strony internetowej. Stąd łatwo wpaść w pułapkę myślenia, że skoro to rozbudowany system, to na pewno ma wbudowany edytor grafiki wektorowej albo serwer poczty. W praktyce wygląda to inaczej. CMS zazwyczaj pozwala wgrywać obrazy, zmniejszać je, czasem przyciąć czy skompresować, ale pełnoprawny edytor grafiki wektorowej (jak Inkscape czy Illustrator) to zupełnie inna kategoria narzędzi. Projektowanie logotypów, ikon SVG czy ilustracji robi się w zewnętrznych programach, a do CMS wgrywa gotowe pliki. Wbudowanie takiego edytora do CMS byłoby przerostem formy nad treścią i łamaniem zasady podziału odpowiedzialności na wyspecjalizowane narzędzia. Podobnie jest z serwerem poczty elektronicznej. CMS może wysyłać e‑maile (powiadomienia, reset hasła, newsletter), ale technicznie opiera się na zewnętrznym serwerze SMTP lub konfiguracji serwera WWW. Sam w sobie nie pełni roli pełnoprawnego MTA jak Postfix czy Exim. To częsty błąd myślowy: skoro system coś „wysyła”, to ludzie zakładają, że musi mieć wbudowaną pełną infrastrukturę pocztową. W rzeczywistości są to tylko funkcje klienckie. Jeśli chodzi o programowanie w zaawansowanych frameworkach, tu też łatwo się pomylić. CMS może być napisany w jakimś frameworku lub mieć własne API, ale to nie jest jego wyróżnik jako systemu. Programowanie w frameworkach typu Laravel, Symfony czy React to domena deweloperów tworzących aplikacje webowe, a nie typowa funkcja dostarczana redaktorowi treści. Użytkownik CMS raczej klika w panel, ustawia moduły, pluginy, szablony, niż pisze rozbudowany kod aplikacyjny. Kluczową, charakterystyczną cechą CMS jest właśnie to, że pozwala na edycję treści bez konieczności znajomości HTML. Cała reszta – grafika, poczta, frameworki – to albo funkcje zewnętrzne, albo techniczne szczegóły implementacji, które nie definiują idei systemu zarządzania treścią.

Pytanie 8

Na ilustracji pokazano tabelę z połączonymi komórkami. Jakie atrybuty scalania zastosowano, aby uzyskać ten efekt?

A. rowspan w drugim wierszu i pierwszej komórce oraz colspan w trzecim wierszu, trzeciej komórce

B. colspan w drugim wierszu we wszystkich trzech komórkach oraz rowspan w trzecim wierszu ostatniej komórce

C. colspan w drugim wierszu i pierwszej komórce oraz rowspan w trzecim wierszu, trzeciej komórce

D. colspan w drugim wierszu i pierwszej komórce oraz rowspan w trzecim wierszu i czwartym wierszu

Odpowiedź jest prawidłowa, ponieważ zastosowanie atrybutów colspan i rowspan w tabeli HTML pozwala na efektywne zarządzanie układem danych. Atrybut colspan w drugiej komórce pierwszego wiersza łączy dwie komórki poziomo, co jest użyteczne, gdy chcemy, aby nagłówki lub dane rozciągały się na kilka kolumn. W trzecim wierszu, atrybut rowspan w trzeciej komórce łączy trzy komórki pionowo, co może być przydatne, gdy mamy dane, które powinny być przedstawione obok siebie w kilku rzędach. Tego typu operacje scalania są powszechnie stosowane w projektowaniu stron internetowych, szczególnie w przypadku układów, które wymagają elastyczności i skalowalności. W praktyce, takie podejście pozwala na lepsze wykorzystanie przestrzeni ekranowej i ułatwia czytelność danych. Dobrą praktyką jest również stosowanie CSS do dodatkowego stylizowania takich tabel, co zwiększa ich atrakcyjność wizualną. Ważne jest, aby zrozumieć, że używanie colspan i rowspan wpływa na dostępność danych, dlatego należy je stosować świadomie i z uwzględnieniem użytkowników korzystających z technologii wspomagających.

Pytanie 9

Znak <s> w HTML powoduje

A. pochylenie tekstu

B. podkreślenie tekstu

C. skreślenie tekstu

D. migotanie tekstu

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

Pytanie 10

Fragment dokumentu HTML sugeruje, że

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

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

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

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

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

Deklaracja DOCTYPE wskazuje na to że dokument HTML wykorzystuje standard HTML 4.01 w trybie ścisłym. HTML 4.01 jest jedną z wersji języka HTML wprowadzoną przez World Wide Web Consortium w 1999 roku i zawiera trzy warianty: Strict Transitional i Frameset. Tryb Strict oznacza ścisłe przestrzeganie zasad standardu bez użycia przestarzałych elementów i atrybutów takich jak tagi związane z formatowaniem stron które stały się przestarzałe w miarę rozwoju kaskadowych arkuszy stylów CSS. W kontekście praktycznym oznacza to że projektując stronę zgodną z tą specyfikacją należy unikać znaczników odpowiedzialnych za prezentację które były powszechnie stosowane w poprzednich wersjach HTML. Zamiast tego zaleca się korzystanie z CSS do określania wyglądu strony co nie tylko wspiera separację struktury treści od jej wyglądu ale także ułatwia przenoszenie i aktualizację stylów. Używając deklaracji DOCTYPE HTML 4.01 Strict można zapewnić lepszą zgodność z najnowszymi wersjami przeglądarek oraz ułatwić przyszłe aktualizacje kodu do nowoczesnych standardów takich jak HTML5 który wprowadza dodatkowe funkcjonalności i uproszczenia mające na celu poprawę semantyki i użyteczności stron WWW

Pytanie 11

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

A. rowspan

B. cellpadding

C. colspan

D. cellspacing

Atrybut rowspan w języku HTML jest kluczowy do scalania komórek tabeli w pionie, co oznacza, że pozwala na połączenie dwóch lub więcej komórek w jednej kolumnie w jedną, większą komórkę. Dzięki temu, można uzyskać bardziej przejrzysty i zorganizowany układ informacji w tabelach, zwłaszcza w przypadku danych, które są ze sobą powiązane. Na przykład, jeśli mamy tabelę, w której jeden z wierszy odnosi się do tytułu kategorii, a poniżej znajdują się różne elementy tej kategorii, użycie atrybutu rowspan w pierwszej komórce umożliwi jej rozszerzenie na kilka wierszy, co wizualnie połączy te dane. Standard HTML5 definiuje atrybut rowspan jako atrybut, który przyjmuje wartość liczbową, określającą liczbę wierszy, które mają zostać scalone. Przykładowy kod HTML mógłby wyglądać następująco: <table><tr><td rowspan='3'>Kategoria</td><td>Element 1</td></tr><tr><td>Element 2</td></tr><tr><td>Element 3</td></tr></table>, co w efekcie tworzy jedną komórkę o wysokości trzech wierszy oraz trzy osobne komórki w drugiej kolumnie. Użycie rowspan w praktyce jest nie tylko estetyczne, ale również poprawia czytelność danych, co jest niezmiernie ważne w interfejsach użytkownika.

Pytanie 12

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

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

B. nav { float: right; }

C. aside {float: left; }

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

Prawidłowa odpowiedź opiera się na tym, jak działają własności float w CSS i w jakiej kolejności przeglądarka renderuje elementy blokowe. Jeśli w dokumencie HTML kolejność znaczników to np. <aside>, potem <section>, a na końcu <nav>, to bez dodatkowego stylowania wszystkie trzy ustawią się pionowo, jeden pod drugim, w tej właśnie kolejności. Dodanie float zmienia sposób, w jaki elementy „odpływają” od normalnego przepływu dokumentu i jak układają się obok siebie. W stylu nav { float: right; } section { float: right; } sprawiamy, że zarówno nav, jak i section są przesuwane do prawej krawędzi kontenera, natomiast aside (bez float) pozostaje w normalnym przepływie, czyli z lewej strony. Ponieważ przeglądarka układa elementy w kolejności występowania w kodzie, najpierw wyrenderuje aside po lewej, potem section „odpłynie” w prawo, a na końcu nav też „odpłynie” w prawo, ustawiając się po prawej stronie, ale dalej od góry niż section. Efekt wizualny jest taki, że po lewej mamy aside, po prawej nav, a section ląduje między nimi, dokładnie tak jak było pokazane na filmie. Moim zdaniem to zadanie dobrze pokazuje, że przy floatach zawsze trzeba myśleć o trzech rzeczach naraz: kolejności elementów w HTML, kierunku „pływania” (left/right) oraz o tym, które elementy pozostawiamy w normalnym przepływie. W praktyce w nowoczesnych projektach częściej używa się flexboxa albo CSS Grid do takich układów, bo są czytelniejsze i mniej problematyczne. Przykładowo, zamiast kombinować z float, można by użyć display: flex; na kontenerze i ustawić order dla aside i nav. Float nadal jednak pojawia się w starszych layoutach i w zadaniach egzaminacyjnych, więc warto dobrze rozumieć jego zachowanie, choćby po to, żeby poprawnie modyfikować istniejące style lub naprawiać „rozjechane” układy w starszych projektach.

Pytanie 13

W jakim typie pliku powinno się zapisać zdjęcie, aby mogło być wyświetlane na stronie WWW z zachowaniem efektu przezroczystości?

A. JPG

B. BMP

C. PNG

D. CDR

Format PNG (Portable Network Graphics) jest idealnym wyborem do przechowywania obrazów z przezroczystością, ponieważ obsługuje kanał alfa, który pozwala na reprezentację przezroczystości w obrazach. Ta cecha jest szczególnie cenna w projektowaniu stron internetowych, gdzie grafiki muszą być dopasowane do różnych tła bez widocznych krawędzi. Przykładowo, logo firmy zapisane w formacie PNG może być umieszczone na stronie o różnych kolorach tła, zachowując estetyczny wygląd i nie zaburzając kompozycji. Ponadto, PNG jest formatem bezstratnym, co oznacza, że zachowuje jakość oryginalnego obrazu podczas kompresji, co jest ważne, gdy zależy nam na zachowaniu szczegółów i kolorów. W praktyce, wiele przeglądarek internetowych i edytorów graficznych obsługuje ten format, co czyni go standardem w branży. Dlatego dla grafik z przezroczystością PNG jest najczęściej zalecanym formatem, zgodnym z aktualnymi standardami i najlepszymi praktykami w dziedzinie projektowania stron internetowych.

Pytanie 14

Znacznik <i> w języku HTML ma na celu

A. ustalenie nagłówka w treści

B. określenie formularza

C. dodanie grafiki

D. zmianę czcionki na kursywę

Znacznik <i> w języku HTML jest używany do formatowania tekstu, aby uzyskać efekt pochylonego kroju pisma. Jest to element semantyczny, który wprowadza do dokumentu wizualną różnicę, ale także ma swoje miejsce w kontekście znaczeniowym. Użycie <i> może wskazywać na zmianę intonacji w tekście, taką jak nazwy książek, filmów, czy obcych wyrazów. W standardach HTML5, <i> jest zalecany do użytku, aby wyróżnić elementy tekstowe w sposób, który jest zgodny z zasadami dostępności i semantyki. Przykład zastosowania: <p>W książce <i>W pustyni i w puszczy</i> autorstwa Henryka Sienkiewicza...</p>. Oznaczanie tekstu w ten sposób wspiera nie tylko estetykę strony, ale również poprawia doświadczenie użytkowników korzystających z technologii asystujących, które mogą interpretować znaczenie tak oznaczonego tekstu. Warto również pamiętać o odpowiednich stylach CSS, które można zastosować do tego znacznika, aby dostosować jego wygląd do reszty witryny.

Pytanie 15

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

A. text-size

B. text-weight

C. font-weight

D. font-size

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

Pytanie 16

Dostosowanie wyglądu witryny do indywidualnych preferencji użytkownika oraz jego identyfikacja w systemie są możliwe dzięki mechanizmowi

A. cookie

B. łączenia z bazą

C. formularzy

D. obiektów DOM

Odpowiedź dotycząca cookies jest dobra. To ważny element, bo dzięki nim można lepiej dopasować serwis do użytkowników. Cookies to takie małe pliki, które przeglądarka zapisuje na naszym urządzeniu. Pozwalają na zbieranie różnych informacji, jak na przykład co użytkownik lubi, co robi na stronie czy jego dane do logowania. Dzięki temu, gdy wracasz na stronę, serwis może sam dostosować, co widzisz, do tego, co robiłeś wcześniej. Przykłady to zapamiętywanie języka, zawartości koszyka w sklepach online czy automatyczne logowanie. Ważne jest, żeby serwisy informowały użytkowników o cookies i prosiły o zgodę, zwłaszcza w kontekście RODO. Znanie tych zasad jest istotne, jeśli myślisz o pracy w tworzeniu aplikacji webowych, bo to pomaga w lepszym zrozumieniu potrzeb użytkowników.

Pytanie 17

W CSS zapis

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

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

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

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

C. wszystkich linków.

D. treści akapitu.

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

Pytanie 18

Analizując zamieszczony kod w języku HTML, można zauważyć, że w przeglądarce

A. dolny margines zostanie przypisany do bloku B

B. blok B będzie oddalony od bloku A o 20 px

C. blok A zostanie przesunięty w lewo o 20 px

D. bloki A oraz B będą się na siebie nakładać

Odpowiedź jest prawidłowa ponieważ styl CSS margin-top: 20px zastosowany do bloku B powoduje dodanie górnego marginesu tego bloku co skutkuje odsunięciem go od bloku A o 20 pikseli. W praktyce oznacza to że w przeglądarce blok B będzie zlokalizowany 20 pikseli poniżej bloku A. Jest to standardowe zachowanie przeglądarek interpretujących HTML i CSS zgodnie z zasadami kaskadowych arkuszy stylów. Takie podejście jest zgodne z dobrymi praktykami projektowania stron internetowych gdyż pozwala na precyzyjne kontrolowanie układu elementów na stronie. Użycie jednostki pikseli jest powszechne w określaniu marginesów ze względu na przewidywalność i precyzję tej jednostki. Dzięki temu projektanci mogą osiągnąć estetyczną i funkcjonalną hierarchię wizualną co jest kluczowe w tworzeniu przejrzystych i użytecznych interfejsów użytkownika. Warto również zwrócić uwagę na fakt że marginesy są narzędziem nie tylko estetycznym ale i semantycznym zwiększając czytelność oraz dostępność treści na stronie

Pytanie 19

W poniższym zapisie CSS kolor zielony zostanie zastosowany do

h2
{
    background-color: green;
}

A. czcionki wszystkich nagłówków na stronie

B. tła całej witryny

C. czcionki nagłówka drugiego poziomu

D. tła tekstu nagłówka drugiego poziomu

Zapis CSS h2 { background-color: green; } oznacza, że każdemu elementowi nagłówka drugiego stopnia przypisany zostanie zielony kolor tła. W CSS selektor h2 odnosi się bezpośrednio do wszystkich elementów HTML o tagu <h2>. Właściwość background-color służy do definiowania koloru tła elementu, nie wpływając na kolor czcionki samego nagłówka. W praktyce takie podejście pozwala na wyraźne wyróżnienie nagłówków na tle innych elementów strony, co może być kluczowe dla poprawy czytelności. Przyjęte w kodzie standardy zapewniają zgodność z najnowszymi wytycznymi W3C, pozwalając na efektywne zarządzanie stylami w projekcie. Wiedza o tym jak stylizować nagłówki za pomocą background-color jest fundamentalna dla każdego web developera, umożliwiając tworzenie atrakcyjnych i czytelnych interfejsów użytkownika w sposób zgodny z zasadami responsywnego projektowania. Ponadto, stosowanie takich stylizacji wspiera semantyczne podejście do strukturyzacji treści, co jest ważne dla optymalizacji SEO.

Pytanie 20

Podczas weryfikacji pliku HTML5 pojawił się komunikat brzmiący: "Error: Element head is missing a required instance of child element title". Co to oznacza w kontekście dokumentu?

A. element <title> nie jest konieczny.

B. element <title> nie został prawidłowo zamknięty przez </title>.

C. nie zdefiniowano obowiązkowego atrybutu title w tagu <img>.

D. nie zdefiniowano elementu <title> w sekcji <head> dokumentu.

Wybierając odpowiedzi, które wskazują na inne problemy z elementem <title>, możesz się trochę pogubić jeśli chodzi o podstawowe zasady HTML5. Pamiętaj, że ten element jest obowiązkowy, a jak go brakuje w sekcji <head>, to pojawia się błąd, który pokazuje, że nie wszystko się zgadza z zasadami HTML. Myślenie, że <title> nie jest wymagany, to duży błąd, bo każda strona powinna mieć ten element, żeby działała poprawnie w przeglądarkach i wyszukiwarkach. Też stwierdzenie, że <title> nie jest zamknięty przez </title>, może sugerować, że myślisz, że ten element mógłby być opcjonalny, co jest nieprawdziwe. Jeśli masz <title>, to musi być on poprawnie zdefiniowany i zamknięty. A pomijanie atrybutu title w znaczniku <img> może być mylące, bo ten atrybut dotyczy opisu obrazków, a to wcale nie jest związane z tytułem dokumentu. Pamiętaj, że brak atrybutu alt w <img> może powodować problemy z dostępnością, ale nie wpływa na walidację sekcji <head>. Ważne jest, żeby zrozumieć kontekst i rolę każdego elementu HTML w budowie strony.

Pytanie 21

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. 20 px oraz marginesy wewnętrzne tego obramowania

B. 20 px oraz marginesy zewnętrzne tego obramowania

C. 2 px oraz marginesy wewnętrzne tego obramowania

D. 2 px oraz marginesy zewnę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 22

Aby stworzyć stronę internetową, która będzie odpowiadać załączonej ilustracji, konieczne jest użycie semantycznych znaczników sekcji w języku HTML5. Jakim znacznikiem należy określić sekcję menu?

A. header

B. div

C. nav

D. aside

Znacznik <div> jest często używany do ogólnego grupowania elementów w HTML, ale nie niesie ze sobą semantycznego znaczenia, co oznacza, że nie informuje technologii wspomagających ani wyszukiwarek o roli, jaką pełni zawartość. W kontekście semantycznego HTML5, poleganie na znaczniku <div> nie wykorzystuje potencjału nowych standardów, które poprawiają dostępność i strukturę dokumentów. Znacznik <aside> jest zwykle używany do grupowania treści pobocznej, takiej jak reklamy czy linki powiązane, dlatego nie jest on odpowiedni do definiowania sekcji menu. <header> jest z kolei stosowany do elementów nagłówkowych, takich jak tytuły stron czy sekcje wstępne, co również nie pasuje do kontekstu sekcji nawigacyjnej. Właściwe wykorzystanie semantycznych znaczników pomaga nie tylko w lepszej organizacji kodu, ale także wspiera dostępność oraz optymalizację SEO, co jest kluczowe w nowoczesnym projektowaniu stron internetowych.

Pytanie 23

W języku JavaScript funkcja getElementById odnosi się do

A. elementu HTML z podanym id

B. elementu HTML z określoną nazwą klasy

C. klasy zdefiniowanej w CSS

D. zmiennej numerycznej

Metoda getElementById w języku JavaScript jest kluczowym narzędziem do manipulacji DOM (Document Object Model), które pozwala deweloperom na łatwe odwoływanie się do konkretnych elementów HTML za pomocą ich atrybutu id. Dzięki temu, możemy dynamicznie zmieniać treść, style lub atrybuty tych elementów, co jest niezwykle przydatne w tworzeniu interaktywnych stron internetowych. Na przykład, jeśli mamy element HTML z atrybutem id='header', możemy użyć `document.getElementById('header')` do uzyskania do niego dostępu. To podejście jest zgodne z zasadami poprawnej struktury HTML, gdzie atrybut id powinien być unikalny w obrębie dokumentu. Rekomendowane jest, aby id było zrozumiałe i jasno określało zawartość elementu, co ułatwia późniejszą nawigację i skrypty, a także poprawia dostępność strony. W praktyce, korzystając z getElementById, możemy na przykład zmieniać tekst nagłówka: `document.getElementById('header').innerText = 'Nowy nagłówek';`.

Pytanie 24

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

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

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

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

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

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

Pytanie 25

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

A. zapisać w formacie BMP

B. zmniejszyć jego rozdzielczość

C. dodać kanał alfa

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

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

Pytanie 26

Znacznik <s> w HTML generuje

A. pochylenie tekstu

B. podkreślenie tekstu

C. przekreślenie tekstu

D. migotanie tekstu

Wybrałeś odpowiedź o pochyleniu tekstu, ale to nie jest poprawne. Do pochylenia używamy znaczników <em> lub <i>, a one mają trochę inne zadanie. Pochylenie tekstu zazwyczaj wyróżnia ważne elementy, co różni się od przekreślenia. A migotanie tekstu, chociaż może fajnie wygląda, to nie jest wspierane w HTML i zazwyczaj osiąga się to przez CSS, co nie jest najlepszym pomysłem z punktu widzenia dostępności. Może to frustrować użytkowników i nawet powodować problemy zdrowotne, na przykład migreny. Co do podkreślenia, to jest robione przez znacznik <u>, który też ma inne przeznaczenie. Często ludzie mylą podkreślenie z przekreśleniem, bo oba zmieniają wygląd, ale ich znaczenie jest inne. Podkreślenie sugeruje link, co też może wprowadzać zamieszanie. Takie nieporozumienia mogą wynikać z braku zrozumienia, jak działają znaczniki HTML oraz jak je stosować w praktyce, by tworzyć treści, które są zrozumiałe i dostępne. Dobre używanie znaczników poprawia nie tylko estetykę, ale też wspiera standardy dostępności, co jest naprawdę istotne w nowoczesnym projektowaniu stron.

Pytanie 27

Który z akapitów został sformatowany zgodnie z przedstawionym stylem, zakładając, że pozostałe właściwości akapitu mają wartości domyślne?

A. Odpowiedź A

B. Odpowiedź C

C. Odpowiedź D

D. Odpowiedź B

Paragraf oznaczony jako C został poprawnie sformatowany według przedstawionego stylu CSS. Styl ten określa kilka kluczowych właściwości: padding na poziomie 20 pikseli, kolor tekstu jako niebieski, pogrubienie tekstu ustawione na 900 oraz obramowanie o grubości 1 piksela z pełną linią. Padding określa wewnętrzne wcięcie, które wpływa na zwiększenie odległości między tekstem a krawędzią kontenera, co widać w odpowiedzi C jako przestrzeń wokół tekstu. Kolor tekstu zmienia się na niebieski, co również jest zgodne z wyglądem tej odpowiedzi. Font-weight ustawiony na 900 oznacza, że tekst powinien być wyraźnie pogrubiony, co jest zauważalne w porównaniu do innych opcji. Obramowanie wokół tekstu jest delikatne, ale widoczne, co odpowiada deklaracji border: 1px solid. Te właściwości są zgodne z powszechnymi praktykami projektowania stron internetowych, gdzie czytelność i estetyka odgrywają kluczową rolę. Praktyczne zastosowanie takich reguł CSS można znaleźć w projektowaniu intuicyjnych interfejsów użytkownika, gdzie spójność stylów ułatwia nawigację.

Pytanie 28

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

A. samych kontrolek bez zastosowania formularza

B. metody GET

C. metody POST

D. wyłącznie funkcji z biblioteki PDO

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

Pytanie 29

Która z zasad walidacji stron internetowych jest niepoprawna?

A. W znacznikach nie zachodzi rozróżnienie pomiędzy dużymi a małymi literami, np. <p> i <P> są tym samym znacznikiem

B. Znaczniki, poza tymi samozamykającymi się, funkcjonują aż do momentu ich zakończenia znakiem '/', np. <p>...</p>

C. Jeżeli w instrukcji stosuje się kilka atrybutów, ich kolejność powinna odpowiadać porządkom alfabetycznym, np. <img alt="...." src="...." />

D. Wyłączanie znaczników powinno następować w odwrotnej kolejności do ich włączania, np. <p>....<big>...</big></p>

Kolejność atrybutów w znacznikach HTML nie ma znaczenia, co oznacza, że ich uporządkowanie w porządku alfabetycznym jest błędnym podejściem. W praktyce oznacza to, że atrybuty takie jak 'alt', 'src', 'title' mogą być zdefiniowane w dowolnej kolejności, o ile są poprawnie sformułowane. Jednakże, ze względów na czytelność kodu, warto stosować jakąś konsekwentną metodę sortowania atrybutów. W przypadku znaczników obrazków, na przykład, popularne jest zaczynanie od 'alt', następnie 'src', a potem 'title'. Ważne jest również, aby atrybuty były zgodne z wytycznymi W3C oraz WCAG, co zapewnia dostępność treści dla wszystkich użytkowników, w tym osób z niepełnosprawnościami. Stosowanie poprawnych atrybutów i ich odpowiedniego umiejscowienia jest kluczowym elementem pisania semantycznego i zgodnego z standardami HTML, co wpływa na poprawne wyświetlanie strony w różnych przeglądarkach oraz na jej optymalizację SEO.

Pytanie 30

W jakim formacie powinien być zapisany obraz, aby mógł być wyświetlany na stronie internetowej z zachowaniem przezroczystości?

A. BMP

B. CDR

C. JPG

D. PNG

Format PNG (Portable Network Graphics) jest szeroko stosowany w sieci internetowej, ponieważ obsługuje przezroczystość, co jest kluczowe przy tworzeniu grafik, które mają być używane na stronach internetowych. Przezroczystość pozwala na nałożenie grafik na różne tła bez widocznych prostokątów czy kolorowych krawędzi, co znacznie poprawia estetykę oraz elastyczność projektów graficznych. PNG wykorzystuje kompresję bezstratną, co oznacza, że jakość obrazu nie ulega pogorszeniu podczas jego zapisywania, co jest istotne dla profesjonalnych projektów. Przykłady zastosowania formatu PNG obejmują ikony, logotypy oraz różnego rodzaju ilustracje, które muszą być wyświetlane na różnych tłach. W branży internetowej dobrym standardem jest używanie PNG do grafik wymagających przezroczystości, szczególnie w kontekście responsywnych projektów, gdzie różne elementy mogą mieć różne tła w zależności od urządzenia. Ponadto, PNG obsługuje kolor 24-bitowy oraz przezroczystość 8-bitową, co daje możliwość tworzenia bardziej złożonych efektów wizualnych. Zastosowanie tego formatu jest zgodne z dobrymi praktykami w projektowaniu stron, co czyni go preferowanym wyborem w wielu sytuacjach.

Pytanie 31

Który z poniższych formatów NIE umożliwia zapis plików animowanych?

A. SVG

B. ACE

C. SWF

D. GIF

Format ACE (Archive Compressed Enhanced) jest formatem archiwum, który służy do kompresji danych, a nie do przechowywania animacji. W przeciwieństwie do formatów takich jak SWF, SVG czy GIF, ACE nie jest projektowany do obsługi grafiki ruchomej. SWF to format opracowany przez Adobe, który jest używany do tworzenia i wyświetlania animacji we Flashu. SVG to wektorowy format grafiki, który również wspiera animacje za pomocą CSS i JavaScript. GIF, z kolei, jest jednym z najpopularniejszych formatów do zapisu prostych animacji, dzięki możliwości przechowywania wielu klatek w jednym pliku. Zrozumienie różnic między tymi formatami jest istotne w kontekście tworzenia treści multimedialnych, a także w kontekście ich zastosowań w sieci. Wybór odpowiedniego formatu do animacji może mieć wpływ na wydajność ładowania strony, jakość wizualną oraz możliwości interakcji z użytkownikami.

Pytanie 32

Narzędzie zaprezentowane na ilustracji służy do

A. sprawdzania zgodności witryny ze standardem HTML5

B. walidacji kodu HTML i XHTML

C. debugowania strony internetowej

D. walidacji stylów CSS

Narzędzie przedstawione na ilustracji to usługa walidacji CSS stworzona przez World Wide Web Consortium (W3C). Jego głównym celem jest sprawdzanie poprawności arkuszy stylów CSS pod kątem zgodności z obowiązującymi standardami. Walidacja CSS pozwala na identyfikację błędów składniowych oraz niepoprawnych wartości, co jest kluczowe dla zapewnienia spójności wyglądu strony w różnych przeglądarkach. Korzystanie z walidatora CSS jest częścią dobrych praktyk w procesie tworzenia stron internetowych, ponieważ poprawny kod CSS zwiększa dostępność i użyteczność serwisów. Praktycznym przykładem użycia tego narzędzia jest proces optymalizacji strony internetowej, gdzie walidator pomaga w eliminacji błędów, które mogą prowadzić do nieprzewidywalnego zachowania witryny. Dzięki walidacji możemy również upewnić się, że nasze arkusze stylów są zgodne z najnowszymi standardami, co jest istotne dla przyszłej kompatybilności serwisu.

Pytanie 33

Który znacznik lub zestaw znaczników nie jest używany do określenia struktury dokumentu HTML?

A. <header>, <footer>

B. <div>

C. <section>

D. <i>, <b>, <u>

Te znaczniki, czyli <i>, <b> i <u>, nie są jakby do tworzenia struktury dokumentu HTML, ale bardziej do formatowania tekstu. Zgodnie z nowymi standardami HTML5, są to elementy semantyczne, które wpływają na to, jak coś wygląda, a nie na to, jak jest zorganizowane. Znacznik <i> używamy, jak chcemy coś napisać kursywą, <b>, żeby coś podkreślić, a <u>, żeby coś podkreślić. Często korzysta się z nich w stylach CSS, ale nie nadają one hierarchii ani kontekstu dokumentu. Jak chcesz wyróżnić jakiś tekst w kontekście kodu czy tytułu rozdziału, lepiej skorzystać z bardziej semantycznych znaczników, jak <em> dla podkreślenia znaczenia albo <strong> dla podkreślenia wagi. W czasach, kiedy dostępność i SEO są coraz ważniejsze, używanie semantycznych elementów to klucz do tworzenia lepszych i bardziej przejrzystych stron.

Pytanie 34

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

A. ```<i>``` oraz ```<mark>```

B. ```<b>``` oraz ```<u>```

C. ```<b>``` oraz ```<i>```

D. ```<u>``` oraz ```<sup>```

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

Pytanie 35

Jaką informację przekazuje przeglądarce internetowej zapis <!DOCTYPE html> ?

A. Dokument został zapisany w wersji HTML 4

B. Dokument został zapisany w wersji HTML 5

C. W dokumencie wszystkie tagi są zapisane wielkimi literami

D. W dokumencie wymagane jest zamknięcie każdego taga, nawet samozamykającego

Wszystkie niepoprawne odpowiedzi opierają się na nieprawidłowych założeniach dotyczących definicji i funkcji deklaracji typu dokumentu (DOCTYPE). Odpowiedź sugerująca, że dokument został zapisany w HTML 4, ignoruje fakt, że HTML 5 jest wersją, która wprowadza wiele istotnych zmian oraz nowych elementów w porównaniu do starszych wersji. HTML 4 był szeroko stosowany, ale obecnie jest przestarzały, a jego zastosowanie nie jest zgodne z nowoczesnymi praktykami. Kolejna odpowiedź, która stwierdza, że wszystkie znaczniki w dokumencie muszą być zapisane wielkimi literami, jest błędna, ponieważ HTML jest językiem, który nie jest wrażliwy na wielkość liter. Znaczniki mogą być zapisywane zarówno małymi, jak i wielkimi literami, co jest zgodne z zasadami dobrych praktyk, które zalecają stosowanie małych liter dla większej czytelności. Wreszcie, stwierdzenie, że każdy znacznik musi być zamykany, jest również mylne, ponieważ HTML 5 wprowadza elementy samozamykające, takie jak <br> czy <img>, które nie wymagają zamknięcia. Zrozumienie tych różnic jest kluczowe dla efektywnego posługiwania się HTML i tworzenia poprawnych dokumentów webowych.

Pytanie 36

Jak zdefiniować formatowanie tabeli w języku CSS, aby wyróżnić wiersz, na który aktualnie najeżdża kursor myszy, korzystając z innego koloru?

A. pseudoklasę :hover

B. pseudoelement ::first-line

C. pseudoklasę :visited

D. pseudoelement ::marker

Prawidłową odpowiedzią jest użycie pseudoklasy :hover, która jest standardowym rozwiązaniem w CSS do stylizacji elementów, gdy użytkownik na nie najedzie kursorem myszy. Pseudoklasa :hover pozwala na dynamiczną modyfikację wyglądu elementów, co jest szczególnie użyteczne w kontekście interaktywności stron internetowych. Na przykład, można zastosować tę pseudoklasę do wierszy tabeli, aby zmienić ich kolor tła na inny, co podnosi czytelność i estetykę interfejsu użytkownika. Implementacja może wyglądać następująco: table tr:hover { background-color: #f2f2f2; } - dzięki temu, gdy użytkownik najedzie myszką na wiersz tabeli, jego tło zmieni się na jasno szare, co zwraca uwagę na ten wiersz. Użycie :hover jest zgodne z dobrymi praktykami w projektowaniu UI, gdyż poprawia doświadczenia użytkownika oraz umożliwia intuicyjne korzystanie z interakcji na stronie. Pseudoklasa :hover wspiera również responsywność, ponieważ wpływa na sposób, w jaki użytkownicy wchodzą w interakcje z elementami, co jest kluczowe w nowoczesnym projektowaniu stron.

Pytanie 37

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

A. tekstu, który pojawi się, gdy obrazek nie może być załadowany

B. lokalizacji i nazwy pliku źródłowego obrazu

C. napisu, który będzie widoczny pod obrazem

D. właściwości grafiki, takie jak rozmiar, ramka, wyrównanie

Odpowiedź, która wskazuje, że atrybut alt znacznika img w języku HTML definiuje tekst, który będzie wyświetlony, jeśli grafika nie może być poprawnie załadowana, jest całkowicie poprawna. Atrybut alt jest kluczowym elementem dostępności w sieci, ponieważ dostarcza użytkownikom alternatywne informacje o zawartości obrazu, co jest szczególnie ważne dla osób korzystających z czytników ekranu. Na przykład, jeśli zdjęcie w artykule nie jest dostępne z powodu problemów z łączem internetowym, atrybut alt zapewnia kontekst, dzięki czemu użytkownik jest informowany o tym, co miało być przedstawione. Dobre praktyki zalecają, aby tekst w atrybucie alt był zwięzły, ale jednocześnie dostarczał wystarczających informacji o obrazie. Warto również zauważyć, że stosowanie atrybutu alt wspiera SEO (optymalizację pod kątem wyszukiwarek), ponieważ wyszukiwarki mogą używać tych informacji do indeksowania treści. Przykład: <img src='example.jpg' alt='Zdjęcie pięknego krajobrazu górskiego'>.

Pytanie 38

Dla którego akapitu zastosowano przedstawioną właściwość stylu CSS?

border-radius: 20%;

To jest paragraf, To jest paragraf, To jest paragraf, To jest paragraf, To jest paragraf

A. D.

B. A.

C. B.

D. C.

Niestety, tym razem nie trafiłeś. Właściwość CSS 'border-radius: 20%;' naprawdę służy do zaokrąglania rogów, a na obrazku tylko akapit B ma takie zaokrąglenia. Może pomyliłeś to z czymś innym? Ważne, żeby zrozumieć, jak działa 'border-radius' – robi on krawędzie ładniejsze. Jak widzisz, '20%;' to wartość procentowa i mówi, jak bardzo te rogi mają być zaokrąglone. Widziałeś inne odpowiedzi (A, C, D), ale one nie miały tych zaokrągleń. Najlepiej zwrócić uwagę na to, jak różne style CSS wpływają na wygląd naszych elementów. W przyszłości warto się tego nauczyć, bo to naprawdę przydatne.

Pytanie 39

Podczas przygotowywania grafiki do umieszczenia na stronie internetowej konieczne jest wycięcie tylko pewnego fragmentu. Jak nazywa się ta czynność?

A. kadrowanie.

B. łączanie warstw.

C. zmiana rozmiaru.

D. odwracanie obrazu.

Kadrowanie to taka technika, która pomaga nam lepiej uchwycić to, co najważniejsze w obrazie. Wycinając niektóre fragmenty grafiki, skupiamy uwagę na tym, co naprawdę się liczy. Dobrze jest to mieć na uwadze, zwłaszcza przy zdjęciach portretowych, gdzie chcemy, żeby wzrok przyciągała twarz modela, a nie jakieś niepotrzebne tło. Kiedy kadrujemy, warto pamiętać o takich zasadach jak zasada trzecich, bo to pomaga zrobić fajną kompozycję. Można to robić w wielu programach graficznych, jak na przykład Adobe Photoshop czy GIMP. Tak w ogóle, dobrze jest dbać o proporcje i rozdzielczość, żeby obraz nie stracił na jakości. Gadżetem kadrowania można się też posługiwać w projektowaniu stron www, bo odpowiednie wybory graficzne poprawiają estetykę i funkcjonalność strony.

Pytanie 40

Jaką właściwość CSS należy zastosować, aby ustawić wewnętrzne marginesy dla danego elementu?

A. margin

B. padding

C. hight

D. width

Właściwość CSS, którą należy zastosować do definiowania marginesów wewnętrznych elementu, to padding. Padding określa przestrzeń wewnętrzną między zawartością elementu a jego granicami. Przy pomocy paddingu możemy dostosować, jak dużo przestrzeni chcemy mieć wokół tekstu, obrazów czy innych elementów wewnątrz danego kontenera. Na przykład, zastosowanie padding: 20px; w CSS sprawi, że wewnętrzny margines będzie wynosił 20 pikseli od wszystkich stron wokół zawartości. Na poziomie praktycznym, padding jest niezwykle użyteczny w projektowaniu responsywnych interfejsów użytkownika, ponieważ pozwala na lepsze dostosowanie elementów do różnych rozmiarów ekranów. Dobrą praktyką jest używanie paddingu w połączeniu z innymi właściwościami, takimi jak margin, aby uzyskać pełną kontrolę nad położeniem i rozkładem elementów na stronie. Warto także pamiętać, że w CSS możemy ustalać padding oddzielnie dla górnej, prawej, dolnej i lewej strony, co daje jeszcze większą elastyczność w projektowaniu.

Rozpocznij nowy egzamin

Powrót do strony głównej