wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

DOM I BOM

Total questions: 56

Worksheet time: 40mins

Name
Class
Date
1.

Do obiektu location nie należy:

a)

href

b)

reload

c)

replace

d)

open

2.

Oceń prawdziwość stwierdzenia:

"Obiekt history jest obiektem potomnym obiektu document"

a)

prawda

b)

fałsz

3.

Aby odświeżyć bieżący dokument należy użyć:

a)

document.open()

b)

document.reload()

c)

location.reload()

d)

location.open()

4.

Właściwość appName należny do obiektu:

a)

document

b)

window

c)

navigator

d)

location

5.

Oceń prawdziwość stwierdzenia:

"Właściwość location.href zawiera ten sam adres co właściwość document.url"

a)

prawda

b)

fałsz

6.

Właściwość obiektu history to:

a)

forward

b)

go

c)

back

d)

length

7.

Nazwę hosta dla bieżącego dokumentu przechowuje:

a)

document.hostname

b)

window.hostname

c)

location.hostname

d)

url.hostname

8.

Oceń prawdziwość stwierdzenia:

"location.lastModified zwraca datę ostatniej modyfikacji strony"

a)

prawda

b)

fałsz

9.

Odwołanie do kolekcji akapitów w dokumencie HTML może mieć postać:

a)

document.getElementById("p")

b)

document.getElementByTagName(p)

c)

document.getElementByTagName("akapit")

d)

document.getElementById("akapit")

10.

Oceń poprawność stwierdzenia:

"Właściwość innerHTML może być użyta tylko razem z metodą getElementById()"

a)

prawda

b)

fałsz

11.

Dany jest fragment kodu html, tworzący formularz:

<form id="f1" name="form1" method=" " actions=" ">

...

</form>

Wskaż niepoprawny sposób odwołania się do tego formularza. Przyjmij, że jest to jedyny formularz na stronie!

a)

document.forms[0]

b)

document.form1

c)

document.getElementById('f1')

d)

document.getElementById('form1')

12.

Wartość document.forms.length określa:

a)

ilość pól w aktywnym formularzu

b)

Ilość formularzy znajdujących się w dokumencie

c)

ilość znaków przechowywanych w polu forms

d)

ilość pól w formularzu o nazwie forms

13.

W języku JavaScript należy odwołać się do elementu zawartego w pierwszym paragrafie przedstawionego fragmentu strony HTML. Można to wykonać za pomocą funkcji

a)

getElementByClassName("p.1")[0];

b)

getElementByTagName("p")[0];

c)

getElementById("p1");

d)

getElement("p");

14.

Co oznacza skrót DOM?

a)

Document Object Model

b)

Data Object Model

c)

Dynamic Object Management

d)

Document Oriented Markup

15.

Jakie właściwości obiektu location służą do nawigacji po historii przeglądarki?

a)

forward i back

b)

go i reload

c)

reload i open

d)

replace i length

16.

Jakie metody obiektu document służą do manipulacji zawartością elementów HTML?

a)

getElementById i getElementsByClassName

b)

createElement i removeChild

c)

innerHTML i createElement

d)

appendChild i replaceChild

17.

Jakie metody obiektu window służą do manipulacji oknem przeglądarki?

a)

open() i close()

b)

getElementById() i getElementsByClassName()

c)

createElement() i removeChild()

d)

appendChild() i replaceChild()

18.

Jakie właściwości obiektu navigator służą do informacji o przeglądarce użytkownika?

a)

appVersion i platform

b)

userAgent i appName

c)

cookieEnabled i language

d)

javaEnabled i onLine

19.

Jakie metody obiektu window służą do zarządzania wielkością okna przeglądarki?

a)

resizeTo() i moveTo()

b)

open() i close()

c)

scrollBy() i scrollTo()

d)

focus() i blur()

20.

Jakie metody obiektu document służą do manipulacji zawartością elementów HTML?

a)

getElementById i getElementsByClassName

b)

createElement i removeChild

c)

innerHTML i createElement

d)

appendChild i replaceChild

21.
Chcąc zdefiniować formatowanie tabeli w języku CSS w taki sposób, aby wiersz, który jest aktualnie wskazywany kursorem myszy, został wyróżniony np. innym kolorem, należy zastosować
a)
pseudoklasę :visited
b)
pseudoklasę :hover
c)
pseudoelement :fist-line
d)
nowy selektor klasy dla wiersza tabeli.
22.
Aby uzyskać efekt rozstrzelenia liter w selektorze CSS, należy użyć właściwości
a)
letter-transform
b)
text-decoration
c)
letter-spacing
d)
text-space
23.
Blok deklaracji postaci background-attachment: scroll powoduje, że
a)
grafika tła będzie powtarzana (kafelki).
b)
tło strony będzie przewijane razem z tekstem.
c)
tło strony będzie stałe, a tekst będzie się przewijał.
d)
grafika tła będzie wyświetlona w prawym górnym rogu strony.
24.
W języku CSS zapis
h2 {background-color: green;}
sprawi, że koloru zielonego będzie
a)
tło całej strony.
b)
czcionka nagłówka drugiego stopnia.
c)
tło tekstu nagłówka drugiego stopnia.
d)
czcionka każdego nagłówka na stronie.
25.
W języku CSS, aby sformatować tekst poprzez przekreślenie, podkreślenie dolne lub górne należy zastosować atrybut
a)
text-align
b)
text-indent
c)
text-transform
d)
text-decoration
26.
W języku CSS zapis
a[target="_blank"] {color: yellow;}
sprawi, że kolor żółty przyjmie czcionka
a)
tekstu paragrafu.
b)
każdego odnośnika.
c)
odnośników, które otwierają się w osobnej karcie.
d)
odnośników, które otwierają się w tej samej karcie.
27.
W języku CSS zapis
p::first-line {font-size: 150%;}
użyty na stronie, na której jest kilka paragrafów, a każdy z nich ma po kilka linii sprawi, ze
a)
pierwsza linia każdego paragrafu będzie miała mniejszą czcionkę niż następne linie.
b)
pierwsza linia każdego paragrafu będzie miała większą czcionkę niż następne linie.
c)
pierwszy paragraf na stronie będzie w całości miał powiększoną czcionkę
d)
całość tekstu paragrafu będzie powiększona o 150%.
28.
W języku CSS zapis w postaci:
p {background-image:url("rysunek.png");}
sprawi,że rysunek.png będzie
a)
tłem całej strony
b)
tłem każdego paragrafu
c)
wyświetlony obok każdego paragrafu.
d)
wyświetlony, jeśli w kodzie zostanie zastosowany znacznik img.
29.
W języku CSS,aby zdefiniować niestandardowe odstępy między wyrazami, stosuje się właściwość
a)
line-spacing
b)
white-space
c)
word-spacing
d)
latter-space
30.
W języku CSS zdefiniowano formatowanie
p > i {color:blue}
Oznacza to,że kolorem niebieskim zostanie zapisany
a)
cały tekst paragrafu niezależnie od jego formatowania
b)
pochylony tekst paragrafu.
c)
cały tekst nagłówka niezależnie od od ich formatowania.
d)
pogrubiony tekst paragrafu.
31.
W języku CSS wcięcie pierwszej linii akapitu na 30 pikseli uzyska się za pomocą zapisu
a)
p {text-indent: 30px; }
b)
p {text-spacing: 30px; }
c)
p {line-height: 30px; }
d)
p {line-indent: 30px; }
32.
W języku CSS zdefiniowano następujące formatowanie.
Kolorem czerwonym zostanie zapisany
a)
tylko tekst pochylony nagłówka pierwszego stopnia.
b)
tylko tekst pochylony we wszystkich poziomach nagłówków.
c)
cały tekst nagłówka pierwszego stopnia oraz pochylony tekst akapitu.
d)
cały tekst nagłówka pierwszego stopnia oraz cały tekst pochylony, niezależnie od tego w którym miejscu strony się znajduje.
33.
W języku CSS aby zdefiniować odmienne formatowanie dla pierwszej litery akapitu, należy zastosować selektor
a)
klasy p.first-letter
b)
dziecka p + first-letter
c)
atrybutu p[first-letter]
d)
pseudoelementu p::first-letter
34.
W języku CSS zdefiniowano styl. Sformatowana stylem sekcja będzie zawierała obramowanie o szerokości
div { border: solid 2px blue;
margin: 20px;}
a)
2 px oraz marginesy wewnątrz tego obramowania.
b)
20 px oraz marginesy wewnątrz tego obramowania.
c)
2 px oraz marginesy na zewnątrz tego obramowania.
d)
20 px oraz marginesy na zewnątrz tego obramowania.
35.
Aby przygotować szablon strony z trzema kolumnami ustawionymi obok siebie, można posłużyć się stylem CSS
a)
.kolumny{ float: left; width: 33%; }
b)
.kolumny{ float: right; height: 33%; }
c)
.kolumny{ clear: both; height: 33%; }
d)
.kolumny{ float: left; width: 40%; }
36.

Co oznacza skrót CSS

a)

Cascading Style Sheet

b)

Colorful Style Sheets

c)

Computer Style Sheets

d)

Creative Style Sheets

37.

Jak nazywa się użyty w przykładzie selektor:

div span {font-size:14pt;}

a)

potomka

b)

braci

c)

uniwersalny

d)

dziecka

38.

div > span {color:red;} to przykład użycia selektora:

a)

potomka

b)

braci

c)

dziecka

d)

sąsiadującego brata

39.

div + p {color:white;} to przykład użycia selektora:

a)

potomka

b)

sąsiadującego brata

c)

braci

d)

dziecka

40.

div ~ p {color:orange:}

Mamy tu przykład selektora:

a)

braci

b)

dziecka

c)

potomka

d)

sąsiadującego brata

41.

p[id] {color:white;}

to przykład zastosowania:

a)

selektora atrybutu o określonej wartości

b)

prostego selektora atrybutu

c)

selektora specjalnego

42.

#blok {font-size:12pt;}

W przykładzie użyto selektora:

a)

klasy

b)

identyfikatora

c)

pseudoklasy

43.

Odsyłacz odwiedzony w CSS obsługuje pseudoklasa:

a)

:link

b)

:visited

c)

:active

d)

:hover

44.

Wskazanie kursorem myszy w CSS obsługuje pseudoklasa:

a)

:hover

b)

:link

c)

:active

d)

:focus

45.

Dla akapitu zdefiniowano styl CSS. Które właściwości stylu CSS poprawnie opisują dla akapitu krój czcionki: Arial; rozmiar czcionki: 16 pt; styl czcionki: pochylenie?

a)

p {

font-style: Arial; size: 16px;

font-weight: normal;

}

b)

p {

font-family: Arial;

font-size: 16pt;

font-style: italic;

}

c)

p {

font-style: Arial;

font-size: 16pt;

font-variant: normal;

}

d)

p {

font-family: Arial;

font-size: 16px;

font-variant: normal;

}

46.

By dostosować stronę internetową dla niewidomych, należy nadać wyświetlanym za pomocą znacznika img obrazom atrybut

a)

alt

b)

src

c)

text

d)

style

47.

Tekst paragrafu, wyrównany w poziomie do środka, opisuje w CSS reguła

a)

vertical-align: middle 

b)

vertical-align: center

c)

text-align: center

d)

align: middle

48.

W języku CSS, należy zdefiniować tło dokumentu jako obraz rys.png. Obraz ma powtarzać się JEDYNIE W POZIOMIE. Którą definicję należy przypisać selektorowi body?

a)

{

background-image: url("rys.png");

background-repeat: round;

}

b)

{

background-image: url("rys.png");

background-repeat: repeat;

}

c)

{

background-image: url("rys.png");

background-repeat: repeat-x;

}

d)

{

background-image: url("rys.png");

   background-repeat: repeat-y;}

49.

Który zapis w dokumencie HTML pozwala na połączenie z zewnętrznym arkuszem stylów o nazwie style.css?

a)

< link rel="stylesheet' src="style.css" >

b)

< link rel="stylesheet" href="style.css" >

c)

< a href="style.css" >

d)

< a src="style.css" >

50.

Reguła padding: 3px 4px 10px 13px; spowoduje nadanie marginesów:

a)

od góry 3px, z lewej 4px, z prawej 10px, od dołu 13px;

b)

od góry 3px, z prawej 4px, z lewej 10px, od dołu 13px;

c)

od góry 3px, z prawej 4px, od dołu 10px, z lewej 13px;

d)

od góry 3px, od dołu 4px, z lewej 10px, z prawej 13px;

51.

Deklaracja margin: 2px 5px; nada elementowi marginesy:

a)

górny i dolny po 2px, prawy i lewy po 5px

b)

górny i prawy po 2px, dolny i lewy po 5px

c)

prawy i lewy po 2px, górny i dolny po 5px;

d)

wszystkie wewnętrzne marginesy po 2px, marginesy zewnętrzne po 5px

52.

Jak zdefiniować w języku CSS formatowanie hiperłącza, żeby nieodwiedzony link był w kolorze żółtym, a odwiedzony w kolorze zielonym?

a)

a:visited {color: yellow;} a:link{color: green;}

b)

a:hover {color: green;} a:link{color: yellow;}

c)

a:hover {color: yellow;} a:visited{color: green;}

d)

a:link {color: yellow;} a:visited{color: green;}

53.

Przedstawione formatowanie CSS sprawi, że dla prezentowanego nagłówka trzeciego stopnia

<style>h3{background-color:grey;}</style>

...

<h3 style="background-color:orange;"> Rozdział 1.1.1.2</h3>

a)

tło będzie szare.

b)

tło będzie pomarańczowe.

c)

kolor czcionki będzie szary.

d)

kolor czcionki będzie pomarańczowy.

54.

Wskaż prawidłową kolejność stylów CSS mając na uwadze ich pierwszeństwo w formatowaniu elementów strony WWW.

a)

Lokalny, Wewnętrzny, Zewnętrzny.

b)

Zewnętrzny, Wydzielone bloki, Lokalny.

c)

Rozciąganie stylu, Zewnętrzny, Lokalny.

d)

Wewnętrzny, Zewnętrzny, Rozciąganie stylu.

55.

Wybierz odpowiedź, aby wysokość elementu nigdy nie przekroczyła ustalonej wartości

a)

max-width

b)

height

c)

max-height

56.
W języku CSS zapis
a[target="_blank"] {color: yellow;}
sprawi, że kolor żółty przyjmie czcionka
a)
tekstu paragrafu.
b)
każdego odnośnika.
c)
odnośników, które otwierają się w osobnej karcie.
d)
odnośników, które otwierają się w tej samej karcie.