Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 19 czerwca 2026 13:13
Data zakończenia: 19 czerwca 2026 13:30

Egzamin zdany!

Wynik: 27/40 punktów (67,5%)

Wymagane minimum: 20 punktów (50%)

Nowe

Analiza przebiegu egzaminu- sprawdź jak rozwiązywałeś pytania

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

W języku HTML, atrybut shape w znaczniku area, który definiuje typ obszaru, może mieć wartość

A. rect, sąuare, circle

B. style="margin-bottom: 0cm;">poły, square, circle

C. style="margin-bottom: 0cm;">rect, triangle, circle

D. rect, poły, circle

Atrybut shape znacznika area w języku HTML jest kluczowy dla określenia kształtu interaktywnego obszaru na mapie obrazów. Przyjmuje on wartości, które definiują geometrię obszaru w kontekście mapy, a do najpopularniejszych z nich należą 'rect', 'circle' oraz 'poly'. Wartość 'rect' definiuje prostokątny obszar, gdzie użytkownik może kliknąć w dowolnym miejscu w obrębie prostokąta. 'Circle' z kolei pozwala na stworzenie okrągłego obszaru kliknięcia, definiując jego środek oraz promień. Z kolei 'poly' umożliwia zdefiniowanie wielokątnego obszaru poprzez podanie współrzędnych wierzchołków. Te wartości są zgodne z definicjami przedstawionymi w standardach W3C, które określają sposób, w jaki przeglądarki interpretują te atrybuty. Przykładowo, dla atrybutu shape='rect' można podać współrzędne lewego górnego i prawego dolnego narożnika prostokąta, co sprawia, że jest to użyteczne w implementacji interaktywnych map. Zrozumienie tych wartości jest istotne dla programistów webowych, którzy chcą tworzyć dostępne i interaktywne treści.

Pytanie 2

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

#stopka { ... }

A. <div "stopka"> …

B. <div class = "stopka"> …

C. <div id = "stopka"> …

D. <div title = "stopka"> …

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 3

Kolorem, który ma odcień niebieski, jest kolor

A. #EE0000

B. #0000EE

C. #EE00EE

D. #00EE00

Poprawna odpowiedź to kolor #0000EE, który reprezentuje odcień niebieskiego w systemie RGB. Kolory w tym systemie definiowane są poprzez trzy składowe: czerwoną, zieloną i niebieską (RGB), gdzie wartości są podawane w formacie szesnastkowym. W przypadku #0000EE, pierwsze dwie pary zer oznaczają brak składowych czerwonej i zielonej, natomiast ostatnia para 'EE' wskazuje na wysoką intensywność składowej niebieskiej. Takie podejście jest powszechnie stosowane w programowaniu i projektowaniu stron internetowych, gdzie precyzyjnie określone kolory mają kluczowe znaczenie dla estetyki i użyteczności interfejsu. Przykładem zastosowania koloru niebieskiego może być jego użycie w projektach związanych z tematyką technologiczną lub finansową, gdzie niebieski symbolizuje zaufanie i profesjonalizm. Warto również zwrócić uwagę, że w kontekście dostępności barw, stosowanie odpowiednich kontrastów z tłem jest niezbędne, aby zapewnić czytelność tekstu i elementów graficznych. Odpowiednie wykorzystanie kodów koloru może znacząco wpłynąć na postrzeganie marki oraz interakcję użytkowników z treściami wizualnymi na stronach internetowych.

Pytanie 4

Który z poniższych kodów XHTML sformatuje tekst zgodnie z podanym przykładem?

Ala ma kota
a kot ma Alę

A. <p>Ala ma <b>kota</i><br/> a <b>kot</b> ma Alę</p>

B. <p>Ala ma <b>kota <br /> a <i>kot</i> ma Alę</p>

C. <p>Ala ma <b>kota</b> <br/> a <b>kot</b> ma Alę</p>

D. <p>Ala ma <b>kota</b> <br/> a <i>kot</i> ma Alę</p>

Odpowiedź <p>Ala ma <b>kota</b> <br/> a <i>kot</i> ma Alę</p> jest poprawna, ponieważ zgodnie z zasadami XHTML, użycie znaczników <b> i <i> do formatowania tekstu jest odpowiednie; <b> stosowany jest do wyróżniania tekstu pogrubionego, a <i> do kursywy. W tej odpowiedzi zastosowano również poprawny znacznik <br/>, który jest samodzielnym znacznikiem i nie wymaga zamknięcia w parze. Zgodnie z dobrymi praktykami, kod XHTML powinien być poprawnie sformatowany, a każdy otwierający znacznik powinien mieć odpowiadający mu zamykający znacznik, chyba że jest to znacznik samodzielny, jak <br/>. Warto zaznaczyć, że XHTML wymaga również, aby wszystkie atrybuty były zapisane w formacie małych liter, co zostało spełnione w tej odpowiedzi. Przykład zastosowania tej wiedzy można znaleźć w tworzeniu stron internetowych, gdzie poprawne sformatowanie kodu HTML lub XHTML jest kluczowe dla prawidłowego wyświetlania treści w przeglądarkach.

Pytanie 5

Który atrybut znacznika <video> włącza ciągłe odtwarzanie (w pętli)?

muted

loop

poster

controls

Atrybut loop w <video> (i <audio>) sprawia, że nagranie po zakończeniu odtwarza się od początku, czyli w pętli. To atrybut logiczny - sama jego obecność włącza tę funkcję. Dlatego ciągłe odtwarzanie włącza loop.

Pytanie 6

W języku CSS określono styl dla stopki. Aby zastosować to formatowanie do bloku oznaczonego znacznikiem div, należy wpisać

#stopka { ... }

A. <div class="stopka">

B. <div "stopka">

C. <div title="stopka">

D. <div id="stopka">

Poprawna odpowiedź to <div id="stopka"> ponieważ w CSS użycie selektora ID poprzedzonego znakiem # oznacza, że styl jest stosowany do elementu o określonym identyfikatorze. W HTML atrybut id jest unikalny w obrębie całego dokumentu co oznacza, że może być przypisany tylko do jednego elementu. Stosowanie identyfikatorów jest powszechną praktyką w przypadku stylizacji elementów, które pojawiają się tylko raz na stronie jak stopka nagłówek czy główny kontener treści. Przykład praktycznego zastosowania obejmuje sytuacje gdzie chcesz stylizować konkretną część strony internetowej zachowując jednorodność w całym projekcie. Dobrą praktyką jest również unikanie zbyt częstego używania id na rzecz klas które są bardziej elastyczne i mogą być stosowane do wielu elementów. Jednak w przypadku elementów unikalnych takich jak stopka użycie id jest zgodne z najlepszymi praktykami projektowania stron internetowych. Warto również pamiętać że selektory ID mają wyższy priorytet w CSS co oznacza że ich stylizacje nadpisują te zdefiniowane dla klas o tej samej specyfikacji.

Pytanie 7

W HTML formularzu użyto elementu <input>. Pole, które się pojawi, ma pozwalać na wprowadzenie maksymalnie

<input type="password" size="30" maxlength="20">

A. 30 znaków, które nie będą widoczne w polu tekstowym

B. 20 znaków, które nie będą widoczne w polu tekstowym

C. 30 znaków, które będą widoczne podczas wpisywania

D. 20 znaków, które będą widoczne w trakcie wprowadzania

Jeśli mówimy o znaczniku <input> w HTML, to dobrze jest wiedzieć, jak działają atrybuty typu maxlength i type. Atrybut maxlength pozwala ustawić maksymalną liczbę znaków w polu tekstowym. W polu typu password użytkownik może wpisać max 20 znaków, ale to, co widzisz, może być inne. Często myli się atrybut size z ograniczeniem liczby wprowadzanych znaków, ale tak naprawdę chodzi tylko o to, jak szerokie jest pole, więc nie zmienia jego funkcjonalności. Pole typu password ma na celu ukrycie wpisywanych znaków, co zazwyczaj oznacza, że to, co wpisujesz, zastąpione jest gwiazdkami lub kropkami, by nie było widać tego, co piszesz. Te rzeczy są ważne dla bezpieczeństwa aplikacji webowych. Ostatnio zauważyłem, że niektórzy mają problemy z rozumieniem tych atrybutów, co może prowadzić do błędów w obsłudze danych użytkowników i problemów z bezpieczeństwem.

Pytanie 8

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

A. aside {float: left; }

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

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

D. nav { float: right; }

Prawidłowa odpowiedź opiera się na tym, jak działają własności float w CSS i w jakiej kolejności przeglądarka renderuje elementy blokowe. Jeśli w dokumencie HTML kolejność znaczników to np. <aside>, potem <section>, a na końcu <nav>, to bez dodatkowego stylowania wszystkie trzy ustawią się pionowo, jeden pod drugim, w tej właśnie kolejności. Dodanie float zmienia sposób, w jaki elementy „odpływają” od normalnego przepływu dokumentu i jak układają się obok siebie.

W stylu nav { float: right; } section { float: right; } sprawiamy, że zarówno nav, jak i section są przesuwane do prawej krawędzi kontenera, natomiast aside (bez float) pozostaje w normalnym przepływie, czyli z lewej strony. Ponieważ przeglądarka układa elementy w kolejności występowania w kodzie, najpierw wyrenderuje aside po lewej, potem section „odpłynie” w prawo, a na końcu nav też „odpłynie” w prawo, ustawiając się po prawej stronie, ale dalej od góry niż section. Efekt wizualny jest taki, że po lewej mamy aside, po prawej nav, a section ląduje między nimi, dokładnie tak jak było pokazane na filmie.

Moim zdaniem to zadanie dobrze pokazuje, że przy floatach zawsze trzeba myśleć o trzech rzeczach naraz: kolejności elementów w HTML, kierunku „pływania” (left/right) oraz o tym, które elementy pozostawiamy w normalnym przepływie. W praktyce w nowoczesnych projektach częściej używa się flexboxa albo CSS Grid do takich układów, bo są czytelniejsze i mniej problematyczne. Przykładowo, zamiast kombinować z float, można by użyć display: flex; na kontenerze i ustawić order dla aside i nav. Float nadal jednak pojawia się w starszych layoutach i w zadaniach egzaminacyjnych, więc warto dobrze rozumieć jego zachowanie, choćby po to, żeby poprawnie modyfikować istniejące style lub naprawiać „rozjechane” układy w starszych projektach.

Pytanie 9

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

A. <p class= "stl" id= "a">tekst</p>

B. <p class= "stl">tekst</p>

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

D. <p class= "stl" style= "color: #F00 ">tekst</p>

Pozostałe odpowiedzi nie zawierają błędów, które mogłyby skutkować odrzuceniem przez walidator HTML5. W pierwszym przypadku użycie atrybutu class w tagu <p> jest w pełni zgodne z HTML5, co pozwala na przypisanie stylu do elementu. Atrybut class jest standardowym sposobem klasyfikacji elementów, co umożliwia ich stylizację z użyciem CSS. W drugim przykładzie, dodanie atrybutu id do tagu <p> również nie narusza zasad poprawności HTML i pozwala na jednoznaczne identyfikowanie elementu na stronie. Identyfikatory są istotnym narzędziem w programowaniu front-end i są często wykorzystywane w JavaScript oraz przy stylizacji CSS. W trzecim przypadku stylowanie bezpośrednie na elemencie <p> przy użyciu atrybutu style jest akceptowalne w HTML5, mimo że nie jest to najlepsza praktyka ze względu na zasady separacji treści i stylu. Współczesne podejścia do programowania zalecają korzystanie z zewnętrznych arkuszy stylów, aby poprawić organizację kodu i jego ponowne użycie. Wszystkie te przykłady ilustrują biegłość w korzystaniu z HTML5 i jego atrybutów, co jest niezbędne do tworzenia semantycznych i dostępnych stron internetowych.

Pytanie 10

Którego znacznika HTML5 użyć do GRUPOWANIA powiązanych elementów formularza?

<fieldset>

<summary>

<optgroup>

<option>

Pozostałe znaczniki dotyczą czego innego. <summary> to nagłówek rozwijanego <details>. <option> to pojedyncza pozycja listy <select>, a <optgroup> grupuje opcje WEWNĄTRZ listy rozwijanej, a nie pola formularza. Powiązane pola formularza grupuje <fieldset>.

Pytanie 11

W dokumencie HTML stworzono formularz. Jakie działanie kodu zostanie pokazane przez przeglądarkę, jeśli w drugie pole użytkownik wprowadzi tekst „ala ma kota”?

A. Efekt 3

B. Efekt 4

C. Efekt 2

D. Efekt 1

Błędne odpowiedzi wynikają z niewłaściwego zrozumienia działania elementów HTML takich jak select i input type=password. Efekt 1 przedstawia listę kontrolną z opcjami do wyboru co jest niezgodne z kodem HTML w którym użyto elementu select pozwalającego na wybór tylko jednej opcji z rozwijanej listy. Tego typu błąd często wynika z mylenia różnych typów wprowadzania danych w HTML co może prowadzić do nieporozumień w projektowaniu interfejsów użytkownika. Efekt 3 sugeruje że w polu input można swobodnie zobaczyć wpisaną wartość co jest sprzeczne z użyciem typu password który celowo ukrywa wprowadzone znaki zapewniając ochronę danych. Taki typ błędu pojawia się gdy programiści nie uwzględniają zasady bezpieczeństwa w projektowaniu formularzy internetowych. Z kolei efekt 4 pokazuje zestaw przycisków radiowych i ukryte hasło co również nie odpowiada kodowi HTML. Przyciski radiowe są używane w formularzach do wyboru jednej opcji z grupy ale nie są częścią przedstawionego kodu. Często takie błędy są wynikiem niewłaściwego przypisywania typów wprowadzania danych i mogą prowadzić do niewłaściwego działania aplikacji webowych. Kluczowe jest więc zrozumienie różnych typów elementów formularzy i ich właściwego zastosowania w kontekście interfejsu użytkownika oraz bezpieczeństwa danych użytkownika. Dobre praktyki projektowania formularzy obejmują nie tylko estetykę i funkcjonalność ale przede wszystkim bezpieczeństwo i intuicyjność obsługi co jest kluczowe dla użytkowników końcowych. Użycie odpowiednich elementów HTML zgodnych ze standardami W3C zapewnia lepszą kompatybilność i użyteczność aplikacji internetowych oraz pomaga w unikaniu typowych błędów projektowych i implementacyjnych które mogą wpływać na doświadczenie użytkownika.

Pytanie 12

Podano fragment kodu HTML, który nie przechodzi walidacji. Problemy z walidacją tego kodu będą dotyczyć:

<!DOCTYPE HTML>
<html>
<head>
    <title>Test</title>
</head>
<body>

<img src="obraz.gif">
<br>
<img src="obraz.gif">

</body>
</html>

A. duplikacji nazwy pliku graficznego

B. braku atrybutu alt w znaczniku <img>

C. braku zamknięcia znacznika <img>

D. braku zamknięcia znacznika <br>

Patrząc na fragment kodu, można zauważyć kilka miejsc, które czasem wprowadzają w błąd osoby uczące się HTML-a, szczególnie jeśli ktoś nie śledzi na bieżąco aktualnych specyfikacji. Zacznijmy od zamknięcia znaczników <br> i <img>. W HTML5 oba te tagi mogą być zapisywane jako samodzielne, bez ukośnika (tzn. nie trzeba pisać <br /> czy <img />). To, że w starszych materiałach lub w XHTML-u stosowało się ukośnik przed zamknięciem, wynikało z wymagań tamtych standardów, ale obecnie walidatory nie traktują to już jako błąd. Często spotyka się przekonanie, że każda para tagów musi być zamknięta, co nie zawsze jest prawdą w przypadku tzw. self-closing tags w HTML. Jeśli chodzi o duplikację nazwy pliku graficznego – powielanie atrybutu src z tą samą wartością w dwóch obrazkach nie stanowi żadnego problemu z punktu widzenia składni czy walidacji HTML. To jest po prostu dwukrotne użycie tego samego obrazka i nie wpływa na poprawność kodu. Czasami osoby początkujące myślą, że takie powtórzenia mogą być błędem, bo wydaje się to nieoptymalne, ale walidator HTML patrzy wyłącznie na poprawność struktury i wymaganych atrybutów. Najpoważniejszym problemem, który rzeczywiście zostanie wychwycony przez walidator, jest brak atrybutu alt w znaczniku <img>. To właśnie jego brak narusza wymagania dostępności i standardów HTML. W praktyce, jeśli dążymy do zgodności z HTML5 i zasadami web accessibility, zawsze trzeba dodawać alt, bo to jest istotne dla użytkowników i systemów wspierających. Moim zdaniem, wiele osób nadmiernie skupia się na detalach typu ukośniki czy powtórzenia obrazków, a nie zawsze zwraca uwagę na aspekt dostępności, który jest obecnie jednym z ważniejszych wymogów jakościowych w branży webowej.

Pytanie 13

Który format NIE służy do publikacji grafiki lub animacji w internecie?

A. AIFF

B. SVG

C. PNG

D. SWF

Pozostałe formaty wykorzystywano w sieci do obrazów lub animacji. PNG to rastrowy format graficzny z przezroczystością, SVG to grafika wektorowa opisywana w XML, a SWF to dawny format animacji Flash. Tylko AIFF przechowuje dźwięk, więc to on nie należy do formatów graficznych.

Pytanie 14

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

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

B. <input type="password" />

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

D. <input name="password" />

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

Pytanie 15

Atrybut colspan służy do poziomego łączenia komórek tabeli, natomiast rowspan pozwala na łączenie ich w pionie. Którą z poniższych tabel ukazuje fragment kodu napisany w języku HTML?
<table border="1" cellspaing="0" cellpadding="10" >
<tr> <td rowspan="2"> </td> <td> </td> </tr>
<tr> <td> </td> </tr>
</table>

A. rys. B

B. rys. C

C. rys. D

D. rys. A

Zastosowanie atrybutu rowspan w HTML wymaga zrozumienia jak działa scalanie komórek w pionie co może prowadzić do pewnych nieporozumień w interpretacji wynikowego układu tabeli Błąd w rozumieniu funkcji rowspan może wynikać z mylnego przypisania skali poziomej do pionowej co wprowadza chaos w strukturze tabeli Jeśli zamiast rowspan użyto by colspan komórki byłyby łączone w poziomie co zmieniłoby całkowicie układ i wizualizację tabeli Niepoprawne rozumienie tego mechanizmu często skutkuje wyborem niewłaściwej odpowiedzi ponieważ kolumny z atrybutem rowspan są błędnie postrzegane jako poziome połączenia Dodatkowo brak świadomości że odstępy między komórkami oraz ich ramki mogą być konfigurowane wpływa na percepcję układu tabeli co może prowadzić do złego rozpoznania poprawnego rysunku W przypadku złego przypisania rowspan w tabeli możemy uzyskać niespójny układ co jest sprzeczne z dobrą praktyką projektowania interfejsów użytkownika gdzie spójność i czytelność są kluczowe Dlatego ważne jest aby dokładnie analizować kod i jego efekty na strukturę tabeli oraz stosować się do standardów HTML które zapewniają poprawność i czytelność danych w tabelach

Pytanie 16

W edytorze grafiki wektorowej zbudowano kształt, który składa się z dwóch figur: trójkąta oraz koła. Aby uzyskać ten kształt, po narysowaniu figur i ich odpowiednim ustawieniu, trzeba użyć funkcji

A. różnicy

B. rozdzielenia

C. sumy

D. wykluczenia

Funkcja sumy w programach do grafiki wektorowej, takich jak Adobe Illustrator czy CorelDRAW, pozwala na połączenie dwóch lub więcej kształtów w jeden obiekt. To takie sprytne narzędzie! Sumowanie, znane też jako unia lub łączenie ścieżek, integruje geometrię wszystkich wybranych kształtów. Na przykład, jak narysujesz trójkąt i koło, a potem je odpowiednio ustawisz, to używając funkcji sumy, stworzysz nowy kształt, który obejmuje całą powierzchnię obu figur. Często to robi się przy projektowaniu logo, gdzie trzeba uprościć złożone kształty do jednej ścieżki. Taki sposób działania jest przyjęty w branży, bo ułatwia tworzenie czytelnych grafik, które są łatwe do edytowania. A co najważniejsze, połączenie figur w jedną upraszcza późniejsze zmiany i wpisuje się w zasady projektowania minimalistycznego, dzięki czemu można robić przejrzyste kompozycje. Warto mieć na uwadze, że takie podejście też ułatwia drukowanie i wycinanie, co jest mega ważne w produkcji materiałów reklamowych czy wyrobów przemysłowych.

Pytanie 17

Znacznik <pre> </pre> służy do prezentacji

A. treści polską czcionką

B. znaku przekreślenia

C. znaku wielokropka

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

Znacznik <pre> </pre> jest używany w HTML do wyświetlania tekstu w formacie preformatowanym, co oznacza, że zawartość wewnątrz tego znacznika jest wyświetlana czcionką o stałej szerokości, gdzie wszystkie białe znaki, w tym spacje i nowe linie, są zachowywane tak, jak zostały wpisane. To sprawia, że jest on niezwykle przydatny przy prezentacji kodu źródłowego, skryptów oraz innych danych, gdzie zachowanie dokładnego formatowania jest kluczowe. Przykładem może być kod HTML, JavaScript czy CSS, który można umieścić wewnątrz znacznika <pre> w celu poprawienia czytelności i umożliwienia użytkownikom łatwego skopiowania. Ponadto, znaczniki <pre> są często stosowane w dokumentacji technicznej, gdzie precyzyjne odwzorowanie formatowania jest istotne dla zrozumienia. Ważne jest również, aby zwrócić uwagę na to, że domyślnie tekst w elemencie <pre> nie jest łamany, co pozwala zachować jego oryginalny kształt i układ.

Pytanie 18

Jakie pola znajdują się w formularzu?

A. Input(Text), Input(Checkbox), Select, Select, Input(Submit), Input(Reset)

B. Input(Text), Select, Input(Radio), Input(Radio), Input(Submit), Input(Reset)

C. Textarea, Option, Input(Checkbox), Input(Checkbox), Input(Submit), Input(Reset)

D. Textarea, Select, Input(Radio), Input(Radio), Input(Reset), Input(Submit)

Odpowiedź, którą wybrałeś, jest ok, bo wszystko trzyma się zasady formularzy z obrazka. Input(Text) to właśnie pole, w którym wpisujesz swoje nazwisko. Potem mamy Input(Select), który pozwala wybrać jedno z województw z listy – to też jest na plus. Przy Input(Radio) można wybrać jedną opcję, co dobrze pasuje do wyboru między Studiami podyplomowymi a Kursem. Input(Submit) jest do wysyłania formularza, więc tu też wszystko gra. Na końcu Input(Reset) zeruje wszystko, co jest przydatne, kiedy chcesz wyczyścić formularz. Wszystkie te elementy są zgodne z HTML5, co jest teraz standardem w tworzeniu stron. Fajnie, że formularz ma logiczne ułożenie, bo ułatwia to korzystanie z niego.

Moim zdaniem, dobrze wiedzieć, jakie elementy są stosowane w formularzach, żeby wszystko działało tak jak powinno.

Pytanie 19

Gdzie należy umieścić znacznik meta w języku HTML?

A. między znacznikami body

B. w sekcji nagłówkowej strony internetowej

C. w stopce strony internetowej

D. między znacznikami paragrafu

Znacznik meta w języku HTML jest kluczowym elementem, który powinien być umieszczony w części nagłówkowej (head) dokumentu. Znaczniki meta służą do definiowania różnych informacji o stronie, takich jak zestaw znaków, opis, słowa kluczowe, autor oraz inne istotne dane, które nie są bezpośrednio wyświetlane na stronie. Przykładowo, znacznik meta z atrybutem 'charset' informuje przeglądarki, w jaki sposób interpretować znaki na stronie, co jest szczególnie ważne dla prawidłowego wyświetlania treści w różnych językach. Standardy HTML5 zalecają umieszczanie znaczników meta w nagłówku, aby umożliwić optymalizację SEO, co zwiększa widoczność strony w wynikach wyszukiwania. Dobrą praktyką jest również dodanie opisu strony przy pomocy znacznika meta 'description', co pozwala wyszukiwarkom na lepsze zrozumienie tematyki strony oraz zwiększa klikalność w wynikach wyszukiwania.

Pytanie 20

Która reguła CSS pozwala stosować różne style w zależności od szerokości ekranu (kluczowa w RWD)?

@font-face

@media

@import

@keyframes

Pozostałe reguły at-rules dotyczą czego innego. @font-face pozwala dołączyć i nazwać własną czcionkę, ale nie zmienia układu w zależności od ekranu. @import służy do wczytania kolejnego arkusza stylów do bieżącego - to organizacja kodu, nie responsywność. @keyframes opisuje kolejne etapy animacji i również nie reaguje na szerokość urządzenia. Dopasowanie stylów do rozmiaru ekranu umożliwia wyłącznie @media, dlatego to ona jest poprawna.

Pytanie 21

Kolor zielony w skróconej notacji szesnastkowej można w CSS zapisać jako:

#F00

#0F0

#FFF

#00F

CSS dopuszcza skrócony zapis koloru #RGB, w którym każda cyfra jest powielana - #0F0 odpowiada #00FF00. To pełna składowa zielona przy zerowych pozostałych, czyli czysty zielony. Skrót działa tylko, gdy obie cyfry pary są takie same (np. #FF8800 → #F80). Dlatego zielony w skróconej notacji to #0F0.

Pytanie 22

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

A. użycie emulatora przeglądarek internetowych, np. Browser Sandbox

B. testowanie strony w programie Internet Explorer, zakładając, że inne przeglądarki będą kompatybilne

C. skorzystanie z narzędzia do walidacji kodu HTML

D. zainstalowanie na kilku maszynach różnych przeglądarek i przeprowadzenie testu witryny

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 23

Która zasada dotycząca sekcji <head> w HTML jest POPRAWNA?

A. w sekcji <head> zawiera się sekcja <body>

B. w sekcji <head> nie wolno umieszczać kodu CSS, tylko odwołanie do pliku

C. w sekcji <head> buduje się szablon strony znacznikami <div>

D. w sekcji <head> mogą wystąpić <meta>, <title>, <link>

Sekcja <head> zawiera metadane i powiązania dokumentu - typowo <meta> (kodowanie, opis), <title> (tytuł karty) i <link> (np. arkusz CSS). Dlatego poprawne jest stwierdzenie o <meta>, <title> i <link>.

Pytanie 24

Jakiego znacznika w HTML użyjemy, aby uzyskać tekst wyświetlany czcionką o stałej szerokości znaku, który również uwzględnia dodatkowe spacje, tabulacje oraz znaki końca linii?

A. <ins>…</ins>

B. <code>…</code>

C. <pre>…</pre>

D. <blockquote>…</blockquote>

Znacznik <pre> w HTML jest używany do formatowania tekstu w taki sposób, aby zachować oryginalne odstępy, tabulacje oraz znaki końca linii. W przeciwieństwie do standardowego tekstu, w którym przeglądarka ignoruje dodatkowe białe znaki, <pre> traktuje je dosłownie, co jest szczególnie przydatne w przypadku wyświetlania kodu źródłowego lub tekstu, w którym ważne są układy. Przykładem użycia może być wyświetlanie kodu programistycznego w dokumentacji technicznej, gdzie precyzyjny format jest kluczowy dla zrozumienia struktury kodu. Standard HTML5 potwierdza, że <pre> jest odpowiednim znacznikiem do tego celu, a jego użycie jest zgodne z zasadami semantyki HTML, co zwiększa czytelność i dostępność treści. Praktyka ta sprzyja również urządzeniom wspomagającym, umożliwiając poprawne interpretowanie tekstu przez czytniki ekranu.

Pytanie 25

Poniżej przedstawiono fragment kodu języka HTML. Jest on definicją listy:

<ol>
   <li>punkt 1</li>    <li>punkt 2</li>
   <ul>
     <li>podpunkt1</li>
     <ul>    <li>podpunkt2</li>  <li>podpunkt3</li>  </ul>
   </ul>
   <li>punkt3</li>
 </ol>

punkt 1
punkt 2
- podpunkt1
- podpunkt2
- podpunkt3
punkt3

punkt 1
punkt 2
punkt3
- podpunkt1
- podpunkt2
- podpunkt3

punkt 1
punkt 2
- podpunkt1
  - podpunkt2
  - podpunkt3
punkt3

punkt 1
punkt 2
1. podpunkt1
  - podpunkt2
  - podpunkt3
punkt3

A. D.

B. A.

C. C.

D. B.

Gratulacje, poprawnie zinterpretowałeś fragment kodu HTML przedstawiający definicję listy. W tym kodzie widzimy listę numerowaną (<ol>), która zawiera trzy elementy listy (<li>). Szczególnością prezentowanej struktury jest fakt, że drugi element listy zawiera zagnieżdżoną listę nieuporządkowaną (<ul>) z trzema podpunktami. Zgodność odpowiedzi C z przedstawionym kodem wynika z faktu, że punkt 2 prezentuje podpunkty oznaczone kropkami, co jest charakterystyczne dla listy nieuporządkowanej. Tego typu struktura jest często stosowana na stronach internetowych do prezentacji hierarchii informacji, na przykład menu nawigacyjnego czy spisu treści. Pamiętaj, że umiejętność czytania i zrozumienia kodu HTML jest kluczowa dla każdego, kto planuje pracować z technologiami webowymi i to pytanie to doskonały przykład na to, jak te umiejętności mogą być sprawdzane.

Pytanie 26

Deklaracja typu dokumentu HTML: <!DOCTYPE HTML> wskazuje, że kod został stworzony w wersji

A. 7

B. 4

C. 5

D. 6

Gdy widzisz deklarację <!DOCTYPE HTML>, to znaczy, że mówimy o wersji HTML5. To obecny standard, który wprowadza naprawdę sporo nowych funkcji w porównaniu do wcześniejszych wersji. Na przykład, HTML5 pozwala na osadzanie audio i wideo bez potrzeby dodatkowych wtyczek, co jest super wygodne. Mamy też fajne semantyczne elementy jak <article>, <section> czy <nav>, które sprawiają, że łatwiej zorganizować treści na stronie. Ważne jest, żeby zawsze na początku dokumentu umieszczać tę deklarację, bo to pozwala przeglądarkom na prawidłowe wyświetlanie strony. Dzięki temu unikamy problemów z interpretacją kodu, co z doświadczenia mówię, jest naprawdę istotne.

Pytanie 27

Której właściwości CSS użyć, aby ustawić WYSOKOŚĆ grafiki na stronie?

margin

padding

width

height

Wysokość elementu (w tym grafiki) ustawia w CSS właściwość height, np. height: 200px;. Dlatego wysokość grafiki ustawia height.

Pytanie 28

Aby przygotować układ strony z trzema kolumnami ustawionymi obok siebie, można posłużyć się stylem CSS:

.kolumny {
  float: left;
  width: 33%;
}

.kolumny {
  clear: both;
  height: 33%;
}

.kolumny {
  float: right;
  height: 33%;
}

.kolumny {
  float: left;
  width: 40%;
}

Aby ustawić trzy kolumny obok siebie metodą opływania, każdej nadaje się float: left oraz szerokość około jednej trzeciej kontenera, czyli width: 33%. Dzięki float elementy blokowe układają się w jednym rzędzie zamiast jeden pod drugim, a szerokość 33% sprawia, że trzy kolumny wypełniają całą szerokość. Dlatego poprawny jest styl z float: left i width: 33%.

Pytanie 29

Na ilustracji przedstawiono strukturę bloków na stronie internetowej. Który z poniższych fragmentów CSS odpowiada takim ustawieniom? (Dla uproszczenia pominięto właściwości dotyczące koloru tła, wysokości oraz czcionki)

A. #pierwszy {float:left; width:30%; } #drugi {clear:both; width:70%; } #trzeci {float:left; width:70%; } #czwarty {clear:both; }

B. #pierwszy { width: 30%; } #drugi { width: 70%; } #trzeci { width: 70%; } #czwarty { width: 100%; }

C. #pierwszy{float:left; width:30%;} #drugi {clear:both; width:70%;} #trzeci {clear:both; width:70%;} #czwarty {float:left; width:100%;}

D. #pierwszy {float:left; width:30%;} #drugi {float:left; width:70%;} #trzeci {float:left; width:70%;} #czwarty {clear:both; }

Odpowiedź pierwsza jest prawidłowa, gdyż prawidłowo wykorzystuje właściwość float w stylach CSS, aby uzyskać pożądany układ bloków na stronie internetowej. Float pozwala elementom przemieszczać się na lewą lub prawą stronę kontenera, co jest kluczowe w tworzeniu layoutów. W tym przypadku #pierwszy, #drugi i #trzeci mają ustawione float:left, co umożliwia ich równoległe ustawienie w poziomie aż do momentu, gdy szerokości kontenera są zapełnione. Następnie blok #czwarty wymaga clear:both, aby przemieszczać się poniżej wszystkich poprzednich elementów z ustawionym float. To powszechna technika stosowana w projektowaniu responsywnych układów stron, gdzie równoległe pozycjonowanie elementów pozwala na efektywne wykorzystanie przestrzeni. Float w połączeniu z odpowiednimi szerokościami procentowymi pomaga tworzyć elastyczne projekty, które dobrze skalują się na różnych urządzeniach, co jest zgodne z nowoczesnymi standardami web developmentu. Ponadto zrozumienie działania float i clear jest fundamentem przy tworzeniu klasycznych layoutów typu grid przed wprowadzeniem nowoczesnych rozwiązań takich jak Flexbox czy CSS Grid, co pokazuje zrozumienie podstawowych zasad CSS.

Pytanie 30

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

A. ustalenie nagłówka w treści

B. dodanie grafiki

C. zmianę czcionki na kursywę

D. określenie formularza

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

Pytanie 31

Który zapis <img> jest poprawny zgodnie z walidacją HTML5?

<img src="mojPiesek.jpg" alt="pies">

<img src=mojPiesek.jpg alt=pies>

<img src="mojPiesek.jpg">

<img src=mojPiesek.jpg" alt="pies>

Poprawny zapis to <img src="mojPiesek.jpg" alt="pies"> - wartości atrybutów src i alt ujęte są w cudzysłowy, a znacznik jest poprawnie domknięty. Dlatego prawidłowy jest ten zapis.

Pytanie 32

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

A. <param>

B. <span>

C. <p>

D. <div>

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

Pytanie 33

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

A. CDR

B. JPG

C. PNG

D. BMP

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

Pytanie 34

Który kod HTML spowoduje identyczne formatowanie jak przedstawione na obrazku?

W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

<p>W tym <i>paragrafie zobaczysz sposoby formatowania</i> tekstu w HTML</p>
<p>W tym <b>paragrafie <i>zobaczysz</i> sposoby formatowania</b> tekstu w HTML</p>
<p>W tym <i>paragrafie <b>zobaczysz</b> sposoby formatowania</i> tekstu w HTML</p>
<p>W tym <i>paragrafie </i><b>zobaczysz</b><i> sposoby formatowania</i> tekstu w HTML</p>

A. Odpowiedź A

B. Odpowiedź C

C. Odpowiedź B

D. Odpowiedź D

Wybór niepoprawnych odpowiedzi wynika z nieprawidłowego użycia znaczników HTML, co prowadzi do złego formatowania tekstu. W opcji A znacznik <i> został użyty do zamykania paragrafu, co nie ma sensu, bo <i> powinien otaczać tylko te fragmenty, które mają być wyświetlane kursywą. Dodatkowo, brak znaczników <b> sprawia, że tekst nie jest pogrubiony, jak powinien być w oryginale. Opcja B znowu ma źle uporządkowane znaczniki, przez co efekt wizualny różni się od zamierzonego. Tekst 'zobaczysz' powinien być pogrubiony, a nie pokazywany kursywą. A w przypadku opcji D, znów widzimy źle rozmieszczone znaczniki <i> i <b>, co prowadzi do nieprzewidywalnych rezultatów formatowania. Takie błędy często wynikają z braku znajomości podstaw HTML i nieuważności na semantykę znaczników. Z mojego punktu widzenia, ważna jest znajomość kosztów, bo dobre zrozumienie kodu HTML jest kluczowe, żeby tworzyć zorganizowane i dostępne treści w sieci.

Pytanie 35

Co oznacza deklaracja CSS margin: auto;?

A. marginesy stałe dla danej przeglądarki

B. marginesy obliczane tak, by element był wyśrodkowany w poziomie

C. marginesy dziedziczone po elemencie nadrzędnym

D. marginesy równe domyślnym wartościom elementu

Deklaracja margin: auto; każe przeglądarce obliczyć marginesy boczne tak, by element (o określonej szerokości) był WYŚRODKOWANY w poziomie - nadmiar miejsca rozkłada się równo na lewo i prawo. Dlatego oznacza wyśrodkowanie w poziomie.

Pytanie 36

W kodzie HTML znajdziemy formularz. Jaki rezultat zostanie pokazany przez przeglądarkę, jeśli użytkownik wprowadził do pierwszego pola wartość "Przykładowy text"?

A. Efekt 1

B. Efekt 3

C. Efekt 4

D. Efekt 2

Niepoprawne odpowiedzi wynikają z błędnego zrozumienia struktury formularza HTML. W przypadku efektu pierwszego widać, że checkboxy zostały zamienione na radiobuttony, co może sugerować, że użytkownik może wybrać tylko jedną z opcji. Jest to niezgodne z kodem, który jasno określa pola jako checkboxy, co pozwala na wielokrotny wybór. Efekt trzeci pokazuje nieprawidłowe pozycjonowanie elementów formularza, które nie odzwierciedla rzeczywistego układu z kodu HTML. Błędne zrozumienie struktury może wynikać z nieznajomości zasady działania poszczególnych elementów formularza, takich jak <textarea> i <input type='checkbox'>. <Textarea> powinno być stosowane do wprowadzania tekstu wielowierszowego, a checkboxy są idealne do prezentacji listy opcji, które mogą być niezależnie zaznaczone. Efekt czwarty przedstawia radiobuttony zamiast checkboxów, co całkowicie zmienia funkcję formularza. Warto w tym kontekście zrozumieć różnicę między radiobuttonami a checkboxami, gdzie pierwsze są używane do wyboru jednej z wielu opcji, a drugie do wielokrotnego wyboru. Kluczowe jest również poprawne stosowanie i testowanie formularzy w celu zapewnienia ich funkcjonalności i intuicyjności dla użytkownika końcowego.

Pytanie 37

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. <u> oraz <sup>

C. <i> oraz <mark>

D. <b> oraz <u>

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 38

Który semantyczny znacznik HTML5 przeznaczony jest na stopkę strony?

<figcaption>

<footer>

<aside>

<header>

Stopkę strony lub sekcji opisuje semantyczny znacznik <footer> - zwykle zawiera prawa autorskie, kontakt czy linki dodatkowe. Dlatego stopką jest <footer>.

Pytanie 39

Dla przedstawionego fragmentu dokumentu HTML:

<div class="menu"></div>

zdefiniowano formatowanie CSS selektora klasy "menu" tak, aby kolor tła bloku był zielony. Która definicja stylu CSS odpowiada temu formatowaniu?

A. div:menu { color: green; }

B. menu { background-color: rgb(0,255,0); }

C. div.menu { background-color: green; }

D. #menu { background-color: rgb(0,255,0); }

Podstawowy problem w niepoprawnych odpowiedziach wynika z mylenia różnych rodzajów selektorów CSS: typu, klasy i identyfikatora, a także pseudo-klas. W HTML mamy wyraźnie wskazany element `<div class="menu"></div>`. Atrybut `class` mówi wprost, że do stylowania należy użyć selektora klasy, czyli zapisu z kropką: `.menu` lub bardziej precyzyjnie `div.menu`. Użycie dwukropka w zapisie `div:menu` wygląda jak próba zastosowania pseudo-klasy, ale `menu` nie jest żadną standardową pseudo-klasą CSS. Pseudo-klasy to np. `:hover`, `:active`, `:first-child`. Przeglądarka taki selektor po prostu zignoruje, więc styl się nie zastosuje.
Kolejnym typowym nieporozumieniem jest zamiana klasy na identyfikator. Znak `#` w CSS oznacza selektor id, więc `#menu` pasowałby do elementu `<div id="menu">`, a nie do `<div class="menu">`. Id i klasa to dwie różne rzeczy: id powinno być unikalne w całym dokumencie, a klasę można stosować wielokrotnie. W realnych projektach front-endowych mieszanie tych dwóch mechanizmów prowadzi do chaosu w kodzie i trudnych do wykrycia błędów, dlatego warto od początku rozróżniać `.` od `#` bardzo świadomie.
Pojawia się też zapis `menu { background-color: rgb(0,255,0); }`. Taki selektor odnosi się do znacznika HTML o nazwie `menu`, czyli do `<menu>...</menu>`. Istnieje taki tag w HTML5, ale w pytaniu nie ma go w ogóle, jest zwykły `<div>`. Sam fakt, że klasa nazywa się „menu”, nie oznacza, że selektor typu `menu` będzie pasował. CSS nie „zgaduje” naszych intencji, tylko ściśle dopasowuje selektor do struktury dokumentu. To częsty błąd myślowy: patrzymy na nazwę klasy i podświadomie traktujemy ją jak nazwę znacznika.
Moim zdaniem kluczowa lekcja z tego pytania jest taka: najpierw patrzymy na HTML i dokładnie identyfikujemy, czy mamy do czynienia z klasą (`class`), identyfikatorem (`id`), czy konkretnym tagiem (`div`, `p`, `nav` itd.). Dopiero potem dobieramy odpowiedni selektor CSS: `.` dla klasy, `#` dla id, samą nazwę znacznika dla selektora typu. Takie systematyczne podejście bardzo ułatwia dalszą pracę z arkuszami stylów i pomaga budować czytelne, skalowalne style zgodnie z dobrymi praktykami branżowymi.

Pytanie 40

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

pogrubiony pochylony lub w ^{górnym indeksie}

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

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

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>

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.

Rozpocznij nowy egzamin

Powrót do strony głównej