Wyniki egzaminu

Nowy egzamin
Informacje o egzaminie:
  • Zawód: Technik informatyk
  • Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
  • Data rozpoczęcia: 13 kwietnia 2026 00:31
  • Data zakończenia: 13 kwietnia 2026 00:44

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Nowe
Analiza przebiegu egzaminu— sprawdź jak rozwiązywałeś pytania
Udostępnij swój wynik
Facebook
X.com
LinkedIn
Szczegółowe wyniki:
Pytanie 1

Przy założeniu, że nie istnieją inne definicje, jakie skutki będzie miało poniższe formatowanie CSS?

<style> td {padding: 30px; } </style>
…
<td style="padding: 10px;">Anna</td>
<td>Ewa</td>
A. margines wewnętrzny komórki z napisem Anna wyniesie 30 px, a z napisem Ewa – 10 px
B. marginesy wewnętrzne wszystkich komórek wyniosą 30 px
C. marginesy wewnętrzne wszystkich komórek wyniosą 10 px
D. margines wewnętrzny komórki z napisem Anna wyniesie 10 px, a z napisem Ewa – 30 px
Odpowiedź jest poprawna, ponieważ w kodzie HTML zastosowano bezpośrednie nadpisanie stylu dla komórki z napisem Anna. Chociaż w sekcji style zdefiniowano, że wszystkie komórki td mają padding 30px, to w przypadku komórki Anna zastosowano style inline, które mają wyższy priorytet i nadpisują ustalone wcześniej wartości. W rezultacie padding dla komórki Anna wynosi 10px. Natomiast dla pozostałych komórek, w tym komórki z napisem Ewa, obowiązuje reguła zdefiniowana globalnie w sekcji style, czyli padding wynosi 30px. Jest to przykład specyficzności w CSS, gdzie style inline są bardziej specyficzne niż style w sekcji style. W praktyce ważne jest, aby rozumieć hierarchię i specyficzność CSS, ponieważ pozwala to na skuteczne zarządzanie stylami i unikanie niezamierzonych zmian w wyglądzie strony. Dobra praktyka nakazuje unikać styli inline na rzecz zewnętrznych arkuszy stylów, co ułatwia zarządzanie kodem i czyni go bardziej czytelnym oraz łatwiejszym w utrzymaniu. Warto też stosować metodologie takie jak BEM, które pomagają w organizacji kodu CSS.
Pytanie 2

Którą wartość atrybutu name znacznika <meta> wykorzystuje się do kontrolowania obszaru widzialnego na różnych urządzeniach, na których jest wyświetlana strona internetowa?

A. generator
B. keywords
C. description
D. viewport
Poprawnie wskazana została wartość „viewport”. W praktyce właśnie meta name="viewport" służy do kontrolowania tzw. obszaru widzialnego (ang. viewport) na urządzeniach mobilnych i desktopowych. Przeglądarka mobilna domyślnie zakłada szeroką stronę i sztucznie ją pomniejsza, żeby „zmieściła się” na ekranie telefonu. Dopiero meta viewport mówi jej: potraktuj szerokość ekranu urządzenia jako bazową szerokość strony. Najczęściej spotykana, zgodna z dobrymi praktykami konstrukcja to: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Parametr width=device-width ustawia szerokość obszaru widzialnego na szerokość ekranu urządzenia, a initial-scale=1.0 definiuje początkowe powiększenie. Dzięki temu layout responsywny oparty na media queries w CSS działa poprawnie, bez dziwnych przeskalowań i zbyt małej czcionki. W nowoczesnym front-endzie przyjmuje się, że każda strona, która ma być używalna na telefonach, tabletach i laptopach, powinna mieć prawidłowo ustawiony meta viewport. Moim zdaniem to jest absolutna podstawa RWD, zaraz obok poprawnego użycia jednostek względnych (np. %, vw, em) i zaprojektowania siatki w CSS. Warto też pamiętać, żeby nie przesadzać z blokowaniem powiększania (np. user-scalable=no), bo to pogarsza dostępność strony dla osób słabiej widzących i jest uznawane za złą praktykę. Podsumowując: jeśli chcesz mieć stronę, która naprawdę „żyje” na różnych ekranach, meta name="viewport" to obowiązkowy element w sekcji <head>.
Pytanie 3

Grafik pragnie przekształcić obraz JPG na format PNG bez utraty jakości, tak aby wszędzie tam, gdzie w oryginalnym obrazie występuje kolor biały, w docelowej wersji była przezroczystość. W tym celu powinien

A. zaimportować obraz do edytora grafiki wektorowej
B. obniżyć rozdzielczość obrazu
C. dodać kanał alfa
D. przekształcić obraz w odcienie szarości
Zmniejszenie rozdzielczości obrazu nie ma na celu dodania przezroczystości ani przekształcenia białych obszarów w przezroczyste. Zmiana rozdzielczości wpływa jedynie na liczbę pikseli w obrazie, co może prowadzić do utraty szczegółów, ale nie rozwiązuje problemu z białym tłem. Przekształcenie obrazu w odcienie szarości również nie jest odpowiednie w tym kontekście. Taki proces konwertuje kolory na odcienie szarości, co skutkuje utratą kolorów, a nie dodaniem przezroczystości. Z kolei importowanie obrazu do edytora grafiki wektorowej nie jest wystarczającym działaniem, ponieważ format JPEG jest rastrami, a nie wektorami, co oznacza, że nie można bezpośrednio edytować poszczególnych pikseli w ten sposób, by osiągnąć żądany efekt. Typowym błędem jest zakładanie, że zmiana formatu lub rozdzielczości rozwiąże problem przezroczystości. W rzeczywistości, aby uzyskać przezroczystość w obrazie, należy pracować bezpośrednio z pikselami i ich właściwościami, co wymaga użycia odpowiednich narzędzi i technik, takich jak dodanie kanału alfa.
Pytanie 4

Kaskadowe arkusze stylów są tworzone w celu

A. ulepszenia nawigacji dla użytkownika
B. określenia metod formatowania elementów na stronie internetowej
C. dodania na stronie internetowej treści tekstowych
D. zwiększenia szybkości ładowania grafiki na stronie internetowej
Kaskadowe arkusze stylów (CSS) są kluczowym elementem w projektowaniu stron internetowych, ponieważ umożliwiają one definiowanie sposobu formatowania i prezentacji elementów na stronie. CSS pozwala na oddzielenie treści od formy, co oznacza, że programiści mogą skupić się na tworzeniu struktury dokumentu HTML, podczas gdy stylistyka i układ są kontrolowane przez arkusze stylów. Przykładem zastosowania CSS jest stylizacja nagłówków, paragrafów czy list, gdzie można dostosować czcionki, kolory, marginesy oraz inne właściwości wizualne. Dzięki użyciu selektorów i reguł CSS, twórcy stron mają pełną kontrolę nad tym, jak każdy element będzie wyglądał, co pozwala na tworzenie responsywnych i estetycznych interfejsów. Ponadto, CSS obsługuje kaskadowość, co oznacza, że reguły mogą być dziedziczone i nadpisywane, co zwiększa elastyczność i wydajność procesu stylizacji. Warto również zwrócić uwagę na standardy W3C, które definiują najlepsze praktyki i zalecenia dotyczące użycia CSS, co przyczynia się do poprawy dostępności i zgodności stron internetowych.
Pytanie 5

W sekcji nagłówka dokumentu HTML umieszczono ```Strona miłośników psów``` Zawarty tekst będzie widoczny

A. na pasku tytułu w przeglądarce
B. w treści witryny, na banerze witryny
C. w treści witryny, w pierwszym ukazanym nagłówku
D. w polu adresowym, za wprowadzonym adresem URL
Wybór odpowiedzi, która sugeruje, że tytuł strony wyświetlany jest w treści strony, jest błędny. Tytuł nie jest częścią treści, na przykład w nagłówku, ani nie jest umieszczany na banerze witryny, co sugeruje inna odpowiedź. Tytuł strony jest wyświetlany na pasku tytułu przeglądarki, a jego podstawowym zadaniem jest identyfikacja strony w kontekście użytkowania przeglądarki. Błędne założenie, że tytuł może być częścią treści strony, wynika z nieporozumienia dotyczącego struktury dokumentu HTML oraz roli, jaką różne elementy odgrywają w prezentacji stron. Tytuł jest istotnym elementem metadanych, co oznacza, że nie jest przeznaczony do bezpośredniego wyświetlania na stronie, ale ma kluczowe znaczenie dla SEO oraz ułatwienia nawigacji. Właściwe zrozumienie roli tagu <title> jest kluczowe, aby uniknąć typowych błędów w tworzeniu witryn internetowych, takich jak używanie wygenerowanych tytułów, które mogą być zbyt ogólne lub mylące dla użytkowników oraz wyszukiwarek. W praktyce, tytuły stron powinny być odzwierciedleniem ich zawartości, co zwiększa ich użyteczność i efektywność w przyciąganiu odwiedzających.
Pytanie 6

W CSS, aby ustalić różne formatowanie dla pierwszej litery w akapicie, trzeba użyć selektora

A. atrybutu p [first-letter]
B. dziecka p + first-letter
C. pseudoelementu p::first-letter
D. klasy p.first-letter
Wybór klasy p.first-letter nie jest poprawny, ponieważ klasy w CSS są używane do grupowania elementów i stylizacji ich w zbiorach, a nie do selekcji poszczególnych części tekstu, jak pierwsza litera akapitu. Klasa ta będzie odnosić się do wszystkich elementów z przypisaną daną klasą, co nie spełnia celu stylizacji wyłącznie pierwszej litery. Selekcja dziecka p + first-letter jest również błędna, gdyż operator + w CSS odnosi się do sąsiadujących ze sobą elementów. Oznacza to, że ten kombinat nie jest użyteczny w kontekście pierwszej litery akapitu, ponieważ nie zapewnia odpowiedniego targetowania. Z kolei atrybutu p [first-letter] nie funkcjonuje w CSS, ponieważ atrybuty są używane do selekcji elementów na podstawie ich atrybutów HTML, takich jak klasy czy identyfikatory, a nie do selekcji pseudoelementów, jak w przypadku first-letter. Zrozumienie różnicy pomiędzy tymi koncepcjami jest kluczowe dla skutecznego stylizowania dokumentów w CSS oraz dla tworzenia estetycznych i funkcjonalnych interfejsów użytkownika.
Pytanie 7

Który z poniższych formatów plików nie jest używany do publikacji grafiki lub animacji w internecie?

A. PNG
B. SVG
C. AIFF
D. SWF
Format AIFF (Audio Interchange File Format) jest standardowym formatem plików audio stworzonym przez firmę Apple. Został zaprojektowany do przechowywania danych dźwiękowych i nie jest przeznaczony do publikacji grafiki ani animacji na stronach internetowych. W przeciwieństwie do formatów takich jak PNG, SWF czy SVG, które są powszechnie używane w kontekście grafiki i multimediów, AIFF koncentruje się na audio. Format PNG (Portable Network Graphics) jest popularnym formatem rastrowym, który obsługuje przezroczystość i kompresję bezstratną, co czyni go idealnym do obrazów w sieci. SWF (Shockwave Flash) to format plików wykorzystywany do animacji i interaktywnych aplikacji w Adobe Flash, a SVG (Scalable Vector Graphics) to wektorowy format grafiki, który pozwala na skalowanie bez utraty jakości. AIFF nie ma zastosowania w tych obszarach, co czyni go odpowiedzią, której szukamy.
Pytanie 8

Aby zrealizować przycisk na stronę internetową zgodnie z wzorem, należy w programie graficznym skorzystać z opcji

Ilustracja do pytania
A. wybór eliptyczny
B. deformacje i zniekształcenia
C. propagacja wartości
D. zaokrąglenie lub wybranie opcji prostokąt z zaokrąglonymi rogami
Stworzenie przycisku na stronie internetowej, który ma zaokrąglone rogi, wymaga użycia opcji zaokrąglenia w programie do grafiki rastrowej lub wybrania narzędzia prostokąt z zaokrąglonymi rogami. Jest to podejście zgodne z aktualnymi trendami w projektowaniu interfejsów użytkownika, gdzie nacisk kładziony jest na estetykę i użyteczność. Zaokrąglone elementy są bardziej przyjazne dla oka i pomagają w tworzeniu wizualnie przyjemnych projektów. W programach graficznych takich jak Adobe Photoshop czy GIMP, opcja ta pozwala na szybkie i precyzyjne dostosowanie kształtu przycisku, co jest nieocenione przy tworzeniu prototypów i projektów graficznych. Stosowanie zaokrągleń jest również zgodne z zasadami projektowania responsywnego, gdyż takie elementy wyglądają dobrze na różnorodnych rozdzielczościach ekranów. Wybierając tę technikę, projektanci mogą skupić się na tworzeniu spójnych i nowoczesnych interfejsów, co jest istotne w kontekście doświadczenia użytkownika. Przykładem zastosowania jest przycisk 'Kontakt' na stronie internetowej, który dzięki zaokrąglonym rogom wygląda bardziej zachęcająco i nowocześnie, co wpływa na pozytywne postrzeganie strony przez użytkowników.
Pytanie 9

Która z zasad walidacji stron internetowych jest niepoprawna?

A. Wyłączanie znaczników powinno następować w odwrotnej kolejności do ich włączania, np. <p>....<big>...</big></p>
B. W znacznikach nie zachodzi rozróżnienie pomiędzy dużymi a małymi literami, np. <p> i <P> są tym samym znacznikiem
C. Jeżeli w instrukcji stosuje się kilka atrybutów, ich kolejność powinna odpowiadać porządkom alfabetycznym, np. <img alt="...." src="...." />
D. Znaczniki, poza tymi samozamykającymi się, funkcjonują aż do momentu ich zakończenia znakiem '/', np. <p>...</p>
W kontekście walidacji znaczników HTML obowiązują szczegółowe zasady, które mają na celu zarówno poprawność syntaktyczną, jak i semantyczną kodu. Na przykład, w przypadku wyłączania znaczników, ważne jest, aby stosować się do zasady zwaną 'LIFO' (Last In, First Out), co oznacza, że znaczniki muszą być zamykane w odwrotnej kolejności, niż były otwierane. Otwierając znacznik <p>, a następnie <big>, w sytuacji, gdy oba są używane, <big> powinien być zamknięty przed <p>, co jest wymagane do zachowania poprawnej struktury dokumentu. Warto również podkreślić, że HTML jest językiem niestrict, co oznacza, że przeglądarki są dość tolerancyjne w stosunku do błędów, ale nieprawidłowe zamykanie znaczników może prowadzić do nieprzewidywalnych rezultatów wizualnych na stronie. Ponadto, wielkie i małe litery w znacznikach HTML nie mają znaczenia, co oznacza, że <p> i <P> będą interpretowane identycznie. Można jednak przyjąć zasadę, że stosowanie jednolitej konwencji, na przykład pisania wszystkich znaczników małymi literami, jest dobrym nawykiem, który zwiększa czytelność kodu. Przykład tego błędu można zaobserwować, gdy programiści mylą się w zamykaniu znaczników, co często prowadzi do złamania struktury DOM i problemów z renderowaniem strony. Utrzymywanie porządku w kodzie HTML jest kluczowe dla jego dalszego rozwoju i utrzymania.
Pytanie 10

Na ilustracji przedstawiono rezultat stosowania stylów CSS oraz odpowiadający mu kod HTML, który generuje ten przykład. Przyjmując, że marginesy wewnętrzne mają wartość 50 px, natomiast zewnętrzne wynoszą 20 px, styl CSS dla tego obrazu wygląda następująco

Ilustracja do pytania
A. Odpowiedź A
B. Odpowiedź C
C. Odpowiedź B
D. Odpowiedź D
W niepoprawnych odpowiedziach pojawiają się pewne niedociągnięcia, które mogą prowadzić do nieodpowiedniego wyświetlania elementów na stronie. Przykładowo, ustawienie marginesów i paddingów w nieodpowiedni sposób zmienia przestrzenność wokół obrazu, co może wpłynąć na jego rozmieszczenie i estetykę na stronie. Wybór nieodpowiedniego stylu obramowania, jak np. linia przerywana zamiast solidnej, może znacząco wpłynąć na odbiór wizualny i profesjonalizm projektu. Takie aspekty mogą być istotne w przypadku projektowania stron dla branż, które kładą nacisk na elegancję i prostotę. Ponadto, niespójne użycie kolorów tła i ramki może wprowadzać wizualny chaos, co jest przeciwieństwem dobrych praktyk projektowych. Edukując się z zakresu CSS warto zwrócić uwagę na to, jak różne właściwości stylów interakcji wpływają na ogólną harmonię projektu. Uwzględnianie wszelkich standardów i konwencji pozwala na tworzenie stron internetowych, które nie tylko będą estetyczne, ale również funkcjonalne i zgodne z oczekiwaniami użytkowników.
Pytanie 11

W przedstawionej definicji stylu CSS, powtarzanie dotyczy

body {
  background-image: url("rysunek.gif");
  background-repeat: repeat-y;
}
A. rysunku umieszczonego w tle strony w poziomie.
B. rysunku umieszczonego znacznikiem img.
C. tła każdego ze znaczników akapitu.
D. rysunku umieszczonego w tle strony w pionie.
Niestety, Twoja odpowiedź nie jest poprawna. 'background-repeat: repeat-y;' w CSS rzeczywiście nie dotyczy rysunków wstawianych przez tag img ani tła akapitów. Mówi po prostu, że tło się powtarza w pionie, czyli wzdłuż osi Y. Może to trochę mylić, ale warto pamiętać, że oś Y to pion a oś X to poziom. Zrozumienie tych podstawowych rzeczy jest konieczne, żeby ogarnąć CSS i tworzyć ładne strony www.
Pytanie 12

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

A. PHP
B. CSS
C. JavaScript
D. Ruby on Rails
W tym pytaniu łatwo się pomylić, bo wszystkie wymienione technologie występują w kontekście stron WWW, ale pełnią zupełnie różne role. Weryfikacja kompletności formularza „po stronie przeglądarki” oznacza, że logika musi działać u użytkownika, w jego browserze, zanim dane trafią na serwer. I tu kluczowe jest rozróżnienie: co działa po stronie klienta, a co po stronie serwera. CSS służy wyłącznie do opisu wyglądu – kolory, marginesy, rozmiary czcionek, układ elementów. Nie ma dostępu do wartości pól formularza w sensie logicznym. Można co najwyżej zmieniać styl w zależności od pseudo-klas (np. :valid, :invalid w HTML5), ale to są wbudowane mechanizmy przeglądarki, a nie „logika programu” w CSS. CSS nie umożliwia napisania warunku typu: jeśli pole A i pole B są puste, to pokaż taki komunikat i zablokuj wysłanie formularza. PHP z kolei jest językiem typowo serwerowym. Kod PHP wykonuje się na serwerze, po wysłaniu formularza, a nie w przeglądarce. To świetne narzędzie do walidacji danych po stronie serwera, zapisania ich do bazy, obsługi sesji i całej logiki backendowej, ale nie zrealizuje walidacji „na żywo” w momencie, gdy użytkownik dopiero wypełnia formularz. Typowym błędem myślowym jest założenie, że skoro PHP często pracuje z formularzami, to „sprawdza formularz”. Owszem, ale dopiero po jego wysłaniu. Ruby on Rails to natomiast framework backendowy napisany w Ruby, również działający na serwerze. On także ma bogate mechanizmy walidacji modeli i danych, ale znowu – wszystko dzieje się po stronie serwera. Framework może generować formularze, przyjmować dane, walidować je i zwracać błędy, ale przeglądarka sama z siebie nie uruchamia kodu Railsów. Jeżeli w treści pytania pojawia się wyraźny zapis „po stronie przeglądarki”, to praktycznie zawsze chodzi o technologię kliencką, czyli JavaScript lub ewentualnie rozwiązania na nim oparte (np. frameworki front-endowe). Warto o tym pamiętać, bo rozróżnienie klient–serwer to jedna z podstaw w programowaniu webowym i często decyduje o poprawności odpowiedzi w takich zadaniach.
Pytanie 13

Jakiego znacznika w HTML użyjemy, aby uzyskać tekst wyświetlany czcionką o stałej szerokości znaku, który również uwzględnia dodatkowe spacje, tabulacje oraz znaki końca linii?

A. <code>…</code>
B. <pre>…</pre>
C. <blockquote>…</blockquote>
D. <ins>…</ins>
Znaczniki <code>, <ins> i <blockquote> mają swoje unikalne zastosowania, ale nie nadają się do zachowania formatowania tekstu, jak to robi <pre>. Znacznik <code> jest przeznaczony do oznaczania fragmentów kodu, jednak nie utrzymuje przestrzeni i formatowania. Kiedy używasz <code>, przeglądarka wyświetli tekst w inny sposób, ale nie uwzględni dodatkowych odstępów lub tabulacji, co może prowadzić do nieczytelności w przypadku dłuższych fragmentów kodu. Z kolei znacznik <ins> służy do wskazywania wstawionego tekstu, co ma znaczenie w kontekście edycji lub zmian, ale nie zmienia jego formatowania ani nie zachowuje układów, co ogranicza jego użyteczność w przypadku tekstów wymagających precyzyjnego formatowania. Wreszcie, <blockquote> jest używane do cytowania dłuższych fragmentów tekstu z innego źródła, co również nie związane jest z zachowaniem konkretnego formatowania, a jego celem jest raczej stylistyczne wyróżnienie cytatu. W praktyce, mylenie tych znaczników może prowadzić do frustracji użytkowników, którzy oczekują zachowania konkretnych układów, zwłaszcza w kontekście programowania lub prezentacji danych. Ważne jest, aby zrozumieć, że każdy znacznik ma swoje specyficzne zastosowanie i powinien być używany zgodnie z jego przeznaczeniem, aby zapewnić spójność i czytelność prezentowanych treści.
Pytanie 14

W formularzu HTML wykorzystano znacznik <input>. Wyświetlane pole będzie przeznaczone do wprowadzania maksymalnie

Ilustracja do pytania
A. 20 znaków, które nie są widoczne w polu tekstowym
B. 30 znaków, które nie są widoczne w polu tekstowym
C. 30 znaków, które są widoczne podczas wpisywania
D. 20 znaków, które są widoczne podczas wpisywania
Zrozumienie działania atrybutów size i maxlength w znaczniku <input> jest kluczowe dla prawidłowego projektowania formularzy HTML. Atrybut size określa, ile znaków będzie widocznych w polu tekstowym, jednak to nie ogranicza faktycznej liczby znaków, które można wprowadzić. Działa to bardziej jako wskazówka dla użytkownika, jak szerokie może być pole, aby pomieścić określoną liczbę widocznych znaków. Dlatego odpowiedź, że size determinuje maksymalną ilość wprowadzanych znaków, jest błędna. Natomiast atrybut maxlength rzeczywiście ogranicza liczbę znaków, które można wprowadzić. Dzięki temu atrybutowi możemy kontrolować długość danych wejściowych, co jest często wykorzystywane w aplikacjach wymagających wprowadzania haseł lub innych danych tekstowych o określonej długości. W przypadku inputów typu password, wprowadzone znaki są maskowane, co oznacza, że użytkownik nie widzi tego, co wpisuje, a jego odpowiednik wprowadzenia tekstu typu tekstowego nie działa w ten sam sposób. Odpowiedzi zakładające, że dane są widoczne lub że size wpływa na długość wprowadzanych znaków, wynikają z niepełnego zrozumienia działania poszczególnych atrybutów HTML i ich roli w projektowaniu interfejsów użytkownika. Dobre praktyki projektowania formularzy wymagają jasnego rozróżnienia tych dwóch funkcji, co znacznie zwiększa użyteczność i dostępność aplikacji webowych oraz ułatwia użytkownikom korzystanie z formularzy zgodnie z ich przeznaczeniem.
Pytanie 15

Którą technologię poleca się przy tworzeniu serwisów WWW, tak aby zmiany w treści można było wykonywać bez potrzeby ich kodowania, przez użytkowników bez kompetencji programistycznych?

A. SEO
B. CMS
C. FTP
D. SSL
W tym pytaniu łatwo dać się złapać na skojarzenia z innymi pojęciami webowymi, które brzmią „poważnie technicznie”, ale w ogóle nie rozwiązują wskazanego problemu. Kluczowe jest zrozumienie, że chodzi o możliwość samodzielnej edycji treści przez osoby bez kompetencji programistycznych. To oznacza, że potrzebny jest panel administracyjny, edytor WYSIWYG, system uprawnień i mechanizmy zapisu treści w bazie danych. Tę rolę pełnią właśnie systemy CMS. SEO, czyli Search Engine Optimization, dotyczy pozycjonowania strony w wyszukiwarkach. Owszem, dobre SEO jest ważne, a część narzędzi SEO bywa zintegrowana z CMS-em, ale samo SEO nie jest technologią do zarządzania treścią. To zestaw praktyk i technik: dobór słów kluczowych, optymalizacja tytułów, opisów, struktury nagłówków, linkowania wewnętrznego. Ktoś mógł pomyśleć, że skoro SEO „usprawnia stronę”, to też pomaga ją łatwiej edytować. W rzeczywistości SEO nic nie mówi o tym, kto i jak technicznie zmienia treść. FTP to protokół służący do przesyłania plików na serwer. Używa go się często podczas wdrażania strony: programista wysyła pliki HTML, CSS, PHP, grafiki. Ale dla zwykłego redaktora FTP jest kompletnie niepraktyczny i niebezpieczny. Trzeba znać strukturę katalogów, uważać, żeby nie nadpisać plików, a każda zmiana treści wymaga edycji pliku źródłowego. To dokładne przeciwieństwo idei „edycji bez kodowania”. Typowym błędem myślowym jest przekonanie, że skoro przez FTP „wrzuca się stronę”, to jest to technologia do jej obsługi przez użytkownika. W profesjonalnych wdrożeniach FTP zwykle jest dostępny tylko dla administratorów. SSL z kolei to technologia kryptograficzna, która służy do szyfrowania połączenia między przeglądarką a serwerem (dziś w praktyce mówimy częściej o TLS, ale skrót SSL ciągle funkcjonuje potocznie). Certyfikat SSL zapewnia poufność i integralność danych, co jest standardem przy logowaniu, płatnościach czy formularzach. Jednak nie ma żadnego wpływu na to, czy redaktor potrafi zmienić treść bez znajomości HTML. Można mieć idealnie skonfigurowany SSL i dalej edytować stronę w notatniku, a można mieć rozbudowany CMS bez certyfikatu – jedno nie wynika z drugiego. Podsumowując, SEO, FTP i SSL to ważne elementy ekosystemu webowego, ale dotyczą odpowiednio: widoczności w wyszukiwarkach, transferu plików i bezpieczeństwa transmisji. Żadne z nich nie daje typowego, przyjaznego panelu zarządzania treścią dla nietechnicznych użytkowników. Tę rolę spełniają systemy CMS, które są wręcz standardem branżowym przy tworzeniu serwisów, gdzie treść ma być często aktualizowana przez osoby spoza działu IT.
Pytanie 16

W języku HTML, atrybut shape w znaczniku area, który definiuje typ obszaru, może mieć wartość

A. style="margin-bottom: 0cm;">poły, square, circle
B. rect, sąuare, circle
C. style="margin-bottom: 0cm;">rect, triangle, circle
D. rect, poły, circle
Atrybut shape znacznika area w języku HTML jest kluczowy dla określenia kształtu interaktywnego obszaru na mapie obrazów. Przyjmuje on wartości, które definiują geometrię obszaru w kontekście mapy, a do najpopularniejszych z nich należą 'rect', 'circle' oraz 'poly'. Wartość 'rect' definiuje prostokątny obszar, gdzie użytkownik może kliknąć w dowolnym miejscu w obrębie prostokąta. 'Circle' z kolei pozwala na stworzenie okrągłego obszaru kliknięcia, definiując jego środek oraz promień. Z kolei 'poly' umożliwia zdefiniowanie wielokątnego obszaru poprzez podanie współrzędnych wierzchołków. Te wartości są zgodne z definicjami przedstawionymi w standardach W3C, które określają sposób, w jaki przeglądarki interpretują te atrybuty. Przykładowo, dla atrybutu shape='rect' można podać współrzędne lewego górnego i prawego dolnego narożnika prostokąta, co sprawia, że jest to użyteczne w implementacji interaktywnych map. Zrozumienie tych wartości jest istotne dla programistów webowych, którzy chcą tworzyć dostępne i interaktywne treści.
Pytanie 17

Który z wymienionych formatów wideo nie jest wspierany przez standard HTML5?

A. C. MP4
B. B. Ogg
C. D. WebM
D. A. AVI
Wybór Ogg, MP4 czy WebM jako odpowiedzi niewłaściwych jest nie do końca trafny, bo wszystkie te formaty są jednak obsługiwane przez HTML5. Ogg, mimo że mniej popularny, jest całkowicie ok w specyfikacji HTML5 i zyskuje na znaczeniu w kontekście otwartych standardów. MP4 to jeden z najpopularniejszych formatów, wspierany przez prawie wszystkie przeglądarki i urządzenia mobilne, więc to świetny wybór do strumieniowania. WebM, stworzony przez Google, również ma swoje miejsce i jest często używany do wideo w sieci. Wiele osób myli się myśląc, że mniej znane formaty są niekompatybilne z HTML5. Często ludzie uważają, że starsze formaty jak AVI są bardziej uniwersalne, ale to nieprawda, bo współczesne przeglądarki mają inne wymagania. Dlatego tak ważne jest, by programiści i twórcy treści znali różnorodność formatów i ich zastosowanie w multimediach w sieci.
Pytanie 18

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

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

Który z poniższych kodów HTML odpowiada opisanej tabeli? (W celu uproszczenia zrezygnowano z zapisu stylu obramowania tabeli oraz komórek)

Ilustracja do pytania
A. Odpowiedź A
B. Odpowiedź B
C. Odpowiedź C
D. Odpowiedź D
W koncepcji struktury tabeli HTML, zrozumienie atrybutów rowspan i colspan jest kluczowe dla poprawnego tworzenia układu danych. W analizie dostępnych odpowiedzi, niektóre z nich błędnie stosują te atrybuty lub ich nie używają, co prowadzi do niepoprawnego renderowania tabeli. Na przykład, w niektórych przypadkach, gdy użycie colspan lub rowspan jest niepotrzebne, może to prowadzić do nieporządku wizualnego i semantycznego. W odpowiedziach, w których zaniedbano atrybut rowspan, nie osiągnięto prawidłowego połączenia wierszy w kolumnie, co powoduje, że dane są wyświetlane w sposób nieczytelny. Typowym błędem myślowym jest zakładanie, że zagnieżdżenie danych w kolejnych komórkach wystarczy do ich poprawnej prezentacji, jednak w praktyce to prowadzi do rozbicia logicznej ciągłości informacji. Takie podejście może zaburzać użytkownikom interakcję z danymi, zwłaszcza gdy przeglądają oni tabele na urządzeniach mobilnych, gdzie przestrzeń jest ograniczona. Właściwe użycie rowspan zapewnia jednolitą prezentację, poprawiając zarówno estetykę, jak i funkcjonalność tabeli, zgodnie z dobrymi praktykami projektowania interfejsów użytkownika.
Pytanie 20

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

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

W dokumencie HTML umieszczono tekst sformatowany określonym stylem. Aby wprowadzić w treści kilka słów o zróżnicowanym stylu, należy użyć znacznika

A. <span>
B. <section>
C. <hr>
D. <table>
Wybór znaczników <section>, <table> i <hr> jako sposobów na wtrącenie fragmentów tekstu stylizowanych różnie od reszty treści jest niewłaściwy z technicznego punktu widzenia. Znacznik <section> jest przeznaczony do tworzenia sekcji dokumentu, co oznacza, że ma on znaczenie semantyczne i jest używany do grupowania treści, które dotyczą tego samego tematu. Użycie go do stylizacji pojedynczych słów może prowadzić do nieczytelności struktury dokumentu oraz negatywnie wpływać na dostępność treści. Z kolei znacznik <table> służy do tworzenia tabel, które organizują dane w wierszach i kolumnach, a więc jego zastosowanie w kontekście formatowania tekstu byłoby zarówno nieefektywne, jak i niezgodne z przeznaczeniem. Stosowanie <hr> natomiast, które definiuje poziomą linię, nie ma sensu w kontekście zmiany stylu tekstu, ponieważ jego funkcją jest oddzielanie sekcji treści, a nie stylizowanie tekstu. Wybierając nieodpowiednie znaczniki, możemy naruszyć zasady semantyki HTML, co prowadzi do problemów z dostępnością i SEO, a także do trudności w dalszej edycji oraz utrzymaniu kodu. Prawidłowe użycie znaczników jest kluczowym elementem dobrych praktyk w tworzeniu stron internetowych i wpływa na ich czytelność oraz zrozumienie przez różne urządzenia i technologie.
Pytanie 22

Która z zasad walidacji strony internetowej jest nieprawidłowa?

A. Tagi, poza samozamykającymi się, funkcjonują do momentu ich wyłączenia znakiem "/", np. ```<p> ..</p>```
B. W tagach nie jest brana pod uwagę różnica między dużymi a małymi literami, np. ```<p>``` i ```<P>``` to ten sam tag.
C. Wyłączanie tagów musi następować w odwrotnej sekwencji do ich włączenia, np. ```<p> ... <big>...</big></p>```
D. Jeżeli w poleceniu występuje kilka atrybutów, ich kolejność powinna być uporządkowana alfabetycznie np. ```<img alt="..." src="/.."/>```
Koncepcje zawarte w niepoprawnych odpowiedziach są oparte na błędnym zrozumieniu zasad działania znaczników HTML. W kontekście wyłączania znaczników, ważne jest, aby pamiętać, że znacznik startowy powinien być zawsze zamknięty odpowiednim znacznikiem końcowym, co oznacza, że struktura dokumentu musi być prawidłowo zagnieżdżona. Zasada dotycząca wyłączania znaczników w odwrotnej kolejności jest nieprawidłowa, ponieważ znaczniki nie są stosowane w taki sposób, a ich zamykanie powinno być zgodne z ich zagnieżdżeniem. Rozumienie tej zasady jest kluczowe dla tworzenia poprawnej struktury dokumentu HTML. Warto również zauważyć, że HTML nie rozróżnia wielkich i małych liter w znacznikach, co jest istotnym uproszczeniem, ale nie oznacza, że można je mieszać w sposób dowolny. Zastosowanie spójnych konwencji nazewnictwa, takich jak używanie małych liter, jest wskazane dla zachowania czytelności kodu. Rozumienie tych zasad jest kluczowe dla efektywnego projektowania stron internetowych oraz dla utrzymania wysokiej jakości kodu. W przypadku, gdy znacznik nie jest poprawnie zamknięty, może to prowadzić do błędów w renderowaniu strony oraz problemów z jej dostępnością. Dlatego kluczowe jest stosowanie się do zasad poprawności kodu i jego semantyki.
Pytanie 23

W tabeli pokazano cechy pliku graficznego. Aby rysunek ładował się szybciej na stronie WWW, należy

Wymiary: 4272 x 2848px
Rozdzielczość: 72 dpi
Format: JPG
A. zwiększyć rozdzielczość
B. zmniejszyć wymiary rysunku
C. zmienić proporcje szerokości do wysokości
D. zmienić format grafiki na CDR
Zmniejszenie wymiarów rysunku to kluczowy krok w optymalizacji czasu ładowania grafiki na stronę WWW. Mniejsze wymiary oznaczają mniejszą ilość danych do przesłania, co skraca czas ładowania strony. Praktycznym przykładem jest zmniejszenie wymiarów obrazu z 4272 x 2848 pikseli do bardziej standardowego rozmiaru, jak np. 1920 x 1080 pikseli dla grafik wyświetlanych na ekranach. Zmniejszenie wymiarów nie tylko przyspiesza ładowanie ale także zmniejsza zużycie transferu danych co jest istotne przy ograniczeniach mobilnych. Warto pamiętać że mniejsze grafiki są też mniej zasobożerne dla urządzeń użytkowników co wpływa na ogólną wydajność strony. Zastosowanie odpowiednich wymiarów jest zgodne z dobrymi praktykami optymalizacji webowej rekomendowanymi przez Google PageSpeed Insights i inne narzędzia analityczne. Optymalizacja grafiki poprzez zmniejszenie jej wymiarów jest podstawową czynnością w procesie tworzenia responsywnych i szybko działających witryn internetowych.
Pytanie 24

Aby film wyglądał płynnie, liczba klatek (które nie nakładają się na siebie) na sekundę powinna wynosić przynajmniej w przedziale

A. 20-23 fps
B. 24-30 fps
C. 31-36 fps
D. 16-19 fps
Odpowiedź 24-30 fps jest poprawna, ponieważ standardowy zakres klatek na sekundę dla filmów wynosi właśnie 24-30 fps. W praktyce, 24 fps jest uznawane za minimum dla filmów kinowych, co pozwala uzyskać wrażenie ruchu, które ludzie uznają za płynne. Przykładowo, filmy kręcone w tej klatkażu, takie jak klasyczne produkcje Hollywood, często korzystają z techniki zwanej 'motion blur', która dodatkowo poprawia wrażenie płynności. W przypadku telewizji, większa liczba klatek może być stosowana, co pozwala na lepszą jakość obrazu podczas szybkich ruchów, jednak 30 fps to standard dla wielu programów telewizyjnych. Ważne jest również zrozumienie, że zbyt niska liczba klatek, jak na przykład 16-19 fps, może prowadzić do efektu stroboskopowego, co jest nieprzyjemne dla widza. Normy branżowe, takie jak SMPTE (Society of Motion Picture and Television Engineers), potwierdzają, że liczba klatek między 24 a 30 fps jest odpowiednia do uzyskania zamierzonego efektu wizualnego w filmie.
Pytanie 25

Znacznik <pre> </pre> służy do wyświetlania

A. treści czcionką w języku polskim
B. znaku skreślenia
C. znaku wielokropkowego
D. treści czcionką o stałej szerokości
Wybór błędnych odpowiedzi może wynikać z nieporozumienia dotyczącego funkcji znacznika <pre>. Odpowiedzi sugerujące, że służy on do wyświetlania znaku przekreślenia, znaku wielokropka, lub treści polską czcionką nie mają podstaw w rzeczywistej funkcjonalności tego znacznika. Znaki przekreślenia, czy wielokropki są zazwyczaj elementami typografii, które można osiągnąć przez inne znaczniki i style CSS, a nie przez <pre>. Znacznik <pre> nie wpływa na rodzaj czcionki używanej w danym elemencie, lecz przede wszystkim na sposób wyświetlania treści. Przykładem może być tekst umieszczony w tym znaczniku, który wyświetla się w sposób stały, niezależnie od ustawień czcionki w stylach CSS, co czyni go nieodpowiednim do użycia w kontekście wyboru konkretnej czcionki, jak polska czcionka. Zrozumienie, że <pre> dotyczy przede wszystkim zachowania formatowania tekstu, a nie jego typografii, jest kluczowe do poprawnego korzystania z HTML. W przypadku, gdy użytkownik wybiera błędne odpowiedzi, może to wynikać z mylnego założenia, że <pre> jest odpowiedzialny za typografię, co prowadzi do nieprawidłowych wniosków w kontekście inżynierii oprogramowania i projektowania stron internetowych.
Pytanie 26

Pokazane pole input pozwala na  

<input type = "checkbox" name = "text1" value = "text2">

A. wybranie opcji
B. wprowadzenie dowolnego tekstu
C. wprowadzenie hasła
D. selekcja opcji z listy o wartościach text1 i text2
Odpowiedź "zaznaczenie opcji" jest na pewno trafna, bo pole checkbox (<input type='checkbox'>) jest stworzone do tego, żeby użytkownicy mogli wybrać jedną lub więcej opcji z danej grupy. Widzisz, checkboxy są bardzo popularne w formularzach internetowych, bo pozwalają na różnorodność wyborów, w przeciwieństwie do przycisków radiowych, które pozwalają na zaznaczenie tylko jednej opcji. Na przykład, jak się rejestrujesz na stronie, możesz zaznaczyć różne zgody na przetwarzanie danych, co daje możliwość wyboru więcej niż jednej opcji. Z punktu widzenia HTML i najlepszych praktyk w projektowaniu formularzy, warto dodać odpowiednie etykiety (label) do checkboxów, żeby ułatwić korzystanie z nich osobom, które używają technologii asystujących. Jeśli dobrze ustalimy atrybuty 'name' i 'value', to dane po przesłaniu formularza będą odpowiednio przetworzone. Pamiętaj, że wartość checkboxa jest przesyłana tylko wtedy, gdy jest zaznaczony, co jest zgodne z oczekiwaniami użytkowników oraz standardami W3C.
Pytanie 27

Jakie będzie efektem zastosowanego formatowania CSS dla nagłówka trzeciego stopnia

<style> h3 { background-color: grey; } </style>
…
<h3 style="background-color: orange;">Rozdział 1.2.2.</h3>

A. tło nagłówka będzie pomarańczowe
B. kolor tekstu będzie szary
C. tło nagłówka będzie w odcieniu szarości
D. kolor tekstu będzie pomarańczowy
Odpowiedź, że tło będzie pomarańczowe, jest jak najbardziej trafna. W kodzie HTML użyto atrybutu "style" w tagu <h3>, który ma wyższy priorytet niż to, co jest zapisane w sekcji <style>. Wartość background-color to "orange", więc tło nagłówka trzeciego stopnia naprawdę będzie pomarańczowe. Znamy zasady kaskadowych arkuszy stylów, które mówią, że style bezpośrednio przypisane do elementów HTML mają pierwszeństwo. Kiedy chcemy, aby nagłówki miały różne kolory w zależności od tego, gdzie są użyte, inline styles są bardzo przydatne – zwłaszcza w prototypach. Ale z drugiej strony, z mojego doświadczenia, nadmiar inline styles może skomplikować późniejsze zarządzanie kodem, dlatego lepiej trzymać się klas CSS, żeby wszystko było bardziej uporządkowane.
Pytanie 28

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

A. img
B. strong
C. p
D. span
Czasami ludzie mają problemy z rozumieniem znaczenia <img>, <span> i <strong>, co może prowadzić do nieporozumień. Znacznik <img> to element inline, który służy do wstawiania obrazków do dokumentów HTML. Elementy inline nie zaczynają nowej linii, więc obrazek dodany przez <img> wpasowuje się w tekst i nie wywołuje żadnej przerwy. Dlatego <img> nie jest elementem blokowym i nie nadaje się do dzielenia treści akapitów, co jest istotne w kontekście struktury dokumentu. Z kolei <span> też jest inline i głównie służy do stylizacji konkretnego fragmentu tekstu, bez zmiany jego ogólnej struktury. To przydatne, gdy chcesz zastosować CSS do wybranych części, ale nie pomoże w budowaniu większych sekcji treści. A znacznik <strong>? No cóż, jest używany do podkreślenia ważności tekstu, co zazwyczaj oznacza pogrubienie, ale i tak nie wpływa na układ strony w sensie blokowym. Elementy inline, jak <img>, <span> i <strong>, nie tworzą widocznych sekcji w treści, co ogranicza ich zastosowanie przy budowaniu struktury dokumentu. Żeby stworzyć logiczne bloki tekstowe i sekcje na stronie, warto korzystać z elementów blokowych, jak <p>, by zapewnić lepszą czytelność i spełniać zasady semantyczne HTML.
Pytanie 29

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. tr { background-color: Pink; }
B. td, th { background-color: Pink; }
C. tr:active { background-color: Pink; }
D. tr:hover { background-color: Pink; }
W tym zadaniu chodzi o zrozumienie, jak działają selektory CSS oraz pseudo-klasy odpowiedzialne za interakcję z użytkownikiem. Jeśli efekt ma pojawiać się tylko wtedy, gdy użytkownik najedzie myszką na wiersz tabeli, to zwykłe ustawienie background-color bez pseudo-klasy nie spełni tego warunku. Deklaracja tr { background-color: Pink; } oznaczałaby, że wszystkie wiersze tabeli są cały czas różowe, niezależnie od tego, czy ktoś na nie najedzie, czy nie. To jest po prostu styl statyczny, bez żadnej reakcji na zdarzenia. Podobnie zapis td, th { background-color: Pink; } ustawia tło dla wszystkich komórek tabeli (zarówno nagłówkowych th, jak i zwykłych td) w sposób stały. Moim zdaniem to dość częsty błąd: ktoś kojarzy tabelę z komórkami i intuicyjnie styluje td/th, ale zapomina, że w pytaniu chodzi o efekt dynamiczny „po najechaniu”. W rezultacie otrzymujemy tabelę pokolorowaną na stałe, bez jakiejkolwiek interakcji, co jest sprzeczne z założeniem zadania i z typowym zachowaniem tabel w nowoczesnych interfejsach. Ciekawsza jest kwestia selektora tr:active { background-color: Pink; }. Pseudo-klasa :active oznacza element w momencie „aktywacji”, czyli najczęściej w chwili klikania (przytrzymania przycisku myszy). Efekt trwa bardzo krótko, tylko w czasie samego kliknięcia. To zupełnie inny scenariusz niż wygodne podświetlenie wiersza, które ma się utrzymywać, dopóki kursor jest nad elementem. Użycie :active prowadzi do efektu, który miga na ułamek sekundy i z punktu widzenia ergonomii jest praktycznie bezużyteczny w kontekście podświetlania wierszy. Typowy błąd myślowy przy takich pytaniach polega na myleniu różnych pseudo-klas: :hover, :active, :focus. W webdevie przyjęło się, że :hover służy do reakcji na najechanie myszką, :active do krótkiej reakcji na kliknięcie, a :focus do zaznaczenia elementu, który ma aktualnie fokus klawiatury. Standardy CSS i dobre praktyki projektowania interfejsów jasno wskazują, że do efektu „podświetl wiersz, gdy nad nim jestem” należy użyć właśnie :hover na odpowiednim elemencie, czyli w tym przypadku tr. Wszystkie pozostałe odpowiedzi ignorują tę zasadę albo stosują nie tę pseudo-klasę, co trzeba, przez co nie odzwierciedlają poprawnie zachowania pokazanego w materiale wideo.
Pytanie 30

Zaprezentowano tabelę stworzoną przy użyciu kodu HTML, bez zastosowania stylów CSS. Która część kodu HTML odnosi się do pierwszego wiersza tabeli?

Ilustracja do pytania
A. Rys. D
B. Rys. A
C. Rys. C
D. Rys. B
Znaczniki HTML używane w konstrukcji tabel muszą być wybierane z uwzględnieniem ich przeznaczenia i semantycznego znaczenia. W przypadku budowy pierwszego wiersza tabeli, który pełni rolę nagłówka, kluczowe jest wykorzystanie odpowiednich znaczników, takich jak <th>. Wybór znaczników <td> w pierwszym wierszu, nawet jeśli zawierają one tekst pasujący do nagłówków, jest błędny, ponieważ <td> oznacza komórki danych, a nie nagłówki. Tego typu błędy mogą prowadzić do niejednoznacznej interpretacji struktury tabeli przez technologie wspomagające, jak czytniki ekranowe, co jest sprzeczne z wytycznymi dotyczącymi dostępności. Dodatkowo, korzystanie z tagów niewłaściwie zamieniających semantykę (np. <i> lub <center> wewnątrz <td>) nie tylko nie spełnia standardów estetycznych i funkcjonalnych, ale także zwiększa techniczne zadłużenie projektu. Brak poprawnego stosowania znaczników nagłówka (<th>) może utrudniać zrozumienie danych przez użytkowników oraz wpływać negatywnie na użyteczność strony. Poprawne zrozumienie i stosowanie semantycznych możliwości HTML jest fundamentem tworzenia dostępnych i efektywnych stron internetowych co ma kluczowe znaczenie w kontekście profesjonalnego podejścia do projektowania interfejsów użytkownika i architektury informacji na stronach internetowych.
Pytanie 31

Wskaż blok, który jest sformatowany zgodnie z podanym stylem CSS.

background: linear-gradient(to right, LightBlue, DarkBlue);
Ilustracja do pytania
A. Blok 3
B. Blok 1
C. Blok 4
D. Blok 2
Blok 2 jest poprawną odpowiedzią ponieważ wykorzystuje styl CSS background linear-gradient(to right LightBlue DarkBlue) co oznacza że gradient kolorów rozciąga się od lewej do prawej strony elementu CSS linear-gradient pozwala na tworzenie gładkich przejść między kolorami co jest popularną techniką w projektowaniu stron internetowych Styl ten dodaje wizualnej atrakcyjności i może być użyty w różnych częściach witryny takich jak przyciski nagłówki czy tła sekcji Właściwość gradientu pozwala na zastosowanie wielu kolorów i kontrolowanie ich punktów początkowych i końcowych co zwiększa elastyczność projektowania Ponadto gradienty są wspierane przez wszystkie nowoczesne przeglądarki co czyni je doskonałym wyborem dla responsywnych stron internetowych Wykorzystanie gradientów zamiast obrazów tła pomaga także w optymalizacji strony zmniejszając czas ładowania co jest zgodne z najlepszymi praktykami branżowymi i wpływa pozytywnie na doświadczenie użytkownika CSS oferuje również inne typy gradientów takie jak radial-gradient i conic-gradient które mogą być używane w zależności od potrzeb projektowych
Pytanie 32

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

A. <th>
B. <ul>
C. <tr>
D. <td>
Wybór znaczników <tr>, <th> i <td> jest nieprawidłowy, ponieważ są one zarezerwowane dla konstrukcji tabel w HTML. Znacznik <tr> definiuje wiersz tabeli, <th> oznacza nagłówek kolumny, natomiast <td> oznacza komórkę danych w tabeli. Użycie tych znaczników wskazuje na mylenie struktury danych prezentowanej w formie tabelarycznej z listą, co jest fundamentalnym błędem w podejściu do budowy semantycznej HTML. W tabelach, każdy wiersz i kolumna mają swoje określone przeznaczenie i służą do organizowania danych w sposób bardziej złożony, natomiast listy są używane do prostszego katalogowania elementów, gdzie kolejność nie ma znaczenia. Dlatego istotne jest, aby zrozumieć, że każdy znacznik w HTML ma swoje konkretne zastosowanie i kontekst. Właściwe wykorzystanie znaczników nie tylko poprawia semantykę dokumentu, ale także przyczynia się do poprawy dostępności oraz optymalizacji SEO. Ignorowanie tych zasad może prowadzić do nieczytelnych stron internetowych i nieefektywnego przekazywania informacji użytkownikom.
Pytanie 33

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

A. <img src="/obrazek.png" alt="obraz4">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="obraz3" height="50%">tekst
Aby wstawić obrazek z tekstem przyległym w HTML, należy skorzystać ze znacznika <img> z atrybutem align ustawionym na 'middle'. Atrybut align jest przestarzały w HTML5, ale nadal może być używany w kontekście tekstów przylegających do obrazków. Ustawiając 'middle', obrazek będzie wyśrodkowany w pionie względem linii tekstu, co pozwala na estetyczne umiejscowienie obrazu w odniesieniu do towarzyszącego mu tekstu. Dobrym przykładem jest zastosowanie <img src='/obrazek.png' alt='obraz2' align='middle'>tekst, co sprawia, że obrazek staje się integralną częścią tekstu, a nie tylko jego dodatkiem. W kontekście standardów, warto zauważyć, że HTML5 zaleca stosowanie CSS do pozycjonowania, dlatego bardziej współczesnym podejściem byłoby użycie stylów CSS, np. 'vertical-align: middle'. Można to osiągnąć poprzez dodanie klasy do obrazka oraz odpowiedniego stylu CSS. Chociaż align jest przestarzały, jego rozumienie jest istotne dla osób przystosowujących starsze strony do nowych standardów.
Pytanie 34

Zapisano kod HTML wstawiający grafikę na stronę internetową: ```pejzaż``` Jeżeli rysunek.png nie zostanie odnaleziony, przeglądarka:

A. nie wyświetli strony internetowej.
B. w miejscu grafiki wypisze tekst "pejzaż".
C. w miejscu grafiki wypisze błąd wyświetlania strony.
D. w miejscu grafiki wypisze tekst "rysunek.png".
Brawo! Wybrałeś prawidłową odpowiedź. Element <img> w kodzie HTML może mieć atrybut alt, który określa tekst alternatywny, który ma być wyświetlony, gdy obrazek nie może zostać załadowany. W tym przypadku, atrybut alt ma wartość 'pejzaż', co oznacza, że jeśli obraz 'rysunek.png' nie może zostać załadowany, przeglądarka wyświetli tekst 'pejzaż' w miejscu, gdzie powinien być obraz. Ta funkcja jest przydatna z kilku powodów. Po pierwsze, pozwala użytkownikowi zrozumieć kontekst strony, nawet jeśli nie może zobaczyć obrazu. Po drugie, jest to zgodne ze standardami dostępności, ponieważ czytniki ekranu dla osób niewidomych mogą odczytywać ten tekst. To jest ważne dla tworzenia stron internetowych, które są dostępne dla wszystkich.
Pytanie 35

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

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

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

A. <ul>
B. <li>
C. <ol>
D. <dl>
Zastosowanie znaczników <ul>, <dl> oraz <li> w kontekście tworzenia listy numerowanej w HTML prowadzi do nieporozumień, które mogą zniekształcić strukturę i semantykę dokumentu. Znacznik <ul> jest używany do tworzenia list nieuporządkowanych, co oznacza, że elementy listy nie są numerowane, lecz oznaczone punktami. To podejście jest właściwe tylko w sytuacjach, gdy porządek elementów nie jest istotny, na przykład w przypadku list zakupów. Z kolei znacznik <dl> służy do definiowania list tekstowych, w których elementy są zestawiane w pary definicji, co ma swoje zastosowanie w glosariuszach lub słownikach, ale nie jest odpowiednie do zwykłych list numerowanych. Natomiast <li> to znacznik, który jest używany w kontekście list zarówno uporządkowanych, jak i nieuporządkowanych, ale sam w sobie nie tworzy listy. Elementy <li> muszą być zagnieżdżone w odpowiednich znacznikach <ol> lub <ul>, by miały sens w ramach struktury HTML. Powszechny błąd polega na myleniu typów listy oraz ich semantycznego przeznaczenia, co może prowadzić do problemów z dostępnością oraz indeksowaniem przez wyszukiwarki. Konsekwencją niewłaściwego użycia znaczników może być również obniżona jakość nawigacji i user experience na stronie internetowej.
Pytanie 37

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

A. link
B. alt
C. src
D. href
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 38

Do zapisania prostej animacji na stronę internetową można zastosować format

A. PNG
B. CDR
C. GIF
D. JPG
Format GIF (Graphics Interchange Format) jest idealny do zapisywania prostych animacji na potrzeby stron internetowych. GIF obsługuje do 256 kolorów w palecie, co czyni go odpowiednim do animacji o niskiej rozdzielczości i małej liczbie kolorów. Animacje GIF składają się z serii klatek, które są wyświetlane w szybkim tempie, co pozwala na płynne przejścia między różnymi etapami animacji. Dzięki swojej powszechności i wsparciu w większości przeglądarek internetowych, GIF stał się standardem dla prostych animacji w sieci. Format ten wspiera również przezroczystość, co pozwala na umiejscowienie animacji na różnych tłach bez widocznego prostokątnego obramowania. Przykłady zastosowania GIF obejmują ikony ładowania, animacje przycisków czy krótkie klipy wideo zamienione na animacje. GIF jest także często wykorzystywany w marketingu internetowym i mediach społecznościowych, aby przyciągnąć uwagę użytkowników. Standardy dotyczące GIF są określone przez specyfikacje formatów obrazów i są szeroko akceptowane przez deweloperów webowych, co czyni go wygodnym wyborem dla twórców stron internetowych.
Pytanie 39

W kodzie źródłowym zapisanym w języku HTML wskaż błąd walidacji dotyczący tego fragmentu: ```

CSS

Kaskadowe arkusze stylów (ang. Cascading Style Sheets)
to język służący ...```

A. Znacznik zamykający /b niezgodny z zasadą zagnieżdżania.
B. Znacznik br nie został poprawnie zamknięty.
C. Znacznik br nie może występować wewnątrz znacznika p.
D. Nieznany znacznik h6.
Rozważmy błędne koncepcje zawarte w innych odpowiedziach. Wskazanie, że znacznik br nie został poprawnie zamknięty, jest niepoprawne, ponieważ znacznik <br> jest samozamykający i nie wymaga dodatkowego znacznika zamykającego. Często błędem jest próba zamknięcia takich znaczników, co prowadzi do niepotrzebnego zamieszania w kodzie. Dodatkowo, stwierdzenie, że znacznik br nie może występować wewnątrz znacznika p, jest nieprawidłowe. Zgodnie ze standardami HTML, znacznik <br> jest dozwolony wewnątrz <p> i służy do wprowadzenia przerwy linii. Wreszcie, znacznik <h6> jest prawidłowym znacznikiem HTML i jego użycie nie stanowi błędu. Pomyłka ta wynika prawdopodobnie z niepełnej znajomości dostępnych znaczników HTML. Dlatego zawsze warto poszerzać swoją wiedzę na ten temat i regularnie odnosić się do specyfikacji HTML.
Pytanie 40

W trakcie weryfikacji stron internetowych nie analizuje się

A. źródeł pochodzenia narzędzi edytorskich
B. funkcjonowania linków
C. błędów składniowych w kodzie
D. zgodności z różnymi przeglądarkami
Walidacja stron internetowych jest procesem, który ma na celu zapewnienie, że strona internetowa jest poprawnie skonstruowana i zgodna z ustalonymi standardami, co z kolei wpływa na jej funkcjonalność oraz dostępność. W tym kontekście analiza błędów składni kodu jest kluczowa, ponieważ nieprawidłowa składnia może prowadzić do błędów renderingowych w przeglądarkach, co z kolei negatywnie wpływa na doświadczenia użytkowników. Podobnie, sprawdzanie działania linków jest istotne, ponieważ nieaktywe lub uszkodzone linki mogą prowadzić do frustracji użytkowników oraz wyniszczającego wpływu na SEO. Dodatkowo, zgodność z przeglądarkami jest fundamentalnym aspektem walidacji, gdyż różne przeglądarki mogą interpretować kod HTML i CSS w odmienny sposób. Zaniedbanie tych aspektów może skutkować problemami z wyświetlaniem strony czy jej funkcjonalnością. Typowym błędem myślowym, który prowadzi do niewłaściwych wniosków, jest przekonanie, że źródło narzędzi edytorskich - czy to komercyjne, czy open-source - ma bezpośredni wpływ na jakość kodu. Prawda jest taka, że to programista jest odpowiedzialny za jakość tworzonych rozwiązań, a nie samo narzędzie. Również, często myli się korzyści płynące z używania profesjonalnego edytora kodu z jego wpływem na proces walidacji, co prowadzi do niewłaściwego podejścia do oceny jakości strony internetowej.
Rozpocznij nowy egzamin
Powrót do strony głównej