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: 12 maja 2026 14:09
Data zakończenia: 12 maja 2026 14:09

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

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

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

A. zmniejszyć wymiary rysunku

B. zwiększyć rozdzielczość

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

D. zmienić format grafiki na CDR

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

Pytanie 2

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 keywords="psy, koty, gryzonie">

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

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

Pierwsza z niepoprawnych odpowiedzi, <meta keywords="psy, koty, gryzonie">, jest błędna z powodu braku atrybutu 'name'. W standardzie HTML każdy element <meta> powinien zawierać atrybut 'name' lub 'property', który określa, jakiego rodzaju metadane są dostarczane. Pominięcie tego atrybutu sprawia, że przeglądarki mogą nieprawidłowo interpretować ten element, co negatywnie wpływa na SEO strony. Druga odpowiedź, <meta name="keywords" = "psy, koty, gryzonie">, zawiera błędną składnię. Równanie atrybutu w HTML powinno być zapisane z wykorzystaniem znaku ' ', a nie '='. Poprawny zapis powinien wyglądać: <meta name="keywords" content="psy, koty, gryzonie">. Błąd ten jest częstym źródłem problemów w kodzie HTML, prowadzącym do niezrozumienia przez przeglądarki, co może skutkować ignorowaniem tego elementu przez algorytmy wyszukiwarek. Ostatnia odpowiedź, <meta name="description" content="psy, koty, gryzonie">, jest niepoprawna, ponieważ nie dotyczy słów kluczowych, lecz opisu strony. Chociaż atrybut 'description' również jest istotny i wpływa na SEO, to jego zastosowanie w tym kontekście nie odpowiada na pytanie o definicję słów kluczowych. Poprawne użycie metadanych polega na precyzyjnym dobraniu atrybutów do ich funkcji, co jest kluczowe dla efektywnej optymalizacji strony.

Pytanie 3

Zastosowana w dokumencie HTML definicja multimediów sprawi, że na stronie

<video controls>
    <source src="video1.mp4" type="video/mp4">
    <source src="video1.ogg" type="video/ogg">
    Komunikat dotyczący video
</video>

A. pod wyświetlanym filmem zostanie wyświetlony napis "Komunikat dotyczący video".

B. zostanie wyświetlony film z pliku video1.mp4 lub w przypadku nierozpoznania formatu MPEG-4 – video1.ogg.

C. wyświetlony film zostanie automatycznie uruchomiony zaraz po załadowaniu strony internetowej.

D. zostaną wyświetlone obok siebie dwa filmy z plików: video1.mp4 oraz video1.ogg.

Niestety, twoja odpowiedź nie jest prawidłowa. Kod HTML, który analizowaliśmy, nie sugeruje, że pod wyświetlanym filmem zostanie wyświetlony napis 'Komunikat dotyczący video' ani że zostaną wyświetlone obok siebie dwa filmy. Takie zachowanie strony wymagałoby dodatkowego kodu HTML i CSS. Także automatyczne uruchomienie filmu po załadowaniu strony nie jest domyślnym zachowaniem elementu video. Warto zauważyć, że takie automatyczne odtwarzanie może być uciążliwe dla użytkowników i jest często uważane za niezgodne z dobrymi praktykami projektowania stron internetowych. Również, aby film automatycznie się odtwarzał, w elemencie video powinien być umieszczony atrybut 'autoplay'. Zrozumienie, jak działa element video HTML i jakie ma atrybuty, jest kluczowe do tworzenia efektywnych i użytecznych stron internetowych.

Pytanie 4

Która z czynności NIE WPŁYNIE na wielkość zajmowanej pamięci pliku graficznego?

A. Interpolacja

B. Skalowanie obrazu przy użyciu atrybutów HTML

C. Kompresja

D. Zmiana rozdzielczości obrazu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Skalowanie obrazu za pomocą atrybutów HTML nie wpływa na rozmiar pliku graficznego, ponieważ ta operacja odbywa się po stronie klienta, w przeglądarce, a nie na samym pliku. Gdy obraz jest wyświetlany w HTML, atrybuty takie jak 'width' i 'height' mogą zmienić jego wizualny rozmiar na stronie, ale nie modyfikują samego pliku. W praktyce oznacza to, że niezależnie od tego, jak duży lub mały wyświetlany jest obraz, jego rzeczywisty rozmiar na dysku pozostaje niezmieniony. Dobrą praktyką w web designie jest stosowanie odpowiednich rozmiarów i formatów obrazów w zależności od kontekstu, co może poprawić szybkość ładowania strony i doświadczenie użytkownika. Warto również pamiętać, że zbyt duże obrazy mogą powodować dłuższy czas ładowania, co wpływa na SEO i oceny wydajności witryny. Dlatego zaleca się optymalizację obrazów przed ich dodaniem do strony, co jest bardziej efektywne niż poleganie na zmianie rozmiarów przez HTML.

Pytanie 5

Strona internetowa została napisana w języku XHTML. Który z poniższych kodów przedstawia implementację zamieszczonego fragmentu strony, przy założeniu, że nie zdefiniowano żadnych stylów CSS?

A. <h1>Początki HTML</h1><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył<b>prototyp hipertekstowego systemu informacyjnego - <i>ENQUIRE</i></b></p>

B. <h1>Początki HTML</h1><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył<i>prototyp hipertekstowego systemu informacyjnego - <b>ENQUIRE</b></i></p>

C. <b>Początki HTML</b><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył<b>prototyp hipertekstowego systemu informacyjnego - <i>ENQUIRE</i></b></p>

D. <b>Początki HTML</b><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<hr /> stworzył<b>prototyp hipertekstowego systemu informacyjnego - <i>ENQUIRE</i></b></p>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź druga jest prawidłowa, ponieważ w XHTML stosowanie znaczników zgodnych z HTML jest kluczowe. Nagłówek <h1> wskazuje na najbardziej wyróżniający się element na stronie, co jest zgodne z prezentowanym obrazem, gdzie 'Początki HTML' jest nagłówkiem. XHTML wymaga, by wszystkie elementy były poprawnie zagnieżdżone i zamknięte, a tag <br /> jest poprawnie użyty jako samo zamykający się, co jest wymagane w XHTML. Ponadto, struktura dokumentu XHTML musi być bardziej restrykcyjna, co oznacza, że używanie semantycznych znaczników jak <h1> dla nagłówków sprzyja lepszej interpretacji struktury dokumentu przez przeglądarki i narzędzia dostępności. Poprawne użycie <b> i <i> do wyróżniania tekstu jest zgodne ze standardami, chociaż w nowoczesnym HTML5 zaleca się używanie <strong> i <em> dla semantycznego formatowania. Takie podejście wspomaga dostępność oraz ułatwia zrozumienie kodu przez inne osoby. Dobór tagów w tej odpowiedzi pokazuje zrozumienie zasad semantyki oraz poprawnej struktury dokumentów w XHTML co jest zgodne z dobrymi praktykami web developmentu.

Pytanie 6

Aby zdefiniować selektor klasy w kaskadowych arkuszach stylów, należy użyć symbolu

A. #

B. *

C. . (kropka)

D. : (dwukropek)

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Selektory klas w CSS są super ważne! Używamy kropki (.) na początku, żeby zdefiniować klasę. To naprawdę ułatwia sprawę, bo można przypisać jeden styl do wielu elementów. Na przykład, jeśli zdefiniujesz klasę .przycisk, to wszystkie elementy, które ją mają, mogą wyglądać tak samo – możesz zmieniać kolory, rozmiary czy inne rzeczy. To świetne, bo dzięki temu kod jest czytelniejszy i łatwiej go ogarnąć. Klasy są bardziej elastyczne niż identyfikatory (#), które są unikalne i można je używać tylko raz w dokumencie. Dlatego, kiedy potrzebujesz, aby kilka elementów miało te same style, lepiej postawić na klasy. A tak w ogóle, użycie kropki dla klas to taki standard w CSS, który pozwala łatwiej ogarniać całą hierarchię stylów na stronie. Po prostu to się sprawdza!

Pytanie 7

Który z obrazków ilustruje efekt działania podanego fragmentu kodu HTML?

A. Obrazek D

B. Obrazek A

C. Obrazek C

D. Obrazek B

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłowa odpowiedź to C ponieważ atrybut rowspan="2" w komórce oznacza że komórka ta zajmuje miejsce w dwóch wierszach. W kodzie HTML mamy tabelę z dwoma wierszami. W pierwszym wierszu znajdują się dwie komórki pierwsza z tekstem 'pierwszy' ma ustawiony rowspan na 2 co sprawia że zajmuje miejsce w obu wierszach tabeli. Druga komórka w pierwszym wierszu zawiera tekst 'drugi'. W drugim wierszu znajduje się jedna komórka z tekstem 'trzeci'. Taki układ powoduje że komórka z 'pierwszy' rozciąga się na wysokość dwóch wierszy a pozostałe komórki 'drugi' i 'trzeci' są obok siebie w pierwszym i drugim wierszu obok tej rozciągniętej komórki. Zastosowanie atrybutu rowspan to popularna technika w tworzeniu złożonych układów tabeli i pozwala na efektywne wykorzystanie przestrzeni układu. Jest to dobra praktyka stosowana w celu zachowania czytelności danych w tabelach na stronach internetowych a także pomagająca w poprawnym renderowaniu danych w czytnikach ekranu co wspiera dostępność strony WWW.

Pytanie 8

Jakie efekt osiągnie się za pomocą przedstawionego formatowania CSS dla nagłówka trzeciego poziomu?

A. kolor tekstu będzie pomarańczowy

B. tło będzie w odcieniu szarym

C. tło będzie pomarańczowe

D. kolor tekstu będzie szary

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź dotycząca tła pomarańczowego wynika z zasady specyficzności CSS W przedstawionym przykładzie stylu dla elementu h3 zastosowano właściwość background-color przypisując jej wartość orange bezpośrednio w znaczniku HTML co zwiększa specyficzność takiego stylu nad stylem zdefiniowanym w sekcji style w nagłówku strony Specyficzność w CSS to mechanizm określający który styl ma pierwszeństwo w przypadku konfliktu stylów dla tego samego elementu Styl wbudowany inline ma wyższą specyficzność niż style określone w sekcjach style co oznacza że definiując background-color inline jako orange nadpisuje on wcześniej zdefiniowane style Dzięki temu można precyzyjnie kontrolować wygląd poszczególnych elementów na stronie co jest dobrą praktyką w przypadku gdy konieczne są jednorazowe zmiany stylu dla konkretnego elementu Warto jednak pamiętać że nadmierne wykorzystywanie stylów inline może prowadzić do trudności w zarządzaniu wyglądem całej strony dlatego dobrą praktyką jest używanie ich oszczędnie oraz stosowanie zewnętrznych arkuszy stylów CSS tam gdzie to możliwe

Pytanie 9

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

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

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Jeśli chodzi o opisanie czcionki w CSS dla akapitu, to kluczowe są trzy właściwości. 'font-family' mówi nam, jaki krój czcionki wybieramy, w tym wypadku 'Arial', bo to popularna czcionka bezszeryfowa. Potem mamy 'font-size', czyli rozmiar czcionki, tutaj to '16pt'. To standardowy rozmiar, który dobrze wygląda w druku. Na końcu, 'font-style' ustawia styl czcionki, a użycie 'italic' sprawia, że tekst będzie w pochyłym stylu. Te trzy rzeczy są super ważne, żeby tekst na stronie wyglądał schludnie i czytelnie. W projektowaniu stron internetowych warto pamiętać, że dla druku lepsze są jednostki takie jak 'pt', a dla ekranów stosujemy 'px'. Spójność w stylizacji też jest kluczowa, bo dzięki temu tekst wygląda jednolicie na całej stronie. To naprawdę ważne, zwłaszcza gdy robimy coś w CSS, bo pozwala to na ładniejszy web design.

Pytanie 10

Jakim znacznikiem można wprowadzić listę numerowaną (uporządkowaną) w dokumencie HTML?

A. <ol>

B. <ul>

C. <li>

D. <dl>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <ol> służy do wstawiania list numerowanych (uporządkowanych) w dokumentach HTML. Jego zastosowanie pozwala na tworzenie list, gdzie każdy element jest automatycznie numerowany, co jest szczególnie przydatne w sytuacjach, gdy kolejność elementów ma znaczenie, na przykład w przepisach kulinarnych, instrukcjach czy krokach do wykonania. Warto pamiętać, że elementy listy umieszczane są w znaczniku <li>, który określa każdy pojedynczy wpis na liście. Stosowanie znaczników zgodnych z zaleceniami W3C zapewnia, że strona jest zgodna z zasadami dostępności oraz ułatwia interpretację treści przez wyszukiwarki. Przykład użycia: <ol><li>Krok pierwszy</li><li>Krok drugi</li></ol>, co wygeneruje numerowaną listę z dwoma krokami. Przestrzeganie standardów oraz dobrych praktyk w tworzeniu struktury HTML jest kluczowe dla zapewnienia przejrzystości i efektywności strony internetowej.

Pytanie 11

Kolor zdefiniowany kodem RGB o wartości rgb(128, 16, 8) w formacie szesnastkowym przyjmuje wartość

A. #FF1008

B. #800F80

C. #801008

D. #FF0F80

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź #801008 jest poprawna, ponieważ kod RGB rgb(128, 16, 8) konwertuje się do formatu szesnastkowego, gdzie każdy z trzech składników (czerwony, zielony, niebieski) reprezentowany jest przez dwie cyfry szesnastkowe. Wartość czerwonego wynosi 128, co w systemie szesnastkowym odpowiada '80'. Wartość zielonego wynosi 16, co w szesnastkowym zapisie to '10'. Wartość niebieskiego wynosi 8, co w szesnastkowym zapisie to '08'. Łącząc te wartości, otrzymujemy #801008. Tego typu konwersja jest powszechnie stosowana w projektowaniu graficznym i web designie, gdzie RGB i jego odpowiedniki w systemie szesnastkowym są używane do definiowania kolorów w CSS. Używając standardów takich jak W3C, programiści mogą precyzyjnie określić kolory, co jest kluczowe dla estetyki i dostępności stron internetowych.

Pytanie 12

Zapis CSS

margin: auto;

wskazuje, że marginesy są

A. równe domyślnym wartościom marginesów elementu, do którego są przypisane

B. obliczane przez przeglądarkę w taki sposób, aby element został wyśrodkowany poziomo

C. stałe dla konkretnej przeglądarki, niezależnie od rozmiaru jej okna

D. dziedziczone z elementu nadrzędnego dla danego obiektu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis CSS 'margin: auto;' jest kluczowy w kontekście wyśrodkowywania elementów blokowych w poziomie w ich rodzicach. Gdy zastosujemy ten styl, przeglądarka dynamicznie oblicza wartość marginesów po lewej i prawej stronie elementu, aby równomiernie rozłożyć pozostałą przestrzeń w kontenerze. W praktyce oznacza to, że jeśli mamy element o stałej szerokości umieszczony w szerszym kontenerze, zastosowanie 'margin: auto;' spowoduje, że ten element zostanie wyśrodkowany, co jest szczególnie przydatne w responsywnym projektowaniu stron internetowych. Dobrym przykładem może być użycie 'margin: auto;' w przypadku kontenera obrazka, gdzie chcemy, aby obrazek był zawsze wyśrodkowany na stronie niezależnie od rozmiaru okna przeglądarki. To podejście jest zgodne z najlepszymi praktykami CSS i jest szeroko stosowane w nowoczesnym web designie, co czyni strony bardziej estetycznymi i przyjaznymi dla użytkowników.

Pytanie 13

W CSS określono styl dla stopki. Jak można zastosować to formatowanie do bloku oznaczonego znacznikiem div?

#stopka { ... }

A. <div title = "stopka"> …

B. <div "stopka"> …

C. <div id = "stopka"> …

D. <div class = "stopka"> …

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawnie – zapis #stopka w CSS oznacza selektor identyfikatora (ID), więc w HTML musimy użyć atrybutu id="stopka" dokładnie z tą samą nazwą. W CSS znak # wskazuje, że styl jest przypisany do elementu o konkretnym identyfikatorze, a nie do klasy czy czegokolwiek innego. Dlatego jedynym prawidłowym sposobem podpięcia tego stylu do bloku div jest konstrukcja: <div id="stopka">…</div>. W praktyce wygląda to tak: CSS: #stopka { background-color: #333; color: white; padding: 20px; } HTML: <div id="stopka">To jest stopka strony</div> Przeglądarka łączy selektor #stopka z elementem, który ma id="stopka" i nakłada na niego zdefiniowane właściwości. Identyfikator powinien być unikalny w obrębie całego dokumentu HTML, co jest zgodne z zaleceniami W3C i ogólnie przyjętą dobrą praktyką. Do jednego ID odwołujemy się w CSS przez #, a w JavaScript przez document.getElementById("stopka"). Moim zdaniem warto zapamiętać prostą zasadę: # w CSS = id w HTML, kropka (.) w CSS = class w HTML. Gdy projektujesz layout strony, zwykle elementy typu nagłówek, stopka, główna nawigacja mają unikalne ID, bo występują raz na stronie. Natomiast powtarzalne elementy (np. kafelki z produktami) dostają klasy. Dzięki temu kod jest czytelniejszy, łatwiej się go utrzymuje i unikamy dziwnych konfliktów stylów. Dobrą praktyką jest też używanie opisowych nazw, np. id="stopka" zamiast skrótów typu id="s1", bo po miesiącu nikt nie pamięta, co to znaczyło.

Pytanie 14

W języku HTML 5 do grupowania powiązanych ze sobą elementów formularza używa się znacznika

A. <fieldset>

B. <summary>

C. <option>

D. <optgroup>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawnie wskazany znacznik to <fieldset>, bo właśnie jego w HTML5 używa się do logicznego grupowania powiązanych ze sobą elementów formularza. Z punktu widzenia semantyki HTML oznacza to, że informujesz zarówno przeglądarkę, jak i technologie asystujące (np. czytniki ekranu), że dane pola stanowią jedną spójną sekcję. To jest bardzo ważne przy większych formularzach, gdzie użytkownik łatwo może się zgubić. Typowy przykład to podział formularza na części typu „Dane osobowe”, „Adres dostawy”, „Dane do faktury” – każdą z tych sekcji dobrze jest otoczyć <fieldset>, a nagłówek sekcji umieścić w <legend>. Dzięki temu czytnik ekranu odczyta np. „Dane osobowe, grupa pól formularza”, a dopiero potem poszczególne etykiety. Moim zdaniem używanie <fieldset> to jedna z takich drobnych rzeczy, które bardzo poprawiają użyteczność i dostępność, a są często olewane w amatorskich projektach. W dokumentacji W3C i w wytycznych WCAG zaleca się semantyczne oznaczanie struktury formularza, właśnie między innymi z wykorzystaniem <fieldset> i <legend>. Dodatkowo przeglądarki domyślnie stylują <fieldset> ramką, więc od razu wizualnie widać grupę pól – oczywiście w CSS możesz to dowolnie przerobić, ale bazowy efekt jest całkiem sensowny. W praktyce możesz mieć np. taki kod: <form> <fieldset> <legend>Dane logowania</legend> <label>Login: <input type="text"></label> <label>Hasło: <input type="password"></label> </fieldset> </form> Takie podejście jest zgodne z dobrymi praktykami front-endu: kod jest czytelniejszy, łatwiej go utrzymać, a przy testach automatycznych czy walidacji HTML od razu widać strukturę formularza. W dużych aplikacjach webowych, np. panelach administracyjnych, sensowne grupowanie pól za pomocą <fieldset> naprawdę robi różnicę, szczególnie gdy formularz ma kilkanaście lub kilkadziesiąt kontrolek.

Pytanie 15

Co się stanie po kliknięciu w link z HTML zawierający znak #?

<a href="#dane">

A. Otworzy się nowa karta w przeglądarce zatytułowana dane

B. Strona przeskoczy do elementu o identyfikatorze równym dane

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

D. Zostanie uruchomiony skrypt o nazwie dane

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W składni HTML znak # w atrybucie href w odsyłaczu oznacza, że odnośnik prowadzi do elementu o określonym identyfikatorze id na tej samej stronie. Jest to funkcjonalność zwana nawigacją wewnętrzną lub kotwiczeniem. Po kliknięciu takiego linku przeglądarka automatycznie przewija stronę do elementu o id równym wartości po znaku #. W praktyce jest to bardzo użyteczny mechanizm, zwłaszcza w długich dokumentach lub stronach typu one-page, gdzie można tworzyć spis treści z odnośnikami prowadzącymi do poszczególnych sekcji. Przykładem użycia może być link do formularza na dole strony, który pozwala użytkownikowi szybko dotrzeć do ważnych informacji. Zgodnie z dobrymi praktykami należy zawsze upewnić się, że id jest unikalne w kontekście całej strony, co zapobiega nieoczekiwanym zachowaniom podczas nawigacji. Jest to zgodne ze standardami W3C, które promują semantyczne i dostępne struktury stron internetowych, co wpływa pozytywnie na doświadczenie użytkownika i dostępność stron dla osób z niepełnosprawnościami.

Pytanie 16

O czym informuje przeglądarkę internetową zapis <!DOCTYPE html>?

A. Dokument został zapisany w języku HTML 5.

B. Dokument jest zapisany w wersji HTML 4.

C. W dokumencie wszystkie tagi są zapisane wielkimi literami.

D. W dokumencie każda etykieta musi być zamknięta, nawet te samozamykające.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapisywanie <!DOCTYPE html> na początku dokumentu informuje przeglądarkę, że dokument jest napisany w HTML5, co ma istotne znaczenie dla jego poprawnej interpretacji. HTML5 wprowadza wiele nowych elementów i atrybutów, które są kluczowe dla nowoczesnych aplikacji webowych, takich jak <header>, <footer>, <article> czy <section>, a także wspiera multimedia poprzez <audio> i <video>. Dzięki deklaracji <!DOCTYPE html> przeglądarki mogą stosować najnowsze standardy, co zapewnia lepszą zgodność i wsparcie dla responsywności, co jest niezbędne w erze urządzeń mobilnych. Ponadto, HTML5 wprowadza zasady dotyczące semantyki, co może poprawić SEO (optymalizację pod kątem wyszukiwarek) i dostępność treści dla osób z niepełnosprawnościami. W praktyce oznacza to, że tworząc nową stronę internetową, warto zawsze używać tej deklaracji, aby zapewnić, że przeglądarki renderują zawartość zgodnie z aktualnymi standardami.

Pytanie 17

W kodzie HTML stworzono formularz, który wysyła informacje do pliku formularz.php. Po naciśnięciu przycisku typu submit, przeglądarka zostaje przekierowana na wskazany adres. Na podstawie podanego adresu /formularz.php?imie=Anna&nazwisko=Kowalska można stwierdzić, że dane do pliku formularz.php zostały wysłane za pomocą metody:

A. COOKIE

B. SESSION

C. POST

D. GET

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź wskazuje na metodę GET. Jako jedna z dwóch podstawowych metod przesyłania danych w protokole HTTP, GET przesyła informacje poprzez dołączenie ich do adresu URL. I tak, jeżeli na załączonym obrazku widzimy adres URL zawierający parametry (np. imię=Anna&nazwisko=Kowalska) dołączone do adresu pliku formularz.php, to oznacza, że dane zostały przesłane właśnie tą metodą. Jest to zgodne z dobrymi praktykami i standardami branżowymi, które zalecają użycie metody GET zwłaszcza przy przesyłaniu niewielkich ilości danych, które nie wymagają specjalnego zabezpieczenia. Ważne jednak jest zrozumienie, że metoda GET nie jest odpowiednia, gdy przesyłane dane są poufne, np. hasła, ponieważ są one widoczne w pasku adresu przeglądarki. Ponadto, warto zauważyć, że dane przesyłane metodą GET mogą być zapisane w historii przeglądarki, co również ma swoje implikacje bezpieczeństwa.

Pytanie 18

Znacznik <pre> </pre> służy do prezentacji

A. treści polską czcionką

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

C. znaku wielokropka

D. znaku przekreślenia

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <pre> </pre> jest używany w HTML do wyświetlania tekstu w formacie preformatowanym, co oznacza, że zawartość wewnątrz tego znacznika jest wyświetlana czcionką o stałej szerokości, gdzie wszystkie białe znaki, w tym spacje i nowe linie, są zachowywane tak, jak zostały wpisane. To sprawia, że jest on niezwykle przydatny przy prezentacji kodu źródłowego, skryptów oraz innych danych, gdzie zachowanie dokładnego formatowania jest kluczowe. Przykładem może być kod HTML, JavaScript czy CSS, który można umieścić wewnątrz znacznika <pre> w celu poprawienia czytelności i umożliwienia użytkownikom łatwego skopiowania. Ponadto, znaczniki <pre> są często stosowane w dokumentacji technicznej, gdzie precyzyjne odwzorowanie formatowania jest istotne dla zrozumienia. Ważne jest również, aby zwrócić uwagę na to, że domyślnie tekst w elemencie <pre> nie jest łamany, co pozwala zachować jego oryginalny kształt i układ.

Pytanie 19

Co można powiedzieć o wyświetlonym przez witrynę tekście „test kolorów”?

<p id="p1" style="color:blue;">test kolorów</p>
<button type="button"
  onclick="document.getElementById('p1').style.color='red'">
  test</button>

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

B. Po naciśnięciu przycisku test kolor tekstu pozostaje niebieski.

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

D. Tuż po otwarciu strony kolor tekstu jest czerwony.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest poprawna ponieważ w kodzie HTML znajduje się element typu przycisk który po kliknięciu wykonuje akcję zmieniającą kolor tekstu w paragrafie z niebieskiego na czerwony Za pomocą atrybutu onclick przypisano do niego funkcję JavaScript documentgetElementById'p1'stylecolor'red' co oznacza że po naciśnięciu przycisku zmienia się styl koloru elementu o identyfikatorze p1 na czerwony Ta technika jest powszechnie stosowana do dynamicznej interakcji z użytkownikami na stronach internetowych Mając na uwadze dobre praktyki warto pamiętać o oddzieleniu logiki JavaScript od kodu HTML co zwiększa czytelność i utrzymanie kodu Można to osiągnąć poprzez przypisanie funkcji JavaScript w zewnętrznym pliku js co jest zgodne z zasadą oddzielania warstw logiki stylowania i struktury strony Zastosowanie JavaScript w taki sposób umożliwia dynamiczną zmianę stylów co jest istotne w kontekście tworzenia interaktywnych aplikacji webowych Tego typu manipulacje DOM są fundamentalne dla rozwoju nowoczesnych aplikacji internetowych co czyni je kluczowym elementem nauki i praktyki w zawodach związanych z programowaniem frontendowym

Pytanie 20

Znacznik <s> w HTML skutkuje

A. przekreślaniem tekstu

B. pochylaniem tekstu

C. migotaniem tekstu

D. podkreślaniem tekstu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <s> w HTML jest używany, żeby pokazać tekst, który jest przekreślony. To zazwyczaj oznacza, że coś jest już nieaktualne lub błędne. W HTML5 ten znacznik jest semantyczny, więc poprawia czytelność strony i ułatwia korzystanie z niej. Na przykład, jeśli autor tekstu chce zaznaczyć, że cena produktu się zmieniła, to mogą użyć <s>, żeby pokazać starą cenę, jak <s>100 zł</s> obok nowej <strong>80 zł</strong>. Dzięki temu przeglądarki dobrze to wyświetlają, a to jest fajne w kontekście zakupów online, blogów czy dokumentacji. Dodatkowo, użycie <s> może pomóc w SEO, bo lepiej oznaczony tekst jest łatwiejszy do zrozumienia dla wyszukiwarek, co może przyciągnąć więcej osób na stronę.

Pytanie 21

Jakiego znacznika w HTML użyjemy, aby uzyskać tekst wyświetlany czcionką o stałej szerokości znaku, który również uwzględnia dodatkowe spacje, tabulacje oraz znaki końca linii?

A. <ins>…</ins>

B. <pre>…</pre>

C. <code>…</code>

D. <blockquote>…</blockquote>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <pre> w HTML jest używany do formatowania tekstu w taki sposób, aby zachować oryginalne odstępy, tabulacje oraz znaki końca linii. W przeciwieństwie do standardowego tekstu, w którym przeglądarka ignoruje dodatkowe białe znaki, <pre> traktuje je dosłownie, co jest szczególnie przydatne w przypadku wyświetlania kodu źródłowego lub tekstu, w którym ważne są układy. Przykładem użycia może być wyświetlanie kodu programistycznego w dokumentacji technicznej, gdzie precyzyjny format jest kluczowy dla zrozumienia struktury kodu. Standard HTML5 potwierdza, że <pre> jest odpowiednim znacznikiem do tego celu, a jego użycie jest zgodne z zasadami semantyki HTML, co zwiększa czytelność i dostępność treści. Praktyka ta sprzyja również urządzeniom wspomagającym, umożliwiając poprawne interpretowanie tekstu przez czytniki ekranu.

Pytanie 22

Zaprezentowane pole input daje możliwość

<input type="checkbox" name="text1" value="text2">

A. wybrania opcji

B. wprowadzenia hasła

C. zaznaczenia opcji z listy zawierającej wartości text1 i text2

D. wpisania dowolnego tekstu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Element HTML z atrybutem type="checkbox" jest używany do tworzenia pól wyboru które pozwalają użytkownikowi zaznaczać jedną lub więcej opcji. Checkboxy są częstym elementem formularzy internetowych gdyż umożliwiają elastyczne zbieranie danych od użytkowników. Przykładowo w formularzach rejestracyjnych można używać ich do akceptacji regulaminu zapisów na newslettery czy wyboru zainteresowań. Składnia takiego elementu jest prosta: tag <input> z atrybutami name i value. Atrybut name jest niezbędny do grupowania checkboxów a value do przekazywania wartości zaznaczonej opcji do serwera podczas wysyłania formularza. Dobre praktyki zalecają dodawanie etykiet opisujących znaczenie checkboxa co poprawia dostępność dla osób korzystających z czytników ekranowych. Stosowanie checkboxów powinno być przemyślane by nie przeciążać użytkownika zbyt dużą liczbą opcji co mogłoby negatywnie wpłynąć na UX. Właściwe użycie checkboxów zgodne ze standardami HTML i UX jest kluczowe dla intuicyjnego interfejsu użytkownika.

Pytanie 23

Głównym celem systemu CMS jest oddzielenie treści portalu informacyjnego od jego wyglądu. Taki efekt osiąga się przez generowanie zawartości

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

B. z bazy danych oraz wyglądu za pomocą atrybutów HTML

C. ze statycznych plików HTML oraz wyglądu ze zdefiniowanego szablonu

D. ze statycznych plików HTML oraz wyglądu za pomocą technologii FLASH

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Podstawowym zadaniem systemu CMS (Content Management System) jest efektywne oddzielenie treści od warstwy prezentacyjnej, co znacząco ułatwia zarządzanie stroną internetową. Systemy CMS wykorzystują bazy danych do przechowywania treści, co pozwala na dynamiczne generowanie stron internetowych na podstawie zdefiniowanych szablonów. Przy pomocy szablonów można łatwo zmieniać wygląd i układ strony, co jest kluczowe w dzisiejszym szybko zmieniającym się środowisku online. Przykładowo, w systemach takich jak WordPress, treści są przechowywane w bazie danych MySQL, a szablony w PHP. Dzięki temu możesz zmieniać motyw i dostosowywać wygląd strony bez konieczności modyfikacji poszczególnych elementów treści. Dobre praktyki branżowe wskazują na konieczność stosowania tego typu rozdzielenia, co nie tylko przyspiesza proces aktualizacji serwisu, ale także poprawia jego bezpieczeństwo i ułatwia utrzymanie. Takie podejście jest również korzystne w kontekście SEO, ponieważ pozwala na optymalizację treści bez ryzyka wprowadzenia błędów w kodzie.

Pytanie 24

Dla celu strony internetowej stworzono grafikę rysunek.jpg o wymiarach: szerokość 200 px, wysokość 100 px. Aby zaprezentować tę grafikę jako miniaturę – pomniejszoną z zachowaniem proporcji, można użyć znacznika

A. <img src="/rysunek.png">

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <img src="/rysunek.png" style="width: 50px"> jest poprawna, ponieważ umożliwia wyświetlenie grafiki w formacie miniatury, zachowując proporcje oryginalnego obrazu. Przy zmniejszaniu rozmiaru obrazu, kluczowe jest ustawienie tylko jednego z wymiarów (szerokości lub wysokości), co pozwala na automatyczne dostosowanie drugiego wymiaru w taki sposób, aby nie zniekształcić proporcji. W tym przypadku, ustawienie szerokości na 50 px pozwala na proporcjonalne zmniejszenie wysokości do około 25 px, co jest zgodne z zasadą, że proporcje powinny pozostawać niezmienione. W praktyce, korzystanie z CSS do określenia rozmiarów obrazków poprawia responsywność strony oraz jej estetykę, co jest zgodne z dobrymi praktykami w web designie. Warto również pamiętać, że do poprawy ładowania stron i doświadczenia użytkownika, często zastosowanie rozmiarów odpowiednich do urządzeń mobilnych oraz desktopowych jest kluczowe.

Pytanie 25

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

A. text-decoration

B. font-weight

C. text-style

D. font-style

Brak odpowiedzi na to pytanie.

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

Pytanie 26

Poprawny zapis znacznika , za pomocą którego można umieścić na stronie internetowej obraz rys.jpg przeskalowany do szerokości 120 px i wysokości 80 px z tekstem alternatywnym "krajobraz" to

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

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <img src="rys.jpg" width="120px" height="80px" alt="krajobraz"> jest na pewno dobra! Używasz fajnego atrybutu 'src' do wskazania, skąd bierzesz obrazek, co jest super ważne. Atrybuty 'width' i 'height' też są dobrze ustawione, bo określają, jak duży ma być obrazek na stronie. To naprawdę przydaje się, zwłaszcza jak robimy responsywne strony. A ten 'alt', to świetny pomysł – daje tekst alternatywny, co bardzo pomaga osobom, które korzystają z czytników ekranu. Bez tego mogą nie wiedzieć, co jest na obrazku, a to jest spoko, bo dba o dostępność. Co do pikseli, używasz ich standardowo, ale pomyśl, że w CSS można też iść w procenty czy jednostki względne, żeby było jeszcze elastyczniej. W sumie, gdybyś chciał, mógłbyś bawić się CSS-em do stylizacji obrazów tła, co też sprawia, że wszystko lepiej się dopasowuje do różnych ekranów.

Pytanie 27

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

A. nav { float: right; }

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

C. aside {float: left; }

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

Brak odpowiedzi na to pytanie.

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

Pytanie 28

Na ilustracji ukazano rezultat stylizacji za pomocą CSS oraz kod HTML generujący ten przykład. Zakładając, że marginesy wewnętrzne wynoszą 50 px, a zewnętrzne 20 px, jak wygląda styl CSS dla tego obrazu?

A. B.

B. D.

C. A.

D. C.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź C wskazuje na właściwe zastosowanie właściwości CSS z użyciem solidnego czarnego obramowania o grubości 4 pikseli oraz marginesów wewnętrznych i zewnętrznych. Właściwa konfiguracja stylów CSS pozwala na precyzyjne kontrolowanie wyglądu elementów na stronie, co jest kluczowe w tworzeniu responsywnych i estetycznych stron internetowych. Użycie właściwości background-color z wartością Teal pozwala na ustawienie koloru tła, co może być istotne dla zachowania spójności wizualnej projektu. Padding ustawia wewnętrzne marginesy elementu umożliwiając kontrolę nad przestrzenią wokół zawartości, co może wpływać na czytelność i estetykę. Margins z kolei określają przestrzeń zewnętrzną oddzielając element od innych sąsiednich elementów. Poprawne zrozumienie tych stylów pozwala na efektywne projektowanie UI z myślą o użytkowniku końcowym. Dodatkowo praktyczne zastosowanie solidnych obramowań jest powszechne w podkreślaniu istotnych sekcji wizualnych, co jest zgodne z dobrymi praktykami w projektowaniu stron.

Pytanie 29

Na stronie internetowej dodano grafikę w kodzie HTML. Co się stanie, jeśli plik rysunek.png nie zostanie odnaleziony przez przeglądarkę?

<img src="rysunek.png" alt="pejzaż">

A. wstawi tekst "rysunek.png" zamiast grafiki

B. zademonstruje błąd wyświetlania strony w miejscu grafiki

C. nie pokaże strony internetowej

D. wyświetli tekst "pejzaż" w miejscu grafiki

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W HTML znacznik <img> jest używany do wstawiania obrazów na stronach. Ważne, żeby pamiętać o atrybucie src, który mówi przeglądarce, skąd ma wziąć obraz. A alt to taki tekst zapasowy, który wyświetli się, jeśli obrazek nie załaduje się z jakiegoś powodu. To istotne, bo ułatwia dostępność dla osób, które mogą mieć trudności z widzeniem. Na przykład, gdy plik rysunek.png się nie załaduje, to wyświetli się tekst z atrybutu alt - w tym przypadku słowo pejzaż. To jest zgodne z dobrymi praktykami, bo każdy powinien wiedzieć, co miało być na obrazku, nawet jeśli go nie widzi. To także pomaga wyszukiwarkom w indeksowaniu treści. A używanie atrybutu alt to rzecz, którą warto stosować, jeśli chcemy, żeby nasza strona była dostępna i przyjazna dla użytkowników. Przy tym, przypomina mi się, że to też jest zgodne z zasadami dostępności WCAG.

Pytanie 30

Które ze znaczników HTML umożliwią wyświetlenie na stronie tekstu w jednym wierszu, jeżeli żadne formatowanie CSS nie zostało zdefiniowane?

Dobre strony mojej strony

A. <h3>Dobre strony </h3><h3 style=”letter-spacing:3px”>mojej strony</h3>

B. <p>Dobre strony </p><p style=”letter-spacing:3px”>mojej strony</p>

C. <div>Dobre strony </div><div style=”letter-spacing:3px”>mojej strony</div>

D. <span>Dobre strony </span><span style=”letter-spacing:3px”>mojej strony</span>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje, Twoja odpowiedź jest prawidłowa. Wybrałeś znacznik <span>, który jest znacznikiem liniowym w HTML. Znaczniki liniowe nie zaczynają nowego wiersza po swoim zakończeniu, co oznacza, że tekst zawarty w kolejnych znacznikach <span> będzie wyświetlany w jednym wierszu, o ile nie zdefiniowano inaczej za pomocą CSS. Jest to bardzo ważne, kiedy chcemy utworzyć strukturę strony, która nie zależy od domyślnych formatowań. Przykładowo, używając <span>, możemy skonstruować skomplikowane layouty, które są niemożliwe do osiągnięcia za pomocą samych znaczników blokowych. Pamiętaj jednak, że odpowiednie stosowanie znaczników liniowych i blokowych jest ważnym elementem tworzenia semantycznie poprawnych stron internetowych, co może pomóc w poprawie SEO i dostępności Twojej strony.

Pytanie 31

Weryfikację kompletności formularza, działającą po stronie przeglądarki, należy zrealizować w języku

A. PHP

B. JavaScript

C. Ruby on Rails

D. CSS

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to JavaScript, bo właśnie ten język działa bezpośrednio w przeglądarce użytkownika i pozwala na dynamiczną weryfikację formularzy jeszcze przed wysłaniem danych na serwer. JavaScript ma dostęp do drzewa DOM, więc może odczytać wartości pól, sprawdzić, czy nie są puste, czy e‑mail ma poprawny format, czy hasło ma odpowiednią długość, a nawet czy dwa pola hasła są identyczne. Z mojego doświadczenia to jest absolutny standard w nowoczesnych aplikacjach webowych: najpierw lekka walidacja po stronie klienta w JS, a dopiero potem solidna walidacja po stronie serwera. Dobrym przykładem jest formularz rejestracji: po wpisaniu zbyt krótkiego hasła JavaScript może od razu wyświetlić komunikat pod polem, bez przeładowania strony. Można też blokować przycisk „Wyślij”, dopóki wszystkie wymagane pola nie są poprawnie wypełnione. W praktyce często używa się zdarzeń takich jak onsubmit na formularzu albo input/blur na polach, żeby na bieżąco sprawdzać dane. Można też korzystać z gotowych bibliotek walidacyjnych, ale pod spodem i tak pracuje JavaScript. W dobrych praktykach przyjmuje się zasadę: walidacja po stronie klienta poprawia wygodę i szybkość obsługi (user experience), ale nie zastępuje walidacji po stronie serwera. JavaScript służy więc do „pierwszej linii obrony” i podpowiedzi użytkownikowi, a serwer (np. w PHP czy innym języku backendowym) musi i tak wszystko jeszcze raz sprawdzić ze względów bezpieczeństwa. Warto też pamiętać o wykorzystaniu wbudowanych mechanizmów HTML5 (atrybuty required, type="email" itd.), ale to JavaScript daje pełną kontrolę nad logiką i komunikatami błędów, bo pozwala tworzyć własne reguły i reagować na konkretne zachowania użytkownika.

Pytanie 32

Stronę internetową zapisano w języku XHTML. Który z kodów stanowi implementację przedstawionego fragmentu strony, jeżeli żadne style CSS nie zostały zdefiniowane?

Początki HTML

W 1980 fizyk Tim Berners-Lee, pracownik CERN,
stworzył prototyp hipertekstowego systemu informacyjnego – ENQUIRE

<b>Początki HTML</b>
<p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył
<b>prototyp hipertekstowego systemu informacyjnego – <i>ENQUIRE</i></b></p>

<h1>Początki HTML</h1>
<p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył
<b>prototyp hipertekstowego systemu informacyjnego – <i>ENQUIRE</i></b></p>

<b>Początki HTML</b>
<p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<hr /> stworzył
<b>prototyp hipertekstowego systemu informacyjnego – <i>ENQUIRE</i></b></p>

<h1>Początki HTML</h1>
<p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył
<i>prototyp hipertekstowego systemu informacyjnego – <b>ENQUIRE</b></i></p>

A. D.

B. C.

C. B.

D. A.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest poprawna. Wybrałeś opcję B, która przedstawiała poprawną implementację fragmentu strony internetowej napisanej w języku XHTML. W tym fragmencie wykorzystane zostały standardowe tagi XHTML, takie jak <h1> do oznaczenia nagłówka pierwszego poziomu oraz <p> do definiowania akapitu. Dodatkowo w tekście użyte zostały tagi <b> i <i> do odpowiednio pogrubienia i kursywy, co podkreśla ważność wybranych fragmentów tekstu. Tag <br /> pozwala na stworzenie przerwy wiersza, co jest szczególnie użyteczne w przypadku długich akapitów tekstu. Pamiętaj, że XHTML jest bardziej rygorystyczną wersją HTML i wymaga zawsze domknięcia tagów. Wiedza na ten temat jest niezwykle ważna podczas tworzenia stron internetowych, a standardy i dobre praktyki branżowe pomagają w utrzymaniu kodu w czytelnej i zrozumiałej formie.

Pytanie 33

Taki styl CSS sprawi, że na stronie internetowej

ul{ list-style-image: url('rys.gif'); }

A. rys.gif stanie się ramką dla listy nienumerowanej

B. punkt listy nienumerowanej będzie rys.gif

C. każdy punkt listy zyska osobne tło z grafiki rys.gif

D. rys.gif wyświetli się jako tło dla listy nienumerowanej

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Deklaracja CSS ul{ list-style-image: url('rys.gif'); } powoduje, że każdy element listy nienumerowanej (ul) używa obrazu rys.gif jako punktora. Właściwość list-style-image pozwala na zamianę domyślnego stylu punktów listy, takiego jak kropki czy kwadraty, na dowolny obrazek. Jest to przydatne, gdy chcemy nadać stronie unikalny wygląd lub dostosować ją do identyfikacji wizualnej marki. W praktyce oznacza to, że zamiast klasycznego punktora, użytkownicy zobaczą wybrany obraz, co może wpłynąć na estetykę i czytelność strony. Ważne jest, aby obraz był odpowiednio skalowany, aby nie zaburzał układu listy. List-style-image to standardowa właściwość CSS uznawana przez większość przeglądarek, co czyni ją uniwersalnym narzędziem w rękach projektanta stron. W procesie projektowania warto upewnić się, że wybrany obrazek jest dostępny dla wszystkich użytkowników, co można osiągnąć np. poprzez dodanie atrybutu alt w wersji tekstowej listy dla lepszej dostępności.

Pytanie 34

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

A. 800 na 480 pikseli

B. 2560 na 2048 pikseli

C. 320 na 240 pikseli

D. 1366 na 768 pikseli

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
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 35

W katalogu www znajdują się podkatalogi html oraz styles, w których umieszczone są pliki o rozszerzeniu html oraz pliki z rozszerzeniem css. Aby dołączyć styl.css do pliku HTML, należy zastosować

A. <link rel="Stylesheet" type="text/css" href="styl.css" />

B. <link rel=" Stylesheet" type="text/css" href="www/style/styl. css" />

C. <link rel="Stylesheet" type="text/css" href="../style/styl.css" />

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to <link rel="Stylesheet" type="text/css" href="../style/styl.css" />. Użycie tej ścieżki względnej jest kluczowe, ponieważ wskazuje na lokalizację pliku styl.css w stosunku do pliku HTML, w którym jest osadzony. Folder 'www' zawiera podfoldery 'html' oraz 'style', a aby poprawnie zaadresować plik styl.css, który jest w folderze 'style', musimy wyjść z folderu 'html' (stąd '../') i następnie wejść do folderu 'style', gdzie znajduje się plik styl.css. W praktyce jest to zgodne z dobrą praktyką organizacji plików w projektach webowych, ponieważ ułatwia zarządzanie i lokalizowanie zasobów. Warto również zauważyć, że poprawne wskazanie ścieżki do plików CSS jest niezbędne dla prawidłowego renderowania stylów na stronie, co wpływa na jej wygląd i użytkowalność. Wszyscy deweloperzy front-end powinni być świadomi znaczenia dokładnego wskazywania ścieżek oraz stosować się do konwencji dotyczących organizacji struktur plików w projekcie.

Pytanie 36

Styl ten generuje pojedyncze obramowanie, które charakteryzuje się następującymi właściwościami:

border: solid 1px;
border-color: red blue green yellow;

A. krawędź lewa ma kolor czerwony, krawędź dolna jest w kolorze niebieskim, krawędź prawa jest koloru zielonego, krawędź górna ma kolor żółty

B. krawędź górna jest czerwonego koloru, krawędź lewa jest w kolorze niebieskim, krawędź dolna ma kolor zielony, krawędź prawa ma kolor żółty

C. krawędź prawa jest koloru czerwonego, krawędź dolna ma kolor niebieski, krawędź lewa ma kolor zielony, krawędź górna ma kolor żółty

D. krawędź górna ma kolor czerwony, krawędź prawa jest w kolorze niebieskim, krawędź dolna ma kolor zielony, krawędź lewa jest koloru żółtego

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Podana odpowiedź jest prawidłowa, ponieważ opisuje właściwe przypisanie kolorów do krawędzi obramowania według standardów CSS. W zapisie border-color: red blue green yellow; kolory są przypisywane zgodnie z kierunkiem wskazówek zegara, zaczynając od góry. Zatem krawędź górna jest koloru czerwonego, prawa koloru niebieskiego, dolna zielonego, a lewa żółtego. Jest to zgodne z praktykami projektowania stron internetowych, gdzie priorytetem jest zrozumiała i spójna struktura kodu. W praktyce takie zrozumienie pozwala na efektywne tworzenie stylów w CSS, przyspieszając proces tworzenia responsywnych i estetycznych interfejsów użytkownika. Wiedza o przypisywaniu kolorów do krawędzi jest przydatna w tworzeniu zaawansowanych układów graficznych, pozwalając na lepsze wykorzystanie przestrzeni wizualnej i wprowadzenie unikalnych elementów stylistycznych. Takie podejście do CSS jest zgodne z nowoczesnymi standardami projektowania, które kładą nacisk na czytelność i efektywność kodu oraz zapewniają lepsze doświadczenia użytkownika.

Pytanie 37

Który zapis jest selektorem pseudoklasy CSS?

A. body

B. a:link

C. td.wyroznienie

D. p#wyroznienie

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to „a:link”, ponieważ jest to zapis selektora pseudoklasy w CSS. Dwukropek po nazwie elementu „a” oznacza właśnie pseudoklasę – w tym przypadku chodzi o konkretny stan linku, czyli odnośnik, który jeszcze nie został odwiedzony przez użytkownika. W specyfikacji CSS (np. CSS2.1, CSS Selectors Level 3/4) pseudoklasy opisują stany dynamiczne albo logiczne cechy elementu, których nie da się łatwo zapisać w samym HTML, jak :hover, :active, :visited, :focus, :first-child, :nth-child() i wiele innych. Moim zdaniem warto od razu kojarzyć, że jeżeli widzisz dwukropek po selektorze, a potem słowo-klucz, to prawie na pewno jest to pseudoklasa. Przykładowo: a:hover { text-decoration: underline; } a:visited { color: purple; } input:focus { border-color: #00aaff; } Takie selektory pozwalają stylować elementy w zależności od interakcji użytkownika lub ich położenia w drzewie DOM. W praktyce front-endowej bardzo często używa się zestawu pseudoklas dla linków w kolejności: :link, :visited, :hover, :active (tzw. LVHA), żeby przeglądarka stosowała style w przewidywalny sposób. Dobrą praktyką jest też rozróżnianie kolorów linków odwiedzonych (:visited) i nieodwiedzonych (:link), ale w granicach czytelności interfejsu. W nowoczesnym CSS mamy też pseudoklasy takie jak :not(), :is(), :has(), które bardzo ułatwiają pisanie złożonych selektorów bez nadmiernego kombinowania z klasami w HTML. Jednak fundament pozostaje ten sam: pseudoklasa to coś po dwukropku, co opisuje stan, a nie zwykły typ, klasę czy id elementu. Dlatego w tym pytaniu jedynie „a:link” spełnia definicję selektora pseudoklasy.

Pytanie 38

W dokumencie HTML stworzono formularz. Jakie działanie kodu zostanie pokazane przez przeglądarkę, jeśli w drugie pole użytkownik wprowadzi tekst „ala ma kota”?

A. Efekt 1

B. Efekt 4

C. Efekt 2

D. Efekt 3

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Efekt 2 jest poprawny ponieważ kod HTML przedstawia formularz zawierający element select oraz pole input typu password. Element select pozwala na wybór jednej z trzech opcji Kraków Poznań i Szczecin co widzimy w efekcie 2. Pole input typu password zasłania wpisywane przez użytkownika znaki co jest zgodne z przedstawionym obrazem gdzie w miejscu drugiego pola widoczne są zamaskowane znaki. To zabezpieczenie jest standardem w formularzach internetowych chroniącym dane przed nieuprawnionym dostępem. Przeglądarki internetowe interpretują typ password zamieniając wprowadzone znaki na symbole najczęściej kropki lub gwiazdki. Dla programistów webowych jest to istotne przy projektowaniu interfejsów użytkownika zapewniając zarówno funkcjonalność jak i bezpieczeństwo. Ważne jest również aby pamiętać o odpowiednim zarządzaniu danymi wprowadzonymi w polach password po stronie serwera zapewniając szyfrowanie i bezpieczne przechowywanie. Stosowanie elementu select w połączeniu z input type=password jest popularne w formularzach rejestracyjnych gdzie użytkownik wybiera opcję a następnie wprowadza hasło. Dobre praktyki obejmują również walidację danych po stronie klienta i serwera aby zapewnić poprawność i bezpieczeństwo wprowadzanych informacji.

Pytanie 39

Formaty wideo, które są wspierane przez standard HTML5, to

A. MP4, Ogg, WebM

B. MP4, AVI

C. Ogg, QuickTime

D. Ogg, AVI, MPEG

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź MP4, Ogg, WebM jest poprawna, ponieważ te trzy formaty wideo są oficjalnie obsługiwane przez standard HTML5, co oznacza, że są zgodne z różnymi przeglądarkami internetowymi bez potrzeby używania dodatkowych wtyczek. Format MP4, oparty na kontenerze MPEG-4, jest szeroko stosowany z uwagi na jego efektywność w kompresji oraz wysoką jakość obrazu i dźwięku. Ogg to otwarty format, który wspiera kodek VP8, co czyni go popularnym wśród projektów o otwartym oprogramowaniu. WebM, z kolei, jest również formatem otwartym, zoptymalizowanym dla wideo w Internecie, co czyni go dobrym wyborem dla zastosowań webowych. Te formaty są zgodne z najlepszymi praktykami w zakresie wydajności i dostępności, co sprawia, że są preferowane podczas tworzenia treści wideo do zastosowań online. Przykładem ich użycia może być osadzanie wideo na stronach internetowych, gdzie różnorodność formatów pozwala na ich odtwarzanie na różnych urządzeniach oraz w różnych systemach operacyjnych.

Pytanie 40

W HTML-u, aby umieścić animację FLASH w formacie .swf na stronie internetowej, należy skorzystać ze znacznika

A. <img>

B. <audio>

C. <video>

D. <object>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Aby dodać animację FLASH z rozszerzeniem .swf na stronę internetową, należy użyć znacznika <object>. Ten znacznik jest zgodny z wieloma standardami HTML i pozwala na osadzanie różnorodnych mediów, w tym plików FLASH. Użycie <object> umożliwia nie tylko wyświetlenie animacji, ale także interakcję z nią, co jest niezbędne w przypadku interaktywnych aplikacji FLASH. Warto zauważyć, że HTML5 wprowadził nowe elementy, takie jak <video> i <audio>, które są bardziej odpowiednie do obsługi multimediów w nowoczesnych aplikacjach internetowych, ale jeśli chodzi o pliki FLASH, to <object> pozostaje właściwym wyborem. Przykład użycia: <object data='animacja.swf' type='application/x-shockwave-flash' width='550' height='400'></object>. Pomimo, że wsparcie dla FLASH jest obecnie ograniczone, zrozumienie tego znacznika i jego zastosowania jest kluczowe dla pracy z większą ilością multimediów w HTML. Ponadto, zgodność z danymi standardami zapewnia, że strona będzie działać poprawnie w różnych przeglądarkach.

Rozpocznij nowy egzamin

Powrót do strony głównej