Spacers

<br>
Forces a line break immediately and retains
the same style. (carriage return)

<P>
Forces a double line break. (new paragraph)

<hr>
Places a horizontal rule or separator
between sections of text.

Headers

<h1> . . . </h1> Most prominent header
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6> . . . </h6> Least prominent header
<font size="1"> Font size 1 </font>

<font size="2"> Font size 2 </font>

<font size="3"> Font size 3 </font>

<font size="4"> Font size 4 </font>

<font size="5"> Font size 5 </font>

Font Color

<font color="FFCCFF">Hex Color Code, "FFCCFF" </font>

<font color="yellow"> Named Color, "Yellow" </font>

Font Styles

<font face="Helvetica"> Helvetica font</font>

<font face="Baskerville"> Baskerville font</font>

<font face="Lucida"> Lucida font</font>

Text Styles

<b> Boldface </b>

<i> Italics </i>

<u> Underline </u>

<tt> Typewriter font </tt>

<em> Emphasis </em>

<stronge> Stronger emphasis </strong>

<code> Display as HTML code font </code>

<samp> Include sample output </samp>

<kbd> altereagle.com </kbd> Display keyboard key font

<var> Define a variable </var>

<cite> Display a citation </cite>

<blink> makes text blink </blink> only in Netscape

<strike> cross out text </strike> cross out text

To Place a Picture

src= Specifies the location of the image.

URL= Uniform Resource Locator (address on the Web)

<img src="http:// url of your image">

alt =Alternate text appears in place of the
image when the browser can not display image.
(Not Required)

<img src="http:// url of your image" alt="image description">


Making a Clickable Link

Text Link

<a href="http:// url of the target"> Click here </a>

Image Link

<a href="http:// url of the target"><img src="http:// url of your image"></a>

Email Address Link

<a href="mailto:YourEmail@Address.here"> Email Me </a>

Background Color & Image Patterns

Background Color

<bgcolor="green">

Image Background Pattern

<body background="http:// url of your image">

<table background="http:// url of your image">

Style Background Image Tags
(good for ebaY, Do Not Use On Message Board)

<style>
<!--Body {background: url(http://url of your image)}-->
</style>

Alignment

Specify a relationship to surrounding text.
can be one of these:

<center> </center>

New paragraph + align

<p align="left">
<p align="center">
<p align="right">

Alignment Within a Table <td align=..... >
can be one of these:

<td align="left">
<td align="center">
<td align="right">

Vertical Alignment <td valign=..... >
can be one of these:

<td valign="top">
<td valign="middle">
<td valign="bottom">

Table Tags

<table> </table>
Start and Closing tags of a Table.

<tr> </tr>
Start and Closing tags of a Table Row.

<td> </td>
Start and Closing tags of the Table Data.

Simple Tables

<table border=2>
<tr>
<td> Gene </td><td> Mary </td>
</tr>
</table>
Gene Mary

<table border=2>
<tr>
<td> Sunny </td><td> Sam </td>
</tr>
<tr>
<td> Karen </td><td> Shane </td>
</tr>
</table>
Sunny Sam
Karen Shane

Definition list/glossary: <dl>

<dl>
<dt> First term to be defined
<dd> Definition of first term
<dt> Next term to be defined
<dd> Next definition
</dl>
The <dl> attribute compact can be used togenerate
a definition list requiring less space.

Unordered list: <ul>

    <ul>
  • <li> First item in the list
  • <li> Next item in the list
  • </ul>

Ordered list: <ol>

    <ol>
  1. <li> First item in the list
  2. <li> Next item in the list
  3. </ol>

Interactive menu: <menu>

<menu>
  • <li> First item in the menu
  • <li> Next item
  • </menu>

    • Directory list of items: <dir>

  • <dir>
  • <li> First item in the list
  • <li> Second item in the list
  • <li> Next item in the list
  • </dir>

    • Listed items should be less than 20 characters long.

    HTML Forms Interface

    The HTML forms interface allows web masters to define HTML documents containing forms to be filled out by a visitor. When a visitor fills out the form and presses a button theform is "submitted." The information on the form is sent toa server for processing. The server will usually send back an HTMLdocument using the information supplied by the visitor and return it for display.

    The following tags implement the forms interface:

    • <form> . . .
    • <input>
    • <select> . . . </select>
    • <option>
    • <textarea> . . . </textarea>
    • .....</form>
    The four middle tags can only be used within a<form> . . . </form> element.

    Define a form<form> . . . </form>

    Defines a form within an HTML document.A document may contain multiple <form> elements, but <form> elements may not be nested.Note that standard html tags can be used within a <form> element.Attributes and their arguments:

    action="URL"
    The location of the program that will process the form.

    method=data_exchange method
    The method chosen to exchange data between the visitor and the programstarted to process the form: One of get or post. post is preferred for most applications.
    Example:
    <form action="http://www.gord.ws/cgi-bin/register" method=post> . . . </form>

    Define an input field <input> (there is no ending tag)

    Defines an input field where the user may enter information on the form.Each input field assigns a value to a variable which has a specified name and a specified data type.Attributes and their arguments:

    type="variable_type"
    Specifies the data type for the variable, where:
    • type="text" (and) type="password"
      fields accept character data
    • type="checkbox"
      fields are either selected or not
    • type="radio"
      fields of the same name allow selection of only one of the associated values
    • type="submit"
      defines an action button that sends the completed form to the query server
    • type="reset"
      defines a button that resets the form variables to their default values
    • type="hidden"
      defines an invisible input field whose value will be sent along with the other form values when the form is submitted. This is used to pass state information from onescript or form to another.
    • type="image"
      defines an image map within a form and returns the coordinates of a mouse click within the image.
    name="textstring"
    where textstring is a symbolic name (not displayed) identifying the input variable as in:
    <input type="checkbox" name="box1">
    value="textstring"
    where the meaning of textstring depends on the argument for type.

    • For type="text" or type="password",textstring is the default value for the input variable. Password values will not be shown on theuser's form. Anything entered by the user will replace any default valuedefined with this attribute.
    • If type="checkbox" or type="radio",textstring is the value that will be sent to the server if the checkbox is "checked".
    • For type="reset" or type="submit",textstring is a label that will appear on the submit or reset button in place ofthe words "submit" and "reset".
    checked
    No arguments. For type="checkbox" or type="radio", if checked is present the input field is "checked" by default.
    size="display_width"
    where display_width is an integer value representing the number of characters displayed for the type="text" or type="password" input field.
    maxlength="string_length"
    where string_length is the maximum number of characters allowed within type="text" or type="password" variable values. This attribute is only valid for single line "text" or "password" fields.
    Define a select field<select> . . . </select>

    Defines and displays a set of optional list items from which the user can select one or more items. This element requires an <option> element for each item in the list.Attributes and their arguments:

    name="textstring"
    where textstring is the symbolic identifier for the select field variable.
    size="list_length"
    where list_length is an integer value representing the number of <option> items that will be displayed at one time.
    multiple
    No arguments. If present, the multiple attribute allows selection of more than one <option> value.
    Define a select field option<option>

    Within the <select> element the <option> tags are used to define the possible values for the select field. If the attribute selected is present then the option value is selected by default. In the following exampleall three options may be chosen but bananas are selected by default.

    <select multiple>
    <option>Apples
    <option selected>Bananas
    <option>Cherries
    </select>

    Define a text area<textarea> . . . default text . . . </textarea>

    Defines a rectangular field where the user may enter text data.If "default text" is present it will be displayed when the fieldappears. Otherwise the field will be blank.Attributes and their values:

    name="textstring"
    textstring is a symbolic name that identifies the <textarea> variable.

    rows="num_rows" (and) cols="numcols"
    Both attributes take an integer value which represents the lines and number of characters per line in the <textarea> to be displayed.

    HTML Reference Page