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: 10 kwietnia 2026 08:15
Data zakończenia: 10 kwietnia 2026 08:37

Egzamin zdany!

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

W katalogu www znajdują się foldery html oraz style, w których umieszczone są odpowiednio pliki o rozszerzeniu html i pliki o rozszerzeniu css. Aby dołączyć styl.css do pliku HTML, należy użyć

A. <link rel="Stylesheet" type="text/css" href="/www/style/styl.css" />

B. <link rel="Stylesheet" type="text/css" href="/style/styl.css" />

C. <link rel="Stylesheet" type="text/css" href="/styl.css" />

D. <link rel="Stylesheet" type="text/css" href="/../style/styl.css" />

W kontekście programowania stron internetowych istnieje wiele aspektów związanych z dołączaniem stylów CSS w dokumentach HTML, które mogą prowadzić do niepoprawnych ścieżek. Wybrane przez nas niepoprawne odpowiedzi zawierają błędy związane głównie z nieprawidłowym określeniem lokalizacji pliku styl.css. W przypadku pierwszej odpowiedzi, href='/styl.css' wskazuje na to, że plik CSS znajduje się w głównym folderze serwera, co jest niezgodne z przedstawioną strukturą folderów. Z kolei w drugiej odpowiedzi, href='/style/styl.css' sugeruje bezpośrednią ścieżkę do folderu 'style' z poziomu głównego katalogu serwera, co również nie odpowiada układowi folderów, gdzie 'style' jest zagnieżdżony w katalogu 'www'. W trzeciej odpowiedzi, href='/www/style/styl.css' nie jest poprawne, ponieważ sugeruje, że folder 'www' jest katalogiem głównym serwera, co jest niezgodne z rzeczywistością. W rzeczywistości, folder 'www' jest folderem, z którego zwykle serwowane są pliki, a nie folderem, który jest bezpośrednio dostępny z poziomu WWW. Te wszystkie błędy ilustrują potrzebę zrozumienia struktury katalogów i zasad dotyczących ścieżek w HTML i CSS, by zapewnić, że pliki zostaną prawidłowo załadowane i będą dostępne dla przeglądarek internetowych.

Pytanie 2

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

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

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

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

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

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

Pytanie 3

Która z wartości tekstowych nie odpowiada podanemu wzorcowi wyrażenia regularnego?

(([A-ZŁŻ][a-ząęóżźćńłś]{2,})(-[A-ZŁŻ][a-ząęóżźćńłś]{2,}))?

A. Kowalski

B. Nowakowska-Kowalska

C. Kasprowicza

D. Jelenia Góra

Odpowiedź 'Jelenia Góra' jest nietrafiona. Wzór wyrażenia regularnego wymaga, żeby ciąg zaczynał się od wielkiej litery, a potem miał przynajmniej dwie małe litery. Dodatkowo, może być tam segment po myślniku z kolejną wielką literą, a na końcu małe litery. No i tutaj problem, bo 'Jelenia Góra' ma spację, a wzór nie lubi takich rzeczy, bo nie rozpoznaje spacji jako separatora. Z mojego doświadczenia w pracy z regexami, ważne jest, żeby takie elementy jak spacje były dokładnie przemyślane, szczególnie przy pracy z danymi. Im lepiej zrozumiesz te zasady, tym łatwiej będzie Ci pracować z różnymi przykładami i sytuacjami przy programowaniu. Także, warto pomyśleć o tym, jak optymalizować wzorce, żeby nasza praca była wydajniejsza i bezbłędna.

Pytanie 4

CMYK to zestaw czterech podstawowych kolorów używanych w druku:

A. czerwonego, purpurowego, żółtego, szarego

B. turkusowego, purpurowego, żółtego, czarnego

C. turkusowego, błękitnego, białego, różowego

D. turkusowego, purpurowego, białego, czarnego

CMYK to model kolorów wykorzystywany w druku, który opiera się na czterech podstawowych kolorach: cyjan (turkusowy), magenta (purpurowy), żółty i czarny. Model ten jest kluczowy w procesach drukarskich, ponieważ wykorzystuje technikę subtraktywnego mieszania kolorów, co oznacza, że kolory powstają przez odejmowanie światła od białego tła. Każdy z kolorów w modelu CMYK odgrywa istotną rolę w uzyskaniu pożądanej gamy kolorystycznej. Na przykład, cyjan i magenta w połączeniu w różnych proporcjach mogą tworzyć różne odcienie niebieskiego, a dodanie żółtego umożliwia uzyskanie zieleni. Kluczowym aspektem jest również czarny kolor, który nie tylko zwiększa głębię barw, ale także poprawia kontrast oraz szczegółowość obrazu. Aby uzyskać optymalne rezultaty, profesjonalne drukarnie często korzystają z systemów kolorystycznych opartych na standardach takich jak ISO 12647, które definiują zasady druku oraz kontrolę jakości kolorów. Użycie modelu CMYK jest niezwykle istotne zarówno w projektowaniu graficznym, jak i w przemysłowym druku, gdzie precyzyjne odwzorowanie kolorów ma kluczowe znaczenie.

Pytanie 5

Ile maksymalnie znaczników <td> może być zastosowanych w tabeli, która ma trzy kolumny oraz trzy wiersze, nie zawierając przy tym złączeń komórek i wiersza nagłówkowego?

A. 9

B. 3

C. 12

D. 6

Odpowiedź 9 jest prawidłowa, ponieważ w tabeli o trzech kolumnach i trzech wierszach, gdzie nie ma złączeń komórek ani wiersza nagłówkowego, maksymalna liczba znaczników <td> wynosi 9. Każda kolumna w każdym wierszu może być wypełniona osobnym znacznikiem <td>. Tabela składająca się z 3 wierszy i 3 kolumn daje w sumie 3 x 3 = 9 komórek, które są reprezentowane przez znaczniki <td>. Przykładową strukturę HTML takiej tabeli można przedstawić następująco: <table><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></table>. Warto również zauważyć, że zgodnie z zaleceniami W3C, użycie odpowiednich znaczników w tabelach jest kluczowe dla zapewnienia właściwej dostępności i semantyki dokumentu HTML, co jest zgodne z dobrymi praktykami tworzenia stron internetowych.

Pytanie 6

body{
background-image: url"rysunek.gif");
background-repeat: repeat-y;
}
W przedstawionej definicji stylu CSS, powtarzanie dotyczy

A. tła każdego znacznika akapitu

B. rysunku osadzonego znacznikiem img

C. rysunku umieszczonego w tle strony w poziomie

D. rysunku znajdującego się w tle strony w pionie

W kontekście pytania, nie wszystkie odpowiedzi są zgodne z zasadami CSS. Powtarzanie tła nie dotyczy tła każdego ze znaczników akapitu, ponieważ właściwość 'background-image' odnosi się do stylu całego elementu, w tym przypadku ciała strony ('body'), a nie poszczególnych akapitów. Rysunek umieszczony znacznikiem img nie ma związku z właściwościami tła, ponieważ ten znacznik wyświetla obraz w treści dokumentu, a nie jako tło dla elementu. Właściwość 'background-repeat' odnosi się wyłącznie do obrazów tła, a nie do obrazów wstawionych za pomocą znaczników HTML. Dodatkowo, rysunek umieszczony w tle strony w poziomie również nie jest poprawny, ponieważ 'repeat-y' wskazuje na powtarzanie w kierunku pionowym, co oznacza, że obrazek będzie powielany wzdłuż osi Y, a nie X. Zrozumienie tych różnic jest kluczowe dla efektywnego korzystania z CSS i tworzenia responsywnych, estetycznych stron internetowych.

Pytanie 7

Co można powiedzieć o wyświetlonym przez witrynę tekście "test kolorów"?

<p id="p1" style="color:blue;">test kolorów</p>
<button type="button"
  onclick="document.getElementById('p1').style.color='red'">
  test</button>

A. Po wciśnięciu przycisku test kolor tekstu jest czerwony.

B. Zaraz po załadowaniu witryny kolor tekstu jest czerwony.

C. Wciskanie przycisku test sprawia, że kolor tekstu jest na przemian niebieski i czerwony.

D. Po wciśnięciu przycisku test kolor tekstu jest niebieski.

Zauważyłem, że w kodzie HTML kolor tekstu na początku jest niebieski. Jest to ustawione w atrybucie style dla elementu o id='p1'. Po kliknięciu w przycisk, uruchamia się funkcja JavaScript, która zmienia kolor na czerwony. Ta funkcja jest przypisana w atrybucie onclick. Takie podejście to świetny sposób na interakcję użytkownika z witryną, korzystając ze skryptów JavaScript. Myślę, że to bardzo dobry przykład, który pokazuje, jak można robić interaktywne elementy na stronach. Wiedza na ten temat może pomóc lepiej zrozumieć, jak działają strony internetowe i co można zrobić z JavaScriptem.

Pytanie 8

Podano fragment kodu HTML, który nie przechodzi walidacji. Problemy z walidacją tego kodu będą dotyczyć:

<!DOCTYPE HTML>
<html>
<head>
    <title>Test</title>
</head>
<body>

<img src="obraz.gif">
<br>
<img src="obraz.gif">

</body>
</html>

A. braku atrybutu alt w znaczniku <img>

B. braku zamknięcia znacznika <br>

C. braku zamknięcia znacznika <img>

D. duplikacji nazwy pliku graficznego

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

Pytanie 9

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

W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

A. <p>W tym <b>paragrafie <i>zobaczysz</i> sposoby formatowania</b> tekstu w HTML</p>

B. <p>W tym <i>paragrafie </i><b>zobaczysz</b><i> sposoby formatowania</i> tekstu w HTML</p>

C. <p>W tym <i>paragrafie <b>zobaczysz</b> sposoby formatowania</i> tekstu w HTML</p>

D. <p>W tym <i>paragrafie zobaczysz sposoby formatowania</i> tekstu w HTML</p>

Wybór niepoprawnych odpowiedzi wynika z błędnego użycia znaczników HTML, co wpływa na końcowe formatowanie tekstu. Pierwsza odpowiedź zawiera błąd polegający na niewłaściwym zamknięciu znacznika <b> przez dodanie spacji przed ukośnikiem, co powoduje, że przeglądarki mogą błędnie interpretować strukturę HTML. W konsekwencji, tekst może nie być prawidłowo pogrubiony, ponieważ przeglądarka nie rozpoznaje zamknięcia znacznika. Trzecia odpowiedź całkowicie pomija znacznik <b>, co oznacza, że tekst 'zobaczysz' nie zostanie pogrubiony, co jest niezgodne z wymaganym efektem wizualnym. Brak zastosowania odpowiednich znaczników wpływa na semantyczne znaczenie zawartości, co jest kluczowe w kontekście dostępności i dobrych praktyk w web designie. Czwarta odpowiedź błędnie rozdziela znaczniki <i> wokół słowa 'zobaczysz', co nie tworzy efektu jednoczesnej kursywy i pogrubienia. Wiedza dotycząca zagnieżdżania znaczników jest istotna, aby uzyskać pożądany efekt wizualny, a także utrzymać semantykę i dostępność zgodnie z nowoczesnymi standardami tworzenia stron internetowych. Rozumienie hierarchii i poprawne zamykanie znaczników ma kluczowe znaczenie dla renderowania strony zgodnie z oczekiwaniami, jak również dla zachowania zgodności z HTML5.

Pytanie 10

Zaprezentowano rezultat zastosowania CSS oraz odpowiadający mu kod HTML. W jaki sposób trzeba zdefiniować styl, aby uzyskać takie formatowanie?

A. p.first-letter { font-size: 400%; color: blue; }

B. p::first-letter { font-size: 400%; color: blue; }

C. .first-letter { font-size: 400%; color: blue; }

D. #first-letter { font-size: 400%; color: blue; }

Odpowiedź jest prawidłowa, ponieważ selektor CSS p::first-letter precyzyjnie określa, że stylizacja ma być zastosowana do pierwszej litery każdego akapitu, który jest oznaczony tagiem p. Jest to pseudo-element CSS, który umożliwia dostęp do pierwszej litery bloku tekstu w celu nadania jej unikalnego wyglądu. W tym przypadku zmieniono jej rozmiar na 400% oraz kolor na niebieski. Użycie ::first-letter jest zgodne z najlepszymi praktykami, gdyż pozwala na zachowanie semantyczności HTML i oddzielenie warstwy prezentacyjnej od treści, co jest kluczowe w responsywnym projektowaniu stron internetowych. Pseudo-elementy jak ::first-letter są niezwykle przydatne w tworzeniu estetycznych i czytelnych interfejsów użytkownika, zwłaszcza w przypadku publikacji zawierających dużo tekstu. Dobrą praktyką jest stosowanie pseudo-elementów w połączeniu z klasami i identyfikatorami, aby stylizacja była elastyczna i mogła być łatwo dostosowywana zgodnie z potrzebami projektu.

Pytanie 11

W kodzie HTML znajdziemy formularz. Jaki rezultat zostanie pokazany przez przeglądarkę, jeśli użytkownik wprowadził do pierwszego pola wartość "Przykładowy text"?

A. Efekt 4

B. Efekt 2

C. Efekt 1

D. Efekt 3

Efekt 2 jest prawidłowy, ponieważ odpowiada dokładnemu odwzorowaniu HTML. Kod zawiera element <textarea> oraz dwa pola typu checkbox. Przeglądarka wyświetla pole tekstowe o określonym rozmiarze, gdzie użytkownik może wpisać tekst. Checkboxy pozwalają na wybór opcji, niezależnych od siebie, co odróżnia je od radiobuttonów. Przykładowy text wpisany w pole <textarea> zostanie wyświetlony w miejscu tego pola, co jest dobrze widoczne na obrazie odpowiadającym efektowi 2. Warto pamiętać, że <textarea> stosuje się do dłuższych form tekstu, co jest standardem w projektowaniu formularzy. Użycie checkboxów jest zgodne z dobrymi praktykami, gdy użytkownik może zaznaczyć dowolną liczbę opcji. Jest to ważne, aby dostarczyć użytkownikowi intuicyjny interfejs do wprowadzania i wyboru danych. W HTML ważne jest, aby kod był semantyczny i zgodny z oczekiwaniami użytkowników, co ten przykład dobrze ilustruje. Formularze powinny być zawsze testowane pod kątem użyteczności i poprawności w różnych przeglądarkach.

Pytanie 12

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

background-color: red;
color: blue;
margin: 40px;

A. tło czerwone, kolor tekstu niebieski, marginesy zewnętrzne na poziomie 40 px

B. tło niebieskie, kolor tekstu czerwony, marginesy wewnętrzne na poziomie 40 px

C. tło czerwone, kolor tekstu niebieski, marginesy wewnętrzne na poziomie 40 px

D. tło niebieskie, kolor tekstu czerwony, marginesy zewnętrzne na poziomie 40 px

Poprawna odpowiedź wskazuje na tło czerwone, kolor tekstu niebieski oraz marginesy zewnętrzne ustawione na 40 px. W deklaracji CSS, przypisanie 'background-color: red;' skutkuje czerwonym tłem dla elementu, co jest zgodne z zasadami oznaczania kolorów w CSS, które pozwalają na zastosowanie nazw kolorów, kodów hex czy rgb. 'color: blue;' ustawia kolor tekstu na niebieski, co pozwala na lepszą czytelność tekstu na czerwonym tle. Z kolei 'margin: 40px;' definiuje marginesy zewnętrzne, co oznacza, że odległość od innych elementów na stronie wynosi 40 px. Takie praktyki są zgodne z dobrymi standardami projektowania, które sugerują stosowanie kontrastujących kolorów dla poprawy dostępności oraz przestrzeni między elementami dla lepszej struktury layoutu. Warto pamiętać, że marginesy zewnętrzne różnią się od marginesów wewnętrznych (padding), co często jest źródłem nieporozumień.

Pytanie 13

W CSS wartości takie jak: underline, overline, line-through oraz blink odnoszą się do właściwości

A. text-decoration

B. font-style

C. font-decoration

D. text-align

Właściwość 'text-align' dotyczy ustawienia wyrównania tekstu w obrębie kontenera. Jej zastosowanie koncentruje się na takich wartościach jak 'left', 'right', 'center' czy 'justify', które wpływają na układ tekstu na stronie, ale nie mają związku z jego dekoracją. Z kolei 'font-style' odnosi się do stylu czcionki, umożliwiając taką manipulację jak kursywa lub normalny styl, jednak nie kontroluje dekoracji tekstu. Z kolei 'font-decoration' nie jest standardową właściwością CSS; błędne jej wykorzystanie może wynikać z nieznajomości konwencji CSS. Właściwości takie jak 'text-decoration' są zdecydowanie bardziej odpowiednie do osiągania zamierzonych efektów wizualnych na tekście. Często początkujący programiści mylą te różne właściwości, co prowadzi do niepoprawnego stylizowania elementów tekstowych. Warto zwrócić uwagę, że każda z wymienionych właściwości ma swoje unikalne zastosowanie i wymagania, dlatego kluczowe jest zrozumienie ich specyfiki oraz kontekstu użycia w projekcie stron internetowych. Prawidłowe stosowanie właściwości CSS jest niezbędne dla zapewnienia estetyki oraz funkcjonalności strony, co jest fundamentalne w nowoczesnym web designie.

Pytanie 14

Który z poniższych znaczników jest częścią sekcji <head> dokumentu HTML?

A. <img>

B. <span>

C. <section>

D. <title>

Znacznik <title> jest fundamentalnym elementem sekcji <head> dokumentu HTML. Jego głównym zadaniem jest określenie tytułu strony, który jest wyświetlany na pasku tytułowym przeglądarki oraz w wynikach wyszukiwania. Dobrze skonstruowany tytuł powinien być zwięzły, ale jednocześnie informacyjny, aby skutecznie przyciągnąć uwagę użytkowników. Zgodnie z wytycznymi W3C, tytuł powinien mieć od 50 do 60 znaków, aby uniknąć obcinania w wynikach wyszukiwania. Przykładem dobrze sformułowanego tytułu może być: „Jak stworzyć responsywną stronę internetową - poradnik krok po kroku”. Ważne jest, aby tytuł był unikalny dla każdej podstrony w witrynie, co nie tylko poprawia SEO, ale również ułatwia użytkownikom nawigację. W kontekście standardów i dobrych praktyk, należy również unikać umieszczania w tytule zbędnych słów kluczowych, co może być uznane za spam przez wyszukiwarki. Dobrze zaprojektowany tytuł jest kluczem do efektywnego pozycjonowania i budowania marki w sieci.

Pytanie 15

Głównym celem systemu CMS jest oddzielenie treści witryny informacyjnej od jej wyglądu. Jak osiągany jest ten efekt?

A. ze statycznych plików HTML oraz wyglądu ze zdefiniowanego szablonu

B. z bazy danych oraz wyglądu za pomocą atrybutów HTML

C. z bazy danych oraz wyglądu ze zdefiniowanego szablonu

D. ze statycznych plików HTML oraz wyglądu za pomocą technologii FLASH

Wykorzystanie statycznych plików HTML do generowania treści w kontekście systemów CMS jest koncepcją nieefektywną oraz niezgodną z współczesnymi standardami zarządzania treścią. Statyczne pliki HTML są trudne do aktualizacji, co oznacza, że każda zmiana wymaga edycji każdego pliku osobno. W praktyce prowadzi to do zwiększenia ryzyka błędów oraz obniża efektywność pracy, szczególnie w większych projektach. Z drugiej strony, wykorzystanie atrybutów HTML do definiowania wyglądu nie oddziela treści od prezentacji, co jest kluczowym założeniem CMS. Takie podejście nie tylko zagraża porządku w organizacji treści, ale także może negatywnie wpływać na dostępność oraz responsywność strony. Ponadto, technologia FLASH, która była popularna w przeszłości, obecnie nie jest wspierana przez większość przeglądarek i nie jest zalecana w nowoczesnym projektowaniu stron internetowych. Właściwe podejście do zarządzania treścią wymaga stosowania nowoczesnych narzędzi, takich jak bazy danych w połączeniu z szablonami, co zapewnia elastyczność i wygodę użytkowania. W ten sposób można efektywnie zarządzać zawartością oraz zapewnić optymalną wydajność i estetykę serwisu.

Pytanie 16

Definicja stylu zaprezentowana w CSS odnosi się do odsyłacza, który

a:visited {color: orange;}

A. został wcześniej odwiedzony

B. posiada błędny adres URL

C. wskaźnik myszy znajduje się nad nim

D. jeszcze nie był odwiedzony

Odpowiedź "został wcześniej odwiedzony" jest prawidłowa, ponieważ definicja stylu CSS `a:visited {color: orange;}` dotyczy odsyłaczy, które zostały już odwiedzone przez użytkownika. W CSS pseudo-klasa `:visited` jest stosowana do stylizacji odsyłaczy, które prowadzą do stron, które użytkownik już otworzył. Dzięki tej możliwości, twórcy stron internetowych mogą wprowadzać różne kolory dla odwiedzonych i nieodwiedzonych linków, co pozwala na szybszą orientację użytkowników w treści strony. Na przykład, jeżeli na stronie znajduje się wiele linków, użytkownik może łatwiej zrozumieć, które z nich już kliknął, a które są nowe. Dobrą praktyką jest stosowanie kontrastowych kolorów dla odsyłaczy, aby zwiększyć ich dostępność i użyteczność. Warto również zauważyć, że przeglądarki mogą mieć różne ograniczenia dotyczące stylizacji odwiedzonych linków, co jest podyktowane względami prywatności użytkowników. Z tego powodu zaleca się, aby nie opierać funkcjonalności strony jedynie na wyglądzie odwiedzonych linków.

Pytanie 17

Jaki selektor stylizuje akapity tekstu z klasą tekst oraz element blokowy z identyfikatorem obrazki?

A. p.tekst + div#obrazki

B. p#tekst + div.obrazki

C. p.tekst, div#obrazki

D. p#tekst, div.obrazki

Poprawna odpowiedź to 'p.tekst, div#obrazki', ponieważ selektor 'p.tekst' odnosi się do wszystkich elementów <p>, które mają klasę 'tekst'. To podejście jest zgodne z zasadami CSS, gdzie '.' oznacza klasę. Z kolei 'div#obrazki' to selektor, który odnosi się do elementu <div> o ID 'obrazki'. W tym przypadku '#' jest używane do wskazania unikalnego identyfikatora. Dzięki temu możemy dostosować style do konkretnych elementów w HTML. Przykład zastosowania: jeżeli chcemy, aby akapity z klasą 'tekst' miały określony kolor tła oraz aby element <div> z ID 'obrazki' był wyśrodkowany na stronie, możemy napisać odpowiednie reguły CSS, które zastosują te style tylko do wskazanych elementów. Praktyka ta zwiększa przejrzystość kodu oraz ułatwia jego późniejsze zarządzanie. Zastosowanie odpowiednich selektorów zgodnych z zasadami CSS to klucz do efektywnego stylizowania stron internetowych oraz dobrych praktyk w zakresie tworzenia responsywnych interfejsów użytkownika.

Pytanie 18

W CSS zapis w postaci ```h1::first-letter{color:red;}``` spowoduje, że kolor czerwony będzie dotyczył

A. tekstów nagłówka pierwszego poziomu

B. pierwszej litery nagłówka pierwszego poziomu

C. pierwszej litery nagłówka drugiego poziomu

D. pierwszej linii akapitu

Zapis CSS h1::first-letter {color: red;} odnosi się do selektora pseudo-elementu first-letter, który jest używany do stylizacji pierwszej litery bloku tekstowego w nagłówkach. W tym wypadku, gdy selektor jest zastosowany do elementu h1, oznacza to, że kolor pierwszej litery nagłówka pierwszego stopnia (h1) zostanie zmieniony na czerwony. Pseudo-element first-letter działa tylko dla elementów blokowych, takich jak nagłówki, akapity czy listy. W praktyce, jeśli w dokumencie HTML mamy element <h1> z tekstem, np. 'Witaj świecie', to wyłącznie litera 'W' zostanie wyświetlona w kolorze czerwonym. To podejście jest zgodne ze standardami CSS, które definiują pseudo-elementy jako specyficzne fragmenty dokumentu, które można stylizować niezależnie od reszty zawartości. Warto również zauważyć, że stosowanie takich selektorów pozwala na uzyskanie bardziej złożonych efektów wizualnych bez konieczności modyfikacji struktury HTML. Umożliwia to projektantom stron internetowych większą elastyczność i kontrolę nad estetyką treści.

Pytanie 19

Do którego akapitu przypisano podaną właściwość stylu CSS?
border-radius: 20%;

A. Rys. D

B. Rys. C

C. Rys. B

D. Rys. A

Właściwość CSS border-radius służy do zaokrąglania rogów elementu na stronie internetowej. W przypadku wartości procentowej jak 20% zaokrąglenie jest obliczane w stosunku do wymiarów elementu co pozwala na uzyskanie proporcjonalnego wyglądu niezależnie od rozmiaru ramki. Wybranie odpowiedzi Rys. B jest poprawne ponieważ widoczny jest tam efekt zaokrąglonych rogów co jednoznacznie wskazuje na zastosowanie border-radius. Takie stylizacje są powszechnie używane w projektowaniu nowoczesnych interfejsów użytkownika aby nadać im bardziej miękki i przyjazny wygląd. Dobre praktyki projektowe zalecają umiarkowane stosowanie zaokrągleń aby nie przesadzić z efektami wizualnymi co mogłoby pogorszyć czytelność i funkcjonalność. Warto również pamiętać o aspekcie responsywności – używanie wartości procentowych pozwala na lepsze dostosowanie się do różnych rozdzielczości ekranów co jest kluczowe w nowoczesnym web designie. Dzięki border-radius można także tworzyć zaawansowane efekty graficzne łącząc go z innymi właściwościami CSS jak cienie czy gradienty co pozwala na osiągnięcie atrakcyjnych wizualnie elementów bez potrzeby użycia obrazów.

Pytanie 20

Jakie jest poprawne zapisanie tagu HTML?

<a href="#hobby">przejdź</a>

A. jest błędny, w atrybucie href powinien być podany adres URL

B. jest błędny, użyto niewłaściwego znaku # w atrybucie href

C. jest prawidłowy, po kliknięciu w odnośnik otworzy się strona pod adresem "hobby"

D. jest poprawny, po kliknięciu w odnośnik strona zostanie przewinięta do elementu o nazwie "hobby"

Znaczniki HTML są podstawowym narzędziem tworzenia stron internetowych a ich prawidłowe zastosowanie ma kluczowe znaczenie dla funkcjonalności i użyteczności witryny. W omawianym przypadku atrybut href='#hobby' używa tzw. kotwicy która służy do nawigacji wewnętrznej w obrębie jednej strony. Linki wewnętrzne są istotne gdyż pozwalają na szybkie przeskakiwanie do określonych sekcji dokumentu. W odpowiedziach błędnych zauważalne są pewne nieporozumienia. Po pierwsze jeśli w href użyto adresu URL bez znaku hash oznacza to próbę przekierowania na zupełnie inną stronę co jest niepoprawne w kontekście nawigacji wewnętrznej. Podanie pełnego adresu URL jest wymagane jedynie gdy chcemy przejść do innej strony internetowej. Znak hash w tym kontekście jest poprawny gdyż wskazuje na docelowy identyfikator wewnątrz tej samej strony. Jest to zgodne z praktykami tworzenia przejrzystych i funkcjonalnych interfejsów użytkownika. Nieprawidłowe interpretacje mogą wynikać z braku zrozumienia jak działają kotwice w HTML co może prowadzić do błędów w projektowaniu doświadczenia użytkownika oraz kodu o niskiej użyteczności. Edukacja i praktyka w używaniu standardowych znaczników HTML jest niezbędna dla tworzenia profesjonalnych projektów internetowych które są przyjazne dla użytkowników i działają zgodnie z oczekiwaniami. Rozumienie tych zasad pozwala na tworzenie stron zgodnych z najlepszymi praktykami branżowymi co ma kluczowe znaczenie dla współczesnych wymagań projektowych i użytkowych.

Pytanie 21

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. wyświetlony, jeśli w kodzie użyty zostanie znacznik img

D. tłem każdego akapitu

W przypadku stylowania elementów za pomocą CSS, bardzo łatwo popełnić błąd interpretacyjny, jeśli nie zna się szczegółów działania selektorów czy właściwości stylów. Zapis p { background-image: url("rysunek.png"); } dotyczy wyłącznie elementów <p>, czyli akapitów, a nie całej witryny. Popularnym nieporozumieniem jest myślenie, że taka reguła zmieni tło całej strony — w rzeczywistości, aby osiągnąć taki efekt, należałoby użyć selektora body, np. body { background-image: ... }, bo to body odpowiada za tło całego dokumentu. Jeśli ktoś zakłada, że obrazek pojawi się tylko wtedy, gdy w HTML użyjemy <img src="rysunek.png">, to miesza dwie zupełnie osobne koncepcje: background-image ustawia grafikę w tle elementu, a <img> osadza ją w strukturze treści jako samodzielny obiekt — to dwie różne rzeczy. Sam background-image nie potrzebuje obecności znacznika <img>; przeglądarka pobierze i wyświetli grafikę tylko jako tło elementu. Natomiast odpowiedź sugerująca, że obrazek będzie widoczny obok każdego akapitu, wynika chyba z niezrozumienia mechanizmu renderowania tła: CSS nie wstawia obrazka "obok" treści, tylko pod nią, w tle elementu, wypełniając całą jego powierzchnię (lub jej fragment w zależności od innych właściwości tła, np. background-repeat czy background-position). To często mylone z dekoracjami typu list-style-image w listach, gdzie obrazek rzeczywiście pojawia się obok tekstu listy. Warto zawsze czytać dokumentację i testować takie rzeczy samodzielnie — praktyka bardzo pomaga zrozumieć niuanse w CSS. Przemyślenie działania selektorów i właściwości to podstawa unikania takich nieporozumień podczas projektowania layoutów.

Pytanie 22

Na obrazie przedstawiono projekt układu bloków witryny internetowej. Zakładając, że bloki są realizowane za pomocą znaczników sekcji, ich formatowanie w CSS, oprócz ustawionych szerokości dla bloków: 1, 2,
3, 4 (blok 5 nie ma ustawionej szerokości), powinno zawierać właściwość

A. clear: both dla wszystkich bloków.

B. clear: both dla bloku 5 oraz float: left dla pozostałych bloków.

C. float: left dla wszystkich bloków.

D. clear: both dla bloku 5 oraz float: left jedynie dla 1 i 2 bloku.

Twoja odpowiedź jest poprawna. Bloki 1, 2, 3 i 4 powinny być ustawione obok siebie na stronie. Możemy tego dokonać, stosując dla nich właściwość 'float: left' w CSS, która sprawia, że elementy są wyświetlane po lewej stronie swojego kontenera. Często stosuje się tę technikę przy projektowaniu layoutów stron internetowych, umożliwiając rozmieszczenie bloków w jednym rzędzie. Blok 5 powinien natomiast znajdować się poniżej tych bloków, co osiągniemy stosując właściwość 'clear: both'. Ta właściwość zapewnia, że element nie będzie obok żadnego z poprzednich bloków, nawet jeśli mają one ustawiony float. Jest to szczególnie przydatne w sytuacjach, gdy chcemy, aby pewien element (np. stopka strony) był wyświetlany poniżej innych bloków, niezależnie od ich położenia czy szerokości. W praktyce, prawidłowe zastosowanie tych dwóch właściwości jest kluczowe dla tworzenia responsywnych i atrakcyjnych layoutów stron.

Pytanie 23

Czy możliwa jest przedstawiona transformacja obrazu rastrowego dzięki funkcji?

A. ustawienia jasności i kontrastu

B. zmniejszenie liczby kolorów

C. odcienie szarości

D. barwienie

Barwienie to proces edycji obrazu rastrowego, który polega na modyfikacji istniejących kolorów poprzez nałożenie nowego odcienia na całość lub część obrazu. Dzięki temu możemy uzyskać efekt jak na przedstawionym obrazie, gdzie oryginalne kolory zostały zastąpione jednolitą barwą. Barwienie jest powszechnie stosowane w grafice komputerowej do nadawania dramatyzmu lub zmiany nastroju obrazu, co jest szczególnie przydatne w fotografii artystycznej czy projektach reklamowych. Narzędzia takie jak Adobe Photoshop czy GIMP oferują funkcje barwienia, pozwalając artystom na twórcze eksperymenty z kolorami. Technika ta może być stosowana również w procesie tworzenia materiałów wizualnych w branży marketingowej, gdzie spójna kolorystyka jest kluczowa dla budowania rozpoznawalności marki. Ważne jest, aby pamiętać o zachowaniu naturalnego balansu i harmonii w barwach, co jest zgodne z zasadami dobrych praktyk w projektowaniu graficznym. Barwienie umożliwia również korektę kolorystyczną, co jest istotne w procesie przygotowania materiałów do druku, gdzie kolory muszą być dostosowane do specyfikacji technicznych drukarni.

Pytanie 24

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:25px;">

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

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

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

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 25

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

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

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

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

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

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

Pytanie 26

Znacznik <s> w HTML generuje

A. przekreślenie tekstu

B. podkreślenie tekstu

C. migotanie tekstu

D. pochylenie tekstu

Znacznik <s> w HTML służy do oznaczania tekstu, który jest przekreślony. To daje znać, że dany fragment już nie jest aktualny albo jest błędny. Myślę, że to bardzo ważne, bo z perspektywy semantyki w HTML, pozwala lepiej zrozumieć, co się dzieje na stronie. Użytkownicy korzystający z czytników ekranu mogą łatwiej zrozumieć, że coś jest nieaktualne. Przykładem mogą być sklepy internetowe, gdzie przekreślenie starej ceny pokazuje, że produkt jest teraz w promocji. Dobrze jest pamiętać, że stosowanie tych znaczników dobrze wpływa na strukturę dokumentu, co jest zgodne z wytycznymi W3C i poprawia dostępność w sieci.

Pytanie 27

Według zasad walidacji HTML5, właściwym zapisem dla znacznika hr jest

A. <hr>

B. </hr?>

C. </ hr>

D. </ hr />

Odpowiedź <hr> jest poprawna, ponieważ zgodnie z regułami HTML5, znacznik <hr> jest znakiem samodzielnym, co oznacza, że nie wymaga zamknięcia. Jest to element blokowy, który służy do wprowadzania poziomej linii w dokumencie, co często wykorzystuje się do rozdzielania sekcji treści. Standard HTML5 zezwala na użycie skróconej formy, a zatem <hr> jest wystarczające do oznaczenia poziomej linii. W praktyce, użycie tego znacznika jest istotne dla strukturyzacji dokumentów i poprawy ich czytelności. Dobrą praktyką jest również stosowanie odpowiednich atrybutów, takich jak 'class' czy 'id', co może ułatwić późniejsze stylizowanie za pomocą CSS. Warto pamiętać, że w HTML5, chociaż można używać atrybutów takich jak 'style' czy 'title', powinny one być stosowane odpowiedzialnie, aby nie zaburzać semantyki dokumentu. Ponadto, korzystanie z tego znacznika jest zgodne z WAI-ARIA, co wspiera dostępność aplikacji webowych.

Pytanie 28

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

A. tło strony będzie przesuwane razem z zawartością tekstową

B. grafika tła będzie widoczna w prawym górnym rogu strony

C. tło strony zostanie zamocowane, a tekst będzie się poruszał

D. grafika tła będzie się powtarzać (kafelki)

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 29

W języku CSS, aby ustalić wewnętrzny górny margines, czyli przestrzeń pomiędzy elementem a jego otaczającym obramowaniem, należy zastosować komendę

A. local-top

B. border-top

C. padding-top

D. outline-top

W kontekście tego pytania, outline-top nie jest poprawną odpowiedzią, ponieważ właściwość outline w CSS nie definiuje marginesów czy odstępów, lecz obramowanie, które nie wpływa na układ elementu wewnątrz kontenera. Outline jest szczególnie przydatne do podkreślenia elementów w interakcji, np. podczas nawigacji za pomocą klawiatury, ale nie ma wpływu na przestrzeń wewnętrzną. Border-top również nie jest odpowiednim rozwiązaniem w tym przypadku. Właściwość border-top definiuje górną krawędź obramowania elementu, a nie wnętrze. Zastosowanie border-top wprowadza dodatkową linię, co nie spełnia roli marginesu wewnętrznego, a jedynie zmienia wizualny aspekt elementu. Co więcej, border ma wpływ na całkowite wymiary elementu, co może prowadzić do niezamierzonych efektów w układzie strony. Wreszcie, local-top nie istnieje jako właściwość w CSS, co czyni tę odpowiedź całkowicie niepoprawną. Takie sformułowanie jest mylące, ponieważ nie odnosi się do żadnej standardowej właściwości CSS i nie ma uznania w dokumentacji związanej z kaskadowymi arkuszami stylów. Zrozumienie, jak te właściwości działają w kontekście modelu pudełkowego CSS, jest kluczowe dla efektywnego projektowania stron internetowych.

Pytanie 30

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. td, th { background-color: Pink; }

B. tr { background-color: Pink; }

C. tr:active { background-color: Pink; }

D. tr:hover { background-color: Pink; }

W tym zadaniu chodzi o zrozumienie, jak działają selektory CSS oraz pseudo-klasy odpowiedzialne za interakcję z użytkownikiem. Jeśli efekt ma pojawiać się tylko wtedy, gdy użytkownik najedzie myszką na wiersz tabeli, to zwykłe ustawienie background-color bez pseudo-klasy nie spełni tego warunku. Deklaracja tr { background-color: Pink; } oznaczałaby, że wszystkie wiersze tabeli są cały czas różowe, niezależnie od tego, czy ktoś na nie najedzie, czy nie. To jest po prostu styl statyczny, bez żadnej reakcji na zdarzenia. Podobnie zapis td, th { background-color: Pink; } ustawia tło dla wszystkich komórek tabeli (zarówno nagłówkowych th, jak i zwykłych td) w sposób stały. Moim zdaniem to dość częsty błąd: ktoś kojarzy tabelę z komórkami i intuicyjnie styluje td/th, ale zapomina, że w pytaniu chodzi o efekt dynamiczny „po najechaniu”. W rezultacie otrzymujemy tabelę pokolorowaną na stałe, bez jakiejkolwiek interakcji, co jest sprzeczne z założeniem zadania i z typowym zachowaniem tabel w nowoczesnych interfejsach. Ciekawsza jest kwestia selektora tr:active { background-color: Pink; }. Pseudo-klasa :active oznacza element w momencie „aktywacji”, czyli najczęściej w chwili klikania (przytrzymania przycisku myszy). Efekt trwa bardzo krótko, tylko w czasie samego kliknięcia. To zupełnie inny scenariusz niż wygodne podświetlenie wiersza, które ma się utrzymywać, dopóki kursor jest nad elementem. Użycie :active prowadzi do efektu, który miga na ułamek sekundy i z punktu widzenia ergonomii jest praktycznie bezużyteczny w kontekście podświetlania wierszy. Typowy błąd myślowy przy takich pytaniach polega na myleniu różnych pseudo-klas: :hover, :active, :focus. W webdevie przyjęło się, że :hover służy do reakcji na najechanie myszką, :active do krótkiej reakcji na kliknięcie, a :focus do zaznaczenia elementu, który ma aktualnie fokus klawiatury. Standardy CSS i dobre praktyki projektowania interfejsów jasno wskazują, że do efektu „podświetl wiersz, gdy nad nim jestem” należy użyć właśnie :hover na odpowiednim elemencie, czyli w tym przypadku tr. Wszystkie pozostałe odpowiedzi ignorują tę zasadę albo stosują nie tę pseudo-klasę, co trzeba, przez co nie odzwierciedlają poprawnie zachowania pokazanego w materiale wideo.

Pytanie 31

Które z poniższych formatowań nie jest zapisane w języku CSS?

A. Fragment pliku strona.html: <style> body {background-color: yellow;} </style>

B. Fragment pliku strona.html: <body bgcolor="yellow">

C. Fragment pliku strona.html: <body style="background-color:yellow;">

D. Fragment pliku formatowanie.css: body {background-color: yellow;}

Fragment <body bgcolor="yellow"> nie jest wyrażony w języku CSS, lecz w przestarzałym atrybucie HTML, który został uznany za niezalecany w nowoczesnych praktykach webowych. CSS (Cascading Style Sheets) to język służący do stylizacji dokumentów HTML i definiuje wizualne aspekty strony internetowej niezależnie od jej struktury. Atrybut 'bgcolor' był popularny w starszych wersjach HTML, jednak obecnie powinno się go unikać z uwagi na separację treści od prezentacji. Zastosowanie CSS w stylach wewnętrznych lub zewnętrznych, takich jak body {background-color: yellow;} pozwala na bardziej elastyczne i wydajne zarządzanie stylami strony. Warto również zauważyć, że zgodnie z aktualnymi standardami W3C, zaleca się używanie CSS do stylizacji, co pozwala na lepszą responsywność i łatwiejsze utrzymanie kodu. Przykłady zastosowania CSS w praktyce pokazują, jak można w prosty sposób zmieniać wygląd elementów na stronie, co jest kluczowe w nowoczesnym web designie, zwłaszcza w kontekście tworzenia stron mobilnych.

Pytanie 32

Jaki zapis znacznika <div> może występować w dokumencie HTML tylko raz, a jego ponowne użycie spowoduje pojawienie się błędów podczas walidacji dokumentu?

A. <div>

B. <div class="klasa1 klasa2">

C. <div class="klasa">

D. <div id="identyfikator">

Zapis <div class="klasa1 klasa2"> nie narusza zasad walidacji HTML, ponieważ atrybut class może występować wielokrotnie w obrębie dokumentu. Dzięki temu, można przypisać wiele klas do jednego elementu, co jest przydatne w przypadku stylizacji CSS, gdzie różne klasy mogą być wykorzystywane do różnych celów. Zastosowanie wielu klas umożliwia elastyczne zarządzanie stylami, jednak nie wpływa na unikalność elementów. Z kolei zapis <div class="klasa"> jest również poprawny i pozwala na przypisanie pojedynczej klasy do elementu. Klasy są przydatne w kontekście grupowania elementów lub stosowania do nich wspólnych stylów, co jest zgodne z zasadami modularności w CSS. Natomiast zapis <div> jest ogólnym rozwiązaniem, które nie wprowadza żadnych specyfikacji, ale również nie generuje błędów walidacyjnych. Zrozumienie różnicy między atrybutem id a atrybutem class jest kluczowe w HTML. Na przykład, stosując id, jesteśmy zobowiązani do jego unikalności, co nie jest wymagane dla klas. Dla wielu początkujących programistów mylenie tych dwóch atrybutów może prowadzić do nieporozumień i problemów z walidacją kodu. Przy projektowaniu stron internetowych należy skupić się na ich strukturyzacji oraz semantyce, aby zapewnić łatwiejsze zarządzanie kodem i jego przyszłą rozbudowę.

Pytanie 33

CMYK to kombinacja czterech podstawowych kolorów stosowanych w druku:

A. czerwonego, purpurowego, żółtego, szarego

B. turkusowego, błękitnego, białego, różowego

C. turkusowego, purpurowego, białego, czarnego

D. turkusowego, purpurowego, żółtego, czarnego

Odpowiedź zawierająca kolory turkusowy, purpurowy, żółty i czarny jest poprawna, ponieważ CMYK to standardowy model kolorów stosowany w druku. Składa się on z czterech podstawowych kolorów: cyjan (turkusowy), magenta (purpurowy), żółty i czarny (key). Model ten jest powszechnie wykorzystywany w przemyśle poligraficznym, ponieważ pozwala na uzyskanie szerokiej gamy kolorów poprzez mieszanie tych czterech odcieni. Przykładem zastosowania CMYK jest druk ulotek, plakatów czy książek, gdzie precyzyjne odwzorowanie kolorów jest kluczowe dla jakości i estetyki produktu. W praktyce, mieszanie kolorów w tym modelu odbywa się przez stosowanie różnych proporcji farb, co pozwala na uzyskanie pożądanych odcieni. Warto również zauważyć, że standard CMYK jest podstawą wielu systemów druku cyfrowego oraz offsetowego, co czyni go fundamentalnym narzędziem w pracy projektantów graficznych oraz drukarzy, którzy muszą zrozumieć jego zasady, aby efektywnie realizować projekty graficzne.

Pytanie 34

Jakiego znacznika w języku HTML nie można użyć do wstawienia grafiki dynamicznej na stronę?

A. style="margin-bottom: 0cm;"><img>

B. <object>

C. style="margin-bottom: 0cm;"><embed>

D. <strike>

Wybór odpowiedzi 1, 3 lub 4 może wydawać się zrozumiały, jednak każdy z tych znaczników ma swoje specyficzne zastosowanie i może być użyty do integrowania grafik dynamicznych. Element <img> jest jednym z najbardziej powszechnie używanych znaczników do wyświetlania obrazów, zarówno statycznych, jak i dynamicznych, takich jak animacje w formacie GIF. Odpowiedź 3, <embed>, umożliwia osadzenie multimediów, takich jak wideo czy animacje Flash, a odpowiedź 4, <object>, jest elastycznym elementem, który może wyświetlać różne typy mediów, w tym grafiki i aplikacje interaktywne. Wybierając te odpowiedzi, można dojść do błędnego wniosku, że są one nieodpowiednie, gdyż wszystkie one wspierają umieszczanie mediów na stronie. Typowym błędem myślowym jest mylenie stylizacji tekstu z funkcjonalnością mediów, co prowadzi do niewłaściwego korzystania z semantyki HTML. Zrozumienie różnic między tymi znacznikami i ich zastosowaniem jest kluczowe dla efektywnego tworzenia stron internetowych oraz ich dostępności dla użytkowników.

Pytanie 35

Który z przedstawionych obrazów ma zastosowany poniższy styl CSS?

img {
    padding: 5px;
    border: 1px solid grey;
    border-radius: 10px;
}

A. A.

B. B.

C. C.

D. D.

Stylizacja obrazów za pomocą CSS jest kluczowym aspektem w projektowaniu stron internetowych, ponieważ wpływa na estetykę i funkcjonalność interfejsu użytkownika. Wybierając nieodpowiednią odpowiedź, można nie uwzględnić, jak różne właściwości styli wpływają na wygląd elementu. Na przykład, pomijając właściwość padding, można nie zapewnić odpowiedniej przestrzeni wokół obrazu, co skutkuje mniej czytelnym wyglądem. Użycie border bez zrozumienia jego zastosowania może prowadzić do niekompatybilności wizualnej z resztą interfejsu, ponieważ zbyt gruba lub kontrastowa ramka może odciągać uwagę użytkownika. Border-radius to kolejna kluczowa właściwość często pomijana w projektach. Brak zaokrąglenia rogów może sprawić, że elementy będą wydawały się surowe i nieprzystępne. Pominięcie tych szczegółów może również wpłynąć na responsywność i dostępność strony, ponieważ nowe standardy UX/UI kładą duży nacisk na miękkie krawędzie i przestrzeń wokół wizualnych komponentów. Dlatego zrozumienie tych koncepcji jest niezbędne do skutecznego projektowania estetycznych i funkcjonalnych stron internetowych. Właściwe zastosowanie CSS pozwala na tworzenie spójnych wizualnie i przyjaznych dla użytkownika projektów.

Pytanie 36

Kod CSS można włączyć do dokumentu HTML, używając znacznika

A. <body>

B. <meta>

C. <head>

D. <style>

Wybór znaczników <head>, <meta> lub <body> jako miejsca do umieszczania kodu CSS jest nieprawidłowy z kilku powodów. Znacznik <head> jest przestrzenią przeznaczoną do przechowywania metadanych i odniesień do zasobów zewnętrznych, takich jak pliki CSS, a nie do bezpośredniego osadzania stylów. Chociaż można w nim umieszczać inne znaczniki, takie jak <style>, nie jest to jego podstawowe przeznaczenie. Znacznik <meta> służy do definiowania metadanych dokumentu, takich jak zestaw znaków, informacje o autorze czy opis strony, co również nie ma związku z osadzaniem stylów CSS. Z tego powodu umieszczanie kodu CSS w <meta> jest nieodpowiednie. Znacznik <body> jest przeznaczony do zawartości strony, która ma być wyświetlana użytkownikowi, a nie do definiowania stylów. Umieszczenie kodu CSS w <body> może prowadzić do chaosu w organizacji kodu oraz obniżenia wydajności, gdyż przeglądarki muszą analizować style po renderowaniu treści. Kluczowe błędy myślowe w takich wyborach wynikają z nieporozumienia na temat funkcji poszczególnych znaczników HTML oraz ich roli w renderowaniu strony internetowej. Właściwe stosowanie znaczników i standardów webowych jest fundamentem efektywnego projektowania stron, co podkreśla znaczenie edukacji w tym zakresie.

Pytanie 37

Użycie standardu ISO-8859-2 ma na celu zapewnienie prawidłowego wyświetlania

A. polskich znaków, takich jak: ś, ć, ń, ó, ą

B. znaków zarezerwowanych dla języka opisu strony

C. symboli matematycznych

D. specjalnych znaków dla języka kodowania strony

Kodowanie w standardzie ISO-8859-2, zwane również Latin-2, zostało zaprojektowane, aby wspierać wyświetlanie znaków z alfabetów używanych w Europie Środkowo-Wschodniej. Jest to szczególnie istotne w kontekście języka polskiego, który wymaga specyficznych znaków diakrytycznych, takich jak ś, ć, ń, ó oraz ą. Standard ten obejmuje 256 znaków, z czego pierwsze 128 jest zgodne z ASCII, natomiast pozostałe 128 to znaki specyficzne dla danego języka. Dzięki temu, w aplikacjach internetowych oraz w systemach operacyjnych, możliwe jest poprawne wyświetlanie tekstów w języku polskim, co wpływa na jakość komunikacji i użyteczność treści. Przykładowo, w dokumentach HTML, użycie deklaracji charset='ISO-8859-2' zapewnia, że przeglądarki internetowe prawidłowo interpretują znaki, co jest kluczowe dla zachowania czytelności i poprawności tekstu. Zgodność z tym standardem jest także istotna w kontekście wymiany danych między różnymi systemami, aby uniknąć problemów związanych z kodowaniem i dekodowaniem tekstu.

Pytanie 38

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 1

B. Pole 2

C. Pole 4

D. Pole 3

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 39

Który z poniższych znaczników HTML można wykorzystać do stworzenia struktury witryny internetowej?

A. <em>

B. <input>

C. <mark>

D. <aside>

<aside> to znacznik, który dodaje coś ekstra do treści głównej na stronie, jak np. informacje poboczne. Używanie go jest zgodne z zasadami HTML5, które promują sensowne budowanie dokumentów. Możesz go używać np. do wyróżniania sekcji z informacjami o autorze lub linkami do innych artykułów. Dzięki temu, że stosujesz semantyczne znaczniki jak <aside>, twoje treści stają się lepiej zrozumiałe dla użytkowników. Co więcej, to też polepsza dostępność strony dla osób korzystających z technologii wspomagających, jak czytniki ekranu. Dobrze zastosowane <aside> ułatwia organizację treści, co pozytywnie wpływa na SEO, bo wyszukiwarki łatwiej rozumieją strukturę strony. A i tak w ogóle, używanie semantycznych znaczników pozwala utrzymać kod w lepszej formie, co ważne, zwłaszcza przy pracy w zespołach nad większymi projektami.

Pytanie 40

W programie Audacity, podczas edytowania dźwięku pozyskanego z płyty analogowej, konieczne jest usunięcie pojedynczych trzasków typowych dla płyt winylowych. Jakie narzędzie jest do tego celu przeznaczone?

A. Obwiednia (Envelope)

B. Normalizuj (Normalize)

C. Usuwanie stukotu (Click Removal)

D. Redukcja szumu (Noise Reduction)

Odpowiedź 'Usuwanie stukotu (Click Removal)' jest poprawna, ponieważ narzędzie to jest specjalnie zaprojektowane do eliminowania niepożądanych dźwięków, takich jak trzaski i kliknięcia, które często występują na nagraniach pochodzących z płyt winylowych. Proces ten opiera się na analizie sygnału audio, identyfikując charakterystyczne wzorce związane z trzaskami, a następnie ich usuwaniu bez wpływania na jakość dźwięku pozostałej części nagrania. W praktyce, użytkownicy Audacity mogą z łatwością zaznaczyć fragmenty dźwięku i zastosować to narzędzie, co pozwala na precyzyjne i efektywne usuwanie zakłóceń. Ponadto, dobre praktyki w obróbce audio zalecają przeprowadzanie testów na różnych ustawieniach narzędzia, co pomaga w uzyskaniu optymalnych rezultatów. Warto również wspomnieć, że podczas pracy z analogowymi źródłami dźwięku, usuwanie stukotu powinno być częścią szerszego procesu poprawy jakości dźwięku, który może obejmować także inne techniki, takie jak normalizacja poziomów czy redukcja szumów, co pozwala na uzyskanie czystszego i bardziej profesjonalnego brzmienia nagrania.

Rozpocznij nowy egzamin

Powrót do strony głównej