Wyniki egzaminu

Informacje o egzaminie:
  • Zawód: Technik informatyk
  • Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
  • Data rozpoczęcia: 23 kwietnia 2026 09:08
  • Data zakończenia: 23 kwietnia 2026 09:12

Egzamin niezdany

Wynik: 7/40 punktów (17,5%)

Wymagane minimum: 20 punktów (50%)

Nowe
Analiza przebiegu egzaminu- sprawdź jak rozwiązywałeś pytania
Udostępnij swój wynik
Szczegółowe wyniki:
Pytanie 1

Który z poniższych znaczników jest używany do definiowania list w HTML?

A. <ul>
B. <th>
C. <td>
D. <tr>
<ul> jest znacznikami HTML, które definiuje nieuporządkowaną listę. Użycie tego znacznika pozwala na przedstawienie elementów listy w formie graficznej, gdzie każdy element jest oznaczony punktem. Jest to podstawowy element w HTML, który jest zgodny z wytycznymi W3C i szeroko stosowany w tworzeniu responsywnych i estetycznych interfejsów użytkownika. Przykładowe zastosowanie <ul> może obejmować listy składników, funkcji, czy też elementów menu na stronie internetowej. Stosując <ul>, można także użyć znacznika <li>, aby określić poszczególne elementy listy, co zwiększa czytelność i strukturalizację treści. Znajomość i umiejętność stosowania tych znaczników jest kluczowa dla każdego web developera, aby tworzyć dostępne i zrozumiałe dla użytkowników interfejsy, a także wspierać praktyki SEO poprzez odpowiednią organizację treści.

Pytanie 2

W CSS, żeby uzyskać efekt kursywy dla tekstu, należy zastosować właściwość

A. font-size
B. font-variant
C. font-style
D. font-family
W języku CSS, aby uzyskać efekt pochylenia tekstu, należy zastosować właściwość font-style, która umożliwia określenie stylu czcionki. Właściwość ta ma kilka wartości, z których najczęściej używaną jest 'italic', która pochyla tekst w sposób naturalny, przypominający ręczne pismo. Można także użyć wartości 'oblique', która również powoduje pochylenie, ale w nieco inny sposób, dając efekt bardziej syntetyczny. Przykładem może być następujący kod CSS: p { font-style: italic; }. Wartości te są zgodne z dokumentacją W3C, która definiuje standardy CSS. Użycie font-style jest kluczowe w projektowaniu responsywnych stron internetowych, gdzie estetyka i typografia odgrywają istotną rolę w odbiorze wizualnym. Pochylenie tekstu może być także użyte do wyróżniania cytatów lub nazw własnych, co zwiększa czytelność i przejrzystość dokumentu. Dobrą praktyką jest również testowanie stylów na różnych przeglądarkach, aby upewnić się, że efekt pochylenia jest zgodny z oczekiwaniami we wszystkich środowiskach.

Pytanie 3

Przedstawiono kod tabeli 3×2. Jaką modyfikację należy wprowadzić w drugim wierszu, aby tabela wyglądała jak na obrazie z niewidocznym wierszem?

<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>
Komórka 1Komórka 2
Komórka 3Komórka 4
Komórka 5Komórka 6
A. <tr style="display: table-cell">
B. <tr style="visibility: hidden">
C. <tr style="display: none">
D. <tr style="clear: none">
Wybrana odpowiedź jest niepoprawna, ale nie martw się, to jest okazja do nauki. Jeśli chcesz ukryć element na stronie, ale zachować jego miejsce w układzie, powinieneś użyć właściwości CSS 'visibility: hidden'. Takie podejście jest zgodne z dobrymi praktykami w tworzeniu stron internetowych. Inne opcje, takie jak 'display: none', 'display: table-cell' i 'clear: none' nie są odpowiednie w tym kontekście. 'display: none' całkowicie usuwa element z układu strony, co powoduje przesunięcie pozostałych elementów, aby zapełnić puste miejsce. 'display: table-cell' jest właściwością, która pozwala elementowi zachowywać się jak komórka tabeli, co nie ma tutaj zastosowania, gdyż chcemy ukryć cały wiersz, a nie pojedynczą komórkę. 'clear: none' jest właściwością używaną do kontroli przepływu elementów w stosunku do elementów z lewej lub prawej strony, ale nie ma wpływu na ukrywanie elementów. Dobra praktyka polega na zrozumieniu i właściwym stosowaniu różnych właściwości CSS, aby uzyskać zamierzony efekt na stronie.

Pytanie 4

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

A. ```<u>``` oraz ```<sup>```
B. ```<i>``` oraz ```<mark>```
C. ```<b>``` oraz ```<i>```
D. ```<b>``` oraz ```<u>```
Wybór znacznika <i> oraz <mark> jako odpowiedzi na pytanie o semantyczne odpowiedniki <strong> oraz <em> można uznać za niepoprawny, ponieważ znaczniki te pełnią inne funkcje. Znacznik <mark> służy do wyróżniania tekstu, co ma na celu zwrócenie uwagi na istotne informacje, ale nie odnosi się bezpośrednio do semantycznego akcentowania. Z kolei <i>, mimo że jest używany do kursywnego pisma, nie niesie ze sobą znaczenia semantycznego, które jest kluczowe dla HTML5. Oznaczenie tekstu jako kursywy nie wskazuje, że tekst jest ważniejszy, a użycie <u> do podkreślenia tekstu, które sugeruje tylko wizualne podkreślenie, również nie ma semantycznego znaczenia. Znacznik <b> jest bardziej zbliżony do <strong> pod względem wizualnym, ale nie posiada jego semantycznej wartości. Używanie <u> czy <sup> do oznaczania ważności tekstu jest również błędne, ponieważ <sup> wskazuje na tekst w indeksie górnym, co nie ma związku z akcentowaniem. Typowe błędy myślowe w tym kontekście mogą wynikać z mylenia aspektów wizualnych z semantycznymi w HTML. Dlatego kluczowe jest, aby przy projektowaniu stron używać znaczników zgodnych z ich przeznaczeniem, co nie tylko poprawi strukturalność dokumentu, ale także przyczyni się do lepszego doświadczenia użytkownika oraz dostępności treści.

Pytanie 5

Aby wyciszyć dźwięk w filmie odtwarzanym w przeglądarce, do podanej definicji znacznika <video> powinien zostać dodany atrybut <video> <source src="film.mp4" type="video/mp4"> </video>

A. loop
B. controls
C. muted
D. autoplay
Atrybut 'muted' w znaczniku <video> jest kluczowy dla zarządzania dźwiękiem w odtwarzanych filmach. Gdy dodamy atrybut 'muted', zapewniamy, że film będzie odtwarzany bez dźwięku, co jest szczególnie istotne w kontekście doświadczenia użytkownika na stronie internetowej. W praktyce, wiele stron korzysta z automatycznego odtwarzania filmów w tle, co jest popularne w serwisach informacyjnych oraz mediach społecznościowych. Bez dźwięku, użytkownicy nie są rozpraszani, a strona nie wpływa negatywnie na ich doświadczenie przeglądania. Zgodnie z najlepszymi praktykami, należy również pamiętać o dostępności – filmy bez dźwięku mogą być łatwiej przyswajalne dla osób z problemami ze słuchem, a także unikamy sytuacji, w której nagłe dźwięki mogłyby wywołać dyskomfort. Atrybut 'muted' jest więc nie tylko funkcjonalny, ale także zgodny z zasadami projektowania stron internetowych, które stawiają na komfort użytkownika.

Pytanie 6

Wskaż styl CSS za pomocą, którego uzyskano przedstawiony efekt

Styl 1.
img {
  width: 100px;
  border-radius: 10%;
}
Styl 2.
img {
  width: 100px;
  border-radius: 50px;
}
Styl 3.
img {
  width: 100px;
  border: 50% green;
}
Styl 4.
img {
  width: 100px;
  shape: circle;
}
Ilustracja do pytania
A. Styl 3.
B. Styl 2.
C. Styl 1.
D. Styl 4.
Niestety, wybrałeś niepoprawną odpowiedź. Poprawną odpowiedzią jest 'Styl 2.', który wykorzystuje właściwość CSS border-radius z wartością 50px do zaokrąglania rogów obrazka. Zobaczmy, dlaczego pozostałe style są niepoprawne. 'Styl 1.' ma za małą wartość zaokrąglenia, co nie daje oczekiwanego efektu. Właściwość border-radius musi mieć odpowiednią wartość, aby uzyskać pożądane zaokrąglenie. 'Styl 3.' zawiera niepoprawną wartość, a mianowicie kolor. Kolor nie jest właściwą wartością dla border-radius, co pokazuje, jak ważne jest zrozumienie, jakie wartości są akceptowane dla różnych właściwości CSS. 'Styl 4.' używa właściwości shape, która nie istnieje w CSS. To jest błąd typowy dla osób, które nie są jeszcze pewne, które właściwości są dostępne w CSS. Jest to jasnym przykładem, dlaczego nauka i praktyka CSS są tak ważne do tworzenia atrakcyjnych i funkcjonalnych stron internetowych.

Pytanie 7

Na ilustracji zaprezentowano koncepcję układu bloków strony internetowej. Przyjmując, że bloki są realizowane za pomocą znaczników sekcji, a szerokość jest określona tylko dla bloków 2, 3 oraz 4, ich stylowanie powinno uwzględniać właściwość

Ilustracja do pytania
A. float: left jedynie dla bloków 3 i 4 oraz clear: both dla bloku 2
B. float: left dla wszystkich bloków
C. clear: both dla bloku 5 i float: left jedynie dla bloków 2, 3 oraz 4
D. clear: both dla wszystkich bloków
Stosowanie float: left dla wszystkich bloków jest nieprawidłowe, ponieważ prowadziłoby do nieprzewidywalnego zachowania bloków 1 i 5, które powinny być pełnej szerokości strony. Użycie float: left dla bloku 1 oznaczałoby, że jego miejsce w układzie zależałoby od szerokości i pozycji innych pływających elementów. Podobnie blok 5 potrzebuje wyraźnej separacji od pływających elementów powyżej, co osiągamy dzięki clear: both. Użycie clear: both dla wszystkich bloków odwołuje się do nieprawidłowej koncepcji, ponieważ blokowałoby to pływanie, co jest kluczowe dla tworzenia układów wielokolumnowych. Clear: both zmusza element do rozpoczęcia pod pływającymi elementami, co oznacza, że bloki 2, 3 i 4 nie mogłyby być ustawione obok siebie, co nie spełnia wymagań projektu. Rozważenie float: left jedynie dla bloków 3 i 4 i clear: both dla bloku 2 zaburzyłoby logiczny ciąg layoutu ze względu na fizyczne blokowanie się bloków, co wywołałoby niepożądane przesunięcia i brak przewidywalności w wyświetlaniu. Zastosowanie float w celu tworzenia układów kolumnowych wymaga precyzyjnego zarządzania pływającymi elementami, a niepoprawne użycie właściwości clear może prowadzić do problemów z dostępnością i użytecznością strony. Dlatego właściwe zrozumienie tych koncepcji jest kluczowe w tworzeniu efektywnych i responsywnych projektów internetowych, zgodnych z oczekiwaniami użytkowników oraz standardami branżowymi.

Pytanie 8

Aby w języku HTML uzyskać formatowanie paragrafu przedstawione w ramce, należy zastosować kod

Ilustracja do pytania
A. <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny dla autora</p>
B. <p>Tekst może być <mark>zaznaczony albo <i>istotny</i> dla autora</mark></p>
C. <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>
D. <p>Tekst może być <mark>zaznaczony albo <em>istotny</em> dla autora</mark></p>
Poprawnie wybrałeś kod z poprawnie zagnieżdżonymi i domkniętymi znacznikami: <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>. To dokładnie odpowiada temu, co widać na podglądzie: zwykły akapit, w nim jedno słowo podświetlone na żółto oraz inne wyróżnione kursywą. Znacznik <p> tworzy paragraf – podstawowy blok tekstu w HTML. W środku używasz elementów liniowych (inline): <mark> do zaznaczenia fragmentu tekstu jak zakreślaczem oraz <em> do zaznaczenia treści istotnej znaczeniowo, co domyślnie jest renderowane jako kursywa. Według specyfikacji HTML5 <mark> służy do semantycznego wyróżnienia tekstu związanego z kontekstem, np. wynik wyszukiwania na stronie czy aktualnie ważna informacja. <em> natomiast podkreśla akcent logiczny w zdaniu, a nie tylko ozdobne pochylenie, co jest dobrą praktyką dostępnościową. Ważne jest też poprawne zagnieżdżanie: najpierw otwierasz <mark>, potem go zamykasz </mark>, dopiero później otwierasz <em> i zamykasz </em>. Żaden z tych znaczników nie nachodzi na siebie w sposób krzyżowy. Tego pilnują walidatory W3C i warto się do tego przyzwyczaić od początku. W codziennej pracy taki kod możesz wykorzystać np. w artykułach, dokumentacji technicznej, materiałach szkoleniowych, gdzie chcesz: zakreślić słowo kluczowe (<mark>) i jednocześnie podkreślić termin ważny dla autora lub kontekstu (<em>). Moim zdaniem lepiej stosować <em> zamiast <i>, bo <em> niesie znaczenie semantyczne i czytniki ekranu potrafią je zinterpretować, co poprawia dostępność strony.

Pytanie 9

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

A. #00F
B. #F00
C. #0F0
D. #FFF
Kolor zielony w notacji szesnastkowej skróconej, zapisany jako #0F0, jest standardowym sposobem reprezentacji koloru w CSS. W tej notacji każdy kanał koloru (czerwony, zielony, niebieski) jest reprezentowany przez dwucyfrową liczbę szesnastkową. W przypadku koloru zielonego, kanał czerwony jest ustawiony na 0, kanał zielony na maksymalną wartość (FF) i kanał niebieski na 0. Wartości te odpowiadają skali RGB, gdzie 0 oznacza brak koloru, a FF oznacza pełną intensywność. Przykładowo, w CSS można wykorzystać ten kolor w stylach dla elementów HTML, np. dla tła: 'background-color: #0F0;'. Dzięki temu możliwe jest osiągnięcie jasnego, intensywnego zielonego koloru. Notacja szesnastkowa jest powszechnie używana w projektowaniu webowym i jest zgodna ze standardami W3C, co czyni ją uniwersalnym narzędziem dla programistów i projektantów stron internetowych. Kolor zielony, uzyskiwany przez kombinację pełnej intensywności zielonego i braku czerwonego oraz niebieskiego, jest często wykorzystywany w interfejsach użytkownika, co czyni jego znajomość kluczową dla efektywnego projektowania stron.

Pytanie 10

Jaki jest efekt działania programu w JavaScript?

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

Pytanie 11

Która z zasad dotyczących użycia semantycznych znaczników sekcji w języku HTML 5 jest poprawna?

A. Znacznik <main> może być użyty tylko raz w danym dokumencie
B. Znacznik <aside> jest wykorzystywany dla dodatkowej treści strony
C. Znacznik <nav> jest przypisany do sekcji <article>
D. Znacznik <footer> powinien być umieszczony na górze strony, a <header> na jej końcu
Znacznik <main> w HTML5 jest przeznaczony do określenia głównej treści dokumentu, która jest bezpośrednio związana z jego tematem lub celem. Warto podkreślić, że zgodnie z definicją W3C, <main> powinien być używany tylko raz na stronie, aby zapewnić jednoznaczność struktury dokumentu oraz ułatwić nawigację dla technologii wspomagających, takich jak czytniki ekranu. Przykładowo, gdy tworzysz stronę internetową z artykułami, sekcja <main> może zawierać wszystkie te artykuły, natomiast inne sekcje, takie jak <header>, <footer> czy <aside>, powinny być wykorzystywane do różnych celów, takich jak nawigacja, stopka czy treści poboczne. Użycie <main> zgodnie z jego przeznaczeniem nie tylko poprawia semantykę strony, ale także jej dostępność, co jest kluczowe dla dzisiejszego web developmentu.

Pytanie 12

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

A. użycie emulatora przeglądarek internetowych, np. Browser Sandbox
B. skorzystanie z narzędzia do walidacji kodu HTML
C. testowanie strony w programie Internet Explorer, zakładając, że inne przeglądarki będą kompatybilne
D. zainstalowanie na kilku maszynach różnych przeglądarek i przeprowadzenie testu witryny
Wykorzystywanie walidatora języka HTML do testowania witryny w różnych przeglądarkach nie jest wystarczającą metodą. Walidatory są narzędziami, które sprawdzają poprawność kodu HTML pod kątem zgodności ze standardami W3C, ale nie oceniają, jak rzeczywiście strona będzie działać w różnych przeglądarkach. Możliwe jest, że strona przejdzie test walidacji, ale w rzeczywistości może wyświetlać się inaczej w różnych przeglądarkach z powodu różnych silników renderujących. Instalowanie różnych przeglądarek na wielu komputerach również nie jest efektywnym rozwiązaniem, gdyż wymaga znacznych nakładów czasu i zasobów, a także trudności w utrzymaniu aktualizacji i wersji. Testowanie jedynie w programie Internet Explorer, zakładając, że inne przeglądarki będą działać podobnie, jest mylne, gdyż różnice w implementacji standardów HTML, CSS i JavaScript w różnych przeglądarkach mogą prowadzić do nieoczekiwanych błędów. Takie podejście może skutkować poważnymi problemami z użytecznością, a także obniżyć jakość doświadczenia użytkownika. Istnieje zatem ryzyko, że aplikacja webowa nie będzie działać prawidłowo na kluczowych platformach, co w dzisiejszym zróżnicowanym środowisku przeglądarek stanowi istotne zagrożenie dla reputacji i funkcjonalności witryny.

Pytanie 13

Edytor, który realizuje zasady WYSIWYG, powinien umożliwiać

A. przetwarzanie plików dźwiękowych przed ich umieszczeniem na stronie internetowej
B. tworzenie elementów podstawowej grafiki wektorowej
C. osiągnięcie podobnego rezultatu tworzonej strony do jej wizualizacji w przeglądarce internetowej
D. publikację serwisów na serwerze przy użyciu wbudowanego klienta FTP

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Edytor WYSIWYG (What You See Is What You Get) jest narzędziem, które umożliwia użytkownikom tworzenie treści internetowych w sposób intuicyjny, bez konieczności znajomości kodu HTML czy CSS. Kluczowym założeniem tego typu edytora jest to, że użytkownik widzi na ekranie dokładny obraz tego, co będzie wyświetlane w przeglądarce. Uzyskanie zbliżonego wyniku tworzonej strony do jej obrazu w przeglądarce internetowej oznacza, że edytor powinien umożliwiać podgląd na żywo oraz edytowanie treści w sposób, który bezpośrednio odzwierciedla rezultaty. Przykładem takiego edytora jest WordPress, który pozwala na tworzenie stron za pomocą edytora blokowego, gdzie użytkownik może na bieżąco widzieć, jak jego strona będzie wyglądać. Standardy, takie jak HTML5 oraz CSS3, są kluczowe w kontekście tworzenia responsywnych i interaktywnych stron, a edytory WYSIWYG powinny wspierać te standardy, aby zapewniać zgodność z nowoczesnymi praktykami webowymi. Dodatkowo, funkcje takie jak przeciąganie i upuszczanie elementów, możliwość dodawania multimediów oraz formatowania tekstu są nieodłącznymi elementami, które przyczyniają się do efektywności edytorów WYSIWYG.

Pytanie 14

Który znacznik ma zastosowanie w sekcji body dokumentu HTML?

A. <meta>
B. <link>
C. <title>
D. <h2>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
<h2> to znacznik nagłówka, który zgodnie ze specyfikacją HTML5 stosuje się właśnie w sekcji <body>. Nagłówki od <h1> do <h6> służą do strukturyzowania treści dokumentu, czyli tego, co realnie widzi użytkownik na stronie. W <body> umieszczamy całą zawartość prezentowaną w przeglądarce: teksty, nagłówki, obrazy, formularze, przyciski, listy itd. Moim zdaniem dobrze jest zapamiętać prostą zasadę: wszystko, co jest „treścią strony” dla użytkownika, ląduje w <body>, a wszystko, co jest „informacją o stronie” dla przeglądarki i wyszukiwarki – w <head>. Znacznik <h2> jest semantycznym nagłówkiem drugiego poziomu. Oznacza to, że powinien być używany jako podtytuł lub tytuł sekcji podrzędnej względem <h1>. Przykładowo: <h1>Temat strony</h1>, a niżej <h2>Podrozdział 1</h2>, <h2>Podrozdział 2</h2> itd. Taka struktura pomaga nie tylko użytkownikom, ale też czytnikom ekranowym, SEO i ogólnej czytelności kodu. Dobre praktyki mówią, żeby nie używać nagłówków tylko do „zwiększania czcionki”, ale właśnie do logicznego podziału treści. Do zmiany wyglądu służy CSS. W typowym dokumencie HTML mamy: <html>, w nim <head> z metadanymi i <body> z widoczną zawartością. <h2> musi znajdować się właśnie w <body>, bo jest elementem treści, a nie metadanych. Gdy zaczniesz pisać większe strony, poprawne wykorzystanie nagłówków bardzo ułatwia nawigację, generowanie spisów treści, a także utrzymanie projektu w ryzach, co w praktyce jest naprawdę ważne przy pracy zespołowej czy w dużych serwisach.

Pytanie 15

W języku HTML, dane dotyczące autora, opisu oraz słów kluczowych strony powinny być zamieszczone

A. pomiędzy znacznikami <body> i </body>, w znaczniku <meta>
B. pomiędzy znacznikami <body> i </body>, w znaczniku <html>
C. pomiędzy znacznikami <head> i </head>, w znaczniku <meta>
D. pomiędzy znacznikami <head> i </head>, w znaczniku <style>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W HTML informacje dotyczące autora, streszczenia i słów kluczowych strony powinny być umieszczone pomiędzy znacznikami <head> i </head>, w znaczniku <meta>. Znacznik <head> jest przeznaczony do przechowywania metadanych strony, które nie są wyświetlane bezpośrednio na stronie, ale są istotne dla przeglądarek internetowych oraz wyszukiwarek. Informacje te pomagają w indeksowaniu strony, co ma kluczowe znaczenie dla SEO. Przykładowe metadane to <meta name='author' content='Imię Nazwisko'>, które wskazuje autora treści, <meta name='description' content='Opis strony'>, które dostarcza krótkie streszczenie jej zawartości oraz <meta name='keywords' content='słowo1, słowo2'>, które definiuje słowa kluczowe związane z treścią. Umieszczanie tych informacji w sekcji <head> jest standardem w HTML, co zapewnia ich poprawne rozpoznanie przez roboty wyszukiwarki, a także pozwala na odpowiednie wyświetlanie w wynikach wyszukiwania. Dlatego kluczowe jest, aby stosować się do tych zaleceń, aby poprawić widoczność strony w Internecie.

Pytanie 16

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
No dobra, ta odpowiedź <img src="rysunek.png" style="width: 50px"> jest w porządku, bo ustawia szerokość grafiki na 50 pikseli. Dzięki temu zachowujemy proporcje oryginalnego rysunku, który ma rozmiar 200x100 pikseli. Jak zmniejszymy szerokość do 50 px, to automatycznie zmniejsza się też wysokość, więc dostajemy miniaturkę 50x25 px. To jest mega istotne, kiedy budujemy responsywne strony, które muszą się dobrze wyświetlać na różnych urządzeniach. Korzystanie z CSS do ogarniania wielkości obrazków to najlepsza praktyka w web devie, bo dzięki temu możemy elastycznie dopasować treści do różnych ekranów. No i nie zapominajmy o dostępności – zasady mówią, że zachowanie proporcji jest ważne, bo źle skompresowane lub rozciągnięte obrazy mogą sprawić problem osobom z ograniczeniami wzrokowymi.

Pytanie 17

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

Ilustracja do pytania
A. oznaczenie ISO-8859-2 nie istnieje.
B. w znaczniku meta nie występuje atrybut charset.
C. w atrybucie charset jest dozwolona wyłącznie wartość "utf-8".
D. oznaczenie kodowania znaków powinno być zapisane bez myślników.

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

Do zdefiniowania listy nienumerowanej w języku HTML, jaki znacznik należy zastosować?

A. <dd>
B. <dt>
C. <ul>
D. <ol>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Aby zdefiniować w języku HTML listę nienumerowaną, należy użyć znacznika <ul>, co jest standardem w HTML. Znacznik <ul> oznacza "unordered list", czyli listę, w której poszczególne elementy nie są uporządkowane w kolejności numeracyjnej. Elementy tej listy są zazwyczaj wyświetlane z ikoną (punktami) przed każdym elementem, co podkreśla ich nienumerowany charakter. Każdy element listy jest definiowany za pomocą znacznika <li> (list item). Przykładowo, pełna struktura HTML dla listy nienumerowanej może wyglądać następująco: <ul><li>Pierwszy element</li><li>Drugi element</li></ul>. Używanie list nienumerowanych jest szczególnie pomocne w organizowaniu treści w sposób, który nie wymaga hierarchii, ale raczej prezentuje różne elementy na równym poziomie. W standardach W3C HTML5, <ul> jest zalecanym znakiem do tworzenia takich struktur, co czyni go kluczowym elementem w budowie przejrzystych i zrozumiałych stron internetowych. Implementacja list nienumerowanych w HTML jest istotnym krokiem w tworzeniu semantycznie poprawnych dokumentów, co wpływa na dostępność oraz SEO.

Pytanie 19

Który z poniższych wpisów w dokumencie HTML umożliwia połączenie z zewnętrznym arkuszem stylów o nazwie style.css?

A. <a href="/style.css">
B. <link rel="stylesheet" href="/style.css">
C. <a src="/style.css">
D. <link rel="stylesheet' src="/style.css">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Czyli tak, zapis <link rel="stylesheet" href="/style.css"> to rzeczywiście dobry sposób na dodanie arkusza stylów zewnętrznych do HTML-a. Element <link> jest super dołączany do zewnętrznych zasobów, a ten atrybut rel mówi przeglądarce, co tak naprawdę dołączamy – w tym wypadku arkusz stylów CSS. Jak ustalamy rel="stylesheet", to mówimy przeglądarce: hej, ten plik to CSS. A atrybut href? No, on wskazuje, gdzie ten plik się znajduje, tutaj to będzie style.css w głównym katalogu serwera. Fajnie jest mieć zewnętrzne arkusze stylów, ponieważ to uporządkowuje nam kod. Możemy zmieniać style w jednym pliku, a nie bawić się w edytowanie każdej strony z osobna. Dodatkowo, przeglądarki mogą buforować te pliki, co przyspiesza ładowanie. No i nie zapominaj o dobrej organizacji plików i sensownych nazwach – to naprawdę ułatwia późniejsze życie z projektem.

Pytanie 20

Jakim zapisem w dokumencie HTML można stworzyć element, który wyświetli obraz kotek.jpg oraz tekst alternatywny "obrazek kotka"?

A. <img href="kotek.jpg" title="obrazek kotka">
B. <img href="kotek.jpg" alt="obrazek kotka">
C. <img src="kotek.jpg" title="obrazek kotka">
D. <img src="kotek.jpg" alt="obrazek kotka">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <img src="kotek.jpg" alt="obrazek kotka"> jest poprawna, ponieważ zawiera element <img>, który jest standardowym rozwiązaniem do wyświetlania obrazów w dokumentach HTML. Atrybut src określa ścieżkę do pliku obrazu, co jest kluczowe dla poprawnego załadowania grafiki na stronie. Atrybut alt z kolei pełni istotną rolę w zapewnieniu dostępności treści; tekst alternatywny wyświetla się w przypadku, gdy obraz nie może zostać załadowany lub jest odczytywany przez programy dla osób niewidomych. Zastosowanie odpowiednich atrybutów jest zgodne z wytycznymi W3C dotyczącymi dostępności, co pozwala na tworzenie bardziej przyjaznych dla użytkowników stron internetowych. W praktyce, prawidłowe wykorzystanie atrybutu alt jest również korzystne dla SEO, ponieważ wyszukiwarki analizują te opisy przy ocenie kontekstu strony. Ważne jest, aby zawsze stosować zarówno src, jak i alt, aby zapewnić pełnię funkcji obrazu na stronie.

Pytanie 21

W języku HTML zapisano formularz. Który z efektów działania kodu będzie wyświetlony przez przeglądarkę zakładając, że w pierwsze pole użytkownik przeglądarki wpisał wartość "Przykładowy text"?

Ilustracja do pytania
A. Efekt 4.
B. Efekt 3.
C. Efekt 2.
D. Efekt 1.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Dobra robota! Odpowiedź, którą wybrałeś, to Efekt 2. W formularzu HTML masz różne elementy, które służą do zbierania danych od użytkownika. Tutaj mamy pole tekstowe i dwa checkboxy. Jak wpiszesz 'Przykładowy text' w pole tekstowe i wyślesz formularz, to właśnie to się wyświetli w przeglądarce. Efekt 2 pokazuje, że pole tekstowe ma wpisany tekst i dwa niezaznaczone checkboxy. Dlatego to jest zgodne z tym, co zobaczysz w przeglądarce. A to oznacza, że Efekt 2 jest poprawną odpowiedzią. Właściwie to wszystko jest zgodne z tym, jak HTML działa, czyli jak powinny wyglądać i działać różne elementy formularza.

Pytanie 22

W CSS jednostką miary, która jest wyrażona w punktach edytorskich, oznaczana jest symbolem

A. em
B. in
C. pt
D. px

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Symbolem jednostki miary wyrażonej w punktach edytorskich w CSS jest 'pt'. Jednostka ta odnosi się do punktów typograficznych, które są tradycyjnie używane w druku. 1 punkt typograficzny odpowiada 1/72 cala. Używanie jednostki 'pt' jest szczególnie przydatne w projektowaniu dla mediów drukowanych, gdzie precyzyjne odwzorowanie wielkości tekstu ma kluczowe znaczenie. W CSS, 'pt' może być stosowane do definiowania rozmiarów czcionek, marginesów oraz innych właściwości wymiarowych, co zapewnia spójność między różnymi urządzeniami i mediami. Przykład użycia może wyglądać tak: 'font-size: 12pt;' co oznacza, że tekst ma mieć 12 punktów typograficznych. Warto pamiętać, że różne przeglądarki i systemy operacyjne mogą różnie interpretować jednostki miary, dlatego stosowanie punktów w kontekście druku jest bardziej zalecane, aniżeli w sieci, gdzie lepiej sprawdzają się inne jednostki, takie jak 'px' lub 'em'. W dokumentach CSS3 jednostka 'pt' jest częścią standardów CSS, co zapewnia jej szerokie wsparcie w różnych przeglądarkach i narzędziach do projektowania.

Pytanie 23

Aplikacja o nazwie FileZilla umożliwia

A. przeprowadzanie testów aplikacji
B. importowanie bazy danych do systemu CMS Joomla!
C. publikację strony internetowej na zdalnym serwerze
D. sprawdzanie poprawności plików HTML i CSS

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
FileZilla to popularny klient FTP (File Transfer Protocol), który umożliwia użytkownikom przesyłanie plików pomiędzy lokalnym komputerem a zdalnym serwerem. Głównym celem korzystania z FileZilla jest publikacja stron internetowych, co polega na załadowaniu plików HTML, CSS, obrazków oraz innych zasobów na serwer, gdzie strona będzie dostępna dla użytkowników w Internecie. Dzięki intuicyjnemu interfejsowi, użytkownicy mogą łatwo przeciągać i upuszczać pliki, co przyspiesza proces publikacji. FileZilla obsługuje różne protokoły, w tym FTP, FTPS oraz SFTP, co zapewnia bezpieczeństwo podczas transferu danych. Dobrą praktyką jest regularne aktualizowanie programu, aby korzystać z najnowszych funkcji i poprawek bezpieczeństwa. W kontekście publikacji stron internetowych, FileZilla stanowi kluczowe narzędzie dla web developerów, umożliwiając im szybkie i efektywne zarządzanie plikami na serwerach zdalnych. Używanie FileZilla wspiera standardy branżowe, takie jak bezpieczeństwo transferu danych oraz zdalne zarządzanie plikami, co jest niezbędne w profesjonalnym rozwoju stron internetowych.

Pytanie 24

Pokazane pole input pozwala na  

<input type = "checkbox" name = "text1" value = "text2">

A. selekcja opcji z listy o wartościach text1 i text2
B. wprowadzenie hasła
C. wprowadzenie dowolnego tekstu
D. wybranie opcji

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź "zaznaczenie opcji" jest na pewno trafna, bo pole checkbox (<input type='checkbox'>) jest stworzone do tego, żeby użytkownicy mogli wybrać jedną lub więcej opcji z danej grupy. Widzisz, checkboxy są bardzo popularne w formularzach internetowych, bo pozwalają na różnorodność wyborów, w przeciwieństwie do przycisków radiowych, które pozwalają na zaznaczenie tylko jednej opcji. Na przykład, jak się rejestrujesz na stronie, możesz zaznaczyć różne zgody na przetwarzanie danych, co daje możliwość wyboru więcej niż jednej opcji. Z punktu widzenia HTML i najlepszych praktyk w projektowaniu formularzy, warto dodać odpowiednie etykiety (label) do checkboxów, żeby ułatwić korzystanie z nich osobom, które używają technologii asystujących. Jeśli dobrze ustalimy atrybuty 'name' i 'value', to dane po przesłaniu formularza będą odpowiednio przetworzone. Pamiętaj, że wartość checkboxa jest przesyłana tylko wtedy, gdy jest zaznaczony, co jest zgodne z oczekiwaniami użytkowników oraz standardami W3C.

Pytanie 25

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

A. dodanie grafiki
B. zmianę czcionki na kursywę
C. określenie formularza
D. ustalenie nagłówka w treści

Brak odpowiedzi na to pytanie.

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

Pytanie 26

Wskaż prawidłowe twierdzenie odnoszące się do zaprezentowanego kodu HTML.

<video width="640" height="480" controls>
    <source src="animacja.mp4" type="video/mp4">
</video>
A. Plik animacja.mp4 powinien mieć rozdzielczość 640x480 pikseli, aby można go było odtworzyć.
B. Użytkownik nie będzie miał możliwości kontrolowania odtwarzania wideo.
C. Kod może nie działać w przeglądarkach, które nie wspierają HTML5.
D. Ścieżka do pliku jest niepoprawna, nie zawiera pełnej ścieżki.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź wskazująca, że kod może nie działać w przeglądarce, jeśli nie obsługuje ona HTML5, jest poprawna, ponieważ standard HTML5 wprowadził wiele nowych elementów, w tym znacznik <video>, który umożliwia osadzanie materiałów wideo w stronach internetowych. Przeglądarki, które nie obsługują HTML5, nie będą w stanie poprawnie interpretować tego kodu, co skutkuje brakiem możliwości odtworzenia wideo. Przykładem mogą być starsze wersje Internet Explorera, które nie były zgodne z HTML5. Dobrą praktyką jest testowanie strony w różnych przeglądarkach oraz wykorzystywanie polyfilli, które mogą wspierać starsze przeglądarki w obsłudze nowych funkcjonalności. Warto również zrozumieć, że aby zapewnić szeroką dostępność treści wideo, użycie znaczników HTML5 powinno być wspierane dodatkowymi informacjami o alternatywnych formatach oraz kodowaniu wideo, co zwiększa szanse na poprawne wyświetlenie treści na różnych platformach.

Pytanie 27

W języku HTML zdefiniowano listę, która

<ol>
  <li>biały</li>
  <li>czerwony
    <ul>
      <li>różowy</li>
      <li>pomarańczowy</li>
    </ul></li>
  <li>niebieski</li>
</ol>
A. jest numerowana z zagłębioną listą punktowaną
B. nie posiada zagłębień i jest punktowana, wyświetla 5 punktów
C. jest punktowana z zagłębioną listą numerowaną
D. nie zawiera zagłębień i jest numerowana, słowo "niebieski" ma przyporządkowany numer 5

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
To pytanie świetnie pokazuje, jak w HTML można łączyć różne typy list, czyli listy numerowane (<ol>) oraz punktowane (<ul>). W tym przypadku mamy główną listę numerowaną, gdzie każdy element to <li>. Jednym z tych elementów jest „czerwony”, pod którym zagnieżdżono listę punktowaną z dwoma podpunktami („różowy”, „pomarańczowy”). Taki sposób strukturyzowania treści w HTML to całkowicie zgodna ze specyfikacją praktyka – właśnie dzięki kombinowaniu <ol> i <ul> można czytelnie przedstawiać np. instrukcje czy hierarchiczne zestawienia. Moim zdaniem to jedno z najprostszych, a zarazem najbardziej efektywnych narzędzi do prezentowania hierarchii – nie tylko na stronach technicznych, ale nawet w prostych notatkach. Przeglądarki zawsze renderują <ol> jako listę numerowaną, a <ul> jako wypunktowaną, więc użytkownik końcowy od razu widzi, co jest ważniejsze, a co podrzędne. Takie zagnieżdżenie list to w branży webowej chleb powszedni – np. instrukcje krok po kroku, gdzie niektóre kroki mają dodatkowe podpunkty. Warto pamiętać, że trzymanie się tej struktury i nie mieszanie porządkowania (np. nie zamieniać miejscami <ol> i <ul> bez powodu) ułatwia późniejszą edycję i utrzymanie kodu, co w większych projektach bardzo doceni każdy programista. Sam często stosuję takie rozwiązania i naprawdę nie ma tu lepszej praktyki, jeśli chodzi o przejrzystość kodu HTML.

Pytanie 28

W znaczniku meta w miejsce kropek należy wpisać

Ilustracja do pytania
A. informację o dostosowaniu do urządzeń mobilnych
B. język dokumentu
C. nazwa edytora
D. streszczenie treści strony

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 29

Który z poniższych formatów NIE umożliwia zapis plików animowanych?

A. SVG
B. GIF
C. SWF
D. ACE

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format ACE (Archive Compressed Enhanced) jest formatem archiwum, który służy do kompresji danych, a nie do przechowywania animacji. W przeciwieństwie do formatów takich jak SWF, SVG czy GIF, ACE nie jest projektowany do obsługi grafiki ruchomej. SWF to format opracowany przez Adobe, który jest używany do tworzenia i wyświetlania animacji we Flashu. SVG to wektorowy format grafiki, który również wspiera animacje za pomocą CSS i JavaScript. GIF, z kolei, jest jednym z najpopularniejszych formatów do zapisu prostych animacji, dzięki możliwości przechowywania wielu klatek w jednym pliku. Zrozumienie różnic między tymi formatami jest istotne w kontekście tworzenia treści multimedialnych, a także w kontekście ich zastosowań w sieci. Wybór odpowiedniego formatu do animacji może mieć wpływ na wydajność ładowania strony, jakość wizualną oraz możliwości interakcji z użytkownikami.

Pytanie 30

Który z poniższych języków jest używany do stylizacji stron WWW?

A. HTML
B. CSS
C. Python
D. SQL

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
CSS, czyli Cascading Style Sheets, to język używany do opisywania wyglądu dokumentu HTML. Dzięki niemu możemy określić, jak mają wyglądać elementy na stronie, takie jak kolory, czcionki, odstępy między elementami, a także układ całej strony. CSS jest nieodłącznym elementem nowoczesnego tworzenia stron internetowych, ponieważ pozwala na oddzielenie treści od formy, co jest jedną z zasad dobrych praktyk w web development. Umożliwia tworzenie responsywnych projektów, które dobrze wyglądają na różnych urządzeniach, od komputerów po smartfony. Stylowanie za pomocą CSS pozwala na zdefiniowanie stylów globalnych, które mogą być zastosowane do wielu elementów na stronie, co znacznie ułatwia zarządzanie wyglądem witryny. Praktycznym zastosowaniem CSS jest na przykład zmiana koloru tekstu na stronie za pomocą prostej reguły, czy też tworzenie zaawansowanych animacji, które zwiększają interaktywność stron. CSS jest kluczowy w procesie tworzenia estetycznych i funkcjonalnych stron internetowych, co czyni go niezbędnym narzędziem dla każdego web developera.

Pytanie 31

Deklaracja z właściwością background-attachment: scroll sprawia, że

A. tło strony zostanie zamocowane, a tekst będzie się poruszał
B. grafika tła będzie widoczna w prawym górnym rogu strony
C. grafika tła będzie się powtarzać (kafelki)
D. tło strony będzie przesuwane razem z zawartością tekstową

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwość CSS 'background-attachment: scroll' oznacza, że tło elementu będzie przewijane w równym tempie z treścią na stronie. Kiedy użytkownik przegląda stronę i przewija ją w dół lub w górę, tło przesuwa się razem z zawartością, co tworzy wrażenie głębokości i dynamiki. Przykładem zastosowania tej właściwości może być strona internetowa z długim tekstem, gdzie tło, takie jak kolor lub obraz, jest częścią estetyki projektu, ale nie powinno być statyczne. Warto zauważyć, że można to osiągnąć, ustawiając 'background-attachment' na 'scroll', co jest najczęściej stosowanym ustawieniem. W standardach CSS3 'background-attachment' ma cztery możliwe wartości: 'scroll', 'fixed', 'local', oraz 'inherit'. Stosowanie 'scroll' jest najbardziej intuicyjne i wspiera responsywność, ponieważ zmienia się w zależności od interakcji użytkownika z zawartością. To podejście jest zgodne z praktykami projektowania stron internetowych, które kładą nacisk na użytkownika i interaktywność.

Pytanie 32

W języku CSS, sformatowanie dowolnego elementu języka HTML w ten sposób, że po najechaniu na niego kursorem zmienia on kolor czcionki, wymaga zastosowania pseudoklasy

A. :visited
B. :coursor
C. :hover
D. :active

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to pseudoklasa :hover. W CSS służy ona dokładnie do tego, o co chodzi w pytaniu: do zmiany wyglądu elementu w momencie, gdy użytkownik najedzie na niego kursorem myszy (albo innym wskaźnikiem). Mechanizm jest prosty: przeglądarka śledzi pozycję kursora i kiedy znajduje się on nad danym elementem, do selektora z :hover zostają zastosowane zdefiniowane tam style. Przykładowo, żeby po najechaniu zmienić kolor tekstu linku, wystarczy napisać: a:hover { color: red; } Można tak samo stylować dowolny element HTML, nie tylko <a>: button:hover { color: white; background-color: #007bff; cursor: pointer; } W nowoczesnych interfejsach :hover jest podstawą efektów „podświetlenia” przycisków, kart, menu rozwijanych itp. Z mojego doświadczenia warto pamiętać o kolejności pseudoklas dla linków: a:link, a:visited, a:hover, a:active – to jest klasyczna dobra praktyka (czasem zapisywana jako LVHA), żeby style się nie nadpisywały w dziwny sposób. Trzeba też mieć w głowie, że na urządzeniach mobilnych :hover działa inaczej lub wcale, bo tam nie ma typowego kursora. Dlatego sensowne jest, żeby najważniejsze informacje nie były dostępne tylko po najechaniu, a :hover traktować bardziej jako poprawę wygody i estetyki, a nie jedyne źródło funkcjonalności. Mimo to w klasycznym desktopowym webie :hover jest absolutnym standardem do reakcji na najechanie kursorem.

Pytanie 33

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

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

Brak odpowiedzi na to pytanie.

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

Pytanie 34

Jakie jest właściwe określenie stylu CSS dla przycisku typu submit z czarnym tłem, bez ramki oraz z marginesami wewnętrznymi równymi 5 px?

input[type=submit] {
    background-color: #000000;
    border: none;
    padding: 5px;
} A
input[type=submit] {
    background-color: #ffffff;
    border: none;
    padding: 5px;
} B
input=submit {
    background-color: #000000;
    border: none;
    margin: 5px;
} C
input=submit {
    background-color: #000000;
    border: 0px;
    margin: 5px;
} D
A. B
B. A
C. C
D. D

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź A jest na pewno właściwa, bo definiuje styl CSS dla przycisku input o typie submit. Ustawienie background-color na #000000 to kluczowa sprawa, bo w pytaniu wymagano czarnego tła. Dodatkowo użycie selektora input[type=submit] jest naprawdę dobrym pomysłem, bo precyzyjnie wskazuje ten konkretny element formularza. Warto też zauważyć, że border: none; usuwa obramowanie, co zgadza się z wymaganiami. Padding: 5px; dodaje trochę miejsca wewnątrz przycisku, więc tekst nie przylega do krawędzi. Stylowanie przycisków typu submit jest istotne w projektowaniu, bo wpływa na estetykę i funkcjonalność. Nie zapominaj, że CSS daje możliwość naprawdę fajnego dostosowywania wyglądu, co pozwala na stworzenie atrakcyjnych i łatwych w obsłudze elementów. Dobrze jest stosować selektory z wysoką specyficznością i unikać przesadnego używania !important, bo to może skomplikować sprawy związane z kaskadą stylów. Na przykład zmienne CSS mogą pomóc uporządkować kolory w większych projektach, co jest przydatne.

Pytanie 35

Wskaż kod CSS odpowiadający układowi bloków 2 - 5, zakładając, że są one zbudowane w oparciu o przedstawiony kod HTML.

BLOK 1
BLOK 2BLOK 3BLOK 4
BLOK 5
<div id="pierwszy">BLOK 1</div>
<div id="drugi">BLOK 2</div>
<div id="trzeci">BLOK 3</div>
<div id="czwarty">BLOK 4</div>
<div id="piaty">BLOK 5</div>

Kod 1.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  float: left;
  width: 30%;
}
#czwarty {
  float: right;
  width: 30%;
}
#piaty {
  clear: both;
  width: 30%;
}
Kod 2.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  float: left;
  width: 30%;
}
#czwarty {
  float: right;
  width: 30%;
}
#piaty {
  float: left;
  width: 30%;
}
Kod 3.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  float: left;
  width: 30%;
}
#czwarty {
  width: 30%;
}
#piaty {
  float: right;
  width: 30%;
}
Kod 4.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  width: 30%;
}
#czwarty {
  width: 30%;
}
#piaty {
  float: right;
  width: 30%;
}
A. Kod 3.
B. Kod 2.
C. Kod 4.
D. Kod 1.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Brawo, twoja odpowiedź jest poprawna. Wybrałeś Kod 2, co jest zgodne z układem bloków na diagramie. Przy analizie kodu CSS, musimy zwrócić uwagę na różne aspekty, takie jak pozycja, szerokość i kolejność bloków. W tym przypadku, blok o id 'drugi' jest umieszczony po lewej stronie i zajmuje 40% szerokości, co jest zgodne z diagramem. Bloki 'trzeci' i 'czwarty' są odpowiednio po lewej i prawej stronie z szerokością 30%, a blok 'piąty' jest umieszczony na dole i zajmuje 30% szerokości. To wszystko odpowiada układowi bloków na diagramie. Kiedy tworzysz strony internetowe, ważne jest, aby zrozumieć i umieć manipulować kodem CSS, aby uzyskać pożądany układ strony. Pamiętaj, że praktyka i doświadczenie są kluczowe do zrozumienia jak kod CSS wpływa na układ i stylizację elementów strony.

Pytanie 36

Znacznik <strong> tekst</strong> w HTML będzie ukazywany przez przeglądarkę w identyczny sposób, jak znacznik

A. <h1>tekst</h1>
B. <big>tekst</big>
C. <b>tekst</b>
D. <sub>tekst</sub>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <strong> w języku HTML jest używany do oznaczania tekstu, który ma być wyświetlany w sposób wyróżniony, co sugeruje jego większe znaczenie, natomiast znacznik <b> jest używany tylko do pogrubienia tekstu, bez dodatkowego kontekstu semantycznego. Oba znaczniki są wizualnie identyczne w większości przeglądarek, co powoduje, że można je stosować zamiennie w niektórych przypadkach. Jednakże, zgodnie z najnowszymi standardami HTML, zaleca się używanie <strong> dla tekstu, który ma większe znaczenie, ponieważ to pomaga w SEO i dostępności. Na przykład, tekst umieszczony w znaczniku <strong> może być lepiej interpretowany przez technologie wspomagające, takie jak czytniki ekranu, co czyni go bardziej dostępnym dla osób z niepełnosprawnościami. Przykład użycia: <strong>ważne informacje</strong> w odróżnieniu od <b>ważne informacje</b>, gdzie znaczenie semantyczne jest pominięte. Dlatego, mimo że wizualnie nie widać różnicy, semantyka HTML jest kluczowym aspektem, który wpływa na sposób, w jaki treść jest interpretowana i przetwarzana przez różnorodne systemy.

Pytanie 37

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. td, th { background-color: Pink; }
B. tr { background-color: Pink; }
C. tr:hover { background-color: Pink; }
D. tr:active { background-color: Pink; }

Brak odpowiedzi na to pytanie.

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

Pytanie 38

W CSS przypisano regułę: float: left; dla elementu blokowego. Jakie będzie jej zastosowanie?

A. układania bloków jeden pod drugim
B. wyrównania elementów tabeli do lewej strony
C. ustawienia bloku na lewo w stosunku do innych
D. wyrównania tekstu do lewej strony

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Reguła CSS 'float: left;' jest używana do ustawienia elementu blokowego po lewej stronie kontenera, co pozwala na swobodne rozmieszczanie innych elementów w otaczającym go obszarze. Elementy, które są ustawione jako 'float', nie zajmują miejsca w normalnym przepływie dokumentu, co oznacza, że inne elementy mogą 'przepływać' wokół nich. Przykładem zastosowania tej reguły może być układ strony internetowej, gdzie zdjęcia są umieszczone z lewej strony tekstu, co pozwala na estetyczne i funkcjonalne połączenie grafiki z treścią. Zgodnie z wytycznymi W3C, właściwości 'float' powinny być używane z rozwagą, aby uniknąć problemów z układaniem stron, na przykład należy pamiętać o zastosowaniu właściwości 'clear', aby uniknąć niechcianych efektów wizualnych. W praktyce, float jest często stosowany w układach siatki lub responsywnych, gdzie elastyczne i dynamiczne rozmieszczenie elementów jest kluczowe dla użyteczności i estetyki strony.

Pytanie 39

Które z formatowań nie jest wyrażone w języku CSS?

A. Fragment pliku strona.html:
<style>
body { background-color: yellow; }
</style>
B. Fragment pliku formatowanie.css:
body { background-color: yellow; }
C. Fragment pliku strona.html:
<body bgcolor="yellow">
D. Fragment pliku strona.html:
<body style="background-color: yellow;" >
A. B.
B. A.
C. D.
D. C.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje, prawidłowo wybrałeś odpowiedź C. To pytanie dotyczyło zrozumienia, które formatowania nie są wyrażone w języku CSS. W CSS wykorzystuje się różnego rodzaju selektory, aby określić elementy strony, do których mają być stosowane określone style. Fragmenty A i B przedstawiają formatowanie w języku CSS. Fragment A demonstruje styl wewnątrz dokumentu HTML, co jest jednym z trzech sposobów dodawania styli CSS do dokumentu HTML. Natomiast fragment B pokazuje styl z zewnętrznego pliku CSS, co jest zgodne ze standardami i uważane za najlepszą praktykę, ponieważ pozwala na utrzymanie oddzielenia struktury i prezentacji. Fragment D również wykorzystuje CSS, ale jest to tzw. "inline CSS", który jest stosowany bezpośrednio do elementu HTML. Ostatecznie, jedynie fragment C nie używa CSS. Zamiast tego, wykorzystuje przestarzały atrybut HTML "bgcolor" do określenia koloru tła, co obecnie jest uważane za złą praktykę. Pamiętaj, że zrozumienie różnicy pomiędzy HTML a CSS jest kluczowe w budowaniu poprawnie działających i dobrze zaprojektowanych stron internetowych.

Pytanie 40

Która z definicji CSS określa formatowanie nagłówka h1: tekst nadkreślony, z odstępami między wyrazami 10 px i czerwonym kolorem tekstu?

h1{
  text-decoration: overline;
  word-spacing: 10px;
  color: red;
}                       A.

h1{
  text-decoration: overline;
  letter-spacing: 10px;
  color: red;
}                       B.

h1{
  text-transform: none;
  line-height: 10px;
  color: rgb(255,0,0);
}                       C.

h1{
  text-decoration: underline;
  line-height: 10px;
  color: rgb(255,0,0);
}                       D.
A. D.
B. B.
C. C.
D. A.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Brawo, poprawnie wybrałeś odpowiedź A, która pokazuje prawidłową definicję CSS do formatowania nagłówka h1. 'text-decoration: overline;' jest poleceniem CSS służącym do nadkreślania tekstu. Jest to styl tekstu, który dodaje linie nad literami. 'word-spacing: 10px;' jest poleceniem CSS, które określa odstępy między wyrazami. Wartościem tego polecenia jest odległość, która jest używana do określenia przestrzeni między słowami i jest wyrażona w pikselach. 'color: red;' jest standardowym poleceniem CSS do kolorowania tekstu. Czerwony jest jednym z podstawowych kolorów, które można wykorzystać w CSS. W praktyce, te trzy polecenia CSS mogą być używane do personalizacji strony internetowej, poprawiając jej wygląd i czytelność. Dobrą praktyką jest eksperymentowanie z różnymi stylami CSS, aby znaleźć najlepszy sposób prezentacji zawartości.