7/27/2019 Cs101_Lec06

1/51

CS101 Introduction to Computing

Lecture 6Developing & Hosting a Web page

(Web Development Lecture 2)

7/27/2019 Cs101_Lec06

2/51

Today is our 2nd Web Dev lecture

During our 1st lecture about the Web

We answered various questions about the Web.

How it works, How it is structured, etc.

We also commented about the future shape of theWeb: the Semantic Web, and how it is different fromthe Web of today.

Todays Web is targeted squarely at us, humans.Whereas, the Semantic Web is being constructed insuch a way that it is easily understandable for thecomputers

7/27/2019 Cs101_Lec06

3/51

Learning Goals for Today

1. To develop your personal Web page

2. To upload your Web page to VUs Web

server so that it becomes visible on the

Internet as http://www.vu.edu.pk/~xxxxxxx/

where xxxxxxx is your user ID

7/27/2019 Cs101_Lec06

4/51

But first How I developed my personal Web pageand made it available over the Internet through the URL

http://www.vu.edu.pk/~altaf

7/27/2019 Cs101_Lec06

5/51

URLpage title

link

7/27/2019 Cs101_Lec06

6/51

HyperText Markup Language

7/27/2019 Cs101_Lec06

7/51

Altaf Khan's Home Page

Altaf Khan

Adjunct Lecturer in Computer Science
Virtual University

Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore

+92 42 555 1212

altaf@vu.edu.pk

I teach the Introduction

to Computing course.

HTML Code

7/27/2019 Cs101_Lec06

8/51

Altaf Khan's Home Page

Altaf Khan

Adjunct Lecturer in Computer Science
Virtual University

Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore

+92 42 555 1212

altaf@vu.edu.pk

I teach the Introduction

to Computing course.

HTML Code

The ones in yellow, i.e.

, , ,

, , are the six essential HTML tags,

required in all Web pages

1

2

3

4

5

6

7/27/2019 Cs101_Lec06

9/51

Altaf Khan's Home Page

Altaf Khan

Adjunct Lecturer in Computer Science
Virtual University

Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore

+92 42 555 1212

altaf@vu.edu.pk

I teach the Introduction

to Computing course.

7/27/2019 Cs101_Lec06

10/51

Altaf Khan's Home Page

Altaf Khan

Adjunct Lecturer in Computer Science
Virtual University

Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore

+92 42 555 1212

altaf@vu.edu.pk

I teach the Introduction

to Computing course.

7/27/2019 Cs101_Lec06

11/51

Altaf Khan's Home Page

Altaf Khan

Adjunct Lecturer in Computer Science
Virtual University

Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore

+92 42 555 1212

altaf@vu.edu.pk

I teach the Introduction

to Computing course.

7/27/2019 Cs101_Lec06

12/51

Altaf Khan's Home Page

Altaf Khan

Adjunct Lecturer in Computer Science
Virtual University

Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore

+92 42 555 1212

altaf@vu.edu.pk

I teach the Introduction

to Computing course.

Description of the

link

7/27/2019 Cs101_Lec06

13/51

Altaf Khan's Home Page

Altaf Khan

Adjunct Lecturer in Computer Science
Virtual University

Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore

+92 42 555 1212

altaf@vu.edu.pk

I teach the Introduction

to Computing course.

URL of thelink

7/27/2019 Cs101_Lec06

14/51

Altaf Khan's Home Page

Altaf Khan

Adjunct Lecturer in Computer Science
Virtual University

Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore

+92 42 555 1212

altaf@vu.edu.pk

I teach the Introduction

to Computing course.

7/27/2019 Cs101_Lec06

15/51

Altaf Khan's Home Page

Altaf Khan

Adjunct Lecturer in Computer Science
Virtual University

Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore

+92 42 555 1212

altaf@vu.edu.pk

I teach the Introduction

to Computing course.

7/27/2019 Cs101_Lec06

16/51

Altaf Khan's Home Page

Altaf Khan

Adjunct Lecturer in Computer Science
Virtual University

Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore

+92 42 555 1212

altaf@vu.edu.pk

I teach the Introduction

to Computing course.

7/27/2019 Cs101_Lec06

17/51

Altaf Khan's Home Page

Altaf Khan

Adjunct Lecturer in Computer Science
Virtual University

Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore

+92 42 555 1212

altaf@vu.edu.pk

I teach the Introduction

to Computing course.

7/27/2019 Cs101_Lec06

18/51

This HTML document was developedin a plain-text editor called notepad

7/27/2019 Cs101_Lec06

19/51

7/27/2019 Cs101_Lec06

20/51

After typing the code into notepad, I

saved it asindex.html

To check if I have done everything right,

I double clicked on icon of the saved fileindex.html

Double clicking on the icon launched theWeb browser displaying my index.html

7/27/2019 Cs101_Lec06

21/51

My Web page is done!

7/27/2019 Cs101_Lec06

22/51

Problem!My Web page is visible only on mycomputer. It would be nice if it was

also visible on the computers of all

my friends and relatives as well.

7/27/2019 Cs101_Lec06

23/51

Solution!I need to uploadmy Web page to a Web

server that is connected to the Internet

As a result, my Web page will becomeaccessible to anyone with a computer

hooked up to the Internet

7/27/2019 Cs101_Lec06

24/51

Upload ProcessI went to the Web server upload

page on the VU Intranet and

uploaded my Web page to my

account on the VU Web server

7/27/2019 Cs101_Lec06

25/51

7/27/2019 Cs101_Lec06

26/51

Eureka!

7/27/2019 Cs101_Lec06

27/51

My Web page is now

accessible from all of the

millions of computers

connected to the Internet

7/27/2019 Cs101_Lec06

28/51

http://www.vu.edu.pk/~altaf/index.html

http://www.vu.edu.pk/~altaf

7/27/2019 Cs101_Lec06

29/51

Enough about mine

Here is how you can develop your personal Web pageand make it available on the Internet as

http://www.vu.edu.pk/~xxxxxxx

7/27/2019 Cs101_Lec06

30/51

Developing Your Own Web Page

Open notepad, type in the HTML code, and save

it as index.htmlon your PCs desktop

7/27/2019 Cs101_Lec06

31/51

Developing Your Own Web Page

Log on to the VU Intranet and upload that

index.htmlfrom your PCs Desktop to your

account on VUs Web server

7/27/2019 Cs101_Lec06

32/51

That is it!Your Web page is now accessible on the Internet through the URL:

http://www.vu.edu.pk/~xxxxxxxwhere xxxxxxx is your user ID

7/27/2019 Cs101_Lec06

33/51

Before we finish for the day, abrief review of the HTMLtags

7/27/2019 Cs101_Lec06

34/51

7/27/2019 Cs101_Lec06

35/51

HTML tags that go inthe HEAD portion of

a Web page

7/27/2019 Cs101_Lec06

36/51

7/27/2019 Cs101_Lec06

37/51

7/27/2019 Cs101_Lec06

38/51

HTML tags that go inthe BODY portion of

a Web page

7/27/2019 Cs101_Lec06

39/51

7/27/2019 Cs101_Lec06

40/51

Paragraph

7/27/2019 Cs101_Lec06

41/51

Line break

7/27/2019 Cs101_Lec06

42/51

Bold text

7/27/2019 Cs101_Lec06

43/51

label

Anchor

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

7/27/2019 Cs101_Lec06

44/51

label

http://

Displays the Web page specified by the link

example:http://www.vu.edu.pk

mailto:

Sends an e-mail to the specified address

example:mailto:altaf@vu.edu.pk

7/27/2019 Cs101_Lec06

45/51

label

labelcan be any text string

7/27/2019 Cs101_Lec06

46/51

HTML CodeI am at the

VirtualUniversity. You can send me an e-mail

by clicking

here.

Browser Display

I am at theVirtual University. You can send me an e-mail by

clickinghere.

7/27/2019 Cs101_Lec06

47/51

End of HTML tag review

7/27/2019 Cs101_Lec06

48/51

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

7/27/2019 Cs101_Lec06

49/51

Useful URLs

HTML for the Conceptually Challengedhttp://www.arachnoid.com/lutusp/html_tutor.html

NCSAs Beginner's Guide to HTMLhttp://archive.ncsa.uiuc.edu/General/Internet/WWW/

HTMLPrimerAll.html

7/27/2019 Cs101_Lec06

50/51

Homework Assignment

Develop your own home page. It should be accessible ashttp://www.vu.edu.pk/~xxxxxxx(xxxxxxxx is your user ID)

Among other things, it should contain

At least one link to http://www.vu.edu.pk/~altaf

Your (clickable) emailaddress

A paragraph (50-100 words) on what you see yourselfdoing 10 years from now

Consult your syllabus for the submission deadline forthis assignment

7/27/2019 Cs101_Lec06

51/51

Todays was our 2nd Web Dev lecture

In the 3rdWeb Dev lecture well learn aboutadding Lists & Tables to your Web page