Web Design Test Question Bank
What is the correct ID?
#productlist
The text "See our closeouts on winter shirts" will display on the webpage.
True
1: Text Decoration 2: Font-Weight 3: Font-Style
1: Underline 2: Bold 3: Italic
For each measurement, indicate whether the measurement is relative or absolute. pt
Absolute
You are analyzing a form that sends multiline comments to another page on the Internet.
Set the name attribute of the textarea element.
For each type of link, indicate whether the link is relative or absolute. http://blog.learnkey.com
Absolute
The paragraph will have the Georgia font
False
The following code does not show a scroll bar even though the code indicates as such. Which best explains the reason for this?
There is no height specified for the element
What is the correct answer to make sure the table does not exceed 800 pixels in width?
max-width: 800px
Analyze the following CSS for a webpage. What is the resulting background color of the paragraph element?
Pink
Which HTML tag is used to display a vector-based graphic that is being built on the page (meaning it was not built using another app)?
svg
1: src 2: alt 3: img
1: Defines the location of a picture 2: Used to display text when a picture does not load properly 3: HTML tag used to display a picture
Statement: The background image will tile down the left side of the page
False
The paragraph will have a color of steelblue.
True
You are setting up a hyperlink to an external website. You want that link to open in a new browser tab. Using the drop-down lists, finish the code necessary to create this hyperlink.
<a href="http://gmetrix.com" target="_blank">GMetrix</a>
You have the following folder navigation set up on your web server (look at image). With that knowledge, what would be the proper syntax for displaying an image called shirts1.png from the images folder on a the shirts.html webpage?
<img src="images/shirts1.png" width="100" height="100" alt="shirts1" />
A relative link requires that you use a protocol and server path
False
For each measurement, indicate whether the measurement is relative or absolute. px
Relative
For each type of link, indicate whether the link is relative or absolute. ../styles/main.css
Relative
A "../images" reference means "move up one folder and then down to the images folder
True
The color of the second paragraph will be slateblue
True
The h1 tag will produce the largest-sized text among headings
True
To make an object invisible using CSS, set its visibility property to false.
hidden
Nav: Article: Section: Caption:
1: Used to store both internal and external hyperlinks 2: Used to display a story on a webpage 3: An area consisting of stories of content 4: Used to give a title to a table
Which would be the correct markup for adding closed captioning, using a file called captions, in English, to a video on a webpage?
<track src="captions.vtt" kind="subtitles" srclang="en" label="English">
A canvas tag must be used in order to use an image tag on a webpage
False
Percent and EM are relative measurements and the size of each depends upon its parent
False
The span tag isolates a block of text into its own paragraph.
False
You are using semantic markup to structure a newsletter portion of your website. Using the drop-down lists, choose the appropriate semantic tags that are currently missing from the webpage content.
<aside>Did you know that this is tomato growing season?</aside>
You have a web page with that includes the following HTML code in the <head> section. What color will the text "The new Super Skis are out" be?
maroon
Using the drop-down 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 @ Widgets on Widgets. All rights reserved.
©
You are working on a webpage where the top-level heading needs to have the following settings for all top-level headings:
1: h1 { 2: color: 3: maroon; 4: font-size: 5: 16pt; 6: text-align: 7: center; 8: }
What will be the color of the text in the second paragraph?
Gray
You are building a webpage that you do not want to allow to be translated. What is the line of code that will effectively disable Google Translate for your webpage?
<meta name="google" content="notranslate">
It is safe to assume that if a style works on Microsoft Edge, it will also work in Firefox and Chrome.
False
Arrange the HTML tags listed in order in which they should first appear on a webpage.
1: !DOCTYPE HTML 2: HTML 3: HEAD 4: TITLE 5: BODY 6: P
Mix and match CSS classes to the style text in your HTML document.
1: font-family = Arial 2: font-size = large 3: font-weight = 100 4: font-style = italic
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 drop-down arrows, indicate the proper way to add the text to the code, but not have the text display on the webpage.
<!--We need an image of the gizmo here-->
The color of the first paragraph will be black
False
The heading "Coming Soon" will have a font size of 16 points
False
You have a web page with that includes the following HTML code in the <head> section. What will be the background color of the text "New Items"?
Light Green
The heading color will be maroon
True
Webpages that include style sheets should be tested on multiple browsers
True
A bookmark portion of an href attribute starts with a # symbol
True
A canvas ag can contain artistic text
True
Comments in style sheets start with /* and end with */.
True
Reusing code from one part of a style sheet to another helps to minimize syntax errors.
True
Statement: The background color of the textbox element will be #CCDDEE
True
Statement: The background image size will be the native size of the image
True
The <hr /> tag adds a line to the webpage.
True
You are building a style sheet to use to format most of the pages in a website. You want to make sure the style below applies only to specific paragraphs, not all paragraphs and not toward any other tags. Using the drop-down arrow, indicate the correct selector for the requirements.
p.highlight
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 pixelsWhat is the correct answer to set the width of the table?
width:50%
You are a member of a web development team building a style sheet. You want to indicate to the rest of your team members the hexadecimal color of the color chosen for the body text, but without including that as an actual property. In the blank area, choose the appropriate code to indicate that message to your team
/* indigo is #4B0082 in hexadecimal code */
The text "Shirts on Sale" will display on the webpage.
False
For each type of link, indicate whether the link is relative or absolute. images/shirt1.jpg
Relative
You have a CSS element set up to display the figcaption element with a background color of antiquewhite. However, the background color is running across the entire page even though the caption is not. Using the drop-down arrow, indicate the correct CSS code to only have the background color on the text, not the width of the page.
display: inline;
You have a single block of text named sidebar you want to make sure is positioned on the right side of the page. This is going to be part of an internal style sheet.
#sidebar
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.
<meta name="keywords" content="music, guitar, piano"/>
You are constructing a multimedia webpage. You have a video to add, named shirts2.mp4, with dimesions of 640 x 480, that is in the videos folder. You want to user to be able to play, pause, and rewind the video. Rank the correct pieces.
1: <video src=" 2: videos\shirts2.mp4" 3: width=" 4: 640" 5: height=" 6: 480" 7: controls>
Setting the body element to have a font of Segoe UI will ensure every device that views the website will see that font.
False
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. Using the drop-down arrows, complete the HTML code needed to display the picture and, if necessary, text.
<img src= "images/kazoo.jpg" alt="kazoo">
In this code example, a reference to an external style sheet named main, located in the styles folder, needs to be added. Using the drop-down list, choose the correct syntax for this task.
<link rel="stylesheet" text="type/css" href="styles/main.css"/>
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
A webpage contains the following HTML as shown in the image below. Line 03 will display next to Line 01
True
You are creating an HTML document that displays a list of news articles. The list has the following requirements: Each article must be its own semantic block. Each article must have a headline. Each article must have a section that contains its content. For browsers that support the feature, the content must be hidden until the user clicks to reveal it as shown in the image below. How should you complete the markup?
1: <article> 2: <details> 3: <summary> 4: article headline 5: </summary> 6: <p> 7: this is article content 8: </p> 9: </details> 10: </article>
You are building a webpage with the goal of displaying the company name, Shirts 'R Us, on a browser tab, not on the webpage itself. Rank the tags necessary to accomplish this goal.
1: <html> 2: <head> 3: <title> 4: Shirts 'R Us 5: </title> 6: </head>
You have a 200 x 150 image named shirt1.png, located in the same folder as the webpage on which it will be displayed. You want to use the name of the image as alternative text. Rank the correct tags and attributes.
1: <img 2: src="shirt1.png" 3: width= 4: "200" 5: height: 6: "150" 7: alt= 8: "shirt1"/>
You have an image named shirts3.jpg, in the images folder, that you want to display on a webpage. You also want a tooltip that says "Blue Denim" when a user hovers a mouse over the image. You also want the text "shirts3" to display if the image does not load. Rank the tags below in the correct order.
1: <img src=" 2: images\shirts3.jp3" 3: title= 4: "Blue Denim" 5: alt= 6: "shirts3"/>
You are trying to set up a numbered list of instructions on how to order widgets. The list is set except for the HTML tags needed to define the list. Rank the correct tags to finish the list.
1: <ol> 2: <li> Find the widget you want in the catalog</li> 3: <li>Pick up the phone and call us at (555) 555-5555 to place your order</li> 4: </ol>
You are creating a web page that displays a How-To video. When accessing the video, the user must be able to play, pause, and seek. The filename of the video is HowTo.mp4, and exists in the same folder as the webpage. If the user"™s browser does not support HTML5, the page must display this message: Your browser does not support playing this video. How should you construct the markup? Order correctly the HTML elements below.
1: <video controls> 2: <source src="HowTo.mp4" type="video/mp4"> 3: Your browser does not support playing this video 4: </video>
1: Internal 2: Inline 3: External
1: A sales page needs to have a lightgray background, and, as a result, its text needs to be in dark gray. 2: An address tag at the bottom of a new items page needs to have a color of dark magenta. No other address tags need formatting. 3: The body tag needs to have the Segoe UI font throughout the entire website
1: ID 2: Class 3: Element 4: Pseudo-Class
1: A style indicator used once per webpage. 2: A style indicator used on any HTML tag 3: A style indicator used on a specific HTML tag 4: A style indicator used for a specific behavior
When the webpage loads, there is no way to play the file. What needs to be done in order to give a user an option to play the file? Choose two answers as there are two ways to accomplish this.
1: Add the controls="controls" attribute to the audio tag 2: Add the controls attribute to the audio tag
1: img 2: canvas 3: svg
1: Used to load and display pictures 2: Uses JavaScript to build pixel-based graphics 3: Used to build graphics that will not become pixelated no matter what their size.
You are using CSS to set up colors for a website. A co-worker has put some comments into the stylesheet, requesting certain colors. Match the appropriate color to the areas requested.
1: White #FFFFFF 2: Black #000000 3: Red #FF0000
You are in the process of styling a class that will serve as a format for terms that need definitions. The terms need to look like this: -Maroon -A highlighter pen look of cyan -Italic Rank the tags and attributes correctly. .term {
1: color: 2: maroon; 3: background-color: 4: cyan; 5: font-style: 6: italic; 7: }
As part of building a webpage for ordering shirts, you want to present to a buyer a numbered list of instructions on how to order shirts. The first item is displayed in the code. Rank the necessary HTML tags into the correct spots to build this code.
1: ol 2: li 3: pick out the shirts you like 4: /li 5: /ol
For a single tag, an external style sheet setting overrides an inline style setting.
False
For an image to become a hyperlink, the a tag must go inside the img tag
False
The text "These are 30% off" will display on the webpage.
False
For each measurement, indicate whether the measurement is relative or absolute. em
Relative
You are constructing an external style sheet. You want hyperlinks to turn pink when a user moves the mouse over the link. Using the drop-down arrow, choose the correct selector to accomplish this task.
a:hover
You are in the process of building a style sheet. You want to make sure that paragraphs inside of articles have a beige background. Using the drop-down arrow, choose the correct syntax for the line of code to make this happen.
article>p {background-color: beige;}
Read the following statement about the SVG element and then indicate the correct phrase for the underlined portion of the statement, or, if the statement needs no changes, indicate as such.
no distortion
For each type of link, indicate whether the link is relative or absolute. http://www.learnkey.com/mta_introduction_to_programming_Outline
absolute
A junior web developer is asking you how to add comments to an external style sheet where the file is in draft mode. Which syntax will you tell the developer to use?
/* This is in draft mode */
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. Not every code element will be used.
1: <!DOCTYPE html> 2: <head> 3: <title> Music Store </title> 4: </head> 5: <body> 6: <h1> Welcome to the Music Store </h1> 7: </body>
You are trying to create collapsible content on a webpage. Using the drop-down lists, complete the code so that the Sale Items heading always shows and the sale items are collapsible content.
<summary> Sale items </summary>
You are in the process of building a webpage that should use ISO-8859-1 for an encoding type and a description of "Discount Shirt Site". Rank the correct attributes to accomplish this task.
1: <meta 2: charset="ISO-8859-1> 3: <meta name= 4: "description" content="Discount Shirt Site">
You are designing a webpage for Contoso by using HTML. You need to create content for the head section. Which markup segments should you use? To answer, select all of the tags that applies.
1: <meta charset="UTF-8"> 2: <!DOCTYPE html> 3: <head> 4: <title>About Contoso</title> 5: </head>
Which HTML element will move to a new line without skipping lines?
<br />
You are trying to set a default font color of maroon. Using the drop-down arrow, indicate the correct property and value combination to make this happen.
color: maroon;
You are building a stylesheet that, among other things, will ensure that hyperlinks are not underlined. Using the drop-down list, select the proper code necessary to ensure that any webpage using this stylesheet will not have underlined text for hyperlinks.
text-decoration: none;
A co-worker is trying to set the background image for a website. This co-worker has enlisted your help, telling you the background image is in the images folder and it is an image called pattern.jpg. Using the drop-down list, finish the code example to where the background image is properly set for the website.
url:("images/pattern.jpg")
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 drop-down lists, fill in the missing parts of code to fulfill this need.
<noscript>This browser does not support JavaScript. </noscript>
You are trying to ensure that a webpage views at normat size both for a desktop device and for a mobile device. Rank the tags and attributes necessary to make this happen.
1: <html> 2: <head> 3: <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4: </head
You are in the process of creating a form that will be used to obtain customer contact information. You have two goals: Wrap a box around the fields, and add a field to allow customers to type several lines of comments. Using the drop-down lists, select the correct elements to fulfill these two goals.
<textarea>name="comments" rows= "5" cols = "51" maxlength="255"> </textarea>
You are creating an image link to the clients.html page. When the visitor clicks on the clients.gif graphic, the clients.html page must display in a new window. The graphic must provide text for screen readers and display text while the page is loading.
<a href="clients.html" target="_blank"><img src="clients.gif" alt="clients image></a>
You want to place a caption just below the image you have added to a webpage. Using the drop-down arrow, select the correct tag to add the caption, which should include the text "The Mighty Widget".
<figcaption>The Mighty Widget </figcaption>
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 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>
You are building a style sheet for your website. You want unvisited hyperlinks to be steelblue. You want visited links to be purple. You don't want any links to be underlined. In your brand new style sheet, drag the correct code to satisfy all three requirements into the blank area on the style sheet.
a {text-decoration; none;}