Computer Science-120 Exam 1
Which is the correct nesting of these elements? "p" inside "body" inside "html" "html" inside "body" inside "p" "p" inside "body" inside "head"
"p" inside "body" inside "html"
Given the HTML below, how would you select it by id? <p id="dorothea">Perhaps we don't always discriminate between sense and nonsense.</p>
#dorothea
We'll use this block of HTML for the next few questions. <ul id="forest"> <li class="evergreen"><a>pine</a></li> <li class="evergreen"><a>lodgepole</a></li> <li class="evergreen fruit"><a>holly</a></li> <li class="leaf fruit"><a>apple</a></li> <li class="leaf"><a>oak</a></li> <li class="leaf"><a>maple</a></li> </ul> 29 - There may be other lists on the page, in addition to the one above. Given that, what selector would you use to select all the list items in the forest's unordered list?
#forest > li
Which of the following is NOT an acceptable value for the font-size property? medium x-small .4page 1.2em .9rem larger 14px
.4page
Given the HTML below, how would you select it by class? <p id="dorothea" class="brooks" >Perhaps we don't always discriminate between sense and nonsense.</p>
.brooks
<ul id="forest"> <li class="evergreen"><a>pine</a></li> <li class="evergreen"><a>lodgepole</a></li> <li class="evergreen fruit"><a>holly</a></li> <li class="leaf fruit"><a>apple</a></li> <li class="leaf"><a>oak</a></li> <li class="leaf"><a>maple</a></li> </ul> 30 - Assume that the evergreen, fruit and leaf classes are not used elsewhere on the page. What selector will select the apple tree, but none of the others?
.leaf.fruit
Which of the following uses of the <link> tag is correct? <link rel="stylesheet" href="css/my_styles.css" /> <link rel="stylesheet" src="css/my_styles.css" /> <link rel="css" /> <link href="css/my_styles.css" />
<link rel="stylesheet" href="css/my_styles.css" />
<....> You need to leave immediately. Your office is bugged! <....> Which of the following tags should be used in this case? <strong> <i> <span> <em>
<strong>
Which tag supports CSS code between its opening and closing tag? <div> ... </div> <css> ... </css> <style> ... </style> <link> ... </link>
<style> ... </style>
Which of the following tags will you use to add cells to the table header? <head> <td> <th> <tr>
<th>
How do you handle browsers that do not support the audio element? Don't do anything Add text in your audio element with a message stating that your browser does not support the audio element or audio format. Do not include the 'autoplay' attribute so as to avoid an error being displayed Add multiple source elements
Add text in your audio element with a message stating that your browser does not support the audio element or audio format
p { border: 2px solid black; background-color: rgb(150, 50, 20); } Examine the style rule above. 40 - Will the color always run flush to the border or will there sometimes be a gap? Always flush Sometimes a gap
Always flush
What is the general best practice for leveraging CSS from a Web page? Bind in CSS from an external file with a <link> tag Enter CSS directly into a <style> block
Bind in CSS from an external file with a <link> tag
The primary purpose of HTML is to assist formatting of text. True False
False
Why should you use semantic elements in your Web page? It provides meaning and structure to the Web page and improves automated processing of documents A user will eventually run out of 'id' values and semantic elements solve that problem It makes styling the Web page easier It will drastically improve the structure of your document visually
It provides meaning and structure to the Web page and improves automated processing of documents
<p id="greeting" class="hello world">This is me greeting the world</p> 7- Which of the following is the correct behavior with respect to the code above? Both the classname and paragraph text cannot contain "world" Two different classes "hello" and "world" will be applied to the paragraph The code is invalid because space is not allowed in class attribute's value One class "hello world" will be applied to the paragraph
Two different classes "hello" and "world" will be applied to the paragraph
We add a second style rule: p { padding: 20px; }. 41 - Will the background color still extend flush without a gap to the border? Yes, always flush No, there will be a gap
Yes, always flush
You are developing a Web page, and desire that the hyperlinks italicize as the mouse is over them. Which of these rules will achieve that? This cannot be achieved without JavaScript mouseover { font-style: italic; } a:hover { font-style:italic; } a { font-style: italic; }
a:hover { font-style:italic; }
What does character encoding do? Check all that apply (2 correct answers!). Declaring the encoding of the page: the <meta> tag <meta charset="utf-8"> helps translate page from one language to another acts like a dictionary that helps translate code points into bytes that can be stored in memory. decodes bytes into code points. provides support for search engines to process your HTML documents correctly
acts like a dictionary that helps translate code points into bytes that can be stored in memory.decodes bytes into code points.
There is a flexbox container with three children with identical content. The flexbox container has flex-flow:row; The first child has flex:1 applied to it, the second flex:2, and the third flex:3. 62 - When examined in the browser, which of the following are possible? (select all that apply - 2 correct answers) all three elements are the same width. the first item is wider than the others. the first item is the narrowest and the third item the widest. the first item is much narrower, and the second and third items are the same width.
all three elements are the same width.the first item is the narrowest and the third item the widest.
If you want to embed a video that can be viewed in full screen mode, which attribute would you use? sandbox name allowfullscreen src
allowfullscreen
Which of the following statements are true about block level elements? (select all that apply -- 5 correct answers!) always receive a "new line" when placed. respects all margin properties. defaults to the full width of any parent. ignores the width property. ignores the height property. with absence of any height properties, is vertically sized to accomodate its children. ignores the vertical-align property.
always receive a "new line" when placed.respects all margin properties.defaults to the full width of any parent.with absence of any height properties, is vertically sized to accomodate its children.ignores the vertical-align property.
Examine this HTML and CSS: <p id="physics" class="rainbow">Rainbows result from refraction of sunlight in falling water droplets plus reflection of the light from the back of the droplet.</p> p { color: blue; } html, body { color: black; } 33 - With which color will the paragraph appear? black blue red green
blue - In this case the tag selector for the paragraph is more specific than the inheritable selector
<style> table, th, td { border: 1px solid black; border-spacing: 50px; } table { border-collapse: collapse; } </style> <table> <tr><th>Names</th><th>Age</th></tr> <tr><td>Michael</td><td>21</td></tr> </table> Try the code above in an HTML editor and view the output. The border spacing property is supposed to create a space between two border cells. There should be a 50px space between table border and cell borders and between cell borders. 36 - In this example, that is not the case. Why? table border is not set border-collapse should be set to separate border-spacing should not be specified in pixels There is a syntax error in the code above
border-collapse should be set to separate
Which of the 'calc()' declarations are correct? (select all that apply -- 3 correct answers!) calc 100vh - 80px; calc(100vh - 80px); calc(80px + 120px); calc(75vw * 2);
calc(100vh - 80px);calc(80px + 120px);calc(75vw * 2);
How do you designate an element as a flexbox container? (select all that apply -- 2 correct answers!) display:flex flex:1 display:inline-flex display:block; flex:1
display:flexdisplay:inline-flex
Which of the following combinations are NOT compatible? Which of the following will not work? display:inline; min-width:200px; display:inline-block; max-width:100px; display:block; width:200px;
display:inline; min-width:200px;
<span> should be used anytime you want to make inline changes False True
false
All headings should be used within the header element. False True
false
By specifying the header, body and footer for the table, you can scroll these sections independent of each other. False True
false
Setting the size for an image must always be done using the 'height' and 'width' attributes. False True
false
Since HTML5 ignores white space, a tag can be spelled with spaces in it, i.e. "ht ml" False True
false
The 'mailto:' protocol in the href attribute can validate the email address provided. False True
false
The anchor element is the same as the <link> tag. False True
false
If you want to position an element relative to the browser window (aka the viewport), what position value should you choose? static absolute fixed relative
fixed
There is a flexbox container with three children with identical content. The flexbox container has flex-flow:row; The first child has flex:1 applied to it, the second flex:2, and the third flex:3. 61 - flex:1 is the same as which of the following? flex-basis:1px; flex-grow:1 flex-shrink:1
flex-grow:1
Which of the following is the correct description of the full flex property? flex: <flex-grow> <flex-basis> <flex-shrink> flex: <flex-grow> <flex-shrink> <flex-basis> flex: <flex-shrink> <flex-grow> flex: <flex-grow> <flex-start> <flex-end>
flex: <flex-grow> <flex-shrink> <flex-basis>
Which CSS property lets you adjust the size of the text?
font-size
Which of the following statements are true about an inline element? respect all margins. ignore top and bottom margins. respect width and height properties. are set along the text baseline next to their siblings. always receive a new line. padding makes the item larger. top and bottom padding do not contribute to any line-height calculations.
ignore top and bottom marginsare set along the text baseline next to their siblings.padding makes the item larger.top and bottom padding do not contribute to any line-height calculations.
Which of the following best describes the default display behavior of the <img> element? inline-block inline block
inline-block
Which of the following are acceptable values for the list-style-position property? within inside near outside baseline
insideoutside
A 'ul' element isn't very useful unless it contains what kind of tags?
li
The list items (li) in a unordered list (ul) each have bullet points next to them by default. What is the CSS declaration you would use to remove them?
list-style-type: none;
Which CSS property allows you to control the spacing between html items?
margin
.nicetext { font-style = italic; } 46 - Is the css syntax above correct? Yes No It's not css code It's html code
no
Do the various positioning properties (like left, top, etc.) affect an item that is statically positioned? No Yes
no
Does the CSS in an external CSS file, like css-file.css, need to be surrounded by <style> ... </style> tags? No Yes
no
Will the z-index property work on an item with position:static; ? No Yes
no
can negative padding be used to make an element smaller? No Yes
no
If a parent has been designated as a flexbox container, then what is needed to designate its children as a flexbox items? display:flex nothing. All direct children of a flexbox container are automatically made into flexbox items. position:static flex:1
nothing. All direct children of a flexbox container are automatically made into flexbox items.
<p>The proud-mooded <a href="#wederchief">Wederchief</a> replied to his question, <q>Hardy 'neath helmet: <q><a href="#higelac">Higelac's</a> mates are we; <a href="beowulf">Beowulf</a> hight I. To the bairn of Healfdene, The famous folk-leader, I freely will tell To thy prince my commission, if pleasantly hearing He'll grant we may greet him so gracious to all men </q> </q> </p> 31 - In the HTML above, there are hyperlink tags both in a paragraph and within a nested quote. What CSS selector will select any hyperlink at the top of the paragraph, but not hyperlinks in the quotation?
p > a
If you need to make an element a little larger, which property should you use? padding margin size
padding
Which of the following will result in its element being positioned in the lower right corner of the browser window? position:static; display:block; margin-left:90%; margin-right:0px; margin-top:90%; margin-bottom:0px; position:relative; bottom:0px; right:0px; position:fixed; bottom:0px; right:0px; position:absolute; top:90vh; left:90vw; width:10vh; height:10vw;
position:fixed; bottom:0px; right:0px;
Which of the following attributes is used to provide a placeholder frame before user starts or seeks the video? muted controls poster frame
poster
Which of the following tags default to inline display? (select all that apply - 5 correct answers!) p q blockquote span div h1 a ul ol li i b
q span a i b
Examine this HTML and CSS: <p id="physics" class="rainbow">Rainbows result from refraction of sunlight in falling water droplets plus reflection of the light from the back of the droplet.</p> #physics { color: red; } .rainbow { color: green; } 32 - With which color will the paragraph appear? black (no change) blue red green
red - The id selector (using #) takes precedence over other selectors, regardless of order
Elements that are inline-block are inline elements that behave in some ways like block level elements. What ways are those? (select all that apply -- 3 correct answers!) get a "new line" when placed. respect all margin properties. default to full width of any parent. respect the width and height properties. top and bottom padding contributes to line-height calculation.
respect all margin properties.respect the width and height properties.top and bottom padding contributes to line-height calculation.
What is the default position property that every element has if it is unset? static relative fixed absolute
static
Given: <ol id="student-male" class="primary" start="10"></ol> <ol start="10" class="primary" id="student-male"></ol> 6 - Both tags will give the same output. The order in which the attributes are specified in the opening tag does not matter. True False
true
One of the functions of the 'alt' attribute is to provide information about the image to assistive technologies and search engines. False True
true
What's the best way to ensure that your picture will display correctly? add the 'src' attribute add the 'display' attribute use an image file format commonly supported by browsers change your HTML editor
use an image file format commonly supported by browsers
Which of the following statements correctly describe the default sizing of a block level element? How does a block level element behave when no sizing properties are applied? horizontally sizes to its own content, takes the height of its parent vertically sizes to own content, takes the width of parent sized horizontally and vertically to its content takes height and width of parent
vertically sizes to own content, takes the width of parent
Given: <article id="main-content"> <header> <h2>Tehnology Trends</h2> <h3>The best of tech in 2019</h3> </header> <p>Some cool info about technology...</p> <article id="sub-article"> <header> <h3>Article on technology trends published by XYZ magazine on August 2019</h3> </header> <p>XYZ article content...</p> </article> <p>Some more cool info...</p> </article> 11 - Is the code above valid? Yes No
yes
Will the z-index property work on an item with position:relative; ? Yes No
yes
