Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik programista
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 27 maja 2026 16:20
Data zakończenia: 27 maja 2026 16:29

Egzamin zdany!

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

W CSS określono styl dla paragrafu, który nada mu poniższe cechy:

background-color: red;
color: blue;
margin: 40px;

A. tło w kolorze czerwonym, tekst w kolorze niebieskim, marginesy zewnętrzne o wartości 40px

B. tło w kolorze niebieskim, tekst w kolorze czerwonym, marginesy wewnętrzne o wartości 40px

C. tło w kolorze czerwonym, tekst w kolorze niebieskim, marginesy wewnętrzne o wartości 40px

D. tło w kolorze niebieskim, tekst w kolorze czerwonym, marginesy zewnętrzne o wartości 40px

W podanym przykładzie z CSS zastosowano trzy kluczowe właściwości stylizujące element HTML: background-color color oraz margin. Właściwość background-color określa kolor tła danego elementu tutaj przyjęto wartość red co oznacza czerwone tło. Właściwość color definiuje kolor tekstu w elemencie który w tym przypadku jest ustawiony na blue czyli niebieski. Ostatnią właściwością jest margin która odpowiada za marginesy zewnętrzne elementu. Marginesy zewnętrzne to przestrzeń wokół elementu od jego krawędzi do sąsiadujących elementów i w tym przykładzie mają wartość 40px. Takie ustawienia są często używane w praktyce aby zapewnić czytelność i estetykę projektu. Używanie marginesów zewnętrznych to dobra praktyka w celu zachowania odpowiednich odstępów w układzie strony. Warto podkreślić że użycie tych właściwości jest zgodne ze standardami CSS zapewniając kompatybilność z większością przeglądarek. Właściwe stosowanie kolorów i marginesów jest kluczowe w projektowaniu przyjaznym dla użytkownika UX oraz estetycznie spójnych interfejsów graficznych.

Pytanie 2

Reprezentacja znacznika HTML w formacie ```przejdź```

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

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

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

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

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

Pytanie 3

W jaki sposób można określić w CSS styl dla hiperłącza, aby link, który nie był odwiedzony, miał kolor żółty, natomiast odwiedzony link był w kolorze zielonym?

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

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

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

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

Właściwa odpowiedź definiuje style CSS dla hiperłączy w sposób zgodny z ich rolą i statusami. Selektor `a:link` odpowiada za stylizację nieodwiedzonych linków, a w tym przypadku ustawia kolor tekstu na żółty. Z kolei selektor `a:visited` odnosi się do linków, które użytkownik już odwiedził, i ustawia ich kolor na zielony. Taka separacja stylizacji pozwala na intuicyjne rozróżnienie między linkami, co jest korzystne z punktu widzenia użyteczności i dostępności. Praktyczne zastosowanie tych selektorów pozwala na łatwe dostosowanie wyglądu strony internetowej w zależności od stanu hiperłączy, co może być przydatne w nawigacji. Zgodnie z dobrymi praktykami, zawsze warto testować wygląd strony w różnych przeglądarkach, ponieważ niektóre z nich mogą interpretować style CSS nieco inaczej. Dodatkowo, warto pamiętać o dostępności - kontrastujące kolory mogą znacznie poprawić czytelność i ułatwić nawigację osobom z wadami wzroku.

Pytanie 4

W celu sprawdzenia poprawności składni kodu CSS można skorzystać z

A. optymalizatora.

B. walidatora.

C. konsolidatora.

D. narzędzia debbuger.

Jeśli chcesz sprawdzić, czy Twój kod CSS jest poprawny, to najlepiej skorzystać z walidatora. To taki program lub strona, która podpowiada, czy wszystko jest zrobione zgodnie z zasadami ustalonymi przez W3C. Dzięki walidatorowi możesz szybko znaleźć błędy w swoim kodzie, na przykład brakuje średnika, są nieprawidłowe wartości lub coś jest nie tak z właściwościami. Używanie walidatorów jest ważne, bo nie tylko poprawia jakość kodu, ale też wpływa na to, jak szybko ładuje się strona i jak dobrze działa na różnych urządzeniach. Można znaleźć online narzędzia, jak W3C CSS Validation Service, gdzie wystarczy wkleić kod, a potem dostajesz raport z błędami. Generalnie, walidacja kodu CSS to dobry sposób na poprawienie jego jakości, a to z kolei może pomóc w lepszym SEO.

Pytanie 5

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

A. <meta>

B. <css>

C. <style>

D. <link>

Wybór niepoprawnych odpowiedzi wynika z nieporozumienia co do funkcji poszczególnych znaczników HTML. Znacznik <css> nie istnieje w standardzie HTML, co sprawia, że nie jest on w stanie zrealizować żadnej funkcji związanej z arkuszami stylów. To błędne podejście może prowadzić do niepoprawnego renderowania stron w przeglądarkach, które nie będą w stanie interpretować takiego znacznika. Z kolei znacznik <style> służy do wstawiania stylów CSS bezpośrednio w obrębie dokumentu HTML, w sekcji <head>. Choć pozwala na definiowanie stylów, nie jest on przeznaczony do ładowania zewnętrznych arkuszy stylów, co czyni go niewłaściwym wyborem w kontekście pytania. Ostatni z wymienionych znaczników, <meta>, jest używany do definiowania metadanych o dokumencie, takich jak opis, słowa kluczowe czy kodowanie znaków, ale nie ma związku z arkuszami stylów. Zrozumienie funkcji tych znaczników jest kluczowe dla prawidłowego tworzenia stron internetowych, ponieważ niepoprawne zastosowanie może prowadzić do problemów z wyświetlaniem oraz nawigacją na stronie.

Pytanie 6

Wskaż fragment CSS, który odpowiada rozkładowi bloków 2-5, zakładając, że zostały one zbudowane na podstawie podanego kodu HTML.

A. Kod 1

B. Kod 2

C. Kod 4

D. Kod 3

Kod 2 jest prawidłowy, ponieważ dla bloków 2 i 3 stosowane jest ustawienie float: left; co pozwala na ich ułożenie w jednym wierszu z lewej strony. Blok 4 z float: right; umiejscawia się po prawej stronie, co umożliwia uzyskanie układu bloków 2-4 w jednej linii, odpowiadając schematowi. Blok 5 z float: left; rozpoczyna nowy wiersz poniżej, zgodnie z założonym układem. Takie użycie właściwości float oraz width pozwala na zorganizowanie elementów na stronie bez użycia flexbox lub grid, co jest klasycznym podejściem do układu strony w CSS. Dobrym przykładem praktycznego zastosowania jest tworzenie responsywnych layoutów, gdzie float można używać do kontrolowania przepływu elementów na mniejszych ekranach. Mimo że obecnie technologia flexbox i grid jest bardziej popularna, znajomość stosowania float nadal jest istotna, zwłaszcza w kontekście starszych projektów, które mogą wymagać utrzymania zgodności z wcześniejszymi wersjami CSS. To rozwiązanie zapewnia zgodność z wieloma starszymi przeglądarkami, co jest kluczowe w przypadku długoterminowych projektów webowych.

Pytanie 7

Zaprezentowane pole input daje możliwość

<input type="checkbox" name="text1" value="text2">

A. wybrania opcji

B. zaznaczenia opcji z listy zawierającej wartości text1 i text2

C. wprowadzenia hasła

D. wpisania dowolnego tekstu

Pole input typu text umożliwia wpisanie dowolnego tekstu przez użytkownika co jest powszechnie używane w formularzach do wprowadzania danych takich jak imiona adresy email czy inne informacje tekstowe. Błąd polega na tym że checkbox nie służy do wpisywania tekstu lecz do wyboru opcji. Pole input typu password z kolei pozwala ukrywać wprowadzany tekst maskując go co jest typowym zastosowaniem dla pól wprowadzania haseł w formularzach logowania. Pomimo że oba te pola wykorzystują tag <input> ich przeznaczenie oraz sposób działania znacząco się różnią. Innym typem pola wyboru jest select które w połączeniu z elementem <option> pozwala użytkownikowi wybrać jedną spośród zdefiniowanych opcji. Select różni się od checkboxa tym że zazwyczaj domyślnie pozwala na wybór jednej opcji co jest bardziej zbliżone do działania radio buttonów. Wybór niepoprawnych odpowiedzi często wynika z niedostatecznego zrozumienia specyfiki oraz zastosowań różnych typów pól input co jest kluczowe dla poprawnego projektowania i implementacji formularzy internetowych. Zrozumienie funkcji i zastosowań różnych typów elementów input pozwala na tworzenie bardziej intuicyjnych i funkcjonalnych interfejsów użytkownika spełniających standardy dostępności i użyteczności co jest szczególnie ważne w kontekście projektowania zgodnego z zasadami UX.

Pytanie 8

Po przeprowadzeniu walidacji dokumentu HTML pojawił się błąd przedstawiony na zrzucie. Jak można go usunąć?

A. w znaczniku img zmienić nazwę atrybutu src na href

B. dodać atrybut alt do grafiki

C. zmienić zapis </h1> na <h1>

D. w znaczniku img zmienić nazwę atrybutu src na alt

Atrybut alt w znaczniku img jest kluczowym elementem poprawnego i dostępnego kodu HTML. Służy on do dostarczenia tekstowego opisu zawartości obrazu co jest niezwykle ważne dla osób korzystających z technologii asystujących takich jak czytniki ekranu. Dodanie atrybutu alt poprawia również indeksowanie strony przez wyszukiwarki internetowe co wpływa na SEO. Zgodnie z wytycznymi W3C oraz WCAG każda grafika powinna posiadać ten atrybut aby zapewnić dostępność treści. Przykładowo jeśli obraz przedstawia logo firmy alt powinien zawierać nazwę firmy. W przypadku obrazów dekoracyjnych atrybut alt może być pusty co sygnalizuje że obraz nie niesie istotnej informacji. Takie praktyki wspierają budowanie witryn przyjaznych i zgodnych ze standardami co jest nie tylko wymogiem prawnym w wielu jurysdykcjach ale także dobrym nawykiem programistycznym. W związku z tym dodanie atrybutu alt jest nie tylko środkiem do eliminacji błędu walidacji ale również krokiem w stronę odpowiedzialnego tworzenia treści internetowych.

Pytanie 9

Aby zidentyfikować błędy w składni kodu HTML, trzeba użyć

A. debuggera

B. interpretera

C. walidatora

D. kompilatora

Walidator to narzędzie służące do sprawdzania poprawności składniowej oraz semantycznej kodu HTML. Umożliwia on programistom wychwycenie błędów, które mogą prowadzić do problemów z wyświetlaniem strony internetowej w przeglądarkach. Walidatory, takie jak W3C Validator, analizują kod HTML pod kątem zgodności z aktualnymi standardami oraz najlepszymi praktykami. Na przykład, walidator może wykryć brakujące tagi, niewłaściwe atrybuty czy błędne zagnieżdżenie elementów. Przy pomocy walidatora można również sprawdzić, czy strona jest dostosowana do wymagań dotyczących dostępności i użyteczności. Używanie walidatorów jest kluczowe w procesie tworzenia stron internetowych, ponieważ pozwala na identyfikację i eliminację błędów przed opublikowaniem witryny. W ten sposób projektanci i deweloperzy mogą zapewnić, że ich strony będą działały prawidłowo na różnych urządzeniach i przeglądarkach, co jest istotne dla doświadczenia użytkowników oraz SEO.

Pytanie 10

Znacznik <pre> </pre> służy do prezentacji

A. treści polską czcionką

B. znaku przekreślenia

C. treści czcionką o stałej szerokości

D. znaku wielokropka

Wybór znaków przekreślenia, znaków wielokropka czy treści polską czcionką jest niepoprawny, ponieważ żaden z tych elementów nie jest związany z funkcją znacznika <pre>. Po pierwsze, znaki przekreślenia są używane w HTML do zaznaczania tekstu, który ma być przedstawiony jako przekreślony, co nie ma nic wspólnego z preformatowaniem tekstu. Element <s> lub <del> jest odpowiedzialny za takie formatowanie, a nie <pre>. Kolejną pomyłką jest zrozumienie roli wielokropka. W HTML nie istnieje znacznik, który odpowiada za wyświetlanie wielokropka w specyficzny sposób poza standardowym tekstem. W rzeczywistości wielokropek jest jedynie trzema kropkami i nie ma potrzeby go formatować w kontekście preformatowanego tekstu. Ostatnia z wymienionych odpowiedzi, sugerująca, że <pre> służy do wyświetlania treści polską czcionką, jest również błędna. HTML nie definiuje czcionek narodowych; zamiast tego, czcionki są kontrolowane przez CSS, a nie przez znaczniki HTML. Z tego powodu znaczniki <pre> nie mają żadnego wpływu na wybrany styl czcionki, a ich główną funkcją jest zachowanie formatowania tekstu, co czyni je idealnym narzędziem do wyświetlania kodu źródłowego, a nie do stylizacji typograficznej.

Pytanie 11

Walidator W3C zgłosił błąd walidacji: Zakończony tag p został znaleziony, jednak były otwarte elementy. Który element kodu to dotyczy?

A. Ala ma kota

B. Ala ma kota

C. Ala ma kota

D. Ala ma kota

Wybrana odpowiedź odnosi się do sytuacji, w której niepoprawnie zamknięto elementy HTML. W niniejszym przykładzie, tag otwarty przed tagiem jest niepoprawnie zamknięty w złą stronę. Poprawny kod HTML powinien najpierw zamknąć element , zanim zamknie element . Oznacza to, że powinien on wyglądać tak: Ala ma kota. Standardy W3C, które dotyczą walidacji HTML, podkreślają znaczenie poprawnego zagnieżdżania elementów. Gdy nieprzestrzegamy tej zasady, pojawią się błędy walidacji, co może prowadzić do problemów z wyświetlaniem strony lub interpretacją przez przeglądarki. Zrozumienie zasad poprawnego zagnieżdżania elementów HTML jest kluczowe, aby tworzyć strony internetowe, które są zarówno semantyczne, jak i dostępne. Dlatego ważne jest, by zawsze zwracać uwagę na poprawną strukturę kodu HTML, co zwiększa jego wydajność i użyteczność.

Pytanie 12

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

A. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

B. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

C. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

D. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

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

Pytanie 13

Zadanie "drzewo kontekstowe" w edytorze WYSIWYG Adobe Dreamweaver jest przeznaczone do

A. formatowania treści za pomocą dostępnych znaczników

B. określenia kaskadowych arkuszy stylów powiązanych z witryną

C. pokazania interaktywnego drzewa struktury HTML dla treści statycznych i dynamicznych

D. tworzenia szablonu strony internetowej

Funkcja 'drzewo kontekstowe' w edytorze WYSIWYG Adobe Dreamweaver jest kluczowym narzędziem, które umożliwia wizualizację struktury dokumentu HTML w formie interaktywnego drzewa. Dzięki temu użytkownicy mogą łatwo zobaczyć hierarchię elementów, co znacząco ułatwia nawigację oraz edycję zawartości zarówno statycznej, jak i dynamicznej. Przykład praktycznego zastosowania tej funkcji to sytuacja, w której programista pracuje nad złożonym projektem, zawierającym wiele sekcji i podsekcji. Dzięki drzewu kontekstowemu może szybko zlokalizować i edytować konkretne elementy, co przyspiesza proces tworzenia stron. Ponadto, funkcja ta wspiera dobre praktyki, takie jak utrzymanie czystości kodu oraz jego struktury, co jest zgodne z wytycznymi W3C dotyczącymi pisania HTML. Umożliwia to także lepsze zrozumienie i zarządzanie kodem, co jest nieocenione w większych projektach z zespołami developerskimi.

Pytanie 14

W CSS, aby ustawić wcięcie pierwszej linii akapitu na 30 pikseli, należy użyć zapisu

A. p {text-indent: 30px;}

B. p {text-spacing: 30px;}

C. p {line-indent: 30px;}

D. p {line-height: 30px;}

Odpowiedź p {text-indent: 30px;} jest prawidłowa, ponieważ właściwość text-indent w CSS służy do określenia wcięcia pierwszej linii akapitu. Wartość 30px oznacza, że pierwsza linia każdego akapitu zostanie przesunięta o 30 pikseli w prawo, co jest często stosowaną praktyką w celu poprawy czytelności tekstu. Dobrą praktyką jest stosowanie wcięć w dłuższych tekstach, co pozwala na bardziej uporządkowane i estetyczne przedstawienie treści. Przykładem zastosowania może być wcięcie w blogach czy artykułach, gdzie struktura tekstu ma znaczenie dla odbiorcy. Warto pamiętać, że właściwość text-indent działa tylko na pierwszą linię akapitu, co oznacza, że kolejne linie pozostają w standardowej pozycji. Używanie text-indent jest zgodne z dobrymi praktykami projektowania stron internetowych, które podkreślają znaczenie czytelności i estetyki tekstu.

Pytanie 15

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

A. lowercase

B. capitalize

C. uppercase

D. underline

Bezpośrednie odniesienie do odpowiedzi 'underline' nie ma związku z transformacją liter, ponieważ ta właściwość w CSS dotyczy podkreślenia tekstu, a nie zmiany wielkości liter. Użycie 'underline' nie zmienia formy wyświetlania liter, a jedynie dodaje efekt wizualny, który nie wpływa na tekst jako taki. Wybór 'uppercase' jest również mylący; zmienia on wszystkie litery na wielkie, co jest przeciwieństwem zamierzonego efektu, który dotyczy wyłącznie pierwszych liter wyrazów. Z kolei 'lowercase' koncentruje się na zmianie wszystkich liter na małe, co również prowadzi do niepożądanego efektu, jeśli celem jest uwydatnienie pierwszych liter. Typowym błędem w rozumieniu tych opcji jest założenie, że wszystkie one mogą pełnić tę samą funkcję, co może prowadzić do niepoprawnego stylizowania tekstu. Przy projektowaniu interfejsu użytkownika istotne jest zrozumienie, że różne właściwości CSS mają różne zastosowania i efekty. Dlatego ważne jest, aby przed podjęciem decyzji o stylizacji tekstu dokładnie określić cel oraz sposób, w jaki tekst powinien być prezentowany. Zastosowanie nieodpowiednich właściwości może prowadzić do nieczytelności oraz negatywnego wpływu na doświadczenie użytkownika.

Pytanie 16

Wskaż przycisk sformatowany przedstawionym stylem CSS.

#przycisk {
    background-color: white;
    padding: 10px;
    border-width: 2px;
    border-bottom-style: dashed;
}

Przycisk 1

Przycisk 2

Przycisk 3

Przycisk 4

A. Przycisk 4

B. Przycisk 1

C. Przycisk 3

D. Przycisk 2

Przycisk 2 jest jedynym, który spełnia wszystkie warunki określone w podanym stylu CSS. Białe tło, odstęp wewnętrzny 10 pikseli, szerokość obramowania 2 piksele oraz przerywana dolna krawędź obramowania są elementami, które zostały ustawione w stylach CSS dla przycisku 2. Ta wiedza jest niezwykle przydatna przy projektowaniu i tworzeniu stron internetowych, gdzie kształtowanie elementów interaktywnych, takich jak przyciski, jest często kluczowym elementem doświadczenia użytkownika. Pamiętaj, że CSS pozwala na dużą swobodę w dostosowywaniu wyglądu poszczególnych elementów strony, a zrozumienie, jak działa selekcja elementów i stylizacja, to fundamenty tworzenia atrakcyjnych i funkcjonalnych projektów webowych. Zrozumienie, jakie style zostały zastosowane do danego elementu, pozwala na szybkie i efektywne dostosowywanie strony do potrzeb klienta.

Pytanie 17

Na ilustracji zaprezentowano koncepcję układu bloków strony internetowej. Przyjmując, że bloki są realizowane za pomocą znaczników sekcji, a szerokość jest określona tylko dla bloków 2, 3 oraz 4, ich stylowanie powinno uwzględniać właściwość

A. float: left jedynie dla bloków 3 i 4 oraz clear: both dla bloku 2

B. clear: both dla wszystkich bloków

C. clear: both dla bloku 5 i float: left jedynie dla bloków 2, 3 oraz 4

D. float: left dla wszystkich bloków

Odpowiedź jest prawidłowa, ponieważ wykorzystanie float: left dla bloków 2, 3 i 4 pozwala na ich ustawienie obok siebie w poziomie. Jest to klasyczna technika stosowana w CSS do tworzenia layoutów, gdzie elementy mają płynąć obok siebie. Definiując float: left, elementy zaczynają od lewej krawędzi rodzica i układają się w linii poziomej. Użycie clear: both dla bloku 5 zapewnia, że blok ten zacznie się poniżej pływających bloków 2, 3 i 4, a nie obok nich. Clear: both jest konieczne, aby zapewnić, że blok 5 nie zostanie zakłócony przez floating, co jest powszechną praktyką przy tworzeniu wielokolumnowych layoutów. Kiedy float jest używany bez clear, może prowadzić do overlapania elementów, co jest niepożądane w strukturze layoutu. Praktyczne zastosowanie tego podejścia obejmuje układy z nagłówkiem, treścią i stopką, gdzie nagłówek i stopka powinny być pełnej szerokości, a treść podzielona na kolumny obok siebie. To podejście jest zgodne z tradycyjnymi metodami budowania stron przed wprowadzeniem flexboxa i grida, gdzie float był jednym z podstawowych narzędzi do zarządzania układem strony. Współczesne dobre praktyki wciąż uznają jego istotność, zwłaszcza w kontekście starszych projektów utrzymywanych z biegiem czasu.

Pytanie 18

Obraz przedstawia formatowanie CSS paragrafu. Aby otrzymać czerwony kolor poza obramowaniem, tak jak przedstawiono na obrazie, należy zdefiniować własność

Oto przykład paragrafu który poza ramką ma kolor grubości 10 px

A. border

B. padding

C. background

D. outline

Dobrze, wybrałeś właściwą odpowiedź! W tym pytaniu, żeby uzyskać czerwony kolor obok obramowania paragrafu, trzeba użyć właściwości 'outline'. Ta właściwość daje Ci możliwość dodania konturu do elementu, ale nie zmienia jego rozmiarów na stronie, więc wszystko zostaje na swoim miejscu. Fajnie jest to wykorzystać, gdy chcemy, żeby coś się wyróżniało, ale nie chcemy wprowadzać chaosu w układzie. To naprawdę dobra praktyka w web designie. Spróbuj zastosować to w swoich projektach!

Pytanie 19

Jak nazywa się organizacja odpowiedzialna za wyznaczanie standardów dla języka HTML?

A. WYSIWYG

B. ISO

C. W3C

D. NASK

Organizacja zajmująca się ustalaniem standardu dla języka HTML nosi nazwę W3C, co oznacza World Wide Web Consortium. Jest to międzynarodowa społeczność, która opracowuje standardy internetowe i zapewnia ich udostępnienie. W3C zostało założone w 1994 roku przez Tima Berners-Lee, twórcę WWW, z celem wspierania rozwijania wspólnych standardów, które mają na celu zapewnienie długoterminowego wzrostu i interoperacyjności w sieci. Standard HTML, a także jego kolejne wersje, są kluczowymi elementami tej inicjatywy. W3C odpowiada również za inne standardy, takie jak CSS, XML czy SVG. Dbanie o zgodność oraz poprawność kodu HTML jest niezbędne dla zapewnienia właściwego działania stron internetowych w różnych przeglądarkach. Przykłady standardów, które W3C wprowadziło, to HTML5, który wprowadził nowe elementy, takie jak <article>, <section> czy <canvas>. Te standardy pozwalają na tworzenie bardziej zaawansowanych interfejsów użytkownika, lepszą dostępność oraz efektywność. Dlatego W3C odgrywa kluczową rolę w ekosystemie internetu, wpływając na sposób, w jaki tworzymy i konsumujemy treści online.

Pytanie 20

W semantycznym HTML odpowiednikiem tagu , który nie tylko pogrubia tekst, ale również oznacza go jako istotniejszy, jest

A. <ins>

B.

C.

D.

Znacznik w języku HTML semantycznym służy do oznaczania tekstu, który ma szczególne znaczenie w kontekście treści. Oprócz stylistycznego pogrubienia czcionki, wskazuje, że dany fragment tekstu jest ważny dla zrozumienia treści dokumentu. Przykładowo, w artykule omawiającym bezpieczeństwo w Internecie, można użyć do wyróżnienia kluczowych terminów, takich jak 'szyfrowanie' czy 'firewall', co podkreśla ich znaczenie w ochronie danych. Użycie znaczników semantycznych, takich jak , jest zgodne z najlepszymi praktykami dostępności, co zapewnia lepszą interpretację treści przez technologie asystujące, takie jak czytniki ekranu. Takie podejście poprawia nie tylko nawigację po stronie, ale również SEO, ponieważ wyszukiwarki lepiej rozumieją kontekst i hierarchię treści. Warto również zauważyć, że w przeciwieństwie do , który jedynie zmienia wygląd tekstu, wnosi dodatkowy sens do struktury dokumentu, co jest szczególnie istotne w kontekście tworzenia witryn internetowych, które są zarówno estetyczne, jak i funkcjonalne.

Pytanie 21

Jak nazywa się element systemu zarządzania treścią, który jest bezpośrednio odpowiedzialny za wygląd strony internetowej?

A. Motyw w systemie WordPress lub szablon w systemie Joomla!

B. Widżet w systemie WordPress lub moduł w systemie Joomla!

C. Wtyczka w systemie WordPress lub dodatek w systemie Joomla!

D. Kokpit w systemie WordPress lub panel administracyjny w systemie Joomla!

Wybranie kokpitu w systemie WordPress lub panelu administracyjnego w systemie Joomla! jako kluczowego elementu odpowiedzialnego za wygląd witryny jest błędne, ponieważ te interfejsy służą przede wszystkim do zarządzania treścią i konfiguracji strony, a nie do jej wizualizacji. Kokpit WordPressa oraz panel Joomla! to narzędzia służące do dodawania, edytowania i organizowania treści, zarządzania użytkownikami oraz różnymi funkcjami witryny. Użytkownicy często mylą te dwa pojęcia, nie zdając sobie sprawy, że odpowiedzialność za estetykę witryny leży w zupełnie innym miejscu. Wtyczki i dodatki, jak sugerowane w kolejnej odpowiedzi, są narzędziami rozszerzającymi funkcjonalność serwisu, ale nie wpływają bezpośrednio na jego wygląd. Wtyczki mogą zmieniać sposób, w jaki treści są prezentowane, ale to motywy i szablony decydują o ich ostatecznym układzie wizualnym. Widżety i moduły, które również były wymienione w odpowiedziach, są elementami interfejsu, które mogą wpływać na rozmieszczenie zawartości w obrębie istniejącego motywu, ale nie są odpowiedzialne za podstawowy wygląd. W związku z tym błędne jest przypisywanie wyglądu witryny do narzędzi administracyjnych czy rozszerzeń, które w rzeczywistości pełnią inne funkcje. Zrozumienie różnicy pomiędzy tymi terminami jest kluczowe dla efektywnego zarządzania i projektowania stron internetowych.

Pytanie 22

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 plików HTML o stałej zawartości oraz wizualizacji przy pomocy technologii FLASH

B. z bazy danych oraz wyglądu ze zdefiniowanego szablonu

C. z plików HTML o stałej zawartości oraz wizualizacji z użyciem ustalonego szablonu

D. z bazy danych oraz wizualizacji poprzez atrybuty HTML

Wybór odpowiedzi, która sugeruje wykorzystanie ze statycznych plików HTML, jest w istocie niezgodny z ideą systemów CMS. stosowanie statycznych plików HTML oznacza, że każda zmiana treści serwisu wymagałaby ręcznej edycji plików, co jest czasochłonne i podatne na błędy. Takie podejście ogranicza elastyczność i możliwość szybkiej aktualizacji treści. Z kolei odpowiedzi wskazujące na wykorzystanie technologii FLASH są przestarzałe, ponieważ Flash nie jest już wspierany przez większość nowoczesnych przeglądarek i nie spełnia wymogów dostępności, co stawia pod znakiem zapytania jego użyteczność w kontekście nowoczesnych stron internetowych. Ponadto, odpowiedzi sugerujące wykorzystanie atrybutów HTML do definiowania wyglądu również są niewłaściwe, ponieważ atrybuty HTML nie są wystarczające do efektywnego kształtowania i zarządzania stylem aplikacji. W praktyce do definiowania wyglądu stosuje się arkusze stylów CSS, a nie tylko atrybuty. W konsekwencji, błędne koncepcje opierające się na statycznych plikach czy przestarzałych technologiach prowadzą do sytuacji, w której serwis staje się trudny w utrzymaniu i mało elastyczny, co jest sprzeczne z głównymi zaletami systemów zarządzania treścią.

Pytanie 23

Jakie narzędzie pozwala na zaimportowanie pliku z danymi SQL do bazy danych MySQL?

A. FileZilla

B. TotalCommander

C. Symfony 3

D. phpMyAdmin

phpMyAdmin to popularne narzędzie webowe, które umożliwia zarządzanie bazami danych MySQL i MariaDB. Dzięki phpMyAdmin można łatwo importować pliki z danymi SQL do bazy danych. Proces importu jest prosty: wystarczy zalogować się do phpMyAdmin, wybrać odpowiednią bazę danych, a następnie skorzystać z opcji 'Import'. Użytkownik może wskazać plik SQL, który chce zaimportować, a phpMyAdmin zadba o resztę. To narzędzie obsługuje różne formaty plików, w tym .sql, co czyni je wszechstronnym rozwiązaniem. Dodatkowo, phpMyAdmin oferuje funkcje umożliwiające zarządzanie strukturą tabel, przeglądanie danych, a także eksportowanie danych do różnych formatów. Narzędzie to jest zgodne z międzynarodowymi standardami bezpieczeństwa i dostępności, co czyni je popularnym wyborem wśród programistów i administratorów baz danych. Przykładem użycia może być migracja danych z lokalnego środowiska deweloperskiego do produkcyjnego, gdzie import danych SQL jest kluczowym krokiem w procesie wdrożenia.

Pytanie 24

Aby obraz umieszczony na stronie internetowej mógł automatycznie dostosowywać się do rozmiaru ekranu, na którym jest prezentowana strona, trzeba

A. oba jego wymiary ustawić w pikselach

B. jego szerokość ustawić w wartościach procentowych

C. nie zmieniać obu jego wymiarów za pomocą stylów CSS

D. jeden z jego wymiarów określić w pikselach

Nie modyfikowanie wymiarów obrazu stylami CSS nie zapewnia odpowiedniego dostosowania do różnych rozmiarów ekranów. W przypadku, gdy wartości szerokości i wysokości są ustalone w pikselach, obraz pozostaje stały na zadanym rozmiarze, co może prowadzić do problemów z wyświetlaniem na mniejszych ekranach, takich jak smartfony czy tablety. Użytkownik może doświadczyć sytuacji, w której obraz jest zbyt duży lub zbyt mały, co wpływa na estetykę i funkcjonalność strony. Ponadto, ustawianie jednego z wymiarów w pikselach ogranicza elastyczność projektu. W przypadku ustalania obu wymiarów w pikselach, obraz nie tylko nie dostosuje się do rozmiaru ekranu, ale również może zakłócać układ innych elementów na stronie, prowadząc do nieczytelności i frustracji użytkownika. Typowym błędem myślowym jest przekonanie, że stałe wymiary zapewniają lepszą kontrolę nad układem. W rzeczywistości, brak elastyczności w projektowaniu prowadzi do problemów z dostępnością oraz użytecznością, co jest sprzeczne z praktykami zalecanymi w nowoczesnym web designie. Aby skutecznie projektować responsywne strony, warto korzystać z jednostek względnych, takich jak procenty lub jednostki viewport, a także technik takich jak media queries w CSS.

Pytanie 25

Jaką szerokość zaplanowano dla treści strony, bazując na podanej definicji CSS?

body {
  border: 2px;
  height: 600px;
  width: 560px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

A. 640 px

B. 560 px

C. 2 px

D. 600 px

Gratulacje, udzieliłeś poprawnej odpowiedzi. W definicji CSS dla elementu body, szerokość ustawiono na 560 px. Właściwość box-sizing: border-box, gwarantuje, że szerokość ta obejmuje również obramowanie. Dlatego, w praktyce, szerokość strony pozostawiona na treść wynosi 560 px. Wartości te są bardzo ważne przy projektowaniu stron internetowych, szczególnie przy tworzeniu responsywnych layoutów, gdzie musimy precyzyjnie kontrolować szerokość i rozmieszczenie elementów. Pamiętaj, że wykorzystanie odpowiednich jednostek i precyzyjne definiowanie wymiarów jest kluczowe dla zachowania poprawnej struktury strony. Dobrym nawykiem jest również stosowanie właściwości box-sizing: border-box, która ułatwia kontrolę nad rozmiarem elementów, zwłaszcza przy komplikowanych układach strony.

Pytanie 26

W języku CSS wprowadzone zostało następujące formatowanie: ```h1 i {color:red;}``` Kolor czerwony będzie stosowany do

A. tylko tekstu pochylonego nagłówka pierwszego poziomu

B. całego tekstu nagłówka pierwszego stopnia oraz tekstu pochylonego w akapicie

C. wyłącznie pochylonego tekstu w każdym rodzaju nagłówka

D. całego tekstu nagłówka pierwszego stopnia oraz całego tekstu pochylonego, niezależnie od lokalizacji na stronie

Wszystkie odpowiedzi, które nie odpowiadają na pytanie, wynikają z niepoprawnego zrozumienia selektora CSS. Odpowiedzi, które sugerują, że kolor czerwony dotyczy całego tekstu nagłówka pierwszego stopnia, są błędne, ponieważ kolor czerwony jest przypisany jedynie do elementów 'i' znajdujących się w 'h1'. Nieprawidłowe jest także sugerowanie, że stylizacja dotyczy tekstu pochylonego we wszystkich poziomach nagłówków, ponieważ selektor odnosi się wyłącznie do 'h1', co wyklucza inne nagłówki. Dodatkowo, stwierdzenie, że styl obejmuje cały tekst nagłówka oraz wszelki tekst pochylony, nie jest zgodne z zasadami dziedziczenia stylów CSS. W rzeczywistości, selektor ogranicza się do określonego kontekstu, co oznacza, że tylko elementy 'i' w ramach 'h1' podlegają tym regułom. W związku z tym, jakiekolwiek inne elementy czy nagłówki nie są brane pod uwagę w tej regule stylizacji, co z kolei podkreśla precyzyjność i zastosowanie selektorów w CSS.

Pytanie 27

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

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

B. <meta content='UTF8'>

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

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

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

Pytanie 28

Aby graficznie tworzyć strony internetowe, należy skorzystać z.

A. edytor CSS

B. przeglądarka internetowa

C. program typu WYSIWYG

D. program MS Office Picture Manager

Programy typu WYSIWYG (What You See Is What You Get) są narzędziami, które umożliwiają tworzenie stron internetowych w sposób wizualny, co oznacza, że użytkownik widzi na ekranie efekty swojej pracy w czasie rzeczywistym. Takie oprogramowanie, jak Adobe Dreamweaver czy WordPress, pozwala na łatwe przeciąganie elementów, edytowanie tekstów oraz dodawanie grafik bez konieczności bezpośredniego pisania kodu HTML czy CSS. Dzięki temu, osoby bez zaawansowanej wiedzy programistycznej mogą tworzyć profesjonalnie wyglądające strony internetowe. Programy WYSIWYG wspierają standardy webowe i dobre praktyki, co pomaga w tworzeniu responsywnych i dostępnych serwisów. Używanie tych narzędzi przyspiesza także proces prototypowania oraz umożliwia szybkie wprowadzanie zmian, co jest niezwykle cenne w dynamicznym środowisku projektowym. Oprócz tego, dobrze zaprojektowane programy WYSIWYG oferują funkcje podglądu na różnych urządzeniach, co jest kluczowe w dobie rosnącej liczby rozdzielczości ekranów i urządzeń mobilnych.

Pytanie 29

W języku CSS zapis selektora

p > i { color: red; }

wskazuje, że kolorem czerwonym będzie sformatowany

A. wszystki tekst w znaczniku lub wszelkie treści w znaczniku

B. jedynie ten tekst w znaczniku , który znajduje się bezpośrednio wewnątrz znacznika

C. tylko ten tekst w znaczniku , który ma przypisaną klasę o nazwie i

D. wszystkie teksty w znaczniku oprócz tych w znaczniku

Zapis selektora CSS p > i mówi, że styl ma być zastosowany tylko do elementów , które są bezpośrednimi dziećmi znacznika . W praktyce oznacza to tyle, że jeśli w mamy , to tylko ten weźmie czerwony kolor. To jest w porządku, bo w CSS style mogą się dziedziczyć, ale można je też dokładnie określić z użyciem selektorów. Znak '>' wskazuje na relację rodzic-dziecko, co jest istotne, gdy patrzymy na strukturę dokumentu HTML. Na przykład, w kodzie: To jest przykład tekstu., słowo „przykład” będzie czerwone. Dodatkowo, korzystanie z takich selektorów to dobra praktyka, bo ogranicza wpływ stylów tylko do konkretnego kontekstu, co bardzo ułatwia zrozumienie kodu. Tego typu selektory pomagają unikać niechcianych efektów, które mogą się zdarzyć przy bardziej ogólnych zasadach CSS, a także poprawiają wydajność przeglądarki przy stylizacji.

Pytanie 30

Wskaż fragment kodu HTML5, który zostanie uznany przez walidator za niepoprawny?

A. tekst

B. tekst

C. tekst

D. <style>.a{color:#F00}</style>tekst

Odpowiedzi tekst, tekst oraz tekst są poprawne i zgodne z standardami HTML5. Element jest ogólnym znacznikiem używanym do definiowania paragrafów, a jego właściwe użycie obejmuje dodanie klas i identyfikatorów, co może być przydatne do stylizacji i skryptów. Użycie klasy 'stl' w pierwszym przykładzie pozwala na łatwe stylizowanie tego elementu w arkuszach stylów, co jest zgodne z zasadami modularności i ponownego użycia kodu. W przypadku drugiego przykładu, zastosowanie atrybutu style pozwala na bezpośrednie zastosowanie stylu, co jest właściwym podejściem w kontekście prostych aplikacji, chociaż w praktyce lepiej jest unikać inline styles ze względu na trudności w utrzymaniu kodu. Ostatni przykład, czyli tekst, nie zawiera żadnych dodatkowych atrybutów, ale także jest poprawny i może być używany w wielu kontekstach, gdzie stylizacja nie jest wymagana. Błędne jest myślenie, że elementy HTML5 są jedynie kontenerami treści - ich semantyka i zastosowanie klasy, identyfikatorów oraz stylów mają kluczowe znaczenie dla efektywności i organizacji kodu, co powinno być brane pod uwagę przy projektowaniu stron internetowych.

Pytanie 31

Jaka linia w języku HTML wskazuje kodowanie znaków używane w dokumencie?

A. <encoding="UTF-8">

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

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

D. <charset="UTF-8">

Zapis <meta charset="UTF-8"> jest poprawną deklaracją kodowania znaków w dokumencie HTML, ponieważ jest zgodny z aktualnymi standardami W3C. Element <meta> powinien znajdować się w sekcji <head> dokumentu HTML i pozwala przeglądarkom na właściwe interpretowanie znaków w treści strony. Kodowanie UTF-8 jest szeroko stosowane, ponieważ obsługuje wszystkie znaki w standardzie Unicode, co czyni go idealnym dla aplikacji wielojęzycznych. Użycie poprawnego kodowania jest kluczowe, aby uniknąć problemów z wyświetlaniem tekstu, takich jak błędne znaki lub krzaki, które pojawiają się, gdy przeglądarka nie wie, jak zinterpretować dane. Przykładowo, jeżeli mamy stronę internetową w kilku językach, użycie UTF-8 zapewnia, że znaki diakrytyczne w języku polskim, czeskim czy niemieckim będą poprawnie wyświetlane. Warto również pamiętać, aby zawsze umieszczać tę deklarację jako pierwszą w sekcji <head>, aby zapewnić, że przeglądarka prawidłowo zinterpretuje wszystkie inne elementy. W kontekście SEO oraz dostępności, poprawne kodowanie jest istotne, ponieważ wpływa na indeksowanie treści przez wyszukiwarki oraz ich prezentację dla użytkowników.

Pytanie 32

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

A. publikacji strony internetowej.

B. walidacji strony internetowej.

C. kompilacji skryptu na stronie.

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 33

Poniżej przedstawiono sposób obsługi:

<?php
if (!isset($_COOKIE[$nazwa]))
    echo "nie ustawiono!";
else
    echo "ustawiono, wartość: " . $_COOKIE[$nazwa];
?>

A. ciasteczek

B. zmiennych tekstowych

C. baz danych

D. sesji

Kod PHP przedstawiony w pytaniu ilustruje użycie mechanizmu ciasteczek w przeglądarce. Ciasteczka to małe pliki tekstowe, które serwer umieszcza na komputerze użytkownika, aby przechowywać informacje między sesjami HTTP. W tym przypadku kod sprawdza, czy zmienna o nazwie $nazwa jest ustawiona w tablicy superglobalnej $_COOKIE. Jeśli ciasteczko o danej nazwie nie zostało ustawione, skrypt zwraca komunikat 'nie ustawiono!'. Gdy ciasteczko istnieje, wyświetlana jest jego wartość. Ciasteczka są powszechnie stosowane do śledzenia sesji użytkowników, przechowywania preferencji czy zachowania stanu zalogowania. Ważnym aspektem jest zrozumienie, że ciasteczka działają po stronie klienta i mogą być modyfikowane przez użytkownika, dlatego powinny być używane z ostrożnością i w połączeniu z innymi mechanizmami zabezpieczeń. Warto pamiętać, że ciasteczka mają ograniczenia co do wielkości i liczby, które mogą być przechowywane przez przeglądarkę. Implementacja ciasteczek powinna być zgodna z regulacjami dotyczącymi prywatności, takimi jak RODO, które nakładają obowiązek informowania użytkowników o ich używaniu oraz uzyskiwania zgody.

Pytanie 34

W kodzie HTML stworzono link do strony internetowej. Aby otworzyć tę stronę w nowym oknie lub zakładce przeglądarki, należy dodać do definicji linku atrybut

<a href="http://google.com" >strona Google</a>

A. rel = "next"

B. target = "_parent"

C. rel = "external"

D. target = "_blank"

Wybór innych atrybutów, takich jak rel="next" czy rel="external", wynika z nieporozumienia dotyczącego funkcji atrybutu target. Atrybut rel jest używany do określenia relacji między aktualną stroną a stroną, do której prowadzi link. Oznaczenie rel="external" sugeruje, że link prowadzi do zewnętrznej witryny, co nie wpływa na sposób, w jaki strona zostanie otwarta. Z kolei rel="next" jest używane w kontekście paginacji treści, co również nie ma związku z otwieraniem linków w nowych oknach. Atrybut target ma na celu precyzyjne kontrolowanie miejsca, w którym otworzy się link. Rozważając inne wartości target, takie jak '_parent' lub '_top', również można zauważyć, że nie są one odpowiednie w kontekście otwierania nowych okien. '_parent' otwiera stronę w bieżącym oknie lub w rodzicielskim ramce, co może prowadzić do niezamierzonych skutków, jeśli celem jest zachowanie otwartej oryginalnej strony. Takie podejścia mogą prowadzić do frustracji użytkowników, którzy mogą chcieć, aby ich pierwotna strona pozostała otwarta podczas przeglądania innych zasobów. Dlatego kluczowe jest zrozumienie, jak różne atrybuty wpływają na nawigację i doświadczenia użytkowników, aby uniknąć nieporozumień i błędów w projektowaniu stron internetowych.

Pytanie 35

Która z reguł dotyczących sekcji w języku HTML jest poprawna?

A. W sekcji <head> można zdefiniować szablon strony przy użyciu znaczników <div>

B. W sekcji <head> mogą znajdować się znaczniki <meta>, <title>, <link>

C. W sekcji <head> nie można umieszczać kodu CSS, jedynie odwołanie do pliku CSS

D. W sekcji <head> umieszcza się część <body>

Wybór tej odpowiedzi jest słuszny, ponieważ w części <head> dokumentu HTML mogą występować różne znaczniki, które są kluczowe dla poprawnej struktury i funkcjonalności strony. Znaczniki <meta> służą do dostarczania danych o stronie, takich jak opis, słowa kluczowe czy informacje o autorze, co jest istotne dla SEO (optymalizacji pod kątem wyszukiwarek). Znacznik <title> definiuje tytuł strony, który jest wyświetlany w zakładkach przeglądarki oraz w wynikach wyszukiwania, co ma wpływ na wrażenia użytkowników oraz ich decyzje. Z kolei znacznik <link> jest używany do odwoływania się do zewnętrznych arkuszy stylów CSS, co pozwala na oddzielenie struktury HTML od stylizacji. Dobre praktyki wskazują, że umieszczanie CSS w <head> zamiast w <body> poprawia czas ładowania strony oraz zapewnia, że style są stosowane jeszcze przed renderowaniem zawartości, co wpływa na lepszą użyteczność i wygląd strony. Dobrze zorganizowana sekcja <head> może przyczynić się do lepszego pozycjonowania w wyszukiwarkach oraz poprawy doświadczeń użytkowników.

Pytanie 36

W programie MS Access w ustawieniach pola klasa należy określić maskę wprowadzania danych. Jaką maskę należy ustawić, aby dane wprowadzone składały się z trzech znaków w formacie: obowiązkowa cyfra, następnie dwie obowiązkowe litery?

Ogólne
Rozmiar pola	3
Format
Maska wprowadzania
Tytuł
Wartość domyślna
Reguła spr. poprawności
Tekst reguły spr. poprawności
Wymagane	Nie
Zerowa dł. dozwolona	Tak
Indeksowane	Nie
Kompresja Unicode	Tak
Tryb IME	Bez formantu
Tryb zdania edytora IME	Brak
Tagi inteligentne

A. 0LL

B. 000

C. 0CC

D. CLL

W przypadku maski wprowadzania danych w MS Access, należy zrozumieć, jakie znaczenie mają poszczególne symbole używane do stworzenia maski. Symbole te określają, co użytkownik może wprowadzić w każdym miejscu pola. Często spotykanym błędem jest wybór niewłaściwego symbolu, co prowadzi do niepoprawnego formatu danych. W przypadku masek takich jak 0CC, 000 i CLL, każda z nich stosuje niewłaściwe podejście do formatu wymaganego w pytaniu. Maska 0CC zakłada, że po cyfrze mogą znajdować się dowolne znaki, co nie spełnia wymagań dotyczących dwóch obowiązkowych liter. Maska 000 z kolei wymusza wprowadzenie trzech cyfr, co całkowicie mija się z celem, ponieważ wymagany jest format składający się z jednej cyfry i dwóch liter. Maska CLL sugeruje, że pierwszy znak może być dowolnym znakiem (cyfrą lub literą), co również jest niezgodne z wymaganiami, gdzie pierwszą pozycję musi zajmować cyfra. Takie nieporozumienia mogą wynikać z braku zrozumienia znaczenia symboli używanych w maskach wprowadzania danych. Kluczem do poprawnego zastosowania masek w MS Access jest więc dokładne poznanie, jakie symbole są dostępne i jakie mają zastosowanie, aby zwiększyć spójność i integralność danych w systemach bazodanowych. Zrozumienie tych zasad pozwala również uniknąć typowych błędów wynikających z niepoprawnej interpretacji wymagań dotyczących formatowania danych, co jest istotne nie tylko w kontekście egzaminacyjnym, ale także w praktycznej pracy z bazami danych. Poprawne zrozumienie i stosowanie masek wprowadzania danych jest elementem profesjonalnego zarządzania danymi, gdzie każda baza musi spełniać określone standardy jakości i wydajności.

Pytanie 37

W HTML5 semantycznym znacznikiem, który służy do określenia dwóch sekcji widocznych po prawej stronie na rysunku, zawierających wiadomości oraz aktualności, jest

A. <nav>

B. <main>

C. <footer>

D. <article>

Element <article> w HTML5 został stworzony właśnie do oznaczania niezależnych, samodzielnych treści, które mają sens nawet poza kontekstem strony – czyli takich, które można zamieścić np. w RSS, podlinkować czy udostępnić osobno. W praktyce oznacza to np. pojedyncze wpisy na blogu, wiadomości, ogłoszenia czy aktualności – dokładnie tak jak w tym zadaniu. Dzięki użyciu <article>, osoby korzystające z czytników ekranowych czy wyszukiwarek łatwiej rozpoznają strukturę strony, bo semantyka jest czytelna dla maszyn. Z mojego doświadczenia, stosowanie <article> dla wiadomości i aktualności jest też zgodne z dobrą praktyką tworzenia dostępnych stron – Google nawet sugeruje, by tak wyodrębniać własne, kompletne treści. To ma ogromne znaczenie przy pozycjonowaniu (SEO), bo roboty wyszukiwarek potrafią lepiej rozumieć, co jest główną treścią strony. Dodatkowo, używanie odpowiednich znaczników semantycznych poprawia współpracę z różnymi narzędziami, które analizują układ i zawartość strony, a także ułatwia późniejszą przebudowę lub rozwój projektu. Moim zdaniem, nadanie sekcjom z wiadomościami i aktualnościami znacznika <article> to podstawa nowoczesnego kodowania stron internetowych.

Pytanie 38

Funkcjonalność obejmującą edycję kodu źródłowego, jego kompilację, tworzenie zasobów programu, baz danych i komponentów udostępnia

A. środowisko IDE

B. PhpMyAdmin

C. debugger

D. Notpead++

W tym pytaniu kluczowe jest zrozumienie, że chodzi o narzędzie, które w jednym miejscu łączy edycję kodu, kompilację, tworzenie zasobów programu, pracę z bazami danych i komponentami. Taki zestaw funkcji jest dość rozbudowany i nie zapewni go pojedynczy, prosty program. Częsty błąd polega na myleniu pojedynczej funkcji z pełnym środowiskiem programistycznym. Debugger na przykład jest bardzo ważnym narzędziem, ale jego zadanie to analiza działania programu krok po kroku, ustawianie breakpointów, podgląd wartości zmiennych, stosu wywołań. Debugger zwykle jest tylko jednym z modułów wchodzących w skład większego środowiska IDE. Sam z siebie nie służy ani do pisania kodu w wygodny sposób, ani do zarządzania zasobami aplikacji czy bazą danych. Podobnie Notepad++ to rozbudowany edytor tekstu z podświetlaniem składni, wtyczkami, możliwością pracy na wielu plikach. Jednak to nadal tylko edytor, a nie pełne IDE. Nie posiada natywnego systemu kompilacji projektów, zaawansowanego zarządzania projektem, integracji z kompilatorami i budowaniem całych rozwiązań w sposób typowy dla środowisk programistycznych. Oczywiście da się w nim pisać kod, ale cała reszta procesu programowania spada na użytkownika i zewnętrzne narzędzia. PhpMyAdmin z kolei jest narzędziem stricte bazodanowym, webowym interfejsem do zarządzania serwerem MySQL/MariaDB. Umożliwia tworzenie i modyfikowanie tabel, wykonywanie zapytań SQL, eksport i import danych. Nie służy do edycji kodu źródłowego aplikacji ani do kompilacji programów. Czasem pojawia się tu typowe złudzenie: skoro narzędzie ma coś wspólnego z bazami danych albo kodem, to może „załatwia wszystko”. W praktyce każda z tych aplikacji realizuje tylko wycinek funkcjonalności opisanej w pytaniu. Pełny zestaw: edycja, kompilacja, zasoby, bazy i komponenty – to domena środowisk IDE, które integrują wiele narzędzi w jednym spójnym interfejsie, zgodnie z dobrymi praktykami pracy programisty.

Pytanie 39

Jak nazywa się edytor, który wspiera proces tworzenia stron internetowych i którego działanie można opisać w polskim tłumaczeniu jako "otrzymujesz to, co widzisz"?

A. VISUAL EDITOR

B. WEB STUDIO

C. IDE

D. WYSIWYG

Edytor WYSIWYG (What You See Is What You Get) to narzędzie, które umożliwia tworzenie stron internetowych w sposób wizualny, co oznacza, że użytkownik może zobaczyć, jak strona będzie wyglądać w rzeczywistości podczas edytowania. Tego typu edytory eliminują potrzebę znajomości języków programowania, takich jak HTML czy CSS, ponieważ pozwalają na przeciąganie i upuszczanie elementów na stronie. Przykłady popularnych edytorów WYSIWYG to Adobe Dreamweaver, Wix czy WordPress z jego edytorem blokowym. Standardy takie jak HTML5 oraz CSS3 są często wspierane przez te narzędzia, co pozwala na tworzenie nowoczesnych, responsywnych stron internetowych. To podejście jest szczególnie przydatne dla osób nietechnicznych, które pragną stworzyć własną witrynę bez konieczności angażowania programisty.

Pytanie 40

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

A. w procentach

B. w pikselach

C. w milimetrach

D. tylko z wykorzystaniem znaczników big i small

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

Rozpocznij nowy egzamin

Powrót do strony głównej