Który z przedstawionych kodów HTML sformatuje tekst według wzoru? (uwaga: słowo "stacji" jest zapisane większą czcionką niż reszta słów w tej linii)
Lokomotywa
Stoi na stacji lokomotywa ...
A.
<h1>Lokomotywa</h1>
<p>Stoi na <big>stacji lokomotywa ...</p>
B.
<h1>Lokomotywa</h1>
<p>Stoi na <big>stacji</big> lokomotywa ...</p>
C.
<h1>Lokomotywa</p>
<p>Stoi na <big>stacji</big> lokomotywa ...</p>
D.
<p><small>Lokomotywa</small></p>
<p>Stoi na <big>stacji<big> lokomotywa ...</p>
A. B.
B. D.
C. C.
D. A.
Brawo! Wybrałeś prawidłową odpowiedź, która jest kodem HTML formatującym słowo 'stacji' większą czcionką niż reszta tekstu. Wykorzystuje ona znacznik <big>, który jest wyjątkowo przydatny w sytuacjach, gdy chcemy podkreślić pewną część tekstu i sprawić, że będzie ona wyglądać na większą niż reszta. Jest to praktyka często stosowana na stronach internetowych, by przyciągnąć uwagę użytkownika do konkretnych informacji. Pamiętaj jednak, że znacznik <big> jest przestarzały i nie jest zalecany do stosowania w nowoczesnym kodowaniu HTML. Zamiast tego, w dzisiejszych czasach lepiej jest używać CSS do zmiany rozmiaru czcionki. Niemniej jednak, znajomość różnych znaczników HTML, w tym <big>, jest nadal ważna, zwłaszcza do zrozumienia i utrzymania starszych stron internetowych.
Pytanie 2
Aby zdefiniować stylizację tabeli w języku CSS w sposób, który umożliwi wyróżnienie wiersza, na który aktualnie najeżdża kursor myszy np. innym kolorem, należy użyć
A. pseudoklasy :hover
B. pseudoelementu :first-line
C. nowego selektora klasy dla wiersza tabeli
D. pseudoklasy :visited
Pseudoklasa :hover jest techniką CSS, która pozwala na zastosowanie stylów do elementu, gdy użytkownik na niego najedzie kursorem myszy. Dzięki temu można w prosty sposób wyróżnić wiersze tabeli, co zwiększa interaktywność i czytelność danych. W przypadku tabeli, aby wyróżnić aktualnie wskazywany wiersz, należy użyć reguły CSS, która odnosi się do elementu <tr> (wiersza tabeli) z zastosowaniem pseudoklasy :hover. Przykładowy kod CSS może wyglądać następująco: table tr:hover { background-color: #f0f0f0; } co spowoduje, że tło wiersza zmieni się na jasno szare, gdy kursor myszy znajdzie się nad tym wierszem. Taki sposób formatowania jest szczególnie przydatny w przypadku długich tabel, które mogą być trudne do przeglądania. Pseudoklasa :hover jest powszechnie stosowana w projektowaniu stron internetowych, w zgodności z W3C CSS Specification, co zapewnia jej szeroką kompatybilność z różnymi przeglądarkami. Warto także zauważyć, że można łączyć pseudoklasę :hover z innymi selektorami, aby uzyskać bardziej zaawansowane efekty wizualne.
Pytanie 3
Semantyczny znacznik sekcji języka HTML 5 przeznaczony do umieszczenia stopki strony WWW to
W kodzie HTML kolor biały można reprezentować przy użyciu wartości
A. rgb(255, 255, 255)
B. #000000
C. rgb (FF, FF, FF)
D. #255255
Odpowiedź rgb(255, 255, 255) jest prawidłowa, ponieważ jest to standardowy sposób definiowania koloru białego w modelu RGB w kodzie HTML i CSS. Wartości RGB oznaczają Red, Green, Blue, a każdy składnik koloru (czerwony, zielony, niebieski) jest reprezentowany przez liczbę w zakresie od 0 do 255. W przypadku koloru białego wszystkie składniki są maksymalne, co przekłada się na pełne naświetlenie wszystkich trzech kolorów. W praktyce, użycie funkcji rgb() jest preferowane w sytuacjach, gdy chcemy dynamicznie modyfikować kolory za pomocą skryptów lub w CSS, co pozwala na lepszą kontrolę nad efektami wizualnymi. Na przykład, możemy łatwo zmieniać przezroczystość koloru, zmieniając wartości przez dodanie czwartego parametru, co jest zgodne z nowoczesnymi standardami CSS. Używanie wartości RGB jest również zgodne z zasadami dostępności oraz ułatwia pracę osobom z daltonizmem, ponieważ pozwala na łatwiejsze zrozumienie i manipulację kolorami.
Pytanie 5
Zapis CSS
margin: auto;
wskazuje, że marginesy są
A. stałe dla konkretnej przeglądarki, niezależnie od rozmiaru jej okna
B. dziedziczone z elementu nadrzędnego dla danego obiektu
C. obliczane przez przeglądarkę w taki sposób, aby element został wyśrodkowany poziomo
D. równe domyślnym wartościom marginesów elementu, do którego są przypisane
Zapis CSS 'margin: auto;' jest kluczowy w kontekście wyśrodkowywania elementów blokowych w poziomie w ich rodzicach. Gdy zastosujemy ten styl, przeglądarka dynamicznie oblicza wartość marginesów po lewej i prawej stronie elementu, aby równomiernie rozłożyć pozostałą przestrzeń w kontenerze. W praktyce oznacza to, że jeśli mamy element o stałej szerokości umieszczony w szerszym kontenerze, zastosowanie 'margin: auto;' spowoduje, że ten element zostanie wyśrodkowany, co jest szczególnie przydatne w responsywnym projektowaniu stron internetowych. Dobrym przykładem może być użycie 'margin: auto;' w przypadku kontenera obrazka, gdzie chcemy, aby obrazek był zawsze wyśrodkowany na stronie niezależnie od rozmiaru okna przeglądarki. To podejście jest zgodne z najlepszymi praktykami CSS i jest szeroko stosowane w nowoczesnym web designie, co czyni strony bardziej estetycznymi i przyjaznymi dla użytkowników.
Pytanie 6
Kolor, który ma odcień niebieski to kolor
A. #EE0000
B. #EE00EE
C. #00EE00
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 7
Zapis CSS postaci:
ul {
list-style-image: url('rys.gif');
}
sprawi, że na stronie internetowej
A. każdy z punktów listy będzie miał osobne tło pobrane z grafiki rys.gif
B. punktorem listy nienumerowanej będzie rys.gif
C. wyświetli się rysunek rys.gif jako tło listy nienumerowanej.
D. rys.gif będzie stanowił ramkę dla listy nienumerowanej.
Gratulacje! Poprawnie zidentyfikowałeś, że w podanym kodzie CSS, obrazek 'rys.gif' będzie służył jako punktor listy nienumerowanej. Według standardów CSS, właściwość list-style-image jest używana do określenia obrazka, który będzie używany jako punktor w liście nienumerowanej. Zasada ta jest bardzo przydatna, kiedy chcemy stworzyć niestandardowe punktory listy, które lepiej pasują do designu naszej strony. Możemy użyć dowolnego obrazka, który jest dostępny online lub zasobu z naszej lokalnej przestrzeni roboczej. Pamiętaj jednak, że obrazek powinien być mały i czytelny. W tym konkretnym przypadku, obrazek 'rys.gif' zostanie ustawiony jako punktor dla każdego elementu listy <li> wewnątrz listy nienumerowanej <ul>. Używając tej techniki, możemy stworzyć atrakcyjniejsze i bardziej interaktywne listy na naszej stronie internetowej.
Pytanie 8
Jaki selektor stylizuje akapity tekstu z klasą tekst oraz element blokowy z identyfikatorem obrazki?
A. p.tekst + div#obrazki
B. p#tekst + div.obrazki
C. p#tekst, div.obrazki
D. p.tekst, div#obrazki
Poprawna odpowiedź to 'p.tekst, div#obrazki', ponieważ selektor 'p.tekst' odnosi się do wszystkich elementów <p>, które mają klasę 'tekst'. To podejście jest zgodne z zasadami CSS, gdzie '.' oznacza klasę. Z kolei 'div#obrazki' to selektor, który odnosi się do elementu <div> o ID 'obrazki'. W tym przypadku '#' jest używane do wskazania unikalnego identyfikatora. Dzięki temu możemy dostosować style do konkretnych elementów w HTML. Przykład zastosowania: jeżeli chcemy, aby akapity z klasą 'tekst' miały określony kolor tła oraz aby element <div> z ID 'obrazki' był wyśrodkowany na stronie, możemy napisać odpowiednie reguły CSS, które zastosują te style tylko do wskazanych elementów. Praktyka ta zwiększa przejrzystość kodu oraz ułatwia jego późniejsze zarządzanie. Zastosowanie odpowiednich selektorów zgodnych z zasadami CSS to klucz do efektywnego stylizowania stron internetowych oraz dobrych praktyk w zakresie tworzenia responsywnych interfejsów użytkownika.
Pytanie 9
Która definicja CSS wskazuje na formatowanie nagłówka h1: tekst z przekreśleniem, z odstępami między słowami wynoszącymi 10 px oraz w kolorze czerwonym?
A. C
B. A
C. B
D. D
Odpowiedź A jest w porządku, bo dobrze odpowiada na to, co pytanie wymaga. Deklaracja 'text-decoration: overline;' dodaje linię nad tekstem, a nie pod nim. Właściwie to mega ważne, bo można łatwo pomylić nadkreślenie z podkreśleniem. Plus, 'word-spacing: 10px;' ustawia fajny odstęp między wyrazami, co sprawia, że nagłówki wyglądają lepiej i są bardziej czytelne. A jak ustawiłeś kolor tekstu na 'red', to wszystko jest super zgodne z tym, co miało być w zadaniu. Używanie takich definicji CSS to standard w tworzeniu stron, bo dobrze stylizowane nagłówki pomagają w organizacji treści i poprawiają wrażenia użytkowników. Pamiętaj, że sensowne i dobrze zdefiniowane style CSS to nie tylko wygoda, ale też ułatwiają późniejsze poprawki dla innych programistów.
Pytanie 10
Zaprezentowane pole input daje możliwość
<inputtype="checkbox"name="text1"value="text2">
A. wpisania dowolnego tekstu
B. wprowadzenia hasła
C. wybrania opcji
D. zaznaczenia opcji z listy zawierającej wartości text1 i text2
Element HTML z atrybutem type="checkbox" jest używany do tworzenia pól wyboru które pozwalają użytkownikowi zaznaczać jedną lub więcej opcji. Checkboxy są częstym elementem formularzy internetowych gdyż umożliwiają elastyczne zbieranie danych od użytkowników. Przykładowo w formularzach rejestracyjnych można używać ich do akceptacji regulaminu zapisów na newslettery czy wyboru zainteresowań. Składnia takiego elementu jest prosta: tag <input> z atrybutami name i value. Atrybut name jest niezbędny do grupowania checkboxów a value do przekazywania wartości zaznaczonej opcji do serwera podczas wysyłania formularza. Dobre praktyki zalecają dodawanie etykiet opisujących znaczenie checkboxa co poprawia dostępność dla osób korzystających z czytników ekranowych. Stosowanie checkboxów powinno być przemyślane by nie przeciążać użytkownika zbyt dużą liczbą opcji co mogłoby negatywnie wpłynąć na UX. Właściwe użycie checkboxów zgodne ze standardami HTML i UX jest kluczowe dla intuicyjnego interfejsu użytkownika.
Pytanie 11
W formularzu HTML użyto znacznika <input>. Pole to będzie służyło do wprowadzania maksymalnie
<inputtype="password"size="30"maxlength="20">
A. 30 znaków, które są widoczne w trakcie wprowadzania
B. 20 znaków, które są widoczne w trakcie wprowadzania
C. 20 znaków, które nie są widoczne w polu tekstowym
D. 30 znaków, które nie są widoczne w polu tekstowym
Odpowiedzi sugerujące, że w polu tekstowym mogą być widoczne znaki, są nieprawidłowe z kilku istotnych powodów. Przede wszystkim znaczenie atrybutu 'type' w znaczniku <input> jest kluczowe. Użycie 'type="password"' jednoznacznie wskazuje, że wprowadzone znaki będą maskowane, co ma na celu ochronę prywatności użytkownika. Odpowiedzi wskazujące na 30 znaków, które są widoczne, są całkowicie błędne, ponieważ atrybut 'size' definiuje szerokość pola, a nie maksymalną liczbę znaków, które można wprowadzić. To może prowadzić do mylnego wrażenia, że użytkownik ma pełen wgląd w wprowadzane dane, co nie jest zgodne z zamierzeniem tego typu pól. Oprócz tego, maksymalna liczba znaków 'maxlength' nie ma żadnego wpływu na to, czy znaki są widoczne, czy nie. Typowe błędy myślowe związane z tym zagadnieniem mogą obejmować niepoprawne zrozumienie roli atrybutów 'size' i 'maxlength'. Kluczowe jest, aby użytkownicy rozumieli, że odpowiednie projektowanie formularzy powinno zawsze uwzględniać bezpieczeństwo danych oraz ich ochronę, zwłaszcza w przypadku haseł. Dobre praktyki w zakresie UX/UI zalecają korzystanie z pól typu 'password' w sytuacjach wymagających ochrony danych, co przyczynia się do zwiększenia bezpieczeństwa aplikacji webowych.
Pytanie 12
Który znacznik ma zastosowanie w sekcji body dokumentu HTML?
A. <meta>
B. <link>
C. <h2>
D. <title>
<h2> to znacznik nagłówka, który zgodnie ze specyfikacją HTML5 stosuje się właśnie w sekcji <body>. Nagłówki od <h1> do <h6> służą do strukturyzowania treści dokumentu, czyli tego, co realnie widzi użytkownik na stronie. W <body> umieszczamy całą zawartość prezentowaną w przeglądarce: teksty, nagłówki, obrazy, formularze, przyciski, listy itd. Moim zdaniem dobrze jest zapamiętać prostą zasadę: wszystko, co jest „treścią strony” dla użytkownika, ląduje w <body>, a wszystko, co jest „informacją o stronie” dla przeglądarki i wyszukiwarki – w <head>. Znacznik <h2> jest semantycznym nagłówkiem drugiego poziomu. Oznacza to, że powinien być używany jako podtytuł lub tytuł sekcji podrzędnej względem <h1>. Przykładowo: <h1>Temat strony</h1>, a niżej <h2>Podrozdział 1</h2>, <h2>Podrozdział 2</h2> itd. Taka struktura pomaga nie tylko użytkownikom, ale też czytnikom ekranowym, SEO i ogólnej czytelności kodu. Dobre praktyki mówią, żeby nie używać nagłówków tylko do „zwiększania czcionki”, ale właśnie do logicznego podziału treści. Do zmiany wyglądu służy CSS. W typowym dokumencie HTML mamy: <html>, w nim <head> z metadanymi i <body> z widoczną zawartością. <h2> musi znajdować się właśnie w <body>, bo jest elementem treści, a nie metadanych. Gdy zaczniesz pisać większe strony, poprawne wykorzystanie nagłówków bardzo ułatwia nawigację, generowanie spisów treści, a także utrzymanie projektu w ryzach, co w praktyce jest naprawdę ważne przy pracy zespołowej czy w dużych serwisach.
Pytanie 13
Aby ustawić tło na stronie www należy użyć polecenia
A. <body bgcolor=""></body>
B. <bgcolor=""></bgcolor>
C. <body background=""></body>
D. <background=""></background>
Aby ustawić tło na stronie internetowej, należy użyć atrybutu bgcolor w znaczniku <body>. Jest to starożytna metoda definiowania koloru tła, która jest zgodna z wcześniejszymi standardami HTML. Atrybut bgcolor przyjmuje wartość w postaci koloru w formie nazwy, hexadecymalnej lub RGB. Na przykład, <body bgcolor='#FF5733'></body> ustawi pomarańczowe tło. Pomimo że ta metoda działa, w dzisiejszych czasach zaleca się korzystanie z CSS, co umożliwia bardziej zaawansowane i elastyczne style. Zamiast polegać na atrybucie HTML, można zastosować regułę CSS: body { background-color: #FF5733; }. Użycie CSS nie tylko poprawia organizację kodu, ale także zwiększa dostępność i responsywność strony. Dlatego, chociaż atrybut bgcolor jest poprawny, warto skupić się na nowoczesnych metodach stylizacji, które są zgodne z aktualnymi standardami W3C i są bardziej przyszłościowe.
Pytanie 14
Podaj nazwę Systemu Zarządzania Treścią, którego logo jest widoczne na zamieszczonym rysunku?
A. Drupal
B. Joomla!
C. WordPress
D. MediaWiki
Joomla! to popularny system zarządzania treścią CMS który jest szeroko stosowany do tworzenia stron internetowych aplikacji online i portali. Dzięki swojej elastyczności Joomla! jest wybierany przez wiele firm i organizacji do zarządzania treścią online. System ten charakteryzuje się modułową architekturą która umożliwia łatwe rozszerzanie jego funkcjonalności za pomocą komponentów modułów i wtyczek. Jednym z głównych atutów Joomla! jest intuicyjny interfejs użytkownika który umożliwia zarządzanie treścią bez potrzeby głębokiej wiedzy technicznej. Dodatkowo Joomla! wspiera wiele języków co czyni go idealnym wyborem dla międzynarodowych organizacji. Warto również zaznaczyć że Joomla! jest open-source co oznacza że jest rozwijany przez społeczność programistów z całego świata którzy regularnie aktualizują i ulepszają oprogramowanie. Wybranie Joomla! jako CMS pozwala na korzystanie z dużej liczby szablonów i dodatków które umożliwiają personalizację witryny zgodnie z wymaganiami klienta. Dzięki solidnej bazie użytkowników i deweloperów Joomla! oferuje wsparcie techniczne i dokumentację która ułatwia rozwiązywanie problemów. W praktyce Joomla! jest wykorzystywany przez różnorodne witryny od małych blogów po rozbudowane platformy e-commerce co potwierdza jego wszechstronność i skuteczność.
Pytanie 15
W języku HTML, aby połączyć w pionie dwie sąsiadujące komórki w kolumnie tabeli, należy użyć atrybutu
A. cellpadding
B. colspan
C. rowspan
D. cellspacing
Atrybut rowspan w języku HTML jest kluczowy do scalania komórek tabeli w pionie, co oznacza, że pozwala na połączenie dwóch lub więcej komórek w jednej kolumnie w jedną, większą komórkę. Dzięki temu, można uzyskać bardziej przejrzysty i zorganizowany układ informacji w tabelach, zwłaszcza w przypadku danych, które są ze sobą powiązane. Na przykład, jeśli mamy tabelę, w której jeden z wierszy odnosi się do tytułu kategorii, a poniżej znajdują się różne elementy tej kategorii, użycie atrybutu rowspan w pierwszej komórce umożliwi jej rozszerzenie na kilka wierszy, co wizualnie połączy te dane. Standard HTML5 definiuje atrybut rowspan jako atrybut, który przyjmuje wartość liczbową, określającą liczbę wierszy, które mają zostać scalone. Przykładowy kod HTML mógłby wyglądać następująco: <table><tr><td rowspan='3'>Kategoria</td><td>Element 1</td></tr><tr><td>Element 2</td></tr><tr><td>Element 3</td></tr></table>, co w efekcie tworzy jedną komórkę o wysokości trzech wierszy oraz trzy osobne komórki w drugiej kolumnie. Użycie rowspan w praktyce jest nie tylko estetyczne, ale również poprawia czytelność danych, co jest niezmiernie ważne w interfejsach użytkownika.
Pytanie 16
Który semantyczny znacznik języka HTML 5 może wystąpić tylko raz na stronie?
A. <article>
B. <section>
C. <main>
D. <header>
Poprawna odpowiedź to <main>, bo zgodnie ze specyfikacją HTML5 ten znacznik powinien pojawić się w dokumencie najwyżej raz. Element <main> reprezentuje główną, unikalną treść strony, czyli to, co jest najważniejsze dla konkretnego adresu URL. Przeglądarki, czytniki ekranu i inne narzędzia asystujące zakładają, że istnieje jedno główne miejsce, do którego użytkownik może szybko „przeskoczyć”, omijając nagłówek, menu czy stopkę. Dlatego pojedynczy <main> ma duże znaczenie dla dostępności (a11y) i użyteczności serwisu. W praktyce dobrym wzorcem jest struktura: <header> na górę, poniżej <nav> (jeśli jest), potem jeden <main>, a w nim np. <article>, <section>, <aside>, a na końcu <footer>. Wewnątrz <main> możesz mieć kilka artykułów, sekcji, nawet różne widoki aplikacji SPA, ale sam <main> jest tylko jeden. Moim zdaniem warto od początku wyrabiać sobie nawyk: dokładnie jeden <main> na stronę i absolutnie nie zagnieżdżać go wewnątrz <header>, <footer> czy <article>. To jest też zgodne z dobrymi praktykami SEO – wyszukiwarki łatwiej rozumieją, co jest esencją danej podstrony. Dodatkowo, wiele frameworków front‑endowych i systemów CMS zakłada w layoutach pojedynczy kontener na treść główną, który semantycznie powinien być właśnie <main>, a nie np. zwykłym <div id="content">. Taka semantyka sprawia, że kod wygląda czyściej, jest bardziej przyszłościowy i po prostu profesjonalny.
Pytanie 17
Definicja stylu zaprezentowana w CSS odnosi się do odsyłacza, który
a:visited {color: orange;}
A. został wcześniej odwiedzony
B. posiada błędny adres URL
C. jeszcze nie był odwiedzony
D. wskaźnik myszy znajduje się nad nim
Odpowiedź "został wcześniej odwiedzony" jest prawidłowa, ponieważ definicja stylu CSS `a:visited {color: orange;}` dotyczy odsyłaczy, które zostały już odwiedzone przez użytkownika. W CSS pseudo-klasa `:visited` jest stosowana do stylizacji odsyłaczy, które prowadzą do stron, które użytkownik już otworzył. Dzięki tej możliwości, twórcy stron internetowych mogą wprowadzać różne kolory dla odwiedzonych i nieodwiedzonych linków, co pozwala na szybszą orientację użytkowników w treści strony. Na przykład, jeżeli na stronie znajduje się wiele linków, użytkownik może łatwiej zrozumieć, które z nich już kliknął, a które są nowe. Dobrą praktyką jest stosowanie kontrastowych kolorów dla odsyłaczy, aby zwiększyć ich dostępność i użyteczność. Warto również zauważyć, że przeglądarki mogą mieć różne ograniczenia dotyczące stylizacji odwiedzonych linków, co jest podyktowane względami prywatności użytkowników. Z tego powodu zaleca się, aby nie opierać funkcjonalności strony jedynie na wyglądzie odwiedzonych linków.
Pytanie 18
Web designer pragnie wstawić w znaczniku <header> nagłówek do treści. Zgodnie z zasadami użycia znaczników semantycznych, powinien wykorzystać znacznik
A. <title>
B. <strong>
C. <p>
D. <h1>
Zastosowanie znacznika <h1> w nagłówkach strony internetowej jest zgodne z zasadami semantycznymi HTML. Znacznik <h1> jest przeznaczony do oznaczania głównego nagłówka dokumentu i powinien być używany do przedstawienia najważniejszej treści. Dobrą praktyką jest, aby każda strona miała tylko jeden znacznik <h1>, co pomaga wyszukiwarkom zrozumieć hierarchię treści na stronie. Na przykład, w przypadku artykułu, tytuł artykułu mógłby być umieszczony w znaczniku <h1>, a podtytuły w <h2>, <h3> itd. W ten sposób struktura dokumentu jest jasna, co poprawia dostępność oraz SEO. Dodatkowo, stosowanie semantycznych znaczników ułatwia nawigację po stronie osobom korzystającym z technologii asystujących, takich jak czytniki ekranu, które interpretują hierarchię treści na podstawie użytych znaczników.
Pytanie 19
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: 40px, 30px, 50px, 20px;
B. padding: 50px, 40px, 20px, 30px;
C. padding: 20px, 40px, 30px, 50px;
D. padding: 50px, 20px, 40px, 30px;
Odpowiedź "padding: 50px, 20px, 40px, 30px;" jest poprawna, ponieważ zgodnie z konwencją CSS, wartości paddingu są podawane w następującej kolejności: górny, prawy, dolny i lewy. W twoim przypadku margines górny wynosi 50px, prawy 20px, dolny 40px i lewy 30px. Właściwość padding określa wewnętrzny odstęp między zawartością elementu a jego granicą, co jest kluczowe dla właściwego układu i estetyki strony. Przykładowo, zastosowanie takiego paddingu w praktyce pozwala na uzyskanie odpowiednich odstępów, co wpływa na czytelność tekstu oraz ogólną estetykę elementów na stronie. Stosowanie paddingu w CSS jest uważane za dobre praktyki, ponieważ pozwala na precyzyjne kontrolowanie układu elementów, co jest szczególnie ważne w responsywnym projektowaniu stron internetowych. Warto również pamiętać, że używanie właściwego odstępu wewnętrznego poprawia dostępność treści, dzięki czemu użytkownicy z różnymi potrzebami mogą łatwiej interakcjonować z interfejsem.
Pytanie 20
W CSS, aby ustawić wcięcie pierwszej linii akapitu na 30 pikseli, należy użyć następującego zapisu
A. p { text-indent: 30px; }
B. p { text-spacing: 30px; }
C. p { line-indent: 30px; }
D. p { line-height: 30px; }
Odpowiedź p { text-indent: 30px; } jest poprawna, ponieważ właściwość text-indent w CSS służy do definiowania wcięcia pierwszej linii tekstu w elemencie blokowym, takim jak akapit (p). Umożliwia to nadanie tekstowi estetycznego wyglądu oraz zwiększenie czytelności, szczególnie w dłuższych blokach tekstu. Wartość 30px oznacza, że pierwsza linia akapitu zostanie przesunięta o 30 pikseli w prawo względem pozostałych linii. Przykładowo, jeśli mamy długi akapit z tekstem, zastosowanie wcięcia może pomóc w wyodrębnieniu go wizualnie, co sprzyja lepszemu zrozumieniu zawartości przez użytkowników. Warto także dodać, że standardy CSS są regularnie aktualizowane, a stosowanie dobrych praktyk, takich jak odpowiednie formatowanie tekstu, ma kluczowe znaczenie w projektowaniu responsywnych i przyjaznych dla użytkownika stron internetowych. Wykorzystanie text-indent jest jedną z technik, które przyczyniają się do poprawy UX (User Experience).
Pytanie 21
Wskaż blok, który jest sformatowany zgodnie z podanym stylem CSS.
Blok 2 jest poprawną odpowiedzią ponieważ wykorzystuje styl CSS background linear-gradient(to right LightBlue DarkBlue) co oznacza że gradient kolorów rozciąga się od lewej do prawej strony elementu CSS linear-gradient pozwala na tworzenie gładkich przejść między kolorami co jest popularną techniką w projektowaniu stron internetowych Styl ten dodaje wizualnej atrakcyjności i może być użyty w różnych częściach witryny takich jak przyciski nagłówki czy tła sekcji Właściwość gradientu pozwala na zastosowanie wielu kolorów i kontrolowanie ich punktów początkowych i końcowych co zwiększa elastyczność projektowania Ponadto gradienty są wspierane przez wszystkie nowoczesne przeglądarki co czyni je doskonałym wyborem dla responsywnych stron internetowych Wykorzystanie gradientów zamiast obrazów tła pomaga także w optymalizacji strony zmniejszając czas ładowania co jest zgodne z najlepszymi praktykami branżowymi i wpływa pozytywnie na doświadczenie użytkownika CSS oferuje również inne typy gradientów takie jak radial-gradient i conic-gradient które mogą być używane w zależności od potrzeb projektowych
Pytanie 22
Jaką maksymalną liczbę znaczników <td> można zastosować w tabeli składającej się z trzech kolumn i trzech wierszy, która nie zawiera złączeń między komórkami oraz wiersza nagłówkowego?
A. 12
B. 3
C. 6
D. 9
Wybór innych odpowiedzi może wynikać z niepoprawnego rozumienia struktury tabeli lub zasadności użycia znaczników <td>. Odpowiedź 3, sugerująca 6 znaczników, pomija fakt, że każda kolumna powinna zawierać wszystkie wiersze, co w przypadku trzech wierszy prowadzi do stwierdzenia, że maksymalna liczba komórek powinna być znacznie wyższa. Natomiast odpowiedź 12 może wynikać z błędnego założenia, że każda komórka może być użyta wielokrotnie, co jednak narusza zasady HTML, które zakładają jednoznaczne przypisanie danych do danej komórki. Dlatego, aby uzyskać poprawną liczbę znaczników <td>, należy pomnożyć liczbę kolumn przez liczbę wierszy. W tym przypadku mamy trzy kolumny i trzy wiersze, więc całkowita liczba znaczników <td> wynosi 9. Kluczowe jest zrozumienie, że znaczniki <td> są przeznaczone wyłącznie do umieszczania danych w tabeli, a zasady ich użycia są ściśle określone w standardach HTML. W praktyce, błędy takie jak zbyt niska lub zbyt wysoka liczba znaczników mogą prowadzić do niepoprawnych wyświetleń tabeli oraz utrudniać użytkownikom dostęp do danych. Aby uniknąć podobnych nieporozumień, zawsze warto stosować się do dobrze zdefiniowanych zasad projektowania tabel w HTML.
Pytanie 23
Funkcja colspan umożliwia łączenie komórek tabeli w układzie poziomym, natomiast rowspan w układzie pionowym. Która z poniższych tabel odpowiada fragmentowi kodu w języku HTML?
A. Odpowiedź B
B. Odpowiedź C
C. Odpowiedź D
D. Odpowiedź A
Brak odpowiedzi na to pytanie.
Wyjaśnienie poprawnej odpowiedzi: Polecenie rowspan w języku HTML służy do łączenia komórek tabeli w pionie. W podanym fragmencie kodu HTML, atrybut rowspan jest użyty z wartością 2 w pierwszej komórce pierwszego wiersza. Oznacza to, że ta komórka będzie się rozciągać na dwa wiersze, co jest widoczne w odpowiedzi B. Tabelę HTML można wykorzystać do tworzenia złożonych struktur danych, gdzie rowspan jest kluczowe w przypadku, gdy chcemy zminimalizować liczbę komórek i lepiej zorganizować dane w pionowe bloki. Użycie rowspan jest zgodne ze standardami HTML5, które zalecają semantyczne i logiczne układanie danych. Praktyczne zastosowanie rowspan można znaleźć w projektach takich jak raporty finansowe czy skomplikowane formularze, gdzie często wymagane jest łączenie komórek w pionie. W projektowaniu stron internetowych zaleca się stosowanie tabel w przypadkach rzeczywistych danych tabelarycznych, a nie do układu strony, co jest zgodne z wytycznymi dotyczącymi dostępności WCAG.
Pytanie 24
Logo platformy CMS noszącej nazwę Joomla! to
A. B
B. C
C. D
D. A
Brak odpowiedzi na to pytanie.
Wyjaśnienie poprawnej odpowiedzi: 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
W dokumencie HTML stworzono formularz. Jakie działanie kodu zostanie pokazane przez przeglądarkę, jeśli w drugie pole użytkownik wprowadzi tekst „ala ma kota”?
A. Efekt 1
B. Efekt 2
C. Efekt 4
D. Efekt 3
Brak odpowiedzi na to pytanie.
Wyjaśnienie poprawnej odpowiedzi: Efekt 2 jest poprawny ponieważ kod HTML przedstawia formularz zawierający element select oraz pole input typu password. Element select pozwala na wybór jednej z trzech opcji Kraków Poznań i Szczecin co widzimy w efekcie 2. Pole input typu password zasłania wpisywane przez użytkownika znaki co jest zgodne z przedstawionym obrazem gdzie w miejscu drugiego pola widoczne są zamaskowane znaki. To zabezpieczenie jest standardem w formularzach internetowych chroniącym dane przed nieuprawnionym dostępem. Przeglądarki internetowe interpretują typ password zamieniając wprowadzone znaki na symbole najczęściej kropki lub gwiazdki. Dla programistów webowych jest to istotne przy projektowaniu interfejsów użytkownika zapewniając zarówno funkcjonalność jak i bezpieczeństwo. Ważne jest również aby pamiętać o odpowiednim zarządzaniu danymi wprowadzonymi w polach password po stronie serwera zapewniając szyfrowanie i bezpieczne przechowywanie. Stosowanie elementu select w połączeniu z input type=password jest popularne w formularzach rejestracyjnych gdzie użytkownik wybiera opcję a następnie wprowadza hasło. Dobre praktyki obejmują również walidację danych po stronie klienta i serwera aby zapewnić poprawność i bezpieczeństwo wprowadzanych informacji.
Pytanie 26
Przedstawiony styl generuje pojedyncze obramowanie, które posiada następujące właściwości:
border: solid 1px; border-color: red blue green yellow;
A. krawędź lewa ma kolor czerwony, krawędź dolna w kolorze niebieskim, krawędź prawa w odcieniu zielonym, krawędź górna w kolorze żółtym
B. krawędź prawa ma kolor czerwony, krawędź dolna w kolorze niebieskim, krawędź lewa w odcieniu zielonym, krawędź górna w kolorze żółtym
C. krawędź górna ma kolor czerwony, krawędź lewa w kolorze niebieskim, krawędź dolna w odcieniu zielonym, krawędź prawa w kolorze żółtym
D. krawędź górna jest koloru czerwonego, krawędź prawa koloru niebieskiego, krawędź dolna koloru zielonego, krawędź lewa koloru żółtego
Brak odpowiedzi na to pytanie.
Wyjaśnienie poprawnej odpowiedzi: Prawidłowa odpowiedź wynika z użycia właściwości CSS border-color z czterema wartościami przypisanymi kolejno do górnej prawej dolnej i lewej krawędzi elementu. W tym przypadku border-color: red blue green yellow; przypisuje kolor czerwony do górnej krawędzi kolor niebieski do prawej zielony do dolnej i żółty do lewej. Jest to powszechna praktyka w stylizacji stron internetowych gdzie cztery wartości podane dla border-color definiują odpowiednio kolory górnej prawej dolnej i lewej krawędzi. Taki styl umożliwia projektantom tworzenie wizualnie interesujących i wyróżniających się elementów poprzez łatwe manipulowanie kolorami i szerokościami obramowań. Zastosowanie tego w praktyce może być wykorzystane do zaznaczenia ważnych sekcji strony lub wyróżnienia określonych elementów. Tego rodzaju technika stylizacji jest zgodna z dobrymi praktykami i standardami CSS co pozwala na uzyskanie estetycznego i funkcjonalnego interfejsu użytkownika. Wiedza o przypisaniu kolorów do poszczególnych krawędzi jest kluczowa w projektowaniu elastycznych i responsywnych układów stron.
Pytanie 27
Podczas przygotowywania grafiki do umieszczenia na stronie internetowej konieczne jest wycięcie tylko pewnego fragmentu. Jak nazywa się ta czynność?
A. łączanie warstw.
B. zmiana rozmiaru.
C. kadrowanie.
D. odwracanie obrazu.
Brak odpowiedzi na to pytanie.
Wyjaśnienie poprawnej odpowiedzi: Kadrowanie to taka technika, która pomaga nam lepiej uchwycić to, co najważniejsze w obrazie. Wycinając niektóre fragmenty grafiki, skupiamy uwagę na tym, co naprawdę się liczy. Dobrze jest to mieć na uwadze, zwłaszcza przy zdjęciach portretowych, gdzie chcemy, żeby wzrok przyciągała twarz modela, a nie jakieś niepotrzebne tło. Kiedy kadrujemy, warto pamiętać o takich zasadach jak zasada trzecich, bo to pomaga zrobić fajną kompozycję. Można to robić w wielu programach graficznych, jak na przykład Adobe Photoshop czy GIMP. Tak w ogóle, dobrze jest dbać o proporcje i rozdzielczość, żeby obraz nie stracił na jakości. Gadżetem kadrowania można się też posługiwać w projektowaniu stron www, bo odpowiednie wybory graficzne poprawiają estetykę i funkcjonalność strony.
Pytanie 28
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 wizualizacji poprzez atrybuty HTML
B. z bazy danych oraz wyglądu ze zdefiniowanego szablonu
C. z plików HTML o stałej zawartości oraz wizualizacji z użyciem ustalonego szablonu
D. z plików HTML o stałej zawartości oraz wizualizacji przy pomocy technologii FLASH
Brak odpowiedzi na to pytanie.
Wyjaśnienie poprawnej odpowiedzi: 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 29
Jak nazywa się element systemu zarządzania treścią, który jest bezpośrednio odpowiedzialny za wygląd strony internetowej?
A. Wtyczka w systemie WordPress lub dodatek w systemie Joomla!
B. Motyw w systemie WordPress lub szablon w systemie Joomla!
C. Kokpit w systemie WordPress lub panel administracyjny w systemie Joomla!
D. Widżet w systemie WordPress lub moduł w systemie Joomla!
Brak odpowiedzi na to pytanie.
Wyjaśnienie poprawnej odpowiedzi: Motyw w systemie WordPress oraz szablon w systemie Joomla! odgrywają kluczową rolę w kreowaniu wizualnej tożsamości witryny internetowej. To właśnie one determinują, jak treści są prezentowane użytkownikom - od układu graficznego, przez kolory, czcionki, aż po elementy interaktywne. Dzięki motywom użytkownicy mogą wykorzystywać gotowe rozwiązania, co znacząco przyspiesza proces tworzenia strony. W przypadku WordPressa, motyw można łatwo zmieniać, co pozwala na dynamiczne dostosowywanie wyglądu witryny do zmieniających się trendów i potrzeb. Z kolei w Joomla!, szablony zapewniają elastyczność i możliwość personalizacji, co jest kluczowe dla dostosowania się do różnych grup docelowych. Dobrze zaprojektowane motywy i szablony powinny być zgodne z zasadami responsywnego web designu, co oznacza, że strona powinna wyglądać dobrze na różnych urządzeniach i rozdzielczościach ekranu. Warto również zwrócić uwagę na optymalizację SEO, która może być wpływana przez wybór motywu. Właściwy wybór oraz umiejętne wykorzystanie motywów i szablonów jest fundamentem skutecznego zarządzania treścią w sieci.
Pytanie 30
Kod CSS można włączyć do dokumentu HTML, używając znacznika
A. <head>
B. <meta>
C. <style>
D. <body>
Brak odpowiedzi na to pytanie.
Wyjaśnienie poprawnej odpowiedzi: Odpowiedź <style> jest prawidłowa, ponieważ ten znacznik HTML jest dedykowany do osadzania kodu CSS wewnątrz dokumentu HTML. Znacznik <style> powinien być umieszczony w sekcji <head> dokumentu, co umożliwia przeglądarkom interpretację stylów przed renderowaniem treści strony. Dzięki temu można definiować różne reguły CSS, które modyfikują wygląd elementów HTML, co jest kluczowe w tworzeniu estetycznych i funkcjonalnych stron internetowych. Przykładowo, można użyć <style> do określenia koloru tła, rozmiaru czcionki czy marginesów. Ważne jest, aby stosować zasady dotyczące kaskadowości, ponieważ style zdefiniowane w <style> mają priorytet nad stylem zewnętrznym, jeśli są tak samo specyficzne. Dodatkowo, korzystanie z <style> jest zgodne z zasadami dobrych praktyk, takich jak unikanie nadmiarowego ładowania zewnętrznych plików CSS w przypadku prostych projekty, co przyspiesza czas ładowania strony.
Pytanie 31
Narzędzie zaprezentowane na ilustracji służy do
A. debugowania strony internetowej
B. sprawdzania zgodności witryny ze standardem HTML5
C. walidacji stylów CSS
D. walidacji kodu HTML i XHTML
Brak odpowiedzi na to pytanie.
Wyjaśnienie poprawnej odpowiedzi: Narzędzie przedstawione na ilustracji to usługa walidacji CSS stworzona przez World Wide Web Consortium (W3C). Jego głównym celem jest sprawdzanie poprawności arkuszy stylów CSS pod kątem zgodności z obowiązującymi standardami. Walidacja CSS pozwala na identyfikację błędów składniowych oraz niepoprawnych wartości, co jest kluczowe dla zapewnienia spójności wyglądu strony w różnych przeglądarkach. Korzystanie z walidatora CSS jest częścią dobrych praktyk w procesie tworzenia stron internetowych, ponieważ poprawny kod CSS zwiększa dostępność i użyteczność serwisów. Praktycznym przykładem użycia tego narzędzia jest proces optymalizacji strony internetowej, gdzie walidator pomaga w eliminacji błędów, które mogą prowadzić do nieprzewidywalnego zachowania witryny. Dzięki walidacji możemy również upewnić się, że nasze arkusze stylów są zgodne z najnowszymi standardami, co jest istotne dla przyszłej kompatybilności serwisu.
Pytanie 32
W HTML-u, aby połączyć w poziomie dwie sąsiednie komórki w danym wierszu tabeli, należy wykorzystać atrybut
A. cellspacing
B. cellpadding
C. rowspan
D. colspan
Brak odpowiedzi na to pytanie.
Wyjaśnienie poprawnej odpowiedzi: Atrybut colspan w języku HTML jest kluczowym narzędziem do scalania komórek w tabeli w poziomie. Umożliwia on połączenie dwóch lub więcej sąsiednich komórek w jednym wierszu, co pozwala na bardziej elastyczne i estetyczne układanie danych. Przykładowo, jeśli mamy tabelę z informacjami o produktach, a jeden z produktów ma długą nazwę, możemy użyć atrybutu colspan, aby ta nazwa zajmowała miejsce w dwóch lub więcej komórkach, co poprawia czytelność tabeli. Dobre praktyki w projektowaniu tabel wskazują, że należy unikać nadmiarowych komórek i skomplikowanych układów, gdyż obniża to przejrzystość danych. Zamiast tego, właściwe użycie atrybutów takich jak colspan pozwala na lepsze zorganizowanie informacji. Warto również pamiętać, że poprawne stosowanie atrybutu colspan powinno być zgodne z ogólnymi zasadami projektowania responsywnego, co oznacza, że tabela powinna dobrze się prezentować na różnych urządzeniach. Dodatkowo, atrybut colspan ma swoje zastosowanie także w kontekście dostępności, gdyż odpowiednie użycie tej funkcji pozwala na lepszą nawigację i zrozumienie struktury tabeli przez osoby korzystające z technologii asystujących.
Pytanie 33
Który z poniższych znaczników HTML nie służy do formatowania tekstu?
A. <strong>
B. <div>
C. <em>
D. <sub>
Brak odpowiedzi na to pytanie.
Wyjaśnienie poprawnej odpowiedzi: Znacznik <div> jest używany w HTML do dzielenia dokumentu na sekcje, co czyni go elementem blokowym, który nie formatuje tekstu w sensie stylizacji, ale organizuje strukturę dokumentu. Użycie <div> jest zgodne z dobrymi praktykami tworzenia przejrzystych i semantycznych kodów HTML, co jest fundamentem w budowie responsywnych oraz dostępnych stron internetowych. Na przykład, <div> może być użyty do grupowania elementów w sekcję strony, co ułatwia ich stylizację za pomocą CSS. Można tworzyć klasy lub identyfikatory dla <div>, co pozwala na dalsze formatowanie i manipulację jego zawartością. Warto pamiętać, że stosowanie <div> jest kluczowe w kontekście nowoczesnych ram CSS, takich jak Flexbox czy Grid, które umożliwiają bardziej zaawansowane układanie elementów na stronie.
Pytanie 34
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 został poprawnie zamknięty.
D. Znacznik br nie może występować wewnątrz znacznika p.
Brak odpowiedzi na to pytanie.
Wyjaśnienie poprawnej odpowiedzi: Twoja odpowiedź jest poprawna. Znacznik zamykający /b w badanym kodzie HTML jest niezgodny z zasadą zagnieżdżania. Zasada ta mówi, że znaczniki powinny być zamykane w odwrotnej kolejności do otwierania - zgodnie z modelem LIFO (Last In, First Out). W praktyce oznacza to, że jeśli otworzyliśmy na przykład najpierw znacznik <i>, a następnie <b>, to najpierw powinniśmy zamknąć <b>, a dopiero potem <i>. Nieprzestrzeganie tej zasady może prowadzić do nieoczekiwanych wyników podczas renderowania strony. Jest to istotne dla utrzymania czytelności i prawidłowego funkcjonowania kodu. W codziennej praktyce, szczególnie w większych projektach, stosowanie się do takich zasad pomaga utrzymać kod zrozumiałym i łatwym do zarządzania.
Pytanie 35
Jaką właściwość należy zastosować w selektorze CSS, aby osiągnąć efekt rozrzucenia liter?
A. text-decoration
B. letter-spacing
C. letter-transform
D. text-space
Brak odpowiedzi na to pytanie.
Wyjaśnienie poprawnej odpowiedzi: Właściwość CSS, która pozwala na uzyskanie efektu rozstrzelenia liter, to 'letter-spacing'. Używając tej właściwości, możemy dostosować odstęp pomiędzy poszczególnymi literami w tekście, co jest szczególnie przydatne w projektowaniu typograficznym oraz w celu zwiększenia czytelności tekstu. Wartość 'letter-spacing' może być określona w jednostkach takich jak piksele (px), em lub rem, co daje projektantom elastyczność w dostosowywaniu odstępów do różnych rozmiarów czcionek. Na przykład, ustawiając 'letter-spacing: 2px;', uzyskujemy dodatkowy odstęp 2 pikseli między literami, co sprawia, że tekst staje się bardziej przejrzysty. Zgodnie z zaleceniami W3C, stosowanie 'letter-spacing' powinno być rozważane w kontekście całego projektu, aby nie zaburzać harmonii wizualnej. Użycie tej właściwości jest istotnym elementem w planowaniu stylów CSS, który wpływa na estetykę oraz funkcjonalność stron internetowych.
Pytanie 36
Na podstawie filmu wskaż, która cecha dodana do stylu CSS zamieni miejscami bloki aside i nav, pozostawiając w środku blok section?
A. nav { float: right; } section { float: right; }
B. nav { float: right; }
C. nav { float: left; } aside { float: left; }
D. aside {float: left; }
Brak odpowiedzi na to pytanie.
Wyjaśnienie poprawnej odpowiedzi: Prawidłowa odpowiedź opiera się na tym, jak działają własności float w CSS i w jakiej kolejności przeglądarka renderuje elementy blokowe. Jeśli w dokumencie HTML kolejność znaczników to np. <aside>, potem <section>, a na końcu <nav>, to bez dodatkowego stylowania wszystkie trzy ustawią się pionowo, jeden pod drugim, w tej właśnie kolejności. Dodanie float zmienia sposób, w jaki elementy „odpływają” od normalnego przepływu dokumentu i jak układają się obok siebie. W stylu nav { float: right; } section { float: right; } sprawiamy, że zarówno nav, jak i section są przesuwane do prawej krawędzi kontenera, natomiast aside (bez float) pozostaje w normalnym przepływie, czyli z lewej strony. Ponieważ przeglądarka układa elementy w kolejności występowania w kodzie, najpierw wyrenderuje aside po lewej, potem section „odpłynie” w prawo, a na końcu nav też „odpłynie” w prawo, ustawiając się po prawej stronie, ale dalej od góry niż section. Efekt wizualny jest taki, że po lewej mamy aside, po prawej nav, a section ląduje między nimi, dokładnie tak jak było pokazane na filmie. Moim zdaniem to zadanie dobrze pokazuje, że przy floatach zawsze trzeba myśleć o trzech rzeczach naraz: kolejności elementów w HTML, kierunku „pływania” (left/right) oraz o tym, które elementy pozostawiamy w normalnym przepływie. W praktyce w nowoczesnych projektach częściej używa się flexboxa albo CSS Grid do takich układów, bo są czytelniejsze i mniej problematyczne. Przykładowo, zamiast kombinować z float, można by użyć display: flex; na kontenerze i ustawić order dla aside i nav. Float nadal jednak pojawia się w starszych layoutach i w zadaniach egzaminacyjnych, więc warto dobrze rozumieć jego zachowanie, choćby po to, żeby poprawnie modyfikować istniejące style lub naprawiać „rozjechane” układy w starszych projektach.
Pytanie 37
Jaką właściwość należy zastosować w kodzie CSS, aby ustawić czcionkę Verdana?
A. font-style: Verdana;
B. font-name: Verdana;
C. font-weight: Verdana;
D. font-family: Verdana;
Brak odpowiedzi na to pytanie.
Wyjaśnienie poprawnej odpowiedzi: Aby ustawić czcionkę Verdana w CSS, musisz użyć właściwości 'font-family'. To taka właściwość, która pozwala na określenie czcionek stosowanych w twoim dokumencie. W tym przypadku, chodzi o 'Verdana'. Jak przeglądarka znajdzie tę czcionkę w systemie użytkownika, to ją użyje. Na przykład, taki kod CSS może wyglądać tak: 'body { font-family: Verdana; }'. Warto pamiętać, że dobrze jest podać też inne czcionki na wypadek, gdyby Verdana nie była dostępna. Można to zrobić, wpisując alternatywy, jak w 'font-family: Verdana, Arial, sans-serif;'. Wtedy, jeżeli 'Verdana' nie jest dostępna, przeglądarka przejdzie do 'Arial', a jak ta też nie, to sięgnie po jakąś standardową czcionkę bezszeryfową. Z moich doświadczeń wynika, że stosowanie właściwości 'font-family' jest kluczowe dla stylu strony, bo poprawia to czytelność i jej ogólny wygląd.
Pytanie 38
W tabeli pokazano cechy pliku graficznego. Aby rysunek ładował się szybciej na stronie WWW, należy
Wymiary: 4272 x 2848px Rozdzielczość: 72 dpi Format: JPG
A. zmienić format grafiki na CDR
B. zmienić proporcje szerokości do wysokości
C. zwiększyć rozdzielczość
D. zmniejszyć wymiary rysunku
Brak odpowiedzi na to pytanie.
Wyjaśnienie poprawnej odpowiedzi: Zmniejszenie wymiarów rysunku to kluczowy krok w optymalizacji czasu ładowania grafiki na stronę WWW. Mniejsze wymiary oznaczają mniejszą ilość danych do przesłania, co skraca czas ładowania strony. Praktycznym przykładem jest zmniejszenie wymiarów obrazu z 4272 x 2848 pikseli do bardziej standardowego rozmiaru, jak np. 1920 x 1080 pikseli dla grafik wyświetlanych na ekranach. Zmniejszenie wymiarów nie tylko przyspiesza ładowanie ale także zmniejsza zużycie transferu danych co jest istotne przy ograniczeniach mobilnych. Warto pamiętać że mniejsze grafiki są też mniej zasobożerne dla urządzeń użytkowników co wpływa na ogólną wydajność strony. Zastosowanie odpowiednich wymiarów jest zgodne z dobrymi praktykami optymalizacji webowej rekomendowanymi przez Google PageSpeed Insights i inne narzędzia analityczne. Optymalizacja grafiki poprzez zmniejszenie jej wymiarów jest podstawową czynnością w procesie tworzenia responsywnych i szybko działających witryn internetowych.
Pytanie 39
Pokazane pole input pozwala na
<inputtype="checkbox"name="text1"value="text2">
A. wpisanie dowolnego ciągu znaków
B. wprowadzenie hasła
C. wybranie opcji
D. selekcję opcji z listy zawierającej wartości text1 oraz text2
Brak odpowiedzi na to pytanie.
Wyjaśnienie poprawnej odpowiedzi: Pole input typu checkbox to fajna opcja, bo pozwala użytkownikom zaznaczać jedną albo więcej opcji z dostępnych wyborów. Takie checkboxy można zobaczyć na różnych stronach internetowych, są super przydatne, a użytkownik może je odznaczać kiedy chce. W HTML mamy atrybut type, który mówi, co użytkownik może wpisać. W przypadku checkboxa mamy to pole, które można zaznaczyć i dzięki temu dodajemy wartość do formularza, gdy go wysyłamy. Przykładem mogą być formularze zgód, gdzie trzeba potwierdzić kilka polityk prywatności lub warunków korzystania z serwisu. Ważne jest także, żeby każdy checkbox miał odpowiednio przypisane atrybuty name i value, bo dzięki temu łatwiej jest je zidentyfikować, gdy przesyłamy dane. I pamiętajmy, żeby dobrze oznaczać checkboxy etykietami przez element label – to pomaga, zwłaszcza osobom korzystającym z technologii wspomagających. Takie poprawne używanie checkboxów to klucz do budowania intuicyjnych i użytecznych interfejsów użytkowników.
Pytanie 40
W HTML5 semantycznym znacznikiem, który służy do określenia dwóch sekcji widocznych po prawej stronie na rysunku, zawierających wiadomości oraz aktualności, jest
A. <article>
B. <nav>
C. <main>
D. <footer>
Brak odpowiedzi na to pytanie.
Wyjaśnienie poprawnej odpowiedzi: Element <article> w HTML5 został stworzony właśnie do oznaczania niezależnych, samodzielnych treści, które mają sens nawet poza kontekstem strony – czyli takich, które można zamieścić np. w RSS, podlinkować czy udostępnić osobno. W praktyce oznacza to np. pojedyncze wpisy na blogu, wiadomości, ogłoszenia czy aktualności – dokładnie tak jak w tym zadaniu. Dzięki użyciu <article>, osoby korzystające z czytników ekranowych czy wyszukiwarek łatwiej rozpoznają strukturę strony, bo semantyka jest czytelna dla maszyn. Z mojego doświadczenia, stosowanie <article> dla wiadomości i aktualności jest też zgodne z dobrą praktyką tworzenia dostępnych stron – Google nawet sugeruje, by tak wyodrębniać własne, kompletne treści. To ma ogromne znaczenie przy pozycjonowaniu (SEO), bo roboty wyszukiwarek potrafią lepiej rozumieć, co jest główną treścią strony. Dodatkowo, używanie odpowiednich znaczników semantycznych poprawia współpracę z różnymi narzędziami, które analizują układ i zawartość strony, a także ułatwia późniejszą przebudowę lub rozwój projektu. Moim zdaniem, nadanie sekcjom z wiadomościami i aktualnościami znacznika <article> to podstawa nowoczesnego kodowania stron internetowych.
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 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.
{# Core JS - self-host Bootstrap bundle + wlasne skrypty. Bundlowane przez django-compressor offline mode na produkcji (refs #50). #}
