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: 12 kwietnia 2026 16:40
Data zakończenia: 12 kwietnia 2026 16:46

Egzamin niezdany

Wynik: 9/40 punktów (22,5%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Określ, w jaki sposób należy odnosić się do pliku default.css, jeżeli index.html znajduje się bezpośrednio w folderze Strona?

A. <link rel="stylesheet" type="text/css" href="./style/default.css" />

B. <link rel="stylesheet" type="text/css" href="...\style\default.css" />

C. <link rel="stylesheet" type="text/css" href="c:/style/default.css" />

D. <link rel="stylesheet" type="text/css" href="c:\style/default.css" />

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź wskazuje na relatywną ścieżkę do pliku CSS. W HTML, stosowanie ścieżek relatywnych jest standardem i dobrą praktyką. Relatywna ścieżka ./style/default.css oznacza, że plik default.css znajduje się w folderze style, który jest bezpośrednio wewnątrz katalogu, w którym znajduje się plik index.html. Stosowanie relatywnych ścieżek zapewnia większą elastyczność i przenośność projektu, ponieważ nie są one zależne od struktury folderów na danym komputerze. Jest to szczególnie ważne w kontekście aplikacji webowych, które mogą być przenoszone między różnymi środowiskami serwerowymi. Zaleca się, aby projektanci stron zawsze używali ścieżek relatywnych, aby uniknąć problemów z odwoływaniem się do zasobów po zmianie lokalizacji projektu. Użycie poprawnej składni w tagu link, jak rel=stylesheet oraz type=text/css, zgodnie z dobrymi praktykami zapewnia poprawne załadowanie stylów CSS, co wpływa na poprawne wyświetlanie się strony w przeglądarkach.

Pytanie 2

W znaczniku meta w miejsce kropek należy wpisać

A. streszczenie treści strony

B. informację o dostosowaniu do urządzeń mobilnych

C. nazwa edytora

D. język dokumentu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik meta opatrzony atrybutem name="description" służy do zamieszczenia streszczenia treści strony internetowej. Jest to element HTML używany w nagłówku dokumentu, który dostarcza wyszukiwarkom i innym usługom internetowym informacji o zawartości strony. Opis ten pomaga w lepszym indeksowaniu strony przez wyszukiwarki oraz może wpływać na to, jak strona jest prezentowana w wynikach wyszukiwania. Dzięki dobrze sformułowanemu opisowi użytkownicy mogą szybciej zrozumieć, czego mogą się spodziewać po odwiedzeniu danej strony. Jest to dobra praktyka SEO, ponieważ poprawia widoczność strony w wyszukiwarkach. Zawartość opisana w znaczniku meta description nie powinna przekraczać 160 znaków, aby zapewnić odpowiednie wyświetlanie w wynikach wyszukiwania. Użycie streszczenia w odpowiedni sposób zwiększa atrakcyjność kliknięcia przez potencjalnych odwiedzających. To podejście jest zgodne z wytycznymi Google, które zaleca tworzenie unikalnych i treściwych opisów dla każdej strony w serwisie.

Pytanie 3

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

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

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

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

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

Brak odpowiedzi na to pytanie.

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

Pytanie 4

Jakie ustawienia dotyczące czcionki będą miały zastosowanie w przypadku kodu CSS?

* {
    font-family: Tahoma;
    color: Teal;
}

A. wszystkiego kodu HTML, jako domyślne formatowanie dla wszystkich elementów strony.

B. znaczników o identyfikatorze równym *.

C. wszystkiego kodu HTML, niezależnie od kolejnych ustawień CSS.

D. znaczników z klasą przypisaną jako *.

Wybór opcji dotyczącej całego kodu HTML jako formatowania domyślnego dla wszystkich elementów strony jest poprawny, ponieważ użycie selektora uniwersalnego * w CSS oznacza, że wszystkie dostępne elementy na stronie będą dziedziczyć określone style. W tym przypadku, zarówno font-family ustawiony na Tahoma, jak i kolor tekstu zmieniony na Teal, będą dotyczyły każdego elementu HTML, bez względu na jego typ. To podejście jest zgodne z zasadami stosowania stylów kaskadowych, gdzie style są aplikowane do elementów w sposób hierarchiczny, a selektor uniwersalny jest najogólniejszym z dostępnych. Przykładem zastosowania może być sytuacja, gdy chcemy ustawić jednolite formatowanie dla całej strony, co upraszcza proces projektowania i zapewnia spójność wizualną. Dobrą praktyką jest jednak używanie selektora uniwersalnego z umiarem, aby uniknąć nadmiernego obciążenia wydajności, szczególnie w większych dokumentach, gdzie precyzyjniejsze selektory mogą przynieść lepsze rezultaty.

Pytanie 5

Komunikat błędu generowany przez walidator HTML może wskazywać na

A. brak zamknięcia znaczników zagnieżdżonych wewnątrz znacznika <p> przed jego zakończeniem

B. niezgodną ilość znaczników <p> otwartych i zamkniętych

C. brak zamknięcia znacznika <p>

D. zamknięciu znacznika <p>, mimo że wcześniej nie był on otwarty

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wygląda na to, że w Twoim kodzie użyłeś znacznika <p>, ale zapomniałeś zamknąć niektóre zagnieżdżone w nim znaczniki, jak np. <a>. W HTML każda otwarta struktura musi być zamknięta zanim zamkniesz wyższy znacznik. Jak tego nie zrobisz, przeglądarki mogą źle interpretować Twój kod, co czasem prowadzi do problemów z wyświetlaniem strony. Więc pamiętaj, aby przed końcowymi znacznikami sprawdzić, czy wszystko jest zamknięte tak, jak powinno!

Pytanie 6

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

A. Jeżeli w poleceniu występuje kilka atrybutów, ich kolejność powinna być uporządkowana alfabetycznie np. ```<img alt="..." src="/.."/>```

B. Wyłączanie tagów musi następować w odwrotnej sekwencji do ich włączenia, np. ```<p> ... <big>...</big></p>```

C. W tagach nie jest brana pod uwagę różnica między dużymi a małymi literami, np. ```<p>``` i ```<P>``` to ten sam tag.

D. Tagi, poza samozamykającymi się, funkcjonują do momentu ich wyłączenia znakiem "/", np. ```<p> ..</p>```

Brak odpowiedzi na to pytanie.

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

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

A. bloki 1, 2, 3, 4 float: right; blok 5 clear: right;

B. blok 1 float: left; bloki 2, 4 float: center; blok 3 float: right; blok 5 clear: both;

C. bloki 1, 2, 4 float: left; blok 3 float: right; blok 5 clear: both;

D. bloki 1, 2, 4 float: left; blok 3, 5 float: right;

Właściwe użycie float w CSS jest kluczowe do tworzenia układów stron. W pierwszej propozycji zastosowano float: left; dla bloków 1, 2, 4 oraz float: right; dla bloków 3 i 5, co jest niepoprawne, ponieważ blok 5 powinien być odseparowany od pozostałych poprzez clear: both;, aby zająć całą szerokość strony. W drugiej odpowiedzi, chociaż float: right; dla bloków 1, 2, 3, 4 może wydawać się poprawne dla niektórych stylów, blok 5 z clear: right; nie będzie działał, ponieważ nie uwzględnia float: left, które ma zastosowanie w układzie. Ostatnia odpowiedź używa float: center;, co jest nieprawidłowe, ponieważ w CSS nie istnieje taka właściwość. Elementy można centrować za pomocą innych metod, ale nie za pomocą float. Ponadto, przypisanie clear dla bloku 5 jest poprawne, ale pozostałe ustawienia float dla bloków są błędne i niezgodne z przedstawionym układem. Konsekwentne błędy często wynikają z braku zrozumienia, jak właściwości float i clear współdziałają w kontekście modelu pudełkowego w CSS.

Pytanie 8

W języku HTML, aby stworzyć pole do wprowadzania hasła, w którym tekst jest maskowany (zastąpiony kropeczkami), należy zastosować znacznik

A. <input name="password" />

B. <input type="password" />

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Aby utworzyć pole edycyjne do wpisywania hasła w HTML, należy użyć znacznika <input> z atrybutem type ustawionym na 'password'. Taki typ pola edycyjnego zapewnia, że wprowadzany tekst jest maskowany, co w praktyce oznacza, że jest on wyświetlany jako kropki lub gwiazdki, co znacząco podnosi poziom bezpieczeństwa. Stosując <input type='password' />, zalecane jest również dodanie atrybutu name, co ułatwi przesyłanie danych na serwer. Warto zwrócić uwagę, że zgodnie z tym, co definiuje specyfikacja HTML5, pole to jest standardowo obsługiwane przez wszystkie nowoczesne przeglądarki. Przykład użycia: <input type='password' name='user_password' placeholder='Wpisz swoje hasło' />. Ponadto, dobrym praktyką jest stosowanie odpowiednich mechanizmów walidacji po stronie serwera, aby upewnić się, że dane przesyłane z formularzy są bezpieczne i chronione przed nieautoryzowanym dostępem. Maskowanie hasła w polach edycyjnych jest kluczowym elementem ochrony danych użytkowników w aplikacjach internetowych oraz stronach, które wymagają logowania.

Pytanie 9

Jaką właściwość CSS należy zastosować, aby uzyskać linie przerywaną w obramowaniu?

A. solid

B. dotted

C. dashed

D. double

Odpowiedź dashed jest poprawna ponieważ w CSS właściwość ta służy do definiowania stylu obramowania w postaci linii kreskowanej Jest to często używane do wizualnego oddzielenia zawartości na stronie internetowej bez zbytniego skupiania uwagi Użycie dashed sprawia że linia jest bardziej subtelna w porównaniu do solid co czyni ją dobrym wyborem w przypadku chęci zachowania minimalistycznego wyglądu Zgodnie ze standardami CSS właściwość border-style może przyjmować kilka wartości w tym solid dotted double i dashed Każda z tych wartości ma swoje unikalne zastosowania na przykład solid tworzy ciągłą linię natomiast dotted tworzy linię z kropkami Linia dashed składa się z krótkich kresek co różni ją od linii double która jest podwójną linią W praktyce dashed jest często stosowane w projektach gdzie ważne jest wskazanie na określone sekcje lub elementy bez przytłaczania użytkownika Zgodnie z dobrymi praktykami można dostosować szerokość i kolor obramowania co pozwala na lepszą integrację z ogólnym stylem strony CSS daje dużą elastyczność w projektowaniu co pozwala na tworzenie różnorodnych i responsywnych interfejsów użytkownika

Pytanie 10

W języku HTML, aby uzyskać efekt podobny do tego w przykładzie, trzeba użyć konstrukcji

A. <p><big>Duży tekst</p> zwykły tekst

B. <p><big>Duży tekst</big> zwykły tekst</p>

C. <p><strike>Duży tekst</strike> zwykły tekst</p>

D. <p><strike>Duży tekst zwykły tekst</p>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest prawidłowa, ponieważ w języku HTML, aby zwiększyć rozmiar czcionki dla części tekstu, można użyć znacznika <big>. Znacznik ten powoduje, że tekst wewnątrz jest wyświetlany w większym rozmiarze niż tekst otaczający. Jest to przydatne w sytuacjach, gdy chcemy wyróżnić część tekstu bez stosowania zaawansowanego stylu CSS. Chociaż <big> jest uznawany za przestarzały w nowoczesnym HTML, dla celów edukacyjnych i zgodności z starszymi dokumentami HTML wciąż może być stosowany. Praktyką zalecaną w aktualnych standardach jest używanie stylów CSS, np. poprzez przypisanie klasy lub bezpośrednie stylowanie in-line. Warto zaznaczyć, że stosowanie <big> nie jest zalecane w nowych projektach, ponieważ CSS oferuje większą elastyczność i kontrolę nad wyglądem tekstu. Niemniej jednak, znajomość takich znaczników jak <big> pomaga w zrozumieniu, jak rozwijał się HTML i jakie są różnice między starszymi a nowoczesnymi metodami formatowania tekstu.

Pytanie 11

W CSS określono stylizację dla paragrafu, która nada mu następujące właściwości:

A. tło czerwone, kolor tekstu niebieski, marginesy zewnętrzne ustawione na wartość 40 px

B. tło niebieskie, kolor tekstu czerwony, marginesy wewnętrzne ustawione na wartość 40 px

C. tło czerwone, kolor tekstu niebieski, marginesy wewnętrzne ustawione na wartość 40 px

D. tło niebieskie, kolor tekstu czerwony, marginesy zewnętrzne ustawione na wartość 40 px

W CSS stylizacja elementów HTML jest kluczowa dla tworzenia estetycznych i funkcjonalnych stron internetowych W przypadku tego pytania analizujemy przypisanie właściwości stylu do elementu paragrafu Kod CSS background-color red ustawia tło na czerwone color blue przypisuje niebieski kolor tekstu natomiast margin 40px ustawia marginesy zewnętrzne wokół elementu na 40 pikseli Każda z tych właściwości pełni określoną rolę background-color odnosi się do koloru tła całego elementu co jest przydatne w wyróżnianiu lub oddzielaniu sekcji strony color zmienia kolor tekstu co jest istotne dla czytelności i estetyki treści natomiast margin wpływa na odstęp pomiędzy elementami zapewniając przejrzystość i poprawne rozmieszczenie na stronie Zrozumienie tych właściwości jest kluczowe dla projektowania responsywnych i estetycznych stron internetowych W praktyce używa się ich do tworzenia interfejsów które są atrakcyjne wizualnie i funkcjonalne dla użytkowników Zgodnie z dobrymi praktykami warto dbać o kontrast i spójność wizualną co jest bezpośrednio związane z omawianymi właściwościami

Pytanie 12

Wskaż, jaki błąd walidacyjny zawiera przedstawiony fragment kodu w języku HTML 5.

<h6>CSS</h6>
<p>Kaskadowe arkusze stylów (<b>ang. <i>Cascading Style Sheets</b></i>)<br>to język służący ...</p>

A. Znacznik br nie powinien znajdować się wewnątrz znacznika p

B. Znacznik br nie został prawidłowo zamknięty

C. Znacznik zamykający /b jest niezgodny z zasadą zagnieżdżania

D. Znacznik h6 nie jest używany w HTML5

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W analizowanym fragmencie kodu HTML, znacznik zamykający /b jest niezgodny z zasadą zagnieżdżania. W prawidłowej konstrukcji HTML, znaczniki powinny być zamykane w odwrotnej kolejności do ich otwierania — nazywa się to zasadą LIFO (Last In, First Out). W przedstawionym kodzie, znacznik <b> jest otwierany przed znacznikiem <i>, ale zamykany po nim, co jest błędem strukturalnym. Poprawny zapis powinien wyglądać tak: <b><i>Cascading Style Sheets</i></b>. Ważne jest, aby zawsze pamiętać o poprawnej strukturze dokumentu HTML, ponieważ nieprzestrzeganie tej zasady może prowadzić do nieprzewidywalnych wyników renderowania na różnych przeglądarkach. Zasada ta jest kluczowa w zapewnieniu, że znaczniki są zagnieżdżone poprawnie i że style oraz skrypty działają zgodnie z oczekiwaniami. Tego rodzaju błędy mogą również negatywnie wpływać na dostępność strony dla użytkowników korzystających z czytników ekranowych.

Pytanie 13

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

#stopka { ... }

A. <div "stopka">

B. <div class="stopka">

C. <div id="stopka">

D. <div title="stopka">

W przypadku odpowiedzi <div "stopka"> brak jest poprawnej składni HTML ponieważ atrybuty w tagach HTML są zawsze parą nazwa-wartość i muszą być opatrzone znakami równości oraz cudzysłowami wokół wartości. Taka konstrukcja nie jest zgodna z zasadami HTML i nie zostanie przetworzona prawidłowo przez przeglądarki. Atrybut title czyli <div title="stopka"> używany jest do wyświetlania dodatkowych informacji w formie dymka po najechaniu kursorem i nie jest związany z selektorami CSS. Z kolei <div class="stopka"> odnosi się do użycia klasy. Klasy są bardziej elastyczne pozwalając na przypisywanie tego samego stylu do wielu elementów co jest użyteczne w przypadku powtarzających się elementów na stronie. Jednakże w pytaniu jest mowa o selektorze ID co oznacza że stylizacja dotyczy konkretnego niepowtarzalnego elementu. Selekcję przez id poprzedzamy znakiem # co jest konwencją stosowaną w projektach gdzie poszczególne elementy mają być unikalne w ramach dokumentu HTML. Zrozumienie i poprawne używanie atrybutów takich jak id i class jest kluczowe dla efektywnego zarządzania stylem w dużych i złożonych projektach internetowych. Selekcja poprzez id jest stosowana w przypadkach gdzie wymagana jest unikalna identyfikacja elementu co jest niezbędnym elementem w procesie projektowania struktury stron internetowych. Stąd też ważne jest aby unikać nadmiarowego stosowania id w miejscach gdzie powtarzalność elementów jest wymagana ponieważ prowadzi to do problemów w zakresie skalowalności i utrzymania kodu.

Pytanie 14

Dla celu strony internetowej stworzono grafikę rysunek.jpg o wymiarach: szerokość 200 px, wysokość 100 px. Aby zaprezentować tę grafikę jako miniaturę – pomniejszoną z zachowaniem proporcji, można użyć znacznika

A. <img src="/rysunek.png" style="width: 25px; height:50px;">

B. <img src="/rysunek.png" style="width: 50px">

C. <img src="/rysunek.png">

D. <img src="/rysunek.png" style="width: 25px; height:25px;">

Odpowiedź <img src="/rysunek.png" style="width: 50px"> jest poprawna, ponieważ umożliwia wyświetlenie grafiki w formacie miniatury, zachowując proporcje oryginalnego obrazu. Przy zmniejszaniu rozmiaru obrazu, kluczowe jest ustawienie tylko jednego z wymiarów (szerokości lub wysokości), co pozwala na automatyczne dostosowanie drugiego wymiaru w taki sposób, aby nie zniekształcić proporcji. W tym przypadku, ustawienie szerokości na 50 px pozwala na proporcjonalne zmniejszenie wysokości do około 25 px, co jest zgodne z zasadą, że proporcje powinny pozostawać niezmienione. W praktyce, korzystanie z CSS do określenia rozmiarów obrazków poprawia responsywność strony oraz jej estetykę, co jest zgodne z dobrymi praktykami w web designie. Warto również pamiętać, że do poprawy ładowania stron i doświadczenia użytkownika, często zastosowanie rozmiarów odpowiednich do urządzeń mobilnych oraz desktopowych jest kluczowe.

Pytanie 15

Który z poniższych zapisów w HTML określa kodowanie znaków stosowane w dokumencie?

A. <encoding="UTF-8">

B. <meta charset="UTF-8">

C. <meta encoding="UTF-8">

D. <charset="UTF-8">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis <meta charset="UTF-8"> jest prawidłową deklaracją kodowania znaków w dokumencie HTML. Element <meta> jest używany w sekcji <head> dokumentu i pozwala na zdefiniowanie różnych metadanych, w tym kodowania znaków. Użycie "UTF-8" jako wartości dla atrybutu charset oznacza, że dokument będzie używał kodowania Unicode, które jest standardem preferowanym w sieci. Dzięki temu, dokumenty mogą poprawnie wyświetlać znaki z różnych języków, co jest kluczowe w zglobalizowanym świecie internetu. Przykładem zastosowania tego zapisu może być strona internetowa, która zawiera teksty w wielu językach, co wymaga wsparcia dla różnorodnych znaków diakrytycznych i symboli. Warto również podkreślić, że zgodnie z zasadami dobrych praktyk, zawsze powinno się definiować kodowanie znaków w dokumencie HTML, aby uniknąć problemów z wyświetlaniem treści, co może negatywnie wpłynąć na doświadczenia użytkowników oraz SEO strony.

Pytanie 16

Kolor, który ma odcień niebieski to kolor

A. #EE00EE

B. #0000EE

C. #EE0000

D. #00EE00

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kolor niebieski, który oznaczamy kodem #0000EE, to naprawdę ciekawa sprawa. W systemie hex to oznacza, że składowa niebieska (B) ma najwyższą możliwą wartość, czyli 238, a czerwony (R) i zielony (G) są na poziomie 0. To jest typowy sposób klasyfikacji kolorów w RGB, który jest super przydatny w grafice czy web designie. Niebieski świetnie nadaje się na tła stron czy różne elementy interfejsu, bo przyciąga wzrok i jest dość przejrzysty. Na przykład w CSS możemy napisać: `background-color: #0000EE;`. Fajnie jest znać te kody kolorów, bo ułatwia to komunikację w zespole i realizację pomysłów artystycznych.

Pytanie 17

W wyniku walidacji strony został wygenerowany błąd. Oznacza on, że

A. oznaczenie ISO-8859-2 nie istnieje.

B. oznaczenie kodowania znaków powinno być zapisane bez myślników.

C. w atrybucie charset jest dozwolona wyłącznie wartość "utf-8".

D. w znaczniku meta nie występuje atrybut charset.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Dobra robota! Twoja odpowiedź jest na miejscu. To, co się stało z błędem walidacji, to fakt, że przy atrybucie charset w znaczniku meta musisz zawsze podać 'utf-8'. To standard kodowania Unicode, który w sieci jest bardzo popularny. Kodowanie UTF-8 ma to do siebie, że obsługuje mnóstwo znaków, co sprawia, że nadaje się do prawie wszystkich języków na świecie. Dlatego warto to stosować przy tworzeniu nowoczesnych stron. HTML5 jasno mówi, że każdy dokument powinien mieć ten znacznik w sekcji head, czyli na przykład: <meta charset='utf-8'>.

Pytanie 18

W HTML-u, aby połączyć w poziomie dwie sąsiednie komórki w danym wierszu tabeli, należy wykorzystać atrybut

A. colspan

B. cellpadding

C. cellspacing

D. rowspan

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut colspan w języku HTML jest kluczowym narzędziem do scalania komórek w tabeli w poziomie. Umożliwia on połączenie dwóch lub więcej sąsiednich komórek w jednym wierszu, co pozwala na bardziej elastyczne i estetyczne układanie danych. Przykładowo, jeśli mamy tabelę z informacjami o produktach, a jeden z produktów ma długą nazwę, możemy użyć atrybutu colspan, aby ta nazwa zajmowała miejsce w dwóch lub więcej komórkach, co poprawia czytelność tabeli. Dobre praktyki w projektowaniu tabel wskazują, że należy unikać nadmiarowych komórek i skomplikowanych układów, gdyż obniża to przejrzystość danych. Zamiast tego, właściwe użycie atrybutów takich jak colspan pozwala na lepsze zorganizowanie informacji. Warto również pamiętać, że poprawne stosowanie atrybutu colspan powinno być zgodne z ogólnymi zasadami projektowania responsywnego, co oznacza, że tabela powinna dobrze się prezentować na różnych urządzeniach. Dodatkowo, atrybut colspan ma swoje zastosowanie także w kontekście dostępności, gdyż odpowiednie użycie tej funkcji pozwala na lepszą nawigację i zrozumienie struktury tabeli przez osoby korzystające z technologii asystujących.

Pytanie 19

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

A. dfn

B. alt

C. title

D. name

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje, to jest prawidłowa odpowiedź. Znacznik <abbr> w HTML jest używany do określenia skrótu lub akronimu. Atrybut 'title' jest używany w połączeniu z tym znacznikiem, aby dostarczyć pełną formę skrótu, która jest wyświetlana, gdy użytkownik najedzie na skrót. Jest to zgodne ze standardami i dobrymi praktykami branżowymi, które zalecają ułatwianie zrozumienia treści dla wszystkich użytkowników, w tym tych z dysfunkcjami. Atrybut 'title' jest zatem przydatny, gdy skrót jest ryzykowny lub ma wiele znaczeń. Na przykład, skrót 'WHO' może oznaczać 'World Health Organization' lub 'Whois protocol' w zależności od kontekstu. Dlatego atrybut 'title' pomaga wyjaśnić zamierzone znaczenie.

Pytanie 20

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

A. zmniejszyć jego rozdzielczość

B. dodać kanał alfa

C. zapisać w formacie BMP

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

Brak odpowiedzi na to pytanie.

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

Pytanie 21

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

p.uzytkownik { color: blue; }

A. akapitów, którym przypisano klasę uzytkownik

B. wyłącznie znaczników tekstowych takich jak <p>, <h1>

C. dowolnych znaczników w sekcji <body>, które mają przypisaną klasę uzytkownik

D. wszystkich akapitów

Zrozumienie, dlaczego niektóre odpowiedzi są niepoprawne, wymaga wiedzy o podstawach stylowania CSS. Odpowiedzi błędne mogą wynikać z nieprawidłowego rozumienia, jak działają selektory w CSS. CSS pozwala na precyzyjne określenie, które elementy HTML będą podlegały określonemu stylowi, dzięki użyciu selektorów. W przedstawionym przykładzie p.uzytkownik jest selektorem specyficznym, który oznacza wszystkie elementy <p> (paragrafy) z klasą uzytkownik. Selekcje te nie dotyczą wszystkich paragrafów, a jedynie tych z określoną klasą. Błędne przekonanie, że styl dotyczy wszystkich paragrafów, wynika z pominięcia faktu, że klasa jest specyfikatorem. Podobnie, twierdzenie, że dowolne znaczniki w sekcji <body> z klasą uzytkownik zostaną sformatowane, ignoruje fakt, że selektor dotyczy konkretnie paragrafów. Kluczową kwestią jest rozróżnienie między selektorami tagów, klas, ID i ich kombinacjami. Właściwe zrozumienie tych zasad pozwala na efektywne i precyzyjne stosowanie reguł CSS, co jest fundamentem tworzenia spójnych i estetycznych interfejsów użytkownika.

Pytanie 22

W jaki sposób można ustawić w CSS wygląd hiperłącza, aby linki nieodwiedzone miały kolor żółty, a odwiedzone kolor zielony?

A. a:hover {color: yellow;} a:visited{color: green;}

B. a:visited {color: yellow;} a:link{color: green;}

C. a:link {color: yellow;} a:visited{color: green;}

D. a:hover {color: green;} a:link{color: yellow;}

Wszystkie niepoprawne odpowiedzi zawierają błędne przypisania kolorów do poszczególnych stanów hiperłączy. Przede wszystkim, nieodwiedzone linki powinny być w kolorze żółtym, a odwiedzone w kolorze zielonym. W pierwszym przypadku podano kolor żółty dla stanu visited, co jest niezgodne z oczekiwaniami użytkowników i standardami projektowania. Użytkownicy mogą być zdezorientowani, gdy odwiedzone linki nie różnią się wizualnie od tych, które są jeszcze nieodwiedzone. Ponadto, inne odpowiedzi sugerują użycie :hover zamiast :link. Pseudo-klasa :hover odnosi się do linków, gdy użytkownik najeżdża na nie kursorem, a nie do stanu odwiedzonego. To może prowadzić do sytuacji, w której kolor linku zmienia się w czasie interakcji, a nie na podstawie historii przeglądania, co jest niezgodne z zamierzonym celem. Niewłaściwe stylizowanie linków może również wpływać na dostępność strony, ponieważ użytkownicy oczekują, że kolor linków będzie wskazywał, czy dany link był już klikany. Z punktu widzenia standardów CSS oraz najlepszych praktyk programowania, ważne jest, aby zachować spójność i intuicyjność w stylizacji, a także unikać mylących kolorów i efektów, które mogą zaburzać doświadczenia użytkowników.

Pytanie 23

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. braku zamknięcia znacznika <br>

B. duplikacji nazwy pliku graficznego

C. braku zamknięcia znacznika <img>

D. braku atrybutu alt w znaczniku <img>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W tym zadaniu kluczowy był brak atrybutu alt w znaczniku <img>. To jest jeden z tych wymagań, które na pierwszy rzut oka mogą wydawać się tylko formalnością, a jednak mają ogromne znaczenie, szczególnie z punktu widzenia dostępności. Standardy W3C (zwłaszcza WCAG) jasno mówią, że każdy obrazek w HTML powinien mieć opis alternatywny, czyli właśnie atrybut alt. Dzięki temu osoby korzystające z czytników ekranu albo mające wyłączone ładowanie grafik, czy nawet boty indeksujące wyszukiwarki, wiedzą, co obrazek przedstawia lub jaką pełni funkcję. Jeżeli alt jest pusty, to też jest dozwolone, ale wtedy obrazek powinien być czysto dekoracyjny, a tutaj ewidentnie nie ma żadnego alt. Przykład praktyczny: jeśli budujesz stronę dla urzędu, sklepu internetowego albo jakąkolwiek witrynę publiczną, brak alt przy obrazkach to poważny minus jakościowy i prawny. Nawet na prostych stronach wizytówkach może się to odbić negatywnie na SEO czy po prostu na wygodzie użytkownika. Ja kiedyś przez taki drobiazg nie przeszedłem walidacji projektu, więc uczulam na to każdą osobę, która zaczyna z HTML-em – zawsze pamiętaj o atrybucie alt. To nie jest coś, co można ignorować, bo przeglądarki tego nie „wybaczą” podczas walidacji, a użytkownicy mogą na tym stracić. Szczerze, moim zdaniem to jeden z tych podstawowych nawyków, które warto sobie wyrobić już na starcie.

Pytanie 24

Podczas tworzenia witryny internetowej zastosowano kod definiujący jej wygląd. Jaką szerokość przeznaczono na zawartość strony?

A. 640 px

B. 560 px

C. 600 px

D. 2 px

Definiowanie szerokości elementu w CSS jest kluczowym aspektem projektowania responsywnych stron internetowych. W przedstawionym kodzie CSS zauważamy definicję width 560px która określa szerokość elementu body. Ta wartość bezpośrednio przekłada się na dostępną przestrzeń dla treści wewnętrznej tego elementu. W praktyce definiowanie szerokości w pikselach pozwala na precyzyjne kontrolowanie układu strony co jest szczególnie istotne w kontekście projektowania interfejsów użytkownika. Takie podejście jest jednak najczęściej stosowane w środowiskach gdzie mamy pełną kontrolę nad urządzeniami wyświetlającymi stronę. W kontekście nowoczesnych praktyk często stosuje się jednostki względne lub techniki takie jak media queries aby zapewnić lepszą responsywność i elastyczność. Ważne jest także rozważanie dodatkowych aspektów takich jak marginesy i wypełnienia które mogą wpływać na rzeczywistą ilość dostępnej przestrzeni na treść. Właściwe zrozumienie i zastosowanie szerokości jest kluczowe dla tworzenia estetycznych i funkcjonalnych układów strony internetowej.

Pytanie 25

Jaki znacznik powinien być zastosowany, aby wprowadzić nową linię tekstu bez tworzenia akapitu w dokumencie internetowym?

A. <br>

B. </br>

C. </b>

D. <p>

Znaczniki <p> i </b> oraz </br> są błędnymi odpowiedziami w kontekście przełamania linii tekstu. Znacznik <p> służy do definiowania akapitu, co oznacza, że każdorazowe jego użycie powoduje wprowadzenie przerwy między akapitami. W związku z tym, jego zastosowanie do przełamania linii nie byłoby odpowiednie, ponieważ nie umożliwia kontynuacji tekstu w tym samym kontekście. Podobnie, znacznik </b> jest używany do zamykania formatowania pogrubienia, a jego użycie nie ma żadnego związku z przełamaniem linii; jest on tylko elementem prezentacyjnym. Co więcej, </br> nie jest poprawnym znacznikiem w HTML. Chociaż w niektórych kontekstach może być używany przez niektóre silniki renderujące, jego właściwe zastosowanie to <br>, co czyni </br> niepoprawnym i mylącym. Typowe błędy myślowe, prowadzące do takich odpowiedzi, często wynikają z braku zrozumienia semantyki HTML oraz różnicy pomiędzy elementami blokowymi a liniowymi. Użytkownicy często mylą funkcje poszczególnych znaczników, co prowadzi do nieprawidłowego formatowania treści na stronach internetowych. Zrozumienie tych różnic jest kluczowe dla tworzenia poprawnych i efektywnych struktur dokumentu HTML.

Pytanie 26

W dokumencie XHTML znajduje się fragment kodu, w którym występuje błąd walidacyjny. Co jest przyczyną tego błędu?

A. Znacznik <br> musi być zamknięty

B. Nie ma nagłówka szóstego poziomu

C. Znaczniki powinny być pisane dużymi literami

D. Znacznik <b> nie może być umieszczany wewnątrz znacznika <p>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W języku XHTML, wszystkie znaczniki muszą być dobrze sformułowane, co oznacza, że każdy element pusty, taki jak znacznik linijki <br>, musi być zamknięty za pomocą końcowego ukośnika, zapisanego jako <br />. XHTML to język oparty na XML, gdzie składnia jest bardziej rygorystyczna w porównaniu do HTML. Dzięki temu poprawne zamykanie znaczników jest niezbędne dla poprawnej walidacji dokumentu. Przykładowo, jeśli w dokumencie XHTML chcemy wstawić nową linię, powinniśmy zapisać <br /> zamiast <br>. Inne puste elementy, takie jak <img> czy <input>, również muszą być zamykane w ten sposób. Zastosowanie tego standardu zapewnia zgodność z przeglądarkami i przyszłą kompatybilność z nowymi technologiami. W praktyce, poprawne stosowanie składni zapewnia, że dokument będzie poprawnie interpretowany zarówno przez przeglądarki, jak i przez narzędzia do przetwarzania danych XML. Zrozumienie i stosowanie się do tych zasad jest kluczowe dla każdego, kto pracuje z technologiami sieciowymi, ponieważ zapewnia to, że dokumenty będą poprawnie wyświetlane oraz łatwe do przetwarzania.

Pytanie 27

W języku HTML aby zdefiniować słowa kluczowe strony, należy użyć zapisu

A. <meta name = "keywords" = "psy, koty, gryzonie">

B. <meta name = "description" content = "psy, koty, gryzonie">

C. <meta name = "keywords" content = "psy, koty, gryzonie">

D. <meta keywords = "psy, koty, gryzonie">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to <meta name = "keywords" content = "psy, koty, gryzonie">, ponieważ jest to właściwy sposób definiowania słów kluczowych w sekcji <head> dokumentu HTML. Element <meta> służy do dostarczania metadanych o stronie internetowej, a atrybut 'name' określa, jakie informacje są zawarte w danym elemencie. W przypadku 'keywords', atrybut 'content' z kolei zawiera listę słów kluczowych, które są związane z treścią strony. Chociaż znaczenie słów kluczowych w SEO zmienia się, wciąż są one używane przez niektóre wyszukiwarki do kategoryzowania zawartości strony. Przykładowo, jeśli strona dotyczy zwierząt domowych, użycie fraz takich jak 'psy', 'koty', czy 'gryzonie' w atrybucie 'content' może pomóc w poprawie widoczności w wynikach wyszukiwania. Dobrą praktyką jest, aby słowa kluczowe były specyficzne, związane z tematyką strony i nie przekraczały rozsądnej liczby, aby nie wprowadzać w błąd algorytmy wyszukiwarek. Używanie odpowiednich metatagów to kluczowy element optymalizacji SEO.

Pytanie 28

Walidacja strony internetowej polega na

A. sprawdzeniu jej w celu usunięcia błędów

B. umieszczaniu treści w sieci

C. reklamowaniu strony

D. zestawie działań mających na celu zwiększenie liczby odwiedzin

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Proces walidacji strony internetowej polega na systematycznym sprawdzeniu jej zawartości oraz struktury w celu identyfikacji i eliminacji błędów, które mogą wpływać na jej funkcjonalność oraz użyteczność. Walidacja to kluczowy etap w cyklu życia strony, ponieważ zapewnia, że strona działa zgodnie z wymaganiami technicznymi i standardami branżowymi, takimi jak W3C. Przykłady zastosowania walidacji obejmują sprawdzanie poprawności kodu HTML, CSS oraz dostępności, co jest istotne dla zapewnienia pozytywnego doświadczenia użytkowników. Strony internetowe, które są walidowane, mają większe szanse na lepsze pozycjonowanie w wyszukiwarkach, co przekłada się na wyższą oglądalność. Regularna walidacja jest również zgodna z najlepszymi praktykami w zakresie utrzymania jakości i bezpieczeństwa, co w dłuższej perspektywie wspiera reputację marki i zaufanie użytkowników.

Pytanie 29

Język HTML posiada nagłówki, które służą do tworzenia hierarchii treści. Nagłówki te występują tylko w zakresie

A. h1 – h6

B. h1 – h10

C. h1 – h4

D. h1 – h8

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź h1 – h6 jest poprawna, ponieważ język HTML udostępnia sześć poziomów nagłówków, od h1 do h6, które służą do tworzenia hierarchii treści na stronie internetowej. Nagłówek h1 jest najważniejszy i powinien być używany do oznaczenia głównego tytułu strony, podczas gdy h2, h3, h4, h5 i h6 wskazują na kolejne poziomy nagłówków, które pomagają w organizacji treści. Przykładowo, nagłówek h2 może być używany do sekcji, natomiast h3 może oznaczać podsekcje w ramach danej sekcji. Używanie nagłówków w ten sposób nie tylko poprawia czytelność i zrozumienie treści przez użytkowników, ale także pozytywnie wpływa na SEO (optymalizację dla wyszukiwarek). Warto pamiętać, że zgodnie z najlepszymi praktykami, powinno się unikać pomijania poziomów nagłówków, co zapewnia logiczną strukturę treści i ułatwia indeksację przez roboty wyszukiwarek.

Pytanie 30

W języku CSS zdefiniowano styl. Sformatowana tym stylem sekcja będzie zawierała obramowanie o szerokości:

div { border: solid 2px blue;
       margin: 20px;}

A. 2 px oraz marginesy zewnętrzne tego obramowania

B. 20 px oraz marginesy zewnętrzne tego obramowania

C. 2 px oraz marginesy wewnętrzne tego obramowania

D. 20 px oraz marginesy wewnętrzne tego obramowania

W definicji stylu CSS podano, że sekcja div będzie miała obramowanie o szerokości 2 pikseli oraz marginesy zewnętrzne o wartości 20 pikseli. Obramowanie jest definiowane przez właściwość 'border', gdzie 'solid' oznacza typ obramowania i '2px' to jego szerokość, a 'blue' to kolor. Marginesy zewnętrzne są definiowane za pomocą właściwości 'margin', która w tym przypadku ma wartość 20 pikseli. Jest to odległość między brzegiem obiektu a innymi elementami na stronie. Zrozumienie tych właściwości jest kluczowe w projektowaniu responsywnych i dobrze zorganizowanych układów stron internetowych. Stosując te właściwości, twórcy stron mogą łatwo kontrolować wygląd i odległości między elementami, co jest szczególnie ważne w kontekście użyteczności i estetyki witryny. Przykładowo, jeśli chciałbyś dodać więcej przestrzeni pomiędzy sekcjami, wystarczy zwiększyć wartość 'margin'. Warto również zaznaczyć, że te właściwości są zgodne z aktualnymi standardami CSS, co pozwala na ich wszechstronne wykorzystanie w praktyce.

Pytanie 31

Do której właściwości można przypisać wartości: static, relative, fixed, absolute oraz sticky?

A. position

B. display

C. text-transform

D. list-style-type

Odpowiedź 'position' to strzał w dziesiątkę! To właściwość w CSS, która mówi nam, jak elementy mają być ustawione na stronie. Masz różne opcje, jak 'static', 'relative', 'fixed', 'absolute' i 'sticky', które każda z nich ma swoje przeznaczenie. Na przykład 'static' to standard, który nic nie zmienia w układzie, a 'relative' umożliwia przesunięcie elementu w stosunku do jego pierwotnej pozycji. Z kolei 'absolute' pozwala umieścić element w odniesieniu do najbliższego przodka, który nie jest ustawiony na 'static', co świetnie się sprawdza, gdy chcesz, żeby coś się ładnie ułożyło na stronie. 'fixed' trzyma element w tym samym miejscu na ekranie, nawet jak przewijasz stronę – idealne dla nagłówków. 'Sticky' łączy w sobie cechy 'relative' i 'fixed', co daje lepszą kontrolę nad pozycjonowaniem przy przewijaniu. Używanie tych wartości jest naprawdę ważne, jeżeli projektujesz responsywne interfejsy, więc dobrze, że to wiesz!

Pytanie 32

Który zapis jest selektorem pseudoklasy CSS?

A. td.wyroznienie

B. p#wyroznienie

C. a:link

D. body

W tym zadaniu wszystkie odpowiedzi wyglądają jak poprawne selektory CSS, ale tylko jedna z nich jest selektorem pseudoklasy. To dość typowa pułapka: ktoś widzi poprawny składniowo selektor i automatycznie zakłada, że skoro jest „jakiś znak specjalny”, to pewnie chodzi o pseudoklasę. W CSS warto jednak rozróżniać kilka zupełnie różnych mechanizmów: selektor typu, selektor klasy, selektor identyfikatora oraz właśnie pseudoklasy. Zapis „p#wyroznienie” łączy selektor typu z selektorem identyfikatora. Oznacza akapit <p> o konkretnym id="wyroznienie". Znak # w CSS nie ma nic wspólnego z pseudoklasami, tylko jednoznacznie wskazuje na identyfikator elementu. To jest bardzo częste nieporozumienie: część osób myli dwukropek z kratką, bo oba wyglądają jak „specjalne dopiski”. Tymczasem pseudoklasy zawsze używają dwukropka, a identyfikatory – znaku #. „td.wyroznienie” to z kolei połączenie selektora typu z selektorem klasy. Ten zapis wybierze komórki tabeli <td> posiadające class="wyroznienie". Kropka w CSS zawsze oznacza klasę, czyli coś, co definiujemy w atrybucie class w HTML. To zupełnie inny mechanizm niż pseudoklasy, bo klasę nadajemy ręcznie w kodzie HTML, a pseudoklasa opisuje stan lub cechę obliczaną przez przeglądarkę, np. czy element jest pierwszy w swoim rodzicu, czy link jest odwiedzony, czy pole formularza ma fokus. Zapis „body” to najprostszy możliwy selektor typu – wskazuje wszystkie elementy <body> w dokumencie (zwykle jest tylko jeden). Tu w ogóle nie ma żadnego symbolu wskazującego na pseudoklasę, więc traktowanie tego jako pseudoklasy to już zupełne pomieszanie pojęć: to po prostu nazwa elementu HTML. Typowy błąd myślowy przy takich pytaniach polega na tym, że zamiast skupić się na definicji pseudoklasy („selektor z dwukropkiem, opisujący stan”), uczestnik testu szuka odpowiedzi, która „najbardziej wygląda na zaawansowaną”. Tymczasem wszystkie błędne odpowiedzi są zwykłymi, podstawowymi selektorami: typu, klasy i id. Pseudoklasa zawsze ma postać coś:coś_tam, np. a:hover, button:disabled, li:first-child. Jeżeli nie ma dwukropka – to na pewno nie jest pseudoklasa, niezależnie od tego, jak bardzo skomplikowany wygląda zapis.

Pytanie 33

Grafika, która ma być umieszczona na stronie, powinna mieć przezroczyste tło. Jakim formatem graficznym powinien być zapisany taki plik?

A. BMP

B. CDR

C. PNG

D. JPEG

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format PNG (Portable Network Graphics) jest szczególnie ceniony w kontekście grafiki internetowej, ponieważ obsługuje przezroczystość, co czyni go idealnym wyborem dla obrazów, które wymagają tła transparentnego. Przezroczystość w formacie PNG jest realizowana poprzez zastosowanie kanału alfa, co pozwala na uzyskanie różnorodnych efektów wizualnych, takich jak cienie, gradienty czy delikatne przejścia między kolorami. Przykłady zastosowania to ikony, logo, grafiki na stronach internetowych, które muszą harmonizować z różnymi kolorami tła. W przeciwieństwie do formatów takich jak JPEG, który nie obsługuje przezroczystości i używa kompresji stratnej, PNG oferuje kompresję bezstratną, co oznacza, że jakość obrazu nie ulega pogorszeniu po zapisaniu. W kontekście praktyk webowych, użycie PNG jest zgodne z zaleceniami dotyczącymi optymalizacji obrazów w sieci, co przyczynia się do szybszego ładowania stron i lepszej jakości wizualnej.

Pytanie 34

Aby graficznie tworzyć strony internetowe, należy skorzystać z.

A. edytor CSS

B. przeglądarka internetowa

C. program MS Office Picture Manager

D. program typu WYSIWYG

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Programy typu WYSIWYG (What You See Is What You Get) są narzędziami, które umożliwiają tworzenie stron internetowych w sposób wizualny, co oznacza, że użytkownik widzi na ekranie efekty swojej pracy w czasie rzeczywistym. Takie oprogramowanie, jak Adobe Dreamweaver czy WordPress, pozwala na łatwe przeciąganie elementów, edytowanie tekstów oraz dodawanie grafik bez konieczności bezpośredniego pisania kodu HTML czy CSS. Dzięki temu, osoby bez zaawansowanej wiedzy programistycznej mogą tworzyć profesjonalnie wyglądające strony internetowe. Programy WYSIWYG wspierają standardy webowe i dobre praktyki, co pomaga w tworzeniu responsywnych i dostępnych serwisów. Używanie tych narzędzi przyspiesza także proces prototypowania oraz umożliwia szybkie wprowadzanie zmian, co jest niezwykle cenne w dynamicznym środowisku projektowym. Oprócz tego, dobrze zaprojektowane programy WYSIWYG oferują funkcje podglądu na różnych urządzeniach, co jest kluczowe w dobie rosnącej liczby rozdzielczości ekranów i urządzeń mobilnych.

Pytanie 35

Który format graficzny najlepiej nadaje się do zapisu obrazu z przezroczystością do zastosowania w serwisie internetowym?

A. SVG

B. PNG

C. JPG

D. BMP

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format PNG (Portable Network Graphics) jest najlepszym wyborem do zapisu obrazów z przezroczystością przeznaczonych na strony internetowe. PNG obsługuje przezroczystość alpha, co oznacza, że można uzyskać dowolny stopień przezroczystości na pikselach, co jest szczególnie przydatne w przypadku grafik wymagających gładkich przejść lub cieni. Dzięki temu grafiki mogą być umieszczane na różnych tłach bez widocznych krawędzi, co jest kluczowe w designie stron internetowych. Warto również zauważyć, że PNG wykorzystuje kompresję bezstratną, co oznacza, że jakość obrazu nie ulega pogorszeniu podczas zapisu. W praktyce, format PNG jest idealny do logo, ikon, obrazów z tekstem oraz ilustracji, gdzie ważna jest jakość i przezroczystość. Standardy webowe, takie jak WCAG, również zalecają używanie formatów, które zapewniają dostępność, a PNG doskonale wpisuje się w te wymagania, umożliwiając tworzenie estetycznych i funkcjonalnych stron. Ponadto, wsparcie dla formatu PNG jest szerokie, co zapewnia jego uniwersalność w różnych przeglądarkach i na różnych urządzeniach.

Pytanie 36

Zdefiniowany styl CSS spowoduje, że nagłówki pierwszego poziomu będą

A. wyśrodkowane, pisane wielkimi literami, a odstępy między literami ustalone na 10 px

B. wyjustowane, pisane wielkimi literami, a odstępy między liniami ustalone na 10 px

C. wyjustowane, pisane małymi literami, a odstępy między literami ustalone na 10 px

D. wyśrodkowane, pisane małymi literami, a odstępy między liniami ustalone na 10 px

Odpowiedź jest prawidłowa, ponieważ reguły CSS wyrażone w stylu są poprawnie zinterpretowane w kontekście podanej definicji. Wartość text-align: center oznacza, że tekst wewnątrz elementu h1 będzie wyśrodkowany. Centrum tekstu jest powszechnie stosowane w projektowaniu stron internetowych w celu zwiększenia czytelności i estetyki nagłówków co jest korzystne w wizualnym uporządkowaniu treści. Wartość text-transform: uppercase przekształca wszystkie litery w sekcji na wielkie litery co jest pomocne w przypadku nagłówków gdzie wyróżnienie jest kluczowe i potęguje efekt wizualny. Stosowanie wielkich liter w nagłówkach jest klasycznym podejściem w projektowaniu ponieważ przyciąga uwagę użytkownika. Dodatkowo letter-spacing: 10px zwiększa odstępy między literami co poprawia ich czytelność zwłaszcza w dużych formatach tekstu. Zastosowanie takich właściwości jest zgodne z dobrymi praktykami projektowymi które dążą do optymalizacji wizualnej i funkcjonalnej stron internetowych co jest kluczowe dla pozytywnego doświadczenia użytkownika

Pytanie 37

W formularzu HTML użyto znacznika <input>. Pole to będzie służyło do wprowadzania maksymalnie

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

A. 30 znaków, które nie są widoczne w polu tekstowym

B. 30 znaków, które są widoczne w trakcie wprowadzania

C. 20 znaków, które nie są widoczne w polu tekstowym

D. 20 znaków, które są widoczne w trakcie wprowadzania

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to 20 znaków, które nie są widoczne w polu tekstowym. Znacznik <input type="password"> w HTML jest używany do tworzenia pól wprowadzania, w których hasła lub inne wrażliwe dane są maskowane, co oznacza, że wpisywane znaki są pokazywane jako symbole, zwykle kropki. W atrybucie 'maxlength' określa się maksymalną liczbę znaków, które użytkownik może wprowadzić. W tym przypadku, atrybut 'maxlength="20"' oznacza, że użytkownik może wprowadzić maksymalnie 20 znaków, ale nie będą one widoczne w polu tekstowym, co zwiększa bezpieczeństwo. Dobrym przykładem zastosowania tego typu pola jest logowanie do systemów, gdzie ochrona danych użytkownika jest kluczowa. Stosowanie pól typu 'password' jest zgodne z zasadami ochrony prywatności i dobrymi praktykami w zakresie projektowania interfejsów użytkownika, które wymagają maskowania danych w celu minimalizacji ryzyka ich ujawnienia.

Pytanie 38

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

A. nav { float: right; }

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

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

D. aside {float: left; }

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 39

W języku HTML 5 do grupowania powiązanych ze sobą elementów formularza używa się znacznika

A. <option>

B. <fieldset>

C. <optgroup>

D. <summary>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawnie wskazany znacznik to <fieldset>, bo właśnie jego w HTML5 używa się do logicznego grupowania powiązanych ze sobą elementów formularza. Z punktu widzenia semantyki HTML oznacza to, że informujesz zarówno przeglądarkę, jak i technologie asystujące (np. czytniki ekranu), że dane pola stanowią jedną spójną sekcję. To jest bardzo ważne przy większych formularzach, gdzie użytkownik łatwo może się zgubić. Typowy przykład to podział formularza na części typu „Dane osobowe”, „Adres dostawy”, „Dane do faktury” – każdą z tych sekcji dobrze jest otoczyć <fieldset>, a nagłówek sekcji umieścić w <legend>. Dzięki temu czytnik ekranu odczyta np. „Dane osobowe, grupa pól formularza”, a dopiero potem poszczególne etykiety. Moim zdaniem używanie <fieldset> to jedna z takich drobnych rzeczy, które bardzo poprawiają użyteczność i dostępność, a są często olewane w amatorskich projektach. W dokumentacji W3C i w wytycznych WCAG zaleca się semantyczne oznaczanie struktury formularza, właśnie między innymi z wykorzystaniem <fieldset> i <legend>. Dodatkowo przeglądarki domyślnie stylują <fieldset> ramką, więc od razu wizualnie widać grupę pól – oczywiście w CSS możesz to dowolnie przerobić, ale bazowy efekt jest całkiem sensowny. W praktyce możesz mieć np. taki kod: <form> <fieldset> <legend>Dane logowania</legend> <label>Login: <input type="text"></label> <label>Hasło: <input type="password"></label> </fieldset> </form> Takie podejście jest zgodne z dobrymi praktykami front-endu: kod jest czytelniejszy, łatwiej go utrzymać, a przy testach automatycznych czy walidacji HTML od razu widać strukturę formularza. W dużych aplikacjach webowych, np. panelach administracyjnych, sensowne grupowanie pól za pomocą <fieldset> naprawdę robi różnicę, szczególnie gdy formularz ma kilkanaście lub kilkadziesiąt kontrolek.

Pytanie 40

Na stronie internetowej dodano grafikę w kodzie HTML. Co się stanie, jeśli plik rysunek.png nie zostanie odnaleziony przez przeglądarkę?

<img src="rysunek.png" alt="pejzaż">

A. wstawi tekst "rysunek.png" zamiast grafiki

B. nie pokaże strony internetowej

C. wyświetli tekst "pejzaż" w miejscu grafiki

D. zademonstruje błąd wyświetlania strony w miejscu grafiki

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W HTML znacznik <img> jest używany do wstawiania obrazów na stronach. Ważne, żeby pamiętać o atrybucie src, który mówi przeglądarce, skąd ma wziąć obraz. A alt to taki tekst zapasowy, który wyświetli się, jeśli obrazek nie załaduje się z jakiegoś powodu. To istotne, bo ułatwia dostępność dla osób, które mogą mieć trudności z widzeniem. Na przykład, gdy plik rysunek.png się nie załaduje, to wyświetli się tekst z atrybutu alt - w tym przypadku słowo pejzaż. To jest zgodne z dobrymi praktykami, bo każdy powinien wiedzieć, co miało być na obrazku, nawet jeśli go nie widzi. To także pomaga wyszukiwarkom w indeksowaniu treści. A używanie atrybutu alt to rzecz, którą warto stosować, jeśli chcemy, żeby nasza strona była dostępna i przyjazna dla użytkowników. Przy tym, przypomina mi się, że to też jest zgodne z zasadami dostępności WCAG.

Rozpocznij nowy egzamin

Powrót do strony głównej