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: 19 czerwca 2026 13:12
Data zakończenia: 19 czerwca 2026 13:24

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

W języku JavaScript należy uzyskać dostęp do elementu w pierwszym akapicie podanego kodu HTML. Jak można to zrobić za pomocą funkcji

<p>pierwszy paragraf</p>
<p>drugi paragraf</p>
<p>trzeci paragraf</p>
...

A. getElement('p');

B. getElementById('p1');

C. getElementByTagName('p')[0];

D. getElementByClassName('p.1')[0];

Wariant getElement('p') jest niepoprawny, ponieważ nie istnieje w JavaScript żadna funkcja o takiej nazwie. Odwoływanie się do elementów DOM w JavaScript wymaga stosowania precyzyjnych i zgodnych z dokumentacją metod, takich jak getElementById, getElementsByTagName czy querySelector. Kolejna opcja, getElementById('p1'), jest błędna w kontekście tego pytania, ponieważ getElementById wymaga podania unikalnego identyfikatora ID, który w tym przypadku nie został określony w kodzie HTML. Użycie tej metody odnosiłoby się do elementu posiadającego atrybut id równy 'p1', co nie pasuje do przedstawionego kodu. Z kolei getElementByClassName('p.1') jest niepoprawne z kilku powodów. Po pierwsze, funkcja ta szuka elementów na podstawie klasy, a w kodzie HTML nie ma klasy o nazwie 'p.1'. Po drugie, format 'p.1' sugeruje błędne użycie znaków, ponieważ kropka jest separatorem w nazwach klas, a nie ich częścią. Poprawne odwołanie do elementu pierwszego paragrafu wymaga zastosowania jednej z metod iterujących po elementach, jak getElementsByTagName, która zwraca listę elementów o danym tagu, a następnie użycia indeksowania, aby precyzyjnie wskazać pierwszy element tej listy. Zrozumienie tych różnic i odpowiednie stosowanie metod JavaScript jest kluczowe dla efektywnego zarządzania elementami DOM i tworzenia dynamicznych stron WWW. Zwracanie uwagi na poprawne identyfikatory, klasy i struktury metod to fundament przy pracy z JavaScript i DOM, który pozwala na uniknięcie wielu powszechnie popełnianych błędów.

Pytanie 2

W CSS, aby zmienić kolor tekstu dowolnego elementu HTML po najechaniu na niego myszą, należy wykorzystać pseudoklasę

A. :visited

B. :hover

C. :coursor

D. :active

:hover jest pseudoklasą wykorzystywaną w CSS do stylizacji elementów w momencie, gdy użytkownik na nie najedzie kursorem. To bardzo przydatne narzędzie, pozwalające na interaktywne zmiany wyglądu strony internetowej, co znacznie poprawia doświadczenia użytkownika. Przykładem zastosowania może być zmiana koloru tekstu linków. Można to osiągnąć, definiując odpowiednie reguły CSS, takie jak: `a:hover { color: red; }`, co spowoduje, że linki zmienią kolor na czerwony, gdy na nie najedziemy. Pseudoklasa :hover jest zgodna z W3C CSS, a jej zastosowanie w projektowaniu stron zapewnia lepszą dostępność i intuitwność interfejsu. Warto pamiętać, że efekty hover powinny być subtelne i dobrze przemyślane, aby nie odwracać uwagi od głównych treści strony, ale jednocześnie umożliwić użytkownikom szybkie zauważenie działań, które mogą podjąć.

Pytanie 3

W języku HTML zapis < spowoduje w przeglądarki wyświetlenie znaku

A. >

B. "

C. &

D. <

Znak < w HTML ma specjalne znaczenie, ponieważ jest używany do oznaczania początku znaczników, które są fundamentem struktury dokumentów HTML. Aby prawidłowo wyświetlić ten znak w przeglądarce, należy użyć encji HTML, która dla znaku mniejszości to <. Użycie encji pozwala na uniknięcie nieporozumień, ponieważ przeglądarka mogłaby zinterpretować znak < jako początek nowego znacznika. Przykładowo, aby wyświetlić tekst 'A < B' w HTML, kod powinien wyglądać następująco: A < B. Zgodnie z dokumentacją W3C, stosowanie encji jest kluczowe dla zachowania poprawności kodu. Dzięki temu użytkownicy mogą zobaczyć zamierzony tekst, zamiast nieprawidłowo interpretowanego oznaczenia. Warto również zauważyć, że istnieją inne encje, takie jak > dla znaku większości oraz & dla znaku ampersand, które również pełnią istotne funkcje w kontekście HTML. Poprawne użycie encji przyczynia się do lepszej dostępności i zobrazowania treści na stronach internetowych."

Pytanie 4

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

A. ma wskaźnik myszy ustawiony nad nim

B. jeszcze nie był odwiedzany

C. był już odwiedzany

D. posiada niepoprawny adres URL

Podczas analizy CSS ważne jest rozumienie, jak działają pseudo-klasy, które umożliwiają stylizację elementów w określonych stanach. Pseudo-klasa :hover odpowiada za stan, gdy kursor myszy znajduje się nad elementem, co pozwala na dynamiczne zmiany wyglądu, takie jak podświetlenie elementu. Jest to często używane do interaktywnych efektów w interfejsach użytkownika. Tymczasem :link dotyczy linków, które jeszcze nie zostały odwiedzone przez użytkownika. Wprawdzie pozwala to na odróżnienie ich od odwiedzonych linków, ale stylizacja :link nie może zmienić się po kliknięciu, co jest kluczowe dla zachowania dostępności. Błędny adres URL nie jest związany z żadną z tych pseudo-klas i nie można go zidentyfikować ani zmodyfikować za pomocą CSS, ponieważ zarządzanie adresami URL odbywa się na poziomie HTML i JavaScript. W kontekście tworzenia stron internetowych zrozumienie tych różnic jest kluczowe, ponieważ wpływa na sposób, w jaki użytkownicy wchodzą w interakcję z treścią. Błędy w rozumieniu tych mechanizmów prowadzą do niepoprawnej nawigacji i mogą negatywnie wpływać na doświadczenie użytkownika, co jest sprzeczne z dobrymi praktykami w projektowaniu interfejsów i UX. Ważne jest, aby projektować strony zgodnie ze standardami, które umożliwiają intuicyjne korzystanie i zapewniają, że użytkownicy łatwo mogą rozpoznać odwiedzone i nieodwiedzone linki, co jest kluczowe dla ich doświadczenia i nawigacji.

Pytanie 5

Którego znacznika użyć, aby umieścić na stronie animację Flash (.swf)?

<img>

<audio>

<object>

<video>

Animację Flash (plik .swf) osadza się na stronie znacznikiem <object> - to uniwersalny kontener na obiekty zewnętrzne obsługiwane przez wtyczki (kiedyś Flash Player), z parametrami podawanymi w <param>. Warto pamiętać, że Flash jest dziś technologią wycofaną i przeglądarki go nie wspierają - współcześnie animacje robi się w HTML5/CSS lub <canvas>. Mimo to formalnie poprawnym kontenerem dla .swf jest <object>.

Pytanie 6

Do czego służy reguła float: left; zastosowana do elementu blokowego?

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

B. do układania bloków jeden pod drugim

C. do wyrównania tekstu do lewej

D. do ustawienia bloku po lewej, by inne elementy go oblewały

float steruje opływaniem, a nie wyrównaniem tekstu (od tego jest text-align) ani układaniem bloków jeden pod drugim (to domyślne zachowanie). Nie dotyczy też wyrównywania komórek tabeli. float: left; ustawia blok po lewej, by inne elementy go oblewały.

Pytanie 7

Przedstawiono kod tabeli 3×2. Jaką modyfikację należy wprowadzić w drugim wierszu, aby tabela wyglądała jak na obrazie z niewidocznym wierszem?

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

Komórka 1	Komórka 2
Komórka 3	Komórka 4
Komórka 5	Komórka 6

A. <tr style="clear: none">

B. <tr style="display: none">

C. <tr style="display: table-cell">

D. <tr style="visibility: hidden">

Wybrana odpowiedź jest niepoprawna, ale nie martw się, to jest okazja do nauki. Jeśli chcesz ukryć element na stronie, ale zachować jego miejsce w układzie, powinieneś użyć właściwości CSS 'visibility: hidden'. Takie podejście jest zgodne z dobrymi praktykami w tworzeniu stron internetowych. Inne opcje, takie jak 'display: none', 'display: table-cell' i 'clear: none' nie są odpowiednie w tym kontekście. 'display: none' całkowicie usuwa element z układu strony, co powoduje przesunięcie pozostałych elementów, aby zapełnić puste miejsce. 'display: table-cell' jest właściwością, która pozwala elementowi zachowywać się jak komórka tabeli, co nie ma tutaj zastosowania, gdyż chcemy ukryć cały wiersz, a nie pojedynczą komórkę. 'clear: none' jest właściwością używaną do kontroli przepływu elementów w stosunku do elementów z lewej lub prawej strony, ale nie ma wpływu na ukrywanie elementów. Dobra praktyka polega na zrozumieniu i właściwym stosowaniu różnych właściwości CSS, aby uzyskać zamierzony efekt na stronie.

Pytanie 8

Który kod HTML poprawnie tworzy akapit, w którym jedno słowo jest wyróżnione znacznikiem , a inne oznaczone jako ważne , przy prawidłowym zamknięciu wszystkich znaczników?

<p>Tekst może być <mark>wyróżniony albo <i>istotny</i> dla autora</mark></p>

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

<p>Tekst może być <mark>wyróżniony</mark> albo <em>istotny dla autora</p>

<p>Tekst może być <mark>wyróżniony albo <em>istotny</em> dla autora</mark></p>

Pozostałe warianty zawierają błędy. W jednym  pozostaje niezamknięty (brak ) przed końcem akapitu. W dwóch innych  obejmuje zbyt duży fragment tekstu, zamiast wyróżnić jedno słowo, a w jednym z nich zamiast semantycznego  użyto czysto wizualnego . Poprawna jest tylko wersja, w której  i  obejmują właściwe słowa i są prawidłowo zamknięte.

Pytanie 9

Aby ustawić wewnętrzne marginesy dla elementu: margines górny 50px, dolny 40px, prawy 20px oraz lewy 30px, powinno się zastosować składnię CSS

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

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

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

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

Podane odpowiedzi niepoprawne wynikają z pomylenia kolejności, w jakiej wartości paddingu są interpretowane w CSS. Wartości paddingu są rozpoznawane w określonej sekwencji: najpierw górny, następnie prawy, dolny, a na końcu lewy. Dlatego, jeśli margines górny wynosi 50px, prawy 20px, dolny 40px i lewy 30px, to niektóre z przedstawionych opcji nie oddają tej kolejności. Użycie nieodpowiednich wartości skutkuje nieprzewidywalnym wyglądem elementów na stronie, co może prowadzić do problemów z układem oraz zaburzenia estetyki. W szczególności, niepoprawne zestawienie wartości może powodować, że odstępy będą nie tylko niewłaściwe, ale także mogą przyczynić się do trudności w interakcji użytkowników z elementami na stronie. Dodatkowo, błędy w stosowaniu paddingu mogą prowadzić do konfliktów z innymi stylami CSS, co jeszcze bardziej komplikuje proces projektowania. W praktyce, niepoprawne stosowanie kolejności wartości paddingu jest częstym błędem, który może być wynikiem braku zrozumienia konwencji CSS lub pośpiechu w implementacji. Kluczowe jest zrozumienie, że CSS jest oparty na ściśle określonych zasadach, a niewłaściwe stosowanie tych zasad może prowadzić do nieefektywnych rozwiązań projektowych.

Pytanie 10

W HTML, aby ustawić tytuł dokumentu na "Moja strona", który pojawi się na karcie przeglądarki internetowej, należy użyć zapisu

A. <head>Moja strona</head>

B. <meta name="title" content="Moja strona">

C. <meta title="Moja strona">

D. <title>Moja strona</title>

Element <title> w HTML jest naprawdę ważny, bo to właśnie on ustala, co zobaczysz na zakładce w przeglądarce. Powinien być umieszczony w sekcji <head>, co jest zgodne z tym, co mówi W3C. Poprawny zapis wygląda tak: <title>Moja strona</title>, co sprawia, że "Moja strona" będzie się pokazywać jako tytuł w przeglądarce. Tytuł strony ma spore znaczenie dla SEO, bo wpływa na to, jak strona jest pozycjonowana w wynikach wyszukiwania. Warto, żeby tytuł był krótki, ale jednocześnie zawierał istotne informacje, a najlepiej, żeby nie miał więcej niż 60 znaków, żeby się nie obcinał w wynikach. Fajnie też umieścić w tytule kluczowe słowa, które opisują, o czym jest strona, bo to może zwiększyć jej atrakcyjność i CTR. Dobrze skonstruowany tytuł to też lepsza dostępność, bo ułatwia użytkownikom poruszanie się i orientowanie w otwartych zakładkach.

Pytanie 11

Dla którego akapitu zastosowano przedstawioną właściwość stylu CSS?

A. Akapit 3

B. Akapit 4

C. Akapit 1

D. Akapit 2

Wybrana przez Ciebie odpowiedź jest nieprawidłowa. Właściwość CSS 'border-radius: 20%;' nie została zastosowana do akapitu, który wybrałeś. Wskazuje na to fakt, że rogi akapitu są prostokątne, a nie zaokrąglone. Zaokrąglenie rogów jest efektem działania tej właściwości CSS. Warto pamiętać, że 'border-radius' to ważna właściwość, która daje możliwość manipulowania kształtem elementów HTML. Można za jej pomocą tworzyć różne efekty estetyczne, takie jak zaokrąglone rogi, elipsy czy okręgi. Jednak jej użycie powinno być zawsze przemyślane i dostosowane do ogólnego stylu strony. W przeciwnym razie, niewłaściwe użycie tej właściwości może zaburzyć harmonię projektu. Pamiętaj, że rozumienie i umiejętność zastosowania różnych właściwości CSS jest kluczem do tworzenia atrakcyjnych i funkcjonalnych stron internetowych.

Pytanie 12

Która jednostka CSS jest WZGLĘDNA i zależy od rozmiaru czcionki?

px

in

em

pt

Jednostka em jest WZGLĘDNA - liczona od rozmiaru czcionki elementu (np. 2em to dwukrotność bieżącego rozmiaru pisma). Dzięki temu wymiary skalują się razem z tekstem. Dlatego jednostką względną jest em.

Pytanie 13

W CSS zapis w postaci

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

spowoduje, że kolor czerwony zostanie zastosowany do

A. pierwszej litery nagłówka w drugim stopniu

B. pierwszej litery nagłówka w pierwszym stopniu

C. tekstu nagłówka w pierwszym stopniu

D. pierwszej linii akapitu

Jak coś nie wyszło, to ważne jest, żeby wiedzieć, że pseudoelement :first-letter tylko stylizuje pierwszą literę danego elementu, a nie inne części tekstu. Więc jak ktoś mówi, że czerwony kolor ma dotyczyć pierwszej linii paragrafu czy nagłówka drugiego stopnia, to jest błędne. Często nowi w CSS mylą, jak działają pseudoelementy i co mogą zrobić. :first-letter działa tylko w kontekście bloku, w którym jest użyty, a tu chodzi o h1. Dlatego kolor czerwony nie będzie dotyczyć tekstu w innych elementach jak p czy h2. Mówiąc szczerze, takie spekulacje mogą prowadzić do nieporozumień, co może być frustrujące, jak się pracuje z CSS. Fajnie jest czytać dokumentację i po prostu zrozumieć, gdzie dany pseudoelement działa. I pamiętaj, że stylizacja w CSS polega na hierarchii i kontekście, więc styl przypisany do jednego elementu nie zadziała automatycznie na inne, chyba że to jasno zapiszesz w regułach CSS. To ogarniecie jest mega ważne, by dobrze używać CSS przy projektowaniu stron.

Pytanie 14

Który z elementów jest opcjonalny w kodzie HTML5 i jego pominięcie nie spowoduje wygenerowania błędu lub ostrzeżenia walidatora HTML?

A. <html lang="pl">

B. <!DOCTYPE html>

C. <meta name="keywords" content="">

D. <title>Tytuł strony</title>

Poprawnie – właśnie znacznik meta z atrybutem name="keywords" jest w HTML5 całkowicie opcjonalny i jego brak nie powoduje żadnych błędów walidacji. Ten element był kiedyś używany głównie do pozycjonowania stron w wyszukiwarkach, ale w aktualnych wytycznych SEO praktycznie wszystkie większe wyszukiwarki (Google, Bing itd.) ignorują meta keywords. Z punktu widzenia specyfikacji HTML5 jest to zwykły, opcjonalny metatag: możesz go użyć, ale w żaden sposób nie jest wymagany do poprawnej struktury dokumentu. Validator W3C nie zgłasza ostrzeżeń, jeśli go nie ma, bo nie jest to element strukturalny, tylko dodatkowa informacja opisowa.

W praktyce, w nowoczesnych projektach webowych, meta name="keywords" często się po prostu pomija. Dużo ważniejsze są inne meta tagi, np. meta charset, meta name="viewport" dla responsywności czy meta name="description", która jest używana w wynikach wyszukiwania. Możesz mieć całkowicie poprawny, walidujący się dokument HTML5 zaczynający się od <!DOCTYPE html>, z elementem html z atrybutem lang, poprawnie zdefiniowaną sekcją head z tytułem strony i bez ani jednego meta keywords – i to jest jak najbardziej zgodne ze standardem.

Moim zdaniem dobrze jest znać historię tego znacznika: kiedyś nauczyciele i różne stare kursy mocno go promowały, dlatego wciąż pojawia się w kodzie. Ale w aktualnych projektach lepiej skupić się na semantycznym HTML, dostępności (ARIA, poprawne nagłówki), porządnych opisach w meta description i na poprawnej strukturze dokumentu. Meta keywords możesz traktować jako ciekawostkę z dawnych czasów, a nie obowiązkowy element kodu.

Pytanie 15

W zaprezentowanej części formularza HTML znajduje się pole, które można określić jako?

<input type="password" name="pole">

A. domyślnie posiada wpisany tekst "pole".

B. ukrywa wprowadzone znaki.

C. wyświetla wprowadzone znaki.

D. pozwala na wprowadzanie jedynie wartości liczbowych.

Wybrana przez ciebie odpowiedź jest niepoprawna. Możesz myśleć, że pole input ma domyślny tekst 'pole', ale zapomniałeś, że atrybut 'value', który to robi, nie występuje w tym kodzie. Poza tym, nie ma żadnych danych wskazujących, że to pole przyjmuje tylko liczby. Zazwyczaj, używa się atrybutu 'type' z wartością 'number', ale tutaj jest ustawiony na 'password'. Gdy mówisz, że pole pokazuje wprowadzone znaki, to też nie jest prawda. Jak mamy 'type' ustawione na 'password', to wszystko jest ukryte, żeby użytkownik był bezpieczny. Takie pomyłki to najczęściej efekt braku zrozumienia różnych atrybutów w HTML. Ważne, żeby ogarnąć, że atrybut 'type' mówi, jakie dane można wprowadzać, a różne wartości mają różne skutki.

Pytanie 16

W języku HTML aby zdefiniować słowa kluczowe strony, należy użyć zapisu

A. <meta keywords = "psy, koty, gryzonie">

B. <meta name = "keywords" content = "psy, koty, gryzonie">

C. <meta name = "keywords" = "psy, koty, gryzonie">

D. <meta name = "description" content = "psy, koty, gryzonie">

Poprawna odpowiedź to <meta name = "keywords" content = "psy, koty, gryzonie">, ponieważ jest to właściwy sposób definiowania słów kluczowych w sekcji <head> dokumentu HTML. Element <meta> służy do dostarczania metadanych o stronie internetowej, a atrybut 'name' określa, jakie informacje są zawarte w danym elemencie. W przypadku 'keywords', atrybut 'content' z kolei zawiera listę słów kluczowych, które są związane z treścią strony. Chociaż znaczenie słów kluczowych w SEO zmienia się, wciąż są one używane przez niektóre wyszukiwarki do kategoryzowania zawartości strony. Przykładowo, jeśli strona dotyczy zwierząt domowych, użycie fraz takich jak 'psy', 'koty', czy 'gryzonie' w atrybucie 'content' może pomóc w poprawie widoczności w wynikach wyszukiwania. Dobrą praktyką jest, aby słowa kluczowe były specyficzne, związane z tematyką strony i nie przekraczały rozsądnej liczby, aby nie wprowadzać w błąd algorytmy wyszukiwarek. Używanie odpowiednich metatagów to kluczowy element optymalizacji SEO.

Pytanie 17

Którego symbolu używa się w CSS do zdefiniowania selektora KLASY?

A. * (gwiazdka)

B. : (dwukropek)

C. # (krzyżyk)

D. . (kropka)

Pozostałe symbole pełnią inne role. Krzyżyk # wskazuje selektor IDENTYFIKATORA (unikalnego w obrębie strony). Dwukropek : rozpoczyna pseudoklasę (np. :hover), a gwiazdka * to selektor uniwersalny obejmujący wszystkie elementy. Klasę oznacza kropka.

Pytanie 18

Który z poniższych znaczników wchodzi w skład sekcji <head> dokumentu HTML?

A.

B. <section>

C. <img>

D. <title>

<title> jest jednym z kluczowych znaczników w sekcji <head> dokumentu HTML. Odpowiada za definiowanie tytułu strony, który jest wyświetlany w pasku tytułu przeglądarki oraz w wynikach wyszukiwania. Tytuł jest istotnym elementem SEO, ponieważ informuje zarówno użytkowników, jak i wyszukiwarki o tematyce strony. Przykład użycia znacznika <title>: <head><title>Moja Strona Internetowa</title></head>. Należy pamiętać, że tytuł powinien być zwięzły, ale jednocześnie opisowy, zazwyczaj nie powinien przekraczać 60 znaków. W kontekście standardów, HTML5, który jest obecnie najnowszą wersją HTML, wciąż podkreśla znaczenie znacznika <title> jako fundamentalnego dla struktury dokumentu. Odpowiedni tytuł nie tylko poprawia doświadczenia użytkowników, ale również zwiększa widoczność strony w wynikach wyszukiwania, dlatego jego prawidłowe użycie ma kluczowe znaczenie w web designie i marketingu internetowym.

Pytanie 19

Aby osiągnąć efekt przedstawiony na ilustracji, w kodzie HTML należy zastosować znacznik skrótu <abbr> z atrybutem

A. dfn

B. name

C. alt

D. title

Znacznik <abbr> w HTML służy do opisywania skrótów i akronimów. Atrybut title jest kluczowy, ponieważ dostarcza rozwinięcie skrótu jako podpowiedź tekstową, która pojawia się, gdy użytkownik najedzie kursorem na element. Jest to zgodne z dobrymi praktykami dostępności, umożliwiając użytkownikom lepsze zrozumienie treści. Przykładowo, kod <abbr title='inżynier'>inz.</abbr> spowoduje, że po najechaniu kursorem na skrót 'inz.', pojawi się rozwinięcie 'inżynier'. Takie podejście jest szczególnie istotne w przypadku dokumentów technicznych czy naukowych, gdzie użycie skrótów jest powszechne a pełne rozwinięcie może być niezbędne dla pełnego zrozumienia treści. Atrybut title jest również używany w innych znacznikach HTML, np. <img> do opisania obrazów, co wzbogaca semantykę strony. Zastosowanie <abbr> z atrybutem title wspiera również działanie technologii wspomagających, takich jak czytniki ekranowe, które mogą odczytać pełne rozwinięcie skrótu, podnosząc poziom dostępności strony.

Pytanie 20

Na przedstawionym obrazie widać wynik formatowania przy użyciu styli CSS oraz kod HTML, który go generuje. Przy założeniu, że marginesy wewnętrzne wynoszą 50 px, a zewnętrzne 20 px, jak wygląda styl CSS dla tego obrazu?

A. Rys. D

B. Rys. A

C. Rys. C

D. Rys. B

Poprawna odpowiedź, Rys. C, przedstawia styl CSS, który prawidłowo definiuje marginesy i marginesy wewnętrzne obrazu. W tym przypadku margines wewnętrzny wynosi 50px, a zewnętrzny 20px, co jest zgodne z wymaganiami zawartymi w pytaniu. Kod CSS zawiera solidną linię graniczną o wartości 4px w kolorze czarnym, co jest dobrze praktykowane w projektowaniu stron internetowych, ponieważ solidna linia jest bardziej widoczna i profesjonalna niż linia przerywana. Kolor tła teal zapewnia atrakcyjny kontrast. Zastosowanie właściwego marginesu i marginesu wewnętrznego jest kluczowe w tworzeniu responsywnych układów, które są teraz standardem w branży. Poprawne ustawienie tych parametrów zapewnia estetyczny wygląd oraz prawidłowe rozmieszczenie elementów na stronie. Praktyczne zastosowanie tej wiedzy obejmuje projektowanie layoutów w CSS Grid czy Flexbox, gdzie marginesy i marginesy wewnętrzne pełnią kluczową rolę w zarządzaniu przestrzenią elementów. Właściwe wykorzystanie tych stylów wspiera tworzenie stron zgodnych ze standardami W3C, co jest fundamentem profesjonalnego web developmentu.

Pytanie 21

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

A. Odpowiedź A

B. Odpowiedź C

C. Odpowiedź B

D. Odpowiedź D

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

Pytanie 22

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

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

B. aside {float: left; }

C. nav { float: right; }

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 23

Który z atrybutów obrazu jest niezbędny w znaczniku

<img src="nowa_lektura.jpg" ...>

aby ułatwić korzystanie ze strony użytkownikom z niepełnosprawnością narządu wzroku?

A. "height="42" width="42"

B. align="middle"

C. alt="technik informatyk"

D. usemap="#lekturamap"

W tym zadaniu chodziło o dostępność stron WWW dla osób z niepełnosprawnością narządu wzroku, czyli o to, jak strona współpracuje z czytnikami ekranu i innymi technologiami asystującymi. Wiele osób intuicyjnie skupia się na wizualnych właściwościach obrazka, takich jak wyrównanie, rozmiar czy mapy odsyłaczy, bo to widać od razu w przeglądarce. Problem w tym, że dla użytkownika niewidomego te wizualne parametry nie mają większego znaczenia – dla niego liczy się opis i funkcja elementu, którą czytnik ekranu potrafi odczytać. Atrybut align="middle" dotyczy tylko sposobu wyrównania obrazu na stronie. Kiedyś był częściej używany w starym HTML, dziś jest w zasadzie przestarzały i zgodnie z dobrymi praktykami powinno się go zastępować stylami CSS. Nie wnosi on żadnej informacji semantycznej, niczego nie opisuje, jedynie zmienia położenie elementu na ekranie. Czytnik ekranu nie zyska z niego żadnej treści, którą mógłby przekazać użytkownikowi. Atrybut usemap="..." służy do powiązania obrazu z tzw. mapą odsyłaczy, czyli zdefiniowanymi obszarami klikanymi na grafice. To jest technicznie ciekawa funkcja, ale znowu – ona nie opisuje, co jest na obrazku ani jaką ten obraz pełni rolę. Bez poprawnego tekstu alternatywnego taka mapa może być wręcz trudniejsza do obsługi dla osoby korzystającej z klawiatury i czytnika, bo ma wiele aktywnych pól, ale brak kontekstu. Rozmiar obrazu, ustawiany przez height="..." i width="...", wpływa tylko na sposób wyświetlania w przeglądarce: ile pikseli ma mieć szerokość i wysokość. Z mojego doświadczenia wielu uczniów myśli, że skoro obraz będzie większy lub mniejszy, to może będzie „czytelniejszy”, a więc jakby bardziej dostępny. Dla osoby, która nie widzi, nie ma to żadnego znaczenia – czytnik ekranu nie odczytuje rozmiarów obrazu jako opisu. Takie myślenie jest typowym błędem: mylimy komfort wizualny użytkownika widzącego z dostępnością dla użytkownika niewidomego. Kluczowe w dostępności jest dostarczenie równoważnej informacji w formie tekstu, a nie tylko ładne ustawienie grafiki. W standardach WCAG i zaleceniach W3C jednoznacznie podkreśla się, że każdy istotny obraz powinien mieć odpowiedni atrybut alt. Pozostałe atrybuty, choć czasem przydatne w projektowaniu layoutu lub nawigacji graficznej, nie zastąpią tekstu alternatywnego. Dlatego, kiedy myślisz o użytkownikach z niepełnosprawnością wzroku, najpierw zadbaj o sensowny alt, a dopiero potem o wyrównanie, rozmiar czy bardziej zaawansowane funkcje grafiki.

Pytanie 24

Którą właściwością CSS ustawia się kolor tła elementu (np. strony)?

bgcolor

text-background

background-color

color

Kolor tła elementu ustawia w CSS właściwość background-color, np. body { background-color: #f0f0f0; }. Można podać nazwę koloru, zapis szesnastkowy lub funkcję rgb. To nowoczesny, zgodny ze standardem sposób - w przeciwieństwie do dawnego atrybutu HTML bgcolor. Dlatego tło ustawia background-color.

Pytanie 25

W CSS zapis

a[target="_blank"] {color: yellow;}

spowoduje, że tekst linków przybierze kolor żółty.

A. linków, które otwierają się w tej samej karcie.

B. linków, które otwierają się w nowej karcie.

C. wszystkich linków.

D. treści akapitu.

Odpowiedzi sugerujące, że kolor żółty dotyczy 'wszystkich odnośników', 'tekstu paragrafu' lub 'odnośników, które otwierają się w tej samej karcie' są błędne z kilku powodów. Po pierwsze, selektor CSS 'a[target="_blank"]' jest specyficzny dla odnośników, które otwierają się w nowej karcie, a więc nie obejmuje on wszystkich odnośników. Każdy odnośnik zdefiniowany w HTML jako <a> może mieć różne cele, a atrybut 'target' odgrywa kluczową rolę w tym, jak te odnośniki są obsługiwane przez przeglądarkę. Po drugie, nie istnieje możliwość, aby tekst paragrafu był objęty tym selektorem, ponieważ jest on dedykowany wyłącznie linkom. Warto pamiętać, że CSS służy do stylizacji elementów HTML, a nie do zachowania ich struktury semantycznej. Kolejną nieprawidłową koncepcją jest to, że kolor tekstu dotyczy odnośników otwierających się w tej samej karcie, ponieważ żaden z tych odnośników nie ma przypisanego atrybutu 'target="_blank"'. W praktyce, ważne jest, aby dobrze rozumieć selektory CSS oraz ich zastosowanie, co pozwoli na bardziej precyzyjne projektowanie interfejsów użytkownika oraz zapewnienie lepszej użyteczności i dostępności stron internetowych.

Pytanie 26

Stronę internetową zapisano w języku XHTML. Który z kodów stanowi implementację przedstawionego fragmentu strony, jeżeli żadne style CSS nie zostały zdefiniowane?

Początki HTML

W 1980 fizyk Tim Berners-Lee, pracownik CERN,
stworzył prototyp hipertekstowego systemu informacyjnego – ENQUIRE

<b>Początki HTML</b>
<p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył
<b>prototyp hipertekstowego systemu informacyjnego – <i>ENQUIRE</i></b></p>

<h1>Początki HTML</h1>
<p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył
<b>prototyp hipertekstowego systemu informacyjnego – <i>ENQUIRE</i></b></p>

<b>Początki HTML</b>
<p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<hr /> stworzył
<b>prototyp hipertekstowego systemu informacyjnego – <i>ENQUIRE</i></b></p>

<h1>Początki HTML</h1>
<p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył
<i>prototyp hipertekstowego systemu informacyjnego – <b>ENQUIRE</b></i></p>

A. A.

B. C.

C. D.

D. B.

Niestety, twoja odpowiedź nie była poprawna. Wybrany przez ciebie fragment kodu nie odpowiadał strukturze i hierarchii tagów HTML widocznej na obrazku. HTML jest językiem znaczników, który wykorzystuje różne tagi do definiowania struktury i formatowania treści na stronie internetowej. Możliwe, że niepoprawne rozumienie tagów HTML mogło skłonić cię do wybrania nieprawidłowej odpowiedzi. Na przykład, jeśli wybrałeś opcję zawierającą tagi <h2> zamiast <h1> dla nagłówka, to mogło to wynikać z niewłaściwego zrozumienia hierarchii nagłówków w HTML. Podobnie, jeśli wybrałeś opcję, która nie zawierała tagu , mogło to wynikać z niewłaściwego zrozumienia funkcji tego tagu w tworzeniu przerw wiersza. Ważne jest zrozumienie, jak różne tagi HTML wpływają na prezentację i strukturę strony internetowej, aby uniknąć błędów podczas tworzenia stron.

Pytanie 27

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

A. Efekt 2.

B. Efekt 4.

C. Efekt 3.

D. Efekt 1.

Odpowiedź, którą wybrałeś, nie jest poprawna, i wynika to z małego nieporozumienia dotyczącego formularzy HTML. Główna sprawa to to, że wszystko, co wpisujesz w polach formularza, jest pokazywane dopiero po jego przesłaniu. W tym przypadku, jeśli wprowadzisz 'Przykładowy text' w pole tekstowe, to będzie to widoczne, ale checkboxy będą niezaznaczone. Błędne odpowiedzi często pochodzą z mylenia działania checkboxów. Pamiętaj, że te dwa checkboxy są zawsze niezaznaczone, niezależnie od tego, co wprowadziłeś w pole tekstowe. I to, że wartość z pola tekstowego nie wpływa na checkboxy, można uznać za istotne zrozumienie działania formularzy HTML. Także warto zwrócić na to uwagę w przyszłości.

Pytanie 28

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

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

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

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

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

Pozostałe odpowiedzi zawierają błędy koncepcyjne dotyczące zastosowania selektorów CSS. W przypadku odpowiedzi .first-line {font-size: 200%; color:brown;} zastosowano selektor klasy, który jest stosowany do elementów posiadających atrybut class. Jednak to nie dotyczy pierwszej linii tekstu, a całego elementu z przypisaną klasą. Z kolei #first-line {font-size: 200%; color:brown;} używa selektora identyfikatora, który jest unikalny dla całego dokumentu i odnosi się do konkretnego elementu z przypisanym id. Nie jest jednak przeznaczony do formatowania pierwszej linii tekstu. Odpowiedź p.first-line {font-size: 200%; color:brown;} błędnie łączy selektor elementu z klasą, sugerując, że wszystkie elementy z klasą first-line będą tak sformatowane. Aby poprawnie sformatować pierwszą linię w paragrafie, należy użyć selektora pseudo-elementu ::first-line. Powszechnym błędem w rozumieniu tych koncepcji jest mylenie pseudo-elementów z klasami czy identyfikatorami, co prowadzi do błędnych założeń w stylizacji CSS. Zrozumienie różnic między selektorami i ich odpowiednie zastosowanie jest kluczowe w efektywnym projektowaniu stylów CSS, zgodnym z najlepszymi praktykami w branży.

Pytanie 29

Który zapis wyświetli słowo „TEKST” w kolorze czarnym?

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

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

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

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

<body color="black"> jest błędny - <body> nie ma atrybutu color, a znaczniki są niedomknięte.  używa polskiej nazwy koloru, której HTML nie rozumie (nazwy są po angielsku lub kodem). <body bgcolor="black"> ustawia kolor TŁA. Czarny tekst daje TEKST.

Pytanie 30

Do ilu pól edycyjnych zostanie przypisane tło Teal dla przedstawionego fragmentu dokumentu HTML i stylu CSS?

<input type="text">
<input type="number">
<input type="email">
<input type="number">
<input>

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

A. Do żadnego.

B. Do wszystkich.

C. Do trzech.

D. Do dwóch.

Wybór niepoprawnej odpowiedzi sugeruje pewne nieporozumienia dotyczące zasad działania CSS i tego, jak style są aplikowane do elementów HTML. Wszystkie niepoprawne odpowiedzi sugerują, że tło Teal zostanie przypisane do innej liczby pól edycyjnych niż faktycznie. W tym przypadku, tło Teal jest zdefiniowane w stylu CSS i ma być zastosowane tylko do pól typu 'number'. W HTML, możemy określić różne typy pól edycyjnych, takie jak 'text', 'number', 'email' i inne. Typy te są używane przez przeglądarki, aby dostarczyć odpowiednie interfejsy użytkownika dla różnych typów danych. Niezrozumienie tego może prowadzić do błędnych wniosków, jak na przykład ten, że wszystkie pola edycyjne otrzymają styl, czy że żadne pole nie otrzyma stylu. Ważne jest, aby zrozumieć, jak selektory atrybutów w CSS pozwalają na precyzyjne określenie, do jakich elementów powinien być zastosowany dany styl.

Pytanie 31

Co należy zrobić, aby strona internetowa była dostępna dla osób z niepełnosprawnościami, zgodnie z wytycznymi WCAG?

A. testować stronę wyłącznie w najpopularniejszej przeglądarce

B. opisywać obrazy tekstem alternatywnym, a kontrolki etykietami

C. stosować tylko jedną barwę i jej odcienie

D. używać tylko akapitów, bez nagłówków h1-h6

Dostępność wg WCAG oznacza, że ze strony skorzystają też osoby z niepełnosprawnościami, m.in. używające czytników ekranu. Kluczowe jest opisywanie obrazów tekstem alternatywnym (atrybut alt) oraz wiązanie pól formularza z etykietami (label), aby czytnik mógł je odczytać. Ważne są też nagłówki, kontrast i obsługa klawiaturą. Dlatego poprawna jest odpowiedź o tekście alternatywnym i etykietach kontrolek.

Pytanie 32

W którym formacie zapisać logo (czarny symbol na PRZEZROCZYSTYM tle) na stronę WWW?

A. PNG

B. CDR

C. BMP

D. JPG

Logo będące czarnym symbolem na PRZEZROCZYSTYM tle trzeba zapisać w PNG - to format rastrowy obsługujący kanał alfa (przezroczystość) i działający w przeglądarkach. Dzięki temu logo nałoży się na dowolne tło bez białego prostokąta. Zapamiętaj: potrzebujesz przezroczystości na stronie - wybierz PNG.

Pytanie 33

Kolor określony kodem RGB, mający wartość rgb(255, 128, 16) w przedstawieniu szesnastkowym, przyjmie jaką wartość?

A. #ff0fl0

B. #008010

C. #ff8011

D. #ff8010

Alternatywne odpowiedzi mają kilka błędów, jeśli chodzi o kolory w formacie szesnastkowym. Pierwsza opcja, #008010, nie pasuje w ogóle do wartości RGB, które dostaliśmy w pytaniu. Nic tu nie łączy wartości rgb(255, 128, 16) z #008010. Druga opcja, #ff0fl0, ma błąd, bo zawiera nieprawidłowy znak 'l', który w ogóle nie powinien się tam znaleźć. To czyni ją zupełnie niepoprawną. Ostatnia odpowiedź, #ff8011, zmienia wartość niebieską z '10' na '11', co też psuje kolor. Takie pomyłki często zdarzają się, bo ludzie nie pamiętają lub nie znają podstaw konwersji kolorów. Dlatego dobrze jest znać te zasady i umieć sprawdzić, czy wartości są poprawne. W praktyce projektanci i programiści mogą korzystać z różnych narzędzi, jak palety kolorów, które ułatwiają ten proces i zmniejszają ryzyko błędów.

Pytanie 34

W języku HTML, aby uzyskać następujący efekt formatowania, należy zapisać kod:

pogrubiony pochylony lub w ^{górnym indeksie}

A. pogrubiony pochylony lub w górnym indeksie

B. pogrubiony pochylony lub w górnym indeksie

C. pogrubiony pochylony lub w górnym indeksie

D. pogrubiony pochylony lub w górnym indeksie

Pozostałe odpowiedzi zawierają nieprawidłowe użycie tagów HTML. Tagi HTML są kluczowe podczas formatowania tekstu i każdy z nich ma specyficzne zastosowanie. Użycie tagu w połączeniu z w obrębie tego samego tagu do pochylonego tekstu, jak w odpowiedzi nr 3, jest niepoprawne. Tekst będzie pogrubiony, ale nie będzie pochylony. Podobnie, użycie tagu przed tagiem do pogrubienia tekstu, jak w odpowiedzi nr 2, jest błędem. Tekst będzie pochylony, ale nie będzie pogrubiony. Odpowiedź nr 4 zawiera tag użyty w niewłaściwym miejscu - jest on użyty do pochylenia tekstu, a nie do wyświetlenia go jako tekst górnego indeksu. W przypadku tagu używanego w odpowiedzi nr 2 i 3, służy on do wyświetlania tekstu jako dolnego indeksu, a nie górnego. Błędy te pokazują, jak ważne jest zrozumienie i prawidłowe użycie tagów HTML podczas tworzenia stron internetowych.

Pytanie 35

Zapis CSS postaci:

 ul {
    list-style-image: url('rys.gif');
}

sprawi, że na stronie internetowej

A. punktorem listy nienumerowanej będzie rys.gif

B. każdy z punktów listy będzie miał osobne tło pobrane z grafiki rys.gif

C. rys.gif będzie stanowił ramkę dla listy nienumerowanej.

D. wyświetli się rysunek rys.gif jako tło listy nienumerowanej.

Gratulacje! Poprawnie zidentyfikowałeś, że w podanym kodzie CSS, obrazek 'rys.gif' będzie służył jako punktor listy nienumerowanej. Według standardów CSS, właściwość list-style-image jest używana do określenia obrazka, który będzie używany jako punktor w liście nienumerowanej. Zasada ta jest bardzo przydatna, kiedy chcemy stworzyć niestandardowe punktory listy, które lepiej pasują do designu naszej strony. Możemy użyć dowolnego obrazka, który jest dostępny online lub zasobu z naszej lokalnej przestrzeni roboczej. Pamiętaj jednak, że obrazek powinien być mały i czytelny. W tym konkretnym przypadku, obrazek 'rys.gif' zostanie ustawiony jako punktor dla każdego elementu listy <li> wewnątrz listy nienumerowanej <ul>. Używając tej techniki, możemy stworzyć atrakcyjniejsze i bardziej interaktywne listy na naszej stronie internetowej.

Pytanie 36

Który selektor stylizuje akapity z klasą tekst ORAZ element blokowy z identyfikatorem obrazki?

p.tekst, div#obrazki

p.tekst + div#obrazki

p#tekst + div.obrazki

p#tekst, div.obrazki

Klasę oznacza kropka (p.tekst = akapity klasy tekst), a identyfikator krzyżyk (div#obrazki = <div> o id obrazki). PRZECINEK łączy oba selektory w grupę, więc reguła obejmie jedno i drugie. Dlatego poprawny jest p.tekst, div#obrazki.

Pytanie 37

Jakie jest poprawne zapisanie tagu HTML?

<a href="#hobby">przejdź</a>

A. jest błędny, w atrybucie href powinien być podany adres URL

B. jest prawidłowy, po kliknięciu w odnośnik otworzy się strona pod adresem "hobby"

C. jest poprawny, po kliknięciu w odnośnik strona zostanie przewinięta do elementu o nazwie "hobby"

D. jest błędny, użyto niewłaściwego znaku # w atrybucie href

W znaczniku HTML a z atrybutem href='#hobby' zastosowano tzw. kotwicę fragmentu strony. Jest to popularna technika używana do bezpośredniego przenoszenia użytkownika do określonej części strony internetowej. Znak hash (#) wskazuje, że link odwołuje się do elementu o identyfikatorze hobby w obrębie tej samej strony. Tego rodzaju odnośniki są szeroko stosowane w długich dokumentach gdzie szybka nawigacja między sekcjami poprawia doświadczenie użytkownika. Aby kod działał poprawnie na stronie musi istnieć element z atrybutem id='hobby'. To działanie jest zgodne ze standardami HTML i jest zalecane w projektowaniu dostępnych i przyjaznych dla użytkownika aplikacji internetowych. Warto także pamiętać o stosowaniu opisowych identyfikatorów co ułatwia czytelność kodu i jego późniejsze utrzymanie. Praktyka ta jest zgodna z najlepszymi praktykami w zakresie użyteczności i dostępności stron internetowych co może również wpłynąć pozytywnie na SEO poprzez poprawę struktury strony.

Pytanie 38

Aby dołączyć kaskadowy arkusz stylów zapisany w zewnętrznym pliku, należy użyć następującego fragmentu kodu HTML:

<option value="styl.css" type="text/css">

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

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

<meta charset="styl.css">

Każda z błędnych odpowiedzi to prawdziwy znacznik HTML - i na tym polega pułapka, bo żaden z nich nie wczytuje arkusza stylów. <option> tworzy pojedynczą pozycję listy rozwijanej <select> i ma sens wyłącznie wewnątrz formularza. <meta> rzeczywiście trafia do sekcji <head>, ale przekazuje metadane dokumentu - na przykład kodowanie znaków - a plików nie ładuje. <div> to zwykły pojemnik blokowy na treść strony, a dopisany przy nim atrybut relation w ogóle nie istnieje w HTML. Zewnętrzny plik .css dołącza tylko jeden znacznik: <link rel="stylesheet" href="..."> umieszczony w sekcji <head>.

Pytanie 39

Tworzenie struktury logicznej strony internetowej polega na

A. umiejscowieniu elementów w wyznaczonych lokalizacjach witryny

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

C. stworzonym zestawie grafik dla strony

D. określeniu zawartości witryny

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

Pytanie 40

W ramce przedstawiono właściwości pliku graficznego:

Wymiary:	4272 x 2848px
Rozdzielczość:	72 dpi
Format:	JPG

W celu optymalizacji czasu ładowania rysunku na stronę WWW należy:

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

B. zmniejszyć wymiary rysunku.

C. zmienić format grafiki na CDR.

D. zwiększyć rozdzielczość.

Wybór niepoprawnej odpowiedzi wskazuje na nieporozumienie dotyczące optymalizacji czasu ładowania obrazów na stronie WWW. Zmiana formatu grafiki na CDR, zwiększenie rozdzielczości oraz zmiana proporcji szerokości do wysokości nie prowadzą do optymalizacji czasu ładowania. Format CDR jest specyficznym formatem firmy Corel i nie jest standardowo używany do obrazów internetowych. Zwiększenie rozdzielczości zwiększyłoby rozmiar pliku i tym samym spowolniłoby ładowanie strony, co jest przeciwne do zamierzonego celu. Zmiana proporcji obrazu może zmienić jego wygląd, ale nie wpłynie znacząco na rozmiar pliku. Optymalizacja czasu ładowania obrazów na stronę WWW jest najczęściej osiągana przez zmniejszenie ich wymiarów, co skutkuje zmniejszeniem rozmiaru pliku.

Rozpocznij nowy egzamin

Powrót do strony głównej