Iframes & Images

Using HTML

HTML Iframes

An iframe is used to display a web page

within a web page.

Syntax for adding an iframe:

<iframe src="URL"></iframe>
The URL points to the location of the separate
page.

Iframe Attributes
Src (source)
Height
Width
Frameborder
Align

Youtube videos using

IFrame
You can add youtube videos using the Iframe:
Example:
<iframe width="420" height="345"
src="http://www.youtube.com/embed/vP0cUBi4hwE"
> </iframe>
<iframe
src="http://www.dailymotion.com/embed/video/x26jsj
o_four-stories-to-watch-in-week-5-of-the-sec_sport?
PARAMS" width="400" height="400"
frameborder="2">

Images and Objects

Objectives
Upon completing this section, you will be able
to:

Add images to your pages.

Adding Images to Your Site

Images and graphics can really bring your
site to life.
Different image formats you can use on the
Web (such as GIFs, JPEGs, and PNGs)

Issues in adding Image:

Choosing right format
Copying Images from other sites.

Types of Image Formats

Bitmapped graphics divide a picture into a grid of pixels
and specify the color of each pixel, much as a computer tells
a screen the color of each pixel. Broadly speaking, bitmaps
are ideal for photographs and complicated gradations of
shade and color. There are several different Bitmap formats;
common ones include JPEG, GIF, TIFF, PNG, and the rather
confusingly named bitmap or BMP.
Vector graphics break the image into lines and shapes,
and store the lines as coordinates. They then fill the spaces
between the lines with color. Vector graphics are commonly
used for line art, illustration, and animation. More recently
some formats such as Flash and SVG are making use of
vector graphics.

Bitmap Images

Most static images on the Web are

bitmapped images.

Types of Bitmap Images

Browsers tend to support three common
bitmap graphics formats:
GIF: Graphics Interchange Format
JPEG: Joint Photographic Experts Group
Format
PNG: Portable Network Graphics

Keeping File Sizes Small

The rule of thumb is:
Use JPEGs for photo-realistic pictures with a lot of detail,
or subtle shade differences you want to preserve.
Use GIFs for images with flat color (rather than textured
colors), and hard edges, such as diagrams, text, or logos.
You can also consider using PNGs if you do not need the
advanced features such as transparency, or if you know
the majority of your visitors will be using more recently
released browsers.

Illustration of Image Types

Vector Images
Illustration and animation software tends to
use vector formats to save images, and the
most popular vector graphics format on the
Web is Flash.
Browsers and XHTML do not, by default,
support any vector graphics formats,
although the main browsers now ship with
the Flash Player that is required to view
Flash files.

Types of Vectors Images

Flash Files: Flash is currently the most popular way of
deploying vector graphics and animations on the Web.
SVG: W3C developed Scalable Vector Graphics (SVG),
which (like XHTML) is written in XML, and would thus be
easily integrated with XHTML (Furthermore, it is an open
standard, not the creation of an individual company as
Flash is.) A number of tools support SVG, although at the
time of this writing it is not used very widely.
Microsoft has also come up with a technology called
Silverlight that uses vector graphics and competes with
Flash.

Adding Images Using the <img>

Element

<IMG>This element defines a graphic image on

the page.

It must carry:
src attribute indicating the source of the image
an alt attribute whose value is an alternate
description for the image in case it does not load
or the user has a visual impairment.

Attributes of <img>

<img> element can carry the following

attributes:
src
alt
align
border
height
width
hspace
vspace
longdesc
name

Attributes Description
Align Attribute:

Attributes Description
Border Attribute: Specifies the width of the
border around the image in pixels:
Say border=4
Height and Width Attributes: The height
and width attributes specify the height and
width of the image:
height=120 width=180
The values for these attributes are almost
always shown in pixels.

Attributes Description
hspace and vspace Attributes: used to
control the amount of whitespace around an
image.
hspace=10
vspace=14

Attributes Description
longdesc Attribute: The longdesc attribute is
used to indicate the URL of a document (or part
of a document) containing a description for the
image in more detail.
name Attribute: The name attribute allows
you to specify a name for the image so that it
can then be referenced from script code. It is the
predecessor to, and has been replaced by, the
id attribute.
name=image_name

Some Examples on images

1) <IMG SRC=jordan.gif border=4>
2) <IMG SRC=" jordan.gif" width="60"
height="60">
3) <IMG SRC=jordan.gif" ALT="This is a
text that goes with the image">
4) <IMG SRC=" jordan.gif Hspace="30"
Vspace="10" border=20>
5) < IMG SRC =" jordan.gif align="left">
blast blast blast blast blast

20

Adding Images Using the

<object> Element

<Object>This element is also used to add a

graphic image on the page.

It must carry:
Data attribute indicating the source of the image

<object width="400" height="400"

data="w3.jpg"></object>

Adding Audio

HTML5 defines a new element which specifies a

standard way to embed an audio file on a web
page: the <audio> element.

Example:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Audio Formats and Browser

Support

MIME Types for Audio Formats

HTML5 Audio Tags

Other ways to add audios

<Embed>
<embed src=test1.mp3">
<object>
<object data=test2.mp3">
<param name="autoplay" value="false">
</object>

Adding Video

HTML5 defines a new element which specifies a standard way to

embed a video/movie on a web page: the <video> element.

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support

the <video> element.

Internet Explorer 8 and earlier versions, do not support the

<video> element.

You should also insert text content between the <video> and
</video> tags for browsers that do not support the <video>
element.

The <video> element allows multiple <source> elements.

<source> elements can link to different video files. The browser
will use the first recognized format.

Adding Video
<video width="320" height="240" controls>
<source src="movie.mp4"
type="video/mp4">
<source src="movie.ogg"
type="video/ogg">
Your browser does not support the video tag.
</video>

Video Formats and Browser

Support

MIME Types for Video Formats

Other ways to add Videos

<embed>
<embed src=test.swf" height="400"
width="400">
<object>
<object data="intro.flv" height="200"
width="200"></object>