Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik programista
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 8 czerwca 2026 15:22
Data zakończenia: 8 czerwca 2026 15:44

Egzamin zdany!

Wynik: 27/40 punktów (67,5%)

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

Aby utworzyć strukturę strony internetowej za pomocą znaczników semantycznych języka HTML 5, zgodnie z przedstawionym na ilustracji projektem, SEKCJA B powinna być zawarta w znaczniku

A. <header></header>

B. <article></article>

C. <nav></nav>

D. <section></section>

Poprawnie – sekcja B na ilustracji to klasyczne menu nawigacyjne strony, więc w semantycznym HTML5 powinna być zawarta w znaczniku <nav>. Ten element został wprowadzony właśnie po to, żeby jasno oznaczać blok linków służących do poruszania się po serwisie: główne menu, nawigacja w stopce, paginacja artykułów itp. Przeglądarki, czytniki ekranu i roboty wyszukiwarek rozpoznają <nav> jako specjalny region nawigacyjny i dzięki temu lepiej „rozumieją” strukturę strony. To jest bardzo ważne z punktu widzenia dostępności (WCAG) i SEO. W typowym szkielecie strony HTML5 nagłówek z tytułem umieszcza się w <header>, menu w <nav>, główną treść w <main>, artykuły w <article>, a poboczne informacje w <aside>. U Ciebie: sekcja A to najpewniej <header>, sekcja B – <nav>, a sekcja C – jakiś <section> lub <article>. W praktyce kod dla pokazanej sekcji B wyglądałby np.: <nav><a href="index.html">Główna</a><a href="onas.html">O nas</a><a href="kontakt.html">Kontakt</a></nav>. Moim zdaniem dobrze jest od początku wyrabiać nawyk używania <nav> tylko dla głównych bloków nawigacji, a nie dla każdego przypadkowego linka w tekście. Dzięki temu dokument ma czytelną hierarchię, łatwiej się go styluje w CSS i utrzymuje w większych projektach.

Pytanie 2

W sekcji <head> (w elemencie <meta ... >) witryny www nie umieszcza się danych dotyczących

A. autora

B. automatycznego odświeżania

C. kodowania

D. typu dokumentu

Umieszczanie informacji o autorze, kodowaniu oraz automatycznym odświeżaniu w znaczniku <head> jest praktyką zgodną ze standardami, jednak występują nieporozumienia co do roli i miejsca deklaracji typu dokumentu. Wiele osób może błędnie zakładać, że typ dokumentu można umieścić w sekcji <head>, co jest nieprawidłowe. Deklaracja DOCTYPE, która informuje przeglądarkę o wersji HTML, musi być umieszczona przed znacznikiem <html> w kodzie. Tymczasem w sekcji <head> umieszczamy metadane, które mają bezpośredni wpływ na interpretację zawartości strony i jej interakcję z użytkownikami oraz wyszukiwarkami. Często popełnianym błędem jest mylenie tych dwóch elementów, co prowadzi do nieprawidłowego kodowania strony. Odpowiednie zrozumienie struktury dokumentu HTML jest kluczowe dla jego prawidłowego funkcjonowania; nieprawidłowe umiejscowienie deklaracji DOCTYPE może prowadzić do nieoczekiwanych zachowań w przeglądarkach, takich jak błędy w renderowaniu lub problemy z kompatybilnością. Dlatego ważne jest, aby znać zasady dotyczące tworzenia struktury dokumentów HTML, co przyczynia się do lepszej jakości kodu oraz większej wydajności stron internetowych.

Pytanie 3

Użycie standardu ISO-8859-2 ma na celu zapewnienie prawidłowego wyświetlania

A. polskich znaków, takich jak: ś, ć, ń, ó, ą

B. znaków zarezerwowanych dla języka opisu strony

C. symboli matematycznych

D. specjalnych znaków dla języka kodowania strony

Kodowanie w standardzie ISO-8859-2, zwane również Latin-2, zostało zaprojektowane, aby wspierać wyświetlanie znaków z alfabetów używanych w Europie Środkowo-Wschodniej. Jest to szczególnie istotne w kontekście języka polskiego, który wymaga specyficznych znaków diakrytycznych, takich jak ś, ć, ń, ó oraz ą. Standard ten obejmuje 256 znaków, z czego pierwsze 128 jest zgodne z ASCII, natomiast pozostałe 128 to znaki specyficzne dla danego języka. Dzięki temu, w aplikacjach internetowych oraz w systemach operacyjnych, możliwe jest poprawne wyświetlanie tekstów w języku polskim, co wpływa na jakość komunikacji i użyteczność treści. Przykładowo, w dokumentach HTML, użycie deklaracji charset='ISO-8859-2' zapewnia, że przeglądarki internetowe prawidłowo interpretują znaki, co jest kluczowe dla zachowania czytelności i poprawności tekstu. Zgodność z tym standardem jest także istotna w kontekście wymiany danych między różnymi systemami, aby uniknąć problemów związanych z kodowaniem i dekodowaniem tekstu.

Pytanie 4

W CSS zapisany w ten sposób:

p { background-image: url("rysunek.png"); }

spowoduje, że rysunek.png stanie się

A. widoczny obok każdego akapitu

B. wyświetlony, jeśli w kodzie użyty zostanie znacznik img

C. tłem każdego akapitu

D. tłem całej witryny

Zapis CSS p { background-image: url("rysunek.png"); } oznacza, że dla każdego elementu akapitowego <p> w dokumencie zostanie ustawione tło w postaci grafiki o nazwie rysunek.png. Ta reguła selektora p dotyczy wyłącznie znaczników akapitu, więc nie wpłynie na inne elementy strony, takie jak body czy img. Tak się to stosuje w praktyce: projektując na przykład bloga, możesz dodać delikatny deseń lub obrazek w tle akapitu, żeby całość wyglądała ciekawiej albo podkreślała styl witryny. Co ciekawe, background-image w CSS pozwala na olbrzymią elastyczność — możesz wykorzystać obrazy, gradienty czy nawet SVG jako tło. Standardy CSS jasno to definiują: background-image działa zawsze na tym elemencie, dla którego zadeklarowano regułę w selektorze. Warto pamiętać, że tło nie przesłoni tekstu w akapicie, tylko się pod nim wyświetli, więc czytelność jest zachowana. Z własnego doświadczenia uważam, że umiejętność stosowania background-image do konkretnych elementów to jedno z podstawowych narzędzi webdevelopera — pozwala przygotować naprawdę estetyczne i przejrzyste layouty. Dobrym nawykiem jest także testowanie widoczności tła na różnych urządzeniach, bo rozdzielczości i skalowanie potrafią zaskoczyć. Dla porządku, jeśli podasz background-image bez żadnych dodatkowych parametrów (jak powtarzanie czy pozycjonowanie), obrazek domyślnie będzie się powtarzał w poziomie i pionie, aż pokryje cały akapit.

Pytanie 5

Jak można dodać zewnętrzny arkusz stylów do dokumentu HTML?

A. <style>

B. <link>

C. <css>

D. <meta>

Dołączenie zewnętrznego arkusza stylów do kodu HTML realizowane jest przy użyciu znacznika <link>, który znajduje się w sekcji <head> dokumentu HTML. Ten znacznik umożliwia przeglądarkom internetowym odnalezienie i załadowanie zewnętrznego pliku CSS, co pozwala na zastosowanie stylów do elementów HTML. Przy użyciu atrybutu 'href' wskazujemy lokalizację arkusza stylów, natomiast atrybut 'rel' definiuje relację między dokumentem HTML a plikiem stylów, zazwyczaj ustawiając go na 'stylesheet'. Przykładowa struktura to: <link rel='stylesheet' href='styles.css'>. Taki sposób organizacji stylów pozwala na lepsze zarządzanie kodem, umożliwia wielokrotne wykorzystanie tych samych stylów w różnych dokumentach oraz przyspiesza ładowanie strony poprzez caching. Użycie zewnętrznych arkuszy stylów jest zgodne z najlepszymi praktykami programowania front-endowego, co wpływa pozytywnie na wydajność oraz SEO, umożliwiając lepszą indeksację przez wyszukiwarki. Dodatkowo, umożliwia to łatwiejsze wprowadzanie zmian w stylach bez potrzeby edytowania każdego pliku HTML z osobna.

Pytanie 6

Które reguły CSS poprawnie ustawiają dla akapitu czcionkę Arial, rozmiar 16 pt i pochylenie (kursywę)?

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

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

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

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

Wygląd czcionki opisują w CSS trzy osobne właściwości: font-family ustala krój (np. Arial), font-size - rozmiar (tu 16pt, bo zadano punkty, a nie piksele), a font-style: italic włącza pochylenie. Razem daje to p { font-family: Arial; font-size: 16pt; font-style: italic; }. Warto pamiętać, że font-style odpowiada za kursywę, a font-weight za grubość - to częste źródło pomyłek. Dlatego poprawny jest ten zestaw reguł.

Pytanie 7

Który zapis wyświetli obraz kotek.jpg z tekstem alternatywnym „obrazek kotka”?

<img src="/kotek.jpg" title="obrazek kotka">

<img href="/kotek.jpg" title="obrazek kotka">

<img href="/kotek.jpg" alt="obrazek kotka">

<img src="/kotek.jpg" alt="obrazek kotka">

Obraz wstawia się znacznikiem <img>, podając źródło w src i tekst alternatywny w alt: <img src="/kotek.jpg" alt="obrazek kotka">. Dlatego poprawny jest ten zapis.

Pytanie 8

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

A. Styl wpisany, lokalny

B. Styl alternatywny, zewnętrzny

C. Styl wewnętrzny

D. Styl zewnętrzny

Styl zewnętrzny to metoda dołączania arkusza stylów do dokumentu HTML poprzez linkowanie pliku CSS zewnętrznego w sekcji head dokumentu. Jest to najbardziej powszechna i zalecana metoda stylizacji dużych projektów ponieważ pozwala na oddzielenie logiki prezentacyjnej od struktury dokumentu HTML co ułatwia zarządzanie i ponowne wykorzystanie kodu. Tymczasem styl wewnętrzny umieszczany jest w sekcji head jako blok <style> i stosuje się go gdy chcemy zdefiniować style dla całego dokumentu bez tworzenia dodatkowego pliku CSS. Jest to rozwiązanie kompromisowe ale wciąż nie tak elastyczne jak style zewnętrzne. Styl alternatywny zewnętrzny to mechanizm dołączania alternatywnych arkuszy stylów umożliwiający użytkownikowi wybór różnych stylów podczas przeglądania strony jednak nie jest to to samo co styl wpisany lokalny. Błędne myślenie może polegać na utożsamianiu stylów wewnętrznych z wpisanymi ze względu na ich lokalny charakter lecz zasadniczo różnią się one zakresem działania i sposobem implementacji. Styl wpisany jako atrybut elementu HTML działa tylko na ten konkretny element zaś style wewnętrzne i zewnętrzne mogą wpływać na wiele elementów jednocześnie co daje większą kontrolę i spójność w projektowaniu strony. Zrozumienie tych różnic jest kluczowe dla tworzenia efektywnych i dobrze zarządzanych aplikacji webowych. Dążenie do modularności i ponownego użycia kodu jest jedną z fundamentalnych zasad dobrych praktyk w branży.

Pytanie 9

Fragment dokumentu HTML sugeruje, że

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

A. znaczniki końcowe są wymagane w kodzie HTML, także dla znaczników samozamykających się.

B. wszystkie znaczniki w kodzie HTML powinny być zapisywane wielkimi literami.

C. kod HTML zapisano w wersji 4 języka.

D. kod HTML zapisano w wersji 5 języka.

Deklaracja DOCTYPE wskazuje na to że dokument HTML wykorzystuje standard HTML 4.01 w trybie ścisłym. HTML 4.01 jest jedną z wersji języka HTML wprowadzoną przez World Wide Web Consortium w 1999 roku i zawiera trzy warianty: Strict Transitional i Frameset. Tryb Strict oznacza ścisłe przestrzeganie zasad standardu bez użycia przestarzałych elementów i atrybutów takich jak tagi związane z formatowaniem stron które stały się przestarzałe w miarę rozwoju kaskadowych arkuszy stylów CSS. W kontekście praktycznym oznacza to że projektując stronę zgodną z tą specyfikacją należy unikać znaczników odpowiedzialnych za prezentację które były powszechnie stosowane w poprzednich wersjach HTML. Zamiast tego zaleca się korzystanie z CSS do określania wyglądu strony co nie tylko wspiera separację struktury treści od jej wyglądu ale także ułatwia przenoszenie i aktualizację stylów. Używając deklaracji DOCTYPE HTML 4.01 Strict można zapewnić lepszą zgodność z najnowszymi wersjami przeglądarek oraz ułatwić przyszłe aktualizacje kodu do nowoczesnych standardów takich jak HTML5 który wprowadza dodatkowe funkcjonalności i uproszczenia mające na celu poprawę semantyki i użyteczności stron WWW

Pytanie 10

W języku CSS wprowadzono poniższe formatowanie:

p > i { color: blue; }

Oznacza to, że tekst w kolorze niebieskim będzie zapisany:

A. pochylony tekst akapitu

B. cały tekst akapitu, bez względu na jego formatowanie

C. pogrubiony tekst akapitu

D. cały tekst nagłówków, bez względu na ich formatowanie

W języku CSS selektor > jest używany do stylizowania bezpośrednich potomków danego elementu. W podanym przykładzie p > i oznacza, że reguła CSS będzie zastosowana do elementu i będącego bezpośrednim dzieckiem elementu p. To oznacza, że tylko tekst zapisany w tagu i wewnątrz paragrafu p będzie miał kolor niebieski. Jest to powszechnie stosowane podejście do precyzyjnego stylizowania elementów na stronach internetowych, z zachowaniem struktury dokumentu HTML. Takie rozwiązanie pozwala na lepszą kontrolę nad wyglądem i prezentacją dokumentu, co jest istotne przy tworzeniu responsywnych i estetycznych stron. Praktyczne zastosowanie tego stylu można zobaczyć w przypadku, gdy chcemy wyróżnić pewne frazy w paragrafie, na przykład cytaty lub terminy. Warto pamiętać, że używanie selektorów potomstwa poprawia czytelność i efektywność kodu CSS, co jest dobrą praktyką w profesjonalnym kodowaniu frontendowym. Zachowanie spójności i przejrzystości stylów jest kluczowe w większych projektach, gdzie wiele osób pracuje nad kodem.

Pytanie 11

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

<form>
    <textarea rows="3" cols="30"></textarea><br>
    <input type="checkbox"> Opcja1<br>
    <input type="checkbox"> Opcja2
</form>

A. Efekt 2.

B. Efekt 1.

C. Efekt 3.

D. Efekt 4.

Twoja odpowiedź jest poprawna. Wybrałeś odpowiedź 'Efekt 2', która jest zgodna z zachowaniem formularza HTML w opisanym scenariuszu. Formularz zawiera pole tekstowe i dwa pola typu checkbox. Kiedy wpiszesz do pola tekstowego wartość 'Przykładowy tekst' i wyświetlisz formularz w przeglądarce, zobaczysz ten tekst w polu tekstowym oraz dwa pola wyboru typu checkbox poniżej z etykietami 'Opcja1' i 'Opcja2'. To dokładnie taki układ, co pokazuje Efekt 2. Tworzenie formularzy HTML to ważna umiejętność w projektowaniu stron internetowych. Pozwalają one na interakcję z użytkownikiem oraz zbieranie od niego informacji. Pamiętaj, że dobry formularz powinien być intuicyjny w użyciu i jasno prezentować swoje funkcje użytkownikowi.

Pytanie 12

Strona internetowa powinna mieć zorganizowaną strukturę bloków. Aby osiągnąć ten układ, należy przypisać sekcjom odpowiednie właściwości w ten sposób:

A. float jedynie dla bloków: 3, 4; clear dla bloku 5

B. float tylko dla bloków: 2, 3, 4; clear dla bloku 5

C. float tylko dla bloku 2; clear dla bloków: 3, 4

D. float wyłącznie dla bloku 5; clear dla bloku 2

Odpowiedź czwarta jest prawidłowa, ponieważ użycie właściwości CSS float dla bloków 2, 3 i 4 oraz właściwości clear dla bloku 5 odpowiada oczekiwanemu układowi strony. Float pozwala na ustawienie elementów obok siebie w poziomie. W tym przypadku blok 2, 3 i 4 będą umieszczone w jednej linii dzięki właściwości float: left. Blok 2 będzie zajmował więcej przestrzeni w pionie, co pozwala umieścić bloki 3 i 4 obok siebie. Blok 5 powinien znaleźć się poniżej, więc wymaga zastosowania właściwości clear: both, aby uniknąć zachodzenia na inne elementy pływające. Taki układ jest często stosowany w projektowaniu responsywnych stron internetowych, gdzie float umożliwia elastyczne dostosowanie się elementów do różnych szerokości ekranów. Warto pamiętać, że obecnie często używa się także display: flex lub grid jako nowocześniejszych sposobów układania elementów, jednak float wciąż znajduje zastosowanie w prostych układach. Zrozumienie, jak działa float i clear, jest kluczowe dla tworzenia poprawnych i estetycznych układów bloków na stronie internetowej.

Pytanie 13

Jakie wyjście zostanie pokazane po zrealizowaniu podanego kodu HTML?

A. Rys.A

B. Rys. B

C. Rys. C

D. Rys. D

Poprawna odpowiedź to Rys. D ponieważ przedstawiony kod HTML zawiera dwie listy. Pierwsza lista to lista uporządkowana <ol> z trzema elementami <li> gdzie drugi element zawiera listę nieuporządkowaną <ul> z dwoma elementami. Lista zagnieżdżona używa standardowego symbolu kropki jako punktora. Druga lista <ol> zaczyna się od litery D dzięki atrybutowi type="A" i start="4". To powoduje że ostatni element wyświetlany jest jako D. punkt. Ta właściwość HTML jest używana do personalizacji wyglądu list aby dopasować je do wymagań projektowych lub edytorskich. Stosowanie atrybutów takich jak type i start pozwala na większą kontrolę nad sposobem wyświetlania list co jest zgodne z dobrymi praktykami w tworzeniu przejrzystych i spójnych interfejsów użytkownika. Personalizacja list może być użyteczna w dokumentach technicznych raportach czy aplikacjach które wymagają dokładnego odwzorowania struktury danych.

Pytanie 14

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

px

in

pt

em

Pozostałe jednostki są STAŁE (bezwzględne). px to piksele, pt to punkty typograficzne (1/72 cala), a in to cale - nie zależą od rozmiaru czcionki. Zależnością od rozmiaru pisma cechuje się em.

Pytanie 15

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

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

B. tr:active { background-color: Pink; }

C. td, th { background-color: Pink; }

D. tr { 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 16

Który z zaprezentowanych kodów HTML sformatuje tekst zgodnie z podanym wzorem?
Uwaga: słowo "stacji" jest napisane większą czcionką niż pozostałe wyrazy w tej linijce)

Lokomotywa

Stoi na stacji lokomotywa ...

A. <h1>Lokomotywa</h1>
<p>Stoi na <big>stacji</big> lokomotywa ...</p>

B. <h1>Lokomotywa</h1>
<p>Stoi na <big>stacji</big> lokomotywa ...</p>

C. <p><small>Lokomotywa</small></p>
<p>Stoi na <big>stacji<big> lokomotywa ...</p>

D. <h1>Lokomotywa</h1>
<p>Stoi na <big>stacji lokomotywa ...</p>

W zaprezentowanych błędnych rozwiązaniach widać kilka typowych problemów z HTML-em: niepełne zamykanie znaczników, obejmowanie tagiem zbyt dużego fragmentu tekstu oraz mylenie roli nagłówków z innymi elementami formatowania. Jeżeli znacznik <big> obejmuje więcej niż powinien, na przykład całe wyrażenie „stacji lokomotywa ...”, to efekt wizualny nie odpowiada wzorcowi – powiększony zostaje nie tylko jeden wyraz, ale cała reszta, co psuje zamierzony wygląd. To jest częsty błąd: zaznaczenie zbyt szerokiego fragmentu tekstu zamiast dokładnie tego słowa, które ma być wyróżnione. Drugi typ problemu to brak zamknięcia znacznika, jak w przypadku użycia <big> bez odpowiadającego mu </big>. Z punktu widzenia specyfikacji HTML takie konstrukcje są niepoprawne, a choć współczesne przeglądarki próbują „naprawiać” kod, skutki bywają nieprzewidywalne: część tekstu może być niechcący powiększona albo cała struktura akapitu zostanie zinterpretowana inaczej. Do tego dochodzi mylenie semantyki: nagłówek <h1> służy do oznaczania tytułu sekcji czy strony, a nie do przypadkowego pomniejszania czy powiększania tekstu. Używanie <small> w miejscu, gdzie w treści powinien wystąpić nagłówek, zaburza hierarchię dokumentu i szkodzi dostępności, bo czytniki ekranu i roboty wyszukiwarek mocno opierają się na strukturze nagłówków. Moim zdaniem warto wyrobić sobie nawyk: najpierw poprawna, logiczna struktura (h1, p, itd.), a dopiero potem delikatne wyróżnianie fragmentów, dokładnie obejmując tagami tylko te słowa, które mają być zmienione. W nowoczesnej praktyce webowej zamiast takich prezentacyjnych tagów jak <big> czy <small> lepiej stosować <span> z klasą i przerzucić całą logikę wyglądu do CSS, ale fundament jest ten sam – precyzyjne zakresy znaczników i poprawnie zamknięte tagi.

Pytanie 17

Jakiej informacji NIE umieszcza się w znaczniku <meta>?

A. o autorze strony

B. o automatycznym odświeżaniu strony

C. o typie (wersji) dokumentu

D. o kodowaniu znaków

Pozostałe informacje JAK NAJBARDZIEJ należą do <meta>: kodowanie znaków (charset), automatyczne odświeżanie (http-equiv="refresh") oraz autor strony (name="author"). Poza <meta> pozostaje deklaracja typu dokumentu <!DOCTYPE>.

Pytanie 18

Aby stworzyć stronę internetową, która będzie odpowiadać załączonej ilustracji, konieczne jest użycie semantycznych znaczników sekcji w języku HTML5. Jakim znacznikiem należy określić sekcję menu?

A. aside

B. nav

C. div

D. header

Znacznik <nav> w HTML5 jest przeznaczony do definiowania sekcji nawigacyjnych na stronie internetowej, takich jak menu. Użycie semantycznego znacznika <nav> jest zgodne z dobrą praktyką projektowania stron, ponieważ pomaga przeglądarkom i technologiom wspomagającym, takim jak czytniki ekranowe, lepiej zrozumieć strukturę dokumentu. Dzięki zastosowaniu <nav>, silniki wyszukiwarek mogą również bardziej efektywnie indeksować zawartość strony. Przykład użycia <nav> w praktyce: html <nav> <ul> <li><a href='#'>Strona główna</a></li> <li><a href='#'>O nas</a></li> <li><a href='#'>Kontakt</a></li> </ul> </nav>. Ten znacznik powinien być używany wszędzie tam, gdzie mamy do czynienia z głównymi elementami nawigacyjnymi strony. Semantyczne tagi w HTML5, takie jak <nav>, ułatwiają utrzymanie i obsługę kodu oraz wspierają dostępność stron internetowych zgodnie ze standardami WCAG.

Pytanie 19

Jak nazwana jest technika dołączania arkusza stylów do dokumentu HTML użyta w podanym kodzie?

<p style="color:red;">tekst</p>

A. Styl zewnętrzny

B. Styl wewnętrzny

C. Styl wpisany, lokalny

D. Styl alternatywny, zewnętrzny

Styl wewnętrzny to metoda w której reguły CSS są zawarte w sekcji head dokumentu HTML w znaczniku style Jest to przydatne w przypadku gdy stylizacja ma obejmować wiele elementów w pojedynczym dokumencie ale nie wymaga globalnego zastosowania Styl wewnętrzny jest bardziej zorganizowany niż styl wpisany ale nadal nie jest najlepszym rozwiązaniem dla dużych projektów ponieważ utrudnia współdzielenie stylów między wieloma stronami Styl alternatywny zewnętrzny odnosi się do sytuacji gdy mamy dostępne różne arkusze stylów które mogą być wymiennie stosowane do tej samej strony internetowej Jest to zaawansowana koncepcja rzadko stosowana w praktyce ale przydatna w projektach gdzie użytkownicy mogą wybierać różne motywy graficzne Styl zewnętrzny to najbardziej zalecana metoda stylizacji gdzie wszystkie reguły są zapisane w osobnym pliku CSS który jest linkowany do dokumentu HTML Pozwala to na łatwe zarządzanie i aktualizację stylów w całym projekcie Jednym z typowych błędów jest mylenie stylu zewnętrznego ze stylem wpisanym oba rozwiązania służą do różnych celów Styl zewnętrzny daje strukturę i pozwala na współdzielenie stylów między stronami co poprawia spójność wyglądu całego serwisu oraz ułatwia jego utrzymanie w przeciwieństwie do bardziej chaotycznego podejścia stylu wpisanego który może prowadzić do zduplikowanego i trudnego w zarządzaniu kodu

Pytanie 20

Parametr face w znaczniku <font> jest używany do określenia

A. koloru czcionki

B. stylów czcionki

C. typy czcionki

D. rozmiaru czcionki

Zrozumienie parametrów stylizacji tekstu jest kluczowe w pracy z HTML i często napotyka na nieporozumienia. Wiele osób błędnie interpretuje funkcję parametru <b>face</b> w znaczniku <b><font></b>, co prowadzi do niepoprawnych odpowiedzi. Na przykład, nie jest on używany do określenia barwy czcionki, co jest zadaniem innego parametru, jak 'color'. Barwa czcionki dotyczy estetyki i może być ustawiana niezależnie od samej czcionki. Kolejnym błędnym założeniem jest możliwość korzystania z parametru <b>face</b> do definiowania efektów czcionki, takich jak pogrubienie czy kursywa; te efekty są zwykle osiągane przy użyciu osobnych znaczników lub stylów CSS, takich jak 'font-weight' czy 'font-style'. Wreszcie, pomylenie parametru <b>face</b> z określeniem wielkości czcionki również jest częstym błędem myślowym, ponieważ do tego celu używa się atrybutu 'size', który skoncentrowany jest na rozmiarze tekstu, a nie na jego typie. Warto pamiętać, że precyzyjne zrozumienie tych różnic nie tylko wpływa na jakość tworzonego kodu, ale również na dostępność i estetykę stron internetowych.

Pytanie 21

Jak dołączyć do strony skrypt z pliku przyklad.js?

<script link="przyklad.js"></script>

<link rel="script" href="/przyklad.js">

<script>przyklad.js</script>

<script src="/przyklad.js"></script>

Zewnętrzny plik JavaScript podłącza się znacznikiem <script>, wskazując jego lokalizację w atrybucie src (tak jak źródło obrazu w <img>): <script src="/przyklad.js"></script>. Znacznik <script> zawsze wymaga części zamykającej, nawet gdy nie ma między tagami żadnego kodu. Dlatego poprawny jest ten zapis.

Pytanie 22

Który element blokowy HTML5 jest przeznaczony na nawigację witryny?

nav

main

aside

header

Element semantyczny <nav> wydziela blok NAWIGACJI witryny - zwykle menu główne lub zestaw linków do najważniejszych podstron, np. <nav><a href="/">Start</a> <a href="/kontakt">Kontakt</a></nav>. Semantyka jest ważna nie tylko porządkowo: czytniki ekranu i wyszukiwarki rozpoznają po <nav>, że to nawigacja. Zapamiętaj: „nav” jak nawigacja.

Pytanie 23

Który zapis znacznika <meta> jest poprawny pod względem użytych atrybutów?

<meta background="blue">

<meta name="description" content="...">

<meta name="!DOCTYPE">

<meta title="Strona dla hobbystów">

Pozostałe zapisy używają nieprawidłowych atrybutów. <meta name="!DOCTYPE"> myli <meta> z deklaracją typu dokumentu i nie ma content. <meta title="..."> i <meta background="blue"> stosują atrybuty title i background, które do <meta> nie należą. Poprawny jest <meta name="description" content="...">.

Pytanie 24

Deklaracja <!DOCTYPE HTML> wskazuje, że dokument napisano w której wersji HTML?

A. 6

B. 4

C. 7

D. 5

Deklaracja <!DOCTYPE HTML> - krótka, bez numeru wersji ani odwołania do DTD - to znak rozpoznawczy HTML5. Informuje przeglądarkę, że dokument korzysta z najnowszego standardu. Dlatego oznacza HTML w wersji 5.

Pytanie 25

Który znacznik służy do tworzenia LISTY w HTML?

<td>

<tr>

<th>

<ul>

Listę nieuporządkowaną (punktowaną) tworzy znacznik <ul>, a jej elementy umieszcza się w <li>. Dlatego listę tworzy <ul>.

A. A.

B. D.

C. C.

D. B.

Dokładnie tak powinien wyglądać ten formularz! Zwróć uwagę, jak HTML interpretuje znaczniki <br> – one wymuszają przejście do nowej linii, więc w kodzie wyjściowym każda sekcja obowiązków pojawi się osobno, pod sobą. To, że jeden z checkboxów ma atrybuty disabled oraz checked, powoduje, że jest domyślnie zaznaczony, ale nie można go odznaczyć ani zaznaczyć ponownie – to ważny niuans, bo czasem zapomina się, że disabled nie oznacza tylko „wyszarzony”, ale też „nie bierz udziału w wysyłaniu formularza”. Takie wykorzystanie checkboxów jest powszechne, szczególnie jeśli chcesz pokazać użytkownikowi pewne stałe informacje (np. obowiązek, którego nie można uniknąć). Z mojego doświadczenia, bardzo często w praktycznych projektach „disabled” stosuje się np. przy wymaganych oświadczeniach, gdzie użytkownik ma tylko do wglądu informację, że coś już jest włączone i nie może tego zmienić. No i jeszcze – checked przy pisaniu kodu powoduje, że checkbox jest domyślnie zaznaczony, co jest zgodne z kodem źródłowym. Same nazwy pól (czyli atrybuty name i value) zostaną wysłane do serwera tylko dla tych pól, które nie są disabled i użytkownik je zaznaczył. To też jest bardzo praktyczna rzecz, bo pozwala precyzyjnie sterować tym, co trafia do backendu. Moim zdaniem taka forma zapisu formularza to dobry punkt wyjścia do dalszej rozbudowy – łatwo dodać tutaj walidację, obsługę JavaScript czy zastosować style CSS. Trzymanie się tej składni ułatwia też potem pracę zespołową, bo jest czytelna i zgodna z oczekiwaniami innych programistów. Podsumowując, wybrałeś opcję najbliższą temu, co wyświetli przeglądarka na bazie danego kodu HTML – i to jest podejście zgodne ze standardami, doceniane w branży.

Pytanie 27

Na ilustracji przedstawiono schemat rozmieszczenia elementów na stronie WWW. W której z jej sekcji zazwyczaj znajduje się stopka strony?

A. 5

B. 1

C. 4

D. 2

Odpowiedź 5 jest poprawna ponieważ w standardach projektowania stron internetowych stopka strony zazwyczaj znajduje się na dole każdej podstrony. Stopka to miejsce gdzie umieszczane są informacje takie jak prawa autorskie prywatność i linki do kontaktu. Dobrze zaprojektowana stopka może także zawierać skróty nawigacyjne które pomagają użytkownikowi szybko przemieszczać się po stronie. W praktyce projektanci stron WWW stosują podejście oparte na responsywnym designie co oznacza że stopka powinna być łatwo dostępna i czytelna na różnych urządzeniach. Wykorzystanie CSS Grid lub Flexbox pozwala na elastyczne zarządzanie układem strony co jest szczególnie przydatne przy projektowaniu stopki. Ponadto stopki są elementami które odpowiadają za spójność wizualną całej strony internetowej zapewniając użytkownikowi intuicyjne doświadczenie. Umieszczanie stopki w dolnej części strony jest zgodne z oczekiwaniami użytkowników co zwiększa użyteczność serwisu i pozytywnie wpływa na jego odbiór. Praktyczne zastosowanie tego podejścia można zauważyć na wielu profesjonalnych stronach gdzie stopka jest wyraźnie oddzielona i przejrzysta co ułatwia użytkownikowi odnalezienie potrzebnych informacji.

Pytanie 28

Jakie polecenie HTML powinno być zastosowane, aby sformatować akapit tekstu?

Tekst może być zaznaczony albo istotny dla autora

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

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

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

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

Odpowiedź druga jest prawidłowa, ponieważ stosuje poprawną składnię HTML do oznaczenia fragmentów tekstu z różnym formatowaniem. Element <p> służy do definiowania paragrafu, w którym tekst jest umieszczony. Element <mark> używany jest do oznaczania tekstu, który powinien być zwrócony uwagę czytelnika, poprzez podkreślenie go kolorem tła. Z kolei <em> jest przeznaczony do oznaczenia tekstu, który ma zostać wyróżniony jako istotny, zazwyczaj poprzez użycie kursywy. Użycie tych elementów w połączeniu z zamykającymi tagami, jak w odpowiedzi drugiej, jest zgodne z zaleceniami standardów HTML5, które kładą nacisk na semantyczne znaczenie znaczników. To podejście wspiera dostępność oraz SEO, ponieważ pomaga czytnikom ekranowym i wyszukiwarkom lepiej zrozumieć strukturę i znaczenie treści. Praktyczne zastosowanie tych znaczników można zobaczyć na stronach internetowych, gdzie kluczowe informacje muszą być odpowiednio wyróżnione, aby poprawić doświadczenie użytkownika i przekazać istotne dane w czytelny sposób.

Pytanie 29

Przedstawiony styl generuje pojedyncze obramowanie, które posiada następujące właściwości:

border: solid 1px;
 border-color: red blue green yellow;

A. krawędź lewa ma kolor czerwony, krawędź dolna w kolorze niebieskim, krawędź prawa w odcieniu zielonym, krawędź górna w kolorze żółtym

B. krawędź górna ma kolor czerwony, krawędź lewa w kolorze niebieskim, krawędź dolna w odcieniu zielonym, krawędź prawa w kolorze żółtym

C. krawędź górna jest koloru czerwonego, krawędź prawa koloru niebieskiego, krawędź dolna koloru zielonego, krawędź lewa koloru żółtego

D. krawędź prawa ma kolor czerwony, krawędź dolna w kolorze niebieskim, krawędź lewa w odcieniu zielonym, krawędź górna w kolorze żółtym

Prawidłowa odpowiedź wynika z użycia właściwości CSS border-color z czterema wartościami przypisanymi kolejno do górnej prawej dolnej i lewej krawędzi elementu. W tym przypadku border-color: red blue green yellow; przypisuje kolor czerwony do górnej krawędzi kolor niebieski do prawej zielony do dolnej i żółty do lewej. Jest to powszechna praktyka w stylizacji stron internetowych gdzie cztery wartości podane dla border-color definiują odpowiednio kolory górnej prawej dolnej i lewej krawędzi. Taki styl umożliwia projektantom tworzenie wizualnie interesujących i wyróżniających się elementów poprzez łatwe manipulowanie kolorami i szerokościami obramowań. Zastosowanie tego w praktyce może być wykorzystane do zaznaczenia ważnych sekcji strony lub wyróżnienia określonych elementów. Tego rodzaju technika stylizacji jest zgodna z dobrymi praktykami i standardami CSS co pozwala na uzyskanie estetycznego i funkcjonalnego interfejsu użytkownika. Wiedza o przypisaniu kolorów do poszczególnych krawędzi jest kluczowa w projektowaniu elastycznych i responsywnych układów stron.

Pytanie 30

Element

<meta charset="utf-8">

definiuje metadane dotyczące strony internetowej, odnosząc się do

A. kodowania znaków

B. słów kluczowych

C. opisu witryny

D. języka witryny

Ten element <meta charset="utf-8"> jest naprawdę ważny w nagłówku stron HTML, bo to on mówi przeglądarkom, jak odczytywać znaki w Twoim dokumencie. Dzięki temu tekst wyświetla się poprawnie na różnych urządzeniach. UTF-8 jest najbardziej popularnym kodowaniem, bo obsługuje niemal wszystkie znaki z różnych języków, co sprawia, że Twoja strona może być bardziej uniwersalna. Na przykład, jeśli masz tekst po polsku, to użycie UTF-8 upewnia się, że takie znaki jak ą czy ć będą prawidłowo pokazane. Właśnie dlatego warto stosować UTF-8, bo to, co zaleca W3C, jest bardzo sensowne - chodzi przecież o to, żeby strona była dostępna dla każdego, niezależnie od tego, z jakiego języka korzysta.

Pytanie 31

W katalogu www znajdują się podkatalogi html oraz styles, w których umieszczone są pliki o rozszerzeniu html oraz pliki z rozszerzeniem css. Aby dołączyć styl.css do pliku HTML, należy zastosować

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

B. <link rel=" Stylesheet" type="text/css" href="www/style/styl. css" />

C. <link rel="Stylesheet" type="text/css" href="../style/styl.css" />

D. <link rel="Stylesheet" type="text/css" href="/style/styl.css" />

Przy analizie pozostałych odpowiedzi można dostrzec pewne powszechne błędy w rozumieniu ścieżek do zasobów w dokumentach HTML. W pierwszej odpowiedzi, użycie ścieżki 'www/style/styl.css' sugeruje, że autor zakłada, że jest to pełna ścieżka dostępu, co jest mylące, ponieważ taka ścieżka nie jest względna w kontekście pliku HTML znajdującego się w folderze 'html'. Ponadto, użycie dużych liter w atrybucie 'rel' (np. 'Stylesheet') jest niepoprawne, ponieważ HTML jest językiem case-insensitive, lecz konwencjonalnie zaleca się używanie małych liter. Druga odpowiedź, wskazująca na '/style/styl.css', implikuje, że 'style' jest umiejscowione w katalogu głównym serwera, co również jest błędne w kontekście podanej struktury folderów. Takie podejście jest typowym błędem przy zrozumieniu relatywnych i bezwzględnych ścieżek URL. Ostatnia odpowiedź, 'styl.css', zakłada, że plik CSS znajduje się w tym samym folderze co plik HTML, co nie odpowiada rzeczywistości w przedstawionym układzie folderów. Wszyscy, którzy pracują nad projektami webowymi, muszą zrozumieć, jak ważne jest precyzyjne określenie lokalizacji zasobów, ponieważ błędy te mogą prowadzić do ładowania nieprawidłowych plików, co w efekcie negatywnie wpływa na wygląd i funkcjonalność strony. Wiedza na temat struktury folderów oraz umiejętność nawigacji po nich jest kluczowym elementem w pracy programisty.

Pytanie 32

Którego znacznika użyć do sekcji cytatu (mogącej zawierać kilka akapitów, z wcięciem)?

<blockq>

<blockquote>

<indent>

<q>

Do oznaczenia dłuższego cytatu blokowego - mogącego obejmować kilka akapitów i domyślnie wyświetlanego z wcięciem - służy <blockquote>. To element blokowy. Dlatego sekcję cytatu tworzy <blockquote>.

Pytanie 33

Podaj definicję metody, którą trzeba umieścić w miejscu kropek, aby na stronie WWW pojawił się tekst: Jan Kowalski

A. A

B. D

C. B

D. C

Pozostałe odpowiedzi zawierają błędy związane z niepoprawnym użyciem kontekstu this lub niekompletną definicją funkcji. W opcji B metoda dane została zdefiniowana jako funkcja globalna, co powoduje, że this nie odnosi się do obiektu osoba, ale do obiektu globalnego, co uniemożliwia poprawne odwołanie się do właściwości imie i nazwisko. To prowadzi do błędnych lub niezdefiniowanych wyników, ponieważ this w tym kontekście nie zawiera oczekiwanych właściwości. Opcja C nie używa słowa kluczowego this, co oznacza, że zmienne imie i nazwisko są traktowane jako zmienne globalne, a nie właściwości obiektu osoba. Jeżeli takie zmienne globalne nie istnieją, powoduje to błąd w wykonaniu, ponieważ kod próbuje odwołać się do niezdefiniowanych zmiennych. W opcji D użycie funkcji bez return powoduje, że metoda dane nie zwraca żadnej wartości, co skutkuje przypisaniem undefined do innerHTML, co jest oczywistym błędem w kontekście oczekiwanego wyświetlenia tekstu. Wszystkie te błędne podejścia wynikają z niepoprawnego zarządzania kontekstem obiektowym w JavaScript, co podkreśla znaczenie zrozumienia wiązania dynamicznego słowa kluczowego this i dobrych praktyk w projektowaniu metod obiektowych w JavaScript. Kluczowym aspektem jest zapewnienie, że metody mają dostęp do właściwości obiektu, w ramach którego zostały zdefiniowane, co jest osiągane przez poprawne użycie this w kontekście metody wewnętrznej obiektu.

Pytanie 34

Jak wygląda poprawny zapis znaczników, który jest zgodny z normami języka XHTML i odpowiada za łamanie linii?

A. </ br>

B. </br/>

C. <br/>

D. <br/>

Zapis znacznika </ br> jest niepoprawny, ponieważ nie można w ten sposób zamknąć znacznika, który nie ma zawartości. W XHTML wszystkie tagi muszą być poprawnie sformatowane, a takie umieszczenie spacji w znaczniku zamknięcia oraz użycie nieodpowiedniego formatu są całkowicie niezgodne z wymaganiami standardów. Kolejną niepoprawną koncepcją jest użycie </br/> - chociaż syntaktyczna forma jest bliska poprawnej, znaczniki otwierające i zamykające muszą mieć odpowiednie konteksty. W przypadku znaczników samozamykających się, takich jak <br/>, nie ma potrzeby umieszczania pary znaczników, ponieważ ich funkcjonalność polega na wstawieniu łamania linii, a nie na wytwarzaniu dodatkowego bloku. Ostatnią z wymienionych odpowiedzi, <br>, również nie jest zgodna z odpowiednim formatowaniem XHTML, ponieważ brakuje ukośnika, co czyni go niepoprawnym w kontekście stricte przestrzegania standardu. Podstawowym błędem w myśleniu, który prowadzi do tych niepoprawnych wniosków, jest niewłaściwe zrozumienie zasady samozamykania znaczników oraz ich roli w strukturze dokumentu HTML. Ignorowanie zasadności i standardów tworzenia HTML prowadzi do wielu problemów z interpretacją kodu przez różne środowiska oraz przeglądarki, co wpływa na ostateczną jakość i dostępność stron internetowych.

Pytanie 35

Aby strona poprawnie skalowała się na urządzeniach mobilnych, w sekcji <head> należy umieścić:

<link rel="stylesheet">

<title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

Znacznik <meta name="viewport" content="width=device-width, initial-scale=1"> mówi przeglądarce mobilnej, że szerokość rzutni (viewport) ma odpowiadać szerokości urządzenia, a strona ma startować w skali 1:1. Bez niego telefon renderuje stronę jako szeroką i pomniejsza ją, przez co media queries nie działają jak należy. Dlatego dla poprawnego skalowania na komórkach niezbędny jest meta viewport.

Pytanie 36

Grafik pragnie zmienić obraz JPG na format PNG bez utraty jakości, tak aby w obszarach, gdzie pierwotnie był kolor biały, w finalnym obrazie występowała przezroczystość. W tym celu powinien

A. dodać kanał alfa

B. zmniejszyć rozdzielczość obrazu

C. przekształcić obraz w odcienie szarości

D. zaimportować obraz do edytora grafiki wektorowej

Dodanie kanału alfa do obrazu JPG, aby uzyskać przezroczystość w kolorze białym, jest najlepszym podejściem. Kanał alfa to dodatkowa warstwa informacji w pliku graficznym, która definiuje przezroczystość każdego piksela. W formacie PNG, kanał alfa umożliwia tworzenie przezroczystych tła, co jest szczególnie przydatne w projektach, gdzie elementy graficzne muszą być nakładane na różne tła. W praktyce, aby uzyskać pożądany efekt, grafik powinien użyć narzędzi do edycji grafiki, takich jak Adobe Photoshop, GIMP lub Inkscape. Po zaimportowaniu obrazu JPG, użytkownik może użyć funkcji selekcji koloru, aby zaznaczyć obszary białe, a następnie usunąć je, co wprowadzi przezroczystość w tych miejscach. Na końcu, obraz można zapisać jako PNG, co zachowa wprowadzone zmiany. Tego typu operacje są standardem w pracy z grafiką komputerową, szczególnie w projektach związanych z web designem i tworzeniem materiałów reklamowych.

Pytanie 37

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

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

C. zwiększyć rozdzielczość.

D. zmienić format grafiki na CDR.

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.

Pytanie 38

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 informacją dla robota wyszukiwarki, aby nie podążał za tym linkiem i nie przekazywał mu wartości rankingowej

C. oznacza, że kliknięcie w link nie przeniesie użytkownika na stronę website.com

D. jest poleceniem dla przeglądarki, aby nie traktowała słowa "link" jako odnośnika

Warto rozdzielić dwie rzeczy: działanie linku dla użytkownika i jego interpretację przez wyszukiwarki. Odpowiedź o braku przejścia na website.com oraz ta o renderowaniu słowa "link" mylą atrybut rel="nofollow" z zachowaniem przeglądarki - tymczasem nofollow nie dotyka sposobu, w jaki link działa czy wygląda; kliknięcie nadal otwiera stronę docelową. Odpowiedź o nowej karcie opisuje całkiem inny atrybut: za to odpowiada target="_blank", nie rel. Poprawna jest informacja o robocie wyszukiwarki: nofollow to sygnał dla wyszukiwarek, aby nie podążały za tym odnośnikiem i nie przekazywały mu wartości rankingowej. To narzędzie SEO służące do kontroli, które linki firmujemy autorytetem swojej witryny, a nie sposób na zmianę funkcjonowania samego hiperłącza.

Pytanie 39

Na czym polega walidacja strony internetowej?

A. na reklamie strony

B. na działaniach zwiększających liczbę odwiedzin

C. na sprawdzeniu jej w celu wykrycia i usunięcia błędów

D. na udostępnieniu jej w Internecie

Walidacja strony internetowej to sprawdzenie jej kodu (np. HTML, CSS) pod kątem zgodności ze standardami W3C, w celu wykrycia i usunięcia błędów. Poprawny kod lepiej wyświetla się w różnych przeglądarkach. Dlatego walidacja to wykrywanie i usuwanie błędów.

Pytanie 40

Termin "front-end" w kontekście projektowania stron WWW odnosi się do

A. organizacji informacji na serwerze WWW

B. interfejsu witryny internetowej powiązanego z technologiami operującymi w przeglądarce internetowej

C. działania skryptów oraz aplikacji realizowanych po stronie serwera WWW

D. bazy danych z danymi publikowanymi na stronie

Front-end to wszystko to, co widzisz w przeglądarce, czyli ogólnie mówiąc, wygląd strony i to, jak się z nią bawisz. Mówię tu o kolorach, czcionkach, układzie czy różnych akcjach, które możesz wykonać. Technologie jak HTML, CSS i JavaScript są tu na czołowej pozycji, bo to dzięki nim strona jest taka interaktywna i przyjemna dla oka. Przykłady? Budowa responsywnych interfejsów, które zmieniają rozmiar na różnych ekranach, albo skrypty, które potrafią zmieniać treści na stronie bez przeładowania jej. Dobrze jest też pomyśleć o tym, żeby strona ładowała się jak najszybciej, bo to wpływa na to, jak użytkownicy będą ją odbierać. A jeśli znasz nowe frameworki, jak React czy Angular, to naprawdę ułatwia stworzenie bardziej złożonych aplikacji webowych, co w dzisiejszych czasach jest mega ważne.

Rozpocznij nowy egzamin

Powrót do strony głównej