HTML CODING (Inserting Images, Videos and Audio).
Images enhance visual appearance of the web pages by making them more
interesting and colorful.
The <img> tag is used to insert images in the HTML documents. It is an empty
element and contains attributes only. The syntax of the <img> tag can be given
with:
<img src="url" alt="some_text">
Attributes of HTML image tag
The src and alt are important attributes of HTML img tag. All attributes of HTML
image tag are given below
1) src
It is a necessary attribute that describes the source or path of the image. It instructs the browser
where to look for the image on the server.
The location of image may be on the same directory or another server.
2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt
attribute describes the image in words. The alt attribute is considered good for SEO (search engine
optimization) prospective.
3) width
It is an optional attribute which is used to specify the width to display the image. It is not
recommended now. You should apply CSS in place of width attribute.
4) height
Page 1
It h3 the height of the image. The HTML height attribute also supports iframe, image and
object elements. It is not recommended now. You should apply CSS in place of height attribute.
Use of height and width attribute with img tag
if we want to give some height and width to display image according to our requirement, then we can set it with
height and width attributes of image.
NB: How to get image from another directory/folder?
<img src="E:/images/animal.png" height="180" width="300" alt="animal image">
E: - represents location from desktop drive use your preferred choice according to how you have
saved your drive names. You can omit width and height its optional
Note: If src URL will be incorrect or misspell then it will not display your
image on web page, so try to put correct URL
Page 2
VIDEOS:
a) Using iframe Tag.
To embed a video in an HTML page, use the <iframe> element. The source attribute included the
video URL. For the dimensions of the video player, set the width and height of the video
appropriately.
The Video URL is the video embed link.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>HTML Video embed</title>
</head>
<body>
<p>MY VIDEO</p>
<br />
<iframe width="560" height="315" src="A.mp4" frameborder="0" allowfullscreen></iframe>
</iframe>
</body>
</html>
Page 3
b) Using Video Tag.
HTML allows playing video in the web browser by using <video> tag. To embed the video in the
webpage, we use src element for mentioning the file address and width and height attributes are used to
define its size.
Example: In this example, we are using <video> tag to to add video into the web page. The video
tag uses width, height, and control attributes to set the size and controls of video on web page. Also,
use source tag with src attribute to add source of video.
<!DOCTYPE html>
<html>
<body style="text-align: center;">
<h1 style="color: green;">ZETECH UNIVERSITY</h1>
<h2> Insert video and play in HTML </h2>
<p> Adding Video on my Webpage <p>
<video width="500px" height="500px" controls="controls"/>
<source src="A.mp4" type="video/mp4">
</video>
</body>
</html>
c) Using a (Anchor) Tag.
You can embed a movie in to an HTML document using <a> tag. For compatibility, we recommend
you use the MP4 video format, which is supported by all major browsers and operating systems.
<!DOCTYPE html>
<html>
<body style="text-align: center;">
<h1 style="color: green;">ZETECH UNIVERSITY</h1>
<a href="A.mp4">click here to watch video</a>
</body>
</html>
Inserting Audio in HTML:
Page 4
The HTML <audio> element is used to play an audio file on a web page.
<!DOCTYPE html>
<html>
<body style="text-align: center;">
<figure>
<figcaption>Listen to My Audio:</figcaption>
<audio controls src="GEO.mp3">
</audio>
</figure>
</body>
</html>
Attributes of HTML Audio Tag
There is given a list of HTML audio tag.
Attribute Description
controls It defines the audio controls which is displayed with play/pause buttons.
autoplay It specifies that the audio will start playing as soon as it is ready.
loop It specifies that the audio file will start over again, every time when it is completed.
muted It is used to mute the audio output.
preload It specifies the author view to upload audio file when the page loads.
src It specifies the source URL of the audio file.
Page 5
