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:
