 |
NEW! SEE DR WEB'S MOST ASKED QUESTIONS.
HTML For Smarties
This is a design page about a text-based tool: HTML. (Don't worry, we'll get to graphic design tools like Photoshop later.)
On this page I'll point beginners to the best places to learn HTML, the text code that builds web pages. For those who already know the code, I'll discuss ways to take it way beyond spec. I'll cover shareware editing programs and utilities; begin talking about what makes a page work (and what can hurt it); and offer tips and tricks for automating tedious processes and generally working faster and smarter. Just what you'd expect on a page like this.
 Even better, I'll let you in on one of the least-publicized facts about web authoring: nearly everything you need is already included in your operating system. The companies that make commercial web authoring software aren't going to tell you about it, but on this page I will.
You'll learn how to add coherence to your pages by matching your HTML colors to the colors in your images. And find out why relying on "HTML-free" WYSIWYG web page editors could be committing web suicide.
I'll share secrets that let you create a strong sense of graphics where there are no graphics – only text. Suggest means of layout control in a medium that was designed to leave layout control in the end-user's hands, not yours. And offer special techniques for web authoring on the Macintosh platform.
In the last 100 yards of this page, we'll look at the software through which your pages are seen. Discuss whether to design for Navigator and Explorer, or lowest-common-denominator browsers. And how to add powerful new capabilities to your HTML design arsenal without doing harm to older browsers.
I call these techniques punishment-free enhancements, and you won't read about them anywhere else. (Other pages tell you how to use "cool new features" without warning you about what they can do to un-cool, un-new browsers. I'll give you information that lets you decide which trade-offs work for you and your audience.)
Finally, we'll talk about style sheets, a great idea whose time has not come.
After all that, we'll be ready to talk about creating images, adding multimedia (sounds, movies, animations and beyond), advanced tricks to make your pages behave the way you want them to, and a crazy little thing called content.
How do I learn HTML?
Practice. Good HTML takes time, but the basics are simple. You can learn them in a few days.
The web itself is the best source of info, and Jay Boersma's WebWork is a great place to start. This friendly tutorial is so light and engaging, you don't appreciate until later how much detail is covered – and how much you've learned. Bookmark the tutorial, go through it online, and print it for deskside reference. Don't forget to email the author.
Ian S. Graham's Intro to HTML (updated URL) is also clear, thorough, and highly recommended. It can be dry, though, so nervous newcomers are better off starting with Boersma, then moving on.
Adam Engst's Internet Starter Kit for Macintosh, a complete book on the web, offers another fine tutorial section. And despite the Mac orientation overall, Engst's HTML information works for any operating system – PC, Mac or Unix. Just like HTML itself. Print the relevant sections, and buy the book later.
Forget an HTML tag? You'll find an extensive listing of the latest and greatest in the Bare Bones Guide to HTML.
If you wanna make an omelete,
you've gotta steal some eggs.
Imitation is the sincerest form of theft, and most every web author starts by stealing. When you surf to a page you like, select File: View Source, and save the file to your hard drive. Re-open it in a basic text editor (Simple Text or Write) and stare at the code until it stares back. Plug your own words in between the HTML tags, save your work, and drag the file onto Netscape Navigator (or switch back to Navigator to open the page). Result: your first (offline) web page.
By the way, unless the layout you've stolen is extremely basic, you should keep it offline. You don't want to upload what you steal. You just want to learn and move on.
Don't confuse yourself by starting with multi-table, frames-enabled animation pages. Instead, begin with traditional HTML layouts like those in Eric Bennett's essential Cross-Platform page. (As a bonus, you'll also learn about the various video, sound and graphic formats you'll be using as your skills increase.)
Web pages are deconstructable.
Imagine if you could learn all the design tricks that went into a magazine layout you admired simply by clicking on the page. You can't do that with a magazine, but you can do it on the web.
In addition to View Document Source, Netscape Navigator's menu bar offers an underused option to View Document Info. Choose it, and the entire page will be deconstructed for you in a new window, image by image. Beside each image's name you'll find its complete URL, file size, how many colors it contains, and whether or not it uses transparency. Click on the link beside each image, and the image will load in the bottom of the window.
You may find that a huge background image is actually a small but wide one – and learn how wide an image must be to avoid repeating in the browser window (and destroying the illusion of seamless infinity). Or you'll discover that a colorful image actually contains only 16 well-chosen colors – and decide to take a crack at re-optimizing your own images. You may even find invisible graphic elements used to control page spacing (like the one that follows this paragraph).
Store everything you learn in the wet computer between your ears, and soon your pages will be looking better.
Break down and buy a book.
Laura LeMay's Teach Yourself Web Publishing with HTML in a Week is the standard. Follow the exercises at your computer, then reread it in bed. If you find a used copy of LeMay's first edition, grab it. It won't help you with frames or Java, but you have enough to learn now, and can do plenty without them.
You'll find a complete, linked list of current HTML books on the WWWiz Web Authoring Booklist page.
Always keep learning.
Any reference above will tell you how to use HTML. The next thing is to use it well. Which means using it in ways its creators never intended.
For that, head directly to David Siegel's Web Wonk. With this one unparalleled resource, you'll learn to control the layout of your type on the page – something you can't do with basic HTML, because it was not intended as a tool for design.
If hypertext made the web possible and Netscape made it media-friendly, Siegel made it safe for designers. His critical innovations are using an invisible pixel (downloadable at the site) to control horizontal and vertical space; and harnessing the unforeseen power of invisible HTML tables (tables with their borders set to zero) to create a grid – the staple of traditional page layout.
Since Siegel mounted Web Wonk in 1995, browsing technology has evolved at a dizzying pace, yet his tips hold true. One thing has changed slightly, owing to the introduction of the Redmond Giant's Explorer. If you use invisible tables to create left-side margins as Siegel instructs . . .
<TD WIDTH=60><BR></TD>
. . . your margins will hold in Netscape Navigator but break in Internet Explorer – particularly if your margins (and tables) are nested. To make margins that work under both browsers, replace the <BR> tag with an invisible (transparent) pixel and use the HTML horizontal spacing tag to set the width:
<TD WIDTH=60><IMG SRC="dot_clear.gif" HSPACE=30></TD>
When your pages are starting to look good, you'll want to buy Siegel's Creating Killer Web Sites: The Art of Third-Generation Site Design, Hayden Books, 1996. Previews are available at www.killersites.com. If you were lucky enough to stumble onto Web Wonk in 1995, and you had eyes to see, you've already learned and used many of the book's web page layout techniques. Still, the rest of the book will be a revelation. For what it's worth, this is the only text on web authoring I have ever purchased.
If originality and merit counted as half as much as marketing, Siegel's name would be as ubiquitous as Mark Andreeson's. Of course, in a world like that, we'd tape on Betamax; and Windows, not Apple, would be losing market share.
My pages owe Siegel an immense debt, although our sensibilities are poles apart. So while his techniques enabled me and countless others to develop exponentially, my designs – such as they are – are my own.
Which brings me to this simple suggestion:
Never slavishly imitate. Copy to learn, then move on.
Look at the old (1995) version of Siegel's well-known High Five Award Page. Then check out the Connectix Home Page. It's a beautiful page. But it reminds you of Siegel's.
And so does Jezebel's Ditty Central.
And so do CNET and TVNet and apple.com and thousands of other copycat web sites that use the patented Siegel formula: content on white on the right; a thin band of color on the left.
Copy one visionary and you're a clone. Copy twelve, and you're an original. It's human to be influenced by the best. So be sure to have more than one influence.
Do I need special software to write pages for the web?
 No. All you need are the basic text editor and notepad built into your operating system. For speed and convenience, you can toss in a sprinkling of freeware and shareware utilities.
Windows users, in the discussion below, when I say "Simple Text," think "Write," the free text editor that comes with Windows. When I talk about the Macintosh notepad, think "Windows notepad." When I say "breasts," think – just kidding.
Some features and some shareware add-ons vary; the principles are the same. In Windows 3.1, you'll need to do some tinkering to change your file extensions from ".txt" to ".htm," which is Windows file-extension shorthand for "html."
How does it work?
 On the Macintosh, I write my web documents in Simple Text, the Mac's built-in text editor. Sounds Spartan, but this fast-loading, low-RAM program includes luxuries like the ability to have the Mac speak your text out loud when your eyes are glazed from staring at the monitor.
More usefully, Simple Text provides font selection: a truly handy feature when you're inserting repeating chunks of code between long blocks of text. By choosing a different font for the repeating text block, you get quick visual feedback to help avoid mistakes.
Bear in mind, when you do this, you're not changing the fonts that will appear in your web document. You're only changing fonts in the code, to help you find your way through long passages of text.
Remember that anything published on the web is (or should be) a living document, ever-changing. Next week, next month, or tomorrow, when you have to revise your page, you'll be glad you marked the wilds of HTML with these typographic trails.
Keep several applications open at once.
 While writing in Simple Text, I keep the notepad open so I can drag and drop repeating bits of text, URLs, and other items into my HTML document as needed. To locate URLs, I keep Navigator open too; when I find what I'm after I drag the link onto the notepad.
Switch frequently between your browser and text editor to see what you're creating. Remember to save your document after you make changes, and reload the page in your browser to check the effect.
What about color spec'ing? You can't do that in Simple Text.
Sure you can. Since HTML is merely text code for graphics, you can spec colors in Simple Text or any word processor as quickly as you can type six hexadecimal digits. To make the questions on this page white, for instance, I just typed <FONT COLOR="#330033">. Six-digit codes for common colors can be found on graphics sites all over the net, including the Background Colors page and the Background Color Test page. Visit, bookmark, and save them to your hard drive.
But if you want a better web page I'm going to suggest you avoid relying on them. Instead, do what I do. Namely ...
Match your text and background colors to the colors in your images.
If you visit my Guestbook, you'll notice that my background and type colors blend nicely with the photograph of the handsome gentleman at the top of the page. There's a reason for that: the HTML colors are taken directly from the photograph.
Similarly, if you visit this site's old core page, and you're browsing with Netscape Navigator 2.0 or beyond, you may observe that a background color loads under the type before the background graphic itself appears. Don't feel bad if you missed this nuance the first time around. You weren't supposed to notice.
In fact, the background color is matched exactly to the background graphic, to give your eye an immediate sense of the page's design well before the background has loaded. It's my variation on the old (1995) "LOWSRC/SRC" web graphics gambit. When it works, you don't even know that you're waiting for a visual element to download – and you aren't jarred when the image appears.
Seems like an intuitively obvious approach, yet I'm stupified by the number of otherwise beautifully-designed sites whose pages open with standard Netscape grey and then – surprise! – change colors behind the type when their background graphic has loaded. But enough self-congratulation.
Here's how to do it:
To effortlessly match text and background colors to your graphics, pop open a nifty little Macintosh utility called Color-Sieve (132k) (updated link). As you drag the cursor over any image, a tiny floating window presents you with a magnified view and pixel-by-pixel color readout in hexadecimal. Just plug the hexadecimal code into your document and go. Eric Curtis's spiffy (and tiny) Delta XY 2.7.1 (11k) will also give you a pixel-by-pixel hexadecimal readout (sans magnifying window).
The first time you use either program, go into the preferences menu to specify that you want your color code in hexadecimal. Set 'em, forget 'em, and keep 'em handy on your desktop.
In the old days (two months ago), I would reopen my graphics in Photoshop, select the color I wished to match in my background (or text), get an RGB readout, and use a different shareware program to convert from RGB to hexadecimal. I'm glad I don't have to do that anymore.
Of course, there is an even easier way to match HTML color to image color: namely, restrict your images to the 216 "legal" Netscape colors, which we'll be looking at in Dr Web's Graphics Clinic. (If you already know about the Netscape color cube, and if you're not trying to match your HTML colors to existing graphics, a trip to Stone Design's Color Coordinator is also highly worthwhile. This brand-new web gizmo lets you dial up and test Netscape-safe colors right in any Java-capable browser.)
But first things first. On the next page, we'll look at HTML editing programs, WYWIWYG editors, browser-specific design issues, style sheets, and special techniques for web authoring on the Macintosh.
|
