Understanding and using FTP for basic tasks when maintaining and organizing your website is essential. And it’s pretty darn simple.

Why should I learn this FTP nonsense? Working with your site via FTP gives you direct access to what’s under the hood. You can keep your files neatly organized, make quick changes, overwrite existing files so you don’t need to change code, etc… Once you start to understand how FTP & your website works, you have the basic knowledge needed to take things to the next step.

And you can impress all your friends.

How Your Website Works

At the heart of every website is it’s files. While on your browser’s surface, you may jump from page to page, seeing text & images combine seamlessly, underneath everything it’s just a jumble of files. Using HTML, CSS, PHP and all sorts of other crazy letter combinations, these files talk to one another. They figure out amongst themselves how to render into a web page and appear as a cohesive unit.

But just below the surface, you can see these files at work. For instance, right click (or command + click for Macs) on my banner at the top of this page and click “view image.” You’ll see that that image – and that image alone – appears in your browser. You may also notice that the URL in your browser has changed to the specific URL for that image. It’s just a file in a folder in my website. So how did that image get there? How did it get its own URL? How does it get accessed by the other files?

Understanding how these files are organized can be understood by checking out the file manager of your own computer (image above). First, you’ve got a hard drive, then inside your hard drive there are many folders to organize parts of your machine at a very high level, inside those folders are more folders, and inside those folders are files, programs, and applications. At each level, the organization becomes more precise.

Your website’s file organization works exactly the same way. There are top level folders (or directories), then folders inside those folders, and then images & files of all different types within those. Wanna see?

Each file & folder corresponds to a unique url. Everytime you see a “/example/” you can rest assured that “example” is a folder.

http://exampledomain.com/folder/folder/file.html

Accessing those bad boys.

Feel better? I hope so. So how do all those files & folders get there?

First, let’s get connected to your web host‘s server using a FTP client. As I said in my tutorial on backing up your WordPress website, I use Fetch (exclusively for Mac) but there are plenty of other great free or low cost apps out there.

You’ll need some information from your web host: the host name you’re connecting to, the username you need to access it, and your password. Sometimes, this is as simple as your domain name & the information you use to log into your web host with. Other times, it’s a bit more complicated. Your web host should have this information easily available for you – just search for information on how to connect via FTP (example images below).

Back to those pesky files & folders and how they got there.

If you’re using a piece of software like WordPress (don’t forget to get on the list for the early scoop on my Website Kick Start ecourse!), those files & folders are created when you install the software to your web host’s server. If you’re using an application like Dreamweaver to build your website, then the application actually connects with your web host’s server using FTP to upload the appropriate files & folders that you’re creating visually. Either way, you don’t have to stop there.

When I’m creating a website using WordPress, I let WP do its thang creating the core files & folders. Then I create extra folders to store my auxiliary files (images, downloads, etc…) to keep my site neat & tidy – to the surprise of my husband. It goes a little something like this:

• To create a folder, hit “New Folder” – most likely a large button on the main screen of your FTP client.
• To add a file to that folder, simply click on the folder to open it (as you would on your computer’s file manager).
• Then hit “Put” or “Upload” to open your local file manager to select the file. Select your file from your hard drive and save it to the site.
• You can now access that file at it’s unique URL or call it your code.

Some Cautions

Working with your site using FTP is quite a blessing. You can do all sorts of things (like moving your entire website) very very quickly. It’s great for keeping things organized and easy to access.

But it’s also just a little dangerous. You are working with the actual files on your actual site. If you delete one, it’s gone. If you upload a file with the same file name as one on your site, you overwrite it (this is actually handy most of the time!). If you drag & drop something into a different part of the site, its location changes.

When working with your site using FTP, be mindful of what you’re doing. Double-check your work as you go. Always be aware of what folder you’re in and what files you’re working with.

And always, back up your site.

If you find this nifty little piece of tech helpful, don’t forget to sign up to get the first notice of my Website Kick Start ecourse. We’ll be building a WordPress website from start to finish, learning how to import your existing content, and filling in informational pages. You’ll also learn my tips & tricks for styling your site & improving your conversions. It’s likely to sell out (I can only take so many students!) and you’ll get a pretty great discount for being the first to know, too!

Who: For anybody you’d like to know more about moving their blog or website to WordPress. By me! And Candy, from Candied Fabrics, and Justine, from Justine Smith Media, will be giving me a hand!

Where: Ustream. Hint: go to Ustream now and register a username so that you can chat with us & ask questions! Don’t forget to login before you enter the chat room.

What: A basic video Q&A about installing WordPress, adding a theme, transferring a blog (specifically Blogger), and adding a bit of functionality & fun.

How to prepare: While some of this conversation could be applied to the WordPress.com blog community, it is meant for those wanting to run open-source WordPress software on their existing web hosting. If you need to purchase web hosting, I highly recommend choosing a web host that offers unlimited hosting and uses the cPanel interface. Have no idea what I’m talking about? That’s cool. I highly recommend:

(Note: That’s an affiliate link – it means I earn a commission if you sign up with them. But it also defrays the cost of the time for this chat!)

Web hosting is the service that holds your files for your website, keeps them available 24/7 worldwide, and runs the software you need to keep your website operational. A good web hosting company can answer questions about almost anything website management related.

And, in a chicken & the egg kind of moment, you’ll need a domain name. Which comes first doesn’t really matter – just so you have both.

I will talk very briefly about installing WordPress. But a good web host should have a “one-click install” for the software meaning you set up a username & password with your host and they’ll set up your initial WordPress blog! Score. Look around your web host, find the button and push it. It will save us a bit of time!

Completely new to WordPress? Been putzing about but still have questions? Considering making the switch? Log your question in the comments below so that I can add them to my list.

PS Yes, the video will be recorded and I’ll do my best to have a transcript of the chat available as well. That will be available shortly after the chat. Want to make sure you get it? Sign-up below to receive this blog’s updates via email. You’ll be glad you did!

You asked for it! Basics. I’m going to *attempt* to teach you a few things via video tutorial. This is my very first attempt and I know it needs work – but I also know you need this information!

Fair warning, you’ll need to turn your speakers up.

In this short slideshow, you’ll learn the basic parts of linking & displaying an image – visually.

I’ll be working on more installments soon!

Updated! March 11, 2010

Here’s a second look at the code so that you can reference the structure easily.

How can you use your new knowledge? Great question!

• Edit your images within blog posts to specify “titles” and “alt” text. Simply click “HTML editor” or “Code Editor” on your blog platform’s post editor. Then look for the code that looks like what’s above. Hint: It’s the stuff that’s not the text of your post
• Create “buttons” in your sidebar with images. You’ll want to use a “text widget” in WordPress or other generic widget in your own blog platform. You’ll need to write the code by yourself – but you can do it!

Want an opportunity to play & practice? My very favorite place to learn about & mess with code is on the W3 Schools site. Hey, people, they literally wrote the book on this – they invented it. To practice with image code, go here.