Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik programista
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 8 czerwca 2026 20:58
Data zakończenia: 8 czerwca 2026 21:06

Egzamin zdany!

Wynik: 29/40 punktów (72,5%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

W dziedzinie grafiki komputerowej termin kanał alfa odnosi się do

A. pikselizacji

B. barwienia

C. przezroczystości

D. koloryzacji

Kanał alfa jest kluczowym elementem w grafice komputerowej, który odpowiada za reprezentowanie przezroczystości pikseli w obrazie. W praktyce oznacza to, że każdy piksel w obrazie może mieć przypisany poziom przezroczystości, co pozwala na tworzenie efektów takich jak cieniowanie, nakładanie różnych warstw oraz efekty specjalne. Kanał alfa jest zwykle reprezentowany jako dodatkowy kanał w formacie RGBA, gdzie R, G, i B oznaczają odpowiednio kolory czerwony, zielony i niebieski, a A to kanał alfa, który definiuje stopień przezroczystości. Na przykład, w przypadku edytorów graficznych, takich jak Adobe Photoshop, użytkownicy mogą łatwo manipulować przezroczystością warstw, co jest bardzo przydatne w procesie tworzenia złożonych kompozycji. W standardach graficznych, takich jak OpenGL i DirectX, kanał alfa również odgrywa istotną rolę w renderowaniu obiektów 3D, umożliwiając realistyczne efekty wizualne. Zrozumienie działania kanału alfa jest niezbędne dla artystów cyfrowych i projektantów, aby w pełni wykorzystać możliwości, jakie oferuje nowoczesna grafika komputerowa.

Pytanie 2

Wskaż poprawną definicję stylu CSS dla przycisku typu submit o właściwościach: czarny kolor tła, brak obramowania, marginesy wewnętrzne 5 px.

input[type=submit] {
  background-color: #000000;
  border: none;
  padding: 5px;
}                         A.

input[type=submit] {
  background-color: #ffffff;
  border: none;
  padding: 5px;
}                         B.

input=submit {
  background-color: #000000;
  border: none;
  margin: 5px;
}                         C.

input=submit {
  background-color: #000000;
  border: 0px;
  margin: 5px;
}                         D.

A. B.

B. D.

C. A.

D. C.

Dobrze! Wybrałeś prawidłową odpowiedź. Odpowiedź A jest poprawna, ponieważ to styl CSS dla przycisku typu submit spełnia wszystkie podane wymagania. Wygląda to mniej więcej tak: 'input[type='submit'] { background-color: black; border: none; padding: 5px; }'. 'input[type='submit']' to selektor, który wskazuje elementy wejściowe o typie 'submit'. Następnie, wewnątrz nawiasów klamrowych, mamy trzy deklaracje. 'background-color: black;' określa, że przycisk ma czarne tło. 'border: none;' usuwa wszelkie obramowanie. 'padding: 5px;' ustawia marginesy wewnętrzne na 5 pikseli. Pisanie czystego i efektywnego kodu CSS jest kluczową umiejętnością dla każdego doświadczonego dewelopera front-endu. Dobrze napisane style CSS mogą znacznie poprawić wydajność strony internetowej i ułatwić jej utrzymanie.

Pytanie 3

Wskaż, jaki błąd walidacyjny zawiera przedstawiony fragment kodu w języku HTML 5.

<h6>CSS</h6>
<p>Kaskadowe arkusze stylów (<b>ang. <i>Cascading Style Sheets</b></i>)<br>to język służący ...</p>

A. Znacznik zamykający /b jest niezgodny z zasadą zagnieżdżania

B. Znacznik br nie został prawidłowo zamknięty

C. Znacznik h6 nie jest używany w HTML5

D. Znacznik br nie powinien znajdować się wewnątrz znacznika p

W analizowanym fragmencie kodu HTML, znacznik zamykający /b jest niezgodny z zasadą zagnieżdżania. W prawidłowej konstrukcji HTML, znaczniki powinny być zamykane w odwrotnej kolejności do ich otwierania — nazywa się to zasadą LIFO (Last In, First Out). W przedstawionym kodzie, znacznik <b> jest otwierany przed znacznikiem <i>, ale zamykany po nim, co jest błędem strukturalnym. Poprawny zapis powinien wyglądać tak: <b><i>Cascading Style Sheets</i></b>. Ważne jest, aby zawsze pamiętać o poprawnej strukturze dokumentu HTML, ponieważ nieprzestrzeganie tej zasady może prowadzić do nieprzewidywalnych wyników renderowania na różnych przeglądarkach. Zasada ta jest kluczowa w zapewnieniu, że znaczniki są zagnieżdżone poprawnie i że style oraz skrypty działają zgodnie z oczekiwaniami. Tego rodzaju błędy mogą również negatywnie wpływać na dostępność strony dla użytkowników korzystających z czytników ekranowych.

Pytanie 4

W języku CSS określono styl dla pola edycyjnego. Pole to będzie miało jasnozielony kolor tła, gdy będzie w trybie edycji.

A. gdy będzie na nie najechane kursorem bez kliknięcia.

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

C. po naciśnięciu na nie myszką w celu wpisania tekstu.

D. w każdej sytuacji.

Odpowiedź "po kliknięciu myszą w celu zapisania w nim tekstu" jest prawidłowa, ponieważ reguła CSS <pre>input:focus { background-color: LightGreen; }</pre> odnosi się do stanu "focus" elementu formularza, który występuje, gdy pole edycyjne jest aktywne. To znaczy, że użytkownik musi kliknąć na pole, aby je aktywować, co pozwala na wprowadzenie danych. W momencie, gdy pole ma stan "focus", jego tło zmienia się na jasnozielone, co jest pomocne dla użytkowników, aby zidentyfikować, które pole aktualnie edytują. To zachowanie jest zgodne z dobrymi praktykami projektowania interfejsów użytkownika, które promują klarowność i intuicyjność. Dzięki zastosowaniu kolorów i wizualnych wskazówek, użytkownicy mogą łatwiej poruszać się po formularzach, co zwiększa ich efektywność. Ponadto, stosowanie takich reguł CSS jest zgodne z zaleceniami WCAG (Web Content Accessibility Guidelines), które składają się z wytycznych dotyczących dostępności treści internetowych, co sprawia, że aplikacje są bardziej przyjazne dla użytkowników z różnymi potrzebami.

Pytanie 5

W CSS zastosowano stylowanie elementu listy, przy czym żadne inne style CSS nie zostały ustalone. Użyte stylowanie spowoduje, że

li :hover { color: Maroon; }

A. Teksty wszystkich elementów, którym nadano id „hover”, będą w kolorze Maroon.

B. Wszystkie teksty elementów listy będą w kolorze Maroon.

C. Po najechaniu kursorem na element listy, kolor tekstu zmieni się na Maroon.

D. Kolor Maroon będzie dotyczył co drugiego elementu listy.

Twoja odpowiedź jest na pewno trafna, bo reguła CSS li:hover { color: Maroon; } działa w kontekście pseudo-klasy :hover. To znaczy, że jak najedziesz kursorem na element listy (li), to jego kolor tekstu zmienia się na Maroon. Fajnie, że to wiesz! Takie podejście jest zgodne z zasadami CSS, które pozwalają na dynamiczne zmiany wyglądu elementów, gdy użytkownik z nimi interaguje. Na przykład, jeżeli masz listę z elementami <li>, to najeżdżając na nie, kolor tekstu zmienia się na Maroon. To może naprawdę poprawić użytkowanie strony i wyróżnić ważne elementy w interfejsie. Używanie pseudo-klas, jak :hover, to standard w projektowaniu stron, które są responsywne i interaktywne, co znacznie podnosi komfort przeglądania.

Pytanie 6

Jaką wartość w formacie szesnastkowym ma kolor określony kodem RGB o wartościach rgb(128,16,8)?

A. #FF0F80

B. #801008

C. #800F80

D. #FF1008

Jak spojrzymy na inne odpowiedzi, to można zauważyć, że mają one jakieś błędy w konwersji kolorów RGB na szesnastkowy. Pierwsza z błędnych odpowiedzi to #FF0F80, gdzie wartość czerwonego jest zbyt wysoka, bo mamy FF zamiast 80, które jest poprawne. Taki błąd zmienia kolor na całkiem inny, więc widać, jak ważne jest poprawne przetwarzanie tych wartości. Druga odpowiedź, #FF1008, też pokazuje za wysoką wartość czerwonego, a zielony jest nieprawidłowy, bo 10 to w rzeczywistości 16 w systemie dziesiętnym, co oczywiście wpływa na końcowy kolor. W ostatniej odpowiedzi, czyli #800F80, mamy złą wartość dla zielonego i niebieskiego. Powinno być 08 dla niebieskiego, a F80 to już coś innego. Takie pomyłki pokazują, że warto znać system RGB i jak go przerobić na szesnastkowy, żeby kolory były odpowiednio odwzorowane w projektach.

Pytanie 7

Który z podanych formatów pozwala na zapis zarówno dźwięku, jak i obrazu?

A. PNG

B. MP3

C. MP4

D. WAV

Format MP4, znany również jako MPEG-4 Part 14, jest jednym z najpopularniejszych formatów multimedialnych, który umożliwia jednoczesny zapis zarówno dźwięku, jak i obrazu. Dzięki zastosowaniu zaawansowanej kompresji, MP4 pozwala na przechowywanie wysokiej jakości materiałów w stosunkowo małych plikach, co czyni go idealnym do przesyłania i strumieniowania w Internecie. MP4 obsługuje wiele kodeków, takich jak H.264 dla wideo oraz AAC dla dźwięku, co pozwala na szeroką kompatybilność z różnymi urządzeniami, od smartfonów po odtwarzacze multimedialne. Format ten jest zgodny z wieloma standardami, co czyni go wszechstronnym wyborem dla twórców treści. Przykłady jego zastosowania obejmują filmy wideo na platformach streamingowych, klipy muzyczne i wideoklipy. Dzięki swoim zaletom, MP4 stał się de facto standardem w przemyśle multimedialnym, co w znacznym stopniu przyczyniło się do jego popularności oraz wszechstronności.

Pytanie 8

W jakiej technologii niemożliwe jest przetwarzanie danych wprowadzanych przez użytkownika na stronie WWW?

A. CSS

B. PHP

C. AJAX

D. JavaScript

CSS, czyli Kaskadowe Arkusze Stylów, jest technologią używaną do stylizacji stron internetowych. Jego głównym celem jest określenie, jak elementy HTML powinny wyglądać, w tym ich wygląd, kolor, rozmiar oraz układ na stronie. CSS nie ma możliwości przetwarzania danych użytkownika, ponieważ działa wyłącznie po stronie klienta i nie posiada funkcji interakcji z danymi użytkowników. Przykładem zastosowania CSS jest nadanie stylu nawigacji w serwisie internetowym, gdzie style mogą być określone w pliku CSS, ale nie mają zdolności do przechwytywania i przetwarzania informacji wprowadzonych przez użytkowników w formularzach. Standardy CSS rozwijane przez World Wide Web Consortium (W3C) podkreślają jego rolę w stylizacji i prezentacji, a nie w logice aplikacji czy przetwarzaniu danych. Użytkownicy mogą korzystać z CSS do tworzenia responsywnych układów, jednak bez zdolności do interakcji z danymi, co czyni go technologią czysto wizualną.

Pytanie 9

Aby ustalić wysokość grafiki wyświetlanej na stronie internetowej, należy użyć właściwości CSS o nazwie

A. height

B. margin

C. width

D. padding

Odpowiedź 'height' jest prawidłowa, ponieważ właściwość CSS o tej nazwie bezpośrednio określa wysokość elementu na stronie internetowej. Używając 'height', możemy zdefiniować wartość w pikselach, procentach lub innych jednostkach miary, co pozwala na precyzyjne dostosowanie wyglądu elementów do wymagań projektu. Na przykład, zdefiniowanie wysokości obrazka jako 'height: 200px;' sprawi, że obrazek zawsze będzie miał 200 pikseli wysokości, niezależnie od jego oryginalnych wymiarów. Dobrą praktyką jest również używanie wartości procentowych, które pozwalają na responsywne projektowanie, dostosowujące się do różnych rozmiarów ekranu. Ponadto, warto wspomnieć o zastosowaniu 'min-height' i 'max-height', które umożliwiają kontrolowanie minimalnych i maksymalnych wymiarów elementów, co jest pomocne w tworzeniu elastycznych i estetycznych układów stron. Ponadto, definiując wysokość obrazków, warto pamiętać o zachowaniu proporcji poprzez odpowiednie użycie również właściwości 'width'.

Pytanie 10

Który z typów plików dźwiękowych oferuje największą kompresję rozmiaru?

A. PCM

B. CD-Audio

C. WAV

D. MP3

Formaty WAV, PCM oraz CD-Audio nie oferują takiej redukcji rozmiaru pliku jak MP3. WAV to format pliku audio, który przechowuje dźwięk w formie nieskompresowanej, co oznacza, że zachowuje on pełną jakość dźwięku, ale skutkuje to dużymi rozmiarami plików. Na przykład, pięciominutowy utwór w formacie WAV może zajmować nawet 50 MB, co jest niepraktyczne dla przechowywania i przesyłania plików w Internecie. PCM (Pulse Code Modulation) to metoda kodowania analogowego sygnału dźwiękowego w formie cyfrowej, która również nie stosuje kompresji, co przekłada się na duże rozmiary plików. PCM używany jest głównie w profesjonalnej produkcji audio, gdzie jakość dźwięku jest kluczowa, ale nie jest to format przyjazny dla użytkowników szukających oszczędności miejsca. Z kolei CD-Audio to standard audio, który również wykorzystuje PCM. Płyty CD przechowują dźwięk w formacie nieskompresowanym, co skutkuje tym, że standardowa płyta CD mieszcząca około 80 minut muzyki zajmuje około 700 MB. Te formaty, choć istotne w różnych dziedzinach audio, nie zapewniają efektywnej kompresji potrzebnej w codziennym użytku, co czyni je mniej praktycznymi w porównaniu do formatu MP3.

Pytanie 11

Zademonstrowano efekt stylizacji CSS oraz kod HTML. W jaki sposób należy ustawić styl, aby uzyskać takie formatowanie?

A. #first-line {font-size: 200%; color:brown;}

B. p.first-line {font-size: 200%; color:brown;}

C. .first-line {font-size: 200%; color:brown;}

D. p::first-line {font-size: 200%; color:brown;}

Odpowiedź p::first-line {font-size: 200%; color:brown;} jest prawidłowa, ponieważ selektor ::first-line w CSS służy do formatowania pierwszej linii tekstu wewnątrz elementu blokowego, takiego jak <p>. W tym przypadku formatowanie odnosi się do zmiany rozmiaru czcionki na 200% i koloru na brązowy, co jest zgodne z efektem prezentowanym na obrazie. Jest to powszechna praktyka, gdy chcemy wyróżnić pierwszą linię tekstu, nadając jej specjalny wizualny akcent. Warto zaznaczyć, że selektory pseudo-klasowe, jak ::first-line, są częścią specyfikacji CSS i umożliwiają bardziej precyzyjne i kontekstualne formatowanie treści, co jest zgodne z najlepszymi praktykami w projektowaniu stron internetowych. Tego typu rozwiązania zwiększają czytelność i estetykę tekstu. W praktyce, stosowanie ::first-line jest szczególnie przydatne w projektach wymagających subtelnych wyróżnień tekstowych, takich jak artykuły prasowe, blogi czy strony promujące treści literackie. Taki styl programowania jest zgodny z zaleceniami W3C, co czyni go nie tylko efektywnym, ale i standardowym podejściem w tworzeniu nowoczesnych stron internetowych.

Pytanie 12

W języku HTML zapisano formularz. Który z efektów działania kodu będzie wyświetlony przez przeglądarkę zakładając, że w drugie pole użytkownik wpisał wartość "ala ma kota"?

<form>
  <select>
    <option value="v1">Kraków</option>
    <option value="v2">Poznań</option>
    <option value="v3">Szczecin</option>
  </select> <br>
  <input type="password" />
</form>

Efekt 1

Efekt 2

Efekt 3

Efekt 4

A. Efekt 4.

B. Efekt 3.

C. Efekt 2.

D. Efekt 1.

Pozostałe odpowiedzi nie są poprawne, ponieważ nie odpowiadają one opisowi działania kodu HTML formularza. W przypadku odpowiedzi 'Efekt 1', 'Efekt 3' oraz 'Efekt 4', możemy zauważyć, że nie są one zgodne z opisanym działaniem formularza. W HTML, pole hasła reprezentowane jest jako ciąg znaków zastępczych - kropeczki. Przy wpisaniu 'ala ma kota' do pola hasła, nie jesteśmy w stanie zobaczyć tej wartości, tylko kropeczki. Przy wyborze odpowiedzi 'Efekt 1', 'Efekt 3' lub 'Efekt 4', musielibyśmy zobaczyć wpisaną wartość 'ala ma kota' zamiast kropeczek, co jest niezgodne ze standardami HTML. Dlatego też, odpowiedzi te są nieprawidłowe. Pamiętaj, że ważne jest zrozumienie, jak działają różne elementy formularza w HTML, aby poprawnie przewidzieć efekt ich działania w przeglądarce.

Pytanie 13

Aby włączyć zewnętrzny skrypt JavaScript o nazwie skrypt.js, konieczne jest umieszczenie w kodzie HTML

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

B. <script> skrypt.js </script>

C. <link rel="script" href="/skrypt.js" />

D. <link rel="JavaScript" type="js" href="/skrypt.js" />

Poprawna odpowiedź to <script src="/skrypt.js"></script>. Wykorzystanie atrybutu src w tagu <script> to standardowa metoda do ładowania zewnętrznych skryptów JavaScript w HTML. Dzięki temu przeglądarka wie, żeby pobrać i uruchomić kod z pliku skrypt.js. To z kolei pozwala na lepszą organizację, bo możemy używać tego samego skryptu w różnych miejscach projektu. No i w praktyce, to przynosi dużo korzyści, jak łatwiejsze utrzymanie czy debugowanie aplikacji. Jak mamy porządnie zorganizowany kod, to strona się szybciej ładuje, a przeglądarka może buforować te skrypty. Na koniec warto dodać, że dobrze osadzone skrypty wpływają też pozytywnie na SEO, bo wyszukiwarki lubią strony, które są zorganizowane i zoptymalizowane. Warto pamiętać, żeby umieszczać tagi <script> na końcu dokumentu HTML, zaraz przed zamknięciem tagu </body>, bo to pozwala na szybsze wyświetlanie zawartości.

Pytanie 14

Którą funkcję z menu Kolory programu GIMP użyto, w celu uzyskania efektu przedstawionego w filmie?

A. Krzywe.

B. Barwienie.

C. Inwersja.

D. Progowanie.

Prawidłowo wskazana funkcja to „Progowanie”, bo dokładnie ona zamienia obraz kolorowy lub w odcieniach szarości na obraz dwuwartościowy: piksel jest albo czarny, albo biały, w zależności od tego, czy jego jasność przekracza ustawiony próg. W GIMP-ie znajdziesz ją w menu Kolory → Progowanie. Suwakami ustalasz zakres poziomów jasności, które mają zostać potraktowane jako „białe”, a wszystko poza tym zakresem staje się „czarne”. Efekt, który się wtedy uzyskuje, jest bardzo charakterystyczny: mocno kontrastowy, bez półtonów, coś w stylu skanu czarno-białego lub grafiki do druku na ploterze tnącym. Z mojego doświadczenia progowanie świetnie nadaje się do przygotowania logotypów, szkiców technicznych, schematów, a także do wyciągania konturów z lekko rozmytych zdjęć. Często używa się go też przed wektoryzacją, żeby program śledzący krawędzie miał wyraźne granice między czernią a bielą. W pracy z grafiką na potrzeby stron WWW próg bywa stosowany np. przy tworzeniu prostych ikon, piktogramów albo masek (maski przezroczystości można przygotować właśnie na bazie obrazu progowanego). Dobrą praktyką jest najpierw sprowadzenie obrazu do odcieni szarości i dopiero potem użycie progowania, bo wtedy masz większą kontrolę nad tym, jak rozkłada się jasność i gdzie wypadnie granica progu. Warto też pamiętać, że progowanie jest operacją destrukcyjną – traci się informacje o półtonach – więc najlepiej pracować na kopii warstwy, żeby w razie czego móc wrócić do oryginału i poprawić ustawienia progu.

Pytanie 15

Przedstawiona ikona funkcji edytora grafiki rastrowej o nazwie "kubełek" umożliwia

A. wypełnienie zaznaczonego obszaru kolorem.

B. zmianę aktywnych kolorów.

C. zaznaczenie obszaru o takim samym kolorze.

D. pobranie wskazanej barwy i ustawienie jej, jako aktywnej.

Gratulacje, odpowiedź jest poprawna. Ikona 'kubełek farby' w edytorach grafiki rastrowej jest narzędziem umożliwiającym wypełnienie zaznaczonego obszaru wybranym kolorem. Działanie tego narzędzia jest podobne do rozlewania farby - kolor wypełnia ciągły obszar aż do napotkania krawędzi lub pikseli o innym kolorze. Ta funkcja pozwala na szybkie i efektywne kolorowanie większych powierzchni obrazu. W praktyce, jest to niezwykle przydatne narzędzie, szczególnie gdy potrzebujesz szybko zmienić tło obrazu lub wypełnić obszar jednolitym kolorem. Warto również zauważyć, że różne edytory mogą mieć dodatkowe opcje dla tego narzędzia, takie jak możliwość wyboru tolerancji (która decyduje, jak bardzo podobny kolor musi być, aby został wypełniony) czy wypełnianie według warstwy czy według obrazu.

Pytanie 16

W dokumencie HTML stworzono formularz. Jakie działanie kodu zostanie pokazane przez przeglądarkę, jeśli w drugie pole użytkownik wprowadzi tekst „ala ma kota”?

A. Efekt 1

B. Efekt 3

C. Efekt 4

D. Efekt 2

Błędne odpowiedzi wynikają z niewłaściwego zrozumienia działania elementów HTML takich jak select i input type=password. Efekt 1 przedstawia listę kontrolną z opcjami do wyboru co jest niezgodne z kodem HTML w którym użyto elementu select pozwalającego na wybór tylko jednej opcji z rozwijanej listy. Tego typu błąd często wynika z mylenia różnych typów wprowadzania danych w HTML co może prowadzić do nieporozumień w projektowaniu interfejsów użytkownika. Efekt 3 sugeruje że w polu input można swobodnie zobaczyć wpisaną wartość co jest sprzeczne z użyciem typu password który celowo ukrywa wprowadzone znaki zapewniając ochronę danych. Taki typ błędu pojawia się gdy programiści nie uwzględniają zasady bezpieczeństwa w projektowaniu formularzy internetowych. Z kolei efekt 4 pokazuje zestaw przycisków radiowych i ukryte hasło co również nie odpowiada kodowi HTML. Przyciski radiowe są używane w formularzach do wyboru jednej opcji z grupy ale nie są częścią przedstawionego kodu. Często takie błędy są wynikiem niewłaściwego przypisywania typów wprowadzania danych i mogą prowadzić do niewłaściwego działania aplikacji webowych. Kluczowe jest więc zrozumienie różnych typów elementów formularzy i ich właściwego zastosowania w kontekście interfejsu użytkownika oraz bezpieczeństwa danych użytkownika. Dobre praktyki projektowania formularzy obejmują nie tylko estetykę i funkcjonalność ale przede wszystkim bezpieczeństwo i intuicyjność obsługi co jest kluczowe dla użytkowników końcowych. Użycie odpowiednich elementów HTML zgodnych ze standardami W3C zapewnia lepszą kompatybilność i użyteczność aplikacji internetowych oraz pomaga w unikaniu typowych błędów projektowych i implementacyjnych które mogą wpływać na doświadczenie użytkownika.

Pytanie 17

Jednostka ppi (pixels per inch) oznacza

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

B. określa rozdzielczość obrazów tworzonych przez drukarki oraz plotery

C. jest jednostką rozdzielczości skanerów definiującą częstość próbkowania obrazu

D. jest parametrem wyznaczającym rozdzielczość cyfrowych urządzeń dokonujących pomiarów

Odpowiedź "określa rozdzielczość obrazów rastrowych" jest prawidłowa, ponieważ jednostka ppi (pixels per inch) jest kluczowym wskaźnikiem dla obrazów rastrowych, które składają się z pikseli. PPI definiuje gęstość pikseli w odniesieniu do jednostki długości, co ma bezpośredni wpływ na jakość i szczegółowość obrazu. Im wyższa wartość ppi, tym więcej pikseli przypada na cal, co skutkuje wyraźniejszymi i bardziej szczegółowymi obrazami. Na przykład, w druku wysokiej jakości, często stosuje się wartości ppi w zakresie 300 lub wyżej, co pozwala na uzyskanie wyrazistych detali. W kontekście grafiki komputerowej i edycji zdjęć, ppi jest również ważne przy ustalaniu rozmiaru druku oraz jakości obrazu, co jest zgodne z praktykami branżowymi. Ponadto, standardy takie jak sRGB i Adobe RGB określają, jak ppi wpływa na reprodukcję kolorów i detali w druku i wyświetlaniu cyfrowym, co czyni te informacje niezwykle istotnymi dla profesjonalnych grafików i fotografów.

Pytanie 18

W HTML, aby dodać obrazek z tekstem przylegającym, umiejscowionym na środku obrazka, trzeba użyć znacznika

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

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

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

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

Wybór niepoprawnych odpowiedzi wskazuje na niepełne zrozumienie zastosowania znaczników HTML oraz atrybutów związanych z obrazkami i tekstem. Rozważając pierwszy przypadek, użycie atrybutu hspace nie ma wpływu na środkowe umiejscowienie tekstu w pionie. Hspace, który definiuje przestrzeń poziomą wokół obrazka, jest przestarzałym atrybutem, który nie wpływa na sposób wyświetlania tekstu obok obrazka. Kolejna opcja, w której użyto atrybutu align ustawionego na 'middle', jest poprawna w kontekście pozycjonowania obrazka, jednak nie jest częścią HTML5, co czyni ją nieodpowiednią w nowoczesnych projektach. W przypadku wskazania atrybutu height ustawionego na 50%, nie wpływa on na pozycjonowanie w kontekście tekstu. Atrybut height dostosowuje tylko wysokość obrazka, ale nie reguluje jego umiejscowienia względem tekstu. Warto zrozumieć, że dla osiągnięcia zamierzonego efektu przylegania tekstu do obrazka, lepiej jest korzystać z CSS, np. z właściwości 'display: inline-block' i 'vertical-align', które oferują bardziej elastyczne i nowoczesne podejście do stylizacji i pozycjonowania elementów na stronie.

Pytanie 19

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

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

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

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

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

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

Pytanie 20

Standard kodowania ISO-8859-2 jest używany do poprawnego wyświetlania

A. polskich liter, takich jak: ś, ć, ń, ó, ą

B. znaków specjalnych dla języka kodu strony

C. symboli matematycznych

D. znaków zarezerwowanych dla języka opisu strony

Wybór odpowiedzi dotyczący znaków specjalnych dla języka kodu strony sugeruje, że ISO-8859-2 byłoby używane do obsługi elementów związanych z kodowaniem strony, co jest mylące. Chociaż kodowanie znaków jest istotne dla wyświetlania treści, odnosi się ono głównie do sposobu, w jaki znaki są reprezentowane w kodzie komputerowym, a nie do języka kodu strony. Z kolei odpowiedź dotycząca znaków zarezerwowanych dla języka opisu strony wprowadza dodatkowy zamęt, ponieważ zarezerwowane znaki nie mają związku z kodowaniem znaków, lecz dotyczy to specyficznych symboli i elementów w języku HTML, które mogą być interpretowane przez przeglądarki. Ostatnia odpowiedź sugerująca, że ISO-8859-2 jest używane dla symboli matematycznych nie ma podstaw, ponieważ ten standard koncentruje się na znakach używanych w językach europejskich. Takie nieprawidłowe podejścia mogą wynikać z braku zrozumienia specyfikacji standardów kodowania, co prowadzi do nieporozumień w zakresie ich zastosowania w praktyce. Należy pamiętać, że w kontekście tworzenia stron internetowych kluczowe jest wykorzystanie odpowiedniego kodowania, które zapewnia prawidłowe wyświetlanie treści, a nie symboli specyficznych dla danej dziedziny. Dlatego, dla zrozumienia znaczenia kodowania znaków, niezbędne jest zapoznanie się z dokumentacją oraz standardami, które definiują, jak różne znaki są reprezentowane w różnych kodowaniach.

Pytanie 21

Jaką właściwość CSS należy zastosować, aby uzyskać linie przerywaną w obramowaniu?

A. double

B. solid

C. dotted

D. dashed

Odpowiedź dashed jest poprawna ponieważ w CSS właściwość ta służy do definiowania stylu obramowania w postaci linii kreskowanej Jest to często używane do wizualnego oddzielenia zawartości na stronie internetowej bez zbytniego skupiania uwagi Użycie dashed sprawia że linia jest bardziej subtelna w porównaniu do solid co czyni ją dobrym wyborem w przypadku chęci zachowania minimalistycznego wyglądu Zgodnie ze standardami CSS właściwość border-style może przyjmować kilka wartości w tym solid dotted double i dashed Każda z tych wartości ma swoje unikalne zastosowania na przykład solid tworzy ciągłą linię natomiast dotted tworzy linię z kropkami Linia dashed składa się z krótkich kresek co różni ją od linii double która jest podwójną linią W praktyce dashed jest często stosowane w projektach gdzie ważne jest wskazanie na określone sekcje lub elementy bez przytłaczania użytkownika Zgodnie z dobrymi praktykami można dostosować szerokość i kolor obramowania co pozwala na lepszą integrację z ogólnym stylem strony CSS daje dużą elastyczność w projektowaniu co pozwala na tworzenie różnorodnych i responsywnych interfejsów użytkownika

Pytanie 22

W CSS wartości: underline, overline, blink są powiązane z atrybutem

A. font-weight

B. text-style

C. font-style

D. text-decoration

Atrybut text-decoration w CSS jest tym, co pozwala na dodawanie różnych efektów do tekstu. Możemy dzięki niemu użyć takich rzeczy jak underline, overline czy nawet blink, chociaż to ostatnie nie jest już zbyt popularne, bo wiele przeglądarek to ignoruje ze względu na dostępność. Dzięki tym efektom tekst może wyglądać bardziej estetycznie, a czytelność też się poprawia. Na przykład, jeśli użyjesz 'p { text-decoration: underline; }', to cały tekst w tym paragrafie będzie podkreślony. W CSS3 dodano też nowe możliwości, jak text-decoration-color czy text-decoration-style, co daje jeszcze większą kontrolę nad tym, jak nasz tekst będzie wyglądał. Dlatego myślę, że umiejętność korzystania z text-decoration jest naprawdę ważna dla każdego, kto zajmuje się tworzeniem stron internetowych.

Pytanie 23

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

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

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

C. skorzystać z funkcji gradientu.

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

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

Pytanie 24

W CSS zapis w postaci ```h1::first-letter{color:red;}``` spowoduje, że kolor czerwony będzie dotyczył

A. pierwszej litery nagłówka drugiego poziomu

B. pierwszej litery nagłówka pierwszego poziomu

C. tekstów nagłówka pierwszego poziomu

D. pierwszej linii akapitu

Zapis CSS h1::first-letter {color: red;} odnosi się do selektora pseudo-elementu first-letter, który jest używany do stylizacji pierwszej litery bloku tekstowego w nagłówkach. W tym wypadku, gdy selektor jest zastosowany do elementu h1, oznacza to, że kolor pierwszej litery nagłówka pierwszego stopnia (h1) zostanie zmieniony na czerwony. Pseudo-element first-letter działa tylko dla elementów blokowych, takich jak nagłówki, akapity czy listy. W praktyce, jeśli w dokumencie HTML mamy element <h1> z tekstem, np. 'Witaj świecie', to wyłącznie litera 'W' zostanie wyświetlona w kolorze czerwonym. To podejście jest zgodne ze standardami CSS, które definiują pseudo-elementy jako specyficzne fragmenty dokumentu, które można stylizować niezależnie od reszty zawartości. Warto również zauważyć, że stosowanie takich selektorów pozwala na uzyskanie bardziej złożonych efektów wizualnych bez konieczności modyfikacji struktury HTML. Umożliwia to projektantom stron internetowych większą elastyczność i kontrolę nad estetyką treści.

Pytanie 25

Fragment kodu w języku JavaScript realizujący dodawanie dwóch liczb ma poniższą postać. Aby dodawanie wykonane było po kliknięciu przycisku o nazwie "dodaj", należy w wykropkowane miejsce wstawić

Podaj pierwszą liczbę: <input type="text" name="liczba1" />
 Podaj drugą liczbę: <input type="text" name="liczba2" />
 ….
 <script type=text/javascript>
 function dodaj()
 {
     // ta funkcja realizuje dodawanie i podaje jego wynik
 }
 </script>

A. <button onselect="return dodaj()">dodaj</button>

B. <button onclick="return oblicz()">dodaj</button>

C. <button onclick="return dodaj()">dodaj</button>

D. <button onselect="return dodaj()">oblicz</button>

Wybór niewłaściwej odpowiedzi sugeruje pewne nieporozumienie związane z obsługą zdarzeń w JavaScript i jak są one wywoływane w kontekście przycisków. Wszystkie pozostałe odpowiedzi używają zdarzenia 'onselect' lub wywołują nieistniejącą funkcję 'oblicz'. Zdarzenie 'onselect' jest wyzwalane, gdy użytkownik zaznacza tekst w elemencie, co jest nieodpowiednie dla przycisku. Innymi słowy, 'onselect' nie jest odpowiednim zdarzeniem do obsługi kliknięcia przycisku. Co więcej, wywołanie funkcji 'oblicz' jest błędem, ponieważ nie istnieje taka funkcja zdefiniowana w skrypcie. Ta myląca odpowiedź może wynikać z niezrozumienia, jak zdarzenia są obsługiwane w JavaScript i jakie zdarzenia są odpowiednie dla różnych elementów. Zasada ta jest zgodna z dobrymi praktykami programowania, które zalecają używanie odpowiednich zdarzeń dla różnych elementów i typów interakcji użytkownika.

Pytanie 26

Barwy kolorów reprezentowane na stożku można uzyskać w modelu

A. RGB

B. CMYK

C. HSV

D. CIEXYZ

W tym pytaniu haczyk polega na tym, że różne modele barw mają zupełnie inną logikę i geometrię przedstawiania kolorów. Pomylenie ich jest bardzo częste, bo w praktyce ciągle przewijają się te same skróty: RGB, CMYK, CIEXYZ, HSV. Warto je sobie dobrze poukładać. Model RGB opisuje kolor jako kombinację trzech składowych: czerwonej, zielonej i niebieskiej. Geometrycznie przedstawia się go jako sześcian: każdy wymiar to jedna składowa, od 0 do 255 (lub 0–1 w zapisie znormalizowanym). To jest model addytywny, typowy dla monitorów, telewizorów, ekranów smartfonów. Można go wizualizować na różne sposoby, ale klasycznie nie jako stożek barw, tylko właśnie jako kostkę przestrzeni kolorów. CMYK to z kolei model subtraktywny, wykorzystywany głównie w druku – Cyan, Magenta, Yellow, Key (Black). Tutaj myśli się raczej o nałożeniu farb drukarskich niż o intuicyjnej percepcji koloru. Geometria prezentacji CMYK też nie jest stożkiem, tylko wielowymiarową bryłą, a sam model słabo nadaje się do „ludzkiego” doboru kolorów na ekranie, dlatego nie stosuje się go jako podstawy kolor-pickerów do WWW czy interfejsów. CIEXYZ jest jeszcze inną historią: to matematyczny, ustandaryzowany przez CIE model przestrzeni barw, który ma dobrze odwzorowywać ludzkie postrzeganie koloru i służy jako punkt odniesienia do kalibracji, profilowania kolorów, ICC itp. On jest fundamentem kolorometrii, ale w codziennej pracy grafika czy web developera rzadko ktoś bezpośrednio „maluje” w CIEXYZ. Typowy błąd polega na tym, że skoro każdy z tych modeli opisuje kolory, to wydaje się, że można je dowolnie przedstawić w formie stożka. Jednak stożek barw to specyficzna wizualizacja modelu o parametrach: odcień, nasycenie i jasność (lub podobne), czyli właśnie HSV/HSL. Dopiero taki podział pozwala wygodnie ułożyć barwy wokół osi (Hue) i wzdłuż wysokości (Value). Dlatego tylko HSV z podanych odpowiedzi pasuje do opisu barw reprezentowanych na stożku.

Pytanie 27

Typowym programem przeznaczonym do edycji grafiki wektorowej jest

A. Paint.

B. Audacity.

C. Brasero.

D. Inkscape.

Poprawnie wskazany program to Inkscape, bo jest to typowy, specjalistyczny edytor grafiki wektorowej. Grafika wektorowa opiera się na obiektach takich jak linie, krzywe Béziera, wielokąty, tekst, które są opisane matematycznie (współrzędne, promienie, kąty), a nie na siatce pikseli. Dzięki temu projekty można skalować praktycznie dowolnie bez utraty jakości, co jest absolutnym standardem przy projektowaniu logotypów, ikon, infografik, schematów technicznych czy elementów interfejsu użytkownika. Inkscape obsługuje format SVG, który jest otwartym standardem W3C i jest powszechnie stosowany w projektach webowych, także w responsywnych interfejsach. W praktyce, używając Inkscape, można tworzyć np. logo firmy, które później bez problemu osadzisz na stronie WWW, w materiałach do druku, na banerach, a nawet w aplikacji mobilnej, bez martwienia się o rozmazanie czy pikselizację. Program oferuje warstwy, style, grupowanie obiektów, precyzyjne wyrównywanie, siatki i prowadnice, co jest zgodne z dobrymi praktykami pracy z grafiką: porządek w projekcie, praca na oddzielnych warstwach, używanie krzywych zamiast „ręcznego” rysowania byle jakich kształtów. Moim zdaniem, znajomość Inkscape albo innego edytora wektorowego (np. Adobe Illustrator, CorelDRAW) to dzisiaj podstawowa umiejętność dla kogoś, kto myśli poważnie o grafice komputerowej czy front-endzie. Wiele firm wręcz wymaga, żeby materiały były dostarczane właśnie w formacie wektorowym, bo wtedy łatwiej je modyfikować, dopasowywać kolorystykę do brandingu i eksportować do różnych formatów (PNG, PDF, EPS) w zależności od potrzeb. Inkscape pozwala też na pracę z krzywymi, maskami, gradientami czy efektami filtrów, co daje bardzo duże możliwości przy zachowaniu zalet wektorów.

Pytanie 28

Weryfikację kompletności formularza, działającą po stronie przeglądarki, należy zrealizować w języku

A. JavaScript

B. PHP

C. Ruby on Rails

D. CSS

Poprawna odpowiedź to JavaScript, bo właśnie ten język działa bezpośrednio w przeglądarce użytkownika i pozwala na dynamiczną weryfikację formularzy jeszcze przed wysłaniem danych na serwer. JavaScript ma dostęp do drzewa DOM, więc może odczytać wartości pól, sprawdzić, czy nie są puste, czy e‑mail ma poprawny format, czy hasło ma odpowiednią długość, a nawet czy dwa pola hasła są identyczne. Z mojego doświadczenia to jest absolutny standard w nowoczesnych aplikacjach webowych: najpierw lekka walidacja po stronie klienta w JS, a dopiero potem solidna walidacja po stronie serwera. Dobrym przykładem jest formularz rejestracji: po wpisaniu zbyt krótkiego hasła JavaScript może od razu wyświetlić komunikat pod polem, bez przeładowania strony. Można też blokować przycisk „Wyślij”, dopóki wszystkie wymagane pola nie są poprawnie wypełnione. W praktyce często używa się zdarzeń takich jak onsubmit na formularzu albo input/blur na polach, żeby na bieżąco sprawdzać dane. Można też korzystać z gotowych bibliotek walidacyjnych, ale pod spodem i tak pracuje JavaScript. W dobrych praktykach przyjmuje się zasadę: walidacja po stronie klienta poprawia wygodę i szybkość obsługi (user experience), ale nie zastępuje walidacji po stronie serwera. JavaScript służy więc do „pierwszej linii obrony” i podpowiedzi użytkownikowi, a serwer (np. w PHP czy innym języku backendowym) musi i tak wszystko jeszcze raz sprawdzić ze względów bezpieczeństwa. Warto też pamiętać o wykorzystaniu wbudowanych mechanizmów HTML5 (atrybuty required, type="email" itd.), ale to JavaScript daje pełną kontrolę nad logiką i komunikatami błędów, bo pozwala tworzyć własne reguły i reagować na konkretne zachowania użytkownika.

Pytanie 29

Wykres słupkowy należy zapisać w formacie rastrowym tak, aby jakość jego krawędzi była jak najlepsza, również dla dużego powiększenia, unikając efektu aliasingu. Do tego celu można zastosować format

A. CDR

B. PNG

C. JPEG

D. SVG

Analizując dostępne możliwości, łatwo się pogubić między formatami rastrowymi a wektorowymi, bo w praktyce często mieszają się te pojęcia. Format JPEG mimo swojej popularności w fotografii zupełnie nie nadaje się do wykresów słupkowych – kompresja stratna silnie degraduje jakość ostrych krawędzi i tekstów, przez co nawet lekko powiększony wykres wygląda nieestetycznie, pojawiają się brzydkie artefakty, rozmycia czy wręcz fragmentacja kolorów. To powszechny błąd, że JPEG jest uniwersalny – tak naprawdę sprawdza się tylko przy zdjęciach i obrazach z płynnymi przejściami kolorów. Z kolei SVG to już zupełnie inna liga, bo to format wektorowy. W nim krawędzie są zawsze idealnie ostre nawet przy dowolnym powiększeniu, bo są opisane matematycznie, a nie jako siatka pikseli. Problem w tym, że pytanie dotyczyło formatu rastrowego, więc SVG – choć fantastyczny do wykresów – nie spełnia tego warunku. CDR, czyli CorelDRAW, to natomiast format projektu wektorowego, popularny raczej w poligrafii i druku, a nie w codziennym zapisie wykresów do prezentacji czy publikacji elektronicznych. Pliki CDR są niekompatybilne z większością standardowych przeglądarek czy edytorów graficznych i wymagają specjalistycznego oprogramowania, więc to raczej ślepy zaułek. Wiele osób nie odróżnia również pojęcia aliasingu – czyli poszarpanych krawędzi w grafice rastrowej – od rozmycia czy utraty jakości wynikającej ze złego formatu. PNG jako jedyny z wymienionych formatów rastrowych umożliwia uzyskanie bardzo ostrych krawędzi, a przy zachowaniu wysokiej rozdzielczości pozwala niemal całkowicie uniknąć efektu aliasingu. Moim zdaniem to jeden z tych tematów, gdzie praktyka bardzo szybko weryfikuje teorię i wybierając PNG, po prostu nie ma się później problemów z jakością czy kompatybilnością. Trzeba pamiętać, że dobór formatu ma ogromny wpływ na ostateczną prezentację danych, dlatego nie warto iść na skróty, tylko dobrać narzędzie do konkretnego celu.

Pytanie 30

tr:nth-child(even) {background-color: #F2F2F2;}

Zastosowane formatowanie selektora tr:nth-child(even) spowoduje:

A. oddzielenie wierszy nieparzystych od parzystych wierszem z szarym tłem.

B. wypełnienie szarym tłem parzystych wierszy tabeli.

C. wypełnienie wszystkich wierszy tabeli szarym tłem.

D. wypełnienie szarym tłem nieparzystych wierszy tabeli.

Selektor CSS tr:nth-child(even) oznacza dokładnie: wybierz wszystkie elementy <tr>, które są parzystymi dziećmi swojego rodzica, licząc od 1 w górę. W CSS funkcja nth-child() przyjmuje słowo kluczowe even dla elementów parzystych (2, 4, 6, …) i odd dla elementów nieparzystych (1, 3, 5, …). To jest zdefiniowane w specyfikacji CSS Selectors Level 3. W Twoim przykładzie even powoduje, że przeglądarka nadaje styl background-color: #F2F2F2; wszystkim parzystym wierszom tabeli, czyli 2., 4., 6. itd. wierszowi <tr>. Dzięki temu powstaje tzw. zebra-striping, czyli naprzemienne kolorowanie wierszy tabeli, bardzo często stosowane w interfejsach webowych, bo poprawia czytelność danych i ułatwia śledzenie wiersza wzrokiem. W praktyce używa się tego zwykle razem z drugim stylem, np. tr:nth-child(odd) { background-color: white; }, żeby wyraźnie rozróżnić wiersze. Warto też pamiętać, że nth-child() liczy wszystkie dzieci danego rodzica, a nie tylko te z określoną klasą, więc jeżeli w tabeli pojawią się np. wiersze nagłówkowe <tr> w <thead>, to selektor tr:nth-child(even) zastosowany globalnie może dać trochę inne efekty niż się spodziewasz. Dobrą praktyką jest zawężanie selektora, np. tbody tr:nth-child(even), żeby kolorowanie dotyczyło tylko części z danymi, bez nagłówków. Z mojego doświadczenia warto też używać kolorów o niewielkim kontraście, tak jak #F2F2F2, żeby nie męczyć wzroku użytkownika przy długich tabelach.

Pytanie 31

Jaki zapis w dokumencie HTML umożliwia powiązanie z zewnętrznym arkuszem stylów o nazwie style.css?

A. <link rel="stylesheet' src="style.css">

B. <a src="style.css">

C. <link rel="stylesheet" href="style.css">

D. <a href="style.css">

Zapis <link rel="stylesheet" href="style.css"> jest poprawnym sposobem na dołączenie zewnętrznego arkusza stylów do dokumentu HTML. Atrybut 'rel' określa relację między dokumentem a zewnętrznym zasobem, w tym przypadku wskazując, że jest to arkusz stylów. Atrybut 'href' z kolei wskazuje ścieżkę do pliku CSS, który ma być użyty. Użycie znacznika <link> jest zgodne z standardem W3C i jest najlepszą praktyką w tworzeniu stron internetowych. Dzięki temu przeglądarka może załadować style z zewnętrznego pliku, co pozwala na łatwiejsze zarządzanie stylami oraz ich ponowne użycie w różnych dokumentach HTML. Umożliwia to także separację treści od stylizacji, co jest kluczowe w koncepcji wzorców projektowych, takich jak MVC (Model-View-Controller). Przykładowo, aby zmienić wygląd całej strony, wystarczy edytować jeden plik CSS, co znacząco upraszcza proces tworzenia i utrzymania witryn.

Pytanie 32

Przedstawiono efekt formatowania CSS oraz kod HTML. Jak należy zdefiniować styl, aby osiągnąć takie formatowanie?

<p>
Mimozami jesień się zaczyna,<br>
Złotawa, krucha i miła.<br>
To ty, to ty jesteś ta dziewczyna,<br>
Która do mnie na ulicę wychodziła.
</p>

A. #first-line { font-size: 200%; color: brown; }

B. p::first-line { font-size: 200%; color: brown; }

C. p.first-line { font-size: 200%; color: brown; }

D. .first-line { font-size: 200%; color: brown; }

Gratulacje! Wybrałeś prawidłową odpowiedź. Pseudoelement ::first-line jest specyficznym selektorem CSS służącym do formatowania pierwszej linii wewnątrz bloku tekstu. Jest to zgodne ze standardami CSS3. Wszystkie style zdefiniowane za pomocą ::first-line będą miały wpływ tylko na pierwszą linię paragrafu, niezależnie od tego, ile zdań zawiera. W tym konkretnym przypadku, zastosowanie selektora `p::first-line` powoduje powiększenie czcionki do 200% oraz zmianę jej koloru na brązowy, ale tylko dla pierwszej linii tekstu zawartego w paragrafie (znacznik `<p>`). Jest to przydatne, gdy chcemy wyróżnić pierwszą linię tekstu, na przykład w dużej ilości tekstu lub artykułach. Pseudoelementy, takie jak ::first-line, pomagają w tworzeniu bardziej złożonych i precyzyjnych stylów bez konieczności dodawania dodatkowych znaczników do naszego kodu HTML.

Pytanie 33

W trakcie edycji grafiki rastrowej w aplikacji obsługującej kanały, dodanie kanału alfa oznacza

A. ustalenie właściwego balansu bieli

B. powiększenie głębi ostrości obrazu

C. wzmocnienie krawędzi obrazu

D. wprowadzenie warstwy z przezroczystością

Dodanie kanału alfa do grafiki rastrowej jest kluczowym krokiem w procesie zarządzania przezroczystością w obrazach. Kanał alfa to dodatkowy kanał, który przechowuje informacje o przezroczystości pikseli, co pozwala na tworzenie efektów wizualnych, takich jak miękkie krawędzie i złożone kompozycje. W praktyce, zastosowanie kanału alfa umożliwia na przykład nałożenie obiektów na różne tła bez wyraźnych granic, co jest szczególnie przydatne w grafice komputerowej, projektowaniu stron internetowych czy produkcji wideo. Dobrą praktyką w branży jest korzystanie z programów graficznych, takich jak Adobe Photoshop czy GIMP, gdzie dodanie kanału alfa można zrealizować poprzez stworzenie warstwy maski. Podczas pracy w takich programach warto również pamiętać o wykorzystaniu formatu PNG, który obsługuje przezroczystość, co jest standardem w zapewnieniu wysokiej jakości grafiki w sieci.

Pytanie 34

W CSS jednostką miary, która jest wyrażona w punktach edytorskich, oznaczana jest symbolem

A. px

B. pt

C. em

D. in

Symbolem jednostki miary wyrażonej w punktach edytorskich w CSS jest 'pt'. Jednostka ta odnosi się do punktów typograficznych, które są tradycyjnie używane w druku. 1 punkt typograficzny odpowiada 1/72 cala. Używanie jednostki 'pt' jest szczególnie przydatne w projektowaniu dla mediów drukowanych, gdzie precyzyjne odwzorowanie wielkości tekstu ma kluczowe znaczenie. W CSS, 'pt' może być stosowane do definiowania rozmiarów czcionek, marginesów oraz innych właściwości wymiarowych, co zapewnia spójność między różnymi urządzeniami i mediami. Przykład użycia może wyglądać tak: 'font-size: 12pt;' co oznacza, że tekst ma mieć 12 punktów typograficznych. Warto pamiętać, że różne przeglądarki i systemy operacyjne mogą różnie interpretować jednostki miary, dlatego stosowanie punktów w kontekście druku jest bardziej zalecane, aniżeli w sieci, gdzie lepiej sprawdzają się inne jednostki, takie jak 'px' lub 'em'. W dokumentach CSS3 jednostka 'pt' jest częścią standardów CSS, co zapewnia jej szerokie wsparcie w różnych przeglądarkach i narzędziach do projektowania.

Pytanie 35

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. przekształcić obraz w odcienie szarości

B. zaimportować obraz do edytora grafiki wektorowej

C. dodać kanał alfa

D. zmniejszyć rozdzielczość obrazu

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 36

Który element blokowy języka HTML5 jest przeznaczony do umieszczenia w nim nawigacji witryny?

A. nav

B. header

C. main

D. aside

Poprawnie wskazany został element <nav>, który w HTML5 jest semantycznym kontenerem przeznaczonym specjalnie na nawigację. Według specyfikacji HTML Living Standard element <nav> służy do grupowania głównych bloków odsyłaczy nawigacyjnych, takich jak menu główne, menu w stopce, menu kategorii czy paginacja. Przeglądarki, czytniki ekranu i różne narzędzia asystujące rozpoznają ten znacznik jako obszar nawigacyjny, co bardzo poprawia dostępność (accessibility) strony. Z mojego doświadczenia, gdy struktura jest zrobiona semantycznie, screen readery potrafią jednym skrótem klawiaturowym przeskoczyć do nawigacji, co jest ogromnym ułatwieniem dla użytkowników niewidomych. W praktyce w <nav> umieszczamy listy linków, najczęściej w postaci <ul><li><a>…</a></li></ul>. Przykładowo: <nav><ul><li><a href="/">Strona główna</a></li><li><a href="/oferta">Oferta</a></li><li><a href="/kontakt">Kontakt</a></li></ul></nav>. Taka konstrukcja jest zgodna z dobrymi praktykami front-endu: semantyczny HTML, czytelna struktura, łatwiejsze stylowanie w CSS i prostsza nawigacja w JavaScript. Co ważne, <nav> nie jest zwykłym divem – jego nazwa od razu mówi, do czego służy, co ułatwia pracę całego zespołu projektowego. W projektach komercyjnych często stosuje się kilka bloków <nav> na jednej stronie: główne menu w headerze, dodatkowe menu w stopce, czasem boczne menu kategorii. Standardy W3C dopuszczają to, pod warunkiem że te sekcje rzeczywiście służą do nawigowania. Dobrym zwyczajem jest nie umieszczać w <nav> pojedynczych przypadkowych linków w tekście artykułu – ten znacznik jest przewidziany dla istotnych struktur nawigacyjnych, a nie dla zwykłych hiperłączy w treści. Dzięki temu kod HTML pozostaje przejrzysty, łatwiej go walidować i utrzymywać w większych projektach.

Pytanie 37

Skrypt na stronę WWW stworzony w języku PHP

A. jest przetwarzany w taki sam sposób jak JavaScript

B. jest wykonywany po stronie serwera

C. może działać bez wsparcia serwera WWW

D. jest realizowany po stronie klienta

Kod PHP jest przetwarzany po stronie serwera, co oznacza, że wszystkie instrukcje napisane w tym języku są wykonywane na serwerze, a nie na komputerze klienta. Kiedy użytkownik żąda strony internetowej, serwer WWW interpretuje kod PHP, generuje odpowiedni HTML i wysyła go do przeglądarki. Dzięki temu możliwe jest dynamiczne tworzenie treści, uzależnionej od danych wejściowych użytkownika czy zawartości bazy danych. Przykładowo, w aplikacjach internetowych takich jak systemy zarządzania treścią (CMS) czy platformy e-commerce, PHP pozwala na generowanie różnorodnych widoków i interakcji w oparciu o aktualne informacje. Kluczowym aspektem dobrej praktyki w programowaniu w PHP jest separacja logiki aplikacji od warstwy prezentacji, co wspiera łatwiejsze zarządzanie kodem i jego utrzymanie. Warto również zaznaczyć, że PHP współpracuje z różnymi systemami baz danych, co umożliwia przechowywanie i przetwarzanie dużych ilości danych. Na przykład, w typowej aplikacji webowej można wykorzystać PHP do komunikacji z bazą MySQL, co pozwala na dynamiczne ładowanie treści w odpowiedzi na interakcje użytkownika.

Pytanie 38

p { font-family: Arial, Helvetica, sans-serif; }

Zdefiniowany styl dla selektora p spowoduje, że tekst w paragrafie zostanie wyświetlony czcionką:

A. maszynową.

B. szeryfową.

C. bezszeryfową.

D. dekoracyjną.

W tym pytaniu łatwo się pomylić, bo wiele osób bardziej kojarzy konkretne nazwy fontów niż ich rodziny. Kluczowe jest zrozumienie, jak działa właściwość font-family w CSS. Zapis font-family: Arial, Helvetica, sans-serif definiuje listę krojów w kolejności priorytetu. Przeglądarka sprawdza po kolei: najpierw próbuje użyć Ariala, potem Helvetiki, a jeśli żaden z nich nie jest dostępny na urządzeniu, wybiera dowolny systemowy font z rodziny sans-serif. I to właśnie ostatni element – sans-serif – określa typ czcionki, czyli że ma to być krój bezszeryfowy. Czcionka szeryfowa (serif) to np. Times New Roman czy Georgia, z charakterystycznymi „ogonami” i ozdobnikami na końcach liter. Tutaj nie ma ani nazwy serif, ani generycznego słowa serif, więc nie ma podstaw, by mówić o kroju szeryfowym. Czcionka maszynowa, nazywana w CSS monospace, to taka, w której wszystkie znaki mają tę samą szerokość, jak w starych maszynach do pisania (np. Courier New). W kodzie nie pojawia się słowo monospace ani żaden typowy font maszynowy, więc to też odpada. Z kolei określenia typu „dekoracyjna” mogą mylić, bo w CSS istnieje kiedyś częściej używany generic fantasy, czasem kojarzony z ozdobnymi krojami, ale w tym przykładzie nie mamy ani fantasy, ani cursive, tylko wyraźnie sans-serif. Typowy błąd myślowy polega na tym, że ktoś patrzy na nazwę Arial i nie kojarzy jej z rodziną bezszeryfową, albo sugeruje się wyglądem przykładowego tekstu z jakiegoś edytora. W praktyce jednak to właśnie Arial i Helvetica są klasycznymi reprezentantami rodziny sans-serif. Warto patrzeć na ostatni człon deklaracji font-family – ten generyczny typ jest zawsze najważniejszą wskazówką, do jakiej kategorii należy krój pisma w danym stylu.

Pytanie 39

Który z typów formatów oferuje największą kompresję pliku dźwiękowego?

A. MP3

B. CD-Audio

C. WAV

D. PCM

Wybór formatów takich jak WAV, PCM czy CD-Audio w kontekście redukcji rozmiaru pliku dźwiękowego jest błędny, ponieważ wszystkie te formaty są klasyfikowane jako formaty bezstratne. Oznacza to, że podczas ich zapisu nie następuje utrata danych dźwiękowych, co z kolei prowadzi do dużych rozmiarów plików. WAV jest surowym formatem dźwiękowym, który przechowuje dane audio w ich najczystszej formie, co czyni go niewłaściwym wyborem dla osób, które potrzebują efektywnej kompresji. PCM (Pulse Code Modulation) to technika, która służy do przetwarzania dźwięku, ale sama w sobie nie zmniejsza rozmiaru pliku. CD-Audio to standard zapisu dźwięku na płytach CD, również charakteryzujący się dużym rozmiarem pliku, ponieważ przechowuje dźwięk w formacie bezstratnym o wysokiej jakości. Typowe błędy myślowe prowadzące do wyboru tych formatów to przekonanie, że jakość dźwięku jest najważniejsza, a nie zrozumienie, że wiele zastosowań wymaga kompromisu między jakością a rozmiarem. Dla użytkowników, którzy potrzebują codziennego dostępu do muzyki, formaty stratne, takie jak MP3, są bardziej praktyczne ze względu na ich niewielki rozmiar oraz dobrej jakości dźwięk.

Pytanie 40

W HTML-u znacznik tekst będzie prezentowany przez przeglądarkę w sposób identyczny do znacznika

A. <b>tekst</b>

B. <big>tekst</big>

C. <sub>tekst</sub>

D. <h1>tekst</h1>

Znacznik <strong> w HTML jest używany do oznaczania tekstu, który ma być wyróżniony jako ważny. Jego domyślne stylizowanie w przeglądarkach polega na pogrubieniu tekstu, co jest również funkcją znacznika <b>. Oba znaczniki mają podobne zastosowanie, ale <strong> niesie dodatkowe znaczenie semantyczne, co oznacza, że informuje przeglądarki i maszyny o tym, że dany tekst jest istotny. Przykładem może być użycie <strong> w nagłówkach lub w miejscach, gdzie chcemy zwrócić uwagę na kluczowe informacje, jak np. 'Zamówienie <strong>pilne</strong> musi być dostarczone do jutra.' W kontekście dobrych praktyk zaleca się używanie znaku <strong> zamiast <b>, gdyż wspiera to dostępność i SEO - wyszukiwarki lepiej interpretują semantykę treści, co może wpłynąć na pozycjonowanie strony. Warto również pamiętać, że zgodnie z W3C, semantyka HTML ma kluczowe znaczenie dla strukturyzacji dokumentów oraz ich dostępności.

Rozpocznij nowy egzamin

Powrót do strony głównej