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: 8 czerwca 2026 07:00
Data zakończenia: 8 czerwca 2026 07:15

Egzamin zdany!

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

Wymagane minimum: 20 punktów (50%)

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Element <meta charset="utf-8"> definiuje metadane odnoszące się do strony internetowej dotyczące

A. opisu witryny

B. języka używanego na stronie

C. słów kluczowych

D. kodowania znaków

Element <meta charset="utf-8"> jest kluczowym składnikiem metadanych w dokumentach HTML, który określa sposób kodowania znaków używanych na stronie internetowej. Użycie kodowania UTF-8, które jest najczęściej stosowanym standardem, pozwala na wyświetlanie różnorodnych znaków z różnych języków, w tym znaków diakrytycznych. Dzięki temu, strony internetowe mogą być dostępne dla szerokiego grona użytkowników bez obaw o błędy związane z wyświetlaniem tekstu. Kiedy przeglądarka internetowa napotyka ten element, wie, że powinna interpretować zawartość dokumentu zgodnie z określonym kodowaniem. Jest to szczególnie ważne w kontekście globalizacji internetu, gdzie treści mogą być tworzone w wielu językach. Ustalając odpowiednie kodowanie, programiści minimalizują ryzyko wystąpienia problemów z wyświetlaniem, takich jak zamienione znaki czy nieczytelne fragmenty tekstu. Właściwe ustawienie metadanych jest zgodne z wytycznymi W3C oraz zaleceniami dla twórców stron internetowych, co czyni ten element niezbędnym w każdej współczesnej witrynie.

Pytanie 2

Atrybut colspan służy do poziomego łączenia komórek tabeli, natomiast rowspan pozwala na łączenie ich w pionie. Którą z poniższych tabel ukazuje fragment kodu napisany w języku HTML?
<table border="1" cellspaing="0" cellpadding="10" >
<tr> <td rowspan="2"> </td> <td> </td> </tr>
<tr> <td> </td> </tr>
</table>

A. rys. A

B. rys. B

C. rys. C

D. rys. D

W języku HTML atrybut rowspan w znaczniku <td> pozwala na scalanie komórek w pionie co oznacza że dana komórka zajmuje miejsce w kilku wierszach tabeli W podanym kodzie pierwsza komórka w pierwszym wierszu posiada atrybut rowspan z wartością 2 co sprawia że zajmuje ona miejsce w dwóch wierszach Pierwszy wiersz zawiera dwie komórki z czego pierwsza jest połączona pionowo z komórką w drugim wierszu Druga komórka w pierwszym wierszu oraz jedyna komórka w drugim wierszu nie posiadają atrybutu rowspan ani colspan dlatego nie są połączone z innymi komórkami Takie użycie rowspan jest zgodne z praktykami HTML które umożliwiają tworzenie bardziej złożonych układów tabeli dzięki czemu można lepiej zarządzać przestrzenią w interfejsie użytkownika Jako że kod tworzy tabelę z dwiema kolumnami i dwoma wierszami gdzie pierwsza komórka po lewej stronie zajmuje dwa wiersze przedstawia to układ jak na rysunku B Możliwości jakie daje rowspan są niezwykle przydatne w sytuacjach gdy chcemy aby dane w tabeli były czytelniejsze i bardziej zorganizowane szczególnie w raportach czy formularzach gdzie różne kategorie danych muszą być jasno oddzielone

Pytanie 3

Na przedstawionym obrazie zobrazowano wybór formatu pliku do zaimportowania bazy danych. Który z formatów należy wybrać, jeśli dane zostały wyeksportowane z programu Excel i zapisane w formie tekstowej z użyciem przecinka do oddzielania wartości pól?

A. SQL

B. CSV

C. XML

D. ESRI

CSV to skrót od Comma-Separated Values czyli wartości oddzielone przecinkami Jest to powszechnie stosowany format plików tekstowych używany do przechowywania danych tabelarycznych Takie pliki są łatwe do utworzenia edytowania i odczytu przez różnorodne aplikacje co czyni je wszechstronnym wyborem dla transferu danych między różnymi systemami i programami Główną zaletą formatu CSV jest jego prostota i szeroka kompatybilność zwłaszcza z programami do obsługi arkuszy kalkulacyjnych takimi jak Microsoft Excel czy Google Sheets Kiedy dane są eksportowane z Excela jako tekst z przecinkami oddzielającymi wartości CSV to optymalny wybór dla importu do baz danych czy innych aplikacji gdzie dane muszą być szybko i bezproblemowo przetworzone Standard ten nie zawiera informacji o typach danych kolorach czy formatach co sprawia że jest lekki i niezawodny CSV jest również obsługiwany przez większość języków programowania co znacznie ułatwia jego obsługę i integrację w procesach automatyzacji Jest to idealne rozwiązanie gdy potrzebujemy prostego i szybkiego sposobu na przeniesienie danych bez skomplikowanych zależności

Pytanie 4

Jak nazywa się edytor stron, którego działanie tłumaczy się jako „otrzymujesz to, co widzisz”?

A. IDE

B. WYSIWYG

C. WEB STUDIO

D. VISUAL EDITOR

WYSIWYG (What You See Is What You Get - „otrzymujesz to, co widzisz”) to edytor, w którym podczas pracy widać efekt zbliżony do finalnego wyglądu strony, bez konieczności pisania kodu. Dlatego mowa o edytorze WYSIWYG.

Pytanie 5

Jak wygląda poprawny zapis samozamykającego się znacznika łamania linii?

</br>

<br/>

</ br>

<br> </br>

Pozostałe zapisy łamią zasady void-elementów. </br> i </ br> to znaczniki ZAMYKAJĄCE, a element pusty takiego nie posiada (do tego spacja w drugim jest niedozwolona). <br></br> próbuje domknąć go osobną parą, jakby miał zawartość. Poprawna samozamykająca forma to <br/>.

Pytanie 6

Na czym polega opracowanie logicznego UKŁADU strony internetowej?

A. na zdefiniowaniu treści strony

B. na przygotowaniu zestawu grafik

C. na ustaleniu adresów URL podstron

D. na rozmieszczeniu elementów w określonych miejscach strony

Logiczny układ strony to zaplanowanie, GDZIE znajdą się poszczególne elementy - nagłówek, menu, treść główna, panel boczny, stopka. Chodzi o rozmieszczenie bloków w określonych miejscach, zanim wypełni się je treścią. Dlatego układ to rozmieszczenie elementów na stronie.

Pytanie 7

Jak nazywa się zestaw narzędzi i funkcji do tworzenia aplikacji, narzucający jej szkielet, strukturę, a czasem wzorzec budowy?

A. biblioteka

B. framework

C. komponent

D. middleware

Framework to zestaw narzędzi i funkcji narzucający aplikacji SZKIELET i strukturę (a często wzorzec budowy, np. MVC) - programista uzupełnia gotowy stelaż własnym kodem. Dlatego to framework.

Pytanie 8

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

A. <link rel="stylesheet" type="text/css" href="./style/default.css" />

B. <link rel="stylesheet" type="text/css" href="c:/style/default.css" />

C. <link rel="stylesheet" type="text/css" href="...\style\default.css" />

D. <link rel="stylesheet" type="text/css" href="c:\style/default.css" />

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

Pytanie 9

CAPTCHA to technika zabezpieczeń stosowana na stronach WWW, która pozwala:

A. przyspieszyć logowanie do aplikacji internetowej

B. pominąć proces uwierzytelniania w aplikacji

C. potwierdzić, że dane z formularza wysyła człowiek, a nie program

D. automatycznie wypełnić formularz danymi użytkownika

CAPTCHA to test, który ma odróżnić człowieka od programu (bota) - np. przepisanie zniekształconego tekstu, wskazanie obrazków czy proste zadanie. Stosuje się ją w formularzach (rejestracja, komentarze, logowanie), by utrudnić masowe, automatyczne wysyłanie danych przez boty i spam. Dlatego CAPTCHA potwierdza, że dane z formularza wysyła człowiek.

Pytanie 10

Jaką właściwość pola w tabeli powinno się ustawić, aby akceptowało ono wyłącznie dane liczbowe?

A. Tagi inteligentne

B. Wartość domyślną

C. Maskę wprowadzania

D. Regułę sprawdzania poprawności

Maska wprowadzania to opcja pozwalająca na zdefiniowanie wzorca, według którego użytkownicy mogą wprowadzać dane do pola w bazie danych. W przypadku konieczności przyjmowania wyłącznie cyfr, maska wprowadzania może ograniczyć użytkownika do wpisywania numerów, co jest szczególnie przydatne w aplikacjach wymagających precyzyjnego formatu danych, takich jak numery telefonów, kody pocztowe czy numery identyfikacyjne. Maska zapewnia spójność danych oraz minimalizuje ryzyko błędnych wpisów. Przykładowo, maska 0000-000-000 może być użyta do wymuszenia formatu numeru telefonu, gdzie każda liczba 0 reprezentuje wymaganą cyfrę. W branży IT oraz w procesie projektowania systemów bazodanowych, takie rozwiązania przyczyniają się do podniesienia jakości danych oraz upraszczają proces ich przetwarzania. Stosowanie masek wprowadzania jest zgodne z najlepszymi praktykami w dziedzinie zarządzania danymi, które podkreślają znaczenie walidacji danych na poziomie aplikacji oraz baz danych, aby uniknąć nieprawidłowych lub niekompletnych danych w systemie.

Pytanie 11

Aby strona WWW była przesyłana do przeglądarki w postaci zaszyfrowanej, należy zastosować protokół:

A. HTTPS

B. HTTP

C. SFTP

D. SSH

HTTPS to protokół HTTP działający przez szyfrowane połączenie TLS. Dane wymieniane między serwerem a przeglądarką - treść strony, dane logowania, formularze - są szyfrowane, więc osoba podsłuchująca ruch nie odczyta ich ani nie podmieni. Certyfikat serwera pozwala też przeglądarce potwierdzić tożsamość witryny (kłódka w pasku adresu). Dlatego do bezpiecznego, zaszyfrowanego przesyłania strony WWW stosuje się właśnie HTTPS.

Pytanie 12

Zaprezentowano tabelę stworzoną przy użyciu kodu HTML, bez zastosowania stylów CSS. Która część kodu HTML odnosi się do pierwszego wiersza tabeli?

A. Rys. A

B. Rys. B

C. Rys. C

D. Rys. D

Pierwszy wiersz tabeli HTML zazwyczaj zawiera nagłówki kolumn i jest oznaczony za pomocą znaczników <th> (table header). Zgodnie z dobrymi praktykami tworzenia tabel w HTML, nagłówki powinny być oddzielone od danych, aby poprawić zarówno estetykę, jak i funkcjonalność tabeli. W odpowiedzi Rys. D użyto znaczników <th> co poprawnie definiuje nagłówki kolumn. W ten sposób przeglądarki potrafią wyróżnić nagłówki, np. poprzez pogrubienie tekstu, co jest domyślnym zachowaniem. Zastosowanie <th> poprawia również dostępność tabel, ponieważ technologie asystujące lepiej interpretują strukturę danych w tabelach, co jest zgodne z wytycznymi WCAG (Web Content Accessibility Guidelines). Korzystając z <th>, można dodatkowo określić atrybut scope, który jeszcze bardziej precyzuje relacje w tabeli, co jest szczególnie przydatne w bardziej złożonych strukturach. W praktyce, kiedy projektujemy strony internetowe, stosowanie prawidłowych znaczników semantycznych jest kluczowe dla tworzenia zrozumiałego i dostępnego interfejsu użytkownika. Dlatego też wybór fragmentu z <th> jako reprezentującego pierwszy wiersz tabeli jest zgodny z zaleceniami i standardami nowoczesnego front-endu.

Pytanie 13

Dla strony internetowej stworzono styl, który będzie stosowany tylko do wybranych znaczników, takich jak niektóre nagłówki oraz kilka akapitów. W tej sytuacji, aby przypisać styl do konkretnych znaczników, najodpowiedniejsze będzie użycie

A. klasy

B. pseudoklasy

C. identyfikatora

D. selektora akapitu

Użycie klasy w CSS jest najlepszym rozwiązaniem, gdy chcemy zastosować ten sam styl do wielu elementów HTML, ale nie do wszystkich. Klasy w CSS są definiowane za pomocą kropki przed nazwą klasy, np. .nazwa-klasy, i mogą być przypisane do dowolnego elementu HTML za pomocą atrybutu class. Dzięki temu możemy elastycznie i efektywnie zarządzać stylami na stronie internetowej. Klasy są bardzo przydatne w dużych projektach, gdzie powtarzalność i spójność stylów są kluczowe. Pozwalają także na ponowne wykorzystanie tych samych stylów w różnych miejscach projektu bez konieczności kopiowania kodu CSS. Użycie klas zwiększa czytelność i organizację kodu, co jest zgodne z najlepszymi praktykami programowania. Stosowanie klas jest także zalecane w kontekście frameworków CSS, takich jak Bootstrap, które intensywnie wykorzystują klasy do definiowania komponentów i układów. Przykład zastosowania klasy: .align-right { text-align: right; } można przypisać do różnych nagłówków czy akapitów, które mają być wyrównane do prawej.

Pytanie 14

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

A. <u>

B. <em>

C. <pre>

D. <strong>

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

Pytanie 15

Której właściwości CSS należy użyć, aby ustawić marginesy wewnętrzne elementu?

hight

width

margin

padding

Marginesy WEWNĘTRZNE - odstęp między treścią elementu a jego obramowaniem - ustawia w CSS padding, np. padding: 10px; daje 10 px wolnego miejsca dookoła treści wewnątrz ramki. To część modelu pudełkowego (box model). Zapamiętaj różnicę: padding jest WEWNĄTRZ ramki, a margin na ZEWNĄTRZ.

Pytanie 16

W kodzie CSS stworzono cztery klasy stylizacji, które zostały wykorzystane do formatowania akapitów. Efekt widoczny na ilustracji uzyskano dzięki zastosowaniu klasy o nazwie

A. format1

B. format2

C. format3

D. format4

Odpowiedź format2 jest poprawna, ponieważ stylizacja zastosowana do tekstu na obrazie to line-through, co oznacza przekreślenie. W CSS właściwość text-decoration pozwala na dodawanie różnych dekoracji do tekstu, takich jak underline (podkreślenie), overline (nadkreślenie) czy line-through (przekreślenie). Przekreślenie jest często używane do zaznaczania usuniętego tekstu lub do pokazywania zmian w dokumentach, co jest zgodne z dobrą praktyką w edytorach tekstu i aplikacjach do śledzenia zmian. W kodzie HTML klasy CSS są zazwyczaj stosowane poprzez dodanie atrybutu class do odpowiedniego elementu. Użycie klasy format2 w kodzie HTML wyglądałoby jak <p class='format2'>. Wielu projektantów korzysta z takich dekoracji, aby poprawić czytelność i funkcjonalność stron internetowych, zapewniając użytkownikom intuicyjne oznaczenia wizualne. Ważne jest także użycie semantycznego HTML, co w połączeniu z odpowiednimi stylami CSS pozwala tworzyć dostępne dla użytkowników strony internetowe zgodne ze standardami W3C.

Pytanie 17

Która reguła dotycząca sekcji <head> w HTML jest poprawna?

A. w <head> definiuje się szablon strony znacznikami <div>

B. w <head> zawiera się sekcję <body>

C. w <head> nie można umieszczać CSS, tylko odwołanie do pliku

D. w <head> mogą wystąpić <meta>, <title>, <link>

Sekcja <head> nie zawiera widocznej treści strony, lecz informacje O niej - metadane i powiązania z zasobami. Poprawnie mogą się w niej znaleźć <meta> (np. kodowanie znaków, opis dla wyszukiwarek), <title> (tytuł widoczny na karcie przeglądarki) oraz <link> (np. dołączenie zewnętrznego arkusza CSS). Dlatego poprawne jest stwierdzenie o <meta>, <title> i <link>.

Pytanie 18

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

A. Odpowiedź A

B. Odpowiedź B

C. Odpowiedź C

D. Odpowiedź D

Polecenie rowspan w języku HTML służy do łączenia komórek tabeli w pionie. W podanym fragmencie kodu HTML, atrybut rowspan jest użyty z wartością 2 w pierwszej komórce pierwszego wiersza. Oznacza to, że ta komórka będzie się rozciągać na dwa wiersze, co jest widoczne w odpowiedzi B. Tabelę HTML można wykorzystać do tworzenia złożonych struktur danych, gdzie rowspan jest kluczowe w przypadku, gdy chcemy zminimalizować liczbę komórek i lepiej zorganizować dane w pionowe bloki. Użycie rowspan jest zgodne ze standardami HTML5, które zalecają semantyczne i logiczne układanie danych. Praktyczne zastosowanie rowspan można znaleźć w projektach takich jak raporty finansowe czy skomplikowane formularze, gdzie często wymagane jest łączenie komórek w pionie. W projektowaniu stron internetowych zaleca się stosowanie tabel w przypadkach rzeczywistych danych tabelarycznych, a nie do układu strony, co jest zgodne z wytycznymi dotyczącymi dostępności WCAG.

Pytanie 19

Który z poniższych fragmentów kodu HTML sformatuje tekst zgodnie z wymaganiami? (zauważ, że słowo "stacji" jest wyświetlane w większej czcionce niż pozostałe słowa w tej linii)

A. Odpowiedź 1: A

B. Odpowiedź 2: B

C. Odpowiedź 3: C

D. Odpowiedź 4: D

Odpowiedź B jest prawidłowa ponieważ używa znacznika big do zwiększenia rozmiaru czcionki dla słowa stacji wewnątrz paragrafu. Znacznik big jest standardowym sposobem na zwiększenie tekstu w HTML chociaż obecnie rekomendowane jest stosowanie CSS do takich stylizacji co pozwala na oddzielenie treści od prezentacji. Przykładowo można użyć CSS w stylu inline lub w oddzielnym arkuszu stylów aby uzyskać ten sam efekt co zwiększa elastyczność i spójność projektu. Warto pamiętać że HTML5 wprowadza pewne zmiany i deprecjonuje niektóre znaczniki co wymaga ciągłego aktualizowania wiedzy dewelopera. Znacznik big mimo że działa w większości przeglądarek może być mniej przewidywalny w przyszłości w porównaniu z CSS. Rozdzielenie stylów od struktury dokumentu jest dobrą praktyką programistyczną co ułatwia zarządzanie kodem oraz poprawia dostępność stron internetowych. Pamiętaj by regularnie analizować i aktualizować swoje projekty zgodnie z najnowszymi standardami HTML i CSS.

Pytanie 20

W CSS, stosowanie poniższego kodu na stronie z kilkoma akapitami, gdzie każdy składa się z kilku linijek, spowoduje, że

p::first-line
 {
     font-size: 150%;
 }

A. cały tekst w paragrafie zostanie powiększony o 150%

B. pierwsza linia każdego z paragrafów będzie miała mniejszą wielkość czcionki od pozostałych linii

C. pierwsza linia każdego paragrafu będzie miała większą czcionkę niż pozostałe linie

D. pierwszy paragraf na stronie będzie miał powiększoną czcionkę w całości

Zapis CSS p::first-line { font-size: 150%; } używa selektora pseudo-elementu ::first-line który stosuje stylizację do pierwszej linii każdego paragrafu. W tym przypadku zmieniamy rozmiar czcionki pierwszej linii na 150% jej domyślnej wartości co oznacza że będzie ona o 50% większa niż reszta tekstu. Pseudo-element ::first-line jest często stosowany w projektowaniu stron internetowych aby wyróżnić pierwsze zdanie lub akapit co może pomóc w lepszej organizacji treści i zwiększeniu czytelności. Ten sposób formatowania jest zgodny ze standardami CSS i jest wspierany przez większość nowoczesnych przeglądarek internetowych. Takie podejście może być użyteczne w projektach gdzie istotne jest nadanie unikalnego wyglądu nagłówkom sekcji lub wprowadzeniom bez zmieniania struktury HTML. Ważne jest aby pamiętać że ::first-line stosuje się tylko do elementów blokowych takich jak paragrafy co ogranicza jego użycie do tych specyficznych scenariuszy ale jednocześnie pozwala na precyzyjne dostosowanie stylu tekstu w dokumencie.

Pytanie 21

Przy założeniu, że nie istnieją inne definicje, jakie skutki będzie miało poniższe formatowanie CSS?

<style> td {padding: 30px; } </style>
 …
 <td style="padding: 10px;">Anna</td>
 <td>Ewa</td>

A. marginesy wewnętrzne wszystkich komórek wyniosą 30 px

B. margines wewnętrzny komórki z napisem Anna wyniesie 10 px, a z napisem Ewa – 30 px

C. marginesy wewnętrzne wszystkich komórek wyniosą 10 px

D. margines wewnętrzny komórki z napisem Anna wyniesie 30 px, a z napisem Ewa – 10 px

Odpowiedź jest poprawna, ponieważ w kodzie HTML zastosowano bezpośrednie nadpisanie stylu dla komórki z napisem Anna. Chociaż w sekcji style zdefiniowano, że wszystkie komórki td mają padding 30px, to w przypadku komórki Anna zastosowano style inline, które mają wyższy priorytet i nadpisują ustalone wcześniej wartości. W rezultacie padding dla komórki Anna wynosi 10px. Natomiast dla pozostałych komórek, w tym komórki z napisem Ewa, obowiązuje reguła zdefiniowana globalnie w sekcji style, czyli padding wynosi 30px. Jest to przykład specyficzności w CSS, gdzie style inline są bardziej specyficzne niż style w sekcji style. W praktyce ważne jest, aby rozumieć hierarchię i specyficzność CSS, ponieważ pozwala to na skuteczne zarządzanie stylami i unikanie niezamierzonych zmian w wyglądzie strony. Dobra praktyka nakazuje unikać styli inline na rzecz zewnętrznych arkuszy stylów, co ułatwia zarządzanie kodem i czyni go bardziej czytelnym oraz łatwiejszym w utrzymaniu. Warto też stosować metodologie takie jak BEM, które pomagają w organizacji kodu CSS.

Pytanie 22

Na ilustracji przedstawiono rezultat stosowania stylów CSS oraz odpowiadający mu kod HTML, który generuje ten przykład. Przyjmując, że marginesy wewnętrzne mają wartość 50 px, natomiast zewnętrzne wynoszą 20 px, styl CSS dla tego obrazu wygląda następująco

A. Odpowiedź A

B. Odpowiedź B

C. Odpowiedź C

D. Odpowiedź D

Odpowiedź C jest poprawna, ponieważ zdefiniowany styl CSS zawiera wszystkie elementy odpowiadające przedstawionemu formatowaniu obrazu. Styl ten określa kolor tła jako Teal, co jest zgodne z opisem wizualnym obrazu. Dodatkowo zastosowanie solidnej czarnej ramki o grubości 4 pikseli odpowiada profesjonalnym standardom, które zapewniają wyraźne oddzielenie obrazu od reszty treści przez wyróżnienie go. Zastosowanie marginesów zewnętrznych o wartości 20 pikseli oraz wewnętrznych paddingów o wartości 50 pikseli jest zgodne z podanym założeniem, co pozwala na właściwe umiejscowienie obrazu na stronie, dając przestrzeń wokół i wewnątrz elementu. Dbałość o takie szczegóły jest kluczowa dla tworzenia responsywnych i estetycznych stron internetowych. Praktyczne stosowanie tego typu stylizacji umożliwia poprawienie czytelności oraz przyciąga uwagę użytkowników na znaczące elementy strony. Warto przy tym pamiętać o zasadzie KISS (Keep It Simple, Stupid), która zachęca do utrzymywania prostoty w projektach, co nie tylko ułatwia ich tworzenie ale też późniejsze utrzymanie.

Pytanie 23

Wskaż problem z walidacją w podanym fragmencie kodu HTML

<h6>CSS</h6>
<p>Kaskadowe arkusze stylów (<b>ang. <i>Cascading Style Sheets</b></i>)<br>to język służący... </p>

A. Znacznik zamykający /b niezgodny z zasadą zagnieżdżania

B. Znacznik br nie został poprawnie zamknięty

C. Nieznany znacznik h6

D. Znacznik br nie może występować wewnątrz znacznika p

W przypadku innych odpowiedzi warto zrozumieć dlaczego są one niepoprawne Znacznik br jest rzeczywiście samodzielnym znacznikiem i w starszych wersjach HTML można było go nie zamykać jednak w HTML5 a także dla zachowania zgodności z XML należy go zamykać jako br co zapobiega potencjalnym błędom przy przetwarzaniu dokumentu Znacznik h6 jest jednym z nagłówków dostępnych w HTML i jest jak najbardziej prawidłowy i znany HTML udostępnia sześć poziomów nagłówków od h1 do h6 każdy z nich służy do strukturalnego wyróżnienia treści na stronie Ostatecznie jeśli chodzi o znacznik br umieszczony wewnątrz znacznika p jest to zgodne z HTML mimo że takie użycie może prowadzić do nieczytelności kodu i jest ogólnie odradzane gdyż może zakłócać semantykę dokumentu W tym wypadku lepiej byłoby używać CSS do kontrolowania odstępów między elementami a nie polegać na znaczniku br w paragrafach Błędy te są powszechne wśród początkujących i wynikają często z braku zrozumienia struktury dokumentu HTML oraz jego semantyki Warto zatem zgłębić zasady poprawnego pisania HTML aby zapewnić zgodność z przeglądarkami oraz poprawną prezentację treści na stronie internetowej

Pytanie 24

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 czerwonym, tekst w kolorze niebieskim, marginesy wewnętrzne o wartości 40px

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

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

D. tło w kolorze czerwonym, tekst w kolorze niebieskim, marginesy zewnę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 25

Fragment dokumentu HTML sugeruje, że

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

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

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

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

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

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

Pytanie 26

Które z poniższych oprogramowań nie jest systemem do zarządzania treścią (CMS)?

A. Mambo

B. Joomla

C. Apache

D. WordPress

Odpowiedź "Apache" jest prawidłowa, ponieważ Apache to serwer HTTP, który jest odpowiedzialny za obsługę i dostarczanie stron internetowych do przeglądarek użytkowników. Nie jest to system zarządzania treścią (CMS), który służy do tworzenia, edytowania i publikowania treści na stronach internetowych. Systemy takie jak Mambo, Joomla i WordPress to platformy CMS, które umożliwiają użytkownikom zarządzanie treściami w sposób intuicyjny i przyjazny dla użytkownika. Na przykład, WordPress, będący jednym z najpopularniejszych CMS-ów, oferuje bogaty ekosystem wtyczek oraz motywów, co pozwala na łatwe dostosowanie witryn do indywidualnych potrzeb. W kontekście branżowych standardów, stosowanie CMS-ów pozwala na skuteczniejsze zarządzanie treściami w witrynach, co jest zgodne z najlepszymi praktykami w zakresie tworzenia i utrzymania stron internetowych.

Pytanie 27

Którym znacznikiem osadzić kod CSS wewnątrz dokumentu HTML?

<style>

<head>

<body>

<meta>

Kod CSS osadza się wewnątrz dokumentu HTML w znaczniku <style>, umieszczanym zwykle w sekcji <head>. Reguły zapisane między <style> a </style> stylują elementy całej strony. Dlatego CSS osadza się znacznikiem <style>.

Pytanie 28

Który z zapisów znacznika <div> może pojawić się w dokumencie HTML tylko raz, a ponowne jego użycie spowoduje błędy podczas walidacji tego dokumentu?

A. <div class="klasa">

B. <div class="klasa1 klasa2">

C. <div id="identyfkator">

D. <div>

Odpowiedź <div id="identyfkator"> jest poprawna, ponieważ znacznik <div> z atrybutem id musi być unikalny w obrębie całego dokumentu HTML. Zgodnie z standardami W3C, atrybut id powinien być przypisany tylko do jednego elementu na stronie, co umożliwia jednoznaczne identyfikowanie tego elementu, na przykład w CSS lub JavaScript. Przykładowo, jeśli mamy <div id="header">, to nie możemy użyć tego samego identyfikatora dla innego <div> w tym samym dokumencie, aby uniknąć konfliktów. W praktyce, unikalność id jest kluczowa w kontekście manipulacji DOM, gdyż wiele bibliotek JavaScript polega na tej unikalności, aby prawidłowo odnajdywać i modyfikować elementy. Warto również pamiętać, że użycie unikalnych id sprzyja lepszej dostępności i ułatwia nawigację w dokumentach, co jest zgodne z dobrą praktyką projektowania stron internetowych.

Pytanie 29

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

A. doted

B. double

C. dashed

D. solid

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

Pytanie 30

W przedstawionym kodzie HTML ukazany styl CSS to styl:

<p style="color: red;">To jest przykładowy akapit.</p>

A. zewnętrzny.

B. dynamiczny.

C. lokalny.

D. nagłówkowy.

Odpowiedź "lokalnym" jest prawidłowa, ponieważ styl CSS zastosowany w podanym kodzie HTML definiuje właściwości stylu bezpośrednio w elemencie HTML, co określamy jako styl lokalny (inline style). W tym przypadku, styl "color: red;" został zastosowany bezpośrednio w tagu <p>, co wpływa wyłącznie na ten konkretny akapit. Praktyczne zastosowanie lokalnych stylów polega na tym, że można je szybko dodać do pojedynczych elementów, ale należy pamiętać, że nadmiar lokalnych stylów może prowadzić do problemów z utrzymywaniem i zarządzaniem kodem. Zamiast tego zaleca się stosowanie zewnętrznych arkuszy stylów CSS, co pozwala na centralne zarządzanie stylami dla całej strony. Warto zauważyć, że lokalne style mają wyższy priorytet niż style zewnętrzne, co może prowadzić do konfliktów, jeśli nie zostaną odpowiednio użyte. Aby zapewnić zgodność z najlepszymi praktykami, zaleca się ograniczanie stosowania lokalnych stylów tam, gdzie to możliwe, na rzecz bardziej zorganizowanego podejścia z użyciem klas i identyfikatorów w zewnętrznych arkuszach stylów.

Pytanie 31

Którą wartością można zapisać kolor BIAŁY?

rgb(255, 255, 255)

#000000

#255255

rgb(FF, FF, FF)

Biały powstaje z maksymalnych wartości wszystkich trzech składowych: rgb(255, 255, 255) (lub szesnastkowo #FFFFFF). Dlatego biały to rgb(255, 255, 255).

Pytanie 32

Który zapis znacznika <meta> jest poprawny pod względem użytych atrybutów?

<meta name="!DOCTYPE">

<meta name="description" content="...">

<meta title="Strona dla hobbystów">

<meta background="blue">

Znacznik <meta> opisuje stronę parą atrybutów name i content, więc poprawny jest <meta name="description" content="..."> - name mówi, o jaką informację chodzi, a content podaje jej treść (tu opis strony dla wyszukiwarek). Zapamiętaj wzorzec: <meta name="..." content="...">.

Pytanie 33

W CSS zapis

a[target="_blank"] {color: yellow;}

spowoduje, że tekst linków przybierze kolor żółty.

A. wszystkich linków.

B. linków, które otwierają się w nowej karcie.

C. treści akapitu.

D. linków, które otwierają się w tej samej karcie.

Odpowiedź 'odnośników, które otwierają się w osobnej karcie' jest poprawna, ponieważ w CSS selektor 'a[target="_blank"]' odnosi się do elementów <a> (odnośników), które mają atrybut 'target' ustawiony na '_blank'. Oznacza to, że te odnośniki są zaprojektowane do otwierania linków w nowej karcie lub oknie przeglądarki. Przykład zastosowania: jeśli tworzymy stronę internetową z odnośnikami do zewnętrznych zasobów, użycie atrybutu 'target="_blank"' pozwala użytkownikom na zachowanie otwartej strony w przeglądarce. W CSS, kolor czcionki tych odnośników został ustawiony na żółty, co jest praktycznym podejściem do wyróżnienia ich w stosunku do innych linków. Warto również zauważyć, że stosowanie kolorów w kontekście dostępności jest istotne, dlatego dobór kolorów powinien być przemyślany, aby nie wpłynąć negatywnie na czytelność. Dobre praktyki obejmują również dodanie wskazówki do odnośnika, na przykład poprzez użycie atrybutu 'title', co jeszcze bardziej ułatwia użytkownikom zrozumienie, czego mogą się spodziewać po kliknięciu w link.

Pytanie 34

Jakie znaki <header>, <article>, <section>, <footer> są typowe dla tego języka?

A. HTML 5

B. XHTML 1.1

C. HTML 4.01 Transitional

D. HTML 4.01 Strict

Znaczniki <header>, <article>, <section>, <footer> są częścią specyfikacji HTML5, która wprowadziła bardziej semantyczne podejście do strukturyzacji dokumentów webowych. Te elementy umożliwiają programistom tworzenie bardziej przejrzystych i zrozumiałych dokumentów, zarówno dla ludzi, jak i dla maszyn. Na przykład, znacznik <header> definiuje nagłówek strony lub sekcji, <article> służy do oznaczania samodzielnych treści, które mogą być niezależnie dystrybuowane, <section> grupuje powiązane tematycznie elementy, a <footer> zawiera informacje o końcu strony lub sekcji. Użycie tych znaczników ma kluczowe znaczenie dla SEO, ponieważ wyszukiwarki mogą lepiej zrozumieć strukturę treści na stronie. Dodatkowo, zastosowanie tych elementów wspiera dostępność, ułatwiając nawigację osobom korzystającym z czytników ekranu. W praktyce, stosując te znaczniki, programiści tworzą bardziej uporządkowane i zrozumiałe strony, co jest zgodne z najlepszymi praktykami w branży.

Pytanie 35

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

A. Akapit 2

B. Akapit 1

C. Akapit 4

D. Akapit 3

Twoja odpowiedź jest prawidłowa. Właściwość CSS 'border-radius: 20%;' jest faktycznie zastosowana do drugiego akapitu, co jest widoczne na załączonym obrazie. Akapit ten ma zaokrąglone rogi, co jest efektem działania tej właściwości CSS. Zaokrąglenie rogów elementów HTML jest często stosowaną techniką, która dodaje estetyki i wyrafinowania do projektu strony internetowej. Pozwala to na łamanie monotonii sześciokątnych zmian i dodaje unikalności do ogólnego wyglądu. Dobrą praktyką jest stosowanie 'border-radius' z umiarem, aby nie przesadzić z zaokrągleniem, które może zakłócić spójność całego projektu. Oprócz zaokrąglania rogów, właściwość 'border-radius' pozwala również na tworzenie kształtów eliptycznych czy okrągłych, co potrafi bardzo ciekawie odmienić charakter strony.

Pytanie 36

Która z wymienionych grup znaczników HTML zawiera elementy przeznaczone do grupowania oraz tworzenia struktury dokumentu?

A. br, img, hr

B. table, tr, td

C. span, strong, em

D. div, article, header

Odpowiedź 'div, article, header' jest poprawna, ponieważ te znaczniki HTML są kluczowymi elementami umożliwiającymi grupowanie i organizację treści w dokumentach webowych. Znacznik 'div' jest uniwersalnym kontenerem, który można wykorzystać do grupowania innych elementów w celu lepszej strukturyzacji strony. 'article' jest przeznaczony do oznaczania niezależnych fragmentów treści, takich jak posty na blogach, które mogą być samodzielnie dystrybuowane. Z kolei 'header' zazwyczaj zawiera nagłówki i elementy wprowadzające dla sekcji strony. Zastosowanie tych znaczników zgodnie z wytycznymi W3C sprzyja poprawnej hierarchii dokumentu, co z kolei zwiększa użyteczność strony oraz jej dostępność dla technologii asystujących. Przykładowo, użycie 'article' pozwala wyszukiwarkom i czytnikom ekranu lepiej zrozumieć strukturę treści, co może pozytywnie wpłynąć na SEO oraz doświadczenia użytkowników.

Pytanie 37

Aby obraz wstawiony na stronę internetową mógł dostosować się automatycznie do wymiarów ekranu, na którym jest wyświetlany, konieczne jest

A. ustawienie obu jego rozmiarów w pikselach

B. ustawienie jednego z jego wymiarów w pikselach

C. niezmienianie obu jego wymiarów za pomocą stylów CSS

D. ustawienie jego szerokości w wartościach procentowych

Ustawienie szerokości obrazu w wartościach procentowych jest kluczowym aspektem responsywnego projektowania stron internetowych. Dzięki temu obraz automatycznie dostosowuje się do szerokości kontenera, w którym jest umieszczony, co pozwala na płynne skalowanie w zależności od rozmiaru ekranu. Na przykład, jeśli szerokość obrazu ustawimy na 100%, to obraz będzie zawsze zajmował całą szerokość swojego kontenera, co jest szczególnie ważne w przypadku urządzeń mobilnych oraz różnych rozdzielczości ekranów. To podejście wspiera zasady projektowania responsywnego, które są fundamentem nowoczesnych stron internetowych. Dodatkowo, stosowanie jednostek procentowych zamiast pikseli umożliwia lepszą dostępność i poprawia doświadczenia użytkowników, eliminując problemy związane z przewijaniem lub wyświetlaniem treści poza ekranem. Obrazy ustawione w procentach pozwalają na bardziej elastyczne układy, które lepiej reagują na zmiany rozmiarów okien przeglądarki, co jest zgodne z najlepszymi praktykami w branży, takimi jak użycie Frameworków CSS, jak Bootstrap, które bazują na responsywnych gridach.

Pytanie 38

Który typ komunikatu jest przesyłany WYŁĄCZNIE „w dół” - od kierownika do pracownika?

A. zgłaszanie

B. poszukiwanie rozwiązań

C. uwagi dotyczące polityki organizacji

D. powierzenie zadania

Komunikacja „w dół” płynie od przełożonego do podwładnego, a jej typowym przykładem jest POWIERZENIE ZADANIA - kierownik przydziela pracownikowi obowiązek do wykonania. Dlatego komunikatem „w dół” jest powierzenie zadania.

Pytanie 39

W języku CSS przedstawione w ramce stylizacje będą miały następujące zastosowanie. Kolorem czerwonym zostanie zapisany

h1 i {color: red;}

A. jedynie tekst pochylony w nagłówku pierwszego stopnia

B. wyłącznie tekst pochylony we wszystkich nagłówkach

C. kompletny tekst nagłówka pierwszego stopnia oraz pochylony tekst akapitu

D. pełny tekst nagłówka pierwszego stopnia oraz cały tekst pochylony, bez względu na jego lokalizację na stronie

Odpowiedź 1 jest poprawna, ponieważ selektor CSS 'h1 i' odnosi się do wszystkich elementów <i> (czyli tekstu pochylonego) znajdujących się wewnątrz elementów nagłówka <h1>. Oznacza to, że tylko tekst pochylony w nagłówkach pierwszego stopnia zostanie sformatowany na kolor czerwony. Jest to przykład selektora złożonego, który jest używany do stylizowania elementów zagnieżdżonych w określonym kontekście. W praktyce, takie podejście pozwala na precyzyjne kontrolowanie stylów na poziomie struktury dokumentu HTML, co jest zgodne z dobrymi praktykami w zakresie utrzymania i czytelności kodu CSS. Podczas projektowania arkuszy stylów ważne jest, aby stosować specyficzne selektory tylko tam, gdzie jest to konieczne, aby uniknąć nadmiernego komplikowania stylów i zapewnić lepszą wydajność renderowania stron w przeglądarkach. Dodatkowo, używając właściwości 'color', możemy definiować sposób, w jaki kolor tekstu prezentuje się na stronie, co jest kluczowe dla tworzenia dostępnych i estetycznych interfejsów użytkownika.

Pytanie 40

Która technologia zapewnia SZYFROWANE połączenie ze stroną (HTTPS)?

A. SSL

B. CMS

C. SEO

D. FTP

Szyfrowane połączenie ze stroną (HTTPS) zapewnia technologia SSL (dziś jej następca TLS) - szyfruje dane przesyłane między przeglądarką a serwerem, tak że przechwycone w drodze są nieczytelne, oraz potwierdza tożsamość witryny certyfikatem. Dlatego za HTTPS odpowiada SSL.

Rozpocznij nowy egzamin

Powrót do strony głównej