Lesson One: Creating Web Pages Using Microsoft Word

One easy way to create a simple web page is to use Microsoft Word. Start by creating a Word document. Any text, graphics, or hyperlinks that you insert into your Word document will be automatically converted to a web-compatible format by Word’s built in HTML translator. When the user saves a Word document as a web page, the program does the following:

• Translates text, layout, images, and formatting into HTML code
• Generates an XML style sheet that contains instructions for locating and displaying images and text within the web page
• Converts images to web-compatible GIF or JPG formats
• Creates a single HTML file
• Creates a folder that contains the XML file with display instructions and all the images used within the page display

Not all versions of Word have this capability. Be sure to check your installation and, if necessary, install this portion of the Word program.

Getting Started

Word offers a variety of options for creating new web pages.  The user can simply open and start a new blank document or a new blank web page, use a template, or use one of the Word wizards. Each option allows the user to add content such as images and text to a document that will be converted to HTML format.

To save the newly created document as a web page, go to File, Save As. Give the new web page a name that does not contain any spaces and is, preferably, eight characters or less in length.  Click the arrow next to Save as Type and change the type from Word document to Web Page (*htm,*html).

Word will automatically save the document in an HTML format and append the file extension .htm to the file name.  It will also create a folder with the same name as the file plus _files and will store an XML instruction file and all image files within this folder.  In other words, if I created a Word document and saved it as a web page, giving it the name jennifer, Word would create a file called jennifer.htm and a folder called jennifer_files.

To publish my new web page to the Internet and have it appear correctly, I would need to make sure the file jennifer.htm and the folder jennifer_files plus its contents were all present in my web server directory.

Example

I will create a very simple web page within Word by opening a blank document and adding my own content, then saving this as a web page. I start by clicking on File, New, Blank Document.

                                                                                                                                               

Once I have opened my new blank document, I can start typing in text or adding images. To add text, use the standard text formatting features found within the Word program.

 You can select a font face, size and color. Stick with a common font face such as Times New Roman, Verdana, Arial, Helvetica, etc. If you choose an esoteric font face and visitors to your web page do not have that font installed on their computer, the font face may default to something as plain as Courier.

I will start by adding a Headline to my new web page:

 

I can also add a text welcome:

From this point on, I can use Word to add and format whatever text I wish.  Once I have finished typing in my text or adding links or >adding images, I can save this Word file as a web page.

Saving Word Documents as Web Pages

To save my Word document as a web page, click on File, Save As, and select Save As Type: Web Page (*.htm, *.html) and give your web page file a short file name, preferably eight characters or less with no spaces or punctuation other than underscores or hyphens within the name. 

Once you save your file as a web page, Word will create a file with a file name extension of .htm and an accompanying folder with the same name as your web page file, appending _files to the folder name.  See the above example.

This folder contains a file with all the formatting instructions for the text and image layout on your new web page.  It also contains all the image files for images you may have inserted within your web page. You will need to move both the htm file and the folder and its contents to your web server space for your new web page to display and function correctly.

 

Lesson Two: How to Publish Your Web Page Using Yahoo/Geocities

If you don’t already have web server space to publish your web site, you may register for free or low-cost space at http://geocities.yahoo.com.

Once you have created your account, you can sign in by using your new ID and Password.

Once you log on, you will see a screen similar to this:

Click the File Manager link.

You will see a screen similar to the one displayed below:

Click Open File Manager link.

You will see a display that looks like this:

To move the Web files (such as resume.html) into your new web server space,

Click Upload Files. You will see a display similar to this:

Click the Browse button and pick the Web page file or files you wish to upload to your web space.  If you have any images in your Web page, you will also need to (1) create a subdirectory with the same name as the one Word created on your hard drive when you saved your Word document as a web page, (2) move all the files from your local folder into the new subdirectory you have just created up on Yahoo/Geocities.

If I have created a Word document called resume that contains images, when I save it as a web page, Word will create a folder called resume_files on my hard drive.  It will convert all clip art or inserted images in JPG or GIF files, then store them in the resume_files folder. It will also create one or two files with instructions about how to format and display the text and page for display. It will also create one file called resume.htm. This file will be saved outside of the new resume_files folder. 

To publish my new resume.htm web page to the Internet and have it display properly, I must first log onto Yahoo/Geocities, then use the File Manager to upload resume.htm. I must also create a new subdirectory called resume_files.

Start by clicking New under the Subdirectories folder:

Once you do this, you will see a screen that allows you to type in the name of your new subdirectory.  Be sure to type in the same name as the name used on your hard drive. The two names must be identical. Capitalization of any letters in the file and folder names must be identical.

Click Create Subdirectory to actually create your subdirectory.

Now you need to move the files from the subdirectory or folder Word created on your hard drive to the new subdirectory on Yahoo/Geocities.

For example, when I created the sample resume for these instructions, Word created resume.htm and resume_files on my hard drive:

I’ve moved resume.htm to Yahoo/Geocities. Now I need to move the files from the resume_files folder on my hard drive to the resume_files folder on Yahoo/Geocities. To do this, I click the resume_files folder on Yahoo/Geocities to open it up prior to uploading files.

Now I click Upload Files.

Again, I see a screen that allows me to browse my hard drive and locate the files I wish to upload.  If I need to upload more than 5 files at a time, I can change the number of files to upload as shown above.

Here are the files stored in the resume_files folder on my hard drive:

If I want my new resume web page to display correctly, I must upload each of the files in my resume_files folder to to the corresonding resume_files subdirectory on Yahoo/Geocities:

Once I click the Upload Files button, copies of my files are moved to the web server and the File Manager provides an on-screen report:

Notice that two of my files were rejected by the File Manager. We will have to see what impact that might have on my web page display. To upload more files, click the Upload More Files link.

Once I have finished uploading files, I click the File Manager link.

This returns me to the inside of my resume_files subdirectory. To view and test my web page, I must click the Up one level link to view and select my resume.htm file.

To view my new resume web page, I will click the View link.

Notice the red X in the upper left hand side of the screen where my image should appear.  To fix this, I must open the copy of resume.doc or resume.htm on my hard drive and replace that image with the GIF file, image002.gif which is stored in my resume_files folder. 

First I select and delete the original image in my resume document. Then I insert a new picture, this time choosing From File. I select the GIF file from the resume_files folder and insert it into my resume document.

Once I have done this, I now have a resume document that looks like this:

I click File, Save As, and select web page.

Now I can move the new resume.htm to Yahoo/Geocities and all the files from the resume_files folder to replace the files currently on Yahoo/Geocities. As I upload each file, it will overwrite and replace the original files.

Once I do this, I can view my new web page again:

Now the image shows up as intended. If I wanted to share the address of my new web page with others, I could copy and paste the address from the Address field of my browser:

-Shan