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: 9 maja 2026 13:34
  • Data zakończenia: 9 maja 2026 13:56

Egzamin zdany!

Wynik: 23/40 punktów (57,5%)

Wymagane minimum: 20 punktów (50%)

Nowe
Analiza przebiegu egzaminu- sprawdź jak rozwiązywałeś pytania
Pochwal się swoim wynikiem!
Facebook
X.com
LinkedIn
Szczegółowe wyniki:
Pytanie 1

W HTML-u atrybut shape w znaczniku area, który definiuje kształt obszaru, może przyjąć wartość

A. rect, square, circle
B. rect, triangle, circle
C. rect, poly, circle
D. poly, square, circle
Wybór niewłaściwej odpowiedzi może wynikać z nieporozumień dotyczących atrybutu shape w znaczniku area. Odpowiedzi wskazujące na 'square' lub 'triangle' są błędne, ponieważ te kształty nie są obsługiwane przez standard HTML. W przypadku 'square', mogłoby się wydawać, że jest to po prostu inna forma prostokąta, jednak HTML nie definiuje takiej wartości dla atrybutu shape. Również 'triangle' nie jest uznawany w kontekście standardowych atrybutów; HTML nie pozwala na bezpośrednie definiowanie kształtów trójkątnych w obszarach mapy obrazów. Tego rodzaju zamieszanie może wynikać z niepełnego zrozumienia funkcji atrybutu, który jest jednoznacznie związany z prostokątem, okręgiem oraz wielokątem. Kluczowe jest, aby przyjrzeć się dokumentacji HTML oraz standardom W3C, które jasno określają poprawne wartości dla atrybutu shape. W praktyce, zrozumienie tych różnic jest istotne dla tworzenia efektywnych i dostępnych interfejsów użytkownika, gdzie każdy element jest precyzyjnie zdefiniowany i zrozumiały dla przeglądarek oraz użytkowników. Ponadto, stosowanie niepoprawnych wartości może prowadzić do błędów w renderowaniu strony, co negatywnie wpływa na doświadczenia użytkowników i dostępność serwisu.
Pytanie 2

Kaskadowe arkusze stylów są tworzone w celu

A. określenia metod formatowania elementów na stronie internetowej
B. ulepszenia nawigacji dla użytkownika
C. dodania na stronie internetowej treści tekstowych
D. zwiększenia szybkości ładowania grafiki na stronie internetowej
Kaskadowe arkusze stylów (CSS) są kluczowym elementem w projektowaniu stron internetowych, ponieważ umożliwiają one definiowanie sposobu formatowania i prezentacji elementów na stronie. CSS pozwala na oddzielenie treści od formy, co oznacza, że programiści mogą skupić się na tworzeniu struktury dokumentu HTML, podczas gdy stylistyka i układ są kontrolowane przez arkusze stylów. Przykładem zastosowania CSS jest stylizacja nagłówków, paragrafów czy list, gdzie można dostosować czcionki, kolory, marginesy oraz inne właściwości wizualne. Dzięki użyciu selektorów i reguł CSS, twórcy stron mają pełną kontrolę nad tym, jak każdy element będzie wyglądał, co pozwala na tworzenie responsywnych i estetycznych interfejsów. Ponadto, CSS obsługuje kaskadowość, co oznacza, że reguły mogą być dziedziczone i nadpisywane, co zwiększa elastyczność i wydajność procesu stylizacji. Warto również zwrócić uwagę na standardy W3C, które definiują najlepsze praktyki i zalecenia dotyczące użycia CSS, co przyczynia się do poprawy dostępności i zgodności stron internetowych.
Pytanie 3

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

Ilustracja do pytania
A. Rys. C
B. Rys. A
C. Rys. B
D. Rys. D
Poprawna odpowiedź to Rys. B ponieważ wykorzystuje atrybut rowspan="2" który łączy dwie komórki w pierwszej kolumnie w jeden wiersz Koncepcja rowspan umożliwia efektywne zarządzanie strukturą danych w tabeli HTML pozwalając na oszczędność miejsca i uniknięcie zduplikowanych komórek W praktyce rowspan jest niezwykle przydatny w projektach gdzie dane muszą być prezentowane w sposób zorganizowany i czytelny Dobre zrozumienie tego atrybutu jest kluczowe w tworzeniu responsywnych i estetycznych stron internetowych Zastosowanie rowspan zgodne jest ze standardami W3C co czyni kod bardziej zgodnym z wieloma przeglądarkami i urządzeniami Warto również pamiętać że prawidłowe użycie atrybutów takich jak rowspan poprawia dostępność strony co jest ważnym aspektem współczesnego projektowania stron internetowych Wiedza o tym jak zarządzać strukturą tabel i używać odpowiednich atrybutów wpływa na lepsze doświadczenie użytkownika Jest to również istotne w kontekście SEO gdyż poprawna semantyka HTML może wpłynąć na lepsze indeksowanie witryny przez wyszukiwarki
Pytanie 4

Jakie polecenie w CSS umożliwia dodanie zewnętrznego arkusza stylów?

A. require
B. import
C. include
D. open
Polecenie 'import' w CSS służy do załączenia zewnętrznego arkusza stylów, co jest kluczowe dla organizacji i modularności kodu CSS. Użycie '@import' pozwala na ładowanie stylów z innych plików CSS na początku arkusza stylów, co ułatwia zarządzanie dużymi projektami. Na przykład, jeśli mamy plik 'style.css' i chcemy zaimportować 'reset.css', możemy użyć następującej składni: '@import 'reset.css';'. Dzięki temu możemy utrzymać rozdzielenie różnych stylów, co sprzyja lepszej organizacji kodu oraz jego ponownemu użyciu w przyszłości. Warto również zaznaczyć, że standardy CSS sugerują, aby używać '@import' z rozwagą, gdyż każde zaimportowanie pliku powoduje dodatkowe żądanie HTTP, co może wpłynąć na czas ładowania strony. Z tego powodu, dla większych projektów, często lepiej jest łączyć wszystkie style w jeden plik podczas produkcji, co można osiągnąć za pomocą narzędzi do kompresji CSS. Użycie '@import' jest zatem zgodne z dobrymi praktykami, szczególnie w fazie rozwoju, gdzie modularność i łatwość w zarządzaniu kodem są priorytetowe.
Pytanie 5

Formatowanie CSS dla akapitu określa styl szarej ramki z następującymi właściwościami:

p {
    padding: 15px;
    border: 2px dotted gray;
}
A. Linia kreskowa; grubość 2 px; odległości poza ramką 15 px
B. Linia ciągła; grubość 2 px; odległości pomiędzy tekstem a ramką 15 px
C. Linia ciągła; grubość 2 px; odległości poza ramką 15 px
D. Linia kropkowa; grubość 2 px; odległości pomiędzy tekstem a ramką 15 px
Odpowiedź ta jest prawidłowa, ponieważ w CSS stylizowanie elementu akapitu za pomocą podanego kodu definiuje ramkę o linii kropkowej, grubości 2 pikseli oraz paddingu wynoszącym 15 pikseli. Padding to przestrzeń wewnętrzna pomiędzy zawartością elementu a jego ramką, co oznacza, że tekst w akapicie będzie oddalony od krawędzi ramki o 15 pikseli. Styl ramki 'dotted' jest często używany w projektach webowych, aby stworzyć efekt wizualny, który jest mniej formalny, a zarazem estetyczny. Można go wykorzystać w kontekście wyróżniania ważnych informacji lub sekcji strony, co zwiększa czytelność i przyciąga uwagę użytkowników. Przykładem zastosowania może być sekcja z informacjami o promocjach, gdzie forma wizualna ma na celu przyciągnięcie wzroku. Używając standardów CSS, dobrego podejścia do UX (User Experience) oraz wytycznych W3C, projektanci stron internetowych mogą efektywnie komunikować intencje i priorytety poprzez stylowanie wizualne.
Pytanie 6

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>

Ilustracja do pytania
A. rys. A
B. rys. B
C. rys. C
D. rys. D
W języku HTML atrybut rowspan w znaczniku <td> pozwala na scalanie komórek w pionie co oznacza że dana komórka zajmuje miejsce w kilku wierszach tabeli W podanym kodzie pierwsza komórka w pierwszym wierszu posiada atrybut rowspan z wartością 2 co sprawia że zajmuje ona miejsce w dwóch wierszach Pierwszy wiersz zawiera dwie komórki z czego pierwsza jest połączona pionowo z komórką w drugim wierszu Druga komórka w pierwszym wierszu oraz jedyna komórka w drugim wierszu nie posiadają atrybutu rowspan ani colspan dlatego nie są połączone z innymi komórkami Takie użycie rowspan jest zgodne z praktykami HTML które umożliwiają tworzenie bardziej złożonych układów tabeli dzięki czemu można lepiej zarządzać przestrzenią w interfejsie użytkownika Jako że kod tworzy tabelę z dwiema kolumnami i dwoma wierszami gdzie pierwsza komórka po lewej stronie zajmuje dwa wiersze przedstawia to układ jak na rysunku B Możliwości jakie daje rowspan są niezwykle przydatne w sytuacjach gdy chcemy aby dane w tabeli były czytelniejsze i bardziej zorganizowane szczególnie w raportach czy formularzach gdzie różne kategorie danych muszą być jasno oddzielone
Pytanie 7

Przy założeniu, że nie istnieją inne definicje, jakie skutki będzie miało poniższe formatowanie CSS?

<style> td {padding: 30px; } </style>
…
<td style="padding: 10px;">Anna</td>
<td>Ewa</td>
A. margines wewnętrzny komórki z napisem Anna wyniesie 10 px, a z napisem Ewa – 30 px
B. marginesy wewnętrzne wszystkich komórek wyniosą 10 px
C. marginesy wewnętrzne wszystkich komórek wyniosą 30 px
D. margines wewnętrzny komórki z napisem Anna wyniesie 30 px, a z napisem Ewa – 10 px
Odpowiedź jest poprawna, ponieważ w kodzie HTML zastosowano bezpośrednie nadpisanie stylu dla komórki z napisem Anna. Chociaż w sekcji style zdefiniowano, że wszystkie komórki td mają padding 30px, to w przypadku komórki Anna zastosowano style inline, które mają wyższy priorytet i nadpisują ustalone wcześniej wartości. W rezultacie padding dla komórki Anna wynosi 10px. Natomiast dla pozostałych komórek, w tym komórki z napisem Ewa, obowiązuje reguła zdefiniowana globalnie w sekcji style, czyli padding wynosi 30px. Jest to przykład specyficzności w CSS, gdzie style inline są bardziej specyficzne niż style w sekcji style. W praktyce ważne jest, aby rozumieć hierarchię i specyficzność CSS, ponieważ pozwala to na skuteczne zarządzanie stylami i unikanie niezamierzonych zmian w wyglądzie strony. Dobra praktyka nakazuje unikać styli inline na rzecz zewnętrznych arkuszy stylów, co ułatwia zarządzanie kodem i czyni go bardziej czytelnym oraz łatwiejszym w utrzymaniu. Warto też stosować metodologie takie jak BEM, które pomagają w organizacji kodu CSS.
Pytanie 8

Co można powiedzieć o przedstawionym zapisie języka HTML5?

<title>Strona o psach</title>
A. Jest opcjonalny w języku HTML5 i nie musi występować w dokumencie.
B. Jest jedynie informacją dla robotów wyszukiwarek i nie jest wyświetlany przez przeglądarkę.
C. Zostanie wyświetlony w treści strony, na samej górze.
D. Pojawi się na karcie dokumentu w przeglądarce.
Brawo, Twoja odpowiedź jest prawidłowa! Znacznikiw języku HTML 5 służy do określenia tytułu strony internetowej, który jest wyświetlany na karcie przeglądarki. Nie jest to opcjonalna informacja - każda strona powinna mieć tytuł dla lepszej identyfikacji i optymalizacji SEO (Search Engine Optimization). Tytuł strony jest jednym z kluczowych elementów dla SEO, ponieważ wyszukiwarki internetowe, takie jak Google, często wykorzystują tytuł strony jako główny link w wynikach wyszukiwania. Tytuł strony jest również ważny z punktu widzenia użytkownika - dobrze sformułowany tytuł może przyciągnąć uwagę potencjalnego odbiorcy i zachęcić go do odwiedzenia strony. Warto zauważyć, że tytuł nie jest wyświetlany bezpośrednio na stronie, ale na pasku tytułu przeglądarki lub na karcie strony. To ważne rozróżnienie pomaga zrozumieć, dlaczego niektóre elementy są widoczne dla użytkownika, a inne nie.
Pytanie 9

Które z pól są umieszczone w formularzu?





Studia podyplomowe Kurs

A. Textarea, Select, Input(Radio), Input(Radio), Input(Reset), Input(Submit)
B. Input(Text), Select, Input(Radio), Input(Radio), Input (Submit), Input(Reset)
C. Textarea, Option, Input(Checkbox), Input(Checkbox), Input (Submit), Input(Reset)
D. Input(Text), Input(Checkbox), Select, Select, Input(Submit), Input(Reset)
Twoja odpowiedź sugeruje pewne nieporozumienia co do typów pól używanych w formularzach html. Przykładowo, Textarea to pole wieloliniowego tekstu, które nie zostało użyte w tym formularzu. Podobnie, Element Option jest zazwyczaj używany wewnątrz elementu Select i nie jest samodzielnym polem formularza. Co więcej, Input(Checkbox) to pole wyboru, które pozwala na zaznaczenie wielu opcji. W tym formularzu, używane są przyciski wyboru (Input(Radio)), które są podobne, ale pozwalają tylko na wybór jednej opcji. Wreszcie, należy pamiętać, że nie wszystkie formularze muszą zawierać wszystkie typy pól. Różne typy pól są używane w zależności od tego, jakiego rodzaju informacje chcemy zebrać. Ważne jest, aby zrozumieć różnice między nimi i kiedy ich używać, aby stworzyć skuteczny formularz, który będzie łatwy do wypełnienia dla użytkowników i będzie zbierał potrzebne informacje.
Pytanie 10

W języku CSS zapis

p::first-line {font-size: 150%;}
zastosowany na stronie z wieloma paragrafami, z których każdy zawiera kilka linii, spowoduje, że
A. pierwsza linia każdego paragrafu będzie miała większą czcionkę niż pozostałe linie
B. pierwszy paragraf na stronie w całości będzie miał powiększoną czcionkę
C. cały tekst paragrafu zostanie powiększony o 150%
D. pierwsza linia każdego paragrafu będzie miała mniejszą czcionkę niż pozostałe linie
Odpowiedź jest trafna, bo selektor CSS 'p::first-line' służy do stylizowania wyłącznie pierwszej linii każdego paragrafu. Kiedy przypisujesz styl 'font-size: 150%', to znaczy, że czcionka tej pierwszej linii będzie większa o 50% od standardowego rozmiaru ustalonego w CSS. To dobra praktyka w web designie, bo pomaga w czytelności i nadawaniu hierarchii informacjom. Na przykład, fajnie jest wyróżnić rozpoczęcie tekstu albo zaakcentować ważne dane. Pamiętaj tylko, że efekt będzie widoczny tylko, gdy tekst ma więcej niż jedną linię, bo w przeciwnym razie powiększenie się nie ujawni. Dodatkowo, korzystanie z pseudo-elementów, jak '::first-line', to coś, co jest w standardach CSS i jest naprawdę cenione w branży.
Pytanie 11

Jakie jest poprawne zapisanie tagu HTML?

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

Wskaż fragment CSS, który odpowiada rozkładowi bloków 2-5, zakładając, że zostały one zbudowane na podstawie podanego kodu HTML.

Ilustracja do pytania
A. Kod 3
B. Kod 4
C. Kod 2
D. Kod 1
Kod 2 jest prawidłowy, ponieważ dla bloków 2 i 3 stosowane jest ustawienie float: left; co pozwala na ich ułożenie w jednym wierszu z lewej strony. Blok 4 z float: right; umiejscawia się po prawej stronie, co umożliwia uzyskanie układu bloków 2-4 w jednej linii, odpowiadając schematowi. Blok 5 z float: left; rozpoczyna nowy wiersz poniżej, zgodnie z założonym układem. Takie użycie właściwości float oraz width pozwala na zorganizowanie elementów na stronie bez użycia flexbox lub grid, co jest klasycznym podejściem do układu strony w CSS. Dobrym przykładem praktycznego zastosowania jest tworzenie responsywnych layoutów, gdzie float można używać do kontrolowania przepływu elementów na mniejszych ekranach. Mimo że obecnie technologia flexbox i grid jest bardziej popularna, znajomość stosowania float nadal jest istotna, zwłaszcza w kontekście starszych projektów, które mogą wymagać utrzymania zgodności z wcześniejszymi wersjami CSS. To rozwiązanie zapewnia zgodność z wieloma starszymi przeglądarkami, co jest kluczowe w przypadku długoterminowych projektów webowych.
Pytanie 13

Wskaż element, który definiuje pole edycyjne formularza zgodne z ilustracją

Ilustracja do pytania
A. <input type="number" id="mm" name="hh" min="0" max="24">
B. <input type="month" id="hh" name="mm">
C. <input type="date" id=" minutes" name="hours">
D. <input type="time" id="minutes" name="hours">
Prawidłowy wybór to <input type="time" id="minutes" name="hours">, ponieważ dokładnie taki element HTML5 służy do wprowadzania godziny w formacie hh:mm, czyli tak jak na ilustracji. Atrybut type="time" mówi przeglądarce, że pole ma przyjmować tylko wartości czasu, bez daty, miesięcy czy liczb dowolnego typu. Zgodnie ze specyfikacją HTML Living Standard oraz HTML5, przeglądarka powinna wtedy wyświetlić natywne kontrolki do wyboru godziny (np. rozwijane listy, suwak, mały zegarek – zależy od systemu i przeglądarki). Dzięki temu użytkownik ma mniejsze ryzyko pomyłki, a walidacja odbywa się częściowo automatycznie. Z mojego doświadczenia warto korzystać z type="time" zawsze, gdy formularz dotyczy konkretnych godzin, np. godzina rozpoczęcia pracy, rezerwacja wizyty, planowanie spotkania online. Po stronie serwera (np. w PHP) to pole przychodzi jako tekst w formacie „HH:MM”, co jest łatwe do dalszego przetwarzania, parsowania do obiektu DateTime albo zapisu w bazie danych w typie TIME. Dobra praktyka jest też taka, żeby nazwy atrybutów id i name były semantyczne. W tym zadaniu nie ma to wpływu na poprawność odpowiedzi, ale w realnym projekcie lepiej byłoby użyć np. id="endTime" i name="end_time". Ułatwia to później pracę z JavaScriptem i po stronie backendu. Warto też pamiętać o dodaniu atrybutów min i max, jeśli chcemy ograniczyć zakres godzin (np. od 08:00 do 20:00), oraz pattern lub dodatkowej walidacji JS, jeśli mamy specyficzne wymagania. Mimo że ilustracja nie pokazuje tych szczegółów, sam mechanizm type="time" jest tu absolutnie kluczowy i zgodny z dobrymi praktykami front-endowymi.
Pytanie 14

Który zbiór znaczników, określających projekt strony internetowej w sposób semantyczny, jest zgodny z normą HTML 5?

Ilustracja do pytania
A. Zbiór 3
B. Zbiór 2
C. Zbiór 4
D. Zbiór 1
Zrozumienie semantyki HTML jest kluczowe dla tworzenia zoptymalizowanych stron internetowych, a wybór odpowiednich znaczników ma duży wpływ na strukturę i dostępność dokumentu. W niepoprawnych odpowiedziach brak jest semantycznej spójności z założeniami HTML5. Wykaz 1 używa <article> w Bloku 2, co oznaczałoby samodzielną jednostkę, np. wpis na blogu lub artykuł prasowy, co nie jest odpowiednie w kontekście głównej treści strony. Wykaz 2 używa <div>, co jest niezalecane, gdyż divy są ogólnymi kontenerami, a HTML5 promuje użycie bardziej szczegółowych znaczników semantycznych. Wykaz 3 zastosował <main> dwukrotnie, co jest błędem, ponieważ <main> powinien być użyty tylko raz na stronie, jako główny element zawartości. Pominięcie znaczników takich jak <aside> lub <header> w odpowiednich miejscach zubaża strukturę dokumentu, co wpływa negatywnie na SEO i dostępność. Zasady semantyczności w HTML5 mają na celu ułatwienie interpretacji kodu zarówno przez przeglądarki, jak i przez urządzenia wspomagające, co jest kluczowe w nowoczesnym projektowaniu stron internetowych. Właściwe oznaczenie elementów strony pozwala na lepszą organizację treści i ułatwia nawigację, co jest ważne dla użytkowników i wyszukiwarek internetowych.
Pytanie 15

Jakie oprogramowanie NIE JEST systemem do zarządzania treścią (CMS)?

A. Apache
B. WordPress
C. Joomla
D. Mambo
Apache to serwer HTTP, który jest wykorzystywany do hostowania stron internetowych. Nie jest to system zarządzania treścią (CMS), ponieważ jego głównym zadaniem jest obsługa żądań HTTP i dostarczanie plików do przeglądarek internetowych. Systemy zarządzania treścią, takie jak Joomla, WordPress czy Mambo, to aplikacje, które umożliwiają użytkownikom łatwe tworzenie, edytowanie i zarządzanie treściami na stronach internetowych bez konieczności posiadania zaawansowanej wiedzy technicznej. Przykładem zastosowania Apache może być hostowanie strony internetowej stworzonej w jednym z wymienionych CMS, gdzie Apache dostarcza zasoby, a CMS zarządza treścią i logiką aplikacji. Dobrą praktyką w branży jest oddzielanie warstwy serwera od warstwy aplikacji, co pozwala na lepszą skalowalność i utrzymanie, a także na łatwiejszą aktualizację i zarządzanie bezpieczeństwem.
Pytanie 16

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

A. </ hr>
B. </hr?>
C. <hr>
D. </ hr />
Zarówno </ hr>, </hr?>, jak i </ hr /> są przykładami niepoprawnych składni w kontekście HTML5. Element <hr> jest samodzielny i nie wymaga zamknięcia, co oznacza, że dodawanie znaku zamykającego jest zbędne i w rzeczywistości stanowi błąd. Użycie </ hr> sugeruje, że <hr> byłoby elementem, który wymaga zamknięcia, co jest sprzeczne z jego definicją w HTML5. Z kolei </hr?> to przykład błędnej składni, ponieważ zawiera niepoprawny znak zapytania, który nie ma uzasadnienia w HTML i może prowadzić do nieprzewidywalnych efektów w renderowaniu strony przez przeglądarki. Ostatecznie, </ hr /> również jest nieprawidłowe, ponieważ dodanie ukośnika przed zamknięciem nie jest potrzebne w przypadku elementów samodzielnych. Takie błędne wykorzystanie składni może prowadzić do niepoprawnego wyświetlania strony i problemów z jej interpretacją przez programy przetwarzające HTML. Dlatego ważne jest, aby dobrze znać zasady walidacji HTML i stosować się do nich, aby zapewnić poprawne działanie i zgodność ze standardami sieciowymi.
Pytanie 17

W HTML5 semantycznym znacznikiem, który służy do określenia dwóch sekcji widocznych po prawej stronie na rysunku, zawierających wiadomości oraz aktualności, jest

Ilustracja do pytania
A. &lt;nav&gt;
B. &lt;footer&gt;
C. &lt;article&gt;
D. &lt;main&gt;
Bardzo często osoby uczące się HTML5 mylą znaczniki semantyczne, szczególnie gdy chodzi o takie elementy jak <nav>, <main>, <footer> czy <article>. To w sumie zrozumiałe, bo na pierwszy rzut oka mogą się wydawać podobne, ale każdy z nich ma swoje konkretne zadanie. <nav> to sekcja nawigacyjna – zawiera odnośniki do innych części serwisu, więc zwykle stosuje się go do menu, bocznych pasków z linkami czy paneli nawigacyjnych. Umieszczenie w <nav> sekcji z wiadomościami czy aktualnościami to klasyczny przykład złego zrozumienia przeznaczenia tego elementu – w praktyce taka struktura zaburza logikę nawigacji i dostępność strony. <main> z kolei oznacza główną i unikalną treść dokumentu, tej, która jest najważniejsza dla danej podstrony. Jednak <main> używamy tylko raz na stronie – nie powinno się go powielać ani używać do oznaczania pojedynczych sekcji, takich jak wiadomości, bo to prowadzi do błędnej interpretacji przez wyszukiwarki i czytniki ekranowe. <footer> odpowiada za stopkę strony lub sekcji, czyli miejsce na informacje jak prawa autorskie, dane kontaktowe, linki do polityk czy podsumowania – wrzucenie tam wiadomości czy aktualności byłoby mocno nielogiczne. Wybierając niewłaściwy znacznik, można popełnić błąd, który potem utrudnia rozwój strony, jej pozycjonowanie czy poprawność dostępności. Najczęstszy błąd to kierowanie się wyglądem, a nie semantyką – a w HTML5 to właśnie semantyka daje najwięcej korzyści na dłuższą metę.
Pytanie 18

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

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

Jaką funkcję spełnia atrybut value w polu formularza XHTML?

<input type="text" name="name" value="value">
A. określa nazwę pola
B. czyni pole jedynie do odczytu
C. określa domyślną wartość
D. definiuje maksymalną długość pola
Atrybut value w polu formularza XHTML określa domyślną wartość, jaka pojawi się w polu tekstowym po załadowaniu strony. Jest to przydatne, gdy chcemy zasugerować użytkownikowi domyślne dane lub ułatwić wprowadzanie informacji. Przykładem może być formularz logowania, gdzie atrybut value jest używany do wczytywania zapisanego wcześniej adresu e-mail użytkownika. W formularzach XHTML stosuje się ten atrybut zgodnie z dobrymi praktykami, aby poprawić doświadczenie użytkownika i ułatwić interakcję z witryną. Warto zauważyć, że w przypadku innych typów pól formularzy, na przykład checkbox lub radio, atrybut value określa wartość, która zostanie przesłana, gdy dane pole zostanie zaznaczone. W kontekście dobrych praktyk należy także pamiętać o zabezpieczeniach formularzy, takich jak walidacja danych po stronie serwera, aby zapobiec potencjalnym lukom bezpieczeństwa wynikającym z nieoczekiwanych danych wejściowych. Stosowanie atrybutu value w sposób przemyślany pozwala również na lepszą integrację formularzy z mechanizmami autouzupełniania przeglądarek, co jest korzystne dla użytkowników
Pytanie 20

Selektor CSS a:link {color:red} użyty w kaskadowych arkuszach stylów określa

A. klasę
B. pseudoklasę
C. identyfikator
D. pseudoelement
Zdecydowanie coś poszło nie tak w Twojej odpowiedzi, bo wygląda na to, że nie do końca rozumiesz podstawowe pojęcia związane z CSS. Klasy i identyfikatory, używane do grupowania elementów i nadawania im stylów, to zupełnie inna sprawa niż pseudoklasy. Klasy w CSS definiujesz przez kropkę, jak na przykład .nazwa-klasy, a pseudoklasy zawsze zaczynają się od dwukropka. Klasy są super do stylizacji większej grupy elementów, podczas gdy identyfikatory są unikalne i służą do stylizacji pojedynczych elementów, zaczynają się od hasha (#). Pseudoelementy, które mogą być mylone z pseudoklasami, pomagają stylizować tylko część elementów, jak na przykład ::before lub ::after, co pozwala na dodawanie treści przed lub po danym elemencie. Rozróżnienie tych pojęć jest naprawdę kluczowe, gdy chcesz dobrze zrozumieć CSS. Często zdarza się, że ludzie mylą te pojęcia, co prowadzi do chaosu przy stylizacji stron. Żeby uniknąć tych nieporozumień, warto przejrzeć dokumentację CSS i trochę poćwiczyć z różnymi selektorami. Z mojej perspektywy, jest to najlepszy sposób, by zrozumieć jak to wszystko działa i jakie są różnice między tymi pojęciami.
Pytanie 21

W języku CSS zdefiniowano następujące formatowanie: 

 h1 i {color: red;}
Kolorem czerwonym zostanie zapisany
A. cały tekst nagłówka pierwszego stopnia oraz pochylony tekst akapitu.
B. tylko tekst pochylony we wszystkich poziomach nagłówków.
C. cały tekst nagłówka pierwszego stopnia oraz cały tekst pochylony, niezależnie od tego, w którym miejscu strony się znajduje.
D. tylko tekst pochylony nagłówka pierwszego stopnia.
Pozostałe odpowiedzi zawierają nieprawidłowe założenia co do tego, jak działają selektory w CSS. Odpowiedź sugerująca, że czerwonym kolorem zostanie zapisany tylko tekst pochylony we wszystkich poziomach nagłówków, nie jest prawidłowa, ponieważ kod CSS h1 i {color: red;} wyraźnie określa, że reguła dotyczy tylko tekstu pochylonego (<i>) wewnątrz nagłówka pierwszego stopnia (<h1>). Podobnie, odpowiedź mówiąca, że cały tekst nagłówka pierwszego stopnia oraz cały tekst pochylony, niezależnie od tego w którym miejscu strony się znajduje, będzie czerwony, jest niepoprawna. Ta reguła CSS nie wpływa na cały tekst nagłówka pierwszego stopnia, ani na pochylony tekst w innych miejscach dokumentu. Wreszcie, odpowiedź sugerująca, że cały tekst nagłówka pierwszego stopnia oraz pochylony tekst akapitu będą czerwone, jest również nieprawidłowa, ponieważ jak wcześniej wspomniano, reguła dotyczy tylko tekstu pochylonego umieszczonego bezpośrednio w nagłówku pierwszego stopnia. Rozróżnienie między różnymi rodzajami selektorów i zrozumienie, jak są interpretowane przez przeglądarkę, to kluczowe umiejętności w codziennym kodowaniu CSS.
Pytanie 22

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

A. identyfikator.
B. pseudoelement.
C. klasę.
D. pseudoklasę.
Wybór odpowiedzi związanej z klasą, identyfikatorem lub pseudoelementem nie uwzględnia kluczowej różnicy między tymi pojęciami a pseudoklasami. Klasa w CSS definiuje grupę elementów, które mają wspólne cechy stylistyczne, natomiast identyfikator jest unikalny dla jednego elementu na stronie i powinien być używany tylko raz. Klasy i identyfikatory są przypisywane za pomocą atrybutów 'class' i 'id' w HTML, co czyni je bardziej statycznymi, podczas gdy pseudoklasy odnoszą się do konkretnego stanu elementu, co wprowadza element dynamiki. Pseudoelementy, takie jak '::before' lub '::after', również różnią się, ponieważ pozwalają na stylizację części elementu, a nie jego całego stanu. Typowe błędy myślowe związane z myleniem tych pojęć wynikają często z braku zrozumienia, jak działa kaskadowość i dziedziczenie w CSS. Kluczowe jest zrozumienie, że pseudoklasy są narzędziem do reakcji na interakcje użytkownika, co pozwala na bardziej zaawansowane i intuicyjne projektowanie stron internetowych. Ignorowanie tych różnic prowadzi do nieefektywnego stylowania i może obniżać jakość interfejsów użytkownika.
Pytanie 23

Grafika powinna być zapisana w formacie GIF, jeśli

A. konieczne jest zapisanie obrazu lub animacji
B. jest to grafika wektorowa
C. istnieje potrzeba zapisu obrazu w formie bez kompresji
D. jest to obraz w technologii stereoskopowej
Format GIF (Graphics Interchange Format) jest powszechnie wykorzystywany do przechowywania obrazów oraz animacji. Dzięki obsłudze przezroczystości oraz możliwości tworzenia prostych animacji, GIF stał się standardem w przypadku grafiki na stronach internetowych. Jego ograniczenie do 256 kolorów sprawia, że idealnie nadaje się do prostych grafik, takich jak logo czy ikony, gdzie nie jest wymagana pełna gama kolorów, co ma miejsce w formatach takich jak JPEG czy PNG. W przypadku animacji, GIF umożliwia zapis wielu klatek w jednym pliku, co pozwala na odtwarzanie sekwencji obrazu bez potrzeby korzystania z dodatkowego oprogramowania. Praktyczne zastosowanie GIF-a można zaobserwować w mediach społecznościowych, gdzie animowane obrazki są często wykorzystywane do wyrażania emocji, a także na stronach internetowych do przedstawiania logo w ruchu. Używanie formatu GIF w kontekście animacji jest zgodne z dobrą praktyką w branży, ponieważ pozwala na efektywne zarządzanie zasobami wizualnymi oraz zwiększa atrakcyjność treści wizualnych.
Pytanie 24

W przypadku przedstawionego fragmentu kodu walidator HTML zgłosi błąd, ponieważ

<img src="kwiat.jpg alt="kwiat">
A. użyto niewłaściwego znacznika do wyświetlenia obrazu
B. nie odnaleziono pliku kwiat.jpg
C. nie zamknięto cudzysłowu
D. wprowadzono nieznany atrybut alt
Poprawna odpowiedź to nie domknięto cudzysłowu ponieważ w kodzie HTML atrybuty muszą być poprawnie zamknięte aby poprawnie interpretować ich wartości. W przedstawionym fragmencie kodu dla znacznika img brakuje końcowego cudzysłowu po wartości src co stanowi błąd składniowy. Tego typu błędy mogą prowadzić do nieprawidłowego działania strony ponieważ przeglądarka nie jest w stanie jednoznacznie określić końca wartości atrybutu co może skutkować nieprawidłowym renderowaniem danych. Zgodnie z najlepszymi praktykami każde otwarte cudzysłowie powinno być zamknięte aby zapewnić poprawną interpretację kodu. Ponadto stosowanie poprawnego zamykania cudzysłowów zwiększa czytelność kodu co jest istotne przy współpracy zespołowej i ułatwia jego utrzymanie. Warto także korzystać z walidatorów HTML które automatycznie wykrywają takie błędy pomagając w ich szybkim usunięciu. Tego rodzaju narzędzia są kluczowe w procesie tworzenia stron internetowych ponieważ umożliwiają weryfikację zgodności kodu z obowiązującymi standardami co ma bezpośredni wpływ na jego wydajność i kompatybilność z różnymi przeglądarkami.
Pytanie 25

p { font-family: Arial, Helvetica, sans-serif; }
Zdefiniowany styl dla selektora p spowoduje, że tekst w paragrafie zostanie wyświetlony czcionką:
A. bezszeryfową.
B. szeryfową.
C. dekoracyjną.
D. maszynową.
W tym pytaniu łatwo się pomylić, bo wiele osób bardziej kojarzy konkretne nazwy fontów niż ich rodziny. Kluczowe jest zrozumienie, jak działa właściwość font-family w CSS. Zapis font-family: Arial, Helvetica, sans-serif definiuje listę krojów w kolejności priorytetu. Przeglądarka sprawdza po kolei: najpierw próbuje użyć Ariala, potem Helvetiki, a jeśli żaden z nich nie jest dostępny na urządzeniu, wybiera dowolny systemowy font z rodziny sans-serif. I to właśnie ostatni element – sans-serif – określa typ czcionki, czyli że ma to być krój bezszeryfowy. Czcionka szeryfowa (serif) to np. Times New Roman czy Georgia, z charakterystycznymi „ogonami” i ozdobnikami na końcach liter. Tutaj nie ma ani nazwy serif, ani generycznego słowa serif, więc nie ma podstaw, by mówić o kroju szeryfowym. Czcionka maszynowa, nazywana w CSS monospace, to taka, w której wszystkie znaki mają tę samą szerokość, jak w starych maszynach do pisania (np. Courier New). W kodzie nie pojawia się słowo monospace ani żaden typowy font maszynowy, więc to też odpada. Z kolei określenia typu „dekoracyjna” mogą mylić, bo w CSS istnieje kiedyś częściej używany generic fantasy, czasem kojarzony z ozdobnymi krojami, ale w tym przykładzie nie mamy ani fantasy, ani cursive, tylko wyraźnie sans-serif. Typowy błąd myślowy polega na tym, że ktoś patrzy na nazwę Arial i nie kojarzy jej z rodziną bezszeryfową, albo sugeruje się wyglądem przykładowego tekstu z jakiegoś edytora. W praktyce jednak to właśnie Arial i Helvetica są klasycznymi reprezentantami rodziny sans-serif. Warto patrzeć na ostatni człon deklaracji font-family – ten generyczny typ jest zawsze najważniejszą wskazówką, do jakiej kategorii należy krój pisma w danym stylu.
Pytanie 26

Jakie jest znaczenie powtarzania w zdefiniowanym stylu CSS?

body {
  background-image: url("rysunek.gif");
  background-repeat: repeat-y;
}
A. obrazu umieszczonego w tle strony w pionie
B. obrazu umieszczonego w tle strony w poziomie
C. tła każdego z paragrafów
D. obrazu umieszczonego przy użyciu znacznika img
Rozważając inne odpowiedzi nietrudno dostrzec podstawowe błędy w ich koncepcjach Rysunek umieszczony w tle strony w poziomie odpowiadałby wartości repeat-x a nie repeat-y To fundamentalne rozróżnienie wynika z konwencji nazewnictwa CSS która jasno określa kierunki powtarzania W przypadku użycia znacznika img obraz jest osadzony w treści dokumentu HTML a nie jako tło CSS Powtarzanie w takim kontekście nie ma miejsca ponieważ obrazki w znacznikach img są kontrolowane za pomocą innych mechanizmów jak szerokość wysokość czy pozycjonowanie w ramach układu strony Ostatnia opcja odnosząca się do tła każdego ze znaczników akapitu wykazuje niezrozumienie kontekstu CSS Deklaracja body odnosi się do całego dokumentu a nie do poszczególnych elementów takich jak akapity aby zmienić tło akapitów należałoby użyć selektora p lub innego klasyfikatora odpowiadającego tym elementom Nietrafne odpowiedzi wynikają z nieznajomości podstawowych zasad działania CSS oraz ich zastosowania w praktyce co podkreśla potrzebę dogłębnego zrozumienia jak poszczególne właściwości wpływają na układ i wygląd strony internetowej
Pytanie 27

Dla strony internetowej stworzono grafikę rysunek.jpg o wymiarach: szerokość 200 px, wysokość 100 px. Jak można wyświetlić tę grafikę jako miniaturę – pomniejszoną z zachowaniem proporcji, używając znacznika?

A. <img src="rysunek.png">
B. <img src="rysunek.png" style="width: 50px">
C. <img src="rysunek.png" style="width: 25px; height:25px;">
D. <img src="rysunek.png" style="width: 25px; height:50px;">
Pozostałe odpowiedzi niestety nie trzymają się zasady zachowania proporcji, jak zmniejszamy grafikę. W pierwszej opcji, <img src="rysunek.png" style="width: 25px; height:50px"> zestawione wartości szerokości i wysokości są krzywe, co powoduje zniekształcenie obrazu. Oryginalny rysunek ma proporcje 2:1, a tu wychodzi 1:2, co może wprowadzać ludzi w błąd. W trzeciej opcji, <img src="rysunek.png"> brak wskazania szerokości i wysokości sprawia, że obrazek wyświetla się w swoim pierwotnym rozmiarze, a to nie jest cel, bo chcemy mieć miniaturę. A ostatnia odpowiedź, <img src="rysunek.png" style="width: 25px; height:25px;"> ustala jednakowe wymiary, przez co wychodzi kwadratowa miniaturka, co nie zgadza się z oryginalnymi proporcjami. Generalnie, niepoprawne odpowiedzi mogą wynikać z braku zrozumienia, dlaczego dbanie o proporcje w grafikach jest takie ważne. To kluczowe zagadnienie w projektowaniu stron, bo dobre proporcje to podstawa estetyki i funkcjonalności wizualnych elementów na stronie.
Pytanie 28

Które z wymienionych par znaczników HTML mają identyczny efekt wizualny na stronie internetowej, jeśli nie zastosowano żadnych stylów CSS?

A. <meta> oraz <title>
B. <b> i <strong>
C. <p> oraz <h2>
D. <b> i <big>
Odpowiedź <b> i <strong> jest poprawna, ponieważ oba znaczniki służą do wyróżniania tekstu, przy czym nie mają one różnicy w wizualizacji, jeśli nie zastosowano żadnych stylów CSS. Z punktu widzenia semantyki HTML, <strong> jest znacznikiem, który wyraża większe znaczenie dla zawartego w nim tekstu, co jest korzystne dla dostępności oraz SEO, ale wizualnie, bez dodatkowych stylów, obie etykiety wykazują te same cechy. Przykładowo, można ich używać w sytuacjach, gdy chcemy wyróżnić ważne informacje w artykule lub nagłówku. Zastosowanie tych znaczników zgodnie z dobrymi praktykami HTML pozwala na lepsze zrozumienie struktury strony przez wyszukiwarki oraz czytniki ekranu, co ma znaczenie w kontekście dostępności. W związku z tym, wyróżnianie tekstu za pomocą <b> i <strong> jest nie tylko estetyczne, ale także funkcjonalne, wspierając zarówno użytkowników, jak i algorytmy wyszukiwania.
Pytanie 29

W CSS określono styl dla paragrafu, który nada mu poniższe cechy:

background-color: red;
color: blue;
margin: 40px;
A. tło w kolorze czerwonym, tekst w kolorze niebieskim, marginesy zewnętrzne o wartości 40px
B. tło w kolorze niebieskim, tekst w kolorze czerwonym, marginesy wewnętrzne o wartości 40px
C. tło w kolorze niebieskim, tekst w kolorze czerwonym, marginesy zewnętrzne o wartości 40px
D. tło w kolorze czerwonym, tekst w kolorze niebieskim, marginesy wewnętrzne o wartości 40px
W podanym przykładzie z CSS zastosowano trzy kluczowe właściwości stylizujące element HTML: background-color color oraz margin. Właściwość background-color określa kolor tła danego elementu tutaj przyjęto wartość red co oznacza czerwone tło. Właściwość color definiuje kolor tekstu w elemencie który w tym przypadku jest ustawiony na blue czyli niebieski. Ostatnią właściwością jest margin która odpowiada za marginesy zewnętrzne elementu. Marginesy zewnętrzne to przestrzeń wokół elementu od jego krawędzi do sąsiadujących elementów i w tym przykładzie mają wartość 40px. Takie ustawienia są często używane w praktyce aby zapewnić czytelność i estetykę projektu. Używanie marginesów zewnętrznych to dobra praktyka w celu zachowania odpowiednich odstępów w układzie strony. Warto podkreślić że użycie tych właściwości jest zgodne ze standardami CSS zapewniając kompatybilność z większością przeglądarek. Właściwe stosowanie kolorów i marginesów jest kluczowe w projektowaniu przyjaznym dla użytkownika UX oraz estetycznie spójnych interfejsów graficznych.
Pytanie 30

W HTML, wartość atrybutu target, która umożliwia otwieranie strony w nowym oknie lub karcie, to

A. _blank
B. _self
C. _parent
D. _top
Wartości atrybutu target w HTML mają określoną funkcjonalność, a każda z nich pełni inną rolę w kontekście otwierania linków. W przypadku _parent, ta wartość odnosi się do ramki, która zawiera aktualny dokument i pozwala na otwieranie linków w tej ramce. Może to prowadzić do nieoczekiwanych zachowań, zwłaszcza w aplikacjach webowych, gdzie często używane są ramki do organizacji treści. Wybór _self natomiast powoduje, że link otworzy się w tej samej ramce, co jest standardowym zachowaniem, ale nie jest odpowiedni, gdy zależy nam na otwarciu nowego kontekstu. Z kolei _top wymusza, aby link otworzył się w pełnoekranowym widoku, co również może być zbędne, jeśli strona zawiera więcej niż jedną ramkę. Prawidłowe zrozumienie tych wartości jest kluczowe, ponieważ ich niewłaściwe użycie może wpłynąć na nawigację i doświadczenia użytkowników, co jest niewłaściwą praktyką w kontekście projektowania intuicyjnych interfejsów. Dlatego kluczowe jest zastosowanie target="_blank" w odpowiednich sytuacjach, co pozwala zachować kontrolę nad nawigacją użytkownika i zapewnić lepszą organizację treści.
Pytanie 31

W CSS wartości: underline, overline, blink są powiązane z atrybutem

A. text-decoration
B. font-weight
C. text-style
D. font-style
Atrybut text-decoration w CSS jest tym, co pozwala na dodawanie różnych efektów do tekstu. Możemy dzięki niemu użyć takich rzeczy jak underline, overline czy nawet blink, chociaż to ostatnie nie jest już zbyt popularne, bo wiele przeglądarek to ignoruje ze względu na dostępność. Dzięki tym efektom tekst może wyglądać bardziej estetycznie, a czytelność też się poprawia. Na przykład, jeśli użyjesz 'p { text-decoration: underline; }', to cały tekst w tym paragrafie będzie podkreślony. W CSS3 dodano też nowe możliwości, jak text-decoration-color czy text-decoration-style, co daje jeszcze większą kontrolę nad tym, jak nasz tekst będzie wyglądał. Dlatego myślę, że umiejętność korzystania z text-decoration jest naprawdę ważna dla każdego, kto zajmuje się tworzeniem stron internetowych.
Pytanie 32

W CSS zapis w postaci 

 h1::first-letter {color: red;}

spowoduje, że kolor czerwony zostanie zastosowany do

A. pierwszej linii akapitu
B. pierwszej litery nagłówka w pierwszym stopniu
C. pierwszej litery nagłówka w drugim stopniu
D. tekstu nagłówka w pierwszym stopniu
Zapis <span>h1::first-letter {color: red;} </span> jest w porządku, bo korzysta z pseudoelementu :first-letter, który działa na pierwszą literkę w nagłówku h1. To całkiem fajne, bo możemy w ten sposób stylizować tę pierwszą literę i nadać nagłówkom ciekawszy wygląd. Na przykład, jeśli mamy nagłówek h1 z napisem 'Witaj świecie', to dzięki temu kodowi, litera 'W' zrobi się czerwona. W CSS warto ogarnąć, że :first-letter działa tylko na bloki, takie jak nagłówki czy akapity, więc warto to mieć na uwadze, gdy coś stylizujemy. Używanie pseudoelementów to dobre podejście do tworzenia ładnych i funkcjonalnych interfejsów, a przy okazji daje nam większą kontrolę nad tym, jak wyglądają nasze elementy.
Pytanie 33

W kaskadowych arkuszach stylów do oznaczenia selektora klasy wykorzystuje się symbol

A. #
B. *
C. : (dwukropek)
D. . (kropka)
Odpowiedzi #, *, oraz : nie są poprawne w kontekście definicji selektorów klas w CSS. Symbol # jest używany do definiowania selektorów identyfikatorów, co oznacza, że w przypadku elementu z identyfikatorem 'element1', selektor w CSS będzie wyglądał tak: #element1. Identyfikatory są unikalne dla danego elementu w dokumencie i mogą być używane tylko raz, co sprawia, że są mniej elastyczne w porównaniu do klas. Użycie identyfikatorów jest często niezalecane, gdyż prowadzi do mniejszej reużywalności stylów. Z kolei symbol * jest selektorem uniwersalnym, który odnosi się do wszystkich elementów na stronie. Chociaż może być użyteczny w pewnych sytuacjach, jego nadużywanie może prowadzić do spadku wydajności, zwłaszcza w większych projektach, ponieważ styluje każdy element w dokumencie. Ostatni symbol : jest używany w pseudo-klasach i pseudo-elementach, takich jak :hover czy ::before, które pozwalają na stylizację elementów w specyficznych stanach lub na dodawanie stylów do części elementu. Pojęcia te są często mylone z klasami, co prowadzi do błędnych wniosków i nieefektywnego zarządzania stylem. Używanie właściwych selektorów jest kluczowe dla utrzymania dobrze zorganizowanego i wydajnego kodu CSS.
Pytanie 34

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. <big>Rozdział 1</big>tekst<big>Podrozdział 1.1</big>tekst<big>Podrozdział 1.2</big>
B. <h1>Rozdział 1<p>tekst<h2>Podrozdział 1.1<p>tekst<h2>Podrozdział 1.2
C. <ul><li>Rozdział 1<li>tekst<li>Podrozdział 1.1<li>tekst<li>Podrozdział 1.2</ul>
D. <h1>Rozdział 1</h1><p>tekst</p><h2>Podrozdział 1.1</h2><p>tekst</p><h2>Podrozdział 1.2</h2>
Pierwszy z zaproponowanych kodów posiada poważne błędy, ponieważ nie zamyka tagów <p> oraz <h2>. Poprawne HTML wymaga, aby wszystkie otwarte tagi były odpowiednio zamknięte, co czyni kod nieczytelnym dla przeglądarek i może prowadzić do nieprzewidywalnych wyników wyświetlania. Druga propozycja definiuje strukturę jako listę nieuporządkowaną, co jest nieadekwatne w kontekście przedstawionej hierarchii nagłówków. Lista nieuporządkowana (<ul>) ma na celu grupowanie elementów, a nie definiowanie nagłówków i podrozdziałów, co narusza zasady semantyki HTML. Ostatnia odpowiedź używa tagu <big>, który nie jest zalecany w nowoczesnym HTML, gdyż nie ma on semantycznego znaczenia i nie wpływa na SEO w sposób pożądany. Ponadto, tag <big> nie zapewnia struktury dokumentu, a jedynie zmienia rozmiar tekstu, co jest niewłaściwe w kontekście hierarchii treści. Wszelkie te błędy nie tylko wpływają negatywnie na czytelność strony, ale również mogą obniżać jej pozycjonowanie w wynikach wyszukiwania.
Pytanie 35

Jakiej właściwości CSS należy użyć, aby ustalić marginesy wewnętrzne dla danego elementu?

A. hight
B. padding
C. margin
D. width
Odpowiedź 'padding' jest prawidłowa, ponieważ właściwość CSS 'padding' służy do definiowania marginesów wewnętrznych dla elementu. Padding to przestrzeń między zawartością a krawędzią elementu, co pozwala na lepsze dostosowanie układu i prezentacji treści. Stosowanie paddingu jest kluczowe w tworzeniu responsywnych projektów, ponieważ umożliwia zachowanie odpowiednich odstępów niezależnie od rozmiaru wyświetlacza. Na przykład, aby zastosować padding do elementu div, można użyć następującej reguły CSS: 'div { padding: 20px; }', co doda 20 pikseli przestrzeni wewnętrznej ze wszystkich stron. Ponadto, dobrym zwyczajem jest stosowanie jednostek względnych, takich jak 'em' lub 'rem', aby zapewnić lepszą elastyczność i skalowalność w różnych kontekstach. To podejście sprzyja również utrzymaniu spójności w całym projekcie, co jest zgodne z najlepszymi praktykami w branży web designu.
Pytanie 36

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>

A.

  1. punkt 1
  2. punkt 2
    • podpunkt1
    • podpunkt2
    • podpunkt3
  3. punkt3

B.

  1. punkt 1
  2. punkt 2
  3. punkt3
    • podpunkt1
    • podpunkt2
    • podpunkt3

C.

  1. punkt 1
  2. punkt 2
    • podpunkt1
      • podpunkt2
      • podpunkt3
  3. punkt3

D.

  • punkt 1
  • punkt 2
    1. podpunkt1
      • podpunkt2
      • podpunkt3
  • punkt3
A. C.
B. D.
C. B.
D. A.
Twoja odpowiedź niestety nie była prawidłowa. Kluczową częścią zadania była interpretacja struktury kodu HTML prezentującej listę numerowaną (<ol>) z trzema elementami listy (<li>). W szczególności, zwróć uwagę na to, że w drugim elemencie listy znajduje się zagnieżdżona lista nieuporządkowana (<ul>) z trzema podpunktami. Fakt, że podpunkty są oznaczone kropkami, jest charakterystyczny dla listy nieuporządkowanej, co sugerowało, że prawidłową odpowiedzią jest C. W przypadku innych odpowiedzi, nie odzwierciedlały one prawidłowo struktury przedstawionego kodu, co mogło wynikać z niezrozumienia znaczenia poszczególnych tagów HTML. Pamiętaj, że w HTML istotne jest zrozumienie, jak tagi są zagnieżdżone w sobie, tworząc strukturę strony. Przy dalszej nauce zwracaj uwagę na to, jak poszczególne elementy HTML są ze sobą powiązane.
Pytanie 37

W zaprezentowanym fragmencie dokumentu HTML ustalono stylowanie CSS dla selektora klasy "menu", aby kolor tła tego elementu był zielony. Które z poniższych określeń stylu CSS odpowiada temu stylowaniu?

<div class="menu"></div>
A. #menu { background-color: rgb(0,255,0); }
B. menu { background-color: rgb(0,255,0); }
C. div.menu { background-color: green; }
D. div:menu { color: green; }
Błędne odpowiedzi wynikają z niewłaściwego zastosowania selektorów w języku CSS. Selektor #menu sugeruje użycie ID, jednak w HTML identyfikator musi być unikalny, a zadanie dotyczy klasy, co implikuje użycie selektora klasy poprzedzonego kropką. Takie błędne użycie prowadzi do niezrozumienia podstawowej różnicy między klasami a identyfikatorami w CSS, co jest kluczowe w projektowaniu stron internetowych. Z kolei selektor menu { background-color: rgb(0,255,0); } jest niepoprawny, ponieważ nie odnosi się do konkretnego elementu. Chociaż specyfikacja CSS pozwala na selektory nazwane, najczęściej stosuje się je w kontekście semantycznym dla elementów HTML, a nie tych określonych przez klasy. Wreszcie, definicja div:menu { color: green; } używa błędnej składni, ponieważ pseudo-klasy w CSS są używane do stylizacji specyficznych stanów elementów, takich jak hover, active czy focus, a nie do stylizacji klas. Istotne jest zrozumienie, że użycie pseudo-klas wymaga odpowiedniego kontekstu, który w tym przypadku jest niepoprawnie użyty. Kluczem do poprawnego stosowania CSS jest zrozumienie specyfiki selektorów i ich właściwe wykorzystanie, co pozwala na efektywne zarządzanie stylem w projekcie webowym. Podstawową zasadą powinno być projektowanie stylów z myślą o ich wielokrotnym wykorzystaniu i utrzymaniu czystości kodu.
Pytanie 38

Który styl CSS ma najwyższy priorytet ważności w zastosowaniu do elementów dokumentu HTML?

A. Styl importowany do wewnętrznego arkusza.
B. Zewnętrzny arkusz stylów.
C. Styl lokalny.
D. Wewnętrzny arkusz stylów.
Poprawnie – najwyższy priorytet ma tzw. styl lokalny, czyli deklaracje CSS zapisane bezpośrednio w atrybucie style danego elementu HTML, np. <p style="color:red; font-weight:bold;">. W kaskadowości CSS (Cascade) przeglądarka ustala, które reguły zastosować, biorąc pod uwagę kilka czynników: ważność (normal vs !important), specyficzność selektora, kolejność wystąpienia oraz właśnie źródło stylu. Zgodnie ze specyfikacją CSS (m.in. CSS Cascade Level 4) style inline są traktowane jako bardzo specyficzne, bo dotyczą jednego, konkretnego elementu. Dlatego, jeżeli nie używamy !important, to reguła z atrybutu style nadpisze reguły zewnętrznego, wewnętrznego arkusza, a także style importowane. W praktyce: jeśli w pliku style.css ustawisz p { color: blue; }, w sekcji <style> w <head> dasz p { color: green; }, a na elemencie napiszesz <p style="color:red;">, to tekst będzie czerwony, właśnie dlatego, że styl lokalny wygrywa w kaskadzie. W projektach komercyjnych styl inline stosuje się raczej oszczędnie, bo utrudnia utrzymanie kodu i psuje rozdzielenie warstw (HTML – struktura, CSS – wygląd). Czasem jednak jest bardzo przydatny: generowane maile HTML, szybkie testy, dynamiczna zmiana wyglądu przez JavaScript (np. element.style.display = "none"). Dobrą praktyką jest opieranie się głównie na zewnętrznych arkuszach stylów i selektorach o odpowiedniej specyficzności, a styl lokalny traktować jako wyjątek albo narzędzie „ostatniej szansy”, gdy naprawdę trzeba coś nadpisać na pojedynczym elemencie.
Pytanie 39

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

A. Tagi, poza samozamykającymi się, funkcjonują do momentu ich wyłączenia znakiem "/", np. ```<p> ..</p>```
B. Jeżeli w poleceniu występuje kilka atrybutów, ich kolejność powinna być uporządkowana alfabetycznie np. ```<img alt="..." src="/.."/>```
C. Wyłączanie tagów musi następować w odwrotnej sekwencji do ich włączenia, np. ```<p> ... <big>...</big></p>```
D. W tagach nie jest brana pod uwagę różnica między dużymi a małymi literami, np. ```<p>``` i ```<P>``` to ten sam tag.
Odpowiedź dotycząca kolejności atrybutów w znacznikach HTML jest poprawna, ponieważ nie ma wymogu, aby atrybuty w znacznikach były uporządkowane alfabetycznie. W rzeczywistości, HTML pozwala na dowolną kolejność atrybutów, co czyni tę regułę błędną. Przykładowo, znacznik <img src="/path/to/image.jpg" alt="Opis obrazu" /> jest poprawny niezależnie od kolejności atrybutów. Ważne jest, aby atrybuty były odpowiednio używane w kontekście ich przeznaczenia, a nie w kontekście kolejności alfabetycznej. Dobrą praktyką jest również stosowanie atrybutów w sposób, który zwiększa czytelność kodu, jednak nie jest to wymóg techniczny. Zgodnie z zaleceniami W3C, kluczowym aspektem jest poprawność semantyczna i zgodność ze standardami, a nie kolejność atrybutów.
Pytanie 40

Po uruchomieniu zamieszczonego w ramce skryptu w języku JavaScript, w przeglądarce zostanie wyświetlona wartość:

var a = 5;
var b = a--;
a *= 3;
document.write(a + "," + b);
A. 15,5
B. 12,4
C. 15,4
D. 12,5
W tym skrypcie JavaScript mamy operator dekrementacji a--, gdzie najpierw wartość zmiennej a jest przypisana do zmiennej b, a dekrementacja następuje później. Jeśli tego nie rozumiesz, może to prowadzić do różnych nieporozumień co do wynikowych wartości. Czyli po a-- b przyjmuje pierwotną wartość a, która wynosi 5. Warto zrozumieć kolejność operacji, bo przy operatorze postfix zmiana wartości następuje po przypisaniu. Później, po dekrementacji, a staje się 4, co czasem jest źle interpretowane, bo ludzie myślą, że b też by się zmieniło. Potem jest a *= 3, gdzie 4 mnożymy przez 3 i dostajemy 12. Często ludzie popełniają błąd, zakładając, że operatory działają równocześnie w jednym wierszu kodu. Ważne jest, żeby znać te subtelności, bo pomaga to w lepszym programowaniu i kontrolowaniu, jak zmienne się zmieniają.
Rozpocznij nowy egzamin
Powrót do strony głównej