Top Banner
Hyper Text Markup Language Developing & Hosting a Web page Lecture 21
34

Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

Dec 14, 2015

Download

Documents

Aubrey Giles
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

Hyper Text Markup Language

Developing & Hosting a Web page

Lecture 21

Page 2: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<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:[email protected]">[email protected] </A> <BR></P>

<P>I teach the <A HREF="http:/sst.umt.edu.pk/cs101/">Introduction to Computing</A> course. </P>

</BODY>

</HTML>

HTML Code

Page 3: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<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:[email protected]">[email protected]</A><BR></P>

<P>I teach the <A HREF="http:/sst.umt.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

Page 4: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<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:[email protected]">[email protected]</A><BR></P>

<P>I teach the <A HREF="http:/sst.umt.edu.pk/cs101/">Introduction to Computing</A> course. </P>

</BODY>

</HTML>

Page 5: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<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:[email protected]">[email protected]</A><BR></P>

<P>I teach the <A HREF="http:/sst.umt.edu.pk/cs101/">Introduction to Computing</A> course. </P>

</BODY>

</HTML>

Page 6: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<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:[email protected]">[email protected]</A><BR></P>

<P>I teach the <A HREF="http:/sst.umt.edu.pk/cs101/">Introduction to Computing</A> course. </P>

</BODY>

</HTML>

Link Label

Link Descriptio

n

Page 7: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<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:[email protected]">[email protected]</A><BR></P>

<P>I teach the <A HREF="http:/sst.umt.edu.pk/cs101/">Introduction to Computing</A> course. </P>

</BODY>

</HTML>

Page 8: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<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:[email protected]">[email protected]</A><BR></P>

<P>I teach the <A HREF="http:/sst.umt.edu.pk/cs101/">Introduction to Computing</A> course. </P>

</BODY>

</HTML>

Page 9: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<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:[email protected]">[email protected]</A><BR></P>

<P>I teach the <A HREF="http:/sst.umt.edu.pk/cs101/">Introduction to Computing</A> course. </P>

</BODY>

</HTML>

Page 10: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<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:[email protected]">[email protected]</A><BR></P>

<P>I teach the <A HREF="http:/sst.umt.edu.pk/cs101/">Introduction to Computing</A> course. </P>

</BODY>

</HTML>

Page 11: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

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

Page 12: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<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:[email protected]">[email protected] </A><BR>

</P><P> I teach the <A HREF="http:/sst.umt.edu.pk/cs101/">Introduction to Computing </A>course. </P>

</BODY>

</HTML>

Page 13: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

After typing the code into notepad,saved it as index.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

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

Page 15: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

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

Page 16: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

Developing Your Own Web Page

Step 1Open notepad, type in the HTML code, and save it as index.html on your PC’s Desktop

Page 17: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

Developing Your Own Web Page

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

Page 18: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

That is it!Your Web page is now accessible on the Internet through the URL:

http://sst.umt.edu.pk/student/xxxxxxxxxwhere xxxxxxxxx is your user ID

Page 19: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

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

Page 20: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<HTML>……</HTML>

Page 21: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

HTML tags that go in the HEAD portion of

a Web page

Page 22: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<HEAD>……</HEAD>

Page 23: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<TITLE> … </TITLE>

Page 24: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

HTML tags that go in the BODY portion of

a Web page

Page 25: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<BODY>……</BODY>

Page 26: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<P> … </P>

Paragraph

Page 27: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<BR>

Line break

Page 28: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<B> … </B>

Bold text

Page 29: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<A HREF = “action” > label </A>

Anchor(Anchors are used to embed links in a Web page)

Page 30: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<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:[email protected]

Page 31: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

<A HREF = “action” > label </A>

label can be any text string

Page 32: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

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:[email protected]”>here</A>.

Browser DisplayI am at the UMT. You can send me an e-mail by clicking here.

Page 33: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

Useful URL’s

HTML for the Conceptually Challengedhttp://www.arachnoid.com/lutusp/html_tutor.html

NCSA’s Beginner's Guide to HTML http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html

Page 34: Hyper Text Markup Language Developing & Hosting a Web page Lecture 21.

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) email address A paragraph (50-100 words) on what are your

ambitions in future?

Deadline: 12:00pm, 10th May, 2007