HTML for the Terminally Impatient

/in /by

Can’t wait around reading HTML books or waiting for FedEx to rescue your software from that island it washed up on? Well here’s a fast way to get to started. I’ve designed a simple, 2 column template that you can download and use to insert your own information and start learning about HTML. It includes an HTML 4.0-compliant style sheet, a fast loading header and navigation table, and a content table.

  1. You will need to save the page to your machine.At the command menu, click on File > Save As.Save the page in the “Source” or “HTML” format and name it whatever you like so long as the extension is “.html” (Okay, you could make it “.htm” if you really want).
  2. To start using the template, open it in a plain text editor.Your browser may have an option for editing HTML, such as:Netscape — File > Open > Page in ComposerIE — You need to open the page in Notepad or something similar. Opening in MS Word will result in the addition of new code and reformating by the program and is not recommended.
  3. Now search through the code for two percent signs (%%).Any where that you see two percent signs together (%%) should be some instructions in all caps for what replaces that text.For example, <title> %% THE TITLE OF YOUR WEB PAGE GOES HERE %% </title>Replace “%% THE TITLE OF YOUR WEB PAGE GOES HERE %%” with My Test Web Page so that it now looks like this: <title> My Test Web Page </title>

You’ll also find some comments and examples to help you along. In addition, check out the online resources listed below for additional help in your experiments. I recommend saving your test page with a new name as soon as you load the template into the text editor.

And if you somehow destroy the template beyond all repair, just come back and download another one.

You should be able to get by with just the following HTML code:

paragraph,

<p> – which produces a new paragraph

bold,

<b> – which produces bold text

italic,

<i> – which produces italic text

unordered list

<ul> – which produces a bulleted list of list items (<li>)

order list

<ol> – which produces a numbered list of list items (<li>)

definition list

<dl> – which produces a list like this one with a data term (<dt>) followed by the data definition (<dd>)

break

<br> – which can be used to force a break in a line or used to add extra spacing in a line like I do in my numbered list above

All of the tags need a matching closing tag which is </whatever-tag-letters>. For example, the code for a paragraph with bold and italic text would look like this:

<p>
This is a paragraph with <b>bold</b> and <i>italic</i> text.
</p>

And it would look like this in the browser:

This is a paragraph with bold and italic text.

Additional Online Resources

HTML code tutorials

http://hotwired.lycos.com/webmonkey/authoring/html_basics/

For my money, the best set of introductory HTML articles available. since you have a template, you can start with the “Teaching Tool” or the “HTML Cheat Sheet”.

http://www.2kweb.net/html-tutorial/

An impressive online tutorial with examples. Note that you really don’t need to do any fancy font coding because of the style sheet included in the template.

Cloud Computing and Ubuntu

Once you have your new design ready it’s time to find a host for it. There are several studies done about how peer-to-peer cloud computing can help reduce CPU usage and provide a better reliability.

HTML color guides

http://www.webdesign.about.com/compute/webdesign/library/weekly/aa061598chart.htm

A flat page that displays the colors and their codes for quick reference. It will also allow you to see what the colors look like on your monitor — but remember, each monitor will see the colors a little differently.

http://www.visibone.com/

Home of the Visibone company which sells HTML-related reference cards and software. they’ve greatly expanded their offerings in recent years, so you may want to keep any eye on new products.

http://www.visibone.com/colorlab/

This is Visibone’s online interactive color chart. You can select colors from their hue-based color wheel and see how they work with each other, either side by side or as link or text colors on top of the other colors. Very handy way to find out that you really can’t use that bright blue you love with the dull red.