1 / 77

HTML Revisited

HTML Revisited. Learning Goals for Today. To develop your personal Web page To upload your Web page to UMT’s Web server so that it becomes visible on the Internet as http://sst.umt.edu.pk/student/xxxxxxxxx/ where xxxxxxxxx is your user ID.

kedma
Télécharger la présentation

HTML Revisited

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. HTML Revisited

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

  3. But first …How to develop personal Web pageand make it available over the Internet through the URLhttp://sst.imt.edu.pk/fac/ihussain

  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>Imran Hussain's Home Page</TITLE> </HEAD> <BODY> <H1>Imran Hussain</H1> <P><B>Assistant Professor</B><BR> <A HREF="http://www.imt.edu.pk/">IMT</A><BR> 52-L Gulberg III, Lahore, Pakistan.<BR> +92-42-588-6166<BR> <A HREF="mailto:ihussain@imt.edu.pk">ihussain@imt.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>Imran Hussain's Home Page</TITLE> </HEAD> <BODY> <H1>Imran Hussain</H1> <P><B>Assistant Professor</B><BR> <A HREF="http://www.imt.edu.pk/">IMT</A><BR> 52-L Gulberg III, Lahore, Pakistan.<BR> +92-42-588-6166<BR> <A HREF="mailto:ihussain@imt.edu.pk">ihussain@imt.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>Imran Hussain's Home Page</TITLE> </HEAD> <BODY> <H1>Imran Hussain</H1> <P><B>Assistant Professor</B><BR> <A HREF="http://www.imt.edu.pk/">IMT</A><BR> 52-L Gulberg III, Lahore, Pakistan.<BR> +92-42-588-6166<BR> <A HREF="mailto:ihussain@imt.edu.pk">ihussain@imt.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>

  11. HTML Code <HTML> <HEAD> <TITLE>Imran Hussain's Home Page</TITLE> </HEAD> <BODY> <H1>Imran Hussain</H1> <P><B>Assistant Professor</B><BR> <A HREF="http://www.imt.edu.pk/">IMT</A><BR> 52-L Gulberg III, Lahore, Pakistan.<BR> +92-42-588-6166<BR> <A HREF="mailto:ihussain@imt.edu.pk">ihussain@imt.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>Imran Hussain's Home Page</TITLE> </HEAD> <BODY> <H1>Imran Hussain</H1> <P><B>Assistant Professor</B><BR> <A HREF="http://www.imt.edu.pk/">IMT</A><BR> 52-L Gulberg III, Lahore, Pakistan.<BR> +92-42-588-6166<BR> <A HREF="mailto:ihussain@imt.edu.pk">ihussain@imt.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>Imran Hussain's Home Page</TITLE> </HEAD> <BODY> <H1>Imran Hussain</H1> <P><B>Assistant Professor</B><BR> <A HREF="http://www.imt.edu.pk/">IMT</A><BR> 52-L Gulberg III, Lahore, Pakistan.<BR> +92-42-588-6166<BR> <A HREF="mailto:ihussain@imt.edu.pk">ihussain@imt.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>Imran Hussain's Home Page</TITLE> </HEAD> <BODY> <H1>Imran Hussain</H1> <P><B>Assistant Professor</B><BR> <A HREF="http://www.imt.edu.pk/">IMT</A><BR> 52-L Gulberg III, Lahore, Pakistan.<BR> +92-42-588-6166<BR> <A HREF="mailto:ihussain@imt.edu.pk">ihussain@imt.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>Imran Hussain's Home Page</TITLE> </HEAD> <BODY> <H1>Imran Hussain</H1> <P><B>Assistant Professor</B><BR> <A HREF="http://www.imt.edu.pk/">IMT</A><BR> 52-L Gulberg III, Lahore, Pakistan.<BR> +92-42-588-6166<BR> <A HREF="mailto:ihussain@imt.edu.pk">ihussain@imt.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>Imran Hussain's Home Page</TITLE> </HEAD> <BODY> <H1>Imran Hussain</H1> <P><B>Assistant Professor</B><BR> <A HREF="http://www.imt.edu.pk/">IMT</A><BR> 52-L Gulberg III, Lahore, Pakistan.<BR> +92-42-588-6166<BR> <A HREF="mailto:ihussain@imt.edu.pk">ihussain@imt.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>Imran Hussain's Home Page</TITLE> </HEAD> <BODY> <H1>Imran Hussain</H1> <P><B>Assistant Professor</B><BR> <A HREF="http://www.imt.edu.pk/">IMT</A><BR> 52-L Gulberg III, Lahore, Pakistan.<BR> +92-42-588-6166<BR> <A HREF="mailto:ihussain@imt.edu.pk">ihussain@imt.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. My Web page is now accessible fromallof the millions of computers connected to the Internet

  25. http://sst.imt.edu.pk/fac/ihussain/index.htm http://sst.imt.edu.pk/fac/ihussain

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

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

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

  29. <HTML> … … </HTML>

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

  31. <HEAD> … … </HEAD>

  32. <TITLE> … </TITLE>

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

  34. <BODY> … … </BODY>

  35. <P> … </P> Paragraph

  36. <BR> Line break

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

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

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

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

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

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

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

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

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

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

  47. HTML Code Browser Display <UL type = “circle”> <LI>SimCity</LI> <LI>Quake</LI> <LI>Bridge</LI> </UL> • SimCity • Quake • Bridge

  48. type = “square”

More Related