Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 9 grudnia 2025 13:28
Data zakończenia: 9 grudnia 2025 13:34

Egzamin zdany!

Wynik: 29/40 punktów (72,5%)

Wymagane minimum: 20 punktów (50%)

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Zdefiniowany styl CSS spowoduje, że nagłówki pierwszego poziomu będą

A. wyjustowane, pisane wielkimi literami, a odstępy między liniami ustalone na 10 px

B. wyjustowane, pisane małymi literami, a odstępy między literami ustalone na 10 px

C. wyśrodkowane, pisane małymi literami, a odstępy między liniami ustalone na 10 px

D. wyśrodkowane, pisane wielkimi literami, a odstępy między literami ustalone na 10 px

Odpowiedź jest prawidłowa, ponieważ reguły CSS wyrażone w stylu są poprawnie zinterpretowane w kontekście podanej definicji. Wartość text-align: center oznacza, że tekst wewnątrz elementu h1 będzie wyśrodkowany. Centrum tekstu jest powszechnie stosowane w projektowaniu stron internetowych w celu zwiększenia czytelności i estetyki nagłówków co jest korzystne w wizualnym uporządkowaniu treści. Wartość text-transform: uppercase przekształca wszystkie litery w sekcji na wielkie litery co jest pomocne w przypadku nagłówków gdzie wyróżnienie jest kluczowe i potęguje efekt wizualny. Stosowanie wielkich liter w nagłówkach jest klasycznym podejściem w projektowaniu ponieważ przyciąga uwagę użytkownika. Dodatkowo letter-spacing: 10px zwiększa odstępy między literami co poprawia ich czytelność zwłaszcza w dużych formatach tekstu. Zastosowanie takich właściwości jest zgodne z dobrymi praktykami projektowymi które dążą do optymalizacji wizualnej i funkcjonalnej stron internetowych co jest kluczowe dla pozytywnego doświadczenia użytkownika

Pytanie 2

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

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

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

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

D. Fragment pliku formatowanie.css: body {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 3

W języku HTML, aby połączyć w pionie dwie sąsiadujące komórki w kolumnie tabeli, należy użyć atrybutu

A. cellpadding

B. rowspan

C. colspan

D. cellspacing

Atrybut rowspan w języku HTML jest kluczowy do scalania komórek tabeli w pionie, co oznacza, że pozwala na połączenie dwóch lub więcej komórek w jednej kolumnie w jedną, większą komórkę. Dzięki temu, można uzyskać bardziej przejrzysty i zorganizowany układ informacji w tabelach, zwłaszcza w przypadku danych, które są ze sobą powiązane. Na przykład, jeśli mamy tabelę, w której jeden z wierszy odnosi się do tytułu kategorii, a poniżej znajdują się różne elementy tej kategorii, użycie atrybutu rowspan w pierwszej komórce umożliwi jej rozszerzenie na kilka wierszy, co wizualnie połączy te dane. Standard HTML5 definiuje atrybut rowspan jako atrybut, który przyjmuje wartość liczbową, określającą liczbę wierszy, które mają zostać scalone. Przykładowy kod HTML mógłby wyglądać następująco: <table><tr><td rowspan='3'>Kategoria</td><td>Element 1</td></tr><tr><td>Element 2</td></tr><tr><td>Element 3</td></tr></table>, co w efekcie tworzy jedną komórkę o wysokości trzech wierszy oraz trzy osobne komórki w drugiej kolumnie. Użycie rowspan w praktyce jest nie tylko estetyczne, ale również poprawia czytelność danych, co jest niezmiernie ważne w interfejsach użytkownika.

Pytanie 4

Funkcja colspan umożliwia łączenie komórek tabeli w układzie poziomym, natomiast rowspan w układzie pionowym. Która z poniższych tabel odpowiada fragmentowi kodu w języku HTML?

A. Odpowiedź C

B. Odpowiedź B

C. Odpowiedź A

D. Odpowiedź D

Rozumienie działania atrybutów rowspan i colspan jest kluczowe dla prawidłowego tworzenia struktur tabelarycznych w HTML. Błędne odpowiedzi wynikają często z nieporozumienia dotyczącego sposobu, w jaki te atrybuty kształtują układ tabeli. Rowspan, jak sama nazwa wskazuje, łączy komórki w pionie, czyli wzdłuż kolumny, co może być źródłem zamieszania dla osób przyzwyczajonych do myślenia bardziej w kategoriach kolumn niż wierszy. Przy błędnym przypisaniu rowspan można oczekiwać komórek rozciągających się w poziomie, co jest funkcją colspan. Typowym błędem jest także założenie, że rowspan i colspan są zamienne, podczas gdy w rzeczywistości służą do różnych celów i mają różne zastosowania. Ważne jest, aby rozumieć, że rowspan zwiększa wysokość komórki poprzez zajęcie miejsca w kolejnych wierszach, co jest istotne przy projektowaniu układów tabel, które muszą być zarówno funkcjonalne, jak i estetycznie poprawne. Prawidłowe użycie rowspan i colspan zgodnie z zasadami semantyki HTML zwiększa dostępność i użyteczność stron, co jest zgodne z najlepszymi praktykami w branży.

Pytanie 5

Które z pól edycyjnych zostało przedstawione w opisanym stylu, zakładając, że pozostałe atrybuty pola mają wartości domyślne, a użytkownik wpisał imię Krzysztof w przeglądarce?

A. Pole 3

B. Pole 1

C. Pole 2

D. Pole 4

Jak popatrzysz na różne opcje, to widać, że tylko Pole 2 jest zgodne z tym, co ustalasz w CSS. Pole 1, choć podobne wizualnie, ma problem – brakuje mu zaokrągleń krawędzi, co pokazuje, że border-radius 7px nie zostało zastosowane. A Pole 3? Ma krawędzie zaokrąglone, ale padding jest za mały, przez co tekst prawie dotyka krawędzi – to na pewno nie jest to, co powinno być. Pole 4 z kolei wygląda na prostokąt, a zaokrąglenie nie jest wystarczające. Zwracaj uwagę na takie detale jak padding czy border-radius, bo one naprawdę są istotne! Bez takiego ogarnięcia ciężko osiągnąć dobry wygląd. Rozumienie tych elementów to klucz do robienia fajnych rzeczy z CSS. I pamiętaj o kontraście kolorów, bo bez tego teksty mogą być trudne do przeczytania. Te wszystkie zabiegi pomagają stworzyć przyjazne aplikacje, które dobrze współpracują z użytkownikami.

Pytanie 6

Które z wymienionych par znaczników HTML mają identyczny efekt wizualny na stronie internetowej, jeśli nie zastosowano żadnych stylów CSS?

A. <b> i <strong>

B. <p> oraz <h2>

C. <meta> oraz <title>

D. <b> i <big>

Odpowiedź <b> i <strong> jest poprawna, ponieważ oba znaczniki służą do wyróżniania tekstu, przy czym nie mają one różnicy w wizualizacji, jeśli nie zastosowano żadnych stylów CSS. Z punktu widzenia semantyki HTML, <strong> jest znacznikiem, który wyraża większe znaczenie dla zawartego w nim tekstu, co jest korzystne dla dostępności oraz SEO, ale wizualnie, bez dodatkowych stylów, obie etykiety wykazują te same cechy. Przykładowo, można ich używać w sytuacjach, gdy chcemy wyróżnić ważne informacje w artykule lub nagłówku. Zastosowanie tych znaczników zgodnie z dobrymi praktykami HTML pozwala na lepsze zrozumienie struktury strony przez wyszukiwarki oraz czytniki ekranu, co ma znaczenie w kontekście dostępności. W związku z tym, wyróżnianie tekstu za pomocą <b> i <strong> jest nie tylko estetyczne, ale także funkcjonalne, wspierając zarówno użytkowników, jak i algorytmy wyszukiwania.

Pytanie 7

Jakie polecenie w CSS wykorzystuje się do dołączenia zewnętrznego arkusza stylów?

A. open

B. include

C. import

D. require

W CSS, polecenie 'import' jest używane do załączenia zewnętrznego arkusza stylów. Pozwala na włączenie jednego arkusza CSS do innego, co umożliwia modularność i lepszą organizację stylów w projektach. Składnia polecenia 'import' jest następująca: @import url('ścieżka/do/arkusza.css');. Umożliwia to dynamiczne ładowanie stylów, co jest szczególnie przydatne w dużych projektach, gdzie może być konieczne podzielenie stylów na mniejsze, bardziej zarządzalne pliki. Warto również pamiętać, że polecenie powinno znajdować się na początku arkusza CSS, przed jakimikolwiek innymi regułami, aby mogło być prawidłowo przetworzone przez przeglądarki. Zgodnie z normami W3C, 'import' jest uznawane za standardową metodę organizacji stylów, jednak nadmierne jego użycie może wpłynąć na wydajność, ponieważ może prowadzić do zwiększenia liczby zapytań HTTP. W praktyce, najlepszym podejściem jest ograniczenie użycia 'import' do sytuacji, w których jest to rzeczywiście konieczne, a w miarę możliwości korzystanie z bezpośrednich linków do arkuszy stylów w sekcji <head> dokumentu HTML.

Pytanie 8

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

A. animowaniu obiektu.

B. geometrycznym transformowaniu obiektu.

C. zmianie warstwy obiektu.

D. narysowaniu docelowego obiektu.

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

Pytanie 9

Fragment dokumentu HTML sugeruje, że

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

A. kod HTML zapisano w wersji 4 języka.

B. kod HTML zapisano w wersji 5 języka.

C. wszystkie znaczniki w kodzie HTML powinny być zapisywane wielkimi literami.

D. znaczniki końcowe są wymagane w kodzie HTML, także dla znaczników samozamykających się.

Deklaracja DOCTYPE wskazuje na to że dokument HTML wykorzystuje standard HTML 4.01 w trybie ścisłym. HTML 4.01 jest jedną z wersji języka HTML wprowadzoną przez World Wide Web Consortium w 1999 roku i zawiera trzy warianty: Strict Transitional i Frameset. Tryb Strict oznacza ścisłe przestrzeganie zasad standardu bez użycia przestarzałych elementów i atrybutów takich jak tagi związane z formatowaniem stron które stały się przestarzałe w miarę rozwoju kaskadowych arkuszy stylów CSS. W kontekście praktycznym oznacza to że projektując stronę zgodną z tą specyfikacją należy unikać znaczników odpowiedzialnych za prezentację które były powszechnie stosowane w poprzednich wersjach HTML. Zamiast tego zaleca się korzystanie z CSS do określania wyglądu strony co nie tylko wspiera separację struktury treści od jej wyglądu ale także ułatwia przenoszenie i aktualizację stylów. Używając deklaracji DOCTYPE HTML 4.01 Strict można zapewnić lepszą zgodność z najnowszymi wersjami przeglądarek oraz ułatwić przyszłe aktualizacje kodu do nowoczesnych standardów takich jak HTML5 który wprowadza dodatkowe funkcjonalności i uproszczenia mające na celu poprawę semantyki i użyteczności stron WWW

Pytanie 10

Aby uzyskać płynne przejścia obrazów w filmie, liczba klatek (niewchodzących w interakcję ze sobą) na sekundę powinna znajdować się w co najmniej takim zakresie

A. 24 - 30 fps

B. 20 - 23 fps

C. 31 - 36 fps

D. 16 - 19 fps

Odpowiedź 24 - 30 fps jest prawidłowa, ponieważ to właśnie w tym zakresie klatek na sekundę (fps) uzyskuje się płynność ruchu, która jest akceptowana w większości produkcji filmowych i telewizyjnych. Standard 24 fps jest powszechnie stosowany w kinematografii, ponieważ pozwala na naturalne odwzorowanie ruchu, a także jest zgodny z technologią filmową. W praktyce, filmy kręcone w tym standardzie mają charakterystyczną estetykę, która jest ceniona przez widzów. Dodatkowo, przy 30 fps można uzyskać płynniejsze efekty w produkcjach telewizyjnych, szczególnie w transmisjach na żywo i sportowych, gdzie dynamika ruchu jest kluczowa. Utrzymanie liczby klatek w tym zakresie zmniejsza ryzyko efektów stroboskopowych, które mogą wystąpić przy niższych liczbach klatek. Warto również dodać, że nowoczesne technologie filmowe i animacyjne często korzystają z wyższych wartości fps, jednak standardowe ramy dla klasycznych produkcji pozostają w tym zakresie, co czyni je uniwersalnym punktem odniesienia dla twórców.

Pytanie 11

W HTML zdefiniowano hiperłącze zawierające znak #. Co się wydarzy po kliknięciu na ten odsyłacz?

<a href="#dane"></a>

A. Uruchomi się skrypt o nazwie dane

B. Strona przewinie się do elementu o id równym dane

C. Zostanie wskazany względny adres URL o nazwie dane

D. Otworzy się nowa karta przeglądarki o nazwie dane

W HTML znacznik <a> to taki element, który tworzy hiperłącza. Dzięki nim możesz przeskakiwać po stronie lub między różnymi stronami. Atrybut href wskazuje, dokąd prowadzi to łącze. Jak widzisz, gdy href zaczyna się od #, to znaczy, że przeniesie Cię do konkretnego miejsca na tej samej stronie, które jest oznaczone atrybutem id. Czyli, jeśli masz href="#dane", to strona przewinie się do elementu z id="dane". To bardzo przydatna rzecz, szczególnie na długich stronach, bo zamiast przewijać wszystko, możesz od razu trafić do odpowiedniej sekcji. To zgodne z tymi sztywnymi zasadami W3C, które mówią o tym, że strony powinny być łatwe w obsłudze. Powinieneś też pamiętać, żeby zawsze sprawdzać, czy id, do którego się odnosisz, istnieje. Dzięki temu unikniesz problemów z nawigacją.

Pytanie 12

W kaskadowych arkuszach stylów do oznaczenia selektora klasy wykorzystuje się symbol

A. . (kropka)

B. #

C. *

D. : (dwukropek)

Odpowiedź . (kropka) jest prawidłowa, ponieważ w kaskadowych arkuszach stylów (CSS) selektor klasy definiuje się poprzez użycie symbolu kropki przed nazwą klasy. Przykład: jeśli mamy klasę o nazwie 'przyklad', to w CSS zapisujemy selektor jako '.przyklad'. Taki selektor pozwala na stosowanie określonych stylów do wszystkich elementów HTML, które zawierają tę klasę. Dobrą praktyką jest używanie klas do grupowania elementów, co ułatwia zarządzanie stylami oraz zwiększa czytelność kodu. Na przykład, możemy zdefiniować wspólny wygląd dla przycisków: .przycisk { background-color: blue; color: white; }. Ponadto, korzystanie z klas zamiast identyfikatorów (które definiuje się przez symbol #) pozwala na wielokrotne stosowanie jednego stylu w różnych miejscach dokumentu. Klasy są bardziej elastyczne i umożliwiają lepszą organizację kodu, co jest zgodne z zasadami DRY (Don't Repeat Yourself) w programowaniu.

Pytanie 13

W ramce przedstawiono właściwości pliku graficznego:

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

W celu optymalizacji czasu ładowania rysunku na stronę WWW należy:

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

B. zmniejszyć wymiary rysunku.

C. zwiększyć rozdzielczość.

D. zmienić format grafiki na CDR.

Odpowiedź jest poprawna. Czas ładowania obrazu na stronę WWW jest w dużej mierze zależny od jego rozmiaru. Zasada jest prosta: im mniejszy rozmiar pliku, tym szybciej zostanie załadowany. Zmniejszenie wymiarów rysunku prowadzi do zmniejszenia rozmiaru pliku, co optymalizuje czas ładowania. W praktyce, oznacza to, że jeżeli masz obraz o wymiarach 2000x2000 pikseli, a na stronie prezentowany jest w wymiarach 500x500 pikseli, to wartość ta jest zdecydowanie za duża i może spowalniać ładowanie strony. Dobrą praktyką jest dostosowanie rozmiaru obrazu do rozmiaru, w jakim ma być wyświetlany na stronie. Warto jednak pamiętać, że zmniejszanie rozmiaru obrazu może wpływać na jego jakość, dlatego ważne jest znalezienie odpowiedniego balansu pomiędzy czasem ładowania a jakością prezentowanego rysunku.

Pytanie 14

Przedstawiono efekt formatowania CSS oraz kod HTML. Jak należy zdefiniować styl, aby osiągnąć takie formatowanie?

<p>
Mimozami jesień się zaczyna,<br>
Złotawa, krucha i miła.<br>
To ty, to ty jesteś ta dziewczyna,<br>
Która do mnie na ulicę wychodziła.
</p>

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

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

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

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

Gratulacje! Wybrałeś prawidłową odpowiedź. Pseudoelement ::first-line jest specyficznym selektorem CSS służącym do formatowania pierwszej linii wewnątrz bloku tekstu. Jest to zgodne ze standardami CSS3. Wszystkie style zdefiniowane za pomocą ::first-line będą miały wpływ tylko na pierwszą linię paragrafu, niezależnie od tego, ile zdań zawiera. W tym konkretnym przypadku, zastosowanie selektora `p::first-line` powoduje powiększenie czcionki do 200% oraz zmianę jej koloru na brązowy, ale tylko dla pierwszej linii tekstu zawartego w paragrafie (znacznik `<p>`). Jest to przydatne, gdy chcemy wyróżnić pierwszą linię tekstu, na przykład w dużej ilości tekstu lub artykułach. Pseudoelementy, takie jak ::first-line, pomagają w tworzeniu bardziej złożonych i precyzyjnych stylów bez konieczności dodawania dodatkowych znaczników do naszego kodu HTML.

Pytanie 15

Podaj definicję metody, którą trzeba umieścić w miejscu kropek, aby na stronie WWW pojawił się tekst: Jan Kowalski

A. A

B. B

C. C

D. D

Pozostałe odpowiedzi zawierają błędy związane z niepoprawnym użyciem kontekstu this lub niekompletną definicją funkcji. W opcji B metoda dane została zdefiniowana jako funkcja globalna, co powoduje, że this nie odnosi się do obiektu osoba, ale do obiektu globalnego, co uniemożliwia poprawne odwołanie się do właściwości imie i nazwisko. To prowadzi do błędnych lub niezdefiniowanych wyników, ponieważ this w tym kontekście nie zawiera oczekiwanych właściwości. Opcja C nie używa słowa kluczowego this, co oznacza, że zmienne imie i nazwisko są traktowane jako zmienne globalne, a nie właściwości obiektu osoba. Jeżeli takie zmienne globalne nie istnieją, powoduje to błąd w wykonaniu, ponieważ kod próbuje odwołać się do niezdefiniowanych zmiennych. W opcji D użycie funkcji bez return powoduje, że metoda dane nie zwraca żadnej wartości, co skutkuje przypisaniem undefined do innerHTML, co jest oczywistym błędem w kontekście oczekiwanego wyświetlenia tekstu. Wszystkie te błędne podejścia wynikają z niepoprawnego zarządzania kontekstem obiektowym w JavaScript, co podkreśla znaczenie zrozumienia wiązania dynamicznego słowa kluczowego this i dobrych praktyk w projektowaniu metod obiektowych w JavaScript. Kluczowym aspektem jest zapewnienie, że metody mają dostęp do właściwości obiektu, w ramach którego zostały zdefiniowane, co jest osiągane przez poprawne użycie this w kontekście metody wewnętrznej obiektu.

Pytanie 16

W języku JavaScript funkcja getElementById odnosi się do

A. zmiennej numerycznej

B. elementu HTML z podanym id

C. elementu HTML z określoną nazwą klasy

D. klasy zdefiniowanej w CSS

Metoda getElementById w języku JavaScript jest kluczowym narzędziem do manipulacji DOM (Document Object Model), które pozwala deweloperom na łatwe odwoływanie się do konkretnych elementów HTML za pomocą ich atrybutu id. Dzięki temu, możemy dynamicznie zmieniać treść, style lub atrybuty tych elementów, co jest niezwykle przydatne w tworzeniu interaktywnych stron internetowych. Na przykład, jeśli mamy element HTML z atrybutem id='header', możemy użyć `document.getElementById('header')` do uzyskania do niego dostępu. To podejście jest zgodne z zasadami poprawnej struktury HTML, gdzie atrybut id powinien być unikalny w obrębie dokumentu. Rekomendowane jest, aby id było zrozumiałe i jasno określało zawartość elementu, co ułatwia późniejszą nawigację i skrypty, a także poprawia dostępność strony. W praktyce, korzystając z getElementById, możemy na przykład zmieniać tekst nagłówka: `document.getElementById('header').innerText = 'Nowy nagłówek';`.

Pytanie 17

W HTML znacznik <i> powoduje uzyskanie takiego samego efektu wizualnego jak znacznik

A. <u>

B. <em>

C. <pre>

D. <strong>

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

Pytanie 18

Aby film wyglądał płynnie, liczba klatek (które nie nakładają się na siebie) na sekundę powinna wynosić przynajmniej w przedziale

A. 24-30 fps

B. 20-23 fps

C. 31-36 fps

D. 16-19 fps

Odpowiedź 24-30 fps jest poprawna, ponieważ standardowy zakres klatek na sekundę dla filmów wynosi właśnie 24-30 fps. W praktyce, 24 fps jest uznawane za minimum dla filmów kinowych, co pozwala uzyskać wrażenie ruchu, które ludzie uznają za płynne. Przykładowo, filmy kręcone w tej klatkażu, takie jak klasyczne produkcje Hollywood, często korzystają z techniki zwanej 'motion blur', która dodatkowo poprawia wrażenie płynności. W przypadku telewizji, większa liczba klatek może być stosowana, co pozwala na lepszą jakość obrazu podczas szybkich ruchów, jednak 30 fps to standard dla wielu programów telewizyjnych. Ważne jest również zrozumienie, że zbyt niska liczba klatek, jak na przykład 16-19 fps, może prowadzić do efektu stroboskopowego, co jest nieprzyjemne dla widza. Normy branżowe, takie jak SMPTE (Society of Motion Picture and Television Engineers), potwierdzają, że liczba klatek między 24 a 30 fps jest odpowiednia do uzyskania zamierzonego efektu wizualnego w filmie.

Pytanie 19

Które z formatowań nie jest wyrażone w języku CSS?

A. Fragment pliku strona.html:

<style>
body { background-color: yellow; }
</style>

B. Fragment pliku formatowanie.css:

body { background-color: yellow; }

C. Fragment pliku strona.html:

<body bgcolor="yellow">

D. Fragment pliku strona.html:

<body style="background-color: yellow;" >

A. D.

B. B.

C. C.

D. A.

Twoja odpowiedź nie była prawidłowa. Pytanie dotyczyło rozróżnienia, które formatowanie nie jest wyrażone w języku CSS. W przypadku CSS, istotne jest zrozumienie, że jest to język wykorzystywany do opisu wyglądu strony internetowej napisanej w HTML. CSS pozwala na zapewnienie spójnego wyglądu dla różnych elementów na stronie, a także na dostosowanie wyglądu do różnych urządzeń i rozmiarów ekranu. Fragment A i fragment B pokazują styl wewnątrz dokumentu HTML oraz styl z zewnętrznego pliku CSS. Oba są prawidłowymi zastosowaniami CSS. W przypadku fragmentu D, mimo że jest to tzw. "inline CSS", który jest stosowany bezpośrednio do elementu HTML, nadal wykorzystuje składnię CSS. Błędem był wybór jednego z tych fragmentów jako odpowiedzi, ponieważ wszystkie wykorzystują CSS. Ostatecznie, jedynie fragment C nie używa CSS. Zamiast tego, używa przestarzałego atrybutu HTML "bgcolor" do określenia koloru tła. Ten atrybut nie jest elementem CSS i jest obecnie uważany za przestarzały. Przy projektowaniu stron internetowych, zaleca się stosowanie CSS zamiast bezpośredniego formatowania HTML, aby zapewnić większą kontrolę nad wyglądem i zachowaniem strony.

Pytanie 20

W HTML atrybut znacznika video, który umożliwia ciągłe odtwarzanie, to

A. muted

B. loop

C. poster

D. controls

Atrybut loop w znaczniku video jest kluczowy dla zapewnienia, że wideo będzie odtwarzane w nieskończoność, co jest szczególnie przydatne w przypadku prezentacji multimedialnych czy tła w aplikacjach webowych. Umożliwia to automatyczne powtarzanie treści bez interwencji użytkownika, co może poprawić doświadczenia użytkownika oraz skuteczność przekazu. Zgodnie z dokumentacją HTML5, aby użyć atrybutu loop, wystarczy dodać go do znacznika video, co pozwala na osiągnięcie zamierzonego efektu. Przykładem może być: <video src='video.mp4' loop autoplay></video>, gdzie wideo będzie się odtwarzać automatycznie i w kółko. Użycie tego atrybutu jest szczególnie istotne w kontekście interaktywnych aplikacji i gier, gdzie ciągłość odtwarzania może być kluczowa dla zaangażowania odbiorcy. Atrybut loop jest częścią specyfikacji W3C dotyczącej HTML5, która promuje dostępność i elastyczność w tworzeniu nowoczesnych aplikacji internetowych.

Pytanie 21

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

<title>Strona o psach</title>

A. Jest fakultatywny w kontekście HTML 5 i nie jest wymagany w dokumencie.

B. Stanowi jedynie informację dla robotów wyszukiwania i nie jest widoczny w przeglądarce.

C. Zostanie umieszczony w treści strony, na samym czubku.

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

Zaznaczenie poprawnej odpowiedzi pokazuje, że to, co jest w znaczniku <title>, pojawia się na karcie w przeglądarce. To naprawdę ważny element HTML, bo informuje użytkowników, o czym jest dana strona. Zgodnie z tym, co mówi W3C, tytuł strony jest kluczowy dla SEO, gdyż wyświetla się w wynikach wyszukiwania i na zakładkach przeglądarek. Fajnie, jak tytuł jest krótki, ma kluczowe słowa, które mówią o zawartości, i przyciąga wzrok. Na przykład, jak zrobisz stronę o psach rasowych, to tytuł <title> w stylu 'Strona o psach - Poradnik dla właścicieli' nie tylko mówi, o czym będzie treść, ale też może sprawić, że lepiej widać ją w wynikach wyszukiwania. Pamiętaj, że zawartość znacznika <title> widać na górze okna przeglądarki, co ułatwia poruszanie się i znajdowanie otwartych kart.

Pytanie 22

W jakiej technologii niemożliwe jest przetwarzanie danych wprowadzanych przez użytkownika na stronie WWW?

A. JavaScript

B. AJAX

C. PHP

D. CSS

CSS, czyli Kaskadowe Arkusze Stylów, jest technologią używaną do stylizacji stron internetowych. Jego głównym celem jest określenie, jak elementy HTML powinny wyglądać, w tym ich wygląd, kolor, rozmiar oraz układ na stronie. CSS nie ma możliwości przetwarzania danych użytkownika, ponieważ działa wyłącznie po stronie klienta i nie posiada funkcji interakcji z danymi użytkowników. Przykładem zastosowania CSS jest nadanie stylu nawigacji w serwisie internetowym, gdzie style mogą być określone w pliku CSS, ale nie mają zdolności do przechwytywania i przetwarzania informacji wprowadzonych przez użytkowników w formularzach. Standardy CSS rozwijane przez World Wide Web Consortium (W3C) podkreślają jego rolę w stylizacji i prezentacji, a nie w logice aplikacji czy przetwarzaniu danych. Użytkownicy mogą korzystać z CSS do tworzenia responsywnych układów, jednak bez zdolności do interakcji z danymi, co czyni go technologią czysto wizualną.

Pytanie 23

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

A. rgb(17, 254, 7)

B. rgb(17, FE, 7)

C. rgb(ll, 127, 7)

D. rgb(17, 255, 7)

Odpowiedzi rgb(ll, 127, 7), rgb(17, 255, 7) i rgb(17, FE, 7) mają błędy, które wynikają z niewłaściwego zrozumienia konwersji szesnastkowych na dziesiętne. W pierwszej odpowiedzi 'll' to w ogóle nie jest poprawna wartość w kontekście kolorów RGB. W systemie RGB musimy używać całkowitych liczb od 0 do 255, a 'll' to żaden numer. W drugiej odpowiedzi, zmiana 'FE' na '255' to błąd, bo 'FE' w szesnastkowym to 254 w dziesiętnym, więc tu jest niezgodność. A w odpowiedzi 'rgb(17, FE, 7)' znowu nie przeliczono 'FE', przez co staje się to nieczytelne i niezgodne ze standardami RGB. Często ludzie mylą różne systemy liczbowe przy konwertowaniu kolorów i to jest zwyczajny błąd. Fajnym pomysłem na naukę jest zabawa z narzędziami do kolorów w programach graficznych, bo to pomaga lepiej zrozumieć te przeliczenia i ogarnąć różnice między systemami liczbowymi.

Pytanie 24

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

A. text-style

B. font-style

C. font-family

D. text-family

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.

Pytanie 25

Strona internetowa powinna mieć zorganizowaną strukturę bloków. Aby osiągnąć ten układ, należy przypisać sekcjom odpowiednie właściwości w ten sposób:

A. float jedynie dla bloków: 3, 4; clear dla bloku 5

B. float tylko dla bloku 2; clear dla bloków: 3, 4

C. float tylko dla bloków: 2, 3, 4; clear dla bloku 5

D. float wyłącznie dla bloku 5; clear dla bloku 2

Odpowiedź czwarta jest prawidłowa, ponieważ użycie właściwości CSS float dla bloków 2, 3 i 4 oraz właściwości clear dla bloku 5 odpowiada oczekiwanemu układowi strony. Float pozwala na ustawienie elementów obok siebie w poziomie. W tym przypadku blok 2, 3 i 4 będą umieszczone w jednej linii dzięki właściwości float: left. Blok 2 będzie zajmował więcej przestrzeni w pionie, co pozwala umieścić bloki 3 i 4 obok siebie. Blok 5 powinien znaleźć się poniżej, więc wymaga zastosowania właściwości clear: both, aby uniknąć zachodzenia na inne elementy pływające. Taki układ jest często stosowany w projektowaniu responsywnych stron internetowych, gdzie float umożliwia elastyczne dostosowanie się elementów do różnych szerokości ekranów. Warto pamiętać, że obecnie często używa się także display: flex lub grid jako nowocześniejszych sposobów układania elementów, jednak float wciąż znajduje zastosowanie w prostych układach. Zrozumienie, jak działa float i clear, jest kluczowe dla tworzenia poprawnych i estetycznych układów bloków na stronie internetowej.

Pytanie 26

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

A. width

B. padding

C. height

D. margin

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

Pytanie 27

W HTML-u, aby połączyć w poziomie dwie sąsiednie komórki w danym wierszu tabeli, należy wykorzystać atrybut

A. colspan

B. rowspan

C. cellpadding

D. cellspacing

Atrybut colspan w języku HTML jest kluczowym narzędziem do scalania komórek w tabeli w poziomie. Umożliwia on połączenie dwóch lub więcej sąsiednich komórek w jednym wierszu, co pozwala na bardziej elastyczne i estetyczne układanie danych. Przykładowo, jeśli mamy tabelę z informacjami o produktach, a jeden z produktów ma długą nazwę, możemy użyć atrybutu colspan, aby ta nazwa zajmowała miejsce w dwóch lub więcej komórkach, co poprawia czytelność tabeli. Dobre praktyki w projektowaniu tabel wskazują, że należy unikać nadmiarowych komórek i skomplikowanych układów, gdyż obniża to przejrzystość danych. Zamiast tego, właściwe użycie atrybutów takich jak colspan pozwala na lepsze zorganizowanie informacji. Warto również pamiętać, że poprawne stosowanie atrybutu colspan powinno być zgodne z ogólnymi zasadami projektowania responsywnego, co oznacza, że tabela powinna dobrze się prezentować na różnych urządzeniach. Dodatkowo, atrybut colspan ma swoje zastosowanie także w kontekście dostępności, gdyż odpowiednie użycie tej funkcji pozwala na lepszą nawigację i zrozumienie struktury tabeli przez osoby korzystające z technologii asystujących.

Pytanie 28

Dokument HTML określa akapit oraz obrazek. Aby obrazek był wyświetlany przez przeglądarkę w tej samej linii co akapit po jego lewej stronie, należy w stylu CSS obrazka uwzględnić właściwość

A. style: left;

B. align: left;

C. float: left;

D. alt: left;

Odpowiedź "float: left;" jest naprawdę trafna. Ta właściwość w CSS sprawia, że elementy układają się obok siebie, co w tym przypadku oznacza, że rysunek wyląduje po lewej stronie akapitu. Jak użyjemy float, to rysunek 'przesuwa się' na lewo, a tekst z akapitu otacza go z prawej strony. To taki popularny sposób w webdesignie, który pozwala na ładniejsze połączenie obrazków z tekstem. Warto pamiętać, że czasem trzeba zastosować clearfix, zwłaszcza gdy mamy pływające elementy w większym układzie, żeby uniknąć problemów z rozmieszczeniem. Stosowanie float w CSS to dobra praktyka, bo pomaga zachować czytelność i estetykę tekstu. Na przykład, jeśli mamy sekcję artykułu z obrazem, który ilustruje omawiany temat, to zastosowanie float: left; sprawi, że treść będzie ładnie się układać i poprawi wrażenia użytkownika.

Pytanie 29

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

A. A

B. B

C. D

D. C

Błędne odpowiedzi są efektem nie do końca właściwego zastosowania CSS w kontekście tego, co pytanie wymagało. Odpowiedź B używa 'letter-spacing: 10px;', co zmienia odstępy między literami, a nie wyrazami, co jest dość istotne w stylizacji. Można się pomylić i myśleć, że to to samo, ale różnią się tym, co robią. Odpowiedź C używa 'line-height: 10px;', ale to też nie spełnia wymagań co do odstępów między wyrazami. Z kolei 'text-transform: none;' to nie to, czego szukasz w tym pytaniu, więc tu też można się pogubić. Odpowiedź D z kolei stosuje 'text-decoration: underline;', a to podkreślenie, a nie nadkreślenie, co też mija się z celem. Ważne, żeby znać te różnice między właściwościami CSS, bo to klucz do skutecznej stylizacji w zgodzie z tym, co projekt wymaga. Dobre użycie CSS nie tylko sprawia, że strona wygląda lepiej, ale też poprawia dostępność i użyteczność.

Pytanie 30

W HTML, aby utworzyć hiperłącze, które otworzy się w nowej karcie przeglądarki, należy użyć atrybutu

A. target = "_blank"

B. rel = "prev"

C. target = "_new"

D. rel = "external"

Atrybut target="_blank" to standard w HTML, który pozwala otwierać linki w nowej karcie przeglądarki. W praktyce jest to bardzo popularne rozwiązanie, bo dzięki temu użytkownik może sobie przeglądać stronę, a jednocześnie otworzyć coś nowego. Działa to tak, że jeśli dodasz ten atrybut do linku, przeglądarka po prostu otworzy go w nowej karcie lub oknie - to już zależy od ustawień. To naprawdę przydaje się, gdy linkujesz do dokumentacji, stron zewnętrznych albo mediów społecznościowych, gdzie chcesz, żeby użytkownik nie musiał zamykać tego, co aktualnie ogląda. Ale uwaga! Trzeba z tym atrybutem uważać i stosować go z głową, bo czasem lepiej dać użytkownikowi wybór, czy chce otworzyć link w nowej karcie, czy nie, żeby nie czuł się zdezorientowany.

Pytanie 31

W formularzu HTML wykorzystano znacznik <input>. Wyświetlane pole będzie przeznaczone do wprowadzania maksymalnie

A. 20 znaków, które są widoczne podczas wpisywania

B. 20 znaków, które nie są widoczne w polu tekstowym

C. 30 znaków, które nie są widoczne w polu tekstowym

D. 30 znaków, które są widoczne podczas wpisywania

Podany znacznik <input> definiuje element formularza HTML typu password. Gdy używasz typu password, wprowadzone znaki są maskowane, zazwyczaj używając symboli takich jak kropki lub gwiazdki, co oznacza, że nie są widoczne podczas wprowadzania. Atrybut maxlength określa maksymalną liczbę znaków, które użytkownik może wprowadzić. W tym przypadku wartość maxlength równa 20 oznacza, że użytkownik może wprowadzić do 20 znaków, nawet jeśli więcej znaków można by zobaczyć w polu dzięki atrybutowi size. Rozdzielając te dwa aspekty, atrybut size określa jedynie widoczną szerokość pola, co w przypadku tego inputu wynosi 30, ale nie wpływa na ilość możliwych do wpisania znaków. Zastosowanie pola password jest powszechne w formularzach logowania, gdzie bezpieczeństwo wprowadzanych danych jest priorytetem. Użycie maxlength pozwala kontrolować długość hasła, co może być częścią strategii zabezpieczeń, eliminując zbyt długie lub zbyt krótkie hasła, które są łatwiejsze do złamania. Takie podejście jest zgodne z najlepszymi praktykami w zakresie bezpieczeństwa aplikacji webowych.

Pytanie 32

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

A. HTML 4.01 Strict

B. HTML 4.01 Transitional

C. HTML 5

D. XHTML 1.1

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

Pytanie 33

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

A. text-weight

B. font-size

C. font-weight

D. text-size

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 34

Gdzie należy umieścić znacznik meta w języku HTML?

A. między znacznikami body

B. w stopce strony internetowej

C. w sekcji nagłówkowej strony internetowej

D. między znacznikami paragrafu

Umieszczanie znaczników meta w stopce witryny, pomiędzy znacznikami paragrafu lub w obrębie body jest niezgodne z zasadami tworzenia struktury HTML i może prowadzić do wielu problemów. Znaczniki meta są przeznaczone do dostarczenia metadanych, które są przetwarzane przez przeglądarki oraz roboty wyszukiwarek. Ich umiejscowienie w stopce uniemożliwia dostęp do tych informacji w momencie ładowania strony, co negatywnie wpływa na SEO i wydajność witryny. Umieszczanie ich pomiędzy znacznikami paragrafu lub body powoduje, że stają się one częścią treści wizualnej, co jest technicznie błędne, ponieważ znaczniki meta nie mają na celu wyświetlania treści, a raczej dostarczania informacji kontekstowych. Warto pamiętać, że poprawne umiejscowienie znaczników meta jest kluczowe dla efektywnego działania strony internetowej. Typowe błędy myślowe, które prowadzą do takich decyzji, często wynikają z braku zrozumienia różnicy między metadanymi a treścią strony. Zrozumienie struktury dokumentu HTML oraz zasad, które ją rządzą, jest fundamentem efektywnego projektowania stron internetowych.

Pytanie 35

W CSS zapis w postaci ```h1::first-letter{color:red;}``` spowoduje, że kolor czerwony będzie dotyczył

A. pierwszej linii akapitu

B. pierwszej litery nagłówka drugiego poziomu

C. tekstów nagłówka pierwszego poziomu

D. pierwszej litery nagłówka pierwszego poziomu

Pierwsza linia paragrafu nie jest poprawną odpowiedzią, ponieważ selektor h1::first-letter odnosi się konkretnie do nagłówków, a nie do paragrafów. W CSS każdy element HTML ma swoje unikalne selektory, a h1 odnosi się do nagłówka pierwszego stopnia. Z kolei tekst nagłówka pierwszego stopnia jest także niepoprawny, gdyż odnosi się do całego tekstu w elemencie h1, a nie tylko do pierwszej litery. Pseudo-element first-letter działa wyłącznie na tej pierwszej literze, a nie na całym nagłówku. Ostatnia odpowiedź, dotycząca pierwszej litery nagłówka drugiego stopnia, jest również błędna, gdyż selektor h1::first-letter nie ma zastosowania do h2, a jedynie do h1. Aby zmienić styl pierwszej litery w nagłówku drugiego stopnia, należałoby użyć selektora h2::first-letter. Różnice te są kluczowe w zrozumieniu jak działają selektory CSS oraz jak przypisane są style do konkretnych elementów w dokumentach HTML.

Pytanie 36

Aby w HTML uzyskać odpowiednie formatowanie paragrafu dla tekstu, tekst może być wyróżniony lub istotny dla autora, należy wykorzystać kod

A. <p>Tekst może być <mark>wyróżniony albo <em>istotny</em> dla autora</mark></p>

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

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

D. <p>Tekst może być <mark>wyróżniony albo <i>istotny</i> dla autora</mark></p>

W analizie niepoprawnych odpowiedzi zauważamy różne problemy związane z używanymi znacznikami i ich organizacją w kodzie HTML. W pierwszym przypadku zastosowano znacznik <em> w niewłaściwy sposób, ponieważ nie zamknięto go przed zakończeniem akapitu <p>, co prowadzi do potencjalnych błędów w renderowaniu strony. W HTML wszystkie znaczniki muszą być poprawnie zagnieżdżone, aby uniknąć problemów z interpretacją przez przeglądarki. Kolejna odpowiedź pokazuje, że znacznik <mark> zajmuje nieodpowiednią pozycję, przez co obie części zdania są ze sobą złączone, co może wprowadzać w błąd i utrudniać zrozumienie treści. Trzeci problem polega na tym, że znacznik <mark> otacza cały tekst, co nie jest zgodne z przeznaczeniem tego znacznika, który powinien jedynie wyróżniać konkretne fragmenty. Użycie <mark> w taki sposób może powodować zniekształcenie sensu zdania. Wszystkie te niewłaściwe praktyki mogą negatywnie wpływać na dostępność, a także na SEO, ponieważ niepoprawne znaczniki mogą prowadzić do nieprawidłowego przetwarzania strony przez roboty wyszukiwarek, co w rezultacie może obniżyć jej pozycję w wynikach wyszukiwania.

Pytanie 37

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

A. dodać kanał alfa

B. obniżyć rozdzielczość obrazu

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

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

Żeby zmienić obrazek z formatu JPEG na PNG i zachować przezroczystość tam, gdzie wcześniej był biały kolor, ważny krok to dodanie kanału alfa. To w zasadzie taka dodatkowa warstwa w obrazie, która mówi, które piksele mają być przezroczyste. JPEG nie umie obsługiwać przezroczystości, więc białe obszary będą się pokazywać jako nieprzezroczyste. Jak już dodasz ten kanał alfa, możesz ustawić przezroczystość dla białych pikseli, co pozwoli na ich ukrycie lub zamianę na przezroczystość w końcowym obrazku. Na przykład, w programach jak Adobe Photoshop można użyć narzędzia do zaznaczania kolorów, żeby wybrać wszystkie białe piksele i potem je usunąć, zostawiając tylko przezroczystość. W ten sposób dostajesz efekt, którego chcesz w obrazie PNG, co jest zgodne z dobrą praktyką w obróbce grafiki i pomaga utrzymać wysoką jakość obrazu bez żadnych strat.

Pytanie 38

Fragment kodu w języku HTML zawarty w ramce ilustruje zestawienie

A. wypunktowaną.

B. numerowaną.

C. odnośników.

D. skrótów.

Znaczniki HTML <ul> i <ol> są często mylone przez początkujących deweloperów co prowadzi do nieporozumień związanych z prezentacją danych. <ul> reprezentuje listę wypunktowaną używaną gdy kolejność elementów nie ma znaczenia a celem jest po prostu grupowanie powiązanych elementów. Z kolei <ol> tworzy listę numerowaną co jest istotne gdy chronologia lub priorytet poszczególnych elementów są kluczowe. Struktura <ol> jest preferowana w dokumentach gdzie ważne jest zachowanie kolejności jak na przykład w instrukcjach krok po kroku lub w raportach podsumowujących. Mylenie tych dwóch znaczników może prowadzić do zamieszania w zrozumieniu prezentacji danych. Kolejną błędną interpretacją jest uznawanie list za odnośniki co jest domeną znacznika <a> używanego do tworzenia hiperłączy między stronami. Jest to kluczowe w nawigacji strony i budowie struktury sieciowej. Z kolei skróty w HTML są reprezentowane za pomocą <abbr> co pomaga w dostarczaniu pełnych form skrótów przy zachowaniu ich kompaktowej postaci w tekście. Poprawne rozróżnianie i stosowanie tych znaczników jest fundamentem dobrych praktyk w projektowaniu stron internetowych zgodnie z zasadami semantyki i dostępności co jest kluczowe dla tworzenia przejrzystych i przyjaznych użytkownikowi interfejsów. Dodatkowo przekłada się to na lepsze wyniki SEO oraz wyższy poziom użyteczności aplikacji webowych który jest coraz częściej oczekiwany na współczesnym rynku IT. Właściwe wykorzystanie semantycznych znaczników wpływa korzystnie na przyszłą konserwację i rozbudowę kodu co jest nieocenione w długoterminowych projektach informatycznych. Poprawne zrozumienie tych różnic jest zatem kluczowe dla każdego kto aspiruje do profesjonalnego tworzenia stron internetowych i aplikacji webowych zgodnie z nowoczesnymi standardami branżowymi.

Pytanie 39

W HTML, aby dodać obrazek z tekstem przylegającym, umiejscowionym na środku obrazka, trzeba użyć znacznika

A. <img src="/obrazek.png" alt="obraz2" align="middle">tekst

B. <img src="/obrazek.png" alt="obraz4">tekst

C. <img src="/obrazek.png" alt="obraz1" hspace="30px">tekst

D. <img src="/obrazek.png" alt="obraz3" height="50%">tekst

Aby wstawić obrazek z tekstem przyległym w HTML, należy skorzystać ze znacznika <img> z atrybutem align ustawionym na 'middle'. Atrybut align jest przestarzały w HTML5, ale nadal może być używany w kontekście tekstów przylegających do obrazków. Ustawiając 'middle', obrazek będzie wyśrodkowany w pionie względem linii tekstu, co pozwala na estetyczne umiejscowienie obrazu w odniesieniu do towarzyszącego mu tekstu. Dobrym przykładem jest zastosowanie <img src='/obrazek.png' alt='obraz2' align='middle'>tekst, co sprawia, że obrazek staje się integralną częścią tekstu, a nie tylko jego dodatkiem. W kontekście standardów, warto zauważyć, że HTML5 zaleca stosowanie CSS do pozycjonowania, dlatego bardziej współczesnym podejściem byłoby użycie stylów CSS, np. 'vertical-align: middle'. Można to osiągnąć poprzez dodanie klasy do obrazka oraz odpowiedniego stylu CSS. Chociaż align jest przestarzały, jego rozumienie jest istotne dla osób przystosowujących starsze strony do nowych standardów.

Pytanie 40

Zakładając, że żadne style CSS nie zostały zdefiniowane, przedstawiony efekt zostanie uzyskany przy pomocy

Tytuł
    Znaczniki języka HTML
Autor
    Ewa Konieczna
Słowa kluczowe
    witryny internetowe, HTML

Kod 1.
<ul>
  <li>Tytuł</li>
  <li>Znaczniki języka HTML</li>
  <li>Autor</li>
  <li>Ewa Konieczna</li>
  <li>Słowa kluczowe</li>
  <li>witryny internetowe, HTML</li>
</ul>

Kod 2.
<dl>
  <dt>Tytuł</dt>
  <dd>Znaczniki języka HTML</dd>
  <dt>Autor</dt>
  <dd>Ewa Konieczna</dd>
  <dt>Słowa kluczowe</dt>
  <dd>witryny internetowe, HTML</dd>
</dl>

Kod 3.
<ol>
  <li>Tytuł</li>
  <dl>Znaczniki języka HTML</dl>
  <li>Autor</li>
  <dl>Ewa Konieczna</dl>
  <li>Słowa kluczowe</li>
  <dl>witryny internetowe, HTML</dl>
</ol>

Kod 4.
<table>
  <tr>Tytuł</tr>
  <td>Znaczniki języka HTML</td>
  <tr>Autor</tr>
  <td>Ewa Konieczna</td>
  <tr>Słowa kluczowe</tr>
  <td>witryny internetowe, HTML</td>
</table>

A. Kodu 3.

B. Kodu 2.

C. Kodu 4.

D. Kodu 1.

Niestety, Twoja odpowiedź nie jest poprawna. Na podstawie analizy załączonego obrazka można stwierdzić, że efekt przedstawiony na zdjęciu zostanie uzyskany przy użyciu 'Kodu 2', który jest kodem HTML definiującym tabelę. Wybierając inne opcje, pomijasz ważną rolę, jaką tabele odgrywają w prezentowaniu informacji w strukturze danych. Tabele HTML są przydatne do prezentowania zestawów danych, które mają związek ze sobą. Za pomocą tabeli można łatwo zorganizować takie dane w czytelny sposób. Zwróć uwagę, że wybór nieodpowiedniego kodu do osiągnięcia określonego efektu może prowadzić do niepotrzebnych komplikacji, takich jak trudności w utrzymaniu kodu, problemów z dostępnością i nieprawidłowego wyświetlania na różnych urządzeniach czy przeglądarkach. Pamiętaj, że ważne jest zrozumienie podstawowych koncepcji HTML i CSS, aby być w stanie tworzyć efektywne i dostępne strony internetowe.

Rozpocznij nowy egzamin

Powrót do strony głównej