EC&WD Unit V

E-COMMERCE AND WEB DESIGNING SRI GOWTHAMI DEGREE COLLEGE: CHIRALA
Unit V : Website Designing

Hyperlinks: Textual links, Graphical links, types of document links, anchor tag, HTML Tables,
table creations tags, Nested Tables
Frames: Frame introduction - frame creation tags, Nested Frames.
HyperLinks: Anchor tags

When a web page is shown some of its words may need further explanation, such words are
called “hot text”, and they need to appear in different colour. When the cursor is moved onto
the text, then the hand symbol of the cursor is appeared on the screen. When we click it, then
another html file will be opened and it gives the required explanation.
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to
a new document or a new section within the current document.
g
When you move the cursor over a link in a Web page, the arrow will turn into a little
hand. Links are specified in HTML using the <a> tag.
or
The <a> tag can be used in two ways:
1. To create a link to another document, by using the href attribute
s.
2. To create a bookmark inside a document, by using the name attribute
The HTML code for a link is simple. It looks like this:
<a href = "url" >
Link text te
da
</a>
The href attribute specifies the destination of a link.
up
TYPES OF LINKS
There are mainly two types of links used. They are
nu
1. Absolute links
Absolute links are simple but Relative links take a little bit of crossing.
.a
2. Relative links
Relative links are actually divided into further two types: Document Relative and
w
Site Root Relative.

w
1. Absolute Links: - An Absolute Link or URL link contains a complete internet address. Most
w
Absolute links begin with http://

For example: <a href=http://www.mysite.com/index.html>Go to my site</a>
2. Relative Links: - Documents can be link to other directives by specifying the relative paths
to linked documents.
For example: <a href=”codes/mycodes.html”> This is Mycode</a>.
If the file to be accessed and stored in a higher level of directory than the current
directory, that file can be accessed by simply typing ‘../’ before the name of the file. Each ‘../’
tells the web browser to go one level up relative to the current directory.
<a href=”URL address” target=”frame address” name=”section name” shape=”circle |

rectangle”> … </a>
Or
<a href=”../../newfile.html”> My file </a>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
I B.Com. CA – Semester II [1] RAMESH BABU PUPPALA,
M.Sc, M.Tech.,M.Phil. Computer Science
Optional Attributes
Attribute Value Description
charset char_encoding Specifies the character-set of a linked document
coords coordinates Specifies the coordinates of a link
href URL Specifies the destination of a link
hreflang language_code Specifies the language of a linked document
name section_name Specifies the name of an anchor
Specifies the relationship between the current
rel text
document and the linked document
Specifies the relationship between the linked
rev text
document and the current document
default
rect
g
shape Specifies the shape of a link
circle
or
poly
_blank
s.
_parent
target _self Specifies where to open the linked document
_top
framename te
da
There are four types of hyperlinks
up
1. Text (textual ) hyperlinks

2. Graphical - Image hyperlinks
3. Mail to hyperlinks
nu
4. Intra document hyperlinks

.a
1. Textual hyperlinks
It contains the address of the referenced document, a piece of text to display as the link and
w
closing tag.
The general form is <a href=”address”> ……. </a>
w
Example: <a href=”www.anuupdates.org> click here to get all Nagarjuna university

updates </a>
w
2. Graphical- Image hyperlinks

It contains the address of the referenced link as an image i.e. we nested the image with in
the anchor tag.
The basic form is <a href=”address”>
<img scr=”image address” width=”n” height=”n”>
</img>
</a>
Example: <a href=”www.manabadi.co.in/results”>
<img scr=”results.jpeg” width=”50” height=”50”>
</img>
</a>
In the above example, the webpage displays an image, when you click on the image, it will
bring you to another page specified in the address filed.
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
3. Mail to Hyperlink
It is possible to add a mail to hyperlink to a webpage. This provides a convenient method to
send the e-mail.
The general form is <a href=mailto: admin@gmail.com> contact us </a>
When the user clicks on the text contact us, a mail dialog box will be launched and
the “To” filed will be filed the address admin@gmail.com.
4. Intra document hyperlink or linking to a specific section

The Intra document linking can be done through <a> tag with the help of “name” attribute. It
allows us to create a hyperlink to any part of the document i.e., we can link a specified
section of the webpage.
The basic form is <a href=”#target”> …… </a>
Ex: <html>
g
<head>
or
<title> Intra document hyperlinking
</title>
s.
</head>
<body>
<p> <a href="#news">Go to the News</a> </p>
<h1>Welcome</h1> te
da
<p>This paragraph welcomes you.</p>
<h2>About</h2>
up
<p>This paragraph talks about us.</p>

<br> <h2><a name="news">News</a></h2>
<p>This is the section your link will go to.</p>
nu
</body>
</html>
Output:
.a
w
w
w
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Lab Program:
 Anchor.html
<html>
<head>
<title>
Example of anchor Tag </title>
</head>
<body>
SRI SRI GOWTHAMI DEGREE COLLEGE is located in CHIRALA under the
Acharya Nagarjuna University having all types of courses offered for degree
students in and around <a href = “collegelist.html”>DEGREE colleges</a> in
CHIRALA.
</body>
g
</html>
or

s.
Collegelist.html
<html>
<head>
<title> te
da
List of colleges in CHIRALA
</title>
</head>
up
<body>
<b> colleges in chirala</b> <br>
nu
1. SRI GOWTHAMI DEGREE COLLEGE <br>

2. BHARATHI DEGREE COLLEGE <br>
3. CHAITANYA BHARATHI DEGREE COLLEGE <br>
.a
4. SRI VIDYA DEGREE COLLEGE <br>

</body>
w
</html>
w
w
Output :
// *** When we click on DEGREE colleges, the it will display ***
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
HTML TABLES
Tables are efficient mean of displaying the information in terms of rows and columns instead of
writing several pages of explanations. The table can effectively gives the all the necessary
information at a single location.
Basic Table Tags:
<table [align=”center”|”left”|”right”] [border=’n] [cellpading=”n”]
[cellspacing=n”] [width=”nn%] [height=”nn%] >
…..
…..
</table>
Tables are defined and starting with the <table> and end with </table>.
A table is divided into rows (with the <tr> tag),
Table heading can be represents using with <th> tag.
g
Each row is divided into data cells (with the <td> tag).
or
<tr> is “table row”, <th> is “table column heading”, and <td> is "table data"
A <td> tag can contain text, links, images, lists, forms, other tables, etc.
s.
<Table>
This tag is used to create the tabular format, that are represents the data in rows and columns.
Relative attributes te
da
1. Cols : It is used to specify the number of columns in a table
2. Height : It is used to specify the height of the table
3. Width : It is used to specify the width of the table
up
4. Align : It is used to align the text in the table in right/left/centre

5. Background : It is used to set the background with any graphics in the table
nu
6. Bgcolor : It is used to set the background color of the table

7. Border : It is used to set the border to the table
8. Bordercolor : It is used to set the border color to the table
.a
<th>
w
This tag is used to set the headings of the each columns of the table.
w
Syntax : <th [align=”center”|”left”|”right”] [valign=”top”|”center”|”bottom”]

[nowrap][colspan=”n”] [rowspan=”n”]> …. </th>
w
Relative attributes
1. Align : It is used to align the text in the column, at right/left/centre
2. Bgcolor : It is used to set the background color of the table heading
3. Bordercolor : It is used to set the border color to the table heading
4. Valign : It is used to align the text in vertically in the table heading, at
top/bottom/centre
<tr>
This tag is used to represent the single row of the table.
Syntax : <tr [align=”center”|”left”|”right”] [valign=”top”|”center”|”bottom”]>
…. </tr>
Relative attributes
1. Align : It is used to align the text in the table in the right/left/centre
4. Valign : It is used to align the text in vertically in the table heading, at
top/bottom/centre
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<td>
This tag is used to insert the data into each cell of the table.
Syntax: <td[align=”center”|”left”|”right”] [valign=”top”|”center”|”bottom”]
[nowrap][colspan=”n”] [rowspan=”n”]> …. </td>
Relative attributes
1. Align : It is used to align the text in the table in right/left/centre
2. Background : It is used to set the background with any graphics in the table
5. Height : It is used to specify the height of the table
6. Width : It is used to specify the width of the table
7. Valign : It is used to align the text in vertically in the table heading
g
or
Example Program
s.
<html>
<head>
<h1> Using Table </h1>
</head> te
da
<body>
<table align="center" width="75%" border="2">
<caption>student data</caption>
up
<tr>
<th colspan="5" align="center">courses</th>
</tr>
nu
<tr>
<th>S.No</th>
<th>S.NAME</th>
.a
<th>Marks1</th>
<th>Marks2</th>
w
<th>Marks3</th>
</tr>
w
<tr>
w
<td>01</td>
<td>A</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>02</td>
<td>B</td>
<td>55</td>
<td>67</td>
<td>78</td>
</tr>
</body>
</html>
Output :
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Exampe Program 2
<html>
<head>
<title> <h1> Table </h1></title>
</head>
<body>
<table bgcolor= “#00FF00” border=5>
<tr bgcolor=”red”>
<th> S.NO. </th>
<th> S.NAME </th>
<th> CLASS </th>
<th> TOTAL </th>
</tr>
<tr>
g
<td> 1 </td>
or
<td> A </td>
<td> first </td>
<td> 550 </td>
s.
</tr>
<tr>
<td> 2 </td>
<td> B </td> te
da
<td> first </td>
<td> 560 </td>
up
</tr>
<tr>
nu
<td> 3 </td>
<td>C </td>
<td> first </td>
.a
<td> 570 </td>

</tr>
w
</table>
</body>
w
</html>
w
Output :
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<table> other relative attributes

Cell padding
The cellpadding attribute specifies the space between the cell wall and the cell data or content. The
default cell padding value is 1.
<html>
<body>
<p>Table without cellpadding:</p>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
g
</table>
<p>Table with cellpadding:</p>
or
<table border="1" cellpadding="10">
<tr>
s.
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td> te
da
<td>$100</td>
</tr>
</table>
up
</body>
</html>
nu
Cell spacing
The cellspacing attribute specifies the space between cells in the table. It is used to spreading out the
contents of the table.
.a
<html>
<body>
w
<p>Table without cellspacing:</p>

<table border="1">
w
<tr>
<th>Month</th>
w
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with cellspacing:</p>
<table border="1" cellspacing="10">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Nested Tables
When we want to create a table in the place of another table, then it is called as Nested Table. Here,
we have one example program to implement the nesting of tables.
Ex: Design the page as follows
<html>
<head>
<h1 align="center"> RAMS COMPUTERS<h1>
</head>
<body>
<table align="center" border="1">
<thead align="center"><tr><td><b>Equipment </b></td><td> <b>
g
Specifications</b></tr></thead>
or
<tr><td> Monitor</td><td>Samsung LCD - 21"</td></tr>
<tr><td> KeyBoard</td><td> Microsoft(Multimedia)</td></tr>
s.
<tr><td> Mouse</td><td> Microsoft - optical</td></tr>
<tr><td>CPU<br> <img src="cpu.jpg" height="100" width="100"/></td>
<td> <table border=".5"><tr><td><b>device</b></td><td><b>Specifications</b></td></tr>
<tr><td>Processor</td><td> Pentium(R) Dual - Core</td></tr> te
da
<tr><td>Processor Speed</td><td>E5300@2.60GHz</td></tr>
<tr><td>RAM</td><td>2 G.B</td></tr>
up
<tr><td>HDD</td><td>250G.B</td></tr>
<tr><td>Cabinet Box</td><td>Intex</td></tr></table></td>
</tr>
nu
</body>
</html>
.a
OUTPUT:
w
w
w
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
FRAMES
The output screen of every html application is nothing but a frame. Hence we can define frame
as the region of the browser displaying certain output. The region of the browser can be
divided into multiple regions, hence we can refer to them as multiple frames (here each region
corresponds to an independent frame). Here each independent frame can display an
independent ‘HTML’ file. Thus, within a single window we can view various files at one glance.
Main advantage of the frame is that it makes navigation easy. Also contents of one
frame can be hyperlinked to the contents of other frames.
Frames can be introduced using a special tag <frameset>.
Here entire code corresponding to frames is usually inscribed between <frameset> ..
and </frameset>. Every frame should be present in this tag.
While writing the code to display the frames, it should be included with in the <head>
g
..</head>, it is not used in <body>.
or
Syntax :
<html>
s.
<head>
<frameset cols/rows ="25%,25%,25%,25%">
<frame src="file1.html" >
te
da
<frame src="file2.html" >
---
up
---
</frameset>
</head>
nu
<body>
</body>
.a
</html>
w
Frames column wise

w
Here we can also used to represent the code as the appear the frames in column also. We can put
columns in frameset like
w
<frameset cols= “25%,* ”>

<frame src= “prg1.html”>
</frameset>
Here * indicates all similar sizes of frames.
Frames with rows and columns

Here, we can also merge two types of appearance as column and row wise frames, like
<frameset rows= “25%,25%”>
<frameset cols= “25%,* ”>
</frameset>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
I B.Com. CA – Semester II [ 10 ] RAMESH BABU PUPPALA,
Example Program
Frames :
<html>
<head>
<title> Example program for FRAMES
</title>
<frameset rows= “25%,25%,25%,25%”>
<frame src=“prg1.html”>
<frame src=”prg4.html”>
</frameset>
</head>
<body>
g
</body>
or
</html>
s.
prg1.html :
<html>
<head> te
da
<title> program 1 </title>
</head>
<body>
up
<font color =”red”> This is the first program

</font>
nu
</body>
</html>
.a
prg2.html :
<html>
w
<head>
w

</head>
w
<body>
<font color =”green”> This is the second program
</font>
</body>
</html>
prg3.html :
<html>
<head>
</head>
<body>
<font color =”blue”> This is the third program
</font>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Nested Frames
We can achieve more complex layouts by using nested tags. Any frame within a frameset can
contain another frameset.
For example, shows a layout of two columns, the first with two rows and the second with three
rows. This is created by nesting two tags with row specifications within a top-level that specifies
the columns:
g
or
s.
The Output of the above will be te
da
up
nu
.a
w
w
w
UNIT - V
IMPORTANT QUESTIONS
1. What is Hyper Links ? Explain

2. Explain the anchor tag in HTML ?
3. What is a Table ? How can we create and use Tables in HTML ?
4. Write about Nested Tables?
5. What is a Frame ? Explain
6. Write about Nested Frames ?
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

EC&WD Unit V

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

EC&WD Unit V

Uploaded by

Copyright:

Available Formats

E-COMMERCE AND WEB DESIGNING SRI GOWTHAMI DEGREE COLLEGE: CHIRALA

Unit V : Website Designing

HyperLinks: Anchor tags

Site Root Relative.

Absolute links begin with http://

<a href=”URL address” target=”frame address” name=”section name” shape=”circle |

1. Text (textual ) hyperlinks

4. Intra document hyperlinks

Example: <a href=”www.anuupdates.org> click here to get all Nagarjuna university

2. Graphical- Image hyperlinks

4. Intra document hyperlink or linking to a specific section

<p>This paragraph talks about us.</p>

1. SRI GOWTHAMI DEGREE COLLEGE <br>

4. SRI VIDYA DEGREE COLLEGE <br>

// *** When we click on DEGREE colleges, the it will display ***

4. Align : It is used to align the text in the table in right/left/centre

6. Bgcolor : It is used to set the background color of the table

Syntax : <th [align=”center”|”left”|”right”] [valign=”top”|”center”|”bottom”]

<td> 570 </td>

<table> other relative attributes

<p>Table without cellspacing:</p>

Ex: Design the page as follows

Frames column wise

<frameset cols= “25%,* ”>

Frames with rows and columns

<font color =”red”> This is the first program

<title> program 2 </title>

1. What is Hyper Links ? Explain

You might also like

// * When we click on DEGREE colleges, the it will display *