HTML Cheatsheet

 by Sarah Dulaney

 © GMD Designs

 

SETUP:

<HTML>

<HEAD>

      <TITLE>whatever you want your title to be</TITLE>

</HEAD>

 

<BODY>whatever you want on your web page</BODY>

</HTML>

 

BASICS:

<HTML>Starts off your web page

</HTML>Ends your web page

 

<HEAD>This will be the heading at the top of your page (on the web page)

</HEAD>Ends the heading

 

<TITLE>This will be the heading at the top of your page (in the browser's title bar)</TITLE>

 

<BODY>Starts the area that you are going to type

<BODY BGCOLOR="zzzz">Sets the background color of your web page

<BODY BACKGROUND="***.gif">Makes an image the background. This image (if it is not the size of the web page frame) will tile/repeat itself.

 

</BODY>Ends body command

*all <BODY> characteristics can be combined*

 

 

LOCATION:

<CENTER>Centers your web page

</CENTER>Breaks center (nothing past this point will be centered unless you put the command "<CENTER>" in again.)

<P>Starts new paragraph

<BR>Stops line continues on next.

 

 

COLORS AND SIZE:

<FONT COLOR="zzzz">Controls the color of your text

<FONT SIZE="$">Controls the size of your text

<FONT FACE="zzzz">This selects the font style that you can use. The viewer's browser (usually "arial") sets the default font style.

</FONT>MUST be used to end font characteristics

 

If you put <FONT COLOR="zzz"> or <FONT SIZE="$"> you don't have to put

color/size (or other attributes) in the </FONT>

 

*all <FONT> characteristics can be combined* ex. <FONT COLOR="green" SIZE="2">

*Note: Many browsers and computer systems have a selected list of font styles/faces, so consider the fact that they might not work. Also, many browsers will automatically convert the font to the viewer's selected default size and style/face, so there's no fool-proof way of making your font "stick".

 

· "zzz" means a word  "$" means a number  "***" means a title of a file  

 

FUNKY STUFF:

<BLINK>Makes that section blink

<BLINK SPEED="$">Controls the speed (1-7)

</BLINK>All characters after this page won't blink

*Note: <BLINK> only works in some browsers!*

 

<U>Underlines

</U>Cancels further underlining

 

HTML 3.0

<B>Bold

</B>Cancels further bolding

 

           HTML 4.0

<STRONG>Same as bold <B>

</STRONG> Ends strong/bolding

 

<I>Italicizes

</I>Cancels further italicizing

<EM>Embroider-Same as Italicize <I>

</EM>Closes <EM> tag

 

 

GRAPHIC AND WEB PAGE ATTACHMENT:

IMG SRC:

<IMG SRC="***.gif" or "***.jpg"> To put a picture on the page.

<IMG SRC="***.gif" BORDER="$"> The border is the rim around the picture

<IMG SRC="***.gif" WIDTH="$$$"> Width of this picture

<IMG SRC="***.gif" HEIGHT="$"> Height of this picture

<IMG SRC="***.gif" ALT="zzzzz"> Message people will get if they put the mouse cursor over the picture or if the image isn't working on the web page

 

What you result with:

<IMG SRC="***.gif" BORDER="$" WIDTH="$" HEIGHT="$" ALT="Send mail to me here">

*All <IMG SRC> characteristics can be combined.*

 

 

A HREF:

<A HREF="***.html"> Adds a web page.

<A HREF="mailto:***@youremail.com"> Adds an email link.

If you put <img src="***.gif"> along with <a href="***.html" or

"mailto:***@youremail.com"> This picture will be a link to your email/web page

</A> to close the tag

*<A HREF> characteristics cannot be combined, but it can be combined with other tags. For example, this is NOT possible:
<A HREF="http://www.yourpage.com" HREF="mailto:myemail@yahoo.com">*

 

TABLES:

<TABLE BORDER="$"> Borders/lines the table and the cells

<TABLE WIDTH="$$$"> Sets the width of the table

<TABLE HEIGHT="$$$"> Sets the height of the table

<TABLE BGCOLOR="ZZZ"> Sets the background color of the table

<TABLE BACKGROUND="***.gif"> Sets the background of the table as an image

<TR>Starts a new row

<TD VALIGN="top/middle/bottom"> Vertical/(up+down) alignment in the table

of this image/picture/table cell/etc.

<TD ALIGN="left/center/right"> Horizontal/across alignment in the table

of this image/picture/table cell/etc.

</TD></TR></TABLE> to close the tags

 

· "zzz" means a word  "$" means a number  "***" means a title of a file

 

 

Table example:

<TABLE BORDER="$" WIDTH="$$$" HEIGHT="$$$" BGCOLOR="ZZZ" BACKGROUND="***.gif"><TR><TD VALIGN="TOP" ALIGN="CENTER" BGCOLOR="ZZZ" BACKGROUND="***.gif"><FONT COLOR="ZZZZ">Your Text Here</FONT></TD></TR></TABLE>

 

 

OVERALL EXAMPLE:

<HTML>

<HEAD>

<TITLE>My Web Page</TITLE></HEAD>

<BODY BGCOLOR="black" BACKGROUND="***.gif">

<CENTER>

<FONT COLOR="green" SIZE="3">WELCOME to my web page. This was created on Monday, June 28, 1999. I hope you enjoy it.</FONT>

<P>

<FONT COLOR="red" SIZE="5"><I><B><U>Have fun making your own web page</U></B></I></FONT>

<BR>

<A HREF="http://www.yourwebpage.net"><IMG SRC="***.gif" BORDER="$" WIDTH="$" HEIGHT="$" ALT="Visit our sponsors!" VALIGN="middle" ALIGN="top"></A>

 

</BODY></HTML>

 

 

Created by Sarah Dulaney on June 28, 1999. Revised September 26th, 2001

Email: gmddesigns@gmd-designs.com

 

· "zzz" means a word  "$" means a number  "***" means a title of a file