HTML5-Introduction

Download Report

Transcript HTML5-Introduction 

An Introduction
Timmy Kokke | UNIT4 Internet Solutions | Expression Blend MVP / Webguy
What is HTML?
Past, Present and Future
What's New?
Changes to old Tags
Semantic elements
New Tags
More Information
HyperText Markup Language
<!--...-->
<!doctype>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<b>
<base>
<basefont>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<dd>
<del>
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<fieldset>
<font>
<form>
<frame>
<frameset>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<head>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<isindex>
<kbd>
<label>
<legend>
<li>
<link>
<map>
<menu>
<meta>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<p>
<param>
<pre>
<q>
<s>
<samp>
<script>
<select>
<small>
<span>
<strike>
<strong>
<style>
<sub>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<title>
<tr>
<tt>
<u>
<ul>
<var>
CSS
JavaScript
1991 HTML first mentioned – Tim Berners-Lee – HTML Tags
1993 HTML
1993 HTML 2 draft
1995 HTML 2 – W3C
1995 HTML 3 draft
1997 HTML 3.2 – “Wilbur”
1997 HTML 4 - ”Cougar” - CSS
1999 HTML 4.01
2000 XHTML draft
2001 XHTML
2008 HTML5 / XHTML5 draft
2011 feature complete HTML5
2022 HTML5
Released Browsers
contenteditable attribute
Cross-document messaging
getElementsByClassName
New, stylable HTML5 elements
Canvas (basic support)
Audio element
Drag and Drop
Video element
Offline web applications
Web Workers
Text API for Canvas
HTML5 form features
IE
FF
Saf.
Chr.
Op.
8.0
8.0
8.0
8.0
8.0
8.0
8.0
8.0
8.0
8.0
8.0
8.0
3.6
3.6
3.6
3.6
3.6
3.6
3.6
3.6
3.6
3.6
3.6
3.6
4.0
4.0
4.0
4.0
4.0
4.0
4.0
4.0
4.0
4.0
4.0
4.0
4.0
4.0
4.0
4.0
4.0
4.0
4.0
4.0
4.0
4.0
4.0
4.0
10.1
10.1
10.1
10.1
10.1
10.1
10.1
10.1
10.1
10.1
10.1
10.1
Beta Browsers
contenteditable attribute
Cross-document messaging
getElementsByClassName
New, stylable HTML5 elements
Canvas (basic support)
Audio element
Drag and Drop
Video element
Offline web applications
Web Workers
Text API for Canvas
HTML5 form features
IE
FF
Saf.
Chr.
Op.
9.0
9.0
9.0
9.0
9.0
9.0
9.0
9.0
9.0
9.0
9.0
9.0
3.7
3.7
3.7
3.7
3.7
3.7
3.7
3.7
3.7
3.7
3.7
3.7
4.*
4.*
4.*
4.*
4.*
4.*
4.*
4.*
4.*
4.*
4.*
4.*
5.0
5.0
5.0
5.0
5.0
5.0
5.0
5.0
5.0
5.0
5.0
5.0
10.5
10.5
10.5
10.5
10.5
10.5
10.5
10.5
10.5
10.5
10.5
10.5
Changes to old Tags: Doctype
Pre-HTML5
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-strict.dtd">
Changes to old Tags: Doctype
HTML5
<!DOCTYPE html>
Changes to old Tags: html
Pre-HTML5
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
Changes to old Tags: html
HTML5
<html lang="en" xml:lang="en">
Changes to old Tags: meta
Pre-HTML5
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
Changes to old Tags: meta
HTML5
<meta charset="utf-8">
Changes to old Tags: link
Pre-HTML5
<link rel="stylesheet" href="styleoriginal.css" type="text/css" />
Changes to old Tags: link
HTML5
<link rel="stylesheet" href="styleoriginal.css" >
Semantics
Increases readability
Easier Styling
New Tags:
<header>
<hgroup>
<nav>
<article>
<aside>
<footer>
HTML5 - Semantics
Semantics
<body>
<header>
<hgroup>
<h1>Demo page</h1>
<h2>Semantic sample demo page</h2>
</hgroup>
</header>
<nav>
<ul>
Some nice looking navigation
</ul>
</nav>
<section>
<article>
<header>
<h1>First Paragraph</h1>
</header>
<section>
Lorem ipsum …
</section>
</article>
...
<aside>
Some links and useful side notes
</aside>
<footer>
Timmy Kokke - Copyright © 2010.
</footer>
</body>
Canvas
Dynamic, Scriptable rendering of 2D images
Uses JavaScript to draw
Resolution-dependent bitmap
HTML5 - Canvas
Canvas
<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5
Canvas.
</canvas>
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
Video
Play video in the browser
Doesn’t need a plugin
Accessible through JavaScript
HTML5 - Video
Video
<video width="360" height="240" controls= "controls" >
<source src="LittleWing.mp4“ type="video/mp4">
</source>
Video tag is not supported
</video>
Local Storage
Store data on the client
Easy access
Database like features
Able to track changes
HTML5 – Local Storage
Local Storage
Local Storage:
function saveState(text){
localStorage["localStorageDemo"] = text;
}
function restoreState(){
return localStorage["localStorageDemo"];
}
SQL Web:
openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024, function (db) {
db.changeVersion('', '1.0', function (t) {
t.executeSql('CREATE TABLE docids (id, name)');
}, error);
});
New input types
<input type="search">
<input type="number">
<input type="range">
<input type="color">
<input type="tel">
<input type="url">
<input type="email">
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">
search boxes
spinboxes
sliders
color pickers
telephone numbers
web addresses
email addresses
calendar date pickers
months
weeks
timestamps
precise, absolute date+time stamps
local dates and times
HTML5 – New input types
New input types
Micro Data
Special Attributes
Types of items
Persons, Organizations, Events, etc
ItemType
http://microformats.org/
http://www.data-vocabulary.org/
HTML5 – Micro Data
Micro Data
<section itemscope itemtype="http://data-vocabulary.org/Person">
<span itemprop="name">Timmy Kokke</span><br>
<span itemprop="org">UNIT4 Internet Solutions</span><br>
<span itemprop="title">Expression Blend MVP / Webguy</span><br>
</section >
What else?
Web workers
Offline web applications
Cross-document messaging
Drag and Drop
Geolocation
Server sent DOM events
Websockets
Inline SVG
www.whatwg.org/specs/web-apps/currentwork/multipage/index.html
www.w3schools.com/html5
http://html5test.com/
Timmy Kokke
[email protected]
http://twitter.com/sorskoot
http://www.timmykokke.com
Silverlight and Expression Usergroup
http://www.sixin.nl