Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 10 kwietnia 2026 08:11
Data zakończenia: 10 kwietnia 2026 08:36

Egzamin zdany!

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

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

A. p#tekst + div.obrazki

B. p.tekst, div#obrazki

C. p#tekst, div.obrazki

D. p.tekst + div#obrazki

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

Pytanie 2

Znaczniki HTML <strong> oraz <em>, które mają na celu podkreślenie istotności tekstu, pod względem formatowania odpowiadają znacznikom

A. <u> oraz <sup>

B. <b> oraz <i>

C. <b> oraz <u>

D. <i> oraz <mark>

Wybór błędnych znaczników HTML często wynika z niepełnego zrozumienia różnicy między semantyką a formatowaniem. Znacznik <u> służy do podkreślenia tekstu, co może być mylące w kontekście oznaczania ważności treści. Oznaczanie tekstu w ten sposób nie dostarcza żadnej informacji o jego znaczeniu, co jest kluczowe w tworzeniu dostępnych i zrozumiałych stron internetowych. Użycie <sup> oznacza tekst w indeksie górnym, co również nie ma związku z akcentowaniem ważności. W przypadku <b> i <u>, oba znaczniki służą do formatowania, ale ignorują istotne aspekty semantyki, co może prowadzić do nieporozumień w interpretacji treści przez przeglądarki oraz urządzenia asystujące. Użycie <i> oznacza tekst w kursywie, jednak podobnie jak <b>, jest to czysto wizualne formatowanie bez znaczenia semantycznego. W praktyce, nadmierne poleganie na takich znacznikach bez zrozumienia ich ról w kontekście semantyki prowadzi do tworzenia stron, które są mniej dostępne i mniej przyjazne dla użytkowników. Kluczowym elementem budowy nowoczesnych aplikacji webowych jest stosowanie odpowiednich znaczników, które nie tylko prezentują treść, ale również przekazują jej znaczenie, co jest podstawą dobrego UX oraz SEO.

Pytanie 3

Który z poniższych znaczników jest używany do definiowania list w HTML?

A. <ul>

B. <td>

C. <th>

D. <tr>

<ul> jest znacznikami HTML, które definiuje nieuporządkowaną listę. Użycie tego znacznika pozwala na przedstawienie elementów listy w formie graficznej, gdzie każdy element jest oznaczony punktem. Jest to podstawowy element w HTML, który jest zgodny z wytycznymi W3C i szeroko stosowany w tworzeniu responsywnych i estetycznych interfejsów użytkownika. Przykładowe zastosowanie <ul> może obejmować listy składników, funkcji, czy też elementów menu na stronie internetowej. Stosując <ul>, można także użyć znacznika <li>, aby określić poszczególne elementy listy, co zwiększa czytelność i strukturalizację treści. Znajomość i umiejętność stosowania tych znaczników jest kluczowa dla każdego web developera, aby tworzyć dostępne i zrozumiałe dla użytkowników interfejsy, a także wspierać praktyki SEO poprzez odpowiednią organizację treści.

Pytanie 4

Przedstawiona linia kreskowa w stylu obramowania CSS jest określona własnością

A. dashed

B. solid

C. doted

D. double

Dobrze zrozumiałeś temat. Linia kreskowa w stylu CSS jest określana właściwością 'dashed'. Jest to jedna z kilku wartości, które można przypisać właściwości 'border-style' w języku CSS, aby manipulować wyglądem obramowania elementu. Stosowanie różnych styli linii pozwala na tworzenie bardziej skomplikowanych i estetycznie przyjemnych projektów. Na przykład, styl 'dashed' może być używany do zaznaczania linków lub przycisków, aby zwrócić uwagę użytkownika. Ważne jest jednak, aby zawsze pamiętać o utrzymaniu konsekwencji w projektowaniu stron internetowych. Dobre praktyki zalecają, aby wybierać styl obramowania, który najlepiej pasuje do ogólnego stylu strony. Podsumowując, właściwość 'border-style' jest kluczowym narzędziem w projektowaniu stron internetowych.

Pytanie 5

Wskaż, który paragraf jest sformatowany przy użyciu podanego stylu CSS:

p {
    font-family: serif;
    background-color: Teal;
    color: white;
    font-style: italic;
}

A. Paragraf 3

B. Paragraf 4

C. Paragraf 1

D. Paragraf 2

Paragraf 4 jest prawidłowo sformatowany zgodnie z przedstawionym stylem CSS. W stylu tym zastosowano cztery właściwości: font-family o wartości serif co sugeruje użycie czcionki o kroju szeryfowym background-color ustawiony na Teal co ustawia tło na ciemnozielony kolor color ustawiony na White co oznacza że tekst powinien być biały oraz font-style ustawiony na italic co powoduje że tekst jest pochylony. Paragraf 4 spełnia te kryteria jest napisany czcionką szeryfową ma ciemnozielone tło biały tekst i jest kursywą. Zastosowanie takich stylów jest częste w projektowaniu stron internetowych gdzie ważne jest czytelne i estetyczne przedstawienie informacji. Używanie odpowiednich stylów CSS pozwala na lepszą organizację wizualną treści co jest kluczowe w tworzeniu interfejsów przyjaznych dla użytkownika. Stylowanie w CSS wspiera standardy takie jak CSS3 które wprowadzają nowe właściwości i ulepszenia umożliwiające bardziej zaawansowane i wydajne metody formatowania.

Pytanie 6

Kanał alfa jest wykorzystywany do określenia

A. podstawowych właściwości obiektu graficznego

B. wybranego fragmentu obiektu graficznego

C. przezroczystości obiektu graficznego

D. jasności oraz kontrastu kolorów

Kanał alfa to bardzo ważny element w grafice komputerowej, który odpowiada za to, jak przezroczyste są różne obiekty graficzne. W systemach kolorów, jak RGBA, kanał alfa jest dodatkowym składnikiem obok kolorów czerwonego, zielonego i niebieskiego. Dzięki niemu możemy określić, jak przezroczysty jest dany piksel. Wartości kanału alfa wahają się od 0, co oznacza całkowitą przezroczystość, do 255, co daje pełną nieprzezroczystość. Przykładem użycia kanału alfa są aplikacje graficzne, takie jak Photoshop czy GIMP, gdzie można na przykład zmieniać przezroczystość warstw. Te technologie, jak OpenGL czy DirectX, też korzystają z kanału alfa, żeby renderować obiekty w 3D. To wszystko sprawia, że obrazy i sceny stają się bardziej realistyczne, a efekty wizualne, takie jak cienie czy odbicia, wyglądają znacznie lepiej.

Pytanie 7

Grafik pragnie zmienić obraz JPG na format PNG bez utraty jakości, tak aby w obszarach, gdzie pierwotnie był kolor biały, w finalnym obrazie występowała przezroczystość. W tym celu powinien

A. zmniejszyć rozdzielczość obrazu

B. przekształcić obraz w odcienie szarości

C. dodać kanał alfa

D. zaimportować obraz do edytora grafiki wektorowej

Dodanie kanału alfa do obrazu JPG, aby uzyskać przezroczystość w kolorze białym, jest najlepszym podejściem. Kanał alfa to dodatkowa warstwa informacji w pliku graficznym, która definiuje przezroczystość każdego piksela. W formacie PNG, kanał alfa umożliwia tworzenie przezroczystych tła, co jest szczególnie przydatne w projektach, gdzie elementy graficzne muszą być nakładane na różne tła. W praktyce, aby uzyskać pożądany efekt, grafik powinien użyć narzędzi do edycji grafiki, takich jak Adobe Photoshop, GIMP lub Inkscape. Po zaimportowaniu obrazu JPG, użytkownik może użyć funkcji selekcji koloru, aby zaznaczyć obszary białe, a następnie usunąć je, co wprowadzi przezroczystość w tych miejscach. Na końcu, obraz można zapisać jako PNG, co zachowa wprowadzone zmiany. Tego typu operacje są standardem w pracy z grafiką komputerową, szczególnie w projektach związanych z web designem i tworzeniem materiałów reklamowych.

Pytanie 8

Taki styl CSS sprawi, że na stronie internetowej

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

A. punkt listy nienumerowanej będzie rys.gif

B. każdy punkt listy zyska osobne tło z grafiki rys.gif

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

D. rys.gif stanie się ramką dla listy nienumerowanej

Deklaracja CSS ul{ list-style-image: url('rys.gif'); } powoduje, że każdy element listy nienumerowanej (ul) używa obrazu rys.gif jako punktora. Właściwość list-style-image pozwala na zamianę domyślnego stylu punktów listy, takiego jak kropki czy kwadraty, na dowolny obrazek. Jest to przydatne, gdy chcemy nadać stronie unikalny wygląd lub dostosować ją do identyfikacji wizualnej marki. W praktyce oznacza to, że zamiast klasycznego punktora, użytkownicy zobaczą wybrany obraz, co może wpłynąć na estetykę i czytelność strony. Ważne jest, aby obraz był odpowiednio skalowany, aby nie zaburzał układu listy. List-style-image to standardowa właściwość CSS uznawana przez większość przeglądarek, co czyni ją uniwersalnym narzędziem w rękach projektanta stron. W procesie projektowania warto upewnić się, że wybrany obrazek jest dostępny dla wszystkich użytkowników, co można osiągnąć np. poprzez dodanie atrybutu alt w wersji tekstowej listy dla lepszej dostępności.

Pytanie 9

Aby zdefiniować stylizację tabeli w języku CSS w sposób, który umożliwi wyróżnienie wiersza, na który aktualnie najeżdża kursor myszy np. innym kolorem, należy użyć

A. pseudoklasy :visited

B. nowego selektora klasy dla wiersza tabeli

C. pseudoklasy :hover

D. pseudoelementu :first-line

Pseudoklasa :hover jest techniką CSS, która pozwala na zastosowanie stylów do elementu, gdy użytkownik na niego najedzie kursorem myszy. Dzięki temu można w prosty sposób wyróżnić wiersze tabeli, co zwiększa interaktywność i czytelność danych. W przypadku tabeli, aby wyróżnić aktualnie wskazywany wiersz, należy użyć reguły CSS, która odnosi się do elementu <tr> (wiersza tabeli) z zastosowaniem pseudoklasy :hover. Przykładowy kod CSS może wyglądać następująco: table tr:hover { background-color: #f0f0f0; } co spowoduje, że tło wiersza zmieni się na jasno szare, gdy kursor myszy znajdzie się nad tym wierszem. Taki sposób formatowania jest szczególnie przydatny w przypadku długich tabel, które mogą być trudne do przeglądania. Pseudoklasa :hover jest powszechnie stosowana w projektowaniu stron internetowych, w zgodności z W3C CSS Specification, co zapewnia jej szeroką kompatybilność z różnymi przeglądarkami. Warto także zauważyć, że można łączyć pseudoklasę :hover z innymi selektorami, aby uzyskać bardziej zaawansowane efekty wizualne.

Pytanie 10

Która właściwość języka CSS może przyjmować wartości: underline, overline, line-through?

A. text-decoration

B. text-style

C. font-weight

D. font-style

Poprawna odpowiedź to właściwość CSS `text-decoration`. To właśnie ona odpowiada za dodawanie różnych „linii” do tekstu: podkreślenia (`underline`), nadkreślenia (`overline`) oraz przekreślenia (`line-through`). W praktyce zapis wygląda np. tak: `a { text-decoration: underline; }` – klasyczny przykład dla linków, albo `del { text-decoration: line-through; }` dla tekstu usuniętego. W nowszych specyfikacjach CSS (CSS Text Decoration Module Level 3) ta właściwość została trochę rozbita na bardziej szczegółowe, jak `text-decoration-line`, `text-decoration-style`, `text-decoration-color`, ale w codziennym kodowaniu dalej bardzo często używa się skrótu `text-decoration`. Moim zdaniem warto od razu kojarzyć, że `text-decoration` nie służy do zmiany kroju pisma, pogrubienia czy kursywy, tylko właśnie do „ozdabiania” tekstu dodatkowymi liniami. Dobra praktyka jest taka, żeby świadomie używać tej właściwości przy stylowaniu linków: np. usuwamy podkreślenie `a { text-decoration: none; }`, a potem przy najechaniu myszką dajemy `a:hover { text-decoration: underline; }`. Dzięki temu interfejs jest czytelniejszy, a użytkownik widzi, że element jest klikalny. Warto też wiedzieć, że `text-decoration` może przyjmować kilka wartości naraz, np. `text-decoration: underline overline;`, co rzadko się używa, ale czasem w jakichś specyficznych projektach UI może się przydać. Z mojego doświadczenia w projektach komercyjnych najczęściej korzysta się z `underline`, `none` i czasem `line-through` np. przy cenach promocyjnych: stara cena przekreślona, nowa obok. To jest taki mały szczegół CSS, ale bardzo często używany w praktyce.

Pytanie 11

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

A. text-decoration

B. font-decoration

C. text-align

D. font-style

Właściwość CSS 'text-decoration' jest używana do określenia dekoracji tekstu. Do jej wartości zaliczają się między innymi: 'underline' (podkreślenie), 'overline' (nadpisanie), 'line-through' (przekreślenie) oraz 'blink' (miganie), chociaż ostatnia z nich jest obecnie rzadko używana z powodu problemów z dostępnością i wsparciem w nowoczesnych przeglądarkach. W praktyce, użycie 'text-decoration' pozwala na poprawę czytelności tekstu oraz jego wyróżnienie w kontekście estetyki strony internetowej. Na przykład, stosując 'text-decoration: underline;' możemy podkreślić linki, co jest powszechną praktyką w projektowaniu stron. Zgodnie z wytycznymi W3C, stosowanie dekoracji tekstu powinno być przemyślane, aby nie wprowadzać zamieszania w interpretacji treści przez użytkowników. Przykładowo, nadpisanie może być użyte w kontekście wskazywania błędów, co wprowadza dodatkowe znaczenie do przekazu. Zrozumienie i umiejętne stosowanie 'text-decoration' jest kluczowe dla tworzenia profesjonalnych i funkcjonalnych interfejsów użytkownika.

Pytanie 12

W HTML, aby dodać obrazek z tekstem umieszczonym pośrodku obrazka, konieczne jest użycie znacznika

A. <img src="obrazek.png" alt="obraz1" hspace="30px"> tekst

B. <img src="obrazek.png" alt="obraz4"> tekst

C. <img src="obrazek.png" alt="obraz3" height="50%"> tekst

D. <img src="obrazek.png" alt="obraz2" align="middle"> tekst

Odpowiedź <img src="obrazek.png" alt="obraz2" align="middle"> tekst jest prawidłowa, ponieważ wykorzystuje atrybut align z wartością middle, który umożliwia wyśrodkowanie tekstu w poziomie w stosunku do obrazka. Zgodnie z HTML 4.01, atrybut align pozwala na określenie, jak elementy są położone względem siebie, a w tym przypadku sprawia, że tekst pojawia się pośrodku obrazka, co jest często pożądanym efektem wizualnym. W praktyce, użycie takiego podejścia jest przydatne szczególnie w tworzeniu estetycznych i czytelnych układów, gdzie obrazki ilustrują konkretne treści. Warto jednak zauważyć, że w nowoczesnym HTML oraz w CSS rekomenduje się stosowanie bardziej zaawansowanych metod stylizacji, takich jak Flexbox lub Grid, które umożliwiają bardziej elastyczne i responsywne projektowanie stron internetowych. Na przykład, można użyć CSS do osiągnięcia podobnego efektu, co sprawia, że kod HTML jest czystszy i bardziej zgodny z aktualnymi standardami. Zastosowanie arkuszy stylów do zarządzania układem i prezentacją treści zwiększa również dostępność i ułatwia zarządzanie projektem.

Pytanie 13

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

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

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

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

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

Właściwość CSS 'background-attachment: scroll' oznacza, że tło elementu będzie przewijane w równym tempie z treścią na stronie. Kiedy użytkownik przegląda stronę i przewija ją w dół lub w górę, tło przesuwa się razem z zawartością, co tworzy wrażenie głębokości i dynamiki. Przykładem zastosowania tej właściwości może być strona internetowa z długim tekstem, gdzie tło, takie jak kolor lub obraz, jest częścią estetyki projektu, ale nie powinno być statyczne. Warto zauważyć, że można to osiągnąć, ustawiając 'background-attachment' na 'scroll', co jest najczęściej stosowanym ustawieniem. W standardach CSS3 'background-attachment' ma cztery możliwe wartości: 'scroll', 'fixed', 'local', oraz 'inherit'. Stosowanie 'scroll' jest najbardziej intuicyjne i wspiera responsywność, ponieważ zmienia się w zależności od interakcji użytkownika z zawartością. To podejście jest zgodne z praktykami projektowania stron internetowych, które kładą nacisk na użytkownika i interaktywność.

Pytanie 14

Który link jest poprawnie sformułowany?

A. <a href="http::/strona.pl>strona</a>

B. <a href="http://strona.pl">strona</a>

C. <a src="/www.strona.pl">strona</a>

D. <a href=http://strona.pl>strona</a>

Odpowiedź <a href="http://strona.pl">strona</a> jest poprawna, ponieważ używa atrybutu "href" do definiowania odnośnika. Atrybut ten jest standardem w języku HTML i służy do określenia docelowego adresu URL, do którego ma prowadzić link. W przypadku tej odpowiedzi, składnia jest prawidłowa: adres URL jest umieszczony w cudzysłowach, a prefiks HTTP jest poprawny. W praktyce, poprawne użycie atrybutu href jest kluczowe dla zapewnienia, że użytkownicy mogą bezproblemowo nawigować po stronie internetowej. Na przykład, w dokumentacji HTML5, wyraźnie zaznaczone jest, że atrybut href powinien być używany, aby wskazać lokalizację zasobu. W rezultacie, stosując tę poprawną składnię, można uniknąć potencjalnych błędów w działaniu strony oraz poprawić jej dostępność, co jest istotne z punktu widzenia najlepszych praktyk webowych oraz SEO.

Pytanie 15

W edytorze grafiki wektorowej stworzono przedstawiony kształt, który powstał z dwóch figur: trójkąta i koła. W celu stworzenia tego kształtu, po narysowaniu figur i odpowiednim ich ustawieniu, należy skorzystać z funkcji

A. rozdzielenia.

B. różnicy.

C. wykluczenia.

D. sumy.

Dobrze, że wybrałeś odpowiedź 'Sumy'. W rzeczywistości, aby uzyskać efekt przedstawiony na zdjęciu w edytorze grafiki wektorowej, trzeba skorzystać z opcji 'Sumy'. Ta funkcja łączy dwie różne figury w jedną, co pozwala na tworzenie złożonych kształtów. W praktyce, po rysowaniu i odpowiednim ustawieniu figurek, funkcja 'Sumy' jest używana do ich połączenia, tworząc unikalny obiekt. Taka metoda jest często stosowana w przemyśle graficznym, zwłaszcza w projektowaniu logo, gdzie unikalne kształty są istotne. Jest to zgodne ze standardami i dobrymi praktykami w branży graficznej, które zalecają efektywne wykorzystanie narzędzi edytora grafiki wektorowej do tworzenia złożonych kształtów.

Pytanie 16

W języku CSS zapis

p::first-line {font-size: 150%;}

zastosowany na stronie z wieloma paragrafami, z których każdy zawiera kilka linii, spowoduje, że

A. cały tekst paragrafu zostanie powiększony o 150%

B. pierwszy paragraf na stronie w całości będzie miał powiększoną czcionkę

C. pierwsza linia każdego paragrafu będzie miała większą czcionkę niż pozostałe linie

D. pierwsza linia każdego paragrafu będzie miała mniejszą czcionkę niż pozostałe linie

Odpowiedź jest trafna, bo selektor CSS 'p::first-line' służy do stylizowania wyłącznie pierwszej linii każdego paragrafu. Kiedy przypisujesz styl 'font-size: 150%', to znaczy, że czcionka tej pierwszej linii będzie większa o 50% od standardowego rozmiaru ustalonego w CSS. To dobra praktyka w web designie, bo pomaga w czytelności i nadawaniu hierarchii informacjom. Na przykład, fajnie jest wyróżnić rozpoczęcie tekstu albo zaakcentować ważne dane. Pamiętaj tylko, że efekt będzie widoczny tylko, gdy tekst ma więcej niż jedną linię, bo w przeciwnym razie powiększenie się nie ujawni. Dodatkowo, korzystanie z pseudo-elementów, jak '::first-line', to coś, co jest w standardach CSS i jest naprawdę cenione w branży.

Pytanie 17

Fragment kodu HTML z JavaScript spowoduje, że po kliknięciu przycisku

<img src="obraz1.png">
<img src="obraz2.png" id="id1">
<button onclick="document.getElementById('id1').style.display='none'">Przycisk</button>

A. obraz1.png zostanie schowany

B. obraz2.png zastąpi obraz1.png

C. obraz1.png zastąpi obraz2.png

D. obraz2.png zostanie schowany

Poprawna odpowiedź dotyczy ukrycia obrazu obraz2.png poprzez jego identyfikację za pomocą unikalnego atrybutu id. W kodzie HTML każdy element może być zidentyfikowany przez atrybut id, co pozwala na bezpośrednią manipulację jego własnościami w JavaScript. Funkcja document.getElementById służy do wyszukiwania elementu o podanym id w strukturze DOM dokumentu. Następnie, używając stylowania CSS poprzez właściwość style, możliwe jest zmienienie wartości display na 'none', co skutkuje ukryciem elementu w przeglądarce. Taka technika jest często wykorzystywana w interaktywnych aplikacjach webowych, gdzie użytkownik musi mieć możliwość dynamicznego manipulowania elementami interfejsu. Praktyka ta jest zgodna ze standardami W3C i pozwala na tworzenie responsywnych, przyjaznych użytkownikowi aplikacji. Dobrym przykładem zastosowania jest tworzenie galeria obrazów, gdzie tylko wybrane zdjęcia są wyświetlane w danym momencie. Taka funkcjonalność sprzyja również poprawie czytelności strony, ponieważ użytkownik może ukrywać i odkrywać treści według własnych potrzeb. Zrozumienie tego mechanizmu jest kluczowe dla każdego, kto chce budować nowoczesne strony internetowe z użyciem HTML, CSS i JavaScript.

Pytanie 18

W HTML, aby utworzyć hiperłącze, które otworzy się w nowej karcie przeglądarki, należy użyć atrybutu

A. target = "_new"

B. rel = "prev"

C. target = "_blank"

D. rel = "external"

Użycie atrybutu target="_new" nie jest ok w HTML, bo większość przeglądarek go po prostu nie rozumie. Może czasem zadziała, ale nie masz pewności, że zawsze tak będzie, co może być mylące dla użytkownika. Ludzie spodziewają się, że linki będą otwierane tak, jak to jest na ogół ustalone, a błędne atrybuty mogą sprawić, że wszystko będzie się zachowywać w dziwny sposób. Poza tym, rel="prev" to też jest zła droga, bo ten atrybut mówi o relacji między dokumentami, a "prev" wskazuje na wcześniejszą stronę w nawigacji, co nie ma nic wspólnego z linkami. I jeszcze rel="external" - to też nie jest to, bo nie jest to standard w HTML, który decyduje o tym, jak linki mają się otwierać. Użytkownicy mogą myśleć, że te atrybuty są ok, ale w rzeczywistości to prowadzi do nieporozumień, bo nie robią tego, co powinny. Lepiej zrozumieć, jak te atrybuty działają i kiedy ich używać, bo to naprawdę poprawia doświadczenia użytkowników w sieci.

Pytanie 19

W znaczniku meta w miejsce kropek należy wpisać

<meta name="description" content="…">

A. język dokumentu.

B. nazwę edytora.

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

D. streszczenie treści strony.

W meta tagu, w polu 'content' powinno być streszczenie tego, co jest na stronie. To bardzo ważne dla SEO, czyli optymalizacji strony pod kątem wyszukiwarek. Taki opis pojawia się w wynikach wyszukiwania, co wpływa na to, jak użytkownicy postrzegają stronę i czy klikną w link. Fajnie by było, gdyby był krótki, zrozumiały i zawierał ważne słowa kluczowe dotyczące tematu strony. Na przykład, jeśli strona jest o zdrowym jedzeniu, można napisać coś w stylu: 'Poradnik zdrowego odżywiania z przepisami i wskazówkami na lepszy styl życia'. Użycie tych znaczników meta zgodnie z zaleceniami Google i innych wyszukiwarek zwiększa szansę, że strona będzie lepiej widoczna w sieci. Dlatego dobrze, żeby używać tego znacznika w odpowiedni sposób, bo to naprawdę pomaga w poprawie widoczności strony w internecie.

Pytanie 20

W języku CSS atrybut font-size przyjmuje, zgodnie z nazwami, wartości

A. jedynie small, smaller, large, larger

B. wyłącznie small, medium, large

C. zaledwie big oraz small

D. z zestawu xx-small, x-small, medium, large, x-large, xx-large

Właściwość font-size w CSS pozwala na określenie rozmiaru czcionki za pomocą różnych wartości, w tym predefiniowanych słów kluczowych, które umożliwiają łatwe dostosowanie wielkości tekstu w dokumentach HTML. Oprócz typowych wartości takich jak small, medium i large, CSS oferuje również bardziej szczegółowe opcje, takie jak xx-small, x-small, x-large oraz xx-large. Dzięki temu projektanci mogą lepiej dopasować rozmiar tekstu do kontekstu wizualnego strony. Użycie tych wartości pozwala na uniknięcie problemów z uniwersalnością, gdyż są one zrozumiałe i zgodne z różnymi rozdzielczościami ekranów. Na przykład, podczas projektowania responsywnej witryny, zastosowanie wartości xx-large dla nagłówków oraz x-small dla przypisów skutecznie poprawia czytelność i estetykę. Zgodnie z najlepszymi praktykami, warto również rozważyć użycie jednostek względnych, takich jak em czy rem, co pozwala na jeszcze większą elastyczność w dostosowywaniu rozmiarów tekstu do preferencji użytkownika oraz rozmiaru ekranu.

Pytanie 21

Język HTML oferuje nagłówki, które służą do tworzenia hierarchii zawartości. Te nagłówki występują wyłącznie w zakresie

A. h1 - h10

B. h1 - h4

C. h1 - h8

D. h1 - h6

Odpowiedź h1 - h6 jest poprawna, ponieważ w języku HTML nagłówki są definiowane w ramach sześciu poziomów, od h1 do h6. Nagłówki te pełnią kluczową rolę w organizacji treści na stronie internetowej, umożliwiając tworzenie hierarchii oraz struktury dokumentu. h1 jest najważniejszym nagłówkiem i powinien być używany do oznaczania głównego tytułu strony, podczas gdy h2, h3, h4, h5 i h6 służą do tworzenia podtytułów i hierarchii treści w miarę potrzeby. Na przykład, nagłówek h2 może być użyty do oznaczenia sekcji podrzędnej w stosunku do h1, a h3 do następnej sekcji podrzędnej. Takie zrozumienie hierarchii nagłówków jest istotne z punktu widzenia SEO, ponieważ wyszukiwarki korzystają z tych struktur do indeksowania treści. Dobrze zorganizowane nagłówki poprawiają również dostępność strony, co jest zgodne z najlepszymi praktykami webowymi, a także ułatwiają nawigację użytkownikom, zarówno ludziom, jak i robotom wyszukiwarek.

Pytanie 22

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

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

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

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

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

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

Pytanie 23

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

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

B. zmniejszyć jego rozdzielczość

C. dodać kanał alfa

D. zapisać w formacie BMP

Wybór formatu BMP do publikacji w Internecie jest niepraktyczny, ponieważ BMP jest formatem o bardzo dużej objętości, który nie kompresuje danych, co sprawia, że pliki są nieporęczne do przesyłania. Zdecydowanie bardziej odpowiednie są kompresowane formaty, jak JPEG, PNG, czy GIF, które pozwalają na znaczne zmniejszenie rozmiaru plików bez zauważalnej utraty jakości w przypadku obrazów bitmapowych. Zwiększenie głębi kolorów to kolejny błąd myślowy, ponieważ zwiększenie liczby kolorów w obrazie nie tylko nie wpływa na jego rozmiar w sposób korzystny, ale wręcz go zwiększa, co czyni plik jeszcze mniej odpowiednim do publikacji w Internecie. Dodanie kanału alfa, który wprowadza przezroczystość w obrazach, również zwiększa objętość pliku, co czyni tę opcję nieoptymalną przy próbie zmniejszenia rozmiaru pliku. W kontekście publikacji internetowych, kluczowym celem powinno być zapewnienie szybkości ładowania strony oraz dostarczenie użytkownikom jak najlepszych doświadczeń, co jest możliwe poprzez optymalizację obrazów, a nie ich obciążanie. Z tego powodu, zamiast stosować nieefektywne rozwiązania, ważne jest, aby korzystać z właściwych narzędzi i technik, aby zapewnić najlepszą jakość i wydajność podczas publikacji graficznych w sieci.

Pytanie 24

Jakie polecenie w CSS umożliwia dodanie zewnętrznego arkusza stylów?

A. require

B. include

C. import

D. open

Polecenie 'import' w CSS służy do załączenia zewnętrznego arkusza stylów, co jest kluczowe dla organizacji i modularności kodu CSS. Użycie '@import' pozwala na ładowanie stylów z innych plików CSS na początku arkusza stylów, co ułatwia zarządzanie dużymi projektami. Na przykład, jeśli mamy plik 'style.css' i chcemy zaimportować 'reset.css', możemy użyć następującej składni: '@import 'reset.css';'. Dzięki temu możemy utrzymać rozdzielenie różnych stylów, co sprzyja lepszej organizacji kodu oraz jego ponownemu użyciu w przyszłości. Warto również zaznaczyć, że standardy CSS sugerują, aby używać '@import' z rozwagą, gdyż każde zaimportowanie pliku powoduje dodatkowe żądanie HTTP, co może wpłynąć na czas ładowania strony. Z tego powodu, dla większych projektów, często lepiej jest łączyć wszystkie style w jeden plik podczas produkcji, co można osiągnąć za pomocą narzędzi do kompresji CSS. Użycie '@import' jest zatem zgodne z dobrymi praktykami, szczególnie w fazie rozwoju, gdzie modularność i łatwość w zarządzaniu kodem są priorytetowe.

Pytanie 25

Jaką operację należy przeprowadzić podczas edycji zdjęcia w programie graficznym, żeby białe tło zamienić na przezroczystość?

A. Dodać kanał alfa

B. Maksymalnie zmniejszyć jasność

C. Zmienić saturację obrazu

D. Skadrować obraz

Dodanie kanału alfa to naprawdę ważna rzecz, jeśli chodzi o robienie przezroczystego tła w grafice rastrowej. Kanał alfa działa jak dodatkowa warstwa, która mówi komputerowi, które piksele mają być przezroczyste. Dzięki temu możemy ładnie wycinać tło, które nam nie pasuje, nie niszcząc całego obrazu. Na przykład, kiedy edytujesz zdjęcie w Photoshopie, żeby zmienić białe tło na przezroczystość, trzeba najpierw dodać ten kanał alfa. Potem można użyć narzędzia do zaznaczania, jak choćby Magic Wand, żeby wybrać to białe tło i je usunąć. W efekcie zostaje tylko obiekt na przezroczystym tle. W branży graficznej dodawanie kanału alfa i zabawa z przezroczystością to już standard. To pozwala na tworzenie naprawdę ładnych obrazów, które można potem wykorzystać w różnych miejscach, jak strony internetowe czy ulotki. Znajomość tego, jak działa kanał alfa, jest super ważna dla każdego grafika, który chce dobrze radzić sobie z obrazami w różnych formatach.

Pytanie 26

Jak za pomocą CSS ustawić opływanie obrazu tekstem, wprowadzając odpowiedni kod w stylu obrazu?

A. float: left;

B. table: left;

C. clear: both;

D. float: right;

Stosowanie table: left; w tym kontekście to strzał w kolano, bo taka właściwość nie istnieje. W CSS do tabel używamy innych właściwości jak display: table; lub display: table-cell;, ale nie do opływania elementów. A clear: both; jest używane, żeby zlikwidować opływ po float, więc to ważna sprawa, bo inaczej wszystko się sypie. Float: left; może opływać, ale w tej sytuacji nie postawi obrazka po prawej, bo ustawia go po lewej stronie. Wiele osób myśli, że float działa na osi Y, ale tak naprawdę dotyczy tylko osi X. Pamiętaj, że float, chociaż przydatny, to nie jedyny sposób na układanie elementów w CSS. Flexbox i grid to nowoczesne metody, które często są znacznie lepsze. By zbudować ładne interfejsy, musimy rozumieć jak różne właściwości CSS ze sobą współpracują.

Pytanie 27

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; } section { float: right; }

C. nav { float: right; }

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

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 28

W programie do edytowania grafiki rastrowej zmieniono krzywe kolorów w sposób zaznaczony ramką na pokazanym obrazie. Jakie jest to działanie?

A. przyciemnienie całego obrazu

B. wygładzenie krawędzi na obrazie

C. modyfikację najjaśniejszych i najciemniejszych kolorów obrazu

D. rozjaśnienie całego obrazu

Modyfikacja krzywych kolorów w programach do obróbki grafiki rastrowej jest zaawansowanym narzędziem służącym do precyzyjnej regulacji tonalnej obrazu. Krzywe pozwalają na kontrolę nad najjaśniejszymi i najciemniejszymi partiami obrazu poprzez modyfikację kanałów RGB lub wartości jasności. W zaznaczonej na obrazku ramce widać, że punkty kontrolne krzywej zostały przesunięte, co wskazuje na zmianę tonacji skrajnych wartości jasności. Tego typu operacja jest często stosowana w celu poprawy kontrastu i ogólnego wyglądu zdjęcia. Standardową praktyką jest tu podnoszenie i opuszczanie punktów na krzywej, co daje możliwość uwydatnienia szczegółów w cieniach oraz światłach bez wpływu na średnie tony. Modyfikacja krzywych jest zgodna z profesjonalnymi standardami edycji, ponieważ umożliwia uzyskanie efektów niedostępnych przy użyciu prostych suwaków jasności lub kontrastu. Praktyczne zastosowanie znajduje m.in. w fotografii portretowej, gdzie często konieczne jest subtelne dostosowanie tonacji skóry oraz w krajobrazach, gdzie ważne jest zachowanie detali w jasnych niebie i ciemnych cieniach ziemi. Stosując krzywe, można precyzyjnie regulować każdy aspekt tonalny obrazu, co jest kluczowe w profesjonalnej edycji graficznej.

Pytanie 29

Aby obraz umieszczony na stronie www automatycznie dostosowywał się do rozmiaru ekranu, na którym strona jest wyświetlana, należy

A. ustawić oba jego wymiaru w pikselach

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

C. nie zmieniać obu jego wymiarów przy użyciu stylów CSS

D. ustawić jeden z jego wymiarów w pikselach

Ustalenie szerokości obrazu w procentach jest kluczowym krokiem w responsywnym projektowaniu stron internetowych. Pozwala to na automatyczne dopasowanie szerokości obrazu do szerokości kontenera, w którym się znajduje, co jest istotne w przypadku różnych rozmiarów ekranów, od komputerów stacjonarnych po urządzenia mobilne. Kiedy szerokość obrazu jest zadana w procentach, np. 'width: 100%;', obraz będzie zajmował 100% szerokości swojego rodzica, co umożliwia rozciąganie lub zmniejszanie obrazu w zależności od dostępnej przestrzeni. Jest to zgodne z zasadami responsywnego web designu (RWD), które zakładają elastyczność i dostosowanie UI do różnych warunków wyświetlania. Dodatkowo, stosowanie jednostek procentowych jest praktyką zalecaną przez W3C w kontekście utrzymania proporcji i jakości obrazu na różnych urządzeniach. Warto również dodać, że w przypadku używania CSS warto określić maksymalną szerokość obrazu (max-width), aby uniknąć nadmiernego rozciągania na dużych ekranach.

Pytanie 30

Jaką technologię zaleca się przy budowie witryn WWW, aby użytkownicy bez umiejętności programistycznych mogli samodzielnie wprowadzać zmiany w treści bez kodowania?

A. CMS

B. SSL

C. FTP

D. SEO

SEO, czyli optymalizacja dla wyszukiwarek, to temat, który dotyczy poprawy widoczności strony w wynikach wyszukiwania. Choć jest szalenie ważne w marketingu internetowym, to nie ma bezpośredniego związku z tym, jak zarządzać treścią na stronie. Użytkownicy nie mogą zmieniać treści za pomocą SEO; chodzi raczej o to, żeby to, co już jest, było bardziej przyjazne dla robotów wyszukiwarek. Trzeba pamiętać, że jeśli się skupiamy na SEO, ale nie mamy porządnego CMS-a, to aktualizacja treści może być trudna, co w dłuższym czasie źle wpłynie na pozycjonowanie. FTP, czyli protokół transferu plików, jest do przesyłania plików między komputerami a serwerami, ale żeby z niego korzystać, trzeba znać strukturę plików, więc dla kogoś bez technicznych umiejętności to nie jest rozwiązanie. SSL, czyli bezpieczne połączenia, to ważna rzecz, ale z zarządzaniem treścią nie ma za bardzo wspólnego. Użytkownicy mogą się pogubić, myśląc, że te technologie wystarczą do zarządzania treścią, co może wprowadzać w błąd i powodować, że zasoby internetu będą wykorzystywane nieefektywnie.

Pytanie 31

Który z poniższych kodów HTML najlepiej ilustruje opisaną tabelę? (Obramowanie tabeli oraz komórek zostało pominięte dla uproszczenia)

A. Odpowiedź C

B. Odpowiedź D

C. Odpowiedź A

D. Odpowiedź B

Pozostałe opcje zawierają błędy w użyciu atrybutów colspan i rowspan co prowadzi do nieprawidłowego odwzorowania struktury tabeli. W opcji A dane są przedstawione bez użycia rowspan co powoduje że każda informacja znajdowałaby się w osobnym wierszu nie łącząc kolumny Telefony co jest sprzeczne z przedstawionym stylem w pytaniu. To może prowadzić do dezorganizacji danych i braku przejrzystości. W przypadku opcji C zastosowanie colspan na ostatniej komórce jest błędne ponieważ rozszerza komórkę na dwie kolumny co nie jest zgodne z prezentowaną strukturą gdzie dane są ułożone w dwóch wierszach pod jednym nagłówkiem. Opcja D również błędnie używa colspan przy nagłówku Telefony co powoduje że dane nie są przedstawiane w logicznym układzie ukazującym że jedna kolumna powinna obejmować dwie komórki z telefonami. Takie błędy w strukturze tabeli mogą prowadzić do problemów z użytecznością i dostępnością strony internetowej ponieważ użytkownicy mogą mieć trudności z odnalezieniem i zrozumieniem prezentowanych informacji. Problemem jest również brak semantyczności co jest kluczowe dla SEO i dostępności dla osób korzystających z czytników ekranu. Dlatego ważne jest prawidłowe użycie atrybutów strukturalnych w HTML aby zapewnić dostępność i poprawne wyświetlanie treści na różnych urządzeniach i przeglądarkach co jest kluczowe w nowoczesnym projektowaniu stron internetowych. Dobre praktyki projektowania stron internetowych zalecają również używanie HTML w sposób semantyczny co pomaga w tworzeniu bardziej czytelnych i dostępnych dokumentów. Poprawne użycie atrybutów takich jak rowspan i colspan jest kluczowe w osiągnięciu tych celów i uniknięciu nieporozumień i błędów w prezentacji danych na stronach internetowych. Ułatwia to również utrzymanie i aktualizację kodu w przyszłości oraz zwiększa ogólną jakość i dostępność strony internetowej.

Pytanie 32

Deklaracja typu dokumentu HTML: wskazuje, że kod został stworzony w wersji

A. 4

B. 6

C. 5

D. 7

Deklaracja typu dokumentu HTML, znana jako <!DOCTYPE HTML>, jest kluczowym elementem każdej strony internetowej, który informuje przeglądarkę, w jakiej wersji HTML została napisana strona. W przypadku <!DOCTYPE HTML> mówimy o wersji HTML5, która jest najnowszym standardem języka znaczników. HTML5 wprowadza wiele usprawnień i nowych funkcji w porównaniu do wcześniejszych wersji, takich jak semantyczne znaczniki, wsparcie dla multimediów (audio i wideo) oraz API do złożonych aplikacji internetowych. Przykładem zastosowania HTML5 mogą być formularze z nowymi typami inputów, które ułatwiają interakcję z użytkownikiem, takie jak 'date', 'email' czy 'url'. Również HTML5 wprowadza nowy model renderowania, który jest bardziej efektywny i dostosowany do nowoczesnych urządzeń mobilnych. Standardy HTML są ustalane przez W3C (World Wide Web Consortium), które regularnie aktualizuje specyfikacje, aby nadążać za rozwijającymi się technologiami internetowymi. W skrócie, poprawna deklaracja <!DOCTYPE HTML> jest niezbędna dla właściwego wyświetlania i działania strony w różnych przeglądarkach.

Pytanie 33

W HTML atrybut alt w tagu img służy do określenia

A. tekstu, który pojawi się, gdy obrazek nie może być załadowany

B. napisu, który będzie widoczny pod obrazem

C. właściwości grafiki, takie jak rozmiar, ramka, wyrównanie

D. lokalizacji i nazwy pliku źródłowego obrazu

Odpowiedź, która wskazuje, że atrybut alt znacznika img w języku HTML definiuje tekst, który będzie wyświetlony, jeśli grafika nie może być poprawnie załadowana, jest całkowicie poprawna. Atrybut alt jest kluczowym elementem dostępności w sieci, ponieważ dostarcza użytkownikom alternatywne informacje o zawartości obrazu, co jest szczególnie ważne dla osób korzystających z czytników ekranu. Na przykład, jeśli zdjęcie w artykule nie jest dostępne z powodu problemów z łączem internetowym, atrybut alt zapewnia kontekst, dzięki czemu użytkownik jest informowany o tym, co miało być przedstawione. Dobre praktyki zalecają, aby tekst w atrybucie alt był zwięzły, ale jednocześnie dostarczał wystarczających informacji o obrazie. Warto również zauważyć, że stosowanie atrybutu alt wspiera SEO (optymalizację pod kątem wyszukiwarek), ponieważ wyszukiwarki mogą używać tych informacji do indeksowania treści. Przykład: <img src='example.jpg' alt='Zdjęcie pięknego krajobrazu górskiego'>.

Pytanie 34

Kolor zdefiniowany kodem RGB o wartości rgb(128, 16, 8) w formacie szesnastkowym przyjmuje wartość

A. #800F80

B. #FF1008

C. #FF0F80

D. #801008

Odpowiedzi takie jak #FF1008, #800F80 i #FF0F80 są wynikiem błędnych konwersji wartości RGB do formatu szesnastkowego. Gdybyśmy przyjrzeli się pierwszej z tych odpowiedzi, widzimy, że wartość 'FF' oznacza 255 w systemie dziesiętnym, co nie odpowiada wartości 128 w kanale czerwonym tego koloru. Zastosowanie 'FF' w tym kontekście prowadzi do znacznego przeszacowania intensywności koloru czerwonego. Przechodząc do drugiej odpowiedzi, #800F80, wartość '0F' odpowiada 15, co również nie jest zgodne z pierwotną wartością 16 w kanale zielonym. To wskazuje na niedoszacowanie intensywności zielonej, co wpływa na percepcję koloru. Ostatnia odpowiedź, #FF0F80, znowu używa 'FF' w kanale czerwonym, co prowadzi do podobnych błędów jak w pierwszym przypadku. Kluczowym błędem, który można zidentyfikować w tych odpowiedziach, jest nieprawidłowe przeliczenie wartości RGB do formatu szesnastkowego, co jest powszechnym problemem dla osób, które nie są zaznajomione z konwersją systemów liczbowych. W praktyce, aby uniknąć takich pomyłek, warto korzystać z narzędzi online lub specjalistycznego oprogramowania, które automatycznie wykonuje te konwersje, co pozwala na zaoszczędzenie czasu i zminimalizowanie ryzyka błędów.

Pytanie 35

Zestawienie dwóch kolorów znajdujących się po przeciwnych stronach na kole barw stanowi zestawienie

A. monochromatycznym

B. dopełniającym

C. sąsiednim

D. trójkątnym

Wybór sąsiadujących barw oznaczałby połączenie kolorów, które leżą obok siebie na kole barw, co prowadzi do efektu harmonijnego i spokojnego, ale nie intensywnego, jak w przypadku barw dopełniających. Tego typu zestawienia są często stosowane w projektach wymagających łagodnych przejść kolorystycznych, np. w architekturze wnętrz. Monochromatyczne zestawienia, z drugiej strony, polegają na używaniu różnych odcieni, tonów lub nasycenia jednej barwy, uzyskując efekt spójności, ale bez kontrastu. Takie podejście może być stosowane w minimalistycznych projektach, ale nie wykorzystuje pełnego potencjału kontrastów. Natomiast koncepcja trójkątnych zestawień kolorystycznych odnosi się do używania trzech kolorów, które tworzą trójkąt równoboczny na kole barw, co także prowadzi do harmonii, ale niekoniecznie do dynamiki i intensywności, które charakteryzują połączenia dopełniające. Typowym błędem myślowym jest pomylenie pojęcia kontrastu z harmonią, co prowadzi do niepoprawnych wniosków o funkcji poszczególnych zestawień kolorystycznych w praktyce projektowej.

Pytanie 36

Jak powinien być poprawnie zapisany znacznik <img>, służący do umieszczenia na stronie internetowej obrazu rys.jpg, przeskalowanego do szerokości 120 px oraz wysokości 80 px z tekstem alternatywnym "krajobraz"?

A. <img src="rys.jpg" height="120px" width="80px" info="krajobraz"/>

B. <img src="rys.jpg" width="120px" height="80px" alt="krajobraz"/>

C. <img image="rys.jpg" width="120px" height="80px" alt="krajobraz"/>

D. <img href="rys.jpg" height="120px" width="80px" info="krajobraz"/>

Odpowiedź <img src="rys.jpg" width="120px" height="80px" alt="krajobraz"/> jest poprawna z kilku powodów. Przede wszystkim, atrybut 'src' wskazuje na lokalizację pliku graficznego, co jest kluczowe dla poprawnego wyświetlania obrazu na stronie internetowej. Atrybuty 'width' oraz 'height' pozwalają na precyzyjne określenie rozmiarów obrazu, co jest istotne zarówno dla responsywności strony, jak i dla optymalizacji czasu ładowania. Użycie jednostki 'px' (pikseli) jest poprawne, jednak w HTML5 można pominąć tę jednostkę, wpisując jedynie wartość liczbową. Atrybut 'alt' jest niezwykle ważny dla dostępności, ponieważ dostarcza alternatywny opis obrazu dla użytkowników, którzy nie mogą go zobaczyć, na przykład osób niewidomych korzystających z czytników ekranu. Używanie odpowiednich atrybutów oraz wartości jest zgodne z najlepszymi praktykami w tworzeniu stron WWW oraz standardami W3C, co wpływa na lepszą użyteczność oraz SEO strony. Przykładem praktycznym może być umieszczenie grafiki w nagłówku strony, gdzie obraz jest widoczny, a opis alternatywny wspiera dostępność i kontekst treści.

Pytanie 37

Który z zapisów znacznika <div> może pojawić się w dokumencie HTML tylko raz, a ponowne jego użycie spowoduje błędy podczas walidacji tego dokumentu?

A. <div>

B. <div class="klasa">

C. <div id="identyfkator">

D. <div class="klasa1 klasa2">

Odpowiedź <div id="identyfkator"> jest poprawna, ponieważ znacznik <div> z atrybutem id musi być unikalny w obrębie całego dokumentu HTML. Zgodnie z standardami W3C, atrybut id powinien być przypisany tylko do jednego elementu na stronie, co umożliwia jednoznaczne identyfikowanie tego elementu, na przykład w CSS lub JavaScript. Przykładowo, jeśli mamy <div id="header">, to nie możemy użyć tego samego identyfikatora dla innego <div> w tym samym dokumencie, aby uniknąć konfliktów. W praktyce, unikalność id jest kluczowa w kontekście manipulacji DOM, gdyż wiele bibliotek JavaScript polega na tej unikalności, aby prawidłowo odnajdywać i modyfikować elementy. Warto również pamiętać, że użycie unikalnych id sprzyja lepszej dostępności i ułatwia nawigację w dokumentach, co jest zgodne z dobrą praktyką projektowania stron internetowych.

Pytanie 38

Zdefiniowany styl CSS spowoduje, że nagłówki pierwszego poziomu będą

A. wyjustowane, pisane małymi literami, a odstępy między literami ustalone na 10 px

B. wyśrodkowane, pisane małymi literami, a odstępy między liniami ustalone na 10 px

C. wyjustowane, pisane wielkimi literami, a odstępy między liniami ustalone na 10 px

D. wyśrodkowane, pisane wielkimi literami, a odstępy między literami ustalone na 10 px

Odpowiedź jest prawidłowa, ponieważ reguły CSS wyrażone w stylu są poprawnie zinterpretowane w kontekście podanej definicji. Wartość text-align: center oznacza, że tekst wewnątrz elementu h1 będzie wyśrodkowany. Centrum tekstu jest powszechnie stosowane w projektowaniu stron internetowych w celu zwiększenia czytelności i estetyki nagłówków co jest korzystne w wizualnym uporządkowaniu treści. Wartość text-transform: uppercase przekształca wszystkie litery w sekcji na wielkie litery co jest pomocne w przypadku nagłówków gdzie wyróżnienie jest kluczowe i potęguje efekt wizualny. Stosowanie wielkich liter w nagłówkach jest klasycznym podejściem w projektowaniu ponieważ przyciąga uwagę użytkownika. Dodatkowo letter-spacing: 10px zwiększa odstępy między literami co poprawia ich czytelność zwłaszcza w dużych formatach tekstu. Zastosowanie takich właściwości jest zgodne z dobrymi praktykami projektowymi które dążą do optymalizacji wizualnej i funkcjonalnej stron internetowych co jest kluczowe dla pozytywnego doświadczenia użytkownika

Pytanie 39

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

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

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

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

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

A. B.

B. A.

C. C.

D. D.

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

Pytanie 40

Znacznik <i> w języku HTML ma na celu

A. zmianę czcionki na kursywę

B. określenie formularza

C. dodanie grafiki

D. ustalenie nagłówka w treści

Znacznik <i> w języku HTML jest używany do formatowania tekstu, aby uzyskać efekt pochylonego kroju pisma. Jest to element semantyczny, który wprowadza do dokumentu wizualną różnicę, ale także ma swoje miejsce w kontekście znaczeniowym. Użycie <i> może wskazywać na zmianę intonacji w tekście, taką jak nazwy książek, filmów, czy obcych wyrazów. W standardach HTML5, <i> jest zalecany do użytku, aby wyróżnić elementy tekstowe w sposób, który jest zgodny z zasadami dostępności i semantyki. Przykład zastosowania: <p>W książce <i>W pustyni i w puszczy</i> autorstwa Henryka Sienkiewicza...</p>. Oznaczanie tekstu w ten sposób wspiera nie tylko estetykę strony, ale również poprawia doświadczenie użytkowników korzystających z technologii asystujących, które mogą interpretować znaczenie tak oznaczonego tekstu. Warto również pamiętać o odpowiednich stylach CSS, które można zastosować do tego znacznika, aby dostosować jego wygląd do reszty witryny.

Rozpocznij nowy egzamin

Powrót do strony głównej