HTML Quick-Start Guide

This is a concise guide which includes everything you need to make a good page without including all the extra stuff you don't really need to know. Print this and save a web page template. You can then edit the template to suit your needs and have a good-looking web page in very little time.

Introduction

HTML Tags are usually used like this.

<TheTag>text</TheTag>

For example:

<h1>HTML Quick-Start Guide</h1>

The Basic Page "Outline"

<html>
<head>
<title>HTML Quick-Start Guide (Charles Kelly)</title>
</head>
<body>

<center><h1>HTML Quick-Start Guide</h1></center>

.....The rest of the page goes here....

</body>
</html>

A Short Explanation

What's within the <title> . . . </title> tags shows as the title of the window and becomes the name of bookmarks.
What's between the <center><h1> . . . </h1></center> gives you a centered title at the top of the page.

Font Styles

<b> . . . </b>: Bold font
<i> . . . </i>: Italics

Formatting Tags

<p>: Paragraph Marker. Put this at the end of a paragraph.
<br>: Line Break (1 line, <p> is usually 2 lines)
<hr>: Horizontal Rule. See the horizontal line at the bottom of the page.
<center> . . . </center>: Anything between these tags is centered.
<blockquote> . . . </blockquote>: For quoted text from some other source. (Usually indents from left and right)
<pre> . . . </pre>: For preformatted text. It's best only to use this for tables done in mono-spaced fonts or when you have no time to use the better formatting tags.

Headers

<h1> . . . </h1>: Largest - Use for the page title
<h2> . . . </h2>: 2nd Largest - Use for titles within the page
<h3> . . . </h3>: 3rd Largest - Use for the next level of titles.
<h4> . . . </h4>: 4th Largest - If needed, this is even smaller.
<h5> . . . </h5>: 5th Largest - Hardly ever used.
<h6> . . . </h6>: Smallest - Hardly ever used.

Lists

Unordered List - Bulleted List

Item 1
Item 2

Is done like this.

<ul>
<li> Item 1
<li> Item 2
</ul>

Ordered List - Numbered List

Item 1
Item 2

Is done like this.

<ol>
<li> Item 1
<li> Item 2
</ol>

Definitions LIst

Item 1: Item 1's explanation
Item 2: Item 2's explanation

Is done like this.

<dl>
<dt> Item 1
<dd> Item 1's explanation
<dt> Item 2
<dd> Item 2's explanation
</dl>

The <dd> tag can also be used with unordered lists and ordered lists.

Nested Lists - Lists Within Lists

Item 1
- Nested Item 1b
- Nested Item 2b
Item 2
- Nested Item 1c
  - Nested Item 1d
  - Nested Item 2d
- Nested Item 2c

Is done like this.

<ul>
<li> Item 1
<ul>
<li> Nested Item 1b
<li> Nested Item 2b
</ul>
<li> Item 2
<ul>
<li> Nested Item 1c
<ul>
<li> Nested Item 1d
<li> Nested Item 2d
</ul>
<li> Nested Item 2c
</ul>
</ul>

Certain Characters Require Special Code

" the quote ( " ) character
& the ampersand ( & )
< the less than ( < ) character
> the less than ( > ) character

Links - Those Most Used

Clickable e-mail address - iteslj [at] aitech.ac.jp: <a href="mailto:iteslj [at] aitech.ac.jp">iteslj [at] aitech.ac.jp</a>
(Note that the @ sign was changed to [at] to foil email address harvesting spiders.)
Link to another file - The Internet TESL Journal: <a href="http://www.aitech.ac.jp/~iteslj">The Internet TESL Journal </a>

Links - Other Possibilities

Define a location on a page.: <a name="top"></a>
Link to a location on the same page: <a href="#top">>Go to the top of the page.</a>
Link to a location on another page.: <a href="http://www.aitech.ac.jp/~iteslj#articles">The Internet TESL Journal's Articles </a>

Another Useful Tag

: Put a comment in the HTML source which the user doesn't see.

Make a Fast-Loading Page

I'm sure you have been irritated by pages which have made you wait and wait and wait. Don't let yours be one of these. Remember that while your page may seem to be acceptably fast-loading when you are testing it, it may not seem that way for someone half a world away from your computer.

Keep the file size of your HTML as small as possible After you finish writing your page, remove all the extra spaces and returns from the HTML. These aren't visible to the user, but do add bytes to your file size.
Tables, Javascript, little GIF dots and so on add a lot of code to your page. You may want to consider not using them.
Keep images to a minimum and to the smallest file size possible. Crop them closely, cut the number of colors, reduce the physical size, do anything you can to get them to load quickly.

How to Include Images

<img src="AIT.gif" height=67 width=331 alt="Aichi Institute of Technology">

<img src="AIT.gif"> is also possible, but not recommended. If you don't include the height and width code, your page will have to wait for the images before beginning to layout the text. If you don't include the alt, then users who don't load images can't understand your page.

If you include images, keep the file size small. The image above is only 2,376 bytes even though it is 331 x 67 pixels, because there are only 5 colors. Don't forget to cut the colors to a minimum

<center><img src="kelly.gif" width=76 height=76 alt="My Photo"></center>

Only 2,585 bytes, 32 colors, 76 x 76 pixels

A lot of pages include a much larger photo, but as you can see, this is large enough to easily see. Don't forget to cut your images to the smallest possible size.

Important Points

Tags can be either upper-case or lower-case.
Any number of Carraige Returns and/or any number of spaces are displayed as one space. All others are ignored.
A very important point to remember is that different browsers display HTML differently. Keep your page as simple as possible to insure that it looks good on any computer using any browser.
Tags not understood by a browser are ignored. If you use many of the newer tags in your page, a browser not supporting those tags may not display your page as you expect. It may even display it in an almost unreadable form. All tags on this page are considered safe to use. Some browsers will ignore the <center> tag, but the rest of these tags will produce pages which look pretty much the same using any browser.
In Netscape, in the View menu there is an option to view the Document Source, so any time you see an interesting page, you can view the HTML to see how it was done. In the File menu, you have the option to Save as... source, too. Choose a web page template, save the source, and edit it to suit your needs.

For more informations, go to Yahoo's HTML Guides & Tutorials. You don't really need to buy a book.