Wyniki egzaminu

Informacje o egzaminie:
  • Zawód: Technik informatyk
  • Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
  • Data rozpoczęcia: 20 czerwca 2026 12:25
  • Data zakończenia: 20 czerwca 2026 12:58

Egzamin zdany!

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

Wymagane minimum: 20 punktów (50%)

Nowe
Analiza przebiegu egzaminu- sprawdź jak rozwiązywałeś pytania
Pochwal się swoim wynikiem!
Szczegółowe wyniki:
Pytanie 1

W CSS zapisana reguła

css
p::first-line {font-size: 150%;}
wykorzystana na stronie z wieloma paragrafami, z których każdy składa się z kilku linijek, spowoduje, że
A. pierwszy paragraf na stronie będzie miał całą czcionkę powiększoną
B. cały tekst w paragrafie zostanie powiększony o 150%
C. pierwsza linia każdego z paragrafów będzie miała większy rozmiar czcionki niż pozostałe linie
D. pierwsza linia każdego z paragrafów będzie miała mniejszy rozmiar czcionki niż pozostałe linie
Zapis CSS p::first-line {font-size: 150%;} odnosi się do pseudoelementu ::first-line, który pozwala na stylizację tylko pierwszej linii tekstu w każdym paragrafie. W tym przypadku, gdy stosujemy font-size: 150%, oznacza to, że rozmiar czcionki pierwszej linii każdego paragrafu zostanie zwiększony o 50% w stosunku do domyślnego rozmiaru czcionki ustalonego w CSS. To oznacza, że pierwsza linia będzie wizualnie wyróżniać się na tle pozostałego tekstu, który pozostanie w standardowym rozmiarze czcionki. Stylizowanie pierwszej linii paragrafu jest przydatnym narzędziem w projektowaniu stron internetowych, ponieważ pozwala na zwrócenie uwagi czytelników na istotne fragmenty tekstu, co może wpływać na lepszą czytelność i odbiór treści. Dodatkowo, zgodnie z specyfikacją CSS, użycie pseudoelementów, takich jak ::first-line, jest jednym z sposobów na wprowadzenie estetycznych i funkcjonalnych zmian w tekście bez konieczności modyfikacji HTML. W praktyce, stosując ten styl, można uzyskać efekt, który poprawia hierarchię informacji w tekstach, co jest szczególnie ważne w dłuższych artykułach czy dokumentach.

Pytanie 2

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

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

Pytanie 3

W kodzie HTML zdefiniowano hiperłącze: <a href="http://website.com" rel="nofollow">link</a>. Użyty w nim atrybut rel="nofollow" w znaczniku <a>:

A. oznacza, że kliknięcie w link otworzy go w osobnej karcie przeglądarki
B. jest poleceniem dla przeglądarki, aby nie traktowała słowa "link" jako odnośnika
C. jest informacją dla robota wyszukiwarki, aby nie podążał za tym linkiem i nie przekazywał mu wartości rankingowej
D. oznacza, że kliknięcie w link nie przeniesie użytkownika na stronę website.com
Atrybut rel="nofollow" w znaczniku <a> to wskazówka skierowana do robotów wyszukiwarek, na przykład Googlebota. Mówi im, by nie podążały za danym odnośnikiem i nie przekazywały mu wartości rankingowej (historycznie nazywanej PageRank). Działa wyłącznie na poziomie indeksowania - nie zmienia zachowania linku dla użytkownika, który dalej może go kliknąć i przejść na stronę docelową. nofollow stosuje się często przy linkach zewnętrznych, do treści niezaufanych, w komentarzach czy linkach płatnych, aby nie firmować obcej witryny autorytetem własnej strony i ograniczać spam.

Pytanie 4

Ile klatek na sekundę zapewnia PŁYNNY obraz w filmie (minimalny typowy zakres)?

A. 24-30 fps
B. 16-19 fps
C. 20-23 fps
D. 31-36 fps
Płynny ruch w filmie zapewnia zwykle 24-30 klatek na sekundę (np. 24 fps w kinie, 25 w europejskiej telewizji). Poniżej tego zakresu obraz zaczyna „skakać”. Dlatego płynność daje 24-30 fps.

Pytanie 5

Znacznik <ins> w HTML ma na celu wskazanie

A. tekstu, który został usunięty
B. tekstu, który został dodany
C. tekstu, który został przerobiony
D. bloku tekstu, który jest cytowany
Znaczniki HTML mają swoje ściśle określone funkcje i znaczenie, a błędna interpretacja ich roli może prowadzić do nieodpowiedniego użycia w tworzeniu stron internetowych. Jednym z typowych błędów jest mylenie znacznika <ins> z innymi elementami, takimi jak <del>, który służy do oznaczania tekstu usuniętego. Element <del> jest używany do wskazania, że dany tekst został wykreślony lub usunięty z dokumentu, co jest przeciwieństwem działania znacznika <ins>. Innym mylnym przekonaniem jest przypisywanie elementowi <ins> funkcji formatowania tekstu, co nie jest jego przeznaczeniem. Znacznik <ins> nie służy do zmiany stylu tekstu, a do wskazywania, które fragmenty tekstu zostały dodane w porównaniu do wcześniejszej wersji. Kolejnym wartym uwagi aspektem jest to, że element <ins> nie jest przeznaczony do oznaczania cytatów. Cytaty są zazwyczaj oznaczane za pomocą znacznika <blockquote> lub <q>, które mają zupełnie inne cele. Zachowanie zgodności ze standardami HTML oraz właściwe użycie znaczników semantycznych ma kluczowe znaczenie dla tworzenia dostępnych i zrozumiałych stron internetowych. Niezrozumienie funkcji danego znacznika może prowadzić do poważnych konsekwencji, takich jak trudności w indeksowaniu przez wyszukiwarki, co w efekcie wpływa na widoczność strony w Internecie.

Pytanie 6

W kodzie HTML zamieszczono link do strony internetowej:

<a href="http://google.com">strona Google</a>
Jakie dodatkowe zmiany należy wprowadzić, aby link otwierał się w nowym oknie lub zakładce przeglądarki, dodając do definicji linku odpowiedni atrybut?
A. target = "_parent"
B. rel = "external"
C. target = "_blank"
D. rel = "next"
Atrybuty rel = "next" oraz rel = "external" nie są odpowiednie dla celu otwierania strony w nowym oknie czy zakładce. Atrybut rel służy do określenia relacji między stroną źródłową a docelową, a nie do definiowania sposobu otwierania odnośników. Wartość "next" jest używana w kontekście paginacji, oznaczającej, że dany link prowadzi do następnej strony w serii, co nie ma nic wspólnego z otwieraniem w nowym oknie. Podobnie, "external" jest używane do wskazania, że link prowadzi do zewnętrznego źródła, ale nie definiuje, jak ma być otwierany. Otwieranie odnośników bez odpowiednich atrybutów, które kontrolują sposób ich wyświetlania, może prowadzić do frustracji użytkowników, gdyż są oni zmuszeni do korzystania z przycisków „wstecz” przeglądarki, aby wrócić do poprzedniej strony. Umożliwienie otwierania w nowym oknie może być lepszym rozwiązaniem dla zewnętrznych źródeł, co jest często praktykowane w standardach webowych. Użytkownik powinien mieć kontrolę nad tym, czy chce opuścić obecną stronę, czy też nie. Dlatego kluczowe jest zrozumienie znaczenia i zastosowania atrybutu target w kontekście projektowania stron internetowych oraz odpowiednich standardów, aby poprawić doświadczenia użytkowników.

Pytanie 7

Który fragment definicji dwukolumnowej tabeli odpowiada efektowi scalenia komórki 1 i 3, przedstawionemu na ilustracji?

Ilustracja do pytania
A. <td rowspan="3">komórka1+3</td>
B. <td rowspan="2">komórka1+3</td>
C. <td colspan="3">komórka1+3</td>
D. <td colspan="2">komórka1+3</td>
Poprawnie wskazałeś fragment z atrybutem rowspan, czyli: <td rowspan="2">komórka1+3</td>. W HTML atrybut rowspan służy do scalania komórek tabeli w pionie, czyli wzdłuż wierszy. W tym przykładzie tabela ma dwie kolumny, a komórka „komórka1+3” zajmuje miejsce pierwszej komórki w pierwszym wierszu oraz pierwszej komórki w drugim wierszu. Dlatego właśnie wartość rowspan musi być równa 2 – ta jedna komórka rozciąga się na dwa wiersze. Gdy przeglądarka widzi taki zapis, rezerwuje dla tej komórki obszar dwóch komórek pod sobą, a w kodzie HTML w kolejnym wierszu pomijamy już odpowiednią liczbę komórek w tej kolumnie. Z mojego doświadczenia wynika, że przy projektowaniu tabel dobrze jest sobie najpierw „narysować” układ na kartce: ile wierszy, ile kolumn, które komórki się łączą. Potem łatwo dobrać czy potrzebujemy colspan (łączenie w poziomie – kolumny), czy rowspan (łączenie w pionie – wiersze). W specyfikacji HTML Living Standard dokładnie tak to jest opisane: rowspan określa, na ile wierszy rozciąga się dana komórka. W praktyce scalanie komórek przydaje się np. przy tworzeniu nagłówków tabel z opisami grup kolumn, przy harmonogramach, planach lekcji, cennikach, gdzie jedna pozycja obowiązuje przez kilka wierszy. Warto też pamiętać o semantyce: tam gdzie to możliwe, dla nagłówków stosujemy <th> z rowspan lub colspan, a dla zwykłych danych <td>. Taki porządek w kodzie ułatwia późniejsze stylowanie CSS i poprawia dostępność, bo czytniki ekranu lepiej rozumieją strukturę tabeli.

Pytanie 8

Pokazane pole input pozwala na

<input type="checkbox" name="text1" value="text2">
A. wprowadzenie hasła
B. wybranie opcji
C. selekcję opcji z listy zawierającej wartości text1 oraz text2
D. wpisanie dowolnego ciągu znaków
Pole input typu checkbox to fajna opcja, bo pozwala użytkownikom zaznaczać jedną albo więcej opcji z dostępnych wyborów. Takie checkboxy można zobaczyć na różnych stronach internetowych, są super przydatne, a użytkownik może je odznaczać kiedy chce. W HTML mamy atrybut type, który mówi, co użytkownik może wpisać. W przypadku checkboxa mamy to pole, które można zaznaczyć i dzięki temu dodajemy wartość do formularza, gdy go wysyłamy. Przykładem mogą być formularze zgód, gdzie trzeba potwierdzić kilka polityk prywatności lub warunków korzystania z serwisu. Ważne jest także, żeby każdy checkbox miał odpowiednio przypisane atrybuty name i value, bo dzięki temu łatwiej jest je zidentyfikować, gdy przesyłamy dane. I pamiętajmy, żeby dobrze oznaczać checkboxy etykietami przez element label – to pomaga, zwłaszcza osobom korzystającym z technologii wspomagających. Takie poprawne używanie checkboxów to klucz do budowania intuicyjnych i użytecznych interfejsów użytkowników.

Pytanie 9

Który atrybut <img> trzeba uzupełnić, aby strona była dostępna dla osób NIEWIDOMYCH?

A.
text
B.
src
C.
alt
D.
style
Atrybut alt znacznika <img> zawiera tekst alternatywny opisujący obraz. Czytniki ekranu odczytują go osobom niewidomym, dzięki czemu wiedzą one, co przedstawia grafika - to fundament dostępności (a11y), a także wartość dla SEO. Dlatego uzupełnić trzeba atrybut alt.

Pytanie 10

Plik HTML jest w folderze www/html/, a styl.css w www/style/. Jak poprawnie (ścieżką względną) dołączyć arkusz w pliku HTML?

A.
<link rel="stylesheet" href="styl.css">
B.
<link rel="stylesheet" href="../style/styl.css">
C.
<link rel="stylesheet" href="www/style/styl.css">
D.
<link rel="stylesheet" href="style/styl.css">
Pozostałe ścieżki szukają arkusza w złym miejscu. href="styl.css" oczekuje pliku w tym samym folderze co HTML (html/), gdzie go nie ma. href="style/styl.css" szukałby podfolderu style/ wewnątrz html/. href="www/style/styl.css" liczy ścieżkę tak, jakby HTML był w korzeniu. Do celu prowadzi tylko cofnięcie się przez ../style/styl.css.

Pytanie 11

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

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

Pytanie 12

Jaki zapis znacznika <div> może występować w dokumencie HTML tylko raz, a jego ponowne użycie spowoduje pojawienie się błędów podczas walidacji dokumentu?

A. <div id="identyfikator">
B. <div class="klasa">
C. <div>
D. <div class="klasa1 klasa2">
Zapis <div id="identyfikator"> jest poprawny, ponieważ atrybut id w HTML powinien być unikalny w obrębie całego dokumentu. Oznacza to, że dla każdego elementu HTML można przypisać tylko jeden identyfikator, co pozwala na jednoznaczne odnalezienie danego elementu w kodzie. Przykładowo, w przypadku skryptów JavaScript lub stylów CSS, odwołując się do identyfikatora za pomocą selektora CSS (np. #identyfikator), mamy pewność, że dotykamy tylko jednego, konkretnego elementu. To podejście jest zgodne z zasadami dobrych praktyk webowych, które kładą duży nacisk na semantykę i czytelność kodu. Unikalność identyfikatora wspomaga również dostępność strony, umożliwiając czytnikom ekranu oraz innym technologiom asystującym łatwiejsze nawigowanie po dokumencie. Warto pamiętać, że w przypadku błędnego przypisania tego samego id do wielu elementów, walidacja HTML zgłosi błąd, co skutkuje problemami ze zgodnością z W3C i innymi standardami webowymi.

Pytanie 13

W języku CSS zdefiniowano style dla znacznika h1 zgodnie z podanym wzorem. Przy założeniu, że żadne inne style nie są zastosowane do znacznika h1, wskaż właściwy sposób stylizacji tego elementu

Ilustracja do pytania
A. D
B. C
C. B
D. A
Błędne odpowiedzi wynikają z nieprawidłowego zrozumienia zastosowania specyficznych stylów CSS. Font-style: oblique; jest często mylony z kursywą, czyli font-style: italic;. Oblique to bardziej subtelna forma pochylenia tekstu, która w projektach graficznych może nadawać bardziej nowoczesny wygląd. Dlatego inne opcje, które mogłyby sugerować użycie zwykłej kursywy, są nieprawidłowe. Font-variant: small-caps; często jest mylony z całkowitymi kapitalikami, co może prowadzić do nieporozumienia w formacie tekstu. Small-caps zachowuje proporcje tekstu, przekształcając tylko małe litery, co może być użyteczne w projektach, gdzie estetyka i elegancja są kluczowe. Niewłaściwe zrozumienie tego stylu może prowadzić do błędnych założeń o wyglądzie tekstu. Text-align: right; jest często zapominane, ponieważ większość tekstów w Internecie jest wyrównywana do lewej. Dlatego projekty, które wymagają wyrównania do prawej mogą być błędnie postrzegane jako niestandardowe lub nieoczekiwane. Poprawne użycie text-align: right; może jednak być kluczowe w układzie stron, gdzie asymetria i nowoczesny design są pożądane. Te błędne koncepcje pokazują, jak ważne jest zrozumienie i prawidłowe stosowanie specyficznych stylów CSS, ponieważ mogą one znacząco wpłynąć na wygląd i użyteczność projektu. Właściwe rozróżnienie tych stylów jest kluczowe dla profesjonalnego projektowania stron internetowych, gdzie detale wizualne i funkcjonalne mają istotne znaczenie dla końcowego użytkownika.

Pytanie 14

Jaki jest najłatwiejszy i najmniej czasochłonny sposób przetestowania strony w różnych przeglądarkach i ich wersjach?

A. instalacja różnych przeglądarek na kilku komputerach i testowanie
B. użycie emulatora przeglądarek (np. usługi typu Browser Sandbox)
C. test tylko w jednej przeglądarce, zakładając zgodność pozostałych
D. użycie walidatora kodu HTML
Najszybszym sposobem sprawdzenia strony w wielu przeglądarkach i ich wersjach jest emulator przeglądarek (np. usługa typu Browser Sandbox) - bez instalowania każdej z nich osobno otrzymujemy podgląd w różnych środowiskach. Dlatego najwygodniejsze jest użycie emulatora przeglądarek.

Pytanie 15

W przedstawionym kodzie HTML, zaprezentowany styl CSS jest stylem:

<p style="color:red;">To jest przykładowy akapit.</p>
A. zewnętrznym
B. nagłówkowym
C. dynamicznym
D. lokalnym
Styl CSS określony wewnątrz elementu HTML poprzez atrybut style jest przykładem stylu lokalnego. Styl lokalny pozwala na bezpośrednie przypisanie konkretnych własności CSS do pojedynczego elementu co umożliwia szybkie i łatwe testowanie oraz modyfikacje wyglądu bez potrzeby edytowania zewnętrznych plików CSS. Praktyczne zastosowanie stylów lokalnych odnajdujemy w sytuacjach gdy chcemy wprowadzić zmiany dla pojedynczego elementu na stronie nie wpływając na inne elementy. Na przykład jeśli w jednym miejscu chcemy podkreślić wagę tekstu stosując kolor czerwony możemy użyć stylu lokalnego jak pokazano w pytaniu. Jednak styl lokalny nie jest zalecany dla większych projektów czy skomplikowanych stron ze względu na fakt że utrudnia zarządzanie i utrzymywanie spójnego stylu w całym projekcie. W takich przypadkach lepiej korzystać ze stylów zewnętrznych lub nagłówkowych które oferują lepszą organizację i elastyczność. Warto również pamiętać że implementacja stylu lokalnego może nadpisywać inne style co jest istotne przy rozwiązywaniu problemów związanych z dziedziczeniem stylów CSS.

Pytanie 16

Analizując poniższy kod HTML, jak w przeglądarce zachowa się blok B względem bloku A?

<div>A</div>
<div style="margin-top: 20px">B</div>
A. bloki A i B będą nachodzić na siebie
B. zostanie ustawiony dolny margines bloku B
C. blok A zostanie przesunięty w lewo o 20 px
D. blok B będzie oddalony od bloku A o 20 px
Drugi <div> (blok B) ma w atrybucie style ustawione margin-top: 20px - to margines zewnętrzny po GÓRNEJ stronie. Ponieważ blok B leży pod blokiem A, ten 20-pikselowy margines tworzy odstęp nad B, odsuwając go w dół od A. Dlatego blok B będzie oddalony od bloku A o 20 px.

Pytanie 17

Jak system CMS realizuje oddzielenie treści serwisu od jego wyglądu?

A. treść ze statycznych plików HTML, a wygląd ze szablonu
B. treść z bazy danych, a wygląd za pomocą atrybutów HTML
C. treść generuje z bazy danych, a wygląd ze zdefiniowanego szablonu
D. treść ze statycznych plików HTML, a wygląd we Flashu
CMS oddziela treść od wyglądu: TREŚĆ przechowuje w bazie danych i pobiera dynamicznie, a WYGLĄD definiuje osobny szablon (motyw). Dzięki temu zmiana szablonu nie rusza treści i odwrotnie. Dlatego CMS generuje treść z bazy danych, a wygląd ze zdefiniowanego szablonu.

Pytanie 18

W zaprezentowanym fragmencie kodu HTML zdefiniowano pole input, które można opisać jako

<input type="password" name="pole">
A. zawiera domyślny tekst „pole”
B. dopuszcza jedynie wprowadzanie wartości liczbowych
C. pokazuje znaki, które zostały do niego wprowadzone
D. ukrywa znaki, które zostały do niego wprowadzone
Pole input z atrybutem type="password" służy do wprowadzania danych, które powinny być ukryte przed wglądem osób trzecich, takich jak hasła. Wprowadzone znaki są zastępowane na ekranie innymi symbolami, najczęściej kropkami lub gwiazdkami, co zabezpiecza przed odczytem hasła przez osoby patrzące na ekran. Ten mechanizm jest standardem w aplikacjach webowych, dbającym o bezpieczeństwo użytkowników. W praktyce, pola typu password są używane w formularzach logowania oraz rejestracji, gdzie ochrona danych osobowych i wrażliwych jest priorytetem. Ważne jest również, aby takie pola były osadzone w bezpiecznych kontekstach, np. na stronach korzystających z protokołu HTTPS, co zapewnia szyfrowanie przesyłanych informacji. Ponadto, deweloperzy powinni stosować się do dobrych praktyk, takich jak implementacja mechanizmów zapobiegających atakom typu shoulder surfing poprzez odpowiednie umiejscowienie i stylowanie pól password. Warto również pamiętać o testowaniu funkcjonalności takich pól, aby upewnić się, że ukrywanie znaków działa prawidłowo na różnych urządzeniach i przeglądarkach, co jest kluczowe w zapewnieniu spójnego doświadczenia użytkownika oraz zachowania bezpieczeństwa.

Pytanie 19

Którym znacznikiem wstawić listę NUMEROWANĄ (uporządkowaną)?

A.
<dl>
B.
<ul>
C.
<li>
D.
<ol>
Listę numerowaną (uporządkowaną) tworzy <ol> (ordered list), a każdą pozycję wpisujesz w <li>: <ol><li>Pierwszy</li><li>Drugi</li></ol> wyświetli kolejne punkty z numerami 1, 2... Numerację można zmienić atrybutem type lub CSS-em list-style-type. Zapamiętaj: „ol” = ordered (uporządkowana), „ul” = unordered (punktowana).

Pytanie 20

Jaką metodę zastosowano do dodania arkusza stylów do dokumentu HTML w pokazanym kodzie?

Ilustracja do pytania
A. Styl alternatywny, zewnętrzny
B. Styl zewnętrzny
C. Styl wewnętrzny
D. Styl wpisany, lokalny
Styl wpisany lokalny w HTML to metoda definiowania stylów CSS bezpośrednio wewnątrz elementów HTML za pomocą atrybutu style. Jest to często stosowane, gdy chcemy szybko zdefiniować unikalne style dla pojedynczego elementu bez tworzenia lub edytowania zewnętrznego pliku CSS. Przykładowo poniższy kod HTML pokazuje jak możemy zmienić kolor tekstu w paragrafie na czerwony używając właśnie stylu pisanego zwanego również inline. Choć jest to proste i szybkie rozwiązanie nie jest zalecane dla większych projektów ze względu na brak możliwości ponownego użycia kodu i problematyczną jego konserwację. W praktyce najlepszym podejściem jest stosowanie stylów zewnętrznych które umożliwiają centralne zarządzanie wyglądem całego dokumentu. Standardy HTML i CSS promują modularność i oddzielenie warstwy prezentacyjnej od struktury co jest bardziej efektywne i zgodne z zasadami projektowania responsywnych aplikacji internetowych. Styl wpisany może być jednak przydatny w testach szybkich prototypach lub sytuacjach gdy zmiany muszą być wprowadzone lokalnie i mają one charakter jednorazowy. Dla bardziej złożonych aplikacji zaleca się jednak stosowanie bardziej zorganizowanych metod stylizacji takich jak style zewnętrzne.

Pytanie 21

Walidator HTML5 zgłosił: „Error: Element head is missing a required instance of child element title”. Co to oznacza?

A. że brakuje atrybutu title w <img>
B. że <title> nie został zamknięty </title>
C. że element <title> nie jest wymagany
D. że w <head> nie zdefiniowano elementu <title>
Komunikat „Element head is missing a required instance of child element title” znaczy, że w sekcji <head> nie umieszczono wymaganego znacznika <title>. Walidator wymaga tytułu w każdym dokumencie. Dlatego oznacza brak <title> w <head>.

Pytanie 22

Który element CMS odpowiada bezpośrednio za WYGLĄD strony?

A. kokpit (WordPress) / panel administracyjny (Joomla!)
B. wtyczka (WordPress) / dodatek (Joomla!)
C. widżet (WordPress) / moduł (Joomla!)
D. motyw (WordPress) / szablon (Joomla!)
Za WYGLĄD strony w CMS odpowiada motyw (w WordPressie) lub szablon (w Joomli!) - definiuje układ, kolory i style, oddzielnie od treści. Dlatego wyglądem zarządza motyw/szablon.

Pytanie 23

Zapis CSS w postaci:

ul{ list-style-image:url('rys.gif');}
spowoduje, że na stronie internetowej
A. każdy element listy zyska indywidualne tło pochodzące z grafiki rys.gif
B. rys.gif będzie służyć jako tło dla nienumerowanej listy
C. punktorem nienumerowanej listy stanie się rys.gif
D. rysunek rys.gif zostanie wyświetlony jako punkt listy nienumerowanej
W CSS właściwość 'list-style-image' służy do określenia obrazu, który ma być użyty jako znacznik punktu dla list nienumerowanych. W podanym przykładzie zapis 'ul{ list-style-image:url('rys.gif'); }' informuje przeglądarkę, aby zamiast domyślnego punktu, wykorzystała obrazek 'rys.gif'. Oznacza to, że każdy element listy (li) w tej nienumerowanej liście będzie miał przypisany obraz jako punkt. To podejście jest zgodne ze standardami CSS i jest szeroko stosowane w celu dodania indywidualnego stylu do elementów listy. Przykładowo, zamiast tradycyjnego kropkowania, możemy użyć ikon lub obrazów, które lepiej oddają tematykę strony. Ważne jest, aby plik graficzny był dostępny i poprawnie załadowany, co zapewni, że znacznik wyświetli się na stronie. Istotne jest również, aby pamiętać o optymalizacji obrazków dla sieci, co może poprawić szybkość ładowania strony.

Pytanie 24

W CSS zdefiniowano regułę

input:focus { background-color: LightGreen; }
Kiedy pole edycyjne będzie miało jasnozielone tło?
A. po kliknięciu w nie, gdy jest aktywne do wpisywania tekstu
B. jeśli to pierwsze wystąpienie tego elementu w dokumencie
C. w każdej sytuacji
D. gdy zostanie najechane kursorem (bez kliknięcia)
:focus nie odnosi się do pierwszego wystąpienia elementu ani nie działa „w każdej sytuacji”. Reakcja na samo najechanie kursorem (bez kliknięcia) to :hover, a nie :focus. Jasnozielone tło pojawi się, gdy pole stanie się aktywne do wpisywania tekstu.

Pytanie 25

Który znacznik lub grupa znaczników nie są stosowane do definiowania struktury strony HTML?

A. <section>
B. <header>, <footer>
C. <i>, <b>, <u>
D. <div>
Znacznik <i>, <b>, <u> jest stosowany głównie do celów prezentacyjnych, a nie do definiowania struktury dokumentu HTML. <i> oznacza tekst kursywą, <b> tekst pogrubiony, a <u> tekst podkreślony. Te znaczniki są częścią HTML, ale ich główną funkcją jest wzbogacenie wizualne treści, co nie ma związku z logiczną strukturą strony. W kontekście dobrych praktyk webowych, zaleca się stosowanie znaczników semantycznych, które dostarczają bardziej zrozumiałych informacji o treści strony wyszukiwarkom i asystentom technologicznym. Przykładowo, zamiast używać <b> dla podkreślenia znaczenia tekstu, warto skorzystać z <strong>, który również pogrubia tekst, ale dodatkowo wskazuje, że jest on istotny. Dobre praktyki sugerują, aby struktura strony była wyraźna i zrozumiała, co ułatwia nawigację oraz dostępność. Właściwe użycie znaczników takich jak <header>, <footer> czy <section> pomaga w tworzeniu jasnej i logicznej hierarchii dokumentu.

Pytanie 26

W formularzu zdefiniowano kontrolki do wpisania imienia i nazwiska. Który atrybut reprezentuje podpowiedź umiejscowioną w polu kontrolki, znikającą w momencie, gdy użytkownik rozpocznie wpisywanie wartości?

<label for="imie">Imię: </label>
<input id="imie" value="Wpisz dane" title="Wpisz imię"><br>
<label for="nazw">Nazwisko: </label>
<input id="nazw" placeholder="Wpisz dane" title="Wpisz nazwisko">
A. title
B. value
C. placeholder
D. for
Dobrze! Poprawna odpowiedź to 'placeholder'. Atrybut 'placeholder' w elemencie input HTML jest używany do wyświetlania podpowiedzi wewnątrz pola formularza, która znika, gdy użytkownik zaczyna wpisywanie danych. Jest to zgodne z pytaniem, w którym poproszono o atrybut reprezentujący podpowiedź w polu formularza, która znika, gdy użytkownik rozpoczyna wpisywanie. Przykładem może być formularz logowania, gdzie w polach 'Użytkownik' i 'Hasło' można umieścić podpowiedzi 'Wpisz nazwę użytkownika' i 'Wpisz hasło' odpowiednio. Atrybut 'placeholder' jest bardzo przydatny w interaktywnym designie, pomagając użytkownikom zrozumieć, jakie informacje są od nich oczekiwane w danym polu formularza.

Pytanie 27

Który z poniższych zapisów jest selektorem pseudoklasy CSS?

A.
td.wyroznienie
B.
body
C.
a:link
D.
p#wyroznienie
Pozostałe zapisy to inne rodzaje selektorów. p#wyroznienie wskazuje akapit o identyfikatorze „wyroznienie” - krzyżyk oznacza selektor ID. td.wyroznienie wybiera komórki tabeli z klasą „wyroznienie” - kropka to selektor klasy. body to selektor typu, czyli po prostu nazwa znacznika. Żaden z nich nie odnosi się do stanu elementu. Pseudoklasę, poprzedzoną dwukropkiem, reprezentuje a:link, dlatego ta odpowiedź jest poprawna.

Pytanie 28

Strona internetowa została wyświetlona przez przeglądarkę w poniższy sposób. Wskaż kod HTML, który prawidłowo reprezentuje zaprezentowaną hierarchiczną strukturę tekstu:

Ilustracja do pytania
A. <h1>Rozdział 1</h1> <p>tekst</p> <h2>Podrozdział 1.1</h2> <p>tekst</p> <h2>Podrozdział 1.2</h2>
B. <big>Rozdział 1</big>tekst<big>Podrozdział 1.1</big>tekst<big>Podrozdział 1.2</big>
C. <h1>Rozdział 1<p>tekst <h2>Podrozdział 1.1<p>tekst <h2>Podrozdział 1.2
D. <ul><li>Rozdział 1<li>tekst<li>Podrozdział 1.1<li>tekst<li>Podrozdział 1.2</ul>
Odpowiedź jest w porządku! Użycie znaczników <h1> i <h2> wraz z <p> to dobry krok, bo to właśnie tak powinno wyglądać semantyczne formatowanie w HTML. Znacznik <h1> to taki główny nagłówek, który mówi, o czym jest cała strona lub sekcja, a to naprawdę kluczowe dla porządku w treści i SEO. Dzięki nagłówkom w HTML łatwiej jest zrozumieć, co jest na stronie, zarówno dla ludzi, jak i programów, które przeszukują internet. Jak już masz <h2>, to świetnie, bo to pokazuje podrozdziały, a więc hierarchię informacji. Użycie <p> dla tekstu to też dobry pomysł, bo sprawia, że tekst jest bardziej czytelny. Warto pamiętać, że semantyczne znaczniki HTML pomagają osobom z niepełnosprawnościami korzystać z internetu. Według wytycznych WCAG powinno się je stosować, żeby poprawić dostępność. A jak to robić z głową, to łatwiej potem stylować stronę przy użyciu CSS, bo możesz zmieniać wygląd bez bawienia się w treść HTML. Generalnie, dobrze jest, gdy dokumenty są jasne zarówno dla ludzi, jak i dla maszyn – to standard w nowoczesnym webdesignie.

Pytanie 29

Dla celu strony internetowej stworzono grafikę rysunek.jpg o wymiarach: szerokość 200 px, wysokość 100 px. Aby zaprezentować tę grafikę jako miniaturę – pomniejszoną z zachowaniem proporcji, można użyć znacznika

A. <img src="/rysunek.png">
B. <img src="/rysunek.png" style="width: 50px">
C. <img src="/rysunek.png" style="width: 25px; height:25px;">
D. <img src="/rysunek.png" style="width: 25px; height:50px;">
Odpowiedź <img src="/rysunek.png" style="width: 50px"> jest poprawna, ponieważ umożliwia wyświetlenie grafiki w formacie miniatury, zachowując proporcje oryginalnego obrazu. Przy zmniejszaniu rozmiaru obrazu, kluczowe jest ustawienie tylko jednego z wymiarów (szerokości lub wysokości), co pozwala na automatyczne dostosowanie drugiego wymiaru w taki sposób, aby nie zniekształcić proporcji. W tym przypadku, ustawienie szerokości na 50 px pozwala na proporcjonalne zmniejszenie wysokości do około 25 px, co jest zgodne z zasadą, że proporcje powinny pozostawać niezmienione. W praktyce, korzystanie z CSS do określenia rozmiarów obrazków poprawia responsywność strony oraz jej estetykę, co jest zgodne z dobrymi praktykami w web designie. Warto również pamiętać, że do poprawy ładowania stron i doświadczenia użytkownika, często zastosowanie rozmiarów odpowiednich do urządzeń mobilnych oraz desktopowych jest kluczowe.

Pytanie 30

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

A. rect, sąuare, circle
B. rect, poły, circle
C. style="margin-bottom: 0cm;">poły, square, circle
D. style="margin-bottom: 0cm;">rect, triangle, circle
W przypadku odpowiedzi, które nie są poprawne, należy zwrócić uwagę na kilka kluczowych aspektów. Po pierwsze, wartości 'triangle' oraz 'square' nie są uznawane w atrybucie shape znacznika area w HTML. Zamiast tego, 'triangle' nie ma odpowiedniego wsparcia w standardach, a więc nie może być używane do definiowania obszarów na mapach obrazów. Również 'square', chociaż może przypominać prostokąt, nie ma odrębnej definicji i nie jest akceptowany w specyfikacji. Mapa obrazów ogranicza się do określonych kształtów, takich jak 'rect', 'circle' oraz 'poly', co czyni te odpowiedzi niepoprawnymi. Dodatkowo, wspomnienie o 'sąuare' wskazuje na literówkę, co również podważa poprawność tej opcji. Termin 'poły' nie tylko nie istnieje w kontekście atrybutu shape, ale także nie odnosi się do żadnego znanego kształtu w HTML. Zrozumienie właściwych terminów oraz ich zastosowania w HTML jest kluczowe dla tworzenia funkcjonalnych stron internetowych, a każda niepoprawna odpowiedź może prowadzić do mylących implementacji.

Pytanie 31

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. wszystkich linków.
C. treści akapitu.
D. linków, które otwierają się w nowej karcie.
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 32

Aby przyspieszyć ładowanie strony z dużą grafiką (2000×760 px), należy zmniejszyć jej rozmiar:

A. właściwością CSS w pikselach
B. w programie graficznym
C. za pomocą atrybutów HTML
D. właściwością CSS w procentach
Pozostałe sposoby nie zmniejszają tego, co przeglądarka musi pobrać. Atrybuty HTML (width/height) oraz właściwości CSS - czy to w pikselach, czy w procentach - sterują tylko rozmiarem wyświetlania obrazu na ekranie. Plik źródłowy nadal waży tyle samo i w całości jest ściągany, więc czas ładowania się nie poprawia, a obraz bywa dodatkowo skalowany „w locie”. Realne przyspieszenie daje zmniejszenie wymiarów i kompresja pliku w programie graficznym, dlatego to ta odpowiedź jest poprawna.

Pytanie 33

Zapis selektora wskazuje, że kolor tła będzie brązowy dla

input[type=number] { background-color: Brown; }
A. formularzy, które są typu numerycznego
B. wszystkich tekstów na stronie internetowej
C. formularzy, gdy użytkownik wprowadzi w nie jakąkolwiek cyfrę
D. wszystkich formularzy
Zapis selektora CSS `input[type=number] { background-color: Brown; }` odnosi się do pól edycyjnych, które są zdefiniowane jako typu numerycznego. Oznacza to, że wszystkie elementy <input>, które mają atrybut `type` ustawiony na `number`, będą miały brązowe tło. Tego typu selektory są przydatne, ponieważ pozwalają na precyzyjne stylizowanie elementów formularzy, co jest kluczowe dla poprawy doświadczeń użytkowników. Stosowanie odpowiednich typów elementów formularza, takich jak `number`, umożliwia kontrolowanie danych wprowadzanych przez użytkowników, co jest zgodne z dobrymi praktykami w zakresie walidacji danych. W praktyce, jeśli w formularzu istnieje pole do wprowadzania dat, które powinno przyjmować tylko wartości liczbowe, stylizowanie go w ten sposób może pomóc w natychmiastowym wizualnym wskazaniu użytkownikowi, że pole jest przeznaczone do wprowadzania numerów. Warto również pamiętać, że stosowanie odpowiednich typów wejściowych wspiera responsywność, umożliwiając na przykład wyświetlanie klawiatury numerycznej na urządzeniach mobilnych, co zwiększa komfort użytkowania.

Pytanie 34

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: right; } section { float: right; }
B. nav { float: right; }
C. aside {float: left; }
D. nav { float: left; } aside { float: left; }
Prawidłowa odpowiedź opiera się na tym, jak działają własności float w CSS i w jakiej kolejności przeglądarka renderuje elementy blokowe. Jeśli w dokumencie HTML kolejność znaczników to np. &lt;aside&gt;, potem &lt;section&gt;, a na końcu &lt;nav&gt;, to bez dodatkowego stylowania wszystkie trzy ustawią się pionowo, jeden pod drugim, w tej właśnie kolejności. Dodanie float zmienia sposób, w jaki elementy „odpływają” od normalnego przepływu dokumentu i jak układają się obok siebie.

W stylu nav { float: right; } section { float: right; } sprawiamy, że zarówno nav, jak i section są przesuwane do prawej krawędzi kontenera, natomiast aside (bez float) pozostaje w normalnym przepływie, czyli z lewej strony. Ponieważ przeglądarka układa elementy w kolejności występowania w kodzie, najpierw wyrenderuje aside po lewej, potem section „odpłynie” w prawo, a na końcu nav też „odpłynie” w prawo, ustawiając się po prawej stronie, ale dalej od góry niż section. Efekt wizualny jest taki, że po lewej mamy aside, po prawej nav, a section ląduje między nimi, dokładnie tak jak było pokazane na filmie.

Moim zdaniem to zadanie dobrze pokazuje, że przy floatach zawsze trzeba myśleć o trzech rzeczach naraz: kolejności elementów w HTML, kierunku „pływania” (left/right) oraz o tym, które elementy pozostawiamy w normalnym przepływie. W praktyce w nowoczesnych projektach częściej używa się flexboxa albo CSS Grid do takich układów, bo są czytelniejsze i mniej problematyczne. Przykładowo, zamiast kombinować z float, można by użyć display: flex; na kontenerze i ustawić order dla aside i nav. Float nadal jednak pojawia się w starszych layoutach i w zadaniach egzaminacyjnych, więc warto dobrze rozumieć jego zachowanie, choćby po to, żeby poprawnie modyfikować istniejące style lub naprawiać „rozjechane” układy w starszych projektach.

Pytanie 35

Która zasada użycia semantycznych znaczników HTML5 jest PRAWDZIWA?

A. <aside> służy do GŁÓWNEJ treści strony
B. <footer> powinien być na górze, a <header> na dole
C. <main> może wystąpić tylko RAZ w dokumencie
D. <nav> jest charakterystyczny dla <article>
Znacznik <main> obejmuje GŁÓWNĄ, unikalną treść strony, dlatego może wystąpić w dokumencie tylko RAZ. Dlatego prawdziwa jest ta zasada.

Pytanie 36

Poniżej znajduje się fragment kodu w języku HTML. Przedstawia on definicję listy:

Ilustracja do pytania
A. B
B. A
C. D
D. C
Odpowiedź C jest poprawna ponieważ przedstawiony fragment kodu HTML definiuje uporządkowaną listę zagnieżdżoną W tym kodzie zauważamy że główna lista jest uporządkowana oznaczona jako ol co definiuje elementy listy jako numerowane po kolei Elementy li w tej liście to punkty jeden dwa i trzy Na szczególną uwagę zasługuje fakt że drugi element li zawiera zagnieżdżoną nieuporządkowaną listę ul co jest zgodne ze standardami HTML dotyczącymi zagnieżdżania list Zgodnie z dobrymi praktykami zagnieżdżanie list w HTML powinno być stosowane w sposób przejrzysty i logiczny co ułatwia czytelność i zrozumienie kodu oraz jego późniejsze modyfikacje Praktycznym zastosowaniem takich struktur jest organizowanie treści w dokumentach internetowych w sposób hierarchiczny co ułatwia zarówno użytkownikom przeglądanie zawartości jak i programistom zarządzanie kodem Zrozumienie zagnieżdżania list jest kluczowe dla efektywnego tworzenia stron internetowych które są nie tylko estetyczne ale także funkcjonalne i dostępne dla szerokiej grupy odbiorców

Pytanie 37

Którego znacznika można użyć do grupowania elementów w blok?

A.
<div>
B.
<p>
C.
<span>
D.
<param>
<div> to uniwersalny pojemnik blokowy - służy do grupowania innych elementów w logiczną sekcję, którą można następnie wspólnie ostylować lub spozycjonować (np. nadać jej klasę i ułożyć Flexboxem). Jest elementem blokowym, więc domyślnie zajmuje całą szerokość i rozpoczyna się od nowej linii. Odpowiednikiem dla treści w linii jest <span>. W nowoczesnym HTML5 tam, gdzie pasuje znaczenie, zamiast samego <div> stosuje się znaczniki semantyczne (<header>, <section>, <nav>). Dlatego do grupowania elementów w blok służy <div>.

Pytanie 38

Do czego służy znacznik <i> w języku HTML?

A. zmiany kroju pisma na pochylony
B. zdefiniowania formularza
C. umieszczania obrazu
D. zdefiniowania nagłówka w treści
Znacznik <i> w języku HTML jest używany do przedstawienia tekstu w stylu kursywy. Jest to jeden z najprostszych znaczników, który jest często stosowany do podkreślenia pewnych elementów tekstowych, takich jak tytuły książek, nazwy filmów czy inne wyrazy, które mają znaczenie kontekstowe. Użycie tego znacznika jest zgodne z zasadami semantyki HTML, co oznacza, że zachowuje on znaczenie treści, a nie tylko jej wygląd. Warto również zauważyć, że w CSS istnieje wiele możliwości stylizacji tekstu, a znacznik <i> jest jednym z elementów, które w łatwy sposób można połączyć z regułami stylów, aby stworzyć atrakcyjne wizualnie strony internetowe. Przykładem zastosowania może być: <p>Ostatnio przeczytałem <i>Harry'ego Pottera</i> i bardzo mi się podobał.</p>. W tym przypadku tytuł książki jest wyróżniony, co przyciąga uwagę czytelnika. Warto pamiętać, że w nowoczesnym HTML zamiast <i> dla stylizacji można używać CSS, jednak <i> pozostaje ważnym elementem dla zachowania semantyki treści.

Pytanie 39

Po uruchomieniu zamieszczonego w ramce skryptu w języku JavaScript, w przeglądarce zostanie wyświetlona wartość:

var a = 5;
var b = a--;
a *= 3;
document.write(a + "," + b);
A. 12,4
B. 12,5
C. 15,4
D. 15,5
W tym skrypcie JavaScript najpierw zmienna a zaczyna z wartością 5. Gdy używasz operatora dekrementacji, czyli a--, to jego wartość zostaje przypisana do zmiennej b, zanim a zostanie zmniejszona. Dlatego b ma wartość 5, a a staje się 4. Potem mamy a *= 3, co znaczy, że mnożymy 4 (aktualną wartość a) przez 3, co daje nam 12. Na końcu, wywołując document.write(a + ',' + b), dostajemy w wyniku 12,5. Zrozumienie tych operatorów w JavaScript jest naprawdę ważne. Operatorzy, jak ++ i --, są powszechnie używani w pętlach, więc znajomość ich działania pomoże ci pisać lepszy i bardziej przejrzysty kod, unikając typowych błędów przy przypisywaniu wartości. Fajnie też wiedzieć, że podobnie działają oni w wielu innych językach programowania, więc ta wiedza jest naprawdę uniwersalna.

Pytanie 40

Jakie jest poprawne zapisanie tagu HTML?

<a href="#hobby">przejdź</a>
A. jest poprawny, po kliknięciu w odnośnik strona zostanie przewinięta do elementu o nazwie "hobby"
B. jest błędny, w atrybucie href powinien być podany adres URL
C. jest prawidłowy, po kliknięciu w odnośnik otworzy się strona pod adresem "hobby"
D. jest błędny, użyto niewłaściwego znaku # w atrybucie href
Znaczniki HTML są podstawowym narzędziem tworzenia stron internetowych a ich prawidłowe zastosowanie ma kluczowe znaczenie dla funkcjonalności i użyteczności witryny. W omawianym przypadku atrybut href='#hobby' używa tzw. kotwicy która służy do nawigacji wewnętrznej w obrębie jednej strony. Linki wewnętrzne są istotne gdyż pozwalają na szybkie przeskakiwanie do określonych sekcji dokumentu. W odpowiedziach błędnych zauważalne są pewne nieporozumienia. Po pierwsze jeśli w href użyto adresu URL bez znaku hash oznacza to próbę przekierowania na zupełnie inną stronę co jest niepoprawne w kontekście nawigacji wewnętrznej. Podanie pełnego adresu URL jest wymagane jedynie gdy chcemy przejść do innej strony internetowej. Znak hash w tym kontekście jest poprawny gdyż wskazuje na docelowy identyfikator wewnątrz tej samej strony. Jest to zgodne z praktykami tworzenia przejrzystych i funkcjonalnych interfejsów użytkownika. Nieprawidłowe interpretacje mogą wynikać z braku zrozumienia jak działają kotwice w HTML co może prowadzić do błędów w projektowaniu doświadczenia użytkownika oraz kodu o niskiej użyteczności. Edukacja i praktyka w używaniu standardowych znaczników HTML jest niezbędna dla tworzenia profesjonalnych projektów internetowych które są przyjazne dla użytkowników i działają zgodnie z oczekiwaniami. Rozumienie tych zasad pozwala na tworzenie stron zgodnych z najlepszymi praktykami branżowymi co ma kluczowe znaczenie dla współczesnych wymagań projektowych i użytkowych.