|
So, you want to make a Web Page! INDEX & Quick Reference |
|
| 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 rollercoaster! |
| 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 colors |
 |
Netscape's 216 color chart (image) 
|
|
Netscape's 216 color chart (page)
|
|
Chart of 1536 colors (page)
|
| Space code (special character for a space) |
|
Six main special characters:
non-breaking space < < less-than symbol > > greater-than symbol & & ampersand " " quotation mark ­ 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 |
| ||||||||