Wyniki egzaminu

Informacje o egzaminie:
  • Zawód: Technik programista
  • Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
  • Data rozpoczęcia: 17 grudnia 2025 14:34
  • Data zakończenia: 17 grudnia 2025 14:34

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

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

W przedstawionym kodzie HTML ukazany styl CSS to styl:

<p style="color: red;">To jest przykładowy akapit.</p>
A. dynamiczny.
B. nagłówkowy.
C. lokalny.
D. zewnętrzny.

Brak odpowiedzi na to pytanie.

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

Aby zastosować w CSS wcięcie pierwszej linii akapitu na 30 pikseli, należy użyć zapisu

A. p{text-indent: 30px;}
B. p{line-indent: 30px;}
C. p{text-spacing: 30px;}
D. p{line-height: 30px;}

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wcięcie pierwszej linii akapitu w języku CSS można uzyskać poprzez użycie właściwości 'text-indent', która pozwala na precyzyjne określenie odstępu od lewej krawędzi dla pierwszej linii tekstu w elemencie blokowym, takim jak akapit. Przykład zapisu 'p{text-indent: 30px;}' wskazuje, że pierwsza linia każdego akapitu (<p>) będzie miała wcięcie o wartości 30 pikseli. Właściwość ta jest szeroko stosowana w projektowaniu stron internetowych, aby poprawić czytelność tekstu i nadać stronie estetyczny wygląd. Warto zauważyć, że 'text-indent' działa tylko na pierwszą linię akapitu, co czyni ją idealnym narzędziem do formatowania tekstu w sposób, który podkreśla jego strukturę. W kontekście standardów CSS, jest to właściwość zdefiniowana w CSS1 i pozostaje w użyciu w kolejnych wersjach, co świadczy o jej stabilności i ciągłej przydatności w praktykach web developmentu. Przykładem zastosowania może być dodanie wcięcia do tekstu w artykule informacyjnym lub blogu, aby wizualnie oddzielić pierwszą linię od reszty tekstu, co może ułatwić nawigację i skupienie uwagi czytelnika.

Pytanie 3

W HTML, aby ustawić tytuł dokumentu na "Moja strona", który będzie widoczny na karcie przeglądarki internetowej, należy użyć zapisu

A. <head>Moja strona</head>
B. <meta name="ttle" content="Moja strona" />
C. <meta ttle="Moja strona">
D. <ttle>Moja strona</ttle>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zastosowanie znacznika <title> jest kluczowe w strukturyzacji dokumentów HTML. W przypadku chęci nadania dokumentowi tytułu 'Moja strona', poprawny zapis to <title>Moja strona</title>. Znacznik <title> powinien być umieszczony w sekcji <head> dokumentu HTML, co jest zgodne z zasadami budowy stron internetowych. Tytuł jest istotnym elementem SEO (Search Engine Optimization), ponieważ przeglądarki internetowe wyświetlają go na zakładkach oraz w wynikach wyszukiwania, co wpływa na pierwsze wrażenie użytkownika oraz możliwość znalezienia strony. Prawidłowe tytuły powinny być zwięzłe, informacyjne i zawierać kluczowe słowa związane z treścią strony. Stosując poprawny znacznik <title>, zapewniasz, że strona będzie lepiej postrzegana zarówno przez użytkowników, jak i roboty indeksujące, co przekłada się na lepszą widoczność w Internecie. Warto również zwrócić uwagę na najlepsze praktyki, takie jak unikanie nadmiernej długości tytułu (zaleca się nie więcej niż 60 znaków) oraz stosowanie unikalnych tytułów dla różnych stron.

Pytanie 4

Jakie ustawienia dotyczące czcionki będą miały zastosowanie w przypadku kodu CSS?

* {
    font-family: Tahoma;
    color: Teal;
}
A. znaczników z klasą przypisaną jako *.
B. znaczników o identyfikatorze równym *.
C. wszystkiego kodu HTML, jako domyślne formatowanie dla wszystkich elementów strony.
D. wszystkiego kodu HTML, niezależnie od kolejnych ustawień CSS.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybór opcji dotyczącej całego kodu HTML jako formatowania domyślnego dla wszystkich elementów strony jest poprawny, ponieważ użycie selektora uniwersalnego * w CSS oznacza, że wszystkie dostępne elementy na stronie będą dziedziczyć określone style. W tym przypadku, zarówno font-family ustawiony na Tahoma, jak i kolor tekstu zmieniony na Teal, będą dotyczyły każdego elementu HTML, bez względu na jego typ. To podejście jest zgodne z zasadami stosowania stylów kaskadowych, gdzie style są aplikowane do elementów w sposób hierarchiczny, a selektor uniwersalny jest najogólniejszym z dostępnych. Przykładem zastosowania może być sytuacja, gdy chcemy ustawić jednolite formatowanie dla całej strony, co upraszcza proces projektowania i zapewnia spójność wizualną. Dobrą praktyką jest jednak używanie selektora uniwersalnego z umiarem, aby uniknąć nadmiernego obciążenia wydajności, szczególnie w większych dokumentach, gdzie precyzyjniejsze selektory mogą przynieść lepsze rezultaty.

Pytanie 5

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

Ilustracja do pytania
A. MediaWiki
B. WordPress
C. Joomla!
D. Drupal

Brak odpowiedzi na to pytanie.

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

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

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

Brak odpowiedzi na to pytanie.

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

Pytanie 7

Aby ustalić wysokość grafiki wyświetlanej na stronie internetowej, należy użyć właściwości CSS o nazwie

A. width
B. height
C. padding
D. margin

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 'height' jest prawidłowa, ponieważ właściwość CSS o tej nazwie bezpośrednio określa wysokość elementu na stronie internetowej. Używając 'height', możemy zdefiniować wartość w pikselach, procentach lub innych jednostkach miary, co pozwala na precyzyjne dostosowanie wyglądu elementów do wymagań projektu. Na przykład, zdefiniowanie wysokości obrazka jako 'height: 200px;' sprawi, że obrazek zawsze będzie miał 200 pikseli wysokości, niezależnie od jego oryginalnych wymiarów. Dobrą praktyką jest również używanie wartości procentowych, które pozwalają na responsywne projektowanie, dostosowujące się do różnych rozmiarów ekranu. Ponadto, warto wspomnieć o zastosowaniu 'min-height' i 'max-height', które umożliwiają kontrolowanie minimalnych i maksymalnych wymiarów elementów, co jest pomocne w tworzeniu elastycznych i estetycznych układów stron. Ponadto, definiując wysokość obrazków, warto pamiętać o zachowaniu proporcji poprzez odpowiednie użycie również właściwości 'width'.

Pytanie 8

Kolor określony kodem RGB, mający wartość rgb(255, 128, 16) w przedstawieniu szesnastkowym, przyjmie jaką wartość?

A. #008010
B. #ff8010
C. #ff8011
D. #ff0fl0

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź #ff8010 jest trafna. Konwersja wartości RGB na szesnastkowy to w sumie przekształcanie kolorów: czerwony, zielony i niebieski. W przypadku rgb(255, 128, 16), czerwony (255) zmienia się w 'ff', zielony (128) w '80', a niebieski (16) w '10'. Gdy to wszystko połączymy, dostajemy kod #ff8010. To wiedza, która naprawdę się przydaje, gdy pracujesz z kolorami w stronach www, aplikacjach graficznych czy przy projektowaniu interfejsów. W branży IT używanie standardu RGB i konwersji do HEX to normalka, bo to pozwala na dokładne określenie kolorów w kodzie. Na przykład, w CSS łatwo będzie używać kolorów w tym formacie, a to pomaga w lepszej czytelności kodu.

Pytanie 9

Jak nazywa się metoda dodawania arkusza stylów do dokumentu HTML zastosowana w poniższym kodzie?

<p style="color: red;">tekst paragrafu</p>
A. Styl alternatywny, zewnętrzny
B. Styl wpisany, lokalny
C. Styl zewnętrzny
D. Styl wewnętrzny

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Styl wpisany, lokalny, to metoda definiowania stylów bezpośrednio w elemencie HTML, co jest dokładnie tym, co widzimy w przedstawionym kodzie. W tym przypadku atrybut "style" jest użyty, aby ustawić kolor tekstu na czerwony dla konkretnego paragrafu. Ta metoda jest przydatna, gdy potrzebujemy szybko wprowadzić zmiany w stylu pojedynczego elementu bez konieczności edytowania zewnętrznych arkuszy stylów. Z perspektywy standardów webowych, lokalne style mogą wprowadzać poważne problemy z utrzymaniem kodu, gdy stosowane w nadmiarze, ponieważ kody CSS mogą stać się trudne do zarządzania, a konsystencja stylów może być zagrożona. Z tego powodu, dla bardziej rozbudowanych projektów, rekomenduje się korzystanie z arkuszy stylów zewnętrznych lub wewnętrznych, które zapewniają lepszą organizację kodu oraz ułatwiają zarządzanie stylami na większą skalę. Dobrą praktyką jest również korzystanie z klas CSS, co pozwala na ponowne wykorzystanie stylów w różnych częściach dokumentu, eliminując duplikacje.

Pytanie 10

W CSS zapisany w ten sposób:

p { background-image: url("rysunek.png"); }

spowoduje, że rysunek.png stanie się

A. tłem każdego akapitu
B. wyświetlony, jeśli w kodzie użyty zostanie znacznik img
C. widoczny obok każdego akapitu
D. tłem całej witryny

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis CSS p { background-image: url("rysunek.png"); } oznacza, że dla każdego elementu akapitowego <p> w dokumencie zostanie ustawione tło w postaci grafiki o nazwie rysunek.png. Ta reguła selektora p dotyczy wyłącznie znaczników akapitu, więc nie wpłynie na inne elementy strony, takie jak body czy img. Tak się to stosuje w praktyce: projektując na przykład bloga, możesz dodać delikatny deseń lub obrazek w tle akapitu, żeby całość wyglądała ciekawiej albo podkreślała styl witryny. Co ciekawe, background-image w CSS pozwala na olbrzymią elastyczność — możesz wykorzystać obrazy, gradienty czy nawet SVG jako tło. Standardy CSS jasno to definiują: background-image działa zawsze na tym elemencie, dla którego zadeklarowano regułę w selektorze. Warto pamiętać, że tło nie przesłoni tekstu w akapicie, tylko się pod nim wyświetli, więc czytelność jest zachowana. Z własnego doświadczenia uważam, że umiejętność stosowania background-image do konkretnych elementów to jedno z podstawowych narzędzi webdevelopera — pozwala przygotować naprawdę estetyczne i przejrzyste layouty. Dobrym nawykiem jest także testowanie widoczności tła na różnych urządzeniach, bo rozdzielczości i skalowanie potrafią zaskoczyć. Dla porządku, jeśli podasz background-image bez żadnych dodatkowych parametrów (jak powtarzanie czy pozycjonowanie), obrazek domyślnie będzie się powtarzał w poziomie i pionie, aż pokryje cały akapit.

Pytanie 11

Wskaż pole edycyjne sformatowane przedstawionym stylem CSS

input {
  border: none;
  border-bottom: 2px solid Blue;
  color: Gray;
  font-weight: 900;
}

Input 1. Podaj imię:

Input 2. Podaj imię:

Input 3. Podaj imię:

Input 4. Podaj imię: Agnieszka

A. Input 4.
B. Input 3.
C. Input 2.
D. Input 1.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Dobrze wybrałeś! Odpowiedź 'Input 2.' jest rzeczywiście poprawna. To, co oferuje ten element, to wszystko, co potrzebne do spełnienia wymagań stylu CSS, czyli ma niebieskie dolne obramowanie o grubości 2px, szary tekst oraz pogrubioną czcionkę. Wygląd elementów formularza jest mega ważny, bo to właśnie od niego zależy, jak użytkownicy będą się poruszać po stronie. Dzięki CSS możemy to wszystko kontrolować, co daje nam spójność i ładny wygląd. Różne właściwości CSS, takie jak 'border-bottom', 'color' czy 'font-weight', pozwalają na dokładne dostosowanie stylu każdego elementu strony. W sumie, jak już się bardziej wkręcisz w CSS, zauważysz, że można dodać też różne efekty, jak hover, focus czy active, co dodatkowo wzbogaca interakcję. Rozumienie, jak te różne właściwości działają, jest kluczowe, żeby tworzyć fajne i funkcjonalne interfejsy.

Pytanie 12

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

Ilustracja do pytania
A. Zbiór 3
B. Zbiór 2
C. Zbiór 4
D. Zbiór 1

Brak odpowiedzi na to pytanie.

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

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

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

Brak odpowiedzi na to pytanie.

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

Pytanie 14

Jaką technologię zaleca się przy budowie witryn WWW, aby użytkownicy bez umiejętności programistycznych mogli samodzielnie wprowadzać zmiany w treści bez kodowania?

A. FTP
B. SEO
C. CMS
D. SSL

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź dotycząca CMS-a, czyli Systemu Zarządzania Treścią, jest okej, bo dzięki niemu ludzie mogą samodzielnie zarządzać treściami na stronach internetowych, nawet jeśli nie znają się na programowaniu. Systemy CMS, jak WordPress, Joomla czy Drupal, mają łatwe w obsłudze interfejsy, co sprawia, że dodawanie, edytowanie i usuwanie treści jest mega proste. To bardzo ważne, bo każdy chce, żeby jego strona była na bieżąco i dobrze widoczna w wyszukiwarkach. Dodatkowo, CMS-y często pozwalają na instalowanie różnych dodatków i szablonów, co daje większe możliwości i sprawia, że strona wygląda lepiej. Z mojego doświadczenia, to podejście bardzo się sprawdza, bo pozwala skupić się na tworzeniu fajnej treści, a nie na technicznych zawirowaniach związanych z zarządzaniem stroną.

Pytanie 15

W poniższym zapisie CSS kolor zielony zostanie zastosowany do

h2
{
    background-color: green;
}
A. tła całej witryny
B. czcionki wszystkich nagłówków na stronie
C. tła tekstu nagłówka drugiego poziomu
D. czcionki nagłówka drugiego poziomu

Brak odpowiedzi na to pytanie.

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

Termin "front-end" w kontekście projektowania stron WWW odnosi się do

A. bazy danych z danymi publikowanymi na stronie
B. interfejsu witryny internetowej powiązanego z technologiami operującymi w przeglądarce internetowej
C. organizacji informacji na serwerze WWW
D. działania skryptów oraz aplikacji realizowanych po stronie serwera WWW

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Front-end to wszystko to, co widzisz w przeglądarce, czyli ogólnie mówiąc, wygląd strony i to, jak się z nią bawisz. Mówię tu o kolorach, czcionkach, układzie czy różnych akcjach, które możesz wykonać. Technologie jak HTML, CSS i JavaScript są tu na czołowej pozycji, bo to dzięki nim strona jest taka interaktywna i przyjemna dla oka. Przykłady? Budowa responsywnych interfejsów, które zmieniają rozmiar na różnych ekranach, albo skrypty, które potrafią zmieniać treści na stronie bez przeładowania jej. Dobrze jest też pomyśleć o tym, żeby strona ładowała się jak najszybciej, bo to wpływa na to, jak użytkownicy będą ją odbierać. A jeśli znasz nowe frameworki, jak React czy Angular, to naprawdę ułatwia stworzenie bardziej złożonych aplikacji webowych, co w dzisiejszych czasach jest mega ważne.

Pytanie 17

Który atrybut pozwala na wskazanie lokalizacji pliku graficznego w znaczniku <img>?

A. alt
B. href
C. link
D. src

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut 'src' w znaczniku <img> jest kluczowy, ponieważ określa lokalizację pliku graficznego, który ma być wyświetlany na stronie. Oznacza to, że wartość tego atrybutu to URL (Uniform Resource Locator), który wskazuje na lokalizację obrazu w internecie lub na lokalnym serwerze. Przykładowo, jeśli chcemy wyświetlić obrazek o nazwie 'zdjecie.jpg' znajdujący się w folderze 'obrazy', użyjemy: <img src='obrazy/zdjecie.jpg' alt='Opis obrazka'>. Zastosowanie odpowiedniego atrybutu 'src' jest zgodne z najlepszymi praktykami HTML, co zapewnia, że przeglądarki internetowe prawidłowo interpretują nasze zamierzenia co do wyświetlania treści wizualnych. Nieprawidłowe określenie lokalizacji obrazu może prowadzić do błędów '404 Not Found', co negatywnie wpływa na doświadczenie użytkownika. Dobrze zaprojektowane strony internetowe powinny również uwzględniać atrybut 'alt', który zapewnia dostępność oraz opisuje zawartość obrazu osobom korzystającym z czytników ekranu, ale to 'src' jest odpowiedzialny za wyświetlanie samego obrazu.

Pytanie 18

Aby strona internetowa skutecznie dopasowywała się do urządzeń mobilnych, należy ustalić rozmiar czcionki

A. w pikselach
B. w procentach
C. tylko znacznikami big i small
D. w milimetrach

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybór w procentach jako jednostki wielkości czcionki jest właściwy, ponieważ umożliwia elastyczne dostosowanie tekstu do różnych ekranów i rozdzielczości. Użycie procentów pozwala na skalowanie w oparciu o domyślną wielkość czcionki ustawioną w przeglądarce, co jest kluczowe dla responsywności witryny. Przykładowo, jeśli domyślna wielkość czcionki wynosi 16px, to ustawienie czcionki na 150% sprawi, że będzie miała 24px, co jest szczególnie przydatne na urządzeniach mobilnych, gdzie przestrzeń jest ograniczona, a czytelność ma kluczowe znaczenie. Dodatkowo, zastosowanie procentów jest zgodne z zasadami projektowania responsywnego, które skupiają się na dostosowywaniu elementów interfejsu użytkownika do różnych urządzeń. Warto również zauważyć, że techniki takie jak media queries w CSS mogą współpracować z procentami, co pozwala na jeszcze lepsze dopasowanie wielkości czcionki do konkretnej szerokości ekranu. Pamiętajmy, że stosowanie elastycznych jednostek, takich jak procenty, jest jedną z najlepszych praktyk w tworzeniu dostępnych i przyjaznych użytkownikowi interfejsów.

Pytanie 19

Taki styl CSS sprawi, że na stronie internetowej

ul{ list-style-image: url('rys.gif'); }
A. punkt listy nienumerowanej będzie rys.gif
B. rys.gif wyświetli się jako tło dla listy nienumerowanej
C. każdy punkt listy zyska osobne tło z grafiki rys.gif
D. rys.gif stanie się ramką dla listy nienumerowanej

Brak odpowiedzi na to pytanie.

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

Pytanie 20

W znaczniku (w sekcji ) strony internetowej nie zamieszcza się informacji odnoszących się do

A. kodowania
B. automatycznego przeładowania
C. autora
D. rodzaju dokumentu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź "typu dokumentu" jest trafna, bo znacznik <meta> w HTML jest używany do ustawiania metadanych, które nie mówią nam bezpośrednio o typie dokumentu. W praktyce, to co znajdziemy w <meta>, dotyczy głównie takich rzeczy jak automatyczne odświeżanie strony (przez tag http-equiv="refresh"), kodowanie (gdzie definiujemy zestaw znaków, np. UTF-8) czy informacje o autorze strony (poprzez tag name="author"). Typ dokumentu jest ustalany w deklaracji DOCTYPE na początku dokumentu HTML, a nie w <meta>. Znaczniki <meta> mogą też pomóc w SEO i lepszym indeksowaniu przez wyszukiwarki. Na przykład, używając tagu <meta name="description" content="Opis strony">, możemy pomóc wyszukiwarkom lepiej zrozumieć, o czym jest nasza strona, co może zachęcić do kliknięcia w link w wynikach wyszukiwania.

Pytanie 21

Wskaż kod CSS odpowiadający układowi bloków 2 - 5, zakładając, że są one zbudowane w oparciu o przedstawiony kod HTML.

BLOK 1
BLOK 2BLOK 3BLOK 4
BLOK 5
<div id="pierwszy">BLOK 1</div>
<div id="drugi">BLOK 2</div>
<div id="trzeci">BLOK 3</div>
<div id="czwarty">BLOK 4</div>
<div id="piaty">BLOK 5</div>

Kod 1.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  float: left;
  width: 30%;
}
#czwarty {
  float: right;
  width: 30%;
}
#piaty {
  clear: both;
  width: 30%;
}
Kod 2.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  float: left;
  width: 30%;
}
#czwarty {
  float: right;
  width: 30%;
}
#piaty {
  float: left;
  width: 30%;
}
Kod 3.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  float: left;
  width: 30%;
}
#czwarty {
  width: 30%;
}
#piaty {
  float: right;
  width: 30%;
}
Kod 4.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  width: 30%;
}
#czwarty {
  width: 30%;
}
#piaty {
  float: right;
  width: 30%;
}
A. Kod 3.
B. Kod 2.
C. Kod 4.
D. Kod 1.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Brawo, twoja odpowiedź jest poprawna. Wybrałeś Kod 2, co jest zgodne z układem bloków na diagramie. Przy analizie kodu CSS, musimy zwrócić uwagę na różne aspekty, takie jak pozycja, szerokość i kolejność bloków. W tym przypadku, blok o id 'drugi' jest umieszczony po lewej stronie i zajmuje 40% szerokości, co jest zgodne z diagramem. Bloki 'trzeci' i 'czwarty' są odpowiednio po lewej i prawej stronie z szerokością 30%, a blok 'piąty' jest umieszczony na dole i zajmuje 30% szerokości. To wszystko odpowiada układowi bloków na diagramie. Kiedy tworzysz strony internetowe, ważne jest, aby zrozumieć i umieć manipulować kodem CSS, aby uzyskać pożądany układ strony. Pamiętaj, że praktyka i doświadczenie są kluczowe do zrozumienia jak kod CSS wpływa na układ i stylizację elementów strony.

Pytanie 22

Walidacja formularzowych pól polega na zweryfikowaniu

A. który użytkownik wprowadził informacje.
B. czy użytkownik jest zalogowany.
C. czy wprowadzone dane spełniają określone reguły.
D. czy istnieje plik PHP, który odbierze dane.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Walidacja pól formularza to mega ważny krok, kiedy zbieramy dane od użytkowników. Dzięki niej możemy mieć pewność, że wszystko, co użytkownik wprowadza, jest zgodne z pewnymi zasadami. To sprawia, że aplikacja działa jak należy i że dane są w miarę bezpieczne. Na przykład, walidacja może sprawdzać, czy użytkownik wpisał coś w pole tekstowe, czy adres e-mail wygląda jak należy, albo czy hasło ma odpowiednią długość i trudność. Fajnie jest, jak walidacja działa zarówno po stronie klienta, jak i serwera. Ta po stronie klienta jest super, bo użytkownik od razu widzi, że coś poszło nie tak i nie musi czekać na odpowiedź z serwera. A walidacja po stronie serwera dodaje jeszcze więcej bezpieczeństwa, bo broni aplikacji przed błędnymi danymi i różnymi atakami, jak na przykład SQL injection. Dlatego walidacja danych to absolutna podstawa w nowoczesnych systemach przetwarzania informacji.

Pytanie 23

Jakie polecenie w CSS umożliwia dodanie zewnętrznego arkusza stylów?

A. import
B. require
C. include
D. open

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Polecenie 'import' w CSS służy do załączenia zewnętrznego arkusza stylów, co jest kluczowe dla organizacji i modularności kodu CSS. Użycie '@import' pozwala na ładowanie stylów z innych plików CSS na początku arkusza stylów, co ułatwia zarządzanie dużymi projektami. Na przykład, jeśli mamy plik 'style.css' i chcemy zaimportować 'reset.css', możemy użyć następującej składni: '@import 'reset.css';'. Dzięki temu możemy utrzymać rozdzielenie różnych stylów, co sprzyja lepszej organizacji kodu oraz jego ponownemu użyciu w przyszłości. Warto również zaznaczyć, że standardy CSS sugerują, aby używać '@import' z rozwagą, gdyż każde zaimportowanie pliku powoduje dodatkowe żądanie HTTP, co może wpłynąć na czas ładowania strony. Z tego powodu, dla większych projektów, często lepiej jest łączyć wszystkie style w jeden plik podczas produkcji, co można osiągnąć za pomocą narzędzi do kompresji CSS. Użycie '@import' jest zatem zgodne z dobrymi praktykami, szczególnie w fazie rozwoju, gdzie modularność i łatwość w zarządzaniu kodem są priorytetowe.

Pytanie 24

Który z poniższych znaczników HTML można wykorzystać do stworzenia struktury witryny internetowej?

A. <input>
B. <em>
C. <mark>
D. <aside>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
<aside> to znacznik, który dodaje coś ekstra do treści głównej na stronie, jak np. informacje poboczne. Używanie go jest zgodne z zasadami HTML5, które promują sensowne budowanie dokumentów. Możesz go używać np. do wyróżniania sekcji z informacjami o autorze lub linkami do innych artykułów. Dzięki temu, że stosujesz semantyczne znaczniki jak <aside>, twoje treści stają się lepiej zrozumiałe dla użytkowników. Co więcej, to też polepsza dostępność strony dla osób korzystających z technologii wspomagających, jak czytniki ekranu. Dobrze zastosowane <aside> ułatwia organizację treści, co pozytywnie wpływa na SEO, bo wyszukiwarki łatwiej rozumieją strukturę strony. A i tak w ogóle, używanie semantycznych znaczników pozwala utrzymać kod w lepszej formie, co ważne, zwłaszcza przy pracy w zespołach nad większymi projektami.

Pytanie 25

body{
background-image: url"rysunek.gif");
background-repeat: repeat-y;
}
W przedstawionej definicji stylu CSS, powtarzanie dotyczy

A. rysunku osadzonego znacznikiem img
B. rysunku znajdującego się w tle strony w pionie
C. tła każdego znacznika akapitu
D. rysunku umieszczonego w tle strony w poziomie

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W definicji stylu CSS, zastosowane tło z rysunkiem 'rysunek.gif' jest powtarzane w pionie dzięki właściwości 'background-repeat: repeat-y'. Oznacza to, że obrazek będzie powielany wzdłuż osi Y, co skutkuje tym, że obrazek jest umieszczany jeden nad drugim, tworząc wrażenie ciągłości. Aby lepiej zrozumieć działanie tej właściwości, warto przyjrzeć się innym ustawieniom tła. Na przykład, właściwość 'background-repeat: repeat' powtarza obraz zarówno w poziomie, jak i w pionie, natomiast 'background-repeat: no-repeat' zapobiega jakimkolwiek powtórzeniom. W standardach CSS, takich jak CSS3, definiowanie tła w ten sposób jest zgodne z zasadami, które pozwalają na elastyczne projektowanie stron internetowych. W praktyce, użycie powtarzającego się tła może być przydatne w przypadku prostych wzorów, które mają stworzyć efekt wizualny, nie obciążając jednocześnie zbytnio zasobów, co jest istotne dla wydajności ładowania strony.

Pytanie 26

Kod umieszczony w ramce tworzy tabelę, która zawiera

Ilustracja do pytania
A. dwa wiersze i dwa słupki
B. jeden wiersz i jeden słupek
C. jeden wiersz i dwa słupki
D. dwa wiersze i jeden słupek

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Podany kod HTML tworzy tabelę z jednym wierszem i dwoma kolumnami ponieważ w strukturze tabeli element <tr> definiuje wiersz a element <td> definiuje komórkę w tym wierszu. W tym przypadku kod zawiera jeden element <tr> co wskazuje na pojedynczy wiersz oraz dwa elementy <td> co oznacza że w tym wierszu znajdują się dwie kolumny. Tego typu struktura jest powszechnie wykorzystywana do przedstawiania danych w formie tabelarycznej co jest standardową praktyką w web developmencie. Tabele HTML są kluczowym elementem w projektowaniu stron internetowych gdyż pozwalają na uporządkowane prezentowanie informacji często używane do tworzenia harmonogramów porównań czy formularzy. Ważne jest aby pamiętać o poprawnym zamykaniu znaczników oraz przestrzeganiu hierarchii struktury tabeli co zapewnia jej poprawne wyświetlanie w przeglądarkach. Dobrą praktyką jest również stosowanie zewnętrznych arkuszy CSS do stylizacji tabel co pozwala na oddzielenie struktury od prezentacji i ułatwia zarządzanie wyglądem strony. Znajomość i umiejętność tworzenia tabel jest niezbędna dla każdego web dewelopera ponieważ tabele stanowią fundamentalny element organizacji danych w HTML.

Pytanie 27

Deklaracja typu dokumentu HTML: wskazuje, że kod został stworzony w wersji

A. 5
B. 4
C. 7
D. 6

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Deklaracja typu dokumentu HTML, znana jako <!DOCTYPE HTML>, jest kluczowym elementem każdej strony internetowej, który informuje przeglądarkę, w jakiej wersji HTML została napisana strona. W przypadku <!DOCTYPE HTML> mówimy o wersji HTML5, która jest najnowszym standardem języka znaczników. HTML5 wprowadza wiele usprawnień i nowych funkcji w porównaniu do wcześniejszych wersji, takich jak semantyczne znaczniki, wsparcie dla multimediów (audio i wideo) oraz API do złożonych aplikacji internetowych. Przykładem zastosowania HTML5 mogą być formularze z nowymi typami inputów, które ułatwiają interakcję z użytkownikiem, takie jak 'date', 'email' czy 'url'. Również HTML5 wprowadza nowy model renderowania, który jest bardziej efektywny i dostosowany do nowoczesnych urządzeń mobilnych. Standardy HTML są ustalane przez W3C (World Wide Web Consortium), które regularnie aktualizuje specyfikacje, aby nadążać za rozwijającymi się technologiami internetowymi. W skrócie, poprawna deklaracja <!DOCTYPE HTML> jest niezbędna dla właściwego wyświetlania i działania strony w różnych przeglądarkach.

Pytanie 28

Język HTML posiada nagłówki, które służą do tworzenia hierarchii treści. Nagłówki te występują tylko w zakresie

A. h1 – h4
B. h1 – h10
C. h1 – h8
D. h1 – h6

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź h1 – h6 jest poprawna, ponieważ język HTML udostępnia sześć poziomów nagłówków, od h1 do h6, które służą do tworzenia hierarchii treści na stronie internetowej. Nagłówek h1 jest najważniejszy i powinien być używany do oznaczenia głównego tytułu strony, podczas gdy h2, h3, h4, h5 i h6 wskazują na kolejne poziomy nagłówków, które pomagają w organizacji treści. Przykładowo, nagłówek h2 może być używany do sekcji, natomiast h3 może oznaczać podsekcje w ramach danej sekcji. Używanie nagłówków w ten sposób nie tylko poprawia czytelność i zrozumienie treści przez użytkowników, ale także pozytywnie wpływa na SEO (optymalizację dla wyszukiwarek). Warto pamiętać, że zgodnie z najlepszymi praktykami, powinno się unikać pomijania poziomów nagłówków, co zapewnia logiczną strukturę treści i ułatwia indeksację przez roboty wyszukiwarek.

Pytanie 29

W firmie zajmującej się technologiami informacyjnymi otwarta jest rekrutacja na stanowisko administratora e-sklepu. Do jego zadań należy instalacja i konfiguracja systemu zarządzania treścią, który jest przeznaczony jedynie dla sklepu internetowego, zmiana szablonów wizualnych oraz dostosowanie grafiki. Jakie umiejętności powinien posiadać nowy pracownik?

A. HTML, CSS, Photoshop
B. CMS PrestaShop, CSS, Gimp
C. CMS WordPress, HTML, Gimp
D. Photoshop, Gimp, JavaScript

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybór odpowiedzi CMS PrestaShop, CSS, Gimp jest prawidłowy, ponieważ dokładnie odpowiada wymaganiom związanym z rolą administratora sklepu internetowego. PrestaShop to jeden z najpopularniejszych systemów zarządzania treścią (CMS) dedykowanych dla e-commerce. Jego znajomość jest kluczowa, gdyż pozwala na efektywną instalację i konfigurację platformy sklepowej, co jest jednym z głównych obowiązków administratora. CSS jest niezbędnym narzędziem do zmiany szablonów i dostosowania wyglądu sklepu zgodnie z wymaganiami klienta oraz standardami responsywnego designu, co zapewnia lepsze doświadczenia użytkowników na różnych urządzeniach. Gimp jako narzędzie graficzne umożliwia modyfikację grafik i tworzenie nowych elementów wizualnych, co jest istotne dla personalizacji sklepu. Dobrą praktyką w branży jest umiejętność integrowania graficznych oraz technologicznych komponentów w celu stworzenia atrakcyjnej i funkcjonalnej platformy handlowej, co znacząco wpływa na konwersje i wyniki sprzedaży. Ponadto, znajomość PrestaShop otwiera drzwi do wielu zasobów i społeczności, co dodatkowo wspiera rozwój zawodowy administratora.

Pytanie 30

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

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

Brak odpowiedzi na to pytanie.

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

Pytanie 31

W HTML-u utworzono formularz. Jaki efekt działania poniższego kodu zostanie pokazany przez przeglądarkę, jeśli w drugie pole użytkownik wprowadził tekst "ala ma kota"?

<form>
    <select>
        <option value="v1">Kraków</option>
        <option value="v2">Poznań</option>
        <option value="v3">Szczecin</option>
    </select><br>
    <input type="password" />
</form>
Ilustracja do pytania
A. B
B. A
C. C
D. D

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź B jest prawidłowa, ponieważ pokazuje typowy sposób renderowania formularza HTML z elementem wyboru i polem hasła w przeglądarce. W kodzie HTML widzimy element select z trzema opcjami wyboru. Po zaznaczeniu jednej z opcji, jak Kraków, tworzy się rozwijane menu, które jest widoczne na obrazie jako pole z wybraną wartością. Drugim elementem formularza jest pole input typu password. Ten typ pola zamienia wpisany tekst na znaki maskujące, takie jak kropki lub gwiazdki, co widzimy na obrazie w odpowiedzi B. To jest standardowe zachowanie przeglądarek w przypadku pól hasła, mające na celu ochronę prywatności. W kodzie HTML nie ma elementów typu checkbox ani radio, co eliminowałoby inne prezentacje danych, takie jak checkboxy czy przyciski radiowe. Dobrą praktyką jest używanie pól hasła w formularzach tam, gdzie wymagane jest wprowadzenie danych, które powinny być chronione. Odpowiednie użycie elementów HTML zwiększa użyteczność i bezpieczeństwo aplikacji internetowej i jest zgodne z konwencjami projektowania UI.

Pytanie 32

Aby stworzyć szablon strony z trzema ustawionymi obok siebie kolumnami, można użyć stylu CSS.

A. .kolumny { float: left; width: 40%; }
B. .kolumny { clear: both; height: 33%; }
C. .kolumny { float: right; height: 33%; }
D. .kolumny { float: left; width: 33%; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest prawidłowa. W CSS do tworzenia szablonu strony z trzema kolumnami ustawionymi obok siebie stosuje się właściwość 'float: left;', a dodatkowo ustawia się szerokość każdej kolumny na 'width: 33%;'. Ta technika pozwala na równomierne rozmieszczenie trzech kolumn w poziomie na stronie. Właściwość 'float' służy do opływania elementów strony, a właściwość 'width' umożliwia kontrolę nad szerokością elementów. To są standardy w branży w projektowaniu stron internetowych. W stylach CSS zawsze powinniśmy starać się zapewnić jak najbardziej płynne i spójne doświadczenia dla użytkowników, a ten sposób tworzenia szablonów trzech kolumn jest jednym z niezbędnych narzędzi w naszym arsenale. Pamiętaj, że zrozumienie i umiejętne stosowanie CSS jest kluczowe dla tworzenia estetycznych i funkcjonalnych stron internetowych.

Pytanie 33

W języku HTML, atrybut shape w znaczniku area, który definiuje typ obszaru, może mieć wartość

A. rect, poły, circle
B. style="margin-bottom: 0cm;">poły, square, circle
C. style="margin-bottom: 0cm;">rect, triangle, circle
D. rect, sąuare, circle

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut shape znacznika area w języku HTML jest kluczowy dla określenia kształtu interaktywnego obszaru na mapie obrazów. Przyjmuje on wartości, które definiują geometrię obszaru w kontekście mapy, a do najpopularniejszych z nich należą 'rect', 'circle' oraz 'poly'. Wartość 'rect' definiuje prostokątny obszar, gdzie użytkownik może kliknąć w dowolnym miejscu w obrębie prostokąta. 'Circle' z kolei pozwala na stworzenie okrągłego obszaru kliknięcia, definiując jego środek oraz promień. Z kolei 'poly' umożliwia zdefiniowanie wielokątnego obszaru poprzez podanie współrzędnych wierzchołków. Te wartości są zgodne z definicjami przedstawionymi w standardach W3C, które określają sposób, w jaki przeglądarki interpretują te atrybuty. Przykładowo, dla atrybutu shape='rect' można podać współrzędne lewego górnego i prawego dolnego narożnika prostokąta, co sprawia, że jest to użyteczne w implementacji interaktywnych map. Zrozumienie tych wartości jest istotne dla programistów webowych, którzy chcą tworzyć dostępne i interaktywne treści.

Pytanie 34

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

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

Brak odpowiedzi na to pytanie.

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

Która lista jest interpretacją przedstawionego kodu?

<ol>
    <li>muzyka
        <ul>
            <li>Wpis1</li>
            <li>Wpis2</li>
        </ul>
    </li>
    <li>filmy
        <ul>
            <li>Wpis3</li>
            <li>Wpis4</li>
        </ul>
    </li>
</ol>
A. Lista uporządkowana z podpunktami zapisanymi w formie numeracji dziesiętnej (np. 1.1, 1.2).
B. Lista uporządkowana z sześcioma następującymi elementami.
C. Lista uporządkowana z dwoma składnikami, z których każdy ma wewnętrzną listę nieuporządkowaną.
D. Lista nieuporządkowana zawierająca wszystkie składniki, jeden za drugim.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Przedstawiony kod HTML jest przykładem zagnieżdżonych list uporządkowanych i nieuporządkowanych. Na poziomie głównym użyto listy uporządkowanej oznaczonej tagiem <ol> która tworzy listę numerowaną. Listy zagnieżdżone opisane są za pomocą tagu <ul> co oznacza listy nieuporządkowane punktowane. Wewnętrzna struktura kodu pokazuje jak zagnieżdżać listy aby tworzyć hierarchiczne struktury które są często stosowane na stronach internetowych do organizowania treści. Taka organizacja danych jest szczególnie przydatna w przypadku tworzenia menu rozwijanych lub katalogów. Aby zrozumieć prawidłowość tej struktury należy zapoznać się z zasadą zagnieżdżania elementów w HTML gdzie jeden element może zawierać inne w celu tworzenia bardziej złożonych układów. Popularnymi zastosowaniami są również generowanie drzew katalogów oraz nawigacji w witrynach. Standardy HTML sugerują takie podejście do strukturyzacji danych aby były one semantycznie poprawne a zarazem łatwe do odczytania przez przeglądarki internetowe co zwiększa ich dostępność i użyteczność. Praktyka ta jest zgodna z dobrymi praktykami projektowania webowego gdzie zrozumiałość kodu oraz jego struktura są kluczowe dla dalszego rozwoju czy utrzymania aplikacji.

Pytanie 36

W HTML umieszczono formularz. Jakie skutki działania tego kodu zostaną pokazane przez przeglądarkę, jeśli użytkownik w drugim polu wprowadzi wartość "ala ma kota"?

Ilustracja do pytania
A. Efekt 3
B. Efekt 4
C. Efekt 2
D. Efekt 1

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Efekt 2 jest prawidłowy, ponieważ kod HTML używa elementu select do stworzenia listy rozwijanej z trzema opcjami: Kraków, Poznań i Szczecin. Użytkownik może wybrać jedną z tych opcji, co jest standardowym zastosowaniem elementu select w formularzach HTML. Drugim elementem jest pole input typu password które maskuje wpisywany tekst. W formularzach HTML pole typu password jest używane do ukrywania wprowadzanego tekstu co jest szczególnie ważne przy wprowadzaniu danych wrażliwych takich jak hasła. Gdy użytkownik wpisuje hasło widoczne są tylko znaki maskujące często kropki lub gwiazdki co zapewnia prywatność danych. Stosowanie takich elementów jest zgodne z dobrymi praktykami projektowania interfejsów użytkownika w sieci co zwiększa bezpieczeństwo i wygodę użytkowania formularzy. Właściwe korzystanie z elementów HTML jak select i input type=password jest kluczowe w tworzeniu efektywnych i bezpiecznych stron internetowych co jest szczególnie istotne w kontekście e-commerce i aplikacji bankowych.

Pytanie 37

Jaką wartość w formacie RGB będzie miała barwa oznaczona kodem heksadecymalnym: #1510FE?

A. rgb(21, 16, FE)
B. rgb(21, 16, 255)
C. rgb(15, 10, FE)
D. rgb(21, 16, 254)

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź rgb(21, 16, 254) jest dobra, bo te wartości RGB pochodzą z kodu heksadecymalnego #1510FE. W tym kodzie każda para cyfr pokazuje, jak mocno świeci dany kolor: od 00, co oznacza brak koloru, do FF, gdzie mamy pełną intensywność. W naszym przypadku, pierwsza para '15' to kolor czerwony, '10' to zielony, a 'FE' to niebieski. Jak to przeliczymy na dziesiętny, to '15' daje nam 21, '10' daje 16, a 'FE' to 254. I stąd mamy rgb(21, 16, 254). Te wartości są super przydatne, na przykład przy tworzeniu stylów CSS, gdzie kolory są podstawą. Warto ogarnąć, jak przerabiać kolory z jednego formatu na drugi – to naprawdę pomaga w projektowaniu grafiki i stron www.

Pytanie 38

Na przedstawionej grafice znajduje się struktura sekcji dla witryny internetowej. Przyjmując, że blok5 nie ma przypisanej szerokości, a bloki są określone w dokumencie HTML w kolejności ich numeracji, jak powinno wyglądać zdefiniowanie opływania?

Ilustracja do pytania
A. bloki 1, 2, 4 float: left; blok 3, 5 float: right;
B. bloki 1, 2, 3, 4 float: right; blok 5 clear: right;
C. blok 1 float: left; bloki 2, 4 float: center; blok 3 float: right; blok 5 clear: both;
D. bloki 1, 2, 4 float: left; blok 3 float: right; blok 5 clear: both;

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 3 jest poprawna, ponieważ odpowiada układowi bloków na stronie i ich pozycjonowaniu. Użycie właściwości CSS float: left; dla bloków 1, 2 i 4 pozwala im ułożyć się w linii po lewej stronie. Blok 3 z float: right; zostanie umieszczony po prawej stronie, co jest zgodne z przedstawionym układem. Blok 5 natomiast, znajdujący się na dole i rozciągający się na całą szerokość, wymaga użycia clear: both;, aby nie opływały go inne bloki i mógł zająć całą dostępną przestrzeń poziomą. Takie zastosowanie float i clear jest zgodne z najlepszymi praktykami w projektowaniu układów stron internetowych. Stylowanie za pomocą float jest powszechnie używane w CSS do tworzenia dynamicznych układów, a właściwość clear zapewnia, że element nie będzie opływany przez poprzedzające elementy pływające, co jest szczególnie istotne dla elementów podsumowujących lub końcowych na stronie.

Pytanie 39

Jakie jest poprawne zapisanie tagu HTML?

<a href="#hobby">przejdź</a>
A. jest błędny, w atrybucie href powinien być podany adres URL
B. jest błędny, użyto niewłaściwego znaku # w atrybucie href
C. jest poprawny, po kliknięciu w odnośnik strona zostanie przewinięta do elementu o nazwie "hobby"
D. jest prawidłowy, po kliknięciu w odnośnik otworzy się strona pod adresem "hobby"

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W znaczniku HTML a z atrybutem href='#hobby' zastosowano tzw. kotwicę fragmentu strony. Jest to popularna technika używana do bezpośredniego przenoszenia użytkownika do określonej części strony internetowej. Znak hash (#) wskazuje, że link odwołuje się do elementu o identyfikatorze hobby w obrębie tej samej strony. Tego rodzaju odnośniki są szeroko stosowane w długich dokumentach gdzie szybka nawigacja między sekcjami poprawia doświadczenie użytkownika. Aby kod działał poprawnie na stronie musi istnieć element z atrybutem id='hobby'. To działanie jest zgodne ze standardami HTML i jest zalecane w projektowaniu dostępnych i przyjaznych dla użytkownika aplikacji internetowych. Warto także pamiętać o stosowaniu opisowych identyfikatorów co ułatwia czytelność kodu i jego późniejsze utrzymanie. Praktyka ta jest zgodna z najlepszymi praktykami w zakresie użyteczności i dostępności stron internetowych co może również wpłynąć pozytywnie na SEO poprzez poprawę struktury strony.

Pytanie 40

W celu stylizacji strony internetowej stworzono odpowiednie reguły. Reguły te będą stosowane tylko do wybranych znaczników (np. niektóre nagłówki, kilka akapitów). W tej sytuacji, aby zastosować styl do kilku wybranych znaczników, najlepiej będzie użyć

{ text-align: right; }
A. pseudoklasy.
B. klasy.
C. selektora akapitu.
D. identyfikatora.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybór klasy jako metody przypisania stylu do konkretnych znaczników HTML jest uzasadniony, gdyż klasy pozwalają na wielokrotne zastosowanie tego samego stylu w różnych miejscach dokumentu. Klasy definiuje się w arkuszu stylów CSS i przypisuje się je do elementów HTML za pomocą atrybutu "class". Dzięki temu, na przykład, możemy zastosować ten sam zestaw stylów do kilku nagłówków, akapitów czy innych elementów, co znacznie ułatwia zarządzanie stylizacją strony. Stosując klasy, nie musimy powielać kodu, co jest zgodne z zasadą DRY (Don't Repeat Yourself), prowadzącą do bardziej zorganizowanego i łatwiejszego w utrzymaniu kodu. Przykład użycia: jeśli stworzymy klasę "highlight" w CSS, możemy zastosować ją do kilku elementów, np. <h1 class="highlight">Nagłówek 1</h1> oraz <p class="highlight">Akapit wyróżniony.</p>. Dzięki temu, zmieniając styl w jednym miejscu, mamy wpływ na wszystkie elementy, co znacznie zwiększa efektywność i konsekwencję wizualną naszej strony. Dobrą praktyką jest także nadawanie klas nazw, które odzwierciedlają ich funkcję lub wygląd, co ułatwia późniejsze zarządzanie kodem.