Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer...
-
Upload
vincent-mckenzie -
Category
Documents
-
view
218 -
download
1
Transcript of Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer...
![Page 1: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/1.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
1
Adding Image, audio and video files to web pages
![Page 2: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/2.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
2
Summary of the previous lecture
• Internal links• External links• Directory Structure• Internal document reference• Some attributes of <a>
![Page 3: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/3.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
3
Outline
• Adding images to web pages• Using images as links• Image map• Adding video to web pages• Adding audio to web pages
![Page 4: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/4.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
4
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”>
![Page 5: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/5.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
5
1. Adding images to web pages...
Root Directory
examples
ex.html
images
img1.jpg
Image tag
Src attribute
Image path and name
![Page 6: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/6.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
6
1. Adding images to web pages...
![Page 7: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/7.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
7
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
![Page 8: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/8.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
8
4. Border attribute:– <img src=“image-name”
border=“2”>
1.1 Attributes of <img> tag …
![Page 9: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/9.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
9
1.1 Attributes of <img> tag …
![Page 10: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/10.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
10
1.1 Attributes of <img> tag …
![Page 11: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/11.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
11
1.1 Attributes of <img> tag …
![Page 12: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/12.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
12
1.1 Attributes of <img> tag …
Alig
n to
pAl
ign
mid
dle
![Page 13: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/13.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
13
1.1 Attributes of <img> tag …
Wrong image name
![Page 14: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/14.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
14
1.1 Attributes of <img> tag …
Image is found
Image not found
![Page 15: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/15.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
15
1.1 Attributes of <img> tag …
![Page 16: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/16.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
16
1.1 Attributes of <img> tag …
![Page 17: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/17.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
17
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>
![Page 18: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/18.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
18
2. Using images for linking…
Link
Image
![Page 19: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/19.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
19
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
![Page 20: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/20.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
20
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”>
![Page 21: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/21.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
21
3. Image maps…
Map nameMap Area tag
Shape Coordinates
Link
Using a mapAdding an Image
End of Map
![Page 22: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/22.jpg)
22
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”>
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
![Page 23: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/23.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
23
4. Adding videos to web pages…
• Attributes of <video> tag:• Auto-play• Controls• Height• Loop
![Page 24: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/24.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
24
4. Adding videos to web pages…Vi
deo
tag Source of the video
Auto-play attribute
Loop attributeControls attribute
![Page 25: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/25.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
25
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”>
![Page 26: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/26.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
26
5. Adding audio to web pages…
• Attributes of <audio> tag:• Auto-play• Controls• Loop
![Page 27: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/27.jpg)
Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.
27
Summary• Adding images to web page• Using images as links• Image map• Adding audio and video to web page
![Page 28: Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.](https://reader034.fdocuments.in/reader034/viewer/2022051417/56649f175503460f94c2d912/html5/thumbnails/28.jpg)
Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.
28
• Chapter 3, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470-54070-1.
References