|
|||||
Introduction
to Computing CS101
VU
Lesson
9
HTML Lists
& Tables
(Web
Development Lesson 3)
Today
is our 3rd
Web
Dev Lesson During our
2nd Lesson on Web
dev ...
We
learnt to develop our own
Web pages in HTML
We
learnt about some of the
tags used in HTML
pages
<BR>,
<P>, </P>, <B>,
<TITLE>, </TITLE>,
<H1>, </H1>
<HTML></HTML>,
<HEAD></HEAD>,
<BODY></BODY>
<A
HREF = "action"
>
label
</A>,
action=http:// or mailto:
We
also learnt about how to
upload our Web pages to VU's
Web server so that it becomes
visible on the
Internet
as http://www.vu.edu.pk/~xxxxxxxx/
where
xxxxxxxx is your VU user
ID
Today's
Lecture
We
will extend our Web pages by
adding a few more
tags
Specifically,
we will learn about various
types of lists that can be
added to a Web page
And
also, about tables
But
first ...
A few
comments on the general structure of HTML
tags
9.1
Single Tags
<tagName>
Example:
<BR>
Single
Tags with
Atributes
<tagName
attributes>
Example:
<HR width="50%">
Paired
Tags
<tagName> ...
</tagName>
Example:
<H1>
... </H1>
Paired
Tags with
Attributes
<tagName
attributes > ...
</tagName>
Example:
<H1 align="center"> ...
</H1>
40
Introduction
to Computing CS101
VU
List
41
Introduction
to Computing CS101
VU
<HTML>
<HEAD>
<TITLE>Altaf
Khan's Home Page</TITLE>
</HEAD>
<BODY>
<H1>Altaf
Khan</H1>
<P><B>Adjunct
Lecturer in Computer
Science</B><BR>
<A
HREF="http://www.vu.edu.pk/">Virtual
University</A><BR>
Building
1, 3rd Floor, Aiwan-e-Iqbal,
Lahore<BR>
+92
42 555 1212<BR>
<A
HREF="mailto:altaf@vu.edu.pk">altaf@vu.edu.pk</A><BR></P>
<P>I
teach the <A
HREF="http://www.vu.edu.pk/cs101/">Introduction to
Computing</A> course.
</P>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Altaf
Khan's Home Page</TITLE>
</HEAD>
<BODY>
<H1>Altaf
Khan</H1>
<P><B>Adjunct
Lecturer in Computer
Science</B><BR>
<A
HREF="http://www.vu.edu.pk/">Virtual
University</A><BR>
Building
1, 3rd Floor, Aiwan-e-Iqbal,
Lahore<BR>
+92
42 555 1212<BR>
<A
HREF="mailto:altaf@vu.edu.pk">altaf@vu.edu.pk</A><BR></P>
<P>I
teach the <A
HREF="http://www.vu.edu.pk/cs101/">Introduction to
Computing</A> course.
</P>
The
additional code for
the list
and table goes
42
Introduction
to Computing CS101
VU
</BODY>
<P>My
favorite PC games
are:</P>
</HTML>
<UL>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</UL>
Additional
<P>My
favorite sports
are:</P>
code
<TABLE
border = "1" >
<TR>
<TH>Indoor</TH>
<TH>Outdoor</TH>
</TR>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
<P>My
favorite PC games
are:</P>
Code
for
<UL>
the
list
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</UL>
<P>My
favorite sports
are:</P>
<TABLE
border = "1" >
<TR>
<TH>Indoor</TH>
Code
for
<TH>Outdoor</TH>
</TR>
the
table
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
HTML
Code
Browser
Display
<UL>
<LI>SimCity</LI>
·
<LI>Quake</LI>
<LI>Bridge</LI>
SimCity
</UL>
·
Quake
·
Bridge
<UL>
Un-ordered
List
<LI>
Line
Item
43
Introduction
to Computing CS101
VU
The
default "bullet" for these
lists is a "disc"
That,
however, can be changed to a
"circle" or a "square" with the
help of the type
attribute
HTML
Code
Browser
Display
<UL
type = "circle">
<LI>SimCity</LI>
·
<LI>Quake</LI>
SimCity
<LI>Bridge</LI>
·
</UL>
Quake
·
Bridge
Q: What
happens if I start a new
list without
closing
the original one?
<UL>
<LI>SimCity</LI>
<LI>Quake
II</LI>
<UL>
<LI>SimCity
3000</LI>
Browser
Display
<LI>Quake
III</LI>
</UL>
<LI>Bridge</LI>
</UL>
Different
bullets
Additional
tab
·
SimCity
·
Quake
II
· Sim
City
3000
·
Qua
ke
III
·
Bridge
44
Introduction
to Computing CS101
VU
Such
structures, i.e., those in
which another starts before the
first list is finished, are
called Nested Lists
9.2
Types of Lists
In
addition to un-ordered lists, HTML
supports two other
types
Ordered
Lists
Definition
List
Ordered
List
Browser
Display
OL
instead
of UL
<OL>
<LI>SimCity</LI>
1.
SimCity
<LI>Quake</LI>
2.
Quake
<LI>Bridge</LI>
3.
Bridge
</OL>
Numbers
instead
of discs,
circles or
squares
Ordered
List
Browser
Display
<OL
type = "a">
a.
SimCity
<LI>SimCity</LI>
b.
Quake
<LI>Quake</LI>
c.
Bridge
<LI>Bridge</LI>
</OL>
9.3
Ordered List Types
Type
Result
"A"
A, B, C,
...
"a"
a, b, c,
...
"I"
I, II, III,
IV, ...
"i"
i,
ii, iii, iv, ...
"1"
1, 2, 3,
...
45
Introduction
to Computing CS101
VU
Q: How would
one start an ordered list
with
something
other than 1
Browser
Display
25.
SimCity
26.
Quake
27.
Bridge
Ordered
List
Browser
Display
<OL
start = "25">
25.
SimCity
<LI>SimCity</LI>
26.
Quake
27.
Bridge
<LI>Quake</LI>
<LI>Bridge</LI>
</OL>
Browser
Definition
List
Display
<DL>
Ter
SimCity
<DT>SimCity</DT>
A
great
<DD>A
great
simulation
simulation
game
in
game in
which
which
one
one
build
build
cities
cities
</DD>
Definition
Quake
<DT>Quake</DT>
<DD>
One of the
One of
the
best of
the
best of
the
shoot-em-up
genre
</DD>
shoot-em-
</DL>
up
genre
<DL>
Definition
List
<DT>
Term
<DD>
Definition
46
Introduction
to Computing CS101
VU
Ordered
lists as well as definition
lists can be nested just
like the un-ordered
lists
Can
any type of list be nested
into any other
type?
Lists
are one way of presenting data in a an
ordered or formal fashion
Tables
provide another - more customizable - way of
displaying ordered information
on Web
pages
Browser
Display
Indoor
Outdoor
Squash
Cricket
Browser
Display
HTML
Code
<TABLE
border = "1" >
Indoor
Outdoor
<TR>
<TH>Indoor</TH>
<TH>Outdoor</TH>
Squash
Cricket
</TR>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
Table
<TABLE>
(made
up of rows)
Row
<TR>
(made
up of data cells)
Heading
Data Cell
<TH>
(Can
contain paragraphs, images,
lists,
forms,
tables)
Data
Cell
<TD>
(Can
contain paragraphs, images,
lists,
forms,
tables)
<TABLE>
Attributes
BORDER
Determines
the thickness of the table
border
Example:
<TABLE BORDER =
"2">
CELLPADING
Determines
the distance between the border of a
cell and the contents of the
cell
Example:
<TABLE CELLPADDING =
"3">
47
Introduction
to Computing CS101
VU
CELLSPACING
Determines
the empty spacing between the borders of
two adjacent cells
Example:
<TABLE CELLSPACING =
"1">
HTML
Code
HTML
Code
Indoor
Outdoor
<TABLE
border = "1" >
<TR>
<TH>Indoor</TH>
Squash
Cricket
<TH>Outdoor</TH>
</TR>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
Browse
Display
HTML
Code
<TABLE>
<TR>
Indoor
Outdoor
<TH>Indoor</TH>
<TH>Outdoor</TH>
</TR>
<TR>
Squash
Cricket
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
<TABLE>,<TR>,<TH>,<TD>
Attributes
ALIGN
Possible
values: Center, Left,
Right
Example:
<TH ALIGN = "center">
BGCOLOR
50%
of
Example:
<TD BGCOLOR =
"red">
the
WIDTH
screen
Example:
<TR WIDTH =
"40%">
width
HEIGHT
Example:
<TABLE HEIGHT =
"200">
<TR>
Attributes
VLAIGN
Determines
the vertical alignment of the
contents of all of the cells in a
particular row
Possible
values: Top, Middle,
Bottom
Example:
<TR VALIGN = "bottom">
<TH>
& <TD> Attributes
NOWRAP
Extend
the width of a cell, if necessary, to
fit the contents of the cell in a
single line
Example:
<TD NOWRAP>
COLSPAN
48
Introduction
to Computing CS101
VU
No.
of rows the current cell should
extend itself
downward
Example:
<TD COLSPAN =
"2">
ROWSPAN
The
number of columns the current cell should
extend itself
Example:
<TD ROWSPAN =
"5">
VALIGN
Same
as that for
<TR>
HTML
CODE
Browse
Display
<TABLE
border="1" >
Indoor
Outdoor
<TR>
<TH
colspan="2">
Indoor
Outdoor
Squash
Cricket
</TH>
</TR>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
Expenses
Income
Year
Quarter
Quetta
Dubai
Quetta
Dubai
1
1,900
8,650
9,000
7,780
2
2,230
8,650
8,500
8,670
2001
3
4,000
8,650
9,900
9,870
4
2,200
8,650
9,800
9,900
1
7,780
8,650
7,780
9,000
2
8,670
8,650
8,670
8,500
2002
3
9,870
8,650
9,870
9,900
4
9,900
8,650
9,900
9,800
HTML
Code
Browser
Display
My favorite
sports
<TABLE
border = "1" >
<CAPTION>
Squash
Sports
My favorite
sports
</CAPTION>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
49
Introduction
to Computing CS101
VU
HTML
Code
Browser
Display
<TABLE
border = "1" >
My favorite
sports
<CAPTION>
My favorite
sports
Squash
Sports
</CAPTIst N>placed
Mu Obe
<TRi> mediately after
m
<TD>STABLE</tTD>
the< quash> ag
<TD>Cricket</TD>
</TR>
Must be
placed
</TABLE>
immediately
after
the<TABLE>
tag
9.4
Useful URL
The
Table Sampler
http://www.netscape.com/assist/net_sites/table_sample.html
In
Today's Lesson ...
We
learnt how to extend our Web
pages by adding a few more
tags
Specifically,
we discussed various types of lists
that can be added to a Web
page un-ordered, ordered
and
definition lists
And
also, about tables: about various
tags used in a table and
their associated
attributes
Next
Web Dev Lecture:
Interactive
Forms
We
will try to understand the utility of
forms on Web pages
We
will find out about the
various components that are
used in a form
We
will become able to build a
simple, interactive
form
50
Table of Contents:
|
|||||