820 likes | 1.1k Views
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/
E N D
Introduction to ComputingLecture 6Introduction 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/ where xxxxxxxxx is your user ID
But first …How I developed my personal Web pageand made it available over the Internet through the URLhttp://pu.ias.edu.pk/fac/xxxxx
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>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>
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
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>
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>
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>
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
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>
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>
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>
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>
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://pu.edu.pk/fac/shahidrasul/index.htm http://pu.ias.edu.pk/fac/shahidrasul
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
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 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://pu.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.pu.edu.pk” • mailto: • Sends an e-mail to the specified address • example:“mailto:chshahidrsul@pu.edu.pk”
<A HREF = “action” >label</A> label can be any text string
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.
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