Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 13 czerwca 2026 18:56
Data zakończenia: 13 czerwca 2026 18:56

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

W jakim formacie powinien być zapisany obraz, aby mógł być wyświetlany na stronie internetowej z zachowaniem przezroczystości?

A. BMP

B. PNG

C. JPG

D. CDR

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format PNG (Portable Network Graphics) jest szeroko stosowany w sieci internetowej, ponieważ obsługuje przezroczystość, co jest kluczowe przy tworzeniu grafik, które mają być używane na stronach internetowych. Przezroczystość pozwala na nałożenie grafik na różne tła bez widocznych prostokątów czy kolorowych krawędzi, co znacznie poprawia estetykę oraz elastyczność projektów graficznych. PNG wykorzystuje kompresję bezstratną, co oznacza, że jakość obrazu nie ulega pogorszeniu podczas jego zapisywania, co jest istotne dla profesjonalnych projektów. Przykłady zastosowania formatu PNG obejmują ikony, logotypy oraz różnego rodzaju ilustracje, które muszą być wyświetlane na różnych tłach. W branży internetowej dobrym standardem jest używanie PNG do grafik wymagających przezroczystości, szczególnie w kontekście responsywnych projektów, gdzie różne elementy mogą mieć różne tła w zależności od urządzenia. Ponadto, PNG obsługuje kolor 24-bitowy oraz przezroczystość 8-bitową, co daje możliwość tworzenia bardziej złożonych efektów wizualnych. Zastosowanie tego formatu jest zgodne z dobrymi praktykami w projektowaniu stron, co czyni go preferowanym wyborem w wielu sytuacjach.

Pytanie 2

Znacznik <ins> w języku HTML jest używany do wskazania

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

B. tekstu o zmienionym formacie

C. cytowanego fragmentu tekstu

D. tekstu, który został dodany

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <ins> w języku HTML jest używany do oznaczania tekstu, który został dodany w stosunku do pierwotnej treści dokumentu. Został wprowadzony w standardzie HTML5, co umożliwia programistom i twórcom stron internetowych wyraźne zaznaczanie zmian w treści. Użycie tego znacznika jest szczególnie przydatne w kontekście dokumentów, które podlegają częstym aktualizacjom lub rewizjom, gdyż pozwala użytkownikom łatwo dostrzegać dodany tekst. Przykładem może być sytuacja, w której wprowadzasz poprawki do artykułu na blogu: tekst oznaczony jako <ins> może być wyświetlany z podkreśleniem, co wizualnie wskazuje na jego nowość. Warto także zwrócić uwagę, że znacznik <ins> może być używany w połączeniu z atrybutem 'cite', który wskazuje źródło zmiany, oraz atrybutem 'datetime', który określa datę i godzinę wprowadzenia zmian. Dzięki tym właściwościom, <ins> przyczynia się do lepszego zarządzania treścią w dokumentach HTML, spełniając wymagania dotyczące dostępności i przejrzystości informacji.

Pytanie 3

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

a:visited {color: orange;}

A. jeszcze nie był odwiedzony

B. został wcześniej odwiedzony

C. wskaźnik myszy znajduje się nad nim

D. posiada błędny adres URL

Brak odpowiedzi na to pytanie.

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

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

A. loop="10"

B. balance="10"

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

D. volume="-100"

Brak odpowiedzi na to pytanie.

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

Do czego służy atrybut alt w znaczniku <img>?

A. do podania ścieżki i nazwy pliku źródłowego

B. do podpisu wyświetlanego pod obrazem

C. do ustawienia rozmiaru, ramki i wyrównania obrazu

D. do tekstu wyświetlanego, gdy obraz nie może zostać załadowany

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut <code><span class="code-variable">alt</span></code> w <code><span class="code-text"><</span><span class="code-keyword">img</span><span class="code-text">></span></code> zawiera tekst alternatywny opisujący obraz. Wyświetla się, gdy obrazu nie da się załadować, a przede wszystkim odczytują go czytniki ekranu osobom niewidomym - to podstawa dostępności i wartość dla SEO. Dlatego <code><span class="code-variable">alt</span></code> służy do tekstu pokazywanego, gdy obrazu nie można załadować.

Pytanie 6

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. 6

B. 12

C. 3

D. 9

Brak odpowiedzi na to pytanie.

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

Na czym polega opracowanie logicznego UKŁADU strony internetowej?

A. na przygotowaniu zestawu grafik

B. na ustaleniu adresów URL podstron

C. na zdefiniowaniu treści strony

D. na rozmieszczeniu elementów w określonych miejscach strony

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Logiczny układ strony to zaplanowanie, GDZIE znajdą się poszczególne elementy - nagłówek, menu, treść główna, panel boczny, stopka. Chodzi o rozmieszczenie bloków w określonych miejscach, zanim wypełni się je treścią. Dlatego układ to rozmieszczenie elementów na stronie.

Pytanie 8

W języku HTML stworzono odnośnik z symbolem #. Co się wydarzy po kliknięciu na podany link?

A. Strona przewinie się do elementu z id o nazwie dane

B. Uruchomi się skrypt o nazwie dane

C. Zostanie użyty względny adres URL o nazwie dane

D. Otworzy się nowa karta przeglądarki zatytułowana dane

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Hiperłącze z użyciem znaku # w języku HTML odnosi się do identyfikatora (id) na tej samej stronie. Gdy użytkownik kliknie ten odsyłacz, przeglądarka przewinie stronę do elementu, który ma przypisany identyfikator 'dane'. To podejście jest powszechnie stosowane w celu ułatwienia nawigacji na długich stronach, gdzie użytkownicy mogą szybko przeskakiwać do interesujących ich sekcji. Przykład praktyczny może obejmować stronę z informacjami o produkcie, gdzie poszczególne sekcje, takie jak 'Specyfikacje', 'Opinie' czy 'FAQ', mają przypisane unikalne identyfikatory. Używając hiperłączy z #, użytkownicy mogą z łatwością dotrzeć do tych sekcji bez przewijania strony manualnie. Tego typu implementacja jest zgodna z zasadami dostępności i ułatwia nawigację, co jest szczególnie ważne w projektowaniu stron przyjaznych dla użytkownika. Ważne jest również, aby identyfikatory były unikalne w obrębie strony, co zapobiega potencjalnym konfliktom i pozwala na prawidłowe przewijanie.

Pytanie 9

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 naciśnięciu przycisku test kolor tekstu zmienia się na czerwony.

B. Po naciśnięciu przycisku test kolor tekstu pozostaje niebieski.

C. Naciskanie przycisku test powoduje, że kolor tekstu zmienia się na przemian z niebieskiego na czerwony.

D. Tuż po otwarciu strony kolor tekstu jest czerwony.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest poprawna ponieważ w kodzie HTML znajduje się element typu przycisk który po kliknięciu wykonuje akcję zmieniającą kolor tekstu w paragrafie z niebieskiego na czerwony Za pomocą atrybutu onclick przypisano do niego funkcję JavaScript documentgetElementById'p1'stylecolor'red' co oznacza że po naciśnięciu przycisku zmienia się styl koloru elementu o identyfikatorze p1 na czerwony Ta technika jest powszechnie stosowana do dynamicznej interakcji z użytkownikami na stronach internetowych Mając na uwadze dobre praktyki warto pamiętać o oddzieleniu logiki JavaScript od kodu HTML co zwiększa czytelność i utrzymanie kodu Można to osiągnąć poprzez przypisanie funkcji JavaScript w zewnętrznym pliku js co jest zgodne z zasadą oddzielania warstw logiki stylowania i struktury strony Zastosowanie JavaScript w taki sposób umożliwia dynamiczną zmianę stylów co jest istotne w kontekście tworzenia interaktywnych aplikacji webowych Tego typu manipulacje DOM są fundamentalne dla rozwoju nowoczesnych aplikacji internetowych co czyni je kluczowym elementem nauki i praktyki w zawodach związanych z programowaniem frontendowym

Pytanie 10

Które z poniższych poleceń jest poprawne w kontekście walidacji HTML5?

A. <img src = mojPiesek.jpg" alt = "pies>

B. <img src = mojPiesek.jpg alt = pies>

C. <img src = "mojPiesek.jpg" alt = "pies">

D. <img src = "mojPiesek.jpg" >

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <img src = "mojPiesek.jpg" alt = "pies"> jest poprawna zgodnie z wymaganiami HTML5, ponieważ przestrzega zasad dotyczących składni znaczników. W HTML5 atrybuty powinny być stosowane w formacie klucz-wartość, gdzie klucz jest nazwą atrybutu, a wartość jest przypisana w cudzysłowach. W tym przypadku atrybut 'src' wskazuje na źródło obrazu, a 'alt' dostarcza tekst alternatywny, co jest istotne z punktu widzenia dostępności. Tekst alternatywny jest używany przez technologie asystujące oraz wyświetlany, gdy obraz nie może być załadowany. Przykład użycia: <img src="logo.png" alt="Logo firmy"> jest zgodny z dobrymi praktykami, ponieważ informuje użytkowników o zawartości obrazu. Warto również pamiętać, że w HTML5 nie jest wymagane zamykanie tagu <img>, co czyni go bardziej elastycznym w użyciu. Poprawne stosowanie atrybutów oraz odpowiedzialność za dostępność treści to kluczowe aspekty projektowania stron internetowych w dzisiejszych czasach.

Pytanie 11

W stylu CSS ustalono obramowanie pojedyncze, które ma następujące kolory dla krawędzi:

border: solid 1px; border-color: red blue green yellow;

A. górna – czerwona, prawa – niebieska, dolna – zielona, lewa – żółta

B. lewa – czerwona, dolna – niebieska, prawa – zielona, górna – żółta

C. prawa – czerwona, dolna – niebieska, lewa – zielona, górna – żółta

D. górna – czerwona, lewa – niebieska, dolna – zielona, prawa – żółta

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Definicja obramowania za pomocą stylu CSS z użyciem właściwości border-color pozwala na określenie kolorów każdej z krawędzi elementu w kolejności zgodnej ze wskazówkami zegara. Gdy podano cztery wartości jak w border-color: red blue green yellow; oznaczają one odpowiednio kolory krawędzi górnej prawej dolnej i lewej. Właściwość border: solid 1px; definiuje typ obramowania jako solidne i jego szerokość jako 1px. Warto zaznaczyć że podanie czterech wartości kolorów w border-color jest zgodne z zasadami CSS i umożliwia konfigurowanie wyglądu elementów w sposób szczegółowy i zindywidualizowany. Projektanci stron internetowych często używają tej techniki do tworzenia graficznych stylów które zwiększają czytelność i estetykę witryny. W praktyce wiedza o manipulacji stylem obramowania w CSS jest kluczowa dla tworzenia responsywnych i wizualnie atrakcyjnych interfejsów użytkownika. Takie podejście wspiera zachowanie spójności wizualnej co jest jedną z dobrych praktyk w projektowaniu front-endu.

Pytanie 12

Aby ustawić marginesy wewnętrzne elementu: górny 50px, prawy 20px, dolny 40px, lewy 30px, należy użyć deklaracji CSS:

padding: 20px 40px 30px 50px;

padding: 50px 40px 20px 30px;

padding: 30px 20px 40px 50px;

padding: 50px 20px 40px 30px;

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Skrócony zapis <code><span class="code-variable">padding</span></code> z czterema wartościami przyjmuje je w kolejności zgodnej z ruchem wskazówek zegara: góra, prawo, dół, lewo (TRBL). Dla marginesów górny 50, prawy 20, dolny 40, lewy 30 daje to <code><span class="code-keyword">padding</span><span class="code-text">:</span> <span class="code-number">50</span><span class="code-variable">px</span> <span class="code-number">20</span><span class="code-variable">px</span> <span class="code-number">40</span><span class="code-variable">px</span> <span class="code-number">30</span><span class="code-variable">px</span><span class="code-text">;</span></code>. Wartości rozdziela się spacjami, nie przecinkami. Dlatego poprawna jest ta deklaracja.

Pytanie 13

Aby zdefiniować w języku HTML listę nienumerowaną (wypunktowaną), należy użyć znacznika:

<ul>

<dt>

<dd>

<ol>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Listę nienumerowaną (wypunktowaną) tworzy znacznik <code><span class="code-text"><</span><span class="code-keyword">ul</span><span class="code-text">></span></code> (unordered list), a jej kolejne pozycje umieszcza się w <code><span class="code-text"><</span><span class="code-keyword">li</span><span class="code-text">></span></code>. Domyślnie elementy poprzedzane są punktorami. Dla listy numerowanej używa się <code><span class="code-text"><</span><span class="code-keyword">ol</span><span class="code-text">></span></code>. Dlatego listę wypunktowaną definiuje <code><span class="code-text"><</span><span class="code-keyword">ul</span><span class="code-text">></span></code>.

Pytanie 14

Na podstawie filmu wskaż, która cecha dodana do stylu CSS zamieni miejscami bloki aside i nav, pozostawiając w środku blok section?

A. aside {float: left; }

B. nav { float: right; }

C. nav { float: right; } section { float: right; }

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłowa odpowiedź opiera się na tym, jak działają własności float w CSS i w jakiej kolejności przeglądarka renderuje elementy blokowe. Jeśli w dokumencie HTML kolejność znaczników to np. <aside>, potem <section>, a na końcu <nav>, to bez dodatkowego stylowania wszystkie trzy ustawią się pionowo, jeden pod drugim, w tej właśnie kolejności. Dodanie float zmienia sposób, w jaki elementy „odpływają” od normalnego przepływu dokumentu i jak układają się obok siebie. W stylu nav { float: right; } section { float: right; } sprawiamy, że zarówno nav, jak i section są przesuwane do prawej krawędzi kontenera, natomiast aside (bez float) pozostaje w normalnym przepływie, czyli z lewej strony. Ponieważ przeglądarka układa elementy w kolejności występowania w kodzie, najpierw wyrenderuje aside po lewej, potem section „odpłynie” w prawo, a na końcu nav też „odpłynie” w prawo, ustawiając się po prawej stronie, ale dalej od góry niż section. Efekt wizualny jest taki, że po lewej mamy aside, po prawej nav, a section ląduje między nimi, dokładnie tak jak było pokazane na filmie. Moim zdaniem to zadanie dobrze pokazuje, że przy floatach zawsze trzeba myśleć o trzech rzeczach naraz: kolejności elementów w HTML, kierunku „pływania” (left/right) oraz o tym, które elementy pozostawiamy w normalnym przepływie. W praktyce w nowoczesnych projektach częściej używa się flexboxa albo CSS Grid do takich układów, bo są czytelniejsze i mniej problematyczne. Przykładowo, zamiast kombinować z float, można by użyć display: flex; na kontenerze i ustawić order dla aside i nav. Float nadal jednak pojawia się w starszych layoutach i w zadaniach egzaminacyjnych, więc warto dobrze rozumieć jego zachowanie, choćby po to, żeby poprawnie modyfikować istniejące style lub naprawiać „rozjechane” układy w starszych projektach.

Pytanie 15

Jaki minimalny kontrast tekstu (standardowego rozmiaru) do tła wymaga WCAG 2.x na poziomie AA?

A. 2,0 : 1

B. 2,5 : 1

C. 1,5 : 1

D. 4,5 : 1

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wytyczne WCAG 2.x na poziomie AA wymagają dla tekstu standardowego rozmiaru minimalnego kontrastu 4,5:1 między kolorem tekstu a tłem - to zapewnia czytelność m.in. osobom słabowidzącym. Dla dużego tekstu próg jest niższy (3:1). Dlatego minimalny kontrast AA to 4,5:1.

Pytanie 16

Web designer pragnie wstawić w znaczniku <header> nagłówek do treści. Zgodnie z zasadami użycia znaczników semantycznych, powinien wykorzystać znacznik

A. <strong>

B. <h1>

C. <p>

D. <title>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zastosowanie znacznika <h1> w nagłówkach strony internetowej jest zgodne z zasadami semantycznymi HTML. Znacznik <h1> jest przeznaczony do oznaczania głównego nagłówka dokumentu i powinien być używany do przedstawienia najważniejszej treści. Dobrą praktyką jest, aby każda strona miała tylko jeden znacznik <h1>, co pomaga wyszukiwarkom zrozumieć hierarchię treści na stronie. Na przykład, w przypadku artykułu, tytuł artykułu mógłby być umieszczony w znaczniku <h1>, a podtytuły w <h2>, <h3> itd. W ten sposób struktura dokumentu jest jasna, co poprawia dostępność oraz SEO. Dodatkowo, stosowanie semantycznych znaczników ułatwia nawigację po stronie osobom korzystającym z technologii asystujących, takich jak czytniki ekranu, które interpretują hierarchię treści na podstawie użytych znaczników.

Pytanie 17

Jakie jest poprawne zapisanie tagu HTML?

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

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

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

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

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

Brak odpowiedzi na to pytanie.

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

Co można powiedzieć o przedstawionym zapisie języka HTML 5?

<title>Strona o psach</title>

A. Jest fakultatywny w kontekście HTML 5 i nie jest wymagany w dokumencie.

B. Pojawi się na karcie dokumentu w przeglądarce.

C. Zostanie umieszczony w treści strony, na samym czubku.

D. Stanowi jedynie informację dla robotów wyszukiwania i nie jest widoczny w przeglądarce.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zaznaczenie poprawnej odpowiedzi pokazuje, że to, co jest w znaczniku <title>, pojawia się na karcie w przeglądarce. To naprawdę ważny element HTML, bo informuje użytkowników, o czym jest dana strona. Zgodnie z tym, co mówi W3C, tytuł strony jest kluczowy dla SEO, gdyż wyświetla się w wynikach wyszukiwania i na zakładkach przeglądarek. Fajnie, jak tytuł jest krótki, ma kluczowe słowa, które mówią o zawartości, i przyciąga wzrok. Na przykład, jak zrobisz stronę o psach rasowych, to tytuł <title> w stylu 'Strona o psach - Poradnik dla właścicieli' nie tylko mówi, o czym będzie treść, ale też może sprawić, że lepiej widać ją w wynikach wyszukiwania. Pamiętaj, że zawartość znacznika <title> widać na górze okna przeglądarki, co ułatwia poruszanie się i znajdowanie otwartych kart.

Pytanie 19

Wskaż blok sformatowany poniższym stylem CSS:

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

A. Blok 4.

B. Blok 2.

C. Blok 1.

D. Blok 3.

Brak odpowiedzi na to pytanie.

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

Pytanie 20

Strona internetowa została wyświetlona przez przeglądarkę w poniższy sposób. Wskaż kod HTML, który prawidłowo reprezentuje zaprezentowaną hierarchiczną strukturę tekstu:

A. <ul><li>Rozdział 1<li>tekst<li>Podrozdział 1.1<li>tekst<li>Podrozdział 1.2</ul>

B. <h1>Rozdział 1<p>tekst <h2>Podrozdział 1.1<p>tekst <h2>Podrozdział 1.2

C. <h1>Rozdział 1</h1> <p>tekst</p> <h2>Podrozdział 1.1</h2> <p>tekst</p> <h2>Podrozdział 1.2</h2>

D. <big>Rozdział 1</big>tekst<big>Podrozdział 1.1</big>tekst<big>Podrozdział 1.2</big>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest w porządku! Użycie znaczników <h1> i <h2> wraz z <p> to dobry krok, bo to właśnie tak powinno wyglądać semantyczne formatowanie w HTML. Znacznik <h1> to taki główny nagłówek, który mówi, o czym jest cała strona lub sekcja, a to naprawdę kluczowe dla porządku w treści i SEO. Dzięki nagłówkom w HTML łatwiej jest zrozumieć, co jest na stronie, zarówno dla ludzi, jak i programów, które przeszukują internet. Jak już masz <h2>, to świetnie, bo to pokazuje podrozdziały, a więc hierarchię informacji. Użycie <p> dla tekstu to też dobry pomysł, bo sprawia, że tekst jest bardziej czytelny. Warto pamiętać, że semantyczne znaczniki HTML pomagają osobom z niepełnosprawnościami korzystać z internetu. Według wytycznych WCAG powinno się je stosować, żeby poprawić dostępność. A jak to robić z głową, to łatwiej potem stylować stronę przy użyciu CSS, bo możesz zmieniać wygląd bez bawienia się w treść HTML. Generalnie, dobrze jest, gdy dokumenty są jasne zarówno dla ludzi, jak i dla maszyn – to standard w nowoczesnym webdesignie.

Pytanie 21

Który z poniższych znaczników wchodzi w skład sekcji <head> dokumentu HTML?

A. <img>

B. <title>

C. <span>

D. <section>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
<title> jest jednym z kluczowych znaczników w sekcji <head> dokumentu HTML. Odpowiada za definiowanie tytułu strony, który jest wyświetlany w pasku tytułu przeglądarki oraz w wynikach wyszukiwania. Tytuł jest istotnym elementem SEO, ponieważ informuje zarówno użytkowników, jak i wyszukiwarki o tematyce strony. Przykład użycia znacznika <title>: <head><title>Moja Strona Internetowa</title></head>. Należy pamiętać, że tytuł powinien być zwięzły, ale jednocześnie opisowy, zazwyczaj nie powinien przekraczać 60 znaków. W kontekście standardów, HTML5, który jest obecnie najnowszą wersją HTML, wciąż podkreśla znaczenie znacznika <title> jako fundamentalnego dla struktury dokumentu. Odpowiedni tytuł nie tylko poprawia doświadczenia użytkowników, ale również zwiększa widoczność strony w wynikach wyszukiwania, dlatego jego prawidłowe użycie ma kluczowe znaczenie w web designie i marketingu internetowym.

Pytanie 22

Metainformacja „Description” zawarta w pliku źródłowym HTML powinna zawierać

<head>
    <meta name="description" content="...">
</head>

A. nazwę programu, przy użyciu którego została stworzona strona.

B. wyrazy kluczowe, z których korzystają wyszukiwarki sieciowe.

C. opis tego, co znajduje się na stronie.

D. informację o tym, kto jest autorem strony.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to 'opis, co znajduje się na stronie'. Metainformacja 'Description' w pliku źródłowym HTML jest wykorzystywana przez wyszukiwarki internetowe do wyświetlania opisu strony w wynikach wyszukiwania. Dzięki temu użytkownik może zobaczyć na pierwszy rzut oka, czy strona jest związana z jego zapytaniem, czy też nie. Jest to jedno z kluczowych narzędzi w SEO (Search Engine Optimization), które ma na celu zwiększenie widoczności strony w wynikach wyszukiwania. W praktyce, opis powinien być krótki, zwięzły i zawierać ważne informacje o treści strony. Dobrą praktyką jest również uwzględnienie kluczowych słów, na które użytkownicy mogą szukać. Opis ten powinien być zrozumiały dla użytkowników, a także jest to miejsce, gdzie można wykorzystać strategie marketingowe, aby zachęcić do odwiedzenia strony.

Pytanie 23

Który format wideo NIE jest natywnie obsługiwany przez element <video> w HTML5?

A. MP4

B. AVI

C. Ogg

D. WebM

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Element <code><span class="code-text"><</span><span class="code-keyword">video</span><span class="code-text">></span></code> w HTML5 obsługuje natywnie formaty MP4 (H.264), WebM i Ogg. AVI to starszy kontener, którego przeglądarki nie odtwarzają wprost przez <code><span class="code-text"><</span><span class="code-keyword">video</span><span class="code-text">></span></code> - wymaga konwersji do jednego z obsługiwanych formatów. Dlatego nieobsługiwanym formatem jest AVI.

Pytanie 24

Najprostszy sposób zamiany obiektu oznaczonego cyfrą 1 na obiekt oznaczony cyfrą 2 polega na

A. animowaniu obiektu.

B. geometrycznym transformowaniu obiektu.

C. zmianie warstwy obiektu.

D. narysowaniu docelowego obiektu.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybrałeś poprawną odpowiedź, która jest 'geometrycznym transformowaniem obiektu'. Kiedy mówimy o transformacji geometrycznej, mamy na myśli różne operacje, które można wykonać na obiektach, takie jak skalowanie, obracanie i przesuwanie. W przypadku obiektu oznaczonego numerem 1 i numerem 2 na obrazku, najprostszym sposobem na przekształcenie jednego w drugi jest używanie transformacji geometrycznej. Obiekt numer 2 jest większy i obrócony w stosunku do obiektu numer 1. Dzięki transformacjom geometrycznym mogliśmy osiągnąć ten efekt, skalując i obracając obiekt numer 1. Transformacje geometryczne są podstawą wielu operacji w dziedzinach takich jak grafika komputerowa, projektowanie CAD, animacja, a także w wielu innych dziedzinach technologii i nauki.

Pytanie 25

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

A. Drupal

B. WordPress

C. MediaWiki

D. Joomla!

Brak odpowiedzi na to pytanie.

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

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

A. <i> oraz <mark>

B. <u> oraz <sup>

C. <b> oraz <u>

D. <b> oraz <i>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik HTML <strong> jest używany do oznaczenia tekstu, który jest ważny, podczas gdy <em> służy do podkreślenia, że tekst powinien być akcentowany w kontekście. Odpowiednikami tych znaczników, pod względem formatowania, są <b> oraz <i>. Znacznik <b> stosuje się do wyróżnienia tekstu, nadając mu pogrubienie, co zazwyczaj oznacza, że tekst jest istotny. Z kolei <i> używamy do kursywy, co również może wskazywać na akcentowanie lub wyróżnienie pewnych słów, jednak w sposób bardziej subtelny niż przy pomocy pogrubienia. W praktyce, stosując <strong> oraz <em>, dbamy o to, aby nasza treść była bardziej dostępna dla użytkowników, zwłaszcza dla osób korzystających z technologii wspomagających, takich jak czytniki ekranu. Stosowanie znaczników semantycznych zgodnie z dobrymi praktykami zapewnia lepszą interpretację treści przez wyszukiwarki, co może wpływać na SEO. Warto również pamiętać, że pomimo że <b> i <i> mają swoje zastosowania, znacznie lepiej jest używać <strong> i <em> w kontekście semantycznym, aby poprawić zrozumienie treści przez maszyny i użytkowników.

Pytanie 27

Wskaż fragment kodu CSS, który odpowiada układowi bloków 2 - 5, zakładając, że są one oparte na poniższym kodzie HTML.

A. B

B. A

C. D

D. C

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź B jest poprawna, ponieważ skutecznie rozmieszcza bloki 2 5 w zgodzie z przedstawionym układem HTML. Użycie właściwości float pozwala na precyzyjne kontrolowanie położenia elementów w układzie blokowym. W tym przypadku float left dla bloków #drugi i #trzeci oraz float right dla #czwarty sprawiają że bloki są odpowiednio rozstawione. Dodatkowo #piaty z float left zapewnia jego poprawne umiejscowienie poniżej bloku #trzeci. To rozwiązanie jest zgodne z dobrymi praktykami w projektowaniu responsywnych layoutów gdzie float jest używane do budowania elastycznych struktur. Ważne jest także odpowiednie zarządzanie szerokościami elementów aby nie przekraczały 100% szerokości kontenera a także uwzględnienie zastosowania clearfix aby uniknąć problemów z przepływem elementów. Poprawne zrozumienie float oraz szerokości w CSS jest kluczowe w tworzeniu zgodnych z standardami projektów internetowych co pozwala na lepszą skalowalność i utrzymanie strony w przyszłości.

Pytanie 28

W przedstawionym kodzie HTML zastosowany styl CSS jest stylem

<p style="color:red;">To jest przykładowy akapit.</p>

A. dynamicznym

B. nagłówkowym

C. lokalnym

D. zewnętrznym

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Styl CSS zastosowany w podanym kodzie HTML to styl lokalny, ponieważ jest zdefiniowany bezpośrednio w tagu HTML za pomocą atrybutu 'style'. Taki sposób definiowania stylów pozwala na przypisanie unikalnych stylów do konkretnego elementu na stronie, co jest szczególnie przydatne, gdy chcemy szybko zmienić wygląd jednego elementu bez wpływania na inne. Przykładem lokalnego stylu jest ustawienie koloru tekstu akapitu na czerwony, co można zaobserwować w atrybucie 'style="color:red;"'. Warto zauważyć, że lokalne style mają wyższy priorytet od stylów zewnętrznych i wewnętrznych, co oznacza, że jeśli ten sam element ma przypisany styl zewnętrzny, lokalny styl go nadpisze. W kontekście standardów CSS, lokalne style są zgodne z zasadami kaskadowości, która określa, jak łączyć różne źródła stylów. Z perspektywy użyteczności, chociaż lokalne style mogą być wygodne, ich nadmierne stosowanie prowadzi do trudności w utrzymaniu kodu, dlatego zaleca się ich używanie w ograniczonym zakresie.

Pytanie 29

Głównym celem systemu CMS jest oddzielenie treści serwisu informacyjnego od jego wizualnej formy. Ten efekt osiągany jest przez generowanie zawartości

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

B. z bazy danych oraz wizualizacji poprzez atrybuty HTML

C. z plików HTML o stałej zawartości oraz wizualizacji z użyciem ustalonego szablonu

D. z plików HTML o stałej zawartości oraz wizualizacji przy pomocy technologii FLASH

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź na to pytanie to "z bazy danych oraz wyglądu ze zdefiniowanego szablonu". Systemy CMS (Content Management System) mają na celu oddzielenie treści od prezentacji, co pozwala na łatwiejsze zarządzanie i aktualizowanie zawartości serwisu. Wykorzystanie bazy danych do przechowywania treści jest kluczowe, ponieważ umożliwia dynamiczne generowanie zawartości na stronach internetowych. Dzięki temu, gdy zmienia się treść w bazie danych, zmiany te są automatycznie odzwierciedlane na stronie bez potrzeby modyfikacji statycznych plików HTML. Szablony, które definiują wygląd, są również niezmiernie ważne, ponieważ pozwalają na spójność wizualną serwisu i jego łatwą adaptację w przypadku zmian w designie. Przykładem może być użycie systemu szablonów, takiego jak Twig w Symfony, który umożliwia separację logiki biznesowej od prezentacji, co ułatwia pracę developerom i designerom. Takie podejście jest zgodne z najlepszymi praktykami w branży, zapewniając przy tym elastyczność i skalowalność serwisów internetowych.

Pytanie 30

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

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

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

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

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

Brak odpowiedzi na to pytanie.

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

Pytanie 31

W CSS, aby ustawić różne stylizacje dla pierwszej litery w akapicie, należy wykorzystać selektor

A. dziecka p + first-letter

B. atrybutu p [first-letter]

C. pseudoelementu p::first-letter

D. klasy p.first-letter

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W języku CSS do formatowania pierwszej litery akapitu używamy pseudoelementu '::first-letter'. Jest to specjalny selektor, który pozwala na zastosowanie stylów tylko do pierwszego znaku w danym elemencie, na przykład w akapicie <p>. Pseudoelement ten może być używany do nadawania unikalnych właściwości typograficznych, takich jak rozmiar czcionki, kolor, font-weight czy marginesy, co może znacząco wzbogacić stylizację tekstu. Przykładowo, używając stylu 'p::first-letter { font-size: 2em; color: red; }', pierwsza litera każdego akapitu stanie się większa i czerwona. To podejście jest zgodne z dobrymi praktykami w CSS, ponieważ umożliwia selektywne stylizowanie elementów bez wpływu na resztę treści. Aby uzyskać większą kontrolę nad układem i estetyką stron internetowych, warto zaznajomić się z innymi pseudoelementami, takimi jak '::first-line', które działają analogicznie. Prawidłowe używanie pseudoelementów jest kluczowe dla tworzenia bardziej zaawansowanych i atrakcyjnych wizualnie projektów.

Pytanie 32

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

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

B. zapisać w formacie BMP

C. zmniejszyć jego rozdzielczość

D. dodać kanał alfa

Brak odpowiedzi na to pytanie.

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

Pytanie 33

Wymiary:	4272x2848px
Rozdzielczość:	72 dpi
Format:	JPG

W ramce przedstawiono właściwości pliku graficznego. W celu optymalizacji czasu ładowania rysunku na stronę WWW należy

A. zmniejszyć rozmiary obrazu

B. zwiększyć rozdzielczość

C. zmienić format grafiki na CDR

D. dostosować proporcje szerokości do wysokości

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zmniejszenie wymiarów rysunku to kluczowy krok w optymalizacji czasu ładowania grafiki na stronę internetową. Wymiary rysunku 4272x2848px są znaczące, co oznacza, że obraz ma dużą ilość pikseli, co przekłada się na większy rozmiar pliku. Przy standardowej rozdzielczości 72 dpi, która jest odpowiednia do wyświetlania na ekranach, mniejsze wymiary skutkują zmniejszeniem liczby pikseli, co automatycznie obniża wagę pliku. Przykładem może być przeskalowanie obrazu do wymiarów 800x600px, co może znacznie przyspieszyć czas ładowania strony. W praktyce, witryny internetowe powinny dążyć do używania obrazów o wymiarach dostosowanych do wyświetlacza, a optymalne wymiary to te, które są zgodne z responsywnym designem. Ponadto, standardy dotyczące wydajności stron, takie jak Web Page Test czy Google PageSpeed Insights, zalecają minimalizację rozmiaru plików graficznych jako kluczowy element poprawy szybkości ładowania. Zmniejszenie wymiarów rysunku jest zatem jednym z najprostszych i najbardziej efektywnych rozwiązań, które mogą przynieść znaczące korzyści w zakresie wydajności stron internetowych.

Pytanie 34

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

A. HTML5

B. XHTML 2.0

C. XHTML1.0

D. HTML4

Brak odpowiedzi na to pytanie.

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

Pytanie 35

Jaką formę ma kolor przedstawiony w systemie szesnastkowym jako #11FE07 w formacie RGB?

A. rgb(11,127,7)

B. rgb(17,254,7)

C. rgb(17,FE,7)

D. rgb(17,255,7)

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kolor zapisany w postaci szesnastkowej #11FE07 odnosi się do systemu kolorów RGB, który jest powszechnie wykorzystywany w grafice komputerowej oraz w sieci. Wartości szesnastkowe składają się z trzech par cyfr: pierwsza para (11) reprezentuje wartość czerwonego (R), druga para (FE) wartość zielonego (G), a trzecia para (07) wartość niebieskiego (B). Aby przekształcić wartości szesnastkowe na dziesiętne, stosujemy konwersję, gdzie '11' w systemie szesnastkowym to 17 w systemie dziesiętnym, 'FE' to 254, a '07' to 7. Zatem wartość RGB dla koloru #11FE07 wynosi rgb(17, 254, 7). Wartości te są kluczowe w tworzeniu kolorów w różnych aplikacjach, od stron internetowych po projektowanie graficzne. Zrozumienie konwersji kolorów oraz ich reprezentacji w różnych formatach jest niezbędne dla każdego projektanta, który pracuje z kolorami. Przykładem zastosowania może być projektowanie logo, gdzie precyzyjne odwzorowanie koloru w różnych formatach jest istotne dla spójności wizualnej marki.

Pytanie 36

Co spowoduje zapis

h2 { background-color: green; }

A. zielone tło całej strony

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Reguła <code><span class="code-variable">h2</span> <span class="code-text">{</span> <span class="code-keyword">background-color</span><span class="code-text">:</span> <span class="code-variable">green</span><span class="code-text">;</span> <span class="code-text">}</span></code> ustawia zielone TŁO elementom <code><span class="code-text"><</span><span class="code-keyword">h2</span><span class="code-text">></span></code>, czyli nagłówkom drugiego poziomu. Selektor <code><span class="code-variable">h2</span></code> ogranicza działanie tylko do tych nagłówków. Dlatego daje zielone tło nagłówków <code><span class="code-text"><</span><span class="code-keyword">h2</span><span class="code-text">></span></code>.

Pytanie 37

Który sposób zapisu stylu CSS ma najwyższy priorytet (jest stosowany w pierwszej kolejności)?

A. styl importowany do wewnętrznego arkusza

B. wewnętrzny arkusz stylów

C. styl lokalny (śródliniowy, w atrybucie style)

D. zewnętrzny arkusz stylów

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Najwyższy priorytet w CSS ma styl LOKALNY (śródliniowy) - zapisany wprost w atrybucie <code><span class="code-variable">style</span></code> elementu, np. <code><span class="code-text"><</span><span class="code-keyword">p</span> <span class="code-variable">style</span><span class="code-text">=</span><span class="code-string">"color:red"</span><span class="code-text">></span></code>. Jest „najbliżej” elementu, więc nadpisuje reguły z arkuszy wewnętrznego i zewnętrznego. Zapamiętaj zasadę bliskości: im bliżej elementu zdefiniowany styl, tym silniejszy.

Pytanie 38

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

A. CDR

B. BMP

C. JPEG

D. PNG

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format PNG (Portable Network Graphics) jest szczególnie ceniony w kontekście grafiki internetowej, ponieważ obsługuje przezroczystość, co czyni go idealnym wyborem dla obrazów, które wymagają tła transparentnego. Przezroczystość w formacie PNG jest realizowana poprzez zastosowanie kanału alfa, co pozwala na uzyskanie różnorodnych efektów wizualnych, takich jak cienie, gradienty czy delikatne przejścia między kolorami. Przykłady zastosowania to ikony, logo, grafiki na stronach internetowych, które muszą harmonizować z różnymi kolorami tła. W przeciwieństwie do formatów takich jak JPEG, który nie obsługuje przezroczystości i używa kompresji stratnej, PNG oferuje kompresję bezstratną, co oznacza, że jakość obrazu nie ulega pogorszeniu po zapisaniu. W kontekście praktyk webowych, użycie PNG jest zgodne z zaleceniami dotyczącymi optymalizacji obrazów w sieci, co przyczynia się do szybszego ładowania stron i lepszej jakości wizualnej.

Pytanie 39

W znaczniku meta w miejsce kropek należy wpisać

A. informację o dostosowaniu do urządzeń mobilnych

B. język dokumentu

C. streszczenie treści strony

D. nazwa edytora

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik meta opatrzony atrybutem name="description" służy do zamieszczenia streszczenia treści strony internetowej. Jest to element HTML używany w nagłówku dokumentu, który dostarcza wyszukiwarkom i innym usługom internetowym informacji o zawartości strony. Opis ten pomaga w lepszym indeksowaniu strony przez wyszukiwarki oraz może wpływać na to, jak strona jest prezentowana w wynikach wyszukiwania. Dzięki dobrze sformułowanemu opisowi użytkownicy mogą szybciej zrozumieć, czego mogą się spodziewać po odwiedzeniu danej strony. Jest to dobra praktyka SEO, ponieważ poprawia widoczność strony w wyszukiwarkach. Zawartość opisana w znaczniku meta description nie powinna przekraczać 160 znaków, aby zapewnić odpowiednie wyświetlanie w wynikach wyszukiwania. Użycie streszczenia w odpowiedni sposób zwiększa atrakcyjność kliknięcia przez potencjalnych odwiedzających. To podejście jest zgodne z wytycznymi Google, które zaleca tworzenie unikalnych i treściwych opisów dla każdej strony w serwisie.

Pytanie 40

Jakie pola znajdują się w formularzu?

A. Input(Text), Select, Input(Radio), Input(Radio), Input(Submit), Input(Reset)

B. Input(Text), Input(Checkbox), Select, Select, Input(Submit), Input(Reset)

C. Textarea, Option, Input(Checkbox), Input(Checkbox), Input(Submit), Input(Reset)

D. Textarea, Select, Input(Radio), Input(Radio), Input(Reset), Input(Submit)

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź, którą wybrałeś, jest ok, bo wszystko trzyma się zasady formularzy z obrazka. Input(Text) to właśnie pole, w którym wpisujesz swoje nazwisko. Potem mamy Input(Select), który pozwala wybrać jedno z województw z listy – to też jest na plus. Przy Input(Radio) można wybrać jedną opcję, co dobrze pasuje do wyboru między Studiami podyplomowymi a Kursem. Input(Submit) jest do wysyłania formularza, więc tu też wszystko gra. Na końcu Input(Reset) zeruje wszystko, co jest przydatne, kiedy chcesz wyczyścić formularz. Wszystkie te elementy są zgodne z HTML5, co jest teraz standardem w tworzeniu stron. Fajnie, że formularz ma logiczne ułożenie, bo ułatwia to korzystanie z niego. Moim zdaniem, dobrze wiedzieć, jakie elementy są stosowane w formularzach, żeby wszystko działało tak jak powinno.

Rozpocznij nowy egzamin

Powrót do strony głównej