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

label of this
name text position in the
file

target name_of_frame frame in which o These items might be

the link should case-sensitive!
be rendered
o If the named frame
renders the link does not exist, the link
in a new, is rendered in a new
_blank window (unless
unnamed
window overridden by the
user).
renders the link
in the o _self is useful for
_parent immediate overriding a BASE
FRAMESET TARGET
parent

renders the link

in the full,
_top
unframed
window

renders the link

_self 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

pixel size, % of
height number, percentage
page height

pixel size, % of
width number, percentage
page width

alt text show if no image

deprecated, use <br

align top, middle, bottom, left, right
clear> instead

border="0" means no
border number size in pixels
border

<br />

 purpose: line break

 attributes:

Attribute Values Meaning Remarks

clear left, all, right, NONE clear floating objects

<p>, <p/>

 purpose: new paragraph

 attributes:

Attribute Values Meaning Remarks

align left, center, right, justify deprecated; horizontal alignment

<hr />

 purpose: horizontal rule

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

 attributes:

Attribute Values Meaning Remarks

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

preformated creates a separate paragraph

<pre>, </pre> spaces and line-breaks matter
text

<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

_, subscript

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

specifies size to
1, ..., 7 default starting size is 3
be used
size changes size
-3, ..., +3 from that
previously in use

Color attribute values give a color

definition. The value can be any
hexadecimal number, specified according
value or word to
color red, #FF00FF to the sRGB color space, or one of sixteen
describe color
color names. Hexadecimal numbers must
be prefixed by a "#" character. Here is a list
of colors.

specifies list of
fonts to be used the browser will use the first one available
face
(in order of from the list
preference)

lists

 there are three types of lists:

o 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">

o unordered lists: <ul>, </ul>

the elements of the list are introduced by <li> (list item)
the end tag </li> is not optional

o 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 1. first item <ol>

2. second item <li> first item </li>

o third item, but we want <li> second item </li>

it to have label 33
<li value="33"> third
o next item; note the item, but we want it to
label have label

33 </li>

<li> next item; note the

label </li>

</ol>

Unordered o first item <ul>

List
o second item <li> first item </li>

<li> second item </li>

</ul>

Definition Texas <dl>

List
state of US <dt> Texas </dt>

Houston <dd> state of US </dd>

city in Texas <dt> Houston </dt>

<dd> city in Texas </dd>

</dl>

Nested lists o cities: <ul>

1. Athens <li> cities:

2. Sparta <ol>

o continents: <li> Athens </li>

 Africa <li> Sparta </li>

 America </ol>

 Asia </li>

 Europa <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):

Rendering in Your Browser

Character Entity Decimal Hex
Entity Decimal Hex

non-breaking space &nbsp; &#160; &#xA0;

quotation mark = APL quote &quot; &#34; &#x22; " " "

ampersand &amp; &#38; &#x26; & & &

less-than sign &lt; &#60; &#x3C; < < <

greater-than sign &gt; &#62; &#x3E; > > >

 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:

o <table>, </table>: encloses the table

o <thead>, </thead>: encloses the table head; this helps the browser display the head
on each page, if the table is longer.

o <tfoot>, </tfoot>: encloses the footer of the table; it must precede the <tbody>

o <tbody>, </tbody>: encloses the body of the table

o <tr>, </tr>: table row

o <th>, </th>: table header cell; used within <tr>

o <td>, </td>: table data cell; used within <tr>

  arguments of <th> and <td>:

Attribute Values Meaning Remarks

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