How To Learn About FTP (a Tutorial)

FTP (File Transfer Protocol) is mostly used to transfer (upload and download) files between your computer (local site) and FTP server (remote site/hostname).

Using a web browser for a FTP connection can be difficult to transfer large files and not secure. Therefore, we use a FTP Client, such as FileZilla freeware.

You will learn how to upload/download files to/from FTP server using FileZilla. In here, I use a free website called 000webhost.com with FTP support.

1. Sign Up in 000webhost.com

   Click Sign Up
   
   In Or, I will Choose your free subdomain section, type your site name (see red-rectangle in the screenshot below)

   Then fill out the form, and click Create My account button.

   

2. Installing FileZilla

   When setting up FileZilla, in Select Components to install section, check Desktop icon option to find it easier later (see red-rectangle in the screenshot below).

   

3. Setting up Site Manager
   • Click File menu, Set Manager
   • Click My Site folder (see pink-rectangle in the screenshot below)
   • Click New Site button (see blue-rectangle in the screenshot below), type your site title, for example, learnpiano (see green-rectangle in the screenshot below), press Enter
   • Then type your host, username, password based on email confirmation from 000webshost.com with subject "Account ..... (your site name) is ready".
   • Port: type 21 (the default for FTP is 21)
   • Server type: FTP – File Transfer Protocol
   • Logon type: Normal
   • To add another site: just click New Site button again and repeat previous steps.
   • Click OK button

   

4. Start Connecting to the Host
   • Click File menu, Site Manager
   • If you have more than one site, choose which site that you want to transfer to, for example, learnpiano (see green-rectangle in the screenshot above). If there is only one, it's chosen automatically.
   • Click Connect button (see red-rectangle in the screenshot above)
   • The status "Directory listing successful" (see pink-rectangle in the screenshot below) means, "You can transfer files now".

   

5. Open a web browser and type your site name. See the message in the screenshot (red-rectangle) below then back to FileZilla by clicking its taskbar button.

   

6. Delete a file or folder
   • You will delete file "default.php" from public_html folder in remote site.
   • Double-click public_html folder (see blue-rectangle in the screenshot below)

   

   • Click default.php (see pink-rectangle in the screenshot below), press Delete button.

   

   • To delete multiple files or folders: Select/highlight files for delete by using Shift+Click or Ctrl+Click then press Delete button.
7. Upload a File
   • Using 000webhost.com files must be uploaded to public_html folder. I assume you use HTML to create your website then your homepage must be named Index.html. So you have to upload it first.
   • Public_html folder has been selected before (see green-rectangle in the screenshot below)
   • Click local site folder, for example, learnpiano folder (see red-rectangle in the screenshot below).
   • Use vertical scroll bar to find index.html.
   • Right-click on Index.html (see blue-rectangle in the screenshot below), click Upload (see pink-rectangle in the screenshot below)
   • See the result in the screenshot (black-rectangle) below.

   

8. Create a New Subfolder in public_html folder
   • Using 000webhost.com, all subfolders must be created inside public_html folder. For example, you want to create picture subfolder.
   • Right click public_html folder (see blue-rectangle in the screenshot below)
   • Click Create Directory (see pink-rectangle in the screenshot below)

   
   
   

   • Please enter the name of the directory which should be created: for example, type picture (see red-rectangle in the screenshot below),
   • Click OK

   
   

9. Rename a file or folder
   • For example, rename picture subfolder to image subfolder .
   • Click picture subfolder , press F2 button, type new name: image (see red rectangle in the screenshot below).

   

10. Upload Multiple Files
    • For example, upload multiple files to Image subfolder.
    • Click Image subfolder (see red-rectangle in the screenshot below)
    • Select/highlight files for upload in the local site (see blue-rectangle in the screenshot below).
    • Right click on them, click Upload (see pink-rectangle in the screenshot below)

    

11. Writing HTML Format
    • If the files are uploaded to public_html folder:
      <a href="file_name.html">Next Page</a>
      <img src="image_name.jpg" alt="Image Name">
    • If the files are uploaded to subfolder public_html e.g. public_html/subfolder_name:
      <a href="subfolder_name/file_name.html">Next Page</a>
      <img src="subfolder_name/image_name.jpg" alt="Image Name">
12. Reupload file(s)
    • Do the same as you upload file(s), only in here, you will see the message "Target file already exists".
    • The default action is Overwrite (see red-rectangle in the screenshot below) and I prefer not to change it. Click OK
    • To cancel reupload, just click Cancel button.

    

13. Download File(s)
    • Do the same as you upload file(s), only in here, it's from remote site to local site.
    • Click local site folder that you want to put the download files, for example, learnpiano folder (see red-rectangle in the screenshot below).
    • In remote site, select/highlight file(s) for download (see blue-rectangle in the screenshot below).
    • Right-click on them, click Download (see pink-rectangle in the screenshot below).
    • See the result (brown-rectangle) in the screenshot below

    

14. Back to web browser. Press F5 button to refresh your site and it has displayed now.