1 / 34

Hyper Text Markup Language

Hyper Text Markup Language. Lecture 21. Developing & Hosting a Web page. HTML Code. <HTML> <HEAD> <TITLE> Imran Ahmed Home Page </TITLE> </HEAD> <BODY> <H1> Imran Ahmed </H1> <P><B> Asst. Professor in Computer Science </B> <BR> <A HREF="http://www.umt.edu.pk/"> UMT </A> <BR>

skylar
Download Presentation

Hyper Text Markup Language

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. Hyper Text Markup Language Lecture 21 Developing & Hosting a Web page

  2. HTML Code <HTML> <HEAD> <TITLE>Imran Ahmed Home Page</TITLE> </HEAD> <BODY> <H1>Imran Ahmed</H1> <P><B>Asst. Professor in Computer Science</B> <BR> <A HREF="http://www.umt.edu.pk/">UMT</A> <BR> 52 – L Gulberg III, Lahore <BR> +92 42 585 6605 <BR> <A HREF="mailto:imran.ahmad@umt.edu.pk">imran.ahmad@umt.edu.pk </A> <BR> </P> <P>I teach the <A HREF="http:/sst.umt.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  3. The ones in yellow, i.e. <HTML>, </HTML>, <HEAD>, </HEAD>, <BODY>, </BODY> are the six essential HTML tags, required in all Web pages <HTML> <HEAD> <TITLE>Imran Ahmed's Home Page</TITLE> </HEAD> <BODY> <H1>Imran Ahmed</H1> <P><B>Asst. Professor in Computer Science</B><BR> <A HREF="http://www.umt.edu.pk/">UMT</A><BR> 52 – L Gulberg III, Lahore<BR> +92 42 585 6605<BR> <A HREF="mailto:imran.ahmad@umt.edu.pk">imran.ahmad@umt.edu.pk</A><BR></P> <P>I teach the <A HREF="http:/sst.umt.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  4. <HTML> <HEAD> <TITLE>Imran Ahmed's Home Page</TITLE> </HEAD> <BODY> <H1>Imran Ahmed</H1> <P><B>Asst. Professor in Computer Science</B><BR> <A HREF="http://www.umt.edu.pk/">UMT</A><BR> 52 – L Gulberg III, Lahore<BR>+92 42 585 6605<BR> <A HREF="mailto:imran.ahmad@umt.edu.pk">imran.ahmad@umt.edu.pk</A><BR></P> <P>I teach the <A HREF="http:/sst.umt.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  5. <HTML> <HEAD> <TITLE>Imran Ahmed's Home Page</TITLE> </HEAD> <BODY> <H1>Imran Ahmed</H1> <P><B>Asst. Professor in Computer Science</B><BR> <A HREF="http://www.umt.edu.pk/">UMT</A><BR> 52 – L Gulberg III, Lahore<BR>+92 42 585 6605<BR> <A HREF="mailto:imran.ahmad@umt.edu.pk">imran.ahmad@umt.edu.pk</A><BR></P> <P>I teach the <A HREF="http:/sst.umt.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  6. Link Label <HTML> <HEAD> <TITLE>Imran Ahmed's Home Page</TITLE> </HEAD> <BODY> <H1>Imran Ahmed</H1> <P><B>Asst. Professor in Computer Science</B><BR> <A HREF="http://www.umt.edu.pk/">UMT</A><BR> 52 – L Gulberg III, Lahore<BR>+92 42 585 6605<BR> <A HREF="mailto:imran.ahmad@umt.edu.pk">imran.ahmad@umt.edu.pk</A><BR></P> <P>I teach the <A HREF="http:/sst.umt.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML> Link Description

  7. <HTML> <HEAD> <TITLE>Imran Ahmed's Home Page</TITLE> </HEAD> <BODY> <H1>Imran Ahmed</H1> <P><B>Asst. Professor in Computer Science</B><BR> <A HREF="http://www.umt.edu.pk/">UMT</A><BR> 52 – L Gulberg, Lahore<BR>+92 42 585 6605<BR> <A HREF="mailto:imran.ahmad@umt.edu.pk">imran.ahmad@umt.edu.pk</A><BR></P> <P>I teach the <A HREF="http:/sst.umt.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  8. <HTML> <HEAD> <TITLE>Imran Ahmed's Home Page</TITLE> </HEAD> <BODY> <H1>Imran Ahmed</H1> <P><B>Asst. Professor in Computer Science</B><BR> <A HREF="http://www.umt.edu.pk/">UMT</A><BR> 52 – L Gulberg, Lahore<BR>+92 42 585 6605<BR> <A HREF="mailto:imran.ahmad@umt.edu.pk">imran.ahmad@umt.edu.pk</A><BR></P> <P>I teach the <A HREF="http:/sst.umt.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  9. <HTML> <HEAD> <TITLE>Imran Ahmed's Home Page</TITLE> </HEAD> <BODY> <H1>Imran Ahmed</H1> <P><B>Asst. Professor in Computer Science</B><BR> <A HREF="http://www.umt.edu.pk/">UMT</A><BR> 52 – L Gulberg, Lahore<BR>+92 42 585 6605<BR> <A HREF="mailto:imran.ahmad@umt.edu.pk">imran.ahmad@umt.edu.pk</A><BR></P> <P>I teach the <A HREF="http:/sst.umt.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  10. <HTML> <HEAD> <TITLE>Imran Ahmed's Home Page</TITLE> </HEAD> <BODY> <H1>Imran Ahmed</H1> <P><B>Asst. Professor in Computer Science</B><BR> <A HREF="http://www.umt.edu.pk/">UMT</A><BR> 52 – L Gulberg, Lahore<BR>+92 42 585 6605<BR> <A HREF="mailto:imran.ahmad@umt.edu.pk">imran.ahmad@umt.edu.pk</A><BR></P> <P>I teach the <A HREF="http:/sst.umt.edu.pk/cs101/">Introduction to Computing</A> course. </P> </BODY> </HTML>

  11. This HTML document is developed in a plain-text editor called notepad

  12. <HTML> <HEAD> <TITLE>Imran Ahmed Home Page</TITLE> </HEAD> <BODY> <H1>Imran Ahmed</H1> <P> <B> Asst.Professor in Computer Science </B> <BR> <A HREF="http://www.umt.edu.pk/">UMT </A> <BR> 52 – L Gulberg III, Lahore<BR>+92 42 585 6605 <BR> <A HREF="mailto:imran.ahmad@umt.edu.pk">imran.ahmad@umt.edu.pk </A> <BR> </P> <P> I teach the <A HREF="http:/sst.umt.edu.pk/cs101/"> Introduction to Computing </A> course. </P> </BODY> </HTML>

  13. After typing the code into notepad,saved it asindex.html To check it, double clicked on icon of the saved file index.html Double clicking on the icon launched the Web browser displaying my index.html

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

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

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

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

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

  19. Let’s take a brief review of the HTML tags …

  20. <HTML> … … </HTML>

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

  22. <HEAD> … … </HEAD>

  23. <TITLE> … </TITLE>

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

  25. <BODY> … … </BODY>

  26. <P> … </P> Paragraph

  27. <BR> Line break

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

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

  30. <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.ahmad@umt.edu.pk”

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

  32. HTML Code I am at the <A HREF=“http://www.umt.edu.pk”>UMT</A>. You can send me an e-mail by clicking <A HREF=“mailto:ahmad@umt.edu.pk”>here</A>. Browser Display I am at theUMT. You can send me an e-mail by clickinghere.

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

  34. Homework Assignment Develop your own home page. Among other things, it should contain • At least one link to http://sst.imt.edu.pk/cources/cs101 • Your (clickable) emailaddress • A paragraph (50-100 words) on what are your ambitions in future? Deadline: 12:00pm, 10th May, 2007

More Related