If you're looking for our world-famous cheat-sheet, click here.
- Basic Page
- Sizes and Values
- Text Formatting
- Headings
- Font Typeface
- Font Size
- Font Color
- Hyperlinks
- Alternate Text
- Targetting
- Block Elements
- Horizontal Rule
- Break
- Paragraph
- List Elements
- Ordered Lists
- Unordered Lists
- Definition Lists
- Layout Elements
- Tables
- Layers
- Divisions
- Framesets
A Basic Web Page (aka 'The Skeleton')
<HTML>
<HEAD>
<TITLE>Title Text</TITLE>
<SCRIPT LANGUAGE="ScriptLanguage">
<!-- Hide Script Text
Script goes here
//-->
</HEAD>
<BODY BACKGROUND="./path_to_image/file.jpg"
BGCOLOR="white"
TEXT="black"
LINK="blue"
ALINK="red"
VLINK="purple">
Put your own HTML code, javascripts and page content here
</BODY>
</HTML>
Every developer has skeletons in his closet. Lots of them. The skeleton is what web pages are built out of and the real secret? Developers steal them from other developers. When you find a really good looking site, just right click and select "View Page Source" in Mozilla Firefox or "View Source" in Internet Explorer. The 'source' code is the HTML that provides the formatting for the document.
Sizes and Values
There are three units of measurement used in developing web pages. These measurements are used for height, width, padding, margin or size settings for all the major elements in a web page.
| Type | Unit ID | Function |
| points | pt | Font point size (12pt), but this is relative to what 12 point is on the system that displays the page. |
| pixels | px | This value is the size in pixels of the element when displayed on the viewer's display or printing system. The problem with px is that the size of a pixel varies from system to system. |
| em | em | If the page uses the default body text size, then a header might be three times the text size or 3em. Likewise a caption might be smaller, say 80% of the font size and would be 0.8 em. |
| ex | ex | Used for fonts. This is the 'x-height' of the relevant font and like em is ratio expressing a relative value. |
| percent | % | Not all HTML elements or CSS selectors can use this setting, but it is a percentage of the element that the setting is used within. If you set a <DIV> that has a width of 1024px and set the paragraphs displayed in the <DIV> to a width of 80%, they will only take up 80% of the 1024 pixels width of the <DIV> the paragraph is inside of. |
Layout Elements
Tables
<TABLE
ALIGN="center|left|right"
BORDER="#"
BGCOLOR="./path_to_image/file.jpg"
CELLPADDING="#"
CELLSPACING="#"
WIDTH="#">
<CAPTION>Caption Text</CAPTION>
<TR ALIGN="left|center|right"
VALIGN="top|middle|bottom"
BGCOLOR="orange|#FF9900">
<TD ALIGN="center|left|right"
VALIGN="top|middle|bottom"
BGCOLOR="green|#00FF00">
Put cell content here
</TD>
<TD>Put cell content here</TD>
</TR>
<TR><TD>Row 2, Cell 1</TD><TD>Row 2, Cell 2</TD></TR>
</TABLE>
Most, but not all browsers support tables.
Layers
<LAYER
ABOVE=
BACKGROUND=
BELOW=
BGCOLOR=
CLIP=
HEIGHT=
ID=
LEFT=
NAME=
PAGEX=
PAGEY=
SRC=
TOP=
VISIBILITY=
WIDTH=
Z-INDEX="#">
Your layer content goes here
</LAYER>
NOTE: ABOVE, BELOW and Z-INDEX are not compatible. Use ONE of the three, but not ALL three.
DIVISIONS
<div align="left|center|right" (depricated) class= dir id= lang= style= title= xml:lang= > Your content goes here. </div>
Using the style attribute, you can cause a <DIV> to be floated to the left, right or middle.
Framesets
<BASE TARGET="frame_name">
<FRAMESET
BORDER="#px|%" (Border set to '0' sets frameborder to 'no')
BORDERCOLOR="#rrggbb"
COLS="column 1, column 2, *" (Use columns OR rows, not both)
FRAMEBORDER="yes|no"
ROWS="row 1, row 2, *"
<FRAME
BORDERCOLOR="#rrggbb|color"
NAME="frame_name"
NORESIZE
SRC="./page_to_display.html"
SCROLLING="auto|yes|no"
<FRAME .. >
</FRAMESET>
<NOFRAMES>
Content for those browsers that cannot display frames
</NOFRAMES>
Framesets allow you to split the visual display area and handle it in separate HTML files. Not all browsers support frames, so the <NOFRAMES> tag is important and shouldn't be left out. Frames can divide the visual space any way you want.
Frames should be used carefully and TARGET references should be used properly to make sure pages load where they are supposed to.
Any of the <FRAME> references can be replaced with another <FRAMESET> group, thereby embedding a frameset within a frameset.
Text Formatting
Headings
Heading 1 |
<H1>Heading 1</H1> |
Heading 2 |
<H2>Heading 2 </H2> |
Heading 3 |
<H3>Heading 3 </H3> |
Heading 4 |
<H4>Heading 4 </H4> |
Heading 5 |
<H5>Heading 5 </H5> |
Heading 6 |
<H6>Heading 6 </H6> |
Font Size and Color
The <FONT> command is depricated. This means that there is a newer way to do changes in font color and size, and that the <FONT> command may not be supported in later browser versions. Cascading Style Sheets (CSS) are now the primary method of changing font colors and sizes.
However, FONT is still the only tag that is guaranteed to work in all browsers, old and new.
| EFFECT | SOURCE CODE |
| Font Typeface | <FONT FACE="Arial, Helvetica, sans serif">Type Face</A> If the person viewing your page doesn't have your font, the page won't look right to them and may be unreadable. Choose fonts that are common to all types of computer systems and give options so that the fonts will 'fail back' gracefully. |
| Font Colors | <FONT COLOR="red">Font Colors</FONT> <FONT COLOR="#FF0000">Font Colors</FONT> |
| Font Size 6 | <FONT SIZE=6>Size 6</FONT> |
| Font Size 5 | <FONT SIZE=5>Size 5</FONT> |
| Font Size 4 | <FONT SIZE=4>Size 4</FONT> |
| Font Size 3 | <FONT SIZE=3>Size 3</FONT> |
| Font Size 2 | <FONT SIZE=2>Size 2</FONT> |
| Font Size 1 | <FONT SIZE=1>Size 1</FONT> |
Color
| RGB CODE | COLOR |
| #000000 | BLACK |
| #FF0000 | RED |
| #00FF00 | GREEN |
| #0000FF | BLUE |
| #FFFFFF | WHITE |
| #FFFF00 | YELLOW |
| #00FFFF | AQUA / CYAN |
| #FF00FF | MAGENTA |
| #A6A6A6 | DARK GRAY |
You can mix colors using one pair of hexadecimal values (00 - FF) each for red, green and blue. The pattern is #RRGGBB. The higher the number, the brighter and stronger the color. GRAYS are any color that the red, green and blue values are the same. Smaller numbers are darker grays.
Paint absorbs colors and reflects back the color we see. Mixing paint creates a mixture that absorbs more colors than it reflects, making it dark, even black.
Unlike mixing paint which darkens when you mix colors together, mixing colors with a computer is actually the process of mixing the light emitted, so combining red, green and blue causes the monitor to radiate red, blue and green to your eyes, which your eyes see as white.