Section 4.1. Choosing Your Tools

4.1. Choosing Your Tools

Tools like Notepad and TextEdit aren't all that bad for starting out. They keep it simple, and they don't mess with your HTML (unlike a word processing program). Seeing the result of your work is just a browser refresh away. So why are you destined to outgrow your favorite text editor?

  • Nobody's perfect . With a text editor, it's just a matter of time before you make a mistake, like typing <b> instead of </b>. Unfortunately, you might not realize your mistake even when you view your page in your browser. (Remember, some browsers compensate for some types of mistakes; other browsers don't.) A good HTML editor can highlight problems and help you get rid of faulty HTML.

  • Edit-Save-Refresh. Repeat 1,000 times . Text editors are convenient for small pages. But what if you're trying to size a graphic perfectly , or line up a table column? You need to jump back and forth between your text editor and your Web browser (saving and refreshing each time). This process can literally take hours. With a good HTML editor, you get conveniences like drag-and-drop editing to fine tune your Web page. You make a few adjustments, and your editor tweaks your HTML appropriately.

  • Help, I'm drowning in HTML ! One of the nicest little frills in an HTML editor is color coding. Color coding helps make sure those pesky HTML tags stand out against a sea of text. Without this feature, you'll be cross-eyed in hours.

  • Just type <ul><li></li></ul> . To create a bulleted list, of course. You haven't forgotten already, have you? The truth is, most Web authors don't memorize every tag there is. With a Web editor, you don't need to. If you forget something, there's usually a help link or a menu command to fill it in. Without a tool to guide you, you're on your own.

Of course, there are also risks to using a graphical HTML editor. That's why you started out with a simple text editor, and why you'll spend a good portion of this book learning more about HTML. If you don't understand HTML properly, there are a number of traps waiting for you.

For example, you might use a slick HTML editor to apply fancy fonts to your text. Imagine your surprise when you take a look at your page on another computer (where the same fonts aren't installed) and your page reverts to an ugly or illegible typeface. (Chapter 6 has more about this problem.) Similarly, your editor can unwittingly lead you to insert HTML that's not supported by all browsers, or graphics that won't display properly on other computers. Finally, even with the best HTML editor you'll spend a significant amount of time looking at raw HTML to see exactly what's going on, clean up a mess, or copy and paste useful bits to other pages.

4.1.1. Types of HTML Editors

There's a wide range of different HTML editors, but they all tend to fall into one of three categories.

  • Text-based editors require you to work with the text and tags of raw HTML. The difference between an ordinary text editor and a text-based HTML editor is convenience. Unlike Notepad or TextEdit, text-based HTML editors usually include buttons to quickly insert common tags or tag combinations, and a one-click way to save your file and open it in a separate browser window. Essentially, text-based HTML editors are text editors with some useful Web features stapled on.

  • Split window editors also make you write HTML by hand. The difference is that a separate window shows the results of your work as you type . In other words, you get a live preview, which means you don't need to keep stopping to see what you've accomplished.

  • WYSIWYG (What You See Is What You Get) editors work more like word processors. That means you don't need to write the HTML tags. Instead, you type in some text, format it, and insert pictures just like you would in a word-processing program. Behind the scenes, the editor generates the HTML markup you need.

Any of these types of HTML editors makes a good replacement to a simple text editor. The type you choose depends mainly on how many features you want, how you prefer to work, and how much money you're willing to shell out. The best HTML editors blur the lines between these different types, and give you the freedom to switch back and forth between different views.

It's important to understand that no matter what type of HTML editor you use, you still need to know a fair bit about HTML to get the result you want. Even if you have a WYSIWYG editor, you'll almost always want to fine-tune the HTML by hand. Also, understanding the quirks of HTML will help you determine what you can and can't doand what strategies you need to get the most sophisticated results. Even in a WYSIWYG editor, you'll inevitably use a code view to look at the HTML underbelly of your Web pages.

4.1.2. Finding a Free HTML Editor

Unless you're one of the lucky few who already has a copy of a cutting-edge Web editor like FrontPage or Dreamweaver, you're probably wondering how you can find a good HTML editor for as little money as possible. After all, the Web's all about getting goodies for free. And while you can't find an industrial strength FrontPage-killer for free, you can get a good basic editor without opening your wallet.


Note: Shareware , as you no doubt already know, is software that's free to try, play with, and pass along to friends . If you like it, you're politely asked to pay for it (or not-so-politely locked out when the trial period expires ). Freeware is software that has no cost at allif you like it, it's yours! Usually, you won't get niceties like technical support. Some freeware is supported by donations.
FREQUENTLY ASKED QUESTION
Save As HTML

My word processing/page layout/spreadsheet program has a feature for saving Web pages. Should I use it ?

Over the last decade , the Internet has become the hottest marketing buzzword around. Every computer program imaginable is desperate to boast about new Web features. For example, virtually every modern word processor has a feature for exporting your documents to HTML. Don't use it.

Unfortunately, HTML export features don't work very well. Often, the problem is that these features take a document that's designed for one medium (usually print) and try to wedge it into another (the Web). But word processor documents just don't look like Web pagesthey tend to have larger margins, fancier fonts, more text, more generous spacing around that text, no links, and a radically different layout.

Another problem is the fact that HTML export features often create wildly complex markup. At the end of this process, you end up with an ungainly Web page that's nearly impossible to edit because it's choked with custom HTML. And unless you take a close look at the underlying HTML, you won't know whether your exported Web page will be displayed properly on other computers and browsers.

The lesson? If you can, steer clear of these features. You're better off copying and pasting your document content into an HTML file as plain text, and then formatting it with standard HTML tags on your own.


If you'd like to do your own research (always a good idea), and don't mind installing several dozen programs onto your computer until you find what you like, head to one of the following shareware Web sites to look for HTML editors (Figure 4-1):

  • http://downloads-zdnet.com. This leading computer publisher has provided a vast catalog of shareware since before the Internet existed. You can search, browse through thoughtfully organized category listings, or read editor reviews. It's highly recommended.

  • www.download.com. Another high-tech media companyCNETprovides this top- tier Web site for shareware.

  • www. tucows .com. This fan favorite is cluttered with ads, but still boasts a solid shareware collection

You'll quickly find out that there's a sea of free HTML editors out there. Many have awkward and clunky button and menu arrangements. Some have outright errors. Finding one that's right for you might take a little time.

Figure 4-1. Top: ZDNet has a rich catalog of shareware. Start by typing "HTML editor" in the search box and click GO.(If you're looking for Mac software, you should also change the list selection from "In Windows " to "In Downloads" and add the word "Mac" to your search.)
Bottom: In the table of lists, click the heading "Downloads." This sorts the results so the most sure you read the license details next to each item to find out whether its trialware (like Dreamweaver and HomeSite) or completely free (like HTML-Kit and CoffeeCup). Then, select the item and follow the instructions to download and install it on your computer.


Here are three worthwhile candidates:

  • Nvu is a newcomer that's already shaping up as the best free HTML editor around, and the only one with versions for Windows, Mac, and Linux. It lets you edit HTML documents using a WYSIWYG mode or a text-only mode.

  • HTML-Kit is a popularbut slightly eccentricfree HTML editor for Windows. It lets you use a text-only mode or a split-preview mode.

  • CoffeeCup Free HTML Editor is a scaled-down version of the full-blown Windows product CoffeCup HTML Editor 2005. The full-blown version offers both a text-only mode and a WYSIWYG mode, but the WYSIWYG mode is switched off in the free version.

In the following sections, you'll take a quick look at each of these free editors.

4.1.2.1. Nvu

Nvu (pronounced "n-view," as in "new view") is the only free HTML editor in this roundup that works on Windows, Mac, and Linux. It's also the most current (providing regular releases), and it boasts an easy-to-understand layout and a set of nifty features. Nvu is a new kid on the blockits first official release took place in June 2005 (before then, it had been available as a beta, or test, release).

Nvu was created using some of the pieces from the Mozilla browser (godfather to the increasingly popular Firefox browser), with features that were copied from FrontPage shamelessly grafted on. It's an open source project, which means that not only is it free to download and copy, but if you're a programmer type, you're welcome to browse through the source code and even submit your own improvements. As a Web-head, you're most likely to fall in love with Nvu's multiple views, which give you several useful ways to look at your HTML, including a color-coded HTML tag view and a WYSIWYG preview (see Figure 4-2). Nvu's biggest limitation is that it doesn't give you any way to see more than one view at once, which means that if you want to edit in Source view, you won't see the results of your work until you switch to one of the other views.

Nvu is packed full of common-sense features that you get in most professional programs, like last-action undo (select Edit Undo), a spell checker (Edit Check), an option for inserting special characters (Insert Characters and Symbols), and a helpful tip of the day. To download Nvu, surf to www.nvu.com.


Note: Since Nvu works so well, and is growing ever more popular, you'll find occasional tips on how to use it throughout this book.

Figure 4-2. Top: Nvu's normal view lets you edit formatted text instead of the raw HTML, just like in a word processor. You begin in normal view when you start Nvu and open a file. To switch from one view to another, use the tabs at the bottom of the window.
Middle: If you need to fine-tune your HTML markup, just switch to the Source view. You'll get handy line numbers and color-coded tags.
Bottom: Need something in between? The HTML Tags view lets you edit formatted text, but shows you what the tags are with floating yellow boxes. That way, if you find something amiss, you can switch to the Source view to clean it up.


4.1.2.2. HTML-Kit

HTML-Kit has an interface only a programmer could love. It's unusual, cluttered, and more than a little confusing. But on the good side, HTML-Kit is 100 percent free, relatively reliable, and ridiculously customizable.

HTML-Kit (www.html-kit.com) is a split-preview editor, which means you can see a live preview of your HTML document as you code it. However, HTML-Kit doesn't make this behavior immediately obvious. Instead, you need to coax HTML-Kit into showing both at the same time. Here's how to do it:

  1. Start HTML-Kit. (Choose Programs HTML-Kit HTML-Kit from the Start menu.)

    The Open File dialog box appears, giving you a choice to create a new document or open an existing file.

  2. Select the "Open an existing file" option and click OK .

    A typical Open dialog box appears.

  3. Browse to one of the r sum files that you used in Chapter 2 (also available for download from the "Missing CD" page at www.missingmanuals.com), select it, and click OK .

    The HTML for the document appears in a tabbed window. You can click the Preview tab to see a graphical representation of your document, and the Editor tab to jump back to the HTML tag view. You can also use the Split View tab to take a look at both at the same time. However, for most people this feature is mysteriously broken, providing a blank page instead of an HTML preview. If that's what you encounter, continue on to the next step.

  4. Select View Preview Active Preview Window (or just press Ctrl+F8) .

    A separate preview window appears above the tabbed HTML view.

  5. Select Window Tile Horizontally (if you want to stack the two windows one above the other) or Window Tile Vertically (if youd prefer to see them side by side) .

    The windows are rearranged so you can comfortably view both the HTML document and the preview window at the same time (see Figure 4-3).

    Periodically, HTML-Kit refreshes the preview window to show your latest edits. To trigger an immediate refresh, just press Ctrl+F8 at any time.

The most significant drawback to HTML-Kit (other than its charmingly baroque program layout) is the lack of handy buttons to quickly insert common HTML tags. If you love shortcut keys, you can browse the menu to find ways to insert angle brackets and jump from one tag to another. However, they're only useful if you think it's easy to remember odd keystrokes like Ctrl+, (the shortcut for jumping to the previous tag) and Ctrl+period (the shortcut for jumping to the next tag).

For more HTML-Kit fun, check out the wide array of HTML-Kit plug-ins at www.html-kit.com, as long as you're not scared off by perplexing names like avwEncodeEmail and hkMakeOptionsList. (Slightly more helpful descriptions are provided at the Web site.) One interesting plug-in is the HTML reference found at www.chami.com/html-kit/plugins/ info /hkh_w3c_offline. Once you install this plugin, you can get technical help about any HTML element in HTML-Kit. Just move your cursor over the tag in your document (using the arrow keys) and press F1.

Figure 4-3. Edit on the left; see the HTML preview window update on the right. What could be easier?


4.1.2.3. CoffeeCup

CoffeeCup Free HTML Editor is a scaled-down version of the full-blown CoffeeCup HTML Editor 2005. It boasts a streamlined arrangement of buttons and menu options (see Figure 4-4), complete with an integrated file list (which shows you a list of all the HTML files you have in the current folder), and quick buttons for inserting common HTML tags.

CoffeeCup Free HTML Editor does come with a few drawbacks. In order to see an HTML preview, you need to constantly switch from the Code Editor tab to the Preview tabthere's no way to see both at once. Even more annoying is the Visual Editor tab, which offers to give you WYSIWYG editing abilities , but is disabled in the free version. If you accidentally click it, you'll receive a message asking you to upgrade. As a result, this product works best as a text-based HTML editor. It's effective, but not fantastic.

To download CoffeeCup Free HTML Editor, surf to this web page: http://coffeecup.com.

Figure 4-4. Top: The best part about the HTML Code Editor view in CoffeeCup is that you can click several handy toolbar buttons to insert common HTML tags.
Bottom: Click the Preview tab to see a preview of what your HTML document will look like in a browser. Stay away from the Visual Editor tab, thoughit's reserved for paying customers only.


4.1.3. Professional HTML Editors

Fed up with settling for a low- powered HTML editor and an editing environment that seems like it was designed by M. C. Escher? If you're ready to move on to a professional Web design package, take heartyour choice is surprisingly simple. That's because there are really only two top-tier HTML editors on the market today.

  • Macromedia Dreamweaver is the favorite of graphic designers and hard- core HTML gurus. It's packed with features and gives you fine-grained control of every HTML ingredient.

  • Microsoft FrontPage is a Microsoft powerhouse. Start typing, and you'll immediately see why FrontPage is popular with HTML novices. Its WYSIWYG mode is so seamless that it's hard to tell you aren't using a word processor. The menus , toolbars , and automatic spell check carefully duplicate what you find in Word.

One of the reasons that these products are so much better than their competitors is that they include a lot of other tools that you're sure to need when you start designing Web pages. For example, both let you create style sheets (an advanced feature you'll learn about in Chapter 6), resize images and drag them around your Web pages, and manage an entire Web site. FrontPage even includes a tool for generating fancy buttons. Another reason is that they're just so darned easy to use. Even though both are packed with sophisticated features, editing a simple HTML file couldn't be easier.

In the past, Dreamweaver had a reputation for being complicated enough to scare away HTML novices. On the other hand, FrontPage was known for being easy to use but having a few bad habitslike inserting unnecessary tags or relying on frills that only work when your Web site is hosted on a Web server that supports the FrontPage server extensions (see "FrontPage Folders" for more information). However, recent versions of both programs have tackled their weaknesses. Now, Dreamweaver is virtually as easy to use as FrontPage, and FrontSection 7.2.53 is almost as mature and well-rounded as Dreamweaver. In fact, common tasks in these two programs are surprisingly similar. The bottom line? You can't go wrong with either tool.

If you're still itching to be convinced, you can try a free 30-day trial of either product. Surf to www.microsoft.com/office/frontpage/prodinfo/trial.mspx to order a free trial version of FrontPage, or www.macromedia.com/go/trydreamweaver to download a working Dreamweaver demo.


Note: For an in-depth exploration of every Dreamweaver feature, check out Dreamweaver MX 2004: The Missing Manual . For the low-down on FrontPage, pick up a copy of FrontSection 7.2.53: The Missing Manual .


Creating Web Sites. The Missing Manual
Creating Web Sites: The Missing Manual
ISBN: B0057DA53M
EAN: N/A
Year: 2003
Pages: 135

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net