Introduction to Creating a Web Page using a Simple Text Editor (Notepad) 1 2004 Ecirp Studios

Introduction to <html>Creating a Web Page

using a Simple Text Editor (Notepad)

1

2004 Ecirp Studios www.ecirp.com

http://www.ecirp.com/

Building a web page may seem difficult at first glance, but it can be fun and easy with just a basic understanding of how the code works. This code is called HTML.

HTML is an acronym for HyperText Markup Language. Simply put, HTML is various sets of instructions that tell a web browser how to display the information you want to present.

These brief instructions are called HTML tags and are not visible on the web pages you see. The HTML tags are hidden in the source code for the page. The source code is like a plain text file that contains the information you want to present, except it also includes the HTML tags that control the page layout.

Introduction to HTML

2



Introduction to HTML cont …

HTML pages are nothing more than glorified text files. Each tag consists of the containers, which are the lesser than (<) and greater than (>) arrows, and the HTML command within them. There are two basic parts to an HTML tag. The first part turns a command on and the second part turns it off. For example, if you want to present the word “Internet” in bold text, you write it like this:

<b>Internet</b>

The first part, the <b> tag turns on the command for bold text. The second part, the </b> tag turns the command back off. You will notice the command to turn off (cancel) a command is a repetition of the original command with a forward slash (/) in front of it. When viewed with a browser, the code would show this:

Internet

Now let’s get started and create your web page…

3



Step 1: Opening Notepad

To start Notepad:

• Click the Start button• Select Programs• Select Accessories• Click Notepad

4



Each web page starts with the HTML language identifier. At the top of the page in Notepad, type the following:<html>

<html>

TIP: To keep web pages easy to edit later, start each new set of tags on the next line.

Step 2: The <html> Tag

5



The <head> section of an html page is where you place the title of your web page. The text of the title tag is what shows up in the title bar at the very top of your browser when you view a web page.

<html>

<head>

Step 3: The <head> Tag

6



Type <title> under your <head> tag. Add the title “My Web Page” beside your <title> tag. Once you have typed both the <title> tag and the title of your web page, you will need to turn off the <title> tag. Do you remember how to turn off a tag?

<html>

<head><title>My Web Page

Step 4: The <title> Tag

7



Adding a forward slash within the containers and before the HTML command tells the browser this is the end of the HTML command. Most tags require a cancel tag for the page to function properly.

You have not canceled (turned off) any other HTML commands yet because they are still active.

Finish your title tag now by typing </title> after the title “My Web Page.” Now cancel the head section of your page after the </title> by typing </head>.

<html>

<head><title>My Web Page</head>

</title>

Step 5: Issuing Cancel Commands

8



The body area is where you put all the content you want people to see. So far, nothing we have typed will show up on the web page (with the exception of the title, which shows only in the title bar at the top of the browser, not on the page itself).

Type the body command like this: <body>

<html>


</title>

<body>

Step 6: The <body> Tag

9



Now is the time to finally add something you will be able to see on the page when viewed with a web browser. Type the following content into your page:

Gee, this is really easy.

<html>


</title>

<body>Gee, this is really easy.

Step 7: Adding Content

10


If you look at the code you have typed so far, which tags still need canceling?

The only tags we have not yet canceled are the body tag and the opening html tag. Now add the following cancel tags after the content:

</body></html>

<html>


</title>

<body>Gee, this is really easy.</body></html>

Step 8: Finishing the HTML Document

11


The first page people see when they come to your site, should be named “index” (without the quotes). That is the default name browsers look for. After that, you can name the rest of your pages as you like, as long as you don’t use any spaces or illegal characters in the name. Illegal characters include colons, slashes, extended characters, or even just spaces.

b Page</title>

<body>Gee, this is really easy.</body></html>

Step 9: Saving Your Web Page

To save the file in Notepad:

• Choose File on the Menu Bar• Click on Save As…

12


In the Save In field, click the arrow to access the drop-down list, then choose where you want to save your file.

Once the Save In field is set, type index.html in the File name field.

Click the Save button located near the bottom right corner of the Save As dialog box.

Step 9: Saving Your Web Page cont…

13


Step 10: Viewing Your Web Page

With your browser open, choose File

Click on Open

Open your web browser(In this example, Microsoft Internet Explorer) and open the page you made.

14


Click on the Browse Button

Navigate to where you saved the HTML file named “index.html”

Select the file “index.html”and click Open

Step 10: Viewing Your Web Page cont…

15


You have just created a web page using Microsoft Notepad.

Learning to create quality web pages that go beyond these basics is largely a matter of learning more HTML commands. Most are just as easy to learn and use as those just taught.

Congratulations!

16


Documents

Introduction to Creating a Web Page using a Simple Text Editor (Notepad) 1 2004 Ecirp Studios