Updating Your Existing Site (for Beginners)

By Michael Rodriguez
April, 2005
Part 1 of series of 3 tutorials

Purpose

The purpose of this tutorial is to make it easy for anybody with a desire to make simple changes to their site to do so, without the need or complication of the costly tools the pros use. I will put into good use the items that are already installed on your own computer and show you how easy it can be.

This tutorial is aimed at the individual who does not have any (or very little) prior experience with web development or the understanding of how the whole thing works. By the end of this first part of the tutorial, you should be able to download pages from your website, make minor changes, and upload them back to your site for the world to see.

What we're going to cover

In this article, I will cover the most basic of changes to your site: updates to text and image content.

Any good site on the internet (and hopefully yours as well) will have some sort of content available to your users. This is most likely text-based with an image thrown in here or there, and according to search engines (and almost every one of your visitors) the single most important part of your site. Without content, your site is just an empty shell and probably won't keep visitors around for very long. With relevant and frequently updated content, your site will attract more and more visitors searching for what you're talking about.

There are other type of content as well that we will not cover in the scope of this document, namely audio/video, PDFs, RSS feeds, Flash, and Shockwave. These types of content can add a lot of fun and depth to a site, but usually take an experienced web developer to create and modify. If you would like to learn how to develop these, there is a plethora of information available on the internet to help.

Determining what changes you want to make

Before we begin making updates to your site, you should first have a detailed idea of what text or images you would like to change or remove, and on what pages these changes will be made.

The most straight-forward way of doing this is to visit your site and print out the pages where you would like changes made. On the printout, mark your changes and keep them with you during the process.

You should also note the page's filename on which you wish to make the changes. This is NOT the same as the page's title, but is the actual file that we will access later on by a process called FTP. You can find the filename when visiting that page on your site by looking at the Address bar on your browser (i.e. http://www.mywebsitesname.net/flowers.html). The filename is what comes at the end of this address...in this case "flowers.html". If you don't see a filename (i.e. http://www.mywebsitesname.net/), you will be updating an Index file on your site which is most likely your homepage or an opening page in a deeper section within your site. This file is usually named "index.html" or a variation of (e.g. "index.htm", "index.php", or even "default.asp").

This page's filename appears in the Address bar at the top of the browser window.

Figure 1, Finding the page filename in the Address bar of your browser window.

Accessing the files on your site

Okay, so let's begin the fun part! You will now be directly accessing the files that make up your site. Once we connect, this may be the first time you've ever seen your site in this way (through the back door entrance) but don't let that intimidate you. As long as you follow these instructions carefully, you won't cause any harm to your site (although keep in mind that you will now have the potential to).

We will be connecting to your site with a method called FTP, or File Transfer Protocol. We will use a tool which you have probably already used many times to view your site, your Internet Explorer browser, but which contains this lesser known built-in ability to FTP. Please note that if you use Netscape, Firefox, Mozilla, or any other browser, take a moment and switch to Internet Explorer for this next task since it makes it much easier to connect.

Open your Internet Explorer browser, and type your website's address in the Address bar, preceded by "ftp://". In my case, I will be typing in the following: ftp://www.mywebsitesname.net. Then hit 'Enter' (or click 'Go').

If you typed the FTP address of your website correctly, you will be prompted with a login window which asks for a username and password.

A standard FTP login dialog from Internet Explorer.

Figure 2, Logging in to your site via FTP through your Internet Explorer.

If you don't have your FTP login information handy (and you probably don't if you've never done this before), you can obtain it from your hosting company. If you host with Adventure Hosting, you're lucky since you can obtain this information easily by logging in to your hosting Control Panel (after login, just click on Account Settings). Once you have your FTP login info, type it in and press "Log On".

Determine how your site is setup

When you first login via FTP to your site in Internet Explorer, you will see the contents of the highest level folder in your site structure, in other words the "top" of your site. Sometimes this contains the actual pages of your site (what your visitors access), but in most cases you will have to navigate further down to get there. If you host with Adventure Hosting, you will see 2 folders: one with the name of your site, and one which contains your site's log files (text records of every access to your site). For the purpose of this tutorial, just double-click the folder with the name of your site (i.e. 'mywebsitesname.net'). If you do not host with Adventure Hosting, the structure of your site might be slightly different. In this case, look for a folder named 'web', 'www' or 'html'.

Viewing folders after successful FTP login.

Figure 3, A successful login takes you to the "top level" of your website's files.

If you've accessed the correct root folder (the folder which contains the actual pages of your site), you should see the individual files and folders that make up your site's structure. Most likely you will see at least one folder that holds images in your site (e.g. 'images' or 'img'), and one file that marks the homepage of your site (e.g. "index.html", "index.htm", "index.php", or "default.asp").

Figure 4, Viewing inside the root folder of your site (note the homepage file 'index.html').

Take a moment to look at how your site is structured. In particular, look to see which folders contain what type of files. Double-click each to access the contents, and press 'Back' in your browser to return to the original folder. This is your site as how a web developer sees it. When you're finished looking around, go back to the main root folder of your site (as shown in Figure 4 above).

Download the file you want to edit

Before we can edit a page on your site, we need to take it from this FTP folder (which is housed on your hosting server) and put it on your local machine.

First, find the page by looking at the printout you made in the beginning of this tutorial and noting the address of the page. In my case, I am editing this page: http://www.mywebsitesname.net/flowers.html. By looking at this address, I can determine that the page I'm looking for is in the root folder, and is called "flowers.html". If your address contains folders, you will see something more like this: http://www.mywebsitesname.net/flowers/021505/flowers.html. This means that the page you're looking for is in the "021505" folder, which is in the "flowers" folder accessible from the root folder of your site.

Click as many (or as little) folders as you need to access the page you wish to edit. Once you see it, right-click the page and click "Copy" in the menu that pops up. Now minimize your browser window (and any other windows that you currently have open) and right-click your Desktop. Hit "Paste" in the menu that pops up. In a moment, Internet Explorer will make a copy of the page and place it on your Desktop. (Note: you can also copy and paste the page to ANY place you want on your local machine, not just the Desktop...it's up to you.)

Moving files between your FTP window and your computer.

Figure 5, Copy and paste the file(s) you need from the FTP folder to your Desktop.

TIP: If you ever want to make a full backup of your site, just "Copy" the root folder (i.e. 'mywebsitesname.net') and paste it to a local folder of your choice. This copy/paste might take some extra time, but having a full version of your site backed up on your own computer is well worth the wait.

Making the changes

For basic text changes, and for simple image changes, you already have a website editor built right in to your computer. On a PC, this program is called 'Notepad', on a Macintosh, use 'Simpletext'. These programs are very simple text editors which can edit any text-based document without leaving hidden characters (for formatting) in the file after it's finished. We will download a program in Part 2 designed specifically to edit HTML files which works better for more complicated updates.

In this tutorial, we will use Notepad to make the changes. Look back at your Desktop and right-click the file that we downloaded. Click 'Open As...' then click 'Choose Program�'. A box will pop up that lets us pick a specific program of our choosing to open this file with. Select 'Notepad' from the list, then click 'OK'.

Figure 6, This dialog appears in Windows XP after you click 'Open As' > 'Choose Program�'.

When the page opens, you will see the pieces of code that make up not only the content of the site, but the design elements and additional scripts that make the page functional and beautiful (hopefully). Don't be intimidated, since we really aren't here to mess with the code anyway.

What we are here to mess with is the content change you want made. Now's a good time to reference that printout from the beginning of this tutorial to see what you want changed.

Text changes

If it's a text-only change, just follow these steps:

With your text-editor of choice (we're using Notepad in the example), click 'Edit', then 'Find' at the top of the window to pull up the Find dialog box.

Figure 7, Accessing the 'Find' feature in Notepad.
Type in a word or phrase from the text you want changed. For this example, my Flowers page contains a misspelled word, "Tiawan" that I will correct now. In the Find dialog box, I type in the misspelled word and click the 'Find Next' button to find an occurrence of the word. This circumvents all the code and takes me straight to the word I need. If the Find feature took you to the wrong place, just hit 'Find Next' again until you find the right area.

Figure 8, The 'Find' dialog.
Now that you are at the place to make your change in the file, go ahead and make your text changes. Be careful not to make modifications to any HTML code so you don't mess up the look of your webpage. HTML code is easy to spot�the code is neatly packaged in brackets, "<" and ">", to form what are called tags. Don't change what's within these brackets, but instead focus on the text outside and you should be just fine.
Repeat steps 1 - 3 for each separate text change you need to make to the page.
When your changes are complete, click 'File', then 'Save' at the top of the window to save your changes to this page.

Image changes

If your change includes modifying an image in the content, just follow these steps:

Before you make a change to an image, it's a good idea to learn what it will look like in the HTML code. Images in HTML are labeled with the "img" tag which is enclosed in brackets, "<" and ">", and which contains the attributes of the image itself, including the source (the image filename), width and height in pixels, and "alt" (alternate) text for accessibility to those who choose not to or can't view your images for any reason. Here's what a regular image tag might look like in your page:

<img src="img/big_bird.jpg" width="100" height="200" alt="Here's a photo of Big Bird!">

Note that images on the web only come in a 3 different types: JPG (usually used for photos), GIF (for images with fewer colors like graphics or logos), and PNG (for higher quality images).
With your text-editor of choice (we're using Notepad in the example), click 'Edit', then 'Find' at the top of the window to pull up the Find dialog box.
Type in the filename (i.e. rhododendron.jpg) of the image you would like to change, then click the 'Find Next' button to get an occurrence of that filename. If there is only one occurrence of that image on the page, the first click will take you right where you need to be to make the change�otherwise, you might need to click again until you find the right spot to make your change.
Once you are at the right image tag, note where the current image is located by looking at the "src" attribute of the image tag. For example, if the "src" attribute says "img/big_bird.jpg ", then the image 'big_bird.jpg' is located within the 'img' folder on the server. Keep this folder in mind, since we will need to put our new image in that same folder if we are replacing this image.

Figure 9, Looking at the image SRC (source) attribute to determine its folder location.
We should now determine what change you would like to make:
1. If you are just changing the size of the image, you can edit the "width" and "height" numbers within the tag to your liking. These number are in pixels, which are the tiny little squares that make up your monitor's display�as a reference, consider that this letter "o" within the quotes is about 8 pixels wide and 10 pixels high.
2. If you are replacing the entire image, you will type in the filename of your new image in place of this existing image. Remember to change the width and height attributes to match the dimensions of your new image. This is most easily found by right-clicking the image on your computer, then clicking 'Properties', changing to the 'Summary' tab, then clicking the 'Advanced' button.
3. If you are removing the image, make sure to delete all the text within the brackets, "<" and ">", of the image tag including the brackets themselves.
Repeat steps 2 - 5 for each separate image change you need to make to the page.
When your changes are complete, click 'File', then 'Save' at the top of the window to save your changes to this page.

We're almost done...

Now that your changes are finished, all we have to do is put this file back up on the server so that all your visitors can see your update.

TIP: Before uploading your changes, it is a good idea to make a backup of the files you are about to overwrite. Take a moment to re-download the files you are about to overwrite and store them in a separate folder (maybe called Backup) to make sure you have a copy of the original. Then if anything goes wrong, you have a spare copy to get your site back to its old state.

We will perform the opposite of what we did the get the file on our computer before we edited it. Make sure to close your Notepad editing window since we're finished with that. Right-click the page you edited on your Desktop (or wherever you decided to place it) and click "Copy" in the menu that pops up.

Now bring your browser window back up that contained the FTP connection to your site. Right-click an empty area in the window where our file originally came from. Hit "Paste" in the menu that pops up, and click 'Yes' to acknowledge replacement of the file. In a moment, Internet Explorer will upload the page to your site.

Confirm file replace dialog in Internet Explorer

Figure 10, hit 'Yes' to confirm overwrite of the existing file with your newly updated file.

If your changes included replacing an image with a new one, you will need to copy that new image to the correct folder (i.e. "img" or "images") on the server now. Otherwise, instead of your visitors seeing your image, they will see a nice big "X" in its place.

Conclusion

That's it�you're all finished with your update. If you made it to this paragraph, you are now a full-fledged web developer (in training, of course). Hopefully you see how easy it is to make simple text and image changes to your site using programs that are already installed on your computer.

In Part 2 of the tutorial, we will add a whole new page to your site and modify your navigation to allow your visitors to access the new page. We will also download a program to help us with more complex changes to our pages which can make it easier to find what you're looking for in all that HTML code.


		Learning Tools \| About Us \| Hosting Plans \| FAQs \| Contact Us \| Legal Information \| Server Infrastructure

Business-Class Website Hosting