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: 13 maja 2026 15:43
Data zakończenia: 13 maja 2026 16:12

Egzamin zdany!

Wynik: 34/40 punktów (85,0%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Aby określić styl czcionki w CSS, należy zastosować właściwość

A. text-family

B. font-family

C. font-style

D. text-style

Stosowanie właściwości 'text-style' jest niepoprawne, ponieważ nie istnieje taka właściwość w standardzie CSS. Zamiast tego, do modyfikacji stylu tekstu służą inne właściwości, takie jak 'font-style' czy 'text-decoration', które pozwalają na zastosowanie kursywy lub podkreślenia, lecz nie definiują kroju czcionki. Z kolei 'font-style' odnosi się do stylizacji czcionki, a nie do jej wyboru. Pozwala on na ustawienie, czy czcionka ma być normalna, pochylona czy pogrubiona, ale nie określa, jakiego kroju czcionki używamy. To prowadzi do powszechnego błędu, kiedy użytkownicy myślą, że 'font-style' określa również krój, co jest nieprawdziwe. Z drugiej strony, 'text-family' nie jest uznawanym terminem w kontekście CSS, co może wprowadzać w błąd początkujących programistów. Ważne jest, aby zrozumieć, że właściwości CSS są ściśle zdefiniowane i korzystanie z nieprawidłowych terminów prowadzi do błędów w kodzie. Aby uniknąć takich nieporozumień, warto zapoznać się z dokumentacją CSS oraz standardami W3C, które dostarczają klarownych informacji na temat dostępnych właściwości i ich zastosowań.

Pytanie 2

<source src="plik.mp4" type="video/mp4">

Aby osadzić plik wideo na stronie WWW, przedstawiony kod HTML5 należy umieścić wewnątrz znaczników:

A. <section> </section>

B. <div> </div>

C. <video> </video>

D. <embed> </embed>

Poprawna odpowiedź to umieszczenie znacznika `<source>` wewnątrz `<video>...</video>`. W HTML5 to właśnie element `<video>` jest kontenerem odpowiedzialnym za osadzanie plików wideo na stronie WWW. Atrybuty takie jak `controls`, `autoplay`, `loop`, `muted`, `width` czy `height` przypisujemy właśnie do `<video>`, a nie do `<source>`. Znacznik `<source>` służy głównie do wskazania konkretnego pliku multimedialnego i jego typu MIME, np.: `<video controls width="640" height="360"><source src="film.mp4" type="video/mp4"><source src="film.webm" type="video/webm">Twoja przeglądarka nie obsługuje elementu video.</video>`. Przeglądarka przechodzi po kolei po elementach `<source>` i wybiera pierwszy format, który potrafi odtworzyć. To jest zgodne ze specyfikacją HTML Living Standard (WHATWG) oraz zaleceniami W3C dotyczącymi multimediów w sieci. W praktyce, w projektach komercyjnych, często dodaje się kilka formatów (np. MP4, WebM), właśnie po to, by zapewnić maksymalną kompatybilność między różnymi przeglądarkami i systemami. Moim zdaniem warto od razu wyrabiać sobie nawyk pisania pełnej, semantycznie poprawnej struktury: `<video>` jako główny element odtwarzacza, w środku jeden lub więcej `<source>` i ewentualnie tekst alternatywny. Dzięki temu kod jest czytelny, łatwiej go stylować w CSS, a także lepiej zachowuje się w kontekście dostępności (np. czytniki ekranu widzą, że to element wideo). Dodatkowo, `<video>` można łatwo obsługiwać z poziomu JavaScript, korzystając z jego API (play, pause, currentTime, volume itd.), co w praktyce daje sporą kontrolę nad odtwarzaniem multimediów na stronie.

Pytanie 3

Jakie funkcje może pełnić program FileZilla?

A. publikacji strony internetowej

B. walidacji strony internetowej

C. kompilacji skryptu na stronie

D. debugowania skryptu na stronie

FileZilla to popularny klient FTP, który umożliwia przesyłanie plików między lokalnym komputerem a serwerem internetowym. Publikacja strony internetowej polega na umieszczeniu plików strony – takich jak HTML, CSS, JavaScript czy obrazy – na serwerze, aby były dostępne dla użytkowników w Internecie. Dzięki FileZilla użytkownicy mogą łatwo zarządzać tym procesem, korzystając z przyjaznego interfejsu graficznego, który pozwala na przeciąganie i upuszczanie plików. Program obsługuje różne protokoły, w tym FTP, FTPS i SFTP, co zapewnia bezpieczeństwo podczas przesyłania danych. Dobry klient FTP, taki jak FileZilla, jest niezbędnym narzędziem w pracy web developerów, pozwalając na efektywne zarządzanie plikami oraz synchronizację lokalnych zasobów z serwerem. Dodatkowo, FileZilla udostępnia funkcje takie jak edycja plików na serwerze, co umożliwia szybką modyfikację treści bez potrzeby ponownego przesyłania całej strony. W kontekście publikuje się również znaczenie zachowania odpowiednich struktur katalogów oraz standardów, co ułatwia przyszłe aktualizacje i konserwację strony.

Pytanie 4

Jaką rozdzielczość należy przyjąć, aby uzyskać proporcje obrazu 16:9, zakładając, że piksel ma formę kwadratu?

A. 1366 na 768 pikseli

B. 2560 na 2048 pikseli

C. 800 na 480 pikseli

D. 320 na 240 pikseli

Proporcje obrazu 16:9 są standardem szerokokątnym, powszechnie stosowanym w telewizji, filmach oraz w grach komputerowych. Przy rozdzielczości 1366 na 768 pikseli, stosunek szerokości do wysokości wynosi 16 do 9, co oznacza, że dla każdego 16 pikseli szerokości przypada 9 pikseli wysokości. Technicznie, aby obliczyć proporcje obrazu, należy podzielić szerokość przez wysokość. W tym przypadku 1366/768 daje wartość równą około 1.77, co odpowiada proporcji 16:9. Takie rozdzielczości są często używane w laptopach oraz monitorach HD, co czyni je idealnym wyborem do zastosowań multimedialnych. Standard 16:9 stał się powszechnie akceptowanym formatem, co wpływa na kompatybilność treści wizualnych, umożliwiając ich odpowiednie wyświetlanie na różnych urządzeniach. Użycie tej rozdzielczości zapewnia również lepszą jakość obrazu w porównaniu z niższymi rozdzielczościami, co jest kluczowe w kontekście nowoczesnych technologii wyświetlania.

Pytanie 5

Który element blokowy języka HTML5 jest przeznaczony do umieszczenia w nim nawigacji witryny?

A. main

B. aside

C. nav

D. header

Poprawnie wskazany został element <nav>, który w HTML5 jest semantycznym kontenerem przeznaczonym specjalnie na nawigację. Według specyfikacji HTML Living Standard element <nav> służy do grupowania głównych bloków odsyłaczy nawigacyjnych, takich jak menu główne, menu w stopce, menu kategorii czy paginacja. Przeglądarki, czytniki ekranu i różne narzędzia asystujące rozpoznają ten znacznik jako obszar nawigacyjny, co bardzo poprawia dostępność (accessibility) strony. Z mojego doświadczenia, gdy struktura jest zrobiona semantycznie, screen readery potrafią jednym skrótem klawiaturowym przeskoczyć do nawigacji, co jest ogromnym ułatwieniem dla użytkowników niewidomych. W praktyce w <nav> umieszczamy listy linków, najczęściej w postaci <ul><li><a>…</a></li></ul>. Przykładowo: <nav><ul><li><a href="/">Strona główna</a></li><li><a href="/oferta">Oferta</a></li><li><a href="/kontakt">Kontakt</a></li></ul></nav>. Taka konstrukcja jest zgodna z dobrymi praktykami front-endu: semantyczny HTML, czytelna struktura, łatwiejsze stylowanie w CSS i prostsza nawigacja w JavaScript. Co ważne, <nav> nie jest zwykłym divem – jego nazwa od razu mówi, do czego służy, co ułatwia pracę całego zespołu projektowego. W projektach komercyjnych często stosuje się kilka bloków <nav> na jednej stronie: główne menu w headerze, dodatkowe menu w stopce, czasem boczne menu kategorii. Standardy W3C dopuszczają to, pod warunkiem że te sekcje rzeczywiście służą do nawigowania. Dobrym zwyczajem jest nie umieszczać w <nav> pojedynczych przypadkowych linków w tekście artykułu – ten znacznik jest przewidziany dla istotnych struktur nawigacyjnych, a nie dla zwykłych hiperłączy w treści. Dzięki temu kod HTML pozostaje przejrzysty, łatwiej go walidować i utrzymywać w większych projektach.

Pytanie 6

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

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

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

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

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

Twoja odpowiedź jest prawidłowa. W CSS do tworzenia szablonu strony z trzema kolumnami ustawionymi obok siebie stosuje się właściwość 'float: left;', a dodatkowo ustawia się szerokość każdej kolumny na 'width: 33%;'. Ta technika pozwala na równomierne rozmieszczenie trzech kolumn w poziomie na stronie. Właściwość 'float' służy do opływania elementów strony, a właściwość 'width' umożliwia kontrolę nad szerokością elementów. To są standardy w branży w projektowaniu stron internetowych. W stylach CSS zawsze powinniśmy starać się zapewnić jak najbardziej płynne i spójne doświadczenia dla użytkowników, a ten sposób tworzenia szablonów trzech kolumn jest jednym z niezbędnych narzędzi w naszym arsenale. Pamiętaj, że zrozumienie i umiejętne stosowanie CSS jest kluczowe dla tworzenia estetycznych i funkcjonalnych stron internetowych.

Pytanie 7

Skrypt na stronę WWW stworzony w języku PHP

A. jest wykonywany po stronie serwera

B. jest realizowany po stronie klienta

C. może działać bez wsparcia serwera WWW

D. jest przetwarzany w taki sam sposób jak JavaScript

Kod PHP jest przetwarzany po stronie serwera, co oznacza, że wszystkie instrukcje napisane w tym języku są wykonywane na serwerze, a nie na komputerze klienta. Kiedy użytkownik żąda strony internetowej, serwer WWW interpretuje kod PHP, generuje odpowiedni HTML i wysyła go do przeglądarki. Dzięki temu możliwe jest dynamiczne tworzenie treści, uzależnionej od danych wejściowych użytkownika czy zawartości bazy danych. Przykładowo, w aplikacjach internetowych takich jak systemy zarządzania treścią (CMS) czy platformy e-commerce, PHP pozwala na generowanie różnorodnych widoków i interakcji w oparciu o aktualne informacje. Kluczowym aspektem dobrej praktyki w programowaniu w PHP jest separacja logiki aplikacji od warstwy prezentacji, co wspiera łatwiejsze zarządzanie kodem i jego utrzymanie. Warto również zaznaczyć, że PHP współpracuje z różnymi systemami baz danych, co umożliwia przechowywanie i przetwarzanie dużych ilości danych. Na przykład, w typowej aplikacji webowej można wykorzystać PHP do komunikacji z bazą MySQL, co pozwala na dynamiczne ładowanie treści w odpowiedzi na interakcje użytkownika.

Pytanie 8

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

A. układania bloków jeden pod drugim

B. wyrównania tekstu do lewej strony

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

D. ustawienia bloku na lewo w stosunku do innych

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

Pytanie 9

Który z poniższych języków jest zazwyczaj używany do programowania front-endowego (wykonywanego po stronie klienta)?

A. PHP

B. CSS

C. Node.js

D. Perl

CSS, czyli Kaskadowe Arkusze Stylów, jest fundamentalnym językiem używanym do stylizacji stron internetowych. Jest to język front-endowy, co oznacza, że jego kod jest wykonywany po stronie klienta, czyli w przeglądarkach internetowych użytkowników. CSS pozwala na definiowanie wyglądu elementów HTML, takich jak kolory, czcionki, układ czy odstępy, co ma kluczowe znaczenie dla tworzenia atrakcyjnych i responsywnych interfejsów użytkownika. Przykładem może być zastosowanie CSS do stylizacji przycisku, gdzie można zmienić jego kolor, dodać cień oraz animacje przy najechaniu myszką. W standardach webowych CSS współpracuje z HTML oraz JavaScript, co zapewnia dynamiczne i interaktywne doświadczenia. Dobry projektant front-endowy powinien znać zasady związane z kaskadowością i dziedziczeniem w CSS, aby optymalnie wykorzystywać ten język do tworzenia estetycznych i użytecznych stron internetowych.

Pytanie 10

Aby umieścić plik wideo na stronie internetowej z widocznymi przyciskami sterującymi oraz zapętlonym odtwarzaniem, należy w znaczniku <video> użyć atrybutów

A. controls i autoplay

B. autoplay i preload

C. loop i muted

D. controls i loop

Odpowiedź "controls i loop" jest całkiem dobra, bo te dwa atrybuty są naprawdę istotne, żeby wideo działało jak należy na stronie. Atrybut "controls" dodaje do odtwarzacza przyciski, które pozwalają na zatrzymywanie, odtwarzanie i regulowanie głośności, co jest bardzo wygodne dla ludzi. Z kolei "loop" sprawia, że filmik odtwarza się w kółko, co może być super użyteczne, szczególnie w prezentacjach albo reklamach, które chcemy pokazać kilka razy. Przykładowo, <video src='video.mp4' controls loop> wstawia wideo z przyciskami, które można łatwo obsługiwać, no i od razu się zapętla. W ogóle, korzystanie z tych atrybutów to dobra praktyka, bo sprawia, że strony są bardziej przyjazne dla użytkowników oraz poprawia ich doświadczenia.

Pytanie 11

W jakiej technologii nie zachodzi możliwość przetwarzania danych wprowadzanych przez użytkowników na stronach internetowych?

A. JavaScript

B. PHP

C. AJAX

D. CSS

CSS (Cascading Style Sheets) to język stylów, który służy do opisywania wyglądu i formatu dokumentów HTML. Jego głównym celem jest kontrolowanie układu, kolorów, czcionek oraz innych aspektów wizualnych strony internetowej. CSS nie ma możliwości przetwarzania danych wprowadzanych przez użytkowników, gdyż nie posiada funkcji logiki programistycznej ani operacji na danych. Przykładowo, CSS może zmieniać kolor tła lub rozmiar tekstu, ale nie może zbierać informacji z formularzy ani reagować na interakcje użytkownika w sposób, w jaki robią to języki programowania takie jak JavaScript czy PHP. Może to prowadzić do mylnych przekonań, że CSS jest bardziej wszechstronny, niż jest w rzeczywistości, jednak jego zastosowanie ogranicza się wyłącznie do aspektów stylistycznych. W praktyce, aby przetwarzać dane użytkownika, niezbędne są inne technologie, które mogą współpracować z CSS, ale same w sobie nie są w stanie tego zrobić.

Pytanie 12

W CSS określono styl dla pola do edycji, które będzie miało tło w kolorze jasnozielonym po aktywacji.

input:focus { background-color: LightGreen; }

A. jeśli zostanie na nie najechane kursorem bez kliknięcia

B. w każdej sytuacji

C. gdy jest to pierwsze użycie tego elementu w dokumencie

D. po kliknięciu myszką w celu wprowadzenia tekstu

Odpowiedź "po kliknięciu myszą w celu zapisania w nim tekstu" jest poprawna, ponieważ reguła CSS `input:focus { background-color: LightGreen; }` definiuje styl, który ma zastosowanie, gdy pole edycyjne (input) jest w stanie "focus". Stan ten jest aktywowany, gdy użytkownik klika na pole, co pozwala na wpisywanie tekstu. To podejście jest zgodne z zasadami dostępności i użyteczności interfejsów, ułatwiając użytkownikom interakcję z formularzami. Przykładowo, w formularzach online, takie wizualne wskazanie na aktywne pole poprawia doświadczenie użytkownika, zwiększa czytelność oraz umożliwia łatwiejsze wprowadzanie danych. Warto również pamiętać, że dobrym standardem jest stosowanie kolorów tła, które są kontrastowe w stosunku do kolorów tekstu, aby zapewnić ich czytelność. Ponadto, w praktyce developerskiej, często wykorzystuje się dodatkowe efekty, takie jak animacje, które mogą poprawić interaktywność i wyrazistość reakcji na działania użytkownika. Właściwe stosowanie stylów CSS w kontekście stanu focus jest więc kluczowe dla tworzenia przyjaznych dla użytkownika interfejsów.

Pytanie 13

Pokazane pole input pozwala na

A. wprowadzenie dowolnego tekstu

B. wybranie opcji

C. selekcja opcji z listy o wartościach text1 i text2

D. wprowadzenie hasła

Odpowiedzi takie jak "wpisanie dowolnego tekstu", "wpisanie hasła" czy "wybranie opcji z listy o wartości text1 i text2" są mylne, bo nie oddają rzeczywistego działania pola typu checkbox. Jak chodzi o checkboxa, to nie wprowadza się tekstu ani haseł. Checkboxy są do wyboru opcji, a nie do wpisywania danych. Wydaje mi się, że pisanie dowolnego tekstu sugeruje, że chodzi o pole tekstowe, a to jest zupełnie inny typ elementu. Z kolei hasło powinno być wprowadzone w polu typu password, które maskuje to, co wpisujemy dla bezpieczeństwa. A wybieranie opcji z listy kojarzy się z rozwijaną listą (select), a nie checkboxem, co też jest niepoprawne. Często mylimy różne typy elementów formularza i nie do końca rozumiemy ich funkcje. Dlatego warto rzucić okiem na dokumentację i przykłady różnych typów pól formularzy, żeby uniknąć podobnych nieporozumień w przyszłości.

Pytanie 14

input:focus { background-color: LightGreen; } W Ciebie CSS określono stylizację dla pola wejściowego. Tak przygotowane pole wejściowe będzie miało tło w odcieniu jasnozielonym?

A. w każdej sytuacji

B. kiedy zostanie najechane kursorem myszy bez jego klikania

C. jeżeli jest to pierwsza obecność tego elementu w dokumencie

D. po naciśnięciu przycisku myszy w celu wprowadzenia tekstu

Odpowiedź 'po kliknięciu myszą w celu zapisania w nim tekstu' jest poprawna, ponieważ styl CSS zdefiniowany jako 'input:focus' odnosi się do stanu, w którym pole edycyjne jest aktywne i gotowe do wprowadzania danych. Kiedy użytkownik klika w pole edycyjne, przeglądarka przełącza jego stan na 'focus', co skutkuje zastosowaniem zdefiniowanego stylu, w tym przypadku jasnozielonego tła. Dzięki temu użytkownicy mogą wizualnie zidentyfikować, które pole edycyjne jest aktualnie wybrane, co znacząco poprawia użyteczność i interaktywność formularzy na stronach internetowych. W praktyce, jest to kluczowe podczas projektowania formularzy, aby zapewnić użytkownikom wyraźne wskazówki dotyczące aktualnego stanu interfejsu. Dobrym przykładem zastosowania jest formularz rejestracyjny, gdzie aktywne pole edycyjne wyróżnia się kolorem, ułatwiając użytkownikom wprowadzanie danych. Zgodnie z wytycznymi WCAG (Web Content Accessibility Guidelines), takie wizualne wskazówki są istotne dla zapewnienia dostępności aplikacji webowych, co czyni je standardem branżowym.

Pytanie 15

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

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 16

Z jakich elementów składa się tabela generowana przez poniższy kod?

<table border="1">
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
</table>

A. dwóch wierszy oraz jednej kolumny

B. jednego wiersza oraz jednej kolumny

C. jednego wiersza oraz dwóch kolumn

D. dwóch wierszy i dwóch kolumn

Kod w pytaniu przedstawia strukturę HTML dla tabeli. Tabela składa się z jednej pary znaczników <tr>, co oznacza, że zawiera jeden wiersz. Wewnątrz tego wiersza znajdują się dwa znaczniki <td>, reprezentujące dwie komórki, czyli kolumny. Praktyczne zastosowanie tabel w HTML obejmuje prezentację danych w sposób strukturalny, co jest szczególnie użyteczne w przypadku raportów, cenników czy kalendarzy. Dobre praktyki w projektowaniu stron internetowych sugerują stosowanie tabel do prezentacji danych, nie zaś do układania treści na stronie, co było popularne w starszych wersjach HTML. W nowoczesnym podejściu do front-endu, używa się CSS i Flexbox lub Grid do układania elementów. Jednak zrozumienie podstaw HTML, takich jak prawidłowa struktura tabeli, jest kluczowe dla tworzenia semantycznych i dostępnych stron WWW. Tabele powinny być też wzbogacone o elementy takie jak <thead>, <tbody> i <tfoot> dla lepszej organizacji danych i wsparcia przez technologie asystujące dla osób z niepełnosprawnościami.

Pytanie 17

Który format graficzny najlepiej nadaje się do zapisu obrazu z przezroczystością do zastosowania w serwisie internetowym?

A. BMP

B. PNG

C. JPG

D. SVG

Format PNG (Portable Network Graphics) jest najlepszym wyborem do zapisu obrazów z przezroczystością przeznaczonych na strony internetowe. PNG obsługuje przezroczystość alpha, co oznacza, że można uzyskać dowolny stopień przezroczystości na pikselach, co jest szczególnie przydatne w przypadku grafik wymagających gładkich przejść lub cieni. Dzięki temu grafiki mogą być umieszczane na różnych tłach bez widocznych krawędzi, co jest kluczowe w designie stron internetowych. Warto również zauważyć, że PNG wykorzystuje kompresję bezstratną, co oznacza, że jakość obrazu nie ulega pogorszeniu podczas zapisu. W praktyce, format PNG jest idealny do logo, ikon, obrazów z tekstem oraz ilustracji, gdzie ważna jest jakość i przezroczystość. Standardy webowe, takie jak WCAG, również zalecają używanie formatów, które zapewniają dostępność, a PNG doskonale wpisuje się w te wymagania, umożliwiając tworzenie estetycznych i funkcjonalnych stron. Ponadto, wsparcie dla formatu PNG jest szerokie, co zapewnia jego uniwersalność w różnych przeglądarkach i na różnych urządzeniach.

Pytanie 18

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

A. pseudoklasę :hover

B. pseudoklasę :visited

C. pseudoelement ::first-line

D. pseudoelement ::marker

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

Pytanie 19

W notacji szesnastkowej kolor zielony reprezentowany jest jako #008000. Jaką wartość przyjmuje on w notacji RGB?

A. rgb(0, 100, 0)

B. rgb(0, 128, 0)

C. rgb(0, 80, 0)

D. rgb(0, 160, 0)

Wartość koloru zielonego w notacji szesnastkowej #008000 odpowiada w notacji RGB wartości rgb(0, 128, 0). W tym systemie kolorów każda składowa koloru (czerwony, zielony, niebieski) jest reprezentowana jako liczba całkowita w przedziale od 0 do 255, co odpowiada 8-bitowym wartościom. W przypadku koloru zielonego, składowa czerwonego ma wartość 0, składowa zielonego 128, a składowa niebieskiego także 0. W praktyce, RGB jest powszechnie stosowane w projektowaniu graficznym, programowaniu oraz w tworzeniu stron internetowych, gdzie kolory są definiowane w taki sposób, aby zapewnić szeroką gamę odcieni. Wartości RGB mogą być wykorzystywane w CSS do stylizacji elementów, co pozwala na precyzyjne odwzorowanie zamierzonych kolorów oraz estetyki. Stosując standardy webowe, umiejętność konwersji między różnymi formatami kolorów jest niezbędna, zwłaszcza w kontekście zapewnienia spójności wizualnej na różnych urządzeniach i platformach.

Pytanie 20

W języku HTML w celu określenia słów kluczowych dla danej strony, należy zastosować następujący zapis

A. <meta name="keywords" content="psy, koty, gryzonie">

B. <meta name="description" content="psy, koty, gryzonie">

C. <meta name="keywords" = "psy, koty, gryzonie">

D. <meta keywords="psy, koty, gryzonie">

Poprawna odpowiedź to <meta name="keywords" content="psy, koty, gryzonie">, ponieważ jest to zgodne z aktualnymi standardami HTML i poprawną składnią. Element <meta> jest używany do dostarczania metadanych, które nie są wyświetlane bezpośrednio na stronie, ale mają kluczowe znaczenie dla wyszukiwarek internetowych i innych aplikacji. Atrybut 'name' definiuje typ metadanych, a 'content' zawiera konkretne informacje, w tym przypadku słowa kluczowe, które mają być używane przez wyszukiwarki do indeksowania strony. Przykład zastosowania tego elementu w kodzie HTML wyglądałby następująco: <head><meta name="keywords" content="psy, koty, gryzonie"></head>. Warto zauważyć, że chociaż atrybut 'keywords' nie jest już tak istotny jak kiedyś ze względu na zmiany w algorytmach wyszukiwarek, to jego poprawne zdefiniowanie wciąż pokazuje dbałość o standardy HTML. Dobrą praktyką jest aktualizowanie i dostosowywanie metadanych do aktualnych trendów SEO, co może zwiększyć widoczność strony w wynikach wyszukiwania.

Pytanie 21

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

A. wybór eliptyczny

B. deformacje i zniekształcenia

C. propagacja wartości

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

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

Pytanie 22

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

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

B. tr { background-color: Pink; }

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

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

W tym zadaniu chodzi o zrozumienie, jak działają selektory CSS oraz pseudo-klasy odpowiedzialne za interakcję z użytkownikiem. Jeśli efekt ma pojawiać się tylko wtedy, gdy użytkownik najedzie myszką na wiersz tabeli, to zwykłe ustawienie background-color bez pseudo-klasy nie spełni tego warunku. Deklaracja tr { background-color: Pink; } oznaczałaby, że wszystkie wiersze tabeli są cały czas różowe, niezależnie od tego, czy ktoś na nie najedzie, czy nie. To jest po prostu styl statyczny, bez żadnej reakcji na zdarzenia. Podobnie zapis td, th { background-color: Pink; } ustawia tło dla wszystkich komórek tabeli (zarówno nagłówkowych th, jak i zwykłych td) w sposób stały. Moim zdaniem to dość częsty błąd: ktoś kojarzy tabelę z komórkami i intuicyjnie styluje td/th, ale zapomina, że w pytaniu chodzi o efekt dynamiczny „po najechaniu”. W rezultacie otrzymujemy tabelę pokolorowaną na stałe, bez jakiejkolwiek interakcji, co jest sprzeczne z założeniem zadania i z typowym zachowaniem tabel w nowoczesnych interfejsach. Ciekawsza jest kwestia selektora tr:active { background-color: Pink; }. Pseudo-klasa :active oznacza element w momencie „aktywacji”, czyli najczęściej w chwili klikania (przytrzymania przycisku myszy). Efekt trwa bardzo krótko, tylko w czasie samego kliknięcia. To zupełnie inny scenariusz niż wygodne podświetlenie wiersza, które ma się utrzymywać, dopóki kursor jest nad elementem. Użycie :active prowadzi do efektu, który miga na ułamek sekundy i z punktu widzenia ergonomii jest praktycznie bezużyteczny w kontekście podświetlania wierszy. Typowy błąd myślowy przy takich pytaniach polega na myleniu różnych pseudo-klas: :hover, :active, :focus. W webdevie przyjęło się, że :hover służy do reakcji na najechanie myszką, :active do krótkiej reakcji na kliknięcie, a :focus do zaznaczenia elementu, który ma aktualnie fokus klawiatury. Standardy CSS i dobre praktyki projektowania interfejsów jasno wskazują, że do efektu „podświetl wiersz, gdy nad nim jestem” należy użyć właśnie :hover na odpowiednim elemencie, czyli w tym przypadku tr. Wszystkie pozostałe odpowiedzi ignorują tę zasadę albo stosują nie tę pseudo-klasę, co trzeba, przez co nie odzwierciedlają poprawnie zachowania pokazanego w materiale wideo.

Pytanie 23

Element

<meta charset="utf-8">

definiuje metadane dotyczące strony internetowej, odnosząc się do

A. opisu witryny

B. języka witryny

C. słów kluczowych

D. kodowania znaków

Ten element <meta charset="utf-8"> jest naprawdę ważny w nagłówku stron HTML, bo to on mówi przeglądarkom, jak odczytywać znaki w Twoim dokumencie. Dzięki temu tekst wyświetla się poprawnie na różnych urządzeniach. UTF-8 jest najbardziej popularnym kodowaniem, bo obsługuje niemal wszystkie znaki z różnych języków, co sprawia, że Twoja strona może być bardziej uniwersalna. Na przykład, jeśli masz tekst po polsku, to użycie UTF-8 upewnia się, że takie znaki jak ą czy ć będą prawidłowo pokazane. Właśnie dlatego warto stosować UTF-8, bo to, co zaleca W3C, jest bardzo sensowne - chodzi przecież o to, żeby strona była dostępna dla każdego, niezależnie od tego, z jakiego języka korzysta.

Pytanie 24

Do stworzenia układu strony z trzema kolumnami umieszczonymi obok siebie, można wykorzystać styl CSS

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

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

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

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

Aby stworzyć szablon strony internetowej z trzema kolumnami obok siebie, kluczowe jest zastosowanie odpowiednich właściwości CSS. Właściwość 'float' z wartością 'left' pozwala na przesunięcie elementów w lewo, co umożliwia ich równoległe wyświetlanie w poziomie. Ustawienie szerokości każdej kolumny na 33% zapewnia, że wszystkie trzy kolumny zajmą równą część dostępnej przestrzeni w kontenerze. To podejście jest zgodne z zasadami projektowania responsywnego, umożliwiając dostosowanie układu do różnych rozmiarów ekranów. Przykładowo, definiując klasę .kolumny w CSS jako '.kolumny{ float: left; width: 33%; }', uzyskujemy pożądany efekt trzech kolumn. Warto również zdefiniować kontener dla kolumn, aby uniknąć problemów z 'clearfix'. Takie podejście wspiera standardy W3C dotyczące budowy stron internetowych oraz ułatwia przyszłe modyfikacje w układzie. Dodatkowo, istotne jest, aby pamiętać o odpowiednim 'clearfix', aby kontener dostosował swoje wymiary do elementów wewnętrznych, co zapobiega problemom z układem.

Pytanie 25

Które z poniższych formatowań nie jest zapisane w języku CSS?

A. Fragment pliku strona.html: <body bgcolor="yellow">

B. Fragment pliku formatowanie.css: body {background-color: yellow;}

C. Fragment pliku strona.html: <style> body {background-color: yellow;} </style>

D. Fragment pliku strona.html: <body style="background-color:yellow;">

Fragment <body bgcolor="yellow"> nie jest wyrażony w języku CSS, lecz w przestarzałym atrybucie HTML, który został uznany za niezalecany w nowoczesnych praktykach webowych. CSS (Cascading Style Sheets) to język służący do stylizacji dokumentów HTML i definiuje wizualne aspekty strony internetowej niezależnie od jej struktury. Atrybut 'bgcolor' był popularny w starszych wersjach HTML, jednak obecnie powinno się go unikać z uwagi na separację treści od prezentacji. Zastosowanie CSS w stylach wewnętrznych lub zewnętrznych, takich jak body {background-color: yellow;} pozwala na bardziej elastyczne i wydajne zarządzanie stylami strony. Warto również zauważyć, że zgodnie z aktualnymi standardami W3C, zaleca się używanie CSS do stylizacji, co pozwala na lepszą responsywność i łatwiejsze utrzymanie kodu. Przykłady zastosowania CSS w praktyce pokazują, jak można w prosty sposób zmieniać wygląd elementów na stronie, co jest kluczowe w nowoczesnym web designie, zwłaszcza w kontekście tworzenia stron mobilnych.

Pytanie 26

W języku CSS wprowadzone zostało następujące formatowanie: ```h1 i {color:red;}``` Kolor czerwony będzie stosowany do

A. wyłącznie pochylonego tekstu w każdym rodzaju nagłówka

B. całego tekstu nagłówka pierwszego stopnia oraz całego tekstu pochylonego, niezależnie od lokalizacji na stronie

C. całego tekstu nagłówka pierwszego stopnia oraz tekstu pochylonego w akapicie

D. tylko tekstu pochylonego nagłówka pierwszego poziomu

Wszystkie odpowiedzi, które nie odpowiadają na pytanie, wynikają z niepoprawnego zrozumienia selektora CSS. Odpowiedzi, które sugerują, że kolor czerwony dotyczy całego tekstu nagłówka pierwszego stopnia, są błędne, ponieważ kolor czerwony jest przypisany jedynie do elementów 'i' znajdujących się w 'h1'. Nieprawidłowe jest także sugerowanie, że stylizacja dotyczy tekstu pochylonego we wszystkich poziomach nagłówków, ponieważ selektor odnosi się wyłącznie do 'h1', co wyklucza inne nagłówki. Dodatkowo, stwierdzenie, że styl obejmuje cały tekst nagłówka oraz wszelki tekst pochylony, nie jest zgodne z zasadami dziedziczenia stylów CSS. W rzeczywistości, selektor ogranicza się do określonego kontekstu, co oznacza, że tylko elementy 'i' w ramach 'h1' podlegają tym regułom. W związku z tym, jakiekolwiek inne elementy czy nagłówki nie są brane pod uwagę w tej regule stylizacji, co z kolei podkreśla precyzyjność i zastosowanie selektorów w CSS.

Pytanie 27

Aby strona internetowa poprawnie dostosowała się do urządzeń mobilnych, należy określić rozmiar czcionki

A. tylko z wykorzystaniem znaczników big i small

B. w milimetrach

C. w pikselach

D. w procentach

Aby witryna internetowa prawidłowo skalowała się na urządzeniach mobilnych, zaleca się definiowanie wielkości czcionki w procentach. Używanie procentów zapewnia elastyczność i responsywność interfejsu użytkownika, co jest kluczowe w kontekście różnorodności rozmiarów ekranów. Procentowe jednostki (np. 100%, 150%) są relatywne do rodzica (elementu, w którym się znajdują), co pozwala na automatyczne dostosowywanie się do zmieniających się warunków wyświetlania. Takie podejście jest zgodne z zasadami responsywnego projektowania, które kładzie nacisk na dostosowanie zawartości do różnych rozmiarów ekranów. Ponadto, używanie procentów w połączeniu z jednostkami em i rem, które również są skalowalne, pozwala na tworzenie bardziej dostępnych i przyjaznych dla użytkownika interfejsów. Przykładem może być zdefiniowanie wielkości czcionki nagłówka jako 120%, co sprawi, że będzie ona 20% większa od wielkości czcionki tekstu bazowego, co poprawi czytelność na mniejszych urządzeniach. Warto również zauważyć, że takie podejście wspiera standardy dostępności, co jest istotne w kontekście SEO i doświadczenia użytkownika.

Pytanie 28

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

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

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

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

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

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

Pytanie 29

W CSS jednostką miary, która jest wyrażona w punktach edytorskich, oznaczana jest symbolem

A. in

B. pt

C. px

D. em

Symbolem jednostki miary wyrażonej w punktach edytorskich w CSS jest 'pt'. Jednostka ta odnosi się do punktów typograficznych, które są tradycyjnie używane w druku. 1 punkt typograficzny odpowiada 1/72 cala. Używanie jednostki 'pt' jest szczególnie przydatne w projektowaniu dla mediów drukowanych, gdzie precyzyjne odwzorowanie wielkości tekstu ma kluczowe znaczenie. W CSS, 'pt' może być stosowane do definiowania rozmiarów czcionek, marginesów oraz innych właściwości wymiarowych, co zapewnia spójność między różnymi urządzeniami i mediami. Przykład użycia może wyglądać tak: 'font-size: 12pt;' co oznacza, że tekst ma mieć 12 punktów typograficznych. Warto pamiętać, że różne przeglądarki i systemy operacyjne mogą różnie interpretować jednostki miary, dlatego stosowanie punktów w kontekście druku jest bardziej zalecane, aniżeli w sieci, gdzie lepiej sprawdzają się inne jednostki, takie jak 'px' lub 'em'. W dokumentach CSS3 jednostka 'pt' jest częścią standardów CSS, co zapewnia jej szerokie wsparcie w różnych przeglądarkach i narzędziach do projektowania.

Pytanie 30

Aby włączyć kaskadowy arkusz stylów zapisany w pliku zewnętrznym, należy zastosować poniższy fragment kodu HTML

A. <div id="styl.css" relation="css">

B. <meta charset="styl.css">

C. <optionvalue="styl.css" type="text/css">

D. <link rel="stylesheet" type="text/css" href="styl.css">

Poprawna odpowiedź to <link rel="stylesheet" type="text/css" href="styl.css" />. Ten fragment kodu HTML jest standardowym sposobem dołączania zewnętrznych arkuszy stylów do dokumentu HTML. Atrybut 'rel' określa relację pomiędzy dokumentem a zewnętrznym plikiem, w tym przypadku jest to 'stylesheet', co informuje przeglądarkę, że plik ma zawierać style CSS. Atrybut 'type' wskazuje typ zawartości, a 'href' zawiera ścieżkę do pliku CSS, w tym przypadku 'styl.css'. Zewnętrzne arkusze stylów są zalecane, ponieważ umożliwiają oddzielenie treści od stylizacji, co jest zgodne z zasadą separacji obowiązków w inżynierii oprogramowania. Umożliwia to łatwe zarządzanie i aktualizowanie stylów bez konieczności modyfikowania samego HTML-a. Przykładem zastosowania może być stworzenie pliku styl.css, który zawiera wszystkie style dla danej strony, co pozwala na ponowne wykorzystanie tych samych stylów w różnych częściach serwisu, co zwiększa spójność i ułatwia utrzymanie kodu.

Pytanie 31

Głównym celem systemu CMS jest oddzielenie treści serwisu informacyjnego od jego wizualnej formy. Ten efekt osiągany jest przez generowanie zawartości

A. z bazy danych oraz wizualizacji poprzez atrybuty HTML

B. z plików HTML o stałej zawartości oraz wizualizacji przy pomocy technologii FLASH

C. z plików HTML o stałej zawartości oraz wizualizacji z użyciem ustalonego szablonu

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

Poprawna odpowiedź na to pytanie to "z bazy danych oraz wyglądu ze zdefiniowanego szablonu". Systemy CMS (Content Management System) mają na celu oddzielenie treści od prezentacji, co pozwala na łatwiejsze zarządzanie i aktualizowanie zawartości serwisu. Wykorzystanie bazy danych do przechowywania treści jest kluczowe, ponieważ umożliwia dynamiczne generowanie zawartości na stronach internetowych. Dzięki temu, gdy zmienia się treść w bazie danych, zmiany te są automatycznie odzwierciedlane na stronie bez potrzeby modyfikacji statycznych plików HTML. Szablony, które definiują wygląd, są również niezmiernie ważne, ponieważ pozwalają na spójność wizualną serwisu i jego łatwą adaptację w przypadku zmian w designie. Przykładem może być użycie systemu szablonów, takiego jak Twig w Symfony, który umożliwia separację logiki biznesowej od prezentacji, co ułatwia pracę developerom i designerom. Takie podejście jest zgodne z najlepszymi praktykami w branży, zapewniając przy tym elastyczność i skalowalność serwisów internetowych.

Pytanie 32

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 – h10

B. h1 – h8

C. h1 – h4

D. h1 – h6

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 33

Podany fragment dokumentu HTML zawierający kod JavaScript sprawi, że po naciśnięciu przycisku

A. obraz1.png zostanie wymieniony na obraz2.png

B. obraz2.png zostanie wymieniony na obraz1.png

C. obraz1.png zostanie zniknięty

D. obraz2.png zostanie zniknięty

Załączony fragment kodu HTML pokazuje dwa elementy img oraz przycisk. Obrazek obraz2.png ma przypisany atrybut id o wartości id1. W kodzie JavaScript przypisanym do zdarzenia onclick przycisku wykorzystywana jest metoda document.getElementById('id1').style.display='none'. Ta metoda odwołuje się bezpośrednio do elementu o identyfikatorze id1 czyli obrazka obraz2.png i zmienia jego styl CSS display na none. W praktyce oznacza to że element ten zostanie ukryty na stronie po naciśnięciu przycisku. Praktyczne zastosowanie tej techniki to dynamiczne zarządzanie widocznością elementów na stronie bez konieczności jej przeładowania co poprawia doświadczenie użytkownika. Tego typu manipulacje DOM (Document Object Model) są podstawą interaktywnych aplikacji webowych i są powszechnie używane w nowoczesnym programowaniu JavaScript. Dobrym standardem jest jednak unikanie bezpośredniego pisania skryptów JavaScript w HTML co poprawia czytelność kodu i jego utrzymywalność

Pytanie 34

Jak powinien być zapisany kolor 255 12 12 w modelu RGB na stronie www?

A. #FF0C0C

B. #AB1A1D

C. #EE0C0C

D. #2551212

Wszystkie niepoprawne odpowiedzi zawierają błędy wynikające z niewłaściwej konwersji wartości RGB do formatu heksadecymalnego. W przypadku pierwszej z odpowiedzi, 2551212, zapis ten nie jest zgodny ze standardem heksadecymalnym, ponieważ nie uwzględnia formatu #RRGGBB, gdzie R, G, B to wartości szesnastkowe. Poza tym, wartości RGB powinny być przedstawione jako dwucyfrowe liczby heksadecymalne, co czyni tę odpowiedź nieprawidłową. Kolejna odpowiedź, #EE0C0C, sugeruje, że wartość czerwona wynosi 238 w systemie dziesiętnym, co jest znacznie niższe niż maksymalna wartość 255, co nie odpowiada zadanemu kolorowi. Wartość ta, po konwersji, powinna wynosić FF. Trzecia odpowiedź, #AB1A1D, również jest błędna, ponieważ wartości czerwona (AB) i zielona (1A) nie odpowiadają podanym wartościom RGB. W tym przypadku wartość czerwona jest zbyt niska, a wartość zielona jest nieodpowiednia, co prowadzi do całkowicie innego koloru. Dokładność konwersji kolorów RGB do heksadecymalnych jest kluczowa dla zapewnienia prawidłowego wyświetlania kolorów w projektach webowych, dlatego ważne jest, aby stosować poprawne techniki przeliczeniowe.

Pytanie 35

Dla strony internetowej stworzono grafikę rysunek.jpg o wymiarach: szerokość 200 px, wysokość 100 px. Jak można wyświetlić tę grafikę jako miniaturę – pomniejszoną z zachowaniem proporcji, używając znacznika?

A. <img src="rysunek.png" style="width: 25px; height:25px;">

B. <img src="rysunek.png">

C. <img src="rysunek.png" style="width: 25px; height:50px;">

D. <img src="rysunek.png" style="width: 50px">

Pozostałe odpowiedzi niestety nie trzymają się zasady zachowania proporcji, jak zmniejszamy grafikę. W pierwszej opcji, <img src="rysunek.png" style="width: 25px; height:50px"> zestawione wartości szerokości i wysokości są krzywe, co powoduje zniekształcenie obrazu. Oryginalny rysunek ma proporcje 2:1, a tu wychodzi 1:2, co może wprowadzać ludzi w błąd. W trzeciej opcji, <img src="rysunek.png"> brak wskazania szerokości i wysokości sprawia, że obrazek wyświetla się w swoim pierwotnym rozmiarze, a to nie jest cel, bo chcemy mieć miniaturę. A ostatnia odpowiedź, <img src="rysunek.png" style="width: 25px; height:25px;"> ustala jednakowe wymiary, przez co wychodzi kwadratowa miniaturka, co nie zgadza się z oryginalnymi proporcjami. Generalnie, niepoprawne odpowiedzi mogą wynikać z braku zrozumienia, dlaczego dbanie o proporcje w grafikach jest takie ważne. To kluczowe zagadnienie w projektowaniu stron, bo dobre proporcje to podstawa estetyki i funkcjonalności wizualnych elementów na stronie.

Pytanie 36

Po wykonaniu fragmentu kodu HTML i JavaScript na stronie będzie wyświetlony obraz z pliku

<img id="obraz" src="kol1.jpg">
<button id="przycisk">Przycisk</button>

<script>
    document.getElementById("obraz").src = "kol2.jpg";
</script>

A. kol1.jpg, który może być zmieniony na kol2.jpg po wciśnięciu przycisku.

B. kol2.jpg, który może być zmieniony na kol1.jpg po wciśnięciu przycisku.

C. kol2.jpg

D. kol1.jpg

Dobra robota, zgadłeś! W tym skrypcie JavaScript używamy metody getElementById, żeby znaleźć obraz na stronie o identyfikatorze 'obraz'. Później zmieniamy jego atrybut 'src' na 'kol2.jpg'. To znaczy, że po uruchomieniu tego kodu wyświetli się właśnie ten obrazek. Fajnie jest to zrozumieć, bo pokazuje, jak można dynamicznie zmieniać rzeczy na stronie za pomocą JavaScript. Takie umiejętności są super ważne, gdy tworzymy interaktywne strony, które reagują na to, co robi użytkownik. Na przykład, można by zmienić obraz, gdy ktoś najedzie na niego myszką albo kliknie przycisk. Pamiętaj też, żeby zawsze pomyśleć o dostępności – jeśli obraz ma jakieś ważne informacje, warto dodać alternatywne opisy dla osób korzystających z czytników ekranu.

Pytanie 37

Użycie znacznika <b> do pogrubienia tekstu może być również osiągnięte poprzez zastosowanie reguły CSS

A. text-size

B. font-size

C. text-weight

D. font-weight

Właściwość CSS 'font-weight' to naprawdę ważne narzędzie, które pozwala nam kontrolować grubość tekstu na stronie. Dzięki niemu możemy nie tylko pogrubić tekst, ale też ustawić różne inne wartości, jak 'normal', 'bold', 'bolder' oraz liczby od 100 do 900. To daje nam fajne możliwości w zakresie typografii. Na przykład, jak użyjesz zapisu CSS 'p { font-weight: bold; }', to wszystkie akapity na stronie będą się wyświetlały pogrubioną czcionką. Dobrze jest pamiętać, że korzystanie z 'font-weight' jest zgodne z najlepszymi praktykami, bo odseparowuje treść od stylizacji. Moim zdaniem dobrze jest ograniczać użycie znaczników HTML, takich jak <b>, do sytuacji, kiedy zależy nam na podkreśleniu ważności jakiejś treści. Projektując strony, musimy myśleć też o tym, jak strony będą odbierane przez użytkowników i jak będą dostępne. Dobre style mogą bardzo poprawić czytelność tekstu.

Pytanie 38

Element <meta charset="utf-8"> definiuje metadane odnoszące się do strony internetowej dotyczące

A. opisu witryny

B. kodowania znaków

C. języka używanego na stronie

D. słów kluczowych

Element <meta charset="utf-8"> jest kluczowym składnikiem metadanych w dokumentach HTML, który określa sposób kodowania znaków używanych na stronie internetowej. Użycie kodowania UTF-8, które jest najczęściej stosowanym standardem, pozwala na wyświetlanie różnorodnych znaków z różnych języków, w tym znaków diakrytycznych. Dzięki temu, strony internetowe mogą być dostępne dla szerokiego grona użytkowników bez obaw o błędy związane z wyświetlaniem tekstu. Kiedy przeglądarka internetowa napotyka ten element, wie, że powinna interpretować zawartość dokumentu zgodnie z określonym kodowaniem. Jest to szczególnie ważne w kontekście globalizacji internetu, gdzie treści mogą być tworzone w wielu językach. Ustalając odpowiednie kodowanie, programiści minimalizują ryzyko wystąpienia problemów z wyświetlaniem, takich jak zamienione znaki czy nieczytelne fragmenty tekstu. Właściwe ustawienie metadanych jest zgodne z wytycznymi W3C oraz zaleceniami dla twórców stron internetowych, co czyni ten element niezbędnym w każdej współczesnej witrynie.

Pytanie 39

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

A. #FF00FF

B. #FFFF00

C. #00FFFF

D. #F0F0F0

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

Pytanie 40

Jaką właściwość należy zastosować w stylu CSS, aby określić krój czcionki?

A. text-style

B. text-family

C. font-family

D. font-style

Odpowiedź 'font-family' jest poprawna, ponieważ w CSS to właśnie ta właściwość służy do określenia rodziny czcionek, które mają być używane w danym elemencie. Właściwość 'font-family' pozwala na zdefiniowanie podstawowych czcionek, a także alternatywnych, które mogą być użyte, jeśli preferowana czcionka nie jest dostępna. Przykładowo, zapisywanie: `font-family: Arial, sans-serif;` wskazuje, że przeglądarka powinna używać czcionki Arial, a w przypadku jej braku - czcionki z rodziny sans-serif. To podejście jest szczególnie ważne w kontekście tworzenia responsywnych i dostępnych interfejsów użytkownika, gdzie różne urządzenia mogą obsługiwać różne czcionki. Dodatkowo, zgodnie z wytycznymi W3C i zasadami projektowania, zaleca się określanie co najmniej dwóch czcionek: głównej i alternatywnej, aby zapewnić odpowiednią estetykę i czytelność tekstu. Znajomość właściwości 'font-family' jest kluczowa dla każdego, kto zajmuje się projektowaniem stron internetowych, pozwalając na lepsze dostosowanie wyglądu i funkcjonalności serwisów oraz aplikacji webowych.

Rozpocznij nowy egzamin

Powrót do strony głównej