introduction to computing lecture 6 introduction to html (web development lecture 1)

Introduction to Computing

Lecture 6Introduction to HTML

(Web Development Lecture 1)

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

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

Requirements

• Text Editor

• Browser

• Server

link

URL

page title

HTMLHyper Text Markup Language

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

<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

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


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

<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

HTML Code<HTML>


<BODY>




</BODY>

</HTML>

HTML Code<HTML>


<BODY>




</BODY>

</HTML>

Link Label

Link Descriptio

n

HTML Code<HTML>


<BODY>




</BODY>

</HTML>

This HTML document was developed in a plain-text editor called notepad

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

My Web page is done!

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.

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

Upload Process

I used ftp to upload my Web page to the IMT Web server

Eureka!

My Web page is now accessible from all of the millions of computers connected to the Internet

http://pu.edu.pk/fac/shahidrasul/index.htm

http://pu.ias.edu.pk/fac/shahidrasul

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

Developing Your Own Web Page

Step 1Open notepad, type in the HTML code, and save it as index.htm on your PC’s Desktop

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

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

HTML tags that go in the HEAD portion of

a Web page

HTML tags that go in the BODY portion of

a Web page

<P> … </P>

Paragraph

<BR>

Line break

<B> … </B>

Bold text

<A HREF = “action” > label </A>

Anchor(Anchors are used to embed links in a Web page)


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


label can be any text string

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.

Single Tags with Attributes

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

HTML Code

<UL>

<LI>SimCity</LI>

<LI>Quake</LI>

<LI>Bridge</LI>

</UL>

• SimCity

• Quake

• Bridge

Browser Display

<UL> Un-ordered List

<LI> Line Item

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

<UL type = “circle”>

<LI>SimCity</LI>

<LI>Quake</LI>

<LI>Bridge</LI>

</UL>

• SimCity

• Quake

• Bridge

Browser Display

type = “square”

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>

• SimCity

• Quake II

• SimCity 3000

• Quake III

• Bridge

Browser Display

1. Different bullets2. Additional tab

Such structures, i.e., those in which a new one 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

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

Ordered List

<OL type = “a”>

<LI>SimCity</LI>

<LI>Quake</LI>

<LI>Bridge</LI>

</OL>

a. SimCity

b. Quake

c. Bridge

Browser Display

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

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

25. SimCity

26. Quake

27. Bridge

Browser Display

Ordered List

<OL start = “25”>

<LI>SimCity</LI>

<LI>Quake</LI>

<LI>Bridge</LI>

</OL>

25. SimCity

26. Quake

27. Bridge

Browser Display

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

<DL> Definition List

<DT> Term

<DD> Definition

• 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

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

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

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

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

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

<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

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

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

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

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

End of HTML tag review

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

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

Useful URL

The Table Sampler

http://www.netscape.com/assist/net_sites/

table_sample.html

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

introduction to computing lecture 6 introduction to html (web development lecture 1)

Documents

punjab university

computing course

html document

html web development

web browser

web pages

htmmy web page

essential html tags