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
<sub>, </sub> subscript
superscript
<sup>, </sup>
<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    
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>&nbsp;</TD>
<TD>&#160;</TD>
<TD>&#xA0;</TD>
<TD> </TD>
<TD> </TD>
<TD> </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