|
|
4.01 HTML (v1) Cheatsheet compiled by Jim Cripps, copyright/layout 2005.
Legend: RED = standard. BLUE = better/advanced. GREEN = expert. The first <TAG> is the parent-tag, and almost always needs a closing </TAG>. Anything that affects the <TAG> is called an attribute, and is placed inside the < >. Usually, what's in " " you must choose, or fill in to complete the <TAG>. Emphasis will be on XML, which will supersede HTML with the incarnation of XHTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Tells browser what version of HTML it's reading, based on the W3C governing body. This version is less strict.
<!--hidden msg; copyright, notes, threats, et al.-->
<html> Alerts browser as to what type of mark-up is used.
<head> Separates details from the actual page that the browser and search engines use.
<meta http-equiv="content-type" content="text-html; char set=iso-8859-1"> Alert to browser as to what type of text characters are used (ref W3C).
<title> Puts title of page on top window bar. </title>
<meta name="keywords" content=" "> Usually 15 words separated by commas describing the page.
<meta name="description" content=" "> Typically, a sentence of 250 characters or less of detailed info about the pages' content for Web Spiders/Bots.
<meta name="Author" content="You"> You, or your business name here.
<meta name="copyright" content=" "> Whoever owns the rights to this page or site.
<meta name="generator" content=" "> This would be the program you used to build the page with.
<meta name="reply-to" content="email here"> Usually the content developer's email goes here.
<meta name="robots" content="index/noindex,follow/nofollow"> Tells Web Bots to cache this page, or not to, and to follow all relative links, or not to, separated by a comma with no space in between.
<link rev="made" href="mailto:soandso@this.com"> Refers to the Webmaster.
<base target="URL"> Address/Directory for the document and other pages in the same folder. URL's can be specified as relative more effectively.
<link rel="description" href="filename"> Essential, when the browser has to pull a file from another location in order to load the page.
<link rel="shortcut icon" href="/../favicon.ico"> Calls the Favorites Icon, usually from the base directory.
<link rel="stylesheet" href=" "> Links the browser to important style information (see CSS).
<style type="text/css"> Tells the browser that the following details are Style info, written in text/css.
<!--Hidden from all non-Style browsers.
CSS code goes here. For more information on Style, refer to CSS.
--> Closes the 'Hide from...' tag.
</style> Closes the Style tag.
<SCRIPT language="javascript"><!--
Javascript goes here.
//--></SCRIPT> Ends Javascript.
</head> Closes the head tag.
<body> All information contained herein will be translated and displayed in the browser window.
Attributes*: bgcolor="a name or hexadecimal value for a Background color"
background="A gif, jpg, or png picture called by the URL or Relative name"
text="Typically a font family name, up to 3 can be called, separated by commas" (see font tag)
link="Color name/Hex value for links."
vlink="Color name/Hex value for visited links."
alink="Color name/Hex value for activated (clicked) links."
<div align="left/center/right/justify" style="text"> Used to group block elements. Not essential, nor widely supported. Center is the default. </div> (see DIVS)
<span style=" "> Inline control of specific block or text.</span> (see Span)
<h1...6 align="left/center/right"> Headers/Headlines, used for calling attention to a particular section or paragraph, 1 being the largest, and 6 the smallest. Essential tag for some older search engines.
<p align="left/center/right/justify"> Separates a body of text from another. Align is depreciating. Closing tag not essential to HTML.</p>
<font face="name" size="+/-1...6" color="color name or hex value"> This tag can be used anywhere to affect text. Browser safe faces are: Courier, Arial, Geneva, Helvetica, and Times (More may have been added). If varying from the default face on the users browser, up to three faces can be called, 2 as back-ups, each separated by commas. Size is relative, measured + or - to the original text size. Older browsers may not support the color attribute. Depreciating in favor of Style Sheets.</font>
<pre> (Preformatted) Allows text to be displayed as originally typed/entered.</pre>
<b> Turns text bold. Depreciating in favor of strong.</b>
<i> Italicized text.</i>
<tt> Teletype text.</tt>
<cite> Citation, usually italic.</cite>
<code> Sometimes allows script to be displayed in browser window.</code>
<em> Emphasis, usually italic or bold.</em>
<samp> Sample program or Script.</samp>
<strong> Usually bold text.</strong>
<sub> Subscript. Puts text on baseline. </sub>
<sup> Superscript. Puts text on top of line. </sup>
<address> Italic text, referencing addresses, with Line-Break.</address>
<acronym title="Mouse-over effect"> Mouse-over effect, much like ALT.</acronym>
<abbr title="Mouse-over effect"> Mouse-over effect, much like ALT. Not widely supported.</abbr>
<q title="Poe:The Raven"> Mouse-over effect used to call out the author of a quote, "Evermore".
</q>
<br /> Creates a line break, good for creating short sentences such as those in poems.
ISO entity that inserts a blank space.
<blockquote> This creates a paragraph within the paragraph. Think essays! </blockquote>
<dl> Creates a Definition List. Kind of like an outline.
<dt> The Definition Term displayed in bold text. </dt>
<dd> Indented Definitions or Items. You can create another <dl> or <dt>, but close before parent tags.
</dd> Closes the Item, necessary for valid XHTML.
</dl> Closes the Definition List.
<ul> Creates a bulleted, Unordered List. Using multiple <ul>s will alternate disc types.
Attributes*: type="disc/circle/square" Specifies a bullet. Default is disc. Can also link to an image.
Or, type="no list"
<li> List Item. Use for each new item. Each new <ul> must end before the parent <ul>. </li>
</ul>Closes the Unordered List.
<ol> Creates an Ordered List, (1..2..3..). Default start is 1.
Attributes*: start="x" Specify a number to start the list off at, if other than 1.
And/or, type=" I (Roman Numerals)/ A (Caps)/ i (lower Romans)/ a (lower case)"
<li> List Item. Use for each new item. Each new <ol> must end before the parent <ol>. </li>
</ol> Ends the Ordered List.
<hr /> Creates a Horizontal Line. Good for separating text/graphics not related to each other.
Attributes*: width="Call a percent or pixels" ie., 80%, or 300px
size="Call pixels for thickness" ie., 3px
no shade Displays without an outline. Default is gray, 3px thick. Do not use if color is named.
color="Name or Hex value" ie., red or #FF0033
<img src="URL" alt="Description of the image, important for search engines and image disabled browsers.">
Attributes*: align="left/center/right" Aligns image on the text line.
width="xxpx" Width and Height descriptions let the browser lay out text while an image is being loaded,
height="xxpx" seeming to make the page load faster. Can also be used to resize the image, but not change its file size.
border="xx" Creates a black border (pixels) around the image. Default thickness is 0.
hspace="xx" Creates a blank horizontal space around an image.
vspace="xx" Creates a blank vertical space around an image.
top="xx" Places upper-left corner of image in exact location (y axis).
left="xx" Place upper-left corner of image in exact vertical location (x axis).
align="top" Aligns top of the graphic with the top of the tallest item on the line.
"texttop" Aligns the top of the graphic with the top of the tallest text.
"middle" Aligns the middle of the graphic with the baseline of the text.
"absmiddle" Aligns the middle of the graphic with the middle of the text on that line.
"baseline" Aligns the bottom of the graphic with the baseline of the text.
"bottom" Same as Baseline.
"absbottom" Aligns the bottom of the graphic with the bottom of the text in the line so that they are visually aligned at the "bottom."
All these ALIGN attributes are depreciated.
<a href="URL"> This is a link to another page/file. Text or image goes here. </a>
Attributes*: target="_new/_new-window" Opens link in new window. Can be used to 'break' frames.
"_blank" A new, empty frame/window is displayed with the new content.
"_self" New content generated in the same window.
"_top" Same content, displayed in same window, used to 'break out' of nested frames.
"URL#name" Links to specific target/line on new page. See next line...
<a href="#name"> Creates a link to a target on the same page.</a>
<a name="name"> The target that the link goes to.</a>
<a href=mailto:"youraddress@here.com"> E-Mail Address or text here. Opens email program for the user to E-Mail you.</a>
<a href=mailto:"you@here.com"?Subject=Enter subject here> E-Mail Address or text here. Fills out the subject line in the EMail.</a>
<area shape="rect/circ/square coords="x,y,x,y" href="url"> This is great for large pictures, especially multi-subject portraits. The first pair of x,y are the coordinates for the Upper-Left corner, and the second pair of x,y is for the Lower-Right corner, thus forming Squares and Rectangles. For Circles, the first pair of x,y is for the center, and the second pair for the outer arc/rim, creating the diameter. </a>
</body> Closes the BODY of displayed text/images.
</html> Tells the browser that this is the end of the document.
See also Text Style/CSS
See also Tables
See also DIV and Layers
See also Image Maps
See also Forms
See also Frames
See also Image/Mouse Roll-Overs (JAVA/Style)
See also SSI Code
See also JavaScript
See also DHTML
See also XML
See also Sound
* It is wiser to use CSS to control attributes.
ABBR is for abbreviations