Odtwarzaj przebieg egzaminu krok po kroku i ucz się na własnych błędach. Widzisz dokładnie, w jakiej kolejności rozwiązywałeś pytania, ile czasu spędziłeś nad każdym z nich i kiedy zmieniałeś odpowiedzi.
Co znajdziesz na stronie przebiegu:
Suwak czasu
Przesuwaj i przeglądaj pytania w kolejności, w jakiej je rozwiązywałeś
Tryb nauki
Włącz, aby zobaczyć poprawne odpowiedzi i wyjaśnienia do pytań
Analiza czasu
Sprawdź, ile czasu spędziłeś nad każdym pytaniem i gdzie traciłeś czas
Monitoring focusu
Widzisz momenty, gdy opuściłeś zakładkę - tak jak widzi to nauczyciel
Strona internetowa została stworzona w języku XHTML. Który z poniższych kodów reprezentuje realizację zaprezentowanego fragmentu strony, jeśli nie zdefiniowano żadnych stylów CSS?
A. C
B. A
C. B
D. D
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 2
W wyniku walidacji strony został wygenerowany błąd. Oznacza on, że
A. w znaczniku meta nie występuje atrybut charset.
B. oznaczenie ISO-8859-2 nie istnieje.
C. oznaczenie kodowania znaków powinno być zapisane bez myślników.
D. w atrybucie charset jest dozwolona wyłącznie wartość "utf-8".
No niestety, odpowiedź nie jest poprawna. Ten błąd walidacji wynika z tego, że przy atrybucie charset w znaczniku meta tylko 'utf-8' jest akceptowane. Inne oznaczenia, jak 'iso-8859-2', mimo że są poprawne jako typy kodowania, nie mogą być używane w tym kontekście. Również pamiętaj, że atrybut charset nie może być pusty, co sugeruje jedna z Twoich odpowiedzi. HTML5 wymaga, żeby ten atrybut zawsze był obecny i miał wartość 'utf-8'. A tak w ogóle, nie można podawać kodowania bez myślników. Prawdziwy zapis to 'utf-8'. Z kolei 'iso-8859-2' jest wprawdzie realnym typem kodowania, ale w tym przypadku to nie przechodzi.
Pytanie 3
W kodzie HTML znajdziemy formularz. Jaki rezultat zostanie pokazany przez przeglądarkę, jeśli użytkownik wprowadził do pierwszego pola wartość "Przykładowy text"?
A. Efekt 4
B. Efekt 3
C. Efekt 1
D. Efekt 2
Niepoprawne odpowiedzi wynikają z błędnego zrozumienia struktury formularza HTML. W przypadku efektu pierwszego widać, że checkboxy zostały zamienione na radiobuttony, co może sugerować, że użytkownik może wybrać tylko jedną z opcji. Jest to niezgodne z kodem, który jasno określa pola jako checkboxy, co pozwala na wielokrotny wybór. Efekt trzeci pokazuje nieprawidłowe pozycjonowanie elementów formularza, które nie odzwierciedla rzeczywistego układu z kodu HTML. Błędne zrozumienie struktury może wynikać z nieznajomości zasady działania poszczególnych elementów formularza, takich jak <textarea> i <input type='checkbox'>. <Textarea> powinno być stosowane do wprowadzania tekstu wielowierszowego, a checkboxy są idealne do prezentacji listy opcji, które mogą być niezależnie zaznaczone. Efekt czwarty przedstawia radiobuttony zamiast checkboxów, co całkowicie zmienia funkcję formularza. Warto w tym kontekście zrozumieć różnicę między radiobuttonami a checkboxami, gdzie pierwsze są używane do wyboru jednej z wielu opcji, a drugie do wielokrotnego wyboru. Kluczowe jest również poprawne stosowanie i testowanie formularzy w celu zapewnienia ich funkcjonalności i intuicyjności dla użytkownika końcowego.
Pytanie 4
W przypadku podanego fragmentu kodu walidator HTML zgłosi błąd, ponieważ <img src="kwiat.jpg alt="kwiat">
A. nie zamknięto cudzysłowu
B. brak obrazu kwiat.jpg
C. zastosowano nieznany atrybut alt
D. użyto niewłaściwego znacznika do wyświetlenia obrazu
W przedstawionym kodzie HTML występuje błąd związany z niedomknięciem cudzysłowu dla atrybutu 'src'. Prawidłowa składnia powinna wyglądać następująco: <img src="kwiat.jpg" alt="kwiat">. Brak cudzysłowu po 'kwiat.jpg' uniemożliwia poprawne zinterpretowanie kodu przez przeglądarki, co skutkuje błędem walidacji. Zasady walidacji kodu HTML są zgodne z wytycznymi W3C, które zalecają, aby każdy atrybut był zamknięty cudzysłowem. Poprawność kodu nie tylko wpływa na jego działanie, ale również na dostępność strony oraz SEO. Użytkownicy, którzy poruszają się po stronach bez pełnej obsługi HTML, mogą napotkać problemy z wyświetlaniem obrazów. W praktyce, zawsze warto stosować dobregi praktyki kodowania, takie jak użycie linterów do sprawdzania poprawności kodu przed jego publikacją, aby uniknąć takich błędów.
Pytanie 5
Jeżeli rozmiar pliku graficznego jest zbyt duży do publikacji w sieci, co należy zrobić?
A. zwiększyć jego głębię kolorów
B. zapisać w formacie BMP
C. zmniejszyć jego rozdzielczość
D. dodać kanał alfa
Zmniejszenie rozdzielczości pliku graficznego jest jedną z najskuteczniejszych metod na zmniejszenie jego rozmiaru, co jest niezwykle ważne w kontekście publikacji w Internecie. Rozdzielczość obrazu odnosi się do liczby pikseli, które składają się na dany obraz, wyrażoną zazwyczaj w pikselach na cal (PPI) lub w całkowitej liczbie pikseli w szerokości i wysokości. Zmniejszając rozdzielczość, obniżamy liczbę pikseli, co w efekcie prowadzi do mniejszego rozmiaru pliku. Na przykład, obraz o rozdzielczości 4000x3000 pikseli ma 12 milionów pikseli, podczas gdy obraz o rozdzielczości 2000x1500 pikseli zaledwie 3 miliony pikseli. Oprócz zmniejszenia rozdzielczości, można również zastosować inne techniki kompresji, takie jak zmiana formatu pliku na JPEG, który jest bardziej efektywny w kompresji zdjęć, a także wykorzystanie narzędzi do optymalizacji grafiki, takich jak TinyPNG czy ImageOptim. Zmniejszając rozdzielczość, należy jednak pamiętać o zachowaniu odpowiedniej jakości obrazu, aby nie wpłynęło to negatywnie na jego czytelność i estetykę, co jest kluczowe w kontekście publikacji online.
Pytanie 6
Znacznik <ins> w HTML ma na celu wskazanie
A. bloku tekstu, który jest cytowany
B. tekstu, który został usunięty
C. tekstu, który został przerobiony
D. tekstu, który został dodany
Znaczniki HTML mają swoje ściśle określone funkcje i znaczenie, a błędna interpretacja ich roli może prowadzić do nieodpowiedniego użycia w tworzeniu stron internetowych. Jednym z typowych błędów jest mylenie znacznika <ins> z innymi elementami, takimi jak <del>, który służy do oznaczania tekstu usuniętego. Element <del> jest używany do wskazania, że dany tekst został wykreślony lub usunięty z dokumentu, co jest przeciwieństwem działania znacznika <ins>. Innym mylnym przekonaniem jest przypisywanie elementowi <ins> funkcji formatowania tekstu, co nie jest jego przeznaczeniem. Znacznik <ins> nie służy do zmiany stylu tekstu, a do wskazywania, które fragmenty tekstu zostały dodane w porównaniu do wcześniejszej wersji. Kolejnym wartym uwagi aspektem jest to, że element <ins> nie jest przeznaczony do oznaczania cytatów. Cytaty są zazwyczaj oznaczane za pomocą znacznika <blockquote> lub <q>, które mają zupełnie inne cele. Zachowanie zgodności ze standardami HTML oraz właściwe użycie znaczników semantycznych ma kluczowe znaczenie dla tworzenia dostępnych i zrozumiałych stron internetowych. Niezrozumienie funkcji danego znacznika może prowadzić do poważnych konsekwencji, takich jak trudności w indeksowaniu przez wyszukiwarki, co w efekcie wpływa na widoczność strony w Internecie.
Pytanie 7
Wskaż sposób, w jaki należy odwołać się do pliku default.css, jeśli index.html znajduje się bezpośrednio w katalogu Strona?
A. <link rel="stylesheet" type="text/css" href="...\style\default.css" />
B. <link rel="stylesheet" type="text/css" href="c:\style/default.css" />
C. <link rel="stylesheet" type="text/css" href="./style/default.css" />
D. <link rel="stylesheet" type="text/css" href="c:/style/default.css" />
Błędne odpowiedzi w tym pytaniu wynikają z niewłaściwego użycia ścieżek do plików. Dwie z błędnych odpowiedzi sugerują użycie ścieżki bezwzględnej do pliku (rozpoczynającej się od 'c:/' lub 'c:\'), co nie jest zalecane, ponieważ takie ścieżki są specyficzne dla konkretnego systemu plików i mogą nie działać w innych środowiskach. Ponadto jedna z błędnych odpowiedzi sugeruje użycie nieprawidłowej składni ('...\') do odwołania się do pliku. Dobrą praktyką jest zawsze korzystanie ze ścieżek względnych podczas odwoływania się do plików w HTML, ponieważ są one uniwersalne i niezależne od systemu plików. Pamiętaj, że właściwe zarządzanie ścieżkami do plików i organizacja plików w strukturze katalogu to klucz do skutecznego i efektywnego kodowania.
Pytanie 8
W CSS zapisany w ten sposób:
p { background-image: url("rysunek.png"); }
spowoduje, że rysunek.png stanie się
A. wyświetlony, jeśli w kodzie użyty zostanie znacznik img
B. tłem każdego akapitu
C. tłem całej witryny
D. widoczny obok każdego akapitu
W przypadku stylowania elementów za pomocą CSS, bardzo łatwo popełnić błąd interpretacyjny, jeśli nie zna się szczegółów działania selektorów czy właściwości stylów. Zapis p { background-image: url("rysunek.png"); } dotyczy wyłącznie elementów <p>, czyli akapitów, a nie całej witryny. Popularnym nieporozumieniem jest myślenie, że taka reguła zmieni tło całej strony — w rzeczywistości, aby osiągnąć taki efekt, należałoby użyć selektora body, np. body { background-image: ... }, bo to body odpowiada za tło całego dokumentu. Jeśli ktoś zakłada, że obrazek pojawi się tylko wtedy, gdy w HTML użyjemy <img src="rysunek.png">, to miesza dwie zupełnie osobne koncepcje: background-image ustawia grafikę w tle elementu, a <img> osadza ją w strukturze treści jako samodzielny obiekt — to dwie różne rzeczy. Sam background-image nie potrzebuje obecności znacznika <img>; przeglądarka pobierze i wyświetli grafikę tylko jako tło elementu. Natomiast odpowiedź sugerująca, że obrazek będzie widoczny obok każdego akapitu, wynika chyba z niezrozumienia mechanizmu renderowania tła: CSS nie wstawia obrazka "obok" treści, tylko pod nią, w tle elementu, wypełniając całą jego powierzchnię (lub jej fragment w zależności od innych właściwości tła, np. background-repeat czy background-position). To często mylone z dekoracjami typu list-style-image w listach, gdzie obrazek rzeczywiście pojawia się obok tekstu listy. Warto zawsze czytać dokumentację i testować takie rzeczy samodzielnie — praktyka bardzo pomaga zrozumieć niuanse w CSS. Przemyślenie działania selektorów i właściwości to podstawa unikania takich nieporozumień podczas projektowania layoutów.
Pytanie 9
W CSS jednostką miary, która jest wyrażona w punktach edytorskich, oznaczana jest symbolem
A. em
B. px
C. pt
D. in
Jednostki 'em', 'px' oraz 'in' nie są związane z punktami edytorskimi, co czyni je nieodpowiednimi w tym kontekście. 'em' jest jednostką miary, która jest zależna od rozmiaru czcionki elementu nadrzędnego. To oznacza, że wartość '1em' odpowiada rozmiarowi czcionki zastosowanemu w danym kontekście. Używanie 'em' jest korzystne w przypadku responsywnego projektowania, ponieważ pozwala na skalowanie elementów w zależności od rozmiaru tekstu. Z kolei 'px', czyli piksel, to jednostka miary, która jest niezależna od rozmiaru czcionki i oznacza stałą wartość wyrażoną w pikselach. W świecie web designu, 'px' jest często preferowane ze względu na swoją przewidywalność i prostotę. Ostatnią z jednostek, 'in', oznacza cale i jest rzadko wykorzystywana w CSS, ponieważ jest bardziej związana z drukiem i rzadko stosowana w kontekście nawigacji webowej. W kontekście druku takie jednostki jak 'in' mogą być użyteczne, jednak w projektowaniu stron internetowych ich zastosowanie jest ograniczone. Każda z wymienionych jednostek ma swoje zastosowanie, ale nie można ich stosować zamiennie z 'pt', która jest jednoznacznie związana z punktami edytorskimi.
Pytanie 10
Jaki styl CSS umożliwi ustawienie tekstu do prawej strony?
A. <p style="text-align: right">tekst</p>
B. <p style="position: right">tekst</p>
C. <p style="align: right">tekst</p>
D. <p style="font: right">tekst</p>
Wybór niewłaściwych stylów CSS do wyrównania tekstu może prowadzić do nieczytelnych lub źle ułożonych treści na stronie. W pierwszej z niepoprawnych odpowiedzi sugeruje się użycie 'font: right', co jest kompletnie błędne, ponieważ 'font' jest właściwością, która służy do definiowania stylu czcionki, rozmiaru i wagi tekstu, a nie do wyrównania go. Takie użycie 'font' nie przyniesie żadnego efektu wyrównania tekstu i jest błędne z punktu widzenia składni CSS. W drugiej odpowiedzi jednako błędnie użyto 'align: right'. Warto zauważyć, że 'align' to atrybut HTML, który nie jest obsługiwany w CSS. CSS nie uznaje 'align' jako właściwości, więc ta odpowiedź jest nieprawidłowa. Ostatnia z błędnych odpowiedzi, 'position: right', sugeruje, że właściwość 'position' może być użyta do wyrównania tekstu. W rzeczywistości, 'position' jest właściwością, która określa sposób rozmieszczania elementu na stronie, jak 'static', 'relative', 'absolute' lub 'fixed', a nie do wyrównania zawartości tekstowej. Dlatego żadna z wymienionych odpowiedzi nie spełnia wymogów prawidłowego wyrównania tekstu do prawej strony w CSS.
Pytanie 11
Emblemat systemu CMS o nazwie Joomla! to
A. Rys. C
B. Rys. A
C. Rys. B
D. Rys. D
Prawidłową odpowiedzią na to pytanie jest Rys. B, który przedstawia logo systemu Joomla!. Joomla! to jeden z najpopularniejszych systemów zarządzania treścią (CMS), używany do tworzenia stron internetowych i aplikacji online. Logo Joomla! składa się z czterech złączonych elementów, które symbolizują społeczność i współpracę, kluczowe wartości tej platformy open source. Joomla! oferuje wiele funkcji takich jak łatwe zarządzanie treścią, rozszerzalność przez moduły i komponenty oraz szerokie wsparcie dla różnych formatów multimedialnych. Platforma ta jest ceniona za elastyczność i możliwość dostosowania do specyficznych potrzeb projektowych, co czyni ją idealnym wyborem dla różnych typów stron, od prostych witryn po skomplikowane portale biznesowe. Wybierając Joomla! zyskujemy dostęp do społeczności deweloperów oraz bogatej bazy zasobów edukacyjnych i wsparcia technicznego. Zrozumienie znaczenia i zastosowania systemów CMS jak Joomla! jest kluczowe dla specjalistów zajmujących się tworzeniem i zarządzaniem stronami internetowymi, ponieważ umożliwia efektywną obsługę i rozwój dynamicznych treści.
Pytanie 12
Aby strona internetowa była dostosowana do różnych urządzeń, należy między innymi określać
A. wymiary obrazów jedynie w pikselach
B. tylko znane fonty, takie jak Arial
C. układ strony wyłącznie przy pomocy tabel
D. wymiary obrazów w procentach
Definiowanie rozmiarów obrazów w procentach jest kluczowym elementem tworzenia responsywnych stron internetowych. Dzięki temu obrazy mogą dostosowywać się do różnych rozmiarów ekranów, co jest niezbędne w erze urządzeń mobilnych. Używając procentów, możemy zapewnić, że obrazy zachowają swoje proporcje w ramach kontenera, co eliminuje problem z rozciąganiem lub zniekształceniem grafiki. Na przykład, ustawiając szerokość obrazu na 50%, obraz zajmie połowę szerokości kontenera, niezależnie od tego, czy jest to telefon, tablet, czy komputer stacjonarny. Taki sposób definiowania rozmiarów jest zgodny z zasadami projektowania responsywnego, w tym z technikami, które określają elastyczne układy oparte na jednostkach względnych, takich jak em, rem, czy vw. W praktyce przyjęcie takiego podejścia nie tylko poprawia doświadczenie użytkownika, ale również zwiększa dostępność strony, co jest istotnym aspektem w kontekście standardów WCAG (Web Content Accessibility Guidelines).
Pytanie 13
Podano fragment kodu HTML, który nie przechodzi walidacji. Problemy z walidacją tego kodu będą dotyczyć:
Patrząc na fragment kodu, można zauważyć kilka miejsc, które czasem wprowadzają w błąd osoby uczące się HTML-a, szczególnie jeśli ktoś nie śledzi na bieżąco aktualnych specyfikacji. Zacznijmy od zamknięcia znaczników <br> i <img>. W HTML5 oba te tagi mogą być zapisywane jako samodzielne, bez ukośnika (tzn. nie trzeba pisać <br /> czy <img />). To, że w starszych materiałach lub w XHTML-u stosowało się ukośnik przed zamknięciem, wynikało z wymagań tamtych standardów, ale obecnie walidatory nie traktują to już jako błąd. Często spotyka się przekonanie, że każda para tagów musi być zamknięta, co nie zawsze jest prawdą w przypadku tzw. self-closing tags w HTML. Jeśli chodzi o duplikację nazwy pliku graficznego – powielanie atrybutu src z tą samą wartością w dwóch obrazkach nie stanowi żadnego problemu z punktu widzenia składni czy walidacji HTML. To jest po prostu dwukrotne użycie tego samego obrazka i nie wpływa na poprawność kodu. Czasami osoby początkujące myślą, że takie powtórzenia mogą być błędem, bo wydaje się to nieoptymalne, ale walidator HTML patrzy wyłącznie na poprawność struktury i wymaganych atrybutów. Najpoważniejszym problemem, który rzeczywiście zostanie wychwycony przez walidator, jest brak atrybutu alt w znaczniku <img>. To właśnie jego brak narusza wymagania dostępności i standardów HTML. W praktyce, jeśli dążymy do zgodności z HTML5 i zasadami web accessibility, zawsze trzeba dodawać alt, bo to jest istotne dla użytkowników i systemów wspierających. Moim zdaniem, wiele osób nadmiernie skupia się na detalach typu ukośniki czy powtórzenia obrazków, a nie zawsze zwraca uwagę na aspekt dostępności, który jest obecnie jednym z ważniejszych wymogów jakościowych w branży webowej.
Pytanie 14
Jakim kodem określa się kolor czerwony?
A. #0000EE
B. #00EE00
C. #00EEEE
D. #EE0000
Poprawna odpowiedź to #EE0000, co jest kodem szesnastkowym reprezentującym kolor czerwony w systemie RGB. W tym kodzie, wartość R (czerwony) wynosi 238, co oznacza maksymalne nasycenie tego koloru. Wartości G (zielony) i B (niebieski) są ustawione na 0, co oznacza, że brak tych kolorów powoduje, że czerwony staje się dominujący. Kolory w formacie szesnastkowym są powszechnie stosowane w projektowaniu stron internetowych oraz w grafice komputerowej, ponieważ umożliwiają precyzyjne określenie kolorów. Na przykład, w CSS można użyć tego kodu, aby ustawić kolor tła przycisku: 'background-color: #EE0000;'. Taka praktyka pozwala na łatwe i konsekwentne utrzymanie estetyki wizualnej projektu. Warto również zaznaczyć, że w kontekście kolorów, czerwony często symbolizuje energię, pasję i akcję, co czyni go popularnym wyborem w marketingu i reklamie, gdzie przyciągnięcie uwagi jest kluczowe.
Pytanie 15
Kolor, który ma odcień niebieski to kolor
A. #00EE00
B. #EE0000
C. #EE00EE
D. #0000EE
Kolor niebieski, który oznaczamy kodem #0000EE, to naprawdę ciekawa sprawa. W systemie hex to oznacza, że składowa niebieska (B) ma najwyższą możliwą wartość, czyli 238, a czerwony (R) i zielony (G) są na poziomie 0. To jest typowy sposób klasyfikacji kolorów w RGB, który jest super przydatny w grafice czy web designie. Niebieski świetnie nadaje się na tła stron czy różne elementy interfejsu, bo przyciąga wzrok i jest dość przejrzysty. Na przykład w CSS możemy napisać: `background-color: #0000EE;`. Fajnie jest znać te kody kolorów, bo ułatwia to komunikację w zespole i realizację pomysłów artystycznych.
Pytanie 16
Polecenie colspan służy do łączenia komórek tabeli w poziomie, natomiast rowspan w pionie. Którą z tabel wyświetli poniższy fragment kodu napisany w języku HTML?
Dokładnie tak, wybrałeś poprawną odpowiedź. Fragment kodu HTML napisałeś pokazuje tabelę z dwoma wierszami i dwoma komórkami. Pierwsza komórka w pierwszym wierszu ma atrybut rowspan='2', co oznacza, że będzie się rozciągać na dwa wiersze w pionie. Druga komórka w pierwszym wierszu nie ma żadnych specjalnych atrybutów, więc jest standardową komórką. W drugim wierszu jest tylko jedna komórka, gdyż druga komórka jest połączona z pierwszą komórką pierwszego wiersza przez atrybut rowspan. Tabela odpowiadająca opisowi to tabela B, która ma jedną długą komórkę po lewej stronie rozciągającą się na dwa wiersze i dwie krótsze komórki po prawej stronie, po jednej w każdym wierszu. Pamiętaj, że atrybuty rowspan i colspan są bardzo przydatne do tworzenia skomplikowanych layoutów tabel, które nie są możliwe do osiągnięcia przy użyciu standardowych tagów tabeli.
A. Nie ma zagłębień i jest numerowana, słowo "niebieski" ma przyporządkowany numer 5.
B. Jest to lista numerowana z zagłębioną listą punktowaną.
C. Nie ma zagłębień i jest punktowana, wyświetla 5 punktów.
D. Jest to lista punktowana z zagłębioną listą numerowaną.
Niestety, nie trafiłeś w odpowiedź. Ta lista, co widziałeś na obrazku, jakby nie było, jest zdefiniowana przez znacznik <ol>, więc to lista uporządkowana, a nie punktowana. W HTML mamy właśnie te dwa typy list: uporządkowane i nieuporządkowane, które robi się przez <ol> i <ul>. To, co w Twojej odpowiedzi może być błędne, to pomylenie zagnieżdżeń – w tej liście numerowanej jest jeszcze lista punktowana w środku. Nie ma czegoś takiego, że liczby przypisujesz do pojedynczych słów, jak 'niebieski', albo ograniczasz punkty. Numery w liście są przypisywane automatycznie, w kolejności dodawania. I ważne, żeby rozumieć różnice między tymi listami i umieć je właściwie zagnieżdżać. Jest to kluczowe w HTML.
Pytanie 18
Wskaż prawidłowe twierdzenie odnoszące się do zaprezentowanego kodu HTML.
A. Użytkownik nie będzie miał możliwości kontrolowania odtwarzania wideo.
B. Ścieżka do pliku jest niepoprawna, nie zawiera pełnej ścieżki.
C. Kod może nie działać w przeglądarkach, które nie wspierają HTML5.
D. Plik animacja.mp4 powinien mieć rozdzielczość 640x480 pikseli, aby można go było odtworzyć.
Pierwsze stwierdzenie sugeruje, że plik animacja.mp4 musi mieć rozdzielczość 640x480 pikseli, co jest nieprawdziwe, ponieważ atrybuty width i height w znaczniku <video> nie narzucają wymagań rozdzielczości dla samego pliku wideo, lecz jedynie definiują rozmiar ramki odtwarzacza w przeglądarce. Jeśli plik ma inną rozdzielczość, przeglądarka odpowiednio go przeskaluje. Drugie stwierdzenie, że użytkownik nie będzie miał możliwości sterowania odtwarzaniem animacji, jest błędne, ponieważ atrybut controls w znaczniku <video> dokładnie to umożliwia, dostarczając przyciski do odtwarzania, pauzowania oraz regulacji głośności. Ostatnie stwierdzenie dotyczące lokalizacji pliku jest również mylne, ponieważ kod nie wymaga ścieżki bezwzględnej dla pliku animacja.mp4. W przypadku gdy plik znajduje się w tym samym katalogu co strona HTML, wystarczy podać jego nazwę. W przeciwnym razie można zastosować ścieżkę względną, co jest zgodne z dobrymi praktykami w zakresie organizacji plików na serwerze. Te nieporozumienia mogą prowadzić do mylnych wniosków, dlatego ważne jest zrozumienie zasad działania znaczników HTML oraz podstawowych koncepcji związanych z odtwarzaniem multimediów w sieci.
Pytanie 19
Który element blokowy języka HTML5 jest przeznaczony do umieszczenia w nim nawigacji witryny?
A. nav
B. main
C. aside
D. header
W tym pytaniu łatwo się pomylić, bo kilka znaczników HTML5 kojarzy się z układem strony i ktoś intuicyjnie może uznać, że nadają się na nawigację. Warto jednak odróżnić semantykę poszczególnych elementów. Element <main> służy do oznaczenia głównej, unikalnej treści dokumentu – tej, która jest kluczowa dla danej podstrony. Zgodnie z dobrymi praktykami nie umieszcza się w nim stałych elementów interfejsu takich jak menu nawigacyjne, nagłówek czy stopka. Czytniki ekranu często pozwalają użytkownikowi pominąć nagłówek i nawigację, żeby od razu przejść do <main>. Gdybyśmy w <main> wrzucili menu, to trochę psujemy cały sens tej semantyki. Znacznik <aside> z kolei jest przeznaczony na treści poboczne, uzupełniające względem głównego wątku strony: boczne panele, bloki z reklamami, listy powiązanych artykułów, krótkie notki. Owszem, w realnych projektach zdarza się, że w panelu bocznym jest jakieś dodatkowe menu kategorii i bywa ono umieszczone w <aside>. Jednak sam <aside> nie jest semantycznie „obszarem nawigacji” – jest raczej kontenerem na treści dodatkowe. Jeśli w nim znajduje się nawigacja, to i tak powinniśmy ją owinąć w <nav>, żeby zachować właściwą semantykę. Element <header> często myli się z nawigacją, bo w praktyce w nagłówku strony bardzo często umieszcza się logo i menu główne. Jednak <header> opisuje obszar nagłówkowy dokumentu lub sekcji, czyli może zawierać tytuł, podtytuł, logo, czas publikacji, a także właśnie blok <nav>. To nie jest znacznik dedykowany nawigacji, tylko ogólny kontener nagłówkowy. Z punktu widzenia standardów HTML5 poprawna struktura to raczej <header><div class="logo">…</div><nav>…</nav></header>, a nie traktowanie całego headera jako nawigacji. Typowym błędem myślowym jest utożsamianie „tego, co jest wizualnie u góry strony” z nawigacją w sensie semantycznym. HTML5 kładzie duży nacisk na znaczenie elementów, a nie tylko na ich wygląd. Dlatego nawigacja powinna być oznaczona konkretnie znacznikiem <nav>. Dzięki temu przeglądarki, narzędzia SEO, czytniki ekranu i różne biblioteki JavaScript mogą jednoznacznie rozpoznać, gdzie jest menu strony, a gdzie główna treść, nagłówek czy boczne panele. W praktyce przekłada się to na lepszą dostępność, bardziej przewidywalne zachowanie i czytelniejszy kod, co moim zdaniem jest kluczowe przy większych projektach.
Pytanie 20
Podczas definiowania koloru w formacie RGBA, na przykład rgba(100, 40, 50, 0.2), ostatnia liczba odnosi się do
A. nasycenia koloru czarnego
B. saturacji barw RGB
C. przezroczystości, gdzie 1 oznacza pełną przezroczystość, a 0 jej brak
D. przezroczystości, gdzie 0 oznacza pełną przezroczystość, a 1 jej brak
Wartość w notacji RGBA, która odpowiada za przezroczystość, jest kluczowym elementem definiowania koloru w grafice komputerowej. W notacji rgba(100, 40, 50, 0.2) ostatnia wartość, czyli 0.2, reprezentuje stopień przezroczystości koloru. Wartość ta oscyluje w zakresie od 0 do 1, gdzie 0 oznacza całkowitą przezroczystość (kolor jest niewidoczny), a 1 oznacza całkowitą nieprzezroczystość (kolor jest w pełni widoczny). Taka notacja jest niezwykle użyteczna w projektowaniu stron internetowych i aplikacji, gdzie często zachodzi potrzeba nakładania elementów wizualnych na siebie, np. w przypadku przycisków, tła czy efektów modalu. Dzięki zastosowaniu przezroczystości można uzyskać ciekawy efekt estetyczny, poprawić czytelność tekstów na kolorowych tłach czy stworzyć wrażenie głębi. W przypadku standardów CSS, użycie RGBA jest zalecane w kontekście projektowania responsywnego i dostępności, co jest zgodne z najlepszymi praktykami branżowymi.
Pytanie 21
Który z poniższych wpisów w dokumencie HTML umożliwia połączenie z zewnętrznym arkuszem stylów o nazwie style.css?
A. <link rel="stylesheet" href="/style.css">
B. <a src="/style.css">
C. <link rel="stylesheet' src="/style.css">
D. <a href="/style.css">
Czyli tak, zapis <link rel="stylesheet" href="/style.css"> to rzeczywiście dobry sposób na dodanie arkusza stylów zewnętrznych do HTML-a. Element <link> jest super dołączany do zewnętrznych zasobów, a ten atrybut rel mówi przeglądarce, co tak naprawdę dołączamy – w tym wypadku arkusz stylów CSS. Jak ustalamy rel="stylesheet", to mówimy przeglądarce: hej, ten plik to CSS. A atrybut href? No, on wskazuje, gdzie ten plik się znajduje, tutaj to będzie style.css w głównym katalogu serwera. Fajnie jest mieć zewnętrzne arkusze stylów, ponieważ to uporządkowuje nam kod. Możemy zmieniać style w jednym pliku, a nie bawić się w edytowanie każdej strony z osobna. Dodatkowo, przeglądarki mogą buforować te pliki, co przyspiesza ładowanie. No i nie zapominaj o dobrej organizacji plików i sensownych nazwach – to naprawdę ułatwia późniejsze życie z projektem.
Pytanie 22
Portal internetowy dysponuje bardzo złożonym systemem stylów, który obejmuje style zewnętrzne, wewnętrzne oraz lokalne. Jak można zagwarantować, że określona cecha zdefiniowana w zewnętrznym stylu jest zawsze stosowana do elementu HTML, niezależnie od bardziej priorytetowych stylów?
A. jako selektor potomka
B. przy pomocy pseudoelementu ::after
C. jako pseudoklasę :active
D. przy pomocy reguły !important
Odpowiedź, że cechę opisaną w zewnętrznym stylu należy zdefiniować przy pomocy reguły !important jest poprawna. Reguła !important w CSS jest używana do nadania określonej właściwości najwyższego priorytetu. Oznacza to, że nawet jeśli inne reguły CSS mają wyższy specyficzność lub są zdefiniowane później, właściwość oznaczona jako !important zostanie zastosowana. Przykład zastosowania to sytuacja, gdy styl globalny dla elementu przyjmuje kolor tła, ale chcemy, aby dany element zawsze miał czerwony kolor tła, niezależnie od innych reguł. W takim przypadku możemy zdefiniować ten styl jako: `.example { background-color: red !important; }`. Ważne jest, aby stosować !important z rozwagą, ponieważ może to prowadzić do trudności w utrzymaniu kodu oraz nadpisywaniu stylów w nieprzewidywalny sposób. Dobrym podejściem jest najpierw spróbować zwiększyć specyficzność selektora, a dopiero potem, w nagłych wypadkach, używać !important, aby unikać problemów z dziedziczeniem stylów.
Pytanie 23
Jakie polecenie w CSS umożliwia dodanie zewnętrznego arkusza stylów?
A. include
B. require
C. open
D. import
Polecenie 'import' w CSS służy do załączenia zewnętrznego arkusza stylów, co jest kluczowe dla organizacji i modularności kodu CSS. Użycie '@import' pozwala na ładowanie stylów z innych plików CSS na początku arkusza stylów, co ułatwia zarządzanie dużymi projektami. Na przykład, jeśli mamy plik 'style.css' i chcemy zaimportować 'reset.css', możemy użyć następującej składni: '@import 'reset.css';'. Dzięki temu możemy utrzymać rozdzielenie różnych stylów, co sprzyja lepszej organizacji kodu oraz jego ponownemu użyciu w przyszłości. Warto również zaznaczyć, że standardy CSS sugerują, aby używać '@import' z rozwagą, gdyż każde zaimportowanie pliku powoduje dodatkowe żądanie HTTP, co może wpłynąć na czas ładowania strony. Z tego powodu, dla większych projektów, często lepiej jest łączyć wszystkie style w jeden plik podczas produkcji, co można osiągnąć za pomocą narzędzi do kompresji CSS. Użycie '@import' jest zatem zgodne z dobrymi praktykami, szczególnie w fazie rozwoju, gdzie modularność i łatwość w zarządzaniu kodem są priorytetowe.
Pytanie 24
W przedstawionym kodzie HTML, zaprezentowany styl CSS jest stylem:
<p style="color:red;">To jest przykładowy akapit.</p>
A. dynamicznym
B. nagłówkowym
C. lokalnym
D. zewnętrznym
Styl CSS określony wewnątrz elementu HTML poprzez atrybut style jest przykładem stylu lokalnego. Styl lokalny pozwala na bezpośrednie przypisanie konkretnych własności CSS do pojedynczego elementu co umożliwia szybkie i łatwe testowanie oraz modyfikacje wyglądu bez potrzeby edytowania zewnętrznych plików CSS. Praktyczne zastosowanie stylów lokalnych odnajdujemy w sytuacjach gdy chcemy wprowadzić zmiany dla pojedynczego elementu na stronie nie wpływając na inne elementy. Na przykład jeśli w jednym miejscu chcemy podkreślić wagę tekstu stosując kolor czerwony możemy użyć stylu lokalnego jak pokazano w pytaniu. Jednak styl lokalny nie jest zalecany dla większych projektów czy skomplikowanych stron ze względu na fakt że utrudnia zarządzanie i utrzymywanie spójnego stylu w całym projekcie. W takich przypadkach lepiej korzystać ze stylów zewnętrznych lub nagłówkowych które oferują lepszą organizację i elastyczność. Warto również pamiętać że implementacja stylu lokalnego może nadpisywać inne style co jest istotne przy rozwiązywaniu problemów związanych z dziedziczeniem stylów CSS.
Pytanie 25
Aby włączyć kaskadowy arkusz stylów zapisany w pliku zewnętrznym, należy zastosować poniższy fragment kodu HTML
A. <meta charset="styl.css">
B. <optionvalue="styl.css" type="text/css">
C. <link rel="stylesheet" type="text/css" href="styl.css">
D. <div id="styl.css" relation="css">
Poprawna odpowiedź to <link rel="stylesheet" type="text/css" href="styl.css" />. Ten fragment kodu HTML jest standardowym sposobem dołączania zewnętrznych arkuszy stylów do dokumentu HTML. Atrybut 'rel' określa relację pomiędzy dokumentem a zewnętrznym plikiem, w tym przypadku jest to 'stylesheet', co informuje przeglądarkę, że plik ma zawierać style CSS. Atrybut 'type' wskazuje typ zawartości, a 'href' zawiera ścieżkę do pliku CSS, w tym przypadku 'styl.css'. Zewnętrzne arkusze stylów są zalecane, ponieważ umożliwiają oddzielenie treści od stylizacji, co jest zgodne z zasadą separacji obowiązków w inżynierii oprogramowania. Umożliwia to łatwe zarządzanie i aktualizowanie stylów bez konieczności modyfikowania samego HTML-a. Przykładem zastosowania może być stworzenie pliku styl.css, który zawiera wszystkie style dla danej strony, co pozwala na ponowne wykorzystanie tych samych stylów w różnych częściach serwisu, co zwiększa spójność i ułatwia utrzymanie kodu.
Pytanie 26
Jakie wyjście zostanie pokazane po zrealizowaniu podanego kodu HTML?
A. Rys.A
B. Rys. D
C. Rys. B
D. Rys. C
Poprawna odpowiedź to Rys. D ponieważ przedstawiony kod HTML zawiera dwie listy. Pierwsza lista to lista uporządkowana <ol> z trzema elementami <li> gdzie drugi element zawiera listę nieuporządkowaną <ul> z dwoma elementami. Lista zagnieżdżona używa standardowego symbolu kropki jako punktora. Druga lista <ol> zaczyna się od litery D dzięki atrybutowi type="A" i start="4". To powoduje że ostatni element wyświetlany jest jako D. punkt. Ta właściwość HTML jest używana do personalizacji wyglądu list aby dopasować je do wymagań projektowych lub edytorskich. Stosowanie atrybutów takich jak type i start pozwala na większą kontrolę nad sposobem wyświetlania list co jest zgodne z dobrymi praktykami w tworzeniu przejrzystych i spójnych interfejsów użytkownika. Personalizacja list może być użyteczna w dokumentach technicznych raportach czy aplikacjach które wymagają dokładnego odwzorowania struktury danych.
Pytanie 27
Znacznik <i> w języku HTML ma na celu
A. zmianę czcionki na kursywę
B. dodanie grafiki
C. określenie formularza
D. ustalenie nagłówka w treści
Znacznik <i> w języku HTML jest używany do formatowania tekstu, aby uzyskać efekt pochylonego kroju pisma. Jest to element semantyczny, który wprowadza do dokumentu wizualną różnicę, ale także ma swoje miejsce w kontekście znaczeniowym. Użycie <i> może wskazywać na zmianę intonacji w tekście, taką jak nazwy książek, filmów, czy obcych wyrazów. W standardach HTML5, <i> jest zalecany do użytku, aby wyróżnić elementy tekstowe w sposób, który jest zgodny z zasadami dostępności i semantyki. Przykład zastosowania: <p>W książce <i>W pustyni i w puszczy</i> autorstwa Henryka Sienkiewicza...</p>. Oznaczanie tekstu w ten sposób wspiera nie tylko estetykę strony, ale również poprawia doświadczenie użytkowników korzystających z technologii asystujących, które mogą interpretować znaczenie tak oznaczonego tekstu. Warto również pamiętać o odpowiednich stylach CSS, które można zastosować do tego znacznika, aby dostosować jego wygląd do reszty witryny.
Pytanie 28
Co można powiedzieć o przedstawionym zapisie języka HTML5?
<title>Strona o psach</title>
A. Pojawi się na karcie dokumentu w przeglądarce.
B. Zostanie wyświetlony w treści strony, na samej górze.
C. Jest jedynie informacją dla robotów wyszukiwarek i nie jest wyświetlany przez przeglądarkę.
D. Jest opcjonalny w języku HTML5 i nie musi występować w dokumencie.
Brawo, Twoja odpowiedź jest prawidłowa! Znacznikiw języku HTML 5 służy do określenia tytułu strony internetowej, który jest wyświetlany na karcie przeglądarki. Nie jest to opcjonalna informacja - każda strona powinna mieć tytuł dla lepszej identyfikacji i optymalizacji SEO (Search Engine Optimization). Tytuł strony jest jednym z kluczowych elementów dla SEO, ponieważ wyszukiwarki internetowe, takie jak Google, często wykorzystują tytuł strony jako główny link w wynikach wyszukiwania. Tytuł strony jest również ważny z punktu widzenia użytkownika - dobrze sformułowany tytuł może przyciągnąć uwagę potencjalnego odbiorcy i zachęcić go do odwiedzenia strony. Warto zauważyć, że tytuł nie jest wyświetlany bezpośrednio na stronie, ale na pasku tytułu przeglądarki lub na karcie strony. To ważne rozróżnienie pomaga zrozumieć, dlaczego niektóre elementy są widoczne dla użytkownika, a inne nie.
Pytanie 29
Atrybut colspan służy do poziomego łączenia komórek tabeli, natomiast rowspan pozwala na łączenie ich w pionie. Którą z poniższych tabel ukazuje fragment kodu napisany w języku HTML? <table border="1" cellspaing="0" cellpadding="10" > <tr> <td rowspan="2"> </td> <td> </td> </tr> <tr> <td> </td> </tr> </table>
A. rys. D
B. rys. B
C. rys. A
D. rys. C
W języku HTML atrybut rowspan w znaczniku <td> pozwala na scalanie komórek w pionie co oznacza że dana komórka zajmuje miejsce w kilku wierszach tabeli W podanym kodzie pierwsza komórka w pierwszym wierszu posiada atrybut rowspan z wartością 2 co sprawia że zajmuje ona miejsce w dwóch wierszach Pierwszy wiersz zawiera dwie komórki z czego pierwsza jest połączona pionowo z komórką w drugim wierszu Druga komórka w pierwszym wierszu oraz jedyna komórka w drugim wierszu nie posiadają atrybutu rowspan ani colspan dlatego nie są połączone z innymi komórkami Takie użycie rowspan jest zgodne z praktykami HTML które umożliwiają tworzenie bardziej złożonych układów tabeli dzięki czemu można lepiej zarządzać przestrzenią w interfejsie użytkownika Jako że kod tworzy tabelę z dwiema kolumnami i dwoma wierszami gdzie pierwsza komórka po lewej stronie zajmuje dwa wiersze przedstawia to układ jak na rysunku B Możliwości jakie daje rowspan są niezwykle przydatne w sytuacjach gdy chcemy aby dane w tabeli były czytelniejsze i bardziej zorganizowane szczególnie w raportach czy formularzach gdzie różne kategorie danych muszą być jasno oddzielone
Pytanie 30
W kodzie źródłowym zapisanym w języku HTML wskaż błąd walidacji dotyczący tego fragmentu: ```
CSS
Kaskadowe arkusze stylów (ang. Cascading Style Sheets) to język służący ...```
A. Nieznany znacznik h6.
B. Znacznik zamykający /b niezgodny z zasadą zagnieżdżania.
C. Znacznik br nie może występować wewnątrz znacznika p.
D. Znacznik br nie został poprawnie zamknięty.
Rozważmy błędne koncepcje zawarte w innych odpowiedziach. Wskazanie, że znacznik br nie został poprawnie zamknięty, jest niepoprawne, ponieważ znacznik <br> jest samozamykający i nie wymaga dodatkowego znacznika zamykającego. Często błędem jest próba zamknięcia takich znaczników, co prowadzi do niepotrzebnego zamieszania w kodzie. Dodatkowo, stwierdzenie, że znacznik br nie może występować wewnątrz znacznika p, jest nieprawidłowe. Zgodnie ze standardami HTML, znacznik <br> jest dozwolony wewnątrz <p> i służy do wprowadzenia przerwy linii. Wreszcie, znacznik <h6> jest prawidłowym znacznikiem HTML i jego użycie nie stanowi błędu. Pomyłka ta wynika prawdopodobnie z niepełnej znajomości dostępnych znaczników HTML. Dlatego zawsze warto poszerzać swoją wiedzę na ten temat i regularnie odnosić się do specyfikacji HTML.
Pytanie 31
Aby włączyć kaskadowy arkusz stylów zapisany w zewnętrznym pliku, należy zastosować poniższy fragment kodu HTML?
A. <optionvalue="styl.css" type="text/css" />
B. <div id="styl.css" relation="css" />
C. <meta charset="styl.css" />
D. <link rel="stylesheet" type="text/css" href="styl.css" />
Odpowiedź <link rel="stylesheet" type="text/css" href="styl.css" /> jest poprawna, ponieważ jest to standardowy sposób dołączania zewnętrznych arkuszy stylów w HTML. Element <link> jest używany do powiązania dokumentu HTML z zewnętrznym źródłem CSS. Atrybut 'rel' informuje przeglądarkę, że jest to arkusz stylów, natomiast atrybut 'href' wskazuje ścieżkę do pliku CSS. Dzięki temu przeglądarka może załadować stylizacje z pliku, co pozwala na oddzielenie treści od stylu, co jest zgodne z zasadą separacji, kluczową w projektowaniu stron internetowych. Na przykład, dodając ten fragment kodu w sekcji <head> dokumentu HTML, możemy łatwo zarządzać wyglądem wielu stron, zmieniając tylko jeden plik CSS. To podejście zwiększa wydajność i ułatwia konserwację strony, co jest szczególnie ważne w większych projektach. W praktyce, aby załadować różne style dla różnych urządzeń, możemy użyć atrybutu 'media', co pozwoli na bardziej elastyczne podejście do zarządzania stylami.
Pytanie 32
Aby ustawić wewnętrzne marginesy dla elementu: margines górny 50px, dolny 40px, prawy 20px oraz lewy 30px, powinno się zastosować składnię CSS
A. padding: 20px, 40px, 30px, 50px;
B. padding: 50px, 40px, 20px, 30px;
C. padding: 50px, 20px, 40px, 30px;
D. padding: 40px, 30px, 50px, 20px;
Podane odpowiedzi niepoprawne wynikają z pomylenia kolejności, w jakiej wartości paddingu są interpretowane w CSS. Wartości paddingu są rozpoznawane w określonej sekwencji: najpierw górny, następnie prawy, dolny, a na końcu lewy. Dlatego, jeśli margines górny wynosi 50px, prawy 20px, dolny 40px i lewy 30px, to niektóre z przedstawionych opcji nie oddają tej kolejności. Użycie nieodpowiednich wartości skutkuje nieprzewidywalnym wyglądem elementów na stronie, co może prowadzić do problemów z układem oraz zaburzenia estetyki. W szczególności, niepoprawne zestawienie wartości może powodować, że odstępy będą nie tylko niewłaściwe, ale także mogą przyczynić się do trudności w interakcji użytkowników z elementami na stronie. Dodatkowo, błędy w stosowaniu paddingu mogą prowadzić do konfliktów z innymi stylami CSS, co jeszcze bardziej komplikuje proces projektowania. W praktyce, niepoprawne stosowanie kolejności wartości paddingu jest częstym błędem, który może być wynikiem braku zrozumienia konwencji CSS lub pośpiechu w implementacji. Kluczowe jest zrozumienie, że CSS jest oparty na ściśle określonych zasadach, a niewłaściwe stosowanie tych zasad może prowadzić do nieefektywnych rozwiązań projektowych.
Pytanie 33
Jaką funkcję spełnia atrybut value w polu formularza XHTML?
<inputtype="text"name="name"value="value">
A. określa domyślną wartość
B. określa nazwę pola
C. definiuje maksymalną długość pola
D. czyni pole jedynie do odczytu
Atrybut value w polu formularza XHTML określa domyślną wartość, jaka pojawi się w polu tekstowym po załadowaniu strony. Jest to przydatne, gdy chcemy zasugerować użytkownikowi domyślne dane lub ułatwić wprowadzanie informacji. Przykładem może być formularz logowania, gdzie atrybut value jest używany do wczytywania zapisanego wcześniej adresu e-mail użytkownika. W formularzach XHTML stosuje się ten atrybut zgodnie z dobrymi praktykami, aby poprawić doświadczenie użytkownika i ułatwić interakcję z witryną. Warto zauważyć, że w przypadku innych typów pól formularzy, na przykład checkbox lub radio, atrybut value określa wartość, która zostanie przesłana, gdy dane pole zostanie zaznaczone. W kontekście dobrych praktyk należy także pamiętać o zabezpieczeniach formularzy, takich jak walidacja danych po stronie serwera, aby zapobiec potencjalnym lukom bezpieczeństwa wynikającym z nieoczekiwanych danych wejściowych. Stosowanie atrybutu value w sposób przemyślany pozwala również na lepszą integrację formularzy z mechanizmami autouzupełniania przeglądarek, co jest korzystne dla użytkowników
Pytanie 34
W języku HTML, aby stworzyć pole do wprowadzania hasła, w którym wpisywany tekst będzie ukrywany (zastępowany kropkami), należy zastosować znacznik
A. <input name="password" />
B. <input type="password" />
C. <form input type="password" />
D. <form="password" type="password" />
Odpowiedź <input type="password" /> jest poprawna, ponieważ ten znacznik HTML służy do tworzenia pola edycyjnego, w którym wprowadzane dane są maskowane. W przypadku pól do wpisywania haseł, istotne jest, aby użytkownik nie mógł zobaczyć wpisywanego tekstu, co zwiększa poziom bezpieczeństwa. W HTML, atrybut 'type' z wartością 'password' instruuje przeglądarkę, aby ukrywała znaki wprowadzane przez użytkownika, zastępując je zazwyczaj kropkami lub gwiazdkami. Przykładem zastosowania tego typu znacznika może być formularz logowania, gdzie użytkownicy wpisują swoje hasła. Dobrą praktyką jest również zastosowanie odpowiednich etykiet i walidacji, aby zapewnić, że formularz jest użyteczny i zgodny z WCAG (Web Content Accessibility Guidelines). Warto pamiętać, że bezpieczeństwo haseł powinno być również wspierane przez odpowiednie zabezpieczenia po stronie serwera, w tym haszowanie haseł oraz ochrona przed atakami typu brute force.
Pytanie 35
Który z poniższych znaczników wchodzi w skład sekcji <head> dokumentu HTML?
A. <img>
B. <span>
C. <title>
D. <section>
<title> jest jednym z kluczowych znaczników w sekcji <head> dokumentu HTML. Odpowiada za definiowanie tytułu strony, który jest wyświetlany w pasku tytułu przeglądarki oraz w wynikach wyszukiwania. Tytuł jest istotnym elementem SEO, ponieważ informuje zarówno użytkowników, jak i wyszukiwarki o tematyce strony. Przykład użycia znacznika <title>: <head><title>Moja Strona Internetowa</title></head>. Należy pamiętać, że tytuł powinien być zwięzły, ale jednocześnie opisowy, zazwyczaj nie powinien przekraczać 60 znaków. W kontekście standardów, HTML5, który jest obecnie najnowszą wersją HTML, wciąż podkreśla znaczenie znacznika <title> jako fundamentalnego dla struktury dokumentu. Odpowiedni tytuł nie tylko poprawia doświadczenia użytkowników, ale również zwiększa widoczność strony w wynikach wyszukiwania, dlatego jego prawidłowe użycie ma kluczowe znaczenie w web designie i marketingu internetowym.
Pytanie 36
Które z podanych formatów NIE JEST zapisane w języku CSS?
A. C
B. D
C. A
D. B
Odpowiedź C jest prawidłowa, ponieważ atrybut bgcolor jest przestarzałą metodą określania koloru tła w HTML i nie jest częścią CSS. CSS (Cascading Style Sheets) zostało stworzone, aby oddzielić prezentację dokumentu od jego struktury. Korzystanie z CSS pozwala na lepsze zarządzanie stylem i spójność w wyglądzie wielu stron internetowych. Atrybuty HTML związane z wyglądem, takie jak bgcolor, zostały zastąpione przez deklaracje w CSS. Na przykład w CSS można ustawić kolor tła całej strony za pomocą selektora body i właściwości background-color. Takie podejście jest bardziej elastyczne i zgodne z nowoczesnymi standardami. Dzięki CSS możliwe jest stosowanie zaawansowanych stylizacji, takich jak gradienty czy obrazy tła, które nie były dostępne w prostych atrybutach HTML. Przy projektowaniu stron internetowych zaleca się, aby unikać przestarzałych atrybutów HTML, które mogą być niekompatybilne z nowoczesnymi przeglądarkami i powodować problemy z dostępnością.
Pytanie 37
Kolor określony kodem RGB, mający wartość rgb(255, 128, 16) w przedstawieniu szesnastkowym, przyjmie jaką wartość?
A. #ff0fl0
B. #ff8011
C. #008010
D. #ff8010
Odpowiedź #ff8010 jest trafna. Konwersja wartości RGB na szesnastkowy to w sumie przekształcanie kolorów: czerwony, zielony i niebieski. W przypadku rgb(255, 128, 16), czerwony (255) zmienia się w 'ff', zielony (128) w '80', a niebieski (16) w '10'. Gdy to wszystko połączymy, dostajemy kod #ff8010. To wiedza, która naprawdę się przydaje, gdy pracujesz z kolorami w stronach www, aplikacjach graficznych czy przy projektowaniu interfejsów. W branży IT używanie standardu RGB i konwersji do HEX to normalka, bo to pozwala na dokładne określenie kolorów w kodzie. Na przykład, w CSS łatwo będzie używać kolorów w tym formacie, a to pomaga w lepszej czytelności kodu.
Pytanie 38
Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze
A. tr { background-color: Pink; }
B. tr:active { background-color: Pink; }
C. td, th { background-color: Pink; }
D. tr:hover { background-color: Pink; }
Poprawny selektor to tr:hover { background-color: Pink; }, bo dokładnie opisuje sytuację pokazaną na filmie: efekt pojawia się dopiero po najechaniu kursorem na cały wiersz tabeli. Pseudo-klasa :hover w CSS służy właśnie do definiowania stylów w momencie, gdy użytkownik „najeżdża” myszką na dany element. Jeśli więc chcemy, żeby podświetlał się cały rząd tabeli, logiczne i zgodne z dobrymi praktykami jest przypięcie efektu do znacznika tr, a nie do pojedynczych komórek. W praktyce taki zapis stosuje się bardzo często w interfejsach webowych: w panelach administracyjnych, listach zamówień, tabelach z uczniami, produktami, logami systemowymi itd. Dzięki temu użytkownik łatwiej śledzi, który wiersz właśnie ogląda. To niby detal, ale z punktu widzenia UX robi sporą różnicę. Z mojego doświadczenia to jeden z tych prostych trików CSS, które od razu poprawiają „odczuwalną” jakość strony. Ważne jest też to, że :hover jest częścią standardu CSS (opisane m.in. w specyfikacji CSS Selectors Level 3/4) i działa w praktycznie wszystkich współczesnych przeglądarkach. Nie trzeba do tego żadnego JavaScriptu, żadnych skomplikowanych skryptów – czysty CSS. Dobrą praktyką jest również używanie bardziej stonowanych kolorów niż Pink w prawdziwych projektach, np. #f5f5f5 albo lekki odcień niebieskiego, tak żeby kontrast był czytelny i nie męczył wzroku. Warto też pamiętać, że podobny mechanizm możesz zastosować na innych elementach: np. a:hover dla linków, button:hover dla przycisków czy nawet div:hover dla całych kafelków w layoutach. Kluczowe jest to, żeby pseudo-klasa :hover była przypięta dokładnie do tego elementu, który ma reagować na interakcję użytkownika.
Pytanie 39
W języku CSS zdefiniowano style dla znacznika h1 zgodnie z podanym wzorem. Przy założeniu, że żadne inne style nie są zastosowane do znacznika h1, wskaż właściwy sposób stylizacji tego elementu
A. B
B. A
C. D
D. C
Błędne odpowiedzi wynikają z nieprawidłowego zrozumienia zastosowania specyficznych stylów CSS. Font-style: oblique; jest często mylony z kursywą, czyli font-style: italic;. Oblique to bardziej subtelna forma pochylenia tekstu, która w projektach graficznych może nadawać bardziej nowoczesny wygląd. Dlatego inne opcje, które mogłyby sugerować użycie zwykłej kursywy, są nieprawidłowe. Font-variant: small-caps; często jest mylony z całkowitymi kapitalikami, co może prowadzić do nieporozumienia w formacie tekstu. Small-caps zachowuje proporcje tekstu, przekształcając tylko małe litery, co może być użyteczne w projektach, gdzie estetyka i elegancja są kluczowe. Niewłaściwe zrozumienie tego stylu może prowadzić do błędnych założeń o wyglądzie tekstu. Text-align: right; jest często zapominane, ponieważ większość tekstów w Internecie jest wyrównywana do lewej. Dlatego projekty, które wymagają wyrównania do prawej mogą być błędnie postrzegane jako niestandardowe lub nieoczekiwane. Poprawne użycie text-align: right; może jednak być kluczowe w układzie stron, gdzie asymetria i nowoczesny design są pożądane. Te błędne koncepcje pokazują, jak ważne jest zrozumienie i prawidłowe stosowanie specyficznych stylów CSS, ponieważ mogą one znacząco wpłynąć na wygląd i użyteczność projektu. Właściwe rozróżnienie tych stylów jest kluczowe dla profesjonalnego projektowania stron internetowych, gdzie detale wizualne i funkcjonalne mają istotne znaczenie dla końcowego użytkownika.
Pytanie 40
Który z poniższych kodów HTML odpowiada przedstawionej tabeli? Dla uproszczenia pominięto zapis dotyczący stylu obramowania tabeli oraz komórek?
A. Rys. C
B. Rys. D
C. Rys. A
D. Rys. B
Rysunek A jest niepoprawny ponieważ zawiera osobne komórki dla każdego numeru telefonu co prowadzi do nieprawidłowego renderowania tabeli w kontekście prezentowanego układu Rysunek C również nie spełnia wymagań gdyż używa atrybutu colspan="2" w ostatnim wierszu co jest błędne z perspektywy przedstawionego układu ponieważ próbuje połączyć komórki w poziomie zamiast w pionie Rysunek D stosuje colspan w wierszach gdzie numer telefonu powinien być wyświetlany oddzielnie co prowadzi do problemów w wyświetlaniu danych w wierszach Tę sytuację można uznać za powszechny błąd popełniany przez osoby które nie mają doświadczenia w zarządzaniu strukturą tabel HTML Wybierając nieprawidłowe podejście łatwo można wprowadzić chaos w logice prezentacji danych co wpływa na czytelność i użyteczność strony internetowej Użytkownicy często mylnie interpretują funkcje colspan i rowspan co prowadzi do nieprawidłowego układu wizualnego i funkcjonalnego w tabelach HTML Właściwe zrozumienie różnicy między colspan a rowspan oraz ich zastosowania w różnych scenariuszach jest kluczowe dla tworzenia profesjonalnych i zgodnych ze standardami stron internetowych Poprawna odpowiedź wymaga rozumienia semantyki HTML i umiejętności praktycznego zastosowania tej wiedzy do tworzenia struktur tabelowych które są efektywne i estetyczne
Strona wykorzystuje pliki cookies do poprawy doświadczenia użytkownika oraz analizy ruchu. Szczegóły
Polityka plików cookies
Czym są pliki cookies?
Cookies to małe pliki tekstowe, które są zapisywane na urządzeniu użytkownika podczas przeglądania stron internetowych. Służą one do zapamiętywania preferencji, śledzenia zachowań użytkowników oraz poprawy funkcjonalności serwisu.
Jakie cookies wykorzystujemy?
Niezbędne cookies - konieczne do prawidłowego działania strony
Funkcjonalne cookies - umożliwiające zapamiętanie wybranych ustawień (np. wybrany motyw)
Analityczne cookies - pozwalające zbierać informacje o sposobie korzystania ze strony
Jak długo przechowujemy cookies?
Pliki cookies wykorzystywane w naszym serwisie mogą być sesyjne (usuwane po zamknięciu przeglądarki) lub stałe (pozostają na urządzeniu przez określony czas).
Jak zarządzać cookies?
Możesz zarządzać ustawieniami plików cookies w swojej przeglądarce internetowej. Większość przeglądarek domyślnie dopuszcza przechowywanie plików cookies, ale możliwe jest również całkowite zablokowanie tych plików lub usunięcie wybranych z nich.
