Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik programista
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 11 maja 2026 13:26
Data zakończenia: 11 maja 2026 13:47

Egzamin zdany!

Wynik: 35/40 punktów (87,5%)

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

Które ze znaczników HTML umożliwią wyświetlenie na stronie tekstu w jednym wierszu, jeżeli żadne formatowanie CSS nie zostało zdefiniowane?

Dobre strony mojej strony

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

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

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

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

Gratulacje, Twoja odpowiedź jest prawidłowa. Wybrałeś znacznik <span>, który jest znacznikiem liniowym w HTML. Znaczniki liniowe nie zaczynają nowego wiersza po swoim zakończeniu, co oznacza, że tekst zawarty w kolejnych znacznikach <span> będzie wyświetlany w jednym wierszu, o ile nie zdefiniowano inaczej za pomocą CSS. Jest to bardzo ważne, kiedy chcemy utworzyć strukturę strony, która nie zależy od domyślnych formatowań. Przykładowo, używając <span>, możemy skonstruować skomplikowane layouty, które są niemożliwe do osiągnięcia za pomocą samych znaczników blokowych. Pamiętaj jednak, że odpowiednie stosowanie znaczników liniowych i blokowych jest ważnym elementem tworzenia semantycznie poprawnych stron internetowych, co może pomóc w poprawie SEO i dostępności Twojej strony.

Pytanie 2

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

psy
koty
chomiki
świnki morskie
rybki

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

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

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

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

Wybrane przez Ciebie odpowiedzi są nieprawidłowe. Zacznijmy od selektora CSS 'ul li:active { background-color: DodgerBlue; }' - aktywny stan elementu to moment, kiedy jest on aktualnie klikany, co nie pasuje do obserwowanego efektu. Następnie 'ul li:nth-child(odd) { background-color: DodgerBlue; }' - ten selektor odnosi się do nieparzystych elementów listy, podczas gdy na obrazku parzyste elementy mają niebieskie tło. Na koniec 'ul li:hover { background-color: DodgerBlue; }' - pseudoklasa :hover odnosi się do stanu, kiedy kursor myszy jest nad elementem, co również nie jest zgodne z efektem na obrazku. Wybór nieodpowiedniej pseudoklasy sugeruje, że nie zrozumiałeś do końca ich zastosowania w CSS. Jest to typowy błąd, który można naprawić przez dokładniejsze zapoznanie się z tym aspektem języka CSS, konkretnie z różnymi pseudoklasami i ich zastosowaniem.

Pytanie 3

Jaki format CSS dla akapitu definiuje styl szarej ramki z następującymi cechami?

p {
  padding: 15px;
  border: 2px dotted gray; }

A. linia kropkowa; grubość 2 px; marginesy między tekstem a ramką 15 px

B. linia ciągła; grubość 2 px; marginesy poza ramką 15 px

C. linia ciągła; grubość 2 px; marginesy między tekstem a ramką 15 px

D. linia kreskowa; grubość 2 px; marginesy poza ramką 15 px

Odpowiedzi, które sugerują inne rodzaje obramowań, nie są zgodne z przedstawionym kodem CSS. Linia ciągła, określana jako 'solid', różni się od linii kropkowanej 'dotted', ponieważ jest to ciągła linia bez przerw. Wybór typu linii jest istotny w kontekście wizualnej prezentacji treści i ma wpływ na percepcję estetyczną strony internetowej. Ponadto, odpowiedzi sugerujące marginesy poza ramką zamiast marginesów wewnętrznych wprowadzają błąd w interpretacji właściwości 'padding'. 'Padding' odnosi się do przestrzeni wewnątrz elementu, pomiędzy jego zawartością a granicą, a nie do zewnętrznej przestrzeni między elementem a otaczającymi go obiektami, która jest kontrolowana za pomocą właściwości 'margin'. Tego typu błędne rozumienie może prowadzić do nieprawidłowego stylizowania elementów na stronie, co skutkuje nieestetycznym układem treści i pogorszoną czytelnością. Warto zawsze dokładnie zapoznać się z definicjami i działaniem poszczególnych właściwości CSS, aby unikać takich pomyłek. Zrozumienie różnicy między 'padding' a 'margin' jest kluczowe dla poprawnego projektowania układów stron zgodnie z najlepszymi praktykami w branży web designu

Pytanie 4

Jakiego elementu musisz użyć, aby rozpocząć nową linię tekstu bez tworzenia akapitu na stronie internetowej?

A. </b>

B. <p>

C. <br>

D. </br>

Znak <br> jest standardowym elementem HTML używanym do wprowadzenia przerwy w tekście, która nie tworzy nowego akapitu. W przeciwieństwie do znacznika <p>, który definiuje akapit i dodaje dodatkową przestrzeń przed i po nim, <br> po prostu przenosi tekst do nowej linii, co jest szczególnie przydatne w takich sytuacjach jak adresy, wiersze piosenek czy fragmenty tekstu, gdzie formatowanie linii jest kluczowe. Przykład użycia: <p>Adam Mickiewicz,<br>Pan Tadeusz.</p> W powyższym przykładzie tekst "Pan Tadeusz" zostanie wyświetlony w nowej linii, ale nie jako nowy akapit. Warto pamiętać, że stosowanie zbyt wielu <br> w kodzie HTML może prowadzić do chaotycznego formatowania, dlatego zaleca się ich użycie z umiarem, zgodnie z zasadami dobrego projektowania stron i przystosowywania ich do różnych urządzeń, co jest zgodne z zasadami responsywnego designu. Zastosowanie <br> jest zgodne z HTML5 i uznawane za najlepszą praktykę przy tworzeniu prostych układów tekstowych.

Pytanie 5

Które z wymienionych par znaczników HTML mają identyczny efekt wizualny na stronie internetowej, jeśli nie zastosowano żadnych stylów CSS?

A. <p> oraz <h2>

B. <meta> oraz <title>

C. <b> i <strong>

D. <b> i <big>

Odpowiedź <b> i <strong> jest poprawna, ponieważ oba znaczniki służą do wyróżniania tekstu, przy czym nie mają one różnicy w wizualizacji, jeśli nie zastosowano żadnych stylów CSS. Z punktu widzenia semantyki HTML, <strong> jest znacznikiem, który wyraża większe znaczenie dla zawartego w nim tekstu, co jest korzystne dla dostępności oraz SEO, ale wizualnie, bez dodatkowych stylów, obie etykiety wykazują te same cechy. Przykładowo, można ich używać w sytuacjach, gdy chcemy wyróżnić ważne informacje w artykule lub nagłówku. Zastosowanie tych znaczników zgodnie z dobrymi praktykami HTML pozwala na lepsze zrozumienie struktury strony przez wyszukiwarki oraz czytniki ekranu, co ma znaczenie w kontekście dostępności. W związku z tym, wyróżnianie tekstu za pomocą <b> i <strong> jest nie tylko estetyczne, ale także funkcjonalne, wspierając zarówno użytkowników, jak i algorytmy wyszukiwania.

Pytanie 6

Kompresja bezstratna pliku graficznego zapewnia

A. oryginalną jakość grafiki

B. mniejszą ilość warstw

C. rozmiar większy niż w oryginale

D. wyższą jakość

Kompresja bezstratna pliku graficznego to technika, która pozwala na zmniejszenie rozmiaru pliku graficznego bez utraty jakichkolwiek informacji wizualnych. Oznacza to, że po procesie kompresji, obraz zachowuje swoją pierwotną jakość, a wszystkie detale, kolory i tekstury pozostają nienaruszone. Przykładami formatów wykorzystujących kompresję bezstratną są PNG (Portable Network Graphics) oraz TIFF (Tagged Image File Format). W przypadku PNG, algorytm kompresji, znany jako DEFLATE, pozwala na efektywne zmniejszenie rozmiaru pliku poprzez usuwanie nadmiarowych danych bez wpływu na jakość obrazu. Kompresja bezstratna jest szczególnie ważna w dziedzinach, gdzie jakość grafiki ma kluczowe znaczenie, na przykład w druku, gdzie jakiekolwiek zniekształcenia mogłyby wpłynąć na finalny efekt. Umożliwia ona również edytowanie obrazów bez obawy o degradację jakości, co jest istotne w pracy z grafiką komputerową oraz fotografią. Dzięki temu technologia ta zyskuje na popularności wśród grafików i profesjonalistów zajmujących się obróbką zdjęć.

Pytanie 7

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

<title>Strona o psach</title>

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

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

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

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

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 8

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

A. <title>

B. <span>

C. <img>

D. <section>

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

Pytanie 9

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

A. strong

B. p

C. img

D. span

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

Pytanie 10

Do czego służy znacznik <i> w języku HTML?

A. zdefiniowania formularza

B. zmiany kroju pisma na pochylony

C. zdefiniowania nagłówka w treści

D. umieszczania obrazu

Znacznik <i> w języku HTML jest używany do przedstawienia tekstu w stylu kursywy. Jest to jeden z najprostszych znaczników, który jest często stosowany do podkreślenia pewnych elementów tekstowych, takich jak tytuły książek, nazwy filmów czy inne wyrazy, które mają znaczenie kontekstowe. Użycie tego znacznika jest zgodne z zasadami semantyki HTML, co oznacza, że zachowuje on znaczenie treści, a nie tylko jej wygląd. Warto również zauważyć, że w CSS istnieje wiele możliwości stylizacji tekstu, a znacznik <i> jest jednym z elementów, które w łatwy sposób można połączyć z regułami stylów, aby stworzyć atrakcyjne wizualnie strony internetowe. Przykładem zastosowania może być: <p>Ostatnio przeczytałem <i>Harry'ego Pottera</i> i bardzo mi się podobał.</p>. W tym przypadku tytuł książki jest wyróżniony, co przyciąga uwagę czytelnika. Warto pamiętać, że w nowoczesnym HTML zamiast <i> dla stylizacji można używać CSS, jednak <i> pozostaje ważnym elementem dla zachowania semantyki treści.

Pytanie 11

Który z podanych kodów XHTML sformatuje tekst zgodnie z określonym schematem?

A. Odpowiedź D

B. Odpowiedź B

C. Odpowiedź C

D. Odpowiedź A

Poprawna odpowiedź D zawiera poprawne znaczniki XHTML i HTML, które umożliwiają formatowanie tekstu według wzoru. W pierwszym wierszu tekst Ala ma kota używa znacznika b do pogrubienia słowa kota, co jest zgodne ze standardami, ponieważ b jest szeroko stosowanym tagiem HTML do semantycznego pogrubienia tekstu. Następnie użyty jest znacznik br do wstawienia przerwy w linii, co sprawia, że kolejna część tekstu pojawia się w nowej linii, odzwierciedlając układ zaprezentowany na obrazku. W drugim wierszu tekst a kot ma Alę, znacznik i został użyty do pochylania słowa kot, co jest zgodne z praktykami formatowania tekstu, gdzie i oznacza kursywę. Zamknięcie całego tekstu w znacznikach p paragrafu zapewnia również odpowiedni odstęp i formatowanie, co jest zgodne z semantycznym i strukturalnym organizowaniem treści w dokumencie XHTML. Podejście to odzwierciedla dobre praktyki kodowania, w tym stosowanie właściwych znaczników dla odpowiednich stylów oraz zapewnienie kompatybilności z różnymi przeglądarkami.

Pytanie 12

Deklaracja typu dokumentu HTML: <!DOCTYPE HTML> wskazuje, że kod został stworzony w wersji

A. 6

B. 7

C. 4

D. 5

Gdy widzisz deklarację <!DOCTYPE HTML>, to znaczy, że mówimy o wersji HTML5. To obecny standard, który wprowadza naprawdę sporo nowych funkcji w porównaniu do wcześniejszych wersji. Na przykład, HTML5 pozwala na osadzanie audio i wideo bez potrzeby dodatkowych wtyczek, co jest super wygodne. Mamy też fajne semantyczne elementy jak <article>, <section> czy <nav>, które sprawiają, że łatwiej zorganizować treści na stronie. Ważne jest, żeby zawsze na początku dokumentu umieszczać tę deklarację, bo to pozwala przeglądarkom na prawidłowe wyświetlanie strony. Dzięki temu unikamy problemów z interpretacją kodu, co z doświadczenia mówię, jest naprawdę istotne.

Pytanie 13

Gdzie należy umieścić znacznik metajęzyka HTML?

A. pomiędzy znacznikami paragrafu

B. w sekcji nagłówkowej witryny internetowej

C. w dolnej części witryny internetowej

D. pomiędzy znacznikami <body> ... </body>

Znacznik metajęzyka HTML, czyli tag <meta>, jest kluczowym elementem w sekcji nagłówkowej (head) dokumentu HTML. To tutaj umieszczamy informacje dotyczące dokumentu, takie jak jego tytuł, opis, słowa kluczowe oraz dane dotyczące kodowania i viewportu. Na przykład, aby ustawić kodowanie znaków na UTF-8, używamy znacznika <meta charset="UTF-8">. Jest to zgodne z wytycznymi W3C i najlepszymi praktykami SEO, ponieważ odpowiednie metadane pomagają wyszukiwarkom w zrozumieniu treści witryny. Inny przykład to <meta name="viewport" content="width=device-width, initial-scale=1.0">, który zapewnia, że strona jest responsywna na urządzeniach mobilnych. Umieszczając te znaczniki w nagłówku, można poprawić zarówno użyteczność, jak i widoczność witryny w internecie.

Pytanie 14

Jakie efekt osiągnie się za pomocą przedstawionego formatowania CSS dla nagłówka trzeciego poziomu?

A. kolor tekstu będzie szary

B. tło będzie w odcieniu szarym

C. kolor tekstu będzie pomarańczowy

D. tło będzie pomarańczowe

Poprawna odpowiedź dotycząca tła pomarańczowego wynika z zasady specyficzności CSS W przedstawionym przykładzie stylu dla elementu h3 zastosowano właściwość background-color przypisując jej wartość orange bezpośrednio w znaczniku HTML co zwiększa specyficzność takiego stylu nad stylem zdefiniowanym w sekcji style w nagłówku strony Specyficzność w CSS to mechanizm określający który styl ma pierwszeństwo w przypadku konfliktu stylów dla tego samego elementu Styl wbudowany inline ma wyższą specyficzność niż style określone w sekcjach style co oznacza że definiując background-color inline jako orange nadpisuje on wcześniej zdefiniowane style Dzięki temu można precyzyjnie kontrolować wygląd poszczególnych elementów na stronie co jest dobrą praktyką w przypadku gdy konieczne są jednorazowe zmiany stylu dla konkretnego elementu Warto jednak pamiętać że nadmierne wykorzystywanie stylów inline może prowadzić do trudności w zarządzaniu wyglądem całej strony dlatego dobrą praktyką jest używanie ich oszczędnie oraz stosowanie zewnętrznych arkuszy stylów CSS tam gdzie to możliwe

Pytanie 15

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

<video width="640" height="480" controls>
    <source src="animacja.mp4" type="video/mp4">
</video>

A. Kod może nie działać w przeglądarkach, które nie wspierają HTML5.

B. Ścieżka do pliku jest niepoprawna, nie zawiera pełnej ścieżki.

C. Plik animacja.mp4 powinien mieć rozdzielczość 640x480 pikseli, aby można go było odtworzyć.

D. Użytkownik nie będzie miał możliwości kontrolowania odtwarzania wideo.

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

Pytanie 16

Określ właściwą sekwencję stylów CSS, biorąc pod uwagę ich priorytet w formatowaniu elementów strony WWW?

A. Styl zewnętrzny, Wydzielone bloki, Styl lokalny

B. Rozciąganie stylu, Styl zewnętrzny, Styl lokalny

C. Styl lokalny, Styl wewnętrzny, Styl zewnętrzny

D. Styl wewnętrzny, Styl zewnętrzny, Rozciąganie stylu

Wskazana odpowiedź, czyli Lokalny, Wewnętrzny, Zewnętrzny, jest zgodna z zasadami kaskadowego stylu arkuszy CSS. Istotą kaskadowości jest to, że style są stosowane według określonej hierarchii. Style lokalne (wbudowane) mają najwyższy priorytet, co oznacza, że jeśli na danym elemencie zastosowano styl lokalny, to zdominuje on wszelkie inne style. Przykład użycia stylu lokalnego to nadanie koloru tła dla konkretnego przycisku poprzez atrybut 'style': <button style='background-color: red;'>Przycisk</button>. W przypadku, gdy nie ma stylu lokalnego, przetwarzany jest styl wewnętrzny, który można zdefiniować w sekcji <style> w nagłówku dokumentu HTML. Na przykład: <style>p { color: blue; }</style> sprawi, że wszystkie akapity będą miały niebieski kolor. Dopiero na końcu brane są pod uwagę style zewnętrzne, które są definiowane w osobnych plikach CSS, na przykład: <link rel='stylesheet' href='style.css'>. Dlatego znajomość tej hierarchii jest kluczowa dla skutecznego tworzenia stylów, co przekłada się na lepsze zarządzanie wyglądem strony oraz unikanie konfliktów stylów. Warto również pamiętać o zasadzie „specyficzności”, która dodatkowo komplikuje temat, ponieważ style mogą mieć różny priorytet w zależności od ich specyfikacji.

Pytanie 17

Jakim znacznikiem można wprowadzić listę numerowaną (uporządkowaną) w dokumencie HTML?

A. <ul>

B. <li>

C. <ol>

D. <dl>

Znacznik <ol> służy do wstawiania list numerowanych (uporządkowanych) w dokumentach HTML. Jego zastosowanie pozwala na tworzenie list, gdzie każdy element jest automatycznie numerowany, co jest szczególnie przydatne w sytuacjach, gdy kolejność elementów ma znaczenie, na przykład w przepisach kulinarnych, instrukcjach czy krokach do wykonania. Warto pamiętać, że elementy listy umieszczane są w znaczniku <li>, który określa każdy pojedynczy wpis na liście. Stosowanie znaczników zgodnych z zaleceniami W3C zapewnia, że strona jest zgodna z zasadami dostępności oraz ułatwia interpretację treści przez wyszukiwarki. Przykład użycia: <ol><li>Krok pierwszy</li><li>Krok drugi</li></ol>, co wygeneruje numerowaną listę z dwoma krokami. Przestrzeganie standardów oraz dobrych praktyk w tworzeniu struktury HTML jest kluczowe dla zapewnienia przejrzystości i efektywności strony internetowej.

Pytanie 18

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

D. JPG

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 19

Aby włączyć kaskadowy arkusz stylów zapisany w zewnętrznym pliku, należy zastosować poniższy fragment kodu HTML?

A. <meta charset="styl.css" />

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

C. <div id="styl.css" relation="css" />

D. <optionvalue="styl.css" type="text/css" />

Odpowiedź <link rel="stylesheet" type="text/css" href="styl.css" /> jest poprawna, ponieważ jest to standardowy sposób dołączania zewnętrznych arkuszy stylów w HTML. Element <link> jest używany do powiązania dokumentu HTML z zewnętrznym źródłem CSS. Atrybut 'rel' informuje przeglądarkę, że jest to arkusz stylów, natomiast atrybut 'href' wskazuje ścieżkę do pliku CSS. Dzięki temu przeglądarka może załadować stylizacje z pliku, co pozwala na oddzielenie treści od stylu, co jest zgodne z zasadą separacji, kluczową w projektowaniu stron internetowych. Na przykład, dodając ten fragment kodu w sekcji <head> dokumentu HTML, możemy łatwo zarządzać wyglądem wielu stron, zmieniając tylko jeden plik CSS. To podejście zwiększa wydajność i ułatwia konserwację strony, co jest szczególnie ważne w większych projektach. W praktyce, aby załadować różne style dla różnych urządzeń, możemy użyć atrybutu 'media', co pozwoli na bardziej elastyczne podejście do zarządzania stylami.

Pytanie 20

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

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

B. volume="-100"

C. balance="10"

D. loop="10"

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 21

W dokumencie HTML umieszczono tekst sformatowany określonym stylem. Aby dodać do tego tekstu kilka słów sformatowanych innym stylem, należy użyć znacznika

A. <span>

B. <section>

C. <table>

D. <hr>

Znaczniki <hr>, <table> oraz <section> nie są odpowiednie do wtrącania fragmentów tekstu w innym stylu. <hr> to znacznik, który wprowadza poziomą linię, służący do wizualnego oddzielania elementów na stronie, a nie do formatowania tekstu. Stosowanie go w miejscu, gdzie chcemy zmienić styl fragmentu tekstu, byłoby nieefektywne i zmniejszałoby czytelność. Z kolei <table> jest używane do tworzenia tabel, co oznacza, że jego zastosowanie ogranicza się do strukturyzowania danych w formie wierszy i kolumn. Tego znacznika nie można użyć do lokalnego formatowania tekstu, ponieważ wprowadza on zupełnie inny kontekst i zmienia sposób, w jaki przeglądarka interpretuje i wyświetla zawartość. Ostatecznie <section> jest stosowane do grupowania powiązanych treści w sekcję dokumentu, co jest przydatne w kontekście organizacji treści, ale nie ma zastosowania w przypadku, gdy chcemy zmienić styl pojedynczych wyrazów lub fraz. Każdy z tych znaczników ma swoje specyficzne zastosowanie w HTML, które nie odpowiada potrzebie lokalnego formatowania tekstu, co czyni je niewłaściwymi wyborami w tym kontekście.

Pytanie 22

Jakie właściwości stylu CSS poprawnie definiują dla akapitu czcionkę: Arial; jej wielkość: 16 pt; oraz styl czcionki: kursywa?

A. p {font-style: Arial; size: 16px; font-weight: normal;}

B. p {font-style: Arial; font-size: 16pt; font-variant: normal;}

C. p {font-family: Arial; font-size: 16px; font-variant: normal;}

D. p {font-family: Arial; font-size: 16pt; font-style: italic;}

Odpowiedź p {font-family: Arial; font-size: 16pt; font-style: italic;} jest poprawna, ponieważ zawiera wszystkie istotne właściwości, które definiują krój, rozmiar oraz styl czcionki dla akapitu. Właściwość font-family definiuje krój czcionki, w tym przypadku Arial, co jest zgodne z wymaganiami. Właściwość font-size ustawia rozmiar czcionki na 16 punktów (pt), co jest standardowym sposobem definiowania wielkości czcionki w kontekście typografii. Ponadto właściwość font-style została poprawnie użyta do określenia stylu pochylenia czcionki, co w CSS jest reprezentowane przez wartość italic. Te właściwości są zgodne z dobrymi praktykami w CSS, które zalecają precyzyjne definiowanie czcionek, aby zapewnić spójność w prezentacji tekstu. Przykładowo, stosując ten styl w dokumencie HTML, uzyskasz wyraźnie wyodrębniony akapit, który będzie atrakcyjny wizualnie i czytelny. Zastosowanie odpowiednich jednostek, takich jak pt dla rozmiaru czcionki, jest również istotne dla zapewnienia odpowiedniej skalowalności na różnych urządzeniach.

Pytanie 23

W programie INKSCAPE / COREL aby uzyskać przedstawiony efekt napisu, należy

A. zastosować funkcję wykluczenia z kołem.

B. zastosować funkcję sumy z kołem.

C. skorzystać z funkcji gradientu.

D. skorzystać z funkcji wstaw / dopasuj tekst do ścieżki.

Twoja odpowiedź jest prawidłowa. W programach graficznych takich jak Inkscape czy CorelDRAW, aby ułożyć tekst wzdłuż zakrzywionej ścieżki, stosuje się funkcję dopasowania tekstu do ścieżki. Taka funkcja pozwala na zastosowanie tekstu w dowolnym kierunku, co daje dużą swobodę w projektowaniu grafik. Można to robić na różne sposoby, na przykład poprzez ręczne rysowanie ścieżki, a następnie dopasowanie do niej tekstu lub poprzez użycie gotowych kształtów. W CorelDRAW funkcja ta nosi nazwę 'fit text to path', natomiast w Inkscape nazywa się 'text to path'. Jest to technika często stosowana w projektowaniu logo, plakatów, czy też w innych projektach, gdzie tekst musi być dostosowany do niestandardowych kształtów. Prawidłowe zrozumienie i umiejętność wykorzystania tej funkcji znacząco podnosi efektywność pracy w programach graficznych.

Pytanie 24

W HTML, aby ustawić tytuł dokumentu na "Moja strona", który pojawi się na karcie przeglądarki internetowej, należy użyć zapisu

A. <title>Moja strona</title>

B. <meta title="Moja strona">

C. <head>Moja strona</head>

D. <meta name="title" content="Moja strona">

Element <title> w HTML jest naprawdę ważny, bo to właśnie on ustala, co zobaczysz na zakładce w przeglądarce. Powinien być umieszczony w sekcji <head>, co jest zgodne z tym, co mówi W3C. Poprawny zapis wygląda tak: <title>Moja strona</title>, co sprawia, że "Moja strona" będzie się pokazywać jako tytuł w przeglądarce. Tytuł strony ma spore znaczenie dla SEO, bo wpływa na to, jak strona jest pozycjonowana w wynikach wyszukiwania. Warto, żeby tytuł był krótki, ale jednocześnie zawierał istotne informacje, a najlepiej, żeby nie miał więcej niż 60 znaków, żeby się nie obcinał w wynikach. Fajnie też umieścić w tytule kluczowe słowa, które opisują, o czym jest strona, bo to może zwiększyć jej atrakcyjność i CTR. Dobrze skonstruowany tytuł to też lepsza dostępność, bo ułatwia użytkownikom poruszanie się i orientowanie w otwartych zakładkach.

Pytanie 25

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

 h1 i {color: red;}

Kolorem czerwonym zostanie zapisany

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

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

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

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

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

Pytanie 26

Który efekt został zaprezentowany na filmie?

A. Zwiększenie ostrości zdjęcia.

B. Zmniejszenie kontrastu zdjęcia.

C. Przenikanie zdjęć.

D. Zmiana jasności zdjęć.

W tym zadaniu łatwo pomylić kilka różnych rodzajów operacji na obrazie, bo wszystkie jakoś „zmieniają wygląd zdjęcia”, ale działają zupełnie inaczej. Efekt pokazany na filmie to przenikanie dwóch zdjęć w czasie, czyli animowane przejście między jednym obrazem a drugim. Kluczowa cecha: widzimy jednocześnie dwa zdjęcia, jedno stopniowo zanika, a drugie stopniowo się pojawia. To nie jest typowa operacja edycyjna na pojedynczym pliku graficznym, tylko efekt animacyjny, często wykorzystywany w pokazach slajdów, sliderach na stronach WWW i w montażu wideo. Zmiana jasności zdjęć to zupełnie inny rodzaj przetwarzania. Jasność modyfikuje poziom luminancji całego obrazu lub jego fragmentów – obraz staje się ciemniejszy albo jaśniejszy, ale dalej jest to to samo zdjęcie. Nie pojawia się nowe, drugie zdjęcie, nie ma nakładania dwóch kadrów. W programach do grafiki mamy to jako „Brightness”, „Exposure” czy „Levels”. Jeśli na filmie widać, że jeden obraz przechodzi płynnie w inny, to nie jest korekta jasności, tylko przejście między dwiema warstwami. Podobnie z ostrością – zwiększenie ostrości polega na podbiciu kontrastu na krawędziach, żeby szczegóły wyglądały wyraźniej. W praktyce używa się filtrów typu Unsharp Mask, Smart Sharpen albo algorytmów wyostrzania w czasie rzeczywistym. Obraz przed i po wyostrzeniu to ciągle ta sama klatka, tylko z innym przetworzeniem detali, nie ma efektu zanikania jednego zdjęcia i pojawiania się drugiego. Zmniejszenie kontrastu to kolejna korekta globalna, która spłaszcza różnice między jasnymi a ciemnymi partiami obrazu. Zdjęcie robi się bardziej „szare”, mniej dynamiczne. Znowu – cały czas pracujemy na jednym ujęciu, bez miksowania dwóch fotografii. Typowym błędem myślowym przy takich pytaniach jest to, że skoro coś się „zmienia w czasie”, to musi chodzić o jakąś regulację parametrów typu jasność czy kontrast. Tymczasem w efektach multimedialnych bardzo często operujemy na wielu warstwach – dwa obrazy, dwie klatki wideo – i animujemy ich wzajemną przezroczystość. Właśnie to jest esencją przenikania zdjęć i odróżnia je od zwykłych korekt obrazu.

Pytanie 27

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

A. Odpowiedź 4: D

B. Odpowiedź 2: B

C. Odpowiedź 1: A

D. Odpowiedź 3: C

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

Pytanie 28

<form>
  <input type="email" id="addr" required>
  <input type="submit" value="Zapisz">
</form>

Na podstawie przedstawionego kodu formularza HTML można powiedzieć, że pole edycyjne:

A. wymaga wpisania jedynie znaków alfanumerycznych.

B. nie może być puste i wymaga wpisania tekstu ze znakiem @.

C. nie powinno zawierać znaków numerycznych.

D. może być puste.

W tym fragmencie kodu HTML masz dwa bardzo ważne atrybuty: type="email" oraz required. To właśnie one razem powodują, że poprawna jest odpowiedź, że pole nie może być puste i wymaga wpisania tekstu ze znakiem @. Atrybut required oznacza, że pole jest obowiązkowe. Przeglądarka, zgodnie ze specyfikacją HTML5, nie pozwoli wysłać formularza, dopóki pole nie będzie wypełnione. Użytkownik kliknie przycisk „Zapisz”, a formularz po prostu się nie wyśle – pojawi się komunikat walidacyjny po stronie przeglądarki. To jest tzw. walidacja po stronie klienta, domyślnie wbudowana w HTML. Z kolei type="email" uruchamia specjalny mechanizm sprawdzania formatu wpisanego tekstu. Przeglądarka sprawdza, czy ciąg znaków wygląda jak adres e‑mail: musi zawierać co najmniej znak @ i jakąś część przed i po nim. To nie jest super zaawansowana walidacja, ale wystarcza jako pierwszy filtr, np. "[email protected]" przejdzie, a "jan.domena.pl" już nie. Moim zdaniem to bardzo wygodne, bo nie trzeba od razu pisać własnego JavaScriptu tylko po to, żeby odsiać oczywiste błędy. W praktyce w aplikacjach webowych zwykle łączy się tę prostą walidację HTML5 z dodatkowymi sprawdzeniami po stronie serwera (np. w PHP czy w innym backendzie), bo dane z formularza zawsze trzeba traktować z ograniczonym zaufaniem. Dobrym nawykiem jest też dodanie atrybutu name, np. name="email", żeby serwer mógł poprawnie odebrać wartość pola. Warto też wiedzieć, że niektóre przeglądarki mobilne, gdy widzą type="email", podpowiadają użytkownikowi specjalną klawiaturę z łatwym dostępem do znaku @ i kropki, co realnie poprawia wygodę wpisywania adresu. To taki mały szczegół, ale w profesjonalnych projektach UX ma znaczenie. Podsumowując: required blokuje puste wysłanie formularza, a type="email" wymusza poprawny, podstawowy format adresu ze znakiem @ – dokładnie to opisuje poprawna odpowiedź.

Pytanie 29

Który z przedstawionych ciągów znaków nie pasuje do wzorca wyrażenia regularnego określonego poniżej?

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

A. Kasprowicza

B. Nowakowska-Kowalska

C. Kowalski

D. Jelenia Góra

Wyrażenie regularne jest narzędziem do precyzyjnego przeszukiwania i manipulowania tekstem zgodnie z określonymi wzorcami. W podanym wzorcu, (([A-ZŁŻ][a-ząęóźżćńś]{2,})(-[A-ZŁŻ][a-ząęóźżćńś]{2,})?)?, szukamy ciągów rozpoczynających się dużą literą, następujących po niej przynajmniej dwóch małych liter, z możliwością oddzielenia myślnikiem i kolejną sekwencją podobnego formatu. Odpowiedź Jelenia Góra nie pasuje do tego wzorca, ponieważ zawiera spację, co łamie ciągłość wzorca. Wyrażenia regularne są kluczowe w przetwarzaniu danych tekstowych i walidacji, ponieważ pozwalają na dynamiczne określanie struktury danych. Przykłady zastosowania obejmują filtrowanie danych wejściowych w formularzach czy analizowanie logów serwerowych. W praktyce, stosując wyrażenia regularne, można skutecznie odróżniać i przetwarzać skomplikowane struktury tekstowe zgodnie z wymaganymi kryteriami, co jest standardem w branżach opartych na danych. Zrozumienie, jak działa taki wzorzec, pomaga w wielu zadaniach związanych z przetwarzaniem tekstu, w tym w programowaniu i analizie danych.

Pytanie 30

Znacznik

<pre> </pre>

służy do prezentacji:

A. znaku wielokropka

B. treści polską czcionką

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

D. znaku przekreślenia

Znacznik <pre> służy do wyświetlania treści w formacie, który zachowuje oryginalne formatowanie i białe znaki. Treści umieszczone wewnątrz tego znacznika są wyświetlane czcionką o stałej szerokości (monospace), co sprawia, że każda litera i znak zajmują tę samą ilość miejsca. Jest to szczególnie przydatne przy prezentacji kodu komputerowego, danych tabelarycznych lub wszelkich innych informacji, gdzie istotne jest zachowanie struktury. Na przykład, w języku HTML, umieszczając kod CSS lub JavaScript w znaczniku <pre>, programista zapewnia, że formatowanie kodu (np. wcięcia) jest widoczne, co ułatwia czytanie i zrozumienie. Zastosowanie znacznika <pre> jest zgodne z zasadami dobrych praktyk w web designie, gdzie czytelność kodu i danych jest kluczowa dla efektywnej komunikacji z użytkownikami oraz dla poprawnego działania aplikacji webowych.

Pytanie 31

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

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

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

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

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

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

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

Pytanie 32

Jakie polecenie HTML poprawnie odwzorowuje przedstawioną hierarchiczną strukturę tekstu, która została wyświetlona przez przeglądarkę w następujący sposób: Rozdział 1 tekst Podrozdział 1.1 tekst Podrozdział 1.2?

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

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

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

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

Poprawny kod HTML do definiowania hierarchicznej struktury tekstu oparty jest na semantycznym znaczeniu tagów. W tym przypadku, użycie <h1> dla 'Rozdział 1' jako głównego nagłówka jest zgodne z zasadami projektowania stron internetowych, gdyż <h1> powinien być używany dla najważniejszego nagłówka na stronie. Następnie zastosowanie <h2> dla 'Podrozdział 1.1' i 'Podrozdział 1.2' wskazuje na hierarchię, gdzie te podrozdziały są podkategoriami głównego rozdziału. Tag <p> jest użyty do definiowania paragrafów tekstowych, co zapewnia odpowiednie formatowanie i czytelność. Taki układ jest zgodny z wytycznymi W3C, które rekomendują używanie nagłówków w strukturze dokumentu HTML, co ułatwia zarówno przeglądarkom, jak i użytkownikom zrozumienie hierarchii treści. Przykładowo, strona internetowa z taką strukturą będzie lepiej indeksowana przez wyszukiwarki, co przyczyni się do poprawy SEO.

Pytanie 33

Jaki rezultat zostanie wyświetlony po wykonaniu przedstawionego kodu HTML?

<ol>
    <li>punkt</li>
    <li>punkt
        <ul>
            <li>punkt</li>
            <li>punkt</li>
        </ul>
    </li>
    <li>punkt</li>
</ol>
<ol type="A" start="4">
    <li>punkt</li>
</ol>

1. punkt

2. punkt

punkt
punkt

3. punkt

4. punkt

1. punkt

2. punkt

punkt
punkt

3. punkt

4. punkt

1. punkt

2. punkt

punkt
punkt

3. punkt

D. punkt

1. punkt

2. punkt

punkt
punkt

3. punkt

D. punkt

A. B.

B. D.

C. A.

D. C.

Niestety, twoja odpowiedź nie była poprawna. Może wynikać to z braku zrozumienia struktury i semantyki kodu HTML, szczególnie w kontekście list uporządkowanych (``) i nieuporządkowanych (``). Kod HTML w pytaniu składa się z dwóch uporządkowanych list, z których pierwsza zawiera trzy elementy. Drugi element pierwszej listy zawiera zagnieżdżoną nieuporządkowaną listę z dwoma elementami. Warto zaznaczyć, że elementy listy nieuporządkowanej są zazwyczaj wyświetlane z kropkami. Druga lista uporządkowana zaczyna numerację od litery 'D', co jest zgodne z poprawną odpowiedzią. Typowym błędem jest niezauważenie zagnieżdżonych list lub niepoprawne zrozumienie funkcji atrybutu start w liście uporządkowanej. W praktyce, zrozumienie struktury i semantyki tagów HTML jest kluczowe dla tworzenia efektywnych i użytecznych stron internetowych. Proponuję, abyś ponownie przeanalizował kod HTML, skupiając się na strukturze list i zrozumieniu atrybutów stosowanych w tagach list.

Pytanie 34

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

A. XHTML1.0

B. HTML4

C. XHTML 2.0

D. HTML5

HTML5 wprowadził nowe znaczniki semantyczne, takie jak <header>, <footer> oraz <nav>, które mają na celu poprawę struktury i czytelności kodu HTML. Te znaczniki pozwalają na lepsze określenie ról poszczególnych części dokumentu, co jest istotne zarówno dla programistów, jak i dla wyszukiwarek internetowych oraz oprogramowania asystującego. Przykładowo, znacznik <header> zazwyczaj zawiera nagłówki i metadane, podczas gdy <footer> jest przeznaczony na informacje końcowe, takie jak prawa autorskie czy linki do polityki prywatności. Z kolei <nav> wskazuje sekcję nawigacyjną, co ułatwia użytkownikom poruszanie się po stronie. Użycie tych znaczników zgodnie z ich zamierzonymi funkcjami poprawia semantykę dokumentu HTML5, co jest zgodne z najlepszymi praktykami w zakresie SEO i dostępności. Warto również zauważyć, że HTML5 wprowadza inne elementy, takie jak <article> czy <section>, które dodatkowo wspierają tworzenie dobrze zorganizowanej i zrozumiałej struktury dokumentu. W związku z tym, stosowanie nowych znaczników w HTML5 jest niezwykle korzystne zarówno dla twórców, jak i dla użytkowników stron internetowych.

Pytanie 35

Ikona przedstawiająca funkcję w edytorze grafiki rastrowej, znana jako „kubełek”, pozwala na

A. pobranie wybranej barwy i ustawienie jej jako aktywnej

B. zmianę bieżących kolorów

C. wypełnienie obszaru, który został zaznaczony kolorem

D. wybór obszaru o identycznym kolorze

Narzędzie 'kubełek', często spotykane w edytorach grafiki rastrowej takich jak Adobe Photoshop czy GIMP, służy do wypełniania zaznaczonego obszaru kolorem. Jest to szczególnie przydatne w sytuacjach, gdy chcemy szybko zapełnić jednolitym kolorem duże powierzchnie, takie jak tła lub obiekty. Działa na zasadzie zalewania najbliższych pikseli wybranym kolorem, uwzględniając podobieństwo kolorów, co można regulować za pomocą opcji tolerancji. W praktyce, narzędzie to usprawnia proces tworzenia grafik, ponieważ eliminuje potrzebę ręcznego kolorowania każdego piksela. Dodatkowo 'kubełek' może być stosowany w połączeniu z różnymi trybami mieszania, co pozwala na uzyskanie bardziej zaawansowanych efektów wizualnych. Praca z 'kubełkiem' wymaga zrozumienia koncepcji warstw, ponieważ wypełnianie na konkretnej warstwie ma wpływ na finalny wygląd projektu. Wiedza o tym, jak skutecznie używać narzędzia 'kubełek', jest niezbędna dla każdego grafika cyfrowego, który chce pracować efektywnie i profesjonalnie, realizując projekty zgodnie z najlepszymi praktykami branżowymi.

Pytanie 36

Co oznacza jednostka ppi (pixels per inch)?

A. określa rozdzielczość obrazów wektorowych

B. określa rozdzielczość obrazów rastrowych

C. jest parametrem określającym rozdzielczość cyfrowych urządzeń wykonujących pomiary

D. określa rozdzielczości obrazów generowanych przez drukarki i plotery

Jednostka ppi (pixels per inch) opisuje gęstość pikseli, czyli ile pojedynczych punktów obrazu przypada na jeden cal długości. W praktyce oznacza to rozdzielczość obrazów rastrowych, bo grafika rastrowa składa się właśnie z siatki pikseli. Im wyższe ppi, tym więcej informacji szczegółowej na danym obszarze i tym ostrzejszy, bardziej „gładki” obraz na ekranie albo w wydruku. Moim zdaniem warto to sobie wyobrazić jak mozaikę: więcej małych kafelków na tym samym obszarze daje dokładniejszy obraz. W projektowaniu grafiki na potrzeby WWW typową wartością jest 72–96 ppi, bo tyle mniej więcej mają monitory i urządzenia według standardów branżowych. Natomiast do druku przyjmuje się zwykle 300 ppi dla materiałów wysokiej jakości, co wynika z dobrych praktyk poligraficznych. Pamiętaj, że ppi dotyczy pliku rastrowego (np. PNG, JPG, PSD), a nie samej drukarki – drukarki opisuje się parametrem dpi. W pracy grafika, DTP‑owca czy webdesignera właściwe ustawienie ppi jest kluczowe, żeby obraz nie wyszedł rozmazany, ząbkowany albo nienaturalnie przeskalowany. W narzędziach takich jak Photoshop, GIMP czy Affinity Photo zawsze przy tworzeniu nowego dokumentu warto świadomie ustawić ppi odpowiednio do przeznaczenia: ekran, druk, prezentacja multimedialna.

Pytanie 37

Co można powiedzieć o stylu hiperłącza na podstawie opisu CSS, zakładając, że żadne inne style nie zostały zdefiniowane?

a:link {
  color: green;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: underline;
}

A. Hiperłącze jest zawsze podkreślone.

B. Gdy kursor znajdzie się na obszarze hiperłącza, pojawia się podkreślenie i tekst przyjmuje kolor czerwony.

C. Tekst odwiedzonego hiperłącza jest koloru czerwonego.

D. Gdy hiperłącze jest nieodwiedzone, jego tekst jest koloru niebieskiego z podkreśleniem.

Twoja odpowiedź jest poprawna. W przypadku hiperłącza, w momencie, gdy kursor znajduje się na obszarze hiperłącza, pojawia się podkreślenie i tekst przyjmuje kolor czerwony. Jest to efekt zastosowania stylu CSS w stanie 'hover'. Styl ten umożliwia dynamiczną zmianę wyglądu elementu, kiedy kursor myszy znajduje się nad nim. Jest to praktyka powszechnie stosowana w celu zwiększenia użyteczności i interaktywności stron internetowych. Dobrą praktyką jest również zapewnienie kontrastu między kolorem tła a tekstem dla lepszej czytelności. W tym przypadku, kolor tekstu zmienia się na czerwony, co zapewnia wyraźny kontrast i zwraca uwagę użytkownika. Równocześnie dodanie podkreślenia jest dodatkowym wizualnym wskaźnikiem, że dany element jest hiperłączem. Zastosowanie takiego stylu pozwala na intuicyjne i efektywne poruszanie się po stronie internetowej.

Pytanie 38

Wybierz prawidłowy sposób umieszczania komentarzy w kodzie źródłowym HTML

A. "" informacje komentarza ""

B. -- informacje komentarza --

C.

D. /* informacje komentarza */

Poprawny komentarz w HTML musi być zapisany dokładnie w formie: . To jest jedyny format zgodny ze specyfikacją HTML (HTML5, ale też starsze wersje). Przeglądarka traktuje wszystko, co znajduje się między ciągiem znaków , jako komentarz, czyli tego nie wyświetla użytkownikowi i nie interpretuje jako kod. Dzięki temu można w kodzie zostawiać sobie uwagi, opisy sekcji, tymczasowo coś „wyłączyć” albo oznaczyć fragment do późniejszej edycji. W praktyce stosuje się np.:  albo . Moim zdaniem komentarze są szczególnie ważne w większych projektach, bo po miesiącu naprawdę trudno pamiętać, po co była jakaś dziwna konstrukcja w HTML. Warto też wiedzieć, że w HTML nie stosujemy ani //, ani /* */ jak w JavaScript czy CSS. To są inne języki, inne reguły. Jeżeli wstawisz coś w stylu , to cały ten akapit jest ignorowany przez przeglądarkę, co jest wygodne przy testowaniu. Dobra praktyka jest też taka, żeby nie przesadzać z ilością komentarzy, ale tam gdzie struktura jest mniej oczywista (np. zagnieżdżone divy, rozbudowane formularze), lepiej dodać krótki, konkretny opis. W projektach komercyjnych często używa się komentarzy do oznaczania sekcji layoutu, np. , , co ułatwia pracę całemu zespołowi. W skrócie: tylko zapis z nawiasami ostrymi i myślnikami, czyli , jest w HTML prawidłowy i rozpoznawany jako komentarz.

Pytanie 39

Który z języków skryptowych nie wykonuje operacji po stronie serwera?

A. ASP

B. PHP

C. CSS

D. Perl

CSS, czyli kaskadowe arkusze stylów, to język używany do stylizacji stron internetowych. Jego głównym celem jest określenie wyglądu elementów HTML, co obejmuje kolory, czcionki, rozmieszczenie oraz responsywność. CSS nie wykonuje zadań po stronie serwera, ponieważ działa po stronie klienta, co oznacza, że interpretacja i renderowanie stylów odbywa się w przeglądarkach internetowych użytkowników. Przykładem zastosowania CSS jest stylizacja przycisków, nagłówków czy układów stron, co pozwala na tworzenie atrakcyjnych wizualnie interfejsów użytkownika. Standardy CSS są regulowane przez W3C, a najnowsze wersje, takie jak CSS3, wprowadzają dodatkowe możliwości, takie jak animacje czy zaawansowane selektory. Dzięki CSS można również tworzyć responsywne strony internetowe, które dostosowują się do różnych rozmiarów ekranu, co jest istotne w dobie wzrostu użycia urządzeń mobilnych.

Pytanie 40

Który z atrybutów obrazu jest niezbędny w znaczniku

<img src="nowa_lektura.jpg" ...>

aby ułatwić korzystanie ze strony użytkownikom z niepełnosprawnością narządu wzroku?

A. "height="42" width="42"

B. align="middle"

C. usemap="#lekturamap"

D. alt="technik informatyk"

Prawidłowy atrybut to alt="technik informatyk", bo właśnie atrybut alt opisuje treść lub funkcję obrazu i jest kluczowy dla dostępności (accessibility). Czytniki ekranu, z których korzystają osoby niewidome lub słabowidzące, nie „widzą” grafiki – one odczytują tekst alternatywny. Jeśli alt jest dobrze uzupełniony, użytkownik wie, co przedstawia obraz, albo jaką pełni funkcję (np. przycisk, link, ikona). Bez tego opisowego tekstu obraz jest dla takiej osoby po prostu pustym miejscem na stronie. Z punktu widzenia standardów W3C i WCAG jest to jedna z absolutnie podstawowych dobrych praktyk. W wytycznych WCAG 2.x masz wprost zapisane, że treści nietekstowe muszą mieć tekst alternatywny. W praktyce: dla zdjęcia osoby można dać alt="Nauczyciel programowania przy komputerze", dla logo firmy alt="Logo firmy X" (albo pusty alt, jeśli logo jest tylko dekoracją, ale wtedy ważne są inne konteksty), dla przycisku w formie ikonki lupy alt="Szukaj". Moim zdaniem w realnych projektach najczęstszy błąd to wrzucanie przypadkowych tekstów w alt albo zostawianie go pustego, bo „przecież widać na obrazku”. Właśnie w takich sytuacjach użytkownik z niepełnosprawnością jest totalnie wykluczony. Dobrze opisany alt pomaga też, gdy grafika się nie załaduje (słaby internet, błąd ścieżki), bo przeglądarka wyświetli tekst zamiast obrazka. Warto też pamiętać, żeby nie powtarzać w alt tego, co już widać w podpisie bezpośrednio obok, tylko raczej go uzupełnić. W skrócie: alt jest obowiązkowy z punktu widzenia dostępności i jakościowo napisany tekst alternatywny to znak profesjonalnie zrobionej strony WWW.

Rozpocznij nowy egzamin

Powrót do strony głównej