Web Technology
(Website Development)
Neeraj Kr. Gupta
Asstt. Prof.
IIMT, Meerut
• Image Maps
An image-map is an image with clickable areas. Use the <map> tag
to define an image-map.
The name attribute of the <map> tag is associated with the <img>'s
usemap attribute and creates a relationship between the image
and the map.
The <map> tag contains a number of <area> tags, that defines the
clickable areas in the image-map:
Example
<img src="[Link]" alt="Planets" usemap="#planetmap" style="width:145
px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="[Link]">
<area shape="circle" coords="90,58,3" alt="Mercury" href="[Link]">
<area shape="circle" coords="124,58,8" alt="Venus" href="[Link]">
</map>
• Table <table> Tag : This tag is used to display data in a
tabular format. A table is a two dimensional matrix,
consisting of rows & columns.
An HTML table consists of the <table> element and
one or more <tr>, <th>, and <td> elements.
The <tr> element defines a table row, the <th>
element defines a table header, and the <td> element
defines a table cell.
The <th> & <td> elements are nested within the <tr>
tag.
Syntax:
<table attributes list>
<tr>
<th> heading1 </th>
<th> heading2 </th>
…………………………….
</tr>
<tr>
<td> cell1 value </td>
<td> cell2 value </td>
…………………………….
</tr>
<tr>
<td> cell1 value </td>
<td> cell2 value </td>
…………………………….
</tr>
</table>
Attributes of <table> Tag
Attribute Description Value
align Specifies the alignment of a table according Left/right/center
to surrounding text
border Specifies whether the table cells should have 0/1
borders or not
bgcolor Specifies the background color for a table color
width Specifies the width of a table Pixels%
cellpadding Specifies the space between the cell wall and Pixels
the cell content
cellspacing Specifies the space between adjacent cells Pixels
Attributes of <th>/<td> Tag
Attribute Description Value
align Aligns the content in a header Left/right/center/justify
cell/data cell
Valign Vertical aligns the content in a header Top/bottom/middle/
cell/data cell
Colspan Specifies the number of columns a Number
header cell/data cell should span
Rowspan Specifies the number of rows a Number
header cell/data cell should span
• Frames : So far, the web pages are being developed, each
web page covers the entire browser’s screen. That is the
web page does not split the browser’s screen into
separate & unique sections, showing different but related
information.
The tag <frameset> is used to divide a webpage into
two or more recognizable unique regions. Each unique
region is called a “Frame”. Each frame can be loaded with
a different document and hence , allow multiple html
documents to be seen concurrently.
The <frameset> element holds one or more <frame>
elements. Each <frame> element can hold a separate
document.
The <frameset> element specifies HOW MANY
columns or rows there will be in the frameset, and HOW
MUCH percentage/pixels of space will occupy each of
them.
Syntax :
<frameset attributes list>
………………………………….
</frameset>
Attributes of <frameset> Tag
Attribute Description Value
cols Specifies the number and size of pixels
columns in a frameset %
*
rows Specifies the number and size of pixels
columns in a frameset %
*
Example : 1. <frameset rows=“80, 400”>
2. <frameset rows=“80%, 20%”>
3. <frameset rows=“30, 45, *”>
• <frame> Tag : The <frame> tag defines one particular
window (frame) within a <frameset>. The <frame>
element is nested inside the <frameset> element that is
used to define the contents of a unique particular region
(frame) created using <frameset> tag.
Attributes of <frame> Tag
Attribute Description Value
src Specifies the URL of the document to show in a url
frame
frameborder Specifies whether or not to display a border 0
around a frame 1
scrolling Specifies whether or not to display scrollbars in a Yes/no/auto
frame
name Specifies the name of a frame Text
marginheight Specifies the top and bottom margins of a frame Pixels
marginwidth Specifies the left and right margins of a frame Pixels
Examples :
1. A simple three-framed page:
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
2. A Mixed framed page:
<html>
<frameset rows="50%,50%">
<frame src="frame_a.htm">
<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</frameset>
</html>