Download presentation
Presentation is loading. Please wait.
1
VU
2
CS101 Introduction to Computing Lecture 6 Developing & Hosting a Web page (Web Development Lecture 2)
3
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
4
Learning Goals for Today
To develop your personal Web page To upload your Web page to VU’s Web server so that it becomes visible on the Internet as where xxxxxxx is your user ID
5
But first … How I developed my personal Web page and made it available over the Internet through the URL
6
page title URL link
7
Hyper Text Markup Language
HTML Hyper Text Markup Language
8
HTML Code <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=" University</A><BR> Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore<BR> <BR> <A <P>I teach the <A HREF=" to Computing</A> course. </P> </BODY> </HTML> HTML Code
9
HTML Code 1 2 3 4 The ones in yellow, i.e.
<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=" University</A><BR> Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore<BR> <BR> <A <P>I teach the <A HREF=" to Computing</A> course. </P> </BODY> </HTML> 1 HTML Code 2 3 4 The ones in yellow, i.e. <HTML>, </HTML>, <HEAD>, </HEAD>, <BODY>, </BODY> are the six essential HTML tags, required in all Web pages 5 6
10
<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=" University</A><BR> Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore<BR> <BR> <A <P>I teach the <A HREF=" to Computing</A> course. </P> </BODY> </HTML>
11
<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=" University</A><BR> Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore<BR> <BR> <A <P>I teach the <A HREF=" to Computing</A> course. </P> </BODY> </HTML>
12
<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=" University</A><BR> Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore<BR> <BR> <A <P>I teach the <A HREF=" to Computing</A> course. </P> </BODY> </HTML>
13
Description of the link
<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=" University</A><BR> Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore<BR> <BR> <A <P>I teach the <A HREF=" to Computing</A> course. </P> </BODY> </HTML> Description of the link
14
URL of the link <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=" University</A><BR> Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore<BR> <BR> <A <P>I teach the <A HREF=" to Computing</A> course. </P> </BODY> </HTML> URL of the link
15
<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=" University</A><BR> Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore<BR> <BR> <A <P>I teach the <A HREF=" to Computing</A> course. </P> </BODY> </HTML>
16
<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=" University</A><BR> Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore<BR> <BR> <A <P>I teach the <A HREF=" to Computing</A> course. </P> </BODY> </HTML>
17
<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=" University</A><BR> Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore<BR> <BR> <A <P>I teach the <A HREF=" to Computing</A> course. </P> </BODY> </HTML>
18
<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=" University</A><BR> Building 1, 3rd Floor, Aiwan-e-Iqbal, Lahore<BR> <BR> <A <P>I teach the <A HREF=" to Computing</A> course. </P> </BODY> </HTML>
19
This HTML document was developed in a plain-text editor called notepad
21
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
22
My Web page is done!
23
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.
24
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
25
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
27
Eureka!
28
My Web page is now accessible from all of the millions of computers connected to the Internet
30
Enough about mine … Here is how you can develop your personal Web page and make it available on the Internet as
31
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
32
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
33
That is it! http://www.vu.edu.pk/~xxxxxxx
Your Web page is now accessible on the Internet through the URL: where xxxxxxx is your user ID
34
Before we finish for the day, a brief review of the HTML tags …
35
<HTML> … </HTML>
36
HTML tags that go in the HEAD portion of a Web page
37
<HEAD> … </HEAD>
38
<TITLE> … </TITLE>
39
HTML tags that go in the BODY portion of a Web page
40
<BODY> … </BODY>
41
<P> … </P>
Paragraph
42
<BR> Line break
43
<B> … </B>
Bold text
44
<A HREF = “action” > label </A>
Anchor (Anchors are used to embed links in a Web page)
45
<A HREF = “action” > label </A>
Displays the Web page specified by the link example: “ mailto: Sends an to the specified address example:
46
<A HREF = “action” > label </A>
label can be any text string
47
HTML Code Browser Display I am at the
<A HREF=“ University</A>. You can send me an by clicking <A Browser Display I am at the Virtual University. You can send me an by clicking here.
48
End of HTML tag review
49
What have we learned today?
We now know how Web pages are built using HTML We also know how to make our personal Web pages available to everyone on the Internet
50
Useful URL’s HTML for the Conceptually Challenged
NCSA’s Beginner's Guide to HTML
51
Homework Assignment Develop your own home page. It should be accessible as (xxxxxxxx is your user ID) Among other things, it should contain At least one link to Your (clickable) address A paragraph ( words) on what you see yourself doing 10 years from now Consult your syllabus for the submission deadline for this assignment
52
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
Similar presentations
