Wyniki egzaminu

Informacje o egzaminie:
  • Zawód: Technik programista
  • Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
  • Data rozpoczęcia: 17 lipca 2026 00:56
  • Data zakończenia: 17 lipca 2026 01:24

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Nowe
Analiza przebiegu egzaminu- sprawdź jak rozwiązywałeś pytania
Udostępnij swój wynik
Szczegółowe wyniki:
Pytanie 1

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

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

Pytanie 2

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

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

Pytanie 3

Która operacja NIE zmieni rozmiaru (wagi) pliku graficznego?

A. interpolacja
B. kompresja
C. zmiana rozmiaru WYŚWIETLANIA obrazu atrybutami HTML
D. zmiana rozdzielczości obrazu
Atrybuty HTML (np. width, height) zmieniają tylko ROZMIAR WYŚWIETLANIA obrazu w przeglądarce - plik na serwerze pozostaje ten sam, więc jego waga się nie zmienia. To dlatego „zmniejszenie” obrazka atrybutem nie przyspiesza ładowania. Dlatego wagi pliku nie zmieni skalowanie atrybutami HTML.

Pytanie 4

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. tr:active { background-color: Pink; }
B. td, th { background-color: Pink; }
C. tr { background-color: Pink; }
D. tr:hover { background-color: Pink; }
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 5

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

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

Pytanie 6

Na ilustracji pokazano tabelę z połączonymi komórkami. Jakie atrybuty scalania zastosowano, aby uzyskać ten efekt?

Ilustracja do pytania
A. rowspan w drugim wierszu i pierwszej komórce oraz colspan w trzecim wierszu, trzeciej komórce
B. colspan w drugim wierszu i pierwszej komórce oraz rowspan w trzecim wierszu i czwartym wierszu
C. colspan w drugim wierszu i pierwszej komórce oraz rowspan w trzecim wierszu, trzeciej komórce
D. colspan w drugim wierszu we wszystkich trzech komórkach oraz rowspan w trzecim wierszu ostatniej komórce
Niepoprawne odpowiedzi wynikają z błędnego przypisania atrybutów colspan i rowspan w tabeli HTML. Rozważając zastosowanie rowspan w drugim wierszu i pierwszej komórce, błędnie zakłada się, że komórka ta miałaby rozciągać się na kilka wierszy, co nie jest prawdą dla przedstawionego układu. Zastosowanie colspan w trzecim wierszu i trzeciej komórce również jest nieprawidłowe, gdyż komórki te nie są rozciągane poziomo na kilka kolumn. Kolejne błędne przypisanie to colspan we wszystkich trzech komórkach drugiego wiersza - w rzeczywistości tylko jedna z komórek wymaga takiego scalania, aby uzyskać pokazany efekt. Podobnie, użycie rowspan w czwartym wierszu nie znajduje zastosowania w załączonym obrazie, gdzie komórki są jednolicie rozmieszczone. Takie błędy w zrozumieniu mechaniki tabel HTML mogą wynikać z braku doświadczenia z praktycznym zastosowaniem tych atrybutów. Ważne jest, aby dokładnie analizować strukturę tabel i zrozumieć specyfikę ich projektowania, co pozwala na poprawne i efektywne wykorzystanie dostępnych narzędzi. Edukacja w zakresie semantyki HTML i praktyczne ćwiczenia mogą znacznie poprawić umiejętność tworzenia i zarządzania złożonymi układami tabelarycznymi na stronach internetowych, a także przyczynić się do lepszej dostępności i responsywności stron.

Pytanie 7

Podczas weryfikacji pliku HTML5 pojawił się komunikat brzmiący: "Error: Element head is missing a required instance of child element title". Co to oznacza w kontekście dokumentu?

A. element <title> nie jest konieczny.
B. nie zdefiniowano elementu <title> w sekcji <head> dokumentu.
C. element <title> nie został prawidłowo zamknięty przez </title>.
D. nie zdefiniowano obowiązkowego atrybutu title w tagu <img>.
Twoja odpowiedź jest całkowicie trafna! Zgodnie z tym, co mówi specyfikacja HTML5, element <title> rzeczywiście jest obowiązkowy i musi znaleźć się w sekcji <head>. To bardzo ważne, bo tytuł strony to coś, co pokazuje się na karcie przeglądarki, a także w wynikach wyszukiwania. Jak go brakuje, to strona nie spełnia podstawowych wymogów i pojawia się błąd walidacji. Fajnie jest mieć unikalne i opisowe tytuły dla każdej strony, bo to korzystnie wpływa na SEO i użyteczność. Na przykład, jeśli robiłbyś stronę o kulinariach, to tytuł mógłby być "Przepisy na zdrowe obiady", co od razu informuje użytkowników i wyszukiwarki, o co chodzi. Dobrze dobrany tytuł to naprawdę kluczowa sprawa, bo ma duży wpływ na to, jak użytkownicy postrzegają Twoją stronę i czy klikną w link. Pamiętaj też, że element <title> powinien być krótki, ale wystarczająco informacyjny, zazwyczaj nie dłuższy niż 60 znaków.

Pytanie 8

Gdzie należy umieścić znacznik metajęzyka HTML?

A. pomiędzy znacznikami paragrafu
B. pomiędzy znacznikami <body> ... </body>
C. w sekcji nagłówkowej witryny internetowej
D. w dolnej części witryny internetowej
Znacznik metajęzyka HTML, czyli tag <meta>, jest kluczowym elementem w sekcji nagłówkowej (head) dokumentu HTML. To tutaj umieszczamy informacje dotyczące dokumentu, takie jak jego tytuł, opis, słowa kluczowe oraz dane dotyczące kodowania i viewportu. Na przykład, aby ustawić kodowanie znaków na UTF-8, używamy znacznika <meta charset="UTF-8">. Jest to zgodne z wytycznymi W3C i najlepszymi praktykami SEO, ponieważ odpowiednie metadane pomagają wyszukiwarkom w zrozumieniu treści witryny. Inny przykład to <meta name="viewport" content="width=device-width, initial-scale=1.0">, który zapewnia, że strona jest responsywna na urządzeniach mobilnych. Umieszczając te znaczniki w nagłówku, można poprawić zarówno użyteczność, jak i widoczność witryny w internecie.

Pytanie 9

W regule CSS h1 { color: blue } czym jest h1?

A. wartością
B. selektorem
C. deklaracją
D. klasą
W regule h1 { color: blue } element h1 przed nawiasem klamrowym to SELEKTOR - wskazuje, których elementów dotyczy styl (tu wszystkich nagłówków <h1>). Dlatego h1 jest selektorem.

Pytanie 10

Jak ustawić tło body obrazem rys.png, powtarzanym TYLKO w poziomie?

A.
background-image: url("rys.png"); background-repeat: repeat-y;
B.
background-image: url("rys.png"); background-repeat: round;
C.
background-image: url("rys.png"); background-repeat: repeat;
D.
background-image: url("rys.png"); background-repeat: repeat-x;
Pozostałe wartości robią co innego. repeat powiela obraz w obu kierunkach (kafelki), repeat-y tylko w pionie, a round skaluje i dopasowuje liczbę powtórzeń. Powtarzanie wyłącznie w poziomie daje repeat-x.

Pytanie 11

W kodzie HTML zdefiniowano hiperłącze: <a href="http://website.com" rel="nofollow">link</a>. Użyty w nim atrybut rel="nofollow" w znaczniku <a>:

A. oznacza, że kliknięcie w link otworzy go w osobnej karcie przeglądarki
B. oznacza, że kliknięcie w link nie przeniesie użytkownika na stronę website.com
C. jest poleceniem dla przeglądarki, aby nie traktowała słowa "link" jako odnośnika
D. jest informacją dla robota wyszukiwarki, aby nie podążał za tym linkiem i nie przekazywał mu wartości rankingowej
Atrybut rel="nofollow" w znaczniku <a> to wskazówka skierowana do robotów wyszukiwarek, na przykład Googlebota. Mówi im, by nie podążały za danym odnośnikiem i nie przekazywały mu wartości rankingowej (historycznie nazywanej PageRank). Działa wyłącznie na poziomie indeksowania - nie zmienia zachowania linku dla użytkownika, który dalej może go kliknąć i przejść na stronę docelową. nofollow stosuje się często przy linkach zewnętrznych, do treści niezaufanych, w komentarzach czy linkach płatnych, aby nie firmować obcej witryny autorytetem własnej strony i ograniczać spam.

Pytanie 12

Podany fragment dokumentu HTML zawierający kod JavaScript sprawi, że po naciśnięciu przycisku

Ilustracja do pytania
A. obraz1.png zostanie zniknięty
B. obraz2.png zostanie wymieniony na obraz1.png
C. obraz2.png zostanie zniknięty
D. obraz1.png zostanie wymieniony na obraz2.png
Załączony fragment kodu HTML pokazuje dwa elementy img oraz przycisk. Obrazek obraz2.png ma przypisany atrybut id o wartości id1. W kodzie JavaScript przypisanym do zdarzenia onclick przycisku wykorzystywana jest metoda document.getElementById('id1').style.display='none'. Ta metoda odwołuje się bezpośrednio do elementu o identyfikatorze id1 czyli obrazka obraz2.png i zmienia jego styl CSS display na none. W praktyce oznacza to że element ten zostanie ukryty na stronie po naciśnięciu przycisku. Praktyczne zastosowanie tej techniki to dynamiczne zarządzanie widocznością elementów na stronie bez konieczności jej przeładowania co poprawia doświadczenie użytkownika. Tego typu manipulacje DOM (Document Object Model) są podstawą interaktywnych aplikacji webowych i są powszechnie używane w nowoczesnym programowaniu JavaScript. Dobrym standardem jest jednak unikanie bezpośredniego pisania skryptów JavaScript w HTML co poprawia czytelność kodu i jego utrzymywalność

Pytanie 13

body{
background-image: url"rysunek.gif");
background-repeat: repeat-y;
}
W przedstawionej definicji stylu CSS, powtarzanie dotyczy

A. rysunku umieszczonego w tle strony w poziomie
B. rysunku osadzonego znacznikiem img
C. rysunku znajdującego się w tle strony w pionie
D. tła każdego znacznika akapitu
W definicji stylu CSS, zastosowane tło z rysunkiem 'rysunek.gif' jest powtarzane w pionie dzięki właściwości 'background-repeat: repeat-y'. Oznacza to, że obrazek będzie powielany wzdłuż osi Y, co skutkuje tym, że obrazek jest umieszczany jeden nad drugim, tworząc wrażenie ciągłości. Aby lepiej zrozumieć działanie tej właściwości, warto przyjrzeć się innym ustawieniom tła. Na przykład, właściwość 'background-repeat: repeat' powtarza obraz zarówno w poziomie, jak i w pionie, natomiast 'background-repeat: no-repeat' zapobiega jakimkolwiek powtórzeniom. W standardach CSS, takich jak CSS3, definiowanie tła w ten sposób jest zgodne z zasadami, które pozwalają na elastyczne projektowanie stron internetowych. W praktyce, użycie powtarzającego się tła może być przydatne w przypadku prostych wzorów, które mają stworzyć efekt wizualny, nie obciążając jednocześnie zbytnio zasobów, co jest istotne dla wydajności ładowania strony.

Pytanie 14

Zapis koloru #ff00e0 odpowiada zapisowi RGB:

A.
rgb(255, 0, 224)
B.
rgb(ff, 0, e0)
C.
rgb(255, 0, 128)
D.
rgb(f, 0, e0)
W zapisie szesnastkowym #RRGGBB każda para cyfr opisuje jedną składową (0-255) w systemie szesnastkowym. Dla #ff00e0: ff = 255 (czerwona), 00 = 0 (zielona), e0 = 224 (niebieska), czyli rgb(255, 0, 224). Wartość e0 przelicza się jako 14·16 + 0 = 224. W funkcji rgb() składowe podaje się dziesiętnie. Dlatego #ff00e0 to rgb(255, 0, 224).

Pytanie 15

Podczas przygotowywania grafiki na stronę internetową konieczne jest wycięcie jedynie określonego fragmentu. Jak nazywa się ta operacja?

A. zmiana rozmiaru.
B. kadrowanie.
C. łączenie warstw.
D. lustrzane odbicie obrazu.
Kadrowanie to proces polegający na wycinaniu fragmentu obrazu w celu skupienia uwagi na określonym elemencie lub poprawienia kompozycji. W kontekście grafiki internetowej, kadrowanie jest kluczowe, aby dostosować zdjęcia do wymagań wizualnych strony, zachowując jednocześnie wysoką jakość obrazu. Przykładowo, jeśli tworzymy stronę dla restauracji, możemy wyciąć fragment zdjęcia dania, aby lepiej zaprezentować jego szczegóły. Dobre praktyki w kadrowaniu obejmują stosowanie zasady trzech, która polega na umiejscowieniu kluczowych elementów obrazu w punktach przecięcia linii podziału. Warto również pamiętać o rozdzielczości i proporcjach, aby uniknąć rozmycia lub zniekształcenia obrazu. Kadrowanie jest często używane w różnych formatach wizualnych, takich jak posty w mediach społecznościowych, banery reklamowe czy galerie zdjęć. W ten sposób, odpowiednie kadrowanie przyczynia się do lepszej prezentacji treści oraz poprawia estetykę i przejrzystość strony internetowej.

Pytanie 16

Który znacznik HTML jest elementem BLOKOWYM?

A.
<span>
B.
<p>
C.
<strong>
D.
<img>
Pozostałe znaczniki są LINIOWE (inline). <span> oznacza fragment tekstu, <strong> pogrubia, a <img> wstawia obraz w linii - nie wymuszają nowej linii. Elementem blokowym jest <p>.

Pytanie 17

Na stronie internetowej zdefiniowano styl, który ma być stosowany tylko do określonych znaczników (takich jak niektóre nagłówki i wybrane akapity). W takim kontekście, aby przypisać styl do konkretnych elementów, najlepiej jest użyć

{ text-align: right; }
A. seletora akapitu
B. pseudoklasy
C. identyfikatora
D. klasy
Klasa w CSS jest jednym z najczęściej stosowanych mechanizmów do nadawania stylów elementom HTML na stronach internetowych Kiedy chcemy przypisać styl do kilku konkretnych znaczników które niekoniecznie są tego samego typu użycie klasy jest najlepszym rozwiązaniem Klasy są definiowane w arkuszu stylów przy użyciu kropki przed nazwą klasy na przykład .myClass Następnie można je przypisać do dowolnego elementu HTML dodając atrybut class w znaczniku elementu Co ważne jeden element może mieć przypisane wiele klas co umożliwia bardzo elastyczne zarządzanie stylami Na przykład jeżeli chcemy aby określone nagłówki i akapity miały ten sam kolor tła możemy stworzyć klasę .highlight i przypisać ją zarówno do nagłówków jak i akapitów Klasy są fundamentalnym elementem wykorzystywanym w CSS i są wspierane przez wszystkie przeglądarki zgodnie ze standardami W3C Dzięki nim możemy pisać czytelny i efektywny kod który jest łatwy w utrzymaniu i skalowalny Klasy pozwalają na wielokrotne użycie tego samego zestawu stylów co znacząco ułatwia modyfikację wyglądu strony

Pytanie 18

W HTML wprowadzono tag a. Co oznacza wartość nofollow w atrybucie rel?

<a href="http://website.com" rel="nofollow">link</a>
A. jest wskazówką dla przeglądarki internetowej, aby nie interpretowała słowa 'link' jako hiperłącza
B. jest komunikatem dla robota wyszukiwarki Google, by nie śledził tego linku
C. oznacza, że naciśnięcie na link spowoduje jego otwarcie w nowej karcie przeglądarki
D. oznacza, że kliknięcie na link nie przekieruje do strony website.com
Atrybut nofollow w linkach jest bardzo ważny dla tego, jak wyszukiwarki podchodzą do linków na stronach. Wprowadzenie go miało na celu ograniczenie spamu w komentarzach i w miejscach, gdzie autorzy stron nie chcieli, żeby te linki były traktowane jako polecenia. Gdy Google napotyka link z nofollow, to nie przekaże PageRank do strony, do której prowadzi. W praktyce oznacza to, że taki link nie pomoże w pozycjonowaniu tej docelowej strony. To jest super przydatne dla adminów, szczególnie przy linkach w komentarzach czy reklamach, gdzie nie zawsze można sprawdzić jakość tych linków. Dobrze jest stosować nofollow, kiedy link pojawia się automatycznie lub gdy nie jesteśmy pewni jego wartości merytorycznej.

Pytanie 19

Jaką maksymalną ilość znaczników <td> można zastosować w tabeli składającej się z trzech kolumn i trzech wierszy, w której nie ma złączeń komórek ani wiersza nagłówkowego?

A. 12
B. 9
C. 6
D. 3
Tabela o trzech kolumnach i trzech wierszach składa się z 9 komórek, co oznacza, że maksymalna liczba znaczników <td>, które można zastosować w takiej tabeli, wynosi 9. Każda komórka tabeli jest reprezentowana przez znacznik <td>, dlatego musisz pomnożyć liczbę kolumn (3) przez liczbę wierszy (3), co daje 3 * 3 = 9. To podejście odzwierciedla najlepsze praktyki w tworzeniu tabel HTML, które zakładają, że każda komórka powinna być jednoznacznie określona. Warto pamiętać, że unikanie złączeń komórek upraszcza strukturę tabeli, co ułatwia przetwarzanie przez różne systemy oraz poprawia dostępność strony. Przykład zastosowania to np. wyświetlanie danych o produktach w sklepie internetowym, gdzie każda informacja o produkcie, taka jak nazwa, cena i opis, znajduje się w osobnej komórce. Zgodnie z wytycznymi W3C, stosowanie semantycznych znaczników poprawia SEO i ułatwia nawigację.

Pytanie 20

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

A. walidacji strony internetowej.
B. kompilacji skryptu na stronie.
C. publikacji strony internetowej.
D. debugowania skryptu na stronie.
FileZilla jest popularnym klientem FTP (File Transfer Protocol), który służy do przesyłania plików między lokalnym komputerem a serwerem. Publikacja strony internetowej polega na przesyłaniu plików HTML, CSS, JavaScript i innych zasobów związanych z witryną na serwer, aby były one dostępne w Internecie. Używając FileZilla, użytkownik może łatwo połączyć się z serwerem poprzez protokół FTP, co pozwala na wygodne zarządzanie plikami, ich przesyłanie oraz organizowanie folderów na serwerze. Przykładowo, po edytowaniu strony lokalnie na komputerze, można za pomocą FileZilla przesłać zmodyfikowane pliki na serwer w kilka kliknięć, co przyspiesza proces aktualizacji witryny. Zgodnie z dobrymi praktykami branżowymi, ważne jest także ustawienie odpowiednich uprawnień do plików oraz regularne tworzenie kopii zapasowych, co zwiększa bezpieczeństwo publikowanych treści. FileZilla obsługuje również protokoły SFTP i FTPS, które zapewniają dodatkowe warstwy bezpieczeństwa podczas transferu danych, co jest istotne w kontekście ochrony danych użytkowników i integracji z różnymi usługami hostingowymi.

Pytanie 21

Aby poprawić wydajność strony z grafiką o wymiarach 2000 px na 760 px, konieczne jest zmniejszenie jej rozmiarów

A. w programie graficznym
B. za pomocą atrybutów HTML
C. za pomocą właściwości CSS, podając rozmiar w procentach
D. za pomocą właściwości CSS, podając rozmiar w pikselach

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź "w programie graficznym" jest prawidłowa, ponieważ zmniejszenie rozmiaru grafiki w sposób, który rzeczywiście wpływa na jej wielkość pliku oraz jakość wizualną, powinno być przeprowadzane w programie graficznym. Programy takie jak Adobe Photoshop, GIMP czy Canva umożliwiają precyzyjne dostosowanie wymiarów oraz kompresję grafiki, co pozwala na optymalizację jej do użytku w internecie. Przykładowo, zmieniając rozmiar grafiki do wymiarów 1000 px na 380 px i zapisując ją w odpowiednim formacie (np. JPEG lub PNG z odpowiednią jakością), można znacznie zmniejszyć wielkość pliku, co przyczyni się do szybszego ładowania strony. Ponadto, odpowiednia kompresja umożliwia zachowanie dobrego balansu między jakością a rozmiarem pliku, co jest istotne dla doświadczeń użytkowników. W branży internetowej stosuje się różne techniki optymalizacji grafiki, takie jak lazy loading czy formaty WebP, które wspierają szybkie ładowanie stron. Warto również zwrócić uwagę na znaczenie odpowiedniej rozdzielczości grafiki, aby uniknąć zniekształceń i zapewnić optymalną jakość wizualną.

Pytanie 22

Określ właściwą sekwencję stylów CSS, biorąc pod uwagę ich priorytet w formatowaniu elementów strony WWW?

A. Styl lokalny, Styl wewnętrzny, Styl zewnętrzny
B. Rozciąganie stylu, Styl zewnętrzny, Styl lokalny
C. Styl zewnętrzny, Wydzielone bloki, Styl lokalny
D. Styl wewnętrzny, Styl zewnętrzny, Rozciąganie stylu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wskazana odpowiedź, czyli Lokalny, Wewnętrzny, Zewnętrzny, jest zgodna z zasadami kaskadowego stylu arkuszy CSS. Istotą kaskadowości jest to, że style są stosowane według określonej hierarchii. Style lokalne (wbudowane) mają najwyższy priorytet, co oznacza, że jeśli na danym elemencie zastosowano styl lokalny, to zdominuje on wszelkie inne style. Przykład użycia stylu lokalnego to nadanie koloru tła dla konkretnego przycisku poprzez atrybut 'style': <button style='background-color: red;'>Przycisk</button>. W przypadku, gdy nie ma stylu lokalnego, przetwarzany jest styl wewnętrzny, który można zdefiniować w sekcji <style> w nagłówku dokumentu HTML. Na przykład: <style>p { color: blue; }</style> sprawi, że wszystkie akapity będą miały niebieski kolor. Dopiero na końcu brane są pod uwagę style zewnętrzne, które są definiowane w osobnych plikach CSS, na przykład: <link rel='stylesheet' href='style.css'>. Dlatego znajomość tej hierarchii jest kluczowa dla skutecznego tworzenia stylów, co przekłada się na lepsze zarządzanie wyglądem strony oraz unikanie konfliktów stylów. Warto również pamiętać o zasadzie „specyficzności”, która dodatkowo komplikuje temat, ponieważ style mogą mieć różny priorytet w zależności od ich specyfikacji.

Pytanie 23

Użycie znacznika <b> do pogrubienia tekstu może być również osiągnięte poprzez zastosowanie reguły CSS

A. font-size
B. font-weight
C. text-weight
D. text-size

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwość CSS 'font-weight' to naprawdę ważne narzędzie, które pozwala nam kontrolować grubość tekstu na stronie. Dzięki niemu możemy nie tylko pogrubić tekst, ale też ustawić różne inne wartości, jak 'normal', 'bold', 'bolder' oraz liczby od 100 do 900. To daje nam fajne możliwości w zakresie typografii. Na przykład, jak użyjesz zapisu CSS 'p { font-weight: bold; }', to wszystkie akapity na stronie będą się wyświetlały pogrubioną czcionką. Dobrze jest pamiętać, że korzystanie z 'font-weight' jest zgodne z najlepszymi praktykami, bo odseparowuje treść od stylizacji. Moim zdaniem dobrze jest ograniczać użycie znaczników HTML, takich jak <b>, do sytuacji, kiedy zależy nam na podkreśleniu ważności jakiejś treści. Projektując strony, musimy myśleć też o tym, jak strony będą odbierane przez użytkowników i jak będą dostępne. Dobre style mogą bardzo poprawić czytelność tekstu.

Pytanie 24

Jakiego elementu HTML brakuje, aby walidator HTML zgłosił ostrzeżenie lub błąd?

A. <title>
B. <meta name="author" content="....">
C. co najmniej jednego <h1>
D. <link>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Element <title> jest kluczowym składnikiem dokumentu HTML, odpowiedzialnym za definiowanie tytułu strony, który jest wyświetlany na pasku tytułowym przeglądarki oraz w wynikach wyszukiwania. Zgodnie z wytycznymi W3C, każdy dokument HTML powinien zawierać ten element w sekcji <head>, aby zapewnić poprawną strukturę oraz ułatwić indeksowanie przez wyszukiwarki. Brak <title> może prowadzić do ostrzeżeń lub błędów w walidacji, ponieważ wpływa to negatywnie na zarówno SEO, jak i dostępność strony. Przykładem poprawnej implementacji może być:<head><title>Mój pierwszy dokument HTML</title></head>, co zapewnia odpowiednią reprezentację treści strony w kontekście przeglądania i wyszukiwania. Dobrym zwyczajem jest, aby tytuł był zwięzły, a jednocześnie zawierał istotne słowa kluczowe, które odnoszą się do tematu strony. Nie należy zapominać, że właściwie skonstruowany tytuł wpływa na doświadczenia użytkowników oraz ich postrzeganie witryny.

Pytanie 25

Jakie będzie działanie po naciśnięciu przycisku oznaczonego jako "niebieski", który uruchamia podany kod JavaScript?

<p id="para1">Przykładowy tekst</p><p> i skrypt</p>
<button onClick="changeColor('blue');">niebieski</button>

<script type="text/javascript">
function changeColor(newColor)
{
var elem = document.getElementById("para1");
elem.style.color = newColor;
}
</script>
A. Zmiana barwy przycisku na niebieski
B. Zmiana koloru tekstu "Przykładowy tekst i skrypt" na niebieski
C. Zmiana koloru tekstu "i skrypt" na niebieski
D. Zmiana koloru tekstu "Przykładowy tekst" na niebieski

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kod JavaScript przedstawiony w pytaniu definiuje funkcję changeColor która przyjmuje jeden argument newColor. Po wywołaniu funkcji przez kliknięcie przycisku funkcja ta używa metody document.getElementById aby pobrać element o identyfikatorze para1. Identyfikator ten jest przypisany do pierwszego elementu paragrafu zawierającego tekst Przykładowy tekst. Następnie w ramach tego elementu zmieniany jest kolor tekstu poprzez przypisanie newColor do właściwości style.color. W omawianym przypadku newColor przyjmuje wartość blue co oznacza że tekst Przykładowy tekst zmieni kolor na niebieski. Warto podkreślić że manipulacja DOM przy użyciu JavaScript jest powszechnie stosowaną techniką w tworzeniu dynamicznych interfejsów użytkownika. Używanie metod takich jak getElementById jest standardem ze względu na ich prostotę oraz efektywność w selekcji elementów HTML. W praktycznych zastosowaniach warto również pamiętać o zgodności ze standardami W3C oraz o możliwościach rozszerzenia za pomocą bibliotek takich jak jQuery które oferują jeszcze bardziej zaawansowane opcje manipulacji DOM.

Pytanie 26

Kolor zapisany w notacji szesnastkowej #0000FF to:

A. niebieski
B. czerwony
C. zielony
D. czarny

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis szesnastkowy koloru ma postać <code><span class="code-text">#</span><span class="code-variable">RRGGBB</span></code>, gdzie każda para cyfr (00-FF) to składowa: czerwona, zielona i niebieska. W <code><span class="code-text">#</span><span class="code-number">0000</span><span class="code-variable">FF</span></code> składowe R i G są zerowe (<code><span class="code-number">00</span></code>), a niebieska maksymalna (<code><span class="code-variable">FF</span></code> = 255), więc powstaje czysty niebieski. To odpowiednik zapisu <code><span class="code-function">rgb</span><span class="code-text">(</span><span class="code-number">0</span><span class="code-text">,</span> <span class="code-number">0</span><span class="code-text">,</span> <span class="code-number">255</span><span class="code-text">)</span></code>. Znajomość skrajnych wartości (00 i FF) pozwala szybko rozpoznać kolory podstawowe. Dlatego <code><span class="code-text">#</span><span class="code-number">0000</span><span class="code-variable">FF</span></code> to niebieski.

Pytanie 27

Taki styl CSS sprawi, że na stronie internetowej

ul{ list-style-image: url('rys.gif'); }
A. każdy punkt listy zyska osobne tło z grafiki rys.gif
B. punkt listy nienumerowanej będzie rys.gif
C. rys.gif stanie się ramką dla listy nienumerowanej
D. rys.gif wyświetli się jako tło dla listy nienumerowanej

Brak odpowiedzi na to pytanie.

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

Pytanie 28

Który kod da: „pogrubiony” pogrubione, „pochylony” kursywą, a „górnym indeksie” w górnym indeksie?

A.
<b>pogrubiony</b> <i>pochylony</i> lub w <sup>górnym indeksie</sup>
B.
<b>pogrubiony <i>pochylony</i></b> lub w <sub>górnym indeksie</sub>
C.
<i>pogrubiony <b>pochylony lub w</i> <sup>górnym indeksie</sup>
D.
<i>pogrubiony</i> <b>pochylony</b> lub w <sub>górnym indeksie</sub>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Każdy efekt ma swój znacznik: pogrubienie to <code><span class="code-text">&lt;</span><span class="code-keyword">b</span><span class="code-text">&gt;</span></code>, kursywa <code><span class="code-text">&lt;</span><span class="code-keyword">i</span><span class="code-text">&gt;</span></code>, a górny indeks <code><span class="code-text">&lt;</span><span class="code-keyword">sup</span><span class="code-text">&gt;</span></code> (np. x<code><span class="code-text">&lt;</span><span class="code-keyword">sup</span><span class="code-text">&gt;</span></code>2). Poprawny zapis to <code><span class="code-text">&lt;</span><span class="code-variable">b</span><span class="code-text">&gt;</span><span class="code-variable">pogrubiony</span><span class="code-text">&lt;</span><span class="code-text">/</span><span class="code-variable">b</span><span class="code-text">&gt;</span> <span class="code-text">&lt;</span><span class="code-variable">i</span><span class="code-text">&gt;</span><span class="code-variable">pochylony</span><span class="code-text">&lt;</span><span class="code-text">/</span><span class="code-variable">i</span><span class="code-text">&gt;</span> <span class="code-text">.</span><span class="code-text">.</span><span class="code-text">.</span> <span class="code-text">&lt;</span><span class="code-variable">sup</span><span class="code-text">&gt;</span><span class="code-variable">górnym</span> <span class="code-variable">indeksie</span><span class="code-text">&lt;</span><span class="code-text">/</span><span class="code-variable">sup</span><span class="code-text">&gt;</span></code>. Zapamiętaj: <code><span class="code-text">&lt;</span><span class="code-keyword">sup</span><span class="code-text">&gt;</span></code> = superscript (góra), <code><span class="code-text">&lt;</span><span class="code-keyword">sub</span><span class="code-text">&gt;</span></code> = subscript (dół).

Pytanie 29

Którego selektora użyć, aby sformatować WSZYSTKIE obrazy znajdujące się w akapicie?

A.
p.img
B.
p + img
C.
p # img
D.
p img

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Aby ostylować wszystkie obrazy zawarte w akapicie, używa się selektora potomka - dwóch nazw oddzielonych SPACJĄ: <code><span class="code-variable">p</span> <span class="code-variable">img</span></code>. Spacja oznacza „dowolny <code><span class="code-text">&lt;</span><span class="code-keyword">img</span><span class="code-text">&gt;</span></code> gdziekolwiek wewnątrz <code><span class="code-text">&lt;</span><span class="code-keyword">p</span><span class="code-text">&gt;</span></code>”. Dlatego poprawny jest <code><span class="code-variable">p</span> <span class="code-variable">img</span></code>.

Pytanie 30

Brak którego elementu spowoduje BŁĄD/ostrzeżenie walidatora HTML?

A. przynajmniej jednego <h1>
B.
<title>
C.
<link>
D.
<meta name="author">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W poprawnym dokumencie HTML wymagany jest znacznik <code><span class="code-text">&lt;</span><span class="code-keyword">title</span><span class="code-text">&gt;</span></code> (w sekcji <code><span class="code-text">&lt;</span><span class="code-keyword">head</span><span class="code-text">&gt;</span></code>) - określa tytuł strony widoczny na karcie przeglądarki i w wynikach wyszukiwania. Jego brak walidator zgłasza jako błąd. Dlatego chodzi o <code><span class="code-text">&lt;</span><span class="code-keyword">title</span><span class="code-text">&gt;</span></code>.

Pytanie 31

Gdzie należy umieścić znacznik <meta> w dokumencie HTML?

A. między znacznikami akapitu
B. w sekcji nagłówkowej (<head>)
C. między <body> a </body>
D. w stopce strony

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <code><span class="code-text">&lt;</span><span class="code-keyword">meta</span><span class="code-text">&gt;</span></code> przekazuje metadane dokumentu, więc umieszcza się go w sekcji nagłówkowej <code><span class="code-text">&lt;</span><span class="code-keyword">head</span><span class="code-text">&gt;</span></code>. Dlatego <code><span class="code-text">&lt;</span><span class="code-keyword">meta</span><span class="code-text">&gt;</span></code> należy do <code><span class="code-text">&lt;</span><span class="code-keyword">head</span><span class="code-text">&gt;</span></code>.

Pytanie 32

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

Ilustracja do pytania
A. Joomla!
B. WordPress
C. Drupal
D. MediaWiki

Brak odpowiedzi na to pytanie.

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

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. Po najechaniu kursorem na element listy, kolor tekstu zmieni się na Maroon.
B. Kolor Maroon będzie dotyczył co drugiego elementu listy.
C. Wszystkie teksty elementów listy będą w kolorze Maroon.
D. Teksty wszystkich elementów, którym nadano id „hover”, będą w kolorze Maroon.

Brak odpowiedzi na to pytanie.

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

Na stronie internetowej dodano grafikę w kodzie HTML. Co się stanie, jeśli plik rysunek.png nie zostanie odnaleziony przez przeglądarkę?

<img src="rysunek.png" alt="pejzaż">
A. wstawi tekst "rysunek.png" zamiast grafiki
B. zademonstruje błąd wyświetlania strony w miejscu grafiki
C. wyświetli tekst "pejzaż" w miejscu grafiki
D. nie pokaże strony internetowej

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W HTML znacznik <img> jest używany do wstawiania obrazów na stronach. Ważne, żeby pamiętać o atrybucie src, który mówi przeglądarce, skąd ma wziąć obraz. A alt to taki tekst zapasowy, który wyświetli się, jeśli obrazek nie załaduje się z jakiegoś powodu. To istotne, bo ułatwia dostępność dla osób, które mogą mieć trudności z widzeniem. Na przykład, gdy plik rysunek.png się nie załaduje, to wyświetli się tekst z atrybutu alt - w tym przypadku słowo pejzaż. To jest zgodne z dobrymi praktykami, bo każdy powinien wiedzieć, co miało być na obrazku, nawet jeśli go nie widzi. To także pomaga wyszukiwarkom w indeksowaniu treści. A używanie atrybutu alt to rzecz, którą warto stosować, jeśli chcemy, żeby nasza strona była dostępna i przyjazna dla użytkowników. Przy tym, przypomina mi się, że to też jest zgodne z zasadami dostępności WCAG.

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 1.
B. Efekt 3.
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 36

Jakie polecenie HTML poprawnie odwzorowuje przedstawioną hierarchiczną strukturę tekstu, która została wyświetlona przez przeglądarkę w następujący sposób: Rozdział 1 tekst Podrozdział 1.1 tekst Podrozdział 1.2?

A. <ul><li>Rozdział 1<li>tekst<li>Podrozdział 1.1<li>tekst<li>Podrozdział 1.2</ul>
B. <h1>Rozdział 1<p>tekst<h2>Podrozdział 1.1<p>tekst<h2>Podrozdział 1.2
C. <big>Rozdział 1</big>tekst<big>Podrozdział 1.1</big>tekst<big>Podrozdział 1.2</big>
D. <h1>Rozdział 1</h1><p>tekst</p><h2>Podrozdział 1.1</h2><p>tekst</p><h2>Podrozdział 1.2</h2>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawny kod HTML do definiowania hierarchicznej struktury tekstu oparty jest na semantycznym znaczeniu tagów. W tym przypadku, użycie <h1> dla 'Rozdział 1' jako głównego nagłówka jest zgodne z zasadami projektowania stron internetowych, gdyż <h1> powinien być używany dla najważniejszego nagłówka na stronie. Następnie zastosowanie <h2> dla 'Podrozdział 1.1' i 'Podrozdział 1.2' wskazuje na hierarchię, gdzie te podrozdziały są podkategoriami głównego rozdziału. Tag <p> jest użyty do definiowania paragrafów tekstowych, co zapewnia odpowiednie formatowanie i czytelność. Taki układ jest zgodny z wytycznymi W3C, które rekomendują używanie nagłówków w strukturze dokumentu HTML, co ułatwia zarówno przeglądarkom, jak i użytkownikom zrozumienie hierarchii treści. Przykładowo, strona internetowa z taką strukturą będzie lepiej indeksowana przez wyszukiwarki, co przyczyni się do poprawy SEO.

Pytanie 37

Metainformacja "Description" umieszczona w pliku HTML powinna zawierać

<head>
    <meta name="Description" content="...">
</head>
A. spis słów kluczowych, które są wykorzystywane przez wyszukiwarki internetowe
B. opis treści znajdującej się na stronie
C. nazwę aplikacji, za pomocą której stworzono stronę
D. informację na temat autora strony

Brak odpowiedzi na to pytanie.

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

Pytanie 38

W edytorze grafiki wektorowej zbudowano kształt, który składa się z dwóch figur: trójkąta oraz koła. Aby uzyskać ten kształt, po narysowaniu figur i ich odpowiednim ustawieniu, trzeba użyć funkcji

Ilustracja do pytania
A. rozdzielenia
B. sumy
C. wykluczenia
D. różnicy

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Funkcja sumy w programach do grafiki wektorowej, takich jak Adobe Illustrator czy CorelDRAW, pozwala na połączenie dwóch lub więcej kształtów w jeden obiekt. To takie sprytne narzędzie! Sumowanie, znane też jako unia lub łączenie ścieżek, integruje geometrię wszystkich wybranych kształtów. Na przykład, jak narysujesz trójkąt i koło, a potem je odpowiednio ustawisz, to używając funkcji sumy, stworzysz nowy kształt, który obejmuje całą powierzchnię obu figur. Często to robi się przy projektowaniu logo, gdzie trzeba uprościć złożone kształty do jednej ścieżki. Taki sposób działania jest przyjęty w branży, bo ułatwia tworzenie czytelnych grafik, które są łatwe do edytowania. A co najważniejsze, połączenie figur w jedną upraszcza późniejsze zmiany i wpisuje się w zasady projektowania minimalistycznego, dzięki czemu można robić przejrzyste kompozycje. Warto mieć na uwadze, że takie podejście też ułatwia drukowanie i wycinanie, co jest mega ważne w produkcji materiałów reklamowych czy wyrobów przemysłowych.

Pytanie 39

Znacznik <ins> w HTML jest używany do wskazywania

A. tekstu, który został usunięty
B. tekstu, który został przeformatowany
C. tekstu, który został dodany
D. cytowanego fragmentu tekstu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wiesz, znacznik <ins> w HTML to coś, co używamy, żeby pokazać tekst dodany w stosunku do poprzedniej wersji dokumentu. To mega przydatne, zwłaszcza kiedy edytujemy różne treści, bo od razu widać, co się zmieniło. Zastosowanie tego znacznika można znaleźć w różnych dokumentach, jak blogi czy umowy, gdzie ważne jest, żeby pokazać, co się zmieniło w treści. Zgodnie z tym, co mówią wytyczne W3C, używanie znaczników semantycznych, jak <ins>, sprzyja lepszej dostępności tekstów i ułatwia ich zrozumienie przez wyszukiwarki oraz technologie wspierające. Przykładowo, gdy robisz poprawki w dokumencie, właśnie dzięki <ins> możesz wyróżnić nowe informacje, co sprawi, że użytkownicy łatwiej ogarną, co się zmieniło. Dobrze jest też dodać odpowiedni styl CSS, żeby nadać tym elementom wyraźniejszy wygląd.

Pytanie 40

Głównym celem systemu CMS jest oddzielenie treści serwisu informacyjnego od jego wizualnej formy. Ten efekt osiągany jest przez generowanie zawartości

A. z bazy danych oraz wizualizacji poprzez atrybuty HTML
B. z bazy danych oraz wyglądu ze zdefiniowanego szablonu
C. z plików HTML o stałej zawartości oraz wizualizacji przy pomocy technologii FLASH
D. z plików HTML o stałej zawartości oraz wizualizacji z użyciem ustalonego szablonu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź na to pytanie to "z bazy danych oraz wyglądu ze zdefiniowanego szablonu". Systemy CMS (Content Management System) mają na celu oddzielenie treści od prezentacji, co pozwala na łatwiejsze zarządzanie i aktualizowanie zawartości serwisu. Wykorzystanie bazy danych do przechowywania treści jest kluczowe, ponieważ umożliwia dynamiczne generowanie zawartości na stronach internetowych. Dzięki temu, gdy zmienia się treść w bazie danych, zmiany te są automatycznie odzwierciedlane na stronie bez potrzeby modyfikacji statycznych plików HTML. Szablony, które definiują wygląd, są również niezmiernie ważne, ponieważ pozwalają na spójność wizualną serwisu i jego łatwą adaptację w przypadku zmian w designie. Przykładem może być użycie systemu szablonów, takiego jak Twig w Symfony, który umożliwia separację logiki biznesowej od prezentacji, co ułatwia pracę developerom i designerom. Takie podejście jest zgodne z najlepszymi praktykami w branży, zapewniając przy tym elastyczność i skalowalność serwisów internetowych.