Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

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

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

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ź D

B. Odpowiedź B

C. Odpowiedź A

D. Odpowiedź C

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 2

Jaki jest efekt działania programu w JavaScript?

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

A. pojawi się okno z pustym polem do edycji

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

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

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

Brak odpowiedzi na to pytanie.

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

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 wyłącznie dla bloku 5; clear dla bloku 2

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

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

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

Brak odpowiedzi na to pytanie.

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

W CSS zapis w formie: p{background-image: url"rysunek.jpg")} spowoduje, że rysunek.png stanie się

A. tłem całej witryny

B. pokazany, jeśli w kodzie użyty będzie znacznik img

C. tłem każdego bloku tekstowego

D. wyświetlany obok każdego bloku tekstowego

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis p{background-image: url('rysunek.jpg')} oznacza, że każdy , czyli paragraf, dostanie jako tło obrazek o nazwie rysunek.jpg. To jest po prostu sposób, żeby nadać każdyemu paragrafowi ten sam wygląd. Działa to świetnie, gdy chcesz, żeby cały tekst miał spójny styl czy dodać coś wizualnego do treści. Ważne, żeby ten plik rysunek.jpg był w dobrym miejscu, bo jak go nie znajdziesz, to przeglądarka go nie wczyta. Można to wykorzystać, żeby strona wyglądała bardziej estetycznie i przyciągała wzrok – każdy paragraf z własnym tłem na pewno sprawi, że będzie się lepiej czytało. Możesz też bawić się dodatkowymi właściwościami w CSS, jak background-repeat czy background-size, bo to otwiera drzwi do jeszcze ciekawszych efektów wizualnych.

Pytanie 5

Na podstawie filmu wskaż, która cecha dodana do stylu CSS zamieni miejscami bloki aside i nav, pozostawiając w środku blok section?

A. nav { float: left; } aside { float: left; }

B. aside {float: left; }

C. nav { float: right; }

D. nav { float: right; } section { float: right; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłowa odpowiedź opiera się na tym, jak działają własności float w CSS i w jakiej kolejności przeglądarka renderuje elementy blokowe. Jeśli w dokumencie HTML kolejność znaczników to np. <aside>, potem <section>, a na końcu <nav>, to bez dodatkowego stylowania wszystkie trzy ustawią się pionowo, jeden pod drugim, w tej właśnie kolejności. Dodanie float zmienia sposób, w jaki elementy „odpływają” od normalnego przepływu dokumentu i jak układają się obok siebie. W stylu nav { float: right; } section { float: right; } sprawiamy, że zarówno nav, jak i section są przesuwane do prawej krawędzi kontenera, natomiast aside (bez float) pozostaje w normalnym przepływie, czyli z lewej strony. Ponieważ przeglądarka układa elementy w kolejności występowania w kodzie, najpierw wyrenderuje aside po lewej, potem section „odpłynie” w prawo, a na końcu nav też „odpłynie” w prawo, ustawiając się po prawej stronie, ale dalej od góry niż section. Efekt wizualny jest taki, że po lewej mamy aside, po prawej nav, a section ląduje między nimi, dokładnie tak jak było pokazane na filmie. Moim zdaniem to zadanie dobrze pokazuje, że przy floatach zawsze trzeba myśleć o trzech rzeczach naraz: kolejności elementów w HTML, kierunku „pływania” (left/right) oraz o tym, które elementy pozostawiamy w normalnym przepływie. W praktyce w nowoczesnych projektach częściej używa się flexboxa albo CSS Grid do takich układów, bo są czytelniejsze i mniej problematyczne. Przykładowo, zamiast kombinować z float, można by użyć display: flex; na kontenerze i ustawić order dla aside i nav. Float nadal jednak pojawia się w starszych layoutach i w zadaniach egzaminacyjnych, więc warto dobrze rozumieć jego zachowanie, choćby po to, żeby poprawnie modyfikować istniejące style lub naprawiać „rozjechane” układy w starszych projektach.

Pytanie 6

Znak <s> w HTML powoduje

A. pochylenie tekstu

B. skreślenie tekstu

C. podkreślenie tekstu

D. migotanie tekstu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <s> w języku HTML jest używany do oznaczania tekstu, który jest przekreślony, co jest przydatne, gdy chcemy wskazać, że dana treść nie jest już aktualna lub jest nieprawidłowa. Na przykład, w dokumencie HTML możemy użyć znacznika <s> do przekreślenia starej ceny produktu, aby podkreślić, że cena została obniżona. Taki sposób prezentacji informacji jest zgodny z zasadami dostępności, ponieważ przekreślony tekst wciąż jest czytelny przez technologie asystujące, co pozwala użytkownikom na zrozumienie zmiany w kontekście treści. W praktyce zastosowanie tego znacznika może również wpłynąć na estetykę strony, eliminując potrzebę stosowania stylów CSS do osiągnięcia tego samego efektu.

Pytanie 7

W którym z poniższych przykładów walidacja fragmentu kodu CSS zakończy się sukcesem?

A.

B. p { font-weight:bold; }

C. p { text-size:bold; }

D.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź p { font-weight:bold; } jest poprawna, ponieważ jest zgodna z obowiązującą składnią CSS. W tym przypadku użyto selektora typu, który odnosi się do wszystkich elementów w dokumencie HTML, a właściwość font-weight umożliwia ustawienie grubości czcionki. Wartością 'bold' informujemy przeglądarkę, aby wyświetliła tekst w pogrubionej formie, co jest częstą praktyką w stylizacji tekstu. Stosowanie selektorów typu w CSS pozwala na efektywne zarządzanie stylami w całym dokumencie, zatem jest to zgodne z najlepszymi praktykami projektowania stron internetowych. Przykładowo, w celu nadania pogrubienia wszystkim nagłówkom w dokumencie, można by użyć: h1, h2, h3 { font-weight: bold; }. Zastosowanie takiej reguły pozwala na łatwe i szybkie wprowadzenie zmian w stylu dokumentu, co jest kluczowe w kontekście responsywnego projektowania i modernizacji stron. Dobre praktyki wskazują, aby unikać inline styles (stylów wewnętrznych) na rzecz zewnętrznych arkuszy stylów, co poprawia przejrzystość i utrzymanie kodu.

Pytanie 8

Do jakich działań można wykorzystać program FileZilla?

A. publikacji strony internetowej.

B. kompilacji skryptu na stronie.

C. debugowania skryptu na stronie.

D. walidacji strony internetowej.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
FileZilla jest popularnym klientem FTP (File Transfer Protocol), który służy do przesyłania plików między lokalnym komputerem a serwerem. Publikacja strony internetowej polega na przesyłaniu plików HTML, CSS, JavaScript i innych zasobów związanych z witryną na serwer, aby były one dostępne w Internecie. Używając FileZilla, użytkownik może łatwo połączyć się z serwerem poprzez protokół FTP, co pozwala na wygodne zarządzanie plikami, ich przesyłanie oraz organizowanie folderów na serwerze. Przykładowo, po edytowaniu strony lokalnie na komputerze, można za pomocą FileZilla przesłać zmodyfikowane pliki na serwer w kilka kliknięć, co przyspiesza proces aktualizacji witryny. Zgodnie z dobrymi praktykami branżowymi, ważne jest także ustawienie odpowiednich uprawnień do plików oraz regularne tworzenie kopii zapasowych, co zwiększa bezpieczeństwo publikowanych treści. FileZilla obsługuje również protokoły SFTP i FTPS, które zapewniają dodatkowe warstwy bezpieczeństwa podczas transferu danych, co jest istotne w kontekście ochrony danych użytkowników i integracji z różnymi usługami hostingowymi.

Pytanie 9

Na ilustracji przedstawiono projekt struktury bloków strony internetowej. Przy założeniu, że bloki są realizowane przy użyciu znaczników sekcji, ich stylizacja w CSS, poza określonymi szerokościami dla bloków: 1, 2, 3, 4 (blok 5 nie ma przypisanej szerokości), powinna obejmować właściwość

A. clear: both dla wszystkich bloków

B. clear: both dla bloku 5 oraz float: left tylko dla bloków 1 i 2

C. float: left dla wszystkich bloków

D. clear: both dla bloku 5 oraz float: left dla pozostałych bloków

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Czwarta odpowiedź jest na miejscu, bo dzięki float: left dla bloków 1, 2, 3 i 4, te elementy będą się ładnie ustawiać w linii, zgodnie z ich szerokością. Potem, z clear: both dla bloku 5, unikniesz sytuacji, gdy nachodzi on na inne pływające bloki i pojawi się poniżej nich. Wiesz, float często stosuje się do robienia układów, gdzie elementy muszą być obok siebie. Ale float ma to do siebie, że nie wpływa na rodziców, co czasami sprawia, że wszystko może się zdezorganizować, jeśli nie użyjesz clear. To też jest ważne, bo clear mówi, które elementy nie powinny nachodzić na te pływające - dzięki temu wszystko jest uporządkowane. Dobrze jest to wykorzystać, na przykład, gdy chcesz zrobić kolumny na stronie. Generalnie, stosowanie float jest jak najbardziej w porządku, ale musi iść w parze z clear, żeby strona była czytelna i dobrze zorganizowana, zgodnie ze standardami HTML i CSS.

Pytanie 10

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

A. tło będzie pomarańczowe

B. kolor tekstu będzie szary

C. tło będzie w odcieniu szarym

D. kolor tekstu będzie pomarańczowy

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 11

W CSS wartości takie jak: underline, overline, line-through oraz blink odnoszą się do właściwości

A. font-decoration

B. text-align

C. font-style

D. text-decoration

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwość CSS 'text-decoration' jest używana do określenia dekoracji tekstu. Do jej wartości zaliczają się między innymi: 'underline' (podkreślenie), 'overline' (nadpisanie), 'line-through' (przekreślenie) oraz 'blink' (miganie), chociaż ostatnia z nich jest obecnie rzadko używana z powodu problemów z dostępnością i wsparciem w nowoczesnych przeglądarkach. W praktyce, użycie 'text-decoration' pozwala na poprawę czytelności tekstu oraz jego wyróżnienie w kontekście estetyki strony internetowej. Na przykład, stosując 'text-decoration: underline;' możemy podkreślić linki, co jest powszechną praktyką w projektowaniu stron. Zgodnie z wytycznymi W3C, stosowanie dekoracji tekstu powinno być przemyślane, aby nie wprowadzać zamieszania w interpretacji treści przez użytkowników. Przykładowo, nadpisanie może być użyte w kontekście wskazywania błędów, co wprowadza dodatkowe znaczenie do przekazu. Zrozumienie i umiejętne stosowanie 'text-decoration' jest kluczowe dla tworzenia profesjonalnych i funkcjonalnych interfejsów użytkownika.

Pytanie 12

Wykorzystanie definicji stylu CSS spowoduje, że nagłówki drugiego poziomu będą się wyświetlać

h2 {
    text-decoration: overline;
    font-style: italic;
    line-height: 60px;
}

A. czcionką kursywną, z linią nad tekstem, wysokość wiersza wynosi 60 px

B. czcionką standardową, z linią nad tekstem, wysokość wiersza wynosi 60 px

C. czcionką kursywną, z linią pod tekstem, wysokość wiersza wynosi 60 px

D. czcionką standardową, z linią pod tekstem, odległość między znakami wynosi 60 px

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź numer 2 jest poprawna, ponieważ definicja stylu CSS zawiera właściwości, które dokładnie odpowiadają tej opcji. Właściwość font-style: italic sprawia, że tekst nagłówka będzie zapisany czcionką pochyloną, co jest często stosowane w celu nadania tekstowi bardziej dynamicznego i estetycznego wyglądu. Jest to szczególnie przydatne w projektowaniu stron internetowych, gdzie wyróżnienie nagłówków ma kluczowe znaczenie dla czytelności i atrakcyjności wizualnej. text-decoration: overline dodaje linię nad tekstem, co jest mniej powszechnym, ale interesującym sposobem na wyróżnienie tekstu. Może być używane w nowoczesnych projektach, aby nadać stronie unikalny charakter. Wysokość wiersza line-height: 60px zapewnia odpowiednią przestrzeń między wierszami, co zwiększa czytelność, szczególnie przy większych czcionkach. Taki sposób formatowania jest zgodny ze standardami projektowania UX/UI, które kładą nacisk na estetykę i funkcjonalność. Dlatego zrozumienie tych właściwości i ich zastosowanie jest kluczowe dla każdego projektanta stron internetowych.

Pytanie 13

Na ilustracji ukazano rezultat stylizacji za pomocą CSS oraz kod HTML generujący ten przykład. Zakładając, że marginesy wewnętrzne wynoszą 50 px, a zewnętrzne 20 px, jak wygląda styl CSS dla tego obrazu?

A. A.

B. B.

C. C.

D. D.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź C wskazuje na właściwe zastosowanie właściwości CSS z użyciem solidnego czarnego obramowania o grubości 4 pikseli oraz marginesów wewnętrznych i zewnętrznych. Właściwa konfiguracja stylów CSS pozwala na precyzyjne kontrolowanie wyglądu elementów na stronie, co jest kluczowe w tworzeniu responsywnych i estetycznych stron internetowych. Użycie właściwości background-color z wartością Teal pozwala na ustawienie koloru tła, co może być istotne dla zachowania spójności wizualnej projektu. Padding ustawia wewnętrzne marginesy elementu umożliwiając kontrolę nad przestrzenią wokół zawartości, co może wpływać na czytelność i estetykę. Margins z kolei określają przestrzeń zewnętrzną oddzielając element od innych sąsiednich elementów. Poprawne zrozumienie tych stylów pozwala na efektywne projektowanie UI z myślą o użytkowniku końcowym. Dodatkowo praktyczne zastosowanie solidnych obramowań jest powszechne w podkreślaniu istotnych sekcji wizualnych, co jest zgodne z dobrymi praktykami w projektowaniu stron.

Pytanie 14

W formularzu zdefiniowano kontrolki do wpisania imienia i nazwiska. Który atrybut reprezentuje podpowiedź umiejscowioną w polu kontrolki, znikającą w momencie, gdy użytkownik rozpocznie wpisywanie wartości?

<label for="imie">Imię: </label>
<input id="imie" value="Wpisz dane" title="Wpisz imię"><br>
<label for="nazw">Nazwisko: </label>
<input id="nazw" placeholder="Wpisz dane" title="Wpisz nazwisko">

A. value

B. title

C. for

D. placeholder

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Dobrze! Poprawna odpowiedź to 'placeholder'. Atrybut 'placeholder' w elemencie input HTML jest używany do wyświetlania podpowiedzi wewnątrz pola formularza, która znika, gdy użytkownik zaczyna wpisywanie danych. Jest to zgodne z pytaniem, w którym poproszono o atrybut reprezentujący podpowiedź w polu formularza, która znika, gdy użytkownik rozpoczyna wpisywanie. Przykładem może być formularz logowania, gdzie w polach 'Użytkownik' i 'Hasło' można umieścić podpowiedzi 'Wpisz nazwę użytkownika' i 'Wpisz hasło' odpowiednio. Atrybut 'placeholder' jest bardzo przydatny w interaktywnym designie, pomagając użytkownikom zrozumieć, jakie informacje są od nich oczekiwane w danym polu formularza.

Pytanie 15

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

A. rys. B

B. rys. D

C. rys. A

D. rys. C

Brak odpowiedzi na to pytanie.

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

Pytanie 16

Po uruchomieniu zamieszczonego w ramce skryptu w języku JavaScript, w przeglądarce zostanie wyświetlona wartość:

var a = 5;
var b = a--;
a *= 3;
document.write(a + "," + b);

A. 15,5

B. 12,4

C. 15,4

D. 12,5

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W tym skrypcie JavaScript najpierw zmienna a zaczyna z wartością 5. Gdy używasz operatora dekrementacji, czyli a--, to jego wartość zostaje przypisana do zmiennej b, zanim a zostanie zmniejszona. Dlatego b ma wartość 5, a a staje się 4. Potem mamy a *= 3, co znaczy, że mnożymy 4 (aktualną wartość a) przez 3, co daje nam 12. Na końcu, wywołując document.write(a + ',' + b), dostajemy w wyniku 12,5. Zrozumienie tych operatorów w JavaScript jest naprawdę ważne. Operatorzy, jak ++ i --, są powszechnie używani w pętlach, więc znajomość ich działania pomoże ci pisać lepszy i bardziej przejrzysty kod, unikając typowych błędów przy przypisywaniu wartości. Fajnie też wiedzieć, że podobnie działają oni w wielu innych językach programowania, więc ta wiedza jest naprawdę uniwersalna.

Pytanie 17

Który z przedstawionych poniżej fragmentów kodu HTML5 zostanie uznany przez walidator HTML za niepoprawny?

A. <style>.a{color:#F00}</style>tekst

B. tekst

C. tekst

D. tekst

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź, która została wskazana, to <style>.a{color:#F00}</style>tekst. W kontekście HTML5, element <style> jest przeznaczony do umieszczania w nagłówkach dokumentu (<head>), a nie wewnątrz elementów blokowych, takich jak . Umieszczanie tagu <style> w tagu narusza zasady dotyczące struktury dokumentu HTML. Walidatory HTML5, które sprawdzają zgodność kodu z obowiązującymi standardami W3C, uznają takie umieszczenie za błąd, ponieważ stylizacja powinna być oddzielona od treści. Zgodnie z najlepszymi praktykami, CSS powinno być zaimplementowane w plikach zewnętrznych lub sekcjach <head>, co ułatwia utrzymanie i modyfikację kodu. Przykładem poprawnej struktury może być: <head><style>.a{color:#F00}</style></head><body>tekst</body>. To zapewnia przejrzystość i zgodność z zasadami HTML5, co jest kluczowe dla SEO oraz dostępności strony.

Pytanie 18

Strona internetowa została zaprezentowana w taki sposób:

Rozdział 1

tekst

Podrozdział 1.1

tekst

Podrozdział 1.2

Jakie są poprawne znaczniki do tego formatu?

A. <big>Rozdział 1</big>tekst<big>Podrozdział 1.1</big>tekst<big>Podrozdział 1.2</big>

B. <h1>Rozdział 1</h1> tekst <h2>Podrozdział 1.1</h2> tekst <h2>Podrozdział 1.2</h2>

C. <ul><li>Rozdział 1<li>tekst<li>Podrozdział 1.1<li>tekst<li>Podrozdział 1.2</ul>

D. <h1>Rozdział 1tekst <h2>Podrozdział 1.1tekst <h2>Podrozdział 1.2

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź zawierająca znaczniki <h1>, oraz <h2> jest poprawna, ponieważ odzwierciedla właściwą strukturę dokumentu HTML. Znaczniki nagłówków <h1> i <h2> są kluczowe dla hierarchii treści na stronie, co ma istotne znaczenie z punktu widzenia SEO oraz dostępności. Właściwe stosowanie tych znaczników wpływa na to, jak wyszukiwarki indeksują zawartość strony, a także ułatwia nawigację osobom korzystającym z urządzeń asystujących. Na przykład, znacznik <h1> powinien być używany raz na stronę, aby wskazać główny temat, podczas gdy <h2> może być stosowany do podziału treści na sekcje. Dodatkowo, znaczniki są przeznaczone do wyświetlania akapitów tekstu, co jest standardową praktyką w tworzeniu treści webowych. Warto również pamiętać o zachowaniu odpowiednich zasad semantyki HTML, co bezpośrednio przekłada się na poprawę doświadczeń użytkowników oraz wydajność strony.

Pytanie 19

Jaki format CSS dla akapitu definiuje styl szarej ramki z następującymi cechami?

p {
  padding: 15px;
  border: 2px dotted gray; }

A. linia kreskowa; grubość 2 px; marginesy poza ramką 15 px

B. linia ciągła; grubość 2 px; marginesy między tekstem a ramką 15 px

C. linia kropkowa; grubość 2 px; marginesy między tekstem a ramką 15 px

D. linia ciągła; grubość 2 px; marginesy poza ramką 15 px

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź numer jeden jest poprawna, ponieważ prawidłowo opisuje stylizację akapitu przy użyciu CSS zgodnie z przedstawionym kodem. Właściwość 'border' definiuje styl obramowania elementu. W tym przypadku użyto stylu 'dotted', który oznacza linię kropkowaną, o grubości 2 pikseli i kolorze szarym. Jest to użyteczne w sytuacjach, gdy chcemy wizualnie wyróżnić element, ale w sposób subtelny i nienachalny. Dodatkowo, właściwość 'padding' określa margines wewnętrzny, czyli odstęp między zawartością elementu a jego krawędzią. Zapewnienie marginesu wewnętrznego 15 pikseli pozwala tekstowi oddalić się od krawędzi obramowania, co zwiększa czytelność i estetykę. Praktyczne zastosowanie takich stylizacji można znaleźć w projektowaniu stron internetowych, gdzie często używa się różnych stylów obramowań do organizowania treści. Zgodność z dobrymi praktykami web designu zakłada użycie spójnych i intuicyjnych stylów, co poprawia doświadczenia użytkownika oraz ułatwia nawigację po stronie internetowej. Tego typu formatowanie jest zgodne ze standardami CSS, co czyni kod bardziej przewidywalnym i łatwiejszym w utrzymaniu

Pytanie 20

Który sposób zapisu stylu CSS ma najwyższy priorytet (jest stosowany w pierwszej kolejności)?

A. zewnętrzny arkusz stylów

B. styl lokalny (śródliniowy, w atrybucie style)

C. styl importowany do wewnętrznego arkusza

D. wewnętrzny arkusz stylów

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Najwyższy priorytet w CSS ma styl LOKALNY (śródliniowy) - zapisany wprost w atrybucie <code>style</code> elementu, np. <code><p style="color:red"></code>. Jest „najbliżej” elementu, więc nadpisuje reguły z arkuszy wewnętrznego i zewnętrznego. Zapamiętaj zasadę bliskości: im bliżej elementu zdefiniowany styl, tym silniejszy.

Pytanie 21

W HTML, aby utworzyć hiperłącze, które otworzy się w nowej karcie przeglądarki, należy użyć atrybutu

A. rel = "external"

B. target = "_blank"

C. target = "_new"

D. rel = "prev"

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut target="_blank" to standard w HTML, który pozwala otwierać linki w nowej karcie przeglądarki. W praktyce jest to bardzo popularne rozwiązanie, bo dzięki temu użytkownik może sobie przeglądać stronę, a jednocześnie otworzyć coś nowego. Działa to tak, że jeśli dodasz ten atrybut do linku, przeglądarka po prostu otworzy go w nowej karcie lub oknie - to już zależy od ustawień. To naprawdę przydaje się, gdy linkujesz do dokumentacji, stron zewnętrznych albo mediów społecznościowych, gdzie chcesz, żeby użytkownik nie musiał zamykać tego, co aktualnie ogląda. Ale uwaga! Trzeba z tym atrybutem uważać i stosować go z głową, bo czasem lepiej dać użytkownikowi wybór, czy chce otworzyć link w nowej karcie, czy nie, żeby nie czuł się zdezorientowany.

Pytanie 22

Jak nazywa się ikona wyświetlana przed adresem w pasku adresu lub przy tytule karty przeglądarki?

A. iConji

B. emoticon

C. webicon

D. favicon

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Mała ikona wyświetlana w pasku adresu i na karcie przeglądarki obok tytułu nazywa się favicon (favorite icon). Dołącza się ją do strony np. znacznikiem <code><link rel="icon"></code>. Dlatego ta ikona to favicon.

Pytanie 23

Którego znacznika użyć, aby utworzyć pole hasła (tekst maskowany kropkami)?

<input name="password">

<form input type="password">

<input type="password">

<form="password" type="password">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Pole hasła (maskujące wpisywany tekst) tworzy <code><input type="password"></code> - atrybut <code>type</code> decyduje o rodzaju pola. Dlatego poprawny jest <code><input type="password"></code>.

Pytanie 24

Brak którego elementu spowoduje BŁĄD/ostrzeżenie walidatora HTML?

<link>

B. przynajmniej jednego <h1>

<meta name="author">

<title>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W poprawnym dokumencie HTML wymagany jest znacznik <code><title></code> (w sekcji <code><head></code>) - określa tytuł strony widoczny na karcie przeglądarki i w wynikach wyszukiwania. Jego brak walidator zgłasza jako błąd. Dlatego chodzi o <code><title></code>.

Pytanie 25

W języku CSS stworzono określony styl. Sekcja sformatowana tym stylem będzie miała obramowanie o szerokości

div {
     border: solid 2px blue;
     margin: 20px;
 }

A. 2 px oraz marginesy wewnętrzne tego obramowania

B. 20 px oraz marginesy zewnętrzne tego obramowania

C. 2 px oraz marginesy zewnętrzne tego obramowania

D. 20 px oraz marginesy wewnętrzne tego obramowania

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 2 px oraz marginesy na zewnątrz tego obramowania jest prawidłowa ponieważ w definicji stylu CSS ustawiono właściwość border z wartością solid 2px blue co oznacza że element będzie miał obramowanie o grubości 2 pikseli z niebieskim kolorem Dodatkowo użyto właściwości margin z wartością 20px co wskazuje że element ma margines zewnętrzny o szerokości 20 pikseli na każdej stronie Właściwość margin w CSS odnosi się zawsze do przestrzeni na zewnątrz granic elementu co odróżnia ją od padding który dotyczy marginesu wewnętrznego Praktyczne zastosowanie takiego stylu można znaleźć w projektach gdzie projektant chce oddzielić elementy od siebie zachowując równomierne odstępy W ten sposób można tworzyć przejrzyste i estetyczne układy na stronach internetowych Zastosowanie border pozwala również na wizualne wyróżnienie elementów co jest często wykorzystywane w interfejsach użytkownika aby podkreślić ważne informacje Dobrą praktyką jest używanie takich stylizacji aby poprawić czytelność i funkcjonalność strony poprzez jasne rozgraniczenie sekcji oraz zapewnienie odpowiednich odstępów między nimi zgodnie z zasadami UX

Pytanie 26

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

A. akapit2

B. akapit3

C. akapit4

D. akapit

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Metoda getElementsByClassName('akapit') w JavaScript jest metodą DOM, która zwraca kolekcję wszystkich elementów w dokumencie HTML, które mają przypisaną określoną klasę. W tym przypadku interesuje nas klasa 'akapit'. Poprawna odpowiedź to akapit4, ponieważ ten akapit ma atrybut class ustawiony na 'akapit'. Zastosowanie klasy w HTML jest zgodne z najlepszymi praktykami programistycznymi, ponieważ pozwala na łatwe stylowanie i manipulowanie grupą elementów za pomocą CSS i JavaScript. Na przykład, jeśli chcemy zmienić kolor tekstu wszystkich akapitów z klasą 'akapit', możemy to zrobić jednym poleceniem w CSS: .akapit { color: red; }. Ponadto, metoda getElementsByClassName zwraca tzw. HTMLCollection, co oznacza, że możemy iterować po tej kolekcji i modyfikować jej elementy. Użycie klas w ten sposób wspiera zasadę separacji treści od prezentacji, co jest kluczowe w nowoczesnym podejściu do tworzenia stron internetowych.

Pytanie 27

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

A. jeden wiersz i jeden słupek

B. jeden wiersz i dwa słupki

C. dwa wiersze i dwa słupki

D. dwa wiersze i jeden słupek

Brak odpowiedzi na to pytanie.

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

Pytanie 28

Wskaż, jaki błąd walidacyjny zawiera przedstawiony fragment kodu w języku HTML 5.

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

A. Znacznik h6 nie jest używany w HTML5

B. Znacznik br nie powinien znajdować się wewnątrz znacznika p

C. Znacznik br nie został prawidłowo zamknięty

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W analizowanym fragmencie kodu HTML, znacznik zamykający /b jest niezgodny z zasadą zagnieżdżania. W prawidłowej konstrukcji HTML, znaczniki powinny być zamykane w odwrotnej kolejności do ich otwierania — nazywa się to zasadą LIFO (Last In, First Out). W przedstawionym kodzie, znacznik jest otwierany przed znacznikiem , ale zamykany po nim, co jest błędem strukturalnym. Poprawny zapis powinien wyglądać tak: Cascading Style Sheets. Ważne jest, aby zawsze pamiętać o poprawnej strukturze dokumentu HTML, ponieważ nieprzestrzeganie tej zasady może prowadzić do nieprzewidywalnych wyników renderowania na różnych przeglądarkach. Zasada ta jest kluczowa w zapewnieniu, że znaczniki są zagnieżdżone poprawnie i że style oraz skrypty działają zgodnie z oczekiwaniami. Tego rodzaju błędy mogą również negatywnie wpływać na dostępność strony dla użytkowników korzystających z czytników ekranowych.

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

W HTML znacznik tekst będzie wyświetlany przez przeglądarkę w taki sam sposób jak znacznik

A. tekst

B. tekst

C. <big>tekst</big>

D. <h1>tekst</h1>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik jest używany w HTML do oznaczania tekstu, który ma być wyróżniony ze względu na jego ważność. Jest to związane z semantyką dokumentu. Chociaż i wyświetlają tekst w podobny sposób (zazwyczaj pogrubiony), mają inne znaczenie. Znacznik jest używany do czysto wizualnego wyróżnienia, bez przypisywania wartości semantycznej. Dlatego, gdy używamy , nie tylko zmieniamy wygląd tekstu, lecz także informujemy przeglądarkę i dostępne technologie, że ten element ma szczególne znaczenie. Przykładem praktycznego zastosowania może być wyróżnienie kluczowych informacji w artykule, co wpływa na zrozumienie treści przez użytkowników oraz poprawia dostępność strony. Warto pamiętać, że stosowanie odpowiednich znaczników zgodnie z ich przeznaczeniem jest zgodne z zasadami HTML5 i poprawia SEO, ponieważ wyszukiwarki lepiej rozumieją kontekst strony, co jest kluczowe dla jej indeksacji.

Pytanie 31

W języku CSS zapis

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

zastosowany na stronie z wieloma paragrafami, z których każdy zawiera kilka linii, spowoduje, że

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

B. pierwsza linia każdego paragrafu będzie miała mniejszą czcionkę niż pozostałe linie

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest trafna, bo selektor CSS 'p::first-line' służy do stylizowania wyłącznie pierwszej linii każdego paragrafu. Kiedy przypisujesz styl 'font-size: 150%', to znaczy, że czcionka tej pierwszej linii będzie większa o 50% od standardowego rozmiaru ustalonego w CSS. To dobra praktyka w web designie, bo pomaga w czytelności i nadawaniu hierarchii informacjom. Na przykład, fajnie jest wyróżnić rozpoczęcie tekstu albo zaakcentować ważne dane. Pamiętaj tylko, że efekt będzie widoczny tylko, gdy tekst ma więcej niż jedną linię, bo w przeciwnym razie powiększenie się nie ujawni. Dodatkowo, korzystanie z pseudo-elementów, jak '::first-line', to coś, co jest w standardach CSS i jest naprawdę cenione w branży.

Pytanie 32

Co określa właściwość CSS animation-duration?

A. czas trwania jednego cyklu animacji

B. opóźnienie startu animacji

C. kierunek animacji

D. liczbę powtórzeń animacji

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwość CSS <code>animation-duration</code> określa, ile trwa JEDEN cykl animacji - np. <code>animation-duration: 2s</code> oznacza, że pełen przebieg zajmuje dwie sekundy. To podstawowy parametr czasu w animacjach CSS. Dlatego <code>animation-duration</code> określa czas trwania jednego cyklu.

Pytanie 33

Aby umieścić kod JavaScript bezpośrednio w dokumencie HTML, należy użyć znacznika:

<script>

<style>

<code>

<js>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kod JavaScript osadza się w dokumencie wewnątrz znacznika <code><script></code>. Wszystko między <code><script></code> a <code></script></code> przeglądarka traktuje jako kod do wykonania. Tym samym znacznikiem (z atrybutem <code>src</code>) dołącza się też skrypty zewnętrzne. Dlatego do umieszczenia JS w stronie służy <code><script></code>.

Pytanie 34

W dokumencie HTML umieszczono tekst sformatowany określonym stylem. Aby wprowadzić w treści kilka słów o zróżnicowanym stylu, należy użyć znacznika

A.

B. <table>

C. <section>

D. <hr>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik jest używany w HTML do definiowania niewielkich fragmentów tekstu, które można stylizować niezależnie od reszty treści. Przy jego pomocy możemy wprowadzać różne style CSS, co pozwala na skomponowanie bardziej zróżnicowanego wizualnie tekstu. Na przykład, możemy użyć znacznika do podkreślenia ważnych słów w zdaniu, zmieniając ich kolor lub czcionkę. Ważne jest, aby znacznik nie wprowadzał żadnych zmian semantycznych w treści; jest to znacznik czysto stylistyczny. W praktyce, korzystając z CSS, możemy zastosować różne klasy do elementów , co zwiększa elastyczność w zakresie stylizacji. Przykład: ważne słowo może zostać zapisane w arkuszu stylów jako .highlight { background-color: yellow; }. To podejście jest zgodne z zasadami semantycznego HTML oraz wykorzystania CSS, co jest rekomendowaną praktyką w tworzeniu stron internetowych.

Pytanie 35

W CSS zapisano stylizację

css
p > i {color: blue}

oznacza to, że kolorem niebieskim zostanie wyświetlony

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

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

C. pogrubiony tekst akapitu

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 znajdujących się bezpośrednio wewnątrz elementu . Oznacza to, że wszystkie elementy , które są bezpośrednimi dziećmi elementu , będą miały kolor tekstu ustawiony na niebieski. Element 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: To jest kursywa oraz pogrubienie., 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 36

Który z przedstawionych obrazów został przetworzony przy użyciu podanego stylu CSS?

A. Rys. D

B. Rys. C

C. Rys. A

D. Rys. B

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybór Rys. A jako poprawnej odpowiedzi jest uzasadniony zastosowaniem właściwości CSS, które są użyte w stylu. Styl CSS określa padding na 5 pikseli, co oznacza, że wokół obrazu powinna być przestrzeń wynosząca dokładnie 5 pikseli. Właściwość border ustawia obramowanie na 1 piksel, w kolorze szarym i o stylu solid, co oznacza ciągłą linię otaczającą obraz. Z kolei border-radius o wartości 10 pikseli zaokrągla rogi obramowania, co nadaje całości bardziej zaokrąglony kształt. Wszystkie te cechy są widoczne na obrazie Rys. A. W praktyce stosowanie właściwości takich jak border-radius jest często używane w projektach webowych, aby uzyskać bardziej estetyczne i nowoczesne efekty wizualne. Zaokrąglone krawędzie są estetycznie przyjemniejsze dla użytkownika i mogą poprawić czytelność oraz odbiór wizualny strony. Znajomość tych właściwości CSS jest niezbędna dla każdego front-end developera, który dąży do tworzenia nowoczesnych i funkcjonalnych interfejsów użytkownika. Praktyczne zastosowanie tego stylu może być widoczne w projektach stron internetowych, aplikacjach sieciowych oraz w tworzeniu elementów UI, które zachowują spójność wizualną z resztą projektu.

Pytanie 37

Wskaż sposób, w jaki należy odwołać się do pliku default.css, jeśli index.html znajduje się bezpośrednio w katalogu Strona?

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

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybrana odpowiedź jest poprawna, ponieważ poprawnie odwołuje się do pliku CSS za pomocą ścieżki względnej. W HTML, aby odwołać się do pliku zlokalizowanego w katalogu nadrzędnym, używa się ścieżki względnej, która zaczyna się od './', co oznacza bieżący katalog. Następnie podaje się nazwę podkatalogu (w tym przypadku 'style') i nazwę pliku (tutaj 'default.css'). W praktyce, gdy budujesz strukturę katalogową dla swojej strony internetowej, dobrą praktyką jest organizowanie plików w sposób logiczny i konsekwentny, aby ułatwić nawigację i odwołanie do plików. Pamiętaj też, że ścieżki względne są preferowane w większości przypadków, ponieważ są uniwersalne i niezależne od konkretnego systemu plików, co ułatwia przenoszenie kodu między różnymi środowiskami.

Pytanie 38

Wskaż przycisk sformatowany przedstawionym stylem CSS.

#przycisk {
    background-color: white;
    padding: 10px;
    border-width: 2px;
    border-bottom-style: dashed;
}

Przycisk 1

Przycisk 2

Przycisk 3

Przycisk 4

A. Przycisk 4

B. Przycisk 3

C. Przycisk 1

D. Przycisk 2

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Przycisk 2 jest jedynym, który spełnia wszystkie warunki określone w podanym stylu CSS. Białe tło, odstęp wewnętrzny 10 pikseli, szerokość obramowania 2 piksele oraz przerywana dolna krawędź obramowania są elementami, które zostały ustawione w stylach CSS dla przycisku 2. Ta wiedza jest niezwykle przydatna przy projektowaniu i tworzeniu stron internetowych, gdzie kształtowanie elementów interaktywnych, takich jak przyciski, jest często kluczowym elementem doświadczenia użytkownika. Pamiętaj, że CSS pozwala na dużą swobodę w dostosowywaniu wyglądu poszczególnych elementów strony, a zrozumienie, jak działa selekcja elementów i stylizacja, to fundamenty tworzenia atrakcyjnych i funkcjonalnych projektów webowych. Zrozumienie, jakie style zostały zastosowane do danego elementu, pozwala na szybkie i efektywne dostosowywanie strony do potrzeb klienta.

Pytanie 39

W języku CSS atrybut font-size przyjmuje, zgodnie z nazwami, wartości

A. jedynie small, smaller, large, larger

B. z zestawu xx-small, x-small, medium, large, x-large, xx-large

C. zaledwie big oraz small

D. wyłącznie small, medium, large

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwość font-size w CSS pozwala na określenie rozmiaru czcionki za pomocą różnych wartości, w tym predefiniowanych słów kluczowych, które umożliwiają łatwe dostosowanie wielkości tekstu w dokumentach HTML. Oprócz typowych wartości takich jak small, medium i large, CSS oferuje również bardziej szczegółowe opcje, takie jak xx-small, x-small, x-large oraz xx-large. Dzięki temu projektanci mogą lepiej dopasować rozmiar tekstu do kontekstu wizualnego strony. Użycie tych wartości pozwala na uniknięcie problemów z uniwersalnością, gdyż są one zrozumiałe i zgodne z różnymi rozdzielczościami ekranów. Na przykład, podczas projektowania responsywnej witryny, zastosowanie wartości xx-large dla nagłówków oraz x-small dla przypisów skutecznie poprawia czytelność i estetykę. Zgodnie z najlepszymi praktykami, warto również rozważyć użycie jednostek względnych, takich jak em czy rem, co pozwala na jeszcze większą elastyczność w dostosowywaniu rozmiarów tekstu do preferencji użytkownika oraz rozmiaru ekranu.

Pytanie 40

Wymiary:	4272x2848px
Rozdzielczość:	72 dpi
Format:	JPG

W ramce przedstawiono właściwości pliku graficznego. W celu optymalizacji czasu ładowania rysunku na stronę WWW należy

A. zmienić format grafiki na CDR

B. zwiększyć rozdzielczość

C. zmniejszyć rozmiary obrazu

D. dostosować proporcje szerokości do wysokości

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zmniejszenie wymiarów rysunku to kluczowy krok w optymalizacji czasu ładowania grafiki na stronę internetową. Wymiary rysunku 4272x2848px są znaczące, co oznacza, że obraz ma dużą ilość pikseli, co przekłada się na większy rozmiar pliku. Przy standardowej rozdzielczości 72 dpi, która jest odpowiednia do wyświetlania na ekranach, mniejsze wymiary skutkują zmniejszeniem liczby pikseli, co automatycznie obniża wagę pliku. Przykładem może być przeskalowanie obrazu do wymiarów 800x600px, co może znacznie przyspieszyć czas ładowania strony. W praktyce, witryny internetowe powinny dążyć do używania obrazów o wymiarach dostosowanych do wyświetlacza, a optymalne wymiary to te, które są zgodne z responsywnym designem. Ponadto, standardy dotyczące wydajności stron, takie jak Web Page Test czy Google PageSpeed Insights, zalecają minimalizację rozmiaru plików graficznych jako kluczowy element poprawy szybkości ładowania. Zmniejszenie wymiarów rysunku jest zatem jednym z najprostszych i najbardziej efektywnych rozwiązań, które mogą przynieść znaczące korzyści w zakresie wydajności stron internetowych.

Rozpocznij nowy egzamin

Powrót do strony głównej