How You Can Use Word To Create A Simple Compliant Web Page
RSS
 View all Hubs
See what's in...

Getting Creative with Microsoft Word Part 2: How You Can Use Word To Create A Simple Web Page

Part 2 of 5 in the series: Getting Creative with Word
Article by Profacgillies (4,591 pts )
Published on Oct 13, 2008
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.
31 views
go to: part 1

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 should not be very different. Most domestic users are still using the 2003 version 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

<title></title>

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:

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.</p>

<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:

<h1></h1>

<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

Getting Creative with Word

This series of articles shows how Word can be used creatively to help to create Web pages without creating the horribly bloated pages people associate with Word.

Bright Hub - Science & Technology Articles, Buyer's Guides, How-To Tips and Software Reviews
About Bright Hub | Contact Us | Terms of Use | Privacy Policy | Copyright Policy | ©2008 Bright Hub Inc. All rights reserved. Page copy protected against web site content infringement by Copyscape