Lecture 5 Images and Sound

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

Lecture 5 Images and Sound

Uploaded by

Copyright:

Available Formats

Lecture 5 Images and Sound

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 5 Images and Sound

Uploaded by

Copyright:

Available Formats

Lecture 5: Images, Audio and Video

• Add the align attribute with left or

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

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

• add the background attribute to the

• To turn an image into a link; place an

• Some Audio Formats:

• Musical Instrument Digital Interface .

 A Microsoft’s Windows audio file format.

 MPEG (Motion Picture Experts

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

2. Setting the dimensions of the

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.