HTML IN SIMPLE STEPS!!!
PART - II
LISTS, TABLES AND FRAMES
UNORDERED
LIST:
EG: <ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
OUTPUT:
- A
- B
- C
ORDERED
LIST:
EG: <ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
OUTPUT:
- a
- b
- c
CUSTOMISING
LIST:
Use type attributes with values like “disc”,”square”,”circle”
(i.e) <ul
type=”square”>
For ordered
list, use values like
1 -
default(1,2,3,…)
A -
A,B,C,…
a -
a,b,c,…
I -
I,II,III,...
i - I,ii,iii,…
EG: <ol type=”i”>
Nested lists
are also possible.
CREATING
DEFINITION LIST:
Definition
list is a list of terms and their corresponding definitions. <dl> tag is
used for this purpose. We can create items in the list by using <dt> and
<dd> tags.
<dt>
to define the term. NO END TAG!
<dd>
to give the term’s definition. NO END TAG!
EG: <body>
<h1>Here
is the list</h1>
<dl>
<dt>
<h4>ravi</h4>
<dd>flat
no. 111, abc street.
<dt>
<h4>harini</h4>
<dd>door
no. 6, xyz street.
</dl>
</body>
OUTPUT:
TABLES:
<table>
</table> - to create table
<tr>
</tr> - add a row to the table
<th>
</th> - add column heading
<td>
</td> - add data to the table
cell
<caption>
</caption> - to give table
caption or heading
EG:
<body>
<table>
<caption><h2>STUDENT
DETAILS</h2></caption>
<!--adding caption-->
<th>name</th> <!--table
column name-->
<th>rollno</th>
<tr> <!--1st
row of table-->
<td> Hari</td> <!--contents
of 1st row-->
<td>10bc105</td>
</tr>
<tr> <!--similarly
2nd row-->
<td>sam</td>
<td>10bc089</td>
</tr>
</table>
</body>
OUTPUT:
TABLE
BORDER:
By default,
table border=0. Use border attribute in table tag and set values as 1,2,…
EG: <table border=”1”>
ALIGNING
TABLE AND ITS CONTENTS:
Use align
attribute in <table> tag or <th> tag or <td> tag to align
the table or table heading or table data respectively towards left, right or
centre.
EG:
<table
align=”right”>
<th align=”centre”>
<tr>
<td
align=”left”>abc</td>
</tr>
</table>
SETTING
TABLE WIDTH AND COLUMN WIDTH:
Table width
can be expressed as an absolute value in pixels or as a percentage of screen
width. Use width parameter to alter the width in the required tag like
<table> to change table width, <th> to change the column width.
EG:
<table
width=90%>
or
<table width=500>
<th
width=30%>
CHANGING
TABLE BACKGROUND COLOR:
EG: <table bgcolor=”yellow”>
To change a
cell color, use bgcolor inside <td> tag. This idea can be
extended.
SETTING
CELL PADDING AND CELL SPACING:
Cell padding
is the space between the cell edge and the cell content. Its value can be set by
using cellpadding attribute in <table> tag.
EG: <table cellpadding=10>
Cell spacing
is the space between cell’s border. Its value can be set by using cellspacing
attribute in <table> tag.
EG: <table cellspacing=3>
MERGING
(OR) SPANNING ROW AND COLUMN:
Use rowspan
attribute in <td> or <th> tags to merge two or more rows. Rowspan takes
the value of no. of rows to be merged.
EG:
<body>
<table
border=1width=80% bgcolor=”yellow”>
<caption><h2>STUDENT
DETAILS</h2></caption>
<th
rowspan=3>student name<br>and rollno.</th>
<tr>
<td> Hari</td>
<td>10bc105</td>
</tr>
<tr>
<td>sam</td>
<td>10bc089</td>
</tr>
</table>
</body>
Similarly, we can use colspan attribute to merge columns with its value as no. of columns to be merged.
EG: <th colspan=3>student name<br>and
rollno.</th>
OUTPUT:
NESTED
TABLE:
Table inside
the table
EG:
<table>
<tr>
<td><table
border=1 bgcolor=red> <!--table inside 1st
cell of the 1st row-->
<th>name</th>
<th>roll</th>
<tr>
<td> Hari</td>
<td>10bc105</td>
</tr>
<tr>
<td>sam</td>
<td>10bc089</td>
</tr>
</table></td> <!--end of the table
inside the 1st cell in 1st row-->
<td><table
border=2 bgcolor=”yellow”> <!--table
inside 2nd cell of the 1st row-->
<th>city</th>
<tr>
<td>Coimbatore</td>
</tr>
<tr>
<td>Chennai</td>
</tr>
</table></td> <!--end of
the table inside the 2nd cell in 1st row-->
</tr>
</table>
OUTPUT:
WORKING
WITH FRAMES:
It is
possible to divide the browser window into various parts and view different
html file outputs in each part. For doing this, frames are used. Frames are
created using <frameset> tag and
<frame> tag inside <frameset> tag.
Vertical
frames can be created by using the attribute cols with percentage as its
value.
EG:
File1.html
<html>
<body>
<h1>hai!
in frame 1</h1>
</body>
</html>
File2.html
<html>
<body>
hai! in
frame 2
</body>
</html>
Main program:
<HTML>
<frameset
cols=50%,50%>
<frame
src="1.html">
<frame
src="2.html">
</frameset>
</HTML>
OUTPUT:
Horizontal
frames can be created by using the attribute rows with percentage as its
value.
(i.e.)
<frameset rows=50%,50%>
OUTPUT:
Combination of
vertical and horizontal frames:
EG:
<frameset
cols=50%,50%>
<frameset
cols=50%,50%>
<frame
src=1.html>
<frame
src=2.html>
</frameset>
<frameset
rows=50%,50%>
<frame src=1.html>
<frame
src=2.html>
</frameset>
</frameset>
OUTPUT:
Frame borders
are applied using frameborder attribute. Pass either “yes” or 1 (or) “no”
or 0 as a value of the frame border attribute. Thickness of the frame border is
set using framespaceing attribure of <frameset> tag.
EG:
<frameset
cols=50%,50% frameborder=1 framespacing=10>
HYPERLINK:
It is used
to create link between the web pages. Hyperlink takes a reference of the
webpage using the href attribute of the anchor tag <a>. To specify the target location of the
webpage, use target attribute in <a> tag.
EG:
run.html
<HTML>
<frameset
cols=25%,75%>
<frame
src=main.html>
<frame
src=def.html name=display>
</frameset>
</HTML>
main.html
<html>
<body>
<a
href=1.html target=display>page 1</a>
<a
href=2.html target=display>page 2</a>
</body>
</html>
def.html
<HTML>
<body>click
it!!! </body>
</HTML>
1.html
<html>
<body>
hai in
page 1
</body>
</html>
2.html
<html>
<body>
hai! in
page 2
</body>
</html>
OUTPUT:
-----------------------------------END OF PART - II ------------------------------
PART - III WILL BE PUBLISHED SHORTLY! :-)
