CS101 Introduction to Computing Lecture 6 Developing

1
CS101 Introduction to ComputingLecture
6Developing Hosting a Web Page (Web
Development Lecture 2)
2
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 the
  Web the Semantic Web, and how it is different
  from the Web of today.
• Todays Web is targeted squarely at us, humans.
  Whereas, the Semantic Web is being constructed in
  such a way that it is easily understandable for
  the computers

3
Learning Goals for Today

• To develop your personal Web page
• To upload your Web page to VUs Web server so
  that it becomes visible on the Internet as
  http//www.vu.edu.pk/xxxxxxxx/
• where xxxxxxxx is your user ID

4
But first How I developed my personal Web
pageand made it available over the Internet
through the URLhttp//www.vu.edu.pk/altaf
5
page title
URL
link
6
HTML
Hyper Text Markup Language
7

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAltaf Khan's Home Pagelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtAltaf Khanlt/H1gt
• ltPgtltBgtAdjunct Lecturer in Computer
  Sciencelt/BgtltBRgt
• ltA HREF"http//www.vu.edu.pk/"gtVirtual
  Universitylt/AgtltBRgt
• Building 1, 3rd Floor, Aiwan-e-Iqbal, LahoreltBRgt
• 92 42 555 1212ltBRgt
• ltA HREF"mailtoaltaf_at_vu.edu.pk"gtaltaf_at_vu.edu.pklt/
  AgtltBRgtlt/Pgt
• ltPgtI teach the ltA HREF"http//www.vu.edu.pk/cs101
  /"gtIntroduction to Computinglt/Agt course. lt/Pgt
• lt/BODYgt

HTML Code
8

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAltaf Khan's Home Pagelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtAltaf Khanlt/H1gt
• ltPgtltBgtAdjunct Lecturer in Computer
  Sciencelt/BgtltBRgt
• ltA HREF"http//www.vu.edu.pk/"gtVirtual
  Universitylt/AgtltBRgt
• Building 1, 3rd Floor, Aiwan-e-Iqbal, LahoreltBRgt
• 92 42 555 1212ltBRgt
• ltA HREF"mailtoaltaf_at_vu.edu.pk"gtaltaf_at_vu.edu.pklt/
  AgtltBRgtlt/Pgt
• ltPgtI teach the ltA HREF"http//www.vu.edu.pk/cs101
  /"gtIntroduction to Computinglt/Agt course. lt/Pgt
• lt/BODYgt

1
HTML Code
2
3
4
The ones in yellow, i.e. ltHTMLgt, lt/HTMLgt,
ltHEADgt, lt/HEADgt, ltBODYgt, lt/BODYgt are the six
essential HTML tags, required in all Web pages
5
6
9

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAltaf Khan's Home Pagelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtAltaf Khanlt/H1gt
• ltPgtltBgtAdjunct Lecturer in Computer
  Sciencelt/BgtltBRgt
• ltA HREF"http//www.vu.edu.pk/"gtVirtual
  Universitylt/AgtltBRgt
• Building 1, 3rd Floor, Aiwan-e-Iqbal, LahoreltBRgt
• 92 42 555 1212ltBRgt
• ltA HREF"mailtoaltaf_at_vu.edu.pk"gtaltaf_at_vu.edu.pklt/
  AgtltBRgtlt/Pgt
• ltPgtI teach the ltA HREF"http//www.vu.edu.pk/cs101
  /"gtIntroduction to Computinglt/Agt course. lt/Pgt
• lt/BODYgt

10

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAltaf Khan's Home Pagelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtAltaf Khanlt/H1gt
• ltPgtltBgtAdjunct Lecturer in Computer
  Sciencelt/BgtltBRgt
• ltA HREF"http//www.vu.edu.pk/"gtVirtual
  Universitylt/AgtltBRgt
• Building 1, 3rd Floor, Aiwan-e-Iqbal, LahoreltBRgt
• 92 42 555 1212ltBRgt
• ltA HREF"mailtoaltaf_at_vu.edu.pk"gtaltaf_at_vu.edu.pklt/
  AgtltBRgtlt/Pgt
• ltPgtI teach the ltA HREF"http//www.vu.edu.pk/cs101
  /"gtIntroduction to Computinglt/Agt course. lt/Pgt
• lt/BODYgt

11

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAltaf Khan's Home Pagelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtAltaf Khanlt/H1gt
• ltPgtltBgtAdjunct Lecturer in Computer
  Sciencelt/BgtltBRgt
• ltA HREF"http//www.vu.edu.pk/"gtVirtual
  Universitylt/AgtltBRgt
• Building 1, 3rd Floor, Aiwan-e-Iqbal, LahoreltBRgt
• 92 42 555 1212ltBRgt
• ltA HREF"mailtoaltaf_at_vu.edu.pk"gtaltaf_at_vu.edu.pklt/
  AgtltBRgtlt/Pgt
• ltPgtI teach the ltA HREF"http//www.vu.edu.pk/cs101
  /"gtIntroduction to Computinglt/Agt course. lt/Pgt
• lt/BODYgt

12

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAltaf Khan's Home Pagelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtAltaf Khanlt/H1gt
• ltPgtltBgtAdjunct Lecturer in Computer
  Sciencelt/BgtltBRgt
• ltA HREF"http//www.vu.edu.pk/"gtVirtual
  Universitylt/AgtltBRgt
• Building 1, 3rd Floor, Aiwan-e-Iqbal, LahoreltBRgt
• 92 42 555 1212ltBRgt
• ltA HREF"mailtoaltaf_at_vu.edu.pk"gtaltaf_at_vu.edu.pklt/
  AgtltBRgtlt/Pgt
• ltPgtI teach the ltA HREF"http//www.vu.edu.pk/cs101
  /"gtIntroduction to Computinglt/Agt course. lt/Pgt
• lt/BODYgt

Description of the link
13

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAltaf Khan's Home Pagelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtAltaf Khanlt/H1gt
• ltPgtltBgtAdjunct Lecturer in Computer
  Sciencelt/BgtltBRgt
• ltA HREF"http//www.vu.edu.pk/"gtVirtual
  Universitylt/AgtltBRgt
• Building 1, 3rd Floor, Aiwan-e-Iqbal, LahoreltBRgt
• 92 42 555 1212ltBRgt
• ltA HREF"mailtoaltaf_at_vu.edu.pk"gtaltaf_at_vu.edu.pklt/
  AgtltBRgtlt/Pgt
• ltPgtI teach the ltA HREF"http//www.vu.edu.pk/cs101
  /"gtIntroduction to Computinglt/Agt course. lt/Pgt
• lt/BODYgt

URL of the link
14

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAltaf Khan's Home Pagelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtAltaf Khanlt/H1gt
• ltPgtltBgtAdjunct Lecturer in Computer
  Sciencelt/BgtltBRgt
• ltA HREF"http//www.vu.edu.pk/"gtVirtual
  Universitylt/AgtltBRgt
• Building 1, 3rd Floor, Aiwan-e-Iqbal, LahoreltBRgt
• 92 42 555 1212ltBRgt
• ltA HREF"mailtoaltaf_at_vu.edu.pk"gtaltaf_at_vu.edu.pklt/
  AgtltBRgtlt/Pgt
• ltPgtI teach the ltA HREF"http//www.vu.edu.pk/cs101
  /"gtIntroduction to Computinglt/Agt course. lt/Pgt
• lt/BODYgt

15

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAltaf Khan's Home Pagelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtAltaf Khanlt/H1gt
• ltPgtltBgtAdjunct Lecturer in Computer
  Sciencelt/BgtltBRgt
• ltA HREF"http//www.vu.edu.pk/"gtVirtual
  Universitylt/AgtltBRgt
• Building 1, 3rd Floor, Aiwan-e-Iqbal, LahoreltBRgt
• 92 42 555 1212ltBRgt
• ltA HREF"mailtoaltaf_at_vu.edu.pk"gtaltaf_at_vu.edu.pklt/
  AgtltBRgtlt/Pgt
• ltPgtI teach the ltA HREF"http//www.vu.edu.pk/cs101
  /"gtIntroduction to Computinglt/Agt course. lt/Pgt
• lt/BODYgt

16

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAltaf Khan's Home Pagelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtAltaf Khanlt/H1gt
• ltPgtltBgtAdjunct Lecturer in Computer
  Sciencelt/BgtltBRgt
• ltA HREF"http//www.vu.edu.pk/"gtVirtual
  Universitylt/AgtltBRgt
• Building 1, 3rd Floor, Aiwan-e-Iqbal, LahoreltBRgt
• 92 42 555 1212ltBRgt
• ltA HREF"mailtoaltaf_at_vu.edu.pk"gtaltaf_at_vu.edu.pklt/
  AgtltBRgtlt/Pgt
• ltPgtI teach the ltA HREF"http//www.vu.edu.pk/cs101
  /"gtIntroduction to Computinglt/Agt course. lt/Pgt
• lt/BODYgt

17

• ltHTMLgt
• ltHEADgt
• ltTITLEgtAltaf Khan's Home Pagelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtAltaf Khanlt/H1gt
• ltPgtltBgtAdjunct Lecturer in Computer
  Sciencelt/BgtltBRgt
• ltA HREF"http//www.vu.edu.pk/"gtVirtual
  Universitylt/AgtltBRgt
• Building 1, 3rd Floor, Aiwan-e-Iqbal, LahoreltBRgt
• 92 42 555 1212ltBRgt
• ltA HREF"mailtoaltaf_at_vu.edu.pk"gtaltaf_at_vu.edu.pklt/
  AgtltBRgtlt/Pgt
• ltPgtI teach the ltA HREF"http//www.vu.edu.pk/cs101
  /"gtIntroduction to Computinglt/Agt course. lt/Pgt
• lt/BODYgt

18
This HTML document was developed in a plain-text
editor called notepad
19
(No Transcript)
20
After typing the code into notepad, I saved it as
index.html To check if I have done everything
right, I double clicked on icon of the saved file
index.html Double clicking on the icon launched
the Web browser displaying my index.html
21
My Web page is done!
22
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.
23
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
24
Upload Process
I went to the Web server upload page on the VU
Intranet and uploaded my Web page to my account
on the VU Web server
25
(No Transcript)
26
Eureka!
27
My Web page is now accessible from all of the
millions of computers connected to the Internet
28
http//www.vu.edu.pk/altaf/index.html
http//www.vu.edu.pk/altaf
29
Enough about mine Here is how you can develop
your personal Web page and make it available on
the Internet as http//www.vu.edu.pk/xxxxxxxx
30
Developing Your Own Web Page Step 1 Open
notepad, type in the HTML code, and save it as
index.html on your PCs desktop
31
Developing Your Own Web Page Step 2 Log on to
the VU Intranet and upload that index.html from
your PCs Desktop to your account on VUs Web
server
32
That is it! Your Web page is now accessible on
the Internet through the URL http//www.vu.edu.pk
/xxxxxxxx where xxxxxxxx is your user ID
33
Before we finish for the day, a brief review of
the HTML tags
34
ltHTMLgt lt/HTMLgt
35
HTML tags that go in the HEAD portion of a Web
page
36
ltHEADgt lt/HEADgt
37
ltTITLEgt lt/TITLEgt
38
HTML tags that go in the BODY portion of a Web
page
39
ltBODYgt lt/BODYgt
40
ltPgt lt/Pgt Paragraph
41
ltBRgt Line break
42
ltBgt lt/Bgt Bold text
43
ltA HREF action gt label lt/Agt Anchor (Anchors
are used to embed links in a Web page)
44
ltA HREF action gt label lt/Agt

• 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 mailtoaltaf_at_vu.edu.pk

45
ltA HREF action gt label lt/Agt

• label can be any text string

46
HTML Code

• I am at the
• ltA HREFhttp//www.vu.edu.pkgtVirtual
  Universitylt/Agt. You can send me an e-mail by
  clicking
• ltA HREFmailtobhola_at_vu.edu.pkgtherelt/Agt.

Browser Display
I am at the Virtual University. You can send me
an e-mail by clicking here.
47
End of HTML tag review
48
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

49
Useful URLs

• HTML for the Conceptually Challenged
• http//www.arachnoid.com/lutusp/html_tutor.html
• NCSAs Beginner's Guide to HTML
• http//archive.ncsa.uiuc.edu/General/Internet/WWW/
  HTMLPrimerAll.html

50
Homework Assignment

• Develop your own home page. It should be
  accessible as http//www.vu.edu.pk/xxxxxxxx
  (xxxxxxxx is your user ID)
• Among other things, it should contain
• At least one link to http//www.vu.edu.pk/altaf
• Your (clickable) email address
• A paragraph (50-100 words) on what you see
  yourself doing 10 years from now
• Consult your syllabus for the submission deadline
  for this assignment

51
Todays was our 2nd Web Dev lecture

• In the 3rd Web Dev lecture well learn about
  adding Lists Tables to your Web page