Scribd
Upload
79 views

HTML 5

HTML5 introduces several new features for embedding audio and video on webpages without requiring third-party plugins. These include the <audio> and <video> tags, which allow adding media with controls for playback, as well as new attributes like autoplay, controls, and loop. Supported video formats include Ogg and MPEG4, and fallback content can be provided within the tags when formats are not supported.

Uploaded by

Ahmed Khan
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
79 views

HTML 5

HTML5 introduces several new features for embedding audio and video on webpages without requiring third-party plugins. These include the <audio> and <video> tags, which allow adding media with controls for playback, as well as new attributes like autoplay, controls, and loop. Supported video formats include Ogg and MPEG4, and fallback content can be provided within the tags when formats are not supported.

Uploaded by

Ahmed Khan
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 49

HTML5

HTML5 introduces a number of new elements and attributes


that can help you in building modern websites. Here is a
set of some of the most prominent features introduced in
HTML5.
 New Semantic Elements − These are like <header>, <footer>, and
<section>.
 Forms 2.0 − Improvements to HTML web forms where new attributes
have been introduced for <input> tag.
 Persistent Local Storage − To achieve without resorting to third-party
plugins.
 WebSocket − A next-generation bidirectional communication technology
for web applications.
 Server-Sent Events − HTML5 introduces events which flow from web
server to the web browsers and they are called Server-Sent Events (SSE).
 Canvas − This supports a two-dimensional drawing surface that you can
program with JavaScript.
 Audio & Video − You can embed audio or video on your webpages
without resorting to third-party plugins.
 Geolocation − Now visitors can choose to share their physical location
with your web application.
 Microdata − This lets you create your own vocabularies beyond HTML5
and extend your web pages with custom semantics.
 Drag and drop − Drag and drop the items from one location to another
location on the same webpage.
HTML 5 does not have the same syntax rules as XHTML where we
needed lower case tag names, quoting our attributes, an attribute
had to have a value and to close all empty elements.
HTML5 comes with a lot of flexibility and it supports the following
features −
 Uppercase tag names.
 Quotes are optional for attributes.
 Attribute values are optional.
 Closing empty elements are optional.
The <script> tag

 It's common practice to add a type attribute with a value


of "text/javascript" to script elements as follows −
<script type = "text/javascript" src = scriptfile.js"></script>

HTML 5 removes extra information required and you can


use simply following syntax −
 <script src = "scriptfile.js"></script>
The <link> tag

So far you were writing <link> as follows −


<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5 removes extra information required and you can simply


use the following syntax −
<link rel = "stylesheet" href = "stylefile.css">
HTML5 Elements
HTML5 - Canvas

 HTML5 element <canvas> gives you an easy and powerful


way to draw graphics using JavaScript. It can be used to draw
graphs, make photo compositions or do simple (and not so
simple) animations.
 Here is a simple <canvas> element which has only two
specific attributes width and height plus all the core HTML5
attributes like id, name and class, etc.
 <canvas id = "mycanvas" width = "100" height =
"100"></canvas> You can easily find that <canvas> element in
the DOM using getElementById() method as follows −
 var canvas = document.getElementById("mycanvas");
Example

<!DOCTYPE HTML>

<html>
<head>

<style>
#mycanvas{border:1px solid red;}
</style>
</head>

<body>
<canvas id = "mycanvas" width = "100" height = "100"></canvas>
</body>
</html>
Output
The Rendering Context

 The <canvas> is initially blank, and to display something,


a script first needs to access the rendering context and
draw on it.
 The canvas element has a DOM method called
getContext, used to obtain the rendering context and its
drawing functions. This function takes one parameter, the
type of context2d.
Following is the code to get required context along
with a check if your browser supports <canvas>
element −

var canvas = document.getElementById("mycanvas");

if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// drawing code here
} else {

// canvas-unsupported code here


}
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">


Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);

</script>

</body>
</html>
HTML5 Canvas - Drawing Paths
We require the following methods to draw paths on the canvas −

S.No. Method and Description


beginPath()
1
This method resets the current path.
moveTo(x, y)
2
This method creates a new subpath with the given point.
closePath()
3 This method marks the current subpath as closed, and starts a new subpath with a
point the same as the start and end of the newly closed subpath.
fill()
4
This method fills the subpaths with the current fill style.
stroke()
5
This method strokes the subpaths with the current stroke style.
arc(x, y, radius, startAngle, endAngle, anticlockwise)
Adds points to the subpath such that the arc described by the circumference of the
6 circle described by the arguments, starting at the given start angle and ending at the
given end angle, going in the given direction, is added to the path, connected to the
previous point by a straight line.
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">


Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>

</body>
</html>
Question
Example
Sr.No. Examples & Description
1 Drawing Rectangles This method is used to draw rectangle using HTML5 <canvas> element
2 Drawing Paths This method is used to make shapes using paths in HTML5 <canvas> element
3 Drawing Lines This method is used to draw lines using HTML5 <canvas> element
4 Drawing Bezier This method is used to draw Bezier curve using HTML5 <canvas> element
5 Drawing Quadratic This method is used to draw quadratic curve using HTML5 <canvas> element
6 Using Images This method is used to use images with HTML5 <canvas> element
7 Create Gradients This method is used to create gradients using HTML5 <canvas> element
8 Styles and Colors This method is used to apply styles and colors using HTML5 <canvas> element
9 Text and Fonts This method is used to draw amazing text using different fonts and their size.
10 Pattern and Shadow This method is used to draw different patterns and drop shadows.
11 Canvas States This method is used to save and restore canvas states while doing complex drawings on a canvas.

12 Canvas Translation This method is used to move the canvas and its origin to a different point in the grid.
13 Canvas Rotation This method is used to rotate the canvas around the current origin.
14 Canvas Scaling This method is used to increase or decrease the units in a canvas grid.
15 Canvas Transform These methods allow modifications directly to the transformation matrix.

16 Canvas Composition This method is used to mask off certain areas or clear sections from the canvas.

17 Canvas Animation This method is used to create basic animation using HTML5 canvas and JavaScript.
HTML5 - Audio & Video

 HTML5 features include native audio and video support


without the need for Flash.
 The HTML5 <audio> and <video> tags make it simple to
add media to a website. You need to set src attribute to
identify the media source and include a controls attribute
so the user can play and pause the media.
Embedding Video

Here is the simplest form of embedding a video file in your


webpage −
<video src = "foo.mp4" width = "300" height = "200" controls>
Your browser does not support the <video> element. </video>
The current HTML5 draft specification does not specify which
video formats browsers should support in the video tag. But
most commonly used video formats are −
 Ogg − Ogg files with Thedora video codec and Vorbis audio
codec.
 mpeg4 − MPEG4 files with H.264 video codec and AAC
audio codec.
You can use <source> tag to specify media along with media
type and many other attributes.
Example

<!DOCTYPE HTML>

<html>
<body>

<video width = "300" height = "200" controls autoplay>


<source src = "/html5/foo.ogg" type ="video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the <video> element.
</video>

</body>
</html>
Video Attribute Specification
Sr.No. Attribute & Description
autoplay
1 This Boolean attribute if specified, the video will automatically begin to play back as soon as it can do so without
stopping to finish loading the data.
autobuffer
2 This Boolean attribute if specified, the video will automatically begin buffering even if it's not set to automatically
play.
controls
3 If this attribute is present, it will allow the user to control video playback, including volume, seeking, and
pause/resume playback.
height
4
This attribute specifies the height of the video's display area, in CSS pixels.
loop
5
This Boolean attribute if specified, will allow video automatically seek back to the start after reaching at the end.
preload
6
This attribute specifies that the video will be loaded at page load, and ready to run. Ignored if autoplay is present.
poster
7
This is a URL of an image to show until the user plays or seeks.
src
8 The URL of the video to embed. This is optional; you may instead use the <source> element within the video block
to specify the video to embed.
width
9
This attribute specifies the width of the video's display area, in CSS pixels.
Embedding Audio

HTML5 supports <audio> tag which is used to embed


sound content in an HTML or XHTML document as
follows.
<audio src = "foo.wav" controls autoplay> Your browser
does not support the <audio> element. </audio>

The current HTML5 draft specification does not specify


which audio formats browsers should support in the audio
tag.
But most commonly used audio formats are ogg, mp3 and
wav.
Example

<!DOCTYPE HTML>

<html>
<body>

<audio controls autoplay>


<source src = "/html5/audio.ogg" type = "audio/ogg" />
<source src = "/html5/audio.wav" type = "audio/wav" />
Your browser does not support the <audio> element.
</audio>

</body>
</html>
Audio Attribute Specification
Sr.No. Attribute & Description
autoplay
1 This Boolean attribute if specified, the audio will automatically begin to play back as soon as it
can do so without stopping to finish loading the data.

autobuffer
2 This Boolean attribute if specified, the audio will automatically begin buffering even if it's not set
to automatically play.
controls
3 If this attribute is present, it will allow the user to control audio playback, including volume,
seeking, and pause/resume playback.
loop
4 This Boolean attribute if specified, will allow audio automatically seek back to the start after
reaching at the end.
preload
5 This attribute specifies that the audio will be loaded at page load, and ready to run. Ignored if
autoplay is present.
src
6 The URL of the audio to embed. This is optional; you may instead use the <source> element
within the video block to specify the video to embed.
HTML5 - Geolocation

HTML5 Geolocation API lets you share your location with


your favorite web sites. A JavaScript can capture your
latitude and longitude and can be sent to backend web
server and do fancy location-aware things like finding
local businesses or showing your location on a map.

 The geolocation APIs work with a new property of the global navigator
object ie. Geolocation object which can be created as follows −
 var geolocation = navigator.geolocation; The geolocation object is a
service object that allows widgets to retrieve information about the
geographic location of the device.
Check for Browser compatibility

The geolocation property of the global navigator object


helps in detecting the browser support for the Geolocation
API.
Get the user’s current location

The current location of the user can be obtained using the getCurrentPosition
function of the navigator.geolocation object. This function accepts three
parameters – Success callback function, Error callback function and
position options. If the location data is fetched successfully, the success
callback function will be invoked with the obtained position object as its
input parameter. Otherwise, the error callback function will be invoked
with the error object as its input parameter.
Success callback function

 This callback function is invoked only when the user accepts to share the
location information and the location data is successfully fetched by the
browser. The location data will be available as a position object and the
function will be called with the position object as its input parameter. A
position object contains a timestamp property denoting the time at which
the location data is retrieved and a coords object. The coords object has the
following properties
 Latitude, longitude – Geographic coordinates in decimal degrees
 Accuracy – Accuracy level of the latitude and longitude coordinates in
meters. Bigger the number lesser is the accuracy
 Altitude – Height of the position above the sea level in meters
 AltitudeAccuracy – Denotes how far off the altitude position could be
from the actual attitude value obtained in meters. Bigger the number lesser
is the accuracy
 Heading – Provides 360 degree heading information
 Speed – Indicates relative speed in meters per second
Error callback function

 This is an optional callback function that takes a ‘Position Error’


object as its input parameter. This function is invoked under any one
of the following circumstances Unknown Error occurred
 Request timed out
 User has denied to share the location information
 Location information itself is unavailable
Position Options

It describes the options to use while retrieving the user’s location.


 enableHighAccuracy: Boolean. If true, the user agent will try to
provide the most accurate position. This can result in slower
response time and higher power consumption. Is false, less accurate
position will be obtained. Default value is false.
 Timeout: Positive long value. It denotes the maximum time (in
milliseconds) that the user agent can take to respond with the
location data. Default value is Infinity.
 maximumAge: Positive long value. It denotes how long (in
milliseconds) the user agent can keep using the cached location data
before trying to obtain new location data. A zero value indicates that
the user agent must not use the cached location data and infinity
value indicates that the cached location data must be used by the
user agent.
Track Location changes

The watchPosition() can be used to get the location data at regular


intervals. The success callback function is invoked automatically
as and when the device or the useragent position changes. The
parameters to this function is similar to the getCurrentPosition()
function. It returns a watch ID value which can be used to
unregister the success callback function by passing it to the
clearWatch() function.
Show My Location on Google Maps

In order to plot your location on Google Maps we can make use of


Google Maps API along with Geolocation API.
1. First of all, we should convert the latitude and longitude
coordinates of the position object obtained using the Geolocation
API into a Google maps latLng object.
2. Create a Map object specifying the map display options and the
HTML div container where the map should be displayed. In the
example below three map display options are specified
Zoom – Specifies the zoom level
Center – Specifies that the map should be centered at the user
location
mapTypeId – Can be Roadmap, Satellite or Hybrid
4. Find the address of your location using the reverse geocoding
API and show the address obtained when you click on the marker.

var geocoder = new google.maps.Geocoder();


geocoder.geocode({
'latLng' : googlePos
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
var popOpts = {
content : results[1].formatted_address,
position : googlePos
};
var popup = new google.maps.InfoWindow(popOpts);
google.maps.event.addListener(googleMarker, 'click', function() {
popup.open(googleMap); });
} else { alert('No results found'); }
} else {
alert('Geocoder failed due to: ' + status); }});
THANK YOU

You might also like