Wyniki egzaminu

Informacje o egzaminie:
  • Zawód: Technik programista
  • Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
  • Data rozpoczęcia: 15 czerwca 2026 08:26
  • Data zakończenia: 15 czerwca 2026 08:44

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

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

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

A. w <head> zawiera się sekcję <body>
B. w <head> definiuje się szablon strony znacznikami <div>
C. w <head> nie można umieszczać CSS, tylko odwołanie do pliku
D. w <head> mogą wystąpić <meta>, <title>, <link>
Sekcja <head> nie zawiera widocznej treści strony, lecz informacje O niej - metadane i powiązania z zasobami. Poprawnie mogą się w niej znaleźć <meta> (np. kodowanie znaków, opis dla wyszukiwarek), <title> (tytuł widoczny na karcie przeglądarki) oraz <link> (np. dołączenie zewnętrznego arkusza CSS). Dlatego poprawne jest stwierdzenie o <meta>, <title> i <link>.

Pytanie 2

W którym znaczniku HTML5 stosuje się atrybut action?

A.
<head>
B.
<form>
C.
<body>
D.
<code>
Pozostałe znaczniki nie obsługują wysyłki danych. <code> prezentuje fragment kodu, <body> to kontener całej treści strony, a <head> zawiera metadane dokumentu. Atrybut action należy do <form>.

Pytanie 3

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

A. dziecka p + first-letter
B. atrybutu p [first-letter]
C. pseudoelementu p::first-letter
D. klasy p.first-letter
Wybór niewłaściwego selektora do stylizacji pierwszej litery akapitu może prowadzić do nieporozumień i błędów w interpretacji CSS. Na przykład, 'dziecka p + first-letter' to niepoprawny sposób definiowania stylu, ponieważ nie odnosi się do konkretnego pseudoelementu, a zamiast tego sugeruje selekcję w kontekście struktury DOM. Kolejną nieadekwatną opcją jest 'klasy p.first-letter', która wskazuje na klasę CSS, a nie na pseudoelement, co nie pozwala na selekcję pierwszej litery. Klasy są używane do stylizacji elementów, ale nie mają zastosowania w kontekście specyficznych fragmentów tekstu. 'Atrybutu p [first-letter]' również nie można uznać za poprawny, ponieważ CSS nie wspiera atrybutów w tej formie dla stylizacji tekstu. Te błędne podejścia wynikają często z nieporozumienia dotyczącego działania selektorów oraz ich specyfiki w CSS. Użytkownicy mogą mylić selektory klasowe i atrybutowe z pseudoelementami, co jest powszechnym błędem. Zrozumienie różnicy między tymi różnymi typami selektorów jest kluczowe do efektywnego stylizowania stron internetowych. Aby skutecznie wykorzystać CSS, warto zwrócić uwagę na dokumentację i uczyć się od najlepszych praktyk, aby unikać takich nieporozumień.

Pytanie 4

W kodzie HTML zamieszczono link do strony internetowej:

<a href="http://google.com">strona Google</a>
Jakie dodatkowe zmiany należy wprowadzić, aby link otwierał się w nowym oknie lub zakładce przeglądarki, dodając do definicji linku odpowiedni atrybut?
A. rel = "next"
B. rel = "external"
C. target = "_parent"
D. target = "_blank"
Atrybuty rel = "next" oraz rel = "external" nie są odpowiednie dla celu otwierania strony w nowym oknie czy zakładce. Atrybut rel służy do określenia relacji między stroną źródłową a docelową, a nie do definiowania sposobu otwierania odnośników. Wartość "next" jest używana w kontekście paginacji, oznaczającej, że dany link prowadzi do następnej strony w serii, co nie ma nic wspólnego z otwieraniem w nowym oknie. Podobnie, "external" jest używane do wskazania, że link prowadzi do zewnętrznego źródła, ale nie definiuje, jak ma być otwierany. Otwieranie odnośników bez odpowiednich atrybutów, które kontrolują sposób ich wyświetlania, może prowadzić do frustracji użytkowników, gdyż są oni zmuszeni do korzystania z przycisków „wstecz” przeglądarki, aby wrócić do poprzedniej strony. Umożliwienie otwierania w nowym oknie może być lepszym rozwiązaniem dla zewnętrznych źródeł, co jest często praktykowane w standardach webowych. Użytkownik powinien mieć kontrolę nad tym, czy chce opuścić obecną stronę, czy też nie. Dlatego kluczowe jest zrozumienie znaczenia i zastosowania atrybutu target w kontekście projektowania stron internetowych oraz odpowiednich standardów, aby poprawić doświadczenia użytkowników.

Pytanie 5

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: right; }
B. aside {float: left; }
C. nav { float: left; } 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. &lt;aside&gt;, potem &lt;section&gt;, a na końcu &lt;nav&gt;, 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 6

W języku JavaScript potrzebne jest odwołanie się do elementu znajdującego się w pierwszym paragrafie danego fragmentu kodu HTML. Można to osiągnąć przy użyciu funkcji

<body>
<p>pierwszy paragraf</p>
<p>drugi paragraf</p>
<p>trzeci paragraf</p>
A. getElement('p')
B. getElementsByClassName('p.1')[0]
C. getElementById('p1')
D. getElementsByTagName('p')[0]
Metoda getElementsByClassName("p.1")[0]; jest niepoprawna, ponieważ jej użycie zakłada, że w dokumencie HTML występuje element z klasą "p.1", a w podanym fragmencie HTML nie ma żadnego elementu, który spełniałby ten warunek. Klasy w HTML definiuje się za pomocą atrybutu class, a nie poprzez dotację z kropką w nazwie. W przypadku użycia getElementById("p1");, ta metoda zakłada, że istnieje element z unikalnym identyfikatorem "p1". W przedstawionym fragmencie również tego identyfikatora nie ma, co czyni tę odpowiedź błędną. Metoda getElement("p"); jest nieprawidłowa, ponieważ takiej metody nie ma w standardowym obiekcie document w JavaScript. Programista, zamiast tego, powinien użyć getElementById lub getElementsByTagName. Użycie getElementsByTagName jest najlepszą praktyką, ponieważ pozwala na selekcję wszystkich elementów danego typu. Często mylące są koncepcje związane z selekcją elementów; kluczowe jest zrozumienie, że metody JavaScript są czułe na typy i struktury dokumentu. Dlatego ważne jest, aby dokładnie wiedzieć, jakie elementy chcemy wybrać i jakie metody są do tego dostępne w standardzie DOM.

Pytanie 7

Która zasada użycia semantycznych znaczników HTML5 jest PRAWDZIWA?

A. <aside> służy do GŁÓWNEJ treści strony
B. <main> może wystąpić tylko RAZ w dokumencie
C. <footer> powinien być na górze, a <header> na dole
D. <nav> jest charakterystyczny dla <article>
Znacznik <main> obejmuje GŁÓWNĄ, unikalną treść strony, dlatego może wystąpić w dokumencie tylko RAZ. Dlatego prawdziwa jest ta zasada.

Pytanie 8

Zaprezentowano rezultat zastosowania CSS oraz odpowiadający mu kod HTML. W jaki sposób trzeba zdefiniować styl, aby uzyskać takie formatowanie?

Ilustracja do pytania
A. #first-letter { font-size: 400%; color: blue; }
B. p.first-letter { font-size: 400%; color: blue; }
C. .first-letter { font-size: 400%; color: blue; }
D. p::first-letter { font-size: 400%; color: blue; }
Wybór innych odpowiedzi niż p::first-letter jest niepoprawny z kilku powodów. Po pierwsze, użycie samego .first-letter odnosi się do elementu z klasą first-letter, co oznaczałoby, że kod HTML musiałby mieć element z przypisaną tą klasą, co nie jest zgodne z przedstawionym kodem. Podobnie, #first-letter wskazywałaby na element z identyfikatorem first-letter, co również wymagałoby odpowiedniej struktury w kodzie HTML. Obie te opcje ignorują fakt, że mamy do czynienia z pseudo-elementem, który specyficznie stylizuje pierwszą literę danego bloku tekstu. Z kolei zapis p.first-letter byłby próbą stylizacji elementów p z klasą first-letter, co jest błędnym zastosowaniem w kontekście potrzeby modyfikacji pierwszej litery. Kluczowym problemem w powyższych odpowiedziach jest niewłaściwe zrozumienie, jak działają pseudo-elementy oraz jak są używane w praktyce. Pseudo-elementy takie jak ::first-letter są bezpośrednio zdefiniowane w specyfikacji CSS i pozwalają na precyzyjne stylizowanie części elementów, co jest istotne w kontekście semantycznego i czystego kodu HTML. W świecie nowoczesnych technologii webowych, zrozumienie, kiedy i jak stosować pseudo-elementy, jest kluczowe dla tworzenia efektywnych i zachwycających wzrok projektów.

Pytanie 9

Który z podanych kodów XHTML sformatuje tekst zgodnie z określonym schematem?

Ilustracja do pytania
A. Odpowiedź D
B. Odpowiedź B
C. Odpowiedź A
D. Odpowiedź C
Poprawna odpowiedź D zawiera poprawne znaczniki XHTML i HTML, które umożliwiają formatowanie tekstu według wzoru. W pierwszym wierszu tekst Ala ma kota używa znacznika b do pogrubienia słowa kota, co jest zgodne ze standardami, ponieważ b jest szeroko stosowanym tagiem HTML do semantycznego pogrubienia tekstu. Następnie użyty jest znacznik br do wstawienia przerwy w linii, co sprawia, że kolejna część tekstu pojawia się w nowej linii, odzwierciedlając układ zaprezentowany na obrazku. W drugim wierszu tekst a kot ma Alę, znacznik i został użyty do pochylania słowa kot, co jest zgodne z praktykami formatowania tekstu, gdzie i oznacza kursywę. Zamknięcie całego tekstu w znacznikach p paragrafu zapewnia również odpowiedni odstęp i formatowanie, co jest zgodne z semantycznym i strukturalnym organizowaniem treści w dokumencie XHTML. Podejście to odzwierciedla dobre praktyki kodowania, w tym stosowanie właściwych znaczników dla odpowiednich stylów oraz zapewnienie kompatybilności z różnymi przeglądarkami.

Pytanie 10

Jaki jest cel wykorzystania znacznika <i> w języku HTML?

A. wstawienia obrazka
B. zmiany kroju pisma na pochylony
C. określenia nagłówka w treści
D. określenia formularza
Znacznik <i> w języku HTML jest używany do oznaczania tekstu, który powinien być wyświetlany w kroju pisma pochyłym. Takie użycie jest zgodne ze standardami HTML, gdzie <i> zwykle wskazuje na tekst, który ma być wyróżniony w kontekście stylistycznym, na przykład w przypadku tytułów książek, nazw gatunków czy terminów technicznych. Z perspektywy semantycznej, HTML5 wprowadza większą elastyczność w definiowaniu znaczenia tekstu, co czyni <i> bardziej konwencjonalnym narzędziem niż w poprzednich wersjach. Warto zaznaczyć, że dla lepszej dostępności i SEO, często zaleca się użycie znacznika <em>, który nie tylko zmienia styl, ale także podkreśla znaczenie tekstu. Przykład zastosowania <i>: <i>„Wojna i pokój”</i> to książka autorstwa Lwa Tołstoja. Z perspektywy użytkowników i wyszukiwarek, ważne jest, aby znać różnice między tymi znacznikami, co pozwala na efektywniejsze tworzenie treści internetowych.

Pytanie 11

Który atrybut znacznika <img> określa lokalizację (ścieżkę) pliku graficznego?

A.
link
B.
href
C.
alt
D.
src
Obraz osadza się znacznikiem <img>, a jego atrybut src (source) wskazuje ścieżkę do pliku graficznego, np. <img src="logo.png" alt="Logo">. Drugi ważny atrybut, alt, podaje tekst alternatywny. Dlatego lokalizację pliku obrazu określa src.

Pytanie 12

Na czym polega walidacja pól formularza?

A. na sprawdzeniu, czy wprowadzone dane spełniają określone reguły
B. na ustaleniu, który użytkownik wprowadził dane
C. na sprawdzeniu, czy użytkownik jest zalogowany
D. na sprawdzeniu, czy istnieje plik PHP odbierający dane
Pozostałe opisy dotyczą czego innego. Sprawdzanie, czy użytkownik jest zalogowany, to uwierzytelnianie/autoryzacja. Ustalanie, kto wprowadził dane, to identyfikacja. Istnienie pliku PHP odbierającego dane to kwestia konfiguracji serwera. Walidacja bada, czy dane spełniają reguły.

Pytanie 13

Podczas przygotowywania grafiki na stronę internetową konieczne jest wycięcie jedynie określonego fragmentu. Jak nazywa się ta operacja?

A. łączenie warstw.
B. lustrzane odbicie obrazu.
C. kadrowanie.
D. zmiana rozmiaru.
Kadrowanie to proces polegający na wycinaniu fragmentu obrazu w celu skupienia uwagi na określonym elemencie lub poprawienia kompozycji. W kontekście grafiki internetowej, kadrowanie jest kluczowe, aby dostosować zdjęcia do wymagań wizualnych strony, zachowując jednocześnie wysoką jakość obrazu. Przykładowo, jeśli tworzymy stronę dla restauracji, możemy wyciąć fragment zdjęcia dania, aby lepiej zaprezentować jego szczegóły. Dobre praktyki w kadrowaniu obejmują stosowanie zasady trzech, która polega na umiejscowieniu kluczowych elementów obrazu w punktach przecięcia linii podziału. Warto również pamiętać o rozdzielczości i proporcjach, aby uniknąć rozmycia lub zniekształcenia obrazu. Kadrowanie jest często używane w różnych formatach wizualnych, takich jak posty w mediach społecznościowych, banery reklamowe czy galerie zdjęć. W ten sposób, odpowiednie kadrowanie przyczynia się do lepszej prezentacji treści oraz poprawia estetykę i przejrzystość strony internetowej.

Pytanie 14

Aby umieścić kod JavaScript bezpośrednio w dokumencie HTML, należy użyć znacznika:

A.
<js>
B.
<script>
C.
<style>
D.
<code>
Pozostałe znaczniki nie uruchomią JavaScriptu. <style> jest przeznaczony na reguły CSS, czyli wygląd strony, a nie na kod. <js> w ogóle nie istnieje w języku HTML. <code> służy jedynie do oznaczenia fragmentu tekstu jako kodu (zwykle czcionką o stałej szerokości) - wyświetla go, ale nie wykonuje. Kod JavaScript osadza się w <script>, dlatego to on jest poprawny.

Pytanie 15

Który kod da: „pogrubiony” pogrubione, „pochylony” kursywą, a „górnym indeksie” w górnym indeksie?

A.
<i>pogrubiony</i> <b>pochylony</b> lub w <sub>górnym indeksie</sub>
B.
<b>pogrubiony <i>pochylony</i></b> lub w <sub>górnym indeksie</sub>
C.
<i>pogrubiony <b>pochylony lub w</i> <sup>górnym indeksie</sup>
D.
<b>pogrubiony</b> <i>pochylony</i> lub w <sup>górnym indeksie</sup>
Każdy efekt ma swój znacznik: pogrubienie to <b>, kursywa <i>, a górny indeks <sup> (np. x<sup>2). Poprawny zapis to <b>pogrubiony</b> <i>pochylony</i> ... <sup>górnym indeksie</sup>. Zapamiętaj: <sup> = superscript (góra), <sub> = subscript (dół).

Pytanie 16

Plik HTML jest w folderze www/html/, a styl.css w www/style/. Jak poprawnie (ścieżką względną) dołączyć arkusz w pliku HTML?

A.
<link rel="stylesheet" href="../style/styl.css">
B.
<link rel="stylesheet" href="styl.css">
C.
<link rel="stylesheet" href="www/style/styl.css">
D.
<link rel="stylesheet" href="style/styl.css">
Pozostałe ścieżki szukają arkusza w złym miejscu. href="styl.css" oczekuje pliku w tym samym folderze co HTML (html/), gdzie go nie ma. href="style/styl.css" szukałby podfolderu style/ wewnątrz html/. href="www/style/styl.css" liczy ścieżkę tak, jakby HTML był w korzeniu. Do celu prowadzi tylko cofnięcie się przez ../style/styl.css.

Pytanie 17

Element

<meta charset="utf-8">
służy do definiowania metadanych witryny internetowej związanych z
A. słowami kluczowymi
B. językiem witryny
C. kodowaniem znaków
D. opisem witryny
Element <meta charset="utf-8"> jest kluczowym fragmentem kodu HTML, który definiuje kodowanie znaków używane na stronie internetowej. Ustawienie kodowania na UTF-8 jest obecnie standardem branżowym, który pozwala na prawidłowe wyświetlanie tekstów w różnych językach, a także obsługę różnorodnych znaków specjalnych. Dzięki temu strona będzie renderować się poprawnie niezależnie od używanego języka, co jest szczególnie istotne w kontekście globalizacji i dostępności treści dla szerokiego grona użytkowników. W praktyce, poprawne kodowanie znaków eliminuje problemy z wyświetlaniem polskich znaków diakrytycznych, takich jak ą, ć, ę, ł czy ź. Warto także zauważyć, że błędne ustawienie kodowania może prowadzić do tzw. "krzaków" w treści, co znacząco obniża jakość prezentacji strony oraz jej użyteczność. Dlatego zaleca się zawsze stosować <meta charset="utf-8"> w nagłówku dokumentu HTML, aby zapewnić pełną kompatybilność i poprawność wyświetlania treści w różnych przeglądarkach i systemach operacyjnych.

Pytanie 18

Która z zasad walidacji strony internetowej jest nieprawidłowa?

A. Tagi, poza samozamykającymi się, funkcjonują do momentu ich wyłączenia znakiem "/", np. ```<p> ..</p>```
B. Jeżeli w poleceniu występuje kilka atrybutów, ich kolejność powinna być uporządkowana alfabetycznie np. ```<img alt="..." src="/.."/>```
C. W tagach nie jest brana pod uwagę różnica między dużymi a małymi literami, np. ```<p>``` i ```<P>``` to ten sam tag.
D. Wyłączanie tagów musi następować w odwrotnej sekwencji do ich włączenia, np. ```<p> ... <big>...</big></p>```
Koncepcje zawarte w niepoprawnych odpowiedziach są oparte na błędnym zrozumieniu zasad działania znaczników HTML. W kontekście wyłączania znaczników, ważne jest, aby pamiętać, że znacznik startowy powinien być zawsze zamknięty odpowiednim znacznikiem końcowym, co oznacza, że struktura dokumentu musi być prawidłowo zagnieżdżona. Zasada dotycząca wyłączania znaczników w odwrotnej kolejności jest nieprawidłowa, ponieważ znaczniki nie są stosowane w taki sposób, a ich zamykanie powinno być zgodne z ich zagnieżdżeniem. Rozumienie tej zasady jest kluczowe dla tworzenia poprawnej struktury dokumentu HTML. Warto również zauważyć, że HTML nie rozróżnia wielkich i małych liter w znacznikach, co jest istotnym uproszczeniem, ale nie oznacza, że można je mieszać w sposób dowolny. Zastosowanie spójnych konwencji nazewnictwa, takich jak używanie małych liter, jest wskazane dla zachowania czytelności kodu. Rozumienie tych zasad jest kluczowe dla efektywnego projektowania stron internetowych oraz dla utrzymania wysokiej jakości kodu. W przypadku, gdy znacznik nie jest poprawnie zamknięty, może to prowadzić do błędów w renderowaniu strony oraz problemów z jej dostępnością. Dlatego kluczowe jest stosowanie się do zasad poprawności kodu i jego semantyki.

Pytanie 19

Jak dołączyć do strony skrypt z pliku przyklad.js?

A.
<script link="przyklad.js"></script>
B.
<link rel="script" href="/przyklad.js">
C.
<script>przyklad.js</script>
D.
<script src="/przyklad.js"></script>
Pozostałe wersje nie zadziałają. <script>przyklad.js</script> potraktuje „przyklad.js” jako KOD do wykonania, a nie ścieżkę do pliku. link="przyklad.js" używa atrybutu, którego <script> nie zna, a <link rel="script"> służy do zasobów typu arkusze CSS, nie skryptów. Plik JS dołącza <script src="/przyklad.js"></script>.

Pytanie 20

W kodzie HTML zdefiniowano formularz, który wysyła dane do pliku formularz.php. Po naciśnięciu przycisku typu submit przeglądarka przechodzi do poniższego adresu:

../formularz.php?imie=Anna&nazwisko=Kowalska
Na podstawie podanego adresu można stwierdzić, że dane do pliku formularz.php zostały przesłane metodą:
A. GET
B. SESSION
C. COOKIE
D. POST
Twoja odpowiedź jest prawidłowa. Dane do pliku formularz.php zostały przesłane metodą GET, co można stwierdzić na podstawie adresu URL, który zawiera parametry (imię=Anna&nazwisko=Kowalska) przekazane po znaku zapytania (?). W metodzie GET, parametry są dołączane do adresu URL i są widoczne w pasku adresu przeglądarki. Jest to uniwersalny sposób przesyłania danych, który jest zgodny ze standardem HTTP i jest szeroko stosowany w praktyce. Metoda GET jest najprostszym sposobem przesyłania danych, ale ze względu na widoczność parametrów w adresie URL, nie jest zalecana do przesyłania ważnych informacji, takich jak hasła. W praktyce, metoda GET jest często stosowana do przekazywania informacji niezbędnych do wygenerowania konkretnej strony, takich jak identyfikatory zasobów lub parametry filtrowania.

Pytanie 21

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

A. ISO
B. WYSIWYG
C. NASK
D. W3C

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W3C (World Wide Web Consortium) to międzynarodowa organizacja zajmująca się rozwojem i standaryzacją technologii sieci WWW - opracowuje i publikuje rekomendacje dotyczące m.in. HTML, CSS, XML czy dostępności (WCAG). Udostępnia też walidatory pozwalające sprawdzić zgodność kodu ze standardem. Dzięki wspólnym standardom strony działają podobnie w różnych przeglądarkach. Dlatego standardy HTML wyznacza W3C.

Pytanie 22

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 class="akapit">akapit4</p>
D. <p>akapit</p>

Brak odpowiedzi na to pytanie.

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

W semantycznym HTML odpowiednikiem tagu <b>, który nie tylko pogrubia tekst, ale również oznacza go jako istotniejszy, jest

A. <mark>
B. <strong>
C. <ins>
D. <em>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <strong> w języku HTML semantycznym służy do oznaczania tekstu, który ma szczególne znaczenie w kontekście treści. Oprócz stylistycznego pogrubienia czcionki, <strong> wskazuje, że dany fragment tekstu jest ważny dla zrozumienia treści dokumentu. Przykładowo, w artykule omawiającym bezpieczeństwo w Internecie, można użyć <strong> do wyróżnienia kluczowych terminów, takich jak 'szyfrowanie' czy 'firewall', co podkreśla ich znaczenie w ochronie danych. Użycie znaczników semantycznych, takich jak <strong>, jest zgodne z najlepszymi praktykami dostępności, co zapewnia lepszą interpretację treści przez technologie asystujące, takie jak czytniki ekranu. Takie podejście poprawia nie tylko nawigację po stronie, ale również SEO, ponieważ wyszukiwarki lepiej rozumieją kontekst i hierarchię treści. Warto również zauważyć, że w przeciwieństwie do <b>, który jedynie zmienia wygląd tekstu, <strong> wnosi dodatkowy sens do struktury dokumentu, co jest szczególnie istotne w kontekście tworzenia witryn internetowych, które są zarówno estetyczne, jak i funkcjonalne.

Pytanie 24

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;
}
Ilustracja do pytania
A. C.
B. B.
C. D.
D. A.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje, Twoja odpowiedź jest prawidłowa. W CSS określono, że znacznik h1 ma być wyświetlany z pochyłą czcionką, co jest osiągane za pomocą właściwości 'font-style: oblique'. Dodatkowo, małe wielkie litery są realizowane przez 'font-variant: small-caps', które zmieniają wszystkie małe litery na wielkie litery, ale z zachowaniem mniejszego rozmiaru. Wreszcie, do wyrównania tekstu do prawej strony służy 'text-align: right'. Wszystko to razem składa się na formatowanie znacznika h1, które zostało zdefiniowane w CSS. To jest dobra praktyka, aby zrozumieć i zapamiętać różne właściwości CSS, ponieważ pozwalają one na bardzo szczegółowe kontrolowanie wyglądu i układu elementów na stronie. Pamiętaj, że CSS jest niezwykle potężnym narzędziem w rękach doświadczonego programisty front-end i pozwala na tworzenie estetycznych, responsywnych i przyjaznych dla użytkownika interfejsów.

Pytanie 25

Która grupa znaczników HTML służy do GRUPOWANIA elementów i budowy struktury dokumentu?

A. <br>, <img>, <hr>
B. <span>, <strong>, <em>
C. <table>, <tr>, <td>
D. <div>, <article>, <header>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Do grupowania elementów i budowy struktury dokumentu służą znaczniki blokowe i semantyczne: <code><span class="code-text">&lt;</span><span class="code-keyword">div</span><span class="code-text">&gt;</span></code> (uniwersalny kontener) oraz <code><span class="code-text">&lt;</span><span class="code-keyword">article</span><span class="code-text">&gt;</span></code> i <code><span class="code-text">&lt;</span><span class="code-keyword">header</span><span class="code-text">&gt;</span></code> (sekcje HTML5). Wyznaczają one układ strony. Dlatego strukturę buduje grupa <code><span class="code-text">&lt;</span><span class="code-variable">div</span><span class="code-text">&gt;</span><span class="code-text">,</span> <span class="code-text">&lt;</span><span class="code-variable">article</span><span class="code-text">&gt;</span><span class="code-text">,</span> <span class="code-text">&lt;</span><span class="code-variable">header</span><span class="code-text">&gt;</span></code>.

Pytanie 26

Przedstawiono fragment HTML, który nie przechodzi poprawnej walidacji. Błąd walidacyjny tego kodu dotyczy

<!DOCTYPE html>
<html>
 <head>
  <title>Test</title>
 </head>
 <body>
  <img src="obraz.gif alt="Obrazek">
  <h1>Rozdział 1</h1>
  <p>To jest tekst paragrafu, ... </p>
  <br>
  <img src="obraz.gif" alt="Obrazek">

 </body>
</html>
A. braku cudzysłowu.
B. powtórzenia nazwy pliku graficznego.
C. niedomknięcia znacznika br.
D. niedomknięcia znacznika img.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest prawidłowa. Błąd walidacji w kodzie HTML na obrazku wynikał z braku cudzysłowu. W HTML atrybuty powinny być zawsze otoczone cudzysłowami, są to pojedyncze (' ') lub podwójne (" "), co jest wymogiem poprawnej walidacji kodu. Atrybuty, którym nie przydzielono wartości, mogą powodować problemy w przeglądarkach, co z kolei prowadzi do błędów walidacji. Dlatego zawsze należy pamiętać o otoczeniu atrybutów cudzysłowami, aby zapewnić poprawne działanie strony internetowej. Prawidłowo zapisany atrybut w tagu HTML powinien wyglądać tak: <img src="obrazek.jpg">. W praktyce niezgodność z tą konwencją może prowadzić do nieprawidłowego wyświetlania strony lub jej elementów. Dlatego zawsze warto zwracać uwagę na poprawność składni podczas pisania kodu HTML.

Pytanie 27

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

A. zainstalowanie na kilku maszynach różnych przeglądarek i przeprowadzenie testu witryny
B. skorzystanie z narzędzia do walidacji kodu HTML
C. testowanie strony w programie Internet Explorer, zakładając, że inne przeglądarki będą kompatybilne
D. użycie emulatora przeglądarek internetowych, np. Browser Sandbox

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Korzystanie z emulatora przeglądarek internetowych, takiego jak Browser Sandbox, to jedna z najskuteczniejszych metod na testowanie działania witryny w różnych przeglądarkach i ich wersjach. Emulatory umożliwiają symulację różnych środowisk przeglądarkowych bez potrzeby fizycznego instalowania wielu aplikacji na różnych urządzeniach. To znacząco przyspiesza proces testowania i pozwala na łatwe przełączanie się między wersjami przeglądarek. Przykładowo, za pomocą emulatora można szybko sprawdzić, jak strona zachowuje się w Chrome, Firefox czy Safari, co jest kluczowe dla zapewnienia spójnego doświadczenia użytkownika. Ponadto, korzystanie z takich narzędzi pozwala na testowanie z różnych systemów operacyjnych, co jest istotne w kontekście różnorodności urządzeń używanych przez użytkowników. Dobrze skonfigurowany emulator nie tylko pozwala na testowanie responsywności witryny, ale także na analizowanie błędów związanych z CSS czy JavaScript, co przekłada się na wyższą jakość końcowego produktu. Zastosowanie emulatorów jest zgodne z najlepszymi praktykami w zakresie tworzenia aplikacji webowych, które powinny być dostępne i funkcjonalne w różnych przeglądarkach.

Pytanie 28

Aby ustawić marginesy wewnętrzne elementu: górny 50px, prawy 20px, dolny 40px, lewy 30px, należy użyć deklaracji CSS:

A.
padding: 30px 20px 40px 50px;
B.
padding: 50px 40px 20px 30px;
C.
padding: 50px 20px 40px 30px;
D.
padding: 20px 40px 30px 50px;

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Skrócony zapis <code><span class="code-variable">padding</span></code> z czterema wartościami przyjmuje je w kolejności zgodnej z ruchem wskazówek zegara: góra, prawo, dół, lewo (TRBL). Dla marginesów górny 50, prawy 20, dolny 40, lewy 30 daje to <code><span class="code-keyword">padding</span><span class="code-text">:</span> <span class="code-number">50</span><span class="code-variable">px</span> <span class="code-number">20</span><span class="code-variable">px</span> <span class="code-number">40</span><span class="code-variable">px</span> <span class="code-number">30</span><span class="code-variable">px</span><span class="code-text">;</span></code>. Wartości rozdziela się spacjami, nie przecinkami. Dlatego poprawna jest ta deklaracja.

Pytanie 29

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 - h10
B. h1 - h8
C. h1 - h4
D. h1 - h6

Brak odpowiedzi na to pytanie.

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

Jakie będzie efektem zastosowanego formatowania CSS dla nagłówka trzeciego stopnia

<style> h3 { background-color: grey; } </style>

<h3 style="background-color: orange;">Rozdział 1.2.2.</h3>

A. kolor tekstu będzie pomarańczowy
B. tło nagłówka będzie w odcieniu szarości
C. tło nagłówka będzie pomarańczowe
D. kolor tekstu będzie szary

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź, że tło będzie pomarańczowe, jest jak najbardziej trafna. W kodzie HTML użyto atrybutu "style" w tagu <h3>, który ma wyższy priorytet niż to, co jest zapisane w sekcji <style>. Wartość background-color to "orange", więc tło nagłówka trzeciego stopnia naprawdę będzie pomarańczowe. Znamy zasady kaskadowych arkuszy stylów, które mówią, że style bezpośrednio przypisane do elementów HTML mają pierwszeństwo. Kiedy chcemy, aby nagłówki miały różne kolory w zależności od tego, gdzie są użyte, inline styles są bardzo przydatne – zwłaszcza w prototypach. Ale z drugiej strony, z mojego doświadczenia, nadmiar inline styles może skomplikować późniejsze zarządzanie kodem, dlatego lepiej trzymać się klas CSS, żeby wszystko było bardziej uporządkowane.

Pytanie 31

Logo platformy CMS noszącej nazwę Joomla! to

Ilustracja do pytania
A. C
B. D
C. A
D. B

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Logo Joomla! jest charakterystyczne z uwagi na swoją kolorystykę i kształt symbolizujący współpracę oraz integrację. Zawiera cztery kolorowe elementy splecione w formie kwiatka lub wiru co często jest interpretowane jako symbol integracji społeczności i otwartości na różnorodność. Joomla! to system zarządzania treścią (CMS) napisany w PHP który wykorzystywany jest do tworzenia stron internetowych blogów i aplikacji internetowych. Jest jednym z najpopularniejszych CMS na świecie dzięki swojej elastyczności modułom oraz dużej społeczności wspierającej rozwój. Joomla! jest wykorzystywany zarówno przez małe przedsiębiorstwa jak i duże organizacje dzięki swojej możliwości skalowania i dostosowywania do indywidualnych potrzeb. Dodatkowo jego open-source'owy charakter pozwala na szerokie dostosowanie kodu do specyficznych wymagań co jest cenione przez programistów i deweloperów. Dobry wybór Joomla! jako CMS może znacząco przyspieszyć proces tworzenia i zarządzania treścią na stronie internetowej oferując jednocześnie wsparcie licznych rozszerzeń i szablonów

Pytanie 32

Jak przeglądarka zaprezentuje kod HTML formularza?

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

Brak odpowiedzi na to pytanie.

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

Pytanie 33

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

A. XHTML 1.1
B. HTML 4.01 Transitional
C. HTML 5
D. HTML 4.01 Strict

Brak odpowiedzi na to pytanie.

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

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

Ilustracja do pytania
A. Akapit 1
B. Akapit 3
C. Akapit 4
D. Akapit 2

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest prawidłowa. Właściwość CSS 'border-radius: 20%;' jest faktycznie zastosowana do drugiego akapitu, co jest widoczne na załączonym obrazie. Akapit ten ma zaokrąglone rogi, co jest efektem działania tej właściwości CSS. Zaokrąglenie rogów elementów HTML jest często stosowaną techniką, która dodaje estetyki i wyrafinowania do projektu strony internetowej. Pozwala to na łamanie monotonii sześciokątnych zmian i dodaje unikalności do ogólnego wyglądu. Dobrą praktyką jest stosowanie 'border-radius' z umiarem, aby nie przesadzić z zaokrągleniem, które może zakłócić spójność całego projektu. Oprócz zaokrąglania rogów, właściwość 'border-radius' pozwala również na tworzenie kształtów eliptycznych czy okrągłych, co potrafi bardzo ciekawie odmienić charakter strony.

Pytanie 35

Kod CSS można włączyć do dokumentu HTML, używając znacznika

A. <meta>
B. <style>
C. <body>
D. <head>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <style> jest prawidłowa, ponieważ ten znacznik HTML jest dedykowany do osadzania kodu CSS wewnątrz dokumentu HTML. Znacznik <style> powinien być umieszczony w sekcji <head> dokumentu, co umożliwia przeglądarkom interpretację stylów przed renderowaniem treści strony. Dzięki temu można definiować różne reguły CSS, które modyfikują wygląd elementów HTML, co jest kluczowe w tworzeniu estetycznych i funkcjonalnych stron internetowych. Przykładowo, można użyć <style> do określenia koloru tła, rozmiaru czcionki czy marginesów. Ważne jest, aby stosować zasady dotyczące kaskadowości, ponieważ style zdefiniowane w <style> mają priorytet nad stylem zewnętrznym, jeśli są tak samo specyficzne. Dodatkowo, korzystanie z <style> jest zgodne z zasadami dobrych praktyk, takich jak unikanie nadmiarowego ładowania zewnętrznych plików CSS w przypadku prostych projekty, co przyspiesza czas ładowania strony.

Pytanie 36

W języku HTML, aby uzyskać następujący efekt formatowania, należy zapisać kod:

pogrubiony pochylony lub w górnym indeksie

A. <i>pogrubiony </i><b>pochylony</b> lub w <sub>górnym indeksie</sub>
B. <b>pogrubiony </b><i>pochylony</i> lub w <sup>górnym indeksie</sup>
C. <i>pogrubiony <b>pochylony lub w </i><sup>górnym indeksie</sup>
D. <b>pogrubiony <i>pochylony</i></b> lub w <sub>górnym indeksie</sub>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to: <b>pogrubiony </b><i>pochylony</i> lub w <sup>górnym indeksie</sup>. Ta odpowiedź prawidłowo wykorzystuje trzy kluczowe tagi HTML do formatowania tekstu: <b>, <i> i <sup>. Tag <b> służy do wyświetlania tekstu w pogrubionym formacie, co pozwala na podkreślenie istotnych fragmentów tekstu. Przykładem może być wyróżnienie tytułów, nagłówków lub kluczowych punktów w treści. Tag <i> jest używany do wyświetlania tekstu w formacie kursywy, co jest często używane do wyróżnienia tytułów książek, filmów, cytowań lub podkreślenia ważnych punktów. Tag <sup> jest używany do wyświetlania napisów jako tekst górnego indeksu, co jest często używane do wskazania numerów stron, przypisów, lub dla oznaczeń matematycznych lub naukowych. Pamiętaj, że prawidłowe użycie tych tagów jest kluczowe dla tworzenia jasnej, czytelnej i profesjonalnie wyglądającej strony internetowej.

Pytanie 37

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

A. src
B. sizes
C. alt
D. border

Brak odpowiedzi na to pytanie.

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

Pytanie 38

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

a[target="_blank"]
{
  color: yellow;
}
A. odnośników, które otwierają się w tej samej karcie
B. każdego linku
C. tekstu akapitu
D. odnośników, które otwierają się w nowej karcie

Brak odpowiedzi na to pytanie.

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

Pytanie 39

Który zapis znacznika hr jest poprawny zgodnie z walidacją HTML5?

A.
</ hr>
B.
</hr?>
C.
<hr>
D.
</ hr />

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
<code><span class="code-text">&lt;</span><span class="code-keyword">hr</span><span class="code-text">&gt;</span></code> to element PUSTY (void), więc poprawny zapis to po prostu <code><span class="code-text">&lt;</span><span class="code-keyword">hr</span><span class="code-text">&gt;</span></code> - bez znacznika zamykającego i bez ukośnika (w HTML5 <code><span class="code-text">&lt;</span><span class="code-keyword">hr</span><span class="code-text">/&gt;</span></code> jest zbędny). Dlatego poprawny jest <code><span class="code-text">&lt;</span><span class="code-keyword">hr</span><span class="code-text">&gt;</span></code>.

Pytanie 40

Aby uzyskać akapit, w którym słowo „zaznaczony” jest wyróżnione znacznikiem <mark>, a słowo „istotny” oznaczone jako ważne <em> - z poprawnym otwarciem i zamknięciem znaczników - należy zastosować kod:

A.
<p>Tekst może być <mark>zaznaczony albo <i>istotny</i> dla autora</mark></p>
B.
<p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny dla autora</p>
C.
<p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>
D.
<p>Tekst może być <mark>zaznaczony albo <em>istotny</em> dla autora</mark></p>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawny kod to <pre class="code-block"><span class="code-text">&lt;</span><span class="code-keyword">p</span><span class="code-text">&gt;</span><span class="code-text">Tekst może być </span><span class="code-text">&lt;</span><span class="code-keyword">mark</span><span class="code-text">&gt;</span><span class="code-text">zaznaczony</span><span class="code-text">&lt;/</span><span class="code-keyword">mark</span><span class="code-text">&gt;</span><span class="code-text"> albo </span><span class="code-text">&lt;</span><span class="code-keyword">em</span><span class="code-text">&gt;</span><span class="code-text">istotny</span><span class="code-text">&lt;/</span><span class="code-keyword">em</span><span class="code-text">&gt;</span><span class="code-text"> dla autora</span><span class="code-text">&lt;/</span><span class="code-keyword">p</span><span class="code-text">&gt;</span></pre>Każdy znacznik obejmuje dokładnie to słowo, którego dotyczy: <code><span class="code-text">&lt;</span><span class="code-keyword">mark</span><span class="code-text">&gt;</span></code> wyróżnia „zaznaczony”, a <code><span class="code-text">&lt;</span><span class="code-keyword">em</span><span class="code-text">&gt;</span></code> oznacza „istotny” jako ważny - i oba są zamknięte. Znaczniki nie zachodzą też na siebie nieprawidłowo. Dlatego ta wersja jest poprawna.