ZeePedia

structure of HTML tags, types of lists in web development

<< Number systems, binary numbers, NOT, AND, OR and XOR logic operations
COMPUTER SOFTWARE: Operating Systems, Device Drivers, Trialware >>
img
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
img
Introduction to Computing ­ CS101
VU
List
41
img
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
img
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
img
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
img
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
img
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
img
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
img
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
img
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
img
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:
  1. INTRODUCTION
  2. EVOLUTION OF COMPUTING
  3. World Wide Web, Web’s structure, genesis, its evolution
  4. Types of Computers, Components, Parts of Computers
  5. List of Parts of Computers
  6. Develop your Personal Web Page: HTML
  7. Microprocessor, Bus interface unit, Data & instruction cache memory, ALU
  8. Number systems, binary numbers, NOT, AND, OR and XOR logic operations
  9. structure of HTML tags, types of lists in web development
  10. COMPUTER SOFTWARE: Operating Systems, Device Drivers, Trialware
  11. Operating System: functions, components, types of operating systems
  12. Forms on Web pages, Components of Forms, building interactive Forms
  13. APPLICATION SOFTWARE: Scientific, engineering, graphics, Business, Productivity, Entertainment, Educational Software
  14. WORD PROCESSING: Common functions of word processors, desktop publishing
  15. Interactivity to Forms, JavaScript, server-side scripts
  16. ALGORITHMS
  17. ALGORITHMS: Pseudo code, Flowcharts
  18. JavaScript and client-side scripting, objects in JavaScript
  19. Low, High-Level, interpreted, compiled, structured & object-oriented programming languages
  20. Software Design and Development Methodologies
  21. DATA TYPES & OPERATORS
  22. SPREADSHEETS
  23. FLOW CONTROL & LOOPS
  24. DESIGN HEURISTICS. Rule of thumb learned through trial & error
  25. WEB DESIGN FOR USABILITY
  26. ARRAYS
  27. COMPUTER NETWORKS: types of networks, networking topologies and protocols
  28. THE INTERNET
  29. Variables: Local and Global Variables
  30. Internet Services: FTP, Telnet, Web, eMail, Instant messaging, VoIP
  31. DEVELOPING PRESENTATIONS: Effective Multimedia Presentations
  32. Event Handlers
  33. GRAPHICS & ANIMATION
  34. INTELLIGENT SYSTEMS: techniques for designing Artificial Intelligent Systems
  35. Mathematical Functions in JavaScript
  36. DATA MANAGEMENT
  37. DATABASE SOFTWARE: Data Security, Data Integrity, Integrity, Accessibility, DBMS
  38. String Manipulations:
  39. CYBER CRIME
  40. Social Implications of Computing
  41. IMAGES & ANIMATION
  42. THE COMPUTING PROFESSION
  43. THE FUTURE OF COMPUTING
  44. PROGRAMMING METHODOLOGY
  45. REVIEW & WRAP-UP of Introduction to Computing