The One-Page HTML Cheat Sheet

GeoCities.us » Athens » Forum

The One-Page HTML Cheat Sheet
(One sheet of paper, front and back. Close enough.)
Rhonda Allee · Keyboarding, Business & Computer Applications · Wichita, Kansas

This fall I added a home page unit to Computer Applications, and on the second day I watched a room full of sophomores flip through a 400-page HTML book looking for the tag that makes a line break. So I made the sheet I wished I'd had: every tag a beginner needs, and nothing a beginner doesn't. Print it, tape it beside your monitor, and quit flipping.

To print: File, Print. It comes out on two pages. Background printing should be off: in Internet Explorer 5, that's Tools, Internet Options, the Advanced tab, and under Printing, leave "Print background colors and images" unchecked. It's off unless somebody turned it on. The gray bars will print white, but the headings are bold, so you won't miss them. The small type is set with a style sheet, so it takes Netscape 4 or Internet Explorer 4 or newer; an older browser prints it bigger, on three or four pages.

Teachers: copy this sheet for your students, as many as you need, no need to ask; just leave my name on it. There's a twenty-question self-quiz to go with it. Students: type the left column exactly. Most tags come in pairs:  starts bold and , with the slash, stops it. I teach tags in capitals because they stand out from your words; lowercase works too.

1. Page structure
<HTML> ... </HTML>	Around the whole page.
<HEAD> ... </HEAD>	The top part. Holds the title.
<TITLE> ... </TITLE>	In HEAD. Shows in the window's top bar.
<BODY> ... </BODY>	Everything visitors see.
<!-- note -->	A comment. Visitors never see it.

The smallest page there is. Save it as index.html:

<HTML>
<HEAD>
<TITLE>My Page</TITLE>
</HEAD>
<BODY>
Hello, world.
</BODY>
</HTML>

2. Text
<P>	New paragraph, blank line before.
<BR>	Next line, no blank line.
<B> ... </B>	bold
<I> ... </I>	italic
<U> ... </U>	underline (looks like a link)
<H1> ... </H1>	Heading. H1 biggest, H6 smallest.
<CENTER> ... </CENTER>	Centers what's inside.
<P ALIGN="right">	Paragraph on the right.
<FONT SIZE="4">	1 tiny to 7 huge. 3 is normal.
<FONT COLOR="navy">	Name or hex code (chart, 8).
<FONT FACE="Arial">	If the visitor has that font.
</FONT>	One for every FONT you open.
<HR>	A line across the page.
<HR WIDTH="50%" SIZE="3">	Half-width line, 3 pixels thick.
<BLOCKQUOTE> ... </BLOCKQUOTE>	Indents from both sides.
<PRE> ... </PRE>	Keeps your spaces and line breaks.

3. Lists
<UL> <LI>Milk <LI>Eggs </UL>	Bulleted list. One LI per item.
<OL> <LI>First <LI>Second </OL>	Numbered list.
<OL TYPE="A">	A, B, C. Also "a", "I", "i".
<UL TYPE="square">	Square bullets. Also "circle".
<DL> <DT>Word <DD>Meaning </DL>	A term, then its meaning, indented.

4. Links and anchors
<A HREF="page2.html">Next</A>	Link to a page in the same folder.
<A HREF="pics/zoo.html">	To a page in a folder named pics.
<A HREF="http://www.geocities.us/">	To another site: the whole address.
<A NAME="top"></A>	Marks a spot (an anchor).
<A HREF="#top">	Jumps to the spot marked "top".
<A HREF="page2.html#top">	To a marked spot on another page.
<A HREF="mailto:[email protected]">	Opens a new e-mail to you.

7. BODY attributes: add them to the BODY tag
BGCOLOR="white"	Page background color.
BACKGROUND="tile.gif"	A picture tiled like wallpaper.
TEXT="black"	Color of the words.
LINK="blue"	Links not clicked yet.
VLINK="purple"	Links already visited.
ALINK="red"	A link while you click it.

5. Images
<IMG SRC="dog.gif" WIDTH="100" HEIGHT="80" ALT="My dog">	Shows dog.gif. Size in pixels. ALT shows if the picture doesn't.
ALIGN="left"	In IMG: words wrap around the picture.
<BR CLEAR="all">	Stops the wrapping.
BORDER="0"	In IMG: no blue box on a picture link.
HSPACE="10"	In IMG: room beside the picture.
<A HREF="big.html"><IMG ...></A>	A picture that's a link.

6. Tables and their attributes
<TABLE BORDER="1"> ... </TABLE>	A table. BORDER="0": no lines.
<TR> ... </TR>	One row.
<TD> ... </TD>	One cell, inside a TR.
<TH> ... </TH>	Heading cell: bold, centered.
WIDTH="100%"	TABLE or TD. Or pixels: "300".
CELLPADDING="5"	Room inside each cell.
CELLSPACING="0"	Room between cells.
ALIGN="center"	In TD. Also "left", "right".
VALIGN="top"	In TD. Also "middle", "bottom".
BGCOLOR="silver"	TABLE, TR or TD: background.
COLSPAN="2"	In TD: across 2 columns.
ROWSPAN="2"	In TD: down 2 rows.

A small table:

<TABLE BORDER="1" CELLPADDING="4">
<TR><TD>Monday</TD><TD>Typing</TD></TR>
</TABLE>

8. The sixteen color names
Name	Hex code	Name	Hex code
black	#000000	white	#FFFFFF
gray	#808080	silver	#C0C0C0
maroon	#800000	red	#FF0000
purple	#800080	fuchsia	#FF00FF
green	#008000	lime	#00FF00
olive	#808000	yellow	#FFFF00
navy	#000080	blue	#0000FF
teal	#008080	aqua	#00FFFF
Use either one: `COLOR="navy"` and `COLOR="#000080"` are the same color. A hex code is red, green, blue, two digits each, from 00 (none) to FF (all). Don't forget the #.

9. Special characters
	(space)	A space the browser keeps.
©	©	Copyright.
®	®	Registered.
&	&	Ampersand.
<	<	Less-than.
>	>	Greater-than.
"	"	Quote mark.
é	é	café
É	É	Capital E.
è	è	The other way.
á	á	Also i, o, u.
ñ	ñ	mañana
ü	ü	Also o, a.
ç	ç	français
Always end with the semicolon. Capitals count.

10. Ten Mistakes My Students Make (and I made every one of them first)

1. Notepad saved it as index.html.txt. In the Save As box, put the name in quotes: "index.html". Or change Save as type to All Files.

2. A missing quote mark. <A HREF="page2.html> eats everything after it until it finds another quote. Every " needs a partner.

3. A missing </TABLE>. Internet Explorer forgives you. Netscape may show a blank page. Check your page in both.

4. Pictures that live on drive C:. <IMG SRC="C:\My Documents\dog.gif"> works on your computer only. Upload the picture and use just dog.gif.

5. Capital letters in file names. Windows doesn't care; the Web server does. Dog.GIF and dog.gif are two different files. Use lowercase.

6. Spaces in file names. my dog.gif will give you trouble. Use my_dog.gif.

7. A tag that never closes. Forget one  or </CENTER> and the whole rest of the page is bold, or centered. Open it, close it.

8. Tags closed in the wrong order. Hi is wrong. Last one opened, first one closed: Hi.

9. "I changed it and nothing happened." Did you save? Did you Reload? Are you changing the copy on the floppy and looking at the one on the hard drive?

10. A black page with blue links. Links are dark blue unless you say otherwise. Change BGCOLOR, and change LINK and VLINK with it.

From the Web page of Rhonda Allee, Wichita, Kansas. Questions, corrections, or a mistake your students make that isn't on here: [email protected] · Take the self-quiz »
Visitors since August 22:

· Last updated September 19, 1999