Making a Website on Microsoft Word
A Tutorial
Created by Julie
Note: This tutorial is
catered towards Microsoft Word 2002 (version 10.26), as this is the version I
have on my computer. If you’re using a
different version of Word, there may be some slight differences between what I
show here and your program. In general,
though, you should be able to do all of the same things I explain here.
So, you want to make a website?
Many people don’t realize you can do that quite easily on Microsoft
Word, the same program you use to type up papers and other documents. It works much the same, but there are a few added
things you need to know to create a site that will work online. There are different methods of doing this; in
this tutorial, I’ve tried to explain the method I use in an easy, step-by-step
approach. Follow the directions below,
and you should be on your way to creating a site of your own!
Step #1: Getting a Webspace
Assuming you’re making a website that
you actually want to put online, you should first figure out where and how
you’re going to post it. There are many
sites that offer free webspaces. My
personal favorite is Yahoo Geocities.
It’s free, easy to use, and doesn’t flood your site with annoying pop-up
ads or banners at the top. It’s the only
one I use for my own sites, so I’ll be referring only to it in this
tutorial. If you don’t like Geocities
for some reason, there are other options, such as Angelfire or Tripod.
Whatever you choose to use, you should
first go and get an account so that you’ll have a place to post your site. Follow the directions on Geocities or
whatever site you use to sign up and make sure you keep track of what your
username and website URL will be (often, these will be related – for example,
my Geocities ID is dreamers_sanctuary, and my site URL is http://www.geocities.com/dreamers_sanctuary.)
Step #2: Starting a New
Site
Once you have a place to put your
site, it’s time to start building the site itself. To do this on Word, follow the directions
below:
- Open up Word.
- Go to File -> New ->
Blank Web Page.
- You will have a blank white page that looks like any other Word
doc. You can type on it just like
you would a regular Word doc too!
It’s easiest to type or copy/paste all the written information you
want on your page first, THEN worry about pictures, links, etc., so type
up a title and a little blurb or whatever you wish to get yourself
started.
- Once you have something on your page, make sure you save it. Go to File -> Save As and give it a name. If this is going to be the first page
people see when they go to your site, call it “index”. Word automatically saved webpages with a
.htm extension. You can also give it a .html extension by manually typing
“index.html” as the filename, but this isn’t necessary - .htm is fine.
Step #3: Changing Colors
and Fonts
You can adjust your site’s color
scheme the way you would on a regular Word document. To change the text color, go to one of the
horizontal toolbars at the top of your screen and find the button that has a
blue A and a strip of color (black by
default) on it. Highlight your text and
click this button to change its color.
To change your background color, go to
Format -> Background. Choose a color or click on More Colors. Do not use a gradient or texture background
in this step.
You can change your font and its style
the same way you would in a regular Word doc, using the buttons on the
horizontal toolbars at the top or by going to Format -> Font. When
using different fonts, stick to basic fonts that all computers come with, such
as Times New Roman, Arial, Tahoma, Verdana, Comic Sans, etc. Do not use obscure, designer fonts because if
your viewers do not have the same font on their computers, it will not show up
correctly for them on your website.
Step #4: Adding Backgrounds
and Pictures
This is where using Word gets
tricky. It’s really easy to add pictures
and texture or image backgrounds to a Word site once you know how to do it, but
it takes some explaining to get it work right.
There are different ways of doing this, and my preferred method seems
like “the hard way” at first, but in the end, it makes it easier, to me at
least.
Before you can add any kind of image
to your site (including as a background), you need to upload it to your site
account (which you created in Step 1).
If you’re using Geocities, here is the easiest way to do that:
1.
Log into
Geocities. You will be taken to the Control Panel.
2.
Click on the tab
that says “Create and Update.” You will
be taken to a different page.
3.
Scroll down until
you see a link that says “Easy Upload.”
It will be found under the File
Management Tools section. Click it.
4.
You will find
yourself on a new page with 5 blank boxes.
Click the Browse button next
to one of the boxes and open the image you want to upload. Do this with all of the images you plan to
put on your webpage. Once you have the
boxes filled, click the Upload Files
button. Note that your image filenames
cannot have spaces in them, and if they contain capital letters, remember that
– everything is case sensitive in the world of web design, so you’ll mess
yourself up if you don’t remember to type capital letters where they
belong. The easiest way to get around
this is to keep your filenames in all lowercase.
5.
Every image that
you upload to the internet will be given its own URL, which will relate to your
site’s URL. For example, if I upload an
image called backstreet.jpg into my dreamers_sanctuary account, its URL will
be http://www.geocities.com/dreamers_sanctuary/backstreet.jpg. Remember this. If you forget your filenames, you can view
everything you have uploaded to your account in your File Manager on Geocities, which you can access the same way you
got to the Easy Upload page.
Once you have your images uploaded,
you can put them on your website. The
way you do this will vary, depending on if you’re using an image as a
background or just a picture on the site.
I will describe how to do both below.
If you want your background to be
something other than a solid color, you will need to use an image. This image should already be uploaded to your
site account. To turn it into your background,
follow these steps:
- Open your webpage in Word.
- Go to View -> HTML Source. If you get an error message while trying
to do this, you probably need to put your Word installation CD in and let
it install components that were not installed initially.
- You should get a
new window with a bunch of “gibberish” in different colors. This is the HTML code of your page. Scroll down a ways until you come to a line that looks like
this: <body lang=EN-US style='tab-interval:.5in'> This is the code for your
background.
- Copy and paste the following code right over the above in your
HTML code: <body
background="http://www.geocities.com/yoursite/image.jpg" bgcolor="#000000"> If the text doesn’t paste looking as it
does here (not color-wise, but text-wise) – if it adds in a bunch of other
stuff – you will need to open up a program like Notepad or Wordpad (all
computers with Windows should have them) and paste it there first. Then copy it again and paste it into
your HTML code. This gets rid of
the extra formatting caused by Word.
It should paste with the same string of text you copied.
- The parts of the this string of text that are in red are parts you
will need to change to fit your site and image. You should take out the URL I put in the
code and replace it with the URL for the image you’re using. The #000000 is a color code. It represents the background color that
will show up on your website while your background image loads. You may want to change this to a color
that is similar to your background.
This site has a list
of color codes for many different colors you can choose from. Pick one and paste the code over the
000000 in your HTML code. Note:
This step is optional.
- Now go back to your webpage in Word. Once you bring it up, a box will appear
that asks you to refresh the changes that were made. Click refresh, and your background image should load. If it doesn’t, you need to make sure
that 1) the image you wanted is uploaded, and 2) the URL for it in your
HTML code is correct.
You can add pictures to your webpage
in much the same way you add an image background.
- Open your webpage in Word.
- Go to View -> HTML Source. If you get an error message while trying
to do this, you probably need to put your Word installation CD in and let
it install components that were not installed initially.
- You should get a new window with a bunch of “gibberish” in
different colors. This is the HTML
code of your page.
- As you scroll down through the HTML code of your page, you will start
to see the text you typed on your webpage hidden in between the rest of
the code. It will be in black,
while the rest of the code will be in red and blue. This can be confusing, but as you get
more experience, you will be able to decipher HTML code more easily.
- You should have an idea of where on the webpage you want to post
your picture(s). Find that place in
the HTML code – for example, after a certain paragraph of text. You will see that the HTML Code is
divided into paragraphs too, with a blank line between each section of
code. In the blank line before or
after the text you want your picture to be above or below, paste the
following code: <img src=“http://www.geocities.com/yoursite/image.jpg”> Again, if it does not paste this line
of text exactly and instead adds a bunch of other gibberish, you will need
to paste it into Notepad/Wordpad first, then copy that and paste it into
the HTML Code.
- Again, you will need to replace the URL I put it red with the URL
of your image.
- Once you’ve done that, go back to your webpage in Word and click refresh. Your image should appear. If it doesn’t, go back to Geocities and
your HTML Code and double check that 1) you’ve uploaded the image, and 2)
the code and URL you’re using are correct.
- If you don’t like the size of your image, you can easily resize it
by clicking a corner and dragging, just as you would in a regular Word
doc. You can also center it (and
any of your text) by highlighting it and clicking the Center alignment
button on the horizontal toolbar up top.
Step #5: Adding Links
If you’re going to have multiple pages
to your site or link to other sites, you will need to make hyperlinks. This is extremely easy on Word. Just follow these steps:
- Type the text you want to show up for your link (i.e., Click
Here.)
- Highlight that text.
- Go to Insert -> Hyperlink.
- In the box that comes up, type the URL of the link. If you’re linking to one of your own
pages, make sure you type the full URL of that page.
- If you want the link to open up in a new window when someone
clicks it (so that it does not load right over your page), newer versions
of Word allow you to do this easily.
Click the button that says Target
Frame and on the drop-down menu, choose New Window.
- Click OK.
- Your text should now be underlined and blue (depending on your
Word default settings). You can
change the link’s color the same way you would change any text – highlight
and change the color.
- If you want to link to an email address, follow the same steps,
only type the email address into the box instead of a URL. Word will automatically recognize it as
an email address.
Step #6: Uploading Your
Site
Once you have your page(s) done, you
need to upload them to your webspace.
You do this the exact same way you upload images. If you’re using Geocities, follow the
uploading instructions under Adding
Backgrounds and Pictures.
Final Notes
These are the very basics for creating
a website on Word. Of course, once you
have a very simple site, you may want to make it more complex. It’s very easy to play around with what I
gave you in this tutorial and add more to your site. For example, adding webtools such as a
guestbook and counter require you to paste an HTML code into the code of your
site. You can do this exactly the same
way you pasted the code for adding a picture in. Sites that offer such webtools typically
explain where to put the codes as well.
You can develop more complex layouts
by using frames, which you can do quite easily on Word, but that’s for another
tutorial. If you do want to use frames,
refer to the Word help section or do a search online for tutorials. More complex types of HTML, such as i-frames,
can also work with Word, but take more skill to get to work. However, you can have a very nice,
user-friendly site without a “fancy” layout – sometimes, simpler is
better. Start with the basics and work
your way up. You’d be surprised at how
much you can teach yourself once you start playing around and
experimenting. Just make sure to keep a
back-up copy of your webpages in case you screw something up. ;)
Links
Here are some links to help you out
with your site.
Free Website Hosts
Web Tools (i.e. guestbooks, polls,
counters, etc.)
Site Stats (great counters)
Free Backgrounds
Sponsored by:
