HTML Lesson 2
an empty tag
Consider the following line from an HTML document: Site Development Associate<br> This code shows an example of:
Which HTML tag type consists of a pair of opening and closing tags?
Container tags
Vaildated
If a Web page adheres to the specifications perfectly.
To reference a style sheet for the page
the <link> tag in the <head> section of your HTML document is ued to connect to this
<!DOCTYPE html>
the doctype for HTML 5; if you do not include it, the page will not validate
The opening <html> and closing </html> tags
the tags where all HTML code for a document reside
In the following markup example, what is the information between the quote marks? <a href="http://www.example.com">This is a link.</a>
the value
MP4, OGG, H.264, WebM
types of HTML 5 video sources
OGG, MP3, WAV
types of HTML5 audio sources
deprecation
"Removing elements from the list of available HTML elements" Browsers no longer support
attribute
"are modifiers of HTML elements that provide additional information
You are modifying a Web page to include product photos. What element that specifies the type of image file you're adding, and has the ability to display multiple images side by side?
<figure>
Which of the following is an example of correct HTML tag nesting?
<h1><em> Site Development Associate </em></h1>
Use this tag if you want to highlight parts of your text.
<mark> </mark>
Where is the slash ( / ) character placed in a stand-alone non-empty HTML tag?
After the element name (before the closing wicket)
Which of the following is required in an HTML tag?
An element
Why should you avoid placing paragraph breaks around heading styles in your HTML code?
Because heading styles are automatically preceded and followed by paragraph breaks
video element
Enables you to incorporate videos in HTML documents using minimal code.
a container tag
Good coding practice requires you to use these. This is an example of the type of tag. <title> Site Development Associate </title>
When creating your Web pages, you should consider the site's structure because your files will be uploaded to a server eventually. How are Web site files typically structured?
HTML pages are placed in a directory, and all images and files used in that page are stored in subfolders with the same name.
Which HTML heading style renders text the same size as normal text?
Heading level 4
raster image
Is made up of pixels.
figcaption element
It adds a caption to an image (or group of images) on a web page, and you can display the caption before or after the image.
tags
Keywords that help to give an HTML page structure.
Headings
Largest is 1, smallest is 6; size 4 renders text the same size as normal text Heading always add a paragraph break before and after the line of text
How many heading styles are defined for HTML?
Six
Between which tags must all HTML code for a document reside?
The opening <html> and closing </html> tags
What happens when you place text between the <!-- and --> tags in your HTML source code?
The text will be "commented out" and will not appear on the Web page.
nesting
To place one element inside another.
For what should you use the <link> tag in the <head> section of your HTML document?
To reference a style sheet for the page
the radius
What does the r attribute control? <svg id="svgpurpball" height="200" xmlns="http://www.w3.org/2000/svg"> <circle id="purpball" cx="40" cy="40" r="40" fill="purple" /> </svg>
attribute
What is color in h1 {color:red}?
value
What is red in h1{color:red}?
displays a fallback image if canvas is not supported
What is the purpose of the img src construct in the following canvas code snippet? <canvas id="smlRectangle" height="100" width="200"> <img src="http://www.example.com/images/smlRectangle.jpg" alt="A blue rectangle" /> </canvas>
context.strokeRect
What part of the following code creates the outline without a fill color? context.strokeStyle = "red"; context.strokeRect(10,20,200,100);
getElementById
Which JavaScript method do you use to create the shape? (The method name would replace the word METHOD in the following code.) <script> function f1() { var canvas = document.METHOD("smlRectangle"); context = canvas.getContext("2d"); context.fillStyle = "rgb(0,0,255)"; context.fillRect(10, 20, 200, 100); } </script>
What will happen if you neglect to include a <!DOCTYPE> tag in your HTML document?
Your page will not validate with a markup validator.
Consider the following line from an HTML document: <title> Site Development Associate </title> This code shows an example of:
a container tag.
The <br/> tag defines:
a line break.
The opening <p> and closing </p> tags define:
a paragraph.
Consider the following line from an HTML document: <title/> Site Development Associate This code shows an example of:
a stand-alone non-empty tag
Good coding practice requires you to use:
container tags.
The opening <body> and closing </body> tags encompass:
all content to be displayed on the page through the user agent.
global attribute
can use with any HTML5 element for example: id, lang, and class.
<b>
defines bold text-not necessarily important
<i>
defines italic text - not necessarily with special meaning
<mark> </mark>
defines marked text. Use the this tag if you want to highlight parts of your text.
<strong>
defines text that is both bold and important. Gives a heavier weight than bold
<em>
defines text that is italics and has special meaning
points= attribute
defines the x and y coordinates for each corner of a shape
<applet> <acronym> <font>
deprecated html 5 tags
vector images
maintain quality even when enlarged.
The smallest unit that a text-level element can affect is:
one character.
element
required in all HTML tags
Scalable Vector Graphics (SVG)
"enables you to create scalable objects that resize to best fit the screen on which they're viewed." Loads into the DOM
audio element
"enables you to incorporate audio, such as music and other sounds, in HTML documents
compression
"reduces the amount of space needed to store a file, and it reduces the bandwidth needed to transmit the file."
video compression
"reduces the size of video images while retaining the highest quality video with the minimum bit rate."
<time datetime="2014-11">
Creates a time stamp that displays "November 2014"
With which of the following should you specify the text that will appear when your Web page is bookmarked or added to a browser's Favorites folder?
The <title> tag
the CSS background-color property
applies a color to the entire background, goes in the <body> tag
HTML tags
are not case-sensitive but should always be typed in lowercase letters.
HTML tags:
are not case-sensitive but should always be typed in lowercase letters.
autoplay, control, loop
attributes that can be added to audio and video tags
<command>
A new HTML5 tag; creates a button that users click to invoke a command
This element can be used to encode dates and times in a machine-readable way so that user agents can offer to add birthday reminders or scheduled events to the user's calendar, and search engines can produce smarter search results.
<time> or <<time datetime="2008-02-14 20:00"> *Note: <time> requires a closing tag </time>
render
It interprets and reproduces the content on the page.
Which of the following specifies the markup language and version used by your HTML file?
The <!DOCTYPE html> tag
Text surrounded by the <b> and <strong> tags both result in bold text. How do the tags differ?
The <b> element applies the bold font style, whereas <strong> applies a heavier weight to the text relative to the surrounding text.
A character set is the group of symbols used to render text on a page. In which of the following should you specify the character set for an HTML document?
The <meta> tag
onsider the following HTML code: <h1>CIW Site Development Associate Skills </h1> <ul> <li>Project Management</li> <li>HTML Coding</li> <li>GUI Authoring</li> </ul> Which of the following statements about this code is true?
The line breaks between elements make the code easy to read, which is considered good coding practice.
You are creating a Web page and want to apply a light blue color to the entire background. What CSS property should you use?
Use the CSS background-color property
<!-- and -->
Used to comment out portions of your code; browser will ignore it
After the element name (before the closing wicket)
Where is the slash ( / ) character placed in a stand-alone non-empty HTML tag?
In the following markup example, what is href? <a href="http://www.example.com">This is a link.</a>
an attribute
HTML markup tags consist of these three parts:
an element, an attribute and a value.
Consider the following line from an HTML document: Site Development Associate<br> This code shows an example of:
an empty tag.
A block-level element is a markup element that affects at least:
an entire paragraph.
figure element
groups pictures and captions into one element. Allows them to be placed side-by-side
doctype
is a declaration that is found at the very top of almost every HTML document. This tells the browser how to display the code. If you do not include it in your source code, the page will not validate
Character entity
is a special character, such as the dollar symbol, the registered trademark (a capital R within a circle), and accented letters. Any symbol UTF-8 doesn't display
canvas element
is new in HTML5 and creates a container for graphics, and uses javascript to draw the graphics dynamically. Works like MS Paint
The line breaks between elements make the code easy to read, which is considered good coding practice.
onsider the following HTML code: <h1>CIW Site Development Associate Skills </h1> <ul> <li>Project Management</li> <li>HTML Coding</li> <li>GUI Authoring</li> </ul> Which of the following statements about this code is true?
What does the following code create? <menu label="Music Genre"> <command type="radio" radiogroup="musicgenre" label="Art"> <command type="radio" radiogroup="musicgenre" label="Popular"> <command type="radio" radiogroup="musicgenre" label="Traditional">
radio buttons
<video poster="picture.jpg">
shows a picture while the video is downloading
<title></title>
specifies the text that will appear when your web page is bookmarked; adds the text to the tab in the browser
codec
technology for compressing video data
Tags that format text as bold or italic are known as:
text-level elements.
empty tag
they don't require an end tag.