Scribd
Upload
112 views51 pages

CS101 Introduction To Computing: (Web Development Lecture 2)

This document summarizes a lecture on developing and hosting a web page. It discusses how to create an HTML file using Notepad, save it as index.html, and upload it to a web server to make it accessible online. Key points covered include the basic HTML tags needed for any web page, how to add links to other pages and email addresses, and assigning the page a URL to make it publicly available. Students are given a homework assignment to develop their own personal web page following these steps.

Uploaded by

Shahbaz khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPS, PDF, TXT or read online on Scribd
112 views51 pages

CS101 Introduction To Computing: (Web Development Lecture 2)

This document summarizes a lecture on developing and hosting a web page. It discusses how to create an HTML file using Notepad, save it as index.html, and upload it to a web server to make it accessible online. Key points covered include the basic HTML tags needed for any web page, how to add links to other pages and email addresses, and assigning the page a URL to make it publicly available. Students are given a homework assignment to develop their own personal web page following these steps.

Uploaded by

Shahbaz khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPS, PDF, TXT or read online on Scribd
You are on page 1/ 51

CS101 Introduction to Computing

Lecture 6
Developing & Hosting a Web page
(Web Development Lecture 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.
• Today’s 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
Learning Goals for Today

1. To develop your personal Web page

2. To upload your Web page to VU’s Web


server so that it becomes visible on the
Internet as http://www.vu.edu.pk/~xxxxxxx/
where xxxxxxx is your user ID
But first …
How I developed my personal Web page
and made it available over the Internet through the URL

http://www.vu.edu.pk/~altaf
page title URL

link
HTML
Hyper Text Markup Language
<HTML>

<HEAD> HTML Code


<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:[email protected]">[email protected]</A><BR></P>

<P>I teach the <A HREF="http://www.vu.edu.pk/cs101/">Introduction


to Computing</A> course. </P>

</BODY>

</HTML>
<HTML> 1
<HEAD> 2 HTML Code
<TITLE>Altaf Khan's Home Page</TITLE>
</HEAD> 3

<BODY> 4
<H1>Altaf Khan</H1> The ones in yellow, i.e.
<HTML>, </HTML>, <HEAD>,
<P><B>Adjunct Lecturer in Computer
</HEAD>, <BODY>,Science</B><BR>
</BODY>
<A HREF="http://www.vu.edu.pk/">Virtual University</A><BR>
are the six essential HTML tags,
Building 1, 3rd Floor, Aiwan-e-Iqbal,
required in allLahore<BR>
Web pages
+92 42 555 1212<BR>
<A HREF="mailto:[email protected]">[email protected]</A><BR></P>

<P>I teach the <A HREF="http://www.vu.edu.pk/cs101/">Introduction


to Computing</A> course. </P>

</BODY> 5
</HTML> 6
<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:[email protected]">[email protected]</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:[email protected]">[email protected]</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:[email protected]">[email protected]</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> Descriptio
<BODY>
n of the
link
<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:[email protected]">[email protected]</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:[email protected]">[email protected]</A><BR></P>
URL of the
<P>I teach the <A HREF="http://www.vu.edu.pk/cs101/">Introduction
link
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:[email protected]">[email protected]</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:[email protected]">[email protected]</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:[email protected]">[email protected]</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:[email protected]">[email protected]</A><BR></P>

<P>I teach the <A HREF="http://www.vu.edu.pk/cs101/">Introduction


to Computing</A> course. </P>

</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.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
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 went to the Web server upload
page on the VU Intranet and
uploaded my Web page to my
account on the VU Web server
Eureka!
My Web page is now
accessible from all of the
millions of computers
connected to the Internet
http://www.vu.edu.pk/~altaf/index.html

http://www.vu.edu.pk/~altaf
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/~xxxxxxx
Developing Your Own Web Page

Step 1
Open notepad, type in the HTML code, and save
it as index.html on your PC’s desktop
Developing Your Own Web Page

Step 2
Log on to the VU Intranet and upload that
index.html from your PC’s Desktop to your
account on VU’s Web server
That is it!
Your Web page is now accessible on the Internet through the URL:

http://www.vu.edu.pk/~xxxxxxx
where xxxxxxx is your user ID
Before we finish for the day, a
brief review of the HTML tags …
<HTML>
…
…
</HTML>
HTML tags that go in
the HEAD portion of
a Web page
<HEAD>
…
…
</HEAD>
<TITLE> … </TITLE>
HTML tags that go in
the BODY portion of
a Web page
<BODY>
…
…
</BODY>
<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)
<A HREF = “action” > label </A>
• 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:[email protected]”
<A HREF = “action” > label </A>

label can be any text string


HTML Code
I am at the
<A HREF=“http://www.vu.edu.pk”>Virtual
University</A>. You can send me an e-mail
by clicking
<A HREF=“mailto:[email protected]”>here</A>.

Browser Display
I am at the Virtual University. You can send me an e-mail by
clicking here.
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 Challenged


http://www.arachnoid.com/lutusp/html_tutor.html

NCSA’s Beginner's Guide to HTML


http://archive.ncsa.uiuc.edu/General/Internet/WWW/
HTMLPrimerAll.html
Homework Assignment
Develop your own home page. It should be accessible as
http://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) 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
Today’s was our 2nd Web Dev lecture

In the 3rd Web Dev lecture we’ll learn about


adding Lists & Tables to your Web page

You might also like