HTML: Commands

Remarks:

An attribute value must be quoted if it contains any character other than letters (A-Za-z), digits, hyphens, and periods; use quotes if in doubt.
Here is an example:
<a href="http://www.math.uh.edu" name="start">Dept. of Math.</a>
NONE in the "value" field below means that one can use the attribute without a value.

HTML commands:

<a>, </a>

purpose: anchor, for links and labels
example: <a href="http://www.math.uh.edu" name="start">Dept. of Math.</a>

attributes:

Attribute	Values	Meaning	Remarks
`href`	URL	address of link
`name`	text	label of this position in the file
`target`	name_of_frame	frame in which the link should be rendered	These items might be case-sensitive! If the named frame does not exist, the link is rendered in a new window (unless overridden by the user). `_self` is useful for overriding a BASE TARGET
	`_blank`	renders the link in a new, unnamed window
	`_parent`	renders the link in the immediate FRAMESET parent
	`_top`	renders the link in the full, unframed window
	`_self`	renders the link in the current frame

<img>

purpose: inline image
example: <img src="../picture.jpg" height="20%" alt="campus map">

attributes:

Attribute	Values	Meaning	Remarks
`src`	URL	source file
`height`	number, percentage	pixel size, % of page height
`width`	number, percentage	pixel size, % of page width
`alt`	text	show if no image
`align`	`top`, `middle`, `bottom`, `left`, `right`		deprecated, use `<br clear>` instead
`border`	number	size in pixels	border="0" means no border

<br />

purpose: line break
attributes:

Attribute Values Meaning Remarks
clear left, all, right, NONE clear floating objects

<p>, <p/>

Attribute	Values	Meaning	Remarks
`clear`	`left`, `all`, `right`, NONE	clear floating objects

purpose: new paragraph
attributes:

Attribute Values Meaning Remarks
align left, center, right, justify deprecated; horizontal alignment

<hr />

Attribute	Values	Meaning	Remarks
`align`	`left`, `center`, `right`, `justify`		deprecated; horizontal alignment

purpose: horizontal rule
example: <hr noshade size="2" width="50%" align="center" />

attributes:

Attribute	Values	Meaning
`noshade`		solid line
`size`	number	height in pixels
`align`	`center`, `left`, `right`
`width`	number, percentage	pixels, % of page-width

fonts & co.

purpose: use a particular font, select size, heading etc.

tags:

Tag and endtag	Effect, Meaning	Remarks
`<font>, </font>`		see below
`<pre>, </pre>`	preformated text	creates a separate paragraph spaces and line-breaks matter
`<h1>, </h1>`	level-one heading	headings create a separate paragraph levels go from 1 (largest) to 6 (smallest)
`<h6>, </h6>`	level-six heading
`<i>, </i>`	italic text
`<b>, </b>`	bold text
`<tt>, </tt>`	`teletype` text
`<em>, </em>`	emphasis
`<strong>, </strong>`	strong emphasis
`<cite>, </cite>`	citation
`<big>, </big>`	big text
`<small>, </small>`	small text
`<sub>, </sub>`	_subscript
`<sup>, </sup>`	^superscript
`<u>, </u>`	underline	deprecated; use `cite` or `strong`
`<s>, </s>`	~~strike-through~~ text	deprecated
`<strike>, </strike>`	~~strike-through~~ text	better supported than <s>; deprecated
`<code>, </code>`	`computer code`	use it to stress the meaning of the text
`<del>, </del>`	~~deleted~~ text	not implemented yet; preferred to <strike>

<font>, </font>

purpose: change font size, color, type etc.
example: <font size="+1" color="red">larger red words</font>
remark: a better way to achive this is using style sheets

attributes:

Attribute	Values	Meaning	Remarks
`size`	`1, ..., 7`	specifies size to be used	default starting size is 3
`size`	`-3, ..., +3`	changes size from that previously in use
`color`	`red, #FF00FF`	value or word to describe color	Color attribute values give a color definition. The value can be any hexadecimal number, specified according to the sRGB color space, or one of sixteen color names. Hexadecimal numbers must be prefixed by a "#" character. Here is a list of colors.
`face`		specifies list of fonts to be used (in order of preference)	the browser will use the first one available from the list

lists

there are three types of lists:
- ordered lists: <ol>, </ol>
  the elements of the list are introduced by <li> (list item)
  the end tag </li> is not optional
  to change the current label to 30, use <li value="30">
- unordered lists: <ul>, </ul>
  the elements of the list are introduced by <li> (list item)
  the end tag </li> is not optional
- definition lists: <dl>, </dl>
  the elements of the list are pairs term-definition introduced by
  - <dt> (definition term)
  - <dd> (definition definition)
  the end tags </dt> and </dd> are not optional
lists can be nested

examples:

Type of list	How it looks	HTML code
Ordered List	first item second item third item, but we want it to have label 33 next item; note the label	<ol> <li> first item </li> <li> second item </li> <li value="33"> third item, but we want it to have label 33 </li> <li> next item; note the label </li> </ol>
Unordered List	first item second item	<ul> <li> first item </li> <li> second item </li> </ul>
Definition List	Texas state of US Houston city in Texas	<dl> <dt> Texas </dt> <dd> state of US </dd> <dt> Houston </dt> <dd> city in Texas </dd> </dl>
Nested lists	cities: Athens Sparta continents: Africa America Asia Europa	<ul> <li> cities: <ol> <li> Athens </li> <li> Sparta </li> </ol> </li> <li> continents: <ul> <li> Africa </li> <li> America </li> <li> Asia </li> <li> Europa </li> </ul> </ul>

tables

simplified example (from HTML 4.0 Reference):

Character	Entity	Decimal	Hex	Rendering in Your Browser
Character	Entity	Decimal	Hex	Entity	Decimal	Hex
non-breaking space
quotation mark = APL quote	"	"	"	"	"	"
ampersand	&	&	&	&	&	&
less-than sign	<	<	<	<	<	<
greater-than sign	>	>	>	>	>	>

the HTML code that produced it:

<TABLE border="1">
    <THEAD>
     <TR>
       <TH ROWSPAN=2>Character</TH>
       <TH ROWSPAN=2>Entity</TH>
       <TH ROWSPAN=2>Decimal</TH>
       <TH ROWSPAN=2>Hex</TH>
       <TH COLSPAN=3>Rendering in Your Browser</TH>
     </TR>
     <TR>
       <TH>Entity</TH>
       <TH>Decimal</TH>
       <TH>Hex</TH>
     </TR>
    </THEAD>
    <TBODY>

     <TR>
       <TD>non-breaking space</TD>
       <TD>&amp;nbsp;</TD>
       <TD>&amp;#160;</TD>
       <TD>&amp;#xA0;</TD>
       <TD>&nbsp;</TD>
       <TD>&#160;</TD>
       <TD>&#xA0;</TD>
     </TR>

  etc.

    </TBODY>
 </TABLE>

ingredients:
- <table>, </table>: encloses the table
- <thead>, </thead>: encloses the table head; this helps the browser display the head on each page, if the table is longer.
- <tfoot>, </tfoot>: encloses the footer of the table; it must precede the <tbody>
- <tbody>, </tbody>: encloses the body of the table
- <tr>, </tr>: table row
- <th>, </th>: table header cell; used within <tr>
- <td>, </td>: table data cell; used within <tr>

arguments of <th> and <td>:

Attribute	Values	Meaning
`colspan`	number	columns spanned by the cell
`rowspan`	number	rows spanned by the cell
`align`	`center`, `left` , `right`, `justify`	horizontal alignment
`valign`	`top`, `bottom` , `middle`	vertical alignment
`nowrap`		suppress word wrap

the example with more features.

To be added:

more about table arguments
<center>
<basefont>
<blockquote>, <q>
<base>
<address>
forms
frames

Remarks:

HTML commands:

level-one heading

level-six heading