Start Me Up

Robert Hess
Developer Relations Group
Microsoft Corporation

November 25, 1997

The following article was originally published in the Site Builder Magazine (now known as MSDN Online Voices) "More or Hess" column.

Every once in a while, I find myself getting slapped in the face. No, I haven't been acting improperly in bars. I just remembered something very important:

"It's not such a bad thing to start at the beginning."

The "Web design" aspect of the Internet has been around a long time, perhaps as much as three very long years. Since I've been involved with it for most of that time, I've forgotten more aspects of HTML than most sites contain. Okay, maybe that can be attributed to hanging around in bars.

As you might expect, I get a raft of questions. Many are well thought out, insightful, and illustrate the cutting-edge issues a lot of us face in struggling to put our pages together on this extremely diverse medium. But once in a while, I get a question that makes me want to grab the person by the collar and scream, "Don't you ever read the documentation?"

The other day, I remembered one of my earliest experiences creating a Web page.

Why does an anchored image have that border around it?

Microsoft was preparing to ship version 1.0 of Internet Explorer, and a person in my group was working on a small page for our internal network. I thought it might be interesting to check out this Web stuff. I asked enough questions to realize that it was all based on simple text files, and that all I had to do was build up a file in Notepad. So off I went.

I started by simply locating other pages on the Internet, looked at them in Notepad, and messed around a bit -- changing things and figuring out how HTML was put together. It was a little confusing, but after a while it started to make sense, and I could construct my own pages. The <IMG> element was naturally a fun tag to play with. Many of the pages I worked up included images, and many of those images linked to other pages.

Several days later, I was talking with someone who had a lot of experience building Web pages, which, back then, meant about three months. We chatted about various aspects of HTML, and then I commented, "Yeah, images are great, but it really sucks that an anchored image has to have that colored border around it."

The person I was speaking to looked at me with a quizzical glare.

"What are you talking about?" he said. "Just set the border attribute to zero. Don't you ever read the documentation?"

Oops! Guilty as charged.

Seven Questions You Should Never Fear to Ask

There's no such thing as a stupid question, right?

But sometimes we hesitate to raise our hands, for fear that we might just prove the adage wrong. Here, as an early holiday gift to the timid, is a short list of questions (and answers) that most often cause a beginning Web designer to stumble. I hope one or two of them will help you past a problem.

1: What's the difference between a GIF image and a JPG image?

This is very much a "Right Tool for the Right Job" situation. GIF (Graphics Interchange Format) is the best format choice for line drawings and images that have lots of solid colors, while JPG (Joint Photographic Experts Group) is a better format choice for more photographic-style images. If you save an image in the wrong format, the major difference you see is that the resulting file will be a lot larger. Another problem you may notice is that colors will behave strangely. When saved as a .JPG (or .JPEG) file, your solid-color image will suddenly be enhanced to show every minute variation in hue. Similarly, a photographic image saved as a GIF file will appear flattened.

2: How can I define a transparent area in a JPG image?

That's another difference between GIF and JPG. The data format for a GIF image understands the notion of a "transparent color." This means that, while the GIF image doesn't have any special transparency in it, a particular color in the image will be treated as though it was transparent. JPG images lack this capability.

3: How can I tell which fonts are on a user's machine?

From a Web page, the only sure way to tell which fonts the user has installed is for the user to tell you. Remember, Web pages are not applications, although they can be very, very similar to them. If a particular font is important to you, provide it to the user for download from your site (be sure you are legally entitled to do so). If your page requires the font in a limited context - for example, a headline - you might consider creating a graphic using that font.

4: If I create an image on a Macintosh, how can users on a PC see it?

GIF, JPG, and now PNG (Portable Network Graphics) are standard image formats, which means they are supported by most graphical systems out there. As long as the browser (or other application) supports files of standard formats, the files can be easily shared across users of different platforms. (I won't confuse matters by talking about Gamma.)

5: How can I find out what applications the user has installed on his or her system?

This is essentially the same answer as the font question above. Your Web page isn't allowed to get at information at that level without "permission" from the user.

6: How do I detect browser type?

There are many different ways to do browser detection, but most utilize the "USER_AGENT" string, which the browser passes back to the server in the HTTP headers. Often, the string is available in script code within the Web page itself. The browser supplies the text string to assist the server in figuring out which application is being used. This is how Webmasters are able to report on browser usage at their sites. If you want to see what this string looks like for the browser you are using (provided it supports scripting and the "Navigator" object), add the following code to your page:

<script language="javascript">
document.write (Navigator.userAgent);
</script>

For more information about browser detection, and a nice, little chunk of code, see the "Internet Explorer 3.0 vs. 4.0 Compatibility Issues" section in Cascading Style Sheets in Internet Explorer 4.0.

7: How do I design my pages to be compatible with all browsers?

If you want to be compatible with virtually all browsers, stick to HTML 2.0: no ifs, ands, or buts. The downside of doing so is that HTML 2.0 doesn't include support for the <TABLE> tag, the <FONT> tag, or even for background colors and images for the page itself. If you want to explore adding more advanced features to your site, do so slowly; first become comfortable with using the more advanced HTML elements, and with what those elements produce in the various browsers you want to support. You also need to install all those browsers so that you can test your pages with them.

Information Resources for Beginners

The Web has turned into a self-documenting resource. Its failing, of course, is that there is way too much information on it, and it's often difficult to find exactly the information you need.

Here is a short list of sites I've found useful in helping make sense of HTML:

HTML 3.2 Reference Specification
(http://www.w3.org/TR/REC-html32.html)
Probably the best place to start: Simply print out this entire document. It represents the base specification of what browsers should now support today. Different browsers may have slightly different interpretations on exactly how to implement these features. For example, the font size resulting from an <H1> tag isn't strictly defined.

Hypertext Markup Language -- 2.0
(ftp://ds.internic.net/rfc/rfc1866.txt)
If robust cross-platform support is important to you, start here. HTML 2.0 is essentially where all of this began, and virtually all browsers provide full support for the elements described in this document. If you have a good understanding of what is in HTML 2.0, and build on that by slowly adding additional support for newer features, your pages will have a better chance of working everywhere.

Index of background images
(http://www.sdsu.edu/graphics/backgrounds/index.html)
A common question: "Where can I find a cool background image?" Here -- with the caveat that the best background images are the ones you don't notice -- is a site that has a lot of images you shouldn't use.

Art and the Zen of Web Sites
(http://www.tlc-systems.com/webtips.shtml)
Before you start exercising your newly found abilities, learn some of the etiquette of proper Web design. While I can't say that I agree with everything listed here, I think it provides some good ideas of what to avoid.

Robert Hess is an evangelist in Microsoft's Developer Relations Group. Fortunately for all of us, his opinions are his own and do not necessarily reflect the positions of Microsoft.

New to site building?

Some pages within the MSDN Online site I heartily recommend to folks just getting started in Web design:

Dynamic HTML Overview: For those anxious to get into the raw capabilities of Internet Explorer 4.0. This site is the best information yet on everything that is available to HTML authors. Make sure you have a full cup of coffee before you head down this link. You're going to be there for a while.

MSDN Online Mailing Lists: One of the best ways to get up-to-date information is to talk to your peers. Several very active mailing lists are available, depending on your focus. Past messages are archived; someone may have already answered that perplexing problem.

MSDN Online FAQs: FAQ stands for "Frequently Asked Questions." Here are links to various FAQs we've gathered.

All About Scripting: Once you've mastered regular HTML, it's time to add scripting to your pages. Just be sure you learn how to walk before you try to run.

--R.H.

Unburden yourself

Now that you're no longer bashful about asking questions, try stumping MSDN Online 's resident answer guys, the Web Men Talking, with your query on any aspect of site development, design, or authoring.

If the Web Men like your question, they'll repeat it -- and your name -- for approximately two million of your closest friends worldwide. Don't be shy.

You're not alone

More than half a million Web designers, developers, and authors around the world share your interest in great design and development tools (and free downloads) by belonging to MSDN Online . Membership is free in most cases, and the benefits considerable.

Design Workshop

Expert Web designers turn to the Design Area of the Web Workshop for in-depth technical articles on layout, color management, design materials, and more.