ScoilNet Web Publishing Centre
Glossary
Writing for the Web
Using a Web Editor
Web Graphics
HTML Basics
1 Details
2 Resources
3 Step-by-Step
Web Site Interaction
Web Publishing Tools
Uploading a Web Site

  1  2

Tutorial
Creating a simple web page

Step 1 Create the HTML template file

Open Notepad and type in the following:

<HTML>
<HEAD> <TITLE></TITLE> <HEAD>
<BODY>
</BODY>
</HTML>

It is important to save your HTML file as you go along. Save this file as first.htm .

Step 2 Add title and background information

Between the <TITLE> and the </TITLE> tag, type in the title of your page:

<TITLE> Page One</TITLE>

The title is typically displayed in the title bar at the top of the browser window, but not within the window itself. It is also what is displayed on the reader's Favorites/Bookmarks list.

In the <BODY> tag, specify that the background for the page will be white and the text black:

<BODY TEXT="#000000" BGCOLOR="#FFFFFF">

Step 3 Add the Text

Between the <BODY> and the </BODY> tags, type in the following text:

<BODY>
Page 1
HTML is easy to use!
You can embolden text and italicise it.You can make text appear larger or smaller and centre it.
</BODY>

Step 4 Format the Heading

Specify that Page 1 is to be the main heading for this page using the <H1> tag, and add a horizontal rule using the <HR> tag:

<CENTER><H1>Page 1</H1></CENTER>
<HR>

Step 5 Format the Paragraphs

Add paragraph marks and line breaks to the rest of the text. Centre the last paragraph:

<P>
HTML is easy to use!
<P>
You can embolden text
<BR>
and italicise it.
<BR>
<CENTER>
You can make text appear larger or smaller and centre it.
</CENTER>

Step 6 Format the Text

Add character formatting using the <I>, <B> and <FONT> tags:

<P>
HTML is easy to use!
<P>
<B>You can embolden text.</B>
<BR>
<I>and italicise it.</I>
<BR>
<CENTER>
You can make text appear <FONT SIZE="5"> larger </FONT> or <FONT SIZE="1"> smaller </FONT> and centre it.
</CENTER>

Step 7 Add an image

Add the following to the end of your text (after the last closing </CENTER> tag and before the closing </BODY> tag:

<P>
It is easy to insert images:
<P>
<CENTER><IMG SRC="image.gif" ></CENTER>

This will display image.gif on your web page, if it is in the same folder as your HTML file.

Step 8 Save and Display

Save your first.htm file again.

Launch your browser and open your saved page. As you create and save your document you can switch between Notepad and the browser to see the revised version by clicking on the Refresh / Reload button on the browser.

To see how your page should look, click here. When you are in this page, you can view the HTML source by selecting View_Source (Microsoft Explorer) or View_Page Source (Netscape).