Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Rozpoczęcie: 12 września 2026 20:41
Zakończenie: 12 września 2026 21:24
Egzamin zdany!
Wynik: 36/40 punktów (90,0%)
Wymagane minimum: 20 punktów (50%)
Twój wynik na tle innych
Twój wynik jest lepszy niż 90% podejść do kwalifikacji INF.03.
Porównanie z 41218 zakończonymi podejściami do tej kwalifikacji (dane zbiorcze, bez wyników indywidualnych).
Zachowaj ten wynik na koncie
Załóż darmowe konto albo zaloguj się - ten egzamin przypiszemy do Twojego konta, więc wrócisz do swoich błędów, będziesz śledzić postęp i dostaniesz powtórki dobrane do Twoich odpowiedzi.
Poprawna odpowiedź. Znak @ czyta się po angielsku „at” (czyli „przy/na”) - stąd w adresach e-mail jan@firma.pl mówi się „jan AT firma”. Po polsku popularnie nazywa się go „małpą”. Dlatego po angielsku to „at”.
Pytanie 2
Które znaczniki HTML wyświetlą tekst „Dobre strony mojej strony” w JEDNYM wierszu, jeśli nie zastosowano żadnych reguł CSS?
Poprawna odpowiedź. Domyślnie (bez CSS) tekst zostanie w jednym wierszu tylko wtedy, gdy użyjemy elementów LINIOWYCH - takim jest <span>, który nie wymusza nowej linii. Dlatego dwa <span> jeden po drugim wyświetlą się obok siebie w tym samym wierszu. Dlatego poprawny jest wariant ze <span>.
Pytanie 3
Strona internetowa została stworzona w języku XHTML. Który z poniższych kodów reprezentuje realizację zaprezentowanego fragmentu strony, jeśli nie zdefiniowano żadnych stylów CSS?
A. A
B. BTwoja odpowiedź
C. C
D. D
Poprawna odpowiedź. Odpowiedź B jest prawidłowa, ponieważ wykorzystuje znaczniki zgodne ze standardem XHTML do prawidłowego formatowania tekstu. W XHTML zaleca się używanie semantycznych znaczników takich jak <h1> dla nagłówków, co poprawia strukturę dokumentu i ułatwia jego interpretację przez przeglądarki oraz inne urządzenia czytające. Dodatkowo użycie znacznika <p> do oddzielenia akapitów jest zgodne z zaleceniami dotyczącymi dostępności i poprawności kodu. To również sprzyja lepszemu SEO, ponieważ wyszukiwarki lepiej rozumieją znaczenie semantycznych znaczników. Warto również wspomnieć o dobrych praktykach, takich jak zamykanie znaczników oraz stosowanie małych liter w nazwach znaczników, co zwiększa kompatybilność z przeglądarkami oraz zgodność ze standardami W3C. XHTML, jako język oparty na XML, wymaga bardziej restrykcyjnej składni, co jest spełnione w kodzie przedstawionym w odpowiedzi B. Dzięki temu zapewnia się lepszą walidację i niezawodność działania strony internetowej.
Pytanie 4
Który z rysunków obrazuje efekt działania przedstawionego fragmentu kodu HTML?
Poprawna odpowiedź. Super, wybrałeś właściwą odpowiedź! To rysunek C. Kod HTML to taki jakby zestaw narzędzi, który pozwala tworzyć różne układy stron internetowych, w tym tabelki. W tym przypadku mamy do czynienia z tabelą, która ma dwa wiersze i dwie kolumny. Zauważ, że pierwsza komórka z tekstem 'pierwszy' zajmuje miejsce aż na dwa wiersze, dzięki atrybutowi rowspan='2'. To oznacza, że można ją rozciągnąć w pionie, co zmienia układ całej tabeli. W pierwszym wierszu obok tej komórki jest komórka z tekstem 'drugi', a w drugim wierszu mamy jedynie 'trzeci', bo obok 'pierwszy' już jest zajęte miejsce. Dzięki temu, rysunek C dokładnie pokazuje, jak to wszystko działa. Pamiętaj, że umiejętność pracy z tabelami w HTML jest naprawdę ważna, jeśli chcesz tworzyć estetyczne i funkcjonalne strony.
Pytanie 5
Jak nazywa się nadrzędny formularz służący do nawigacji między formularzami i kwerendami bazy?
A. zagnieżdżonymTwoja odpowiedź
B. głównym
C. sterującymPoprawna odpowiedź
D. pierwotnym
Niepoprawna odpowiedź. Pozostałe nazwy nie są poprawne w tym znaczeniu. „Główny”, „pierwotny” czy „zagnieżdżony” nie określają formularza-menu (zagnieżdżony to formularz osadzony w innym). Nadrzędny formularz nawigacyjny to formularz sterujący.
Pytanie 6
W HTML, aby ustawić tytuł dokumentu na "Moja strona", który pojawi się na karcie przeglądarki internetowej, należy użyć zapisu
A. <title>Moja strona</title>Twoja odpowiedź
B. <meta name="title" content="Moja strona">
C. <head>Moja strona</head>
D. <meta title="Moja strona">
Poprawna odpowiedź. Element <title> w HTML jest naprawdę ważny, bo to właśnie on ustala, co zobaczysz na zakładce w przeglądarce. Powinien być umieszczony w sekcji <head>, co jest zgodne z tym, co mówi W3C. Poprawny zapis wygląda tak: <title>Moja strona</title>, co sprawia, że "Moja strona" będzie się pokazywać jako tytuł w przeglądarce. Tytuł strony ma spore znaczenie dla SEO, bo wpływa na to, jak strona jest pozycjonowana w wynikach wyszukiwania. Warto, żeby tytuł był krótki, ale jednocześnie zawierał istotne informacje, a najlepiej, żeby nie miał więcej niż 60 znaków, żeby się nie obcinał w wynikach. Fajnie też umieścić w tytule kluczowe słowa, które opisują, o czym jest strona, bo to może zwiększyć jej atrakcyjność i CTR. Dobrze skonstruowany tytuł to też lepsza dostępność, bo ułatwia użytkownikom poruszanie się i orientowanie w otwartych zakładkach.
Pytanie 7
Który z poniższych kodów HTML odpowiada opisanej tabeli? (W celu uproszczenia zrezygnowano z zapisu stylu obramowania tabeli oraz komórek)
A. Odpowiedź D
B. Odpowiedź A
C. Odpowiedź BTwoja odpowiedź
D. Odpowiedź C
Poprawna odpowiedź. Odpowiedź B jest prawidłowa, ponieważ wykorzystuje atrybut rowspan do połączenia dwóch wierszy w jednej kolumnie tabeli. HTML zapewnia atrybuty rowspan i colspan, które umożliwiają połączenie wielu komórek tabeli w jedną, co jest niezbędne w sytuacjach, gdy dane muszą być przedstawione w sposób bardziej przejrzysty i zwarty. W przedstawionej tabeli labelka Telefon jest wspólna dla dwóch numerów, co skutkuje koniecznością użycia rowspan=2 w komórce, która łączy dwa wiersze. Ta konstrukcja jest zgodna z dobrymi praktykami tworzenia semantycznie poprawnych i wizualnie uporządkowanych tabel w dokumentach HTML. Zastosowanie atrybutu rowspan może poprawić czytelność tabel, co jest szczególnie przydatne przy prezentacji złożonych danych w aplikacjach biznesowych czy raportach. Użycie tego podejścia pozwala na bardziej efektywne wykorzystanie przestrzeni w tabeli i jest zgodne ze standardami W3C, które promują semantykę i dostępność w sieci.
Pytanie 8
Jak wygląda prawidłowy zapis samozamykającego się znacznika w zgodzie ze standardem języka XHTML, który odpowiada za łamanie linii?
A. <br />Twoja odpowiedź
B. </ br>
C. </br/>
D. <br> </br>
Poprawna odpowiedź. Odpowiedź <br /> jest prawidłowym zapisem samozamykającego się znacznika w standardzie XHTML. XHTML, czyli eXtensible HyperText Markup Language, wymaga, aby znaczniki były poprawnie zamknięte. W przypadku znaczników, które nie mają zawartości, jak <br />, stosuje się specjalną składnię. Oznaczenie <br /> wskazuje na przełamanie linii w dokumencie HTML. Ważne jest, aby podać ukośnik przed zakończeniem znacznika, co jest zgodne z zasadami XHTML. Przykładowo, w dokumentach XHTML, prawidłowe użycie <br /> może wyglądać tak: <p>Tekst przed łamaniem linii.<br />Tekst po łamaniu linii.</p>. Przestrzeganie tych zasad zapewnia, że dokumenty będą poprawnie interpretowane przez przeglądarki oraz będą zgodne z standardami W3C, co jest kluczowe dla zachowania wysokiej jakości kodu oraz jego dostępności.
Pytanie 9
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 niebieskim, tekst w kolorze czerwonym, marginesy zewnętrzne o wartości 40px
B. tło w kolorze czerwonym, tekst w kolorze niebieskim, marginesy wewnętrzne o wartości 40px
C. tło w kolorze czerwonym, tekst w kolorze niebieskim, marginesy zewnętrzne o wartości 40pxTwoja odpowiedź
D. tło w kolorze niebieskim, tekst w kolorze czerwonym, marginesy wewnętrzne o wartości 40px
Poprawna odpowiedź. 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 10
Która para znaczników HTML daje (bez stylów CSS) taki sam efekt wizualny - pogrubienie tekstu?
A.<meta> i <title>
B.<b> i <big>
C.<b> i <strong>Twoja odpowiedź
D.<p> i <h2>
Poprawna odpowiedź. Znaczniki <b> i <strong> domyślnie dają ten sam efekt wizualny - pogrubienie tekstu. Różnią się jednak znaczeniem (semantyką): <b> to czysto wizualne pogrubienie, a <strong> oznacza treść WAŻNĄ, co wykorzystują m.in. czytniki ekranu i wyszukiwarki. Podobna para to <i> i <em> (pochylenie). Dlatego wizualnie identyczny efekt daje para <b> i <strong>.
Pytanie 11
Dla którego akapitu zastosowano przedstawioną właściwość stylu CSS?
border-radius: 20%;
To jest paragraf, To jest paragraf, To jest paragraf, To jest paragraf, To jest paragraf
A
To jest paragraf, To jest paragraf, To jest paragraf, To jest paragraf, To jest paragraf
B
To jest paragraf, To jest paragraf, To jest paragraf, To jest paragraf, To jest paragraf
C
To jest paragraf, To jest paragraf, To jest paragraf, To jest paragraf, To jest paragraf
D
A. C.
B. A.
C. D.
D. B.Twoja odpowiedź
Poprawna odpowiedź. Dobra robota! Zgadłeś, że chodziło o akapit z tą właściwością CSS 'border-radius: 20%;'. Ta właściwość faktycznie zaokrągla rogi elementów, co wygląda super i sprawia, że strona jest bardziej przyjemna dla oka. Widzisz, akapit B ma te zaokrąglone rogi, a to dokładnie to, co daje nam ten styl CSS. W rzeczywistości, tylko B jest tak zrobiony na obrazku, więc wiesz, że tam zastosowano 'border-radius'. Ta wartość '20%;' mówi nam, jak mocno rogi mają być zaokrąglone. Takie rzeczy są ważne w CSS, żeby strony wyglądały estetycznie i nowocześnie.
Pytanie 12
Jakie jest poprawne zapisanie tagu HTML?
<a href="#hobby">przejdź</a>
A. jest błędny, w atrybucie href powinien być podany adres URL
B. jest błędny, użyto niewłaściwego znaku # w atrybucie href
C. jest poprawny, po kliknięciu w odnośnik strona zostanie przewinięta do elementu o nazwie "hobby"Twoja odpowiedź
D. jest prawidłowy, po kliknięciu w odnośnik otworzy się strona pod adresem "hobby"
Poprawna odpowiedź. W znaczniku HTML a z atrybutem href='#hobby' zastosowano tzw. kotwicę fragmentu strony. Jest to popularna technika używana do bezpośredniego przenoszenia użytkownika do określonej części strony internetowej. Znak hash (#) wskazuje, że link odwołuje się do elementu o identyfikatorze hobby w obrębie tej samej strony. Tego rodzaju odnośniki są szeroko stosowane w długich dokumentach gdzie szybka nawigacja między sekcjami poprawia doświadczenie użytkownika. Aby kod działał poprawnie na stronie musi istnieć element z atrybutem id='hobby'. To działanie jest zgodne ze standardami HTML i jest zalecane w projektowaniu dostępnych i przyjaznych dla użytkownika aplikacji internetowych. Warto także pamiętać o stosowaniu opisowych identyfikatorów co ułatwia czytelność kodu i jego późniejsze utrzymanie. Praktyka ta jest zgodna z najlepszymi praktykami w zakresie użyteczności i dostępności stron internetowych co może również wpłynąć pozytywnie na SEO poprzez poprawę struktury strony.
Pytanie 13
Która reguła dotycząca sekcji <head> w HTML jest poprawna?
A. w sekcji <head> definiuje się szablon strony znacznikami <div>
B. w sekcji <head> zawiera się sekcja <body>
C. w sekcji <head> mogą wystąpić znaczniki <meta>, <title>, <link>Twoja odpowiedź
D. w sekcji <head> nie można umieszczać kodu CSS, a jedynie odwołanie do pliku CSS
Poprawna odpowiedź. Sekcja <head> zawiera metadane dokumentu - informacje o stronie, a nie jej widoczną treść. Mieszczą się w niej m.in. <title> (tytuł karty), <meta> (np. kodowanie znaków, opis), <link> (dołączenie zewnętrznego arkusza CSS lub favikony) oraz <style> i <script>. Widoczną zawartość strony - nagłówki, akapity, obrazy, <div> - umieszcza się w odrębnej sekcji <body>. Dlatego poprawna jest reguła o <meta>, <title> i <link> w <head>.
Pytanie 14
Który z przedstawionych obrazów ma zastosowany poniższy styl CSS?
Poprawna odpowiedź. Obraz A został sformatowany za pomocą stylu CSS, który określa podstawowe cechy estetyczne elementu graficznego. Pierwszym aspektem jest zastosowanie właściwości padding wynoszącej 5px, co oznacza, że wokół obrazu znajduje się wewnętrzny margines o szerokości 5 pikseli. To zapewnia przestrzeń między obrazem a jego ramką, zwiększając czytelność i estetykę wizualną. Następnie, użyto border o grubości 1px z kolorem solid grey. Ten cienki, szary obrys dodaje subtelny akcent, który pomaga wyróżnić obraz na tle strony. Wartość border-radius wynosi 10px, co dodaje zaokrąglone rogi, nadając nowoczesny wygląd. Takie zaokrąglenie jest często stosowane w nowoczesnym designie, aby nadać strony bardziej przyjazny i estetyczny wygląd. Stylizacja obrazów w ten sposób jest zgodna z zasadami responsywności i dostępności, co jest istotne w projektowaniu interfejsów użytkownika. Stosowanie takich technik pozwala na tworzenie spójnych i estetycznych stron internetowych, które są zgodne z obecnymi standardami UX i UI.
Pytanie 15
Której pseudoklasy CSS użyć, aby element zmieniał kolor po najechaniu kursorem?
A.
:coursor
B.
:hover
Twoja odpowiedź
C.
:active
D.
:visited
Poprawna odpowiedź. Pseudoklasa :hover zmienia wygląd elementu, gdy najedzie na niego kursor, np. a:hover{color:red;} podświetli link pod myszą. To podstawowy sposób na interaktywne reakcje bez JavaScriptu. Zapamiętaj: „hover” = unoszenie kursora nad elementem.
Pytanie 16
Na ilustracji przedstawiono kompozycję bloków strony www. Który z elementów formatowania strony odpowiada temu układowi? (Dla uproszczenia pominięto właściwości dotyczące koloru tła, wysokości oraz czcionki)
A. Odpowiedź 4: D
B. Odpowiedź 2: BTwoja odpowiedź
C. Odpowiedź 1: A
D. Odpowiedź 3: C
Poprawna odpowiedź. Odpowiedź B jest naprawdę na czasie! Widzisz, użyto tutaj techniki pływającego układu z CSS, czyli float i clear. Pierwszy blok pływa w lewo, ma 30% szerokości, dzięki czemu obok niego mogą stać drugi i trzeci blok, które też pływają w lewo i zajmują 70%. To pozwala na ułożenie elementów w jednej linii, o ile kontener ma wystarczająco miejsca. W sumie, float to klasyka przy układach wielokolumnowych, chociaż obecnie sporo osób korzysta z Flexboxa lub Grid Layout. Zauważ, że blok czwarty ma clear:both, więc zacznie się poniżej wcześniejszych elementów pływających. To ważne, bo dzięki temu unikamy problemów z nałożeniem się treści. Zachowanie porządku w układzie jest kluczowe, szczególnie w responsywnym web designie. Tego typu układy są całkiem popularne na stronach z wieloma kolumnami, gdzie elastyczność szerokości ma duże znaczenie.
Pytanie 17
Co należy zrobić, aby strona internetowa była dostępna dla osób z niepełnosprawnościami, zgodnie z wytycznymi WCAG?
A. stosować tylko jedną barwę i jej odcienie
B. używać tylko akapitów, bez nagłówków h1-h6
C. opisywać obrazy tekstem alternatywnym, a kontrolki etykietamiTwoja odpowiedź
D. testować stronę wyłącznie w najpopularniejszej przeglądarce
Poprawna odpowiedź. Dostępność wg WCAG oznacza, że ze strony skorzystają też osoby z niepełnosprawnościami, m.in. używające czytników ekranu. Kluczowe jest opisywanie obrazów tekstem alternatywnym (atrybut alt) oraz wiązanie pól formularza z etykietami (label), aby czytnik mógł je odczytać. Ważne są też nagłówki, kontrast i obsługa klawiaturą. Dlatego poprawna jest odpowiedź o tekście alternatywnym i etykietach kontrolek.
Pytanie 18
Na ilustracji przedstawiono
A. analizę poprawności kodu strony internetowej.
B. analizę ruchu sieciowego między serwerem a przeglądarką.Twoja odpowiedź
C. testy bezpieczeństwa strony.
D. testy funkcjonalne strony interenetowej.
Poprawna odpowiedź. Na zrzucie ekranu widać kartę „Network” w narzędziach deweloperskich przeglądarki (DevTools). To właśnie tutaj podglądamy, jak wygląda ruch sieciowy pomiędzy przeglądarką a serwerem. Każdy wiersz listy to jedno żądanie HTTP/HTTPS: dokument HTML, arkusz CSS, skrypt JS, grafika, font itp. W kolumnach masz m.in. Name (adres zasobu), Status (kody odpowiedzi HTTP, np. 200, 307), Type (rodzaj zasobu), Size (wielkość odpowiedzi) oraz Time (czas pobierania). U góry widać wykres czasowy, który pokazuje, kiedy poszczególne żądania były wysyłane i jak długo trwało ich obsłużenie. To jest klasyczna analiza ruchu sieciowego między serwerem a przeglądarką, a nie testy funkcjonalne czy bezpieczeństwa. W praktyce takie narzędzie wykorzystuje się do diagnozowania problemów z wydajnością strony (np. które pliki ładują się najdłużej), do sprawdzania, czy wszystkie zasoby ładują się poprawnie (brak błędów 404, 500), do inspekcji nagłówków HTTP (np. cache-control, content-type, CORS), a także do podglądu zapytań AJAX / Fetch/XHR wysyłanych przez skrypty JavaScript. Moim zdaniem znajomość tej zakładki to absolutna podstawa pracy front-end developera i testera, bo pozwala szybko zweryfikować, co naprawdę dzieje się „pod maską” podczas ładowania strony i komunikacji klient–serwer. Dobre praktyki w branży zalecają regularne korzystanie z DevTools przy optymalizacji czasu ładowania, analizie błędów sieciowych oraz przy debugowaniu REST API czy komunikacji z backendem.
Pytanie 19
W CSS zdefiniowano regułę
input:focus{background-color:LightGreen;}
Kiedy pole edycyjne będzie miało jasnozielone tło?
A. gdy zostanie najechane kursorem (bez kliknięcia)
B. po kliknięciu w nie, gdy jest aktywne do wpisywania tekstuTwoja odpowiedź
C. w każdej sytuacji
D. jeśli to pierwsze wystąpienie tego elementu w dokumencie
Poprawna odpowiedź. Pseudoklasa :focus dotyczy elementu, który jest AKTYWNY - ma „fokus”, np. pole tekstowe po kliknięciu, gotowe do wpisywania. Dlatego input:focus zadziała po kliknięciu w pole, gdy jest aktywne.
Pytanie 20
Która definicja CSS wskazuje na formatowanie nagłówka h1: tekst z przekreśleniem, z odstępami między słowami wynoszącymi 10 px oraz w kolorze czerwonym?
A. D
B. ATwoja odpowiedź
C. C
D. B
Poprawna odpowiedź. Odpowiedź A jest w porządku, bo dobrze odpowiada na to, co pytanie wymaga. Deklaracja 'text-decoration: overline;' dodaje linię nad tekstem, a nie pod nim. Właściwie to mega ważne, bo można łatwo pomylić nadkreślenie z podkreśleniem. Plus, 'word-spacing: 10px;' ustawia fajny odstęp między wyrazami, co sprawia, że nagłówki wyglądają lepiej i są bardziej czytelne. A jak ustawiłeś kolor tekstu na 'red', to wszystko jest super zgodne z tym, co miało być w zadaniu. Używanie takich definicji CSS to standard w tworzeniu stron, bo dobrze stylizowane nagłówki pomagają w organizacji treści i poprawiają wrażenia użytkowników. Pamiętaj, że sensowne i dobrze zdefiniowane style CSS to nie tylko wygoda, ale też ułatwiają późniejsze poprawki dla innych programistów.
Pytanie 21
Jakie polecenie HTML powinno być zastosowane, aby sformatować akapit tekstu?
Tekst może być zaznaczony albo istotny dla autora
A. <p>Tekst może być <mark>zaznaczony albo <em>istotny</em> dla autora</mark></p>
B. <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>Twoja odpowiedź
C. <p>Tekst może być <mark>zaznaczony albo <i>istotny</i> dla autora</mark></p>
D. <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny dla autora</p>
Poprawna odpowiedź. Odpowiedź druga jest prawidłowa, ponieważ stosuje poprawną składnię HTML do oznaczenia fragmentów tekstu z różnym formatowaniem. Element <p> służy do definiowania paragrafu, w którym tekst jest umieszczony. Element <mark> używany jest do oznaczania tekstu, który powinien być zwrócony uwagę czytelnika, poprzez podkreślenie go kolorem tła. Z kolei <em> jest przeznaczony do oznaczenia tekstu, który ma zostać wyróżniony jako istotny, zazwyczaj poprzez użycie kursywy. Użycie tych elementów w połączeniu z zamykającymi tagami, jak w odpowiedzi drugiej, jest zgodne z zaleceniami standardów HTML5, które kładą nacisk na semantyczne znaczenie znaczników. To podejście wspiera dostępność oraz SEO, ponieważ pomaga czytnikom ekranowym i wyszukiwarkom lepiej zrozumieć strukturę i znaczenie treści. Praktyczne zastosowanie tych znaczników można zobaczyć na stronach internetowych, gdzie kluczowe informacje muszą być odpowiednio wyróżnione, aby poprawić doświadczenie użytkownika i przekazać istotne dane w czytelny sposób.
Pytanie 22
Który z poniższych kodów HTML najlepiej ilustruje opisaną tabelę? (Obramowanie tabeli oraz komórek zostało pominięte dla uproszczenia)
A. Odpowiedź BTwoja odpowiedź
B. Odpowiedź A
C. Odpowiedź D
D. Odpowiedź C
Poprawna odpowiedź. Odpowiedź B jest prawidłowa, ponieważ używa atrybutu rowspan do złączenia dwóch komórek w kolumnie. W przedstawionej tabeli nagłówek Telefony obejmuje dwie wartości w jednej kolumnie co jest dokładnie odwzorowane w kodzie HTML poprzez zastosowanie rowspan2 w komórce zawierającej Telefony. To podejście pozwala na logiczne i czytelne przedstawienie danych w tabeli co jest zgodne z dobrymi praktykami projektowania stron internetowych. Użycie rowspan w tabelach HTML jest powszechne gdy chcemy aby jedna komórka zajmowała miejsce większej liczby wierszy niż standardowa. Jest to przydatne w sytuacjach gdy dane muszą być grupowane pionowo co poprawia czytelność i strukturę prezentowanych informacji. Ponadto takie podejście pozwala na bardziej efektywne zarządzanie kodem HTML redukując potrzebę dodatkowego formatowania i zmniejsza złożoność dokumentu co jest zgodne z zasadami semantycznego HTML. Warto również pamiętać że użycie rowspan powinno być przemyślane aby zapewnić dostępność i poprawne wyświetlanie w różnych przeglądarkach i urządzeniach co jest kluczowe w nowoczesnym projektowaniu stron internetowych.
Pytanie 23
W języku HTML stworzono definicję tabeli. Który z rysunków ilustruje jej działanie?
A. Rysunek 1Twoja odpowiedź
B. Rysunek 2
C. Rysunek 3
D. Rysunek 4
Poprawna odpowiedź. Prawidłowa odpowiedź to Rysunek 1 ponieważ odwzorowuje on strukturę tabeli opisaną w kodzie HTML zaprezentowanym w pytaniu. Kod HTML przedstawia tabelę z dwoma wierszami. Pierwszy wiersz zawiera dwie komórki z tekstami 'pierwszy' i 'drugi'. Drugi wiersz posiada jedną komórkę z tekstem 'trzeci' która zajmuje szerokość dwóch kolumn dzięki zastosowaniu atrybutu colspan=2. Właśnie ta cecha sprawia że drugi rysunek jest poprawny gdyż w nim komórka z tekstem 'trzeci' rozciąga się na szerokość dwóch kolumn tabeli. Takie podejście jest zgodne z zasadami projektowania tabel w HTML gdzie atrybut colspan pozwala na łączenie kolumn co jest szczególnie przydatne przy tworzeniu złożonych układów danych w tabelach. Dzięki zastosowaniu tego atrybutu można efektywnie zarządzać szerokością komórek i ich położeniem co zwiększa elastyczność w projektowaniu układów na stronach internetowych. Warto zwrócić uwagę na fakt że użycie atrybutu 'border' z wartością 1 powoduje wyświetlenie widocznej ramki co jest dobrze zilustrowane na Rysunku 1. Zrozumienie i umiejętne zastosowanie takich technik w projektowaniu stron jest kluczowe dla tworzenia przejrzystych i funkcjonalnych interfejsów użytkownika.
Pytanie 24
Jakie pojęcia są wykorzystywane do opisu interfejsu użytkownika serwisu internetowego?
A. Przetwarzanie danych, system zarządzania treścią, projektowanie informacji
B. Wysyłanie zapytań do bazy, skrypty PHP
C. Szkic strony, mapa witryny, diagram przepływu informacji
D. Przyciski, menu, interakcja użytkownika z aplikacjąTwoja odpowiedź
Poprawna odpowiedź. Odpowiedź "Przyciski, menu, interakcja użytkownika z aplikacją" jest prawidłowa, ponieważ odnosi się bezpośrednio do kluczowych elementów interfejsu użytkownika (UI) na stronach internetowych. Interfejs użytkownika to zespół wszystkich punktów kontaktowych między użytkownikiem a systemem, a przyciski i menu są podstawowymi składnikami, które umożliwiają interakcję z aplikacją. Dobre praktyki projektowania UI opierają się na zapewnieniu intuicyjności i dostępności tych elementów, co jest podstawą pozytywnego doświadczenia użytkownika (UX). Na przykład, przyciski powinny być jasno oznaczone i łatwo rozpoznawalne, a menu powinno być zorganizowane w sposób logiczny, aby użytkownicy mogli szybko znaleźć potrzebne informacje. W kontekście standardów, warto zwrócić uwagę na wytyczne WCAG, które dotyczą dostępności treści internetowych, oraz zasady heurystyki Jakobsona, które pomagają w ocenie interfejsu użytkownika. Dobry design UI powinien również uwzględniać responsywność, co oznacza, że interfejs powinien być użyteczny na różnych urządzeniach i rozmiarach ekranów.
Pytanie 25
W CSS zapisana reguła
css
p::first-line {font-size: 150%;}
wykorzystana na stronie z wieloma paragrafami, z których każdy składa się z kilku linijek, spowoduje, że
A. pierwszy paragraf na stronie będzie miał całą czcionkę powiększoną
B. pierwsza linia każdego z paragrafów będzie miała większy rozmiar czcionki niż pozostałe linieTwoja odpowiedź
C. pierwsza linia każdego z paragrafów będzie miała mniejszy rozmiar czcionki niż pozostałe linie
D. cały tekst w paragrafie zostanie powiększony o 150%
Poprawna odpowiedź. Zapis CSS p::first-line {font-size: 150%;} odnosi się do pseudoelementu ::first-line, który pozwala na stylizację tylko pierwszej linii tekstu w każdym paragrafie. W tym przypadku, gdy stosujemy font-size: 150%, oznacza to, że rozmiar czcionki pierwszej linii każdego paragrafu zostanie zwiększony o 50% w stosunku do domyślnego rozmiaru czcionki ustalonego w CSS. To oznacza, że pierwsza linia będzie wizualnie wyróżniać się na tle pozostałego tekstu, który pozostanie w standardowym rozmiarze czcionki. Stylizowanie pierwszej linii paragrafu jest przydatnym narzędziem w projektowaniu stron internetowych, ponieważ pozwala na zwrócenie uwagi czytelników na istotne fragmenty tekstu, co może wpływać na lepszą czytelność i odbiór treści. Dodatkowo, zgodnie z specyfikacją CSS, użycie pseudoelementów, takich jak ::first-line, jest jednym z sposobów na wprowadzenie estetycznych i funkcjonalnych zmian w tekście bez konieczności modyfikacji HTML. W praktyce, stosując ten styl, można uzyskać efekt, który poprawia hierarchię informacji w tekstach, co jest szczególnie ważne w dłuższych artykułach czy dokumentach.
Pytanie 26
Którą technologię poleca się, aby treść serwisu mogli edytować użytkownicy bez umiejętności programowania?
A. CMSTwoja odpowiedź
B. FTP
C. SEO
D. SSL
Poprawna odpowiedź. Aby treść serwisu mogli edytować użytkownicy bez umiejętności programowania, stosuje się system CMS - zarządza się nią przez gotowy panel, bez pisania kodu. Dlatego poleca się CMS.
Pytanie 27
Której wartości właściwości background-attachment użyć, aby tło pozostało nieruchome względem okna przeglądarki?
A.
fixed
Twoja odpowiedź
B.
scroll
C.
inherit
D.
local
Poprawna odpowiedź. Wartość fixed właściwości background-attachment „przykleja” tło do okna przeglądarki - przy przewijaniu strony obraz tła pozostaje nieruchomy, a treść przesuwa się po nim (efekt paralaksy). Dlatego nieruchome tło ustawia fixed.
Pytanie 28
Aby strona internetowa była bardziej dostępna dla osób niewidomych, obrazom wstawianym znacznikiem img należy nadać atrybut:
A.
alt
Twoja odpowiedź
B.
text
C.
src
D.
style
Poprawna odpowiedź. Atrybut alt znacznika <img> zawiera tekst alternatywny - krótki opis tego, co przedstawia obraz. Czytnik ekranu, z którego korzystają osoby niewidome, odczytuje tę treść na głos, dzięki czemu użytkownik wie, co jest na obrazku. Tekst alternatywny pokazuje się też, gdy obraz się nie wczyta. Dlatego dla dostępności obrazom nadaje się atrybut alt.
Pytanie 29
W języku CSS określono formatowanie znacznika h1 według wzoru. Zakładając, że żadne inne formatowanie nie jest dodane do znacznika h1, wskaż sposób formatowania tego znacznika
A. B
B. D
C. CTwoja odpowiedź
D. A
Poprawna odpowiedź. Formatowanie znacznika h1, określone w podanym kodzie CSS, wprowadza kilka charakterystycznych cech stylistycznych. Przede wszystkim, zastosowanie 'font-style: oblique;' zmienia wygląd tekstu, nadając mu ukośny styl. To oznacza, że tekst będzie wyświetlany w wyraźnie przechylonej formie, co jest często używane do podkreślenia ważnych elementów. Dodatkowo, 'font-variant: small-caps;' odpowiedzialne jest za przekształcenie małych liter w małe kapitałki, co nadaje tekstowi elegancki i formalny wygląd. Taki zabieg jest często wykorzystywany w tytułach lub nagłówkach, aby wyróżnić je wśród pozostałego tekstu. Ostatni element, 'text-align: right;', wyrównuje tekst do prawej krawędzi kontenera, co jest mniej powszechnie stosowane w porównaniu do wyrównania do lewej lub wyśrodkowanego, ale może być użyteczne w specyficznych układach strony. W przypadku, gdyby były dodatkowe style CSS przypisane do tego znacznika, mogłyby one wpłynąć na ostateczny wygląd, jednak w tym przypadku zakładamy, że są to jedyne zastosowane style. Standardy CSS jasno określają, jak różne właściwości mogą być używane do stylizacji elementów HTML, co czyni je niezwykle potężnym narzędziem w tworzeniu estetycznych i funkcjonalnych stron internetowych.
Pytanie 30
Którego znacznika należy użyć, aby przejść do nowej linii tekstu, nie tworząc nowego akapitu?
A.
</b>
B.
</br>
C.
<p>
D.
<br>
Twoja odpowiedź
Poprawna odpowiedź. Znacznik <br> wymusza złamanie wiersza - przenosi dalszy tekst do nowej linii, nie rozpoczynając przy tym nowego akapitu ani dodatkowych odstępów. Jest to element pusty (void), więc w HTML5 zapisuje się go bez ukośnika i bez znacznika zamykającego (poprawnie <br>, a nie </br>). Używa się go np. w adresach czy wierszach wiersza, gdzie liczy się dokładny podział linii. Do oddzielania bloków tekstu właściwy jest jednak akapit <p>. Dlatego nową linię bez akapitu daje <br>.
Pytanie 31
Aby strona WWW była responsywna (dostosowana do różnych urządzeń), należy między innymi definiować:
A. układ strony wyłącznie za pomocą tabel
B. tylko znane czcionki, np. Arial
C. rozmiary obrazów w procentachTwoja odpowiedź
D. rozmiary obrazów wyłącznie w pikselach
Poprawna odpowiedź. Responsywność polega na tym, że strona dopasowuje się do szerokości ekranu - od dużego monitora po telefon. Aby to osiągnąć, wymiary elementów, w tym obrazów, podaje się w jednostkach względnych, na przykład w procentach szerokości kontenera. Obraz o szerokości 100% skaluje się wtedy razem z układem, zamiast wystawać poza ekran. Dlatego w RWD rozmiary obrazów definiuje się w procentach.
Pytanie 32
W CSS zastosowano regułę: float:left; dla bloku. Jakie będzie jej zastosowanie?
A. dopasowanie elementów tabeli do lewej krawędzi
B. umieszczanie bloków jeden pod drugimTwoja odpowiedź
C. ustawienie bloku na lewo względem innychPoprawna odpowiedź
D. wyrównanie tekstu do lewej strony
Niepoprawna odpowiedź. Wybór odpowiedzi dotyczący wyrównania elementów tabeli do lewej strony jest błędny, ponieważ reguła 'float: left;' nie dotyczy bezpośrednio tabel ani ich elementów. Tabele mają swoje własne mechanizmy układowe, które są inne niż te, które kontroluje reguła float. W przypadku wyrównania tekstu do lewej strony, stosuje się regułę 'text-align: left;', która jest odpowiednia dla elementów blokowych, ale nie jest związana z 'float'. Ustawienie bloków jeden pod drugim również nie jest zgodne z działaniem float, ponieważ ta reguła nie prowadzi do takiego układu, lecz wręcz przeciwnie – float powoduje, że elementy są ustawiane obok siebie. Warto zauważyć, że float działa głównie w kontekście obszaru, w którym się znajduje, a jego zastosowanie wymaga ostrożności, by nie wprowadzać problemów z układami, co wielu początkujących web developerów nie dostrzega. Typowym błędem jest mylenie float z flexboxem, który jest bardziej intuicyjny i zapewnia lepszą kontrolę nad układem. Dlatego kluczowe jest zrozumienie, kiedy i w jaki sposób stosować float w kontekście układów CSS, aby unikać nieporozumień i problemów w realizacji projektów.
Pytanie 33
Parametr face w znaczniku <font> jest używany do określenia
A. stylów czcionkiTwoja odpowiedź
B. rozmiaru czcionki
C. typy czcionkiPoprawna odpowiedź
D. koloru czcionki
Niepoprawna odpowiedź. Zrozumienie parametrów stylizacji tekstu jest kluczowe w pracy z HTML i często napotyka na nieporozumienia. Wiele osób błędnie interpretuje funkcję parametru <b>face</b> w znaczniku <b><font></b>, co prowadzi do niepoprawnych odpowiedzi. Na przykład, nie jest on używany do określenia barwy czcionki, co jest zadaniem innego parametru, jak 'color'. Barwa czcionki dotyczy estetyki i może być ustawiana niezależnie od samej czcionki. Kolejnym błędnym założeniem jest możliwość korzystania z parametru <b>face</b> do definiowania efektów czcionki, takich jak pogrubienie czy kursywa; te efekty są zwykle osiągane przy użyciu osobnych znaczników lub stylów CSS, takich jak 'font-weight' czy 'font-style'. Wreszcie, pomylenie parametru <b>face</b> z określeniem wielkości czcionki również jest częstym błędem myślowym, ponieważ do tego celu używa się atrybutu 'size', który skoncentrowany jest na rozmiarze tekstu, a nie na jego typie. Warto pamiętać, że precyzyjne zrozumienie tych różnic nie tylko wpływa na jakość tworzonego kodu, ale również na dostępność i estetykę stron internetowych.
Pytanie 34
Którym znacznikiem wstawić listę NUMEROWANĄ (uporządkowaną)?
A.
<dl>
B.
<ol>
Twoja odpowiedź
C.
<li>
D.
<ul>
Poprawna odpowiedź. Listę numerowaną (uporządkowaną) tworzy <ol> (ordered list), a każdą pozycję wpisujesz w <li>: <ol><li>Pierwszy</li><li>Drugi</li></ol> wyświetli kolejne punkty z numerami 1, 2... Numerację można zmienić atrybutem type lub CSS-em list-style-type. Zapamiętaj: „ol” = ordered (uporządkowana), „ul” = unordered (punktowana).
Pytanie 35
W podanym przykładzie pseudoklasa hover spowoduje, że styl pogrubiony zostanie przypisany
a:hover { font-weight: bold; }
A. wszystkim odnośnikom, które nie były odwiedzane
B. każdemu odnośnikowi bez względu na jego bieżący stan
C. wszystkim odnośnikom, które były wcześniej odwiedzane
D. odnośnikowi, gdy kursor myszy na niego najedzieTwoja odpowiedź
Poprawna odpowiedź. Pseudoklasa hover jest jedną z najczęściej używanych pseudoklas w CSS stosowaną do stylizacji elementów HTML w momencie, gdy użytkownik najeżdża kursorem myszy na dany element. W podanym przykładzie kodu CSS zastosowano pseudoklasę hover dla elementów a czyli odnośników. Oznacza to, że gdy kursor myszy znajdzie się nad jakimkolwiek odnośnikiem, jego styl zmieni się na pogrubiony dzięki właściwości font-weight: bold. Jest to bardzo przydatne w interaktywnej stylizacji stron internetowych, ponieważ pozwala użytkownikom na wizualne odróżnienie elementów, z którymi mogą wchodzić w interakcję. Praktycznym zastosowaniem tej pseudoklasy jest zwiększenie użyteczności i estetyki strony poprzez subtelne wskazanie elementów interaktywnych, takich jak menu nawigacyjne czy linki w treści. Warto pamiętać o zachowaniu spójności stylizacji dla wszystkich stanów odnośników, co jest zalecane jako dobra praktyka w projektowaniu responsywnych interfejsów użytkownika. Pseudoklasa hover, jako część kaskadowego arkusza stylów, pozwala na dynamiczną interakcję z elementami strony, co znacząco wpływa na doświadczenia użytkownika.
Pytanie 36
Selektor CSS a:link {color:red} w arkuszach stylów nazywanych kaskadowymi określa
A. klasę.
B. identyfikator.
C. pseudoelement.Twoja odpowiedź
D. pseudoklasę.Poprawna odpowiedź
Niepoprawna odpowiedź. Wybór odpowiedzi związanej z klasą, identyfikatorem lub pseudoelementem nie uwzględnia kluczowej różnicy między tymi pojęciami a pseudoklasami. Klasa w CSS definiuje grupę elementów, które mają wspólne cechy stylistyczne, natomiast identyfikator jest unikalny dla jednego elementu na stronie i powinien być używany tylko raz. Klasy i identyfikatory są przypisywane za pomocą atrybutów 'class' i 'id' w HTML, co czyni je bardziej statycznymi, podczas gdy pseudoklasy odnoszą się do konkretnego stanu elementu, co wprowadza element dynamiki. Pseudoelementy, takie jak '::before' lub '::after', również różnią się, ponieważ pozwalają na stylizację części elementu, a nie jego całego stanu. Typowe błędy myślowe związane z myleniem tych pojęć wynikają często z braku zrozumienia, jak działa kaskadowość i dziedziczenie w CSS. Kluczowe jest zrozumienie, że pseudoklasy są narzędziem do reakcji na interakcje użytkownika, co pozwala na bardziej zaawansowane i intuicyjne projektowanie stron internetowych. Ignorowanie tych różnic prowadzi do nieefektywnego stylowania i może obniżać jakość interfejsów użytkownika.
Pytanie 37
Znacznik <strong> tekst</strong> w HTML będzie ukazywany przez przeglądarkę w identyczny sposób, jak znacznik
A. <h1>tekst</h1>
B. <sub>tekst</sub>
C. <b>tekst</b>Twoja odpowiedź
D. <big>tekst</big>
Poprawna odpowiedź. Znacznik <strong> w języku HTML jest używany do oznaczania tekstu, który ma być wyświetlany w sposób wyróżniony, co sugeruje jego większe znaczenie, natomiast znacznik <b> jest używany tylko do pogrubienia tekstu, bez dodatkowego kontekstu semantycznego. Oba znaczniki są wizualnie identyczne w większości przeglądarek, co powoduje, że można je stosować zamiennie w niektórych przypadkach. Jednakże, zgodnie z najnowszymi standardami HTML, zaleca się używanie <strong> dla tekstu, który ma większe znaczenie, ponieważ to pomaga w SEO i dostępności. Na przykład, tekst umieszczony w znaczniku <strong> może być lepiej interpretowany przez technologie wspomagające, takie jak czytniki ekranu, co czyni go bardziej dostępnym dla osób z niepełnosprawnościami. Przykład użycia: <strong>ważne informacje</strong> w odróżnieniu od <b>ważne informacje</b>, gdzie znaczenie semantyczne jest pominięte. Dlatego, mimo że wizualnie nie widać różnicy, semantyka HTML jest kluczowym aspektem, który wpływa na sposób, w jaki treść jest interpretowana i przetwarzana przez różnorodne systemy.
Pytanie 38
Strona internetowa została napisana w języku XHTML. Który z poniższych kodów przedstawia implementację zamieszczonego fragmentu strony, przy założeniu, że nie zdefiniowano żadnych stylów CSS?
A. <b>Początki HTML</b><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<hr /> stworzył<b>prototyp hipertekstowego systemu informacyjnego - <i>ENQUIRE</i></b></p>
B. <b>Początki HTML</b><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył<b>prototyp hipertekstowego systemu informacyjnego - <i>ENQUIRE</i></b></p>
C. <h1>Początki HTML</h1><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył<b>prototyp hipertekstowego systemu informacyjnego - <i>ENQUIRE</i></b></p>Twoja odpowiedź
D. <h1>Początki HTML</h1><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył<i>prototyp hipertekstowego systemu informacyjnego - <b>ENQUIRE</b></i></p>
Poprawna odpowiedź. Odpowiedź druga jest prawidłowa, ponieważ w XHTML stosowanie znaczników zgodnych z HTML jest kluczowe. Nagłówek <h1> wskazuje na najbardziej wyróżniający się element na stronie, co jest zgodne z prezentowanym obrazem, gdzie 'Początki HTML' jest nagłówkiem. XHTML wymaga, by wszystkie elementy były poprawnie zagnieżdżone i zamknięte, a tag <br /> jest poprawnie użyty jako samo zamykający się, co jest wymagane w XHTML. Ponadto, struktura dokumentu XHTML musi być bardziej restrykcyjna, co oznacza, że używanie semantycznych znaczników jak <h1> dla nagłówków sprzyja lepszej interpretacji struktury dokumentu przez przeglądarki i narzędzia dostępności. Poprawne użycie <b> i <i> do wyróżniania tekstu jest zgodne ze standardami, chociaż w nowoczesnym HTML5 zaleca się używanie <strong> i <em> dla semantycznego formatowania. Takie podejście wspomaga dostępność oraz ułatwia zrozumienie kodu przez inne osoby. Dobór tagów w tej odpowiedzi pokazuje zrozumienie zasad semantyki oraz poprawnej struktury dokumentów w XHTML co jest zgodne z dobrymi praktykami web developmentu.
Pytanie 39
Na ilustracji przedstawiono wybór formatu pliku do importu bazy danych. Który format powinien być wykorzystany, jeśli dane zostały wyeksportowane z programu Excel i zapisane jako tekst z użyciem przecinka do oddzielania wartości pól?
A. ESRI
B. CSVTwoja odpowiedź
C. SQL
D. XML
Poprawna odpowiedź. Format CSV jest powszechnie używany do przechowywania danych tabelarycznych, które są eksportowane z programów takich jak Microsoft Excel. CSV, czyli Comma-Separated Values, wykorzystuje przecinek jako separator pól, co sprawia, że jest idealnym wyborem do importowania danych, które są zapisane w ten sposób. W praktyce, CSV jest niezwykle popularny ze względu na swoją prostotę i szeroką kompatybilność z różnymi systemami baz danych oraz narzędziami analitycznymi. CSV jest formatem tekstowym, co oznacza, że dane są zapisane w formacie, który jest łatwy do odczytania przez ludzi, a jednocześnie można go efektywnie przetwarzać programowo. W branży IT i analizie danych, CSV jest standardem ze względu na łatwość integracji i możliwość pracy z dużymi zestawami danych przy stosunkowo niskim zużyciu zasobów systemowych. Praktycznym przykładem zastosowania CSV jest importowanie listy klientów z programu Excel do systemu CRM. W takim przypadku eksportujemy dane z Excela w formacie CSV, a następnie importujemy je do bazy danych, co pozwala na szybkie i efektywne zarządzanie informacjami o klientach. CSV oferuje również możliwość łatwego manipulowania danymi za pomocą skryptów i narzędzi CLI, co czyni go elastycznym rozwiązaniem w wielu środowiskach IT.
Pytanie 40
Program FileZilla może być użyty do
A. publikacji strony internetowej na serwerzeTwoja odpowiedź
B. walidacji strony internetowej
C. zarządzania bazami danych strony internetowej
D. zmiany domyślnych ustawień hostingu dla strony internetowej
Poprawna odpowiedź. Program FileZilla jest popularnym klientem FTP, który umożliwia przesyłanie plików na serwery internetowe, co jest kluczowe przy publikacji stron internetowych. Użytkownicy mogą korzystać z FileZilla do łatwego zarządzania plikami na serwerze, co pozwala na przesyłanie wszystkich niezbędnych plików HTML, CSS, JavaScript oraz multimediów do katalogu głównego serwera. Przykładowo, po zakończeniu prac nad stroną lokalnie, użytkownik może użyć FileZilla do przesłania plików na serwer, co sprawia, że strona staje się dostępna dla internautów. Program wspiera różne protokoły transferu plików, takie jak FTP, FTPS czy SFTP, co zwiększa bezpieczeństwo przesyłania danych, zgodnie z dzisiejszymi standardami. Używając FileZilla, użytkownicy mogą również zarządzać strukturą katalogów na serwerze, co jest zgodne z dobrymi praktykami w zakresie organizacji plików. Poznanie tego narzędzia i jego funkcji jest niezwykle istotne dla każdego, kto planuje publikować treści w internecie.