HTML: the major elements and their attributes

Required Reading

None.

References:

interactive HTML tools
- HTML.sssp from silk
- HTML validator from WDG
HTML Tag lists
- WDG Tag reference from the Web Design Group (no adds!)
- HTML Tag reference from W3Schools.
- Compact List of all HTML Tags from the Willcam group.
HTML Specifications
- W3C webpage on HTML
- HTML 3.2 Specification This is the version currently supported by almost all Netscape and IE browsers.
- HTML 4.01 Specification This is another W3C proposed standard for HyperText Markup Language support by recent browsers.
- XHTML 1.0 Specification This is the most recent W3C proposed standard for an eXtensible HyperText Markup Language

HTML II: Survey of the major HTML elements

In this lecture, we describe all of the basic HTML elements which I will expect you to know, and their primary attributes. For more details on these elements, see the

WDG Tag reference. The elements and attributes presented below are supported by almost all browsers.

Top-level elements

HTML:
HEAD:
BODY: attributes BGCOLOR, TEXT, LINK, VLINK, ALINK, BACKGROUND(url)

Head elements

TITLE:

Generic Block-level Elements

BLOCKQUOTE:
CENTER:
H1:
H2:
H3:
H4:
H5:
H6:
HR:

PRE: This makes the browser respect your whitespace, to create the following display:

     This     was 
  done using pre.

<pre>
     This     was 
  done <font color=green>using pre</font>.
</pre>

Lists

UL: -- unnumbered lists
- LI
OL: -- ordered lists
- LI
DL: -- definition lists
- DT: -- term to be defined
- DD: -- its definition

Special Inline Elements

A: attributes NAME, HREF -- hypertext anchors and links
BR: -- insert a line break
IMG: attributes SRC, ALT, WIDTH, HEIGHT, ALIGN, BORDER -- inline images
SUB, SUP: -- subscript,and superscript as in Xⁿ,Y_i

Phrase Elements

CODE: program text, as in (.resize win 200 300)
EM: emphasized text, as in pay attention to this
STRONG: strongly emphasize text, as in really pay attention to this!
EM and STRONG: as in really, really pay attention to this

Font Style Elements

B: bold bold
I: italic italic
TT: teletype teletype
BIG: BIG
SMALL: SMALL
STRIKE: strike through text ~~STRIKE IT~~
U: underlined UNDERLINED

Tables

TABLE: attributes BGCOLOR, CELLPADDING, CELLSPACING, ALIGN(left,center,right), BORDER, WIDTH
- TR: attributes BGCOLOR, ALIGN(left,center,right), VALIGN(top,center,bottom)
  - TD: attributes BGCOLOR, ALIGN, VALIGN, WIDTH, HEIGHT, ROWSPAN, COLSPAN
  - TH: attributes (same as for TD)

Tables have the form:

<table bgcolor=yellow border=10 cellpadding=20 cellspacing=5>
<tr>
<th>heading 1</th> <th>heading 2</th>  <th> etc.,</th>  <th> etc.,</th> </tr>
<tr>
  <td bgcolor= green> 1 data in 1st row</td> 
  <td bgcolor=red>2nd data in 1st row</td> 
  <td bgcolor=white>...</td>
  <td bgcolor=yellow>...</td>
</tr>
<tr>
  <td>1st data in 2nd row</td> 
  <td>2nd data in 2nd row</td> 
  <td>...</td>
  <td>...</td>
</tr>
</table>

where each row is defined by a tr element and each item in that row is defined by a td or a th element. The latter is used for the headers which may appear in the first row. Note that the rowspan and colspan attributes of td elements allow one to define data elements that span several columns or rows.

examples: the following table

heading 1 heading 2 etc., etc.,

green red white yellow

green? red? white? yellow?

green? lightgreen lightblue

green? red? white?

green font red font white? yellow?

heading 1	heading 2	etc.,	etc.,
green	red	white	yellow
green?	red?	white?	yellow?
green?	lightgreen	lightblue
green?	red?	white?
green font	red font	white?	yellow?

is made by the following code:

<table bgcolor=yellow border=10 cellpadding=20 cellspacing=5>
<tr>
<th>heading 1</th> <th>heading 2</th>  <th> etc.,</th>  <th> etc.,</th> </tr>
<tr>
  <td bgcolor= green> green</td> 
  <td bgcolor=red>red</td> 
  <td bgcolor=white>white</td>
  <td bgcolor=yellow>yellow</td>
</tr>
<tr>
  <td>green?</td> 
  <td>red?</td> 
  <td>white?</td>
  <td>yellow?</td>
</tr>
<tr>
  <td>green?</td> 
  <td rowspan=2 bgcolor=lightgreen>lightgreen</td> 
  <td colspan=2 bgcolor=lightblue>lightblue</td>
</tr>
<tr>
  <td>green?</td> 
  <td>red?</td> 
  <td>white?</td>
</tr>
<tr>
  <td><font color=green>green font</td> 
  <td><font color=red >red font</td> 
  <td>white?</td>
  <td>yellow?</td>
</tr>
</table>

Try cutting and pasting sample tables into the HTML demo page to see how they come out.

Forms, Frames

We will discuss these next week