Transcript iframe - Muhammad sami

Using HTML

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.





Src (source)
Height
Width
Frameborder
Align
You can add youtube videos using the Iframe:
Example:
<iframe width="420" height="345"
src="http://www.youtube.com/embed/vP0cUBi4h
wE"> </iframe>
<iframe
src="http://www.dailymotion.com/embed/video/x
26jsjo_four-stories-to-watch-in-week-5-of-thesec_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.
5



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.
❑ 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.

Most static images on the Web are bitmapped
images.
Browsers tend to support three common
bitmap graphics formats:
❑ GIF: Graphics Interchange Format
❑ JPEG: Joint Photographic Experts Group
Format
❑ PNG: Portable Network Graphics
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 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.
❑ 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.


<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.

<img> element can carry the following
attributes:
src
alt
align
border
height
width
hspace
vspace
longdesc
name
Align Attribute:
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.
hspace and vspace Attributes: used to control
the amount of whitespace around an image.
hspace=”10”
vspace=”14”
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


<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>

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>
HTML5 Audio Tags
<Embed>
<embed src=“test1.mp3">
<object>
<object data=“test2.mp3">
<param name="autoplay" value="false">
</object>

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.
<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>
<embed>
<embed src=“test.swf" height="400"
width="400">
<object>
<object data="intro.flv" height="200"
width="200"></object>