HTML cheat sheet

HyperText Markup Language

This page is just for references purposes only.

Note, we wrote this sometime ago, so there maybe some depreciations.

Meta Tags and HTML Header Example

<meta name=”KEYWORDS” content=”your keywords”>
<meta name=”DESCRIPTION” content=”short plain description”>
<meta name=”RATING” content=”General”>
<meta name=”AUTHOR” content=”name”>
<meta http-equiv=”Expires” content=”1 Jan 2006 14:25:27 GMT”>
<meta http-equiv=”imagetoolbar” content=”no”>
<meta http-equiv=”Expires” content=”0″>
<meta http-equiv=”Pragma” content=”no-cache”>
<meta http-equiv=”Cache-Control” content=”no-cache”>
<meta HTTP-EQUIV=”Reply-to” content=””>

<link rel=”stylesheet” type=”text/css” href=”default.css”>
<link rel=”shortcut icon” type=”image/ico” href=”favicon.ico”>
<META HTTP-EQUIV=”refresh” CONTENT=”5; URL=http://www.website.com/”>

<LINK rel=”shortcut icon” type=”image/ico” href=”favicon.ico”> (html 3.2)
<LINK REL=Contents HREF=toc.html>
<LINK REL=Previous HREF=doc31.html>
<LINK REL=Next HREF=doc33.html>
<LINK REL=Chapter REV=Contents HREF=chapter2.html> …there are plenty more

Text

<p></p> paragraphs (html 2.0)
<BR> newline (html 3.2)
<FONT size=2 face=arial></FONT> fonts (html 3.2)
<h1><h2><h3><h4><h5><h6></h6> headings (html 2.0)
<I></I> Renders as italic text style (html 2.0)
<B></B> Renders as bold text style (html 2.0)
<STRONG></STRONG> Indicates stronger emphasis, same as <B> (html 2.0/3.2)
<BIG></BIG> Renders text in a “large” font (html 3.2)
<SMALL></SMALL> Renders text in a “small” font (html 3.2)
<TT></TT> Renders as teletype or monospaced text (html 3.2)
<STRIKE></STRIKE> also <S></S> Render strike-through style text (deprecated html 3.2)
<U></U> Renders underlined text (deprecated html 3.2)
<EM></EM> Indicates emphasis (html 2.0)
<CODE></CODE> Designates a fragment of computer code (html 3.2)
<SAMP></SAMP> Designates sample output from programs, scripts, etc. (html 3.2)
<ADDRESS></ADDRESS> Indicates an address (html 2.0)
<ACRONYM></ACRONYM> Indicates an acronym (e.g., WAC, radar, etc.) (html 4.0, no netscape)
<Q></Q> – quotations (html 4.0 no netscape)
<SUP></SUP> small upper – superscript style (html 3.2)
<SUB></SUB> small lower – subscript style (html 3.2)
<PLAINTEXT></PLAINTEXT> (deprecated html 3.2 – don’t use)
<CENTER></CENTER> (deprecated html 3.2 – don’t use, use <DIV ALIGN=CENTER> etc..instead)

<HR> (never use </HR>) (html 2.0)

<DEL></DEL> – for revisions, delete & insert (html 4.0)
<INS datetime=”1994-11-05T08:15:30-05:00″></INS> (html 4.0)

<EMBED SRC=file.ext></EMBED> – embed a browser plug-in (html 3.2)

Lists

<OL></OL> group of ordered lists – Bullets (html 2.0)
<UL></UL> group of Unordered lists – Numbers (html 2.0)

•  with <li type=disc>
•  with <li type=square>
•  with <li type=circle>

Images

<IMG name=text src=url alt=text vspace=0 hspace=0 height=0 width=0 align=middle></IMG> (html 2.0)

<IMG src=”map.gif” usemap=”#mymap” border=0> (html 3.2)
<MAP name=”mymap”> (html 3.2)
<AREA shape=circle coords=”34,32,23″ href=”page1.html” title=”page 1″>
<AREA shape=poly coords=”12,110, 37,62, 72,114″ href=”page2.html” title=”page 2″>
<AREA shape=rect coords=”83,44, 133,94″ href=”page3.html” title=”page 3″>
</MAP>

Links

<a href=”test.html#here”></a> (html 2.0)
<a name=”here”></a> (html 3.2)

Tables

<TABLE border=0 cellspacing=0 cellpadding=0><tr><td rowspan=1 colspan=1 valign=top align=left width=100 height=100 nospan></td></tr></TABLE> (html 3.2)

Formating

<BLOCKQUOTE></BLOCKQUOTE> indented block (html 2.0)
<FIELDSET><LEGEND>title</LEGEND> text </FIELDSET> (html 4.0)
<DIV></DIV> – HTML container, does line feed (html 2.0)
<SPAN></SPAN> – CSS container (html 4.0)

Forms

<FORM action=”http://somesite.com/prog/adduser” method=”post or get”> (html 2.0)
<LABEL for=”firstname”>First name: </LABEL> <INPUT type=”text” id=”firstname”><BR>
<LABEL for=”lastname”>Last name: </LABEL> <INPUT type=”text” id=”lastname”><BR>
<LABEL for=”email”>email: </LABEL> <INPUT type=”text” id=”email” readonly><BR>
<INPUT type=”radio” name=”sex” value=”Male”> Male<BR>
<INPUT type=”radio” name=”sex” value=”Female”> Female<BR>
<INPUT type=”submit” value=”Send”> <INPUT type=”reset”>
<TEXTAREA name=”area” cols=7 rows=5></TEXTAREA> (html 2.0)

<SELECT name=”options”> (html 2.0)
<OPTION selected label=”none” value=”none”>None</OPTION> (html 3.2)
<OPTGROUP label=”group 1″> (html 4.0)
<OPTION label=”1.1″ value=”opt 1″>option 1</OPTION>
<OPTION label=”1.2″ value=”opt 2″>option 2</OPTION>
</OPTGROUP>
<OPTGROUP label=”group 2″>
<OPTION label=”2.1″ value=”opt 3″ disabled>option 3</OPTION>
<OPTION label=”2.2″ value=”opt 4″>option 4</OPTION>
</OPTGROUP>
</SELECT>
<BUTTON name=”what” onclick=”dosomejava”>a button</BUTTON> (html 4.0)
<INPUT type=”password” style=”display:none” name=”invisible-password” value=”mypassword”>
</FORM>

input types: button/checkbox/file/hidden/image/password/radio/submit/text

Tables

<TABLE border=0 cellspacing=0 cellpadding=0><tr><td rowspan=1 colspan=1 valign=top align=left width=100 height=100 nospan></td></tr></TABLE> (html 3.2)

Events

onload, onunload, onunload, onclick, ondblclick, onsubmit
onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown
onfocus, onblur, onkeyup…

Others

<SCRIPT> ing is a html 3.2 standard
<STYLE> in header is html 3.2 standard
though using style within dhtml is not, eg. img.style.border=0
the STYLE html tag should be used instead.

Left Scrollbar

<HTML DIR=”rtl”>
<BODY>
<DIV DIR=”ltr”>
The body
</DIV>
</BODY>
</HTML>

Targets

_blank The sURL is loaded into a new unnamed window.
_media The sURL is loaded into the HTML content area of the Media Bar. Available in Internet Explorer 6 or later.
_parent The sURL is loaded into the current frame’s parent. If the frame has no parent, this value acts as the value _self.
_search Available in Internet Explorer 5 and later. The sURL is opened in the browser’s search pane.
_self The current document is replaced with the specified sURL .
_top sURL replaces any framesets that may be loaded. If there are no framesets defined, this value acts as the value _self.

HTML Character codes

space &nbsp; &ampnbsp;
ampersand &amp; &amp;amp;
less than &lt; &amp;lt;
greater than &gt; &amp;gt;
bullet &#149; &amp;#149;
pound sign &pound; &amp;pound;
e with acute accent &eacute; &amp;eacute;
euro &euro; &amp;euro;
Greek alpha a &alpha; &amp;alpha;
Cyrillic Zhe &#1046; &amp;#1046;
Hiragana A &#12354; &amp;#12354;