Embed Size (px)
Citation preview
Brownbag
1
“Introduction to HTML 5”
Web Technologies Timeline
YEAR WEB TECHNOLOGY
1991 HTML
1994 HTML 2
1996 CSS1 + JAVA SCRIPT
1997 HTML 4
1998 CSS2
2000 XHTML 1
2002 TABLELESS WEB DESIGN
2005 AJAX
2009 HTML 5
2
HTML 4 vs HTML 5
3
HTML 4 Structure
4
HTM
L 4 P
age S
tructu
re
5
HTM
L 5 P
age S
tructu
re
HTML 5 is Backward
Compatible
6
Content Model
The content model is what defines how elements may
be.
7
Content Model
8
METADATA CONTENT
Metadata content is content that sets up the
presentation or behavior of the rest of the content, or
that sets up the relationship of the document with other
documents, or that conveys other "out of band"
information.
<base>, <command>, <link>, <eta>, <noscript>, <script>,
<style>, <title>
Visit http://dev.w3.org/html5/spec-LC/content-
models.html#metadata-content-0 for more information
9
FLOW CONTENT
Most elements that are used in the body of
documents and applications are categorized as flow
content.
<a>, <article>, <section>, <span>
Visit http://dev.w3.org/html5/spec-LC/content-
models.html#flow-content-0 for the complete list
10
SECTIONING CONTENT
Sectioning content is content that defines the scope of
headings and footers.
<article>, <aside>, <nav>, <section>
Visit http://dev.w3.org/html5/spec-LC/content-
models.html#sectioning-content-0 for more information
11
HEADING CONTENT
Heading content defines the header of a section
(whether explicitly marked up using sectioning content
elements, or implied by the heading content itself).
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>
Visit http://dev.w3.org/html5/spec-LC/content-
models.html#heading-content-0 for more information
12
PHRASING CONTENT
Phrasing content is the text of the document, as well
as elements that mark up that text at the intra-
paragraph level. Runs of phrasing
content form paragraphs.
<b>, <button>, <canvas>, <cite>, <code>, <em>, <embed>,
<i>, <iframe>, <img>, <input>, <script>, <select>,
Visit http://dev.w3.org/html5/spec-LC/content-
models.html#phrasing-content-0 for the complete list
13
EMBEDDED CONTENT
Embedded content is content that imports another
resource into the document, or content from another
vocabulary that is inserted into the document.
<audio>, <canvas>, <embed>, <iframe>, <img>, <math>,
<object>, <svg>, <video>
Visit http://dev.w3.org/html5/spec-LC/content-
models.html#embedded-content-0 for more information
14
INTERACTIVE CONTENT
Interactive content is content that is specifically
intended for user interaction.
<a>, <button>, <details>, <embed>, <iframe>, <keygen>,
<label>, <select>, <textarea> Visit http://dev.w3.org/html5/spec-LC/content-
models.html#interactive-content-0 for more information
15
A quick introduction to
HTML
16
A basic HTML document looks
like this:
<!DOCTYPE html>
<html>
<head>
<title>Sample Pages</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>
<!-- this is a comment --><p>Example paragraph</p>
</body>
</html>
17
HTML Syntax
18
Here is an example document that
conforms to the HTML syntax:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
19
Here is an example document that
conforms to the XML syntax of HTML:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
20
New Structural Elements
For better structure
SECTION
ARTICLE
MAIN
ASIDE
HEADER
FOOTER
NAV
FIGURE & FIGCAPTION
TEMPLATE
21
HTML Document
Typical HTML Structural
22
<header>
<footer>
<nav> <aside>
<section>
<main>
<article>
HTML Document
Another Typical HTML
Structure
23
<header>
<footer>
<nav>
<aside>
<section>
<main>
<article>
<header> element
The header element represents the header of a section.
24
<nav> element
Group of navigational links
The nav element represents a section of a document
that links to other documents or to parts within the
document itself; that is, a section of navigation links.
25
<article> element
The article element represents a section of content that
forms an independent part of a document or site; for
example, a magazine or newspaper article, or a blog
entry.
26
<section> element
The section element represents a section of a
document, typically with a title or heading.
27
<main> element
The main element represents the main content section
of the body of a document or application.
The main content section consists of content that is
directly related to or expands upon the central topic of
a document or central functionality of an application.
28
<aside> element
Tangential content
The aside element represents content that is
tangentially related to the content that forms the main
textual flow of a document.
29
<footer> element
he footer element represents the footer for the section
it applies to.
30
Sample Structure:
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<header>…</header>
<nav>…</nav>
<section>
<main>…</main>
<article>…</article>
</section>
<aside>…</aside>
<footer>…</footer>
</body>
</html>
31
<figure> and <figcaption>
32
<figure> element
The figure element represents a unit of content,
optionally with a caption, that is self-contained, that is
typically referenced as a single unit from the main flow
of the document, and that can be moved away from the
main flow of the document without affecting the
document’s meaning.
33
<figcaption> element
The figcaption element represents a caption or legend
for a figure.
34
Sample Code:
<section>
<h1>ABCDE</h1>
<p>……</p>
<figure>
<img src=“01.jpg” />
<figurecaption>
Sample Figure Caption
</figurecaption>
</figure>
</section>
35
Other New Element
VIDEO AND AUDIO
TRACK
EMBED
MARK
PROGRESS
METER
TIME
RUBY, RT, AND RP
BDI
WBR
CANVAS
DATALIST
KEYGEN
OUTPUT
36
<video> element
The video element represents a video or movie.
Some useful attributes:
src (none empty URL, potentially surrounded by spaces)
autoplay ("autoplay" or "" (empty string) or empty)
controls ("controls" or "" (empty string) or empty)
loop ("loop" or "" (empty string) or empty Instructs the UA to seek back to the start of the video upon reaching the end.)
height (non-negative integer. The height of the video, in CSS pixels.)
width (non-negative integer. The width of the video, in CSS pixels.)
37
Sample Code:
<figure>
<video controls
src="http://media.w3.org/2010/05/bunny/movie.ogv">
Your user agent does not support the HTML5 Video
element.
</video>
<figcaption>
This is a sample Video
</figcaption>
</figure>
38
<audio> element
An audio element represents an audio stream.
Some useful attributes:
src (URL potentially surrounded by spaces. The URL for theaudio stream.)
autoplay ("autoplay" or "" (empty string) or empty.Instructs the UA to automatically begin playback of theaudio stream as soon as it can do so without stopping.)
controls ("controls" or "" (empty string) or empty. Instructsthe UA to expose a user interface for controlling playbackof the audio stream.)
loop ("loop" or "" (empty string) or empty. Instructs the UAto seek back to the start of the audio stream uponreaching the end.)
39
•controls = "controls" or "" (empty string) or empty
Instructs the UA to expose a user interface for controlling playback of the audio stream.
Sample Code:
<figure>
<audio controls>
<source src="http://media.w3.org/2010/07/bunny/04-
Death_Becomes_Fur.mp4" type='audio/mp4'>
<source src="http://media.w3.org/2010/07/bunny/04-
Death_Becomes_Fur.oga" type='audio/ogg;
codecs=vorbis'>
<p>Your user agent does not support the HTML5 Audio
element.</p>
</audio>
<figcaption>
This is a sample audio
</figcaption>
</figure>
40
<canvas> element
Canvas for Dynamic Graphics
The canvas element represents a resolution-dependent
bitmap canvas, which can be used for dynamically
rendering of images such as game graphics, graphs, or
other images.
Some useful attributes:
height (non-negative integer. The height of the canvas, in
CSS pixels.)
width (non-negative integer. The width of the canvas, in
CSS pixels.)
41
Using Canvas
<canvas id="myCanvas" width="200"
height="100” style="border:1px solid
#c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>42
• The input element's type attribute now has
the following new values:
tel
search
url
date
time
number
range
color43
Some New Attributes
Several attributes have been introduced to variouselements that were already part of HTML4:
charset attribute for the meta element
autofocus attribute can be specified on several formelements.
placeholder attribute can be specified on the input andtextarea elements.
required attribute for several form elements
disabled attribute for a fieldset element.
autocomplete, min, max, multiple, pattern and stepattributes for input element.
list attribute for the input element.
maxlength, minlength and wrap attributes for the textareaelement
44
Obsolete Elements
45
The following elements are not in HTML because their
effect is purely presentational and their function is
better handled by CSS:
basefont
big
center
font
strike
tt
46
The following elements are not in HTML because using
them damages usability and accessibility:
frame
frameset
noframes
47
The following elements are not included because they
have not been used often, created confusion, or their
function can be handled by other elements:
acronym is not included because it has created a lot of
confusion. Web developers are to use abbr for
abbreviations.
applet has been obsoleted in favor of object.
isindex usage can be replaced by usage of form controls.
dir has been obsoleted in favor of ul.
48
References:
http://www.w3.org/TR/html5/
http://www.w3.org/TR/html5-diff/
http://dev.w3.org/html5/spec-LC/content-models.html
http://www.w3.org/TR/html-markup/elements.html
http://www.w3.org/wiki/HTML_structural_elements
49
Title Introduction to HTML 5
Version 1.0
By Ian Jasper Mangampo
50
