Downloading Files ("How do I save something of off the Internet?")

FTP stands for File Transfer Protocol and this is exactly what it does. It provides a means to tranfer files from the computer you are on to another computer. Specifically for this class, we will be using FTP to transfer pictures and webpage files to and from your home computer (or the lab computer or wherever you are working) to the grove computer system ie your account. The first part of this page describes saving a picture from a webpage to a disk, then how to transfer that file to your grove account. You would transfer any other file in the same way once it is on disk. These instructions use the floppy disk as it allows us to make the instructions very specific. If you use the main hard drive (c:) of you system that is fine also, you will just need to remember what directory you saved the files to so that you can find them again.

You will need a 3.5 inch disk and know which drive it is in, probably [A:]. Search the Internet for a site that has free pictures or images you would like to have on your web page ( Type into your favorite browser or search engine: pictures or clipart) It is a good idea not to have many large, detailed pictures on your page as that will extend the amount of time required for it to load. Keep track of the url and the name of the person, corporation or entity (web site) to whom the pictures belong to. It is useful to have this information in case some one objects to the pictures on your home page citing copyright violations. Move the cursor over the image. Right click the mouse. Click

"Save Picture As..."
which brings up a box similar to the picture below (all our pictures are from Netscape 4.7, other versions and IE will look slightly different, idea is the same):

If the "Save as type" box has something other then GIF or Jpeg (as long as one of those words is in there you should be okay) then find another picture (specifically, if the File type says something about "art" or "bmp" then the picture won't work). if you have a file that is not either a GIF or a JPG (jpeg) it is easiest to find another picture though you can use Microsoft Photo Editor (which comes with Windows) to change it (open up the picture, choose file, save as, and change to type to GIF or JPG). NOTE: if the file is not GIF or JPG you can not simply rename the file or change the extention to GIF to make it work.

Once you have found a suitable picture, indicate that you want to save it to disk by cliking the drop down arrow near the top and selecting 3 1/2 Floppy (A:).

In the "File Name:" box (in the example it says wavy_line.gif), name the file something you will remember and don't change the extension (letters after the period) if there is one. If the picture file name has a space(s) in it, remove it(them) as it(they) will cause problems later on (you can either delete the space or put something else like a - there instead). Save and remember its name including what type of file it is i.e *.jpg, *.gif(as far as our homework is concerned, do NOT save .bmp or .art files).

You now have a picture saved, and you are ready to use FTP to put it into your class account.

Now for the FTP part itself

The FTP program we suggest using is WS_FTP as it is one of the easiest to use and programs, it is free (student edition), and it is widely available. It may be called WS_FTP95 LE or something similar on the lab computers. The different versions should work the same way. You can get this FTP program from the UF software disk or CD, you can use it in the labs, or you can download the software from www.ws-ftp.com/downloads/index.html (click on "Try" for the WS_FTP Home version. After you fill out the form, you can download WS_FTP and also you can find a "Quick Start Guide" on how to use WS_FTP at the same page). If you would like to use a different FTP program, you are welcome to, but we won't be able to help you with it.

When you first start FTP, the first thing you will see is a window called "Sessions Properties".This is where you tell WS_FTP what computer you want to connect to, your username, and your password. The screen will come up in the "General" section tab. This is all you need to configure, so don't worry about "Startup", "Advanced", or "Firewall." (again, you can if you want, but you are on your own). If the blanks are already filled in then hit the button marked new towards the right.

In the "General" section, configure in the following way: Profile Name: ftp Host Name/Address: grove.ufl.edu Host Type: Automatic detect(probably this already) User ID: c3063***(your user name) Profile name can be anything you want. It is the name WS_FTP will use to save your settings (if you are using this from home you won't have to type this stuff in again, you can just use the drop down arrow beside Profile Name: to select this one again). Host Name/Address must be exactly as show. The User ID should be the username of your grove account for this class (in the picture example we used c3063iwb).

Don't worry about filling in "Password"; you will be prompted for it. However, if you are working from home you can fill out the password box and check the "Save Pwd" box so that you won't have to type this in again (don't do this on lab computers as it could allow someone else access to your files). Don't fill in anything for "Account" or "Comment" either. Also, make sure that the "Anonymous" and "Save Pwd" boxes are not checked.

Click "OK once you have filled in the above information." Enter your password when prompted.

You will then see the main screen The files listed in the pictures may not be exactly what you seen on your account as you may have different files then we did.

The FTP window will be divided into two sections. The section on the right is the remote system, which is your class account. Towards the top of the right side you should see something like /u/some stuff/cgs3063/c3063xxx where instead of xxx it will have your account (c3063iwb in our picture). Among other files, perhaps, there should be a folder icon for your public_html directory. Double click on this to open up the public_html directory. Notice that the box at the top now has something like /u/some stuff/cgs3063/c3063xxx/public_html. Now you should see a file listing for your web page files, including index.html. This is your web page that you've already made.

On the left side of the FTP window is the local system you are also working with. If you are in the C: drive and have a picture to use on a disk, you will need to change this parent directory. There should be a button to click on, "ChgDir" below the box indicating which drive is in use. (Careful! There is an identical button on the right side next to the remote system. You don't want to use that here.) Click on the correct one. When asked for the local directory, indicate the drive your disk is in. Most likely, you will type "a:". (If your drive is not "a", substitute for yours.) You should now see all the files listed on your disk, including your picture. You can also get to this list by double clicking the icon on the left that looks like [-a-] (the picture is blue) near the end of the list of files on the left side.

The screen should now look something like:

Again, the files listed in our example won't be the same ones as you have.

Now it's time to trasnsfer one of your pictures from your disk into your class account, specifically into your public_html directory. You will find "ASCII, Binary, Auto" options under the file listings, make sure to select the Binary option (though Auto should work, we have had problems with it). If you transfer the files with "ASCII" selected, your pictures will NOT work.

Single click on the name of your picture, listed on the local system (left) side of the FTP window. Next, click on the arrow in the middle of the window that is pointing to the remote system side. Once the computer finishes transfering, you should see the name of you picture file in your class account (the remote system). Congratulations! If everything went properly, your picture file should now be in your public_html directory along with your index.html file. (You can also, double click on the file to transfer it to the other side). Repeat this for each of your pictures files. You can also highlight multiple files at the same time in the usual Windows way which is to hold down the Control key while clicking on the files (you can also use the shift-click method by clicking once on the first file then holding down the shift key and left clicking on the last file; you will end up selecting all the files inbetween).

After doing this, you should see something like:

"Exit" out of FTP by clicking on the exit button.

You will notice other buttons around the FTP screen. In the file listings, you see the column headings of ^, Name, Date, and Size. If you click on one of these you will sort by that attribute (^ is to sort directories first or last) in ascending order, clicking on it again will reverse the order. WS_FTP defaults to sorting alphabetically with directories first.

You can put the pictures in another directory other then public_html, however, that directory must be inside public_html and you will have to change the references to that picture (ie the <img src="*****.***"> tag mentioned below) to tell the browser where to look. This is a general theme in webpages and UNIX (as well as Windows, DOS, Mac, etc). The browser is looking for the picture in the same place it found index.html, if it is not there you need to tell it where to look.

Putting the picture on your page
Now that you have a picture in your account to use, it's time to put it on your page. A full set of instructions for placement, i.e. centering, left, right, etc. can be found in the online tutorial, this is just a brief set of instructions. Right now, we're just going to put it on to make sure we can see it. Get back into editing your web page using the pico editor or whatever you used to make your web page. At some place in the body (between the <body> and </body> tags) of your page, type the following:
<IMG SRC="********.***">
where ** part in quotes is the name of your picture file. Be sure to include the type of file that it is, .jpg, .gif, etc. Your picture should now be visible on your web page. The name must be EXACTLY right, inlcuding the case of the letters. So for example, if your file was ftp2-main.gif then the line would be
<IMG SRC="ftp2-main.gif">
IMG and SRC can be upper or lower case so img Img IMG all work the same. However, using Ftp2-main.gif or ftp2_main.gif or ftp2-main.jpg won't work.

For more information on the html side of putting pictures on your page consult the HTML tutorial especially Quickread 6.