PageTutor.com
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
Go 
<html>
<head>
<title>My big ole bad page!</title>
</head>
<body>
Hello Joe!
</body>
</html>
Go With HTML 4.01 Transitional DocType: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My big ole bad page!</title>
</head>
<body>
Hello Joe!
</body>
</html>
Basic Text Formatting
Go Make text bold: <b>Sample</b>
Go Make text italics: <i>Sample</i>
Go Make text underlined: <u>Sample</u>
Go Monospaced text: <tt>Sample</tt>
Go Change font size (sizes:1-7): <font size="5">Sample</font>
Go Change the font name (face): <font face="fontname1,fontname2,etc">Sample</font>
Go Change the font color: <font color="#0000ff">Sample</font>
Go Make text one size bigger: <big>Sample</big>
Go Make text one size smaller: <small>Sample</small>
Go Change background, text, link, etc colors for whole page: 
<body
 bgcolor="#123456"
 text="#23456a"
 link="#3456ab"
 vlink="#456abc"
 alink="#56abcd">
Go The Simple Font Widget
Go The rollercoaster! and the RAINBOW
Structural Formatting
Go Section headings (1-6): <h1>Sample</h1>

Sample

Align the section heading: <h1 align="center">Sample</h1>

Sample

Go Line breaks: <br>
Go Multiple line breaks: 
<br>
<br>
<br>
Go The paragraph: <p>Sample</p>
Go Align a paragraph (left|center|right): <p align="center">Sample</p>
Go Simple centering: <center>Sample</center>
Go Horizontal Rule (plain default): <hr>
With a few parameters: <hr align="left" width="80%" size="1" noshade>
Go Pull in your margins with Blockquote: <blockquote>Sample</blockquote>
Go Ordered(<ol>) and Unordered(<ul>) lists: 
<ol>
<li>List item
<li>List item
</ol>
Go Definition list (bold tags optional): 
<dl>
<dt><b>Definition title</b>
<dd>Definition item
</dl>
Go Preformat tag: 
<pre>
Sample
   Sample
      Sample
</pre>
Images
Go Inserting an image:
<img src="myimage.gif" width="123" height="456" alt="My Image">
Go Specify background image: <body background="mybackground.gif">
Go Fixed background image:
<body background="mybackground.gif" style="background-attachment:fixed">
Go Save an image off of a page
Go Image sources (src="yourimage.gif") explained in detail.
Go About image sizes
Go Using thumbnails
Go Make lines out of a 1x1 dot  
Go The incredible GIFWorks
Go About IrfanView and Paint Shop Pro
Go Where are my images?
Go GIF or JPG?
Go 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>
Go Link to a particular section of a page:
<a href="page.html#cheesewiz">About Cheese Wiz</a>
Go Add an email link:
<a href="mailto:scottie@enterprise.com">Email Scottie</a>
Go Specify a subject to an email link:
<a href="mailto:scottie@enterprise.com?subject=Beam Me Up!">Email Scottie</a>
Go Eliminate the underline in a link:
<a href="mailto:scottie@enterprise.com" style="text-decoration:none">Email Scottie</a>
Go Making an image link:
<a href="page.html"><img src="myimage.gif" width="123" height="456" alt="My Image"></a>
Go Get rid of the blue border around an image link:
<a href="page.html"><img src="myimage.gif" width="123" height="456" alt="My Image" border="0"></a>
Go Absolute vs Relative URLs
Miscellaneous
Go Upload your pages to the Web.
Go Specify background color: <body bgcolor="#123456">
Go ColorPicker
Go Tags in combination - Overlapping vs Nested tags
Go More about Overlapping vs Nested tags
Go About Netscape's 216 colors
Go Chart of 216 colors
Go Chart of 1536 colors
Go Space code (special character for a space): &nbsp;
Go Five useful special characters: 
&nbsp;       non-breaking space
&lt;       < less-than symbol
&gt;       > greater-than symbol
&amp;      & ampersand
&quot;     " quotation mark
Go A whole bucketful of special characters
Go About screen resolution
Go Comment tag: <!-- This is a comment -->
Go Save document as an HTML file
Go View the source of any HTML document and see how they did stuff.
Go About files & file extensions
Go About NotePadNotepad and NoteTab LightNoteTab Light
PageTutor - So, you want to make a Web Page!
Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
Index & Quick Reference      Barebones HTML Guide
Color Charts      ColorPicker      Upload Your Pages
Print version of this tutorial available - Get the PageTutor book & CD