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.zainbooks.com/~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>
List
<HTML>
<HEAD>
<TITLE>King Khan's Home Page</TITLE>
</HEAD>
<BODY>
<H1>King Khan</H1>
<P><B>Adjunct Lecturer in Computer Science</B><BR>
<A HREF="http://www.zainbooks.com/">Oxford University</A><BR>
Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore<BR>
+92 42 555 1212<BR>
<A HREF="mailto:kim@yahoo.com">kim@yahoo.com</A><BR></P>
<P>I teach the <A
HREF="http://www.zainbooks.com/Introuction-to-Computing/">Introduction
to Computing</A> course.
</P>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>King Khan's Home Page</TITLE>
</HEAD>
<BODY>
<H1>King Khan</H1>
<P><B>Adjunct Lecturer in Computer Science</B><BR>
<A HREF="http://www.zainbooks.com/">Oxford University</A><BR>
Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore<BR>
+92 42 555 1212<BR>
<A HREF="mailto:kim@yahoo.com">kim@yahoo.com</A><BR></P>
<P>I teach the <A
HREF="http://www.zainbooks.com/Introuction-to-Computing/">Introduction
to Computing</A> course.
</P>
The additional code for
the list and table goes
</BODY>
</HTML>
<UL> Un-ordered List
<LI> Line Item
<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
<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
HTML Code
<UL>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</UL> • SimCity
• Quake
• Bridge
Browser Display
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
<UL type = “circle”>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</UL>
• SimCity
• Quake
• Bridge
Browser Display
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>
• SimCity
• Quake II
• Sim City
3000
•
Quake III
• Bridge
Browser Display
Different bullets
Additional tab
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
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, …
Ordered List
<OL>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</OL>
1. SimCity
2. Quake
3. Bridge
Browser Display
OL instead
of UL
Numbers instead
of discs, circles or
squares
Ordered List
<OL type = “a”>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</OL>
a. SimCity
b. Quake
c. Bridge
Browser Display
<DL> Definition List
<DT> Term
<DD> Definition
Q:
How would one start an ordered list with
something other than 1
25. SimCity
26. Quake
27. Bridge
Browser Display
Ordered List
<OL start = “25”>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</OL>
25. SimCity
26. Quake
27. Bridge
Browser Display 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-emup
genre
Browser
Display
Ter
Definition
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
<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)
<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”>
Browser Display
Squash Cricket
Indoor Outdoor
HTML Code
<TABLE border = "1" >
<TR>
<TH>Indoor</TH>
<TH>Outdoor</TH>
</TR>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
Browser Display
Squash Cricket
Indoor Outdoor
CELLSPACING
Determines the empty spacing between the borders of two adjacent cells
Example: <TABLE CELLSPACING = “1”>
<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”>
<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
HTML Code
<TABLE border = "1" >
<TR>
<TH>Indoor</TH>
<TH>Outdoor</TH>
</TR>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
HTML Code
Squash Cricket
Indoor Outdoor
HTML Code
<TABLE>
<TR>
<TH>Indoor</TH>
<TH>Outdoor</TH>
</TR>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
Browse Display
Indoor Outdoor Squash Cricket
50% of
the
screen
width
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>
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
3 4,000 8,650 9,900 9,870
2001
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
3 9,870 8,650 9,870 9,900
2002
4 9,900 8,650 9,900 9,800
HTML CODE
<TABLE border=“1” >
<TR>
<TH colspan=“2”>
Indoor Outdoor
</TH>
</TR>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
Browse Display
Indoor Outdoor
Squash Cricket
HTML Code Browser Display
<TABLE border = "1" >
<CAPTION>
My favorite sports
</CAPTION>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
My favorite sports
Squash Sports
Must be placed
immediately after
the<TABLE> tag
9.4 Useful URL
The Table Sampler
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
HTML Code
<TABLE border = "1" >
<CAPTION>
My favorite sports
</CAPTION>
<TR>
<TD>Squash</TD>
<TD>Cricket</TD>
</TR>
</TABLE>
Browser Display
My favorite sports
Squash Sports
Must be placed
immediately after
the<TABLE> tag
|