Exam 98-383: Introduction to Programming using HTML and CSS/Structure Documents Using HTML

This lesson covers HTML document structure, including content, semantic elements, navigation, and form elements.

Readings

 * 1) Mozilla: Learn HTML
 * 2)  Semantic HTML
 * 3) W3: Labeling Form Controls

Activities

 * 1) W3Schools: HTML Exercises

Construct and analyze markup to structure content and organize data
Includes table tags; h1-h6; p; br; hr; div; span; ul; ol; li.

table
The HTML  element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. The,  , and   elements are required.

Example:

h1-h6
The HTML –  elements represent six levels of section headings. &lt;h1&gt; is the highest section level and &lt;h6&gt; is the lowest.

Example:

p
The HTML  element represents a paragraph of text.

Example:

br
The HTML  (break) element produces a line break in text.

Example:

hr
The HTML  (horizontal rule) element produces a horizontal line between elements. Example:

div
The HTML  element is a generic block-level container for flow content. It has no effect on the content or layout until styled using CSS.

Example:

span
The HTML  element is a generic inline container for phrasing content, which does not inherently represent anything, but may be used for styling or other attributes.

Example:

ul
The HTML  element represents an unordered list of items, typically rendered as a bulleted list.

Example:

ol
The HTML  element represents an ordered list of items, typically rendered as a numbered list.

Example:

li
The HTML  element is used to represent an item in a list. It must be contained in a parent  or   element.

Examples above.

Construct and analyze markup that uses HTML5 semantic elements
Includes semantic tags; header; nav; section; article; aside; footer; details; summary; figure; caption.

Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look.
 * The HTML  element represents introductory content.
 * The HTML  element represents a section of a page whose purpose is to provide navigation links.
 * The HTML  element represents a standalone section, which doesn't have a more specific semantic element to represent it.
 * The HTML  element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable.
 * The HTML  element represents a portion of a document whose content is only indirectly related to the document's main content.
 * The HTML  element represents a footer for its nearest sectioning content or sectioning root element.
 * The HTML  element is used to create a disclosure widget in which information is visible only when the widget is toggled into an "open" state.
 * The HTML  element is used as a summary, caption, or legend for the content of a &lt;details&gt; element.
 * The HTML  element represents self-contained content, frequently with a caption.
 * The HTML  element represents a caption or a legend associated with a figure or an illustration described by the rest of the data of the &lt;figure&gt; element which is its immediate ancestor.

Examples:

Construct and analyze markup that implements navigation
Includes image links; a; target; bookmark; relative versus absolute links; navigating simple folder hierarchies.

img
The HTML  element embeds an image into the document.

Examples:

a
The HTML  element (or anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.

Examples:

target
Specifies where to display the linked URL. It is a name of, or keyword for, a browsing context: a tab, window, or. The following keywords have special meanings:
 * : Load the URL into the same browsing context as the current one. This is the default behavior.
 * : Load the URL into a new browsing context. This is usually a tab, but users can configure browsers to use new windows instead.
 * : Load the URL into the parent browsing context of the current one. If there is no parent, this behaves the same way as _self.
 * : Load the URL into the top-level browsing context (that is, the "highest" browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this behaves the same way as _self.

Example:

bookmark
An element ID preceded by a hash mark (#) specifies an internal target location within the current document or another document.

Example:

Relative and Absolute Links
Relative links are relative to the path of the current page. Absolute links specify a full document location (fully-qualified server name and file path).

Examples:

Construct and analyze markup that uses form elements
Includes form attributes; action; method; submission methods; accessibility; input types and restrictions; select; textarea; button; output; option; datalist; fieldset.

form
The HTML  element represents a document section that contains interactive controls to submit information to a web server.

Example:

action
The form  attribute specifies the URI of the page that will process submitted form information.

Example:

method
The form  attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:
 * post: Corresponds to the HTTP POST method ; form data are included in the body of the form and sent to the server.
 * get: Corresponds to the HTTP GET method; form data are appended to the action attribute URI with a '?' as separator.

Examples:

input types
The HTML  element is used to create interactive controls for web-based forms in order to accept data from the user. Input types include:
 * checkbox: A check box allowing single values to be selected/deselected.
 * color: A control for specifying a color.
 * date: A control for entering a date (year, month, and day, with no time).
 * email: A field for editing an e-mail address.
 * file: A control that lets the user select a file.
 * hidden: A control that is not displayed but whose value is submitted to the server.
 * image: A graphical submit button.
 * number: A control for entering a number.
 * password: A single-line text field whose value is obscured.
 * radio: A radio button, allowing a single value to be selected out of multiple choices.
 * range: A control for entering a number whose exact value is not important.
 * reset: A button that resets the contents of the form to default values.
 * search: A single-line text field for entering search strings.
 * submit: A button that submits the form.
 * tel: A control for entering a telephone number.
 * text: A single-line text field.
 * url: A field for entering a URL.

Examples:

select
The HTML  element represents a control that provides a menu of options.

Examples:

textarea
The HTML  element represents a multi-line plain-text editing control.

Example:

button
The HTML  element represents a clickable button. Button elements are much easier to style than input elements.

Example:

output
The HTML  element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.

Example:

option
The HTML  element is used to define an item contained in a &lt;select&gt;, an &lt;optgroup&gt;, or a &lt;datalist&gt; element.

See examples above for select or below for datalist.

datalist
The HTML  element contains a set of elements that represent the values available for other controls.

Example:

fieldset
The HTML  element is used to group several controls as well as labels within a web form.

Example: