Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik programista
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 8 czerwca 2026 14:54
Data zakończenia: 8 czerwca 2026 14:59

Egzamin zdany!

Wynik: 30/40 punktów (75,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

Na stronie umieszczono obrazek, a po nim akapit. Aby obrazek znalazł się w tej samej linii, po LEWEJ stronie tekstu, w stylu CSS obrazka należy ustawić:

align: left;

float: left;

style: left;

alt: left;

Aby obrazek znalazł się po LEWEJ stronie, a tekst go oblewał z prawej, stosuje się w CSS float: left;. Właściwość float „wypycha” element w bok i pozwala innej treści ułożyć się obok. Dlatego potrzebne jest float: left;.

Pytanie 2

Co powinien umożliwiać edytor działający w trybie WYSIWYG?

A. tworzenie podstawowej grafiki wektorowej

B. obróbkę plików dźwiękowych

C. publikację strony przez wbudowany klient FTP

D. uzyskanie wyglądu strony zbliżonego do jej obrazu w przeglądarce

WYSIWYG (What You See Is What You Get) oznacza, że podczas edycji widać efekt zbliżony do finalnego wyglądu strony w przeglądarce - bez konieczności pisania kodu i podglądania osobno. Dlatego edytor WYSIWYG ma dawać wygląd zbliżony do obrazu strony w przeglądarce.

Pytanie 3

Co oznacza ustawienie background-attachment: scroll?

A. że tło będzie powtarzane jak kafelki

B. że tło będzie przewijać się razem z treścią strony

C. że tło pozostanie nieruchome przy przewijaniu

D. że tło pojawi się w prawym górnym rogu

Wartość scroll właściwości background-attachment (domyślna) wiąże tło z treścią strony - podczas przewijania obraz tła przesuwa się razem z zawartością. Dlatego scroll oznacza, że tło przewija się razem z treścią.

Pytanie 4

Który zapis <img> jest poprawny zgodnie z walidacją HTML5?

<img src=mojPiesek.jpg" alt="pies>

<img src="mojPiesek.jpg">

<img src="mojPiesek.jpg" alt="pies">

<img src=mojPiesek.jpg alt=pies>

Poprawny zapis to <img src="mojPiesek.jpg" alt="pies"> - wartości atrybutów src i alt ujęte są w cudzysłowy, a znacznik jest poprawnie domknięty. Dlatego prawidłowy jest ten zapis.

Pytanie 5

Podczas walidacji strony napotkano błąd. Co to oznacza?

A. określenie kodowania znaków musi być zapisane bez użycia myślników

B. znacznik meta nie zawiera atrybutu charset

C. w atrybucie charset dopuszczalna jest wyłącznie wartość "utf-8"

D. oznaczenie ISO-8859-2 jest nieprawidłowe

Odpowiedź jest poprawna ponieważ współczesne standardy tworzenia stron internetowych wymagają kodowania znaków w formacie UTF-8. Specyfikacja HTML5 zaleca używanie UTF-8 jako domyślnego kodowania ze względu na jego wszechstronność i szerokie wsparcie dla różnych znaków i symboli. UTF-8 jest kompatybilny z wieloma językami i zapewnia, że strony internetowe będą prawidłowo wyświetlane na różnych urządzeniach i przeglądarkach. Korzystanie z UTF-8 eliminuje również problemy związane z niepoprawnym wyświetlaniem znaków specjalnych co jest częstym problemem w kodowaniach takich jak ISO-8859-2. W praktyce oznacza to że wszystkie nowe projekty stron internetowych powinny deklarować kodowanie UTF-8 w znaczniku meta. Na przykład poprawnie zdefiniowany znacznik wyglądałby następująco meta charset="utf-8". Dobrym podejściem jest również upewnienie się że zarówno pliki HTML jak i serwer są zgodne z tym ustawieniem co zapobiega potencjalnym konfliktom Użycie UTF-8 zgodne jest z najlepszymi praktykami branżowymi wspierającymi tworzenie dostępnych i zróżnicowanych treści internetowych.

Pytanie 6

Narzędzie phpMyAdmin służy do administrowania serwerem:

A. WWW

B. FTP

C. plików

D. baz danych

phpMyAdmin to napisane w PHP narzędzie webowe do administrowania serwerem BAZ DANYCH MySQL/MariaDB - obsługujesz je przez przeglądarkę. Pozwala bez znajomości poleceń konsolowych tworzyć i usuwać bazy oraz tabele, przeglądać i edytować rekordy, uruchamiać zapytania SQL, importować i eksportować dane czy zarządzać użytkownikami. Dlatego znajdziesz je w panelu niemal każdego hostingu. Zapamiętaj: phpMyAdmin = graficzna administracja bazą danych.

Pytanie 7

Który znacznik służy do budowania hierarchii (struktury) tekstu nagłówkami?

<style>

<head>

<u>

<h6>

Pozostałe znaczniki nie budują hierarchii nagłówków.  podkreśla tekst, <head> to sekcja metadanych (nie nagłówek treści!), a <style> zawiera reguły CSS. Nagłówkiem struktury tekstu jest <h6>.

Pytanie 8

Podano fragment kodu HTML, który nie przechodzi walidacji. Problemy z walidacją tego kodu będą dotyczyć:

<!DOCTYPE HTML>
<html>
<head>
    <title>Test</title>
</head>
<body>

<img src="obraz.gif">
<br>
<img src="obraz.gif">

</body>
</html>

A. braku zamknięcia znacznika <img>

B. braku atrybutu alt w znaczniku <img>

C. braku zamknięcia znacznika

D. duplikacji nazwy pliku graficznego

W tym zadaniu kluczowy był brak atrybutu alt w znaczniku <img>. To jest jeden z tych wymagań, które na pierwszy rzut oka mogą wydawać się tylko formalnością, a jednak mają ogromne znaczenie, szczególnie z punktu widzenia dostępności. Standardy W3C (zwłaszcza WCAG) jasno mówią, że każdy obrazek w HTML powinien mieć opis alternatywny, czyli właśnie atrybut alt. Dzięki temu osoby korzystające z czytników ekranu albo mające wyłączone ładowanie grafik, czy nawet boty indeksujące wyszukiwarki, wiedzą, co obrazek przedstawia lub jaką pełni funkcję. Jeżeli alt jest pusty, to też jest dozwolone, ale wtedy obrazek powinien być czysto dekoracyjny, a tutaj ewidentnie nie ma żadnego alt. Przykład praktyczny: jeśli budujesz stronę dla urzędu, sklepu internetowego albo jakąkolwiek witrynę publiczną, brak alt przy obrazkach to poważny minus jakościowy i prawny. Nawet na prostych stronach wizytówkach może się to odbić negatywnie na SEO czy po prostu na wygodzie użytkownika. Ja kiedyś przez taki drobiazg nie przeszedłem walidacji projektu, więc uczulam na to każdą osobę, która zaczyna z HTML-em – zawsze pamiętaj o atrybucie alt. To nie jest coś, co można ignorować, bo przeglądarki tego nie „wybaczą” podczas walidacji, a użytkownicy mogą na tym stracić. Szczerze, moim zdaniem to jeden z tych podstawowych nawyków, które warto sobie wyrobić już na starcie.

Pytanie 9

W CSS wartości: underline, overline, line-through oraz blink odnoszą się do właściwości

A. font-style

B. font-decoration

C. text-decoration

D. text-align

W języku CSS właściwość text-decoration służy do definiowania stylów dekoracji tekstu. Wartości takie jak underline (podkreślenie), overline (nadkreślenie), line-through (przekreślenie) oraz blink (miganie) są częścią tej właściwości i umożliwiają programistom kontrolowanie, jak tekst jest prezentowany na stronie internetowej. Wartość underline, na przykład, jest powszechnie używana w linkach, aby wskazać, że są one klikalne. Przykład zastosowania: 'text-decoration: underline;' zastosowany w stylach CSS dla elementu <a> sprawia, że tekst linku jest podkreślony. Overline może być używane do dodawania linii nad tekstem, co może być przydatne w kontekście nagłówków lub wyróżnień. Wartość line-through jest często stosowana w przypadku prezentowania informacji o promocjach, gdzie oryginalna cena jest przekreślona. Wartość blink, choć nie jest już szeroko wspierana, mogła być używana w przeszłości do tworzenia efektu migania tekstu. Wszystkie te dekoracje są zdefiniowane w standardzie CSS, co czyni text-decoration kluczową właściwością w stylizacji tekstu w dokumentach HTML.

Pytanie 10

Na czym polega pozycjonowanie poza stroną (off-page SEO)?

A. na pozyskiwaniu zewnętrznych linków prowadzących do strony

B. na sprawdzaniu i testowaniu szybkości ładowania

C. na walidacji kodu HTML, CSS i linków

D. na optymalizacji grafiki i multimediów

Pozostałe działania to optymalizacja ON-PAGE lub techniczna, czyli prace w obrębie samej witryny. Walidacja kodu HTML/CSS dba o poprawność znaczników. Optymalizacja grafiki i multimediów zmniejsza rozmiar plików. Testowanie szybkości ładowania poprawia wydajność. Wszystkie dotyczą strony „od środka”, podczas gdy off-page SEO to pozyskiwanie zewnętrznych linków do niej.

Pytanie 11

W sekcji nagłówkowej kodu HTML znajduje się tekst przedstawiony na ilustracji. Tekst ten zostanie wyświetlony

<title>Strona miłośników psów</title>

A. w zawartości strony, w pierwszym widocznym nagłówku

B. na pasku tytułowym przeglądarki

C. w zawartości strony, na banerze

D. w polu adresu, obok wpisanego adresu URL

Tag <title> w HTML jest częścią sekcji nagłówkowej dokumentu i służy do określenia tytułu strony wyświetlanego na pasku tytułu przeglądarki. Jest to kluczowy element z punktu widzenia SEO, ponieważ wyszukiwarki internetowe używają informacji z tagu <title> do indeksowania stron i określania ich treści. Tytuł strony powinien być krótki, ale jednocześnie bogaty w słowa kluczowe, dzięki czemu zwiększa szanse na wysoką pozycję w wynikach wyszukiwania. W praktyce dobrze zaprojektowany tytuł wpływa na widoczność strony w sieci i przyciąga uwagę użytkowników. Ważne jest, aby tytuł był unikalny dla każdej strony w witrynie, co pomaga w lepszym zrozumieniu struktury strony przez odwiedzających oraz roboty indeksujące. Zgodnie z dobrymi praktykami, tytuł powinien zawierać od 50 do 60 znaków, aby był w pełni widoczny w wynikach wyszukiwania i nie został przycięty. Tytuł to pierwsze, co użytkownik widzi w zakładkach przeglądarki oraz w wynikach wyszukiwania, dlatego jego odpowiednia konstrukcja jest niezmiernie ważna.

Pytanie 12

Który element CMS odpowiada bezpośrednio za WYGLĄD strony?

A. kokpit (WordPress) / panel administracyjny (Joomla!)

B. motyw (WordPress) / szablon (Joomla!)

C. wtyczka (WordPress) / dodatek (Joomla!)

D. widżet (WordPress) / moduł (Joomla!)

Za WYGLĄD strony w CMS odpowiada motyw (w WordPressie) lub szablon (w Joomli!) - definiuje układ, kolory i style, oddzielnie od treści. Dlatego wyglądem zarządza motyw/szablon.

Pytanie 13

Który styl ustawi trzy kolumny OBOK siebie (każda na 1/3 szerokości)?

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

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

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

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

Trzy kolumny obok siebie powstają, gdy każdy blok „pływa” w lewo i zajmuje jedną trzecią szerokości: .kolumny { float: left; width: 33%; }. Kluczowe są float (układ poziomy) i width (szerokość). Dlatego poprawny jest zapis z float: left i width: 33%.

Pytanie 14

Aby strona internetowa była bardziej dostępna dla osób niewidomych, obrazom wstawianym znacznikiem img należy nadać atrybut:

alt

style

text

src

Atrybut alt znacznika <img> zawiera tekst alternatywny - krótki opis tego, co przedstawia obraz. Czytnik ekranu, z którego korzystają osoby niewidome, odczytuje tę treść na głos, dzięki czemu użytkownik wie, co jest na obrazku. Tekst alternatywny pokazuje się też, gdy obraz się nie wczyta. Dlatego dla dostępności obrazom nadaje się atrybut alt.

Pytanie 15

Do czego można wykorzystać program FileZilla?

A. do debugowania skryptu na stronie

B. do kompilacji skryptu na stronie

C. do publikacji strony internetowej

D. do walidacji strony internetowej

FileZilla to klient FTP - służy do przesyłania plików między komputerem a serwerem, dlatego używa się go do PUBLIKACJI strony (wgrania plików HTML, CSS, grafik na serwer WWW). Dlatego FileZilla służy do publikacji strony internetowej.

Pytanie 16

Który zbiór znaczników, określających projekt strony internetowej w sposób semantyczny, jest zgodny z normą HTML 5?

A. Zbiór 4

B. Zbiór 3

C. Zbiór 1

D. Zbiór 2

Wykaz 4 jest zgodny ze standardem HTML 5, ponieważ poprawnie używa semantycznych znaczników do strukturyzacji zawartości strony. <header> jest używany do definiowania nagłówka dokumentu lub sekcji, co jest poprawne dla Bloku 1. Znacznik <main> w Bloku 2 wskazuje na główną treść strony, co jest zgodne z jego przeznaczeniem. <aside> w Bloku 3 jest trafnie używany do treści pobocznych, które są związane, ale niekonieczne dla głównego wątku treści, co odpowiada typowej strukturze witryny, gdzie treści poboczne są często wyświetlane obok głównej treści. Na koniec, <footer> w Bloku 4 jest poprawnie przypisany, gdyż zamyka i podsumowuje zawartość strony. HTML5 kładzie duży nacisk na semantykę, co pomaga w optymalizacji pod kątem SEO oraz ułatwia rozumienie struktury strony zarówno przez ludzi, jak i maszyny. Takie podejście poprawia dostępność, ułatwia stylizowanie za pomocą CSS oraz wspiera lepsze praktyki w zakresie zgodności z przyszłymi standardami.

Pytanie 17

Metainformacja "Description" zawarta w pliku HTML powinna zawierać


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

A. informację o autorze strony

B. listę kluczowych fraz używanych przez wyszukiwarki internetowe

C. opis zawartości strony

D. nazwę aplikacji, w której stworzono stronę

Metainformacja 'Description' zawarta w pliku HTML pełni kluczową rolę w optymalizacji stron internetowych pod kątem wyszukiwarek. Jest to krótki opis treści strony, który pomaga wyszukiwarkom zrozumieć, o czym jest dana strona. Wartościowy opis powinien być zwięzły, informacyjny i zachęcający do kliknięcia, ponieważ często pojawia się w wynikach wyszukiwania jako fragment tekstu, obok tytułu strony. Przykładem dobrze skonstruowanego opisu może być 'Dowiedz się, jak skutecznie zarządzać swoimi finansami osobistymi dzięki naszym praktycznym poradnikom i wskazówkom'. Taki opis nie tylko informuje użytkownika o zawartości strony, ale również zawiera słowa kluczowe, które mogą przyciągnąć uwagę. Zgodnie z wytycznymi Google, długość opisu powinna wynosić od 150 do 160 znaków, aby uniknąć obcięcia tekstu w wynikach wyszukiwania. Posiadanie dobrze napisanej metainformacji 'Description' jest więc niezbędne dla skutecznej strategii SEO i zwiększenia widoczności strony w internecie.

Pytanie 18

Który z przedstawionych obrazów ma zastosowany poniższy styl CSS?

img {
    padding: 5px;
    border: 1px solid grey;
    border-radius: 10px;
}

A. C.

B. A.

C. B.

D. D.

Obraz A został sformatowany za pomocą stylu CSS, który określa podstawowe cechy estetyczne elementu graficznego. Pierwszym aspektem jest zastosowanie właściwości padding wynoszącej 5px, co oznacza, że wokół obrazu znajduje się wewnętrzny margines o szerokości 5 pikseli. To zapewnia przestrzeń między obrazem a jego ramką, zwiększając czytelność i estetykę wizualną. Następnie, użyto border o grubości 1px z kolorem solid grey. Ten cienki, szary obrys dodaje subtelny akcent, który pomaga wyróżnić obraz na tle strony. Wartość border-radius wynosi 10px, co dodaje zaokrąglone rogi, nadając nowoczesny wygląd. Takie zaokrąglenie jest często stosowane w nowoczesnym designie, aby nadać strony bardziej przyjazny i estetyczny wygląd. Stylizacja obrazów w ten sposób jest zgodna z zasadami responsywności i dostępności, co jest istotne w projektowaniu interfejsów użytkownika. Stosowanie takich technik pozwala na tworzenie spójnych i estetycznych stron internetowych, które są zgodne z obecnymi standardami UX i UI.

Pytanie 19

W języku HTML stworzono definicję tabeli. Który z rysunków ilustruje jej działanie?

A. Rysunek 4

B. Rysunek 3

C. Rysunek 2

D. Rysunek 1

Prawidłowa odpowiedź to Rysunek 1 ponieważ odwzorowuje on strukturę tabeli opisaną w kodzie HTML zaprezentowanym w pytaniu. Kod HTML przedstawia tabelę z dwoma wierszami. Pierwszy wiersz zawiera dwie komórki z tekstami 'pierwszy' i 'drugi'. Drugi wiersz posiada jedną komórkę z tekstem 'trzeci' która zajmuje szerokość dwóch kolumn dzięki zastosowaniu atrybutu colspan=2. Właśnie ta cecha sprawia że drugi rysunek jest poprawny gdyż w nim komórka z tekstem 'trzeci' rozciąga się na szerokość dwóch kolumn tabeli. Takie podejście jest zgodne z zasadami projektowania tabel w HTML gdzie atrybut colspan pozwala na łączenie kolumn co jest szczególnie przydatne przy tworzeniu złożonych układów danych w tabelach. Dzięki zastosowaniu tego atrybutu można efektywnie zarządzać szerokością komórek i ich położeniem co zwiększa elastyczność w projektowaniu układów na stronach internetowych. Warto zwrócić uwagę na fakt że użycie atrybutu 'border' z wartością 1 powoduje wyświetlenie widocznej ramki co jest dobrze zilustrowane na Rysunku 1. Zrozumienie i umiejętne zastosowanie takich technik w projektowaniu stron jest kluczowe dla tworzenia przejrzystych i funkcjonalnych interfejsów użytkownika.

Pytanie 20

Podczas weryfikacji pliku HTML5 pojawił się komunikat brzmiący: "Error: Element head is missing a required instance of child element title". Co to oznacza w kontekście dokumentu?

A. nie zdefiniowano elementu <title> w sekcji <head> dokumentu.

B. nie zdefiniowano obowiązkowego atrybutu title w tagu <img>.

C. element <title> nie jest konieczny.

D. element <title> nie został prawidłowo zamknięty przez </title>.

Twoja odpowiedź jest całkowicie trafna! Zgodnie z tym, co mówi specyfikacja HTML5, element <title> rzeczywiście jest obowiązkowy i musi znaleźć się w sekcji <head>. To bardzo ważne, bo tytuł strony to coś, co pokazuje się na karcie przeglądarki, a także w wynikach wyszukiwania. Jak go brakuje, to strona nie spełnia podstawowych wymogów i pojawia się błąd walidacji. Fajnie jest mieć unikalne i opisowe tytuły dla każdej strony, bo to korzystnie wpływa na SEO i użyteczność. Na przykład, jeśli robiłbyś stronę o kulinariach, to tytuł mógłby być "Przepisy na zdrowe obiady", co od razu informuje użytkowników i wyszukiwarki, o co chodzi. Dobrze dobrany tytuł to naprawdę kluczowa sprawa, bo ma duży wpływ na to, jak użytkownicy postrzegają Twoją stronę i czy klikną w link. Pamiętaj też, że element <title> powinien być krótki, ale wystarczająco informacyjny, zazwyczaj nie dłuższy niż 60 znaków.

Pytanie 21

Wskaź na właściwą sekwencję tworzenia aplikacji?

A. Analiza potrzeb klienta, specyfikacja wymagań, tworzenie, wdrażanie, testowanie

B. Specyfikacja wymagań, analiza potrzeb klienta, tworzenie, wdrażanie, testowanie

C. Analiza potrzeb klienta, specyfikacja wymagań, tworzenie, testowanie, wdrażanie

D. Tworzenie, analiza potrzeb klienta, specyfikacja wymagań, wdrażanie, testowanie

Nieprawidłowe odpowiedzi w kwestii kolejności tworzenia aplikacji bazują na błędnych założeniach dotyczących etapów procesu. W pierwszej z tych odpowiedzi, pominięcie analizy wymagań klienta na rzecz specyfikacji powoduje, że projekt może nie spełniać oczekiwań użytkowników, co prowadzi do nieefektywnego wykorzystania zasobów oraz czasu. Specyfikacja wymagań musi być tworzona na podstawie dokładnej analizy potrzeb, a nie odwrotnie. Kolejna odpowiedź zaczyna się od tworzenia aplikacji bez wcześniejszej analizy i specyfikacji, co jest nie tylko technicznie błędne, ale również wiąże się z ogromnym ryzykiem powstawania błędów w kodzie i funkcjonalności, które nie odpowiadają na realne potrzeby użytkowników. W ostatnim przypadku, pomimo że analiza wymagań oraz specyfikacja są na początku, przed wdrożeniem powinny być przeprowadzone testy, aby upewnić się, że produkt działa zgodnie z oczekiwaniami. Etap testowania jest niezbędny przed wdrożeniem, ponieważ pozwala na identyfikację i naprawę błędów, co jest kluczowe dla osiągnięcia wysokiej jakości końcowego produktu. Wszelkie zmiany w tej kolejności mogą prowadzić do kosztownych błędów oraz niezadowolenia użytkowników.

Pytanie 22

Aby za pomocą CSS zdefiniować przedstawione na rysunku opływanie obrazu tekstem należy w stylu obrazu wprowadzić zapis

A. table: left;

B. clear: both;

C. float: right;

D. float: left;

Gratulacje, Twoja odpowiedź jest prawidłowa! Właściwość CSS 'float' z wartością 'right' jest kluczowa, gdy chcemy, aby obraz był przesunięty na prawą stronę, a tekst opływał obraz od lewej strony. Jest to zgodne ze standardami tworzenia stron internetowych i jest dobrą praktyką, aby uzyskać czysty i profesjonalny wygląd strony. Właściwość 'float' jest niezwykle ważna w kontekście układu strony, pozwala na manipulację elementami i ich pozycją względem siebie. Wartością tej właściwości, oprócz 'right', może być także 'left' lub 'none', które odpowiednio spowodują opływanie obrazu przez tekst z prawej strony lub uniemożliwią opływanie. Pamiętaj, że umiejętność manipulacji tekstem i obrazami jest kluczowa do tworzenia atrakcyjnych i funkcjonalnych stron internetowych.

Pytanie 23

W znaczniku <meta ...> w sekcji <meta ...> na stronie internetowej nie zamieszcza się informacji o

A. autorze

B. kodowaniu

C. automatycznym odświeżaniu

D. typie dokumentu

Wszystkie wymienione odpowiedzi, z wyjątkiem informacji dotyczącej typu dokumentu, są poprawne i mogą być umieszczane w znaczniku <meta>. Informacja o autorze jest istotna, ponieważ pozwala wskazać osobę odpowiedzialną za treść na stronie, co może być ważne w kontekście cytowania i prawa autorskiego. Wyszukiwarki również mogą brać pod uwagę te informacje w kontekście wiarygodności źródła. Z kolei kodowanie jest kluczowe, ponieważ określa, w jaki sposób znaki są interpretowane przez przeglądarkę, co ma fundamentalne znaczenie dla prawidłowego wyświetlania treści, zwłaszcza w przypadku stron wielojęzycznych. Możliwość określenia kodowania w znaczniku <meta charset='UTF-8'> jest powszechnie stosowana, aby zapewnić, że wszystkie znaki są renderowane poprawnie. Automatyczne odświeżanie za pomocą znacznika <meta http-equiv='refresh' content='30'> jest przydatne, gdy strona potrzebuje być często aktualizowana, na przykład w przypadku stron informacyjnych czy serwisów newsowych. Dlatego też, umieszczanie tych informacji w znaczniku <meta> jest zgodne z praktykami webowymi i przyczynia się do poprawy działania strony oraz jej optymalizacji dla użytkowników i wyszukiwarek.

Pytanie 24

W HTML, aby uzyskać rezultat jak w podanym przykładzie, należy użyć struktury `

Duży tekst zwykły tekst

A. <big>Duży tekst zwykły tekst

B. <strike>Duży tekst zwykły tekst

C. <strike>Duży tekst</strike> zwykły tekst

D. <big>Duży tekst</big> zwykły tekst

W każdej z błędnych odpowiedzi pojawiają się istotne nieporozumienia dotyczące użycia odpowiednich znaczników HTML. Odpowiedzi, które wykorzystują znacznik <strike>, mają na celu wyrażenie skreślenia tekstu, co jest zgoła nieodpowiednie w kontekście zwiększania jego rozmiaru. Użycie tego znacznika w przykładzie wskazuje na mylne zrozumienie jego funkcji oraz na niepoprawne podejście do formatowania treści, co prowadzi do nieczytelnych i mniej przyjaznych dla użytkowników interfejsów. Pomijając aspekt stylistyczny, takie podejście może również negatywnie wpłynąć na dostępność, ponieważ osoby korzystające z czytników ekranu mogą mieć trudności z interpretacją skreślonych fragmentów. Z kolei omijanie znacznika <big> lub jego niewłaściwe zagnieżdżenie w odpowiedziach, gdzie nie jest on poprawnie zamknięty, może prowadzić do błędów w renderowaniu tekstu, co z kolei wpływa na ogólną estetykę oraz funkcjonalność witryny. W branży web developmentu kluczowe jest, aby każdy element HTML był używany zgodnie z jego przeznaczeniem, co nie tylko poprawia doświadczenia użytkownika, ale również wspiera najlepsze praktyki programistyczne oraz standardy semantyczne. Z tego powodu błędne koncepcje związane z używaniem znaczników w HTML mogą prowadzić do poważnych problemów w kontekście zarówno wizualnym, jak i funkcjonalnym strony internetowej.

Pytanie 25

Który z przedstawionych kodów HTML sformatuje tekst według wzoru?
(uwaga: słowo "stacji" jest zapisane większą czcionką niż reszta słów w tej linii)

Lokomotywa

Stoi na stacji lokomotywa ...

A.
<h1>Lokomotywa</h1>
<p>Stoi na <big>stacji lokomotywa ...</p>

B.
<h1>Lokomotywa</h1>
<p>Stoi na <big>stacji</big> lokomotywa ...</p>

C.
<h1>Lokomotywa</p>
<p>Stoi na <big>stacji</big> lokomotywa ...</p>

D.
<p><small>Lokomotywa</small></p>
<p>Stoi na <big>stacji<big> lokomotywa ...</p>

A. A.

B. C.

C. D.

D. B.

Wybrana odpowiedź nie jest poprawna. Kluczowym elementem tego pytania było zrozumienie, jak konkretny kod HTML wpływa na formatowanie tekstu. Znacznik <big> jest używany do powiększania czcionki, ale musi być poprawnie umieszczony w kodzie, aby efekt był zgodny z oczekiwaniami. Odpowiedzi A, C i D, mimo że używają tego znacznika, nie spełniają tego kryterium. W odpowiedzi A, znacznik <big> jest używany do powiększenia całego tekstu, a nie tylko słowa 'stacji'. W odpowiedzi C, znacznik <big> jest używany w niewłaściwym miejscu. W odpowiedzi D, zastosowano znacznik , który w rzeczywistości zmniejsza rozmiar czcionki. To pytanie pokazuje, jak ważne jest zrozumienie struktury kodu HTML i umiejętność poprawnego stosowania znaczników formatujących. Warto również pamiętać, że znacznik <big> jest przestarzały i zaleca się stosowanie CSS do manipulowania rozmiarem czcionki.

Pytanie 26

Funkcjonalność obejmującą edycję kodu źródłowego, jego kompilację, tworzenie zasobów programu, baz danych i komponentów udostępnia:

A. Notepad++

B. phpMyAdmin

C. debugger

D. środowisko IDE

Zintegrowane środowisko programistyczne (IDE - Integrated Development Environment) to program, który w jednym miejscu łączy narzędzia potrzebne do tworzenia oprogramowania: edytor kodu (z podpowiedziami i podświetlaniem składni), kompilator/uruchamianie, debugger, a często też zarządzanie projektem, bazami danych, zależnościami i kontrolą wersji. Przykłady to Visual Studio, IntelliJ IDEA, PhpStorm czy Eclipse. Dzięki integracji programista nie przełącza się między osobnymi aplikacjami. Dlatego pełną funkcjonalność tworzenia programu udostępnia środowisko IDE.

Pytanie 27

Podaj nazwę Systemu Zarządzania Treścią, którego logo jest pokazane na dołączonym rysunku?

A. Drupal

B. WordPress

C. Joomla!

D. MediaWiki

Odpowiedź Joomla! jest poprawna ponieważ logo przedstawione na rysunku jest oficjalnym znakiem identyfikacyjnym tego systemu zarządzania treścią CMS. Joomla! to jeden z najpopularniejszych systemów CMS używany do tworzenia stron internetowych oraz aplikacji. Dzięki swojej elastyczności i dużej liczbie dostępnych rozszerzeń Joomla! pozwala na tworzenie zarówno prostych stron wizytówkowych jak i zaawansowanych serwisów e-commerce. Główne zalety Joomla! to intuicyjny interfejs użytkownika który ułatwia zarządzanie treściami oraz silna społeczność użytkowników zapewniająca wsparcie techniczne i rozwój oprogramowania. Joomla! jest zgodna z wieloma standardami webowymi co czyni ją wszechstronnym narzędziem do wdrażania profesjonalnych projektów internetowych. Korzystanie z Joomla! umożliwia szybkie i efektywne tworzenie responsywnych stron które dobrze współdziałają na różnych urządzeniach mobilnych. Praktyczne zastosowanie Joomla! obejmuje tworzenie stron korporacyjnych portali społecznościowych oraz serwisów informacyjnych. Dzięki modulowej architekturze użytkownicy mogą łatwo dostosowywać funkcjonalność swoich stron do specyficznych potrzeb branżowych co jest zgodne z dobrymi praktykami projektowania zorientowanego na użytkownika. Platforma Joomla! obsługuje także wielojęzyczność i różne metody uwierzytelniania co czyni ją idealnym rozwiązaniem dla międzynarodowych projektów.

Pytanie 28

W języku CSS atrybut font-size przyjmuje, zgodnie z nazwami, wartości

A. jedynie small, smaller, large, larger

B. wyłącznie small, medium, large

C. z zestawu xx-small, x-small, medium, large, x-large, xx-large

D. zaledwie big oraz small

W kontekście właściwości font-size w CSS, niektóre odpowiedzi zawierają błędne założenia, które mogą prowadzić do niepełnego zrozumienia możliwości tej właściwości. Warto zauważyć, że ograniczenie się jedynie do wartości small, smaller, large i larger ignoruje szerszy zestaw dostępnych opcji, które są kluczowe dla dokładnego dostosowania rozmiaru tekstu. Wartości takie jak medium, small, and large są jedynie częścią zdefiniowanego standardu, który obejmuje również bardziej szczegółowe rozmiary, takie jak xx-small, x-small, x-large oraz xx-large. Użytkownicy często mylą pojęcia związane z nazwami wartości, co prowadzi do mniejszych możliwości stylizacji. Przykładem jest niewłaściwe skupienie się na biedniejszych zasobach słownych, takich jak big i small, które nie są standardowymi wartościami CSS. Taki błąd myślowy ogranicza możliwość pełnego wykorzystania CSS, co jest kluczowe dla tworzenia nowoczesnych, responsywnych stron internetowych. W praktyce, pełne zrozumienie i umiejętność wykorzystania wszystkich dostępnych wartości w CSS nie tylko ułatwia pracę nad projektem, ale również przyczynia się do lepszej dostępności i doświadczeń użytkowników. Zastosowanie poprawnych terminów i wartości jest niezbędne, aby zachować profesjonalizm w projektowaniu stron.

Pytanie 29

Jak czyta się po angielsku znak @?

A. on

B. at

C. ape

D. monkey

Znak @ czyta się po angielsku „at” (czyli „przy/na”) - stąd w adresach e-mail jan@firma.pl mówi się „jan AT firma”. Po polsku popularnie nazywa się go „małpą”. Dlatego po angielsku to „at”.

Pytanie 30

Który z poniższych kodów HTML najlepiej ilustruje opisaną tabelę? (Obramowanie tabeli oraz komórek zostało pominięte dla uproszczenia)

A. Odpowiedź A

B. Odpowiedź D

C. Odpowiedź C

D. Odpowiedź B

Odpowiedź B jest prawidłowa, ponieważ używa atrybutu rowspan do złączenia dwóch komórek w kolumnie. W przedstawionej tabeli nagłówek Telefony obejmuje dwie wartości w jednej kolumnie co jest dokładnie odwzorowane w kodzie HTML poprzez zastosowanie rowspan2 w komórce zawierającej Telefony. To podejście pozwala na logiczne i czytelne przedstawienie danych w tabeli co jest zgodne z dobrymi praktykami projektowania stron internetowych. Użycie rowspan w tabelach HTML jest powszechne gdy chcemy aby jedna komórka zajmowała miejsce większej liczby wierszy niż standardowa. Jest to przydatne w sytuacjach gdy dane muszą być grupowane pionowo co poprawia czytelność i strukturę prezentowanych informacji. Ponadto takie podejście pozwala na bardziej efektywne zarządzanie kodem HTML redukując potrzebę dodatkowego formatowania i zmniejsza złożoność dokumentu co jest zgodne z zasadami semantycznego HTML. Warto również pamiętać że użycie rowspan powinno być przemyślane aby zapewnić dostępność i poprawne wyświetlanie w różnych przeglądarkach i urządzeniach co jest kluczowe w nowoczesnym projektowaniu stron internetowych.

Pytanie 31

Na obrazie przedstawiono projekt układu bloków witryny internetowej. Zakładając, że bloki są realizowane za pomocą znaczników sekcji, ich formatowanie w CSS, oprócz ustawionych szerokości dla bloków: 1, 2,
3, 4 (blok 5 nie ma ustawionej szerokości), powinno zawierać właściwość

A. clear: both dla bloku 5 oraz float: left jedynie dla 1 i 2 bloku.

B. float: left dla wszystkich bloków.

C. clear: both dla wszystkich bloków.

D. clear: both dla bloku 5 oraz float: left dla pozostałych bloków.

Twoja odpowiedź nie jest poprawna, ale nie przejmuj się, błąd może wynikać z niepełnego zrozumienia zastosowania właściwości 'float' i 'clear' w CSS. Zastosowanie 'float: left' dla wszystkich bloków nie jest dobrym pomysłem, ponieważ spowoduje to, że wszystkie bloki będą się starały zmieścić w jednym rzędzie, co jest niezgodne z założonym układem. Podobnie, dodawanie 'clear: both' do wszystkich bloków też nie jest poprawne, ponieważ spowoduje to, że wszystkie bloki będą wyświetlane jeden pod drugim, zamiast obok siebie. Właściwość 'clear' powinna być stosowana do bloków, które chcemy wyświetlić poniżej innych bloków, natomiast 'float: left' powinien być stosowany do bloków, które chcemy wyświetlić obok siebie. Pamiętaj, że zrozumienie tych właściwości i umiejętność ich stosowania jest kluczowe dla tworzenia efektywnych i atrakcyjnych layoutów stron internetowych.

Pytanie 32

Który składnik nie jest wymagany do instalacji i uruchomienia systemu CMS Joomla!?

A. parser PHP

B. platforma .NET

C. serwer WWW

D. baza danych

W pytaniu o wymagania systemowe dla Joomla! bardzo łatwo pomylić ogólne pojęcie „serwer” czy „platforma” z konkretnymi technologiami, które faktycznie są potrzebne. Joomla! to klasyczny CMS napisany w PHP, który działa w architekturze klient–serwer zgodnej z typowym modelem aplikacji webowych. Do poprawnego działania potrzebuje trzech filarów: serwera WWW, interpretera PHP oraz relacyjnej bazy danych. Serwer WWW, taki jak Apache czy Nginx, przyjmuje żądania HTTP z przeglądarki, obsługuje pliki statyczne i przekazuje żądania do skryptów PHP. Bez tego elementu użytkownik w ogóle nie byłby w stanie połączyć się z witryną. Parser (interpretator) PHP jest absolutnie kluczowy, bo cały kod Joomla! – logika logowania, panele administracyjne, generowanie treści, system szablonów – jest napisany właśnie w tym języku. To nie jest zwykły „dodatek”, tylko środowisko uruchomieniowe aplikacji. Baza danych z kolei przechowuje wszystkie dynamiczne dane: artykuły, użytkowników, uprawnienia, moduły, konfigurację. Bez bazy CMS przestałby być „systemem zarządzania treścią”, bo nie miałby gdzie tej treści trwale zapisywać. Częsty błąd myślowy polega na wrzucaniu do jednego worka wszystkich technologii serwerowych: skoro coś działa „na serwerze”, to może wymaga .NET, Javy, PHP – wszystko jedno. Tymczasem każdy CMS jest pisany w konkretnej technologii i wymaga zgodnego z nią środowiska. Joomla! nie wykorzystuje ASP.NET ani bibliotek .NET, więc platforma .NET nie jest jej potrzebna do niczego. Można mieć serwer z zainstalowanym .NET, ale jeśli nie ma tam PHP i odpowiedniej bazy danych, Joomla! i tak nie ruszy. Z mojego doświadczenia warto zawsze zaczynać od sprawdzenia, w jakim języku napisane jest dane oprogramowanie webowe i pod to dobierać stos serwerowy, zamiast zakładać, że każda aplikacja webowa wymaga .NET tylko dlatego, że kojarzy się on z „nowoczesnym” serwerem.

Pytanie 33

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

A. Początki HTMLW 1980 fizyk Tim Berners-Lee, pracownik CERN,<hr /> stworzyłprototyp hipertekstowego systemu informacyjnego - ENQUIRE

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

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

D. Początki HTMLW 1980 fizyk Tim Berners-Lee, pracownik CERN, stworzyłprototyp hipertekstowego systemu informacyjnego - ENQUIRE

Wybory, które nie używają <h1> do tytułu, nie oddają poprawnej struktury semantycznej wymaganej w XHTML. Oznaczenie nagłówka jako jest niewłaściwe, ponieważ jest znacznikiem stylizującym tekst jako pogrubiony, ale nie semantycznie nie mówi, że jest to nagłówek. XHTML, będąc bardziej restrykcyjną wersją HTML, wymaga ścisłego trzymania się hierarchii nagłówków, co pomaga w czytelności dokumentu przez oprogramowanie wspomagające i wyszukiwarki. Użycie <hr /> w odpowiedzi trzeciej jako linia pozioma jest semantycznie mylące, gdyż nie oddziela to części tekstu, a jedynie wizualnie dzieli fragmenty, co w XHTML, gdzie semantyka jest kluczowa, nie jest zalecane. Strona zapisana w XHTML powinna używać tagów zgodnie z ich przeznaczeniem, co poprawia dostępność i zrozumienie kodu. Dodatkowo, nieprawidłowo ustrukturyzowane znaczniki mogą prowadzić do problemów z parsowaniem przez przeglądarki, co jest niepożądane w profesjonalnym tworzeniu stron internetowych. Dlatego odpowiednia semantyka i poprawna struktura są kluczowe w projektowaniu stron zgodnych z XHTML.

Pytanie 34

Co zazwyczaj wchodzi w skład frameworka?

A. wbudowany serwer i obsługa formularzy

B. zarządzanie komunikacją z bazą oraz mechanizm uruchamiania i przetwarzania akcji

C. obsługa błędów i domena

D. certyfikat HTTP oraz mechanizm przetwarzania akcji

Framework dostarcza gotowy szkielet aplikacji, a w jego skład wchodzą m.in. mechanizmy zarządzania komunikacją z bazą danych oraz uruchamiania i przetwarzania akcji (żądań) - czyli „rusztowanie”, na którym programista buduje logikę. Dzięki temu nie pisze się tych elementów od zera. Dlatego framework zawiera obsługę bazy oraz przetwarzanie akcji.

Pytanie 35

W CSS określono styl dla paragrafu, który nada mu poniższe cechy:

background-color: red;
color: blue;
margin: 40px;

A. tło w kolorze niebieskim, tekst w kolorze czerwonym, marginesy wewnętrzne o wartości 40px

B. tło w kolorze czerwonym, tekst w kolorze niebieskim, marginesy zewnętrzne o wartości 40px

C. tło w kolorze niebieskim, tekst w kolorze czerwonym, marginesy zewnętrzne o wartości 40px

D. tło w kolorze czerwonym, tekst w kolorze niebieskim, marginesy wewnętrzne o wartości 40px

W podanym przykładzie z CSS zastosowano trzy kluczowe właściwości stylizujące element HTML: background-color color oraz margin. Właściwość background-color określa kolor tła danego elementu tutaj przyjęto wartość red co oznacza czerwone tło. Właściwość color definiuje kolor tekstu w elemencie który w tym przypadku jest ustawiony na blue czyli niebieski. Ostatnią właściwością jest margin która odpowiada za marginesy zewnętrzne elementu. Marginesy zewnętrzne to przestrzeń wokół elementu od jego krawędzi do sąsiadujących elementów i w tym przykładzie mają wartość 40px. Takie ustawienia są często używane w praktyce aby zapewnić czytelność i estetykę projektu. Używanie marginesów zewnętrznych to dobra praktyka w celu zachowania odpowiednich odstępów w układzie strony. Warto podkreślić że użycie tych właściwości jest zgodne ze standardami CSS zapewniając kompatybilność z większością przeglądarek. Właściwe stosowanie kolorów i marginesów jest kluczowe w projektowaniu przyjaznym dla użytkownika UX oraz estetycznie spójnych interfejsów graficznych.

Pytanie 36

Które z wymienionych oprogramowań NIE jest systemem zarządzania treścią (CMS)?

A. Joomla

B. Apache

C. Mambo

D. WordPress

Apache (Apache HTTP Server) to serwer WWW - oprogramowanie, które odbiera żądania przeglądarek i odsyła im strony; stanowi część infrastruktury, na której działają witryny. Nie służy do zarządzania treścią. Systemy CMS (Content Management System), takie jak WordPress, Joomla! czy Mambo, pozwalają natomiast tworzyć i edytować zawartość strony bez programowania - i często działają właśnie na serwerze Apache. Dlatego to Apache nie jest CMS-em.

Pytanie 37

Z czego skorzystać, aby tworzyć strony internetowe w sposób GRAFICZNY (wizualny)?

A. przeglądarki internetowej

B. programu MS Office Picture Manager

C. programu typu WYSIWYG

D. edytora CSS

Aby tworzyć strony w sposób GRAFICZNY (wizualny), bez ręcznego pisania kodu, korzysta się z programu typu WYSIWYG - układa się elementy na podglądzie, a narzędzie generuje kod HTML/CSS. Dlatego właściwy jest program WYSIWYG.

Pytanie 38

W CSS wartości takie jak: underline, overline, line-through oraz blink odnoszą się do właściwości

A. text-decoration

B. font-style

C. font-decoration

D. text-align

Właściwość CSS 'text-decoration' jest używana do określenia dekoracji tekstu. Do jej wartości zaliczają się między innymi: 'underline' (podkreślenie), 'overline' (nadpisanie), 'line-through' (przekreślenie) oraz 'blink' (miganie), chociaż ostatnia z nich jest obecnie rzadko używana z powodu problemów z dostępnością i wsparciem w nowoczesnych przeglądarkach. W praktyce, użycie 'text-decoration' pozwala na poprawę czytelności tekstu oraz jego wyróżnienie w kontekście estetyki strony internetowej. Na przykład, stosując 'text-decoration: underline;' możemy podkreślić linki, co jest powszechną praktyką w projektowaniu stron. Zgodnie z wytycznymi W3C, stosowanie dekoracji tekstu powinno być przemyślane, aby nie wprowadzać zamieszania w interpretacji treści przez użytkowników. Przykładowo, nadpisanie może być użyte w kontekście wskazywania błędów, co wprowadza dodatkowe znaczenie do przekazu. Zrozumienie i umiejętne stosowanie 'text-decoration' jest kluczowe dla tworzenia profesjonalnych i funkcjonalnych interfejsów użytkownika.

Pytanie 39

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 , <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 , które mają w atrybucie class wpisaną klasę uzytkownik, np. Treść. 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 , <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 40

Który z akapitów został zapisany w wskazanym stylu, zakładając, że pozostałe właściwości akapitu mają wartości domyślne?

A. Efekt 2

B. Efekt 1

C. Efekt 3

D. Efekt 4

Odpowiedź Efekt 3 jest poprawna, ponieważ odzwierciedla wszystkie zadane style CSS. Styl zawiera padding 20px co oznacza, że wewnętrzna przestrzeń wokół tekstu w paragrafie powinna wynosić 20 pikseli. Daje to efekt przestrzeni pomiędzy tekstem a obramowaniem. Kolor tekstu został ustawiony na niebieski co powoduje, że sam tekst przyjmuje niebieską barwę. Parametr font-weight jest ustawiony na 900 co oznacza, że tekst powinien być bardzo pogrubiony. Obecnie jest to maksymalna wartość dla własności font-weight w standardzie CSS która powoduje, że tekst wygląda na bardzo wyrazisty i wyróżnia się na tle innych elementów. Dodatkowo border ustawiono na 1px solid co oznacza, że paragraf powinien mieć jednolitą linię o grubości jednego piksela otaczającą jego obszar. Wszystkie te style są poprawnie zastosowane w Efekcie 3 gdzie tekst jest niebieski bardzo pogrubiony z przestrzenią 20 pikseli do obramowania oraz otoczony cienką linią. Taki styl jest często wykorzystywany w projektach stron internetowych dla wyraźnego wyróżnienia ważnych sekcji co zgodne jest z dobrymi praktykami projektowania interfejsów użytkownika.

Rozpocznij nowy egzamin

Powrót do strony głównej