Introduction to HTML5
Federal TVET Institute
Background
• HTML5 is the latest to be version of
– HyperText Markup Language (HTML): text with tags
for content
– JavaScript: scripting/programming language for
interactivity, dynamic presentation
– Cascading Style Sheets: formatting
• Many new features, for support of semantic web,
dynamic/interactive websites
• Browser support evolving.
New features include:
• Semantic elements: header, footer,
section, article, others.
• canvas for drawing
– paths of rectangles, arcs, lines, images
– mouse events
• localStorage (variation of cookies)
• audio & video elements
– including drawing video on canvas
History of HTML
1991 HTML first published
1995 HTML 2.0
After HTML 4.01 was released, focus
shifted to XHTML and its stricter standards.
1997 HTML 3.2
1999 HTML 4.01 XHTML 2.0 had even stricter standards
than 1.0, rejecting web pages that did not
2000 XHTML 1.0 comply. It fell out of favor gradually and
was abandoned completely in 2009.
2002
- XHTML 2.0
HTML5 is much more tolerant and can
2009 handle markup from all the prior versions.
Though HTML5 was published officially in 2012, it
2012 HTML5
has been in development since 2004.
Goals of HTML5
• Support all existing web pages. With HTML5, there is no
requirement to go back and revise older websites.
• Reduce the need for external plugins and scripts to show
website content.
• Improve the semantic definition (i.e. meaning and
purpose) of page elements.
• Make the rendering of web content universal and
independent of the device being used.
• Handle web documents errors in a better and more
consistent fashion.
New Elements in HTML5
<article> <figcaption> <progress>
<aside> <footer> <section>
<audio> <header> <source>
<canvas> <hgroup> <svg>
<datalist> <mark> <time>
<figure> <nav> <video>
These are just some of the new elements introduced in HTML5. Try
to explore more of these features.
First Look at HTML5
Remember the DOCTYPE declaration from XHTML?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
In HTML5, there is just one possible DOCTYPE declaration and it is simpler:
<!DOCTYPE html>
Just 15 characters!
The DOCTYPE tells the browser which type and version of document to
expect. This should be the last time the DOCTYPE is ever changed. From
now on, all future versions of HTML will use this same simplified declaration.
The <html> Element
This is what the <html> element looked like in XHTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
Again, HTML5 simplifies this line:
<html lang="en">
The lang attribute in the <html> element declares which language the page
content is in. Though not strictly required, it should always be specified, as it
can assist search engines and screen readers.
Each of the world’s major languages has a two-character code, e.g. Spanish = "es",
French = "fr", German = "de", Chinese = "zh", Arabic = "ar".
The <head> Section
Here is a typical XHTML <head> section:
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>My First XHTML Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
And the HTML5 version:
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>
Notice the simplified character set declaration, the shorter CSS stylesheet link
text, and the removal of the trailing slashes for these two lines.
HTML 5 can…
• Build Favorite sites
– review HTML structure, new elements)
• Build Drawings
– draw rectangles, arcs, lines on canvas
• Build Coin toss
– event handling, draw text and images on canvas
• Find video clips & convert.
– Add video to favorite sites or make it stand-alone.
• Build Bouncing Video
– draw video, create mask, timed event
• Build geolocation application, including Google Maps API
app and localStorage
• Preview Essential Guide to HTML5
Tools
• TextPad or TextWrangler or NotePad
– Dreamweaver okay but it does cost.
• Compatible browser
– Firefox: works for all examples, including masked
video and geolocation
– Chrome and Safari work for most examples
– IE9 being tested now
• Miro Converter
HTML review
• Elements consist of opening tag, contents of the
element and closing tag.
• Tags have attributes.
<a href="nextpage.html">NEXT </a>
• Some elements/tags are singletons
<img src="logo.gif" width="100"/>
• Document Object Model (DOM) defines
relationships, attributes & methods of objects.
First webpage: Favorite Sites
• Annotated list of 'favorite sites'
• Need to determine URLs for links, images, brief
text.
• header and article elements
• style element (CSS) for formatting
– critical for header and article. Also use it for images
• script element: single statement to insert date.
• http://faculty.purchase.edu/jeanine.meyer/html5
workshop/workshopexfavoritesites.html
screen shot,
not live html
Remember…
• HTML does not recognize white space.
• You need to make spacing and line breaks
explicit.
• For your readability, put line breaks and
spaces.
• My objective often is to squeeze things in
one slide. This isn't your objective!
HTML template
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body> </body>
</html>
Favorite Sites
• overview for this example:
<!DOCTYPE html>
<html lang="en">
<head>
<title> </title>
<meta charset="UTF-8">
<style> </style> // for header and article and img
<script> </script>
</head>
<body>
content: header, article for each site
</body>
</html>
<style>
header {font-family:Georgia,"Times New
Roman",serif;
text-align:center;
font-size:30px;
display:block; }
article { text-align:left;
font-size:20px;
margin:20px;
display:block;
font-family:"Century","Tahoma", sans-
serif; }
img {display:block;}
</style>
<script>
document.write(Date());
</script> </head>
<body>
<header>Favorite Sites </header>
<article>My Academic website, <a
href="http://faculty.purchase.edu/jeanine.
meyer">
http://faculty.purchase.edu/jeanine.meyer
</a>
is where I put information about my courses,
along with publications and other
activities.
<img src="purchase_logo_sm.gif"
width="200"/> </article>
<article>
My daughter, Aviva, is active in the <a
href="http://stolenchair.org">Stolen Chair
Theater company.</a> The next production
involves Victorian photo-collage.
<img src="CSTlogo.jpg" width="100"/>
</article> <body> </html>
Comments
• Remember: spaces, line breaks need to
be inserted explicitly
• My first attempt was to use <br/> to force
images to their own line. I changed to
using a style to keep formatting in the
<style> section.
– need not be so pure!
• GO! - get information, look up other CSS,
ask!
Applications
(HTML5 features)
• Favorite sites
• Dice game: drawing arcs & rectangles
• Bouncing ball: drawing, including gradient,
form validation, timed events
• Cannonball & Slingshot: drawing lines &
images, mouse events, rotation &
translation, programmer-defined objects
• Memory polygons & pictures: drawing,
mouse events (clicking on card), timing
Applications
(HTML5 features)
• Quiz: dynamically created HTML markup,
mouse events on elements, video
• Mazes: mouse events, drawing,
localStorage, radio buttons
• Rock, Paper, Scissors: drawing, audio
• Hangman: drawing lines and arcs (ovals),
dynamic HTML markup
• Blackjack: key events, drawing images,
footer
