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: 9 maja 2026 11:13
Data zakończenia: 9 maja 2026 11:58

Egzamin zdany!

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

W HTML-u utworzono formularz. Jaki efekt działania poniższego kodu zostanie pokazany przez przeglądarkę, jeśli w drugie pole użytkownik wprowadził tekst "ala ma kota"?

<form>
    <select>
        <option value="v1">Kraków</option>
        <option value="v2">Poznań</option>
        <option value="v3">Szczecin</option>
    </select><br>
    <input type="password" />
</form>

A. A

B. D

C. B

D. C

Odpowiedź B jest prawidłowa, ponieważ pokazuje typowy sposób renderowania formularza HTML z elementem wyboru i polem hasła w przeglądarce. W kodzie HTML widzimy element select z trzema opcjami wyboru. Po zaznaczeniu jednej z opcji, jak Kraków, tworzy się rozwijane menu, które jest widoczne na obrazie jako pole z wybraną wartością. Drugim elementem formularza jest pole input typu password. Ten typ pola zamienia wpisany tekst na znaki maskujące, takie jak kropki lub gwiazdki, co widzimy na obrazie w odpowiedzi B. To jest standardowe zachowanie przeglądarek w przypadku pól hasła, mające na celu ochronę prywatności. W kodzie HTML nie ma elementów typu checkbox ani radio, co eliminowałoby inne prezentacje danych, takie jak checkboxy czy przyciski radiowe. Dobrą praktyką jest używanie pól hasła w formularzach tam, gdzie wymagane jest wprowadzenie danych, które powinny być chronione. Odpowiednie użycie elementów HTML zwiększa użyteczność i bezpieczeństwo aplikacji internetowej i jest zgodne z konwencjami projektowania UI.

Pytanie 2

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

p.uzytkownik { color: blue; }

A. wszystkich akapitów

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

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

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

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

Pytanie 3

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. 12,5

D. 15,4

W tym skrypcie JavaScript mamy operator dekrementacji a--, gdzie najpierw wartość zmiennej a jest przypisana do zmiennej b, a dekrementacja następuje później. Jeśli tego nie rozumiesz, może to prowadzić do różnych nieporozumień co do wynikowych wartości. Czyli po a-- b przyjmuje pierwotną wartość a, która wynosi 5. Warto zrozumieć kolejność operacji, bo przy operatorze postfix zmiana wartości następuje po przypisaniu. Później, po dekrementacji, a staje się 4, co czasem jest źle interpretowane, bo ludzie myślą, że b też by się zmieniło. Potem jest a *= 3, gdzie 4 mnożymy przez 3 i dostajemy 12. Często ludzie popełniają błąd, zakładając, że operatory działają równocześnie w jednym wierszu kodu. Ważne jest, żeby znać te subtelności, bo pomaga to w lepszym programowaniu i kontrolowaniu, jak zmienne się zmieniają.

Pytanie 4

Jaką wartość w formacie szesnastkowym ma kolor określony kodem RGB o wartościach rgb(128,16,8)?

A. #FF1008

B. #800F80

C. #801008

D. #FF0F80

Jeśli mamy kolor RGB zapisany jako rgb(128, 16, 8), to możemy go przerobić na format szesnastkowy, co jest bardzo przydatne w grafice i web designie. W tym przypadku mamy czerwony na poziomie 128, zielony 16, a niebieski 8. Z każdą z tych wartości robimy tak, że dzielimy je na 16 i szukamy odpowiadających im cyfr hex. I tak dla 128 dostajemy 80, dla 16 to 10, a 8 to 08. Końcowy kolor w formacie szesnastkowym to #801008. To umiejętność, którą dobrze znać w IT, zwłaszcza jeśli chodzi o robienie stron www, bo kody hex są szeroko używane w CSS. Dzięki temu można zaoszczędzić miejsce i naprawdę ułatwić sobie życie przy pisaniu kodu. Zrozumienie jak to działa jest mega ważne dla projektantów i programistów, żeby dobrze zarządzać kolorami w swoich projektach.

Pytanie 5

Jaki zapis w HTML służy do określenia kodowania znaków w dokumencie?

A. <charset="UTF-8">

B. <meta encoding="UTF-8">

C. <encoding="UTF-8">

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

Poprawna odpowiedź to <meta charset="UTF-8">, która jest standardowym sposobem deklaracji kodowania znaków w dokumentach HTML. Użycie tego tagu w sekcji <head> dokumentu HTML informuje przeglądarki internetowe o tym, jakie znaki będą używane w danym dokumencie, co jest kluczowe dla prawidłowego wyświetlania treści. Deklaracja 'UTF-8' jest szczególnie powszechna, ponieważ obsługuje wiele różnych znaków i symboli z różnych języków, co czyni ją uniwersalnym wyborem dla większości stron internetowych. Przykłady zastosowań obejmują strony wielojęzyczne, gdzie ważne jest, aby tekst został prawidłowo wyświetlony bez błędów z powodu nieodpowiedniego kodowania. Zgodnie z najlepszymi praktykami w branży, zawsze zaleca się umieszczanie tego tagu na początku sekcji <head> dokumentu, aby zapewnić, że wszystkie elementy strony będą renderowane zgodnie z zamierzeniem twórcy. Użycie odpowiedniego kodowania znaków jest również istotne z punktu widzenia SEO, ponieważ wyszukiwarki mogą mieć problemy z indeksowaniem treści, jeśli kodowanie jest nieprawidłowo ustawione.

Pytanie 6

Znaczniki HTML oraz , które służą do wyróżniania istotności tekstu, odpowiadają pod względem formatowania znacznikom

A. oraz

B. oraz

C. oraz

D. oraz

Znacznik HTML jest używany do oznaczenia tekstu, który jest ważny, podczas gdy służy do podkreślenia, że tekst powinien być akcentowany w kontekście. Odpowiednikami tych znaczników, pod względem formatowania, są oraz . Znacznik stosuje się do wyróżnienia tekstu, nadając mu pogrubienie, co zazwyczaj oznacza, że tekst jest istotny. Z kolei używamy do kursywy, co również może wskazywać na akcentowanie lub wyróżnienie pewnych słów, jednak w sposób bardziej subtelny niż przy pomocy pogrubienia. W praktyce, stosując oraz , dbamy o to, aby nasza treść była bardziej dostępna dla użytkowników, zwłaszcza dla osób korzystających z technologii wspomagających, takich jak czytniki ekranu. Stosowanie znaczników semantycznych zgodnie z dobrymi praktykami zapewnia lepszą interpretację treści przez wyszukiwarki, co może wpływać na SEO. Warto również pamiętać, że pomimo że i mają swoje zastosowania, znacznie lepiej jest używać i w kontekście semantycznym, aby poprawić zrozumienie treści przez maszyny i użytkowników.

Pytanie 7

Stronę internetową zapisano w języku XHTML. Który z kodów stanowi implementację przedstawionego fragmentu strony, jeżeli żadne style CSS nie zostały zdefiniowane?

Początki HTML

W 1980 fizyk Tim Berners-Lee, pracownik CERN,
stworzył prototyp hipertekstowego systemu informacyjnego – ENQUIRE

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

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

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

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

A. D.

B. A.

C. C.

D. B.

Twoja odpowiedź jest poprawna. Wybrałeś opcję B, która przedstawiała poprawną implementację fragmentu strony internetowej napisanej w języku XHTML. W tym fragmencie wykorzystane zostały standardowe tagi XHTML, takie jak <h1> do oznaczenia nagłówka pierwszego poziomu oraz do definiowania akapitu. Dodatkowo w tekście użyte zostały tagi i do odpowiednio pogrubienia i kursywy, co podkreśla ważność wybranych fragmentów tekstu. Tag pozwala na stworzenie przerwy wiersza, co jest szczególnie użyteczne w przypadku długich akapitów tekstu. Pamiętaj, że XHTML jest bardziej rygorystyczną wersją HTML i wymaga zawsze domknięcia tagów. Wiedza na ten temat jest niezwykle ważna podczas tworzenia stron internetowych, a standardy i dobre praktyki branżowe pomagają w utrzymaniu kodu w czytelnej i zrozumiałej formie.

Pytanie 8

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. tr { background-color: Pink; }

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

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

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

Poprawny selektor to tr:hover { background-color: Pink; }, bo dokładnie opisuje sytuację pokazaną na filmie: efekt pojawia się dopiero po najechaniu kursorem na cały wiersz tabeli. Pseudo-klasa :hover w CSS służy właśnie do definiowania stylów w momencie, gdy użytkownik „najeżdża” myszką na dany element. Jeśli więc chcemy, żeby podświetlał się cały rząd tabeli, logiczne i zgodne z dobrymi praktykami jest przypięcie efektu do znacznika tr, a nie do pojedynczych komórek. W praktyce taki zapis stosuje się bardzo często w interfejsach webowych: w panelach administracyjnych, listach zamówień, tabelach z uczniami, produktami, logami systemowymi itd. Dzięki temu użytkownik łatwiej śledzi, który wiersz właśnie ogląda. To niby detal, ale z punktu widzenia UX robi sporą różnicę. Z mojego doświadczenia to jeden z tych prostych trików CSS, które od razu poprawiają „odczuwalną” jakość strony. Ważne jest też to, że :hover jest częścią standardu CSS (opisane m.in. w specyfikacji CSS Selectors Level 3/4) i działa w praktycznie wszystkich współczesnych przeglądarkach. Nie trzeba do tego żadnego JavaScriptu, żadnych skomplikowanych skryptów – czysty CSS. Dobrą praktyką jest również używanie bardziej stonowanych kolorów niż Pink w prawdziwych projektach, np. #f5f5f5 albo lekki odcień niebieskiego, tak żeby kontrast był czytelny i nie męczył wzroku. Warto też pamiętać, że podobny mechanizm możesz zastosować na innych elementach: np. a:hover dla linków, button:hover dla przycisków czy nawet div:hover dla całych kafelków w layoutach. Kluczowe jest to, żeby pseudo-klasa :hover była przypięta dokładnie do tego elementu, który ma reagować na interakcję użytkownika.

Pytanie 9

Grafika powinna być zapisana w formacie GIF, jeśli

A. jest to grafika wektorowa

B. konieczne jest zapisanie obrazu lub animacji

C. istnieje potrzeba zapisu obrazu w formie bez kompresji

D. jest to obraz w technologii stereoskopowej

Format GIF (Graphics Interchange Format) jest powszechnie wykorzystywany do przechowywania obrazów oraz animacji. Dzięki obsłudze przezroczystości oraz możliwości tworzenia prostych animacji, GIF stał się standardem w przypadku grafiki na stronach internetowych. Jego ograniczenie do 256 kolorów sprawia, że idealnie nadaje się do prostych grafik, takich jak logo czy ikony, gdzie nie jest wymagana pełna gama kolorów, co ma miejsce w formatach takich jak JPEG czy PNG. W przypadku animacji, GIF umożliwia zapis wielu klatek w jednym pliku, co pozwala na odtwarzanie sekwencji obrazu bez potrzeby korzystania z dodatkowego oprogramowania. Praktyczne zastosowanie GIF-a można zaobserwować w mediach społecznościowych, gdzie animowane obrazki są często wykorzystywane do wyrażania emocji, a także na stronach internetowych do przedstawiania logo w ruchu. Używanie formatu GIF w kontekście animacji jest zgodne z dobrą praktyką w branży, ponieważ pozwala na efektywne zarządzanie zasobami wizualnymi oraz zwiększa atrakcyjność treści wizualnych.

Pytanie 10

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

B. C.

C. A.

D. D.

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 11

Jakie kodowanie w języku HTML pozwala na sformatowanie paragrafu dla tekstu

 Tekst może być zaznaczony albo istotny dla autora

należy użyć polecenia?

A. Tekst może być zaznaczony albo istotny dla autora

B. Tekst może być zaznaczony albo istotny dla autora

C. Tekst może być zaznaczony albo istotny dla autora

D. Tekst może być zaznaczony albo istotny dla autora

Wybrana odpowiedź jest poprawna, ponieważ stosuje prawidłowe znaczniki HTML do formatowania tekstu. Użycie dla słowa 'zaznaczony' wskazuje, że jest to istotna informacja, podczas gdy dla słowa 'istotny' podkreśla jego znaczenie w kontekście treści. Zgodnie z W3C i HTML5, jest używany do oznaczania części tekstu, która jest wyróżniona w kontekście przeszukiwanym lub istotnym. Oznaczenie tekstu jako nie tylko wskazuje na akcent, ale również ma znaczenie semantyczne, ponieważ może wpłynąć na sposób, w jaki czytniki ekranu interpretują treść, co jest kluczowe dla dostępności. Przykładem zastosowania może być strona internetowa, na której chcemy wyróżnić ważne informacje lub kluczowe definicje, co zwiększa czytelność i funkcjonalność przekazu. Poprawne użycie znaczników HTML jest zgodne z dobrymi praktykami tworzenia stron internetowych, co sprzyja lepszej nawigacji i zrozumieniu tekstu przez użytkowników.

Pytanie 12

Jaką wartość w formacie heksadecymalnym będzie miała barwa określona kodem rgb(255, 10, 22)?

A. #FF0A16

B. #2551022

C. #FF1016

D. #251022

Odpowiedź #FF0A16 jest poprawna, ponieważ kod RGB (255, 10, 22) jest konwertowany na format heksadecymalny, gdzie każdy z trzech kanałów (czerwony, zielony, niebieski) jest przedstawiany przez dwie cyfry szesnastkowe. W kodzie RGB wartość 255 dla kanału czerwonego odpowiada szesnastkowej wartości FF, wartość 10 dla kanału zielonego odpowiada wartości 0A, a wartość 22 dla kanału niebieskiego odpowiada wartości 16. Łącząc te wartości, otrzymujemy #FF0A16. Praktyczne zastosowania kodów kolorów w formacie heksadecymalnym są powszechne w projektowaniu stron internetowych oraz grafice komputerowej, gdzie umożliwiają precyzyjne definiowanie kolorów. Warto również pamiętać, że standard W3C zaleca używanie formatu heksadecymalnego w CSS, co czyni go bardziej efektywnym dla deweloperów. Ponadto, znajomość konwersji kolorów RGB na heksadecymalny jest kluczowa dla każdego, kto zajmuje się designem i programowaniem wizualnych interfejsów użytkownika.

Pytanie 13

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

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

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

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

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

Błędy, jakie pojawiają się przy używaniu float i clear, zazwyczaj wynikają z niezrozumienia ich funkcji w kontekście układu stron. Przypisanie float tylko do bloku 5 oraz clear dla bloku 2 pokazuje, że blok 2 powinien być pod blokiem 5, co nie zgadza się z tym, co jest w diagramie, bo blok 2 jest nad blokami 3 i 4. Z kolei przypisanie float dla bloków 3 i 4 oraz clear dla bloku 5 sugeruje, że te dwa bloki powinny być w jednej linii, a blok 5 miałby być poniżej. To jest poprawne, ale nie naprawia całkowicie układu, bo blok 2 nie jest w tym ujęciu uwzględniony. Cała koncepcja przypisania float tylko dla bloku 2 i clear dla bloków 3 i 4 też ma swoje wady, bo blok 2 ma za zadanie otaczać bloki 3 i 4, ale nie może być przesunięty w taki sposób, żeby osiągnąć układ z diagramu. Często problem ze zrozumieniem float i clear bierze się z błędnego rozumienia relacji między elementami i ich wpływu na układ całościowy. Dlatego rozwiązaniem jest dokładne przypisanie float tym elementom, które trzeba przesunąć, oraz zastosowanie clear tam, gdzie ma się zakończyć efekt przesunięcia. W ten sposób elementy będą się wyświetlały według oczekiwanego układu. Myślę, że zrozumienie tych zasad jest kluczowe do tworzenia poprawnych i estetycznych układów na stronach www.

Pytanie 14

Który z elementów HTML stanowi blokowy znacznik?

A. img

B. strong

C. p

D. span

Znacznik (paragraf) jest klasyfikowany jako element blokowy, co oznacza, że zajmuje całą szerokość dostępnego miejsca w swoim kontenerze i jest renderowany na nowej linii. Elementy blokowe są fundamentalne w układzie strony internetowej, ponieważ pozwalają na strukturalne grupowanie treści w sposób, który jest zrozumiały dla przeglądarek internetowych oraz dla użytkowników. Przykłady użycia elementu obejmują tworzenie akapitów w artykułach, opisów produktów, czy innych dłuższych fragmentów tekstu. Dobre praktyki wskazują, że należy stosować dla tekstu, który ma być wyświetlany jako samodzielny blok, co poprawia czytelność i dostępność treści. Ponadto, zgodnie z wytycznymi W3C, stosowanie znaczników blokowych, takich jak , przyczynia się do lepszej struktury dokumentu HTML oraz ułatwia jego interpretację przez roboty wyszukiwarek, co jest kluczowe w kontekście SEO. Warto również zauważyć, że w CSS można łatwo stylizować znaczniki blokowe, co daje większą kontrolę nad wyglądem i układem strony.

Pytanie 15

Właściwość CSS animation-duration określa

A. czas trwania jednego cyklu animacji.

B. liczba powtórzeń animacji.

C. opóźnienie startu animacji.

D. kierunek rozpoczęcia animacji.

Właściwość CSS `animation-duration` dokładnie określa, ile czasu trwa jeden pełny cykl animacji – od początku do końca zdefiniowanych klatek kluczowych (`@keyframes`). Jeśli ustawisz `animation-duration: 2s;`, to przeglądarka ma 2 sekundy na przejście od stanu początkowego do końcowego w danej animacji. Moim zdaniem warto to sobie wyobrazić jak czas trwania jednego „przejścia” animacji, zanim ewentualnie zacznie się kolejny obrót, jeśli używasz `animation-iteration-count`. Technicznie jest to czas trwania pojedynczej iteracji, zgodnie ze specyfikacją CSS Animations (W3C). W praktyce wygląda to np. tak: `.box { animation-name: fadeIn; animation-duration: 1.5s; }`. Tu element będzie się „pojawiał” przez 1,5 sekundy. Jeśli dodasz `animation-iteration-count: 3;`, to ta 1,5 sekundowa animacja zostanie odtworzona trzy razy, ale sama długość pojedynczego cyklu nadal wynosi 1,5 s. Częsty dobry nawyk w front-endzie to trzymanie się krótkich, płynnych animacji, zwykle w zakresie 150–500 ms dla prostych efektów (hover, focus), a dłuższych, do 1–2 sekund, dla bardziej złożonych przejść, żeby użytkownik nie czuł się znużony. `animation-duration` przyjmuje wartości w sekundach (`s`) lub milisekundach (`ms`), np. `300ms`. Można też ustawiać różne czasy dla wielu animacji naraz, rozdzielając wartości przecinkami. Warto pamiętać, że jeśli nie podasz `animation-duration`, domyślna wartość to `0s`, czyli animacja tak naprawdę się nie odtworzy – to jeden z częstszych powodów, czemu początkującym „nie działa animacja”. Dobrą praktyką jest zawsze jawne ustawianie `animation-duration` oraz spójne używanie jednostek czasu w całym projekcie, żeby interfejs wyglądał konsekwentnie i profesjonalnie.

Pytanie 16

W formularzu HTML wykorzystano znacznik <input>. Wyświetlane pole będzie przeznaczone do wprowadzania maksymalnie

A. 20 znaków, które są widoczne podczas wpisywania

B. 30 znaków, które nie są widoczne w polu tekstowym

C. 30 znaków, które są widoczne podczas wpisywania

D. 20 znaków, które nie są widoczne w polu tekstowym

Zrozumienie działania atrybutów size i maxlength w znaczniku <input> jest kluczowe dla prawidłowego projektowania formularzy HTML. Atrybut size określa, ile znaków będzie widocznych w polu tekstowym, jednak to nie ogranicza faktycznej liczby znaków, które można wprowadzić. Działa to bardziej jako wskazówka dla użytkownika, jak szerokie może być pole, aby pomieścić określoną liczbę widocznych znaków. Dlatego odpowiedź, że size determinuje maksymalną ilość wprowadzanych znaków, jest błędna. Natomiast atrybut maxlength rzeczywiście ogranicza liczbę znaków, które można wprowadzić. Dzięki temu atrybutowi możemy kontrolować długość danych wejściowych, co jest często wykorzystywane w aplikacjach wymagających wprowadzania haseł lub innych danych tekstowych o określonej długości. W przypadku inputów typu password, wprowadzone znaki są maskowane, co oznacza, że użytkownik nie widzi tego, co wpisuje, a jego odpowiednik wprowadzenia tekstu typu tekstowego nie działa w ten sam sposób. Odpowiedzi zakładające, że dane są widoczne lub że size wpływa na długość wprowadzanych znaków, wynikają z niepełnego zrozumienia działania poszczególnych atrybutów HTML i ich roli w projektowaniu interfejsów użytkownika. Dobre praktyki projektowania formularzy wymagają jasnego rozróżnienia tych dwóch funkcji, co znacznie zwiększa użyteczność i dostępność aplikacji webowych oraz ułatwia użytkownikom korzystanie z formularzy zgodnie z ich przeznaczeniem.

Pytanie 17

W katalogu www znajdują się foldery html oraz style, w których umieszczone są odpowiednio pliki o rozszerzeniu html i pliki o rozszerzeniu css. Aby dołączyć styl.css do pliku HTML, należy użyć

A. <link rel="Stylesheet" type="text/css" href="/www/style/styl.css" />

B. <link rel="Stylesheet" type="text/css" href="/styl.css" />

C. <link rel="Stylesheet" type="text/css" href="/style/styl.css" />

D. <link rel="Stylesheet" type="text/css" href="/../style/styl.css" />

Aby prawidłowo dołączyć plik styl.css do dokumentu HTML, kluczowe jest zrozumienie struktury folderów oraz odpowiedniego wykorzystania ścieżek względnych i bezwzględnych. Odpowiednia linka do stylów CSS jest kluczowa dla prawidłowego wyświetlania strony w przeglądarkach. W przypadku tej odpowiedzi użycie href='/../style/styl.css' jest poprawne, ponieważ wskazuje, że plik styl.css znajduje się w folderze 'style', który jest na tym samym poziomie co folder 'www'. Przykładowo, jeśli nasza struktura folderów wygląda następująco: www -> html (tutaj znajduje się plik HTML) oraz www -> style (tutaj są pliki CSS), to aby uzyskać dostęp do folderu 'style' z poziomu folderu 'html', musimy cofnąć się do folderu nadrzędnego ('..'), a następnie wskazać folder 'style'. W praktyce, dobrym rozwiązaniem jest również użycie narzędzi do analizy oraz debuggingu w przeglądarkach, które pozwalają zidentyfikować błędy związane z ładowaniem stylów. Standardy W3C dotyczące HTML i CSS również zalecają stosowanie odpowiednich ścieżek, co ma istotny wpływ na optymalizację i prawidłowe działanie strony.

Pytanie 18

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

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

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

B. linia kreskowa; grubość 2 px; marginesy poza 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 między tekstem a ramką 15 px

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 19

Taki styl CSS sprawi, że na stronie internetowej

ul{ list-style-image: url('rys.gif'); }

A. rys.gif wyświetli się jako tło dla listy nienumerowanej

B. punkt listy nienumerowanej będzie rys.gif

C. rys.gif stanie się ramką dla listy nienumerowanej

D. każdy punkt listy zyska osobne tło z grafiki rys.gif

Deklaracja CSS ul{ list-style-image: url('rys.gif'); } powoduje, że każdy element listy nienumerowanej (ul) używa obrazu rys.gif jako punktora. Właściwość list-style-image pozwala na zamianę domyślnego stylu punktów listy, takiego jak kropki czy kwadraty, na dowolny obrazek. Jest to przydatne, gdy chcemy nadać stronie unikalny wygląd lub dostosować ją do identyfikacji wizualnej marki. W praktyce oznacza to, że zamiast klasycznego punktora, użytkownicy zobaczą wybrany obraz, co może wpłynąć na estetykę i czytelność strony. Ważne jest, aby obraz był odpowiednio skalowany, aby nie zaburzał układu listy. List-style-image to standardowa właściwość CSS uznawana przez większość przeglądarek, co czyni ją uniwersalnym narzędziem w rękach projektanta stron. W procesie projektowania warto upewnić się, że wybrany obrazek jest dostępny dla wszystkich użytkowników, co można osiągnąć np. poprzez dodanie atrybutu alt w wersji tekstowej listy dla lepszej dostępności.

Pytanie 20

Jakie wyjście zostanie pokazane po zrealizowaniu podanego kodu HTML?

A. Rys.A

B. Rys. D

C. Rys. C

D. Rys. B

Poprawna odpowiedź to Rys. D ponieważ przedstawiony kod HTML zawiera dwie listy. Pierwsza lista to lista uporządkowana <ol> z trzema elementami <li> gdzie drugi element zawiera listę nieuporządkowaną <ul> z dwoma elementami. Lista zagnieżdżona używa standardowego symbolu kropki jako punktora. Druga lista <ol> zaczyna się od litery D dzięki atrybutowi type="A" i start="4". To powoduje że ostatni element wyświetlany jest jako D. punkt. Ta właściwość HTML jest używana do personalizacji wyglądu list aby dopasować je do wymagań projektowych lub edytorskich. Stosowanie atrybutów takich jak type i start pozwala na większą kontrolę nad sposobem wyświetlania list co jest zgodne z dobrymi praktykami w tworzeniu przejrzystych i spójnych interfejsów użytkownika. Personalizacja list może być użyteczna w dokumentach technicznych raportach czy aplikacjach które wymagają dokładnego odwzorowania struktury danych.

Pytanie 21

Znacznik <s> w HTML generuje

A. podkreślenie tekstu

B. przekreślenie tekstu

C. migotanie tekstu

D. pochylenie tekstu

Znacznik <s> w HTML służy do oznaczania tekstu, który jest przekreślony. To daje znać, że dany fragment już nie jest aktualny albo jest błędny. Myślę, że to bardzo ważne, bo z perspektywy semantyki w HTML, pozwala lepiej zrozumieć, co się dzieje na stronie. Użytkownicy korzystający z czytników ekranu mogą łatwiej zrozumieć, że coś jest nieaktualne. Przykładem mogą być sklepy internetowe, gdzie przekreślenie starej ceny pokazuje, że produkt jest teraz w promocji. Dobrze jest pamiętać, że stosowanie tych znaczników dobrze wpływa na strukturę dokumentu, co jest zgodne z wytycznymi W3C i poprawia dostępność w sieci.

Pytanie 22

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

A. Początki HTMLW 1980 fizyk Tim Berners-Lee, pracownik CERN,<hr /> stworzyłprototyp hipertekstowego systemu informacyjnego - ENQUIRE

B. Początki HTMLW 1980 fizyk Tim Berners-Lee, pracownik CERN, stworzyłprototyp hipertekstowego systemu informacyjnego - ENQUIRE

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

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

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

Pytanie 23

W przypadku podanego fragmentu kodu walidator HTML zgłosi błąd, ponieważ <img src="kwiat.jpg alt="kwiat">

A. użyto niewłaściwego znacznika do wyświetlenia obrazu

B. zastosowano nieznany atrybut alt

C. brak obrazu kwiat.jpg

D. nie zamknięto cudzysłowu

W przedstawionym kodzie HTML występuje błąd związany z niedomknięciem cudzysłowu dla atrybutu 'src'. Prawidłowa składnia powinna wyglądać następująco: <img src="kwiat.jpg" alt="kwiat">. Brak cudzysłowu po 'kwiat.jpg' uniemożliwia poprawne zinterpretowanie kodu przez przeglądarki, co skutkuje błędem walidacji. Zasady walidacji kodu HTML są zgodne z wytycznymi W3C, które zalecają, aby każdy atrybut był zamknięty cudzysłowem. Poprawność kodu nie tylko wpływa na jego działanie, ale również na dostępność strony oraz SEO. Użytkownicy, którzy poruszają się po stronach bez pełnej obsługi HTML, mogą napotkać problemy z wyświetlaniem obrazów. W praktyce, zawsze warto stosować dobregi praktyki kodowania, takie jak użycie linterów do sprawdzania poprawności kodu przed jego publikacją, aby uniknąć takich błędów.

Pytanie 24

Zaprezentowano kod tabeli o wymiarach 3x2. Jaką zmianę wprowadzić w jej drugim wierszu, aby tabela była zgodna z obrazkiem ukazującym niewidoczny wiersz?

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

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

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

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

Stosowanie stylu display: none w tabeli spowodowałoby całkowite usunięcie wiersza z układu, co oznacza, że nie tylko zawartość, ale i przestrzeń, którą zajmuje wiersz, zniknęłaby. To wpływa na pozostałe elementy tabeli, zmieniając jej układ i potencjalnie zaburzając całość kompozycji. Z kolei użycie clear: none w tym kontekście jest błędne, ponieważ clear dotyczy przepływu floatów, a nie bezpośrednio ukrywania lub pokazywania elementów. Ustawienie display: table-cell jest także nieodpowiednie, gdyż odnosi się do właściwości display elementów, które powinny być traktowane jako komórki tabeli, a nie całe wiersze. Typowym błędem jest mylenie visibility: hidden z display: none; pierwsza opcja powoduje ukrycie zawartości, ale zachowanie miejsca, co jest ważne w kontekście dynamicznych układów stron. Błędne rozumienie, jak różne style wpływają na układ dokumentu, może prowadzić do problemów z responsywnością i dostępnością projektu. Dobrym zwyczajem jest dokładne testowanie efektów używanych właściwości CSS, aby zrozumieć ich praktyczny wpływ na HTML, co jest kluczowe w zaawansowanym projektowaniu stron internetowych.

Pytanie 25

Na stronie WWW umieszczono obrazek, a następnie akapit. Aby obrazek był wyświetlany przez przeglądarkę w tej samej linii co akapit, po lewej stronie tekstu akapitu, w stylu CSS dla obrazka należy ustawić formatowanie

A. alt: left;

B. float: left;

C. style: left;

D. align: left;

Odpowiedź "float: left;" jest poprawna, ponieważ właściwość CSS "float" służy do określenia, w jaki sposób elementy są rozmieszczane na stronie. Ustawienie "float: left;" dla rysunku sprawia, że zostaje on umieszczony po lewej stronie swojego kontenera, a pozostałe elementy, takie jak akapit, mogą układać się obok niego. Jest to powszechnie stosowana technika w układach stron internetowych, pozwalająca na osiągnięcie płynnych i responsywnych rozkładów treści. Na przykład, w przypadku gdy mamy obrazek i akapit, stosując float, obrazek zostanie wypchnięty w lewo, a tekst akapitu automatycznie dostosuje się, zajmując dostępną przestrzeń obok rysunku. Warto również dodać, że po zastosowaniu float, należy zadbać o usunięcie efektu 'zatrzymywania się' rysunków, co można osiągnąć poprzez stosowanie właściwości "clear" w odpowiednich miejscach, aby nie zakłócać układu sąsiednich elementów. Tego typu techniki są fundamentem projektowania stron, zgodnie z zasadami dobrych praktyk UX/UI oraz standardami W3C. W przypadku bardziej złożonych układów warto również rozważyć zastosowanie Flexbox lub Grid Layout, które oferują większą elastyczność i kontrolę nad położeniem elementów w nowoczesnych projektach.

Pytanie 26

W CSS zapis w postaci ```h1::first-letter{color:red;}``` spowoduje, że kolor czerwony będzie dotyczył

A. pierwszej litery nagłówka pierwszego poziomu

B. tekstów nagłówka pierwszego poziomu

C. pierwszej linii akapitu

D. pierwszej litery nagłówka drugiego poziomu

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

Pytanie 27

Która definicja CSS wskazuje na formatowanie nagłówka h1: tekst z przekreśleniem, z odstępami między słowami wynoszącymi 10 px oraz w kolorze czerwonym?

A. B

B. C

C. A

D. D

Odpowiedź A jest w porządku, bo dobrze odpowiada na to, co pytanie wymaga. Deklaracja 'text-decoration: overline;' dodaje linię nad tekstem, a nie pod nim. Właściwie to mega ważne, bo można łatwo pomylić nadkreślenie z podkreśleniem. Plus, 'word-spacing: 10px;' ustawia fajny odstęp między wyrazami, co sprawia, że nagłówki wyglądają lepiej i są bardziej czytelne. A jak ustawiłeś kolor tekstu na 'red', to wszystko jest super zgodne z tym, co miało być w zadaniu. Używanie takich definicji CSS to standard w tworzeniu stron, bo dobrze stylizowane nagłówki pomagają w organizacji treści i poprawiają wrażenia użytkowników. Pamiętaj, że sensowne i dobrze zdefiniowane style CSS to nie tylko wygoda, ale też ułatwiają późniejsze poprawki dla innych programistów.

Pytanie 28

Aby uczynić stronę internetową bardziej dostępną dla osób niewidomych, należy przypisać obrazom wyświetlanym za pomocą znacznika img odpowiedni atrybut

A. text

B. alt

C. style

D. src

Atrybut alt (alternatywny) jest niezbędnym elementem w kontekście dostępności stron internetowych. Jego podstawową funkcją jest dostarczenie opisu graficznego treści zawartych w obrazach dla użytkowników korzystających z czytników ekranu. Dzięki temu niewidomi lub słabo widzący użytkownicy mogą zrozumieć, co przedstawia dany obraz. Przykładowo, jeśli na stronie znajduje się zdjęcie przedstawiające psa bawiącego się w parku, atrybut alt mógłby mieć wartość "Pies bawiący się w parku na zielonej trawie". To pozwala użytkownikowi na mentalne odtworzenie obrazu i kontekstu. W praktyce, zgodnie z wytycznymi WCAG (Web Content Accessibility Guidelines), każdy obraz użyty na stronie internetowej powinien mieć przypisany opis w atrybucie alt, co zwiększa dostępność i użyteczność treści. Warto również pamiętać, że atrybut alt powinien być używany tylko w sytuacjach, gdy obraz ma znaczenie dla treści; obrazy dekoracyjne powinny mieć pusty atrybut alt (alt=""). Dobre praktyki w zakresie dostępności podkreślają, że właściwe stosowanie atrybutów alt nie tylko wspiera użytkowników z niepełnosprawnościami, ale także poprawia SEO, gdyż wyszukiwarki lepiej rozumieją treści obrazów.

Pytanie 29

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

A. organizacji danych na serwerze WWW

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

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

D. bazy danych zawierającej informacje prezentowane na stronie

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

Pytanie 30

Aby włączyć zewnętrzny skrypt JavaScript zatytułowany skrypt.js, należy umieścić w kodzie HTML

A. <link rel="script" href="skrypt.js" />

B. <link rel="JavaScript" type="js" href="skrypt.js" />

C. <script src="skrypt.js"></script>

D. <script> skrypt.js </script>

Odpowiedź <script src="skrypt.js"></script> jest poprawna, ponieważ jest to standardowy sposób dołączania zewnętrznych plików JavaScript do dokumentu HTML. Element <script> informuje przeglądarkę, że zawiera on kod JavaScript, a atrybut src wskazuje na lokalizację pliku, który ma zostać załadowany. W praktyce, umieszczanie skryptów w tagu <script> z atrybutem src umożliwia oddzielenie logiki skryptowej od struktury HTML, co jest zgodne z zasadami programowania modularnego i ułatwia zarządzanie kodem. Taka struktura pozwala na łatwe ponowne wykorzystanie skryptów w różnych projektach bez konieczności kopiowania kodu. Ponadto, dobrym zwyczajem jest umieszczanie skryptów na końcu sekcji <body>, co pozwala na załadowanie całej zawartości HTML przed wykonaniem skryptu, co przekłada się na lepszą wydajność i doświadczenia użytkownika.

Pytanie 31

Które z formatowań nie jest wyrażone w języku CSS?

A. Fragment pliku strona.html:

<style>
body { background-color: yellow; }
</style>

B. Fragment pliku formatowanie.css:

body { background-color: yellow; }

C. Fragment pliku strona.html:

<body bgcolor="yellow">

D. Fragment pliku strona.html:

<body style="background-color: yellow;" >

A. D.

B. A.

C. B.

D. C.

Twoja odpowiedź nie była prawidłowa. Pytanie dotyczyło rozróżnienia, które formatowanie nie jest wyrażone w języku CSS. W przypadku CSS, istotne jest zrozumienie, że jest to język wykorzystywany do opisu wyglądu strony internetowej napisanej w HTML. CSS pozwala na zapewnienie spójnego wyglądu dla różnych elementów na stronie, a także na dostosowanie wyglądu do różnych urządzeń i rozmiarów ekranu. Fragment A i fragment B pokazują styl wewnątrz dokumentu HTML oraz styl z zewnętrznego pliku CSS. Oba są prawidłowymi zastosowaniami CSS. W przypadku fragmentu D, mimo że jest to tzw. "inline CSS", który jest stosowany bezpośrednio do elementu HTML, nadal wykorzystuje składnię CSS. Błędem był wybór jednego z tych fragmentów jako odpowiedzi, ponieważ wszystkie wykorzystują CSS. Ostatecznie, jedynie fragment C nie używa CSS. Zamiast tego, używa przestarzałego atrybutu HTML "bgcolor" do określenia koloru tła. Ten atrybut nie jest elementem CSS i jest obecnie uważany za przestarzały. Przy projektowaniu stron internetowych, zaleca się stosowanie CSS zamiast bezpośredniego formatowania HTML, aby zapewnić większą kontrolę nad wyglądem i zachowaniem strony.

Pytanie 32

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. getElement('p');

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

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

D. getElementById('p1');

Metoda getElementsByTagName('p')[0] jest prawidłowym sposobem odwołania się do pierwszego elementu w dokumencie HTML. Funkcja getElementsByTagName zwraca kolekcję wszystkich elementów o określonej nazwie tagu. W przypadku użycia tagu 'p', funkcja zwraca tablicę wszystkich paragrafów. Aby uzyskać dostęp do pierwszego paragrafu, korzystamy z indeksu [0], co jest zgodne z konwencją numerowania od zera w językach programowania. Praktyczne zastosowanie tej metody obejmuje manipulację treścią lub stylami pierwszego paragrafu, na przykład zmiana jego tekstu za pomocą innerHTML lub dodanie klasy CSS w celu zmiany jego wyglądu. Stosowanie getElementsByTagName jest zgodne z powszechnymi standardami i dobrymi praktykami w pracy z DOM (Document Object Model) w JavaScript. Ważne jest zrozumienie tego mechanizmu, aby efektywnie operować na elementach HTML oraz tworzyć dynamiczne i interaktywne strony internetowe. Warto również pamiętać, że metoda ta zwraca dynamiczną kolekcję, co oznacza, że zmiany w DOM automatycznie wpływają na zawartość zwróconej kolekcji.

Pytanie 33

Jaką maksymalną liczbę znaczników <td> można zastosować w tabeli składającej się z trzech kolumn i trzech wierszy, która nie zawiera złączeń między komórkami oraz wiersza nagłówkowego?

A. 12

B. 6

C. 3

D. 9

Odpowiedź 9 jest poprawna, ponieważ w tabeli składającej się z trzech kolumn i trzech wierszy, każdy wiersz może zawierać trzy komórki danych. Zatem, aby obliczyć maksymalną liczbę znaczników <td>, należy pomnożyć liczbę kolumn przez liczbę wierszy: 3 kolumny x 3 wiersze = 9 znaczników <td>. Ważne jest, aby pamiętać, że w kontekście HTML, znacznik <td> służy do definiowania komórek tabeli i jest używany tylko do umieszczania danych w tabeli. Przy projektowaniu tabel w HTML, dobrym rozwiązaniem jest stosowanie przejrzystej struktury oraz odpowiednich znaczników, aby poprawić czytelność i dostępność stron. Zgodnie z dobrymi praktykami, zawsze warto używać znaczników <th> do nagłówków kolumn, ale w tym przypadku, zgodnie z treścią pytania, zakładamy, że nie stosujemy wiersza nagłówkowego. W efekcie maksymalna liczba komórek, które można wykorzystać w takiej tabeli, wynosi 9. Przykładem zastosowania takiej tabeli może być wyświetlanie danych o produktach, gdzie każda komórka zawierać może różne informacje, takie jak nazwa produktu, cena i ilość.

Pytanie 34

Jaką rozdzielczość należy przyjąć, aby uzyskać proporcje obrazu 16:9, zakładając, że piksel ma formę kwadratu?

A. 800 na 480 pikseli

B. 320 na 240 pikseli

C. 1366 na 768 pikseli

D. 2560 na 2048 pikseli

Pozostałe opcje rozdzielczości nie spełniają wymogów proporcji 16:9. Rozdzielczość 320 na 240 pikseli, choć popularna w starszych urządzeniach, ma proporcje 4:3, co jest niewłaściwe dla szerokokątnych zastosowań i nie oddaje pełni nowoczesnych treści wizualnych. W przypadku rozdzielczości 800 na 480 pikseli, proporcje wynoszą około 15:9, co również nie jest zgodne z wymaganym standardem 16:9. Ta rozdzielczość może być używana w niektórych telefonach komórkowych, ale nie nadaje się do oglądania współczesnych filmów i programów telewizyjnych, które są produkowane w formacie 16:9. Natomiast rozdzielczość 2560 na 2048 pikseli, mimo że oferuje wysoką jakość obrazu, ma proporcje 5:4, co jest zbliżone do formatu 4:3 i nie odpowiada wymaganiom współczesnych treści wizualnych. Proporcje te są niestandardowe i nie są idealne do wyświetlania materiałów wideo, co ogranicza ich zastosowanie w nowoczesnych mediach.

Pytanie 35

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

A. rgb(21,16,254)

B. rgb(21,16,255)

C. rgb(15,10,FE)

D. rgb(21,16,FE)

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

Pytanie 36

Według zasad walidacji HTML5, właściwym zapisem dla znacznika hr jest

A. </hr?>

B. </ hr>

C. <hr>

D. </ hr />

Znaczniki HTML mają ściśle określoną składnię, której nieprzestrzeganie prowadzi do błędów interpretacji przez przeglądarki oraz problemów z dostępnością. W przypadku odpowiedzi, które zawierają '/ hr', '/hr?>' oraz '/ hr />', pojawia się nieporozumienie dotyczące struktury znaczników samodzielnych. W HTML5 znaczniki takie jak <hr> są elementami samodzielnymi, co oznacza, że nie potrzebują ani otwierającego, ani zamykającego znacznika. Użycie '/ hr' sugeruje, że element wymaga zamknięcia, co jest błędne. Ponadto, '/hr?>' zawiera nieprawidłowy znak '>', który w kontekście HTML nie ma sensu, co skutkuje błędem w kodzie. ' />' w odpowiedzi '/ hr />' może powodować mylenie z XHTML, gdzie rzeczywiście wymagane jest zamknięcie dla elementów samodzielnych. XHTML i HTML5 to różne standardy, a HTML5 został zaprojektowany w taki sposób, aby uprościć pisanie kodu i zwiększyć jego czytelność. Typowe błędy myślowe obejmują mylenie zasad dotyczących XHTML z HTML5 oraz niewłaściwe rozumienie, że wszystkie elementy muszą być zamykane. Ważne jest, aby zrozumieć różnice między tymi dwiema technologiami oraz stosować aktualne standardy, aby zapewnić kompatybilność i poprawność kodu.

Pytanie 37

W HTML, aby ustawić tytuł dokumentu na "Moja strona", który pojawi się na karcie przeglądarki internetowej, należy użyć zapisu

A. <head>Moja strona</head>

B. <meta title="Moja strona">

C. <title>Moja strona</title>

D. <meta name="title" content="Moja strona">

Element <title> w HTML jest naprawdę ważny, bo to właśnie on ustala, co zobaczysz na zakładce w przeglądarce. Powinien być umieszczony w sekcji <head>, co jest zgodne z tym, co mówi W3C. Poprawny zapis wygląda tak: <title>Moja strona</title>, co sprawia, że "Moja strona" będzie się pokazywać jako tytuł w przeglądarce. Tytuł strony ma spore znaczenie dla SEO, bo wpływa na to, jak strona jest pozycjonowana w wynikach wyszukiwania. Warto, żeby tytuł był krótki, ale jednocześnie zawierał istotne informacje, a najlepiej, żeby nie miał więcej niż 60 znaków, żeby się nie obcinał w wynikach. Fajnie też umieścić w tytule kluczowe słowa, które opisują, o czym jest strona, bo to może zwiększyć jej atrakcyjność i CTR. Dobrze skonstruowany tytuł to też lepsza dostępność, bo ułatwia użytkownikom poruszanie się i orientowanie w otwartych zakładkach.

Pytanie 38

Jakie jest znaczenie powtarzania w zdefiniowanym stylu CSS?

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

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

B. obrazu umieszczonego przy użyciu znacznika img

C. obrazu umieszczonego w tle strony w poziomie

D. obrazu umieszczonego w tle strony w pionie

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 39

Którego atrybutu należy użyć 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. src

B. href

C. alt

D. cite

Niestety, twoja odpowiedź nie jest poprawna. Atrybut 'cite' w znaczniku <blockquote> jest używany do definiowania źródła cytatu, a nie 'alt', 'src' ani 'href'. Atrybut 'alt' jest używany w obrazach jako tekst alternatywny, który jest wyświetlany, gdy obraz nie może być ładowany lub jest odczytywany przez czytniki ekranowe. Z kolei 'src' jest atrybutem, który określa ścieżkę do obrazu lub innego zasobu multimedialnego. 'href' jest używany w znacznikach 'a' i 'link' do określenia URL strony lub innego zasobu, do którego prowadzi link. Pomyłka ta może wynikać z braku zrozumienia różnych zastosowań atrybutów w HTML. Pamiętaj, że każdy atrybut ma swoje specyficzne zastosowanie i nie są one zamienne.

Pytanie 40

Metainformacja “Description" zawarta w pliku źródłowym HTML powinna zawierać

<head>
     <meta name="Description" content="..." >
 </head>

A. opis, co znajduje się na stronie.

B. nazwę programu, przy użyciu którego została stworzona strona.

C. wyrazy kluczowe, z których korzystają wyszukiwarki sieciowe.

D. informację, kto jest autorem strony.

Poprawna odpowiedź to 'opis, co znajduje się na stronie'. Metainformacja 'Description' w pliku źródłowym HTML jest wykorzystywana przez wyszukiwarki internetowe do wyświetlania opisu strony w wynikach wyszukiwania. Dzięki temu użytkownik może zobaczyć na pierwszy rzut oka, czy strona jest związana z jego zapytaniem, czy też nie. Jest to jedno z kluczowych narzędzi w SEO (Search Engine Optimization), które ma na celu zwiększenie widoczności strony w wynikach wyszukiwania. W praktyce, opis powinien być krótki, zwięzły i zawierać ważne informacje o treści strony. Dobrą praktyką jest również uwzględnienie kluczowych słów, na które użytkownicy mogą szukać. Opis ten powinien być zrozumiały dla użytkowników, a także jest to miejsce, gdzie można wykorzystać strategie marketingowe, aby zachęcić do odwiedzenia strony.

Rozpocznij nowy egzamin

Powrót do strony głównej