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: 19 czerwca 2026 13:45
Data zakończenia: 19 czerwca 2026 14:24

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

Gdzie w dokumencie HTML można umieścić kod JavaScript?

A. tylko w <body>, w znaczniku <java>

B. w <head> i <body>, w znaczniku <java>

C. tylko w <head>, w znaczniku <script>

D. w <head> i <body>, w znaczniku <script>

Kod JavaScript umieszcza się w znaczniku <script>, który można wstawić zarówno w <head>, jak i w <body>. Dlatego poprawne jest: w <head> i <body>, w znaczniku <script>.

Pytanie 2

Barwy reprezentowane graficznie na stożku (barwa, nasycenie, jasność) uzyskuje się w modelu:

A. CIEXYZ

B. HSV

C. RGB

D. CMYK

Model HSV opisuje kolor trzema parametrami: barwą (Hue), nasyceniem (Saturation) i jasnością (Value). Graficznie przedstawia się go jako stożek (lub walec): kąt to barwa, odległość od osi to nasycenie, a wysokość to jasność. Taki układ jest intuicyjny dla człowieka. Dlatego barwy na stożku reprezentuje model HSV.

Pytanie 3

Który zapis w HTML deklaruje kodowanie znaków dokumentu?

<meta charset="UTF-8">

<meta encoding="UTF-8">

<charset="UTF-8">

<encoding="UTF-8">

Kodowanie znaków dokumentu deklaruje się znacznikiem <meta charset="UTF-8">, umieszczanym na początku sekcji <head>. Informuje on przeglądarkę, jak interpretować bajty tekstu - UTF-8 obsługuje m.in. polskie znaki diakrytyczne, więc jego brak lub błędne kodowanie powoduje „krzaczki” zamiast ą, ę, ł. Atrybutem niosącym tę informację jest charset. Dlatego poprawny zapis to <meta charset="UTF-8">.

Pytanie 4

W CSS, aby zastosować efekt przekreślenia, a także podkreślenia dolnego lub górnego w tekście, należy użyć

A. text-decoration

B. text-align

C. text-transform

D. text-indent

Odpowiedź 'text-decoration' jest prawidłowa, ponieważ ta właściwość CSS umożliwia dodawanie różnych efektów dekoracyjnych do tekstu, takich jak przekreślenie, podkreślenie oraz nadkreślenie. Przykładowo, aby przekreślić tekst, możesz użyć następującego kodu: 'text-decoration: line-through;'. Z kolei dla podkreślenia tekstu zastosujesz 'text-decoration: underline;'. W kontekście standardów CSS3, 'text-decoration' ma na celu nie tylko estetykę, ale także poprawę czytelności, co jest kluczowe w projektowaniu responsywnych i dostępnych stron internetowych. Warto również pamiętać o dobrych praktykach, takich jak unikanie nadmiernego stosowania dekoracji, które mogą odwracać uwagę od treści. W praktyce, kontrolowanie wyglądu tekstu za pomocą 'text-decoration' pozwala na tworzenie bardziej zróżnicowanych i atrakcyjnych interfejsów użytkownika, co w efekcie może zwiększyć zaangażowanie odwiedzających stronę.

Pytanie 5

Którego znacznika użyć, aby utworzyć pole hasła (tekst maskowany kropkami)?

<form input type="password">

<input type="password">

<form="password" type="password">

<input name="password">

Pole hasła (maskujące wpisywany tekst) tworzy <input type="password"> - atrybut type decyduje o rodzaju pola. Dlatego poprawny jest <input type="password">.

Pytanie 6

Po wykonaniu fragmentu kodu HTML i JavaScript na stronie zostanie wyświetlony obraz z pliku

<img id="obraz" src="kol1.jpg">
<button id="przycisk">Przycisk</button>

<script>
    document.getElementById("obraz").src = "kol2.jpg";
</script>

A. kol1.jpg

B. kol2.jpg

C. kol1.jpg, który może zostać zmieniony na kol2.jpg po wciśnięciu przycisku.

D. kol2.jpg, który może zostać zmieniony na kol1.jpg po wciśnięciu przycisku.

Dobra robota, zgadłeś! W tym skrypcie JavaScript używamy metody getElementById, żeby znaleźć obraz na stronie o identyfikatorze 'obraz'. Później zmieniamy jego atrybut 'src' na 'kol2.jpg'. To znaczy, że po uruchomieniu tego kodu wyświetli się właśnie ten obrazek. Fajnie jest to zrozumieć, bo pokazuje, jak można dynamicznie zmieniać rzeczy na stronie za pomocą JavaScript. Takie umiejętności są super ważne, gdy tworzymy interaktywne strony, które reagują na to, co robi użytkownik. Na przykład, można by zmienić obraz, gdy ktoś najedzie na niego myszką albo kliknie przycisk. Pamiętaj też, żeby zawsze pomyśleć o dostępności – jeśli obraz ma jakieś ważne informacje, warto dodać alternatywne opisy dla osób korzystających z czytników ekranu.

Pytanie 7

W kodzie CSS stworzono cztery klasy stylizacji, które zostały wykorzystane do formatowania akapitów. Efekt widoczny na ilustracji uzyskano dzięki zastosowaniu klasy o nazwie

A. format1

B. format2

C. format4

D. format3

Odpowiedź format2 jest poprawna, ponieważ stylizacja zastosowana do tekstu na obrazie to line-through, co oznacza przekreślenie. W CSS właściwość text-decoration pozwala na dodawanie różnych dekoracji do tekstu, takich jak underline (podkreślenie), overline (nadkreślenie) czy line-through (przekreślenie). Przekreślenie jest często używane do zaznaczania usuniętego tekstu lub do pokazywania zmian w dokumentach, co jest zgodne z dobrą praktyką w edytorach tekstu i aplikacjach do śledzenia zmian. W kodzie HTML klasy CSS są zazwyczaj stosowane poprzez dodanie atrybutu class do odpowiedniego elementu. Użycie klasy format2 w kodzie HTML wyglądałoby jak <p class='format2'>. Wielu projektantów korzysta z takich dekoracji, aby poprawić czytelność i funkcjonalność stron internetowych, zapewniając użytkownikom intuicyjne oznaczenia wizualne. Ważne jest także użycie semantycznego HTML, co w połączeniu z odpowiednimi stylami CSS pozwala tworzyć dostępne dla użytkowników strony internetowe zgodne ze standardami W3C.

Pytanie 8

Którego znacznika HTML NIE można użyć do wstawienia grafiki (dynamicznej) na stronę?

<strike>

<img>

<object>

<embed>

Znacznik <strike> służył do PRZEKREŚLANIA tekstu (dziś przestarzały, zastąpiony przez <del>/<s>) - nie ma nic wspólnego z osadzaniem grafiki. Dlatego do wstawienia obrazu NIE można użyć <strike>.

Pytanie 9

Aby osiągnąć efekt przedstawiony na ilustracji, w kodzie HTML należy zastosować znacznik skrótu <abbr> z atrybutem

A. dfn

B. name

C. title

D. alt

Znacznik <abbr> w HTML służy do opisywania skrótów i akronimów. Atrybut title jest kluczowy, ponieważ dostarcza rozwinięcie skrótu jako podpowiedź tekstową, która pojawia się, gdy użytkownik najedzie kursorem na element. Jest to zgodne z dobrymi praktykami dostępności, umożliwiając użytkownikom lepsze zrozumienie treści. Przykładowo, kod <abbr title='inżynier'>inz.</abbr> spowoduje, że po najechaniu kursorem na skrót 'inz.', pojawi się rozwinięcie 'inżynier'. Takie podejście jest szczególnie istotne w przypadku dokumentów technicznych czy naukowych, gdzie użycie skrótów jest powszechne a pełne rozwinięcie może być niezbędne dla pełnego zrozumienia treści. Atrybut title jest również używany w innych znacznikach HTML, np. <img> do opisania obrazów, co wzbogaca semantykę strony. Zastosowanie <abbr> z atrybutem title wspiera również działanie technologii wspomagających, takich jak czytniki ekranowe, które mogą odczytać pełne rozwinięcie skrótu, podnosząc poziom dostępności strony.

Pytanie 10

W instrukcjach mających na celu odtwarzanie dźwięku jako muzyki tła na stronie internetowej NIE stosuje się atrybutu

A. balance="-10"

B. href="C:/100.wav"

C. volume="-100"

D. loop="10"

Odpowiedź href="C:/100.wav" jest prawidłowa, ponieważ atrybut href jest używany w kontekście linków hipertekstowych, a nie do odtwarzania dźwięku na stronie. W przypadku odtwarzania dźwięku w HTML, odpowiednie tagi to <audio> oraz związane z nimi atrybuty, takie jak src, controls, autoplay, loop, itp. Aby zrealizować odtwarzanie dźwięku jako podkładu muzycznego, używamy tagu <audio src="C:/100.wav" autoplay loop></audio>, co zapewnia, że dźwięk z pliku .wav będzie odtwarzany automatycznie i w pętli. Zgodnie z dobrymi praktykami, pliki audio powinny być dostępne na serwerze i wskazywane względem ich lokalizacji w sieci, co wspiera lepszą wydajność oraz dostępność. Użycie atrybutu href w tym kontekście jest niewłaściwe i może prowadzić do niepoprawnego działania strony, ponieważ przeglądarki nie interpretują tego w kontekście dźwięku. Przykładowo, zamiast href, należy zastosować odpowiednie atrybuty w tagu <audio> zgodnie z aktualnymi standardami HTML5.

Pytanie 11

Narzędzie używane do organizowania i przedstawiania danych z wielu wpisów w celu ich wydruku lub dystrybucji to

A. makropolecenie

B. raport

C. kwerenda

D. formularz

Raport to taki pomocny zestaw danych, który pozwala na analizę i prezentację informacji z różnych źródeł. Jak myślisz, to naprawdę kluczowe narzędzie, jeśli chodzi o zarządzanie danymi i bazami danych. Dzięki raportom możemy fajnie zobaczyć wyniki sprzedaży czy inne dane, które z różnych miejsc się zbiera. To ułatwia podejmowanie decyzji, bo wszystko jest w jednym dokumencie. Na przykład, kiedy porównujemy wyniki z różnych okresów, to od razu widzimy, co działa, a co nie. Systemy takie jak Microsoft SQL Server Reporting Services czy IBM Cognos pomagają w tworzeniu tych raportów, a nawet pozwalają na ich ładne formatowanie. Super sprawa, bo można je dopasować do własnych potrzeb, co z kolei czyni je bardziej użytecznymi. W branży IT, raportowanie jest podstawą zarządzania usługami, a także w analizach SWOT. Przemyślane podsumowanie danych naprawdę pomaga w ocenie sytuacji firmy.

Pytanie 12

Który z podanych znaczników HTML nie jest używany do formatowania tekstu?

A. <sub>

B. <em>

C. <div>

D. <strong>

<div> jest znacznikiem HTML, który służy do grupowania elementów na stronie, co ułatwia ich stylizację i manipulację w CSS oraz JavaScript. W przeciwieństwie do znaczników takich jak <em>, <sub> i <strong>, które mają konkretne zastosowania związane z formatowaniem tekstu, <div> pełni rolę kontenera, co czyni go bardziej uniwersalnym narzędziem do strukturyzacji treści. Przykładowo, można użyć <div> do utworzenia sekcji nagłówka, stopki lub bocznego panelu na stronie. Zgodnie z standardami W3C, <div> jest elementem blokowym, co oznacza, że zajmuje całą szerokość dostępną w swoim rodzicu. W praktyce, <div> pozwala na efektywne zarządzanie układem strony i jest często stosowany w połączeniu z CSS w celu uzyskania pożądanej prezentacji wizualnej. Przykład zastosowania: <div class='container'>...</div> może być użyty do zawarcia innych elementów jak <h1>, <p> czy <img>. Dzięki temu można łatwo manipulować stylem i zachowaniem tych elementów, co czyni <div> kluczowym narzędziem w nowoczesnym web designie.

Pytanie 13

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 prawidłowy, po kliknięciu w odnośnik otworzy się strona pod adresem "hobby"

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

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

W znaczniku HTML a z atrybutem href='#hobby' zastosowano tzw. kotwicę fragmentu strony. Jest to popularna technika używana do bezpośredniego przenoszenia użytkownika do określonej części strony internetowej. Znak hash (#) wskazuje, że link odwołuje się do elementu o identyfikatorze hobby w obrębie tej samej strony. Tego rodzaju odnośniki są szeroko stosowane w długich dokumentach gdzie szybka nawigacja między sekcjami poprawia doświadczenie użytkownika. Aby kod działał poprawnie na stronie musi istnieć element z atrybutem id='hobby'. To działanie jest zgodne ze standardami HTML i jest zalecane w projektowaniu dostępnych i przyjaznych dla użytkownika aplikacji internetowych. Warto także pamiętać o stosowaniu opisowych identyfikatorów co ułatwia czytelność kodu i jego późniejsze utrzymanie. Praktyka ta jest zgodna z najlepszymi praktykami w zakresie użyteczności i dostępności stron internetowych co może również wpłynąć pozytywnie na SEO poprzez poprawę struktury strony.

Pytanie 14

Aby obraz umieszczony na stronie internetowej mógł automatycznie dostosowywać się do rozmiaru ekranu, na którym jest prezentowana strona, trzeba

A. jego szerokość ustawić w wartościach procentowych

B. nie zmieniać obu jego wymiarów za pomocą stylów CSS

C. jeden z jego wymiarów określić w pikselach

D. oba jego wymiary ustawić w pikselach

Ustawienie szerokości obrazu w wartościach procentowych jest kluczowe dla zapewnienia responsywności strony internetowej. Gdy szerokość obrazu wyrażona jest w procentach, automatycznie dostosowuje się ona do szerokości kontenera, w którym się znajduje. To oznacza, że obraz będzie skalował się do rozmiaru ekranu użytkownika, co jest szczególnie ważne w kontekście urządzeń mobilnych oraz różnych rozdzielczości ekranów. Przykładem może być użycie stylu CSS: `img { width: 100%; height: auto; }`, co pozwala na zachowanie proporcji obrazu, jednocześnie dostosowując jego szerokość do kontenera. Tego rodzaju praktyki są zgodne z zasadami responsywnego projektowania (Responsive Web Design) i są zalecane przez standardy W3C. Dzięki takim rozwiązaniom użytkownik zyskuje lepsze doświadczenie, a strona wygląda estetycznie na różnych urządzeniach. Dobrą praktyką jest również testowanie strony na różnych ekranach, aby upewnić się, że wszystkie obrazy i inne elementy dostosowują się do zmieniających się warunków wyświetlania.

Pytanie 15

Parametr face znacznika <font> jest używany do wskazania

A. nazwa czcionki

B. rozmiaru czcionki

C. efektów czcionki

D. koloru czcionki

Parametr face znacznika <font> w HTML służy do określenia nazwy czcionki, co jest kluczowym elementem stylizacji tekstu na stronach internetowych. Umożliwia on programistom i projektantom graficznym wskazanie konkretnej czcionki, która ma być używana do wyświetlania tekstu, co wpływa na jego czytelność oraz estetykę. Przykładowo, aby ustawić czcionkę na 'Arial', użyjemy znacznika <font face='Arial'>tekst</font>. Warto zauważyć, że ten parametr nie jest już zalecany w nowoczesnym HTML, ponieważ stylizacje powinny być realizowane za pomocą CSS, które oferuje znacznie większe możliwości i elastyczność. W CSS można określić czcionkę na przykład w ten sposób: p { font-family: 'Arial', sans-serif; }. Zgodnie z wytycznymi W3C, stosowanie CSS zamiast znaczników HTML dla stylizacji jest najlepszą praktyką, ponieważ pozwala na oddzielenie treści od prezentacji. W kontekście SEO, właściwe użycie czcionek i ich nazw może wpływać na wygodę użytkowników oraz ogólną estetykę strony, co pośrednio może przyczynić się do lepszego rankingu w wyszukiwarkach. Warto jednak pamiętać, że niektóre czcionki mogą nie być zainstalowane na wszystkich systemach, dlatego rekomenduje się używanie czcionek webowych oraz zabezpieczeń w postaci alternatyw w CSS.

Pytanie 16

Jakie oprogramowanie służy do obróbki dźwięku?

A. Audacity

B. Brasero

C. RealPlayer

D. Winamp

Audacity jest wszechstronnym, darmowym programem typu open source, który służy do edycji dźwięku. Jego funkcjonalność obejmuje nagrywanie, edytowanie i przetwarzanie dźwięku w różnych formatach. Program ten jest często wykorzystywany przez muzyków, podcasterów oraz profesjonalistów zajmujących się dźwiękiem, co czyni go niezwykle popularnym w branży. Audacity obsługuje wiele efektów dźwiękowych, takich jak kompresja, reverb oraz equalizacja, co pozwala na zaawansowaną obróbkę nagrań. Dzięki intuicyjnemu interfejsowi użytkownika, użytkownicy mogą łatwo nawigować w programie oraz korzystać z funkcji takich jak wielościeżkowe nagrywanie i edytowanie. Warto również wspomnieć, że Audacity działa na różnych systemach operacyjnych, w tym Windows, macOS oraz Linux, co zapewnia dostępność dla szerszego kręgu użytkowników. Użytkownicy mogą również korzystać z dodatkowych wtyczek, które rozszerzają możliwości programu, co jest zgodne z najlepszymi praktykami w branży, gdzie elastyczność i rozszerzalność oprogramowania są kluczowe dla profesjonalnych zastosowań.

Pytanie 17

W CSS zdefiniowano styl dla pola edycji. Taki obszar będzie miał jasnozielone tło

input:focus { background-color: LightGreen; }

A. gdy zostanie na niego najechane kursorem myszy bez kliknięcia

B. w każdej sytuacji

C. jeśli jest to pierwsze wystąpienie tego elementu w dokumencie

D. po kliknięciu myszą w celu wprowadzenia tekstu

Pozostałe odpowiedzi opierają się na błędnym zrozumieniu zastosowania pseudoklas w języku CSS. Pseudoklasa :first-of-type, która mogłaby sugerować pierwsze wystąpienie znacznika w dokumencie, nie odnosi się do stanu aktywności pola edycyjnego. Stylizowanie pierwszego wystąpienia nie ma związku z interakcją użytkownika, a jedynie z pozycją elementu w strukturze dokumentu HTML. Kolejny błąd pojawia się przy założeniu, że zmiana koloru tła nastąpi gdy element zostanie wskazany kursorem myszy. W CSS taka interakcja jest obsługiwana przez pseudoklasę :hover, która stosuje się do elementów, nad którymi znajduje się wskaźnik myszy, ale nie obejmuje stanu aktywnego fokusu potrzebnego do edycji. Ostatnia błędna koncepcja dotyczy twierdzenia, że styl jest stosowany w każdym przypadku. To stwierdzenie ignoruje specyfikę selektorów CSS, które wymagają określonych warunków - w tym przypadku aktywnego fokusu elementu. Zrozumienie różnic między pseudoklasami :focus i :hover oraz znajomość ich zastosowań w projektowaniu interaktywnych interfejsów webowych jest kluczowe dla skutecznego stosowania CSS w praktyce. Poprawna wiedza na temat specyficznych zastosowań tych pseudoklas wpływa na jakość doświadczenia użytkownika i integrację funkcjonalności z estetyką projektu.

Pytanie 18

W instrukcjach, których celem jest odtwarzanie dźwięku na stronie internetowej jako tła muzycznego, nie stosuje się atrybutu

A. balance="10"

B. href="c:/100.wav"

C. loop="10"

D. volume="-100"

Atrybut href w kontekście dźwięku na stronie internetowej jest używany w tagu <audio> lub <source>, aby wskazać lokalizację pliku audio. Pliki dźwiękowe, które mają być odtwarzane w przeglądarkach, powinny być dostępne pod adresem URL, a nie w lokalnym systemie plików, jak w przypadku href='c:/100.wav'. Standardy W3C oraz HTML5 określają, że pliki audio powinny być dostępne przez HTTP lub HTTPS, co pozwala na ich odtwarzanie zdalnie. Jeśli plik audio znajduje się na lokalnym dysku, nie będzie on dostępny dla użytkowników odwiedzających stronę poprzez Internet. Przykładem poprawnego użycia atrybutu href jest wskazanie pliku dźwiękowego, który jest hostowany na serwerze, na przykład href='http://example.com/audio/track1.mp3'. Ponadto, do kontrolowania odtwarzania dźwięku można wykorzystać inne atrybuty jak autoplay, loop, czy controls, które pozwalają na lepsze zarządzanie interakcją użytkownika z muzyką na stronie.

Pytanie 19

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

A. użycie zbyt wielu kolorów na stronie

B. zbyt długą treść akapitu <p>

C. brak zamknięcia znacznika <p>

D. zbyt wolne ładowanie strony

Walidator HTML sprawdza zgodność kodu ze standardem i zgłasza błędy składni. Typowy komunikat dotyczy niedomkniętego znacznika - np. otwartego <p> bez odpowiadającego </p>, złego zagnieżdżenia lub nieprawidłowego atrybutu. Dlatego komunikat walidatora może wskazywać na brak zamknięcia znacznika <p>.

Pytanie 20

Którego znacznika użyć, aby wstawić na stronę obraz JPG?

<jpg>

<src>

<img>

<table>

Obraz (np. JPG) wstawia się na stronę znacznikiem <img> z atrybutem src wskazującym plik. Dlatego do wstawienia obrazu służy <img>.

Pytanie 21

Który z protokołów umożliwia publikację strony internetowej na serwerze?

A. NNTP

B. SMTP

C. FTP

D. ICMP

FTP, czyli File Transfer Protocol, to taki standard, który pozwala na przesyłanie plików między komputerami w sieci. Jest to dość ważne, bo bez FTP nie moglibyśmy publikować stron w internecie. Dzięki temu protokołowi można wysyłać różne pliki, jak HTML, CSS, JavaScript czy nawet grafiki i filmy, na serwery WWW. Z perspektywy praktycznej, to przy publikacji nowej strony wchodzi w grę użycie klienta FTP, na przykład FileZilla. Łączysz się z serwerem, logujesz się swoimi danymi i przesyłasz pliki do odpowiednich folderów. No i nie zapomnij o portach - standardowy port dla FTP to 21. A jeśli zależy Ci na bezpieczeństwie, warto pomyśleć o SFTP albo FTPS, bo to też istotne w kontekście ochrony danych. Jak dla mnie, dobrze jest znać te praktyki, żeby nie martwić się o swoje pliki podczas przesyłania.

Pytanie 22

Selektor CSS a:link {color:red} użyty w kaskadowych arkuszach stylów określa

A. pseudoelement

B. klasę

C. pseudoklasę

D. identyfikator

Zdecydowanie coś poszło nie tak w Twojej odpowiedzi, bo wygląda na to, że nie do końca rozumiesz podstawowe pojęcia związane z CSS. Klasy i identyfikatory, używane do grupowania elementów i nadawania im stylów, to zupełnie inna sprawa niż pseudoklasy. Klasy w CSS definiujesz przez kropkę, jak na przykład .nazwa-klasy, a pseudoklasy zawsze zaczynają się od dwukropka. Klasy są super do stylizacji większej grupy elementów, podczas gdy identyfikatory są unikalne i służą do stylizacji pojedynczych elementów, zaczynają się od hasha (#). Pseudoelementy, które mogą być mylone z pseudoklasami, pomagają stylizować tylko część elementów, jak na przykład ::before lub ::after, co pozwala na dodawanie treści przed lub po danym elemencie. Rozróżnienie tych pojęć jest naprawdę kluczowe, gdy chcesz dobrze zrozumieć CSS. Często zdarza się, że ludzie mylą te pojęcia, co prowadzi do chaosu przy stylizacji stron. Żeby uniknąć tych nieporozumień, warto przejrzeć dokumentację CSS i trochę poćwiczyć z różnymi selektorami. Z mojej perspektywy, jest to najlepszy sposób, by zrozumieć jak to wszystko działa i jakie są różnice między tymi pojęciami.

Pytanie 23

Którego znacznika użyć, aby zgrupować elementy w jeden BLOK?

<p>

<div>

<span>

<param>

Znacznik <div> to blokowy pojemnik bez własnego znaczenia, służący do grupowania innych elementów w jeden BLOK (sekcję), który potem łatwo stylować lub pozycjonować. Dlatego do grupowania w blok służy <div>.

Pytanie 24

Znacznik <pre> </pre> służy do prezentacji

A. znaku przekreślenia

B. znaku wielokropka

C. treści polską czcionką

D. treści czcionką o stałej szerokości

Znacznik <pre> </pre> jest używany w HTML do wyświetlania tekstu w formacie preformatowanym, co oznacza, że zawartość wewnątrz tego znacznika jest wyświetlana czcionką o stałej szerokości, gdzie wszystkie białe znaki, w tym spacje i nowe linie, są zachowywane tak, jak zostały wpisane. To sprawia, że jest on niezwykle przydatny przy prezentacji kodu źródłowego, skryptów oraz innych danych, gdzie zachowanie dokładnego formatowania jest kluczowe. Przykładem może być kod HTML, JavaScript czy CSS, który można umieścić wewnątrz znacznika <pre> w celu poprawienia czytelności i umożliwienia użytkownikom łatwego skopiowania. Ponadto, znaczniki <pre> są często stosowane w dokumentacji technicznej, gdzie precyzyjne odwzorowanie formatowania jest istotne dla zrozumienia. Ważne jest również, aby zwrócić uwagę na to, że domyślnie tekst w elemencie <pre> nie jest łamany, co pozwala zachować jego oryginalny kształt i układ.

Pytanie 25

Podaj nazwę Systemu Zarządzania Treścią, którego logo jest widoczne na zamieszczonym rysunku?

A. Drupal

B. MediaWiki

C. Joomla!

D. WordPress

Joomla! to popularny system zarządzania treścią CMS który jest szeroko stosowany do tworzenia stron internetowych aplikacji online i portali. Dzięki swojej elastyczności Joomla! jest wybierany przez wiele firm i organizacji do zarządzania treścią online. System ten charakteryzuje się modułową architekturą która umożliwia łatwe rozszerzanie jego funkcjonalności za pomocą komponentów modułów i wtyczek. Jednym z głównych atutów Joomla! jest intuicyjny interfejs użytkownika który umożliwia zarządzanie treścią bez potrzeby głębokiej wiedzy technicznej. Dodatkowo Joomla! wspiera wiele języków co czyni go idealnym wyborem dla międzynarodowych organizacji. Warto również zaznaczyć że Joomla! jest open-source co oznacza że jest rozwijany przez społeczność programistów z całego świata którzy regularnie aktualizują i ulepszają oprogramowanie. Wybranie Joomla! jako CMS pozwala na korzystanie z dużej liczby szablonów i dodatków które umożliwiają personalizację witryny zgodnie z wymaganiami klienta. Dzięki solidnej bazie użytkowników i deweloperów Joomla! oferuje wsparcie techniczne i dokumentację która ułatwia rozwiązywanie problemów. W praktyce Joomla! jest wykorzystywany przez różnorodne witryny od małych blogów po rozbudowane platformy e-commerce co potwierdza jego wszechstronność i skuteczność.

Pytanie 26

Co spowoduje zapis

h2 { background-color: green; }

A. zielone tło całej strony

B. zieloną czcionkę nagłówków drugiego poziomu

C. zieloną czcionkę wszystkich nagłówków

D. zielone tło nagłówków drugiego poziomu (<h2>)

Reguła h2 { background-color: green; } ustawia zielone TŁO elementom <h2>, czyli nagłówkom drugiego poziomu. Selektor h2 ogranicza działanie tylko do tych nagłówków. Dlatego daje zielone tło nagłówków <h2>.

Pytanie 27

Który atrybut <img> trzeba uzupełnić, aby strona była dostępna dla osób NIEWIDOMYCH?

text

alt

style

src

Atrybut alt znacznika <img> zawiera tekst alternatywny opisujący obraz. Czytniki ekranu odczytują go osobom niewidomym, dzięki czemu wiedzą one, co przedstawia grafika - to fundament dostępności (a11y), a także wartość dla SEO. Dlatego uzupełnić trzeba atrybut alt.

Pytanie 28

Które znaczniki HTML umożliwiają wyświetlenie tekstu w jednym wierszu na stronie, zakładając brak zdefiniowanego formatu CSS?

Dobre strony m o j e j  s t r o n y

A. <h3>Dobre strony </h3><h3 style="letter-spacing:3px">mojej strony</h3>

B. <p>Dobre strony </p><p style="letter-spacing:3px">mojej strony</p>

C. <div>Dobre strony </div><div style="letter-spacing:3px">mojej strony</div>

D. <span>Dobre strony </span><span style="letter-spacing:3px">mojej strony</span>

Elementy <h3> <p> i <div> są znacznikami HTML które domyślnie zachowują się jako elementy block-level co oznacza że każdy z nich zaczyna się w nowej linii i wprowadza przerwę przed i po sobie. Element <h3> jest używany do oznaczania nagłówków trzeciego poziomu co nadaje mu dodatkowego semantycznego znaczenia w strukturze dokumentu ale nie jest odpowiedni do użycia tam gdzie wymagane jest wyświetlenie tekstu w jednym wierszu. Podobnie <p> jest przeznaczony do oznaczania akapitów tekstu i dlatego również wprowadza przerwy przed i po swoim zawartości. Znacznik <div> jest uniwersalnym kontenerem w HTML używanym do grupowania elementów w celu stylizacji lub manipulacji za pomocą CSS i JavaScript ale także działa jako element block-level. Typowym błędem przy nauce HTML jest niezdawanie sobie sprawy z różnicy między elementami inline i block-level co prowadzi do problemów z układem strony gdy elementy block-level są stosowane tam gdzie potrzebny jest płynny układ w jednym wierszu. Zrozumienie i umiejętność właściwego zastosowania tych znaczników jest kluczowe dla każdej osoby zajmującej się profesjonalnie tworzeniem stron internetowych pozwalając na tworzenie bardziej intuicyjnych i estetycznych interfejsów użytkownika. Właściwe stosowanie elementów inline i block-level jest również istotne w kontekście responsywności i dostępności stron internetowych co ma kluczowe znaczenie we współczesnym środowisku webowym. Umiejętność rozróżniania i stosowania odpowiednich elementów w kodzie HTML jest kluczowym aspektem w tworzeniu wydajnych i semantycznie poprawnych stron internetowych które są zarówno estetyczne jak i funkcjonalne dla szerokiego grona użytkowników i urządzeń.

Pytanie 29

Reprezentacja znacznika HTML w formacie

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

A. jest poprawny, po kliknięciu w odnośnik otworzy się strona internetowa o URL "hobby"

B. jest błędny, w atrybucie href należy wpisać adres URL

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis znacznika HTML przedstawiony w pytaniu jest poprawny i spełnia standardy języka HTML. Użycie elementu <a> z atrybutem href i wartością #hobby oznacza, że użytkownik po kliknięciu w ten link zostanie przewinięty do sekcji na stronie, która ma przypisany identyfikator "hobby". Takie podejście jest zgodne z dobrymi praktykami w projektowaniu stron internetowych, umożliwiając tworzenie nawigacji wewnętrznej. Warto zaznaczyć, że użycie znaku hash (#) w atrybucie href wskazuje na lokalizację w obrębie tej samej strony. To jest powszechnie stosowane w przypadkach, gdy chcemy ułatwić użytkownikom dostęp do różnych sekcji na tej samej stronie, bez konieczności ładowania nowej strony. Przykładem zastosowania może być strona z długim artykułem, gdzie linki do poszczególnych nagłówków ułatwiają orientację czytelników. Oprócz tego, korzystając z takiej struktury, możemy również poprawić doświadczenia użytkowników oraz zwiększyć efektywność SEO, ponieważ wyszukiwarki są w stanie lepiej zrozumieć organizację treści na stronie.

Pytanie 30

Gdzie umieścić informacje o autorze, opisie i słowach kluczowych strony?

A. w <head>, w znaczniku <meta>

B. w <head>, w znaczniku <style>

C. w <body>, w znaczniku <html>

D. w <body>, w znaczniku <meta>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Informacje o autorze, opisie i słowach kluczowych to METADANE strony - umieszcza się je w sekcji <code><span class="code-text"><</span><span class="code-keyword">head</span><span class="code-text">></span></code> w znaczniku <code><span class="code-text"><</span><span class="code-keyword">meta</span><span class="code-text">></span></code> (np. <code><span class="code-text"><</span><span class="code-variable">meta</span> <span class="code-variable">name</span><span class="code-text">=</span><span class="code-string">"author"</span> <span class="code-text">.</span><span class="code-text">.</span><span class="code-text">.</span><span class="code-text">></span></code>). Dlatego należą do <code><span class="code-text"><</span><span class="code-keyword">head</span><span class="code-text">></span></code>, w <code><span class="code-text"><</span><span class="code-keyword">meta</span><span class="code-text">></span></code>.

Pytanie 31

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

A. <u>

B. <em>

C. <pre>

D. <strong>

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 32

W nagłówku dokumentu HTML umieszczono

<title>Strona miłośników psów</title>

Tekst ten pojawi się

A. w zawartości strony, na banerze

B. w zawartości strony, w pierwszym widocznym nagłówku

C. w polu adresowym, przy podanym adresie URL

D. na pasku tytułowym przeglądarki

Niektóre odpowiedzi, które nie dotyczą paska tytułu w przeglądarce, są błędne z kilku powodów. Na przykład, treść na banerze strony nie ma nic wspólnego z tagiem <title>, bo baner to tylko wizualna część strony. Tytuł strony nie znajdzie się na banerze, bo to całkiem inne miejsce. A i pole adresu, gdzie wpisujemy URL, służy tylko do nawigacji i nie pokazuje tytułu. Jak ktoś wpisuje adres, widzi tylko URL, a nie tag <title>. Oprócz tego, tytuł nie pojawia się w treści strony ani w głównym nagłówku (np. <h1>), bo jego głównym celem jest wyróżnienie strony i pomoc w SEO. Nagłówki odnoszą się do treści, a tytuł ma swoją funkcję. Dlatego ważne jest, żeby rozumieć rolę tagu <title>, bo to klucz do tworzenia estetycznych i funkcjonalnych stron.

Pytanie 33

W instrukcjach mających na celu odtwarzanie dźwięku na witrynie internetowej jako podkładu muzycznego nie stosuje się atrybutu

A. balance="-10"

B. loop="10"

C. volume="-100"

D. href="C:/100.wav">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 'href="C:/100.wav"' jest prawidłowa, ponieważ atrybut 'href' nie jest używany w kontekście odtwarzania dźwięku na stronie internetowej. Atrybut ten jest przeznaczony do definiowania hiperłączy w elementach, takich jak <a> (linki). W przypadku odtwarzania dźwięków na stronach internetowych, stosuje się atrybuty, takie jak 'src' w elemencie <audio> lub <embed>, które wskazują lokalizację pliku audio, który ma być odtwarzany. Dobre praktyki webowe zalecają korzystanie z elementu <audio>, który pozwala na kontrolowanie odtwarzania dźwięku przy pomocy takich atrybutów jak 'controls', 'autoplay', 'loop' itp. Na przykład, aby odtworzyć plik audio, można użyć znacznika <audio src="C:/100.wav" controls></audio>, co pozwala na interaktywne sterowanie odtwarzaniem. Zrozumienie różnicy między atrybutami i ich zastosowaniem w kontekście HTML jest kluczowe dla projektowania funkcjonalnych i dostępnych stron internetowych.

Pytanie 34

Do jakich zadań można wykorzystać program FileZilla?

A. sprawdzania poprawności strony internetowej

B. publikacji strony internetowej

C. kompilowania skryptu na stronie

D. analizowania skryptu na stronie

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
FileZilla to popularny klient FTP (File Transfer Protocol), który umożliwia przesyłanie plików między lokalnym komputerem a serwerem internetowym. Jego głównym zastosowaniem jest publikacja stron internetowych, co oznacza, że dzięki FileZilla można łatwo przenieść pliki HTML, CSS, JavaScript oraz inne zasoby na serwer, gdzie strona stanie się dostępna w Internecie. Przykładowo, jeśli stworzyłeś stronę w lokalnym środowisku, FileZilla pozwala na połączenie się z serwerem docelowym, a następnie na przesłanie wszystkich niezbędnych plików. Dobre praktyki branżowe zalecają również zarządzanie wersjami i regularne aktualizacje witryn, a FileZilla wspiera te procesy, umożliwiając łatwe synchronizowanie lokalnych katalogów z zawartością serwera. Dodatkowo, FileZilla obsługuje różne protokoły, takie jak SFTP czy FTPS, co zwiększa bezpieczeństwo transferu danych. Właściwe korzystanie z tego narzędzia jest kluczowe dla zapewnienia prawidłowego działania witryn oraz ich efektywnej publikacji.

Pytanie 35

Wskaźnik HTML, który umożliwia oznaczenie tekstu jako błędnego lub nieodpowiedniego poprzez jego przekreślenie, to jaki?

A. <u> </u>

B. <s> </s>

C. <b> </b>

D. <em> </em>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Element <s> w HTML służy do oznaczania tekstu jako nieaktualnego, błędnego albo już nieobowiązującego poprzez jego przekreślenie. Przeglądarka domyślnie renderuje taki fragment z poziomą linią przez środek tekstu. W praktyce używa się go np. przy cenach promocyjnych: <p>Stara cena: <s>199 zł</s> Nowa cena: 149 zł</p> albo przy korektach treści, kiedy chcemy pokazać, że coś zostało zmienione, ale wciąż widoczne jest, co było wcześniej. Warto wiedzieć, że historycznie do podobnych celów używano też <strike>, ale ten znacznik jest przestarzały (deprecated) w standardzie HTML i nie powinien być już stosowany. Moim zdaniem lepiej od razu przyzwyczajać się do poprawnych, aktualnych tagów, bo to się później opłaca przy większych projektach. W nowszych specyfikacjach HTML5 zaleca się stosowanie <s> właśnie do treści nieaktualnych, ale nie takich, które zostały formalnie wycofane – do tego jest znacznik <del>, który dodatkowo semantycznie wskazuje usunięcie fragmentu, często używany w systemach kontroli wersji treści. Z mojego doświadczenia warto rozróżniać <s>, <del> i <ins>, bo w połączeniu z CSS i narzędziami do dostępności (np. czytnikami ekranu) daje to lepszą semantykę dokumentu. Dobrą praktyką jest też nie nadużywać przekreśleń tylko dla „efektu wizualnego” – jeśli chcesz coś tylko wyróżnić graficznie, lepiej użyć CSS, a znaczników semantycznych używać zgodnie z ich przeznaczeniem.

Pytanie 36

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

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

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

C. <encoding="UTF-8">

D. <charset="UTF-8">

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

Pytanie 37

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

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

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

C. tr { background-color: Pink; }

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

Brak odpowiedzi na to pytanie.

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

Pytanie 38

Który zapis znacznika hr jest poprawny zgodnie z walidacją HTML5?

<hr>

</ hr>

</ hr />

</hr?>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
<code><span class="code-text"><</span><span class="code-keyword">hr</span><span class="code-text">></span></code> to element PUSTY (void), więc poprawny zapis to po prostu <code><span class="code-text"><</span><span class="code-keyword">hr</span><span class="code-text">></span></code> - bez znacznika zamykającego i bez ukośnika (w HTML5 <code><span class="code-text"><</span><span class="code-keyword">hr</span><span class="code-text">/></span></code> jest zbędny). Dlatego poprawny jest <code><span class="code-text"><</span><span class="code-keyword">hr</span><span class="code-text">></span></code>.

Pytanie 39

W CSS zapis

a[target="_blank"] {color: yellow;}

spowoduje, że tekst linków przybierze kolor żółty.

A. wszystkich linków.

B. linków, które otwierają się w nowej karcie.

C. linków, które otwierają się w tej samej karcie.

D. treści akapitu.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 'odnośników, które otwierają się w osobnej karcie' jest poprawna, ponieważ w CSS selektor 'a[target="_blank"]' odnosi się do elementów <a> (odnośników), które mają atrybut 'target' ustawiony na '_blank'. Oznacza to, że te odnośniki są zaprojektowane do otwierania linków w nowej karcie lub oknie przeglądarki. Przykład zastosowania: jeśli tworzymy stronę internetową z odnośnikami do zewnętrznych zasobów, użycie atrybutu 'target="_blank"' pozwala użytkownikom na zachowanie otwartej strony w przeglądarce. W CSS, kolor czcionki tych odnośników został ustawiony na żółty, co jest praktycznym podejściem do wyróżnienia ich w stosunku do innych linków. Warto również zauważyć, że stosowanie kolorów w kontekście dostępności jest istotne, dlatego dobór kolorów powinien być przemyślany, aby nie wpłynąć negatywnie na czytelność. Dobre praktyki obejmują również dodanie wskazówki do odnośnika, na przykład poprzez użycie atrybutu 'title', co jeszcze bardziej ułatwia użytkownikom zrozumienie, czego mogą się spodziewać po kliknięciu w link.

Pytanie 40

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

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

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

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

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

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

Brak odpowiedzi na to pytanie.

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

Rozpocznij nowy egzamin

Powrót do strony głównej