Scribd
Upload
16 views

Lecture 5 Images and Sound

This lecture covers images, audio, and video formats for the web. It discusses common file formats like JPG, GIF, and PNG for images and how to embed them in web pages. For audio, it explains MIDI, WAV, and MP3 formats and how to embed audio files. It also provides details on using embed tags and attributes to control audio playback and looping of background sounds on web pages.

Uploaded by

wanderaignatious
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
16 views

Lecture 5 Images and Sound

This lecture covers images, audio, and video formats for the web. It discusses common file formats like JPG, GIF, and PNG for images and how to embed them in web pages. For audio, it explains MIDI, WAV, and MP3 formats and how to embed audio files. It also provides details on using embed tags and attributes to control audio playback and looping of background sounds on web pages.

Uploaded by

wanderaignatious
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 32

Lecture 5: Images, Audio and Video

Lecture Overview
1. Images
 Image formats
 Handling images in web pages
2. Sounds
 Audio formats
 Embedding sound into a web page

2
Images
• Non textual digital data including
drawings, photographs and charts.

3
Image File Formats
• Many different graphics file formats
exist.
• Only 3 are best suited for use on the
Web :GIF,JPEG, and PNG.
• Each has its own unique qualities.
• Hence best used for a particular type
of image.
4
(i) GIF Format
•Graphics Interchange Format.
•Supports 256 colors only.
•Suitable for graphics with large blocks
of the same color e.g. drawing.

5
GIF Format
•File saved with .gif file extension
•E.g. file1.gif
•Strength:
•Weakness:

6
(ii). JPEG (Joint Photographic Experts Group)
•Supports millions of color.
•Suitable for photographic images.
•File saved as .jpg
•E.g file1.jpg
•Strength:
•Weakness:
7
(iii) PNG
•Portable Network Graphics.
•PNG combines some of the best qualities
of both GIF and JPEG.
•doesn’t have very broad browser support
at the moment.
•PNG is for the future
8
Inserting Images into a Web Page
• Use the <img src=“” /> element .
• src attribute indicates the source of the
image.
• Example:
<img src=”msulogo.gif” />
• Note: If the image file is in a different
directory, the full file path must be
specified.
9
Setting Image Properties
1. SpecifyingImage’s Dimensions
• add the width and height attributes.
• <img src=”bush.jpg” width=”200”
height=”100” />
• N/B: dimensions are measured in
pixels.

10
Image Properties cont’d
2. Drawing a border round an image
• add the border attribute and set it
equal to the border’s thickness in
pixels:
• <img src=”msulogo.jpg” width=”200”
height=”100” border=”5” />

11
Image Properties cont’d
3. Defining Alternative Text
• Text that is displayed when the
image cannot be located.
• Add the alt attribute:
<img src=”bush.jpg” alt=” George
Bush picture” />

12
Wrap Text and Align Images

13
Wrap Text and Align Images cont’d

• Add the align attribute with left or


right values.
• <img src=“bush.jpg" align="left" />

14
Wrap Text and Align Images cont’d

• <img src=“bush.jpg" align="right" />


• align="right" will wrap the text
around the left side of the graphic.

15
To control the vertical alignment of an image
relative to text

16
vertical alignment of an image relative to text
cont’d

• <img src="picture.gif" align="top" />


• <img src="picture.gif" align="middle"
/>
• <img src="picture.gif"
align="bottom" />

17
Insert a Background Image

• add the background attribute to the


<body> tag.
• Example :
• <body background=“bush.jpg“>
• The image will fill the page and will
scroll right along with the page’s
content.
18
Creating Image Links

• To turn an image into a link; place an


image element inside anchor tags.
• <a href="http://www.linksite.com">
<img src="picture.gif" /> </a>

19
Audio and Video

• Some Audio Formats:


1. MIDI
2. Waveform Audio
3. MPEG

20
MIDI

• Musical Instrument Digital Interface .


• Rather than record and reproduce
sound directly (like most sound file
formats), MIDI stores instructions for
creating the sound.
• File saved with the .mid file
extension.
21
MIDI cont’d
Advantage
•very small file size hence
downloads quickly.
Disadvantage
•cannot be used to store voice
recordings.

22
Waveform Audio

 A Microsoft’s Windows audio file format.


 File saved as .wav.
 Advantage
i. stores good sound quality.
ii.Supported by Windows (Windows is very
popular).
 Disadvantage – generates very large files
hence takes a long time to download.

23
MPEG

 MPEG (Motion Picture Experts


Group)
 File saved with .mp3; .mp4
 Files are compressed at strikingly
very high ratios.
 E.g. a 40 MB .wav file = 2MB .mp3
file.
24
Advantage
1) Stores both audio and video.
2) generates small files and downloads
quickly.

25
Embedding Audio/Video Files

• Use the <embed src=“ ” /> element.


• src attribute specifies the location of
the sound file on the Web server.
• Example:
<embed src=”backbeat.mp3” />

26
• Browsers can’t play audio/video files
without help from other applications
e.g.. Flash player.
• Such programs are called plug-ins or
add-ons.

27
Embedding Audio Files cont’d

2. Setting the dimensions of the


Control Panel
• “width” and height attributes define
the dimensions of the control panel
• Example:
• <embed src=”backbeat.mid”
width=”100” height=”15” />
28
Audio Files cont’d

3. Controlling Play
• add the autostart = “false” attribute .
• Prevents sound file from automatically
starting to play immediately the page
loads.
• Example:
• <embed src=”backbeat.mid” width=”100”
height=”15” autostart=”false” />
29
4. Adding Background Sounds
<embed src=”backbeat.mid” width=“1”
height=“1” autostart=“true” loop=“-1” />
• Add width=“1” and height =“1” attributes
• This constrains the control panel to a
single pixel that can be hidden anywhere
on the page.

30
• Set autostart =“true” attribute.
• so that the sound begins once the page has
successfully loaded.
• Set loop=“5" attribute.
• Defines the number of times you want the
sound file to play (replay).

31
5. To make the sound play
continuously while the page is viewed
<embed src=”backbeat.mid”
autostart=“true” loop=“-1” />

32

You might also like