Scribd
Upload
5 views11 pages

Chapter-III (Web Page authoring using HTML) - Copy

Uploaded by

citecollege301
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
5 views11 pages

Chapter-III (Web Page authoring using HTML) - Copy

Uploaded by

citecollege301
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 11

3.

Web Page Authoring using HTML


3.1 Tables
 <table > tag is used in html to draw blank table. <border > tag is used to set the
border width between cells. The <td> tag defines the standard cells in the table
which are displayed as normal-weight, left-aligned text. The <tr> tag defines the
table rows. There must be at least one row in the table. The <th> tag defines the
header cells in the table which are displayed as bold, center-aligned text.

<! DOCTYPE HTML>


<html>
<head>
<title>Table Demo </title>
</head>
<body>
<table border ="1" width ="500" >
<tr>
<th>Name</th>
<th>Address</th>
<th>Roll</th>
</tr>
<tr>
<td>Nirdosh</td>
<td>Lamjung</td>
<td>111</td>
</tr>
</table>
</body>
</html>

Output:
 Cellpadding specifies the space between the border of a table cell and its contents
(i.e.) it defines the whitespace between the cell edge and the content of the cell.
Cellspacing specifies the space between cells (i.e) it defines the whitespace
between the edges of the adjacent cells.

<! DOCTYPE HTML>


<html>
<head>
<title>Cellpadding and cellspacing Demo </title>
</head>
<body>
<table border ="1" width ="300" cellspacing ="3" cellpadding="30">
<tr>
<th>Name</th>
<th>Address</th>
<th>Roll</th>
</tr>
<tr>
<td>Nirdosh</td>
<td>Lamjung</td>
<td>111</td>
</tr>
</table>
</body>
</html>

Output:
 The colspan attribute in HTML specifies the number of columns a cell should
span. It allows the single table cell to span the width of more than one cell or
column. It provides the same functionality as “merge cell” in a spreadsheet
program like Excel.

Examples:

<! DOCTYPE HTNL>


<html>
<head>
<title>Colspan Demo </title>
</head>
<body>
<table border ="1" width ="300" cellspacing ="5" cellpadding="10">
<tr>
<th colspan="2">Salary</th>
</tr>
<tr>
<td>Swotantra</td>
<td>10000</td>
</tr>
<tr>
<td>Dikshya</td>
<td>11000</td>
</tr>
</table>
</body>
</html>

Output:
 The <caption> tag defines a table caption. The <caption> tag must be inserted
immediately after the <table> tag. The HTML <table> align Attribute is used to
specify the alignment of the table and its content. Left, center and right are attribute
value of align attribute.

<! DOCTYPE HTML>


<html>
<head>
<title>Caption Demo </title>
</head>
<body>
<table border ="1" width ="500" align = "center" cellspacing ="5"
Cellpadding ="5">

<caption> Salary of Employee </caption>


<tr>
<th >Name </th>
<th>Salary</th>
</tr>
<tr>
<td>Swotantra</td>
<td>10000</td>
</tr>
<tr>
<td>Dikshya</td>
<td>11000</td>
</tr>
</table>
</body>
</html>
Output:

3.2 Frames
HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document. A collection of frames in the browser
window is known as a frameset. The window is divided into frames in a similar way the
tables are organized: into rows and columns.
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset>
tag defines, how to divide the window into frames. The rows attribute of <frameset> tag
defines horizontal frames and cols attribute defines vertical frames. Each frame is
indicated by <frame> tag and it defines which HTML document shall open into the frame.
<Frameset> Tag attribute
 Specifies how many columns are contained in the frameset and the size of each
column. You can specify the width of each column in one of the four ways –
 Absolute values in pixels. For example, to create three vertical frames,
use cols = "100, 500, 100"
 A percentage of the browser window. For example, to create three vertical
frames, use cols = "10%, 80%, 10%".
 Using a wildcard symbol. For example, to create three vertical frames,
use cols = "10%, *, 10%". In this case wildcard takes remainder of the
window.
 As relative widths of the browser window. For example, to create three
vertical frames, use cols = "3*, 2*, 1*". This is an alternative to percentages.
You can use relative widths of the browser window. Here the window is
divided into sixths: the first column takes up half of the window, the second
takes one third, and the third takes one sixth
 Rows: This attribute works just like the cols attribute and takes the same values,
but it is used to specify the rows in the frameset. For example, to create two
horizontal frames, use rows = "10%, 90%". You can specify the height of each row
in the same way as explained above for columns.
 Border : This attribute specifies the width of the border of each frame in pixels.
For example, border = "5". A value of zero means no border.
 Frameborder This attribute specifies whether a three-dimensional border should
be displayed between frames. This attribute takes value either 1 (yes) or 0 (no). For
example, frameborder = "0" specifies no border.
 Framespacing : This attribute specifies the amount of space between frames in a
frameset. This can take any integer value. For example, framespacing = "10" means
there should be 10 pixels spacing between each frames .

<Frame> tag attribute

 Src : This attribute is used to give the file name that should be loaded in the frame.
Its value can be any URL. For example, src = "/html/top_frame.htm" will load an
HTML file available in html directory.

 Name: This attribute allows you to give a name to a frame. It is used to indicate
which frame a document should be loaded into. This is especially important when
you want to create links in one frame that load pages into an another frame, in
which case the second frame needs a name to identify itself as the target of the link.

 Frameborder: This attribute specifies whether or not the borders of that frame are
shown; it overrides the value given in the frameborder attribute on the <frameset>
tag if one is given, and this can take values either 1 (yes) or 0 (no).

 Marginwidth : This attribute allows you to specify the width of the space between
the left and right of the frame's borders and the frame's content. The value is given
in pixels. For example marginwidth = "10"

 Marginheight: This attribute allows you to specify the height of the space between
the top and bottom of the frame's borders and its contents. The value is given in
pixels. For example, marginheight = "10".
 By default, you can resize any frame by clicking and dragging on the borders of a
frame. The noresize attribute prevents a user from being able to resize the frame.
For example noresize = "noresize".

 Noresize :This attribute controls the appearance of the scrollbars that appear on the
frame. This takes values either "yes", "no" or "auto". For example, scrolling = "no"
means it should not have scroll bars.

 Noframe : This aatribute is used to alternative to the frames.

Examples 1:

<! DOCTYPE html>


<html>

<head>
<title>HTML Frames</title>
</head>

<frameset rows = "10%,80%,10%">


<frame name = "top" src =
"https://www.tutorialspoint.com/html/top_frame.htm" />
<frame name = "main" src =
"https://www.tutorialspoint.com/html/main_frame.htm" />
<frame name = "bottom" src =
"https://www.tutorialspoint.com/html/bottom_frame.htm" />
</frameset>
</html>
Examples 2 :
<! DOCTYPE html>
<html>

<head>
<title>HTML Target Frames</title>
</head>

<frameset cols = "200, *">


<frame src = "/html/menu.htm" name = "menu_page" />
<frame src = "/html/main.htm" name = "main_page" />

<noframes>
<body>Error</body>
</noframes>
</frameset>
</html>

Q.N. 1 Write HTML tag to display given table.


S.N. Name Salary Total
1. Gopal 12500 25700
2. Mahesh 13200

Solution: -
<! DOCTYPE HTML>
<html>
<head>
<title>Q.N.1 </title>
</head>
<body>
<table border ="1" width ="300">
<tr>
<th>S.N.</th>
<th>Name</th>
<th>Salary</th>
<th>Total</th>
</tr>
<tr>
<td>1.</td>
<td>Gopal</td>
<td>12500</td>
<td rowspan="2">25700</td>
</tr>
<tr>
<td>2.</td>
<td>Mahesh</td>
<td>13200</td>

</tr>
</table>
</body>
</html>

Q.N.2 Write html tag to display given table.


S.N. Group A Group B
Name Address Name Address
1. Rekha Birgunj Surekha Nepalgunj
2. Shyam Thapathali Ghanshyam Banasthali

Solution: -
<! DOCTYPE HTML>
<html>
<head>
<title>Q.N.2 </title>
</head>
<body>
<table border ="1" width ="400">
<tr>
<th rowspan="2">S.N.</th>
<th colspan="2">Group A</th>
<th colspan="2">Group B</th>

</tr>
<tr>
<td>Name</td>
<td>Address</td>
<td>Name</td>
<td>Address</td>
</tr>
<tr>
<td>1. </td>
<td>Rekha</td>
<td>Birgunj</td>
<td>Surekha</td>
<td> Nepalgunj </td>

</tr>

<tr>
<td>2. </td>
<td>Shyam</td>
<td>Thapathali</td>
<td>Ghanshyam</td>
<td> Banasthali </td>
</tr>
</table>
</body>
</html>

You might also like