A Bare Bones Guide To Quick And Dirty HTML Formatting

(c) 2000, Kevin Hollenbeck

Use the following skeletal structure to turn any document into an HTML document. 

<HTML>
	<HEAD>
<!-- These files contain proprietary information belonging to Cidera Incorporated. -->
<!-- Unauthorized disclosure is prohibited. (c) 2000 Cidera, Inc. --> 
<!-- The person(s) responsible for the content contained herein is(are) [your name(s)] -->
		<TITLE>
		Your document's title should go here.
		</TITLE>
	</HEAD>
	<BODY BGCOLOR="#ffffff">
	<BLOCKQUOTE>
	  	<PRE>
			Your text should go here. 
	  	</PRE>
	</BLOCKQUOTE>
	</BODY>
</HTML>

NB: To convert Microsoft Word documents into HTML, you'll probably have an 
easier time of it if you "Save As" in a "Text Only" format, open the text 
file with a bare bones text editor, paste it into the template above, and 
save as a different document with ".html" at the end of the title. Word 
has a "Save As HTML" function, but generally speaking it doesn't format 
things like columns and tables correctly at all. 

Overview of basic HTML conventions: 

<HTML></HTML> 	These tags go at the beginning and end of the document.
 
<HEAD></HEAD> 	Usually only the title is necessary here, but any data 
		between the HEAD tags will be used by the web browser 
		to determine document-wide characteristics like the 
		author, the flavor of HTML being used, and any keywords
		specific to the document. 
				
<TITLE></TITLE>	The title tags rest within the HEAD tags, and the text 
		between them is presented as the title of the document. 
		You should strive for consistency between the titles of 
		documents and links from other pages to that document.

<BODY></BODY> 	The meat of the document. Everything other than the 
		content between the HEAD tags and the HTML tags should 
		be placed between the BODY tags.
				
<BODY BGCOLOR="#ffffff">	In the early days of the Web, grey was 
		picked as the default color of web pages, on the rationale
		that both images and words would contrast with the color 
		grey. Whatever. Use this tag to make your background
		white. [This single act will distinguish your document
		from My-very-first-web-page-itis.]
				
<BLOCKQUOTE></BLOCKQUOTE>	Blockquote is yet another feature that 
		ought to be a default setting. It adds margins to your 
		document, which is infinitely preferable to text which 
		scrolls off the side of the page. You can nest as many 
		blockquote tags within one another as you like, which 
		is handy when indenting, e.g. for an outline format. 
				
<PRE></PRE> 	Preformatting tags are handy for HTML-izing large 
		quantities of text files in a hurry; they provide no 
		HTML formatting but instead render each document as is, 
		retaining the ASCII text spacing and carriage returns. 
		The font will change to a fixed font (often courier). 

<P></P>	Paragraph break (double carriage return)

<BR>		Line break (single carriage return)

HTML justifies to the top left corner of the document by default, and
won't insert things like line breaks or indentation unless you instruct it
to do so. 

Justifying text:		
no tag				left justify (default setting)				
<CENTER></CENTER>		center justify (<P ALIGN=CENTER></P> will also work). 
<P ALIGN=RIGHT></P>	right justify (note that the formatting stops after the </P> tag). 

Text formatting: 
<B></B>			Bold
<I></I>			Italics
<U></U>			Underline

<FONT SIZE="+1"></FONT>		Increases the font size by one. You can 
		replace +1 with any field from +4 to -2 (you could
		go higher or lower, but readability would become a
		problem). There isn't really a SIZE=0 tag; text
		without any FONT qualifiers will be set at the
		default size. 

<FONT COLOR="#333333"></FONT>		Changes the color to dark grey. Font 
		and document colors should be selected with care; 
		generally speaking anything other than black text
		on a white background is eventually hard on
		the eyes, even if it looks neat at first. 
				
A note on web color: the hexadecimal values for what are called 
browser-safe colors (the 216 colors which are available to both Mac 
and Windows platforms) are RGB values of 00, 33, 66, 99, CC, and FF. 
You can find excellent pages of color tables which order the colors 
by hue and value at http://www.lynda.com/hexh.html and hexv.html. 
				
Hyperlinks:

<A HREF="http://www.cidera.com>Cidera, Inc.</A>	Hyperlink reference 
		tags should be as specific as possible. Avoid
		syntax like "You can link to Yahoo! <A
		HREF="http://www.yahoo.com"> here</A>." Instead,
		use syntax which links the name of the link to
		the link itself: "Follow this link to 
		<A HREF="http://www.yahoo.com">Yahoo!</A>"

Address links: 

Comments to <A HREF="mailto:khollenb(at)cidera.com">khollenb(at)cidera.com</A>. 
		Generally speaking, mailto: tags are a convention
		which only result in copious quantities of spam
		to the webmaster, by the spambots who mine URLs
		for e-mail addresses. And few people use Netscape
		or IE's internal mail clients. But it's still a
		good idea for each web page to have some sort of
		contact info, even if it's not a live link. 

I've added the indents and line breaks for emphasis and clarity; the 
web browser will read the entire document as one long line of code. 
Also, HTML is not case sensitive -- writing <A HREF> or <a href> 
produce the same results. 

So, putting it all together: [This document demonstrates some of the text 
formatting functions -- paste into a text document, save in the format
"name.html", and load it into your favorite web browser to see...]

<HTML>

		<HEAD>

<!-- Comment tags allow you to insert comments which your browser -->
<!-- will ignore. This is handy for comments like "These files -->
<!-- contain proprietary information belonging to Cidera Incorporated. -->
<!-- Unauthorized disclosure is prohibited." and "(c) 2000 Cidera, Inc."--> 

		<TITLE>

		The title of the document should go here.
	 
		</TITLE>

		</HEAD>

	<BODY BGCOLOR="#ffffff">

	<BLOCKQUOTE>

	  <P>The body of the document should go here. </P>
	  	
	  <CENTER>
	  <P><B>Notice that while the P tag equals two carriage returns, 
	  <BR>the BR tag only produces one. 
	  <BR>This allows for copious formatting tricks.</B>
	  </CENTER>
	  	
	  <P ALIGN=RIGHT>
	  <I>While it is possible to right justify text, <BR>it's usually
not the most compatible way to code. <BR>Since different monitor
resolutions can result in vastly different browser sizes, <BR>the
right side of a web document can be much further away in a customer's
browser than on your screen. </I>
	  </P>
	  	
	  <PRE>
	  Any text placed between PRE tags will be captured as is, 
	  	  including 
		    line 
		      breaks      and      spaces. 
		
	  This is handy for formatted text which would 
	  be difficult to render in HTML format, but be aware that the
	  font will change when you do this. 
	  </PRE>

		<P>
		<FONT SIZE="+2">The text of your document</FONT><BR> 
		<FONT SIZE="+1">can be many different sizes</FONT><BR> 
		<FONT COLOR="#999900">and</FONT> 
		<FONT COLOR="#009900">many</FONT> 
		<FONT COLOR="#009999">different</FONT> 
		<FONT COLOR="#000099">colors</FONT> 
		<FONT COLOR="#33ffff">.</FONT> 
	  	<FONT COLOR="#990099">But</FONT> 
		<FONT COLOR="#990000">this</FONT> 
		<FONT COLOR="#999999">gets</FONT> 
	  	<FONT COLOR="#cc9999">plenty</FONT> 
		<FONT COLOR="#00ff00">annoying</FONT> 
		<FONT COLOR="#0000ff">when</FONT> 
		<FONT COLOR="#ff00ff">overdone.</FONT><BR>
		<FONT SIZE="-1">[Not that this has ever stopped anyone.]</FONT><BR>
		<FONT SIZE="-2"><I>[NO, I'm NOT speaking from experience.]</I></FONT>

	  	<P>All content (c) 2000 <A HREF="http://www.cidera.com/">Cidera, Inc.</A>
	  	<P>Comments to <A HREF="mailto:khollenb(at)cidera.com">khollenb(at)cidera.com</A>.
	
		</BLOCKQUOTE>

		</BODY>

</HTML>