Introduction

Learning HTML

Documentation

• The bare bones html guide.
• The tutorial for FORMS.
• For the masochists, try the official standards documents for HTML 3.2 and HTML 4.01.

Proofreading

The W3 Consortium offers an on-line validator for the various HTML dialects. It is sort of a Lint for HTML. It can ensure your HTML will work properly on browsers other than the one you tested it on. The W3C consortium also controls the various HTML standards.

For speed, and control, I use  CSE HTMLValidator to check my web pages off-line and in batches.

When it comes to HTML4, and CSS style sheets, browser support is shaky. TopStyle will help you keep track of which features work on which browsers.

The Tags

Class

Groups

Line Breaks

Font selectors

sample

Comments

Comments are not treated as white space. e.g. grand<!-- a comment in the middle of a word -->stand will render as grandstand not grand stand.

Anchors

<h2><a name="GLOSSARY">Roedy&rsquo;s Java Glossary</a></h2>

1. The HTML 4.01 spec section 6.2 states that anchor names must begin with a letter a-z, A-Z, and may be followed by any number of letters, digits 0-9, hyphens -, underscores _, colons :, and periods .. So lead _ are not permitted. All numeric anchors are not permitted.
2. Anchor names are supposed to be case insensitive. Apple is supposed to be treated as the same as APPLE. To be safe, always consistently use UPPER CASE.
3. For indirect links, use a trailing underscore _ on the anchor name, e.g. MAC_ so you will know not to refer people to those dummy anchors, but rather directly to the HTML at that anchor points to. For example the HTML at anchor at MAC_ may say "see MACINTOSH". People are lazy and will get angry if you send them to anchor MAC_ rather than anchor MACINTOSH, because they have to do an extra click to get to MACINTOSH where the real information is.

Links To

Colours

Click any ball to view the corresponding colour palette.

Named Colours		Alphabetically (113)		BHS: by Brightness, Hue, Saturation		HBS: by Hue, Brightness, Saturation		SBH: by Saturation, Brightness, Hue		Java AWT Colours (16,777,216)
		RGB: Numerically (113)		BSH: by Brightness, Saturation, Hue		HSB: by Hue, Saturation, Brightness		SHB: by Saturation, Hue, Brightness		Java Swing Colours (16,777,216)
Numbered Colours		HTML 3.2 (16)		Websafe (216)		Rainbow (4096)		Spectrum (401)		X11 (657)
Selected Colours		Pale (256)		Dark (2022)		Simple (105)		Greys (256)		Colour Schemes

Figures

Indenting

<ul>
...
</ul>

The official way is to use CSS styles.

<div style="padding-left: 30px">
...
</div>

<style type="text/css">
p {padding-left: 30px}
</style>

<style type="text/css">
p.leftpad {padding-left: 30px}
</style>

<p class="leftpad">
...
</p>

Unfortunately, the technique does not handle nesting. <div> does however.

To indent just the first line of each paragraph, use:

<p style="text-indent: 30px">

Composition Tools

I like to create my web pages with a text editor , but if you want a tool to help you compose HTML in a more WYSIWYG style try one of these:

• SlickEdit: This is what I use — a general purpose editor. It has HTML and Java syntax colouring which makes it much easier to avoid typos, and Java and HTML beautifying to nicely indent the tags.
• DreamWeaver: A professional tool for creating HTML, and HTML with embedded JSP, PHP, ASP, ColdFusion etc.
• Netscape Composer: part of Netscape Communicator.
• TopStyle: helps you compose and manage your style sheets.
• Microsoft FrontPage 2000
• The Quoter Amanuensis will automatically convert HTML’s reserved characters to their &amp &eacute; &copy; etc. form. You just copy your text to the clipboard, click CONVERT on the amanuensis, then paste the converted text into your document in a text editor such as SlickEdit.

Decorating

• Paint Shop Pro: bit map paint program, format conversions.
• Adobe Photoshop: Touching up photographs. Includes ImageReady.
• Eye Candy: special effects addin to Paint Shop Pro or Adobe Photoshop.
• NVR Border Mania: simple program to add borders to images.

Special Character Entity Codes

The entities such as &divide;&#x2713; only work in HTML, not Java. In Java, you get at the exotic characters by encoding them in hex in your strings like this: "\u00f7\u2713" to produce ÷ ✓. See String literals for more details.

For official set of W3C entities see this definitive list of entities. For the newer character entities that are not yet fully supported, see Robin LionHeart Illustrated Entity Table. His table shows both decimal and hex encoding and shows you what the characters look like, unlike the more complete W3C official documents. Please tell me about any omissions in my own tables. Last revised 2005-06-24.

Standard Prelude

The header, link, meta and body tags have the following purposes:

• DOCTYPE

  says which level of HTML you are using.
  • If you use a strict DTD, you must have absolutely perfect HTML, something quite unlikely unless your website is generated by a computer program.
  • If your page has frames, use a frameset DTD.
  • For most websites, use a more relaxed loose DTD.
  • If you want an XML-like markup with strictly matching tags and more consistency than regular HTML, use one of the XHTML DTD.
  Here are the DOCTYPEs I use on this website:
  Which DOCTYPE to use?: you need a different one depending on whether you are doing plain, frameset or strict html. Note DOCTYPE HTML PUBLIC should be upper case. Here are the possible DOCTYPES:

• link href

  point to your master CSS style sheet.

• link meta

  ICRA rating for sexual and violent content. Replaces old PICS labels.

• link rev

  give author’s email address. Used by Lynx browser. Watch out for spam harvesters. I don’t use it.

• link home

  Allows keystroke shortcut to get to home page.

• link icon

  icon for the task bar. Must be 16x16. IE ignores it in favour of the site level favicon.ico. Netscape igonores it entirely. Opera, Firefox and Sea Monkey will scale it to 16x16 which will usually badly distort it. The URL is relative to the current page.

• link prev

  specify the logically previous page so browser can do a better back/up. You can also have a next link to the next logical page to help the browser navigate. There are all kinds of special links you can embed for browsing via a toolbar.

• Content-Language

  the language you wrote the page in, usually en for English. See the list of possible language codes.

• Content-Style-Type

  Says we are using CSS as our stylesheet language. Without it embedded style markup might be ignored or misinterpreted.

• Content-Type

  Tell which character set encoding you are using, e.g. which accented letters you use. Normally iso-8859-1 for Latin-1, sometimes iso-8859-3 for Esperanto, or Unicode (or utf-8 for compact Unicode) to handle nearly all languages, including Arabic, Thai and Chinese.

• icra-label

  encodes your document for adult content, if any.
  ICRA

• Author

  author’s name.

• Copyright

  © copyright of the web page.

• Description

  Summary of what’s on the page. Used by search engines to summarise the page for people. Should be more detailed than the title.

• Generator

  What tool you used to create the HTML.

• Keywords

  important words in the document. Used by search engines to direct people to your document. Avoid using concept words that don’t actually appear in the document. Search engines think you are cheating.

• title

  Title used to display a hit by a search engine. Also used on the window bar when the page is displayed.

• body tags

  are for CSS-challenged browsers that don’t understand the style sheet.

Body Tag Details

CSS Styles

CSS Style Sheets

<x-sigsep>
<p>
</x-sigsep>

<blockquote type="cite" class="cite" cite>
...
</blockquote>

Learning More

• dot HTML on-line HTML guide.
• dot CSS on-line CSS guide.
• Visibone make a series of cheat sheets, both on-line and printed. Some show the full Unicode set and the extended Unicode &xxx codes. Others show CSS. Others show XHTML. Some are colour charts.