Font size
WorksheetsHTML i CSS
Total questions: 36
Worksheet time: 36mins
Których zestawów elementów nie można umieścić w sekcji <head>?
link, title, h1
meta, rel, link
title, style, meta
link, script, meta
Wybierz poprawne zdania
Nagłówki na stronie muszą występować w kolejności
Nagłówków powinno używać się do stylizacji tekstu
Można pominąć dowolny nagłówek, na przykład użyć h5 bez używania h4
Na stronie może istnieć tylko jeden nagłówek h1
Wybierz elementy semantyczne
article
footer
div
span
Wybierz poprawne odpowiedzi
Element <ol> to lista uporządkowana
Elementy listy dodajemy używając <item>
Listy nie mogą być zagnieżdżone
Nie można zagnieździć listy uporządkowanej wewnątrz nieuporządkowanej
Co daje nam element <picture>?
Automatycznie wyświetla ramkę wokół obrazu
Wybiera obraz o poprawnym rozmiarze na podstawie określonych reguł
Wyświetla podstawowy obraz na przeglądarkach które nie wspierają tego elementu
Daje możliwość wyświetlenia losowego obrazu
Wybierz poprawne zdania
Element <article> to tak na prawdę <div> tylko z inną nazwą
Element <nav> zawiera dodatkową funkcjonalność
Element <footer> pomaga w indeksowaniu strony w Google
Element <h1> musi być bezpośrednim potomkiem elementu <body>
Wybierz znane ci elementy pól formularza
input
textarea
select
checkbox
Wybierz istniejące typy pola input
color
age
address
Wybierz niepoprawne atrybuty walidcji pól formularza
maxlength="8"
required="required"
regex="[0-9]+"
min-length="10"
Wybierz poprawne zdania
Wartość atrybutu `placeholder` znika gdy użytkownik wprowadzi wartość
Wartość atrybutu `value` jest wysłana z formularzem jeśli użytkownik nie zedytuje pola
Formularz może być wysłany uzywając elementu <button>, nie tylko <input>
Atrybut `value` na elemencie <textarea> nie może zawierac wielu linii
Na jakie sposoby element <label> może być przypisany do pola formularza?
Wartośc atrybutu `for` taka sama, jak atrybutu `id` pola
Wartośc atrybutu `for` taka sama, jak atrybutu `name` pola
Pole formularza znajdujące się wewnątrz elementu <label>
Element <label> znajdujący się wewnątrz pola formularza
Jak ograniczyć szerokość pola <textarea> do 30 znaków?
maxlength="30"
cols="30"
width="30"
chars="30"
Co domyslnie waliduje element <input type="email">?
Czy we wprowadzoej wartości znajduje się symbol @
Czy we wprowadzonej wartości znajduje się kropka
Czy wprowadzona wartośc składa się z co najmniej 3 części
Czy domena adresu email jest zarejestrowana
Dlaczego w pole typu `number` wciąz możemy wprowadzić literę e?
Osoba tworząca ten standard potrzbowała jej
Pozwala wprowadzić numer w notacji naukowej
Pozwala wprowadzić numer w notacji Oxfordzkiej
Nie możemy wprowadzać żadnych liter
Czemu służy typ pola formularza `tel`?
Waliduje czy wprowadzone zostały tylko cyfry lub symbol +
Pomaga oprogramowaniu odczytującemu strony internetowe na głos
Pomaga w autouzupełnianiu
Automatycznie sprawdza czy numer jest zarejestrowany
Jakie metody wysyłania danych wspiera formularz?
GET
POST
SUBMIT
PUT
Do czego służy atrybut `name` pola formularza?
Pozwala przyporządkować wartość danej nazwie
Pomaga w autouzupełnianiu formularzy
Do walidacji
Do niczego. Jest pomocny, ale nie niezbędny.
W jaki sposób możemy pogrupować opcje pola <select>?
Nadać wielu opcjom tę samą wartość atrybutu `name`
Używając elementu <optgroup>
Nadając wielu opcjom tę samą wartośc atrybutu `optgroup`
Używając elementu <group>
Wybierz prawdziwe zdania
Tylko jedno pole typu `radio` może zostać wybrane na raz
Zaznaczone pole typu `checkbox` wyśle wartość `true`
Niezaznaczone pole typu `checkbox` nie zostanie wysłane
Mozna zaznaczyć wiele pól typu `radio` przytrzymując klawisz Shift
Jak zadeklarować zmienną CSS o nazwie `bg` i wartości `red`?
--bg=red
--bg: red
$bg: red
bg(red)
Jak nadać elementowi kolor tekstu uzywając zmiennej `col`?
color: --col
color: $col
color: col()
color: var(--col)
Wybierz niepoprawne selektory CSS
div.red
div>span
span/a
#in[cols="20"]
.red !span
Co wybierze selektor `div.main > *`
Wszystkich potomków elementu <div>
Wszystkich potomków elementu `<div>` z klasą `main`
Wszystkich bezpośrednich potomków elementu `<div>`
Wszystkich bezpośrednich potomków elementu `<div> z klasą `main`
W jaki sposób wybrać wszystkie pola formularza typu `radio` będące potomkami formularza o ID `form`?
form#form input[type="radio"]
form#form > input[type="radio"]
form.form input[radio]
form#form input:type=radio
Wybierz wartości relatywne
10%
2fr
30px
calc(30px / 2)
Jak nadać elementowi ze stylem `display: grid` odstępy pomiędzy potomkami?
gap
spacing
padding
grid-gap
Wybierz poprawne zdania
Padding nadaje odstęp na zewnątrz
Margin nadaje odstęp na zewnątrz
Padding nadaje odstęp wewnątrz
Padding nadaje odstęp na zewnątrz
Czym charakteryzuje się `outline` w porównaniu do `border`?
Nie ma wpływu na położenie sąsiednich elementów
Może być oddalony od elementu
Jest niewidoczny do momentu kliknięcia
Może być wyłączony w ustawieniach przeglądarki
Jak umieścić element wewnątrz grida tak, żeby zajmował kolumny pierwszą, drugą, oraz trzecią?
column-span: 1-3
column-span: 1 / 3
column-span: 1 / 4
column-span: 1 / 2
Kiedy aktywne będa reguły wewnątrz poniższej reguły?
@media screen and (max-width: 500px)
Gdy rodzic będzie szerszy niż 500 pikseli
Gdy przeglądarka będzie szersza niż 500 pikseli
Gdy przeglądarka będzie węższa niż 500 pikseli
Gdy element będzie węższy niż 500 pikseli
Jak nadać elementowi szerokość równą jednej trzeciej zmiennej `w`?
width: --w / 3
width: div(--w, 3)
width: var(--w) / 3
width: calc(var(--w) / 3)
`width: 80%`
odnosi się do:
80% szerokości okna przeglądarki
80% maksymalnej szerokości elementu
80% szerokości rodzica
80% uprzednio ustalonej wartości `base`
Dlaczego możemy chcieć użyć jednostki `vh` zamiast `%`?
Jest relatywna do rozmiaru przeglądarki, nie rodzica
Jeśli rodzic nie ma ustalonego danego rozmiaru, jednostka `%` nie zadziała
Jest nowsza i gwarantuje lepszą wydajność
Jest bardziej responsywna na szczególnie szerokich wyświetlaczach
Jakiego selektora użyć, by wystylizować aktywne pole formularza?
:active
:selected
:focus
:clicked
Jak zapewnić płynne przejście wartości `color`?
transform: color 200ms ease-in-out
transition: color 200ms ease-in-out
transition: color 200ms smooth
transform: color 200ms fluid
Wybierz poprawne deklaracje koloru
#a7f
rgb(46, 123, 784)
rbg(122, 87, 14)
rgb(67, 254, 0)
