Presentation is loading. Please wait.

Presentation is loading. Please wait.

Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.

Published byVincent McKenzie Modified over 9 years ago

Similar presentations

Presentation on theme: "Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1."— Presentation transcript:

1 Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1

2 Summary of the previous lecture Internal links External links Directory Structure Internal document reference Some attributes of Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 2

3 Outline Adding images to web pages Using images as links Image map Adding video to web pages Adding audio to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 3

4 1. Adding images to web pages tag is used to add images to web pages SRC attribute of the tag is used to indicate the source of the image We can add an image by – Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 4

5 1. Adding images to web pages... Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 5 Root Directory examples ex.html images img1.jpg Image tag Src attribute Image path and name

6 1. Adding images to web pages... Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 6

7 1.1 Attributes of tag 1.Height and width: 2.Alt attribute: – 3.Align attribute: – – Left, right, top, bottom, middle Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 7

8 4. Border attribute: – Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 8 1.1 Attributes of tag …

9 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 9 1.1 Attributes of tag …

10 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 10 1.1 Attributes of tag …

11 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 11 1.1 Attributes of tag …

12 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 12 1.1 Attributes of tag … Align top Align middle

13 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 13 1.1 Attributes of tag … Wrong image name

14 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 14 1.1 Attributes of tag … Image is found Image not found

15 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 15 1.1 Attributes of tag …

16 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 16 1.1 Attributes of tag …

17 2. Using images for linking We can put images between and tags instead of text to link other documents or portions of the page Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 17

18 2. Using images for linking… Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 18 Link Image

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 Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 19

20 3. Image maps… Defining a map: Step1 (Define a map): Step2(using the map): Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 20

21 3. Image maps… Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 21 Map name Map Area tag Shape Coordinates Link Using a map Adding an Image End of Map

22 4. Adding videos to web pages The tag is used to add a video to a web page This tag is provided in HTML5 The src attribute of the tag is used to indicate the source of the video We can add a video to our page as – Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 22

23 4. Adding videos to web pages… Attributes of tag: Auto-play Controls Height Loop Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 23

24 4. Adding videos to web pages… Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 24 Video tag Source of the video Auto-play attribute Loop attribute Controls attribute

25 5. Adding audio to web pages… The tab is used to add a video to a web page This tag is provided in HTML5 The src attribute of the tag is used to indicate the source of the audio We can add a video to our page as – Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 25

26 5. Adding audio to web pages… Attributes of tag: Auto-play Controls Loop Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 26

27 Summary Adding images to web page Using images as links Image map Adding audio and video to web page Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 27

28 Chapter 3, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470- 54070-1. 28 Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan. References

Download ppt "Adding Image, audio and video files to web pages Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1."

Similar presentations

Working with Graphics – Lesson 21 Working with Graphics Lesson 2.

Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
HTML 5 and CSS 3, Illustrated Complete Unit K: Incorporating Video and Audio.

HTML 5 and CSS 3, Illustrated Complete Unit K: Incorporating Video and Audio.
Chapter 5 Creating an Image Map.

Chapter 5 Creating an Image Map.
COMP101 – Exploring Multimedia and Internet Computing LA2 (Thur 14:00 – 16:50) TA: Jackie Lo.

COMP101 – Exploring Multimedia and Internet Computing LA2 (Thur 14:00 – 16:50) TA: Jackie Lo.
Including images in Web pages Skills: use the tag IT concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike.

Including images in Web pages Skills: use the tag IT concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike.
File uploading in PHP Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.

File uploading in PHP Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.
HTML. Creating a Table Attributes: border: indicates the border type of the table Value: 0 (no border), 1, 2, etc. cols: indicates the number of columns.

HTML. Creating a Table Attributes: border: indicates the border type of the table Value: 0 (no border), 1, 2, etc. cols: indicates the number of columns.
Images and Tables. Displaying Image Attributes: SRC= mypic.gif – Name of the picture file SRC= pic/mygif.jpg – Name of file found in pic directory.

Images and Tables. Displaying Image Attributes: SRC= " mypic.gif " – Name of the picture file SRC= " pic/mygif.jpg " – Name of file found in pic directory.
Notes Ch. 12—Creating Tables Web Page Design. Why Use Tables? Tables are used to create a variety of items such as calendars, charts, and spreadsheets.

Notes Ch. 12—Creating Tables Web Page Design. Why Use Tables? Tables are used to create a variety of items such as calendars, charts, and spreadsheets.
Tables in HTML Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.

Tables in HTML Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.
Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative.

Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative.
Adding Images & Working with Images Unit 2. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: To display Art To display Photographs.

Adding Images & Working with Images Unit 2. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: To display Art To display Photographs.
Deleting and Updating Records in MySQL using PHP Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.

Deleting and Updating Records in MySQL using PHP Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.
Page Layout Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1.

Page Layout Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1.
Web application: Operation and maintenance Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.

Web application: Operation and maintenance Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan. 1.
WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.

WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.
History, Navigator, Screen and Form Objects Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1.

History, Navigator, Screen and Form Objects Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1.
Informatics Computer School CS114 Web Publishing HTML Lesson 2.

Informatics Computer School CS114 Web Publishing HTML Lesson 2.
Agenda Links External and Internet Links Anchor Tag Text Hyperlinks Image Hyperlinks Images Image Attributes: src, alt, width, height, align, border.

Agenda Links External and Internet Links Anchor Tag Text Hyperlinks Image Hyperlinks Images Image Attributes: src, alt, width, height, align, border.
CSCE 102 - Chapter 5 (Links, Images, & Multimedia) CSCE 102 - General Applications Programming 2015-10-3 Benito Mendoza 1 By Benito Mendoza Department.

CSCE Chapter 5 (Links, Images, & Multimedia) CSCE General Applications Programming Benito Mendoza 1 By Benito Mendoza Department.

Similar presentations

Ads by Google