Steps in the project

  • Grabbing images
  • Writing the document and including images
  • Creating the web page
  • Uploading and mailing the web page

I decided to look at information about loans . . . what is available, what banks are on-line, what the pages look like, availability of on-line loan applications, etc.

Grabbing the images

I went to several sites and found some images I would like to include in my paper. When I found an image I wanted, I right-clicked the image with the mouse. A little pull-down menu came down and I clicked on “Save Picture as” which brought up the file menu and I could simply select Save, or I could choose to rename the file and save it under a different name. All of my graphic files are automatically saved in a folder called “My Pictures” but you could save them in a different location such as on your A-drive. The File Type should not be changed since it defines the type of image file (usually gif or jpeg).

Writing the document and including images

As I write the document I decide where I want the images to appear. For example, one of the pictures was of a house. In Word, I go to Insert, choose Picture, then click on From File. The file menu comes up and I select the disk location and file I want to insert in the document (the file that contains the graphic image), then click on Insert. The picture is inserted (but may not be inserted at the location I want, and occasionally I find it on some other page quite away from where I thought it would appear).

I may need to format the picture. First I click on it with the left mouse button and a 4-way arrow appears (which is the drag and drop indicator). I drag the picture to where I want it to appear in the document. I then right-click on the picture and select Format Picture. I skip the Colors and Lines tab, and the Size tab, and go to the Layout tab. Here I click on Square, and checked the Right box under Horizontal Alignment (though if I want it centered or left I would check those boxes).

The end result is the picture of a house.

This is the picture, right where I wanted it to appear. The picture may still jump around a bit, but I can use the left-mouse button and move the picture around. Also, I can left-click on the picture and grab one of the corners to change the picture size. I could also have changed the size by right-clicking, choosing Format Picture, selecting the Size tab, and specifying the picture size.

There is one little trick that I find useful. I always turn on paragraph and formatting marks so I can see what is happening to the document (it is the paragraph mark ¶ you see on the Word toolbar).

If you click on the picture, you will notice an anchor symbol appearing at one end of a line of text (or near one of the paragraph marks). This is the anchor for the picture, so if you move that anchor/paragraph mark by adding lines before it, the picture will move. If you add lines after the anchor/paragraph mark, the picture will stay in the same location. As the anchor/paragraph mark moves, so will the picture. In fact, you can cut/paste the paragraph mark, and the picture will move . . . it is tied to the paragraph mark. If you delete the anchor/paragraph mark, the picture will disappear. You can also move the anchor itself . . . attaching it to a different paragraph mark. That is occasionally useful if you want to shift the text without shifting the picture.

Just for fun, I decided to add a second picture and place it on the left. When I first did this the picture jumped to the top of the first page. I had to grab it and move it down to the next page. Even now I’m finding it jumping around a bit. It is moving because as I write this and add lines to this paragraph, the picture continues to move down.

The interesting thing about this picture is that it is based on three different images and each one shows for a few seconds. This is called an animated gif.

Creating the web page

Now it’s time to create the web page or HTML document. In Word, simply go to File and select Save As Web Page.

I discovered a few problems and cautions at this stage of the process. HTML is not as versatile as Word, so some things you format in Word won’t translate properly.

First, pictures must be left or right justified. I had created a situation where there were two pictures side by side, with text flowing between the pictures. It didn’t work. You can have two pictures side by side, and they can be offset (one higher than the other), but the text cannot be allowed to flow between the two pictures. Any text must be completely to the right (of a left justified picture) or to the left (of a right justified picture).

Second, I realized that HTML doesn’t need to use page boundaries. I had several situations where I had to use a lot of paragraph marks to move a picture to the next page. That left a lot of blank space in the document. However, all I had to do was insert a page break and start a new page immediately. In HTML, these page breaks did not show up as blank lines, and the text and pictures flowed nicely.

Third, it I had moved a picture slightly up or down, Word lost track of the information that the picture was actually left or right justified. The last thing I needed to do before writing the HTML output was to click on each picture and reformat it to be left or right justified. That simply avoided getting any error messages from the HTML conversion process.

I found that using 12-point Arial type converted to a very large type size in the HTML document. It just didn’t look right (too overpowering). I changed to a smaller type and it looked better. Also, the HTML type size didn’t exactly match the Word type size, so paragraph flow was different in the Word and HTML documents. That explains some of the differences between these two forms of the document/project.

When I created the HTML document called “Steps in the project” (which was the name I assigned to the Word document), a subdirectory was created called “Steps in the project files.” This subdirectory contains all of the image files.

I’m sure there are other oddities . . . I just didn’t find them all. After you create the HTML code, bring up Internet Explorer and see what the HTML document looks like. You should scan it and make sure it looks as close to the original document as possible, and that there aren’t any anomalies. You will have to tweak the layout. I found myself slightly increasing/decreasing the size of pictures, adding/deleting paragraph marks, moving the anchors around, and other tricks to get the HTML page to look right. Proof read carefully.

By the way, save the Word document as well as saving the Web page. You will have to use the Save As command to insure that both the Word and the HTML documents are saved. Once you use Save as Web Page, all further saves assume you are saving the HTML version. You must use Save As and specify the Word document format to save the Word version.

Uploading and mailing the web page

I originally said you could email your paper to me, but that won’t be easy to implement. Remember that when you save your paper as an HTML document, it also creates a sub-directory of graphic files. It is quite easy to transfer both the HTML document and the graphic subdirectory to the server that has your account, but emailing those files to me is difficult. The problem is that Pine requires you to list each file separately . . . you can’t email an entire subdirectory with a single command. The real problem comes on the receive side . . . I would need to recreate that graphic subdirectory for each paper sent to me. The only reasonable solution is for you to create your own home page directory on the server.

Creating a home page is very easy . . . just one simple command. You can go to A Step-by-Step Guide to Making Your Home Page for a complete listing of the steps, but basically you can use any terminal program to log on to the machine where you have an account (typically the machine where you have your email account such as ucsu or ucsub). When you get the machine prompt, type the command mkhomepage. For example,

ucsub> mkhomepage

This command creates a subdirectory named public_html, where you can create and store any files you want to publish on the Web.

You really don’t have to do anything else. The system will come back and give you the address of your home page. It also creates a simple home page for you, so you could use Netscape or Internet Explorer and see what your home page looks like. That is all irrelevant since all you need for this class project is to have created the space called public_html. That is where you will upload your HTML document/paper and the subdirectory containing the pictures.

By the way, you might want to look at for more information on what you can do with computing, resources available, classes, etc.

My assumption is that the computers in the lab have WS_FTP LE as the program for transferring files. If you would like to download this program and install it on your own machine, you can go to ftp://ftp.colorado.edu/cns/pc/Win95/Internet/ using your web browser. If you are looking for other software available from the CU system you can go to

Anyway, assume you have created your HTML document and associated directory of graphic images by choosing Save as Web Page from the File menu in Word. You then need to start WS_FTP and log onto the system. Here I show my logon to Spot. It has the host name (yours might be ucsub.colorado.edu), my User ID (my logon name) and my password. I could also indicate the initial directory on the host (which would be public_html) and on my local machine (which tonight is my zip drive, but I haven’t changed that in this illustration).

This shows the initial WS_FTP screen. Note that my E-drive is the local system directory (that’s the zip drive that I use to carry information between my work computer and my home computer). It shows /home2/rtaylor as the remote system directory (this automatically shows up . . . it is the default remote directory for me).

What I want to do is transfer the file StepsInTheProject.htm (the HTML document) and the directory StepsInTheProject_files (the image files that go with the document), both to the directory public_html on the remote system.

The first thing I’ll do is double click on the public_html folder on the Remote System side, making it the working directory. Then I’ll single click on the file StepsInTheProject.htm and click on the right arrow in the middle of the window. That will transfer the HTML document to the server. Then I’ll single click on the StepsInTheProject_files directory and click on the right arrow in the middle of the window. It will ask if I want to transfer the directory and I answer yes. That will transfer the image files to the server.

That’s it . . . you’re done. You should be able to send me an address such as and that page will come up. All you need to do is email the address to me and I can check the page.

Of course, your project name will be something other than the one I use (StepsInTheProject). Your title should be representative of the topic of your paper. Also, note that I have not left any spaces in my project name. While you can use spaces in Windows file names, you should not leave spaces on files you upload to the server. Either pack the name together, or use the underscore character in place of spaces.

I may add to or change this document if I think of anything else. If you find anything unclear, or find something I have left out, let me know by email to rtaylor or just tell me in class.