CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)
Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)
description
Transcript of Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)
![Page 1: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/1.jpg)
Introduction to Computing
Lecture 6Introduction to HTML
(Web Development Lecture 1)
![Page 2: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/2.jpg)
Learning Goals for Today
1. To develop your personal Web page
2. To upload your Web page to internet Web server so that it becomes visible on the Internet as http://pu.ias.edu.pk/student/xxxxxxxxx/
where xxxxxxxxx is your user ID
![Page 3: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/3.jpg)
But first …How I developed my personal Web pageand made it available over the Internet through the URL
http://pu.ias.edu.pk/fac/xxxxx
![Page 4: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/4.jpg)
Requirements
• Text Editor
• Browser
• Server
![Page 5: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/5.jpg)
link
URL
page title
![Page 6: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/6.jpg)
HTMLHyper Text Markup Language
![Page 7: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/7.jpg)
Tags• HTML consists of sets of commands
called Tags• Tags tell browser how to display
information.• Tags come in pairs• Tags are not case sensitive• Document Tags• Text Structure Tags
![Page 8: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/8.jpg)
<HTML>
<HEAD><TITLE>SHAHID RASUL’s Home Page</TITLE></HEAD>
<BODY>
<H1> Shahid Rasul</H1>
<P><B>The Lecturer </B><BR><A HREF="http://www.pu.edu.pk/">IAS</A><BR>5New Campus The Punjab University, Lahore, Pakistan.<BR>+92-42-9231-66<BR><A HREF="mailto:[email protected]">[email protected]</A><BR></P>
<P>I teach the <A HREF="http:/sst.imt.edu.pk/cs101/">Introduction to Computing</A> course. </P>
</BODY>
</HTML>
HTML Code
![Page 9: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/9.jpg)
<HTML>
<HEAD><TITLE>Shahid Rasul's Home Page</TITLE></HEAD>
<BODY>
<H1>Shahid Rasul</H1>
<P><B>The Lecturer</B><BR><A HREF="http://www.ias.edu.pk/">IAS</A><BR>New Campus The Punjab University, Lahore, Pakistan.<BR>+92-42-9231-1256<BR><A HREF="mailto:[email protected]">[email protected]</A><BR></P>
<P>I teach the <A HREF="http:/sst.imt.edu.pk/cs101/">Introduction to Computing</A> course. </P>
</BODY>
</HTML>
HTML Code
The ones in yellow, i.e.<HTML>, </HTML>, <HEAD>,</HEAD>, <BODY>, </BODY>
are the six essential HTML tags,required in all Web pages
1
2
3
4
5
6
![Page 10: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/10.jpg)
<HTML>
<HEAD><TITLE>shahid Rasul's Home Page</TITLE></HEAD>
<BODY>
<H1>shahid Rasul</H1>
<P><B>The Lecturer</B><BR><A HREF="http://www.pu.edu.pk/">IAS</A><BR>New Campus The Punjab University, Lahore.<BR>+92-42-9231-1256<BR><A HREF="mailto:[email protected]">[email protected]</A><BR></P>
<P>I teach the <A HREF="http:/pu.edu.pk/cs101/">Introduction to Computing</A> course. </P>
</BODY>
</HTML>
HTML Code
![Page 11: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/11.jpg)
HTML Code<HTML>
<HEAD><TITLE>Shahid Rasul's Home Page</TITLE></HEAD>
<BODY>
<H1>Shahid Rasul</H1>
<P><B>The Lecturer</B><BR><A HREF="http://www.ias.edu.pk/">IAS</A><BR>New Campus The Punjab University, Lahore, Pakistan.<BR>+92-42-9231-1256<BR><A HREF="mailto:[email protected]">[email protected]</A><BR></P>
<P>I teach the <A HREF="http:/sst.imt.edu.pk/cs101/">Introduction to Computing</A> course. </P>
</BODY>
</HTML>
![Page 12: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/12.jpg)
HTML Code<HTML>
<HEAD><TITLE>Shahid Rasul's Home Page</TITLE></HEAD>
<BODY>
<H1>Shahid Rasul</H1>
<P><B>The Lecturer</B><BR><A HREF="http://www.ias.edu.pk/">IAS</A><BR>New Campus The Punjab University, Lahore, Pakistan.<BR>+92-42-9231-1256<BR><A HREF="mailto:[email protected]">[email protected]</A><BR></P>
<P>I teach the <A HREF="http:/sst.imt.edu.pk/cs101/">Introduction to Computing</A> course. </P>
</BODY>
</HTML>
![Page 13: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/13.jpg)
HTML Code<HTML>
<HEAD><TITLE>Shahid Rasul's Home Page</TITLE></HEAD>
<BODY>
<H1>Shahid Rasul</H1>
<P><B>The Lecturer</B><BR><A HREF="http://www.ias.edu.pk/">IAS</A><BR>New Campus The Punjab University, Lahore, Pakistan.<BR>+92-42-9231-1256<BR><A HREF="mailto:[email protected]">[email protected]</A><BR></P>
<P>I teach the <A HREF="http:/sst.imt.edu.pk/cs101/">Introduction to Computing</A> course. </P>
</BODY>
</HTML>
Link Label
Link Descriptio
n
![Page 14: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/14.jpg)
HTML Code<HTML>
<HEAD><TITLE>Shahid Rasul's Home Page</TITLE></HEAD>
<BODY>
<H1>Shahid Rasul</H1>
<P><B>The Lecturer</B><BR><A HREF="http://www.ias.edu.pk/">IAS</A><BR>New Campus The Punjab University, Lahore, Pakistan.<BR>+92-42-9231-1256<BR><A HREF="mailto:[email protected]">[email protected]</A><BR></P>
<P>I teach the <A HREF="http:/sst.imt.edu.pk/cs101/">Introduction to Computing</A> course. </P>
</BODY>
</HTML>
![Page 15: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/15.jpg)
HTML Code<HTML>
<HEAD><TITLE>Shahid Rasul's Home Page</TITLE></HEAD>
<BODY>
<H1>Shahid Rasul</H1>
<P><B>The Lecturer</B><BR><A HREF="http://www.ias.edu.pk/">IAS</A><BR>New Campus The Punjab University, Lahore, Pakistan.<BR>+92-42-9231-1256<BR><A HREF="mailto:[email protected]">[email protected]</A><BR></P>
<P>I teach the <A HREF="http:/sst.imt.edu.pk/cs101/">Introduction to Computing</A> course. </P>
</BODY>
</HTML>
![Page 16: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/16.jpg)
HTML Code<HTML>
<HEAD><TITLE>Shahid Rasul's Home Page</TITLE></HEAD>
<BODY>
<H1>Shahid Rasul</H1>
<P><B>The Lecturer</B><BR><A HREF="http://www.ias.edu.pk/">IAS</A><BR>New Campus The Punjab University, Lahore, Pakistan.<BR>+92-42-9231-1256<BR><A HREF="mailto:[email protected]">[email protected]</A><BR></P>
<P>I teach the <A HREF="http:/sst.imt.edu.pk/cs101/">Introduction to Computing</A> course. </P>
</BODY>
</HTML>
![Page 17: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/17.jpg)
HTML Code<HTML>
<HEAD><TITLE>Shahid Rasul's Home Page</TITLE></HEAD>
<BODY>
<H1>Shahid Rasul</H1>
<P><B>The Lecturer</B><BR><A HREF="http://www.ias.edu.pk/">IAS</A><BR>New Campus The Punjab University, Lahore, Pakistan.<BR>+92-42-9231-1256<BR><A HREF="mailto:[email protected]">[email protected]</A><BR></P>
<P>I teach the <A HREF="http:/sst.imt.edu.pk/cs101/">Introduction to Computing</A> course. </P>
</BODY>
</HTML>
![Page 18: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/18.jpg)
This HTML document was developed in a plain-text editor called notepad
![Page 19: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/19.jpg)
![Page 20: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/20.jpg)
After typing the code into notepad, I saved it as index.htm
To check if I have done everything right, I double clicked on icon of the saved file index.htm
Double clicking on the icon launched the Web browser displaying my index.htm
![Page 21: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/21.jpg)
My Web page is done!
![Page 22: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/22.jpg)
Problem!My Web page is visible only on my computer. It would be nice if it was also visible on the computers of all my friends and relatives as well.
![Page 23: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/23.jpg)
Solution!I need to upload my Web page to a Web server that is connected to the Internet
As a result, my Web page will become accessible to anyone with a computer hooked up to the Internet
![Page 24: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/24.jpg)
Upload Process
I used ftp to upload my Web page to the IMT Web server
![Page 25: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/25.jpg)
Eureka!
![Page 26: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/26.jpg)
My Web page is now accessible from all of the millions of computers connected to the Internet
![Page 27: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/27.jpg)
http://pu.edu.pk/fac/shahidrasul/index.htm
http://pu.ias.edu.pk/fac/shahidrasul
![Page 28: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/28.jpg)
Enough about mine …
Here is how you can develop your personal Web page
and make it available on the Internet as http://pu.edu.pk/student/xxxxxxxxx
![Page 29: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/29.jpg)
Developing Your Own Web Page
Step 1Open notepad, type in the HTML code, and save it as index.htm on your PC’s Desktop
![Page 30: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/30.jpg)
Developing Your Own Web Page
Step 2Log on to the Web server and upload that index.htm from your PC’s Desktop to your account on that Web server
![Page 31: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/31.jpg)
That is it!Your Web page is now accessible on the Internet through the URL:
http://pu.edu.pk/student/xxxxxxxxxwhere xxxxxxxxx is your user ID
![Page 32: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/32.jpg)
<HTML>……</HTML>
![Page 33: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/33.jpg)
HTML tags that go in the HEAD portion of
a Web page
![Page 34: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/34.jpg)
<HEAD>……</HEAD>
![Page 35: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/35.jpg)
<TITLE> … </TITLE>
![Page 36: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/36.jpg)
HTML tags that go in the BODY portion of
a Web page
![Page 37: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/37.jpg)
<BODY>……</BODY>
![Page 38: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/38.jpg)
<P> … </P>
Paragraph
![Page 39: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/39.jpg)
<BR>
Line break
![Page 40: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/40.jpg)
<B> … </B>
Bold text
![Page 41: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/41.jpg)
<A HREF = “action” > label </A>
Anchor(Anchors are used to embed links in a Web page)
![Page 42: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/42.jpg)
<A HREF = “action” > label </A>
• http://– Displays the Web page specified by the link– example: “http://www.pu.edu.pk”
• mailto:– Sends an e-mail to the specified address– example: “mailto:[email protected]”
![Page 43: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/43.jpg)
<A HREF = “action” > label </A>
label can be any text string
![Page 44: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/44.jpg)
HTML CodeI am at the<A HREF=“http://www.pu.edu.pk”>IMT</A>. You can send me an e-mail by clicking<A HREF=“mailto:[email protected]”>here</A>.
Browser DisplayI am at the PU. You can send me an e-mail by clicking here.
![Page 45: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/45.jpg)
Single Tags with Attributes
<tagName attributes>
Example: <HR width=“50%”>
![Page 46: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/46.jpg)
Paired Tags
<tagName> … </tagName>
Example: <H1> … </H1>
![Page 47: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/47.jpg)
Paired Tags with Attributes
<tagName attributes > … </tagName>
Example: <H1 align=“center”> … </H1>
![Page 48: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/48.jpg)
HTML Code
<UL>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</UL>
• SimCity
• Quake
• Bridge
Browser Display
![Page 49: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/49.jpg)
<UL> Un-ordered List
<LI> Line Item
![Page 50: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/50.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 51: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/51.jpg)
HTML Code
<UL type = “circle”>
<LI>SimCity</LI>
<LI>Quake</LI>
<LI>Bridge</LI>
</UL>
• SimCity
• Quake
• Bridge
Browser Display
![Page 52: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/52.jpg)
type = “square”
![Page 53: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/53.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 54: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/54.jpg)
• SimCity
• Quake II
• SimCity 3000
• Quake III
• Bridge
Browser Display
1. Different bullets2. Additional tab
![Page 55: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/55.jpg)
Such structures, i.e., those in which a new one starts before the first list is finished, are called Nested Lists
![Page 56: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/56.jpg)
Types of Lists
In addition to un-ordered lists, HTML supports two other types
– Ordered Lists
– Definition List
![Page 57: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/57.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 58: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/58.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 59: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/59.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 60: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/60.jpg)
Q: How would one start an ordered list with a number other than 1
25. SimCity
26. Quake
27. Bridge
Browser Display
![Page 61: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/61.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 62: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/62.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 63: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/63.jpg)
<DL> Definition List
<DT> Term
<DD> Definition
![Page 64: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/64.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 65: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/65.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 66: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/66.jpg)
Browser Display
Indoor Outdoor
Squash Cricket
![Page 67: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/67.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 68: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/68.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 69: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/69.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 70: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/70.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 71: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/71.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 72: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/72.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 73: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/73.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 74: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/74.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 75: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/75.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 76: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/76.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 77: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/77.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 78: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/78.jpg)
End of HTML tag review
![Page 79: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/79.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 80: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/80.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 81: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/81.jpg)
Useful URL
The Table Sampler
http://www.netscape.com/assist/net_sites/
table_sample.html
![Page 82: Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)](https://reader036.fdocuments.net/reader036/viewer/2022062322/568143a9550346895db0327f/html5/thumbnails/82.jpg)
Homework Assignment
Develop your own home page. It should be accessible as http://pu.edu.pk/student/xxxxxxxxx (xxxxxxxxx is your student ID)
Among other things, it should contain
– At least one link to http://www.pu.edu.pk/– Your (clickable) email address– A paragraph (50-100 words) on what you see yourself
doing 10 years from now
Deadline: 1:00pm, Friday, 18 February, 2005