S · O · U · T · H

The South is where I talk about HTML and the Web, because it was the cardinal point that was left over. I think I did pretty well on the rest of them, so I hope you'll forgive a little lack of poetry here. Read about my HTML philosphy below, and check out a few tips I've accumulated.

Learn HTML, and learn to use it well!

I enjoy goofing around with HTML. One of the nice things about it is that if you see something on a web page that you like, you can view the document source, and incorporate that into your page. Of course, if you don't learn HTML, but rather you rely on some kind of HTML editor, you are limited to what that program can offer you! Don't be afraid to learn HTML! It can be as easy or as complicated as you want it to be. Also, don't rush out and buy a book. You can get started just by using resources out on the Web.
    When I started out, the most valuable link in my bookmarks was to the NCSA Beginner's Guide to HTML. Since NCSA designed one of the first web browsers (Mosaic), it's not surprising that their underlying philosophy is "Trust your browser." They emphasize using logical tags, which denote the meaning of the text, rather than physical tags, which specify exactly how you think the text should look. This makes a certain amount of sense, because every browser will interpret your web page differently. You can use a lot of physical tags to make your text sizes and styles look just perfect on your browser at home. However, someone else's browser, because of the way it deals with fonts, vertical and horizontal spaces, and things, might completely goof up your aesthetics. If you stick to logical tags and use, for example, <h1> and <h2> to designate your headings instead of specifying a bold font of different sizes, then presumably all browsers have been designed so that "header 1" and "header 2" look good together and convey the sense that "header 2" is subordinate to "header 1" in a pleasing way. Trusting your browser (and everybody else's, for that matter) is a good policy when you're first learning about HTML.
    Not everyone agrees with this philosophy, of course. For example, at Web Wonk you'll read that web browsers were originally created by programmer-type people, rather than typographers and folks who actually know a thing or two about how readers assimilate visual information, and a lot of bad design features have been built into most browsers, and HTML in general. I recommend that advanced HTML users look through this site for tips on how to make their web pages more readable.
    A quick browse through my web sites will show you that I try to take a middle road between complete browser-trust and complete web page control-freakness. The other guiding principle in my web page design is accessibility for all browsers. Many web designers write their pages specifically for one browser, using tags and color combos that might not be available to all browsers, and urging anyone who doesn't use their browser dash off and download it. That doesn't strike me as very democratic. I design using Netscape, so that's probably the browser that best reflects my artistic vision (such as it is). But while my pages might not look as good in other browsers, I still want everyone to be able to read and enjoy my site, even the people who, for whatever reason, use text-only browsers. (shiver) For tips on how to make your pages readable by many different browsers, check out the Campaign for a Non-Browser Specific WWW. You also might be interested in making your sites accessible to browsers designed for people with disabilities. You can check your pages for any accessibility errors using Bobby. (Bobby is also good at finding HTML errors and incompatibilities with normal browsers.)

Britt's HTML tips

1. Avoid extra spaces and characters inside elements
   While HTML is usually insensitive to extra spaces and linebreaks, they can be problematic inside elements. For example,

   this link: <A href=".index.html">Back to Origin </A>

   creates "this link: Back to Origin ," with an unsightly extra space underlined at the end!

       Similarly:

   this link <A href=".index.html">Back to Origin 
   </A>
   	

   creates "this link: Back to Origin ." The linebreak was treated as an extra space.

       You can also end up with an extra underlined space attatched to images which are used as links, like this:

   Here's a fun site: <a href="http://www.yahoo.com"><img src="yahoo.gif" alt="Yahoo.com" width=91 height=23>
   </a>
   	

   creates "Here's a fun site: " That little extra line is a small detail, but it's distracting.
         Since HTML tags don't mind being mushed together it's a good idea to avoid any extra spaces within elements, and to be very careful when putting linebreaks into elements. Also, notice that any punctuation, like commas, periods, and exclamation points included inside the element will take on the formatting of the element. Whether or not you desire this is a matter of style for you to decide, but you should be consistent throughout your page(s).

2. Use a smart editor.
   I'm not recommending a WYSIWYG editor that you can use without knowing any HTML. Rather, I'm suggesting that you use an editor that understands HTML. For example, I use XEmacs, which has an HTML mode that provides helpful indentation and debugging, and provides that cool "Last modified" timestamp at the bottom of my page automagically.

3. Use the "width" and "height" attributes for every image!
   The "width" and "height" attributes do more than just let you resize images. They tell the browser reading your page how big the image will be, so it can leave room for it! If you don't use "width" and "height" the browser must wait for the entire image to load before it continues loading the rest of the page. If you use these attributes on all your images, the browser can just leave space for the images and load the rest of the page, allowing readers to enjoy the text content of your page as the time-consuming image-loading process proceeds.
         To quickly find out the "natural" width and height of an image, load it into your browser (or stick into a page, click on it with the right button, and select "Open this image.") The image will be loaded, and the title bar at the top of your browser will tell you the type of the image (GIF, JPEG, &.) and the image size as "width x height" in pixels (at least in Netscape!).

4. Optimize images.
   Your web page will load faster and take up less disk space if you keep your image files as small as possible. One way to do this is to use the NetMechanic Image Optimizer. This tool, which you can run online (no pesky programs to download!) will allow you to reduce image file size to the minimum required to keep the quality you desire. It can easily cut image file sizes in half without sacrificing viewability!
   Warning: if you are using the "width" and "height" image attributes to make images appear larger, be careful because while optimizing you will be viewing the image at its smaller "natural" size, and when it's enlarged it might not look so good!

5. Mung your email addresses.
   "Mung" means "mangle until no good" or, if you prefer recursive acronyms, "mung until no good." The problem: nasty spammers send robots (that's a program, not a mechanoid) out onto the web to harvest email adresses from web pages. The solution: make your email address readable by humans, but not by spambots. One way to do this is to replace some of the characters in your email address with the ASCII equivalent codes. For example, &#98; is rendered by any browser as b. If your email is bob@example.com, you can write it as &#98;o&#98;@example.com. You just need to look up entity numbers in a table of ASCII characters.
        Another tip: a lot of people (like me) don't use their browser to handle their email and don't have any fancy-schmancy email program that interprets a click on a mailto link correctly. Instaed of a link that says mail me!, in my opinion, it's better to spell your email address out (like I do at the bottom of each page) so the reader can highlight and paste the address into their mail program.