Tutorial: Uploading Web Sites Using WS_FTP LE

Introduction

Note:  This tutorial is written specifically for students in the Contra Costa ROP Web Design Program. If you have already reviewed this tutorial, you can read the "short" version for specific instructions on how to FTP.  

In order to publish web sites and projects on the Internet you must establish an account with a web host. If you are looking for a free web host, check this page.   When you sign up for a host be sure to write down or print out the following information:  host name/address, user name, password, and any other special instructions on ftp/uploading files. While you are enrolled in the program your instructor will provide you with free web hosting. Visit http://www.robinshosting.com and sign up for a free 'Student' hosting account. Once your signup is completed you will receive a welcome email with account details; be sure to save this email.

Answers to common hosting questions can be found at http://www.robinshosting.com/faq.html.

Definition of Terms

Local - Local refers to the computer that you are working on. In our classroom local also includes your network folder (PM directory). Think of local as the computers that are in the same room that you are in.

Remote - Remote refers to the remote computer that you will upload your files to. This is usually a computer that is in a different room, building, city, or even state. Typically small businesses and individuals use a web hosting service to store their files on. In this example the remote computer is the robinshosting.com server whis is located in Ohio (now that's remote).

Host - The organization that maintains the servers that store and display your web site. Click this link for a definition of hosting. You may choose to have several hosts depending upon your needs or your client's needs. For additional information on selecting the right host for your needs visit my hosting resources page.

Web Site File Management

When you first begin a web project you should create a new folder on your hard drive (or on the network drive, F:\, when you are in the classroom) that will hold all of the necessary files for your site. This folder should be created before you begin a web site. This site folder will contain all of the html, css, jpeg, gif, and other web documents that are used on your site. This folder is typically referred to as your local folder. The html folder in drive F:\ is the local folder for this project.

To the left is a screen capture of the remote folder structure. This site contains the completed class projects. Typically the files that are stored on the web are stored said to be stored in the Remote Host Directory or Remote Site.

The public_html folder is called a host directory. This is where you will store all of your site files on the robinshosting.com server. When a user types in your web address http://yourusername.robinshosting.com the contents of the public_html folder will display. You will not find the public_html folder on the hard drive of your computer unless you have installed server software. This folder is found when you connect to a web host using FTP software.

Inside the public_html folder there are sub folders for each course of study and an index.html file. The index.html (or .htm) file acts as the welcome page. The index.html or .htm file also prevents the directory display when a visitor types in your web address. The site.css file contains the CSS for the index.html file and the images folder contains the images for the page.

The public_html folder also contains sub folders. These sub folders help to organize your web site's content.

1. drm - Dreamweaver lessons
2. flash - Flash lessons
3. html - HTML lessons
4. images - images used on the front page of the site
5. mollydog - Photoshop project
6. newland - PHP Project
7. index.htm - the front page of the site

Notice that there are also sub folders and an index.html file within the html folder. This page is the welcome page for the HTML assignments and contains links to all of the case problems for the XHTML book. If this page was named something other than index.html (or index.htm) a list of the html folder contents would display when a visitor typed the URL http://robin.robinshosting.com/html.

Take a look at the web address to the html homework page:

The above address is made up of several parts:

http://robin.robinshosting.com is the domain or root (top level) web address; this is a pointer to the public_html folder. html is a sub folder inside the public_html folder. Because there is an index.html file in the html folder the site visitor does not need to type the actual page name in the address bar. When the user types http://robin.robinshosting.com/home the server automatically looks for and sends the index.html file to the visitor's browser.

Creating folders for each project you work on each section of your site makes it much easier to find and manage files. I would strongly recommend that you develop good file management skills. For additional information on file management, review this class handout.

More About the public_html Directory

A hosting company has multiple clients that are served on a single computer or web server. Many hosting companies use Unix based servers. These servers have special server software installed to manage web sites. When you sign up with a web host your account is created on the server and a "home directory" is also created for your account. This home directory is very similar to the user directory you are assigned in class (PM or TAM directory). The home directory is where all of your web files are stored. Your home directory path on a Unix system may look something like this:

/home/username/

The first forward slash "/" indicates the server root. Each forward slash "/" in the path indicates a subdirectory. 'home' is a subdirectory of the server root, all user folders are stored in the 'home' sub directory. 'username' is your own personal folder; files and folders for email, statistics, ftp, and other server functions are stored in this folder. When you connect to the ftp server the username and password tells the server which 'home directory' to connect to.

The 'username' folder also contains a special folder called public_html (this folder may be called www on some servers). The public_html directory is where you must store all of your files. If you upload your HTML files to your 'home directory' (/home/username) they will not be visible on the web. Your site's URL (http://yourusername.robinshosting.com) is a pointer to the folder /home/username/public_html on the web server.

Create Site Folders

Before you begin this section, watch the Flash Movie, Manage Files Online. When the movie is done return to this page.

You will need to create a folder on the remote server (web host) to store your files. This can be done using your CPanel account @ http://yourusername.robinshosting.com/cpanel.

After you log in to CPanel, click the File Manager icon.

All HTML files must be stored in the public_html folder. Click the folder next to public_html (don't click the link).

Click the Create New Folder link.

On the top, right-hand side of the browser window you should see a box that says Create a directory in...  Type html (or whatever folder name you would like to create) in the box and click Create.

You now have a remote folder setup on the server that you can useto store your HTML work. The path to this folder is public_html/html (Note: you do not use home/username in the path). Close the File Manager and CPanel.

You can learn more about Cpanel's File Manager @ LiveRack.

What is FTP and WS_FTP LE?

The method used to upload files is called FTP or File Transfer Protocol. There are several different FTP programs available. Some HTML editors, like Dreamweaver and FrontPage, have FTP software built into the program, others do not. A popular program used to FTP files is called WS_FTP. There is a free version of this program called WS_FTP LE which we will be using in this tutorial. You can download WS_FTP LE at home by visiting ftp_planet.com and completing the eligibility form (indicate that you are a student).

Hosting for Class Projects

I will host your web sites for free for the duration of your course at robinshosting.com. Once you complete the course you can either upgrade to paid hosting with me or move your sites to another hosting provider. Students in the program will have 125MB of space to test and display their web pages.  Students will also be able to test the following web technologies:  PHP, MySQL, Perl, CPanel, and Fantastico.  The accounts also offer e-mail accounts, FTP access, and web statistics.  The accounts are free to students in our program. 

It is my hope that when students graduate from the web design class and get great jobs, they will give back to our community hosting by paying for monthly hosting services, thus enabling future developers to benefit from our free services.

If you already have space on a web host (Comcast, AOL, etc.), feel free to use that space to upload your projects (I will not support these services). You may want to check with your existing host to see if PHP and MySQL are available since support for these technologies will be necessary as you progress through the course.

Setting Up a Hosting Account

The first step in uploading your HTML files is to create a free web hosting account.  If you have your own server space that you would like to use, you do not have to setup an account. 

When you are ready to create an account visit http://www.robinshosting.com. Read the information on the site and sign up for a free Student plan.

After signing up for an account I will approve the account. You should receive an email verifying that your account has been setup within 48 hours.

Your new web address will be http://yourusername.robinshosting.com. If you try to view your new site you will only see a directory of files.

Creating an Index Page

After setting up your account, you must create a web page using HomeSite that links to all of the Case problems you created in the HTML book. The page that you create is called an index page (sometimes this is referred to as the home page).  Here is an example of an index page http://robin.robinshosting.com/html/ that I created.  Notice that this page contains links to all of the case problems.

Page Design

The design of the index page is up to you (graphics, colors, fonts, etc.), although most students use a table layout to organize their index page.   The page must include links to all of the HTML Case assignments that you are required to submit (see HTML assignment sheet) and it should follow the design practices you learned in the Web Design Workshop and Non-Designer's Web books (additional design resources can be found here).  

Keep in mind that this page will eventually be a part of your portfolio, so design to impress!  I recommend that you use CSS to control the style of the page (fonts, colors, etc.). If you would like to see samples of previous student's index pages, click here (please remember that you have not completed all of the web design units; you should not try to create entire portfolio sites at this time).

Naming the Page (Saving the Page)

The page that you create must be named/saved as index.htm or index.html. The page must be saved inside your htmlxhtml folder. All associated images should be saved in the htmlxhtml folder also. Do not create a subfolder inside your htmlxhtml folder for this page. You must name the file index in order to automatically display your web page when a user types in your web address, i.e. http://robin.robinshosting.com/html/.  If the page is not named index.html all you will see is a list of files when you attempt to view the page. Click this link to see what I mean. The server looks for a file called index.htm and if it doesn't find one it simply displays all of the files and folders that it finds.

Creating Links

The trickiest part of creating your index page is creating the links.  The href tag must include the folder name and the name of the file that you are linking to. I used the following code to link to Tutorial 1, Case 1:

<a href="tutorial01/case1/child.htm">ChildLink Inc.</a>

Again, the index.htm file must be saved inside your htmlxhtml folder to make this relative link work. You might find it helpful to study the HTML source code (especially the links) that I created.  To view the source code, click this link and select View > Source from the menu in Internet Explorer.  You will then be able to read all of my HTML code. 

Be sure to test the links in Internet Explorer before you upload to robinshosting.com.

Clean Up the htmlxhtml Folder

Before uploading, make sure that your files are all lowercase, and contain no spaces or illegal characters. Servers are case sensitive, so Child.htm and child.htm are consider two different files. If you link to child.html in your source code, but the file name is Child.htm your link will not work.

Helpful Tutorials

After creating your index page and setting up your account, you are ready to FTP (File Transfer Protocol) your files.  Read a Beginner's Guide to FTP and complete the WS_FTP LE Interactive Transfer Tutorial before you proceed.

Using WS_FTP LE to Upload Your Web Pages

Depending on the web host that you are using, your individual settings for WS_FTP LE may be different from those demonstrated on this tutorial. 

Once the index.htm page is complete and you have cleaned up your htmlxml folder, it is time to upload it and all of your homework assignments to your web space. 

Starting WS_FTP LE

On your computer, click Start > Programs > Web Design > WS_FTP > WS_FTP95LE to start WS_FTP.

Setting up WS_FTP

When you start WS_FTP LE the Session Properties dialog box will display. This window is used to configure WS_FTP to connect to the remote server. Click the New button to create your own profile. 

In the Profile Name box type Yourname Account

In the Host Name/Address box type username.robinshosting.com
(note: this address will change depending upon the web host that you are using.  If you are using a different web host, you must go to their web site and look for information on FTP or uploading your files).

In the Host Type drop down box select Automatic detect

In the User ID box type your username

In the Password box type your password

Click the Startup tab

You should setup your FTP program to connect to the public_html/html directory automatically. You do this by specifying the Initial Remote Site Folder on the Startup tab of the WS_FTP Session Properties. In the Initial Remote Site Folder box type public_htm/html.

When you type public_html/html in the Initial Remote Site Folder Startup Properties WS_FTP will first connect to your 'home directory' then it will automatically open the public_html, then open the html folder each time you connect to your site. By completing the Initial Remote Site Folder options you will not have to open these folders every time you want to upload your files.

Again, these settings will change depending on the host that you are connecting to.

Connecting to robinshosting.com

After you setup the session properties, click OK.

WS_FTP will now attempt to connect to the robinshosting.com server. The bottom of the WS_FTP screen will show the progress of your connection. Note the 226 Transfer complete message below. This indicates that you are connected to the remote server.

Click the image to the right to see a larger view of the WS_FTP LE screen  After the connection has been made the WS_FTP upload screen will display. The left-hand side of the screen displays files that are stored on the hard drive of your machine or local system. The right hand side of the screen displays files that are stored on the server or remote system. Currently the remote folder will be empty because you have not uploaded yet.

Uploading Files

Checking Your Web Site

Now you are ready to check your web site.  Open Internet Explorer and in the Address box type your URL (http://username.robinshosting.com/html) and press Enter.  Your index.htm file should display and you should be able to check to see if your links work.  

Troubleshooting

Your index.htm file does not display when you check your web site - Connect to the remote server in WS_FTP. Double click the html folder. is the index.htm file in the html folder?  If not, upload the file again.  Make sure that the file is named index.htm and that it is not stored inside one of your tutorial folders.

Your links display File Not Found Errors - In Internet Explorer click View > Source.  Connect to the remote server, make sure that all of the files have been uploaded. If the files are uploaded, check the HTML code and make sure that your <a href> tags have the correct URL (folder path). Make sure that the path to the file in the anchor tag has the correct casing.   If you find errors, you will need to rename the files, correct your links, and upload the files again.

Your pictures do not display - Make sure that your <img src> tag has the correct path (folder location). Check to be sure that the folder and the image file have been uploaded to the server. Check to be sure that the casing (capital vs. lowercase letters) in the source code matches the case of the file name.

Next Steps

Use these FTP instructions for the remainder of your projects.

On Your Own

The index.htm Page in public_html

When a user types in a domain name (http://www.robinshosting.com) a request is made to the server; the server then looks for a file called index.htm or index.html in the public_html directory and displays the index file in the user's browser. If the server doesn't find the index.htm file it displays a list of the files and folders that are stored in the public_html directory or a 404 file not found error page instead. If you would like to see an example of this visit http://robin.robinshosting.com/noindex/.

When you start to build your web site you will need to create and upload the index.htm file that the server uses to your public_html directory. This HTML/XHTML file acts as the welcome or home page of your site and should include links to the other pages in your site. The index page is important because it will display when someone types in your domain name. For example, if you look at my sample site @ http://robin.robinshosting.com you will see a page that links to the other sections of my site, this is my index page stored in the public_html folder of my site.

You will probably end up having multiple index.htm files in your site. Why you ask? Because when a user makes a request to a folder on your site the server opens the folder and looks for an index file. Again, if it can't find an index file it displays a list of the folder contents or a 404 file not found error. In the image to the right you can see the folder structure of this site; notice that each folder contains its own index file. The index.htm file prevents the display of the folder contents list and acts as the welcome page to section of a section of your site.

Currently when you view your main web site address, http://yourusername.robinshosting.com, a list of your site folders will display. Try creating a simple web page named index.html that has a link to your html/index.htm page. Here is a page that I created as a sample. Upload this page and any graphics or css files to the public_html folder.

I would recommend that you create a new folder in your pm directory called hosting index. Inside that folder create a new file called index.htm. Any images that you would like to display on that page should also be stored in the the hosting index folder. This new index.htm file should include a little information about yourself or maybe your resume or it can be as simple as the page I created.

This new index page should also include a link to your HTML homework page. This is the code that I used to link to my HTML index:

<a href="http://robin.robinshosting.com/html/index.html">HTML Homework Page</a> - This is called an absolute link, it includes the entire URL (including the http://) for the page that I am linking to.

A relative link could also be used:

<a href="html/index.html">HTML Homework Page</a> - This link includes the folder (html) that the page is located in and the file name (index.html)

Once the page is complete, upload the files to your public_html folder, do not upload the hosting index folder, only the contents. It must be uploaded to the root directory (put it into the public_html folder, not in a sub folder). If you use graphics, be sure to upload them also. I created a very basic page with just a link to my homework here.

As you progress to the training you can edit this page and add links to the rest of your homework assignments.