Creating a Simple Web Page using

Creating a Simple Web Page

There are many ways to create Web pages. Hundreds of companies have created tools to help with the process in one way or another. Our goal here, however, is to understand how Web pages really work, rather than have a tool hide the process from us. Therefore, we will use the simplest tools possible -- the ones already on your machine.

On your machine you have a program, or application, that can create simple text files. On Windows machines, this application is called Notepad.

PART A

Open NOTEPAD, when typing HTML, you must include beginning <tags> and ending </tags>. The beginning <tag> tells the computer what to do and the ending tag </tag> tells the computer to stop doing what you asked. Every webpage includes the following tags and text. The title contains the title of your webpage that will show in the title bar of your web pages. The body of the html is where the information that you want to show on the web is placed.

        <html>

         <head>

          <title>         </title>

         </head>

         <body>

         </body>

        </html>

PART B-Type the following HTML

<html>

  <head>

    <title>My First Web Page</title>

  </head>

  <body>

    Hello there. This is my first page!

  </body>

</html>

Whether you put the tags and text side-by-side, row-by-row or indented will not make a difference in how the text is displayed in a browser window. Whether you use uppercase or lowercase letters within your tags also does not make a difference.

Now you need to save this file somewhere so that you can find it in a moment. Save it in your folder as first.html

It is very important to remember to save your file as first.html. If you do not add the .html your file will not work.

Next, minimize notepad. To view what your web page.

Open your web browser, click OPEN,

Go to your folder on the desktop, open your folder and click on the file named first.html

Click OK and your webpage will appear.

Three things are identified in this figure:

· You can see that the page has the title "My First Page."

· You can see that the page's body contains the words "Hello there. This is my first page!"

· You can see that the URL being displayed in the address window from your folder, rather than the usual http://... that a URL would contain if we were receiving the page from a server on the Internet.

By looking at the HTML text that makes up your first page, you can see exactly how the page got its title and body.

Now that you have created and viewed your first Web page, you are well on your way to becoming a Web page pro. The key to knowing everything about how a Web page works is to learn more and more of the HTML tags that let you customize your pages.

PART C

Now lets add some more basics to your first web page. Minimize your web browser and re-open your file first.html in notepad.

Make the following changes.

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<center>Hello there.

My name is </marquee>

This is my first page!

</body>

</html>

Save your file when all your changes have been made.

Re-open your browser, click the refresh button on your toolbar and see your changes.

Understanding HTML tags

The most important tags in HTML are:

TAG COLORS

Any colors  can be typed in, for example:<font color=”red”> <font color=”blue”> <font color=”yellow”> <font color=”orange”> <font color=”green”> <font color=”purple”>, etc.  Colors also can be a value. For example <font color=”#000000”> is black and  <font color=”#FF0000”> is bright red.

FONTS

Fonts can be typed in, for example: <font face=”Broadway BT”> or <font face=”Times Roman”>.

IMAGE TAGS

<img src="name">

HYPERLINK TAGS

You can link a file or another URL <a href="URL"></a>

Creates a mailto link <a href="mailto:EMAIL"></a>