Scribd
Upload
7 views

Lecture 3

Uploaded by

Sabahat Jaffar
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
7 views

Lecture 3

Uploaded by

Sabahat Jaffar
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 22

Introduction to HTML5

Tag Structure
DOCTYPE
The doctype for HTML 4.01
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

The doctype for HTML5


<!DOCTYPE html>
Tag Structure
<link> Tag
<link rel="stylesheet" type="text/css" href="file.css">

In HTML5
<link rel="stylesheet" href="file.css">

Obsolete Elements In HTML5


Frame , frameset , noframes , font , big , center and few more.
Attributes like bgcolor, cellspacing, cellpadding, and valign.

Use of <a> Tag in HTML5


<a href="/about">
<h2>About me</h2>
<p>Find out what makes me tick.</p>
</a>
Tag Structure
Organizing Code Using Blocking Elements

SECTION
ARTICLE

HEADER

FOOTER
ASIDE
FIGURE
NAV
Forms in HTML5

Form elements can be anywhere and can be


associated to form by giving form's ID to form
attribute of that element.
<form id=foo>
<input type=”text”>
...
</form>
<textarea form=foo></textarea>
Forms in HTML5
New INPUT types

Email input type URL input type


<input type=email> <input type=url>

Date input type Time input type


<input type=date> <input type=time>

datetime input type


<input type=datetime>

Month input type


<input type=month>
Forms in HTML5
More INPUT types

Week input type range input type


<input type=week> <input type=range >

In Chrome

Search input type


<input type=search>
Number input type
tel input type
<input type=number min=0 max=20 step=2 >
<input type=tel>
In Opera
Forms in HTML5
Last INPUT type

color input type

<input type=color >

In Blackberry
web browser
Forms in HTML5
New attributes
Autofocus attribute
<input id="status" name="status" type="text" autofocus>

Placeholder attribute
<label for="search">My Search</label>

<input id="search" name="search" type="text"


placeholder="Search Here">

My Search Search Here


Forms in HTML5
More new attributes
Required attribute
<input id="pass" name="pass" type="password" required>

Autocomplete attribute
<input type="text" name="onetimetoken" autocomplete="off">
Offline Web Applications
Allow you to keep using web apps and sites
without a network connection
Browsers cache data in Application cache

Once resources are cached you can access


them very quickly (without network request)

HTML5 also allows online and offline detection

We can use offline mechanism that allows us to


easily prefetch site resources
Offline Web Applications
The cache manifest
Contents of cache.manifest
CACHE MANIFEST
# Files to cache
index.html
<!DOCTYPE HTML> cache.html
<html manifest="/cache.manifest"> html5.css
<body> image1.jpg
... html5.js
</body>
</html> # Use from Network if
available
NETWORK:
network.html

# Fallback content
FALLBACK:
fallback.js fallbackserver.js
/fallback.html
Canvas
The canvas element provides scripts with a
resolution-dependent bitmap canvas, which can
be used for rendering graphs, game graphics,
or other visual images on the fly.
Canvas gives an easy and powerful way to draw
graphics using Javascript.

For each canvas element you can use a


"context" (think about a page in a drawing
pad), into which you can issue JavaScript
commands to draw anything you want.
Canvas
Basics of Canvas
<canvas id="myCanvas" width="300" height="150">
Fallback content, in case the browser does not support Canvas.
</canvas>
<script>
// Get a reference to the element.
var elem = document.getElementById('myCanvas');

// Always check for properties and methods, to make


// sure your code doesn't break
// in other browsers.
if (elem && elem.getContext) {
// Get the 2d context.
// Remember: you can only initialize one context per
element.
var context = elem.getContext('2d');
if (context) {
// You are done! Now you can draw your first rectangle.
// You only need to provide the (x,y) coordinates,
followed by
// the width and
// height dimensions.
context.fillRect(0, 0, 150, 100);
}
}
</script>
Canvas
Basic lines and strokes

context.fillStyle = '#00f'; //
blue
context.strokeStyle = '#f00'; // red
context.lineWidth = 4;

// Draw some rectangles.


context.fillRect (0, 0, 150, 50);
context.strokeRect(0, 60, 150, 50);
context.clearRect (30, 25, 90, 60);
context.strokeRect(30, 25, 90, 60);
Canvas
Text in Canvas

context.fillStyle = '#00f';
context.font = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.fillText('Hello world!', 0, 0);
context.font = 'bold 30px sans-serif';
context.strokeText('Hello world!', 0, 50);
Videos
HTML5 provides a standardised way to play
video directly in the browser, with no plugins
required.

No <object> , <embed> elements required.

<video> elements can be styled with CSS

HTML5 can be tweaked and redisplayed onto


<canvas> with Javascript.
Videos
Usage of video element
<video src=turkish.ogv></video>
Fallback markup between the tags, for
older Web browsers that do not support
native video
<h1>Video and legacy browser fallback</h1>
<video src=leverage-a-synergy.ogv>
Download the <a href=leverage-a-synergy.ogv>How to
leverage a synergy video</a>
</video>
Videos
Attributes supported

autoplay
<video src=leverage-a-synergy.ogv autoplay>
</video>

It tells the browser to play the video or


audio automatically.
controls
<video src=leverage-a-synergy.ogv controls>
</video>
Provides
play/ pause toggle,
a seek bar, and
volume control.
Videos
Attributes supported

poster
<video src=leverage-a-synergy.ogv poster >
</video>

The poster attribute points to an image that the


browser will use while the video is downloading,
or until the user tells the video to play.

height , width

These attributes tell the browser the size


in pixels of the video.
Videos
Attributes supported

loop
<video src=leverage-a-synergy.ogv loop >
</video>

It loops the media playback.


preload (preload=auto)
Indicates browser that it should begin downloading
the entire file.
Videos
Attributes supported

preload = none
<video src=leverage-a-synergy.ogv preload=none >
</video>

This state suggests to the browser that it


shouldn’t preload the resource until the user
activates the controls.

You might also like