Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

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

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Jaką transformację w CSS zastosujemy, aby tylko pierwsze litery wszystkich słów stały się wielkie?

A. underline

B. capitalize

C. uppercase

D. lowercase

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 'capitalize' jest prawidłowa, ponieważ w CSS odnosi się do właściwości text-transform, która umożliwia manipulację sposobem wyświetlania tekstu. Użycie 'capitalize' powoduje, że pierwsza litera każdego wyrazu w danym elemencie HTML zostaje zmieniona na wielką literę. Na przykład, jeśli mamy tekst "przykład tekstu", zastosowanie 'text-transform: capitalize;' przekształci go na "Przykład Tekstu". Jest to szczególnie przydatne w tworzeniu estetycznych nagłówków lub list, gdzie chcemy, aby każde słowo zaczynało się od wielkiej litery. W kontekście dobrych praktyk, używanie transformacji tekstu powinno być zgodne z zasadami dostępności, aby nie wpłynęło negatywnie na odczyt tekstu przez technologie wspomagające. Warto także pamiętać, że 'capitalize' działa na każdy wyraz, co czyni go bardziej elastycznym w kontekście stylizacji niż inne opcje, takie jak 'uppercase', które zmieniają wszystkie litery na duże, co mogłoby zniekształcić zamierzony przekaz tekstowy.

Pytanie 2

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

W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

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

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź numer 2 jest poprawna, ponieważ używa odpowiednich znaczników HTML do formatowania tekstu. Znacznik <i> stosowany jest do oznaczania tekstu kursywą, a znacznik <b> do pogrubienia. W tym przypadku tekst 'paragrafie' i 'sposoby formatowania' są otoczone znacznikiem <i>, co zgodnie z HTML oznacza kursywę. Natomiast słowo 'zobaczysz' jest otoczone zarówno <b> jak i <i>, co skutkuje pogrubieniem i kursywą jednocześnie. Taka struktura jest zgodna z konwencją hierarchii znaczników, która mówi, że znaczniki mogą być zagnieżdżane, aby uzyskać różne efekty formatowania. HTML pozwala na takie zagnieżdżanie, co jest częścią elastyczności tego języka w prezentowaniu treści. Dobrą praktyką jest także zapewnienie dostępności, gdzie znaczniki semantyczne mają szczególne znaczenie. Wykorzystanie <b> i <i> zamiast odpowiednio <strong> i <em> jest bardziej stylistyczne niż semantyczne, co ma swoje uzasadnienie w kontekście projektowym, ale w nowoczesnych praktykach powinno się również rozważyć znaczenie semantyczne i używać <strong> i <em> dla lepszego zrozumienia przez czytniki ekranowe.

Pytanie 3

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

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

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

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

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

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

Brak odpowiedzi na to pytanie.

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

Pytanie 4

Aby wykorzystać skrypt znajdujący się w pliku przyklad.js, konieczne jest połączenie go ze stroną przy użyciu kodu

A. <script link="przyklad.js"></script>

B. <script src="przyklad.js"></script>

C. <link rel="script" href="przyklad.js">

D. <script>przyklad.js</script>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <script src="przyklad.js"></script> jest naprawdę na miejscu, bo użycie atrybutu 'src' w znaczniku <script> to taki standardowy sposób dołączania zewnętrznych skryptów JS do HTML-a. Atrybut 'src' mówi przeglądarce, gdzie znaleźć ten skrypt, więc może go załadować i wykonać. Dzięki temu, skrypt z pliku 'przyklad.js' wchodzi w interakcję ze stroną i może dodawać różne funkcje, jak na przykład reagowanie na działania użytkownika czy manipulowanie elementami na stronie. Pamiętaj, że najlepiej dołączać skrypty na końcu dokumentu, zaraz przed </body>, bo wtedy cała zawartość strony ładuje się najpierw. Warto też pomyśleć o atrybucie 'defer' lub 'async', żeby lepiej zoptymalizować ładowanie skryptów i nie blokować renderowania strony. Na przykład, <script src="przyklad.js" defer></script> pozwoli na asynchroniczne ładowanie, co z pewnością poprawia wydajność.

Pytanie 5

Grafik pragnie przekształcić obraz JPG na format PNG bez utraty jakości, tak aby wszędzie tam, gdzie w oryginalnym obrazie występuje kolor biały, w docelowej wersji była przezroczystość. W tym celu powinien

A. dodać kanał alfa

B. przekształcić obraz w odcienie szarości

C. zaimportować obraz do edytora grafiki wektorowej

D. obniżyć rozdzielczość obrazu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Dodanie kanału alfa do obrazu jest kluczowym krokiem, aby przekształcić JPEG w PNG z zachowaniem przezroczystości. Format PNG obsługuje kanał alfa, który może przechowywać informacje o przezroczystości każdego piksela, co oznacza, że można zdefiniować, które części obrazu są w pełni widoczne, a które są całkowicie przezroczyste. W praktyce, po dodaniu kanału alfa, można użyć narzędzi edycyjnych, aby ustawić białe obszary na przezroczyste. Na przykład w programie GIMP lub Adobe Photoshop, można użyć narzędzia 'Magiczne różdżka' do zaznaczenia białego tła, a następnie usunąć je, co zamieni białe piksele na przezroczystość. Istotne jest, aby pamiętać, że JPEG nie wspiera przezroczystości, dlatego przekształcenie do formatu PNG jest niezbędne. Dobrą praktyką jest zawsze pracować na kopii oryginalnego obrazu, aby móc wrócić do źródłowego pliku, jeśli zajdzie taka potrzeba.

Pytanie 6

Znaczniki HTML <strong> oraz <em>, które mają na celu podkreślenie istotności tekstu, pod względem formatowania odpowiadają znacznikom

A. <b> oraz <u>

B. <i> oraz <mark>

C. <u> oraz <sup>

D. <b> oraz <i>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znaczniki HTML <strong> oraz <em> mają kluczowe znaczenie w kontekście semantyki i formatowania tekstu w dokumentach HTML. Znacznik <strong> wskazuje na tekst o zwiększonej ważności, co jest zgodne z jego domyślnym formatowaniem, które w większości przeglądarek wyświetla tekst pogrubiony. Z kolei znacznik <em> sugeruje tekst, który powinien być akcentowany w odpowiedni sposób, a jego domyślne formatowanie to kursywa. W związku z tym, ich odpowiednikami pod względem formatowania są znaczniki <b> oraz <i>. Znacznik <b> służy do pogrubienia tekstu, ale nie niesie ze sobą żadnej dodatkowej semantyki, natomiast <i> używany jest do kursywy bez wskazania na ważność. W praktyce, należy używać <strong> i <em> tam, gdzie semantyka jest kluczowa dla zrozumienia treści, a dodatkowe znaczenie przekłada się na lepsze pozycjonowanie w wyszukiwarkach oraz dostępność dla osób korzystających z technologii asystujących. Ważne jest, by przestrzegać dobrych praktyk webowych i stosować znaczniki semantyczne, co pozwoli na efektywne przekazywanie informacji zarówno użytkownikom, jak i robotom indeksującym.

Pytanie 7

W języku HTML stworzono odnośnik z symbolem #. Co się wydarzy po kliknięciu na podany link?

A. Zostanie użyty względny adres URL o nazwie dane

B. Otworzy się nowa karta przeglądarki zatytułowana dane

C. Uruchomi się skrypt o nazwie dane

D. Strona przewinie się do elementu z id o nazwie dane

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Hiperłącze z użyciem znaku # w języku HTML odnosi się do identyfikatora (id) na tej samej stronie. Gdy użytkownik kliknie ten odsyłacz, przeglądarka przewinie stronę do elementu, który ma przypisany identyfikator 'dane'. To podejście jest powszechnie stosowane w celu ułatwienia nawigacji na długich stronach, gdzie użytkownicy mogą szybko przeskakiwać do interesujących ich sekcji. Przykład praktyczny może obejmować stronę z informacjami o produkcie, gdzie poszczególne sekcje, takie jak 'Specyfikacje', 'Opinie' czy 'FAQ', mają przypisane unikalne identyfikatory. Używając hiperłączy z #, użytkownicy mogą z łatwością dotrzeć do tych sekcji bez przewijania strony manualnie. Tego typu implementacja jest zgodna z zasadami dostępności i ułatwia nawigację, co jest szczególnie ważne w projektowaniu stron przyjaznych dla użytkownika. Ważne jest również, aby identyfikatory były unikalne w obrębie strony, co zapobiega potencjalnym konfliktom i pozwala na prawidłowe przewijanie.

Pytanie 8

Podczas sprawdzania poprawności dokumentu HTML5 wyświetlił się komunikat: "Error: Element head is missing a required instance of child element title". Co to oznacza w dokumencie?

A. element <title> nie został zakończony przez </title>

B. element <title> nie jest konieczny

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

D. nie zdefiniowano wymaganego atrybutu title w znaczniku <img>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Element <title> jest kluczowym składnikiem sekcji <head> każdego dokumentu HTML5, ponieważ definiuje tytuł strony, który jest wyświetlany w pasku tytułowym przeglądarki oraz w wynikach wyszukiwania. Zgodnie z wytycznymi W3C, element <title> jest wymagany, co oznacza, że każda poprawna struktura dokumentu HTML5 musi go zawierać. Przykład poprawnej implementacji to: <head><title>Mój dokument</title></head>. Brak elementu <title> może prowadzić do niższej oceny SEO, ponieważ wyszukiwarki używają tego tytułu jako kluczowej informacji o zawartości strony. Dla deweloperów istotne jest, aby tytuł był krótki, ale zwięzły, dostarczający jasnych informacji o tematyce strony. Ponadto, dobrze skonstruowany tytuł może przyciągać użytkowników, co ma kluczowe znaczenie w kontekście UX i marketingu internetowego.

Pytanie 9

W CSS należy ustawić tło dokumentu na obrazek rys.png. Obrazek powinien się powtarzać tylko w poziomej osi. Jaką definicję powinien mieć selektor body?

A. {background-image: url("rys.png"); background-repeat: repeat-x;}

B. {background-image: url("rys.png"); background-repeat: repeat-y;}

C. {background-image: url("rys.png"); background-repeat: round;}

D. {background-image: url("rys.png"); background-repeat: repeat;}

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybrana odpowiedź {background-image: url("rys.png"); background-repeat: repeat-x;} jest poprawna, ponieważ precyzyjnie definiuje tło dokumentu jako obrazek 'rys.png', który ma się powtarzać wyłącznie w poziomie. W CSS, właściwość 'background-image' pozwala na ustawienie obrazu jako tła, a 'background-repeat' kontroluje, w jaki sposób tło się powtarza. Użycie wartości 'repeat-x' oznacza, że obrazek będzie powtarzany tylko w osi poziomej, co jest idealne dla wzorów, które powinny być rozciągnięte na całej szerokości ekranu, ale nie na wysokości. Przykładem zastosowania może być stworzenie tła z deseniem, które ma być widoczne w poziomie, np. paski lub linie, co jest powszechnie stosowane w projektowaniu stron internetowych. Zgodnie z dobrymi praktykami, warto również pamiętać, aby dostosować rozmiar obrazka do wymagań responsywności, aby zapewnić optymalne wyświetlanie na różnych urządzeniach.

Pytanie 10

Do stworzenia układu strony z trzema kolumnami umieszczonymi obok siebie, można wykorzystać styl CSS

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

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Aby stworzyć szablon strony internetowej z trzema kolumnami obok siebie, kluczowe jest zastosowanie odpowiednich właściwości CSS. Właściwość 'float' z wartością 'left' pozwala na przesunięcie elementów w lewo, co umożliwia ich równoległe wyświetlanie w poziomie. Ustawienie szerokości każdej kolumny na 33% zapewnia, że wszystkie trzy kolumny zajmą równą część dostępnej przestrzeni w kontenerze. To podejście jest zgodne z zasadami projektowania responsywnego, umożliwiając dostosowanie układu do różnych rozmiarów ekranów. Przykładowo, definiując klasę .kolumny w CSS jako '.kolumny{ float: left; width: 33%; }', uzyskujemy pożądany efekt trzech kolumn. Warto również zdefiniować kontener dla kolumn, aby uniknąć problemów z 'clearfix'. Takie podejście wspiera standardy W3C dotyczące budowy stron internetowych oraz ułatwia przyszłe modyfikacje w układzie. Dodatkowo, istotne jest, aby pamiętać o odpowiednim 'clearfix', aby kontener dostosował swoje wymiary do elementów wewnętrznych, co zapobiega problemom z układem.

Pytanie 11

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

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

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

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

D. <b>Początki HTML</b><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<hr /> stworzył<b>prototyp hipertekstowego systemu informacyjnego - <i>ENQUIRE</i></b></p>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź druga jest prawidłowa, ponieważ w XHTML stosowanie znaczników zgodnych z HTML jest kluczowe. Nagłówek <h1> wskazuje na najbardziej wyróżniający się element na stronie, co jest zgodne z prezentowanym obrazem, gdzie 'Początki HTML' jest nagłówkiem. XHTML wymaga, by wszystkie elementy były poprawnie zagnieżdżone i zamknięte, a tag <br /> jest poprawnie użyty jako samo zamykający się, co jest wymagane w XHTML. Ponadto, struktura dokumentu XHTML musi być bardziej restrykcyjna, co oznacza, że używanie semantycznych znaczników jak <h1> dla nagłówków sprzyja lepszej interpretacji struktury dokumentu przez przeglądarki i narzędzia dostępności. Poprawne użycie <b> i <i> do wyróżniania tekstu jest zgodne ze standardami, chociaż w nowoczesnym HTML5 zaleca się używanie <strong> i <em> dla semantycznego formatowania. Takie podejście wspomaga dostępność oraz ułatwia zrozumienie kodu przez inne osoby. Dobór tagów w tej odpowiedzi pokazuje zrozumienie zasad semantyki oraz poprawnej struktury dokumentów w XHTML co jest zgodne z dobrymi praktykami web developmentu.

Pytanie 12

Zastosowana w dokumencie HTML definicja multimediów sprawi, że na stronie:

<video controls>
    <source src="video1.mp4" type="video/mp4">
    <source src="video1.ogg" type="video/ogg">
    Komunikat dotyczący video
</video>

A. zostaną wyświetlone obok siebie dwa filmy z plików: video1.mp4 oraz video1.ogg.

B. pod wyświetlanym filmem zostanie wyświetlony napis „Komunikat dotyczący video”.

C. zostanie wyświetlony film z pliku video1.mp4 lub, w przypadku nierozpoznania formatu MPEG-4, film z pliku video1.ogg.

D. wyświetlony film zostanie automatycznie uruchomiony zaraz po załadowaniu strony internetowej.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest prawidłowa. Element HTML video umożliwia osadzenie filmów w stronach internetowych bez konieczności korzystania z zewnętrznych wtyczek. W przykładzie kodu HTML, który analizujemy, zauważamy, że element video zawiera atrybut controls, co umożliwia użytkownikom kontrolowanie odtwarzania filmu. Wewnątrz elementu video znajdują się dwa elementy źródła - video1.mp4 z typem video/mp4 i video1.ogg z typem video/ogg. Przeglądarka internetowa najpierw spróbuje odtworzyć plik MP4. Jeśli nie rozpozna formatu MPEG-4, spróbuje odtworzyć plik OGG. Jest to praktyczne zastosowanie technologii HTML5, która umożliwia tworzenie bardziej interaktywnych i angażujących stron internetowych. Stosowanie różnych formatów plików video jest również dobrą praktyką, ponieważ różne przeglądarki mogą obsługiwać różne formaty.

Pytanie 13

Jaką wartość w systemie RGB uzyskamy dla koloru zapisanego w kodzie heksadecymalnym: #1510FE?

A. rgb(21,16,FE)

B. rgb(21,16,254)

C. rgb(21,16,255)

D. rgb(15,10,FE)

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź rgb(21,16,254) jest poprawna, ponieważ kolor zapisany w systemie heksadecymalnym #1510FE można rozłożyć na składowe RGB. W kodzie heksadecymalnym każdy z trzech kolorów (czerwony, zielony, niebieski) jest reprezentowany przez dwie cyfry. W przypadku #1510FE, pierwsze dwie cyfry (15) odnoszą się do wartości czerwonej, drugie dwie (10) do wartości zielonej, a ostatnie dwie (FE) do wartości niebieskiej. Te wartości musimy przeliczyć na system dziesiętny: czerwony to 21 (15 w systemie szesnastkowym to 21 w dziesiętnym), zielony to 16 (10 w szesnastkowym to 16 w dziesiętnym), a niebieski to 254 (FE w szesnastkowym to 254 w dziesiętnym). Tak więc końcowy wynik to rgb(21,16,254). W praktyce, znajomość konwersji kolorów jest kluczowa w projektowaniu graficznym, stron internetowych oraz aplikacji, gdzie precyzyjne odwzorowanie kolorów jest niezbędne dla uzyskania poprawnej estetyki i spójności wizualnej. Warto zaznaczyć, że standardy takie jak sRGB są powszechnie stosowane do definiowania kolorów w cyfrowych mediach, co zapewnia zgodność i przewidywalność w różnych urządzeniach wyświetlających te kolory.

Pytanie 14

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

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

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

C. <p>akapit</p>

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

Brak odpowiedzi na to pytanie.

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

Pytanie 15

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>

A. Efekt 1.

B. Efekt 2.

C. Efekt 4.

D. Efekt 3.

Brak odpowiedzi na to pytanie.

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

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. tr { background-color: Pink; }

B. td, th { background-color: Pink; }

C. tr:hover { background-color: Pink; }

D. tr:active { background-color: Pink; }

Brak odpowiedzi na to pytanie.

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

Jakie będzie efektem zastosowanego formatowania CSS dla nagłówka trzeciego stopnia

A. kolor tekstu będzie szary

B. tło nagłówka będzie w odcieniu szarości

C. kolor tekstu będzie pomarańczowy

D. tło nagłówka będzie pomarańczowe

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź, że tło będzie pomarańczowe, jest jak najbardziej trafna. W kodzie HTML użyto atrybutu "style" w tagu <h3>, który ma wyższy priorytet niż to, co jest zapisane w sekcji <style>. Wartość background-color to "orange", więc tło nagłówka trzeciego stopnia naprawdę będzie pomarańczowe. Znamy zasady kaskadowych arkuszy stylów, które mówią, że style bezpośrednio przypisane do elementów HTML mają pierwszeństwo. Kiedy chcemy, aby nagłówki miały różne kolory w zależności od tego, gdzie są użyte, inline styles są bardzo przydatne – zwłaszcza w prototypach. Ale z drugiej strony, z mojego doświadczenia, nadmiar inline styles może skomplikować późniejsze zarządzanie kodem, dlatego lepiej trzymać się klas CSS, żeby wszystko było bardziej uporządkowane.

Pytanie 18

Symbol, który pojawia się przed adresem w pasku adresowym przeglądarki internetowej lub przy tytule otwartej karty, określany jest mianem

A. iConji

B. emoticon

C. webicon

D. favicon

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Favicon, czyli ikona ulubionej strony, to mały obrazek wyświetlany w przeglądarkach internetowych obok adresu URL, w zakładkach oraz na kartach przeglądarki. Favicon jest istotnym elementem identyfikacji wizualnej witryny, ponieważ pozwala użytkownikom na szybkie rozpoznawanie stron, które odwiedzają. Tworzenie faviconu wiąże się z określonymi standardami, ponieważ rozmiar pliku powinien wynosić 16x16 lub 32x32 pikseli. Można go zapisać w formacie .ico, .png, .gif, co zapewnia szeroką kompatybilność z różnymi przeglądarkami. Wdrożenie faviconu poprawia UX, zwiększa profesjonalizm strony i wpływa na jej rozpoznawalność. Dobrym przykładem zastosowania faviconu jest umieszczanie go na stronie głównej, co ułatwia zapamiętywanie marki oraz zwiększa szanse na powrót użytkowników do witryny. Właściwe przygotowanie faviconu oraz jego umiejscowienie w kodzie HTML (z wykorzystaniem tagu <link rel="icon" href="ścieżka_do_faviconu">) to dobrych praktyk, które warto stosować w każdej nowoczesnej aplikacji webowej.

Pytanie 19

Aby stworzyć stronę internetową, która będzie odpowiadać załączonej ilustracji, konieczne jest użycie semantycznych znaczników sekcji w języku HTML5. Jakim znacznikiem należy określić sekcję menu?

A. header

B. div

C. aside

D. nav

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <nav> w HTML5 jest przeznaczony do definiowania sekcji nawigacyjnych na stronie internetowej, takich jak menu. Użycie semantycznego znacznika <nav> jest zgodne z dobrą praktyką projektowania stron, ponieważ pomaga przeglądarkom i technologiom wspomagającym, takim jak czytniki ekranowe, lepiej zrozumieć strukturę dokumentu. Dzięki zastosowaniu <nav>, silniki wyszukiwarek mogą również bardziej efektywnie indeksować zawartość strony. Przykład użycia <nav> w praktyce: html <nav> <ul> <li><a href='#'>Strona główna</a></li> <li><a href='#'>O nas</a></li> <li><a href='#'>Kontakt</a></li> </ul> </nav>. Ten znacznik powinien być używany wszędzie tam, gdzie mamy do czynienia z głównymi elementami nawigacyjnymi strony. Semantyczne tagi w HTML5, takie jak <nav>, ułatwiają utrzymanie i obsługę kodu oraz wspierają dostępność stron internetowych zgodnie ze standardami WCAG.

Pytanie 20

Na ilustracji przedstawiono kompozycję bloków strony www. Który z elementów formatowania strony odpowiada temu układowi? (Dla uproszczenia pominięto właściwości dotyczące koloru tła, wysokości oraz czcionki)

A. Odpowiedź 1: A

B. Odpowiedź 4: D

C. Odpowiedź 3: C

D. Odpowiedź 2: B

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź B jest naprawdę na czasie! Widzisz, użyto tutaj techniki pływającego układu z CSS, czyli float i clear. Pierwszy blok pływa w lewo, ma 30% szerokości, dzięki czemu obok niego mogą stać drugi i trzeci blok, które też pływają w lewo i zajmują 70%. To pozwala na ułożenie elementów w jednej linii, o ile kontener ma wystarczająco miejsca. W sumie, float to klasyka przy układach wielokolumnowych, chociaż obecnie sporo osób korzysta z Flexboxa lub Grid Layout. Zauważ, że blok czwarty ma clear:both, więc zacznie się poniżej wcześniejszych elementów pływających. To ważne, bo dzięki temu unikamy problemów z nałożeniem się treści. Zachowanie porządku w układzie jest kluczowe, szczególnie w responsywnym web designie. Tego typu układy są całkiem popularne na stronach z wieloma kolumnami, gdzie elastyczność szerokości ma duże znaczenie.

Pytanie 21

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

A. Odpowiedź C

B. Odpowiedź D

C. Odpowiedź A

D. Odpowiedź B

Brak odpowiedzi na to pytanie.

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

Pytanie 22

Emblemat systemu CMS o nazwie Joomla! to

A. Rys. C

B. Rys. B

C. Rys. A

D. Rys. D

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłową odpowiedzią na to pytanie jest Rys. B, który przedstawia logo systemu Joomla!. Joomla! to jeden z najpopularniejszych systemów zarządzania treścią (CMS), używany do tworzenia stron internetowych i aplikacji online. Logo Joomla! składa się z czterech złączonych elementów, które symbolizują społeczność i współpracę, kluczowe wartości tej platformy open source. Joomla! oferuje wiele funkcji takich jak łatwe zarządzanie treścią, rozszerzalność przez moduły i komponenty oraz szerokie wsparcie dla różnych formatów multimedialnych. Platforma ta jest ceniona za elastyczność i możliwość dostosowania do specyficznych potrzeb projektowych, co czyni ją idealnym wyborem dla różnych typów stron, od prostych witryn po skomplikowane portale biznesowe. Wybierając Joomla! zyskujemy dostęp do społeczności deweloperów oraz bogatej bazy zasobów edukacyjnych i wsparcia technicznego. Zrozumienie znaczenia i zastosowania systemów CMS jak Joomla! jest kluczowe dla specjalistów zajmujących się tworzeniem i zarządzaniem stronami internetowymi, ponieważ umożliwia efektywną obsługę i rozwój dynamicznych treści.

Pytanie 23

Dla przedstawionego fragmentu kodu

<img src="kwiat.jpg alt="kwiat">

walidator HTML zwróci błąd, ponieważ

A. nie odnaleziono pliku kwiat.jpg

B. użyto nieznanego atrybutu alt

C. nie zamknięto cudzysłowu

D. użyto niewłaściwego znacznika do wyświetlenia grafiki

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W kodzie HTML zauważyłem mały błąd - brakuje ci domknięcia cudzysłowu dla atrybutu src. Powinno to wyglądać tak: <img src="kwiat.jpg" alt="kwiat">. No, cudzysłów jest ważny, bo bez niego przeglądarka może mieć problem z odczytaniem, gdzie kończy się wartość atrybutu. To może prowadzić do różnych, nieprzewidzianych efektów przy wyświetlaniu strony. Zasady W3C mówią, że każdy atrybut powinien być poprawnie sformatowany, żeby działało to na różnych przeglądarkach i urządzeniach. Pamiętaj też o atrybucie alt - jest kluczowy dla dostępności. Właściwe użycie cudzysłowów i dbałość o format kodu też wpływają na jego czytelność, a my przecież chcemy pisać jak najlepiej.

Pytanie 24

Systemy CMS charakteryzują się

A. możliwością programowania w zaawansowanych frameworkach dla aplikacji Web.

B. wbudowanym serwerem poczty elektronicznej.

C. wbudowanym edytorem grafiki wektorowej.

D. możliwością edycji treści bez konieczności znajomości HTML.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawnie wskazana cecha CMS to możliwość edycji treści bez konieczności znajomości HTML. Właśnie po to powstały systemy zarządzania treścią: żeby osoba nietechniczna, np. pracownik działu marketingu czy sekretariat, mogła samodzielnie aktualizować stronę WWW. W typowym CMS (WordPress, Joomla, Drupal) mamy edytor WYSIWYG przypominający Worda: pogrubienie, nagłówki, listy, wstawianie obrazków, linków. Cały kod HTML generuje się w tle automatycznie. Użytkownik widzi tekst i przyciski, a nie znaczniki typu <div>, <p> czy <a>. Z mojego doświadczenia to ogromne ułatwienie w firmach, gdzie programista nie ma czasu na każdą drobną zmianę w treści. Dobra praktyka jest taka, żeby w CMS rozdzielać warstwę treści (content) od warstwy prezentacji (szablony, CSS). Administrator, redaktor czy copywriter pracuje na treści, a programista i frontendowiec dbają o wygląd i logikę. Dzięki temu aktualizacja np. cennika, aktualności czy opisów produktów nie wymaga dotykania kodu strony. Co więcej, nowoczesne CMS-y stosują mechanizmy wersjonowania treści, workflow publikacji, uprawnienia użytkowników. Wszystko nadal bez konieczności pisania HTML, choć oczywiście możliwość podejrzenia i ręcznej edycji kodu często jest dostępna dla bardziej zaawansowanych użytkowników. W praktyce: jeśli ktoś umie obsłużyć edytor tekstu, to po krótkim przeszkoleniu zwykle bez problemu poradzi sobie z podstawową obsługą CMS i edycją treści na stronie WWW.

Pytanie 25

Który z poniższych znaczników jest częścią sekcji <head> dokumentu HTML?

A. <section>

B. <title>

C. <img>

D. <span>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <title> jest fundamentalnym elementem sekcji <head> dokumentu HTML. Jego głównym zadaniem jest określenie tytułu strony, który jest wyświetlany na pasku tytułowym przeglądarki oraz w wynikach wyszukiwania. Dobrze skonstruowany tytuł powinien być zwięzły, ale jednocześnie informacyjny, aby skutecznie przyciągnąć uwagę użytkowników. Zgodnie z wytycznymi W3C, tytuł powinien mieć od 50 do 60 znaków, aby uniknąć obcinania w wynikach wyszukiwania. Przykładem dobrze sformułowanego tytułu może być: „Jak stworzyć responsywną stronę internetową - poradnik krok po kroku”. Ważne jest, aby tytuł był unikalny dla każdej podstrony w witrynie, co nie tylko poprawia SEO, ale również ułatwia użytkownikom nawigację. W kontekście standardów i dobrych praktyk, należy również unikać umieszczania w tytule zbędnych słów kluczowych, co może być uznane za spam przez wyszukiwarki. Dobrze zaprojektowany tytuł jest kluczem do efektywnego pozycjonowania i budowania marki w sieci.

Pytanie 26

Ikona, która pojawia się przed adresem w oknie adresowym przeglądarki internetowej lub przy tytule aktywnej karty, nazywana jest

A. emoticon.

B. webicon.

C. iConji.

D. favicon.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Favicon to mała ikona, która reprezentuje stronę internetową i jest wyświetlana w przeglądarkach internetowych w polu adresowym oraz na kartach z otwartymi stronami. Jest to kluczowy element identyfikacji wizualnej witryny, który może wpływać na wrażenia użytkowników i postrzeganie marki. Favicony są zazwyczaj zapisane w formacie .ico, ale mogą również być w formatach .png, .gif, czy .jpg. Standardowo mają wymiary 16x16 pikseli lub 32x32 pikseli, co czyni je odpowiednimi do wyświetlania na różnych urządzeniach, w tym komputerach i smartfonach. Favicony są dodawane do kodu HTML strony za pomocą tagu <link rel="icon" href="url_do_faviconu" type="image/x-icon">, co pozwala przeglądarkom prawidłowo zidentyfikować i wyświetlić tę ikonę. Przykładem użycia faviconu mogą być popularne strony internetowe, takie jak Google czy Facebook, które wykorzystują swoje unikalne ikony w celu zwiększenia rozpoznawalności marki. Dobrze zaprojektowany favicon może wpłynąć na zwiększenie kliknięć w zakładki oraz poprawić nawigację użytkowników.

Pytanie 27

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 1	Komórka 2
Komórka 3	Komórka 4
Komórka 5	Komórka 6

A. <tr style="visibility: hidden">

B. <tr style="display: table-cell">

C. <tr style="clear: none">

D. <tr style="display: none">

Brak odpowiedzi na to pytanie.

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

W CSS zapisano stylizację ```css p > i {color: blue} ``` oznacza to, że kolorem niebieskim zostanie wyświetlony

A. pogrubiony tekst akapitu

B. cały tekst akapitu, niezależnie od jego stylizacji

C. wszystkie teksty nagłówków, niezależnie od formatowania

D. pochylony tekst akapitu

Brak odpowiedzi na to pytanie.

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

Pytanie 29

Na ilustracji pokazano strukturę bloków witryny internetowej. Który z elementów stylu strony jest zgodny z podanym układem? Dla uproszczenia pominięto cechy koloru tła, wysokości oraz czcionki)

A. #pierwszy{float:left; width:30%; }#drugi {clear:both; width:70%; }#trzeci {clear:both; width:70%; }#czwarty {float:left; width:100%; }

B. #pierwszy { width: 30%; }#drugi { width: 70%; }#trzeci { width: 70%; }#czwarty { width: 100%; }

C. #pierwszy {float:left; width:30%;}#drugi {float:left; width:70%;}#trzeci {float:left; width:70%;}#czwarty {clear:both; }

D. #pierwszy {float:left; width:30%; }#drugi {clear:both; width:70%; }#trzeci {float:left; width:70%; }#czwarty {clear:both; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź numer 2 jest prawidłowa, ponieważ doskonale odpowiada układowi bloków przedstawionych na rysunku. Zastosowanie właściwości CSS float:left dla wszystkich trzech pierwszych bloków pozwala na ich ułożenie w jednym rzędzie w ramach dostępnej szerokości. Pierwszy blok zajmuje 30 procent, natomiast drugi i trzeci po 70 procent szerokości, co jest zgodne z przedstawionym układem. Dodatkowo, zastosowanie clear:both dla czwartego bloku spowoduje, że rozpocznie on nowy wiersz i zajmie całą szerokość dostępną poniżej poprzednich elementów. Takie rozwiązanie jest efektywne w tworzeniu responsywnych i elastycznych układów stron internetowych. Wykorzystanie float jest powszechnie stosowane w projektowaniu front-end, choć w nowych projektach coraz częściej zastępowane przez flexbox i grid. Warto zrozumieć działanie float i clear, ponieważ pozwalają na manipulację układem elementów na stronie, co jest kluczowe w tworzeniu czytelnych i estetycznych interfejsów użytkownika. Zrozumienie tych koncepcji jest niezbędne dla profesjonalistów zajmujących się tworzeniem stron internetowych.

Pytanie 30

Atrybut value w formularzu XHTML

A. określa nazwę pola

B. ogranicza maksymalną długość pola

C. określa wartość domyślną

D. ustawia pole jako tylko do odczytu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut 'value' w polu formularza XHTML pełni kluczową rolę w określeniu wartości początkowej, która jest wyświetlana w danym polu tekstowym. W przypadku elementu <input type='text'>, wartość atrybutu 'value' jest predefiniowaną odpowiedzią, która pojawia się w polu, gdy formularz jest załadowany. To pozwala programistom na wprowadzenie domyślnych danych, co jest szczególnie przydatne w kontekście ułatwienia wprowadzania informacji przez użytkowników. Na przykład, jeśli mamy formularz, w którym użytkownik ma podać swoje imię, możemy ustawić 'value' na 'Jan', co sprawi, że pole wypełni się automatycznie tą wartością, dając użytkownikowi wskazówkę. Wartość ta może być również używana do ułatwienia wprowadzania danych w przypadku, gdy formularz jest ponownie wyświetlany po błędzie. Zgodnie z dokumentacją W3C dotyczącą XHTML, atrybut 'value' jest standardowo stosowany w formularzach, co czyni go niezbędnym narzędziem w projektowaniu interfejsów użytkownika. Odpowiednie wykorzystanie tego atrybutu przyczynia się do lepszej użyteczności aplikacji internetowych oraz zwiększa komfort użytkowników.

Pytanie 31

Jaką wartość w systemie szesnastkowym przyjmie kolor określony kodem RGB rgb(255, 128, 16)?

A. #008010

B. #ff8011

C. #ff0f10

D. #ff8010

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź #ff8010 jest prawidłowa, ponieważ kolor o wartości rgb(255, 128, 16) w systemie szesnastkowym przekłada się na poszczególne wartości RGB. Wartości te są konwertowane w sposób następujący: 255 w systemie dziesiętnym odpowiada FF w systemie szesnastkowym, 128 to 80, a 16 to 10. Zatem, łącząc te składniki, otrzymujemy #ff8010. W praktyce, kolory te są często stosowane w projektowaniu graficznym oraz tworzeniu stron internetowych, gdzie dokładne odwzorowanie kolorów jest kluczowe. Kod szesnastkowy jest powszechnie używany ze względu na swoją kompaktowość i łatwość odczytu dla programistów. Warto więc zaznaczyć, że znajomość konwersji kolorów między różnymi systemami jest ważnym elementem w pracy nad kolorystyką w projektach cyfrowych oraz w branżach zajmujących się grafiką i designem. Dobre praktyki obejmują stosowanie narzędzi do wizualizacji kolorów oraz testowanie ich na różnych urządzeniach, aby zapewnić spójność wizualną.

Pytanie 32

Jakie pola znajdują się w formularzu?

A. Textarea, Select, Input(Radio), Input(Radio), Input(Reset), Input(Submit)

B. Input(Text), Select, Input(Radio), Input(Radio), Input(Submit), Input(Reset)

C. Textarea, Option, Input(Checkbox), Input(Checkbox), Input(Submit), Input(Reset)

D. Input(Text), Input(Checkbox), Select, Select, Input(Submit), Input(Reset)

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź, którą wybrałeś, jest ok, bo wszystko trzyma się zasady formularzy z obrazka. Input(Text) to właśnie pole, w którym wpisujesz swoje nazwisko. Potem mamy Input(Select), który pozwala wybrać jedno z województw z listy – to też jest na plus. Przy Input(Radio) można wybrać jedną opcję, co dobrze pasuje do wyboru między Studiami podyplomowymi a Kursem. Input(Submit) jest do wysyłania formularza, więc tu też wszystko gra. Na końcu Input(Reset) zeruje wszystko, co jest przydatne, kiedy chcesz wyczyścić formularz. Wszystkie te elementy są zgodne z HTML5, co jest teraz standardem w tworzeniu stron. Fajnie, że formularz ma logiczne ułożenie, bo ułatwia to korzystanie z niego. Moim zdaniem, dobrze wiedzieć, jakie elementy są stosowane w formularzach, żeby wszystko działało tak jak powinno.

Pytanie 33

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

A. kolor tekstu będzie pomarańczowy

B. tło będzie w odcieniu szarym

C. kolor tekstu będzie szary

D. tło będzie pomarańczowe

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź dotycząca tła pomarańczowego wynika z zasady specyficzności CSS W przedstawionym przykładzie stylu dla elementu h3 zastosowano właściwość background-color przypisując jej wartość orange bezpośrednio w znaczniku HTML co zwiększa specyficzność takiego stylu nad stylem zdefiniowanym w sekcji style w nagłówku strony Specyficzność w CSS to mechanizm określający który styl ma pierwszeństwo w przypadku konfliktu stylów dla tego samego elementu Styl wbudowany inline ma wyższą specyficzność niż style określone w sekcjach style co oznacza że definiując background-color inline jako orange nadpisuje on wcześniej zdefiniowane style Dzięki temu można precyzyjnie kontrolować wygląd poszczególnych elementów na stronie co jest dobrą praktyką w przypadku gdy konieczne są jednorazowe zmiany stylu dla konkretnego elementu Warto jednak pamiętać że nadmierne wykorzystywanie stylów inline może prowadzić do trudności w zarządzaniu wyglądem całej strony dlatego dobrą praktyką jest używanie ich oszczędnie oraz stosowanie zewnętrznych arkuszy stylów CSS tam gdzie to możliwe

Pytanie 34

Deklaracja

<!DOCTYPE html>

informuje przeglądarkę internetową o:

A. wersji języka HTML zastosowanej w dokumencie strony internetowej.

B. indeksowaniu strony internetowej na potrzeby pozycjonowania witryny.

C. dostosowaniu strony internetowej do różnych rozmiarów urządzeń.

D. tytule strony internetowej.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Deklaracja <!DOCTYPE html> to wbrew pozorom bardzo ważny element każdej poprawnej strony internetowej. Informuje przeglądarkę, jaka wersja języka HTML została użyta w dokumencie, a w praktyce – że ma renderować stronę w trybie zgodnym ze współczesnym standardem HTML5. Dzięki temu przeglądarka nie próbuje włączać tzw. „quirks mode”, czyli trybu zgodności ze starymi, historycznymi błędami Internet Explorera, tylko stosuje aktualne zasady specyfikacji. Moim zdaniem to jest jeden z tych drobiazgów, które po prostu trzeba pisać z automatu na górze każdego pliku .html. W starszych wersjach HTML deklaracja DOCTYPE była dużo dłuższa i określała konkretne DTD (Document Type Definition), np. dla HTML 4.01 Transitional czy XHTML 1.0 Strict. W HTML5 uproszczono to do jednej, krótkiej formy: <!DOCTYPE html>. To właśnie ta linijka mówi: „to jest dokument HTML5”. Na tej podstawie silnik przeglądarki dobiera reguły parsowania, walidacji struktury i sposób interpretacji wielu elementów, np. sekcji <header>, <footer>, <section>, a także nowych atrybutów formularzy. W praktyce, gdy tworzysz nową stronę, zawsze zaczynasz od: <!DOCTYPE html> <html lang="pl"> <head>… Jeśli pominiesz DOCTYPE albo wpiszesz go błędnie, możesz mieć kłopot z tym, że strona wygląda inaczej w różnych przeglądarkach, pojawią się problemy z modelu pudełkowym CSS (box model), z obsługą nowych znaczników lub z poprawnym działaniem responsywnego layoutu. Walidatory W3C też zakładają konkretną wersję HTML na podstawie DOCTYPE i pod nią sprawdzają poprawność kodu. Z mojego doświadczenia wynika, że poprawny DOCTYPE to absolutna podstawa profesjonalnego front-endu, nawet jeśli wygląda jak coś „magicznego” na samej górze pliku.

Pytanie 35

Na przedstawionym obrazie widać wynik formatowania przy użyciu styli CSS oraz kod HTML, który go generuje. Przy założeniu, że marginesy wewnętrzne wynoszą 50 px, a zewnętrzne 20 px, jak wygląda styl CSS dla tego obrazu?

A. Rys. C

B. Rys. A

C. Rys. B

D. Rys. D

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź, Rys. C, przedstawia styl CSS, który prawidłowo definiuje marginesy i marginesy wewnętrzne obrazu. W tym przypadku margines wewnętrzny wynosi 50px, a zewnętrzny 20px, co jest zgodne z wymaganiami zawartymi w pytaniu. Kod CSS zawiera solidną linię graniczną o wartości 4px w kolorze czarnym, co jest dobrze praktykowane w projektowaniu stron internetowych, ponieważ solidna linia jest bardziej widoczna i profesjonalna niż linia przerywana. Kolor tła teal zapewnia atrakcyjny kontrast. Zastosowanie właściwego marginesu i marginesu wewnętrznego jest kluczowe w tworzeniu responsywnych układów, które są teraz standardem w branży. Poprawne ustawienie tych parametrów zapewnia estetyczny wygląd oraz prawidłowe rozmieszczenie elementów na stronie. Praktyczne zastosowanie tej wiedzy obejmuje projektowanie layoutów w CSS Grid czy Flexbox, gdzie marginesy i marginesy wewnętrzne pełnią kluczową rolę w zarządzaniu przestrzenią elementów. Właściwe wykorzystanie tych stylów wspiera tworzenie stron zgodnych ze standardami W3C, co jest fundamentem profesjonalnego web developmentu.

Pytanie 36

W semantycznym HTML odpowiednikiem elementu <b>, który nie tylko pogrubia tekst, ale także wskazuje na jego większe znaczenie, jest

A. <ins>

B. <strong>

C. <em>

D. <mark>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <strong> w HTML semantycznym służy nie tylko do pogrubienia tekstu, ale także do wskazania, że dany fragment ma większe znaczenie w kontekście semantycznym. Zgodnie z zaleceniami W3C, użycie tego znacznika poprawia dostępność treści, ponieważ technologie wspomagające, takie jak czytniki ekranu, interpretują <strong> jako tekst o podwyższonej wadze, co może pomóc w lepszym zrozumieniu struktury dokumentu przez osoby z niepełnosprawnościami. Przykładem zastosowania może być podkreślenie ważnych informacji na stronie, takich jak zasady, ostrzeżenia czy kluczowe dane, które użytkownicy powinni zauważyć. W praktyce, stosowanie elementów semantycznych, takich jak <strong>, zamiast czysto stylistycznych, jest zgodne z zasadami budowania stron przyjaznych dla użytkowników i poprawia SEO, ponieważ wyszukiwarki mogą lepiej analizować kontekst treści. Warto pamiętać, że w przypadku użycia <strong>, nie zmienia to tylko sposobu wyświetlania, ale także wzbogaca znaczenie tekstu w kontekście całej strony.

Pytanie 37

W języku HTML, aby osiągnąć efekt pogrubienia, kursywy lub zapisu w górnym indeksie, należy wpisać kod:

A. <b>pogrubiony </b><i>pochylony</i> lub w <sup>górnym indeksie</sup>

B. <b>pogrubiony <i>pochylony</i></b> lub w <sub>górnym indeksie</sub>

C. <i>pogrubiony <b>pochylony lub w </i><sup>górnym indeksie</sup>

D. <i>pogrubiony </i><b>pochylony</b> lub w <sub>górnym indeksie</sub>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest prawidłowa, ponieważ wykorzystuje odpowiednie tagi HTML do formatowania tekstu. Tag <b> jest używany do pogrubienia tekstu, co poprawia jego wyróżnienie oraz skupia uwagę czytelnika. Tag <i> służy do pisania tekstu w kursywie, co często oznacza, że tekst jest odmienny lub pełni określoną rolę, jak np. tytuł książki, podczas gdy tag <sup> jest przeznaczony do wyświetlania tekstu w górnym indeksie, co jest typowe dla oznaczeń matematycznych lub chemicznych, jak np. H₂O. W praktyce, poprawne stosowanie tych tagów jest kluczowe dla tworzenia czytelnych i estetycznych stron internetowych, zgodnych z zasadami dostępności, co zapewnia lepsze doświadczenia użytkowników. Warto również zauważyć, że użycie tych tagów jest zgodne z zasadami semantyki HTML, gdzie znaczenie każdego elementu jest jasno określone, co również wspiera SEO i ułatwia przetwarzanie strony przez roboty wyszukiwarek. Warto zapamiętać, że poprawne formatowanie tekstu nie tylko poprawia jego wygląd, ale także wpływa na jego zrozumiałość i dostępność dla szerokiego grona odbiorców.

Pytanie 38

Który styl CSS ma najwyższy priorytet ważności w zastosowaniu do elementów dokumentu HTML?

A. Zewnętrzny arkusz stylów.

B. Wewnętrzny arkusz stylów.

C. Styl importowany do wewnętrznego arkusza.

D. Styl lokalny.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawnie – najwyższy priorytet ma tzw. styl lokalny, czyli deklaracje CSS zapisane bezpośrednio w atrybucie style danego elementu HTML, np. <p style="color:red; font-weight:bold;">. W kaskadowości CSS (Cascade) przeglądarka ustala, które reguły zastosować, biorąc pod uwagę kilka czynników: ważność (normal vs !important), specyficzność selektora, kolejność wystąpienia oraz właśnie źródło stylu. Zgodnie ze specyfikacją CSS (m.in. CSS Cascade Level 4) style inline są traktowane jako bardzo specyficzne, bo dotyczą jednego, konkretnego elementu. Dlatego, jeżeli nie używamy !important, to reguła z atrybutu style nadpisze reguły zewnętrznego, wewnętrznego arkusza, a także style importowane. W praktyce: jeśli w pliku style.css ustawisz p { color: blue; }, w sekcji <style> w <head> dasz p { color: green; }, a na elemencie napiszesz <p style="color:red;">, to tekst będzie czerwony, właśnie dlatego, że styl lokalny wygrywa w kaskadzie. W projektach komercyjnych styl inline stosuje się raczej oszczędnie, bo utrudnia utrzymanie kodu i psuje rozdzielenie warstw (HTML – struktura, CSS – wygląd). Czasem jednak jest bardzo przydatny: generowane maile HTML, szybkie testy, dynamiczna zmiana wyglądu przez JavaScript (np. element.style.display = "none"). Dobrą praktyką jest opieranie się głównie na zewnętrznych arkuszach stylów i selektorach o odpowiedniej specyficzności, a styl lokalny traktować jako wyjątek albo narzędzie „ostatniej szansy”, gdy naprawdę trzeba coś nadpisać na pojedynczym elemencie.

Pytanie 39

Co należy zrobić, gdy rozmiar pliku graficznego jest zbyt duży do umieszczenia w Internecie?

A. zmniejszyć jego rozdzielczość

B. zwiększyć jego głębię kolorów

C. dodać kanał alfa

D. zapisać w formacie BMP

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zmniejszenie rozdzielczości pliku graficznego to jedna z najskuteczniejszych metod redukcji jego rozmiaru, co jest kluczowe przy publikacji w Internecie. Rozdzielczość odnosi się do ilości pikseli, które tworzą obraz, a jej zmniejszenie prowadzi do mniejszej ilości danych do przechowania. Przykładowo, zamiast publikować obraz o rozdzielczości 4000x3000 pikseli, można zmniejszyć go do 1920x1080, co drastycznie zmniejszy wielkość pliku bez zauważalnej utraty jakości wizualnej na ekranach komputera czy urządzeń mobilnych. Zmniejszenie rozdzielczości jest zgodne z najlepszymi praktykami w zakresie optymalizacji zasobów internetowych, w tym zasadami dotyczącymi czasu ładowania strony i wydajności. Dodatkowo, odpowiednia rozdzielczość może poprawić doświadczenia użytkowników, zmniejszając czas ładowania i zwiększając responsywność witryn. Warto również pamiętać o formatowaniu plików graficznych, gdzie JPEG jest często preferowanym formatem dla zdjęć, a PNG dla obrazów z przezroczystością. Stosowanie technologii takich jak responsywne obrazy również przyczynia się do efektywnej prezentacji graficznej w sieci, co ma kluczowe znaczenie w dzisiejszym świecie online.

Pytanie 40

Termin „front-end” w kontekście budowy stron internetowych odnosi się do

A. organizacji danych na serwerze WWW

B. interfejsu witryny internetowej powiązanego z technologiami działającymi w przeglądarkach internetowych

C. bazy danych zawierającej informacje prezentowane na stronie

D. działania skryptów i aplikacji realizowanych po stronie serwera WWW

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Pojęcie „front-end” odnosi się do części aplikacji webowej, która jest widoczna dla użytkownika i z którą użytkownik może wchodzić w interakcję. Front-end obejmuje wszystkie elementy interfejsu użytkownika, takie jak układ graficzny, teksty, obrazki oraz wszelkie interaktywne elementy, takie jak przyciski i formularze. Technologie używane w front-endzie obejmują HTML, CSS oraz JavaScript, które są standardami stosowanymi w tworzeniu stron internetowych. Dobrze zaprojektowany front-end nie tylko wygląda estetycznie, ale również jest responsywny, co oznacza, że dostosowuje się do różnych rozmiarów ekranów, co jest istotne w dobie urządzeń mobilnych. Przykłady zastosowania tej wiedzy obejmują tworzenie stron internetowych, rozwijanie aplikacji webowych oraz optymalizację doświadczeń użytkowników poprzez testy A/B oraz analizy UX. Dobre praktyki w front-endzie to także dostępność (wcag) oraz optymalizacja wydajności, co przekłada się na lepsze doświadczenia użytkowników oraz wyższe pozycje w wynikach wyszukiwania.

Rozpocznij nowy egzamin

Powrót do strony głównej