Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 11 czerwca 2026 12:31
Data zakończenia: 11 czerwca 2026 12:53

Egzamin zdany!

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

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

W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

A. <p>W tym <i>paragrafie <b>zobaczysz</b> sposoby formatowania</i> tekstu w HTML</p>

B. <p>W tym <i>paragrafie zobaczysz sposoby formatowania</i> 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 <b>paragrafie <i>zobaczysz</i> sposoby formatowania</b> tekstu w HTML</p>

Wybór niepoprawnych odpowiedzi wynika z błędnego użycia znaczników HTML, co wpływa na końcowe formatowanie tekstu. Pierwsza odpowiedź zawiera błąd polegający na niewłaściwym zamknięciu znacznika <b> przez dodanie spacji przed ukośnikiem, co powoduje, że przeglądarki mogą błędnie interpretować strukturę HTML. W konsekwencji, tekst może nie być prawidłowo pogrubiony, ponieważ przeglądarka nie rozpoznaje zamknięcia znacznika. Trzecia odpowiedź całkowicie pomija znacznik <b>, co oznacza, że tekst 'zobaczysz' nie zostanie pogrubiony, co jest niezgodne z wymaganym efektem wizualnym. Brak zastosowania odpowiednich znaczników wpływa na semantyczne znaczenie zawartości, co jest kluczowe w kontekście dostępności i dobrych praktyk w web designie. Czwarta odpowiedź błędnie rozdziela znaczniki <i> wokół słowa 'zobaczysz', co nie tworzy efektu jednoczesnej kursywy i pogrubienia. Wiedza dotycząca zagnieżdżania znaczników jest istotna, aby uzyskać pożądany efekt wizualny, a także utrzymać semantykę i dostępność zgodnie z nowoczesnymi standardami tworzenia stron internetowych. Rozumienie hierarchii i poprawne zamykanie znaczników ma kluczowe znaczenie dla renderowania strony zgodnie z oczekiwaniami, jak również dla zachowania zgodności z HTML5.

Pytanie 2

Wskaż stwierdzenie, które jest prawdziwe dla następującej definicji stylu:

<style type="text/css">
 <!--
   p {color: blue; font-size: 14pt; font-style: italic}
   a { font-size: 16pt; text-transform: lowercase; }
   td.niebieski { color: blue }
   td.czerwony { color: red }
 -->
 </style>

A. Jest to styl lokalny.

B. Zdefiniowano dwie klasy.

C. Akapit będzie transponowany na małe litery.

D. Odnośnik będzie pisany czcionką 14 punktów.

Gratulacje, dobrze odpowiedziałeś. W załączonym kodzie CSS zdefiniowano dwie klasy, a mianowicie 'niebieski' i 'czerwony'. Klasy te są przypisane do elementów TD, co oznacza, że komórki tabeli mogą mieć kolor niebieski lub czerwony w zależności od przypisanej klasy. Klasy CSS są jednym z podstawowych sposobów formatowania elementów na stronie internetowej, które pozwalają na stylizowanie grup elementów na podstawie wspólnego identyfikatora klasy. Zamiast formatować każdy element HTML osobno, możemy jednorazowo zdefiniować styl dla klasy, a następnie przypisać tę klasę do dowolnej liczby elementów. To jest zgodne z dobrymi praktykami programowania DRY (Don't Repeat Yourself), co zwiększa czytelność i utrzymanie kodu. W kontekście pytania, każda komórka tabeli przypisana do klasy 'niebieski' lub 'czerwony' będzie miała odpowiednio niebieski lub czerwony kolor.

Pytanie 3

Projektant stworzył logo dla witryny internetowej. Jest to czarny symbol na przezroczystym tle. Aby zachować wszystkie cechy obrazu i umieścić go na stronie, projektant powinien zapisać obraz w formacie

A. JPEG

B. PNG

C. CDR

D. BMP

Format JPG (Joint Photographic Experts Group) jest powszechnie stosowany do zdjęć i grafik z dużą ilością kolorów, ale nie obsługuje przezroczystości. Z tego powodu nie sprawdzi się w przypadku logo, które wymaga przezroczystego tła. JPG jest formatem kompresji stratnej, co oznacza, że z każdym zapisaniem obrazu, jakość ulega pogorszeniu, co jest nieakceptowalne w kontekście profesjonalnego logo. BMP (Bitmap) to format, który oferuje bardzo wysoką jakość obrazu, ale jego pliki są znacznie większe, co może wpływać na czas ładowania strony internetowej. BMP nie obsługuje przezroczystości tła, co również czyni go niewłaściwym wyborem dla logo, które ma być umieszczone na różnych kolorowych tłach. CDR (CorelDRAW) to natomiast format plików wektorowych używany przede wszystkim w aplikacji CorelDRAW. Chociaż grafika wektorowa jest doskonała do tworzenia logo, format CDR nie jest standardem w sieci i nie może być bezpośrednio użyty na stronach internetowych bez konwersji do odpowiednich formatów rastrowych, jak PNG czy JPG. Dla powyższych powodów, wybór formatu PNG jest najbardziej logiczny i praktyczny w kontekście umieszczania logo na stronie internetowej.

Pytanie 4

Grafika powinna być zapisana w formacie GIF, jeśli

A. istnieje potrzeba zapisu obrazu w formie bez kompresji

B. konieczne jest zapisanie obrazu lub animacji

C. jest to grafika wektorowa

D. jest to obraz w technologii stereoskopowej

Format GIF (Graphics Interchange Format) jest powszechnie wykorzystywany do przechowywania obrazów oraz animacji. Dzięki obsłudze przezroczystości oraz możliwości tworzenia prostych animacji, GIF stał się standardem w przypadku grafiki na stronach internetowych. Jego ograniczenie do 256 kolorów sprawia, że idealnie nadaje się do prostych grafik, takich jak logo czy ikony, gdzie nie jest wymagana pełna gama kolorów, co ma miejsce w formatach takich jak JPEG czy PNG. W przypadku animacji, GIF umożliwia zapis wielu klatek w jednym pliku, co pozwala na odtwarzanie sekwencji obrazu bez potrzeby korzystania z dodatkowego oprogramowania. Praktyczne zastosowanie GIF-a można zaobserwować w mediach społecznościowych, gdzie animowane obrazki są często wykorzystywane do wyrażania emocji, a także na stronach internetowych do przedstawiania logo w ruchu. Używanie formatu GIF w kontekście animacji jest zgodne z dobrą praktyką w branży, ponieważ pozwala na efektywne zarządzanie zasobami wizualnymi oraz zwiększa atrakcyjność treści wizualnych.

Pytanie 5

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

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

B. treści polską czcionką

C. znaku przekreślenia

D. znaku wielokropka

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 6

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

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

B. Dokument jest zapisany w wersji HTML 4.

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

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

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 7

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

A. WordPress

B. Mambo

C. Joomla

D. Apache

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 8

W HTML-u, aby umieścić animację FLASH (z rozszerzeniem .swf) na stronie www, powinno się wykorzystać znacznik

A. <object>

B. <audio>

C. <img>

D. <video>

No to wiesz, że znacznik <object> to najlepszy sposób na osadzanie multimediów na stronie, zwłaszcza animacji FLASH (.swf). Działa to tak, że możemy włączyć różne treści zewnętrzne do HTML, co jest super do integracji różnych plików, jak wideo czy dźwięki. Patrz na ten przykład: <object data='animacja.swf' width='600' height='400'> <param name='autoplay' value='true'> <param name='loop' value='true'> </object>. Zauważ, że <object> może mieć różne atrybuty, które pomagają w kontrolowaniu jak to wszystko się wyświetla, jak 'width', 'height' i inne parametry odtwarzania. Jednak, biorąc pod uwagę dzisiejsze standardy, FLASH jest trochę na wylocie przez problemy z bezpieczeństwem i wsparciem przeglądarek. Lepiej więc, zamiast tego, patrzeć w stronę HTML5 i JavaScript do tworzenia animacji. Można używać animacji CSS3 lub różnych bibliotek JS, które dają dużo więcej możliwości i lepsze wsparcie na urządzeniach mobilnych.

Pytanie 9

W poniższym zapisie CSS kolor zielony zostanie zastosowany do

h2
{
    background-color: green;
}

A. czcionki wszystkich nagłówków na stronie

B. tła tekstu nagłówka drugiego poziomu

C. tła całej witryny

D. czcionki nagłówka drugiego poziomu

Zapis CSS h2 { background-color: green; } oznacza, że każdemu elementowi nagłówka drugiego stopnia przypisany zostanie zielony kolor tła. W CSS selektor h2 odnosi się bezpośrednio do wszystkich elementów HTML o tagu <h2>. Właściwość background-color służy do definiowania koloru tła elementu, nie wpływając na kolor czcionki samego nagłówka. W praktyce takie podejście pozwala na wyraźne wyróżnienie nagłówków na tle innych elementów strony, co może być kluczowe dla poprawy czytelności. Przyjęte w kodzie standardy zapewniają zgodność z najnowszymi wytycznymi W3C, pozwalając na efektywne zarządzanie stylami w projekcie. Wiedza o tym jak stylizować nagłówki za pomocą background-color jest fundamentalna dla każdego web developera, umożliwiając tworzenie atrakcyjnych i czytelnych interfejsów użytkownika w sposób zgodny z zasadami responsywnego projektowania. Ponadto, stosowanie takich stylizacji wspiera semantyczne podejście do strukturyzacji treści, co jest ważne dla optymalizacji SEO.

Pytanie 10

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

A. <ol>

B. <li>

C. <dl>

D. <ul>

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

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

A. font-weight

B. font-size

C. text-weight

D. text-size

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

Pytanie 12

Na stronie WWW umieszczono obrazek, a następnie akapit. Aby obrazek był wyświetlany przez przeglądarkę w tej samej linii co akapit, po lewej stronie tekstu akapitu, w stylu CSS dla obrazka należy ustawić formatowanie

A. alt: left;

B. style: left;

C. float: left;

D. align: left;

Odpowiedź "float: left;" jest poprawna, ponieważ właściwość CSS "float" służy do określenia, w jaki sposób elementy są rozmieszczane na stronie. Ustawienie "float: left;" dla rysunku sprawia, że zostaje on umieszczony po lewej stronie swojego kontenera, a pozostałe elementy, takie jak akapit, mogą układać się obok niego. Jest to powszechnie stosowana technika w układach stron internetowych, pozwalająca na osiągnięcie płynnych i responsywnych rozkładów treści. Na przykład, w przypadku gdy mamy obrazek i akapit, stosując float, obrazek zostanie wypchnięty w lewo, a tekst akapitu automatycznie dostosuje się, zajmując dostępną przestrzeń obok rysunku. Warto również dodać, że po zastosowaniu float, należy zadbać o usunięcie efektu 'zatrzymywania się' rysunków, co można osiągnąć poprzez stosowanie właściwości "clear" w odpowiednich miejscach, aby nie zakłócać układu sąsiednich elementów. Tego typu techniki są fundamentem projektowania stron, zgodnie z zasadami dobrych praktyk UX/UI oraz standardami W3C. W przypadku bardziej złożonych układów warto również rozważyć zastosowanie Flexbox lub Grid Layout, które oferują większą elastyczność i kontrolę nad położeniem elementów w nowoczesnych projektach.

Pytanie 13

Jakie polecenie HTML powinno być zastosowane, aby sformatować akapit tekstu?

Tekst może być zaznaczony albo istotny dla autora

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

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

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

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

Odpowiedź druga jest prawidłowa, ponieważ stosuje poprawną składnię HTML do oznaczenia fragmentów tekstu z różnym formatowaniem. Element <p> służy do definiowania paragrafu, w którym tekst jest umieszczony. Element <mark> używany jest do oznaczania tekstu, który powinien być zwrócony uwagę czytelnika, poprzez podkreślenie go kolorem tła. Z kolei <em> jest przeznaczony do oznaczenia tekstu, który ma zostać wyróżniony jako istotny, zazwyczaj poprzez użycie kursywy. Użycie tych elementów w połączeniu z zamykającymi tagami, jak w odpowiedzi drugiej, jest zgodne z zaleceniami standardów HTML5, które kładą nacisk na semantyczne znaczenie znaczników. To podejście wspiera dostępność oraz SEO, ponieważ pomaga czytnikom ekranowym i wyszukiwarkom lepiej zrozumieć strukturę i znaczenie treści. Praktyczne zastosowanie tych znaczników można zobaczyć na stronach internetowych, gdzie kluczowe informacje muszą być odpowiednio wyróżnione, aby poprawić doświadczenie użytkownika i przekazać istotne dane w czytelny sposób.

Pytanie 14

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

A. *

B. #

C. . (kropka)

D. : (dwukropek)

Kiedy mówimy o selektorach w CSS, to warto pamiętać, że jeśli wybierzesz błędny symbol, to nie zadziała. Na przykład, dwukropek (:) nie definiuje klas, a raczej pseudoklasy i pseudoelementy, takie jak :hover, czy :focus, które są przydatne, gdy chcesz stylizować elementy w różnych stanach. Hash (#) to z kolei znacznik dla identyfikatora – możesz go użyć, ale tylko raz w całym dokumencie. Trochę ogranicza, nie? A gwiazdka (*) to selektor uniwersalny, działa na wszystko, co wcale nie jest precyzyjne. Dlatego pamiętaj, że tylko kropka (.) jest tą właściwą opcją do definiowania klas w CSS, bo to daje więcej możliwości w stylizacji HTML.

Pytanie 15

W CSS określono stylizację dla paragrafu, która nada mu następujące właściwości:

A. tło czerwone, kolor tekstu niebieski, marginesy zewnętrzne ustawione na wartość 40 px

B. tło niebieskie, kolor tekstu czerwony, marginesy wewnętrzne ustawione na wartość 40 px

C. tło czerwone, kolor tekstu niebieski, marginesy wewnętrzne ustawione na wartość 40 px

D. tło niebieskie, kolor tekstu czerwony, marginesy zewnętrzne ustawione na wartość 40 px

W CSS stylizacja elementów HTML jest kluczowa dla tworzenia estetycznych i funkcjonalnych stron internetowych W przypadku tego pytania analizujemy przypisanie właściwości stylu do elementu paragrafu Kod CSS background-color red ustawia tło na czerwone color blue przypisuje niebieski kolor tekstu natomiast margin 40px ustawia marginesy zewnętrzne wokół elementu na 40 pikseli Każda z tych właściwości pełni określoną rolę background-color odnosi się do koloru tła całego elementu co jest przydatne w wyróżnianiu lub oddzielaniu sekcji strony color zmienia kolor tekstu co jest istotne dla czytelności i estetyki treści natomiast margin wpływa na odstęp pomiędzy elementami zapewniając przejrzystość i poprawne rozmieszczenie na stronie Zrozumienie tych właściwości jest kluczowe dla projektowania responsywnych i estetycznych stron internetowych W praktyce używa się ich do tworzenia interfejsów które są atrakcyjne wizualnie i funkcjonalne dla użytkowników Zgodnie z dobrymi praktykami warto dbać o kontrast i spójność wizualną co jest bezpośrednio związane z omawianymi właściwościami

Pytanie 16

Jakie oznaczenie powinno się zastosować, aby umieścić film na stronie internetowej?

A. <media>

B. <movie>

C. <audio>

D. <video>

Znacznik <video> jest właściwym elementem HTML używanym do osadzania filmów na stronach internetowych. Jest on częścią standardu HTML5, który wprowadził nowoczesne podejścia do multimediów w sieci. Umożliwia on nie tylko osadzanie wideo, ale także dostosowywanie jego odtwarzania, takie jak automatyczne odtwarzanie, powtarzanie oraz kontrolowanie głośności. Przykład użycia znacznika <video>: <video src='film.mp4' controls>Odtwarzacz wideo</video>. Warto również dodać atrybuty, takie jak 'controls', które dodają przyciski do odtwarzania, pauzowania i regulacji głośności, co znacząco poprawia użyteczność dla użytkowników. Dobrą praktyką jest również używanie atrybutu 'poster' do określenia miniatury, która będzie wyświetlana przed rozpoczęciem odtwarzania, co przyciąga uwagę i zwiększa estetykę strony. Znacznik <video> wspiera różne formaty plików, takie jak MP4, WebM i Ogg, co zapewnia szeroką kompatybilność z różnymi przeglądarkami internetowymi, co jest kluczowe w dzisiejszym zróżnicowanym środowisku online.

Pytanie 17

Dla którego akapitu zastosowano przedstawioną właściwość stylu CSS?

A. Akapit 3

B. Akapit 2

C. Akapit 1

D. Akapit 4

Wybrana przez Ciebie odpowiedź jest nieprawidłowa. Właściwość CSS 'border-radius: 20%;' nie została zastosowana do akapitu, który wybrałeś. Wskazuje na to fakt, że rogi akapitu są prostokątne, a nie zaokrąglone. Zaokrąglenie rogów jest efektem działania tej właściwości CSS. Warto pamiętać, że 'border-radius' to ważna właściwość, która daje możliwość manipulowania kształtem elementów HTML. Można za jej pomocą tworzyć różne efekty estetyczne, takie jak zaokrąglone rogi, elipsy czy okręgi. Jednak jej użycie powinno być zawsze przemyślane i dostosowane do ogólnego stylu strony. W przeciwnym razie, niewłaściwe użycie tej właściwości może zaburzyć harmonię projektu. Pamiętaj, że rozumienie i umiejętność zastosowania różnych właściwości CSS jest kluczem do tworzenia atrakcyjnych i funkcjonalnych stron internetowych.

Pytanie 18

Definicja stylu w CSS, którą zaprezentowano, dotyczy odsyłacza, który

a:visited {color: orange;}

A. ma wskaźnik myszy umieszczony nad sobą

B. jeszcze nigdy nie został odwiedzony

C. posiada niepoprawny adres URL

D. był wcześniej odwiedzany

Pseudoklasa :visited w CSS jest używana do stylizowania odsyłaczy, które zostały już odwiedzone przez użytkownika. Oznacza to, że przeglądarka zapisuje informacje o odwiedzonych stronach w historii przeglądania i na tej podstawie zmienia styl odsyłacza. W przykładzie a:visited {color: orange;} zmienia kolor tekstu odwiedzonych linków na pomarańczowy. Jest to powszechna praktyka stosowana w projektowaniu stron internetowych, która pomaga użytkownikom wizualnie odróżniać odwiedzone odsyłacze od nieodwiedzonych, co poprawia ich orientację na stronie. Dobre praktyki projektowania zakładają tworzenie intuicyjnych interfejsów użytkownika i użycie mechanizmu :visited do poprawy użyteczności. Ważne jest, aby unikać stosowania bardziej zaawansowanych stylów w :visited, takich jak zmiana rozmiaru czcionki czy dodawanie obrazów tła, ze względu na ograniczenia bezpieczeństwa przeglądarek, które chronią prywatność użytkowników. Korzystanie z :visited w sposób świadomy i zgodny ze standardami W3C zwiększa efektywność nawigacji i jest istotnym elementem przyjaznego projektowania stron WWW

Pytanie 19

W załączonym kodzie CSS, kolor został zapisany w formacie

color: #008000;

A. CMYK

B. dziesiętnej

C. HSL

D. szesnastkowej

W CSS kolory często zapisywane są w postaci szesnastkowej ponieważ jest to krótki i precyzyjny sposób definiowania koloru. Kod szesnastkowy składa się zazwyczaj z sześciu znaków poprzedzonych znakiem hash (#) gdzie pierwsze dwa znaki odpowiadają czerwonej składowej następne dwa zielonej a ostatnie dwa niebieskiej. Na przykład #008000 oznacza kolor zielony gdzie czerwona składowa wynosi 0 zielona 128 a niebieska 0. Wartości te są zapisane w systemie szesnastkowym co oznacza że mogą przyjmować wartości od 00 do FF odpowiadające wartościom dziesiętnym od 0 do 255. Korzystanie z formatu szesnastkowego jest powszechnie uznawane za dobrą praktykę w web designie ponieważ jest szeroko wspierane przez przeglądarki internetowe i umożliwia łatwe definiowanie szerokiej gamy kolorów. Dzięki swojej zwięzłości i jednoznaczności jest preferowane w projektach gdzie każda linijka kodu ma znaczenie. Przy wyborze koloru warto korzystać z narzędzi które mogą pomóc w konwersji wartości RGB na szesnastkowe co ułatwia dokładne odwzorowanie wybranych kolorów

Pytanie 20

Który z przedstawionych rysunków ilustruje efekt działania zamieszczonego fragmentu kodu HTML?

A. rys. A

B. rys. D

C. rys. B

D. rys. C

Odpowiedzi inne niż rys. C nie są poprawne z powodu błędnego zrozumienia jak działa atrybut rowspan w języku HTML. Gdy komórka tabeli posiada atrybut rowspan oznacza to że komórka ta rozciąga się pionowo na określoną liczbę wierszy. W przypadku braku zrozumienia tego mechanizmu można błędnie przypuszczać że każda komórka zaczyna się i kończy w obrębie jednego wiersza. Taki tok myślenia prowadzi do niepoprawnego rozmieszczenia elementów tabeli jak w rys. A lub D gdzie nie wzięto pod uwagę łączenia komórek w pionie. W odpowiedzi A pierwsza komórka nie obejmuje dwóch wierszy co jest sprzeczne z kodem. W odpowiedzi B z kolei drugi wiersz zawiera dwie komórki co również jest sprzeczne z kodem który definiuje tylko jedną. Takie błędy często wynikają z braku doświadczenia w używaniu zaawansowanych funkcji HTML co może prowadzić do mylnych wyobrażeń o tym jak kod przekłada się na widok strony. Atrybuty rowspan i colspan są kluczowe w kontekście strukturalnego podejścia do budowy stron internetowych i ich poprawne użycie ma istotne znaczenie dla dostępności oraz zrozumienia danych przez użytkowników i technologie wspomagające. Ważne jest także zrozumienie różnic między tworzeniem struktury a prezentacją co jest możliwe dzięki CSS zamiast nadużywania tabel do layoutów.

Pytanie 21

Witryna internetowa zawiera poziome menu w formie listy punktowanej. Aby elementy tej listy mogły być wyświetlane w jednej linii, należy przypisać selektorowi li właściwość

A. text-align

B. outline

C. position

D. display

Wybór opcji 'outline' jako właściwości do ustawienia dla selektora 'li' w kontekście wyświetlania elementów listy w jednej linii jest błędny, ponieważ 'outline' dotyczy jedynie rysowania konturów wokół elementu, nie wpływa natomiast na ich układ. Przykładowo, 'outline' jest często używane w celu poprawy dostępności elementów interaktywnych, takich jak przyciski, ale nie ma żadnego wpływu na ich położenie w dokumencie. Z kolei 'position' jest używane do określenia sposobu pozycjonowania elementów, co również nie wpływa na ich wyświetlanie w jednej linii. Choć 'position: relative;' lub 'absolute;' mogą zmienić sposób, w jaki elementy są rozmieszczone w stosunku do siebie, to jednak nie jest to odpowiednie narzędzie do uzyskania efektu poziomego menu. Natomiast 'text-align' jest właściwością, która ustala sposób wyrównania tekstu wewnątrz bloku, ale również nie dotyczy samego wyświetlania elementów listy. Używanie takich podejść może prowadzić do nieporozumień i błędów w projektach, gdzie kluczowe jest zrozumienie, że różne właściwości CSS mają swoje specyficzne zastosowania i nie mogą być zamieniane. Zrozumienie tego aspektu jest kluczowe dla prawidłowego tworzenia układów w stronach internetowych i unikania typowych błędów w stylizacji.

Pytanie 22

W stylu CSS ustalono obramowanie pojedyncze, które ma następujące kolory dla krawędzi:

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

A. górna – czerwona, lewa – niebieska, dolna – zielona, prawa – żółta

B. prawa – czerwona, dolna – niebieska, lewa – zielona, górna – żółta

C. lewa – czerwona, dolna – niebieska, prawa – zielona, górna – żółta

D. górna – czerwona, prawa – niebieska, dolna – zielona, lewa – żółta

Przy definiowaniu obramowania za pomocą CSS warto zrozumieć jak działa właściwość border-color. Gdy podajemy cztery wartości kolorów w tej właściwości dotyczą one krawędzi w kolejności zgodnej ze wskazówkami zegara: górna prawa dolna i lewa. To oznacza że pierwsza wartość odnosi się do krawędzi górnej druga do prawej trzecia do dolnej a czwarta do lewej. Częstym błędem jest przypisywanie kolorów w innej kolejności co prowadzi do błędnych interpretacji i niewłaściwego wyświetlania na stronie. Należy również zwrócić uwagę na to że brak zrozumienia tej kolejności może skutkować niespójnym wyglądem różnych części interfejsu co obniża jakość projektu. W praktyce warto przetestować różne konfiguracje obramowań aby upewnić się że interfejs jest nie tylko estetyczny ale i funkcjonalny. Właściwe stosowanie CSS do stylizacji obramowań jest kluczowe dla tworzenia profesjonalnych i atrakcyjnych stron internetowych co jest uznawane za dobrą praktykę w branży.

Pytanie 23

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

input {
    padding: 10px;
    background-color: Teal;
    color: white;
    border: none;
    border-radius: 7px;
}

A. Pole 2

B. Pole 3

C. Pole 1

D. Pole 4

Pole 2 zostało sformatowane zgodnie z podanym stylem CSS Ponieważ właściwość padding została ustawiona na 10px pole tekstowe ma wewnętrzny odstęp wokół zawartości co sprawia że tekst nie dotyka bezpośrednio krawędzi pola Kolor tła ustawiony na Teal odróżnia to pole od innych które mogą mieć domyślne kolory tła Biały kolor tekstu zapewniony przez właściwość color sprawia że tekst jest czytelny na ciemnym tle Brak obramowania dzięki border none powoduje że pole nie ma widocznej linii wokół siebie co nadaje mu czysty wygląd Zaokrąglenie krawędzi ustawione na 7px border-radius daje bardziej nowoczesny wygląd a także ułatwia integrację z różnymi projektami interfejsu użytkownika Takie podejście do stylizacji elementów formularzy jest zgodne z nowoczesnymi trendami projektowania stron internetowych gdzie używane są łagodne zaokrąglenia oraz odpowiednio dobrane kontrasty kolorystyczne W praktyce takie style są nie tylko estetyczne ale także poprawiają użyteczność interfejsu poprzez zwiększenie czytelności i intuicyjności obsługi formularzy Warto również zauważyć że zastosowanie CSS do formatowania elementów pozwala na zachowanie spójności wyglądu na różnych stronach oraz łatwą modyfikację w przyszłości

Pytanie 24

Aby w HTML uzyskać odpowiednie formatowanie paragrafu dla tekstu:

Tekst może być zaznaczony albo istotny dla autora

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

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

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

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

Aby uzyskać odpowiednie formatowanie tekstu w języku HTML, ważne jest zastosowanie właściwych znaczników semantycznych, które nie tylko wpływają na wygląd tekstu, ale także na jego znaczenie w kontekście SEO oraz dostępności. W przypadku tego pytania, poprawne użycie znaczników <mark> i <em> jest kluczowe. Znacznik <mark> służy do wyróżnienia fragmentu tekstu, co informuje użytkowników, że jest on istotny lub wymaga szczególnej uwagi. Natomiast znacznik <em> (emphasis) jest używany do podkreślenia ważności słów, co również ma znaczenie semantyczne. Przykładowo, kod <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p> skutecznie oddziela dwa różne aspekty tekstu, zachowując przy tym poprawność strukturalną HTML. Zgodność z W3C oraz z zasadami dostępności WCAG (Web Content Accessibility Guidelines) jest fundamentalna, aby zapewnić, że strona internetowa jest przyjazna dla wszystkich użytkowników, w tym osób z niepełnosprawnościami. Właściwe użycie tych znaczników wpływa na indeksację treści przez wyszukiwarki, co może poprawić widoczność strony w wynikach wyszukiwania.

Pytanie 25

W stylu CSS zdefiniowano klasę uzytkownik:

p.uzytkownik {
    color: blue;
}

Na stronie będą wyświetlane czcionką w kolorze niebieskim:

A. wszystkim elementom w sekcji <body> z przypisaną klasą uzytkownik.

B. wszystkie akapity.

C. tylko elementy tekstowe typu <p>, <h1>.

D. paragrafy, do których została przypisana klasa uzytkownik.

Deklaracja selektora p.uzytkownik oznacza w CSS połączenie selektora typu z selektorem klasy. Innymi słowy: przeglądarka wybierze tylko te elementy <p>, które mają w atrybucie class wpisaną klasę uzytkownik, np. <p class="uzytkownik">Treść</p>. Sama kropka przed nazwą klasy definiuje selektor klasy, a litera p przed kropką zawęża go wyłącznie do paragrafów. Gdyby w stylu było samo .uzytkownik { color: blue; }, wtedy reguła objęłaby wszystkie elementy z tą klasą, niezależnie czy to <p>, <div>, <h1> czy cokolwiek innego. Moim zdaniem to jedno z podstawowych, ale bardzo ważnych rozróżnień w CSS: kombinacja selektorów pozwala dokładnie kontrolować, które elementy są stylowane. Dzięki temu nie trzeba nadawać unikalnych klas dla każdego typu elementu, tylko łączyć selektor typu (np. p, h1, li) z klasą, gdy jest to potrzebne. W praktyce w projektach spotyka się dużo takich zapisów: np. li.active, a.button-primary, input.error. To pomaga utrzymać porządek w arkuszu stylów i unikać niepotrzebnie szerokiego działania reguł. Warto też zwrócić uwagę na specyficzność: p.uzytkownik ma większą specyficzność niż samo p, ale mniejszą niż np. #idElementu. Przy konfliktach stylów przeglądarka bierze to pod uwagę. Dobra praktyka jest taka, żeby nie pisać zbyt ogólnych selektorów, które kolorują „pół strony” przypadkiem. Taki selektor jak w pytaniu jest bezpieczny i precyzyjny – wiadomo dokładnie, że kolor niebieski trafi tylko do tych paragrafów, którym świadomie przypiszemy klasę uzytkownik w HTML.

Pytanie 26

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

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

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

C. wszystkie akapity.

D. jedynie elementy tekstowe takie jak <p>, <h1>.

Odpowiedź, że paragrafy przypisane do klasy 'uzytkownik' będą miały niebieską czcionkę, jest jak najbardziej trafna. W CSS używamy kropki, żeby zdefiniować klasę, co oznacza, że styl dotyczy tylko tych elementów HTML, które mają tę klasę. Więc jeśli masz coś takiego w HTML jak <p class='uzytkownik'>, to na pewno będzie to wyświetlane z niebieską czcionką, zgodnie z Twoją regułą CSS. Takie podejście super wspiera modularność i możliwość ponownego użycia kodu, co jest naprawdę ważne w tworzeniu stron. Dzięki klasom CSS łatwo da się ogarnąć styl w różnych miejscach w kodzie, a zmieniając kolor czcionki w pliku CSS, zmiana ta natychmiast zaktualizuje wszystkie elementy z tą klasą. Przykładowo, akapit <p class='uzytkownik'> będzie miał niebieski kolor i to fajnie wpływa na spójność wizualną strony. Pamiętaj też, że klasy CSS można stosować nie tylko do akapitów, ale też do innych znaczników, co daje większą swobodę w stylizacji treści.

Pytanie 27

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

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

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

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

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

Zrozumienie działania atrybutów size i maxlength w znaczniku <input> jest kluczowe dla prawidłowego projektowania formularzy HTML. Atrybut size określa, ile znaków będzie widocznych w polu tekstowym, jednak to nie ogranicza faktycznej liczby znaków, które można wprowadzić. Działa to bardziej jako wskazówka dla użytkownika, jak szerokie może być pole, aby pomieścić określoną liczbę widocznych znaków. Dlatego odpowiedź, że size determinuje maksymalną ilość wprowadzanych znaków, jest błędna. Natomiast atrybut maxlength rzeczywiście ogranicza liczbę znaków, które można wprowadzić. Dzięki temu atrybutowi możemy kontrolować długość danych wejściowych, co jest często wykorzystywane w aplikacjach wymagających wprowadzania haseł lub innych danych tekstowych o określonej długości. W przypadku inputów typu password, wprowadzone znaki są maskowane, co oznacza, że użytkownik nie widzi tego, co wpisuje, a jego odpowiednik wprowadzenia tekstu typu tekstowego nie działa w ten sam sposób. Odpowiedzi zakładające, że dane są widoczne lub że size wpływa na długość wprowadzanych znaków, wynikają z niepełnego zrozumienia działania poszczególnych atrybutów HTML i ich roli w projektowaniu interfejsów użytkownika. Dobre praktyki projektowania formularzy wymagają jasnego rozróżnienia tych dwóch funkcji, co znacznie zwiększa użyteczność i dostępność aplikacji webowych oraz ułatwia użytkownikom korzystanie z formularzy zgodnie z ich przeznaczeniem.

Pytanie 28

Kolor Chartreuse przedstawiony w formie heksadecymalnej jako #7FFF00 odpowiada wartości RGB wynoszącej

A. rgb(64, 255, 0)

B. rgb(127, 255, 0)

C. rgb(192, 255, 0)

D. rgb(128, 255, 0)

Analizując pozostałe odpowiedzi, można zauważyć, że każda z nich nieprawidłowo interpretuje wartości heksadecymalne koloru Chartreuse, co prowadzi do błędnych konwersji na model RGB. Na przykład, odpowiedź z rgb(64, 255, 0) błędnie interpretuje wartość czerwonego odcienia jako 64, podczas gdy w rzeczywistości wartość ta wynosi 127. Błąd ten wynika z nieprawidłowego przeliczenia heksadecymalnej wartości 7F na system dziesiętny, co może być spowodowane błędnym założeniem, że każdy z dwóch symboli heksadecymalnych oznacza jedną z dwóch składowych RGB. Podobnie, odpowiedzi rgb(128, 255, 0) oraz rgb(192, 255, 0) również nie zgadzają się z rzeczywistą wartością, co jest wynikiem niewłaściwego zrozumienia zasady konwersji. Wartości te są zbyt wysokie, co może sugerować, że osoba udzielająca tych odpowiedzi nie miała pełnej wiedzy o systemie kolorów. W praktyce, niepoprawne obliczenia lub pomyłki w konwersji kolorów mogą prowadzić do niezgodności w projektach graficznych, co w efekcie wpływa na estetykę oraz spójność wizualną. Dlatego kluczowe jest zrozumienie, że system heksadecymalny jest oparty na szesnastkowej reprezentacji kolorów, gdzie każdy kolor składa się z trzech wartości: czerwonej, zielonej i niebieskiej, a ich prawidłowe przeliczenie jest podstawą profesjonalnego projektowania.

Pytanie 29

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

A. Ruby on Rails

B. JavaScript

C. CSS

D. PHP

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 30

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

A. tło będzie pomarańczowe

B. kolor tekstu będzie pomarańczowy

C. kolor tekstu będzie szary

D. tło będzie w odcieniu szarym

Analizując niepoprawne odpowiedzi warto zrozumieć jak działa kaskadowość oraz specyficzność w CSS Stylowanie w CSS opiera się na kilku aspektach które decydują o tym który styl zostanie zastosowany w przypadku kolizji Po pierwsze kaskadowość oznacza że style zdefiniowane później w kodzie mają możliwość nadpisywania wcześniejszych jeżeli mają taką samą specyficzność Jednak w tym przypadku kluczową rolę odgrywa specyficzność Styl inline czyli umieszczony bezpośrednio w tagu HTML ma najwyższą specyficzność przewyższając style zdefiniowane w nagłówku czy zewnętrznych arkuszach style co prowadzi do ignorowania wcześniejszych definicji dla tego samego elementu Dlatego pomimo że w nagłówku strony zdefiniowano kolor tła jako grey styl inline przypisuje bezpośrednio kolor orange i jest to styl który zostanie zastosowany Niepoprawny wybór odpowiedzi szarej czcionki czy tła wynika z niezrozumienia tej zasady Specyficzność oraz kaskadowość są fundamentalne dla zrozumienia jak działa CSS w praktyce i jak można zarządzać wyglądem poszczególnych elementów w złożonych projektach Odrzucenie inline style na rzecz bardziej modularnego podejścia pozwala na łatwiejsze zarządzanie stylami w dużych projektach co jest kluczową umiejętnością dla każdego programisty frontendowego

Pytanie 31

W skrypcie JavaScript użyto metody DOM getElementsByClassName('akapit'). Ta metoda odniesie się do akapitu

A. <p id="akapit">akapit2</p>

B. <p>akapit</p>

C. <p href="/akapit">akapit3</p>

D. <p class="akapit">akapit4</p>

Metoda DOM getElementsByClassName jest jedną z najważniejszych funkcji w JavaScript, która pozwala na selekcję elementów na stronie internetowej na podstawie ich klas CSS. W tym przypadku, odpowiedź <p class="akapit">akapit4</p> jest poprawna, ponieważ element ten ma przypisaną klasę "akapit", co czyni go bezpośrednim kandydatem do selekcji przez metodę getElementsByClassName('akapit'). Metoda ta zwraca kolekcję elementów (HTMLCollection), które mają podaną klasę, a następnie można z nimi pracować w kodzie JavaScript. Na przykład, możemy zmieniać ich style, zawartość lub dodawać zdarzenia. Dobrą praktyką jest stosowanie klas do stylizacji oraz manipulacji DOM, co pozwala na lepszą organizację kodu i zwiększa jego czytelność. Pamiętaj, że klasy są bardziej uniwersalne i elastyczne niż identyfikatory (ID), które powinny być unikalne na stronie. W przypadku konieczności stosowania metod do manipulacji elementami DOM, warto znać również inne metody, takie jak querySelector i querySelectorAll, które oferują bardziej zaawansowane opcje selekcji, umożliwiające wykorzystanie kombinacji klas, identyfikatorów i innych atrybutów.

Pytanie 32

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

#stopka { ... }

A. <div id = "stopka"> …

B. <div class = "stopka"> …

C. <div "stopka"> …

D. <div title = "stopka"> …

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 33

Metainformacja "Description" umieszczona w pliku HTML powinna zawierać

<head>
    <meta name="Description" content="...">
</head>

A. informację na temat autora strony

B. opis treści znajdującej się na stronie

C. spis słów kluczowych, które są wykorzystywane przez wyszukiwarki internetowe

D. nazwę aplikacji, za pomocą której stworzono stronę

Metainformacja Description nie jest odpowiednia do przechowywania nazwy programu użytego do stworzenia strony internetowej Taka informacja nie jest istotna z punktu widzenia użytkowników odwiedzających stronę czy też algorytmów wyszukiwania które analizują treść strony pod kątem jej użyteczności oraz zgodności z zapytaniami użytkowników Opisanie kluczowych informacji na stronie jest bardziej użyteczne ponieważ pozwala użytkownikom i wyszukiwarkom zrozumieć jej zawartość Wyszukiwarki analizują treść strony w tym opisy aby lepiej dopasować je do zapytań użytkowników Podczas gdy słowa kluczowe odgrywają rolę w SEO nie powinny być zamieszczane w metainformacji Description w formie listy ale raczej harmonijnie wplecione w naturalnie brzmiący tekst Opis strony ma za zadanie przyciągnąć uwagę i zachęcić do kliknięcia dlatego powinien być skonstruowany w sposób precyzyjnie oddający zawartość strony co jest zgodne z najlepszymi praktykami SEO i doświadczeniem użytkownika Ostatecznie informacje o autorze strony mogą być umieszczane w innych miejscach takich jak stopka strony lub w metainformacji Author ale nie są głównym przeznaczeniem metatagu Description Rozumienie tych zasad pomaga w skutecznym projektowaniu stron internetowych zgodnych z oczekiwaniami użytkowników i standardami branżowymi

Pytanie 34

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

A. aside {float: left; }

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

C. nav { float: right; }

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

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 35

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

A. znaczniki <frame> i <table>

B. znaczniki <h1>, <h2> oraz <p>

C. znacznik <div>

D. znacznik <p> z formatowaniem

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 36

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

A. geometrycznym transformowaniu obiektu.

B. zmianie warstwy obiektu.

C. animowaniu obiektu.

D. narysowaniu docelowego obiektu.

Wybrana odpowiedź nie jest prawidłowa. Transformacja geometryczna to najprostszy sposób przekształcenia obiektu oznaczonego numerem 1 w obiekt oznaczony numerem 2, jak pokazano na obrazie. To nie jest kwestia 'zmiany warstwy obiektu' czy 'animowania obiektu'. Zmiana warstwy obiektu nie zmienia jego kształtu ani orientacji, co jest wymagane w tym przypadku. Z kolei animacja obiektu dodaje ruch, ale nie zmienia kształtu ani orientacji obiektu statycznego. Dodatkowo, 'narysowanie docelowego obiektu' jest niepotrzebnie pracochłonne i nie jest najprostszym podejściem do problemu. Przekształcenia geometryczne, takie jak skalowanie i obrót, są znacznie bardziej efektywne i praktyczne w takich sytuacjach. Wybierając jedną z tych niepoprawnych odpowiedzi, można nabrać błędne przekonanie co do natury i zastosowania transformacji geometrycznych.

Pytanie 37

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

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

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

C. <charset="UTF-8">

D. <encoding="UTF-8">

Zapis <charset="UTF-8"> jest błędny, ponieważ nie wykorzystuje poprawnej składni HTML. W HTML nie istnieje element <charset>, a sposób deklaracji kodowania znaków wymaga użycia tagu <meta>. Z tego powodu, każdy, kto myśli, że może używać takiego zapisu, może napotkać problemy z renderowaniem strony, ponieważ przeglądarki nie rozpoznają tego typu kodowania. Podobnie, zapis <encoding="UTF-8"> również jest nieprawidłowy, ponieważ nie ma takiego atrybutu ani elementu w standardzie HTML. Użycie niewłaściwych elementów lub atrybutów może prowadzić do dezorientacji oraz błędów w wyświetlaniu treści, a także do problemów z dostępnością, co w dłuższej perspektywie wpływa na jakość strony oraz zadowolenie użytkowników. Z kolei zapis <meta encoding="UTF-8"> jest błędny, ponieważ atrybut, który powinien być użyty w elemencie <meta> to "charset", a nie "encoding". Ten typ błędów często wynika z nieporozumień dotyczących składni HTML i różnic między atrybutami. Warto zwracać uwagę na szczegóły, ponieważ nawet drobne pomyłki mogą prowadzić do poważnych problemów z interpretacją strony przez przeglądarki. Dobre praktyki w zakresie kodowania dokumentów HTML zalecają używanie UTF-8 jako domyślnego kodowania, a jego poprawna deklaracja jest kluczowa dla prawidłowego działania strony oraz jej dostępności w różnych językach.

Pytanie 38

W CSS zastosowano poniższe formatowanie. Kolorem czerwonym będzie wyświetlony

h1 i {
   color: red;
}

A. cały tekst nagłówka pierwszego stopnia oraz tekst italic akapitu

B. jedynie tekst italic we wszystkich poziomach nagłówków

C. tylko tekst italic nagłówka pierwszego stopnia

D. cały tekst nagłówka pierwszego stopnia oraz wszelki tekst italic, niezależnie od lokalizacji na stronie

W stylach CSS selektor złożony h1 i oznacza, że formatowanie będzie stosowane tylko do elementów pochylonych i znajdujących się wewnątrz nagłówka pierwszego poziomu h1. W praktyce oznacza to, że taki zapis CSS zmienia kolor na czerwony tylko dla tekstu wewnątrz tagu <i> znajdującego się w <h1>. Selekcja złożona umożliwia precyzyjne określanie, które elementy są formatowane, co jest kluczowe w przypadku dużych i złożonych stron internetowych. Zrozumienie działania selektorów jest fundamentem efektywnego stylizowania dokumentów HTML. Pozwala to na zachowanie spójności wizualnej oraz lepszą kontrolę nad wyglądem strony. Dobór odpowiednich selektorów w CSS to również jedna z dobrych praktyk, które sprzyjają czytelności kodu oraz jego łatwiejszej konserwacji w przyszłości. Taki zapis pozwala na minimalizację konfliktów stylów, które mogą się pojawić przy bardziej ogólnych selektorach. Praktyczne użycie selektorów złożonych jest więc zalecane w celu uzyskania bardziej kontrolowanego i przewidywalnego wyglądu strony internetowej, co jest zgodne ze standardami webowymi promującymi semantyczne i uporządkowane kodowanie.

Pytanie 39

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. punkt 1 punkt 2 podpunkt1 podpunkt2 podpunkt3 punkt3

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

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

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

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 40

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" style="width: 25px; height:50px;">

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

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

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

Wybór innych opcji, takich jak <img src="/rysunek.png" style="width: 25px; height:50px;"> czy <img src="/rysunek.png" style="width: 25px; height:25px;"> prowadzi do nieproporcjonalnego wyświetlenia obrazu, co skutkuje jego zniekształceniem. Ustalenie zarówno szerokości, jak i wysokości w stylach CSS sprawia, że obrazek jest zmuszony do dopasowania się do tych wymiarów, co narusza jego naturalne proporcje. To podejście jest niezgodne z zaleceniami dotyczącymi responsywności, które sugerują, aby ograniczać się do jednego wymiaru, co pozwala drugiemu na automatyczne dostosowanie. Typowym błędem jest przyjęcie, że podanie obu wymiarów w pikselach zawsze przyniesie optymalny efekt wizualny, co jest mylące i może prowadzić do złego doświadczenia użytkownika. Zniekształcenie obrazów nie tylko obniża estetykę strony, ale także może wpływać na jej użyteczność oraz SEO. Dobrą praktyką jest również używanie atrybutów 'alt' w znacznikach obrazów, aby poprawić dostępność i SEO, co nie zostało uwzględnione w żadnej z opcji. Warto także zauważyć, że stosowanie odpowiednich formatów obrazów i ich optymalizacja pod względem rozmiaru pliku są kluczowe dla przyspieszenia ładowania strony.

Rozpocznij nowy egzamin

Powrót do strony głównej