"Basic" HTML Code Guide

(for Basic HTML Document Structure)
Making your own web page

Use this guide for on-line help with HTML markup code that you come across. Since HTML is ever-changing, this is just a basic guide that should help most beginners make a basic web site. I stress,... this really is a "Basic" guide, and not intended for advanced HTML, DHTML or JavaScript etc. Be aware that most of the code presented below can be copied with your browser and "cut" and "pasted" into your own documents for easy use!

Table of Contents............click a topic

The Basic HTML Page Structure
Titles & Fonts
Bulleted & numbered Lists
Paragraph styles
Element styles
Graphics
References
Special Characters
Special Commands
Tables
Reference of Basic Colors
Adding Buttons
Adding Sound to your Pages.

Structure

<html>
<head>
<title>Header title</title>
</head>
<body>

Here is the main text of the document

</body>
</html>

Back to the Table of Contents

Titles

<H1>Title 1</H1>

Title 1

<H2>Title 2</H2>

Title 2

<H3>Title 3</H3>

Title 3

<H4>Title 4</H4>

Title 4

<H5>Title 5</H5>

Title 5

<H6>Title 6</H6>

Title 6

Fonts

Any standard Windows font can be used but it is best to use the most common fonts.
Example:

Arial

Courier

Modern

MS Sans Serif

MS Serif

Roman

Script

They can be utilized with size variables (1-7) and color codes like in the following example:
FONT SIZE=4 FACE="MS SANS SERIF" COLOR="#FF0000"
(of course in HTML brackets...) followed by a /FONT (also in HTML brackets)
which prints the text before the (end font) command... Like this:
Text

Font size is the opposite of (heading sizes) "above"... Bigger font size numbers... make larger font sizes.

Back to the Table of Contents

Lists

<DL>definition list
<DT>this is a keyword
<DD>This is the definition.
<DT>This is the next keyword
<DD>And the next definition.
</DL>

this is a keyword: This is the definition.
This is the next keyword: And the next definition.

<DIR>This is a directory list
<LI>This is an entry.
<LI>This is the next entry
</DIR>

This is a directory list

This is an entry.

This is the next entry

<MENU>
<LI>Dies ist MENU item 1
<LI>Dies ist MENU item 2
</MENU>

Dies ist MENU item 1

Dies ist MENU item 2

<OL>ordered list
<LI>first entry
<LI>second entry
</OL>

first entry
second entry

<UL>unordered list
<LI>first entry
<LI>second entry
</UL>

first entry
second entry

Back to the Table of Contents

Paragraph styles

<LISTING>This is listing text</LISTING>

This is listing text

<EM>This is emphasis text</EM>

This is emphasis text

<STRONG>This is strong text</STRONG>

This is strong text

<CODE>This is programcode</CODE>

This is programcode

<SAMP>This is sample text</SAMP>

This is sample text

<CENTER>This is centered text</CENTER>

This is centred text

Back to the Table of Contents

Element styles

<B>bold</B> bold

<U>underlined</U>

underlined

<S>strike through</S>

~~strike through~~

<SUP>superscript</SUP>

TEXT^superscript

<SUB>subscript</SUB>

TEXT_subscript

<I>italic</I>

italic

Back to the Table of Contents

Graphics

Alternate view of a non existing picture

<img  src="/gifs/nonexistant.gif" alt="alternate text">

Using a graphic as a background

within the body tag of your page...

<body bgimage="APOL.GIF">

White background

Use this code within HTML brackets:
bgcolor="#FFFFFF"

A black page

see above, use color "#000000"

Some body-related options

BACKGROUND="link_and_name_of_background"
BGCOLOR="#000000"
TEXT="#FFFFFF"
LINK="#888888"
VLINK="#FF0088"
ALINK="#0088FF"

Text floating around the left of a picture

text .. text
<img  width=66 height=40 
src="/gifs/testpicture.gif" alt="picture" 
align="right" hspace=10>
text .. text

text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ... text ...

Text floating around the right of a picture

text .. text
<img  width=66 height=40 
src="/gifs/testpicture.gif" alt="picture" 
align="left" hspace=10>
text .. text

text ... text ... text ... text ... text ... text ... text
text ... text ... text ... text ... text ... text ... text
text ... text ... text ... text ... text ... text ... text

text ... text ... text ... text ... text ... text ... text
text ... text ... text ... text ... text ... text ... text
text ... text ... text ... text ... text ... text ... text
text ... text ... text ... text ... text ... text ... text
text ... text ... text ... text ... text ... text ... text
text ... text ... text ... text ... text ... text ... text

Alignment at the top

text .. text 
<img  src="/gifs/testpicture.gif" alt="picture" align="top" hspace=10> 
text .. text

text ... text ... text ... text ... text ... text ... text
text ... text

text ... text
text ... text ... text ... text ... text ... text ... text

Alignment at the middle

text .. text 
<img  src="/gifs/testpicture.gif" alt="picture" align="middle" hspace=20> 
text .. text

text ... text ... text ... text ... text ... text ... text
text ... text

text ... text
text ... text ... text ... text ... text ... text ... text

Alignment at the bottom

text .. text 
<img  src="/gifs/testpicture.gif" alt="picture" align="bottom" hspace=30> 
text .. text

text ... text ... text ... text ... text ... text ... text
text ... text

text ... text
text ... text ... text ... text ... text ... text ... text

Finishing float around area

text .. text 
<img  src="/gifs/testpicture.gif" alt="picture" align="left" hspace=30> 
text .. text<BR>
text .. text<BR>
text .. text<BR>
text .. text<BR CLEAR=ALL>

text ... text ... text ... text ... text ... text ... text
text ... text

text ... text
text ... text
text ... text
text ... text
text ... text ... text ... text ... text ... text ... text

The test picture at half size

<img  width=33 height=20 
src="../images/logo.gif" alt="picture" 
align="left" hspace=10>

Back UP to the Table of Contents

References

An absolute reference

<A HREF="http://www.familyway.net">Link to an outside site.</A>

Link to an outside site.

A relative reference

<A HREF="../index.html">The Homepage here.</A>

The homepage here.

A reference in the same document

<a href="#TOC">Table of Contents </a>

Table of Contents

Back UP to the Table of Contents

Special Characters

Ä : Ä Ë : Ë Ï : Ï Ö : Ö Ü : Ü ä : ä ë : ë ï : ï ö : ö ü : ü Ç : Ç ç : ç á : á é : é í : í ó : ó ú : ú à : à è : è ì : ì ò : ò ù : ù â : â ê : ê î : î ô : ô û : û & : & " : " < : < > : > © : © ® : ® æ : &aelig å : &aring ã : &atilde ð : &eth ñ : &ntilde ø : &oslash õ : &otilde ß : &szlig þ : &thorn ý : &yacute ÿ : &yuml

Back UP to the Table of Contents

Special Commands

will not be displayed

Rulers:

<HR WIDTH=75%> reduced horizontal ruler

<HR SIZE=6%> bold horizontal ruler

Mail:

<A HREF="mailto:somebody@location"> somebody@location </A>

somebody@location

Choosing the size of text:

<font size="1">size = 1</font>
size = 1

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

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

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

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

<font size="6">size = 6</font>
size = 6

<font size="7">size = 7</font>
size = 7

Back UP to the Table of Contents

Basic Colors

these are the basic colors used in Fonts, HR lines, Table borders, etc....

Red "#FF0000"
Light Red "#FF8080"
Pink "#FFC0C0"
Mid Red "#C00000"
Dark Red "#800000"
Black "#000000"
White "#FFFFFF"
Grey "#C0C0C0"
Dark Grey "#808080"
Charcoal "#404040"
Orange "#FF8000"
Lt. Orange "#FFC080"
Yellow "#FFFF00"
Light Gold "#C0C000"
Dark Gold "#808000"
Green "#00FF00"
Mid Green "#00C000"
Dark Green "#008000"
Forest Green "#004000"
Blue "#0000FF"
Mid Blue "#0000C0"
Dark Blue "#000080"
Cyan "#00C0C0"
Dark Cyan "#008080"
Purple "#C000C0"

Back UP to the Table of Contents

Adding Sounds

You can add sound in "Background"....
BGSOUND SRC="NBDYHOME.MID"

Or "Embed" sound....
EMBED SRC="CRAZYLIT.MID"

Most of the time, it is best to do BOTH. The correct code is listed below:

<BGSOUND SRC="CRAZYLIT.MID">
<EMBED SRC="CRAZYLIT.MID>

Back UP to the Table of Contents

Buttons

(Do NOT Click this button) unless you want to reload this page.

The following is the proper code to make a button. (like the one you see above.)
Note that it actually looks like a Windows button,
and is actually a type of small form.

<FORM METHOD="LINK" ACTION="help.htm">
<INPUT TYPE="SUBMIT" VALUE="Help">
</FORM>

Back UP to the Table of Contents

Tables

A Special kind of Title

<TABLE WIDTH=100% BORDER=14 CELLSPACING=14 CELLPADDING=8>
  <TD ALIGN=MIDDLE VALIGN=MIDDLE>
  <FONT SIZE=7><B>This Demands Attention!</B></TD>
</TABLE>

This Demands Attention!

A simple table

<TABLE WIDTH=100% BORDER=1 CELLPADDING=2 VALIGN=TOP>
  <TR><TD WIDTH=50% ALIGN=middle>centred</TD>
      <TD ALIGN=right>right sided</TD></TR>
  <TR><TD WIDTH=80%>left sided</TD>
      <TD WIDTH=10%><font size="1">small</font></TD></TR>
</TABLE>

centred	right sided
left sided	small

Two tables at the same level

<TABLE WIDTH=100% CELLPADDING=4>
  <TR><TD WIDTH=50% VALIGN=TOP>
    <TABLE WIDTH=100% BORDER=1 CELLPADDING=2>
      <TR><TD WIDTH=80% ALIGN=middle>1</TD><TD ALIGN=right>2</TD></TR>
      <TR><TD WIDTH=50% ALIGN=middle>3</TD><TD ALIGN=right>4</TD></TR>
    </TABLE></TD>
  <TD WIDTH=50% VALIGN=TOP>
    <TABLE WIDTH=100% BORDER=1 CELLPADDING=2>
      <TR><TD WIDTH=80% ALIGN=middle>5</TD><TD ALIGN=right>6</TD></TR>
      <TR><TD WIDTH=50% ALIGN=middle>7</TD><TD ALIGN=right>8</TD></TR>
    </TABLE>
</TABLE>

1	2
3	4

5	6
7	8

The rightmost column is always too large

<TABLE WIDTH=110% BORDER=1 CELLPADDING=2 VALIGN=TOP> .....and so on...

1	2	3	4
5	6	7	8

Back UP to the Table of Contents

Red	"#FF0000"
Light Red	"#FF8080"
Pink	"#FFC0C0"
Mid Red	"#C00000"
Dark Red	"#800000"
Black	"#000000"
White	"#FFFFFF"
Grey	"#C0C0C0"
Dark Grey	"#808080"
Charcoal	"#404040"
Orange	"#FF8000"
Lt. Orange	"#FFC080"
Yellow	"#FFFF00"
Light Gold	"#C0C000"
Dark Gold	"#808000"
Green	"#00FF00"
Mid Green	"#00C000"
Dark Green	"#008000"
Forest Green	"#004000"
Blue	"#0000FF"
Mid Blue	"#0000C0"
Dark Blue	"#000080"
Cyan	"#00C0C0"
Dark Cyan	"#008080"
Purple	"#C000C0"