Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik programista
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 17 grudnia 2025 14:27
Data zakończenia: 17 grudnia 2025 14:32

Egzamin niezdany

Wynik: 10/40 punktów (25,0%)

Wymagane minimum: 20 punktów (50%)

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Jakie polecenie jest poprawne w kontekście walidacji HTML5?

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

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

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

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

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

Pytanie 2

Podstawowym celem korzystania z edytora WYSIWYG jest

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

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

C. automatyzacja odtwarzania plików multimedialnych

D. szybka wizualizacja tworzonej strony

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

Pytanie 3

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

border-radius: 20%;

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

A. D.

B. B.

C. C.

D. A.

Niestety, tym razem nie trafiłeś. Właściwość CSS 'border-radius: 20%;' naprawdę służy do zaokrąglania rogów, a na obrazku tylko akapit B ma takie zaokrąglenia. Może pomyliłeś to z czymś innym? Ważne, żeby zrozumieć, jak działa 'border-radius' – robi on krawędzie ładniejsze. Jak widzisz, '20%;' to wartość procentowa i mówi, jak bardzo te rogi mają być zaokrąglone. Widziałeś inne odpowiedzi (A, C, D), ale one nie miały tych zaokrągleń. Najlepiej zwrócić uwagę na to, jak różne style CSS wpływają na wygląd naszych elementów. W przyszłości warto się tego nauczyć, bo to naprawdę przydatne.

Pytanie 4

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

A. p

B. span

C. strong

D. img

Wybór znaczników takich jak <img>, <span> oraz <strong> jako elementów blokowych jest nieprawidłowy z kilku powodów. Znacznik <img> jest elementem, który ma na celu wstawienie obrazków do dokumentu HTML; jest to element liniowy, który nie tworzy nowej linii w układzie, co sprawia, że nie wypełnia całej dostępnej szerokości kontenera. Stosowanie <img> w kontekście blokowym byłoby błędne, ponieważ nie pełni roli strukturalnego elementu tekstowego. Element <span> to również znacznik liniowy, który używany jest do stylizacji fragmentów tekstu w obrębie innego bloku, ale sam w sobie nie ma znaczenia blokowego i nie wpływa na układ w sposób, w jaki to robi <p>. Użycie <span> jako blokowego elementu może prowadzić do niepoprawnych praktyk w kodowaniu, co negatywnie wpływa na czytelność oraz semantykę dokumentu. Z kolei znacznik <strong> jest wykorzystywany do podkreślenia ważności tekstu, jednak również zalicza się do elementów liniowych. Wybór tych znaczników zamiast <p> może prowadzić do nieczytelnych lub nieczytelnych układów stron, co jest sprzeczne z najlepszymi praktykami w projektowaniu responsywnych interfejsów użytkownika. Zrozumienie różnicy pomiędzy elementami blokowymi a liniowymi jest kluczowe dla tworzenia dobrze zorganizowanych i semantycznych stron internetowych.

Pytanie 5

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

BLOK 1
BLOK 2	BLOK 3	BLOK 4
BLOK 5

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

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

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

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

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

A. Kod 3.

B. Kod 2.

C. Kod 1.

D. Kod 4.

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

Pytanie 6

Który znacznik lub zestaw znaczników nie jest używany do określenia struktury dokumentu HTML?

A. <section>

B. <header>, <footer>

C. <div>

D. <i>, <b>, <u>

Znaczniki <header>, <footer>, <section> i <div> są naprawdę ważne, jeżeli chodzi o strukturę dokumentu HTML. Element <header> to nagłówek strony, gdzie wrzucamy tytuł, logo i menu nawigacyjne, co pomaga zorganizować treści. Z drugiej strony <footer> to stopka, w której często są dane kontaktowe, prawa autorskie i linki do polityki prywatności. <section> to znacznik, który pozwala na grupowanie treści w sensie logicznym, jak artykuły czy wiadomości. Dzięki temu roboty wyszukiwarek lepiej rozumieją kontekst. A <div> to taki ogólny kontener, który nie ma jakiegoś głębszego znaczenia, ale przydaje się do grupowania elementów i stosowania stylów CSS. Użycie tych znaczników wpływa na strukturę dokumentu, a ich odpowiednie zagnieżdżenie jest kluczowe do prawidłowego działania strony, co jest ważne zarówno dla użytkowników, jak i dla wyszukiwarek.

Pytanie 7

Taki styl CSS sprawi, że na stronie internetowej

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

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

B. punkt listy nienumerowanej będzie rys.gif

C. rys.gif wyświetli się jako tło 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 8

Która z czynności nie wpłynie na objętość zajmowanej pamięci pliku graficznego?

A. Interpolacja

B. Modyfikacja rozdzielczości obrazu

C. Kompresja

D. Zmiana rozmiaru obrazu przy użyciu atrybutów HTML

Zmiana rozdzielczości obrazu, kompresja oraz interpolacja to techniki, które zdecydowanie wpływają na rozmiar pliku graficznego. Zmiana rozdzielczości obrazu polega na modyfikacji liczby pikseli w obrazie, co bezpośrednio wpływa na jego wagę. Im większa rozdzielczość, tym więcej danych jest przechowywanych, co skutkuje większym plikiem. W praktyce, jeśli zredukujemy rozdzielczość obrazu, jego rozmiar pliku również zmaleje, co może być przydatne w kontekście optymalizacji stron internetowych. Kompresja to kolejny kluczowy proces, który może znacznie wpłynąć na rozmiar pliku. Polega ona na zmniejszeniu ilości danych w pliku graficznym, co może być realizowane bez widocznej utraty jakości. Istnieją różne metody kompresji, takie jak JPEG, PNG czy WebP, z których każda ma swoje zastosowania w zależności od rodzaju obrazu i wymagań projektu. Interpolacja, z kolei, to technika stosowana podczas zmiany rozmiaru obrazów, która polega na obliczaniu nowych wartości pikseli na podstawie istniejących. W procesie tym może dojść do degradacji jakości obrazu, co w przypadku niewłaściwego zastosowania prowadzi do niepożądanych efektów wizualnych. Zrozumienie, jak te techniki wpływają na pliki graficzne, jest kluczowe dla każdego twórcy treści, który pragnie optymalizować swoje zasoby i zapewniać użytkownikom jak najlepsze doświadczenia podczas przeglądania stron internetowych.

Pytanie 9

W dokumencie HTML zdefiniowano pewne elementy w klasie o nazwie "nomargin". W celu przeprowadzenia operacji na tych elementach za pomocą języka JavaScript, można wykorzystać funkcję

A. getElement("nomargin")

B. getElementsByClassName("nomargin")

C. getElementById("nomargin")

D. getElementsByTagName("nomargin")

Niepoprawność wybranych odpowiedzi wynika z niewłaściwego rozumienia zasad selekcji elementów w DOM przy użyciu JavaScript. Funkcja getElement("nomargin") nie istnieje w standardowym API JavaScript, co sprawia, że nie może zostać zastosowana do uzyskania elementów na stronie. Wybranie tej opcji świadczy o braku znajomości dostępnych metod w obiekcie document. Podobnie, zastosowanie getElementById("nomargin") jest niewłaściwe, ponieważ ta metoda działa jedynie na elementach, które mają unikalny identyfikator (id). Zgodnie z zasadami HTML, identyfikatory muszą być unikalne w obrębie dokumentu, co oznacza, że nie można przypisać tej samej wartości id wielu elementom. Dlatego wybór tej metody wskazuje na nieporozumienie dotyczące struktury HTML oraz zasad dotyczących unikalności identyfikatorów. Ponadto, getElementsByTagName("nomargin") jest również błędne, ponieważ ta metoda służy do selekcji elementów na podstawie ich nazwy tagu, a nie klasy. W praktyce, błędne podejście do selekcji może prowadzić do błędów w manipulacji DOM oraz obniżenia wydajności aplikacji, gdyż niewłaściwie wybrane metody mogą nie zwracać oczekiwanych wyników. Warto więc zapoznać się z dokumentacją i zrozumieć, jakie metody są dostępne oraz w jakim kontekście można je stosować, aby poprawnie działać w środowisku JavaScript.

Pytanie 10

Które ze znaczników HTML umożliwią wyświetlenie na stronie tekstu w jednym wierszu, jeżeli żadne formatowanie CSS nie zostało zdefiniowane?

Dobre strony mojej strony

A. <div>Dobre strony </div><div style=”letter-spacing:3px”>mojej strony</div>

B. <h3>Dobre strony </h3><h3 style=”letter-spacing:3px”>mojej strony</h3>

C. <p>Dobre strony </p><p style=”letter-spacing:3px”>mojej strony</p>

D. <span>Dobre strony </span><span style=”letter-spacing:3px”>mojej strony</span>

Gratulacje, Twoja odpowiedź jest prawidłowa. Wybrałeś znacznik <span>, który jest znacznikiem liniowym w HTML. Znaczniki liniowe nie zaczynają nowego wiersza po swoim zakończeniu, co oznacza, że tekst zawarty w kolejnych znacznikach <span> będzie wyświetlany w jednym wierszu, o ile nie zdefiniowano inaczej za pomocą CSS. Jest to bardzo ważne, kiedy chcemy utworzyć strukturę strony, która nie zależy od domyślnych formatowań. Przykładowo, używając <span>, możemy skonstruować skomplikowane layouty, które są niemożliwe do osiągnięcia za pomocą samych znaczników blokowych. Pamiętaj jednak, że odpowiednie stosowanie znaczników liniowych i blokowych jest ważnym elementem tworzenia semantycznie poprawnych stron internetowych, co może pomóc w poprawie SEO i dostępności Twojej strony.

Pytanie 11

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

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

B. <charset="UTF-8">

C. <encoding="UTF-8">

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

Wszystkie zapisy w pozostałych odpowiedziach są niepoprawne, ponieważ nie stosują przyjętej przez standardy HTML metody deklarowania kodowania znaków. Na przykład, zapis <encoding="UTF-8"> nie jest zgodny z HTML, ponieważ nie istnieje taki element w tej specyfikacji. Kodowanie znaków powinno być zawsze deklarowane przez element <meta> z atrybutem 'charset', co stanowi dobre praktyki w web development. Ponadto, zapis <meta encoding="UTF-8"> również zawiera błędne przypisanie atrybutu, gdyż 'encoding' nie jest rozpoznawanym atrybutem w kontekście tagu <meta>. Takie nieprawidłowe deklaracje mogą prowadzić do problemów z wyświetlaniem treści, co z kolei wpływa na doświadczenie użytkowników. Można też zauważyć, że zapis <charset="UTF-8"> w ogóle nie jest poprawnym elementem HTML, ponieważ nie istnieje tag na poziomie dokumentu o takiej formie. Tego rodzaju nieprawidłowości mogą wyniknąć z nieznajomości aktualnych standardów HTML oraz podstawowych zasad dotyczących kodowania znaków. Dlatego kluczowe jest, aby twórcy stron internetowych byli dobrze zaznajomieni z obowiązującymi normami i potrafili je stosować w praktyce, aby uniknąć błędów, które mogą wpłynąć na funkcjonalność i dostępność ich witryn.

Pytanie 12

Jakim kodem określa się kolor czerwony?

A. #0000EE

B. #00EEEE

C. #EE0000

D. #00EE00

Wybór innych kolorów wynika z błędnego zrozumienia wartości RGB oraz ich wpływu na uzyskanie pożądanych barw. Kod #00EEEE to kolor cyjanowy, uzyskany z maksymalnej wartości zielonej i niebieskiej, co nie ma związku z czerwonym. Kod #0000EE z kolei odpowiada kolorowi niebieskiemu, gdzie jedynie niebieski składnik jest na maksymalnym poziomie, a czerwony i zielony są całkowicie nieobecne, przez co nie może być postrzegany jako czerwony. Kod #00EE00 reprezentuje kolor zielony, również nieodpowiedni w tym kontekście, gdzie znowu brak czerwonego komponentu sprawia, że wynik nie jest zgodny z wymaganym kolorem. Użytkownik może pomylić się w ocenie, myśląc, że różne kombinacje składników RGB mogą prowadzić do uzyskania koloru czerwonego, podczas gdy kluczowym aspektem jest to, że czerwony komponent musi być dominujący i obecny w odpowiedniej wartości. Wartości RGB są fundamentem wielu aplikacji webowych, a ich zrozumienie jest kluczowe dla projektantów i programistów. Używanie niewłaściwych kodów barw może prowadzić do niezgodności wizualnych i braku spójności w projektach, co jest niezgodne z najlepszymi praktykami w branży, które zalecają stosowanie kolorów zgodnie z ich rzeczywistymi wartościami w systemie RGB.

Pytanie 13

W poniższym kodzie CSS czcionka zmieni kolor na żółty

a[target="_blank"]
{
  color: yellow;
}

A. każdego linku

B. tekstu akapitu

C. odnośników, które otwierają się w nowej karcie

D. odnośników, które otwierają się w tej samej karcie

Rozważając inne odpowiedzi, należy zrozumieć, dlaczego są one niepoprawne w kontekście podanego selektora CSS. Gdy mówimy o odnośnikach otwierających się w tej samej karcie, nie stosuje się atrybutu target="_blank", więc taki selektor jak a[target="_blank"] nie będzie się do nich odnosił. Oznacza to, że koloryzacja na żółto nie dotyczy odnośników otwierających się w tej samej karcie, co jest często typowym zachowaniem, chyba że określono inaczej. W przypadku tekstu paragrafu, selektor użyty w kodzie CSS nie będzie miał żadnego wpływu, ponieważ jest on specyficznie dopasowany do elementów a (odnośników), a nie do tekstu zawieranego w tagach p (paragrafów). CSS operuje na elementach HTML zgodnie z selektorami, dlatego nie można zmieniać stylu niepasujących elementów. Ostatnia możliwość, czyli stylizacja każdego odnośnika bez wyjątku, wymagałaby użycia bardziej ogólnego selektora a, a nie tak szczególnego jak a[target="_blank"]. Błędnym przekonaniem może być założenie, że selektor obejmuje wszystkie odnośniki, jednak atrybut target precyzyjnie wskazuje, które elementy mają być stylizowane. Zrozumienie tych różnic jest kluczowe dla efektywnego stosowania CSS w projektach webowych oraz poprawnego rozumienia specyfiki selektorów, co jest fundamentem efektywnego kodowania wizualnego wyglądu stron.

Pytanie 14

Grafik pragnie zmienić obraz JPG na format PNG bez utraty jakości, tak aby w obszarach, gdzie pierwotnie był kolor biały, w finalnym obrazie występowała przezroczystość. W tym celu powinien

A. dodać kanał alfa

B. przekształcić obraz w odcienie szarości

C. zmniejszyć rozdzielczość obrazu

D. zaimportować obraz do edytora grafiki wektorowej

Zarówno zmniejszenie rozdzielczości obrazu, jak i przekształcenie go w odcienie szarości są podejściami, które nie spełniają wymagań postawionych w pytaniu. Zmniejszenie rozdzielczości oznacza, że zmniejszamy liczbę pikseli w obrazie, co skutkuje utratą detali i jakości, co jest zupełnie niezgodne z celem przekształcenia bez utraty jakości. Takie działanie nie ma również związku z dodawaniem przezroczystości, a może wręcz pogorszyć wizualną jakość końcowego obrazu. Ponadto, konwersja obrazu do odcieni szarości eliminuje wszystkie kolory, co sprawia, że problem z białym kolorem, który ma zostać przekształcony w przezroczystość, staje się bezprzedmiotowy. Importowanie obrazu do edytora grafiki wektorowej, chociaż może być użyteczne w niektórych przypadkach, nie jest odpowiednim narzędziem do przekształcania bitmapy z JPG na PNG z przezroczystością. Grafika wektorowa jest oparta na matematycznych formułach, a nie na pikselach, więc nie można w prosty sposób przenieść bitmapowych właściwości obrazu. Podejścia te mogą prowadzić do błędnych wniosków, w których użytkownicy mogą sadzić, że redukcja jakości i przekształcanie kolorów są wystarczającymi krokami do osiągnięcia zamierzonych efektów graficznych.

Pytanie 15

Grafik pragnie przekształcić obraz JPG na format PNG bez utraty jakości, tak aby wszędzie tam, gdzie w oryginalnym obrazie występuje kolor biały, w docelowej wersji była przezroczystość. W tym celu powinien

A. zaimportować obraz do edytora grafiki wektorowej

B. przekształcić obraz w odcienie szarości

C. dodać kanał alfa

D. obniżyć rozdzielczość obrazu

Zmniejszenie rozdzielczości obrazu nie ma na celu dodania przezroczystości ani przekształcenia białych obszarów w przezroczyste. Zmiana rozdzielczości wpływa jedynie na liczbę pikseli w obrazie, co może prowadzić do utraty szczegółów, ale nie rozwiązuje problemu z białym tłem. Przekształcenie obrazu w odcienie szarości również nie jest odpowiednie w tym kontekście. Taki proces konwertuje kolory na odcienie szarości, co skutkuje utratą kolorów, a nie dodaniem przezroczystości. Z kolei importowanie obrazu do edytora grafiki wektorowej nie jest wystarczającym działaniem, ponieważ format JPEG jest rastrami, a nie wektorami, co oznacza, że nie można bezpośrednio edytować poszczególnych pikseli w ten sposób, by osiągnąć żądany efekt. Typowym błędem jest zakładanie, że zmiana formatu lub rozdzielczości rozwiąże problem przezroczystości. W rzeczywistości, aby uzyskać przezroczystość w obrazie, należy pracować bezpośrednio z pikselami i ich właściwościami, co wymaga użycia odpowiednich narzędzi i technik, takich jak dodanie kanału alfa.

Pytanie 16

Zakładając, że żadne style CSS nie zostały zdefiniowane, przedstawiony efekt zostanie uzyskany przy pomocy

Tytuł
    Znaczniki języka HTML
Autor
    Ewa Konieczna
Słowa kluczowe
    witryny internetowe, HTML

Kod 1.
<ul>
  <li>Tytuł</li>
  <li>Znaczniki języka HTML</li>
  <li>Autor</li>
  <li>Ewa Konieczna</li>
  <li>Słowa kluczowe</li>
  <li>witryny internetowe, HTML</li>
</ul>

Kod 2.
<dl>
  <dt>Tytuł</dt>
  <dd>Znaczniki języka HTML</dd>
  <dt>Autor</dt>
  <dd>Ewa Konieczna</dd>
  <dt>Słowa kluczowe</dt>
  <dd>witryny internetowe, HTML</dd>
</dl>

Kod 3.
<ol>
  <li>Tytuł</li>
  <dl>Znaczniki języka HTML</dl>
  <li>Autor</li>
  <dl>Ewa Konieczna</dl>
  <li>Słowa kluczowe</li>
  <dl>witryny internetowe, HTML</dl>
</ol>

Kod 4.
<table>
  <tr>Tytuł</tr>
  <td>Znaczniki języka HTML</td>
  <tr>Autor</tr>
  <td>Ewa Konieczna</td>
  <tr>Słowa kluczowe</tr>
  <td>witryny internetowe, HTML</td>
</table>

A. Kodu 1.

B. Kodu 2.

C. Kodu 3.

D. Kodu 4.

Niestety, Twoja odpowiedź nie jest poprawna. Na podstawie analizy załączonego obrazka można stwierdzić, że efekt przedstawiony na zdjęciu zostanie uzyskany przy użyciu 'Kodu 2', który jest kodem HTML definiującym tabelę. Wybierając inne opcje, pomijasz ważną rolę, jaką tabele odgrywają w prezentowaniu informacji w strukturze danych. Tabele HTML są przydatne do prezentowania zestawów danych, które mają związek ze sobą. Za pomocą tabeli można łatwo zorganizować takie dane w czytelny sposób. Zwróć uwagę, że wybór nieodpowiedniego kodu do osiągnięcia określonego efektu może prowadzić do niepotrzebnych komplikacji, takich jak trudności w utrzymaniu kodu, problemów z dostępnością i nieprawidłowego wyświetlania na różnych urządzeniach czy przeglądarkach. Pamiętaj, że ważne jest zrozumienie podstawowych koncepcji HTML i CSS, aby być w stanie tworzyć efektywne i dostępne strony internetowe.

Pytanie 17

Poniżej znajduje się fragment kodu w języku HTML. Przedstawia on definicję listy:

A. A

B. D

C. B

D. C

W przypadku odpowiedzi niepoprawnych można zauważyć kilka błędnych interpretacji kodu HTML dotyczących struktury listy uporządkowanej i nieuporządkowanej Po pierwsze błędem jest traktowanie wszystkich elementów jako jednolitej listy numerowanej co ignoruje obecność zagnieżdżonej listy nieuporządkowanej ul Zrozumienie różnicy między ol i ul jest kluczowe dla poprawnego interpretowania hierarchii w HTML Listy uporządkowane ol służą do tworzenia sekwencyjnych numeracji natomiast listy nieuporządkowane ul są używane dla elementów które nie wymagają konkretnego porządku Błędne traktowanie list zagnieżdżonych jako jednorodnych prowadzi do zniekształcenia struktury dokumentu HTML co utrudnia jego czytelność i zarządzanie nim Przykładowo jeżeli zagnieżdżona lista nieuporządkowana jest interpretowana jako część większej listy uporządkowanej może to prowadzić do błędów logicznych w strukturze dokumentu co jest sprzeczne z dobrymi praktykami w zakresie tworzenia przejrzystych i semantycznie poprawnych dokumentów HTML Warto podkreślić że właściwe stosowanie zagnieżdżonych struktur listowych w HTML jest nie tylko kwestią estetyki ale także funkcjonalności zapewniając że treść jest prezentowana w sposób zrozumiały zarówno dla użytkowników jak i narzędzi do przetwarzania stron internetowych

Pytanie 18

Jakie znaczniki HTML pozwolą na prezentację tekstu w jednym wierszu na stronie, zakładając, że nie zastosowano żadnych reguł CSS?

A. style="margin-bottom: 0cm;"><h3>Dobre strony </h3><h3 style="letter-spacing:3px">mojej strony</h3>

B. style="margin-bottom: 0cm;"><p>Dobre strony </p><p style="letter-spacing:3px">mojej strony</p>

C. style="margin-bottom: 0cm;"><div>Dobre strony </div><div style="letter-spacing:3px">mojej strony</div>

D. <span>Dobre strony </span><span style="letter-spacing:3px">mojej strony</span>

Wszystkie trzy niepoprawne odpowiedzi wykorzystują znaczniki blokowe lub nieodpowiednie stylizacje, które wprowadzają nowe linie. Znacznik <p> (paragraf) domyślnie powoduje, że przeglądarki wstawiają odstęp przed i po elemencie, co zmienia układ tekstu na stronie. Zastosowanie <h3> również prowadzi do podobnych problemów, ponieważ nagłówki są elementami blokowymi, które z definicji powinny być wyświetlane w nowym wierszu. Ostatecznie, użycie <div> ma podobne konsekwencje, gdyż jest to również znacznik blokowy, co prowadzi do niepożądanego układu tekstu w nowych liniach. W kontekście tworzenia stron internetowych, zachowanie zgodności z zasadami HTML oraz CSS jest kluczowe, aby zachować porządek i estetykę strony. Elementy blokowe są idealne do tworzenia struktury, ale nie do wyświetlania tekstu w linii, dlatego w kontekście zadania, wybrane odpowiedzi nie spełniają wymogu utrzymania tekstu w jednej linii. Idealnym rozwiązaniem w takiej sytuacji jest użycie znaczników inline, takich jak <span>, które pozwalają na bardziej elastyczne formatowanie treści bez zakłócania układu.

Pytanie 19

W kodzie CSS stworzono cztery klasy stylizacji, które zostały wykorzystane do formatowania akapitów. Efekt widoczny na ilustracji uzyskano dzięki zastosowaniu klasy o nazwie

A. format2

B. format4

C. format3

D. format1

Odpowiedź format2 jest poprawna, ponieważ stylizacja zastosowana do tekstu na obrazie to line-through, co oznacza przekreślenie. W CSS właściwość text-decoration pozwala na dodawanie różnych dekoracji do tekstu, takich jak underline (podkreślenie), overline (nadkreślenie) czy line-through (przekreślenie). Przekreślenie jest często używane do zaznaczania usuniętego tekstu lub do pokazywania zmian w dokumentach, co jest zgodne z dobrą praktyką w edytorach tekstu i aplikacjach do śledzenia zmian. W kodzie HTML klasy CSS są zazwyczaj stosowane poprzez dodanie atrybutu class do odpowiedniego elementu. Użycie klasy format2 w kodzie HTML wyglądałoby jak <p class='format2'>. Wielu projektantów korzysta z takich dekoracji, aby poprawić czytelność i funkcjonalność stron internetowych, zapewniając użytkownikom intuicyjne oznaczenia wizualne. Ważne jest także użycie semantycznego HTML, co w połączeniu z odpowiednimi stylami CSS pozwala tworzyć dostępne dla użytkowników strony internetowe zgodne ze standardami W3C.

Pytanie 20

Który z języków skryptowych nie wykonuje operacji po stronie serwera?

A. PHP

B. ASP

C. Perl

D. CSS

ASP, PHP i Perl to języki skryptowe, które są używane po stronie serwera, co oznacza, że ich kod jest wykonywany na serwerze przed dostarczeniem strony do użytkownika. ASP (Active Server Pages) to technologia opracowana przez Microsoft, która umożliwia tworzenie dynamicznych stron internetowych poprzez integrację z bazami danych oraz obsługę skryptów. PHP (Hypertext Preprocessor) jest jednym z najpopularniejszych języków skryptowych, który również działa po stronie serwera, umożliwiając tworzenie stron internetowych, które mogą generować HTML w oparciu o dane z różnych źródeł, takich jak bazy danych MySQL. Perl, pierwotnie stworzony do przetwarzania tekstu, stał się również wszechstronnym językiem skryptowym do aplikacji webowych, obsługując różnorodne zadania serwerowe. Te języki są integralną częścią nowoczesnego rozwoju aplikacji webowych i pozwalają na obsługę logiki biznesowej, interakcji z użytkownikami oraz komunikacji z bazami danych, co jest niezbędne w tworzeniu dynamicznych i interaktywnych aplikacji internetowych.

Pytanie 21

Jaką formę ma kolor przedstawiony w systemie szesnastkowym jako #11FE07 w formacie RGB?

A. rgb(17,255,7)

B. rgb(17,254,7)

C. rgb(11,127,7)

D. rgb(17,FE,7)

Kolor zapisany w postaci szesnastkowej #11FE07 odnosi się do systemu kolorów RGB, który jest powszechnie wykorzystywany w grafice komputerowej oraz w sieci. Wartości szesnastkowe składają się z trzech par cyfr: pierwsza para (11) reprezentuje wartość czerwonego (R), druga para (FE) wartość zielonego (G), a trzecia para (07) wartość niebieskiego (B). Aby przekształcić wartości szesnastkowe na dziesiętne, stosujemy konwersję, gdzie '11' w systemie szesnastkowym to 17 w systemie dziesiętnym, 'FE' to 254, a '07' to 7. Zatem wartość RGB dla koloru #11FE07 wynosi rgb(17, 254, 7). Wartości te są kluczowe w tworzeniu kolorów w różnych aplikacjach, od stron internetowych po projektowanie graficzne. Zrozumienie konwersji kolorów oraz ich reprezentacji w różnych formatach jest niezbędne dla każdego projektanta, który pracuje z kolorami. Przykładem zastosowania może być projektowanie logo, gdzie precyzyjne odwzorowanie koloru w różnych formatach jest istotne dla spójności wizualnej marki.

Pytanie 22

W jakim standardzie języka hipertekstowego wprowadzono do składni znaczniki sekcji <footer>, <header>, <nav>?

A. HTML4

B. XHTML1.0

C. XHTML 2.0

D. HTML5

Zgadza się, w HTML4 nie było znaczników <footer>, <header> i <nav>, bo one pojawiły się później. HTML4 raczej skupiał się na prostym formatowaniu i strukturze. XHTML1.0 też tego nie oferuje, bo jest bardziej rygorystyczną wersją HTML i trzyma się zasad XML, co znaczy, że wszystko musi być zgodne z gramatyką XML, ale nowe semantyczne elementy nie są tam wprowadzone. A, no i XHTML 2.0 miał zmienić wszystko, ale nigdy nie wyszedł oficjalnie, więc w sumie odpuścili jego rozwój na rzecz HTML5. Tak więc to też pokazuje, że brak tych znaczników był sporym ograniczeniem w kontekście rozwoju internetu. Zresztą HTML5 ma ogromne wsparcie od twórców stron i narzędzi programistycznych, dlatego jest teraz numerem jeden w projektach webowych.

Pytanie 23

W języku HTML zapisano formularz. Który z efektów działania kodu będzie wyświetlony przez przeglądarkę zakładając, że w drugie pole użytkownik wpisał wartość "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>

Efekt 1

Efekt 2

Efekt 3

Efekt 4

A. Efekt 2.

B. Efekt 4.

C. Efekt 1.

D. Efekt 3.

Pozostałe odpowiedzi nie są poprawne, ponieważ nie odpowiadają one opisowi działania kodu HTML formularza. W przypadku odpowiedzi 'Efekt 1', 'Efekt 3' oraz 'Efekt 4', możemy zauważyć, że nie są one zgodne z opisanym działaniem formularza. W HTML, pole hasła reprezentowane jest jako ciąg znaków zastępczych - kropeczki. Przy wpisaniu 'ala ma kota' do pola hasła, nie jesteśmy w stanie zobaczyć tej wartości, tylko kropeczki. Przy wyborze odpowiedzi 'Efekt 1', 'Efekt 3' lub 'Efekt 4', musielibyśmy zobaczyć wpisaną wartość 'ala ma kota' zamiast kropeczek, co jest niezgodne ze standardami HTML. Dlatego też, odpowiedzi te są nieprawidłowe. Pamiętaj, że ważne jest zrozumienie, jak działają różne elementy formularza w HTML, aby poprawnie przewidzieć efekt ich działania w przeglądarce.

Pytanie 24

Aby obraz dodany za pomocą kodu HTML był zrozumiały dla programów wspierających osoby niewidome, konieczne jest zdefiniowanie atrybutu

A. alt

B. border

C. sizes

D. src

Atrybut 'src' w znaczniku <img> jest odpowiedzialny za określenie źródła obrazu, czyli lokalizacji pliku graficznego, który ma być wyświetlony. Choć jest to kluczowy element dla poprawnego wyświetlenia obrazów, nie ma on żadnego związku z dostępnością treści dla osób niewidomych. Wybór 'src' jako odpowiedzi na pytanie świadczy o niepełnym zrozumieniu roli, jaką odgrywają atrybuty w kontekście dostępności. Z kolei atrybut 'border' definiuje szerokość obramowania wokół obrazka i również nie wnosi nic do kwestii dostępności, ponieważ nie dostarcza żadnych informacji osobom, które nie mogą zobaczyć obrazu. Natomiast 'sizes' jest używany do określenia, jak obraz powinien być wyświetlany w różnych warunkach, ale ponownie, nie odnosi się to do potrzeb osób z ograniczeniami wzrokowymi. Nieprawidłowe odpowiedzi często wynikają z mylenia funkcji atrybutów, co prowadzi do błędnego wniosku, że inne atrybuty mogą zaspokajać potrzeby dostępności. W praktyce, aby strona była dostępna, należy stosować atrybut 'alt', który spełnia kluczową rolę w komunikacji treści wizualnych z użytkownikami wymagającymi wsparcia, a ignorowanie tej zasady może skutkować wykluczeniem części użytkowników z korzystania z serwisu internetowego.

Pytanie 25

Aby zdefiniować stylizację tabeli w języku CSS w sposób, który umożliwi wyróżnienie wiersza, na który aktualnie najeżdża kursor myszy np. innym kolorem, należy użyć

A. pseudoklasy :visited

B. pseudoelementu :first-line

C. pseudoklasy :hover

D. nowego selektora klasy dla wiersza tabeli

Pseudoklasa :hover jest techniką CSS, która pozwala na zastosowanie stylów do elementu, gdy użytkownik na niego najedzie kursorem myszy. Dzięki temu można w prosty sposób wyróżnić wiersze tabeli, co zwiększa interaktywność i czytelność danych. W przypadku tabeli, aby wyróżnić aktualnie wskazywany wiersz, należy użyć reguły CSS, która odnosi się do elementu <tr> (wiersza tabeli) z zastosowaniem pseudoklasy :hover. Przykładowy kod CSS może wyglądać następująco: table tr:hover { background-color: #f0f0f0; } co spowoduje, że tło wiersza zmieni się na jasno szare, gdy kursor myszy znajdzie się nad tym wierszem. Taki sposób formatowania jest szczególnie przydatny w przypadku długich tabel, które mogą być trudne do przeglądania. Pseudoklasa :hover jest powszechnie stosowana w projektowaniu stron internetowych, w zgodności z W3C CSS Specification, co zapewnia jej szeroką kompatybilność z różnymi przeglądarkami. Warto także zauważyć, że można łączyć pseudoklasę :hover z innymi selektorami, aby uzyskać bardziej zaawansowane efekty wizualne.

Pytanie 26

W CSS, poniższy zapis spowoduje, że czerwony kolor zostanie zastosowany do

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

A. tekst nagłówka pierwszego poziomu

B. pierwsza litera nagłówka pierwszego poziomu

C. pierwsza linia akapitu

D. pierwsza litera nagłówka drugiego poziomu

Wiesz, użycie selektora CSS ::first-letter w połączeniu z stylem h1 to fajny sposób na zmianę wyglądu pierwszej litery w nagłówku. Kiedy używasz tego, kolor czerwony sprawi, że ta litera będzie się wyróżniać, co jest super, zwłaszcza w przypadku nagłówków czy akapitów. To technika, którą często stosuje się w projektowaniu stron, żeby nadać im trochę typograficznego stylu, jak w książkach z dużymi inicjałami. Ale pamiętaj, że ten selektor działa tylko z blokowymi elementami, takimi jak <p> czy <h1>, więc jeżeli spróbujesz zastosować go z elementami liniowymi, to niestety efekty nie będą takie, jak się spodziewasz. Zawsze warto też mieć na uwadze standardy W3C, bo one pomagają w tworzeniu dostępnych stron. No i ten selektor jest częścią specyfikacji CSS Pseudo-Elements Level 3, więc przeglądarki go dobrze wspierają. Zrozumienie, jak i kiedy stosować takie selektory, to klucz do tworzenia nowoczesnych stron.

Pytanie 27

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="display: none">

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

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

Użycie stylu visibility: hidden w wierszu tabeli powoduje, że zawartość tego wiersza staje się niewidoczna, ale miejsce w dokumencie HTML, które zajmuje, pozostaje. Jest to przydatne, gdy chcemy zachować układ tabeli bez zmiany jej struktury, co ma znaczenie w projektach, gdzie layout musi pozostać spójny. Jest to różne od display: none, który całkowicie usuwa element z układu, co może prowadzić do zmiany położenia innych elementów. Zastosowanie visibility: hidden jest zgodne z dobrymi praktykami w przypadkach, gdy potrzebujemy ukryć elementy bez wpływu na otaczający je układ. Metoda ta jest często używana w scenariuszach dynamicznych interfejsów użytkownika, gdzie elementy mogą być tymczasowo ukrywane lub pokazywane bez restrukturyzacji całego layoutu. To podejście wspiera również koncepcje dostępności, gdyż ukryte w ten sposób treści mogą być dostępne dla technologii wspomagających, takich jak czytniki ekranu, w zależności od implementacji innych atrybutów.

Pytanie 28

Aby zaprojektować kształt logo dla strony WWW sposobem przedstawionym na obrazie, należy zastosować funkcję

A. sumy.

B. części wspólnej.

C. różnicy.

D. wykluczenia.

Dobrze! Wybrano poprawną odpowiedź, którą jest 'wykluczenie'. Na przedstawionym obrazie mamy do czynienia z dwoma kształtami - jeden fioletowy, drugi czerwony. Fioletowy jest nałożony na czerwony i w wyniku tej operacji powstał nowy kształt, który pokazuje tylko te części czerwonego kształtu, które nie pokrywają się z fioletowym. Właśnie tak działa operacja wykluczenia w grafice komputerowej - wynikowa forma zawiera tylko te elementy jednego obiektu, które nie nakładają się z drugim obiektem. Jest to bardzo ważne narzędzie w projektowaniu graficznym, zwłaszcza w przypadku tworzenia logotypów, gdzie często zachodzi potrzeba nałożenia jednego kształtu na drugi, ale chcemy pokazać tylko te części pierwszego kształtu, które nie pokrywają się z drugim.

Pytanie 29

Przedstawiony serwis internetowy służy do walidacji

A. bazy danych SQL.

B. skryptów JavaScript.

C. dokumentów HTML.

D. arkuszy stylów.

Wygląda na to, że wybrałeś niepoprawną odpowiedź. Aby poprawnie odpowiedzieć na to pytanie, musisz zrozumieć funkcję różnych technologii internetowych i jak są one walidowane. Dokumenty HTML, bazy danych SQL i skrypty JavaScript są częściami składowymi stron internetowych, ale walidacja każdego z nich wymaga różnych narzędzi. Na przykład, dokumenty HTML są walidowane za pomocą narzędzi takich jak 'HTML Validation Service', podczas gdy bazy danych SQL i skrypty JavaScript są sprawdzane za pomocą różnych narzędzi do debugowania i testowania. Wybranie jednej z tych opcji sugeruje, że nie zrozumiałeś, do czego służy serwis 'CSS Validation Service'. Ten konkretny serwis jest stworzony do walidacji arkuszy stylów CSS, nie do walidacji dokumentów HTML, baz danych SQL czy skryptów JavaScript. Pamiętaj, że każda technologia webowa ma swoje specificzne narzędzia do walidacji, co umożliwia tworzenie zgodnych, efektywnych i bezbłędnych stron internetowych.

Pytanie 30

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

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

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

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

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

A. B.

B. D.

C. C.

D. A.

Gratulacje, twoja odpowiedź jest poprawna! Wybór opcji D. odnosi się do poprawnego formatowania list w CSS. Odpowiedź pokazuje dobrą znajomość właściwości list-style-type, która jest kluczowa do formatowania typów list. W tym przypadku, dla listy numerowanej (ol), jest ustawiona wartość upper-roman, która reprezentuje wielkie cyfry rzymskie. Dla listy punktowanej (ul) ustawiamy wartość square, co daje efekt punktów w formie kwadratów. To właśnie takie formatowanie list jest preferowane w branży ze względu na jego estetykę i czytelność. Pamiętaj, że zrozumienie i umiejętność manipulacji różnymi właściwościami CSS jest kluczem do tworzenia atrakcyjnych i funkcjonalnych stron internetowych.

Pytanie 31

Logo platformy CMS noszącej nazwę Joomla! to

A. B

B. A

C. C

D. D

Pozostałe logotypy reprezentują inne popularne systemy CMS i platformy. Logo oznaczone literą A przedstawia Drupala który jest także systemem zarządzania treścią napisanym w PHP. Drupal jest znany z dużej elastyczności oraz możliwości tworzenia zaawansowanych aplikacji webowych. Jest często używany przez duże organizacje i rządy ze względu na swoje zaawansowane opcje bezpieczeństwa i możliwość personalizacji. Logo C przedstawia inny mniej znany system który nie jest tak popularny jak Joomla! czy Drupal ale może być wykorzystywany w specyficznych przypadkach. Z kolei logo D to symbol WordPressa najbardziej rozpowszechnionego systemu CMS na świecie. WordPress jest znany z prostoty obsługi i ogromnej liczby dostępnych wtyczek i motywów co czyni go idealnym wyborem dla blogerów i małych przedsiębiorstw. Wybór niewłaściwego logo wynika często z niewiedzy lub pomylenia różnych systemów CMS które różnią się funkcjonalnością i zastosowaniem. Każdy z tych systemów ma swoje unikalne zalety i jest przeznaczony do różnych rodzajów zastosowań dlatego ważne jest aby znać i rozumieć ich specyfikę przed podjęciem decyzji o wyborze odpowiedniego dla danego projektu. Porównując te systemy Joomla! oferuje unikalne funkcje które wyróżniają ją na tle innych co czyni ją doskonałym wyborem dla średnich i dużych projektów wymagających solidnej bazy danych i wsparcia społeczności użytkowników

Pytanie 32

W jaki sposób można w języku CSS ustawić takie stylizowanie tabeli, aby wiersz, na którym obecnie znajduje się kursor myszki, zmieniał kolor tła na szary?

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

B. tr:active { color: gray; }

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

D. tr:hover { color: gray; }

Odpowiedzi tr:hover { color: gray; }, tr:active { color: gray; } i tr:active { background-color: gray; } są w tym kontekście niewłaściwe. W pierwszej odpowiedzi, jak używasz pseudoklasy :hover z właściwością color, zmieniasz tylko kolor tekstu, a nie tła, co nie spełnia wymogu modyfikacji koloru tła wiersza. Użytkownicy naprawdę oczekują, że jak najadą kursorem na wiersz, to zobaczą wyraźną zmianę w jego wyglądzie, a zmiana koloru tekstu to nie jest zbyt skuteczny sygnał wizualny. Druga i trzecia odpowiedź wykorzystują pseudoklasę :active, która działa tylko wtedy, gdy na element klikniemy. To pomija interakcję z myszką, co jest kluczowe w tym zadaniu. :active powinno być stosowane, gdy chcemy zmienić styl elementów podczas aktywacji, ale to nie działa w przypadku najechania kursorem. Użytkownicy mogą się mylić między tymi pseudoklasami, co prowadzi do kiepskiego projektowania interfejsu, który nie reaguje na intuicyjne działania, takie jak najeżdżanie myszą. W praktyce, dobrze jest używać właściwych pseudoklas, żeby osiągnąć zamierzony efekt i poprawić interaktywność aplikacji internetowych.

Pytanie 33

W CSS zapis

a[target="_blank"] {color: yellow;}

spowoduje, że tekst linków przybierze kolor żółty.

A. linków, które otwierają się w tej samej karcie.

B. wszystkich linków.

C. linków, które otwierają się w nowej karcie.

D. treści akapitu.

Odpowiedzi sugerujące, że kolor żółty dotyczy 'wszystkich odnośników', 'tekstu paragrafu' lub 'odnośników, które otwierają się w tej samej karcie' są błędne z kilku powodów. Po pierwsze, selektor CSS 'a[target="_blank"]' jest specyficzny dla odnośników, które otwierają się w nowej karcie, a więc nie obejmuje on wszystkich odnośników. Każdy odnośnik zdefiniowany w HTML jako <a> może mieć różne cele, a atrybut 'target' odgrywa kluczową rolę w tym, jak te odnośniki są obsługiwane przez przeglądarkę. Po drugie, nie istnieje możliwość, aby tekst paragrafu był objęty tym selektorem, ponieważ jest on dedykowany wyłącznie linkom. Warto pamiętać, że CSS służy do stylizacji elementów HTML, a nie do zachowania ich struktury semantycznej. Kolejną nieprawidłową koncepcją jest to, że kolor tekstu dotyczy odnośników otwierających się w tej samej karcie, ponieważ żaden z tych odnośników nie ma przypisanego atrybutu 'target="_blank"'. W praktyce, ważne jest, aby dobrze rozumieć selektory CSS oraz ich zastosowanie, co pozwoli na bardziej precyzyjne projektowanie interfejsów użytkownika oraz zapewnienie lepszej użyteczności i dostępności stron internetowych.

Pytanie 34

W HTML informacje o autorze, streszczeniu oraz słowach kluczowych strony powinny być umieszczone

A. pomiędzy znacznikami <head> i </head>, w znaczniku <meta>

B. pomiędzy znacznikami <head> i </head>, w znaczniku <style>

C. pomiędzy znacznikami <body> i </body>, w znaczniku <meta>

D. pomiędzy znacznikami <body> i </body>, w znaczniku <html>

Jeśli umieścisz informacje o autorze, streszczeni czy słowach kluczowych w złych znacznikach HTML, to mogą się pojawić problemy z przeglądarką i SEO. Na przykład, wrzucenie tych dany w znacznikach <body> i </body> to błąd, bo <body> służy do treści, którą widzą użytkownicy. To tam są nagłówki, akapity i inne elementy, które tworzą interfejs. Więc wrzucanie metadanych tam to niezbyt mądra decyzja. Z drugiej strony, umieszczanie ich w <html> również nie jest odpowiednie, bo <html> to jakby kontener dla całego dokumentu. Nie można też wrzucać tych danych w <style>, bo to jest do stylu CSS, a nie do treści. Trochę myślenia jest potrzebne, żeby zrozumieć, że nie wszystkie dane mogą lądować w <body>. Dlatego tak ważne jest, żeby ogarnąć, jak działają znaczniki <head> i <meta>, bo to naprawdę ma wpływ na strukturę strony i jej efektywność w wyszukiwarkach.

Pytanie 35

Które z poniższych poleceń jest poprawne w kontekście walidacji HTML5?

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

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

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

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

Niepoprawne odpowiedzi wskazują na typowe błędy w składni HTML oraz niepełne zrozumienie zasad walidacji dokumentów HTML5. W pierwszym przypadku <img src = mojPiesek.jpg" alt = "pies> występuje błąd w cudzysłowie, który nie jest poprawnie zamknięty, co prowadzi do problemów z interpretacją przez przeglądarki internetowe. Przeglądarki mogą zignorować taki znacznik, co powoduje, że obraz nie zostanie wyświetlony, a tekst alternatywny nie będzie dostępny. Kolejna odpowiedź <img src = mojPiesek.jpg alt = pies> również jest niepoprawna, ponieważ brakuje w niej cudzysłowów wokół wartości atrybutów, co jest wymogiem w HTML5. Atrybuty w HTML powinny być zawsze otoczone cudzysłowami, aby zapewnić prawidłowe przetwarzanie przez parsery HTML. Ostatnia odpowiedź <img src = "mojPiesek.jpg" > również jest niekompletna, ponieważ nie zawiera atrybutu alt. Atrybut alt jest kluczowy dla dostępności, ponieważ służy jako opis obrazu, co jest niezbędne dla użytkowników korzystających z technologii asystujących, takich jak czytniki ekranu. Pomijanie tego atrybutu może ograniczać dostęp do informacji dla osób z niepełnosprawnościami. W praktyce, każdy znacznik obrazka powinien być starannie skonstruowany z uwzględnieniem zasad dostępności i walidacji, aby maksymalizować użyteczność i zgodność ze standardami sieciowymi.

Pytanie 36

Który z akapitów został zapisany w wskazanym stylu, zakładając, że pozostałe właściwości akapitu mają wartości domyślne?

A. Efekt 3

B. Efekt 1

C. Efekt 2

D. Efekt 4

W analizowanym pytaniu trzy efekty nie spełniają wszystkich warunków zdefiniowanych w stylu CSS dla paragrafu. Pierwszy efekt pokazuje tekst z niebieskim tłem który nie jest zgodny z zadanym stylem ponieważ kolor tła nie został określony w stylizacji. Zastosowanie niebieskiego tła często wynika z chęci wizualnego wyróżnienia elementu ale w tym przypadku styl określa jedynie kolor tekstu na niebieski a nie tła. Drugi efekt charakteryzuje się użyciem kursywy co również nie jest zgodne z deklaracją stylu CSS. Stylizacja paragrafu nie zawiera property font-style co oznacza że tekst powinien być w domyślnej formie czyli zwykły a nie kursywa. Trzeci i czwarty efekt mają niezgodne kolory tekstu i inne elementy które nie pasują do zadanego stylu. Typowym błędem w interpretacji stylów CSS jest niedokładne odczytanie wszystkich zdefiniowanych parametrów co prowadzi do błędnych założeń ostatecznego wyglądu elementu. Poprawne zrozumienie stylów wymaga zwrócenia uwagi na wszystkie atrybuty nawet jeśli nie są one wyraźnie widoczne na pierwszy rzut oka. W związku z tym kluczowe jest dokładne zapoznanie się z każdą definicją w stylu aby prawidłowo dopasować wygląd do specyfikacji.

Pytanie 37

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

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

B. color: rgb(#FF0000);

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

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

W odpowiedziach, które nie są poprawne, występują błędy związane z używaniem niewłaściwej właściwości oraz niepoprawnym formatowaniem wartości kolorów. W przypadku użycia 'text-color: rgb(255,0,0);' oraz 'text-color: rgb(#FF0000);' kluczowym problemem jest to, że 'text-color' nie jest uznawane przez standardy CSS jako właściwość odpowiedzialna za kolor tekstu. Właściwa nazwa to 'color', co jest zgodnie z dokumentacją CSS. Przy próbie użycia niewłaściwej właściwości przeglądarka po prostu zignoruje tę deklarację, co oznacza, że kolor tekstu nie zostanie zmieniony. Jeśli chodzi o zapis koloru w formacie RGB, to w drugiej wersji odpowiedzi wykorzystano niepoprawne formatowanie '#FF0000', które jest typowe dla zapisu kolorów w systemie HEX. Funkcja rgb() wymaga jedynie wartości liczbowych bez znaków '#' i nie może być używana w połączeniu z takim formatem. Zrozumienie różnic między różnymi sposobami definiowania kolorów w CSS jest kluczowe, by unikać typowych pułapek dla początkujących programistów. Często mylnie zakłada się, że wszystkie formaty kolorów mogą być stosowane zamiennie, co prowadzi do niepoprawnych stylów oraz frustracji w pracy nad projektem. Utrzymanie zgodności z dokumentacją i najlepszymi praktykami jest kluczowe, aby poprawnie stosować style CSS.

Pytanie 38

Jak można zmodyfikować nałożone na siebie fragmenty obrazu, nie zmieniając innych elementów?

A. Kanał przezroczystości

B. Warstwy

C. Wykres histogramu

D. Przycinanie

Kadrowanie obrazu polega na przycinaniu jego części, co negatywnie wpływa na elastyczność edycji. Gdy fragment obrazu zostanie wykadrowany, nie ma już możliwości jego modyfikacji, co jest dużym ograniczeniem, jeżeli chcemy edytować poszczególne elementy. Histogram odnosi się do analizy jasności oraz kolorystyki w obrazie, co nie ma bezpośredniego związku z edytowaniem nakładających się fragmentów obrazu. Histogram pozwala na dostosowanie tonacji i kontrastu, ale nie umożliwia precyzyjnej edycji konkretnych obszarów obrazu. Kanał alfa jest wykorzystywany do reprezentacji przezroczystości w grafice rastrowej, ale sam w sobie nie jest wystarczający do edytowania nakładających się obrazów. Choć kanał alfa może być pomocny w pracy z przezroczystościami, nie zastępuje funkcjonalności warstw, które pozwalają na pełną kontrolę nad poszczególnymi elementami obrazu. Typowe błędy myślowe prowadzące do takich niepoprawnych wniosków to mylenie różnych technik edycji oraz brak zrozumienia ich specyficznych zastosowań w praktyce graficznej. Właściwe podejście do edycji grafiki wymaga znajomości narzędzi i ich funkcji, a także umiejętności ich łączenia w celu osiągnięcia zamierzonych efektów wizualnych.

Pytanie 39

W CSS, aby ustalić wewnętrzny górny margines, czyli odstęp pomiędzy elementem a jego obramowaniem, należy zastosować komendę

A. local-top

B. padding-top

C. border-top

D. outline-top

Wybór odpowiedzi 'local-top' jest błędny, ponieważ nie istnieje takie polecenie w standardzie CSS. Termin 'local' w kontekście CSS nie ma zastosowania w odniesieniu do marginesów czy paddingu. Dlatego też, wybierając tę odpowiedź, można wpaść w pułapkę myślenia, że CSS oferuje lokalne style, co jest nieprawidłowe. Kolejna niepoprawna odpowiedź, 'border-top', odnosi się do stylu granicy, a nie do odstępu wewnętrznego. 'border-top' definiuje styl, szerokość i kolor górnej granicy elementu, jednak nie wpływa na odstęp pomiędzy zawartością a granicą. Wiele osób myli 'border' z 'padding', co prowadzi do nieprawidłowego zrozumienia struktury box model w CSS. Ostatnia odpowiedź, 'outline-top', dotyczy obramowania zewnętrznego elementu, które jest używane głównie do zaznaczania elementów, ale również nie ma wpływu na wewnętrzny odstęp. 'outline' jest niezależny od box model i nie wpływa na układ elementu. Warto pamiętać, że korzystanie z niepoprawnych właściwości może prowadzić do problemów w renderowaniu stron oraz złego doświadczenia użytkowników. Zrozumienie różnicy między paddingiem, marginem, borderem i outline jest kluczowe dla skutecznego stosowania CSS w praktyce.

Pytanie 40

W HTML-u, aby umieścić animację FLASH (z rozszerzeniem .swf) na stronie www, powinno się wykorzystać znacznik

A. <object>

B. <img>

C. <video>

D. <audio>

Użycie <audio>, <img> i <video> do wstawiania animacji FLASH jest błędne z kilku powodów. Znacznik <audio> jest tylko do dźwięku, więc nie załatwia sprawy z animacjami. <img> to tylko do wyświetlania statycznych obrazków, a nie czegoś interaktywnego jak animacje FLASH. A <video> też jest tylko dla plików wideo i w ogóle nie obsługuje FLASH. Wiesz, to wszystko często wynika z tego, że nie do końca wiadomo, jak te znaczniki działają. Ważne, żeby wiedzieć, jakie elementy HTML można użyć do różnych treści. No i nie oszukujmy się – technologia FLASH jest coraz mniej na czasie, lepiej iść w kierunku HTML5, bo to jest bezpieczniejsze i działa lepiej z obecnymi przeglądarkami. Użycie starszych technologii, jak FLASH, może przynieść problemy z kompatybilnością i bezpieczeństwem, więc to nie jest najlepszy pomysł w nowoczesnym web developmencie.

Rozpocznij nowy egzamin

Powrót do strony głównej