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: 21 kwietnia 2026 10:36
Data zakończenia: 21 kwietnia 2026 10:56

Egzamin zdany!

Wynik: 27/40 punktów (67,5%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

W znaczniku meta w miejsce kropek należy wpisać

A. język dokumentu

B. streszczenie treści strony

C. informację o dostosowaniu do urządzeń mobilnych

D. nazwa edytora

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 2

Jaki jest efekt działania programu w JavaScript?

var osoba = prompt("Podaj imię", "Adam");

A. przypisanie do zmiennej osoba wartości "Adam"

B. uzyskanie z formularza wyświetlonego na stronie HTML imienia "Adam"

C. otwarcie okna z polem do edycji, w którym znajduje się domyślny tekst "Adam"

D. pojawi się okno z pustym polem do edycji

Funkcja prompt w JavaScript jest używana do wyświetlania okna dialogowego z polem edycyjnym pozwalającym użytkownikowi na wprowadzenie danych. W tym przypadku funkcja prompt przyjmuje dwa argumenty: pierwszy to komunikat wyświetlany użytkownikowi, a drugi to domyślna wartość w polu tekstowym. Kod var osoba = prompt('Podaj imię' 'Adam') otwiera okno dialogowe z tekstem Podaj imię i domyślnie wpisanym w polu tekstowym imieniem Adam. Domyślna wartość jest przydatna w sytuacjach gdzie chcemy zasugerować użytkownikowi pewne dane które mogą być dla niego odpowiednie lub często używane. Jest to wygodne rozwiązanie w aplikacjach internetowych pozwalające na szybkie i intuicyjne wprowadzanie danych przez użytkownika. Zastosowanie prompt jest przykładem interakcji między użytkownikiem a stroną internetową co jest kluczowym elementem dynamicznych aplikacji webowych. Ważne jest jednak by pamiętać że funkcja prompt może być blokowana w niektórych przeglądarkach dlatego jej użycie powinno być dobrze przemyślane i ewentualnie zastąpione bardziej nowoczesnymi rozwiązaniami takimi jak formularze HTML z odpowiednimi atrybutami i stylizacjami.

Pytanie 3

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

border-radius: 20%;

To jest paragraf, To jest paragraf, To jest paragraf, To jest paragraf, To jest paragraf

A. D.

B. C.

C. B.

D. A.

Dobra robota! Zgadłeś, że chodziło o akapit z tą właściwością CSS 'border-radius: 20%;'. Ta właściwość faktycznie zaokrągla rogi elementów, co wygląda super i sprawia, że strona jest bardziej przyjemna dla oka. Widzisz, akapit B ma te zaokrąglone rogi, a to dokładnie to, co daje nam ten styl CSS. W rzeczywistości, tylko B jest tak zrobiony na obrazku, więc wiesz, że tam zastosowano 'border-radius'. Ta wartość '20%;' mówi nam, jak mocno rogi mają być zaokrąglone. Takie rzeczy są ważne w CSS, żeby strony wyglądały estetycznie i nowocześnie.

Pytanie 4

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. marginesy wewnętrzne wszystkich komórek wyniosą 30 px

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

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

Analizując podane odpowiedzi, konieczne jest zrozumienie, jak działa specyficzność w CSS. Częstym błędem jest zakładanie, że reguły zdefiniowane w sekcji style zawsze przeważają nad innymi. Jednak style inline, czyli te bezpośrednio przypisane do elementu HTML, mają wyższy priorytet. Dlatego komórka z napisem Anna, mimo że wszystkie komórki td mają globalnie zdefiniowany padding 30px, będzie mieć padding 10px, ponieważ zapis style="padding: 10px;" bezpośrednio przypisany do niej nadpisuje regułę globalną. Myślenie, że marginesy wszystkich komórek będą równe 30px, jest błędem wynikającym z niezrozumienia priorytetów CSS. Podobnie, założenie, że wszystkie komórki mają padding 10px, ignoruje fakt, że tylko dla jednej komórki użyto stylu inline. Zrozumienie tych mechanizmów jest kluczowe dla efektywnego stylowania stron internetowych. Zasadą dobrych praktyk jest stosowanie zewnętrznych arkuszy stylów, co nie tylko poprawia czytelność kodu, ale także pozwala na lepsze zarządzanie stylem całej witryny. Użycie stylów inline powinno być ograniczone do wyjątkowych przypadków, gdzie konieczne jest szybkie nadpisanie stylu, co jednak może prowadzić do mniej optymalnego kodu w dłuższej perspektywie.

Pytanie 5

Zademonstrowano efekt stylizacji CSS oraz kod HTML. W jaki sposób należy ustawić styl, aby uzyskać takie formatowanie?

A. p::first-line {font-size: 200%; color:brown;}

B. #first-line {font-size: 200%; color:brown;}

C. .first-line {font-size: 200%; color:brown;}

D. p.first-line {font-size: 200%; color:brown;}

Odpowiedź p::first-line {font-size: 200%; color:brown;} jest prawidłowa, ponieważ selektor ::first-line w CSS służy do formatowania pierwszej linii tekstu wewnątrz elementu blokowego, takiego jak <p>. W tym przypadku formatowanie odnosi się do zmiany rozmiaru czcionki na 200% i koloru na brązowy, co jest zgodne z efektem prezentowanym na obrazie. Jest to powszechna praktyka, gdy chcemy wyróżnić pierwszą linię tekstu, nadając jej specjalny wizualny akcent. Warto zaznaczyć, że selektory pseudo-klasowe, jak ::first-line, są częścią specyfikacji CSS i umożliwiają bardziej precyzyjne i kontekstualne formatowanie treści, co jest zgodne z najlepszymi praktykami w projektowaniu stron internetowych. Tego typu rozwiązania zwiększają czytelność i estetykę tekstu. W praktyce, stosowanie ::first-line jest szczególnie przydatne w projektach wymagających subtelnych wyróżnień tekstowych, takich jak artykuły prasowe, blogi czy strony promujące treści literackie. Taki styl programowania jest zgodny z zaleceniami W3C, co czyni go nie tylko efektywnym, ale i standardowym podejściem w tworzeniu nowoczesnych stron internetowych.

Pytanie 6

Jak wygląda poprawny zapis znaczników, który jest zgodny z normami języka XHTML i odpowiada za łamanie linii?

A. </ br>

B. </br/>

C. <br/>

D. <br/>

Zapis znacznika </ br> jest niepoprawny, ponieważ nie można w ten sposób zamknąć znacznika, który nie ma zawartości. W XHTML wszystkie tagi muszą być poprawnie sformatowane, a takie umieszczenie spacji w znaczniku zamknięcia oraz użycie nieodpowiedniego formatu są całkowicie niezgodne z wymaganiami standardów. Kolejną niepoprawną koncepcją jest użycie </br/> - chociaż syntaktyczna forma jest bliska poprawnej, znaczniki otwierające i zamykające muszą mieć odpowiednie konteksty. W przypadku znaczników samozamykających się, takich jak <br/>, nie ma potrzeby umieszczania pary znaczników, ponieważ ich funkcjonalność polega na wstawieniu łamania linii, a nie na wytwarzaniu dodatkowego bloku. Ostatnią z wymienionych odpowiedzi, <br>, również nie jest zgodna z odpowiednim formatowaniem XHTML, ponieważ brakuje ukośnika, co czyni go niepoprawnym w kontekście stricte przestrzegania standardu. Podstawowym błędem w myśleniu, który prowadzi do tych niepoprawnych wniosków, jest niewłaściwe zrozumienie zasady samozamykania znaczników oraz ich roli w strukturze dokumentu HTML. Ignorowanie zasadności i standardów tworzenia HTML prowadzi do wielu problemów z interpretacją kodu przez różne środowiska oraz przeglądarki, co wpływa na ostateczną jakość i dostępność stron internetowych.

Pytanie 7

Jakie polecenie HTML powinno być zastosowane, aby sformatować akapit tekstu?

Tekst może być zaznaczony albo istotny dla autora

A. <p>Tekst może być <mark>zaznaczony albo <em>istotny</em> dla autora</mark></p>

B. <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>

C. <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny dla autora</p>

D. <p>Tekst może być <mark>zaznaczony albo <i>istotny</i> dla autora</mark></p>

Odpowiedź druga jest prawidłowa, ponieważ stosuje poprawną składnię HTML do oznaczenia fragmentów tekstu z różnym formatowaniem. Element <p> służy do definiowania paragrafu, w którym tekst jest umieszczony. Element <mark> używany jest do oznaczania tekstu, który powinien być zwrócony uwagę czytelnika, poprzez podkreślenie go kolorem tła. Z kolei <em> jest przeznaczony do oznaczenia tekstu, który ma zostać wyróżniony jako istotny, zazwyczaj poprzez użycie kursywy. Użycie tych elementów w połączeniu z zamykającymi tagami, jak w odpowiedzi drugiej, jest zgodne z zaleceniami standardów HTML5, które kładą nacisk na semantyczne znaczenie znaczników. To podejście wspiera dostępność oraz SEO, ponieważ pomaga czytnikom ekranowym i wyszukiwarkom lepiej zrozumieć strukturę i znaczenie treści. Praktyczne zastosowanie tych znaczników można zobaczyć na stronach internetowych, gdzie kluczowe informacje muszą być odpowiednio wyróżnione, aby poprawić doświadczenie użytkownika i przekazać istotne dane w czytelny sposób.

Pytanie 8

Strona internetowa powinna mieć zorganizowaną strukturę bloków. Aby osiągnąć ten układ, należy przypisać sekcjom odpowiednie właściwości w ten sposób:

A. float tylko dla bloków: 2, 3, 4; clear dla bloku 5

B. float jedynie dla bloków: 3, 4; clear dla bloku 5

C. float wyłącznie dla bloku 5; clear dla bloku 2

D. float tylko dla bloku 2; clear dla bloków: 3, 4

Odpowiedź czwarta jest prawidłowa, ponieważ użycie właściwości CSS float dla bloków 2, 3 i 4 oraz właściwości clear dla bloku 5 odpowiada oczekiwanemu układowi strony. Float pozwala na ustawienie elementów obok siebie w poziomie. W tym przypadku blok 2, 3 i 4 będą umieszczone w jednej linii dzięki właściwości float: left. Blok 2 będzie zajmował więcej przestrzeni w pionie, co pozwala umieścić bloki 3 i 4 obok siebie. Blok 5 powinien znaleźć się poniżej, więc wymaga zastosowania właściwości clear: both, aby uniknąć zachodzenia na inne elementy pływające. Taki układ jest często stosowany w projektowaniu responsywnych stron internetowych, gdzie float umożliwia elastyczne dostosowanie się elementów do różnych szerokości ekranów. Warto pamiętać, że obecnie często używa się także display: flex lub grid jako nowocześniejszych sposobów układania elementów, jednak float wciąż znajduje zastosowanie w prostych układach. Zrozumienie, jak działa float i clear, jest kluczowe dla tworzenia poprawnych i estetycznych układów bloków na stronie internetowej.

Pytanie 9

W podanym przykładzie pseudoklasa hover spowoduje, że styl pogrubiony zostanie przypisany

a:hover { font-weight: bold; }

A. odnośnikowi, gdy kursor myszy na niego najedzie

B. wszystkim odnośnikom, które nie były odwiedzane

C. każdemu odnośnikowi bez względu na jego bieżący stan

D. wszystkim odnośnikom, które były wcześniej odwiedzane

Pseudoklasa hover jest jedną z najczęściej używanych pseudoklas w CSS stosowaną do stylizacji elementów HTML w momencie, gdy użytkownik najeżdża kursorem myszy na dany element. W podanym przykładzie kodu CSS zastosowano pseudoklasę hover dla elementów a czyli odnośników. Oznacza to, że gdy kursor myszy znajdzie się nad jakimkolwiek odnośnikiem, jego styl zmieni się na pogrubiony dzięki właściwości font-weight: bold. Jest to bardzo przydatne w interaktywnej stylizacji stron internetowych, ponieważ pozwala użytkownikom na wizualne odróżnienie elementów, z którymi mogą wchodzić w interakcję. Praktycznym zastosowaniem tej pseudoklasy jest zwiększenie użyteczności i estetyki strony poprzez subtelne wskazanie elementów interaktywnych, takich jak menu nawigacyjne czy linki w treści. Warto pamiętać o zachowaniu spójności stylizacji dla wszystkich stanów odnośników, co jest zalecane jako dobra praktyka w projektowaniu responsywnych interfejsów użytkownika. Pseudoklasa hover, jako część kaskadowego arkusza stylów, pozwala na dynamiczną interakcję z elementami strony, co znacząco wpływa na doświadczenia użytkownika.

Pytanie 10

Jaki znacznik powinien być zastosowany, aby wprowadzić nową linię tekstu bez tworzenia akapitu w dokumencie internetowym?

A. </br>

B. <br>

C. </b>

D. <p>

Znak <br> jest używany w HTML do wstawiania przełamania linii w tekstach, co pozwala na kontynuację pisania w tym samym akapicie bez jego formalnego kończenia. Jest to element blokowy, który nie tworzy nowego akapitu, co jest istotne w kontekście układu strony i czytelności tekstu. Przykładem zastosowania może być sytuacja, gdy chcemy umieścić kilka zdań w jednej sekcji, ale z pewnymi odstępami między nimi, na przykład: 'To jest pierwsze zdanie.<br>To jest drugie zdanie, które zaczyna się w nowej linii, ale nie jest nowym akapitem.' Zastosowanie znacznika <br> jest zgodne z zasadami semantyki HTML i sprzyja tworzeniu czytelnych i dobrze zorganizowanych treści. Praktyki branżowe zalecają stosowanie tego znacznika głównie w kontekście formatowania tekstu, w którym istotne jest zachowanie ciągłości akapitu oraz uniknięcie zbędnych przerw w treści.

Pytanie 11

Fragment kodu w języku HTML zawarty w ramce ilustruje zestawienie

A. wypunktowaną.

B. odnośników.

C. skrótów.

D. numerowaną.

Kod HTML zawierający znaczniki <ol> oraz <li> tworzy listę numerowaną ponieważ <ol> oznacza ordered list czyli listę uporządkowaną co skutkuje automatycznym numerowaniem każdego elementu w przeglądarkach internetowych. Znaczniki <li> reprezentują pojedyncze elementy listy zapewniając organizację danych w czytelnej formie. Taki sposób przedstawiania informacji jest powszechnie stosowany w tworzeniu dokumentów HTML i stron internetowych gdzie hierarchia i kolejność elementów ma kluczowe znaczenie. Za pomocą CSS można dodatkowo dostosować styl numerowania oraz wizualne aspekty listy co pozwala na większą elastyczność w projektowaniu interfejsu użytkownika. Standardy internetowe takie jak te rekomendowane przez W3C zachęcają do stosowania semantycznych znaczników co poprawia dostępność i SEO strony. Ponadto listy numerowane są użyteczne w sytuacjach gdy wymagana jest jasna kolejność wykonywania zadań lub prezentacja kroków w procesie co czyni je idealnym narzędziem zarówno w dokumentacji technicznej jak i w interaktywnych przewodnikach online.

Pytanie 12

Kolor wyrażony w modelu RGB(255, 0, 0) to

A. niebieski.

B. czerwony.

C. żółty.

D. zielony.

Wybór błędnych odpowiedzi wynika z nieporozumienia dotyczącego sposobu, w jaki model RGB reprezentuje kolory. Odpowiedzi wskazujące, że barwa ta jest niebieska lub zielona, są całkowicie nieprawidłowe, ponieważ w modelu RGB wartości dla tych kolorów wynoszą 0. Niebieski kolor w modelu RGB osiąga maksymalne natężenie, gdy jego wartość wynosi 255, a inne kolory są odpowiednio niższe, co nie ma miejsca w przypadku RGB(255, 0, 0). W przypadku zielonego koloru analogicznie, również jego wartość powinna wynosić 255, aby uzyskać czystą barwę, co znowu nie znajduje zastosowania w analizowanej barwie. Odpowiedź sugerująca, że kolor ten jest żółty, również jest błędna, ponieważ żółty w modelu RGB powstaje w wyniku równoczesnej obecności czerwonego i zielonego (np. RGB(255, 255, 0)). Typowym błędem myślowym może być błędne łączenie kolorów oraz ich wartości; użytkownicy często mylą pojęcia związane z modelami kolorów, nie zdając sobie sprawy, że każdy z kanałów RGB działa w oparciu o swoje własne natężenie. Dlatego niezwykle istotne jest zrozumienie, jak modele kolorów są konstruowane i jakie wartości odpowiadają poszczególnym barwom, aby uniknąć takich pomyłek w przyszłości.

Pytanie 13

Który z poniższych kodów HTML odpowiada opisanej tabeli? (W celu uproszczenia zrezygnowano z zapisu stylu obramowania tabeli oraz komórek)

A. Odpowiedź C

B. Odpowiedź A

C. Odpowiedź B

D. Odpowiedź D

Odpowiedź B jest prawidłowa, ponieważ wykorzystuje atrybut rowspan do połączenia dwóch wierszy w jednej kolumnie tabeli. HTML zapewnia atrybuty rowspan i colspan, które umożliwiają połączenie wielu komórek tabeli w jedną, co jest niezbędne w sytuacjach, gdy dane muszą być przedstawione w sposób bardziej przejrzysty i zwarty. W przedstawionej tabeli labelka Telefon jest wspólna dla dwóch numerów, co skutkuje koniecznością użycia rowspan=2 w komórce, która łączy dwa wiersze. Ta konstrukcja jest zgodna z dobrymi praktykami tworzenia semantycznie poprawnych i wizualnie uporządkowanych tabel w dokumentach HTML. Zastosowanie atrybutu rowspan może poprawić czytelność tabel, co jest szczególnie przydatne przy prezentacji złożonych danych w aplikacjach biznesowych czy raportach. Użycie tego podejścia pozwala na bardziej efektywne wykorzystanie przestrzeni w tabeli i jest zgodne ze standardami W3C, które promują semantykę i dostępność w sieci.

Pytanie 14

W przedstawionym stylu CSS w ramce zdefiniowano klasę uzytkownik. Tekst na stronie będzie wyświetlany czcionką w kolorze niebieskim dla

p.uzytkownik { color: blue; }

A. wszystkich akapitów

B. akapitów, którym przypisano klasę uzytkownik

C. dowolnych znaczników w sekcji <body>, które mają przypisaną klasę uzytkownik

D. wyłącznie znaczników tekstowych takich jak <p>, <h1>

Styl CSS przedstawiony w ramce definiuje regułę, która stosuje kolor tekstu niebieski do wszystkich elementów <p> posiadających klasę uzytkownik. W CSS selektory klasowe są reprezentowane przez kropkę (.), co oznacza, że tylko te elementy, które mają przypisaną daną klasę, zostaną sformatowane zgodnie z regułami stylu. W tym przypadku, ponieważ selektor to p.uzytkownik, dotyczy on tylko paragrafów oznaczonych klasą uzytkownik. To precyzyjne zastosowanie selektorów umożliwia projektantom stron internetowych dokładne dostosowanie wyglądu poszczególnych elementów. Takie podejście zapewnia większą elastyczność w projektowaniu i ułatwia zarządzanie wyglądem strony. Praktyką jest stosowanie klas, aby stylować specyficzne elementy w różny sposób, co zwiększa użyteczność i przejrzystość kodu CSS. Warto zaznaczyć, że używanie selektorów klasowych w ten sposób jest zgodne z zasadą separacji treści od prezentacji, co jest kluczowym aspektem w tworzeniu nowoczesnych i responsywnych stron internetowych.

Pytanie 15

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

A. Efekt 4

B. Efekt 3

C. Efekt 1

D. Efekt 2

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

Pytanie 16

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

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

B. <p>akapit</p>

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

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

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 17

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

A. w pikselach

B. w procentach

C. w milimetrach

D. tylko znacznikami big i small

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

Pytanie 18

Jakie polecenie jest poprawne w kontekście walidacji HTML5?

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

B. <img src = "mojPiesek.jpg" >

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

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

Odpowiedź <img src = "mojPiesek.jpg" alt = "pies"> jest poprawna zgodnie z zasadami walidacji HTML5. W tej konstrukcji atrybut 'src' jest prawidłowo sformatowany, z odpowiednimi cudzysłowami otaczającymi wartość, co jest wymagane przez standardy HTML. Dodatkowo atrybut 'alt' również jest poprawnie użyty, co jest kluczowe z perspektywy dostępności. Atrybut 'alt' zapewnia tekst alternatywny, który jest istotny dla osób korzystających z czytników ekranu oraz w sytuacjach, gdy obrazek nie może zostać załadowany. Odpowiednia walidacja kodu HTML jest nie tylko wymagana dla poprawnego działania strony, ale także wpływa na SEO i ogólną użyteczność witryny. Przykład ten pokazuje, jak ważne jest przestrzeganie standardów, aby zapewnić lepsze doświadczenia użytkowników oraz uniwersalność strony internetowej. W praktyce, stosowanie właściwych atrybutów i ich wartości powinno być zawsze brane pod uwagę podczas tworzenia treści webowych.

Pytanie 19

Do grupowania elementów w blok, można użyć znacznika

A. <param>

B. <span>

C. <div>

D. <p>

Poprawnie wskazany znacznik to <div>, bo właśnie on w HTML służy do ogólnego grupowania elementów w blok. <div> jest elementem blokowym (block-level), co oznacza, że domyślnie zajmuje całą dostępną szerokość i zaczyna się od nowej linii. Z punktu widzenia przeglądarki i CSS jest to taki „kontener”, do którego wrzucasz inne elementy, żeby sensownie ułożyć strukturę strony. Bardzo często używa się <div> do tworzenia sekcji layoutu: nagłówka strony, głównej zawartości, bocznego panelu, stopki. Przykładowo: <div class="container"> ... </div> pozwala Ci potem w CSS ostylować całą tę grupę jednym zestawem reguł, np. ustawić szerokość, marginesy, tło czy ramkę. W nowocześniejszych projektach <div> często łączy się z flexboxem albo gridem, np. <div class="grid"> jako główny kontener siatki. Z mojego doświadczenia <div> jest jednym z najczęściej używanych znaczników, ale warto pamiętać o semantyce: tam gdzie to możliwe, lepiej użyć <header>, <main>, <section>, <article>, <footer>. One też są blokowe, ale niosą dodatkowe znaczenie dla czytników ekranu i SEO. Gdy jednak potrzebujesz po prostu neutralnego kontenera blokowego, bez konkretnej semantyki, <div> jest dokładnie tym, czego szukasz i jest to zgodne z dobrymi praktykami opisanymi w specyfikacji HTML Living Standard.

Pytanie 20

Która z komórek tabeli została sformatowana przedstawionym stylem CSS zakładając, że pozostałe własności przyjmują wartości domyślne?

td {
  border: 1px solid black;
  padding: 15px;
  height: 40px;
  vertical-align: bottom;
}

dane w tabeli		dane w tabeli		dane w tabeli		dane w tabeli
Komórka 1		Komórka 2		Komórka 3		Komórka 4

A. Komórka 3.

B. Komórka 2.

C. Komórka 4.

D. Komórka 1.

Niestety, ta odpowiedź jest nieprawidłowa. Wybór jakiejkolwiek innej komórki oprócz komórki 3. oznacza niezrozumienie, jak działają style CSS w kontekście formatowania komórek tabeli. Obramowanie, padding, wysokość i wyrównanie tekstu to atrybuty CSS, które wpływają na wygląd komórki tabeli. Często błędem jest mylenie paddingu (wewnętrznego marginesu) z marginesem (zewnętrznym marginesem) lub niezrozumienie, jak działa wyrównanie tekstu. Warto pamiętać, że w CSS 'vertical-align: bottom' oznacza wyrównanie tekstu do dolnej krawędzi komórki. Wybór innej komórki, która nie spełnia podanych kryteriów, sugeruje, że nie zrozumiałeś prawidłowo tych konceptów. Radzę powtórzyć materiał dotyczący stylizacji komórek tabeli w CSS i spróbować ponownie. Pamiętaj, że kluczem do zrozumienia CSS jest praktyka, więc nie bój się eksperymentować z różnymi stylami!

Pytanie 21

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

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

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

</body>
</html>

A. braku atrybutu alt w znaczniku <img>

B. braku zamknięcia znacznika <br>

C. duplikacji nazwy pliku graficznego

D. braku zamknięcia znacznika <img>

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

Pytanie 22

Który z podanych znaczników HTML nie jest używany do formatowania tekstu?

A. <em>

B. <strong>

C. <sub>

D. <div>

<div> jest znacznikiem HTML, który służy do grupowania elementów na stronie, co ułatwia ich stylizację i manipulację w CSS oraz JavaScript. W przeciwieństwie do znaczników takich jak <em>, <sub> i <strong>, które mają konkretne zastosowania związane z formatowaniem tekstu, <div> pełni rolę kontenera, co czyni go bardziej uniwersalnym narzędziem do strukturyzacji treści. Przykładowo, można użyć <div> do utworzenia sekcji nagłówka, stopki lub bocznego panelu na stronie. Zgodnie z standardami W3C, <div> jest elementem blokowym, co oznacza, że zajmuje całą szerokość dostępną w swoim rodzicu. W praktyce, <div> pozwala na efektywne zarządzanie układem strony i jest często stosowany w połączeniu z CSS w celu uzyskania pożądanej prezentacji wizualnej. Przykład zastosowania: <div class='container'>...</div> może być użyty do zawarcia innych elementów jak <h1>, <p> czy <img>. Dzięki temu można łatwo manipulować stylem i zachowaniem tych elementów, co czyni <div> kluczowym narzędziem w nowoczesnym web designie.

Pytanie 23

Aby film wyglądał płynnie, liczba klatek (które nie nakładają się na siebie) na sekundę powinna wynosić przynajmniej w przedziale

A. 16-19 fps

B. 24-30 fps

C. 20-23 fps

D. 31-36 fps

Odpowiedź 24-30 fps jest poprawna, ponieważ standardowy zakres klatek na sekundę dla filmów wynosi właśnie 24-30 fps. W praktyce, 24 fps jest uznawane za minimum dla filmów kinowych, co pozwala uzyskać wrażenie ruchu, które ludzie uznają za płynne. Przykładowo, filmy kręcone w tej klatkażu, takie jak klasyczne produkcje Hollywood, często korzystają z techniki zwanej 'motion blur', która dodatkowo poprawia wrażenie płynności. W przypadku telewizji, większa liczba klatek może być stosowana, co pozwala na lepszą jakość obrazu podczas szybkich ruchów, jednak 30 fps to standard dla wielu programów telewizyjnych. Ważne jest również zrozumienie, że zbyt niska liczba klatek, jak na przykład 16-19 fps, może prowadzić do efektu stroboskopowego, co jest nieprzyjemne dla widza. Normy branżowe, takie jak SMPTE (Society of Motion Picture and Television Engineers), potwierdzają, że liczba klatek między 24 a 30 fps jest odpowiednia do uzyskania zamierzonego efektu wizualnego w filmie.

Pytanie 24

Kolor Chartreuse przedstawiony w formie heksadecymalnej jako #7FFF00 odpowiada wartości RGB wynoszącej

A. rgb(128, 255, 0)

B. rgb(192, 255, 0)

C. rgb(127, 255, 0)

D. rgb(64, 255, 0)

Analizując pozostałe odpowiedzi, można zauważyć, że każda z nich nieprawidłowo interpretuje wartości heksadecymalne koloru Chartreuse, co prowadzi do błędnych konwersji na model RGB. Na przykład, odpowiedź z rgb(64, 255, 0) błędnie interpretuje wartość czerwonego odcienia jako 64, podczas gdy w rzeczywistości wartość ta wynosi 127. Błąd ten wynika z nieprawidłowego przeliczenia heksadecymalnej wartości 7F na system dziesiętny, co może być spowodowane błędnym założeniem, że każdy z dwóch symboli heksadecymalnych oznacza jedną z dwóch składowych RGB. Podobnie, odpowiedzi rgb(128, 255, 0) oraz rgb(192, 255, 0) również nie zgadzają się z rzeczywistą wartością, co jest wynikiem niewłaściwego zrozumienia zasady konwersji. Wartości te są zbyt wysokie, co może sugerować, że osoba udzielająca tych odpowiedzi nie miała pełnej wiedzy o systemie kolorów. W praktyce, niepoprawne obliczenia lub pomyłki w konwersji kolorów mogą prowadzić do niezgodności w projektach graficznych, co w efekcie wpływa na estetykę oraz spójność wizualną. Dlatego kluczowe jest zrozumienie, że system heksadecymalny jest oparty na szesnastkowej reprezentacji kolorów, gdzie każdy kolor składa się z trzech wartości: czerwonej, zielonej i niebieskiej, a ich prawidłowe przeliczenie jest podstawą profesjonalnego projektowania.

Pytanie 25

Jak można w języku CSS ustawić kolor czerwony dla tekstu?

A. text-color: rgb(255,0,0);

B. color: rgb(255,0,0);

C. text-color: rgb(#FF0000);

D. color: rgb(#FF0000);

Odpowiedzi z 'color: rgb(#FF0000);', 'text-color: rgb(255,0,0);' oraz 'text-color: rgb(#FF0000);' są błędne z różnych powodów. W pierwszej odpowiedzi masz problem z tym, że '#' nie powinno być w funkcji rgb(). W RGB nie używamy znaku '#', bo to jest zarezerwowane dla notacji HEX, która nie podaje wartości liczbowych, tylko szesnastkowe znaki, takie jak '#FF0000'. Co do 'text-color', to niestety nie jest to poprawna właściwość CSS do zmiany koloru tekstu. Powinieneś używać 'color', która jest tym, co tak naprawdę definiuje kolor tekstu w CSS. Takie coś jak 'text-color' po prostu nie istnieje w CSS, co powoduje, że przeglądarki mogą mieć problemy z interpretacją stylów. Jeśli nie rozumiesz podstaw składni CSS, może to naprawdę frustrować, gdy pracujesz nad projektami webowymi, bo nieuzasadnione używanie właściwości nie przynosi efektów wizualnych, które chciałbyś uzyskać. Dlatego warto znać te zasady, żeby unikać pułapek w stylizacji stron.

Pytanie 26

Podstawowym celem korzystania z edytora WYSIWYG jest

A. szybka wizualizacja tworzonej strony

B. automatyzacja odtwarzania plików multimedialnych

C. ściąganie z Internetu pełnych portali WWW

D. wykrywanie błędów w bazie danych

Wskazanie innych odpowiedzi jako celów edytorów WYSIWYG sugeruje podstawowe nieporozumienia dotyczące ich funkcji i zastosowania. Wyszukiwanie błędów w bazie danych jest związane z procesami zarządzania danymi i programowaniem, nie zaś z edycją treści wizualnych. Edytory WYSIWYG nie służą do diagnozowania problemów z danymi, ale do tworzenia i edytowania treści, co jest zupełnie innym zadaniem. Pobieranie z Internetu kompletnych portali WWW również nie znajduje się w zakresie ich funkcji. Edytory te nie są narzędziami do pobierania, lecz do tworzenia treści, co oznacza, że ich głównym celem jest umożliwienie użytkownikom generowania zawartości, a nie przenoszenia istniejących portali. Zautomatyzowanie odtwarzania plików multimedialnych to kolejny aspekt, który nie jest bezpośrednio związany z edytorami WYSIWYG. Choć edytory mogą wspierać dodawanie multimediów, nie są one zaprojektowane do automatyzacji ich odtwarzania. Dlatego mylenie tych funkcji z celami edytorów WYSIWYG prowadzi do niewłaściwego zrozumienia ich roli w procesie tworzenia stron internetowych. Kluczowe jest zrozumienie, że WYSIWYG to narzędzia umożliwiające wizualny interfejs, a nie programy do zarządzania danymi czy automatyzacji poszczególnych procesów.

Pytanie 27

tr:nth-child(even) {background-color: #F2F2F2;}

Zastosowane formatowanie selektora tr:nth-child(even) spowoduje:

A. wypełnienie szarym tłem nieparzystych wierszy tabeli.

B. wypełnienie wszystkich wierszy tabeli szarym tłem.

C. oddzielenie wierszy nieparzystych od parzystych wierszem z szarym tłem.

D. wypełnienie szarym tłem parzystych wierszy tabeli.

W tym zadaniu kluczowe jest zrozumienie, jak dokładnie działa funkcja nth-child() w CSS oraz co oznaczają słowa kluczowe even i odd. Wiele osób intuicyjnie myli te pojęcia i zakłada, że selektor zadziała trochę „magicznie”, np. tylko na wybrane elementy, albo że numeracja zaczyna się od zera. Tymczasem przeglądarka liczy dzieci danego elementu rodzica od 1 w górę, w kolejności ich występowania w drzewie DOM. Słowo kluczowe even oznacza wszystkie elementy o indeksach parzystych: 2, 4, 6, 8 itd. Dlatego tr:nth-child(even) nie może oznaczać wypełnienia nieparzystych wierszy tabeli – do tego służyłby selektor tr:nth-child(odd). Pomylenie even z odd to bardzo typowy błąd, zwłaszcza na początku nauki CSS, bo nazwy są krótkie i łatwo je skojarzyć odwrotnie, niż trzeba. Kolejne nieporozumienie to przekonanie, że nth-child(even) obejmuje wszystkie wiersze tabeli. Gdyby chodziło o wszystkie wiersze <tr>, wystarczyłby prosty selektor tr bez nth-child. Funkcja nth-child() zawsze wybiera tylko pewien podzbiór dzieci, zgodnie z podanym wzorem, więc mówienie, że styl z taką funkcją dotyczy wszystkich elementów, jest po prostu sprzeczne z definicją tej konstrukcji w specyfikacji CSS. Pojawia się też czasem myśl, że taka reguła ma jakiś „separujący” charakter, czyli że wstawia wizualny wiersz oddzielający nieparzyste i parzyste rekordy. CSS nie dodaje nowych elementów do DOM, on tylko styluje te, które już istnieją. tr:nth-child(even) nie tworzy żadnego dodatkowego wiersza, nie wstawia separatorów, po prostu zmienia tło wybranych istniejących wierszy, zgodnie z parzystością ich indeksu. W praktyce, jeśli chcemy mieć efekt wyraźnego rozdzielenia wierszy, używa się obramowań (border), cieni lub właśnie naprzemiennego kolorowania, ale zawsze w ramach istniejących <tr>. Dobrym nawykiem jest też pamiętanie, że nth-child() liczy wszystkie dzieci danego rodzica, więc jeśli w tabeli mamy thead, tbody i tfoot, to często stosuje się selektor tbody tr:nth-child(even), żeby uniknąć nieoczekiwanych przesunięć numeracji przez nagłówki. Zrozumienie tej zasady bardzo ułatwia późniejsze korzystanie z bardziej złożonych wzorów nth-child, jak np. 2n+1 czy 3n.

Pytanie 28

Dla celu strony internetowej stworzono grafikę rysunek.jpg o wymiarach: szerokość 200 px, wysokość 100 px. Aby zaprezentować tę grafikę jako miniaturę – pomniejszoną z zachowaniem proporcji, można użyć znacznika

A. <img src="/rysunek.png" style="width: 50px">

B. <img src="/rysunek.png" style="width: 25px; height:50px;">

C. <img src="/rysunek.png" style="width: 25px; height:25px;">

D. <img src="/rysunek.png">

Odpowiedź <img src="/rysunek.png" style="width: 50px"> jest poprawna, ponieważ umożliwia wyświetlenie grafiki w formacie miniatury, zachowując proporcje oryginalnego obrazu. Przy zmniejszaniu rozmiaru obrazu, kluczowe jest ustawienie tylko jednego z wymiarów (szerokości lub wysokości), co pozwala na automatyczne dostosowanie drugiego wymiaru w taki sposób, aby nie zniekształcić proporcji. W tym przypadku, ustawienie szerokości na 50 px pozwala na proporcjonalne zmniejszenie wysokości do około 25 px, co jest zgodne z zasadą, że proporcje powinny pozostawać niezmienione. W praktyce, korzystanie z CSS do określenia rozmiarów obrazków poprawia responsywność strony oraz jej estetykę, co jest zgodne z dobrymi praktykami w web designie. Warto również pamiętać, że do poprawy ładowania stron i doświadczenia użytkownika, często zastosowanie rozmiarów odpowiednich do urządzeń mobilnych oraz desktopowych jest kluczowe.

Pytanie 29

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

A. rysunku znajdującego się w tle strony w pionie

B. rysunku osadzonego znacznikiem img

C. tła każdego znacznika akapitu

D. rysunku umieszczonego w tle strony w poziomie

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

Pytanie 30

W zamieszczonym przykładzie pseudoklasa hover sprawi, że styl pogrubiony będzie przypisany

a:hover { font-weight: bold; }

A. odnośnikowi, w momencie kiedy najechał na niego kursor myszy.

B. wszystkim odnośnikom odwiedzonym.

C. wszystkim odnośnikom nieodwiedzonym.

D. każdemu odnośnikowi niezależnie od aktualnego stanu.

Twoja odpowiedź jest prawidłowa. Pseudoklasa :hover w CSS jest używana do stylizacji elementów, na które najechał kursor myszy. Na przykład, jeżeli użyjemy stylu 'font-weight: bold;' z pseudoklasą :hover, tekst odnośnika stanie się pogrubiony tylko wtedy, kiedy na niego najedziemy kursorem. Jest to bardzo przydatne w interaktywnym designie strony internetowej, gdzie możemy w prosty sposób zasygnalizować użytkownikowi, że dany element jest aktywny lub interaktywny. Pamiętaj, że pseudoklasy w CSS są potężnym narzędziem, które pozwala nam na tworzenie zaawansowanych efektów bez konieczności użycia JavaScriptu. Znajomość i umiejętność wykorzystania pseudoklas jest zatem kluczową umiejętnością każdego front-end developera.

Pytanie 31

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

BLOK 1
BLOK 2	BLOK 3	BLOK 4
BLOK 5

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

Kod 1.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  float: left;
  width: 30%;
}
#czwarty {
  float: right;
  width: 30%;
}
#piaty {
  clear: both;
  width: 30%;
}

Kod 2.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  float: left;
  width: 30%;
}
#czwarty {
  float: right;
  width: 30%;
}
#piaty {
  float: left;
  width: 30%;
}

Kod 3.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  float: left;
  width: 30%;
}
#czwarty {
  width: 30%;
}
#piaty {
  float: right;
  width: 30%;
}

Kod 4.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  width: 30%;
}
#czwarty {
  width: 30%;
}
#piaty {
  float: right;
  width: 30%;
}

A. Kod 1.

B. Kod 4.

C. Kod 3.

D. Kod 2.

Niestety, twoja odpowiedź jest niepoprawna. Wybrałeś odpowiedź niezgodną z przedstawionym układem bloków. Analizując kod CSS, musisz zwrócić uwagę na różne aspekty, takie jak pozycja, szerokość i kolejność bloków. W tym przypadku, blok 'drugi' powinien być umieszczony po lewej stronie i zajmować 40% szerokości, bloki 'trzeci' i 'czwarty' powinny być odpowiednio po lewej i prawej stronie z szerokością 30%, a blok 'piąty' powinien być umieszczony na dole i zajmować 30% szerokości. To wszystko odpowiada układowi bloków na diagramie. Jeżeli wybrałeś inny kod, to prawdopodobnie źle zinterpretowałeś pozycję lub szerokość bloków, co jest kluczowe w tworzeniu układów stron. Ważne jest, aby zrozumieć i umieć manipulować kodem CSS, aby uzyskać pożądany układ strony. Pamiętaj, że praktyka i doświadczenie są kluczowe do zrozumienia jak kod CSS wpływa na układ i stylizację elementów strony.

Pytanie 32

Skrypt na stronę WWW stworzony w języku PHP

A. jest przetwarzany w taki sam sposób jak JavaScript

B. jest wykonywany po stronie serwera

C. może działać bez wsparcia serwera WWW

D. jest realizowany po stronie klienta

Kod PHP jest przetwarzany po stronie serwera, co oznacza, że wszystkie instrukcje napisane w tym języku są wykonywane na serwerze, a nie na komputerze klienta. Kiedy użytkownik żąda strony internetowej, serwer WWW interpretuje kod PHP, generuje odpowiedni HTML i wysyła go do przeglądarki. Dzięki temu możliwe jest dynamiczne tworzenie treści, uzależnionej od danych wejściowych użytkownika czy zawartości bazy danych. Przykładowo, w aplikacjach internetowych takich jak systemy zarządzania treścią (CMS) czy platformy e-commerce, PHP pozwala na generowanie różnorodnych widoków i interakcji w oparciu o aktualne informacje. Kluczowym aspektem dobrej praktyki w programowaniu w PHP jest separacja logiki aplikacji od warstwy prezentacji, co wspiera łatwiejsze zarządzanie kodem i jego utrzymanie. Warto również zaznaczyć, że PHP współpracuje z różnymi systemami baz danych, co umożliwia przechowywanie i przetwarzanie dużych ilości danych. Na przykład, w typowej aplikacji webowej można wykorzystać PHP do komunikacji z bazą MySQL, co pozwala na dynamiczne ładowanie treści w odpowiedzi na interakcje użytkownika.

Pytanie 33

Który z poniższych zapisów CSS zmieni tło bloku na odcień niebieskiego?

A. div {border-color:blue;}

B. div {shadow:blue;}

C. div {color:blue;}

D. div {background-color:blue;}

Zapis 'div {background-color:blue;}' jest jak najbardziej na miejscu. Właściwość 'background-color' jest kluczowa, bo ustawia kolor tła dla elementów blokowych w CSS. Kiedy używasz 'blue' jako wartości, to mówisz, że tło ma być niebieskie. Ta właściwość jest częścią tego całego systemu CSS, który decyduje, jak powinny wyglądać elementy HTML. Ustawienie koloru tła jest ważne, bo wpływa na wygląd strony i to, jak kontrastują ze sobą tekst i tło, co jest istotne, by strona była dostępna dla każdego. Jeśli chciałbyś zmienić kolor tła, możesz korzystać z różnych wartości, takich jak kody HEX (np. #0000FF) albo RGB (np. rgb(0, 0, 255)). Możesz to zobaczyć w praktyce, na przykład: <div style='background-color:blue;'>Treść</div>, co ustawi tło 'diva' na niebieskie.

Pytanie 34

Wskaż zapis stylu CSS formatujący punktor list numerowanych na wielkie cyfry rzymskie, a list punktowanych na kwadraty.

A. ol { list-style-type: upper-alpha; }
   ul { list-style-type: disc; }

B. ol { list-style-type: square; }
   ul { list-style-type: upper-roman; }

C. ol { list-style-type: disc; }
   ul { list-style-type: upper-alpha; }

D. ol { list-style-type: upper-roman; }
   ul { list-style-type: square; }

A. A.

B. C.

C. B.

D. D.

Niestety, twoja odpowiedź nie jest prawidłowa. Wydaje się, że mogło wystąpić pewne nieporozumienie w zakresie formatowania list w CSS. Właściwość, której prawdopodobnie nie zrozumiałeś to list-style-type. Jest to kluczowa właściwość do definiowania wyglądu punktora list. W tym konkretnym pytaniu, dla listy numerowanej (ol) powinniśmy użyć wartości 'upper-roman', która odpowiada wielkim cyfrom rzymskim. Dla listy punktowanej (ul) powinniśmy użyć wartości 'square', co daje efekt punktów w formie kwadratów. Pamiętaj, że zrozumienie i umiejętność manipulowania różnymi właściwościami CSS jest kluczem do tworzenia atrakcyjnych i funkcjonalnych stron internetowych. Spróbuj ponownie, kiedy tylko będziesz gotowy!

Pytanie 35

Wskaź poprawną formę kodowania polskich znaków w pliku HTML?

A. <meta charset="UTF-8">

B. <meta char set= "UTF-8">

C. <meta "content=UTF-8">

D. <meta content='UTF8'>

Odpowiedź <meta charset="UTF-8"> to strzał w dziesiątkę! To zgodny z nowoczesnymi standardami HTML sposób na określenie kodowania znaków w dokumencie. Dzięki temu, że używamy atrybutu 'charset' z wartością 'UTF-8', mówimy przeglądarkom, że tekst powinien być interpretowany według tego kodowania. UTF-8 jest super popularne, bo obsługuje wszystkie znaki w Unicode. To oznacza, że możemy pisać wszystkie polskie znaki diakrytyczne, czyli te jak ą, ć, ę, ł itd., bez obaw o błędy w wyświetlaniu. Jeśli wstawisz ten tag w sekcji <head> swojego dokumentu HTML, masz pewność, że strona będzie dobrze wyglądać w różnych przeglądarkach i na różnych urządzeniach. Dobrze jest umieszczać go na początku sekcji <head>, żeby uniknąć problemów z pokazywaniem treści. Co więcej, korzystanie z UTF-8 jest rekomendowane przez W3C, więc to naprawdę dobry wybór dla nowoczesnych aplikacji webowych.

Pytanie 36

Jakie oprogramowanie NIE JEST systemem do zarządzania treścią (CMS)?

A. Mambo

B. WordPress

C. Apache

D. Joomla

Joomla, WordPress i Mambo to systemy zarządzania treścią, które umożliwiają użytkownikom tworzenie oraz zarządzanie treściami na stronach internetowych. Każdy z tych CMS-ów ma swoje unikalne cechy, które przyciągają różne grupy użytkowników. Na przykład, Joomla jest często wybierana do bardziej złożonych projektów, które wymagają zaawansowanego zarządzania użytkownikami i treściami, podczas gdy WordPress jest szczególnie popularny wśród blogerów i małych firm ze względu na swoją prostotę i bogaty ekosystem wtyczek. Mambo, z kolei, był jednym z pierwszych systemów CMS, który zyskał popularność, jednakże jego rozwój został w pewnym momencie wstrzymany. Wybór jednego z tych systemów jako niewłaściwego może wynikać z nieporozumienia dotyczącego funkcji i zastosowania tych narzędzi. Często użytkownicy mylą rolę serwera, który hostuje aplikację, z rolą samej aplikacji. Zrozumienie, że Apache jest serwerem, a nie systemem zarządzania treścią, jest kluczowe. W kontekście projektowania i wdrażania rozwiązań internetowych, ważne jest, aby dostrzegać różnice między infrastrukturą a aplikacjami, które na niej działają. Właściwe zrozumienie tych konceptów pozwala na lepsze projektowanie architektury systemów oraz lepsze dostosowanie narzędzi do konkretnych potrzeb projektu.

Pytanie 37

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

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

B. tr { background-color: Pink; }

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

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

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 38

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

A. Styl importowany do wewnętrznego arkusza.

B. Wewnętrzny arkusz stylów.

C. Styl lokalny.

D. Zewnętrzny arkusz stylów.

W tym zagadnieniu kluczowe jest zrozumienie, jak działa kaskada CSS i co faktycznie oznacza „priorytet ważności”. Wiele osób intuicyjnie zakłada, że skoro zewnętrzny arkusz stylów jest głównym źródłem stylowania projektu, to właśnie on ma największą moc. Inni z kolei myślą, że wewnętrzny arkusz w <style> w dokumencie HTML jest ważniejszy, bo jest bliżej elementu. Spotyka się też przekonanie, że style importowane przez @import do wewnętrznego arkusza są traktowane jako coś „bardziej aktualnego”. Wszystkie te intuicje mijają się z tym, jak faktycznie działa specyfikacja CSS. Z perspektywy przeglądarki istnieją trzy główne źródła stylów autora strony: zewnętrzne pliki .css, wewnętrzne style w sekcji <style> oraz style lokalne w atrybucie style na konkretnym elemencie. Do tego dochodzą jeszcze style domyślne przeglądarki i ewentualne style użytkownika, ale w typowym projektowaniu stron WWW skupiamy się na stylach autora. Kaskada bierze pod uwagę kilka kroków: najpierw ważność (czy jest !important), potem pochodzenie, następnie specyficzność selektora, a na końcu kolejność deklaracji. Jeśli porównujemy odpowiedzi w tym pytaniu, wszystkie dotyczą stylów autora bez !important, więc decyduje właśnie źródło i specyficzność. Zewnętrzny arkusz stylów i wewnętrzny arkusz w <style> mają w praktyce ten sam poziom „źródła”, różnią się tylko kolejnością ładowania i tym, że reguły z <style> zwykle nadpisują wcześniejsze z plików .css, jeśli mają taką samą specyficzność. Style importowane przez @import traktowane są jakby były wczytane wcześniej, więc często mają nawet mniejszy wpływ, bo są nadpisywane przez późniejsze reguły. Natomiast styl lokalny, czyli atrybut style na elemencie, ma znacznie wyższą specyficzność i to on wygrywa, o ile nie pojawiają się reguły z !important. Typowy błąd myślowy polega na mieszaniu „miejsca zapisania” z „ważnością w kaskadzie”: to, że plik zewnętrzny jest głównym nośnikiem stylów w projekcie, nie oznacza, że ma największy priorytet. Dobra praktyka front-endowa wręcz odradza nadużywanie stylu lokalnego, ale to, że coś jest niezalecane, nie zmienia faktu, że technicznie ma najwyższy priorytet spośród podanych opcji. Warto o tym pamiętać, zwłaszcza przy debugowaniu sytuacji, w których styl „nie działa” – bardzo często blokuje go właśnie jakiś inline style, który został dodany ręcznie lub przez JavaScript.

Pytanie 39

Jakie pola znajdują się w formularzu?

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

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

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

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

W pozostałych opcjach są błędy w dobieraniu typów pól formularza, które nie pasują do tego, co jest pokazane na przykładzie. W pierwszej opcji dwa Input(Checkbox) są na pewno nietrafione, bo checkboxy pozwalają na zaznaczenie kilku opcji, a tu powinna być tylko jedna – Studia podyplomowe lub Kurs, a to powinno być Input(Radio). Checkboxy używa się, kiedy można wybrać więcej niż jedną opcję, a w tym formularzu to się nie sprawdza. Druga opcja ma Input(Text) i Select, oraz dwa Input(Radio), co teoretycznie jest poprawne, ale nie ma tam żadnych błędów, więc jest ok. W trzeciej opcji Textarea, który jest do wieloliniowego tekstu, nie ma sensu w przypadku prostego pola jak Nazwisko. Na końcu, czwarta opcja z podwójnym Select jest niepoprawna, bo w formularzu powinien być tylko jeden do wyboru województwa. Takie pomyłki w użyciu elementów formularza mogą wynikać z braku zrozumienia różnic między Inputami, jak Radio, Checkbox i Select. Fajnie by było zrozumieć, kiedy jakiego elementu używać, żeby formularze nie były skomplikowane dla użytkowników oraz zgodne z HTML5. To ważne, żeby wszystko działało bez problemów i było intuicyjne w korzystaniu z aplikacji internetowych.

Pytanie 40

Którą technologię poleca się przy tworzeniu serwisów WWW, tak aby zmiany w treści można było wykonywać bez potrzeby ich kodowania, przez użytkowników bez kompetencji programistycznych?

A. CMS

B. SSL

C. FTP

D. SEO

Prawidłowa odpowiedź to CMS, czyli Content Management System – system zarządzania treścią. W praktyce chodzi o takie oprogramowanie (np. WordPress, Joomla, Drupal), które pozwala edytować stronę WWW przez przeglądarkę, bez dotykania kodu HTML, CSS czy PHP. Użytkownik loguje się do panelu administracyjnego, dostaje prosty edytor przypominający Worda i może dodawać newsy, podstrony, zdjęcia, pliki do pobrania. To dokładnie rozwiązuje problem opisany w pytaniu: zmiany w treści wykonują osoby nietechniczne, a programista przygotowuje tylko szablon i funkcjonalność. Moim zdaniem to jeden z kluczowych standardów w branży – praktycznie każdy profesjonalny serwis firmowy, portal informacyjny, blog czy sklep internetowy stoi na jakimś CMS-ie lub systemie pokrewnym (np. headless CMS). Dzięki temu rozdziela się warstwę prezentacji (frontend) od warstwy treści i logiki biznesowej. Dobra praktyka jest taka, żeby nie „twardo” wpisywać treści w pliki HTML/PHP, tylko trzymać je w bazie danych i udostępniać przez panel CMS. Upraszcza to utrzymanie, pozwala na wersjonowanie treści, pracę kilku redaktorów naraz, zarządzanie uprawnieniami, a nawet planowanie publikacji w czasie. Z mojego doświadczenia, dobrze wdrożony CMS to ogromna oszczędność czasu dla programistów – nie muszą oni za każdym razem poprawiać tekstu czy wymieniać obrazka, tylko skupiają się na rozwoju funkcji. Redaktorzy mogą bez stresu pracować na stagingu, sprawdzać podgląd, korzystać z szablonów bloków, a potem jednym kliknięciem opublikować treść. To też sprzyja zgodności z dobrymi praktykami SEO, bo wiele CMS-ów ma wbudowane moduły do ustawiania meta tagów, przyjaznych adresów URL czy mapy strony.

Rozpocznij nowy egzamin

Powrót do strony głównej