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: 11 maja 2026 10:46
Data zakończenia: 11 maja 2026 11:08

Egzamin zdany!

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

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

Atrybut wskazujący na lokalizację pliku graficznego w znaczniku <img> to

A. alt

B. src

C. href

D. link

Atrybut 'src' (source) jest kluczowym elementem znacznika <img>, ponieważ wskazuje lokalizację pliku graficznego, który ma być wyświetlony na stronie internetowej. Użycie tego atrybutu jest niezbędne, aby przeglądarka mogła zlokalizować i załadować odpowiedni obraz. Na przykład, jeśli chcesz wyświetlić grafikę logo na stronie, możesz użyć znacznika <img src='logo.png'>, gdzie 'logo.png' jest ścieżką do pliku graficznego. Ważne jest, aby pamiętać o dokładnym podaniu ścieżki, która może być względna lub absolutna. Zgodnie z najlepszymi praktykami, ważne jest również użycie atrybutu 'alt', który opisuje obraz dla osób z problemami wzrokowymi oraz w przypadku, gdy obraz nie może być załadowany. Przestrzeganie standardów W3C w zakresie HTML zapewnia lepszą dostępność i użyteczność stron internetowych.

Pytanie 2

Kolor reprezentowany w formacie heksadecymalnym #0000FF to

A. niebieski

B. czarny

C. zielony

D. czerwony

Kolor zapisany w notacji heksadecymalnej #0000FF to odcień niebieskiego. Notacja heksadecymalna jest powszechnie stosowana w projektowaniu stron internetowych oraz grafice komputerowej do definicji kolorów w systemie RGB. W tej notacji sześć znaków reprezentuje wartości czerwonego, zielonego i niebieskiego (RGB), gdzie pierwsze dwa znaki to wartość czerwonego, kolejne dwa to wartość zielonego, a ostatnie dwa to wartość niebieskiego. W przypadku #0000FF, wartości są następujące: 00 (czerwony), 00 (zielony), FF (niebieski), co oznacza maksymalny poziom niebieskiego światła. Taki kolor jest czystym niebieskim, uzyskiwanym gdy intensywność czerwonego i zielonego jest zerowa, a niebieskiego maksymalna. Przykładami użycia niebieskiego w designie mogą być logo Facebooka, które wykorzystuje podobny odcień, czy tła niektórych stron internetowych. Heksadecymalne kody kolorów są zgodne z standardem W3C, co zapewnia ich uniwersalność i spójność w różnych aplikacjach graficznych i interfejsach użytkownika.

Pytanie 3

W języku CSS zapis

p::first-line {font-size: 150%;}

zastosowany na stronie z wieloma paragrafami, z których każdy zawiera kilka linii, spowoduje, że

A. pierwsza linia każdego paragrafu będzie miała większą czcionkę niż pozostałe linie

B. pierwszy paragraf na stronie w całości będzie miał powiększoną czcionkę

C. cały tekst paragrafu zostanie powiększony o 150%

D. pierwsza linia każdego paragrafu będzie miała mniejszą czcionkę niż pozostałe linie

Odpowiedź jest trafna, bo selektor CSS 'p::first-line' służy do stylizowania wyłącznie pierwszej linii każdego paragrafu. Kiedy przypisujesz styl 'font-size: 150%', to znaczy, że czcionka tej pierwszej linii będzie większa o 50% od standardowego rozmiaru ustalonego w CSS. To dobra praktyka w web designie, bo pomaga w czytelności i nadawaniu hierarchii informacjom. Na przykład, fajnie jest wyróżnić rozpoczęcie tekstu albo zaakcentować ważne dane. Pamiętaj tylko, że efekt będzie widoczny tylko, gdy tekst ma więcej niż jedną linię, bo w przeciwnym razie powiększenie się nie ujawni. Dodatkowo, korzystanie z pseudo-elementów, jak '::first-line', to coś, co jest w standardach CSS i jest naprawdę cenione w branży.

Pytanie 4

W celu przeniesienia strony internetowej na serwer, można wykorzystać program

A. Go!Zilla

B. CloneZilla

C. FileZilla

D. Bugzilla

FileZilla to oprogramowanie typu FTP (File Transfer Protocol), które jest powszechnie używane do przesyłania plików pomiędzy lokalnym komputerem a serwerem. Jest to narzędzie open-source, które obsługuje zarówno FTP, jak i SFTP (SSH File Transfer Protocol), co czyni je wszechstronnym rozwiązaniem dla transferu plików w bezpieczny sposób. Dzięki intuicyjnemu interfejsowi użytkownika, który przypomina popularne menedżery plików, użytkownicy mogą łatwo przeglądać lokalne i zdalne systemy plików, co znacznie ułatwia transfer danych. Przykładem zastosowania może być sytuacja, w której deweloper webowy musi przesłać pliki witryny internetowej do nowego serwera. W takim przypadku FileZilla pozwala na szybki i efektywny transfer z minimalnym ryzykiem błędów. Ponadto, FileZilla wspiera różne protokoły uwierzytelniania, co zwiększa bezpieczeństwo przesyłanych plików. Używanie FileZilla jest zgodne z najlepszymi praktykami branżowymi, ponieważ narzędzie to jest regularnie aktualizowane i wspiera standardy bezpieczeństwa, co czyni je niezawodnym wyborem dla profesjonalnych administratorów systemów.

Pytanie 5

Jaki typ komunikatu jest zawsze przesyłany wyłącznie w kierunku w dół, to jest od kierownika do pracownika?

A. Zgłaszanie.

B. Powierzenie zadania.

C. Poszukiwanie rozwiązań.

D. Uwagi dotyczące polityki organizacji.

Powierzenie zadania jest komunikatem, który jest zawsze przekazywany w sposób pionowy w dół, co oznacza, że jest przekazywany od przełożonego do podwładnego. Tego typu komunikacja jest kluczowa dla efektywnego zarządzania, ponieważ pozwala przełożonym na delegowanie odpowiedzialności i ustalanie oczekiwań wobec pracowników. Przykładem może być sytuacja, w której kierownik działu przydziela zadanie konkretnej osobie, określając cele, terminy oraz zasoby potrzebne do jego realizacji. W praktyce, powierzenie zadań jest zgodne z zasadami efektywnego zarządzania projektami, gdzie klarowność i zrozumienie oczekiwań są niezbędne do osiągnięcia sukcesu. Warto również zwrócić uwagę na standardy, takie jak PMBOK, które podkreślają znaczenie komunikacji w procesie zarządzania projektami, w tym precyzyjnego delegowania zadań. Dzięki temu powierzenie zadań nie tylko zapewnia jasność, ale także zwiększa zaangażowanie pracowników i ich odpowiedzialność za realizowane projekty.

Pytanie 6

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

A. C

B. A

C. B

D. D

Odpowiedź C jest poprawna ponieważ przedstawiony fragment kodu HTML definiuje uporządkowaną listę zagnieżdżoną W tym kodzie zauważamy że główna lista jest uporządkowana oznaczona jako ol co definiuje elementy listy jako numerowane po kolei Elementy li w tej liście to punkty jeden dwa i trzy Na szczególną uwagę zasługuje fakt że drugi element li zawiera zagnieżdżoną nieuporządkowaną listę ul co jest zgodne ze standardami HTML dotyczącymi zagnieżdżania list Zgodnie z dobrymi praktykami zagnieżdżanie list w HTML powinno być stosowane w sposób przejrzysty i logiczny co ułatwia czytelność i zrozumienie kodu oraz jego późniejsze modyfikacje Praktycznym zastosowaniem takich struktur jest organizowanie treści w dokumentach internetowych w sposób hierarchiczny co ułatwia zarówno użytkownikom przeglądanie zawartości jak i programistom zarządzanie kodem Zrozumienie zagnieżdżania list jest kluczowe dla efektywnego tworzenia stron internetowych które są nie tylko estetyczne ale także funkcjonalne i dostępne dla szerokiej grupy odbiorców

Pytanie 7

Aby móc edytować nałożone na siebie poszczególne części obrazu, zachowując inne elementy w niezmienionej formie, należy użyć

A. warstwy

B. histogramu

C. kadrowania

D. kanału alfa

Aby efektywnie edytować nakładające się na siebie fragmenty obrazu, najlepiej jest zastosować warstwy. Warstwy w programach graficznych, takich jak Adobe Photoshop, pozwalają na niezależne manipulowanie różnymi elementami obrazu, co daje ogromne możliwości w zakresie edycji. Dzięki zastosowaniu warstw, możesz dodawać, modyfikować lub usuwać poszczególne fragmenty bez wpływu na inne elementy kompozycji. Na przykład, jeśli chcesz zmienić kolor tylko jednego obiektu na obrazie, wystarczy, że wybierzesz odpowiednią warstwę i zastosujesz na niej odpowiednie filtry lub narzędzia. Warstwy umożliwiają również korzystanie z kanałów alfa, co pozwala na precyzyjne zarządzanie przezroczystością i maskowaniem. W standardach edycji graficznej, użycie warstw stało się normą, ponieważ pozwala to na większą elastyczność i kontrolę nad finalnym efektem wizualnym. Przykładowo, w projektach skomplikowanych grafik, takich jak plakaty czy infografiki, korzystanie z warstw jest kluczowe dla zachowania porządku i efektywności pracy.

Pytanie 8

Skrypt na stronę WWW stworzony w języku PHP

A. jest wykonywany po stronie serwera

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

C. jest realizowany po stronie klienta

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

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

Pytanie 9

Który z elementów HTML ma charakter bloku?

A. p

B. strong

C. img

D. span

Znacznik HTML <p> to absolutna podstawa, jeśli chodzi o tworzenie akapitów w dokumentach. Elementy blokowe, do których <p> się zalicza, zajmują całą szerokość, więc zawsze tworzą nową linię przed i po sobie. Używanie znacznika <p> jest mega ważne, bo to nie tylko poprawia czytelność tekstu, ale i semantykę strony. Na przykład, jak myślisz o SEO, to dobrze zorganizowana struktura dokumentu naprawdę pomaga wyszukiwarkom zrozumieć, o co chodzi na stronie. Zresztą, <p> świetnie współpracuje z CSS, dzięki czemu możesz łatwo ustawić marginesy czy odstępy. W praktyce każdy akapit powinien być zawarty w tym znaczniku, bo dzięki temu oddzielasz go od innych elementów, jak nagłówki czy listy. Pamiętaj jednak, żeby nie zagnieżdżać znacznika <p> w innych blokowych znacznikach, bo to sprzeczne z zasadami HTML5. Jak zrozumiesz i wykorzystasz elementy blokowe, to stworzysz naprawdę dobrze zorganizowaną i semantyczną stronę.

Pytanie 10

Narzędziem do zarządzania bazą danych wbudowanym w pakiet XAMPP jest

A. phpMyAdmin

B. MySQL Workbench

C. pgAdmin

D. SQLite

phpMyAdmin to popularne narzędzie webowe, które jest częścią pakietu XAMPP, służące do zarządzania bazami danych MySQL. Umożliwia użytkownikom interakcję z bazą danych poprzez intuicyjny interfejs graficzny, co znacznie upraszcza wykonanie operacji takich jak tworzenie, edytowanie i usuwanie baz danych oraz tabel. Dzięki phpMyAdmin można z łatwością zarządzać uprawnieniami użytkowników, importować i eksportować dane, a także wykonywać zapytania SQL bez konieczności korzystania z linii poleceń. To narzędzie jest szczególnie przydatne dla osób, które nie mają doświadczenia w pracy z bazami danych, a jego dostępność w XAMPP czyni go idealnym rozwiązaniem dla programistów webowych i administratorów systemów. W praktyce, phpMyAdmin wspiera wiele standardów, takich jak UTF-8, co zapewnia poprawne przetwarzanie danych w różnych językach. Warto zaznaczyć, że korzystanie z phpMyAdmin jest zgodne z najlepszymi praktykami w zakresie zarządzania bazami danych, ponieważ umożliwia skuteczne monitorowanie i optymalizację wydajności bazy danych.

Pytanie 11

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

A. <ins>

B. <mark>

C. <em>

D. <strong>

Znacznik <strong> 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, <strong> 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ć <strong> 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 <strong>, 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 <b>, który jedynie zmienia wygląd tekstu, <strong> 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 12

Aby grupować sekcje na poziomie bloków, które będą stilizowane za pomocą znaczników, jakiego należy użyć?

A. <param>

B. <div>

C. <p>

D. <span>

Znak <div> jest jednym z podstawowych elementów HTML, który służy do grupowania i organizowania zawartości w dokumentach HTML. Umożliwia on stosowanie stylów CSS oraz skryptów JavaScript na grupach elementów, co czyni go niezwykle użytecznym w budowie responsywnych i złożonych układów stron. W przeciwieństwie do znaku <p>, który zarezerwowany jest dla akapitów tekstu, lub <span>, który jest używany do izolowania niewielkich fragmentów tekstu w ramach większego kontekstu, <div> działa jako kontener wypełniający swoje otoczenie. Ponadto, <div> jest znacznikiem blokowym, co oznacza, że zajmuje całą szerokość dostępnego miejsca w swoim rodzicu, co jest kluczowe w projektowaniu układów. W praktyce może być używany do tworzenia sekcji strony, nagłówków, stopki czy artykułów, co pozwala na lepszą organizację kodu i stylów. W kontekście standardów, <div> jest częścią W3C HTML5, co zapewnia jego szeroką akceptację i zgodność z przeglądarkami. Użycie <div> do grupowania obszarów na poziomie bloków jest zatem najlepszą praktyką w nowoczesnym web designie.

Pytanie 13

Który ze skrótów oznacza sieć bezprzewodową?

A. WLAN

B. LAN

C. MAN

D. WAN

Poprawna odpowiedź to WLAN, czyli Wireless Local Area Network. Skrót ten dosłownie oznacza bezprzewodową sieć lokalną. W praktyce chodzi o to, co większość osób nazywa po prostu „Wi‑Fi” w domu, w szkole czy w firmie. Różnica jest taka, że Wi‑Fi to nazwa standardu/technologii (opartej o IEEE 802.11), a WLAN to ogólne określenie całej sieci lokalnej realizowanej bez kabli. W typowej infrastrukturze IT masz często klasyczny LAN oparty na skrętce (Ethernet) oraz równolegle WLAN realizowany przez punkty dostępowe (access pointy), które rozgłaszają sieci o nazwach SSID. Użytkownik loguje się do WLAN przy pomocy hasła lub uwierzytelniania 802.1X, a dalej korzysta z tych samych zasobów co w sieci przewodowej: serwera WWW, panelu CMS, bazy danych czy panelu administracyjnego routera. Z mojego doświadczenia w małych firmach sensownie jest traktować WLAN jako przedłużenie LAN, ale dobrze odseparowane VLAN‑ami, z osobną siecią dla gości, z włączonym szyfrowaniem WPA2 lub WPA3 i wyłączonym otwartym dostępem. W dokumentacji technicznej, konfiguracji routerów czy punktów dostępowych producenci wprost używają pojęcia WLAN na określenie sekcji, w której konfiguruje się SSID, kanały radiowe, moc nadawania oraz zabezpieczenia. Moim zdaniem warto przyzwyczaić się do tego skrótu, bo pojawia się w materiałach egzaminacyjnych, w logach systemowych, a także w interfejsach zarządzania bardziej zaawansowanym sprzętem sieciowym. W skrócie: jeśli widzisz „W” przed LAN, to masz do czynienia z siecią lokalną realizowaną drogą radiową, a nie po kablu, i to jest właśnie poprawne skojarzenie.

Pytanie 14

Na ilustracji przedstawiono schemat rozmieszczenia elementów na stronie WWW, gdzie zazwyczaj umieszcza się stopkę strony?

A. 4

B. 2

C. 5

D. 1

Odpowiedź 5 jest poprawna ponieważ w typowym układzie strony WWW stopka umieszczana jest na samym dole strony i obejmuje całą jej szerokość. Stopka to sekcja strony internetowej która zawiera istotne informacje takie jak prawa autorskie polityka prywatności linki do mediów społecznościowych oraz dane kontaktowe. Jest to zgodne z konwencjami projektowania stron internetowych gdzie stopka pełni rolę miejsca do umieszczania informacji które są ważne lecz niekoniecznie powinny być umieszczone na samej górze strony. W praktyce projektowania stron internetowych stosuje się różne technologie takie jak HTML CSS oraz frameworki jak Bootstrap które umożliwiają łatwe tworzenie responsywnych stopek. Stopka powinna być dostępna na każdej podstronie co ułatwia nawigację użytkownikom. Takie rozmieszczenie poprawia również SEO poprzez umieszczanie linków wewnętrznych. Dbałość o szczegóły w projektowaniu stopki zgodnie z dobrymi praktykami UX/UI przyczynia się do lepszej użyteczności strony oraz zadowolenia użytkowników co jest kluczowe w nowoczesnym web designie.

Pytanie 15

Jaką kompetencję społeczną możemy przypisać osobie, która potrafi wyrażać swoje zdanie oraz argumentować swoje racje, nie naruszając przy tym granic własnych i innych ludzi?

A. Konformizm

B. Empatia

C. Akomodacja

D. Asertywność

Asertywność to umiejętność wyrażania swoich myśli, uczuć i przekonań w sposób pewny, ale z szacunkiem dla innych. Osoba asertywna potrafi argumentować swoje racje, nie naruszając przestrzeni emocjonalnej innych ludzi. Na przykład, w sytuacji konfliktu w pracy, osoba asertywna z łatwością przedstawi swoje stanowisko, jednocześnie słuchając argumentów drugiej strony. Asertywność jest kluczowa w budowaniu zdrowych relacji interpersonalnych, ponieważ pozwala na otwartą komunikację i wyrażanie potrzeb bez wywoływania antagonizmu. W praktyce asertywność jest często stosowana w negocjacjach, gdzie ważne jest, aby jasno przedstawiać swoje oczekiwania, ale również być otwartym na propozycje partnera. Standardy komunikacji interpersonalnej podkreślają rolę asertywności jako fundamentu dla efektywnego działania w zespole i rozwiązywania konfliktów. Właściwe stosowanie asertywności przyczynia się do tworzenia środowiska sprzyjającego współpracy i wzajemnemu szacunkowi.

Pytanie 16

Podczas tworzenia witryny internetowej zastosowano kod definiujący jej wygląd. Jaką szerokość przeznaczono na zawartość strony?

A. 640 px

B. 600 px

C. 2 px

D. 560 px

Definiowanie szerokości elementu w CSS jest kluczowym aspektem projektowania responsywnych stron internetowych. W przedstawionym kodzie CSS zauważamy definicję width 560px która określa szerokość elementu body. Ta wartość bezpośrednio przekłada się na dostępną przestrzeń dla treści wewnętrznej tego elementu. W praktyce definiowanie szerokości w pikselach pozwala na precyzyjne kontrolowanie układu strony co jest szczególnie istotne w kontekście projektowania interfejsów użytkownika. Takie podejście jest jednak najczęściej stosowane w środowiskach gdzie mamy pełną kontrolę nad urządzeniami wyświetlającymi stronę. W kontekście nowoczesnych praktyk często stosuje się jednostki względne lub techniki takie jak media queries aby zapewnić lepszą responsywność i elastyczność. Ważne jest także rozważanie dodatkowych aspektów takich jak marginesy i wypełnienia które mogą wpływać na rzeczywistą ilość dostępnej przestrzeni na treść. Właściwe zrozumienie i zastosowanie szerokości jest kluczowe dla tworzenia estetycznych i funkcjonalnych układów strony internetowej.

Pytanie 17

W języku CSS zdefiniowano następujące formatowanie:

 h1 i {color: red;}

Kolorem czerwonym zostanie zapisany

A. tylko tekst pochylony nagłówka pierwszego stopnia.

B. tylko tekst pochylony we wszystkich poziomach nagłówków.

C. cały tekst nagłówka pierwszego stopnia oraz pochylony tekst akapitu.

D. cały tekst nagłówka pierwszego stopnia oraz cały tekst pochylony, niezależnie od tego, w którym miejscu strony się znajduje.

Pozostałe odpowiedzi zawierają nieprawidłowe założenia co do tego, jak działają selektory w CSS. Odpowiedź sugerująca, że czerwonym kolorem zostanie zapisany tylko tekst pochylony we wszystkich poziomach nagłówków, nie jest prawidłowa, ponieważ kod CSS h1 i {color: red;} wyraźnie określa, że reguła dotyczy tylko tekstu pochylonego (<i>) wewnątrz nagłówka pierwszego stopnia (<h1>). Podobnie, odpowiedź mówiąca, że cały tekst nagłówka pierwszego stopnia oraz cały tekst pochylony, niezależnie od tego w którym miejscu strony się znajduje, będzie czerwony, jest niepoprawna. Ta reguła CSS nie wpływa na cały tekst nagłówka pierwszego stopnia, ani na pochylony tekst w innych miejscach dokumentu. Wreszcie, odpowiedź sugerująca, że cały tekst nagłówka pierwszego stopnia oraz pochylony tekst akapitu będą czerwone, jest również nieprawidłowa, ponieważ jak wcześniej wspomniano, reguła dotyczy tylko tekstu pochylonego umieszczonego bezpośrednio w nagłówku pierwszego stopnia. Rozróżnienie między różnymi rodzajami selektorów i zrozumienie, jak są interpretowane przez przeglądarkę, to kluczowe umiejętności w codziennym kodowaniu CSS.

Pytanie 18

Zestaw narzędzi oraz funkcji umożliwiający tworzenie aplikacji, który dodatkowo narzuca ramy wizualne aplikacji, jej strukturę oraz czasami wzór, według którego ma być stworzona aplikacja, to

A. biblioteka

B. middleware

C. komponent

D. framework

Framework to zestaw skomponowanych narzędzi oraz komponentów, które wspierają programistów w procesie tworzenia aplikacji poprzez dostarczenie struktury i organizacji kodu. Charakteryzuje się on tym, że określa pewne zasady, standardy oraz architekturę, co pozwala na łatwiejsze zarządzanie projektem i jego przyszłym rozwojem. Przykłady popularnych frameworków to Angular, React dla aplikacji webowych oraz Django, Ruby on Rails w przypadku aplikacji serwerowych. Frameworki często implementują wzorce projektowe, takie jak Model-View-Controller (MVC), które segregują logikę aplikacji na różne warstwy, co pozwala na lepszą organizację kodu. Dzięki zastosowaniu frameworków, programiści mogą skupić się na pisaniu logiki biznesowej, zamiast tracić czas na implementację podstawowych funkcji, ponieważ wiele z nich jest już dostarczanych przez framework. Umożliwia to również łatwiejsze wprowadzanie zmian oraz współpracę w zespołach programistycznych. Frameworki są zgodne z różnymi standardami, co zapewnia ich wszechstronność i szeroką akceptację w branży.

Pytanie 19

Który z protokołów umożliwia publikację strony internetowej na serwerze?

A. ICMP

B. NNTP

C. SMTP

D. FTP

To, że wybrałeś FTP, to strzał w dziesiątkę! Ten protokół jest super przydatny do przesyłania plików między komputerami, zwłaszcza kiedy chcemy wrzucić naszą stronę na serwer. Działa tak, że logujesz się zdalnie na serwer, przeglądasz, co tam jest, i możesz łatwo przesyłać, pobierać albo nawet usuwać pliki. Jak twórcy stron chcą się podzielić swoimi plikami, jak HTML czy CSS, to sięgają po programy FTP, takie jak FileZilla. W momencie, kiedy połączysz się z serwerem, praca z plikami staje się naprawdę prosta. Warto pamiętać, że są też bezpieczniejsze wersje tego protokołu, czyli SFTP lub FTPS, które szyfrują dane, co jest ważne, bo zwiększa bezpieczeństwo przesyłanych plików.

Pytanie 20

Który efekt został zaprezentowany na filmie?

A. Przenikanie zdjęć.

B. Zmiana jasności zdjęć.

C. Zwiększenie ostrości zdjęcia.

D. Zmniejszenie kontrastu zdjęcia.

Poprawnie wskazany efekt to przenikanie zdjęć, często nazywane też płynnym przejściem (ang. crossfade). Polega to na tym, że jedno zdjęcie stopniowo zanika, jednocześnie drugie pojawia się z narastającą widocznością. W praktyce technicznej realizuje się to najczęściej przez zmianę przezroczystości (opacity) dwóch warstw – jedna warstwa z pierwszym obrazem ma zmniejszaną wartość opacity z 1 do 0, a druga z kolejnym zdjęciem zwiększaną z 0 do 1. Na stronach WWW taki efekt robi się zwykle za pomocą CSS (transition, animation, keyframes) albo JavaScriptu, czasem z użyciem bibliotek typu jQuery czy gotowych sliderów. Moim zdaniem to jest jeden z podstawowych efektów, który warto umieć odtworzyć, bo pojawia się w galeriach, sliderach na stronach głównych, prezentacjach produktów czy prostych pokazach slajdów. W materiałach multimedialnych, np. w edycji wideo, dokładnie ten sam efekt nazywa się przejściem typu „cross dissolve” lub „fade”, i zasada działania jest identyczna – płynne nakładanie się dwóch klatek obrazu w czasie. Dobre praktyki mówią, żeby nie przesadzać z czasem trwania przenikania: zwykle 0,5–1,5 sekundy daje przyjemny, profesjonalny wygląd, bez wrażenia „zamulenia” interfejsu. Warto też pilnować spójności – jeśli na stronie używasz przenikania w jednym miejscu, dobrze jest utrzymać podobny styl animacji w innych elementach, żeby całość wyglądała konsekwentnie i nie rozpraszała użytkownika. W kontekście multimediów na WWW przenikanie jest też korzystne wydajnościowo, bo operuje głównie na właściwości opacity i transformacjach, które przeglądarki potrafią optymalizować sprzętowo.

Pytanie 21

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

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

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

C. oba jego wymiary ustawić w pikselach

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

Ustawienie szerokości obrazu w wartościach procentowych jest kluczowe dla zapewnienia responsywności strony internetowej. Gdy szerokość obrazu wyrażona jest w procentach, automatycznie dostosowuje się ona do szerokości kontenera, w którym się znajduje. To oznacza, że obraz będzie skalował się do rozmiaru ekranu użytkownika, co jest szczególnie ważne w kontekście urządzeń mobilnych oraz różnych rozdzielczości ekranów. Przykładem może być użycie stylu CSS: `img { width: 100%; height: auto; }`, co pozwala na zachowanie proporcji obrazu, jednocześnie dostosowując jego szerokość do kontenera. Tego rodzaju praktyki są zgodne z zasadami responsywnego projektowania (Responsive Web Design) i są zalecane przez standardy W3C. Dzięki takim rozwiązaniom użytkownik zyskuje lepsze doświadczenie, a strona wygląda estetycznie na różnych urządzeniach. Dobrą praktyką jest również testowanie strony na różnych ekranach, aby upewnić się, że wszystkie obrazy i inne elementy dostosowują się do zmieniających się warunków wyświetlania.

Pytanie 22

W języku CSS przedstawione w ramce stylizacje będą miały następujące zastosowanie. Kolorem czerwonym zostanie zapisany

h1 i {color: red;}

A. pełny tekst nagłówka pierwszego stopnia oraz cały tekst pochylony, bez względu na jego lokalizację na stronie

B. jedynie tekst pochylony w nagłówku pierwszego stopnia

C. kompletny tekst nagłówka pierwszego stopnia oraz pochylony tekst akapitu

D. wyłącznie tekst pochylony we wszystkich nagłówkach

W przypadku analizowania podejść do formatowania w CSS, ważne jest zrozumienie, jak działają selektory. W analizowanym kodzie CSS 'h1 i' oznacza selektor złożony, który odnosi się wyłącznie do elementu <i> zagnieżdżonego w <h1>. Nie jest prawdą, że selektor ten wpłynie na wszystkie poziomy nagłówków, ponieważ jest on ograniczony do <h1>. Błędne rozumienie struktury selektorów często prowadzi do niewłaściwego stosowania stylów, co jest powszechnym problemem wśród początkujących. Również stwierdzenie, że cały tekst nagłówka <h1> będzie czerwony jest błędne, ponieważ selektor 'h1 i' dotyczy tylko zagnieżdżonego tekstu pochylonego. Wreszcie, twierdzenie, że cały tekst pochylony na stronie zmieni kolor jest błędne, ponieważ selektor jest specyficzny dla kontekstu nagłówka <h1>. Takie błędy mogą prowadzić do nieprzewidywalnych wyników i trudności w utrzymaniu spójności stylistycznej na stronie, dlatego zrozumienie i odpowiednie stosowanie selektorów złożonych i zagnieżdżonych jest kluczowe w profesjonalnym projektowaniu stron internetowych.

Pytanie 23

Który z przedstawionych obrazów został przetworzony przy użyciu podanego stylu CSS?

A. Rys. D

B. Rys. B

C. Rys. C

D. Rys. A

Wybór Rys. A jako poprawnej odpowiedzi jest uzasadniony zastosowaniem właściwości CSS, które są użyte w stylu. Styl CSS określa padding na 5 pikseli, co oznacza, że wokół obrazu powinna być przestrzeń wynosząca dokładnie 5 pikseli. Właściwość border ustawia obramowanie na 1 piksel, w kolorze szarym i o stylu solid, co oznacza ciągłą linię otaczającą obraz. Z kolei border-radius o wartości 10 pikseli zaokrągla rogi obramowania, co nadaje całości bardziej zaokrąglony kształt. Wszystkie te cechy są widoczne na obrazie Rys. A. W praktyce stosowanie właściwości takich jak border-radius jest często używane w projektach webowych, aby uzyskać bardziej estetyczne i nowoczesne efekty wizualne. Zaokrąglone krawędzie są estetycznie przyjemniejsze dla użytkownika i mogą poprawić czytelność oraz odbiór wizualny strony. Znajomość tych właściwości CSS jest niezbędna dla każdego front-end developera, który dąży do tworzenia nowoczesnych i funkcjonalnych interfejsów użytkownika. Praktyczne zastosowanie tego stylu może być widoczne w projektach stron internetowych, aplikacjach sieciowych oraz w tworzeniu elementów UI, które zachowują spójność wizualną z resztą projektu.

Pytanie 24

Termin "front-end" w kontekście projektowania stron WWW odnosi się do

A. bazy danych z danymi publikowanymi na stronie

B. organizacji informacji na serwerze WWW

C. interfejsu witryny internetowej powiązanego z technologiami operującymi w przeglądarce internetowej

D. działania skryptów oraz aplikacji realizowanych po stronie serwera WWW

Front-end to wszystko to, co widzisz w przeglądarce, czyli ogólnie mówiąc, wygląd strony i to, jak się z nią bawisz. Mówię tu o kolorach, czcionkach, układzie czy różnych akcjach, które możesz wykonać. Technologie jak HTML, CSS i JavaScript są tu na czołowej pozycji, bo to dzięki nim strona jest taka interaktywna i przyjemna dla oka. Przykłady? Budowa responsywnych interfejsów, które zmieniają rozmiar na różnych ekranach, albo skrypty, które potrafią zmieniać treści na stronie bez przeładowania jej. Dobrze jest też pomyśleć o tym, żeby strona ładowała się jak najszybciej, bo to wpływa na to, jak użytkownicy będą ją odbierać. A jeśli znasz nowe frameworki, jak React czy Angular, to naprawdę ułatwia stworzenie bardziej złożonych aplikacji webowych, co w dzisiejszych czasach jest mega ważne.

Pytanie 25

W poniższym kodzie CSS zdefiniowano cztery klasy formatowania, które następnie zostały użyte do formatowania paragrafów. Efekt widoczny na rysunku powstał po zastosowaniu klasy o nazwie:

.format1 {    text-decoration: overline;     }
.format2 {    text-decoration: line-through; }
.format3 {    text-decoration: underline;    }
.format4 {    text-decoration: none;         }

formatowanie

A. format3

B. format1

C. format2

D. format4

Odpowiedź z klasy format2 jest trafna, bo definiuje styl text-decoration line-through, który służy do przekreślenia tekstu. W CSS ta właściwość jest mega przydatna, bo pozwala zmieniać wygląd tekstu, dodając różne linie, takie jak podkreślenie czy nadkreślenie. Przekreślenie stosuje się często, żeby pokazać, że coś zostało usunięte lub jest już nieaktualne. Na przykład w sklepach online, gdzie można oznaczyć przecenione ceny. Według standardów CSS, warto stawiać na prostotę i czytelność definicji stylów, bo to ułatwia później zrozumienie kodu dla innych programistów. Takie podejście jest zgodne z dobrymi praktykami kodowania, które mówią, że kod powinien być łatwy do zrozumienia. A co ważne, jeśli chodzi o dostępność, to przekreślony tekst jest znany narzędziom wspierającym, jak czytniki ekranowe, co zwiększa dostępność treści dla osób z niepełnosprawnościami.

Pytanie 26

Który z podanych kodów XHTML sformatuje tekst zgodnie z określonym schematem?

A. Odpowiedź B

B. Odpowiedź C

C. Odpowiedź D

D. Odpowiedź A

Poprawna odpowiedź D zawiera poprawne znaczniki XHTML i HTML, które umożliwiają formatowanie tekstu według wzoru. W pierwszym wierszu tekst Ala ma kota używa znacznika b do pogrubienia słowa kota, co jest zgodne ze standardami, ponieważ b jest szeroko stosowanym tagiem HTML do semantycznego pogrubienia tekstu. Następnie użyty jest znacznik br do wstawienia przerwy w linii, co sprawia, że kolejna część tekstu pojawia się w nowej linii, odzwierciedlając układ zaprezentowany na obrazku. W drugim wierszu tekst a kot ma Alę, znacznik i został użyty do pochylania słowa kot, co jest zgodne z praktykami formatowania tekstu, gdzie i oznacza kursywę. Zamknięcie całego tekstu w znacznikach p paragrafu zapewnia również odpowiedni odstęp i formatowanie, co jest zgodne z semantycznym i strukturalnym organizowaniem treści w dokumencie XHTML. Podejście to odzwierciedla dobre praktyki kodowania, w tym stosowanie właściwych znaczników dla odpowiednich stylów oraz zapewnienie kompatybilności z różnymi przeglądarkami.

Pytanie 27

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

A. polskich liter, takich jak: ś, ć, ń, ó, ą

B. znaków specjalnych dla języka kodu strony

C. symboli matematycznych

D. znaków zarezerwowanych dla języka opisu strony

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

Pytanie 28

W języku HTML, aby uzyskać efekt taki jak na przykładzie, należy zastosować konstrukcję

Duży tekst zwykły tekst

A. <p><big>Duży tekst</big> zwykły tekst</p>

B. <p><big>Duży tekst</p> zwykły tekst

C. <p><strike>Duży tekst zwykły tekst</p>

D. <p><strike>Duży tekst</strike> zwykły tekst</p>

W języku HTML, użycie znacznika <big> jest właściwym sposobem na zwiększenie rozmiaru tekstu, co w efekcie pozwala na wyróżnienie go w kontekście pozostałej treści. Znacznik ten jest jednak przestarzały i niezalecany w nowoczesnych praktykach, ponieważ CSS oferuje bardziej elastyczne i zaawansowane metody stylizacji. Przykładowo, zamiast stosować <big>, można wykorzystać stylizację CSS, aby uzyskać podobny efekt, co zwiększa kontrolę nad wyglądem elementów. Ponadto, zastosowanie znacznika <p> jako kontenera dla tekstu zapewnia semantyczną strukturę dokumentu, co jest zgodne z wytycznymi W3C i poprawia dostępność. Przykładowo, użycie CSS może wyglądać tak: <p style='font-size: 1.5em;'>Duży tekst</p>zwykły tekst, co jest bardziej zalecane dla zachowania zgodności ze standardami. Warto pamiętać, że unikanie przestarzałych znaczników i stosowanie CSS zwiększa elastyczność i estetykę projektów HTML.

Pytanie 29

Termin „front-end” w kontekście budowy stron internetowych odnosi się do

A. organizacji danych na serwerze WWW

B. bazy danych zawierającej informacje prezentowane na stronie

C. działania skryptów i aplikacji realizowanych po stronie serwera WWW

D. interfejsu witryny internetowej powiązanego z technologiami działającymi w przeglądarkach internetowych

Pojęcie „front-end” odnosi się do części aplikacji webowej, która jest widoczna dla użytkownika i z którą użytkownik może wchodzić w interakcję. Front-end obejmuje wszystkie elementy interfejsu użytkownika, takie jak układ graficzny, teksty, obrazki oraz wszelkie interaktywne elementy, takie jak przyciski i formularze. Technologie używane w front-endzie obejmują HTML, CSS oraz JavaScript, które są standardami stosowanymi w tworzeniu stron internetowych. Dobrze zaprojektowany front-end nie tylko wygląda estetycznie, ale również jest responsywny, co oznacza, że dostosowuje się do różnych rozmiarów ekranów, co jest istotne w dobie urządzeń mobilnych. Przykłady zastosowania tej wiedzy obejmują tworzenie stron internetowych, rozwijanie aplikacji webowych oraz optymalizację doświadczeń użytkowników poprzez testy A/B oraz analizy UX. Dobre praktyki w front-endzie to także dostępność (wcag) oraz optymalizacja wydajności, co przekłada się na lepsze doświadczenia użytkowników oraz wyższe pozycje w wynikach wyszukiwania.

Pytanie 30

Który z znaczników ma na celu organizację struktury tekstu w HTML?

A. <style>

B. <h6>

C. <head>

D. <u>

Znacznik <u> służy do podkreślenia tekstu, co nie ma nic wspólnego z tworzeniem hierarchii treści. W dzisiejszych standardach HTML, podkreślenie tekstu powinno być używane bardzo ostrożnie, ponieważ może wprowadzać w błąd czytelników i wyszukiwarki, sugerując, że tekst jest linkiem do innej strony. W praktyce, znaczenie podkreślenia powinno ograniczać się do przypadków, gdzie jest to konieczne, a nie stać się domyślnym sposobem na wyróżnienie treści. Z kolei znacznik <head> pełni rolę sekcji nagłówkowej dokumentu HTML, w której znajduje się metadane, takie jak tytuł, skrypty czy style. Nie ma on żadnego zastosowania w kontekście budowania hierarchii tekstu, ponieważ nie wpływa na sposób, w jaki treść jest wyświetlana na stronie. Ponadto, znacznik <style> jest używany do definiowania stylów CSS, co również nie ma związku z hierarchią tekstu. Typowe błędy myślowe, które prowadzą do takich niepoprawnych wniosków, mogą wynikać z mylenia celów różnych znaczników HTML. Każdy znacznik ma swoje specyficzne funkcje, a ich niewłaściwe użycie może prowadzić do nieefektywnej struktury strony oraz negatywnie wpływać na doświadczenia użytkowników i SEO. Zrozumienie roli każdego elementu w HTML jest kluczowe dla tworzenia przejrzystych i funkcjonalnych stron internetowych.

Pytanie 31

Do stworzenia stron internetowych w sposób graficzny należy zastosować

A. program do przeglądania stron

B. oprogramowanie MS Office Picture Manager

C. aplikację typu WYSIWYG

D. narzędzie do edycji CSS

Programy typu WYSIWYG (What You See Is What You Get) to narzędzia, które umożliwiają użytkownikom tworzenie stron internetowych w sposób wizualny, bez konieczności pisania kodu HTML czy CSS. Użytkownik może przeciągać i upuszczać elementy, takie jak tekst, obrazy czy formularze, a program automatycznie generuje odpowiedni kod. Przykładami popularnych programów WYSIWYG są Adobe Dreamweaver oraz Webflow, które posiadają zaawansowane funkcje, takie jak responsywność oraz integrację z systemami zarządzania treścią. W kontekście standardów webowych, programy WYSIWYG często oferują zgodność z aktualnymi wytycznymi, takimi jak HTML5 i CSS3, co pozwala na tworzenie nowoczesnych, atrakcyjnych wizualnie stron internetowych. Dla osób, które nie mają doświadczenia w programowaniu, takie narzędzia są szczególnie cenne, ponieważ umożliwiają łatwe tworzenie profesjonalnych witryn, które mogą być optymalizowane pod kątem SEO, co jest kluczowe w dzisiejszym świecie online. Dzięki programom WYSIWYG, także osoby z ograniczonymi umiejętnościami technicznymi mogą skutecznie tworzyć i edytować swoje strony, co znacznie przyspiesza proces projektowania.

Pytanie 32

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 wyświetli się jako tło dla listy nienumerowanej

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

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 33

W jaki sposób można ustawić w CSS wygląd hiperłącza, aby linki nieodwiedzone miały kolor żółty, a odwiedzone kolor zielony?

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

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

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

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

Aby zdefiniować w języku CSS formatowanie hiperłączy, które różnią się kolorem w zależności od ich stanu (odwiedzone lub nieodwiedzone), należy zastosować odpowiednie selektory CSS. W standardzie CSS wyróżniamy kilka pseudo-klas, które pozwalają na stylizację linków: :link, :visited, :hover, oraz :active. Pseudo-klasa :link odnosi się do linków, które jeszcze nie zostały odwiedzone przez użytkownika, a jej stylizację możemy zdefiniować za pomocą a:link {color: yellow;}. Z kolei pseudo-klasa :visited odnosi się do linków, które zostały już odwiedzone, a ich kolor możemy ustawić jako zielony, co realizuje reguła a:visited {color: green;}. W ten sposób, gdy użytkownik przegląda stronę, linki, które jeszcze nie były klikane, będą wyświetlane w kolorze żółtym, natomiast te, które zostały odwiedzone, zmienią swój kolor na zielony. To podejście jest zgodne z zasadami dostępności i użyteczności w Internecie, a także spełnia wymagania WCAG (Web Content Accessibility Guidelines), które zachęcają do jasnego oznaczania stanu linków. Przykład zastosowania CSS w pliku stylów może wyglądać następująco: .linki {text-decoration: none;} a:link {color: yellow;} a:visited {color: green;}. Takie podejście pozwala na intuicyjne odczytanie stanu linku przez użytkowników, co zwiększa komfort korzystania z serwisów internetowych.

Pytanie 34

W języku HTML, aby nadać dokumentowi tytuł "Moja strona", który będzie wyświetlany na zakładce przeglądarki internetowej, należy posłużyć się zapisem

A. <head>Moja strona</head>

B. <meta title="Moja strona">

C. <title>Moja strona</title>

D. <meta name="title" content="Moja strona" />

Element <title> jest absolutnie podstawą, jeśli chodzi o definiowanie tytułu strony w HTML. Umieszcza się go zawsze wewnątrz sekcji <head>, a jego zawartość jest tym, co wyświetla się na karcie przeglądarki. Moim zdaniem to jedna z tych rzeczy, które – choć wydają się drobiazgiem – mają duży wpływ na użyteczność i pozycjonowanie strony. Jeśli budujesz własną stronę lub pracujesz przy większym projekcie, warto pamiętać, żeby tytuł był unikalny i możliwie krótki, bo to właśnie on pojawia się również w wynikach wyszukiwania Google. Organizacje takie jak W3C wyraźnie podkreślają, że <title> jest wymagany w każdym dokumencie HTML5. Często też spotykałem się z przypadkami, gdzie ktoś zapominał o tym tagu i potem dziwił się, że przeglądarka pokazuje „Untitled” albo po prostu adres URL na pasku zakładki. Z praktyki – zawsze warto od razu na początku pracy nad stroną ustawić sensowny tytuł, bo potem łatwo o tym zapomnieć. A jak już masz kilka kart z otwartymi projektami, czy klient patrzy na podgląd w wyszukiwarce – profesjonalnie przygotowany tytuł robi robotę. Pamiętaj też, że <title> nie jest miejscem na wrzucanie dodatkowego kodu HTML, tylko sam tekst. Prosta sprawa, a oszczędza potem sporo nerwów.

Pytanie 35

Poniżej przedstawiono fragment kodu języka HTML. Jest on definicją listy:

<ol>
   <li>punkt 1</li>    <li>punkt 2</li>
   <ul>
     <li>podpunkt1</li>
     <ul>    <li>podpunkt2</li>  <li>podpunkt3</li>  </ul>
   </ul>
   <li>punkt3</li>
 </ol>

punkt 1
punkt 2
- podpunkt1
- podpunkt2
- podpunkt3
punkt3

punkt 1
punkt 2
punkt3
- podpunkt1
- podpunkt2
- podpunkt3

punkt 1
punkt 2
- podpunkt1
  - podpunkt2
  - podpunkt3
punkt3

punkt 1
punkt 2
1. podpunkt1
  - podpunkt2
  - podpunkt3
punkt3

A. A.

B. B.

C. D.

D. C.

Twoja odpowiedź niestety nie była prawidłowa. Kluczową częścią zadania była interpretacja struktury kodu HTML prezentującej listę numerowaną (<ol>) z trzema elementami listy (<li>). W szczególności, zwróć uwagę na to, że w drugim elemencie listy znajduje się zagnieżdżona lista nieuporządkowana (<ul>) z trzema podpunktami. Fakt, że podpunkty są oznaczone kropkami, jest charakterystyczny dla listy nieuporządkowanej, co sugerowało, że prawidłową odpowiedzią jest C. W przypadku innych odpowiedzi, nie odzwierciedlały one prawidłowo struktury przedstawionego kodu, co mogło wynikać z niezrozumienia znaczenia poszczególnych tagów HTML. Pamiętaj, że w HTML istotne jest zrozumienie, jak tagi są zagnieżdżone w sobie, tworząc strukturę strony. Przy dalszej nauce zwracaj uwagę na to, jak poszczególne elementy HTML są ze sobą powiązane.

Pytanie 36

Najprostszy sposób zamiany obiektu oznaczonego cyfrą 1 na obiekt oznaczony cyfrą 2 polega na

A. animowaniu obiektu.

B. narysowaniu docelowego obiektu.

C. zmianie warstwy obiektu.

D. geometrycznym transformowaniu obiektu.

Wybrałeś poprawną odpowiedź, która jest 'geometrycznym transformowaniem obiektu'. Kiedy mówimy o transformacji geometrycznej, mamy na myśli różne operacje, które można wykonać na obiektach, takie jak skalowanie, obracanie i przesuwanie. W przypadku obiektu oznaczonego numerem 1 i numerem 2 na obrazku, najprostszym sposobem na przekształcenie jednego w drugi jest używanie transformacji geometrycznej. Obiekt numer 2 jest większy i obrócony w stosunku do obiektu numer 1. Dzięki transformacjom geometrycznym mogliśmy osiągnąć ten efekt, skalując i obracając obiekt numer 1. Transformacje geometryczne są podstawą wielu operacji w dziedzinach takich jak grafika komputerowa, projektowanie CAD, animacja, a także w wielu innych dziedzinach technologii i nauki.

Pytanie 37

Jakie zasady dotyczące tworzenia sekcji w języku HTML są właściwe?

A. W sekcji <head> można ustalać szablon strony za pomocą znaczników <div>

B. W sekcji <head> znajduje się sekcja <body>

C. W sekcji <head> nie wolno umieszczać kodu CSS, tylko odniesienie do pliku CSS

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

Wybór odpowiedzi, że w części <head> mogą wystąpić znaczniki <meta>, <title>, <link> jest jak najbardziej poprawny. Część <head> dokumentu HTML jest kluczowa dla określenia właściwości oraz meta-informacji o stronie. Znacznik <meta> służy do przechowywania danych o stronie, takich jak opis, słowa kluczowe czy konfiguracja kodowania. Znacznik <title> definiuje tytuł strony, który jest wyświetlany na karcie przeglądarki oraz w wynikach wyszukiwania, co jest istotne dla SEO. Z kolei znacznik <link> pozwala na połączenie dokumentu HTML z zewnętrznymi arkuszami stylów CSS lub innymi zasobami. Stosowanie tych znaczników jest zgodne z obowiązującymi standardami W3C oraz najlepszymi praktykami w zakresie tworzenia stron internetowych. Dobrze zorganizowana sekcja <head> wpływa na efektywność i widoczność strony w wyszukiwarkach, a także na jej ogólną jakość. Przykładem użycia może być dodanie metadanych do strony internetowej, co pozwala na lepsze pozycjonowanie w wyszukiwarkach oraz ułatwia zarządzanie stylem poprzez odwołanie do pliku CSS.

Pytanie 38

Które z pól edycyjnych zostało wystylizowane według poniższego wzoru, zakładając, że pozostałe atrybuty pola mają wartości domyślne, a użytkownik wpisał imię Krzysztof w przeglądarce?

input {
    padding: 10px;
    background-color: Teal;
    color: white;
    border: none;
    border-radius: 7px;
}

A. Pole 3

B. Pole 1

C. Pole 2

D. Pole 4

Pole 2 zostało sformatowane zgodnie z podanym stylem CSS Ponieważ właściwość padding została ustawiona na 10px pole tekstowe ma wewnętrzny odstęp wokół zawartości co sprawia że tekst nie dotyka bezpośrednio krawędzi pola Kolor tła ustawiony na Teal odróżnia to pole od innych które mogą mieć domyślne kolory tła Biały kolor tekstu zapewniony przez właściwość color sprawia że tekst jest czytelny na ciemnym tle Brak obramowania dzięki border none powoduje że pole nie ma widocznej linii wokół siebie co nadaje mu czysty wygląd Zaokrąglenie krawędzi ustawione na 7px border-radius daje bardziej nowoczesny wygląd a także ułatwia integrację z różnymi projektami interfejsu użytkownika Takie podejście do stylizacji elementów formularzy jest zgodne z nowoczesnymi trendami projektowania stron internetowych gdzie używane są łagodne zaokrąglenia oraz odpowiednio dobrane kontrasty kolorystyczne W praktyce takie style są nie tylko estetyczne ale także poprawiają użyteczność interfejsu poprzez zwiększenie czytelności i intuicyjności obsługi formularzy Warto również zauważyć że zastosowanie CSS do formatowania elementów pozwala na zachowanie spójności wyglądu na różnych stronach oraz łatwą modyfikację w przyszłości

Pytanie 39

Na ilustracji przedstawiono strukturę bloków na stronie internetowej. Który z poniższych fragmentów CSS odpowiada takim ustawieniom? (Dla uproszczenia pominięto właściwości dotyczące koloru tła, wysokości oraz czcionki)

A. #pierwszy {float:left; width:30%;} #drugi {float:left; width:70%;} #trzeci {float:left; width:70%;} #czwarty {clear:both; }

B. #pierwszy{float:left; width:30%;} #drugi {clear:both; width:70%;} #trzeci {clear:both; width:70%;} #czwarty {float:left; width:100%;}

C. #pierwszy { width: 30%; } #drugi { width: 70%; } #trzeci { width: 70%; } #czwarty { width: 100%; }

D. #pierwszy {float:left; width:30%; } #drugi {clear:both; width:70%; } #trzeci {float:left; width:70%; } #czwarty {clear:both; }

Odpowiedź pierwsza jest prawidłowa, gdyż prawidłowo wykorzystuje właściwość float w stylach CSS, aby uzyskać pożądany układ bloków na stronie internetowej. Float pozwala elementom przemieszczać się na lewą lub prawą stronę kontenera, co jest kluczowe w tworzeniu layoutów. W tym przypadku #pierwszy, #drugi i #trzeci mają ustawione float:left, co umożliwia ich równoległe ustawienie w poziomie aż do momentu, gdy szerokości kontenera są zapełnione. Następnie blok #czwarty wymaga clear:both, aby przemieszczać się poniżej wszystkich poprzednich elementów z ustawionym float. To powszechna technika stosowana w projektowaniu responsywnych układów stron, gdzie równoległe pozycjonowanie elementów pozwala na efektywne wykorzystanie przestrzeni. Float w połączeniu z odpowiednimi szerokościami procentowymi pomaga tworzyć elastyczne projekty, które dobrze skalują się na różnych urządzeniach, co jest zgodne z nowoczesnymi standardami web developmentu. Ponadto zrozumienie działania float i clear jest fundamentem przy tworzeniu klasycznych layoutów typu grid przed wprowadzeniem nowoczesnych rozwiązań takich jak Flexbox czy CSS Grid, co pokazuje zrozumienie podstawowych zasad CSS.

Pytanie 40

Witryna internetowa zawiera poziome menu w formie listy punktowanej. Aby elementy tej listy mogły być wyświetlane w jednej linii, należy przypisać selektorowi li właściwość

A. position

B. display

C. outline

D. text-align

Ustawienie właściwości 'display' dla selektora 'li' jest kluczowe, aby elementy listy mogły być wyświetlane w jednej linii. Właściwość ta określa, w jaki sposób dany element powinien być renderowany w kontekście modelu box. Aby uzyskać efekt poziomego menu, warto zastosować 'display: inline;' lub 'display: inline-block;'. Użycie 'inline' sprawia, że elementy nie zajmują całej szerokości dostępnej wiersza, a 'inline-block' umożliwia również ustawienie szerokości i wysokości. W kontekście dobrych praktyk projektowania stron internetowych, zastosowanie takiego podejścia pozwala na osiągnięcie większej elastyczności w układzie, ułatwiając jednocześnie stylizację elementów, co jest zgodne z zasadami responsywnego web designu. Warto również pamiętać o użyciu marginesów i paddingów, aby zapewnić odpowiednią przestrzeń między elementami menu, co przyczyni się do lepszej czytelności i estetyki strony.

Rozpocznij nowy egzamin

Powrót do strony głównej