ITS HTML and CSS Practice Exam 1 Testing - GMetrix
You are trying to build a set of rules for an element named productList that happens to be a table. The rules must be as follows: - The table width will be 50% of the screen width and will adjust based on the screen width. - The table width cannot exceed 800 pixels.
#productList { width: 50%; /* set the width of the table */ max-width: 800px ; /* make sure the table does not exceed 800 pixels in width */ }
You are going to use JavaScript in your webpages. Some people use devices that view your webpages may not support JavaScript. You want to let those members of the audience know that they are on an unsupported browser. Using the dropdown lists, fill in the missing part of the code to fulfill this need.
.box (height: 300px; overflow: auto;}
You are using CSS to set up a box class with a defined height. You want to ensure that, if the amount of text in the box exceeds the box's height, the text displays within a box, and one can scroll to see the rest of the text. However, the scroll bar should only appear if necessary. Using drag and drop, complete the code for the class.
.box (height: 300px; overflow: auto;}
You are a member of a web development team building a style sheet. You want to set, within a feature class, a height that adjusts to the length of a page, but is no taller than 200 pixels.
.feature { .height: auto; .max-height: 200px; }
You are designing a website for an online catalog of containers of all kinds. The company wants new products highlighted with a background color of beige. This color should be a part of a style called newItem that can be applied to any tag at any time.
.newItem {background-color: beige;}
Here is a partial block of code for a webpage. You want to indicate to a fellow developer that an image needs to be added to this webpage, but you don't have the image. Using the dropdown arrow, indicate the proper way to add the text to the code, but not have the text display on the webpage.
<body> <p> Check out our last gizmo. </p> <!-- We need an image of the gizmo here. -->
A webpage is being built to where items need to be listed, one per line, but without skipping lines and without bullet points or numbered lines. Which HTML element will move to a new line without skipping lines?
<br>
You are in the process of creating a form that will be used to obtain customer contact information. The goals for the form are: 1. Have the name next to the radio buttons be selectable to select the radio option. 2. Have a multi-line field for comments. 3. have a submit button with text, Submit, on the button.
<form> Location: <input type="radio" id="North" name="locations" value="North"> <label for="North">North</label> <p>Comments: </p> <textarea> name="comments" rows="5" cols="51" maxlength="255"></textarea> <button>Submit</button> </form>
You are trying to set up list of requirements to install a software package. Teh list is not meant to be in any particular order. The list is set except for the HTML tags needed to define the list.
<h2>System requirements:</h2> <ul> <li>4 GB of RAM </li> <li>20 GB of disk space</li> </ul>
You want to define a banner header with an image inside of a banner.
<header> <figure> <img src="widget1.png" width="300" height="240"> <br> <figcaption> The Mighty Widget </figcaption> </figure> </header>
You are in the final stages of building a website for a music store. As you want search engines to draw attention to your home page, you decide to add some keywords, specifically the keywords music, guitar, and piano. Using the drop-down arrows, select the proper syntax to add these keywords to your website.
<html> <head> <title>The Music Store</title> <meta name="keywords" content="music, guitar, piano" /> </head>
Using the drag and drop, add the attribute necessary to show the text "basketball" if the basketball picture does not load properly.
<img src="basketball.png" alt="basketball" width="100" height="100">
You have an image of a kazoo in the images folder, inside the folder of the current webpage, to display on a webpage. You want to make sure that if for some reason the kazoo does not display, the word kazoo does display.
<img src="images/kazoo.jpg" alt="kazoo">
You have a style sheet named mainstyles.css that you want to attach to the current webpage. Using the dropdown lists, select the correct syntax for adding the style sheet to this webpage.
<link rel="stylesheet" type="text/css" href="mainstyles.css" />
You are setting up a hyperlink to an external website. You want that link to open in a new browser tab.
<p>External Links</p> <a href="http://www.gmetrix.com" target="_blank"> <GMetrix</a>
Using the dropdown arrow, add the code necessary to add a copyright symbol to the second to last line of the code.
<p>You can contact us at (555) 555-5555.</p> This website content is © 2017, Widgets on Widgets. All rights reserved.
You are using descriptive markup to structure a newsletter portion of your website. The main news area is one of many section of the webpage. The line about the farmer's market hours is a main story in the main news area. The line about the tomato growing season is a side note to the main story.
<section> Main News <article> Today, the farmer's market will take place from 9 a.m. to 3 p.m. in the fountain area.</article> <aside>Did you know that this is tomato growing season?</aside> <article> Next week, the farmer's market will have a special 8 a.m. start time.</article> </section>
To set the hyperlinks to not be underlined, the text-decoration property needs to be for none for all "a" tags. To set regular, unvisited links to be steelblue, the a:link color property needs to be set to steelblue (you can do this with the "a" tag as well, but you will want to be aware that a:link is a legitimate pseudo-class). To set visited links to orange, the a:visited color property needs to be set to orange.
<style> a {text-decoration: none;} a:link {color: steelblue;} a:visited {color: orange;} </style>
A webpage for a clothing store needs a table built to display the times the store open. The finished table should look like this: M-F10 a.m. to 7 p.m.
<table> <tr> <td>M-F/td> <td>10 a.m. to 7 p.m.</td> </tr> </table>
A developer needs to ensure that a website has two style sheets: one for screens wider than 640 pixels and one for screens 640 pixels wide or less. Which line of code should the developer use for the style sheet with the smaller screen width?
@media only screen and (max-width: 640 px)
You are setting up a style sheet for a website. You want to use a background image named pattern.jpg unless someone is viewing your website on a screen with 640 pixels of width or less, which, in that case, you want the background to simply be a white color.
@media only screen and (max-width:640px){
You have the following HTML code on your webpage: <audio> <source src="welcome.mp3" type="audio/mp3" /> </audio> When the webpage loads, there is no way to play the files. What needs to be done in order to give a user an option to play the files? Choose two answers as there are two ways to accomplish this. (Choose two)
Add the controls attribute to the audio tag Add the controls="controls" attributer to the audio tag
text-align margin: auto align-items
Aligns text within an element- text-align Center aligns items with a <div> tag- margin: auto Aligns content within a flexible layout- align-items
A web developer wants to show shades of blue for a potential background for a webpage. Using drag and drop, match the hexadecimal colors with the shade of blue that will show if the color is used.
Blue - #0000FF Light Blue - #9999FF Dark Blue - #000088
Using the drag and drop, match the following CSS properties with a value for that property.
Bold - font-weight Italic - font-style Underline - text-decoration
A new web designer want to make sure there is a good color contrast between text and its background. Which measurement, according to the Web Content Accessibility Guidelines, determines the amount of contrast between two colors on a webpage?
Contrast ratio
Hyperlinks are defined through a href reference inside an <a> tag. The <area> tag is used to define clickable areas of a map. The <map> tag is used in conjunction with latitude and longitude.
Hyperlinks are defined through a href reference inside an <a> tag. - YES The <area> tag is used to define clickable areas of a map. - YES The <map> tag is used in conjunction with latitude and longitude. - NO
You are building the home page of a brand new website that will showcase a music store. The text "Music store" should display on a browser tab, and the text "Welcome to the Music Store" should display in the browser as a heading. Using drag and drop, drag in order the markup of the webpage into the correct order. Not every code element will be used.
Line 1 - <!DOCTYPE html> Line 2 - <head> Line 3 - <title> Music Store </title> Line 4 - </head> Line 5 - <body> Line 6 - <h1>Welcome to the Music Store</h1> Line 7 - </body>
You have a video, called blues, that is available in two formats: mp4 and mov. The mp4 video should play if the browser supports it. The mov video should only play if the mp4 format is not supported. A user should be able to play the video when pressing a play button. Using the drag and drop, place the code lines used to display this video in the correct order. Not every line of code will be used.
Line 1 - <video height="480" controls="controls"> Line 2 - <source src="blues.mp4" type="video/mp4" / > Line 3 - <source src="blues.mov" type="video/quicktime /> Line 4 - </video>
A new developer wants to know which form submission method should be used to allow customers to update their information via a form. Which form submission method will you tell the developer to use?
POST
You are training a new web developer on positioning elements using CSS. Using drag and drop, match each CSS positioning attribute with how that attribute affects the positioning of an element on a webpage.
Relative - Relative to its normal position on a webpage. Absolute - Relative to the document body, unless placed inside another element. Fixed - Relative to the viewport.
For each statement regarding best practices on creating style sheets using CSS, select Yes if the statement is true and No if the statement is false.
Reusing code from one part of a style sheet to another helps to minimize syntax errors - YES Setting the body element to have a font of Segoe UI will ensure every device that views the website will see that font. - NO Web pages that include style sheets should be tested on multiple browsers. - YES
External Inline Internal
The body tag needs to have the Segoe UI font throughout the entire website. - External An address tag at the bottom of a new items page needs to have the color of dark magenta. No other address tags need formatting. - Inline A sales page needs to have a light gray background, and, as a result, its text needs to be in dark gray. - Internal
<body> <h1><b><i>Recent Highlights</h1></b></i> <p>Insert recent highlights here</p> <p> First highlight goes here: <br /> </p> </body>
The closing tags </h1> </b> </i> are in the wrong order.
For each of these statements regarding HTML tags, select Yes if the statement is true and select No if the statement is false, keeping gin mind the default settings for these HTML tag (in other words, no CSS has been applied).
The h1 tag will produce the largest-sized text among headings. - YES The hr tag adds a line to the webpage. - YES The span tag isolates a block of text into its own paragraph. - NO
You have created an external style sheet called main.css with the following code: body {color: steelblue; font-size: 12pt;} p {font-family: Tahoma, Arial, san-serif;} h2 {font-family: Georgia, serif; font-size: 16pt;} You have a webpage with the following HTML code: <html> <head> <link rel="stylesheet" type="type/css" href="main.css" /> <title>Coming Soon</title> </head> <body style="font-family: Georgia, san-serif;"> <h2 style="color: orange; font-size: 18pt;">Coming soon!</h2> <p>Watch this ar
The heading "Coming Soon" will have a font size of 16 points.- NO The paragraph will have a color of steelblue.- YES The paragraph will have the Georgia font.- NO
You have a webpage with that includes the following HTML code in the <head> section: <style> p {color: maroon; font-size:12px;} .highlight {color: darkgreen; background-color: lightgreen;} </style> The <body> section includes the following: <p class="highlight">New items</p> <p style="background-color: pink;">The new Super Skis are out! </p> <p>Call us for pricing</p>
What will the text "The new Super Skis are out!" be? - maroon. What will the background color of the text "New items" be? - light green.
You are in the process of building a style sheet. You want to make sure that paragraphs inside the articles have a beige background.
article > p {background-color: beige;}
You have a background image you have added to a style sheet. You want the image to display repeatedly down the left-hand side of the page.
body {background-image: url:(kazoo.jpg); background-repeat: repeat-y;}
You have a CSS element set up to display the figcaption with a background color of antiquewhite. However, the background color running across the entire page even though the caption is not. You also have a CSS class named headerhighlight that should have a slateblue background color for its text that displays across the entire page no matter the amount of text within a block to where this class is applied.
figcaption (color: darkgreen; background-color: antiquewhite; display: inline;} .headerhighlight {display: block;}
A marketing department wants the following formatting for their second-level headings: 1. A font of Times New Roman or default serif font. 2. The text in small capital letters. 3. A line height of 18 points.
h2 { font-family: "Times New Roman", serif; font-variant: small-caps; line-height: 18pt; }
An area consisting of stories of content. Used to display a story on a webpage. Used to give a title to a table. Used to store both internal and external links.
section article caption nav