HTML Notes

Links to HTML sites:

General HTML definitions:: http://www.htmlhelp.com/reference/html40/

TAGS:

comments cannot be nested

<A>...</A>

Creates a link. The text enclosed is the text that becomes a link in the document.

Attributes:

HREF="..."

Creates a link to the specified document. Concatonate #name to the URL name if referencing an anchor within the page

Use UNIX-style path names, regardless of the system being run.
If the name begins with “/”, it is an absolute directory reference. If it does not begin with “/”, then it is relative to the current directory.
For DOS systems, disk specifiers use “|” in place of “:”.
For example, /d|file.typ references the file in the root directory of the d drive.

NAME="..."

The name of the anchor, to be referenced. Creates an anchor that can be linked to.

STYLE="..." elements seperated by ";"

COLOR:color or COLOR:RGB(#,#,#): Color of link
text-decoration:none: Eliminate underlining on the link

TARGET="window name"

Opens the URL in the window with the specified name. If there is no such window, a new one is opened.

TITLE="..."

Information about the link. Displayed in IE when mouse points to the link

<B>...</B>

Enclosed text is Bold Face

<BIG>...</BIG>

Larger font size than the current font

<BLINK>...</BLINK>

Enclosed text blinks

<BODY>...</BODY>

contains all of the content of the document to be displayed

Attributes:

ALINK="#rrggbb" or color-name: Clicked link color
BACKGROUND=file: Graphics file to use as background for body
BGCOLOR="#rrggbb" or color-name: Background color
TEXT="#rrggbb" or color-name: Text color
LINK="#rrggbb" or color-name: Link color
VLINK="#rrggbb" or color-name: Visited link color

<BR>

Line break

Attributes:

CLEAR="RIGHT" or "LEFT" or "ALL"

Causes text to stop flowing around images

LEFT: break to left margin; for left aligned images
RIGHT: break to right margin; for left aligned images
ALL: break to clear both margins

<CENTER>...</CENTER>

Enclosed text is centered on the line

<DIV>...</DIV>

Division of a page. Each division can have its own attributes and style sheet

<DL>...</DL>

Definitions list

Subcommands:

<DT>: Term to be defined
<DD>: Definition of the term. This is indented from the term, with no intervening blank lines

<EM>...</EM>

Provides Emphasis, to enclosed text

<FONT>...</FONT>

specifies the font of the enclosed text

Attributes:

BOLD

COLOR="color"

FACE="font1, font2, ...": Fonts entered in order of reference. Dependant on fonts available in the browser.
SIZE="-#"or "+#"or "#": # = 1 to 7

<H#>...</H#>

# = 1 to 6

Headings. H1 is the largest font, H6 the smallest

Attributes:

style="display: inline": no line breaks

<HEAD>...</HEAD>

Prologue to the document. Do not put anything in here that is to appear in the document

Subcommands:

<TITLE>...</TITLE>

Title of the document.
Used by the browsers bookmarks, and appears at the top of the browser page
Can contain only plain text

<META > - see META tags below

<HR>

Horizontal line

Attributes:

ALIGN="LEFT" or “"RIGHT"” or "CENTER": Alignment of line on the page
NOSHADE: Causes line to be solid
SIZE="#": Thickness of the line in number of pixels
WIDTH="xx%" or "#": Width of the line. Either a % of width, or number of pixels

<HTML>...</HTML>

Encloses the entire HTML document

<I>...</I>

Enclosed text is in italics

<IMG>

Insert an image into the document

Attributes:

ALT="...": Text string displayed when images cannot be displayed. Displayed by IE Explorer as a bubble when the image is pointed to.
ALIGN="LEFT" or "RIGHT" or "CENTER" or "TOP" or "MIDDLE" or "BOTTOM": Specifies the alignment of the image relative to the text that follows. The text and image are contained in a <P>…</P>.
BORDER=#: Border around image in pixels
0 removes borders around link images
HEIGHT = #: Height of the image in pixels
HSPACE=#: Horizontal space around the image in pixels
SRC="...": The URL of the image. Relative reference allows browser to download the image once if it is referenced multiple times.
VSPACE=#: Vertical space around the image in pixels
WIDTH = #: Width of the image in pixels

<NOBR>...</NOBR>

the enclosed text is not broken at a line

<OL>...</OL>

Numbered List.

Attributes:

TYPE=: 1 Numbers; A Uppercase letters; a Lowercase letters; I Uppercase Roman Numerals; i Lower case Roman Numerals
START=#: # = starting number of list (a number for all types)

Subcommands:

<LI>...</LI>: elements in the list

<P>...</P>

Encloses a paragraph

Attributes:

ALIGN=CENTER

STYLE=" MARGIN-LEFT: 0.5; MARGIN=BOTTOM: 0"

NOWRAP: Text is not wrapped. May use <BR> to break the line

<PRE>...</PRE>

Preformatted text. Preserves spacing, line feeds, etc.

<SMALL>...</SMALL>

Smaller font size

<STRONG>...</STRONG>

stronger emphasis than EM

<SUB>...</SUB>

Enclosed text is displayed as a subscript

example: regular text _subscript

<SUP>...</SUP>

Enclosed text is displayed as a superscript

example: regular text ^superscript

<TABLE>...</TABLE>

Creates a table

Attributes

BORDER[="# of pixels"]: The table is to have a border.; Optional: width in pixels (default=1). 0 => no border
CELLPADDING="# of Pixels": Number of pixels to pad each cell (default=1)
CELLSPACING="# of pixels": Number of pixels between cells (default=2)
NOWRAP: Text is not wrapped. May use <BR> to break the line
SUMMARY= "...": Describes the structure of the table (for handicapped use).
WIDTH="xx%" or "#": Width of the screen to be used by the table. Either a % of width, or number of pixels.

Subcommands:

<CAPTION>...</CAPTION>

Places a caption above the table. This tag appears between the <TABLE> and the first <TR> tags

Attributes

ALIGN=BOTTOM/TOP: Caption is on the bottom/top of the table

<TR>...</TR>

Delimits a row of the table

Attributes These may also be used with <TH> and <TD>

ALIGN=LEFT or RIGHT or CENTER
BGCOLOR=”#XXXXXX”: Specifies the background color: see http://www.w3.org/MarkUp/Guide/Style.html
VALIGN=TOP or MIDDLE or BOTTOM

Subcommmands

<TH>...</TH>

Indicates a cell with a table heading. The characters are set off in some way (bold)

If the heading is to be at the top of the table, the th tags all go in the first row.
If they are to be on the left, the th cells will be the first in each row.

<TD>...</TD>

table data, a regular cell within the table

Attributes for <TD> and <TH>

COLSPAN=#: The number of columns this element spans
NOWRAP: Text is not wrapped. May use <BR> to break the line
ROWSPAN=#: The number of rows this element spans
WIDTH="xx%" or "#": Width of the screen to be used by the column. Either a % of the table, or number of pixels.

<TT>...</TT

Monospaced Typewriter font

<U>...</U>

Underline text

<UL>...</UL>

Unnumbered List. Includes bullets.

Attributes

Type="DISC" or "CIRCLE" or "SQUARE"

Subcommmands

<LI>...</LI>: elements in the list

Special Characters:

For special characters, see:

  or &#160: non-breaking space
<: <
>: >
&: &

Style Elements:

<style type="text/css">

TAG[.name]{attributes}

</style>

TAG

HTML tag (BODY, EM, H#, P, PRE, STRONG, UL, etc.)

Using the attribute CLASS=”name” with a tag, uses that style.

Attributes: (these are separated by “;”)

:link { color: rgb(0, 0, 153) } /* for unvisited links */

:visited { color: rgb(153, 0, 153) } /* for visited links */

:active { color: rgb(255, 0, 102) } /* when link is clicked */

:hover { color: rgb(0, 96, 255) } /* when mouse is over link */: also text-decoration:none - no underlining
BACKGROUND: color: Background color
COLOR:color: Foreground color
FONT-FAMILY: font-name1, font-name2, …: Fonts entered in order of reference. Dependant on fonts available in the browser.
FONT-STYLE: ITALIC
FONT-WEIGHT: BOLD
MARGIN-LEFT: xx%: Margins are relative to the body margins, and can therefore be negative
MARGIN-RIGHT: xx%
MARGIN-BOTTOM: xxEM: Margin at the bottom of an element; EM is the size of the font used = 1 character height.
MARGIN-TOP: xxEM: Margin at the top of the element.; EM is the size of the font used = 1 character height
TEXT-DECORATION: NONE: Turns off any browser default decoration (Example: underlining links)
TEXT-INDENT: xxEM: Indents the first line of the element xx characters.; EM is the size of the font used = 1 character height
TEXT-TRANSFORM: UPPERCASE or LOWERCASE

Server Side Includes: http://httpd.apache.org/docs/howto/ssi.html

Serve different HTML depending on the requesting domain:

: HTML to be served to nasa.gov
: HTML to be served outside nasa.gov

Include HTML from another file

Meta Tags: Must be contained in <HEAD>...</HEAD>

Redirect to a differen URL:

<META HTTP-EQUIV=REFRESH CONTENT="0; URL=http:........html">
"0" indicates how many seconds to delay the transfer