HTML Meta Tags,Media,API
<meta> tag
• The <meta> tag defines metadata about an HTML
document.
• Metadata is data (information) about data.
• <meta> tags always go inside the <head> element, and
are typically used to specify character set, page
description, keywords, author of the document, and
viewport settings.
• Metadata will not be displayed on the page, but is
machine parsable.
• Metadata is used by browsers (how to display content
or reload page), search engines (keywords), and other
web services.
• There is a method to let web designers take control
over the viewport (the user's visible area of a web
page), through the <meta> tag
Attribute Value Description
charset character_set Specifies the character encoding
for the HTML document
content text Specifies the value associated
with the http-equiv or name
attribute
http-equiv content-type Provides an HTTP header for the
default-style information/value of the content
refresh attribute
expires
name application-name Specifies a name for the
author metadata
description
generator
keywords
revised
viewport
Specifying Keywords
You can use <meta> tag to specify important keywords related to the
document and later these keywords are used by the search engines
while indexing your webpage for searching purpose.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata"
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Document Description
You can use <meta> tag to give a short description about the
document. This again can be used by various search engines while
indexing your webpage for searching purpose.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Setting Author Name
You can set an author name in a web page using meta tag. See
an example:
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta ame="author" content="Mahnaz Mohtashim" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
viewport
• Controls the viewport (the user's visible area of a web page).
The viewport varies with the device, and will be smaller on a
mobile phone than on a computer screen.
• You should include the following <meta> viewport element in all
your web pages:
• <meta name="viewport" content="width=device-width, initial-
scale=1.0">
• A <meta> viewport element gives the browser instructions on how
to control the page's dimensions and scaling.
• The width=device-width part sets the width of the page to follow
the screen-width of the device (which will vary depending on the
device).
• The initial-scale=1.0 part sets the initial zoom level when the page
is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and
the same web page with the viewport meta tag:
Document Revision Date
You can use <meta> tag to give information about when last time
the document was updated. This information can be used by
various web browsers while refreshing your webpage.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="Tutorialspoint, 3/7/2014" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Meta expires
Gives the users’ browsers a date, after which the page is
deleted from the browsers cache, and must be
downloaded again.
This is useful if you want to make sure your visitors are
reading the most current version of a page.
<meta name=“expires” content=“13 March 2009”>
Specify Character Set
You can use <meta> tag to specify character set used within the
webpage.
By default, Web servers and Web browsers use ISO-8859-1 (Latin1)
encoding to process Web pages. Following is an example to set UTF-8
encoding:
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta ame="author" content="Mahnaz Mohtashim" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>Hello HTML5!</p>
Document Refreshing
A <meta> tag can be used to specify a duration after which your web
page will keep refreshing automatically.
If you want your page keep refreshing after every 5 seconds then use
the following syntax.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="Tutorialspoint, 3/7/2014" />
<meta http-equiv="refresh" content="5" />
</head>
Page Redirection
You can use <meta> tag to redirect your page to any other webpage. You can
also specify a duration if you want to redirect the page after a certain number
of seconds.
Following is an example of redirecting current page to another page
after 5 seconds. If you want to redirect page immediately then do not
specify content attribute.
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
<meta name="revised" content="Tutorialspoint, 3/7/2014" />
<meta http-equiv="refresh" content="5"
url=”[Link] />
</head>
pragma
• The meta http-equiv="pragma" is an HTML element used to
specify the caching behavior of a web page.
• It allows web developers to control how the browser caches and
retrieves the page content.
• By setting the meta http-equiv="pragma" attribute, developers can
influence the behavior of web browsers when caching and
refreshing the page content.
• The attribute accepts various values, such as "no-cache," "cache,"
"no-store," among others, each indicating a different caching
behavior.
<meta http-equiv=”pragma” content=”no-chache” />
Robots / spiders
● A search engine uses a computer program to find
and index (catalog) web pages.
● It "moves" from one page to the next by following
links.
● This type of computer program is called a "spider"
or a "robot".
● These robots can be told what links to follow or not
follow, pages to index or not index.
● The most common method (assuming you wanted
to control the robot) is to make use of the robots
meta tag in individual pages...
Example of Robots
● Robots meta tag plays an important role in
on page optimization as it is the robots meta
tag that tells the search engines how to treat
the content of a page.
● <meta name="robots"
content="all,none,index,noindex,follow,nofoll
ow">
● a robot Meta tag consists of two attributes:
name and content. You have to specify
values for each of these attributes.
What each item in the Robot does…
● All
– This is the default.
– To "index" means to place in their database so it is
available for searches.
– It means that the spiders (or robots) can index this page
and follow all links on this page.
– If you want robots to index everything and follow
everything, then just skip the robots tag.
– The robots will index and follow everything automatically.
What each item in the Robot does…
● None
– instructs the browser to basically ignore the
page.
– Don't index anything and don't follow any links.
HTML5 Goals
• Aimed to have all of the power of native applications.
• Run on any platform (Windows, Linux, iPhone, Android, etc.)
• New features should be based on HTML, CSS and
JavaScript.
• Reduce the need for external plugins.
• Better error handling.
• More markup to replace scripting.
New Tags for Page Layout
Today, if we wanted to markup a layout for a web
page, we would use a lot of <div> tags to specify the
different sections of the page.
HTML5 introduces a set of new tags specifically for
layout.
Current Layout Structure with <div> Tags
New Layout Structure
Better layout structure → new structural elements
<section>
<header>
<nav>
<article>
<aside>
<footer>
…
figure Element
Allows for associating captions with embedded content,
including images, audio or videos.
<figure>
Image, audio, video, etc.
<figcaption>
Multimedia
New <video> and <audio> tags will be used as the <img>
tag is today.
Web pages will need to define how video and audio
should be played (controls, interface, etc.)
Currently video and audio in a Web page is best handled
by plugins (Flash, Silverlight, QuickTime, etc.)
New Multimedia Tags
• Media Tags
<audio>
• Attributes: autoplay, controls, loop, src
<video>
• Attributes: autoplay, controls, loop, height, width, src
The <source> element is used when you want to upload
multiple audio or video elements.
Basic HTML5 markup for audio/video
<video src=”movie.mp4” controls />
<audio src=”track.mp3” controls />
video attributes
width – sets the width of the video element in pixels. If the width is
omitted, the browser will use the default width of the video, if it’s
available.
height – sets the height of the video element. If the height is omitted,
the browser will use the default height of the video, if it’s available.
src – sets the video file to be played. For reach, you should supply
video formats that are supported by the most popular browsers.
poster – sets the image file that will be displayed while the video
content is being loaded, or until the user plays the video. If a poster
file is omitted, the browser will show the first frame of the video.
autoplay – instructs the browser to automatically play the video when
the page is loaded.
controls – displays the video controls to control the video playback. The
controls are visible when the user hovers over a video. It’s also
possible to tab through the controls.
loop – instructs the browser to loop the media playback.
autobuffer – used when autoplay is not used. The video is downloaded in
the background, so when the user does decide to watch the video, it
starts immediately.
<video width="320"
src="intro.mp4"
height="240"
poster="[Link]"
autoplay
controls
loop>
This content appears if the video tag or the codec is not supported.
</video>
The audio element
<audio src="elvis.mp3"
preload="auto"
controls
autoplay
loop
muted>
This content appears if the audio tag or the codec is not supported.
</audio>
audio attributes
src – specifies the audio file to be played. For reach, you
should supply audio formats that are supported by the
most popular browsers
preload – none / metadata / auto – where metadata means
preload just the metadata and auto leaves the browser
to decide whether to preload the whole file
controls – displays the audio controls
autoplay – instructs the browser to automatically play the
audio when the page is loaded
loop – instructs the browser to loop the media playback.
muted – sets the default audio output.
HTML Plug-ins
• The <object> Element
• The <object> element is supported by all
browsers.
• The <object> element defines an embedded
object within an HTML document.
• It was designed to embed plug-ins (like Java
applets, PDF readers, and Flash Players) in
web pages, but can also be used to include
HTML in HTML:
• <object width="100%" height="500px" data="sni
[Link]"></object>
• The <embed> Element
• The <embed> element is supported in all major
browsers.
• The <embed> element also defines an
embedded object within an HTML document.
• Web browsers have supported the <embed>
element for a long time. However, it has not
been a part of the HTML specification before
HTML5.
• <embed width="100%" height="500px" src="sni
[Link]">
HTML YouTube Videos
To play your video on a web page, do the following:
• Upload the video to YouTube
• Take a note of the video id
• Define an <iframe> element in your web page
• Let the src attribute point to the video URL
• Use the width and height attributes to specify the
dimension of the player
• Add any other parameters to the URL (see below)
• <iframe width="420" height="315"
src="[Link]
</iframe>
HTML YouTube Videos
• Add mute=1 after autoplay=1 to let your video
start playing automatically (but muted).
• <iframe width="420" height="315"
src="[Link]
7vqY?autoplay=1&mute=1">
</iframe>
• YouTube Playlist, Loop
• <iframe width="420" height="315"
src="[Link]
7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
HTML YouTube Videos
• YouTube Controls
• Add controls=0 to display controls in the video
player.
• Value 0: Player controls does not display.
• Value 1 (default): Player controls display.
• <iframe width="420" height="315"
src="[Link]
7vqY?controls=0">
</iframe>
HTML APIs
HTML Geolocation API
The HTML Geolocation API is used to locate a
user's position.
The getCurrentPosition() method is used to return
the user's position.
The example below returns the latitude and
longitude of the user's position:
<script>
var x = [Link]("demo");
function getLocation() {
if ([Link]) {
[Link](showPosition);
} else {
[Link] = "Geolocation is not supported by this
browser.";
}
}
function showPosition(position) {
[Link] = "Latitude: " + [Link] +
"<br>Longitude: " + [Link];
}
</script>
HTML APIs
• Check if Geolocation is supported
• If supported, run the getCurrentPosition()
method. If not, display a message to the user
• If the getCurrentPosition() method is
successful, it returns a coordinates object to the
function specified in the parameter
(showPosition)
• The showPosition() function outputs the
Latitude and Longitude
HTML Drag and Drop API
In HTML, any element can be dragged and
dropped.
• To make an element draggable, set
the draggable attribute to true:
• <img draggable="true">
Html Code
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="[Link]" draggable="true"
ondragstart="drag(event)" width="150"
height="150">
Script Code
function allowDrop(ev) {
[Link](); }
function drag(ev) {
[Link]("text", [Link]); }
function drop(ev) {
[Link]();
var data = [Link]("text");
[Link]([Link](
data)); }
Code explained:
• Call preventDefault() to prevent the browser
default handling of the data (default is open as
link on drop)
• Get the dragged data with the
[Link]() method. This method
will return any data that was set to the same
type in the setData() method
• The dragged data is the id of the dragged
element ("drag1")
• Append the dragged element into the drop
element
canvas
canvas Element
Uses JavaScript to draw graphics on a web page
A rectangular area, you control every pixel of it
It has several methods for drawing paths, boxes, circles,
characters, and adding images
Create a canvas element:
•Add a canvas element to the HTML5 page.
•Specify the id, width, and height of the element
<canvas id="myCanvas" width="200" height="100">
</canvas>
<canvas id=“myCanvas" height="200" width="200">
Your browser does not support HTML5 canvas.
</canvas>
<script language="javascript">
var example = [Link](“myCanvas");
var context = [Link]("2d");
[Link] = "rgb(255,0,0)";
[Link](30, 30, 50, 50);
</script>
Example
<html>
<body>
<svg xmlns=[Link]
version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
The above screenshot is an HTML5 canvas game.
Canvas Examples: Graphs with Plotkit
HTML Validation
• required: Specifies whether a form field needs to be
filled in before the form can be submitted.
• minlength and maxlength: Specifies the minimum and
maximum length of textual data (strings)
• min and max range: Specifies the minimum and
maximum values of numerical input types
• type: Specifies whether the data needs to be a
number, an email address, or some other specific
preset type.
• pattern: Specifies a regular expression that defines a
pattern the entered data needs to follow.
• Required
• Use the required attribute to indicate that a field
must be completed in order to pass validation.
• <input required>
• e.g,
<input type="text" id="username" name="usern
ame" required>
• Minimum / Maximum Length
• Use the minlength and maxlength attributes to
indicate length requirements.
• <input maxlength="number">
• e.g,<input type="text" id="username" name="us
ername" maxlength="10">
Specifying a range
Use min and max attributes to restrict the range of
numbers a user can input into an input of
type number or range
e.g, Marks: <input type="number" size="6"
name="marks" min="0" max="100" />
Match a Pattern
For more control, use the pattern attribute to
specify any regular expression that must be
matched in order to pass validation.
<input pattern="regexp">
e.g, <input pattern="\d*" title="Numbers only,
please.">
<input type="url" name="website"
pattern="https?://.+" title="Include [Link]
<input type="text" name="country_code“ pattern
="[A-Za-z]{3}" title="Three letter country code">
<input type="text" name=“mobile“ pattern=“^[9|8]\
d{9}" title=“mobile number start with 9|8">