Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …
description
Transcript of Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …
![Page 1: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/1.jpg)
CS101 Introduction to Computing
Lecture 6Developing & Hosting a Web page (Web Development Lecture 2)
![Page 2: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/2.jpg)
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
![Page 3: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/3.jpg)
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
![Page 4: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/4.jpg)
But first …How I developed my personal Web pageand made it available over the Internet through the URL
http://www.vu.edu.pk/~altaf
![Page 5: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/5.jpg)
URLpage title
link
![Page 6: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/6.jpg)
HTMLHyper Text Markup Language
![Page 7: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/7.jpg)
<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 Code
![Page 8: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/8.jpg)
<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 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
![Page 9: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/9.jpg)
<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>
![Page 10: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/10.jpg)
<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>
![Page 11: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/11.jpg)
<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>
![Page 12: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/12.jpg)
<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>
Description of the
link
![Page 13: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/13.jpg)
<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>
URL of the link
![Page 14: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/14.jpg)
<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>
![Page 15: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/15.jpg)
<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>
![Page 16: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/16.jpg)
<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>
![Page 17: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/17.jpg)
<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>
![Page 18: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/18.jpg)
This HTML document was developed in a plain-text editor called notepad
![Page 19: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/19.jpg)
![Page 20: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/20.jpg)
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
![Page 21: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/21.jpg)
My Web page is done!
![Page 22: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/22.jpg)
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.
![Page 23: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/23.jpg)
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
![Page 24: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/24.jpg)
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
![Page 25: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/25.jpg)
![Page 26: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/26.jpg)
Eureka!
![Page 27: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/27.jpg)
My Web page is now accessible from all of the millions of computers connected to the Internet
![Page 28: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/28.jpg)
http://www.vu.edu.pk/~altaf/index.html
http://www.vu.edu.pk/~altaf
![Page 29: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/29.jpg)
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
![Page 30: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/30.jpg)
Developing Your Own Web Page
Step 1Open notepad, type in the HTML code, and save it as index.html on your PC’s desktop
![Page 31: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/31.jpg)
Developing Your Own Web Page
Step 2Log on to the VU Intranet and upload that index.html from your PC’s Desktop to your account on VU’s Web server
![Page 32: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/32.jpg)
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
![Page 33: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/33.jpg)
Before we finish for the day, a brief review of the HTML tags …
![Page 34: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/34.jpg)
<HTML>……</HTML>
![Page 35: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/35.jpg)
HTML tags that go in the HEAD portion of
a Web page
![Page 36: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/36.jpg)
<HEAD>……</HEAD>
![Page 37: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/37.jpg)
<TITLE> … </TITLE>
![Page 38: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/38.jpg)
HTML tags that go in the BODY portion of
a Web page
![Page 39: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/39.jpg)
<BODY>……</BODY>
![Page 40: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/40.jpg)
<P> … </P>
Paragraph
![Page 41: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/41.jpg)
<BR>
Line break
![Page 42: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/42.jpg)
<B> … </B>
Bold text
![Page 43: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/43.jpg)
<A HREF = “action” > label </A>
Anchor(Anchors are used to embed links in a Web page)
![Page 44: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/44.jpg)
<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]”
![Page 45: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/45.jpg)
<A HREF = “action” > label </A>
label can be any text string
![Page 46: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/46.jpg)
HTML CodeI 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 DisplayI am at the Virtual University. You can send me an e-mail by clicking here.
![Page 47: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/47.jpg)
End of HTML tag review
![Page 48: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/48.jpg)
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
![Page 49: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/49.jpg)
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
![Page 50: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/50.jpg)
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
![Page 51: Today is our 2 nd Web Dev lecture During our 1st lecture about the Web …](https://reader036.fdocuments.net/reader036/viewer/2022062518/56814358550346895dafd5cf/html5/thumbnails/51.jpg)
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