|
|
|
|
|
|
Lesson#8
|
FRAMES AND IMAGES IN HTML
|
|
|
|
FRAMES AND IMAGES IN HTML
The concept of frames is used to set up a site so that one page
remains in view in part of the browser screen
while the visitors can use the rest of the screen to view other
pages using hyperlinks.
General format
<Frameset> and <Frame> are the two basic tags. This concept uses
two different types of pages –
frameset page and content pages. Frameset page divides the
browser window into a set of frames and
defines the size of each frame. It also specifies which content
pages are displayed in which frame. It has no
body section (no body tag). Content pages are just regular HTML
pages.
Dividing the screen horizontally
<HTML>
<HEAD>
<TITLE>Horizontal Frames</TITLE>
</HEAD>
<FRAMESET ROWS="25%,75%">
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
Result is shown in Fig. 1 below.
Fig. 1
Dividing the screen vertically
<HTML>
<HEAD>
<TITLE>Vertical Frames</TITLE>
</HEAD>
<FRAMESET COLS="20%,60%,20%">
<FRAME>
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
32
Result is shown in Fig. 2 below.
Fig. 2
Frames with content - frames.htm <HTML> <HEAD><TITLE>Horizontal
Frames with
Content</TITLE> </HEAD> <FRAMESET ROWS="25%,75%"> <FRAME
SRC="1.htm“
Name=“upper”> <FRAME SRC="2.htm“ Name=“lower”> </FRAMESET>
</HTML> Result is
shown in Fig. 3 below.
Fig. 3
Note that contents of the files 1.htm and 2.htm are displayed in
Fig. 6 in the upper and
lower frames, respectively.
Code - 1.htm <HTML>
<HEAD><BODY> <H1>This text is from 1.HTM</H1> </BODY>
</HTML> Code - 2.htm <HTML> <HEAD><TITLE>Horizontal Frames with
links</TITLE>
</HEAD> <BODY> <H1>This text is from 2.HTM</H1> <H1><A
HREF=“3.htm"
TARGET="lower">This is a link to 3.HTM</A></H1> </BODY> </HTML>
Note that ‘target’ is an attribute of the <A> tag . Specifying
its value as ‘lower’ would mean that contents of
file 3.htm should open in the frame named ‘lower’ on clicking
the clickable sentence, as shown
in Fig. 4
below.
33
Fig. 4
Code - 3.htm
<HTML>
<HEAD>
<TITLE>Horizontal Frames</TITLE>
</HEAD>
<BODY>
<H1>This text is from 3.HTM</H1>
<H1><A HREF=“2.htm" TARGET="lower">This is a link back to
2.HTM</A></H1>
</BODY>
</HTML>
Ready-made names for frames
Target=“_self” – loads the new page into the same frame that
contains the link Target=“_top” - loads the
new page into the entire window Target=“_blank” – loads the new
page into a new browser window
Some frame attributes
- NORESIZE – used in the <frame> tag, prevents the surfers from
changing the size of the frame
- SCROLLING – this attribute determines whether a scroll bar
appears with a frame (e.g,
Scrolling=“yes” in the <frame> tag makes it appear)
- BORDER or FRAMEBORDER – Set this attribute to 0 for not
displaying a border between the
frames
Nesting frames
We can further divide a frame into different frames. This
concept is called nesting of frames.
See the following example in this regard:
<HTML> <HEAD><TITLE>Nested
Frames</TITLE> </HEAD> <FRAMESET
ROWS="25%,75%"> <FRAME SRC="1.htm"
NAME="upper">
<FRAMESET COLS="50%,50%"> <FRAME SRC="2.htm" NAME="lower">
<FRAME
SRC="3.htm" NAME="right"> </FRAMESET>
</FRAMESET>
</HTML>
34
35
Result is shown in Fig. 5 below.
Fig. 5
Images can be links, too
We can make images clickable as shown in the following example:
<HTML> <HEAD><TITLE>Images Can Be Links, Too</TITLE> </HEAD>
<BODY> Click this
house <A HREF=“main.htm"><IMG SRC="home.gif"></A> to return to
my home page. </BODY>
</HTML> Result of
this code is shown in Fig. 6 below.
Fig. 6
Images can be maps, too
An image map is a web page graphics with several defined
‘clickable’ areas. To create an image map perform
three steps:
1. Decide which distinct image regions you want to use and then
determine the coordinates of each
region.
2. Use the <Map> and <Area> tags to assign a link to each of
these regions.
3. Add a special version of the <IMG> tag to your web page.
Step 1: determine the map coordinates
A pixel is a point marked on computer screen. Typically computer
screen arranges pixels in 800 columns by
600 rows. A pixel can be identified by giving its column no.
followed by its row no. (e.g, pixel 10,15).
Suppose we want to make the following rectangular image (Fig. 7)
as an image map. To know the
coordinates of its different clickable regions one way is to set
up an HTML file with a link that uses the
following format: <A href=“whatever”><Img src=“imagename”
ISMAP></A> Load this HTML file
into a browser and move the mouse pointer over the image. The
image co-ordinates of the current mouse
position appear in the status bar. You can write these
coordinates on a piece of paper.
199,0 599,0
0,0 399,0
A
B
C
36
199,99399,99599,99
Fig. 7
If the rectangular image is 600 pixels in width and 100 pixels
in height, and you want to display it at the top
of the screen dividing it into three equally clickable areas,
then you can find the coordinates of each region
as follows:
Area A – defined by coordinate 0,0 in the upper-left corner and
199,99 in the lower-right corner Area B –
defined by co-ordinate 199,0 in the upper-left corner and 399,99
in the lower-right corner Area C – defined
by co-ordinate 399,0 in the upper-left corner and 599,99 in the
lower-right corner
Step 1: Use <Map> to define the image map
<Map Name=“Testmap”> <Area shape=“Rect” coords=“0,0,199,99”
href=“a.htm”> <Area
shape=“Rect” coords=“199,0,399,99” href=“b.htm”> <Area
shape=“Rect” coords=“399,0,599,99”
href=“c.htm”> </Map> Note that we use area tag within the <Map>
tag, and use ‘shape’, ‘coords’ and
‘href’ attributes of the area tag. ‘href’ attribute specifies
the file which would open on clicking the clickable
area.
Step 1: Add the image map to the web page
For adding the image map to the web page, use the image tag in
the format shown below: <Img
src=“coords.gif” usemap=“#Testmap”>
Note that you give name of the main image file as value of the
‘src’ attribute. Name of the image map is
given as value of the ‘usemap’ attribute.
<Area> tag’s SHAPE attribute
the “shape” attributes also accepts the values “circle” and
“poly” (for a polygon). For a circle, “coords”
attribute takes three values: the x-coordinate of the circle’s
centerpoint, the y-coordinate of the center point,
and the radius of the circle. For a polygon, the “coords”
attribute takes three or more sets of coordinates.
|
|
|
|
|