cs101 introduction to computing lecture html lists and tables (web development lecture 3)
TRANSCRIPT
![Page 1: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/1.jpg)
CS101 Introduction to Computing
LectureHTML Lists and Tables
(Web Development Lecture 3)
![Page 2: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/2.jpg)
HTML Code
<UL>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</UL>
• SimCity
• Quake
• Bridge
Browser Display
![Page 3: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/3.jpg)
<UL> Un-ordered List
<LI> Line Item
![Page 4: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/4.jpg)
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
![Page 5: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/5.jpg)
HTML Code
<UL type = “circle”>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</UL>
• SimCity
• Quake
• Bridge
Browser Display
![Page 6: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/6.jpg)
type = “square”
![Page 7: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/7.jpg)
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>
![Page 8: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/8.jpg)
• SimCity
• Quake II
• SimCity 3000
• Quake III
• Bridge
Browser Display
1. Different bullets2. Additional tab
![Page 9: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/9.jpg)
Such structures, i.e., those in which a new one starts before the first list is finished, are called Nested Lists
![Page 10: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/10.jpg)
Types of Lists
In addition to un-ordered lists, HTML supports two other types
– Ordered Lists
– Definition List
![Page 11: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/11.jpg)
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
![Page 12: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/12.jpg)
Ordered List
<OL type = “a”>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</OL>
a. SimCity
b. Quake
c. Bridge
Browser Display
![Page 13: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/13.jpg)
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, …
![Page 14: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/14.jpg)
Q: How would one start an ordered list with a number other than 1
25. SimCity
26. Quake
27. Bridge
Browser Display
![Page 15: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/15.jpg)
Ordered List
<OL start = “25”>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</OL>
25. SimCity
26. Quake
27. Bridge
Browser Display
![Page 16: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/16.jpg)
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
Term
Definition
![Page 17: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/17.jpg)
<DL> Definition List
<DT> Term
<DD> Definition
![Page 18: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/18.jpg)
• 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?
![Page 19: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/19.jpg)
• 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
![Page 20: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/20.jpg)
Browser Display
Indoor Outdoor
Squash Cricket
![Page 21: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/21.jpg)
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
![Page 22: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/22.jpg)
<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)
![Page 23: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/23.jpg)
<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”>
![Page 24: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/24.jpg)
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
![Page 25: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/25.jpg)
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
![Page 26: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/26.jpg)
<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”>
40% of the
window width
![Page 27: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/27.jpg)
<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”>
![Page 28: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/28.jpg)
<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>
![Page 29: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/29.jpg)
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
![Page 30: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/30.jpg)
Year QuarterExpenses 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
![Page 31: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/31.jpg)
HTML Code
<TABLE border = "1" > <CAPTION> My favorite sports </CAPTION> <TR> <TD>Squash</TD> <TD>Cricket</TD> </TR></TABLE>
Browser Display
Squash CricketMy favorite sports
Caption must be placed immediately after the<TABLE> tag
![Page 32: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/32.jpg)
End of HTML tag review
![Page 33: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/33.jpg)
What have we learned today?
1. We now know how Web pages are built using HTML
2. We also know how to make our personal Web pages available to everyone on the Internet
![Page 34: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/34.jpg)
Useful URL’s
HTML for the Conceptually Challengedhttp://www.arachnoid.com/lutusp/html_tutor.html
NCSA’s Beginner's Guide to HTML
http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html
![Page 35: CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f175503460f94c2e469/html5/thumbnails/35.jpg)
Useful URL
The Table Sampler
http://www.netscape.com/assist/net_sites/
table_sample.html