A. jest błędny, w atrybucie href powinien być podany adres URL
B. jest poprawny, po kliknięciu w odnośnik strona zostanie przewinięta do elementu o nazwie "hobby"
C. jest błędny, użyto niewłaściwego znaku # w atrybucie href
D. jest prawidłowy, po kliknięciu w odnośnik otworzy się strona pod adresem "hobby"
W znaczniku HTML a z atrybutem href='#hobby' zastosowano tzw. kotwicę fragmentu strony. Jest to popularna technika używana do bezpośredniego przenoszenia użytkownika do określonej części strony internetowej. Znak hash (#) wskazuje, że link odwołuje się do elementu o identyfikatorze hobby w obrębie tej samej strony. Tego rodzaju odnośniki są szeroko stosowane w długich dokumentach gdzie szybka nawigacja między sekcjami poprawia doświadczenie użytkownika. Aby kod działał poprawnie na stronie musi istnieć element z atrybutem id='hobby'. To działanie jest zgodne ze standardami HTML i jest zalecane w projektowaniu dostępnych i przyjaznych dla użytkownika aplikacji internetowych. Warto także pamiętać o stosowaniu opisowych identyfikatorów co ułatwia czytelność kodu i jego późniejsze utrzymanie. Praktyka ta jest zgodna z najlepszymi praktykami w zakresie użyteczności i dostępności stron internetowych co może również wpłynąć pozytywnie na SEO poprzez poprawę struktury strony.
Pytanie 2
Jak wygląda poprawny zapis znaczników, który jest zgodny z normami języka XHTML i odpowiada za łamanie linii?
A. <br/>
B. </br/>
C. </ br>
D. <br/>
Zapis znacznika </ br> jest niepoprawny, ponieważ nie można w ten sposób zamknąć znacznika, który nie ma zawartości. W XHTML wszystkie tagi muszą być poprawnie sformatowane, a takie umieszczenie spacji w znaczniku zamknięcia oraz użycie nieodpowiedniego formatu są całkowicie niezgodne z wymaganiami standardów. Kolejną niepoprawną koncepcją jest użycie </br/> - chociaż syntaktyczna forma jest bliska poprawnej, znaczniki otwierające i zamykające muszą mieć odpowiednie konteksty. W przypadku znaczników samozamykających się, takich jak <br/>, nie ma potrzeby umieszczania pary znaczników, ponieważ ich funkcjonalność polega na wstawieniu łamania linii, a nie na wytwarzaniu dodatkowego bloku. Ostatnią z wymienionych odpowiedzi, <br>, również nie jest zgodna z odpowiednim formatowaniem XHTML, ponieważ brakuje ukośnika, co czyni go niepoprawnym w kontekście stricte przestrzegania standardu. Podstawowym błędem w myśleniu, który prowadzi do tych niepoprawnych wniosków, jest niewłaściwe zrozumienie zasady samozamykania znaczników oraz ich roli w strukturze dokumentu HTML. Ignorowanie zasadności i standardów tworzenia HTML prowadzi do wielu problemów z interpretacją kodu przez różne środowiska oraz przeglądarki, co wpływa na ostateczną jakość i dostępność stron internetowych.
Pytanie 3
W kodzie CSS zapis ```a[target="_blank"] {color:yellow;}``` spowoduje, że kolor żółty zostanie przypisany do tekstu
A. linków, które są otwierane w tej samej karcie
B. tekstów w paragrafie
C. wszystkich linków
D. linków, które otwierają się w nowej karcie
Odpowiedź dotycząca odnośników, które otwierają się w osobnej karcie, jest poprawna, ponieważ selektor CSS 'a[target="_blank"]' precyzyjnie odnosi się do elementów <a> (odnośników), które mają atrybut target ustawiony na '_blank'. W HTML, atrybut target z wartością '_blank' informuje przeglądarkę, aby otworzyła link w nowej karcie lub oknie. W związku z tym, reguła CSS 'a[target="_blank"] {color:yellow;}' zmienia kolor tekstu tych konkretnych odnośników na żółty. Dobre praktyki w projektowaniu stron internetowych sugerują, aby wizualnie wyróżniać odnośniki otwierające się w nowej karcie, aby użytkownicy byli świadomi tego, że nowa zawartość zostanie otwarta, co zwiększa przejrzystość i użyteczność strony. Przykładem może być formularz kontaktowy, gdzie odnośniki do polityki prywatności mogą być otwierane w nowej karcie, a ich wyróżnienie kolorem może poprawić nawigację po stronie.
Pytanie 4
Jakim zapisem w dokumencie HTML można stworzyć element, który wyświetli obraz kotek.jpg oraz tekst alternatywny "obrazek kotka"?
A. <img href="kotek.jpg" alt="obrazek kotka">
B. <img href="kotek.jpg" title="obrazek kotka">
C. <img src="kotek.jpg" alt="obrazek kotka">
D. <img src="kotek.jpg" title="obrazek kotka">
Wszystkie odpowiedzi, które nie odpowiadają poprawnemu zapisowi, zawierają błędy związane z użyciem atrybutów w tagu <img>. W pierwszej odpowiedzi użyto atrybutu href, który nie jest właściwie stosowany w kontekście obrazów; zamiast tego, do osadzania linków należy używać tagu <a>. Druga odpowiedź również zawiera niepoprawny atrybut href, co sprawia, że obraz nie zostanie poprawnie załadowany. W trzeciej opcji atrybut title jest użyty, jednak jego funkcja jest inna niż atrybutu alt. Atrybut title dostarcza dodatkowych informacji o elemencie w formie podpowiedzi, ale nie jest wyświetlany w przypadku, gdy obraz nie może być załadowany, co czyni go niewystarczającym do celów dostępności. Taki błąd myślowy prowadzi do pominięcia istoty atrybutu alt, który jest niezbędny do opisania zawartości obrazu. Ponadto, nieprawidłowe atrybuty mogą powodować problemy z dostępnością, co jest sprzeczne z najlepszymi praktykami webowymi, mającymi na celu stworzenie ogólnodostępnych treści. Użycie niewłaściwych atrybutów może również negatywnie wpłynąć na doświadczenia użytkowników oraz potencjalnie na pozycjonowanie w wyszukiwarkach, dlatego ważne jest stosowanie zalecanych standardów przy tworzeniu stron internetowych.
Pytanie 5
Jaką wartość w systemie RGB uzyskamy dla koloru zapisanego w kodzie heksadecymalnym: #1510FE?
A. rgb(21,16,254)
B. rgb(15,10,FE)
C. rgb(21,16,255)
D. rgb(21,16,FE)
Odpowiedź rgb(21,16,254) jest poprawna, ponieważ kolor zapisany w systemie heksadecymalnym #1510FE można rozłożyć na składowe RGB. W kodzie heksadecymalnym każdy z trzech kolorów (czerwony, zielony, niebieski) jest reprezentowany przez dwie cyfry. W przypadku #1510FE, pierwsze dwie cyfry (15) odnoszą się do wartości czerwonej, drugie dwie (10) do wartości zielonej, a ostatnie dwie (FE) do wartości niebieskiej. Te wartości musimy przeliczyć na system dziesiętny: czerwony to 21 (15 w systemie szesnastkowym to 21 w dziesiętnym), zielony to 16 (10 w szesnastkowym to 16 w dziesiętnym), a niebieski to 254 (FE w szesnastkowym to 254 w dziesiętnym). Tak więc końcowy wynik to rgb(21,16,254). W praktyce, znajomość konwersji kolorów jest kluczowa w projektowaniu graficznym, stron internetowych oraz aplikacji, gdzie precyzyjne odwzorowanie kolorów jest niezbędne dla uzyskania poprawnej estetyki i spójności wizualnej. Warto zaznaczyć, że standardy takie jak sRGB są powszechnie stosowane do definiowania kolorów w cyfrowych mediach, co zapewnia zgodność i przewidywalność w różnych urządzeniach wyświetlających te kolory.
Pytanie 6
Który z poniższych kodów HTML najlepiej ilustruje opisaną tabelę? (Obramowanie tabeli oraz komórek zostało pominięte dla uproszczenia)
A. Odpowiedź A
B. Odpowiedź D
C. Odpowiedź C
D. Odpowiedź B
Pozostałe opcje zawierają błędy w użyciu atrybutów colspan i rowspan co prowadzi do nieprawidłowego odwzorowania struktury tabeli. W opcji A dane są przedstawione bez użycia rowspan co powoduje że każda informacja znajdowałaby się w osobnym wierszu nie łącząc kolumny Telefony co jest sprzeczne z przedstawionym stylem w pytaniu. To może prowadzić do dezorganizacji danych i braku przejrzystości. W przypadku opcji C zastosowanie colspan na ostatniej komórce jest błędne ponieważ rozszerza komórkę na dwie kolumny co nie jest zgodne z prezentowaną strukturą gdzie dane są ułożone w dwóch wierszach pod jednym nagłówkiem. Opcja D również błędnie używa colspan przy nagłówku Telefony co powoduje że dane nie są przedstawiane w logicznym układzie ukazującym że jedna kolumna powinna obejmować dwie komórki z telefonami. Takie błędy w strukturze tabeli mogą prowadzić do problemów z użytecznością i dostępnością strony internetowej ponieważ użytkownicy mogą mieć trudności z odnalezieniem i zrozumieniem prezentowanych informacji. Problemem jest również brak semantyczności co jest kluczowe dla SEO i dostępności dla osób korzystających z czytników ekranu. Dlatego ważne jest prawidłowe użycie atrybutów strukturalnych w HTML aby zapewnić dostępność i poprawne wyświetlanie treści na różnych urządzeniach i przeglądarkach co jest kluczowe w nowoczesnym projektowaniu stron internetowych. Dobre praktyki projektowania stron internetowych zalecają również używanie HTML w sposób semantyczny co pomaga w tworzeniu bardziej czytelnych i dostępnych dokumentów. Poprawne użycie atrybutów takich jak rowspan i colspan jest kluczowe w osiągnięciu tych celów i uniknięciu nieporozumień i błędów w prezentacji danych na stronach internetowych. Ułatwia to również utrzymanie i aktualizację kodu w przyszłości oraz zwiększa ogólną jakość i dostępność strony internetowej.
Pytanie 7
W jakim standardzie języka hipertekstowego wprowadzono do składni znaczniki sekcji <footer>, <header>, <nav>?
A. XHTML 2.0
B. HTML4
C. HTML5
D. XHTML1.0
Tak, znaczników <footer>, <header> i <nav> zaczęto używać w HTML5, który zadebiutował w październiku 2014 roku. To jest ciekawe, bo HTML5 wprowadził sporo nowych semantycznych elementów, które pomagają w lepszej organizacji dokumentów HTML. Dzięki nim, przeglądarki i roboty wyszukiwarek mogą lepiej zrozumieć strukturę stron. Na przykład, <header> to nagłówek strony lub sekcji, <nav> tworzy menu nawigacyjne, a <footer> to stopka. Myślę, że to super sprawa, bo poprawia dostępność strony i jej SEO, bo tak naprawdę pomaga wyszukiwarkom w lepszym indeksowaniu treści, co może prowadzić do lepszych wyników w wyszukiwarkach. Dodatkowo, HTML5 ma też inne ciekawe nowinki, jak wsparcie dla multimediów, lokalne przechowywanie danych, a także lepszą kompatybilność z aplikacjami mobilnymi, więc zdecydowanie warto go wykorzystywać do budowy stron internetowych.
Pytanie 8
Które z pól edycyjnych zostało stylizowane według podanego wzoru, zakładając, że pozostałe atrybuty pola mają wartości domyślne, a użytkownik wpisał imię Krzysztof w przeglądarce?
A. Pole 3
B. Pole 2
C. Pole 4
D. Pole 1
Pole 1 mimo że prezentuje tekst w większym prostokątnym formacie nie ma charakterystycznego zaokrąglenia krawędzi które jest kluczowe dla podanego stylu CSS Zaokrąglenie krawędzi border-radius 7px to istotna część stylu która wpływa na wizualne odczucie przyjazności i nowoczesności interfejsu użytkownika dodatkowo kolor tekstu w Polu 1 wydaje się niezgodny z podanym stylem ponieważ biel tekstu jest priorytetyzowana dla kontrastu na ciemnym tle Pole 3 z kolei choć posiada pewien stopień zaokrąglenia nie spełnia wymagań pełnego zaokrąglenia 7px a także jego kolorystyka może różnić się od poprawnie zastosowanego tła Teal i białego tekstu co może prowadzić do problemów z czytelnością Pole 4 mimo że może wydawać się odpowiednie pod względem kształtu ma bardziej wyraziste obramowanie które jest sprzeczne z właściwością border none celem którego jest usunięcie widocznych linii obramowania Kluczowym elementem przy stylizacji jest spójna implementacja wszystkich właściwości CSS co oznacza że brak jednego z nich jak zaokrąglenie czy kolor tekstu może znacząco wpłynąć na końcowy odbiór i funkcjonalność elementu wizualnego Właściwe zrozumienie i stosowanie stylów CSS jest podstawą tworzenia atrakcyjnych i funkcjonalnych interfejsów które są jednocześnie estetyczne i ergonomiczne w użytkowaniu
Pytanie 9
Kolor, który ma odcień niebieski to kolor
A. #EE00EE
B. #00EE00
C. #0000EE
D. #EE0000
Inne kolory, takie jak #EE0000, #00EE00, czy #EE00EE, w ogóle nie nadają się do reprezentacji niebieskiego. Kod #EE0000 to intensywna czerwień, gdzie składowa czerwona (R) ma wartość 238, a pozostałe są zero. To kolor, którego używa się, żeby coś wyróżnić, na przykład przyciski typu "Zamów teraz". Potem mamy kod #00EE00, który to czysta zieleń, z maksymalną składową zieloną (G) na poziomie 238. Te zielone kolory często pokazują, że coś poszło dobrze, w stylu potwierdzeń. No i kod #EE00EE to fiolet, gdzie zarówno czerwony (R), jak i niebieski (B) są wysokie. Choć jest fajny, nie ma nic wspólnego z niebieskim. Często ludzie mylą kolory, bo nie do końca znają zasady RGB, co warto ogarnąć, bo każdy kod oznacza inny kolor, a wiedza o tym jest kluczowa w projektowaniu wizualnym.
Pytanie 10
W HTML znacznik <i> wywołuje taki sam efekt wizualny jak znacznik
A. <strong>
B. <pre>
C. <u>
D. <em>
Znacznik <em> (emphasis) w języku HTML jest używany do podkreślenia znaczenia słów lub fraz w kontekście tekstu, co jest zgodne z semantyką sieci. Użycie tego znacznika nie tylko zmienia styl prezentacji tekstu na kursywę, ale także wskazuje, że dany fragment tekstu jest istotny dla zrozumienia całości. Znacznik <i> (italic) również stosuje kursywę, ale nie ma znaczenia semantycznego, co oznacza, że nie informuje przeglądarek ani technologii wspomagających o istotności tego tekstu. W praktyce, stosując <em> w miejscach, gdzie chcemy zaakcentować ważne elementy, pomagamy w poprawie dostępności strony oraz w jej SEO, ponieważ wyszukiwarki mogą lepiej zrozumieć strukturę i kontekst treści. Warto pamiętać, że według standardów W3C, stosowanie znaczników semantycznych, takich jak <em>, jest zalecane dla poprawy struktury dokumentu HTML oraz dla lepszej interakcji z użytkownikami wykorzystującymi technologie asystujące. Przykład: <p>W tej książce <em>odkryjesz</em> nowe możliwości.</p>
Pytanie 11
Aby zgrupować elementy w jeden blok, jaki znacznik można zastosować?
A. <param>
B. <span>
C. <div>
D. <p>
Znacznik <div> jest używany do grupowania elementów w blok i jest jednym z najważniejszych elementów w HTML. Jego główną funkcją jest umożliwienie tworzenia struktury dokumentu oraz zarządzanie layoutem poprzez CSS. Przykładowo, można używać <div> do tworzenia sekcji na stronie, takich jak nagłówki, stopki czy kolumny, co ułatwia organizację treści i poprawia czytelność kodu. Dobrą praktyką jest stosowanie <div> w połączeniu z odpowiednimi klasami CSS, co pozwala na precyzyjne dostosowanie stylów do różnych elementów. W kontekście dostępności, użycie <div> powinno być przemyślane, aby nie wprowadzać chaosu w strukturze strony, co może być problematyczne dla technologii wspomagających. Zgodnie z wytycznymi W3C, każdy z używanych znaczników powinien mieć dobrze zdefiniowane zadanie, a <div> idealnie spełnia rolę kontenera dla innych elementów, poprawiając w ten sposób semantykę i organizację dokumentu.
Pytanie 12
W CSS, poniższy zapis spowoduje, że czerwony kolor zostanie zastosowany do
h1::first-letter {color:red;}
A. pierwsza litera nagłówka pierwszego poziomu
B. tekst nagłówka pierwszego poziomu
C. pierwsza linia akapitu
D. pierwsza litera nagłówka drugiego poziomu
Wiesz, użycie selektora CSS ::first-letter w połączeniu z stylem h1 to fajny sposób na zmianę wyglądu pierwszej litery w nagłówku. Kiedy używasz tego, kolor czerwony sprawi, że ta litera będzie się wyróżniać, co jest super, zwłaszcza w przypadku nagłówków czy akapitów. To technika, którą często stosuje się w projektowaniu stron, żeby nadać im trochę typograficznego stylu, jak w książkach z dużymi inicjałami. Ale pamiętaj, że ten selektor działa tylko z blokowymi elementami, takimi jak <p> czy <h1>, więc jeżeli spróbujesz zastosować go z elementami liniowymi, to niestety efekty nie będą takie, jak się spodziewasz. Zawsze warto też mieć na uwadze standardy W3C, bo one pomagają w tworzeniu dostępnych stron. No i ten selektor jest częścią specyfikacji CSS Pseudo-Elements Level 3, więc przeglądarki go dobrze wspierają. Zrozumienie, jak i kiedy stosować takie selektory, to klucz do tworzenia nowoczesnych stron.
Pytanie 13
W CSS, aby ustawić wcięcie pierwszej linii akapitu na 30 pikseli, należy użyć zapisu
A. p {line-indent: 30px;}
B. p {text-spacing: 30px;}
C. p {line-height: 30px;}
D. p {text-indent: 30px;}
Odpowiedź p {text-indent: 30px;} jest prawidłowa, ponieważ właściwość text-indent w CSS służy do określenia wcięcia pierwszej linii akapitu. Wartość 30px oznacza, że pierwsza linia każdego akapitu zostanie przesunięta o 30 pikseli w prawo, co jest często stosowaną praktyką w celu poprawy czytelności tekstu. Dobrą praktyką jest stosowanie wcięć w dłuższych tekstach, co pozwala na bardziej uporządkowane i estetyczne przedstawienie treści. Przykładem zastosowania może być wcięcie w blogach czy artykułach, gdzie struktura tekstu ma znaczenie dla odbiorcy. Warto pamiętać, że właściwość text-indent działa tylko na pierwszą linię akapitu, co oznacza, że kolejne linie pozostają w standardowej pozycji. Używanie text-indent jest zgodne z dobrymi praktykami projektowania stron internetowych, które podkreślają znaczenie czytelności i estetyki tekstu.
Pytanie 14
W przedstawionej regule CSS h1{color: blue} co oznacza h1?
A. selektor
B. klasę
C. wartość
D. deklarację
W regule CSS h1{color: blue} termin h1 odnosi się do selektora, który jest używany do wybierania elementów HTML, a w tym przypadku oznacza wszystkie nagłówki pierwszego poziomu. Selekcje w CSS są kluczowym elementem stylizacji stron internetowych, ponieważ pozwalają na precyzyjne określenie, które elementy mają być stylizowane. Selekcja h1 odnosi się do wszystkich elementów <h1> w dokumencie HTML, co oznacza, że wszystkie nagłówki pierwszego poziomu zostaną stylizowane zgodnie z podaną regułą. Wartością kolorystyki, czyli blue, jest przypisana do właściwości CSS 'color', co skutkuje zmianą koloru tekstu nagłówka na niebieski. Zgodnie z W3C, CSS (Cascading Style Sheets) pozwala na oddzielenie treści od prezentacji, co zwiększa elastyczność i ułatwia zarządzanie stylem strony. Przykładem praktycznym może być strona internetowa, gdzie wszystkie nagłówki pierwszego poziomu są wyróżnione kolorem niebieskim, co przyciąga uwagę użytkowników i poprawia czytelność. Selekcja jest zatem podstawowym narzędziem w stylizacji, umożliwiającym aplikację reguł CSS do określonych elementów HTML.
Pytanie 15
Jakiego znacznika używa się do definiowania listy definicji w kodzie HTML?
A. <label>
B. <abbr>
C. <dl>
D. <td>
Znacznik <dl> w HTML, oznaczający 'definition list', jest używany do tworzenia list definicyjnych, które składają się z pary elementów: definicji i terminów. W skład takiej struktury wchodzą dwa kluczowe znaczniki: <dt>, który definiuje termin, oraz <dd>, który dostarcza jego definicję. Użycie tego znacznika pozwala na semantyczne i czytelne przedstawienie informacji, co jest istotne zarówno dla użytkowników, jak i dla wyszukiwarek internetowych. Dobrze skonstruowana lista definicyjna zwiększa dostępność treści oraz poprawia SEO strony, gdyż ułatwia robotom indeksującym zrozumienie kontekstu informacji. Na przykład, jeśli stworzymy listę definicyjną dla terminów związanych z technologią, możemy użyć <dl> do przedstawienia pojęć jak 'HTML', 'CSS', 'JavaScript' oraz ich opisów. W ten sposób przedstawiamy skomplikowane informacje w zorganizowanej formie, co jest rekomendowane przez W3C w dokumentacji dotyczącej HTML5, gdzie podkreśla się znaczenie semantyki w tworzeniu stron internetowych.
Pytanie 16
W jakiej technologii niemożliwe jest przetwarzanie danych wprowadzanych przez użytkownika na stronie WWW?
A. CSS
B. PHP
C. AJAX
D. JavaScript
CSS, czyli Kaskadowe Arkusze Stylów, jest technologią używaną do stylizacji stron internetowych. Jego głównym celem jest określenie, jak elementy HTML powinny wyglądać, w tym ich wygląd, kolor, rozmiar oraz układ na stronie. CSS nie ma możliwości przetwarzania danych użytkownika, ponieważ działa wyłącznie po stronie klienta i nie posiada funkcji interakcji z danymi użytkowników. Przykładem zastosowania CSS jest nadanie stylu nawigacji w serwisie internetowym, gdzie style mogą być określone w pliku CSS, ale nie mają zdolności do przechwytywania i przetwarzania informacji wprowadzonych przez użytkowników w formularzach. Standardy CSS rozwijane przez World Wide Web Consortium (W3C) podkreślają jego rolę w stylizacji i prezentacji, a nie w logice aplikacji czy przetwarzaniu danych. Użytkownicy mogą korzystać z CSS do tworzenia responsywnych układów, jednak bez zdolności do interakcji z danymi, co czyni go technologią czysto wizualną.
Pytanie 17
Aby poprawić prędkość ładowania strony z grafiką o wymiarach 2000 px na 760 px, konieczne jest zmniejszenie rozmiarów grafiki?
A. za pomocą atrybutów HTML
B. za pomocą właściwości CSS, podając rozmiar w pikselach
C. w programie graficznym
D. za pomocą właściwości CSS, podając rozmiar w procentach
Zwiększenie szybkości działania strony internetowej z grafiką o wymiarach 2000 px na 760 px jest kluczowym zadaniem dla zapewnienia lepszej wydajności i doświadczeń użytkowników. Zmniejszenie rozmiarów grafiki w programie graficznym przed jej umieszczeniem na stronie jest najlepszą praktyką. Poprzez optymalizację obrazu możemy znacznie zmniejszyć jego wagę, co przyspiesza ładowanie strony. Programy graficzne, takie jak Adobe Photoshop czy GIMP, oferują różne narzędzia do kompresji obrazów bez zauważalnej utraty jakości. Dodatkowo, stosowanie formatów plików odpowiednich do rodzaju grafiki, jak JPEG dla zdjęć lub PNG dla grafik z przezroczystością, może przyczynić się do dalszej optymalizacji. Warto również pamiętać o technikach, takich jak lazy loading, które pozwalają na ładowanie obrazów w miarę przewijania strony, co również wpływa na szybkość ładowania. Te czynności są zgodne z zasadami SEO i wynikami stron w wyszukiwarkach, co czyni je kluczowymi dla każdego twórcy internetowego.
Pytanie 18
Jakie działania należy podjąć, aby stworzyć stronę internetową dostosowaną do potrzeb osób z niepełnosprawnościami, zgodnie z wytycznymi WCAG 2.x?
A. używać jedynie jednej palety barw z jednym głównym kolorem oraz jego różnymi odcieniami
B. podpisywać wszystkie obrazy tekstem alternatywnym oraz kontrolki etykietami
C. używać jedynie paragrafów, nie wykorzystywać nagłówków h1 – h6
D. wybrać najczęściej stosowaną przeglądarkę i na niej przeprowadzać testy tworzonej strony
Podpisywanie wszystkich obrazów tekstem alternatywnym oraz etykietowanie kontrolek jest kluczowym elementem tworzenia dostępnych stron internetowych i jest zgodne z wytycznymi WCAG 2.x. Tekst alternatywny (alt text) dla obrazów umożliwia użytkownikom korzystającym z technologii asystujących, takich jak czytniki ekranu, zrozumienie kontekstu wizualnego, co jest szczególnie istotne dla osób z niepełnosprawnościami wzrokowymi. Etykiety dla kontrolek, takich jak pola formularzy, również pełnią ważną rolę w dostępności, ponieważ zapewniają jasne wskazówki dotyczące interakcji i funkcji. Przykładem poprawnego zastosowania jest dodanie atrybutu alt do obrazów, jak <img src='obraz.jpg' alt='Opis obrazu'> oraz stosowanie etykiet w formularzach, np. <label for='imie'>Imię:</label>. Praktyki te są zgodne z zasadą percepcji z WCAG, która mówi, że wszystkie informacje i komponenty interaktywne muszą być dostępne dla użytkowników.
Pytanie 19
Głównym celem systemu CMS jest oddzielenie treści serwisu informacyjnego od jego wizualnej formy. Ten efekt osiągany jest przez generowanie zawartości
A. z bazy danych oraz wyglądu ze zdefiniowanego szablonu
B. z plików HTML o stałej zawartości oraz wizualizacji przy pomocy technologii FLASH
C. z plików HTML o stałej zawartości oraz wizualizacji z użyciem ustalonego szablonu
D. z bazy danych oraz wizualizacji poprzez atrybuty HTML
Poprawna odpowiedź na to pytanie to "z bazy danych oraz wyglądu ze zdefiniowanego szablonu". Systemy CMS (Content Management System) mają na celu oddzielenie treści od prezentacji, co pozwala na łatwiejsze zarządzanie i aktualizowanie zawartości serwisu. Wykorzystanie bazy danych do przechowywania treści jest kluczowe, ponieważ umożliwia dynamiczne generowanie zawartości na stronach internetowych. Dzięki temu, gdy zmienia się treść w bazie danych, zmiany te są automatycznie odzwierciedlane na stronie bez potrzeby modyfikacji statycznych plików HTML. Szablony, które definiują wygląd, są również niezmiernie ważne, ponieważ pozwalają na spójność wizualną serwisu i jego łatwą adaptację w przypadku zmian w designie. Przykładem może być użycie systemu szablonów, takiego jak Twig w Symfony, który umożliwia separację logiki biznesowej od prezentacji, co ułatwia pracę developerom i designerom. Takie podejście jest zgodne z najlepszymi praktykami w branży, zapewniając przy tym elastyczność i skalowalność serwisów internetowych.
Pytanie 20
W języku JavaScript należy uzyskać dostęp do elementu w pierwszym akapicie podanego kodu HTML. Jak można to zrobić za pomocą funkcji
Metoda getElementsByTagName('p')[0] jest prawidłowym sposobem odwołania się do pierwszego elementu <p> w dokumencie HTML. Funkcja getElementsByTagName zwraca kolekcję wszystkich elementów o określonej nazwie tagu. W przypadku użycia tagu 'p', funkcja zwraca tablicę wszystkich paragrafów. Aby uzyskać dostęp do pierwszego paragrafu, korzystamy z indeksu [0], co jest zgodne z konwencją numerowania od zera w językach programowania. Praktyczne zastosowanie tej metody obejmuje manipulację treścią lub stylami pierwszego paragrafu, na przykład zmiana jego tekstu za pomocą innerHTML lub dodanie klasy CSS w celu zmiany jego wyglądu. Stosowanie getElementsByTagName jest zgodne z powszechnymi standardami i dobrymi praktykami w pracy z DOM (Document Object Model) w JavaScript. Ważne jest zrozumienie tego mechanizmu, aby efektywnie operować na elementach HTML oraz tworzyć dynamiczne i interaktywne strony internetowe. Warto również pamiętać, że metoda ta zwraca dynamiczną kolekcję, co oznacza, że zmiany w DOM automatycznie wpływają na zawartość zwróconej kolekcji.
Pytanie 21
Które ze znaczników HTML umożliwią wyświetlenie na stronie tekstu w jednym wierszu, jeżeli żadne formatowanie CSS nie zostało zdefiniowane?
Dobre strony mojej strony
A. <span>Dobre strony </span><span style=”letter-spacing:3px”>mojej strony</span>
B. <p>Dobre strony </p><p style=”letter-spacing:3px”>mojej strony</p>
C. <h3>Dobre strony </h3><h3 style=”letter-spacing:3px”>mojej strony</h3>
D. <div>Dobre strony </div><div style=”letter-spacing:3px”>mojej strony</div>
Gratulacje, Twoja odpowiedź jest prawidłowa. Wybrałeś znacznik <span>, który jest znacznikiem liniowym w HTML. Znaczniki liniowe nie zaczynają nowego wiersza po swoim zakończeniu, co oznacza, że tekst zawarty w kolejnych znacznikach <span> będzie wyświetlany w jednym wierszu, o ile nie zdefiniowano inaczej za pomocą CSS. Jest to bardzo ważne, kiedy chcemy utworzyć strukturę strony, która nie zależy od domyślnych formatowań. Przykładowo, używając <span>, możemy skonstruować skomplikowane layouty, które są niemożliwe do osiągnięcia za pomocą samych znaczników blokowych. Pamiętaj jednak, że odpowiednie stosowanie znaczników liniowych i blokowych jest ważnym elementem tworzenia semantycznie poprawnych stron internetowych, co może pomóc w poprawie SEO i dostępności Twojej strony.
Pytanie 22
Aby przekształcić obraz z formatu JPEG do PNG bez utraty jakości, tak aby kolor biały w oryginalnym obrazie został zastąpiony przezroczystością w wersji docelowej, należy najpierw
A. dodać kanał alfa
B. usunięcie gumką wszystkich białych miejsc
C. obniżyć rozdzielczość obrazu
D. załadować obraz do programu do edycji grafiki wektorowej
Żeby zmienić obrazek z formatu JPEG na PNG i zachować przezroczystość tam, gdzie wcześniej był biały kolor, ważny krok to dodanie kanału alfa. To w zasadzie taka dodatkowa warstwa w obrazie, która mówi, które piksele mają być przezroczyste. JPEG nie umie obsługiwać przezroczystości, więc białe obszary będą się pokazywać jako nieprzezroczyste. Jak już dodasz ten kanał alfa, możesz ustawić przezroczystość dla białych pikseli, co pozwoli na ich ukrycie lub zamianę na przezroczystość w końcowym obrazku. Na przykład, w programach jak Adobe Photoshop można użyć narzędzia do zaznaczania kolorów, żeby wybrać wszystkie białe piksele i potem je usunąć, zostawiając tylko przezroczystość. W ten sposób dostajesz efekt, którego chcesz w obrazie PNG, co jest zgodne z dobrą praktyką w obróbce grafiki i pomaga utrzymać wysoką jakość obrazu bez żadnych strat.
Pytanie 23
Dla strony internetowej stworzono grafikę rysunek.jpg o wymiarach: szerokość 200 px, wysokość 100 px. Jak można wyświetlić tę grafikę jako miniaturę – pomniejszoną z zachowaniem proporcji, używając znacznika?
A. <img src="rysunek.png" style="width: 25px; height:25px;">
B. <img src="rysunek.png" style="width: 25px; height:50px;">
C. <img src="rysunek.png">
D. <img src="rysunek.png" style="width: 50px">
Pozostałe odpowiedzi niestety nie trzymają się zasady zachowania proporcji, jak zmniejszamy grafikę. W pierwszej opcji, <img src="rysunek.png" style="width: 25px; height:50px"> zestawione wartości szerokości i wysokości są krzywe, co powoduje zniekształcenie obrazu. Oryginalny rysunek ma proporcje 2:1, a tu wychodzi 1:2, co może wprowadzać ludzi w błąd. W trzeciej opcji, <img src="rysunek.png"> brak wskazania szerokości i wysokości sprawia, że obrazek wyświetla się w swoim pierwotnym rozmiarze, a to nie jest cel, bo chcemy mieć miniaturę. A ostatnia odpowiedź, <img src="rysunek.png" style="width: 25px; height:25px;"> ustala jednakowe wymiary, przez co wychodzi kwadratowa miniaturka, co nie zgadza się z oryginalnymi proporcjami. Generalnie, niepoprawne odpowiedzi mogą wynikać z braku zrozumienia, dlaczego dbanie o proporcje w grafikach jest takie ważne. To kluczowe zagadnienie w projektowaniu stron, bo dobre proporcje to podstawa estetyki i funkcjonalności wizualnych elementów na stronie.
Pytanie 24
Logo platformy CMS noszącej nazwę Joomla! to
A. B
B. A
C. D
D. C
Logo Joomla! jest charakterystyczne z uwagi na swoją kolorystykę i kształt symbolizujący współpracę oraz integrację. Zawiera cztery kolorowe elementy splecione w formie kwiatka lub wiru co często jest interpretowane jako symbol integracji społeczności i otwartości na różnorodność. Joomla! to system zarządzania treścią (CMS) napisany w PHP który wykorzystywany jest do tworzenia stron internetowych blogów i aplikacji internetowych. Jest jednym z najpopularniejszych CMS na świecie dzięki swojej elastyczności modułom oraz dużej społeczności wspierającej rozwój. Joomla! jest wykorzystywany zarówno przez małe przedsiębiorstwa jak i duże organizacje dzięki swojej możliwości skalowania i dostosowywania do indywidualnych potrzeb. Dodatkowo jego open-source'owy charakter pozwala na szerokie dostosowanie kodu do specyficznych wymagań co jest cenione przez programistów i deweloperów. Dobry wybór Joomla! jako CMS może znacząco przyspieszyć proces tworzenia i zarządzania treścią na stronie internetowej oferując jednocześnie wsparcie licznych rozszerzeń i szablonów
Pytanie 25
Jaką transformację w CSS zastosujemy, aby tylko pierwsze litery wszystkich słów stały się wielkie?
A. lowercase
B. underline
C. capitalize
D. uppercase
Odpowiedź 'capitalize' jest prawidłowa, ponieważ w CSS odnosi się do właściwości text-transform, która umożliwia manipulację sposobem wyświetlania tekstu. Użycie 'capitalize' powoduje, że pierwsza litera każdego wyrazu w danym elemencie HTML zostaje zmieniona na wielką literę. Na przykład, jeśli mamy tekst "przykład tekstu", zastosowanie 'text-transform: capitalize;' przekształci go na "Przykład Tekstu". Jest to szczególnie przydatne w tworzeniu estetycznych nagłówków lub list, gdzie chcemy, aby każde słowo zaczynało się od wielkiej litery. W kontekście dobrych praktyk, używanie transformacji tekstu powinno być zgodne z zasadami dostępności, aby nie wpłynęło negatywnie na odczyt tekstu przez technologie wspomagające. Warto także pamiętać, że 'capitalize' działa na każdy wyraz, co czyni go bardziej elastycznym w kontekście stylizacji niż inne opcje, takie jak 'uppercase', które zmieniają wszystkie litery na duże, co mogłoby zniekształcić zamierzony przekaz tekstowy.
Pytanie 26
Emblemat systemu CMS o nazwie Joomla! to
A. Rys. A
B. Rys. C
C. Rys. D
D. Rys. B
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 27
W CSS wartości underline, overline, blink są przypisane do atrybutu
A. font-weight
B. text-decoration
C. text-style
D. font-style
Właściwość CSS 'text-decoration' to coś, co naprawdę może zmienić wygląd tekstu na stronach internetowych. Dzięki niej możemy dodać różne efekty dekoracyjne, jak podkreślenie, przekreślenie, czy nadkreślenie. Zdarzają się też nowinki, jak efekt 'blink', chociaż nie jest on zbyt popularny w profesjonalnym kodzie. Warto pamiętać, że stosowanie tej właściwości poprawia czytelność i estetykę tekstu. Na przykład, gdy chcemy wyróżnić ważne informacje, możemy użyć 'text-decoration: underline;'. Ciekawostka: niektóre efekty, jak 'blink', mogą sprawić problemy z dostępnością, więc lepiej ich unikać. Właściwe użycie 'text-decoration' w połączeniu z odpowiednimi znacznikami HTML, jak <span> lub <a>, może naprawdę poprawić interaktywność naszej strony. Dobrze jest o tym pamiętać, gdy pracujemy nad projektami.
Pytanie 28
W sekcji nagłówka dokumentu HTML umieszczono ```
Strona miłośników psów``` Zawarty tekst będzie widoczny
A. w treści witryny, w pierwszym ukazanym nagłówku
B. w polu adresowym, za wprowadzonym adresem URL
C. w treści witryny, na banerze witryny
D. na pasku tytułu w przeglądarce
Odpowiedź jest poprawna, ponieważ zawartość tagu <title> w kodzie HTML określa tytuł dokumentu, który jest wyświetlany na pasku tytułu przeglądarki. Tytuł ten jest kluczowym elementem SEO, ponieważ wpływa na sposób, w jaki użytkownicy postrzegają stronę w wynikach wyszukiwania. W praktyce, dobrze dobrany tytuł zwiększa szansę na kliknięcia i poprawia widoczność strony w internecie. Warto pamiętać, że tytuł powinien być krótki, zwięzły i zawierać najważniejsze słowa kluczowe, aby skutecznie komunikować, o czym jest strona. Dobre praktyki zalecają, aby długość tytułu nie przekraczała 60 znaków, aby uniknąć jego obcięcia w wynikach wyszukiwania. Dodatkowo, tytuł powinien być unikalny dla każdej podstrony, co ułatwia użytkownikom i wyszukiwarkom zrozumienie zawartości witryny.
Pytanie 29
Która z zasad walidacji strony internetowej jest nieprawidłowa?
A. Tagi, poza samozamykającymi się, funkcjonują do momentu ich wyłączenia znakiem "/", np. ```<p> ..</p>```
B. W tagach nie jest brana pod uwagę różnica między dużymi a małymi literami, np. ```<p>``` i ```<P>``` to ten sam tag.
C. Wyłączanie tagów musi następować w odwrotnej sekwencji do ich włączenia, np. ```<p> ... <big>...</big></p>```
D. Jeżeli w poleceniu występuje kilka atrybutów, ich kolejność powinna być uporządkowana alfabetycznie np. ```<img alt="..." src="/.."/>```
Koncepcje zawarte w niepoprawnych odpowiedziach są oparte na błędnym zrozumieniu zasad działania znaczników HTML. W kontekście wyłączania znaczników, ważne jest, aby pamiętać, że znacznik startowy powinien być zawsze zamknięty odpowiednim znacznikiem końcowym, co oznacza, że struktura dokumentu musi być prawidłowo zagnieżdżona. Zasada dotycząca wyłączania znaczników w odwrotnej kolejności jest nieprawidłowa, ponieważ znaczniki nie są stosowane w taki sposób, a ich zamykanie powinno być zgodne z ich zagnieżdżeniem. Rozumienie tej zasady jest kluczowe dla tworzenia poprawnej struktury dokumentu HTML. Warto również zauważyć, że HTML nie rozróżnia wielkich i małych liter w znacznikach, co jest istotnym uproszczeniem, ale nie oznacza, że można je mieszać w sposób dowolny. Zastosowanie spójnych konwencji nazewnictwa, takich jak używanie małych liter, jest wskazane dla zachowania czytelności kodu. Rozumienie tych zasad jest kluczowe dla efektywnego projektowania stron internetowych oraz dla utrzymania wysokiej jakości kodu. W przypadku, gdy znacznik nie jest poprawnie zamknięty, może to prowadzić do błędów w renderowaniu strony oraz problemów z jej dostępnością. Dlatego kluczowe jest stosowanie się do zasad poprawności kodu i jego semantyki.
Pytanie 30
W CSS zapis a[target="_blank"] {color: yellow;} spowoduje, że czcionka przybierze kolor żółty
A. wszystkich linków.
B. treści akapitu.
C. linków, które otwierają się w nowej karcie.
D. linków, które otwierają się w tej samej karcie.
Odpowiedź 'odnośników, które otwierają się w osobnej karcie' jest poprawna, ponieważ w CSS selektor 'a[target="_blank"]' odnosi się do elementów <a> (odnośników), które mają atrybut 'target' ustawiony na '_blank'. Oznacza to, że te odnośniki są zaprojektowane do otwierania linków w nowej karcie lub oknie przeglądarki. Przykład zastosowania: jeśli tworzymy stronę internetową z odnośnikami do zewnętrznych zasobów, użycie atrybutu 'target="_blank"' pozwala użytkownikom na zachowanie otwartej strony w przeglądarce. W CSS, kolor czcionki tych odnośników został ustawiony na żółty, co jest praktycznym podejściem do wyróżnienia ich w stosunku do innych linków. Warto również zauważyć, że stosowanie kolorów w kontekście dostępności jest istotne, dlatego dobór kolorów powinien być przemyślany, aby nie wpłynąć negatywnie na czytelność. Dobre praktyki obejmują również dodanie wskazówki do odnośnika, na przykład poprzez użycie atrybutu 'title', co jeszcze bardziej ułatwia użytkownikom zrozumienie, czego mogą się spodziewać po kliknięciu w link.
Pytanie 31
Strona internetowa została napisana w języku XHTML. Który z poniższych kodów przedstawia implementację zamieszczonego fragmentu strony, przy założeniu, że nie zdefiniowano żadnych stylów CSS?
A. <h1>Początki HTML</h1><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył<b>prototyp hipertekstowego systemu informacyjnego - <i>ENQUIRE</i></b></p>
B. <b>Początki HTML</b><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<hr /> stworzył<b>prototyp hipertekstowego systemu informacyjnego - <i>ENQUIRE</i></b></p>
C. <h1>Początki HTML</h1><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył<i>prototyp hipertekstowego systemu informacyjnego - <b>ENQUIRE</b></i></p>
D. <b>Początki HTML</b><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył<b>prototyp hipertekstowego systemu informacyjnego - <i>ENQUIRE</i></b></p>
Odpowiedź druga jest prawidłowa, ponieważ w XHTML stosowanie znaczników zgodnych z HTML jest kluczowe. Nagłówek <h1> wskazuje na najbardziej wyróżniający się element na stronie, co jest zgodne z prezentowanym obrazem, gdzie 'Początki HTML' jest nagłówkiem. XHTML wymaga, by wszystkie elementy były poprawnie zagnieżdżone i zamknięte, a tag <br /> jest poprawnie użyty jako samo zamykający się, co jest wymagane w XHTML. Ponadto, struktura dokumentu XHTML musi być bardziej restrykcyjna, co oznacza, że używanie semantycznych znaczników jak <h1> dla nagłówków sprzyja lepszej interpretacji struktury dokumentu przez przeglądarki i narzędzia dostępności. Poprawne użycie <b> i <i> do wyróżniania tekstu jest zgodne ze standardami, chociaż w nowoczesnym HTML5 zaleca się używanie <strong> i <em> dla semantycznego formatowania. Takie podejście wspomaga dostępność oraz ułatwia zrozumienie kodu przez inne osoby. Dobór tagów w tej odpowiedzi pokazuje zrozumienie zasad semantyki oraz poprawnej struktury dokumentów w XHTML co jest zgodne z dobrymi praktykami web developmentu.
Pytanie 32
Przedstawiono kod tabeli 3×2.Której modyfikacji w jej drugim wierszu należy dokonać, aby tabela wyglądała jak na obrazie z niewidocznym wierszem?
Wybrana odpowiedź jest niepoprawna, ale nie martw się, to jest okazja do nauki. Jeśli chcesz ukryć element na stronie, ale zachować jego miejsce w układzie, powinieneś użyć właściwości CSS 'visibility: hidden'. Takie podejście jest zgodne z dobrymi praktykami w tworzeniu stron internetowych. Inne opcje, takie jak 'display: none', 'display: table-cell' i 'clear: none' nie są odpowiednie w tym kontekście. 'display: none' całkowicie usuwa element z układu strony, co powoduje przesunięcie pozostałych elementów, aby zapełnić puste miejsce. 'display: table-cell' jest właściwością, która pozwala elementowi zachowywać się jak komórka tabeli, co nie ma tutaj zastosowania, gdyż chcemy ukryć cały wiersz, a nie pojedynczą komórkę. 'clear: none' jest właściwością używaną do kontroli przepływu elementów w stosunku do elementów z lewej lub prawej strony, ale nie ma wpływu na ukrywanie elementów. Dobra praktyka polega na zrozumieniu i właściwym stosowaniu różnych właściwości CSS, aby uzyskać zamierzony efekt na stronie.
Pytanie 33
Zapis w CSS `h2 {background-color: green;}` spowoduje, że kolor zielony będzie dotyczył
A. tła tekstu nagłówka drugiego poziomu
B. czcionki nagłówków drugiego poziomu
C. tła całej witryny
D. czcionki wszystkich nagłówków na stronie
Zapis CSS 'h2 {background-color: green;}' ustawia styl dla nagłówków drugiego stopnia. Dzięki właściwości 'background-color' tło nagłówka zrobi się zielone, co oznacza, że obszar za tekstem tego nagłówka będzie miał kolor zielony. Ważne, żeby pamiętać, że to działa tylko na tło samego nagłówka, a nie na całą stronę. Na przykład, jeśli w elemencie h2 jest tekst 'Witamy na naszej stronie', to tło tego nagłówka dostaje zielony kolor. To podejście jest zgodne z CSS, które pozwala na precyzyjne stylizowanie różnych elementów w dokumencie. Można też używać różnych trybów kolorów jak RGB, HEX czy HSL, co daje jeszcze większe możliwości w projektowaniu.
Pytanie 34
Wskaż, jaki błąd walidacyjny zawiera przedstawiony fragment kodu w języku HTML 5. ```
CSS
Kaskadowe arkusze stylów (ang. Cascading Style Sheets) to język służący ...```
A. Znacznik h6 nie jest używany w HTML5
B. Znacznik zamykający /b jest niezgodny z zasadą zagnieżdżania
C. Znacznik br nie został prawidłowo zamknięty
D. Znacznik br nie powinien znajdować się wewnątrz znacznika p
W analizowanym fragmencie kodu HTML, znacznik zamykający /b jest niezgodny z zasadą zagnieżdżania. W prawidłowej konstrukcji HTML, znaczniki powinny być zamykane w odwrotnej kolejności do ich otwierania — nazywa się to zasadą LIFO (Last In, First Out). W przedstawionym kodzie, znacznik <b> jest otwierany przed znacznikiem <i>, ale zamykany po nim, co jest błędem strukturalnym. Poprawny zapis powinien wyglądać tak: <b><i>Cascading Style Sheets</i></b>. Ważne jest, aby zawsze pamiętać o poprawnej strukturze dokumentu HTML, ponieważ nieprzestrzeganie tej zasady może prowadzić do nieprzewidywalnych wyników renderowania na różnych przeglądarkach. Zasada ta jest kluczowa w zapewnieniu, że znaczniki są zagnieżdżone poprawnie i że style oraz skrypty działają zgodnie z oczekiwaniami. Tego rodzaju błędy mogą również negatywnie wpływać na dostępność strony dla użytkowników korzystających z czytników ekranowych.
Pytanie 35
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,FE,7)
D. rgb(17,254,7)
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 36
Styl ten generuje pojedyncze obramowanie, które charakteryzuje się następującymi właściwościami:
A. krawędź prawa jest koloru czerwonego, krawędź dolna ma kolor niebieski, krawędź lewa ma kolor zielony, krawędź górna ma kolor żółty
B. krawędź lewa ma kolor czerwony, krawędź dolna jest w kolorze niebieskim, krawędź prawa jest koloru zielonego, krawędź górna ma kolor żółty
C. krawędź górna jest czerwonego koloru, krawędź lewa jest w kolorze niebieskim, krawędź dolna ma kolor zielony, krawędź prawa ma kolor żółty
D. krawędź górna ma kolor czerwony, krawędź prawa jest w kolorze niebieskim, krawędź dolna ma kolor zielony, krawędź lewa jest koloru żółtego
Podana odpowiedź jest prawidłowa, ponieważ opisuje właściwe przypisanie kolorów do krawędzi obramowania według standardów CSS. W zapisie border-color: red blue green yellow; kolory są przypisywane zgodnie z kierunkiem wskazówek zegara, zaczynając od góry. Zatem krawędź górna jest koloru czerwonego, prawa koloru niebieskiego, dolna zielonego, a lewa żółtego. Jest to zgodne z praktykami projektowania stron internetowych, gdzie priorytetem jest zrozumiała i spójna struktura kodu. W praktyce takie zrozumienie pozwala na efektywne tworzenie stylów w CSS, przyspieszając proces tworzenia responsywnych i estetycznych interfejsów użytkownika. Wiedza o przypisywaniu kolorów do krawędzi jest przydatna w tworzeniu zaawansowanych układów graficznych, pozwalając na lepsze wykorzystanie przestrzeni wizualnej i wprowadzenie unikalnych elementów stylistycznych. Takie podejście do CSS jest zgodne z nowoczesnymi standardami projektowania, które kładą nacisk na czytelność i efektywność kodu oraz zapewniają lepsze doświadczenia użytkownika.
Pytanie 37
Która z zasad walidacji stron internetowych jest niepoprawna?
A. Znaczniki, poza tymi samozamykającymi się, funkcjonują aż do momentu ich zakończenia znakiem '/', np. <p>...</p>
B. W znacznikach nie zachodzi rozróżnienie pomiędzy dużymi a małymi literami, np. <p> i <P> są tym samym znacznikiem
C. Wyłączanie znaczników powinno następować w odwrotnej kolejności do ich włączania, np. <p>....<big>...</big></p>
D. Jeżeli w instrukcji stosuje się kilka atrybutów, ich kolejność powinna odpowiadać porządkom alfabetycznym, np. <img alt="...." src="...." />
Kolejność atrybutów w znacznikach HTML nie ma znaczenia, co oznacza, że ich uporządkowanie w porządku alfabetycznym jest błędnym podejściem. W praktyce oznacza to, że atrybuty takie jak 'alt', 'src', 'title' mogą być zdefiniowane w dowolnej kolejności, o ile są poprawnie sformułowane. Jednakże, ze względów na czytelność kodu, warto stosować jakąś konsekwentną metodę sortowania atrybutów. W przypadku znaczników obrazków, na przykład, popularne jest zaczynanie od 'alt', następnie 'src', a potem 'title'. Ważne jest również, aby atrybuty były zgodne z wytycznymi W3C oraz WCAG, co zapewnia dostępność treści dla wszystkich użytkowników, w tym osób z niepełnosprawnościami. Stosowanie poprawnych atrybutów i ich odpowiedniego umiejscowienia jest kluczowym elementem pisania semantycznego i zgodnego z standardami HTML, co wpływa na poprawne wyświetlanie strony w różnych przeglądarkach oraz na jej optymalizację SEO.
Pytanie 38
W HTML, wartość atrybutu target, która umożliwia otwieranie strony w nowym oknie lub karcie, to
A. _blank
B. _top
C. _parent
D. _self
_blank to specjalna wartość atrybutu target w języku HTML, która umożliwia otworzenie linku w nowym oknie lub karcie przeglądarki. Jest to istotne dla poprawy doświadczeń użytkowników, gdyż pozwala im na przeglądanie treści zewnętrznych bez opuszczania aktualnej strony. Przykładowo, jeśli mamy link do dokumentacji lub zewnętrznego serwisu, użycie target="_blank" sprawi, że użytkownik otworzy ten link w nowym kontekście, co sprzyja lepszej nawigacji. Warto również pamiętać o praktykach bezpieczeństwa, takich jak dodawanie atrybutu rel="noopener noreferrer" do linków otwierających nowe okna, co zapobiega potencjalnym atakom związanym z przejmowaniem kontroli nad oryginalną stroną przez nowo otwartą. Przy projektowaniu stron internetowych, stosowanie atrybutu target z wartością _blank jest zgodne z zasadami użyteczności i dostępności, pomagając w tworzeniu przyjaznych i intuicyjnych interfejsów.
Pytanie 39
W HTML informacje o autorze, streszczeniu oraz słowach kluczowych strony powinny być umieszczone
A. pomiędzy znacznikami <head> i </head>, w znaczniku <style>
B. pomiędzy znacznikami <body> i </body>, w znaczniku <meta>
C. pomiędzy znacznikami <body> i </body>, w znaczniku <html>
D. pomiędzy znacznikami <head> i </head>, w znaczniku <meta>
W HTML kluczowe informacje, takie jak autor, streszczenie i słowa kluczowe, powinny być umieszczone między znacznikami <head> i </head>. Te znaczniki <meta> są naprawdę ważne, bo to one informują przeglądarki i wyszukiwarki o tym, co jest w Twojej stronie. Na przykład, znaczniki <meta name="description" content="Opis strony"> oraz <meta name="keywords" content="słowo1, słowo2, słowo3">. Dzięki tym danym, wyszukiwarki lepiej rozumieją, o czym jest strona, co może wpłynąć na jej pozycję w wynikach wyszukiwania. Moim zdaniem, dobrze przemyślane opisy i słowa kluczowe to klucz do sukcesu, bo to one przyciągają użytkowników do kliknięcia w Twój link. Pamiętaj też, że znacznik <title> i inne meta tagi w <head> są mega istotne dla SEO. Informacje te tworzą podstawy Twojego dokumentu HTML, więc warto je dobrze wypełnić, żeby strona działała jak należy.
Pytanie 40
Na ilustracji ukazano rezultat stylizacji za pomocą CSS oraz kod HTML generujący ten przykład. Zakładając, że marginesy wewnętrzne wynoszą 50 px, a zewnętrzne 20 px, jak wygląda styl CSS dla tego obrazu?
A. C.
B. A.
C. B.
D. D.
Poprawna odpowiedź C wskazuje na właściwe zastosowanie właściwości CSS z użyciem solidnego czarnego obramowania o grubości 4 pikseli oraz marginesów wewnętrznych i zewnętrznych. Właściwa konfiguracja stylów CSS pozwala na precyzyjne kontrolowanie wyglądu elementów na stronie, co jest kluczowe w tworzeniu responsywnych i estetycznych stron internetowych. Użycie właściwości background-color z wartością Teal pozwala na ustawienie koloru tła, co może być istotne dla zachowania spójności wizualnej projektu. Padding ustawia wewnętrzne marginesy elementu umożliwiając kontrolę nad przestrzenią wokół zawartości, co może wpływać na czytelność i estetykę. Margins z kolei określają przestrzeń zewnętrzną oddzielając element od innych sąsiednich elementów. Poprawne zrozumienie tych stylów pozwala na efektywne projektowanie UI z myślą o użytkowniku końcowym. Dodatkowo praktyczne zastosowanie solidnych obramowań jest powszechne w podkreślaniu istotnych sekcji wizualnych, co jest zgodne z dobrymi praktykami w projektowaniu stron.
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.
