1

Web Engineering
Lecture 03

2
Adding Image, audio and video files to
web pages

3
Summary of the previous lecture
• Internal links
• External links
• Directory Structure
• Internal document reference
• Some attributes of <a>
• Other type of links

4
Outline
• Adding images to web pages
• Using images as links
• Adding video to web pages
• Adding audio to web pages

5
1. Adding images to web pages
• <img> tag is used to add images to web pages
• SRC attribute of the <img> tag is used to
indicate the source of the image
• The <img> tag is empty, it contains attributes
only, and does not have a closing tag.

6
1. Adding images to web pages
Images can be added as follows

• We can add an image by

– <img src=“image-name”>
– <img src=“abc.jpg”>

7
1. Adding images to web pages
• HTML Images Syntax
• In HTML, images are defined with
the <img> tag.
• The <img> tag is empty, it contains attributes
only, and does not have a closing tag.
• The src attribute specifies the URL (web
address) of the image:
• <img src="url" alt="some_text">

8
1. Adding images to web pages
• The alt Attribute
• The alt attribute specifies an alternate text for an
image, if the image cannot be displayed.
• The alt attribute provides alternative information
for an image if a user for some reason cannot view
it (because of slow connection, an error in the src
attribute, or if the user uses a screen reader).
• If a browser cannot find an image, it will display
the alt text

9
1. Adding images to web pages
Images can be added as follows

• IMG stands for "image." It announces to the

browser that an image will go here on the
page.
• SRC stands for "source." This again is an
attribute. It's telling the browser where to go
to find the image.

10
1. Adding images to web pages
Images supported by web

• .jpg
• .gif
• .png
• .jpeg
• .bmp

11
 1. Adding images to web pages...

Image path and name

Root Directory

examples images

ex.html img1.jpg
Image tag

Src attribute

12
1. Adding images to web pages...

13
1.1 Attributes of <img> tag
• Height and width:
• You can use the style attribute to specify the
width and height of an image.
• The values are specified in pixels (use px after
the value):
• Specifies the height and width of an image
<img src=“image-name” height=“100”
width=“100”>
14
1.1 Attributes of <img> tag
• Alt attribute:
• Shows alternate text when an image is not
available
<img src=“image-name” alt=“image
description”>

15
1.1 Attributes of <img> tag
• Align attribute:
• Align the image as desired
<img src=“image-name” align=“left”>

16
1.1 Attributes of <img> tag
• Align attribute:
• Some values for aligned are
 Value Description

 left Align the image to the left

 right Align the image to the right

 middle Align the image in the middle

 top Align the image at the top

 bottom Align the image at the bottom

17
1.1 Images in Another Folder
• If not specified, the browser expects to find
the image in the same folder as the web page.
• However, it is common to store images in a
sub-folder. You must then include the folder
name in the src attribute:
• Example
• <img src="/images/html5.gif" alt="HTML5
Icon“>

18
1.1 Animated Images
• The GIF standard allows animated images:
• Example
• <img src="programming.gif" alt="Computer
Man“ >

19
1.1 Attributes of <img> tag …
• Border attribute:
• Add border around the image
<img src=“image-name” border=“2”>

20
1.1 Attributes of <img> tag …
• Differences Between HTML 4.01 and HTML5
The following attributes: align, border, hspace,
and vspace are not supported in HTML5.

21
1.1 Attributes of <img> tag …

22
1.1 Attributes of <img> tag …

23
1.1 Attributes of <img> tag …

24
1.1 Attributes of <img> tag …

Align top
middle
Align

25
1.1 Attributes of <img> tag …

Wrong image name

26
1.1 Attributes of <img> tag …

Image is found

Image not found

27
1.1 Attributes of <img> tag …

28
1.1 Attributes of <img> tag …

29
2. Using images for linking
• We can put images between <a> and </a >
tags instead of text to link other documents
or portions of the page
• <a href=“page-reference”> <img
src=“image-srource”></a>
• <a href=“abc.html”> <img
src=“img.jpg”></a>

30
 2. Using images for linking…
Link

Image

31
4. Adding videos to web pages
• The <video> tag is used to add a video to a
web page
• This tag is provided in HTML5
• The src attribute of the <video> tag is used to
indicate the source of the video
• We can add a video to our page as
– <video src=“abc.mp4”>

32
4. Adding videos to web pages
• Videos can also be added as

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.

</video>
33
4. Adding videos to web pages
• It supports following video formats
File Format Media Type

 MP4 video/mp4

 WebM video/webm

 Ogg video/ogg

34
4. Adding videos to web pages…
• Attributes of <video> tag:
• Auto-play
• Controls
• Height
• Loop

35
 4. Adding videos to web pages…

Source of the video

Video tag

Controls attribute
Loop attribute

Auto-play attribute

36
5. Adding audio to web pages…
• The <audio> tab is used to add a audio to a
web page
• This tag is provided in HTML5
• The src attribute of the <audio> tag is used to
indicate the source of the audio
• We can add a audio to our page as
– <audio src=“abc.mp3”>

37
5. Adding audio to web pages…
• Audio can also be added as
<audio controls>

<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.

</audio>
38
5. Adding audio to web pages…
• Audio formats supported by audio tag are
File Format Media Type

MP3 audio/mpeg

Ogg audio/ogg

Wav audio/wav

39
5. Adding audio to web pages…
• Attributes of <audio> tag:
• Auto-play
• Controls
• Loop

40
5. Adding audio to web pages…
• Control In audio
• The controls attribute is a boolean attribute.
• Audio controls include:
– Play
– Pause
– Seeking
– Volume

41
Summary
• Adding images to web page
• Using images as links
• Adding audio and video to web page

42
 Summary
• Use the HTML <img> element to define an
image
• Use the HTML src attribute to define the URL of
the image
• Use the HTML alt attribute to define an
alternate text for an image, if it cannot be
displayed
• Use the HTML width and height attributes to
define the size of the image
43
THANK YOU

44