HTML - Part Iii

Indian Institute of Technology Kharagpur
HTML – Part III
Prof. Indranil Sen Gupta

Dept. of Computer Science & Engg.
I.I.T. Kharagpur, INDIA
Lecture 15: 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.
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.
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 = “left.htm”>
<frame src = “right.htm”>
</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 = “left.htm”>
<frame src = “right.htm”>
</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 = “one.htm”>
<frameset rows = “100,150,100”>
<frame src = “two.htm”>
<frame src = “three.htm”>
<frameset cols = “*,*”>
<frame src = “four.htm”>
<frame src = “five.htm”>
</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 = “somepage.htm” name = “abc”>
¾Specify this frame in a hyperlink as follows:

<a href = “newpage.htm” target=“abc”> … </a>
¾The document newpage.htm 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/mystyle.css”
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
SOLUTIONS TO QUIZ
QUESTIONS ON
LECTURE 14
Quiz Solutions on Lecture 14
1. What are the tags used for unnumbered

lists?
<UL> … </UL>, and <LI>
2. What are the tags used for ordered lists?
<OL> … </OL>, and <LI>
3. How can you change the bullet style in an
unnumbered list?
By specifying an attribute along with the
<UL> or <LI> tags. The possible values
are disc, circle, and square.
18
4. Show hyperlink definitions that provide link

to a pdf file, and a jpeg image.
<a HREF = “./slides/new/chap5.pdf”> Ch5 </a>
<a HREF = “images/rose.jpg”> Green Rose </a>
5. Can relative URL’s be used to provide link to
a different web site?
No. When referring to a document located on
some other server, the name of the server must
be specified. In other words, absolute URL must
be given.
6. How can you provide a hyperlink to a

section in the same document?
Step 1: Specify a named section in the
document.
<a name=“tennis”> <h2>About tennis</h2> </a>
Step 2: Provide link to the named section.
<a href=“#tennis”> Information on Tennis </a>
19
7. How can you provide a hyperlink to a section

in a document located on some other web
server?
Provide a link to the named section using
an absolute URL.
<a href=“http://www.sunny.com/xyz.html #tennis”>
Information on Tennis </a>
8. What do the HEIGHT and WIDTH attributes in

the IMG tag specify?
They specify the height and width of the image (in
pixels) in the browser window. The browser can
resize the image using these values.
9. How can you provide an image hyperlink?
An example is shown below:
<a HREF = “india.html”>
<img src = “./images/ india.gif”>
</a>
20
QUIZ QUESTIONS ON
LECTURE 15
Quiz Questions on Lecture 15
1. What are the HTML tags associated with

table definitions?
2. How do you specify table entries spanning
multiple columns?
3. What is the purpose of the <FRAMESET>
tag>
4. What is the purpose of the <NOFRAMES>
tag?
5. What does “*” signify when specifying the
width/height of a frame?
6. What does “%” signify when specifying the
width/height of a frame?
21
Quiz Questions on Lecture 15
7. What is inline style for specifying style

sheets? Give an example.
8. What is external style for specifying style
sheets?
22

HTML - Part Iii

Uploaded by

Copyright:

Available Formats

HTML - Part Iii

Uploaded by

Document Information

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

HTML - Part Iii

Uploaded by

Copyright:

Available Formats

Indian Institute of Technology Kharagpur

HTML – Part III

Prof. Indranil Sen Gupta

Lecture 15: HTML – Part III

On completion, the student will be able to:

• Tables are made up of cells, arranged

The Table Tags

• <TD> …….. </TD>

• What are frames?

Merits and Demerits

The Frame Tags

• <FRAMESET> …….. </FRAMESET>

Linking to a Framed Document

• When a hyperlink is clicked, by

¾Specify this frame in a hyperlink as follows:

¾The document newpage.htm will load into

Cascaded Style Sheets (CSS)

• Style sheets in HTML allows us to

How to specify a rule?

<H2 style = “color: blue”> This will appear

<P style = “font-size: 12pt; font-family:

Embedded Style Sheets

External Style Sheets

• The most powerful way.

• We have just given a brief introduction

Quiz Solutions on Lecture 14

1. What are the tags used for unnumbered

4. Show hyperlink definitions that provide link

Quiz Solutions on Lecture 14

6. How can you provide a hyperlink to a

7. How can you provide a hyperlink to a section

Quiz Solutions on Lecture 14

8. What do the HEIGHT and WIDTH attributes in

Quiz Questions on Lecture 15

1. What are the HTML tags associated with

7. What is inline style for specifying style

You might also like