Adding Image, audio and video files to
web pages
Khurram Iqbal, Department of Computer
1
Science,CIIT,Islamabad, Pakistan.
Summary of the previous lecture
• Internal links
• External links
• Directory Structure
• Internal document reference
• Some attributes of <a>
Khurram Iqbal, Department of Computer
2
Science,CIIT,Islamabad, Pakistan.
Outline
• Adding images to web pages
• Using images as links
• Image map
• Adding video to web pages
• Adding audio to web pages
Khurram Iqbal, Department of Computer
3
Science,CIIT,Islamabad, Pakistan.
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
• We can add an image by
– <img src=“image-name”>
– <img src=“abc.jpg”>
Khurram Iqbal, Department of Computer
4
Science,CIIT,Islamabad, Pakistan.
1. Adding images to web pages...
Image path and name
Root Directory
examples images
ex.html img1.jpg
Image tag
Src attribute
Khurram Iqbal, Department of Computer
5
Science,CIIT,Islamabad, Pakistan.
1. Adding images to web pages...
Khurram Iqbal, Department of Computer
6
Science,CIIT,Islamabad, Pakistan.
1.1 Attributes of <img> tag
1. Height and width:
• <img src=“image-name” height=“100” width=“100”>
2. Alt attribute:
– <img src=“image-name” alt=“image description”>
3. Align attribute:
– <img src=“image-name” align=“left”>
– Left, right, top, bottom, middle
Khurram Iqbal, Department of Computer
7
Science,CIIT,Islamabad, Pakistan.
1.1 Attributes of <img> tag …
4. Border attribute:
– <img src=“image-name” border=“2”>
Khurram Iqbal, Department of Computer
8
Science,CIIT,Islamabad, Pakistan.
1.1 Attributes of <img> tag …
Khurram Iqbal, Department of Computer
9
Science,CIIT,Islamabad, Pakistan.
1.1 Attributes of <img> tag …
Khurram Iqbal, Department of Computer
10
Science,CIIT,Islamabad, Pakistan.
1.1 Attributes of <img> tag …
Khurram Iqbal, Department of Computer
11
Science,CIIT,Islamabad, Pakistan.
1.1 Attributes of <img> tag …
Align top
Align middle
Khurram Iqbal, Department of Computer
12
Science,CIIT,Islamabad, Pakistan.
1.1 Attributes of <img> tag …
Wrong image name
Khurram Iqbal, Department of Computer
13
Science,CIIT,Islamabad, Pakistan.
1.1 Attributes of <img> tag …
Image is found
Image not found
Khurram Iqbal, Department of Computer
14
Science,CIIT,Islamabad, Pakistan.
1.1 Attributes of <img> tag …
Khurram Iqbal, Department of Computer
15
Science,CIIT,Islamabad, Pakistan.
1.1 Attributes of <img> tag …
Khurram Iqbal, Department of Computer
16
Science,CIIT,Islamabad, Pakistan.
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>
Khurram Iqbal, Department of Computer
17
Science,CIIT,Islamabad, Pakistan.
2. Using images for linking…
Link
Image
Khurram Iqbal, Department of Computer
18
Science,CIIT,Islamabad, Pakistan.
3. Image maps
• Image maps allow you to add multiple links
to the same image
• Each link can point to a different page
• Each of these clickable areas is known as a
hotspot
Khurram Iqbal, Department of Computer
19
Science,CIIT,Islamabad, Pakistan.
3. Image maps…
• Defining a map:
• Step1 (Define a map):
<map name=“map name”>
<area shape=“link-shape” coords=“coordinates
of link area” href=“page-reference”>
</map>
• Step2(using the map):
<img src=“image-title” usermap=“#map-name”>
Khurram Iqbal, Department of Computer
20
Science,CIIT,Islamabad, Pakistan.
3. Image maps…
Map name
Shape Coordinates
Map Area tag
Link
End of Map
Using a map Khurram Iqbal, Department of Computer
Adding an Image Science,CIIT,Islamabad, Pakistan.
21
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”>
Khurram Iqbal, Department of Computer
22
Science,CIIT,Islamabad, Pakistan.
4. Adding videos to web pages…
• Attributes of <video> tag:
• Auto-play
• Controls
• Height
• Loop
Khurram Iqbal, Department of Computer
23
Science,CIIT,Islamabad, Pakistan.
4. Adding videos to web pages…
Source of the video
Video tag
Controls attribute
Loop attribute
Auto-play attribute
Khurram Iqbal, Department of Computer
24
Science,CIIT,Islamabad, Pakistan.
5. Adding audio to web pages…
• The <audio> tab is used to add a video 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 video to our page as
– <audio src=“abc.mp3”>
Khurram Iqbal, Department of Computer
25
Science,CIIT,Islamabad, Pakistan.
5. Adding audio to web pages…
• Attributes of <audio> tag:
• Auto-play
• Controls
• Loop
Khurram Iqbal, Department of Computer
26
Science,CIIT,Islamabad, Pakistan.
Summary
• Adding images to web page
• Using images as links
• Image map
• Adding audio and video to web page
Khurram Iqbal, Department of Computer
27
Science,CIIT,Islamabad, Pakistan.
References
• Chapter 3, Beginning HTML, XHTML,CSS,
and JavaScript, by Jon Duckett, Wiley
Publishing; 2009, ISBN: 978-0-470-
54070-1.
Khurram Iqbal, Department of Computer
28
Science,CIIT,Islamabad, Pakistan.
