1 / 51

Developing and Hosting a Web Page - Introduction to Web Development | VU Lecture

Learn to develop and host your personal web page, making it visible on the internet. Explore HTML code and essential tags.

clarencerhodes
Download Presentation

Developing and Hosting a Web Page - Introduction to Web Development | VU Lecture

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. • 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

  3. 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 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. 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="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:altaf@vu.edu.pk">altaf@vu.edu.pk</A><BR></P> <P>I teach the <A HREF="http://www.vu.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  8. 1 HTML Code 2 3 4 <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:altaf@vu.edu.pk">altaf@vu.edu.pk</A><BR></P> <P>I teach the <A HREF="http://www.vu.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML> 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

  9. <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:altaf@vu.edu.pk">altaf@vu.edu.pk</A><BR></P> <P>I teach the <A HREF="http://www.vu.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  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="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:altaf@vu.edu.pk">altaf@vu.edu.pk</A><BR></P> <P>I teach the <A HREF="http://www.vu.edu.pk/cs101/">Introduction 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="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:altaf@vu.edu.pk">altaf@vu.edu.pk</A><BR></P> <P>I teach the <A HREF="http://www.vu.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  12. 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="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:altaf@vu.edu.pk">altaf@vu.edu.pk</A><BR></P> <P>I teach the <A HREF="http://www.vu.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  13. <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:altaf@vu.edu.pk">altaf@vu.edu.pk</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

  14. <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:altaf@vu.edu.pk">altaf@vu.edu.pk</A><BR></P> <P>I teach the <A HREF="http://www.vu.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  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="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:altaf@vu.edu.pk">altaf@vu.edu.pk</A><BR></P> <P>I teach the <A HREF="http://www.vu.edu.pk/cs101/">Introduction 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="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:altaf@vu.edu.pk">altaf@vu.edu.pk</A><BR></P> <P>I teach the <A HREF="http://www.vu.edu.pk/cs101/">Introduction 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="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:altaf@vu.edu.pk">altaf@vu.edu.pk</A><BR></P> <P>I teach the <A HREF="http://www.vu.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  18. This HTML document was developed in a plain-text editor called notepad

  19. 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 file index.html Double clicking on the icon launched the Web browser displaying my index.html

  20. My Web page is done!

  21. 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.

  22. 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

  23. 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

  24. Eureka!

  25. My Web page is now accessible fromallof the millions of computers connected to the Internet

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

  27. Enough about mine …Here is how you can develop your personal Web pageand make it available on the Internet ashttp://www.vu.edu.pk/~xxxxxxxx

  28. 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

  29. 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

  30. 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

  31. Before we finish for the day, a brief review of the HTML tags …

  32. <HTML> … … </HTML>

  33. HTML tags that go in the HEAD portion of a Web page

  34. <HEAD> … … </HEAD>

  35. <TITLE> … </TITLE>

  36. HTML tags that go in the BODY portion of a Web page

  37. <BODY> … … </BODY>

  38. <P> … </P> Paragraph

  39. <BR> Line break

  40. <B> … </B> Bold text

  41. <A HREF = “action” > label </A> Anchor (Anchors are used to embed links in a Web page)

  42. <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:altaf@vu.edu.pk”

  43. <A HREF = “action” >label</A> label can be any text string

  44. 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:bhola@vu.edu.pk”>here</A>. Browser Display I am at theVirtual University. You can send me an e-mail by clickinghere.

  45. End of HTML tag review

  46. 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

  47. 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

  48. 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) emailaddress • 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

More Related