So, you want to make a Web Page! INDEX & Quick Reference |

Basic Document Structure Basic Text Formatting
Structural Formatting Images Links Miscellaneous

Basic Document Structure
    <HTML>
    <HEAD>
    <TITLE>My big ole bad page!</TITLE>
    </HEAD>
    <BODY>
    Hello Joe!
    </BODY>
    </HTML>

Basic Text Formatting
| Make text bold: `<B>Sample</B>`
| Make text italics: `<I>Sample</I>`
| Make text underlined: `<U>Sample</U>`
| `Monospaced text:` `<TT>Sample</TT>`
| Change font size (sizes:1-7) `<FONT SIZE=5>Sample</FONT>`
| Change the font name (face) `<FONT FACE="fontname1,fontname2,etc">Sample</FONT>`
| Change the font color `<FONT COLOR="#0000FF">Sample</FONT>`
| Section headings (1-6): `<H1>Sample</H1>` Align the section heading: `<H1 ALIGN="center">Sample</H1>`
| Change text, link, etc color for whole page `<BODY BGCOLOR="#123456" TEXT="#23456A" LINK="#3456AB" VLINK="#456ABC" ALINK="#56ABCD">`
| The Handy Dandy Font Viewer (intro page), Open viewer directly
| The ro l l e r c o a s t e r!

Structural Formatting
| Line breaks `<BR>`
| Multiple line breaks:
    <BR>
    <BR>
    <BR>
| New paragraph `<P>`
| New paragraph + `ALIGN` `<P ALIGN="left|center|right">`
| Old style centering: `<CENTER>Sample</CENTER>`
| Horizontal Rule (plain default): `<HR>` With a few parameters: `<HR ALIGN="left" WIDTH=90% SIZE=1 NOSHADE>`
| Pull in your margins with Blockquote: `<BLOCKQUOTE>Sample</BLOCKQUOTE>`
| Ordered(`<OL>`) and Unordered(`<UL>`) lists:
    <OL>
    <LI>List item
    </OL>
| Definition list (bold tags optional):
    <DL>
    <DT><B>Definition title</B>
    <DD>Definition item
    </DL>
| Preformat tag:
    <PRE>
    Sample
       Sample
          Sample
    </PRE>

Images
| Inserting an image (gif or jpg): `<IMG SRC="myimage.gif" WIDTH=123 HEIGHT=456 ALT="My Image">`
| Specify background image (gif or jpg): `<BODY BACKGROUND="mybackground.gif">`
| Save an image off of a page
| Image sources (`SRC`) explained in detail.
| About image sizes
| Using thumbnails
| Make lines out of a 1x1 dot
| The incredible GIF Optimizer!

Links
| Add a relative link `<A HREF="page.html">My page</A>` Add an absolute link: `<A HREF="http://www.yahoo.com/page.html">Yahoo's page</A>`
| Link to a particular section of a page: `<A HREF="page.html#cheesewiz">About Cheese Wiz</A>`
| Add an email link: `<A HREF="mailto:scottie@enterprise.com">Email Scottie</A>`
| Making an image a link: `<A HREF="page.html"><IMG SRC="mypic.gif" WIDTH=123 HEIGHT=456></A>`
| Get rid of the blue border around an image link `<IMG SRC="myimage.gif" WIDTH=123 HEIGHT=456 ALT="My Image" BORDER=0>`
| Absolute vs Relative URLs

Miscellaneous
| Specify background color: `<BODY BGCOLOR="#123456">`
| Specify background image (gif or jpg): `<BODY BACKGROUND="mybackground.gif">`
| Tags in combination - Overlapping vs Nested tags
| More about Overlapping vs Nested tags
| About Netscape's 216 c o l o r s
| Netscape's 216 color chart (image)
| Netscape's 216 color chart (page)
| Chart of 1536 colors (page)
| Space code (special character for a space) `&nbsp;`
| Six main special characters:
    &nbsp;     non-breaking space
    &lt;       < less-than symbol
    &gt;       > greater-than symbol
    &amp;      & ampersand
    &quot;     " quotation mark
    &shy;       soft hyphen
| A whole bucketful of special characters
| About screen resolution
| About screen resolution
| Comment tag `<!-- This is a comment -->`
| Save document as an HTML file
| About files & file extensions

General Table of Contents | Lessons Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 | Index and Quick Reference | Barebones HTML Guide
PROFESSIONAL WEB DESIGN