HTML Basics

List of html tags.
An HTML Validator.

Tags

Web pages are written in a language called HTML, the hypertext markup language.  HTML is based around the idea of a tag, which is just a marker describing the text in some way.  Tags come in two basic types.  Some tags descibe a section of text, and always come in pairs.  These tags have a start tag and a stop tag.  Here is an example "<strong>Some Important Text</strong>". All the text between <strong> and </strong> will be emphasiesed in some way.

Other tags descibe a particular location within the text.  For example ... <hr> draws a horzontal line across the screen at the point it is placed within the text.

Sometimes tags can have their effect further described by an attribute value.  Every tag has a fixed set of attributes that can be set, and the possible values.  For example,  <h1 align=center> makes a centered heading, as opposed to a default heading.
 

Document Basic Structure

All HTML documents should have be enclosed in a single <html> ... </html> tag.  Within this tag, there should be two more tags.  The <Head> ... </head> tag should enclose things like the title, the author, and other meta-data.  The <body> ... </body> tag should enclose the text and inserts to be displayed.
 

Metadata Tags

Tag Function Example
<title> Display a title on the menubar <title>My page</title>
<meta author> Name the author <meta name="author" content="Keith Parkins">
 

The Body Tag

bgcolor Set the background color <body bgcolor=#rrggbb> ... </body>
<body bgcolor=green> ... </body>
background Install a background image <body background="http://euclid.acs.nmu.edu/~randy/Pictures/Textures/20.jpg">
Can use any valid picture file anywhere on the web.
text Set the text color <body text=#rrggbb> ... </body>
<body text=green> ... </body>

Heading Tags

Headings should be used for their logical meaning, and not for a quick change of font or size. Headings are numbered from 1 (most important) to 6 (least important).  The headings should together make an outline of the document.  Here are some example headings ...
    <h1>My paper</h1>
        <h2 align=center>First subtopic (Birds)</h2>
            <h3 align=right>First subsubtopic (Canaries)</h3>
            <h3>Second subsubtopic (Chickens)</h3>
        <h2>Second subtopic</h2>

Text Tags

<pre> Text is already preformatted <pre> .. some text .. </pre>
<p> End of paragraph Note there is no </p> needed.
<p> Paragraph with options <p align=center> .. </p>
</p> is needed with options.
<center> Centers text without starting a new paragraph. <center>Hi!</center>
<cite> Emphasis.  Usually italics <cite>Cosmpolitan Magazine</cite>
<em> Emphasis.  Usually italics. <em>do NOT press the button</em>
<b> Bold <b>Hi!</b>
<strike> Strikeout.  Generates crossed out text <strike>not</strike>.
Some browsers don't do this well.
<font size> Describes the font <font size=+1>NO</font>
<sub> Subscripts N<sub>2</sub>
<sup> Superscripts N<sup>2</sup>

Links and Images

 
Link  <a href=> <a href="http://whitehouse.gov">the white house</a>
Image <img src= <img src=http://euclid.acs.nmu.edu/~randy/Pictures/Explosions/badger.jpg
width=300 height=400>
Optional attributes include width and height and many others.
 

Special Characters

Char Special Code
> &gt
< &lt
& &amp