Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Rozpoczęcie: 30 września 2026 11:33
Zakończenie: 30 września 2026 11:55
Egzamin zdany!
Wynik: 28/40 punktów (70,0%)
Wymagane minimum: 20 punktów (50%)
Pewność odpowiedzi
Żadna odpowiedź nie została oznaczona jako strzał.
Przy następnym egzaminie zaznaczaj niepewne odpowiedzi - zobaczysz wtedy, ile wyniku bierze się z wiedzy, a ile ze szczęścia.
Twój wynik na tle innych
Twój wynik jest lepszy niż 56% podejść do kwalifikacji INF.03.
Porównanie z 43896 zakończonymi podejściami do tej kwalifikacji (dane zbiorcze, bez wyników indywidualnych).
Zachowaj ten wynik na koncie
Załóż darmowe konto albo zaloguj się - ten egzamin przypiszemy do Twojego konta, więc wrócisz do swoich błędów, będziesz śledzić postęp i dostaniesz powtórki dobrane do Twoich odpowiedzi.
W załączonym kodzie CSS, kolor został zapisany w formacie
color: #008000;
A. dziesiętnej
B. CMYK
C. szesnastkowejTwoja odpowiedź
D. HSL
Poprawna odpowiedź. W CSS kolory często zapisywane są w postaci szesnastkowej ponieważ jest to krótki i precyzyjny sposób definiowania koloru. Kod szesnastkowy składa się zazwyczaj z sześciu znaków poprzedzonych znakiem hash (#) gdzie pierwsze dwa znaki odpowiadają czerwonej składowej następne dwa zielonej a ostatnie dwa niebieskiej. Na przykład #008000 oznacza kolor zielony gdzie czerwona składowa wynosi 0 zielona 128 a niebieska 0. Wartości te są zapisane w systemie szesnastkowym co oznacza że mogą przyjmować wartości od 00 do FF odpowiadające wartościom dziesiętnym od 0 do 255. Korzystanie z formatu szesnastkowego jest powszechnie uznawane za dobrą praktykę w web designie ponieważ jest szeroko wspierane przez przeglądarki internetowe i umożliwia łatwe definiowanie szerokiej gamy kolorów. Dzięki swojej zwięzłości i jednoznaczności jest preferowane w projektach gdzie każda linijka kodu ma znaczenie. Przy wyborze koloru warto korzystać z narzędzi które mogą pomóc w konwersji wartości RGB na szesnastkowe co ułatwia dokładne odwzorowanie wybranych kolorów
Pytanie 2
W formularzu zdefiniowano kontrolki do wpisania imienia i nazwiska. Który atrybut reprezentuje podpowiedź umiejscowioną w polu kontrolki, znikającą w momencie, gdy użytkownik rozpocznie wpisywanie wartości?
Poprawna odpowiedź. Dobrze! Poprawna odpowiedź to 'placeholder'. Atrybut 'placeholder' w elemencie input HTML jest używany do wyświetlania podpowiedzi wewnątrz pola formularza, która znika, gdy użytkownik zaczyna wpisywanie danych. Jest to zgodne z pytaniem, w którym poproszono o atrybut reprezentujący podpowiedź w polu formularza, która znika, gdy użytkownik rozpoczyna wpisywanie. Przykładem może być formularz logowania, gdzie w polach 'Użytkownik' i 'Hasło' można umieścić podpowiedzi 'Wpisz nazwę użytkownika' i 'Wpisz hasło' odpowiednio. Atrybut 'placeholder' jest bardzo przydatny w interaktywnym designie, pomagając użytkownikom zrozumieć, jakie informacje są od nich oczekiwane w danym polu formularza.
Pytanie 3
Zaprezentowane pole input daje możliwość
<inputtype="checkbox"name="text1"value="text2">
A. wprowadzenia hasła
B. wpisania dowolnego tekstu
C. zaznaczenia opcji z listy zawierającej wartości text1 i text2
D. wybrania opcjiTwoja odpowiedź
Poprawna odpowiedź. Element HTML z atrybutem type="checkbox" jest używany do tworzenia pól wyboru które pozwalają użytkownikowi zaznaczać jedną lub więcej opcji. Checkboxy są częstym elementem formularzy internetowych gdyż umożliwiają elastyczne zbieranie danych od użytkowników. Przykładowo w formularzach rejestracyjnych można używać ich do akceptacji regulaminu zapisów na newslettery czy wyboru zainteresowań. Składnia takiego elementu jest prosta: tag <input> z atrybutami name i value. Atrybut name jest niezbędny do grupowania checkboxów a value do przekazywania wartości zaznaczonej opcji do serwera podczas wysyłania formularza. Dobre praktyki zalecają dodawanie etykiet opisujących znaczenie checkboxa co poprawia dostępność dla osób korzystających z czytników ekranowych. Stosowanie checkboxów powinno być przemyślane by nie przeciążać użytkownika zbyt dużą liczbą opcji co mogłoby negatywnie wpłynąć na UX. Właściwe użycie checkboxów zgodne ze standardami HTML i UX jest kluczowe dla intuicyjnego interfejsu użytkownika.
Pytanie 4
W kodzie HTML stworzono link do strony internetowej. Aby otworzyć tę stronę w nowym oknie lub zakładce przeglądarki, należy dodać do definicji linku atrybut
<ahref="http://google.com">strona Google</a>
A. target = "_parent"
B. target = "_blank"Twoja odpowiedź
C. rel = "next"
D. rel = "external"
Poprawna odpowiedź. Atrybut target w języku HTML służy do określenia, w jaki sposób ma otworzyć się dokument, do którego prowadzi odnośnik. Użycie wartości '_blank' dla atrybutu target jest standardowym sposobem na otwarcie nowej strony w nowym oknie lub zakładce przeglądarki. Przykład zastosowania to: <a href="http://google.com" target="_blank">strona Google</a>. Jest to niezwykle przydatne w kontekście UX, ponieważ pozwala użytkownikom na łatwe porównanie informacji bez utraty dostępu do oryginalnej strony. Warto również zauważyć, że użycie tego atrybutu jest zgodne z najlepszymi praktykami w tworzeniu stron internetowych, gdyż umożliwia użytkownikom zachowanie kontekstu przeglądania. W HTML5 atrybut target pozostaje wspierany, co czyni go istotnym elementem w projektowaniu interfejsów użytkownika. Oprócz '_blank' istnieją inne wartości, takie jak '_self', '_parent' i '_top', które również spełniają różne funkcje w zależności od potrzeb nawigacyjnych w aplikacji webowej.
Pytanie 5
Jaki model opisu kolorów charakteryzuje się parametrami takimi jak odcień, nasycenie oraz jasność?
A. CMY
B. RGB
C. HSVPoprawna odpowiedź
D. CMYKTwoja odpowiedź
Niepoprawna odpowiedź. Modele RGB, CMY i CMYK to różne podejścia do opisu kolorów, które nie odpowiadają na pytanie o odcień, nasycenie i jasność. Model RGB (Red, Green, Blue) jest adtywnym modelem kolorów, który tworzy kolory poprzez łączenie trzech podstawowych kolorów światła: czerwonego, zielonego i niebieskiego. W praktyce wykorzystuje się go głównie w technologii wyświetlania, jak monitory czy telewizory. Kolory w modelu RGB są definiowane w skali od 0 do 255 dla każdego z kolorów, co nie pozwala na łatwe określenie odcienia, nasycenia czy jasności. Z kolei model CMY (Cyan, Magenta, Yellow) oraz jego rozszerzenie CMYK (Cyan, Magenta, Yellow, Black) są modelami subtraktywnymi, które opierają się na mieszaniu kolorów pigmentów w druku. W modelu CMYK zastosowanie czarnego atramentu jest niezbędne dla uzyskania głębszych odcieni i większej gamy kolorów, a jego struktura opiera się na eliminacji światła, co również nie przekłada się na parametry odcienia, nasycenia i jasności. W efekcie, modele te są bardziej skomplikowane w kontekście zarządzania kolorami, ponieważ nie jednoznacznie odpowiadają na pytanie dotyczące percepcji kolorów, a zamiast tego koncentrują się na technologiach wyświetlania i druku.
Pytanie 6
Jaką formę ma kolor przedstawiony w systemie szesnastkowym jako #11FE07 w formacie RGB?
A. rgb(11,127,7)
B. rgb(17,255,7)
C. rgb(17,254,7)Twoja odpowiedź
D. rgb(17,FE,7)
Poprawna odpowiedź. Kolor zapisany w postaci szesnastkowej #11FE07 odnosi się do systemu kolorów RGB, który jest powszechnie wykorzystywany w grafice komputerowej oraz w sieci. Wartości szesnastkowe składają się z trzech par cyfr: pierwsza para (11) reprezentuje wartość czerwonego (R), druga para (FE) wartość zielonego (G), a trzecia para (07) wartość niebieskiego (B). Aby przekształcić wartości szesnastkowe na dziesiętne, stosujemy konwersję, gdzie '11' w systemie szesnastkowym to 17 w systemie dziesiętnym, 'FE' to 254, a '07' to 7. Zatem wartość RGB dla koloru #11FE07 wynosi rgb(17, 254, 7). Wartości te są kluczowe w tworzeniu kolorów w różnych aplikacjach, od stron internetowych po projektowanie graficzne. Zrozumienie konwersji kolorów oraz ich reprezentacji w różnych formatach jest niezbędne dla każdego projektanta, który pracuje z kolorami. Przykładem zastosowania może być projektowanie logo, gdzie precyzyjne odwzorowanie koloru w różnych formatach jest istotne dla spójności wizualnej marki.
Pytanie 7
Najłatwiejszym sposobem na zmianę obiektu z numerem 1 na obiekt z numerem 2 jest
A. zmiana warstwy obiektu
B. geometriczne przekształcenie obiektuTwoja odpowiedź
C. animacja obiektu
D. narysowanie obiektu docelowego
Poprawna odpowiedź. Geometryczne transformowanie obiektu to proces, który pozwala na zmiany w wielkości, kształcie, pozycji lub orientacji obiektu bez modyfikacji jego struktury. W przypadku zamiany obiektu oznaczonego cyfrą 1 na obiekt oznaczony cyfrą 2, transformacja geometryczna, jak skalowanie, jest najprostszą metodą. Skalowanie pozwala na proporcjonalne powiększenie obiektu, co jest niezbędne, gdy chcemy zwiększyć jego rozmiar bez zniekształceń. W praktyce, narzędzia do obróbki grafiki czy modelowania 3D, takie jak Adobe Illustrator czy AutoCAD, oferują funkcje do precyzyjnego skalowania. Kluczowe jest zachowanie proporcji, co można osiągnąć poprzez skalowanie względem określonego punktu odniesienia. Transformacje geometryczne są fundamentalne w wielu dziedzinach, takich jak projektowanie graficzne, inżynieria czy animacja komputerowa, i są zgodne z najlepszymi praktykami, które promują efektywność i precyzję w pracy z obiektami wizualnymi.
Pytanie 8
Jaką funkcję pełni atrybut value w polu formularza, np. <inputtype="text"name="name"value="value">?
A. ustawia pole jako tylko do odczytu
B. ogranicza maksymalną długość pola
C. określa nazwę pola
D. określa domyślną wartość polaTwoja odpowiedź
Poprawna odpowiedź. Atrybut value w polu formularza ustala jego wartość początkową - tekst, który pojawia się w polu zaraz po załadowaniu strony i zostanie wysłany, jeśli użytkownik go nie zmieni. W przykładzie value="value" pole tekstowe od razu zawiera słowo „value”. Dlatego value określa domyślną wartość pola.
Pytanie 9
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?
D
BTwoja odpowiedź
A
C
Poprawna odpowiedź. Odpowiedź B jest prawidłowa, ponieważ wykorzystuje znaczniki zgodne ze standardem XHTML do prawidłowego formatowania tekstu. W XHTML zaleca się używanie semantycznych znaczników takich jak <h1> dla nagłówków, co poprawia strukturę dokumentu i ułatwia jego interpretację przez przeglądarki oraz inne urządzenia czytające. Dodatkowo użycie znacznika <p> do oddzielenia akapitów jest zgodne z zaleceniami dotyczącymi dostępności i poprawności kodu. To również sprzyja lepszemu SEO, ponieważ wyszukiwarki lepiej rozumieją znaczenie semantycznych znaczników. Warto również wspomnieć o dobrych praktykach, takich jak zamykanie znaczników oraz stosowanie małych liter w nazwach znaczników, co zwiększa kompatybilność z przeglądarkami oraz zgodność ze standardami W3C. XHTML, jako język oparty na XML, wymaga bardziej restrykcyjnej składni, co jest spełnione w kodzie przedstawionym w odpowiedzi B. Dzięki temu zapewnia się lepszą walidację i niezawodność działania strony internetowej.
Pytanie 10
Która lista jest interpretacją przedstawionego kodu?
A. Lista nieuporządkowana zawierająca wszystkie składniki, jeden za drugim.
B. Lista uporządkowana z podpunktami zapisanymi w formie numeracji dziesiętnej (np. 1.1, 1.2).
C. Lista uporządkowana z dwoma składnikami, z których każdy ma wewnętrzną listę nieuporządkowaną.Twoja odpowiedź
D. Lista uporządkowana z sześcioma następującymi elementami.
Poprawna odpowiedź. Przedstawiony kod HTML jest przykładem zagnieżdżonych list uporządkowanych i nieuporządkowanych. Na poziomie głównym użyto listy uporządkowanej oznaczonej tagiem <ol> która tworzy listę numerowaną. Listy zagnieżdżone opisane są za pomocą tagu <ul> co oznacza listy nieuporządkowane punktowane. Wewnętrzna struktura kodu pokazuje jak zagnieżdżać listy aby tworzyć hierarchiczne struktury które są często stosowane na stronach internetowych do organizowania treści. Taka organizacja danych jest szczególnie przydatna w przypadku tworzenia menu rozwijanych lub katalogów. Aby zrozumieć prawidłowość tej struktury należy zapoznać się z zasadą zagnieżdżania elementów w HTML gdzie jeden element może zawierać inne w celu tworzenia bardziej złożonych układów. Popularnymi zastosowaniami są również generowanie drzew katalogów oraz nawigacji w witrynach. Standardy HTML sugerują takie podejście do strukturyzacji danych aby były one semantycznie poprawne a zarazem łatwe do odczytania przez przeglądarki internetowe co zwiększa ich dostępność i użyteczność. Praktyka ta jest zgodna z dobrymi praktykami projektowania webowego gdzie zrozumiałość kodu oraz jego struktura są kluczowe dla dalszego rozwoju czy utrzymania aplikacji.
Pytanie 11
W języku CSS określono styl dla pola edycyjnego. Pole to będzie miało jasnozielony kolor tła, gdy będzie w trybie edycji.
A. gdy będzie na nie najechane kursorem bez kliknięcia.
B. w każdej sytuacji.
C. jeśli jest to pierwsze wystąpienie tego elementu w dokumencie.
D. po naciśnięciu na nie myszką w celu wpisania tekstu.Twoja odpowiedź
Poprawna odpowiedź. Odpowiedź "po kliknięciu myszą w celu zapisania w nim tekstu" jest prawidłowa, ponieważ reguła CSS <pre>input:focus { background-color: LightGreen; }</pre> odnosi się do stanu "focus" elementu formularza, który występuje, gdy pole edycyjne jest aktywne. To znaczy, że użytkownik musi kliknąć na pole, aby je aktywować, co pozwala na wprowadzenie danych. W momencie, gdy pole ma stan "focus", jego tło zmienia się na jasnozielone, co jest pomocne dla użytkowników, aby zidentyfikować, które pole aktualnie edytują. To zachowanie jest zgodne z dobrymi praktykami projektowania interfejsów użytkownika, które promują klarowność i intuicyjność. Dzięki zastosowaniu kolorów i wizualnych wskazówek, użytkownicy mogą łatwiej poruszać się po formularzach, co zwiększa ich efektywność. Ponadto, stosowanie takich reguł CSS jest zgodne z zaleceniami WCAG (Web Content Accessibility Guidelines), które składają się z wytycznych dotyczących dostępności treści internetowych, co sprawia, że aplikacje są bardziej przyjazne dla użytkowników z różnymi potrzebami.
Pytanie 12
Który z poniższych kodów HTML spowoduje taki sam efekt formatowania jak na zaprezentowanym rysunku?
A.
<p>W tym <i>paragrafie <b>zobaczysz</b> sposoby formatowania </i> tekstu w HTML</p>
Poprawna odpowiedź
B.
<p>W tym <i>paragrafie zobaczysz sposoby formatowania</i> tekstu w HTML</p>
Twoja odpowiedź
C.
<p>W tym <b>paragrafie <i>zobaczysz</i> sposoby formatowania</b> tekstu w HTML</p>
D.
<p>W tym <i>paragrafie </i><b>zobaczysz</b><i> sposoby formatowania</i> tekstu w HTML</p>
Niepoprawna odpowiedź. W błędnych odpowiedziach chodzi głównie o to, że znaczników HTML używasz niepoprawnie, przez co efekt wygląda inaczej niż na obrazku. Tag <i> ma być do kursywy, a <b> do pogrubienia. Trzeba zrozumieć, jak te znaczniki współdziałają, żeby uzyskać zamierzony efekt. Często ludzie mylą kolejność lub używają tylko jednego z nich, co psuje całe formatowanie. No i nie zapominaj, że czasem może być trudno zrozumieć, jak znacznik w HTML wpływa na inne. Każdy z nich ma swoją rolę, więc warto wiedzieć, co robi. W kontekście semantycznego HTML, dobrze jest używać odpowiednich znaczników nie tylko dla stylu, ale też dla poprawnej struktury. Chociaż najlepiej jest używać CSS do rozdzielenia stylów od treści, to w niektórych przypadkach, tak jak w tym, proste znaczniki HTML też mają swoje miejsce. Wiedza o tym, jak poprawnie używać znaczników, jest niezbędna do budowania ładnych i uporządkowanych stron oraz aplikacji internetowych.
Pytanie 13
W formularzu HTML użyto znacznika <input>. Pole to będzie służyło do wprowadzania maksymalnie
<inputtype="password"size="30"maxlength="20">
A. 20 znaków, które są widoczne w trakcie wprowadzania
B. 20 znaków, które nie są widoczne w polu tekstowymTwoja odpowiedź
C. 30 znaków, które nie są widoczne w polu tekstowym
D. 30 znaków, które są widoczne w trakcie wprowadzania
Poprawna odpowiedź. 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 14
<img src="/rysunek.png" alt="pejzaż"> Zapisany został kod HTML, który wstawia obrazek na stronę. Jeśli rysunek.png nie zostanie znaleziony, przeglądarka
A. wyświetli w miejscu grafiki tekst "pejzaż"Twoja odpowiedź
B. w miejscu grafiki pokaże tekst "rysunek.png"
C. nie załaduje strony internetowej
D. w miejscu grafiki zasygnalizuje błąd wyświetlania strony
Poprawna odpowiedź. Kiedy przeglądarka internetowa napotyka na kod HTML, który zawiera element graficzny, w takim przypadku, jeśli wskazany plik nie jest dostępny, następuje zachowanie określone przez atrybut 'alt'. W omawianym przykładzie, gdy przeglądarka nie może znaleźć pliku 'rysunek.png', wyświetli tekst alternatywny 'pejzaż'. Atrybut 'alt' jest niezwykle ważny z perspektywy dostępności oraz SEO, ponieważ pozwala na dostarczenie informacji o obrazie osobom, które nie mogą go zobaczyć, takim jak osoby niewidome korzystające z czytników ekranu. Z punktu widzenia standardów W3C, atrybut 'alt' jest zalecany dla każdego elementu <img>, aby poprawić użyteczność strony. W praktyce, dobrze skonstruowane opisy w atrybucie 'alt' mogą również wpłynąć pozytywnie na pozycjonowanie witryny w wyszukiwarkach, co czyni go kluczowym elementem podczas tworzenia treści na stronie internetowej. Z tego powodu umieszczanie informacyjnych i zrozumiałych opisów w tym atrybucie jest niezbędne nie tylko dla poprawy dostępności, ale także dla efektywnej optymalizacji SEO.
Pytanie 15
Z czego skorzystać, aby tworzyć strony internetowe w sposób GRAFICZNY (wizualny)?
A. przeglądarki internetowej
B. programu MS Office Picture Manager
C. edytora CSS
D. programu typu WYSIWYGTwoja odpowiedź
Poprawna odpowiedź. Aby tworzyć strony w sposób GRAFICZNY (wizualny), bez ręcznego pisania kodu, korzysta się z programu typu WYSIWYG - układa się elementy na podglądzie, a narzędzie generuje kod HTML/CSS. Dlatego właściwy jest program WYSIWYG.
Pytanie 16
Aby zdefiniować krój czcionki w stylu CSS, należy użyć właściwości:
A.
font-style
Twoja odpowiedź
B.
text-family
C.
font-family
Poprawna odpowiedź
D.
text-style
Niepoprawna odpowiedź. Łatwo tu wybrać nazwę, która brzmi logicznie, ale nie istnieje albo robi co innego. text-style oraz text-family wyglądają sensownie, jednak takich właściwości w CSS po prostu nie ma - przeglądarka je zignoruje. font-style to z kolei prawdziwa właściwość, lecz odpowiada za odmianę pisma, czyli pochylenie tekstu (wartość italic), a nie za wybór samego kroju. Rodzinę czcionki ustawia font-family, w której wskazuje się nazwę czcionki wraz z listą zapasowych - i dlatego to ona jest poprawną odpowiedzią.
Pytanie 17
W HTML, aby uzyskać rezultat jak w podanym przykładzie, należy użyć struktury `
Duży tekst zwykły tekst
A.
<p><strike>Duży tekst zwykły tekst</p>
B.
<p><big>Duży tekst</p> zwykły tekst
C.
<p><big>Duży tekst</big> zwykły tekst</p>
Poprawna odpowiedź
D.
<p><strike>Duży tekst</strike> zwykły tekst</p>
Twoja odpowiedź
Niepoprawna odpowiedź. W każdej z błędnych odpowiedzi pojawiają się istotne nieporozumienia dotyczące użycia odpowiednich znaczników HTML. Odpowiedzi, które wykorzystują znacznik <strike>, mają na celu wyrażenie skreślenia tekstu, co jest zgoła nieodpowiednie w kontekście zwiększania jego rozmiaru. Użycie tego znacznika w przykładzie wskazuje na mylne zrozumienie jego funkcji oraz na niepoprawne podejście do formatowania treści, co prowadzi do nieczytelnych i mniej przyjaznych dla użytkowników interfejsów. Pomijając aspekt stylistyczny, takie podejście może również negatywnie wpłynąć na dostępność, ponieważ osoby korzystające z czytników ekranu mogą mieć trudności z interpretacją skreślonych fragmentów. Z kolei omijanie znacznika <big> lub jego niewłaściwe zagnieżdżenie w odpowiedziach, gdzie nie jest on poprawnie zamknięty, może prowadzić do błędów w renderowaniu tekstu, co z kolei wpływa na ogólną estetykę oraz funkcjonalność witryny. W branży web developmentu kluczowe jest, aby każdy element HTML był używany zgodnie z jego przeznaczeniem, co nie tylko poprawia doświadczenia użytkownika, ale również wspiera najlepsze praktyki programistyczne oraz standardy semantyczne. Z tego powodu błędne koncepcje związane z używaniem znaczników w HTML mogą prowadzić do poważnych problemów w kontekście zarówno wizualnym, jak i funkcjonalnym strony internetowej.
Pytanie 18
Który z poniższych przykładów kodu HTML5 zostanie zakwalifikowany przez walidator HTML jako błędny?
Poprawna odpowiedź. Wybrany fragment jest błędny dla walidatora HTML, ponieważ element style został umieszczony wewnątrz akapitu p. W HTML5 element p ma dość ograniczony model zawartości: powinien zawierać tzw. phrasing content, czyli treść tekstową i elementy „liniowe”, na przykład span, a, img, strong czy em. Element style nie należy do typowej treści akapitu. Służy do definiowania reguł CSS i zgodnie z dobrymi praktykami powinien znajdować się w sekcji head dokumentu albo style powinny być przeniesione do zewnętrznego pliku CSS. Moim zdaniem to jest jeden z tych błędów, które łatwo przeoczyć, bo przeglądarka często „jakoś” to wyrenderuje, ale walidator patrzy na zgodność ze standardem, a nie na to, czy strona przypadkiem wygląda dobrze. Poprawniej byłoby zapisać na przykład: <head><style>.a{color:#F00}</style></head>, a w treści użyć <p class="a">tekst</p>. Jeszcze lepsza praktyka w większym projekcie to plik style.css i podłączenie go przez link rel="stylesheet". Dzięki temu HTML odpowiada za strukturę, a CSS za wygląd, czyli kod jest czystszy i łatwiej go utrzymać.
Pytanie 19
Którego narzędzia użyć, aby usunąć szum tła z nagrania (z taniego mikrofonu)?
A. usuwania szumówTwoja odpowiedź
B. obwiedni
C. echa
D. wyciszenia
Poprawna odpowiedź. Stały szum tła z taniego mikrofonu usuwa się narzędziem „usuwania szumów” (np. Noise Reduction w Audacity) - analizuje ono próbkę samego szumu i odejmuje go z całego nagrania. Dlatego należy użyć usuwania szumów.
Pytanie 20
Który z podanych znaczników HTML nie jest używany do formatowania tekstu?
A.
<div>
Poprawna odpowiedź
B.
<em>
Twoja odpowiedź
C.
<sub>
D.
<strong>
Niepoprawna odpowiedź. Znaczniki <em>, <sub> oraz <strong> są używane do formatowania tekstu w HTML, co czyni je nieodpowiednimi odpowiedziami w kontekście tego pytania. <em> jest używane do oznaczania tekstu, który ma być wyrażony w sposób emfatyczny, co zazwyczaj przekłada się na wyświetlenie go w kursywie. Przykładowo, <em>ważne</em> może być użyte w zdaniu, aby podkreślić znaczenie określonego słowa. Z kolei <sub> służy do wyświetlania tekstu w dolnym indeksie, co jest typowe dla wzorów chemicznych, gdzie można spotkać H<sub>2</sub>O dla wody. Zastosowanie <sub> jest zatem ograniczone do specyficznych kontekstów, gdzie potrzebne jest obniżenie tekstu. Natomiast <strong> jest znacznikiem, który wskazuje na silny akcent, co często prowadzi do wyświetlenia tekstu w pogrubieniu. Użycie <strong> w taki sposób, jak w przypadku <strong>ważne</strong>, sygnalizuje dla użytkowników i wyszukiwarek, że dany tekst ma istotne znaczenie. Wszystkie te znaczniki są zatem używane do stylistycznego podkreślenia lub formatowania treści w HTML, co jest ich zasadniczą funkcją, a tym samym sprawia, że nie mogą być one poprawne w kontekście tego pytania o znacznikach, które nie są związane z formatowaniem tekstu.
Pytanie 21
Parametr face elementu <font> jest używany do wskazania
A. efektów czcionki
B. koloru czcionki
C. rozmiaru czcionki
D. nazwa czcionkiTwoja odpowiedź
Poprawna odpowiedź. Parametr face znacznika <font> w HTML definiuje konkretną nazwę czcionki, która ma być używana do wyświetlania tekstu. Umożliwia to projektantom stron internetowych precyzyjne określenie, jak tekst będzie wyglądał, co jest istotne dla estetyki oraz czytelności strony. W praktyce, zamiast stosować ogólne czcionki systemowe, projektanci mogą wskazać konkretne nazwy czcionek, jak 'Arial', 'Verdana' czy 'Times New Roman', aby osiągnąć zamierzony efekt wizualny. Warto jednak pamiętać, że stosowanie znacznika <font> oraz jego atrybutu face jest już przestarzałe, a w nowoczesnym kodowaniu lepiej jest korzystać z CSS, gdzie właściwość 'font-family' pełni tę samą funkcję, ale z większą elastycznością i lepszym wsparciem dla różnych urządzeń. Przykładowo, zamiast <font face='Arial'>Tekst</font>, w CSS można użyć: <style> p { font-family: Arial; } </style>. Z perspektywy dobrych praktyk, zaleca się używanie CSS do stylizacji tekstu, co pozwala na lepszą separację treści od prezentacji oraz łatwiejsze zarządzanie stylami w całym dokumencie.
Pytanie 22
Aby przygotować szablon strony z trzema kolumnami ustawionymi obok siebie, należy posłużyć się stylem CSS:
A.
.kolumny{float:left;width:33%;}
Twoja odpowiedź
B.
.kolumny{clear:both;height:33%;}
C.
.kolumny{float:right;height:33%;}
D.
.kolumny{float:left;width:40%;}
Poprawna odpowiedź. Aby ustawić trzy kolumny obok siebie metodą opływania, każdej nadaje się float:left oraz szerokość około jednej trzeciej kontenera, czyli width:33%. Dzięki float elementy blokowe układają się w jednym rzędzie zamiast jeden pod drugim, a szerokość 33% sprawia, że trzy kolumny wypełniają całą szerokość. Dlatego poprawny jest styl .kolumny{float:left;width:33%;}.
Pytanie 23
Wskaż, które z poniższych zdań jest prawdziwe w odniesieniu do 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. Jest to styl zasięg lokalny
B. Odnośnik będzie napisany czcionką o rozmiarze 14 punktów
C. Akapit będzie przekształcany na małe litery
D. Zdefiniowano dwie klasyTwoja odpowiedź
Poprawna odpowiedź. W tym kodzie CSS masz zdefiniowane dwie klasy: 'niebieski' i 'czerwony', które są przypisane do elementów TD. To super, bo te klasy zmieniają kolor tekstu w tabeli, a to jest zgodne z tym, jak działają kaskadowe arkusze stylów (CSS). Klasa 'niebieski' ustawia tekst na niebiesko, a 'czerwony' na czerwono. Dzięki takim klasom można zaoszczędzić sporo czasu, bo używasz tych samych stylów w różnych miejscach w HTML. Widać, że pomyślałeś o organizacji swojego kodu. Dodatkowo, masz też style dla elementów P i A — P jest niebieski i ma czcionkę 14 punktów w kursywie, a A ma większą 16-punktową czcionkę. To pokazuje, jak elastyczne jest CSS w stylizacji różnych elementów. Fajnie, że trzymasz się dobrych praktyk w programowaniu, bo to naprawdę ułatwia późniejsze modyfikacje.
Pytanie 24
Czego użyć, aby zbadać ROZKŁAD ILOŚCIOWY kolorów (jasności) na zdjęciu?
A. balansu kolorów
B. rozmycia Gaussa
C. desaturacji
D. histogramuTwoja odpowiedź
Poprawna odpowiedź. Histogram to wykres pokazujący ROZKŁAD ILOŚCIOWY pikseli wg jasności (lub kanałów koloru) na zdjęciu - od cieni po światła. Pozwala ocenić ekspozycję i kontrast. Dlatego do badania rozkładu kolorów służy histogram.
Pytanie 25
Który zapis <img> jest poprawny zgodnie z walidacją HTML5?
A.
<imgsrc="mojPiesek.jpg">
B.
<imgsrc=mojPiesek.jpg" alt="pies>
C.
<imgsrc="mojPiesek.jpg"alt="pies">
Twoja odpowiedź
D.
<imgsrc=mojPiesek.jpgalt=pies>
Poprawna odpowiedź. Poprawny zapis to <imgsrc="mojPiesek.jpg"alt="pies"> - wartości atrybutów src i alt ujęte są w cudzysłowy, a znacznik jest poprawnie domknięty. Dlatego prawidłowy jest ten zapis.
Pytanie 26
W jakiej technologii nie zachodzi możliwość przetwarzania danych wprowadzanych przez użytkowników na stronach internetowych?
A. CSSTwoja odpowiedź
B. JavaScript
C. AJAX
D. PHP
Poprawna odpowiedź. CSS (Cascading Style Sheets) to język stylów, który służy do opisywania wyglądu i formatu dokumentów HTML. Jego głównym celem jest kontrolowanie układu, kolorów, czcionek oraz innych aspektów wizualnych strony internetowej. CSS nie ma możliwości przetwarzania danych wprowadzanych przez użytkowników, gdyż nie posiada funkcji logiki programistycznej ani operacji na danych. Przykładowo, CSS może zmieniać kolor tła lub rozmiar tekstu, ale nie może zbierać informacji z formularzy ani reagować na interakcje użytkownika w sposób, w jaki robią to języki programowania takie jak JavaScript czy PHP. Może to prowadzić do mylnych przekonań, że CSS jest bardziej wszechstronny, niż jest w rzeczywistości, jednak jego zastosowanie ogranicza się wyłącznie do aspektów stylistycznych. W praktyce, aby przetwarzać dane użytkownika, niezbędne są inne technologie, które mogą współpracować z CSS, ale same w sobie nie są w stanie tego zrobić.
Pytanie 27
Którego słowa kluczowego używa się w CSS, aby dołączyć zewnętrzny arkusz stylów?
A. include
B. importTwoja odpowiedź
C. open
D. require
Poprawna odpowiedź. W CSS zewnętrzny arkusz stylów można dołączyć regułą @import, np. @importurl("style.css");, umieszczoną na początku arkusza. Alternatywnie (i najczęściej) robi się to w HTML znacznikiem <linkrel="stylesheet"href="style.css">, który zwykle działa szybciej. Spośród podanych słów kluczowych poprawne jest import.
Pytanie 28
Symbol, który pojawia się przed adresem w pasku adresowym przeglądarki internetowej lub przy tytule otwartej karty, określany jest mianem
A. iConji
B. emoticon
C. webicon
D. faviconTwoja odpowiedź
Poprawna odpowiedź. Favicon, czyli ikona ulubionej strony, to mały obrazek wyświetlany w przeglądarkach internetowych obok adresu URL, w zakładkach oraz na kartach przeglądarki. Favicon jest istotnym elementem identyfikacji wizualnej witryny, ponieważ pozwala użytkownikom na szybkie rozpoznawanie stron, które odwiedzają. Tworzenie faviconu wiąże się z określonymi standardami, ponieważ rozmiar pliku powinien wynosić 16x16 lub 32x32 pikseli. Można go zapisać w formacie .ico, .png, .gif, co zapewnia szeroką kompatybilność z różnymi przeglądarkami. Wdrożenie faviconu poprawia UX, zwiększa profesjonalizm strony i wpływa na jej rozpoznawalność. Dobrym przykładem zastosowania faviconu jest umieszczanie go na stronie głównej, co ułatwia zapamiętywanie marki oraz zwiększa szanse na powrót użytkowników do witryny. Właściwe przygotowanie faviconu oraz jego umiejscowienie w kodzie HTML (z wykorzystaniem tagu <link rel="icon" href="ścieżka_do_faviconu">) to dobrych praktyk, które warto stosować w każdej nowoczesnej aplikacji webowej.
Pytanie 29
W kodzie źródłowym zapisanym w języku HTML wskaż błąd walidacji dotyczący tego fragmentu. <h6>CSS</h6> <p>Kaskadowe arkusze stylów <b>ang.<i>Cascading Style Sheets</b></i>)<br>to język służący...</p>
A. Znak zamykający /b jest niezgodny z zasadą zagnieżdżania.Twoja odpowiedź
B. Znak br nie może być użyty wewnątrz znacznika p.
C. Znak br nie został prawidłowo zamknięty.
D. Znacznik h6 jest nieznany.
Poprawna odpowiedź. W analizowanym fragmencie kodu HTML występuje błąd związany z niewłaściwym zagnieżdżeniem znaczników. W szczególności, znacznik zamykający </b> został umieszczony przed zamknięciem znacznika <i>, co narusza zasady zagnieżdżania elementów w HTML. Zgodnie z wytycznymi W3C (World Wide Web Consortium), każdy znacznik otwierający musi mieć odpowiedni znacznik zamykający w odpowiedniej kolejności, a zagnieżdżanie elementów musi być przestrzegane, aby zapewnić poprawną strukturę dokumentu. W tym przypadku poprawna sekwencja powinna wyglądać następująco: <i>...</i><b>...</b>, co oznacza, że znacznik <i> powinien być zamknięty po znaczniku <b>. Przykładowo, prawidłowy zapis mógłby wyglądać tak: <p>Kaskadowe arkusze stylów <b>ang.<i>Cascading Style Sheets</i></b> to język służący...</p>. Taka struktura zapewnia, że znaczniki są poprawnie zagnieżdżone, co przekłada się na lepszą interpretację przez przeglądarki oraz narzędzia do walidacji HTML.
Pytanie 30
Który kod HTML zapewni identyczny efekt formatowania jak na przedstawionym obrazku?
W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML
A.
<p>W tym <i>paragrafie <b>zobaczysz</b> sposoby formatowania</i> tekstu w HTML</p>
Poprawna odpowiedź
B.
<p>W tym <i>paragrafie </i><b>zobaczysz</b><i> sposoby formatowania</i> tekstu w HTML</p>
Twoja odpowiedź
C.
<p>W tym <i>paragrafie zobaczysz sposoby formatowania</i> tekstu w HTML</p>
D.
<p>W tym <b>paragrafie <i>zobaczysz</i> sposoby formatowania</b> tekstu w HTML</p>
Niepoprawna odpowiedź. Wybór niepoprawnych odpowiedzi wynika z błędnego użycia znaczników HTML, co wpływa na końcowe formatowanie tekstu. Pierwsza odpowiedź zawiera błąd polegający na niewłaściwym zamknięciu znacznika <b> przez dodanie spacji przed ukośnikiem, co powoduje, że przeglądarki mogą błędnie interpretować strukturę HTML. W konsekwencji, tekst może nie być prawidłowo pogrubiony, ponieważ przeglądarka nie rozpoznaje zamknięcia znacznika. Trzecia odpowiedź całkowicie pomija znacznik <b>, co oznacza, że tekst 'zobaczysz' nie zostanie pogrubiony, co jest niezgodne z wymaganym efektem wizualnym. Brak zastosowania odpowiednich znaczników wpływa na semantyczne znaczenie zawartości, co jest kluczowe w kontekście dostępności i dobrych praktyk w web designie. Czwarta odpowiedź błędnie rozdziela znaczniki <i> wokół słowa 'zobaczysz', co nie tworzy efektu jednoczesnej kursywy i pogrubienia. Wiedza dotycząca zagnieżdżania znaczników jest istotna, aby uzyskać pożądany efekt wizualny, a także utrzymać semantykę i dostępność zgodnie z nowoczesnymi standardami tworzenia stron internetowych. Rozumienie hierarchii i poprawne zamykanie znaczników ma kluczowe znaczenie dla renderowania strony zgodnie z oczekiwaniami, jak również dla zachowania zgodności z HTML5.
Pytanie 31
Metainformacja "Description" zawarta w pliku HTML powinna zawierać
D. listę kluczowych fraz używanych przez wyszukiwarki internetowe
Niepoprawna odpowiedź. Wybór niepoprawnych odpowiedzi wskazuje na nieporozumienie dotyczące funkcji metainformacji 'Description'. Informacja o autorze strony nie jest ujęta w tej sekcji; zamiast tego, powinna być umieszczona w metatagach takich jak 'author', które podają dane o osobie lub organizacji odpowiedzialnej za stronę. Wyszukiwarki nie korzystają z tej informacji przy indeksowaniu treści, co czyni ją nieistotną dla opisu strony. Również wykazy kluczowe, takie jak metatagi 'keywords', stały się przestarzałe w kontekście SEO; dzisiejsze algorytmy wyszukiwarek skupiają się na głębszym zrozumieniu treści, a nie na prostym wskaźniku słów kluczowych. Ostatnią kwestią jest nazwa programu, przy użyciu którego strona została stworzona. Tego rodzaju informacja jest zbędna i nie wpływa na zawartość strony ani jej ocenę w wyszukiwarkach. W praktyce, metainformacja 'Description' powinna jasno przedstawiać, co użytkownik znajdzie na stronie, a nie zawierać danych o autorze, słowach kluczowych czy narzędziach użytych do jej stworzenia.
Pytanie 32
Który efekt został zaprezentowany na filmie?
A. Zwiększenie ostrości zdjęcia.
B. Zmniejszenie kontrastu zdjęcia.
C. Zmiana jasności zdjęć.
D. Przenikanie zdjęć.Twoja odpowiedź
Poprawna odpowiedź. Poprawnie wskazany efekt to przenikanie zdjęć, często nazywane też płynnym przejściem (ang. crossfade). Polega to na tym, że jedno zdjęcie stopniowo zanika, jednocześnie drugie pojawia się z narastającą widocznością. W praktyce technicznej realizuje się to najczęściej przez zmianę przezroczystości (opacity) dwóch warstw – jedna warstwa z pierwszym obrazem ma zmniejszaną wartość opacity z 1 do 0, a druga z kolejnym zdjęciem zwiększaną z 0 do 1. Na stronach WWW taki efekt robi się zwykle za pomocą CSS (transition, animation, keyframes) albo JavaScriptu, czasem z użyciem bibliotek typu jQuery czy gotowych sliderów. Moim zdaniem to jest jeden z podstawowych efektów, który warto umieć odtworzyć, bo pojawia się w galeriach, sliderach na stronach głównych, prezentacjach produktów czy prostych pokazach slajdów. W materiałach multimedialnych, np. w edycji wideo, dokładnie ten sam efekt nazywa się przejściem typu „cross dissolve” lub „fade”, i zasada działania jest identyczna – płynne nakładanie się dwóch klatek obrazu w czasie. Dobre praktyki mówią, żeby nie przesadzać z czasem trwania przenikania: zwykle 0,5–1,5 sekundy daje przyjemny, profesjonalny wygląd, bez wrażenia „zamulenia” interfejsu. Warto też pilnować spójności – jeśli na stronie używasz przenikania w jednym miejscu, dobrze jest utrzymać podobny styl animacji w innych elementach, żeby całość wyglądała konsekwentnie i nie rozpraszała użytkownika. W kontekście multimediów na WWW przenikanie jest też korzystne wydajnościowo, bo operuje głównie na właściwości opacity i transformacjach, które przeglądarki potrafią optymalizować sprzętowo.
Pytanie 33
Do czego odnosi się termin „front-end” w kontekście tworzenia stron internetowych?
A. do działania skryptów wykonywanych po stronie serwera
B. do organizacji danych na serwerze WWW
C. do interfejsu strony i technologii działających w przeglądarceTwoja odpowiedź
D. do bazy danych z informacjami prezentowanymi na stronie
Poprawna odpowiedź. Termin „front-end” odnosi się do warstwy widocznej dla użytkownika - interfejsu strony i technologii działających w PRZEGLĄDARCE (HTML, CSS, JavaScript). Dlatego front-end to interfejs strony i technologie działające w przeglądarce.
Pytanie 34
Której wartości właściwości background-attachment użyć, aby tło pozostało nieruchome względem okna przeglądarki?
A.
fixed
Poprawna odpowiedź
B.
scroll
Twoja odpowiedź
C.
inherit
D.
local
Niepoprawna odpowiedź. Pozostałe wartości zachowują się inaczej. scroll (domyślna) przewija tło razem z treścią - odwrotnie do wymagania. local wiąże tło z przewijaniem zawartości elementu, a inherit dziedziczy ustawienie po rodzicu. Tło nieruchome względem okna daje fixed.
Pytanie 35
W CSS zapis selektora p > i { color: red; } wskazuje, że kolor czerwony zostanie zastosowany do
A. wyłącznie tekstu w znaczniku <i>, który znajduje się bezpośrednio wewnątrz znacznika <p>Poprawna odpowiedź
B. wszystkiego tekstu w znaczniku <p> z wyjątkiem tekstu w znaczniku <i>
C. tylko tego tekstu w znaczniku <p>, który ma przypisaną klasę o nazwie iTwoja odpowiedź
D. wszelkiego tekstu w znaczniku <p> lub wszelkiego tekstu w znaczniku <i>
Niepoprawna odpowiedź. Zrozumienie selektorów CSS jest kluczowe dla ich poprawnego zastosowania. W przypadku analizy odpowiedzi, które nie są poprawne, istnieją podstawowe błędy w interpretacji selektorów. Wskazanie, że każdy tekst w znaczniku <p> lub <i> miałby być sformatowany, świadczy o mylnym rozumieniu, jak działają selektory CSS. Selekcja całej zawartości <p> lub <i> ignoruje kluczowy element selektora, jakim jest symbol '>', który precyzyjnie definiuje relację między elementami. Z kolei stwierdzenie, że każdy tekst w znaczniku <p> za wyjątkiem tych w znaczniku <i> byłby formatowany, także wprowadza w błąd, ponieważ nie ma to zastosowania do selektora dzieci. W rzeczywistości, forma ta nie wprowadza w życie żadnych reguł CSS i prowadzi do nieporozumień. Pojęcie przypisania klasy w kontekście selektora określającego <i> jest również mylące; klasy są definiowane oddzielnie i nie mają wpływu na znaczniki bezpośrednio. Kluczowe jest, aby w zrozumieniu CSS zwracać uwagę na hierarchię i relacje między elementami, co pozwala na efektywną kontrolę nad stylem prezentacji treści w dokumentach HTML.
Pytanie 36
Barwy reprezentowane graficznie na stożku (barwa, nasycenie, jasność) uzyskuje się w modelu:
A. HSVTwoja odpowiedź
B. CMYK
C. CIEXYZ
D. RGB
Poprawna odpowiedź. Model HSV opisuje kolor trzema parametrami: barwą (Hue), nasyceniem (Saturation) i jasnością (Value). Graficznie przedstawia się go jako stożek (lub walec): kąt to barwa, odległość od osi to nasycenie, a wysokość to jasność. Taki układ jest intuicyjny dla człowieka. Dlatego barwy na stożku reprezentuje model HSV.
Pytanie 37
Która grupa znaczników HTML służy do GRUPOWANIA elementów i budowy struktury dokumentu?
A.<br>, <img>, <hr>
B.<table>, <tr>, <td>
C.<div>, <article>, <header>Twoja odpowiedź
D.<span>, <strong>, <em>
Poprawna odpowiedź. Do grupowania elementów i budowy struktury dokumentu służą znaczniki blokowe i semantyczne: <div> (uniwersalny kontener) oraz <article> i <header> (sekcje HTML5). Wyznaczają one układ strony. Dlatego strukturę buduje grupa <div>,<article>,<header>.
Pytanie 38
Przy założeniu, że nie istnieją inne definicje, jakie skutki będzie miało poniższe formatowanie CSS?
A. margines wewnętrzny komórki z napisem Anna wyniesie 30 px, a z napisem Ewa – 10 px
B. marginesy wewnętrzne wszystkich komórek wyniosą 30 pxTwoja odpowiedź
C. margines wewnętrzny komórki z napisem Anna wyniesie 10 px, a z napisem Ewa – 30 pxPoprawna odpowiedź
D. marginesy wewnętrzne wszystkich komórek wyniosą 10 px
Niepoprawna odpowiedź. Analizując podane odpowiedzi, konieczne jest zrozumienie, jak działa specyficzność w CSS. Częstym błędem jest zakładanie, że reguły zdefiniowane w sekcji style zawsze przeważają nad innymi. Jednak style inline, czyli te bezpośrednio przypisane do elementu HTML, mają wyższy priorytet. Dlatego komórka z napisem Anna, mimo że wszystkie komórki td mają globalnie zdefiniowany padding 30px, będzie mieć padding 10px, ponieważ zapis style="padding: 10px;" bezpośrednio przypisany do niej nadpisuje regułę globalną. Myślenie, że marginesy wszystkich komórek będą równe 30px, jest błędem wynikającym z niezrozumienia priorytetów CSS. Podobnie, założenie, że wszystkie komórki mają padding 10px, ignoruje fakt, że tylko dla jednej komórki użyto stylu inline. Zrozumienie tych mechanizmów jest kluczowe dla efektywnego stylowania stron internetowych. Zasadą dobrych praktyk jest stosowanie zewnętrznych arkuszy stylów, co nie tylko poprawia czytelność kodu, ale także pozwala na lepsze zarządzanie stylem całej witryny. Użycie stylów inline powinno być ograniczone do wyjątkowych przypadków, gdzie konieczne jest szybkie nadpisanie stylu, co jednak może prowadzić do mniej optymalnego kodu w dłuższej perspektywie.
Pytanie 39
W CSS wartości takie jak: underline, overline, line-through oraz blink odnoszą się do właściwości
A. font-style
B. font-decorationTwoja odpowiedź
C. text-decorationPoprawna odpowiedź
D. text-align
Niepoprawna odpowiedź. Właściwość 'text-align' dotyczy ustawienia wyrównania tekstu w obrębie kontenera. Jej zastosowanie koncentruje się na takich wartościach jak 'left', 'right', 'center' czy 'justify', które wpływają na układ tekstu na stronie, ale nie mają związku z jego dekoracją. Z kolei 'font-style' odnosi się do stylu czcionki, umożliwiając taką manipulację jak kursywa lub normalny styl, jednak nie kontroluje dekoracji tekstu. Z kolei 'font-decoration' nie jest standardową właściwością CSS; błędne jej wykorzystanie może wynikać z nieznajomości konwencji CSS. Właściwości takie jak 'text-decoration' są zdecydowanie bardziej odpowiednie do osiągania zamierzonych efektów wizualnych na tekście. Często początkujący programiści mylą te różne właściwości, co prowadzi do niepoprawnego stylizowania elementów tekstowych. Warto zwrócić uwagę, że każda z wymienionych właściwości ma swoje unikalne zastosowanie i wymagania, dlatego kluczowe jest zrozumienie ich specyfiki oraz kontekstu użycia w projekcie stron internetowych. Prawidłowe stosowanie właściwości CSS jest niezbędne dla zapewnienia estetyki oraz funkcjonalności strony, co jest fundamentalne w nowoczesnym web designie.
Pytanie 40
W HTML-u znacznik tekst będzie prezentowany przez przeglądarkę w sposób identyczny do znacznika
A.
<sub>tekst</sub>
B.
<b>tekst</b>
Poprawna odpowiedź
C.
<big>tekst</big>
D.
<h1>tekst</h1>
Twoja odpowiedź
Niepoprawna odpowiedź. Wybór znaczników <sub>, <h1>, czy <big> w odpowiedzi na pytanie o semantykę i stylizację tekstu jest nieadekwatny. Znacznik <sub> służy do podkreślenia tekstu dolnego, najczęściej używanego w kontekście chemicznym lub matematycznym, np. H₂O, i nie ma nic wspólnego z wyróżnianiem ważności tekstu. Natomiast <h1> to znacznik nagłówka, który definiuje tytuł sekcji lub podsekcji na stronie internetowej. Użycie <h1> dla tekstu, który ma być po prostu pogrubiony, wprowadza w błąd w kontekście struktury semantycznej dokumentu HTML, ponieważ nagłówki mają swoją hierarchię i powinny być używane w odpowiednich miejscach, zgodnie z zasadami SEO. Znacznik <big> z kolei powiększa rozmiar czcionki, co nie jest równoważne z wyróżnieniem tekstu jako ważnego. Każdy z tych znaczników ma własne zastosowanie, ale nie można ich używać zamiennie z <strong>, ponieważ nie przekazują one tego samego znaczenia semantycznego. Przy projektowaniu stron internetowych kluczowe jest stosowanie znaczników zgodnie z ich przeznaczeniem, aby mieć pewność, że treść jest właściwie interpretowana przez przeglądarki oraz urządzenia asystujące.