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 maja 2026 13:51
Data zakończenia: 13 maja 2026 14:10

Egzamin zdany!

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Ikona, która pojawia się przed adresem w oknie adresowym przeglądarki internetowej lub przy tytule aktywnej karty, nazywana jest

A. webicon.

B. favicon.

C. iConji.

D. emoticon.

Favicon to mała ikona, która reprezentuje stronę internetową i jest wyświetlana w przeglądarkach internetowych w polu adresowym oraz na kartach z otwartymi stronami. Jest to kluczowy element identyfikacji wizualnej witryny, który może wpływać na wrażenia użytkowników i postrzeganie marki. Favicony są zazwyczaj zapisane w formacie .ico, ale mogą również być w formatach .png, .gif, czy .jpg. Standardowo mają wymiary 16x16 pikseli lub 32x32 pikseli, co czyni je odpowiednimi do wyświetlania na różnych urządzeniach, w tym komputerach i smartfonach. Favicony są dodawane do kodu HTML strony za pomocą tagu <link rel="icon" href="url_do_faviconu" type="image/x-icon">, co pozwala przeglądarkom prawidłowo zidentyfikować i wyświetlić tę ikonę. Przykładem użycia faviconu mogą być popularne strony internetowe, takie jak Google czy Facebook, które wykorzystują swoje unikalne ikony w celu zwiększenia rozpoznawalności marki. Dobrze zaprojektowany favicon może wpłynąć na zwiększenie kliknięć w zakładki oraz poprawić nawigację użytkowników.

Pytanie 2

Na przedstawionej grafice znajduje się struktura sekcji dla witryny internetowej. Przyjmując, że blok5 nie ma przypisanej szerokości, a bloki są określone w dokumencie HTML w kolejności ich numeracji, jak powinno wyglądać zdefiniowanie opływania?

A. bloki 1, 2, 4 float: left; blok 3 float: right; blok 5 clear: both;

B. blok 1 float: left; bloki 2, 4 float: center; blok 3 float: right; blok 5 clear: both;

C. bloki 1, 2, 4 float: left; blok 3, 5 float: right;

D. bloki 1, 2, 3, 4 float: right; blok 5 clear: right;

Właściwe użycie float w CSS jest kluczowe do tworzenia układów stron. W pierwszej propozycji zastosowano float: left; dla bloków 1, 2, 4 oraz float: right; dla bloków 3 i 5, co jest niepoprawne, ponieważ blok 5 powinien być odseparowany od pozostałych poprzez clear: both;, aby zająć całą szerokość strony. W drugiej odpowiedzi, chociaż float: right; dla bloków 1, 2, 3, 4 może wydawać się poprawne dla niektórych stylów, blok 5 z clear: right; nie będzie działał, ponieważ nie uwzględnia float: left, które ma zastosowanie w układzie. Ostatnia odpowiedź używa float: center;, co jest nieprawidłowe, ponieważ w CSS nie istnieje taka właściwość. Elementy można centrować za pomocą innych metod, ale nie za pomocą float. Ponadto, przypisanie clear dla bloku 5 jest poprawne, ale pozostałe ustawienia float dla bloków są błędne i niezgodne z przedstawionym układem. Konsekwentne błędy często wynikają z braku zrozumienia, jak właściwości float i clear współdziałają w kontekście modelu pudełkowego w CSS.

Pytanie 3

W języku HTML, aby uzyskać efekt podobny do tego w przykładzie, trzeba użyć konstrukcji

A. <p><big>Duży tekst</big> zwykły tekst</p>

B. <p><big>Duży tekst</p> zwykły tekst

C. <p><strike>Duży tekst zwykły tekst</p>

D. <p><strike>Duży tekst</strike> zwykły tekst</p>

Odpowiedź jest prawidłowa, ponieważ w języku HTML, aby zwiększyć rozmiar czcionki dla części tekstu, można użyć znacznika <big>. Znacznik ten powoduje, że tekst wewnątrz jest wyświetlany w większym rozmiarze niż tekst otaczający. Jest to przydatne w sytuacjach, gdy chcemy wyróżnić część tekstu bez stosowania zaawansowanego stylu CSS. Chociaż <big> jest uznawany za przestarzały w nowoczesnym HTML, dla celów edukacyjnych i zgodności z starszymi dokumentami HTML wciąż może być stosowany. Praktyką zalecaną w aktualnych standardach jest używanie stylów CSS, np. poprzez przypisanie klasy lub bezpośrednie stylowanie in-line. Warto zaznaczyć, że stosowanie <big> nie jest zalecane w nowych projektach, ponieważ CSS oferuje większą elastyczność i kontrolę nad wyglądem tekstu. Niemniej jednak, znajomość takich znaczników jak <big> pomaga w zrozumieniu, jak rozwijał się HTML i jakie są różnice między starszymi a nowoczesnymi metodami formatowania tekstu.

Pytanie 4

Dla akapitu zdefiniowano styl CSS. Które właściwości stylu CSS poprawnie określają dla akapitu czcionkę: Arial; rozmiar czcionki: 16 pt; oraz styl czcionki: pochylenie?

A. p{font-family: Arial; font-size: 16pt; font-style: italic;}

B. p{font-style: Arial; size: 16px; font-weight: normal;}

C. p{font-family: Arial; font-size: 16px; font-variant: normal;}

D. p{font-style: Arial; font-size: 16pt; font-variant: normal;}

Jeśli chodzi o opisanie czcionki w CSS dla akapitu, to kluczowe są trzy właściwości. 'font-family' mówi nam, jaki krój czcionki wybieramy, w tym wypadku 'Arial', bo to popularna czcionka bezszeryfowa. Potem mamy 'font-size', czyli rozmiar czcionki, tutaj to '16pt'. To standardowy rozmiar, który dobrze wygląda w druku. Na końcu, 'font-style' ustawia styl czcionki, a użycie 'italic' sprawia, że tekst będzie w pochyłym stylu. Te trzy rzeczy są super ważne, żeby tekst na stronie wyglądał schludnie i czytelnie. W projektowaniu stron internetowych warto pamiętać, że dla druku lepsze są jednostki takie jak 'pt', a dla ekranów stosujemy 'px'. Spójność w stylizacji też jest kluczowa, bo dzięki temu tekst wygląda jednolicie na całej stronie. To naprawdę ważne, zwłaszcza gdy robimy coś w CSS, bo pozwala to na ładniejszy web design.

Pytanie 5

W CSS, aby określić typ czcionki, powinno się zastosować właściwość

A. font-face

B. font-size

C. font-style

D. font-family

Właściwość 'font-family' w CSS jest kluczowa dla określenia kroju czcionki, który ma być używany na stronie internetowej. Dzięki tej właściwości możemy wskazać jedną lub więcej czcionek, które będą stosowane dla danego elementu. Wartością może być nazwa konkretnej czcionki, na przykład 'Arial', lub rodzina czcionek, jak 'sans-serif'. Przykład użycia to: 'font-family: Arial, sans-serif;'. W przypadku braku dostępności danej czcionki, przeglądarka wybierze następną z listy, co pozwala na zapewnienie spójności i czytelności tekstu na różnych urządzeniach. Zgodnie z najlepszymi praktykami, zaleca się użycie kilku opcji czcionek, aby zapewnić lepszą dostępność. Warto również pamiętać, aby unikać stosowania zbyt wielu różnych krojów czcionek, co mogłoby wpływać negatywnie na estetykę i czytelność strony. Użycie 'font-family' w połączeniu z innymi właściwościami, takimi jak 'font-size' czy 'font-weight', pozwala na pełne dostosowanie wyglądu tekstu zgodnie z wymaganiami projektu.

Pytanie 6

Na stronie internetowej dodano grafikę w kodzie HTML. Co się stanie, jeśli plik rysunek.png nie zostanie odnaleziony przez przeglądarkę?

<img src="rysunek.png" alt="pejzaż">

A. wyświetli tekst "pejzaż" w miejscu grafiki

B. zademonstruje błąd wyświetlania strony w miejscu grafiki

C. nie pokaże strony internetowej

D. wstawi tekst "rysunek.png" zamiast grafiki

W HTML znacznik <img> jest używany do wstawiania obrazów na stronach. Ważne, żeby pamiętać o atrybucie src, który mówi przeglądarce, skąd ma wziąć obraz. A alt to taki tekst zapasowy, który wyświetli się, jeśli obrazek nie załaduje się z jakiegoś powodu. To istotne, bo ułatwia dostępność dla osób, które mogą mieć trudności z widzeniem. Na przykład, gdy plik rysunek.png się nie załaduje, to wyświetli się tekst z atrybutu alt - w tym przypadku słowo pejzaż. To jest zgodne z dobrymi praktykami, bo każdy powinien wiedzieć, co miało być na obrazku, nawet jeśli go nie widzi. To także pomaga wyszukiwarkom w indeksowaniu treści. A używanie atrybutu alt to rzecz, którą warto stosować, jeśli chcemy, żeby nasza strona była dostępna i przyjazna dla użytkowników. Przy tym, przypomina mi się, że to też jest zgodne z zasadami dostępności WCAG.

Pytanie 7

Aplikacja o nazwie FileZilla umożliwia

A. importowanie bazy danych do systemu CMS Joomla!

B. przeprowadzanie testów aplikacji

C. sprawdzanie poprawności plików HTML i CSS

D. publikację strony internetowej na zdalnym serwerze

FileZilla to popularny klient FTP (File Transfer Protocol), który umożliwia użytkownikom przesyłanie plików pomiędzy lokalnym komputerem a zdalnym serwerem. Głównym celem korzystania z FileZilla jest publikacja stron internetowych, co polega na załadowaniu plików HTML, CSS, obrazków oraz innych zasobów na serwer, gdzie strona będzie dostępna dla użytkowników w Internecie. Dzięki intuicyjnemu interfejsowi, użytkownicy mogą łatwo przeciągać i upuszczać pliki, co przyspiesza proces publikacji. FileZilla obsługuje różne protokoły, w tym FTP, FTPS oraz SFTP, co zapewnia bezpieczeństwo podczas transferu danych. Dobrą praktyką jest regularne aktualizowanie programu, aby korzystać z najnowszych funkcji i poprawek bezpieczeństwa. W kontekście publikacji stron internetowych, FileZilla stanowi kluczowe narzędzie dla web developerów, umożliwiając im szybkie i efektywne zarządzanie plikami na serwerach zdalnych. Używanie FileZilla wspiera standardy branżowe, takie jak bezpieczeństwo transferu danych oraz zdalne zarządzanie plikami, co jest niezbędne w profesjonalnym rozwoju stron internetowych.

Pytanie 8

W kodzie HTML 5, w celu walidacji wartości pola <input type="text"> za pomocą wyrażenia regularnego, należy użyć atrybutu

A. pattern

B. value

C. step

D. readonly

W tym pytaniu chodzi o konkretny mechanizm walidacji wbudowany w HTML5, a nie o ogólne właściwości pól formularza. Walidacja za pomocą wyrażeń regularnych jest w standardzie przypisana do jednego, ściśle określonego atrybutu – właśnie pattern. Inne atrybuty z listy pełnią zupełnie inne role i ich mylenie to dość typowy błąd przy nauce formularzy. Atrybut step jest używany do określania „kroku” dla wartości liczbowych lub dat, np. w input type="number" czy type="date". Pozwala zdefiniować, o ile ma się zwiększać lub zmniejszać wartość przy użyciu strzałek lub walidować, czy liczba jest wielokrotnością danego kroku. Przykład: step="0.5" przy liczbie zmiennoprzecinkowej. Nie ma on żadnego związku z wyrażeniami regularnymi ani ze zwykłym tekstem w type="text". value z kolei to po prostu wartość pola – początkowa (domyślna) lub aktualna, odczytywana i modyfikowana przez JavaScript lub wysyłana w formularzu. Ustawienie value nie waliduje danych, tylko je definiuje. Można wprawdzie ręcznie sprawdzać value w JS i dopasowywać je do regexa, ale to już logika skryptu, a nie działanie samego atrybutu w HTML. To pewnie częsty skrót myślowy: „wartość pola” vs. „sprawdzenie wartości pola”, ale przeglądarka sama z siebie nie waliduje na podstawie samego value. readonly natomiast blokuje możliwość edycji pola przez użytkownika, ale nadal wysyła jego wartość z formularzem. To przydatne, gdy chcemy coś pokazać, ale nie pozwolić na zmianę, np. wygenerowany identyfikator. Nie ma tu żadnej analizy treści, żadnego dopasowywania do wzorca – po prostu pole jest nieedytowalne. Czasem ktoś myśli: „skoro nie można tego zmienić, to jakby jest bezpieczne i zwalidowane”, ale to już bardziej kwestia logiki aplikacji, a nie mechanizmu walidacji. Mechanizm HTML5 do regexów jest jeden: pattern. Warto go łączyć z innymi atrybutami walidacyjnymi, jak required, minlength, maxlength, type, ale to właśnie pattern odpowiada za dopasowanie tekstu do określonego wzorca. Wszystko inne z tej listy pełni pomocnicze lub zupełnie inne funkcje i nie zastępuje typowej walidacji opartej o wyrażenia regularne.

Pytanie 9

Która z czynności NIE WPŁYNIE na wielkość zajmowanej pamięci pliku graficznego?

A. Zmiana rozdzielczości obrazu

B. Interpolacja

C. Skalowanie obrazu przy użyciu atrybutów HTML

D. Kompresja

Skalowanie obrazu za pomocą atrybutów HTML nie wpływa na rozmiar pliku graficznego, ponieważ ta operacja odbywa się po stronie klienta, w przeglądarce, a nie na samym pliku. Gdy obraz jest wyświetlany w HTML, atrybuty takie jak 'width' i 'height' mogą zmienić jego wizualny rozmiar na stronie, ale nie modyfikują samego pliku. W praktyce oznacza to, że niezależnie od tego, jak duży lub mały wyświetlany jest obraz, jego rzeczywisty rozmiar na dysku pozostaje niezmieniony. Dobrą praktyką w web designie jest stosowanie odpowiednich rozmiarów i formatów obrazów w zależności od kontekstu, co może poprawić szybkość ładowania strony i doświadczenie użytkownika. Warto również pamiętać, że zbyt duże obrazy mogą powodować dłuższy czas ładowania, co wpływa na SEO i oceny wydajności witryny. Dlatego zaleca się optymalizację obrazów przed ich dodaniem do strony, co jest bardziej efektywne niż poleganie na zmianie rozmiarów przez HTML.

Pytanie 10

W kodzie HTML zdefiniowano formularz, który wysyła dane do pliku formularz.php. Po naciśnięciu przycisku typu submit przeglądarka przechodzi do poniższego adresu:

../formularz.php?imie=Anna&nazwisko=Kowalska

Na podstawie podanego adresu można stwierdzić, że dane do pliku formularz.php zostały przesłane metodą:

A. SESSION

B. COOKIE

C. POST

D. GET

Wybrana przez ciebie odpowiedź jest nieprawidłowa. Wybrałeś metodę POST, COOKIE lub SESSION jako sposób przesyłania danych do pliku formularz.php, ale na podstawie widocznego adresu URL, który zawiera parametry przekazane po znaku zapytania (?), odpowiedź jest GET. Metoda POST jest również popularna w przesyłaniu danych, ale różni się od GET tym, że dane są przesyłane w ciele żądania, nie są widoczne w pasku adresu. COOKIE to mechanizm, który pozwala na przechowywanie danych na stronie klienta, nie jest to metoda przesyłania danych do serwera. SESSION to technika, która pozwala na przechowywanie informacji po stronie serwera, która jest powiązana z konkretnym użytkownikiem za pomocą identyfikatora sesji. Żadna z tych technik (POST, COOKIE, SESSION) nie powoduje, że parametry są widoczne w adresie URL, co jest charakterystyczne dla metody GET.

Pytanie 11

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

A. AIFF

B. SWF

C. SVG

D. PNG

Wybór formatów PNG, SWF i SVG jako odpowiedzi nie jest właściwy, ponieważ każdy z nich jest ściśle związany z publikacją grafiki lub animacji na stronach internetowych. PNG to format plików rastrowych, który zapewnia wysoką jakość obrazu, wspiera przezroczystość i kompresję bezstratną. Z tego powodu jest często wykorzystywany w projektowaniu stron internetowych, gdzie ważne jest zachowanie detali w grafice, a także w sytuacjach, gdy potrzebne są przezroczyste tła. Z kolei SWF jest to format, który był szeroko stosowany do tworzenia animacji, gier i interaktywnych aplikacji w środowisku Adobe Flash. Choć technologia Flash jest obecnie mniej popularna z powodu rozwoju HTML5, SWF wciąż ma swoje miejsce w historii publikacji multimedialnych. Natomiast SVG, jako format wektorowy, umożliwia tworzenie grafiki, która jest skalowalna i dostosowuje się do różnych rozmiarów ekranów, co czyni go idealnym do responsywnych designów. Wszystkie te formaty są kluczowe w kontekście tworzenia atrakcyjnych wizualnie i funkcjonalnych stron internetowych, dlatego nie mogą być uznane za błędne odpowiedzi w kontekście publikacji grafiki i animacji.

Pytanie 12

Aby przekształcić obraz z formatu JPEG do PNG bez utraty jakości, tak aby kolor biały w oryginalnym obrazie został zastąpiony przezroczystością w wersji docelowej, należy najpierw

A. dodać kanał alfa

B. usunięcie gumką wszystkich białych miejsc

C. załadować obraz do programu do edycji grafiki wektorowej

D. obniżyć rozdzielczość obrazu

Żeby zmienić obrazek z formatu JPEG na PNG i zachować przezroczystość tam, gdzie wcześniej był biały kolor, ważny krok to dodanie kanału alfa. To w zasadzie taka dodatkowa warstwa w obrazie, która mówi, które piksele mają być przezroczyste. JPEG nie umie obsługiwać przezroczystości, więc białe obszary będą się pokazywać jako nieprzezroczyste. Jak już dodasz ten kanał alfa, możesz ustawić przezroczystość dla białych pikseli, co pozwoli na ich ukrycie lub zamianę na przezroczystość w końcowym obrazku. Na przykład, w programach jak Adobe Photoshop można użyć narzędzia do zaznaczania kolorów, żeby wybrać wszystkie białe piksele i potem je usunąć, zostawiając tylko przezroczystość. W ten sposób dostajesz efekt, którego chcesz w obrazie PNG, co jest zgodne z dobrą praktyką w obróbce grafiki i pomaga utrzymać wysoką jakość obrazu bez żadnych strat.

Pytanie 13

Jakie kodowanie w języku HTML pozwala na sformatowanie paragrafu dla tekstu

 Tekst może być zaznaczony albo istotny dla autora

należy użyć polecenia?

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

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

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

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

Wybrana odpowiedź jest poprawna, ponieważ stosuje prawidłowe znaczniki HTML do formatowania tekstu. Użycie <mark> dla słowa 'zaznaczony' wskazuje, że jest to istotna informacja, podczas gdy <em> dla słowa 'istotny' podkreśla jego znaczenie w kontekście treści. Zgodnie z W3C i HTML5, <mark> jest używany do oznaczania części tekstu, która jest wyróżniona w kontekście przeszukiwanym lub istotnym. Oznaczenie tekstu jako <em> nie tylko wskazuje na akcent, ale również ma znaczenie semantyczne, ponieważ może wpłynąć na sposób, w jaki czytniki ekranu interpretują treść, co jest kluczowe dla dostępności. Przykładem zastosowania może być strona internetowa, na której chcemy wyróżnić ważne informacje lub kluczowe definicje, co zwiększa czytelność i funkcjonalność przekazu. Poprawne użycie znaczników HTML jest zgodne z dobrymi praktykami tworzenia stron internetowych, co sprzyja lepszej nawigacji i zrozumieniu tekstu przez użytkowników.

Pytanie 14

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

A. font-weight

B. font-style

C. text-decoration

D. text-style

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

Pytanie 15

Jakie oznaczenie powinno się zastosować, aby umieścić film na stronie internetowej?

A. <media>

B. <video>

C. <audio>

D. <movie>

Znacznik <video> jest właściwym elementem HTML używanym do osadzania filmów na stronach internetowych. Jest on częścią standardu HTML5, który wprowadził nowoczesne podejścia do multimediów w sieci. Umożliwia on nie tylko osadzanie wideo, ale także dostosowywanie jego odtwarzania, takie jak automatyczne odtwarzanie, powtarzanie oraz kontrolowanie głośności. Przykład użycia znacznika <video>: <video src='film.mp4' controls>Odtwarzacz wideo</video>. Warto również dodać atrybuty, takie jak 'controls', które dodają przyciski do odtwarzania, pauzowania i regulacji głośności, co znacząco poprawia użyteczność dla użytkowników. Dobrą praktyką jest również używanie atrybutu 'poster' do określenia miniatury, która będzie wyświetlana przed rozpoczęciem odtwarzania, co przyciąga uwagę i zwiększa estetykę strony. Znacznik <video> wspiera różne formaty plików, takie jak MP4, WebM i Ogg, co zapewnia szeroką kompatybilność z różnymi przeglądarkami internetowymi, co jest kluczowe w dzisiejszym zróżnicowanym środowisku online.

Pytanie 16

W HTML, aby utworzyć poziomą linię, należy zastosować znacznik

A. <br>

B. <hr>

C. <hl>

D. <line>

Aby zdefiniować poziomą linię w języku HTML, należy użyć znacznika <hr>. Ten znacznik jest standardowym elementem HTML, który reprezentuje wizualną separację pomiędzy różnymi sekcjami treści. Znacznik <hr> jest samodzielny, co oznacza, że nie wymaga znacznika zamykającego. Jest to element blokowy, co oznacza, że zajmuje całą szerokość swojego rodzica i tworzy odstęp w pionie. W kontekście standardów HTML, <hr> jest częścią struktury dokumentu i jest rekomendowany do użycia w sytuacjach, gdy trzeba oddzielić różne tematy lub sekcje treści. Na przykład, jeśli mamy artykuł podzielony na kilka części, możemy użyć <hr> do wizualnego oddzielenia tych części, co zwiększa czytelność. Można również zastosować style CSS, aby dostosować wygląd linii, takie jak kolor, grubość czy styl linii. Przykładowy kod HTML z użyciem <hr> może wyglądać następująco: <h1>Tytuł Artykułu</h1><p>Treść pierwszej sekcji.</p><hr><p>Treść drugiej sekcji.</p>

Pytanie 17

Poniżej zaprezentowano fragment kodu w języku HTML:
<ol>
<li>punkt 1</li>
<li>punkt 2</li>
<ul>
<li>podpunkt1</li>
<li>podpunkt2</li>
<li>podpunkt3</li>
</ul>
<li>punkt3</li>
</ol>

A. 1. punkt 1 2. punkt 2 podpunkt1 podpunkt2 podpunkt3 punkt3

B. 1. punkt 1 2. punkt 2 3. punkt3 podpunkt1 podpunkt2 podpunkt1

C. 1. punkt 1 2. punkt 2 podpunkt1 podpunkt2 podpunkt1 3. punkt3

D. punkt 1 punkt 2 podpunkt1 podpunkt2 podpunkt3 punkt3

Widzisz, w niektórych odpowiedziach pojawiły się błędy, które mogą wprowadzać zamieszanie. Na przykład, użycie <il> zamiast <ul> to spory błąd, bo w HTML nie mamy elementu <il>. To może spowodować problemy z wyświetlaniem strony w przeglądarkach. I w paru przypadkach z kolejnością podpunktów było nie tak – pamiętaj, że hierarchia jest ważna. Dobrze zdefiniowane listy powinny mieć swoje konteksty, czyli otaczać je tagami <ol> lub <ul>. Każdy błąd w tym zakresie może utrudnić nawigację po stronie, zwłaszcza dla osób z niepełnosprawnościami. Ogólnie rzecz biorąc, warto dbać o porządek w HTML, bo to jest kluczowe w tworzeniu stron, które są użyteczne i funkcjonalne.

Pytanie 18

Który z podanych kodów XHTML sformatuje tekst zgodnie z określonym schematem?

A. Odpowiedź B

B. Odpowiedź A

C. Odpowiedź D

D. Odpowiedź C

Poprawna odpowiedź D zawiera poprawne znaczniki XHTML i HTML, które umożliwiają formatowanie tekstu według wzoru. W pierwszym wierszu tekst Ala ma kota używa znacznika b do pogrubienia słowa kota, co jest zgodne ze standardami, ponieważ b jest szeroko stosowanym tagiem HTML do semantycznego pogrubienia tekstu. Następnie użyty jest znacznik br do wstawienia przerwy w linii, co sprawia, że kolejna część tekstu pojawia się w nowej linii, odzwierciedlając układ zaprezentowany na obrazku. W drugim wierszu tekst a kot ma Alę, znacznik i został użyty do pochylania słowa kot, co jest zgodne z praktykami formatowania tekstu, gdzie i oznacza kursywę. Zamknięcie całego tekstu w znacznikach p paragrafu zapewnia również odpowiedni odstęp i formatowanie, co jest zgodne z semantycznym i strukturalnym organizowaniem treści w dokumencie XHTML. Podejście to odzwierciedla dobre praktyki kodowania, w tym stosowanie właściwych znaczników dla odpowiednich stylów oraz zapewnienie kompatybilności z różnymi przeglądarkami.

Pytanie 19

Atrybut colspan służy do poziomego łączenia komórek tabeli, natomiast rowspan pozwala na łączenie ich w pionie. Którą z poniższych tabel ukazuje fragment kodu napisany w języku HTML?
<table border="1" cellspaing="0" cellpadding="10" >
<tr> <td rowspan="2"> </td> <td> </td> </tr>
<tr> <td> </td> </tr>
</table>

A. rys. D

B. rys. B

C. rys. C

D. rys. A

Zastosowanie atrybutu rowspan w HTML wymaga zrozumienia jak działa scalanie komórek w pionie co może prowadzić do pewnych nieporozumień w interpretacji wynikowego układu tabeli Błąd w rozumieniu funkcji rowspan może wynikać z mylnego przypisania skali poziomej do pionowej co wprowadza chaos w strukturze tabeli Jeśli zamiast rowspan użyto by colspan komórki byłyby łączone w poziomie co zmieniłoby całkowicie układ i wizualizację tabeli Niepoprawne rozumienie tego mechanizmu często skutkuje wyborem niewłaściwej odpowiedzi ponieważ kolumny z atrybutem rowspan są błędnie postrzegane jako poziome połączenia Dodatkowo brak świadomości że odstępy między komórkami oraz ich ramki mogą być konfigurowane wpływa na percepcję układu tabeli co może prowadzić do złego rozpoznania poprawnego rysunku W przypadku złego przypisania rowspan w tabeli możemy uzyskać niespójny układ co jest sprzeczne z dobrą praktyką projektowania interfejsów użytkownika gdzie spójność i czytelność są kluczowe Dlatego ważne jest aby dokładnie analizować kod i jego efekty na strukturę tabeli oraz stosować się do standardów HTML które zapewniają poprawność i czytelność danych w tabelach

Pytanie 20

Kolor, który ma odcień niebieski to kolor

A. #0000EE

B. #EE0000

C. #00EE00

D. #EE00EE

Kolor niebieski, który oznaczamy kodem #0000EE, to naprawdę ciekawa sprawa. W systemie hex to oznacza, że składowa niebieska (B) ma najwyższą możliwą wartość, czyli 238, a czerwony (R) i zielony (G) są na poziomie 0. To jest typowy sposób klasyfikacji kolorów w RGB, który jest super przydatny w grafice czy web designie. Niebieski świetnie nadaje się na tła stron czy różne elementy interfejsu, bo przyciąga wzrok i jest dość przejrzysty. Na przykład w CSS możemy napisać: `background-color: #0000EE;`. Fajnie jest znać te kody kolorów, bo ułatwia to komunikację w zespole i realizację pomysłów artystycznych.

Pytanie 21

Aby obraz w filmie zmieniał się gładko, liczba klatek (niezachodzących na siebie) w ciągu sekundy musi mieścić się przynajmniej w zakresie

A. 16 do 19 fps

B. 24 do 30 fps

C. 20 do 23 fps

D. 31 do 36 fps

Odpowiedź '24 do 30 fps' jest na miejscu, bo w tym zakresie klatki na sekundę zapewniają naprawdę płynny obraz w filmach. Standard to 24 fps, co uznaje się za minimalną liczbę klatek, aby widzowie widzieli ruch jako gładki, a nie poskakujący. W praktyce w telewizji oraz przy niektórych formatach wideo można spotkać się z 30 fps, co jeszcze bardziej poprawia wrażenia wizualne. Warto tu wspomnieć, że wiele produkcji, zwłaszcza animacji, trzyma się tych standardów. Na przykład, filmy animowane z 24 fps mają dobrą dynamikę, ale w transmisjach sportowych często korzysta się z 30 fps, żeby lepiej uchwycić szybko poruszające się obiekty. Ostatecznie, trzymanie się tych standardów w filmach i telewizji to klucz do dobrego odbioru wizualnego.

Pytanie 22

input[type=number] { background-color: Brown; }

Zapis tego selektora oznacza, że tło będzie miało brązowy kolor dla:

A. pól edycyjnych, w które użytkownik wprowadzi dowolną cyfrę

B. wszystkich typów pól edycyjnych

C. pól edycyjnych, które są typu numerycznego

D. wszystkich tekstów na stronie internetowej

Selekcja `input[type=number]` w CSS jest używana do stylizacji pól formularzy, które oczekują wartości numerycznych. Tło tych pól zostanie ustawione na kolor brązowy, co wpływa na ich wygląd i może poprawić doświadczenie użytkownika. Takie podejście jest zgodne z zasadami dostępności, ponieważ pozwala użytkownikom na natychmiastowe rozpoznanie, które pola są przeznaczone do wprowadzania cyfr. Przykładem zastosowania może być formularz zamówienia, w którym część pól ma określony typ, jak `number`, co ogranicza wprowadzanie do wartości liczbowych. Używając odpowiednich typów input, projektanci mogą tworzyć bardziej intuicyjne interfejsy, które redukują błędy użytkowników oraz poprawiają proces wypełniania formularzy. W tym kontekście warto również zwrócić uwagę na standardy W3C, które zalecają stosowanie typów input, aby zapewnić lepszą kompatybilność i funkcjonalność w różnych przeglądarkach i urządzeniach.

Pytanie 23

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; }

Poprawny selektor to tr:hover { background-color: Pink; }, bo dokładnie opisuje sytuację pokazaną na filmie: efekt pojawia się dopiero po najechaniu kursorem na cały wiersz tabeli. Pseudo-klasa :hover w CSS służy właśnie do definiowania stylów w momencie, gdy użytkownik „najeżdża” myszką na dany element. Jeśli więc chcemy, żeby podświetlał się cały rząd tabeli, logiczne i zgodne z dobrymi praktykami jest przypięcie efektu do znacznika tr, a nie do pojedynczych komórek. W praktyce taki zapis stosuje się bardzo często w interfejsach webowych: w panelach administracyjnych, listach zamówień, tabelach z uczniami, produktami, logami systemowymi itd. Dzięki temu użytkownik łatwiej śledzi, który wiersz właśnie ogląda. To niby detal, ale z punktu widzenia UX robi sporą różnicę. Z mojego doświadczenia to jeden z tych prostych trików CSS, które od razu poprawiają „odczuwalną” jakość strony. Ważne jest też to, że :hover jest częścią standardu CSS (opisane m.in. w specyfikacji CSS Selectors Level 3/4) i działa w praktycznie wszystkich współczesnych przeglądarkach. Nie trzeba do tego żadnego JavaScriptu, żadnych skomplikowanych skryptów – czysty CSS. Dobrą praktyką jest również używanie bardziej stonowanych kolorów niż Pink w prawdziwych projektach, np. #f5f5f5 albo lekki odcień niebieskiego, tak żeby kontrast był czytelny i nie męczył wzroku. Warto też pamiętać, że podobny mechanizm możesz zastosować na innych elementach: np. a:hover dla linków, button:hover dla przycisków czy nawet div:hover dla całych kafelków w layoutach. Kluczowe jest to, żeby pseudo-klasa :hover była przypięta dokładnie do tego elementu, który ma reagować na interakcję użytkownika.

Pytanie 24

W jaki sposób można w języku CSS ustawić takie stylizowanie tabeli, aby wiersz, na którym obecnie znajduje się kursor myszki, zmieniał kolor tła na szary?

A. tr:hover { background-color: gray; }

B. tr:hover { color: gray; }

C. tr:active { color: gray; }

D. tr:active { background-color: gray; }

Odpowiedź tr:hover { background-color: gray; } jest całkiem trafna. Używasz pseudoklasy :hover, co jest super standardowym podejściem do stylizacji elementów, gdy kursor najedzie na nie. W tabeli to tak działa, że cały wiersz zmienia kolor tła na szary, co znacznie poprawia czytelność i jakby cały interfejs staje się bardziej interaktywny. To jest przydatne w aplikacjach webowych, bo użytkownicy szybko rozumieją, na którym wierszu akurat są. Można jeszcze dodać inne efekty, na przykład zmienić kolor tekstu czy dodać jakies cień. Przykład to jakieś interaktywne tabele w systemach do zarządzania danymi, gdzie jak najeżdżasz na wiersze, to wyświetlają się dodatkowe info lub pozwalają je edytować. Pamiętaj też o dostępności – dobrze jest zadbać o kontrasty kolorystyczne, żeby osoby z dysfunkcjami wzroku mogły z tego korzystać.

Pytanie 25

Znaczniki HTML <strong> oraz <em>, które służą do wyróżniania istotności tekstu, odpowiadają pod względem formatowania znacznikom

A. <u> oraz <sup>

B. <i> oraz <mark>

C. <b> oraz <u>

D. <b> oraz <i>

Znacznik HTML <strong> jest używany do oznaczenia tekstu, który jest ważny, podczas gdy <em> służy do podkreślenia, że tekst powinien być akcentowany w kontekście. Odpowiednikami tych znaczników, pod względem formatowania, są <b> oraz <i>. Znacznik <b> stosuje się do wyróżnienia tekstu, nadając mu pogrubienie, co zazwyczaj oznacza, że tekst jest istotny. Z kolei <i> używamy do kursywy, co również może wskazywać na akcentowanie lub wyróżnienie pewnych słów, jednak w sposób bardziej subtelny niż przy pomocy pogrubienia. W praktyce, stosując <strong> oraz <em>, dbamy o to, aby nasza treść była bardziej dostępna dla użytkowników, zwłaszcza dla osób korzystających z technologii wspomagających, takich jak czytniki ekranu. Stosowanie znaczników semantycznych zgodnie z dobrymi praktykami zapewnia lepszą interpretację treści przez wyszukiwarki, co może wpływać na SEO. Warto również pamiętać, że pomimo że <b> i <i> mają swoje zastosowania, znacznie lepiej jest używać <strong> i <em> w kontekście semantycznym, aby poprawić zrozumienie treści przez maszyny i użytkowników.

Pytanie 26

Kod CSS można włączyć do dokumentu HTML, używając znacznika

A. <meta>

B. <style>

C. <body>

D. <head>

Odpowiedź <style> jest prawidłowa, ponieważ ten znacznik HTML jest dedykowany do osadzania kodu CSS wewnątrz dokumentu HTML. Znacznik <style> powinien być umieszczony w sekcji <head> dokumentu, co umożliwia przeglądarkom interpretację stylów przed renderowaniem treści strony. Dzięki temu można definiować różne reguły CSS, które modyfikują wygląd elementów HTML, co jest kluczowe w tworzeniu estetycznych i funkcjonalnych stron internetowych. Przykładowo, można użyć <style> do określenia koloru tła, rozmiaru czcionki czy marginesów. Ważne jest, aby stosować zasady dotyczące kaskadowości, ponieważ style zdefiniowane w <style> mają priorytet nad stylem zewnętrznym, jeśli są tak samo specyficzne. Dodatkowo, korzystanie z <style> jest zgodne z zasadami dobrych praktyk, takich jak unikanie nadmiarowego ładowania zewnętrznych plików CSS w przypadku prostych projekty, co przyspiesza czas ładowania strony.

Pytanie 27

Znacznik <pre> </pre> służy do prezentacji

A. treści polską czcionką

B. znaku wielokropka

C. znaku przekreślenia

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

Znacznik <pre> </pre> jest używany w HTML do wyświetlania tekstu w formacie preformatowanym, co oznacza, że zawartość wewnątrz tego znacznika jest wyświetlana czcionką o stałej szerokości, gdzie wszystkie białe znaki, w tym spacje i nowe linie, są zachowywane tak, jak zostały wpisane. To sprawia, że jest on niezwykle przydatny przy prezentacji kodu źródłowego, skryptów oraz innych danych, gdzie zachowanie dokładnego formatowania jest kluczowe. Przykładem może być kod HTML, JavaScript czy CSS, który można umieścić wewnątrz znacznika <pre> w celu poprawienia czytelności i umożliwienia użytkownikom łatwego skopiowania. Ponadto, znaczniki <pre> są często stosowane w dokumentacji technicznej, gdzie precyzyjne odwzorowanie formatowania jest istotne dla zrozumienia. Ważne jest również, aby zwrócić uwagę na to, że domyślnie tekst w elemencie <pre> nie jest łamany, co pozwala zachować jego oryginalny kształt i układ.

Pytanie 28

Metainformacja "Description" umieszczona w pliku HTML powinna zawierać

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

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

B. informację na temat autora strony

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

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

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 29

Narzędzie zaprezentowane na ilustracji służy do

A. walidacji stylów CSS

B. debugowania strony internetowej

C. sprawdzania zgodności witryny ze standardem HTML5

D. walidacji kodu HTML i XHTML

Narzędzie przedstawione na ilustracji to usługa walidacji CSS stworzona przez World Wide Web Consortium (W3C). Jego głównym celem jest sprawdzanie poprawności arkuszy stylów CSS pod kątem zgodności z obowiązującymi standardami. Walidacja CSS pozwala na identyfikację błędów składniowych oraz niepoprawnych wartości, co jest kluczowe dla zapewnienia spójności wyglądu strony w różnych przeglądarkach. Korzystanie z walidatora CSS jest częścią dobrych praktyk w procesie tworzenia stron internetowych, ponieważ poprawny kod CSS zwiększa dostępność i użyteczność serwisów. Praktycznym przykładem użycia tego narzędzia jest proces optymalizacji strony internetowej, gdzie walidator pomaga w eliminacji błędów, które mogą prowadzić do nieprzewidywalnego zachowania witryny. Dzięki walidacji możemy również upewnić się, że nasze arkusze stylów są zgodne z najnowszymi standardami, co jest istotne dla przyszłej kompatybilności serwisu.

Pytanie 30

Który z poniższych zapisów CSS zmieni tło bloku na odcień niebieskiego?

A. div {border-color:blue;}

B. div {background-color:blue;}

C. div {color:blue;}

D. div {shadow:blue;}

Zapis 'div {background-color:blue;}' jest jak najbardziej na miejscu. Właściwość 'background-color' jest kluczowa, bo ustawia kolor tła dla elementów blokowych w CSS. Kiedy używasz 'blue' jako wartości, to mówisz, że tło ma być niebieskie. Ta właściwość jest częścią tego całego systemu CSS, który decyduje, jak powinny wyglądać elementy HTML. Ustawienie koloru tła jest ważne, bo wpływa na wygląd strony i to, jak kontrastują ze sobą tekst i tło, co jest istotne, by strona była dostępna dla każdego. Jeśli chciałbyś zmienić kolor tła, możesz korzystać z różnych wartości, takich jak kody HEX (np. #0000FF) albo RGB (np. rgb(0, 0, 255)). Możesz to zobaczyć w praktyce, na przykład: <div style='background-color:blue;'>Treść</div>, co ustawi tło 'diva' na niebieskie.

Pytanie 31

Do jakich zadań można wykorzystać program FileZilla?

A. analizowania skryptu na stronie

B. sprawdzania poprawności strony internetowej

C. publikacji strony internetowej

D. kompilowania skryptu na stronie

FileZilla to popularny klient FTP (File Transfer Protocol), który umożliwia przesyłanie plików między lokalnym komputerem a serwerem internetowym. Jego głównym zastosowaniem jest publikacja stron internetowych, co oznacza, że dzięki FileZilla można łatwo przenieść pliki HTML, CSS, JavaScript oraz inne zasoby na serwer, gdzie strona stanie się dostępna w Internecie. Przykładowo, jeśli stworzyłeś stronę w lokalnym środowisku, FileZilla pozwala na połączenie się z serwerem docelowym, a następnie na przesłanie wszystkich niezbędnych plików. Dobre praktyki branżowe zalecają również zarządzanie wersjami i regularne aktualizacje witryn, a FileZilla wspiera te procesy, umożliwiając łatwe synchronizowanie lokalnych katalogów z zawartością serwera. Dodatkowo, FileZilla obsługuje różne protokoły, takie jak SFTP czy FTPS, co zwiększa bezpieczeństwo transferu danych. Właściwe korzystanie z tego narzędzia jest kluczowe dla zapewnienia prawidłowego działania witryn oraz ich efektywnej publikacji.

Pytanie 32

Elementarna animacja może być zapisana w formacie

A. PSD

B. TIFF

C. GIF

D. BMP

Format GIF (Graphics Interchange Format) jest powszechnie stosowany do tworzenia prostych animacji ze względu na swoją zdolność do kompresji obrazów i obsługi przez większość przeglądarek internetowych. GIF pozwala na zapisanie sekwencji obrazów w jednej pliku, co umożliwia ich wyświetlanie jako animacji. Standard GIF obsługuje maksymalnie 256 kolorów z palety, co czyni go idealnym do prostych grafik, takich jak ikony czy animacje internetowe. Dzięki metodzie kompresji Lempel-Ziv-Welch (LZW) możliwe jest zmniejszenie rozmiaru pliku bez utraty jakości, co jest kluczowe w kontekście transferu danych przez sieć. Przykłady zastosowania formatu GIF obejmują animowane banery reklamowe, emotikony oraz krótkie klipy wideo w formie GIF, które stały się popularne na platformach społecznościowych. Ponadto GIF wspiera przezroczystość i animacje w cyklu, co podnosi jego użyteczność w wielu aplikacjach multimedialnych. Z tego powodu GIF jest formatem, który oferuje zarówno funkcjonalność, jak i kompatybilność, co czyni go najlepszym wyborem dla prostych animacji.

Pytanie 33

Zapis koloru w formacie #ff00e0 jest równoważny reprezentacji

A. rgb(255, 0, 128)

B. rgb(f, 0, e0)

C. rgb(255, 0, 224)

D. rgb(ff, 0, e0)

Odpowiedź rgb(255, 0, 224) jest poprawna, ponieważ kolor zapisany w formacie szesnastkowym #ff00e0 odpowiada wartościom RGB, gdzie 'ff' oznacza maksymalną wartość czerwonego koloru (255), '00' oznacza zerową wartość zielonego koloru (0), a 'e0' odpowiada wartości niebieskiego koloru w systemie szesnastkowym, co daje 224 w systemie dziesiętnym. W praktyce oznacza to, że mamy do czynienia z kolorem różowym, z dominującym światłem czerwonym i niebieskim, co tworzy ciekawe odcienie. Taki sposób reprezentacji kolorów jest powszechnie stosowany w web designie i grafice komputerowej, co pozwala na łatwe i precyzyjne definiowanie kolorów w stylach CSS oraz HTML. Przykładowo, używanie kodów szesnastkowych do definiowania kolorów w kodzie CSS jest standardową praktyką, umożliwiającą spójną i estetyczną prezentację treści wizualnych na stronach internetowych.

Pytanie 34

Symbol, który pojawia się przed adresem w pasku adresowym przeglądarki internetowej lub przy tytule otwartej karty, określany jest mianem

A. webicon

B. favicon

C. iConji

D. emoticon

Favicon, czyli ikona ulubionej strony, to mały obrazek wyświetlany w przeglądarkach internetowych obok adresu URL, w zakładkach oraz na kartach przeglądarki. Favicon jest istotnym elementem identyfikacji wizualnej witryny, ponieważ pozwala użytkownikom na szybkie rozpoznawanie stron, które odwiedzają. Tworzenie faviconu wiąże się z określonymi standardami, ponieważ rozmiar pliku powinien wynosić 16x16 lub 32x32 pikseli. Można go zapisać w formacie .ico, .png, .gif, co zapewnia szeroką kompatybilność z różnymi przeglądarkami. Wdrożenie faviconu poprawia UX, zwiększa profesjonalizm strony i wpływa na jej rozpoznawalność. Dobrym przykładem zastosowania faviconu jest umieszczanie go na stronie głównej, co ułatwia zapamiętywanie marki oraz zwiększa szanse na powrót użytkowników do witryny. Właściwe przygotowanie faviconu oraz jego umiejscowienie w kodzie HTML (z wykorzystaniem tagu <link rel="icon" href="ścieżka_do_faviconu">) to dobrych praktyk, które warto stosować w każdej nowoczesnej aplikacji webowej.

Pytanie 35

W przedstawionej regule CSS h1{color: blue} co oznacza h1?

A. wartość

B. klasę

C. selektor

D. deklarację

W regule CSS h1{color: blue} termin h1 odnosi się do selektora, który jest używany do wybierania elementów HTML, a w tym przypadku oznacza wszystkie nagłówki pierwszego poziomu. Selekcje w CSS są kluczowym elementem stylizacji stron internetowych, ponieważ pozwalają na precyzyjne określenie, które elementy mają być stylizowane. Selekcja h1 odnosi się do wszystkich elementów <h1> w dokumencie HTML, co oznacza, że wszystkie nagłówki pierwszego poziomu zostaną stylizowane zgodnie z podaną regułą. Wartością kolorystyki, czyli blue, jest przypisana do właściwości CSS 'color', co skutkuje zmianą koloru tekstu nagłówka na niebieski. Zgodnie z W3C, CSS (Cascading Style Sheets) pozwala na oddzielenie treści od prezentacji, co zwiększa elastyczność i ułatwia zarządzanie stylem strony. Przykładem praktycznym może być strona internetowa, gdzie wszystkie nagłówki pierwszego poziomu są wyróżnione kolorem niebieskim, co przyciąga uwagę użytkowników i poprawia czytelność. Selekcja jest zatem podstawowym narzędziem w stylizacji, umożliwiającym aplikację reguł CSS do określonych elementów HTML.

Pytanie 36

Podczas sprawdzania poprawności dokumentu HTML5 wyświetlił się komunikat: "Error: Element head is missing a required instance of child element title". Co to oznacza w dokumencie?

A. nie zdefiniowano wymaganego atrybutu title w znaczniku <img>

B. element <title> nie jest konieczny

C. nie zdefiniowano elementu <title> w sekcji <head> dokumentu

D. element <title> nie został zakończony przez </title>

Element <title> jest kluczowym składnikiem sekcji <head> każdego dokumentu HTML5, ponieważ definiuje tytuł strony, który jest wyświetlany w pasku tytułowym przeglądarki oraz w wynikach wyszukiwania. Zgodnie z wytycznymi W3C, element <title> jest wymagany, co oznacza, że każda poprawna struktura dokumentu HTML5 musi go zawierać. Przykład poprawnej implementacji to: <head><title>Mój dokument</title></head>. Brak elementu <title> może prowadzić do niższej oceny SEO, ponieważ wyszukiwarki używają tego tytułu jako kluczowej informacji o zawartości strony. Dla deweloperów istotne jest, aby tytuł był krótki, ale zwięzły, dostarczający jasnych informacji o tematyce strony. Ponadto, dobrze skonstruowany tytuł może przyciągać użytkowników, co ma kluczowe znaczenie w kontekście UX i marketingu internetowego.

Pytanie 37

Dla strony internetowej stworzono grafikę rysunek.jpg o wymiarach: szerokość 200 px, wysokość 100 px. Jak można wyświetlić tę grafikę jako miniaturę – pomniejszoną z zachowaniem proporcji, używając znacznika?

A. <img src="rysunek.png">

B. <img src="rysunek.png" style="width: 50px">

C. <img src="rysunek.png" style="width: 25px; height:50px;">

D. <img src="rysunek.png" style="width: 25px; height:25px;">

No dobra, ta odpowiedź <img src="rysunek.png" style="width: 50px"> jest w porządku, bo ustawia szerokość grafiki na 50 pikseli. Dzięki temu zachowujemy proporcje oryginalnego rysunku, który ma rozmiar 200x100 pikseli. Jak zmniejszymy szerokość do 50 px, to automatycznie zmniejsza się też wysokość, więc dostajemy miniaturkę 50x25 px. To jest mega istotne, kiedy budujemy responsywne strony, które muszą się dobrze wyświetlać na różnych urządzeniach. Korzystanie z CSS do ogarniania wielkości obrazków to najlepsza praktyka w web devie, bo dzięki temu możemy elastycznie dopasować treści do różnych ekranów. No i nie zapominajmy o dostępności – zasady mówią, że zachowanie proporcji jest ważne, bo źle skompresowane lub rozciągnięte obrazy mogą sprawić problem osobom z ograniczeniami wzrokowymi.

Pytanie 38

W pliku CSS znajdują się poniższe style. Kiedy klikniemy na hiperłącze i wrócimy na stronę, jego kolor zmieni się na

a { color: Brown; }
a:link { color: Green; }
a:visited { color: Red; }
a:hover { color: Yellow; }

A. brązowy

B. czerwony

C. żółty

D. zielony

W stylach CSS dla hiperłączy istnieją różne pseudoklasy które określają ich wygląd w zależności od stanu. W tym przypadku kolor czerwony przypisany jest do pseudoklasy a:visited co oznacza że po odwiedzeniu i późniejszym powrocie na stronę hiperłącze przyjmie kolor czerwony. Pseudoklasa a:visited jest używana aby oznaczyć linki które użytkownik już odwiedził co jest przydatne w nawigacji i pozwala użytkownikom zidentyfikować które strony już odwiedzili. Dobre praktyki w projektowaniu stron internetowych zalecają użycie wyraźnych i kontrastujących kolorów aby użytkownicy mogli łatwo rozpoznać odwiedzone linki co poprawia doświadczenie użytkownika. Warto pamiętać że przeglądarki mają różne poziomy wsparcia dla pseudoklasy a:visited w kontekście stylizacji innych właściwości niż kolor co wynika z wymogów prywatności. Dlatego w standardowych przypadkach kolorowe oznaczenie linków przynosi pożądany efekt zapewniając zgodność z wytycznymi WCAG dotyczącymi dostępności stron internetowych. Bardzo ważne jest aby projektując strony internetowe dbać o klarowność i intuicyjność nawigacji co zwiększa satysfakcję z użytkowania serwisu.

Pytanie 39

Wskaż, które z poniższych zdań jest prawdziwe w odniesieniu do definicji stylu: ``````

A. Akapit będzie przekształcany na małe litery

B. Odnośnik będzie napisany czcionką o rozmiarze 14 punktów

C. Jest to styl zasięg lokalny

D. Zdefiniowano dwie klasy

Pierwsza odpowiedź sugeruje, że styl jest lokalny, ale tak naprawdę to nie jest do końca prawda. Definicje stylów w tym kodzie są globalne, więc nie możesz mówić o stylach lokalnych, które odnosiłyby się tylko do konkretnego elementu. Klasy w arkuszu stylów są dostępne w całym dokumencie, więc to są style globalne. Następna odpowiedź mówi, że akapit będzie transponowany na małe litery, co też nie jest prawdą, bo w CSS nie ma zdefiniowanej transformacji tekstu dla elementu P. Element A ma natomiast zastosowaną transformację, która zmienia tekst na małe litery, więc nie można tego przypisać do akapitu. Ostatnia błędna odpowiedź sugeruje, że odnośnik będzie miał czcionkę 14 punktów i to również jest mylne. W rzeczywistości odnośnik A ma czcionkę 16 punktów, co sprawia, że jest lepiej widoczny niż akapit. Wydaje mi się, że te błędne odpowiedzi wynikają z niepełnego zrozumienia, jak działają klasy CSS i jakie style można przypisać różnym elementom HTML.

Pytanie 40

W języku HTML, aby połączyć w pionie dwie sąsiadujące komórki w kolumnie tabeli, należy użyć atrybutu

A. cellpadding

B. rowspan

C. cellspacing

D. colspan

W kontekście scalania komórek w pionie w HTML, inne proponowane atrybuty są nieodpowiednie. Atrybut colspan służy do scalania komórek w poziomie, co oznacza, że pozwala na połączenie kilku komórek w jednym wierszu, co jest zupełnie inną operacją niż scalanie w pionie. Używanie colspan byłoby nieodpowiednie w sytuacji, gdy celem jest połączenie komórek w kolumnie. Atrybut cellpadding dotyczy natomiast przestrzeni wewnętrznej, określającej odstęp pomiędzy zawartością komórki a jej krawędziami. Jego zastosowanie nie wpływa na scalanie komórek, a jedynie na ich wygląd, co sprawia, że jest to zupełnie inny aspekt formatowania tabeli. Podobnie atrybut cellspacing, który jest używany do definiowania odstępów między komórkami tabeli, również nie ma zastosowania w procesie scalania komórek. Obydwa te atrybuty mogą być użyte do poprawy estetyki tabeli, ale nie wpływają na strukturę danych w sposób, który byłby wymagany do osiągnięcia pionowego scalania komórek. Użycie ich zamiast rowspan jest błędne i prowadzi do niepoprawnego zrozumienia struktury HTML oraz sposobu, w jaki tabele powinny być zbudowane.

Rozpocznij nowy egzamin

Powrót do strony głównej