1 / 82

Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)

Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1). Learning Goals for Today. To develop your personal Web page To upload your Web page to internet Web server so that it becomes visible on the Internet as http://pu.ias.edu.pk/student/xxxxxxxxx/

madra
Télécharger la présentation

Introduction to Computing Lecture 6 Introduction to HTML (Web Development Lecture 1)

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. Introduction to ComputingLecture 6Introduction to HTML(Web Development Lecture 1)

  2. Learning Goals for Today • To develop your personal Web page • To upload your Web page to internet Web server so that it becomes visible on the Internet as http://pu.ias.edu.pk/student/xxxxxxxxx/ where xxxxxxxxx is your user ID

  3. But first …How I developed my personal Web pageand made it available over the Internet through the URLhttp://pu.ias.edu.pk/fac/xxxxx

  4. Requirements • Text Editor • Browser • Server

  5. page title URL link

  6. HTML Hyper Text Markup Language

  7. Tags • HTML consists of sets of commands called Tags • Tags tell browser how to display information. • Tags come in pairs • Tags are not case sensitive • Document Tags • Text Structure Tags

  8. HTML Code <HTML> <HEAD> <TITLE>SHAHID RASUL’s Home Page</TITLE> </HEAD> <BODY> <H1> Shahid Rasul</H1> <P><B>The Lecturer </B><BR> <A HREF="http://www.pu.edu.pk/">IAS</A><BR> 5New Campus The Punjab University, Lahore, Pakistan.<BR> +92-42-9231-66<BR> <A HREF="mailto:chshaidrasul@hotmail.com">chshahidrasul@pu.edu.pk</A><BR></P> <P>I teach the <A HREF="http:/sst.imt.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  9. 1 HTML Code 2 3 4 <HTML> <HEAD> <TITLE>Shahid Rasul's Home Page</TITLE> </HEAD> <BODY> <H1>Shahid Rasul</H1> <P><B>The Lecturer</B><BR> <A HREF="http://www.ias.edu.pk/">IAS</A><BR> New Campus The Punjab University, Lahore, Pakistan.<BR> +92-42-9231-1256<BR> <A HREF="mailto:chshahidrasul@ias.edu.pk">chshahidrasul@ias.edu.pk</A><BR></P> <P>I teach the <A HREF="http:/sst.imt.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

  10. HTML Code <HTML> <HEAD> <TITLE>shahid Rasul's Home Page</TITLE> </HEAD> <BODY> <H1>shahid Rasul</H1> <P><B>The Lecturer</B><BR> <A HREF="http://www.pu.edu.pk/">IAS</A><BR> New Campus The Punjab University, Lahore.<BR> +92-42-9231-1256<BR> <A HREF="mailto:chshahidrasul@imt.edu.pk">chshahidrasul@imt.edu.pk</A><BR></P> <P>I teach the <A HREF="http:/pu.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  11. HTML Code <HTML> <HEAD> <TITLE>Shahid Rasul's Home Page</TITLE> </HEAD> <BODY> <H1>Shahid Rasul</H1> <P><B>The Lecturer</B><BR> <A HREF="http://www.ias.edu.pk/">IAS</A><BR> New Campus The Punjab University, Lahore, Pakistan.<BR> +92-42-9231-1256<BR> <A HREF="mailto:chshahidrasul@ias.edu.pk">chshahidrasul@ias.edu.pk</A><BR></P> <P>I teach the <A HREF="http:/sst.imt.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  12. HTML Code <HTML> <HEAD> <TITLE>Shahid Rasul's Home Page</TITLE> </HEAD> <BODY> <H1>Shahid Rasul</H1> <P><B>The Lecturer</B><BR> <A HREF="http://www.ias.edu.pk/">IAS</A><BR> New Campus The Punjab University, Lahore, Pakistan.<BR> +92-42-9231-1256<BR> <A HREF="mailto:chshahidrasul@ias.edu.pk">chshahidrasul@ias.edu.pk</A><BR></P> <P>I teach the <A HREF="http:/sst.imt.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  13. HTML Code Link Label <HTML> <HEAD> <TITLE>Shahid Rasul's Home Page</TITLE> </HEAD> <BODY> <H1>Shahid Rasul</H1> <P><B>The Lecturer</B><BR> <A HREF="http://www.ias.edu.pk/">IAS</A><BR> New Campus The Punjab University, Lahore, Pakistan.<BR> +92-42-9231-1256<BR> <A HREF="mailto:chshahidrasul@ias.edu.pk">chshahidrasul@ias.edu.pk</A><BR></P> <P>I teach the <A HREF="http:/sst.imt.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML> Link Description

  14. HTML Code <HTML> <HEAD> <TITLE>Shahid Rasul's Home Page</TITLE> </HEAD> <BODY> <H1>Shahid Rasul</H1> <P><B>The Lecturer</B><BR> <A HREF="http://www.ias.edu.pk/">IAS</A><BR> New Campus The Punjab University, Lahore, Pakistan.<BR> +92-42-9231-1256<BR> <A HREF="mailto:chshahidrasul@ias.edu.pk">chshahidrasul@ias.edu.pk</A><BR></P> <P>I teach the <A HREF="http:/sst.imt.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  15. HTML Code <HTML> <HEAD> <TITLE>Shahid Rasul's Home Page</TITLE> </HEAD> <BODY> <H1>Shahid Rasul</H1> <P><B>The Lecturer</B><BR> <A HREF="http://www.ias.edu.pk/">IAS</A><BR> New Campus The Punjab University, Lahore, Pakistan.<BR> +92-42-9231-1256<BR> <A HREF="mailto:chshahidrasul@ias.edu.pk">chshahidrasul@ias.edu.pk</A><BR></P> <P>I teach the <A HREF="http:/sst.imt.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  16. HTML Code <HTML> <HEAD> <TITLE>Shahid Rasul's Home Page</TITLE> </HEAD> <BODY> <H1>Shahid Rasul</H1> <P><B>The Lecturer</B><BR> <A HREF="http://www.ias.edu.pk/">IAS</A><BR> New Campus The Punjab University, Lahore, Pakistan.<BR> +92-42-9231-1256<BR> <A HREF="mailto:chshahidrasul@ias.edu.pk">chshahidrasul@ias.edu.pk</A><BR></P> <P>I teach the <A HREF="http:/sst.imt.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  17. HTML Code <HTML> <HEAD> <TITLE>Shahid Rasul's Home Page</TITLE> </HEAD> <BODY> <H1>Shahid Rasul</H1> <P><B>The Lecturer</B><BR> <A HREF="http://www.ias.edu.pk/">IAS</A><BR> New Campus The Punjab University, Lahore, Pakistan.<BR> +92-42-9231-1256<BR> <A HREF="mailto:chshahidrasul@ias.edu.pk">chshahidrasul@ias.edu.pk</A><BR></P> <P>I teach the <A HREF="http:/sst.imt.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.htm To check if I have done everything right, I double clicked on icon of the saved file index.htm Double clicking on the icon launched the Web browser displaying my index.htm

  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 used ftp to upload my Web page to the IMT Web server

  24. Eureka!

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

  26. http://pu.edu.pk/fac/shahidrasul/index.htm http://pu.ias.edu.pk/fac/shahidrasul

  27. Enough about mine …Here is how you can develop your personal Web pageand make it available on the Internet ashttp://pu.edu.pk/student/xxxxxxxxx

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

  29. Developing Your Own Web Page Step 2 Log on to the Web server and upload that index.htm from your PC’s Desktop to your account on that Web server

  30. That is it! • Your Web page is now accessible on the Internet through the URL: • http://pu.edu.pk/student/xxxxxxxxx • where xxxxxxxxx is your user ID

  31. <HTML> … … </HTML>

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

  33. <HEAD> … … </HEAD>

  34. <TITLE> … </TITLE>

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

  36. <BODY> … … </BODY>

  37. <P> … </P> Paragraph

  38. <BR> Line break

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

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

  41. <A HREF = “action” > label </A> • http:// • Displays the Web page specified by the link • example:“http://www.pu.edu.pk” • mailto: • Sends an e-mail to the specified address • example:“mailto:chshahidrsul@pu.edu.pk”

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

  43. HTML Code I am at the <A HREF=“http://www.pu.edu.pk”>IMT</A>. You can send me an e-mail by clicking <A HREF=“mailto:chshahidrasul@pu.edu.pk”>here</A>. Browser Display I am at thePU. You can send me an e-mail by clickinghere.

  44. Single Tags with Attributes<tagName attributes>Example: <HR width=“50%”>

  45. Paired Tags<tagName>…</tagName>Example: <H1> … </H1>

  46. Paired Tags with Attributes<tagNameattributes >…</tagName> Example: <H1align=“center”> … </H1>

  47. HTML Code Browser Display <UL> <LI>SimCity</LI> <LI>Quake</LI> <LI>Bridge</LI> </UL> • SimCity • Quake • Bridge

  48. The default “bullet” for these lists is a “disc” That, however, can be changed to a “circle” or a “square” with the help of the type attribute

More Related