Spread Knowledge

CS101 - Introduction to Computing - Lecture Handout 09

User Rating:  / 0
PoorBest 

Related Content: CS101 - VU Lectures, Handouts, PPT Slides, Assignments, Quizzes, Papers & Books of Introduction to Computing

HTML Lists & Tables

(Web Development Lecture 3)

Today is our 3rd Web Dev lecture During our 2nd lecture 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

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>

Single Tags

Single Tags 1

Single Tags 2

<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:This email address is being protected from spambots. You need JavaScript enabled to view it.">This email address is being protected from spambots. You need JavaScript enabled to view it.</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:This email address is being protected from spambots. You need JavaScript enabled to view it.">This email address is being protected from spambots. You need JavaScript enabled to view it.</A><BR></P>
<P>I teach the <A HREF="http://www.vu.edu.pk/cs101/">Introduction to Computing</A> course. </P>

additional code

</BODY>
</HTML>

additional code 1

HTML Code & Browser Display

HTML Code & Browser Display 1

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 2

Such structures, i.e., those in which another starts before the first list is finished, are called Nested Lists

Types of Lists

In addition to un-ordered lists, HTML supports two other types
Ordered Lists
Definition List

Types of Lists

Ordered List Types

Q: How would one start an ordered list with something other than 1

Ordered List Types 1

Ordered List Types 2

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

Ordered List Types 3

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”>

Ordered List Types 4

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
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>

Ordered List Types 5

Ordered List Types 6

Useful URL

The Table Sampler

http://www.netscape.com/assist/net_sites/table_sample.html
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 – unordered, 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