Website Coding

Connecting and FTPing to the Web Server

The process to transfer files from your local machine to the web server is done via a web protocol known as File
Transfer Protocol, or FTP. There are two components required for FTP:

1) FTP Software - Handles the communication between your local computer and the web server. There are
numerous utilities available to perform FTP. There are FTP utilities you can download, if you prefer, from
sites such as www.download.com (search for FTP utility). The tool we will use in class is a FileZilla, which is a
free, open-source application.

2) Web Server Login Information – Contains your unique FTP and web address (URL), username and password.
Check your NWTC email account for an email from your instructor containing your student login, password,
and web & FTP address information. If you do not have this information, contact the instructor.

Downloading FileZilla to your computer:

In the address line of your browser enter the following URL: http://filezilla-project.org/download.php?type=client

Select the proper link on this page, based upon the specifications of your computer. Depending upon your browser,
you may need to watch the top of your browser screen for a warning about files being downloaded to your
computer. Perform the necessary steps to allow the download to begin. Specify a location for the downloaded file
to be saved.

Once the download is complete, execute/open the downloaded file to begin installation of FileZilla to your local
computer. You will be prompted with several wizard-like screens; accept the default on all screens by selecting
“NEXT”.

Once you have FileZilla installed on your computer and your Web Server login information, you are ready to FTP!

Using FileZilla

Locate and open the FileZilla application.

FileZilla can be set-up a couple of different ways to connect to a web server: via the Site Manager or via a one-time
login process. For the purposes of this class, we will set it up using Site Manager.

When FileZilla opens, click on FileSite Manager. Click on “New Site”.

Page 1 of 6
It will create “New Site”. Rename the site to anything you can easily identify, such as “Web Coding Site”.

On the right side of the Site Manager screen, there are the 3 important pieces of data you need to supply the FTP
client to connect to the web server:

• Host
• User
• Password

Using the Web Server Login Information sent to you via email, enter the following information:

1) Enter “Web and FTP Address” into the Host text box
2) Change the Encryption to “Only use plain FTP”
3) Change the Logon Type to “Normal”
4) Enter “Student Login” into the User text box
5) “Student Password” into the Password text box (passwords are case-sensitive)
6) Click Connect

Page 2 of 6
 Once you successfully login to the web server, your screen will look like the following. Double-click the httpdocs
folder on the right.

Then, you are brought into the contents of the httpdocs folder. Folder and file names near the bottom may not
be the same.

Once you connect, the left column represents your local computer, and the right column represents the web server.

NOTE: if this is the first time you’ve logged onto the web server, you can select all files INSIDE the httpdocs folders
on the right side (on the web server). Right-click and choose delete. All files and folders that exist INSIDE the
httpdocs folder on the web server the first time you login can safely be deleted.

Page 3 of 6
To transfer your local files to the web server, there are a few steps:

1) Navigate to the file(s) or directory(s) you want to FTP to the web server.
a. On the left column of FileZilla, select the proper drive and folder that contains the folder you want
to copy to the web server. Make sure the “Local Site” lists the directory you want to copy from
(source).
b. This could be an entire directory/folder, multiple files, or a single file.
c. Highlight those folder(s) or file(s) you want to transfer. You can select multiples.
d. Make sure your folder or file names are lowercase and contain no special characters (underscores
“_” and dashes “-“ are acceptable).

2) Navigate to the web server directory in which you want to place your new/updated files or folders.
a. On the right column of FileZilla, your root directory is displayed (inside httpdocs folder). It is
advisable you create a folder for each lesson plan (lp_01, lp_02, etc…) in your root directory. This is
where all of your assignments will be submitted. You can create folders on the web server by right-
clicking and choosing “Create Directory”.
b. Make sure that “Remote Site” lists the directory that you want files/folders uploaded to.

3) Transfer files
a. Check Local Site and Remote Site to ensure they list the correct source (Local Site) and destination
(Remote Site) folders.
b. Copy/paste or drag/drop the files and folders you have been working with on your local computer to
your root directory server by first selecting the local copy of folders/files and dragging them to the
right column. Once you place your files on the web server in your root directory, you should see
them on the right column indicating that they are now on the web server. Once files are on the web
server, they are accessible on the Internet. Prior to this moment, your files were only accessible to
you on your local computer.

Ensure local and remote site directories are correct:

Page 4 of 6
 Transfer Complete: Files exist on the web server:

To access your files on the internet, you need the URL to the location of your file. For instance, if you save a file
named index.html in your root httpdocs directory, browse the page at:
http://studentname.bitweb1.nwtc.edu/index.html

Location of your file dictates the URL to access your page on the Internet
(exclude the “httpdocs” folder name since that IS your root):

Page 5 of 6
You can view the index.html page via the browser at http://studentname.bitweb1.nwtc.edu/index.html link:

Checking your new web page on the Internet:

Congratulations! You have just published your first web page to the Internet!

WEB SERVER WATCH-OUT

It is highly recommended after you FTP your assignments to the web server, you check and test them ON the web
server. Assuming that you are working on your assignments on your personal or school computers, and then, when
completed, you upload them to the web server, you might be surprised to find what worked on your computer
doesn't work on the web server! Sad, but true (and very real world!)

If this happens to you, then there’s one watch-out that exists on our class web server: the web server our class uses
is a UNIX, case-sensitive web server. What's the big deal? Well, take this as an example:

If you try to go to: http://kkrejcie.bitweb1.nwtc.edu/Index.html it won't work! However, if you go to:

So the good news to all this is that YOU can see what I see when I grade your assignments by reviewing them after
you upload your assignments. If you see issues, you should update the pages, and then re-upload them. To view
your own assignments go to your class website that was sent to you in an email for LP-04:
http://studentname.bitweb1.nwtc.edu

As always, if there are ANY questions on this topic, or any others, please don't hesitate to contact your instructor!

Page 6 of 6