HTML – Part III
On completion, the student will be able to:
1. Explain the various tags and attributes required to
specify a table.
2. Demonstrate the creation of tables with varied
degrees of complexity.
3. Explain and demonstrate how frames can be used to
make a web page look more attractive.
4. CSS
1
HTML Tables
Introduction
• Tables are made up of cells, arranged
into rows.
Use tags <TABLE>, <TR>, <TD>.
An example:
<table>
<tr>
<td> Good </td> <td> Bad </td>
</tr>
<tr>
<td> Cute </td> <td> Ugly </td>
</tr>
</table>
2
Good Bad
Cute Ugly
The Table Tags
• <TABLE> …… </TABLE>
Defines the beginning and the end of a
table.
Can have several attributes:
bgcolor = #rrggbb or color name
rules = all | cols | rows | none
border = number
height = number, percentage
3
• <TR> …….. </TR>
Defines a row of cells within a table.
Can have several attributes:
bgcolor = #rrggbb or color name
align = left | center | right | justify
• <CAPTION> …….. </CAPTION>
Provides a caption for the table.
Must immediately follow the “table” tag,
and precede all other tags.
• <TD> …….. </TD>
Defines a table data cell.
A table cell can contain any content, like
an image, or even another table.
Can have several attributes:
bgcolor = #rrggbb or color name
colspan = number
== > specifies the number of columns the
currect cell should span (default is 1).
rowspan = number
== > similar
4
• <TH> …….. </TH>
Defines a table header cell.
Browsers generally display the contents
of the header cells in bold, and
centered.
Same attributes as the <TD> tag.
Table Example 1
<table>
<tr> <td colspan=2> Hello </td> </tr>
<tr> <td> Good </td> <td> Day </td> </tr>
</table>
Hello
Good Day
5
Table Example 2
<table>
<tr> <td rowspan=2> Hello </td>
<td> Good </td> </tr>
<tr> <td> Day </td> </tr>
</table>
Good
Hello
Day
Table Example 3
<table border=1>
<caption> My Table </caption>
<tr> <th> Name </th> <th> Marks </th> </tr>
<tr> <td> Anil </td> <td> 72 </td> </tr>
<tr> <td> Kamal </td> <td> 58 </td> </tr>
</table>
Name Marks
Anil 72
Kamal 58
6
HTML Frames
Introduction
• What are frames?
A method for dividing the browser
window into smaller subwindows.
Each subwindow displaying a different
HTML document.
• How does a page with frame look
like?
NEXT SLIDE
7
A Web Page that use Frames
Merits and Demerits
• Merits:
Allow parts of the page to remain
stationary while other parts scroll.
They can unify resources that reside on
separate web servers.
There is a <noframe> tag, using which it
is possible to add alternative content
for browsers that do not support
frames.
8
• Demerits:
All browsers do not support frames.
Documents nested in a frame is more
difficult to bookmark.
Load on the server can be significantly
increased, if there are a large number of
frames in the page.
Frames are very difficult to handle for
search engines.
The Frame Tags
• <FRAMESET> …….. </FRAMESET>
Defines a collection of frames or other
framesets.
Attributes:
cols = list of lengths (number, %, or *)
rows = list of lengths (number, %, or *)
Establishes the number and sizes of columns
(vertical frames) or rows (horizontal frames) in a
frameset.
In number of pixels, percentage of total area, or
relative values (*) based on available space.
9
• <FRAME>
Defines a single frame within a
frameset.
Attributes:
frameborder = 1 | 0
src = url
scrolling = yes | no | auto
marginwidth = number
marginheight = number
name = text
• <NOFRAMES> …… </NOFRAMES>
Specifies the contents to be displayed
by browsers that cannot display frames.
Ignored by browsers that support
frames.
10
Frame Example 1
<html>
<head><title> A document with frames
</title> </head>
<frameset cols = “*,*”>
<frame src = “[Link]”>
<frame src = “[Link]”>
</frameset>
<noframes>
Browser does not support frames.
</noframes>
</html>
Frame Example 2
<html>
<head><title> Another one with frames
</title> </head>
<frameset cols = “100,2*,*”>
<frame src = “[Link]”>
<frame src = “[Link]”>
</frameset>
<noframes>
Browser does not support frames.
</noframes>
</html>
11
Frame Example 3
<html>
<head> <title> Nested frames </title> </head>
<frameset cols = “25%, *”
<frame src = “[Link]”>
<frameset rows = “100,150,100”>
<frame src = “[Link]”>
<frame src = “[Link]”>
<frameset cols = “*,*”>
<frame src = “[Link]”>
<frame src = “[Link]”>
</frameset> </frameset> </frameset>
</html>
Linking to a Framed Document
• When a hyperlink is clicked, by
default, the new page is loaded into
the same frame.
• We can load the linked page into a
new frame also.
M
E
N
U
12
Assign a name to the targeted frame.
<frame src = “[Link]” name = “abc”>
Specify this frame in a hyperlink as follows:
<a href = “[Link]” target=“abc”> … </a>
The document [Link] will load into
the frame names “abc”.
Cascaded Style Sheets (CSS)
13
Introduction
• Style sheets in HTML allows us to
specify typography styles and
spacing instructions for elements on
a page.
• Key concept:
How to define rules?
How to attach those rules to one or
more HTML documents?
How to specify a rule?
• Some examples:
H2 {color: blue}
P {font-size: 12pt;
font-family: Verdana, sans-serif;
}
14
Inline Styles
<H2 style = “color: blue”> This will appear
as blue. </H2>
<P style = “font-size: 12pt; font-family:
Verdana, sans-serif”>
This paragraph will be set as per the specified
Style. </P>
Embedded Style Sheets
<html><head>
<style type = “text/css”>
<! - -
H2 {color: blue}
P {font-size: 12pt;
font-family: Verdana, sans-serif;
}
-->
</style>
15
<title> Example of using style sheets </title>
</head>
…….
…….
</html>
External Style Sheets
• The most powerful way.
Collect all styles in a separate text
document.
Creates links to that document.
<head>
<link rel = “STYLESHEET”
href = “/pathname/[Link]”
type = “text/css”>
</head>
16
There is more ….
• We have just given a brief introduction
to CSS.
• There are many different ways to
specify properties.
• To resolve conflicts in style definitions,
cascading rules are defined.
Specify which definition is to be given
priority.
17