Quick HTML Basics

Table of Contents

  1. Legend
  2. Comments
  3. Necessary HTML Document Tags
  4. Colors
  5. Text Formatting
  6. Special Characters
  7. Paragraph Formatting Tags
  8. Images
  9. Hyperlinks
  10. Lists
  11. Tables
  12. Lines
  13. Sounds and Movies
  14. Frames
  15. Forms

Legend

Bold tag and parameter names
Italics parameters
{ ... } optional parameters
[ ... ] optional parameters
value1|value2 choice of parameters
When referring to which browsers Support a particular tag, a two letter code plus a version number will be used (e.g. IE7=Internet Explorer® version 7). The version number indicates the version tested to. All subsequent version should also support the tag. The browser codes are:

Internet Explorer® IE
Firefox® FF
Opera® OP
Safari® SF
Chrome® CH
Top

Comments

<!-- comment text -->

Comment text is not shown by the browser. It can be used for adding comments to your code and temporarily removing sections of a document while preserving the structure. HTML tags within comments are ignored.

Top

Necessary HTML Document Tags

Every HTML Document must have the following tags:

<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> title text </title>
</head>
<body {background="graphic_file_location" bgcolor="literal|#RGB" text="literal|#RGB" link="literal|#RGB" alink="literal|#RGB" vlink="literal|#RGB"}>
HTML tags and page text
</body>
</html>

The <body> tag has five optional attributes; however, the preferred way to change body attributes is through a Cascading Style Sheet.

Top

Colors

All colors in HTML are defined either as color literals or RGB color numbers. the color literals are representative names for the colors (e.g. grey). The RGB colors are 6 digit hexadecimal numbers preceded by a #. The first 2 digits are the value of red, the second 2 are green and the last two are blue. Some color literals and their equivalent RGB values are:

"black"
"#000000" "silver"
"#C0C0C0"
"grey"
"#808080" "white"
"#FFFFFF"
"maroon"
"#8E236B" "red"
"#FF0000"
"purple"
"#800080" "fuchsia"
"#FF00FF"
"lime"
"#32CD32" "green"
"#00FF00"
"olive"
"#808000" "yellow"
"#FFFF00"
"navy"
"#000080" "blue"
"#0000FF"
"teal"
"#008080" "cyan"
"#00FFFF"
Although over 16 million colors can be represented using the RGB color system, only 216 colors are considered safe with all browsers.

Chart of RGB colors and color literals.

Top

Text Formatting

<b>This is an example of bold text</b> (<strong> preferred) CSS

<i>This is an example of italics text</i> (<em> preferred) CSS

<u>This is an example of underline text</u> (not supported in HTML 5) CSS

<strike>This is an example of strikethrough text</strike> (not supported in HTML 5) CSS

<tt>This is an example of non-proportional font text.</tt> (not supported in HTML 5) CSS

This is a <sub>subscript</sub> text example. CSS

This is a <sup>superscript</sup> text example. CSS

This is a <big>big</big> text example. (not supported in HTML 5) CSS

<big> tags can be nested.

This is a <small>small</small> text example. To replicate pre-HTML5 behavior use CSS

<font> (Not supported in XHTML 1.0 and HTML 5. Substitutions are available.)

The following Logical Text Formatting Tags may vary in appearance depending on the browser; however, the physical representation of the tag can be set using a Cascading Style Sheet. In HTML 4, 5 and XHTML 1.0, these tags are preferred to the Physical Text Formatting Tags.

<h# {align="left|center|right"}>text</h#> used to create headings. Where # is a number between 1 and 6 where 1 is the largest size and 6 the smallest. On a separate line. align determines position of line with left as default.

h1

h2

h3

h4

h5
h6

This is a <em>Emphasis</em> text example.

This is a <strong>Strong</strong> text example.

This is an <address>

Address
</address> text example. (May contain an automatic line break.)

This is a <cite>Citation</cite> text example.

This is a <dfn>Definition</dfn> text example.

This is a <del>Deleted</del> text example.

This is a <ins>Inserted</ins> text example.

This is a <code>Program Code</code> text example.

This is a <var>Variable</var> text example.

This is a <samp>Sample Output</samp> text example.

This is a <kbd>Keyboard Input</kbd> text example.

This is a <q>Quoted</q> text example. Text should appear in quotes. (Support FF2, OP9, SF3)

This is a <abbr title="meaning of abbreviation">abbr.</abbr> (abbreviation) text example. Placing the cursor over the abbreviation text should cause the meaning of abbreviation to appear in a Tooltip window. (Support FF2, OP9)

This is a <acronym title="meaning of acronym">WWW </acronym> (acronym) text example. Placing the cursor over the acronym text should cause the meaning of acronym to appear in a Tooltip window. (not supported in HTML 5- use ABBR) (Support FF2, OP9, IE7)

Top

Special Characters

&#numeric value;   or   &symbolic value;

CharacterNumericSymbolic CharacterNumericSymbolic
<&#60;&lt; >&#62;&gt;
&&#38;&amp; "&#34;&quot;
non-breaking space&#160;&nbsp; ¢&#162;&cent;
£&#163;&pound; ¥&#165;&yen;
®&#174;&reg; ©&#169;&copy;
&#153;&trade;(FF2,IE7,OP9) °&#176;&deg;
¼&#188;&frac14; ½&#189;&frac12;
¾&#190;&frac34; ±&#177;&plusmn;
÷&#247;&divide; ×&#215;&times;
ñ&#241;&ntilde; Ñ&#209;&Ntilde;
¡&#161;&iexcl; ¿&#191;&iquest;

Special & International characters can be included using this method.

Top

Paragraph Formatting Tags

<br /> break, forces a carriage return.

<p {align="left|center|right|justify"}>paragraph text</p> aligns the entire paragraph as specified within the tag and forces 2 carriage returns. (justify Support FF2, IE7, OP9)

<div align="left|center|right|justify"> data </div> align sections of a page. (justify Support FF2, IE7, OP9)

<center> data </center> centers. Not supported in XHTML 1.0. Use <div> or <p> tag with align="center".

<nobr>text block<wbr>text_block</nobr> forces text not to wrap.
<wbr> used with <nobr>text block</nobr> to specify a possible break point for text (Support SF3, IE7). Not supported in XHTML 1.0. Use substitutions.

<pre>text</pre> preformatted text. Text is reproduced with all spaces, tabs and carriage returns in a fixed font.

<blockquote>text block </blockquote> text block is indented.

HTML5 introduced header, footer, section, article, aside, nav. The elements act like the div tag but give the segments of the page better description of their function. Support FF7, IE9, OP10, CH10, S5.

Top

Images

Silly test image <img src="filename" alt="text" {align="top|middle|bottom|left|right" border="pixels"} />

The only formats allowed in an image tag are png, gif and jpeg(jpg).

<figure>
<img src="
filename" alt="text">
<figcaption>
caption text</figcaption>
</figure>

The caption text is placed below the image. Note: positioning may fail if align is used in the image tag.

Top

Hyperlinks

<a href="url|{url}#internal_link_name|mailto:email_address"|name="internal_link_name" {target="frame_name}"> link_text </a>

The link tag has one required attribute with two options (href|name) and one optional attribute.

Top

Lists

definition list - definition terms followed by indented (or tabbed if compact - supported by IE only) blocks of definition data.

<dl {compact}>
<dt>definition term</dt>
<dd>definition data</dd>
</dl>

unnumbered list - headers followed by bulletted list items.

<ul {type="disc|circle|square"}>
list header
<li {type="disc|circle|square"}>list item</li>
</ul>
numbered list - headers followed by automatically numbered list items.

<ol {start="#" type="1|A|a|I|i"}>
list header
<li {value="#" type="1|A|a|I|i"}>list item</li>
</ol>
    List of numbering styles
  1. type=1
  2. type=A
  3. type=a
  4. type=I
  5. type=i
  6. type=1 value=27

Top

Tables

<table {border[="pixels"] width="percent%|pixels" align="left|right|center" cellpadding="pixels" cellspacing="pixels" summary="description_of_table"}> table rows </table>
table is enclosed within these tags.

<caption {align="top|bottom"}> caption text </caption>
provides a caption at the top or bottom of the table.

<tr {align="left|center|right" valign="top|middle|bottom" bgcolor="literal|#RGB" background="picture_url"}>data elements</tr>
Delineates a row of data elements. The <th> and <td> tags must be enclosed within the row tags.

<th {align="left|center|right" valign="top|middle|bottom" nowrap rowspan="#" colspan="#" width="percent%|pixels" bgcolor="literal|#RGB" background="picture_url"}>heading</th>
A table heading. The data within the tag will be default centered horizontally and vertically and boldface. Same attributes as <td>

<td {align="left|center|right" valign="top|middle|bottom" nowrap rowspan="#" colspan="#" width="percent%|pixels" bgcolor="literal|#RGB"}>data</td>
Data appears in a cell. Default alignment is left justified, middle vertically aligned. The data can be text, images and hyperlinks. Table heading and data tags without data are used as place holders to correctly align the cells within the table. To create an open looking blank cell, add the <br> tag or the non-breaking space (&nbsp;) as data.

These tags group table rows. They are not supported by all browsers.

<thead {align="left|center|right" valign="top|middle|bottom"}>table_rows</thead>
<tbody {align="left|center|right" valign="top|middle|bottom"}>table_rows</tbody>
<tfoot {align="left|center|right" valign="top|middle|bottom"}>table_rows</tfoot>

Top

Lines

<hr {align="center|left|right" size="thickness in pixels" width="percent%|pixels" noshade /}>

<fieldset><legend>legend_text</legend>any HTML elements</fieldset>

The Fieldset tags create a box around other elements within a document. The Legend text appears in the upper left border of the Fieldset Data within the Fieldset will center or right justify if the Fieldset is within an aligned Div tag (but not a P tag) and SF will also align the Legend. For Opera and IE, the Legend must appear before the other tags within the Fieldset. The Fieldset encloses the entire area from margin to margin unless CSS is used.

Top

Sounds and Movies

Sound and Movie files can be added to documents as specialized hyperlinks that have the same format as hyperlinks. The browser determines how to handle a hyperlink by examining the extension of the file name.

To cause a sound or movie file to play as soon as the page loads, use the embed tag:

<embed src="file address" {alt="text" width="pixels" height="pixels" vspace="pixels" hspace="pixels" loop="true|false" hidden="true|false" autostart="true|false" volume="percent" align="left|middle|right|top|bottom"} />

Top

Frames

NOTE: Only inline frames will be supported in HTML 5.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>
title of entire framed document</title>
</head>
<frameset rows|cols="
pixels|%|*,pixels|%|*,..." frameborder="yes|no" framespacing="pixels" border="pixels" bordercolor="RGB|literal">
<frame src="
url" name="frame_name" frameborder="pixels" framecolor="RGB|literal" marginheight="pixels" marginwidth="pixels" scrolling"yes|no|auto" noresize>
...
...
<noframes>

Message for browsers without frames capabilities.
</noframes>
</frameset>
</html>

The FRAMESET tag replaces the body tag.

There must be a <FRAME> or <FRAMESET> tag for each of the numbers in the ROWS or COLS attribute. <FRAME> tag:

<NOFRAMES> tags enclose text shown to users without frames capabilities.

Inline Frames

Inline frames place a seperate document inside your page. This is done with the IFRAME tag:
<iframe src="filename" {align="top|middle|bottom|left|right" scrolling="yes|no|auto" width="pixels" height="pixels" frameborder="1|0" name="frame_name"}></iframe>
Top

Forms

The FORM tag and its associated tags provide a means of obtaining user input. Unlike other tags, the Form requires an associated program to perform its tasks.

<form {method="get|post" action="url " enctype="type_literal" name="script_reference"}> form_data </form>

All parameters are optional. Whoever programs the script that accompanies your form will fill in the correct values for any parameters that need to be set.

<input type="checkbox|radio|hidden|reset|submit|image|button|text|password" name="script_reference" value="value" checked size="# of text characters" maxlength="max # of text characters" readonly src="image_url" align="top|middle|bottom|left|right" alt="text" border="pixels">

INPUT is a general purpose tag whose appearance and function varies drastically depending on the parameters used. The parameters are:

<textarea name="script_reference" cols="# of text characters" rows="# of text characters" readonly wrap="off|soft|hard|virtual|physical"> default_text </textarea>

TEXTAREA provides a way to receive multiple lines of text complete with carriage returns. Any text between the opening and closing tags will appear in the box by default. The parameters are:

<select name="script_reference" {size="#_of_displayed_selections" multiple disabled}>
<optgroup label="
group_label">
<option value="
value" disabled> list_text </option>
...
...
</select>

SELECT provides a method to choose from a list of options. The selected Option's Value is sent to the server when the form is submitted. The parameters for Select are:

OPTION statements create the entries in the list. The list_text is displayed in the list to identify the selection. The parameters for the Option statement are:

OPTGROUP statements group the option entries below them. NOTE: if a class or style is assigned to an Option group it will apply to all options within the group. The attributes for the Optgroup statement are:

Top