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: 19 czerwca 2026 10:17
Data zakończenia: 19 czerwca 2026 10:24

Egzamin niezdany

Wynik: 11/40 punktów (27,5%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Jak nazywa się edytor stron, którego działanie tłumaczy się jako „otrzymujesz to, co widzisz”?

A. WYSIWYG

B. VISUAL EDITOR

C. WEB STUDIO

D. IDE

Pozostałe nazwy nie pasują. IDE to zintegrowane środowisko programistyczne (pisze się w nim kod), a „WEB STUDIO” i „VISUAL EDITOR” to nazwy ogólne, nie określające tej zasady działania. Edytor z podglądem efektu to WYSIWYG.

Pytanie 2

p { font-family: Arial, Helvetica, sans-serif; }

Zdefiniowany styl dla selektora p spowoduje, że tekst w paragrafie zostanie wyświetlony czcionką:

A. szeryfową.

B. bezszeryfową.

C. maszynową.

D. dekoracyjną.

W tym pytaniu łatwo się pomylić, bo wiele osób bardziej kojarzy konkretne nazwy fontów niż ich rodziny. Kluczowe jest zrozumienie, jak działa właściwość font-family w CSS. Zapis font-family: Arial, Helvetica, sans-serif definiuje listę krojów w kolejności priorytetu. Przeglądarka sprawdza po kolei: najpierw próbuje użyć Ariala, potem Helvetiki, a jeśli żaden z nich nie jest dostępny na urządzeniu, wybiera dowolny systemowy font z rodziny sans-serif. I to właśnie ostatni element – sans-serif – określa typ czcionki, czyli że ma to być krój bezszeryfowy.
Czcionka szeryfowa (serif) to np. Times New Roman czy Georgia, z charakterystycznymi „ogonami” i ozdobnikami na końcach liter. Tutaj nie ma ani nazwy serif, ani generycznego słowa serif, więc nie ma podstaw, by mówić o kroju szeryfowym. Czcionka maszynowa, nazywana w CSS monospace, to taka, w której wszystkie znaki mają tę samą szerokość, jak w starych maszynach do pisania (np. Courier New). W kodzie nie pojawia się słowo monospace ani żaden typowy font maszynowy, więc to też odpada.
Z kolei określenia typu „dekoracyjna” mogą mylić, bo w CSS istnieje kiedyś częściej używany generic fantasy, czasem kojarzony z ozdobnymi krojami, ale w tym przykładzie nie mamy ani fantasy, ani cursive, tylko wyraźnie sans-serif. Typowy błąd myślowy polega na tym, że ktoś patrzy na nazwę Arial i nie kojarzy jej z rodziną bezszeryfową, albo sugeruje się wyglądem przykładowego tekstu z jakiegoś edytora. W praktyce jednak to właśnie Arial i Helvetica są klasycznymi reprezentantami rodziny sans-serif. Warto patrzeć na ostatni człon deklaracji font-family – ten generyczny typ jest zawsze najważniejszą wskazówką, do jakiej kategorii należy krój pisma w danym stylu.

Pytanie 3

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

rowspan

colspan

cellpadding

cellspacing

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

Pytanie 4

W CSS zastosowano stylowanie elementu listy, przy czym żadne inne style CSS nie zostały ustalone. Użyte stylowanie spowoduje, że

li :hover { color: Maroon; }

A. Teksty wszystkich elementów, którym nadano id „hover”, będą w kolorze Maroon.

B. Po najechaniu kursorem na element listy, kolor tekstu zmieni się na Maroon.

C. Kolor Maroon będzie dotyczył co drugiego elementu listy.

D. Wszystkie teksty elementów listy będą w kolorze Maroon.

Twoja odpowiedź jest na pewno trafna, bo reguła CSS li:hover { color: Maroon; } działa w kontekście pseudo-klasy :hover. To znaczy, że jak najedziesz kursorem na element listy (li), to jego kolor tekstu zmienia się na Maroon. Fajnie, że to wiesz! Takie podejście jest zgodne z zasadami CSS, które pozwalają na dynamiczne zmiany wyglądu elementów, gdy użytkownik z nimi interaguje. Na przykład, jeżeli masz listę z elementami <li>, to najeżdżając na nie, kolor tekstu zmienia się na Maroon. To może naprawdę poprawić użytkowanie strony i wyróżnić ważne elementy w interfejsie. Używanie pseudo-klas, jak :hover, to standard w projektowaniu stron, które są responsywne i interaktywne, co znacznie podnosi komfort przeglądania.

Pytanie 5

Z czego skorzystać, aby tworzyć strony internetowe w sposób GRAFICZNY (wizualny)?

A. przeglądarki internetowej

B. edytora CSS

C. programu typu WYSIWYG

D. programu MS Office Picture Manager

Aby tworzyć strony w sposób GRAFICZNY (wizualny), bez ręcznego pisania kodu, korzysta się z programu typu WYSIWYG - układa się elementy na podglądzie, a narzędzie generuje kod HTML/CSS. Dlatego właściwy jest program WYSIWYG.

Pytanie 6

Do czego odnosi się termin „front-end” w kontekście tworzenia stron internetowych?

A. do interfejsu strony i technologii działających w przeglądarce

B. do działania skryptów wykonywanych po stronie serwera

C. do organizacji danych na serwerze WWW

D. do bazy danych z informacjami prezentowanymi na stronie

Pozostałe opisy dotyczą back-endu (strony serwerowej): organizacja danych na serwerze, baza danych i skrypty wykonywane po stronie serwera to zaplecze niewidoczne dla użytkownika. Front-end to interfejs i technologie działające w przeglądarce.

Pytanie 7

Przedstawiono fragment HTML, który nie przechodzi poprawnej walidacji. Błąd walidacyjny tego kodu dotyczy

<!DOCTYPE html>
 <html>
  <head>
   <title>Test</title>
  </head>
  <body>
   <img src="obraz.gif alt="Obrazek">
   <h1>Rozdział 1</h1>
   <p>To jest tekst paragrafu, ... </p>
   <br>
   <img src="obraz.gif" alt="Obrazek">
  </body>
 </html>

A. powtórzenia nazwy pliku graficznego.

B. niedomknięcia znacznika br.

C. niedomknięcia znacznika img.

D. braku cudzysłowu.

Twoja odpowiedź jest prawidłowa. Błąd walidacji w kodzie HTML na obrazku wynikał z braku cudzysłowu. W HTML atrybuty powinny być zawsze otoczone cudzysłowami, są to pojedyncze (' ') lub podwójne (" "), co jest wymogiem poprawnej walidacji kodu. Atrybuty, którym nie przydzielono wartości, mogą powodować problemy w przeglądarkach, co z kolei prowadzi do błędów walidacji. Dlatego zawsze należy pamiętać o otoczeniu atrybutów cudzysłowami, aby zapewnić poprawne działanie strony internetowej. Prawidłowo zapisany atrybut w tagu HTML powinien wyglądać tak: <img src="obrazek.jpg">. W praktyce niezgodność z tą konwencją może prowadzić do nieprawidłowego wyświetlania strony lub jej elementów. Dlatego zawsze warto zwracać uwagę na poprawność składni podczas pisania kodu HTML.

Pytanie 8

Skrypt na stronę WWW stworzony w języku PHP

A. może działać bez wsparcia serwera WWW

B. jest przetwarzany w taki sam sposób jak JavaScript

C. jest wykonywany po stronie serwera

D. jest realizowany po stronie klienta

Kod PHP jest przetwarzany po stronie serwera, co oznacza, że wszystkie instrukcje napisane w tym języku są wykonywane na serwerze, a nie na komputerze klienta. Kiedy użytkownik żąda strony internetowej, serwer WWW interpretuje kod PHP, generuje odpowiedni HTML i wysyła go do przeglądarki. Dzięki temu możliwe jest dynamiczne tworzenie treści, uzależnionej od danych wejściowych użytkownika czy zawartości bazy danych. Przykładowo, w aplikacjach internetowych takich jak systemy zarządzania treścią (CMS) czy platformy e-commerce, PHP pozwala na generowanie różnorodnych widoków i interakcji w oparciu o aktualne informacje. Kluczowym aspektem dobrej praktyki w programowaniu w PHP jest separacja logiki aplikacji od warstwy prezentacji, co wspiera łatwiejsze zarządzanie kodem i jego utrzymanie. Warto również zaznaczyć, że PHP współpracuje z różnymi systemami baz danych, co umożliwia przechowywanie i przetwarzanie dużych ilości danych. Na przykład, w typowej aplikacji webowej można wykorzystać PHP do komunikacji z bazą MySQL, co pozwala na dynamiczne ładowanie treści w odpowiedzi na interakcje użytkownika.

Pytanie 9

W systemie kolorów RGB kolor żółty uzyskuje się przez zmieszanie dwóch barw: zielonej i czerwonej. Jaki kod szesnastkowy reprezentuje kolor żółty?

A. #F0F0F0

B. #00FFFF

C. #FFFF00

D. #FF00FF

Kolor żółty w palecie RGB jest uzyskiwany przez połączenie maksymalnej wartości czerwonego (FF) oraz maksymalnej wartości zielonego (FF), przy zerowej wartości niebieskiego (00). Kod szesnastkowy #FFFF00 oznacza, że czerwony ma wartość 255 (FF), zielony również ma wartość 255 (FF), a niebieski ma wartość 0 (00). Przykładowe zastosowanie koloru żółtego znajduje się w projektowaniu graficznym, gdzie jest on często wykorzystywany do wyróżniania istotnych elementów, takich jak przyciski lub informacje, które mają przyciągnąć uwagę użytkownika. W kontekście aplikacji internetowych, stosowanie barw RGB zgodnie z ich reprezentacją szesnastkową jest zgodne z dobrymi praktykami w zakresie UX/UI, zapewniając spójność i czytelność interfejsów. Standardy dotyczące kolorów, takie jak WCAG, również zalecają odpowiednie kontrasty, które można osiągnąć przy użyciu kolorów takich jak żółty. Poznanie różnych kodów kolorów oraz ich zastosowań jest kluczowe dla skutecznego projektowania wizualnego, co przyczynia się do lepszej interakcji użytkownika z aplikacjami i stronami internetowymi.

Pytanie 10

Który z poniższych kodów HTML spowoduje taki sam efekt formatowania jak na zaprezentowanym rysunku?

A. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

B. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

C. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

D. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

Twoja odpowiedź jest w porządku, bo tag w HTML rzeczywiście służy do pisania tekstu kursywą, a do pogrubiania. Jak użyjesz tych znaczników razem, to zyskujesz fajny efekt, który widać na obrazku. Kawałek tekstu paragrafie zobaczysz sposoby formatowania sprawi, że cały fragment będzie w kursywie, ale tylko wyraz w będzie pogrubiony. To jest spoko, bo pokazuje jak poprawnie używać znaczniki w HTML. Warto jednak pamiętać, żeby nie przesadzać z tymi znacznikami i używać ich tylko wtedy, gdy naprawdę chcesz wyróżnić coś w tekście. Dzisiaj większość stylizacji robi się przez CSS, co pozwala lepiej oddzielić strukturę od wyglądu dokumentu. Ale jak chcesz coś szybko wyróżnić w HTML, to użycie i jak najbardziej ma sens. To wszystko jest mega ważne, bo zrozumienie tych podstaw będzie przydatne, gdy będziesz budować strony.

Pytanie 11

Która z poniżej wymienionych zasad nie przyczyni się do poprawy czytelności kodu?

A. W każdej linii kodu powinna znaleźć się tylko jedna komenda

B. Kod powinien być napisany bez wcięć i nadmiarowych enterów

C. Nazwy zmiennych muszą odzwierciedlać ich funkcję

D. Trzeba dodawać komentarze w trudniejszych fragmentach kodu

Odpowiedź "Kod powinien być napisany bez wcięć i zbędnych enterów" jest prawidłowa, ponieważ brak wcięć i odpowiednich przerw w kodzie negatywnie wpływa na jego czytelność. Właściwe formatowanie kodu, w tym stosowanie wcięć, jest kluczowe dla zrozumienia struktury programu. Pomaga to programistom w szybkim zlokalizowaniu bloków kodu, a także wzmacnia hierarchię i powiązania między funkcjami i klasami. Na przykład w języku Python, wcięcia są integralną częścią składni, co oznacza, że brak wcięć skutkuje błędami wykonania. W praktyce, pisząc kod, warto zastosować konwencje formatowania takie jak PEP 8 dla Pythona lub Google Java Style Guide dla Javy, które promują przejrzystość i jednoznaczność. W związku z tym, aby zwiększyć czytelność i zrozumiałość kodu, należy stosować wcięcia oraz logiczne podziały. Dobrze sformatowany kod nie tylko ułatwia jego przeglądanie, ale również późniejsze utrzymanie oraz współpracę z innymi programistami.

Pytanie 12

W dołączonym fragmencie kodu CSS kolor został przedstawiony w formie

A. CMYK

B. dziesiętnej

C. szesnastkowej

D. HSL

Kolor zapisany w postaci szesnastkowej w CSS to popularny sposób definiowania barw na stronach internetowych. Szesnastkowy format koloru wykorzystuje sześć znaków, które są kombinacją cyfr oraz liter od A do F, poprzedzone znakiem hash (#). Każda para znaków reprezentuje wartość jednego z trzech podstawowych kolorów RGB: czerwonego, zielonego i niebieskiego. Na przykład kolor #008000 składa się z czerwonego o wartości 00, zielonego o wartości 80 i niebieskiego o wartości 00. Szesnastkowy zapis jest preferowany ze względu na swoją kompaktowość i zgodność ze standardami sieciowymi. W praktyce, projektanci często używają narzędzi do konwersji kolorów, aby uzyskać pożądane odcienie, co ułatwia zastosowanie odpowiednich wartości szesnastkowych w kodzie. Format ten pozwala także na tworzenie skróconych wersji, jak #FFF dla bieli. Jego użycie jest powszechne i dobrze zrozumiałe w branży, co czyni go uniwersalnym wyborem w projektach webowych.

Pytanie 13

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

A. jedynie small, smaller, large, larger

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

C. wyłącznie small, medium, large

D. zaledwie big oraz small

Brak odpowiedzi na to pytanie.

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

Pytanie 14

Zapis CSS postaci:

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

sprawi, że na stronie internetowej

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

B. każdy z punktów listy będzie miał osobne tło pobrane z grafiki rys.gif

C. punktorem listy nienumerowanej będzie rys.gif

D. rys.gif będzie stanowił ramkę dla listy nienumerowanej.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje! Poprawnie zidentyfikowałeś, że w podanym kodzie CSS, obrazek 'rys.gif' będzie służył jako punktor listy nienumerowanej. Według standardów CSS, właściwość list-style-image jest używana do określenia obrazka, który będzie używany jako punktor w liście nienumerowanej. Zasada ta jest bardzo przydatna, kiedy chcemy stworzyć niestandardowe punktory listy, które lepiej pasują do designu naszej strony. Możemy użyć dowolnego obrazka, który jest dostępny online lub zasobu z naszej lokalnej przestrzeni roboczej. Pamiętaj jednak, że obrazek powinien być mały i czytelny. W tym konkretnym przypadku, obrazek 'rys.gif' zostanie ustawiony jako punktor dla każdego elementu listy <li> wewnątrz listy nienumerowanej <ul>. Używając tej techniki, możemy stworzyć atrakcyjniejsze i bardziej interaktywne listy na naszej stronie internetowej.

Pytanie 15

Aby wykonać przycisk na stronę internetową zgodnie z przedstawionym wzorem, w programie do grafiki rastrowej należy użyć opcji:

A. zaokrąglenie narożników (prostokąt z zaokrąglonymi rogami)

B. zaznaczenie eliptyczne

C. zniekształcenie i deformacja

D. propagacja wartości

Wzór przedstawia prostokątny przycisk z zaokrąglonymi rogami. Taki kształt rysuje się w edytorze grafiki rastrowej narzędziem prostokąta z zaokrąglonymi rogami (lub zaokrąglając zaznaczenie o zadanym promieniu). Daje to równe, gładkie narożniki zgodne z przykładem. Dlatego poprawna jest opcja zaokrąglenia narożników.

Pytanie 16

W kodzie HTML znajdziemy formularz. Jaki rezultat zostanie pokazany przez przeglądarkę, jeśli użytkownik wprowadził do pierwszego pola wartość "Przykładowy text"?

A. Efekt 4

B. Efekt 2

C. Efekt 3

D. Efekt 1

Efekt 2 jest prawidłowy, ponieważ odpowiada dokładnemu odwzorowaniu HTML. Kod zawiera element <textarea> oraz dwa pola typu checkbox. Przeglądarka wyświetla pole tekstowe o określonym rozmiarze, gdzie użytkownik może wpisać tekst. Checkboxy pozwalają na wybór opcji, niezależnych od siebie, co odróżnia je od radiobuttonów. Przykładowy text wpisany w pole <textarea> zostanie wyświetlony w miejscu tego pola, co jest dobrze widoczne na obrazie odpowiadającym efektowi 2. Warto pamiętać, że <textarea> stosuje się do dłuższych form tekstu, co jest standardem w projektowaniu formularzy. Użycie checkboxów jest zgodne z dobrymi praktykami, gdy użytkownik może zaznaczyć dowolną liczbę opcji. Jest to ważne, aby dostarczyć użytkownikowi intuicyjny interfejs do wprowadzania i wyboru danych. W HTML ważne jest, aby kod był semantyczny i zgodny z oczekiwaniami użytkowników, co ten przykład dobrze ilustruje. Formularze powinny być zawsze testowane pod kątem użyteczności i poprawności w różnych przeglądarkach.

Pytanie 17

Który znacznik HTML jest elementem BLOKOWYM?

<img>

<strong>

<span>

<p>

Element BLOKOWY zajmuje całą szerokość i zaczyna się od nowej linii - takim elementem jest akapit . Dlatego elementem blokowym jest .

Pytanie 18

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

Rozdział 1

tekst

Podrozdział 1.1

tekst

Podrozdział 1.2

Jakie są poprawne znaczniki do tego formatu?

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

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

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

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

Brak odpowiedzi na to pytanie.

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

Pytanie 19

Na ilustracji przedstawiono rezultat stosowania stylów CSS oraz odpowiadający mu kod HTML, który generuje ten przykład. Przyjmując, że marginesy wewnętrzne mają wartość 50 px, natomiast zewnętrzne wynoszą 20 px, styl CSS dla tego obrazu wygląda następująco

A. Odpowiedź B

B. Odpowiedź A

C. Odpowiedź D

D. Odpowiedź C

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź C jest poprawna, ponieważ zdefiniowany styl CSS zawiera wszystkie elementy odpowiadające przedstawionemu formatowaniu obrazu. Styl ten określa kolor tła jako Teal, co jest zgodne z opisem wizualnym obrazu. Dodatkowo zastosowanie solidnej czarnej ramki o grubości 4 pikseli odpowiada profesjonalnym standardom, które zapewniają wyraźne oddzielenie obrazu od reszty treści przez wyróżnienie go. Zastosowanie marginesów zewnętrznych o wartości 20 pikseli oraz wewnętrznych paddingów o wartości 50 pikseli jest zgodne z podanym założeniem, co pozwala na właściwe umiejscowienie obrazu na stronie, dając przestrzeń wokół i wewnątrz elementu. Dbałość o takie szczegóły jest kluczowa dla tworzenia responsywnych i estetycznych stron internetowych. Praktyczne stosowanie tego typu stylizacji umożliwia poprawienie czytelności oraz przyciąga uwagę użytkowników na znaczące elementy strony. Warto przy tym pamiętać o zasadzie KISS (Keep It Simple, Stupid), która zachęca do utrzymywania prostoty w projektach, co nie tylko ułatwia ich tworzenie ale też późniejsze utrzymanie.

Pytanie 20

Co w pasku adresu przeglądarki sygnalizuje, że połączenie ze stroną jest bezpieczne (szyfrowane HTTPS)?

A. dane whois domeny

B. ikona kłódki

C. nazwa serwera w nagłówku

D. adres IP serwera

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gdy strona działa przez HTTPS z ważnym certyfikatem, przeglądarka pokazuje w pasku adresu ikonę kłódki, a adres zaczyna się od https://. Oznacza to, że dane między przeglądarką a serwerem są szyfrowane, a tożsamość witryny potwierdzona certyfikatem. Dlatego bezpieczne połączenie sygnalizuje ikona kłódki.

Pytanie 21

Reprezentacja znacznika HTML w formacie

<a href="#hobby">przejdź</a>

A. jest błędny, użyto niewłaściwego znaku "#" w atrybucie href

B. jest błędny, w atrybucie href należy wpisać adres URL

C. jest poprawny, po kliknięciu w odnośnik otworzy się strona internetowa o URL "hobby"

D. jest poprawny, po kliknięciu w odnośnik strona zostanie przewinięta do sekcji o nazwie "hobby"

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis znacznika HTML przedstawiony w pytaniu jest poprawny i spełnia standardy języka HTML. Użycie elementu <a> z atrybutem href i wartością #hobby oznacza, że użytkownik po kliknięciu w ten link zostanie przewinięty do sekcji na stronie, która ma przypisany identyfikator "hobby". Takie podejście jest zgodne z dobrymi praktykami w projektowaniu stron internetowych, umożliwiając tworzenie nawigacji wewnętrznej. Warto zaznaczyć, że użycie znaku hash (#) w atrybucie href wskazuje na lokalizację w obrębie tej samej strony. To jest powszechnie stosowane w przypadkach, gdy chcemy ułatwić użytkownikom dostęp do różnych sekcji na tej samej stronie, bez konieczności ładowania nowej strony. Przykładem zastosowania może być strona z długim artykułem, gdzie linki do poszczególnych nagłówków ułatwiają orientację czytelników. Oprócz tego, korzystając z takiej struktury, możemy również poprawić doświadczenia użytkowników oraz zwiększyć efektywność SEO, ponieważ wyszukiwarki są w stanie lepiej zrozumieć organizację treści na stronie.

Pytanie 22

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

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

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W HTML kluczowe informacje, takie jak autor, streszczenie i słowa kluczowe, powinny być umieszczone między znacznikami <head> i </head>. Te znaczniki <meta> są naprawdę ważne, bo to one informują przeglądarki i wyszukiwarki o tym, co jest w Twojej stronie. Na przykład, znaczniki <meta name="description" content="Opis strony"> oraz <meta name="keywords" content="słowo1, słowo2, słowo3">. Dzięki tym danym, wyszukiwarki lepiej rozumieją, o czym jest strona, co może wpłynąć na jej pozycję w wynikach wyszukiwania. Moim zdaniem, dobrze przemyślane opisy i słowa kluczowe to klucz do sukcesu, bo to one przyciągają użytkowników do kliknięcia w Twój link. Pamiętaj też, że znacznik <title> i inne meta tagi w <head> są mega istotne dla SEO. Informacje te tworzą podstawy Twojego dokumentu HTML, więc warto je dobrze wypełnić, żeby strona działała jak należy.

Pytanie 23

W formularzu umieszczono kontrolki do podania imienia oraz nazwiska. Który z atrybutów odpowiada za wyświetlanie sugestii w polu kontrolki, która znika, gdy użytkownik zaczyna wpisywanie wartości?

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

A. value

B. placeholder

C. for

D. title

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut "placeholder" jest kluczowym elementem w formularzach HTML, który definiuje tekst podpowiedzi umieszczony w polu kontrolki. Tekst ten zniknie, gdy użytkownik zacznie wpisywać dane, co pozwala na zapewnienie bardziej intuicyjnego interfejsu. W przypadku przykładowego formularza, atrybut "placeholder" jest użyty w polu nazwiska, co stanowi doskonały przykład jego praktycznego zastosowania. Dobrą praktyką jest stosowanie atrybutu "placeholder" w formularzach, ponieważ wprowadza on klarowność i ułatwia użytkownikom wypełnianie formularzy, jednocześnie zmniejszając ryzyko błędów. Atrybut ten nie tylko poprawia doświadczenia użytkownika, ale także zwiększa dostępność formularzy, ponieważ pozwala osobom korzystającym z czytników ekranu lepiej zrozumieć, jakie dane są wymagane. Warto również zauważyć, że "placeholder" nie powinien być używany jako substytut etykiety, która jest niezbędna do poprawnej dostępności i użyteczności. Etykiety powinny być zawsze stosowane, a "placeholder" powinien pełnić jedynie funkcję pomocniczą.

Pytanie 24

Które z poniższych formatowań NIE jest zapisem w języku CSS?

body { background-color: yellow; }   (plik .css)

<body bgcolor="yellow">

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kolor tła można w CSS ustawić na trzy sposoby: stylem wewnętrznym w <code><style></code>, regułą w zewnętrznym pliku .css albo śródliniowo przez atrybut <code>style</code>. We wszystkich używa się właściwości CSS <code>background-color</code>. Zapis <code><body bgcolor="yellow"></code> NIE jest CSS-em - <code>bgcolor</code> to przestarzały atrybut HTML, wycofany na rzecz stylów. Dlatego formatowaniem spoza CSS jest <code><body bgcolor="yellow"></code>.

Pytanie 25

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. tr { background-color: Pink; }

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

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

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

Brak odpowiedzi na to pytanie.

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

Pytanie 26

Które z podanych formatów NIE JEST zapisane w języku CSS?

A. C

B. D

C. A

D. B

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź C jest prawidłowa, ponieważ atrybut bgcolor jest przestarzałą metodą określania koloru tła w HTML i nie jest częścią CSS. CSS (Cascading Style Sheets) zostało stworzone, aby oddzielić prezentację dokumentu od jego struktury. Korzystanie z CSS pozwala na lepsze zarządzanie stylem i spójność w wyglądzie wielu stron internetowych. Atrybuty HTML związane z wyglądem, takie jak bgcolor, zostały zastąpione przez deklaracje w CSS. Na przykład w CSS można ustawić kolor tła całej strony za pomocą selektora body i właściwości background-color. Takie podejście jest bardziej elastyczne i zgodne z nowoczesnymi standardami. Dzięki CSS możliwe jest stosowanie zaawansowanych stylizacji, takich jak gradienty czy obrazy tła, które nie były dostępne w prostych atrybutach HTML. Przy projektowaniu stron internetowych zaleca się, aby unikać przestarzałych atrybutów HTML, które mogą być niekompatybilne z nowoczesnymi przeglądarkami i powodować problemy z dostępnością.

Pytanie 27

W zaprezentowanej części formularza HTML znajduje się pole, które można określić jako?

<input type="password" name="pole">

A. ukrywa wprowadzone znaki.

B. domyślnie posiada wpisany tekst "pole".

C. wyświetla wprowadzone znaki.

D. pozwala na wprowadzanie jedynie wartości liczbowych.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest właściwa. W tym fragmencie formularza HTML mamy pole input, które wprowadzone znaki ukrywa. To dzięki atrybutowi 'type="password"' w elemencie input. W HTML atrybut 'type' mówi nam, jaki typ danych użytkownik może wprowadzić do tego pola. Jak masz 'password', to wpisane rzeczy są zasłonięte symbolami, jak np. gwiazdki czy kropki, żeby chronić dane użytkownika. To standardowa sprawa, szczególnie dla haseł i innych ważnych informacji, żeby nikt ich nie zobaczył. Pamiętaj, że takie pola powinny być zawsze dobrze oznaczone i zabezpieczone, to ważne dla bezpieczeństwa.

Pytanie 28

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

A. <img>

B. <object>

C. <video>

D. <audio>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
No to wiesz, że znacznik <object> to najlepszy sposób na osadzanie multimediów na stronie, zwłaszcza animacji FLASH (.swf). Działa to tak, że możemy włączyć różne treści zewnętrzne do HTML, co jest super do integracji różnych plików, jak wideo czy dźwięki. Patrz na ten przykład: <object data='animacja.swf' width='600' height='400'> <param name='autoplay' value='true'> <param name='loop' value='true'> </object>. Zauważ, że <object> może mieć różne atrybuty, które pomagają w kontrolowaniu jak to wszystko się wyświetla, jak 'width', 'height' i inne parametry odtwarzania. Jednak, biorąc pod uwagę dzisiejsze standardy, FLASH jest trochę na wylocie przez problemy z bezpieczeństwem i wsparciem przeglądarek. Lepiej więc, zamiast tego, patrzeć w stronę HTML5 i JavaScript do tworzenia animacji. Można używać animacji CSS3 lub różnych bibliotek JS, które dają dużo więcej możliwości i lepsze wsparcie na urządzeniach mobilnych.

Pytanie 29

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

A. Rys. A

B. Rys. C

C. Rys. D

D. Rys. B

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwość CSS border-radius służy do zaokrąglania rogów elementu na stronie internetowej. W przypadku wartości procentowej jak 20% zaokrąglenie jest obliczane w stosunku do wymiarów elementu co pozwala na uzyskanie proporcjonalnego wyglądu niezależnie od rozmiaru ramki. Wybranie odpowiedzi Rys. B jest poprawne ponieważ widoczny jest tam efekt zaokrąglonych rogów co jednoznacznie wskazuje na zastosowanie border-radius. Takie stylizacje są powszechnie używane w projektowaniu nowoczesnych interfejsów użytkownika aby nadać im bardziej miękki i przyjazny wygląd. Dobre praktyki projektowe zalecają umiarkowane stosowanie zaokrągleń aby nie przesadzić z efektami wizualnymi co mogłoby pogorszyć czytelność i funkcjonalność. Warto również pamiętać o aspekcie responsywności – używanie wartości procentowych pozwala na lepsze dostosowanie się do różnych rozdzielczości ekranów co jest kluczowe w nowoczesnym web designie. Dzięki border-radius można także tworzyć zaawansowane efekty graficzne łącząc go z innymi właściwościami CSS jak cienie czy gradienty co pozwala na osiągnięcie atrakcyjnych wizualnie elementów bez potrzeby użycia obrazów.

Pytanie 30

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

B. format2

C. format4

D. format1

Brak odpowiedzi na to pytanie.

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

Grafika, która ma być umieszczona na stronie, powinna mieć przezroczyste tło. Jakim formatem graficznym powinien być zapisany taki plik?

A. CDR

B. JPEG

C. PNG

D. BMP

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format PNG (Portable Network Graphics) jest szczególnie ceniony w kontekście grafiki internetowej, ponieważ obsługuje przezroczystość, co czyni go idealnym wyborem dla obrazów, które wymagają tła transparentnego. Przezroczystość w formacie PNG jest realizowana poprzez zastosowanie kanału alfa, co pozwala na uzyskanie różnorodnych efektów wizualnych, takich jak cienie, gradienty czy delikatne przejścia między kolorami. Przykłady zastosowania to ikony, logo, grafiki na stronach internetowych, które muszą harmonizować z różnymi kolorami tła. W przeciwieństwie do formatów takich jak JPEG, który nie obsługuje przezroczystości i używa kompresji stratnej, PNG oferuje kompresję bezstratną, co oznacza, że jakość obrazu nie ulega pogorszeniu po zapisaniu. W kontekście praktyk webowych, użycie PNG jest zgodne z zaleceniami dotyczącymi optymalizacji obrazów w sieci, co przyczynia się do szybszego ładowania stron i lepszej jakości wizualnej.

Pytanie 32

Której właściwości CSS użyć, aby ustawić odstępy między WYRAZAMI?

letter-space

white-space

line-spacing

word-spacing

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odstępy między WYRAZAMI ustawia w CSS właściwość <code>word-spacing</code>, np. <code>word-spacing: 5px;</code> rozsuwa słowa. Dlatego do odstępów między wyrazami służy <code>word-spacing</code>.

Pytanie 33

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

B. Efekt 1.

C. Efekt 4.

D. Efekt 2.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje, wybrałeś poprawną odpowiedź, która jest 'Efekt 4'. W tym przypadku, dokument HTML został odpowiednio sformatowany za pomocą kodu CSS. Widzimy, że pseudoelement ::after został użyty do dodania tekstu '- Pies' za każdym elementem listy. Jest to często stosowana technika w CSS do dodawania dekoracji lub dodatkowych informacji do elementów na stronie. Dodatkowo, widzimy, że styl CSS definiuje kolor tła jako 'teal' i kolor tekstu jako 'white'. Jest to zgodne z zasadami dobrego projektowania stron internetowych, które sugerują, że kontrast między kolorem tekstu a tłem powinien być wystarczający, aby tekst był łatwo czytelny. Również dobrym podejściem jest utrzymanie spójności kolorów na stronie internetowej, co poprawia jej estetykę i profesjonalizm. W praktyce, umiejętność manipulacji elementami HTML za pomocą CSS jest kluczowa dla każdego front-end developera.

Pytanie 34

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

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

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wygląd odnośników zależnie od ich stanu ustawiają w CSS pseudoklasy. <code>a:link</code> dotyczy linku jeszcze nieodwiedzonego, a <code>a:visited</code> - już odwiedzonego. Aby nieodwiedzony był żółty, a odwiedzony zielony, zapisuje się <code>a:link { color: yellow; } a:visited { color: green; }</code>. Istnieją też <code>:hover</code> (po najechaniu) i <code>:active</code> (w trakcie kliknięcia); zaleca się definiować je w kolejności LVHA. Dlatego poprawny jest ten zapis.

Pytanie 35

Do jakich zadań można wykorzystać program FileZilla?

A. analizowania skryptu na stronie

B. publikacji strony internetowej

C. kompilowania skryptu na stronie

D. sprawdzania poprawności strony internetowej

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
FileZilla to popularny klient FTP (File Transfer Protocol), który umożliwia przesyłanie plików między lokalnym komputerem a serwerem internetowym. Jego głównym zastosowaniem jest publikacja stron internetowych, co oznacza, że dzięki FileZilla można łatwo przenieść pliki HTML, CSS, JavaScript oraz inne zasoby na serwer, gdzie strona stanie się dostępna w Internecie. Przykładowo, jeśli stworzyłeś stronę w lokalnym środowisku, FileZilla pozwala na połączenie się z serwerem docelowym, a następnie na przesłanie wszystkich niezbędnych plików. Dobre praktyki branżowe zalecają również zarządzanie wersjami i regularne aktualizacje witryn, a FileZilla wspiera te procesy, umożliwiając łatwe synchronizowanie lokalnych katalogów z zawartością serwera. Dodatkowo, FileZilla obsługuje różne protokoły, takie jak SFTP czy FTPS, co zwiększa bezpieczeństwo transferu danych. Właściwe korzystanie z tego narzędzia jest kluczowe dla zapewnienia prawidłowego działania witryn oraz ich efektywnej publikacji.

Pytanie 36

Znacznik <ins> w języku HTML jest używany do wskazania

A. tekstu o zmienionym formacie

B. tekstu, który został dodany

C. cytowanego fragmentu tekstu

D. tekstu, który został usunięty

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <ins> w języku HTML jest używany do oznaczania tekstu, który został dodany w stosunku do pierwotnej treści dokumentu. Został wprowadzony w standardzie HTML5, co umożliwia programistom i twórcom stron internetowych wyraźne zaznaczanie zmian w treści. Użycie tego znacznika jest szczególnie przydatne w kontekście dokumentów, które podlegają częstym aktualizacjom lub rewizjom, gdyż pozwala użytkownikom łatwo dostrzegać dodany tekst. Przykładem może być sytuacja, w której wprowadzasz poprawki do artykułu na blogu: tekst oznaczony jako <ins> może być wyświetlany z podkreśleniem, co wizualnie wskazuje na jego nowość. Warto także zwrócić uwagę, że znacznik <ins> może być używany w połączeniu z atrybutem 'cite', który wskazuje źródło zmiany, oraz atrybutem 'datetime', który określa datę i godzinę wprowadzenia zmian. Dzięki tym właściwościom, <ins> przyczynia się do lepszego zarządzania treścią w dokumentach HTML, spełniając wymagania dotyczące dostępności i przejrzystości informacji.

Pytanie 37

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

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

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

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

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

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

Brak odpowiedzi na to pytanie.

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

Pytanie 38

W jakim formacie powinien być zapisany obraz, aby mógł być wyświetlany na stronie internetowej z zachowaniem przezroczystości?

A. PNG

B. CDR

C. JPG

D. BMP

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format PNG (Portable Network Graphics) jest szeroko stosowany w sieci internetowej, ponieważ obsługuje przezroczystość, co jest kluczowe przy tworzeniu grafik, które mają być używane na stronach internetowych. Przezroczystość pozwala na nałożenie grafik na różne tła bez widocznych prostokątów czy kolorowych krawędzi, co znacznie poprawia estetykę oraz elastyczność projektów graficznych. PNG wykorzystuje kompresję bezstratną, co oznacza, że jakość obrazu nie ulega pogorszeniu podczas jego zapisywania, co jest istotne dla profesjonalnych projektów. Przykłady zastosowania formatu PNG obejmują ikony, logotypy oraz różnego rodzaju ilustracje, które muszą być wyświetlane na różnych tłach. W branży internetowej dobrym standardem jest używanie PNG do grafik wymagających przezroczystości, szczególnie w kontekście responsywnych projektów, gdzie różne elementy mogą mieć różne tła w zależności od urządzenia. Ponadto, PNG obsługuje kolor 24-bitowy oraz przezroczystość 8-bitową, co daje możliwość tworzenia bardziej złożonych efektów wizualnych. Zastosowanie tego formatu jest zgodne z dobrymi praktykami w projektowaniu stron, co czyni go preferowanym wyborem w wielu sytuacjach.

Pytanie 39

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. linków, które otwierają się w nowej karcie.

C. wszystkich linków.

D. treści akapitu.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 'odnośników, które otwierają się w osobnej karcie' jest poprawna, ponieważ w CSS selektor 'a[target="_blank"]' odnosi się do elementów <a> (odnośników), które mają atrybut 'target' ustawiony na '_blank'. Oznacza to, że te odnośniki są zaprojektowane do otwierania linków w nowej karcie lub oknie przeglądarki. Przykład zastosowania: jeśli tworzymy stronę internetową z odnośnikami do zewnętrznych zasobów, użycie atrybutu 'target="_blank"' pozwala użytkownikom na zachowanie otwartej strony w przeglądarce. W CSS, kolor czcionki tych odnośników został ustawiony na żółty, co jest praktycznym podejściem do wyróżnienia ich w stosunku do innych linków. Warto również zauważyć, że stosowanie kolorów w kontekście dostępności jest istotne, dlatego dobór kolorów powinien być przemyślany, aby nie wpłynąć negatywnie na czytelność. Dobre praktyki obejmują również dodanie wskazówki do odnośnika, na przykład poprzez użycie atrybutu 'title', co jeszcze bardziej ułatwia użytkownikom zrozumienie, czego mogą się spodziewać po kliknięciu w link.

Pytanie 40

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

D. A.

Brak odpowiedzi na to pytanie.

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

Rozpocznij nowy egzamin

Powrót do strony głównej