Scribd
Upload
47 views

Week 7 - Web Page Design Content

This document discusses working with multimedia, including images, video, and audio on websites. It defines multimedia as a combination of different media types like text, images, sound, and video. It provides guidance on choosing relevant images for a site, storing images on a site, and adding images to web pages using HTML img tags. It also covers adding video and audio to pages using the HTML5 video and audio tags, and supporting different file formats for optimal browser compatibility.

Uploaded by

Maam Sheinnyx
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
47 views

Week 7 - Web Page Design Content

This document discusses working with multimedia, including images, video, and audio on websites. It defines multimedia as a combination of different media types like text, images, sound, and video. It provides guidance on choosing relevant images for a site, storing images on a site, and adding images to web pages using HTML img tags. It also covers adding video and audio to pages using the HTML5 video and audio tags, and supporting different file formats for optimal browser compatibility.

Uploaded by

Maam Sheinnyx
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

Week 7 : Working with

Multimedia
Our Lady of Fatima University – Quezon
City Campus
What is
Multimedia?
A combination of the different
forms of media such as text,
pictures, sounds, music, animation,
and video.
Choosing Images for
Your Site
A picture can say a thousand words,
and great images help make the
difference between an average-
looking site and a really engaging
one.
Images should..

Be relevant Convey information Convey the right mood Be instantly


. . .
recognizable
.
Stock photos

https://www.istockph https://www.gettyima https://www.freeimag https://freesvg.org/


oto.com/ ges.com/ es.com/
Storing Images on Your Site
If you are building a site from scratch, it is good
practice to create a folder for all of the images
the site uses
Adding Images
<img src="images/mdl.png“
alt=“Monkey D. Luffy" title="Monkey
D. Luffy, also known as "Straw Hat
Luffy" and commonly as "Straw Hat",
is the main protagonist of the
manga and anime, One Piece." />
src - This tells
<img> is an empty the browser where
element it can find the
image file.

alt -
provides a title – display as
text tootip
description
Height & Width
of Images
height
This specifies the height of the
image in pixels.
width
This specifies the width of the
image in pixels.
Where to Place
Images
in Your Code?
1: before a paragraph
The paragraph starts on a new
line after the image.

2: inside the start of a


paragraph
The first row of text aligns with
the bottom of the image.

3: in the middle of a
paragraph
The image is placed between the
words of the paragraph that it
appears in.
Where you place the image in
the code is important because
browsers show HTML elements
in one of two ways:

• Block elements always appear on


a new line.

• Inline elements sit within a


block level element and do not
start on a new line.
Old Code: Aligning
Images Horizontally
and Vertically
align The
take
align
these
attribute can
horizontal
The align attribute was values:
commonly used to indicate how left and right
the other parts of a page should
flow around an image vertical values:
top, middle, and bottom
img.large {

Controlling size width: 500px;


height: 500px;

and alignment
}
img.medium {
width: 250px;

of images in
height: 250px;
}
img.small {

CSS
width: 100px;
height: 100px;
}
img.align-left

Controlling size { float: left; margin-right: 10px;}

and alignment img.align-right


{ float: right; margin-left: 10px;}

of images in img.align-center
{ display: block; margin: 0px auto;}
CSS
Adding Video
to Your Pages
The <video> element has a
number of attributes which allow
you to control video playback
To reach as many browsers as
possible, you should provide the
video in the following formats:
H264: IE and Safari
WebM: Android, Chrome, Firefox, Opera
Adding Audio
to Your Pages
HTML5 introduced the <audio>
element to include audio files
in your pages. As with HTML5
video, browsers expect different
formats for the audio
MP3: Safari 5+, Chrome 6+, IE9
Ogg Vorbis: Firefox 3.6, Chome
6, Opera 1.5, IE9
Sound Format Extension Description
Real Audio Format .rm Permits audio streaming with low
.ram bandwidths but the quality is
reduced.
AU Format .au Supported by many software
systems over a wide range of
platforms.
Audio Interchange File .aif Developed by Apple; not
Format .aiff supported by all web browsers

Sound Format .snd Developed by Apple; not


supported by all web browsers

Moving Pictures Experts .mp3 Most popular format for music


Group .mpga

Wave Format .wav Developed by IBM and Windows;


supported by computers running
on Windows

You might also like