Start Me Up
As of December 2011, this topic has been archived. As a result, it is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Internet Explorer, see Internet Explorer Developer Center.
November 25, 1997
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.
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's really annoying 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.
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:
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.
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.
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.