Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik programista
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 17 grudnia 2025 14:15
Data zakończenia: 17 grudnia 2025 14:33

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

input[type=number] { background-color: Brown; }

Zapis tego selektora oznacza, że tło będzie miało brązowy kolor dla:

A. wszystkich typów pól edycyjnych

B. wszystkich tekstów na stronie internetowej

C. pól edycyjnych, w które użytkownik wprowadzi dowolną cyfrę

D. pól edycyjnych, które są typu numerycznego

Odpowiedzi, które sugerują, że tło będzie brązowe dla wszystkich tekstów na stronie, są błędne z powodu nieporozumienia dotyczącego selektorów CSS. Selekcja `input[type=number]` odnosi się wyłącznie do pól wejściowych, które są zdefiniowane jako typu numerycznego. Elementy na stronie, takie jak teksty, nie są objęte tym selektorem, ponieważ CSS działa na podstawie specyfikacji typu elementu, a nie jego zawartości. Nie można również uznać, że tło będzie brązowe dla wszystkich pól edycyjnych, ponieważ nie wszystkie pola typu input muszą być numeryczne. Typy input mogą obejmować `text`, `email`, `password` i inne, każdy z własnymi specyfikacjami stylizacji. Błędem jest również myślenie, że stylizacja CSS działa globalnie na wszystkie elementy; zamiast tego, każdy selektor działa w kontekście jego definicji. Dobrą praktyką jest zrozumienie, jak selektory CSS powinny być używane w sposób precyzyjny, aby uniknąć nieporozumień oraz aby móc efektywnie zarządzać stylami na stronie. Właściwe stosowanie typów i selektorów jest kluczowe dla tworzenia responsywnych i użytecznych interfejsów użytkownika.

Pytanie 2

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

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

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

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

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

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

Nofollow to nie jest informacja dla przeglądarki, żeby nie pokazywała linka jak normalnego odnośnika. Linki wciąż będą wyglądały jak zwykłe linki HTML. Atrybut nofollow dotyczy tylko tego, jak roboty wyszukiwarek traktują ten link, a nie jak wygląda on na stronie. Jak chcesz, żeby link otwierał się w nowej karcie, to musisz użyć atrybutu target z _blank. Nofollow nie ma wpływu na to, gdzie prowadzi link, więc kliknięcie w niego zawsze przeniesie cię na daną stronę, niezależnie od tego, czy jest tam nofollow czy nie. Jego rola jest tylko w SEO i w tym, jak wpływa na PageRank, a nie w tym, co widzą użytkownicy.

Pytanie 3

Jakie formaty wideo są obsługiwane przez standard HTML5?

A. Ogg, QuickTime

B. MP4, Ogg, WebM

C. Ogg, AVI, MPEG

D. MP4, AVI

Wybór odpowiedzi MP4, AVI, Ogg czy Ogg, AVI, MPEG jest błędny z kilku powodów. Format AVI, mimo swojej popularności, nie jest obsługiwany w standardzie HTML5. AVI to stary format, który nie jest zoptymalizowany do użytku w sieci, co prowadzi do problemów z kompatybilnością i wydajnością. Z kolei QuickTime, chociaż używany w niektórych aplikacjach, nie jest standardowo wspierany przez HTML5, co ogranicza jego zastosowanie w nowoczesnych stronach internetowych. W przypadku formatu MPEG, choć jest on dość powszechnie stosowany, to nie jest preferowany w kontekście HTML5, a jego wsparcie jest ograniczone w porównaniu do MP4, Ogg i WebM. Warto zaznaczyć, że najnowsze przeglądarki internetowe szybko przechodzą na otwarte standardy, co sprawia, że formaty, które opierają się na patencie, stają się mniej popularne. W związku z tym, korzystanie z formatów takich jak MP4, Ogg czy WebM nie tylko zapewnia lepszą jakość i wydajność, ale również zwiększa dostępność treści w sieci. Wybór niewłaściwych formatów może prowadzić do problemów z odtwarzaniem na różnych platformach, co negatywnie wpływa na doświadczenia użytkowników oraz zasięg treści. W efekcie, aby zachować optymalne standardy w tworzeniu stron internetowych, kluczowe jest stosowanie formatów zgodnych ze specyfikacją HTML5.

Pytanie 4

W języku HTML, aby osiągnąć efekt pogrubienia, kursywy lub zapisu w górnym indeksie, należy wpisać kod:

A. pogrubiony pochylony lub w górnym indeksie

B. pogrubiony pochylony lub w górnym indeksie

C. pogrubiony pochylony lub w górnym indeksie

D. pogrubiony pochylony lub w górnym indeksie

Odpowiedź jest prawidłowa, ponieważ wykorzystuje odpowiednie tagi HTML do formatowania tekstu. Tag jest używany do pogrubienia tekstu, co poprawia jego wyróżnienie oraz skupia uwagę czytelnika. Tag służy do pisania tekstu w kursywie, co często oznacza, że tekst jest odmienny lub pełni określoną rolę, jak np. tytuł książki, podczas gdy tag jest przeznaczony do wyświetlania tekstu w górnym indeksie, co jest typowe dla oznaczeń matematycznych lub chemicznych, jak np. H₂O. W praktyce, poprawne stosowanie tych tagów jest kluczowe dla tworzenia czytelnych i estetycznych stron internetowych, zgodnych z zasadami dostępności, co zapewnia lepsze doświadczenia użytkowników. Warto również zauważyć, że użycie tych tagów jest zgodne z zasadami semantyki HTML, gdzie znaczenie każdego elementu jest jasno określone, co również wspiera SEO i ułatwia przetwarzanie strony przez roboty wyszukiwarek. Warto zapamiętać, że poprawne formatowanie tekstu nie tylko poprawia jego wygląd, ale także wpływa na jego zrozumiałość i dostępność dla szerokiego grona odbiorców.

Pytanie 5

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

A. margin

B. width

C. padding

D. hight

Zarówno 'hight', 'width', jak i 'margin' są odpowiedziami, które nie spełniają wymagań dotyczących definiowania marginesów wewnętrznych. Właściwość 'hight' jest niepoprawna, ponieważ w CSS właściwa forma to 'height'. Ta właściwość służy do określania wysokości elementu, a nie przestrzeni wewnętrznej. Podobnie, 'width' używana jest do definiowania szerokości elementu i nie ma związku z odstępami wewnętrznymi. W przypadku 'margin', należy zauważyć, że ta właściwość odnosi się do marginesów zewnętrznych, czyli przestrzeni między elementem a jego otoczeniem, a nie wewnątrz samego elementu. Często mylone są te dwa pojęcia, co prowadzi do błędnych wniosków dotyczących sposobu formatowania i układania treści na stronach internetowych. Kluczowym błędem myślowym jest mylenie przestrzeni wewnętrznej i zewnętrznej, co może skutkować nieodpowiednim układem i wizualizacją elementów na stronie. Prawidłowe zrozumienie różnicy między paddingiem a marginem jest niezbędne dla każdego, kto pracuje z CSS, ponieważ wpływa to na sposób, w jaki użytkownicy postrzegają i interagują z treścią witryny.

Pytanie 6

Jakie polecenie należy zastosować, aby słowo TEKST pojawiło się w kolorze czarnym w oknie przeglądarki internetowej?

A. <body color="black">TEKST

B. TEKST

C. TEKST

D. <body bgcolor="black">TEKST</body>

Odpowiedź TEKST jest poprawna, ponieważ wykorzystuje standardowy atrybut HTML do zmiany koloru tekstu. Atrybut 'color' w tagu pozwala na określenie koloru, w tym przypadku użyto wartości szesnastkowej '#000000', co odpowiada kolorowi czarnemu. Użycie wartości szesnastkowej jest uznaną praktyką w projektowaniu stron internetowych, ponieważ pozwala na precyzyjne określenie kolorów, a także wspiera szeroką gamę barw. Wartości szesnastkowe są bardziej uniwersalne i umożliwiają zastosowanie dowolnego koloru, co jest bardziej elastyczne niż nazwy kolorów w języku angielskim. Warto zauważyć, że od HTML5 tag jest przestarzały, dlatego zaleca się korzystanie z CSS do stylizacji tekstu, co jest bardziej zgodne z zasadami semantycznego HTML. Przykładowo, aby uzyskać ten sam efekt w CSS, można zastosować regułę: <style> .czarny { color: #000000; } </style> i użyć TEKST.

Pytanie 7

Jaki znacznik w HTML jest używany do oznaczania fragmentów tekstu jako kodu programistycznego?

A. <code> </code>

B.

C.

D. <blockquote> </blockquote>

<code> to znacznik w HTML, który służy do oznaczania fragmentów tekstu jako kodu komputerowego. Użycie tego znacznika jest zgodne z wytycznymi W3C i stanowi istotny element semantycznej struktury dokumentów HTML. Zastosowanie <code> pozwala na wyróżnienie fragmentów tekstu, takich jak kawałki kodu źródłowego czy polecenia, co jest niezwykle ważne w kontekście programowania oraz dokumentacji technicznej. Przykłady użycia obejmują: <code>console.log('Hello, World!');</code> w JavaScript, co przekłada się na lepszą czytelność i zrozumienie dla programistów. Stosując <code>, przeglądarki często renderują ten tekst w sposób wyróżniający, na przykład z użyciem czcionki monospace, co dodatkowo podkreśla jego znaczenie w kontekście kodowania. Oprócz tego, znacznik <code> ma korzystny wpływ na SEO, ponieważ poprawia semantykę treści, co jest doceniane przez wyszukiwarki. W kontekście standardów W3C, <code> należy do rodziny znaczników, które mają na celu ułatwienie prezentacji i interpretacji treści webowych.

Pytanie 8

Aby stworzyć szablon strony z trzema ustawionymi obok siebie kolumnami, można użyć stylu CSS.

A. .kolumny { float: left; width: 40%; }

B. .kolumny { float: right; height: 33%; }

C. .kolumny { clear: both; height: 33%; }

D. .kolumny { float: left; width: 33%; }

Niestety, twoja odpowiedź nie była poprawna. Tworzenie szablonu strony z trzema kolumnami ustawionymi obok siebie wymaga zastosowania właściwości CSS 'float: left;' i ustawieniu szerokości każdej kolumny na 'width: 33%;'. Te dwa elementy są kluczowe do osiągnięcia pożądanego układu. Właściwość 'float' służy do ustawiania elementów strony tak, aby inne elementy opływały je z jednej lub drugiej strony, a 'width' kontroluje szerokość elementu. Niepoprawne rozumienie tych fundamentalnych pojęć CSS może prowadzić do błędów w projektowaniu i kodowaniu stron internetowych, a następnie do niewłaściwego wyświetlania strony na różnych urządzeniach. Ważne jest, aby dokładnie zrozumieć, jak te i inne właściwości CSS działają, aby móc tworzyć funkcjonalne i atrakcyjne strony internetowe.

Pytanie 9

Edytor, który spełnia kryteria WYSIWYG, powinien umożliwiać

A. tworzenie podstawowych grafik wektorowych

B. publikację strony na serwerze za pomocą wbudowanego klienta FTP

C. osiągnięcie zbliżonego rezultatu tworzonej strony do jej wyglądu w przeglądarce internetowej

D. przygotowanie plików dźwiękowych przed ich umieszczeniem na stronie internetowej

Edytory WYSIWYG (What You See Is What You Get) mają na celu umożliwienie użytkownikom tworzenia i edytowania treści w sposób, który przypomina ostateczny wygląd strony internetowej. Odpowiedź dotycząca uzyskania zbliżonego wyniku tworzonej strony do jej obrazu w przeglądarce internetowej jest kluczowym aspektem działania takich edytorów. Umożliwiają one użytkownikom natychmiastowe podglądanie efektów wprowadzanych zmian, co jest nieocenione przy projektowaniu stron. Przykładem może być edytor tak jak Adobe Dreamweaver czy WordPress, które pozwalają na wizualne projektowanie układu, co redukuje potrzebę ręcznego kodowania. Przy tworzeniu stron internetowych zgodnie z dobrymi praktykami, edytory WYSIWYG powinny wspierać standardy HTML i CSS, co zapewnia, że efekty wizualne są zgodne z tym, co użytkownik zobaczy w przeglądarce. Takie podejście zwiększa efektywność pracy, a także ułatwia współpracę między programistami a designerami.

Pytanie 10

W CSS zapis w formie: p{background-image: url"rysunek.jpg")} spowoduje, że rysunek.png stanie się

A. tłem każdego bloku tekstowego

B. pokazany, jeśli w kodzie użyty będzie znacznik img

C. tłem całej witryny

D. wyświetlany obok każdego bloku tekstowego

Pierwsza niepoprawna odpowiedź twierdzi, że obrazek ma być tłem całej strony. W rzeczywistości, żeby ustawić tło dla całej strony, używa się body, a nie . Tło ustawione dla paragrafów nie zmienia wyglądu całej strony. Druga niepoprawna odpowiedź sugeruje, że obrazek ma być obok każdego paragrafu. To mógłbyś osiągnąć innymi właściwościami, jak float czy display inline-block, ale background-image nie wyświetla go obok, to działa jako tło. Ostatnia niepoprawna odpowiedź mówi o użyciu znacznika img. Użycie img to inna sprawa – obrazek dodany w takim znaczniku będzie oddzielnym elementem, a nie tłem. W skrócie, background-image i img to różne techniki i używa się ich w różnych sytuacjach, więc te odpowiedzi nie mają sensu w kontekście pytanie.

Pytanie 11

W języku CSS zapis selektora

p > i { color: red; }

wskazuje, że kolorem czerwonym będzie sformatowany

A. tylko ten tekst w znaczniku , który ma przypisaną klasę o nazwie i

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

C. wszystkie teksty w znaczniku oprócz tych w znaczniku

D. wszystki tekst w znaczniku lub wszelkie treści w znaczniku

Zapis selektora CSS p > i mówi, że styl ma być zastosowany tylko do elementów , które są bezpośrednimi dziećmi znacznika . W praktyce oznacza to tyle, że jeśli w mamy , to tylko ten weźmie czerwony kolor. To jest w porządku, bo w CSS style mogą się dziedziczyć, ale można je też dokładnie określić z użyciem selektorów. Znak '>' wskazuje na relację rodzic-dziecko, co jest istotne, gdy patrzymy na strukturę dokumentu HTML. Na przykład, w kodzie: To jest przykład tekstu., słowo „przykład” będzie czerwone. Dodatkowo, korzystanie z takich selektorów to dobra praktyka, bo ogranicza wpływ stylów tylko do konkretnego kontekstu, co bardzo ułatwia zrozumienie kodu. Tego typu selektory pomagają unikać niechcianych efektów, które mogą się zdarzyć przy bardziej ogólnych zasadach CSS, a także poprawiają wydajność przeglądarki przy stylizacji.

Pytanie 12

Znaczniki HTML oraz , które mają na celu podkreślenie istotności tekstu, pod względem formatowania odpowiadają znacznikom

A. oraz

B. oraz

C. oraz

D. oraz

Wybór błędnych znaczników HTML często wynika z niepełnego zrozumienia różnicy między semantyką a formatowaniem. Znacznik służy do podkreślenia tekstu, co może być mylące w kontekście oznaczania ważności treści. Oznaczanie tekstu w ten sposób nie dostarcza żadnej informacji o jego znaczeniu, co jest kluczowe w tworzeniu dostępnych i zrozumiałych stron internetowych. Użycie oznacza tekst w indeksie górnym, co również nie ma związku z akcentowaniem ważności. W przypadku i , oba znaczniki służą do formatowania, ale ignorują istotne aspekty semantyki, co może prowadzić do nieporozumień w interpretacji treści przez przeglądarki oraz urządzenia asystujące. Użycie oznacza tekst w kursywie, jednak podobnie jak , jest to czysto wizualne formatowanie bez znaczenia semantycznego. W praktyce, nadmierne poleganie na takich znacznikach bez zrozumienia ich ról w kontekście semantyki prowadzi do tworzenia stron, które są mniej dostępne i mniej przyjazne dla użytkowników. Kluczowym elementem budowy nowoczesnych aplikacji webowych jest stosowanie odpowiednich znaczników, które nie tylko prezentują treść, ale również przekazują jej znaczenie, co jest podstawą dobrego UX oraz SEO.

Pytanie 13

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

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

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

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

D. wszystkie akapity.

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 14

Ustalenie w języku CSS wartości background-attachment: scroll oznacza, że

A. obraz tła pojawi się w prawym górnym rogu witryny

B. tło witryny pozostanie nieruchome i nie będzie się przesuwać podczas przewijania strony

C. obrazek tła będzie się powtarzać (kafelki)

D. tło witryny będzie przesuwane wraz z przewijaniem strony

Odpowiedź 2 jest poprawna, ponieważ zdefiniowana przez właściwość CSS 'background-attachment: scroll' oznacza, że tło strony przewija się razem z zawartością strony. W praktyce oznacza to, że gdy użytkownik przewija stronę w dół lub w górę, tło porusza się w tym samym kierunku, co inne elementy na stronie. Ta właściwość jest szczególnie przydatna w sytuacjach, kiedy chcemy, aby tło było bardziej zintegrowane z treścią, dając bardziej dynamiczny efekt wizualny. Zastosowanie 'scroll' jest zgodne z zachowaniem większości stron internetowych, gdzie tło i zawartość poruszają się synchronizacyjnie. Dobrym przykładem może być użycie tła w postaci gradientu lub subtelnego obrazu, który nie odwraca uwagi od treści, a jednocześnie wprowadza estetyczny element do projektu. Warto pamiętać, że w przypadku większych projektów, właściwość ta powinna być używana z rozwagą, aby uniknąć nieczytelności tekstu na tle lub nadmiernego rozpraszania uwagi użytkowników. Dobrą praktyką jest również testowanie różnych ustawień tła na różnych urządzeniach, aby zapewnić spójne doświadczenie użytkownika.

Pytanie 15

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. pierwszy paragraf na stronie w całości będzie miał powiększoną czcionkę

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

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

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

Nieprawidłowe odpowiedzi opierają się na błędnym rozumieniu tego, jak działa selektor 'p::first-line'. Pierwsza odpowiedź sugeruje, że pierwsza linia paragrafu będzie miała mniejszą czcionkę, co to bzdura, bo ten selektor właśnie definiuje styl tylko tej linii, a nie reszty. Z kolei, kiedy mówimy o 'font-size: 150%', to tylko oznacza zwiększenie rozmiaru czcionki, a nie coś innego. W drugiej odpowiedzi jest napisane, że cały tekst będzie większy, co jest błędne, bo '::first-line' odnosi się tylko do tej pierwszej linii. Ostatnia myśl, która dotyczy tylko jednego paragrafu, też mijam się z prawdą, bo stylizacja dotyczy wyłącznie pierwszej linii, a nie wszystkich. Takie nieporozumienia mogą wynikać z niewłaściwego zrozumienia selektorów CSS i ich właściwego użycia. Zawsze warto pamiętać o kontekście i zasadach ich działania przy stylizacji tekstu w CSS.

Pytanie 16

Jak można w języku CSS ustawić kolor czerwony dla tekstu?

A. color: rgb(#FF0000);

B. text-color: rgb(255,0,0);

C. text-color: rgb(#FF0000);

D. color: rgb(255,0,0);

Odpowiedź 'color: rgb(255,0,0);' jest poprawna, ponieważ właściwość 'color' w CSS służy do definiowania koloru tekstu. Użycie funkcji rgb() umożliwia określenie koloru za pomocą składowych czerwonej, zielonej i niebieskiej (RGB), gdzie wartości mogą wynosić od 0 do 255. Wartość rgb(255,0,0) oznacza pełny czerwony kolor, co jest zgodne z zasadami kolorystyki cyfrowej. W praktyce, deklarując kolor tekstu w stylach CSS, warto skorzystać z tej metody, gdyż jest ona szeroko wspierana i zrozumiała dla przeglądarek internetowych. Dobrą praktyką jest także testowanie stylów w różnych przeglądarkach, aby upewnić się, że efekt wizualny zgodny jest z oczekiwaniami. Używanie kolorów w CSS można także łączyć z innymi właściwościami, takimi jak 'background-color', co pozwala na uzyskanie atrakcyjniejszych efektów wizualnych na stronach internetowych. Warto również zaznaczyć, że CSS3 wprowadził dodatkowe metody definiowania kolorów, jak na przykład przez nazwy kolorów, HEX lub HSL, co zwiększa elastyczność w projektowaniu graficznym.

Pytanie 17

Komunikat błędu generowany przez walidator HTML może wskazywać na

A. zamknięciu znacznika , mimo że wcześniej nie był on otwarty

B. brak zamknięcia znaczników zagnieżdżonych wewnątrz znacznika przed jego zakończeniem

C. brak zamknięcia znacznika

D. niezgodną ilość znaczników otwartych i zamkniętych

Błąd mówi, że zamknąłeś znacznik , ale niektóre znaczniki wewnętrzne, jak <a>, pozostają otwarte. To nie chodzi o to, żeby zamknąć bez wcześniejszego otwarcia, ale o to, że musisz zamknąć wszystkie zagnieżdżone znaczniki przed zamykaniem nadrzędnego. Jeśli to zrobisz, to wszystko powinno działać lepiej i strona powinna się wyświetlać tak, jak chcesz.

Pytanie 18

Który z akapitów został zapisany w wskazanym stylu, zakładając, że pozostałe właściwości akapitu mają wartości domyślne?

A. Efekt 4

B. Efekt 3

C. Efekt 2

D. Efekt 1

Odpowiedź Efekt 3 jest poprawna, ponieważ odzwierciedla wszystkie zadane style CSS. Styl zawiera padding 20px co oznacza, że wewnętrzna przestrzeń wokół tekstu w paragrafie powinna wynosić 20 pikseli. Daje to efekt przestrzeni pomiędzy tekstem a obramowaniem. Kolor tekstu został ustawiony na niebieski co powoduje, że sam tekst przyjmuje niebieską barwę. Parametr font-weight jest ustawiony na 900 co oznacza, że tekst powinien być bardzo pogrubiony. Obecnie jest to maksymalna wartość dla własności font-weight w standardzie CSS która powoduje, że tekst wygląda na bardzo wyrazisty i wyróżnia się na tle innych elementów. Dodatkowo border ustawiono na 1px solid co oznacza, że paragraf powinien mieć jednolitą linię o grubości jednego piksela otaczającą jego obszar. Wszystkie te style są poprawnie zastosowane w Efekcie 3 gdzie tekst jest niebieski bardzo pogrubiony z przestrzenią 20 pikseli do obramowania oraz otoczony cienką linią. Taki styl jest często wykorzystywany w projektach stron internetowych dla wyraźnego wyróżnienia ważnych sekcji co zgodne jest z dobrymi praktykami projektowania interfejsów użytkownika.

Pytanie 19

Co można powiedzieć o przedstawionym zapisie języka HTML5?

<title>Strona o psach</title>

A. Pojawi się na karcie dokumentu w przeglądarce.

B. Jest opcjonalny w języku HTML5 i nie musi występować w dokumencie.

C. Zostanie wyświetlony w treści strony, na samej górze.

D. Jest jedynie informacją dla robotów wyszukiwarek i nie jest wyświetlany przez przeglądarkę.

Brawo, Twoja odpowiedź jest prawidłowa! Znacznikiw języku HTML 5 służy do określenia tytułu strony internetowej, który jest wyświetlany na karcie przeglądarki. Nie jest to opcjonalna informacja - każda strona powinna mieć tytuł dla lepszej identyfikacji i optymalizacji SEO (Search Engine Optimization). Tytuł strony jest jednym z kluczowych elementów dla SEO, ponieważ wyszukiwarki internetowe, takie jak Google, często wykorzystują tytuł strony jako główny link w wynikach wyszukiwania. Tytuł strony jest również ważny z punktu widzenia użytkownika - dobrze sformułowany tytuł może przyciągnąć uwagę potencjalnego odbiorcy i zachęcić go do odwiedzenia strony. Warto zauważyć, że tytuł nie jest wyświetlany bezpośrednio na stronie, ale na pasku tytułu przeglądarki lub na karcie strony. To ważne rozróżnienie pomaga zrozumieć, dlaczego niektóre elementy są widoczne dla użytkownika, a inne nie.

Pytanie 20

Dla akapitu zdefiniowano styl CSS. Które właściwości stylu CSS poprawnie określają dla akapitu czcionkę: Arial; rozmiar czcionki: 16 pt; oraz styl czcionki: pochylenie?

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

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

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

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

Patrząc na inne odpowiedzi, widać tu sporo błędów dotyczących użytych właściwości CSS. W pierwszej odpowiedzi 'font-style' jest źle użyte, bo ta właściwość dotyczy stylizacji, a nie kroju czcionki. Do tego, 'size' zamiast 'font-size' to też błąd, bo 'size' nie działa w CSS, więc nie ma efektu w stylizacji. W drugim przypadku 'font-style' jest w porządku, ale powinno być ustawione na 'italic', a nie jako krój czcionki. Użycie '16pt' jest okej, ale brak 'font-family' oznacza, że nie ustaliliśmy kroju czcionki. W trzeciej odpowiedzi 'font-variant' to nie to, co potrzebujemy w kontekście pytania. Owszem, rozmiar czcionki '16pt' jest dobry, ale 'font-style' jest źle przypisany, co znów prowadzi do błędów. Te pomyłki pokazują, jak ważna jest znajomość terminów i ich odpowiednie stosowanie w CSS, co jest kluczowe, żeby projektować strony skutecznie i zgodnie z najlepszymi praktykami.

Pytanie 21

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

W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

A. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

B. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

C. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

D. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

Odpowiedź numer 2 jest poprawna, ponieważ używa odpowiednich znaczników HTML do formatowania tekstu. Znacznik stosowany jest do oznaczania tekstu kursywą, a znacznik do pogrubienia. W tym przypadku tekst 'paragrafie' i 'sposoby formatowania' są otoczone znacznikiem , co zgodnie z HTML oznacza kursywę. Natomiast słowo 'zobaczysz' jest otoczone zarówno jak i , co skutkuje pogrubieniem i kursywą jednocześnie. Taka struktura jest zgodna z konwencją hierarchii znaczników, która mówi, że znaczniki mogą być zagnieżdżane, aby uzyskać różne efekty formatowania. HTML pozwala na takie zagnieżdżanie, co jest częścią elastyczności tego języka w prezentowaniu treści. Dobrą praktyką jest także zapewnienie dostępności, gdzie znaczniki semantyczne mają szczególne znaczenie. Wykorzystanie i zamiast odpowiednio i jest bardziej stylistyczne niż semantyczne, co ma swoje uzasadnienie w kontekście projektowym, ale w nowoczesnych praktykach powinno się również rozważyć znaczenie semantyczne i używać i dla lepszego zrozumienia przez czytniki ekranowe.

Pytanie 22

Jaki jest poprawny zapis znacznika , który pozwala na umieszczenie na stronie internetowej obrazu rys.jpg przeskalowanego do szerokości 120 px oraz wysokości 80 px z tekstem alternatywnym "krajobraz"?

A. <img image="rys.jpg" width="120px" height="80px" alt="krajobraz"/>

B. <img src="rys.jpg" width="120px" height="80px" alt="krajobraz"/>

C. <img src="rys.jpg" height="120px" width="80px" info="krajobraz"/>

D. <img href="rys.jpg" height="120px" width="80px" info="krajobraz"/>

Patrząc na Twoje błędne odpowiedzi, widać, że coś poszło nie tak z użyciem atrybutów HTML dla <img>. Na przykład, w pierwszej odpowiedzi masz 'href', co jest błędne, bo to atrybut dla <a>, a nie dla obrazków. W trzeciej odpowiedzi 'info' to w ogóle nie jest atrybut dla <img>, więc przeglądarki nie wiedzą, co z tym zrobić. W czwartej odpowiedzi widzę 'image', co też nie ma sensu według standardów HTML. <img> ma swoje standardowe atrybuty jak 'src', 'alt', 'width' i 'height', a reszta nie zadziała właściwie. Jak nie rozumiesz tych podstaw, to może prowadzić do kłopotów z kodowaniem i wyświetlaniem obrazków na stronie. No i pamiętaj, że brak 'alt' w tych odpowiedziach to duży problem, bo użytkownicy z różnymi ograniczeniami nie będą mogli zrozumieć, co jest na obrazkach. Wiedza o tym, co robi każdy atrybut w HTML, jest kluczowa, jak chcesz robić semantyczne i dostępne strony.

Pytanie 23

Jakim zapisem w dokumencie HTML można stworzyć element, który wyświetli obraz kotek.jpg oraz tekst alternatywny "obrazek kotka"?

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

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

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

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

Wszystkie odpowiedzi, które nie odpowiadają poprawnemu zapisowi, zawierają błędy związane z użyciem atrybutów w tagu <img>. W pierwszej odpowiedzi użyto atrybutu href, który nie jest właściwie stosowany w kontekście obrazów; zamiast tego, do osadzania linków należy używać tagu <a>. Druga odpowiedź również zawiera niepoprawny atrybut href, co sprawia, że obraz nie zostanie poprawnie załadowany. W trzeciej opcji atrybut title jest użyty, jednak jego funkcja jest inna niż atrybutu alt. Atrybut title dostarcza dodatkowych informacji o elemencie w formie podpowiedzi, ale nie jest wyświetlany w przypadku, gdy obraz nie może być załadowany, co czyni go niewystarczającym do celów dostępności. Taki błąd myślowy prowadzi do pominięcia istoty atrybutu alt, który jest niezbędny do opisania zawartości obrazu. Ponadto, nieprawidłowe atrybuty mogą powodować problemy z dostępnością, co jest sprzeczne z najlepszymi praktykami webowymi, mającymi na celu stworzenie ogólnodostępnych treści. Użycie niewłaściwych atrybutów może również negatywnie wpłynąć na doświadczenia użytkowników oraz potencjalnie na pozycjonowanie w wyszukiwarkach, dlatego ważne jest stosowanie zalecanych standardów przy tworzeniu stron internetowych.

Pytanie 24

Wskaż problem z walidacją w podanym fragmencie kodu HTML

<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. Nieznany znacznik h6

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

C. Znacznik br nie może występować wewnątrz znacznika p

D. Znacznik br nie został poprawnie zamknięty

Znacznik zamykający b niezgodny z zasadą zagnieżdżania czyli poprawna odpowiedź 1 odnosi się do zasady poprawnego zagnieżdżania znaczników HTML Zasada ta mówi że znaczniki muszą być zamykane w odwrotnej kolejności do ich otwarcia W naszym przykładzie mamy otwierający znacznik b a następnie i co oznacza że najpierw powinien być zamknięty znacznik i a potem b Tego typu błąd jest często spotykany w kodzie HTML i może prowadzić do nieoczekiwanych problemów z wyświetlaniem strony Warto pamiętać że poprawne zagnieżdżanie znaczników wpływa na czytelność i utrzymanie kodu co jest kluczowe w większych projektach HTML jest językiem opartym na strukturze drzewiastej i każda niezgodność w zagnieżdżaniu może wpłynąć na sposób przetwarzania dokumentu przez przeglądarki Dbałość o szczegóły w strukturze dokumentu HTML jest zgodna z dobrymi praktykami branżowymi i wspomaga zgodność z różnymi przeglądarkami i urządzeniami co w konsekwencji poprawia dostępność i użyteczność strony internetowej

Pytanie 25

Zaprezentowano rezultat zastosowania CSS oraz odpowiadający mu kod HTML. W jaki sposób trzeba zdefiniować styl, aby uzyskać takie formatowanie?

A. .first-letter { font-size: 400%; color: blue; }

B. #first-letter { font-size: 400%; color: blue; }

C. p::first-letter { font-size: 400%; color: blue; }

D. p.first-letter { font-size: 400%; color: blue; }

Odpowiedź jest prawidłowa, ponieważ selektor CSS p::first-letter precyzyjnie określa, że stylizacja ma być zastosowana do pierwszej litery każdego akapitu, który jest oznaczony tagiem p. Jest to pseudo-element CSS, który umożliwia dostęp do pierwszej litery bloku tekstu w celu nadania jej unikalnego wyglądu. W tym przypadku zmieniono jej rozmiar na 400% oraz kolor na niebieski. Użycie ::first-letter jest zgodne z najlepszymi praktykami, gdyż pozwala na zachowanie semantyczności HTML i oddzielenie warstwy prezentacyjnej od treści, co jest kluczowe w responsywnym projektowaniu stron internetowych. Pseudo-elementy jak ::first-letter są niezwykle przydatne w tworzeniu estetycznych i czytelnych interfejsów użytkownika, zwłaszcza w przypadku publikacji zawierających dużo tekstu. Dobrą praktyką jest stosowanie pseudo-elementów w połączeniu z klasami i identyfikatorami, aby stylizacja była elastyczna i mogła być łatwo dostosowywana zgodnie z potrzebami projektu.

Pytanie 26

Jaki styl CSS umożliwi ustawienie tekstu do prawej strony?

A. tekst

B. tekst

C. tekst

D. tekst

Właściwe wyrównanie tekstu do prawej strony w CSS można osiągnąć za pomocą właściwości 'text-align'. Używając deklaracji 'text-align: right', umożliwiamy umiejscowienie zawartości elementu blokowego, takiego jak , w taki sposób, aby tekst był wyrównany do prawej krawędzi kontenera. Przykładowo, stosując Tekst wyrównany do prawej, uzyskujemy efekt, w którym cały tekst w obrębie akapitu zostaje przesunięty do prawej strony. Warto również zaznaczyć, że 'text-align' jest zgodne z W3C CSS Specifications, co oznacza, że jest standardową właściwością CSS uznawaną przez większość przeglądarek. W praktyce, stosowanie 'text-align' jest nie tylko ograniczone do akapitów, ale może być używane także w innych elementach, takich jak nagłówki, divy i inne bloki, co czyni go bardzo wszechstronnym narzędziem w stylizacji stron internetowych. Dodatkowo, właściwość ta jest fundamentalna w kontekście responsywnego projektowania stron, gdzie dopasowanie tekstu do różnych układów jest kluczowe dla odbioru treści.

Pytanie 27

Który z poniższych zapisów w HTML określa kodowanie znaków stosowane w dokumencie?

A. <encoding="UTF-8">

B. <meta encoding="UTF-8">

C. <meta charset="UTF-8">

D. <charset="UTF-8">

Zapis <meta charset="UTF-8"> jest prawidłową deklaracją kodowania znaków w dokumencie HTML. Element <meta> jest używany w sekcji <head> dokumentu i pozwala na zdefiniowanie różnych metadanych, w tym kodowania znaków. Użycie "UTF-8" jako wartości dla atrybutu charset oznacza, że dokument będzie używał kodowania Unicode, które jest standardem preferowanym w sieci. Dzięki temu, dokumenty mogą poprawnie wyświetlać znaki z różnych języków, co jest kluczowe w zglobalizowanym świecie internetu. Przykładem zastosowania tego zapisu może być strona internetowa, która zawiera teksty w wielu językach, co wymaga wsparcia dla różnorodnych znaków diakrytycznych i symboli. Warto również podkreślić, że zgodnie z zasadami dobrych praktyk, zawsze powinno się definiować kodowanie znaków w dokumencie HTML, aby uniknąć problemów z wyświetlaniem treści, co może negatywnie wpłynąć na doświadczenia użytkowników oraz SEO strony.

Pytanie 28

Jaki znacznik HTML umożliwia dynamiczne generowanie grafiki na stronie bez konieczności dodawania dodatkowych plików?

A. <canvas>

B. <object>

C. <embed>

D. <img>

Znaczniki <object>, <embed> oraz <img> są używane do osadzania różnych typów mediów na stronach internetowych, jednak nie służą do dynamicznego generowania grafiki w taki sposób, jak <canvas>. Znak <object> jest przeznaczony do osadzania obiektów multimedialnych, takich jak pliki PDF czy aplikacje Java, ale wymaga, aby te obiekty były dostępne jako zewnętrzne pliki. Podobnie, <embed> umożliwia osadzanie mediów, ale jest bardziej ograniczone w zakresie kontroli nad wyświetlaną grafiką i interaktywnością. Z kolei <img> ma wyłącznie charakter statyczny; służy do wyświetlania obrazów, które są z góry zdefiniowane i nie mogą być modyfikowane w czasie rzeczywistym. Wybór tych znaczników może prowadzić do błędnych założeń, że można osiągnąć podobną funkcjonalność jak w przypadku <canvas>. Użytkownicy często myślą, że wystarczy osadzić plik graficzny, aby uzyskać dynamiczne efekty, jednak tego typu podejście nie pozwala na interakcję, animację czy tworzenie złożonych wizualizacji. Ważne jest, aby zrozumieć, że <canvas> jest przeznaczony do tworzenia grafik w locie, co wymaga umiejętności programowania w JavaScript, a inne znaczniki nie oferują takich możliwości. Dlatego tak istotne jest dobieranie odpowiednich narzędzi do zadań, które chcemy zrealizować na stronie internetowej.

Pytanie 29

W tabeli pokazano cechy pliku graficznego. Aby rysunek ładował się szybciej na stronie WWW, należy

Wymiary: 4272 x 2848px
 Rozdzielczość: 72 dpi
 Format: JPG

A. zwiększyć rozdzielczość

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

C. zmienić format grafiki na CDR

D. zmniejszyć wymiary rysunku

Zmiana formatu na CDR nie jest zalecana dla grafiki internetowej. Format CDR jest formatem wektorowym używanym w programie CorelDRAW i nie jest obsługiwany przez przeglądarki internetowe. Grafika wektorowa w formacie CDR wymaga konwersji do formatu rastrowego takiego jak PNG lub JPG aby mogła być użyta na stronach WWW co dodaje dodatkowy krok w procesie publikacji. Zwiększenie rozdzielczości, czyli zwiększenie wartości dpi, zwiększa ilość danych w pliku graficznym, co powoduje dłuższy czas ładowania. Większa rozdzielczość jest użyteczna głównie w kontekście drukowania gdzie jakość obrazu jest kluczowa, natomiast dla internetu standardowa rozdzielczość 72 dpi jest wystarczająca dla większości zastosowań. Zmiana proporcji szerokości do wysokości nie wpływa na rozmiar pliku ani na czas jego ładowania. Taka zmiana może wręcz prowadzić do niepożądanego efektu rozciągnięcia lub zniekształcenia obrazu co negatywnie wpływa na estetykę strony. Prawidłowe proporcje są ważne dla zachowania spójnej estetyki i użyteczności wizualnej serwisu jednak nie mają bezpośredniego wpływu na wydajność ładowania. Typowe błędy myślowe związane z tymi odpowiedziami wynikają z braku zrozumienia specyfiki optymalizacji webowej gdzie mniejszy rozmiar pliku przekłada się na szybsze ładowanie i lepszą wydajność strony internetowej.

Pytanie 30

Poniżej zaprezentowano fragment kodu w języku HTML:
<ol>
<li>punkt 1</li>
<li>punkt 2</li>
<ul>
<li>podpunkt1</li>
<li>podpunkt2</li>
<li>podpunkt3</li>
</ul>
<li>punkt3</li>
</ol>

A. 1. punkt 1 2. punkt 2 podpunkt1 podpunkt2 podpunkt1 3. punkt3

B. punkt 1 punkt 2 podpunkt1 podpunkt2 podpunkt3 punkt3

C. 1. punkt 1 2. punkt 2 podpunkt1 podpunkt2 podpunkt3 punkt3

D. 1. punkt 1 2. punkt 2 3. punkt3 podpunkt1 podpunkt2 podpunkt1

Widzisz, w niektórych odpowiedziach pojawiły się błędy, które mogą wprowadzać zamieszanie. Na przykład, użycie <il> zamiast <ul> to spory błąd, bo w HTML nie mamy elementu <il>. To może spowodować problemy z wyświetlaniem strony w przeglądarkach. I w paru przypadkach z kolejnością podpunktów było nie tak – pamiętaj, że hierarchia jest ważna. Dobrze zdefiniowane listy powinny mieć swoje konteksty, czyli otaczać je tagami <ol> lub <ul>. Każdy błąd w tym zakresie może utrudnić nawigację po stronie, zwłaszcza dla osób z niepełnosprawnościami. Ogólnie rzecz biorąc, warto dbać o porządek w HTML, bo to jest kluczowe w tworzeniu stron, które są użyteczne i funkcjonalne.

Pytanie 31

Znacznik <pre> </pre> służy do wyświetlania

A. znaku wielokropkowego

B. treści czcionką w języku polskim

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

D. znaku skreślenia

Wybór błędnych odpowiedzi może wynikać z nieporozumienia dotyczącego funkcji znacznika <pre>. Odpowiedzi sugerujące, że służy on do wyświetlania znaku przekreślenia, znaku wielokropka, lub treści polską czcionką nie mają podstaw w rzeczywistej funkcjonalności tego znacznika. Znaki przekreślenia, czy wielokropki są zazwyczaj elementami typografii, które można osiągnąć przez inne znaczniki i style CSS, a nie przez <pre>. Znacznik <pre> nie wpływa na rodzaj czcionki używanej w danym elemencie, lecz przede wszystkim na sposób wyświetlania treści. Przykładem może być tekst umieszczony w tym znaczniku, który wyświetla się w sposób stały, niezależnie od ustawień czcionki w stylach CSS, co czyni go nieodpowiednim do użycia w kontekście wyboru konkretnej czcionki, jak polska czcionka. Zrozumienie, że <pre> dotyczy przede wszystkim zachowania formatowania tekstu, a nie jego typografii, jest kluczowe do poprawnego korzystania z HTML. W przypadku, gdy użytkownik wybiera błędne odpowiedzi, może to wynikać z mylnego założenia, że <pre> jest odpowiedzialny za typografię, co prowadzi do nieprawidłowych wniosków w kontekście inżynierii oprogramowania i projektowania stron internetowych.

Pytanie 32

Jakie informacje można uzyskać z wyświetlonego przez stronę tekstu „test kolorów”?

A. Po naciśnięciu przycisku test kolor tekstu zmienia się na czerwony

B. Naciskanie przycisku test powoduje, że kolor tekstu zmienia się na przemian z niebieskiego na czerwony

C. Po naciśnięciu przycisku test kolor tekstu ma kolor niebieski

D. Tuż po otwarciu strony kolor tekstu jest czerwony

Kod HTML przedstawia scenariusz w którym po załadowaniu strony element p1 ma styl koloru ustawiony na niebieski co oznacza że domyślnym kolorem tekstu jest niebieski Błędne zrozumienie tego kodu może prowadzić do mylnego wniosku że kolor jest czerwony już po załadowaniu co nie jest prawdą W kodzie zastosowano mechanizm onclick w elemencie button który uruchamia funkcję JavaScript zmieniającą kolor tekstu na czerwony To wyraźnie wskazuje że zmiana koloru następuje dopiero po interakcji użytkownika co jest częstym przypadkiem błędnego zrozumienia sekwencji działań w programowaniu frontendowym Nie ma również mechanizmu który umożliwiałby naprzemienne zmienianie kolorów co wyklucza możliwość istnienia cyklicznej zmiany kolorów w odpowiedzi Kod nie obejmuje logiki która mogłaby automatycznie zmieniać kolory na przemian zatem taka interpretacja jest błędna Zrozumienie manipulacji DOM i poprawne rozróżnienie między stanem początkowym a stanami dynamicznymi po interakcji jest kluczowe w efektywnym programowaniu JavaScript oraz tworzeniu intuicyjnych i responsywnych interfejsów użytkownika Dlatego ważne jest aby dokładnie analizować kod i zrozumieć jego działanie w kontekście interakcji z użytkownikiem oraz kolejności wykonywania skryptów na stronie internetowej

Pytanie 33

Atrybut wskazujący na lokalizację pliku graficznego w znaczniku <img> to

A. src

B. href

C. link

D. alt

Odpowiedzi, które wskazują na 'href', 'alt' lub 'link', nie są związane z funkcją atrybutu 'src' w znaczniku <img>. Atrybut 'href' jest stosowany głównie w znaczniku <a> (link), gdzie wskazuje adres URL, do którego prowadzi odnośnik. Mylne jest myślenie, że 'href' może być użyty w kontekście obrazów, ponieważ pełni zupełnie inną rolę. Natomiast 'alt' jest atrybutem, który opisuje obraz, co jest istotne dla dostępności, ale nie wskazuje lokalizacji pliku graficznego. Wybór 'alt' jako odpowiedzi wskazuje na nieporozumienie dotyczące jego celu, który nie polega na ustaleniu źródła obrazu, lecz na zapewnieniu tekstu alternatywnego. Atrybut 'link' z kolei nie istnieje w kontekście znaczników obrazów i może prowadzić do nieporozumień, ponieważ można go mylić z atrybutami związanymi z linkami do arkuszy stylów. W praktyce, zrozumienie funkcji każdego z tych atrybutów jest kluczowe dla tworzenia poprawnych i semantycznych stron WWW, co jest podstawą dobrych praktyk w web designie.

Pytanie 34

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

A. text-size

B. text-weight

C. font-size

D. font-weight

Wybór 'text-weight' jako właściwości CSS jest błędny, ponieważ nie istnieje taka właściwość w standardzie CSS. Użytkownicy mogą mylić ją z 'font-weight', co prowadzi do frustracji i błędnych implementacji w kodzie. Kolejna odpowiedź, 'font-size', odnosi się do rozmiaru tekstu, a nie do jego grubości. Użytkownicy mogą popełniać błąd myślowy, sądząc, że zmiana rozmiaru tekstu wpłynie na jego wagę, jednak te dwie właściwości są od siebie niezależne. Wreszcie, 'text-size' również nie jest uznawana za standardową właściwość CSS; właściwą terminologią w kontekście stylizacji tekstu jest 'font-size'. Takie mylne przekonania mogą wynikać z nieznajomości pełnej terminologii CSS lub z braku praktycznego doświadczenia w stylizacji stron. Kluczowe znaczenie ma zrozumienie, że CSS posiada precyzyjne określenia dla każdego aspektu stylizacji, a używanie niepoprawnych terminów może prowadzić do błędów w kodzie oraz do niepoprawnego wyświetlania elementów na stronie. Warto inwestować czas w naukę odpowiednich właściwości CSS, aby tworzyć bardziej profesjonalne i funkcjonalne strony internetowe.

Pytanie 35

Obraz przedstawia formatowanie CSS paragrafu. Aby otrzymać czerwony kolor poza obramowaniem, tak jak przedstawiono na obrazie, należy zdefiniować własność

Oto przykład paragrafu który poza ramką ma kolor grubości 10 px

A. outline

B. border

C. background

D. padding

Niestety, to nie jest poprawna odpowiedź. Możliwe, że pomyliłeś niektóre właściwości CSS. 'Padding' zwiększa wewnętrzny odstęp w elemencie, ale nie zmienia koloru obramowania. Z kolei 'background' odpowiada za tło elementu. Pamiętaj, że 'border' tworzy obramowanie i to wpływa na rozmiar elementu. Natomiast 'outline' to kontur, który tylko otacza element bez wpływania na jego układ. Warto przemyśleć tę różnicę, bo to kluczowe, żeby dobrze ogarniać CSS. Pracuj nad tym i spróbuj jeszcze raz.

Pytanie 36

W kodzie źródłowym zapisanym w języku HTML wskaż błąd walidacji dotyczący tego fragmentu. <h6>CSS</h6>
Kaskadowe arkusze stylów ang.Cascading Style Sheets) to język służący...

A. Znak br nie może być użyty wewnątrz znacznika p.

B. Znak zamykający /b jest niezgodny z zasadą zagnieżdżania.

C. Znacznik h6 jest nieznany.

D. Znak br nie został prawidłowo zamknięty.

W analizowanym fragmencie kodu HTML występuje błąd związany z niewłaściwym zagnieżdżeniem znaczników. W szczególności, znacznik zamykający został umieszczony przed zamknięciem znacznika , co narusza zasady zagnieżdżania elementów w HTML. Zgodnie z wytycznymi W3C (World Wide Web Consortium), każdy znacznik otwierający musi mieć odpowiedni znacznik zamykający w odpowiedniej kolejności, a zagnieżdżanie elementów musi być przestrzegane, aby zapewnić poprawną strukturę dokumentu. W tym przypadku poprawna sekwencja powinna wyglądać następująco: ......, co oznacza, że znacznik powinien być zamknięty po znaczniku . Przykładowo, prawidłowy zapis mógłby wyglądać tak: Kaskadowe arkusze stylów ang.Cascading Style Sheets to język służący.... Taka struktura zapewnia, że znaczniki są poprawnie zagnieżdżone, co przekłada się na lepszą interpretację przez przeglądarki oraz narzędzia do walidacji HTML.

Pytanie 37

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 powinien znajdować się wewnątrz znacznika p

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

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

D. Znacznik h6 nie jest używany w HTML5

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 38

Jakie oprogramowanie do zarządzania treścią umożliwia proste tworzenie oraz aktualizację witryny internetowej?

A. SQL

B. CMS

C. CSS

D. PHP

Wybór SQL, PHP i CSS jako odpowiedzi na pytanie o system zarządzania treścią jest wynikiem nieporozumienia dotyczącego funkcji i zastosowań tych technologii. SQL (Structured Query Language) jest językiem zapytań służącym do komunikacji z bazami danych. Umożliwia on tworzenie, modyfikowanie oraz pobieranie danych, co jest kluczowe dla działania wielu aplikacji internetowych, w tym CMS-ów, lecz sam w sobie nie dostarcza interfejsu do zarządzania treścią. PHP to język skryptowy, często wykorzystywany do tworzenia dynamicznych aplikacji webowych. Choć PHP jest podstawą wielu systemów CMS, to sam język nie jest narzędziem do zarządzania treściami. CSS (Cascading Style Sheets) natomiast jest językiem stylizacji, który odpowiada za wygląd i układ strony, ale nie wprowadza funkcji zarządzania treścią. Zastanawiając się nad tymi technologiami, można zauważyć, że mylenie ich z CMS-em może wynikać z braku zrozumienia ich ról w ekosystemie webowym. Każda z tych technologii odgrywa istotną rolę w budowie i funkcjonowaniu stron internetowych, ale nie są one systemami do zarządzania treścią. Prawidłowe zrozumienie ich funkcji jest kluczem do efektywnego wykorzystania ich w praktyce.

Pytanie 39

W języku HTML, aby stworzyć pole do wprowadzania hasła, w którym tekst jest maskowany (zastąpiony kropeczkami), należy zastosować znacznik

A. <form="password" type="password" />

B. <input type="password" />

C. <form input type="password" />

D. <input name="password" />

Aby utworzyć pole edycyjne do wpisywania hasła w HTML, należy użyć znacznika <input> z atrybutem type ustawionym na 'password'. Taki typ pola edycyjnego zapewnia, że wprowadzany tekst jest maskowany, co w praktyce oznacza, że jest on wyświetlany jako kropki lub gwiazdki, co znacząco podnosi poziom bezpieczeństwa. Stosując <input type='password' />, zalecane jest również dodanie atrybutu name, co ułatwi przesyłanie danych na serwer. Warto zwrócić uwagę, że zgodnie z tym, co definiuje specyfikacja HTML5, pole to jest standardowo obsługiwane przez wszystkie nowoczesne przeglądarki. Przykład użycia: <input type='password' name='user_password' placeholder='Wpisz swoje hasło' />. Ponadto, dobrym praktyką jest stosowanie odpowiednich mechanizmów walidacji po stronie serwera, aby upewnić się, że dane przesyłane z formularzy są bezpieczne i chronione przed nieautoryzowanym dostępem. Maskowanie hasła w polach edycyjnych jest kluczowym elementem ochrony danych użytkowników w aplikacjach internetowych oraz stronach, które wymagają logowania.

Pytanie 40

Funkcja drzewo kontekstowe w edytorze WYSIWYG Adobe Dreamweaver ma na celu

A. stylizację tekstu za pomocą dostępnych znaczników

B. określenie kaskadowych arkuszy stylów przypisanych do strony

C. prezentowanie interaktywnej struktury drzewa HTML dla treści statycznych i dynamicznych

D. przygotowanie szablonu witryny internetowej

Wybór odpowiedzi dotyczącej definiowania kaskadowych arkuszy stylów (CSS) w kontekście funkcji drzewa kontekstowego w Adobe Dreamweaver jest mylący. Kaskadowe arkusze stylów są narzędziem służącym do stylizacji stron internetowych, ale nie są bezpośrednio związane z funkcjonalnością drzewa kontekstowego, które koncentruje się na przedstawieniu struktury HTML dokumentu. Kiedy projektant korzysta z edytora, może wprowadzać zmiany w stylach CSS, jednak drzewo kontekstowe nie jest dedykowane temu procesowi. Ponadto, zrozumienie struktury HTML jest kluczowe do efektywnego stosowania CSS, ale to nie oznacza, że można je mylić. Druga odpowiedź, dotycząca tworzenia szablonu strony internetowej, jest również nieprecyzyjna. Szablony są narzędziem do ułatwienia konstrukcji stron, ale drzewo kontekstowe nie jest bezpośrednio związane z ich tworzeniem. Podobnie, formatowanie tekstu przy pomocy znaczników nie jest funkcją drzewa kontekstowego; jest to zadanie edytora WYSIWYG jako całości. Zrozumienie tych koncepcji technicznych jest kluczowe, aby uniknąć typowych pułapek myślowych, takich jak mylenie różnych funkcji edytorów oraz ich zastosowań w procesie tworzenia stron internetowych. Osoby pracujące w branży powinny być dobrze zaznajomione z odpowiedzialnością, jaką niesie ze sobą poprawne stosowanie narzędzi i technologii, aby efektywnie realizować projekty webowe.

Rozpocznij nowy egzamin

Powrót do strony głównej