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: 8 kwietnia 2026 13:59
Data zakończenia: 8 kwietnia 2026 14:19

Egzamin zdany!

Wynik: 25/40 punktów (62,5%)

Wymagane minimum: 20 punktów (50%)

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

W CSS właściwość font-size może przyjmować wartości według słów kluczowych

A. tylko smali, smaller, large, larger

B. z zestawu xx-small, x-small, smali, medium, large, x-large, xx-large

C. jedynie big i smali

D. wyłącznie smali, medium, large

Właściwość font-size w CSS pozwala na określenie rozmiaru czcionki za pomocą zestawu wartości słownikowych, które obejmują xx-small, x-small, small, medium, large, x-large oraz xx-large. Użycie tych słów kluczowych jest zgodne z wytycznymi CSS i zapewnia spójne i zrozumiałe podejście do projektowania. Przykładowo, definiując klasę CSS dla nagłówka, możemy zastosować: h1 { font-size: large; } co skutkuje odpowiednim zwiększeniem rozmiaru czcionki, co jest zgodne z hierarchią typograficzną dokumentu. Zastosowanie wartości słownikowych zwiększa czytelność i dostępność treści, ponieważ są one zrozumiałe zarówno dla programistów, jak i dla przeglądarek. Ponadto, korzystając z tych wartości, projektanci mogą łatwiej dostosować wygląd strony do różnych urządzeń, co jest kluczowe w kontekście responsywnego web designu. Warto również wspomnieć, że wartości te są niezależne od jednostek miary, takich jak em czy px, co sprawia, że są bardziej elastyczne w użyciu.

Pytanie 2

Którego znacznika NIE NALEŻY umieszczać w nagłówku dokumentu HTML?

A. <h2>

B. <title>

C. <link>

D. <meta>

Odpowiedź <h2> jest trafna, bo ten znacznik jest właśnie do nagłówków w HTML. Powinien być używany w sekcji <body>, nie w <head>. Jak dobrze wiesz, nagłówki, czyli <h1> do <h6>, mają spore znaczenie w organizacji tekstu i hierarchii, co wpływa później na SEO i dostępność strony. Dzięki <h2> możesz dodać podtytuł, co sprawia, że tekst jest bardziej przejrzysty i łatwiejszy do zrozumienia. Stosowanie nagłówków w odpowiedni sposób to ważna zasada, żeby dokument miał sens i był logicznie poukładany. Warto też wiedzieć, że znaczniki takie jak <link>, <meta> i <title> są super ważne dla strony, ale pełnią inne funkcje niż nagłówki. Więc ogólnie rzecz biorąc, fajnie, że to rozumiesz!

Pytanie 3

Podstawowym celem korzystania z edytora WYSIWYG jest

A. ściąganie z Internetu pełnych portali WWW

B. automatyzacja odtwarzania plików multimedialnych

C. szybka wizualizacja tworzonej strony

D. wykrywanie błędów w bazie danych

Edytory WYSIWYG (What You See Is What You Get) są narzędziami, które umożliwiają tworzenie i edytowanie treści internetowych w sposób wizualny, co oznacza, że użytkownik widzi na ekranie dokładnie to, co otrzyma po zapisaniu dokumentu. Głównym celem ich stosowania jest przyspieszenie procesu projektowania stron internetowych poprzez natychmiastowe wizualizowanie zmian. Dzięki temu, osoby nieposiadające zaawansowanej wiedzy programistycznej mogą łatwo tworzyć atrakcyjne wizualnie strony, co ma ogromne znaczenie w kontekście szybkiego rozwoju branży webowej. Przykłady zastosowania edytorów WYSIWYG to platformy takie jak WordPress, Wix czy Squarespace, które umożliwiają użytkownikom dodawanie treści, obrazów i multimediów bez potrzeby pisania kodu. Warto również zauważyć, że edytory te wspierają standardy webowe, takie jak HTML5 i CSS3, co pozwala na optymalizację stron pod kątem SEO oraz responsywności. W związku z rosnącą popularnością edytorów WYSIWYG, znajomość ich działania staje się kluczowa dla każdego, kto pragnie efektywnie zarządzać treściami w sieci.

Pytanie 4

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

psy
koty
chomiki
świnki morskie
rybki

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

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

C. ul li:active { 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 5

Aby wykorzystać skrypt zapisany w pliku przyklad.js, trzeba połączyć go ze stroną używając kodu

A. <script src="/przyklad.js"></script>

B. <script link="przyklad.js"></script>

C. <script>przyklad.js</script>

D. <link rel="script" href="/przyklad.js">

Niepoprawne odpowiedzi opierają się na nieprawidłowym zrozumieniu sposobu łączenia plików JavaScript z dokumentem HTML. Na przykład, użycie <script>przyklad.js</script> jest błędne, ponieważ nie zawiera atrybutu 'src', który jest niezbędny do wskazania źródła pliku. Bez tego atrybutu przeglądarka nie wie, gdzie znaleźć skrypt, co skutkuje błędem ładowania. Podobnie, <script link="przyklad.js"></script> nie jest poprawnym sposobem na dołączenie skryptu. Atrybut 'link' nie istnieje w kontekście tagu <script>, co prowadzi do kompletnego zignorowania tego wpisu przez przeglądarkę. Dodatkowo, <link rel="script" href="/przyklad.js"> jest również błędny, ponieważ tag <link> jest przeznaczony do łączenia z arkuszami stylów CSS, a nie z plikami JavaScript. Prawidłowy kontekst użycia tych tagów jest kluczowy dla skutecznego zarządzania zasobami w dokumentach HTML. W praktyce, nieprzestrzeganie tych zasad może prowadzić do wielu problemów, takich jak błędy w działaniu skryptów, opóźnienia w ładowaniu strony oraz trudności w debugowaniu, co podkreśla znaczenie stosowania standardów i dobrych praktyk w programowaniu webowym.

Pytanie 6

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

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

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

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

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

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

Pytanie 7

Jakim kodem określa się kolor czerwony?

A. #00EEEE

B. #00EE00

C. #EE0000

D. #0000EE

Poprawna odpowiedź to #EE0000, co jest kodem szesnastkowym reprezentującym kolor czerwony w systemie RGB. W tym kodzie, wartość R (czerwony) wynosi 238, co oznacza maksymalne nasycenie tego koloru. Wartości G (zielony) i B (niebieski) są ustawione na 0, co oznacza, że brak tych kolorów powoduje, że czerwony staje się dominujący. Kolory w formacie szesnastkowym są powszechnie stosowane w projektowaniu stron internetowych oraz w grafice komputerowej, ponieważ umożliwiają precyzyjne określenie kolorów. Na przykład, w CSS można użyć tego kodu, aby ustawić kolor tła przycisku: 'background-color: #EE0000;'. Taka praktyka pozwala na łatwe i konsekwentne utrzymanie estetyki wizualnej projektu. Warto również zaznaczyć, że w kontekście kolorów, czerwony często symbolizuje energię, pasję i akcję, co czyni go popularnym wyborem w marketingu i reklamie, gdzie przyciągnięcie uwagi jest kluczowe.

Pytanie 8

Jak wygląda poprawny zapis znaczników, który jest zgodny z normami języka XHTML i odpowiada za łamanie linii?

A. </br/>

B. </ br>

C. <br/>

D. <br/>

Zapis znacznika </ br> jest niepoprawny, ponieważ nie można w ten sposób zamknąć znacznika, który nie ma zawartości. W XHTML wszystkie tagi muszą być poprawnie sformatowane, a takie umieszczenie spacji w znaczniku zamknięcia oraz użycie nieodpowiedniego formatu są całkowicie niezgodne z wymaganiami standardów. Kolejną niepoprawną koncepcją jest użycie </br/> - chociaż syntaktyczna forma jest bliska poprawnej, znaczniki otwierające i zamykające muszą mieć odpowiednie konteksty. W przypadku znaczników samozamykających się, takich jak <br/>, nie ma potrzeby umieszczania pary znaczników, ponieważ ich funkcjonalność polega na wstawieniu łamania linii, a nie na wytwarzaniu dodatkowego bloku. Ostatnią z wymienionych odpowiedzi, <br>, również nie jest zgodna z odpowiednim formatowaniem XHTML, ponieważ brakuje ukośnika, co czyni go niepoprawnym w kontekście stricte przestrzegania standardu. Podstawowym błędem w myśleniu, który prowadzi do tych niepoprawnych wniosków, jest niewłaściwe zrozumienie zasady samozamykania znaczników oraz ich roli w strukturze dokumentu HTML. Ignorowanie zasadności i standardów tworzenia HTML prowadzi do wielu problemów z interpretacją kodu przez różne środowiska oraz przeglądarki, co wpływa na ostateczną jakość i dostępność stron internetowych.

Pytanie 9

Kolorem, który ma odcień niebieski, jest kolor

A. #EE0000

B. #00EE00

C. #0000EE

D. #EE00EE

Poprawna odpowiedź to kolor #0000EE, który reprezentuje odcień niebieskiego w systemie RGB. Kolory w tym systemie definiowane są poprzez trzy składowe: czerwoną, zieloną i niebieską (RGB), gdzie wartości są podawane w formacie szesnastkowym. W przypadku #0000EE, pierwsze dwie pary zer oznaczają brak składowych czerwonej i zielonej, natomiast ostatnia para 'EE' wskazuje na wysoką intensywność składowej niebieskiej. Takie podejście jest powszechnie stosowane w programowaniu i projektowaniu stron internetowych, gdzie precyzyjnie określone kolory mają kluczowe znaczenie dla estetyki i użyteczności interfejsu. Przykładem zastosowania koloru niebieskiego może być jego użycie w projektach związanych z tematyką technologiczną lub finansową, gdzie niebieski symbolizuje zaufanie i profesjonalizm. Warto również zwrócić uwagę, że w kontekście dostępności barw, stosowanie odpowiednich kontrastów z tłem jest niezbędne, aby zapewnić czytelność tekstu i elementów graficznych. Odpowiednie wykorzystanie kodów koloru może znacząco wpłynąć na postrzeganie marki oraz interakcję użytkowników z treściami wizualnymi na stronach internetowych.

Pytanie 10

Jakiego rodzaju oprogramowanie narzędziowe jest wymagane, aby użytkownik mógł przeprowadzać operacje na zebranych danych?

A. Klucz obcy

B. Otwarty mechanizm komunikacji bazy danych

C. System Zarządzania Bazą Danych (SZBD)

D. Obiektowy System Zarządzania Bazą Danych

Obiektowy System Zarządzania Bazą Danych, klucz obcy oraz otwarty mechanizm komunikacji bazy danych to pojęcia związane z zarządzaniem danymi, jednak nie spełniają one roli SZBD. Obiektowe systemy zarządzania bazą danych (OODBMS) różnią się od tradycyjnych SZBD tym, że przechowują dane w formie obiektów zgodnych z paradygmatem programowania obiektowego. Choć OODBMS mogą być użyteczne w specyficznych zastosowaniach, ich zastosowanie nie jest uniwersalne jak w przypadku SZBD. Klucz obcy to natomiast termin odnoszący się do atrybutu w tabeli, który wskazuje na klucz główny innej tabeli, co pozwala na tworzenie relacji między danymi, ale klucz obcy nie jest oprogramowaniem i nie umożliwia samodzielnego zarządzania danymi. Z kolei otwarty mechanizm komunikacji bazy danych odnosi się do protokołów i standardów, które umożliwiają współpracę między różnymi systemami, jednak również nie spełnia funkcji SZBD. Typowe błędy myślowe prowadzące do takich wniosków to brak zrozumienia różnicy między pojęciem systemu zarządzania bazą danych a specyficznymi elementami, takimi jak klucze czy mechanizmy komunikacji. W tej sytuacji kluczowe jest zrozumienie, że aby móc wykonywać operacje na danych, konieczne jest zainstalowanie odpowiedniego SZBD, które zapewnia pełną funkcjonalność w zarządzaniu danymi.

Pytanie 11

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

A. MediaWiki

B. Joomla!

C. WordPress

D. Drupal

Podczas wyboru systemu zarządzania treścią istotne jest zrozumienie różnic między różnymi platformami. Drupal jest potężnym CMS-em często wybieranym do budowy złożonych stron gdzie wymagane są skomplikowane struktury danych i zaawansowana kontrola uprawnień użytkowników. Jednak jego zaawansowane funkcje mogą sprawić że krzywa uczenia się będzie bardziej stroma szczególnie dla początkujących użytkowników. Drupal jest jednak doskonałym wyborem dla dużych organizacji które potrzebują niezawodności i skalowalności. Z kolei WordPress jest najbardziej popularnym CMS-em na świecie znanym ze swojej prostoty i ogromnej liczby dostępnych wtyczek i motywów co czyni go idealnym wyborem dla blogów i prostych stron internetowych. Jego przystępność i łatwość użycia sprawiają że jest on preferowany przez początkujących ale może być niewystarczający dla bardziej rozbudowanych projektów. MediaWiki to platforma stworzona dla projektów typu wiki i jest najlepiej znana z napędzania Wikipedii. Jej funkcje są skoncentrowane na umożliwieniu wielu użytkownikom współpracy i edycji treści co czyni ją mniej odpowiednią dla tradycyjnych stron internetowych. Typowym błędem podczas wyboru CMS-a jest kierowanie się wyłącznie popularnością zamiast analizowania specyficznych potrzeb projektu i odpowiednich funkcji jakie oferuje dany CMS. Dlatego kluczowe jest zrozumienie że wybór CMS-a powinien być podyktowany konkretnymi wymaganiami dotyczącymi funkcjonalności i zarządzania treścią.

Pytanie 12

Na stronie internetowej zdefiniowano styl, który ma być stosowany tylko do określonych znaczników (takich jak niektóre nagłówki i wybrane akapity). W takim kontekście, aby przypisać styl do konkretnych elementów, najlepiej jest użyć

{ text-align: right; }

A. klasy

B. pseudoklasy

C. identyfikatora

D. seletora akapitu

Klasa w CSS jest jednym z najczęściej stosowanych mechanizmów do nadawania stylów elementom HTML na stronach internetowych Kiedy chcemy przypisać styl do kilku konkretnych znaczników które niekoniecznie są tego samego typu użycie klasy jest najlepszym rozwiązaniem Klasy są definiowane w arkuszu stylów przy użyciu kropki przed nazwą klasy na przykład .myClass Następnie można je przypisać do dowolnego elementu HTML dodając atrybut class w znaczniku elementu Co ważne jeden element może mieć przypisane wiele klas co umożliwia bardzo elastyczne zarządzanie stylami Na przykład jeżeli chcemy aby określone nagłówki i akapity miały ten sam kolor tła możemy stworzyć klasę .highlight i przypisać ją zarówno do nagłówków jak i akapitów Klasy są fundamentalnym elementem wykorzystywanym w CSS i są wspierane przez wszystkie przeglądarki zgodnie ze standardami W3C Dzięki nim możemy pisać czytelny i efektywny kod który jest łatwy w utrzymaniu i skalowalny Klasy pozwalają na wielokrotne użycie tego samego zestawu stylów co znacząco ułatwia modyfikację wyglądu strony

Pytanie 13

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

A. border-top

B. padding-top

C. outline-top

D. local-top

W języku CSS, aby zdefiniować wewnętrzny górny margines elementu, należy użyć właściwości padding-top. Marginesy wewnętrzne (padding) to przestrzeń, która znajduje się pomiędzy zawartością elementu a jego obramowaniem, co pozwala na stworzenie efektu oddzielenia treści od krawędzi. Wartości padding-top można ustalać w jednostkach takich jak px, em, rem czy %. Na przykład, kod CSS 'padding-top: 20px;' doda 20 pikseli odstępu od górnej krawędzi obramowania do zawartości elementu. Właściwość ta jest standardowo wspierana we wszystkich nowoczesnych przeglądarkach i jest częścią specyfikacji CSS Box Model, która określa, jak przestrzeń jest zorganizowana w obrębie elementów HTML. Użycie padding-top jest kluczowe, gdy chcemy, aby nasza strona była estetyczna i czytelna, co ma istotne znaczenie w projektowaniu responsywnym, gdzie różne urządzenia mogą wymagać różnych wartości paddingu, aby utrzymać spójność wizualną. Poprawne stosowanie padding-top przyczynia się również do lepszej dostępności strony, co jest istotnym aspektem w nowoczesnym web designie.

Pytanie 14

Emblemat systemu CMS o nazwie Joomla! to

A. Rys. B

B. Rys. D

C. Rys. A

D. Rys. C

Logo przedstawione na Rys. A nie jest związane z Joomla!, ale z systemem Drupal. Drupal, podobnie jak Joomla!, jest systemem zarządzania treścią, ale różnią się one filozofią i strukturą. Drupal często wybierany jest do bardziej złożonych projektów, które wymagają dużej elastyczności i skalowalności, jednak jego administracja może być bardziej skomplikowana w porównaniu do Joomla!. Rys. C przedstawia logo mniej znanego systemu CMS o nazwie Mambo, który był pierwowzorem Joomla!, ale obecnie jest rzadko używany z powodu społeczności, która przeniosła się do Joomla!. Z kolei Rys. D to logo WordPressa, najpopularniejszego CMS na świecie, znanego z prostoty użycia i ogromnej liczby dostępnych wtyczek oraz motywów, co czyni go idealnym wyborem dla blogów i stron komercyjnych. Łatwość, z jaką można zmieniać wygląd i funkcjonalności WordPressa, przyciąga użytkowników, którzy preferują szybkie wdrożenie i łatwość obsługi. Rozpoznanie, które logo reprezentuje dany CMS, jest ważne dla specjalistów IT, ponieważ pozwala na szybki wybór odpowiedniej platformy do określonych potrzeb projektowych oraz unikanie potencjalnych błędów związanych z wyborem nieodpowiedniego narzędzia do realizacji zamierzonych celów. Zrozumienie tych różnic jest kluczowe dla efektywnego zarządzania projektami webowymi i dostosowania technologii do specyfiki zadania oraz wymagań klienta. Wybór odpowiedniego systemu CMS powinien być oparty na analizie potrzeb projektu oraz kompetencjach zespołu, co pozwala na optymalizację workflow i osiągnięcie zamierzonych celów biznesowych w sposób efektywny i zrównoważony.

Pytanie 15

Aby osiągnąć pokazany rezultat w programie graficznym wykorzystano

A. gradient liniowy

B. zmianę intensywności kolorów

C. kanał alpha

D. gradient okrągły

Gradient liniowy to narzędzie stosowane w edytorach grafiki rastrowej do tworzenia płynnych przejść pomiędzy dwoma lub więcej kolorami w zadanym kierunku najczęściej poziomym lub pionowym. W praktyce gradient liniowy jest kluczowy w projektowaniu graficznym ponieważ pozwala na subtelne cieniowanie i nadawanie głębi elementom wizualnym. Przykładowo stosuje się go w tworzeniu tła logotypów czy też przycisków interfejsów użytkownika. Proces tworzenia gradientu liniowego opiera się na ustawieniu punktów początkowych i końcowych oraz przypisaniu im odpowiednich wartości kolorystycznych co podkreśla jego wszechstronność. Standardowym podejściem jest użycie gradientu liniowego w celu uzyskania efektu trójwymiarowości co jest zgodne z dobrymi praktykami projektowania UX i UI. W kontekście branżowym gradienty liniowe są nieodłącznym elementem narzędzi takich jak Adobe Photoshop czy GIMP gdzie umożliwiają manipulację barwą i luminancją co jest kluczowe w profesjonalnym edytowaniu obrazów.

Pytanie 16

Która z zasad dotyczących użycia semantycznych znaczników sekcji w języku HTML 5 jest poprawna?

A. Znacznik <aside> jest wykorzystywany dla dodatkowej treści strony

B. Znacznik <nav> jest przypisany do sekcji <article>

C. Znacznik <footer> powinien być umieszczony na górze strony, a <header> na jej końcu

D. Znacznik <main> może być użyty tylko raz w danym dokumencie

Znacznik <main> w HTML5 jest przeznaczony do określenia głównej treści dokumentu, która jest bezpośrednio związana z jego tematem lub celem. Warto podkreślić, że zgodnie z definicją W3C, <main> powinien być używany tylko raz na stronie, aby zapewnić jednoznaczność struktury dokumentu oraz ułatwić nawigację dla technologii wspomagających, takich jak czytniki ekranu. Przykładowo, gdy tworzysz stronę internetową z artykułami, sekcja <main> może zawierać wszystkie te artykuły, natomiast inne sekcje, takie jak <header>, <footer> czy <aside>, powinny być wykorzystywane do różnych celów, takich jak nawigacja, stopka czy treści poboczne. Użycie <main> zgodnie z jego przeznaczeniem nie tylko poprawia semantykę strony, ale także jej dostępność, co jest kluczowe dla dzisiejszego web developmentu.

Pytanie 17

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

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

B. wybór obszaru o identycznym kolorze

C. zmianę bieżących kolorów

D. pobranie wybranej barwy i ustawienie jej jako aktywnej

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 18

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

A. efektów czcionki

B. koloru czcionki

C. rozmiaru czcionki

D. nazwa czcionki

Pierwsza z niepoprawnych odpowiedzi sugeruje, że parametr face służy do określenia barwy czcionki. Jest to błędne, ponieważ kolor tekstu w HTML ustala się za pomocą innego parametru – 'color'. Możemy na przykład użyć znacznika <font color='red'>tekst</font>, aby ustawić kolor tekstu na czerwony. Parametr face nie ma związku z kolorystyką, a jego jedynym celem jest określenie konkretnej czcionki, co jest kluczowe dla typografii na stronach internetowych. Kolejna niepoprawna odpowiedź wskazuje na efekty czcionki, co również jest mylące. Efekty takie jak pogrubienie, kursywa czy podkreślenie są osiągane dzięki zastosowaniu odpowiednich stylów CSS lub atrybutów w tagach HTML, takich jak <b>, <i>, czy <u>. Parametr face nie wprowadza żadnych efektów, a jedynie wskazuje, jaką czcionkę należy zastosować. Ostatnia niepoprawna odpowiedź odnosi się do wielkości czcionki, co również jest nieprawidłowe. W HTML rozmiar czcionki ustala się za pomocą atrybutu 'size' w tagu <font>, co jest znacznie bardziej ograniczone i mniej elastyczne niż nowoczesne podejścia z CSS. W CSS możemy zdefiniować rozmiar czcionki za pomocą właściwości 'font-size', co umożliwia precyzyjne dostosowanie wielkości tekstu, a także łatwą zmianę przez wykorzystanie jednostek względnych. Podsumowując, niepoprawne odpowiedzi mylą się co do funkcji parametru face, który nie ma związku z kolorem, efektami czy wielkością czcionki.

Pytanie 19

W języku HTML, aby nadać dokumentowi tytuł "Moja strona", który będzie wyświetlany na zakładce przeglądarki internetowej, należy posłużyć się zapisem

A. <meta title="Moja strona">

B. <head>Moja strona</head>

C. <title>Moja strona</title>

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

Element <title> jest absolutnie podstawą, jeśli chodzi o definiowanie tytułu strony w HTML. Umieszcza się go zawsze wewnątrz sekcji <head>, a jego zawartość jest tym, co wyświetla się na karcie przeglądarki. Moim zdaniem to jedna z tych rzeczy, które – choć wydają się drobiazgiem – mają duży wpływ na użyteczność i pozycjonowanie strony. Jeśli budujesz własną stronę lub pracujesz przy większym projekcie, warto pamiętać, żeby tytuł był unikalny i możliwie krótki, bo to właśnie on pojawia się również w wynikach wyszukiwania Google. Organizacje takie jak W3C wyraźnie podkreślają, że <title> jest wymagany w każdym dokumencie HTML5. Często też spotykałem się z przypadkami, gdzie ktoś zapominał o tym tagu i potem dziwił się, że przeglądarka pokazuje „Untitled” albo po prostu adres URL na pasku zakładki. Z praktyki – zawsze warto od razu na początku pracy nad stroną ustawić sensowny tytuł, bo potem łatwo o tym zapomnieć. A jak już masz kilka kart z otwartymi projektami, czy klient patrzy na podgląd w wyszukiwarce – profesjonalnie przygotowany tytuł robi robotę. Pamiętaj też, że <title> nie jest miejscem na wrzucanie dodatkowego kodu HTML, tylko sam tekst. Prosta sprawa, a oszczędza potem sporo nerwów.

Pytanie 20

Oprogramowaniem typowym do obróbki grafiki wektorowej jest

A. Brasero

B. Paint

C. Inkscape

D. Audacity

Inkscape to profesjonalne oprogramowanie do edycji grafiki wektorowej, które jest szeroko stosowane przez projektantów i artystów. Program ten umożliwia tworzenie i edytowanie grafiki wektorowej, co oznacza, że obrazy są zbudowane z linii i kształtów, które można skalować bez utraty jakości. Inkscape obsługuje popularne formaty plików wektorowych, takie jak SVG (Scalable Vector Graphics), a także pozwala na eksport do różnych formatów rastrowych. Praktyczne zastosowania Inkscape obejmują projektowanie logo, ilustracji, infografik oraz elementów interfejsu użytkownika. Biorąc pod uwagę standardy branżowe, Inkscape wspiera wiele narzędzi i funkcji, takich jak warstwy, filtry, gradienty oraz teksty, co czyni go wszechstronnym narzędziem w rękach profesjonalnych grafików. Dodatkowo, dzięki aktywnej społeczności, użytkownicy mogą korzystać z licznych dodatków i zasobów, co zwiększa funkcjonalność programu i pozwala na dostosowanie go do specyficznych potrzeb projektowych.

Pytanie 21

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

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

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

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

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

Podstawowym celem systemu zarządzania treścią (CMS) jest skuteczne oddzielenie treści serwisu od jego prezentacji wizualnej. Właściwe funkcjonowanie CMS opiera się na dynamicznym generowaniu zawartości z bazy danych, co pozwala na łatwe zarządzanie dużymi zbiorami informacji oraz ich aktualizację bez konieczności modyfikowania każdego pliku z osobna. Szablony, które definiują wygląd strony, są kluczowym elementem tej struktury. Dzięki zastosowaniu zdefiniowanych szablonów, różne strony mogą z łatwością przyjąć spójną estetykę wizualną, co jest zgodne z najlepszymi praktykami projektowania stron internetowych. Na przykład, w CMS WordPress, treści publikowane na blogu są przechowywane w bazie danych, a szablon wyświetla je w przyjazny dla użytkownika sposób. Taki podział umożliwia także łatwe wprowadzanie zmian w wyglądzie strony bez wpływu na jej zawartość. Warto pamiętać, że stosowanie bazy danych i szablonów wspiera SEO, ponieważ pozwala na lepsze zarządzanie meta danymi oraz linkami wewnętrznymi.

Pytanie 22

Który efekt został zaprezentowany na filmie?

A. Zmiana jasności zdjęć.

B. Zmniejszenie kontrastu zdjęcia.

C. Przenikanie zdjęć.

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

Poprawnie wskazany efekt to przenikanie zdjęć, często nazywane też płynnym przejściem (ang. crossfade). Polega to na tym, że jedno zdjęcie stopniowo zanika, jednocześnie drugie pojawia się z narastającą widocznością. W praktyce technicznej realizuje się to najczęściej przez zmianę przezroczystości (opacity) dwóch warstw – jedna warstwa z pierwszym obrazem ma zmniejszaną wartość opacity z 1 do 0, a druga z kolejnym zdjęciem zwiększaną z 0 do 1. Na stronach WWW taki efekt robi się zwykle za pomocą CSS (transition, animation, keyframes) albo JavaScriptu, czasem z użyciem bibliotek typu jQuery czy gotowych sliderów. Moim zdaniem to jest jeden z podstawowych efektów, który warto umieć odtworzyć, bo pojawia się w galeriach, sliderach na stronach głównych, prezentacjach produktów czy prostych pokazach slajdów. W materiałach multimedialnych, np. w edycji wideo, dokładnie ten sam efekt nazywa się przejściem typu „cross dissolve” lub „fade”, i zasada działania jest identyczna – płynne nakładanie się dwóch klatek obrazu w czasie. Dobre praktyki mówią, żeby nie przesadzać z czasem trwania przenikania: zwykle 0,5–1,5 sekundy daje przyjemny, profesjonalny wygląd, bez wrażenia „zamulenia” interfejsu. Warto też pilnować spójności – jeśli na stronie używasz przenikania w jednym miejscu, dobrze jest utrzymać podobny styl animacji w innych elementach, żeby całość wyglądała konsekwentnie i nie rozpraszała użytkownika. W kontekście multimediów na WWW przenikanie jest też korzystne wydajnościowo, bo operuje głównie na właściwości opacity i transformacjach, które przeglądarki potrafią optymalizować sprzętowo.

Pytanie 23

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

A. <option value="styl.css" type="text/css" />

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

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

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

Aby dołączyć kaskadowy arkusz stylów zapisany w zewnętrznym pliku, poprawnie używamy tagu <link>. Ten tag pozwala na powiązanie zewnętrznego pliku CSS z dokumentem HTML, co jest kluczowe dla zarządzania stylem witryny internetowej. W atrybucie 'rel' określamy, że jest to arkusz stylów ('stylesheet'), a w atrybucie 'type' informujemy przeglądarkę, że plik jest typu 'text/css'. Atrybut 'href' wskazuje lokalizację pliku CSS. To podejście jest zgodne z zaleceniami W3C, co zapewnia kompatybilność z różnymi przeglądarkami. Przykładowe użycie wygląda następująco: <link rel='stylesheet' type='text/css' href='styl.css'>. Dzięki temu możemy oddzielić strukturę dokumentu HTML od jego stylizacji, co ułatwia zarządzanie kodem oraz poprawia efektywność ładowania stron. Praktyczne zastosowanie tego rozwiązania pozwala na łatwe wprowadzanie globalnych zmian w stylach, co jest szczególnie przydatne w dużych projektach, gdzie wiele stron korzysta z tego samego pliku CSS.

Pytanie 24

W celu sprawdzenia poprawności składni kodu CSS można skorzystać z

A. walidatora.

B. optymalizatora.

C. narzędzia debbuger.

D. konsolidatora.

Jak chodzi o sprawdzanie składni w CSS, to odpowiedzi takie jak debbuger, konsolidator czy optymalizator nie pasują do tego, co potrzebujesz. Debugger jest bardziej narzędziem do szukania błędów w kodzie i sprawdzania, jak działa aplikacja, ale to nie jego główna rola. Konsolidator łączy pliki CSS, co może przyspieszyć ładowanie stron, ale nie sprawdza, czy wszystko jest składniowo poprawne. A optymalizator? To coś, co poprawia wydajność, ale też nie weryfikuje składni. Krótko mówiąc, te narzędzia nie są w stanie sprawdzić, czy Twój kod CSS spełnia wymagane standardy, więc nie nadają się do tego pytania.

A. D.

B. B.

C. A.

D. C.

Dokładnie tak powinien wyglądać ten formularz! Zwróć uwagę, jak HTML interpretuje znaczniki <br> – one wymuszają przejście do nowej linii, więc w kodzie wyjściowym każda sekcja obowiązków pojawi się osobno, pod sobą. To, że jeden z checkboxów ma atrybuty disabled oraz checked, powoduje, że jest domyślnie zaznaczony, ale nie można go odznaczyć ani zaznaczyć ponownie – to ważny niuans, bo czasem zapomina się, że disabled nie oznacza tylko „wyszarzony”, ale też „nie bierz udziału w wysyłaniu formularza”. Takie wykorzystanie checkboxów jest powszechne, szczególnie jeśli chcesz pokazać użytkownikowi pewne stałe informacje (np. obowiązek, którego nie można uniknąć). Z mojego doświadczenia, bardzo często w praktycznych projektach „disabled” stosuje się np. przy wymaganych oświadczeniach, gdzie użytkownik ma tylko do wglądu informację, że coś już jest włączone i nie może tego zmienić. No i jeszcze – checked przy pisaniu kodu powoduje, że checkbox jest domyślnie zaznaczony, co jest zgodne z kodem źródłowym. Same nazwy pól (czyli atrybuty name i value) zostaną wysłane do serwera tylko dla tych pól, które nie są disabled i użytkownik je zaznaczył. To też jest bardzo praktyczna rzecz, bo pozwala precyzyjnie sterować tym, co trafia do backendu. Moim zdaniem taka forma zapisu formularza to dobry punkt wyjścia do dalszej rozbudowy – łatwo dodać tutaj walidację, obsługę JavaScript czy zastosować style CSS. Trzymanie się tej składni ułatwia też potem pracę zespołową, bo jest czytelna i zgodna z oczekiwaniami innych programistów. Podsumowując, wybrałeś opcję najbliższą temu, co wyświetli przeglądarka na bazie danego kodu HTML – i to jest podejście zgodne ze standardami, doceniane w branży.

Pytanie 26

Który z czterech głównych kolorów w modelu barw CMYK jest

A. czarny

B. brązowy

C. pomarańczowy

D. zielony

Model barw CMYK, który jest stosowany głównie w druku, opiera się na czterech podstawowych kolorach: cyjan (C), magenta (M), żółty (Y) oraz czarny (K). Kolor czarny w tym modelu jest kluczowy, ponieważ pozwala na uzyskanie głębszych odcieni i kontrastów, które są trudne do osiągnięcia tylko przy użyciu pozostałych trzech kolorów. W praktyce, stosowanie czarnego tuszu umożliwia również oszczędność na kosztach, gdyż zamiast mieszać kolory, można po prostu nałożyć czarny tusz. Czarny kolor pełni również rolę tzw. "kontrastu" w projektach graficznych, co czyni go niezastąpionym w procesach drukarskich, szczególnie w kontekście druku tekstu oraz wyraźnych detali. Standardy ISO oraz różne normy drukarskie podkreślają znaczenie czarnego tuszu w procesach produkcji, co czyni go fundamentalnym elementem każdej pracy graficznej, która ma być drukowana. Dodatkowo, czarny kolor w modelu CMYK jest także używany do stworzenia ciemniejszych odcieni poprzez nakładanie go na inne kolory, co daje szeroki zakres możliwości twórczych."

Pytanie 27

Edytor, który realizuje zasady WYSIWYG, powinien umożliwiać

A. tworzenie elementów podstawowej grafiki wektorowej

B. przetwarzanie plików dźwiękowych przed ich umieszczeniem na stronie internetowej

C. osiągnięcie podobnego rezultatu tworzonej strony do jej wizualizacji w przeglądarce internetowej

D. publikację serwisów na serwerze przy użyciu wbudowanego klienta FTP

Wybór niepoprawnych odpowiedzi ukazuje szerszy kontekst funkcjonalności edytorów WYSIWYG i ich ograniczeń. Tworzenie podstawowej grafiki wektorowej nie jest typowym zadaniem dla edytora WYSIWYG, ponieważ te narzędzia koncentrują się głównie na edytowaniu treści tekstowych, układzie stron oraz zarządzaniu mediami, a nie na tworzeniu grafiki. Edytory graficzne, takie jak Adobe Illustrator czy Inkscape, są przeznaczone do pracy z grafiką wektorową, co różni się od funkcji edytora WYSIWYG. Publikacja strony na serwerze poprzez wbudowanego klienta FTP natomiast odnosi się do procesu transferu plików i nie jest kluczowym aspektem edytorów WYSIWYG, które skupiają się na tworzeniu i edytowaniu treści. Zazwyczaj użytkownicy korzystają z dedykowanych programów FTP do zarządzania tym procesem, a edytory WYSIWYG powinny jedynie eksportować gotową stronę do formatu, który można łatwo przesłać. Obróbka plików dźwiękowych przed umieszczeniem ich na stronie internetowej również nie jest funkcją edytora WYSIWYG. Edytory te zazwyczaj oferują jedynie opcje wstawiania multimediów, takich jak dźwięk czy wideo, ale nie zajmują się ich edytowaniem. Programy do edycji dźwięku, takie jak Audacity, służą do tego celu i oferują pełne możliwości obróbcze. W kontekście edytorów WYSIWYG kluczowe jest ich skupienie na prezentacji i łatwości użycia, a nie na złożonych procesach edycyjnych innych typów plików.

Pytanie 28

Aby tworzyć strony internetowe w sposób graficzny, należy skorzystać z

A. programu MS Office Picture Manager

B. programu typu WYSIWYG

C. edytora CSS

D. przeglądarki internetowej

Programy typu WYSIWYG (What You See Is What You Get) są narzędziami umożliwiającymi tworzenie stron internetowych w sposób wizualny, co znacznie ułatwia proces projektowania. Użytkownik może edytować strony bez konieczności znajomości języków programowania, takich jak HTML czy CSS, ponieważ te programy generują kod automatycznie na podstawie działań użytkownika. Przykładami takich aplikacji są Adobe Dreamweaver, Wix czy WordPress, które pozwalają na łatwe dodawanie treści, stylów i multimediów. Dzięki zastosowaniu programów WYSIWYG, projektanci mogą skupić się na estetyce i funkcjonalności stron, co jest zgodne z dobrymi praktykami branżowymi, które promują użyteczność i dostępność. Warto również zauważyć, że wiele z tych narzędzi oferuje szereg szablonów i komponentów, które przyspieszają proces tworzenia i zapewniają zgodność z aktualnymi standardami webowymi (np. W3C).

Pytanie 29

Funkcja drzewo kontekstowe w edytorze WYSIWYG Adobe Dreamweaver ma na celu

A. stylizację tekstu za pomocą dostępnych znaczników

B. prezentowanie interaktywnej struktury drzewa HTML dla treści statycznych i dynamicznych

C. przygotowanie szablonu witryny internetowej

D. określenie kaskadowych arkuszy stylów przypisanych do strony

Wybór odpowiedzi dotyczącej definiowania kaskadowych arkuszy stylów (CSS) w kontekście funkcji drzewa kontekstowego w Adobe Dreamweaver jest mylący. Kaskadowe arkusze stylów są narzędziem służącym do stylizacji stron internetowych, ale nie są bezpośrednio związane z funkcjonalnością drzewa kontekstowego, które koncentruje się na przedstawieniu struktury HTML dokumentu. Kiedy projektant korzysta z edytora, może wprowadzać zmiany w stylach CSS, jednak drzewo kontekstowe nie jest dedykowane temu procesowi. Ponadto, zrozumienie struktury HTML jest kluczowe do efektywnego stosowania CSS, ale to nie oznacza, że można je mylić. Druga odpowiedź, dotycząca tworzenia szablonu strony internetowej, jest również nieprecyzyjna. Szablony są narzędziem do ułatwienia konstrukcji stron, ale drzewo kontekstowe nie jest bezpośrednio związane z ich tworzeniem. Podobnie, formatowanie tekstu przy pomocy znaczników nie jest funkcją drzewa kontekstowego; jest to zadanie edytora WYSIWYG jako całości. Zrozumienie tych koncepcji technicznych jest kluczowe, aby uniknąć typowych pułapek myślowych, takich jak mylenie różnych funkcji edytorów oraz ich zastosowań w procesie tworzenia stron internetowych. Osoby pracujące w branży powinny być dobrze zaznajomione z odpowiedzialnością, jaką niesie ze sobą poprawne stosowanie narzędzi i technologii, aby efektywnie realizować projekty webowe.

Pytanie 30

Projektant stworzył logo dla witryny internetowej. Jest to czarny symbol na przezroczystym tle. Aby zachować wszystkie cechy obrazu i umieścić go na stronie, projektant powinien zapisać plik w formacie

A. JPG

B. PNG

C. BMP

D. CDR

Wybór BMP dla logo to nie najlepszy pomysł, bo nie ma tam przezroczystości, a pliki są sporo większe niż te z PNG. BMP to format surowych danych graficznych, więc do internetu się nie nadaje – tam liczy się szybkość ładowania i rozmiar. Trochę inaczej jest z CDR, bo to format głównie w programach graficznych, np. CorelDRAW, ale w przeglądarkach nie jest to coś standardowego. A co z JPG? To lossy format, więc niestety traci się na jakości przy kompresji, a przezroczystość też nie jest jego mocną stroną. Kiedy robimy logo, które musi być ostre i wyraźne, to takie zniekształcenia mogą wyjść na niekorzyść. Wiele osób myli te formaty, bo są znane, ale fajnie by było zrozumieć, że nie wszystko pasuje do wszystkiego. Zły wybór formatu może zepsuć wizualną jakość i funkcjonalność grafik w sieci.

Pytanie 31

Najłatwiejszym i najmniej czasochłonnym sposobem na przetestowanie działania strony internetowej w różnych przeglądarkach i ich wersjach jest

A. zainstalowanie różnych przeglądarek na kilku komputerach i testowanie strony

B. wykorzystanie walidatora kodu HTML

C. użycie emulatora przeglądarek internetowych, np. Browser Sandbox

D. sprawdzenie działania strony w programie Internet Explorer, zakładając, że inne przeglądarki będą kompatybilne

Zainstalowanie na kilku komputerach różnych przeglądarek i testowanie witryny, choć może wydawać się sensowne, wiąże się z wieloma wadami. Po pierwsze, taka metoda jest czasochłonna i wymaga znacznych zasobów, zarówno w zakresie sprzętu, jak i czasu. Każda przeglądarka wymaga aktualizacji, a nowe wersje mogą wprowadzać zmiany, które wpływają na sposób wyświetlania witryny. Dodatkowo, różnorodność systemów operacyjnych i ich wersji, na których mogą działać te przeglądarki, dodatkowo komplikuje proces testowania. W kontekście walidatorów języka HTML, ich zastosowanie jest przede wszystkim ograniczone do sprawdzania poprawności kodu, a nie do testowania rzeczywistego działania witryny w różnych środowiskach. Z perspektywy praktycznej, testowanie w jednej przeglądarce, takiej jak Internet Explorer, z założeniem, że inne przeglądarki będą działać podobnie, jest nierealistyczne. Różne silniki renderujące i interpretujące kod HTML, CSS oraz JavaScript mogą prowadzić do odmiennych wyników. Właściwe przetestowanie witryny wymaga kompleksowego podejścia, które uwzględnia wszystkie możliwe przeglądarki i ich wersje, co czyni emulator najlepszym wyborem. Kluczem do sukcesu w testowaniu jest efektywność, a posłużenie się emulatorami znacząco podnosi jakość i szybkość weryfikacji funkcjonalności witryny.

Pytanie 32

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

A. alt

B. name

C. title

D. dfn

Znacznik <abbr> w HTML pełni rolę semantyczną, pomagając w oznaczaniu skrótów i akronimów. Atrybut alt jest stosowany w znacznikach <img> do opisywania obrazów, co jest istotne dla dostępności i SEO, ale nie ma związku ze znacznikami tekstowymi jak <abbr>. Alt informuje o treści obrazu, co jest kluczowe dla użytkowników niewidzących, lecz nie pełni funkcji rozwijania skrótów tekstowych. Atrybut dfn służy do definiowania terminów w tekście, zazwyczaj używany w połączeniu ze znacznikiem <dfn>, a nie <abbr>. Chociaż dfn dostarcza definicji, nie jest używany do rozwijania skrótów. Atrybut name nie jest związany z rozwijaniem tekstu ani z <abbr>. Jest on stosowany głównie w formularzach HTML do identyfikacji elementów, takich jak <input>, umożliwiając ich rozróżnienie. Mylenie tych atrybutów wynika często z braku zrozumienia ich specyficznych zastosowań w kontekście HTML i dostępności. Właściwe używanie atrybutów to klucz do tworzenia semantycznie poprawnych i dostępnych stron internetowych.

Pytanie 33

W CSS, aby zmienić kolor tekstu dowolnego elementu HTML po najechaniu na niego myszą, należy wykorzystać pseudoklasę

A. :coursor

B. :visited

C. :active

D. :hover

:hover jest pseudoklasą wykorzystywaną w CSS do stylizacji elementów w momencie, gdy użytkownik na nie najedzie kursorem. To bardzo przydatne narzędzie, pozwalające na interaktywne zmiany wyglądu strony internetowej, co znacznie poprawia doświadczenia użytkownika. Przykładem zastosowania może być zmiana koloru tekstu linków. Można to osiągnąć, definiując odpowiednie reguły CSS, takie jak: `a:hover { color: red; }`, co spowoduje, że linki zmienią kolor na czerwony, gdy na nie najedziemy. Pseudoklasa :hover jest zgodna z W3C CSS, a jej zastosowanie w projektowaniu stron zapewnia lepszą dostępność i intuitwność interfejsu. Warto pamiętać, że efekty hover powinny być subtelne i dobrze przemyślane, aby nie odwracać uwagi od głównych treści strony, ale jednocześnie umożliwić użytkownikom szybkie zauważenie działań, które mogą podjąć.

Pytanie 34

Aby usunąć nienaturalne wygładzanie ukośnych krawędzi w grafice rastrowej, czyli tak zwane schodkowanie, konieczne jest wykorzystanie filtru

A. antyaliasingu

B. gradientu

C. pikselizacji

D. szumu

Zalecane podejście do eliminacji schodkowania nie powinno opierać się na metodach takich jak gradienty, szum czy pikselizacja. Gradienty są techniką stosowaną do uzyskiwania płynnych przejść kolorów, jednak nie rozwiązują one problemu schodkowania. Mimo że mogą poprawić estetykę wizualną, szczególnie w obszarach z płynnymi przejściami, nie eliminują one zjawiska poszarpanych krawędzi w grafice rastrowej. Szum wprowadza losowe zmiany do grafiki, co w niektórych kontekstach może dawać efekt „zmiękczenia” obrazu, lecz nie jest skuteczną metodą na wygładzanie krawędzi. Działanie to może nawet pogorszyć wrażenie wizualne, ponieważ wprowadza niepożądany chaos kolorystyczny. Pikselizacja z kolei to technika, która redukuje szczegóły obrazu przez ograniczenie liczby kolorów i ich rozdzielczości, co w rzeczywistości bardziej uwydatnia schodkowanie, zamiast je eliminować. W praktyce, zastosowanie tych technik może prowadzić do błędnych wniosków o jakości obrazu i skuteczności ich działania. Często zdarza się, że osoby mylą różne metody wygładzania krawędzi z innymi technikami przetwarzania obrazu, co prowadzi do nieefektywnego wykorzystania dostępnych narzędzi. Aby uzyskać najlepsze rezultaty w grafice, należy stosować antyaliasing jako standardową metodę wygładzania krawędzi.

Pytanie 35

Jaką właściwość należy zastosować w selektorze CSS, aby osiągnąć efekt rozrzucenia liter?

A. text-decoration

B. letter-spacing

C. letter-transform

D. text-space

Właściwość CSS, która pozwala na uzyskanie efektu rozstrzelenia liter, to 'letter-spacing'. Używając tej właściwości, możemy dostosować odstęp pomiędzy poszczególnymi literami w tekście, co jest szczególnie przydatne w projektowaniu typograficznym oraz w celu zwiększenia czytelności tekstu. Wartość 'letter-spacing' może być określona w jednostkach takich jak piksele (px), em lub rem, co daje projektantom elastyczność w dostosowywaniu odstępów do różnych rozmiarów czcionek. Na przykład, ustawiając 'letter-spacing: 2px;', uzyskujemy dodatkowy odstęp 2 pikseli między literami, co sprawia, że tekst staje się bardziej przejrzysty. Zgodnie z zaleceniami W3C, stosowanie 'letter-spacing' powinno być rozważane w kontekście całego projektu, aby nie zaburzać harmonii wizualnej. Użycie tej właściwości jest istotnym elementem w planowaniu stylów CSS, który wpływa na estetykę oraz funkcjonalność stron internetowych.

Pytanie 36

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 37

Która operacja nie wpłynie na wielkość zajmowanej pamięci przez plik graficzny?

A. Modyfikacja rozdzielczości obrazu

B. Kompresja

C. Zmiana rozmiaru obrazu z użyciem atrybutów HTML

D. Interpolacja

Zmiana rozdzielczości obrazu, interpolacja oraz kompresja to operacje, które w istotny sposób wpływają na rozmiar pliku graficznego, co często jest mylone z ich funkcjami wizualnymi. Zmiana rozdzielczości obrazu to proces, w którym liczba pikseli w obrazie jest modyfikowana, co prowadzi do mniejszej lub większej ilości danych do zapisania w pliku. Na przykład, zmniejszenie rozdzielczości z 300 DPI do 72 DPI znacząco redukuje rozmiar pliku, ponieważ zmniejsza liczbę informacji, które muszą być zapisane. Interpolacja natomiast jest techniką, która służy do obliczania wartości pikseli w nowych rozmiarach obrazu. W tym procesie generowane są nowe piksele, co często skutkuje zwiększeniem rozmiaru pliku, jeśli obraz jest powiększany. Kompresja to kolejny kluczowy element wpływający na rozmiar pliku. Kompresja stratna i bezstratna zmieniają sposób, w jaki dane obrazów są przechowywane, co może znacznie obniżyć wagę pliku. Typowe błędy myślowe związane z tymi operacjami polegają na założeniu, że manipulacje na poziomie wyświetlania nie mają wpływu na rzeczywiste parametry pliku graficznego. Ważne jest, aby zrozumieć, że każda z tych operacji ma swoje zastosowanie i wpływ na jakość oraz rozmiar pliku, co powinno być starannie rozważane podczas pracy z grafiką.

Pytanie 38

Jakie znaczniki HTML pozwolą na prezentację tekstu w jednym wierszu na stronie, zakładając, że nie zastosowano żadnych reguł CSS?

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

B. style="margin-bottom: 0cm;"><p>Dobre strony </p><p style="letter-spacing:3px">mojej strony</p>

C. style="margin-bottom: 0cm;"><h3>Dobre strony </h3><h3 style="letter-spacing:3px">mojej strony</h3>

D. style="margin-bottom: 0cm;"><div>Dobre strony </div><div style="letter-spacing:3px">mojej strony</div>

Znacznik <span> jest idealnym rozwiązaniem do wyświetlania tekstu w jednym wierszu, ponieważ jest to znacznik inline, co oznacza, że nie wprowadza nowych linii przed ani po swoim zawartości. W tym przypadku <span>Dobre strony </span><span style="letter-spacing:3px">mojej strony</span> pozwala na utrzymanie tekstu w jednej linii, niezależnie od zastosowanego stylu. Styl CSS, taki jak letter-spacing, może być wykorzystany do modyfikacji wyglądu tekstu, nie wpływając na jego układ w dokumentach HTML. Dodatkowo, stosowanie znacznika <span> jest zgodne z W3C, co zapewnia, że struktura dokumentu jest zrozumiała dla przeglądarek oraz urządzeń wspomagających. Przykłady zastosowania <span> obejmują wyróżnianie fragmentów tekstu, dodawanie stylizacji bez wprowadzania nowych bloków, co jest istotne w responsywnym designie. Dzięki temu, <span> staje się kluczowym elementem w budowaniu interaktywnych i estetycznych interfejsów użytkownika.

Pytanie 39

Podczas definiowania koloru w formacie RGBA, na przykład rgba(100, 40, 50, 0.2), ostatnia liczba odnosi się do

A. nasycenia koloru czarnego

B. przezroczystości, gdzie 1 oznacza pełną przezroczystość, a 0 jej brak

C. przezroczystości, gdzie 0 oznacza pełną przezroczystość, a 1 jej brak

D. saturacji barw RGB

Wartość w notacji RGBA, która odpowiada za przezroczystość, jest kluczowym elementem definiowania koloru w grafice komputerowej. W notacji rgba(100, 40, 50, 0.2) ostatnia wartość, czyli 0.2, reprezentuje stopień przezroczystości koloru. Wartość ta oscyluje w zakresie od 0 do 1, gdzie 0 oznacza całkowitą przezroczystość (kolor jest niewidoczny), a 1 oznacza całkowitą nieprzezroczystość (kolor jest w pełni widoczny). Taka notacja jest niezwykle użyteczna w projektowaniu stron internetowych i aplikacji, gdzie często zachodzi potrzeba nakładania elementów wizualnych na siebie, np. w przypadku przycisków, tła czy efektów modalu. Dzięki zastosowaniu przezroczystości można uzyskać ciekawy efekt estetyczny, poprawić czytelność tekstów na kolorowych tłach czy stworzyć wrażenie głębi. W przypadku standardów CSS, użycie RGBA jest zalecane w kontekście projektowania responsywnego i dostępności, co jest zgodne z najlepszymi praktykami branżowymi.

Pytanie 40

Aby stworzyć szablon strony z trzema ustawionymi obok siebie kolumnami, można użyć stylu CSS.

A. .kolumny { float: left; width: 33%; }

B. .kolumny { float: right; height: 33%; }

C. .kolumny { float: left; width: 40%; }

D. .kolumny { clear: both; height: 33%; }

Twoja odpowiedź jest prawidłowa. W CSS do tworzenia szablonu strony z trzema kolumnami ustawionymi obok siebie stosuje się właściwość 'float: left;', a dodatkowo ustawia się szerokość każdej kolumny na 'width: 33%;'. Ta technika pozwala na równomierne rozmieszczenie trzech kolumn w poziomie na stronie. Właściwość 'float' służy do opływania elementów strony, a właściwość 'width' umożliwia kontrolę nad szerokością elementów. To są standardy w branży w projektowaniu stron internetowych. W stylach CSS zawsze powinniśmy starać się zapewnić jak najbardziej płynne i spójne doświadczenia dla użytkowników, a ten sposób tworzenia szablonów trzech kolumn jest jednym z niezbędnych narzędzi w naszym arsenale. Pamiętaj, że zrozumienie i umiejętne stosowanie CSS jest kluczowe dla tworzenia estetycznych i funkcjonalnych stron internetowych.

Rozpocznij nowy egzamin

Powrót do strony głównej