Scribd
Upload
6 views25 pages

Global HTML CSS New 1

The document contains a series of questions related to HTML and CSS coding practices, including markup corrections, style definitions, and media queries. It tests knowledge on best practices for web design, accessibility, and styling elements. The questions require selecting appropriate options from dropdown lists to complete the markup or answer specific coding questions.

Uploaded by

Deepanshisingh Rajput
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views25 pages

Global HTML CSS New 1

The document contains a series of questions related to HTML and CSS coding practices, including markup corrections, style definitions, and media queries. It tests knowledge on best practices for web design, accessibility, and styling elements. The questions require selecting appropriate options from dropdown lists to complete the markup or answer specific coding questions.

Uploaded by

Deepanshisingh Rajput
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

Question 24 of 40 Time Remaining 00:15:17

J need to drsplay a logo on the nght side of a web page The logo needs to be compatible wrth screen readers You wnle tile following
i of markup

ng src =" Logo.png" styl e=" wid th : 100px ; height : 100px ; float : right" >

rat do you need to do to correct the markup?

A Specrfy the path to the rmages folder

B Add the closing img tag

C Add the alt attribute

D Create a style rule for the image m an external CSS file

I, t

Go To Summary Mark for Revrew Mark for Feedback Tools • - NextJ'")_


Question 23 of 40 Time Remaining 00:15:20

'ou define the foll owing styles 1n a sty le block


Answer th e questions by selecting the correct option from each drop-
<s t yle> down le st
#stylel {
color : red; Note You wil l receive partial credit for each correct selection
font-size : 30px;
}
#styl e2 {
co lor : b lue ;
Answer Area
font- size : 40px ; Line 02 displays text 1n which color?

#style 3 {
color : green ; Line 02 displays text 1n which font size? ')O____QQ(~ls ~
font- size : 20p x;
Lene 03 displays text 1n which color? '""imrple •
</s t yle >

You wnte the following HTML Line numbers are 1nduded for reference only

01 <body s tyl e="c ol or : purp l e ; f ont-size : 10px ; " >


02 <p id="stylel "> Fast e n your se a t belt< / p >
03 <p>Look both « a ys before pulling out . </ p >
04 <p id= " style3" st y l e= "colo r : r ed ; " >W atch your speed .</ p >
05 <p s tyle=" color : g r een , font- s iz e : 20p x; ">Be ready to stop.</p>
06 <p style= " color : red ;">St udy th e rules of the road .</ p >
07 <p style="font-s i z e : 30px ; " >You ' 11 be drivin g in no time . </p>
08 </ bod y>

Marl< for Review Mark for Feedback Tools •


-
Question 22 of 40 Time Remaining 00:15:21

'ou are designing a web page for your company You need to display an image named sun set . png on the page If the user's Internet connection IS slow, or if the user IS visually Impa1red, you need the text Sunset Logo to be
hsplayed or read aloud

:omplete the markup by selecting the corre.ct option from each drop-down list

\nswer Area

Go To Summary Mark to, Review Mark 101Fwdback Tools ·


Question 21 of 40 Time Remaining 00:15:23

You need to create a stylesheet that \\~II cause a set of elements to be surrounded by a solid red line that Is 4 pixels wide The line d1mens1ons should be part of the
element's dImensIons

How should you complete the markup? To answer move the appropnate markup segment from the 11st on the left to the correct pos1tIon on the nght.

Markup Segments

I~b_or_d_er_-_st_y_l e _ ~I '~b_ord
_ e_r - - -~ fI out li ne - sty l e 11 margin
. Answer Area

div
JI j border
- - - - - ~' : 4px solid red ;

l;

,;JI'
pi
I
'

;j

:1
I

Go To Summary Mark for Review Mark for Foodback Tools •


Question 20 of 40 Time Remaining 00:15:24

You are creating an HTML page that displays a how-to gurde You want to display the content rn the following structure

1 Learning HTML
a Basrc Elements
b Semantic Elements
2 Learning CSS

How should you complete the markup? To answer move the appropnate HTML tags from the lrst on the left to the correct positrons on the rrght You may use each markup segment once, more than once or not at all You might need to move
the spilt bar between panes or scrol l to vrew content

Note You will receive partial credrt for each correct parr of tags

HTML Tags Answer Area- t


~ I h2 li ol I ul I I < E::]>
<li>
Learning HTML
< ~ type="a">
<li >Basic Elements</li >
<li >Semant i c Elements <:/ li >

..
<!@=] >
</li >
<li >
Learning CSS
</li >
<!@=] >

Go To Summary Mark for Review Mark for Feedback Tools •


Question 19 of 40 Time Remaining 00:15:26

Move each CSS term from the list on the left to its corresponding example on th e
nght

Note You wi ll recerve pamal credrt for each correct answer

CSS Term Examples

I value 1.8em \value

\ property . co nt ainer ,.
L
: \ ~lass selector

\ 1d selector #container ' t \ itl selector

\ declaration mar,gin - top


~r \ property
t
"
\ class selector
font-fJamily: Aria ¼,; \ declaration

Go To Summary Mark 101 Review Mark for Feedback Tools y

- Next
Question 18 of 40 Time Remaining 00:15:27

The Jazz Club wants you to add an rmage to the co mpany home page The rmage should be 100 prxels wrde by 50 prxels high The home page shou ld display the company name rf the rmage
cannot be loaded -

Complete the markup by selecting the correct option from each droP-down lrst

Answer Area

Go To Summary Mark for Revrew Mark for Feedback Tools - Next


Question 17 of 40 Time Remaining 00:,15:29

What 1s the default va lue of the CSS


pos i t i on property?

0 A abs ol ute

0 B re lat i ve

0 C fix ed

~ D stat i c

Go To Summary Mark for Review Mark for Feedback Tools .


Next_111,.
Question 16 of 40

You are creating a home page for CompanyPro You need to determ ine which HTM L e lements will c reate
a simple web page
Whic h six HTML segments should you use in sequence? Move the srx HTM L segments to t11e an swer area and place them in the
correct order

HTML Segments
Answer Area
I <h l >Welcome to CompanyPro< / h1 >
Q__ji < !DOCTYPE html >
I <ti t l e >Comp an yPro</ ti tle >
0 <ht ml >

,.;ii
L::'.J
<h . .d>
<title>Compan y Pro</,title >

0 </ h ead>

<body>
ltl <hl >We l come to CompanyPro</hl >
" ' L::'.J <p>Ou r new store on 1 Main Street is n m, o pen . </ p >
\V </body>

@ @] L<_lh_t _ml_ >_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _


_ __ __

Go To Summary Mark for Review Mark for Feedback Tools •


-
Question 15 of 40 Time Remaining 00:15:33

You analyze the following code to detem1ine whether 11 meets industry best practices

<body>
<hl s t yle= " color : navy " >Learning CSS </ hl >
<ul >
<l i style= "color : bl ue "> Inhne Styles< / l i>
<l i s t yle=" color · bl ue "> Internal Styl es </ h >
<li st y le=" color blue " >Ext e rnal Styles< li>
</ ul >
</ body >

Which statement Is true?

C A The color style speafied for the <h1 > element should be moved to an internal ji
stylesheet

The color style spea fied for the <li > elements should be moved to an internal
8
stylesheet

C C The color style for the <li > elements should be moved to the <body> element

- D The CSS conforms to industry best pracl.ices

Go To Summary Mark for Review Marr for Fcocodbacr Tools • - Next,!¾


Question 14 of 40 Time Remaining 00 :15:34

You wa nt to complete the pseudo class for link elements so that the links appear red when the page loads gree n when the link 1s clicked, orange when the cursor moves over the, link, and blue 1f the link
was clicked previou sly

How should vou complete the markup? To answer move the appropnate CSS selectors to the correct pos1t1ons on the nght You may use each CSS selector once, more than once, or not at all

~ C •
CSS Selectors Answer Area

\~a_:_ac_t _i v_e_ _ _a_:_v1_· s_i -_,e_


d_ _ _a_:_1i_·n_k_ _ _ f j a : hove r __ _____ ____ __ __! { c o lor : r ed ; }

\ a : vi s ited !{ co l o r : blue ;}

r
I

~\a_:_ho_v_e_r_ ~l{ c.ol o r : o range; }

~
\ a_: _ac_ t_iv_ e_ ~ I{ c olor : g reen ; }

Go To Summary Mari' for R"'v1ew lvlarv for F8&db&CY Tools •


Question 14 of 40 Time Rema ining 00 :15:43

You want to complete the pseudo class for link elements so th at the links appear ,-ed when the page loads, green when the link Is clicked, ora nge when the cursor moves over the link, and blu e 1f the link
was cl icked previously

How should you complete the markur:i? To an swer move the appropriate CSS selectors to tl1e correct posItIons on tlie ngllt You may use each CSS selector once, more than once, or not at all

CS S Selectors Answer Area

~
I a_:_a c_t _i v_e_ _ ~a_"_' i_s_
i t_e_d _ _ ~a_:_l i_n_k - - ~ I / a : hov er ;{color : red ; }

/a:v isited /{ c olo r : blue ; }


j... !"

i f
/a: hover I{ c o lor : orange ; }

I / a : active /{ colo r : green ; }

'! . . "le

Go To Sum mary l.1c,rY for Review Ma rl' fc,r Feedlu,cl-' rool~ • Nex~
Question 13 of 40 Time Remaining 00:15:45

An element must maintain Its location in the v1ewport even 1f the page 1s
scrolled

Which value of the CSS po s i t i on property should you use?

0 A po s i tion · absolute ,

C B pos i tion : relative ,

C C position stat i c,

D po si tion fix ea ,

Go To Summary Mark for R8 111ew tv'larl-' f01 F88dbac.- lool s •


Question 12 of 40 Time Remaining 00 :15:47

For ea ch markup segment select True 1f the HTML element belongs In the head block or False 1f 11
does not

Note You will rece1Ve partial credit for e.ach correct selection

Answer Area

< sty l e > hl { c o l or : red ;} </style> 0

<t i t le >C o ntac t Information< / t 'itle > 0

<l i nk rel= "s t y l e s he e t " hr ef= "d e faul t. cs s" / -:.-- 0

<hl>Wel c o me< / hl > 0

< ! DOCTYPE html > G

Go To Summary Mark for RE:>11ew lv1arr 1or reedbacl' Tool s • Next


Question 11 of 40 Time Remaining 00:15:49

Tlie CompanyPro home page uses a simple CSS media query to determine how to display tile layout elements on different devices Tile page must display differently for phone,
tablet and desktop

You need to complete the media quenes for each device

Complete the marl<up by selecting the correct option from each drop-down 11st

Note You will receJVe partial credn for each correct selection

Answer Area

@media onl y s c reen [imd ~ Width 48O!J&___ J~J {


/ * For mobi le ph one s : • /
nav {di splay : non e ; }
ma i n {widt h : 100%; }
a s i de {d i s pl ay : none;}

@med i a only s c r e en Cancffmm-w1dtll 481!J&


~ ~ -~ d (max-width 768px) IT {

/ * For tablet s : */
na v {d i splay : no ne;}
ma in {wid t h : 75%;}
as i de {w i dt h . 25% ;}
}
@media only s c reen ~ <!J.mJ!l:.Wldth ~ x.[_3 {
/ * For desktop : */
nav { di splay : block ; }
ma in {wid th : 75% ; }
aside {w idth : 25%;}
}

Go To Summary Mark for RE:v1ew Mar~ for FE:E:dbc:,c~ Tools • Next .


Question 10 of 40 Time Remaining 00:15:51

Which code segment correctly sets the background of a paragraph to blue wrth a r ed
borde r ?

p {
ba ckground-color = bl ue ,
border = 10px outset red ,

p {
ba ckgrouno -c olor · blue ,
• B borde r 10px outset red ,

p {
bac kground -c olor blue ,
C
border -c olor 10px red ,

p [
ba c kground-color bl ue ,
D
boroer - olor 10px outset red ,

Go To Summary 1.1ar'f fur Review Marr !01 F&&dbdci' Tools •


Question 9 of 40 Time Remaining 00 :15:53

A nalyze the followi ng markup

< ! DOCTYPE ht ml >


<ht ml lan g =" en " >
<head >
<s t yl e '
p {
c olor : purple ;
}
</ s t yl e >
</ hea d >
<body >
<p s t yl e= " color red , text- decoration : un derl i ne ;"> First pa ragra p h < / p >
< bod y >
</ html >

Given the miemal style sheet and mime style which statement 1s True?

- A The text "First paragraph" wi ll d ispl ay purple and not underlined

6 The text "First paragraph will displ ay purple and underlined

~ C The text "First parag raph" will display red and not underlined

D The text "First paragraph w1I display red and underlined

~ To Summary Mar,< for Review lv1arl-' fc,r FEeEedba cl-' Tools ·


Question 8 of 40 Time Remaining 00:15:55

You are creating the following web pag e

The Jazz Club


Come ioir. th, fim!

You create the following HTM L

<body >
<h1 s tyle ='' font - s 1:e 30px; ">The Jaz c Club< / h1 >
<p>Come JOl~ the f un 1 < p >
< boay >

You need to create the necessary CSS style to format the paragraph

Move the appropnate CSS properties from the hst on the left to the va lues on the nghl You may use each property once, more th an once,
or not at al

CSS Properties
1

_c_ol_o_r _ _ __ _ _ _ _t_e_xt_-_al_i_g_n_ __ __ I I~f_o_nt_-_st_y_l _e _ _ _ __ left Itext-align


_, _ex_t _-i_n_de_n_t _ _ _ _ _ _f_o_ l
nt_-_we_i_g_ht_ _ _ _ _ J t ext- de cora tion itali c I fo nt-sty le

t ext-decora,ion-color 1
fon t -si ze underl i ne I text-decoration

ll 50px I text-indent
c;I

purple Icol or
bold I font - weight

Go To Summary Mart for Rev,ew Mi:111' for Feedbac~ Tools •


Question 7 of 40 Time Remaining 00: 15:57

You are building a website and want to have three links called Home Product Info and Contact Us You have assigned all of these elements to a
class called ma in

You need to ere.ate a selector that applies to all three links

Which selector should vou use?

C A a[name; " ma in ']

~ 8 . ma i n

D #ma i n

Go To Summary l.1aw 1or RE:v1ew lvlarv 10 1 r eedtJocl' Tools •


Time Remaining 00:16:00
~uestion 6 of 40

You are creating an HTML document th at contains an essay with two sections

You need to make 1t easv for the user to navigate from the top of the document to
Se c t 1on2

Complete the sentences by selecting the correct option from each drop-down list

Note You will recerve partial credit for each correct selection

Answer Area
The m arkup defining the link at the top of the page should be qa-Ji'get-~ ·~ n2</a>- --:---- 3
The m arkup defi ning the target for sect,1on 2 should be 3'ahref; "#Seg:1Q_n:[>§_e_c;t1on 2</a > ....-
1

Go To Summary Marr for RE<v1ew lv'la rr for FE<E<db,, c.r Tools •


Time Rema ining 00:16 :02
Question 5 of 40

You are an intern at Sunset Tovs


You need to add meta elements
to a web page to meet the followi
ng
requirements
• You need to 1dent1fV ternis that
w1l help the web page show up
1

• The stnng · sunset Tovs online 1n search engines


store' should appear beneath the
link in search engines
• You must specify encod ing and
screen configu ration
Complete the markup b\ selecting
the correct option from each drop-d
own list
Note You will receJVe partial credn
for each correct selection

Answe r Area
<head >
<ti tle>S unset Toys< / title
>
<meta chars ~ _ ~ =" utf-8 " >
<meta name =" v iewpo rt "
conte ~-"w1dth=dev1ce-~1dth__,_1n1ti_
<meta name ="ke yword s" al~ ale= 1">
co nte_!ll= "toys, gam_e
s~puules, electronics, video game
<meta name= "de scr iptio n " s, Sunse ~ Toys":::_ •
content="Sunset_Toys Q!:Jlme stQT~
_ - -
</ he ad > ..,.

Go To Summ arf IJiart lCJ' Review Mart for r eedl.Ja c~ Tools •


Back
Question 4 of 40

••
You are creating a web fom1 to allow visitors to sign up for a maIlIng lrsl The form wrll collect tl1e Informatron that rs shown rn the followmg
s S ii S lr ► < ◄ &MSKM ◄ .... '
Time Remain ing 00:16:03

screen shot

Rock :\lusic Zone :'.\Jailing List


Join our mailing hst no,,

FtrSt name

Email
.,,; /
Aj = I ,,-.r1t to subS<.'T!be to the Roc:k Music Zon e matlmg h st

Frequent: of email promotions


..,,,.
Answer Area
Wh ich code segment will disp lay the form ele ment labeled A? -~ ~t] ype~"c~ec~b~ ' ~ ~ subscribe" v~a=lu~~=
-~'-Ye
'-=s~">_ __ ~~~
~,..~

Which code segment will drsplay the form element labeled B? _"!l:!PJJI !YRe=o"rag,o.::_name="frequ~ncy" value="da1ly" checked> ,..

Which code segment wrll display the form element labeled C? 1~ type="submrt"value~bmif'>-

Go To Summary M"rt fc,, RE:,,ew I"1ar~ for r E:E:dbac~ Tools • Back


Question 3 of 40 Time Remaining 00:16:11

The exte rnal stylesheet named mystyles. css contains the following th ree rules
For each statement, se lect True or False
hl { color : blue ; }
h2 { color : purple ; } Note You will receive partial credit for each correct
p { color : grey; } selecti on

The h ead section of a web page contains the following markup

<link re l ="st y lesheet" type= " t e xt / css" href="m ys t yl es . css"> Answer Area
<styl e >
True False
hl { color : ma roon ;
h2 { co lor · blue ; } 0
"Ce rtificates will be awarded in June " Is displayed in grey
p { color : bla ck, }
</ s t y le>
"Coming soonl" 1s displayed 1ri b lue 0
The following elements appear within the body of the web page

<hl style="color :bla ck, ">Comp a nyPro Pre se nts< / hl > , "Awards"' Is displayed m maroon 0
<h2>Rock Climbing 101</h2>
<p st yle=" color . b lue, ">Com i ng s oon' </ p > "Rock Climbing 101" Is displayed In purple 0
<hl>Awaras </hl>
<p>Certific at es will be awarded in J une . </ p >

Go To Summary Marr fc,r Review lvlarr for Feedbacr Tuols •


Question 2 of 40

The image below shows the search results for The Food Club
It t:f ...
, ,.
Time Remaining 00:16:14

www.thefoodclub.o rg
The Food Club
Each meal from The Food Oub Is pe-fectl, s1Zeo and pornoneo fo· your f.m ily to enJoy at l sitting Our fully-prepared
mea ls are delivered fres!- ano ready to eat ,r 10-15 minutes Designed and pre oa red by highly trained and
award -winning chets The Food Oub neats use hlgn-quallty ano f resh 1ng-ed 1ents, delivered to your door

Evaluate the image and answer the questions bv selecting the correct option from each d rop.
down list

Note You will recerve partial credit for each correct selection

C II
Answer Area

Which meta attribute ca uses a search engine to produce the results shown when the value 1s set to
keyword?
Which meta val ue matches the paragraph of text yielded 1n the search result?

Which meta attribute 1s pai red with name to produce the text shown in the search result?

Go To Summary Mar, for R8v1ew Marf' fc,, I 1c,1c,dtJaci' 1001~ •


Question 1 of 40 Time Remaining 00:16:18

You are creating an HTML page that displays blog entnes You want to ensure that your page can be indexed appropnately by
search engines

You need to use the appropnate semantic tags for areas on the page

Move each semantic tag from the list on the left to its purpose on the right

Note You will recerve partial credrt for e.ach correct answer

Semantic Tags Purposes

Displays a blog entry Iart icle


Displays comments about the blog entry Iaside
Displays hyperlmks to related mformat1on on an external site Inav
'------'

Go To Summary Marl< for Review Marr fc,r r eedbd• r Tuols •

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy