Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 1 grudnia 2025 10:47
Data zakończenia: 1 grudnia 2025 11:19

Egzamin zdany!

Wynik: 25/40 punktów (62,5%)

Wymagane minimum: 20 punktów (50%)

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

W ramce przedstawiono właściwości pliku graficznego:

Wymiary:	4272 x 2848px
Rozdzielczość:	72 dpi
Format:	JPG

W celu optymalizacji czasu ładowania rysunku na stronę WWW należy:

A. zwiększyć rozdzielczość.

B. zmienić format grafiki na CDR.

C. zmniejszyć wymiary rysunku.

D. zmienić proporcje szerokości do wysokości.

Odpowiedź jest poprawna. Czas ładowania obrazu na stronę WWW jest w dużej mierze zależny od jego rozmiaru. Zasada jest prosta: im mniejszy rozmiar pliku, tym szybciej zostanie załadowany. Zmniejszenie wymiarów rysunku prowadzi do zmniejszenia rozmiaru pliku, co optymalizuje czas ładowania. W praktyce, oznacza to, że jeżeli masz obraz o wymiarach 2000x2000 pikseli, a na stronie prezentowany jest w wymiarach 500x500 pikseli, to wartość ta jest zdecydowanie za duża i może spowalniać ładowanie strony. Dobrą praktyką jest dostosowanie rozmiaru obrazu do rozmiaru, w jakim ma być wyświetlany na stronie. Warto jednak pamiętać, że zmniejszanie rozmiaru obrazu może wpływać na jego jakość, dlatego ważne jest znalezienie odpowiedniego balansu pomiędzy czasem ładowania a jakością prezentowanego rysunku.

Pytanie 2

Najłatwiejszym i najmniej czasochłonnym sposobem na przetestowanie działania strony internetowej w różnych przeglądarkach i ich wersjach jest

A. wykorzystanie walidatora kodu HTML

B. zainstalowanie różnych przeglądarek na kilku komputerach i testowanie strony

C. sprawdzenie działania strony w programie Internet Explorer, zakładając, że inne przeglądarki będą kompatybilne

D. użycie emulatora przeglądarek internetowych, np. Browser Sandbox

Zainstalowanie na kilku komputerach różnych przeglądarek i testowanie witryny, choć może wydawać się sensowne, wiąże się z wieloma wadami. Po pierwsze, taka metoda jest czasochłonna i wymaga znacznych zasobów, zarówno w zakresie sprzętu, jak i czasu. Każda przeglądarka wymaga aktualizacji, a nowe wersje mogą wprowadzać zmiany, które wpływają na sposób wyświetlania witryny. Dodatkowo, różnorodność systemów operacyjnych i ich wersji, na których mogą działać te przeglądarki, dodatkowo komplikuje proces testowania. W kontekście walidatorów języka HTML, ich zastosowanie jest przede wszystkim ograniczone do sprawdzania poprawności kodu, a nie do testowania rzeczywistego działania witryny w różnych środowiskach. Z perspektywy praktycznej, testowanie w jednej przeglądarce, takiej jak Internet Explorer, z założeniem, że inne przeglądarki będą działać podobnie, jest nierealistyczne. Różne silniki renderujące i interpretujące kod HTML, CSS oraz JavaScript mogą prowadzić do odmiennych wyników. Właściwe przetestowanie witryny wymaga kompleksowego podejścia, które uwzględnia wszystkie możliwe przeglądarki i ich wersje, co czyni emulator najlepszym wyborem. Kluczem do sukcesu w testowaniu jest efektywność, a posłużenie się emulatorami znacząco podnosi jakość i szybkość weryfikacji funkcjonalności witryny.

Pytanie 3

Według zasad walidacji HTML5, jakie jest prawidłowe użycie znacznika hr?

A. </ hr />

B. </hr?>

C. </ hr>

D. <hr>

Wszystkie inne odpowiedzi dotyczące znacznika <hr> są błędne, i to z kilku powodów. Po pierwsze, odpowiedź </ hr> sugeruje, że <hr> potrzebuje zamknięcia, co nie jest zgodne z zasadami HTML5. Znaczniki samodzielne, jak <hr>, nie mają zamykających wersji, bo to właśnie ich urok. Następnie, </hr?> ma ten dziwny znak zapytania, co sprawia, że trudno to rozczytać. Tego typu znaki nie mogą być w nazwach znaczników, więc przeglądarki się w tym gubią. I jeszcze inna odpowiedź, </ hr />, wraca do starych wersji HTML, gdzie można było takie rzeczy robić, ale teraz to nie ma sensu. Niepoprawne znaczniki mogą sprawić, że strona będzie działać dziwnie, a to nie jest fajne dla użytkowników. Lepiej trzymać się aktualnych zasad, żeby wszystko działało jak należy.

Pytanie 4

Czy automatyczna weryfikacja właściciela witryny korzystającej z protokołu HTTPS jest możliwa dzięki

A. danym kontaktowym zamieszczonym na stronie

B. prywatnym kluczom

C. certyfikatowi SSL

D. informacjom whois

Certyfikat SSL (Secure Sockets Layer) jest kluczowym elementem w automatycznej weryfikacji właściciela strony internetowej, który jest udostępniany przez protokół HTTPS. Głównym zadaniem certyfikatu SSL jest zapewnienie, że komunikacja między przeglądarką a serwerem jest zaszyfrowana oraz że tożsamość serwera została potwierdzona przez zaufaną stronę trzecią, czyli urząd certyfikacji (CA - Certificate Authority). Certyfikaty SSL są wydawane po przeprowadzeniu odpowiednich weryfikacji tożsamości wnioskodawcy, co może obejmować sprawdzenie danych WHOIS, ale również inne procesy weryfikacyjne, takie jak potwierdzenie adresu e-mail lub dokumentów właściciela firmy. Przykładowo, witryny e-commerce korzystają z certyfikatów SSL, aby zapewnić bezpieczeństwo transakcji finansowych, co zwiększa zaufanie użytkowników do sklepu. Na poziomie technicznym, certyfikat SSL implementuje protokoły kryptograficzne, takie jak TLS (Transport Layer Security), co nie tylko zabezpiecza transmisję danych, ale także umożliwia autoryzację strony. W praktyce, posiadanie certyfikatu SSL wpływa również na pozycjonowanie w wyszukiwarkach, ponieważ Google promuje strony z bezpiecznym połączeniem HTTPS.

Pytanie 5

W formularzu HTML użyto znacznika <input>. Pole to będzie służyło do wprowadzania maksymalnie

<input type="password" size="30" maxlength="20">

A. 30 znaków, które nie są widoczne w polu tekstowym

B. 30 znaków, które są widoczne w trakcie wprowadzania

C. 20 znaków, które nie są widoczne w polu tekstowym

D. 20 znaków, które są widoczne w trakcie wprowadzania

Poprawna odpowiedź to 20 znaków, które nie są widoczne w polu tekstowym. Znacznik <input type="password"> w HTML jest używany do tworzenia pól wprowadzania, w których hasła lub inne wrażliwe dane są maskowane, co oznacza, że wpisywane znaki są pokazywane jako symbole, zwykle kropki. W atrybucie 'maxlength' określa się maksymalną liczbę znaków, które użytkownik może wprowadzić. W tym przypadku, atrybut 'maxlength="20"' oznacza, że użytkownik może wprowadzić maksymalnie 20 znaków, ale nie będą one widoczne w polu tekstowym, co zwiększa bezpieczeństwo. Dobrym przykładem zastosowania tego typu pola jest logowanie do systemów, gdzie ochrona danych użytkownika jest kluczowa. Stosowanie pól typu 'password' jest zgodne z zasadami ochrony prywatności i dobrymi praktykami w zakresie projektowania interfejsów użytkownika, które wymagają maskowania danych w celu minimalizacji ryzyka ich ujawnienia.

Pytanie 6

Po wykonaniu fragmentu kodu HTML i JavaScript na stronie będzie wyświetlony obraz z pliku

<img id="obraz" src="kol1.jpg">
<button id="przycisk">Przycisk</button>

<script>
    document.getElementById("obraz").src = "kol2.jpg";
</script>

A. kol1.jpg

B. kol2.jpg, który może być zmieniony na kol1.jpg po wciśnięciu przycisku.

C. kol1.jpg, który może być zmieniony na kol2.jpg po wciśnięciu przycisku.

D. kol2.jpg

Dobra robota, zgadłeś! W tym skrypcie JavaScript używamy metody getElementById, żeby znaleźć obraz na stronie o identyfikatorze 'obraz'. Później zmieniamy jego atrybut 'src' na 'kol2.jpg'. To znaczy, że po uruchomieniu tego kodu wyświetli się właśnie ten obrazek. Fajnie jest to zrozumieć, bo pokazuje, jak można dynamicznie zmieniać rzeczy na stronie za pomocą JavaScript. Takie umiejętności są super ważne, gdy tworzymy interaktywne strony, które reagują na to, co robi użytkownik. Na przykład, można by zmienić obraz, gdy ktoś najedzie na niego myszką albo kliknie przycisk. Pamiętaj też, żeby zawsze pomyśleć o dostępności – jeśli obraz ma jakieś ważne informacje, warto dodać alternatywne opisy dla osób korzystających z czytników ekranu.

Pytanie 7

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 1 mimo że prezentuje tekst w większym prostokątnym formacie nie ma charakterystycznego zaokrąglenia krawędzi które jest kluczowe dla podanego stylu CSS Zaokrąglenie krawędzi border-radius 7px to istotna część stylu która wpływa na wizualne odczucie przyjazności i nowoczesności interfejsu użytkownika dodatkowo kolor tekstu w Polu 1 wydaje się niezgodny z podanym stylem ponieważ biel tekstu jest priorytetyzowana dla kontrastu na ciemnym tle Pole 3 z kolei choć posiada pewien stopień zaokrąglenia nie spełnia wymagań pełnego zaokrąglenia 7px a także jego kolorystyka może różnić się od poprawnie zastosowanego tła Teal i białego tekstu co może prowadzić do problemów z czytelnością Pole 4 mimo że może wydawać się odpowiednie pod względem kształtu ma bardziej wyraziste obramowanie które jest sprzeczne z właściwością border none celem którego jest usunięcie widocznych linii obramowania Kluczowym elementem przy stylizacji jest spójna implementacja wszystkich właściwości CSS co oznacza że brak jednego z nich jak zaokrąglenie czy kolor tekstu może znacząco wpłynąć na końcowy odbiór i funkcjonalność elementu wizualnego Właściwe zrozumienie i stosowanie stylów CSS jest podstawą tworzenia atrakcyjnych i funkcjonalnych interfejsów które są jednocześnie estetyczne i ergonomiczne w użytkowaniu

Pytanie 8

Aby za pomocą CSS zdefiniować przedstawione na rysunku opływanie obrazu tekstem należy w stylu obrazu wprowadzić zapis

A. table: left;

B. clear: both;

C. float: right;

D. float: left;

Twoja odpowiedź nie jest prawidłowa. Wszystkie podane błędne odpowiedzi są niepoprawne, ponieważ nie tworzą żądanego efektu opływania obrazu przez tekst. 'clear: both;' jest własnością CSS, która służy do zapobiegania opływaniu, a nie jego tworzeniu. Jest używana, gdy nie chcemy, aby dany element był opływany przez inne. 'table: left;' nie jest istniejącą własnością CSS, i nie ma związanego z nią konkretnego efektu. Właściwość 'float: left;' powoduje, że obraz zostaje przesunięty na lewą stronę strony, co powoduje, że tekst opływa go od prawej strony, a nie od lewej, jak to jest wymagane w pytaniu. Pamiętaj, aby zawsze dobrze zrozumieć, jakie efekty daje użycie konkretnych właściwości CSS, zanim zastosujesz je w praktyce.

Pytanie 9

W kodzie HTML5 znajduje się fragment, który zawiera błąd walidacji. Jakiego rodzaju jest to błąd?

<h6>tekst</h6>
<p>pierwsza <b>linia</b><br>
<p>Druga linia</p>

A. Pierwszy znacznik <p> nie został zamknięty.

B. Znacznik <br> musi być zamknięty.

C. Nagłówek szóstego poziomu nie istnieje.

D. Znaczniki powinny być zapisane wielkimi literami.

W pytaniu pojawia się kilka typowych nieporozumień dotyczących składni HTML5, które często się przewijają podczas nauki. Jednym z nich jest przekonanie, że znaczniki HTML powinny być pisane wielkimi literami – to nieprawda. Współczesny HTML, zgodnie ze standardem HTML5, jest case-insensitive, ale powszechną best practice jest używanie małych liter dla lepszej czytelności i zgodności z narzędziami walidującymi. Wielkie litery to już raczej relikt epoki XHTML, a nawet tam nie były konieczne. Kolejna sprawa to rzekomy brak nagłówka szóstego poziomu – <h6> – co nie ma pokrycia w rzeczywistości. <h6> to absolutnie poprawny i często używany element HTML, szczególnie przy rozbudowanej hierarchii nagłówków w dużych dokumentach. Pominięcie lub zakwestionowanie istnienia tego znacznika może świadczyć o powierzchownym zapoznaniu się ze strukturą HTML. Inna wątpliwość dotyczy znacznika <br> i jego zamykania. W HTML5 nie jest wymagane samo-domykanie tego znacznika (czyli <br />), ponieważ parsery przeglądarek rozumieją zarówno wersję z ukośnikiem, jak i bez niego – to różnica względem XHTML, gdzie domknięcie było obowiązkowe. Często spotykam się też z mylnym przeświadczeniem, że pojedyncze <br> bez ukośnika powoduje błąd – to nieprawda. Prawdziwym źródłem problemu w tym kodzie jest nieuwzględnienie zamknięcia pierwszego paragrafu przed rozpoczęciem kolejnego bloku <p>. To właśnie ten aspekt narusza poprawną strukturę dokumentu HTML5 i prowadzi do niezgodności z walidacją. Moim zdaniem, zrozumienie, które elementy muszą być jawnie domykane, a które mogą być samo-domykające się, to klucz do uniknięcia niepotrzebnych błędów i frustracji podczas kodowania stron internetowych.

Pytanie 10

Po uruchomieniu zamieszczonego w ramce skryptu w języku JavaScript, w przeglądarce zostanie wyświetlona wartość:

var a = 5;
var b = a--;
a *= 3;
document.write(a + "," + b);

A. 12,5

B. 12,4

C. 15,5

D. 15,4

W tym skrypcie JavaScript mamy operator dekrementacji a--, gdzie najpierw wartość zmiennej a jest przypisana do zmiennej b, a dekrementacja następuje później. Jeśli tego nie rozumiesz, może to prowadzić do różnych nieporozumień co do wynikowych wartości. Czyli po a-- b przyjmuje pierwotną wartość a, która wynosi 5. Warto zrozumieć kolejność operacji, bo przy operatorze postfix zmiana wartości następuje po przypisaniu. Później, po dekrementacji, a staje się 4, co czasem jest źle interpretowane, bo ludzie myślą, że b też by się zmieniło. Potem jest a *= 3, gdzie 4 mnożymy przez 3 i dostajemy 12. Często ludzie popełniają błąd, zakładając, że operatory działają równocześnie w jednym wierszu kodu. Ważne jest, żeby znać te subtelności, bo pomaga to w lepszym programowaniu i kontrolowaniu, jak zmienne się zmieniają.

Pytanie 11

W HTML, aby dodać obrazek z tekstem umieszczonym pośrodku obrazka, konieczne jest użycie znacznika

A. <img src="obrazek.png" alt="obraz3" height="50%"> tekst

B. <img src="obrazek.png" alt="obraz2" align="middle"> tekst

C. <img src="obrazek.png" alt="obraz1" hspace="30px"> tekst

D. <img src="obrazek.png" alt="obraz4"> tekst

Odpowiedź <img src="obrazek.png" alt="obraz2" align="middle"> tekst jest prawidłowa, ponieważ wykorzystuje atrybut align z wartością middle, który umożliwia wyśrodkowanie tekstu w poziomie w stosunku do obrazka. Zgodnie z HTML 4.01, atrybut align pozwala na określenie, jak elementy są położone względem siebie, a w tym przypadku sprawia, że tekst pojawia się pośrodku obrazka, co jest często pożądanym efektem wizualnym. W praktyce, użycie takiego podejścia jest przydatne szczególnie w tworzeniu estetycznych i czytelnych układów, gdzie obrazki ilustrują konkretne treści. Warto jednak zauważyć, że w nowoczesnym HTML oraz w CSS rekomenduje się stosowanie bardziej zaawansowanych metod stylizacji, takich jak Flexbox lub Grid, które umożliwiają bardziej elastyczne i responsywne projektowanie stron internetowych. Na przykład, można użyć CSS do osiągnięcia podobnego efektu, co sprawia, że kod HTML jest czystszy i bardziej zgodny z aktualnymi standardami. Zastosowanie arkuszy stylów do zarządzania układem i prezentacją treści zwiększa również dostępność i ułatwia zarządzanie projektem.

Pytanie 12

Który z elementów HTML stanowi blokowy znacznik?

A. span

B. p

C. strong

D. img

Wybór znaczników takich jak <img>, <span> oraz <strong> jako elementów blokowych jest nieprawidłowy z kilku powodów. Znacznik <img> jest elementem, który ma na celu wstawienie obrazków do dokumentu HTML; jest to element liniowy, który nie tworzy nowej linii w układzie, co sprawia, że nie wypełnia całej dostępnej szerokości kontenera. Stosowanie <img> w kontekście blokowym byłoby błędne, ponieważ nie pełni roli strukturalnego elementu tekstowego. Element <span> to również znacznik liniowy, który używany jest do stylizacji fragmentów tekstu w obrębie innego bloku, ale sam w sobie nie ma znaczenia blokowego i nie wpływa na układ w sposób, w jaki to robi <p>. Użycie <span> jako blokowego elementu może prowadzić do niepoprawnych praktyk w kodowaniu, co negatywnie wpływa na czytelność oraz semantykę dokumentu. Z kolei znacznik <strong> jest wykorzystywany do podkreślenia ważności tekstu, jednak również zalicza się do elementów liniowych. Wybór tych znaczników zamiast <p> może prowadzić do nieczytelnych lub nieczytelnych układów stron, co jest sprzeczne z najlepszymi praktykami w projektowaniu responsywnych interfejsów użytkownika. Zrozumienie różnicy pomiędzy elementami blokowymi a liniowymi jest kluczowe dla tworzenia dobrze zorganizowanych i semantycznych stron internetowych.

Pytanie 13

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

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

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

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

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

Pierwsza z odpowiedzi, p {line-height: 30px;}, odnosi się do interlinii, czyli przestrzeni między poszczególnymi liniami tekstu. Ustawienie line-height na 30 pikseli wpłynie na odległość między liniami, ale nie wprowadzi wcięcia, co jest kluczowe w przypadku tego pytania. Użytkownicy często mylą te właściwości, co prowadzi do nieporozumień w zakresie formatowania tekstu. Druga odpowiedź, p {text-spacing: 30px;}, jest błędna, ponieważ text-spacing nie jest standardową właściwością CSS. CSS nie definiuje takiej właściwości, co może prowadzić do frustracji podczas pracy nad stylizacją dokumentów. W przypadku trzeciej odpowiedzi, p {line-indent: 30px;}, również nie jest to poprawne podejście, gdyż line-indent nie jest uznawane za standardową właściwość CSS, więc jego zastosowanie nie przyniesie oczekiwanych efektów. Typowym błędem jest zakładanie, że każda właściwość związana z tekstem może być zastosowana w podobny sposób, co prowadzi do niepoprawnych wyników. Kluczowe jest zrozumienie różnicy między właściwościami, takimi jak line-height, text-indent i inne, aby skutecznie stylizować tekst na stronach internetowych.

Pytanie 14

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

A. <i> oraz <mark>

B. <b> oraz <i>

C. <b> oraz <u>

D. <u> oraz <sup>

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 15

Który z akapitów został sformatowany zgodnie z przedstawionym stylem, zakładając, że pozostałe właściwości akapitu mają wartości domyślne?

A. Odpowiedź B

B. Odpowiedź A

C. Odpowiedź C

D. Odpowiedź D

Paragraf oznaczony jako C został poprawnie sformatowany według przedstawionego stylu CSS. Styl ten określa kilka kluczowych właściwości: padding na poziomie 20 pikseli, kolor tekstu jako niebieski, pogrubienie tekstu ustawione na 900 oraz obramowanie o grubości 1 piksela z pełną linią. Padding określa wewnętrzne wcięcie, które wpływa na zwiększenie odległości między tekstem a krawędzią kontenera, co widać w odpowiedzi C jako przestrzeń wokół tekstu. Kolor tekstu zmienia się na niebieski, co również jest zgodne z wyglądem tej odpowiedzi. Font-weight ustawiony na 900 oznacza, że tekst powinien być wyraźnie pogrubiony, co jest zauważalne w porównaniu do innych opcji. Obramowanie wokół tekstu jest delikatne, ale widoczne, co odpowiada deklaracji border: 1px solid. Te właściwości są zgodne z powszechnymi praktykami projektowania stron internetowych, gdzie czytelność i estetyka odgrywają kluczową rolę. Praktyczne zastosowanie takich reguł CSS można znaleźć w projektowaniu intuicyjnych interfejsów użytkownika, gdzie spójność stylów ułatwia nawigację.

Pytanie 16

W języku HTML, aby uzyskać efekt podobny do tego w przykładzie, trzeba użyć konstrukcji

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

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

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

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

Odpowiedź jest prawidłowa, ponieważ w języku HTML, aby zwiększyć rozmiar czcionki dla części tekstu, można użyć znacznika <big>. Znacznik ten powoduje, że tekst wewnątrz jest wyświetlany w większym rozmiarze niż tekst otaczający. Jest to przydatne w sytuacjach, gdy chcemy wyróżnić część tekstu bez stosowania zaawansowanego stylu CSS. Chociaż <big> jest uznawany za przestarzały w nowoczesnym HTML, dla celów edukacyjnych i zgodności z starszymi dokumentami HTML wciąż może być stosowany. Praktyką zalecaną w aktualnych standardach jest używanie stylów CSS, np. poprzez przypisanie klasy lub bezpośrednie stylowanie in-line. Warto zaznaczyć, że stosowanie <big> nie jest zalecane w nowych projektach, ponieważ CSS oferuje większą elastyczność i kontrolę nad wyglądem tekstu. Niemniej jednak, znajomość takich znaczników jak <big> pomaga w zrozumieniu, jak rozwijał się HTML i jakie są różnice między starszymi a nowoczesnymi metodami formatowania tekstu.

Pytanie 17

W języku CSS zdefiniowano styl. Sformatowana tym stylem sekcja będzie zawierała obramowanie o szerokości:

div { border: solid 2px blue;
       margin: 20px;}

A. 20 px oraz marginesy zewnętrzne tego obramowania

B. 2 px oraz marginesy zewnętrzne tego obramowania

C. 2 px oraz marginesy wewnętrzne tego obramowania

D. 20 px oraz marginesy wewnętrzne tego obramowania

W definicji stylu CSS podano, że sekcja div będzie miała obramowanie o szerokości 2 pikseli oraz marginesy zewnętrzne o wartości 20 pikseli. Obramowanie jest definiowane przez właściwość 'border', gdzie 'solid' oznacza typ obramowania i '2px' to jego szerokość, a 'blue' to kolor. Marginesy zewnętrzne są definiowane za pomocą właściwości 'margin', która w tym przypadku ma wartość 20 pikseli. Jest to odległość między brzegiem obiektu a innymi elementami na stronie. Zrozumienie tych właściwości jest kluczowe w projektowaniu responsywnych i dobrze zorganizowanych układów stron internetowych. Stosując te właściwości, twórcy stron mogą łatwo kontrolować wygląd i odległości między elementami, co jest szczególnie ważne w kontekście użyteczności i estetyki witryny. Przykładowo, jeśli chciałbyś dodać więcej przestrzeni pomiędzy sekcjami, wystarczy zwiększyć wartość 'margin'. Warto również zaznaczyć, że te właściwości są zgodne z aktualnymi standardami CSS, co pozwala na ich wszechstronne wykorzystanie w praktyce.

Pytanie 18

Jakie formaty wideo są obsługiwane przez standard HTML5?

A. Ogg, QuickTime

B. MP4, Ogg, WebM

C. MP4, AVI

D. Ogg, AVI, MPEG

Odpowiedź MP4, Ogg, WebM jest prawidłowa, ponieważ wszystkie te formaty są zgodne ze standardem HTML5 i są powszechnie stosowane w aplikacjach internetowych. MP4, z wykorzystaniem kodeka H.264, zapewnia wysoką jakość obrazu i dźwięku przy stosunkowo małych rozmiarach plików, co czyni go jednym z najpopularniejszych formatów w sieci. Ogg, szczególnie w wersji Vorbis dla audio i Theora dla wideo, jest otwartym formatem, co oznacza, że nie wymaga licencji na użycie, co sprzyja jego zastosowaniu w projektach, które preferują otwarte technologie. WebM, stworzony przez Google, również korzysta z otwartych kodeków, takich jak VP8/VP9 dla wideo oraz Vorbis/Opus dla audio, co czyni go idealnym do zastosowań w środowisku internetowym. W praktyce, korzystając z tych formatów, deweloperzy mogą zapewnić szeroką kompatybilność z różnymi przeglądarkami oraz urządzeniami, co jest kluczowe w kontekście dostępności treści multimedialnych dla użytkowników. Warto również zwrócić uwagę na dobór formatów w kontekście SEO oraz szybkości ładowania stron, gdyż odpowiednia konfiguracja może wpływać na wyniki w wyszukiwarkach oraz doświadczenie użytkownika.

Pytanie 19

Do stworzenia układu strony z trzema kolumnami umieszczonymi obok siebie, można wykorzystać styl CSS

A. .kolumny{ float: left; width: 33%; }

B. .kolumny{ float: right; height: 33%; }

C. .kolumny{ clear: both; height: 33%; }

D. .kolumny{ float: left; width: 40%;}

Aby stworzyć szablon strony internetowej z trzema kolumnami obok siebie, kluczowe jest zastosowanie odpowiednich właściwości CSS. Właściwość 'float' z wartością 'left' pozwala na przesunięcie elementów w lewo, co umożliwia ich równoległe wyświetlanie w poziomie. Ustawienie szerokości każdej kolumny na 33% zapewnia, że wszystkie trzy kolumny zajmą równą część dostępnej przestrzeni w kontenerze. To podejście jest zgodne z zasadami projektowania responsywnego, umożliwiając dostosowanie układu do różnych rozmiarów ekranów. Przykładowo, definiując klasę .kolumny w CSS jako '.kolumny{ float: left; width: 33%; }', uzyskujemy pożądany efekt trzech kolumn. Warto również zdefiniować kontener dla kolumn, aby uniknąć problemów z 'clearfix'. Takie podejście wspiera standardy W3C dotyczące budowy stron internetowych oraz ułatwia przyszłe modyfikacje w układzie. Dodatkowo, istotne jest, aby pamiętać o odpowiednim 'clearfix', aby kontener dostosował swoje wymiary do elementów wewnętrznych, co zapobiega problemom z układem.

Pytanie 20

Aby zrealizować przycisk na stronę internetową zgodnie z wzorem, należy w programie graficznym skorzystać z opcji

A. propagacja wartości

B. deformacje i zniekształcenia

C. wybór eliptyczny

D. zaokrąglenie lub wybranie opcji prostokąt z zaokrąglonymi rogami

Opcja zaznaczenia eliptycznego, choć może być użyteczna w innych kontekstach, nie jest odpowiednia do tworzenia przycisków prostokątnych z zaokrąglonymi rogami. Zaznaczenie eliptyczne służy głównie do tworzenia okrągłych lub eliptycznych zaznaczeń, co nie spełnia wymagań dla standardowych przycisków na stronach internetowych. Zniekształcenia i deformowanie odnoszą się do bardziej zaawansowanych technik modyfikacji grafiki, które mogą być używane do artystycznych efektów, ale nie są praktyczne w kontekście prostego i skutecznego projektowania przycisków. Użycie tych technik mogłoby prowadzić do nieprzewidywalnych wyników i nie jest zgodne z najlepszymi praktykami w projektowaniu UI. Propagacja wartości to termin bardziej związany z przetwarzaniem danych i nie odnosi się bezpośrednio do projektowania grafiki. W kontekście projektowania przycisków na stronach internetowych, istotne jest zrozumienie zasad skutecznego projektowania wizualnego, które obejmuje przede wszystkim prostotę, użyteczność i estetykę. Skuteczne przyciski powinny być łatwe do rozpoznania i klikalne, co eliminuje zastosowanie skomplikowanych technik, które mogą wpłynąć na ich funkcjonalność. Wybierając odpowiednie narzędzia i techniki, projektanci mogą zapewnić, że ich interfejsy są nie tylko estetyczne, ale również intuicyjne dla użytkowników. Dobre zrozumienie tych aspektów pozwala na bardziej efektywne tworzenie elementów interfejsu, które spełniają oczekiwania i potrzeby użytkowników.

Pytanie 21

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. cały tekst w paragrafie zostanie powiększony o 150%

B. pierwsza linia każdego z paragrafów będzie miała większy rozmiar czcionki niż pozostałe linie

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 22

W dokumencie HTML utworzono formularz wysyłający dane do skryptu formularz.php. Po naciśnięciu przycisku typu submit, przeglądarka przekierowuje nas do określonego adresu. Na podstawie podanego linku można wywnioskować, że dane do pliku formularz.php przesłano metodą

.../formularz.php?imie=Anna&nazwisko=Kowalska

A. GET

B. SESSION

C. COOKIE

D. POST

Metoda GET w HTTP jest używana do przesyłania danych w adresie URL. Dane są dołączane jako parametry zapytania po znaku zapytania w formacie klucz=wartość. Przykład w pytaniu pokazuje, że dane imie=Anna oraz nazwisko=Kowalska są przesyłane jako część adresu URL do formularz.php. Jest to typowe dla metody GET, która umożliwia łatwe przesyłanie danych przez przeglądarkę i ich późniejsze przetwarzanie po stronie serwera. Metoda GET jest często stosowana w przypadku, gdy dane nie zawierają poufnych informacji, a ich objętość jest niewielka. Standard HTTP rekomenduje używanie metody GET do pobierania danych i niepowinno być używane do przesyłania lub modyfikowania danych. Dokumentacja W3C wskazuje, że GET jest metodą idempotentną, co oznacza, że wielokrotne wykonanie tego samego zapytania nie spowoduje dodatkowych efektów ubocznych. W praktyce GET jest używana np. w zapytaniach wyszukiwania w witrynach, gdzie parametry wyszukiwania są umieszczane w URL.

Pytanie 23

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

A. Odpowiedź B

B. Odpowiedź A

C. Odpowiedź C

D. Odpowiedź D

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 24

Który z poniższych znaczników jest częścią sekcji <head> dokumentu HTML?

A. <span>

B. <img>

C. <section>

D. <title>

Znacznik <title> jest fundamentalnym elementem sekcji <head> dokumentu HTML. Jego głównym zadaniem jest określenie tytułu strony, który jest wyświetlany na pasku tytułowym przeglądarki oraz w wynikach wyszukiwania. Dobrze skonstruowany tytuł powinien być zwięzły, ale jednocześnie informacyjny, aby skutecznie przyciągnąć uwagę użytkowników. Zgodnie z wytycznymi W3C, tytuł powinien mieć od 50 do 60 znaków, aby uniknąć obcinania w wynikach wyszukiwania. Przykładem dobrze sformułowanego tytułu może być: „Jak stworzyć responsywną stronę internetową - poradnik krok po kroku”. Ważne jest, aby tytuł był unikalny dla każdej podstrony w witrynie, co nie tylko poprawia SEO, ale również ułatwia użytkownikom nawigację. W kontekście standardów i dobrych praktyk, należy również unikać umieszczania w tytule zbędnych słów kluczowych, co może być uznane za spam przez wyszukiwarki. Dobrze zaprojektowany tytuł jest kluczem do efektywnego pozycjonowania i budowania marki w sieci.

Pytanie 25

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

A. walidacji strony internetowej.

B. kompilacji skryptu na stronie.

C. publikacji strony internetowej.

D. debugowania skryptu na stronie.

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

Pytanie 26

Pokazane pole input pozwala na

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

A. wprowadzenie hasła

B. wpisanie dowolnego ciągu znaków

C. wybranie opcji

D. selekcję opcji z listy zawierającej wartości text1 oraz text2

Pole input typu checkbox to fajna opcja, bo pozwala użytkownikom zaznaczać jedną albo więcej opcji z dostępnych wyborów. Takie checkboxy można zobaczyć na różnych stronach internetowych, są super przydatne, a użytkownik może je odznaczać kiedy chce. W HTML mamy atrybut type, który mówi, co użytkownik może wpisać. W przypadku checkboxa mamy to pole, które można zaznaczyć i dzięki temu dodajemy wartość do formularza, gdy go wysyłamy. Przykładem mogą być formularze zgód, gdzie trzeba potwierdzić kilka polityk prywatności lub warunków korzystania z serwisu. Ważne jest także, żeby każdy checkbox miał odpowiednio przypisane atrybuty name i value, bo dzięki temu łatwiej jest je zidentyfikować, gdy przesyłamy dane. I pamiętajmy, żeby dobrze oznaczać checkboxy etykietami przez element label – to pomaga, zwłaszcza osobom korzystającym z technologii wspomagających. Takie poprawne używanie checkboxów to klucz do budowania intuicyjnych i użytecznych interfejsów użytkowników.

Pytanie 27

Jaką wartość w formacie heksadecymalnym będzie miała barwa określona kodem rgb(255, 10, 22)?

A. #251022

B. #2551022

C. #FF0A16

D. #FF1016

Wybór błędnych odpowiedzi wynika najczęściej z niezrozumienia zasad konwersji kolorów z formatu RGB do formatu heksadecymalnego. Odpowiedzi takie jak #2551022 czy #251022 sugerują, że użytkownik nie zrozumiał, jak działa system szesnastkowy, w którym każda para cyfr reprezentuje jeden z trzech kanałów koloru. Na przykład, w odpowiedzi #2551022 widzimy zbyt wiele cyfr, co jest niezgodne z formatem heksadecymalnym, który wymaga dokładnie sześciu znaków. Dodatkowo, odpowiedzi te mogą prowadzić do błędnych wyników w projektach graficznych i programistycznych, gdzie precyzyjne określenie kolorów jest kluczowe. W przypadku #FF1016, choć niektóre cyfry są poprawne, znowu pojawia się problem z wartościami kanału zielonego, gdzie odpowiednia wartość powinna być 0A, a nie 10. Przykłady te pokazują, jak ważne jest zrozumienie, że kanały kolorów w RGB są reprezentowane w skali szesnastkowej jako dwucyfrowe liczby szesnastkowe, a ich nadmiar lub zmiana kolejności może prowadzić do nieprawidłowych kolorów. Dobra praktyka w projektowaniu to upewnienie się, że konwersje są wykonywane poprawnie, aby uniknąć niepożądanych wyników.

Pytanie 28

W CSS wartości underline, overline, blink są przypisane do atrybutu

A. font-weight

B. text-style

C. font-style

D. text-decoration

Właściwość CSS 'text-decoration' to coś, co naprawdę może zmienić wygląd tekstu na stronach internetowych. Dzięki niej możemy dodać różne efekty dekoracyjne, jak podkreślenie, przekreślenie, czy nadkreślenie. Zdarzają się też nowinki, jak efekt 'blink', chociaż nie jest on zbyt popularny w profesjonalnym kodzie. Warto pamiętać, że stosowanie tej właściwości poprawia czytelność i estetykę tekstu. Na przykład, gdy chcemy wyróżnić ważne informacje, możemy użyć 'text-decoration: underline;'. Ciekawostka: niektóre efekty, jak 'blink', mogą sprawić problemy z dostępnością, więc lepiej ich unikać. Właściwe użycie 'text-decoration' w połączeniu z odpowiednimi znacznikami HTML, jak <span> lub <a>, może naprawdę poprawić interaktywność naszej strony. Dobrze jest o tym pamiętać, gdy pracujemy nad projektami.

Pytanie 29

W katalogu www znajdują się podkatalogi html oraz styles, w których umieszczone są pliki o rozszerzeniu html oraz pliki z rozszerzeniem css. Aby dołączyć styl.css do pliku HTML, należy zastosować

A. <link rel="Stylesheet" type="text/css" href="styl.css" />

B. <link rel="Stylesheet" type="text/css" href="../style/styl.css" />

C. <link rel="Stylesheet" type="text/css" href="/style/styl.css" />

D. <link rel=" Stylesheet" type="text/css" href="www/style/styl. css" />

Przy analizie pozostałych odpowiedzi można dostrzec pewne powszechne błędy w rozumieniu ścieżek do zasobów w dokumentach HTML. W pierwszej odpowiedzi, użycie ścieżki 'www/style/styl.css' sugeruje, że autor zakłada, że jest to pełna ścieżka dostępu, co jest mylące, ponieważ taka ścieżka nie jest względna w kontekście pliku HTML znajdującego się w folderze 'html'. Ponadto, użycie dużych liter w atrybucie 'rel' (np. 'Stylesheet') jest niepoprawne, ponieważ HTML jest językiem case-insensitive, lecz konwencjonalnie zaleca się używanie małych liter. Druga odpowiedź, wskazująca na '/style/styl.css', implikuje, że 'style' jest umiejscowione w katalogu głównym serwera, co również jest błędne w kontekście podanej struktury folderów. Takie podejście jest typowym błędem przy zrozumieniu relatywnych i bezwzględnych ścieżek URL. Ostatnia odpowiedź, 'styl.css', zakłada, że plik CSS znajduje się w tym samym folderze co plik HTML, co nie odpowiada rzeczywistości w przedstawionym układzie folderów. Wszyscy, którzy pracują nad projektami webowymi, muszą zrozumieć, jak ważne jest precyzyjne określenie lokalizacji zasobów, ponieważ błędy te mogą prowadzić do ładowania nieprawidłowych plików, co w efekcie negatywnie wpływa na wygląd i funkcjonalność strony. Wiedza na temat struktury folderów oraz umiejętność nawigacji po nich jest kluczowym elementem w pracy programisty.

Pytanie 30

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

A. tła każdego znacznika akapitu

B. rysunku znajdującego się w tle strony w pionie

C. rysunku umieszczonego w tle strony w poziomie

D. rysunku osadzonego znacznikiem img

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

Pytanie 31

Jakim zapisem można w dokumencie HTML stworzyć element, który wyświetla obraz kotek.jpg oraz zawiera tekst alternatywny „obrazek kotka”?

A. <img src="/kotek.jpg" title="obrazek kotka">

B. <img href="/kotek.jpg" title="obrazek kotka">

C. <img href="/kotek.jpg" alt="obrazek kotka">

D. <img src="/kotek.jpg" alt="obrazek kotka">

Poprawna odpowiedź to <img src="/kotek.jpg" alt="obrazek kotka">, ponieważ stosuje właściwe atrybuty do wyświetlania obrazów w HTML. Atrybut 'src' wskazuje na źródło obrazu, a 'alt' zawiera tekst alternatywny, który jest ważny dla dostępności oraz SEO. Standardy WCAG (Web Content Accessibility Guidelines) podkreślają znaczenie atrybutu 'alt', który zapewnia kontekst dla użytkowników korzystających z czytników ekranu. Ponadto, zastosowanie tego zapisu jest zgodne z dobrymi praktykami, które zachęcają do dostarczania informacji o obrazie, gdy nie może on być wyświetlony. Przykładem zastosowania może być dodanie obrazów w artykułach blogowych, gdzie 'alt' opisuje zawartość obrazu, co poprawia ogólne wrażenie oraz dostępność treści. Prawidłowe użycie atrybutów jest kluczowe dla stworzenia semantycznego i dostępnego kodu HTML.

Pytanie 32

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

A. <u>

B. <style>

C. <head>

D. <h6>

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 33

W kontekście CSS atrybut font-size może przyjmować wartości zgodnie z nazwami kluczowymi

A. z zestawu xx-small, x-small, small, medium, large, x-large, xx-large

B. wyłącznie small, medium, large

C. jedynie big oraz small

D. tylko small, smaller, large, larger

W CSS mamy właściwość font-size, która przyjmuje różne wartości, takie jak xx-small, x-small, small, medium, large, x-large i xx-large. Te wszystkie opcje pozwalają na ładne i elastyczne projektowanie stron. Dzięki nim tekst będzie wyglądał dobrze na różnych urządzeniach i przeglądarkach. Na przykład, jak użyjesz 'large' dla nagłówka, to masz pewność, że będzie czytelny w każdej sytuacji. Warto też pamiętać, że korzystanie z jednostek względnych, jak em czy rem, w połączeniu z tymi słownikowymi to dobra praktyka, bo to ułatwi skalowanie i dostępność tekstu. Tak jak w tym przykładzie: h1 { font-size: large; }, gdzie nagłówek h1 będzie odpowiednio duży w porównaniu do reszty tekstu na stronie. Generalnie, te jednostki są zgodne z tym, co zaleca W3C, szczególnie jeśli chodzi o dostępność i responsywność stron internetowych.

Pytanie 34

Który z akapitów wykorzystuje opisaną właściwość stylu CSS?

A. D

B. A

C. C

D. B

Odpowiedź B jest poprawna, ponieważ właściwość CSS border-radius: 20% określa zaokrąglenie narożników elementu. W tym przypadku zastosowanie 20% promienia powoduje, że narożniki akapitu są zaokrąglone w umiarkowanym stopniu. Właściwość ta jest powszechnie wykorzystywana w projektowaniu stron internetowych, aby nadać elementom bardziej łagodny, przyjazny wygląd. Użycie procentowej wartości oznacza, że wielkość zaokrąglenia zależy od wymiarów elementu, co pozwala na zachowanie proporcji na różnych urządzeniach i przy różnych rozmiarach ekranu. Zaokrąglenie w CSS jest istotnym aspektem responsywnego designu, ponieważ może poprawiać czytelność i estetykę interfejsu użytkownika. Praktyczne zastosowania obejmują przyciski, karty, obrazki i inne elementy interfejsu, gdzie płynne linie mogą wpływać na ogólne wrażenie wizualne strony. Zrozumienie i umiejętne wykorzystanie border-radius jest częścią standardowych umiejętności projektanta stron internetowych, co również wspiera zgodność ze współczesnymi trendami w UI/UX.

Pytanie 35

Jakiego znacznika w HTML użyjemy, aby uzyskać tekst wyświetlany czcionką o stałej szerokości znaku, który również uwzględnia dodatkowe spacje, tabulacje oraz znaki końca linii?

A. <ins>…</ins>

B. <code>…</code>

C. <pre>…</pre>

D. <blockquote>…</blockquote>

Znacznik <pre> w HTML jest używany do formatowania tekstu w taki sposób, aby zachować oryginalne odstępy, tabulacje oraz znaki końca linii. W przeciwieństwie do standardowego tekstu, w którym przeglądarka ignoruje dodatkowe białe znaki, <pre> traktuje je dosłownie, co jest szczególnie przydatne w przypadku wyświetlania kodu źródłowego lub tekstu, w którym ważne są układy. Przykładem użycia może być wyświetlanie kodu programistycznego w dokumentacji technicznej, gdzie precyzyjny format jest kluczowy dla zrozumienia struktury kodu. Standard HTML5 potwierdza, że <pre> jest odpowiednim znacznikiem do tego celu, a jego użycie jest zgodne z zasadami semantyki HTML, co zwiększa czytelność i dostępność treści. Praktyka ta sprzyja również urządzeniom wspomagającym, umożliwiając poprawne interpretowanie tekstu przez czytniki ekranu.

Pytanie 36

W znaczniku (w sekcji ) strony internetowej nie zamieszcza się informacji odnoszących się do

A. kodowania

B. rodzaju dokumentu

C. autora

D. automatycznego przeładowania

Możesz pomyśleć, że odpowiedź o automatycznym odświeżaniu, kodowaniu czy autorze ma sens, bo te info są faktycznie w znaczniku <meta>. Ale są tu pewne niuanse, które mogą wprowadzać w błąd. Znacznik <meta> dostarcza nam metadanych, ale nie mówi nic o typie dokumentu. Typ dokumentu jest bardzo ważny dla przeglądarek, bo informuje je o tym, w jakim standardzie jest stworzona strona. To rolę pełni deklaracja DOCTYPE, która pojawia się na początku dokumentu HTML. Warto więc ogarnąć różnicę pomiędzy metadanymi a typem dokumentu, bo to częsty błąd. Znacznik <meta> zajmuje się informacjami, które mogą poprawić SEO i doświadczenia użytkownika, natomiast typ dokumentu to bardziej techniczna kwestia, która zapewnia, że strona działa jak należy. Dobrze jest pamiętać, że odpowiednie stosowanie zarówno znaczników <meta>, jak i DOCTYPE jest kluczowe, jeśli chcemy, by nasza strona działała sprawnie.

Pytanie 37

Aby zdefiniować stylizację tabeli w języku CSS w sposób, który umożliwi wyróżnienie wiersza, na który aktualnie najeżdża kursor myszy np. innym kolorem, należy użyć

A. pseudoklasy :hover

B. pseudoklasy :visited

C. pseudoelementu :first-line

D. nowego selektora klasy dla wiersza tabeli

Pseudoklasa :hover jest techniką CSS, która pozwala na zastosowanie stylów do elementu, gdy użytkownik na niego najedzie kursorem myszy. Dzięki temu można w prosty sposób wyróżnić wiersze tabeli, co zwiększa interaktywność i czytelność danych. W przypadku tabeli, aby wyróżnić aktualnie wskazywany wiersz, należy użyć reguły CSS, która odnosi się do elementu <tr> (wiersza tabeli) z zastosowaniem pseudoklasy :hover. Przykładowy kod CSS może wyglądać następująco: table tr:hover { background-color: #f0f0f0; } co spowoduje, że tło wiersza zmieni się na jasno szare, gdy kursor myszy znajdzie się nad tym wierszem. Taki sposób formatowania jest szczególnie przydatny w przypadku długich tabel, które mogą być trudne do przeglądania. Pseudoklasa :hover jest powszechnie stosowana w projektowaniu stron internetowych, w zgodności z W3C CSS Specification, co zapewnia jej szeroką kompatybilność z różnymi przeglądarkami. Warto także zauważyć, że można łączyć pseudoklasę :hover z innymi selektorami, aby uzyskać bardziej zaawansowane efekty wizualne.

Pytanie 38

Jakie znaczniki HTML pozwolą na prezentację tekstu w jednym wierszu na stronie, zakładając, że nie zastosowano żadnych reguł CSS?

A. style="margin-bottom: 0cm;"><div>Dobre strony </div><div style="letter-spacing:3px">mojej strony</div>

B. <span>Dobre strony </span><span style="letter-spacing:3px">mojej strony</span>

C. style="margin-bottom: 0cm;"><h3>Dobre strony </h3><h3 style="letter-spacing:3px">mojej strony</h3>

D. style="margin-bottom: 0cm;"><p>Dobre strony </p><p style="letter-spacing:3px">mojej strony</p>

Znacznik <span> jest idealnym rozwiązaniem do wyświetlania tekstu w jednym wierszu, ponieważ jest to znacznik inline, co oznacza, że nie wprowadza nowych linii przed ani po swoim zawartości. W tym przypadku <span>Dobre strony </span><span style="letter-spacing:3px">mojej strony</span> pozwala na utrzymanie tekstu w jednej linii, niezależnie od zastosowanego stylu. Styl CSS, taki jak letter-spacing, może być wykorzystany do modyfikacji wyglądu tekstu, nie wpływając na jego układ w dokumentach HTML. Dodatkowo, stosowanie znacznika <span> jest zgodne z W3C, co zapewnia, że struktura dokumentu jest zrozumiała dla przeglądarek oraz urządzeń wspomagających. Przykłady zastosowania <span> obejmują wyróżnianie fragmentów tekstu, dodawanie stylizacji bez wprowadzania nowych bloków, co jest istotne w responsywnym designie. Dzięki temu, <span> staje się kluczowym elementem w budowaniu interaktywnych i estetycznych interfejsów użytkownika.

Pytanie 39

Jakie polecenie powinno być zastosowane, aby tekst TEKST był widoczny w kolorze czarnym w oknie przeglądarki internetowej?

A. <body color="black">TEKST</font>

B. <font color="czarny">TEKST</font>

C. <font color="#000000">TEKST</font>

D. <body bgcolor="black">TEKST</body>

Odpowiedzi zawierające <body color="black">TEKST</font> oraz <body bgcolor="black">TEKST</body> są błędne z kilku powodów. Przede wszystkim, atrybut color nie jest obsługiwany w tagu <body>, co oznacza, że nie wpłynie on na kolor tekstu w jego wnętrzu. Zamiast tego, właściwym podejściem byłoby stosowanie CSS do definiowania kolorów tła i tekstu. Dodatkowo, używanie <body bgcolor="black"> nie jest zalecane w nowoczesnym HTML5, gdyż powinno się stosować CSS do nadawania stylów. Używanie atrybutów w tagach HTML w sposób, który nie jest zgodny z aktualnymi standardami, może prowadzić do problemów z dostępnością i kompatybilnością między różnymi przeglądarkami. Z kolei zastosowanie <font color="czarny">TEKST</font> jest również niepoprawne, ponieważ kolor czarny powinien być określony w formacie heksadecymalnym lub RGB, a nie w wersji z nazwą koloru w języku polskim. Takie podejście ogranicza jego stosowalność w przeglądarkach, które mogą nie rozpoznać polskich nazw kolorów. Z tych powodów kluczowe jest stosowanie właściwych standardów i rekomendacji technicznych dla uzyskania spójnych i poprawnych wyników wizualnych w aplikacjach internetowych.

Pytanie 40

Poprawny zapis znacznika , za pomocą którego można umieścić na stronie internetowej obraz rys.jpg przeskalowany do szerokości 120 px i wysokości 80 px z tekstem alternatywnym "krajobraz" to

A. <img src="rys.jpg" width="120px" height="80px" alt="krajobraz">

B. <img src="rys.jpg" height="120px" width="80px" info="krajobraz">

C. <img image="rys.jpg" width="120px" height="80px" alt="krajobraz">

D. <img href="rys.jpg" height="120px" width="80px" info="krajobraz">

Patrząc na Twoje błędne odpowiedzi, widać, że coś poszło nie tak z użyciem atrybutów HTML dla <img>. Na przykład, w pierwszej odpowiedzi masz 'href', co jest błędne, bo to atrybut dla <a>, a nie dla obrazków. W trzeciej odpowiedzi 'info' to w ogóle nie jest atrybut dla <img>, więc przeglądarki nie wiedzą, co z tym zrobić. W czwartej odpowiedzi widzę 'image', co też nie ma sensu według standardów HTML. <img> ma swoje standardowe atrybuty jak 'src', 'alt', 'width' i 'height', a reszta nie zadziała właściwie. Jak nie rozumiesz tych podstaw, to może prowadzić do kłopotów z kodowaniem i wyświetlaniem obrazków na stronie. No i pamiętaj, że brak 'alt' w tych odpowiedziach to duży problem, bo użytkownicy z różnymi ograniczeniami nie będą mogli zrozumieć, co jest na obrazkach. Wiedza o tym, co robi każdy atrybut w HTML, jest kluczowa, jak chcesz robić semantyczne i dostępne strony.

Rozpocznij nowy egzamin

Powrót do strony głównej