4

4.0 HTML (v2) Cheat sheet compiled by Jim Cripps, copyright/layout 2000-2001.

Legend: RED = standard. BLUE = better/advanced. GREEN = expert.

ORANGE = MS Explorer. VIOLET = Netscape Navigator

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>.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

Tells browser what version of HTML it’s reading, based on a governing body.

<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).

<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.

<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 giving detailed

information about the pages’ content to the Web Spiders, Web Bots.

<meta http-equiv=“refresh” content=“sec”; URL=“filename”> Usually used to load sound or music

once a page starts to download, can run for however many seconds you set it to.

<meta http-equiv=“ServerCommand” content=“data”> For more information, refer to Meta Tags.

<meta name=“Page-Enter” content=“blendTrans(Duration=sec)”> Blends exit-page into this page.

<meta name=“Page-Enter” content=“blendTrans(Duration=sec)”> Blends page out as user exits.

<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=“x”> 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 when it’s in another 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.

For more information on Style, refer to CSS.

</Style> Closes the Style tag.

</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 fonts)

link=“Color name/Hex value for links.”

vlink=“Color name/Hex value for visited links.”

alink=“Color name/Hex value for activated (clicked) links.”

marginwidth=“pixels” leftmargin=“px” marginheight=“px” Sets a buffer around page.

bgproperties=”fixed” Forces the background image to not scroll.

?<Script Language=“JavaScript/et al.”>Enter Java Script code here.</Script>

<DIV align=“left/center/right/justify” style=”text”> Used to group block elements together. Not essential,

and not widely supported. Center is the default. </DIV>

<h1...6 align=“left/center/right/justify”> Headers/Headlines, used for calling attention to a particular sec-

tion 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 other text, proceeded by a line break.

Align is depreciating. Closing tag not essential in HTML. </p>

<pre>(Preformatted) Allows text to be displayed as originally typed/entered.</pre>

<font face=“name” size=“+/-1...6” color=“color name or hex value”> This tag can be used anywhere

to affect the text following it. 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>

<b>Turns text bold. Depreciating.</b>

<i>Italic text.</i>

<tt>Teletype text.</tt>

<cite>Citation, usually italic.</cite>

<code>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.</address>

<acronym title=“Hyper-Text Markup Language”>Mouse-over effect, much like ALT.</acronym>

<q title=“Shakespeare:Macbeth”>Mouse-over effect used to call out the author of a quote.</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.

<dd>Indented Definitions or Items. You can create another <dl> or <dt>, but close before parent tags.

</dt>Closes the Definition Term.

</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 URL.

Or, type=“I(Roman Numerals)/A(Caps)/I(lower Romans)/a(lower case)”

Or, “no list”

<li>List Item. Use for each new item. Each new <ul> must end before the parent <ul>.

</ul>Closes the Unordered List.

<ol>Creates an Ordered List, (1..2..3..). Default start is 1.

Attribute: start=“x” Specify a number to start the list off at, if other than 1.

<li>List Item. Use <li> for each new line. An <ol> may be started inside, but must end before parent.

</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”

size=“Call pixels for the thickness of the rule”

no shade Displays without an outline. Default is gray, 3px thick. Do not use if color is named.

color=“Name or Hex value”

<img src=“URL” alt=“Description of the image, important for search engines and disabled images.”>

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

height=“xxpx” being loaded, 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 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”>Text or image here. This a link to another page/file.</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.

“#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”>Opens email program for the user to email you.</a>

<a href=mailto:“you@here.com”?Subject=Enter subject 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>

Sound: Place within the <BODY> tag;

bgsound src=“url” Browser pulls sound file. Usually plays automatically, slowing page download.

Embed src=“url” height=“px” width=“px” AUTOSTART=TRUE align=“left/center/right” hidden=“true” Loop=false CONTROLS=FALSE>Pops up a control box. TRUE= yes, FALSE= no. Loop can also accept a number for how many seconds the file will play.

Place within <HEAD> tag;

<EMBED bgsound src=“url” loop=false>For browsers that accept EMBED. Loop=false plays the file once; =true, file is continuous.

<NO EMBED><bgsound src=“url” loop=false></No EMBED>For browsers that don’t accept Embed.

JAVA (Make this the first item in your <BODY> tag:

<Script Language=“JavaScript”>onload=“window.location=url”</SCRIPT>

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

</body>

</html>

· Colors should be represented in HEX Value, (black is #000000). Most browsers accept literal names, but that is limited to only 26 colors. Get HEX value codes here: http://www.lynda.com/hexh.html .

· Most browsers’ default window/frame size is 717x390 pixels (680x800 display). Padding is added to MS Explorer (3 pixels), and Navigator (5 – 8 pixels).

· Browsers can be directed towards any file, including video, as long as it is properly linked.

· Codes for special characters, like ©, can be found at: http://www.hotwired.com/webmonkey/reference/special_characters/ .

· The next logical step in evolution is Cascading Style Sheets 1.0.