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: 12 czerwca 2026 08:17
Data zakończenia: 12 czerwca 2026 08:20

Egzamin niezdany

Wynik: 15/40 punktów (37,5%)

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 kod da: „pogrubiony” pogrubione, „pochylony” kursywą, a „górnym indeksie” w górnym indeksie?

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

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

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

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

Pozostałe warianty mylą znaczniki lub je krzyżują. Zamiana  z  daje pogrubienie tam, gdzie ma być kursywa (i odwrotnie).  to indeks DOLNY, a nie górny. Błędne jest też przeplatanie i niepoprawne zagnieżdżanie znaczników (np. zamknięcie  przed  w złej kolejności). Poprawne efekty dają ,  i .

Pytanie 2

W CSS zapis selektora

p > i { color: red;}

wskazuje, że kolorem czerwonym będzie wyróżniony

A. jedynie tekst w znaczniku , który znajduje się bezpośrednio wewnątrz znacznika

B. każdy tekst w znaczniku z wyjątkiem tych w znaczniku

C. wszystkie teksty w znaczniku lub każdy tekst w znaczniku

D. tylko ten tekst znacznika , który ma przypisaną klasę o nazwie i

Odpowiedź ta jest poprawna, ponieważ selektor CSS <pre>p > i { color: red; }</pre> definiuje regułę, która odnosi się jedynie do elementów znajdujących się bezpośrednio wewnątrz elementu . Operator > jest selektorem potomka bezpośredniego, co oznacza, że tylko te , które są bezpośrednio dzieckiem , będą miały przypisany kolor czerwony. Na przykład, jeśli w kodzie HTML mamy Tekst, to ten tekst będzie czerwony. Z drugiej strony, jeżeli znajduje się zagnieżdżone w innym elemencie wewnątrz , jak Tekst, to ten tekst nie będzie formatowany na czerwono. Tego typu selektory są niezwykle przydatne w praktycznym zastosowaniu, gdyż pozwalają na precyzyjne określenie stylów dla konkretnych elementów, co jest zgodne z najlepszymi praktykami projektowania stron internetowych, takimi jak utrzymanie czytelności kodu i unikanie niezamierzonych efektów formatowania.

Pytanie 3

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

W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

A. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

B. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

C. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

D. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

Wybór niepoprawnych odpowiedzi wynika z błędnego użycia znaczników HTML, co wpływa na końcowe formatowanie tekstu. Pierwsza odpowiedź zawiera błąd polegający na niewłaściwym zamknięciu znacznika przez dodanie spacji przed ukośnikiem, co powoduje, że przeglądarki mogą błędnie interpretować strukturę HTML. W konsekwencji, tekst może nie być prawidłowo pogrubiony, ponieważ przeglądarka nie rozpoznaje zamknięcia znacznika. Trzecia odpowiedź całkowicie pomija znacznik , co oznacza, że tekst 'zobaczysz' nie zostanie pogrubiony, co jest niezgodne z wymaganym efektem wizualnym. Brak zastosowania odpowiednich znaczników wpływa na semantyczne znaczenie zawartości, co jest kluczowe w kontekście dostępności i dobrych praktyk w web designie. Czwarta odpowiedź błędnie rozdziela znaczniki wokół słowa 'zobaczysz', co nie tworzy efektu jednoczesnej kursywy i pogrubienia. Wiedza dotycząca zagnieżdżania znaczników jest istotna, aby uzyskać pożądany efekt wizualny, a także utrzymać semantykę i dostępność zgodnie z nowoczesnymi standardami tworzenia stron internetowych. Rozumienie hierarchii i poprawne zamykanie znaczników ma kluczowe znaczenie dla renderowania strony zgodnie z oczekiwaniami, jak również dla zachowania zgodności z HTML5.

Pytanie 4

Do czego służy w JavaScript metoda Math.random()?

A. do porównania dwóch napisów

B. do zwrócenia liczby pseudolosowej

C. do zaokrąglenia liczby w górę do całkowitej

D. do zwrócenia liczby po zaokrągleniu

Metoda Math.random() zwraca liczbę pseudolosową z przedziału od 0 (włącznie) do 1 (wyłącznie). Mnożąc i zaokrąglając wynik, uzyskuje się losowe liczby z dowolnego zakresu. Dlatego Math.random() zwraca liczbę pseudolosową.

Pytanie 5

W dokumencie HTML utworzono formularz wysyłający dane do skryptu formularz.php. Po naciśnięciu przycisku typu submit, przeglądarka przekierowuje nas do określonego adresu. Na podstawie podanego linku można wywnioskować, że dane do pliku formularz.php przesłano metodą

.../formularz.php?imie=Anna&nazwisko=Kowalska

A. GET

B. SESSION

C. COOKIE

D. POST

W kontekście przesyłania danych z formularza do pliku PHP metoda COOKIE nie jest bezpośrednio związana z formularzami HTML. Cookies to małe pliki przechowywane w przeglądarce użytkownika, służące do śledzenia sesji lub przechowywania danych użytkownika. Nie są one używane do bezpośredniego przesyłania danych formularza. Metoda POST, używana w formularzach HTML, wysyła dane jako treść żądania HTTP, co nie jest widoczne w adresie URL. POST jest preferowaną metodą dla przesyłania dużych ilości danych lub danych poufnych, ponieważ nie ogranicza ich ilości i lepiej zabezpiecza przed przypadkowym ujawnieniem. Metoda SESSION odnosi się do mechanizmu przechowywania danych o stanie użytkownika po stronie serwera, który umożliwia śledzenie sesji użytkownika między różnymi żądaniami HTTP. Dane sesji nie są bezpośrednio przesyłane przez formularze HTML, ale mogą być używane do przechowywania informacji po przesłaniu formularza. Często dochodzi do nieporozumień dotyczących tych metod, ponieważ każda z nich pełni inną funkcję w kontekście zarządzania danymi użytkownika w aplikacjach webowych. Kluczowym błędem jest założenie, że wszystkie wymienione metody mogą być używane wymiennie z formularzami HTML, co prowadzi do niepoprawnych wniosków w kontekście tego pytania.

Pytanie 6

<source src="plik.mp4" type="video/mp4">

Aby osadzić plik wideo na stronie WWW, przedstawiony kod HTML5 należy umieścić wewnątrz znaczników:

A. <div> </div>

B. <section> </section>

C. <video> </video>

D. <embed> </embed>

W tym pytaniu kluczowe jest zrozumienie, że sam znacznik `<source>` nie osadza wideo na stronie, tylko dostarcza przeglądarce informacji o konkretnym pliku i jego typie. Rolę kontenera pełni inny element. Często uczniowie próbują „owijać” źródło wideo w różne ogólne znaczniki, takie jak `<div>` czy `<section>`, bo kojarzą je z budowaniem struktury strony. To jednak tylko znaczniki blokowe do organizowania layoutu i treści, nie mają one natywnej logiki odtwarzania multimediów. Jeśli włożymy `<source>` do `<div>` lub `<section>`, przeglądarka po prostu potraktuje to jako zwykły kod, który niczego nie odtwarza, bo brakuje elementu multimedialnego odpowiedzialnego za interpretację tego źródła. Innym skojarzeniem jest `<embed>`. Ten znacznik był (i bywa nadal) używany do osadzania zewnętrznych zasobów, np. animacji Flash, PDF-ów czy innych obiektów. W czasach HTML5 jego rola jest jednak ograniczona, a dla wideo i audio wprowadzono dedykowane elementy `<video>` i `<audio>`. Użycie `<embed>` do wideo jest możliwe, ale nie jest zgodne z nowoczesnymi standardami i pozbawia nas wielu zalet, takich jak spójne API, lepsza dostępność czy łatwiejsza kontrola stylów. Typowym błędem myślowym jest tu traktowanie każdego znacznika, który „coś osadza”, jako równoważnego. HTML5 mocno stawia na semantykę: `<video>` jasno mówi, że mamy do czynienia z treścią wideo, `<section>` – z logiczną sekcją dokumentu, `<div>` – z neutralnym kontenerem, a `<embed>` – z osadzonym zasobem o mniej precyzyjnym przeznaczeniu. Przeglądarka oczekuje, że `<source>` pojawi się wewnątrz elementu multimedialnego, czyli właśnie `<video>` lub `<audio>`. Z mojego doświadczenia wynika, że kiedy ktoś próbuje wkładać `<source>` w inne znaczniki, to najczęściej wynika to z mylenia struktury dokumentu (layoutu) z elementami odpowiedzialnymi za realne odtwarzanie treści. Dobra praktyka w nowoczesnym webdevie to korzystanie z elementów zgodnie z ich semantyką, dlatego do wideo zawsze używamy `<video>` jako kontenera, a `<source>` tylko jako definicji plików w środku.

Pytanie 7

W JavaScript funkcja document.getElementById(id) ma na celu

A. zwrócić referencję do pierwszego elementu HTML o wskazanym id

B. zweryfikować poprawność formularza o identyfikatorze id

C. umieścić tekst o treści ’id’ na stronie internetowej

D. pobrać wartości z formularza i przypisać je do zmiennej id

Niektóre twoje odpowiedzi trochę mylą rolę metody document.getElementById(id). Myślenie, że ta metoda pobiera dane z formularza i wkłada je do zmiennej id to zły trop. W rzeczywistości, ona służy do uzyskiwania dostępu do elementów, a jeśli chcesz odczytać wartości z pól formularzy, powinieneś użyć właściwości value. Mówienie o tym, że ta metoda sprawdza poprawność formularza, też nie jest na miejscu - do walidacji używa się innych funkcji, jak addEventListener() na zdarzenie 'submit' albo atrybutów HTML5, jak required. No i jeśli chodzi o wstawianie tekstu 'id' na stronę, to też nie tak to działa - document.getElementById(id) daje ci odnośnik do elementu, ale nie modyfikuje go w jakiś bezpośredni sposób. To błędy, które mogą wynikać z nie do końca jasnego zrozumienia, jak działają metody manipulacyjne w JavaScript.

Pytanie 8

Aplikacja o nazwie FileZilla umożliwia

A. publikację strony internetowej na zdalnym serwerze

B. sprawdzanie poprawności plików HTML i CSS

C. przeprowadzanie testów aplikacji

D. importowanie bazy danych do systemu CMS Joomla!

FileZilla to popularny klient FTP (File Transfer Protocol), który umożliwia użytkownikom przesyłanie plików pomiędzy lokalnym komputerem a zdalnym serwerem. Głównym celem korzystania z FileZilla jest publikacja stron internetowych, co polega na załadowaniu plików HTML, CSS, obrazków oraz innych zasobów na serwer, gdzie strona będzie dostępna dla użytkowników w Internecie. Dzięki intuicyjnemu interfejsowi, użytkownicy mogą łatwo przeciągać i upuszczać pliki, co przyspiesza proces publikacji. FileZilla obsługuje różne protokoły, w tym FTP, FTPS oraz SFTP, co zapewnia bezpieczeństwo podczas transferu danych. Dobrą praktyką jest regularne aktualizowanie programu, aby korzystać z najnowszych funkcji i poprawek bezpieczeństwa. W kontekście publikacji stron internetowych, FileZilla stanowi kluczowe narzędzie dla web developerów, umożliwiając im szybkie i efektywne zarządzanie plikami na serwerach zdalnych. Używanie FileZilla wspiera standardy branżowe, takie jak bezpieczeństwo transferu danych oraz zdalne zarządzanie plikami, co jest niezbędne w profesjonalnym rozwoju stron internetowych.

Pytanie 9

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

A. aside {float: left; }

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

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

D. nav { float: right; }

W tym zadaniu kluczowe jest zrozumienie, jak naprawdę działa float, a nie tylko samo skojarzenie, że „left to lewo, right to prawo”. Wiele osób myśli, że wystarczy ustawić jeden element na lewo, drugi na prawo i wszystko magicznie się poukłada. W praktyce przeglądarka trzyma się bardzo konkretnych reguł: najpierw liczy kolejność elementów w HTML, potem dopiero stosuje float i układa je możliwie jak najwyżej i jak najbliżej odpowiedniej krawędzi.

Jeśli nada się float tylko dla aside albo tylko dla nav, to zmienia się ich pozycja, ale układ trzech bloków nie spełni warunku z zadania: aside i nav nie zamienią się miejscami z pozostawieniem section w środku. Przykładowo, samo float: left na aside niczego nie „zamieni”, bo element i tak pojawia się jako pierwszy w kodzie, więc będzie u góry, tylko że „przyklejony” do lewej. Z kolei ustawienie nav na prawą stronę bez odpowiedniego floatowania section prowadzi do sytuacji, gdzie section nadal zachowuje się jak normalny blok, zwykle ląduje pod elementami pływającymi albo obok nich w sposób mało przewidywalny dla początkującego.

Częsty błąd myślowy polega też na tym, że ktoś próbuje wszystkim elementom dać float: left, licząc na to, że przeglądarka „ułoży je po swojemu”. Wtedy jednak wszystkie te bloki ustawiają się w jednym kierunku, w kolejności z HTML, więc nie ma mowy o świadomym „zamienianiu miejsc”. Brak zrozumienia, że float wyjmuje element z normalnego przepływu i wpływa na to, jak kolejne elementy zawijają się wokół niego, prowadzi właśnie do takich błędnych odpowiedzi. Z mojego doświadczenia lepiej jest najpierw narysować sobie prosty schemat: w jakiej kolejności idą znaczniki i które z nich mają pływać w prawo, a które zostać w naturalnym układzie. Dopiero wtedy dobiera się konkretne deklaracje CSS. Takie myślenie przydaje się nie tylko przy float, ale też przy nauce flexboxa czy grida, gdzie kolejność w DOM i własności układu też grają ogromną rolę.

Pytanie 10

Na podstawie fragmentu dokumentu HTML, określ co należy wpisać w miejsce kropek w odnośniku w menu, aby przenosił on do rozdziału 2.

Fragment menu
<a ...>Rozdział 2</a>

Fragment dalej w dokumencie
<h1 id="r2" name="sekcja2" class="rozdzial2">Rozdział 2<h1>

A. href = "#sekcja2"

B. href = "sekcja2"

C. href = "r2"

D. href = "#r2"

Niestety, Twoja odpowiedź nie jest prawidłowa. Prawidłowa odpowiedź 'href="#r2"' odwołuje się do identyfikatora (id) 'r2' na tej samej stronie. W HTML, atrybut 'href' w tagu 'a' służy do określenia miejsca docelowego odnośnika. Przed identyfikatorem umieszcza się znak '#', który informuje przeglądarkę, że ma poszukać elementu z danym 'id' na tej samej stronie. Błędy w niepoprawnych odpowiedziach wynikają z pominięcia znaku '#' lub zastosowania nieprawidłowego identyfikatora. Pamiętaj, że identyfikator powinien być unikalny dla każdego elementu na stronie i powinien być używany w odnośniku dokładnie w takiej samej formie. W przypadku 'href="r2"' i 'href="sekcja2"', pominięto znak '#', co sprawia, że przeglądarka będzie szukać zasobu o podanej ścieżce, a nie identyfikatora na tej samej stronie. 'href="#sekcja2"' zawiera niepoprawny identyfikator, który nie istnieje na stronie. Kluczowe jest zrozumienie, jak działają identyfikatory i jaki mają wpływ na nawigację na stronie.

Pytanie 11

W języku HTML, aby uzyskać następujący efekt formatowania
pogrubiony pochylony lub w ^{górnym indeksie}
należy zapisać kod:

A. pogrubiony pochylony lub w górnym indeksie

B. pogrubiony pochylony lub w górnym indeksie

C. pogrubiony pochylony lub w górnym indeksie

D. pogrubiony pochylony lub w górnym indeksie

Odpowiedź, w której użyłeś znaczników i w odpowiednich miejscach, jest całkiem dobra. Znak jest świetny do pogrubiania tekstu, co przydaje się, gdy chcesz podkreślić coś ważnego. Natomiast pozwala na pochylanie tekstu, co dodaje mu charakteru i może sugerować cytaty czy tytuły. Co ciekawe, znacznik stosujemy, gdy chcemy pokazać górny indeks, np. przy potęgach czy jednostkach miar. Przykład takiego użycia byłby taki: Waga w kilogramach wynosi 2 dla dwóch jednostek. Jak widać, stosowanie HTML w odpowiedni sposób pozwala robić czytelne i estetyczne prezentacje, co jest zgodne z dobrymi praktykami w web designie oraz standardami W3C. Warto też pamiętać, że dobrze dobrane znaczniki mają znaczenie nie tylko wizualne, ale także pomagają w indeksowaniu treści przez wyszukiwarki, co z kolei wpływa na SEO.

Pytanie 12

Zapis selektora wskazuje, że kolor tła będzie brązowy dla

input[type=number] { background-color: Brown; }

A. formularzy, gdy użytkownik wprowadzi w nie jakąkolwiek cyfrę

B. wszystkich tekstów na stronie internetowej

C. formularzy, które są typu numerycznego

D. wszystkich formularzy

Selekcja `input[type=number]` jest specyficzna i odnosi się wyłącznie do pól edycyjnych, które przyjmują liczby. Wybór odpowiedzi, że dotyczy to wszystkich pól edycyjnych, jest mylący, ponieważ sugeruje, że stylizacja obejmie również inne typy elementów formularza, takie jak pola tekstowe (`input[type=text]`) czy pola do wprowadzania dat (`input[type=date]`). To zrozumienie ilustruje klasyczny błąd związany z nadmiernym uogólnieniem, gdzie użytkownik stosuje logiczne myślenie do zakresu, który nie jest zgodny z zastosowanym selektorem. Odpowiedź mówiąca o wpływie na wszystkie teksty na stronie również zbacza z sedna, ponieważ nie odnosi się do typów input, lecz do całej zawartości HTML, co jest zupełnie innym zagadnieniem. Użytkownicy mogą również błędnie sądzić, że stylizacja zmienia się w zależności od zawartości pola, co jest nieprawdziwe. Styl CSS stosuje się do konkretnego elementu niezależnie od tego, co użytkownik wprowadza w danym momencie. Dlatego kluczowe jest zrozumienie specyfiki selektorów CSS, aby ich efekty były przewidywalne i zgodne z zamierzonymi celami projektowymi. Dobrą praktyką jest więc poznawanie i rozumienie zastosowania różnych typów selektorów i ich wpływu na elementy formularzy, co może znacząco wpłynąć na użyteczność i estetykę stron internetowych.

Pytanie 13

Który z akapitów został sformatowany według podanego stylu, przy założeniu, że pozostałe właściwości akapitu mają wartości domyślne?

A. Efekt 3

B. Efekt 1

C. Efekt 4

D. Efekt 2

Wybór błędnej odpowiedzi może wynikać z niepełnego zrozumienia działania właściwości CSS które kontrolują wygląd elementów HTML W przypadku efektu 1 tekst jest pogrubiony ale kolor tła jest ciemny co nie odpowiada żadnej z właściwości podanych w stylu CSS Styl CSS zakłada jasne tło z niebieskim obramowaniem co nie jest odzwierciedlone w tym przykładzie Również tekst nie jest odpowiednio ułożony w środkowej przestrzeni jak to zakłada padding 20px Efekt 2 mimo że zawiera niebieski kolor tekstu i obramowanie ma bardzo cienką czcionkę bez odpowiedniego pogrubienia co jest wymagane przez font-weight 900 Ta niezgodność wskazuje na nieprawidłowe zastosowanie właściwości CSS Sytuacja z efektem 4 wygląda podobnie mimo że tekst jest pogrubiony obramowanie jest zbyt grube a tekst nie ma wystarczającej przestrzeni wokół niego co wskazuje na brak ustawienia padding na 20px Zrozumienie tych różnic pomaga w poprawnym stosowaniu stylów CSS w praktyce co jest kluczowe dla tworzenia spójnych i atrakcyjnych wizualnie projektów internetowych Kluczowe jest również testowanie i przeglądanie kodu aby upewnić się że wszystkie właściwości są odpowiednio zdefiniowane i zastosowane we właściwych kontekstach przy projektowaniu interfejsów użytkownika

Pytanie 14

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 1.

B. Komórka 2.

C. Komórka 4.

D. Komórka 3.

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 15

Fragment dokumentu HTML sugeruje, że

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

A. kod HTML zapisano w wersji 5 języka.

B. kod HTML zapisano w wersji 4 języka.

C. znaczniki końcowe są wymagane w kodzie HTML, także dla znaczników samozamykających się.

D. wszystkie znaczniki w kodzie HTML powinny być zapisywane wielkimi literami.

Deklaracja DOCTYPE wskazuje na to że dokument HTML wykorzystuje standard HTML 4.01 w trybie ścisłym. HTML 4.01 jest jedną z wersji języka HTML wprowadzoną przez World Wide Web Consortium w 1999 roku i zawiera trzy warianty: Strict Transitional i Frameset. Tryb Strict oznacza ścisłe przestrzeganie zasad standardu bez użycia przestarzałych elementów i atrybutów takich jak tagi związane z formatowaniem stron które stały się przestarzałe w miarę rozwoju kaskadowych arkuszy stylów CSS. W kontekście praktycznym oznacza to że projektując stronę zgodną z tą specyfikacją należy unikać znaczników odpowiedzialnych za prezentację które były powszechnie stosowane w poprzednich wersjach HTML. Zamiast tego zaleca się korzystanie z CSS do określania wyglądu strony co nie tylko wspiera separację struktury treści od jej wyglądu ale także ułatwia przenoszenie i aktualizację stylów. Używając deklaracji DOCTYPE HTML 4.01 Strict można zapewnić lepszą zgodność z najnowszymi wersjami przeglądarek oraz ułatwić przyszłe aktualizacje kodu do nowoczesnych standardów takich jak HTML5 który wprowadza dodatkowe funkcjonalności i uproszczenia mające na celu poprawę semantyki i użyteczności stron WWW

Pytanie 16

Który format najlepiej nadaje się do zapisu RASTROWEGO obrazu z przezroczystością na stronę WWW?

A. BMP

B. SVG

C. JPG

D. PNG

Pozostałe formaty nie pasują. JPG nie obsługuje przezroczystości i kompresuje stratnie. BMP jest nieskompresowany i bez kanału alfa. SVG owszem obsługuje przezroczystość, ale to format WEKTOROWY, a pytanie dotyczy obrazu RASTROWEGO. Rastrowa grafika z przezroczystością na web to PNG.

Pytanie 17

Aby zmienić wartość atrybutu elementu opisanego w CSS przy użyciu skryptu JavaScript, należy zastosować następujący zapis

A. document.getElementById(id).<nazwa właściwości> = <nowa wartość>

B. document.getElementById(id).style.<nazwa właściwości> = <nowa wartość>

C. document.getElementById(id).innerHTML = <nowa wartość>

D. document.getElementById(id).<nazwa-atrybutu> = <nowa wartość>

Odpowiedzi, które nie zawierają poprawnego odniesienia do właściwości style, wskazują na istotne nieporozumienia dotyczące manipulacji elementami DOM w JavaScript. Użycie document.getElementById(id).innerHTML = <nowa wartość>; nie jest odpowiednie do zmiany elementów stylu, ponieważ innerHTML służy do modyfikacji zawartości HTML wewnątrz elementu, a nie jego stylów. Zmiana zawartości może prowadzić do nadpisania istniejących elementów i wprowadzenia niezamierzonych skutków, takich jak utrata zdarzeń przypisanych do tych elementów. Kolejny błąd tkwi w użyciu document.getElementById(id).<nazwa właściwości> = <nowa wartość>; gdzie <nazwa właściwości> może odnosić się do atrybutów DOM, ale nie do właściwości stylu CSS. Na przykład, ustawienie document.getElementById(id).className = 'newClass'; zmieni klasę CSS elementu, ale nie bezpośrednio jego styl. Ostatnia propozycja, document.getElementById(id).<nazwa-atrybutu> = <nowa wartość>; jest również myląca, ponieważ nie odnosi się do modyfikacji stylów, lecz do manipulacji atrybutami HTML, co może prowadzić do nieprawidłowego działania strony. Zrozumienie zasadniczej różnicy między manipulowaniem treścią a stylem, a także umiejętność właściwego korzystania z DOM, są kluczowe dla skutecznego programowania w JavaScript.

Pytanie 18

W kodzie CSS użyto stylizacji dla elementu listy, a żadne inne reguły CSS nie zostały ustalone. To zastosowane formatowanie spowoduje, że

A. po najechaniu myszką na element listy, kolor tekstu zmieni się na Maroon

B. tekst wszystkich elementów, którym nadano id „hover”, będzie w kolorze Maroon

C. tekst wszystkich elementów listy będzie miał kolor Maroon

D. kolor Maroon obejmie co drugi element listy

W przypadku innych odpowiedzi występuje pewne nieporozumienie dotyczące zasad działania selektorów CSS. Pierwsza odpowiedź sugeruje, że wszystkie elementy z przypisanym id hover zmienią kolor, co jest nieprawidłowe, ponieważ w podanym kodzie nie ma odwołania do id, ale do pseudoklasy :hover. Przypisywanie stylów z użyciem id wymagałoby użycia selektora z hashtagiem, jak na przykład #hover. Kolejna koncepcja sugeruje, że wszystkie elementy listy będą miały kolor maroon. Aby to było prawdziwe, deklaracja CSS musiałaby dotyczyć selektora li bez pseudoklasy :hover. Innymi słowy, aby wszystkie elementy listy były stale w kolorze maroon, kod powinien wyglądać jak li { color: maroon; }. Ostatnia opcja zakłada, że co drugi element listy zmieni kolor. Do takiego działania niezbędne byłoby użycie selektora nth-child w połączeniu z :hover i odpowiednim stylem, na przykład li:nth-child(even):hover { color: maroon; }, co nie jest obecne w dostarczonym kodzie. W związku z tym, prawidłowe zrozumienie funkcji pseudoklas i selektorów CSS jest kluczowe do właściwego interpretowania kodu stylów i unikania typowych błędów w zastosowaniach praktycznych. Dlatego ważne jest, by projektanci stron internetowych dobrze rozumieli różne aspekty CSS, aby efektywnie wykorzystywać możliwości, jakie oferuje ten język stylów, jednocześnie dążąc do osiągnięcia optymalnej funkcjonalności i estetyki w projektach webowych. Poprawne stosowanie selektorów umożliwia tworzenie intuicyjnych i responsywnych interfejsów użytkownika, co stanowi jedno z głównych celów nowoczesnego web designu. Rozumienie tych zasad minimalizuje także ryzyko błędów i nieporozumień w zespole projektowym, przyczyniając się do lepszej współpracy i realizacji projektów.

Pytanie 19

W języku JavaScript, element został uzyskany przy pomocy metody getElementById. Jaką właściwość należy zastosować, aby zmienić zawartość tego elementu?

A. innerHTML

B. Body

C. HTML

D. innerBody

Właściwość innerHTML jest kluczowym elementem w manipulacji DOM (Document Object Model) w JavaScript. Umożliwia ona programistom modyfikację zawartości HTML danego elementu. Po pobraniu elementu za pomocą metody getElementById, można zmienić jego wewnętrzną zawartość, przypisując nowy tekst lub kod HTML do innerHTML. Na przykład, jeśli mamy element o id 'example', jego zawartość można zmienić w ten sposób: document.getElementById('example').innerHTML = 'Nowa zawartość'; To podejście jest powszechnie stosowane w dynamicznej aktualizacji treści stron internetowych, co jest szczególnie przydatne w aplikacjach jednostronicowych (SPA) oraz przy tworzeniu interaktywnych komponentów użytkownika. Warto również zauważyć, że używanie innerHTML wiąże się z pewnymi zagrożeniami, takimi jak wstrzykiwanie kodu (XSS), dlatego zawsze powinno się dbać o walidację i sanitację wprowadzanych danych. W praktyce, aby zwiększyć bezpieczeństwo aplikacji, można korzystać z innych metod manipulacji DOM, takich jak textContent lub createElement, które nie interpretują kodu HTML.

Pytanie 20

Jak nazywa się proces dążący do osiągnięcia przez stronę jak najwyższych pozycji w wynikach wyszukiwarek?

A. pozycjonowanie

B. optymalizacja wydajności

C. responsywność

D. walidacja HTML

Pozostałe pojęcia dotyczą innych aspektów strony. Walidacja HTML sprawdza poprawność kodu. Optymalizacja wydajności przyspiesza ładowanie. Responsywność to dopasowanie do różnych ekranów. Choć pośrednio pomagają SEO, samym dążeniem do wysokich pozycji w wyszukiwarce jest pozycjonowanie.

Pytanie 21

Zapisano kod HTML wstawiający grafikę na stronę internetową:

<img src="rysunek.png" alt="pejzaż">

Jeżeli rysunek.pngnie zostanie odnaleziony, przeglądarka:

A. w miejscu grafiki wypisze błąd wyświetlania strony.

B. w miejscu grafiki wypisze tekst "pejzaż".

C. nie wyświetli strony internetowej.

D. w miejscu grafiki wypisze tekst "rysunek.png".

Niestety, twoja odpowiedź nie jest prawidłowa. Może to wynikać z nieporozumienia co do tego, jak przeglądarki internetowe radzą sobie z brakującymi obrazami. Przeglądarka nie przestanie wyświetlać strony tylko dlatego, że nie może załadować jednego obrazu - zamiast tego wykorzysta atrybut alt elementu <img> w kodzie HTML. Atrybut alt jest tekstem alternatywnym, który jest wyświetlany, jeżeli obraz nie może zostać załadowany. W tym konkretnym przypadku, miał wartość 'pejzaż', więc jest to tekst, który przeglądarka wyświetli. Nie zostanie wyświetlony błąd, ani tekst 'rysunek.png' - przeglądarka nie ma na to wpływu. Zrozumienie tego mechanizmu jest istotne dla tworzenia stron, które są przystępne i estetycznie atrakcyjne nawet wtedy, gdy nie wszystko idzie zgodnie z planem.

Pytanie 22

W tabeli pokazano cechy pliku graficznego. Aby rysunek ładował się szybciej na stronie WWW, należy

Wymiary: 4272 x 2848px
 Rozdzielczość: 72 dpi
 Format: JPG

A. zwiększyć rozdzielczość

B. zmienić format grafiki na CDR

C. zmniejszyć wymiary rysunku

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

Zmiana formatu na CDR nie jest zalecana dla grafiki internetowej. Format CDR jest formatem wektorowym używanym w programie CorelDRAW i nie jest obsługiwany przez przeglądarki internetowe. Grafika wektorowa w formacie CDR wymaga konwersji do formatu rastrowego takiego jak PNG lub JPG aby mogła być użyta na stronach WWW co dodaje dodatkowy krok w procesie publikacji. Zwiększenie rozdzielczości, czyli zwiększenie wartości dpi, zwiększa ilość danych w pliku graficznym, co powoduje dłuższy czas ładowania. Większa rozdzielczość jest użyteczna głównie w kontekście drukowania gdzie jakość obrazu jest kluczowa, natomiast dla internetu standardowa rozdzielczość 72 dpi jest wystarczająca dla większości zastosowań. Zmiana proporcji szerokości do wysokości nie wpływa na rozmiar pliku ani na czas jego ładowania. Taka zmiana może wręcz prowadzić do niepożądanego efektu rozciągnięcia lub zniekształcenia obrazu co negatywnie wpływa na estetykę strony. Prawidłowe proporcje są ważne dla zachowania spójnej estetyki i użyteczności wizualnej serwisu jednak nie mają bezpośredniego wpływu na wydajność ładowania. Typowe błędy myślowe związane z tymi odpowiedziami wynikają z braku zrozumienia specyfiki optymalizacji webowej gdzie mniejszy rozmiar pliku przekłada się na szybsze ładowanie i lepszą wydajność strony internetowej.

Pytanie 23

W sekcji nagłówka dokumentu HTML umieszczono

<title>Strona miłośników psów</title>

Zawarty tekst będzie widoczny

A. w treści witryny, na banerze witryny

B. na pasku tytułu w przeglądarce

C. w polu adresowym, za wprowadzonym adresem URL

D. w treści witryny, w pierwszym ukazanym nagłówku

Wybór odpowiedzi, która sugeruje, że tytuł strony wyświetlany jest w treści strony, jest błędny. Tytuł nie jest częścią treści, na przykład w nagłówku, ani nie jest umieszczany na banerze witryny, co sugeruje inna odpowiedź. Tytuł strony jest wyświetlany na pasku tytułu przeglądarki, a jego podstawowym zadaniem jest identyfikacja strony w kontekście użytkowania przeglądarki. Błędne założenie, że tytuł może być częścią treści strony, wynika z nieporozumienia dotyczącego struktury dokumentu HTML oraz roli, jaką różne elementy odgrywają w prezentacji stron. Tytuł jest istotnym elementem metadanych, co oznacza, że nie jest przeznaczony do bezpośredniego wyświetlania na stronie, ale ma kluczowe znaczenie dla SEO oraz ułatwienia nawigacji. Właściwe zrozumienie roli tagu <title> jest kluczowe, aby uniknąć typowych błędów w tworzeniu witryn internetowych, takich jak używanie wygenerowanych tytułów, które mogą być zbyt ogólne lub mylące dla użytkowników oraz wyszukiwarek. W praktyce, tytuły stron powinny być odzwierciedleniem ich zawartości, co zwiększa ich użyteczność i efektywność w przyciąganiu odwiedzających.

Pytanie 24

Jak zapisać marginesy zewnętrzne: górny i dolny 20 px, lewy i prawy 40 px?

margin: 40px 20px;

margin: 20px 40px 40px 20px;

margin: 20px 20px 40px 40px;

margin: 20px 40px;

W zapisie skróconym z dwiema wartościami margin: pion poziom pierwsza dotyczy góry i dołu, druga lewej i prawej. Górny i dolny 20px, boczne 40px daje więc margin: 20px 40px;. Dlatego poprawny jest margin: 20px 40px;.

Pytanie 25

Jak prawidłowo skomentować linię kodu w języku Java Script? Komentarz powinien być umieszczony po znakach //

x = Math.max(a,b,c); //

A. wybór losowej wartości ze zmiennych a, b i c

B. w zmiennej x maksymalna wartość ze zmiennych a, b, c

C. nieprawidłowe dane

D. w zmiennej x minimalna wartość ze zmiennych a, b, c

Odpowiedź numer 1 jest całkiem trafna, bo funkcja Math.max w JavaScript tak naprawdę najpierw sprawdza, która z podanych wartości jest największa. W tym wypadku, x = Math.max(a, b, c) zwraca największą liczbę z a, b i c i przypisuje ją do x. To jest super przydatne, gdy musisz szybko porównać jakieś liczby, na przykład podczas analizowania danych albo ustalania maksymalnych limitów w aplikacjach internetowych. Math.max to część wbudowanej biblioteki Math, która ma sporo przydatnych funkcji. Wykorzystanie tej funkcji jest zgodne z dobrymi praktykami programowania, bo jest szybka i bezpieczna. Co ważne, Math.max przyjmuje różną liczbę argumentów, więc można ją łatwo dopasować do swoich potrzeb. Używanie tej funkcji naprawdę poprawia czytelność kodu, a to jest kluczowe w projektach, gdzie inne osoby mogą musieć zrozumieć nasz kod.

Pytanie 26

Jak w CSS ustawić, aby hiperłącze nieodwiedzone było żółte, a odwiedzone zielone?

a:visited { color: yellow; } a:link { color: green; }

a:hover { color: green; } a:link { color: yellow; }

a:hover { color: yellow; } a:visited { color: green; }

a:link { color: yellow; } a:visited { color: green; }

Pozostałe zapisy mylą pseudoklasy lub kolory. Wariant z a:visited { color: yellow; } i a:link { color: green; } zamienia kolory miejscami - nieodwiedzony wyszedłby zielony zamiast żółty. Dwie inne odpowiedzi używają :hover, które reaguje na najechanie kursorem, a nie na to, czy link był odwiedzony, i pomijają regułę dla stanu :link. Stan nieodwiedzony opisuje :link, a odwiedzony :visited, dlatego poprawny jest zapis a:link { color: yellow; } a:visited { color: green; }.

Pytanie 27

Który zapis CSS ustawi tło bloku <div> na kolor niebieski?

div { shadow: blue; }

div { color: blue; }

div { border-color: blue; }

div { background-color: blue; }

Trzeba trafić we właściwość tła. border-color koloruje obramowanie, color ustawia kolor TEKSTU, a shadow nie istnieje (cień to box-shadow). Niebieskie tło bloku daje div { background-color: blue; }.

Pytanie 28

Jakie wyrażenie logiczne powinno zostać użyte w języku JavaScript, aby przeprowadzić operacje wyłącznie na dowolnych liczbach ujemnych z zakresu jednostronnie domkniętego <-200, -100)?

A. (liczba >= -200) || (liczba > -100)

B. (liczba <= -200) || (liczba > -100)

C. (liczba <= -200) && (liczba < -100)

D. (liczba >= -200) && (liczba < -100)

Poprawna odpowiedź, (liczba >= -200) && (liczba < -100), jest zgodna z wymaganym zakresem liczb ujemnych. Wyrażenie to sprawdza, czy wartość zmiennej 'liczba' jest większa lub równa -200, a jednocześnie mniejsza niż -100. Oznacza to, że przyjmuje wszystkie liczby z przedziału, w tym -200, ale nie uwzględnia -100. To podejście jest zgodne z praktykami programowania, gdzie istotne jest dokładne definiowanie zakresów. W JavaScript stosowanie operatorów logicznych, takich jak &&, umożliwia precyzyjne warunkowanie wykonania kodu, co jest niezbędne do sprawnego zarządzania błędami oraz zwiększa czytelność kodu. Przykładowo, w kontekście walidacji danych, takie wyrażenie można wykorzystać do filtrowania nieprawidłowych wartości przed ich przetwarzaniem. Umożliwia to lepsze zarządzanie danymi oraz zapobiega błędom w aplikacjach. Zastosowanie tego wyrażenia w praktyce pokazuje, jak ważne jest precyzyjne formułowanie warunków, co jest kluczowym elementem skutecznego programowania.

Pytanie 29

Ile maksymalnie znaczników <td> może być zastosowanych w tabeli, która ma trzy kolumny oraz trzy wiersze, nie zawierając przy tym złączeń komórek i wiersza nagłówkowego?

A. 3

B. 9

C. 6

D. 12

Odpowiedź 9 jest prawidłowa, ponieważ w tabeli o trzech kolumnach i trzech wierszach, gdzie nie ma złączeń komórek ani wiersza nagłówkowego, maksymalna liczba znaczników <td> wynosi 9. Każda kolumna w każdym wierszu może być wypełniona osobnym znacznikiem <td>. Tabela składająca się z 3 wierszy i 3 kolumn daje w sumie 3 x 3 = 9 komórek, które są reprezentowane przez znaczniki <td>. Przykładową strukturę HTML takiej tabeli można przedstawić następująco: <table><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></table>. Warto również zauważyć, że zgodnie z zaleceniami W3C, użycie odpowiednich znaczników w tabelach jest kluczowe dla zapewnienia właściwej dostępności i semantyki dokumentu HTML, co jest zgodne z dobrymi praktykami tworzenia stron internetowych.

Pytanie 30

W języku JavaScript należy uzyskać dostęp do elementu w pierwszym akapicie podanego kodu HTML. Jak można to zrobić za pomocą funkcji

<p>pierwszy paragraf</p>
<p>drugi paragraf</p>
<p>trzeci paragraf</p>
...

A. getElementById('p1');

B. getElementByTagName('p')[0];

C. getElementByClassName('p.1')[0];

D. getElement('p');

Wariant getElement('p') jest niepoprawny, ponieważ nie istnieje w JavaScript żadna funkcja o takiej nazwie. Odwoływanie się do elementów DOM w JavaScript wymaga stosowania precyzyjnych i zgodnych z dokumentacją metod, takich jak getElementById, getElementsByTagName czy querySelector. Kolejna opcja, getElementById('p1'), jest błędna w kontekście tego pytania, ponieważ getElementById wymaga podania unikalnego identyfikatora ID, który w tym przypadku nie został określony w kodzie HTML. Użycie tej metody odnosiłoby się do elementu posiadającego atrybut id równy 'p1', co nie pasuje do przedstawionego kodu. Z kolei getElementByClassName('p.1') jest niepoprawne z kilku powodów. Po pierwsze, funkcja ta szuka elementów na podstawie klasy, a w kodzie HTML nie ma klasy o nazwie 'p.1'. Po drugie, format 'p.1' sugeruje błędne użycie znaków, ponieważ kropka jest separatorem w nazwach klas, a nie ich częścią. Poprawne odwołanie do elementu pierwszego paragrafu wymaga zastosowania jednej z metod iterujących po elementach, jak getElementsByTagName, która zwraca listę elementów o danym tagu, a następnie użycia indeksowania, aby precyzyjnie wskazać pierwszy element tej listy. Zrozumienie tych różnic i odpowiednie stosowanie metod JavaScript jest kluczowe dla efektywnego zarządzania elementami DOM i tworzenia dynamicznych stron WWW. Zwracanie uwagi na poprawne identyfikatory, klasy i struktury metod to fundament przy pracy z JavaScript i DOM, który pozwala na uniknięcie wielu powszechnie popełnianych błędów.

Pytanie 31

Który z poniższych zapisów jest selektorem pseudoklasy CSS?

body

td.wyroznienie

a:link

p#wyroznienie

Pseudoklasa w CSS opisuje szczególny STAN lub sytuację elementu i poprzedza ją dwukropek. a:link wybiera odnośniki w stanie nieodwiedzonym - :link to właśnie pseudoklasa. Inne popularne to :hover (po najechaniu), :visited (odwiedzony) czy :focus (aktywny element formularza). Różnią się od zwykłych selektorów klasy (.nazwa) i ID (#nazwa). Dlatego selektorem pseudoklasy jest a:link.

Pytanie 32

W stylu CSS ustalono obramowanie pojedyncze, które ma następujące kolory dla krawędzi:

border: solid 1px; border-color: red blue green yellow;

A. górna – czerwona, lewa – niebieska, dolna – zielona, prawa – żółta

B. prawa – czerwona, dolna – niebieska, lewa – zielona, górna – żółta

C. lewa – czerwona, dolna – niebieska, prawa – zielona, górna – żółta

D. górna – czerwona, prawa – niebieska, dolna – zielona, lewa – żółta

Definicja obramowania za pomocą stylu CSS z użyciem właściwości border-color pozwala na określenie kolorów każdej z krawędzi elementu w kolejności zgodnej ze wskazówkami zegara. Gdy podano cztery wartości jak w border-color: red blue green yellow; oznaczają one odpowiednio kolory krawędzi górnej prawej dolnej i lewej. Właściwość border: solid 1px; definiuje typ obramowania jako solidne i jego szerokość jako 1px. Warto zaznaczyć że podanie czterech wartości kolorów w border-color jest zgodne z zasadami CSS i umożliwia konfigurowanie wyglądu elementów w sposób szczegółowy i zindywidualizowany. Projektanci stron internetowych często używają tej techniki do tworzenia graficznych stylów które zwiększają czytelność i estetykę witryny. W praktyce wiedza o manipulacji stylem obramowania w CSS jest kluczowa dla tworzenia responsywnych i wizualnie atrakcyjnych interfejsów użytkownika. Takie podejście wspiera zachowanie spójności wizualnej co jest jedną z dobrych praktyk w projektowaniu front-endu.

Pytanie 33

Jakim zapisem w dokumencie HTML można stworzyć element, który wyświetli obraz kotek.jpg oraz tekst alternatywny "obrazek kotka"?

A. <img href="kotek.jpg" alt="obrazek kotka">

B. <img src="kotek.jpg" title="obrazek kotka">

C. <img src="kotek.jpg" alt="obrazek kotka">

D. <img href="kotek.jpg" title="obrazek kotka">

Wszystkie odpowiedzi, które nie odpowiadają poprawnemu zapisowi, zawierają błędy związane z użyciem atrybutów w tagu <img>. W pierwszej odpowiedzi użyto atrybutu href, który nie jest właściwie stosowany w kontekście obrazów; zamiast tego, do osadzania linków należy używać tagu <a>. Druga odpowiedź również zawiera niepoprawny atrybut href, co sprawia, że obraz nie zostanie poprawnie załadowany. W trzeciej opcji atrybut title jest użyty, jednak jego funkcja jest inna niż atrybutu alt. Atrybut title dostarcza dodatkowych informacji o elemencie w formie podpowiedzi, ale nie jest wyświetlany w przypadku, gdy obraz nie może być załadowany, co czyni go niewystarczającym do celów dostępności. Taki błąd myślowy prowadzi do pominięcia istoty atrybutu alt, który jest niezbędny do opisania zawartości obrazu. Ponadto, nieprawidłowe atrybuty mogą powodować problemy z dostępnością, co jest sprzeczne z najlepszymi praktykami webowymi, mającymi na celu stworzenie ogólnodostępnych treści. Użycie niewłaściwych atrybutów może również negatywnie wpłynąć na doświadczenia użytkowników oraz potencjalnie na pozycjonowanie w wyszukiwarkach, dlatego ważne jest stosowanie zalecanych standardów przy tworzeniu stron internetowych.

Pytanie 34

Jakie jest znaczenie powtarzania w zdefiniowanym stylu CSS?

body {
   background-image: url("rysunek.gif");
   background-repeat: repeat-y;
 }

A. obrazu umieszczonego przy użyciu znacznika img

B. obrazu umieszczonego w tle strony w pionie

C. tła każdego z paragrafów

D. obrazu umieszczonego w tle strony w poziomie

Odpowiedź dotycząca powtarzania rysunku umieszczonego w tle strony w pionie jest prawidłowa ponieważ w załączonej definicji stylu CSS użyto właściwości background-repeat z wartością repeat-y Wartość ta oznacza że obrazek tła będzie powtarzał się tylko w kierunku pionowym natomiast w kierunku poziomym pozostaje pojedynczym obrazem Funkcja ta jest szczególnie przydatna gdy chcemy stworzyć efekt kontynuacji wzoru lub tekstury na całej wysokości strony ale nie potrzebujemy powtarzania w poziomie Dzięki takim właściwościom CSS jak background-image i background-repeat projektanci stron internetowych mają dużą elastyczność w rozmieszczaniu i stylizacji tła Co więcej pozwala to na optymalizację zasobów w przypadku gdy używane są małe pliki graficzne które zajmują mniej miejsca na serwerze niż duże obrazy Zrozumienie tych mechanizmów jest kluczowe dla tworzenia efektywnych i estetycznych projektów zgodnych z dobrymi praktykami branżowymi takimi jak unikanie zbędnych powtórzeń w wyglądzie strony i dostosowywanie się do różnorodnych rozdzielczości ekranów

Pytanie 35

Który atrybut należy zapisać w miejscu trzech kropek w znaczniku HTML5 <blockquote>, aby zdefiniować źródło cytatu?

<blockquote ...="https://pl.wikipedia.org">
Pokojowa Nagroda Nobla jest przyznawana kandydatom, którzy wykonali największą lub najlepszą pracę na rzecz braterstwa między narodami
</blockquote>

A. alt

B. cite

C. src

D. href

Odpowiedź 'cite' jest prawidłowa, ponieważ atrybut ten służy do wskazania źródła cytatu w znaczniku <blockquote>. Atrybut cite pozwala dostarczyć dodatkowych informacji o autorze lub miejscu pochodzenia cytatu, co jest zgodne z zasadami semantycznego HTML5. Użycie atrybutu cite jest ważne dla poprawnej interpretacji treści przez przeglądarki oraz narzędzia przetwarzające dane, takie jak wyszukiwarki internetowe. Przykład zastosowania: <blockquote cite="https://pl.wikipedia.org">...cytat...</blockquote>. Dzięki temu można łatwo zidentyfikować źródło, co zwiększa wiarygodność prezentowanych informacji. W praktyce, dokumenty HTML powinny być tak przygotowane, aby były zarówno przyjazne dla użytkowników, jak i zgodne z wytycznymi standardów W3C, co ma kluczowe znaczenie w kontekście dostępności i SEO.

Pytanie 36

Funkcja
fun1(a,b) {
if(a % 2 != 0) a++;
for(let n = a; n <= b; n+=2) document.write(n);
}
ma na celu

A. sprawdzenie, czy liczba a jest nieparzysta; w przypadku pozytywnej odpowiedzi, jej wypisanie

B. zwrócenie parzystych wartości liczb od a do b

C. wypisanie liczb parzystych w zakresie od a do b

D. wypisanie wszystkich liczb w przedziale od a do b

Funkcja fun1 w JavaScript ma za zadanie wypisać liczby parzyste w przedziale od a do b. Na początku sprawdzamy, czy a jest liczbą nieparzystą, korzystając z operatora modulo. Jeśli a jest nieparzysta, to ją zwiększamy o 1, tym samym przekształcając ją w liczbę parzystą. Potem mamy pętlę for, która zaczyna od a i w każdym kroku zwiększa n o 2, co gwarantuje, że będziemy wypisywać tylko liczby parzyste. Pętla działa dopóki n jest mniejsze lub równe b. Wyniki są pokazywane na stronie dzięki document.write(). To się zgadza z tym, co ma robić ta funkcja, bo faktycznie wypisuje liczby parzyste. Na przykład, kiedy mamy a=3 i b=9, to wypisze 4, 6 i 8.

Pytanie 37

W języku HTML zdefiniowano znacznik

<a href="http://website.com" rel="nofollow">link</a>

Wartość nofollow atrybutu rel

A. oznacza, że kliknięcie na link nie przeniesie do strony website.com.

B. oznacza, że kliknięcie na link otworzy go w osobnej karcie przeglądarki.

C. jest informacją dla przeglądarki internetowej, aby nie formatowała słowa "link" jako odnośnika.

D. jest informacją dla robota wyszukiwarki Google, aby nie podążał za tym linkiem.

Niestety, to nie tak. Atrybut rel='nofollow' w tagu <a> nie mówi przeglądarkom, żeby otworzyły link w nowej karcie ani nie mówi użytkownikowi, że kliknięcie na link nie przeniesie go do strony website.com. Ten atrybut jest dla robotów wyszukiwarek. Możliwe, że wybrałeś tę odpowiedź, bo nie do końca rozumiesz, jak działają atrybuty w HTML. W HTML atrybuty to dodatkowe informacje o elemencie, które są w tagu otwierającym. W przypadku 'rel', chodzi o wskazówki dla robotów wyszukiwarek, jak powinny traktować dany link. Z mojego doświadczenia, zrozumienie roli różnych atrybutów w HTML jest kluczowe, jeśli chcesz robić dobre strony internetowe.

Pytanie 38

W JavaScript stworzono funkcję o nazwie licz_pitagoras, która oblicza długość przeciwprostokątnej w trójkącie prostokątnym, zgodnie z twierdzeniem Pitagorasa. Funkcja przyjmuje dwa parametry wejściowe i zwraca wynik. Poprawne wywołanie tej funkcji, wraz z uzyskaniem zwróconej wartości, będzie miało formę

A. licz_pitagoras(a, b) = c;

B. licz_pitagoras(a, b, c);

C. licz_pitagoras(a, b);

D. c = licz_pitagoras(a, b);

Wywołanie funkcji w JavaScript wymaga przestrzegania określonych zasad, które nie zostały spełnione w pozostałych odpowiedziach. Odpowiedź 'licz_pitagoras(a, b);' jest niekompletna, ponieważ pomija przypisanie wyniku do zmiennej. Funkcja może być wywołana, ale bez możliwości dalszego wykorzystania jej wyniku, co ogranicza jej użyteczność. Z kolei 'licz_pitagoras(a, b) = c;' sugeruje, że przypisanie wyniku może być wykonane w odwrotny sposób, co jest niezgodne z zasadami przypisywania wartości w JavaScript. Warto pamiętać, że w tym języku nie możemy przypisywać do wyniku funkcji, gdyż funkcje zwracają wartości, a nie są same w sobie zmiennymi. Natomiast 'licz_pitagoras(a, b, c);' sugeruje, że funkcja oczekuje trzech argumentów, co jest nieprawidłowe, ponieważ funkcja została zdefiniowana do przyjmowania tylko dwóch parametrów. Tego typu błędne założenia mogą prowadzić do frustracji podczas programowania, gdyż przydzielanie niewłaściwych argumentów do funkcji może skutkować błędami runtime. Dobrą praktyką jest zrozumienie definicji funkcji i jej parametrów przed jej wywołaniem, co pozwala na efektywne korzystanie z możliwości oferowanych przez JavaScript.

Pytanie 39

W języku JavaScript, aby zweryfikować, czy liczba leży w zakresie (100, 200>, należy użyć następującego zapisu:

A. If (liczba > 100 && liczba <=200)

B. If (liczba > 100 || liczba <=200)

C. If (liczba < 100 && liczba <=200)

D. If (liczba < 100 || liczba >=200)

Patrząc na błędne podejścia w odpowiedziach, można zauważyć kilka istotnych nieporozumień związanych z operatorami logicznymi i porównawczymi. Na przykład przy 'if (liczba > 100 || liczba <= 200)' użycie operatora '||' (OR) prowadzi do tego, że warunek może być spełniony nawet wtedy, gdy liczba jest poniżej 100. To znaczy, że każda liczba mniejsza niż 100 oraz każda większa niż 200 będzie się kwalifikować, co kompletnie mija się z celem. Podobnie 'if (liczba < 100 || liczba >= 200)' pomija wartości w przedziale od 100 do 200. Tutaj użycie '&&' byłoby kluczowe, bo wymaga spełnienia obu warunków jednocześnie. Trzeba też zauważyć, że 'if (liczba < 100 && liczba <= 200)' wprowadza dodatkowe zamieszanie, bo pierwszy warunek koliduje z drugim, co czyni go logicznie błędnym. Dlatego poprawne formułowanie warunków w JavaScript jest podstawą dla każdego programisty. Jakiekolwiek błędne zrozumienie operatorów może prowadzić do poważnych problemów w działaniu aplikacji, więc warto to dobrze przyswoić.

Pytanie 40

Którego atrybutu użyć, aby scalić w POZIOMIE dwie sąsiednie komórki w wierszu tabeli?

cellpadding

cellspacing

colspan

rowspan

Trzeba odróżnić scalanie poziome od pionowego. rowspan łączy komórki w PIONIE (przez wiersze). cellpadding i cellspacing to atrybuty całej tabeli sterujące odstępami, a nie scalaniem. Poziome scalanie komórek daje colspan.

Rozpocznij nowy egzamin

Powrót do strony głównej