Creating Web pages with Word

Introduction

World Wide Web entered in a big way in 1995. Since then, everybody wants to create his or her own Web page and to "publish" their work. This page shows you the basic concepts on how to use Microsoft Word to realize a Web page.
This software has not all the options to create a Web page or even a structured Web site. However, the basic options are easily accessible. To use all the instructions and the possible options by Web pages, there are dedicated Web page editors such as Frontpage, PageMill, Hot Dog Pro as well as several others. Moreover, the previous page demonstrates how to create a Web page with Netscape Composer.

The exercises

This part of the text consists of some exercises from Word to create a Web page with explanations to explain each of the possibilities.
Open the Word application.
Write: " This is my first page Web ".
From the File menu, select the Save in HTML format ... option.

Enter the name page1.htm in the Name of file box.
Press on the Save button.

Every time you will want to save a page in HTML format for the first, Word will ask you this question. This is to say you that there is no equivalent of this document in Word format. For this exercise, Word needs to also have the same document in Word format. So,
Press on the Yes button.
As soon as the file is saved, you will notice that the options of the various toolbars are going to change. It's because the HTML format does not offer as many possibilities as a Word document.

The text

The most important element on a Web page is always it's content. You can change the presentation of the text by changing it's font (type of caracter) or by changing the color and the size of the text. You will use the same options as you would use for a common document. This Web site offers you a page on the basic options for presentation in Word. So, they will not be resumed on this page. Click here to return you to the Web page on presentations in Word.

Links and " bookmarks "

One of the basic characteristics of a Web page is that she should have at least a link on another page or another site. A Web page without at least a link is unthinkable! There should be at least a link that returns to the previous page or to the main page of the site. A link can be placed on text or on an image.
It's also possible to have links inside the same page. They're called bookmarks. For example, almost all the pages of this site have at the beginning a list of the subjects. Click on the text and it transports you farther on the same Web page. However, bookmarks are "compulsory" in the conception of a Web page. But they help the readers find quickly the contents that they need on the same page.
When you click a link, it transports you on another Web page. However, when you click a bookmark, it transports you at another place of the same Web page. To know if you are on the same page in a bookmark, look at the address of the Web page. The "#" character is used to indicate the name of the bookmark. For example, this page is called conceptw.htm. If you click on the introduction bookmark, the address will be conceptw.htm#intro.

To create a link on text:

If you want to make a link on the text, make a block with the text of your choice.
If you want to make a link on an image, click on the image in question.
From the main toolbar, press on the button.
OR
From the Insert menu, select theHypertext link option.

In the File or URL box, write the address of the Web page that you want to link to when the user will click on the link.
You should write the complete address (http://...) if the page a link of that you want is not in the same directory or is outside of the site. So, it's better to write the addresses in small letters. This applies also when you include a link on an image.
If you want that the link goes directly to a bookmark of the page, write the name of the bookmark in the second box.
If you want to make a link on a bookmark of the same page, don't write the address of the Web page, only the name of the bookmark that should meet itself from the list of bookmarks.

To create a link on an image:

Click on the image.
Press on the button.
OR
From the Insert menu, select theHypertext link option.
Enter the address and\or the bookmark of your choice.
Press on the OK button.
You will use the same technique for the navigation buttons of your site. Because, in fact, navigation buttons are only images with a link.

To create a link on an e-mail address

It's also possible to make a link on an address of E-mail. If you click this link and that the browser has your name, your address of E-mail as well as the name of your server where is located your "POB", a window will appear allowing you to write a message. Although it is necessary to give this information previously, it is very practical to send messages quickly. The E-mail with Netscape page shows you how to configure the browser to put in the necessary information to access your e-mail as well as to send messages.
Select of the text or an image of your choice.
Press on the button.
OR
From the Insert menu, select theHypertext link option.

In the box to write the file or the URL, write mailto: followed by the E-mail address. Ex: mailto:tremblay.jean@cie.abc.com.
It's preferable for a link on an address of E-mail to write the address of the person. If the reader of the page did not configure the browser to send messages, he can always write the address and contact the person later.

To create a bookmark on that you can then refer to it a link.

Place the cursor where you want the bookmark.
From the Insert menu, select theBookmark option.

Enter the name that you want to give to the bookmark.
Press on the Add button.

To create a link on a part of the image

The principle consists in surrounding the part of the image where you want to put a link and then to give the address of the page that you want. Regrettably, this option is not available with Word 97. But, it is however possible to make it with the other editors. At the foot of the page that looks of the information about Web pages, there is an image that contains eight links on the other pages. It's enough to click on the word to go on another page.

Modify a hypertext link

It's always possible to modify a hypertext link to another address.
Place the pointer on top of the link (either text or image).
Press on the right button of the mouse.
From the context menu, select the Hypertext link option.
Select the Modify option.
From the window with the links, change the address to the page of your choice.
The introduction page to the World Wide Web also has information about the absolute and relative addresses. Must read.

The horizontal lines

A horizontal line can be used in a Web page to separate two parts of the document. As on this site, the horizontal lines are used to separate the list of the subjects covered with the beginning of the page besides of the text. Another to separate the textis with navigation buttons located at the start and end of every page.
Press on the button .
OR
From the Insert menu, select the horizontal lines option.

You can choose from these or add your own horizontal lines to the list. There are several other styles of horizontal lines available on the World Wide Web. While pressing on the More button, you can add to the list of lines that you have already found on the Web. It's enough to indicate to Word the drive and the directory (folder) and the name of the file where the image of the line horizontal that you need is located.

The images

Press on the button.
OR
From the Insert menu, select the option Images.
This last option offers you then several possible sources. You can use an image coming from Office's library, to look for an image on Microsoft's Web site, to take the image directly from a scanner or generate a chart from the drawing tools.
For the purpose of the exercise, insert an image from the library.

From the list of the images, select the one that answers best your needs.
The image will be probably too big. You can adjust the size of the image by using the mouse.
Click on the image.
Place the pointer on one of the dimension squares located at the extremities of the image.
While pressing on the left button of the mouse, move the square closer to the middle of the image.
Release the button of the mouse when you will have reached the wished size.
This in the effect of reduced the image. To increase the size, move the square away from the middle of the image.
At the time to save the Web page, Word will automatically convert the images coming from the library in GIF format. They will have names such as image1.gif , image2.gif etc. Don't be surprised finding files in GIF format in the same folder as your Web page. It's also necessary to transfer the images to the public directory (or folder) if you want people to see correctly your Web page.
By default, an image always aligns itself to the left of the screen and allows only a line of text next to the image. Word allows you to place the image to the left or to the right-hand side of the screen and to write several lines of text next to it. You must not use the alignment options that you normaly use in Word. In HTML format, these options are for text; not images.
Having inserted an image, click on it.
From the Format menu, select the Image properties option.
If need be, click on the Position tab.
This window indicates you that it is possible to align the text to the left or to the right-hand side of the screen or to do no adaptation or alignment. In this last case, the image is located at the place where you inserted it in the screen and allows only a line next to this one.
For this exercise, select the option To the right.
Press on the OK button.
A frame will appear around the image. Under any account, write text in this frame. Always write the text outside the frame.
This option is really practical when you want to write a big paragraph around the image or to align the image in the right-hand side of the screen. It's however necessary to be careful because of all the possible screen resolutions. A paragraph that is well presented with an image at a 640 X 480 pixels resolution but can give a very different effect at 1024 X 768! If it is possible for you, change the resolution of your screen and look at the difference for this part of the page.
Another trick to align the text perfectly is to use a table with several columns. You place the image in a column and a text in the other one. To centre the image, create a table in three columns. Place the image in the middle column. This is especially practical when you have only a couple of lines of text to write next to the image.
The Size tab allows to play with the image size. You can change the size in centimeter. This is not really practical because the unit of measure in HTML format is in pixels (points of light on the screen) or in on the screen's percentage Eg. 10%. It offers you however certain level of control on the presentation.

The page's background

There is nothing worse that a grey background page. Especially when it is so easy to change it for a color or to put an image of your choice.
Press on the button.
OR
From the Format menu, select the Background option.

From this window, you can choose a color that will fill the background of the page. The white color is a good choice. It gives you the best contrast with text written in black. It's also the kind of presentation that we're used to see on paper.
If none of these selections satisfies you, you can always select the Addiotional Colour option to have the choice among millions of colors. However, if in the place you want to put an image for the background ...
Press on the Motives and textures button.

Of this window, you can choose one of the patterns included in Word. It's also possible for you to include other patterns that you found on the Web. There are several sites that have patterns for Web pages or the instructions to create yours. To include a pattern that you found.
Press on the button the Other texture...
Select the drive, the folder and the name of the file that has the required pattern.
Press on the Save button.
This pattern will be added to the others already in the list. You will then have access to it at any time from Word.

Tables

Tables are a practical way to present of the information. In the HTML format, it is also an excellent tool to control the presentation in the screen. On a Web page, there are no tools such as tabs or columns to align the text. However, you can put in cells of various sizes elements such as text, images, other options like form etc. It's also possible to use to it to show the text on several columns. Nobody sees the difference if the border of cells is transparent.
Press on the button.
OR
From the Table menu, select theInsert a table option.
Select the number of columns and lines that you need.
Press on the OK button.
Like a common document, Word offers you options to control the presentation of the table. These will not be discussed this page because they are already detailed on another Web page of this site in the Word section. Click here to return you to that page.
There are however some options that are only available for a table in HTML format. They are the properties for the table and for the cells. These are discussed in the lines below.
The properties for tables
Place the pointer inside the table.
From the Table menu, select the Properties of table option.

The first part of the window concerns the adaptation of the table with regard to the text. As for the images, it's possible put the text around the table. However, by default, the rest of the text of the page takes place above or below the table. It's even possible to centre horizontally the table. It's also possible to determine the space between the border of the cell and the text contained in the cells of the table. This window offers you also the choice to determine the background color of the table and the spacing between the columns of the table.

When you will have determined your choices, press on the OK button.
The properties for cells.
Click in the cell that you want to change the properties.
You can also make a block with several cells if you want to apply the same properties to several cells.
From the Table menu, select the Properties of cells option.

From this window, you can first decide on the vertical placement of the text inside the cell. As for the properties of the table, you can change the background color for one or a block of cells. At the bottom, you can determine the size of the cell.

When you will have determined your choices, press on the OK button.

Preview from a browser

What you see in the Word's screen may not be the same presentation as Web browser. This option will use a browser such as Netscape Navigator, Internet Explorer or any other to preview your page. It's for that reason that there is an option to outline of the Web page. But first, save the file before seeing the preview. Then, the contents of the page will be shown from the browser.
Press on the button.
OR
From the File menu, select the Preview the Web page option.
If it is the first time that you use this option, Word will ask you for the place where the browser program (Navigator, Internet Explorer or any others) is located on the hard disk of your computer. It's so necessary to know where this program is located on your computer before using this option. Word will always open the same browser the next times as you will use this option.

View the HTML codes

Why to show you the codes when you are capable of creating your Web pages from an editor ? Inevitably, you will have to change one of the codes of a Web page " by hand ". That's from the code. It's sometimes easier or simply necessary to use it.
For example, an image does not appear in preview mode. One of the most common reasons is that the name of the file is " badly " written. Certain servers, mostly Unix servers, make a difference between uppercase and lowercase. So, for the server, the images Boulex.gif, boulex.Gif and boulex.gif are three different images. To avoid this kind of situation, it's better write the name of the files, and of the images in lowercase. This applies also to the links and to the bookmarks. During the procedure to transfer your Web page on the server, there is sometimes an option to force the name of documents (Web page or image) in lowercase. Don't forget it ! If you have another problem with your Web page and that you don't find the solution, it is possible that you will be required to see the HTML code.
There is also another more interesting reason for knowing the codes. Later, you can look at the codes of the Web pages of the other people to see how they managed to have certain effect or a kind of presentation. You can then repeat these codes on your pages! From Netscape, use the option Page source below the View menu. For Internet Explorer, of the View menu, select the Source option.
To familiarize yourself with the codes, this part of the page shows you the codes most often used. However, this list is far from being complete. Several pages in the section references of the page of the World Wide Web have more information about the codes.
From the View menu, select the option Codes HTML source.
Word is maybe going to ask you to save the document, answer Yes.
The basic codes
As mentioned at the beginning of this page, all the codes in HTML format begin with "<" and end with ">". Most of these codes also work in pairs: the first one to activate the command and the second to end it. The only difference between both is that the ending command has the "/" character in the code. For example, the codes < P > and < / P > indicate the beginning and the end of a paragraph. There are also some codes that are necessary.
< HTML >
< HEAD >
< TITLE > Title of your Web page < / TITLE >
< / HEAD >
< BODY >
< / BODY >
< / HTML >
What you have above are the basic codes for a Web page. A Web page always begins with <HTML>. It's by this way that the HTML format is recognized by the Web page editor and the browsers. Then the < HEAD > section follows that includes the name of the page (< TITLE >) that will appear on the windows' title bar during the viewing of the page by a browser. It's inside the < BODY > codes that you but the text on the page. Often, the first BODY code includes some options such as the background color (< BACKGROUND >) or the name of the image that serves as the background for the page.
The images
< IMG SRC = " plus.gif " ALT = "+" HEIGHT = "10" WIDTH = "10" BORDER = "0" > =
The previous code indicates the reference to an image. The option SRC indicates the name and if need be the path (in absolute address) to find the image in question. The ALT option ALT shows the text if, for a reason or another, the image would not appear. This always leaves a reference to the readers of the page. The option HEIGHT and WIDTH reserves the necessary space to view the image. In this way, the browser reserves the space required and continues to show the rest of the text of the page. Later, it returns and shows the images in the reserved spaces. If this option is not used, the presentation of the text of the page is slower because the browser as to read the image before reserving the space. The BORDER option serves for determining the thickness of the outline of the image. If the option is not there, there will be no border around the image (BORDER = "0").

Problems by using Word

The students who first used Word to create their Web page using Word noticed some problems. Here is the list of problems that the students discovered and their solutions.
1. The Web page and the images were transferred to the public directory, but thre's no image or background to be seen.
The problem comes from the files' names. The server Axe and the server Nobel make(do) a difference between the characters written in small letters and those in capital letters. So, for these servers, files Boulex.gif, boulex.gif and boulex.gif are three various files.
During the transfer of files by using the FTP software, the option " forces lowercase " was active. So all the names of files are written in small letters. However, in the Web page, the first letter of the names of the images is written in capital letter. Because there are no files using exactly this name on the server, it shows a empty spot instead of the image.
There are two ways to solve the situation: to remove the " forces lowercase " option in WS_FTP and to re-transfer the images or to change the codes in the Web page.
The first option is the easiest.
Open the WS_FTP software.
Press on the Option button at the bottom of the window.
Click on the Codes tab.
To remove the Forces lowercase option.
Re-transfer the images.
The second option is a little more difficult. It has the advantage to give you a view of the codes that compose a Web page as well as to modify them when necessary. This option also exists in other FTP (File Transfer Protocol) software.
Open Word with your Web page with the images that don't appear.
From the menu View, select the Source code option.
For the bottom of the screen, you will find from the first lines of the codes of your Web page the code < BODY BACKGROUND = " Image.gif " .
Make sure that the name of the image, that is between quotation marks, is in lowercase.
For the images of your Web page.
From the menu Edit, select the Search option.

Enter the text " < IMG " (without quotation marks) the box and press on the Search button.
You go to fall on a code for the view of a page.
Make sure that the name of the image, that is between quotation marks, is in lowercase.
Repeat the search until you are at the end of the Web page.
Press on the Close button to save your modifications.
Save the file and retransfer it in your public directory.
2. The name of the images is written in lowercase but they don't always appear.
The name of certain images consists of several words such as " green ball ", " autumn leaves " or " metal sphere ". Most unix servers don't like spaces in the name of documents. They replace the spaces in the name of files with the "%20 " characters. Because the name of the file of image is not the same than that on the Web page, it does not appear while viewing of the Web page.
The solution consists in renaming the file into a single word and to change the code in the Web page.
To rename a file.
Find the image the name of that consists of several words on your hard disk or your floppy disk.
Place the pointer over the name of the image.
Press on the right mouse button the and select the Rename option.
OR
Double-click on the name of the image.
Change the name of the image a single word and press the Enter key.
3. The image grows when I attach a link!
In some rare cases, the image grows when one adds it a link. This is a "bug" in Word. To resolve this problem, it is necessary to remove the link and to find the "normal" size of the image. After you've put a link, go into the HTML code to return to it's proper size.
Place the pointer over the image you have put a link on.
Press on the right button of the mouse.
From the context menu, select the options Hypertext link and Modify hypertext link.

Press on the Delete the link button.
The image should return to its previous size. Otherwise, change the size of the image. It's now necessary to find the normal size of the image.
From the View menu, select the option HTML Codes source.
Use the Edit function, look for the image that changes size.
Write on a scrap of paper its width and its height (WIDTH, HEIGHT).
Press on the button Leave HTML source codes to return to normal mode.
Put the hypertext link on the image.
If the image gets bigger again.
Return to the HTML source code (View, HTML source codes)
Change the figures of the width and the height to those that you wrote on paper.
Leave the HTML source code and saving your modifications.
The image should then be the wished size.
4. I can not attach a link to an image if I aligned it to the left or to the right-hand side of the screen.
Once again, it is also another "bug" in Word. It should normally be possible to align an image and be able to write several lines of text next to the image. The only way of by-passing this problem is to add the necessary code " by hand " by editing the codes.
From the menu View, select the option Codes HTML source.
If asked, save your Web page.
By using the Search option, look for, the image on that you want to attach a link.
Add in front of the < IMG> code the following code:
For a link on another page, <A HREF = " address of the Web page " > (with quotation marks) followed after the <IMG> code with < /A>. Here is an example that will bring you to the main page of CNN's site.
< A HREF = " http://www.cnn.com / " >< IMG SRC = "Image3.gif" WIDTH=82 HEIGHT=113 BORDER=0 > </a>
For a link to a bookmark, <A HREF = "#name of the bookmark" > (with quotation marks) followed by </A> after the < IMG > code. Here's an example that will bring you to the "introduction" bookmark of this page.
<A HREF = "#introduction"><IMG SRC = "Image3.gif" WIDTH=82 HEIGHT=113 BORDER=0 > </A>
Be careful. Word wants to erase this link as well as the rest of the text that follows the link. To avoid that you lose a part of the text that you have already written, make a copy of the HTML file ( Web page) before adding the code for the link. Or, for the moment, avoid putting links on aligned images.
5. Bookmarks don't work with Internet Explorer but work correctly with Netscape Navigator.
It's partially a problem of Word and Internet Explorer. Certain students tried to put two bookmarks at the same place. The problem is that Word can "cross" bookmarks codes.
Normally, the codes of bookmarks should be written in the following way: <A NAME = " name of the bookmark " > < /A>. If there are two bookmarks next to another, it normaly would look like: <A NAME = " name of the first bookmark " > < /A> <A NAME = " name of the second bookmark " > < /A>. Word mixes the beginning and the end of the bookmark codes. It gives this: <A NAME = " name of the first bookmark " > <A NAME = " name of the second bookmark " > < /A> < /A>. Netscape Communicator or Netscape Navigator moves the user to the first bookmark code whereas Internet Explorer takes needs the second bookmark code. Because the codes are mixed, this IE does not find the bookmark.
To solve this problem.
From the View menu, select the HTML source Codes option.
Use the Edit option, Look for the crossed bookmarks.
Place bookmarks in good order (<A NAME = "..." > </A> <A NAME = "..." > </A>).
Leave the code source and save the modifications.
6. A part of the text in color does not display the proper color or the right size in Internet Explorer or Netscape Navigator.
It's another problems from Word. Simply, Word "forgets" to put codes of colors in the Web page.
In HTML format, the codes to change the color of a part of the text is <FONT>. Among the options for this command, there is color, the size of the character and a type of font. For example, you could find in the Web page this:
<FONT SIZE="x" COLOR="..."> The text of your choice followed by < /FONT>.
In your Web page, there is probably a part of the text that is of the right color whereas the rest isn't. To change the situation:
From the View menu, select the option Source codes.
Find the part of your text among that the color or the text is not what would want.
Just in front, you should find the <FONT> command with the good options. You have two choices: to copy the good code in the new location or to move the command(order) < /FONT> farther in the text.