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: 17 lutego 2026 10:53
Data zakończenia: 17 lutego 2026 11:08

Egzamin niezdany

Wynik: 19/40 punktów (47,5%)

Wymagane minimum: 20 punktów (50%)

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Który selektor stosuje formatowanie dla akapitów tekstu z klasą tekst oraz dla elementu blokowego o ID obrazki?

A. p.tekst + div#obrazki

B. p#tekst + div.obrazki

C. p#tekst, div.obrazki

D. p.tekst, div#obrazki

Wybór selektorów w odpowiedziach niepoprawnych często wynika z nieporozumienia dotyczącego składni CSS oraz specyfiki selektorów. W przypadku selektora 'p#tekst', należy zauważyć, że nie jest on poprawny, ponieważ identyfikator (ID) nie może być użyty w kontekście elementu, który już ma przypisaną klasę. W CSS, ID powinno być unikalne dla danego dokumentu, a klasa może być stosowana wielokrotnie. W ten sposób, 'p#tekst' sugeruje element <p> z ID 'tekst', co koliduje z ideą używania klas. Dalsza analiza selektorów jak 'p.tekst + div.obrazki' wskazuje na zastosowanie kombinacji selektorów, co nie pasuje do wymagań zadania. Operator '+' wskazuje na sąsiednie elementy, co oznacza, że styl będzie stosowany tylko do <div> bezpośrednio po <p>, co w przypadku tej konkretnej logiki nie wprowadza pożądanych efektów. Podobnie, selektor 'div.obrazki' sugeruje, że klasa 'obrazki' może być stosowana do każdego elementu <div>, co nie odnosi się do konkretnego ID. W praktyce, aby wyeliminować błędy, zaleca się gruntowne zrozumienie hierarchii i specyfiki selektorów w CSS oraz ich zastosowania w kontekście HTML. Przykładowo, stosując poprawny selektor, można uniknąć nadpisywania stylów przez inne reguły i zapewnić, że wszystkie elementy są odpowiednio stylizowane zgodnie z zamierzeniami projektowymi.

Pytanie 2

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

A. walidacji strony internetowej.

B. publikacji strony internetowej.

C. debugowania skryptu na stronie.

D. kompilacji skryptu na stronie.

Wszystkie pozostałe odpowiedzi dotyczą różnych aspektów tworzenia i zarządzania stronami internetowymi, ale nie są związane z funkcjonalnością programu FileZilla. Kompilacja skryptu na stronie jest procesem, w którym kod źródłowy jest przekształcany w format wykonywalny, co jest zazwyczaj zarezerwowane dla języków programowania, takich jak C++ czy Java, a nie dla aplikacji do przesyłania plików. Walidacja strony internetowej odnosi się do procesu sprawdzania, czy kod HTML i CSS spełniają określone standardy, co można zrobić za pomocą narzędzi takich jak W3C Validator. Debugowanie skryptu na stronie z kolei polega na identyfikacji i naprawie błędów w kodzie, co najczęściej wymaga użycia dedykowanych narzędzi do debugowania w przeglądarkach, jak Chrome DevTools, a nie programu do przesyłania plików. Typowym błędem myślowym jest zakładanie, że jedno narzędzie może pełnić wiele ról w procesie tworzenia stron, podczas gdy w rzeczywistości każdy etap wymaga specjalistycznych narzędzi dostosowanych do konkretnych zadań. Zrozumienie, jakie narzędzie jest odpowiednie do danego zadania, jest kluczowe w pracy nad projektami webowymi, co stanowi fundamentalną część profesjonalizmu w branży IT.

Pytanie 3

W języku HTML, aby uzyskać efekt podobny do tego w przykładzie, trzeba użyć konstrukcji

A. <p><strike>Duży tekst zwykły tekst</p>

B. <p><big>Duży tekst</p> zwykły tekst

C. <p><big>Duży tekst</big> zwykły tekst</p>

D. <p><strike>Duży tekst</strike> zwykły tekst</p>

Odpowiedź jest prawidłowa, ponieważ w języku HTML, aby zwiększyć rozmiar czcionki dla części tekstu, można użyć znacznika <big>. Znacznik ten powoduje, że tekst wewnątrz jest wyświetlany w większym rozmiarze niż tekst otaczający. Jest to przydatne w sytuacjach, gdy chcemy wyróżnić część tekstu bez stosowania zaawansowanego stylu CSS. Chociaż <big> jest uznawany za przestarzały w nowoczesnym HTML, dla celów edukacyjnych i zgodności z starszymi dokumentami HTML wciąż może być stosowany. Praktyką zalecaną w aktualnych standardach jest używanie stylów CSS, np. poprzez przypisanie klasy lub bezpośrednie stylowanie in-line. Warto zaznaczyć, że stosowanie <big> nie jest zalecane w nowych projektach, ponieważ CSS oferuje większą elastyczność i kontrolę nad wyglądem tekstu. Niemniej jednak, znajomość takich znaczników jak <big> pomaga w zrozumieniu, jak rozwijał się HTML i jakie są różnice między starszymi a nowoczesnymi metodami formatowania tekstu.

Pytanie 4

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

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

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

C. <p>akapit</p>

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

Analizując inne odpowiedzi, można zauważyć kilka technicznych nieporozumień. W przypadku <p>akapit</p>, brak atrybutu class oznacza, że element ten nie jest dostępny dla metody getElementsByClassName, która wymaga specyficznego przypisania klas do elementów. Podobnie, <p href="/akapit">akapit3</p> zawiera atrybut href, który nie ma zastosowania w kontekście akapitu, ponieważ href jest używany głównie w elementach <a> do definiowania linków, a nie w akapitach. Taki błąd może prowadzić do mylnego przekonania, że atrybuty, które nie są związane z klasami, mogą być używane do selekcji elementów. Z kolei <p id="akapit">akapit2</p> ma przypisany atrybut id, co również nie działa w przypadku metody getElementsByClassName, ponieważ ta metoda selekcjonuje elementy na podstawie klas, a nie identyfikatorów. Użycie id jako selektora w JavaScript powinno odbywać się za pomocą metody getElementById, która jest bardziej odpowiednia w tym kontekście. Warto podkreślić, że powszechnym błędem w myśleniu jest mylenie różnych mechanizmów selekcji w JavaScript i przypisywaniu im niewłaściwych atrybutów. Zrozumienie różnic między klasami a identyfikatorami jest kluczowe dla skutecznego zarządzania elementami DOM i tworzenia bardziej przejrzystego kodu.

Pytanie 5

W języku JavaScript funkcja getElementById odnosi się do

A. elementu HTML z podanym id

B. klasy zdefiniowanej w CSS

C. elementu HTML z określoną nazwą klasy

D. zmiennej numerycznej

Metoda getElementById w języku JavaScript jest kluczowym narzędziem do manipulacji DOM (Document Object Model), które pozwala deweloperom na łatwe odwoływanie się do konkretnych elementów HTML za pomocą ich atrybutu id. Dzięki temu, możemy dynamicznie zmieniać treść, style lub atrybuty tych elementów, co jest niezwykle przydatne w tworzeniu interaktywnych stron internetowych. Na przykład, jeśli mamy element HTML z atrybutem id='header', możemy użyć `document.getElementById('header')` do uzyskania do niego dostępu. To podejście jest zgodne z zasadami poprawnej struktury HTML, gdzie atrybut id powinien być unikalny w obrębie dokumentu. Rekomendowane jest, aby id było zrozumiałe i jasno określało zawartość elementu, co ułatwia późniejszą nawigację i skrypty, a także poprawia dostępność strony. W praktyce, korzystając z getElementById, możemy na przykład zmieniać tekst nagłówka: `document.getElementById('header').innerText = 'Nowy nagłówek';`.

Pytanie 6

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

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

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

C. tr { background-color: Pink; }

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

W tym zadaniu chodzi o zrozumienie, jak działają selektory CSS oraz pseudo-klasy odpowiedzialne za interakcję z użytkownikiem. Jeśli efekt ma pojawiać się tylko wtedy, gdy użytkownik najedzie myszką na wiersz tabeli, to zwykłe ustawienie background-color bez pseudo-klasy nie spełni tego warunku. Deklaracja tr { background-color: Pink; } oznaczałaby, że wszystkie wiersze tabeli są cały czas różowe, niezależnie od tego, czy ktoś na nie najedzie, czy nie. To jest po prostu styl statyczny, bez żadnej reakcji na zdarzenia. Podobnie zapis td, th { background-color: Pink; } ustawia tło dla wszystkich komórek tabeli (zarówno nagłówkowych th, jak i zwykłych td) w sposób stały. Moim zdaniem to dość częsty błąd: ktoś kojarzy tabelę z komórkami i intuicyjnie styluje td/th, ale zapomina, że w pytaniu chodzi o efekt dynamiczny „po najechaniu”. W rezultacie otrzymujemy tabelę pokolorowaną na stałe, bez jakiejkolwiek interakcji, co jest sprzeczne z założeniem zadania i z typowym zachowaniem tabel w nowoczesnych interfejsach. Ciekawsza jest kwestia selektora tr:active { background-color: Pink; }. Pseudo-klasa :active oznacza element w momencie „aktywacji”, czyli najczęściej w chwili klikania (przytrzymania przycisku myszy). Efekt trwa bardzo krótko, tylko w czasie samego kliknięcia. To zupełnie inny scenariusz niż wygodne podświetlenie wiersza, które ma się utrzymywać, dopóki kursor jest nad elementem. Użycie :active prowadzi do efektu, który miga na ułamek sekundy i z punktu widzenia ergonomii jest praktycznie bezużyteczny w kontekście podświetlania wierszy. Typowy błąd myślowy przy takich pytaniach polega na myleniu różnych pseudo-klas: :hover, :active, :focus. W webdevie przyjęło się, że :hover służy do reakcji na najechanie myszką, :active do krótkiej reakcji na kliknięcie, a :focus do zaznaczenia elementu, który ma aktualnie fokus klawiatury. Standardy CSS i dobre praktyki projektowania interfejsów jasno wskazują, że do efektu „podświetl wiersz, gdy nad nim jestem” należy użyć właśnie :hover na odpowiednim elemencie, czyli w tym przypadku tr. Wszystkie pozostałe odpowiedzi ignorują tę zasadę albo stosują nie tę pseudo-klasę, co trzeba, przez co nie odzwierciedlają poprawnie zachowania pokazanego w materiale wideo.

Pytanie 7

Jakie polecenie powinno być zastosowane, aby tekst TEKST był widoczny w kolorze czarnym w oknie przeglądarki internetowej?

A. <font color="czarny">TEKST</font>

B. <font color="#000000">TEKST</font>

C. <body bgcolor="black">TEKST</body>

D. <body color="black">TEKST</font>

Aby wyraz TEKST został wyświetlony w kolorze czarnym w oknie przeglądarki internetowej, należy skorzystać z tagu <font> z atrybutem color ustawionym na wartości #000000, co stanowi standardowy kod heksadecymalny dla koloru czarnego. Atrybut ten pozwala na precyzyjne określenie koloru tekstu, co jest zgodne z zasadami HTML i daje możliwość dostosowania wyglądu strony do wymagań projektowych. Tag <font> jest przestarzały w HTML5, jednak wciąż może być używany w kontekście starszych dokumentów HTML. Warto zauważyć, że dla bardziej nowoczesnych praktyk zaleca się korzystanie z CSS (Cascading Style Sheets), gdzie definiowanie kolorów odbywa się w ramach stylów, zamiast bezpośrednio w znacznikach. Przykładowo, w CSS można użyć: .czarnyTekst { color: #000000; } i następnie zastosować tę klasę w znaczniku. Takie podejście poprawia semantykę kodu i ułatwia zarządzanie stylami na stronie, co jest istotne w kontekście optymalizacji SEO i dostępności dla różnych urządzeń."

Pytanie 8

W dokumencie HTML zdefiniowano listę oraz dodano do niej formatowanie CSS. Który z efektów odpowiada tej definicji?

<ul>
  <li>Foksterier
  <li>Bokser
  <li>Baset
</ul>

li::after {
  content: " - Pies";
  background-color: teal;
  color: white;
}

Efekt 1

Foksterier
Bokser
Baset

Efekt 2

Foksterier
Bokser
Baset

Efekt 3

Foksterier
Bokser
Baset

Efekt 4

Foksterier
Bokser
Baset

A. Efekt 2.

B. Efekt 4.

C. Efekt 1.

D. Efekt 3.

Wybór każdej z niepoprawnych odpowiedzi wskazuje na niezrozumienie jak działają niektóre elementy CSS. 'Efekt 2', 'Efekt 3' i 'Efekt 1' nie pokazują tekstu '- Pies' dodanego za każdym elementem listy, co jest wynikiem zastosowania pseudoelementu ::after w kodzie CSS. Pseudoelementy w CSS są używane do style'owania określonych części elementu, jak na przykład jego początek lub koniec. W tym konkretnym przypadku, pseudoelement ::after dodaje treść do elementu po jego treści, ale zanim nastąpi jego zamknięcie. Jeżeli nie widzisz tego efektu w wybranym przez Ciebie efekcie, prawdopodobnie nie zrozumiałeś poprawnie jak działają pseudoelementy w CSS. Dodatkowo, jeśli wybrana przez Ciebie odpowiedź nie ma tła w kolorze 'teal' i tekstu w kolorze 'white', prawdopodobnie nie zwróciłeś uwagi na szczegółowe style CSS zastosowane do listy w kodzie. Zachęcamy do dalszego studiowania tematu CSS i HTML, aby zrozumieć, jak te dwie technologie współpracują ze sobą przy tworzeniu stron internetowych.

Pytanie 9

Który link jest poprawnie sformułowany?

A. <a href="http://strona.pl">strona</a>

B. <a href=http://strona.pl>strona</a>

C. <a href="http::/strona.pl>strona</a>

D. <a src="/www.strona.pl">strona</a>

Odpowiedź <a href="http://strona.pl">strona</a> jest poprawna, ponieważ używa atrybutu "href" do definiowania odnośnika. Atrybut ten jest standardem w języku HTML i służy do określenia docelowego adresu URL, do którego ma prowadzić link. W przypadku tej odpowiedzi, składnia jest prawidłowa: adres URL jest umieszczony w cudzysłowach, a prefiks HTTP jest poprawny. W praktyce, poprawne użycie atrybutu href jest kluczowe dla zapewnienia, że użytkownicy mogą bezproblemowo nawigować po stronie internetowej. Na przykład, w dokumentacji HTML5, wyraźnie zaznaczone jest, że atrybut href powinien być używany, aby wskazać lokalizację zasobu. W rezultacie, stosując tę poprawną składnię, można uniknąć potencjalnych błędów w działaniu strony oraz poprawić jej dostępność, co jest istotne z punktu widzenia najlepszych praktyk webowych oraz SEO.

Pytanie 10

W znaczniku <meta ...> w sekcji <meta ...> na stronie internetowej nie zamieszcza się informacji o

A. automatycznym odświeżaniu

B. typie dokumentu

C. autorze

D. kodowaniu

Wszystkie wymienione odpowiedzi, z wyjątkiem informacji dotyczącej typu dokumentu, są poprawne i mogą być umieszczane w znaczniku <meta>. Informacja o autorze jest istotna, ponieważ pozwala wskazać osobę odpowiedzialną za treść na stronie, co może być ważne w kontekście cytowania i prawa autorskiego. Wyszukiwarki również mogą brać pod uwagę te informacje w kontekście wiarygodności źródła. Z kolei kodowanie jest kluczowe, ponieważ określa, w jaki sposób znaki są interpretowane przez przeglądarkę, co ma fundamentalne znaczenie dla prawidłowego wyświetlania treści, zwłaszcza w przypadku stron wielojęzycznych. Możliwość określenia kodowania w znaczniku <meta charset='UTF-8'> jest powszechnie stosowana, aby zapewnić, że wszystkie znaki są renderowane poprawnie. Automatyczne odświeżanie za pomocą znacznika <meta http-equiv='refresh' content='30'> jest przydatne, gdy strona potrzebuje być często aktualizowana, na przykład w przypadku stron informacyjnych czy serwisów newsowych. Dlatego też, umieszczanie tych informacji w znaczniku <meta> jest zgodne z praktykami webowymi i przyczynia się do poprawy działania strony oraz jej optymalizacji dla użytkowników i wyszukiwarek.

Pytanie 11

Dla przedstawionego fragmentu dokumentu HTML:

<div class="menu"></div>

zdefiniowano formatowanie CSS selektora klasy "menu" tak, aby kolor tła bloku był zielony. Która definicja stylu CSS odpowiada temu formatowaniu?

A. div:menu { color: green; }

B. #menu { background-color: rgb(0,255,0); }

C. div.menu { background-color: green; }

D. menu { background-color: rgb(0,255,0); }

Podstawowy problem w niepoprawnych odpowiedziach wynika z mylenia różnych rodzajów selektorów CSS: typu, klasy i identyfikatora, a także pseudo-klas. W HTML mamy wyraźnie wskazany element `<div class="menu"></div>`. Atrybut `class` mówi wprost, że do stylowania należy użyć selektora klasy, czyli zapisu z kropką: `.menu` lub bardziej precyzyjnie `div.menu`. Użycie dwukropka w zapisie `div:menu` wygląda jak próba zastosowania pseudo-klasy, ale `menu` nie jest żadną standardową pseudo-klasą CSS. Pseudo-klasy to np. `:hover`, `:active`, `:first-child`. Przeglądarka taki selektor po prostu zignoruje, więc styl się nie zastosuje. Kolejnym typowym nieporozumieniem jest zamiana klasy na identyfikator. Znak `#` w CSS oznacza selektor id, więc `#menu` pasowałby do elementu `<div id="menu">`, a nie do `<div class="menu">`. Id i klasa to dwie różne rzeczy: id powinno być unikalne w całym dokumencie, a klasę można stosować wielokrotnie. W realnych projektach front-endowych mieszanie tych dwóch mechanizmów prowadzi do chaosu w kodzie i trudnych do wykrycia błędów, dlatego warto od początku rozróżniać `.` od `#` bardzo świadomie. Pojawia się też zapis `menu { background-color: rgb(0,255,0); }`. Taki selektor odnosi się do znacznika HTML o nazwie `menu`, czyli do `<menu>...</menu>`. Istnieje taki tag w HTML5, ale w pytaniu nie ma go w ogóle, jest zwykły `<div>`. Sam fakt, że klasa nazywa się „menu”, nie oznacza, że selektor typu `menu` będzie pasował. CSS nie „zgaduje” naszych intencji, tylko ściśle dopasowuje selektor do struktury dokumentu. To częsty błąd myślowy: patrzymy na nazwę klasy i podświadomie traktujemy ją jak nazwę znacznika. Moim zdaniem kluczowa lekcja z tego pytania jest taka: najpierw patrzymy na HTML i dokładnie identyfikujemy, czy mamy do czynienia z klasą (`class`), identyfikatorem (`id`), czy konkretnym tagiem (`div`, `p`, `nav` itd.). Dopiero potem dobieramy odpowiedni selektor CSS: `.` dla klasy, `#` dla id, samą nazwę znacznika dla selektora typu. Takie systematyczne podejście bardzo ułatwia dalszą pracę z arkuszami stylów i pomaga budować czytelne, skalowalne style zgodnie z dobrymi praktykami branżowymi.

Pytanie 12

Jakie ustawienia dotyczące czcionki będą miały zastosowanie w przypadku kodu CSS?

* {
    font-family: Tahoma;
    color: Teal;
}

A. wszystkiego kodu HTML, niezależnie od kolejnych ustawień CSS.

B. znaczników o identyfikatorze równym *.

C. znaczników z klasą przypisaną jako *.

D. wszystkiego kodu HTML, jako domyślne formatowanie dla wszystkich elementów strony.

Nieprawidłowe odpowiedzi wskazują na nieporozumienie dotyczące działania selektorów w CSS oraz hierarchii stylów. Przykłady wskazujące na znaczenie id lub klas w kontekście selektora * są mylące, gdyż id i klasy są w CSS bardziej specyficznymi selektorami, które służą do stylizowania konkretnej grupy elementów, podczas gdy selektor uniwersalny działa na wszystkie elementy. Argumentowanie, że formatowanie dotyczy elementów o id równym * jest błędne, ponieważ id nie może być równy znaku *, a jego zastosowanie ogranicza się do unikalnych identyfikatorów. Podobnie, przypisanie klasy równą * jest niemożliwe do zrealizowania w praktyce. Odpowiedź sugerująca, że styl dotyczy całego kodu HTML w kontekście specyficznych ustawień CSS jest również myląca, ponieważ nie uwzględnia faktu, że późniejsze reguły CSS mogą nadpisywać wcześniejsze style. W praktyce oznacza to, że jeśli na elementach zastosowane zostaną bardziej szczegółowe selektory, mogą one zmienić wygląd tych elementów, co obala tezę o domyślnym formatowaniu. Takie podejście nie uwzględnia także koncepcji kaskadowości stylów, która jest kluczowym elementem funkcjonowania CSS, gdzie kolejność i specyficzność selektorów odgrywają kluczową rolę w aplikowaniu stylów. W efekcie, zrozumienie działania selektorów i ich hierarchii jest niezbędne dla efektywnego wykorzystania CSS w projektowaniu stron internetowych.

Pytanie 13

W jakiej technologii niemożliwe jest przetwarzanie danych wprowadzanych przez użytkownika na stronie WWW?

A. CSS

B. PHP

C. JavaScript

D. AJAX

CSS, czyli Kaskadowe Arkusze Stylów, jest technologią używaną do stylizacji stron internetowych. Jego głównym celem jest określenie, jak elementy HTML powinny wyglądać, w tym ich wygląd, kolor, rozmiar oraz układ na stronie. CSS nie ma możliwości przetwarzania danych użytkownika, ponieważ działa wyłącznie po stronie klienta i nie posiada funkcji interakcji z danymi użytkowników. Przykładem zastosowania CSS jest nadanie stylu nawigacji w serwisie internetowym, gdzie style mogą być określone w pliku CSS, ale nie mają zdolności do przechwytywania i przetwarzania informacji wprowadzonych przez użytkowników w formularzach. Standardy CSS rozwijane przez World Wide Web Consortium (W3C) podkreślają jego rolę w stylizacji i prezentacji, a nie w logice aplikacji czy przetwarzaniu danych. Użytkownicy mogą korzystać z CSS do tworzenia responsywnych układów, jednak bez zdolności do interakcji z danymi, co czyni go technologią czysto wizualną.

Pytanie 14

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

B. B.

C. A.

D. C.

Wybór niewłaściwej odpowiedzi może wynikać z niepełnego zrozumienia zastosowania poszczególnych właściwości CSS. Pierwsza możliwość sugeruje użycie dotted border zamiast solid co może być mylące w kontekście estetyki i czytelności projektu. Dotted border wprowadza przerywaną linię obramowania, co nie zawsze jest pożądane w profesjonalnym wyglądzie strony. Kolejna błędna konfiguracja zmienia marginesy i padanie co wpływa na ogólny układ i spójność wizualną. Błędne ustawienie marginesów zewnętrznych na 50px przy zmniejszeniu padania do 20px może zaburzyć proporcje i układ elementów wpływając na czytelność. Stylowanie z niewłaściwymi wartościami prowadzi do nieprzewidywalnych rezultatów zwłaszcza na urządzeniach o różnych rozdzielczościach. Ważne jest zrozumienie jak CSS wpływa na model boxu i jak poszczególne właściwości oddziałują na siebie co jest kluczowe w tworzeniu responsywnych i estetycznie spójnych interfejsów. Zrozumienie tych koncepcji jest kluczowe w unikaniu typowych pułapek projektowych i budowaniu stron zgodnych z nowoczesnymi standardami.

Pytanie 15

Aby strona internetowa poprawnie dostosowała się do urządzeń mobilnych, należy określić rozmiar czcionki

A. w procentach

B. w milimetrach

C. tylko z wykorzystaniem znaczników big i small

D. w pikselach

Definiowanie wielkości czcionki w pikselach nie jest najlepszym rozwiązaniem w kontekście responsywności. Piksele są jednostkami stałymi, które nie dostosowują się do rozmiaru ekranu, co może prowadzić do problemów z czytelnością na mniejszych urządzeniach. Użytkownicy korzystający z urządzeń mobilnych mogą mieć trudności z odczytaniem tekstu, co negatywnie wpływa na doświadczenia użytkownika i może skutkować wyższym wskaźnikiem odrzuceń. Użycie milimetrów jako jednostki do definiowania wielkości czcionki również nie jest praktyczne. Milimetry są jednostką miary wykorzystywaną raczej w kontekście druku i nie uwzględniają różnorodności ekranów i ich rozdzielczości. W efekcie tekst może wyglądać na zbyt mały lub zbyt duży, co w przypadku urządzeń mobilnych może być frustrujące dla użytkowników. Ostatnią propozycją, czyli definiowanie wielkości czcionki tylko znacznikami big i small, jest nieodpowiednie z kilku powodów. Te znaczniki są przestarzałe i niezalecane w nowoczesnym projektowaniu stron internetowych. Nie oferują one elastyczności ani kontroli, które są kluczowe w dostosowywaniu wyglądu strony do różnych urządzeń. W rezultacie, korzystanie z tych znaczników nie sprzyja najlepszym praktykom w zakresie responsywności ani nie wspiera standardów dostępności, co w konsekwencji może negatywnie wpłynąć na pozycjonowanie w wyszukiwarkach.

Pytanie 16

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

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

B. <meta content='UTF8'>

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

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

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

Pytanie 17

Metainformacja "Description" umieszczona w pliku HTML powinna zawierać

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

A. spis słów kluczowych, które są wykorzystywane przez wyszukiwarki internetowe

B. nazwę aplikacji, za pomocą której stworzono stronę

C. opis treści znajdującej się na stronie

D. informację na temat autora strony

Meta tag Description w HTML służy do dostarczenia krótkiego streszczenia zawartości strony internetowej Jest to jeden z kluczowych elementów optymalizacji pod kątem wyszukiwarek internetowych SEO który pomaga wyszukiwarkom i użytkownikom zrozumieć tematykę strony choć nie jest bezpośrednim czynnikiem rankingowym wyszukiwarek może wpływać na wskaźnik klikalności CTR w wynikach wyszukiwania Dzięki dobrze skonstruowanemu opisowi użytkownicy mogą szybko ocenić czy strona spełnia ich potrzeby co z kolei może zwiększyć ruch na stronie Praktyką branżową jest aby opis był zwięzły i zawierał najważniejsze informacje dotyczące zawartości strony zazwyczaj nie przekraczając 160 znaków Ponadto opis ten może być wyświetlany jako fragment w wynikach wyszukiwania co czyni go istotnym elementem strategii marketingowej strony Dobre praktyki obejmują stosowanie unikalnych i precyzyjnych opisów dla każdej podstrony co przyczynia się do lepszego zrozumienia i klasyfikacji strony przez wyszukiwarki

Pytanie 18

Deklaracja typu dokumentu HTML: <!DOCTYPE HTML> wskazuje, że kod został stworzony w wersji

A. 5

B. 6

C. 7

D. 4

Gdy widzisz deklarację <!DOCTYPE HTML>, to znaczy, że mówimy o wersji HTML5. To obecny standard, który wprowadza naprawdę sporo nowych funkcji w porównaniu do wcześniejszych wersji. Na przykład, HTML5 pozwala na osadzanie audio i wideo bez potrzeby dodatkowych wtyczek, co jest super wygodne. Mamy też fajne semantyczne elementy jak <article>, <section> czy <nav>, które sprawiają, że łatwiej zorganizować treści na stronie. Ważne jest, żeby zawsze na początku dokumentu umieszczać tę deklarację, bo to pozwala przeglądarkom na prawidłowe wyświetlanie strony. Dzięki temu unikamy problemów z interpretacją kodu, co z doświadczenia mówię, jest naprawdę istotne.

Pytanie 19

Witryna internetowa zawiera poziome menu w formie listy punktowanej. Aby elementy tej listy mogły być wyświetlane w jednej linii, należy przypisać selektorowi li właściwość

A. position

B. display

C. text-align

D. outline

Wybór opcji 'outline' jako właściwości do ustawienia dla selektora 'li' w kontekście wyświetlania elementów listy w jednej linii jest błędny, ponieważ 'outline' dotyczy jedynie rysowania konturów wokół elementu, nie wpływa natomiast na ich układ. Przykładowo, 'outline' jest często używane w celu poprawy dostępności elementów interaktywnych, takich jak przyciski, ale nie ma żadnego wpływu na ich położenie w dokumencie. Z kolei 'position' jest używane do określenia sposobu pozycjonowania elementów, co również nie wpływa na ich wyświetlanie w jednej linii. Choć 'position: relative;' lub 'absolute;' mogą zmienić sposób, w jaki elementy są rozmieszczone w stosunku do siebie, to jednak nie jest to odpowiednie narzędzie do uzyskania efektu poziomego menu. Natomiast 'text-align' jest właściwością, która ustala sposób wyrównania tekstu wewnątrz bloku, ale również nie dotyczy samego wyświetlania elementów listy. Używanie takich podejść może prowadzić do nieporozumień i błędów w projektach, gdzie kluczowe jest zrozumienie, że różne właściwości CSS mają swoje specyficzne zastosowania i nie mogą być zamieniane. Zrozumienie tego aspektu jest kluczowe dla prawidłowego tworzenia układów w stronach internetowych i unikania typowych błędów w stylizacji.

Pytanie 20

Jakiego znacznika w języku HTML nie można użyć do wstawienia grafiki dynamicznej na stronę?

A. style="margin-bottom: 0cm;"><embed>

B. <object>

C. style="margin-bottom: 0cm;"><img>

D. <strike>

Wybór odpowiedzi 1, 3 lub 4 może wydawać się zrozumiały, jednak każdy z tych znaczników ma swoje specyficzne zastosowanie i może być użyty do integrowania grafik dynamicznych. Element <img> jest jednym z najbardziej powszechnie używanych znaczników do wyświetlania obrazów, zarówno statycznych, jak i dynamicznych, takich jak animacje w formacie GIF. Odpowiedź 3, <embed>, umożliwia osadzenie multimediów, takich jak wideo czy animacje Flash, a odpowiedź 4, <object>, jest elastycznym elementem, który może wyświetlać różne typy mediów, w tym grafiki i aplikacje interaktywne. Wybierając te odpowiedzi, można dojść do błędnego wniosku, że są one nieodpowiednie, gdyż wszystkie one wspierają umieszczanie mediów na stronie. Typowym błędem myślowym jest mylenie stylizacji tekstu z funkcjonalnością mediów, co prowadzi do niewłaściwego korzystania z semantyki HTML. Zrozumienie różnic między tymi znacznikami i ich zastosowaniem jest kluczowe dla efektywnego tworzenia stron internetowych oraz ich dostępności dla użytkowników.

Pytanie 21

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

A. target = "_new"

B. rel = "prev"

C. target = "_blank"

D. rel = "external"

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

Pytanie 22

W CSS wprowadzono formatowanie

p > i {color: blue}

Co oznacza, że tekst zapisany będzie w kolorze niebieskim

A. pochylony tekst akapitu

B. pogrubiony tekst akapitu

C. cały tekst akapitu bez względu na jego formatowanie

D. cały tekst nagłówków bez względu na ich formatowanie

W podanym przypadku, zapis CSS <code>p > i {color: blue}</code> odnosi się do selektora, który aplikuje kolor niebieski do elementu <code><i></code> znajdującego się bezpośrednio wewnątrz elementu <code><p></code>. Oznacza to, że tylko tekst, który jest otoczony znacznikiem <code><i></code> w danym paragrafie, zostanie wyróżniony kolorem niebieskim. Ten sposób selekcji jest zgodny z zasadą kaskadowości i specyficzności CSS, co jest kluczowym elementem w zarządzaniu stylem dokumentów HTML. W praktyce, używanie takich selektorów pozwala na precyzyjne formatowanie tekstu w obrębie większych struktur, co jest szczególnie ważne w skomplikowanych projektach webowych. Dobrym przykładem zastosowania tego stylu może być sytuacja, gdy chcemy wyróżnić cytaty lub słowa kluczowe w tekście paragrafu, stosując odpowiednie znaczniki HTML oraz style CSS, co zwiększa czytelność i estetykę treści.

Pytanie 23

Którą wartość atrybutu name znacznika <meta> wykorzystuje się do kontrolowania obszaru widzialnego na różnych urządzeniach, na których jest wyświetlana strona internetowa?

A. viewport

B. description

C. generator

D. keywords

Poprawnie wskazana została wartość „viewport”. W praktyce właśnie meta name="viewport" służy do kontrolowania tzw. obszaru widzialnego (ang. viewport) na urządzeniach mobilnych i desktopowych. Przeglądarka mobilna domyślnie zakłada szeroką stronę i sztucznie ją pomniejsza, żeby „zmieściła się” na ekranie telefonu. Dopiero meta viewport mówi jej: potraktuj szerokość ekranu urządzenia jako bazową szerokość strony. Najczęściej spotykana, zgodna z dobrymi praktykami konstrukcja to: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Parametr width=device-width ustawia szerokość obszaru widzialnego na szerokość ekranu urządzenia, a initial-scale=1.0 definiuje początkowe powiększenie. Dzięki temu layout responsywny oparty na media queries w CSS działa poprawnie, bez dziwnych przeskalowań i zbyt małej czcionki. W nowoczesnym front-endzie przyjmuje się, że każda strona, która ma być używalna na telefonach, tabletach i laptopach, powinna mieć prawidłowo ustawiony meta viewport. Moim zdaniem to jest absolutna podstawa RWD, zaraz obok poprawnego użycia jednostek względnych (np. %, vw, em) i zaprojektowania siatki w CSS. Warto też pamiętać, żeby nie przesadzać z blokowaniem powiększania (np. user-scalable=no), bo to pogarsza dostępność strony dla osób słabiej widzących i jest uznawane za złą praktykę. Podsumowując: jeśli chcesz mieć stronę, która naprawdę „żyje” na różnych ekranach, meta name="viewport" to obowiązkowy element w sekcji <head>.

Pytanie 24

Zaprezentowano kod dla tabeli 3x2. Jaką modyfikację należy wprowadzić w drugim wierszu, aby tabela przypominała tę z obrazka, gdzie wiersz jest niewidoczny?

<table>
    <tr>
        <td style="border: solid 1px;">Komórka 1</td>
        <td style="border: solid 1px;">Komórka 2</td>
    </tr>
    <tr>
        <td style="border: solid 1px;">Komórka 3</td>
        <td style="border: solid 1px;">Komórka 4</td>
    </tr>
    <tr>
        <td style="border: solid 1px;">Komórka 5</td>
        <td style="border: solid 1px;">Komórka 6</td>
    </tr>
</table>

/efekt jest na obrazie - nie dołączam - nie analizuj/

A. <pre class="code-block"><tr <span class="code-text">style=</span><span class="code-string">"display: table-cell"</span>></pre>

B. <pre class="code-block"><tr <span class="code-text">style=</span><span class="code-string">"display: none"</span>></pre>

C. <pre class="code-block"><tr <span class="code-text">style=</span><span class="code-string">"visibility: hidden"</span>></pre>

D. <pre class="code-block"><tr <span class="code-text">style=</span><span class="code-string">"clear: none"</span>></pre>

Odpowiedź jest prawidłowa, ponieważ użycie stylu 'visibility: hidden' w wierszu tabeli skutkuje tym, że wiersz ten nie jest widoczny, ale nadal zajmuje miejsce w układzie tabeli. Oznacza to, że komórki poniżej nie przesuwają się w górę, a struktura tabeli pozostaje niezmieniona. To podejście jest zgodne z sytuacjami, w których chcemy ukryć zawartość bez zmiany rozmieszczenia innych elementów. Jest to przydatne w aplikacjach, gdzie układ strony musi pozostać stabilny dla zachowania spójności wizualnej lub funkcjonalnej. Przykładem może być ukrywanie tymczasowych informacji, które nie powinny wpływać na pozostały układ interfejsu użytkownika. Jest to zgodne z dobrymi praktykami projektowania front-endu, gdzie stylizacje powinny wspierać czytelność i przewidywalność układu strony. Alternatywnie, 'display: none' usunęłoby element z przepływu dokumentu, co zmienia układ, ale w tym przypadku zastosowanie 'visibility: hidden' jest właściwym wyborem dla zachowania struktury.

Pytanie 25

Które z poniższego oprogramowania nie jest zaliczane do systemów zarządzania treścią (CMS)?

A. Mambo

B. Joomla

C. Apache

D. WordPress

Joomla, Mambo i WordPress to przykłady systemów zarządzania treścią, które umożliwiają użytkownikom łatwe tworzenie i zarządzanie treściami na stronach internetowych. Joomla to rozbudowany CMS, który oferuje zaawansowane funkcje zarządzania treścią oraz rozbudowany system rozbudowy za pomocą komponentów i modułów, co czyni go idealnym narzędziem dla średnich i dużych serwisów internetowych. Mambo, będący jednym z pierwszych systemów tego typu, również dostarcza szereg funkcji umożliwiających tworzenie i zarządzanie treściami, jednak został w dużej mierze wycofany na rzecz bardziej nowoczesnych platform, jak Joomla. WordPress, z kolei, jest najpopularniejszym systemem zarządzania treścią na świecie, znanym z prostoty obsługi oraz ogromnej społeczności deweloperów, co pozwala na łatwe dostosowywanie i rozszerzanie funkcji poprzez wtyczki. Każdy z tych systemów jest zaprojektowany z myślą o użytkownikach, którzy chcą efektywnie zarządzać treściami bez konieczności programowania, oferując przy tym różne możliwości personalizacji i wsparcie dla różnych rodzajów treści, co czyni je idealnymi narzędziami w tworzeniu nowoczesnych stron internetowych.

Pytanie 26

Jak powinna wyglądać prawidłowa, zgodna ze standardami języka HTML, forma samozamykającego się znacznika, który odpowiada za łamanie linii?

A. <br/>

B. </ br>

C. </br>

D. <br> </br>

Pierwsza z podanych odpowiedzi, </br>, jest błędna, ponieważ znacznik kończący nie powinien występować w kontekście samo-zamykających się znaczników. W HTML nie ma potrzeby używania tagu kończącego dla znacznika <br/>. Druga odpowiedź, <br> </br>, również jest niepoprawna, ponieważ pomimo że <br> jest poprawnym znacznikiem, jego użycie w połączeniu z dodatkowym znacznikiem końcowym nie ma sensu, jako że <br> nie wymaga zamknięcia. Tego rodzaju zapis prowadzi do niejasności w interpretacji dokumentu przez przeglądarki, a także może wpływać na wydajność renderowania strony. Ostatnia z odpowiedzi, </ br/>, jest błędna z dwóch powodów: po pierwsze, jest to niepoprawna składnia, a po drugie, ilustruje nieporozumienie dotyczące funkcji samo-zamykających się znaczników w HTML. W standardzie HTML nie stosuje się znaczników kończących dla elementów, które są zaprojektowane do samodzielnego zamykania. Rozumienie różnicy między tymi zapisami jest kluczowe dla programistów i projektantów stron, którzy dążą do tworzenia stron zgodnych z najlepszymi praktykami oraz standardami webowymi.

Pytanie 27

W HTML-u atrybut shape w znaczniku area, który definiuje kształt obszaru, może przyjąć wartość

A. rect, poly, circle

B. rect, square, circle

C. poly, square, circle

D. rect, triangle, circle

Wybór niewłaściwej odpowiedzi może wynikać z nieporozumień dotyczących atrybutu shape w znaczniku area. Odpowiedzi wskazujące na 'square' lub 'triangle' są błędne, ponieważ te kształty nie są obsługiwane przez standard HTML. W przypadku 'square', mogłoby się wydawać, że jest to po prostu inna forma prostokąta, jednak HTML nie definiuje takiej wartości dla atrybutu shape. Również 'triangle' nie jest uznawany w kontekście standardowych atrybutów; HTML nie pozwala na bezpośrednie definiowanie kształtów trójkątnych w obszarach mapy obrazów. Tego rodzaju zamieszanie może wynikać z niepełnego zrozumienia funkcji atrybutu, który jest jednoznacznie związany z prostokątem, okręgiem oraz wielokątem. Kluczowe jest, aby przyjrzeć się dokumentacji HTML oraz standardom W3C, które jasno określają poprawne wartości dla atrybutu shape. W praktyce, zrozumienie tych różnic jest istotne dla tworzenia efektywnych i dostępnych interfejsów użytkownika, gdzie każdy element jest precyzyjnie zdefiniowany i zrozumiały dla przeglądarek oraz użytkowników. Ponadto, stosowanie niepoprawnych wartości może prowadzić do błędów w renderowaniu strony, co negatywnie wpływa na doświadczenia użytkowników i dostępność serwisu.

Pytanie 28

W języku HTML stworzono definicję tabeli. Który z rysunków ilustruje jej działanie?

A. Rysunek 1

B. Rysunek 2

C. Rysunek 3

D. Rysunek 4

Odpowiedzi które nie są zgodne z kodem HTML wynikają z błędnej interpretacji atrybutu colspan lub struktury tabeli. Na przykład jeden z rysunków przedstawia sytuację w której drugi wiersz tabeli zawiera dwie odrębne komórki podczas gdy kod HTML wyraźnie wskazuje na użycie atrybutu colspan=2 co powinno skutkować rozciągnięciem komórki z tekstem 'trzeci' na szerokość dwóch kolumn. Taki błąd często wynika z niepełnego zrozumienia jak działa atrybut colspan co jest kluczowe dla poprawnego tworzenia układów tabeli w HTML. Inny rysunek z kolei może przedstawiać brak rozciągnięcia komórki w dolnym wierszu co sugeruje brak zastosowania atrybutu colspan i wskazuje na brak synchronizacji między strukturą kodu a jego wizualizacją. Często spotykanym błędem jest także niezrozumienie różnicy między atrybutami colspan i rowspan które choć podobne mają zupełnie odmienne zastosowanie w kontekście organizacji układu tabeli. Zrozumienie tych różnic i umiejętne zastosowanie odpowiednich atrybutów pozwala na tworzenie bardziej złożonych i responsywnych układów stron internetowych w zgodzie z najlepszymi praktykami projektowymi. Analiza błędów w rozumieniu struktury tabeli i ich wizualizacji pomaga unikać takich pomyłek w przyszłości i sprzyja lepszemu projektowaniu interfejsów użytkownika które są nie tylko funkcjonalne ale i estetyczne co jest jednym z kluczowych wymogów nowoczesnego webdesignu. Poprawna interpretacja atrybutów i ich zastosowanie są fundamentalne w tworzeniu przejrzystych i łatwych w nawigacji stron co przekłada się bezpośrednio na lepsze doświadczenie użytkownika.

Pytanie 29

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

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

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

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

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

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

Pytanie 30

Wskaż, które z poniższych zdań jest prawdziwe w odniesieniu do definicji stylu: ``````

A. Akapit będzie przekształcany na małe litery

B. Odnośnik będzie napisany czcionką o rozmiarze 14 punktów

C. Jest to styl zasięg lokalny

D. Zdefiniowano dwie klasy

Pierwsza odpowiedź sugeruje, że styl jest lokalny, ale tak naprawdę to nie jest do końca prawda. Definicje stylów w tym kodzie są globalne, więc nie możesz mówić o stylach lokalnych, które odnosiłyby się tylko do konkretnego elementu. Klasy w arkuszu stylów są dostępne w całym dokumencie, więc to są style globalne. Następna odpowiedź mówi, że akapit będzie transponowany na małe litery, co też nie jest prawdą, bo w CSS nie ma zdefiniowanej transformacji tekstu dla elementu P. Element A ma natomiast zastosowaną transformację, która zmienia tekst na małe litery, więc nie można tego przypisać do akapitu. Ostatnia błędna odpowiedź sugeruje, że odnośnik będzie miał czcionkę 14 punktów i to również jest mylne. W rzeczywistości odnośnik A ma czcionkę 16 punktów, co sprawia, że jest lepiej widoczny niż akapit. Wydaje mi się, że te błędne odpowiedzi wynikają z niepełnego zrozumienia, jak działają klasy CSS i jakie style można przypisać różnym elementom HTML.

Pytanie 31

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

B. src

C. cite

D. href

Gratulacje, twoja odpowiedź jest poprawna. Atrybut 'cite' w znaczniku <blockquote> jest używany do definiowania źródła cytatu. Jest to zgodne z definicją tego atrybutu zawartą w specyfikacji HTML5. W praktyce, jeśli chcesz zacytować fragment tekstu z innego źródła na swojej stronie internetowej, możesz użyć znacznika <blockquote> i atrybutu 'cite' do określenia źródła cytatu, co jest zgodne z dobrymi praktykami branżowymi. Na przykład, <blockquote cite='https://www.example.com'> Tutaj umieść tekst cytatu </blockquote>. Dzięki temu, czytelnik może łatwo odnaleźć źródło cytowanego tekstu. Warto zaznaczyć, że choć atrybut 'cite' nie jest wyświetlany bezpośrednio na stronie, jest on użyteczny dla użytkowników technologii asystujących, takich jak czytniki ekranowe.

Pytanie 32

W CSS zapis w postaci

 h1::first-letter {color: red;}

spowoduje, że kolor czerwony zostanie zastosowany do

A. tekstu nagłówka w pierwszym stopniu

B. pierwszej litery nagłówka w pierwszym stopniu

C. pierwszej linii akapitu

D. pierwszej litery nagłówka w drugim stopniu

Zapis <span>h1::first-letter {color: red;} </span> jest w porządku, bo korzysta z pseudoelementu :first-letter, który działa na pierwszą literkę w nagłówku h1. To całkiem fajne, bo możemy w ten sposób stylizować tę pierwszą literę i nadać nagłówkom ciekawszy wygląd. Na przykład, jeśli mamy nagłówek h1 z napisem 'Witaj świecie', to dzięki temu kodowi, litera 'W' zrobi się czerwona. W CSS warto ogarnąć, że :first-letter działa tylko na bloki, takie jak nagłówki czy akapity, więc warto to mieć na uwadze, gdy coś stylizujemy. Używanie pseudoelementów to dobre podejście do tworzenia ładnych i funkcjonalnych interfejsów, a przy okazji daje nam większą kontrolę nad tym, jak wyglądają nasze elementy.

Pytanie 33

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

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

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

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

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

Stosowanie float tylko dla bloku 5 i clear dla bloku 2 nie jest właściwe, ponieważ float jest używane do umieszczania elementów obok siebie, a clear do zapobiegania takiemu zachowaniu. W przypadku float dla bloków 3 i 4 oraz clear dla bloku 5, blok 2 nie miałby żadnej właściwości float, co oznacza, że nie mógłby być poprawnie umieszczony obok bloków 3 i 4, a to prowadziłoby do nieprawidłowego ułożenia bloku 5. Użycie float tylko dla bloku 2 i clear dla bloków 3 i 4 byłoby błędne, ponieważ clear zapobiega przyleganiu elementów do boku, co jest niezgodne z celem floatowania bloków 2, 3 i 4 w jednej linii. Typowym błędem myślowym jest traktowanie clear jako narzędzia do rozmieszczania bloków w poziomie, co jest funkcją float. Zamiast tego, clear blokuje wpływ elementów pływających, co może być użyteczne w końcowych elementach układu jak blok 5, ale nie w środku. Dobre zrozumienie działania float i clear jest kluczowe dla efektywnego tworzenia layoutów stron internetowych, gdzie precyzyjne kontrolowanie pozycji bloków jest istotne dla estetyki i funkcjonalności projektu.

Pytanie 34

Strona internetowa została stworzona w języku XHTML. Który z poniższych kodów reprezentuje realizację zaprezentowanego fragmentu strony, jeśli nie zdefiniowano żadnych stylów CSS?

A. C

B. D

C. B

D. A

Odpowiedź B jest prawidłowa, ponieważ wykorzystuje znaczniki zgodne ze standardem XHTML do prawidłowego formatowania tekstu. W XHTML zaleca się używanie semantycznych znaczników takich jak <h1> dla nagłówków, co poprawia strukturę dokumentu i ułatwia jego interpretację przez przeglądarki oraz inne urządzenia czytające. Dodatkowo użycie znacznika <p> do oddzielenia akapitów jest zgodne z zaleceniami dotyczącymi dostępności i poprawności kodu. To również sprzyja lepszemu SEO, ponieważ wyszukiwarki lepiej rozumieją znaczenie semantycznych znaczników. Warto również wspomnieć o dobrych praktykach, takich jak zamykanie znaczników oraz stosowanie małych liter w nazwach znaczników, co zwiększa kompatybilność z przeglądarkami oraz zgodność ze standardami W3C. XHTML, jako język oparty na XML, wymaga bardziej restrykcyjnej składni, co jest spełnione w kodzie przedstawionym w odpowiedzi B. Dzięki temu zapewnia się lepszą walidację i niezawodność działania strony internetowej.

Pytanie 35

Które z pól edycyjnych zostało przedstawione w opisanym stylu, zakładając, że pozostałe atrybuty pola mają wartości domyślne, a użytkownik wpisał imię Krzysztof w przeglądarce?

A. Pole 2

B. Pole 3

C. Pole 1

D. Pole 4

Jak popatrzysz na różne opcje, to widać, że tylko Pole 2 jest zgodne z tym, co ustalasz w CSS. Pole 1, choć podobne wizualnie, ma problem – brakuje mu zaokrągleń krawędzi, co pokazuje, że border-radius 7px nie zostało zastosowane. A Pole 3? Ma krawędzie zaokrąglone, ale padding jest za mały, przez co tekst prawie dotyka krawędzi – to na pewno nie jest to, co powinno być. Pole 4 z kolei wygląda na prostokąt, a zaokrąglenie nie jest wystarczające. Zwracaj uwagę na takie detale jak padding czy border-radius, bo one naprawdę są istotne! Bez takiego ogarnięcia ciężko osiągnąć dobry wygląd. Rozumienie tych elementów to klucz do robienia fajnych rzeczy z CSS. I pamiętaj o kontraście kolorów, bo bez tego teksty mogą być trudne do przeczytania. Te wszystkie zabiegi pomagają stworzyć przyjazne aplikacje, które dobrze współpracują z użytkownikami.

Pytanie 36

Który z poniższych fragmentów kodu HTML sformatuje tekst zgodnie z wymaganiami? (zauważ, że słowo "stacji" jest wyświetlane w większej czcionce niż pozostałe słowa w tej linii)

A. Odpowiedź 1: A

B. Odpowiedź 4: D

C. Odpowiedź 2: B

D. Odpowiedź 3: C

Pozostałe odpowiedzi zawierają błędy w składni HTML lub zastosowane znaczniki nie spełniają wymagań zadania. W odpowiedzi A użyto znacznika big tylko dla pierwszego słowa stacji co powoduje że lokomotywa pozostaje w domyślnym rozmiarze czcionki. Odpowiedź C zawiera błąd składniowy ponieważ zamyka znacznik h1 używając p co jest niepoprawne w standardowej specyfikacji HTML. Taki błąd może prowadzić do nieprzewidywalnych rezultatów w wyświetlaniu treści przez różne przeglądarki. W odpowiedzi D zastosowano kombinację znaczników small i h1 co jest niezgodne z semantyką HTML ponieważ znacznik small jest używany do zmniejszania rozmiaru tekstu a nie zwiększania. Ponadto użycie h1 zagnieżdżonego wewnątrz small jest niezgodne z zasadami semantycznego HTML co może negatywnie wpływać na dostępność i SEO strony. Przy projektowaniu stron internetowych ważne jest by stosować właściwe znaczniki zgodnie z ich przeznaczeniem co zwiększa kompatybilność i poprawność kodu oraz ułatwia jego dalsze utrzymanie i rozwój. Użycie CSS do zarządzania stylami jest zalecane jako nowoczesne i elastyczne rozwiązanie w porównaniu do starszych metod formatowania tekstu w HTML.

Pytanie 37

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

A. capitalize

B. lowercase

C. underline

D. uppercase

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

Pytanie 38

Do którego akapitu przypisano podaną właściwość stylu CSS?
border-radius: 20%;

A. Rys. B

B. Rys. C

C. Rys. D

D. Rys. A

Właściwość border-radius ma specyficzne zastosowanie do zaokrąglania rogów elementów HTML i w tym kontekście inne odpowiedzi jak Rys. A Rys. C i Rys. D nie wykazują cech związanych z tą właściwością. Rys. A ma ostre krawędzie co sugeruje brak użycia zaokrągleń. To pokazuje że border-radius nie został tam zastosowany co jest często spotykanym błędem w przypadku gdy nie rozumie się działania tej właściwości. Rys. C z kolei ma przerywaną linię obramowania co może wskazywać na użycie innej właściwości CSS np. border-style a nie border-radius. Stylizacja taka jest przydatna do wizualnego oddzielenia sekcji ale nie dotyczy bezpośrednio zaokrąglania rogów. Z kolei Rys. D ma efekt cienia co sugeruje raczej użycie właściwości box-shadow niż border-radius. Często myli się te dwie właściwości ponieważ obie wpływają na wygląd ramki jednak działają na zupełnie innych zasadach. Rozpoznanie użycia właściwej właściwości CSS jest kluczowe w projektowaniu intuicyjnych i estetycznych interfejsów co wymaga zrozumienia jak i kiedy każda z nich powinna być zastosowana. Właściwe wykorzystanie border-radius jako elementu stylizacji jest istotnym aspektem profesjonalnego projektowania stron internetowych co wymaga dokładnego zrozumienia jego wpływu na wygląd i funkcjonalność strony.

Pytanie 39

Jaką metodę zastosowano do dodania arkusza stylów do dokumentu HTML w pokazanym kodzie?

A. Styl wpisany, lokalny

B. Styl wewnętrzny

C. Styl alternatywny, zewnętrzny

D. Styl zewnętrzny

Styl wpisany lokalny w HTML to metoda definiowania stylów CSS bezpośrednio wewnątrz elementów HTML za pomocą atrybutu style. Jest to często stosowane, gdy chcemy szybko zdefiniować unikalne style dla pojedynczego elementu bez tworzenia lub edytowania zewnętrznego pliku CSS. Przykładowo poniższy kod HTML pokazuje jak możemy zmienić kolor tekstu w paragrafie na czerwony używając właśnie stylu pisanego zwanego również inline. Choć jest to proste i szybkie rozwiązanie nie jest zalecane dla większych projektów ze względu na brak możliwości ponownego użycia kodu i problematyczną jego konserwację. W praktyce najlepszym podejściem jest stosowanie stylów zewnętrznych które umożliwiają centralne zarządzanie wyglądem całego dokumentu. Standardy HTML i CSS promują modularność i oddzielenie warstwy prezentacyjnej od struktury co jest bardziej efektywne i zgodne z zasadami projektowania responsywnych aplikacji internetowych. Styl wpisany może być jednak przydatny w testach szybkich prototypach lub sytuacjach gdy zmiany muszą być wprowadzone lokalnie i mają one charakter jednorazowy. Dla bardziej złożonych aplikacji zaleca się jednak stosowanie bardziej zorganizowanych metod stylizacji takich jak style zewnętrzne.

Pytanie 40

W HTML formularzu użyto elementu <input>. Pole, które się pojawi, ma pozwalać na wprowadzenie maksymalnie

<input type="password" size="30" maxlength="20">

A. 30 znaków, które nie będą widoczne w polu tekstowym

B. 20 znaków, które będą widoczne w trakcie wprowadzania

C. 30 znaków, które będą widoczne podczas wpisywania

D. 20 znaków, które nie będą widoczne w polu tekstowym

Znacznik <input type="password"> w HTML jest rzeczywiście super ważny. Umożliwia on użytkownikom wpisywanie haseł, a to, co najfajniejsze, to że znaki są ukryte, więc nikt nie zobaczy, co piszesz. Atrybut maxlength="20" jest tutaj pomocny, bo ogranicza liczbę znaków do 20, co jest praktyczne - zbyt długie hasła ciężko zapamiętać, a krótkie mogą być niebezpieczne. Natomiast size="30" to tylko kwestia szerokości pola, więc nie wpływa na ilość znaków, które można wpisać. Generalnie, dobrze jest trzymać się tych ograniczeń, bo to pomaga w projektowaniu formularzy i utrzymywaniu porządku w interfejsie. Z mojej perspektywy, znajomość tych atrybutów jest naprawdę przydatna przy tworzeniu stron, bo można lepiej zrozumieć, jak to wszystko działa.

Rozpocznij nowy egzamin

Powrót do strony głównej