Wyniki egzaminu

Informacje o egzaminie:
  • Zawód: Technik informatyk
  • Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
  • Data rozpoczęcia: 10 stycznia 2026 22:38
  • Data zakończenia: 10 stycznia 2026 22:55

Egzamin zdany!

Wynik: 37/40 punktów (92,5%)

Wymagane minimum: 20 punktów (50%)

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

W kodzie HTML kolor biały można reprezentować przy użyciu wartości

A. rgb(255, 255, 255)
B. #255255
C. rgb (FF, FF, FF)
D. #000000
Odpowiedź rgb(255, 255, 255) jest prawidłowa, ponieważ jest to standardowy sposób definiowania koloru białego w modelu RGB w kodzie HTML i CSS. Wartości RGB oznaczają Red, Green, Blue, a każdy składnik koloru (czerwony, zielony, niebieski) jest reprezentowany przez liczbę w zakresie od 0 do 255. W przypadku koloru białego wszystkie składniki są maksymalne, co przekłada się na pełne naświetlenie wszystkich trzech kolorów. W praktyce, użycie funkcji rgb() jest preferowane w sytuacjach, gdy chcemy dynamicznie modyfikować kolory za pomocą skryptów lub w CSS, co pozwala na lepszą kontrolę nad efektami wizualnymi. Na przykład, możemy łatwo zmieniać przezroczystość koloru, zmieniając wartości przez dodanie czwartego parametru, co jest zgodne z nowoczesnymi standardami CSS. Używanie wartości RGB jest również zgodne z zasadami dostępności oraz ułatwia pracę osobom z daltonizmem, ponieważ pozwala na łatwiejsze zrozumienie i manipulację kolorami.

Pytanie 2

Logo platformy CMS noszącej nazwę Joomla! to

Ilustracja do pytania
A. A
B. C
C. D
D. B
Logo Joomla! jest charakterystyczne z uwagi na swoją kolorystykę i kształt symbolizujący współpracę oraz integrację. Zawiera cztery kolorowe elementy splecione w formie kwiatka lub wiru co często jest interpretowane jako symbol integracji społeczności i otwartości na różnorodność. Joomla! to system zarządzania treścią (CMS) napisany w PHP który wykorzystywany jest do tworzenia stron internetowych blogów i aplikacji internetowych. Jest jednym z najpopularniejszych CMS na świecie dzięki swojej elastyczności modułom oraz dużej społeczności wspierającej rozwój. Joomla! jest wykorzystywany zarówno przez małe przedsiębiorstwa jak i duże organizacje dzięki swojej możliwości skalowania i dostosowywania do indywidualnych potrzeb. Dodatkowo jego open-source'owy charakter pozwala na szerokie dostosowanie kodu do specyficznych wymagań co jest cenione przez programistów i deweloperów. Dobry wybór Joomla! jako CMS może znacząco przyspieszyć proces tworzenia i zarządzania treścią na stronie internetowej oferując jednocześnie wsparcie licznych rozszerzeń i szablonów

Pytanie 3

Strona internetowa została zaprezentowana w taki sposób:

Rozdział 1

tekst

Podrozdział 1.1

tekst

Podrozdział 1.2

Jakie są poprawne znaczniki do tego formatu?
A. <big>Rozdział 1</big>tekst<big>Podrozdział 1.1</big>tekst<big>Podrozdział 1.2</big>
B. <ul><li>Rozdział 1<li>tekst<li>Podrozdział 1.1<li>tekst<li>Podrozdział 1.2</ul>
C. <h1>Rozdział 1<p>tekst <h2>Podrozdział 1.1<p>tekst <h2>Podrozdział 1.2
D. <h1>Rozdział 1</h1> <p>tekst</p> <h2>Podrozdział 1.1</h2> <p>tekst</p> <h2>Podrozdział 1.2</h2>
Odpowiedź zawierająca znaczniki <h1>, <p> oraz <h2> jest poprawna, ponieważ odzwierciedla właściwą strukturę dokumentu HTML. Znaczniki nagłówków <h1> i <h2> są kluczowe dla hierarchii treści na stronie, co ma istotne znaczenie z punktu widzenia SEO oraz dostępności. Właściwe stosowanie tych znaczników wpływa na to, jak wyszukiwarki indeksują zawartość strony, a także ułatwia nawigację osobom korzystającym z urządzeń asystujących. Na przykład, znacznik <h1> powinien być używany raz na stronę, aby wskazać główny temat, podczas gdy <h2> może być stosowany do podziału treści na sekcje. Dodatkowo, znaczniki <p> są przeznaczone do wyświetlania akapitów tekstu, co jest standardową praktyką w tworzeniu treści webowych. Warto również pamiętać o zachowaniu odpowiednich zasad semantyki HTML, co bezpośrednio przekłada się na poprawę doświadczeń użytkowników oraz wydajność strony.

Pytanie 4

Czy przedstawione w języku CSS ustawienia czcionki będą dotyczyć dla ```* { font-family: Tahoma; color: Teal; }```?

A. całego dokumentu HTML, jako domyślne formatowanie dla wszystkich elementów strony
B. znaczników z klasą przypisaną równą *
C. całego dokumentu HTML, niezależnie od późniejszych reguł CSS
D. znaczników o id równym *
Właściwość CSS zastosowana w podanym kodzie dotyczy wszystkich elementów HTML na stronie, ponieważ użycie selektora * oznacza, że formatowanie będzie miało zastosowanie do każdego elementu, niezależnie od jego typu. Oznacza to, że czcionka Tahoma oraz kolor Teal będą domyślnie stosowane do tekstu we wszystkich znacznikach HTML. Tego rodzaju podejście jest zgodne z dobrymi praktykami w projektowaniu stron, ponieważ pozwala na jednolite formatowanie bez konieczności stylizowania każdego elementu z osobna. Przykładem zastosowania może być stworzenie spójnego wyglądu strony, gdzie wszystkie nagłówki, akapity i inne teksty mają ten sam styl, co poprawia czytelność i estetykę. Dodatkowo, takie zastosowanie stylów jest efektywne, gdyż zmiana stylu w kontekście całej strony odbywa się poprzez edytowanie jednego miejsca w kodzie CSS, co oszczędza czas i zmniejsza ryzyko błędów.

Pytanie 5

Znacznik <pre> </pre> służy do wyświetlania

A. treści czcionką o stałej szerokości
B. znaku wielokropkowego
C. treści czcionką w języku polskim
D. znaku skreślenia
Znacznik <pre> </pre> jest używany do wyświetlania treści w formacie, który zachowuje oryginalny układ oraz czcionkę o stałej szerokości. Umożliwia on prezentację tekstu w takiej formie, w jakiej został wprowadzony, co jest szczególnie przydatne w kontekście kodu źródłowego, danych tabelarycznych lub innych elementów, gdzie zachowanie spacji, łamań linii i innych formatów jest istotne. Przykładem zastosowania znacznika <pre> może być wyświetlanie fragmentów kodu w dokumentacji HTML lub na stronach internetowych, gdzie istotne jest, aby użytkownik mógł widzieć dokładnie, jak kod wygląda, bez modyfikacji przestrzeni lub układu, co jest często problematyczne w przypadku standardowego tekstu HTML. Używanie tego znacznika jest zgodne z dobrymi praktykami w tworzeniu przejrzystych i czytelnych interfejsów, zwłaszcza w kontekście tworzenia stron internetowych o charakterze technicznym.

Pytanie 6

W CSS zapis selektora p > i { color: red; } wskazuje, że kolor czerwony zostanie zastosowany do

A. wszelkiego tekstu w znaczniku <p> lub wszelkiego tekstu w znaczniku <i>
B. wyłącznie tekstu w znaczniku <i>, który znajduje się bezpośrednio wewnątrz znacznika <p>
C. tylko tego tekstu w znaczniku <p>, który ma przypisaną klasę o nazwie i
D. wszystkiego tekstu w znaczniku <p> z wyjątkiem tekstu w znaczniku <i>
Zapis selektora CSS p > i { color: red; } jest precyzyjny i wskazuje, że kolor czerwony zostanie zastosowany wyłącznie do elementów <i>, które znajdują się bezpośrednio w obrębie elementu <p>. Warto zrozumieć, że symbol '>' oznacza selektor dziecka, co oznacza, że styl dotyczy tylko tych <i>, które są bezpośrednimi potomkami <p>. Przykładowo, jeśli mamy strukturę HTML:<p>To jest <i>przykład</i> tekstu <i>z <i>zagnieżdżonym</i> elementem</i>.</p>, to tylko pierwszy znacznik <i> (czyli "przykład") będzie miał kolor czerwony, ponieważ drugi znacznik <i> jest zagnieżdżony i nie jest bezpośrednim dzieckiem <p>. W kontekście standardów CSS, stosowanie selektorów dziecka jest zalecane, gdyż pozwala na precyzyjniejsze określenie, do których elementów styl ma być zastosowany, co w praktyce ułatwia zarządzanie stylami na stronach z bardziej złożoną strukturą HTML.

Pytanie 7

Jakim protokołem można bezpiecznie przesłać pliki strony internetowej na serwer WWW?

A. POP3
B. IMAP
C. Telnet
D. SFTP
SFTP, czyli Secure File Transfer Protocol, to taki fajny protokół do bezpiecznego przesyłania plików między komputerami w sieci. Działa to na bazie SSH, co sprawia, że nasze dane są w miarę bezpieczne, bo są szyfrowane. Dzięki temu wiadomo, że nikt nieprzyjemny ich nie przechwyci. SFTP jest super przydatne, zwłaszcza jak przesyłamy pliki na serwery WWW, bo można też nimi zarządzać na serwerze bez strachu, że coś pójdzie nie tak. Przykładowo, programista może potrzebować wrzucić nowe wersje plików HTML, CSS czy JavaScript na serwer. Warto wiedzieć, że są jakieś standardy jak RFC 4253 czy RFC 4251, które mówią, jak to wszystko działa, więc mamy pewność, że jest to dosyć solidny sposób na transfer danych.

Pytanie 8

Aby osiągnąć efekt przedstawiony na ilustracji, w kodzie HTML należy zastosować znacznik skrótu <abbr> z atrybutem

Ilustracja do pytania
A. title
B. dfn
C. alt
D. name
Znacznik <abbr> w HTML służy do opisywania skrótów i akronimów. Atrybut title jest kluczowy, ponieważ dostarcza rozwinięcie skrótu jako podpowiedź tekstową, która pojawia się, gdy użytkownik najedzie kursorem na element. Jest to zgodne z dobrymi praktykami dostępności, umożliwiając użytkownikom lepsze zrozumienie treści. Przykładowo, kod <abbr title='inżynier'>inz.</abbr> spowoduje, że po najechaniu kursorem na skrót 'inz.', pojawi się rozwinięcie 'inżynier'. Takie podejście jest szczególnie istotne w przypadku dokumentów technicznych czy naukowych, gdzie użycie skrótów jest powszechne a pełne rozwinięcie może być niezbędne dla pełnego zrozumienia treści. Atrybut title jest również używany w innych znacznikach HTML, np. <img> do opisania obrazów, co wzbogaca semantykę strony. Zastosowanie <abbr> z atrybutem title wspiera również działanie technologii wspomagających, takich jak czytniki ekranowe, które mogą odczytać pełne rozwinięcie skrótu, podnosząc poziom dostępności strony.

Pytanie 9

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

Ilustracja do pytania
A. A
B. D
C. B
D. C
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 10

Dla strony internetowej stworzono styl, który będzie stosowany tylko do wybranych znaczników, takich jak niektóre nagłówki oraz kilka akapitów. W tej sytuacji, aby przypisać styl do konkretnych znaczników, najodpowiedniejsze będzie użycie

Ilustracja do pytania
A. klasy
B. identyfikatora
C. pseudoklasy
D. selektora akapitu
Użycie klasy w CSS jest najlepszym rozwiązaniem, gdy chcemy zastosować ten sam styl do wielu elementów HTML, ale nie do wszystkich. Klasy w CSS są definiowane za pomocą kropki przed nazwą klasy, np. .nazwa-klasy, i mogą być przypisane do dowolnego elementu HTML za pomocą atrybutu class. Dzięki temu możemy elastycznie i efektywnie zarządzać stylami na stronie internetowej. Klasy są bardzo przydatne w dużych projektach, gdzie powtarzalność i spójność stylów są kluczowe. Pozwalają także na ponowne wykorzystanie tych samych stylów w różnych miejscach projektu bez konieczności kopiowania kodu CSS. Użycie klas zwiększa czytelność i organizację kodu, co jest zgodne z najlepszymi praktykami programowania. Stosowanie klas jest także zalecane w kontekście frameworków CSS, takich jak Bootstrap, które intensywnie wykorzystują klasy do definiowania komponentów i układów. Przykład zastosowania klasy: .align-right { text-align: right; } można przypisać do różnych nagłówków czy akapitów, które mają być wyrównane do prawej.

Pytanie 11

Jakiego elementu HTML należy użyć, aby uzyskać tekst z czcionką o stałej szerokości znaku, w którym uwzględnione są dodatkowe spacje, tabulacje oraz znaki końca linii?

A. <ins> ... </ins>
B. <pre> ... </pre>
C. <code> ... </code>
D. <blockquote> ... </blockquote>
Znacznik <pre> w HTML jest używany do wyświetlania tekstu w formacie preformatowanym. Oznacza to, że w tym przypadku przeglądarka internetowa zachowuje wszystkie wprowadzone spacje, tabulacje i znaki końca linii, co jest kluczowe dla prezentacji kodu źródłowego lub tekstu, który wymaga zachowania dokładnej struktury. Element <pre> wyświetla tekst czcionką o stałej szerokości, co ułatwia czytelność, zwłaszcza w kontekście programowania. Na przykład, jeśli chcemy pokazać fragment kodu w HTML, możemy użyć znacznika <pre>, aby zachować wcięcia i dokładną formę kodu. Przykładowy kod HTML może wyglądać tak: <pre>function helloWorld() { console.log('Hello, World!'); }</pre>. Zgodnie z wytycznymi W3C, element <pre> powinien być używany z umiarem, ponieważ może prowadzić do problemów z dostępnością, jeśli jest stosowany w kontekście, w którym nie jest potrzebny. Należy również zwrócić uwagę, że tekst w <pre> nie jest automatycznie dostosowywany do szerokości kontenera, co może być istotne w projektowaniu responsywnym.

Pytanie 12

Deklaracja CSS margin: auto; wskazuje, że marginesy są

A. obliczane przez przeglądarkę w taki sposób, aby element był wyśrodkowany poziomo
B. przechodzące z elementu nadrzędnego dla danego elementu
C. zgodne z domyślnymi wartościami marginesów elementu, do którego zostały przypisane
D. stałe dla danej przeglądarki, niezależnie od jej okna
Zastosowanie zapisu CSS 'margin: auto;' ma na celu automatyczne wycentrowanie elementu w poziomie w obrębie jego kontenera. Gdy zastosujemy tę właściwość, przeglądarka oblicza marginesy po lewej i prawej stronie elementu, aby zapewnić równą przestrzeń, co skutkuje wyśrodkowaniem elementu. Jest to szczególnie przydatne w przypadku kontenerów o ustalonej szerokości, takich jak divy czy bloki tekstowe. Na przykład, jeśli mamy element o szerokości 50% kontenera, to przy zastosowaniu 'margin: auto;' marginesy po obu stronach będą miały równą wartość, co skutkuje centrowanym wyglądem. Warto dodać, że 'margin: auto;' działa w kontekście blokowym, co oznacza, że najlepiej sprawdza się w przypadku elementów wyświetlanych jako bloki. Zgodnie z zaleceniami standardów CSS, jest to jedna z najprostszych i najskuteczniejszych metod na osiągnięcie efektu wyśrodkowania, który jest zalecany w wielu projektach webowych.

Pytanie 13

Deklaracja typu dokumentu HTML: <!DOCTYPE HTML> wskazuje, że kod został stworzony w wersji

A. 7
B. 6
C. 5
D. 4
Gdy widzisz deklarację <!DOCTYPE HTML>, to znaczy, że mówimy o wersji HTML5. To obecny standard, który wprowadza naprawdę sporo nowych funkcji w porównaniu do wcześniejszych wersji. Na przykład, HTML5 pozwala na osadzanie audio i wideo bez potrzeby dodatkowych wtyczek, co jest super wygodne. Mamy też fajne semantyczne elementy jak <article>, <section> czy <nav>, które sprawiają, że łatwiej zorganizować treści na stronie. Ważne jest, żeby zawsze na początku dokumentu umieszczać tę deklarację, bo to pozwala przeglądarkom na prawidłowe wyświetlanie strony. Dzięki temu unikamy problemów z interpretacją kodu, co z doświadczenia mówię, jest naprawdę istotne.

Pytanie 14

Jak wygląda poprawny zapis znaczników, który jest zgodny z normami języka XHTML i odpowiada za łamanie linii?

A. <br/>
B. <br/>
C. </ br>
D. </br/>
Zapis znacznika </ br> jest niepoprawny, ponieważ nie można w ten sposób zamknąć znacznika, który nie ma zawartości. W XHTML wszystkie tagi muszą być poprawnie sformatowane, a takie umieszczenie spacji w znaczniku zamknięcia oraz użycie nieodpowiedniego formatu są całkowicie niezgodne z wymaganiami standardów. Kolejną niepoprawną koncepcją jest użycie </br/> - chociaż syntaktyczna forma jest bliska poprawnej, znaczniki otwierające i zamykające muszą mieć odpowiednie konteksty. W przypadku znaczników samozamykających się, takich jak <br/>, nie ma potrzeby umieszczania pary znaczników, ponieważ ich funkcjonalność polega na wstawieniu łamania linii, a nie na wytwarzaniu dodatkowego bloku. Ostatnią z wymienionych odpowiedzi, <br>, również nie jest zgodna z odpowiednim formatowaniem XHTML, ponieważ brakuje ukośnika, co czyni go niepoprawnym w kontekście stricte przestrzegania standardu. Podstawowym błędem w myśleniu, który prowadzi do tych niepoprawnych wniosków, jest niewłaściwe zrozumienie zasady samozamykania znaczników oraz ich roli w strukturze dokumentu HTML. Ignorowanie zasadności i standardów tworzenia HTML prowadzi do wielu problemów z interpretacją kodu przez różne środowiska oraz przeglądarki, co wpływa na ostateczną jakość i dostępność stron internetowych.

Pytanie 15

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. pierwsza linia każdego z paragrafów będzie miała większy rozmiar czcionki niż pozostałe linie
B. cały tekst w paragrafie zostanie powiększony o 150%
C. pierwsza linia każdego z paragrafów będzie miała mniejszy rozmiar czcionki niż pozostałe linie
D. pierwszy paragraf na stronie będzie miał całą czcionkę powiększoną
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 16

Wskaż system do zarządzania treściami.

A. MariaDB
B. phpMyAdmin
C. Joomla!
D. Apache
Joomla! to system zarządzania treścią (CMS), który umożliwia użytkownikom tworzenie i edytowanie stron internetowych bez potrzeby zaawansowanej wiedzy programistycznej. Jest to jeden z najpopularniejszych CMS na świecie, używany przez miliony witryn, od prostych blogów po skomplikowane portale e-commerce. Jego zalety obejmują elastyczność, możliwość łatwego dostosowywania za pomocą rozbudowanych wtyczek i szablonów oraz aktywną społeczność, która wspiera rozwój i aktualizacje. Joomla! umożliwia zarządzanie użytkownikami, co pozwala na tworzenie złożonych struktur dostępu do treści, co jest istotne w kontekście dużych organizacji. Dobre praktyki przy korzystaniu z Joomla! obejmują regularne aktualizacje, aby zapobiegać lukom bezpieczeństwa, oraz optymalizację treści pod kątem SEO, co zwiększa widoczność witryn w wynikach wyszukiwania. System ten jest zgodny z wieloma standardami webowymi, co czyni go solidnym wyborem dla profesjonalnych projektów webowych.

Pytanie 17

W CSS, poniższy zapis spowoduje, że czerwony kolor zostanie zastosowany do

h1::first-letter {color:red;}
A. pierwsza litera nagłówka drugiego poziomu
B. pierwsza litera nagłówka pierwszego poziomu
C. pierwsza linia akapitu
D. tekst nagłówka pierwszego poziomu
Wiesz, użycie selektora CSS ::first-letter w połączeniu z stylem h1 to fajny sposób na zmianę wyglądu pierwszej litery w nagłówku. Kiedy używasz tego, kolor czerwony sprawi, że ta litera będzie się wyróżniać, co jest super, zwłaszcza w przypadku nagłówków czy akapitów. To technika, którą często stosuje się w projektowaniu stron, żeby nadać im trochę typograficznego stylu, jak w książkach z dużymi inicjałami. Ale pamiętaj, że ten selektor działa tylko z blokowymi elementami, takimi jak <p> czy <h1>, więc jeżeli spróbujesz zastosować go z elementami liniowymi, to niestety efekty nie będą takie, jak się spodziewasz. Zawsze warto też mieć na uwadze standardy W3C, bo one pomagają w tworzeniu dostępnych stron. No i ten selektor jest częścią specyfikacji CSS Pseudo-Elements Level 3, więc przeglądarki go dobrze wspierają. Zrozumienie, jak i kiedy stosować takie selektory, to klucz do tworzenia nowoczesnych stron.

Pytanie 18

Do czego można wykorzystać program FileZilla?

A. do interpretacji kodu PHP
B. do publikowania strony internetowej
C. do testowania prędkości ładowania strony
D. do weryfikacji strony internetowej
FileZilla to dosyć popularny program, który służy do przesyłania plików za pomocą FTP. W dużym skrócie, jest to narzędzie, które umożliwia publikację stron internetowych. Dzięki niemu można łatwo wrzucać różne pliki, takie jak HTML, CSS czy JavaScript, na serwer. Jego obsługa jest naprawdę prosta – można tworzyć foldery, przenosić, kopiować czy usuwać pliki, co jest bardzo ważne, kiedy zarządza się stroną. Na przykład, jeżeli projektujesz stronę na swoim komputerze i chcesz, żeby była dostępna w Internecie, wystarczy, że skonfigurujesz połączenie FTP w FileZilla, wpiszesz dane logowania do serwera i przeciągniesz pliki do odpowiedniego folderu. Używanie FTP do publikacji to standard w branży, bo jest to bezpieczny i skuteczny sposób na zarządzanie swoimi stronami.

Pytanie 19

Znaczniki HTML <strong> oraz <em>, które mają na celu podkreślenie istotności tekstu, pod względem formatowania odpowiadają znacznikom

A. <b> oraz <u>
B. <u> oraz <sup>
C. <i> oraz <mark>
D. <b> oraz <i>
Znaczniki HTML <strong> oraz <em> mają kluczowe znaczenie w kontekście semantyki i formatowania tekstu w dokumentach HTML. Znacznik <strong> wskazuje na tekst o zwiększonej ważności, co jest zgodne z jego domyślnym formatowaniem, które w większości przeglądarek wyświetla tekst pogrubiony. Z kolei znacznik <em> sugeruje tekst, który powinien być akcentowany w odpowiedni sposób, a jego domyślne formatowanie to kursywa. W związku z tym, ich odpowiednikami pod względem formatowania są znaczniki <b> oraz <i>. Znacznik <b> służy do pogrubienia tekstu, ale nie niesie ze sobą żadnej dodatkowej semantyki, natomiast <i> używany jest do kursywy bez wskazania na ważność. W praktyce, należy używać <strong> i <em> tam, gdzie semantyka jest kluczowa dla zrozumienia treści, a dodatkowe znaczenie przekłada się na lepsze pozycjonowanie w wyszukiwarkach oraz dostępność dla osób korzystających z technologii asystujących. Ważne jest, by przestrzegać dobrych praktyk webowych i stosować znaczniki semantyczne, co pozwoli na efektywne przekazywanie informacji zarówno użytkownikom, jak i robotom indeksującym.

Pytanie 20

Polecenie colspan służy do łączenia komórek tabeli w poziomie, natomiast rowspan w pionie. Którą z tabel wyświetli poniższy fragment kodu napisany w języku HTML?

<table border="1" cellspacing="0" cellpadding="10">
    <tr>
        <td rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
</table>
Ilustracja do pytania
A. C.
B. D.
C. B.
D. A.
Dokładnie tak, wybrałeś poprawną odpowiedź. Fragment kodu HTML napisałeś pokazuje tabelę z dwoma wierszami i dwoma komórkami. Pierwsza komórka w pierwszym wierszu ma atrybut rowspan='2', co oznacza, że będzie się rozciągać na dwa wiersze w pionie. Druga komórka w pierwszym wierszu nie ma żadnych specjalnych atrybutów, więc jest standardową komórką. W drugim wierszu jest tylko jedna komórka, gdyż druga komórka jest połączona z pierwszą komórką pierwszego wiersza przez atrybut rowspan. Tabela odpowiadająca opisowi to tabela B, która ma jedną długą komórkę po lewej stronie rozciągającą się na dwa wiersze i dwie krótsze komórki po prawej stronie, po jednej w każdym wierszu. Pamiętaj, że atrybuty rowspan i colspan są bardzo przydatne do tworzenia skomplikowanych layoutów tabel, które nie są możliwe do osiągnięcia przy użyciu standardowych tagów tabeli.

Pytanie 21

Jakie kodowanie w języku HTML pozwala na sformatowanie paragrafu dla tekstu

 Tekst może być zaznaczony albo istotny dla autora

należy użyć polecenia?
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>
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>
Wybrana odpowiedź jest poprawna, ponieważ stosuje prawidłowe znaczniki HTML do formatowania tekstu. Użycie <mark> dla słowa 'zaznaczony' wskazuje, że jest to istotna informacja, podczas gdy <em> dla słowa 'istotny' podkreśla jego znaczenie w kontekście treści. Zgodnie z W3C i HTML5, <mark> jest używany do oznaczania części tekstu, która jest wyróżniona w kontekście przeszukiwanym lub istotnym. Oznaczenie tekstu jako <em> nie tylko wskazuje na akcent, ale również ma znaczenie semantyczne, ponieważ może wpłynąć na sposób, w jaki czytniki ekranu interpretują treść, co jest kluczowe dla dostępności. Przykładem zastosowania może być strona internetowa, na której chcemy wyróżnić ważne informacje lub kluczowe definicje, co zwiększa czytelność i funkcjonalność przekazu. Poprawne użycie znaczników HTML jest zgodne z dobrymi praktykami tworzenia stron internetowych, co sprzyja lepszej nawigacji i zrozumieniu tekstu przez użytkowników.

Pytanie 22

W trakcie weryfikacji stron internetowych nie uwzględnia się

A. błędów w składni kodu
B. źródła pochodzenia narzędzi edytorskich
C. działania hiperłączy
D. zgodności z różnymi przeglądarkami
Walidacja stron internetowych to proces, który ma na celu zapewnienie, że HTML, CSS oraz inne elementy technologii webowych są zgodne ze standardami określonymi przez W3C (World Wide Web Consortium). W kontekście walidacji nie bada się źródła pochodzenia narzędzi edytorskich, ponieważ te narzędzia, takie jak edytory tekstu czy IDE (Integrated Development Environment), są jedynie medium do tworzenia kodu, a nie jego treści. Z perspektywy walidacji, kluczowe jest, aby kod był syntaktycznie poprawny oraz spełniał standardy interoperability, takie jak HTML5 czy CSS3. Przykładem walidacji może być użycie narzędzi takich jak W3C Validator, które analizują kod strony i wskazują błędy składniowe, problemy z dostępnością oraz niezgodności z różnymi przeglądarkami. Dzięki walidacji, developers mogą zapewnić, że ich strony będą działały poprawnie na różnych urządzeniach i przeglądarkach, co wpływa na lepsze doświadczenia użytkowników. Walidacja jest zatem kluczowym krokiem w procesie tworzenia stron internetowych, zapewniającym ich jakość i zgodność ze światowymi standardami.

Pytanie 23

Który z poniższych znaczników wchodzi w skład sekcji <head> dokumentu HTML?

A. <title>
B. <img>
C. <span>
D. <section>
<title> jest jednym z kluczowych znaczników w sekcji <head> dokumentu HTML. Odpowiada za definiowanie tytułu strony, który jest wyświetlany w pasku tytułu przeglądarki oraz w wynikach wyszukiwania. Tytuł jest istotnym elementem SEO, ponieważ informuje zarówno użytkowników, jak i wyszukiwarki o tematyce strony. Przykład użycia znacznika <title>: <head><title>Moja Strona Internetowa</title></head>. Należy pamiętać, że tytuł powinien być zwięzły, ale jednocześnie opisowy, zazwyczaj nie powinien przekraczać 60 znaków. W kontekście standardów, HTML5, który jest obecnie najnowszą wersją HTML, wciąż podkreśla znaczenie znacznika <title> jako fundamentalnego dla struktury dokumentu. Odpowiedni tytuł nie tylko poprawia doświadczenia użytkowników, ale również zwiększa widoczność strony w wynikach wyszukiwania, dlatego jego prawidłowe użycie ma kluczowe znaczenie w web designie i marketingu internetowym.

Pytanie 24

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

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

Pytanie 25

Który zbiór znaczników, określających projekt strony internetowej w sposób semantyczny, jest zgodny z normą HTML 5?

Ilustracja do pytania
A. Zbiór 1
B. Zbiór 3
C. Zbiór 2
D. Zbiór 4
Wykaz 4 jest zgodny ze standardem HTML 5, ponieważ poprawnie używa semantycznych znaczników do strukturyzacji zawartości strony. <header> jest używany do definiowania nagłówka dokumentu lub sekcji, co jest poprawne dla Bloku 1. Znacznik <main> w Bloku 2 wskazuje na główną treść strony, co jest zgodne z jego przeznaczeniem. <aside> w Bloku 3 jest trafnie używany do treści pobocznych, które są związane, ale niekonieczne dla głównego wątku treści, co odpowiada typowej strukturze witryny, gdzie treści poboczne są często wyświetlane obok głównej treści. Na koniec, <footer> w Bloku 4 jest poprawnie przypisany, gdyż zamyka i podsumowuje zawartość strony. HTML5 kładzie duży nacisk na semantykę, co pomaga w optymalizacji pod kątem SEO oraz ułatwia rozumienie struktury strony zarówno przez ludzi, jak i maszyny. Takie podejście poprawia dostępność, ułatwia stylizowanie za pomocą CSS oraz wspiera lepsze praktyki w zakresie zgodności z przyszłymi standardami.

Pytanie 26

Jakie wyjście zostanie pokazane po zrealizowaniu podanego kodu HTML?

Ilustracja do pytania
A. Rys.A
B. Rys. D
C. Rys. C
D. Rys. B
Poprawna odpowiedź to Rys. D ponieważ przedstawiony kod HTML zawiera dwie listy. Pierwsza lista to lista uporządkowana <ol> z trzema elementami <li> gdzie drugi element zawiera listę nieuporządkowaną <ul> z dwoma elementami. Lista zagnieżdżona używa standardowego symbolu kropki jako punktora. Druga lista <ol> zaczyna się od litery D dzięki atrybutowi type="A" i start="4". To powoduje że ostatni element wyświetlany jest jako D. punkt. Ta właściwość HTML jest używana do personalizacji wyglądu list aby dopasować je do wymagań projektowych lub edytorskich. Stosowanie atrybutów takich jak type i start pozwala na większą kontrolę nad sposobem wyświetlania list co jest zgodne z dobrymi praktykami w tworzeniu przejrzystych i spójnych interfejsów użytkownika. Personalizacja list może być użyteczna w dokumentach technicznych raportach czy aplikacjach które wymagają dokładnego odwzorowania struktury danych.

Pytanie 27

Czym jest DBMS?

A. Strukturalny język zapytań do bazy danych
B. Obiektowy język programowania służący do tworzenia stron www
C. Kaskadowy arkusz stylów do opisu wyglądu witryny www
D. System zarządzania bazą danych
DBMS, czyli System Zarządzania Bazą Danych, to oprogramowanie, które umożliwia tworzenie, zarządzanie i manipulowanie danymi w bazach danych. Pozwala na efektywne przechowywanie, organizowanie i odzyskiwanie informacji, co jest kluczowe w każdej aplikacji wymagającej przetwarzania danych. Przykłady popularnych systemów DBMS to MySQL, PostgreSQL oraz Oracle Database. DBMS zapewnia nie tylko bezpieczeństwo danych, lecz także umożliwia współdzielenie informacji między użytkownikami. Stosuje mechanizmy kontroli dostępu, co chroni dane przed nieautoryzowanym dostępem. Dobre praktyki w zarządzaniu bazą danych obejmują normalizację danych, co zapobiega redundancji i poprawia integralność danych. W przypadku rosnących zbiorów danych, DBMS wspiera także skalowalność, co jest niezbędne w aplikacjach internetowych, gdzie liczba użytkowników może przeszło wzrosnąć. Ponadto, DBMS wykorzystuje język SQL (Structured Query Language) do wykonywania zapytań, co jest standardem branżowym dla interakcji z bazami danych.

Pytanie 28

Który z poniższych zapisów w HTML określa kodowanie znaków stosowane w dokumencie?

A. <meta charset="UTF-8">
B. <meta encoding="UTF-8">
C. <encoding="UTF-8">
D. <charset="UTF-8">
Zapis <meta charset="UTF-8"> jest prawidłową deklaracją kodowania znaków w dokumencie HTML. Element <meta> jest używany w sekcji <head> dokumentu i pozwala na zdefiniowanie różnych metadanych, w tym kodowania znaków. Użycie "UTF-8" jako wartości dla atrybutu charset oznacza, że dokument będzie używał kodowania Unicode, które jest standardem preferowanym w sieci. Dzięki temu, dokumenty mogą poprawnie wyświetlać znaki z różnych języków, co jest kluczowe w zglobalizowanym świecie internetu. Przykładem zastosowania tego zapisu może być strona internetowa, która zawiera teksty w wielu językach, co wymaga wsparcia dla różnorodnych znaków diakrytycznych i symboli. Warto również podkreślić, że zgodnie z zasadami dobrych praktyk, zawsze powinno się definiować kodowanie znaków w dokumencie HTML, aby uniknąć problemów z wyświetlaniem treści, co może negatywnie wpłynąć na doświadczenia użytkowników oraz SEO strony.

Pytanie 29

W przedstawionej regule CSS ```h1 {color : blue}``` h1 reprezentuje

A. wartość
B. selektor
C. klasę
D. deklarację
Selekcja elementów w CSS jest naprawdę ważna, jeśli chodzi o tworzenie stron www. W regule CSS `h1 {color: blue}` mamy do czynienia z selektorem `h1`, który mówi nam, jak stylizować nagłówki pierwszego poziomu. Dzięki selekcji można fajnie dopasować wygląd strony do swoich potrzeb. No i w tym przypadku każdy nagłówek `h1` na stronie będzie miał niebieski kolor, co jest dość prostą i czytelną metodą. warto pamiętać, że CSS oferuje różne typy selektorów, jak klasy czy identyfikatory, a nie tylko tagi. W dużych projektach lepiej używać klasowych czy identyfikatorowych selektorów, bo daje to większą kontrolę nad stylizacją i łatwiejsze zarządzanie kodem.

Pytanie 30

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

A. <p>Ala ma <b>kota</b></p>
B. <p>Ala ma kota
C. <p>Ala ma <b>kota</p></b>
D. <p>Ala ma kota</p>
Analizując pozostałe odpowiedzi, można zauważyć, że zawierają one błędy w zakresie struktury HTML, które mogą prowadzić do niepoprawnego renderowania treści. W przypadku odpowiedzi, w której nie ma zamknięcia tagu <p>, czyli <p>Ala ma kota, przeglądarka może zinterpretować treść niepoprawnie, prowadząc do nieprzewidywalnych efektów na stronie. Odpowiedzi, w których zamknięcie tagu <b> następuje po zamknięciu tagu <p>, również są błędne, ponieważ w HTML tagi powinny być zamykane w odwrotnej kolejności, w jakiej zostały otwarte. To zjawisko jest znane jako „zagnieżdżanie”, które jest kluczowym aspektem podczas pisania poprawnego kodu HTML. Użycie tagów HTML w sposób, który nie przestrzega tych zasady, może prowadzić do błędów walidacji, co zostało jasno wskazane w standardach W3C. Użytkownicy powinni być świadomi, że poprawna struktura kodu nie tylko wpływa na estetykę strony, ale także na jej funkcjonalność oraz dostępność dla technologii asystujących. Dlatego istotne jest zrozumienie i stosowanie zasad poprawnego zagnieżdżania elementów, co jest fundamentem tworzenia dobrze działających stron internetowych.

Pytanie 31

Wskaż stwierdzenie, które jest prawdziwe dla następującej definicji stylu:

<style type="text/css">
<!--
  p {color: blue; font-size: 14pt; font-style: italic}
  a { font-size: 16pt; text-transform: lowercase; }
  td.niebieski { color: blue }
  td.czerwony { color: red }
-->
</style>
A. Zdefiniowano dwie klasy.
B. Odnośnik będzie pisany czcionką 14 punktów.
C. Jest to styl lokalny.
D. Akapit będzie transponowany na małe litery.
Niestety, twoja odpowiedź nie była prawidłowa. Pierwsze stwierdzenie, że jest to styl lokalny, jest nieprawidłowe, ponieważ kod CSS jest zdefiniowany w osobnym pliku, a nie bezpośrednio w tagu style wewnątrz pliku HTML, co oznacza, że jest to styl zewnętrzny, a nie lokalny. Trzecie stwierdzenie, że akapit będzie transponowany na małe litery, jest błędne, ponieważ w kodzie nie ma takiej instrukcji. Ostatnie stwierdzenie, że odnośnik będzie pisany czcionką 14 punktów, jest nieprawidłowe, ponieważ w kodzie nie ma instrukcji dotyczących rozmiaru czcionki dla odnośników. Wszystkie te odpowiedzi wynikają z niezrozumienia kodu CSS. CSS jest potężnym narzędziem do kontrolowania wyglądu strony internetowej i wymaga zrozumienia różnych selektorów, właściwości i wartości. Ważne jest, aby pamiętać, że nie wszystkie elementy HTML są stylizowane w ten sam sposób, a różne selektory CSS mają różne priorytety. To pomoże uniknąć błędów w przyszłości.

Pytanie 32

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

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

Pytanie 33

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 albo <i>istotny</i> dla autora</mark></p>
C. <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny dla autora</p>
D. <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>
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 34

Jak za pomocą CSS ustawić opływanie obrazu tekstem, wprowadzając odpowiedni kod w stylu obrazu?

Ilustracja do pytania
A. float: left;
B. clear: both;
C. float: right;
D. table: left;
Właściwość float: right; w CSS to naprawdę fajne narzędzie, bo pozwala na umieszczenie rzeczy, jak na przykład obrazek, z prawej strony kontenera. Dzięki temu tekst ładnie opływa go z lewej strony, co jest super w responsywnych projektach. Często to widzę na stronach, gdzie musimy dostosować układ do różnych ekranów. Użycie float: right; zgodne jest z dobrymi praktykami CSS i daje nam większą kontrolę nad tym, jak wygląda strona. Przykładowo, w artykułach, gdzie obrazki są często po jednej stronie tekstu, float naprawdę ułatwia życie. Tylko pamiętaj, żeby używać clearfix, bo elementy pływające mogą czasami zamieszać w układzie. Dobrze jest też wiedzieć, że float zmienia sposób, w jaki przeglądarka wyświetla elementy, więc znajomość jego wpływu na model pudełkowy CSS jest bardzo ważna. Dzięki float: right; możemy ładnie oprawić tekst wokół obrazków w blogach, co sprawia, że wygląda to estetycznie i jest bardziej czytelne.

Pytanie 35

Przedstawiono fragment HTML, który nie przechodzi poprawnej walidacji. Błąd walidacyjny tego kodu dotyczy

<!DOCTYPE html>
<html>
 <head>
  <title>Test</title>
 </head>
 <body>
  <img src="obraz.gif alt="Obrazek">
  <h1>Rozdział 1</h1>
  <p>To jest tekst paragrafu, ... </p>
  <br>
  <img src="obraz.gif" alt="Obrazek">

 </body>
</html>
A. braku cudzysłowu.
B. niedomknięcia znacznika img.
C. powtórzenia nazwy pliku graficznego.
D. niedomknięcia znacznika br.
Twoja odpowiedź jest prawidłowa. Błąd walidacji w kodzie HTML na obrazku wynikał z braku cudzysłowu. W HTML atrybuty powinny być zawsze otoczone cudzysłowami, są to pojedyncze (' ') lub podwójne (" "), co jest wymogiem poprawnej walidacji kodu. Atrybuty, którym nie przydzielono wartości, mogą powodować problemy w przeglądarkach, co z kolei prowadzi do błędów walidacji. Dlatego zawsze należy pamiętać o otoczeniu atrybutów cudzysłowami, aby zapewnić poprawne działanie strony internetowej. Prawidłowo zapisany atrybut w tagu HTML powinien wyglądać tak: <img src="obrazek.jpg">. W praktyce niezgodność z tą konwencją może prowadzić do nieprawidłowego wyświetlania strony lub jej elementów. Dlatego zawsze warto zwracać uwagę na poprawność składni podczas pisania kodu HTML.

Pytanie 36

Na podstawie fragmentu dokumentu HTML, określ co należy wpisać w miejsce kropek w odnośniku w menu, aby przenosił on do rozdziału 2.

Fragment menu
<a ...>Rozdział 2</a>

Fragment dalej w dokumencie
<h1 id="r2" name="sekcja2" class="rozdzial2">Rozdział 2<h1>
A. href = "sekcja2"
B. href = "#sekcja2"
C. href = "r2"
D. href = "#r2"
Gratulacje, Twoja odpowiedź jest prawidłowa. Wybrałeś 'href="#r2"', co jest poprawne, ponieważ w HTML, atrybut 'href' w tagu 'a' służy do określenia miejsca docelowego odnośnika. W tym przypadku, miejsce docelowe to identyfikator (id) elementu na tej samej stronie. Przed identyfikatorem umieszcza się znak '#', który informuje przeglądarkę, że ma poszukać elementu z danym 'id' na tej samej stronie. W tym konkretnym przypadku, 'r2' jest identyfikatorem rozdziału 2 na stronie, dlatego 'href="#r2"' skieruje odnośnik do tego rozdziału. W praktyce, używanie identyfikatorów pozwala na tworzenie skomplikowanych stron z wieloma sekcjami, gdzie odsyłacze umożliwiają łatwe i szybkie nawigowanie. To jest zgodne ze standardami i dobrymi praktykami dla tworzenia stron internetowych.

Pytanie 37

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

Ilustracja do pytania
A. D
B. C
C. A
D. B
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 38

W przedstawionej regule CSS: h1 {color: blue} h1 symbolizuje

A. wartość
B. selektor
C. deklarację
D. klasę
W podanej regule CSS, h1 {color: blue}, h1 jest selektorem, który identyfikuje elementy HTML, na które ma być zastosowany styl. Selektory są kluczowym elementem w CSS, ponieważ pozwalają na precyzyjne określenie, do których elementów stosować dane style. W tym przypadku h1 wskazuje na wszystkie nagłówki pierwszego poziomu w dokumentach HTML. Używając selektora h1, możemy na przykład zmienić kolor wszystkich tytułów na niebieski, co jest istotne dla poprawy estetyki i czytelności strony. Dobrą praktyką jest stosowanie odpowiednich selektorów, aby unikać niepotrzebnej redundancji w kodzie, co przyczynia się do lepszej wydajności ładowania strony. Zrozumienie selektorów CSS jest niezbędne do efektywnego stylizowania stron internetowych i jest zgodne z najlepszymi standardami w branży, takimi jak W3C. Na przykład, możemy również używać selektorów klas lub identyfikatorów, aby stosować różne style do konkretnych elementów, co pozwala na większą elastyczność i kontrolę nad wyglądem strony.

Pytanie 39

Zademonstrowano efekt stylizacji CSS oraz kod HTML. W jaki sposób należy ustawić styl, aby uzyskać takie formatowanie?

Ilustracja do pytania
A. .first-line {font-size: 200%; color:brown;}
B. p.first-line {font-size: 200%; color:brown;}
C. #first-line {font-size: 200%; color:brown;}
D. p::first-line {font-size: 200%; color:brown;}
Odpowiedź p::first-line {font-size: 200%; color:brown;} jest prawidłowa, ponieważ selektor ::first-line w CSS służy do formatowania pierwszej linii tekstu wewnątrz elementu blokowego, takiego jak <p>. W tym przypadku formatowanie odnosi się do zmiany rozmiaru czcionki na 200% i koloru na brązowy, co jest zgodne z efektem prezentowanym na obrazie. Jest to powszechna praktyka, gdy chcemy wyróżnić pierwszą linię tekstu, nadając jej specjalny wizualny akcent. Warto zaznaczyć, że selektory pseudo-klasowe, jak ::first-line, są częścią specyfikacji CSS i umożliwiają bardziej precyzyjne i kontekstualne formatowanie treści, co jest zgodne z najlepszymi praktykami w projektowaniu stron internetowych. Tego typu rozwiązania zwiększają czytelność i estetykę tekstu. W praktyce, stosowanie ::first-line jest szczególnie przydatne w projektach wymagających subtelnych wyróżnień tekstowych, takich jak artykuły prasowe, blogi czy strony promujące treści literackie. Taki styl programowania jest zgodny z zaleceniami W3C, co czyni go nie tylko efektywnym, ale i standardowym podejściem w tworzeniu nowoczesnych stron internetowych.

Pytanie 40

W CSS zapis w postaci

 h1::first-letter {color: red;} 

spowoduje, że kolor czerwony zostanie zastosowany do

A. pierwszej linii akapitu
B. pierwszej litery nagłówka w drugim stopniu
C. tekstu nagłówka w pierwszym stopniu
D. pierwszej litery nagłówka w pierwszym stopniu
Zapis <span>h1::first-letter {color: red;} </span> jest w porządku, bo korzysta z pseudoelementu :first-letter, który działa na pierwszą literkę w nagłówku h1. To całkiem fajne, bo możemy w ten sposób stylizować tę pierwszą literę i nadać nagłówkom ciekawszy wygląd. Na przykład, jeśli mamy nagłówek h1 z napisem 'Witaj świecie', to dzięki temu kodowi, litera 'W' zrobi się czerwona. W CSS warto ogarnąć, że :first-letter działa tylko na bloki, takie jak nagłówki czy akapity, więc warto to mieć na uwadze, gdy coś stylizujemy. Używanie pseudoelementów to dobre podejście do tworzenia ładnych i funkcjonalnych interfejsów, a przy okazji daje nam większą kontrolę nad tym, jak wyglądają nasze elementy.