HTML
5
Delivered by:- Dr. Ch. Amarendra Assistant Professor, Department of
ACSE
HTML 5
▪ HTML stands for Hyper Text Markup Language.
▪ It is used to design web pages using a markup language.
▪ HTML is an abbreviation of Hypertext and Markup language.
Hypertext defines the link between the web pages.
▪ The markup language is used to define the text document within the
tag which defines the structure of web pages.
▪ HTML 5 is the fifth and current version of HTML.
▪ It has improved the markup available for documents and has
introduced Application Programming Interfaces (API) and Document
Object Model (DOM).
Web Technologies by Dr. Ch. Amarendra 2
Features:
▪ It has introduced new multimedia features which supports both audio and
video controls by using <audio> and <video> tags.
▪ There are new graphics elements including vector graphics and tags.
▪ Enrich semantic content by including <header> <footer>, <article>,
<section> and <figure> are added.
▪ Drag and Drop- The user can grab an object and drag it further dropping it
to a new location.
▪ Geo-location services- It helps to locate the geographical location of a client.
▪ Web storage facility which provides web application methods to store data
on the web browser.
▪ Uses SQL database to store data offline.
▪ Allows drawing various shapes like triangle, rectangle, circle, etc.
Web Technologies by Dr. Ch. Amarendra 3
New Added Elements in HTML 5:
▪ <article>: The <article> tag is one of the new
sectioning element in HTML5. The HTML <article> tag is
used to represent an article.
▪ <aside>: The <aside> tag is used to describe the
main object of the web page in a shorter way like a
highlighter.
▪ <Audio>: The <audio> tag is used to insert an audio
into an HTML webpage.
▪ <Canvas>: The <canvas> tag in HTML is used to
draw graphics on a web page using JavaScript.
Web Technologies by Dr. Ch. Amarendra 4
Advantages
▪ Multimedia Support: Native audio and video tags for easier media
embedding.
▪ Better Performance: Faster loading times with fewer dependencies.
▪ Cross-Platform: Works across all major browsers and mobile devices.
▪ Geolocation: Access users’ location for location-based features.
▪ Offline Capability: Works offline with Web Storage and AppCache.
▪ Simplified Code: New semantic tags for cleaner, more readable code.
▪ Mobile-Friendly: Optimized for a smoother mobile experience.
Web Technologies by Dr. Ch. Amarendra 5
Disadvantages
▪ Browser Inconsistencies: Older browsers may not fully
support HTML5 features.
▪ Mobile Compatibility: Some older mobile devices may
struggle with certain HTML5 features.
▪ Security Risks: New features like Web Storage can
potentially expose user data if not handled properly.
▪ Complexity: Advanced features like WebSockets and APIs
can be challenging for beginners.
▪ Lack of Support in Older Internet Explorer
Versions: Some older versions of IE (like IE 8 and below) do
not support HTML5 at all.
Web Technologies by Dr. Ch. Amarendra 6
Canvas
▪ The HTML canvas element provides HTML a bitmapped
surface to work with. It is used to draw graphics on the
web page.
▪ The <canvas> element is only a container for graphics,
you must need a scripting language to draw the graphics.
The <canvas> element allows for dynamic and scriptable
rendering of 2D shapes and bitmap images.
▪ <canvas id = "mycanvas" width ="200" height ="100">
</canvas>
Web Technologies by Dr. Ch. Amarendra 7
Canvas example
<canvas id="myCanvas"
width="400"
height="200"
style="border:2px solid #000000;">
</canvas>
Web Technologies by Dr. Ch. Amarendra 8
Output
Web Technologies by Dr. Ch. Amarendra 9
Audio
▪ Audios can be added to webpages using the
“audio” tag.
▪ Audios could be only played on web pages
using web plugins like Flash.
▪ The “audio” tag is an inline element that is
used to embed sound files into a web page.
Web Technologies by Dr. Ch. Amarendra 10
Audio-Syntax
<audio>
<source src="sample.mp3" type="audio/mpeg">
</audio>
Attributes:
The various attributes that can be used with the “audio” tag are listed below:
Controls: Designates what controls to display with the audio player.
Autoplay: Designates that the audio file will play immediately after it loads
controls.
Loop: Designates that the audio file should continuously repeat.
Src: Designates the URL of the audio file.
Muted: Designates that the audio file should be muted.
Web Technologies by Dr. Ch. Amarendra 11
Example
<!DOCTYPE html>
<html>
<body>
<p>Audio Sample</p>
<!-- audio tag starts here -->
<audio controls>
<source src="test.mp3" type="audio/mp3">
<source src="[Link]" type="audio/ogg">
</audio>
<!-- audio tag ends here -->
</body>
</html>
Web Technologies by Dr. Ch. Amarendra 12
Output
Web Technologies by Dr. Ch. Amarendra 13
Video
▪ Before HTML 5 came into existence, videos could only
be played in a browser using a plugin like flash.
▪ Adding a video to a webpage is as easy as adding an
image. The HTML5 “video” element specifies a standard
way to embed a video on a web page.
Syntax
<video src="" controls> </video>
Web Technologies by Dr. Ch. Amarendra 14
Video tag Attributes
▪ Autoplay: It tells the browser to immediately start downloading the
video and play it as soon as it can.
▪ Preload: It intends to provide a hint to the browser about what the
author thinks will lead to the best user experience.
▪ Loop: It tells the browser to automatically loop the video.
▪ height: It sets the height of the video in CSS pixels.
▪ width: It sets the width of the video in CSS pixels.
▪ Controls: It shows the default video controls like play, pause,
volume, etc.
▪ Muted: It mutes the audio from the video.
▪ Poster: It loads an image to preview before the loading of the video.
▪ Src: It is used to specify the URL of the video file.
Web Technologies by Dr. Ch. Amarendra 15
Exmaple
<center>
<h1 style="color:green;">VFSTR </h1>
<h3>HTML video tag</h3>
<p>Adding video on the webpage
<video width="450" height="250" controls
preload="auto">
<source src=
[Link]
16234019/Canvas.move_.mp4
type="video/mp4">
</video>
</center>
Web Technologies by Dr. Ch. Amarendra 16
Output
Web Technologies by Dr. Ch. Amarendra 17
Thank You
Web Technologies by Dr. Ch. Amarendra 18