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: 12 kwietnia 2026 17:16
Data zakończenia: 12 kwietnia 2026 17:23

Egzamin niezdany

Wynik: 10/40 punktów (25,0%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Grafik pragnie przekształcić obraz JPG na format PNG bez utraty jakości, tak aby wszędzie tam, gdzie w oryginalnym obrazie występuje kolor biały, w docelowej wersji była przezroczystość. W tym celu powinien

A. obniżyć rozdzielczość obrazu

B. dodać kanał alfa

C. zaimportować obraz do edytora grafiki wektorowej

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Dodanie kanału alfa do obrazu jest kluczowym krokiem, aby przekształcić JPEG w PNG z zachowaniem przezroczystości. Format PNG obsługuje kanał alfa, który może przechowywać informacje o przezroczystości każdego piksela, co oznacza, że można zdefiniować, które części obrazu są w pełni widoczne, a które są całkowicie przezroczyste. W praktyce, po dodaniu kanału alfa, można użyć narzędzi edycyjnych, aby ustawić białe obszary na przezroczyste. Na przykład w programie GIMP lub Adobe Photoshop, można użyć narzędzia 'Magiczne różdżka' do zaznaczenia białego tła, a następnie usunąć je, co zamieni białe piksele na przezroczystość. Istotne jest, aby pamiętać, że JPEG nie wspiera przezroczystości, dlatego przekształcenie do formatu PNG jest niezbędne. Dobrą praktyką jest zawsze pracować na kopii oryginalnego obrazu, aby móc wrócić do źródłowego pliku, jeśli zajdzie taka potrzeba.

Pytanie 2

Po przeprowadzeniu walidacji dokumentu HTML pojawił się błąd przedstawiony na zrzucie. Jak można go usunąć?

A. zmienić zapis </h1> na <h1>

B. w znaczniku img zmienić nazwę atrybutu src na href

C. w znaczniku img zmienić nazwę atrybutu src na alt

D. dodać atrybut alt do grafiki

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut alt w znaczniku img jest kluczowym elementem poprawnego i dostępnego kodu HTML. Służy on do dostarczenia tekstowego opisu zawartości obrazu co jest niezwykle ważne dla osób korzystających z technologii asystujących takich jak czytniki ekranu. Dodanie atrybutu alt poprawia również indeksowanie strony przez wyszukiwarki internetowe co wpływa na SEO. Zgodnie z wytycznymi W3C oraz WCAG każda grafika powinna posiadać ten atrybut aby zapewnić dostępność treści. Przykładowo jeśli obraz przedstawia logo firmy alt powinien zawierać nazwę firmy. W przypadku obrazów dekoracyjnych atrybut alt może być pusty co sygnalizuje że obraz nie niesie istotnej informacji. Takie praktyki wspierają budowanie witryn przyjaznych i zgodnych ze standardami co jest nie tylko wymogiem prawnym w wielu jurysdykcjach ale także dobrym nawykiem programistycznym. W związku z tym dodanie atrybutu alt jest nie tylko środkiem do eliminacji błędu walidacji ale również krokiem w stronę odpowiedzialnego tworzenia treści internetowych.

Pytanie 3

Zapis tagu HTML w formie <a href="#hobby">przejdź</a>?

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

B. jest poprawny, po kliknięciu w odnośnik otworzy się strona internetowa o adresie "hobby"

C. jest błędny, niepoprawnie użyto znaku "#" w atrybucie href

D. jest błędny, w atrybucie href trzeba wpisać adres URL

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest trafna, bo znacznik <a href="#hobby">przejdź</a> naprawdę jest zgodny z tym, co mówi HTML. Jak to działa? No, ten znak '#' wskazuje na lokalny odnośnik, co oznacza, że przeglądarka szuka elementu na stronie, który ma id "hobby". Przykładowo, jeśli w kodzie HTML mamy coś jak <div id="hobby">, to klikając w link, przewinie widok do tej sekcji. To jest super przydatne, zwłaszcza w długich dokumentach czy różnych aplikacjach, bo pozwala szybko skakać do interesujących nas części. Z mojego doświadczenia, używanie takich lokalnych odnośników nie tylko ułatwia nawigację, ale też poprawia SEO i interakcję użytkowników z treścią. Warto to stosować!

Pytanie 4

body{
background-image: url"rysunek.gif");
background-repeat: repeat-y;
}
W przedstawionej definicji stylu CSS, powtarzanie dotyczy

A. rysunku znajdującego się w tle strony w pionie

B. rysunku osadzonego znacznikiem img

C. tła każdego znacznika akapitu

D. rysunku umieszczonego w tle strony w poziomie

W definicji stylu CSS, zastosowane tło z rysunkiem 'rysunek.gif' jest powtarzane w pionie dzięki właściwości 'background-repeat: repeat-y'. Oznacza to, że obrazek będzie powielany wzdłuż osi Y, co skutkuje tym, że obrazek jest umieszczany jeden nad drugim, tworząc wrażenie ciągłości. Aby lepiej zrozumieć działanie tej właściwości, warto przyjrzeć się innym ustawieniom tła. Na przykład, właściwość 'background-repeat: repeat' powtarza obraz zarówno w poziomie, jak i w pionie, natomiast 'background-repeat: no-repeat' zapobiega jakimkolwiek powtórzeniom. W standardach CSS, takich jak CSS3, definiowanie tła w ten sposób jest zgodne z zasadami, które pozwalają na elastyczne projektowanie stron internetowych. W praktyce, użycie powtarzającego się tła może być przydatne w przypadku prostych wzorów, które mają stworzyć efekt wizualny, nie obciążając jednocześnie zbytnio zasobów, co jest istotne dla wydajności ładowania strony.

Pytanie 5

Aby poprawić wydajność strony z grafiką o wymiarach 2000 px na 760 px, konieczne jest zmniejszenie jej rozmiarów

A. za pomocą atrybutów HTML

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

C. w programie graficznym

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź "w programie graficznym" jest prawidłowa, ponieważ zmniejszenie rozmiaru grafiki w sposób, który rzeczywiście wpływa na jej wielkość pliku oraz jakość wizualną, powinno być przeprowadzane w programie graficznym. Programy takie jak Adobe Photoshop, GIMP czy Canva umożliwiają precyzyjne dostosowanie wymiarów oraz kompresję grafiki, co pozwala na optymalizację jej do użytku w internecie. Przykładowo, zmieniając rozmiar grafiki do wymiarów 1000 px na 380 px i zapisując ją w odpowiednim formacie (np. JPEG lub PNG z odpowiednią jakością), można znacznie zmniejszyć wielkość pliku, co przyczyni się do szybszego ładowania strony. Ponadto, odpowiednia kompresja umożliwia zachowanie dobrego balansu między jakością a rozmiarem pliku, co jest istotne dla doświadczeń użytkowników. W branży internetowej stosuje się różne techniki optymalizacji grafiki, takie jak lazy loading czy formaty WebP, które wspierają szybkie ładowanie stron. Warto również zwrócić uwagę na znaczenie odpowiedniej rozdzielczości grafiki, aby uniknąć zniekształceń i zapewnić optymalną jakość wizualną.

Pytanie 6

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

A. Joomla!

B. WordPress

C. MediaWiki

D. Drupal

Brak odpowiedzi na to pytanie.

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

Pytanie 7

Model barw o parametrach: odcień, nasycenie, jasność i przezroczystość, to

A. HSLA

B. RGBA

C. CMYK

D. SRGB

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłowa odpowiedź to HSLA, bo dokładnie ten model opisuje kolor za pomocą czterech parametrów: odcień (Hue), nasycenie (Saturation), jasność (Lightness) i przezroczystość (Alpha). W praktyce w CSS zapis wygląda na przykład tak: `hsla(210, 50%, 40%, 0.7)`. Pierwsza wartość, odcień, to kąt na kole barw w stopniach (0–360), gdzie 0 to czerwony, 120 to zielony, 240 to niebieski itd. Nasycenie i jasność zapisujemy w procentach – nasycenie określa „intensywność” koloru, a jasność to to, czy kolor jest ciemny czy bardzo rozjaśniony. Ostatni parametr, alpha, to kanał przezroczystości w zakresie od 0 (całkowicie przezroczysty) do 1 (całkowicie nieprzezroczysty). Moim zdaniem HSLA jest dużo wygodniejszy od klasycznego RGB przy projektowaniu interfejsów, bo łatwiej myśleć w kategoriach „przyciemnij ten kolor o 20%” albo „zmniejsz trochę nasycenie”, niż ręcznie kombinować z trzema składowymi R, G i B. W nowoczesnym front-endzie często stosuje się HSLA do definiowania palet kolorów, np. w zmiennych CSS, właśnie dlatego, że łatwo jest tworzyć spójne warianty: hover, focus, disabled, tła, obramowania. Dobre praktyki w UI/UX mówią, żeby trzymać stały odcień (Hue) dla jednego typu akcji, a zmieniać głównie jasność i nasycenie, żeby uzyskać różne stany tego samego koloru. Warto też wiedzieć, że HSLA to tak naprawdę tylko inny sposób zapisu kolorów w przestrzeni RGB, ale dużo bardziej „ludzki” w obsłudze. Przeglądarki zgodne ze standardami CSS3 i nowszymi w pełni wspierają HSLA, więc spokojnie można go używać w projektach komercyjnych. Dobrą praktyką jest także świadome korzystanie z kanału alpha, np. do półprzezroczystych nakładek, cieni czy tła pod modale, zamiast używania grafik PNG z przezroczystością.

Pytanie 8

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 czerwonym, tekst w kolorze niebieskim, 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 niebieskim, tekst w kolorze czerwonym, 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 9

Aby ustawić tło na stronie www należy użyć polecenia

A. <bgcolor=""></bgcolor>

B. <background=""></background>

C. <body bgcolor=""></body>

D. <body background=""></body>

Wszystkie inne odpowiedzi zawierają błędy i nie są zgodne z aktualnymi standardami HTML. Użycie znacznika <background> jest niewłaściwe, ponieważ taki znacznik nie istnieje w HTML; w związku z tym nie ma możliwości jego zastosowania w dokumentach HTML. Co więcej, atrybut <bgcolor> występuje tylko w kontekście znacznika <body> i nie może być używany jako samodzielny element. W przypadku użycia <body background=''> sytuacja jest podobna. Atrybut background był stosowany w starszych wersjach HTML do określenia obrazu tła, co również jest przestarzałe, ponieważ CSS oferuje znacznie bardziej elastyczne opcje. Używanie <body background='url(obrazu.jpg)'> może wciąż działać w niektórych przeglądarkach, ale nie jest to polecana praktyka. Ostatecznie, użycie <bgcolor> jest także ograniczone, ponieważ nie można nim ustawić tła w postaci obrazów czy gradientów, co jest możliwe przy użyciu CSS. Dlatego warto przyjąć nowoczesne podejście do stylizacji stron internetowych, opierając się na CSS, co jest zgodne z aktualnymi standardami i praktykami w branży.

Pytanie 10

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

A. height

B. padding

C. width

D. margin

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 11

Jakiego znacznika w języku HTML nie można użyć do wstawienia grafiki dynamicznej na stronę?

A. style="margin-bottom: 0cm;"><embed>

B. <strike>

C. style="margin-bottom: 0cm;"><img>

D. <object>

Wybór odpowiedzi 1, 3 lub 4 może wydawać się zrozumiały, jednak każdy z tych znaczników ma swoje specyficzne zastosowanie i może być użyty do integrowania grafik dynamicznych. Element <img> jest jednym z najbardziej powszechnie używanych znaczników do wyświetlania obrazów, zarówno statycznych, jak i dynamicznych, takich jak animacje w formacie GIF. Odpowiedź 3, <embed>, umożliwia osadzenie multimediów, takich jak wideo czy animacje Flash, a odpowiedź 4, <object>, jest elastycznym elementem, który może wyświetlać różne typy mediów, w tym grafiki i aplikacje interaktywne. Wybierając te odpowiedzi, można dojść do błędnego wniosku, że są one nieodpowiednie, gdyż wszystkie one wspierają umieszczanie mediów na stronie. Typowym błędem myślowym jest mylenie stylizacji tekstu z funkcjonalnością mediów, co prowadzi do niewłaściwego korzystania z semantyki HTML. Zrozumienie różnic między tymi znacznikami i ich zastosowaniem jest kluczowe dla efektywnego tworzenia stron internetowych oraz ich dostępności dla użytkowników.

Pytanie 12

Który z przedstawionych obrazów ma zastosowany poniższy styl CSS?

img {
    padding: 5px;
    border: 1px solid grey;
    border-radius: 10px;
}

A. D.

B. B.

C. A.

D. C.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Obraz A został sformatowany za pomocą stylu CSS, który określa podstawowe cechy estetyczne elementu graficznego. Pierwszym aspektem jest zastosowanie właściwości padding wynoszącej 5px, co oznacza, że wokół obrazu znajduje się wewnętrzny margines o szerokości 5 pikseli. To zapewnia przestrzeń między obrazem a jego ramką, zwiększając czytelność i estetykę wizualną. Następnie, użyto border o grubości 1px z kolorem solid grey. Ten cienki, szary obrys dodaje subtelny akcent, który pomaga wyróżnić obraz na tle strony. Wartość border-radius wynosi 10px, co dodaje zaokrąglone rogi, nadając nowoczesny wygląd. Takie zaokrąglenie jest często stosowane w nowoczesnym designie, aby nadać strony bardziej przyjazny i estetyczny wygląd. Stylizacja obrazów w ten sposób jest zgodna z zasadami responsywności i dostępności, co jest istotne w projektowaniu interfejsów użytkownika. Stosowanie takich technik pozwala na tworzenie spójnych i estetycznych stron internetowych, które są zgodne z obecnymi standardami UX i UI.

Pytanie 13

W HTML znacznik powoduje uzyskanie takiego samego efektu wizualnego jak znacznik

A. <pre>

B.

C.

D.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik w HTML służy do podkreślenia wyrazu w sposób, który jest semantyczny oraz wizualny. Oznacza on, że dany tekst ma szczególne znaczenie, co jest zgodne z dobrymi praktykami w tworzeniu dostępnych stron internetowych. Użycie jest preferowane w sytuacjach, gdy chcemy wyróżnić określone słowa lub frazy, co jest istotne dla zrozumienia treści. Przykładem może być zdanie: "Wartość ta jest szczególnie istotna w kontekście analizy". W takim przypadku tekst "szczególnie" będzie wyróżniony nie tylko dla użytkownika, ale również dla wyszukiwarek oraz technologii asystujących, co przyczynia się do lepszej dostępności strony. W przeciwieństwie do znaczników, które mają głównie funkcję wizualną, takich jak , przynosi dodatkowe znaczenie semantyczne, co czyni go bardziej odpowiednim w kontekście tworzenia dokumentów HTML zgodnych z standardami W3C.

Pytanie 14

W stylu CSS utworzono klasę uzytkownik. Na stronie będą wyświetlane czcionką w kolorze niebieskim: p.uzytkownik { color: blue; }

A. akapitów, którym przypisano klasę uzytkownik.

B. wszystkie elementy w sekcji <body> z przypisaną klasą uzytkownik.

C. wszystkie akapity.

D. jedynie elementy tekstowe takie jak , <h1>.

Odpowiedź, że paragrafy przypisane do klasy 'uzytkownik' będą miały niebieską czcionkę, jest jak najbardziej trafna. W CSS używamy kropki, żeby zdefiniować klasę, co oznacza, że styl dotyczy tylko tych elementów HTML, które mają tę klasę. Więc jeśli masz coś takiego w HTML jak , to na pewno będzie to wyświetlane z niebieską czcionką, zgodnie z Twoją regułą CSS. Takie podejście super wspiera modularność i możliwość ponownego użycia kodu, co jest naprawdę ważne w tworzeniu stron. Dzięki klasom CSS łatwo da się ogarnąć styl w różnych miejscach w kodzie, a zmieniając kolor czcionki w pliku CSS, zmiana ta natychmiast zaktualizuje wszystkie elementy z tą klasą. Przykładowo, akapit będzie miał niebieski kolor i to fajnie wpływa na spójność wizualną strony. Pamiętaj też, że klasy CSS można stosować nie tylko do akapitów, ale też do innych znaczników, co daje większą swobodę w stylizacji treści.

Pytanie 15

Aplikacja o nazwie FileZilla umożliwia

A. sprawdzanie poprawności plików HTML i CSS

B. importowanie bazy danych do systemu CMS Joomla!

C. przeprowadzanie testów aplikacji

D. publikację strony internetowej na zdalnym serwerze

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
FileZilla to popularny klient FTP (File Transfer Protocol), który umożliwia użytkownikom przesyłanie plików pomiędzy lokalnym komputerem a zdalnym serwerem. Głównym celem korzystania z FileZilla jest publikacja stron internetowych, co polega na załadowaniu plików HTML, CSS, obrazków oraz innych zasobów na serwer, gdzie strona będzie dostępna dla użytkowników w Internecie. Dzięki intuicyjnemu interfejsowi, użytkownicy mogą łatwo przeciągać i upuszczać pliki, co przyspiesza proces publikacji. FileZilla obsługuje różne protokoły, w tym FTP, FTPS oraz SFTP, co zapewnia bezpieczeństwo podczas transferu danych. Dobrą praktyką jest regularne aktualizowanie programu, aby korzystać z najnowszych funkcji i poprawek bezpieczeństwa. W kontekście publikacji stron internetowych, FileZilla stanowi kluczowe narzędzie dla web developerów, umożliwiając im szybkie i efektywne zarządzanie plikami na serwerach zdalnych. Używanie FileZilla wspiera standardy branżowe, takie jak bezpieczeństwo transferu danych oraz zdalne zarządzanie plikami, co jest niezbędne w profesjonalnym rozwoju stron internetowych.

Pytanie 16

Który z poniższych kodów HTML najlepiej ilustruje opisaną tabelę? (Obramowanie tabeli oraz komórek zostało pominięte dla uproszczenia)

A. Odpowiedź C

B. Odpowiedź A

C. Odpowiedź B

D. Odpowiedź D

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź B jest prawidłowa, ponieważ używa atrybutu rowspan do złączenia dwóch komórek w kolumnie. W przedstawionej tabeli nagłówek Telefony obejmuje dwie wartości w jednej kolumnie co jest dokładnie odwzorowane w kodzie HTML poprzez zastosowanie rowspan2 w komórce zawierającej Telefony. To podejście pozwala na logiczne i czytelne przedstawienie danych w tabeli co jest zgodne z dobrymi praktykami projektowania stron internetowych. Użycie rowspan w tabelach HTML jest powszechne gdy chcemy aby jedna komórka zajmowała miejsce większej liczby wierszy niż standardowa. Jest to przydatne w sytuacjach gdy dane muszą być grupowane pionowo co poprawia czytelność i strukturę prezentowanych informacji. Ponadto takie podejście pozwala na bardziej efektywne zarządzanie kodem HTML redukując potrzebę dodatkowego formatowania i zmniejsza złożoność dokumentu co jest zgodne z zasadami semantycznego HTML. Warto również pamiętać że użycie rowspan powinno być przemyślane aby zapewnić dostępność i poprawne wyświetlanie w różnych przeglądarkach i urządzeniach co jest kluczowe w nowoczesnym projektowaniu stron internetowych.

Pytanie 17

Zademonstrowano efekt stylizacji CSS oraz kod HTML. W jaki sposób należy ustawić styl, aby uzyskać takie formatowanie?

A. .first-line {font-size: 200%; color:brown;}

B. #first-line {font-size: 200%; color:brown;}

C. p.first-line {font-size: 200%; color:brown;}

D. p::first-line {font-size: 200%; color:brown;}

Odpowiedź p::first-line {font-size: 200%; color:brown;} jest prawidłowa, ponieważ selektor ::first-line w CSS służy do formatowania pierwszej linii tekstu wewnątrz elementu blokowego, takiego jak . W tym przypadku formatowanie odnosi się do zmiany rozmiaru czcionki na 200% i koloru na brązowy, co jest zgodne z efektem prezentowanym na obrazie. Jest to powszechna praktyka, gdy chcemy wyróżnić pierwszą linię tekstu, nadając jej specjalny wizualny akcent. Warto zaznaczyć, że selektory pseudo-klasowe, jak ::first-line, są częścią specyfikacji CSS i umożliwiają bardziej precyzyjne i kontekstualne formatowanie treści, co jest zgodne z najlepszymi praktykami w projektowaniu stron internetowych. Tego typu rozwiązania zwiększają czytelność i estetykę tekstu. W praktyce, stosowanie ::first-line jest szczególnie przydatne w projektach wymagających subtelnych wyróżnień tekstowych, takich jak artykuły prasowe, blogi czy strony promujące treści literackie. Taki styl programowania jest zgodny z zaleceniami W3C, co czyni go nie tylko efektywnym, ale i standardowym podejściem w tworzeniu nowoczesnych stron internetowych.

Pytanie 18

Najprostszy sposób zamiany obiektu oznaczonego cyfrą 1 na obiekt oznaczony cyfrą 2 polega na

A. zmianie warstwy obiektu.

B. narysowaniu docelowego obiektu.

C. geometrycznym transformowaniu obiektu.

D. animowaniu obiektu.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybrałeś poprawną odpowiedź, która jest 'geometrycznym transformowaniem obiektu'. Kiedy mówimy o transformacji geometrycznej, mamy na myśli różne operacje, które można wykonać na obiektach, takie jak skalowanie, obracanie i przesuwanie. W przypadku obiektu oznaczonego numerem 1 i numerem 2 na obrazku, najprostszym sposobem na przekształcenie jednego w drugi jest używanie transformacji geometrycznej. Obiekt numer 2 jest większy i obrócony w stosunku do obiektu numer 1. Dzięki transformacjom geometrycznym mogliśmy osiągnąć ten efekt, skalując i obracając obiekt numer 1. Transformacje geometryczne są podstawą wielu operacji w dziedzinach takich jak grafika komputerowa, projektowanie CAD, animacja, a także w wielu innych dziedzinach technologii i nauki.

Pytanie 19

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

A. D

B. A

C. B

D. C

Brak odpowiedzi na to pytanie.

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

Pytanie 20

Wskaż fragment kodu HTML5, który zostanie uznany przez walidator za niepoprawny?

A. <style>.a{color:#F00}</style>tekst

B. tekst

C. tekst

D. tekst

Odpowiedzi tekst, tekst oraz tekst są poprawne i zgodne z standardami HTML5. Element jest ogólnym znacznikiem używanym do definiowania paragrafów, a jego właściwe użycie obejmuje dodanie klas i identyfikatorów, co może być przydatne do stylizacji i skryptów. Użycie klasy 'stl' w pierwszym przykładzie pozwala na łatwe stylizowanie tego elementu w arkuszach stylów, co jest zgodne z zasadami modularności i ponownego użycia kodu. W przypadku drugiego przykładu, zastosowanie atrybutu style pozwala na bezpośrednie zastosowanie stylu, co jest właściwym podejściem w kontekście prostych aplikacji, chociaż w praktyce lepiej jest unikać inline styles ze względu na trudności w utrzymaniu kodu. Ostatni przykład, czyli tekst, nie zawiera żadnych dodatkowych atrybutów, ale także jest poprawny i może być używany w wielu kontekstach, gdzie stylizacja nie jest wymagana. Błędne jest myślenie, że elementy HTML5 są jedynie kontenerami treści - ich semantyka i zastosowanie klasy, identyfikatorów oraz stylów mają kluczowe znaczenie dla efektywności i organizacji kodu, co powinno być brane pod uwagę przy projektowaniu stron internetowych.

Pytanie 21

Wskaż, jaki błąd walidacyjny zawiera przedstawiony fragment kodu w języku HTML 5.

<h6>CSS</h6>
<p>Kaskadowe arkusze stylów (<b>ang. <i>Cascading Style Sheets</b></i>)<br>to język służący ...</p>

A. Znacznik br nie został prawidłowo zamknięty

B. Znacznik h6 nie jest używany w HTML5

C. Znacznik br nie powinien znajdować się wewnątrz znacznika p

D. Znacznik zamykający /b jest niezgodny z zasadą zagnieżdżania

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W analizowanym fragmencie kodu HTML, znacznik zamykający /b jest niezgodny z zasadą zagnieżdżania. W prawidłowej konstrukcji HTML, znaczniki powinny być zamykane w odwrotnej kolejności do ich otwierania — nazywa się to zasadą LIFO (Last In, First Out). W przedstawionym kodzie, znacznik jest otwierany przed znacznikiem , ale zamykany po nim, co jest błędem strukturalnym. Poprawny zapis powinien wyglądać tak: Cascading Style Sheets. Ważne jest, aby zawsze pamiętać o poprawnej strukturze dokumentu HTML, ponieważ nieprzestrzeganie tej zasady może prowadzić do nieprzewidywalnych wyników renderowania na różnych przeglądarkach. Zasada ta jest kluczowa w zapewnieniu, że znaczniki są zagnieżdżone poprawnie i że style oraz skrypty działają zgodnie z oczekiwaniami. Tego rodzaju błędy mogą również negatywnie wpływać na dostępność strony dla użytkowników korzystających z czytników ekranowych.

Pytanie 22

Język HTML posiada nagłówki, które służą do tworzenia hierarchii treści. Nagłówki te występują tylko w zakresie

A. h1 – h4

B. h1 – h6

C. h1 – h10

D. h1 – h8

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź h1 – h6 jest poprawna, ponieważ język HTML udostępnia sześć poziomów nagłówków, od h1 do h6, które służą do tworzenia hierarchii treści na stronie internetowej. Nagłówek h1 jest najważniejszy i powinien być używany do oznaczenia głównego tytułu strony, podczas gdy h2, h3, h4, h5 i h6 wskazują na kolejne poziomy nagłówków, które pomagają w organizacji treści. Przykładowo, nagłówek h2 może być używany do sekcji, natomiast h3 może oznaczać podsekcje w ramach danej sekcji. Używanie nagłówków w ten sposób nie tylko poprawia czytelność i zrozumienie treści przez użytkowników, ale także pozytywnie wpływa na SEO (optymalizację dla wyszukiwarek). Warto pamiętać, że zgodnie z najlepszymi praktykami, powinno się unikać pomijania poziomów nagłówków, co zapewnia logiczną strukturę treści i ułatwia indeksację przez roboty wyszukiwarek.

Pytanie 23

W HTML-u, aby umieścić animację FLASH (z rozszerzeniem .swf) na stronie www, powinno się wykorzystać znacznik

A. <img>

B. <video>

C. <object>

D. <audio>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
No to wiesz, że znacznik <object> to najlepszy sposób na osadzanie multimediów na stronie, zwłaszcza animacji FLASH (.swf). Działa to tak, że możemy włączyć różne treści zewnętrzne do HTML, co jest super do integracji różnych plików, jak wideo czy dźwięki. Patrz na ten przykład: <object data='animacja.swf' width='600' height='400'> <param name='autoplay' value='true'> <param name='loop' value='true'> </object>. Zauważ, że <object> może mieć różne atrybuty, które pomagają w kontrolowaniu jak to wszystko się wyświetla, jak 'width', 'height' i inne parametry odtwarzania. Jednak, biorąc pod uwagę dzisiejsze standardy, FLASH jest trochę na wylocie przez problemy z bezpieczeństwem i wsparciem przeglądarek. Lepiej więc, zamiast tego, patrzeć w stronę HTML5 i JavaScript do tworzenia animacji. Można używać animacji CSS3 lub różnych bibliotek JS, które dają dużo więcej możliwości i lepsze wsparcie na urządzeniach mobilnych.

Pytanie 24

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

A. Efekt 2.

B. Efekt 3.

C. Efekt 4.

D. Efekt 1.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Dobra robota! Odpowiedź, którą wybrałeś, to Efekt 2. W formularzu HTML masz różne elementy, które służą do zbierania danych od użytkownika. Tutaj mamy pole tekstowe i dwa checkboxy. Jak wpiszesz 'Przykładowy text' w pole tekstowe i wyślesz formularz, to właśnie to się wyświetli w przeglądarce. Efekt 2 pokazuje, że pole tekstowe ma wpisany tekst i dwa niezaznaczone checkboxy. Dlatego to jest zgodne z tym, co zobaczysz w przeglądarce. A to oznacza, że Efekt 2 jest poprawną odpowiedzią. Właściwie to wszystko jest zgodne z tym, jak HTML działa, czyli jak powinny wyglądać i działać różne elementy formularza.

Pytanie 25

W HTML, wartość atrybutu target, która umożliwia otwieranie strony w nowym oknie lub karcie, to

A. _parent

B. _self

C. _blank

D. _top

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
_blank to specjalna wartość atrybutu target w języku HTML, która umożliwia otworzenie linku w nowym oknie lub karcie przeglądarki. Jest to istotne dla poprawy doświadczeń użytkowników, gdyż pozwala im na przeglądanie treści zewnętrznych bez opuszczania aktualnej strony. Przykładowo, jeśli mamy link do dokumentacji lub zewnętrznego serwisu, użycie target="_blank" sprawi, że użytkownik otworzy ten link w nowym kontekście, co sprzyja lepszej nawigacji. Warto również pamiętać o praktykach bezpieczeństwa, takich jak dodawanie atrybutu rel="noopener noreferrer" do linków otwierających nowe okna, co zapobiega potencjalnym atakom związanym z przejmowaniem kontroli nad oryginalną stroną przez nowo otwartą. Przy projektowaniu stron internetowych, stosowanie atrybutu target z wartością _blank jest zgodne z zasadami użyteczności i dostępności, pomagając w tworzeniu przyjaznych i intuicyjnych interfejsów.

Pytanie 26

Które z podanych formatów NIE JEST zapisane w języku CSS?

A. D

B. A

C. C

D. B

Odpowiedź C jest prawidłowa, ponieważ atrybut bgcolor jest przestarzałą metodą określania koloru tła w HTML i nie jest częścią CSS. CSS (Cascading Style Sheets) zostało stworzone, aby oddzielić prezentację dokumentu od jego struktury. Korzystanie z CSS pozwala na lepsze zarządzanie stylem i spójność w wyglądzie wielu stron internetowych. Atrybuty HTML związane z wyglądem, takie jak bgcolor, zostały zastąpione przez deklaracje w CSS. Na przykład w CSS można ustawić kolor tła całej strony za pomocą selektora body i właściwości background-color. Takie podejście jest bardziej elastyczne i zgodne z nowoczesnymi standardami. Dzięki CSS możliwe jest stosowanie zaawansowanych stylizacji, takich jak gradienty czy obrazy tła, które nie były dostępne w prostych atrybutach HTML. Przy projektowaniu stron internetowych zaleca się, aby unikać przestarzałych atrybutów HTML, które mogą być niekompatybilne z nowoczesnymi przeglądarkami i powodować problemy z dostępnością.

Pytanie 27

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

D. CDR

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 28

W HTML wprowadzono tag a. Co oznacza wartość nofollow w atrybucie rel?

<a href="http://website.com" rel="nofollow">link</a>

A. jest wskazówką dla przeglądarki internetowej, aby nie interpretowała słowa 'link' jako hiperłącza

B. oznacza, że naciśnięcie na link spowoduje jego otwarcie w nowej karcie przeglądarki

C. jest komunikatem dla robota wyszukiwarki Google, by nie śledził tego linku

D. oznacza, że kliknięcie na link nie przekieruje do strony website.com

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut nofollow w linkach jest bardzo ważny dla tego, jak wyszukiwarki podchodzą do linków na stronach. Wprowadzenie go miało na celu ograniczenie spamu w komentarzach i w miejscach, gdzie autorzy stron nie chcieli, żeby te linki były traktowane jako polecenia. Gdy Google napotyka link z nofollow, to nie przekaże PageRank do strony, do której prowadzi. W praktyce oznacza to, że taki link nie pomoże w pozycjonowaniu tej docelowej strony. To jest super przydatne dla adminów, szczególnie przy linkach w komentarzach czy reklamach, gdzie nie zawsze można sprawdzić jakość tych linków. Dobrze jest stosować nofollow, kiedy link pojawia się automatycznie lub gdy nie jesteśmy pewni jego wartości merytorycznej.

Pytanie 29

W CSS, aby ustawić różne stylizacje dla pierwszej litery w akapicie, należy wykorzystać selektor

A. dziecka p + first-letter

B. pseudoelementu p::first-letter

C. klasy p.first-letter

D. atrybutu p [first-letter]

W języku CSS do formatowania pierwszej litery akapitu używamy pseudoelementu '::first-letter'. Jest to specjalny selektor, który pozwala na zastosowanie stylów tylko do pierwszego znaku w danym elemencie, na przykład w akapicie . Pseudoelement ten może być używany do nadawania unikalnych właściwości typograficznych, takich jak rozmiar czcionki, kolor, font-weight czy marginesy, co może znacząco wzbogacić stylizację tekstu. Przykładowo, używając stylu 'p::first-letter { font-size: 2em; color: red; }', pierwsza litera każdego akapitu stanie się większa i czerwona. To podejście jest zgodne z dobrymi praktykami w CSS, ponieważ umożliwia selektywne stylizowanie elementów bez wpływu na resztę treści. Aby uzyskać większą kontrolę nad układem i estetyką stron internetowych, warto zaznajomić się z innymi pseudoelementami, takimi jak '::first-line', które działają analogicznie. Prawidłowe używanie pseudoelementów jest kluczowe dla tworzenia bardziej zaawansowanych i atrakcyjnych wizualnie projektów.

Pytanie 30

Aby wykonać przycisk na stronę internetową zgodnie z wzorem, potrzebne jest skorzystanie z opcji w programie do grafiki rastrowej

A. zaokrąglenie lub wybór opcji prostokąt z zaokrąglonymi rogami

B. selekcja eliptyczna

C. zniekształcenia i deformacja

D. propagacja wartości

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Opcja zaokrąglenie lub wybranie opcji prostokąt z zaokrąglonymi rogami jest prawidłowa, ponieważ pozwala na stworzenie przycisku o nowoczesnym i estetycznym wyglądzie. W programach graficznych takich jak Adobe Photoshop lub GIMP opcja ta umożliwia użytkownikowi szybkie utworzenie prostokąta, którego rogi są zaokrąglone według określonego promienia. Jest to szczególnie przydatne w projektowaniu elementów interfejsu użytkownika, gdzie zaokrąglone rogi nadają wrażenie łagodności i nowoczesności. Stosowanie zaokrąglonych rogów jest zgodne z aktualnymi trendami UX/UI, które kładą nacisk na przyjazność i intuicyjność interfejsu. Praktyczne zastosowanie to nie tylko przyciski, ale również inne elementy graficzne takie jak pola tekstowe, karty czy okna dialogowe. Zaokrąglone rogi są również bardziej przyjazne dla oka, co jest istotne w kontekście użyteczności. Technicznie osiąga się to przez modyfikację kształtu obiektu wektorowego lub przez zastosowanie odpowiednich filtrów w grafice rastrowej. Warto też pamiętać o dostosowaniu promienia zaokrągleń do ogólnej estetyki projektu, co jest dobrą praktyką w projektowaniu graficznym.

Pytanie 31

Na ilustracji pokazano tabelę z połączonymi komórkami. Jakie atrybuty scalania zastosowano, aby uzyskać ten efekt?

A. colspan w drugim wierszu i pierwszej komórce oraz rowspan w trzecim wierszu i czwartym wierszu

B. rowspan w drugim wierszu i pierwszej komórce oraz colspan w trzecim wierszu, trzeciej komórce

C. colspan w drugim wierszu i pierwszej komórce oraz rowspan w trzecim wierszu, trzeciej komórce

D. colspan w drugim wierszu we wszystkich trzech komórkach oraz rowspan w trzecim wierszu ostatniej komórce

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest prawidłowa, ponieważ zastosowanie atrybutów colspan i rowspan w tabeli HTML pozwala na efektywne zarządzanie układem danych. Atrybut colspan w drugiej komórce pierwszego wiersza łączy dwie komórki poziomo, co jest użyteczne, gdy chcemy, aby nagłówki lub dane rozciągały się na kilka kolumn. W trzecim wierszu, atrybut rowspan w trzeciej komórce łączy trzy komórki pionowo, co może być przydatne, gdy mamy dane, które powinny być przedstawione obok siebie w kilku rzędach. Tego typu operacje scalania są powszechnie stosowane w projektowaniu stron internetowych, szczególnie w przypadku układów, które wymagają elastyczności i skalowalności. W praktyce, takie podejście pozwala na lepsze wykorzystanie przestrzeni ekranowej i ułatwia czytelność danych. Dobrą praktyką jest również stosowanie CSS do dodatkowego stylizowania takich tabel, co zwiększa ich atrakcyjność wizualną. Ważne jest, aby zrozumieć, że używanie colspan i rowspan wpływa na dostępność danych, dlatego należy je stosować świadomie i z uwzględnieniem użytkowników korzystających z technologii wspomagających.

Pytanie 32

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

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

B. tr { background-color: Pink; }

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

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

Poprawny selektor to tr:hover { background-color: Pink; }, bo dokładnie opisuje sytuację pokazaną na filmie: efekt pojawia się dopiero po najechaniu kursorem na cały wiersz tabeli. Pseudo-klasa :hover w CSS służy właśnie do definiowania stylów w momencie, gdy użytkownik „najeżdża” myszką na dany element. Jeśli więc chcemy, żeby podświetlał się cały rząd tabeli, logiczne i zgodne z dobrymi praktykami jest przypięcie efektu do znacznika tr, a nie do pojedynczych komórek. W praktyce taki zapis stosuje się bardzo często w interfejsach webowych: w panelach administracyjnych, listach zamówień, tabelach z uczniami, produktami, logami systemowymi itd. Dzięki temu użytkownik łatwiej śledzi, który wiersz właśnie ogląda. To niby detal, ale z punktu widzenia UX robi sporą różnicę. Z mojego doświadczenia to jeden z tych prostych trików CSS, które od razu poprawiają „odczuwalną” jakość strony. Ważne jest też to, że :hover jest częścią standardu CSS (opisane m.in. w specyfikacji CSS Selectors Level 3/4) i działa w praktycznie wszystkich współczesnych przeglądarkach. Nie trzeba do tego żadnego JavaScriptu, żadnych skomplikowanych skryptów – czysty CSS. Dobrą praktyką jest również używanie bardziej stonowanych kolorów niż Pink w prawdziwych projektach, np. #f5f5f5 albo lekki odcień niebieskiego, tak żeby kontrast był czytelny i nie męczył wzroku. Warto też pamiętać, że podobny mechanizm możesz zastosować na innych elementach: np. a:hover dla linków, button:hover dla przycisków czy nawet div:hover dla całych kafelków w layoutach. Kluczowe jest to, żeby pseudo-klasa :hover była przypięta dokładnie do tego elementu, który ma reagować na interakcję użytkownika.

Pytanie 33

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

A. klasę

B. selektor

C. deklarację

D. wartość

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 34

W HTML znacznik wywołuje taki sam efekt wizualny jak znacznik

A.

B. <pre>

C.

D.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik (emphasis) w języku HTML jest używany do podkreślenia znaczenia słów lub fraz w kontekście tekstu, co jest zgodne z semantyką sieci. Użycie tego znacznika nie tylko zmienia styl prezentacji tekstu na kursywę, ale także wskazuje, że dany fragment tekstu jest istotny dla zrozumienia całości. Znacznik (italic) również stosuje kursywę, ale nie ma znaczenia semantycznego, co oznacza, że nie informuje przeglądarek ani technologii wspomagających o istotności tego tekstu. W praktyce, stosując w miejscach, gdzie chcemy zaakcentować ważne elementy, pomagamy w poprawie dostępności strony oraz w jej SEO, ponieważ wyszukiwarki mogą lepiej zrozumieć strukturę i kontekst treści. Warto pamiętać, że według standardów W3C, stosowanie znaczników semantycznych, takich jak , jest zalecane dla poprawy struktury dokumentu HTML oraz dla lepszej interakcji z użytkownikami wykorzystującymi technologie asystujące. Przykład: W tej książce odkryjesz nowe możliwości.

Pytanie 35

W CSS wartości: underline, overline, blink są powiązane z atrybutem

A. text-style

B. font-style

C. text-decoration

D. font-weight

Atrybut text-decoration w CSS jest tym, co pozwala na dodawanie różnych efektów do tekstu. Możemy dzięki niemu użyć takich rzeczy jak underline, overline czy nawet blink, chociaż to ostatnie nie jest już zbyt popularne, bo wiele przeglądarek to ignoruje ze względu na dostępność. Dzięki tym efektom tekst może wyglądać bardziej estetycznie, a czytelność też się poprawia. Na przykład, jeśli użyjesz 'p { text-decoration: underline; }', to cały tekst w tym paragrafie będzie podkreślony. W CSS3 dodano też nowe możliwości, jak text-decoration-color czy text-decoration-style, co daje jeszcze większą kontrolę nad tym, jak nasz tekst będzie wyglądał. Dlatego myślę, że umiejętność korzystania z text-decoration jest naprawdę ważna dla każdego, kto zajmuje się tworzeniem stron internetowych.

Pytanie 36

Jakiej właściwości CSS należy użyć, aby ustalić marginesy wewnętrzne dla danego elementu?

A. width

B. margin

C. hight

D. padding

Odpowiedź 'padding' jest prawidłowa, ponieważ właściwość CSS 'padding' służy do definiowania marginesów wewnętrznych dla elementu. Padding to przestrzeń między zawartością a krawędzią elementu, co pozwala na lepsze dostosowanie układu i prezentacji treści. Stosowanie paddingu jest kluczowe w tworzeniu responsywnych projektów, ponieważ umożliwia zachowanie odpowiednich odstępów niezależnie od rozmiaru wyświetlacza. Na przykład, aby zastosować padding do elementu div, można użyć następującej reguły CSS: 'div { padding: 20px; }', co doda 20 pikseli przestrzeni wewnętrznej ze wszystkich stron. Ponadto, dobrym zwyczajem jest stosowanie jednostek względnych, takich jak 'em' lub 'rem', aby zapewnić lepszą elastyczność i skalowalność w różnych kontekstach. To podejście sprzyja również utrzymaniu spójności w całym projekcie, co jest zgodne z najlepszymi praktykami w branży web designu.

Pytanie 37

Jakie skutki przyniesie zastosowanie przedstawionego formatowania CSS dla nagłówka trzeciego stopnia?

<style> h3 { background-color: grey; } </style> ... <h3 style="background-color: orange;"> Rozdział 1.2.2. </h3>

A. kolor tekstu będzie szary

B. kolor tekstu będzie pomarańczowy

C. tło będzie szare

D. tło będzie pomarańczowe

W kaskadowych arkuszach stylów CSS ważna jest zasada kaskadowania, która mówi o tym, jakie style powinny obowiązywać w przypadku konfliktów. Oparcie się na specyficzności selektorów i ich kolejności w kodzie to podstawa. W tym pytaniu mówimy o stylizacji nagłówka przy użyciu zewnętrznego stylu CSS i stylu wbudowanego. Styl wbudowany ma najwyższą specyficzność, czyli zawsze wygrywa z regułami z sekcji style, nawet jeśli są one globalne. To znaczy, że niezależnie od tego, co napisano w stylach dla nagłówka h3, to jednak styl wbudowany ustawi tło na pomarańczowe. Nie można zakładać, że zewnętrzne reguły mają wyższy priorytet, gdy nie są bardziej specyficzne albo nie używają !important. Zrozumienie tych zasad pozwala uniknąć typowych błędów w stylizacji, co jest wyjątkowo istotne w tworzeniu stron. Żeby wszystko ładnie wyglądało i było łatwe do zarządzania, lepiej unikać stylów wbudowanych przy większych projektach, gdzie oddzielenie struktury od prezentacji jest kluczowe dla utrzymania kodu. Lepiej skupić się na stylach zewnętrznych, mając na uwadze specyficzność i zasady kaskadowe, co zapewnia większą kontrolę nad wyglądem strony.

Pytanie 38

W JavaScript metoda getElementById odnosi się do

A. zmiennej numerycznej

B. znacznika HTML o podanej nazwie klasy

C. znacznika HTML o wskazanym id

D. klasy zdefiniowanej w CSS

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Metoda getElementById w JavaScript jest kluczowym narzędziem do interakcji z modelowaniem DOM (Document Object Model). Służy do uzyskiwania dostępu do pojedynczego elementu HTML na podstawie jego atrybutu id, co jest zgodne z zasadą unikalności identyfikatorów w dokumencie HTML. Dzięki temu programiści mogą stosunkowo łatwo manipulować pojedynczymi elementami, co jest istotne w dynamicznych aplikacjach internetowych. Przykładem zastosowania tej metody może być zmiana tekstu w elemencie <h1>, gdzie używamy getElementById('myHeader').innerHTML = 'Nowy nagłówek';. Zgodnie z dobrymi praktykami, powinno się unikać używania zduplikowanych id w dokumencie, aby zapewnić, że metoda ta zawsze zwraca jeden, a nie wiele elementów. Warto również pamiętać, że w przypadku braku elementu o podanym id, metoda zwróci null, co powinno być uwzględnione w logice aplikacji, aby uniknąć błędów. Użycie tej metody jest standardem w programowaniu JavaScript i stanowi fundament dla wielu bardziej zaawansowanych technik manipulacji DOM.

Pytanie 39

W formularzu umieszczono kontrolki do podania imienia oraz nazwiska. Który z atrybutów odpowiada za wyświetlanie sugestii w polu kontrolki, która znika, gdy użytkownik zaczyna wpisywanie wartości?

<label for="imie">Imię: </label> 
<input id="imie" value="Wpisz dane" title="Wpisz imię"><br>
<label for="nazw">Nazwisko: </label> 
<input id="nazw" placeholder="Wpisz dane" title="Wpisz nazwisko">

A. value

B. title

C. placeholder

D. for

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut "placeholder" jest kluczowym elementem w formularzach HTML, który definiuje tekst podpowiedzi umieszczony w polu kontrolki. Tekst ten zniknie, gdy użytkownik zacznie wpisywać dane, co pozwala na zapewnienie bardziej intuicyjnego interfejsu. W przypadku przykładowego formularza, atrybut "placeholder" jest użyty w polu nazwiska, co stanowi doskonały przykład jego praktycznego zastosowania. Dobrą praktyką jest stosowanie atrybutu "placeholder" w formularzach, ponieważ wprowadza on klarowność i ułatwia użytkownikom wypełnianie formularzy, jednocześnie zmniejszając ryzyko błędów. Atrybut ten nie tylko poprawia doświadczenia użytkownika, ale także zwiększa dostępność formularzy, ponieważ pozwala osobom korzystającym z czytników ekranu lepiej zrozumieć, jakie dane są wymagane. Warto również zauważyć, że "placeholder" nie powinien być używany jako substytut etykiety, która jest niezbędna do poprawnej dostępności i użyteczności. Etykiety powinny być zawsze stosowane, a "placeholder" powinien pełnić jedynie funkcję pomocniczą.

Pytanie 40

Jaki selektor stylizuje akapity tekstu z klasą tekst oraz element blokowy z identyfikatorem obrazki?

A. p#tekst, div.obrazki

B. p.tekst, div#obrazki

C. p.tekst + div#obrazki

D. p#tekst + div.obrazki

Analizując dostępne odpowiedzi, można zauważyć istotne błędy w tym, jak selektory są zbudowane. Selekcja 'p#tekst' wprowadza zamieszanie, ponieważ '#' wskazuje na unikalny identyfikator, co oznacza, że nie może być zastosowane do akapitu, który wykorzystuje klasę. Identyfikatory w HTML muszą być unikalne w obrębie dokumentu, więc nie można stosować ID do wielu akapitów. Inna odpowiedź, 'p.tekst + div.obrazki', wykorzystuje operator sąsiedztwa '+', co oznacza, że styl zastosowany do div.obrazki dotyczy wyłącznie tego <div>, który jest bezpośrednio po akapicie z klasą 'tekst'. Tego rodzaju selektor może być użyty w bardzo specyficznych sytuacjach, ale w przypadku ogólnego formatowania akapitów i elementów div jest to znacznie bardziej ograniczające. Ostatnia odpowiedź 'p#tekst + div.obrazki' jest podobnie wadliwa z powodu nieprawidłowego użycia '#' w kontekście akapitu. Takie błędne myślenie prowadzi do sytuacji, gdzie nie tylko nie osiągamy zamierzonego efektu wizualnego, ale również komplikujemy kod, co negatywnie wpływa na jego czytelność oraz utrzymanie. W przypadku stylizacji ważne jest, aby stosować odpowiednie selektory w sposób zgodny z ich definicjami w standardach CSS, co zapewnia efektywne i zgodne z najlepszymi praktykami zarządzanie stylem elementów na stronie.

Rozpocznij nowy egzamin

Powrót do strony głównej