html-lists-tables.ppt

1
CS101 Introduction to Computing
Lecture 9
HTML Lists & Tables
(Web Development Lecture 3)

2
Today is our 3rd Web Dev lecture
During our 2nd lecture on Web dev …
1. We learnt to develop our own Web pages in HTML
2. 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:
3. 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

3
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

4
But first …
A few comments on the general structure
of HTML tags

5
Single Tags
<tagName>
Example: <BR>

6
Single Tags with Atributes
<tagName attributes>
Example: <HR width=“50%”>

7
Paired Tags
<tagName> … </tagName>
Example: <H1> … </H1>

8
Paired Tags with Attributes
<tagName attributes > … </tagName>
Example: <H1 align=“center”> … </H1>

13
<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>

14
<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>
The additional code for the
list and table goes here

15
<P>My favorite PC games are:</P>
<UL>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</UL>
<P>My favorite sports are:</P>
<TABLE border = “1” >
<TR>
<TH>Indoor</TH>
<TH>Outdoor</TH>
</TR>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
Additional
code

16
<P>My favorite PC games are:</P>
<UL>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</UL>
<P>My favorite sports are:</P>
<TABLE border = “1” >
<TR>
<TH>Indoor</TH>
<TH>Outdoor</TH>
</TR>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
Code for
the list
Code for
the table

17
HTML Code
<UL>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</UL>
• SimCity
• Quake
• Bridge
Browser Display

18
<UL> Un-ordered List
<LI> Line Item

19
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

20
HTML Code
<UL type = “circle”>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</UL>
• SimCity
• Quake
• Bridge
Browser Display

22
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>
<LI>Quake III</LI>
</UL>
<LI>Bridge</LI>
</UL>

23
• SimCity
• Quake II
• SimCity 3000
• Quake III
• Bridge
Browser Display
1. Different bullets
2. Additional tab

24
Such structures, i.e., those in
which another starts before
the first list is finished, are
called Nested Lists

25
Types of Lists
In addition to un-ordered lists, HTML
supports two other types
– Ordered Lists
– Definition List

26
Ordered List
<OL>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</OL>
1. SimCity
2. Quake
3. Bridge
Browser Display
Numbers
instead of discs,
circles or
squares
OL
instead
of UL

27
Ordered List
<OL type = “a”>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</OL>
a. SimCity
b. Quake
c. Bridge
Browser Display

28
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, …

29
Q: How would one start an ordered
list with something other than 1
25. SimCity
26. Quake
27. Bridge
Browser Display

30
Ordered List
<OL start = “25”>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</OL>
25. SimCity
26. Quake
27. Bridge
Browser Display

31
Definition List
<DL>
<DT>SimCity</DT>
<DD>A great
simulation game in
which one build
cities </DD>
<DT>Quake</DT>
<DD> One of the
best of the shoot-
em-up genre
</DD>
</DL>
SimCity
A great simulation
game in which one
build cities
Quake
One of the best of
the shoot-em-up
genre
Browser Display
Ter
m
Definition

32
<DL> Definition List
<DT> Term
<DD> Definition

33
• 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?

34
• 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

35
Browser Display
Indoor Outdoor
Squash Cricket

36
HTML Code
<TABLE border = "1" >
<TR>
<TH>Indoor</TH>
<TH>Outdoor</TH>
</TR>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
Browser Display
Indoor Outdoor
Squash Cricket

37
<TABLE>
Table
(made up of rows)
<TR>
Row
(made up of data cells)
<TH>
Heading Data Cell
(Can contain paragraphs,
images, lists, forms, tables)
<TD>
Data Cell
(Can contain paragraphs,
images, lists, forms, tables)

38
<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”>
• CELLSPACING
– Determines the empty spacing between the borders of two
adjacent cells
– Example: <TABLE CELLSPACING = “1”>

39
HTML Code
<TR>
<TH>Indoor</TH>
<TH>Outdoor</TH>
</TR>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
Browser Display
Indoor Outdoor
Squash Cricket

40
HTML Code
<TABLE>
<TR>
<TH>Indoor</TH>
<TH>Outdoor</TH>
</TR>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
Browser Display
Indoor Outdoor
Squash Cricket

41
<TABLE>,<TR>,<TH>,<TD> Attributes
• ALIGN
– Possible values: Center, Left, Right
– Example: <TH ALIGN = “center”>
• BGCOLOR
– Example: <TD BGCOLOR = “red”>
• WIDTH
– Example: <TR WIDTH = “40%”>
• HEIGHT
– Example: <TABLE HEIGHT = “200”>
50% of
the
screen
width

42
<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”>

43
<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
– 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>

44
HTML Code
<TABLE border=“1” >
<TR>
<TH colspan=“2”>
Indoor Outdoor
</TH>
</TR>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
Browser Display
Indoor Outdoor
Squash Cricket

45
Year Quarter
Expenses Income
Quetta Dubai Quetta Dubai
2001
1 1,900 8,650 9,000 7,780
2 2,230 8,650 8,500 8,670
3 4,000 8,650 9,900 9,870
4 2,200 8,650 9,800 9,900
2002
1 7,780 8,650 7,780 9,000
2 8,670 8,650 8,670 8,500
3 9,870 8,650 9,870 9,900
4 9,900 8,650 9,900 9,800

46
HTML Code
<CAPTION>
My favorite sports
</CAPTION>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
Browser Display
Squash Cricket
My favorite sports

47
HTML Code
<CAPTION>
My favorite sports
</CAPTION>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
Browser Display
Squash Cricket
My favorite sports
Must be placed
immediately after
the<TABLE> tag

48
Useful URL
The Table Sampler
http://www.netscape.com/assist/
net_sites/table_sample.html

49
In Today’s Lecture …
• 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

50
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

html-lists-tables.ppt

More Related Content

Similar to html-lists-tables.ppt (20)

More from ArifKamal36 (16)

Recently uploaded (20)

html-lists-tables.ppt