Cs101_Lec09
-
Upload
fahad-nabeel -
Category
Documents
-
view
13 -
download
0
Transcript of Cs101_Lec09
![Page 1: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/1.jpg)
1
CS101 Introduction to Computing
Lecture 9HTML Lists & Tables
(Web Development Lecture 3)
![Page 2: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/2.jpg)
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 a Web server so that it becomes visible on the Internet.
![Page 3: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/3.jpg)
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
![Page 4: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/4.jpg)
4
But first …
A few comments on the general structure of HTML tags
![Page 5: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/5.jpg)
5
Single Tags
<tagName>
Example: <BR>
![Page 6: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/6.jpg)
6
Single Tags with Atributes
<tagName attributes>
Example: <HR width=“50%”>
![Page 7: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/7.jpg)
7
Paired Tags
<tagName> … </tagName>
Example: <H1> … </H1>
![Page 8: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/8.jpg)
8
Paired Tags with Attributes
<tagName attributes > … </tagName>
Example: <H1 align=“center”> … </H1>
![Page 9: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/9.jpg)
9
![Page 10: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/10.jpg)
10
![Page 11: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/11.jpg)
11
List
![Page 12: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/12.jpg)
12
Table
![Page 13: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/13.jpg)
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:[email protected]">Email: Altaf Khan</A><BR></P>
<P>I teach the <A HREF="http://www.vu.edu.pk/cs101/">Introduction to Computing</A> course. </P>
</BODY>
</HTML>
![Page 14: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/14.jpg)
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:[email protected]">Email: Altaf Khan</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
![Page 15: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/15.jpg)
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>
Additionalcode
![Page 16: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/16.jpg)
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
![Page 17: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/17.jpg)
17
HTML Code
<UL>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</UL>
• SimCity
• Quake
• Bridge
Browser Display
![Page 18: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/18.jpg)
18
<UL> Un-ordered List
<LI> Line Item
![Page 19: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/19.jpg)
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
![Page 20: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/20.jpg)
20
HTML Code
<UL type = “circle”>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</UL>
• SimCity
• Quake
• Bridge
Browser Display
![Page 21: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/21.jpg)
21
type = “square”
![Page 22: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/22.jpg)
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>
![Page 23: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/23.jpg)
23
• SimCity
• Quake II
• SimCity 3000
• Quake III
• Bridge
Browser Display
1. Different bullets
2. Additional tab
![Page 24: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/24.jpg)
24
Such structures, i.e., those in which another starts before the first list is finished, are called Nested Lists
![Page 25: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/25.jpg)
25
Types of Lists
In addition to un-ordered lists, HTML supports two other types
– Ordered Lists
– Definition List
![Page 26: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/26.jpg)
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
![Page 27: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/27.jpg)
27
Ordered List
<OL type = “a”>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</OL>
a. SimCity
b. Quake
c. Bridge
Browser Display
![Page 28: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/28.jpg)
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, …
![Page 29: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/29.jpg)
29
Q: How would one start an ordered list with something other than 1
25. SimCity
26. Quake
27. Bridge
Browser Display
![Page 30: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/30.jpg)
30
Ordered List
<OL start = “25”>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</OL>
25. SimCity
26. Quake
27. Bridge
Browser Display
![Page 31: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/31.jpg)
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
Term
Definition
![Page 32: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/32.jpg)
32
<DL> Definition List
<DT> Term
<DD> Definition
![Page 33: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/33.jpg)
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?
![Page 34: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/34.jpg)
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
![Page 35: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/35.jpg)
35
Browser Display
Indoor Outdoor
Squash Cricket
![Page 36: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/36.jpg)
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
![Page 37: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/37.jpg)
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)
![Page 38: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/38.jpg)
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”>
![Page 39: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/39.jpg)
39
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 40: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/40.jpg)
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
![Page 41: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/41.jpg)
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
![Page 42: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/42.jpg)
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”>
![Page 43: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/43.jpg)
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>
![Page 44: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/44.jpg)
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
![Page 45: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/45.jpg)
45
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 46: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/46.jpg)
46
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
![Page 47: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/47.jpg)
47
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
Must be placed immediately after the<TABLE> tag
![Page 48: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/48.jpg)
48
Useful URL
The Table Sampler
http://hissa.nist.gov/~black/tableQuikRef.htmlhttp://hissa.nist.gov/~black/tableQuikRef.html
![Page 49: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/49.jpg)
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
![Page 50: Cs101_Lec09](https://reader034.fdocuments.net/reader034/viewer/2022051516/55cf9bbe550346d033a7392e/html5/thumbnails/50.jpg)
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