Lesson 2: HTML5 Coding HW
show the tag for fixed spaced font
<code> <kbd> <samp>
show the tag for word definitions
<dfn>
show the tag for emphasis
<em>
What are 6 tags for creating headings? List all 6
<h1> <h2> <h3> <h4> <h5> <h6>
show the tag for strong
<strong></strong>
text-level elements
Elements that can affect something as small as a character or a word are referred to as text-level elements.
heading levels
Heading tags have built-in styles associated with them. For example, text formatted as a heading level 1 element is rendered by default in a large, bold, serif font. The <h1> and </h1> tags cause enclosed text to be rendered in the heading level 1 style; the <h4> and </h4> tags cause enclosed text to be rendered in the heading level 4 style, and so forth.
<html> - define xmlns
If your content needs to conform to XHTML, then specify the XML namespace attribute The default entry is xmlns="http://www.w3.org/1999/xhtml". The <head> tag
block-level elements
Markup elements that affect an entire paragraph or multiple paragraphs are referred to as block-level elements.
fixed-width font
Phrase tags distinguish normal italic text from word definitions or variable program code within the HTML document. Using phrase tags is also beneficial because it is much easier to search for a specific tag within an HTML file instead of searching all italic, fixed-space or bold text.
Show the proper tag nesting in markup language
Proper: <h1> <em> ... </em> </h1> Improper: <h1> <em> ... </h1> </em>
<!DOCTYPE> declaration
The <!DOCTYPE declaration is the first tag in an HTML document. It informs the interpreter (usually a Web browser) what version of HTML the Webpage is written in. Previous to HTML5, the <!DOCTYPE> declaration was an SGML statement and required a fairly complex declaration. In HTML5, however, the tag is written as only <!DOCTYPE html>. The declaration is not case-sensitive, but it is almost always written in uppercase letters by Web developers (it will be uppercase in this course).
<html>
The <html> tag is used as a container for the entire HTML document. It nests all code except for the <!DOCTYPE> declaration.
<link>
The <link> tag references a style sheet and is recommended for HTML5. A style sheet usually has a .css file name extension and a file name similar to the page to which it is linked (e.g., aboutus.css for the HTML page named aboutus.html). Style sheets are often placed in a subdirectory for the Webpage. This subdirectory contains all images and associated files for the page. The <link> tag is placed within the <head> container tags.
<meta>
The <meta> tag can specify various information about the document, known as metadata. This metadata can include a document description, revision dates, and keywords to help search engines index the page. It also specifies the HTML5 character set used, which is usually UTF-8. The <meta> tag is placed within the <head> container tags.
<head>
The head section allows you to insert <meta> tags (which describe the nature of the document), links to style sheets, and the <title> tag.
<body>
This tag begins the body of the document and includes all the content of the Webpage, such as the text, video, hyperlinks and images. The <body> tag is placed after the <head> tag.
<title>
This tag identifies the document title. Most browsers will display the title in the browse's title bar. The <title> tag is placed within the <head> container tags.
Describe a Web Site File Structure
When creating a Webpage, you must consider the site's structure. Your HTML and images will be uploaded to a server eventually, so it is always good practice to organize your files as you create them. Figure 2-2 illustrates a typical Website file structure.
<meta> - content
When paired with the name attribute, the content attribute values can supply keywords, author name, page descriptions and so forth, as previously described. The content attribute essential in search engine optimization purposes. Following are some examples.
How do you create a hidden comment using HTML?
You can hide comments within your HTML source code that will not appear on the page. The syntax for including a comment within your HTML document is as follows: <!-- comment text here -->
Show the tag and describe what an unordered list creates
a bulleted list. Uses the <ul> element and also requires a closing tag. <h2>Unordered List</h2><ul><li>This is the first bulleted item.</li><li>This is the second bulleted item.</li><li>This is the last bulleted item.</li></ul>
Show the tag and describe what an ordered list creates
a numbered list. Uses the <ol> element and requires a closing tag.
<html> - define manifest
an attribute used for offline browsing. It lists the address of the HTML document's cache manifest. The manifest attribute requires each page you want cached to include the attribute. This technique is considered more reliable than a traditional browser cache.
<html> - define lang
configures the page to use a particular language. For instance, a Web document written in English would use <html lang="en"> and a document written in French would use <html lang="fr">. This attribute is helpful for search engines and speech synthesizers. It is a universal attribute that can be used with many different elements besides <html>.
value
gives value to the element and its attribute. For example, <a href="http://www.ciwcertified.com"> has a value that instructs the hyperlink to access the CIW Certified Website. Like attributes, values are optional in a tag unless required by a specified attribute to the element. Values are used only with attributes; elements do not take values directly. Values should be surrounded by quotation marks; they are not required, but placing values in quotation marks is considered good coding practice.
Document Type Declaration
or <!DOCTYPE> declaration, describes the markup language and version of your code. It is placed at the very top of your document.
element
provides the main instruction of the tag
element or markup tag
provides the main instruction of the tag. An _______ is required in every tag. _________ include <body>, <p>, <h1>, <title>, <table> and many others.
attribute
specifies a quality or describes a certain aspect of the element. For example, a hyperlink is added to a Webpage by using the <a>, or anchor, element. The href attribute is added, which identifies the hyperlink reference. Many elements require specified attributes, but some do not. An attribute is required in a tag only if the element requires it.
<meta> - define charset
specifies the character set used in HTML documents (which is often set by the Web server for HTML documents, rather than by the document itself). It usually specifies the Unicode character set, which is standard in today's Webpages:
container tag
tags that come in pairs. _______ tags use starting and ending tags. For example, when you want emphasis (italic) text, you will contain the text between starting and ending <em> </em> tags. These tags are also called the opening and closing tags.
empty tag
tags that stand alone. _______ tags are those that do not directly format a specified block of text, and therefore one tag can execute the instruction. For example, if you want to create a line break, you insert the <br> tag at the point you want the break to occur. __________ are also referred to as self-closing tags.
<meta> - define name
values include "keywords," "description", "robot", "viewport" and "author. " This attribute must be accompanied by the content attribute. The "keywords" value of the name attribute allows you to specify individual words as the value in the accompanying content attribute. The "description" value of the name attribute allows you to specify entire sentences as the value in the accompanying content attribute; these sentences display in search engines to describe the purpose of the document. The "robots" value of the name attribute is used to instruct search engines whether or not to index your page and follow the links on your page. The "viewport" value of the name attribute is used to define the user's visible area on the Webpage. This value allows you to control the dimensions and scaling of the page to optimally display a Webpage on different sized devices.