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: 8 kwietnia 2026 08:10
Data zakończenia: 8 kwietnia 2026 08:22

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Aby przekształcić obraz z formatu JPEG do PNG bez utraty jakości, tak aby kolor biały w oryginalnym obrazie został zastąpiony przezroczystością w wersji docelowej, należy najpierw

A. załadować obraz do programu do edycji grafiki wektorowej

B. dodać kanał alfa

C. obniżyć rozdzielczość obrazu

D. usunięcie gumką wszystkich białych miejsc

Jeśli chodzi o błędne odpowiedzi, to zaimportowanie obrazu do edytora grafiki wektorowej nie jest najlepszym pomysłem w tej sytuacji. Edytory wektorowe, takie jak Adobe Illustrator, są stworzone do pracy z grafiką wektorową, a nie z rastrową, więc operowanie na pikselach, jak dodawanie przezroczystości w miejscach kolorów rastrowych, może być trudne, a czasem nawet niemożliwe. Poza tym, zmniejszenie rozdzielczości obrazu na pewno nie pomoże w dodaniu przezroczystości, a wręcz może spowodować utratę detali i jakości, co jest sprzeczne z celem tej konwersji. Używanie gumki do wymazywania wszystkich białych plam to też nie najlepsze rozwiązanie. Jest to czasochłonne i może prowadzić do przypadkowego usunięcia innych ważnych elementów. Z mojego doświadczenia wynika, że może to zostawiać niepożądane artefakty i obniżać jakość. Dlatego kluczowym krokiem w tym procesie, żeby uzyskać przezroczystość, jest dodanie kanału alfa. Tak można skutecznie zarządzać przezroczystością w wynikowym obrazie PNG, co jest zgodne z zasadami dobrego przetwarzania grafiki rastrowej.

Pytanie 2

Jeżeli rozmiar pliku graficznego jest zbyt duży do publikacji w sieci, co należy zrobić?

A. zwiększyć jego głębię kolorów

B. zapisać w formacie BMP

C. zmniejszyć jego rozdzielczość

D. dodać kanał alfa

Zwiększenie głębi kolorów w pliku graficznym nie prowadzi do zmniejszenia jego rozmiaru, a wręcz przeciwnie, może spowodować, że plik stanie się większy. Głębia kolorów odnosi się do liczby bitów używanych do reprezentacji koloru pojedynczego piksela obrazu. Na przykład, zwiększenie głębi z 8 bitów (256 kolorów) do 16 bitów (65 536 kolorów) zwiększa objętość danych, co skutkuje większym rozmiarem pliku. Ponadto, zapis w formacie BMP to również błędny wybór, ponieważ BMP jest formatem, który przechowuje dane w sposób mało efektywny i niekompresowany, co sprawia, że pliki BMP są znacznie większe niż ich odpowiedniki w formatach skompresowanych, takich jak JPEG czy PNG. Dodanie kanału alfa do obrazu, choć może być przydatne w przypadku potrzeby przejrzystości, również zwiększy rozmiar pliku, ponieważ dodaje dodatkowe informacje o przezroczystości dla każdego piksela. W rezultacie, wszystkie te działania wprowadzą niepotrzebny wzrost rozmiaru pliku, co jest sprzeczne z celem optymalizacji pod kątem publikacji online.

Pytanie 3

Jakie będzie działanie po naciśnięciu przycisku oznaczonego jako "niebieski", który uruchamia podany kod JavaScript?

<p id="para1">Przykładowy tekst</p><p> i skrypt</p>
<button onClick="changeColor('blue');">niebieski</button>

<script type="text/javascript">
function changeColor(newColor)
{
var elem = document.getElementById("para1");
elem.style.color = newColor;
}
</script>

A. Zmiana koloru tekstu "i skrypt" na niebieski

B. Zmiana koloru tekstu "Przykładowy tekst i skrypt" na niebieski

C. Zmiana koloru tekstu "Przykładowy tekst" na niebieski

D. Zmiana barwy przycisku na niebieski

Kod JavaScript przedstawiony w pytaniu definiuje funkcję changeColor która przyjmuje jeden argument newColor. Po wywołaniu funkcji przez kliknięcie przycisku funkcja ta używa metody document.getElementById aby pobrać element o identyfikatorze para1. Identyfikator ten jest przypisany do pierwszego elementu paragrafu zawierającego tekst Przykładowy tekst. Następnie w ramach tego elementu zmieniany jest kolor tekstu poprzez przypisanie newColor do właściwości style.color. W omawianym przypadku newColor przyjmuje wartość blue co oznacza że tekst Przykładowy tekst zmieni kolor na niebieski. Warto podkreślić że manipulacja DOM przy użyciu JavaScript jest powszechnie stosowaną techniką w tworzeniu dynamicznych interfejsów użytkownika. Używanie metod takich jak getElementById jest standardem ze względu na ich prostotę oraz efektywność w selekcji elementów HTML. W praktycznych zastosowaniach warto również pamiętać o zgodności ze standardami W3C oraz o możliwościach rozszerzenia za pomocą bibliotek takich jak jQuery które oferują jeszcze bardziej zaawansowane opcje manipulacji DOM.

Pytanie 4

Znacznik <strong> tekst</strong> w HTML będzie ukazywany przez przeglądarkę w identyczny sposób, jak znacznik

A. <b>tekst</b>

B. <sub>tekst</sub>

C. <h1>tekst</h1>

D. <big>tekst</big>

Znacznik <h1> jest używany do definiowania nagłówków na stronie internetowej. Oznacza on najwyższy poziom nagłówka i jest kluczowy dla struktury dokumentów HTML. Użycie <h1> dla wyróżnienia tekstu nie jest odpowiednie, ponieważ ten znacznik powinien być zarezerwowany dla tytułów oraz głównych nagłówków strony, co wpłynie na SEO, ponieważ wyszukiwarki traktują go jako istotny element hierarchii treści. Z kolei znacznik <big> jest używany do zwiększenia rozmiaru czcionki tekstu, co również nie odpowiada funkcji wyróżnienia semantycznego, które realizuje <strong>. W przypadku <big> nie zmienia się znaczenie tekstu, a jedynie jego rozmiar, co czyni go mniej przydatnym w kontekście semantyki. Ostatecznie, znacznik <sub> jest przeznaczony do dodawania tekstu dolnego, czyli subscript, co w żaden sposób nie wpływa na wyróżnienie tekstu jako takiego. Znaczniki te nie mają na celu podkreślenia znaczenia treści, co jest główną funkcją zarówno <strong>, jak i <b>. Dlatego, każde z wymienionych znaczników nie spełnia oczekiwań związanych z semantyką i wyróżnianiem tekstu w HTML.

Pytanie 5

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

A. <section>

B. <div>

C. <header>, <footer>

D. <i>, <b>, <u>

Użycie znaczników <div>, <header>, <footer>, i <section> wskazuje na nieporozumienie dotyczące roli, jaką każdy z tych elementów pełni w strukturze HTML. Znacznik <div> jest uniwersalnym kontenerem, używanym do grupowania innych elementów, co ułatwia stylizację i układ strony. <header> i <footer> są semantycznymi znacznikami, które jasno definiują nagłówki i stopy strony, a ich użycie poprawia dostępność i SEO. Znacznik <section> z kolei służy do dzielenia strony na różne sekcje treści, co jest kluczowe dla strukturalnej organizacji dokumentu. Wprowadzenie zmiany w podejściu do budowy stron internetowych, w oparciu o semantykę, zaczyna być standardem webowym. Konwencje te nie tylko poprawiają czytelność kodu, ale także wpływają na jego interpretację przez różne technologie asystujące, takie jak czytniki ekranu. Zastosowanie znaczników semantycznych ułatwia zrozumienie treści przez przeglądarki i roboty wyszukiwarek, co może mieć kluczowe znaczenie dla widoczności strony w wynikach wyszukiwania. Typowe błędy, takie jak mylenie roli znaczników wizualnych z semantycznymi, prowadzą do nieefektywnego zarządzania treścią oraz wpływają na doświadczenia użytkowników, którzy korzystają z technologii wspomagających. Dlatego tak istotne jest zrozumienie i stosowanie właściwych znaczników w odpowiednich kontekstach.

Pytanie 6

Który z zapisów znacznika <div> może pojawić się w dokumencie HTML tylko raz, a ponowne jego użycie spowoduje błędy podczas walidacji tego dokumentu?

A. <div class="klasa1 klasa2">

B. <div id="identyfkator">

C. <div>

D. <div class="klasa">

Wybór innego znacznika <div> z atrybutami class lub bez atrybutów, takich jak <div class="klasa">, <div class="klasa1 klasa2"> czy <div>, może sugerować, że ich użycie nie jest ograniczone do pojedynczego wystąpienia w dokumencie. Te odpowiedzi nie uwzględniają kluczowej zasady dotyczącej atrybutu id, który, jak wcześniej wspomniano, musi być unikalny. Atrybut class z kolei nie ma podobnych ograniczeń; można go wielokrotnie przypisywać różnym elementom, co pozwala na grupowanie stylów. To często prowadzi do nieporozumień, w których użytkownicy mylą pojęcie unikalności id z możliwością wielokrotnego użycia class. Również przy użyciu znacznika <div> bez jakichkolwiek atrybutów, programiści mogą nieświadomie tworzyć wiele divów, które nie są jednoznacznie identyfikowalne, co może prowadzić do nieefektywnego kodu oraz problemów z dostępnością. Konsolidowanie wiedzy o tym, jak atrybuty wpływają na zachowanie i strukturyzację dokumentu HTML, jest kluczowe dla tworzenia poprawnych i wydajnych aplikacji webowych. W praktyce, zauważając różnice w zastosowaniu id i class, można lepiej organizować kod i unikać błędów walidacji.

Pytanie 7

W języku CSS zapis

p::first-line {font-size: 150%;}

zastosowany na stronie z wieloma paragrafami, z których każdy zawiera kilka linii, spowoduje, że

A. pierwsza linia każdego paragrafu będzie miała większą czcionkę niż pozostałe linie

B. pierwsza linia każdego paragrafu będzie miała mniejszą czcionkę niż pozostałe linie

C. cały tekst paragrafu zostanie powiększony o 150%

D. pierwszy paragraf na stronie w całości będzie miał powiększoną czcionkę

Odpowiedź jest trafna, bo selektor CSS 'p::first-line' służy do stylizowania wyłącznie pierwszej linii każdego paragrafu. Kiedy przypisujesz styl 'font-size: 150%', to znaczy, że czcionka tej pierwszej linii będzie większa o 50% od standardowego rozmiaru ustalonego w CSS. To dobra praktyka w web designie, bo pomaga w czytelności i nadawaniu hierarchii informacjom. Na przykład, fajnie jest wyróżnić rozpoczęcie tekstu albo zaakcentować ważne dane. Pamiętaj tylko, że efekt będzie widoczny tylko, gdy tekst ma więcej niż jedną linię, bo w przeciwnym razie powiększenie się nie ujawni. Dodatkowo, korzystanie z pseudo-elementów, jak '::first-line', to coś, co jest w standardach CSS i jest naprawdę cenione w branży.

Pytanie 8

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

A. padding

B. margin

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 9

W CSS, co spowoduje poniższy kod z plikiem rysunek.png?

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

A. tłem całej witryny

B. pokazany obok każdego akapitu

C. widoczny, jeśli zastosowany zostanie znacznik img w kodzie

D. tłem dla każdego akapitu

Rozważmy niepoprawne odpowiedzi które dotyczą innych zastosowań obrazów w CSS. Pierwsza sugestia że obraz będzie tłem całej strony jest błędna ponieważ aby to osiągnąć należałoby przypisać właściwość background-image do selektora body a nie p. Tylko wtedy obraz tła obejmowałby całą stronę. Z kolei odpowiedź sugerująca że obraz zostanie wyświetlony przy użyciu znacznika img również nie jest prawidłowa w kontekście kodu CSS który odnosi się do tła a nie do wstawiania obrazów jako treści dokumentu HTML. Taki efekt można uzyskać tylko poprzez odpowiednie osadzenie obrazu w kodzie HTML a nie za pomocą właściwości background-image. Trzecia niepoprawna sugestia że obraz będzie wyświetlany obok każdego paragrafu jest niezgodna z działaniem CSS dla tła. W rzeczywistości ustawienie background-image wpływa tylko na tło elementu a nie na jego zewnętrzne ułożenie. Typowym błędem przy interpretacji znaczenia background-image jest założenie że wpływa on na pozycjonowanie czy zawartość w sposób inny niż wizualne tło co może prowadzić do nieporozumień w kontekście projektowania stron internetowych. Ważne jest zrozumienie że background-image w CSS służy jedynie do dekoracyjnego aspektu wewnątrz danego selektora i nie zmienia struktury dokumentu HTML co stanowi kluczowy element w projektowaniu responsywnych i estetycznych stron www.

Pytanie 10

Wykorzystanie definicji stylu CSS spowoduje, że nagłówki drugiego poziomu będą się wyświetlać

h2 {
    text-decoration: overline;
    font-style: italic;
    line-height: 60px;
}

A. czcionką standardową, z linią pod tekstem, odległość między znakami wynosi 60 px

B. czcionką kursywną, z linią pod tekstem, wysokość wiersza wynosi 60 px

C. czcionką kursywną, z linią nad tekstem, wysokość wiersza wynosi 60 px

D. czcionką standardową, z linią nad tekstem, wysokość wiersza wynosi 60 px

Odpowiedź numer 2 jest poprawna, ponieważ definicja stylu CSS zawiera właściwości, które dokładnie odpowiadają tej opcji. Właściwość font-style: italic sprawia, że tekst nagłówka będzie zapisany czcionką pochyloną, co jest często stosowane w celu nadania tekstowi bardziej dynamicznego i estetycznego wyglądu. Jest to szczególnie przydatne w projektowaniu stron internetowych, gdzie wyróżnienie nagłówków ma kluczowe znaczenie dla czytelności i atrakcyjności wizualnej. text-decoration: overline dodaje linię nad tekstem, co jest mniej powszechnym, ale interesującym sposobem na wyróżnienie tekstu. Może być używane w nowoczesnych projektach, aby nadać stronie unikalny charakter. Wysokość wiersza line-height: 60px zapewnia odpowiednią przestrzeń między wierszami, co zwiększa czytelność, szczególnie przy większych czcionkach. Taki sposób formatowania jest zgodny ze standardami projektowania UX/UI, które kładą nacisk na estetykę i funkcjonalność. Dlatego zrozumienie tych właściwości i ich zastosowanie jest kluczowe dla każdego projektanta stron internetowych.

Pytanie 11

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

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

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

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

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

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

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

Pytanie 12

Według zasad walidacji HTML5, jakie jest prawidłowe użycie znacznika hr?

A. </ hr>

B. </hr?>

C. </ hr />

D. <hr>

Znacznik <hr> to taki prosty element w HTML5, który robi poziomą linię na stronie. Używa się go często do oddzielania różnych sekcji w tekście, co sprawia, że wszystko wygląda bardziej przejrzyście. Co ciekawe, to znacznik samodzielny, więc nie potrzebuje zamknięcia, a dodatkowo w HTML5 nie musimy dodawać znaku '/' na końcu, co czyni go lżejszym w użyciu. Jak użyjemy <hr>, to przeglądarki wiedzą, co z tym zrobić, a to ważne, żeby strona wyglądała spójnie. Moim zdaniem, świetnie działa w artykułach, bo gdy oddziela różne części, to czytelnik łatwiej się w tym odnajduje. No i nie zapominajmy o dostępności – ludzie, którzy korzystają z technologii wspomagających, też lepiej zrozumieją, co się dzieje na stronie dzięki takim znacznikom.

Pytanie 13

Który kod HTML zapewni identyczny efekt formatowania jak na przedstawionym obrazku?

W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

A. <p>W tym <i>paragrafie <b>zobaczysz</b> sposoby formatowania</i> tekstu w HTML</p>

B. <p>W tym <b>paragrafie <i>zobaczysz</i> sposoby formatowania</b> tekstu w HTML</p>

C. <p>W tym <i>paragrafie </i><b>zobaczysz</b><i> sposoby formatowania</i> tekstu w HTML</p>

D. <p>W tym <i>paragrafie zobaczysz sposoby formatowania</i> tekstu w HTML</p>

Wybór niepoprawnych odpowiedzi wynika z błędnego użycia znaczników HTML, co wpływa na końcowe formatowanie tekstu. Pierwsza odpowiedź zawiera błąd polegający na niewłaściwym zamknięciu znacznika <b> przez dodanie spacji przed ukośnikiem, co powoduje, że przeglądarki mogą błędnie interpretować strukturę HTML. W konsekwencji, tekst może nie być prawidłowo pogrubiony, ponieważ przeglądarka nie rozpoznaje zamknięcia znacznika. Trzecia odpowiedź całkowicie pomija znacznik <b>, co oznacza, że tekst 'zobaczysz' nie zostanie pogrubiony, co jest niezgodne z wymaganym efektem wizualnym. Brak zastosowania odpowiednich znaczników wpływa na semantyczne znaczenie zawartości, co jest kluczowe w kontekście dostępności i dobrych praktyk w web designie. Czwarta odpowiedź błędnie rozdziela znaczniki <i> wokół słowa 'zobaczysz', co nie tworzy efektu jednoczesnej kursywy i pogrubienia. Wiedza dotycząca zagnieżdżania znaczników jest istotna, aby uzyskać pożądany efekt wizualny, a także utrzymać semantykę i dostępność zgodnie z nowoczesnymi standardami tworzenia stron internetowych. Rozumienie hierarchii i poprawne zamykanie znaczników ma kluczowe znaczenie dla renderowania strony zgodnie z oczekiwaniami, jak również dla zachowania zgodności z HTML5.

Pytanie 14

W CSS, aby zmienić kolor czcionki dowolnego elementu HTML po najechaniu na niego kursorem, należy użyć pseudoklasy

A. :hover

B. :visited

C. :active

D. :coursor

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Pseudoklasa :hover jest kluczowym elementem w CSS, umożliwiającym stylizację elementów HTML w momencie, gdy użytkownik najeżdża na nie kursorem myszy. Dzięki temu możemy w sposób dynamiczny zmieniać właściwości prezentacyjne, takie jak kolor czcionki, tło, obramowanie, a także inne atrybuty, co znacząco zwiększa interaktywność strony. Definiując regułę CSS z użyciem :hover, możemy na przykład zmienić kolor tekstu z szarego na niebieski, co przyciąga uwagę użytkownika. Przykładowa reguła CSS wygląda następująco: `a:hover { color: blue; }`, co oznacza, że elementy linków zmienią kolor na niebieski po najechaniu na nie kursorem. Pseudoklasa :hover jest zgodna z W3C CSS Specification i działa w większości nowoczesnych przeglądarek, co czyni ją niezbędnym narzędziem w arsenale każdego web developera. Używanie tej pseudoklasy pomaga w budowaniu responsywnych interfejsów użytkownika, które są bardziej przyjazne i angażujące. Poprawne zastosowanie :hover zwiększa również dostępność witryn, ponieważ użytkownicy mogą lepiej orientować się w interakcji z elementami strony.

Pytanie 15

Jaki wynik pojawi się po wykonaniu zaprezentowanego kodu HTML?

A. Odpowiedź C

B. Odpowiedź D

C. Odpowiedź A

D. Odpowiedź B

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź D jest prawidłowa, ponieważ prezentowany kod HTML zawiera zagnieżdżone listy uporządkowane i nieuporządkowane. Zewnętrzna lista uporządkowana zaczyna się od numeru 1 i zawiera elementy li, gdzie drugi z nich zawiera w sobie listę nieuporządkowaną ul. Taka struktura jest zgodna ze standardami HTML i pozwala na efektywne prezentowanie hierarchii informacji. Co ważne, dodatkowy element ol z atrybutami type=A i start=4 generuje listę literową zaczynającą się od D, co jest wykorzystywane do tworzenia niestandardowych punktów startowych w listach uporządkowanych. Praktycznie, listy zagnieżdżone są używane do tworzenia bardziej złożonych struktur danych, jak instrukcje czy spisy treści. Korzystając z atrybutów type i start, możemy manipulować prezentacją list, co jest przydatne w rozwijających się serwisach internetowych. Zastosowanie atrybutu type z wartościami A, a, I itp., pozwala na zmianę stylu numerowania, co jest zgodne z dobrymi praktykami projektowania stron.

Pytanie 16

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

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

B. nav { float: right; }

C. aside {float: left; }

D. nav { float: right; } section { float: right; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłowa odpowiedź opiera się na tym, jak działają własności float w CSS i w jakiej kolejności przeglądarka renderuje elementy blokowe. Jeśli w dokumencie HTML kolejność znaczników to np. <aside>, potem <section>, a na końcu <nav>, to bez dodatkowego stylowania wszystkie trzy ustawią się pionowo, jeden pod drugim, w tej właśnie kolejności. Dodanie float zmienia sposób, w jaki elementy „odpływają” od normalnego przepływu dokumentu i jak układają się obok siebie. W stylu nav { float: right; } section { float: right; } sprawiamy, że zarówno nav, jak i section są przesuwane do prawej krawędzi kontenera, natomiast aside (bez float) pozostaje w normalnym przepływie, czyli z lewej strony. Ponieważ przeglądarka układa elementy w kolejności występowania w kodzie, najpierw wyrenderuje aside po lewej, potem section „odpłynie” w prawo, a na końcu nav też „odpłynie” w prawo, ustawiając się po prawej stronie, ale dalej od góry niż section. Efekt wizualny jest taki, że po lewej mamy aside, po prawej nav, a section ląduje między nimi, dokładnie tak jak było pokazane na filmie. Moim zdaniem to zadanie dobrze pokazuje, że przy floatach zawsze trzeba myśleć o trzech rzeczach naraz: kolejności elementów w HTML, kierunku „pływania” (left/right) oraz o tym, które elementy pozostawiamy w normalnym przepływie. W praktyce w nowoczesnych projektach częściej używa się flexboxa albo CSS Grid do takich układów, bo są czytelniejsze i mniej problematyczne. Przykładowo, zamiast kombinować z float, można by użyć display: flex; na kontenerze i ustawić order dla aside i nav. Float nadal jednak pojawia się w starszych layoutach i w zadaniach egzaminacyjnych, więc warto dobrze rozumieć jego zachowanie, choćby po to, żeby poprawnie modyfikować istniejące style lub naprawiać „rozjechane” układy w starszych projektach.

Pytanie 17

Jaką właściwość CSS należy zastosować, aby ustawić wewnętrzne marginesy dla danego elementu?

A. width

B. hight

C. padding

D. margin

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwość CSS, którą należy zastosować do definiowania marginesów wewnętrznych elementu, to padding. Padding określa przestrzeń wewnętrzną między zawartością elementu a jego granicami. Przy pomocy paddingu możemy dostosować, jak dużo przestrzeni chcemy mieć wokół tekstu, obrazów czy innych elementów wewnątrz danego kontenera. Na przykład, zastosowanie padding: 20px; w CSS sprawi, że wewnętrzny margines będzie wynosił 20 pikseli od wszystkich stron wokół zawartości. Na poziomie praktycznym, padding jest niezwykle użyteczny w projektowaniu responsywnych interfejsów użytkownika, ponieważ pozwala na lepsze dostosowanie elementów do różnych rozmiarów ekranów. Dobrą praktyką jest używanie paddingu w połączeniu z innymi właściwościami, takimi jak margin, aby uzyskać pełną kontrolę nad położeniem i rozkładem elementów na stronie. Warto także pamiętać, że w CSS możemy ustalać padding oddzielnie dla górnej, prawej, dolnej i lewej strony, co daje jeszcze większą elastyczność w projektowaniu.

Pytanie 18

Która z poniższych grup znaczników HTML zawiera tagi używane do grupowania elementów oraz organizacji struktury dokumentu?

A. table, tr, td

B. span, strong, em

C. br, img, hr

D. div, article, header

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź z <div>, <article> i <header> jest naprawdę trafna. Te znaczniki HTML są super ważne, bo pomagają w sensownym grupowaniu treści. <div> to taki uniwersalny kontener, który świetnie nadaje się do organizowania elementów, a zwłaszcza przy stylach CSS. Można nim łatwo zarządzać całymi sekcjami, co jest spoko. <article> z kolei to coś jak kawałek treści, który może działać samodzielnie, na przykład artykuł czy post na blogu. A <header>? On zdefiniuje nagłówki dla różnych sekcji, co ułatwia nawigację po stronie. To nie tylko pomaga użytkownikom, ale też robotom indeksującym. Fajnie też pamiętać, że korzystając z odpowiednich znaczników, nie tylko sprawiamy, że strona jest bardziej dostępna, ale też poprawiamy SEO, co jest kluczowe, żeby nasza witryna była widoczna w sieci.

Pytanie 19

W CSS przypisano regułę: float: left; dla elementu blokowego. Jakie będzie jej zastosowanie?

A. układania bloków jeden pod drugim

B. ustawienia bloku na lewo w stosunku do innych

C. wyrównania elementów tabeli do lewej strony

D. wyrównania tekstu do lewej strony

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Reguła CSS 'float: left;' jest używana do ustawienia elementu blokowego po lewej stronie kontenera, co pozwala na swobodne rozmieszczanie innych elementów w otaczającym go obszarze. Elementy, które są ustawione jako 'float', nie zajmują miejsca w normalnym przepływie dokumentu, co oznacza, że inne elementy mogą 'przepływać' wokół nich. Przykładem zastosowania tej reguły może być układ strony internetowej, gdzie zdjęcia są umieszczone z lewej strony tekstu, co pozwala na estetyczne i funkcjonalne połączenie grafiki z treścią. Zgodnie z wytycznymi W3C, właściwości 'float' powinny być używane z rozwagą, aby uniknąć problemów z układaniem stron, na przykład należy pamiętać o zastosowaniu właściwości 'clear', aby uniknąć niechcianych efektów wizualnych. W praktyce, float jest często stosowany w układach siatki lub responsywnych, gdzie elastyczne i dynamiczne rozmieszczenie elementów jest kluczowe dla użyteczności i estetyki strony.

Pytanie 20

W przedstawionej regule CSS ```h1 {color : blue}``` h1 reprezentuje

A. deklarację

B. klasę

C. wartość

D. selektor

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Selekcja elementów w CSS jest naprawdę ważna, jeśli chodzi o tworzenie stron www. W regule CSS `h1 {color: blue}` mamy do czynienia z selektorem `h1`, który mówi nam, jak stylizować nagłówki pierwszego poziomu. Dzięki selekcji można fajnie dopasować wygląd strony do swoich potrzeb. No i w tym przypadku każdy nagłówek `h1` na stronie będzie miał niebieski kolor, co jest dość prostą i czytelną metodą. warto pamiętać, że CSS oferuje różne typy selektorów, jak klasy czy identyfikatory, a nie tylko tagi. W dużych projektach lepiej używać klasowych czy identyfikatorowych selektorów, bo daje to większą kontrolę nad stylizacją i łatwiejsze zarządzanie kodem.

Pytanie 21

W kodzie HTML zdefiniowano formularz, który wysyła dane do pliku formularz.php. Po naciśnięciu przycisku typu submit przeglądarka przechodzi do poniższego adresu:

../formularz.php?imie=Anna&nazwisko=Kowalska

Na podstawie podanego adresu można stwierdzić, że dane do pliku formularz.php zostały przesłane metodą:

A. POST

B. COOKIE

C. SESSION

D. GET

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest prawidłowa. Dane do pliku formularz.php zostały przesłane metodą GET, co można stwierdzić na podstawie adresu URL, który zawiera parametry (imię=Anna&nazwisko=Kowalska) przekazane po znaku zapytania (?). W metodzie GET, parametry są dołączane do adresu URL i są widoczne w pasku adresu przeglądarki. Jest to uniwersalny sposób przesyłania danych, który jest zgodny ze standardem HTTP i jest szeroko stosowany w praktyce. Metoda GET jest najprostszym sposobem przesyłania danych, ale ze względu na widoczność parametrów w adresie URL, nie jest zalecana do przesyłania ważnych informacji, takich jak hasła. W praktyce, metoda GET jest często stosowana do przekazywania informacji niezbędnych do wygenerowania konkretnej strony, takich jak identyfikatory zasobów lub parametry filtrowania.

Pytanie 22

Wskaż sposób, w jaki należy odwołać się do pliku default.css, jeśli index.html znajduje się bezpośrednio w katalogu Strona?

A. <link rel="stylesheet" type="text/css" href="...\style\default.css" />

B. <link rel="stylesheet" type="text/css" href="c:/style/default.css" />

C. <link rel="stylesheet" type="text/css" href="./style/default.css" />

D. <link rel="stylesheet" type="text/css" href="c:\style/default.css" />

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybrana odpowiedź jest poprawna, ponieważ poprawnie odwołuje się do pliku CSS za pomocą ścieżki względnej. W HTML, aby odwołać się do pliku zlokalizowanego w katalogu nadrzędnym, używa się ścieżki względnej, która zaczyna się od './', co oznacza bieżący katalog. Następnie podaje się nazwę podkatalogu (w tym przypadku 'style') i nazwę pliku (tutaj 'default.css'). W praktyce, gdy budujesz strukturę katalogową dla swojej strony internetowej, dobrą praktyką jest organizowanie plików w sposób logiczny i konsekwentny, aby ułatwić nawigację i odwołanie do plików. Pamiętaj też, że ścieżki względne są preferowane w większości przypadków, ponieważ są uniwersalne i niezależne od konkretnego systemu plików, co ułatwia przenoszenie kodu między różnymi środowiskami.

Pytanie 23

W jakim formacie powinien być zapisany obraz, aby mógł być wyświetlany na stronie internetowej z zachowaniem przezroczystości?

A. CDR

B. BMP

C. PNG

D. JPG

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format PNG (Portable Network Graphics) jest szeroko stosowany w sieci internetowej, ponieważ obsługuje przezroczystość, co jest kluczowe przy tworzeniu grafik, które mają być używane na stronach internetowych. Przezroczystość pozwala na nałożenie grafik na różne tła bez widocznych prostokątów czy kolorowych krawędzi, co znacznie poprawia estetykę oraz elastyczność projektów graficznych. PNG wykorzystuje kompresję bezstratną, co oznacza, że jakość obrazu nie ulega pogorszeniu podczas jego zapisywania, co jest istotne dla profesjonalnych projektów. Przykłady zastosowania formatu PNG obejmują ikony, logotypy oraz różnego rodzaju ilustracje, które muszą być wyświetlane na różnych tłach. W branży internetowej dobrym standardem jest używanie PNG do grafik wymagających przezroczystości, szczególnie w kontekście responsywnych projektów, gdzie różne elementy mogą mieć różne tła w zależności od urządzenia. Ponadto, PNG obsługuje kolor 24-bitowy oraz przezroczystość 8-bitową, co daje możliwość tworzenia bardziej złożonych efektów wizualnych. Zastosowanie tego formatu jest zgodne z dobrymi praktykami w projektowaniu stron, co czyni go preferowanym wyborem w wielu sytuacjach.

Pytanie 24

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

Tekst może być zaznaczony albo istotny dla autora

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

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

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

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

Brak odpowiedzi na to pytanie.

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

Pytanie 25

Wybierz prawidłowy sposób umieszczania komentarzy w kodzie źródłowym HTML

A.

B. -- informacje komentarza --

C. "" informacje komentarza ""

D. /* informacje komentarza */

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawny komentarz w HTML musi być zapisany dokładnie w formie: . To jest jedyny format zgodny ze specyfikacją HTML (HTML5, ale też starsze wersje). Przeglądarka traktuje wszystko, co znajduje się między ciągiem znaków , jako komentarz, czyli tego nie wyświetla użytkownikowi i nie interpretuje jako kod. Dzięki temu można w kodzie zostawiać sobie uwagi, opisy sekcji, tymczasowo coś „wyłączyć” albo oznaczyć fragment do późniejszej edycji. W praktyce stosuje się np.:  albo . Moim zdaniem komentarze są szczególnie ważne w większych projektach, bo po miesiącu naprawdę trudno pamiętać, po co była jakaś dziwna konstrukcja w HTML. Warto też wiedzieć, że w HTML nie stosujemy ani //, ani /* */ jak w JavaScript czy CSS. To są inne języki, inne reguły. Jeżeli wstawisz coś w stylu , to cały ten akapit jest ignorowany przez przeglądarkę, co jest wygodne przy testowaniu. Dobra praktyka jest też taka, żeby nie przesadzać z ilością komentarzy, ale tam gdzie struktura jest mniej oczywista (np. zagnieżdżone divy, rozbudowane formularze), lepiej dodać krótki, konkretny opis. W projektach komercyjnych często używa się komentarzy do oznaczania sekcji layoutu, np. , , co ułatwia pracę całemu zespołowi. W skrócie: tylko zapis z nawiasami ostrymi i myślnikami, czyli , jest w HTML prawidłowy i rozpoznawany jako komentarz.

Pytanie 26

Która z wymienionych grup znaczników HTML zawiera elementy przeznaczone do grupowania oraz tworzenia struktury dokumentu?

A. br, img, hr

B. table, tr, td

C. span, strong, em

D. div, article, header

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 'div, article, header' jest poprawna, ponieważ te znaczniki HTML są kluczowymi elementami umożliwiającymi grupowanie i organizację treści w dokumentach webowych. Znacznik 'div' jest uniwersalnym kontenerem, który można wykorzystać do grupowania innych elementów w celu lepszej strukturyzacji strony. 'article' jest przeznaczony do oznaczania niezależnych fragmentów treści, takich jak posty na blogach, które mogą być samodzielnie dystrybuowane. Z kolei 'header' zazwyczaj zawiera nagłówki i elementy wprowadzające dla sekcji strony. Zastosowanie tych znaczników zgodnie z wytycznymi W3C sprzyja poprawnej hierarchii dokumentu, co z kolei zwiększa użyteczność strony oraz jej dostępność dla technologii asystujących. Przykładowo, użycie 'article' pozwala wyszukiwarkom i czytnikom ekranu lepiej zrozumieć strukturę treści, co może pozytywnie wpłynąć na SEO oraz doświadczenia użytkowników.

Pytanie 27

Która definicja CSS wskazuje na formatowanie nagłówka h1: tekst z przekreśleniem, z odstępami między słowami wynoszącymi 10 px oraz w kolorze czerwonym?

A. A

B. B

C. D

D. C

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź A jest w porządku, bo dobrze odpowiada na to, co pytanie wymaga. Deklaracja 'text-decoration: overline;' dodaje linię nad tekstem, a nie pod nim. Właściwie to mega ważne, bo można łatwo pomylić nadkreślenie z podkreśleniem. Plus, 'word-spacing: 10px;' ustawia fajny odstęp między wyrazami, co sprawia, że nagłówki wyglądają lepiej i są bardziej czytelne. A jak ustawiłeś kolor tekstu na 'red', to wszystko jest super zgodne z tym, co miało być w zadaniu. Używanie takich definicji CSS to standard w tworzeniu stron, bo dobrze stylizowane nagłówki pomagają w organizacji treści i poprawiają wrażenia użytkowników. Pamiętaj, że sensowne i dobrze zdefiniowane style CSS to nie tylko wygoda, ale też ułatwiają późniejsze poprawki dla innych programistów.

Pytanie 28

Który z linków ma prawidłową budowę?

A. <a href='http://adres'> tekst </a>

B. <a href="http://adres"> tekst <a>

C. <a href="mailto:adres"> tekst </a>

D. <a href='mailto:adres'> tekst </a>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <a href="mailto:adres"> tekst </a> jest poprawna, ponieważ stosuje odpowiednie cudzysłowy dla atrybutu href oraz przestrzega standardów HTML. W HTML5 zaleca się użycie podwójnych cudzysłowów dla wartości atrybutów, co czyni tę konstrukcję zgodną z najlepszymi praktykami. Oto przykład zastosowania: klikając w ten odsyłacz, użytkownik uruchomi aplikację pocztową, co jest przydatne w kontekście kontaktu z użytkownikami czy klientami. Przykłady zastosowania obejmują formularze kontaktowe na stronach internetowych, gdzie użytkownicy mogą łatwo skontaktować się z właścicielem strony. Warto też pamiętać o stosowaniu odpowiednich adresów e-mail, aby uniknąć problemów związanych z korespondencją, oraz o używaniu przyjaznych dla użytkownika tekstów odsyłaczy, które jednoznacznie informują, dokąd prowadzi link. Przestrzeganie tych zasad nie tylko zwiększa użyteczność strony, ale także poprawia jej dostępność.

Pytanie 29

W HTML umieszczono formularz. Jakie skutki działania tego kodu zostaną pokazane przez przeglądarkę, jeśli użytkownik w drugim polu wprowadzi wartość "ala ma kota"?

A. Efekt 1

B. Efekt 4

C. Efekt 3

D. Efekt 2

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Efekt 2 jest prawidłowy, ponieważ kod HTML używa elementu select do stworzenia listy rozwijanej z trzema opcjami: Kraków, Poznań i Szczecin. Użytkownik może wybrać jedną z tych opcji, co jest standardowym zastosowaniem elementu select w formularzach HTML. Drugim elementem jest pole input typu password które maskuje wpisywany tekst. W formularzach HTML pole typu password jest używane do ukrywania wprowadzanego tekstu co jest szczególnie ważne przy wprowadzaniu danych wrażliwych takich jak hasła. Gdy użytkownik wpisuje hasło widoczne są tylko znaki maskujące często kropki lub gwiazdki co zapewnia prywatność danych. Stosowanie takich elementów jest zgodne z dobrymi praktykami projektowania interfejsów użytkownika w sieci co zwiększa bezpieczeństwo i wygodę użytkowania formularzy. Właściwe korzystanie z elementów HTML jak select i input type=password jest kluczowe w tworzeniu efektywnych i bezpiecznych stron internetowych co jest szczególnie istotne w kontekście e-commerce i aplikacji bankowych.

Pytanie 30

W przedstawionym kodzie HTML zastosowany styl CSS jest stylem ```

To jest przykładowy akapit.

```

A. nagłówkowym

B. dynamicznym

C. zewnętrznym

D. lokalnym

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Styl CSS zastosowany w podanym kodzie HTML to styl lokalny, ponieważ jest zdefiniowany bezpośrednio w tagu HTML za pomocą atrybutu 'style'. Taki sposób definiowania stylów pozwala na przypisanie unikalnych stylów do konkretnego elementu na stronie, co jest szczególnie przydatne, gdy chcemy szybko zmienić wygląd jednego elementu bez wpływania na inne. Przykładem lokalnego stylu jest ustawienie koloru tekstu akapitu na czerwony, co można zaobserwować w atrybucie 'style="color:red;"'. Warto zauważyć, że lokalne style mają wyższy priorytet od stylów zewnętrznych i wewnętrznych, co oznacza, że jeśli ten sam element ma przypisany styl zewnętrzny, lokalny styl go nadpisze. W kontekście standardów CSS, lokalne style są zgodne z zasadami kaskadowości, która określa, jak łączyć różne źródła stylów. Z perspektywy użyteczności, chociaż lokalne style mogą być wygodne, ich nadmierne stosowanie prowadzi do trudności w utrzymaniu kodu, dlatego zaleca się ich używanie w ograniczonym zakresie.

Pytanie 31

Przy założeniu, że nie istnieją inne definicje, jakie skutki będzie miało poniższe formatowanie CSS?

<style> td {padding: 30px; } </style>
 …
 <td style="padding: 10px;">Anna</td>
 <td>Ewa</td>

A. marginesy wewnętrzne wszystkich komórek wyniosą 10 px

B. margines wewnętrzny komórki z napisem Anna wyniesie 10 px, a z napisem Ewa – 30 px

C. margines wewnętrzny komórki z napisem Anna wyniesie 30 px, a z napisem Ewa – 10 px

D. marginesy wewnętrzne wszystkich komórek wyniosą 30 px

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest poprawna, ponieważ w kodzie HTML zastosowano bezpośrednie nadpisanie stylu dla komórki z napisem Anna. Chociaż w sekcji style zdefiniowano, że wszystkie komórki td mają padding 30px, to w przypadku komórki Anna zastosowano style inline, które mają wyższy priorytet i nadpisują ustalone wcześniej wartości. W rezultacie padding dla komórki Anna wynosi 10px. Natomiast dla pozostałych komórek, w tym komórki z napisem Ewa, obowiązuje reguła zdefiniowana globalnie w sekcji style, czyli padding wynosi 30px. Jest to przykład specyficzności w CSS, gdzie style inline są bardziej specyficzne niż style w sekcji style. W praktyce ważne jest, aby rozumieć hierarchię i specyficzność CSS, ponieważ pozwala to na skuteczne zarządzanie stylami i unikanie niezamierzonych zmian w wyglądzie strony. Dobra praktyka nakazuje unikać styli inline na rzecz zewnętrznych arkuszy stylów, co ułatwia zarządzanie kodem i czyni go bardziej czytelnym oraz łatwiejszym w utrzymaniu. Warto też stosować metodologie takie jak BEM, które pomagają w organizacji kodu CSS.

Pytanie 32

W przedstawionej regule CSS: h1 {color: blue} h1 symbolizuje

A. selektor

B. klasę

C. deklarację

D. wartość

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W podanej regule CSS, h1 {color: blue}, h1 jest selektorem, który identyfikuje elementy HTML, na które ma być zastosowany styl. Selektory są kluczowym elementem w CSS, ponieważ pozwalają na precyzyjne określenie, do których elementów stosować dane style. W tym przypadku h1 wskazuje na wszystkie nagłówki pierwszego poziomu w dokumentach HTML. Używając selektora h1, możemy na przykład zmienić kolor wszystkich tytułów na niebieski, co jest istotne dla poprawy estetyki i czytelności strony. Dobrą praktyką jest stosowanie odpowiednich selektorów, aby unikać niepotrzebnej redundancji w kodzie, co przyczynia się do lepszej wydajności ładowania strony. Zrozumienie selektorów CSS jest niezbędne do efektywnego stylizowania stron internetowych i jest zgodne z najlepszymi standardami w branży, takimi jak W3C. Na przykład, możemy również używać selektorów klas lub identyfikatorów, aby stosować różne style do konkretnych elementów, co pozwala na większą elastyczność i kontrolę nad wyglądem strony.

Pytanie 33

Elementy <header>, <article>, <section>, <footer> są typowe dla języka

A. HTML 5

B. HTML 4.01 Transitional

C. XHTML 1.1

D. HTML 4.01 Strict

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź HTML 5 jest prawidłowa, ponieważ to właśnie w tej wersji języka HTML wprowadzono nowe semantyczne znaczniki, takie jak <header>, <article>, <section> oraz <footer>. Te znaczniki mają na celu lepsze strukturalne organizowanie treści w dokumentach internetowych, co ułatwia zarówno odczyt zrozumienia przez przeglądarki, jak i poprawia dostępność dla osób korzystających z technologii wspomagających. Na przykład, <header> zazwyczaj zawiera nagłówki i elementy nawigacyjne, podczas gdy <article> służy do oznaczenia niezależnej jednostki treści, np. artykułu prasowego. <section> jest używane do grupowania powiązanych sekcji, a <footer> zawiera informacje takie jak prawa autorskie czy linki do polityki prywatności. Wdrożenie tych znaczników zgodnie z najlepszymi praktykami zwiększa semantykę strony, co jest korzystne dla SEO, a także pozwala na lepsze zrozumienie struktury strony przez roboty indeksujące. HTML 5 jest obecnie standardem w tworzeniu stron internetowych i jego znajomość jest kluczowa dla współczesnych deweloperów.

Pytanie 34

W CSS określono styl dla paragrafu, który nada mu poniższe cechy:

background-color: red;
color: blue;
margin: 40px;

A. tło w kolorze niebieskim, tekst w kolorze czerwonym, marginesy wewnętrzne o wartości 40px

B. tło w kolorze niebieskim, tekst w kolorze czerwonym, marginesy zewnętrzne o wartości 40px

C. tło w kolorze czerwonym, tekst w kolorze niebieskim, marginesy wewnętrzne o wartości 40px

D. tło w kolorze czerwonym, tekst w kolorze niebieskim, marginesy zewnętrzne o wartości 40px

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W podanym przykładzie z CSS zastosowano trzy kluczowe właściwości stylizujące element HTML: background-color color oraz margin. Właściwość background-color określa kolor tła danego elementu tutaj przyjęto wartość red co oznacza czerwone tło. Właściwość color definiuje kolor tekstu w elemencie który w tym przypadku jest ustawiony na blue czyli niebieski. Ostatnią właściwością jest margin która odpowiada za marginesy zewnętrzne elementu. Marginesy zewnętrzne to przestrzeń wokół elementu od jego krawędzi do sąsiadujących elementów i w tym przykładzie mają wartość 40px. Takie ustawienia są często używane w praktyce aby zapewnić czytelność i estetykę projektu. Używanie marginesów zewnętrznych to dobra praktyka w celu zachowania odpowiednich odstępów w układzie strony. Warto podkreślić że użycie tych właściwości jest zgodne ze standardami CSS zapewniając kompatybilność z większością przeglądarek. Właściwe stosowanie kolorów i marginesów jest kluczowe w projektowaniu przyjaznym dla użytkownika UX oraz estetycznie spójnych interfejsów graficznych.

Pytanie 35

W HTML-u znacznik tekst będzie prezentowany przez przeglądarkę w sposób identyczny do znacznika

A. <sub>tekst</sub>

B. <h1>tekst</h1>

C. <b>tekst</b>

D. <big>tekst</big>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <strong> w HTML jest używany do oznaczania tekstu, który ma być wyróżniony jako ważny. Jego domyślne stylizowanie w przeglądarkach polega na pogrubieniu tekstu, co jest również funkcją znacznika <b>. Oba znaczniki mają podobne zastosowanie, ale <strong> niesie dodatkowe znaczenie semantyczne, co oznacza, że informuje przeglądarki i maszyny o tym, że dany tekst jest istotny. Przykładem może być użycie <strong> w nagłówkach lub w miejscach, gdzie chcemy zwrócić uwagę na kluczowe informacje, jak np. 'Zamówienie <strong>pilne</strong> musi być dostarczone do jutra.' W kontekście dobrych praktyk zaleca się używanie znaku <strong> zamiast <b>, gdyż wspiera to dostępność i SEO - wyszukiwarki lepiej interpretują semantykę treści, co może wpłynąć na pozycjonowanie strony. Warto również pamiętać, że zgodnie z W3C, semantyka HTML ma kluczowe znaczenie dla strukturyzacji dokumentów oraz ich dostępności.

Pytanie 36

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

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

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

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

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

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

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 37

Znaczniki HTML <strong> oraz <em>, które służą do wyróżniania istotności tekstu, odpowiadają pod względem formatowania znacznikom

A. <b> oraz <i>

B. <u> oraz <sup>

C. <i> oraz <mark>

D. <b> oraz <u>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik HTML <strong> jest używany do oznaczenia tekstu, który jest ważny, podczas gdy <em> służy do podkreślenia, że tekst powinien być akcentowany w kontekście. Odpowiednikami tych znaczników, pod względem formatowania, są <b> oraz <i>. Znacznik <b> stosuje się do wyróżnienia tekstu, nadając mu pogrubienie, co zazwyczaj oznacza, że tekst jest istotny. Z kolei <i> używamy do kursywy, co również może wskazywać na akcentowanie lub wyróżnienie pewnych słów, jednak w sposób bardziej subtelny niż przy pomocy pogrubienia. W praktyce, stosując <strong> oraz <em>, dbamy o to, aby nasza treść była bardziej dostępna dla użytkowników, zwłaszcza dla osób korzystających z technologii wspomagających, takich jak czytniki ekranu. Stosowanie znaczników semantycznych zgodnie z dobrymi praktykami zapewnia lepszą interpretację treści przez wyszukiwarki, co może wpływać na SEO. Warto również pamiętać, że pomimo że <b> i <i> mają swoje zastosowania, znacznie lepiej jest używać <strong> i <em> w kontekście semantycznym, aby poprawić zrozumienie treści przez maszyny i użytkowników.

Pytanie 38

Jakie właściwości języka CSS mogą mieć wartości: underline, overline, line-through?

A. text-decoration

B. font-weight

C. text-style

D. font-style

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 'text-decoration' jest poprawna, ponieważ właściwość ta jest używana w CSS do stylizacji tekstu, a jej wartości mogą obejmować 'underline', 'overline' i 'line-through'. Właściwość 'text-decoration' umożliwia dodawanie dekoracji do tekstu, co jest szczególnie przydatne w przypadku podkreślania, przekreślania tekstu czy dodawania linii nad tekstem. Przykład zastosowania: aby podkreślić tekst, można użyć reguły CSS: `p { text-decoration: underline; }`. Dzięki temu wszystkie akapity na stronie będą miały podkreślony tekst. Warto również zauważyć, że w ramach standardów CSS3, właściwość ta zyskała dodatkowe wartości, takie jak 'none' czy 'blink', co jeszcze bardziej rozszerza jej funkcjonalność. W praktyce, 'text-decoration' jest często stosowane w projektach webowych, aby poprawić czytelność i estetykę treści. Dobrą praktyką jest jednak używanie tej właściwości w umiarkowany sposób, aby nie przytłoczyć użytkownika zbyt wieloma dekoracjami, co mogłoby wpłynąć na ogólną użyteczność strony.

Pytanie 39

.format1 {
    …
}

W CSS określono wspólne style dla pewnej grupy elementów. Użycie takich stylów w kodzie HTML odbywa się za pomocą atrybutu:

A. div = "format1"

B. id = "format1"

C. style = "format1"

D. class = "format1"

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Użycie atrybutu class w języku HTML do formatowania grupy znaczników jest zgodne z najlepszymi praktykami web developmentu. Atrybut class pozwala na zastosowanie tej samej definicji stylu CSS do wielu elementów, co jest efektywne i utrzymuje porządek w kodzie. Umożliwia to również łatwą zmianę wyglądu strony poprzez modyfikację tylko jednej definicji CSS zamiast ręcznego edytowania stylów każdego z elementów z osobna. Dzięki takiemu podejściu, programista może szybko aktualizować wygląd całej strony lub jej części bez ryzyka, że pominięte zostaną pojedyncze elementy. Ponadto użycie klas jest zgodne ze standardami W3C, co zapewnia kompatybilność i poprawne renderowanie w różnych przeglądarkach. Praktycznym przykładem zastosowania jest stronie, gdzie wszystkie elementy z klasą .format1 będą miały jednolity wygląd, na przykład wszystkie przyciski na stronie mogą mieć jednakowy kolor i styl. Pozwala to na tworzenie spójnych interakcji użytkownika i ułatwia przyszłą rozbudowę strony o dodatkowe funkcje.

Pytanie 40

Aby na stronie internetowej umieścić logo z przezroczystym tłem, jaki format powinien być zastosowany?

A. CDR

B. PNG

C. JPG

D. BMP

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format PNG (Portable Network Graphics) jest preferowany do przechowywania obrazów z przezroczystym tłem, co czyni go idealnym wyborem dla logo. Główne zalety PNG to obsługa przezroczystości oraz wysoka jakość grafiki bez utraty danych, dzięki kompresji bezstratnej. W praktyce, kiedy logo jest umieszczane na różnych tłach, przezroczystość pozwala na harmonijne wpasowanie się w otoczenie, co zwiększa estetykę strony. Ponadto, PNG obsługuje różne poziomy przezroczystości (alfa), co daje projektantom więcej możliwości w zakresie efektów wizualnych. Użycie PNG w projektach internetowych jest zgodne z dobrymi praktykami w zakresie tworzenia responsywnych i estetycznych interfejsów, a także zapewnia kompatybilność z większością przeglądarek internetowych. Warto zauważyć, że PNG jest również często stosowany w grafikach wektorowych i ikonach, które wymagają przejrzystości. Korzystając z PNG, projektanci mogą być pewni, że ich grafiki będą wyglądać profesjonalnie na każdej platformie.

Rozpocznij nowy egzamin

Powrót do strony głównej