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: 28 września 2025 21:16
Data zakończenia: 28 września 2025 21:16

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Która z zasad walidacji stron internetowych jest niepoprawna?

A. Znaczniki, poza tymi samozamykającymi się, funkcjonują aż do momentu ich zakończenia znakiem '/', np. <p>...</p>

B. W znacznikach nie zachodzi rozróżnienie pomiędzy dużymi a małymi literami, np. <p> i <P> są tym samym znacznikiem

C. Wyłączanie znaczników powinno następować w odwrotnej kolejności do ich włączania, np. <p>....<big>...</big></p>

D. Jeżeli w instrukcji stosuje się kilka atrybutów, ich kolejność powinna odpowiadać porządkom alfabetycznym, np. <img alt="...." src="...." />

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kolejność atrybutów w znacznikach HTML nie ma znaczenia, co oznacza, że ich uporządkowanie w porządku alfabetycznym jest błędnym podejściem. W praktyce oznacza to, że atrybuty takie jak 'alt', 'src', 'title' mogą być zdefiniowane w dowolnej kolejności, o ile są poprawnie sformułowane. Jednakże, ze względów na czytelność kodu, warto stosować jakąś konsekwentną metodę sortowania atrybutów. W przypadku znaczników obrazków, na przykład, popularne jest zaczynanie od 'alt', następnie 'src', a potem 'title'. Ważne jest również, aby atrybuty były zgodne z wytycznymi W3C oraz WCAG, co zapewnia dostępność treści dla wszystkich użytkowników, w tym osób z niepełnosprawnościami. Stosowanie poprawnych atrybutów i ich odpowiedniego umiejscowienia jest kluczowym elementem pisania semantycznego i zgodnego z standardami HTML, co wpływa na poprawne wyświetlanie strony w różnych przeglądarkach oraz na jej optymalizację SEO.

Pytanie 2

Który z podanych formatów pozwala na zapis zarówno dźwięku, jak i obrazu?

A. MP4

B. PNG

C. MP3

D. WAV

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format MP4, znany również jako MPEG-4 Part 14, jest jednym z najpopularniejszych formatów multimedialnych, który umożliwia jednoczesny zapis zarówno dźwięku, jak i obrazu. Dzięki zastosowaniu zaawansowanej kompresji, MP4 pozwala na przechowywanie wysokiej jakości materiałów w stosunkowo małych plikach, co czyni go idealnym do przesyłania i strumieniowania w Internecie. MP4 obsługuje wiele kodeków, takich jak H.264 dla wideo oraz AAC dla dźwięku, co pozwala na szeroką kompatybilność z różnymi urządzeniami, od smartfonów po odtwarzacze multimedialne. Format ten jest zgodny z wieloma standardami, co czyni go wszechstronnym wyborem dla twórców treści. Przykłady jego zastosowania obejmują filmy wideo na platformach streamingowych, klipy muzyczne i wideoklipy. Dzięki swoim zaletom, MP4 stał się de facto standardem w przemyśle multimedialnym, co w znacznym stopniu przyczyniło się do jego popularności oraz wszechstronności.

Pytanie 3

Wskaż styl CSS za pomocą którego został uzyskany przedstawiony efekt.

psy
koty
chomiki
świnki morskie
rybki

A. ul li:nth-child(odd) { background-color: DodgerBlue; }

B. ul li:hover { background-color: DodgerBlue; }

C. ul li:nth-child(even) { background-color: DodgerBlue; }

D. ul li:active { background-color: DodgerBlue; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Dokładnie tak, poprawna odpowiedź to 'ul li:nth-child(even) { background-color: DodgerBlue; }'. Użycie selektora :nth-child(even) pozwala na zastosowanie stylu CSS do każdego parzystego elementu listy, co można zaobserwować na załączonym obrazku - każdy drugi (parzysty) element ma niebieskie tło. Jest to praktyczne rozwiązanie stosowane m.in. w celu poprawy czytelności długich list danych, gdzie koloryzmowanie na przemian pozwala na łatwiejsze zlokalizowanie poszczególnych elementów. Pamiętaj, że CSS oferuje wiele innych pseudoklas pozwalających na zastosowanie różnych efektów w zależności od stanu lub położenia elementu na stronie. Przy wykorzystaniu pseudoklas CSS warto odwoływać się do standardów i dobrych praktyk branżowych, takich jak unikanie nadmiernego zagnieżdżania selektorów, co może utrudniać czytelność i utrzymanie kodu.

Pytanie 4

<img src="/rysunek.png" alt="pejzaż"> Zapisany został kod HTML, który wstawia obrazek na stronę. Jeśli rysunek.png nie zostanie znaleziony, przeglądarka

A. w miejscu grafiki zasygnalizuje błąd wyświetlania strony

B. w miejscu grafiki pokaże tekst "rysunek.png"

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

D. nie załaduje strony internetowej

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kiedy przeglądarka internetowa napotyka na kod HTML, który zawiera element graficzny, w takim przypadku, jeśli wskazany plik nie jest dostępny, następuje zachowanie określone przez atrybut 'alt'. W omawianym przykładzie, gdy przeglądarka nie może znaleźć pliku 'rysunek.png', wyświetli tekst alternatywny 'pejzaż'. Atrybut 'alt' jest niezwykle ważny z perspektywy dostępności oraz SEO, ponieważ pozwala na dostarczenie informacji o obrazie osobom, które nie mogą go zobaczyć, takim jak osoby niewidome korzystające z czytników ekranu. Z punktu widzenia standardów W3C, atrybut 'alt' jest zalecany dla każdego elementu <img>, aby poprawić użyteczność strony. W praktyce, dobrze skonstruowane opisy w atrybucie 'alt' mogą również wpłynąć pozytywnie na pozycjonowanie witryny w wyszukiwarkach, co czyni go kluczowym elementem podczas tworzenia treści na stronie internetowej. Z tego powodu umieszczanie informacyjnych i zrozumiałych opisów w tym atrybucie jest niezbędne nie tylko dla poprawy dostępności, ale także dla efektywnej optymalizacji SEO.

Pytanie 5

Zapis CSS postaci:

 ul {
    list-style-image: url('rys.gif');
}

sprawi, że na stronie internetowej

A. każdy z punktów listy będzie miał osobne tło pobrane z grafiki rys.gif

B. punktorem listy nienumerowanej będzie rys.gif

C. wyświetli się rysunek rys.gif jako tło listy nienumerowanej.

D. rys.gif będzie stanowił ramkę dla listy nienumerowanej.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje! Poprawnie zidentyfikowałeś, że w podanym kodzie CSS, obrazek 'rys.gif' będzie służył jako punktor listy nienumerowanej. Według standardów CSS, właściwość list-style-image jest używana do określenia obrazka, który będzie używany jako punktor w liście nienumerowanej. Zasada ta jest bardzo przydatna, kiedy chcemy stworzyć niestandardowe punktory listy, które lepiej pasują do designu naszej strony. Możemy użyć dowolnego obrazka, który jest dostępny online lub zasobu z naszej lokalnej przestrzeni roboczej. Pamiętaj jednak, że obrazek powinien być mały i czytelny. W tym konkretnym przypadku, obrazek 'rys.gif' zostanie ustawiony jako punktor dla każdego elementu listy <li> wewnątrz listy nienumerowanej <ul>. Używając tej techniki, możemy stworzyć atrakcyjniejsze i bardziej interaktywne listy na naszej stronie internetowej.

Pytanie 6

Wskaż poprawną definicję stylu CSS dla przycisku typu submit o właściwościach: czarny kolor tła, brak obramowania, marginesy wewnętrzne 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. D.

D. C.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Dobrze! Wybrałeś prawidłową odpowiedź. Odpowiedź A jest poprawna, ponieważ to styl CSS dla przycisku typu submit spełnia wszystkie podane wymagania. Wygląda to mniej więcej tak: 'input[type='submit'] { background-color: black; border: none; padding: 5px; }'. 'input[type='submit']' to selektor, który wskazuje elementy wejściowe o typie 'submit'. Następnie, wewnątrz nawiasów klamrowych, mamy trzy deklaracje. 'background-color: black;' określa, że przycisk ma czarne tło. 'border: none;' usuwa wszelkie obramowanie. 'padding: 5px;' ustawia marginesy wewnętrzne na 5 pikseli. Pisanie czystego i efektywnego kodu CSS jest kluczową umiejętnością dla każdego doświadczonego dewelopera front-endu. Dobrze napisane style CSS mogą znacznie poprawić wydajność strony internetowej i ułatwić jej utrzymanie.

Pytanie 7

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

A. rys. C

B. rys. B

C. rys. A

D. rys. D

Brak odpowiedzi na to pytanie.

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

Pytanie 8

Aby ustawić tło na stronie www należy użyć polecenia

A. <body background=""></body>

B. <background=""></background>

C. <bgcolor=""></bgcolor>

D. <body bgcolor=""></body>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Aby ustawić tło na stronie internetowej, należy użyć atrybutu bgcolor w znaczniku <body>. Jest to starożytna metoda definiowania koloru tła, która jest zgodna z wcześniejszymi standardami HTML. Atrybut bgcolor przyjmuje wartość w postaci koloru w formie nazwy, hexadecymalnej lub RGB. Na przykład, <body bgcolor='#FF5733'></body> ustawi pomarańczowe tło. Pomimo że ta metoda działa, w dzisiejszych czasach zaleca się korzystanie z CSS, co umożliwia bardziej zaawansowane i elastyczne style. Zamiast polegać na atrybucie HTML, można zastosować regułę CSS: body { background-color: #FF5733; }. Użycie CSS nie tylko poprawia organizację kodu, ale także zwiększa dostępność i responsywność strony. Dlatego, chociaż atrybut bgcolor jest poprawny, warto skupić się na nowoczesnych metodach stylizacji, które są zgodne z aktualnymi standardami W3C i są bardziej przyszłościowe.

Pytanie 9

Walidacja strony internetowej polega na

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

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

C. umieszczaniu treści w sieci

D. reklamowaniu strony

Brak odpowiedzi na to pytanie.

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

Pytanie 10

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

A. font-style

B. font-size

C. font-family

D. font-variant

Brak odpowiedzi na to pytanie.

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

Wskaż blok sformatowany poniższym stylem CSS:

background: linear-gradient(to right, LightBlue, DarkBlue);

A. Blok 3.

B. Blok 2.

C. Blok 1.

D. Blok 4.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje! Wybrałeś właściwą odpowiedź - Blok 2. W stylach CSS, zapis 'background: linear-gradient(to right, LightBlue, DarkBlue);' określa gradient liniowy, który przechodzi od koloru jasnoniebieskiego (LightBlue) do ciemnoniebieskiego (DarkBlue) poziomo, od lewej do prawej strony. To oznacza, że kolor tła danego elementu stopniowo zmienia się od jednego koloru do drugiego w określonym kierunku. Stosowanie gradientów jest popularną techniką w web designie, ponieważ pozwala na tworzenie płynnych przejść kolorów i dodaje estetyki stronie. Gradienty mogą być zastosowane do różnych elementów na stronie, takich jak tło, tekst, ramki itp. Warto zaznaczyć, że gradienty CSS mogą być nie tylko liniowe, ale również radialne. W tym przypadku, tylko Blok 2. jest sformatowany zgodnie z podanym stylem CSS, ponieważ zawiera gradient poziomo przechodzący od jasnoniebieskiego do ciemnoniebieskiego.

Pytanie 12

Na ilustracji przedstawiono kompozycję bloków strony www. Który z elementów formatowania strony odpowiada temu układowi? (Dla uproszczenia pominięto właściwości dotyczące koloru tła, wysokości oraz czcionki)

A. Odpowiedź 3: C

B. Odpowiedź 1: A

C. Odpowiedź 2: B

D. Odpowiedź 4: D

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź B jest naprawdę na czasie! Widzisz, użyto tutaj techniki pływającego układu z CSS, czyli float i clear. Pierwszy blok pływa w lewo, ma 30% szerokości, dzięki czemu obok niego mogą stać drugi i trzeci blok, które też pływają w lewo i zajmują 70%. To pozwala na ułożenie elementów w jednej linii, o ile kontener ma wystarczająco miejsca. W sumie, float to klasyka przy układach wielokolumnowych, chociaż obecnie sporo osób korzysta z Flexboxa lub Grid Layout. Zauważ, że blok czwarty ma clear:both, więc zacznie się poniżej wcześniejszych elementów pływających. To ważne, bo dzięki temu unikamy problemów z nałożeniem się treści. Zachowanie porządku w układzie jest kluczowe, szczególnie w responsywnym web designie. Tego typu układy są całkiem popularne na stronach z wieloma kolumnami, gdzie elastyczność szerokości ma duże znaczenie.

Pytanie 13

W języku HTML, aby uzyskać efekt taki jak na przykładzie, należy zastosować konstrukcję

Duży tekst zwykły tekst

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

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W języku HTML, użycie znacznika <big> jest właściwym sposobem na zwiększenie rozmiaru tekstu, co w efekcie pozwala na wyróżnienie go w kontekście pozostałej treści. Znacznik ten jest jednak przestarzały i niezalecany w nowoczesnych praktykach, ponieważ CSS oferuje bardziej elastyczne i zaawansowane metody stylizacji. Przykładowo, zamiast stosować <big>, można wykorzystać stylizację CSS, aby uzyskać podobny efekt, co zwiększa kontrolę nad wyglądem elementów. Ponadto, zastosowanie znacznika <p> jako kontenera dla tekstu zapewnia semantyczną strukturę dokumentu, co jest zgodne z wytycznymi W3C i poprawia dostępność. Przykładowo, użycie CSS może wyglądać tak: <p style='font-size: 1.5em;'>Duży tekst</p>zwykły tekst, co jest bardziej zalecane dla zachowania zgodności ze standardami. Warto pamiętać, że unikanie przestarzałych znaczników i stosowanie CSS zwiększa elastyczność i estetykę projektów HTML.

Pytanie 14

Poniżej znajduje się fragment kodu w języku HTML. Przedstawia on definicję listy:

A. D

B. C

C. A

D. B

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź C jest poprawna ponieważ przedstawiony fragment kodu HTML definiuje uporządkowaną listę zagnieżdżoną W tym kodzie zauważamy że główna lista jest uporządkowana oznaczona jako ol co definiuje elementy listy jako numerowane po kolei Elementy li w tej liście to punkty jeden dwa i trzy Na szczególną uwagę zasługuje fakt że drugi element li zawiera zagnieżdżoną nieuporządkowaną listę ul co jest zgodne ze standardami HTML dotyczącymi zagnieżdżania list Zgodnie z dobrymi praktykami zagnieżdżanie list w HTML powinno być stosowane w sposób przejrzysty i logiczny co ułatwia czytelność i zrozumienie kodu oraz jego późniejsze modyfikacje Praktycznym zastosowaniem takich struktur jest organizowanie treści w dokumentach internetowych w sposób hierarchiczny co ułatwia zarówno użytkownikom przeglądanie zawartości jak i programistom zarządzanie kodem Zrozumienie zagnieżdżania list jest kluczowe dla efektywnego tworzenia stron internetowych które są nie tylko estetyczne ale także funkcjonalne i dostępne dla szerokiej grupy odbiorców

Pytanie 15

Który z przedstawionych obrazów został przetworzony przy użyciu podanego stylu CSS?

A. Rys. C

B. Rys. A

C. Rys. D

D. Rys. B

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybór Rys. A jako poprawnej odpowiedzi jest uzasadniony zastosowaniem właściwości CSS, które są użyte w stylu. Styl CSS określa padding na 5 pikseli, co oznacza, że wokół obrazu powinna być przestrzeń wynosząca dokładnie 5 pikseli. Właściwość border ustawia obramowanie na 1 piksel, w kolorze szarym i o stylu solid, co oznacza ciągłą linię otaczającą obraz. Z kolei border-radius o wartości 10 pikseli zaokrągla rogi obramowania, co nadaje całości bardziej zaokrąglony kształt. Wszystkie te cechy są widoczne na obrazie Rys. A. W praktyce stosowanie właściwości takich jak border-radius jest często używane w projektach webowych, aby uzyskać bardziej estetyczne i nowoczesne efekty wizualne. Zaokrąglone krawędzie są estetycznie przyjemniejsze dla użytkownika i mogą poprawić czytelność oraz odbiór wizualny strony. Znajomość tych właściwości CSS jest niezbędna dla każdego front-end developera, który dąży do tworzenia nowoczesnych i funkcjonalnych interfejsów użytkownika. Praktyczne zastosowanie tego stylu może być widoczne w projektach stron internetowych, aplikacjach sieciowych oraz w tworzeniu elementów UI, które zachowują spójność wizualną z resztą projektu.

Pytanie 16

Podczas walidacji witryn internetowych nie analizuje się

A. działania hiperlinków

B. źródła pochodzenia narzędzi edycyjnych

C. błędów w składni kodu

D. zgodności z różnymi przeglądarkami

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W procesie walidacji stron internetowych, źródło pochodzenia narzędzi edytorskich nie jest przedmiotem analizy, ponieważ walidacja koncentruje się na technicznych aspektach kodu HTML, CSS i JavaScript, które wpływają na funkcjonalność oraz dostępność strony. Główne obszary walidacji obejmują zgodność z przeglądarkami, co oznacza, że strona powinna działać poprawnie w różnych środowiskach przeglądarkowych. Działania linków są również monitorowane, aby zapewnić, że wszystkie odnośniki kierują do właściwych lokalizacji oraz nie prowadzą do błędów 404. Błędy składni kodu są kluczowe, ponieważ mogą znacząco wpłynąć na sposób, w jaki strona jest renderowana przez przeglądarki. Przykładowo, walidatory HTML, takie jak W3C Validator, pomagają identyfikować błędy i ostrzegają o problemach, które mogą wpłynąć na dostępność i SEO strony. Dobre praktyki wymuszają, aby każda strona internetowa była nie tylko estetyczna, ale przede wszystkim funkcjonalna i zgodna z obowiązującymi standardami, co przekłada się na lepsze doświadczenia użytkowników.

Pytanie 17

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

A. poly, square, circle

B. rect, poly, circle

C. rect, square, circle

D. rect, triangle, circle

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut shape znacznika area w języku HTML jest wykorzystywany do określenia kształtu obszaru, który jest aktywny w mapie obrazów. Przyjmuje on wartości rect (prostokąt), poly (wielokąt) oraz circle (okrąg). Każda z tych wartości definiuje sposób, w jaki kształt obszaru jest interpretowany przez przeglądarkę. Na przykład, wartość 'rect' wymaga czterech parametrów, które określają lewy górny i prawy dolny róg prostokąta. W przypadku 'circle', musimy podać współrzędne środka oraz promień okręgu, a 'poly' wymaga podania współrzędnych wszystkich punktów wierzchołków wielokąta. Praktyczne zastosowanie atrybutu shape pozwala na tworzenie interaktywnych map obrazów, gdzie użytkownik może klikać w różne obszary, co zwiększa dostępność i użyteczność strony. Warto pamiętać, że korzystanie z map obrazów i odpowiedniego atrybutu shape powinno być zgodne z aktualnymi standardami W3C, co wpływa na poprawność i wydajność strony internetowej.

Pytanie 18

W HTML znacznik <i> powoduje uzyskanie takiego samego efektu wizualnego jak znacznik

A. <u>

B. <em>

C. <strong>

D. <pre>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <em> w HTML służy do podkreślenia wyrazu w sposób, który jest semantyczny oraz wizualny. Oznacza on, że dany tekst ma szczególne znaczenie, co jest zgodne z dobrymi praktykami w tworzeniu dostępnych stron internetowych. Użycie <em> jest preferowane w sytuacjach, gdy chcemy wyróżnić określone słowa lub frazy, co jest istotne dla zrozumienia treści. Przykładem może być zdanie: "Wartość ta jest <em>szczególnie</em> istotna w kontekście analizy". W takim przypadku tekst "szczególnie" będzie wyróżniony nie tylko dla użytkownika, ale również dla wyszukiwarek oraz technologii asystujących, co przyczynia się do lepszej dostępności strony. W przeciwieństwie do znaczników, które mają głównie funkcję wizualną, takich jak <i>, <em> przynosi dodatkowe znaczenie semantyczne, co czyni go bardziej odpowiednim w kontekście tworzenia dokumentów HTML zgodnych z standardami W3C.

Pytanie 19

W jakim standardzie języka hipertekstowego wprowadzono do składni znaczniki sekcji <footer>, <header>, <nav>?

A. XHTML1.0

B. HTML5

C. XHTML 2.0

D. HTML4

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Tak, znaczników <footer>, <header> i <nav> zaczęto używać w HTML5, który zadebiutował w październiku 2014 roku. To jest ciekawe, bo HTML5 wprowadził sporo nowych semantycznych elementów, które pomagają w lepszej organizacji dokumentów HTML. Dzięki nim, przeglądarki i roboty wyszukiwarek mogą lepiej zrozumieć strukturę stron. Na przykład, <header> to nagłówek strony lub sekcji, <nav> tworzy menu nawigacyjne, a <footer> to stopka. Myślę, że to super sprawa, bo poprawia dostępność strony i jej SEO, bo tak naprawdę pomaga wyszukiwarkom w lepszym indeksowaniu treści, co może prowadzić do lepszych wyników w wyszukiwarkach. Dodatkowo, HTML5 ma też inne ciekawe nowinki, jak wsparcie dla multimediów, lokalne przechowywanie danych, a także lepszą kompatybilność z aplikacjami mobilnymi, więc zdecydowanie warto go wykorzystywać do budowy stron internetowych.

Pytanie 20

W CSS zapisany w ten sposób:

p { background-image: url("rysunek.png"); }

spowoduje, że rysunek.png stanie się

A. tłem całej witryny

B. widoczny obok każdego akapitu

C. tłem każdego akapitu

D. wyświetlony, jeśli w kodzie użyty zostanie znacznik img

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis CSS p { background-image: url("rysunek.png"); } oznacza, że dla każdego elementu akapitowego <p> w dokumencie zostanie ustawione tło w postaci grafiki o nazwie rysunek.png. Ta reguła selektora p dotyczy wyłącznie znaczników akapitu, więc nie wpłynie na inne elementy strony, takie jak body czy img. Tak się to stosuje w praktyce: projektując na przykład bloga, możesz dodać delikatny deseń lub obrazek w tle akapitu, żeby całość wyglądała ciekawiej albo podkreślała styl witryny. Co ciekawe, background-image w CSS pozwala na olbrzymią elastyczność — możesz wykorzystać obrazy, gradienty czy nawet SVG jako tło. Standardy CSS jasno to definiują: background-image działa zawsze na tym elemencie, dla którego zadeklarowano regułę w selektorze. Warto pamiętać, że tło nie przesłoni tekstu w akapicie, tylko się pod nim wyświetli, więc czytelność jest zachowana. Z własnego doświadczenia uważam, że umiejętność stosowania background-image do konkretnych elementów to jedno z podstawowych narzędzi webdevelopera — pozwala przygotować naprawdę estetyczne i przejrzyste layouty. Dobrym nawykiem jest także testowanie widoczności tła na różnych urządzeniach, bo rozdzielczości i skalowanie potrafią zaskoczyć. Dla porządku, jeśli podasz background-image bez żadnych dodatkowych parametrów (jak powtarzanie czy pozycjonowanie), obrazek domyślnie będzie się powtarzał w poziomie i pionie, aż pokryje cały akapit.

Pytanie 21

Aby obraz dodany za pomocą kodu HTML był zrozumiały dla programów wspierających osoby niewidome, konieczne jest zdefiniowanie atrybutu

A. sizes

B. border

C. src

D. alt

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut 'alt' w znaczniku <img> jest kluczowy dla dostępności treści internetowych. Jego główną funkcją jest dostarczenie alternatywnego opisu obrazu, który jest odczytywany przez programy wspierające osoby niewidome i niedowidzące, takie jak czytniki ekranu. Dzięki atrybutowi 'alt', użytkownicy, którzy nie mogą zobaczyć obrazu, są w stanie zrozumieć, co on przedstawia. Na przykład, jeśli obrazek przedstawia psa bawiącego się w parku, odpowiednia treść atrybutu 'alt' mogłaby brzmieć: 'Pies bawiący się w parku'. To nie tylko zwiększa dostępność strony, ale również poprawia doświadczenia użytkowników. Zgodnie z wytycznymi WCAG (Web Content Accessibility Guidelines), dostarczenie tekstu alternatywnego dla wszystkich obrazów jest niezbędne do zapewnienia pełnej dostępności treści. Przykład zastosowania: W przypadku strony e-commerce, gdzie obrazy produktów są kluczowe, odpowiednio zdefiniowany atrybut 'alt' pozwala osobom z ograniczeniami wzrokowymi na pełne zrozumienie oferty, co może wpłynąć na ich decyzje zakupowe.

Pytanie 22

Jaki styl CSS umożliwi ustawienie tekstu do prawej strony?

A. <p style="font: right">tekst</p>

B. <p style="text-align: right">tekst</p>

C. <p style="position: right">tekst</p>

D. <p style="align: right">tekst</p>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwe wyrównanie tekstu do prawej strony w CSS można osiągnąć za pomocą właściwości 'text-align'. Używając deklaracji 'text-align: right', umożliwiamy umiejscowienie zawartości elementu blokowego, takiego jak <p>, w taki sposób, aby tekst był wyrównany do prawej krawędzi kontenera. Przykładowo, stosując <p style='text-align: right'>Tekst wyrównany do prawej</p>, uzyskujemy efekt, w którym cały tekst w obrębie akapitu zostaje przesunięty do prawej strony. Warto również zaznaczyć, że 'text-align' jest zgodne z W3C CSS Specifications, co oznacza, że jest standardową właściwością CSS uznawaną przez większość przeglądarek. W praktyce, stosowanie 'text-align' jest nie tylko ograniczone do akapitów, ale może być używane także w innych elementach, takich jak nagłówki, divy i inne bloki, co czyni go bardzo wszechstronnym narzędziem w stylizacji stron internetowych. Dodatkowo, właściwość ta jest fundamentalna w kontekście responsywnego projektowania stron, gdzie dopasowanie tekstu do różnych układów jest kluczowe dla odbioru treści.

Pytanie 23

Które z pól edycyjnych zostało wystylizowane według poniższego wzoru, zakładając, że pozostałe atrybuty pola mają wartości domyślne, a użytkownik wpisał imię Krzysztof w przeglądarce?

input {
    padding: 10px;
    background-color: Teal;
    color: white;
    border: none;
    border-radius: 7px;
}

A. Pole 2

B. Pole 3

C. Pole 4

D. Pole 1

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Pole 2 zostało sformatowane zgodnie z podanym stylem CSS Ponieważ właściwość padding została ustawiona na 10px pole tekstowe ma wewnętrzny odstęp wokół zawartości co sprawia że tekst nie dotyka bezpośrednio krawędzi pola Kolor tła ustawiony na Teal odróżnia to pole od innych które mogą mieć domyślne kolory tła Biały kolor tekstu zapewniony przez właściwość color sprawia że tekst jest czytelny na ciemnym tle Brak obramowania dzięki border none powoduje że pole nie ma widocznej linii wokół siebie co nadaje mu czysty wygląd Zaokrąglenie krawędzi ustawione na 7px border-radius daje bardziej nowoczesny wygląd a także ułatwia integrację z różnymi projektami interfejsu użytkownika Takie podejście do stylizacji elementów formularzy jest zgodne z nowoczesnymi trendami projektowania stron internetowych gdzie używane są łagodne zaokrąglenia oraz odpowiednio dobrane kontrasty kolorystyczne W praktyce takie style są nie tylko estetyczne ale także poprawiają użyteczność interfejsu poprzez zwiększenie czytelności i intuicyjności obsługi formularzy Warto również zauważyć że zastosowanie CSS do formatowania elementów pozwala na zachowanie spójności wyglądu na różnych stronach oraz łatwą modyfikację w przyszłości

Pytanie 24

Jaki atrybut powinien zostać umieszczony w miejscu trzech kropek w znaczniku HTML5 <blockquote>, aby wskazać źródło cytatu?

A. src

B. href

C. alt

D. cite

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 'cite' jest prawidłowa, ponieważ atrybut ten służy do wskazania źródła cytatu w znaczniku <blockquote>. Atrybut cite pozwala dostarczyć dodatkowych informacji o autorze lub miejscu pochodzenia cytatu, co jest zgodne z zasadami semantycznego HTML5. Użycie atrybutu cite jest ważne dla poprawnej interpretacji treści przez przeglądarki oraz narzędzia przetwarzające dane, takie jak wyszukiwarki internetowe. Przykład zastosowania: <blockquote cite="https://pl.wikipedia.org">...cytat...</blockquote>. Dzięki temu można łatwo zidentyfikować źródło, co zwiększa wiarygodność prezentowanych informacji. W praktyce, dokumenty HTML powinny być tak przygotowane, aby były zarówno przyjazne dla użytkowników, jak i zgodne z wytycznymi standardów W3C, co ma kluczowe znaczenie w kontekście dostępności i SEO.

Pytanie 25

W języku HTML, aby nadać dokumentowi tytuł "Moja strona", który będzie wyświetlany na zakładce przeglądarki internetowej, należy posłużyć się zapisem

A. <title>Moja strona</title>

B. <meta name="title" content="Moja strona" />

C. <meta title="Moja strona">

D. <head>Moja strona</head>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Element <title> jest absolutnie podstawą, jeśli chodzi o definiowanie tytułu strony w HTML. Umieszcza się go zawsze wewnątrz sekcji <head>, a jego zawartość jest tym, co wyświetla się na karcie przeglądarki. Moim zdaniem to jedna z tych rzeczy, które – choć wydają się drobiazgiem – mają duży wpływ na użyteczność i pozycjonowanie strony. Jeśli budujesz własną stronę lub pracujesz przy większym projekcie, warto pamiętać, żeby tytuł był unikalny i możliwie krótki, bo to właśnie on pojawia się również w wynikach wyszukiwania Google. Organizacje takie jak W3C wyraźnie podkreślają, że <title> jest wymagany w każdym dokumencie HTML5. Często też spotykałem się z przypadkami, gdzie ktoś zapominał o tym tagu i potem dziwił się, że przeglądarka pokazuje „Untitled” albo po prostu adres URL na pasku zakładki. Z praktyki – zawsze warto od razu na początku pracy nad stroną ustawić sensowny tytuł, bo potem łatwo o tym zapomnieć. A jak już masz kilka kart z otwartymi projektami, czy klient patrzy na podgląd w wyszukiwarce – profesjonalnie przygotowany tytuł robi robotę. Pamiętaj też, że <title> nie jest miejscem na wrzucanie dodatkowego kodu HTML, tylko sam tekst. Prosta sprawa, a oszczędza potem sporo nerwów.

Pytanie 26

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

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

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź, która została wskazana, to <p class= "stl"><style>.a{color:#F00}</style>tekst</p>. W kontekście HTML5, element <style> jest przeznaczony do umieszczania w nagłówkach dokumentu (<head>), a nie wewnątrz elementów blokowych, takich jak <p>. Umieszczanie tagu <style> w tagu <p> narusza zasady dotyczące struktury dokumentu HTML. Walidatory HTML5, które sprawdzają zgodność kodu z obowiązującymi standardami W3C, uznają takie umieszczenie za błąd, ponieważ stylizacja powinna być oddzielona od treści. Zgodnie z najlepszymi praktykami, CSS powinno być zaimplementowane w plikach zewnętrznych lub sekcjach <head>, co ułatwia utrzymanie i modyfikację kodu. Przykładem poprawnej struktury może być: <head><style>.a{color:#F00}</style></head><body><p class="stl">tekst</p></body>. To zapewnia przejrzystość i zgodność z zasadami HTML5, co jest kluczowe dla SEO oraz dostępności strony.

Pytanie 27

W języku CSS określono formatowanie znacznika h1 według poniższego wzoru. Zakładając, że do znacznika h1 nie dodano żadnego innego formatowania, wskaż sposób formatowania tego znacznika.

h1 {
    font-style: oblique;
    font-variant: small-caps;
    text-align: right;
}

A. C.

B. B.

C. A.

D. D.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje, Twoja odpowiedź jest prawidłowa. W CSS określono, że znacznik h1 ma być wyświetlany z pochyłą czcionką, co jest osiągane za pomocą właściwości 'font-style: oblique'. Dodatkowo, małe wielkie litery są realizowane przez 'font-variant: small-caps', które zmieniają wszystkie małe litery na wielkie litery, ale z zachowaniem mniejszego rozmiaru. Wreszcie, do wyrównania tekstu do prawej strony służy 'text-align: right'. Wszystko to razem składa się na formatowanie znacznika h1, które zostało zdefiniowane w CSS. To jest dobra praktyka, aby zrozumieć i zapamiętać różne właściwości CSS, ponieważ pozwalają one na bardzo szczegółowe kontrolowanie wyglądu i układu elementów na stronie. Pamiętaj, że CSS jest niezwykle potężnym narzędziem w rękach doświadczonego programisty front-end i pozwala na tworzenie estetycznych, responsywnych i przyjaznych dla użytkownika interfejsów.

Pytanie 28

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

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

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

B. div:menu { color: green; }

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź div.menu { background-color: green; } jest prawidłowa, ponieważ odnosi się do selektora klasy w języku CSS. W HTML, atrybut class jest używany do przypisywania elementom jednej lub wielu klas, które mogą być następnie stylizowane w CSS. Selektor klasy jest definiowany przez poprzedzenie nazwy klasy kropką, co pozwala na stylizację wszystkich elementów używających tej klasy. W przypadku selektora div.menu, stylizacja dotyczy wszystkich elementów div z klasą menu. Użycie właściwości background-color z wartością green ustawia zielone tło dla zdefiniowanego elementu. Taki sposób definiowania stylów jest zgodny z dobrymi praktykami, które zalecają użycie klas do stylizacji wielokrotnego użytku w celu zwiększenia elastyczności i czytelności kodu. Ponadto używanie nazw klas i odpowiednich selektorów pozwala na łatwe zarządzanie stylistyką większych projektów, co jest kluczowe w rozwoju współczesnych stron internetowych. Warto zauważyć, że stosowanie klas zamiast identyfikatorów jest bardziej elastyczne, ponieważ jedna klasa może być przypisana do wielu elementów, podczas gdy identyfikator musi być unikalny w całym dokumencie.

Pytanie 29

Zapis w CSS `h2 {background-color: green;}` spowoduje, że kolor zielony będzie dotyczył

A. tła całej witryny

B. czcionki nagłówków drugiego poziomu

C. tła tekstu nagłówka drugiego poziomu

D. czcionki wszystkich nagłówków na stronie

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis CSS 'h2 {background-color: green;}' ustawia styl dla nagłówków drugiego stopnia. Dzięki właściwości 'background-color' tło nagłówka zrobi się zielone, co oznacza, że obszar za tekstem tego nagłówka będzie miał kolor zielony. Ważne, żeby pamiętać, że to działa tylko na tło samego nagłówka, a nie na całą stronę. Na przykład, jeśli w elemencie h2 jest tekst 'Witamy na naszej stronie', to tło tego nagłówka dostaje zielony kolor. To podejście jest zgodne z CSS, które pozwala na precyzyjne stylizowanie różnych elementów w dokumencie. Można też używać różnych trybów kolorów jak RGB, HEX czy HSL, co daje jeszcze większe możliwości w projektowaniu.

Pytanie 30

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

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

B. zmniejszyć jego rozdzielczość

C. zapisać w formacie BMP

D. dodać kanał alfa

Brak odpowiedzi na to pytanie.

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

Pytanie 31

Podczas przygotowywania grafiki na stronę internetową konieczne jest wycięcie jedynie określonego fragmentu. Jak nazywa się ta operacja?

A. łączenie warstw.

B. lustrzane odbicie obrazu.

C. kadrowanie.

D. zmiana rozmiaru.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kadrowanie to proces polegający na wycinaniu fragmentu obrazu w celu skupienia uwagi na określonym elemencie lub poprawienia kompozycji. W kontekście grafiki internetowej, kadrowanie jest kluczowe, aby dostosować zdjęcia do wymagań wizualnych strony, zachowując jednocześnie wysoką jakość obrazu. Przykładowo, jeśli tworzymy stronę dla restauracji, możemy wyciąć fragment zdjęcia dania, aby lepiej zaprezentować jego szczegóły. Dobre praktyki w kadrowaniu obejmują stosowanie zasady trzech, która polega na umiejscowieniu kluczowych elementów obrazu w punktach przecięcia linii podziału. Warto również pamiętać o rozdzielczości i proporcjach, aby uniknąć rozmycia lub zniekształcenia obrazu. Kadrowanie jest często używane w różnych formatach wizualnych, takich jak posty w mediach społecznościowych, banery reklamowe czy galerie zdjęć. W ten sposób, odpowiednie kadrowanie przyczynia się do lepszej prezentacji treści oraz poprawia estetykę i przejrzystość strony internetowej.

Pytanie 32

Który z elementów HTML ma charakter bloku?

A. span

B. strong

C. p

D. img

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik HTML <p> to absolutna podstawa, jeśli chodzi o tworzenie akapitów w dokumentach. Elementy blokowe, do których <p> się zalicza, zajmują całą szerokość, więc zawsze tworzą nową linię przed i po sobie. Używanie znacznika <p> jest mega ważne, bo to nie tylko poprawia czytelność tekstu, ale i semantykę strony. Na przykład, jak myślisz o SEO, to dobrze zorganizowana struktura dokumentu naprawdę pomaga wyszukiwarkom zrozumieć, o co chodzi na stronie. Zresztą, <p> świetnie współpracuje z CSS, dzięki czemu możesz łatwo ustawić marginesy czy odstępy. W praktyce każdy akapit powinien być zawarty w tym znaczniku, bo dzięki temu oddzielasz go od innych elementów, jak nagłówki czy listy. Pamiętaj jednak, żeby nie zagnieżdżać znacznika <p> w innych blokowych znacznikach, bo to sprzeczne z zasadami HTML5. Jak zrozumiesz i wykorzystasz elementy blokowe, to stworzysz naprawdę dobrze zorganizowaną i semantyczną stronę.

Pytanie 33

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

 h1 i {color: red;}

Kolorem czerwonym zostanie zapisany

A. cały tekst nagłówka pierwszego stopnia oraz cały tekst pochylony, niezależnie od tego, w którym miejscu strony się znajduje.

B. tylko tekst pochylony we wszystkich poziomach nagłówków.

C. tylko tekst pochylony nagłówka pierwszego stopnia.

D. cały tekst nagłówka pierwszego stopnia oraz pochylony tekst akapitu.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłową odpowiedzią jest, że kolorem czerwonym zostanie zapisany tylko tekst pochylony nagłówka pierwszego stopnia. W CSS, gdy mówimy o selektorach potomków, odnosimy się do elementów, które są bezpośrednio lub niebezpośrednio umieszczone wewnątrz innego elementu. W przedstawionym kodzie CSS: h1 i {color: red;}, selektor pochylonego tekstu (<i>) wewnątrz nagłówka pierwszego stopnia (<h1>) jest selektorem potomka. Oznacza to, że reguła dotyczy tylko tych elementów <i> , które są umieszczone wewnątrz elementu <h1>. Właściwość 'color: red;' zmienia kolor tych elementów na czerwony. Istotne jest zrozumienie, że ta reguła nie wpływa na inne elementy strony, takie jak zwykły tekst w nagłówku h1 czy tekst pochylony w innych miejscach dokumentu. W praktyce, nauka zrozumienia i stosowania selektorów potomków w CSS jest kluczowa dla skutecznego i precyzyjnego formatowania elementów na stronie.

Pytanie 34

Jaką szerokość zaplanowano dla treści strony, bazując na podanej definicji CSS?

body {
  border: 2px;
  height: 600px;
  width: 560px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

A. 640 px

B. 2 px

C. 600 px

D. 560 px

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje, udzieliłeś poprawnej odpowiedzi. W definicji CSS dla elementu body, szerokość ustawiono na 560 px. Właściwość box-sizing: border-box, gwarantuje, że szerokość ta obejmuje również obramowanie. Dlatego, w praktyce, szerokość strony pozostawiona na treść wynosi 560 px. Wartości te są bardzo ważne przy projektowaniu stron internetowych, szczególnie przy tworzeniu responsywnych layoutów, gdzie musimy precyzyjnie kontrolować szerokość i rozmieszczenie elementów. Pamiętaj, że wykorzystanie odpowiednich jednostek i precyzyjne definiowanie wymiarów jest kluczowe dla zachowania poprawnej struktury strony. Dobrym nawykiem jest również stosowanie właściwości box-sizing: border-box, która ułatwia kontrolę nad rozmiarem elementów, zwłaszcza przy komplikowanych układach strony.

Pytanie 35

Jakie będzie efektem zastosowanego formatowania CSS dla nagłówka trzeciego stopnia

A. kolor tekstu będzie pomarańczowy

B. tło nagłówka będzie w odcieniu szarości

C. tło nagłówka będzie pomarańczowe

D. kolor tekstu będzie szary

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź, że tło będzie pomarańczowe, jest jak najbardziej trafna. W kodzie HTML użyto atrybutu "style" w tagu <h3>, który ma wyższy priorytet niż to, co jest zapisane w sekcji <style>. Wartość background-color to "orange", więc tło nagłówka trzeciego stopnia naprawdę będzie pomarańczowe. Znamy zasady kaskadowych arkuszy stylów, które mówią, że style bezpośrednio przypisane do elementów HTML mają pierwszeństwo. Kiedy chcemy, aby nagłówki miały różne kolory w zależności od tego, gdzie są użyte, inline styles są bardzo przydatne – zwłaszcza w prototypach. Ale z drugiej strony, z mojego doświadczenia, nadmiar inline styles może skomplikować późniejsze zarządzanie kodem, dlatego lepiej trzymać się klas CSS, żeby wszystko było bardziej uporządkowane.

Pytanie 36

W przedstawionej regule CSS ```h1 {color : blue}``` h1 reprezentuje

A. wartość

B. klasę

C. selektor

D. deklarację

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Selekcja elementów w CSS jest naprawdę ważna, jeśli chodzi o tworzenie stron www. W regule CSS `h1 {color: blue}` mamy do czynienia z selektorem `h1`, który mówi nam, jak stylizować nagłówki pierwszego poziomu. Dzięki selekcji można fajnie dopasować wygląd strony do swoich potrzeb. No i w tym przypadku każdy nagłówek `h1` na stronie będzie miał niebieski kolor, co jest dość prostą i czytelną metodą. warto pamiętać, że CSS oferuje różne typy selektorów, jak klasy czy identyfikatory, a nie tylko tagi. W dużych projektach lepiej używać klasowych czy identyfikatorowych selektorów, bo daje to większą kontrolę nad stylizacją i łatwiejsze zarządzanie kodem.

Pytanie 37

Jaką właściwość należy zastosować w stylu CSS, aby określić krój czcionki?

A. font-family

B. text-style

C. text-family

D. font-style

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 'font-family' jest poprawna, ponieważ w CSS to właśnie ta właściwość służy do określenia rodziny czcionek, które mają być używane w danym elemencie. Właściwość 'font-family' pozwala na zdefiniowanie podstawowych czcionek, a także alternatywnych, które mogą być użyte, jeśli preferowana czcionka nie jest dostępna. Przykładowo, zapisywanie: `font-family: Arial, sans-serif;` wskazuje, że przeglądarka powinna używać czcionki Arial, a w przypadku jej braku - czcionki z rodziny sans-serif. To podejście jest szczególnie ważne w kontekście tworzenia responsywnych i dostępnych interfejsów użytkownika, gdzie różne urządzenia mogą obsługiwać różne czcionki. Dodatkowo, zgodnie z wytycznymi W3C i zasadami projektowania, zaleca się określanie co najmniej dwóch czcionek: głównej i alternatywnej, aby zapewnić odpowiednią estetykę i czytelność tekstu. Znajomość właściwości 'font-family' jest kluczowa dla każdego, kto zajmuje się projektowaniem stron internetowych, pozwalając na lepsze dostosowanie wyglądu i funkcjonalności serwisów oraz aplikacji webowych.

Pytanie 38

Który z poniższych języków jest zazwyczaj używany do programowania front-endowego (wykonywanego po stronie klienta)?

A. PHP

B. Perl

C. CSS

D. Node.js

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
CSS, czyli Kaskadowe Arkusze Stylów, jest fundamentalnym językiem używanym do stylizacji stron internetowych. Jest to język front-endowy, co oznacza, że jego kod jest wykonywany po stronie klienta, czyli w przeglądarkach internetowych użytkowników. CSS pozwala na definiowanie wyglądu elementów HTML, takich jak kolory, czcionki, układ czy odstępy, co ma kluczowe znaczenie dla tworzenia atrakcyjnych i responsywnych interfejsów użytkownika. Przykładem może być zastosowanie CSS do stylizacji przycisku, gdzie można zmienić jego kolor, dodać cień oraz animacje przy najechaniu myszką. W standardach webowych CSS współpracuje z HTML oraz JavaScript, co zapewnia dynamiczne i interaktywne doświadczenia. Dobry projektant front-endowy powinien znać zasady związane z kaskadowością i dziedziczeniem w CSS, aby optymalnie wykorzystywać ten język do tworzenia estetycznych i użytecznych stron internetowych.

Pytanie 39

Wskaż zapis stylu CSS formatujący punktor list numerowanych na wielkie cyfry rzymskie, a list punktowanych na kwadraty.

A. ol { list-style-type: upper-alpha; }
   ul { list-style-type: disc; }

B. ol { list-style-type: square; }
   ul { list-style-type: upper-roman; }

C. ol { list-style-type: disc; }
   ul { list-style-type: upper-alpha; }

D. ol { list-style-type: upper-roman; }
   ul { list-style-type: square; }

A. A.

B. D.

C. C.

D. B.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje, twoja odpowiedź jest poprawna! Wybór opcji D. odnosi się do poprawnego formatowania list w CSS. Odpowiedź pokazuje dobrą znajomość właściwości list-style-type, która jest kluczowa do formatowania typów list. W tym przypadku, dla listy numerowanej (ol), jest ustawiona wartość upper-roman, która reprezentuje wielkie cyfry rzymskie. Dla listy punktowanej (ul) ustawiamy wartość square, co daje efekt punktów w formie kwadratów. To właśnie takie formatowanie list jest preferowane w branży ze względu na jego estetykę i czytelność. Pamiętaj, że zrozumienie i umiejętność manipulacji różnymi właściwościami CSS jest kluczem do tworzenia atrakcyjnych i funkcjonalnych stron internetowych.

Pytanie 40

Atrybut wskazujący na lokalizację pliku graficznego w znaczniku <img> to

A. href

B. src

C. link

D. alt

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut 'src' (source) jest kluczowym elementem znacznika <img>, ponieważ wskazuje lokalizację pliku graficznego, który ma być wyświetlony na stronie internetowej. Użycie tego atrybutu jest niezbędne, aby przeglądarka mogła zlokalizować i załadować odpowiedni obraz. Na przykład, jeśli chcesz wyświetlić grafikę logo na stronie, możesz użyć znacznika <img src='logo.png'>, gdzie 'logo.png' jest ścieżką do pliku graficznego. Ważne jest, aby pamiętać o dokładnym podaniu ścieżki, która może być względna lub absolutna. Zgodnie z najlepszymi praktykami, ważne jest również użycie atrybutu 'alt', który opisuje obraz dla osób z problemami wzrokowymi oraz w przypadku, gdy obraz nie może być załadowany. Przestrzeganie standardów W3C w zakresie HTML zapewnia lepszą dostępność i użyteczność stron internetowych.

Rozpocznij nowy egzamin

Powrót do strony głównej