Wyniki egzaminu

Informacje o egzaminie:
  • Zawód: Technik informatyk
  • Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
  • Data rozpoczęcia: 9 grudnia 2025 13:35
  • Data zakończenia: 9 grudnia 2025 13:39

Egzamin zdany!

Wynik: 29/40 punktów (72,5%)

Wymagane minimum: 20 punktów (50%)

Pochwal się swoim wynikiem!
Szczegółowe wyniki:
Pytanie 1

Jakim zapisem w dokumencie HTML można stworzyć element, który wyświetli obrazek kotek.jpg z tekstem alternatywnym "obrazek kotka"?

A. <img src="kotek.jpg" alt="obrazek kotka">
B. <img href="kotek.jpg" title="obrazek kotka">
C. <img href="kotek.jpg" alt="obrazek kotka">
D. <img src="kotek.jpg" title="obrazek kotka">
Odpowiedź <img src="kotek.jpg" alt="obrazek kotka"> jest poprawna, ponieważ zgodnie z standardem HTML do wyświetlania obrazów należy używać atrybutu 'src', który wskazuje źródło obrazu. Atrybut 'alt' jest również niezbędny, ponieważ zapewnia tekst alternatywny dla obrazów, co jest kluczowe dla dostępności strony internetowej. Użytkownicy, którzy korzystają z technologii wspomagających, takich jak czytniki ekranu, będą mogli zrozumieć zawartość obrazu poprzez ten tekst. Dobrą praktyką jest również stosowanie odpowiednich nazw plików obrazów oraz opisowych tekstów alternatywnych, co poprawia SEO i użyteczność strony. Na przykład, jeśli w przyszłości planujesz dodać więcej obrazów kotów, warto, aby każdy z nich miał unikalny opis w atrybucie 'alt', co pomoże w lepszym zrozumieniu kontekstu przez użytkowników i roboty wyszukiwarek. W ten sposób poprawiasz zarówno dostępność, jak i indeksowalność swojej strony.

Pytanie 2

Podaj nazwę Systemu Zarządzania Treścią, którego logo jest widoczne na zamieszczonym rysunku?

Ilustracja do pytania
A. WordPress
B. MediaWiki
C. Drupal
D. Joomla!
Joomla! to popularny system zarządzania treścią CMS który jest szeroko stosowany do tworzenia stron internetowych aplikacji online i portali. Dzięki swojej elastyczności Joomla! jest wybierany przez wiele firm i organizacji do zarządzania treścią online. System ten charakteryzuje się modułową architekturą która umożliwia łatwe rozszerzanie jego funkcjonalności za pomocą komponentów modułów i wtyczek. Jednym z głównych atutów Joomla! jest intuicyjny interfejs użytkownika który umożliwia zarządzanie treścią bez potrzeby głębokiej wiedzy technicznej. Dodatkowo Joomla! wspiera wiele języków co czyni go idealnym wyborem dla międzynarodowych organizacji. Warto również zaznaczyć że Joomla! jest open-source co oznacza że jest rozwijany przez społeczność programistów z całego świata którzy regularnie aktualizują i ulepszają oprogramowanie. Wybranie Joomla! jako CMS pozwala na korzystanie z dużej liczby szablonów i dodatków które umożliwiają personalizację witryny zgodnie z wymaganiami klienta. Dzięki solidnej bazie użytkowników i deweloperów Joomla! oferuje wsparcie techniczne i dokumentację która ułatwia rozwiązywanie problemów. W praktyce Joomla! jest wykorzystywany przez różnorodne witryny od małych blogów po rozbudowane platformy e-commerce co potwierdza jego wszechstronność i skuteczność.

Pytanie 3

Zapisano kod HTML wstawiający grafikę na stronę internetową: ```pejzaż``` Jeżeli rysunek.png nie zostanie odnaleziony, przeglądarka:

A. w miejscu grafiki wypisze tekst "pejzaż".
B. nie wyświetli strony internetowej.
C. w miejscu grafiki wypisze błąd wyświetlania strony.
D. w miejscu grafiki wypisze tekst "rysunek.png".
Brawo! Wybrałeś prawidłową odpowiedź. Element <img> w kodzie HTML może mieć atrybut alt, który określa tekst alternatywny, który ma być wyświetlony, gdy obrazek nie może zostać załadowany. W tym przypadku, atrybut alt ma wartość 'pejzaż', co oznacza, że jeśli obraz 'rysunek.png' nie może zostać załadowany, przeglądarka wyświetli tekst 'pejzaż' w miejscu, gdzie powinien być obraz. Ta funkcja jest przydatna z kilku powodów. Po pierwsze, pozwala użytkownikowi zrozumieć kontekst strony, nawet jeśli nie może zobaczyć obrazu. Po drugie, jest to zgodne ze standardami dostępności, ponieważ czytniki ekranu dla osób niewidomych mogą odczytywać ten tekst. To jest ważne dla tworzenia stron internetowych, które są dostępne dla wszystkich.

Pytanie 4

Jak można dodać zewnętrzny arkusz stylów do dokumentu HTML?

A. <style>
B. <css>
C. <meta>
D. <link>
Dołączenie zewnętrznego arkusza stylów do kodu HTML realizowane jest przy użyciu znacznika <link>, który znajduje się w sekcji <head> dokumentu HTML. Ten znacznik umożliwia przeglądarkom internetowym odnalezienie i załadowanie zewnętrznego pliku CSS, co pozwala na zastosowanie stylów do elementów HTML. Przy użyciu atrybutu 'href' wskazujemy lokalizację arkusza stylów, natomiast atrybut 'rel' definiuje relację między dokumentem HTML a plikiem stylów, zazwyczaj ustawiając go na 'stylesheet'. Przykładowa struktura to: <link rel='stylesheet' href='styles.css'>. Taki sposób organizacji stylów pozwala na lepsze zarządzanie kodem, umożliwia wielokrotne wykorzystanie tych samych stylów w różnych dokumentach oraz przyspiesza ładowanie strony poprzez caching. Użycie zewnętrznych arkuszy stylów jest zgodne z najlepszymi praktykami programowania front-endowego, co wpływa pozytywnie na wydajność oraz SEO, umożliwiając lepszą indeksację przez wyszukiwarki. Dodatkowo, umożliwia to łatwiejsze wprowadzanie zmian w stylach bez potrzeby edytowania każdego pliku HTML z osobna.

Pytanie 5

W CSS, aby stylizować tekst przy użyciu przekreślenia, podkreślenia dolnego lub górnego, należy użyć atrybutu

A. text-indent
B. text-decoration
C. text-align
D. text-transform
Atrybut text-decoration w CSS jest kluczowy do formatowania tekstu, umożliwiając zastosowanie efektów takich jak przekreślenie, podkreślenie dolne oraz górne. Można go użyć w prosty sposób, na przykład: 'text-decoration: underline;' dodaje podkreślenie do tekstu, natomiast 'text-decoration: line-through;' umożliwia przekreślenie. Dzięki tym efektom, projektanci stron mogą skutecznie komunikować różne stany tekstu, takie jak usunięte lub nieaktualne informacje. Standardy CSS, określone przez W3C, zalecają użycie text-decoration w kontekście dostępności, co poprawia czytelność i umożliwia lepsze zrozumienie treści przez użytkowników. Warto pamiętać, że text-decoration posiada również wartość 'none', co pozwala na usunięcie wszelkich dekoracji z tekstu. Dzięki temu deweloperzy mogą z łatwością dostosować wygląd tekstu zgodnie z wymaganiami projektu, co stanowi dobrą praktykę w responsywnym web designie.

Pytanie 6

Zapis CSS w postaci: ```ul{ list-style-image:url('rys.gif');}``` spowoduje, że na stronie internetowej

A. rysunek rys.gif zostanie wyświetlony jako punkt listy nienumerowanej
B. rys.gif będzie służyć jako tło dla nienumerowanej listy
C. punktorem nienumerowanej listy stanie się rys.gif
D. każdy element listy zyska indywidualne tło pochodzące z grafiki rys.gif
W CSS właściwość 'list-style-image' służy do określenia obrazu, który ma być użyty jako znacznik punktu dla list nienumerowanych. W podanym przykładzie zapis 'ul{ list-style-image:url('rys.gif'); }' informuje przeglądarkę, aby zamiast domyślnego punktu, wykorzystała obrazek 'rys.gif'. Oznacza to, że każdy element listy (li) w tej nienumerowanej liście będzie miał przypisany obraz jako punkt. To podejście jest zgodne ze standardami CSS i jest szeroko stosowane w celu dodania indywidualnego stylu do elementów listy. Przykładowo, zamiast tradycyjnego kropkowania, możemy użyć ikon lub obrazów, które lepiej oddają tematykę strony. Ważne jest, aby plik graficzny był dostępny i poprawnie załadowany, co zapewni, że znacznik wyświetli się na stronie. Istotne jest również, aby pamiętać o optymalizacji obrazków dla sieci, co może poprawić szybkość ładowania strony.

Pytanie 7

Aby strona internetowa skutecznie dopasowywała się do urządzeń mobilnych, należy ustalić rozmiar czcionki

A. w pikselach
B. tylko znacznikami big i small
C. w milimetrach
D. w procentach
Wybór w procentach jako jednostki wielkości czcionki jest właściwy, ponieważ umożliwia elastyczne dostosowanie tekstu do różnych ekranów i rozdzielczości. Użycie procentów pozwala na skalowanie w oparciu o domyślną wielkość czcionki ustawioną w przeglądarce, co jest kluczowe dla responsywności witryny. Przykładowo, jeśli domyślna wielkość czcionki wynosi 16px, to ustawienie czcionki na 150% sprawi, że będzie miała 24px, co jest szczególnie przydatne na urządzeniach mobilnych, gdzie przestrzeń jest ograniczona, a czytelność ma kluczowe znaczenie. Dodatkowo, zastosowanie procentów jest zgodne z zasadami projektowania responsywnego, które skupiają się na dostosowywaniu elementów interfejsu użytkownika do różnych urządzeń. Warto również zauważyć, że techniki takie jak media queries w CSS mogą współpracować z procentami, co pozwala na jeszcze lepsze dopasowanie wielkości czcionki do konkretnej szerokości ekranu. Pamiętajmy, że stosowanie elastycznych jednostek, takich jak procenty, jest jedną z najlepszych praktyk w tworzeniu dostępnych i przyjaznych użytkownikowi interfejsów.

Pytanie 8

Wskaż styl CSS za pomocą którego został uzyskany przedstawiony efekt.

  • psy
  • koty
  • chomiki
  • świnki morskie
  • rybki
A. ul li:hover { background-color: DodgerBlue; }
B. ul li:nth-child(even) { background-color: DodgerBlue; }
C. ul li:nth-child(odd) { background-color: DodgerBlue; }
D. ul li:active { background-color: DodgerBlue; }
Wybrane przez Ciebie odpowiedzi są nieprawidłowe. Zacznijmy od selektora CSS 'ul li:active { background-color: DodgerBlue; }' - aktywny stan elementu to moment, kiedy jest on aktualnie klikany, co nie pasuje do obserwowanego efektu. Następnie 'ul li:nth-child(odd) { background-color: DodgerBlue; }' - ten selektor odnosi się do nieparzystych elementów listy, podczas gdy na obrazku parzyste elementy mają niebieskie tło. Na koniec 'ul li:hover { background-color: DodgerBlue; }' - pseudoklasa :hover odnosi się do stanu, kiedy kursor myszy jest nad elementem, co również nie jest zgodne z efektem na obrazku. Wybór nieodpowiedniej pseudoklasy sugeruje, że nie zrozumiałeś do końca ich zastosowania w CSS. Jest to typowy błąd, który można naprawić przez dokładniejsze zapoznanie się z tym aspektem języka CSS, konkretnie z różnymi pseudoklasami i ich zastosowaniem.

Pytanie 9

W trakcie weryfikacji stron internetowych nie analizuje się

A. zgodności z różnymi przeglądarkami
B. źródeł pochodzenia narzędzi edytorskich
C. błędów składniowych w kodzie
D. funkcjonowania linków
W procesie walidacji stron internetowych kluczowym celem jest upewnienie się, że kod HTML, CSS i inne zasoby są zgodne z obowiązującymi standardami W3C (World Wide Web Consortium). Walidacja skutecznie identyfikuje błędy składniowe, które mogą wpływać na renderowanie strony, analizuje działanie linków, a także sprawdza, jak strona zachowuje się w różnych przeglądarkach. Jednak aspekty związane z pochodzeniem narzędzi edytorskich nie są istotnym elementem tego procesu. Narzędzia edytorskie, takie jak edytory tekstowe czy IDE, są jedynie środkiem do tworzenia kodu, a ich źródło nie powinno wpływać na to, czy strona jest poprawnie zaimplementowana. Na przykład, strona może być poprawnie zwalidowana niezależnie od tego, czy została zbudowana w popularnym edytorze, takim jak Visual Studio Code, czy innym mniej znanym narzędziu. Dlatego koncentrowanie się na źródłach narzędzi edytorskich w kontekście walidacji byłoby nieuzasadnione i nieprzydatne.

Pytanie 10

Która z list jest interpretacją podanego kodu?

Ilustracja do pytania
A. Rys. D
B. Rys. C
C. Rys. A
D. Rys. B
Częstym błędem przy interpretacji kodu HTML jest niepoprawne rozumienie zagnieżdżania list lub ich typów. W przypadku pytania mamy do czynienia z jedną listą uporządkowaną ol która zawiera inne listy nieuporządkowane ul W niektórych odpowiedziach przewidziano błędnie że wszystkie elementy są częścią jednej listy nieuporządkowanej co nie jest zgodne z przedstawionym kodem Listy ol i ul pełnią różne role w HTML Specyfikacja HTML jasno określa że uporządkowane listy ol są używane wtedy gdy kolejność elementów ma znaczenie zaś nieuporządkowane ul gdy kolejność jest nieważna Źle zidentyfikowanie tych typów może prowadzić do błędów w prezentacji danych i wpływać na ich semantyczne znaczenie w dokumentach Aby uniknąć takich błędów warto zapoznać się z dokumentacją W3C oraz stosować się do dobrych praktyk kodowania takich jak wyraźne zagnieżdżanie list i zachowanie ich semantycznego sensu Utrzymywanie przejrzystości kodu zwiększa również jego dostępność i SEO co jest ważne w profesjonalnym tworzeniu stron internetowych

Pytanie 11

W jakiej technologii nie zachodzi możliwość przetwarzania danych wprowadzanych przez użytkowników na stronach internetowych?

A. AJAX
B. JavaScript
C. PHP
D. CSS
CSS (Cascading Style Sheets) to język stylów, który służy do opisywania wyglądu i formatu dokumentów HTML. Jego głównym celem jest kontrolowanie układu, kolorów, czcionek oraz innych aspektów wizualnych strony internetowej. CSS nie ma możliwości przetwarzania danych wprowadzanych przez użytkowników, gdyż nie posiada funkcji logiki programistycznej ani operacji na danych. Przykładowo, CSS może zmieniać kolor tła lub rozmiar tekstu, ale nie może zbierać informacji z formularzy ani reagować na interakcje użytkownika w sposób, w jaki robią to języki programowania takie jak JavaScript czy PHP. Może to prowadzić do mylnych przekonań, że CSS jest bardziej wszechstronny, niż jest w rzeczywistości, jednak jego zastosowanie ogranicza się wyłącznie do aspektów stylistycznych. W praktyce, aby przetwarzać dane użytkownika, niezbędne są inne technologie, które mogą współpracować z CSS, ale same w sobie nie są w stanie tego zrobić.

Pytanie 12

Aby na stronie internetowej umieścić logo z przezroczystym tłem, jaki format powinien być zastosowany?

A. PNG
B. JPG
C. CDR
D. BMP
Format PNG (Portable Network Graphics) jest preferowany do przechowywania obrazów z przezroczystym tłem, co czyni go idealnym wyborem dla logo. Główne zalety PNG to obsługa przezroczystości oraz wysoka jakość grafiki bez utraty danych, dzięki kompresji bezstratnej. W praktyce, kiedy logo jest umieszczane na różnych tłach, przezroczystość pozwala na harmonijne wpasowanie się w otoczenie, co zwiększa estetykę strony. Ponadto, PNG obsługuje różne poziomy przezroczystości (alfa), co daje projektantom więcej możliwości w zakresie efektów wizualnych. Użycie PNG w projektach internetowych jest zgodne z dobrymi praktykami w zakresie tworzenia responsywnych i estetycznych interfejsów, a także zapewnia kompatybilność z większością przeglądarek internetowych. Warto zauważyć, że PNG jest również często stosowany w grafikach wektorowych i ikonach, które wymagają przejrzystości. Korzystając z PNG, projektanci mogą być pewni, że ich grafiki będą wyglądać profesjonalnie na każdej platformie.

Pytanie 13

Jaką właściwość CSS należy zastosować, aby uzyskać linie przerywaną w obramowaniu?

Ilustracja do pytania
A. dotted
B. double
C. dashed
D. solid
Odpowiedź dashed jest poprawna ponieważ w CSS właściwość ta służy do definiowania stylu obramowania w postaci linii kreskowanej Jest to często używane do wizualnego oddzielenia zawartości na stronie internetowej bez zbytniego skupiania uwagi Użycie dashed sprawia że linia jest bardziej subtelna w porównaniu do solid co czyni ją dobrym wyborem w przypadku chęci zachowania minimalistycznego wyglądu Zgodnie ze standardami CSS właściwość border-style może przyjmować kilka wartości w tym solid dotted double i dashed Każda z tych wartości ma swoje unikalne zastosowania na przykład solid tworzy ciągłą linię natomiast dotted tworzy linię z kropkami Linia dashed składa się z krótkich kresek co różni ją od linii double która jest podwójną linią W praktyce dashed jest często stosowane w projektach gdzie ważne jest wskazanie na określone sekcje lub elementy bez przytłaczania użytkownika Zgodnie z dobrymi praktykami można dostosować szerokość i kolor obramowania co pozwala na lepszą integrację z ogólnym stylem strony CSS daje dużą elastyczność w projektowaniu co pozwala na tworzenie różnorodnych i responsywnych interfejsów użytkownika

Pytanie 14

Jaką postać ma kolor zdefiniowany w formacie szesnastkowym jako #11FE07 w modelu RGB?

A. rgb(17, 255, 7)
B. rgb(ll, 127, 7)
C. rgb(17, 254, 7)
D. rgb(17, FE, 7)
Odpowiedzi rgb(ll, 127, 7), rgb(17, 255, 7) i rgb(17, FE, 7) mają błędy, które wynikają z niewłaściwego zrozumienia konwersji szesnastkowych na dziesiętne. W pierwszej odpowiedzi 'll' to w ogóle nie jest poprawna wartość w kontekście kolorów RGB. W systemie RGB musimy używać całkowitych liczb od 0 do 255, a 'll' to żaden numer. W drugiej odpowiedzi, zmiana 'FE' na '255' to błąd, bo 'FE' w szesnastkowym to 254 w dziesiętnym, więc tu jest niezgodność. A w odpowiedzi 'rgb(17, FE, 7)' znowu nie przeliczono 'FE', przez co staje się to nieczytelne i niezgodne ze standardami RGB. Często ludzie mylą różne systemy liczbowe przy konwertowaniu kolorów i to jest zwyczajny błąd. Fajnym pomysłem na naukę jest zabawa z narzędziami do kolorów w programach graficznych, bo to pomaga lepiej zrozumieć te przeliczenia i ogarnąć różnice między systemami liczbowymi.

Pytanie 15

Na przedstawionym obrazie widać wynik formatowania przy użyciu styli CSS oraz kod HTML, który go generuje. Przy założeniu, że marginesy wewnętrzne wynoszą 50 px, a zewnętrzne 20 px, jak wygląda styl CSS dla tego obrazu?

Ilustracja do pytania
A. Rys. A
B. Rys. C
C. Rys. D
D. Rys. B
Błędne odpowiedzi wynikają głównie z nieprawidłowego przypisania wartości marginesów i marginesów wewnętrznych w stylach CSS. W przypadku niepoprawnych stylów, takich jak w Rys. A i D, zastosowano linię przerywaną, co nie spełnia warunków pytania, które wymaga zastosowania linii ciągłej. Solidna linia graniczna jest bardziej preferowana w projektach profesjonalnych, ponieważ dodaje wyrazistości i estetyki. Warianty, gdzie nie zachowano odpowiednich wartości marginesów i marginesów wewnętrznych, mogą prowadzić do niezamierzonego zachowania w układzie strony, takich jak zły odstęp między elementami, co negatywnie wpływa na użyteczność i estetykę interfejsu użytkownika. Niewłaściwe ustawienie tych wartości często wynika z niedostatecznego zrozumienia modelu pudełkowego w CSS, który jest fundamentem w projektowaniu rozmieszczenia elementów na stronie. Model pudełkowy umożliwia dokładne określenie, jak elementy są wyświetlane, co jest niezbędne do tworzenia responsywnych i estetycznie przyjemnych stron internetowych. Zrozumienie i prawidłowe zastosowanie marginesów i marginesów wewnętrznych jest kluczowe dla osiągnięcia profesjonalnych wyników w projekcie.

Pytanie 16

Aby włączyć kaskadowy arkusz stylów zapisany w pliku zewnętrznym, należy zastosować poniższy fragment kodu HTML

A. &lt;div id=&quot;styl.css&quot; relation=&quot;css&quot; /&gt;
B. &lt;meta charset=&quot;styl.css&quot; /&gt;
C. &lt;optionvalue=&quot;styl.css&quot; type=&quot;text/css&quot; /&gt;
D. &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;styl.css&quot; /&gt;
Poprawna odpowiedź to <link rel="stylesheet" type="text/css" href="styl.css" />. Ten fragment kodu HTML jest standardowym sposobem dołączania zewnętrznych arkuszy stylów do dokumentu HTML. Atrybut 'rel' określa relację pomiędzy dokumentem a zewnętrznym plikiem, w tym przypadku jest to 'stylesheet', co informuje przeglądarkę, że plik ma zawierać style CSS. Atrybut 'type' wskazuje typ zawartości, a 'href' zawiera ścieżkę do pliku CSS, w tym przypadku 'styl.css'. Zewnętrzne arkusze stylów są zalecane, ponieważ umożliwiają oddzielenie treści od stylizacji, co jest zgodne z zasadą separacji obowiązków w inżynierii oprogramowania. Umożliwia to łatwe zarządzanie i aktualizowanie stylów bez konieczności modyfikowania samego HTML-a. Przykładem zastosowania może być stworzenie pliku styl.css, który zawiera wszystkie style dla danej strony, co pozwala na ponowne wykorzystanie tych samych stylów w różnych częściach serwisu, co zwiększa spójność i ułatwia utrzymanie kodu.

Pytanie 17

Standard kodowania ISO-8859-2 jest używany do poprawnego wyświetlania

A. znaków zarezerwowanych dla języka opisu strony
B. polskich liter, takich jak: ś, ć, ń, ó, ą
C. symboli matematycznych
D. znaków specjalnych dla języka kodu strony
Kodowanie w standardzie ISO-8859-2, znane również jako Latin-2, jest szczególnie istotne dla poprawnego wyświetlania znaków diakrytycznych, które są charakterystyczne dla języków słowiańskich, w tym polskiego. W standardzie tym zdefiniowane są znaki reprezentujące polskie litery takie jak: ś, ć, ń, ó, ą oraz inne znaki diakrytyczne. Przykładem zastosowania tego kodowania może być strona internetowa zawierająca treści w języku polskim, która wymaga użycia odpowiednich znaków w swoich nagłówkach, akapitach czy formularzach. Stosowanie ISO-8859-2 w HTML-u, np. poprzez deklarację w metatagach, zapewnia, że przeglądarki internetowe będą w stanie prawidłowo interpretować i wyświetlać te znaki, co zwiększa czytelność i dostępność treści dla użytkowników. W kontekście dobrych praktyk, warto zauważyć, że dla nowych projektów często zaleca się korzystanie z kodowania UTF-8, które obejmuje znaki ze wszystkich języków, jednak ISO-8859-2 nadal znajduje zastosowanie w wielu starszych systemach i aplikacjach, gdzie zachowanie zgodności z istniejącymi danymi jest kluczowe.

Pytanie 18

W CSS, stosowanie poniższego kodu na stronie z kilkoma akapitami, gdzie każdy składa się z kilku linijek, spowoduje, że

p::first-line
{
    font-size: 150%;
}
A. pierwszy paragraf na stronie będzie miał powiększoną czcionkę w całości
B. cały tekst w paragrafie zostanie powiększony o 150%
C. pierwsza linia każdego paragrafu będzie miała większą czcionkę niż pozostałe linie
D. pierwsza linia każdego z paragrafów będzie miała mniejszą wielkość czcionki od pozostałych linii
Zapis CSS p::first-line { font-size: 150%; } używa selektora pseudo-elementu ::first-line który stosuje stylizację do pierwszej linii każdego paragrafu. W tym przypadku zmieniamy rozmiar czcionki pierwszej linii na 150% jej domyślnej wartości co oznacza że będzie ona o 50% większa niż reszta tekstu. Pseudo-element ::first-line jest często stosowany w projektowaniu stron internetowych aby wyróżnić pierwsze zdanie lub akapit co może pomóc w lepszej organizacji treści i zwiększeniu czytelności. Ten sposób formatowania jest zgodny ze standardami CSS i jest wspierany przez większość nowoczesnych przeglądarek internetowych. Takie podejście może być użyteczne w projektach gdzie istotne jest nadanie unikalnego wyglądu nagłówkom sekcji lub wprowadzeniom bez zmieniania struktury HTML. Ważne jest aby pamiętać że ::first-line stosuje się tylko do elementów blokowych takich jak paragrafy co ogranicza jego użycie do tych specyficznych scenariuszy ale jednocześnie pozwala na precyzyjne dostosowanie stylu tekstu w dokumencie.

Pytanie 19

Aby wykorzystać skrypt zapisany w pliku przyklad.js, trzeba połączyć go ze stroną używając kodu

A. <script link="przyklad.js"></script>
B. <script src="/przyklad.js"></script>
C. <script>przyklad.js</script>
D. <link rel="script" href="/przyklad.js">
Poprawna odpowiedź to <script src="/przyklad.js"></script>, ponieważ jest to zgodne z obowiązującymi standardami HTML dotyczącymi ładowania skryptów. Atrybut 'src' jest kluczowy, ponieważ wskazuje przeglądarce lokalizację pliku JavaScript, który ma zostać załadowany. Umieszczając skrypt w tagu <script> w ten sposób, zapewniamy, że plik zostanie poprawnie wczytany i wykonany w kontekście dokumentu HTML. Jest to praktyka zgodna z dobrymi zasadami programowania webowego, umożliwiająca organizację kodu oraz minimalizację problemów z wydajnością. Na przykład, umieszczając ten tag w sekcji <head> lub tuż przed końcem tagu </body>, możemy zwiększyć wydajność ładowania strony, zapewniając jednocześnie, że wszystkie skrypty są załadowane przed ich wykonaniem. To podejście jest powszechnie stosowane w branży, aby poprawić czytelność kodu i umożliwić łatwiejsze zarządzanie zasobami.

Pytanie 20

W języku HTML, atrybut shape w znaczniku area, który definiuje typ obszaru, może mieć wartość

A. style="margin-bottom: 0cm;">poły, square, circle
B. rect, sąuare, circle
C. style="margin-bottom: 0cm;">rect, triangle, circle
D. rect, poły, circle
Atrybut shape znacznika area w języku HTML jest kluczowy dla określenia kształtu interaktywnego obszaru na mapie obrazów. Przyjmuje on wartości, które definiują geometrię obszaru w kontekście mapy, a do najpopularniejszych z nich należą 'rect', 'circle' oraz 'poly'. Wartość 'rect' definiuje prostokątny obszar, gdzie użytkownik może kliknąć w dowolnym miejscu w obrębie prostokąta. 'Circle' z kolei pozwala na stworzenie okrągłego obszaru kliknięcia, definiując jego środek oraz promień. Z kolei 'poly' umożliwia zdefiniowanie wielokątnego obszaru poprzez podanie współrzędnych wierzchołków. Te wartości są zgodne z definicjami przedstawionymi w standardach W3C, które określają sposób, w jaki przeglądarki interpretują te atrybuty. Przykładowo, dla atrybutu shape='rect' można podać współrzędne lewego górnego i prawego dolnego narożnika prostokąta, co sprawia, że jest to użyteczne w implementacji interaktywnych map. Zrozumienie tych wartości jest istotne dla programistów webowych, którzy chcą tworzyć dostępne i interaktywne treści.

Pytanie 21

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

Początki HTML

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


A.
<b>Początki HTML</b>
<p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył
<b>prototyp hipertekstowego systemu informacyjnego – <i>ENQUIRE</i></b></p>
B.
<h1>Początki HTML</h1>
<p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył
<b>prototyp hipertekstowego systemu informacyjnego – <i>ENQUIRE</i></b></p>
C.
<b>Początki HTML</b>
<p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<hr /> stworzył
<b>prototyp hipertekstowego systemu informacyjnego – <i>ENQUIRE</i></b></p>
D.
<h1>Początki HTML</h1>
<p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył
<i>prototyp hipertekstowego systemu informacyjnego – <b>ENQUIRE</b></i></p>
A. C.
B. B.
C. A.
D. D.
Niestety, twoja odpowiedź nie była poprawna. Wybrany przez ciebie fragment kodu nie odpowiadał strukturze i hierarchii tagów HTML widocznej na obrazku. HTML jest językiem znaczników, który wykorzystuje różne tagi do definiowania struktury i formatowania treści na stronie internetowej. Możliwe, że niepoprawne rozumienie tagów HTML mogło skłonić cię do wybrania nieprawidłowej odpowiedzi. Na przykład, jeśli wybrałeś opcję zawierającą tagi <h2> zamiast <h1> dla nagłówka, to mogło to wynikać z niewłaściwego zrozumienia hierarchii nagłówków w HTML. Podobnie, jeśli wybrałeś opcję, która nie zawierała tagu <br />, mogło to wynikać z niewłaściwego zrozumienia funkcji tego tagu w tworzeniu przerw wiersza. Ważne jest zrozumienie, jak różne tagi HTML wpływają na prezentację i strukturę strony internetowej, aby uniknąć błędów podczas tworzenia stron.

Pytanie 22

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

Ilustracja do pytania
A. A
B. D
C. B
D. C
Odpowiedzi nieprawidłowe nie spełniają wymogów semantycznych oraz składniowych XHTML. XHTML wymaga, aby dokumenty były poprawne pod względem składniowym, co oznacza między innymi zamykanie wszystkich znaczników oraz stosowanie poprawnej struktury dokumentu. Warianty odpowiedzi, które używają znacznika <b> zamiast semantycznych nagłówków jak <h1>, nie są zgodne z dobrymi praktykami, ponieważ <h1> nadaje kontekst semantyczny, informując o hierarchii treści. W przypadku XHTML, znaczniki powinny być zamykane, a ich nazwy pisane małymi literami, co jest kluczowe dla zgodności z XML. Brak odpowiedniej struktury, jak w przypadku użycia <b> do nagłówków, może prowadzić do niepoprawnej interpretacji przez przeglądarki oraz problemy z dostępnością dla technologii wspomagających. Ponadto, używanie znaczników inline jak <br> do wizualnego formatowania tekstu nie jest zalecane, gdyż nie oddziela treści od prezentacji, co jest jednym z fundamentalnych założeń nowoczesnego tworzenia stron internetowych. To może prowadzić do problemów z dostępnością oraz negatywnie wpływać na SEO, jako że wyszukiwarki lepiej interpretują treści poprawnie zorganizowane i semantycznie poprawne.

Pytanie 23

Wskaż, który paragraf jest sformatowany przy użyciu podanego stylu CSS:

p {
    font-family: serif;
    background-color: Teal;
    color: white;
    font-style: italic;
}
A. Paragraf 1
B. Paragraf 3
C. Paragraf 4
D. Paragraf 2
Paragraf 4 jest prawidłowo sformatowany zgodnie z przedstawionym stylem CSS. W stylu tym zastosowano cztery właściwości: font-family o wartości serif co sugeruje użycie czcionki o kroju szeryfowym background-color ustawiony na Teal co ustawia tło na ciemnozielony kolor color ustawiony na White co oznacza że tekst powinien być biały oraz font-style ustawiony na italic co powoduje że tekst jest pochylony. Paragraf 4 spełnia te kryteria jest napisany czcionką szeryfową ma ciemnozielone tło biały tekst i jest kursywą. Zastosowanie takich stylów jest częste w projektowaniu stron internetowych gdzie ważne jest czytelne i estetyczne przedstawienie informacji. Używanie odpowiednich stylów CSS pozwala na lepszą organizację wizualną treści co jest kluczowe w tworzeniu interfejsów przyjaznych dla użytkownika. Stylowanie w CSS wspiera standardy takie jak CSS3 które wprowadzają nowe właściwości i ulepszenia umożliwiające bardziej zaawansowane i wydajne metody formatowania.

Pytanie 24

Parametr face elementu <font> jest używany do wskazania

A. nazwa czcionki
B. rozmiaru czcionki
C. koloru czcionki
D. efektów czcionki
Parametr face znacznika <font> w HTML definiuje konkretną nazwę czcionki, która ma być używana do wyświetlania tekstu. Umożliwia to projektantom stron internetowych precyzyjne określenie, jak tekst będzie wyglądał, co jest istotne dla estetyki oraz czytelności strony. W praktyce, zamiast stosować ogólne czcionki systemowe, projektanci mogą wskazać konkretne nazwy czcionek, jak 'Arial', 'Verdana' czy 'Times New Roman', aby osiągnąć zamierzony efekt wizualny. Warto jednak pamiętać, że stosowanie znacznika <font> oraz jego atrybutu face jest już przestarzałe, a w nowoczesnym kodowaniu lepiej jest korzystać z CSS, gdzie właściwość 'font-family' pełni tę samą funkcję, ale z większą elastycznością i lepszym wsparciem dla różnych urządzeń. Przykładowo, zamiast <font face='Arial'>Tekst</font>, w CSS można użyć: <style> p { font-family: Arial; } </style>. Z perspektywy dobrych praktyk, zaleca się używanie CSS do stylizacji tekstu, co pozwala na lepszą separację treści od prezentacji oraz łatwiejsze zarządzanie stylami w całym dokumencie.

Pytanie 25

Który z poniższych formatów NIE umożliwia zapis plików animowanych?

A. SVG
B. GIF
C. ACE
D. SWF
Format ACE (Archive Compressed Enhanced) jest formatem archiwum, który służy do kompresji danych, a nie do przechowywania animacji. W przeciwieństwie do formatów takich jak SWF, SVG czy GIF, ACE nie jest projektowany do obsługi grafiki ruchomej. SWF to format opracowany przez Adobe, który jest używany do tworzenia i wyświetlania animacji we Flashu. SVG to wektorowy format grafiki, który również wspiera animacje za pomocą CSS i JavaScript. GIF, z kolei, jest jednym z najpopularniejszych formatów do zapisu prostych animacji, dzięki możliwości przechowywania wielu klatek w jednym pliku. Zrozumienie różnic między tymi formatami jest istotne w kontekście tworzenia treści multimedialnych, a także w kontekście ich zastosowań w sieci. Wybór odpowiedniego formatu do animacji może mieć wpływ na wydajność ładowania strony, jakość wizualną oraz możliwości interakcji z użytkownikami.

Pytanie 26

Zdefiniowany styl CSS spowoduje, że nagłówki pierwszego poziomu będą

Ilustracja do pytania
A. wyjustowane, pisane małymi literami, a odstępy między literami ustalone na 10 px
B. wyśrodkowane, pisane małymi literami, a odstępy między liniami ustalone na 10 px
C. wyśrodkowane, pisane wielkimi literami, a odstępy między literami ustalone na 10 px
D. wyjustowane, pisane wielkimi literami, a odstępy między liniami ustalone na 10 px
Odpowiedź jest prawidłowa, ponieważ reguły CSS wyrażone w stylu są poprawnie zinterpretowane w kontekście podanej definicji. Wartość text-align: center oznacza, że tekst wewnątrz elementu h1 będzie wyśrodkowany. Centrum tekstu jest powszechnie stosowane w projektowaniu stron internetowych w celu zwiększenia czytelności i estetyki nagłówków co jest korzystne w wizualnym uporządkowaniu treści. Wartość text-transform: uppercase przekształca wszystkie litery w sekcji na wielkie litery co jest pomocne w przypadku nagłówków gdzie wyróżnienie jest kluczowe i potęguje efekt wizualny. Stosowanie wielkich liter w nagłówkach jest klasycznym podejściem w projektowaniu ponieważ przyciąga uwagę użytkownika. Dodatkowo letter-spacing: 10px zwiększa odstępy między literami co poprawia ich czytelność zwłaszcza w dużych formatach tekstu. Zastosowanie takich właściwości jest zgodne z dobrymi praktykami projektowymi które dążą do optymalizacji wizualnej i funkcjonalnej stron internetowych co jest kluczowe dla pozytywnego doświadczenia użytkownika

Pytanie 27

Wykres słupkowy powinien być zapisany w formacie rastrowym, aby jakość krawędzi była na jak najwyższym poziomie, nawet przy dużych powiększeniach, unikając zjawiska aliasingu. Jaki format najlepiej do tego wykorzystać?

A. PNG
B. CDR
C. JPEG
D. SVG
Odpowiedź 'SVG' jest prawidłowa, ponieważ format SVG (Scalable Vector Graphics) jest formatem wektorowym, co oznacza, że obrazy są tworzone za pomocą linii i kształtów matematycznych, a nie pikseli. Dzięki temu, niezależnie od rozmiaru powiększenia, jakość krawędzi pozostaje ostro zdefiniowana i nie występuje efekt aliasingu, czyli zniekształcenie krawędzi, które jest często widoczne w formatach rastrowych, takich jak JPEG czy PNG. Wykresy słupkowe zapisane w formacie SVG mogą być z łatwością skalowane do różnych rozmiarów, co jest szczególnie ważne w kontekście prezentacji multimedialnych lub druku, gdzie zachowanie wysokiej jakości jest kluczowe. Przykładami zastosowania formatu SVG są infografiki, które wymagają elastyczności w prezentacji danych oraz ich łatwej edycji. Ponadto, SVG obsługuje animacje i interaktywność, co stanowi dodatkową zaletę w kontekście nowoczesnych aplikacji webowych. W praktyce, korzystanie z formatu SVG w projektach graficznych i prezentacjach jest zgodne z najlepszymi praktykami branżowymi, które promują wydajność i jakość wizualną.

Pytanie 28

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>


Kraków
Poznań
Szczecin
Efekt 1

Efekt 2

Efekt 3
Kraków
Poznań
Szczecin
Efekt 4
A. Efekt 4.
B. Efekt 3.
C. Efekt 2.
D. Efekt 1.
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 29

W CSS zapis w formie: p{background-image: url"rysunek.jpg")} spowoduje, że rysunek.png stanie się

A. tłem całej witryny
B. tłem każdego bloku tekstowego
C. wyświetlany obok każdego bloku tekstowego
D. pokazany, jeśli w kodzie użyty będzie znacznik img
Zapis p{background-image: url('rysunek.jpg')} oznacza, że każdy <p>, czyli paragraf, dostanie jako tło obrazek o nazwie rysunek.jpg. To jest po prostu sposób, żeby nadać każdyemu paragrafowi ten sam wygląd. Działa to świetnie, gdy chcesz, żeby cały tekst miał spójny styl czy dodać coś wizualnego do treści. Ważne, żeby ten plik rysunek.jpg był w dobrym miejscu, bo jak go nie znajdziesz, to przeglądarka go nie wczyta. Można to wykorzystać, żeby strona wyglądała bardziej estetycznie i przyciągała wzrok – każdy paragraf z własnym tłem na pewno sprawi, że będzie się lepiej czytało. Możesz też bawić się dodatkowymi właściwościami w CSS, jak background-repeat czy background-size, bo to otwiera drzwi do jeszcze ciekawszych efektów wizualnych.

Pytanie 30

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

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

Pytanie 31

Jakiego elementu musisz użyć, aby rozpocząć nową linię tekstu bez tworzenia akapitu na stronie internetowej?

A. </br>
B. <p>
C. <br>
D. </b>
Znak <br> jest standardowym elementem HTML używanym do wprowadzenia przerwy w tekście, która nie tworzy nowego akapitu. W przeciwieństwie do znacznika <p>, który definiuje akapit i dodaje dodatkową przestrzeń przed i po nim, <br> po prostu przenosi tekst do nowej linii, co jest szczególnie przydatne w takich sytuacjach jak adresy, wiersze piosenek czy fragmenty tekstu, gdzie formatowanie linii jest kluczowe. Przykład użycia: <p>Adam Mickiewicz,<br>Pan Tadeusz.</p> W powyższym przykładzie tekst "Pan Tadeusz" zostanie wyświetlony w nowej linii, ale nie jako nowy akapit. Warto pamiętać, że stosowanie zbyt wielu <br> w kodzie HTML może prowadzić do chaotycznego formatowania, dlatego zaleca się ich użycie z umiarem, zgodnie z zasadami dobrego projektowania stron i przystosowywania ich do różnych urządzeń, co jest zgodne z zasadami responsywnego designu. Zastosowanie <br> jest zgodne z HTML5 i uznawane za najlepszą praktykę przy tworzeniu prostych układów tekstowych.

Pytanie 32

W formularzu zdefiniowano kontrolki do wpisania imienia i nazwiska. Który atrybut reprezentuje podpowiedź umiejscowioną w polu kontrolki, znikającą w momencie, gdy użytkownik rozpocznie 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. for
B. title
C. placeholder
D. value
Dobrze! Poprawna odpowiedź to 'placeholder'. Atrybut 'placeholder' w elemencie input HTML jest używany do wyświetlania podpowiedzi wewnątrz pola formularza, która znika, gdy użytkownik zaczyna wpisywanie danych. Jest to zgodne z pytaniem, w którym poproszono o atrybut reprezentujący podpowiedź w polu formularza, która znika, gdy użytkownik rozpoczyna wpisywanie. Przykładem może być formularz logowania, gdzie w polach 'Użytkownik' i 'Hasło' można umieścić podpowiedzi 'Wpisz nazwę użytkownika' i 'Wpisz hasło' odpowiednio. Atrybut 'placeholder' jest bardzo przydatny w interaktywnym designie, pomagając użytkownikom zrozumieć, jakie informacje są od nich oczekiwane w danym polu formularza.

Pytanie 33

Aby ustawić tło na stronie www należy użyć polecenia

A. <bgcolor=""></bgcolor>
B. <body bgcolor=""></body>
C. <background=""></background>
D. <body background=""></body>
Aby ustawić tło na stronie internetowej, należy użyć atrybutu bgcolor w znaczniku <body>. Jest to starożytna metoda definiowania koloru tła, która jest zgodna z wcześniejszymi standardami HTML. Atrybut bgcolor przyjmuje wartość w postaci koloru w formie nazwy, hexadecymalnej lub RGB. Na przykład, <body bgcolor='#FF5733'></body> ustawi pomarańczowe tło. Pomimo że ta metoda działa, w dzisiejszych czasach zaleca się korzystanie z CSS, co umożliwia bardziej zaawansowane i elastyczne style. Zamiast polegać na atrybucie HTML, można zastosować regułę CSS: body { background-color: #FF5733; }. Użycie CSS nie tylko poprawia organizację kodu, ale także zwiększa dostępność i responsywność strony. Dlatego, chociaż atrybut bgcolor jest poprawny, warto skupić się na nowoczesnych metodach stylizacji, które są zgodne z aktualnymi standardami W3C i są bardziej przyszłościowe.

Pytanie 34

Jak zdefiniować formatowanie tabeli w języku CSS, aby wyróżnić wiersz, na który aktualnie najeżdża kursor myszy, korzystając z innego koloru?

A. pseudoelement ::marker
B. pseudoelement ::first-line
C. pseudoklasę :visited
D. pseudoklasę :hover
Prawidłową odpowiedzią jest użycie pseudoklasy :hover, która jest standardowym rozwiązaniem w CSS do stylizacji elementów, gdy użytkownik na nie najedzie kursorem myszy. Pseudoklasa :hover pozwala na dynamiczną modyfikację wyglądu elementów, co jest szczególnie użyteczne w kontekście interaktywności stron internetowych. Na przykład, można zastosować tę pseudoklasę do wierszy tabeli, aby zmienić ich kolor tła na inny, co podnosi czytelność i estetykę interfejsu użytkownika. Implementacja może wyglądać następująco: table tr:hover { background-color: #f2f2f2; } - dzięki temu, gdy użytkownik najedzie myszką na wiersz tabeli, jego tło zmieni się na jasno szare, co zwraca uwagę na ten wiersz. Użycie :hover jest zgodne z dobrymi praktykami w projektowaniu UI, gdyż poprawia doświadczenia użytkownika oraz umożliwia intuicyjne korzystanie z interakcji na stronie. Pseudoklasa :hover wspiera również responsywność, ponieważ wpływa na sposób, w jaki użytkownicy wchodzą w interakcje z elementami, co jest kluczowe w nowoczesnym projektowaniu stron.

Pytanie 35

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

Pytanie 36

Który z poniższych języków jest używany do stylizacji stron WWW?

A. Python
B. SQL
C. HTML
D. CSS
CSS, czyli Cascading Style Sheets, to język używany do opisywania wyglądu dokumentu HTML. Dzięki niemu możemy określić, jak mają wyglądać elementy na stronie, takie jak kolory, czcionki, odstępy między elementami, a także układ całej strony. CSS jest nieodłącznym elementem nowoczesnego tworzenia stron internetowych, ponieważ pozwala na oddzielenie treści od formy, co jest jedną z zasad dobrych praktyk w web development. Umożliwia tworzenie responsywnych projektów, które dobrze wyglądają na różnych urządzeniach, od komputerów po smartfony. Stylowanie za pomocą CSS pozwala na zdefiniowanie stylów globalnych, które mogą być zastosowane do wielu elementów na stronie, co znacznie ułatwia zarządzanie wyglądem witryny. Praktycznym zastosowaniem CSS jest na przykład zmiana koloru tekstu na stronie za pomocą prostej reguły, czy też tworzenie zaawansowanych animacji, które zwiększają interaktywność stron. CSS jest kluczowy w procesie tworzenia estetycznych i funkcjonalnych stron internetowych, co czyni go niezbędnym narzędziem dla każdego web developera.

Pytanie 37

W języku CSS określono styl dla pola edycyjnego. Pole to będzie miało jasnozielony kolor tła, gdy będzie w trybie edycji.

A. po naciśnięciu na nie myszką w celu wpisania tekstu.
B. gdy będzie na nie najechane kursorem bez kliknięcia.
C. jeśli jest to pierwsze wystąpienie tego elementu w dokumencie.
D. w każdej sytuacji.
Inne odpowiedzi mogą wydawać się logiczne na pierwszy rzut oka, jednak każda z nich ma swoje wady. Stwierdzenie, że tło zmienia się "gdy zostanie wskazane kursorem myszy bez kliknięcia" jest nieprawidłowe, ponieważ stan "focus" wymaga interakcji użytkownika poprzez kliknięcie. W przeciwnym razie, pole nie będzie miało przypisanego stylu. Możliwość ustawienia tła przy najechaniu kursorem myszy można osiągnąć za pomocą pseudo-klasy :hover, ale to zupełnie inny kontekst. Twierdzenie, że tło zmienia się "w każdym przypadku" jest również mylące, ponieważ reguła CSS dotyczy tylko specyficznego stanu, a nie wszystkich stanów. Ostatecznie, stwierdzenie, że zmiana tła zachodzi "jeśli jest to pierwsze wystąpienie tego znacznika w dokumencie" jest nieprawdziwe, ponieważ reguła CSS odnosi się do każdego elementu <input>, który znajdzie się w stanie "focus", niezależnie od jego miejsca w dokumencie. Tego rodzaju myślenie prowadzi do nieporozumień dotyczących zastosowania selektorów CSS oraz ich właściwości. Dlatego ważne jest, aby mieć jasność co do mechanizmów działania CSS i zrozumieć, że odpowiednie style są stosowane w oparciu o interakcje użytkownika, a nie tylko na podstawie struktury dokumentu.

Pytanie 38

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

A. sprawdzania poprawności strony internetowej
B. analizowania skryptu na stronie
C. publikacji strony internetowej
D. kompilowania skryptu na stronie
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 39

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

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

Pytanie 40

Aby włączyć kaskadowy arkusz stylów zapisany w oddzielnym pliku, należy zastosować poniższy fragment kodu HTML

A. <div id="styl.css" relation="css" />
B. <meta charset="styl.css" />
C. <link rel="stylesheet" type="text/css" href= "styl.css" />
D. <option value="styl.css" type="text/css" />
W kontekście dołączania zewnętrznych arkuszy stylów, pozostałe odpowiedzi nie spełniają wymogów technicznych. Użycie tagu <meta> z atrybutem 'charset' jest niepoprawne, ponieważ tag ten służy do określenia kodowania znaków dokumentu, a nie do ładowania arkuszy stylów. Nie ma możliwości wskazania pliku CSS za pomocą tej konstrukcji, co czyni ją całkowicie nieodpowiednią. Inny przykład to użycie tagu <div> z atrybutem 'relation', który jest niepoprawny zarówno pod względem składni, jak i znaczenia. Atrybut 'relation' nie istnieje w standardzie HTML i nie ma odniesienia do ładowania stylów. <div> jest elementem blokowym, a nie tagiem odpowiedzialnym za ładowanie zewnętrznych plików, co sprawia, że ta odpowiedź również jest błędna. Ostatnia z niepoprawnych odpowiedzi, <option value>, odnosi się do elementu formularza i nie ma zastosowania w kontekście stylów CSS. Atrybut 'value' jest używany do określenia wartości opcji w rozwijanym menu, a nie do wskazywania pliku CSS. W rezultacie, wszystkie te odpowiedzi są niepoprawne, ponieważ nie dotyczą w sposób właściwy procesu dołączania kaskadowych arkuszy stylów do dokumentu HTML.