Scribd
Upload
13 views9 pages

WT 3

Html

Uploaded by

swastikproffesional
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views9 pages

WT 3

Html

Uploaded by

swastikproffesional
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

HTML - Audio & Video

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.
A video element allows multiple source elements and browser will use
the first recognized format –

<!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>
This will produce the following result –
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.

<!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>
This will produce the following result −
Following is the example which allows to play the given video –
<!DOCTYPE HTML>

<html>
<head>

<script type = "text/javascript">


function PlayVideo() {
var v = document.getElementsByTagName("video")[0];
v.play();
}
</script>
</head>

<body>

<form>
<video width = "300" height = "200" src = "/html5/foo.mp4">
Your browser does not support the video element.
</video>
<br />
<input type = "button" onclick = "PlayVideo();" value =
"Play"/>
</form>

</body>
</html>
This will produce the following result −
Hyperlink
• With HTML, easily add hyperlinks to any HTML page.
• Link team page, about page, or even a test by creating it a
hyperlink.
• You can also create a hyperlink for an external website.
• To make a hyperlink in an HTML page, use the <a> and </a>
tags, which are the tags used to define the links.
The <a> tag indicates where the hyperlink starts and the </a> tag
indicates where it ends.
Whatever text gets added inside these tags, will work as a hyperlink.
Add the URL for the link in the <a href=” ”>. Just keep in mind that
you should use the <a>…</a> tags inside <body>…</body> tags.
Example
You can try to run the following code to insert a hyperlink in an HTML
page
<!DOCTYPE html>
<html>
<head>
<title>HTML Hyperlinks</title>
</head>

<body>
<h1>Company</h1>
<p>
We’re a <a href="/about/about_team.htm">team</a> of
professionals working
hard to provide free learning content.
</p>
</body>
</html>

Marquees
• An HTML marquee is a scrolling piece of text displayed either
horizontally across or vertically down your webpage depending
on the settings.
• This is created by using HTML <marquees> tag.
Note − The <marquee> tag deprecated in HTML5. Do not use this
element, instead you can use JavaScript and CSS to create such effects.
Syntax
A simple syntax to use HTML <marquee> tag is as follows −
<marquee attribute_name = "attribute_value"....more attributes>
One or more lines or text message or image
</marquee>
The <marquee> Tag Attributes
Following is the list of important attributes which can be used with
<marquee> tag.

Sr.No Attribute & Description

1 width
This specifies the width of the marquee. This can be a value
like 10 or 20% etc.

2 height
This specifies the height of the marquee. This can be a value
like 10 or 20% etc.

3 direction
This specifies the direction in which marquee should scroll.
This can be a value like up, down, left or right.

4 behavior
This specifies the type of scrolling of the marquee. This can
have a value like scroll, slide and alternate.

5 scrolldelay
This specifies how long to delay between each jump. This will
have a value like 10 etc.

6 scrollamount
This specifies the speed of marquee text. This can have a value
like 10 etc.

7 loop
This specifies how many times to loop. The default value is
INFINITE, which means that the marquee loops endlessly.

8 bgcolor
This specifies background color in terms of color name or
color hex value.
9 hspace
This specifies horizontal space around the marquee. This can
be a value like 10 or 20% etc.

10 vspace
This specifies vertical space around the marquee. This can be
a value like 10 or 20% etc.

Below are few examples to demonstrate the usage of marquee tag.


Examples - 1

<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee>This is basic example of marquee</marquee>
</body>

</html>

Examples - 2
<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee width = "50%">This example will take only 50%
width</marquee>
</body>

</html>

Examples - 3
<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee direction = "right">This text will scroll from left to
right</marquee>
</body>

</html>

Examples - 4
<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee direction = "up">This text will scroll from bottom to
up</marquee>
</body>

</html>

You might also like