Web Design and Development
Mr. Nasir Khan
1
Adding Image, audio and video files to
web pages
2
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.
3
1. Adding images to web pages
Images can be added as follows
• We can add an image by
– <img src=“image-name”>
– <img src=“[Link]”>
4
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">
5
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.
• If a browser cannot find an image, it will display the alt
text
6
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.
7
1. Adding images to web pages
Images supported by web
• .jpg
• .gif
• .png
• .jpeg
• .bmp
8
1. Adding images to web pages...
Image path and name
Image tag
Src attribute
9
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”>
10
1.1 Attributes of <img> tag
Alt attribute:
• Shows alternate text when an image is not available
<img src=“image-name” alt=“image description”>
11
1.1 Attributes of <img> tag
Align attribute:
• Align the image as desired
<img src=“image-name” align=“left”>
12
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
13
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/[Link]" alt="HTML5 Icon“>
14
1.1 Attributes of <img> tag …
• Border attribute:
• Add border around the image
<img src=“image-name” border=“2”>
15
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=“[Link]”> <img src=“[Link]”></a>
16
3. 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”>
17
3. Adding videos to web pages…
Attributes of <video> tag:
• Auto-play
• Controls
• Height
• Loop
18
4. Adding videos to web pages…
Source of the video
Video tag
Controls attribute
Loop attribute
Auto-play attribute
19
4. 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”>
20
5. Adding audio to web pages…
Attributes of <audio> tag:
• Auto-play
• Controls
• Loop
21
THANK YOU
22
