View
2.022
Download
0
Category
Preview:
Citation preview
HTML5Jason EisemanLibrarian for Emerging TechnologiesYale Law School
1990
<title>Hypertext Links</title>
<h1>Links and Anchors</h1>
A link is the connection between one piece of
<a href=WhatIs.html>hypertext</a> and another.
1990
“Support Existing Content”
HTML5 Design Principles:http://www.w3.org/TR/html-design-principles
World Wide Web Consortium
http://www.w3.org/
HTML 4.01 - 1999XHTML 1.0 - 2002XHTML 1.1 - 2010
W3C
Web Hypertext Application Technology Working Group
HTML5 - 2008 - working draft
WHATWG & W3C
http://www.w3.org
2012? - candidate
2022? - standard
So why worry about HTML5 now?
2022?
Today?
Firefox Internet Explorer 9 SafariChrome
all support HTML5 today
Opera
Today?
Today?
semantics & page structure
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DOCTYPE
<!DOCTYPE html>
XHTML:
HTML5:
<script type="text/javascript" src="javascript.js"></script>
Scripts
<script src="javascript.js"></script>
XHTML:
HTML5:
<link type="text/css" rel="stylesheet" media="all" href="style.css" />
Stylesheets
XHTML:
HTML5: <link rel="stylesheet" href="style.css" />
Semantics & Page Structure
<div id= "header">
<div id= "nav">
<div id= "sidebar"><div id= "section">
<div id= "footer">
Semantics & Page Structure
<header>
<nav>
<aside>
<article>
<footer>
<section>
Microformats
Semantics & Page Structure
forms
Validation
Forms
Required Fields
Forms
Placeholder
Forms
Forms
Datalist
Forms
Forms
Date Pickers
Forms
Forms
<input name="email" type="email" />
<input name="url" type="url" />
Forms
Forms
@
Forms
/ .com
Forms
http://jasoneiseman.com/aall11/forms.html
rich internet applications
canvas
Canvas
a drawing surface
Canvas
<canvas id="theCanvas" width="800" height="800">
</canvas>
Canvas
<script type="application/javascript"> function draw() { var canvas=document.getElementById('theCanvas');var context=canvas.getContext('2d');context.strokeRect(10, 10, 600, 200);context.font="bold 40px sans-serif";
Canvas
<body onload="draw()">
<canvas id="theCanvas" width="800" height="800">
<img src="carrells.gif" />
</canvas>
</body>
Canvas
Canvas
http://jasoneiseman.com/aall11/canvas.html
video
Video
browser-native video
Video
<video src="movie.mp4" controls width="360" height="240" poster= "placeholder.jpg ">
</video>
Video
Firefox
Internet Explorer 9
Safari
Chrome
H.264
H.264
X Ogg
Ogg
X
X
WebM/VP8
WebM/VP8
X
X
X
Video
http://jasoneiseman.com/aall11/video.html
Video
Video
Video
<video controls preload width="270" height="186" poster ="poster.png"> <source src="http://jasoneiseman.com/aall11/chain.mp4" type="video/mp4"> <source src="http://jasoneiseman.com/aall11/chain.ogv" type="video/ogg"><object width="270" height="186"> <param name="movie" value="http://jasoneiseman.com/aall11/chain.swf"> <embed src="http://jasoneiseman.com/aall11/chain.swf" width="270" height="186"></object></video>
Video
<video width="270" height="186" controls preload poster ="poster.png">
Video
<source src="http://jasoneiseman.com/aall11/chain.mp4" type="video/mp4">
<source src="http://jasoneiseman.com/aall11/chain.ogv" type="video/ogg">
Video
<object width="270" height="186">
<param name="movie" value="http://jasoneiseman.com/aall11/chain.swf">
<embed src="http://jasoneiseman.com/aall11/chain.swf" width="270" height="186">
</object>
Video
Video
Video
<head> <script type="text/javascript" src="http://html5.kaltura.org/js" > </script> </head><body> <video kentryid="0_swup5zao" kwidgetid="_243342"></video></body>
Video
Video
http://diveintohtml5.org/video.html
Dive Into HTML5
audio
Audio
browser-native audio
Audio
<audio src="audio.mp3" controls>
</audio>
Audio
<audio controls>
<source src="audio.mp3" type= "audio/mpeg"><source src="audio.ogg" type= "audio/ogg">
</audio>
Audio
http://jasoneiseman.com/aall11/audio.html
advanced functionality
Advanced Functionality
geolocation
Advanced Functionality
local storage
Advanced Functionality
offline web applications
Advanced Functionality
browser history
further reading
http://www.abookapart.com/products/html5-for-web-designers
Further Reading
http://jasoneiseman.com/aall11.zip
jasoneiseman@gmail.com
Recommended