Learning HTML

Once you have a firm grasp on the basics of writing "raw" HTML, with a little practice, you'll be able to do some really "cool" stuff. A lot of the stuff that most people think has to be done with Cascading Style Sheets, can be done with pure HTML.

When you get to be reasonably fluent in HTML you will have the power to make a Web-Page look the way you want it to look and anyone else can see it the way you designed it, regardless of what "graphics enabled" browser they are using.

All of the resources you'll need are available on the Web and they are FREE.

1. The first one you'll need is the "Wilbur" Specification. This is the official Spec for HyperText Markup Language. You can obtain it directly from the World Wide Web Consortium (W3C) "help" Web-Site. There are two versions. One is a 36 page "book" which you can down-load and print. The other is a "Windows" help file. I recommend getting both.

   You can get them from: http://w3c.org/MarkUp/

   Most of the questions frequently asked in the "Usenet" forums, the Yahoo! Web design and HTML clubs and in other forums on the 'net can be answered just by reading "Wilbur".

2. The next one you need is the tutorial from the National Center for Supercomputer Applications at the University of Illinois in Urbana/Champaign. The NCSA is where the first "graphics capable" browser (Mozaic®) was developed; the developement team leader went on from there to found Netscape ®.

   This 26 page "book" is available from: The NCSA Tutorial

3. This one is a definite "must have". Regardless of the computer system being used and the number of colors it can display, there are only 216 "Net-Safe" colors. These are the only colors you can safely specify for background and text colors on your Web-Page. Graphics however, are rendered with the full color capabilities of the computer which is being used to view them.

   The "Net-Safe" color chart is here.

4. If you haven't already done so, read:

         How I Learned to Write HTML and still retain a small degree of sanity
   and:
         A Quick Guide to Publishing on the WWW.

5. Next, you'll want to read one of the best tutorials I've found on the Web. Actually the author found me. The Tripod server has Special Interest Groups (SIGs) called "Pods". The Web-Pages in the various "Pods" are arranged by ranking (visitor votes). In the "HTML Pod" my "Quick Guide ..." is in the number two slot. Larry, the author of the page in the number one slot contacted me for a "cross link".

   You'll find this well written, easy to understand turorial at:

         Larry's HTML 4 Rookies

   Larry now has his own domain name http://htmlprimer.com on which he has a mirror of his Site on the Tripod server.

   I have recently discovered another tutorial which is equal to or better than Larry's. You'll want to read both of them. Take a peek at:

         How do they do that with HTML?

   ---

Styling Tips.

To see how the examples were done, examine the source code for this document. If you see any tags you don't recognize, look them up in the "Wilbur" spec.

1. Using Tables.
   There are many reasons for using tables. Among these are:

   1. Displaying tabular data.
      e.g.

      Left Handed Monkey Wrench Users

      Age Group	Left Handed People	Right Handed People	Totals
      10-15	15	10	25
      15-20	25	15	40
      20-25	30	45	75
      25-30	45	30	75
      Totals	115	100	215

      The above table looks cramped and is difficult to read. By changing the cellpadding attribute from 0 to 5 and aligning the data it becomes more pleasing to the eye and a lot easier to read.
      e.g.

      Left Handed Monkey Wrench Users

      Age Group	Left Handed People	Right Handed People	Totals
      10-15	15	10	25
      15-20	25	15	40
      20-25	30	45	75
      25-30	45	30	75
      Totals	115	100	215

      Note: in the "Age Group" cells the <center>...</center> tags were used instead of <td align="center">. This allows for better cross-browser compatability.

   2. Special Effects.
      There are a number of special effects that can be done using tables with different background colors.
      e.g.

      This is an example of nested tables.

      and:

      This one is done with different colored backgrounds in the table cells. Use this with caution; not all browsers support it.

   3. Page Formatting.
      This is the easiest way to format your page so that you can be reasonably sure all of those who view it will see pretty much the same thing. To see an example of a page formatted with a table, look at the NO FRAMES document for this site.

      BVWAB Banner	This is the Main table cell.
      This is the Menu Bar.

      The page was laid out as:
      
      By placing no text in the upper left table cell, not even the alt="..." attribute in the <img...> tag, the Search Engines are forced to read the text in the Main table cell first and to read the Menu Bar last.

      See the section on " Search Engines" for more about this.

      The formatting of the information in the Main table cell is also done with tables.
      
      

2. Web-Page Readability.
   If your visitors can't read your Web-Page, they won't come back. Here are a few hints to help make your pages more readable.
   1. Contrast.
      Always make sure your visitors can read the text on your Web-Page. Use contrasting colors for the background and text. Use only the "Net-Safe 216". Some browsers can render colors other than the "216" but most can't; they will attempt to pick a standard color that is only close. The result can be disastrous. The worst case is when the browser "dithers" both of your non-standard background and text colors to the same color.

      If using a background image, keep it simple, with plenty of "open space" against which you will be placing your text. A "busy" background image can seriously degrade the readability of the entire page.

   2. Text Size.
      There are seven font sizes supported by most browsers.
      These are:
      This is size 1
      This is size 2
      This is size 3
      This is size 4
      This is size 5
      This is size 6
      This is size 7
      

      The smaller fonts allow you to put more text on the screen but they sacrifice readability. There is seldom any reason to use a font size smaller than "2" or larger than "6". You may be able to read size "1" on your 36" monitor but it becomes garbage on the 10" LCD screen of a lap-top computer.

3. See your Web-Page the way others see it.
   This one is just down-right sneaky. Let us suppose you have a 800 X 600 display and you want to see how your page would look with other browser window widths such as 1024. Remember Web-TV uses a 560 wide display and has no horizontal scroll bar! With the advent of Web-TV boxes that combine cable converter, cable modem and Internet access in one small limited capability box, we have a new and growing audience with which to contend.

   To Emulate	Web-TV	640 X 480	800 X 600	1024 X 768	1152 X 864
   nnnn =	540	620	780	1004	1112

   This takes into account a 20 pixel wide vertical scroll bar.
   1. Add this code right after your <body> tag:

      <table width="nnnn"><tr><td>

      Where "nnnn" is taken from the above table.

   2. Add this code just before your </body> tag:

      </td></tr></table>

   3. Now save the document and view it in your browser. Your page will be expanded or compressed to fit into the "nnnn" wide table. If the table width is greater than your screen width, a horizontal scroll bar will appear, allowing you to scroll over to see the whole page. This way you can see what your page will look like on any resolution display.

   4. Make any changes you deem necessary to make your page presentable at all of the standard widths.

   5. When you are done, remove the two lines of code and your page will display correctly on any width display.