Learn html5

mos.bayomi@gmail.com
HTML 5
The New Standard For HTML

HTML
[New] Tags
JavaScript
APIs
HTML5

<!DOCTYPE>
<!DOCTYPE>
<!DOCTYPE>
<!DOCTYPE>
SGML(Standard
Generalized Markup Language)

<!DOCTYPE>(cont’d)

<div id= "header">
<ul id="nav"> </ul>
</div>
<div id="content">
<div id="blogpost">
<h1>This is my Blogpost</h1>
<p>This is my first paragraph.</p>
</div>
</div>
<div id="sidebar" >
<div id="blogroll">
<p>My blogroll Content.</p>
</div>
</div>
<div id="footer">
<p>My Footer Content.</p>
</div>

<header>
<nav></nav>
</header>
<div id="content">
<article id="blogpost">
<section>
<h1>This is my Blogpost</h1>
<p>This is my first paragraph.</p>
</section>
</article>
</div>
<div id="sidebar">
<aside id="blogroll">
<p>My blogroll Content.</p>
</aside>
</div>
<footer>
<p>My Footer Content.</p>
</footer>

window
navigator

Modernizr.video true
false
if (Modernizr.video) {
// let's play some video!
}
else
{
// no native video support available :(
}

HEADER:
<header>
<h1>Heading Text</h1>
<p> Text or images can be included here</p>
<p> Logos are frequently placed here too</p>
</header>
The <header> tag can also contain an <hgroup> tag, as shown. The <hgroup> tag
groups headings together, using the <h1> to <h6> heading levels
shown here with a main heading and a sub-heading.
<header>
<hgroup>
<h1>Main Heading</h1>
<h2>Sub-heading </h2>
</hgroup>
<p> Text or images can be included here</p>
</header>

FOOTER:
The <footer> element contains information about a page, article, or section, such as
the author or date of the article.
As a page footer, it may contain copyright or other important legal information.
<footer>
<p>Copyright 2011 Acme United. All rights reserved.</p>
</footer>
The HTML5 specification says: ―A footer typically contains information about its
section such as
who wrote it, links to related documents, copyright data, and the like.‖
------------------------------------------------------------------------------------------------------------------
The Navigation area
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

<menu>
<button type="button" >Clio</button>
<button type="button" >Thalia</button>
<button type="button">Urania</button>
<button type="button">Calliope</button>
</menu>
------------------------------------------------------------------------------------------------------------------
<section>
The <section> element is commonly misused. Most people would think of using the
section tag as a container block level element to contain a portion of the site. This is
incorrect.
The true way to use the section element is to think of it in terms of grouping specific
portions of content. Inside a section you may have multiple headings to further narrow
the focus of the section and there may be multiple sections inside a particular piece of
content.

The <section> tag—and the <article> tag, as well—can contain headers, footers, or
any other components required to complete the section. The <section> tag is for
grouping content. The content for both the <section> tag and the <article> tag usually
starts with a <header> and ends with a <footer>, with the content for the tag in
between.
The <section> tag can also contain <article> tags, just as the <article> tag can contain
the <section> tag
------------------------------------------------------------------------------------------------------------------
<article>
<section> Content </section>
<section> Content </section>
</article>
------------------------------------------------------------------------------------------------------------------
<section>
<article> Content </article>
<article> Content </article>
</section>

<aside>
<figure>
<figure> <figcaption>
<figure>
<figure>
<img src="koala.jpg" width="304" height="228">
<figcaption>Caption for the figure</figcaption>
</figure>

<aside>
Think of this tag as holding supplementary content that is not part of the flow of the
article it supplements. In magazines, asides are frequently used to highlight a point
that was made in the article itself. The <aside> tag contains content that can be
removed without affecting the information conveyed by the article, section, or page
that contains it.
<p>My family and I visited Euro Disney last year.</p>
<aside>
<h4>Disney in France</h4>
<p>Besides Euro Disney, there is a Disneyland in California.</p>
</aside>

A Form of Madness

• Input type= datetime global date-and-time input control
• input type = datetime-local local date-and-time input control
• input type = date date input control
• input type = month year-and-month input control
• input type = time time input control
• input type = week year-and-week input control
• input type = number number input control
• input type = range imprecise number-input control
• input type = email e-mail address input control
• input type = url URL input control
• input type = search search field
• input type = tel telephone-number-input field
• input type = color color-well control
•

Dojo jQuery UI YUI.
date, month, week, time, date + time, and
date+time–timezone.
• See Demos

How to solve the problem for browsers that doesn’t support new input types
Ex
<form>
<input type="date" id="idate">
</form>
...
<script>
var idate = document.getElementById("idate");
if (idate.type != "date")
{
$("#idate").datepicker(); // using jQuery UI
}
</script>

Input type Browsers
type="date"
type="month"
type="week"
type="time"
type="datetime"
type="datetime-local"

<input type="number" min="0" max="10" step="2" value="6"/>
 type
 min
 max
 step
 value

• Input.stepUp(n)
• input.stepDown(n)
• input.valueAsNumber
input.value

if (!Modernizr.inputtypes.number) {
// no native support for type="number" fields
// maybe try Dojo or some other JavaScript framework
}

The latest versions of Safari, Chrome, and Opera all do this.
(Sadly, the iPhone renders it as a simple text box. It doesn’t even optimize its
onscreen keyboard for numeric input.)
All other browsers simply treat the field as type="text"

• <input type="email">
setCustomValidity().
• object.setCustomValidity("WRONG!!");

The email INPUT tag gives you a way to request email addresses in your web form.
In most web browsers, this won't look any different than a standard .
Where this field becomes important is on mobile devices that change their interface
for email address fields, such as the iPhone, iPad, and iPod.
On those devices, email form fields are given a different keyboard with things like
readily available @-key, period, and minimized spacebar.

• <input type="url">

• <input type="search">
• <input type="tel">

• <input type="color">

New form attributes and functions

placeholder
text,
search, url, tel, email password
<input placeholder="First and last name" required/>

autocomplete
<input type="text" name="creditcard" autocomplete="off">

on
off
unspecified

autofocus
autofocus
<input type="search" name="criteria" autofocus>
boolean

list datalist
<datalist id="contactList">
<option value="x@example.com" label="Racer X">
<option value="peter@example.com" label="Peter">
</datalist>
<input type="email" list="contactList">

To use this combination:
1. Create a datalistelement in your document with its id set to a unique value.
The datalist can be located anywhere in the document.
2. Populate the datalist with as many option elements as needed to represent
the full set of suggestions for values of a control.
For example, a datalist representing e-mail contacts should contain all of the contact
e-mail addresses as individual option children.
<datalist id="contactList">
<option value="x@example.com" label="Racer X">
<option value="peter@example.com" label="Peter">
</datalist>
3. Link the input element to the datalistby setting the listattribute to a value
which is the idof the associated datalist.
<input type="email" id="contacts" list="contactList">

required
<input type="text" required>

The valueMissing Constraint
Purpose: Ensure that some value is set on this form control
Usage: Set the requiredattribute on the form control to true
Usage example: <input type="text" name="myText" required>
Details: If the required attribute is set on a form control, the control will be in an
invalid state unless the user or a programmatic call sets some value to the field.
For example, a blank text field will fail a required check, but will pass as soon as any
text is entered. When blank, the valueMissing will return true.

mos.bayomi@gmail.commos.bayomi@gmail.com

• <canvas>
<canvas>

What Is a Canvas?
When you use a canvas element in your web page, it creates a rectangular
area on the page.
By default, this rectangular area is 300 pixels wide and 150 pixels high, but
you can specify the exact size and set other attributes for your canvas
element.

<canvas id="myCanvas" width="200" height="100">
Your Browser Doesn’t Support Canvas
</canvas>

if (canvas.getContext)
{
...
}
else{ // put code for browsers that don't support canvas here}
OR
if (Modernizr.canvas) {. . .}
else{// put code for browsers that don't support canvas here}

• <script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

To programmatically use a canvas, you have to first get its
context.
You can then perform actions on the context and finally apply
those actions to the context.
You can think of making canvas modifications as similar to
database transactions: you start a transaction, perform certain
actions, and then commit the transaction.

getContext("2d")

fillStyle
fillRect(x,y,width,height)
strokeStyle fillStyle —
• strokeRect(x,y,width,height)

EXAMPLE:
<script type="text/javascript">
function drawSquare () {
var canvas = document.getElementById('draw-square');
if (canvas.getContext) {
var context = canvas.getContext('2d');
context.fillStyle = "rgb(150,29,28)";
context.fillRect (2,2,96,96);
} else {
// put code for browsers that don't support canvas here
}
} </script>

The first thing this script does is find the element with the
id draw-square:
var canvas = document.getElementById('draw-square');
Then it checks to see if the browser supports the context
method on this element.
This is an easy way to make sure that your canvas will only
display on browsers that support the tag.
if (canvas.getContext) { ... }

The context is the rendering context that is used to manipulate
content that is displayed.
You should use a 2-dimensional (2d) rendering context. But in
the future, 3-dimensional context may be supported.
Once I have the context, I need to build my square with the two
lines:
context.fillStyle = "rgb(150,29,28)";
context.fillRect (2,2,96,96);
I created a square that is red (rgb(150,29,28)) and is positioned
2 pixels down and 2 pixels over and 96 pixels wide and high
(fillRect (2,2,96,96)).
Then, in the else section of my script, I can put any JavaScript I
want to display if the canvas element isn’t supported.

• fillRect(x,y,width,height):
strokeRect(x,y,width,height):
clearRect(x,y,width,height):

fillRect()

Like other 2d platforms, it uses a flat Cartesian coordinate
system with the origin (0, 0) at the top left.
Moving to the right will increase the x value, and moving
downwards will increase the y value.
Understanding how the coordinate system works is integral if
you want to have things draw in the right place.
A single unit in the coordinate system is usually equivalent to 1
pixel on the screen, so the position (24, 30) would be 24 pixels
right and 30 pixels down.

• moveTo(x,y)
• lineTo(x,y)
stroke().
• closePath():
• lineWidth = 4:
• context.lineJoin='round‘ :

• quadraticCurveTo(x1,y1, x2,y2):

X2,Y2
X1,Y1

• drawImage(image, dx, dy)
(dx, dy)
(0,0)
• drawImage(image, dx, dy, dw, dh)
dw dh
(dx, dy).

• drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
(sx, sy, sw, sh),
(dw, dh), (dx,
dy).
<img> Image

• createLinearGradient(x0,y0,x1,y1)
(x0,y0) (x1,y1).

• createRadialGradient(x0,y0,r0,x1,y1,r1)
(x0,y0) r0.
(x1,y1) r1.

addColorStop

<canvas id="d" width="300" height="225"></canvas>
<script>
var d_canvas = document.getElementById("d");
var context = d_canvas.getContext("2d");
var my_gradient = context.createLinearGradient(0,0,300,0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);
</script>

var bg= new Image();
bg= "gravel.jpg";
bg.onload = function (){
.....
context.strokeStyle=context.createPattern(bg,'repeat')
.....
}

As you can see, we are still calling stroke() for our path.
However, this time we have set a strokeStyle property on the
context first, passing in the result of a call to
context.createPattern. and once again the image needs
to be previously loaded in order for the canvas to perform the
operation.
The second argument is a repetition pattern that can be one of
the choices :
repeat (Default) The image is repeated in both directions
repeat-x The image is repeated only in the X dimension
repeat-y The image is repeated only in the Y dimension
no-repeat The image is displayed once and not repeated

scale(x,y)

context.rotate(angle)
context.save();
// rotation angle is specified in radians
context.rotate(1.57);
context.drawImage(myImage, 0, 0, 100, 100);
context.restore();

• fillText (text, x, y, maxwidth)
• strokeText (text, x, y, maxwidth)

Both functions take the text as well as the location at which it
should be drawn.
Optionally, a maxwidth argument can be provided to constrain
the size of the text by automatically shrinking the font to fit the
given size.

• font
• textAlign
text-align
start, end, left, right, center.
• textBaseline
top, hanging, middle, alphabetic,
ideographic, and bottom.

• textBaseline

The top of the em square is roughly at the top of the glyphs in a
font, the hanging baseline is where some glyphs like ը are
anchored, the middle is half-way between the top of the
em square and the bottom of the em square, the alphabetic
baseline is where characters like Á, ÿ, f, and Ω are anchored,
the ideographic baseline is where glyphs like 私 and
達 are anchored
and the bottom of the em square is roughly at the bottom of the
glyphsin a font.
The top and bottom of the bounding box can be far from these
baselines, due
to glyphs extending far outside the em square

context
• shadowColor
• shadowOffsetX:
• shadowOffsetY:
• shadowBlur

requestAnimFrame

window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})(); // call function after its declaration

function animate() {
// get canvas and its context
.....
// clear canvas context
context.clearRect(0, 0, canvas.width, canvas.height);
// draw stuff
.....
// request new frame
requestAnimFrame(function() {
animate();
});
}// end of animate function

SVG
Vector-based graphics for the Web

rect {
fill: rgb(255,0,0);
}
line {
stroke: rgb(0,127,127);
stroke-width: 5;
}

<image x="10" y="10"
width="236" height="260"
xlink:href="example.png">
</image>
xlink:href

<text x="10" y="20">
Hi everybody , everything is OK!
</text>

No Plugin?? -- Yes -- no plugin

<audio>
– The <audio> tag identifies sound content, such as music or any other audio
streams.
– The <audio> tag has attributes that control what, when, and how audio will be
played. The attributes are src, preload, controls, loop, and autoplay.
<audio src="MyFirstMusic.ogg" controls autoplay loop>
Your browser does not support the audio tag.
</audio>

<source>
<source>
– The <video> and <audio> tags can contain the <source> tag, which
defines multimedia resources for <video> and <audio>tags.
– With this element, you specify alternative video and audio files from
which the browser can then choose based on its media type or codec
support.
<audio controls>
<source src="MyFirstAudio.ogg" />
<source src=" MyFirstAudio.mp3" />
<p>Your browser does not support the audio tag</p>
</audio>

Browser MP3 Wav Ogg
Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES YES NO
Opera 10.6 NO YES YES
<audio>

1. load():
2. play():
3. pause():
4. canPlayType(type):

1. Duration :
2. Paused:
3. ended
4. startTime
5. error
6. currentSrc :

1. autoplay :
2. loop
3. currentTime
4. controls
5. volume
6. muted

Problems, Problems, and Solutions

<video>
<video>
– allows you to broadcast video clips or streaming visual media.
– It has all the attributes of the <audio> tag plus three more: poster, width,
and height.
– The poster attribute lets you identify an image to be used while the video is
loading or in the case when the video won't load at all.
<video src="MyFirstMovie.ogg" controls="controls">
Your browser does not support the video tag
</video>
• Problems:
<video>

1. poster :
2. width, height
3. videoWidth, videoHeight

You Are Here (And So Is Everybody Else)

navigator
navigator.geolocation
function get_location() {
navigator.geolocation.getCurrentPosition(show_map);
}
if (Modernizr.geolocation)

getCurrentPosition()

show_map()
getCurrentPosition(callback function)

function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// let's show a map or do something interesting!
}
coords timestamp
getCurrentPosition(callback function)

(Since this is all happening asynchronously, you can’t really
know when that will happen in advance.
It might take some time for the user to read the info bar and agree to share
her location, devices with dedicated GPS hardware may take some more
time to connect to a GPS satellite, and so on.)

position.coords
position.coords
Property Type Notes
coords.latitude double Decimal degrees
coords.longitude double Decimal degrees
coords.altitude doubleor null Meters above the reference ellipsoid
coords.accuracy double Meters
coords.altitudeAccuracy doubleor null Meters
coords.heading doubleor null Degrees clockwise from true north
coords.speed doubleor null Meters/second

Only three of the properties are guaranteed to be there (coords.latitude,
coords.longitude, and coords.accuracy).
The rest might come back as null, depending on the capabilities of your
device and the backend positioning server with which it communicates.
The headingand speedproperties are calculated based on the user’s
previous position, if possible.

navigator.geolocation.getCurrentPosition(
show_map, handle_error).
PositionError
code message

function handle_error(err) {
if (err.code== 1) {
// user said no!
}
}

PositionOptions
PositionOptions
• enableHighAccuracy
• timeout
• maximumAge

Ex:
navigator.geolocation.getCurrentPosition(
success_callback, error_callback, {maximumAge: 75000});
What you’re saying is that you don’t necessarily need the user’s
currentlocation.
You would be satisfied with knowing where he was 75 seconds (75000
milliseconds) ago.

watchPosition()
getCurrentPosition().

watchPosition()
clearWatch(t)
setInterval() clearInterval()

geolocation
<script
src=" http://maps.google.com/maps/api/js?sensor=false">
</script>
var map = new
google.maps.Map(document.getElementById("map_div"), myOptions);
//the div to display on , and options for map

var myOptions = {
zoom: 8, //the zoom level 0 to 21
center: new google.maps.LatLng(latitude, longitude),
//the center of map displayed
mapTypeId: google.maps.MapTypeId.ROADMAP
//Map Type
}

– sessionStorage localStorage
window

window.sessionStorage.setItem(‘myFirstKey’, ‘myFirstValue’);
myFirstValue myFirstKey

getItem
alert(window.sessionStorage.getItem(‘myFirstKey’));
window.sessionStorage.myFirstKey = ‘myFirstValue’;
alert(window.sessionStorage.myFirstKey);

localStorage

sessionStorage localStorage
Values persist only as long as
the window or tab in which
they were stored
Values persist beyond window and
browser lifetimes.
Values are only visible within
the window or tab that created
them.
Values are shared across every window
or tab
running at the same origin.

length
key(index)
• getItem(key)
null

• setItem(key, value)
QUOTA_EXCEEDED_ERR

• removeItem(key) :

Threads in JS

worker = new Worker("myWorker.js");

postMessage
postMessage()
.
worker.postMessage("a message from parent page");

postMessage()
onmessage
event.data
onmessage = function myFunction(event)
{
event.data;
……
postMessage('a message to the parent page');
}
myWorkers.js

ErrorEvent
Worker.onerror = function(e)
{…………}

Learn html5

Recommended

More Related Content

What's hot (14)

Similar to Learn html5 (20)

Recently uploaded (20)

Learn html5