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: 13 czerwca 2026 18:49
Data zakończenia: 13 czerwca 2026 18:49

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Jak zapisać marginesy zewnętrzne: górny i dolny 20 px, lewy i prawy 40 px?

margin: 20px 20px 40px 40px;

margin: 40px 20px;

margin: 20px 40px 40px 20px;

margin: 20px 40px;

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W zapisie skróconym z dwiema wartościami <code>margin: pion poziom</code> pierwsza dotyczy góry i dołu, druga lewej i prawej. Górny i dolny 20px, boczne 40px daje więc <code>margin: 20px 40px;</code>. Dlatego poprawny jest <code>margin: 20px 40px;</code>.

Pytanie 2

Znacznik <ins> w HTML jest używany do wskazywania

A. tekstu, który został dodany

B. tekstu, który został przeformatowany

C. tekstu, który został usunięty

D. cytowanego fragmentu tekstu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wiesz, znacznik <ins> w HTML to coś, co używamy, żeby pokazać tekst dodany w stosunku do poprzedniej wersji dokumentu. To mega przydatne, zwłaszcza kiedy edytujemy różne treści, bo od razu widać, co się zmieniło. Zastosowanie tego znacznika można znaleźć w różnych dokumentach, jak blogi czy umowy, gdzie ważne jest, żeby pokazać, co się zmieniło w treści. Zgodnie z tym, co mówią wytyczne W3C, używanie znaczników semantycznych, jak <ins>, sprzyja lepszej dostępności tekstów i ułatwia ich zrozumienie przez wyszukiwarki oraz technologie wspierające. Przykładowo, gdy robisz poprawki w dokumencie, właśnie dzięki <ins> możesz wyróżnić nowe informacje, co sprawi, że użytkownicy łatwiej ogarną, co się zmieniło. Dobrze jest też dodać odpowiedni styl CSS, żeby nadać tym elementom wyraźniejszy wygląd.

Pytanie 3

Jak wygląda prawidłowy zapis samozamykającego się znacznika w zgodzie ze standardem języka XHTML, który odpowiada za łamanie linii?

A.

B.

C.

D.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest prawidłowym zapisem samozamykającego się znacznika w standardzie XHTML. XHTML, czyli eXtensible HyperText Markup Language, wymaga, aby znaczniki były poprawnie zamknięte. W przypadku znaczników, które nie mają zawartości, jak , stosuje się specjalną składnię. Oznaczenie wskazuje na przełamanie linii w dokumencie HTML. Ważne jest, aby podać ukośnik przed zakończeniem znacznika, co jest zgodne z zasadami XHTML. Przykładowo, w dokumentach XHTML, prawidłowe użycie może wyglądać tak: Tekst przed łamaniem linii. Tekst po łamaniu linii.. Przestrzeganie tych zasad zapewnia, że dokumenty będą poprawnie interpretowane przez przeglądarki oraz będą zgodne z standardami W3C, co jest kluczowe dla zachowania wysokiej jakości kodu oraz jego dostępności.

Pytanie 4

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

<script src="/przyklad.js"></script>

<link rel="script" href="/przyklad.js">

<script>przyklad.js</script>

<script link="przyklad.js"></script>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zewnętrzny plik JavaScript podłącza się znacznikiem <code><script></code>, wskazując jego lokalizację w atrybucie <code>src</code> (tak jak źródło obrazu w <code><img></code>): <code><script src="/przyklad.js"></script></code>. Znacznik <code><script></code> zawsze wymaga części zamykającej, nawet gdy nie ma między tagami żadnego kodu. Dlatego poprawny jest ten zapis.

Pytanie 5

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

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

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

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

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

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 6

Jaki wynik pojawi się po wykonaniu zaprezentowanego kodu HTML?

A. Odpowiedź D

B. Odpowiedź B

C. Odpowiedź C

D. Odpowiedź A

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź D jest prawidłowa, ponieważ prezentowany kod HTML zawiera zagnieżdżone listy uporządkowane i nieuporządkowane. Zewnętrzna lista uporządkowana zaczyna się od numeru 1 i zawiera elementy li, gdzie drugi z nich zawiera w sobie listę nieuporządkowaną ul. Taka struktura jest zgodna ze standardami HTML i pozwala na efektywne prezentowanie hierarchii informacji. Co ważne, dodatkowy element ol z atrybutami type=A i start=4 generuje listę literową zaczynającą się od D, co jest wykorzystywane do tworzenia niestandardowych punktów startowych w listach uporządkowanych. Praktycznie, listy zagnieżdżone są używane do tworzenia bardziej złożonych struktur danych, jak instrukcje czy spisy treści. Korzystając z atrybutów type i start, możemy manipulować prezentacją list, co jest przydatne w rozwijających się serwisach internetowych. Zastosowanie atrybutu type z wartościami A, a, I itp., pozwala na zmianę stylu numerowania, co jest zgodne z dobrymi praktykami projektowania stron.

Pytanie 7

W którym z poniższych przykładów walidacja fragmentu kodu CSS zakończy się sukcesem?

A. p { text-size:bold; }

B.

C.

D. p { font-weight:bold; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź p { font-weight:bold; } jest poprawna, ponieważ jest zgodna z obowiązującą składnią CSS. W tym przypadku użyto selektora typu, który odnosi się do wszystkich elementów w dokumencie HTML, a właściwość font-weight umożliwia ustawienie grubości czcionki. Wartością 'bold' informujemy przeglądarkę, aby wyświetliła tekst w pogrubionej formie, co jest częstą praktyką w stylizacji tekstu. Stosowanie selektorów typu w CSS pozwala na efektywne zarządzanie stylami w całym dokumencie, zatem jest to zgodne z najlepszymi praktykami projektowania stron internetowych. Przykładowo, w celu nadania pogrubienia wszystkim nagłówkom w dokumencie, można by użyć: h1, h2, h3 { font-weight: bold; }. Zastosowanie takiej reguły pozwala na łatwe i szybkie wprowadzenie zmian w stylu dokumentu, co jest kluczowe w kontekście responsywnego projektowania i modernizacji stron. Dobre praktyki wskazują, aby unikać inline styles (stylów wewnętrznych) na rzecz zewnętrznych arkuszy stylów, co poprawia przejrzystość i utrzymanie kodu.

Pytanie 8

W CSS właściwość font-size może przyjmować wartości według słów kluczowych

A. tylko smali, smaller, large, larger

B. jedynie big i smali

C. z zestawu xx-small, x-small, smali, medium, large, x-large, xx-large

D. wyłącznie smali, medium, large

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwość font-size w CSS pozwala na określenie rozmiaru czcionki za pomocą zestawu wartości słownikowych, które obejmują xx-small, x-small, small, medium, large, x-large oraz xx-large. Użycie tych słów kluczowych jest zgodne z wytycznymi CSS i zapewnia spójne i zrozumiałe podejście do projektowania. Przykładowo, definiując klasę CSS dla nagłówka, możemy zastosować: h1 { font-size: large; } co skutkuje odpowiednim zwiększeniem rozmiaru czcionki, co jest zgodne z hierarchią typograficzną dokumentu. Zastosowanie wartości słownikowych zwiększa czytelność i dostępność treści, ponieważ są one zrozumiałe zarówno dla programistów, jak i dla przeglądarek. Ponadto, korzystając z tych wartości, projektanci mogą łatwiej dostosować wygląd strony do różnych urządzeń, co jest kluczowe w kontekście responsywnego web designu. Warto również wspomnieć, że wartości te są niezależne od jednostek miary, takich jak em czy px, co sprawia, że są bardziej elastyczne w użyciu.

Pytanie 9

Która z czynności nie wpłynie na objętość zajmowanej pamięci pliku graficznego?

A. Kompresja

B. Zmiana rozmiaru obrazu przy użyciu atrybutów HTML

C. Interpolacja

D. Modyfikacja rozdzielczości obrazu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Skalowanie obrazu za pomocą atrybutów HTML to technika, która pozwala na dostosowanie rozmiaru wyświetlanego obrazu w przeglądarce internetowej bez zmiany jego rzeczywistego rozmiaru pliku. Atrybuty takie jak 'width' i 'height' w tagach <img> wpływają jedynie na to, jak obraz jest prezentowany na stronie, a nie na jego fizyczne właściwości. Przykładem może być użycie <img src='obraz.jpg' width='300' height='200'>, co sprawia, że obraz wyświetla się w określonych wymiarach, ale plik graficzny pozostaje niezmieniony. Takie podejście jest zgodne z dobrymi praktykami w projektowaniu stron internetowych, ponieważ pozwala na utrzymanie jakości obrazu bez dodatkowego obciążania serwera. W sytuacjach, gdy szybkość ładowania strony jest kluczowa, użycie odpowiednich atrybutów HTML może przyczynić się do lepszego doświadczenia użytkownika bez potrzeby modyfikacji oryginalnych plików graficznych. Warto również zaznaczyć, że w przypadku responsywnych stron internetowych stosuje się techniki CSS, które umożliwiają dalsze dostosowanie wielkości obrazów, ale także nie wpływają na ich wagę w pamięci.

Pytanie 10

Który symbol oznacza w CSS jednostkę miary wyrażoną w punktach edytorskich?

em

px

in

pt

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Jednostka <code>pt</code> to PUNKT typograficzny (edytorski), równy 1/72 cala - używana m.in. do rozmiaru czcionki w druku. Dlatego punkty edytorskie oznacza <code>pt</code>.

Pytanie 11

Język HTML oferuje nagłówki, które służą do tworzenia hierarchii zawartości. Te nagłówki występują wyłącznie w zakresie

A. h1 - 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ż w języku HTML nagłówki są definiowane w ramach sześciu poziomów, od h1 do h6. Nagłówki te pełnią kluczową rolę w organizacji treści na stronie internetowej, umożliwiając tworzenie hierarchii oraz struktury dokumentu. h1 jest najważniejszym nagłówkiem i powinien być używany do oznaczania głównego tytułu strony, podczas gdy h2, h3, h4, h5 i h6 służą do tworzenia podtytułów i hierarchii treści w miarę potrzeby. Na przykład, nagłówek h2 może być użyty do oznaczenia sekcji podrzędnej w stosunku do h1, a h3 do następnej sekcji podrzędnej. Takie zrozumienie hierarchii nagłówków jest istotne z punktu widzenia SEO, ponieważ wyszukiwarki korzystają z tych struktur do indeksowania treści. Dobrze zorganizowane nagłówki poprawiają również dostępność strony, co jest zgodne z najlepszymi praktykami webowymi, a także ułatwiają nawigację użytkownikom, zarówno ludziom, jak i robotom wyszukiwarek.

Pytanie 12

Który kod HTML zapewni identyczny efekt formatowania jak na przedstawionym obrazku?

W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

A. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

B. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

C. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

D. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź numer 2 jest poprawna, ponieważ używa odpowiednich znaczników HTML do formatowania tekstu. Znacznik stosowany jest do oznaczania tekstu kursywą, a znacznik do pogrubienia. W tym przypadku tekst 'paragrafie' i 'sposoby formatowania' są otoczone znacznikiem , co zgodnie z HTML oznacza kursywę. Natomiast słowo 'zobaczysz' jest otoczone zarówno jak i , co skutkuje pogrubieniem i kursywą jednocześnie. Taka struktura jest zgodna z konwencją hierarchii znaczników, która mówi, że znaczniki mogą być zagnieżdżane, aby uzyskać różne efekty formatowania. HTML pozwala na takie zagnieżdżanie, co jest częścią elastyczności tego języka w prezentowaniu treści. Dobrą praktyką jest także zapewnienie dostępności, gdzie znaczniki semantyczne mają szczególne znaczenie. Wykorzystanie i zamiast odpowiednio i jest bardziej stylistyczne niż semantyczne, co ma swoje uzasadnienie w kontekście projektowym, ale w nowoczesnych praktykach powinno się również rozważyć znaczenie semantyczne i używać i dla lepszego zrozumienia przez czytniki ekranowe.

Pytanie 13

W kodzie źródłowym zapisanym w języku HTML wskaż błąd walidacji dotyczący tego fragmentu. <h6>CSS</h6>
Kaskadowe arkusze stylów ang.Cascading Style Sheets) to język służący...

A. Znak zamykający /b jest niezgodny z zasadą zagnieżdżania.

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

C. Znacznik h6 jest nieznany.

D. Znak br nie może być użyty wewnątrz znacznika p.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W analizowanym fragmencie kodu HTML występuje błąd związany z niewłaściwym zagnieżdżeniem znaczników. W szczególności, znacznik zamykający został umieszczony przed zamknięciem znacznika , co narusza zasady zagnieżdżania elementów w HTML. Zgodnie z wytycznymi W3C (World Wide Web Consortium), każdy znacznik otwierający musi mieć odpowiedni znacznik zamykający w odpowiedniej kolejności, a zagnieżdżanie elementów musi być przestrzegane, aby zapewnić poprawną strukturę dokumentu. W tym przypadku poprawna sekwencja powinna wyglądać następująco: ......, co oznacza, że znacznik powinien być zamknięty po znaczniku . Przykładowo, prawidłowy zapis mógłby wyglądać tak: Kaskadowe arkusze stylów ang.Cascading Style Sheets to język służący.... Taka struktura zapewnia, że znaczniki są poprawnie zagnieżdżone, co przekłada się na lepszą interpretację przez przeglądarki oraz narzędzia do walidacji HTML.

Pytanie 14

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

A. HTML 5

B. XHTML 1.1

C. HTML 4.01 Transitional

D. HTML 4.01 Strict

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znaczniki <header>, <article>, <section>, <footer> są częścią specyfikacji HTML5, która wprowadziła bardziej semantyczne podejście do strukturyzacji dokumentów webowych. Te elementy umożliwiają programistom tworzenie bardziej przejrzystych i zrozumiałych dokumentów, zarówno dla ludzi, jak i dla maszyn. Na przykład, znacznik <header> definiuje nagłówek strony lub sekcji, <article> służy do oznaczania samodzielnych treści, które mogą być niezależnie dystrybuowane, <section> grupuje powiązane tematycznie elementy, a <footer> zawiera informacje o końcu strony lub sekcji. Użycie tych znaczników ma kluczowe znaczenie dla SEO, ponieważ wyszukiwarki mogą lepiej zrozumieć strukturę treści na stronie. Dodatkowo, zastosowanie tych elementów wspiera dostępność, ułatwiając nawigację osobom korzystającym z czytników ekranu. W praktyce, stosując te znaczniki, programiści tworzą bardziej uporządkowane i zrozumiałe strony, co jest zgodne z najlepszymi praktykami w branży.

Pytanie 15

Jakie pojęcia są wykorzystywane do opisu interfejsu użytkownika serwisu internetowego?

A. Szkic strony, mapa witryny, diagram przepływu informacji

B. Przetwarzanie danych, system zarządzania treścią, projektowanie informacji

C. Przyciski, menu, interakcja użytkownika z aplikacją

D. Wysyłanie zapytań do bazy, skrypty PHP

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź "Przyciski, menu, interakcja użytkownika z aplikacją" jest prawidłowa, ponieważ odnosi się bezpośrednio do kluczowych elementów interfejsu użytkownika (UI) na stronach internetowych. Interfejs użytkownika to zespół wszystkich punktów kontaktowych między użytkownikiem a systemem, a przyciski i menu są podstawowymi składnikami, które umożliwiają interakcję z aplikacją. Dobre praktyki projektowania UI opierają się na zapewnieniu intuicyjności i dostępności tych elementów, co jest podstawą pozytywnego doświadczenia użytkownika (UX). Na przykład, przyciski powinny być jasno oznaczone i łatwo rozpoznawalne, a menu powinno być zorganizowane w sposób logiczny, aby użytkownicy mogli szybko znaleźć potrzebne informacje. W kontekście standardów, warto zwrócić uwagę na wytyczne WCAG, które dotyczą dostępności treści internetowych, oraz zasady heurystyki Jakobsona, które pomagają w ocenie interfejsu użytkownika. Dobry design UI powinien również uwzględniać responsywność, co oznacza, że interfejs powinien być użyteczny na różnych urządzeniach i rozmiarach ekranów.

Pytanie 16

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

A. Rys. A

B. Rys. C

C. Rys. D

D. Rys. B

Brak odpowiedzi na to pytanie.

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

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

A. Efekt 4

B. Efekt 3

C. Efekt 2

D. Efekt 1

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Efekt 2 jest poprawny ponieważ kod HTML przedstawia formularz zawierający element select oraz pole input typu password. Element select pozwala na wybór jednej z trzech opcji Kraków Poznań i Szczecin co widzimy w efekcie 2. Pole input typu password zasłania wpisywane przez użytkownika znaki co jest zgodne z przedstawionym obrazem gdzie w miejscu drugiego pola widoczne są zamaskowane znaki. To zabezpieczenie jest standardem w formularzach internetowych chroniącym dane przed nieuprawnionym dostępem. Przeglądarki internetowe interpretują typ password zamieniając wprowadzone znaki na symbole najczęściej kropki lub gwiazdki. Dla programistów webowych jest to istotne przy projektowaniu interfejsów użytkownika zapewniając zarówno funkcjonalność jak i bezpieczeństwo. Ważne jest również aby pamiętać o odpowiednim zarządzaniu danymi wprowadzonymi w polach password po stronie serwera zapewniając szyfrowanie i bezpieczne przechowywanie. Stosowanie elementu select w połączeniu z input type=password jest popularne w formularzach rejestracyjnych gdzie użytkownik wybiera opcję a następnie wprowadza hasło. Dobre praktyki obejmują również walidację danych po stronie klienta i serwera aby zapewnić poprawność i bezpieczeństwo wprowadzanych informacji.

Pytanie 18

Jaką szerokość przeznaczono dla treści strony według podanej definicji CSS?

body {
   border: 2px;
   height: 600px;
   width: 560px;
}

A. 560 px

B. 2 px

C. 640 px

D. 600 px

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest poprawna. Szerokość strony została zdefiniowana na 560 pikseli w kodzie CSS. W kontekście strony internetowej, to oznacza, że cała zawartość strony będzie wyświetlana w obszarze o szerokości nie większej niż 560 pikseli. To jest bardzo ważne podczas projektowania stron internetowych. Szerokość strony często jest ustalana na stałą wartość, aby zapewnić spójność wyglądu strony na różnych urządzeniach. W praktyce, jeśli chcesz, aby strona była 'responsywna', szerokość powinna być ustawiona na wartość procentową, co pozwoli na dynamiczne dostosowanie się strony do rozmiaru okna przeglądarki. Jednak w niektórych sytuacjach, jak na przykład w przypadku określonego układu strony, możliwe jest użycie stałej wartości szerokości. W każdym razie, zapamiętaj, że szerokość strony jest jednym z najważniejszych aspektów przy projektowaniu stron internetowych, który ma bezpośredni wpływ na doświadczenia użytkownika.

Pytanie 19

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 20

Grafika, która ma być pokazana na stronie, powinna mieć transparentne tło. Podaj format pliku graficznego, w którym należy go zapisać.

A. PNG

B. CDR

C. JPEG

D. BMP

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format PNG (Portable Network Graphics) jest idealnym rozwiązaniem dla obrazów z przezroczystym tłem, ponieważ obsługuje kanał alpha, który umożliwia definiowanie przezroczystości poszczególnych pikseli. Dzięki temu, gdy obraz PNG jest umieszczany na różnym tle, zachowuje naturalny wygląd i nie wymaga dodatkowego dostosowywania, co jest szczególnie ważne w projektach graficznych, które wymagają elastyczności w prezentacji. Przykładowe zastosowania PNG obejmują ikony, logo oraz wszelkie grafiki, które muszą być nałożone na inne elementy wizualne bez widocznych krawędzi czy tła. W branży grafiki komputerowej oraz web designu, PNG stał się standardem dla materiałów wymagających wysokiej jakości obrazu z zachowaniem przezroczystości. Dobrą praktyką jest również stosowanie PNG w przypadku grafik, które zawierają tekst, ponieważ format ten nie wprowadza strat jakości, co może mieć miejsce w przypadku innych formatów kompresji. Warto również zaznaczyć, że PNG nie traci jakości przy wielokrotnym zapisywaniu, co czyni go preferowanym wyborem tam, gdzie jakość jest kluczowa.

Pytanie 21

Analizując poniższy kod HTML, jak w przeglądarce zachowa się blok B względem bloku A?

<div>A</div>
<div style="margin-top: 20px">B</div>

A. blok B będzie oddalony od bloku A o 20 px

B. zostanie ustawiony dolny margines bloku B

C. blok A zostanie przesunięty w lewo o 20 px

D. bloki A i B będą nachodzić na siebie

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Drugi <code><div></code> (blok B) ma w atrybucie <code>style</code> ustawione <code>margin-top: 20px</code> - to margines zewnętrzny po GÓRNEJ stronie. Ponieważ blok B leży pod blokiem A, ten 20-pikselowy margines tworzy odstęp nad B, odsuwając go w dół od A. Dlatego blok B będzie oddalony od bloku A o 20 px.

Pytanie 22

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

<aside>

<figcaption>

<header>

<footer>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Stopkę strony lub sekcji opisuje semantyczny znacznik <code><footer></code> - zwykle zawiera prawa autorskie, kontakt czy linki dodatkowe. Dlatego stopką jest <code><footer></code>.

Pytanie 23

Które z podanych formatów NIE JEST zapisane w języku CSS?

A. A

B. B

C. D

D. C

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź C jest prawidłowa, ponieważ atrybut bgcolor jest przestarzałą metodą określania koloru tła w HTML i nie jest częścią CSS. CSS (Cascading Style Sheets) zostało stworzone, aby oddzielić prezentację dokumentu od jego struktury. Korzystanie z CSS pozwala na lepsze zarządzanie stylem i spójność w wyglądzie wielu stron internetowych. Atrybuty HTML związane z wyglądem, takie jak bgcolor, zostały zastąpione przez deklaracje w CSS. Na przykład w CSS można ustawić kolor tła całej strony za pomocą selektora body i właściwości background-color. Takie podejście jest bardziej elastyczne i zgodne z nowoczesnymi standardami. Dzięki CSS możliwe jest stosowanie zaawansowanych stylizacji, takich jak gradienty czy obrazy tła, które nie były dostępne w prostych atrybutach HTML. Przy projektowaniu stron internetowych zaleca się, aby unikać przestarzałych atrybutów HTML, które mogą być niekompatybilne z nowoczesnymi przeglądarkami i powodować problemy z dostępnością.

Pytanie 24

Przedstawiono fragment kodu HTML, który nie waliduje się poprawnie. Błąd walidacji tego fragmentu kodu będzie dotyczył:

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

A. powtórzenia nazwy pliku graficznego

B. niedomknięcia znacznika img

C. braku cudzysłowu

D. niedomknięcia znacznika br

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Fragment kodu HTML zawiera istotny błąd, który polega na braku cudzysłowu w atrybucie 'src' znacznika 'img'. Poprawna składnia wymaga, aby wszystkie wartości atrybutów były otoczone cudzysłowami, zarówno pojedynczymi, jak i podwójnymi. W tym przypadku występuje problem w linii, gdzie atrybut 'src' ma przypisaną wartość '/obraz.gif', ale brakuje zamykającego cudzysłowu, co powoduje, że przeglądarka może niepoprawnie interpretować ten fragment kodu. Aby poprawić kod, należy dodać cudzysłów, co zapewni zgodność z normami HTML, takimi jak W3C. Przykładowo, poprawny zapis powinien wyglądać następująco: <img src="/obraz.gif" alt="Obrazek">. Walidacja kodu HTML jest kluczowa, ponieważ umożliwia uniknięcie problemów z wyświetlaniem strony oraz zapewnia lepszą dostępność treści dla użytkowników oraz robotów wyszukiwarek. Użycie odpowiednich znaczników oraz poprawna składnia sprzyja również lepszym wynikom SEO, co jest istotne w kontekście widoczności w Internecie.

Pytanie 25

Która lista jest interpretacją przedstawionego kodu?

<ol>
    <li>muzyka
        <ul>
            <li>Wpis1</li>
            <li>Wpis2</li>
        </ul>
    </li>
    <li>filmy
        <ul>
            <li>Wpis3</li>
            <li>Wpis4</li>
        </ul>
    </li>
</ol>

A. Lista uporządkowana z podpunktami zapisanymi w formie numeracji dziesiętnej (np. 1.1, 1.2).

B. Lista uporządkowana z sześcioma następującymi elementami.

C. Lista nieuporządkowana zawierająca wszystkie składniki, jeden za drugim.

D. Lista uporządkowana z dwoma składnikami, z których każdy ma wewnętrzną listę nieuporządkowaną.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Przedstawiony kod HTML jest przykładem zagnieżdżonych list uporządkowanych i nieuporządkowanych. Na poziomie głównym użyto listy uporządkowanej oznaczonej tagiem <ol> która tworzy listę numerowaną. Listy zagnieżdżone opisane są za pomocą tagu <ul> co oznacza listy nieuporządkowane punktowane. Wewnętrzna struktura kodu pokazuje jak zagnieżdżać listy aby tworzyć hierarchiczne struktury które są często stosowane na stronach internetowych do organizowania treści. Taka organizacja danych jest szczególnie przydatna w przypadku tworzenia menu rozwijanych lub katalogów. Aby zrozumieć prawidłowość tej struktury należy zapoznać się z zasadą zagnieżdżania elementów w HTML gdzie jeden element może zawierać inne w celu tworzenia bardziej złożonych układów. Popularnymi zastosowaniami są również generowanie drzew katalogów oraz nawigacji w witrynach. Standardy HTML sugerują takie podejście do strukturyzacji danych aby były one semantycznie poprawne a zarazem łatwe do odczytania przez przeglądarki internetowe co zwiększa ich dostępność i użyteczność. Praktyka ta jest zgodna z dobrymi praktykami projektowania webowego gdzie zrozumiałość kodu oraz jego struktura są kluczowe dla dalszego rozwoju czy utrzymania aplikacji.

Pytanie 26

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">

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

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

Brak odpowiedzi na to pytanie.

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

Który z poniższych zapisów jest selektorem pseudoklasy CSS?

body

p#wyroznienie

td.wyroznienie

a:link

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Pseudoklasa w CSS opisuje szczególny STAN lub sytuację elementu i poprzedza ją dwukropek. <code>a:link</code> wybiera odnośniki w stanie nieodwiedzonym - <code>:link</code> to właśnie pseudoklasa. Inne popularne to <code>:hover</code> (po najechaniu), <code>:visited</code> (odwiedzony) czy <code>:focus</code> (aktywny element formularza). Różnią się od zwykłych selektorów klasy (<code>.nazwa</code>) i ID (<code>#nazwa</code>). Dlatego selektorem pseudoklasy jest <code>a:link</code>.

Pytanie 28

Jaką rozdzielczość należy przyjąć, aby uzyskać proporcje obrazu 16:9, zakładając, że piksel ma formę kwadratu?

A. 1366 na 768 pikseli

B. 800 na 480 pikseli

C. 2560 na 2048 pikseli

D. 320 na 240 pikseli

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Proporcje obrazu 16:9 są standardem szerokokątnym, powszechnie stosowanym w telewizji, filmach oraz w grach komputerowych. Przy rozdzielczości 1366 na 768 pikseli, stosunek szerokości do wysokości wynosi 16 do 9, co oznacza, że dla każdego 16 pikseli szerokości przypada 9 pikseli wysokości. Technicznie, aby obliczyć proporcje obrazu, należy podzielić szerokość przez wysokość. W tym przypadku 1366/768 daje wartość równą około 1.77, co odpowiada proporcji 16:9. Takie rozdzielczości są często używane w laptopach oraz monitorach HD, co czyni je idealnym wyborem do zastosowań multimedialnych. Standard 16:9 stał się powszechnie akceptowanym formatem, co wpływa na kompatybilność treści wizualnych, umożliwiając ich odpowiednie wyświetlanie na różnych urządzeniach. Użycie tej rozdzielczości zapewnia również lepszą jakość obrazu w porównaniu z niższymi rozdzielczościami, co jest kluczowe w kontekście nowoczesnych technologii wyświetlania.

Pytanie 29

Element <meta charset="utf-8"> definiuje metadane odnoszące się do strony internetowej dotyczące

A. słów kluczowych

B. kodowania znaków

C. języka używanego na stronie

D. opisu witryny

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Element <meta charset="utf-8"> jest kluczowym składnikiem metadanych w dokumentach HTML, który określa sposób kodowania znaków używanych na stronie internetowej. Użycie kodowania UTF-8, które jest najczęściej stosowanym standardem, pozwala na wyświetlanie różnorodnych znaków z różnych języków, w tym znaków diakrytycznych. Dzięki temu, strony internetowe mogą być dostępne dla szerokiego grona użytkowników bez obaw o błędy związane z wyświetlaniem tekstu. Kiedy przeglądarka internetowa napotyka ten element, wie, że powinna interpretować zawartość dokumentu zgodnie z określonym kodowaniem. Jest to szczególnie ważne w kontekście globalizacji internetu, gdzie treści mogą być tworzone w wielu językach. Ustalając odpowiednie kodowanie, programiści minimalizują ryzyko wystąpienia problemów z wyświetlaniem, takich jak zamienione znaki czy nieczytelne fragmenty tekstu. Właściwe ustawienie metadanych jest zgodne z wytycznymi W3C oraz zaleceniami dla twórców stron internetowych, co czyni ten element niezbędnym w każdej współczesnej witrynie.

Pytanie 30

Zaprezentowano kod dla tabeli 3x2. Jaką modyfikację należy wprowadzić w drugim wierszu, aby tabela przypominała tę z obrazka, gdzie wiersz jest niewidoczny?

<table>
    <tr>
        <td style="border: solid 1px;">Komórka 1</td>
        <td style="border: solid 1px;">Komórka 2</td>
    </tr>
    <tr>
        <td style="border: solid 1px;">Komórka 3</td>
        <td style="border: solid 1px;">Komórka 4</td>
    </tr>
    <tr>
        <td style="border: solid 1px;">Komórka 5</td>
        <td style="border: solid 1px;">Komórka 6</td>
    </tr>
</table>

/efekt jest na obrazie - nie dołączam - nie analizuj/

A. <pre class="code-block"><tr style="display: table-cell"></pre>

B. <pre class="code-block"><tr style="display: none"></pre>

C. <pre class="code-block"><tr style="clear: none"></pre>

D. <pre class="code-block"><tr style="visibility: hidden"></pre>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest prawidłowa, ponieważ użycie stylu 'visibility: hidden' w wierszu tabeli skutkuje tym, że wiersz ten nie jest widoczny, ale nadal zajmuje miejsce w układzie tabeli. Oznacza to, że komórki poniżej nie przesuwają się w górę, a struktura tabeli pozostaje niezmieniona. To podejście jest zgodne z sytuacjami, w których chcemy ukryć zawartość bez zmiany rozmieszczenia innych elementów. Jest to przydatne w aplikacjach, gdzie układ strony musi pozostać stabilny dla zachowania spójności wizualnej lub funkcjonalnej. Przykładem może być ukrywanie tymczasowych informacji, które nie powinny wpływać na pozostały układ interfejsu użytkownika. Jest to zgodne z dobrymi praktykami projektowania front-endu, gdzie stylizacje powinny wspierać czytelność i przewidywalność układu strony. Alternatywnie, 'display: none' usunęłoby element z przepływu dokumentu, co zmienia układ, ale w tym przypadku zastosowanie 'visibility: hidden' jest właściwym wyborem dla zachowania struktury.

Pytanie 31

Który selektor sformatuje jednocześnie akapity z klasą „tekst” oraz element blokowy o ID „obrazki”?

p#tekst + div.obrazki

p.tekst + div#obrazki

p#tekst, div.obrazki

p.tekst, div#obrazki

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kropka oznacza klasę, a krzyżyk identyfikator: <code>p.tekst</code> to akapity z klasą „tekst”, a <code>div#obrazki</code> to <code><div></code> o id „obrazki”. Przecinek między selektorami GRUPUJE je, więc <code>p.tekst, div#obrazki</code> zastosuje tę samą regułę do obu zestawów elementów naraz. Dlatego to ten selektor jest poprawny.

Pytanie 32

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

A. żółtą

B. czerwoną

C. niebieską

D. zieloną

Brak odpowiedzi na to pytanie.

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

Pytanie 33

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

A. JPEG

B. CDR

C. PNG

D. BMP

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

Wskaż, które z poniższych zdań jest prawdziwe w odniesieniu do definicji stylu:

<STYLE type="text/css">
<!--
   P {color:blue; font-size:14pt; font-style:italic;}
   A {font-size:16pt; text-transform:lowercase;}
   TD.niebieski {color:blue}
   TD.czerwony {color:red}
-->
</STYLE>

A. Odnośnik będzie napisany czcionką o rozmiarze 14 punktów

B. Akapit będzie przekształcany na małe litery

C. Zdefiniowano dwie klasy

D. Jest to styl zasięg lokalny

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W tym kodzie CSS masz zdefiniowane dwie klasy: 'niebieski' i 'czerwony', które są przypisane do elementów TD. To super, bo te klasy zmieniają kolor tekstu w tabeli, a to jest zgodne z tym, jak działają kaskadowe arkusze stylów (CSS). Klasa 'niebieski' ustawia tekst na niebiesko, a 'czerwony' na czerwono. Dzięki takim klasom można zaoszczędzić sporo czasu, bo używasz tych samych stylów w różnych miejscach w HTML. Widać, że pomyślałeś o organizacji swojego kodu. Dodatkowo, masz też style dla elementów P i A — P jest niebieski i ma czcionkę 14 punktów w kursywie, a A ma większą 16-punktową czcionkę. To pokazuje, jak elastyczne jest CSS w stylizacji różnych elementów. Fajnie, że trzymasz się dobrych praktyk w programowaniu, bo to naprawdę ułatwia późniejsze modyfikacje.

Pytanie 35

Kolor zapisany w notacji szesnastkowej #0000FF to:

A. czarny

B. zielony

C. niebieski

D. czerwony

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis szesnastkowy koloru ma postać <code>#RRGGBB</code>, gdzie każda para cyfr (00-FF) to składowa: czerwona, zielona i niebieska. W <code>#0000FF</code> składowe R i G są zerowe (<code>00</code>), a niebieska maksymalna (<code>FF</code> = 255), więc powstaje czysty niebieski. To odpowiednik zapisu <code>rgb(0, 0, 255)</code>. Znajomość skrajnych wartości (00 i FF) pozwala szybko rozpoznać kolory podstawowe. Dlatego <code>#0000FF</code> to niebieski.

Pytanie 36

W języku HTML zdefiniowano listę:

<ol>
  <li>biały</li>
  <li>czerwony
    <ul>
      <li>różowy</li>
      <li>pomarańczowy</li>
    </ul></li>
  <li>niebieski</li>
</ol>

A. Nie ma zagłębień i jest punktowana, wyświetla 5 punktów.

B. Nie ma zagłębień i jest numerowana, słowo "niebieski" ma przyporządkowany numer 5.

C. Jest to lista punktowana z zagłębioną listą numerowaną.

D. Jest to lista numerowana z zagłębioną listą punktowaną.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Dobra robota! Twoja odpowiedź jest na miejscu. Ta lista HTML, co widziałeś na obrazku, to faktycznie lista uporządkowana, stworzona przy pomocy znacznika <ol>. Takie listy są numerowane, co sprawia, że łatwiej je śledzić. W HTML mamy dwa rodzaje list: uporządkowane, czyli numerowane z <ol>, i nieuporządkowane, które robimy z <ul> i one są punktowane. Fajnie, że pamiętasz o CSS, bo dzięki niemu możemy dostosować wygląd tych list. Ogólnie, lista numerowana zaczyna od 1 i idzie dalej (1, 2, 3 itd.), a punktowana pokazuje kropki. Co ciekawe, można też zagnieżdżać listy, co daje nam takie wielopoziomowe struktury. Dlatego w tej liście mamy wewnątrz punktowaną, która jest stworzona z <ul>. I pamiętaj, że używanie właściwych znaczników ma znaczenie – szczególnie dla osób korzystających z czytników ekranu.

Pytanie 37

Którego elementu nie powinno się umieszczać w nagłówku pliku HTML?

A. <link>

B. <meta>

C. <h2>

D. <title>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <h2> jest poprawna, ponieważ ten znacznik rzeczywiście może być używany w nagłówku dokumentu HTML. Znaczniki nagłówków, takie jak <h1>, <h2>, <h3>, itd., są kluczowe dla strukturyzowania treści w HTML, ponieważ definiują hierarchię informacji na stronie. Zgodnie z najlepszymi praktykami SEO, właściwe użycie znaczników nagłówków nie tylko poprawia czytelność dla użytkowników, ale także umożliwia wyszukiwarkom lepsze zrozumienie struktury treści. Warto jednak zauważyć, że w nagłówku dokumentu HTML, który znajduje się w sekcji <head>, należy umieszczać jedynie metadane takie jak <title> oraz <meta>. Znaczniki nagłówków są przeznaczone do użycia w sekcji <body>, co podkreśla ich rolę w organizacji zawartości wizualnej. W praktyce, poprawne użycie znaczników nagłówków przyczynia się do lepszej nawigacji i dostępności treści dla użytkowników z różnymi potrzebami, w tym dla osób korzystających z technologii asystujących. Zastosowanie odpowiednich znaczników nagłówków może także wpłynąć na czas ładowania strony oraz jej ogólną wydajność.

Pytanie 38

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

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

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

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

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

Brak odpowiedzi na to pytanie.

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

Pytanie 39

Który kod HTML poprawnie tworzy akapit, w którym jedno słowo jest wyróżnione znacznikiem , a inne oznaczone jako ważne , przy prawidłowym zamknięciu wszystkich znaczników?

<p>Tekst może być <mark>wyróżniony albo <i>istotny</i> dla autora</mark></p>

<p>Tekst może być <mark>wyróżniony albo <em>istotny</em> dla autora</mark></p>

<p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>

<p>Tekst może być <mark>wyróżniony</mark> albo <em>istotny dla autora</p>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawny kod to <pre class="code-block"><p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p></pre>Tu <code><mark></code> wyróżnia pojedyncze słowo, <code><em></code> oznacza inne jako ważne, a każdy znacznik ma swój znacznik zamykający we właściwym miejscu. Dlatego ta wersja jest prawidłowa.

Pytanie 40

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: right; } section { float: right; }

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

D. aside {float: left; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłowa odpowiedź opiera się na tym, jak działają własności float w CSS i w jakiej kolejności przeglądarka renderuje elementy blokowe. Jeśli w dokumencie HTML kolejność znaczników to np. <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.

Rozpocznij nowy egzamin

Powrót do strony głównej