Learn how to spell HTML

July 2002

By Barbara Sehr

Applies to
Microsoft FrontPage® 2002

FrontPage makes it easy to build Web pages without knowing HTML. But once in a while, you might want to know how to work with the HTML behind your Web pages.

A long time ago, my then-12-year-old daughter announced that she was becoming a vegetarian. The announcement was quite a shock because my daughter had an intense dislike for all things vegetable at the time. "Does this mean you'll start eating your vegetables?" I asked.

"No," she answered. "I plan to eat only bread and cake."

The Microsoft FrontPage 2002 Web site creation and management tool is designed to let you eat only cake when it comes to difficult Web page programming issues. But once in a while, you may need to balance your diet of knowledge with some greens in the form of basic Hypertext Markup Language (HTML).

Meet the HTML pane

Long before the Microsoft Windows® graphical user interface was born, there was an operating system called MS-DOS® with a command-based interface. Instead of simply opening My Computer and getting a list of files available on each disk, you typed dir at the command prompt. That’s just one of the reasons why many people avoided computers more than a decade ago. Still, even in today's Windows operating system, you can find a command prompt (click the Start button, click Run, and then type cmd). It’s there so that advanced users can perform diagnostic and networking tasks more quickly.

The same holds true in FrontPage. In FrontPage, an HTML pane is available to overcome some issues common to any what-you-see-is-what-you-get (WYSIWYG) browser.

On the bottom of the FrontPage screen, you find three ways to display your Web. Normal pane is what you use to enter components of the page (text, graphics, or tables). Preview pane lets you see the page as your visitors would see it through a browser. Then there is the HTML pane, which lets you see the code that is underneath everything you've entered.

The Normal pane button is at the bottom left of the screen.

HTML uses tags (like <p> for paragraph) to tell a browser how to treat a block of text or images on a particular computer. Each tag can have attributes (like color="red" within the tag <font>) that give a Web page more definition. From time to time, you may need to be familiar with the HTML code generated by FrontPage to overcome problems like spacing errors or tables that don't fit correctly.

Here are some of the more common reasons that knowledge of HTML will speed up your Web page production process:

  • Browser incompatibility    Your customers are likely to use various browsers that include different versions of the two most popular browsers, Microsoft Internet Explorer and Netscape Navigator. No two browsers read HTML code in the same way. Some features, like cascading style sheets, can't be displayed in some browsers. Some browsers insist that HTML tags be placed in a certain order, with well-defined spacing. A large number of your visitors, for instance, may use a Netscape 4.x browser that does not forgive the accidental overlooking of a closing </td> (table cell) tag within a nested table. Even different versions of the same browser can act differently on different platforms. Versions of Internet Explorer for the personal computer and the Macintosh computer render pages very differently.
  • Relevant path problems    Have you ever traveled in an unfamiliar rural area and stopped for directions like, "Go past Farmer Brown's barn, pass the Smiths' ranch, and go right by where the old feed store used to be."? When your Web page is created on your computer, your browser knows where "C://My Webs/homepage/logo.jpg" is located. However, someone looking at your page from the Internet is unlikely to have the same file at that location. That's why it's important to make sure those linked pages and images are given locations relevant to where they sit on the server that hosts your page. If a link to your logo shows up as a broken image file, for instance, you may have a relevant link problem.
  • Instead of checking each image link, you can use the standard Microsoft Office Find feature and look through the HTML code:
    1. In the bottom left corner of your page, click the HTML pane.
    2. On the Edit menu, click Find.
    3. In the Find and Replace dialog box, next to Find, enter file:.
    4. Select Find Next.
    5. If you see a path that starts with something like C:/MyWebs/homepage/images/logo.jpg, change this to a relative path like /images/logo.jpg.
    6. Select Find Next again, and repeat throughout the document.

Study your HTML code for quick troubleshooting.

  • Superfluous code    FrontPage makes it easy for you to create a Web page by generating HTML code. But, like any WYSIWYG browser, FrontPage can generate more code than is needed to display your page. By learning HTML, you can identify extra codes in your document that only add to its weight (and therefore its download time) for your visitors.

Quick emergency fixes

Imagine it's 2 A.M. and a party at a friend's house is just winding down. A cell phone call advises you that a customer in Australia has just opened your page in Netscape Navigator version 6.0 on this first day of your launch and discovered that the bottom half of your page is missing. That page includes a special message to Australian customers and is key to your market penetration in this new region.

Your friend's computer doesn't have FrontPage installed.

A glance at the page's source code shows a glaring error. The closing </table> tag at the bottom of the page is missing. Netscape is not forgiving. It renders the entire table invisible. As you stare at the page and your blood pressure quickly rises, a quick fix comes to you. Every version of Windows comes with Notepad:

  1. Save the source file to your friend's computer.
  2. Open the file in Notepad.
  3. Add the missing </table> tag.
  4. Save the file and use any File Transfer Protocol (FTP) program, such as WS_FTP, a widely available shareware program, to send the repaired file to your server.

Your business is saved because you took the time to learn a little HTML. You can return to thinking about how tired you are at this hour.

Brevity is the soul of wit

In Web design, as in Shakespeare, "brevity is the soul of wit" (wit referred to wisdom in Shakespeare's day). It is by far nobler to render fewer superfluous tags in HTML than it is to fill the Information Superhighway with the slings and arrows of outrageous coding. Over the years, FrontPage designers have minimized the amount of extra coding generated when page components are frequently modified in the Normal pane. Still, extra paragraph, table, and table cell codes can appear in your code.

If you know HTML, you can mark up a page to your heart's content, using FrontPage's productivity-friendly tools. Before you finalize the page, you might want to click the HTML pane to see if you can spot code that will merely add to the download time for your visitors. If your page is especially heavy in graphics and your visitors tend to access your page from a dial-up modem, you don't want to give them time to think about whether or not they are in the right place.

To check for superfluous code:

  1. Click the HTML pane.
  2. Scan the page for tags like <p>, <td>, <br>, or <table> and their closing tabs (</p>, </td>, </br>, or </table>).
  3. Check to see if there is text or image placement between the opening and closing tag.

 Note    In the case of <br> (line break) tags, these tags may provide necessary spacing on the page without any text or image placement in between.

  1. If there is no text or image placement between the tags, delete the tags one by one.
  2. After each deletion, check the Preview pane to see if the deletion has an impact on your page.
  3. If the deletion impacts your page, go to the Edit menu and click Undo.
  4. Repeat with each extra tag you find.

FrontPage as a learning tool

There are those of us who still like to know long division even if a calculator is quicker. There are those of us who refuse to use speed dialers because it keeps us from remembering key telephone numbers. There are those of us who believe that exercising the mind occasionally is as important as exercising your body.

You can learn a bit of HTML coding by simply switching to the HTML pane within FrontPage from time to time. You might want to know how a nested table is built, how cascading style sheets appear in code, or how mouse-over effects are rendered.

In the current economy, adding another skill to your resume never hurts.

Barbara Sehr is a Seattle-based freelance writer who has written about operating systems and storage systems for national computer magazines such as Datamation, Computerworld, and Digital News. She has also written technical documents for software companies including Microsoft Corporation.