Wyniki egzaminu

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

Egzamin niezdany

Wynik: 0/40 punktów (0,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

W przedstawionym stylu CSS w ramce zdefiniowano klasę uzytkownik. Tekst na stronie będzie wyświetlany czcionką w kolorze niebieskim dla

p.uzytkownik { color: blue; }
A. wszystkich akapitów
B. dowolnych znaczników w sekcji <body>, które mają przypisaną klasę uzytkownik
C. akapitów, którym przypisano klasę uzytkownik
D. wyłącznie znaczników tekstowych takich jak <p>, <h1>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Styl CSS przedstawiony w ramce definiuje regułę, która stosuje kolor tekstu niebieski do wszystkich elementów <p> posiadających klasę uzytkownik. W CSS selektory klasowe są reprezentowane przez kropkę (.), co oznacza, że tylko te elementy, które mają przypisaną daną klasę, zostaną sformatowane zgodnie z regułami stylu. W tym przypadku, ponieważ selektor to p.uzytkownik, dotyczy on tylko paragrafów oznaczonych klasą uzytkownik. To precyzyjne zastosowanie selektorów umożliwia projektantom stron internetowych dokładne dostosowanie wyglądu poszczególnych elementów. Takie podejście zapewnia większą elastyczność w projektowaniu i ułatwia zarządzanie wyglądem strony. Praktyką jest stosowanie klas, aby stylować specyficzne elementy w różny sposób, co zwiększa użyteczność i przejrzystość kodu CSS. Warto zaznaczyć, że używanie selektorów klasowych w ten sposób jest zgodne z zasadą separacji treści od prezentacji, co jest kluczowym aspektem w tworzeniu nowoczesnych i responsywnych stron internetowych.

Pytanie 2

Który zapis znacznika <meta> jest poprawny pod względem użytych atrybutów?

A.
<meta background="blue">
B.
<meta title="Strona dla hobbystów">
C.
<meta name="!DOCTYPE">
D.
<meta name="description" content="...">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <code><span class="code-text">&lt;</span><span class="code-keyword">meta</span><span class="code-text">&gt;</span></code> opisuje stronę parą atrybutów <code><span class="code-variable">name</span></code> i <code><span class="code-variable">content</span></code>, więc poprawny jest <code><span class="code-text">&lt;</span><span class="code-keyword">meta</span> <span class="code-variable">name</span><span class="code-text">=</span><span class="code-string">"description"</span> <span class="code-variable">content</span><span class="code-text">=</span><span class="code-string">"..."</span><span class="code-text">&gt;</span></code> - <code><span class="code-variable">name</span></code> mówi, o jaką informację chodzi, a <code><span class="code-variable">content</span></code> podaje jej treść (tu opis strony dla wyszukiwarek). Zapamiętaj wzorzec: <code><span class="code-text">&lt;</span><span class="code-keyword">meta</span> <span class="code-variable">name</span><span class="code-text">=</span><span class="code-string">"..."</span> <span class="code-variable">content</span><span class="code-text">=</span><span class="code-string">"..."</span><span class="code-text">&gt;</span></code>.

Pytanie 3

Która z wartości tekstowych nie odpowiada podanemu wzorcowi wyrażenia regularnego?

(([A-ZŁŻ][a-ząęóżźćńłś]{2,})(-[A-ZŁŻ][a-ząęóżźćńłś]{2,}))?
A. Kasprowicza
B. Jelenia Góra
C. Nowakowska-Kowalska
D. Kowalski

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 'Jelenia Góra' jest nietrafiona. Wzór wyrażenia regularnego wymaga, żeby ciąg zaczynał się od wielkiej litery, a potem miał przynajmniej dwie małe litery. Dodatkowo, może być tam segment po myślniku z kolejną wielką literą, a na końcu małe litery. No i tutaj problem, bo 'Jelenia Góra' ma spację, a wzór nie lubi takich rzeczy, bo nie rozpoznaje spacji jako separatora. Z mojego doświadczenia w pracy z regexami, ważne jest, żeby takie elementy jak spacje były dokładnie przemyślane, szczególnie przy pracy z danymi. Im lepiej zrozumiesz te zasady, tym łatwiej będzie Ci pracować z różnymi przykładami i sytuacjami przy programowaniu. Także, warto pomyśleć o tym, jak optymalizować wzorce, żeby nasza praca była wydajniejsza i bezbłędna.

Pytanie 4

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

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

Brak odpowiedzi na to pytanie.

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

Jaki format CSS dla akapitu definiuje styl szarej ramki z następującymi cechami?

p {
  padding: 15px;
  border: 2px dotted gray; }
A. linia ciągła; grubość 2 px; marginesy między tekstem a ramką 15 px
B. linia ciągła; grubość 2 px; marginesy poza ramką 15 px
C. linia kropkowa; grubość 2 px; marginesy między tekstem a ramką 15 px
D. linia kreskowa; grubość 2 px; marginesy poza ramką 15 px

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź numer jeden jest poprawna, ponieważ prawidłowo opisuje stylizację akapitu przy użyciu CSS zgodnie z przedstawionym kodem. Właściwość 'border' definiuje styl obramowania elementu. W tym przypadku użyto stylu 'dotted', który oznacza linię kropkowaną, o grubości 2 pikseli i kolorze szarym. Jest to użyteczne w sytuacjach, gdy chcemy wizualnie wyróżnić element, ale w sposób subtelny i nienachalny. Dodatkowo, właściwość 'padding' określa margines wewnętrzny, czyli odstęp między zawartością elementu a jego krawędzią. Zapewnienie marginesu wewnętrznego 15 pikseli pozwala tekstowi oddalić się od krawędzi obramowania, co zwiększa czytelność i estetykę. Praktyczne zastosowanie takich stylizacji można znaleźć w projektowaniu stron internetowych, gdzie często używa się różnych stylów obramowań do organizowania treści. Zgodność z dobrymi praktykami web designu zakłada użycie spójnych i intuicyjnych stylów, co poprawia doświadczenia użytkownika oraz ułatwia nawigację po stronie internetowej. Tego typu formatowanie jest zgodne ze standardami CSS, co czyni kod bardziej przewidywalnym i łatwiejszym w utrzymaniu

Pytanie 6

Jakie jest poprawne zapisanie tagu HTML?

<a href="#hobby">przejdź</a>
A. jest błędny, w atrybucie href powinien być podany adres URL
B. jest błędny, użyto niewłaściwego znaku # w atrybucie href
C. jest poprawny, po kliknięciu w odnośnik strona zostanie przewinięta do elementu o nazwie "hobby"
D. jest prawidłowy, po kliknięciu w odnośnik otworzy się strona pod adresem "hobby"

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W znaczniku HTML a z atrybutem href='#hobby' zastosowano tzw. kotwicę fragmentu strony. Jest to popularna technika używana do bezpośredniego przenoszenia użytkownika do określonej części strony internetowej. Znak hash (#) wskazuje, że link odwołuje się do elementu o identyfikatorze hobby w obrębie tej samej strony. Tego rodzaju odnośniki są szeroko stosowane w długich dokumentach gdzie szybka nawigacja między sekcjami poprawia doświadczenie użytkownika. Aby kod działał poprawnie na stronie musi istnieć element z atrybutem id='hobby'. To działanie jest zgodne ze standardami HTML i jest zalecane w projektowaniu dostępnych i przyjaznych dla użytkownika aplikacji internetowych. Warto także pamiętać o stosowaniu opisowych identyfikatorów co ułatwia czytelność kodu i jego późniejsze utrzymanie. Praktyka ta jest zgodna z najlepszymi praktykami w zakresie użyteczności i dostępności stron internetowych co może również wpłynąć pozytywnie na SEO poprzez poprawę struktury strony.

Pytanie 7

Jakiej informacji NIE umieszcza się w znaczniku <meta>?

A. o typie (wersji) dokumentu
B. o kodowaniu znaków
C. o autorze strony
D. o automatycznym odświeżaniu strony

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Typ (wersję) dokumentu deklaruje się osobnym zapisem <code><span class="code-text">&lt;</span><span class="code-text">!</span><span class="code-variable">DOCTYPE</span><span class="code-text">&gt;</span></code> na początku pliku, a NIE w znaczniku <code><span class="code-text">&lt;</span><span class="code-keyword">meta</span><span class="code-text">&gt;</span></code>. Dlatego w <code><span class="code-text">&lt;</span><span class="code-keyword">meta</span><span class="code-text">&gt;</span></code> nie umieszcza się informacji o typie dokumentu.

Pytanie 8

Zgodnie z zasadami walidacji HTML5, prawidłowy zapis tagu hr to

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znak <hr> jest poprawnym zapisem znacznika poziomej linii w HTML5. Zgodnie z definicją, <hr> jest elementem samodzielnym, co oznacza, że nie wymaga znacznika zamykającego. Jest to zgodne z zasadami HTML5, które wprowadziły uproszczoną składnię dla wielu elementów. W praktyce <hr> jest używany do wizualnego oddzielania sekcji w dokumencie HTML, co poprawia czytelność i estetykę strony. Na przykład, w artykule internetowym można zastosować <hr> między różnymi sekcjami, aby wskazać zmianę tematu lub podział pomiędzy wprowadzeniem a treścią główną. Zgodność z tym standardem nie tylko ułatwia pracę z kodem, ale również zapewnia lepszą kompatybilność z przeglądarkami i narzędziami dostępu. Warto także zwrócić uwagę, że dobrym zwyczajem jest dodawanie atrybutów klasy lub identyfikatora do tego znacznika w celu dalszej personalizacji stylów CSS, co zwiększa elastyczność w projektowaniu graficznym strony.

Pytanie 9

Jak można zmodyfikować nałożone na siebie fragmenty obrazu, nie zmieniając innych elementów?

A. Wykres histogramu
B. Kanał przezroczystości
C. Przycinanie
D. Warstwy

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Warstwy są kluczowym elementem w edycji grafiki komputerowej, umożliwiając precyzyjne zarządzanie różnymi elementami obrazu. Dzięki zastosowaniu warstw, użytkownik może na przykład oddzielić tło od obiektów na pierwszym planie, co pozwala na edytowanie jednego z tych elementów bez wpływu na resztę kompozycji. Zastosowanie warstw jest szczególnie przydatne w programach graficznych, takich jak Adobe Photoshop, GIMP czy CorelDRAW, gdzie umożliwia łatwą manipulację oraz efektywną organizację projektu. Dzięki warstwom można również stosować różne efekty i style, takie jak cienie, przezroczystości czy gradienty, co pozwala na stworzenie bardziej złożonych i interesujących grafik. Warto również zauważyć, że korzystanie z warstw jest zgodne z najlepszymi praktykami w branży, jako że sprzyja to lepszej organizacji pracy oraz ułatwia wprowadzanie zmian w projekcie. Uczy to również umiejętności przydatnych w pracy zespołowej, gdzie różne osoby mogą pracować nad różnymi warstwami równocześnie, co zwiększa efektywność i kreatywność procesu twórczego.

Pytanie 10

Które z wymienionych oprogramowań NIE jest systemem zarządzania treścią (CMS)?

A. Apache
B. Mambo
C. WordPress
D. Joomla

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Apache (Apache HTTP Server) to serwer WWW - oprogramowanie, które odbiera żądania przeglądarek i odsyła im strony; stanowi część infrastruktury, na której działają witryny. Nie służy do zarządzania treścią. Systemy CMS (Content Management System), takie jak WordPress, Joomla! czy Mambo, pozwalają natomiast tworzyć i edytować zawartość strony bez programowania - i często działają właśnie na serwerze Apache. Dlatego to Apache nie jest CMS-em.

Pytanie 11

Selektor CSS a:link {color:red} w arkuszach stylów nazywanych kaskadowymi określa

A. pseudoklasę.
B. pseudoelement.
C. klasę.
D. identyfikator.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Pseudoklasa CSS to specjalny rodzaj selektora, który pozwala na stylizację elementów na podstawie ich stanu lub kontekstu w dokumencie HTML. Zapis 'a:link' wskazuje, że stylizacja dotyczy linków, które jeszcze nie zostały odwiedzone przez użytkownika. Przykładowo, w tym przypadku 'color:red' ustawia kolor tekstu linku na czerwony. Użycie pseudoklas jest zgodne z dobrymi praktykami, ponieważ pozwala na tworzenie bardziej dynamicznych i responsywnych interfejsów użytkownika, poprawiając jednocześnie doświadczenia użytkowników. Warto również zaznaczyć, że w CSS istnieją inne pseudoklasy, takie jak ':hover' czy ':active', które umożliwiają stylizację elementów w różnych interakcjach z użytkownikiem. Dzięki nim możemy na przykład zmieniać kolor linku, gdy użytkownik na niego najedzie myszką, co zwiększa przejrzystość i użyteczność strony. Używanie pseudoklas jest nie tylko praktyczne, ale także zalecane w dokumentacji CSS, co przyczynia się do lepszego zarządzania i organizacji kodu.

Pytanie 12

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

A. symboli matematycznych
B. specjalnych znaków dla języka kodowania strony
C. znaków zarezerwowanych dla języka opisu strony
D. polskich znaków, takich jak: ś, ć, ń, ó, ą

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kodowanie w standardzie ISO-8859-2, zwane również Latin-2, zostało zaprojektowane, aby wspierać wyświetlanie znaków z alfabetów używanych w Europie Środkowo-Wschodniej. Jest to szczególnie istotne w kontekście języka polskiego, który wymaga specyficznych znaków diakrytycznych, takich jak ś, ć, ń, ó oraz ą. Standard ten obejmuje 256 znaków, z czego pierwsze 128 jest zgodne z ASCII, natomiast pozostałe 128 to znaki specyficzne dla danego języka. Dzięki temu, w aplikacjach internetowych oraz w systemach operacyjnych, możliwe jest poprawne wyświetlanie tekstów w języku polskim, co wpływa na jakość komunikacji i użyteczność treści. Przykładowo, w dokumentach HTML, użycie deklaracji charset='ISO-8859-2' zapewnia, że przeglądarki internetowe prawidłowo interpretują znaki, co jest kluczowe dla zachowania czytelności i poprawności tekstu. Zgodność z tym standardem jest także istotna w kontekście wymiany danych między różnymi systemami, aby uniknąć problemów związanych z kodowaniem i dekodowaniem tekstu.

Pytanie 13

Poprawny zapis znacznika , za pomocą którego można umieścić na stronie internetowej obraz rys.jpg przeskalowany do szerokości 120 px i wysokości 80 px z tekstem alternatywnym "krajobraz" to

A. <img src="rys.jpg" width="120px" height="80px" alt="krajobraz">
B. <img href="rys.jpg" height="120px" width="80px" info="krajobraz">
C. <img src="rys.jpg" height="120px" width="80px" info="krajobraz">
D. <img image="rys.jpg" width="120px" height="80px" alt="krajobraz">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <img src="rys.jpg" width="120px" height="80px" alt="krajobraz"> jest na pewno dobra! Używasz fajnego atrybutu 'src' do wskazania, skąd bierzesz obrazek, co jest super ważne. Atrybuty 'width' i 'height' też są dobrze ustawione, bo określają, jak duży ma być obrazek na stronie. To naprawdę przydaje się, zwłaszcza jak robimy responsywne strony. A ten 'alt', to świetny pomysł – daje tekst alternatywny, co bardzo pomaga osobom, które korzystają z czytników ekranu. Bez tego mogą nie wiedzieć, co jest na obrazku, a to jest spoko, bo dba o dostępność. Co do pikseli, używasz ich standardowo, ale pomyśl, że w CSS można też iść w procenty czy jednostki względne, żeby było jeszcze elastyczniej. W sumie, gdybyś chciał, mógłbyś bawić się CSS-em do stylizacji obrazów tła, co też sprawia, że wszystko lepiej się dopasowuje do różnych ekranów.

Pytanie 14

Który atrybut pola <input> ogranicza maksymalną liczbę znaków, jaką można w nim wpisać?

A. maxlength
B. readonly
C. name
D. value

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut <code><span class="code-variable">maxlength</span></code> ogranicza maksymalną liczbę znaków, jaką użytkownik może wpisać w pole tekstowe, np. <code><span class="code-text">&lt;</span><span class="code-keyword">input</span> <span class="code-variable">type</span><span class="code-text">=</span><span class="code-string">"text"</span> <span class="code-variable">maxlength</span><span class="code-text">=</span><span class="code-string">"10"</span><span class="code-text">&gt;</span></code> pozwoli wprowadzić najwyżej 10 znaków. Przydaje się przy polach o ustalonej długości, takich jak kod pocztowy czy PESEL. Dlatego limit znaków ustala <code><span class="code-variable">maxlength</span></code>.

Pytanie 15

Aby dołączyć kaskadowy arkusz stylów zapisany w zewnętrznym pliku, należy użyć następującego fragmentu kodu HTML:

A.
<div id="styl.css" relation="css">
B.
<link rel="stylesheet" type="text/css" href="styl.css">
C.
<meta charset="styl.css">
D.
<option value="styl.css" type="text/css">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawny jest znacznik <code><span class="code-text">&lt;</span><span class="code-keyword">link</span> <span class="code-variable">rel</span><span class="code-text">=</span><span class="code-string">"stylesheet"</span> <span class="code-variable">type</span><span class="code-text">=</span><span class="code-string">"text/css"</span> <span class="code-variable">href</span><span class="code-text">=</span><span class="code-string">"styl.css"</span><span class="code-text">&gt;</span></code>. Zewnętrzny arkusz stylów to osobny plik <code><span class="code-text">.css</span></code>, który dołączasz do strony w sekcji <code><span class="code-text">&lt;</span><span class="code-keyword">head</span><span class="code-text">&gt;</span></code> dokumentu HTML właśnie znacznikiem <code><span class="code-text">&lt;</span><span class="code-keyword">link</span><span class="code-text">&gt;</span></code>. Atrybut <code><span class="code-variable">rel</span><span class="code-text">=</span><span class="code-string">"stylesheet"</span></code> mówi przeglądarce, że powiązany plik to arkusz stylów, <code><span class="code-variable">href</span></code> wskazuje jego ścieżkę, a <code><span class="code-variable">type</span><span class="code-text">=</span><span class="code-string">"text/css"</span></code> (opcjonalny w HTML5) określa typ zawartości. Taki sposób dołączania CSS oddziela wygląd od treści i pozwala użyć jednego arkusza na wielu podstronach.

Pytanie 16

Które reguły CSS poprawnie ustawiają dla akapitu czcionkę Arial, rozmiar 16 pt i pochylenie (kursywę)?

A.
p { font-style: Arial; font-size: 16pt; font-variant: normal; }
B.
p { font-style: Arial; size: 16px; font-weight: normal; }
C.
p { font-family: Arial; font-size: 16pt; font-style: italic; }
D.
p { font-family: Arial; font-size: 16px; font-variant: normal; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wygląd czcionki opisują w CSS trzy osobne właściwości: <code><span class="code-variable">font-family</span></code> ustala krój (np. <code><span class="code-variable">Arial</span></code>), <code><span class="code-variable">font-size</span></code> - rozmiar (tu <code><span class="code-number">16</span><span class="code-variable">pt</span></code>, bo zadano punkty, a nie piksele), a <code><span class="code-keyword">font-style</span><span class="code-text">:</span> <span class="code-variable">italic</span></code> włącza pochylenie. Razem daje to <code><span class="code-variable">p</span> <span class="code-text">{</span> <span class="code-keyword">font-family</span><span class="code-text">:</span> <span class="code-variable">Arial</span><span class="code-text">;</span> <span class="code-keyword">font-size</span><span class="code-text">:</span> <span class="code-number">16</span><span class="code-variable">pt</span><span class="code-text">;</span> <span class="code-keyword">font-style</span><span class="code-text">:</span> <span class="code-variable">italic</span><span class="code-text">;</span> <span class="code-text">}</span></code>. Warto pamiętać, że <code><span class="code-variable">font-style</span></code> odpowiada za kursywę, a <code><span class="code-variable">font-weight</span></code> za grubość - to częste źródło pomyłek. Dlatego poprawny jest ten zestaw reguł.

Pytanie 17

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. aside {float: left; }
C. nav { float: right; }
D. nav { float: right; } section { float: right; }

Brak odpowiedzi na to pytanie.

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

Stronę internetową zapisano w języku XHTML. Który z kodów stanowi implementację przedstawionego fragmentu strony, jeżeli żadne style CSS nie zostały zdefiniowane?

Początki HTML

W 1980 fizyk Tim Berners-Lee, pracownik CERN,
stworzył prototyp hipertekstowego systemu informacyjnego – ENQUIRE


A.
<b>Początki HTML</b>
<p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył
<b>prototyp hipertekstowego systemu informacyjnego – <i>ENQUIRE</i></b></p>
B.
<h1>Początki HTML</h1>
<p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył
<b>prototyp hipertekstowego systemu informacyjnego – <i>ENQUIRE</i></b></p>
C.
<b>Początki HTML</b>
<p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<hr /> stworzył
<b>prototyp hipertekstowego systemu informacyjnego – <i>ENQUIRE</i></b></p>
D.
<h1>Początki HTML</h1>
<p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył
<i>prototyp hipertekstowego systemu informacyjnego – <b>ENQUIRE</b></i></p>
A. D.
B. C.
C. A.
D. B.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest poprawna. Wybrałeś opcję B, która przedstawiała poprawną implementację fragmentu strony internetowej napisanej w języku XHTML. W tym fragmencie wykorzystane zostały standardowe tagi XHTML, takie jak <h1> do oznaczenia nagłówka pierwszego poziomu oraz <p> do definiowania akapitu. Dodatkowo w tekście użyte zostały tagi <b> i <i> do odpowiednio pogrubienia i kursywy, co podkreśla ważność wybranych fragmentów tekstu. Tag <br /> pozwala na stworzenie przerwy wiersza, co jest szczególnie użyteczne w przypadku długich akapitów tekstu. Pamiętaj, że XHTML jest bardziej rygorystyczną wersją HTML i wymaga zawsze domknięcia tagów. Wiedza na ten temat jest niezwykle ważna podczas tworzenia stron internetowych, a standardy i dobre praktyki branżowe pomagają w utrzymaniu kodu w czytelnej i zrozumiałej formie.

Pytanie 19

Określ właściwą sekwencję stylów CSS, biorąc pod uwagę ich priorytet w formatowaniu elementów strony WWW?

A. Styl lokalny, Styl wewnętrzny, Styl zewnętrzny
B. Styl zewnętrzny, Wydzielone bloki, Styl lokalny
C. Styl wewnętrzny, Styl zewnętrzny, Rozciąganie stylu
D. Rozciąganie stylu, Styl zewnętrzny, Styl lokalny

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wskazana odpowiedź, czyli Lokalny, Wewnętrzny, Zewnętrzny, jest zgodna z zasadami kaskadowego stylu arkuszy CSS. Istotą kaskadowości jest to, że style są stosowane według określonej hierarchii. Style lokalne (wbudowane) mają najwyższy priorytet, co oznacza, że jeśli na danym elemencie zastosowano styl lokalny, to zdominuje on wszelkie inne style. Przykład użycia stylu lokalnego to nadanie koloru tła dla konkretnego przycisku poprzez atrybut 'style': <button style='background-color: red;'>Przycisk</button>. W przypadku, gdy nie ma stylu lokalnego, przetwarzany jest styl wewnętrzny, który można zdefiniować w sekcji <style> w nagłówku dokumentu HTML. Na przykład: <style>p { color: blue; }</style> sprawi, że wszystkie akapity będą miały niebieski kolor. Dopiero na końcu brane są pod uwagę style zewnętrzne, które są definiowane w osobnych plikach CSS, na przykład: <link rel='stylesheet' href='style.css'>. Dlatego znajomość tej hierarchii jest kluczowa dla skutecznego tworzenia stylów, co przekłada się na lepsze zarządzanie wyglądem strony oraz unikanie konfliktów stylów. Warto również pamiętać o zasadzie „specyficzności”, która dodatkowo komplikuje temat, ponieważ style mogą mieć różny priorytet w zależności od ich specyfikacji.

Pytanie 20

Który z przedstawionych poniżej fragmentów kodu HTML5 zostanie uznany przez walidator HTML za niepoprawny?

A. <p class= "stl" style= "color: #F00 ">tekst</p>
B. <p class= "stl" id= "a">tekst</p>
C. <p class= "stl"><style>.a{color:#F00}</style>tekst</p>
D. <p class= "stl">tekst</p>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź, która została wskazana, to <p class= "stl"><style>.a{color:#F00}</style>tekst</p>. W kontekście HTML5, element <style> jest przeznaczony do umieszczania w nagłówkach dokumentu (<head>), a nie wewnątrz elementów blokowych, takich jak <p>. Umieszczanie tagu <style> w tagu <p> narusza zasady dotyczące struktury dokumentu HTML. Walidatory HTML5, które sprawdzają zgodność kodu z obowiązującymi standardami W3C, uznają takie umieszczenie za błąd, ponieważ stylizacja powinna być oddzielona od treści. Zgodnie z najlepszymi praktykami, CSS powinno być zaimplementowane w plikach zewnętrznych lub sekcjach <head>, co ułatwia utrzymanie i modyfikację kodu. Przykładem poprawnej struktury może być: <head><style>.a{color:#F00}</style></head><body><p class="stl">tekst</p></body>. To zapewnia przejrzystość i zgodność z zasadami HTML5, co jest kluczowe dla SEO oraz dostępności strony.

Pytanie 21

Jaką barwę przedstawia kolor zapisany w modelu RGB(0, 0, 255)?

A. czerwoną
B. niebieską
C. żółtą
D. zieloną

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W modelu RGB barwę tworzą składowe czerwona (R), zielona (G) i niebieska (B) o wartościach 0-255. Zapis RGB(0, 0, 255) oznacza maksymalną składową niebieską i zerowe pozostałe, czyli czysty niebieski. Dlatego RGB(0, 0, 255) to barwa niebieska.

Pytanie 22

Którą wartością można zapisać kolor BIAŁY?

A.
rgb(255, 255, 255)
B.
#255255
C.
#000000
D.
rgb(FF, FF, FF)

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Biały powstaje z maksymalnych wartości wszystkich trzech składowych: <code><span class="code-function">rgb</span><span class="code-text">(</span><span class="code-number">255</span><span class="code-text">,</span> <span class="code-number">255</span><span class="code-text">,</span> <span class="code-number">255</span><span class="code-text">)</span></code> (lub szesnastkowo <code><span class="code-text">#</span><span class="code-variable">FFFFFF</span></code>). Dlatego biały to <code><span class="code-function">rgb</span><span class="code-text">(</span><span class="code-number">255</span><span class="code-text">,</span> <span class="code-number">255</span><span class="code-text">,</span> <span class="code-number">255</span><span class="code-text">)</span></code>.

Pytanie 23

W zaprezentowanej części formularza HTML znajduje się pole, które można określić jako?

<input type="password" name="pole">
A. domyślnie posiada wpisany tekst "pole".
B. wyświetla wprowadzone znaki.
C. pozwala na wprowadzanie jedynie wartości liczbowych.
D. ukrywa wprowadzone znaki.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest właściwa. W tym fragmencie formularza HTML mamy pole <i>input</i>, które wprowadzone znaki ukrywa. To dzięki atrybutowi 'type="password"' w elemencie <i>input</i>. W HTML atrybut 'type' mówi nam, jaki typ danych użytkownik może wprowadzić do tego pola. Jak masz 'password', to wpisane rzeczy są zasłonięte symbolami, jak np. gwiazdki czy kropki, żeby chronić dane użytkownika. To standardowa sprawa, szczególnie dla haseł i innych ważnych informacji, żeby nikt ich nie zobaczył. Pamiętaj, że takie pola powinny być zawsze dobrze oznaczone i zabezpieczone, to ważne dla bezpieczeństwa.

Pytanie 24

Aby umożliwić wybór kilku opcji jednocześnie w rozwijanej liście formularza HTML, należy dodać atrybut do znacznika select

Ilustracja do pytania
A. disabled
B. multiple
C. value
D. size

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut multiple w znaczniku select w HTML to super sprawa, bo dzięki niemu można zaznaczyć więcej niż jedną opcję z listy rozwijalnej. To się przydaje, jak ktoś musi wybrać kilka elementów w formularzu. Jak dodasz atrybut multiple, to przeglądarka pokazuje to jako pole do wyboru, gdzie można klikać na kilka wartości za pomocą klawiszy Ctrl albo Shift. Fajnie, że ten atrybut nie wymaga żadnych dodatkowych wartości, wystarczy, że go wrzucisz do znacznika select. To zgodne z dobrymi praktykami UX, bo pozwala na większą elastyczność i interaktywność formularzy. Co więcej, nie trzeba być programistycznym guru, żeby to wdrożyć, więc każdy może to zrobić. Używa się go w różnych aplikacjach webowych, zwłaszcza tam, gdzie zbieranie danych od użytkowników w prosty i przejrzysty sposób jest ważne.

Pytanie 25

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

A. <b> oraz <i>
B. <i> oraz <mark>
C. <b> oraz <u>
D. <u> oraz <sup>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik HTML <strong> jest używany do oznaczenia tekstu, który jest ważny, podczas gdy <em> służy do podkreślenia, że tekst powinien być akcentowany w kontekście. Odpowiednikami tych znaczników, pod względem formatowania, są <b> oraz <i>. Znacznik <b> stosuje się do wyróżnienia tekstu, nadając mu pogrubienie, co zazwyczaj oznacza, że tekst jest istotny. Z kolei <i> używamy do kursywy, co również może wskazywać na akcentowanie lub wyróżnienie pewnych słów, jednak w sposób bardziej subtelny niż przy pomocy pogrubienia. W praktyce, stosując <strong> oraz <em>, dbamy o to, aby nasza treść była bardziej dostępna dla użytkowników, zwłaszcza dla osób korzystających z technologii wspomagających, takich jak czytniki ekranu. Stosowanie znaczników semantycznych zgodnie z dobrymi praktykami zapewnia lepszą interpretację treści przez wyszukiwarki, co może wpływać na SEO. Warto również pamiętać, że pomimo że <b> i <i> mają swoje zastosowania, znacznie lepiej jest używać <strong> i <em> w kontekście semantycznym, aby poprawić zrozumienie treści przez maszyny i użytkowników.

Pytanie 26

Na przedstawionej grafice znajduje się struktura sekcji dla witryny internetowej. Przyjmując, że blok5 nie ma przypisanej szerokości, a bloki są określone w dokumencie HTML w kolejności ich numeracji, jak powinno wyglądać zdefiniowanie opływania?

Ilustracja do pytania
A. bloki 1, 2, 3, 4 float: right; blok 5 clear: right;
B. bloki 1, 2, 4 float: left; blok 3, 5 float: right;
C. blok 1 float: left; bloki 2, 4 float: center; blok 3 float: right; blok 5 clear: both;
D. bloki 1, 2, 4 float: left; blok 3 float: right; blok 5 clear: both;

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 3 jest poprawna, ponieważ odpowiada układowi bloków na stronie i ich pozycjonowaniu. Użycie właściwości CSS float: left; dla bloków 1, 2 i 4 pozwala im ułożyć się w linii po lewej stronie. Blok 3 z float: right; zostanie umieszczony po prawej stronie, co jest zgodne z przedstawionym układem. Blok 5 natomiast, znajdujący się na dole i rozciągający się na całą szerokość, wymaga użycia clear: both;, aby nie opływały go inne bloki i mógł zająć całą dostępną przestrzeń poziomą. Takie zastosowanie float i clear jest zgodne z najlepszymi praktykami w projektowaniu układów stron internetowych. Stylowanie za pomocą float jest powszechnie używane w CSS do tworzenia dynamicznych układów, a właściwość clear zapewnia, że element nie będzie opływany przez poprzedzające elementy pływające, co jest szczególnie istotne dla elementów podsumowujących lub końcowych na stronie.

Pytanie 27

Dla strony internetowej stworzono styl, który będzie stosowany tylko do wybranych znaczników, takich jak niektóre nagłówki oraz kilka akapitów. W tej sytuacji, aby przypisać styl do konkretnych znaczników, najodpowiedniejsze będzie użycie

Ilustracja do pytania
A. pseudoklasy
B. klasy
C. selektora akapitu
D. identyfikatora

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Użycie klasy w CSS jest najlepszym rozwiązaniem, gdy chcemy zastosować ten sam styl do wielu elementów HTML, ale nie do wszystkich. Klasy w CSS są definiowane za pomocą kropki przed nazwą klasy, np. .nazwa-klasy, i mogą być przypisane do dowolnego elementu HTML za pomocą atrybutu class. Dzięki temu możemy elastycznie i efektywnie zarządzać stylami na stronie internetowej. Klasy są bardzo przydatne w dużych projektach, gdzie powtarzalność i spójność stylów są kluczowe. Pozwalają także na ponowne wykorzystanie tych samych stylów w różnych miejscach projektu bez konieczności kopiowania kodu CSS. Użycie klas zwiększa czytelność i organizację kodu, co jest zgodne z najlepszymi praktykami programowania. Stosowanie klas jest także zalecane w kontekście frameworków CSS, takich jak Bootstrap, które intensywnie wykorzystują klasy do definiowania komponentów i układów. Przykład zastosowania klasy: .align-right { text-align: right; } można przypisać do różnych nagłówków czy akapitów, które mają być wyrównane do prawej.

Pytanie 28

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

.../formularz.php?imie=Anna&nazwisko=Kowalska
A. COOKIE
B. GET
C. SESSION
D. POST

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Metoda GET w HTTP jest używana do przesyłania danych w adresie URL. Dane są dołączane jako parametry zapytania po znaku zapytania w formacie klucz=wartość. Przykład w pytaniu pokazuje, że dane imie=Anna oraz nazwisko=Kowalska są przesyłane jako część adresu URL do formularz.php. Jest to typowe dla metody GET, która umożliwia łatwe przesyłanie danych przez przeglądarkę i ich późniejsze przetwarzanie po stronie serwera. Metoda GET jest często stosowana w przypadku, gdy dane nie zawierają poufnych informacji, a ich objętość jest niewielka. Standard HTTP rekomenduje używanie metody GET do pobierania danych i niepowinno być używane do przesyłania lub modyfikowania danych. Dokumentacja W3C wskazuje, że GET jest metodą idempotentną, co oznacza, że wielokrotne wykonanie tego samego zapytania nie spowoduje dodatkowych efektów ubocznych. W praktyce GET jest używana np. w zapytaniach wyszukiwania w witrynach, gdzie parametry wyszukiwania są umieszczane w URL.

Pytanie 29

Na ilustracji pokazano strukturę bloków witryny internetowej. Który z elementów stylu strony jest zgodny z podanym układem? Dla uproszczenia pominięto cechy koloru tła, wysokości oraz czcionki)

Ilustracja do pytania
A. #pierwszy {float:left; width:30%;}#drugi {float:left; width:70%;}#trzeci {float:left; width:70%;}#czwarty {clear:both; }
B. #pierwszy{float:left; width:30%; }#drugi {clear:both; width:70%; }#trzeci {clear:both; width:70%; }#czwarty {float:left; width:100%; }
C. #pierwszy { width: 30%; }#drugi { width: 70%; }#trzeci { width: 70%; }#czwarty { width: 100%; }
D. #pierwszy {float:left; width:30%; }#drugi {clear:both; width:70%; }#trzeci {float:left; width:70%; }#czwarty {clear:both; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź numer 2 jest prawidłowa, ponieważ doskonale odpowiada układowi bloków przedstawionych na rysunku. Zastosowanie właściwości CSS float:left dla wszystkich trzech pierwszych bloków pozwala na ich ułożenie w jednym rzędzie w ramach dostępnej szerokości. Pierwszy blok zajmuje 30 procent, natomiast drugi i trzeci po 70 procent szerokości, co jest zgodne z przedstawionym układem. Dodatkowo, zastosowanie clear:both dla czwartego bloku spowoduje, że rozpocznie on nowy wiersz i zajmie całą szerokość dostępną poniżej poprzednich elementów. Takie rozwiązanie jest efektywne w tworzeniu responsywnych i elastycznych układów stron internetowych. Wykorzystanie float jest powszechnie stosowane w projektowaniu front-end, choć w nowych projektach coraz częściej zastępowane przez flexbox i grid. Warto zrozumieć działanie float i clear, ponieważ pozwalają na manipulację układem elementów na stronie, co jest kluczowe w tworzeniu czytelnych i estetycznych interfejsów użytkownika. Zrozumienie tych koncepcji jest niezbędne dla profesjonalistów zajmujących się tworzeniem stron internetowych.

Pytanie 30

Na czym polega walidacja strony internetowej?

A. na sprawdzeniu jej w celu wykrycia i usunięcia błędów
B. na reklamie strony
C. na udostępnieniu jej w Internecie
D. na działaniach zwiększających liczbę odwiedzin

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Walidacja strony internetowej to sprawdzenie jej kodu (np. HTML, CSS) pod kątem zgodności ze standardami W3C, w celu wykrycia i usunięcia błędów. Poprawny kod lepiej wyświetla się w różnych przeglądarkach. Dlatego walidacja to wykrywanie i usuwanie błędów.

Pytanie 31

W CSS określono styl dla stopki. Jak można zastosować to formatowanie do bloku oznaczonego znacznikiem div?

#stopka { ... }
A. <div id = "stopka"> …
B. <div title = "stopka"> …
C. <div class = "stopka"> …
D. <div "stopka"> …

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawnie – zapis #stopka w CSS oznacza selektor identyfikatora (ID), więc w HTML musimy użyć atrybutu id="stopka" dokładnie z tą samą nazwą. W CSS znak # wskazuje, że styl jest przypisany do elementu o konkretnym identyfikatorze, a nie do klasy czy czegokolwiek innego. Dlatego jedynym prawidłowym sposobem podpięcia tego stylu do bloku div jest konstrukcja: <div id="stopka">…</div>. W praktyce wygląda to tak: CSS: #stopka { background-color: #333; color: white; padding: 20px; } HTML: <div id="stopka">To jest stopka strony</div> Przeglądarka łączy selektor #stopka z elementem, który ma id="stopka" i nakłada na niego zdefiniowane właściwości. Identyfikator powinien być unikalny w obrębie całego dokumentu HTML, co jest zgodne z zaleceniami W3C i ogólnie przyjętą dobrą praktyką. Do jednego ID odwołujemy się w CSS przez #, a w JavaScript przez document.getElementById("stopka"). Moim zdaniem warto zapamiętać prostą zasadę: # w CSS = id w HTML, kropka (.) w CSS = class w HTML. Gdy projektujesz layout strony, zwykle elementy typu nagłówek, stopka, główna nawigacja mają unikalne ID, bo występują raz na stronie. Natomiast powtarzalne elementy (np. kafelki z produktami) dostają klasy. Dzięki temu kod jest czytelniejszy, łatwiej się go utrzymuje i unikamy dziwnych konfliktów stylów. Dobrą praktyką jest też używanie opisowych nazw, np. id="stopka" zamiast skrótów typu id="s1", bo po miesiącu nikt nie pamięta, co to znaczyło.

Pytanie 32

W przedstawionej definicji stylu CSS, powtarzanie dotyczy

body {
  background-image: url("rysunek.gif");
  background-repeat: repeat-y;
}
A. tła każdego ze znaczników akapitu.
B. rysunku umieszczonego w tle strony w poziomie.
C. rysunku umieszczonego w tle strony w pionie.
D. rysunku umieszczonego znacznikiem img.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest na miejscu. To, co mówi 'background-repeat: repeat-y;' w CSS, oznacza, że tło będzie się powtarzać w pionie. Super sprawa, jeśli chcesz, by obraz w tle pokrywał całą wysokość elementu, niezależnie od tego, jak duży on jest. Używa się tego często w projektowaniu stron, żeby stworzyć fajne efekty wizualne, jak na przykład tło, które działa w pasku nawigacyjnym. Warto pamiętać, że powtarzanie tła to zaledwie jedna z wielu opcji, jakie mamy w CSS. Możesz również ustawiać pozycję tła czy jego rozmiar, żeby wszystko wyglądało tak, jak chcesz.

Pytanie 33

Jaki jest efekt działania programu w JavaScript?

var osoba = prompt("Podaj imię", "Adam");
A. przypisanie do zmiennej osoba wartości "Adam"
B. uzyskanie z formularza wyświetlonego na stronie HTML imienia "Adam"
C. otwarcie okna z polem do edycji, w którym znajduje się domyślny tekst "Adam"
D. pojawi się okno z pustym polem do edycji

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Funkcja prompt w JavaScript jest używana do wyświetlania okna dialogowego z polem edycyjnym pozwalającym użytkownikowi na wprowadzenie danych. W tym przypadku funkcja prompt przyjmuje dwa argumenty: pierwszy to komunikat wyświetlany użytkownikowi, a drugi to domyślna wartość w polu tekstowym. Kod var osoba = prompt('Podaj imię' 'Adam') otwiera okno dialogowe z tekstem Podaj imię i domyślnie wpisanym w polu tekstowym imieniem Adam. Domyślna wartość jest przydatna w sytuacjach gdzie chcemy zasugerować użytkownikowi pewne dane które mogą być dla niego odpowiednie lub często używane. Jest to wygodne rozwiązanie w aplikacjach internetowych pozwalające na szybkie i intuicyjne wprowadzanie danych przez użytkownika. Zastosowanie prompt jest przykładem interakcji między użytkownikiem a stroną internetową co jest kluczowym elementem dynamicznych aplikacji webowych. Ważne jest jednak by pamiętać że funkcja prompt może być blokowana w niektórych przeglądarkach dlatego jej użycie powinno być dobrze przemyślane i ewentualnie zastąpione bardziej nowoczesnymi rozwiązaniami takimi jak formularze HTML z odpowiednimi atrybutami i stylizacjami.

Pytanie 34

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

Duży tekst zwykły tekst

A. <p><strike>Duży tekst</strike> zwykły tekst</p>
B. <p><strike>Duży tekst zwykły tekst</p>
C. <p><big>Duży tekst</p> zwykły tekst
D. <p><big>Duży tekst</big> zwykły tekst</p>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <p><big>Duży tekst</big> zwykły tekst</p> jest poprawna, ponieważ wykorzystuje znacznik <big>, który jest zgodny z semantyką HTML i odpowiednio formatuje tekst, zwiększając jego rozmiar. Warto zauważyć, że użycie znacznika <big> jest zgodne z praktykami, które rekomendują wykorzystanie odpowiednich znaczników do modelowania treści w dokumentach HTML. Taki zabieg nie tylko pozwala na lepszą prezentację tekstu, ale także ułatwia dostępność strony, co jest istotne w kontekście WCAG (Web Content Accessibility Guidelines). Przykładem zastosowania może być sytuacja, w której chcemy wyróżnić istotne informacje w tekście, np. nagłówki sekcji lub kluczowe dane. Zastosowanie <big> w tym kontekście zwiększa czytelność oraz zwraca uwagę użytkowników, co jest szczególnie ważne w długich dokumentach. Warto również pamiętać, że stosowanie znaczników odpowiadających ich przeznaczeniu wspiera SEO, gdyż wyszukiwarki lepiej interpretują strukturę treści. Z tego powodu, używanie semantycznych i odpowiednich znaczników, takich jak <big>, jest kluczowe dla tworzenia poprawnych i funkcjonalnych stron internetowych.

Pytanie 35

.format1 {
    …
}
W CSS określono wspólne style dla pewnej grupy elementów. Użycie takich stylów w kodzie HTML odbywa się za pomocą atrybutu:
A. div = "format1"
B. id = "format1"
C. class = "format1"
D. style = "format1"

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Użycie atrybutu class w języku HTML do formatowania grupy znaczników jest zgodne z najlepszymi praktykami web developmentu. Atrybut class pozwala na zastosowanie tej samej definicji stylu CSS do wielu elementów, co jest efektywne i utrzymuje porządek w kodzie. Umożliwia to również łatwą zmianę wyglądu strony poprzez modyfikację tylko jednej definicji CSS zamiast ręcznego edytowania stylów każdego z elementów z osobna. Dzięki takiemu podejściu, programista może szybko aktualizować wygląd całej strony lub jej części bez ryzyka, że pominięte zostaną pojedyncze elementy. Ponadto użycie klas jest zgodne ze standardami W3C, co zapewnia kompatybilność i poprawne renderowanie w różnych przeglądarkach. Praktycznym przykładem zastosowania jest stronie, gdzie wszystkie elementy z klasą .format1 będą miały jednolity wygląd, na przykład wszystkie przyciski na stronie mogą mieć jednakowy kolor i styl. Pozwala to na tworzenie spójnych interakcji użytkownika i ułatwia przyszłą rozbudowę strony o dodatkowe funkcje.

Pytanie 36

Jakie polecenie HTML poprawnie odwzorowuje przedstawioną hierarchiczną strukturę tekstu, która została wyświetlona przez przeglądarkę w następujący sposób: Rozdział 1 tekst Podrozdział 1.1 tekst Podrozdział 1.2?

A. <h1>Rozdział 1<p>tekst<h2>Podrozdział 1.1<p>tekst<h2>Podrozdział 1.2
B. <ul><li>Rozdział 1<li>tekst<li>Podrozdział 1.1<li>tekst<li>Podrozdział 1.2</ul>
C. <big>Rozdział 1</big>tekst<big>Podrozdział 1.1</big>tekst<big>Podrozdział 1.2</big>
D. <h1>Rozdział 1</h1><p>tekst</p><h2>Podrozdział 1.1</h2><p>tekst</p><h2>Podrozdział 1.2</h2>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawny kod HTML do definiowania hierarchicznej struktury tekstu oparty jest na semantycznym znaczeniu tagów. W tym przypadku, użycie <h1> dla 'Rozdział 1' jako głównego nagłówka jest zgodne z zasadami projektowania stron internetowych, gdyż <h1> powinien być używany dla najważniejszego nagłówka na stronie. Następnie zastosowanie <h2> dla 'Podrozdział 1.1' i 'Podrozdział 1.2' wskazuje na hierarchię, gdzie te podrozdziały są podkategoriami głównego rozdziału. Tag <p> jest użyty do definiowania paragrafów tekstowych, co zapewnia odpowiednie formatowanie i czytelność. Taki układ jest zgodny z wytycznymi W3C, które rekomendują używanie nagłówków w strukturze dokumentu HTML, co ułatwia zarówno przeglądarkom, jak i użytkownikom zrozumienie hierarchii treści. Przykładowo, strona internetowa z taką strukturą będzie lepiej indeksowana przez wyszukiwarki, co przyczyni się do poprawy SEO.

Pytanie 37

Aby nadać styl CSS bezpośrednio pojedynczemu elementowi HTML (styl śródliniowy), należy użyć atrybutu:

A.
id
B.
css
C.
style
D.
class

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Styl śródliniowy (inline) zapisuje się w atrybucie <code><span class="code-variable">style</span></code> danego znacznika, na przykład <code><span class="code-text">&lt;</span><span class="code-keyword">p</span> <span class="code-variable">style</span><span class="code-text">=</span><span class="code-string">"color: red"</span><span class="code-text">&gt;</span></code>. Reguły podane w tym atrybucie dotyczą wyłącznie tego jednego elementu i mają najwyższą specyficzność. Stosuje się go oszczędnie, do pojedynczych wyjątków, bo miesza treść ze stylem. Dlatego do ostylowania jednego elementu wprost służy atrybut <code><span class="code-variable">style</span></code>.

Pytanie 38

Której wartości właściwości background-attachment użyć, aby tło pozostało nieruchome względem okna przeglądarki?

A.
inherit
B.
local
C.
scroll
D.
fixed

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wartość <code><span class="code-variable">fixed</span></code> właściwości <code><span class="code-variable">background-attachment</span></code> „przykleja” tło do okna przeglądarki - przy przewijaniu strony obraz tła pozostaje nieruchomy, a treść przesuwa się po nim (efekt paralaksy). Dlatego nieruchome tło ustawia <code><span class="code-variable">fixed</span></code>.

Pytanie 39

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

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

A.

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

B.

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

C.

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

D.

stanowisko:
obowiązki:
sporządzanie dokumentacji
pisanie kodu
testy oprogramowania
A. B.
B. C.
C. D.
D. A.

Brak odpowiedzi na to pytanie.

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

Pytanie 40

Który znacznik daje TAKI SAM efekt wizualny co <i> (kursywa)?

A.
<em>
B.
<u>
C.
<strong>
D.
<pre>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <code><span class="code-text">&lt;</span><span class="code-keyword">em</span><span class="code-text">&gt;</span></code> domyślnie wyświetla tekst KURSYWĄ, tak samo jak <code><span class="code-text">&lt;</span><span class="code-keyword">i</span><span class="code-text">&gt;</span></code>, więc bez stylów CSS wyglądają identycznie. Różnią się znaczeniem: <code><span class="code-text">&lt;</span><span class="code-keyword">em</span><span class="code-text">&gt;</span></code> niesie nacisk znaczeniowy (emphasis), a <code><span class="code-text">&lt;</span><span class="code-keyword">i</span><span class="code-text">&gt;</span></code> to czysto wizualne pochylenie. Dlatego ten sam efekt co <code><span class="code-text">&lt;</span><span class="code-keyword">i</span><span class="code-text">&gt;</span></code> daje <code><span class="code-text">&lt;</span><span class="code-keyword">em</span><span class="code-text">&gt;</span></code>.