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: 12 kwietnia 2026 16:28
Data zakończenia: 12 kwietnia 2026 16:35

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Jaki zestaw terminów określa interfejs użytkownika witryny internetowej?

A. Obróbka danych, system zarządzania treścią, projektowanie informacji

B. Przesyłanie zapytań do bazy, skrypty PHP

C. Szkic strony, diagram witryny, diagram przepływu informacji

D. Przyciski, menu, interakcja użytkownika z aplikacją

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Interfejs użytkownika (UI) strony internetowej to kluczowy element, który odpowiada za interakcję użytkownika z aplikacją internetową. W jego skład wchodzą różnorodne elementy, takie jak przyciski, menu, formularze, ikony oraz inne komponenty, które umożliwiają użytkownikowi nawigację, wprowadzanie danych oraz podejmowanie akcji. Zastosowanie standardów projektowania, takich jak Material Design czy Human Interface Guidelines, pozwala na tworzenie intuicyjnych i estetycznych interfejsów, co zwiększa użyteczność strony. Przykładowo, przycisk „Zatwierdź” umieszczony w formularzu powinien być wyraźnie oznaczony i łatwo dostępny, aby użytkownicy mogli szybko zakończyć proces rejestracji lub zakupu. Dobre praktyki w zakresie projektowania UI obejmują także responsywność, co oznacza, że interfejs powinien dostosowywać się do różnych rozmiarów ekranów, zapewniając optymalne wrażenia użytkownika na urządzeniach mobilnych oraz desktopowych. Interakcja użytkownika z aplikacją jest kluczowym aspektem, a właściwie zaprojektowany interfejs wpływa na satysfakcję użytkowników oraz ich skłonność do powrotu na stronę.

Pytanie 2

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

A. znaku wielokropkowego

B. treści czcionką w języku polskim

C. treści czcionką o stałej szerokości

D. znaku skreślenia

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <pre> </pre> jest używany do wyświetlania treści w formacie, który zachowuje oryginalny układ oraz czcionkę o stałej szerokości. Umożliwia on prezentację tekstu w takiej formie, w jakiej został wprowadzony, co jest szczególnie przydatne w kontekście kodu źródłowego, danych tabelarycznych lub innych elementów, gdzie zachowanie spacji, łamań linii i innych formatów jest istotne. Przykładem zastosowania znacznika <pre> może być wyświetlanie fragmentów kodu w dokumentacji HTML lub na stronach internetowych, gdzie istotne jest, aby użytkownik mógł widzieć dokładnie, jak kod wygląda, bez modyfikacji przestrzeni lub układu, co jest często problematyczne w przypadku standardowego tekstu HTML. Używanie tego znacznika jest zgodne z dobrymi praktykami w tworzeniu przejrzystych i czytelnych interfejsów, zwłaszcza w kontekście tworzenia stron internetowych o charakterze technicznym.

Pytanie 3

W CSS należy ustawić tło dokumentu na obrazek rys.png. Obrazek powinien się powtarzać tylko w poziomej osi. Jaką definicję powinien mieć selektor body?

A. {background-image: url("rys.png"); background-repeat: repeat-x;}

B. {background-image: url("rys.png"); background-repeat: round;}

C. {background-image: url("rys.png"); background-repeat: repeat;}

D. {background-image: url("rys.png"); background-repeat: repeat-y;}

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybrana odpowiedź {background-image: url("rys.png"); background-repeat: repeat-x;} jest poprawna, ponieważ precyzyjnie definiuje tło dokumentu jako obrazek 'rys.png', który ma się powtarzać wyłącznie w poziomie. W CSS, właściwość 'background-image' pozwala na ustawienie obrazu jako tła, a 'background-repeat' kontroluje, w jaki sposób tło się powtarza. Użycie wartości 'repeat-x' oznacza, że obrazek będzie powtarzany tylko w osi poziomej, co jest idealne dla wzorów, które powinny być rozciągnięte na całej szerokości ekranu, ale nie na wysokości. Przykładem zastosowania może być stworzenie tła z deseniem, które ma być widoczne w poziomie, np. paski lub linie, co jest powszechnie stosowane w projektowaniu stron internetowych. Zgodnie z dobrymi praktykami, warto również pamiętać, aby dostosować rozmiar obrazka do wymagań responsywności, aby zapewnić optymalne wyświetlanie na różnych urządzeniach.

Pytanie 4

Znacznik <ins> w HTML jest używany do wskazywania

A. cytowanego fragmentu tekstu

B. tekstu, który został usunięty

C. tekstu, który został dodany

D. tekstu, który został przeformatowany

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wiesz, znacznik <ins> w HTML to coś, co używamy, żeby pokazać tekst dodany w stosunku do poprzedniej wersji dokumentu. To mega przydatne, zwłaszcza kiedy edytujemy różne treści, bo od razu widać, co się zmieniło. Zastosowanie tego znacznika można znaleźć w różnych dokumentach, jak blogi czy umowy, gdzie ważne jest, żeby pokazać, co się zmieniło w treści. Zgodnie z tym, co mówią wytyczne W3C, używanie znaczników semantycznych, jak <ins>, sprzyja lepszej dostępności tekstów i ułatwia ich zrozumienie przez wyszukiwarki oraz technologie wspierające. Przykładowo, gdy robisz poprawki w dokumencie, właśnie dzięki <ins> możesz wyróżnić nowe informacje, co sprawi, że użytkownicy łatwiej ogarną, co się zmieniło. Dobrze jest też dodać odpowiedni styl CSS, żeby nadać tym elementom wyraźniejszy wygląd.

Pytanie 5

Jakie zasady dotyczące tworzenia sekcji w języku HTML są właściwe?

A. W sekcji <head> mogą się pojawić znaczniki <meta>, <title>, <link>

B. W sekcji <head> można ustalać szablon strony za pomocą znaczników <div>

C. W sekcji <head> nie wolno umieszczać kodu CSS, tylko odniesienie do pliku CSS

D. W sekcji <head> znajduje się sekcja <body>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybór odpowiedzi, że w części <head> mogą wystąpić znaczniki <meta>, <title>, <link> jest jak najbardziej poprawny. Część <head> dokumentu HTML jest kluczowa dla określenia właściwości oraz meta-informacji o stronie. Znacznik <meta> służy do przechowywania danych o stronie, takich jak opis, słowa kluczowe czy konfiguracja kodowania. Znacznik <title> definiuje tytuł strony, który jest wyświetlany na karcie przeglądarki oraz w wynikach wyszukiwania, co jest istotne dla SEO. Z kolei znacznik <link> pozwala na połączenie dokumentu HTML z zewnętrznymi arkuszami stylów CSS lub innymi zasobami. Stosowanie tych znaczników jest zgodne z obowiązującymi standardami W3C oraz najlepszymi praktykami w zakresie tworzenia stron internetowych. Dobrze zorganizowana sekcja <head> wpływa na efektywność i widoczność strony w wyszukiwarkach, a także na jej ogólną jakość. Przykładem użycia może być dodanie metadanych do strony internetowej, co pozwala na lepsze pozycjonowanie w wyszukiwarkach oraz ułatwia zarządzanie stylem poprzez odwołanie do pliku CSS.

Pytanie 6

Jakiego znacznika w języku HTML nie można użyć do wstawienia grafiki dynamicznej na stronę?

A. <strike>

B. <object>

C. style="margin-bottom: 0cm;"><img>

D. style="margin-bottom: 0cm;"><embed>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <strike> jest poprawna, ponieważ ten znacznik w HTML nie jest przeznaczony do umieszczania grafiki dynamicznej. Element <strike> służy do styli tekstu, oznaczając, że tekst jest skreślony. Nie ma on właściwości ani zdolności renderowania mediów, takich jak obrazy czy animacje. W praktyce, w przypadku potrzeby dodania grafiki dynamicznej, zaleca się używanie znaczników takich jak <img> do statycznych obrazów, <embed> lub <object> do multimediów, które mogą obejmować wideo lub interaktywne elementy. Standardy HTML5 definiują, że elementy te powinny być wykorzystywane do wstawiania różnorodnych formatów medialnych, co zapewnia lepszą dostępność i zgodność z przeglądarkami. Zrozumienie odpowiednich zastosowań tych znaczników jest kluczowe dla tworzenia semantycznych i funkcjonalnych stron internetowych, co jest podstawą dobrych praktyk w web designie.

Pytanie 7

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

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

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

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

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

A. B.

B. D.

C. A.

D. C.

Brak odpowiedzi na to pytanie.

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

Pytanie 8

W CSS zastosowano poniższe formatowanie. Kolorem czerwonym będzie wyświetlony

h1 i {
   color: red;
}

A. tylko tekst italic nagłówka pierwszego stopnia

B. cały tekst nagłówka pierwszego stopnia oraz tekst italic akapitu

C. cały tekst nagłówka pierwszego stopnia oraz wszelki tekst italic, niezależnie od lokalizacji na stronie

D. jedynie tekst italic we wszystkich poziomach nagłówków

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W stylach CSS selektor złożony h1 i oznacza, że formatowanie będzie stosowane tylko do elementów pochylonych i znajdujących się wewnątrz nagłówka pierwszego poziomu h1. W praktyce oznacza to, że taki zapis CSS zmienia kolor na czerwony tylko dla tekstu wewnątrz tagu <i> znajdującego się w <h1>. Selekcja złożona umożliwia precyzyjne określanie, które elementy są formatowane, co jest kluczowe w przypadku dużych i złożonych stron internetowych. Zrozumienie działania selektorów jest fundamentem efektywnego stylizowania dokumentów HTML. Pozwala to na zachowanie spójności wizualnej oraz lepszą kontrolę nad wyglądem strony. Dobór odpowiednich selektorów w CSS to również jedna z dobrych praktyk, które sprzyjają czytelności kodu oraz jego łatwiejszej konserwacji w przyszłości. Taki zapis pozwala na minimalizację konfliktów stylów, które mogą się pojawić przy bardziej ogólnych selektorach. Praktyczne użycie selektorów złożonych jest więc zalecane w celu uzyskania bardziej kontrolowanego i przewidywalnego wyglądu strony internetowej, co jest zgodne ze standardami webowymi promującymi semantyczne i uporządkowane kodowanie.

Pytanie 9

Aby poprawić wydajność strony z grafiką o wymiarach 2000 px na 760 px, konieczne jest zmniejszenie jej rozmiarów

A. za pomocą właściwości CSS, podając rozmiar w pikselach

B. w programie graficznym

C. za pomocą właściwości CSS, podając rozmiar w procentach

D. za pomocą atrybutów HTML

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź "w programie graficznym" jest prawidłowa, ponieważ zmniejszenie rozmiaru grafiki w sposób, który rzeczywiście wpływa na jej wielkość pliku oraz jakość wizualną, powinno być przeprowadzane w programie graficznym. Programy takie jak Adobe Photoshop, GIMP czy Canva umożliwiają precyzyjne dostosowanie wymiarów oraz kompresję grafiki, co pozwala na optymalizację jej do użytku w internecie. Przykładowo, zmieniając rozmiar grafiki do wymiarów 1000 px na 380 px i zapisując ją w odpowiednim formacie (np. JPEG lub PNG z odpowiednią jakością), można znacznie zmniejszyć wielkość pliku, co przyczyni się do szybszego ładowania strony. Ponadto, odpowiednia kompresja umożliwia zachowanie dobrego balansu między jakością a rozmiarem pliku, co jest istotne dla doświadczeń użytkowników. W branży internetowej stosuje się różne techniki optymalizacji grafiki, takie jak lazy loading czy formaty WebP, które wspierają szybkie ładowanie stron. Warto również zwrócić uwagę na znaczenie odpowiedniej rozdzielczości grafiki, aby uniknąć zniekształceń i zapewnić optymalną jakość wizualną.

Pytanie 10

Podaj nazwę Systemu Zarządzania Treścią, którego logo jest pokazane na dołączonym rysunku?

A. Joomla!

B. MediaWiki

C. WordPress

D. Drupal

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź Joomla! jest poprawna ponieważ logo przedstawione na rysunku jest oficjalnym znakiem identyfikacyjnym tego systemu zarządzania treścią CMS. Joomla! to jeden z najpopularniejszych systemów CMS używany do tworzenia stron internetowych oraz aplikacji. Dzięki swojej elastyczności i dużej liczbie dostępnych rozszerzeń Joomla! pozwala na tworzenie zarówno prostych stron wizytówkowych jak i zaawansowanych serwisów e-commerce. Główne zalety Joomla! to intuicyjny interfejs użytkownika który ułatwia zarządzanie treściami oraz silna społeczność użytkowników zapewniająca wsparcie techniczne i rozwój oprogramowania. Joomla! jest zgodna z wieloma standardami webowymi co czyni ją wszechstronnym narzędziem do wdrażania profesjonalnych projektów internetowych. Korzystanie z Joomla! umożliwia szybkie i efektywne tworzenie responsywnych stron które dobrze współdziałają na różnych urządzeniach mobilnych. Praktyczne zastosowanie Joomla! obejmuje tworzenie stron korporacyjnych portali społecznościowych oraz serwisów informacyjnych. Dzięki modulowej architekturze użytkownicy mogą łatwo dostosowywać funkcjonalność swoich stron do specyficznych potrzeb branżowych co jest zgodne z dobrymi praktykami projektowania zorientowanego na użytkownika. Platforma Joomla! obsługuje także wielojęzyczność i różne metody uwierzytelniania co czyni ją idealnym rozwiązaniem dla międzynarodowych projektów.

Pytanie 11

W celu uzyskania efektu widocznego na rysunku, w kodzie HTML, należy umieścić znacznik skrótu <abbr> z atrybutem

A. alt

B. title

C. dfn

D. name

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje, to jest prawidłowa odpowiedź. Znacznik <abbr> w HTML jest używany do określenia skrótu lub akronimu. Atrybut 'title' jest używany w połączeniu z tym znacznikiem, aby dostarczyć pełną formę skrótu, która jest wyświetlana, gdy użytkownik najedzie na skrót. Jest to zgodne ze standardami i dobrymi praktykami branżowymi, które zalecają ułatwianie zrozumienia treści dla wszystkich użytkowników, w tym tych z dysfunkcjami. Atrybut 'title' jest zatem przydatny, gdy skrót jest ryzykowny lub ma wiele znaczeń. Na przykład, skrót 'WHO' może oznaczać 'World Health Organization' lub 'Whois protocol' w zależności od kontekstu. Dlatego atrybut 'title' pomaga wyjaśnić zamierzone znaczenie.

Pytanie 12

Na ilustracji zaprezentowano koncepcję układu bloków strony internetowej. Przyjmując, że bloki są realizowane za pomocą znaczników sekcji, a szerokość jest określona tylko dla bloków 2, 3 oraz 4, ich stylowanie powinno uwzględniać właściwość

A. float: left dla wszystkich bloków

B. clear: both dla bloku 5 i float: left jedynie dla bloków 2, 3 oraz 4

C. float: left jedynie dla bloków 3 i 4 oraz clear: both dla bloku 2

D. clear: both dla wszystkich bloków

Odpowiedź jest prawidłowa, ponieważ wykorzystanie float: left dla bloków 2, 3 i 4 pozwala na ich ustawienie obok siebie w poziomie. Jest to klasyczna technika stosowana w CSS do tworzenia layoutów, gdzie elementy mają płynąć obok siebie. Definiując float: left, elementy zaczynają od lewej krawędzi rodzica i układają się w linii poziomej. Użycie clear: both dla bloku 5 zapewnia, że blok ten zacznie się poniżej pływających bloków 2, 3 i 4, a nie obok nich. Clear: both jest konieczne, aby zapewnić, że blok 5 nie zostanie zakłócony przez floating, co jest powszechną praktyką przy tworzeniu wielokolumnowych layoutów. Kiedy float jest używany bez clear, może prowadzić do overlapania elementów, co jest niepożądane w strukturze layoutu. Praktyczne zastosowanie tego podejścia obejmuje układy z nagłówkiem, treścią i stopką, gdzie nagłówek i stopka powinny być pełnej szerokości, a treść podzielona na kolumny obok siebie. To podejście jest zgodne z tradycyjnymi metodami budowania stron przed wprowadzeniem flexboxa i grida, gdzie float był jednym z podstawowych narzędzi do zarządzania układem strony. Współczesne dobre praktyki wciąż uznają jego istotność, zwłaszcza w kontekście starszych projektów utrzymywanych z biegiem czasu.

Pytanie 13

Aby ustawić marginesy wewnętrzne dla elementu, gdzie margines górny wynosi 50px, dolny 40px, prawy 20px oraz lewy 30px, należy zastosować składnię CSS

A. style="margin-bottom: 0cm;"> padding: 50px, 20px, 40px, 30px;

B. padding: 40px, 30px, 50px, 20px;

C. padding: 20px, 40px, 30px, 50px;

D. style="margin-bottom: 0cm;"> padding: 50px, 40px, 20px, 30px;

Odpowiedź style="margin-bottom: 0cm;"> padding: 50px, 20px, 40px, 30px; jest poprawna, ponieważ definiuje marginesy wewnętrzne dla elementu zgodnie z zamierzonymi wartościami. W CSS, właściwość 'padding' pozwala na ustawienie wewnętrznego odstępu dla wszystkich czterech krawędzi elementu. Kolejność wartości w 'padding' to: górny, prawy, dolny, lewy. W tym przypadku, ustalamy 'padding' jako 50px dla górnej krawędzi, 20px dla prawej, 40px dla dolnej oraz 30px dla lewej. Należy pamiętać, że 'margin' i 'padding' mają różne zastosowania; 'margin' odnosi się do zewnętrznych odstępów między elementami, podczas gdy 'padding' dotyczy wewnętrznych odstępów wewnątrz danego elementu. W praktyce, odpowiednie użycie 'padding' poprawia czytelność i estetykę strony. Dobrą praktyką jest również stosowanie jednostek względnych, takich jak 'em' lub 'rem', zamiast jednostek stałych, jak 'px', aby zwiększyć responsywność strony. Dodatkowo, stosowanie narzędzi takich jak CSS Reset czy Normalize.css pomaga w eliminacji domyślnych marginesów i paddingów przeglądarek, co zapewnia spójność wyświetlania.

Pytanie 14

Definicja stylu przedstawiona w języku CSS dotyczy odnośnika, który

A. ma wskaźnik myszy ustawiony nad nim

B. był już odwiedzany

C. jeszcze nie był odwiedzany

D. posiada niepoprawny adres URL

W języku CSS selektor a:visited odnosi się do linków, które użytkownik już odwiedził. To pseudo-klasa, która umożliwia projektantom stron internetowych kontrolowanie wyglądu linków po ich kliknięciu, co poprawia doświadczenia użytkownika i umożliwia łatwiejszą nawigację. W przykładzie a:visited{color:orange;} wszystkie odwiedzone linki zostaną pokolorowane na pomarańczowo, co wizualnie odróżnia je od nieodwiedzonych linków. To podejście jest zgodne z zasadami dostępności, które sugerują, aby odwiedzone linki były w jakiś sposób wyróżnione. Praktycznym zastosowaniem tej wiedzy jest tworzenie stron, które są bardziej przejrzyste i intuicyjne dla użytkowników. Dobre praktyki zalecają, by różnica między odwiedzonymi a nieodwiedzonymi linkami była subtelna, ale zauważalna. Ustawianie różnych kolorów dla tych stanów linków jest popularnym rozwiązaniem. Prawidłowe użycie pseudo-klasy :visited wspiera także budowanie stron responsywnych, które poprawiają UX i spełniają standardy nowoczesnego designu, jednocześnie biorąc pod uwagę kwestie związane z prywatnością użytkowników, ponieważ CSS nie pozwala na stylizowanie niektórych właściwości odwiedzonych linków.

Pytanie 15

Wskaż poprawne stwierdzenie dotyczące przedstawionego kodu HTML.
<video width="640" height="480" controls>
<source src="animacja.mp4" type="video/mp4">
</video>

A. Użytkownik nie będzie miał możliwości kontrolowania odtwarzania wideo.

B. Lokalizacja pliku jest nieprawidłowa, brak w niej ścieżki bezwzględnej.

C. Kod może nie działać w przeglądarkach, które nie obsługują HTML5.

D. Plik animacja.mp4 powinien mieć rozdzielczość 640x480 pikseli, aby był odtwarzany.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kod HTML przedstawiony w pytaniu wykorzystuje znacznik <video>, który jest elementem HTML5 pozwalającym na osadzanie filmów w dokumentach internetowych. W kontekście poprawnej odpowiedzi, kluczowym jest zrozumienie, że przeglądarki muszą obsługiwać HTML5, aby mogły w pełni funkcjonować z tym kodem. W przypadku starszych przeglądarek, które nie wspierają HTML5, element <video> może nie być wyświetlany lub nie będzie działał prawidłowo. Dlatego istotne jest, aby deweloperzy testowali swoje aplikacje w różnych środowiskach oraz aby korzystali z odpowiednich polyfilli dla starszych przeglądarek, które mogą poprawić ich funkcjonalność. Przykładowo, użycie biblioteki JavaScript takiej jak Video.js może pomóc w zapewnieniu wsparcia dla elementów wideo w szerszym zakresie przeglądarek. Dbałość o kompatybilność z różnymi wersjami przeglądarek to nie tylko kwestia estetyki, ale również użyteczności i dostępności aplikacji internetowych.

Pytanie 16

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

A. <td>

B. <tr>

C. <ul>

D. <th>

Brak odpowiedzi na to pytanie.

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

Pytanie 17

Który z języków skryptowych nie wykonuje operacji po stronie serwera?

A. PHP

B. ASP

C. Perl

D. CSS

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
CSS, czyli kaskadowe arkusze stylów, to język używany do stylizacji stron internetowych. Jego głównym celem jest określenie wyglądu elementów HTML, co obejmuje kolory, czcionki, rozmieszczenie oraz responsywność. CSS nie wykonuje zadań po stronie serwera, ponieważ działa po stronie klienta, co oznacza, że interpretacja i renderowanie stylów odbywa się w przeglądarkach internetowych użytkowników. Przykładem zastosowania CSS jest stylizacja przycisków, nagłówków czy układów stron, co pozwala na tworzenie atrakcyjnych wizualnie interfejsów użytkownika. Standardy CSS są regulowane przez W3C, a najnowsze wersje, takie jak CSS3, wprowadzają dodatkowe możliwości, takie jak animacje czy zaawansowane selektory. Dzięki CSS można również tworzyć responsywne strony internetowe, które dostosowują się do różnych rozmiarów ekranu, co jest istotne w dobie wzrostu użycia urządzeń mobilnych.

Pytanie 18

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

A. jedynie small, smaller, large, larger

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

C. wyłącznie small, medium, large

D. zaledwie big oraz small

Brak odpowiedzi na to pytanie.

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

Pytanie 19

Jakie znaczniki <header>, <article>, <section>, <footer> są typowe dla języka

A. style="margin-bottom: 0cm;">XHTML 1.1

B. style="margin-bottom: 0cm;">HTML 5

C. HTML 4.01 Transitional

D. style="margin-bottom: 0cm;">HTML 4.01 Strict

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znaczniki <header>, <article>, <section> oraz <footer> są częścią standardu HTML5, który wprowadza nowe semantyczne elementy, mające na celu poprawę struktury dokumentów HTML. Element <header> używany jest do definiowania nagłówków sekcji lub całej strony, co ułatwia nawigację i zrozumienie układu treści. <article> natomiast służy do oznaczania samodzielnych jednostek treści, które mogą być niezależnie dystrybuowane lub zrozumiane. <section> dzieli dokument na tematyczne sekcje, a <footer> zazwyczaj zawiera informacje o autorze, prawach autorskich czy linki do powiązanych materiałów. Stosowanie tych elementów zgodnie z ich przeznaczeniem sprzyja lepszej dostępności oraz optymalizacji SEO, ponieważ wyszukiwarki mogą lepiej interpretować strukturę strony. Przykładem zastosowania może być blog, w którym każdy post jest oznaczony jako <article>, co pozwala systemom wyszukiwania na łatwiejsze indeksowanie poszczególnych wpisów. Warto pamiętać, że HTML5 wspiera także inne aspekty nowoczesnego web designu, takie jak media, formularze i API, co czyni go standardem przyszłości.

Pytanie 20

Jaką rozdzielczość należy przyjąć, aby uzyskać proporcje obrazu 16:9, zakładając, że piksel ma formę kwadratu?

A. 1366 na 768 pikseli

B. 320 na 240 pikseli

C. 2560 na 2048 pikseli

D. 800 na 480 pikseli

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Proporcje obrazu 16:9 są standardem szerokokątnym, powszechnie stosowanym w telewizji, filmach oraz w grach komputerowych. Przy rozdzielczości 1366 na 768 pikseli, stosunek szerokości do wysokości wynosi 16 do 9, co oznacza, że dla każdego 16 pikseli szerokości przypada 9 pikseli wysokości. Technicznie, aby obliczyć proporcje obrazu, należy podzielić szerokość przez wysokość. W tym przypadku 1366/768 daje wartość równą około 1.77, co odpowiada proporcji 16:9. Takie rozdzielczości są często używane w laptopach oraz monitorach HD, co czyni je idealnym wyborem do zastosowań multimedialnych. Standard 16:9 stał się powszechnie akceptowanym formatem, co wpływa na kompatybilność treści wizualnych, umożliwiając ich odpowiednie wyświetlanie na różnych urządzeniach. Użycie tej rozdzielczości zapewnia również lepszą jakość obrazu w porównaniu z niższymi rozdzielczościami, co jest kluczowe w kontekście nowoczesnych technologii wyświetlania.

Pytanie 21

Na podstawie filmu wskaż, która cecha dodana do stylu CSS zamieni miejscami bloki aside i nav, pozostawiając w środku blok section?

A. aside {float: left; }

B. nav { float: right; }

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

D. nav { float: right; } section { float: right; }

W tym zadaniu kluczowe jest zrozumienie, jak naprawdę działa float, a nie tylko samo skojarzenie, że „left to lewo, right to prawo”. Wiele osób myśli, że wystarczy ustawić jeden element na lewo, drugi na prawo i wszystko magicznie się poukłada. W praktyce przeglądarka trzyma się bardzo konkretnych reguł: najpierw liczy kolejność elementów w HTML, potem dopiero stosuje float i układa je możliwie jak najwyżej i jak najbliżej odpowiedniej krawędzi. Jeśli nada się float tylko dla aside albo tylko dla nav, to zmienia się ich pozycja, ale układ trzech bloków nie spełni warunku z zadania: aside i nav nie zamienią się miejscami z pozostawieniem section w środku. Przykładowo, samo float: left na aside niczego nie „zamieni”, bo element i tak pojawia się jako pierwszy w kodzie, więc będzie u góry, tylko że „przyklejony” do lewej. Z kolei ustawienie nav na prawą stronę bez odpowiedniego floatowania section prowadzi do sytuacji, gdzie section nadal zachowuje się jak normalny blok, zwykle ląduje pod elementami pływającymi albo obok nich w sposób mało przewidywalny dla początkującego. Częsty błąd myślowy polega też na tym, że ktoś próbuje wszystkim elementom dać float: left, licząc na to, że przeglądarka „ułoży je po swojemu”. Wtedy jednak wszystkie te bloki ustawiają się w jednym kierunku, w kolejności z HTML, więc nie ma mowy o świadomym „zamienianiu miejsc”. Brak zrozumienia, że float wyjmuje element z normalnego przepływu i wpływa na to, jak kolejne elementy zawijają się wokół niego, prowadzi właśnie do takich błędnych odpowiedzi. Z mojego doświadczenia lepiej jest najpierw narysować sobie prosty schemat: w jakiej kolejności idą znaczniki i które z nich mają pływać w prawo, a które zostać w naturalnym układzie. Dopiero wtedy dobiera się konkretne deklaracje CSS. Takie myślenie przydaje się nie tylko przy float, ale też przy nauce flexboxa czy grida, gdzie kolejność w DOM i własności układu też grają ogromną rolę.

Pytanie 22

Który z elementów HTML stanowi blokowy znacznik?

A. span

B. p

C. strong

D. img

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <p> (paragraf) jest klasyfikowany jako element blokowy, co oznacza, że zajmuje całą szerokość dostępnego miejsca w swoim kontenerze i jest renderowany na nowej linii. Elementy blokowe są fundamentalne w układzie strony internetowej, ponieważ pozwalają na strukturalne grupowanie treści w sposób, który jest zrozumiały dla przeglądarek internetowych oraz dla użytkowników. Przykłady użycia elementu <p> obejmują tworzenie akapitów w artykułach, opisów produktów, czy innych dłuższych fragmentów tekstu. Dobre praktyki wskazują, że należy stosować <p> dla tekstu, który ma być wyświetlany jako samodzielny blok, co poprawia czytelność i dostępność treści. Ponadto, zgodnie z wytycznymi W3C, stosowanie znaczników blokowych, takich jak <p>, przyczynia się do lepszej struktury dokumentu HTML oraz ułatwia jego interpretację przez roboty wyszukiwarek, co jest kluczowe w kontekście SEO. Warto również zauważyć, że w CSS można łatwo stylizować znaczniki blokowe, co daje większą kontrolę nad wyglądem i układem strony.

Pytanie 23

Wskaż element, który definiuje pole edycyjne formularza zgodne z ilustracją

A. <input type="time" id="minutes" name="hours">

B. <input type="date" id=" minutes" name="hours">

C. <input type="number" id="mm" name="hh" min="0" max="24">

D. <input type="month" id="hh" name="mm">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłowy wybór to <input type="time" id="minutes" name="hours">, ponieważ dokładnie taki element HTML5 służy do wprowadzania godziny w formacie hh:mm, czyli tak jak na ilustracji. Atrybut type="time" mówi przeglądarce, że pole ma przyjmować tylko wartości czasu, bez daty, miesięcy czy liczb dowolnego typu. Zgodnie ze specyfikacją HTML Living Standard oraz HTML5, przeglądarka powinna wtedy wyświetlić natywne kontrolki do wyboru godziny (np. rozwijane listy, suwak, mały zegarek – zależy od systemu i przeglądarki). Dzięki temu użytkownik ma mniejsze ryzyko pomyłki, a walidacja odbywa się częściowo automatycznie. Z mojego doświadczenia warto korzystać z type="time" zawsze, gdy formularz dotyczy konkretnych godzin, np. godzina rozpoczęcia pracy, rezerwacja wizyty, planowanie spotkania online. Po stronie serwera (np. w PHP) to pole przychodzi jako tekst w formacie „HH:MM”, co jest łatwe do dalszego przetwarzania, parsowania do obiektu DateTime albo zapisu w bazie danych w typie TIME. Dobra praktyka jest też taka, żeby nazwy atrybutów id i name były semantyczne. W tym zadaniu nie ma to wpływu na poprawność odpowiedzi, ale w realnym projekcie lepiej byłoby użyć np. id="endTime" i name="end_time". Ułatwia to później pracę z JavaScriptem i po stronie backendu. Warto też pamiętać o dodaniu atrybutów min i max, jeśli chcemy ograniczyć zakres godzin (np. od 08:00 do 20:00), oraz pattern lub dodatkowej walidacji JS, jeśli mamy specyficzne wymagania. Mimo że ilustracja nie pokazuje tych szczegółów, sam mechanizm type="time" jest tu absolutnie kluczowy i zgodny z dobrymi praktykami front-endowymi.

Pytanie 24

Aby wykonać przycisk na stronę internetową zgodnie z wzorem, potrzebne jest skorzystanie z opcji w programie do grafiki rastrowej

A. selekcja eliptyczna

B. zniekształcenia i deformacja

C. zaokrąglenie lub wybór opcji prostokąt z zaokrąglonymi rogami

D. propagacja wartości

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Opcja zaokrąglenie lub wybranie opcji prostokąt z zaokrąglonymi rogami jest prawidłowa, ponieważ pozwala na stworzenie przycisku o nowoczesnym i estetycznym wyglądzie. W programach graficznych takich jak Adobe Photoshop lub GIMP opcja ta umożliwia użytkownikowi szybkie utworzenie prostokąta, którego rogi są zaokrąglone według określonego promienia. Jest to szczególnie przydatne w projektowaniu elementów interfejsu użytkownika, gdzie zaokrąglone rogi nadają wrażenie łagodności i nowoczesności. Stosowanie zaokrąglonych rogów jest zgodne z aktualnymi trendami UX/UI, które kładą nacisk na przyjazność i intuicyjność interfejsu. Praktyczne zastosowanie to nie tylko przyciski, ale również inne elementy graficzne takie jak pola tekstowe, karty czy okna dialogowe. Zaokrąglone rogi są również bardziej przyjazne dla oka, co jest istotne w kontekście użyteczności. Technicznie osiąga się to przez modyfikację kształtu obiektu wektorowego lub przez zastosowanie odpowiednich filtrów w grafice rastrowej. Warto też pamiętać o dostosowaniu promienia zaokrągleń do ogólnej estetyki projektu, co jest dobrą praktyką w projektowaniu graficznym.

Pytanie 25

Która z reguł dotyczących sekcji w języku HTML jest poprawna?

A. W sekcji <head> nie można umieszczać kodu CSS, jedynie odwołanie do pliku CSS

B. W sekcji <head> mogą znajdować się znaczniki <meta>, <title>, <link>

C. W sekcji <head> można zdefiniować szablon strony przy użyciu znaczników <div>

D. W sekcji <head> umieszcza się część <body>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybór tej odpowiedzi jest słuszny, ponieważ w części <head> dokumentu HTML mogą występować różne znaczniki, które są kluczowe dla poprawnej struktury i funkcjonalności strony. Znaczniki <meta> służą do dostarczania danych o stronie, takich jak opis, słowa kluczowe czy informacje o autorze, co jest istotne dla SEO (optymalizacji pod kątem wyszukiwarek). Znacznik <title> definiuje tytuł strony, który jest wyświetlany w zakładkach przeglądarki oraz w wynikach wyszukiwania, co ma wpływ na wrażenia użytkowników oraz ich decyzje. Z kolei znacznik <link> jest używany do odwoływania się do zewnętrznych arkuszy stylów CSS, co pozwala na oddzielenie struktury HTML od stylizacji. Dobre praktyki wskazują, że umieszczanie CSS w <head> zamiast w <body> poprawia czas ładowania strony oraz zapewnia, że style są stosowane jeszcze przed renderowaniem zawartości, co wpływa na lepszą użyteczność i wygląd strony. Dobrze zorganizowana sekcja <head> może przyczynić się do lepszego pozycjonowania w wyszukiwarkach oraz poprawy doświadczeń użytkowników.

Pytanie 26

Metainformacja "Description" zawarta w pliku HTML powinna zawierać ``` ```

A. nazwę aplikacji, w której stworzono stronę

B. informację o autorze strony

C. opis zawartości strony

D. listę kluczowych fraz używanych przez wyszukiwarki internetowe

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Metainformacja 'Description' zawarta w pliku HTML pełni kluczową rolę w optymalizacji stron internetowych pod kątem wyszukiwarek. Jest to krótki opis treści strony, który pomaga wyszukiwarkom zrozumieć, o czym jest dana strona. Wartościowy opis powinien być zwięzły, informacyjny i zachęcający do kliknięcia, ponieważ często pojawia się w wynikach wyszukiwania jako fragment tekstu, obok tytułu strony. Przykładem dobrze skonstruowanego opisu może być 'Dowiedz się, jak skutecznie zarządzać swoimi finansami osobistymi dzięki naszym praktycznym poradnikom i wskazówkom'. Taki opis nie tylko informuje użytkownika o zawartości strony, ale również zawiera słowa kluczowe, które mogą przyciągnąć uwagę. Zgodnie z wytycznymi Google, długość opisu powinna wynosić od 150 do 160 znaków, aby uniknąć obcięcia tekstu w wynikach wyszukiwania. Posiadanie dobrze napisanej metainformacji 'Description' jest więc niezbędne dla skutecznej strategii SEO i zwiększenia widoczności strony w internecie.

Pytanie 27

Jakie będzie działanie po naciśnięciu przycisku oznaczonego jako "niebieski", który uruchamia podany kod JavaScript?

<p id="para1">Przykładowy tekst</p><p> i skrypt</p>
<button onClick="changeColor('blue');">niebieski</button>

<script type="text/javascript">
function changeColor(newColor)
{
var elem = document.getElementById("para1");
elem.style.color = newColor;
}
</script>

A. Zmiana barwy przycisku na niebieski

B. Zmiana koloru tekstu "i skrypt" na niebieski

C. Zmiana koloru tekstu "Przykładowy tekst" na niebieski

D. Zmiana koloru tekstu "Przykładowy tekst i skrypt" na niebieski

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kod JavaScript przedstawiony w pytaniu definiuje funkcję changeColor która przyjmuje jeden argument newColor. Po wywołaniu funkcji przez kliknięcie przycisku funkcja ta używa metody document.getElementById aby pobrać element o identyfikatorze para1. Identyfikator ten jest przypisany do pierwszego elementu paragrafu zawierającego tekst Przykładowy tekst. Następnie w ramach tego elementu zmieniany jest kolor tekstu poprzez przypisanie newColor do właściwości style.color. W omawianym przypadku newColor przyjmuje wartość blue co oznacza że tekst Przykładowy tekst zmieni kolor na niebieski. Warto podkreślić że manipulacja DOM przy użyciu JavaScript jest powszechnie stosowaną techniką w tworzeniu dynamicznych interfejsów użytkownika. Używanie metod takich jak getElementById jest standardem ze względu na ich prostotę oraz efektywność w selekcji elementów HTML. W praktycznych zastosowaniach warto również pamiętać o zgodności ze standardami W3C oraz o możliwościach rozszerzenia za pomocą bibliotek takich jak jQuery które oferują jeszcze bardziej zaawansowane opcje manipulacji DOM.

Pytanie 28

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. zmniejszyć wymiary rysunku

B. zmienić format grafiki na CDR

C. zmienić proporcje szerokości do wysokości

D. zwiększyć rozdzielczość

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
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 29

Metainformacja "Description" umieszczona w pliku HTML powinna zawierać

<head>
    <meta name="Description" content="...">
</head>

A. nazwę aplikacji, za pomocą której stworzono stronę

B. opis treści znajdującej się na stronie

C. informację na temat autora strony

D. spis słów kluczowych, które są wykorzystywane przez wyszukiwarki internetowe

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Meta tag Description w HTML służy do dostarczenia krótkiego streszczenia zawartości strony internetowej Jest to jeden z kluczowych elementów optymalizacji pod kątem wyszukiwarek internetowych SEO który pomaga wyszukiwarkom i użytkownikom zrozumieć tematykę strony choć nie jest bezpośrednim czynnikiem rankingowym wyszukiwarek może wpływać na wskaźnik klikalności CTR w wynikach wyszukiwania Dzięki dobrze skonstruowanemu opisowi użytkownicy mogą szybko ocenić czy strona spełnia ich potrzeby co z kolei może zwiększyć ruch na stronie Praktyką branżową jest aby opis był zwięzły i zawierał najważniejsze informacje dotyczące zawartości strony zazwyczaj nie przekraczając 160 znaków Ponadto opis ten może być wyświetlany jako fragment w wynikach wyszukiwania co czyni go istotnym elementem strategii marketingowej strony Dobre praktyki obejmują stosowanie unikalnych i precyzyjnych opisów dla każdej podstrony co przyczynia się do lepszego zrozumienia i klasyfikacji strony przez wyszukiwarki

Pytanie 30

Jaki kolor reprezentuje zapis heksadecymalny #0000FF?

A. niebieski

B. zielony

C. czerwony

D. czarny

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kolor zapisany w notacji heksadecymalnej #0000FF oznacza niebieski. Notacja heksadecymalna używana jest w technologii webowej, szczególnie w CSS i HTML, do definiowania kolorów. W tej notacji każdy kolor składa się z sześciu znaków, gdzie pierwsze dwie cyfry reprezentują intensywność koloru czerwonego, drugie dwie zielonego, a ostatnie dwie niebieskiego. W przypadku #0000FF, '00' oznacza brak czerwonego, '00' brak zielonego, a 'FF' maksymalną intensywność niebieskiego. Dzięki temu systemowi można dokładnie określić kolory, co jest przydatne w projektowaniu stron internetowych oraz w grafice komputerowej. Zrozumienie tej notacji jest kluczowe dla każdego, kto pracuje w obszarze projektowania stron WWW, ponieważ pozwala na precyzyjne dostosowanie palet kolorów do estetyki projektu oraz zgodności z zasadami dostępności. Przykładowo, stosując odpowiednie kolory w notacji heksadecymalnej, możemy zapewnić lepszą czytelność tekstu na tle, co jest istotne w kontekście użyteczności stron internetowych.

Pytanie 31

Podano fragment kodu HTML, który nie przechodzi walidacji. Problemy z walidacją tego kodu będą dotyczyć:

<!DOCTYPE HTML>
<html>
<head>
    <title>Test</title>
</head>
<body>

<img src="obraz.gif">
<br>
<img src="obraz.gif">

</body>
</html>

A. braku zamknięcia znacznika <img>

B. braku zamknięcia znacznika <br>

C. duplikacji nazwy pliku graficznego

D. braku atrybutu alt w znaczniku <img>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W tym zadaniu kluczowy był brak atrybutu alt w znaczniku <img>. To jest jeden z tych wymagań, które na pierwszy rzut oka mogą wydawać się tylko formalnością, a jednak mają ogromne znaczenie, szczególnie z punktu widzenia dostępności. Standardy W3C (zwłaszcza WCAG) jasno mówią, że każdy obrazek w HTML powinien mieć opis alternatywny, czyli właśnie atrybut alt. Dzięki temu osoby korzystające z czytników ekranu albo mające wyłączone ładowanie grafik, czy nawet boty indeksujące wyszukiwarki, wiedzą, co obrazek przedstawia lub jaką pełni funkcję. Jeżeli alt jest pusty, to też jest dozwolone, ale wtedy obrazek powinien być czysto dekoracyjny, a tutaj ewidentnie nie ma żadnego alt. Przykład praktyczny: jeśli budujesz stronę dla urzędu, sklepu internetowego albo jakąkolwiek witrynę publiczną, brak alt przy obrazkach to poważny minus jakościowy i prawny. Nawet na prostych stronach wizytówkach może się to odbić negatywnie na SEO czy po prostu na wygodzie użytkownika. Ja kiedyś przez taki drobiazg nie przeszedłem walidacji projektu, więc uczulam na to każdą osobę, która zaczyna z HTML-em – zawsze pamiętaj o atrybucie alt. To nie jest coś, co można ignorować, bo przeglądarki tego nie „wybaczą” podczas walidacji, a użytkownicy mogą na tym stracić. Szczerze, moim zdaniem to jeden z tych podstawowych nawyków, które warto sobie wyrobić już na starcie.

Pytanie 32

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

A. clear: both;

B. table: left;

C. float: right;

D. float: left;

Właściwość float: right; w CSS to naprawdę fajne narzędzie, bo pozwala na umieszczenie rzeczy, jak na przykład obrazek, z prawej strony kontenera. Dzięki temu tekst ładnie opływa go z lewej strony, co jest super w responsywnych projektach. Często to widzę na stronach, gdzie musimy dostosować układ do różnych ekranów. Użycie float: right; zgodne jest z dobrymi praktykami CSS i daje nam większą kontrolę nad tym, jak wygląda strona. Przykładowo, w artykułach, gdzie obrazki są często po jednej stronie tekstu, float naprawdę ułatwia życie. Tylko pamiętaj, żeby używać clearfix, bo elementy pływające mogą czasami zamieszać w układzie. Dobrze jest też wiedzieć, że float zmienia sposób, w jaki przeglądarka wyświetla elementy, więc znajomość jego wpływu na model pudełkowy CSS jest bardzo ważna. Dzięki float: right; możemy ładnie oprawić tekst wokół obrazków w blogach, co sprawia, że wygląda to estetycznie i jest bardziej czytelne.

Pytanie 33

Zaprezentowano kod dla tabeli 3x2. Jaką modyfikację należy wprowadzić w drugim wierszu, aby tabela przypominała tę z obrazka, gdzie wiersz jest niewidoczny?

<table>
    <tr>
        <td style="border: solid 1px;">Komórka 1</td>
        <td style="border: solid 1px;">Komórka 2</td>
    </tr>
    <tr>
        <td style="border: solid 1px;">Komórka 3</td>
        <td style="border: solid 1px;">Komórka 4</td>
    </tr>
    <tr>
        <td style="border: solid 1px;">Komórka 5</td>
        <td style="border: solid 1px;">Komórka 6</td>
    </tr>
</table>

/efekt jest na obrazie - nie dołączam - nie analizuj/

A. <pre class="code-block"><tr <span class="code-text">style=</span><span class="code-string">"display: none"</span>></pre>

B. <pre class="code-block"><tr <span class="code-text">style=</span><span class="code-string">"display: table-cell"</span>></pre>

C. <pre class="code-block"><tr <span class="code-text">style=</span><span class="code-string">"visibility: hidden"</span>></pre>

D. <pre class="code-block"><tr <span class="code-text">style=</span><span class="code-string">"clear: none"</span>></pre>

Zastosowanie niewłaściwych właściwości CSS w tabelach może prowadzić do niezamierzonych efektów wizualnych i funkcjonalnych. 'Display: none' usunąłby wiersz z układu dokumentu, co skutkowałoby przesunięciem w górę wierszy poniżej. To podejście jest użyteczne, gdy element powinien być całkowicie usunięty z przestrzeni wizualnej i układu, ale nie spełniałoby celu przedstawionego w pytaniu, gdzie układ ma pozostać niezmieniony. Z kolei 'clear: none' jest właściwością CSS dotyczącą floatów, a nie widoczności, co oznacza, że nie miałoby żadnego wpływu na wyświetlanie wiersza tabeli. Jest to typowy błąd polegający na myleniu właściwości CSS w kontekście ukrywania elementów. Właściwość 'display: table-cell' jest stosowana dla elementów traktowanych jako komórki tabeli, co nie jest odpowiednie dla wierszy tabeli. Wybierając tę właściwość, użytkownik mógłby mylnie sądzić, że ma to wpływ na widoczność, podczas gdy w rzeczywistości zmienia jedynie sposób renderowania elementu. Prawidłowe rozumienie różnic między 'visibility' a 'display' jest kluczowe w tworzeniu przewidywalnych i stabilnych interfejsów użytkownika, co jest jednym z fundamentów dobrego projektowania front-endu. Wybór niewłaściwego podejścia do ukrywania elementów może prowadzić do niepożądanych zmian w interfejsie, co wpływa na użyteczność i estetykę strony.

Pytanie 34

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

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

B. zainstalowanie na kilku maszynach różnych przeglądarek i przeprowadzenie testu witryny

C. skorzystanie z narzędzia do walidacji kodu HTML

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Korzystanie z emulatora przeglądarek internetowych, takiego jak Browser Sandbox, to jedna z najskuteczniejszych metod na testowanie działania witryny w różnych przeglądarkach i ich wersjach. Emulatory umożliwiają symulację różnych środowisk przeglądarkowych bez potrzeby fizycznego instalowania wielu aplikacji na różnych urządzeniach. To znacząco przyspiesza proces testowania i pozwala na łatwe przełączanie się między wersjami przeglądarek. Przykładowo, za pomocą emulatora można szybko sprawdzić, jak strona zachowuje się w Chrome, Firefox czy Safari, co jest kluczowe dla zapewnienia spójnego doświadczenia użytkownika. Ponadto, korzystanie z takich narzędzi pozwala na testowanie z różnych systemów operacyjnych, co jest istotne w kontekście różnorodności urządzeń używanych przez użytkowników. Dobrze skonfigurowany emulator nie tylko pozwala na testowanie responsywności witryny, ale także na analizowanie błędów związanych z CSS czy JavaScript, co przekłada się na wyższą jakość końcowego produktu. Zastosowanie emulatorów jest zgodne z najlepszymi praktykami w zakresie tworzenia aplikacji webowych, które powinny być dostępne i funkcjonalne w różnych przeglądarkach.

Pytanie 35

Do jakich działań można wykorzystać program FileZilla?

A. debugowania skryptu na stronie.

B. walidacji strony internetowej.

C. kompilacji skryptu na stronie.

D. publikacji strony internetowej.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
FileZilla jest popularnym klientem FTP (File Transfer Protocol), który służy do przesyłania plików między lokalnym komputerem a serwerem. Publikacja strony internetowej polega na przesyłaniu plików HTML, CSS, JavaScript i innych zasobów związanych z witryną na serwer, aby były one dostępne w Internecie. Używając FileZilla, użytkownik może łatwo połączyć się z serwerem poprzez protokół FTP, co pozwala na wygodne zarządzanie plikami, ich przesyłanie oraz organizowanie folderów na serwerze. Przykładowo, po edytowaniu strony lokalnie na komputerze, można za pomocą FileZilla przesłać zmodyfikowane pliki na serwer w kilka kliknięć, co przyspiesza proces aktualizacji witryny. Zgodnie z dobrymi praktykami branżowymi, ważne jest także ustawienie odpowiednich uprawnień do plików oraz regularne tworzenie kopii zapasowych, co zwiększa bezpieczeństwo publikowanych treści. FileZilla obsługuje również protokoły SFTP i FTPS, które zapewniają dodatkowe warstwy bezpieczeństwa podczas transferu danych, co jest istotne w kontekście ochrony danych użytkowników i integracji z różnymi usługami hostingowymi.

Pytanie 36

Rozmiary ekranu w formacie 16:9 (zakładając, że piksel jest kwadratem) można osiągnąć przy rozdzielczości

A. 800 na 480 pikseli

B. 1366 na 768 pikseli

C. 2560 na 2048 pikseli

D. 320 na 240 pikseli

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 1366 na 768 pikseli jest poprawna, ponieważ proporcja szerokości do wysokości wynosi dokładnie 16:9. Aby to obliczyć, dzielimy szerokość przez wysokość: 1366 / 768 = 1,78, co jest bliskie wartości 1,77 (16:9). Proporcje 16:9 stały się standardem w telewizji wysokiej rozdzielczości oraz w produkcji wideo, co oznacza, że są szeroko stosowane w przemysłach związanych z mediami i technologią. Przykładem zastosowania tej rozdzielczości może być wyświetlanie filmów na nowoczesnych telewizorach, gdzie forma obrazu 16:9 pozwala na pełne wykorzystanie ekranu bez czarnych pasków po bokach. Stosując to w projektach multimedialnych, warto zawsze dążyć do zgodności z tymi standardami, aby zapewnić optymalne wrażenia wizualne dla użytkowników. Zrozumienie tych proporcji jest kluczowe dla profesjonalistów zajmujących się grafiką, filmem i projektowaniem UX/UI.

Pytanie 37

W HTML formularzu użyto elementu <input>. Pole, które się pojawi, ma pozwalać na wprowadzenie maksymalnie

<input type="password" size="30" maxlength="20">

A. 30 znaków, które nie będą widoczne w polu tekstowym

B. 20 znaków, które nie będą widoczne w polu tekstowym

C. 30 znaków, które będą widoczne podczas wpisywania

D. 20 znaków, które będą widoczne w trakcie wprowadzania

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <input type="password"> w HTML jest rzeczywiście super ważny. Umożliwia on użytkownikom wpisywanie haseł, a to, co najfajniejsze, to że znaki są ukryte, więc nikt nie zobaczy, co piszesz. Atrybut maxlength="20" jest tutaj pomocny, bo ogranicza liczbę znaków do 20, co jest praktyczne - zbyt długie hasła ciężko zapamiętać, a krótkie mogą być niebezpieczne. Natomiast size="30" to tylko kwestia szerokości pola, więc nie wpływa na ilość znaków, które można wpisać. Generalnie, dobrze jest trzymać się tych ograniczeń, bo to pomaga w projektowaniu formularzy i utrzymywaniu porządku w interfejsie. Z mojej perspektywy, znajomość tych atrybutów jest naprawdę przydatna przy tworzeniu stron, bo można lepiej zrozumieć, jak to wszystko działa.

Pytanie 38

W CSS zapis selektora p > i { color: red;} wskazuje, że kolorem czerwonym zostanie zdefiniowany

A. tylko ten tekst w znaczniku <p>, który posiada klasę o nazwie i

B. wszelki tekst w znaczniku <p> lub wszelki tekst w znaczniku <i>

C. wszelki tekst w znaczniku <p>, z wyjątkiem tych w znaczniku <i>

D. tylko ten tekst w znaczniku <i>, który znajduje się bezpośrednio wewnątrz znacznika <p>

Zapis selektora p > i w CSS oznacza, że styl zostanie zastosowany jedynie do znaczników <i>, które są bezpośrednimi dziećmi znacznika <p>. W praktyce oznacza to, że jeśli w dokumencie HTML mamy strukturę, gdzie znacznik <i> znajduje się bezpośrednio wewnątrz <p>, tekst w tym <i> zostanie sformatowany na czerwono. Takie podejście do stylizacji jest zgodne z zasadami kaskadowego arkusza stylów, gdzie selektory mogą precyzyjnie określać, które elementy mają być stylizowane. Użycie operatora > jest dobrym przykładem zastosowania selektorów potomków w CSS, co pozwala na bardziej precyzyjne i efektywne zarządzanie stylami. Dobrą praktyką jest unikanie nadmiernej hierarchii w selektorach, co może prowadzić do złożonych i trudnych do utrzymania arkuszy stylów. W związku z tym, zrozumienie działania selektorów jest kluczowe dla efektywnego korzystania z CSS.

Pytanie 39

Która z komórek tabeli została sformatowana przedstawionym stylem CSS zakładając, że pozostałe własności przyjmują wartości domyślne?

td {
  border: 1px solid black;
  padding: 15px;
  height: 40px;
  vertical-align: bottom;
}

dane w tabeli		dane w tabeli		dane w tabeli		dane w tabeli
Komórka 1		Komórka 2		Komórka 3		Komórka 4

A. Komórka 4.

B. Komórka 3.

C. Komórka 1.

D. Komórka 2.

Niestety, ta odpowiedź jest nieprawidłowa. Wybór jakiejkolwiek innej komórki oprócz komórki 3. oznacza niezrozumienie, jak działają style CSS w kontekście formatowania komórek tabeli. Obramowanie, padding, wysokość i wyrównanie tekstu to atrybuty CSS, które wpływają na wygląd komórki tabeli. Często błędem jest mylenie paddingu (wewnętrznego marginesu) z marginesem (zewnętrznym marginesem) lub niezrozumienie, jak działa wyrównanie tekstu. Warto pamiętać, że w CSS 'vertical-align: bottom' oznacza wyrównanie tekstu do dolnej krawędzi komórki. Wybór innej komórki, która nie spełnia podanych kryteriów, sugeruje, że nie zrozumiałeś prawidłowo tych konceptów. Radzę powtórzyć materiał dotyczący stylizacji komórek tabeli w CSS i spróbować ponownie. Pamiętaj, że kluczem do zrozumienia CSS jest praktyka, więc nie bój się eksperymentować z różnymi stylami!

Pytanie 40

Dokument HTML określa akapit oraz obrazek. Aby obrazek był wyświetlany przez przeglądarkę w tej samej linii co akapit po jego lewej stronie, należy w stylu CSS obrazka uwzględnić właściwość

A. style: left;

B. alt: left;

C. align: left;

D. float: left;

Odpowiedź "float: left;" jest naprawdę trafna. Ta właściwość w CSS sprawia, że elementy układają się obok siebie, co w tym przypadku oznacza, że rysunek wyląduje po lewej stronie akapitu. Jak użyjemy float, to rysunek 'przesuwa się' na lewo, a tekst z akapitu otacza go z prawej strony. To taki popularny sposób w webdesignie, który pozwala na ładniejsze połączenie obrazków z tekstem. Warto pamiętać, że czasem trzeba zastosować clearfix, zwłaszcza gdy mamy pływające elementy w większym układzie, żeby uniknąć problemów z rozmieszczeniem. Stosowanie float w CSS to dobra praktyka, bo pomaga zachować czytelność i estetykę tekstu. Na przykład, jeśli mamy sekcję artykułu z obrazem, który ilustruje omawiany temat, to zastosowanie float: left; sprawi, że treść będzie ładnie się układać i poprawi wrażenia użytkownika.

Rozpocznij nowy egzamin

Powrót do strony głównej