Przejdź do głównej treści
  1. Strona główna
  2. Wyniki egzaminu

Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie

  • Zawód: Technik informatyk
  • Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
  • Rozpoczęcie: 20 września 2026 10:56
  • Zakończenie: 20 września 2026 11:10 

Egzamin zdany!

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

Wymagane minimum: 20 punktów (50%)

Pewność odpowiedzi

Jako strzał oznaczono 3 odpowiedzi - trafionych: 1.

Z odpowiedzi deklarowanych jako pewne poprawnych było 33 z 37. Trafiony strzał to nie jest wiedza - te pytania warto powtórzyć w pierwszej kolejności.

Twój wynik na tle innych

Twój wynik jest lepszy niż 83% podejść do kwalifikacji INF.03.

Porównanie z 42299 zakończonymi podejściami do tej kwalifikacji (dane zbiorcze, bez wyników indywidualnych).

Zachowaj ten wynik na koncie

Załóż darmowe konto albo zaloguj się - ten egzamin przypiszemy do Twojego konta, więc wrócisz do swoich błędów, będziesz śledzić postęp i dostaniesz powtórki dobrane do Twoich odpowiedzi.

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

Analiza przebiegu egzaminu

Odtwarzaj przebieg egzaminu krok po kroku i ucz się na własnych błędach - kolejność rozwiązywania, czas nad każdym pytaniem, momenty zmiany odpowiedzi.

  • Suwak czasu - przeglądaj pytania w kolejności rozwiązywania.
  • Tryb nauki - poprawne odpowiedzi i wyjaśnienia.
  • Analiza czasu - ile czasu nad każdym pytaniem.
  • Monitoring focusu - momenty opuszczenia zakładki.

Pochwal się swoim wynikiem!

Szczegółowe wyniki

Pytanie 1

Który znacznik HTML jest elementem BLOKOWYM?

A.
<img>
B.
<strong>
C.
<p>
Poprawna odpowiedź
D.
<span>
Twoja odpowiedź
Niepoprawna odpowiedź. Pozostałe znaczniki są LINIOWE (inline). <span> oznacza fragment tekstu, <strong> pogrubia, a <img> wstawia obraz w linii - nie wymuszają nowej linii. Elementem blokowym jest <p>.

Pytanie 2

Przedstawiono kod tabeli 3×2. Jaką modyfikację należy wprowadzić w drugim wierszu, aby tabela wyglądała jak na obrazie z niewidocznym wierszem?

<table>
  <tr>
    <td style="border: solid 1px;">Komórka 1</td>
    <td style="border: solid 1px;">Komórka 2</td>
  </tr>
  <tr>
    <td style="border: solid 1px;">Komórka 3</td>
    <td style="border: solid 1px;">Komórka 4</td>
  </tr>
  <tr>
    <td style="border: solid 1px;">Komórka 5</td>
    <td style="border: solid 1px;">Komórka 6</td>
  </tr>
</table>
Komórka 1Komórka 2
Komórka 3Komórka 4
Komórka 5Komórka 6
A. <tr style="clear: none">
B. <tr style="visibility: hidden">Twoja odpowiedź
C. <tr style="display: table-cell">
D. <tr style="display: none">
Poprawna odpowiedź. Właściwość CSS 'visibility: hidden' jest używana do ukrycia elementu, ale jednocześnie zachowuje ona jego miejsce w układzie strony. Jest to idealne dla sytuacji, kiedy chcemy ukryć konkretny element, ale nie chcemy wpływać na układ pozostałych elementów. W kontekście naszego pytania, jeśli chcielibyśmy ukryć drugi wiersz tabeli, ale nie chcemy, aby pozostałe wiersze zmieniały swoje położenie, 'visibility: hidden' jest idealnym rozwiązaniem. W przeciwnym razie, gdybyśmy użyli 'display: none', wiersz zostałby całkowicie usunięty z układu strony, a pozostałe wiersze przesunęłyby się do góry, aby zapełnić puste miejsce. W praktyce, właściwość 'visibility: hidden' jest często używana w połączeniu z JavaScript do tworzenia efektów 'hide/show', gdzie ukryte elementy mogą być później odkrywane bez wpływu na układ strony.

Pytanie 3

Co oznacza deklaracja CSS margin: auto;?

A. marginesy obliczane tak, by element był wyśrodkowany w poziomieTwoja odpowiedź
B. marginesy równe domyślnym wartościom elementu
C. marginesy stałe dla danej przeglądarki
D. marginesy dziedziczone po elemencie nadrzędnym
Poprawna odpowiedź. Deklaracja margin: auto; każe przeglądarce obliczyć marginesy boczne tak, by element (o określonej szerokości) był WYŚRODKOWANY w poziomie - nadmiar miejsca rozkłada się równo na lewo i prawo. Dlatego oznacza wyśrodkowanie w poziomie.

Pytanie 4

Który zestaw pojęć opisuje interfejs użytkownika strony internetowej?

A. przyciski, menu, interakcja użytkownika z aplikacjąTwoja odpowiedź
B. obróbka danych, system zarządzania treścią, projektowanie informacji
C. szkic strony, diagram witryny, diagram przepływu informacji
D. wysyłanie zapytań do bazy, skrypty PHP
Poprawna odpowiedź. Interfejs użytkownika (UI - User Interface) to wszystko, przez co użytkownik komunikuje się ze stroną lub aplikacją: przyciski, menu, formularze, ikony, pola tekstowe oraz reakcje na jego działania (interakcja). Jego zadaniem jest sprawić, by obsługa była czytelna i wygodna. To warstwa widoczna w przeglądarce (front-end), w odróżnieniu od logiki serwerowej i baz danych. Dlatego interfejs użytkownika opisują przyciski, menu i interakcja z aplikacją.

Pytanie 5

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. C
B. Rys. A
C. Rys. B
D. Rys. DTwoja odpowiedź
Poprawna odpowiedź. 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 6

Wskaż, który zapis należy zastosować w celu wyświetlenia grafiki obrazek.png na stronie WWW w pliku plik.html.  

Ilustracja do pytania
A. <img src="/../katalog_1/katalog_B/obrazek.png">
B. <img src="../../katalog_2/katalog_B/obrazek.png">Twoja odpowiedź
C. <img src="obrazek.png">
D. <img src="/../katalog_2/katalog_B/obrazek.png">
Poprawna odpowiedź. Poprawny zapis <img src="../../katalog_2/katalog_B/obrazek.png"> wynika bezpośrednio z położenia pliku HTML i grafiki w strukturze katalogów. plik.html znajduje się w katalogu_1/katalog_A, a obrazek.png w katalogu_2/katalog_B. Żeby przeglądarka mogła odnaleźć plik graficzny, ścieżka względna musi krok po kroku „przejść” po tej strukturze. Najpierw ../../ cofa nas dwa poziomy w górę: z katalog_A do katalog_1, a potem z katalog_1 do katalogu głównego, w którym znajdują się katalog_1 i katalog_2. Następnie wchodzimy do katalog_2, potem do katalog_B i dopiero tam leży obrazek.png. To dokładnie odzwierciedla poprawną, relatywną drogę od pliku HTML do zasobu graficznego.
Z mojego doświadczenia w projektach webowych używanie poprawnych ścieżek względnych jest kluczowe, szczególnie gdy serwis ma rozbudowaną strukturę folderów albo jest później przenoszony między środowiskami (np. localhost, serwer testowy, produkcja). Dzięki ścieżkom względnym, takim jak ../../katalog_2/katalog_B/obrazek.png, kod HTML jest bardziej przenośny i nie trzeba modyfikować adresów po każdej zmianie domeny czy katalogu głównego. Warto też pamiętać, że atrybut src w znaczniku <img> zawsze wskazuje na zasób, który przeglądarka ma pobrać – może to być ścieżka względna, bezwzględna w obrębie serwera lub pełny URL z protokołem. W praktyce przy większych projektach dobrze jest utrzymywać spójną konwencję nazewnictwa katalogów (np. img, assets, static) i stosować logiczną strukturę, żeby takie ścieżki były łatwe do ogarnięcia. Moim zdaniem warto też na wczesnym etapie przyzwyczaić się do „ręcznego” analizowania, skąd jest liczona ścieżka – zawsze od lokalizacji aktualnego dokumentu HTML, chyba że używamy ścieżek absolutnych od katalogu głównego serwera.

Pytanie 7

W jakiej technologii nie zachodzi możliwość przetwarzania danych wprowadzanych przez użytkowników na stronach internetowych?

A. JavaScript
B. AJAX
C. CSSTwoja odpowiedź
D. PHP
Poprawna odpowiedź. CSS (Cascading Style Sheets) to język stylów, który służy do opisywania wyglądu i formatu dokumentów HTML. Jego głównym celem jest kontrolowanie układu, kolorów, czcionek oraz innych aspektów wizualnych strony internetowej. CSS nie ma możliwości przetwarzania danych wprowadzanych przez użytkowników, gdyż nie posiada funkcji logiki programistycznej ani operacji na danych. Przykładowo, CSS może zmieniać kolor tła lub rozmiar tekstu, ale nie może zbierać informacji z formularzy ani reagować na interakcje użytkownika w sposób, w jaki robią to języki programowania takie jak JavaScript czy PHP. Może to prowadzić do mylnych przekonań, że CSS jest bardziej wszechstronny, niż jest w rzeczywistości, jednak jego zastosowanie ogranicza się wyłącznie do aspektów stylistycznych. W praktyce, aby przetwarzać dane użytkownika, niezbędne są inne technologie, które mogą współpracować z CSS, ale same w sobie nie są w stanie tego zrobić.

Pytanie 8

Na ilustracji pokazano tabelę z połączonymi komórkami. Jakie atrybuty scalania zastosowano, aby uzyskać ten efekt?

Ilustracja do pytania
A. colspan w drugim wierszu we wszystkich trzech komórkach oraz rowspan w trzecim wierszu ostatniej komórce
B. rowspan w drugim wierszu i pierwszej komórce oraz colspan w trzecim wierszu, trzeciej komórce
C. colspan w drugim wierszu i pierwszej komórce oraz rowspan w trzecim wierszu, trzeciej komórceTwoja odpowiedź
D. colspan w drugim wierszu i pierwszej komórce oraz rowspan w trzecim wierszu i czwartym wierszu
Poprawna odpowiedź. Odpowiedź jest prawidłowa, ponieważ zastosowanie atrybutów colspan i rowspan w tabeli HTML pozwala na efektywne zarządzanie układem danych. Atrybut colspan w drugiej komórce pierwszego wiersza łączy dwie komórki poziomo, co jest użyteczne, gdy chcemy, aby nagłówki lub dane rozciągały się na kilka kolumn. W trzecim wierszu, atrybut rowspan w trzeciej komórce łączy trzy komórki pionowo, co może być przydatne, gdy mamy dane, które powinny być przedstawione obok siebie w kilku rzędach. Tego typu operacje scalania są powszechnie stosowane w projektowaniu stron internetowych, szczególnie w przypadku układów, które wymagają elastyczności i skalowalności. W praktyce, takie podejście pozwala na lepsze wykorzystanie przestrzeni ekranowej i ułatwia czytelność danych. Dobrą praktyką jest również stosowanie CSS do dodatkowego stylizowania takich tabel, co zwiększa ich atrakcyjność wizualną. Ważne jest, aby zrozumieć, że używanie colspan i rowspan wpływa na dostępność danych, dlatego należy je stosować świadomie i z uwzględnieniem użytkowników korzystających z technologii wspomagających.

Pytanie 9

Jaką barwę przedstawia kolor zapisany w modelu RGB(0, 255, 0)?

A. czerwoną
B. żółtą
C. zielonąTwoja odpowiedź
D. niebieską
Poprawna odpowiedź. W modelu RGB kolor opisują składowe czerwona (R), zielona (G) i niebieska (B), każda od 0 do 255. Zapis RGB(0, 255, 0) to maksymalna składowa zielona i zerowe pozostałe, czyli czysty zielony. Dlatego RGB(0, 255, 0) oznacza barwę zieloną.

Pytanie 10

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 sześcioma następującymi elementami.
B. Lista uporządkowana z dwoma składnikami, z których każdy ma wewnętrzną listę nieuporządkowaną.Twoja odpowiedź
C. Lista uporządkowana z podpunktami zapisanymi w formie numeracji dziesiętnej (np. 1.1, 1.2).
D. Lista nieuporządkowana zawierająca wszystkie składniki, jeden za drugim.
Poprawna odpowiedź. 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 11

Który symbol oznacza w CSS jednostkę miary wyrażoną w punktach edytorskich?

A.
em
Twoja odpowiedź
B.
px
C.
pt
Poprawna odpowiedź
D.
in
Niepoprawna odpowiedź. Pozostałe jednostki to co innego. px to piksele, in to cale, a em to jednostka względna (zależna od rozmiaru czcionki). Punkt edytorski to pt.

Pytanie 12

Aby zdefiniować w języku HTML listę nienumerowaną (wypunktowaną), należy użyć znacznika:

A.
<dt>
B.
<ul>
Twoja odpowiedź
C.
<dd>
D.
<ol>
Poprawna odpowiedź. Listę nienumerowaną (wypunktowaną) tworzy znacznik <ul> (unordered list), a jej kolejne pozycje umieszcza się w <li>. Domyślnie elementy poprzedzane są punktorami. Dla listy numerowanej używa się <ol>. Dlatego listę wypunktowaną definiuje <ul>.

Pytanie 13Strzał

Które oprogramowanie nie jest systemem zarządzania treścią (CMS)?

A. Joomla
B. WordPress
C. ApachePoprawna odpowiedź
D. MamboTwoja odpowiedź
Niepoprawna odpowiedź. W tym pytaniu łatwo pomylić narzędzie używane przy tworzeniu stron z systemem zarządzania treścią. Joomla, Mambo i WordPress to klasyczne przykłady CMS-ów, czyli aplikacji webowych służących do wygodnego publikowania i organizowania treści bez ręcznego edytowania każdego pliku HTML. Pozwalają zwykle logować się do panelu administracyjnego, dodawać artykuły, zarządzać menu, instalować rozszerzenia, zmieniać motywy graficzne i przydzielać role użytkownikom. Takie funkcje są typowe dla CMS-a, bo głównym celem jest obsługa treści przez redaktorów, administratorów i czasem zwykłych użytkowników strony. Apache ma zupełnie inną rolę. To serwer WWW, czyli program odbierający żądania z przeglądarki i zwracający odpowiednie zasoby, na przykład pliki HTML, CSS, obrazy albo wynik działania skryptu PHP. Może być częścią środowiska, na którym działa WordPress czy Joomla, ale sam nie daje panelu do tworzenia wpisów i stron. Typowy błąd polega na wrzucaniu do jednego worka wszystkiego, co kojarzy się ze stronami internetowymi. Z mojego doświadczenia najlepiej rozróżniać warstwy: CMS zarządza treścią, serwer WWW obsługuje komunikację HTTP, a baza danych przechowuje dane. To porządkuje temat i pomaga też przy administracji oraz diagnozowaniu awarii.

Pytanie 14

Którego znacznika użyć, aby przejść do nowej linii tekstu BEZ tworzenia akapitu?

A.
<br>
Twoja odpowiedź
B.
</b>
C.
</br>
D.
<p>
Poprawna odpowiedź. Znacznik <br> wymusza przejście do nowej linii w obrębie tego samego bloku tekstu, bez tworzenia nowego akapitu (i bez dodatkowego odstępu, jaki daje <p>). To element pusty, bez znacznika zamykającego. Dlatego nową linię bez akapitu daje <br>.

Pytanie 15Strzał

Kolor zapisany w systemie RGB, o wartościach rgb(255,128,16), jaki będzie miał odpowiednik w kodzie szesnastkowym?

A. #ff0f10
B. #ff8010Twoja odpowiedź
C. #ff8011
D. #008010
Poprawna odpowiedź. Kod RGB (Red, Green, Blue) to model barw wykorzystywany w grafice komputerowej oraz w technologii wyświetlania. Wartości RGB są określane na podstawie trzech składowych: czerwonej, zielonej i niebieskiej. Każda z tych składowych może przyjmować wartości w zakresie od 0 do 255. W przypadku koloru zapisanym jako rgb(255,128,16), wartość 255 oznacza pełne nasycenie koloru czerwonego, 128 to średnie nasycenie koloru zielonego, a 16 to stosunkowo niskie nasycenie koloru niebieskiego. Aby przekonwertować wartości RGB na format szesnastkowy, należy przekształcić każdą z trzech składowych na system szesnastkowy, co w przypadku podanego koloru daje nam: 255 w systemie dziesiętnym to FF w szesnastkowym, 128 to 80, a 16 to 10. Łącząc te wartości, otrzymujemy #ff8010, co dokładnie odpowiada wartości RGB podanej w pytaniu. Taki zapis jest powszechnie stosowany w CSS i innych formatach związanych z web designem, a jego znajomość jest kluczowa dla każdego projektanta lub developera webowego.

Pytanie 16

W języku HTML zapisano formularz. Który z efektów działania poniższego kodu zostanie wyświetlony przez przeglądarkę, zakładając, że w pierwsze pole użytkownik wpisał wartość "Przykładowy tekst"?

<form>
    <textarea rows="3" cols="30"></textarea><br>
    <input type="checkbox"> Opcja1<br>
    <input type="checkbox"> Opcja2
</form>
Ilustracja do pytania
A. Efekt 4.
B. Efekt 2.Twoja odpowiedź
C. Efekt 1.
D. Efekt 3.
Poprawna odpowiedź. Twoja odpowiedź jest poprawna. Wybrałeś odpowiedź 'Efekt 2', która jest zgodna z zachowaniem formularza HTML w opisanym scenariuszu. Formularz zawiera pole tekstowe i dwa pola typu checkbox. Kiedy wpiszesz do pola tekstowego wartość 'Przykładowy tekst' i wyświetlisz formularz w przeglądarce, zobaczysz ten tekst w polu tekstowym oraz dwa pola wyboru typu checkbox poniżej z etykietami 'Opcja1' i 'Opcja2'. To dokładnie taki układ, co pokazuje Efekt 2. Tworzenie formularzy HTML to ważna umiejętność w projektowaniu stron internetowych. Pozwalają one na interakcję z użytkownikiem oraz zbieranie od niego informacji. Pamiętaj, że dobry formularz powinien być intuicyjny w użyciu i jasno prezentować swoje funkcje użytkownikowi.

Pytanie 17

W znaczniku meta w miejsce kropek należy wpisać

Ilustracja do pytania
A. streszczenie treści stronyTwoja odpowiedź
B. nazwa edytora
C. język dokumentu
D. informację o dostosowaniu do urządzeń mobilnych
Poprawna odpowiedź. Znacznik meta opatrzony atrybutem name="description" służy do zamieszczenia streszczenia treści strony internetowej. Jest to element HTML używany w nagłówku dokumentu, który dostarcza wyszukiwarkom i innym usługom internetowym informacji o zawartości strony. Opis ten pomaga w lepszym indeksowaniu strony przez wyszukiwarki oraz może wpływać na to, jak strona jest prezentowana w wynikach wyszukiwania. Dzięki dobrze sformułowanemu opisowi użytkownicy mogą szybciej zrozumieć, czego mogą się spodziewać po odwiedzeniu danej strony. Jest to dobra praktyka SEO, ponieważ poprawia widoczność strony w wyszukiwarkach. Zawartość opisana w znaczniku meta description nie powinna przekraczać 160 znaków, aby zapewnić odpowiednie wyświetlanie w wynikach wyszukiwania. Użycie streszczenia w odpowiedni sposób zwiększa atrakcyjność kliknięcia przez potencjalnych odwiedzających. To podejście jest zgodne z wytycznymi Google, które zaleca tworzenie unikalnych i treściwych opisów dla każdej strony w serwisie.

Pytanie 18

W formularzu dokumentu PHP istnieje pole <input name="im">. Po wprowadzeniu przez użytkownika ciągu znaków "Janek", w celu dodania zawartości pola do bazy danych, w tablicy $_POST zawarty jest element

A. im z kolejnym numerem indeksu
B. Janek o indeksie imPoprawna odpowiedź
C. Janek z kolejnym numerem indeksuTwoja odpowiedź
D. im o indeksie Janek
Niepoprawna odpowiedź. W tym pytaniu łatwo pomylić dwie rzeczy: nazwę pola formularza i wartość wpisaną przez użytkownika. W formularzach HTML atrybut name nie jest daną wpisaną przez użytkownika, tylko etykietą techniczną, pod którą PHP zapisze przesłaną wartość. Jeżeli pole ma nazwę name="im", to po wysłaniu metodą POST w tablicy $_POST pojawi się element dostępny przez $_POST["im"]. Dopiero pod tym indeksem znajduje się tekst "Janek". Dlatego myślenie, że "Janek" staje się indeksem, jest odwróceniem relacji klucz-wartość. W tablicy asocjacyjnej PHP klucz pochodzi z nazwy kontrolki formularza, a wartość pochodzi z tego, co użytkownik wprowadził.

Nie pasuje tu też pomysł z kolejnym numerem indeksu. Automatyczne indeksy liczbowe pojawiają się zwykle wtedy, gdy tworzymy zwykłą tablicę bez podawania kluczy, na przykład $tab[] = "Janek". Formularz POST działa inaczej, bo dane przychodzą w parach nazwa=wartość. Przeglądarka wysyła coś w rodzaju im=Janek, a PHP zamienia to na tablicę asocjacyjną. To jest bardzo praktyczne, bo w większym formularzu można mieć pola login, email, haslo i każde z nich odczytuje się po konkretnej nazwie. Z mojego doświadczenia sporo osób zapamiętuje tylko, że $_POST to „tablica z formularza”, ale nie zwraca uwagi, skąd biorą się indeksy. A to potem powoduje błędy typu odczytywanie $_POST["Janek"] albo oczekiwanie, że dane będą pod numerem 0. Przy zapisie do bazy danych poprawny schemat to: pobrać $_POST["im"], sprawdzić dane, zabezpieczyć zapytanie i dopiero wykonać INSERT.

Pytanie 19

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

background-color: red;
color: blue;
margin: 40px;
A. tło czerwone, kolor tekstu niebieski, marginesy wewnętrzne na poziomie 40 px
B. tło niebieskie, kolor tekstu czerwony, marginesy zewnętrzne na poziomie 40 px
C. tło niebieskie, kolor tekstu czerwony, marginesy wewnętrzne na poziomie 40 px
D. tło czerwone, kolor tekstu niebieski, marginesy zewnętrzne na poziomie 40 pxTwoja odpowiedź
Poprawna odpowiedź. Poprawna odpowiedź wskazuje na tło czerwone, kolor tekstu niebieski oraz marginesy zewnętrzne ustawione na 40 px. W deklaracji CSS, przypisanie 'background-color: red;' skutkuje czerwonym tłem dla elementu, co jest zgodne z zasadami oznaczania kolorów w CSS, które pozwalają na zastosowanie nazw kolorów, kodów hex czy rgb. 'color: blue;' ustawia kolor tekstu na niebieski, co pozwala na lepszą czytelność tekstu na czerwonym tle. Z kolei 'margin: 40px;' definiuje marginesy zewnętrzne, co oznacza, że odległość od innych elementów na stronie wynosi 40 px. Takie praktyki są zgodne z dobrymi standardami projektowania, które sugerują stosowanie kontrastujących kolorów dla poprawy dostępności oraz przestrzeni między elementami dla lepszej struktury layoutu. Warto pamiętać, że marginesy zewnętrzne różnią się od marginesów wewnętrznych (padding), co często jest źródłem nieporozumień.

Pytanie 20

Elementy <header>, <article>, <section>, <footer> są typowe dla języka

A. XHTML 1.1
B. HTML 4.01 Strict
C. HTML 4.01 Transitional
D. HTML 5Twoja odpowiedź
Poprawna odpowiedź. Odpowiedź HTML 5 jest prawidłowa, ponieważ to właśnie w tej wersji języka HTML wprowadzono nowe semantyczne znaczniki, takie jak <header>, <article>, <section> oraz <footer>. Te znaczniki mają na celu lepsze strukturalne organizowanie treści w dokumentach internetowych, co ułatwia zarówno odczyt zrozumienia przez przeglądarki, jak i poprawia dostępność dla osób korzystających z technologii wspomagających. Na przykład, <header> zazwyczaj zawiera nagłówki i elementy nawigacyjne, podczas gdy <article> służy do oznaczenia niezależnej jednostki treści, np. artykułu prasowego. <section> jest używane do grupowania powiązanych sekcji, a <footer> zawiera informacje takie jak prawa autorskie czy linki do polityki prywatności. Wdrożenie tych znaczników zgodnie z najlepszymi praktykami zwiększa semantykę strony, co jest korzystne dla SEO, a także pozwala na lepsze zrozumienie struktury strony przez roboty indeksujące. HTML 5 jest obecnie standardem w tworzeniu stron internetowych i jego znajomość jest kluczowa dla współczesnych deweloperów.

Pytanie 21

Której właściwości CSS użyć, aby ustawić wewnętrzny GÓRNY odstęp (między treścią a obramowaniem)?

A.
border-top
B.
outline-top
C.
padding-top
Twoja odpowiedź
D.
local-top
Poprawna odpowiedź. Wewnętrzny GÓRNY odstęp - między treścią a górną krawędzią obramowania - ustawia padding-top, np. padding-top: 15px;. To jedna z czterech stron padding (padding-top, -right, -bottom, -left). Zapamiętaj: „padding” = wnętrze, „top” = góra.

Pytanie 22

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

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

Pytanie 23

W CSS, co spowoduje poniższy kod z plikiem rysunek.png?

p {background-image: url("rysunek.png");}
A. widoczny, jeśli zastosowany zostanie znacznik img w kodzie
B. tłem dla każdego akapituTwoja odpowiedź
C. pokazany obok każdego akapitu
D. tłem całej witryny
Poprawna odpowiedź. Wybrana odpowiedź jest poprawna ponieważ w arkuszach stylów CSS zastosowanie selektora elementu p z właściwością background-image powoduje że obraz rysunek.png zostanie ustawiony jako tło dla każdego elementu paragrafu na stronie. Jest to przydatna technika gdy chcemy nadać spójny wygląd wszystkim paragrafom w dokumencie. Tło to może być używane do celów estetycznych lub jako część identyfikacji wizualnej strony. Warto pamiętać że w CSS można dodatkowo kontrolować sposób wyświetlania obrazka tła za pomocą właściwości takich jak background-repeat background-size i background-position co pozwala na precyzyjne dostosowanie wyświetlania. Dobre praktyki zalecają aby obrazy tła były odpowiednio zoptymalizowane pod kątem rozmiaru aby nie wpływały negatywnie na szybkość ładowania strony. W praktyce stosowanie obrazów jako tła w paragrafach może wspierać wizualne narracje oraz zwiększać zaangażowanie użytkowników szczególnie gdy są stosowane w przemyślany sposób w kontekście projektowania doświadczeń użytkownika UX.

Pytanie 24

W CSS wartości underline, overline, blink są przypisane do atrybutu

A. text-style
B. font-weight
C. text-decorationTwoja odpowiedź
D. font-style
Poprawna odpowiedź. Właściwość CSS 'text-decoration' to coś, co naprawdę może zmienić wygląd tekstu na stronach internetowych. Dzięki niej możemy dodać różne efekty dekoracyjne, jak podkreślenie, przekreślenie, czy nadkreślenie. Zdarzają się też nowinki, jak efekt 'blink', chociaż nie jest on zbyt popularny w profesjonalnym kodzie. Warto pamiętać, że stosowanie tej właściwości poprawia czytelność i estetykę tekstu. Na przykład, gdy chcemy wyróżnić ważne informacje, możemy użyć 'text-decoration: underline;'. Ciekawostka: niektóre efekty, jak 'blink', mogą sprawić problemy z dostępnością, więc lepiej ich unikać. Właściwe użycie 'text-decoration' w połączeniu z odpowiednimi znacznikami HTML, jak <span> lub <a>, może naprawdę poprawić interaktywność naszej strony. Dobrze jest o tym pamiętać, gdy pracujemy nad projektami.

Pytanie 25

Wskaż, które z poniższych zdań jest prawdziwe w odniesieniu do definicji stylu:

<STYLE type="text/css">
<!--
   P {color:blue; font-size:14pt; font-style:italic;}
   A {font-size:16pt; text-transform:lowercase;}
   TD.niebieski {color:blue}
   TD.czerwony {color:red}
-->
</STYLE>
A. Odnośnik będzie napisany czcionką o rozmiarze 14 punktów
B. Zdefiniowano dwie klasyTwoja odpowiedź
C. Jest to styl zasięg lokalny
D. Akapit będzie przekształcany na małe litery
Poprawna odpowiedź. W tym kodzie CSS masz zdefiniowane dwie klasy: 'niebieski' i 'czerwony', które są przypisane do elementów TD. To super, bo te klasy zmieniają kolor tekstu w tabeli, a to jest zgodne z tym, jak działają kaskadowe arkusze stylów (CSS). Klasa 'niebieski' ustawia tekst na niebiesko, a 'czerwony' na czerwono. Dzięki takim klasom można zaoszczędzić sporo czasu, bo używasz tych samych stylów w różnych miejscach w HTML. Widać, że pomyślałeś o organizacji swojego kodu. Dodatkowo, masz też style dla elementów P i A — P jest niebieski i ma czcionkę 14 punktów w kursywie, a A ma większą 16-punktową czcionkę. To pokazuje, jak elastyczne jest CSS w stylizacji różnych elementów. Fajnie, że trzymasz się dobrych praktyk w programowaniu, bo to naprawdę ułatwia późniejsze modyfikacje.

Pytanie 26Strzał

Ile klatek na sekundę zapewnia PŁYNNY obraz w filmie (minimalny typowy zakres)?

A. 24-30 fpsPoprawna odpowiedź
B. 16-19 fps
C. 31-36 fpsTwoja odpowiedź
D. 20-23 fps
Niepoprawna odpowiedź. Zakresy poniżej (16-19, 20-23 fps) dają widoczne zacinanie ruchu, a 31-36 fps to już wartości powyżej typowego minimum płynności. Standardowy zakres płynnego obrazu to 24-30 fps.

Pytanie 27

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. td, th { background-color: Pink; }
B. tr:active { background-color: Pink; }
C. tr:hover { background-color: Pink; }Twoja odpowiedź
D. tr { background-color: Pink; }
Poprawna odpowiedź. Poprawny selektor to tr:hover { background-color: Pink; }, bo dokładnie opisuje sytuację pokazaną na filmie: efekt pojawia się dopiero po najechaniu kursorem na cały wiersz tabeli. Pseudo-klasa :hover w CSS służy właśnie do definiowania stylów w momencie, gdy użytkownik „najeżdża” myszką na dany element. Jeśli więc chcemy, żeby podświetlał się cały rząd tabeli, logiczne i zgodne z dobrymi praktykami jest przypięcie efektu do znacznika tr, a nie do pojedynczych komórek.

W praktyce taki zapis stosuje się bardzo często w interfejsach webowych: w panelach administracyjnych, listach zamówień, tabelach z uczniami, produktami, logami systemowymi itd. Dzięki temu użytkownik łatwiej śledzi, który wiersz właśnie ogląda. To niby detal, ale z punktu widzenia UX robi sporą różnicę. Z mojego doświadczenia to jeden z tych prostych trików CSS, które od razu poprawiają „odczuwalną” jakość strony.

Ważne jest też to, że :hover jest częścią standardu CSS (opisane m.in. w specyfikacji CSS Selectors Level 3/4) i działa w praktycznie wszystkich współczesnych przeglądarkach. Nie trzeba do tego żadnego JavaScriptu, żadnych skomplikowanych skryptów – czysty CSS. Dobrą praktyką jest również używanie bardziej stonowanych kolorów niż Pink w prawdziwych projektach, np. #f5f5f5 albo lekki odcień niebieskiego, tak żeby kontrast był czytelny i nie męczył wzroku. Warto też pamiętać, że podobny mechanizm możesz zastosować na innych elementach: np. a:hover dla linków, button:hover dla przycisków czy nawet div:hover dla całych kafelków w layoutach. Kluczowe jest to, żeby pseudo-klasa :hover była przypięta dokładnie do tego elementu, który ma reagować na interakcję użytkownika.

Pytanie 28

Strona internetowa została wyświetlona przez przeglądarkę w poniższy sposób. Wskaż kod HTML, który prawidłowo reprezentuje zaprezentowaną hierarchiczną strukturę tekstu:

Ilustracja do pytania
A. <h1>Rozdział 1</h1> <p>tekst</p> <h2>Podrozdział 1.1</h2> <p>tekst</p> <h2>Podrozdział 1.2</h2>Twoja odpowiedź
B. <ul><li>Rozdział 1<li>tekst<li>Podrozdział 1.1<li>tekst<li>Podrozdział 1.2</ul>
C. <big>Rozdział 1</big>tekst<big>Podrozdział 1.1</big>tekst<big>Podrozdział 1.2</big>
D. <h1>Rozdział 1<p>tekst <h2>Podrozdział 1.1<p>tekst <h2>Podrozdział 1.2
Poprawna odpowiedź. Odpowiedź jest w porządku! Użycie znaczników <h1> i <h2> wraz z <p> to dobry krok, bo to właśnie tak powinno wyglądać semantyczne formatowanie w HTML. Znacznik <h1> to taki główny nagłówek, który mówi, o czym jest cała strona lub sekcja, a to naprawdę kluczowe dla porządku w treści i SEO. Dzięki nagłówkom w HTML łatwiej jest zrozumieć, co jest na stronie, zarówno dla ludzi, jak i programów, które przeszukują internet. Jak już masz <h2>, to świetnie, bo to pokazuje podrozdziały, a więc hierarchię informacji. Użycie <p> dla tekstu to też dobry pomysł, bo sprawia, że tekst jest bardziej czytelny. Warto pamiętać, że semantyczne znaczniki HTML pomagają osobom z niepełnosprawnościami korzystać z internetu. Według wytycznych WCAG powinno się je stosować, żeby poprawić dostępność. A jak to robić z głową, to łatwiej potem stylować stronę przy użyciu CSS, bo możesz zmieniać wygląd bez bawienia się w treść HTML. Generalnie, dobrze jest, gdy dokumenty są jasne zarówno dla ludzi, jak i dla maszyn – to standard w nowoczesnym webdesignie.

Pytanie 29

W zaprezentowanej części formularza HTML znajduje się pole, które można określić jako?

<input type="password" name="pole">
A. pozwala na wprowadzanie jedynie wartości liczbowych.
B. domyślnie posiada wpisany tekst "pole".
C. ukrywa wprowadzone znaki.Twoja odpowiedź
D. wyświetla wprowadzone znaki.
Poprawna odpowiedź. Twoja odpowiedź jest właściwa. W tym fragmencie formularza HTML mamy pole <i>input</i>, które wprowadzone znaki ukrywa. To dzięki atrybutowi 'type="password"' w elemencie <i>input</i>. W HTML atrybut 'type' mówi nam, jaki typ danych użytkownik może wprowadzić do tego pola. Jak masz 'password', to wpisane rzeczy są zasłonięte symbolami, jak np. gwiazdki czy kropki, żeby chronić dane użytkownika. To standardowa sprawa, szczególnie dla haseł i innych ważnych informacji, żeby nikt ich nie zobaczył. Pamiętaj, że takie pola powinny być zawsze dobrze oznaczone i zabezpieczone, to ważne dla bezpieczeństwa.

Pytanie 30

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

Ilustracja do pytania
A. selektora akapitu
B. klasyTwoja odpowiedź
C. identyfikatora
D. pseudoklasy
Poprawna odpowiedź. 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 31

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

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

Pytanie 32

Którego związku selektorów CSS należy użyć w miejscu znaków zapytania, aby zdefiniowany styl został zastosowany tylko do tekstu „paragrafie”?

<!DOCTYPE html>
<html>
  <head>
    <style>
      ???{letter-spacing: 10px; color: red;}
    </style>
  </head>
  <body>
    <p>Styl <b>tekstu</b> w pierwszym <i>paragrafie</i></p>
  </body>
</html>
A. b > i
B. b i
C. p > iTwoja odpowiedź
D. p + i
Poprawna odpowiedź. Poprawny selektor to „p > i”, ponieważ w podanym fragmencie HTML element <i> jest bezpośrednim dzieckiem elementu <p>. Znak „>” oznacza tzw. selektor dziecka (child combinator) w CSS – styl zostanie zastosowany tylko do tych elementów <i>, które znajdują się dokładnie jeden poziom niżej w drzewie DOM, wewnątrz znacznika <p>. Dzięki temu reguła nie obejmie np. <i> zagnieżdżonych głębiej ani <i> występujących poza paragrafem.
Moim zdaniem to jeden z ważniejszych niuansów CSS: rozróżnienie selektora potomków (spacja, np. „p i”) od selektora bezpośrednich dzieci („p > i”). Gdyby w stylu użyć „p i”, to reguła zadziałałaby na każde <i> znajdujące się gdziekolwiek w środku <p>, nawet gdyby było schowane np. w <span> lub <b>. Przy prostym przykładzie nie widać różnicy, ale w większych projektach ma to ogromne znaczenie dla precyzji i przewidywalności styli.
W praktyce taki selektor „p > i” możesz stosować np. gdy chcesz nadać specyficzny wygląd tylko oznaczonym kursywą fragmentom bezpośrednio w paragrafie, ale nie ruszać <i> użytych w zagnieżdżonych komponentach, widgetach albo ikonach. To jest zgodne z dobrymi praktykami: pisać selektory możliwie precyzyjne, unikając nadmiernie ogólnych reguł, które potem ciężko nadpisać. W dokumentacji CSS (specyfikacja W3C) wszystkie te kombinatory są dokładnie opisane i warto się do nich przyzwyczaić, bo później mocno ułatwiają utrzymanie arkuszy stylów w większych projektach.
Dodatkowo warto pamiętać, że tego typu selektory dobrze współpracują z metodologiami jak BEM czy ITCSS, gdzie świadome ograniczanie zasięgu reguł jest kluczowe. Zamiast dokładać zbędne klasy, czasem wystarczy właśnie poprawnie użyty kombinator „>”.

Pytanie 33

W zaprezentowanym fragmencie algorytmu wykorzystano

Ilustracja do pytania
A. trzy bloki operacyjne (procesy)Twoja odpowiedź
B. jedną pętlęPoprawna odpowiedź
C. jeden blok decyzyjny
D. dwie pętle
Niepoprawna odpowiedź. Błędy w odpowiedziach mogą wynikać z mylnego odbioru diagramu. Posiadanie bloku decyzyjnego nie zawsze znaczy, że mamy pętlę, bo pętle potrzebują zarówno warunków, jak i mechanizmu powtarzania. Wydaje się, że są różne bloki, ale w rzeczywistości mamy tu dwa bloki decyzyjne i jeden operacyjny, co nie zgadza się z odpowiedzią. Na diagramie nie da się znaleźć dwóch pętli, co może sugerować, że nie do końca rozumiesz strukturę algorytmu. Często w takich analizach ludzie mylą bloki decyzyjne z pętlami, co jest błędne, bo pętle są bardziej złożonymi strukturami. Jak się programuje, ważne jest, żeby dobrze rozróżniać te elementy, bo to wpływa na jakość algorytmu. Mnie osobiście pomogło to w pisaniu lepszego kodu, dlatego warto poświęcić chwilę na zrozumienie różnic między tymi pojęciami.

Pytanie 34

Saturacja koloru nazywana jest inaczej

A. dopełnieniem koloru
B. nasyceniem koloruTwoja odpowiedź
C. jasnością koloru
D. przezroczystością koloru
Poprawna odpowiedź. Saturacja koloru to inaczej nasycenie koloru, czyli informacja o tym, jak intensywny, czysty albo wyblakły jest dany kolor. W praktyce oznacza to, że czerwony o wysokiej saturacji wygląda mocno i żywo, a czerwony o niskiej saturacji robi się bardziej szary, przygaszony. To pojęcie spotkasz bardzo często w grafice komputerowej, edycji zdjęć, projektowaniu interfejsów i CSS, np. w modelach HSL oraz HSV. W zapisie CSS typu hsl(0, 100%, 50%) środkowa wartość 100% oznacza właśnie pełne nasycenie barwy. Gdy zmniejszysz ją do 20%, kolor nadal może mieć ten sam odcień, ale będzie dużo mniej intensywny. Z mojego doświadczenia to jest jedno z tych pojęć, które naprawdę pomaga przy dobieraniu kolorów do strony WWW, baneru albo ikony. Dobra praktyka branżowa jest taka, żeby nie przesadzać z maksymalną saturacją wszędzie, bo interfejs może wyglądać agresywnie i męczyć wzrok. Nasycenie warto kontrolować razem z jasnością i kontrastem, szczególnie gdy projekt ma być czytelny oraz zgodny z zasadami dostępności, na przykład WCAG.

Pytanie 35

W CSS zapis w postaci

h1::first-letter{color:red;}
spowoduje, że kolor czerwony będzie dotyczył
A. pierwszej linii akapitu
B. pierwszej litery nagłówka drugiego poziomu
C. tekstów nagłówka pierwszego poziomu
D. pierwszej litery nagłówka pierwszego poziomuTwoja odpowiedź
Poprawna odpowiedź. Zapis CSS h1::first-letter {color: red;} odnosi się do selektora pseudo-elementu first-letter, który jest używany do stylizacji pierwszej litery bloku tekstowego w nagłówkach. W tym wypadku, gdy selektor jest zastosowany do elementu h1, oznacza to, że kolor pierwszej litery nagłówka pierwszego stopnia (h1) zostanie zmieniony na czerwony. Pseudo-element first-letter działa tylko dla elementów blokowych, takich jak nagłówki, akapity czy listy. W praktyce, jeśli w dokumencie HTML mamy element <h1> z tekstem, np. 'Witaj świecie', to wyłącznie litera 'W' zostanie wyświetlona w kolorze czerwonym. To podejście jest zgodne ze standardami CSS, które definiują pseudo-elementy jako specyficzne fragmenty dokumentu, które można stylizować niezależnie od reszty zawartości. Warto również zauważyć, że stosowanie takich selektorów pozwala na uzyskanie bardziej złożonych efektów wizualnych bez konieczności modyfikacji struktury HTML. Umożliwia to projektantom stron internetowych większą elastyczność i kontrolę nad estetyką treści.

Pytanie 36

Która grupa znaczników HTML służy do GRUPOWANIA elementów i budowy struktury dokumentu?

A. <br>, <img>, <hr>
B. <span>, <strong>, <em>
C. <table>, <tr>, <td>
D. <div>, <article>, <header>Twoja odpowiedź
Poprawna odpowiedź. Do grupowania elementów i budowy struktury dokumentu służą znaczniki blokowe i semantyczne: <div> (uniwersalny kontener) oraz <article> i <header> (sekcje HTML5). Wyznaczają one układ strony. Dlatego strukturę buduje grupa <div>, <article>, <header>.

Pytanie 37

Jaki zapis w dokumencie HTML umożliwia powiązanie z zewnętrznym arkuszem stylów o nazwie style.css?

A. <a src="style.css">
B. <a href="style.css">
C. <link rel="stylesheet' src="style.css">
D. <link rel="stylesheet" href="style.css">Twoja odpowiedź
Poprawna odpowiedź. Zapis <link rel="stylesheet" href="style.css"> jest poprawnym sposobem na dołączenie zewnętrznego arkusza stylów do dokumentu HTML. Atrybut 'rel' określa relację między dokumentem a zewnętrznym zasobem, w tym przypadku wskazując, że jest to arkusz stylów. Atrybut 'href' z kolei wskazuje ścieżkę do pliku CSS, który ma być użyty. Użycie znacznika <link> jest zgodne z standardem W3C i jest najlepszą praktyką w tworzeniu stron internetowych. Dzięki temu przeglądarka może załadować style z zewnętrznego pliku, co pozwala na łatwiejsze zarządzanie stylami oraz ich ponowne użycie w różnych dokumentach HTML. Umożliwia to także separację treści od stylizacji, co jest kluczowe w koncepcji wzorców projektowych, takich jak MVC (Model-View-Controller). Przykładowo, aby zmienić wygląd całej strony, wystarczy edytować jeden plik CSS, co znacząco upraszcza proces tworzenia i utrzymania witryn.

Pytanie 38

W CSS, poniższy zapis spowoduje, że czerwony kolor zostanie zastosowany do

h1::first-letter {color:red;}
A. pierwsza linia akapitu
B. tekst nagłówka pierwszego poziomu
C. pierwsza litera nagłówka drugiego poziomu
D. pierwsza litera nagłówka pierwszego poziomuTwoja odpowiedź
Poprawna odpowiedź. Wiesz, użycie selektora CSS ::first-letter w połączeniu z stylem h1 to fajny sposób na zmianę wyglądu pierwszej litery w nagłówku. Kiedy używasz tego, kolor czerwony sprawi, że ta litera będzie się wyróżniać, co jest super, zwłaszcza w przypadku nagłówków czy akapitów. To technika, którą często stosuje się w projektowaniu stron, żeby nadać im trochę typograficznego stylu, jak w książkach z dużymi inicjałami. Ale pamiętaj, że ten selektor działa tylko z blokowymi elementami, takimi jak <p> czy <h1>, więc jeżeli spróbujesz zastosować go z elementami liniowymi, to niestety efekty nie będą takie, jak się spodziewasz. Zawsze warto też mieć na uwadze standardy W3C, bo one pomagają w tworzeniu dostępnych stron. No i ten selektor jest częścią specyfikacji CSS Pseudo-Elements Level 3, więc przeglądarki go dobrze wspierają. Zrozumienie, jak i kiedy stosować takie selektory, to klucz do tworzenia nowoczesnych stron.

Pytanie 39

W przedstawionym kodzie HTML zastosowany styl CSS jest stylem

<p style="color:red;">To jest przykładowy akapit.</p>
A. zewnętrznym
B. lokalnymTwoja odpowiedź
C. dynamicznym
D. nagłówkowym
Poprawna odpowiedź. Styl CSS zastosowany w podanym kodzie HTML to styl lokalny, ponieważ jest zdefiniowany bezpośrednio w tagu HTML za pomocą atrybutu 'style'. Taki sposób definiowania stylów pozwala na przypisanie unikalnych stylów do konkretnego elementu na stronie, co jest szczególnie przydatne, gdy chcemy szybko zmienić wygląd jednego elementu bez wpływania na inne. Przykładem lokalnego stylu jest ustawienie koloru tekstu akapitu na czerwony, co można zaobserwować w atrybucie 'style="color:red;"'. Warto zauważyć, że lokalne style mają wyższy priorytet od stylów zewnętrznych i wewnętrznych, co oznacza, że jeśli ten sam element ma przypisany styl zewnętrzny, lokalny styl go nadpisze. W kontekście standardów CSS, lokalne style są zgodne z zasadami kaskadowości, która określa, jak łączyć różne źródła stylów. Z perspektywy użyteczności, chociaż lokalne style mogą być wygodne, ich nadmierne stosowanie prowadzi do trudności w utrzymaniu kodu, dlatego zaleca się ich używanie w ograniczonym zakresie.

Pytanie 40

W CSS zapisano stylizację

css
p > i {color: blue}
oznacza to, że kolorem niebieskim zostanie wyświetlony
A. pochylony tekst akapituTwoja odpowiedź
B. wszystkie teksty nagłówków, niezależnie od formatowania
C. cały tekst akapitu, niezależnie od jego stylizacji
D. pogrubiony tekst akapitu
Poprawna odpowiedź. W definicji CSS `p > i {color: blue}`, mamy do czynienia z selektorem, który odnosi się do elementów typu <i> znajdujących się bezpośrednio wewnątrz elementu <p>. Oznacza to, że wszystkie elementy <i>, które są bezpośrednimi dziećmi elementu <p>, będą miały kolor tekstu ustawiony na niebieski. Element <i> w HTML jest często używany do oznaczania tekstu kursywą, co jest zgodne z semantyką dokumentu. Użycie koloru w tym kontekście podkreśla, że zmiana koloru dotyczy tylko tych fragmentów tekstu, które są specyficznie oznaczone jako kursywa. W praktyce, jeżeli mamy paragraf zawierający tekst oraz fragmenty w kursywie, to tylko te kursywne fragmenty będą przyjmować niebieski kolor. Przykładowo, w poniższym kodzie HTML: <p>To jest <i>kursywa</i> oraz <b>pogrubienie</b>.</p>, tylko słowo 'kursywa' będzie miało kolor niebieski. Zgodność z W3C i standardami CSS zapewnia, że taki zapis będzie działał na większości przeglądarek. Warto zwrócić uwagę na hierarchię selektorów, która pozwala na precyzyjne określenie, które elementy mają być stylizowane w określony sposób.