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

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

Is done like this.
<ul>
<li> Item 1
<li> Item 2
</ul>

Ordered List - Numbered List

  1. Item 1
  2. 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

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

&quot; the quote ( " ) character
&amp; the ampersand ( & )
&lt; the less than ( < ) character
&gt; 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

<!-- Last edited by Charles Kelly, May 10, 1996 -->
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.

How to Include Images

Aichi Institute of Technology

<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

My Photo

<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


For more informations, go to Yahoo's HTML Guides & Tutorials. You don't really need to buy a book.
Copyright (C) 1996 by Charles I. Kelly