Creating a Simple Compliant Web Page

Written by: Profacgillies • Edited by: Jean Scheid
Updated Jul 6, 2011 • Related Guides: Microsoft | Microsoft Word

In spite of Microsoft Word’s bad reputation when it comes to web development, it can be used as a way of producing lean standards compliant HTML code. You just have to think a bit creatively. This article will show you how to produce simple high quality web pages in Word.

How to build your web page

One of the many features that people ignore in Microsoft Word is the template feature. A template allows you to set up features which are common to a type of document. We shall treat a web page as just another type of document. A well structured web page has a very simple structure, with a header and a body, a bit like a letter. Our first step is to create a template containing the standard features of a web page including the header and a space for our content which will go in the body.

Here’s one I prepared earlier:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title></title>

<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

</head>

<body>

<h1></h1>

<p>

</p>

</body>

</html>

Step 1: The Template

These instructions relate to Word 2003, but Word 2007 is not so very different, once you find your way around its tabbed ribbon interface. Many users still use the 2003 version and many more woulld like too, in my experience.

Does the template look complicated? That’s OK. You don’t have to do anything to it.

Simply open Word, and copy the template text into a new document.

Then go to the File menu and select Save As.

Select “Save as type” to be Document Template.

Give it a file name of “web page” and click on Save.

Now if you want to be really clever, you can add a title. Edit the line

and add a title of your choice such as

<title>My first web page</title>.

If you do this make sure that you resave your template and close it.

Step 2: The Content

To type your content simply open a new blank document in Word and type your text as normal.

I shall use text from a previous Brighthub article of mine. If you wish to use this text, copy and paste it into a Word document.

Powerpoint is still with us, but hopefully, the blind belief in its ability as a presentation panacea is over. Powerpoint can support the spoken word very effectively and help us engage the audience. If you do not engage the attention of your audience, then you will not communicate your messages and you are wasting your time.

In the words of the late great Douglas Adams:

“I wish I’d listened to what my mother said when I was young”

“Why, what did she say?”

“I don’t know, I didn’t listen”

The concept of a post-PowerPoint era is based upon the concept of post-modernism:

Post-modernism is any of a wide-ranging set of developments in critical theory, philosophy, architecture, art, literature, and culture, which are generally characterized as either emerging from, in reaction to, or superseding modernism.

Here’s the first clever bit. Now go to the Edit menu and the Replace option. In the Find What box type: ^p

and in the Replace with box type: </p>^p<p>

This will add the right tags to preserve your carriage returns. The result should be something like:

<p>In the words of the late great Douglas Adams:</p>

<p>I wish I had listened to what my mother said when I was young</p>

<p>Why, what did she say?</p>

<p>I don’t know, I didn t listen</p>

<p>The concept of a post-PowerPoint era is based upon the concept of post-modernism:</p>

<p>Post-modernism is any of a wide-ranging set of developments in critical theory, philosophy, architecture, art, literature, and culture, which are generally characterized as either emerging from, in reaction to, or superseding modernism.

Stage 3: Putting it altogether

Now, you need to create the actual web page file using the template you created earlier.

Go to the File menu and select New.

On the right hand side you should have a list of available templates.

Click on Web page

The template you created earlier should appear.

Now go back to your content document and copy and paste it between the <p> and </p> tags of your new document:

<p>

Paste your content here

</p>

</body>

If you want to be clever you can add a heading as well between the <h1> and </h1> tags:

<h1>Type an optional heading here</h1>

<p>

Your content should be pasted here

</p>

That’s all there is to it.

To save your new page, then go to File >Save As and give your new page a file name such as “test.html” and most importantly set the Save as type to Plain Text.

If you open your favourite web browser, you should now have a perfectly good web page.

My result looks like this Click to view image.