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>