Using Microsoft Word
to Build Your Webpage
Instructor: Chuck Kish

Last updated 7/10/2000

This webpage is designed to supplement the course Webpages for Teachers. In the course we will go through most of the procedures here to complete a webpage and upload it to Geocities. Though I have chosen Geocities for this course there are many other web hosting sites available with different and varied options.

Recall that HTML is the computer language that is used to make a webpage. If you would like to see what it looks like, click view, source. MS Word can be used as a webpage generator that works very much like word processing. There are some options that you cannot use in web pages, but much of what you know can be directly transferred to webpage production. Word automatically converts the document you see in front of you to HTML so that it can be viewed as a webpage.

Some conventions will be used in this tutorial:

  terms found in italics usually mean to click or select that menu item

  Mac users try to get used to using both mouse buttons

 click always means left click -- click the left mouse button
(that's the "Mac" one)

 right-click means click the right mouse button

  Remember left-clicks take action; right-clicks give you choices

 Follow the instructions to create the beginnings of your web page found in boxes like this one.

 

 

Text | Images | Backgrounds | Horizontal Lines | Hyperlinks

E-mail Links | Bookmarks | Lists | Tables | Uploading

 

Make a Folder to Organize & Store Your Work

It is a good idea to create a directory (folder) for yourself as you begin each new web page. On our own computer with no security or networking issues you can make a new folder on your desktop for convenience. Here at school you need to make a directory on the hard drive (the c: drive). Because of the way Word manages webpages, it is a very good idea to make a new directory/folder within your folder for each new webpage you create. Save all your copied graphics to that folder for that particular page; Word automatically does this for all "copied/pasted" graphics. This makes identifying all the graphics for your page much easier when it is time to upload the page.

To make a folder for yourself on the c: drive

  1. Right-click the Start button at the lower left of the screen
  2. Click Explore. This opens Windows Explorer -- a tool to see and work with all of the files on your computer.
  3. Click the c: drive icon in the left window.
  4. File, New, Folder. A new folder will appear at the bottom of the right window with the words "New Folder" in blue.
  5. Type your name and it will appear in that area. (If you loose the blue selection, right-click, Rename, will reselect it for renaming.

 

To make a folder for webpage number 1:

  1. Click your folder to select it.
  2. File, New, Folder.
  3. Type page1 as the folder name.
  4. Click a blank area of the screen outside the folder name to accept the name.
  5. Save all your work and graphics for your first webpage in this folder.

On day 2 of the course we will make a 'page2' directory in your folder for your second webpage.

 

 

Open MS Word and Convert to "Webpage Mode"

  1. Open Microsoft Word
  2. If you do not open to a new document window, File, New.
  3. To use Word to make your webpage, File, Save as HTML. Word is now ready to save all you work as HTML ("webpage language"). NAME THE PAGE: index

 

 

Typing Text

Type text just as you would in any Word document. Spacing is treated differently on a webpage. You do not have as many options easily available as you do in word processing.

 Let the program do the word wrapping for you except for special cases. This is important as people view your web page at different widths sometimes. Any unnecessary carriage returns break up the text in unplanned ways.

 A carriage return is used to start a new paragraph or make a wide break in the text like the ones between these paragraphs. Sometimes you may wish to break a line with a narrower spacing -- this is called a line break. (Line breaks can be used in word processing also. They are used in numbered lists, bulleted lists, and in tables to go to another line without another number, bullet, etc.) To make a line break hold the shift key down while you press the enter/return key -- shift-enter(return). Look at the examples below.

This line is

broken with a carriage return (enter).

 

This line is
broken with a line break (shift-enter).

 For the most part type text just as you usually do in Word. You have most of the same features available. Copy and paste, and the format painter are among the handiest.

  1. Type a title for your page.
  2. Center your title and resize the font appropriately for a title.
  3. Identify the author if you have not done so in the title.
  4. Type a "last updated" line so people visiting your site know how old the information is.
  5. Type some introductory information, the purpose of your page, a "disclaimer", etc. as you wish. (You may copy and paste the disclaimer from my page if you wish.

 

menu

 

Placing Images

Placing images is straight forward in Word, but must be treated slightly differently when you want them to show up properly on a webpage. In Word you can copy/paste from any source like the Internet. This method causes some problems in webpages, however. So, we WILL NOT use the copy/paste method to produce a webpage image. We will always save each image to our hard drive and then insert the image from there. It is still a simple process with a little practice, and yields much better results. (To see the differences between copy/paste and the save/insert method for placing graphics go to http://geocities.com/ckish2000/wordimagetest.html)

Remember that there are some copyright issues when copying from the Internet, even though it is a very widespread practice.

You can also insert an image from your own computer files or your clipart sources. Almost any image you see on the Internet can be saved to your computer as a file to be used at some other time.

To save an image from another webpage(and most other documents):

  1. Find an image somewhere on the Internet that you would like to use on your webpage.
  2. Right-click somewhere within the image you are interested in, click Save Picture as...
  3. Be sure to open your folder in the Save In box
  4. Name the file whatever you like in the File Name box.
  5. Save.

 

To use the Insert command

  1. Insert, Picture.
  2. Notice that you have several choices -- Clipart and From File are the two that will open choices for you from your computer.
  3. From File..., select the file you have saved.
  4. Insert.

 

Can you identify this famous painter? This is an example of mouse over text.

Notice that there are many other things that you have the option of inserting like sound, video, scanned images, etc. Those are options to experiment with but are beyond the scope of this course. Ask me about some of those options, as time permits.

You can have text appear when you hold the mouse over any image. This can be very useful. Use this option to identify the image, ask a question, expand on the image, give viewers something more to think about, etc. Hold your mouse over the image at the right to see an example.(on-line verion only)

 

To add mouse-over text:

  1. Select the image.
  2. Right-click, Format Picture, Settings tab
  3. Type the text you want in the Picture placeholder - Text box, OK.
  4. You can the images postion and size with the other tabs. Size changes can result in poor image quality.

 

 

menu

 

Background Images

The yellow background of this page is really just a small image square that is repeated hundreds or even thousands of times. You can see this on some webpages because the edges of the image do not always match smoothly. You can use actual images/pictures as background with a bit of care with your choice.

NOTE: The right-click menu on any webpage background area includes a Save Background As… choice. Use this option to save any background you really like (keeping in mind of course issues of copyright).

To add background textures and images

  1. Click Format, Background.
  2. Choose a color, or go to more colors, and select, if you want a solid color.
  3. Click Fill Effects for background image (texture-like) choices.
  4. To add your own image as a background go to Fill Effects, Other Textures, and choose an image from your computer's files.

 

IMPORTANT NOTE: When you upload your page to Geocities, any image that you have inserted into your page will have to be uploaded individually. Remember, a web page is text with "cyber-x's" that command the web browser where to place the images -- those images look like they are an integral part of the page, but they are not. Any image you do not upload separately will not show up on your completed page over the Internet. When word saves the document as HTML (a webpage) it automatically numbers the images to place them. Remember that the background, text boxes, fancy bullets, drawings, etc. are all saved as graphics in this case and have to be treated as graphics. You will eventually develop your own procedure for doing this efficiently. Some pointers for doing this are found at Some pointers for uploading the completed page.

 

 

menu

Horizontal Lines

The horizontal lines above and below are placed from the Insert menu.(on-line version)

They can also be cut and pasted into place.

Actually the bottom line was copied and moved using the ctrl-click method
and then center justified.

To insert a horizontal line

  1. Insert at least one horizontal line on your webpage
  2. Click Insert, Horizontal Line...
  3. Choose the line you want, OK or Insert.

menu

 

Creating Hyperlinks

Hyperlinks are created fairly easily in Word. Hyperlinks are what makes webpages interactive. These "hot" words or images are "pointers" to other addresses on the web or on your page. Text, and any image on a page can be hyperlinked. Click on the examples below.

This is an example of a link to the webpage course page. Did you notice that the image at the top of the page is also linked (test it!) to its source -- a possible solution to the citing sources issue.

Go to top of page
Click "top of page" to go to the top of the page.
Click the arrow to go to the end of the page.

 

To create a hyperlink:

Practice hyperlinking by making a link on your page to the school district's homepage: http://saratogaschools.org
  1. Select the text or image (picture) you want to link.
  2. Click the insert hyperlink button on Word's toolbar -- it looks like a globe with a chain-link. (Insert, Hyperlink also works)
  3. Type the web URL (internet webpages start with 'http://') -- or better yet, copy it from the Internet address window and paste it in the "Link to file or URL" box. This is not only more efficient but usually more accurate particularly for long addresses.

    Great Feature: If you have the insert hyperlink window open, then go to a browser window to the page you want, then come back to Word, the URL will be automatically pasted into the URL box.
  4. OK .

 

menu 

"E-mail me" links

You have probably seen e-mail links on many webpages. On many systems, if you click the link, your e-mail program automatically starts with the person's address already filled in. This link is created just like any hyperlink except for the 'http://' beginning. This link, e-mail Chuck Kish, is an e-mail link. Try it out if you wish -- you can cancel/quit and not really send me an e-mail if you wish. Remember any graphic can be a live link. Many websites use button and icon graphics for these types of links and many others.

To create an "e-mail me" hyperlink:

Practice e-mail hyperlinking by making an "e-mail me" link on your page.

  1. Type and then select some sort of "e-mail me" text on your page.
  2. Click the insert hyperlink button on Word's toolbar -- it looks like a globe with a chain-link. (Insert, Hyperlink also works)
  3. Click the down-arrow to the right of the Link to File or URL box. Select the mailto: option. Notice that "mailto:" now appears in the box. You could type that in just as easily.
  4. Without making any spaces, type your email address after the "mailto:" in the box. Remember: no space, all lowercase.
  5. OK .

 

menu

 

Bookmarks

Another use of hyperlinks is to mark parts of your page for quick jumps. These are called "bookmarks" --not to be confused with web browsing bookmarks. The spot to link to those is in the Insert Hyperlink box -- it is the lower address window. To use this, though, you first need to have placed the bookmark. This is very handy on long pages or where a page has a list of items you want to get to quickly. On these types of pages I usually place the first bookmark at the very top, call it top, and then have links to the "top of page". Sometimes if there is a "contents" like area of a page I bookmark it as "menu" and have links to it from the rest of the page -- this page is an example of that. (Time saver: create the "menu" link once, copy it once, and then go through the page pasting it wherever you want one.)

 

To insert a bookmark:

Add a bookmark to the top of your webpage.
  1. Place the cursor at the top of your page.
  2. Click Insert, Bookmark...
  3. In the Bookmark Name box type top
    (any short label will work --
    nospacesarepermitted -- keep it short :~)

 

To link to a bookmark, follow the create hyperlink procedures but choose the name of the bookmark in the Named location in file box with the Browse button.

Type 'top of page' somewhere on your page and link it to the bookmark on the top of your page.

 

 menu

 

Bulleted and Numbered Lists

Information can often be displayed in an organized way using lists. Bulleted and numbered lists work the same in Word as both a word processor or web page editor.

To make a numbered or bulleted list on your webpage either:

  1. Select the text you want.
  2. Click the Bullets or Numbering button on the button bar.

OR
  1. Click the Bullets or Numbering button on the button bar.
  2. Type the text you want bulleted or numbered.
  3. When you finish you list either reclick the button above or backspace if you have accidentally started "one too many" lines.

Edit the buttons or numbering by either:
  1. right-clicking the list
  2. click Bullets and Numbering...

OR using Format, Bullets and Numbering...

menu

 

Working With Tables

To work with tables use the Table menu at the top of the Word window.

The "dummy" table below was created in a Word document and copy/pasted into this webpage. This means you don't have to recreate data you already have for use on a webpage.

HEADING 1

HEADING 2

HEADING 3

HEADING 4

data

data

data

data

data

data

data

data

data

data

data

data

The table can be positioned anywhere you wish. To do this right click anywhere in the table and then click Table Properties.

 

 

Making new tables on a webpage is as easy as creating them in any Word word-processing document. 

To create a new table:

Add a table to your webpage.
  1. Locate the cursor where you want the table.
  2. Click the Insert Table button on the upper right of your button bar -- it looks like a little table.
  3. Drag your cursor down and right through as many columns and rows as you want in the table.
  4. When you let go of the mouse button your table will appear.
  5. Add some text to your table. You can even place images into table cells.
  6. Experiment with the table's appearance using the Table menu at the top of this window. As always right-click opens a menu of choices.
  7. NOTE: A table (or its rows/columns are only selected if you see your selection shading going slightly "beyond" the table's boundary. Unless you see that, only the cells in the table are selected.

 

 

Below is a table without borders.
The table has been used as a layout tool for this page. Many pages use tables to control where text and images appear. A table can have as few as 1 cell and be used to position text or a picture on a page. Many pictures with captions are done in 2 cells. This text is placed in 2 cells of a table with no borders to position it in the center of the page.

A caution: any table that is wider than a typical page forces a viewer to scroll left and right. Unless there is good reason to do so, avoid wide tables. Pages are typically designed to scroll downward.

Mt. Saint Helens erupting in May 1980

To insert a picture like at the left you must have it saved to your folder. To do this:

  1. find the image you want
  2. right click, Save picture as...
  3. go to your folder,
  4. in file name box name the file whatever you wish
  5. Save
  6. Go back to Word
  7. Place the cursor where you want to insert the picture
  8. right-click, Picture...
  9. go to your folder, double-click the correct file

The procedure above works just as well for animated gifs(on-line version)like the one to the right.

This type of image is an animated gif.

This is a piece of clipart commonly found on computers with Microsoft programs.

Clip art also works
the same way.

 

Below is a copy of the same table but
with the borders showing so you can see
how it is used for layout.

Mt. Saint Helens erupting in May 1980

To insert a picture like above you must have it saved to your folder. To do this:

  • find the image you want
  • right click, Save picture as...
  • go to your folder,
  • in file name box name the file whatever you wish
  • Save
  • Go back to Word
  • Place the cursor where you want to insert the picture
  • right-click, Picture...
  • go to your folder, double-click the correct file

    • (These cells are only used

    for spacing purposes.)

    The procedure above works just as well for animated gifs like the one to the right.

    This type of image is an animated gif.

    (These cells are only used

    for spacing purposes)

    This is a piece of clipart commonly found on computers with Microsoft programs.

    Clip art also works
    the same way.

     

     

     

    menu

     

    Uploading your page to Geocities

    If you saved all your work for a particular webpage in one folder you can simply upload every file in that folder to Geocities. If you have not done this or if you have changed items on the page considerably during your work on the page there may be several files you do not need to upload. Though not a good practice, if you still have plenty of server space available you can still upload everything. If you want to check to be sure you upload only the files you need, you can determine which files they are by using the "Things to do before uploading" followed by the "Troubleshooting your page" procedures. The troubleshooting procedures will come in useful no matter which files you upload.

     

    Things to do before uploading:

    1. Double check your new webpage. Some formatting may be changed or lost as you copied/pasted from other documents.
    2. Once you are satisfied be sure it is saved (SAVE OFTEN).

      You need to know the file names of each image included on your page. Remember these include horizontal lines, graphic bullets, pictures, clip-art, textboxes, the background, etc. Number 3 will show you those file names.
    3. Right-click, Save Picture as..., each image -- CAUTION - do not change the image name -- Write the image's file name down so you know what to upload later. Click Cancel.

     

    To upload to Geocities:

    1. Log into your Geocities account.
    2. Start Geocities File Manager.
    3. Go to the E-Z Upload section. (Both check boxes should be checked for the options shown below.)

      4. Automatically convert filenames to lowercase

      Automatically change ".htm" extensions to ".html"

    4. For each "upload box" click Browse. (You can open more boxes if you wish.) This opens a selection box so you can select the files from your computer that you need to upload.
    5. Once you have uploaded the files, you should be able to view and troubleshoot your page.

     

    Troubleshooting your page:

    1. Open Internet Explorer and open your webpage. Remember the address is geocities.com/yourid
    2. Read over you page.
    3. Check all links to see that they do what they should.
    4. Check to see that all the images are what you expect. Any image that does not show may not have been uploaded. To check this right-click the area where the image is missing (you will see it), click Properties. The file name will be listed. Check Geocities File Manager to see if the appropriate file is there.

     

    menu

    top of page

     

    Copyright Charles Kish
    July 1, 2000 (updated 10/28/2000)
    All Rights Reserved

     

     

     

     

     

     

     

     

    Hosted by www.Geocities.ws

    1