HTML/CSS - Updated for 2023-2024
that tests a user's ability to remember a list of ordered items in a particular category. The page must contain a heading that displays the category and a list of items.
h1 h1 ol ol p p
You are designing a website for Margie's Travel. The website uses external stylesheets. You need to create a style that centers all h1 elements on the page. How should you complete the code? ____{ ____ ____ ____ __
h1{ text-align: center; .h1 =
which code segment correctly sets the background to an image that is sized to fill the entire background?
#div1 { background: url(flower.jpg); background-size: cover; }
You are building a website and want to have three links called home, Product title, and Contact us. Which sector should you use?
.main
You are creating an HTML page for your company. You need to include a comment that specifies the revision number and date.
/* */
We need to have our navigation, then state our purpose, include a picture then our $ back policy followed by a footer. How should the code be displayed to make that happen?
1. <nav> 2. <article> followed by Our Purpose 3. <article> followed by <figure> and the image 4. <article> with Our $back Guarantee 5. <footer>
You are designing a web page for your company. The page must be responsive so that it can be viewed on desktop browsers & mobile devices.
1. SmallLogo.png 2. max-width 3. NormalLogo.png (IN ORDER)
You are designing a webpage for Dogsrus by using HTML. You need to create content for the head section. Which four markup segments should you use?
<!DOCTYPE html> <head> <title> About Dog R Us </title> <head/>
What text will be displayed as a tool tip
Carnations
Pixels are recommended unit for specifying size.
False
The font family attribute helps ensure maximum compatibility between web browsers.
False
Percent and EM are relative measurements and the size of each depends upon its parent.
False Em allow users to resize the text. 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of1em is 16px.
What text will be displayed as the image loads?
Flowers
Where must the image file be located?
In the root folder of the website
You are analyzing the following CSS for an element on a page: background: #0000FF url("Watermark.png") repeat-x right The background of the page will be red.
No
Analyze the following CSS for a webpage: <!Doctype html> <html> <head> <style> p{ background-color: blue; } .light{ background-color: yellow; } .light p{ background-color: green; } </style> </head> <body> <div class="light" style= "background-color: pink"> <p>This is some sample text </p> </div> </body> </html> What is the resulting background color of the paragraph element?
Pink
what is the default value of the css position property
Static Value
Given the internal Style sheet and inline style, which statement is true?
The text "First Paragraph" will display red and underlined
A CSS comment starts with /* and ends with */.
True
Grid layouts are created by setting the width property to pixels
True
You can link to a document in the subdirectory of the current webpage by specifying only the subdirectory name and the filename
True
You can use a relative link to reference images files from a repository on a different server
True
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>
What is NOT true about a relative link?
requires that you use a protocol and server path
Which code shows the correct way to nest tags in HTML5?
D. <p>This is HTML5<b><i>text formatting</i></b></p>
Match the descriptions on the right.
Element appears in the order in which it is placed in the document flow (static) Element is positioned relative to the first positioned ancestor (inherit) Element is positioned relative to the browser window (relative) Element is positioned based on its parent element's position (absolute)
Viewport settings are added to the <style> element
False
The external stylesheet named mystyles.css contains the following three rules: h1 {color: blue;} h2 {color: purple;} p {color: grey;} The head section contains the following markup: <link rel="stylesheet" type="text/css" href="mystyles.css"> <style> h1 {color: maroon;} h2 {color: blue;} p {color: black;} </style> The following elements appear in the body of the webpage: <h1 style= "color: black;"> AdventureWorks Presents /h1> <h2>Rock Climbing 101</h2> <p style= "color: blue;">Coming soon!</p> <h1>Awards</h1> <p>Certificates will be awarded in June.</p> Select Yes if true. Otherwise, select No.
"Certificates will be awarded in June" Is displayed in grey. No." Coming Soon!" is displayed in blue. Yes ."Awards" is displayed in maroon. Yes ."Rock Climbing 101" is displayed in purple. No.
You are building a website to have three main links called Home, Product Info, and Contact Us. You will create a hierarchy of page elements and revise the stylesheets. You want to apply a style to all elements in a document. Which type selector should you use?
*
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. If the user's browser does not support HTML5, the page must display the message: Your browser does no support playing this video.
1. Video controls 2. <source src="HowTo.mp4" type="video/mp4"> 3. Your browser does not support playing this video 4. video
You are creating a website for Northwind Traders appear on the browser tab. There will also be a paragraph that greets users to the site. You need to crate the structure of the website. In which order should you arrange the markup segments to develop the solution?
<!DOCTYPE html> <html> <head> <title>Northwind Traders</title> </head> <body> <p>Welcome to the Northwind Traders website.</p> </body> </html>
You are creating a home page for CompanyPro. You need to determine which HTML elements will create a simple web page.
<!DOCTYPE html> <html> <title>CompanyPro</title> <head> <title>CompanyPro</title> </html> </head>
You are creating a simple HTML page that displays the text, Hello World. You must ensure that the markup is well-formed and conforms to industry best practices. How should you construct the page? <____> <____> <____> Hello World </____> </____>
<DOCTYPE html!> <html> <body> Hello World </body> </html>
You are designing a web page that is divided into several sections. Each section has a heading and a one-line quote. Complete the markup by selecting the correct option from each drop-down list.
<div> <h1> </h1> <p> </p> </div>
You need to create a page that displays the text hello! according to the following requirements Red text 90% transparency 45-pixel font size
<html> <style> p{color: red; opacity: 0.1; font-size: 45px;} </style> <body> <p>Hello!</p> </body> </html> AND <html> <body> <p style="color: #FF0000; opacity: 0.1; font-size: 45px; ">Hello!</P> </body> </html>
You need to display for different screen sizes
<image> source source img src </image>
You are creating a page on your business website to display your company photo. You need to make sure that browsers display the text company photo before the photo is downloaded. How should you write the markup?<____ ____= "photo.png" ____=<"Company
<img src="photo.png" alt=<"Company
Which HTML5 code fragment shows a way to validate numeric input as having a value from 1 to 100, inclusive?
<input type="number" min="1" max="100">
Which code shows the correct way to nest tags in HTML5?
<p>This is HTML5<strong><em>text formatting</em></strong></p>
For each markup segment, select true if the HTML element belong in the head block, or False if it does not
<style> h1 {color:red;} </style> (true) <title>Contact Information</title> (true) <link rel="stylesheet" href="default.css"/> (true) <h1>Welcome</h1> (False) <!DOCTYPE html> (False)
Static positioning places an element at specific coordinates relative to the page or the element's container. Review the underlined text. If it makes the statement correct, select "No change is needed." If the statement is incorrect, select the answer choice that makes the statement correct. A. No change is needed B. Absolute positioning C. Relative positioning D. Fixed positioning
C
You are reviewing a stylesheet created be a member of your team. The stylesheet includes a style that is defined as follows: .product { color: #000000; background-color: #00FF00; } You apply the productBox style to a <div> The <div> will be displayed with white text on a green background. Review the underlined text. If it makes the statement correct, select "No change is needed." If the statement is incorrect, select the answer choice that makes the statement correct A. No change is needed. B. white text on a red background. C. black text on a green background. D. black text on a blue background.
C
You are designing a webpage for your company. The page must be responsive so that it can be viewed on both mobile and desktop browsers.
SmallLogo.png 768px NormalLogo.png
You are designing a webpage for your company. The page must be responsive so that it can be viewed on both mobile and desktop browsers. On mobile browsers, or those with a screen width of less than 768 pixels you want to display a welcome background image named SmalLogo.png. On all other browsers, you want to display a welcome background image named NormalLogo.png. How should you complete the code? .welcome { background-image: url ( ____); } @media only screen and ( ___768px) { .welcome { Background-image: url (___);
SmallLogo.png max-width NormalLogo.png
The HTML validator has identified a problem in the segment of code shown below. (Code is placed here, not provided, states with <!Doctype html>, ends with </html>) What is the problem with the HTML code segment?
The body element is in the wrong location.
You are designing a website for Dogs R Us You write the following markup. <! DOCTYPE html> <html> <head> <title>Dogs R Us</title> </head> <body> <p>Welcome to Dogs R Us</p> </body> </html> What style will be used to render the code?
The browser default style will be used.
Media queries are used to create breakpoints
True
A webpage contains the following HTML: 01 <div style= "position: relative; display: inline:">Welcome!</div> 02 <div style = "position: relative; display: inline;"> 03 How is the Internet different from the Web? 04 <img src= "icon.jpg" alt= "TCP/IP icon" style= "float: left; height: 20px;" </ img> 05 <p> The Internet is a network of networks, defined by the TCP/IP standards </p > 06 <p> The Web is an information space. </ p> 07 </div> Line 03 will display next to Line 01.
Yes
A webpage contains the following HTML: 01 <div style= "position: relative; display: inline:">Welcome!</div> 02 <div style = "position: relative; display: inline;"> 03 How is the Internet different from the Web? 04 <img src= "icon.jpg" alt= "TCP/IP icon" style= "float: left; height: 20px;" </ img> 05 <p> The Internet is a network of networks, defined by the TCP/IP standards </p > 06 <p> The Web is an information space. </ p> 07 </div> Line 05 and 06 display beneath the image.
Yes
A webpage contains the following HTML: 01 <div style= "position: relative; display: inline:">Welcome!</div> 02 <div style = "position: relative; display: inline;"> 03 How is the Internet different from the Web? 04 <img src= "icon.jpg" alt= "TCP/IP icon" style= "float: left; height: 20px;" </ img> 05 <p> The Internet is a network of networks, defined by the TCP/IP standards </p > 06 <p> The Web is an information space. </ p> 07 </div> The image will display beneath the text on Line 03
Yes
What is true about absolute links?
a hyperlink containing a full URL, (need absolutely everything) which includes all the information needed to find a particular site, page or document or other addressable items on the Internet.
You want to complete the pseudo class for link elements so that the links appear red when the page loads, green when the link is clicked, orange when the cursor moves over the link, and blue if the link was clicked previously.How should you complete the code?
a: link {;color: red} a: visited {;color: blue} a: hover {;color: orange} a: active {;color: green}
You want to complete the pseudo class for link elements so that the links appear red when the page loads, green when the link is clicked, orange when the cursor moves over the link, and blue if the link was clicked previously.
a:link (color: red;) a:visited (color: blue;) a:hover (color: orange;) a:active (color: green;)
What is the correct syntax to change the font color of a visited link to magenta?
a:visited{ color: magenta; }
You need to apply a thick, double red border with 20px rounded corners to heading 1 text
border: thick double red (or 2px double red) border-radius: 20px;
You are creating an About Us webpage for Northwind Traders. You want to complete the CSS rule set to display the paragraph as shown in the following example: Northwind Traders is a specially foods import-export company. We import the finest foods from around the world. (blue text, italic) How should you complete the code? <style> p {____:#000ff; ____: 50px; ____: 1.5em; ____: italic;
color line-height font-size font-style
You need to create a stylesheet that will cause all h1 header text to appear in blue, using the Arial font with a size of 20 pixels. The text should always be bold and center-aligned. How should you complete the code? h1 { ____ blue; ____ arial; ____ 20px; ____ bold; ____center;
color: font-family: font-size: font-weight: text-align:
You are creating a home page for We Ship Air. The page will use JavaScript. If a browser does not support JavaScript, the following message must be displayed: Your browser does not support JavaScript! For the We Ship Air home page, match the metadata element to the content or attribute-value pair. href= "style.css" src="_js/form.js" We Ship Air Your browser does not support JavaScript!
href= "style.css" <base> src="_js/form.js" script > We Ship Airlines <title> Your browser does not support JavaScript! <no script>
Choose the correct example of how you format an absolute link:
https:/ /www.dogrus.com/pets.html
You are designing a webpage for your company. You want to display an image named contoso.png on the page. If the user's Internet connection is slow, or if the user is visually impaired, you want the text Contoso Logo to be displayed or read aloud. How should you complete the markup? <____ ____ ="contoso.png" ____= "Contoso"
img src alt
You need to display an image of an HTML5 logo in one of your webpages. If the page renders slowly, the text "HTML Icon" should display as the image loads. How should you complete the markup? ____ ____ ="html115.gif" ____ "HTML5
img src alt
You need to display an image of an TML5 logo on one of your web pages. If the page renders slowly, the text "HTML4 icon" should display as the image loads.
img src alt size
Which CSS code fragment centers an image horizontally?
img.center { display: block; margin-left: auto; margin-right: auto; }
You define the following styles in a style block: <style> #style1 { color: red; font-size:30px; } #style2 { color: blue; font-size: 40px; } #style3 { color: green font-size: 20px } </style> You write the following HTML: 01 <body style= "color: purple; font-size: 10px;"> 02 <p id= "style1">Fasten your seat belt< /p> 03 <p>Look both ways before pulling out< /p> 04 <p id= "style3" style= "color: red;"> Watch your speed< /p> 05 <p style= "color: green; font-size: 20px; " >Be ready to stop. < /p> 06 <p style= "color: red;">Study the rules of the road. </p> 07 <p style= "font-size: 30px">You'll be driving in no time. </p> 08 < /body> Line 02 displays text in which font size?
pixels 30
Which attribute prefills a default value for an input element in HTML5?
placeholder
You define the following styles in a style block: <style> #style1 { color: red; font-size:30px; } #style2 { color: blue; font-size: 40px; } #style3 { color: green font-size: 20px } </style> You write the following HTML: 01 <body style= "color: purple; font-size: 10px;"> 02 <p id= "style1">Fasten your seat belt< /p> 03 <p>Look both ways before pulling out< /p> 04 <p id= "style3" style= "color: red;"> Watch your speed< /p> 05 <p style= "color: green; font-size: 20px; " >Be ready to stop. < /p> 06 <p style= "color: red;">Study the rules of the road. </p> 07 <p style= "font-size: 30px">You'll be driving in no time. </p> 08 < /body> Line 03 displays text in which color?
purple
You define the following styles in a style block: <style> #style1 { color: red; font-size:30px; } #style2 { color: blue; font-size: 40px; } #style3 { color: green font-size: 20px } </style> You write the following HTML: 01 <body style= "color: purple; font-size: 10px;"> 02 <p id= "style1">Fasten your seat belt< /p> 03 <p>Look both ways before pulling out< /p> 04 <p id= "style3" style= "color: red;"> Watch your speed< /p> 05 <p style= "color: green; font-size: 20px; " >Be ready to stop. < /p> 06 <p style= "color: red;">Study the rules of the road. </p> 07 <p style= "font-size: 30px">You'll be driving in no time. </p> 08 < /body> Line 02 displays text in which color?
red
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 file name 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? <____ ____ ____ </ ____
video controls <source src= "HowTo. mp4" type= "video/mp4"> Your browser does not support playing this video video
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 file name of the video is HowTo.mp, and it exists in the same folder as the web page.
video controls <source src="HowTo.mp4" type="video/mp4"> Your browser does not support playing this video. video
You are analyzing the following CSS for an element on a page: background: #0000FF url("Watermark.png") repeat-x right The page will display the watermark multiple times horizontally starting at the right.
yes
