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: 17 grudnia 2025 14:16
Data zakończenia: 17 grudnia 2025 14:32

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

W HTML znacznik <i> wywołuje taki sam efekt wizualny jak znacznik

A. <pre>

B. <em>

C. <u>

D. <strong>

Zastosowanie znaczników <u>, <pre> oraz <strong> w kontekście odwzorowania efektu znacznika <i> jest mylące ze względu na różnice w semantyce i wizualizacji. Znacznik <u> (underline) stosowany jest do podkreślenia tekstu, ale nie wprowadza on żadnych aspektów znaczeniowych. Używanie <u> zazwyczaj jest odradzane w nowoczesnym HTML, ponieważ może zostać zinterpretowane przez użytkowników jako link, co wprowadza w błąd. Znacznik <strong> (strong emphasis) wskazuje na szczególne znaczenie tekstu, co również nie odpowiada efektowi kursywy, a wręcz przeciwnie – ma na celu przyciągnięcie uwagi odbiorcy do ważnych informacji. Warto zauważyć, że <pre> (preformatted text) służy do wyświetlania tekstu w stałym formacie, co nie ma związku z efektem kursywy. Wprowadzenie do dokumentu HTML takich znaczników, które nie odpowiadają zamierzonym funkcjom, wprowadza chaos w strukturę semantyczną i może prowadzić do problemów z dostępnością. Przykładowe błędy myślowe obejmują mylenie efektów wizualnych z ich semantycznym znaczeniem, co jest kluczowe dla prawidłowego używania HTML. Zrozumienie różnic między tymi znacznikami jest istotne dla twórców stron internetowych, aby zapewnić, że ich treść jest nie tylko estetycznie przyjemna, ale również funkcjonalna i dostępna.

Pytanie 2

Witryna internetowa zawiera poziome menu w formie listy punktowanej. Aby elementy tej listy mogły być wyświetlane w jednej linii, należy przypisać selektorowi li właściwość

A. text-align

B. outline

C. display

D. position

Wybór opcji 'outline' jako właściwości do ustawienia dla selektora 'li' w kontekście wyświetlania elementów listy w jednej linii jest błędny, ponieważ 'outline' dotyczy jedynie rysowania konturów wokół elementu, nie wpływa natomiast na ich układ. Przykładowo, 'outline' jest często używane w celu poprawy dostępności elementów interaktywnych, takich jak przyciski, ale nie ma żadnego wpływu na ich położenie w dokumencie. Z kolei 'position' jest używane do określenia sposobu pozycjonowania elementów, co również nie wpływa na ich wyświetlanie w jednej linii. Choć 'position: relative;' lub 'absolute;' mogą zmienić sposób, w jaki elementy są rozmieszczone w stosunku do siebie, to jednak nie jest to odpowiednie narzędzie do uzyskania efektu poziomego menu. Natomiast 'text-align' jest właściwością, która ustala sposób wyrównania tekstu wewnątrz bloku, ale również nie dotyczy samego wyświetlania elementów listy. Używanie takich podejść może prowadzić do nieporozumień i błędów w projektach, gdzie kluczowe jest zrozumienie, że różne właściwości CSS mają swoje specyficzne zastosowania i nie mogą być zamieniane. Zrozumienie tego aspektu jest kluczowe dla prawidłowego tworzenia układów w stronach internetowych i unikania typowych błędów w stylizacji.

Pytanie 3

Jak wygląda prawidłowy zapis samozamykającego się znacznika w zgodzie ze standardem języka XHTML, który odpowiada za łamanie linii?

A. </br/>

B. <br />

C. </ br>

D. <br> </br>

Odpowiedź <br /> jest prawidłowym zapisem samozamykającego się znacznika w standardzie XHTML. XHTML, czyli eXtensible HyperText Markup Language, wymaga, aby znaczniki były poprawnie zamknięte. W przypadku znaczników, które nie mają zawartości, jak <br />, stosuje się specjalną składnię. Oznaczenie <br /> wskazuje na przełamanie linii w dokumencie HTML. Ważne jest, aby podać ukośnik przed zakończeniem znacznika, co jest zgodne z zasadami XHTML. Przykładowo, w dokumentach XHTML, prawidłowe użycie <br /> może wyglądać tak: <p>Tekst przed łamaniem linii.<br />Tekst po łamaniu linii.</p>. Przestrzeganie tych zasad zapewnia, że dokumenty będą poprawnie interpretowane przez przeglądarki oraz będą zgodne z standardami W3C, co jest kluczowe dla zachowania wysokiej jakości kodu oraz jego dostępności.

Pytanie 4

Jakie właściwości stylu CSS poprawnie definiują dla akapitu czcionkę: Arial; jej wielkość: 16 pt; oraz styl czcionki: kursywa?

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

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

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

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

Odpowiedź p {font-family: Arial; font-size: 16pt; font-style: italic;} jest poprawna, ponieważ zawiera wszystkie istotne właściwości, które definiują krój, rozmiar oraz styl czcionki dla akapitu. Właściwość font-family definiuje krój czcionki, w tym przypadku Arial, co jest zgodne z wymaganiami. Właściwość font-size ustawia rozmiar czcionki na 16 punktów (pt), co jest standardowym sposobem definiowania wielkości czcionki w kontekście typografii. Ponadto właściwość font-style została poprawnie użyta do określenia stylu pochylenia czcionki, co w CSS jest reprezentowane przez wartość italic. Te właściwości są zgodne z dobrymi praktykami w CSS, które zalecają precyzyjne definiowanie czcionek, aby zapewnić spójność w prezentacji tekstu. Przykładowo, stosując ten styl w dokumencie HTML, uzyskasz wyraźnie wyodrębniony akapit, który będzie atrakcyjny wizualnie i czytelny. Zastosowanie odpowiednich jednostek, takich jak pt dla rozmiaru czcionki, jest również istotne dla zapewnienia odpowiedniej skalowalności na różnych urządzeniach.

Pytanie 5

W CSS, aby ustalić nietypowe odległości między słowami, używa się właściwości

A. word-spacing

B. line-spacing

C. white-space

D. letter-space

W języku CSS właściwość word-spacing jest używana do definiowania odstępu między wyrazami w elemencie tekstowym. Zwiększenie lub zmniejszenie odstępu między wyrazami może znacznie wpłynąć na czytelność i estetykę tekstu. Wartość tej właściwości można ustawić w jednostkach długości, takich jak piksele (px), em, rem lub procenty. Na przykład, zastosowanie word-spacing: 5px; w kodzie CSS spowoduje zwiększenie odstępu między wyrazami o 5 pikseli. Wartością domyślną tej właściwości jest 0, co oznacza, że odstępy są ustalane przez przeglądarkę na podstawie czcionki i innych parametrów tekstu. Użycie word-spacing może być szczególnie przydatne w przypadku projektowania stron internetowych, gdzie estetyka tekstu ma kluczowe znaczenie dla doświadczeń użytkownika. Dlatego, aby osiągnąć pożądany efekt wizualny, projektanci często manipulują odstępami między wyrazami w swoich stylach CSS, co jest zgodne z wytycznymi W3C dotyczącymi dostępności i czytelności treści na stronach internetowych.

Pytanie 6

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

C. nav

D. div

Znacznik <div> jest często używany do ogólnego grupowania elementów w HTML, ale nie niesie ze sobą semantycznego znaczenia, co oznacza, że nie informuje technologii wspomagających ani wyszukiwarek o roli, jaką pełni zawartość. W kontekście semantycznego HTML5, poleganie na znaczniku <div> nie wykorzystuje potencjału nowych standardów, które poprawiają dostępność i strukturę dokumentów. Znacznik <aside> jest zwykle używany do grupowania treści pobocznej, takiej jak reklamy czy linki powiązane, dlatego nie jest on odpowiedni do definiowania sekcji menu. <header> jest z kolei stosowany do elementów nagłówkowych, takich jak tytuły stron czy sekcje wstępne, co również nie pasuje do kontekstu sekcji nawigacyjnej. Właściwe wykorzystanie semantycznych znaczników pomaga nie tylko w lepszej organizacji kodu, ale także wspiera dostępność oraz optymalizację SEO, co jest kluczowe w nowoczesnym projektowaniu stron internetowych.

Pytanie 7

Wskaż poprawną definicję stylu CSS dla przycisku typu submit o właściwościach: czarny kolor tła, brak obramowania, marginesy wewnętrzne 5 px.

input[type=submit] {
  background-color: #000000;
  border: none;
  padding: 5px;
}                         A.

input[type=submit] {
  background-color: #ffffff;
  border: none;
  padding: 5px;
}                         B.

input=submit {
  background-color: #000000;
  border: none;
  margin: 5px;
}                         C.

input=submit {
  background-color: #000000;
  border: 0px;
  margin: 5px;
}                         D.

A. C.

B. B.

C. D.

D. A.

Wybrana przez Ciebie odpowiedź nie jest prawidłowa, ale nie martw się, ważne jest, żeby zrozumieć dlaczego. CSS to kaskadowe arkusze stylów, które umożliwiają określenie stylu strony internetowej. Kluczowym aspektem CSS jest składnia, która obejmuje selektor, właściwość i wartość. W przypadku przycisku typu 'submit', selektorem jest 'input[type='submit']'. Właściwością jest 'background-color', 'border' lub 'padding', a wartością jest 'black', 'none' lub '5px' odpowiednio. Niepoprawne odpowiedzi nie spełniają wszystkich lub niektórych z tych wymagań. Mogą one ignorować wymagany czarny kolor tła, brak obramowania, marginesy wewnętrzne 5 px lub wszystkie te elementy. Inne błędne odpowiedzi mogą zawierać nieprawidłowe selektory, właściwości lub wartości. Pamiętaj, że praktyka prowadzi do mistrzostwa, więc nie zniechęcaj się, jeśli nie udało ci się tego dostrzec za pierwszym razem.

Pytanie 8

Jakiego elementu w języku HTML brakuje, aby walidator HTML zgłosił ostrzeżenie lub błąd?

A. <link>

B. <meta name="author" content=". . . .">

C. przynajmniej jednego <h1>

D. <title>

Element <title> jest kluczowym składnikiem dokumentu HTML, ponieważ określa tytuł strony, który jest wyświetlany na karcie przeglądarki oraz w wynikach wyszukiwania. W każdym poprawnie skonstruowanym dokumencie HTML powinien znajdować się co najmniej jeden element <title>, a jego brak skutkuje ostrzeżeniem lub błędem walidatora HTML. Zgodnie z specyfikacją HTML5, element <title> powinien być umieszczony wewnątrz sekcji <head>. Dobrą praktyką jest, aby tytuł był krótki, ale jednocześnie informacyjny i zawierał istotne słowa kluczowe, co może poprawić widoczność w wyszukiwarkach. Na przykład, tytuł 'Strona Główna - Moja Firma' jasno określa zawartość i cel strony, co jest korzystne dla użytkowników i robotów wyszukiwarek. Pamiętaj, że niepoprawna struktura dokumentu HTML może prowadzić do problemów z indeksowaniem przez wyszukiwarki oraz może wpłynąć na doświadczenie użytkownika.

Pytanie 9

Jakiego elementu musisz użyć, aby rozpocząć nową linię tekstu bez tworzenia akapitu na stronie internetowej?

A. <br>

B. </b>

C. <p>

D. </br>

Znak <br> jest standardowym elementem HTML używanym do wprowadzenia przerwy w tekście, która nie tworzy nowego akapitu. W przeciwieństwie do znacznika <p>, który definiuje akapit i dodaje dodatkową przestrzeń przed i po nim, <br> po prostu przenosi tekst do nowej linii, co jest szczególnie przydatne w takich sytuacjach jak adresy, wiersze piosenek czy fragmenty tekstu, gdzie formatowanie linii jest kluczowe. Przykład użycia: <p>Adam Mickiewicz,<br>Pan Tadeusz.</p> W powyższym przykładzie tekst "Pan Tadeusz" zostanie wyświetlony w nowej linii, ale nie jako nowy akapit. Warto pamiętać, że stosowanie zbyt wielu <br> w kodzie HTML może prowadzić do chaotycznego formatowania, dlatego zaleca się ich użycie z umiarem, zgodnie z zasadami dobrego projektowania stron i przystosowywania ich do różnych urządzeń, co jest zgodne z zasadami responsywnego designu. Zastosowanie <br> jest zgodne z HTML5 i uznawane za najlepszą praktykę przy tworzeniu prostych układów tekstowych.

Pytanie 10

W trakcie walidacji dokumentu HTML5 napotkano komunikat o treści: "Error: Element head is missing a required instance of child element title". Co to oznacza w kontekście dokumentu?

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

B. element <title> nie został poprawnie zamknięty przez </title>.

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

D. element <title> nie jest konieczny.

Element <title> jest kluczowym składnikiem sekcji <head> każdego dokumentu HTML, zgodnie z wytycznymi W3C. Jego głównym zadaniem jest określenie tytułu strony, który jest wyświetlany w pasku tytułowym przeglądarki oraz w wynikach wyszukiwania. Brak tego elementu w dokumencie skutkuje błędem walidacji, ponieważ HTML5 wymaga, aby każdy dokument miał zdefiniowany tytuł. Przykładowo, poprawny fragment dokumentu HTML5 powinien wyglądać następująco: <head><title>Mój dokument</title></head>. Niezdefiniowanie elementu <title> może negatywnie wpłynąć na SEO, ponieważ wyszukiwarki często używają tytułu strony do określenia jej zawartości. W praktyce oznacza to, że każda strona internetowa powinna mieć unikalny tytuł odzwierciedlający jej tematykę, co nie tylko poprawi doświadczenie użytkownika, ale także pomoże w pozycjonowaniu w wynikach wyszukiwania.

Pytanie 11

Do zdefiniowania listy nienumerowanej w języku HTML, jaki znacznik należy zastosować?

A. <ol>

B. <dt>

C. <ul>

D. <dd>

Aby zdefiniować w języku HTML listę nienumerowaną, należy użyć znacznika <ul>, co jest standardem w HTML. Znacznik <ul> oznacza "unordered list", czyli listę, w której poszczególne elementy nie są uporządkowane w kolejności numeracyjnej. Elementy tej listy są zazwyczaj wyświetlane z ikoną (punktami) przed każdym elementem, co podkreśla ich nienumerowany charakter. Każdy element listy jest definiowany za pomocą znacznika <li> (list item). Przykładowo, pełna struktura HTML dla listy nienumerowanej może wyglądać następująco: <ul><li>Pierwszy element</li><li>Drugi element</li></ul>. Używanie list nienumerowanych jest szczególnie pomocne w organizowaniu treści w sposób, który nie wymaga hierarchii, ale raczej prezentuje różne elementy na równym poziomie. W standardach W3C HTML5, <ul> jest zalecanym znakiem do tworzenia takich struktur, co czyni go kluczowym elementem w budowie przejrzystych i zrozumiałych stron internetowych. Implementacja list nienumerowanych w HTML jest istotnym krokiem w tworzeniu semantycznie poprawnych dokumentów, co wpływa na dostępność oraz SEO.

Pytanie 12

Znacznik

<pre> </pre>

służy do prezentacji:

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

B. znaku przekreślenia

C. znaku wielokropka

D. treści polską czcionką

Interpretacja znacznika <pre> jako narzędzia do wyświetlania znaku przekreślenia lub wielokropka jest błędna, ponieważ te elementy nie mają związku z funkcją, jaką pełni <pre>. W kontekście HTML, znacznik <pre> nie jest zaprojektowany do formatowania treści na podstawie stylów czcionek, takich jak 'polska czcionka', ale skupia się na zachowaniu oryginalnego formatowania tekstu. Próba zrozumienia <pre> w kontekście czcionek wyłącznie ze względu na ich wygląd prowadzi do pomyłek, ponieważ nie dotyczy to głównego celu tego znacznika. Ponadto, używanie <pre> dla treści, które nie wymagają stałej szerokości czcionki, może prowadzić do złożonych problemów w responsywności układu strony oraz trudności w dostosowaniu treści do różnych urządzeń. Znaki przekreślenia i wielokropka są raczej reprezentowane przez inne znaczniki HTML, takie jak <s> lub <span>, które są bardziej odpowiednie do stylizacji tekstu. Właściwe zrozumienie roli każdego znacznika HTML jest kluczowe dla skutecznego projektowania stron internetowych i aplikacji, co podkreśla znaczenie edukacji w zakresie web developmentu.

Pytanie 13

Styl ten generuje pojedyncze obramowanie, które charakteryzuje się następującymi właściwościami:

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

A. krawędź lewa ma kolor czerwony, krawędź dolna jest w kolorze niebieskim, krawędź prawa jest koloru zielonego, krawędź górna ma kolor żółty

B. krawędź górna ma kolor czerwony, krawędź prawa jest w kolorze niebieskim, krawędź dolna ma kolor zielony, krawędź lewa jest koloru żółtego

C. krawędź górna jest czerwonego koloru, krawędź lewa jest w kolorze niebieskim, krawędź dolna ma kolor zielony, krawędź prawa ma kolor żółty

D. krawędź prawa jest koloru czerwonego, krawędź dolna ma kolor niebieski, krawędź lewa ma kolor zielony, krawędź górna ma kolor żółty

Błędne zrozumienie przypisania kolorów do krawędzi obramowania w CSS wynika z niewłaściwego interpretowania kolejności, w jakiej te kolory są przypisywane. W standardach CSS, kiedy używamy składni takiej jak border-color: red blue green yellow; kolory są przypisywane zaczynając od krawędzi górnej, a następnie zgodnie z kierunkiem wskazówek zegara. Stąd czerwona krawędź to górna, niebieska to prawa, zielona to dolna, a żółta to lewa. Błędne odpowiedzi wynikają z niepoprawnego przypisania kolorów do krawędzi w innej kolejności. Typowym błędem jest myślenie, że kolory są przypisane w porządku lewa-prawa-dół-góra, co jest sprzeczne z domyślną kolejnością CSS. Bez poprawnego zrozumienia tej logiki, projektanci mogą doświadczyć trudności w przewidywaniu jakich efektów wizualnych oczekiwać od swojej pracy, co może prowadzić do błędów w projektach. Aby uniknąć takich problemów, kluczowe jest zapoznanie się i zrozumienie zasad określających jak style CSS są interpretowane przez przeglądarki, co pozwala na pełne wykorzystanie możliwości jakie oferują style kaskadowe. Poprawne stosowanie tych zasad jest niezbędne do tworzenia profesjonalnych i spójnych projektów internetowych, które są zgodne z najlepszymi praktykami w branży.

Pytanie 14

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

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

A. getElement('p');

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

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

D. getElementById('p1');

Metoda getElementsByTagName('p')[0] jest prawidłowym sposobem odwołania się do pierwszego elementu <p> w dokumencie HTML. Funkcja getElementsByTagName zwraca kolekcję wszystkich elementów o określonej nazwie tagu. W przypadku użycia tagu 'p', funkcja zwraca tablicę wszystkich paragrafów. Aby uzyskać dostęp do pierwszego paragrafu, korzystamy z indeksu [0], co jest zgodne z konwencją numerowania od zera w językach programowania. Praktyczne zastosowanie tej metody obejmuje manipulację treścią lub stylami pierwszego paragrafu, na przykład zmiana jego tekstu za pomocą innerHTML lub dodanie klasy CSS w celu zmiany jego wyglądu. Stosowanie getElementsByTagName jest zgodne z powszechnymi standardami i dobrymi praktykami w pracy z DOM (Document Object Model) w JavaScript. Ważne jest zrozumienie tego mechanizmu, aby efektywnie operować na elementach HTML oraz tworzyć dynamiczne i interaktywne strony internetowe. Warto również pamiętać, że metoda ta zwraca dynamiczną kolekcję, co oznacza, że zmiany w DOM automatycznie wpływają na zawartość zwróconej kolekcji.

Pytanie 15

W CSS wprowadzono formatowanie

p > i {color: blue}

Co oznacza, że tekst zapisany będzie w kolorze niebieskim

A. pochylony tekst akapitu

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

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

D. pogrubiony tekst akapitu

W podanym przypadku, zapis CSS <code>p > i {color: blue}</code> odnosi się do selektora, który aplikuje kolor niebieski do elementu <code><i></code> znajdującego się bezpośrednio wewnątrz elementu <code><p></code>. Oznacza to, że tylko tekst, który jest otoczony znacznikiem <code><i></code> w danym paragrafie, zostanie wyróżniony kolorem niebieskim. Ten sposób selekcji jest zgodny z zasadą kaskadowości i specyficzności CSS, co jest kluczowym elementem w zarządzaniu stylem dokumentów HTML. W praktyce, używanie takich selektorów pozwala na precyzyjne formatowanie tekstu w obrębie większych struktur, co jest szczególnie ważne w skomplikowanych projektach webowych. Dobrym przykładem zastosowania tego stylu może być sytuacja, gdy chcemy wyróżnić cytaty lub słowa kluczowe w tekście paragrafu, stosując odpowiednie znaczniki HTML oraz style CSS, co zwiększa czytelność i estetykę treści.

Pytanie 16

Aby ustalić wysokość grafiki wyświetlanej na stronie internetowej, należy użyć właściwości CSS o nazwie

A. margin

B. padding

C. width

D. height

Odpowiedź 'height' jest prawidłowa, ponieważ właściwość CSS o tej nazwie bezpośrednio określa wysokość elementu na stronie internetowej. Używając 'height', możemy zdefiniować wartość w pikselach, procentach lub innych jednostkach miary, co pozwala na precyzyjne dostosowanie wyglądu elementów do wymagań projektu. Na przykład, zdefiniowanie wysokości obrazka jako 'height: 200px;' sprawi, że obrazek zawsze będzie miał 200 pikseli wysokości, niezależnie od jego oryginalnych wymiarów. Dobrą praktyką jest również używanie wartości procentowych, które pozwalają na responsywne projektowanie, dostosowujące się do różnych rozmiarów ekranu. Ponadto, warto wspomnieć o zastosowaniu 'min-height' i 'max-height', które umożliwiają kontrolowanie minimalnych i maksymalnych wymiarów elementów, co jest pomocne w tworzeniu elastycznych i estetycznych układów stron. Ponadto, definiując wysokość obrazków, warto pamiętać o zachowaniu proporcji poprzez odpowiednie użycie również właściwości 'width'.

Pytanie 17

Zgodnie z zasadami walidacji HTML5, prawidłowy zapis tagu hr to

A. </ hr>

B. </hr?>

C. </ hr />

D. <hr>

Znak <hr> jest poprawnym zapisem znacznika poziomej linii w HTML5. Zgodnie z definicją, <hr> jest elementem samodzielnym, co oznacza, że nie wymaga znacznika zamykającego. Jest to zgodne z zasadami HTML5, które wprowadziły uproszczoną składnię dla wielu elementów. W praktyce <hr> jest używany do wizualnego oddzielania sekcji w dokumencie HTML, co poprawia czytelność i estetykę strony. Na przykład, w artykule internetowym można zastosować <hr> między różnymi sekcjami, aby wskazać zmianę tematu lub podział pomiędzy wprowadzeniem a treścią główną. Zgodność z tym standardem nie tylko ułatwia pracę z kodem, ale również zapewnia lepszą kompatybilność z przeglądarkami i narzędziami dostępu. Warto także zwrócić uwagę, że dobrym zwyczajem jest dodawanie atrybutów klasy lub identyfikatora do tego znacznika w celu dalszej personalizacji stylów CSS, co zwiększa elastyczność w projektowaniu graficznym strony.

Pytanie 18

Czy przedstawione w języku CSS ustawienia czcionki będą dotyczyć dla ```* { font-family: Tahoma; color: Teal; }```?

A. znaczników o id równym *

B. znaczników z klasą przypisaną równą *

C. całego dokumentu HTML, niezależnie od późniejszych reguł CSS

D. całego dokumentu HTML, jako domyślne formatowanie dla wszystkich elementów strony

Właściwość CSS zastosowana w podanym kodzie dotyczy wszystkich elementów HTML na stronie, ponieważ użycie selektora * oznacza, że formatowanie będzie miało zastosowanie do każdego elementu, niezależnie od jego typu. Oznacza to, że czcionka Tahoma oraz kolor Teal będą domyślnie stosowane do tekstu we wszystkich znacznikach HTML. Tego rodzaju podejście jest zgodne z dobrymi praktykami w projektowaniu stron, ponieważ pozwala na jednolite formatowanie bez konieczności stylizowania każdego elementu z osobna. Przykładem zastosowania może być stworzenie spójnego wyglądu strony, gdzie wszystkie nagłówki, akapity i inne teksty mają ten sam styl, co poprawia czytelność i estetykę. Dodatkowo, takie zastosowanie stylów jest efektywne, gdyż zmiana stylu w kontekście całej strony odbywa się poprzez edytowanie jednego miejsca w kodzie CSS, co oszczędza czas i zmniejsza ryzyko błędów.

Pytanie 19

Jak zdefiniować formatowanie tabeli w języku CSS, aby wyróżnić wiersz, na który aktualnie najeżdża kursor myszy, korzystając z innego koloru?

A. pseudoelement ::marker

B. pseudoelement ::first-line

C. pseudoklasę :visited

D. pseudoklasę :hover

Prawidłową odpowiedzią jest użycie pseudoklasy :hover, która jest standardowym rozwiązaniem w CSS do stylizacji elementów, gdy użytkownik na nie najedzie kursorem myszy. Pseudoklasa :hover pozwala na dynamiczną modyfikację wyglądu elementów, co jest szczególnie użyteczne w kontekście interaktywności stron internetowych. Na przykład, można zastosować tę pseudoklasę do wierszy tabeli, aby zmienić ich kolor tła na inny, co podnosi czytelność i estetykę interfejsu użytkownika. Implementacja może wyglądać następująco: table tr:hover { background-color: #f2f2f2; } - dzięki temu, gdy użytkownik najedzie myszką na wiersz tabeli, jego tło zmieni się na jasno szare, co zwraca uwagę na ten wiersz. Użycie :hover jest zgodne z dobrymi praktykami w projektowaniu UI, gdyż poprawia doświadczenia użytkownika oraz umożliwia intuicyjne korzystanie z interakcji na stronie. Pseudoklasa :hover wspiera również responsywność, ponieważ wpływa na sposób, w jaki użytkownicy wchodzą w interakcje z elementami, co jest kluczowe w nowoczesnym projektowaniu stron.

Pytanie 20

Dokument HTML określa akapit oraz grafikę. Aby grafika była umieszczona przez przeglądarkę w tej samej linii co akapit po jego lewej stronie, w stylu CSS grafiki należy ustawić właściwość

A. align:left;

B. style:left;

C. float:left;

D. alt:left;

Właściwość CSS 'float:left;' jest kluczowa dla umieszczania elementów w linii obok siebie. Umożliwia ona 'wypływanie' elementu, jakim jest obrazek, w lewo, co skutkuje tym, że tekst w akapicie będzie go otaczał od prawej strony. Jest to szczególnie przydatne w projektowaniu responsywnych układów stron internetowych, gdzie zachowanie porządku w rozmieszczeniu elementów jest istotne zarówno na desktopach, jak i urządzeniach mobilnych. Przykładowo, jeśli mamy akapit z opisem produktu, który chcemy wizualnie wzbogacić odpowiednim zdjęciem z jego lewej strony, zastosowanie 'float:left;' w stylach CSS sprawi, że tekst będzie płynnie dostosowywał się do rozmiaru obrazka. Zgodnie z dobrymi praktykami, warto również pamiętać o zastosowaniu 'clear:both;' w przypadku elementów, które mają pojawić się poniżej zaganianych elementów, aby uniknąć problemów z układem. Dodatkowo, warto zadbać o odpowiednie wymiary obrazka oraz użycie atrybutu 'alt' w tagu <img>, aby poprawić dostępność strony oraz jej SEO.

Pytanie 21

W modelu kolorów RGB kolor żółty powstaje z połączenia zielonego i czerwonego. Który kod szesnastkowy przedstawia kolor żółty?

A. #F0F0F0

B. #00FFFF

C. #FF00FF

D. #FFFF00

Kolor żółty w modelu RGB jest uzyskiwany poprzez połączenie pełnej intensywności koloru czerwonego oraz zielonego, przy zerowej intensywności koloru niebieskiego. W zapisie szesnastkowym, który jest powszechnie używany w programowaniu i projektowaniu grafiki komputerowej, kolor żółty reprezentowany jest przez kod #FFFF00. W tym kodzie pierwsze dwie cyfry 'FF' odpowiadają wartości intensywności czerwonego koloru, następne dwie 'FF' odpowiadają intensywności zielonego, a ostatnie dwie '00' oznaczają brak niebieskiego. Przykładem zastosowania koloru żółtego mogą być interfejsy użytkownika, gdzie często wykorzystuje się go do przyciągania uwagi, jak w przypadku znaków ostrzegawczych czy przycisków akcji. Kolor żółty jest również częścią różnych standardów kolorów, takich jak sRGB, który jest powszechnie używany w aplikacjach internetowych i mobilnych. Warto również zauważyć, że krzyżowanie się skali RGB z innymi modelami kolorów, takimi jak CMYK, pokazuje, jak różne systemy reprezentują kolory, co jest istotne w druku i cyfrowym projektowaniu.

Pytanie 22

Aby włączyć zewnętrzny skrypt JavaScript o nazwie skrypt.js, konieczne jest umieszczenie w kodzie HTML

A. <script> skrypt.js </script>

B. <link rel="script" href="/skrypt.js" />

C. <script src="/skrypt.js"></script>

D. <link rel="JavaScript" type="js" href="/skrypt.js" />

W niepoprawnych odpowiedziach widać, że mogą występować nieporozumienia związane z HTML czy z osadzaniem zewnętrznych plików. Na przykład, użycie <script> skrypt.js </script> jest błędne, bo nie wskazuje na źródło pliku. W związku z tym przeglądarka nie wie, skąd wziąć ten skrypt. Koniecznie trzeba użyć atrybutu src, żeby powiedzieć, gdzie jest plik. Co do <link rel="script" href="/skrypt.js" />, to jest totalnie mylące, bo tag <link> jest do stylów CSS, a nie do skryptów JavaScript. Takie coś spowoduje błędy, bo przeglądarka nie załadowałaby skryptu, co w efekcie prowadzi do braku funkcjonalności w aplikacji. Jeszcze w przypadku <link rel="JavaScript" type="js" href="/skrypt.js" /> mamy problem, bo atrybut rel powinien dotyczyć typu relacji i nie ma opcji dla skryptów. Ważne jest, aby zrozumieć różnice między tagami HTML i umieć je stosować poprawnie. Jak nie będziesz przestrzegał tych zasad, mogą pojawić się kłopoty z działaniem aplikacji.

Pytanie 23

W kodzie HTML znajdziemy formularz. Jaki rezultat zostanie pokazany przez przeglądarkę, jeśli użytkownik wprowadził do pierwszego pola wartość "Przykładowy text"?

A. Efekt 4

B. Efekt 3

C. Efekt 1

D. Efekt 2

Efekt 2 jest prawidłowy, ponieważ odpowiada dokładnemu odwzorowaniu HTML. Kod zawiera element <textarea> oraz dwa pola typu checkbox. Przeglądarka wyświetla pole tekstowe o określonym rozmiarze, gdzie użytkownik może wpisać tekst. Checkboxy pozwalają na wybór opcji, niezależnych od siebie, co odróżnia je od radiobuttonów. Przykładowy text wpisany w pole <textarea> zostanie wyświetlony w miejscu tego pola, co jest dobrze widoczne na obrazie odpowiadającym efektowi 2. Warto pamiętać, że <textarea> stosuje się do dłuższych form tekstu, co jest standardem w projektowaniu formularzy. Użycie checkboxów jest zgodne z dobrymi praktykami, gdy użytkownik może zaznaczyć dowolną liczbę opcji. Jest to ważne, aby dostarczyć użytkownikowi intuicyjny interfejs do wprowadzania i wyboru danych. W HTML ważne jest, aby kod był semantyczny i zgodny z oczekiwaniami użytkowników, co ten przykład dobrze ilustruje. Formularze powinny być zawsze testowane pod kątem użyteczności i poprawności w różnych przeglądarkach.

Pytanie 24

Znacznik <ins> w HTML ma na celu wskazanie

A. bloku tekstu, który jest cytowany

B. tekstu, który został usunięty

C. tekstu, który został dodany

D. tekstu, który został przerobiony

Znacznik <ins> w HTML jest używany do oznaczania tekstu, który został dodany w kontekście edytowania treści. Zgodnie ze standardem HTML5, element <ins> reprezentuje wprowadzenie nowego tekstu, co jest szczególnie przydatne w kontekście śledzenia zmian w dokumentach. Używając <ins>, możemy nie tylko oznaczyć dodany tekst, ale także dostarczyć kontekstu dla jego wprowadzenia, na przykład poprzez dodanie atrybutu datetime, który wskazuje, kiedy zmiana została wprowadzona. Praktyczne zastosowanie tego znacznika można zauważyć w edytorach treści, gdzie użytkownicy mogą wprowadzać poprawki, a powstałe zmiany są wizualizowane. Dzięki temu osoby przeglądające dokument mogą łatwo zauważyć, co zostało dodane. Warto również wspomnieć, że w połączeniu z odpowiednim stylem CSS, zmiany te mogą być wyróżnione w sposób, który zwiększa czytelność tekstu. Standardy W3C zalecają stosowanie znaczników semantycznych, takich jak <ins>, aby poprawić dostępność oraz zrozumiałość treści.

Pytanie 25

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

A. rgb(17, FE, 7)

B. rgb(ll, 127, 7)

C. rgb(17, 255, 7)

D. rgb(17, 254, 7)

Odpowiedź rgb(17, 254, 7) jest jak najbardziej trafna, bo wartości RGB ustalamy na podstawie kolorów, które mamy w formacie szesnastkowym. Dla koloru #11FE07, pierwsza część '11' to czerwień (R), druga część 'FE' to zieleń (G), a ostatnia '07' to niebieski (B). Jak to zliczamy? Wartości szesnastkowe przeliczamy na dziesiętne. Czyli '11' w szesnastkowym to 17 w dziesiętnym, 'FE' to 254, a '07' to po prostu 7. Te kolory RGB są super ważne w wielu dziedzinach, jak na przykład w projektowaniu stron www czy w grafice komputerowej. W3C ustala standardy dla tych wartości, dlatego są one spójne i użyteczne w sieci. Dopasowanie kolorów RGB jest kluczowe, kiedy tworzymy ładne palety kolorów, które są nie tylko estetyczne, ale też dostępne dla wszystkich. Takim przykładem może być dobór kolorów dla przycisków na stronie - jak dobrze je dobierzemy, to użytkownik łatwiej zauważy, co ma kliknąć.

Pytanie 26

W instrukcjach, których celem jest odtwarzanie dźwięku na stronie internetowej jako tła muzycznego, nie stosuje się atrybutu

A. href="c:/100.wav"

B. volume="-100"

C. balance="10"

D. loop="10"

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut href w kontekście dźwięku na stronie internetowej jest używany w tagu <audio> lub <source>, aby wskazać lokalizację pliku audio. Pliki dźwiękowe, które mają być odtwarzane w przeglądarkach, powinny być dostępne pod adresem URL, a nie w lokalnym systemie plików, jak w przypadku href='c:/100.wav'. Standardy W3C oraz HTML5 określają, że pliki audio powinny być dostępne przez HTTP lub HTTPS, co pozwala na ich odtwarzanie zdalnie. Jeśli plik audio znajduje się na lokalnym dysku, nie będzie on dostępny dla użytkowników odwiedzających stronę poprzez Internet. Przykładem poprawnego użycia atrybutu href jest wskazanie pliku dźwiękowego, który jest hostowany na serwerze, na przykład href='http://example.com/audio/track1.mp3'. Ponadto, do kontrolowania odtwarzania dźwięku można wykorzystać inne atrybuty jak autoplay, loop, czy controls, które pozwalają na lepsze zarządzanie interakcją użytkownika z muzyką na stronie.

Pytanie 27

Jakie ustawienia dotyczące czcionki będą miały zastosowanie w przypadku kodu CSS?

* {
    font-family: Tahoma;
    color: Teal;
}

A. wszystkiego kodu HTML, niezależnie od kolejnych ustawień CSS.

B. wszystkiego kodu HTML, jako domyślne formatowanie dla wszystkich elementów strony.

C. znaczników z klasą przypisaną jako *.

D. znaczników o identyfikatorze równym *.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybór opcji dotyczącej całego kodu HTML jako formatowania domyślnego dla wszystkich elementów strony jest poprawny, ponieważ użycie selektora uniwersalnego * w CSS oznacza, że wszystkie dostępne elementy na stronie będą dziedziczyć określone style. W tym przypadku, zarówno font-family ustawiony na Tahoma, jak i kolor tekstu zmieniony na Teal, będą dotyczyły każdego elementu HTML, bez względu na jego typ. To podejście jest zgodne z zasadami stosowania stylów kaskadowych, gdzie style są aplikowane do elementów w sposób hierarchiczny, a selektor uniwersalny jest najogólniejszym z dostępnych. Przykładem zastosowania może być sytuacja, gdy chcemy ustawić jednolite formatowanie dla całej strony, co upraszcza proces projektowania i zapewnia spójność wizualną. Dobrą praktyką jest jednak używanie selektora uniwersalnego z umiarem, aby uniknąć nadmiernego obciążenia wydajności, szczególnie w większych dokumentach, gdzie precyzyjniejsze selektory mogą przynieść lepsze rezultaty.

Pytanie 28

Aby poprawić prędkość ładowania strony z grafiką o wymiarach 2000 px na 760 px, konieczne jest zmniejszenie rozmiarów grafiki?

A. za pomocą atrybutów HTML

B. w programie graficznym

C. za pomocą właściwości CSS, podając rozmiar w procentach

D. za pomocą właściwości CSS, podając rozmiar w pikselach

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zwiększenie szybkości działania strony internetowej z grafiką o wymiarach 2000 px na 760 px jest kluczowym zadaniem dla zapewnienia lepszej wydajności i doświadczeń użytkowników. Zmniejszenie rozmiarów grafiki w programie graficznym przed jej umieszczeniem na stronie jest najlepszą praktyką. Poprzez optymalizację obrazu możemy znacznie zmniejszyć jego wagę, co przyspiesza ładowanie strony. Programy graficzne, takie jak Adobe Photoshop czy GIMP, oferują różne narzędzia do kompresji obrazów bez zauważalnej utraty jakości. Dodatkowo, stosowanie formatów plików odpowiednich do rodzaju grafiki, jak JPEG dla zdjęć lub PNG dla grafik z przezroczystością, może przyczynić się do dalszej optymalizacji. Warto również pamiętać o technikach, takich jak lazy loading, które pozwalają na ładowanie obrazów w miarę przewijania strony, co również wpływa na szybkość ładowania. Te czynności są zgodne z zasadami SEO i wynikami stron w wyszukiwarkach, co czyni je kluczowymi dla każdego twórcy internetowego.

Pytanie 29

Grafika, która ma być umieszczona na stronie, powinna mieć przezroczyste tło. Jakim formatem graficznym powinien być zapisany taki plik?

A. BMP

B. PNG

C. CDR

D. JPEG

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format PNG (Portable Network Graphics) jest szczególnie ceniony w kontekście grafiki internetowej, ponieważ obsługuje przezroczystość, co czyni go idealnym wyborem dla obrazów, które wymagają tła transparentnego. Przezroczystość w formacie PNG jest realizowana poprzez zastosowanie kanału alfa, co pozwala na uzyskanie różnorodnych efektów wizualnych, takich jak cienie, gradienty czy delikatne przejścia między kolorami. Przykłady zastosowania to ikony, logo, grafiki na stronach internetowych, które muszą harmonizować z różnymi kolorami tła. W przeciwieństwie do formatów takich jak JPEG, który nie obsługuje przezroczystości i używa kompresji stratnej, PNG oferuje kompresję bezstratną, co oznacza, że jakość obrazu nie ulega pogorszeniu po zapisaniu. W kontekście praktyk webowych, użycie PNG jest zgodne z zaleceniami dotyczącymi optymalizacji obrazów w sieci, co przyczynia się do szybszego ładowania stron i lepszej jakości wizualnej.

Pytanie 30

W kodzie HTML stworzono link do strony internetowej. Aby otworzyć tę stronę w nowym oknie lub zakładce przeglądarki, należy dodać do definicji linku atrybut

<a href="http://google.com" >strona Google</a>

A. target = "_parent"

B. rel = "next"

C. rel = "external"

D. target = "_blank"

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut target w języku HTML służy do określenia, w jaki sposób ma otworzyć się dokument, do którego prowadzi odnośnik. Użycie wartości '_blank' dla atrybutu target jest standardowym sposobem na otwarcie nowej strony w nowym oknie lub zakładce przeglądarki. Przykład zastosowania to: <a href="http://google.com" target="_blank">strona Google</a>. Jest to niezwykle przydatne w kontekście UX, ponieważ pozwala użytkownikom na łatwe porównanie informacji bez utraty dostępu do oryginalnej strony. Warto również zauważyć, że użycie tego atrybutu jest zgodne z najlepszymi praktykami w tworzeniu stron internetowych, gdyż umożliwia użytkownikom zachowanie kontekstu przeglądania. W HTML5 atrybut target pozostaje wspierany, co czyni go istotnym elementem w projektowaniu interfejsów użytkownika. Oprócz '_blank' istnieją inne wartości, takie jak '_self', '_parent' i '_top', które również spełniają różne funkcje w zależności od potrzeb nawigacyjnych w aplikacji webowej.

Pytanie 31

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

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

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

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

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

Brak odpowiedzi na to pytanie.

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

Pytanie 32

Aby zrealizować przycisk na stronę internetową zgodnie z wzorem, należy w programie graficznym skorzystać z opcji

A. zaokrąglenie lub wybranie opcji prostokąt z zaokrąglonymi rogami

B. wybór eliptyczny

C. deformacje i zniekształcenia

D. propagacja wartości

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Stworzenie przycisku na stronie internetowej, który ma zaokrąglone rogi, wymaga użycia opcji zaokrąglenia w programie do grafiki rastrowej lub wybrania narzędzia prostokąt z zaokrąglonymi rogami. Jest to podejście zgodne z aktualnymi trendami w projektowaniu interfejsów użytkownika, gdzie nacisk kładziony jest na estetykę i użyteczność. Zaokrąglone elementy są bardziej przyjazne dla oka i pomagają w tworzeniu wizualnie przyjemnych projektów. W programach graficznych takich jak Adobe Photoshop czy GIMP, opcja ta pozwala na szybkie i precyzyjne dostosowanie kształtu przycisku, co jest nieocenione przy tworzeniu prototypów i projektów graficznych. Stosowanie zaokrągleń jest również zgodne z zasadami projektowania responsywnego, gdyż takie elementy wyglądają dobrze na różnorodnych rozdzielczościach ekranów. Wybierając tę technikę, projektanci mogą skupić się na tworzeniu spójnych i nowoczesnych interfejsów, co jest istotne w kontekście doświadczenia użytkownika. Przykładem zastosowania jest przycisk 'Kontakt' na stronie internetowej, który dzięki zaokrąglonym rogom wygląda bardziej zachęcająco i nowocześnie, co wpływa na pozytywne postrzeganie strony przez użytkowników.

Pytanie 33

W przedstawionym kodzie HTML, zaprezentowany styl CSS jest stylem:

<p style="color:red;">To jest przykładowy akapit.</p>

A. zewnętrznym

B. dynamicznym

C. lokalnym

D. nagłówkowym

Brak odpowiedzi na to pytanie.

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

Pytanie 34

Jakie jest poprawne zapisanie tagu HTML?

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

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

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

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

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

Brak odpowiedzi na to pytanie.

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

Pytanie 35

Który z poniższych kodów HTML odpowiada opisanej tabeli? (W celu uproszczenia zrezygnowano z zapisu stylu obramowania tabeli oraz komórek)

A. Odpowiedź C

B. Odpowiedź A

C. Odpowiedź D

D. Odpowiedź B

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź B jest prawidłowa, ponieważ wykorzystuje atrybut rowspan do połączenia dwóch wierszy w jednej kolumnie tabeli. HTML zapewnia atrybuty rowspan i colspan, które umożliwiają połączenie wielu komórek tabeli w jedną, co jest niezbędne w sytuacjach, gdy dane muszą być przedstawione w sposób bardziej przejrzysty i zwarty. W przedstawionej tabeli labelka Telefon jest wspólna dla dwóch numerów, co skutkuje koniecznością użycia rowspan=2 w komórce, która łączy dwa wiersze. Ta konstrukcja jest zgodna z dobrymi praktykami tworzenia semantycznie poprawnych i wizualnie uporządkowanych tabel w dokumentach HTML. Zastosowanie atrybutu rowspan może poprawić czytelność tabel, co jest szczególnie przydatne przy prezentacji złożonych danych w aplikacjach biznesowych czy raportach. Użycie tego podejścia pozwala na bardziej efektywne wykorzystanie przestrzeni w tabeli i jest zgodne ze standardami W3C, które promują semantykę i dostępność w sieci.

Pytanie 36

Język HTML oferuje nagłówki, które służą do tworzenia hierarchii zawartości. Te nagłówki występują wyłącznie w zakresie

A. h1 - h10

B. h1 - h4

C. h1 - h6

D. h1 - h8

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź h1 - h6 jest poprawna, ponieważ w języku HTML nagłówki są definiowane w ramach sześciu poziomów, od h1 do h6. Nagłówki te pełnią kluczową rolę w organizacji treści na stronie internetowej, umożliwiając tworzenie hierarchii oraz struktury dokumentu. h1 jest najważniejszym nagłówkiem i powinien być używany do oznaczania głównego tytułu strony, podczas gdy h2, h3, h4, h5 i h6 służą do tworzenia podtytułów i hierarchii treści w miarę potrzeby. Na przykład, nagłówek h2 może być użyty do oznaczenia sekcji podrzędnej w stosunku do h1, a h3 do następnej sekcji podrzędnej. Takie zrozumienie hierarchii nagłówków jest istotne z punktu widzenia SEO, ponieważ wyszukiwarki korzystają z tych struktur do indeksowania treści. Dobrze zorganizowane nagłówki poprawiają również dostępność strony, co jest zgodne z najlepszymi praktykami webowymi, a także ułatwiają nawigację użytkownikom, zarówno ludziom, jak i robotom wyszukiwarek.

Pytanie 37

Który z poniższych języków jest używany do stylizacji stron WWW?

A. CSS

B. Python

C. HTML

D. SQL

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
CSS, czyli Cascading Style Sheets, to język używany do opisywania wyglądu dokumentu HTML. Dzięki niemu możemy określić, jak mają wyglądać elementy na stronie, takie jak kolory, czcionki, odstępy między elementami, a także układ całej strony. CSS jest nieodłącznym elementem nowoczesnego tworzenia stron internetowych, ponieważ pozwala na oddzielenie treści od formy, co jest jedną z zasad dobrych praktyk w web development. Umożliwia tworzenie responsywnych projektów, które dobrze wyglądają na różnych urządzeniach, od komputerów po smartfony. Stylowanie za pomocą CSS pozwala na zdefiniowanie stylów globalnych, które mogą być zastosowane do wielu elementów na stronie, co znacznie ułatwia zarządzanie wyglądem witryny. Praktycznym zastosowaniem CSS jest na przykład zmiana koloru tekstu na stronie za pomocą prostej reguły, czy też tworzenie zaawansowanych animacji, które zwiększają interaktywność stron. CSS jest kluczowy w procesie tworzenia estetycznych i funkcjonalnych stron internetowych, co czyni go niezbędnym narzędziem dla każdego web developera.

Pytanie 38

Co się stanie po kliknięciu w link z HTML zawierający znak #?

<a href="#dane">

A. Zostanie wybrany względny adres URL o nazwie dane

B. Otworzy się nowa karta w przeglądarce zatytułowana dane

C. Zostanie uruchomiony skrypt o nazwie dane

D. Strona przeskoczy do elementu o identyfikatorze równym dane

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W składni HTML znak # w atrybucie href w odsyłaczu oznacza, że odnośnik prowadzi do elementu o określonym identyfikatorze id na tej samej stronie. Jest to funkcjonalność zwana nawigacją wewnętrzną lub kotwiczeniem. Po kliknięciu takiego linku przeglądarka automatycznie przewija stronę do elementu o id równym wartości po znaku #. W praktyce jest to bardzo użyteczny mechanizm, zwłaszcza w długich dokumentach lub stronach typu one-page, gdzie można tworzyć spis treści z odnośnikami prowadzącymi do poszczególnych sekcji. Przykładem użycia może być link do formularza na dole strony, który pozwala użytkownikowi szybko dotrzeć do ważnych informacji. Zgodnie z dobrymi praktykami należy zawsze upewnić się, że id jest unikalne w kontekście całej strony, co zapobiega nieoczekiwanym zachowaniom podczas nawigacji. Jest to zgodne ze standardami W3C, które promują semantyczne i dostępne struktury stron internetowych, co wpływa pozytywnie na doświadczenie użytkownika i dostępność stron dla osób z niepełnosprawnościami.

Pytanie 39

Która z list jest interpretacją podanego kodu?

A. Rys. B

B. Rys. C

C. Rys. D

D. Rys. A

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kod HTML zawiera uporządkowaną listę ol z dwoma głównymi elementami muzyka i filmy Każdy z tych elementów ma zagnieżdżoną listę nieuporządkowaną ul z odpowiednimi wpisami W HTML użycie listy ol oznacza że elementy główne będą numerowane Kolejność elementów w kodzie muzyka a następnie filmy jest zgodna z ilustracją C gdzie każdy element nadrzędny zawiera swoją własną zagnieżdżoną listę nieuporządkowaną ul Prawidłowe zagnieżdżanie list jest kluczowe dla struktury semantycznej dokumentu HTML co ma znaczenie dla SEO i dostępności Dobrym przykładem praktyki jest używanie odpowiednich znaczników aby zachować logiczną hierarchię Użycie ol i ul w odpowiednich miejscach pozwala na lepsze zrozumienie i interpretację treści przez przeglądarki i czytniki ekranowe Zapewnienie poprawnej struktury list pomaga również w utrzymaniu porządku w kodzie i lepszym zarządzaniu stylem za pomocą CSS

Pytanie 40

Jaki format CSS dla akapitu definiuje styl szarej ramki z następującymi cechami?

p {
  padding: 15px;
  border: 2px dotted gray; }

A. linia kropkowa; grubość 2 px; marginesy między tekstem a ramką 15 px

B. linia ciągła; grubość 2 px; marginesy poza ramką 15 px

C. linia ciągła; grubość 2 px; marginesy między tekstem a ramką 15 px

D. linia kreskowa; grubość 2 px; marginesy poza ramką 15 px

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź numer jeden jest poprawna, ponieważ prawidłowo opisuje stylizację akapitu przy użyciu CSS zgodnie z przedstawionym kodem. Właściwość 'border' definiuje styl obramowania elementu. W tym przypadku użyto stylu 'dotted', który oznacza linię kropkowaną, o grubości 2 pikseli i kolorze szarym. Jest to użyteczne w sytuacjach, gdy chcemy wizualnie wyróżnić element, ale w sposób subtelny i nienachalny. Dodatkowo, właściwość 'padding' określa margines wewnętrzny, czyli odstęp między zawartością elementu a jego krawędzią. Zapewnienie marginesu wewnętrznego 15 pikseli pozwala tekstowi oddalić się od krawędzi obramowania, co zwiększa czytelność i estetykę. Praktyczne zastosowanie takich stylizacji można znaleźć w projektowaniu stron internetowych, gdzie często używa się różnych stylów obramowań do organizowania treści. Zgodność z dobrymi praktykami web designu zakłada użycie spójnych i intuicyjnych stylów, co poprawia doświadczenia użytkownika oraz ułatwia nawigację po stronie internetowej. Tego typu formatowanie jest zgodne ze standardami CSS, co czyni kod bardziej przewidywalnym i łatwiejszym w utrzymaniu

Rozpocznij nowy egzamin

Powrót do strony głównej