Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

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

Egzamin zdany!

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Częstotliwość próbkowania ma wpływ na

A. standard jakości analogowego dźwięku

B. poziom głośności nagranego utworu

C. standard jakości cyfrowego dźwięku

D. intensywność fali dźwiękowej utworu

Częstotliwość próbkowania, określająca liczbę próbek dźwięku zbieranych na sekundę, ma kluczowy wpływ na jakość cyfrowego dźwięku. W standardzie CD audio częstotliwość próbkowania wynosi 44,1 kHz, co oznacza, że dźwięk jest próbkowany 44 100 razy na sekundę. Taka wartość pozwala na uchwycenie pełnego zakresu słyszalnych częstotliwości, co jest fundamentalne dla reprodukcji dźwięku o wysokiej jakości. W przypadku wyższych częstotliwości próbkowania, takich jak 96 kHz czy 192 kHz, możliwe jest uzyskanie jeszcze większej dokładności w odwzorowaniu dźwięku, co jest szczególnie ważne w profesjonalnej produkcji muzycznej oraz w zastosowaniach audiofilskich. Zastosowanie odpowiedniej częstotliwości próbkowania jest także kluczowe w kontekście obróbki dźwięku, gdzie wyższa jakość nagrań pozwala na lepsze manipulacje bez wprowadzania zniekształceń. Przykładowo, w produkcji filmowej, muzycznej czy w podcaście, wybór odpowiedniej częstotliwości próbkowania wpływa na końcowy efekt słuchowy, co jest istotne dla doświadczeń słuchowych odbiorców.

Pytanie 2

Aby wykorzystać skrypt znajdujący się w pliku przyklad.js, konieczne jest połączenie go ze stroną przy użyciu kodu

A. <link rel="script" href="przyklad.js">

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

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

D. <script>przyklad.js</script>

Odpowiedź <script src="przyklad.js"></script> jest naprawdę na miejscu, bo użycie atrybutu 'src' w znaczniku <script> to taki standardowy sposób dołączania zewnętrznych skryptów JS do HTML-a. Atrybut 'src' mówi przeglądarce, gdzie znaleźć ten skrypt, więc może go załadować i wykonać. Dzięki temu, skrypt z pliku 'przyklad.js' wchodzi w interakcję ze stroną i może dodawać różne funkcje, jak na przykład reagowanie na działania użytkownika czy manipulowanie elementami na stronie. Pamiętaj, że najlepiej dołączać skrypty na końcu dokumentu, zaraz przed </body>, bo wtedy cała zawartość strony ładuje się najpierw. Warto też pomyśleć o atrybucie 'defer' lub 'async', żeby lepiej zoptymalizować ładowanie skryptów i nie blokować renderowania strony. Na przykład, <script src="przyklad.js" defer></script> pozwoli na asynchroniczne ładowanie, co z pewnością poprawia wydajność.

Pytanie 3

W przedstawionym kodzie HTML ukazany styl CSS to styl:

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

A. lokalny.

B. zewnętrzny.

C. nagłówkowy.

D. dynamiczny.

Odpowiedź "lokalnym" jest prawidłowa, ponieważ styl CSS zastosowany w podanym kodzie HTML definiuje właściwości stylu bezpośrednio w elemencie HTML, co określamy jako styl lokalny (inline style). W tym przypadku, styl "color: red;" został zastosowany bezpośrednio w tagu <p>, co wpływa wyłącznie na ten konkretny akapit. Praktyczne zastosowanie lokalnych stylów polega na tym, że można je szybko dodać do pojedynczych elementów, ale należy pamiętać, że nadmiar lokalnych stylów może prowadzić do problemów z utrzymywaniem i zarządzaniem kodem. Zamiast tego zaleca się stosowanie zewnętrznych arkuszy stylów CSS, co pozwala na centralne zarządzanie stylami dla całej strony. Warto zauważyć, że lokalne style mają wyższy priorytet niż style zewnętrzne, co może prowadzić do konfliktów, jeśli nie zostaną odpowiednio użyte. Aby zapewnić zgodność z najlepszymi praktykami, zaleca się ograniczanie stosowania lokalnych stylów tam, gdzie to możliwe, na rzecz bardziej zorganizowanego podejścia z użyciem klas i identyfikatorów w zewnętrznych arkuszach stylów.

Pytanie 4

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

A. PHP

B. AJAX

C. CSS

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 5

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

A. wyłącznie smali, medium, large

B. tylko smali, smaller, large, larger

C. jedynie big i smali

D. z zestawu xx-small, x-small, smali, medium, large, x-large, xx-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 6

W języku HTML zdefiniowano znacznik a oraz atrybut rel nofollow.

A. jest poleceniem dla przeglądarki internetowej, aby nie traktowała słowa "link" jako hiperłącza

B. oznacza, że kliknięcie w link nie przekieruje na stronę website.com

C. jest wskazówką dla robota wyszukiwarki Google, aby nie śledził tego linku

D. oznacza, że kliknięcie w link otworzy go w nowej karcie przeglądarki

Atrybut rel z wartością nofollow w znaczniku a w języku HTML jest kluczowym narzędziem w obszarze SEO i zarządzania linkami na stronach internetowych. Jego głównym celem jest wskazanie robotom wyszukiwarek, że nie powinny one śledzić danego linku ani przekazywać mu wartości PageRank, co jest ważnym czynnikiem w rankingach wyszukiwarek. Zastosowanie nofollow jest powszechne w kontekście linków zewnętrznych, aby zapobiec ewentualnym nadużyciom, takim jak spam czy niechciane linki. Przykładowo, jeśli strona internetowa prowadzi do innej witryny, której treść nie jest w pełni zaufana, dodanie atrybutu nofollow zabezpiecza nas przed negatywnym wpływem na naszą własną reputację w oczach wyszukiwarek. Warto także zauważyć, że nofollow nie uniemożliwia użytkownikom kliknięcia w link, a jedynie informuje roboty wyszukiwarek o braku konieczności śledzenia tego linku. Taki mechanizm wpływa na algorytmy indeksowania, co może przyczynić się do lepszej kontroli nad tym, jakie źródła są promowane przez daną stronę.

Pytanie 7

Jaką maksymalną liczbę znaczników <td> można zastosować w tabeli składającej się z trzech kolumn i trzech wierszy, która nie zawiera złączeń między komórkami oraz wiersza nagłówkowego?

A. 3

B. 9

C. 12

D. 6

Odpowiedź 9 jest poprawna, ponieważ w tabeli składającej się z trzech kolumn i trzech wierszy, każdy wiersz może zawierać trzy komórki danych. Zatem, aby obliczyć maksymalną liczbę znaczników <td>, należy pomnożyć liczbę kolumn przez liczbę wierszy: 3 kolumny x 3 wiersze = 9 znaczników <td>. Ważne jest, aby pamiętać, że w kontekście HTML, znacznik <td> służy do definiowania komórek tabeli i jest używany tylko do umieszczania danych w tabeli. Przy projektowaniu tabel w HTML, dobrym rozwiązaniem jest stosowanie przejrzystej struktury oraz odpowiednich znaczników, aby poprawić czytelność i dostępność stron. Zgodnie z dobrymi praktykami, zawsze warto używać znaczników <th> do nagłówków kolumn, ale w tym przypadku, zgodnie z treścią pytania, zakładamy, że nie stosujemy wiersza nagłówkowego. W efekcie maksymalna liczba komórek, które można wykorzystać w takiej tabeli, wynosi 9. Przykładem zastosowania takiej tabeli może być wyświetlanie danych o produktach, gdzie każda komórka zawierać może różne informacje, takie jak nazwa produktu, cena i ilość.

Pytanie 8

Dla przedstawionego fragmentu dokumentu HTML:

<div class="menu"></div>

zdefiniowano formatowanie CSS selektora klasy "menu" tak, aby kolor tła bloku był zielony. Która definicja stylu CSS odpowiada temu formatowaniu?

A. div:menu { color: green; }

B. div.menu { background-color: green; }

C. menu { background-color: rgb(0,255,0); }

D. #menu { background-color: rgb(0,255,0); }

Wybrany selektor `div.menu { background-color: green; }` dokładnie pasuje do podanego fragmentu HTML: `<div class="menu"></div>`. W CSS zapis `div.menu` oznacza element typu `<div>`, który ma atrybut `class` ustawiony na `menu`. Kropka w selektorze zawsze oznacza klasę, więc `menu` po kropce to nazwa klasy, a nie nazwa znacznika. Dzięki temu styl zostanie zastosowany tylko do tych elementów `div`, które mają klasę `menu`, a nie do wszystkich divów na stronie. Właśnie tak zgodnie ze standardami CSS definiuje się wygląd elementów z konkretną klasą. Własność `background-color: green;` ustawia kolor tła danego bloku na zielony. Można tu używać różnych zapisów kolorów: nazw (green), wartości heksadecymalnych (`#00ff00`), funkcji `rgb()` czy `hsl()`. W tym pytaniu istotne jest jednak nie tyle to, jak dokładnie zapisano kolor, tylko czy selektor trafia w odpowiedni element HTML. W praktyce bardzo często używa się klas do stylowania wielu podobnych elementów, np. `.menu`, `.btn-primary`, `.card`. Z mojego doświadczenia lepiej unikać nadmiernego używania identyfikatorów (`id`) do stylowania, a zamiast tego bazować właśnie na klasach, bo klasy można wielokrotnie powtarzać w dokumencie i są bardziej elastyczne. Dodatkowo selektor z typem elementu (`div.menu`) jest trochę bardziej precyzyjny niż samo `.menu`, co bywa przydatne, gdy ta sama klasa pojawia się na różnych znacznikach, a chcemy kontrolować konkretne przypadki. W nowoczesnym front-endzie takie podejście jest zgodne z dobrymi praktykami: czytelne, przewidywalne i zgodne ze specyfikacją CSS.

Pytanie 9

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

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

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

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 10

Kanał alfa jest wykorzystywany do określenia

A. wybranego fragmentu obiektu graficznego

B. jasności oraz kontrastu kolorów

C. przezroczystości obiektu graficznego

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

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

Pytanie 11

Element

<meta charset="utf-8">

definiuje metadane dotyczące strony internetowej, odnosząc się do

A. słów kluczowych

B. kodowania znaków

C. opisu witryny

D. języka witryny

Ten element <meta charset="utf-8"> jest naprawdę ważny w nagłówku stron HTML, bo to on mówi przeglądarkom, jak odczytywać znaki w Twoim dokumencie. Dzięki temu tekst wyświetla się poprawnie na różnych urządzeniach. UTF-8 jest najbardziej popularnym kodowaniem, bo obsługuje niemal wszystkie znaki z różnych języków, co sprawia, że Twoja strona może być bardziej uniwersalna. Na przykład, jeśli masz tekst po polsku, to użycie UTF-8 upewnia się, że takie znaki jak ą czy ć będą prawidłowo pokazane. Właśnie dlatego warto stosować UTF-8, bo to, co zaleca W3C, jest bardzo sensowne - chodzi przecież o to, żeby strona była dostępna dla każdego, niezależnie od tego, z jakiego języka korzysta.

Pytanie 12

W programie do obróbki grafiki rastrowej zmodyfikowano krzywe kolorów tak, jak zaznaczono ramką na przedstawionym obrazie. Ma to na celu

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

B. wygładzenie krawędzi w obrazie

C. rozjaśnienie całego obrazu

D. przyciemnienie całego obrazu

Modyfikacja krzywych kolorów w programie do obróbki grafiki rastrowej polega na manipulacji wartościami kolorów w obrazie, co ma na celu wpływ na najjaśniejsze i najciemniejsze odcienie. Takie działanie umożliwia zwiększenie kontrastu oraz poprawę dynamiki kolorystycznej, co jest szczególnie ważne w profesjonalnej edycji zdjęć. Na przykład, podnosząc wartości skrajnych punktów na krzywej jasności, można uzyskać efekt wyraźniejszego podziału pomiędzy cieniami a światłami, co sprawia, że obraz staje się bardziej wyrazisty. W praktyce, edytory graficzne, takie jak Adobe Photoshop, oferują narzędzie krzywych, które pozwala na precyzyjne dostosowanie kolorów, co jest standardem w branży. Tego typu modyfikacje są kluczowe, aby dostosować obrazy do potrzeb drukarskich czy prezentacji cyfrowych, gdzie jakość i kolorystyka są niezmiernie ważne. Zmiana krzywych kolorów pozwala również na osiągnięcie zamierzonych efektów artystycznych i stylizacji zdjęć, które są istotne w marketingu wizualnym.

Pytanie 13

W języku CSS zdefiniowano styl. Sformatowana stylem sekcja będzie zawierała obramowanie o szerokości

div { border: solid 2px blue;
     margin: 20px;             }

A. 2 px oraz marginesy na zewnątrz tego obramowania.

B. 20 px oraz marginesy na zewnątrz tego obramowania.

C. 20 px oraz marginesy wewnątrz tego obramowania.

D. 2 px oraz marginesy wewnątrz tego obramowania.

Gratulacje, twoja odpowiedź jest poprawna! W CSS obramowanie (border) i margines (margin) są dwoma różnymi typami przestrzeni, które możemy zdefiniować wokół elementu. W tym pytaniu dokładnie określono styl obramowania jako linię ciągłą o szerokości 2 piksele. W praktyce jest to cienka linia otaczająca element na stronie. Z kolei margines zdefiniowany jako 20 pikseli to przestrzeń między obramowaniem a następnym elementem. Jest to zgodne ze standardami CSS, które mówią, że marginesy znajdują się zawsze na zewnątrz obramowania. To dlaczego '2 px oraz marginesy na zewnątrz tego obramowania' jest poprawną odpowiedzią. W praktyce, kontrolowanie obramowania i marginesów pozwala nam na precyzyjne ułożenie elementów na stronie, co jest kluczowym aspektem tworzenia responsywnych, atrakcyjnych stron internetowych.

Pytanie 14

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

A. </b>

B. <br>

C. <p>

D. </br>

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

Pytanie 15

W HTML znacznik tekst będzie wyświetlany przez przeglądarkę w taki sam sposób jak znacznik

A. <b>tekst</b>

B. <big>tekst</big>

C. <h1>tekst</h1>

D. <sub>tekst</sub>

Znacznik <strong> jest używany w HTML do oznaczania tekstu, który ma być wyróżniony ze względu na jego ważność. Jest to związane z semantyką dokumentu. Chociaż <strong> i <b> wyświetlają tekst w podobny sposób (zazwyczaj pogrubiony), mają inne znaczenie. Znacznik <b> jest używany do czysto wizualnego wyróżnienia, bez przypisywania wartości semantycznej. Dlatego, gdy używamy <strong>, nie tylko zmieniamy wygląd tekstu, lecz także informujemy przeglądarkę i dostępne technologie, że ten element ma szczególne znaczenie. Przykładem praktycznego zastosowania <strong> może być wyróżnienie kluczowych informacji w artykule, co wpływa na zrozumienie treści przez użytkowników oraz poprawia dostępność strony. Warto pamiętać, że stosowanie odpowiednich znaczników zgodnie z ich przeznaczeniem jest zgodne z zasadami HTML5 i poprawia SEO, ponieważ wyszukiwarki lepiej rozumieją kontekst strony, co jest kluczowe dla jej indeksacji.

Pytanie 16

Jakie polecenie powinno być zastosowane, aby tekst TEKST był widoczny w kolorze czarnym w oknie przeglądarki internetowej?

A. <body bgcolor="black">TEKST</body>

B. <font color="czarny">TEKST</font>

C. <body color="black">TEKST</font>

D. <font color="#000000">TEKST</font>

Aby wyraz TEKST został wyświetlony w kolorze czarnym w oknie przeglądarki internetowej, należy skorzystać z tagu <font> z atrybutem color ustawionym na wartości #000000, co stanowi standardowy kod heksadecymalny dla koloru czarnego. Atrybut ten pozwala na precyzyjne określenie koloru tekstu, co jest zgodne z zasadami HTML i daje możliwość dostosowania wyglądu strony do wymagań projektowych. Tag <font> jest przestarzały w HTML5, jednak wciąż może być używany w kontekście starszych dokumentów HTML. Warto zauważyć, że dla bardziej nowoczesnych praktyk zaleca się korzystanie z CSS (Cascading Style Sheets), gdzie definiowanie kolorów odbywa się w ramach stylów, zamiast bezpośrednio w znacznikach. Przykładowo, w CSS można użyć: .czarnyTekst { color: #000000; } i następnie zastosować tę klasę w znaczniku. Takie podejście poprawia semantykę kodu i ułatwia zarządzanie stylami na stronie, co jest istotne w kontekście optymalizacji SEO i dostępności dla różnych urządzeń."

Pytanie 17

Aby w języku HTML uzyskać formatowanie paragrafu przedstawione w ramce, należy zastosować kod

A. <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>

B. <p>Tekst może być <mark>zaznaczony albo <i>istotny</i> dla autora</mark></p>

C. <p>Tekst może być <mark>zaznaczony albo <em>istotny</em> dla autora</mark></p>

D. <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny dla autora</p>

Poprawnie wybrałeś kod z poprawnie zagnieżdżonymi i domkniętymi znacznikami: <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>. To dokładnie odpowiada temu, co widać na podglądzie: zwykły akapit, w nim jedno słowo podświetlone na żółto oraz inne wyróżnione kursywą. Znacznik <p> tworzy paragraf – podstawowy blok tekstu w HTML. W środku używasz elementów liniowych (inline): <mark> do zaznaczenia fragmentu tekstu jak zakreślaczem oraz <em> do zaznaczenia treści istotnej znaczeniowo, co domyślnie jest renderowane jako kursywa. Według specyfikacji HTML5 <mark> służy do semantycznego wyróżnienia tekstu związanego z kontekstem, np. wynik wyszukiwania na stronie czy aktualnie ważna informacja. <em> natomiast podkreśla akcent logiczny w zdaniu, a nie tylko ozdobne pochylenie, co jest dobrą praktyką dostępnościową. Ważne jest też poprawne zagnieżdżanie: najpierw otwierasz <mark>, potem go zamykasz </mark>, dopiero później otwierasz <em> i zamykasz </em>. Żaden z tych znaczników nie nachodzi na siebie w sposób krzyżowy. Tego pilnują walidatory W3C i warto się do tego przyzwyczaić od początku. W codziennej pracy taki kod możesz wykorzystać np. w artykułach, dokumentacji technicznej, materiałach szkoleniowych, gdzie chcesz: zakreślić słowo kluczowe (<mark>) i jednocześnie podkreślić termin ważny dla autora lub kontekstu (<em>). Moim zdaniem lepiej stosować <em> zamiast <i>, bo <em> niesie znaczenie semantyczne i czytniki ekranu potrafią je zinterpretować, co poprawia dostępność strony.

Pytanie 18

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

A. Zewnętrzny, Wydzielone bloki, Lokalny

B. Rozciąganie stylu, Zewnętrzny, Lokalny

C. Lokalny, Wewnętrzny, Zewnętrzny

D. Wewnętrzny, Zewnętrzny, Rozciąganie stylu

Odpowiedź "Lokalny, Wewnętrzny, Zewnętrzny" jest poprawna, ponieważ ilustruje hierarchię stylów CSS, która określa, jak różne źródła stylów wpływają na wygląd elementów na stronie internetowej. Lokalne style, czyli te umieszczone bezpośrednio w atrybucie 'style' danego elementu HTML, mają najwyższy priorytet. Oznacza to, że jeśli zastosujemy zarówno lokalny styl, jak i styl zewnętrzny, to lokalny styl będzie miał pierwszeństwo i nadpisze ustawienia zewnętrznego arkusza stylów. Następnie mamy style wewnętrzne, umieszczone w sekcji 'head' dokumentu HTML, definiujące style dla całej strony, ale mające niższy priorytet niż style lokalne. Na końcu są style zewnętrzne, które są ładowane z zewnętrznych plików CSS. Przykładem zastosowania tej zasady może być sytuacja, gdy chcemy, aby dany przycisk miał określony kolor tła; możemy go ustawić lokalnie, aby był inny w danym kontekście, mimo że w zewnętrznym arkuszu stylów jest zdefiniowany inny kolor.

Pytanie 19

Proces zmierzający do osiągnięcia przez stronę internetową jak najwyższych pozycji w rankingach wyszukiwarek internetowych nosi nazwę

A. walidacji HTML.

B. pozycjonowania.

C. optymalizacji wydajności.

D. responsywności.

Prawidłowa odpowiedź to „pozycjonowanie”, bo właśnie tak w branży nazywa się proces działań mających na celu osiąganie jak najwyższych pozycji strony w wynikach wyszukiwarek (głównie Google). W praktyce pozycjonowanie obejmuje zarówno SEO on‑page, jak i SEO off‑page. On‑page to m.in. poprawna struktura HTML, nagłówki H1–H3, sensowne tytuły stron (tag title), opisy meta description, przyjazne adresy URL, szybkość ładowania, mobile‑friendly design. Off‑page to głównie link building, czyli zdobywanie wartościowych odnośników z innych serwisów, obecność w katalogach branżowych, artykuły sponsorowane, a także ogólna reputacja domeny. Z mojego doświadczenia pozycjonowanie to nie jednorazowa akcja, tylko stały proces optymalizacji, analizy słów kluczowych, śledzenia statystyk w Google Search Console i Google Analytics, dopasowywania treści do intencji użytkownika. Dobre praktyki mówią, żeby unikać technik black‑hat SEO (np. kupowanie tysięcy spamowych linków, ukryty tekst, keyword stuffing), bo algorytmy wyszukiwarek szybko to wychwytują i mogą nałożyć filtr lub karę. Moim zdaniem kluczowe w pozycjonowaniu jest połączenie technicznie poprawnej strony (wydajność, responsywność, poprawny HTML) z wartościową treścią i rozsądną strategią linków. To właśnie cały ten zestaw działań nazywamy pozycjonowaniem strony w wyszukiwarkach.

Pytanie 20

Atrybut, który definiuje lokalizację pliku graficznego w znaczniku <img>, to

A. href

B. alt

C. link

D. src

Atrybut 'src' (source) w znaczniku <img> jest kluczowy, ponieważ określa lokalizację pliku graficznego, który ma być wyświetlany na stronie internetowej. Bez tego atrybutu przeglądarka nie byłaby w stanie załadować i wyświetlić obrazka, co skutkowałoby pustym miejscem w interfejsie użytkownika. Dobrym przykładem zastosowania atrybutu 'src' jest umieszczanie zdjęć produktów w sklepie internetowym, gdzie obrazek jest kluczowym elementem zachęcającym do zakupu. Na przykład, używając znacznika <img src='ścieżka/do/obrazka.jpg' alt='opis obrazka'>, programiści mogą nie tylko wyświetlić grafikę, ale także dostarczyć opis alternatywny, co jest zgodne z zasadami dostępności w sieci. W praktyce, dobrym zwyczajem jest przechowywanie grafik w odpowiednich katalogach oraz dbanie o optymalizację ich rozmiaru, aby poprawić czas ładowania strony oraz doświadczenia użytkownika. Warto również zwrócić uwagę na poprawne wykorzystanie protokołów, takich jak HTTPS, co zwiększa bezpieczeństwo przesyłanych danych oraz zaufanie użytkowników.

Pytanie 21

Tworzenie struktury logicznej strony internetowej polega na

A. określeniu adresów URL dla podstron serwisu

B. stworzonym zestawie grafik dla strony

C. określeniu zawartości witryny

D. umiejscowieniu elementów w wyznaczonych lokalizacjach witryny

Wiesz, wiele osób myli projektowanie witryny z robieniem grafik czy pisaniem treści. Całkiem to zrozumiałe, bo jest sporo różnych rzeczy związanych z tworzeniem stron. Jasne, grafiki są istotne, ale to nie wszystko, na czym się skupiamy, bo sama estetyka nie wystarczy, żeby strona była funkcjonalna. No i ustalanie adresów URL dla podstron też jest ważne, ale bardziej dotyczy struktury strony niż samego układu. Definiowanie treści to jedno, ale najważniejsze jest to, jak je prezentujemy. Często ludzie myślą, że układ i treść to to samo, a w rzeczywistości układ to to, jak treści są ułożone i jakie działania ułatwiają. Żeby dobrze zaprojektować stronę, trzeba spojrzeć na całość i zrozumieć, jakie funkcje ma spełniać, nie tylko skupiać się na pojedynczych grafikach czy tekstach. W moim odczuciu kluczowe jest, żeby myśleć o interakcji użytkownika z witryną - to wymaga umiejętności projektowania i analizy, by stworzyć efektywny interfejs.

Pytanie 22

W kodzie HTML kolor biały można reprezentować przy użyciu wartości

A. rgb(255, 255, 255)

B. #000000

C. #255255

D. rgb (FF, FF, FF)

Odpowiedź rgb(255, 255, 255) jest prawidłowa, ponieważ jest to standardowy sposób definiowania koloru białego w modelu RGB w kodzie HTML i CSS. Wartości RGB oznaczają Red, Green, Blue, a każdy składnik koloru (czerwony, zielony, niebieski) jest reprezentowany przez liczbę w zakresie od 0 do 255. W przypadku koloru białego wszystkie składniki są maksymalne, co przekłada się na pełne naświetlenie wszystkich trzech kolorów. W praktyce, użycie funkcji rgb() jest preferowane w sytuacjach, gdy chcemy dynamicznie modyfikować kolory za pomocą skryptów lub w CSS, co pozwala na lepszą kontrolę nad efektami wizualnymi. Na przykład, możemy łatwo zmieniać przezroczystość koloru, zmieniając wartości przez dodanie czwartego parametru, co jest zgodne z nowoczesnymi standardami CSS. Używanie wartości RGB jest również zgodne z zasadami dostępności oraz ułatwia pracę osobom z daltonizmem, ponieważ pozwala na łatwiejsze zrozumienie i manipulację kolorami.

Pytanie 23

O czym informuje przeglądarkę internetową zapis <!DOCTYPE html>?

A. Dokument został zapisany w języku HTML 5.

B. W dokumencie każda etykieta musi być zamknięta, nawet te samozamykające.

C. W dokumencie wszystkie tagi są zapisane wielkimi literami.

D. Dokument jest zapisany w wersji HTML 4.

Zapisywanie <!DOCTYPE html> na początku dokumentu informuje przeglądarkę, że dokument jest napisany w HTML5, co ma istotne znaczenie dla jego poprawnej interpretacji. HTML5 wprowadza wiele nowych elementów i atrybutów, które są kluczowe dla nowoczesnych aplikacji webowych, takich jak <header>, <footer>, <article> czy <section>, a także wspiera multimedia poprzez <audio> i <video>. Dzięki deklaracji <!DOCTYPE html> przeglądarki mogą stosować najnowsze standardy, co zapewnia lepszą zgodność i wsparcie dla responsywności, co jest niezbędne w erze urządzeń mobilnych. Ponadto, HTML5 wprowadza zasady dotyczące semantyki, co może poprawić SEO (optymalizację pod kątem wyszukiwarek) i dostępność treści dla osób z niepełnosprawnościami. W praktyce oznacza to, że tworząc nową stronę internetową, warto zawsze używać tej deklaracji, aby zapewnić, że przeglądarki renderują zawartość zgodnie z aktualnymi standardami.

Pytanie 24

Jak nazywa się metoda dodawania arkusza stylów do dokumentu HTML zastosowana w poniższym kodzie?

<p style="color: red;">tekst paragrafu</p>

A. Styl wewnętrzny

B. Styl alternatywny, zewnętrzny

C. Styl zewnętrzny

D. Styl wpisany, lokalny

Styl wpisany, lokalny, to metoda definiowania stylów bezpośrednio w elemencie HTML, co jest dokładnie tym, co widzimy w przedstawionym kodzie. W tym przypadku atrybut "style" jest użyty, aby ustawić kolor tekstu na czerwony dla konkretnego paragrafu. Ta metoda jest przydatna, gdy potrzebujemy szybko wprowadzić zmiany w stylu pojedynczego elementu bez konieczności edytowania zewnętrznych arkuszy stylów. Z perspektywy standardów webowych, lokalne style mogą wprowadzać poważne problemy z utrzymaniem kodu, gdy stosowane w nadmiarze, ponieważ kody CSS mogą stać się trudne do zarządzania, a konsystencja stylów może być zagrożona. Z tego powodu, dla bardziej rozbudowanych projektów, rekomenduje się korzystanie z arkuszy stylów zewnętrznych lub wewnętrznych, które zapewniają lepszą organizację kodu oraz ułatwiają zarządzanie stylami na większą skalę. Dobrą praktyką jest również korzystanie z klas CSS, co pozwala na ponowne wykorzystanie stylów w różnych częściach dokumentu, eliminując duplikacje.

Pytanie 25

Która z czynności nie wpłynie na objętość zajmowanej pamięci pliku graficznego?

A. Kompresja

B. Interpolacja

C. Modyfikacja rozdzielczości obrazu

D. Zmiana rozmiaru obrazu przy użyciu atrybutów HTML

Skalowanie obrazu za pomocą atrybutów HTML to technika, która pozwala na dostosowanie rozmiaru wyświetlanego obrazu w przeglądarce internetowej bez zmiany jego rzeczywistego rozmiaru pliku. Atrybuty takie jak 'width' i 'height' w tagach <img> wpływają jedynie na to, jak obraz jest prezentowany na stronie, a nie na jego fizyczne właściwości. Przykładem może być użycie <img src='obraz.jpg' width='300' height='200'>, co sprawia, że obraz wyświetla się w określonych wymiarach, ale plik graficzny pozostaje niezmieniony. Takie podejście jest zgodne z dobrymi praktykami w projektowaniu stron internetowych, ponieważ pozwala na utrzymanie jakości obrazu bez dodatkowego obciążania serwera. W sytuacjach, gdy szybkość ładowania strony jest kluczowa, użycie odpowiednich atrybutów HTML może przyczynić się do lepszego doświadczenia użytkownika bez potrzeby modyfikacji oryginalnych plików graficznych. Warto również zaznaczyć, że w przypadku responsywnych stron internetowych stosuje się techniki CSS, które umożliwiają dalsze dostosowanie wielkości obrazów, ale także nie wpływają na ich wagę w pamięci.

Pytanie 26

W CSS zapis w postaci

 h1::first-letter {color: red;}

spowoduje, że kolor czerwony zostanie zastosowany do

A. pierwszej litery nagłówka w drugim stopniu

B. tekstu nagłówka w pierwszym stopniu

C. pierwszej litery nagłówka w pierwszym stopniu

D. pierwszej linii akapitu

Zapis <span>h1::first-letter {color: red;} </span> jest w porządku, bo korzysta z pseudoelementu :first-letter, który działa na pierwszą literkę w nagłówku h1. To całkiem fajne, bo możemy w ten sposób stylizować tę pierwszą literę i nadać nagłówkom ciekawszy wygląd. Na przykład, jeśli mamy nagłówek h1 z napisem 'Witaj świecie', to dzięki temu kodowi, litera 'W' zrobi się czerwona. W CSS warto ogarnąć, że :first-letter działa tylko na bloki, takie jak nagłówki czy akapity, więc warto to mieć na uwadze, gdy coś stylizujemy. Używanie pseudoelementów to dobre podejście do tworzenia ładnych i funkcjonalnych interfejsów, a przy okazji daje nam większą kontrolę nad tym, jak wyglądają nasze elementy.

Pytanie 27

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

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

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

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

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

Poprawna odpowiedź to <link rel="stylesheet" type="text/css" href="styl.css" />. Ten fragment kodu HTML jest standardowym sposobem dołączania zewnętrznych arkuszy stylów do dokumentu HTML. Atrybut 'rel' określa relację pomiędzy dokumentem a zewnętrznym plikiem, w tym przypadku jest to 'stylesheet', co informuje przeglądarkę, że plik ma zawierać style CSS. Atrybut 'type' wskazuje typ zawartości, a 'href' zawiera ścieżkę do pliku CSS, w tym przypadku 'styl.css'. Zewnętrzne arkusze stylów są zalecane, ponieważ umożliwiają oddzielenie treści od stylizacji, co jest zgodne z zasadą separacji obowiązków w inżynierii oprogramowania. Umożliwia to łatwe zarządzanie i aktualizowanie stylów bez konieczności modyfikowania samego HTML-a. Przykładem zastosowania może być stworzenie pliku styl.css, który zawiera wszystkie style dla danej strony, co pozwala na ponowne wykorzystanie tych samych stylów w różnych częściach serwisu, co zwiększa spójność i ułatwia utrzymanie kodu.

Pytanie 28

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

A. <meta> oraz <title>

B. <b> i <big>

C. <b> i <strong>

D. <p> oraz <h2>

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

Pytanie 29

Aby utworzyć styl strony responsywnej dla ekranów o szerokości od 600 px do 800 px należy zastosować regułę CSS

A. @media (max-width: 800px) (min-width: 600px){/*style css*/}

B. @media screen (min-width: 800px) and (max-width: 600px){/*style css*/}

C. @media screen and (max-width: 800px) and (min-width: 600px){/*style css*/}

D. @media (min-width: 800px){/*style css*/}

W tym zadaniu cała trudność kręci się wokół poprawnego zapisania media queries i zrozumienia, jak działają warunki min-width oraz max-width. Wiele osób intuicyjnie czuje, o co chodzi z responsywnością, ale potyka się na szczegółach składni, a przeglądarka niestety jest bardzo „zero-jedynkowa” i najmniejszy błąd powoduje, że reguła po prostu nie zadziała. Jedno z podejść polega na użyciu tylko min-width, np. @media (min-width: 800px){...}. Taki zapis oznacza jednak: stosuj te style dla szerokości 800 px i większych, czyli w górę, bez żadnej górnej granicy. To jest typowy breakpoint dla większych ekranów, np. laptopów, a nie dla przedziału 600–800 px. To nie jest logicznie to, o co chodziło w pytaniu, bo nie ma tu żadnego ograniczenia od góry. Inny typ błędu to próba połączenia max-width i min-width bez słowa and, jak w @media (max-width: 800px) (min-width: 600px){...}. Taka składnia jest po prostu niepoprawna z punktu widzenia specyfikacji CSS – między warunkami musi wystąpić operator logiczny and, not lub only. Bez tego parser traktuje zapis jako błąd, więc reguła zostanie zignorowana. Kolejna pułapka to pomieszanie kolejności i logiki warunków, np. @media screen (min-width: 800px) and (max-width: 600px){...}. Tutaj po pierwsze brakuje and po słowie screen, więc typ medium nie jest poprawnie połączony z warunkami, a po drugie zakres jest nielogiczny: min-width: 800px i max-width: 600px tworzą zestaw warunków, którego żaden ekran nie spełni, bo nie może mieć jednocześnie szerokości co najmniej 800 px i maksymalnie 600 px. W praktyce oznacza to media query, które nigdy się nie aktywuje. To zresztą typowy błąd: ktoś zna pojęcia min i max, ale nie zastanawia się nad realnym przedziałem wartości. Dobra praktyka w responsywnym projektowaniu to zawsze sprawdzić: czy zakres ma sens matematyczny, czy składnia zawiera wszystkie konieczne słowa kluczowe (screen, and), oraz czy zapis jest spójny z resztą kodu. Wtedy media queries stają się przewidywalne i łatwiejsze do debugowania w narzędziach deweloperskich przeglądarki.

Pytanie 30

W edytorze grafiki wektorowej zbudowano kształt, który składa się z dwóch figur: trójkąta oraz koła. Aby uzyskać ten kształt, po narysowaniu figur i ich odpowiednim ustawieniu, trzeba użyć funkcji

A. sumy

B. wykluczenia

C. rozdzielenia

D. różnicy

Funkcja sumy w programach do grafiki wektorowej, takich jak Adobe Illustrator czy CorelDRAW, pozwala na połączenie dwóch lub więcej kształtów w jeden obiekt. To takie sprytne narzędzie! Sumowanie, znane też jako unia lub łączenie ścieżek, integruje geometrię wszystkich wybranych kształtów. Na przykład, jak narysujesz trójkąt i koło, a potem je odpowiednio ustawisz, to używając funkcji sumy, stworzysz nowy kształt, który obejmuje całą powierzchnię obu figur. Często to robi się przy projektowaniu logo, gdzie trzeba uprościć złożone kształty do jednej ścieżki. Taki sposób działania jest przyjęty w branży, bo ułatwia tworzenie czytelnych grafik, które są łatwe do edytowania. A co najważniejsze, połączenie figur w jedną upraszcza późniejsze zmiany i wpisuje się w zasady projektowania minimalistycznego, dzięki czemu można robić przejrzyste kompozycje. Warto mieć na uwadze, że takie podejście też ułatwia drukowanie i wycinanie, co jest mega ważne w produkcji materiałów reklamowych czy wyrobów przemysłowych.

Pytanie 31

Aby móc edytować nakładające się na siebie pojedyncze fragmenty grafiki, przy zachowaniu niezmienności pozostałych elementów, powinno się zastosować

A. histogram

B. kadrowanie

C. kanał alfa

D. warstwy

Wykorzystanie warstw w edytorach graficznych, takich jak Adobe Photoshop czy GIMP, pozwala na wydajne zarządzanie i edytowanie poszczególnych fragmentów obrazu. Warstwy umożliwiają oddzielne manipulowanie elementami, co jest niezwykle istotne, gdy chcemy edytować część obrazu bez wpływania na jego pozostałe elementy. Przykładowo, podczas pracy nad projektem graficznym możemy na jednej warstwie umieścić tekst, na innej obrazek, a na trzeciej tło. Dzięki temu edytując jedną z warstw, pozostałe pozostają nietknięte. Istotnym aspektem pracy z warstwami jest ich hierarchia, która pozwala na ustalanie porządku wyświetlania – warstwy wyższe w hierarchii przykrywają te niższe. Warstwy są również wykorzystywane do tworzenia efektów takich jak przezroczystość czy cienie, co zwiększa głębię i atrakcyjność wizualną projektu. W branży graficznej stosowanie warstw stało się najlepszą praktyką, ponieważ zwiększa elastyczność pracy i ułatwia wprowadzanie poprawek bez ryzyka utraty danych oryginalnych.

Pytanie 32

W CSS przypisano regułę: float: left; dla elementu blokowego. Jakie będzie jej zastosowanie?

A. wyrównania elementów tabeli do lewej strony

B. ustawienia bloku na lewo w stosunku do innych

C. wyrównania tekstu do lewej strony

D. układania bloków jeden pod drugim

Reguła CSS 'float: left;' jest używana do ustawienia elementu blokowego po lewej stronie kontenera, co pozwala na swobodne rozmieszczanie innych elementów w otaczającym go obszarze. Elementy, które są ustawione jako 'float', nie zajmują miejsca w normalnym przepływie dokumentu, co oznacza, że inne elementy mogą 'przepływać' wokół nich. Przykładem zastosowania tej reguły może być układ strony internetowej, gdzie zdjęcia są umieszczone z lewej strony tekstu, co pozwala na estetyczne i funkcjonalne połączenie grafiki z treścią. Zgodnie z wytycznymi W3C, właściwości 'float' powinny być używane z rozwagą, aby uniknąć problemów z układaniem stron, na przykład należy pamiętać o zastosowaniu właściwości 'clear', aby uniknąć niechcianych efektów wizualnych. W praktyce, float jest często stosowany w układach siatki lub responsywnych, gdzie elastyczne i dynamiczne rozmieszczenie elementów jest kluczowe dla użyteczności i estetyki strony.

Pytanie 33

Jakie polecenie należy zastosować, aby słowo TEKST pojawiło się w kolorze czarnym w oknie przeglądarki internetowej?

A. <body bgcolor="black">TEKST</body>

B. <body color="black">TEKST</font>

C. <font color="czarny">TEKST</font>

D. <font color="#000000">TEKST</font>

Odpowiedź <font color="#000000">TEKST</font> jest poprawna, ponieważ wykorzystuje standardowy atrybut HTML do zmiany koloru tekstu. Atrybut 'color' w tagu <font> pozwala na określenie koloru, w tym przypadku użyto wartości szesnastkowej '#000000', co odpowiada kolorowi czarnemu. Użycie wartości szesnastkowej jest uznaną praktyką w projektowaniu stron internetowych, ponieważ pozwala na precyzyjne określenie kolorów, a także wspiera szeroką gamę barw. Wartości szesnastkowe są bardziej uniwersalne i umożliwiają zastosowanie dowolnego koloru, co jest bardziej elastyczne niż nazwy kolorów w języku angielskim. Warto zauważyć, że od HTML5 tag <font> jest przestarzały, dlatego zaleca się korzystanie z CSS do stylizacji tekstu, co jest bardziej zgodne z zasadami semantycznego HTML. Przykładowo, aby uzyskać ten sam efekt w CSS, można zastosować regułę: <style> .czarny { color: #000000; } </style> i użyć <span class="czarny">TEKST</span>.

Pytanie 34

Aplikacja o nazwie FileZilla umożliwia

A. wniesienie bazy danych na stronę CMS Joomla!

B. publikację witryny internetowej na zdalnym serwerze

C. przeprowadzenie testów aplikacji

D. sprawdzanie poprawności plików HTML oraz CSS

FileZilla to popularny program typu FTP (File Transfer Protocol), który umożliwia użytkownikom przesyłanie plików między komputerem a serwerem internetowym. Jego głównym celem jest publikacja stron internetowych na odległych serwerach, co jest kluczowe dla procesu tworzenia i utrzymania stron w sieci. Program obsługuje różne protokoły, takie jak FTP, FTPS oraz SFTP, co zapewnia elastyczność i bezpieczeństwo podczas transferu danych. W praktyce, aby opublikować stronę, użytkownik może przeciągnąć pliki z lokalnego folderu do odpowiedniego katalogu na serwerze, co jest intuicyjne i efektywne. FileZilla wspiera również funkcje takie jak synchronizacja folderów, co pozwala na łatwe aktualizowanie zawartości strony. Zgodnie z branżowymi standardami, korzystanie z odpowiednich narzędzi do przesyłania plików, takich jak FileZilla, jest niezbędne dla każdego dewelopera webowego, aby zapewnić bezpieczeństwo i zgodność z najlepszymi praktykami w zakresie publikacji stron internetowych.

Pytanie 35

W języku CSS określono formatowanie znacznika h1 według wzoru. Zakładając, że żadne inne formatowanie nie jest dodane do znacznika h1, wskaż sposób formatowania tego znacznika

A. B

B. C

C. A

D. D

Wszystkie podane odpowiedzi są błędne, ponieważ nie odzwierciedlają one właściwego wykorzystania stylizacji dla znacznika h1 zgodnie z przedstawionym kodem CSS. Po pierwsze, ważne jest zrozumienie, że każda z tych odpowiedzi powinna być zgodna z określonymi właściwościami CSS. W przypadku zastosowania 'font-style: oblique;', nie można oczekiwać, że tekst pozostanie w standardowym, prostym stylu. Odpowiedzi podają powtarzający się tekst, który nie jest związany z obliczonym formatowaniem. Po drugie, 'font-variant: small-caps;' nadaje tekstowi unikalny charakter, co znacznie różni się od normalnego zapisu. Odpowiedzi, które jedynie powtarzają fragmenty tekstu, nie odzwierciedlają użycia małych kapitałków, co czyni je niepoprawnymi. Po trzecie, 'text-align: right;' wyraźnie definiuje położenie tekstu w kontekście całej strony. W przypadku tych odpowiedzi brak jest zrozumienia, że wyrównanie tekstu do prawej krawędzi wprowadza dodatkowe zmiany w układzie, co powinno być uwzględnione w odpowiedziach. W efekcie, każda z tych odpowiedzi nie odnosi się do rzeczywistych efektów stylizacji zastosowanych w kodzie CSS, co czyni je nieadekwatnymi.

Pytanie 36

Jaka linia w języku HTML wskazuje kodowanie znaków używane w dokumencie?

A. <meta charset="UTF-8">

B. <encoding="UTF-8">

C. <charset="UTF-8">

D. <meta encoding="UTF-8">

Zapis <meta charset="UTF-8"> jest poprawną deklaracją kodowania znaków w dokumencie HTML, ponieważ jest zgodny z aktualnymi standardami W3C. Element <meta> powinien znajdować się w sekcji <head> dokumentu HTML i pozwala przeglądarkom na właściwe interpretowanie znaków w treści strony. Kodowanie UTF-8 jest szeroko stosowane, ponieważ obsługuje wszystkie znaki w standardzie Unicode, co czyni go idealnym dla aplikacji wielojęzycznych. Użycie poprawnego kodowania jest kluczowe, aby uniknąć problemów z wyświetlaniem tekstu, takich jak błędne znaki lub krzaki, które pojawiają się, gdy przeglądarka nie wie, jak zinterpretować dane. Przykładowo, jeżeli mamy stronę internetową w kilku językach, użycie UTF-8 zapewnia, że znaki diakrytyczne w języku polskim, czeskim czy niemieckim będą poprawnie wyświetlane. Warto również pamiętać, aby zawsze umieszczać tę deklarację jako pierwszą w sekcji <head>, aby zapewnić, że przeglądarka prawidłowo zinterpretuje wszystkie inne elementy. W kontekście SEO oraz dostępności, poprawne kodowanie jest istotne, ponieważ wpływa na indeksowanie treści przez wyszukiwarki oraz ich prezentację dla użytkowników.

Pytanie 37

Jak przeglądarka zaprezentuje kod HTML formularza?

<form>
stanowisko: <input type="text"><br>
obowiązki:<br>
<input type="checkbox" name="obowiazek1" value="1" disabled checked>
sporządzanie dokumentacji<br>
<input type="checkbox" name="obowiazek2" value="2" checked>
pisanie kodu<br>
<input type="checkbox" name="obowiazek3" value="3">
testy oprogramowania<br>
</form>

A. A

B. C

C. D

D. B

Zrozumienie jak działają atrybuty HTML takie jak disabled i checked jest kluczowe dla prawidłowego wyświetlania i funkcjonalności formularzy w przeglądarce. Niektóre z odpowiedzi zawierają błędne interpretacje tych atrybutów co prowadzi do niepoprawnego rozumienia jak formularz będzie prezentowany. Na przykład jeśli pole checkbox nie ma ustawionego atrybutu checked to domyślnie będzie niezaznaczone a użytkownik będzie mógł to zmienić. Dodanie atrybutu checked oznacza że pole będzie zaznaczone od razu po załadowaniu strony. Atrybut disabled uniemożliwia interakcję użytkownika z danym elementem co oznacza że użytkownik nie będzie mógł zmienić jego stanu. Częstym błędem jest założenie że wszystkie pola wyboru mogą być domyślnie edytowalne co nie jest prawdą w przypadku zastosowania atrybutu disabled. Również brak zrozumienia jak kolejność elementów i ich atrybutów wpływa na wizualne i funkcjonalne aspekty formularza może prowadzić do błędnych wniosków dotyczących ich zachowania. Warto pamiętać że prawidłowe zrozumienie tych zasad pozwala na tworzenie bardziej intuicyjnych i użytecznych aplikacji internetowych które spełniają oczekiwania użytkowników i standardy branżowe. Poprawna interpretacja kodu HTML jest więc niezbędna dla każdego profesjonalisty zajmującego się tworzeniem stron i aplikacji internetowych aby zapewnić bezbłędne działanie i łatwość obsługi formularzy przez końcowego użytkownika. Powinno się też zwracać uwagę na dostępność i użyteczność formularzy co jest kluczowym aspektem w procesie projektowania stron internetowych.

Pytanie 38

W CSS wartości underline, overline, blink są przypisane do atrybutu

A. text-decoration

B. font-style

C. font-weight

D. text-style

Właściwość CSS 'text-decoration' to coś, co naprawdę może zmienić wygląd tekstu na stronach internetowych. Dzięki niej możemy dodać różne efekty dekoracyjne, jak podkreślenie, przekreślenie, czy nadkreślenie. Zdarzają się też nowinki, jak efekt 'blink', chociaż nie jest on zbyt popularny w profesjonalnym kodzie. Warto pamiętać, że stosowanie tej właściwości poprawia czytelność i estetykę tekstu. Na przykład, gdy chcemy wyróżnić ważne informacje, możemy użyć 'text-decoration: underline;'. Ciekawostka: niektóre efekty, jak 'blink', mogą sprawić problemy z dostępnością, więc lepiej ich unikać. Właściwe użycie 'text-decoration' w połączeniu z odpowiednimi znacznikami HTML, jak <span> lub <a>, może naprawdę poprawić interaktywność naszej strony. Dobrze jest o tym pamiętać, gdy pracujemy nad projektami.

Pytanie 39

W przedstawionym filmie, aby połączyć tekst i wielokąt w jeden obiekt tak, aby operacja ta była odwracalna zastosowano funkcję

A. sumy.

B. grupowania.

C. części wspólnej.

D. wykluczenia.

Prawidłowo – w filmie została użyta funkcja grupowania. W grafice wektorowej, np. w programach typu Inkscape, CorelDRAW czy Illustrator, grupowanie służy właśnie do logicznego połączenia kilku obiektów w jeden „zestaw”, ale bez trwałego mieszania ich geometrii. To znaczy: tekst dalej pozostaje tekstem, wielokąt dalej jest wielokątem, tylko są traktowane jak jeden obiekt przy przesuwaniu, skalowaniu czy obracaniu. Dzięki temu operacja jest w pełni odwracalna – w każdej chwili możesz rozgrupować elementy i edytować każdy osobno. Moim zdaniem to jest podstawowa dobra praktyka w pracy z projektami, które mogą wymagać późniejszych poprawek: podpisy, etykiety, logotypy, schematy techniczne. Jeśli połączysz tekst z kształtem za pomocą operacji boolowskich (suma, część wspólna, wykluczenie), to tekst zwykle zamienia się na krzywe, przestaje być edytowalny jako tekst. To bywa potrzebne przy przygotowaniu do druku czy eksportu do formatu, który nie obsługuje fontów, ale nie wtedy, gdy zależy nam na łatwej edycji. Z mojego doświadczenia: przy projektowaniu interfejsów, ikon, prostych banerów na WWW czy grafik do multimediów, najrozsądniej jest najpierw grupować logicznie elementy (np. ikona + podpis), a dopiero na samym końcu, gdy projekt jest ostateczny, ewentualnie zamieniać tekst na krzywe. Grupowanie pozwala też szybko zaznaczać całe moduły projektu, wyrównywać je względem siebie, duplikować całe zestawy (np. kafelki menu, przyciski z opisami) bez ryzyka, że coś się rozjedzie. W grafice komputerowej to taka podstawowa „organizacja pracy” – mniej destrukcyjna niż różne operacje na kształtach i zdecydowanie bardziej elastyczna przy późniejszych zmianach.

Pytanie 40

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

A. span

B. p

C. strong

D. img

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

Rozpocznij nowy egzamin

Powrót do strony głównej