770 likes | 974 Views
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.
E N D
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
But first …How to develop personal Web pageand make it available over the Internet through the URLhttp://sst.imt.edu.pk/fac/ihussain
Requirements • Text Editor • Browser • Server
page title URL link
HTML Hyper Text Markup Language
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
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>
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
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>
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>
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>
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
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>
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>
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>
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>
This HTML document was developed in a plain-text editor called notepad
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
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.
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
Upload Process I used ftp to upload my Web page to the IMT Web server
My Web page is now accessible fromallof the millions of computers connected to the Internet
http://sst.imt.edu.pk/fac/ihussain/index.htm http://sst.imt.edu.pk/fac/ihussain
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
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
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
<HTML> … … </HTML>
<HEAD> … … </HEAD>
<BODY> … … </BODY>
<P> … </P> Paragraph
<BR> Line break
<B> … </B> Bold text
<A HREF = “action” > label </A> Anchor (Anchors are used to embed links in a Web page)
<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”
<A HREF = “action” >label</A> label can be any text string
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.
Single Tags with Attributes<tagName attributes>Example: <HR width=“50%”>
Paired Tags with Attributes<tagNameattributes >…</tagName> Example: <H1align=“center”> … </H1>
HTML Code Browser Display <UL> <LI>SimCity</LI> <LI>Quake</LI> <LI>Bridge</LI> </UL> • SimCity • Quake • Bridge
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
HTML Code Browser Display <UL type = “circle”> <LI>SimCity</LI> <LI>Quake</LI> <LI>Bridge</LI> </UL> • SimCity • Quake • Bridge