Zu370 Unit03 Script

ZU370 Unit 3 Transcript
Slide 1
HTML5 Features
© Copyright IBM Corporation 2012

Course materials may not be reproduced in whole or in part without the prior written permission of IBM. 7.0
HTML5 features

Course materials may not be reproduced in whole or in part without the prior written permission of IBM.
Slide 2
Unit objectives
After completing this unit, you should be able to:
• List new elements in HTML5
• Describe HTML5 structural elements
– section, article, header, footer, figure, figcaption
• Describe the attributes of the HTML5 input element
– input type attributes tel, email, datetime, number, range, color
This unit covers the new structural and form features of HTML5.
There is also a hands-on lab exercise available to reinforce the concepts that are presented
in this unit.
After completing this unit, you should be able to:
 List new elements in HTML5
 Describe HTML5 structural elements - section, article, header, footer, figure, and
figurecaption
 Describe the attributes of the HTML5 input element - tel, email, datetime,
number, range, and color

Slide 3
Topics
• New HTML5 tags
• HTML5 structural elements
• HTML5 input elements and data attributes
The list the topics in this unit are shown here.

Topic 1. - New HTML5 tags.

Slide 4
New HTML5 tags

Topic 1: New HTML5 tags.

In this topic, you see a table with the new HTML5 tags. This table provides you with a first look at
the elements that are new in HTML5.

Slide 5
New tags in HTML5 (1 of 2)

Tag Description
<article> Content from an external source - news article, blog, or forum
<aside> Content aside from the page content
<audio> Used to embed sound content
<canvas> Used to draw graphics
<datalist> Provides a list of predefined options for input controls
<details> Used to show or hide contents
<embed> Embeds an external application or interactive content into page
<figcaption> Caption for the figure tag
<figure> Specifies self-contained content
<footer> The footer of a document or section
<header> Specifies a group of introductory or navigational elements
<keygen> Specifies a key-pair generator field used in forms
There are many elements that are introduced in HTML5. The table shows some of the new
HTML5 elements. Notice that the new HTML5 element tags have intuitive names, such as audio
that is used to embed sound content, and canvas that is used for graphical content. Not all of
these new element tags are covered in the lecture unit, so take a moment to read through the
table.

Slide 6
New tags in HTML5 (2 of 2)

Tag Description
<mark> Represents highlighted text
<meter> Used for measurements with minimum and maximum values
<nav> Specifies navigation for a document
<output> Represents the result of a calculation
<progress> Specifies the state of work in progress
<section> Defines sections in a document or article
<source> Used to specify multiple media resources for media elements
<summary> Defines a visible heading for the details tag
<time> Used to specify the date or time in a document
<video> Specifies video, such as a movie clip or video stream
 Comments in source that are not displayed in the browser
This table shows more of the elements that were added in HTML5.
The last tag in the table is the comments tag.
Comments in HTML can assist the developer to explain what the code does. The browsers do not
display these comments.

Slide 7
For browsers that do not support HTML5

• Include a conditional script within comments
– Placed inside the <head> tag of the document, before the <body> tag
– Browsers that do not support the HTML5 comment tag execute the conditional
statement
– Replace the non-supported tags with JavaScript that replaces the function of the
tag
– A "shim" or "shiv" is a JavaScript workaround to enable elements in HTML5 to
work in older browsers

<![endif]-->
In this example, a conditional statement is placed inside an HTML5 comment tag.

Since some older browsers do not support the HTML5 comment tag, these browsers run the
JavaScript coded within the comment tag.
The script file can be used to replace unsupported HTML5 elements with some JavaScript
equivalent code.
The script file that is shown, is an example of a shim that is implemented with Google Gears.
In computer terms, a shim is a small library of code that intercepts an API and replaces the API
elements with different behavior. Shims are typically used to support the compatibility of older
applications, in this case older browsers.
A shim, or shiv, is an application compatibility workaround that provides fallback capability for
older browsers.

Slide 8
HTML5 structural elements
HTML 5 basic page layout

Topic two: HTML5 structural elements

In this topic, you learn about the HTML5 elements that provide the structural layout of a
document.

Slide 9
Division-based page layout

• Separates areas in a document into divisions
– Use the <div> tag
• Provides flexible control for applying a style to parts of a document
• Division-based layouts help separate style from content
In a division-based layout, each part of a page that you want to format differently is separated into
its own division.
Think of the natural divisions into which you can divide the page that is shown on the slide.
These divisions might include the page title, a banner with selectable tabs, an area for the image,
and further blocks for text and thumbnail images.
The <div> tag is not new in HTML5, but is a good starting point for laying out a page or
document. Then, you can use some of the other new HTML5 structural elements inside the <div>
tag.
Most HTML elements have a semantic meaning. In other words, the element describes either the
function or the type of data that is contained within. For example, a <p> element is a paragraph
that usually contains some text.
In contrast, the <div> tag has no innate semantic meaning besides the logical grouping of the
content.

Slide 10
New structural elements

• <article>
– Represents an independent item of content that can logically stand alone
– Examples include a newspaper article, user comments, blog entries
– Can be used with the <time pubdate …> attribute to provide a publication
date for the article
• <section>
– Represents a generic section of a document, for example, chapters of a book
– Typically accompanied with a heading
• <header>
– Defines the header information for a page
– Can be used for section table of contents or to wrap navigational links or logos
• <footer>
– Defines the text at the bottom of the page
– Can be used for copyright information
A number of new structural elements are introduced in HTML5. You can use these dedicated
elements to mark up your website, rather than using the generic <div> or <span> elements.
An <article> defines a block of code that can be distinguished from the rest of the page.
A <section> defines a logical separation in the document such as the numbered chapters of an
online manual.
A <header> element is used to group the headers for a page.
The <footer> defines the area at the bottom of the page.
You can continue to use HTML4 and earlier generic elements, such as paragraphs, within the
new HTML5 elements.
10

Slide 11
Example showing new structural level elements

<article>
<article>
<header><h1>G8
<header><h1>G8 summit
summit protests</h1></header>
protests</h1></header>
<div>
<div>
<section
<section id="public">
id="public">
<h1>Public
<h1>Public demonstrations</h1>
demonstrations</h1>
<p>...more...</p>
<p>...more...</p>
</section>
</section>
<section
<section id="control">
id="control">
<h1>Crowd
<h1>Crowd control</h1>
control</h1>
<p>...more...</p>
<p>...more...</p>
</section>
</section>
</div>
</div>
<footer><p>Published
<footer><p>Published <time
<time pubdate="2012-01-08"</time></p>
pubdate="2012-01-08"</time></p>
</footer>
</footer>
</article>
</article>
This code example shows some of the new HTML5 structural elements.
Here, the <article> element is used to create an online news report. The <article> includes a
header.
Within the <article>, the page is marked up into sections that have their own headers. The page
also includes a <footer> element.
11

Slide 12
New elements for grouping contents

• <aside>
– Defines a block of code that is displayed aside from the other content
– Content that is tangentially related to the main discussion
– Can be used for cautions, notes, or to wrap navigational links
• <figure>
– Defines a self-contained element referred to from the main content
– Can be used to annotate graphics, photographs, code segments, and so on
– Could be moved to an appendix without affecting the flow of the document
• <figurecaption>
– Defines the caption for the contents of the figure element
The <aside> tag is used to provide additional information that is related to the main discussion.
The aside tag lets you extract and display further content or go to additional resources without
detracting from the main discussion.
The <figure> tag defines a self-contained element that is referred to from the main content. The
<figure> element can be used to embed graphics, images, or code sections.
The <figurecaption> tag defines the caption for the contents of the <figure> element.
12

Slide 13
Navigational elements
• <nav>
– An area where navigational links are placed into
<body>
<body>
<nav>
<nav>
<div
<div class="menu">
class="menu">
<a
<a href="#">Home</a>
href="#">Home</a>
<a
<a href="about.html">About</a>
href="about.html">About</a>
<a
<a href="register.html">Register</a>
href="register.html">Register</a>
<a
<a href="#">Sign
href="#">Sign in</a>
in</a>
</div>
</div>
</nav>
</nav>
<h1>Pages
<h1>Pages for
for You</h1>
You</h1>
...
...
Websites typically have sections that are dedicated to navigational links that go to these sites or
for moving between pages of a single application. In HTML5 syntax, these navigational links are
placed inside a <nav> tag.
The <nav> tag is a convenience tag for grouping navigational links in a web page.
13

Slide 14
HTML5 input element
New attributes for the input tag

Topic three: HTML5 input elements

In this topic, you learn the new attributes added to the <input> element in HTML5.
14

Slide 15
New HTML5 input attributes for forms

• Many new input attributes for the <input> element of HTML forms
– Support for the input attributes varies by browser
– Fallback is plain text input
Attribute IE Firefox Safari Chrome Opera
color No No No 12 11.0
date No No 5.1 10.0 9.0
email No 4.0 No 10.0 9.0
list No No No No 11.0
number No No No 7.0 9.0
range No No 4.0 4.0 9.0
search No 4.0 No 10.0 11.0
tel No No 5.1 8.0 11.0
url No 4.0 No 10.0 9.0
The intent of the new HTML5 input attributes is to provide a number of different input types that
are self-validating.
During the transitional period of adoption of the HTML5 specification, support for some of the
built-in features might be lacking in some browsers.
You still need custom JavaScript to support input validation in older browsers. When modern
browsers support HTML5, there is less of a need for custom validation scripts on the client, as
these fields are automatically validated according to their input attributes.
15

Slide 16
Color chooser: <input type="color" />

• Supported in Opera
– Clicking the "Other" option in the drop-down shows the color palette
The <input type="color" /> attribute is supported by the Opera browser. In Opera, the input field
shows as a color drop-down list.
In non-supporting browsers, this input type is displayed as a regular text input field into which the
user might type a valid color name or color code.
16

Slide 17
Input for date: <input type="date" />

• A date control (year, month, day) with no time zone
The <input type="date" /> attribute is a date control (year, month, day) with no time zone.
The example shows the input type="date" field as it is seen in Firefox 3.6.25. It is displayed as a
normal text input field in this browser, since this attribute type is not supported in this particular
version of Firefox.
17

Slide 18
Input for date: <input type="datetime" />

• Calendar drop-down in Opera
The <input type="datetime" /> attribute is a date and time control.

The datetime attribute provides input for a date and time (year, month, day, hour, minute, second,
fraction of a second) with the time zone set to Coordinated Universal Time (UTC).
Input fields with the datetime attribute are displayed as separate date and time drop-down fields.
18

Slide 19
Input for date: <input type="datetime-local" />

• Calendar drop-down in Opera
The datetime-local attribute provides input for a date and time (year, month, day, hour, minute,
second, fraction of a second) with no time zone.
The datetime-local input field is displayed as a drop-down calendar in the Opera browser. The
time field displays as a spinner control.
19

Slide 20
Input for email: <input type="email" />

• Supported in Opera and Chrome
– A regular input field in other browsers
The <input type="email" /> attribute is supported in the Google Chrome and the Opera browsers.
The email input field is displayed as a regular text input field in all other browsers.
Reverting to <input type="text" /> for those browsers that do not support the email attribute is an
example of the "graceful degradation" in the way non-supporting browsers handle this input
attribute.
Graceful degradation means that your website continues to operate even when viewed with
browsers in which not all features are supported.
20

Slide 21
Input attribute list: <input type="text" list="some_list" />

• Supported in Opera with an "auto complete" feature
• Used with <datalist> tag that include the option list
The <input type="text" list="some_list" /> is an input field for those browsers that support the
<datalist> feature.
You can fill the list by nesting <option> elements inside the <datalist> tag.
On this slide, these options are the types of fruits listed in the drop-down list.
A complete code example is shown in the student notebook that accompanies this course.
You can provide compatibility with browsers that do not support the <datalist> tag by surrounding
the <option> tags with a <select> tag.
Browsers that understand the <datalist> tag ignore the surrounding <select> elements and use
what is in the <option> tags.
Non-supporting browsers do not recognize the <datalist> tag. Instead, these browsers fallback to
showing what they see as a standard <select> tag.
With the autocomplete feature, you can type part of a list option in the input field. For example,
“app” if one of the selectable options is “apples” or “or” if one of the selectable items is “oranges”.
21

Slide 22
Input for number: <input type="number" />

• Can be used with minimum and maximum values
• Supported in Chrome and Opera
The <input type="number" /> takes a numeric value as input. You can optionally specify the
minimum and maximum values.
The example shows the number selector in the Chrome browser. Only the numbers between the
minimum and the maximum are available for selection.
22

Slide 23
Input attribute range: <input type="range" />

• Can be used for a range of values
• Supported in Chrome and Opera as a slider bar
The <input type="range" /> takes a numeric range as input.

The example shows the number selector in the Opera browser. Only the numbers in the range of
the minimum and the maximum are available for selection.
The range attribute displays a slider with the range of values between the minimum and
maximum. Only the slider itself is shown. Additional JavaScript code is needed in order to display
the value of the slider.
23

Slide 24
Input attribute search: <input type="search" />

• Regular input text field
• History of searches displayed on WebKit browsers
The differences between <input type="search" /> and <input type="text" /> are mostly in style.
WebKit-based browsers return a history of recently searched text strings. The search input field
on the Safari browser has rounded corners.
24

Slide 25
Input attribute tel: <input type="tel" />

• Can be used for telephone numbers
The input type="tel" pattern="[parameters]" attribute expects a telephone number as input. On its
own, the <input type="tel" /> provides nothing more than a text entry field in the browsers.
It does not enforce numeric only input since many telephone numbers include other characters,
such as the plus sign and hyphens.
You need to supply your own pattern matcher if you want the browser to validate the telephone
number.
25

Slide 26
Input attribute url: <input type="url" />

• Can be used for validating URLs
The URL attribute is used to validate that the user typed in a properly formatted URL or web
address.
The Opera browser adds a prefix of http:// to any URL that does not include a protocol.
26

Slide 27
Input attribute placeholder

• Used to provide an example of the input format
• Does not actually send the placeholder text as input during form
submission
Placeholder text is used to provide hints of what the input text format looks like.
The placeholder fills the input text field with the example values in a lighter shade of text.
The form does not submit the placeholder text value if the input text is not overwritten.
27

Slide 28
Input attribute: required

• Input text is required
The required attribute implies that some text must be typed.

The requirement to type some input applies even if the field contains placeholder text.
28

Slide 29
Fallback for browser-based validation

What if browser-based validation is not supported?
• Prebuilt script libraries
– Modernizr
– Open source shim/shiv libraries
– Dojo and JQuery libraries
• Assume more browsers will support HTML5 features over time
– Leave all final validation to server-side
• Include custom JavaScript validation
– Client-side validation that is attached to the form submit event handler
What happens if browser-based validation is not supported for these input attributes?
There are a number of choices available to you to perform validation in browsers that do not
support the new HTML5 input attributes.
 You can use prebuilt script libraries for fallback input field validations, or commercially
available products, like Modernizr.
 You can use open source shim libraries for field validation.
 You can use Dojo and JQuery libraries to abstract some of the browser differences away
from the developer.
 You can include your own custom JavaScript validation for fields.
 You can code client-side validation that is attached to the form submit event handler to
validate all the fields on the form when the form is submitted.
 You can assume that more browsers will support these features over time, and leave all
final validation to server-side processing.
29

Slide 30
Unit summary
Having completed this unit, you should be able to:
• List new elements in HTML5
• Describe HTML5 structural elements
– section, article, header, footer, figure, figcaption
• Describe the attributes of the HTML5 input element
– input type attributes tel, email, datetime, number, range, color
Having completed this unit, you should be able to:

 List new elements in HTML5
 Describe HTML5 structural elements - section, article, header, footer, figure, and
figurecaption
 Describe the attributes of the HTML5 input element - tel, email, datetime,
number, range, and color
30

Zu370 Unit03 Script

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Zu370 Unit03 Script

Uploaded by

Copyright:

Available Formats

ZU370 Unit 3 Transcript

© Copyright IBM Corporation 2012

© Copyright IBM Corporation 2012

© Copyright IBM Corporation 2012

© Copyright IBM Corporation 2012

© Copyright IBM Corporation 2012

The list the topics in this unit are shown here.

© Copyright IBM Corporation 2012

New HTML5 tags

© Copyright IBM Corporation 2012

Topic 1: New HTML5 tags.

© Copyright IBM Corporation 2012

New tags in HTML5 (1 of 2)

<aside> Content aside from the page content

<audio> Used to embed sound content

<canvas> Used to draw graphics

<datalist> Provides a list of predefined options for input controls

<details> Used to show or hide contents

<embed> Embeds an external application or interactive content into page

<figcaption> Caption for the figure tag

<figure> Specifies self-contained content

<footer> The footer of a document or section

<header> Specifies a group of introductory or navigational elements

<keygen> Specifies a key-pair generator field used in forms

© Copyright IBM Corporation 2012

© Copyright IBM Corporation 2012

New tags in HTML5 (2 of 2)

<meter> Used for measurements with minimum and maximum values

<nav> Specifies navigation for a document

<output> Represents the result of a calculation

<progress> Specifies the state of work in progress

<section> Defines sections in a document or article

<source> Used to specify multiple media resources for media elements

<summary> Defines a visible heading for the details tag

<time> Used to specify the date or time in a document

<video> Specifies video, such as a movie clip or video stream

© Copyright IBM Corporation 2012

© Copyright IBM Corporation 2012

For browsers that do not support HTML5

© Copyright IBM Corporation 2012

In this example, a conditional statement is placed inside an HTML5 comment tag.

© Copyright IBM Corporation 2012

HTML5 structural elements

HTML 5 basic page layout

© Copyright IBM Corporation 2012

Topic two: HTML5 structural elements

© Copyright IBM Corporation 2012

Division-based page layout

© Copyright IBM Corporation 2012

© Copyright IBM Corporation 2012

New structural elements

© Copyright IBM Corporation 2012

© Copyright IBM Corporation 2012

Example showing new structural level elements

© Copyright IBM Corporation 2012

© Copyright IBM Corporation 2012

New elements for grouping contents

© Copyright IBM Corporation 2012

© Copyright IBM Corporation 2012

© Copyright IBM Corporation 2012

© Copyright IBM Corporation 2012

HTML5 input element

New attributes for the input tag

© Copyright IBM Corporation 2012