HTML Tags Chart

HTML Tugs Churt
To use any of the following HTML tags, simply select the HTML code you'd like and copy and
paste it into your web page.
Tag Name Code Example Browser View

Nothing will show (Tip)
<a - anchor
<a href="http://www.domain.com/">
Visit Our Site</a>
Visit Our Site (Tip)
<b> bold <b>Example</b> Example
<big>
big
(text)
<big>Example</big> Example (Tip)
<body>
body of
HTML
documen
t
<body>The content of
your HTML page</body>
Contents of your web
page (Tip)
<br>
line
break
The contents of your page<br>The
contents of your page
The contents of your web
page
The contents of your web
page
<center> center
<center>This will center your
contents</center>
This will center your
contents
<dd>
definitio
n
descripti
on
<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
Definition Term
Definition of the
term
Definition Term
Definition of the
term
<dl>
definitio
n list
<dl>
</dl>
Definition Term
Definition of the
term
Definition Term
Definition of the
term
<dt>
definitio
n term
<dl>
</dl>
Definition Term
Definition of the
term
Definition Term
Definition of the
term
<em>
emphasi
s
This is an <em>Example</em> of using
the emphasis tag
This is an ,250 of
using the emphasis tag
<embed>
embed
object
<embed src="yourfile.mid" width="100%"
height="60" align="center">

(Tip)
<embed>
embed
object
<embed src="yourfile.mid"
autostart="true" hidden="false"
loop="false">
<noembed><bgsound src="yourfile.mid"
loop="1"></noembed>

Music will begin playing
when your page is loaded
and will only play one
time. A control panel will
be displayed to enable
your visitors to stop the
music.
<font> font
<font face="Times New
Roman">Example</font>
Example (Tip)
<font> font
<font face="Times New Roman"
size="4">Example</font>
Example (Tip)
<font> font
<font face="Times New Roman" size="+3"
color="#ff0000">Example</font> Example (Tip)
<form> form
<form action="mailto:you@yourdomain.co
m">
Name: <input name="Name" value=""
size="10"><br>
Email: <input name="Email" value=""
size="10"><br>
<center><input type="submit"></center>
</form>
Name: (Tip)
Email:
Submit

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
heading
1
heading
2
heading
3
heading
4
heading
5
heading
6
<h1>Heading 1 Example</h1>

<head>
heading
of HTML
documen
t
<head>Contains elements describing the
document</head>
Nothing will show
<hr>
horizont
al rule
<hr />

page (Tip)

page
<hr>
horizont
al rule
<hr width="50%" size="3" />
page

page
<hr>
horizont
al rule
<hr width="50%" size="3" noshade />
page

page
<hr>
(Internet
Explorer)
horizont
al rule
<hr width="75%" color="#ff0000"
size="4" />
page

page
<hr>
(Internet
Explorer)
horizont
al rule
<hr width="25%" color="#6699ff"
size="6" />
page

page
<html>
hypertex
t markup
language
<html>
<head>
<meta>
<title>Title of your web page</title>
</head>
<body>HTML web page contents
</body>
</html>
page
<i> italic <i>Example</i> ,250
<img> image
<img src="Earth.gif" width="41"
height="41" border="0" alt="text
describing the image" /> (Tip)
<input>
input
field
Example 1:

<form method=post action="/cgi-
bin/example.cgi">
<input type="text" size="10"
maxlength="30">
<input type="Submit" value="Submit">
</form>
Example 1: (Tip)

Submit

<input>
(Internet
Explorer)
input
field
Example 2:

bin/example.cgi">
<input type="text" style="color: #ffffff;
font-family: Verdana; font-weight: bold;
font-size: 12px; background-color:
#72a4d2;" size="10" maxlength="30">
</form>
Example 2: (Tip)

Submit

<input>
input
field
Example 3:

bin/example.cgi">
<table border="0" cellspacing="0"
cellpadding="2"><tr><td
bgcolor="#8463ff"><input type="text"
size="10" maxlength="30"></td><td
bgcolor="#8463ff" valign="Middle">
<input type="image" name="submit"
src="yourimage.gif"></td></tr> </table>
</form>
Example 3: (Tip)

<input>
input
field
Example 4:

bin/example.cgi">
Enter Your Comments:<br>
Example 4: (Tip)

<textarea wrap="virtual"
name="Comments" rows=3 cols=20
maxlength=100></textarea><br>
<input type="Reset" value="Clear">
</form>

Submit

Clear

<input>
input
field
Example 5:

bin/example.cgi">
<center>
Select an option:
<select>
<option >option 1</option>
<option selected>option 2</option>
<option>option 3</option>
</select><br>
<input type="Submit"
value="Submit"></center>
</form>
Example 5: Tip)

Select an
option:
45ti43 2

Submit

<input>
input
field
Example 6:

bin/example.cgi">
Select an option:<br>
<input type="radio" name="option">
Option 1
<input type="radio" name="option"
checked> Option 2
<input type="radio" name="option">
Option 3
<br>
<br>
Select an option:<br>
<input type="checkbox"
name="selection"> Selection 1
<input type="checkbox" name="selection"
checked> Selection 2
<input type="checkbox"
name="selection"> Selection 3
</form>
Example 6: (Tip)

Select an option:
Option 1
Option 2
Option 3

Select an option:
Selection 1
Selection 2
Selection 3
Submit

<li> list item
Example 1:

<menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</MENU>

Example 2:
Example 1: (Tip)
O List item 1
4 List item 2
List item 3

<ol type="i">
<li>List item 1</li>
</ol>
Example 2:
i. List item 1
ii. List item 2
iii. List item 3
iv. List item 4
<link> link
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>

<marque
e>
(Internet
Explorer)
scrolling
text
<marquee bgcolor="#cccccc" loop="-1"
scrollamount="2" width="100%">Example
Marquee</marquee>
(Tip)
<menu> menu
<menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</menu>
O List item 1
4 List item 2
List item 3
<meta> meta
<meta name="Description"
content="Description of your site">
<meta name="keywords"
content="keywords describing your site">
<meta> meta
<meta HTTP-EQUIV="Refresh"
CONTENT="4;URL=http://www.yourdomain
.com/">
<meta> meta
<meta http-equiv="Pragma" content="no-
cache">
<meta> meta <meta name="rating" content="General"> Nothing will show (Tip)
<meta> meta <meta name="robots" content="all"> Nothing will show (Tip)
<meta> meta
<meta name="robots"
content="noindex,follow">
<ol>
ordered
list
Numbered

<ol>
</ol>

Numbered Special Start

<ol start="5">
</ol>
Numbered
1. List item 1
2. List item 2
3. List item 3
4. List item 4
Numbered Special Start
5. List item 1
6. List item 2
7. List item 3
8. List item 4
Lowercase Letters

Lowercase Letters
<ol type="a">
</ol>

Capital Letters
<ol type="A">
</ol>

Capital Letters Special Start
<ol type="A" start="3">
</ol>

Lowercase Roman Numerals
<ol type="i">
</ol>

Capital Roman Numerals
<ol type="I">
</ol>

Capital Roman Numerals Special Start
<ol type="I" start="7">
</ol>
a. List item 1
b. List item 2
c. List item 3
d. List item 4
Capital Letters
A. List item 1
B. List item 2
C. List item 3
D. List item 4
Capital Letters Special
Start
C. List item 1
D. List item 2
E. List item 3
F. List item 4
Lowercase Roman
Numerals
i. List item 1
ii. List item 2
iii. List item 3
iv. List item 4
Capital Roman
Numerals
I. List item 1
II. List item 2
III. List item 3
IV. List item 4
Capital Roman
Numerals Special Start
VII. List item 1
VIII. List item 2
IX. List item 3
X. List item 4
<option>
listbox
option
bin/example.cgi">
Select an option: (Tip)
<center>
Select an option:
<select>
<option selected>option 2</option>
</select><br>
</center>
</form>
45ti43 2

<p>
paragrap
h
This is an example displaying the use of the
paragraph tag. <p> This will create a line
break and a space between lines.

Attributes:

Example 1:<br>
<br>
<p align="left">
This is an example<br>
displaying the use<br>
of the paragraph tag.<br>
<br>
Example 2:<br>
<br>
<p align="right">
of the paragraph tag.<br>
<br>
Example 3:<br>
<br>
<p align="center">
of the paragraph tag.
This is an example
displaying the use of the
paragraph tag.
This will create a line
break and a space
between lines.

Attributes:

Example 1:

This is an example
displaying the use
Example 2:

This is an example
displaying the use
Example 3:

This is an example
displaying the use
<small>
small
(text)
<small>Example</small> Example (Tip)
<strike>
deleted
text
<strike>Example</strike> Example
<strong>
strong
emphasi
s
<strong>Example</strong> Example
<table> table
Example 1:

<table border="4" cellpadding="2"
cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Example 1: (Tip)
Column 1 Column 2

Example 2: (Tip)

Example 2: (Internet Explorer)

<table border="2"
bordercolor="#336699" cellpadding="2"
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Example 3:

<table cellpadding="2" cellspacing="2"
width="100%">
<tr>
<td bgcolor="#cccccc">Column 1</td>
<td bgcolor="#cccccc">Column 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</table>
Column 1 Column 2

Example 3: (Tip)
Column 1 Column 2
Row 2 Row 2

<td>
table
data
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Column 1 Column 2

<th>
table
header
<div align="center">
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
</table>
</div>
Colum
n 1
Colum
n 2
Colum
n 3
Row 2 Row 2 Row 2
Row 3 Row 3 Row 3
Row 4 Row 4 Row 4

<title> documen <title>Title of your HTML page</title> Title of your web page will
t title be viewable in the title
bar. (Tip)
<tr>
table
row
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Column 1 Column 2

<tt> teletype <tt>Example</tt> ,250
<u>
underlin
e
<u>Example</u> Example
<ul>
unordere
d list
Example 1:<br>
<br>
<ul>
</ul>
<br>
Example 2:<br>
<ul type="disc">
<ul type="circle">
</ul>
</ul>
Example 1:
O List item 1
O List item 2

Example 2:
O List item 1
O List item 2
4 List item 3
4 List item 4
MouseOver PopUps provided by:

HTML List Tags Examples

O efinition
4 ith image bullets
O irectory
O Menu
O ested Lists
O rdered
4 rdered LI types
4 rdered types
4 $tart
O &nordered
4 &nordered LI types

EFIITI

coding results
!7eceeding Text
DL~
LH~List Heade7/LH~
DT~List item 1
DD~Desc7iption oI List item 1.
DT~List item 2
DD~Desc7iption oI List item 2.
/DL~
!7eceeding TextList Heade7
List item 1
Desc7iption oI List item 1.
List item 2
Desc7iption oI List item 2.
O ITH IMAGE B&LLET$
coding results
!7eceeding Text
DL~
LH~List Heade7/LH~
DD~IMG SRC"7edball.giI" ALT"*"~ List item 1.
DD~IMG SRC"7edball.giI" ALT"*"~ List item 2.
/DL~
!7eceeding TextList Heade7
List item 1.
List item 2.
1o the 1able of Contents

IRECTRY

coding results
List Name
DIR~
LI~List item 1
LI~List item 2
/DIR~
List Name
O List item 1
O List item 2

ME&

coding results
List Name
MENU~
List item 1BR~
List item 2
/MENU~
List Name
List item 1
List item 2

E$TE LI$T$

coding results
!7eceeding Text
OL TY!E"1"~
LI~List Item 1
OL TY!E"a"~
LI~Nested List Item 1
/OL~
LI~List Item 2
UL~
/OL~
/OL~
!7eceeding Text
I. List Item 1
a. Nested List Item 1
b. Nested List Item 2
II. List Item 2
4 Nested List Item 1

RERE

coding results
!7eceeding Text
OL~
:LH~List Heade7/LH~
LI~List item 1
LI~List item 2
/OL~
!7eceeding Text
List Heade7
1. List item 1
2. List item 2
O RERELI>TYPE$
coding results
OL~
LI TY!E"A"~List item
LI TY!E"a"~List item
LI TY!E"I"~List item
LI TY!E"i"~List item
LI TY!E"1"~List item
/OL~

A. List item
b. List item
III. List item
iv. List item
5. List item
O L>TYPE$
Example: L TYPE"A">
coding results
OL TY!E"A"~
LI~List item 1
LI~List item 2
/OL~
A. List item 1
B. List item 2
O L $TART"8">
coding results
OL START"8"~
LI~List item 1
LI~List item 2
/OL~
8. List item 8
9. List item 9

&RERE

coding results
!7eceeding Text
UL~
LH~List Heade7/LH~
LI~List item 1
LI~List item 2
/UL~
!7eceeding Text
List Heade7
O List item 1
O List item 2
O &RERE LI> TYPE$
O IMAGE
coding results
UL SRC"7edball.giI"~
LI~List item 1
LI~List item 2
/UL~

4 List item 1
4 List item 2
O PLAI
coding results
UL !LAIN~
LI~List item 1

LI~List item 2
/UL~ 4 List item 1
4 List item 2
O TYPE
coding results
UL~
LI TY!E"CIRCLE"~List item
LI TY!E"DISC"~List item
LI TY!E"SQUARE"~List item
/UL~

4 List item
4 List item
4 List item

Image Tags Examples

O Borders
O Fixed Backgrounds
O Height & idth
O Hspace
O Image Map (Client-$ide)
O Linked
O Rollover (1ava$cript)
O Text between 2 images
O Two $RC's in one tag (External Link)
O 'space

BRER$

O efault border of 0:
IMG SRC"7edball.giI" ALT"*"~

O Border"1":
IMG BORDER"1" SRC"7edball.giI" ALT"*"~

O Border"5":
IMG BORDER"5" SRC"7edball.giI" ALT"*"~

O Changing color of border
FONT COLOR"g7een"~IMG BORDER"5" SRC"7edball.giI"
ALT"TOC"~/FONT~

1able of Contents

FIXE BACKGR&

O Example code #1:
BODY BACKGROUND"bIly4.giI" BG!RO!ERTIES"Iixed"~
Result of code: the following link will take you to a test page with the
above example code for its body tag.
Fixed backg7ound text page.
Doesn't wo7k in Fi7eIox
1able of Contents
O Example code #2:
!lace in head~ section: style type"text/css"~ !-- BODY
backg7ound-7epeat : no-7epeat; backg7ound-attachment :
Iixed;backg7ound-position : 7ight top; } // --~ /style~
BODY BACKGROUND"images/clouds.jpg"~
OI cou7se, iI you want to use an exte7nal style sheet, and want to apply
the same style to all pages, including the same backg7ound image, place
the CSS above into an exte7nal style sheet and add the Iollowing to the
BODYstyles: backg7ound-image : u7l(images/clouds.jpg); --~
Result of code: the following link will take you to a test page with the
above example code for its body tag.
Fixed backg7ound text page.
1able of Contents

HEIGHT & ITH

O efault:
&naltered size of redball.gif is 14 x 16 (width x height)
IMG SRC"7edball.giI" ALT"*"~

O HEIGHT"32":
IMG SRC"7edball.giI" HEIGHT"32" ALT"*"~

O ITH"28":
IMG SRC"7edball.giI" WIDTH"28" ALT"*"~

O HEIGHT"16" ITH"28":
IMG SRC"7edball.giI" HEIGHT"16" WIDTH"28" ALT"*"~

1able of Contents

Image Map

Example Code Result of code
MA! NAME"example"~
AREA SHA!ERECT COORDS"165,0,320,69"
HREF"#TOC"~
AREA SHA!ECIRCLE COORDS"202,139,71"
HREF"index.htm"~
AREA SHA!E!OLY
COORDS"42,27,0,123,1,183,4,182,21,208,22,208,52,20
8,52,208,42,30" HREF"#TOC"~
AREA SHA!ERECT COORDS"59,0,130,210"
HREF"dblimage.htm"~
/MA!~
!~
IMG BORDER"0" SRC"Ilow7s.giI" WIDTH"320"
HEIGHT"240" USEMA!"#example"~
1able of Contents

H$PACE

Example Code Result of example code
!7eceeding textIMG SRC"7edball.giI" ALT"*"
HS!ACE"20"~Iollowing text.
!7eceeding text Iollowing
text.
!7eceeding textIMG SRC"7edball.giI" ALT"*"
HS!ACE"40"~Iollowing text.
!7eceeding text Iollowing
text.
1able of Contents

LIKE
(Clicking on the images will send you to the top of this page.)

O Linked In-line image with border"0":
A HREF"#TOC"~IMG BORDER"0" SRC"7edball.giI"
ALT"*"~/A~

O Linked In-line image (with default border of 1)
A HREF"#TOC"~IMG SRC"7edball.giI" ALT"TOC"~/A~

O Linked In-line image with border"5"
A HREF"#TOC"~IMG BORDER"5" SRC"7edball.giI"
ALT"TOC"~/A~

O Changing color of border
ote: you may have to hit reload, as the below coding affects link color but not visited link
color.
A HREF"#TOC"~FONT COLOR"g7een"~IMG BORDER"5"
SRC"7edball.giI" ALT"TOC"~/FONT~/A~

1able of Contents

RLL'ER
(1ava$cript)

A HREF"#TOC" onMouseOve7"document.7oll.s7c'c7itgd.giI'"
onMouseOut"document.7oll.s7c'c7itso.giI'"~IMG BORDER"0"
NAME"7oll" SRC"c7itso.giI" ALT"*"~/A~

Position cursor over image to initiate rollover
1able of Contents

TEXT BETEE 2 IMAGE$

CENTER~
IMAGE ALIGN"LEFT" VALIGN"MIDDLE" SRC"7edball.giI"
ALT"*"~
IMAGE ALIGN"RIGHT" VALIGN"MIDDLE" SRC"7edball.giI"
ALT"*"~
An example oI cente7ing text between two images.
/CENTER~
An Example oI cente7ing text between two images.
1able of Contents

'$PACE

Fi7st line oI text.BR~
IMG SRC"7edball.giI" ALT"*" VS!ACE"20"~BR~
Second line oI text.
Fi7st line oI text.

Fi7st line oI text.BR~
IMG SRC"7edball.giI" ALT"*" VS!ACE"40"~BR~
Fi7st line oI text.


HTML Table Tags Examples I: Basic

O Borders
O Caption
O Cellpadding
O Cellspacing
O Cellpadding and Cellspacing
O Cellpadding, Cellspacing & IMG
Border
O 1x1 Table ithin a 1x1 Table
O Centering Images ithin Tables
O Table Alignment
O Table idth
Table Tags Examples Page 2

BRER$

O BRER"1"
Example Code
Code Result

O BRER"7"
Example Code
Code Result


CAPTI

O CAPTI ALIG"TP" (default)
Example Code
Code Result

Red Rose Red Rose

O CAPTI ALIG"BTTM"
Example Code
Code Result

Red Rose

Red Rose


CELLPAIG

O CELLPAIG"5"
Example Code
Code Result

O CELLPAIG"10"
Example Code
Code Result


CELL$PACIG

O CELL$PACIG"5"
Example Code
Code Result

O CELL$PACIG"10"
Example Code
Code Result


CELLPAIG A CELL$PACIG

O CELLPAIG"10" CELL$PACIG"10"
Example Code
Code Result


CELLPAIG, CELL$PACIG A IMG
BRER

O CELLPAIG"10", CELL$PACIG"10", IMG
BRER"5"
Example Code
Code Result


1X1 TABLE ITHI 1X1 TABLE

O 1x1 TABLE ITHI A 1x1 TABLE, BRER$1 & 3
Example Code
Code Result

Butte7Ily

Butte7Ily

O 1x1 TABLE ITHI A 1x1 TABLE, BRER$7 & 7
Example Code
Code Result

Butte7Ily

Butte7Ily


CETERIG IMAGE$ I TABLE$

In placing images in a table cell, any spaces between the tags in the coding
may, depending upon the browser, get collapsed into space characters.
These spaces can off center your image. Below are examples of this. For
clarity, only the coding for the table cell with the image in it is shown. The
table on the left has an image that is off-centered, the table on right has its
image centered.

Back to Image Tag Examples

TABLE ALIGMET

O ALIG"LEFT"
Table aligned left
O ALIGN="CENTER"
Table aligned center
--efault setting.
(ot fully supported)
O ALIGN="RIGHT"
Table aligned right
To the Table of Contents
TABLE WIDTH

HTML Table Tags Examples II:
Advanced

O Cellpadding
O Cellspacing
O Color in Tables
4 Color namesFor use with BGCLR
O WIDTH="100%"
Table expands... ...to the entire window width.
O WIDTH="50%"
Table
expands...
to fill half of the
window's width.
O WIDTH="500"
Table width set at... ...500 pixels.
O WIDTH="300"
Table width set at... ...300 pixels.
O Cell idth
O Colspan
O Colspec
O ull Cell
O Rowspan
O 1x1 Table ithin a 3x3
Table
O $ample Calendar
4 TR Tag ith Image
4 TR, TTH Tags, Colspan &
Rowspan
4 Table Tag & TR Tag
4 Table Tag -- 1x1 Table ithin 1x1
Table
4 Table Tag -- Cellspacing Coloring
4 Table Colors and Font Colors
O Bar Graph Example
Table Tags Examples Page 1

CELLPAIG

O CELLPAIG"10"
TABLE BORDER"7" CELL!ADDING"10"~
TR~
TD~This is a TD cell/TD~
TD~!RE~ /!RE~/TD~
TH~This is a TH cell/TH~
/TR~
TR~
TH VALIGN"TO!"~Text aligned top/TH~
TH~Image in TH cell with deIault alignments ---
~/TH~
TH~IMG SRC"blylplne.giI"
ALT"ai7plane"~/TH~
/TR~
TR~
TH VALIGN"BOTTOM"~Text aligned
bottom/TH~
TD~Image in TD cell with deIault alignments --
-~/TD~
TD~IMG SRC"blylplne.giI"
ALT"ai7plane"~/TD~
/TR~
/TABLE~
This
is a
TD
cell
This a
TH cell
Text
aligne
d top
Image in
TH cell
with
default
alignmen
ts --->

Text
aligne
d
botto
m
Image in
T cell
with
default
alignmen
ts --->


CELL$PACIG

O CELL$PACIG"10"
TABLE BORDER"7" CELLS!ACING"10"~
TR~
TD~!RE~ /!RE~/TD~
/TR~
TR~
TH VALIGN"TO!"~Text aligned top/TH~
TH~Image in TH cell with deIault alignments ---
~/TH~
TH~IMG SRC"blylplne.giI"
ALT"ai7plane"~/TH~
/TR~
TR~
TH VALIGN"BOTTOM"~Text aligned
bottom/TH~
TD~Image in TD cell with deIault alignments ---
~/TD~
TD~IMG SRC"blylplne.giI"
ALT"ai7plane"~/TD~
/TR~
/TABLE~
This a
TD
cell
This is a
TH cell
Text
aligne
d top
Image in
TH cell
with
default
alignmen
ts --->

Text
aligne
d
botto
m
Image in
T cell
with
default
alignmen
ts --->


CELL ITH

O T CL&M$: FIR$T CELL ITH"50"
TABLE BORDER"7"~
TR~
TH WIDTH"50"~This cell will expand to 50
iI the contents oI the othe7 cell will allow./TH~
TH~The Ii7st cell will expand to 50
iI the contents oI this cell will allow./TH~
/TR~
/TABLE~
This cell will
expand to 50
if the contents of
the other cell
will allow.
The first cell will
expand to 50
if the contents of
this cell will
allow.

O THREE CL&M$: FIR$T CELL ITH"50"
TABLE BORDER"7"~
TR~
TH WIDTH"50"~This cell will expand to 50
iI the contents oI the othe7 cells will allow./TH~
The first cell
will expand to
50 if the
contents of the
other cells will
allow.
The
first cell
will
expand
to 50
if the
The
first cell
will
expand
to 50
if the
/TR~
/TABLE~ contents
of the
other
cells
will
allow.
contents
of the
other
cells
will
allow.


CL$PA

O CL$PA"2"
TABLE BORDER"7"~
TR~
TH COLS!AN"2"~This TH cell spans two columns/TH~
/TR~
TR~
TD~!RE~ /!RE~/TD~
TD~!RE~ /!RE~/TD~
TH ALIGN"LEFT"~Text aligned leIt/TH~
/TR~
TR~
TD~!RE~ /!RE~/TD~
TH~IMG SRC"7edball.giI" ALT"*"~/TH~
TH ALIGN"RIGHT"~Text aligned 7ight/TH~
/TR~
/TABLE~
This a
TD
cell
This TH cell
spans two
columns

Text
aligned left

Text
aligned
right


&LCELL

TABLE BORDER"7"~
TD~!RE~ /!RE~/TD~
TH~Below is a null cell./TH~
TD~!RE~ /!RE~/TD~
/TR~
TR~
TD~!RE~ /!RE~/TD~
TD~/TD~
TD~!RE~ /!RE~/TD~
/TR~
TR~
TD~!RE~ /!RE~/TD~
TH~Above is a null cell./TH~
TD~!RE~ /!RE~/TD~
/TR~
Below is a null cell.
Above is a null cell

/TABLE~

R$PA

O R$PA"3"
TABLE BORDER"7"~
TR~
TH ROWS!AN"3"~This TH cell spans th7ee 7ows/TH~
/TR~
TR~
TD~!RE~ /!RE~/TD~
TD~!RE~ /!RE~/TD~
/TR~
TR~
TH ALIGN"LEFT"~Text aligned leIt/TH~
TH ALIGN"RIGHT"~Text aligned 7ight/TH~
/TR~
/TABLE~
This is
a TD
cell
This
TH
cell
spans
three
rows
This is
a TH
cell

Text
aligned
left
Text
aligned
right


1x1 TABLE ITHI A 3x3 TABLE

TR~
TD~!RE~ /!RE~/TD~
/TR~
TR~
TD~!RE~ /!RE~/TD~
TD~
CA!TION ALIGN"BOTTOM"~
The USS Ente7p7ise a77ives home
/CA!TION~
TR~
TD~IMG SRC"ee.jpg" ALT"Sta7 T7ek
pic"~/TD~
/TR~
/TABLE~
/TD~
TD~!RE~ /!RE~/TD~
/TR~
TR~
TD ALIGN:LEFT"~B~Bold Text in a TD

The USS
Ente7p7ise
a77ives home

Bol
d
Tex
t in
a
T

Itali
c
Text
in a
TD
cell
cell/B~/TD~
TD~BR~/TD~
TD~I~Italic Text in a TD cell/I~/TD~
/TR~
/TABLE~
cell


CLR I TABLE$

O For 141 color names (including the 16 listed in the HTML 3.2
documentation) go to the Color page.
O I TR TAG ITH IMAGE.
Example code Results of example code
TABLE BORDER"7" CELL!ADDING"7"
CELLS!ACING"10"~
TR BGCOLOR"#00FF00"~
TD~IMG SRC"77ose.giI" ALT"7ose"~/TD~
TD~Image is a t7anspa7ent .giI./TD~
/TR~
/TABLE~

Image is
a
t7anspa7
ent .giI.

O I TR A TH TAG$, CL$PA A R$PA
TABLE BORDER"7"
CELL!ADDING"7"
CELLS!ACING"10"~
TR BGCOLOR"#00FF00"~
TD~A g7een 7ow./TD~
TD BGCOLOR"#FFFF00"~This
cell should be yellow, ove77iding the
7ow colo7./TD~ TD~Back to the
7ow colo7./TD~
TR BGCOLOR"#0000FF"~
TD~A blue 7ow./TD~
TD~!RE~ /!RE~/TD~
TD ROWS!AN"2"~This cell takes
the colo7 oI the topmost 7ow that it
spans/TD~
/TR~
TR BGCOLOR"#FF0000"~
TD~A 7ed 7ow./TD~
/TR~
/TABLE~

A
green
row.
This cell
should be
yellow,
ove77iding the
7ow colo7.
Back to the
7ow colo7.
A
blue
row.
This cell
takes the
color of the
topmost
row that it
spans.
A red row.

O I TABLE A TR TAG$
TABLE BGCOLOR"#FF0000" BORDER"7"
CELL!ADDING"7" CELLS!ACING"10"~
TR~
TD~The table has a 7ed backg7ound/TD~
TD~!RE~ /!RE~/TD~
/TR~
TR~
TD BGCOLOR"#0000FF"~BGCOLOR in TD/H
o7 TR ove77ides BGCOLOR in the TABLE
tag./TD~
TD~!RE~ /!RE~/TD~
/TR~
/TABLE~

The table has a red
background
BGCLR in TH or
TR overrides
BGCLR in the
TABLE tag.

O I TABLE TAG$, 1x1 TABLE ITHI A 1x1 TABLE,
BRER$7 & 7
Example Code
Code Result
CELLS!ACING"10" BGCOLOR"#0000FF"~
CA!TION
ALIGN"BOTTOM"~Butte7Ily/CA!TION~ TR~
TD~
CELLS!ACING"10" BGCOLOR#FF0000~
TR~
TD~IMG SRC"bIly.giI" ALT"butte7Ily"~/TD~
/TR~
/TABLE~
/TD~
/TR~
/TABLE~

Butte7Ily

O I TABLE TAG$, CELL$PACIG CLRIG
4 Example A: with an outer border
Example Code
Code Result
TR~
TD~
CELLS!ACING"10"~
TR~
blah
blah
blah
mo7e blah
blah blah
blah
TD BGCOLOR"#FFFFFE"~ blah blah blah
blah/TD~TD BGCOLOR"#FFFFFE"~ mo7e
blah blah blah blah/TD~
/TR~
/TABLE~
/TD~
/TR~
/TABLE~
blah

4
4 Example B: with no outer border
Example Code
Code Result
TR~
TD~
CELLS!ACING"10"~
TR~
TD BGCOLOR"#FFFFFE"~ blah blah blah
blah/TD~TD BGCOLOR"#FFFFFE"~ mo7e
blah blah blah blah/TD~
/TR~
/TABLE~
/TD~
/TR~
/TABLE~
blah
blah
blah
blah
mo7e blah
blah blah
blah

O
O TABLE CLR$ ITH FT CLR$
TABLE BGCOLOR"#FF0000" BORDER"0"
CELL!ADDING"7" CELLS!ACING"0"~
TR~
TH BGCOLOR"#FF8000"~FONT
COLOR#804000" SIZE"6"~
HBR~TBR~MBR~LBR~/FONT~/TH~
TH BGCOLOR"#804000"~
FONT COLOR#FF8000" SIZE"5" FACE"ARIAL"~
Mountain D7agonBR~Web Designs/FONT~/TH~
TH BGCOLOR"#FF8000"~!RE~ /!RE~/TH~
/TR~
/TABLE~

H
T
M
L
Mountain
Dragon
Web
Designs


BAR GRAPH EXAMPLE

table width95 bo7de70 cellspacing0 cellpadding0~
t7~td colspan3~h7 noshade~/td~/t7~
t7~td~ /td~th colspan2~Web !age Hits 1996/th~/t7~
t7~td now7ap~WWW Recipies/td~td~ /td~
td alignleIt now7ap~img bo7de72 s7c"7eddot.giI"
height25 width73~73/td~
/t7~t7~
td~Jane's !age/td~td~ /td~
td alignleIt~img bo7de72 s7c"7eddot.giI" height30
width25~25/td~
/t7~t7~
td~Joe's !age/td~
td align7ight~-10img bo7de72 s7c"7eddot.giI"
height30 width10~/td~
td~ /td~/t7~t7~td~!C !age/td~
td align7ight~-92img bo7de72 s7c"7eddot.giI"
height30 width92~
/td~td~/td~/t7~
/table~

eb Page Hits 1996

WWW
Recipies

73
Jane's !age
25
Joe's !age
-10
!C !age
-
92


Frame Tags Examples

O $ingle Frameset
O ouble Frameset
O Triple Frameset
O "uad Frameset

$IGLE FRAME$ET

Example code:
FRAMESET COLS"100,*" BORDER"0" FRAMEBORDER"no"~
FRAME MARGINHEIGHT"50" MARGINWIDTH"50" SRC"bo7de71.htm" NAME"main"~
/FRAMESET~
Result of code:
This link will take you to the page with the above coding: margin1.htm

&BLE FRAME$ET

Example code:
FRAMESET ROWS"100" COLS"10,*"~
FRAME NAME"F7ame 1" SRC"sidemenu.htm" SCROLLING"AUTO" MARGINHEIGHT1
MARGINWIDTH1~
FRAME NAME"F7ame 2" SRC"2ndI7ame.htm" SCROLLING"AUTO" MARGINHEIGHT1
MARGINWIDTH1~
/FRAMESET~
Result of code:
This link will take you to the page with the above coding: 2frames.htm

TRIPLE FRAME$ET

Example code:
FRAMESET COLS"96,*,96" BORDERCOLOR"#IIIIcc" BORDER"0" FRAMEBORDER"no"
FRAMES!ACING"no"~
FRAME NAME"leIt" SRC"leIt.htm" SCROLLING"none" MARGINHEIGHT"0"
MARGINWIDTH"0"~
FRAME NAME"main" SRC"d7eam.htm"~
FRAME NAME"7ight" SRC"7ight.htm" SCROLLING"none" MARGINHEIGHT"0"
MARGIINWIDTH"0"~
NOFRAMES~
BODY BGCOLOR#FFFFCC TEXT#990033~
This is an example oI I7ames. II you a7e 7eading this you7 b7owse7 does not have the ability to view I7ames.
/body~/noI7ames~
/I7ameset~
Result of code:
This link will take you to the page with the above coding: 3frames.htm

"&A FRAME$ET

Example code:
FRAMESET ROWS"75,*~
NOFRAMES~
HEAD~/HEAD~BODY BGCOLOR"#FFFFF0"~
CENTER~You7 b7owse7 does not supo7t I7ames. This live example will not wo7k. Retu7n to A
HREF"I7ames.htm"~F7ame Tags page/A~ o7 the A HREF"index.htm"~HTML Examples Title
page/A~./CENTER~/BODY~
/NOFRAMES~
FRAMESET BORDERCOLOR"RED" COLS"200,*"~
FRAMESET ROWS"23,23"~
FRAME MARGINWIDTH"1" MARGINHEIGHT"1" NAME"logo" SRC"logo.htm"
SCROLLING"no"~
FRAME MARGINWIDTH"1" MARGINHEIGHT"1" NAME"counte7" SRC"counte7.htm"
SCROLLING"no"~
/FRAMESET~
FRAME MARGINWIDTH"1" MARGINHEIGHT"1" NAME"menu" SRC"menu.htm"
SCROLLING"no"~
/FRAMESET~
FRAME FRAME MARGINWIDTH"35" MARGINHEIGHT"1" NAME"main" SRC"main.htm"~
/FRAMESET~
Result of code:

ther $pacing Layout Tags Examples

O Break
O Center
O Margins
O Multicol
4 ested Multicol
O BR & BR Tags
O Paragraph
O $pacer
4 Block
4 Horizontal
4 'ertical
ote: These tags do not affect text appearance, just placement. Tags that affect text placement, but
can also affect text appearance can be found in the Text Tag Examples page.

BREAK

Example code:
This is an example oI how the BREAK~B7eak tag wo7ks in a document.
Result of code:
This is an example oI how the
B7eak tag wo7ks in a document.

MARGI$

O USING FRAMES
Example code:
FRAMESET COLS"100,*" BORDER"0"
FRAMEBORDER"no"~
FRAME MARGINHEIGHT"50" MARGINWIDTH"50"
SRC"bo7de71.htm" NAME"main"~
/FRAMESET~
Result of code:
This link will take you to the page with the above
coding: margin1.htm
O USING BODY TAG
Example code:
BODY TO!MARGIN"50" LEFTMARGIN"50"~:
Result of code:
This link will take you to the page with the above
coding: margin2.htm

CETER

Example code:
This is an example oI how the CENTER~Cente7 Text tag/CENTER~ wo7ks
in a document.
Result of code:
This is an example oI how the
Cente7 text tag
wo7ks in a document.

M&LTICL

Example code:
MULTICOL COLS"2" GUTTER"25" WIDTH"250"~The Multicol tag
divides text up into newspape7 o7 newslette7 type columns. Each column will
be oI the same width.!~You can use othe7 HTML tags within the Multicol
tag./MULTICOL~
Result of code:
The Multicol tag divides text up into newspape7 o7 newslette7 type columns.
Each column will be oI the same width.
You can use othe7 HTML tags within the Multicol tag.
O E$TE CL&M$
Example code:
MULTICOL COLS"2" GUTTER"25" WIDTH"300"~The Multicol
tag divides text up into newspape7 o7 newslette7 type columns. Each
column will be oI the same width.MULTICOL COLS"2"~FONT
SIZE"2"~You can use othe7 HTML tags within the Multicol tag,
including othe7 Multicol tags./FONT~/MULTICOL~The deIault
value Io7 the Gutte7 att7ibute is 10./MULTICOL~
Result of code:
The Multicol tag divides text up into newspape7 o7 newslette7 type
columns. Each column will be oI the same width.You can use othe7 HTML tags
within the Multicol tag, including othe7 Multicol tags.The deIault value Io7 the Gutte7
att7ibute is 10.

BR & BR

Example code:
NOBR~The NOBR tag p7events text I7om being w7apped iI it is too long Io7
the b7owse7 window to display it. The WBR tag allows speciIing whe7e the line
oI textWBR~can be w7apped/WBR~ within the NOBR tags./NOBR~
Result of code:
The NOBR tag p7events text I7om being w7apped iI it is too long Io7 the
b7owse7 window to display it. The WBR tag allows speciIing whe7e the line oI
textcan be w7apped within the NOBR tags.

PARAGRAPH

O P ALIG"CETER">
Example code:
! ALIGN"CENTER"~ Cente7 text and g7aphics within a pa7ag7aph, It does
not 7equi7e a closing tag; BR~
it is tu7ned oII by "pa7ag7aph," "table," tagBR~
o7 othe7 such Io7mating tags.BR~
Result of example code:
Cente7 text and g7aphics within a pa7ag7aph. It does not 7equi7e a closing tag;
it is tu7ned oII by "pa7ag7aph," "table,"
o7 othe7 such Io7mating tags.
O P ALIG"RIGHT">
Example code:
! ALIGN"RIGHT"~ Right align text and g7aphics within a pa7ag7aph, It
does not 7equi7e a closing tag; BR~
it is tu7ned oII by "pa7ag7aph," "table," tagBR~
o7 othe7 such Io7mating tags.BR~
It also has a LEFT (deIault) value Io7 its ALIGN att7ibute.
Result of example code:
Right align text and g7aphics within a pa7ag7aph. It does not 7equi7e a closing
tag;
it is tu7ned oII by "pa7ag7aph," "table,"
o7 othe7 such Io7mating tags.
It also has a LEFT (deIault) value Io7 its ALIGN att7ibute.

$PACER

O BLCK
Example code:
S!ACER TY!E"block" WIDTH"50" HEIGHT"40"
ALIGN"leIt"~Space7 tags can be used Io7: spacing between lines o7 text and
can be used Io7 text indention. The block att7ibute is the same as c7eating an
invisible image. Space7s have no closing tag.
Result of code:
Space7 Tags can be used Io7: spacing between lines o7 text and can be used Io7
text indention. The block att7ibute is the same as c7eating an invisible image.
Space7s have no closing tag
O HRIZTAL
Example code:
S!ACER TY!E"ho7izontal" SIZE"70"~Space7 Tags can be used Io7
spacing between lines o7 text and can be used Io7 text indention.S!ACER
TY!E"ho7izontal" SIZE"25"~The block att7ibute is the same as c7eating an
Result of code:
Space7 Tags can be used Io7 spacing between lines o7 text and can be used Io7
text indention.The block att7ibute is the same as c7eating an invisible image.
Space7s have no closing tag.
O 'ERTICAL
Example code:
Space7 Tags can be used Io7: S!ACER TY!E"ve7tical" SIZE"25"~ spacing
between lines o7 text and can be used Io7 text indention.S!ACER
TY!E"ve7tical" SIZE"15"~The block att7ibute is the same as c7eating an
Result of code:
Space7 Tags can be used Io7: spacing between lines o7 text and can be used Io7
text indention.The block att7ibute is the same as c7eating an invisible image.
Space7s have no closing tag.
ross-PIatform oIor Issues

O BrowserPlatform ifferences
O $ome ther isplay Considerations
O hat to o?
O Back to the Color Menu

Browser/Platform Differences
The7e a7e two ove7lapping sets oI colo7 names. The Ii7st set, the sixteen colo7
names, was Ii7st int7oduced by Mic7osoIt and is oIIicially sanctioned by the
HTML 3.2 standa7d. The second set, the 140 colo7 names, int7oduced mainly
by Netscape, includes in it the colo7 names I7om the Ii7st set.
Colo7 names can be used in place oI RGB o7 hexadecimal colo7 coding in
bgcolo7, Iont, and baseIont tags.
Examples:
O BODY BGCOLORsilve7 TEXTpu7ple~
O FONT COLORaqua~AQUA Iont colo7/FONT~
O TABLE BGCOLORaqua WIDTH100~
O TR BGCOLORg7ay~
O TD BGCOLORyellow~BR~/TD~
O The COLOR att7ibute Io7 the BASEFONT~ (a dep7eciated tag) is
poo7ly suppo7ted and should not be used.

Colo7 names a7e not suppo7ted by the old 1.0 Netscape and Inte7net Explo7e7
and 2.0 Mosaic b7owse7s (and, oI cou7se, Lynx).
The sixteen colo7 names a7e suppo7ted 7athe7 well by the g7aphical b7owse7s
tested, the only p7oblem being in AOL 4.0: the colo7 name g7ay is displayed as
999999, while on all othe7 b7owse7s tested it is a da7ke7 808080.
The 140 colo7 names a7e less suppo7ted by the b7owse7s tested. Depending
upon the b7owse7, unsuppo7ted colo7 names may appea7 as a colo7 simila7 to the
expected colo7, anothe7 colo7 ve7y diIIe7ent than expected, black, o7
"t7anspa7ent". Actually, while the7e a7e 140 diIIe7ent names, the7e a7e only 138
colo7s 7ep7esented: aqua and cyan 7ep7esent the same colo7 (00FFFF), and
Iuchsia and magenta 7ep7esent he same colo7 (00FFFF) .
Some sou7ces state that the7e Iou7 levels oI depth to each colo7 as well, with
level one being the lightest, and level Iou7 being the da7kest (i.e., blue1 is
lighte7 than blue4). The7e a7e even a Iew web sites that pu7po7t to show this
(but like most sites pu7po7ting to show colo7 names in action, they actually use
RGB coding to show the colo7s which can be ve7y misleading at times). The
colo7 levels a7e only t7ue Io7 Unix (X Window System). I would st7ongly
advise against using them Io7 c7oss-platIo7m web design.
Othe7 sou7ces will add ext7a colo7 names, adding in colo7 names like
"navyblue." When most (but not all) b7owse7s come ac7oss an unsuppo7ted
colo7 name, they t7y to Iind a hexadecimal colo7 code within the name
p7esented. Hexadecimal uses the numbe7s 0-9 and the lette7s A-F. Thus, in
navyblue, most b7owse7s will see the A, the B and the E as hexadecimals, and
conve7t the 7est oI the lette7s to howeve7 many numbe7 oI ze7oes the b7owse7
needs to b7ing the hexadecimal colo7 code to a total oI 6 digits. The 7esult?
Navyblue gets 7ende7ed as A0B0E0, which is a 7athe7 light blue colo7. II you
type in "navyg7een," you will get a da7ke7 blue: 0A00EE. It is by coincidence
that "navyblue" p7oduces a bluish colo7, but not because it is an oIIicial colo7
name. Since not all b7owse7s will inte7p7et non-suppo7ted colo7 names in this
manne7, it is unwise to make up colo7 names.
And Iinally, I need to add7ess the issue oI va7iant spellings oI the wo7d g7ay. I
keep seeing 7eIe7ences that "g7ay" and "g7ey" a7e both suppo7ted. Not
completely. I think the conIusion may be that most oI the g7ay colo7s end in
"g7ay" except Io7 one: "lightg7ey". Why this one exception is anyone's guess!
The bottom line is, in the b7owse7s tested Io7 this site, with the lone except Io7
lightg7ey, g7ay is the co77ect ending Io7 any g7ay colo7, any othe7 spelling is
unsuppo7ted (and in the case oI "lightg7ey", the alte7nate spelling "lightg7ay" is
not a suppo7ted colo7).
$ome particuIars:
In Netscape 2.0 and 3.0 on a !C with 256 colo7s, aliceblue looks mo7e like a
yellowish-g7een. Netscape 4.0, Inte7net Explo7e7 3.0 and 4.0, AOL 4.0, all
suppo7t the 140 colo7 names.
The newest ve7sion oI WebTV suppo7ts the 140 colo7 names com pletely, while
on olde7 ve7sions oI WebTV seve7al 7elated colo7s a7e displayed as the same
colo7: blueviolet is the same as blue, goldend7od is the same as gold,
g7eenyellow is the same as g7een, limeg7een is the same as lime, olived7ab is
the same as olive, o7ange7ed is the same as o7ange, and yellowg7een is the same
as yellow.
Ope7a 3.60 also does not suppo7t all oI the 140 names. II a non- suppo7ted colo7
name is used in the Iont tag, the text becomes black, but iI used in the bgcolo7
in table cells, the table colo7 becomes whateve7 the bgcolo7 oI the page is! In
othe7 wo7ds, t7anspa7ent. The non-suppo7ted colo7s a7e aliceblue (seems to be
the least suppo7ted colo7 name), bu7lywood, c7imson, da7kblue, da7kcyan,
da7kg7ay, da7kgenta, da7k7ed, indigo, lightg7een, lightg7ay, saddleb7own,
salmon, and whitesmoke.
AIte7 you 7emove the colo7s that a7e not suppo7ted by all b7owse7s tested
(unde7 optimum colo7 depth and video RAM conditions), IiIteen out oI the
sixteen colo7 names and 118 out oI the 140 colo7 names 7emain. Out oI those,
only ten a7e in the b7owse7-saIe palette.
$ome Other Display Considerations
ontrast
Fo7 la7gest c7oss-platIo7m 7eadability, one should t7y to not use low cont7ast
between text and backg7ound. What may be just 7eadable on you7 compute7
monito7, may not be on a da7ke7 monito7 (see discussion on gamma values
below). Cont7ast between colo7s is also impo7tant Io7 colo7 blind visito7s. A
la7ge mino7ity oI web su7Ie7s suIIe7 some kind oI colo7 blindness. The most
common is the conIusing oI 7ed and o7ange with yellow and g7een,
7espectively. Going to the othe7 end, one should also t7y to not use ve7y high
cont7asts, such as black text on a pu7e (Iully satu7ated) white backg7ound, as
well. Such high cont7asts can be ha7sh on the eyes Io7 lengthy 7eading (except
maybe Io7 Ilat panel LCD use7s) and as we lea7ned ea7lie7 on some WebTV
viewe7s (depending upon the condition o7 quality oI the TV set being used)
using pu7e colo7s can disto7t the TV pictu7e, cause audio noise, o7 cause text to
"bleed".
Gamma VaIues
The Mac has a highe7 gamma value, thus colo7s and g7aphics look b7ighte7 on a
Mac than on a !C. What looks Iine on a Mac, may be too da7k on a !C. What
looks good on both the !C and the Mac, in te7ms oI gamma values, will be
p7obably be Iine Io7 the WebTV. Howeve7, individual monito7s va7y in quality,
and use7s can alte7 monito7 settings.
hat to Do?
T7y to keep you7 web page colo7s to within 256 colo7s, and speciIically the so-
called "b7owse7 saIe" 216 colo7 palette but stay away I7om the Iully satu7ated
p7ima7y colo7s, especially 7ed and white, as backg7ound colo7s o7 Io7 a long
a7eas oI text, and avoid both ve7y low and maximum cont7asts between
backg7ound and text colo7s. II you design on a MAC, and you7 images look a
bit da7k, they may be too da7k on a !C. II you design on a !C, and you7 images
look a bit b7ight, they may be too b7ight on a MAC.
It's diIIicult to stay within a set numbe7 oI colo7s, it's like being told you can
only w7ite a complete wo7d pictu7e within Iou7teen lines, in iambic pentamete7,
and 7est7icted to a deIinite 7hyme scheme. Makes choosing wo7ds painIul. But
many a beautiIul Sonnet was w7itten unde7 such conditions. It could be wo7se:
St7ict syllable count,
the 7igid, ha7sh Io7m becomes
a lovely haiku.
(I told you it could be wo7se!) And while I7ee-ve7se can also be beautiIul,
const7aints can challenge and encou7age the c7eative juices to new heights. The
economy oI the 7igid st7uctu7e teaches us the impo7tance oI each wo7d choice.
And make us bette7 I7ee-ve7se w7ite7s late7. You can always go to desk top
publishing, with its Iou7 colo7 p7int p7ocess, o7 paint with as many colo7s as you
wish on you7 la7ge canvas, but when it comes to c7eating Io7 the web wo7ld,
until colo7 synch7onization becomes uniIo7m and unive7sal, coding a web page
Io7 the widest possible audience means 7est7aining you7selI. You can still
occasionally b7eak the 7ules, but do so ca7eIully! II you7 audience is a ve7y
select one, Io7 instance, and you don't ca7e about losing visits, then by all
means code to you7 select audience. Othe7wise, the advice above applies, as
does the Iinal advice oI avoiding the use oI colo7 names. Use the RGB o7
hexadecimal coding instead; iI you do use them, avoid using the ones that a7e
not widely suppo7ted and t7y to use the b7owse7-saIe colo7 names. And then
7ealize that...
&ItimateIy, The &ser Is in ontroI
You thought you we7e, o7 you7 Web edito7 was. But those a7e me7e illusions in
the vi7tual 7eality oI the Inte7net. The Inte7net is not a piece oI pape7, whe7e
once you w7ite something down, the Io7mat, the layout, is Iixed. Remembe7,
the use7 o7 visito7 to you7 web page has ultimate cont7ol ove7 some oI the
layout and Io7matting oI you7 web page. They can change the deIault
backg7ound, text and link colo7s on thei7 b7owse7s, ove77iding what you've
chosen Io7 you7 web page. They can tu7n oII images and have thei7 choice oI
deIault bgcolo7 ove77ide you7 choice oI a backg7ound giI. On many b7owse7s,
use7s can also change b7owse7 p7eIe7ences to use nea7est-colo7 matching
(substitution) o7 to dithe7; iI they have thei7 use7 p7eIe7ences set to nea7est-
colo7, the b7owse7 will 7ende7 a non-b7owse7 saIe colo7 to its nea7est b7owse7-
saIe match, which may 7esult in a noticeable diIIe7ence in appea7ance I7om
what you intended and could even cause you7 page to become un7eadable.
Finally, individual monito7s can have diIIe7ent cont7ast, b7ightness (gamma)
and colo7 "tempe7atu7e" settings, sc7een 7esolution, colo7 depth, and video
RAM that all can alte7 how you7 page will look. In the wide wo7ld oI web page
c7eation, WYSIWYG takes on a lite7al meaning: What You See Is What You
Get, but it may ve7y likely not be what anyone else gets! WYSIWYG is a Web
Myth! This will be an oIt 7epeated theme th7oughout this site. Thus, you7 colo7s
may dithe7, o7 map to anothe7 colo7, be viewed on a da7k o7 light monito7, and
the only thing you can do is to Iollow the above advice to minimize the
disto7ting aIIects.
-- Much oI the above a7ticle was published in 2000 as "The T7ouble With Colo7"
in ibrary Computing Journal, Vol 18 no 3., pages 208-212. Jou7nal published by Sage
!ublications. Will also be included as a chapte7 Io7 my up coming book "Me7chant's
Encyclopedia oI UseIul HTML" Io7 Sca7ec7ow p7ess late7 this yea7.

HTML Tags Chart

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Tags Chart

Uploaded by

Copyright:

Available Formats

HTML Tugs Churt

To the Table of Contents

Below is a null cell.

Above is a null cell

You might also like