Wyniki egzaminu

Informacje o egzaminie:
  • Zawód: Technik informatyk
  • Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
  • Data rozpoczęcia: 8 kwietnia 2026 11:43
  • Data zakończenia: 8 kwietnia 2026 11:43

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Udostępnij swój wynik
Szczegółowe wyniki:
Pytanie 1

Który z poniższych kodów HTML spowoduje taki sam efekt formatowania jak na zaprezentowanym rysunku?

Ilustracja do pytania
A. <p>W tym <i>paragrafie <b>zobaczysz</b> sposoby formatowania </i> tekstu w HTML</p>
B. <p>W tym <b>paragrafie <i>zobaczysz</i> sposoby formatowania</b> tekstu w HTML</p>
C. <p>W tym <i>paragrafie </i><b>zobaczysz</b><i> sposoby formatowania</i> tekstu w HTML</p>
D. <p>W tym <i>paragrafie zobaczysz sposoby formatowania</i> tekstu w HTML</p>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest w porządku, bo tag <i> w HTML rzeczywiście służy do pisania tekstu kursywą, a <b> do pogrubiania. Jak użyjesz tych znaczników razem, to zyskujesz fajny efekt, który widać na obrazku. Kawałek tekstu <i>paragrafie <b>zobaczysz</b> sposoby formatowania </i> sprawi, że cały fragment będzie w kursywie, ale tylko wyraz w <b> będzie pogrubiony. To jest spoko, bo pokazuje jak poprawnie używać znaczniki w HTML. Warto jednak pamiętać, żeby nie przesadzać z tymi znacznikami i używać ich tylko wtedy, gdy naprawdę chcesz wyróżnić coś w tekście. Dzisiaj większość stylizacji robi się przez CSS, co pozwala lepiej oddzielić strukturę od wyglądu dokumentu. Ale jak chcesz coś szybko wyróżnić w HTML, to użycie <i> i <b> jak najbardziej ma sens. To wszystko jest mega ważne, bo zrozumienie tych podstaw będzie przydatne, gdy będziesz budować strony.

Pytanie 2

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

A. 1. punkt 1 2. punkt 2 podpunkt1 podpunkt2 podpunkt1 3. punkt3
B. punkt 1 punkt 2 podpunkt1 podpunkt2 podpunkt3 punkt3
C. 1. punkt 1 2. punkt 2 3. punkt3 podpunkt1 podpunkt2 podpunkt1
D. 1. punkt 1 2. punkt 2 podpunkt1 podpunkt2 podpunkt3 punkt3

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Fajnie, że wybrałeś poprawną odpowiedź! To pokazuje, że rozumiesz, jak działa struktura list w HTML. W Twoim kodzie mamy uporządkowaną listę z trzema głównymi punktami, co jest świetne. Te pierwsze dwa są dobrze zdefiniowane jako elementy <li>, tak jak powinny być. A w punkcie 2 masz zagnieżdżoną listę nieuporządkowaną, co dodaje trochę ekstra informacji – super sprawa! Pamiętaj, że to zagnieżdżenie ma znaczenie, bo pomaga to w organizacji treści. Każdy podpunkt też jest elementem <li>, więc wszystko się zgadza. Tego typu struktury są mega przydatne, zwłaszcza w spisach treści czy menu nawigacyjnych. Pamiętaj, że dobrze zbudowany HTML jest ważny dla czytelności, a także dla osób, które korzystają z różnych technologii do przeglądania stron. Trzymaj tak dalej!

Pytanie 3

Logo platformy CMS noszącej nazwę Joomla! to

Ilustracja do pytania
A. C
B. D
C. A
D. B

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Logo Joomla! jest charakterystyczne z uwagi na swoją kolorystykę i kształt symbolizujący współpracę oraz integrację. Zawiera cztery kolorowe elementy splecione w formie kwiatka lub wiru co często jest interpretowane jako symbol integracji społeczności i otwartości na różnorodność. Joomla! to system zarządzania treścią (CMS) napisany w PHP który wykorzystywany jest do tworzenia stron internetowych blogów i aplikacji internetowych. Jest jednym z najpopularniejszych CMS na świecie dzięki swojej elastyczności modułom oraz dużej społeczności wspierającej rozwój. Joomla! jest wykorzystywany zarówno przez małe przedsiębiorstwa jak i duże organizacje dzięki swojej możliwości skalowania i dostosowywania do indywidualnych potrzeb. Dodatkowo jego open-source'owy charakter pozwala na szerokie dostosowanie kodu do specyficznych wymagań co jest cenione przez programistów i deweloperów. Dobry wybór Joomla! jako CMS może znacząco przyspieszyć proces tworzenia i zarządzania treścią na stronie internetowej oferując jednocześnie wsparcie licznych rozszerzeń i szablonów

Pytanie 4

Przedstawiona linia kreskowa w stylu obramowania CSS jest określona własnością

Ilustracja do pytania
A. dashed
B. double
C. solid
D. doted

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Dobrze zrozumiałeś temat. Linia kreskowa w stylu CSS jest określana właściwością 'dashed'. Jest to jedna z kilku wartości, które można przypisać właściwości 'border-style' w języku CSS, aby manipulować wyglądem obramowania elementu. Stosowanie różnych styli linii pozwala na tworzenie bardziej skomplikowanych i estetycznie przyjemnych projektów. Na przykład, styl 'dashed' może być używany do zaznaczania linków lub przycisków, aby zwrócić uwagę użytkownika. Ważne jest jednak, aby zawsze pamiętać o utrzymaniu konsekwencji w projektowaniu stron internetowych. Dobre praktyki zalecają, aby wybierać styl obramowania, który najlepiej pasuje do ogólnego stylu strony. Podsumowując, właściwość 'border-style' jest kluczowym narzędziem w projektowaniu stron internetowych.

Pytanie 5

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

A. PHP
B. Ruby on Rails
C. CSS
D. JavaScript

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 6

Który znacznik lub zestaw znaczników nie jest używany do określenia struktury dokumentu HTML?

A. <section>
B. <div>
C. <i>, <b>, <u>
D. <header>, <footer>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Te znaczniki, czyli <i>, <b> i <u>, nie są jakby do tworzenia struktury dokumentu HTML, ale bardziej do formatowania tekstu. Zgodnie z nowymi standardami HTML5, są to elementy semantyczne, które wpływają na to, jak coś wygląda, a nie na to, jak jest zorganizowane. Znacznik <i> używamy, jak chcemy coś napisać kursywą, <b>, żeby coś podkreślić, a <u>, żeby coś podkreślić. Często korzysta się z nich w stylach CSS, ale nie nadają one hierarchii ani kontekstu dokumentu. Jak chcesz wyróżnić jakiś tekst w kontekście kodu czy tytułu rozdziału, lepiej skorzystać z bardziej semantycznych znaczników, jak <em> dla podkreślenia znaczenia albo <strong> dla podkreślenia wagi. W czasach, kiedy dostępność i SEO są coraz ważniejsze, używanie semantycznych elementów to klucz do tworzenia lepszych i bardziej przejrzystych stron.

Pytanie 7

Jaka linia w języku HTML wskazuje kodowanie znaków używane w dokumencie?

A. <meta charset="UTF-8">
B. <meta encoding="UTF-8">
C. <charset="UTF-8">
D. <encoding="UTF-8">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis <meta charset="UTF-8"> jest poprawną deklaracją kodowania znaków w dokumencie HTML, ponieważ jest zgodny z aktualnymi standardami W3C. Element <meta> powinien znajdować się w sekcji <head> dokumentu HTML i pozwala przeglądarkom na właściwe interpretowanie znaków w treści strony. Kodowanie UTF-8 jest szeroko stosowane, ponieważ obsługuje wszystkie znaki w standardzie Unicode, co czyni go idealnym dla aplikacji wielojęzycznych. Użycie poprawnego kodowania jest kluczowe, aby uniknąć problemów z wyświetlaniem tekstu, takich jak błędne znaki lub krzaki, które pojawiają się, gdy przeglądarka nie wie, jak zinterpretować dane. Przykładowo, jeżeli mamy stronę internetową w kilku językach, użycie UTF-8 zapewnia, że znaki diakrytyczne w języku polskim, czeskim czy niemieckim będą poprawnie wyświetlane. Warto również pamiętać, aby zawsze umieszczać tę deklarację jako pierwszą w sekcji <head>, aby zapewnić, że przeglądarka prawidłowo zinterpretuje wszystkie inne elementy. W kontekście SEO oraz dostępności, poprawne kodowanie jest istotne, ponieważ wpływa na indeksowanie treści przez wyszukiwarki oraz ich prezentację dla użytkowników.

Pytanie 8

W języku CSS określono formatowanie znacznika h1 według poniższego wzoru. Zakładając, że do znacznika h1 nie dodano żadnego innego formatowania, wskaż sposób formatowania tego znacznika.

h1 {
    font-style: oblique;
    font-variant: small-caps;
    text-align: right;
}
Ilustracja do pytania
A. B.
B. D.
C. C.
D. A.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje, Twoja odpowiedź jest prawidłowa. W CSS określono, że znacznik h1 ma być wyświetlany z pochyłą czcionką, co jest osiągane za pomocą właściwości 'font-style: oblique'. Dodatkowo, małe wielkie litery są realizowane przez 'font-variant: small-caps', które zmieniają wszystkie małe litery na wielkie litery, ale z zachowaniem mniejszego rozmiaru. Wreszcie, do wyrównania tekstu do prawej strony służy 'text-align: right'. Wszystko to razem składa się na formatowanie znacznika h1, które zostało zdefiniowane w CSS. To jest dobra praktyka, aby zrozumieć i zapamiętać różne właściwości CSS, ponieważ pozwalają one na bardzo szczegółowe kontrolowanie wyglądu i układu elementów na stronie. Pamiętaj, że CSS jest niezwykle potężnym narzędziem w rękach doświadczonego programisty front-end i pozwala na tworzenie estetycznych, responsywnych i przyjaznych dla użytkownika interfejsów.

Pytanie 9

Aby stworzyć układ strony z trzema kolumnami obok siebie, można wykorzystać styl CSS

Ilustracja do pytania
A. A
B. D
C. C
D. B

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź A wykorzystuje właściwość float CSS ustawioną na left oraz szerokość width na 33 procent co pozwala na umieszczenie trzech kolumn obok siebie na stronie internetowej Float jest często używany do tworzenia układów wielokolumnowych gdyż pozwala na pływające rozmieszczenie elementów blokowych wewnątrz kontenera Dzięki ustawieniu szerokości na 33 procent zapewniamy że trzy kolumny będą mogły się zmieścić obok siebie w jednym rzędzie w ramach dostępnej szerokości kontenera Jest to efektywne podejście w przypadku responsywnych projektów gdzie nie zawsze znamy dokładną szerokość dostępnej przestrzeni Floating jest klasycznym podejściem w CSS i chociaż nowe technologie jak flexbox czy grid oferują więcej możliwości jest wciąż powszechnie stosowany w wielu projektach szczególnie gdy chodzi o proste układy Dodatkowo float left jest zgodny z wielu przeglądarkami co zapewnia większą uniwersalność kodu Przy projektowaniu stron zawsze warto pamiętać o dodaniu clearfix lub overflow hidden do rodzica elementów pływających aby uniknąć problemów z zawijaniem się kontenera wokół elementów pływających

Pytanie 10

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. tr:active { background-color: Pink; }
B. td, th { background-color: Pink; }
C. tr { background-color: Pink; }
D. tr:hover { background-color: Pink; }

Brak odpowiedzi na to pytanie.

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

Pytanie 11

W podanym przykładzie pseudoklasa hover spowoduje, że styl pogrubiony zostanie zastosowany

Ilustracja do pytania
A. odnośnikowi, gdy kursor myszy na nim spocznie
B. dla wszystkich nieodwiedzonych odnośników
C. dla każdego odnośnika bez względu na jego aktualny stan
D. dla wszystkich odwiedzonych odnośników

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Pseudoklasa hover w CSS jest stosowana do definiowania stylu elementu, gdy użytkownik umieszcza nad nim kursor myszy. W kontekście odnośników, stosowanie pseudoklasy hover pozwala na dynamiczne dostosowywanie ich wyglądu, co jest kluczowe dla poprawy interaktywności i użyteczności stron internetowych. W przykładzie a:hover { font-weight: bold; } styl pogrubiony zostanie zastosowany do odnośnika, gdy użytkownik najedzie na niego kursorem myszy. Jest to częsta praktyka w projektowaniu stron, która pomaga użytkownikom łatwiej identyfikować aktywne elementy nawigacyjne. Standardy sieciowe, takie jak W3C, rekomendują stosowanie takich interakcji w celu poprawy doświadczenia użytkownika. Praktyczne zastosowanie pseudoklasy hover jest szerokie, od prostych efektów wizualnych, po skomplikowane animacje i przejścia. Ważne jest jednak, aby pamiętać o zapewnieniu alternatywnych metod interakcji dla użytkowników korzystających z urządzeń dotykowych, gdzie hover nie jest obsługiwany. Zrozumienie i właściwe stosowanie pseudoklas w CSS jest podstawą tworzenia nowoczesnych i dostępnych interfejsów użytkownika.

Pytanie 12

Użycie standardu ISO-8859-2 ma na celu zapewnienie prawidłowego wyświetlania

A. znaków zarezerwowanych dla języka opisu strony
B. symboli matematycznych
C. polskich znaków, takich jak: ś, ć, ń, ó, ą
D. specjalnych znaków dla języka kodowania strony

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kodowanie w standardzie ISO-8859-2, zwane również Latin-2, zostało zaprojektowane, aby wspierać wyświetlanie znaków z alfabetów używanych w Europie Środkowo-Wschodniej. Jest to szczególnie istotne w kontekście języka polskiego, który wymaga specyficznych znaków diakrytycznych, takich jak ś, ć, ń, ó oraz ą. Standard ten obejmuje 256 znaków, z czego pierwsze 128 jest zgodne z ASCII, natomiast pozostałe 128 to znaki specyficzne dla danego języka. Dzięki temu, w aplikacjach internetowych oraz w systemach operacyjnych, możliwe jest poprawne wyświetlanie tekstów w języku polskim, co wpływa na jakość komunikacji i użyteczność treści. Przykładowo, w dokumentach HTML, użycie deklaracji charset='ISO-8859-2' zapewnia, że przeglądarki internetowe prawidłowo interpretują znaki, co jest kluczowe dla zachowania czytelności i poprawności tekstu. Zgodność z tym standardem jest także istotna w kontekście wymiany danych między różnymi systemami, aby uniknąć problemów związanych z kodowaniem i dekodowaniem tekstu.

Pytanie 13

Dokument HTML określa akapit oraz grafikę. Aby grafika była umieszczona przez przeglądarkę w tej samej linii co akapit po jego lewej stronie, w stylu CSS grafiki należy ustawić właściwość

A. align:left;
B. float:left;
C. style:left;
D. alt:left;

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwość CSS 'float:left;' jest kluczowa dla umieszczania elementów w linii obok siebie. Umożliwia ona 'wypływanie' elementu, jakim jest obrazek, w lewo, co skutkuje tym, że tekst w akapicie będzie go otaczał od prawej strony. Jest to szczególnie przydatne w projektowaniu responsywnych układów stron internetowych, gdzie zachowanie porządku w rozmieszczeniu elementów jest istotne zarówno na desktopach, jak i urządzeniach mobilnych. Przykładowo, jeśli mamy akapit z opisem produktu, który chcemy wizualnie wzbogacić odpowiednim zdjęciem z jego lewej strony, zastosowanie 'float:left;' w stylach CSS sprawi, że tekst będzie płynnie dostosowywał się do rozmiaru obrazka. Zgodnie z dobrymi praktykami, warto również pamiętać o zastosowaniu 'clear:both;' w przypadku elementów, które mają pojawić się poniżej zaganianych elementów, aby uniknąć problemów z układem. Dodatkowo, warto zadbać o odpowiednie wymiary obrazka oraz użycie atrybutu 'alt' w tagu <img>, aby poprawić dostępność strony oraz jej SEO.

Pytanie 14

Określ, w jaki sposób należy odnosić się do pliku default.css, jeżeli index.html znajduje się bezpośrednio w folderze Strona?

Ilustracja do pytania
A. <link rel="stylesheet" type="text/css" href="...\style\default.css" />
B. <link rel="stylesheet" type="text/css" href="c:\style/default.css" />
C. <link rel="stylesheet" type="text/css" href="./style/default.css" />
D. <link rel="stylesheet" type="text/css" href="c:/style/default.css" />

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź wskazuje na relatywną ścieżkę do pliku CSS. W HTML, stosowanie ścieżek relatywnych jest standardem i dobrą praktyką. Relatywna ścieżka ./style/default.css oznacza, że plik default.css znajduje się w folderze style, który jest bezpośrednio wewnątrz katalogu, w którym znajduje się plik index.html. Stosowanie relatywnych ścieżek zapewnia większą elastyczność i przenośność projektu, ponieważ nie są one zależne od struktury folderów na danym komputerze. Jest to szczególnie ważne w kontekście aplikacji webowych, które mogą być przenoszone między różnymi środowiskami serwerowymi. Zaleca się, aby projektanci stron zawsze używali ścieżek relatywnych, aby uniknąć problemów z odwoływaniem się do zasobów po zmianie lokalizacji projektu. Użycie poprawnej składni w tagu link, jak rel=stylesheet oraz type=text/css, zgodnie z dobrymi praktykami zapewnia poprawne załadowanie stylów CSS, co wpływa na poprawne wyświetlanie się strony w przeglądarkach.

Pytanie 15

Jakim zapisem w dokumencie HTML można stworzyć element, który wyświetli obrazek kotek.jpg z tekstem alternatywnym "obrazek kotka"?

A. <img src="kotek.jpg" alt="obrazek kotka">
B. <img src="kotek.jpg" title="obrazek kotka">
C. <img href="kotek.jpg" title="obrazek kotka">
D. <img href="kotek.jpg" alt="obrazek kotka">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <img src="kotek.jpg" alt="obrazek kotka"> jest poprawna, ponieważ zgodnie z standardem HTML do wyświetlania obrazów należy używać atrybutu 'src', który wskazuje źródło obrazu. Atrybut 'alt' jest również niezbędny, ponieważ zapewnia tekst alternatywny dla obrazów, co jest kluczowe dla dostępności strony internetowej. Użytkownicy, którzy korzystają z technologii wspomagających, takich jak czytniki ekranu, będą mogli zrozumieć zawartość obrazu poprzez ten tekst. Dobrą praktyką jest również stosowanie odpowiednich nazw plików obrazów oraz opisowych tekstów alternatywnych, co poprawia SEO i użyteczność strony. Na przykład, jeśli w przyszłości planujesz dodać więcej obrazów kotów, warto, aby każdy z nich miał unikalny opis w atrybucie 'alt', co pomoże w lepszym zrozumieniu kontekstu przez użytkowników i roboty wyszukiwarek. W ten sposób poprawiasz zarówno dostępność, jak i indeksowalność swojej strony.

Pytanie 16

Wybierz prawidłowy sposób umieszczania komentarzy w kodzie źródłowym HTML

A. /* informacje komentarza */
B. -- informacje komentarza --
C. <!-- informacje komentarza -->
D. "" informacje komentarza ""

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawny komentarz w HTML musi być zapisany dokładnie w formie: <!-- treść komentarza -->. To jest jedyny format zgodny ze specyfikacją HTML (HTML5, ale też starsze wersje). Przeglądarka traktuje wszystko, co znajduje się między ciągiem znaków <!-- a -->, jako komentarz, czyli tego nie wyświetla użytkownikowi i nie interpretuje jako kod. Dzięki temu można w kodzie zostawiać sobie uwagi, opisy sekcji, tymczasowo coś „wyłączyć” albo oznaczyć fragment do późniejszej edycji. W praktyce stosuje się np.: <!-- Nawigacja główna strony --> albo <!-- TODO: dodać link do panelu logowania -->. Moim zdaniem komentarze są szczególnie ważne w większych projektach, bo po miesiącu naprawdę trudno pamiętać, po co była jakaś dziwna konstrukcja w HTML. Warto też wiedzieć, że w HTML nie stosujemy ani //, ani /* */ jak w JavaScript czy CSS. To są inne języki, inne reguły. Jeżeli wstawisz coś w stylu <!-- <p>Tekst</p> -->, to cały ten akapit jest ignorowany przez przeglądarkę, co jest wygodne przy testowaniu. Dobra praktyka jest też taka, żeby nie przesadzać z ilością komentarzy, ale tam gdzie struktura jest mniej oczywista (np. zagnieżdżone divy, rozbudowane formularze), lepiej dodać krótki, konkretny opis. W projektach komercyjnych często używa się komentarzy do oznaczania sekcji layoutu, np. <!-- HEADER START -->, <!-- FOOTER END -->, co ułatwia pracę całemu zespołowi. W skrócie: tylko zapis z nawiasami ostrymi i myślnikami, czyli <!-- ... -->, jest w HTML prawidłowy i rozpoznawany jako komentarz.

Pytanie 17

Który format graficzny rastrowy jest obsługiwany przez przeglądarki internetowe?

A. TGA
B. FLIF
C. PCX
D. PNG

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format PNG (Portable Network Graphics) to jeden z tych formatów, które są naprawdę popularne w sieci. Przeglądarki go dobrze obsługują, co jest dużym plusem. Został stworzony jako lepsza wersja formatu GIF i do tego ma większą paletę kolorów oraz wspiera przezroczystość. To oznacza, że jakość obrazka pozostaje wysoka, kiedy go zapisujesz, bo PNG korzysta z bezstratnej kompresji. Dodatkowo, ten format pozwala na różne stopnie przezroczystości, co czyni go idealnym do różnych grafik w Internecie, na przykład logo czy ikony. Fajnie, że jest zgodny z HTML5 i CSS, bo to ułatwia pracę przy projektowaniu stron. Można go używać z kolorami w trybie RGBA, dzięki czemu można dodawać fajne efekty z przezroczystością, co zdecydowanie poprawia wygląd stron. W praktyce wiele witryn korzysta z PNG, bo nie tylko zachowuje jakość, ale też nie zajmuje dużo miejsca na serwerze, co sprawia, że strony ładują się szybciej i użytkownicy mają lepsze doświadczenia.

Pytanie 18

W języku HTML zdefiniowano listę:

<ol>
  <li>biały</li>
  <li>czerwony
    <ul>
      <li>różowy</li>
      <li>pomarańczowy</li>
    </ul></li>
  <li>niebieski</li>
</ol>
A. Jest to lista punktowana z zagłębioną listą numerowaną.
B. Nie ma zagłębień i jest numerowana, słowo "niebieski" ma przyporządkowany numer 5.
C. Nie ma zagłębień i jest punktowana, wyświetla 5 punktów.
D. Jest to lista numerowana z zagłębioną listą punktowaną.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Dobra robota! Twoja odpowiedź jest na miejscu. Ta lista HTML, co widziałeś na obrazku, to faktycznie lista uporządkowana, stworzona przy pomocy znacznika <ol>. Takie listy są numerowane, co sprawia, że łatwiej je śledzić. W HTML mamy dwa rodzaje list: uporządkowane, czyli numerowane z <ol>, i nieuporządkowane, które robimy z <ul> i one są punktowane. Fajnie, że pamiętasz o CSS, bo dzięki niemu możemy dostosować wygląd tych list. Ogólnie, lista numerowana zaczyna od 1 i idzie dalej (1, 2, 3 itd.), a punktowana pokazuje kropki. Co ciekawe, można też zagnieżdżać listy, co daje nam takie wielopoziomowe struktury. Dlatego w tej liście mamy wewnątrz punktowaną, która jest stworzona z <ul>. I pamiętaj, że używanie właściwych znaczników ma znaczenie – szczególnie dla osób korzystających z czytników ekranu.

Pytanie 19

Jakie polecenie powinno być zastosowane, aby tekst TEKST był widoczny w kolorze czarnym w oknie przeglądarki internetowej?

A. <body bgcolor="black">TEKST</body>
B. <body color="black">TEKST</font>
C. <font color="#000000">TEKST</font>
D. <font color="czarny">TEKST</font>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Aby wyraz TEKST został wyświetlony w kolorze czarnym w oknie przeglądarki internetowej, należy skorzystać z tagu <font> z atrybutem color ustawionym na wartości #000000, co stanowi standardowy kod heksadecymalny dla koloru czarnego. Atrybut ten pozwala na precyzyjne określenie koloru tekstu, co jest zgodne z zasadami HTML i daje możliwość dostosowania wyglądu strony do wymagań projektowych. Tag <font> jest przestarzały w HTML5, jednak wciąż może być używany w kontekście starszych dokumentów HTML. Warto zauważyć, że dla bardziej nowoczesnych praktyk zaleca się korzystanie z CSS (Cascading Style Sheets), gdzie definiowanie kolorów odbywa się w ramach stylów, zamiast bezpośrednio w znacznikach. Przykładowo, w CSS można użyć: .czarnyTekst { color: #000000; } i następnie zastosować tę klasę w znaczniku. Takie podejście poprawia semantykę kodu i ułatwia zarządzanie stylami na stronie, co jest istotne w kontekście optymalizacji SEO i dostępności dla różnych urządzeń."

Pytanie 20

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

Ilustracja do pytania
A. obraz1.png zostanie zniknięty
B. obraz2.png zostanie zniknięty
C. obraz1.png zostanie wymieniony na obraz2.png
D. obraz2.png zostanie wymieniony na obraz1.png

Brak odpowiedzi na to pytanie.

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

Pytanie 21

Który z elementów HTML ma charakter bloku?

A. p
B. strong
C. span
D. img

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik HTML <p> to absolutna podstawa, jeśli chodzi o tworzenie akapitów w dokumentach. Elementy blokowe, do których <p> się zalicza, zajmują całą szerokość, więc zawsze tworzą nową linię przed i po sobie. Używanie znacznika <p> jest mega ważne, bo to nie tylko poprawia czytelność tekstu, ale i semantykę strony. Na przykład, jak myślisz o SEO, to dobrze zorganizowana struktura dokumentu naprawdę pomaga wyszukiwarkom zrozumieć, o co chodzi na stronie. Zresztą, <p> świetnie współpracuje z CSS, dzięki czemu możesz łatwo ustawić marginesy czy odstępy. W praktyce każdy akapit powinien być zawarty w tym znaczniku, bo dzięki temu oddzielasz go od innych elementów, jak nagłówki czy listy. Pamiętaj jednak, żeby nie zagnieżdżać znacznika <p> w innych blokowych znacznikach, bo to sprzeczne z zasadami HTML5. Jak zrozumiesz i wykorzystasz elementy blokowe, to stworzysz naprawdę dobrze zorganizowaną i semantyczną stronę.

Pytanie 22

Który selektor stosuje formatowanie dla akapitów tekstu z klasą tekst oraz dla elementu blokowego o ID obrazki?

A. p.tekst, div#obrazki
B. p#tekst, div.obrazki
C. p.tekst + div#obrazki
D. p#tekst + div.obrazki

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 'p.tekst, div#obrazki' jest poprawna, ponieważ selektor 'p.tekst' odnosi się do elementów <p> z klasą 'tekst', a selektor 'div#obrazki' odnosi się do elementu <div> z identyfikatorem 'obrazki'. Oba selektory są zgodne z zasadami CSS, które pozwalają na stylizację elementów na podstawie ich klas i ID. Na przykład, jeśli chcemy zmienić kolor tekstu w akapitach oraz dodać ramkę do elementu div, możemy zastosować następujący kod: css p.tekst { color: blue; } div#obrazki { border: 1px solid black; } Praktyczne zastosowanie selektorów klas i ID w CSS pozwala na precyzyjne dostosowanie stylu poszczególnych elementów na stronie. Zgodność z najlepszymi praktykami oznacza, że stosujemy jednoznaczne i czytelne nazwy klas oraz ID, co ułatwia późniejszą konserwację kodu oraz współpracę z innymi deweloperami. Warto także pamiętać, że wyższej specyfiki selektory, takie jak ID, mają pierwszeństwo wobec klas, co może wpłynąć na końcowy wygląd elementów na stronie.

Pytanie 23

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

Ilustracja do pytania
A. w znaczniku img zmienić nazwę atrybutu src na alt
B. w znaczniku img zmienić nazwę atrybutu src na href
C. dodać atrybut alt do grafiki
D. zmienić zapis </h1> na <h1>

Brak odpowiedzi na to pytanie.

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

Pytanie 24

Można przypisać wartości: static, relative, fixed, absolute oraz sticky do właściwości

A. display
B. list-style-type
C. position
D. text-transform

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwość CSS 'position' służy do określenia, w jaki sposób element jest pozycjonowany na stronie. Wartości takie jak static, relative, fixed, absolute oraz sticky definiują różne metody pozycjonowania elementów w kontekście innych obiektów oraz w kontekście samego okna przeglądarki. Na przykład, 'static' jest wartością domyślną, co oznacza, że elementy są umieszczane w naturalnym porządku w dokumencie HTML. 'Relative' pozwala na przesunięcie elementu względem jego normalnej pozycji, co daje większą elastyczność w projektowaniu layoutów. 'Absolute' pozycjonuje element względem najbliższego przodka, który również ma ustawioną właściwość 'position' różną od 'static', co umożliwia precyzyjne umiejscowienie elementów. 'Fixed' sprawia, że element pozostaje w tym samym miejscu w oknie przeglądarki, nawet podczas przewijania strony, co jest często wykorzystywane w przypadku nagłówków i stopki. 'Sticky' łączy cechy 'relative' i 'fixed', umożliwiając elementowi bycie na stałe w zasięgu widoku, ale tylko do momentu, gdy nie zostanie przewinięty poza jego kontener. Używanie tych wartości w praktyce pozwala na tworzenie responsywnych i dynamicznych interfejsów użytkownika, które są zgodne z dobrymi praktykami projektowania stron internetowych.

Pytanie 25

W zaprezentowanym fragmencie algorytmu wykorzystano

Ilustracja do pytania
A. jeden blok decyzyjny
B. trzy bloki operacyjne (procesy)
C. jedną pętlę
D. dwie pętle

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Na tym diagramie widać jedną pętlę, co jest dość ważne w programowaniu. Pętla pozwala na powtarzanie pewnych działań, aż spełni się jakiś warunek. Tu mamy blok decyzyjny, który mówi, czy proces ma trwać, czy się zakończyć. To dość powszechnie używane podejście, zwłaszcza w algorytmach, jak na przykład sortowanie czy obróbka danych. Warto zwrócić uwagę, by dobrze zrozumieć, jak działają pętle, szczególnie te oparte na warunkach, jak while czy for. Pozwoli to uniknąć problemów z niekończącymi się pętlami, które mogą sprawić, że program przestanie działać. Z mojego doświadczenia, ogarnać te struktury to kluczowy skill dla każdego, kto chce działać w IT.

Pytanie 26

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

A. #EE0C0C
B. #2551212
C. #AB1A1D
D. #FF0C0C

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kolor 255, 12, 12 w modelu RGB oznacza maksymalne nasycenie koloru czerwonego oraz bardzo niskie wartości zielonego i niebieskiego. Zapis w postaci heksadecymalnej, który jest stosowany w projektowaniu stron internetowych, polega na konwersji wartości RGB do formatu szesnastkowego. W tym przypadku, wartość 255 w systemie dziesiętnym odpowiada FF w systemie szesnastkowym, co oznacza maksymalne nasycenie koloru czerwonego. Wartość 12 w systemie dziesiętnym odpowiada 0C, co jest zbyt niską wartością zarówno dla zielonego, jak i niebieskiego. Dlatego pełny zapis koloru RGB 255, 12, 12 w formacie heksadecymalnym to #FF0C0C. Użycie standardu heksadecymalnego (hex) jest powszechne w CSS, gdzie kolory są definiowane za pomocą szesnastkowych wartości. Przykładowo, aby ustawić tło elementu w CSS na ten kolor, można użyć zapisu: 'background-color: #FF0C0C;'. Warto zrozumieć, że poprawne użycie systemów kolorów RGB i hex jest kluczowe w projektowaniu graficznym i webowym, ponieważ wpływa na estetykę i użyteczność interfejsów użytkownika.

Pytanie 27

Fragment kodu HTML z JavaScript spowoduje, że po kliknięciu przycisku

<img src="obraz1.png">
<img src="obraz2.png" id="id1">
<button onclick="document.getElementById('id1').style.display='none'">Przycisk</button>
A. obraz2.png zastąpi obraz1.png
B. obraz2.png zostanie schowany
C. obraz1.png zastąpi obraz2.png
D. obraz1.png zostanie schowany

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź dotyczy ukrycia obrazu obraz2.png poprzez jego identyfikację za pomocą unikalnego atrybutu id. W kodzie HTML każdy element może być zidentyfikowany przez atrybut id, co pozwala na bezpośrednią manipulację jego własnościami w JavaScript. Funkcja document.getElementById służy do wyszukiwania elementu o podanym id w strukturze DOM dokumentu. Następnie, używając stylowania CSS poprzez właściwość style, możliwe jest zmienienie wartości display na 'none', co skutkuje ukryciem elementu w przeglądarce. Taka technika jest często wykorzystywana w interaktywnych aplikacjach webowych, gdzie użytkownik musi mieć możliwość dynamicznego manipulowania elementami interfejsu. Praktyka ta jest zgodna ze standardami W3C i pozwala na tworzenie responsywnych, przyjaznych użytkownikowi aplikacji. Dobrym przykładem zastosowania jest tworzenie galeria obrazów, gdzie tylko wybrane zdjęcia są wyświetlane w danym momencie. Taka funkcjonalność sprzyja również poprawie czytelności strony, ponieważ użytkownik może ukrywać i odkrywać treści według własnych potrzeb. Zrozumienie tego mechanizmu jest kluczowe dla każdego, kto chce budować nowoczesne strony internetowe z użyciem HTML, CSS i JavaScript.

Pytanie 28

Wskaż znacznik, który umożliwia zapis tekstu, który jest niepoprawny lub niewłaściwy, w formie przekreślonej?

A. <em> </em>
B. <sub> </sub>
C. <b> </b>
D. <s> </s>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
<s> jest znacznikiem HTML, który służy do oznaczania tekstu jako przekreślonego, co wskazuje na to, że dany fragment tekstu jest nieprawidłowy lub nieaktualny. Zastosowanie tego znacznika ma na celu poprawę czytelności oraz zrozumiałości treści, informując użytkowników o tym, że pewne informacje są już nieaktualne. Użycie <s> w dokumentach HTML jest zgodne z wytycznymi W3C, co zapewnia jego wszechstronność w kontekście standardów sieciowych. Przykładem zastosowania tego znacznika może być sytuacja, gdy na stronie internetowej prezentowane są wyniki, a niektóre z nich uległy zmianie, na przykład: <s>Stara cena: 100 PLN</s> Nowa cena: 80 PLN. W ten sposób użytkownicy mają jasny obraz, co uległo zmianie. Warto również dodać, że zastosowanie <s> może mieć zastosowanie w kontekście SEO, gdyż poprawia dostępność treści dla osób korzystających z technologii wspomagających, co może pozytywnie wpłynąć na ranking strony w wynikach wyszukiwania.

Pytanie 29

Którego atrybutu należy użyć w miejscu trzech kropek w znaczniku HTML5 <blockquote>, aby zdefiniować źródło cytatu?

<blockquote ...="https://pl.wikipedia.org">
Pokojowa Nagroda Nobla jest przyznawana kandydatom, którzy wykonali największą lub najlepszą
pracę na rzecz braterstwa między narodami
</blockquote>
A. cite
B. alt
C. src
D. href

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje, twoja odpowiedź jest poprawna. Atrybut 'cite' w znaczniku <blockquote> jest używany do definiowania źródła cytatu. Jest to zgodne z definicją tego atrybutu zawartą w specyfikacji HTML5. W praktyce, jeśli chcesz zacytować fragment tekstu z innego źródła na swojej stronie internetowej, możesz użyć znacznika <blockquote> i atrybutu 'cite' do określenia źródła cytatu, co jest zgodne z dobrymi praktykami branżowymi. Na przykład, <blockquote cite='https://www.example.com'> Tutaj umieść tekst cytatu </blockquote>. Dzięki temu, czytelnik może łatwo odnaleźć źródło cytowanego tekstu. Warto zaznaczyć, że choć atrybut 'cite' nie jest wyświetlany bezpośrednio na stronie, jest on użyteczny dla użytkowników technologii asystujących, takich jak czytniki ekranowe.

Pytanie 30

Aby prawidłowo zorganizować hierarchiczną strukturę tekstu na stronie internetowej, powinno się wykorzystać

A. znaczniki <h1>, <h2> oraz <p>
B. znacznik <div>
C. znaczniki <frame> i <table>
D. znacznik <p> z formatowaniem

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Aby poprawnie zdefiniować hierarchiczną strukturę tekstu witryny internetowej, kluczowe jest zastosowanie znaczników <h1>, <h2>, oraz <p>. Znacznik <h1> jest najważniejszym nagłówkiem na stronie i powinien być używany tylko raz, aby wskazać główny temat treści. Z kolei znaczniki <h2> służą do wyodrębnienia podtematów, co pozwala na tworzenie czytelnej i logicznej struktury dokumentu. Dzięki tym znacznikom, zarówno użytkownicy, jak i wyszukiwarki internetowe mogą łatwiej zrozumieć hierarchię treści. Znacznik <p> jest używany do definiowania akapitów, co dodatkowo poprawia czytelność tekstu. Zastosowanie tej struktury jest zgodne z wytycznymi W3C oraz zasadami SEO, co przyczynia się do lepszego indeksowania przez wyszukiwarki. Przykładowo, strona internetowa poświęcona zdrowemu stylowi życia może mieć <h1> jako 'Zdrowy Styl Życia', a <h2> jako 'Dieta' i 'Ćwiczenia', co ułatwia użytkownikom nawigację oraz przyswajanie treści.

Pytanie 31

Wykorzystanie definicji stylu CSS spowoduje, że nagłówki drugiego poziomu będą się wyświetlać

h2 {
    text-decoration: overline;
    font-style: italic;
    line-height: 60px;
}
A. czcionką kursywną, z linią pod tekstem, wysokość wiersza wynosi 60 px
B. czcionką standardową, z linią nad tekstem, wysokość wiersza wynosi 60 px
C. czcionką kursywną, z linią nad tekstem, wysokość wiersza wynosi 60 px
D. czcionką standardową, z linią pod tekstem, odległość między znakami wynosi 60 px

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź numer 2 jest poprawna, ponieważ definicja stylu CSS zawiera właściwości, które dokładnie odpowiadają tej opcji. Właściwość font-style: italic sprawia, że tekst nagłówka będzie zapisany czcionką pochyloną, co jest często stosowane w celu nadania tekstowi bardziej dynamicznego i estetycznego wyglądu. Jest to szczególnie przydatne w projektowaniu stron internetowych, gdzie wyróżnienie nagłówków ma kluczowe znaczenie dla czytelności i atrakcyjności wizualnej. text-decoration: overline dodaje linię nad tekstem, co jest mniej powszechnym, ale interesującym sposobem na wyróżnienie tekstu. Może być używane w nowoczesnych projektach, aby nadać stronie unikalny charakter. Wysokość wiersza line-height: 60px zapewnia odpowiednią przestrzeń między wierszami, co zwiększa czytelność, szczególnie przy większych czcionkach. Taki sposób formatowania jest zgodny ze standardami projektowania UX/UI, które kładą nacisk na estetykę i funkcjonalność. Dlatego zrozumienie tych właściwości i ich zastosowanie jest kluczowe dla każdego projektanta stron internetowych.

Pytanie 32

Które z poniższego oprogramowania nie jest zaliczane do systemów zarządzania treścią (CMS)?

A. Joomla
B. WordPress
C. Apache
D. Mambo

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Apache to popularny serwer HTTP, który jest odpowiedzialny za zarządzanie i dostarczanie stron internetowych do przeglądarek użytkowników. Choć Apache może być używany w połączeniu z systemami zarządzania treścią (CMS) takimi jak WordPress, Joomla czy Mambo, sam w sobie nie jest systemem CMS. Systemy zarządzania treścią, takie jak Joomla, WordPress i Mambo, są platformami, które umożliwiają użytkownikom łatwe tworzenie, edytowanie i zarządzanie treściami na stronach internetowych bez potrzeby posiadania zaawansowanej wiedzy programistycznej. Apache działa na poziomie serwera, obsługując żądania HTTP i wysyłając odpowiednie pliki, podczas gdy CMS zajmuje się strukturą treści, interfejsem użytkownika oraz zarządzaniem bazą danych. Ponadto, Apache zapewnia wsparcie dla różnych języków programowania oraz technologii webowych, ale nie oferuje funkcji zarządzania treścią, które są kluczowe dla systemów CMS. Dlatego odpowiedź na pytanie jest jednoznaczna – Apache nie jest systemem zarządzania treścią, lecz serwerem, który wspiera ich działanie.

Pytanie 33

Znacznik <ins> w HTML ma na celu wskazanie

A. bloku tekstu, który jest cytowany
B. tekstu, który został przerobiony
C. tekstu, który został usunięty
D. tekstu, który został dodany

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <ins> w HTML jest używany do oznaczania tekstu, który został dodany w kontekście edytowania treści. Zgodnie ze standardem HTML5, element <ins> reprezentuje wprowadzenie nowego tekstu, co jest szczególnie przydatne w kontekście śledzenia zmian w dokumentach. Używając <ins>, możemy nie tylko oznaczyć dodany tekst, ale także dostarczyć kontekstu dla jego wprowadzenia, na przykład poprzez dodanie atrybutu datetime, który wskazuje, kiedy zmiana została wprowadzona. Praktyczne zastosowanie tego znacznika można zauważyć w edytorach treści, gdzie użytkownicy mogą wprowadzać poprawki, a powstałe zmiany są wizualizowane. Dzięki temu osoby przeglądające dokument mogą łatwo zauważyć, co zostało dodane. Warto również wspomnieć, że w połączeniu z odpowiednim stylem CSS, zmiany te mogą być wyróżnione w sposób, który zwiększa czytelność tekstu. Standardy W3C zalecają stosowanie znaczników semantycznych, takich jak <ins>, aby poprawić dostępność oraz zrozumiałość treści.

Pytanie 34

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

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

<script>
    document.getElementById("obraz").src = "kol2.jpg";
</script>
A. kol1.jpg, który może być zmieniony na kol2.jpg po wciśnięciu przycisku.
B. kol2.jpg, który może być zmieniony na kol1.jpg po wciśnięciu przycisku.
C. kol1.jpg
D. kol2.jpg

Brak odpowiedzi na to pytanie.

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

Pytanie 35

W HTML-u atrybut shape w znaczniku area, który definiuje kształt obszaru, może przyjąć wartość

A. rect, triangle, circle
B. poly, square, circle
C. rect, poly, circle
D. rect, square, circle

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut shape znacznika area w języku HTML jest wykorzystywany do określenia kształtu obszaru, który jest aktywny w mapie obrazów. Przyjmuje on wartości rect (prostokąt), poly (wielokąt) oraz circle (okrąg). Każda z tych wartości definiuje sposób, w jaki kształt obszaru jest interpretowany przez przeglądarkę. Na przykład, wartość 'rect' wymaga czterech parametrów, które określają lewy górny i prawy dolny róg prostokąta. W przypadku 'circle', musimy podać współrzędne środka oraz promień okręgu, a 'poly' wymaga podania współrzędnych wszystkich punktów wierzchołków wielokąta. Praktyczne zastosowanie atrybutu shape pozwala na tworzenie interaktywnych map obrazów, gdzie użytkownik może klikać w różne obszary, co zwiększa dostępność i użyteczność strony. Warto pamiętać, że korzystanie z map obrazów i odpowiedniego atrybutu shape powinno być zgodne z aktualnymi standardami W3C, co wpływa na poprawność i wydajność strony internetowej.

Pytanie 36

Jaki zestaw terminów określa interfejs użytkownika witryny internetowej?

A. Szkic strony, diagram witryny, diagram przepływu informacji
B. Obróbka danych, system zarządzania treścią, projektowanie informacji
C. Przesyłanie zapytań do bazy, skrypty PHP
D. Przyciski, menu, interakcja użytkownika z aplikacją

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Interfejs użytkownika (UI) strony internetowej to kluczowy element, który odpowiada za interakcję użytkownika z aplikacją internetową. W jego skład wchodzą różnorodne elementy, takie jak przyciski, menu, formularze, ikony oraz inne komponenty, które umożliwiają użytkownikowi nawigację, wprowadzanie danych oraz podejmowanie akcji. Zastosowanie standardów projektowania, takich jak Material Design czy Human Interface Guidelines, pozwala na tworzenie intuicyjnych i estetycznych interfejsów, co zwiększa użyteczność strony. Przykładowo, przycisk „Zatwierdź” umieszczony w formularzu powinien być wyraźnie oznaczony i łatwo dostępny, aby użytkownicy mogli szybko zakończyć proces rejestracji lub zakupu. Dobre praktyki w zakresie projektowania UI obejmują także responsywność, co oznacza, że interfejs powinien dostosowywać się do różnych rozmiarów ekranów, zapewniając optymalne wrażenia użytkownika na urządzeniach mobilnych oraz desktopowych. Interakcja użytkownika z aplikacją jest kluczowym aspektem, a właściwie zaprojektowany interfejs wpływa na satysfakcję użytkowników oraz ich skłonność do powrotu na stronę.

Pytanie 37

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

A. <b> oraz <u>
B. <u> oraz <sup>
C. <i> oraz <mark>
D. <b> oraz <i>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znaczniki HTML <strong> oraz <em> mają kluczowe znaczenie w kontekście semantyki i formatowania tekstu w dokumentach HTML. Znacznik <strong> wskazuje na tekst o zwiększonej ważności, co jest zgodne z jego domyślnym formatowaniem, które w większości przeglądarek wyświetla tekst pogrubiony. Z kolei znacznik <em> sugeruje tekst, który powinien być akcentowany w odpowiedni sposób, a jego domyślne formatowanie to kursywa. W związku z tym, ich odpowiednikami pod względem formatowania są znaczniki <b> oraz <i>. Znacznik <b> służy do pogrubienia tekstu, ale nie niesie ze sobą żadnej dodatkowej semantyki, natomiast <i> używany jest do kursywy bez wskazania na ważność. W praktyce, należy używać <strong> i <em> tam, gdzie semantyka jest kluczowa dla zrozumienia treści, a dodatkowe znaczenie przekłada się na lepsze pozycjonowanie w wyszukiwarkach oraz dostępność dla osób korzystających z technologii asystujących. Ważne jest, by przestrzegać dobrych praktyk webowych i stosować znaczniki semantyczne, co pozwoli na efektywne przekazywanie informacji zarówno użytkownikom, jak i robotom indeksującym.

Pytanie 38

Do stworzenia stron internetowych w sposób graficzny należy zastosować

A. oprogramowanie MS Office Picture Manager
B. program do przeglądania stron
C. aplikację typu WYSIWYG
D. narzędzie do edycji CSS

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Programy typu WYSIWYG (What You See Is What You Get) to narzędzia, które umożliwiają użytkownikom tworzenie stron internetowych w sposób wizualny, bez konieczności pisania kodu HTML czy CSS. Użytkownik może przeciągać i upuszczać elementy, takie jak tekst, obrazy czy formularze, a program automatycznie generuje odpowiedni kod. Przykładami popularnych programów WYSIWYG są Adobe Dreamweaver oraz Webflow, które posiadają zaawansowane funkcje, takie jak responsywność oraz integrację z systemami zarządzania treścią. W kontekście standardów webowych, programy WYSIWYG często oferują zgodność z aktualnymi wytycznymi, takimi jak HTML5 i CSS3, co pozwala na tworzenie nowoczesnych, atrakcyjnych wizualnie stron internetowych. Dla osób, które nie mają doświadczenia w programowaniu, takie narzędzia są szczególnie cenne, ponieważ umożliwiają łatwe tworzenie profesjonalnych witryn, które mogą być optymalizowane pod kątem SEO, co jest kluczowe w dzisiejszym świecie online. Dzięki programom WYSIWYG, także osoby z ograniczonymi umiejętnościami technicznymi mogą skutecznie tworzyć i edytować swoje strony, co znacznie przyspiesza proces projektowania.

Pytanie 39

W formularzu zdefiniowano kontrolki do wpisania imienia i nazwiska. Który atrybut reprezentuje podpowiedź umiejscowioną w polu kontrolki, znikającą w momencie, gdy użytkownik rozpocznie wpisywanie wartości?

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Dobrze! Poprawna odpowiedź to 'placeholder'. Atrybut 'placeholder' w elemencie input HTML jest używany do wyświetlania podpowiedzi wewnątrz pola formularza, która znika, gdy użytkownik zaczyna wpisywanie danych. Jest to zgodne z pytaniem, w którym poproszono o atrybut reprezentujący podpowiedź w polu formularza, która znika, gdy użytkownik rozpoczyna wpisywanie. Przykładem może być formularz logowania, gdzie w polach 'Użytkownik' i 'Hasło' można umieścić podpowiedzi 'Wpisz nazwę użytkownika' i 'Wpisz hasło' odpowiednio. Atrybut 'placeholder' jest bardzo przydatny w interaktywnym designie, pomagając użytkownikom zrozumieć, jakie informacje są od nich oczekiwane w danym polu formularza.

Pytanie 40

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 class = "stopka"> …
D. <div id = "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.