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.
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 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.
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.
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.
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.
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.
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 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").
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.
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.
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.
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.
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.
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.
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.
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.
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.
button.
.
button.
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. 
button.
button.
button.
