HTML Editing Basics

I got an email recently from someone asking for (free) advice on how to manage their Web site that someone had built for them. Here’s my response:

I’ll try to offer some basics to get you started — of course, this is an overview, and you’ll have to do some studying…

An important caveat: Some Web sites have been built using non-standard HTML or other technologies. The pages might look fine in the Web browser, but if the underlying code is not well-formed, using a different tool can expose problems. Make a backup of your current site before you change things just in case.

There are many different programs available that can edit HTML. In general, you’re going to want a visual editor (also known as WYSIWYG) as opposed to a code editor. Visual editors are much easier to use, and they all work pretty well for updating text on pre-existing pages. But for more advanced things — such as applying design changes or creating new pages to be linked into your current site, you might need a more advanced editor. So first off, decide if you’re just changing or adding to text on pages that already exist or if you need more advanced design, layout or site management.

In general, the process is:

STEP 1: Copy the files that make up your Web site from the Web server to your local computer.

    • Usually this is done through a protocol known as FTP. Your Web server host has the instructions for how to access these files, and should be able to remind you of the username and password for access.
    • There are standalone FTP programs, but many of the HTML editors now include transfer utilities.

      STEP 2: Open one of the files for editing and make changes. (Save when done.) Repeat as needed with other files.

        • Most of the pros use Dreamweaver for overall layout and site management as well as simple updates.
        • There are hundreds of other programs that can also work — iWeb, CoffeeCup Editor, and HotDog are common basic editors. They’re easier to learn than Dreamweaver, but they have limitations as well…
        • For images, the pros use Photoshop or Fireworks — but again there are many other possibilities. Photoshop Elements is an excellent option for basic picture editing.

          STEP3: Upload all changed files from your local computer to the Web server. This’ll be the same process as in step 1, but you’ll be moving changed files in the opposite direction.

          STEP 4: Test in a Web browser to see that the changes look good.

          In some cases, it may be possible to edit your Web site directly on the Web host’s servers — this depends on the host and whether the site was set up for this. This is generically known as a CMS or Content Management System, but the host company probably has their own name for it, like PageBuilder. (As an example, this blog is a kind of CMS.)