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: 15 maja 2026 13:09
Data zakończenia: 15 maja 2026 13:26

Egzamin zdany!

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Którego atrybutu należy użyć w miejscu trzech kropek w znaczniku HTML5 <blockquote>, aby zdefiniować źródło cytatu?

<blockquote ...="https://pl.wikipedia.org">
Pokojowa Nagroda Nobla jest przyznawana kandydatom, którzy wykonali największą lub najlepszą
pracę na rzecz braterstwa między narodami
</blockquote>

A. alt

B. cite

C. src

D. href

Niestety, twoja odpowiedź nie jest poprawna. Atrybut 'cite' w znaczniku <blockquote> jest używany do definiowania źródła cytatu, a nie 'alt', 'src' ani 'href'. Atrybut 'alt' jest używany w obrazach jako tekst alternatywny, który jest wyświetlany, gdy obraz nie może być ładowany lub jest odczytywany przez czytniki ekranowe. Z kolei 'src' jest atrybutem, który określa ścieżkę do obrazu lub innego zasobu multimedialnego. 'href' jest używany w znacznikach 'a' i 'link' do określenia URL strony lub innego zasobu, do którego prowadzi link. Pomyłka ta może wynikać z braku zrozumienia różnych zastosowań atrybutów w HTML. Pamiętaj, że każdy atrybut ma swoje specyficzne zastosowanie i nie są one zamienne.

Pytanie 2

Wskaż fragment kodu CSS, który odpowiada układowi bloków 2 - 5, zakładając, że są one oparte na poniższym kodzie HTML.

A. A

B. B

C. C

D. D

Odpowiedź B jest poprawna, ponieważ skutecznie rozmieszcza bloki 2 5 w zgodzie z przedstawionym układem HTML. Użycie właściwości float pozwala na precyzyjne kontrolowanie położenia elementów w układzie blokowym. W tym przypadku float left dla bloków #drugi i #trzeci oraz float right dla #czwarty sprawiają że bloki są odpowiednio rozstawione. Dodatkowo #piaty z float left zapewnia jego poprawne umiejscowienie poniżej bloku #trzeci. To rozwiązanie jest zgodne z dobrymi praktykami w projektowaniu responsywnych layoutów gdzie float jest używane do budowania elastycznych struktur. Ważne jest także odpowiednie zarządzanie szerokościami elementów aby nie przekraczały 100% szerokości kontenera a także uwzględnienie zastosowania clearfix aby uniknąć problemów z przepływem elementów. Poprawne zrozumienie float oraz szerokości w CSS jest kluczowe w tworzeniu zgodnych z standardami projektów internetowych co pozwala na lepszą skalowalność i utrzymanie strony w przyszłości.

Pytanie 3

W CSS zapisany w ten sposób:

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

spowoduje, że rysunek.png stanie się

A. tłem każdego akapitu

B. tłem całej witryny

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

D. widoczny obok każdego akapitu

Zapis CSS p { background-image: url("rysunek.png"); } oznacza, że dla każdego elementu akapitowego 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 4

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. tr { background-color: Pink; }

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

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

D. tr:active { 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 5

W HTML zdefiniowano hiperłącze zawierające znak #. Co się wydarzy po kliknięciu na ten odsyłacz?

<a href="#dane"></a>

A. Otworzy się nowa karta przeglądarki o nazwie dane

B. Uruchomi się skrypt o nazwie dane

C. Zostanie wskazany względny adres URL o nazwie dane

D. Strona przewinie się do elementu o id równym dane

W HTML znacznik <a> to taki element, który tworzy hiperłącza. Dzięki nim możesz przeskakiwać po stronie lub między różnymi stronami. Atrybut href wskazuje, dokąd prowadzi to łącze. Jak widzisz, gdy href zaczyna się od #, to znaczy, że przeniesie Cię do konkretnego miejsca na tej samej stronie, które jest oznaczone atrybutem id. Czyli, jeśli masz href="#dane", to strona przewinie się do elementu z id="dane". To bardzo przydatna rzecz, szczególnie na długich stronach, bo zamiast przewijać wszystko, możesz od razu trafić do odpowiedniej sekcji. To zgodne z tymi sztywnymi zasadami W3C, które mówią o tym, że strony powinny być łatwe w obsłudze. Powinieneś też pamiętać, żeby zawsze sprawdzać, czy id, do którego się odnosisz, istnieje. Dzięki temu unikniesz problemów z nawigacją.

Pytanie 6

Jaką formę ma kolor przedstawiony w systemie szesnastkowym jako #11FE07 w formacie RGB?

A. rgb(17,FE,7)

B. rgb(11,127,7)

C. rgb(17,255,7)

D. rgb(17,254,7)

Wszystkie trzy niepoprawne odpowiedzi odzwierciedlają błędne konwersje wartości szesnastkowych na wartości dziesiętne w systemie RGB. Pierwsza z odpowiedzi sugeruje użycie rgb(17, FE, 7), co jest niepoprawne, ponieważ 'FE' nie zostało przekształcone na wartość dziesiętną. W systemie szesnastkowym 'FE' odpowiada wartości 254, więc ta odpowiedź nie oddaje prawidłowej wartości dla koloru. W drugiej odpowiedzi, rgb(11, 127, 7), również występuje nieprawidłowa konwersja - '11' powinno być 17, a '127' nie ma odpowiadającej wartości w kolorze #11FE07, ponieważ powinno to być 254. Ostatnia odpowiedź, rgb(17, 254, 7), jest bliska prawidłowej, ale nie jest uznawana za poprawną, co może budzić wątpliwości. Kluczowe w całym procesie jest zrozumienie, że każda para szesnastkowa musi być konwertowana na odpowiednią wartość dziesiętną, a błędne konwersje prowadzą do nieprawidłowych reprezentacji kolorów. Właściwe rozumienie i precyzyjne stosowanie konwersji jest fundamentalne w pracy z kolorami w różnych projektach graficznych.

Pytanie 7

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 wewnętrzny

B. Styl alternatywny, zewnętrzny

C. Styl wpisany, lokalny

D. Styl zewnętrzny

Styl wpisany lokalny jest metodą bezpośredniego przypisywania reguł CSS do konkretnych elementów HTML za pomocą atrybutu style W przedstawionym przykładzie kodu stylizacja jest dodawana bezpośrednio do elementu p co sprawia że ten element będzie miał tekst w kolorze czerwonym Styl wpisany jest szczególnie przydatny gdy chcemy wprowadzić szybkie zmiany dla pojedynczych elementów bez ingerowania w zewnętrzne lub wewnętrzne arkusze stylów Takie podejście jest używane w sytuacjach gdy stylizacja dotyczy jedynie pojedynczego elementu lub gdy chcemy nadpisać reguły z innych arkuszy stylów Jednak w kontekście skalowalności i utrzymania kodu nie jest to rekomendowane w większych projektach W takich przypadkach lepiej stosować style zewnętrzne które pozwalają na bardziej zorganizowane i zarządzalne podejście do stylizacji witryny Warto pamiętać że styl wpisany ma wyższy priorytet niż style zewnętrzne co oznacza że w przypadku konfliktu reguł to właśnie styl wpisany zostanie zastosowany Podstawową zaletą stylu wpisanego jest jego prostota i bezpośredniość co czyni go doskonałym narzędziem do szybkiego prototypowania

Pytanie 8

W skrypcie JavaScript użyto metody DOM getElementsByClassName('akapit'). Ta metoda odniesie się do akapitu

A. akapit

B. akapit2

C. akapit3

D. akapit4

Metoda DOM getElementsByClassName jest jedną z najważniejszych funkcji w JavaScript, która pozwala na selekcję elementów na stronie internetowej na podstawie ich klas CSS. W tym przypadku, odpowiedź akapit4 jest poprawna, ponieważ element ten ma przypisaną klasę "akapit", co czyni go bezpośrednim kandydatem do selekcji przez metodę getElementsByClassName('akapit'). Metoda ta zwraca kolekcję elementów (HTMLCollection), które mają podaną klasę, a następnie można z nimi pracować w kodzie JavaScript. Na przykład, możemy zmieniać ich style, zawartość lub dodawać zdarzenia. Dobrą praktyką jest stosowanie klas do stylizacji oraz manipulacji DOM, co pozwala na lepszą organizację kodu i zwiększa jego czytelność. Pamiętaj, że klasy są bardziej uniwersalne i elastyczne niż identyfikatory (ID), które powinny być unikalne na stronie. W przypadku konieczności stosowania metod do manipulacji elementami DOM, warto znać również inne metody, takie jak querySelector i querySelectorAll, które oferują bardziej zaawansowane opcje selekcji, umożliwiające wykorzystanie kombinacji klas, identyfikatorów i innych atrybutów.

Pytanie 9

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

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

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

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

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

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

Pytanie 10

W CSS zapis selektora

p > i { color: red;}

wskazuje, że kolorem czerwonym będzie wyróżniony

A. jedynie tekst w znaczniku , który znajduje się bezpośrednio wewnątrz znacznika

B. każdy tekst w znaczniku z wyjątkiem tych w znaczniku

C. wszystkie teksty w znaczniku lub każdy tekst w znaczniku

D. tylko ten tekst znacznika , który ma przypisaną klasę o nazwie i

Odpowiedź ta jest poprawna, ponieważ selektor CSS <pre>p > i { color: red; }</pre> definiuje regułę, która odnosi się jedynie do elementów znajdujących się bezpośrednio wewnątrz elementu . Operator > jest selektorem potomka bezpośredniego, co oznacza, że tylko te , które są bezpośrednio dzieckiem , będą miały przypisany kolor czerwony. Na przykład, jeśli w kodzie HTML mamy Tekst, to ten tekst będzie czerwony. Z drugiej strony, jeżeli znajduje się zagnieżdżone w innym elemencie wewnątrz , jak Tekst, to ten tekst nie będzie formatowany na czerwono. Tego typu selektory są niezwykle przydatne w praktycznym zastosowaniu, gdyż pozwalają na precyzyjne określenie stylów dla konkretnych elementów, co jest zgodne z najlepszymi praktykami projektowania stron internetowych, takimi jak utrzymanie czytelności kodu i unikanie niezamierzonych efektów formatowania.

Pytanie 11

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

nav

main

aside

header

Semantyczny element <nav> w HTML5 służy do grupowania głównych odnośników nawigacyjnych witryny (menu). Użycie znacznika o jasnym znaczeniu pomaga przeglądarkom, wyszukiwarkom i technologiom wspomagającym (czytnikom ekranu) rozpoznać, że to blok nawigacji. Dlatego do nawigacji przeznaczony jest <nav>.

Pytanie 12

Tekst można pogrubić za pomocą znacznika , a także stosując odpowiednie właściwości CSS.

A. text-weight

B. font-weight

C. font-size

D. text-size

Odpowiedź 'font-weight' jest poprawna, ponieważ jest to właściwość CSS, która kontroluje grubość tekstu w elementach HTML. Używając 'font-weight', możesz określić grubość czcionki w sposób zarówno liczbowy (np. 400 dla normalnej grubości, 700 dla pogrubionej) jak i słowny (np. 'normal', 'bold'). Przykładem zastosowania może być stylizacja nagłówków na stronie internetowej, gdzie chcesz wyróżnić ważne informacje. W praktyce, stylizując nagłówki h1, h2, h3, można użyć 'font-weight: bold;' aby przyciągnąć uwagę czytelników. Zgodnie z najlepszymi praktykami, ważne jest, aby nie przesadzać z używaniem pogrubienia, ponieważ może to prowadzić do problemów z czytelnością tekstu. Warto również pamiętać, że dostępność stron internetowych jest kluczowa, dlatego należy testować różne style na różnych urządzeniach i w różnych przeglądarkach, aby upewnić się, że tekst jest czytelny dla wszystkich użytkowników.

Pytanie 13

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

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

A. ukrywa wprowadzone znaki.

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

C. pozwala na wprowadzanie jedynie wartości liczbowych.

D. wyświetla wprowadzone znaki.

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 14

Aby uzyskać akapit, w którym słowo „zaznaczony” jest wyróżnione znacznikiem , a słowo „istotny” oznaczone jako ważne  – z poprawnym otwarciem i zamknięciem znaczników – należy zastosować kod:

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

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

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

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

Poprawny kod to

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

Każdy znacznik obejmuje dokładnie to słowo, którego dotyczy:  wyróżnia „zaznaczony”, a  oznacza „istotny” jako ważny – i oba są zamknięte. Znaczniki nie zachodzą też na siebie nieprawidłowo. Dlatego ta wersja jest poprawna.

Pytanie 15

Która z zasad walidacji strony internetowej jest nieprawidłowa?

A. Jeżeli w poleceniu występuje kilka atrybutów, ich kolejność powinna być uporządkowana alfabetycznie np. ```<img alt="..." src="/.."/>```

B. Wyłączanie tagów musi następować w odwrotnej sekwencji do ich włączenia, np. ``` ... <big>...</big>```

C. Tagi, poza samozamykającymi się, funkcjonują do momentu ich wyłączenia znakiem "/", np. ``` ..```

D. W tagach nie jest brana pod uwagę różnica między dużymi a małymi literami, np. `````` i `````` to ten sam tag.

Koncepcje zawarte w niepoprawnych odpowiedziach są oparte na błędnym zrozumieniu zasad działania znaczników HTML. W kontekście wyłączania znaczników, ważne jest, aby pamiętać, że znacznik startowy powinien być zawsze zamknięty odpowiednim znacznikiem końcowym, co oznacza, że struktura dokumentu musi być prawidłowo zagnieżdżona. Zasada dotycząca wyłączania znaczników w odwrotnej kolejności jest nieprawidłowa, ponieważ znaczniki nie są stosowane w taki sposób, a ich zamykanie powinno być zgodne z ich zagnieżdżeniem. Rozumienie tej zasady jest kluczowe dla tworzenia poprawnej struktury dokumentu HTML. Warto również zauważyć, że HTML nie rozróżnia wielkich i małych liter w znacznikach, co jest istotnym uproszczeniem, ale nie oznacza, że można je mieszać w sposób dowolny. Zastosowanie spójnych konwencji nazewnictwa, takich jak używanie małych liter, jest wskazane dla zachowania czytelności kodu. Rozumienie tych zasad jest kluczowe dla efektywnego projektowania stron internetowych oraz dla utrzymania wysokiej jakości kodu. W przypadku, gdy znacznik nie jest poprawnie zamknięty, może to prowadzić do błędów w renderowaniu strony oraz problemów z jej dostępnością. Dlatego kluczowe jest stosowanie się do zasad poprawności kodu i jego semantyki.

Pytanie 16

Jaką postać ma kolor zdefiniowany w formacie szesnastkowym jako #11FE07 w modelu RGB?

A. rgb(ll, 127, 7)

B. rgb(17, 254, 7)

C. rgb(17, 255, 7)

D. rgb(17, FE, 7)

Odpowiedzi rgb(ll, 127, 7), rgb(17, 255, 7) i rgb(17, FE, 7) mają błędy, które wynikają z niewłaściwego zrozumienia konwersji szesnastkowych na dziesiętne. W pierwszej odpowiedzi 'll' to w ogóle nie jest poprawna wartość w kontekście kolorów RGB. W systemie RGB musimy używać całkowitych liczb od 0 do 255, a 'll' to żaden numer. W drugiej odpowiedzi, zmiana 'FE' na '255' to błąd, bo 'FE' w szesnastkowym to 254 w dziesiętnym, więc tu jest niezgodność. A w odpowiedzi 'rgb(17, FE, 7)' znowu nie przeliczono 'FE', przez co staje się to nieczytelne i niezgodne ze standardami RGB. Często ludzie mylą różne systemy liczbowe przy konwertowaniu kolorów i to jest zwyczajny błąd. Fajnym pomysłem na naukę jest zabawa z narzędziami do kolorów w programach graficznych, bo to pomaga lepiej zrozumieć te przeliczenia i ogarnąć różnice między systemami liczbowymi.

Pytanie 17

Definicja stylu w CSS, którą zaprezentowano, dotyczy odsyłacza, który

a:visited {color: orange;}

A. ma wskaźnik myszy umieszczony nad sobą

B. był wcześniej odwiedzany

C. posiada niepoprawny adres URL

D. jeszcze nigdy nie został odwiedzony

Pseudoklasa :visited w CSS jest używana do stylizowania odsyłaczy, które zostały już odwiedzone przez użytkownika. Oznacza to, że przeglądarka zapisuje informacje o odwiedzonych stronach w historii przeglądania i na tej podstawie zmienia styl odsyłacza. W przykładzie a:visited {color: orange;} zmienia kolor tekstu odwiedzonych linków na pomarańczowy. Jest to powszechna praktyka stosowana w projektowaniu stron internetowych, która pomaga użytkownikom wizualnie odróżniać odwiedzone odsyłacze od nieodwiedzonych, co poprawia ich orientację na stronie. Dobre praktyki projektowania zakładają tworzenie intuicyjnych interfejsów użytkownika i użycie mechanizmu :visited do poprawy użyteczności. Ważne jest, aby unikać stosowania bardziej zaawansowanych stylów w :visited, takich jak zmiana rozmiaru czcionki czy dodawanie obrazów tła, ze względu na ograniczenia bezpieczeństwa przeglądarek, które chronią prywatność użytkowników. Korzystanie z :visited w sposób świadomy i zgodny ze standardami W3C zwiększa efektywność nawigacji i jest istotnym elementem przyjaznego projektowania stron WWW

Pytanie 18

Na ilustracji pokazano strukturę bloków witryny internetowej. Który z elementów stylu strony jest zgodny z podanym układem? Dla uproszczenia pominięto cechy koloru tła, wysokości oraz czcionki)

A. #pierwszy {float:left; width:30%; }#drugi {clear:both; width:70%; }#trzeci {float:left; width:70%; }#czwarty {clear:both; }

B. #pierwszy {float:left; width:30%;}#drugi {float:left; width:70%;}#trzeci {float:left; width:70%;}#czwarty {clear:both; }

C. #pierwszy { width: 30%; }#drugi { width: 70%; }#trzeci { width: 70%; }#czwarty { width: 100%; }

D. #pierwszy{float:left; width:30%; }#drugi {clear:both; width:70%; }#trzeci {clear:both; width:70%; }#czwarty {float:left; width:100%; }

Odpowiedź numer 2 jest prawidłowa, ponieważ doskonale odpowiada układowi bloków przedstawionych na rysunku. Zastosowanie właściwości CSS float:left dla wszystkich trzech pierwszych bloków pozwala na ich ułożenie w jednym rzędzie w ramach dostępnej szerokości. Pierwszy blok zajmuje 30 procent, natomiast drugi i trzeci po 70 procent szerokości, co jest zgodne z przedstawionym układem. Dodatkowo, zastosowanie clear:both dla czwartego bloku spowoduje, że rozpocznie on nowy wiersz i zajmie całą szerokość dostępną poniżej poprzednich elementów. Takie rozwiązanie jest efektywne w tworzeniu responsywnych i elastycznych układów stron internetowych. Wykorzystanie float jest powszechnie stosowane w projektowaniu front-end, choć w nowych projektach coraz częściej zastępowane przez flexbox i grid. Warto zrozumieć działanie float i clear, ponieważ pozwalają na manipulację układem elementów na stronie, co jest kluczowe w tworzeniu czytelnych i estetycznych interfejsów użytkownika. Zrozumienie tych koncepcji jest niezbędne dla profesjonalistów zajmujących się tworzeniem stron internetowych.

Pytanie 19

Głównym celem systemu CMS jest oddzielenie treści witryny informacyjnej od jej wyglądu. Jak osiągany jest ten efekt?

A. z bazy danych oraz wyglądu ze zdefiniowanego szablonu

B. z bazy danych oraz wyglądu za pomocą atrybutów HTML

C. ze statycznych plików HTML oraz wyglądu ze zdefiniowanego szablonu

D. ze statycznych plików HTML oraz wyglądu za pomocą technologii FLASH

Wykorzystanie statycznych plików HTML do generowania treści w kontekście systemów CMS jest koncepcją nieefektywną oraz niezgodną z współczesnymi standardami zarządzania treścią. Statyczne pliki HTML są trudne do aktualizacji, co oznacza, że każda zmiana wymaga edycji każdego pliku osobno. W praktyce prowadzi to do zwiększenia ryzyka błędów oraz obniża efektywność pracy, szczególnie w większych projektach. Z drugiej strony, wykorzystanie atrybutów HTML do definiowania wyglądu nie oddziela treści od prezentacji, co jest kluczowym założeniem CMS. Takie podejście nie tylko zagraża porządku w organizacji treści, ale także może negatywnie wpływać na dostępność oraz responsywność strony. Ponadto, technologia FLASH, która była popularna w przeszłości, obecnie nie jest wspierana przez większość przeglądarek i nie jest zalecana w nowoczesnym projektowaniu stron internetowych. Właściwe podejście do zarządzania treścią wymaga stosowania nowoczesnych narzędzi, takich jak bazy danych w połączeniu z szablonami, co zapewnia elastyczność i wygodę użytkowania. W ten sposób można efektywnie zarządzać zawartością oraz zapewnić optymalną wydajność i estetykę serwisu.

Pytanie 20

Wskaż fragment CSS, który odpowiada rozkładowi bloków 2-5, zakładając, że zostały one zbudowane na podstawie podanego kodu HTML.

A. Kod 1

B. Kod 2

C. Kod 3

D. Kod 4

Niepoprawne podejścia w pozostałych kodach wynikają z niewłaściwego użycia właściwości float oraz clear. W Kodzie 1 użycie float: right; dla czwartego bloku jest poprawne, jednak clear: both; dla piątego bloku powoduje, że nie będzie on kontynuował linii z poprzednimi blokami, co nie pasuje do przedstawionego układu. Clear: both; wymusza przeniesienie bloku poniżej aktualnej linii. Kod 3 charakteryzuje się brakiem właściwości clear, co prowadzi do problemów z układem, gdyż blok 5 ułożony float: right; nie rozpocznie nowego wiersza, co jest potrzebne w tym zadaniu. W Kodzie 4 brak jest jakiegokolwiek użycia właściwości float lub clear dla bloków 3, 4 i 5 co uniemożliwia osiągnięcie założonego układu. Brak float dla trzeciego i czwartego bloku spowoduje, że będą one umieszczone pod sobą jako blokowe elementy domyślnie, co nie pasuje do układu. Prawidłowa organizacja układu bloków za pomocą właściwości float opiera się na odpowiednim przypisaniu float: left; lub right; oraz strategicznym użyciu clear, aby kontrolować przepływ elementów w wierszach. Typowym błędem jest niezrozumienie, że clear resetuje przepływ dla kolejnego bloku, co jest kluczowe w manipulacji wyglądem layoutu blokowego w starszych technikach CSS. Takie błędy mogą prowadzić do nieprzewidywalnych rezultatów, zwłaszcza gdy układ jest testowany na różnych przeglądarkach i rozdzielczościach ekranów, co podkreśla znaczenie testowania i walidacji CSS w kontekście projektów webowych. Stosowanie zasad float i clear wymaga precyzyjnego planowania, by unikać konfliktów w przepływie i zachować spójność wizualną projektu webowego.

Pytanie 21

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

A. <img>

B. <title>

C.

D. <section>

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

<img src="/rysunek.png" alt="pejzaż"> Zapisany został kod HTML, który wstawia obrazek na stronę. Jeśli rysunek.png nie zostanie znaleziony, przeglądarka

A. nie załaduje strony internetowej

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

C. w miejscu grafiki pokaże tekst "rysunek.png"

D. w miejscu grafiki zasygnalizuje błąd wyświetlania strony

Kiedy przeglądarka internetowa napotyka na kod HTML, który zawiera element graficzny, w takim przypadku, jeśli wskazany plik nie jest dostępny, następuje zachowanie określone przez atrybut 'alt'. W omawianym przykładzie, gdy przeglądarka nie może znaleźć pliku 'rysunek.png', wyświetli tekst alternatywny 'pejzaż'. Atrybut 'alt' jest niezwykle ważny z perspektywy dostępności oraz SEO, ponieważ pozwala na dostarczenie informacji o obrazie osobom, które nie mogą go zobaczyć, takim jak osoby niewidome korzystające z czytników ekranu. Z punktu widzenia standardów W3C, atrybut 'alt' jest zalecany dla każdego elementu <img>, aby poprawić użyteczność strony. W praktyce, dobrze skonstruowane opisy w atrybucie 'alt' mogą również wpłynąć pozytywnie na pozycjonowanie witryny w wyszukiwarkach, co czyni go kluczowym elementem podczas tworzenia treści na stronie internetowej. Z tego powodu umieszczanie informacyjnych i zrozumiałych opisów w tym atrybucie jest niezbędne nie tylko dla poprawy dostępności, ale także dla efektywnej optymalizacji SEO.

Pytanie 23

Podaj nazwę Systemu Zarządzania Treścią, którego logo jest widoczne na zamieszczonym rysunku?

A. Drupal

B. Joomla!

C. WordPress

D. MediaWiki

Joomla! to popularny system zarządzania treścią CMS który jest szeroko stosowany do tworzenia stron internetowych aplikacji online i portali. Dzięki swojej elastyczności Joomla! jest wybierany przez wiele firm i organizacji do zarządzania treścią online. System ten charakteryzuje się modułową architekturą która umożliwia łatwe rozszerzanie jego funkcjonalności za pomocą komponentów modułów i wtyczek. Jednym z głównych atutów Joomla! jest intuicyjny interfejs użytkownika który umożliwia zarządzanie treścią bez potrzeby głębokiej wiedzy technicznej. Dodatkowo Joomla! wspiera wiele języków co czyni go idealnym wyborem dla międzynarodowych organizacji. Warto również zaznaczyć że Joomla! jest open-source co oznacza że jest rozwijany przez społeczność programistów z całego świata którzy regularnie aktualizują i ulepszają oprogramowanie. Wybranie Joomla! jako CMS pozwala na korzystanie z dużej liczby szablonów i dodatków które umożliwiają personalizację witryny zgodnie z wymaganiami klienta. Dzięki solidnej bazie użytkowników i deweloperów Joomla! oferuje wsparcie techniczne i dokumentację która ułatwia rozwiązywanie problemów. W praktyce Joomla! jest wykorzystywany przez różnorodne witryny od małych blogów po rozbudowane platformy e-commerce co potwierdza jego wszechstronność i skuteczność.

Pytanie 24

Głównym celem systemu CMS jest oddzielenie treści portalu informacyjnego od jego wyglądu. Taki efekt osiąga się przez generowanie zawartości

A. z bazy danych oraz wyglądu ze zdefiniowanego szablonu

B. z bazy danych oraz wyglądu za pomocą atrybutów HTML

C. ze statycznych plików HTML oraz wyglądu ze zdefiniowanego szablonu

D. ze statycznych plików HTML oraz wyglądu za pomocą technologii FLASH

Wybór błędnych odpowiedzi wskazuje na niepełne zrozumienie architektury systemów zarządzania treścią. Odpowiedzi sugerujące generowanie zawartości z 'statycznych plików HTML' nie uwzględniają kluczowej zasady, jaką jest elastyczność i efektywność dynamicznego zarządzania treścią. Statyczne pliki HTML są trudne do aktualizacji, co powoduje, że zmiany w treści są czasochłonne i zwiększają ryzyko błędów. Przykładowo, w przypadku wprowadzenia istotnych zmian w treści, takich jak aktualizacje informacji o produktach, każda zmiana wymagałaby ręcznej edycji wielu plików, co jest niepraktyczne i nieefektywne. Ponadto, wykorzystanie technologii FLASH do generowania wyglądu jest przestarzałym podejściem, które nie jest już wspierane przez większość nowoczesnych przeglądarek internetowych. FLASH nie tylko ogranicza dostępność treści na urządzeniach mobilnych, ale także stwarza zagrożenia związane z bezpieczeństwem. Ostatecznie, podejścia te nie są zgodne z najlepszymi praktykami branżowymi, które kładą nacisk na wykorzystanie responsywnych, łatwych w zarządzaniu szablonów i dynamicznych baz danych, co jest kluczowe dla sukcesu nowoczesnych aplikacji internetowych.

Pytanie 25

Kolorem, który ma odcień niebieski, jest kolor

A. #0000EE

B. #EE0000

C. #00EE00

D. #EE00EE

Poprawna odpowiedź to kolor #0000EE, który reprezentuje odcień niebieskiego w systemie RGB. Kolory w tym systemie definiowane są poprzez trzy składowe: czerwoną, zieloną i niebieską (RGB), gdzie wartości są podawane w formacie szesnastkowym. W przypadku #0000EE, pierwsze dwie pary zer oznaczają brak składowych czerwonej i zielonej, natomiast ostatnia para 'EE' wskazuje na wysoką intensywność składowej niebieskiej. Takie podejście jest powszechnie stosowane w programowaniu i projektowaniu stron internetowych, gdzie precyzyjnie określone kolory mają kluczowe znaczenie dla estetyki i użyteczności interfejsu. Przykładem zastosowania koloru niebieskiego może być jego użycie w projektach związanych z tematyką technologiczną lub finansową, gdzie niebieski symbolizuje zaufanie i profesjonalizm. Warto również zwrócić uwagę, że w kontekście dostępności barw, stosowanie odpowiednich kontrastów z tłem jest niezbędne, aby zapewnić czytelność tekstu i elementów graficznych. Odpowiednie wykorzystanie kodów koloru może znacząco wpłynąć na postrzeganie marki oraz interakcję użytkowników z treściami wizualnymi na stronach internetowych.

Pytanie 26

W HTML atrybut znacznika video, który umożliwia ciągłe odtwarzanie, to

A. loop

B. muted

C. poster

D. controls

Atrybut loop w znaczniku video jest kluczowy dla zapewnienia, że wideo będzie odtwarzane w nieskończoność, co jest szczególnie przydatne w przypadku prezentacji multimedialnych czy tła w aplikacjach webowych. Umożliwia to automatyczne powtarzanie treści bez interwencji użytkownika, co może poprawić doświadczenia użytkownika oraz skuteczność przekazu. Zgodnie z dokumentacją HTML5, aby użyć atrybutu loop, wystarczy dodać go do znacznika video, co pozwala na osiągnięcie zamierzonego efektu. Przykładem może być: <video src='video.mp4' loop autoplay></video>, gdzie wideo będzie się odtwarzać automatycznie i w kółko. Użycie tego atrybutu jest szczególnie istotne w kontekście interaktywnych aplikacji i gier, gdzie ciągłość odtwarzania może być kluczowa dla zaangażowania odbiorcy. Atrybut loop jest częścią specyfikacji W3C dotyczącej HTML5, która promuje dostępność i elastyczność w tworzeniu nowoczesnych aplikacji internetowych.

Pytanie 27

W HTML informacje o autorze, streszczeniu oraz słowach kluczowych strony powinny być umieszczone

A. pomiędzy znacznikami <head> i </head>, w znaczniku <style>

B. pomiędzy znacznikami <body> i </body>, w znaczniku <html>

C. pomiędzy znacznikami <body> i </body>, w znaczniku <meta>

D. pomiędzy znacznikami <head> i </head>, w znaczniku <meta>

W HTML kluczowe informacje, takie jak autor, streszczenie i słowa kluczowe, powinny być umieszczone między znacznikami <head> i </head>. Te znaczniki <meta> są naprawdę ważne, bo to one informują przeglądarki i wyszukiwarki o tym, co jest w Twojej stronie. Na przykład, znaczniki <meta name="description" content="Opis strony"> oraz <meta name="keywords" content="słowo1, słowo2, słowo3">. Dzięki tym danym, wyszukiwarki lepiej rozumieją, o czym jest strona, co może wpłynąć na jej pozycję w wynikach wyszukiwania. Moim zdaniem, dobrze przemyślane opisy i słowa kluczowe to klucz do sukcesu, bo to one przyciągają użytkowników do kliknięcia w Twój link. Pamiętaj też, że znacznik <title> i inne meta tagi w <head> są mega istotne dla SEO. Informacje te tworzą podstawy Twojego dokumentu HTML, więc warto je dobrze wypełnić, żeby strona działała jak należy.

Pytanie 28

Które znaczniki HTML wyświetlą tekst „Dobre strony mojej strony” w JEDNYM wierszu, jeśli nie zastosowano żadnych reguł CSS?

<p>Dobre strony </p><p style="letter-spacing:3px">mojej strony</p>

<h3>Dobre strony </h3><h3 style="letter-spacing:3px">mojej strony</h3>

<div>Dobre strony </div><div style="letter-spacing:3px">mojej strony</div>

<span>Dobre strony </span><span style="letter-spacing:3px">mojej strony</span>

Pozostałe znaczniki są elementami BLOKOWYMI, więc domyślnie każdy zajmuje całą szerokość i zaczyna nowy wiersz – dwa takie elementy nie zmieszczą się obok siebie bez CSS. Dotyczy to  (akapit), <h3> (nagłówek) oraz <div> (pojemnik blokowy) – każdy złamie tekst do osobnej linii. Tylko  jest elementem liniowym i utrzyma fragmenty w jednym wierszu, dlatego czwarta odpowiedź jest poprawna.

Pytanie 29

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

p#wyroznienie

td.wyroznienie

a:link

body

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 30

Która operacja nie wpłynie na wielkość zajmowanej pamięci przez plik graficzny?

A. Zmiana rozmiaru obrazu z użyciem atrybutów HTML

B. Modyfikacja rozdzielczości obrazu

C. Interpolacja

D. Kompresja

Skalowanie obrazu za pomocą atrybutów HTML jest prawidłową odpowiedzią, ponieważ ta operacja nie modyfikuje samego pliku graficznego, a jedynie zmienia sposób, w jaki obraz jest wyświetlany na stronie internetowej. Przykładowo, użycie atrybutów 'width' i 'height' w tagu <img> pozwala na dostosowanie rozmiarów obrazu w kontekście przeglądarki, nie ingerując w jego zawartość ani nie zmieniając rozdzielczości. W praktyce oznacza to, że oryginalny plik graficzny pozostaje niezmieniony, co jest zgodne z dobrymi praktykami w zakresie optymalizacji wydajności stron. Zmiana rozmiaru na poziomie HTML jest często stosowana, aby zapewnić elastyczność w projektowaniu responsywnych stron internetowych, gdzie obrazy muszą dostosowywać się do różnych rozmiarów ekranów bez potrzeby ich fizycznej edycji. Warto jednak pamiętać, że nadmierne skalowanie może prowadzić do pogorszenia jakości widocznej na ekranie, ale nie wpływa na wagę pliku. Istotnym aspektem jest również, że takie podejście wspiera standardy dostępności, umożliwiając lepsze dostosowanie treści wizualnych dla osób z różnymi potrzebami.

Pytanie 31

Którego znacznika używa się do utworzenia listy definicji w kodzie HTML?

<dl>

<td>

<abbr>

<label>

Listę definicji buduje znacznik <dl> (description list). Wewnątrz umieszcza się pary: definiowany termin w <dt> oraz jego opis w <dd>, na przykład <dl><dt>HTML</dt><dd>język znaczników</dd></dl>. Taka lista nadaje się do słowniczków, par nazwa–wartość czy zestawień pojęć i ich wyjaśnień. Różni się od listy nienumerowanej <ul> i numerowanej <ol> właśnie strukturą „termin – opis”. Dlatego do listy definicji służy <dl>.

Pytanie 32

Deklaracja background-attachment: scroll sprawia, że:

A. grafika tła będzie powtarzana (kafelki)

B. tło będzie przewijane razem z zawartością strony

C. tło będzie nieruchome, a treść będzie się przewijać

D. grafika tła pojawi się w prawym górnym rogu

Właściwość background-attachment określa, jak zachowuje się tło podczas przewijania strony. Wartość scroll (domyślna) sprawia, że tło przewija się razem z zawartością elementu – znika z widoku, gdy przewiniemy stronę. Przeciwna wartość fixed „przykleja” tło do okna, więc treść przesuwa się po nieruchomym tle. Dlatego scroll oznacza, że tło przewija się z treścią.

Pytanie 33

Polecenie colspan służy do łączenia komórek tabeli w poziomie, natomiast rowspan w pionie. Którą z tabel wyświetli poniższy fragment kodu napisany w języku HTML?

<table border="1" cellspacing="0" cellpadding="10">
    <tr>
        <td rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
</table>

A. A.

B. B.

C. C.

D. D.

Dokładnie tak, wybrałeś poprawną odpowiedź. Fragment kodu HTML napisałeś pokazuje tabelę z dwoma wierszami i dwoma komórkami. Pierwsza komórka w pierwszym wierszu ma atrybut rowspan='2', co oznacza, że będzie się rozciągać na dwa wiersze w pionie. Druga komórka w pierwszym wierszu nie ma żadnych specjalnych atrybutów, więc jest standardową komórką. W drugim wierszu jest tylko jedna komórka, gdyż druga komórka jest połączona z pierwszą komórką pierwszego wiersza przez atrybut rowspan. Tabela odpowiadająca opisowi to tabela B, która ma jedną długą komórkę po lewej stronie rozciągającą się na dwa wiersze i dwie krótsze komórki po prawej stronie, po jednej w każdym wierszu. Pamiętaj, że atrybuty rowspan i colspan są bardzo przydatne do tworzenia skomplikowanych layoutów tabel, które nie są możliwe do osiągnięcia przy użyciu standardowych tagów tabeli.

Pytanie 34

W kontekście CSS atrybut font-size może przyjmować wartości zgodnie z nazwami kluczowymi

A. jedynie big oraz small

B. wyłącznie small, medium, large

C. tylko small, smaller, large, larger

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

Właściwość font-size w CSS to naprawdę ważny aspekt, gdy chodzi o stylizację tekstów na stronach. Trzeba mieć na uwadze, że odpowiadając na pytania, nie możesz ograniczać się tylko do 'big' i 'small' albo 'small', 'medium' i 'large'. To jest trochę za mało, bo CSS ma znacznie więcej wartości, które są potrzebne do prawidłowego działania. Słowa takie jak 'smaller' czy 'larger' też mogą wprowadzać w błąd, ponieważ są to terminy relatywne i nie da się ich używać bez ustalenia bazowego rozmiaru czcionki. Co to oznacza? To, że te jednostki nie są takie uniwersalne. Jeśli będziesz korzystać tylko z ograniczonego zestawu wartości, to możesz mieć kłopoty z responsywnością w projektowaniu, gdzie różnorodność jest kluczowa. Żeby projekt wyglądał dobrze, trzeba trzymać się pełnych specyfikacji CSS, czyli tych wszystkich wartości, jak xx-small, x-small, small, medium, large, x-large i xx-large. Ignorowanie tych standardów wpłynie nie tylko na estetykę, ale też na to, jak użytkownicy będą korzystać ze stron.

Pytanie 35

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

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

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

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

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

D. 20 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 36

Który z przedstawionych kodów HTML sformatuje tekst według wzoru?
(uwaga: słowo "stacji" jest zapisane większą czcionką niż reszta słów w tej linii)

Lokomotywa

Stoi na stacji lokomotywa ...

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

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

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

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

A. A.

B. B.

C. C.

D. D.

Brawo! Wybrałeś prawidłową odpowiedź, która jest kodem HTML formatującym słowo 'stacji' większą czcionką niż reszta tekstu. Wykorzystuje ona znacznik <big>, który jest wyjątkowo przydatny w sytuacjach, gdy chcemy podkreślić pewną część tekstu i sprawić, że będzie ona wyglądać na większą niż reszta. Jest to praktyka często stosowana na stronach internetowych, by przyciągnąć uwagę użytkownika do konkretnych informacji. Pamiętaj jednak, że znacznik <big> jest przestarzały i nie jest zalecany do stosowania w nowoczesnym kodowaniu HTML. Zamiast tego, w dzisiejszych czasach lepiej jest używać CSS do zmiany rozmiaru czcionki. Niemniej jednak, znajomość różnych znaczników HTML, w tym <big>, jest nadal ważna, zwłaszcza do zrozumienia i utrzymania starszych stron internetowych.

Pytanie 37

Element

<meta charset="utf-8">

służy do definiowania metadanych witryny internetowej związanych z

A. opisem witryny

B. językiem witryny

C. słowami kluczowymi

D. kodowaniem znaków

Element <meta charset="utf-8"> jest kluczowym fragmentem kodu HTML, który definiuje kodowanie znaków używane na stronie internetowej. Ustawienie kodowania na UTF-8 jest obecnie standardem branżowym, który pozwala na prawidłowe wyświetlanie tekstów w różnych językach, a także obsługę różnorodnych znaków specjalnych. Dzięki temu strona będzie renderować się poprawnie niezależnie od używanego języka, co jest szczególnie istotne w kontekście globalizacji i dostępności treści dla szerokiego grona użytkowników. W praktyce, poprawne kodowanie znaków eliminuje problemy z wyświetlaniem polskich znaków diakrytycznych, takich jak ą, ć, ę, ł czy ź. Warto także zauważyć, że błędne ustawienie kodowania może prowadzić do tzw. "krzaków" w treści, co znacząco obniża jakość prezentacji strony oraz jej użyteczność. Dlatego zaleca się zawsze stosować <meta charset="utf-8"> w nagłówku dokumentu HTML, aby zapewnić pełną kompatybilność i poprawność wyświetlania treści w różnych przeglądarkach i systemach operacyjnych.

Pytanie 38

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. <!DOCTYPE html>

B. <html lang="pl">

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

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

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 39

Metainformacja „Description” zawarta w pliku źródłowym HTML powinna zawierać

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

A. opis tego, co znajduje się na stronie.

B. informację o tym, kto jest autorem strony.

C. nazwę programu, przy użyciu którego została stworzona strona.

D. wyrazy kluczowe, z których korzystają wyszukiwarki sieciowe.

Poprawna odpowiedź to 'opis, co znajduje się na stronie'. Metainformacja 'Description' w pliku źródłowym HTML jest wykorzystywana przez wyszukiwarki internetowe do wyświetlania opisu strony w wynikach wyszukiwania. Dzięki temu użytkownik może zobaczyć na pierwszy rzut oka, czy strona jest związana z jego zapytaniem, czy też nie. Jest to jedno z kluczowych narzędzi w SEO (Search Engine Optimization), które ma na celu zwiększenie widoczności strony w wynikach wyszukiwania. W praktyce, opis powinien być krótki, zwięzły i zawierać ważne informacje o treści strony. Dobrą praktyką jest również uwzględnienie kluczowych słów, na które użytkownicy mogą szukać. Opis ten powinien być zrozumiały dla użytkowników, a także jest to miejsce, gdzie można wykorzystać strategie marketingowe, aby zachęcić do odwiedzenia strony.

Pytanie 40

W języku CSS przedstawione w ramce stylizacje będą miały następujące zastosowanie. Kolorem czerwonym zostanie zapisany

h1 i {color: red;}

A. jedynie tekst pochylony w nagłówku pierwszego stopnia

B. wyłącznie tekst pochylony we wszystkich nagłówkach

C. kompletny tekst nagłówka pierwszego stopnia oraz pochylony tekst akapitu

D. pełny tekst nagłówka pierwszego stopnia oraz cały tekst pochylony, bez względu na jego lokalizację na stronie

Odpowiedź 1 jest poprawna, ponieważ selektor CSS 'h1 i' odnosi się do wszystkich elementów (czyli tekstu pochylonego) znajdujących się wewnątrz elementów nagłówka <h1>. Oznacza to, że tylko tekst pochylony w nagłówkach pierwszego stopnia zostanie sformatowany na kolor czerwony. Jest to przykład selektora złożonego, który jest używany do stylizowania elementów zagnieżdżonych w określonym kontekście. W praktyce, takie podejście pozwala na precyzyjne kontrolowanie stylów na poziomie struktury dokumentu HTML, co jest zgodne z dobrymi praktykami w zakresie utrzymania i czytelności kodu CSS. Podczas projektowania arkuszy stylów ważne jest, aby stosować specyficzne selektory tylko tam, gdzie jest to konieczne, aby uniknąć nadmiernego komplikowania stylów i zapewnić lepszą wydajność renderowania stron w przeglądarkach. Dodatkowo, używając właściwości 'color', możemy definiować sposób, w jaki kolor tekstu prezentuje się na stronie, co jest kluczowe dla tworzenia dostępnych i estetycznych interfejsów użytkownika.

Rozpocznij nowy egzamin

Powrót do strony głównej