Web Page Design
HTML Tutorial
PART 2:   Links, Colors, Tables

Click here to return to "outline" page

Table of Contents

  1.   External links
    1.   URL
    2.   Relative address vs. absolute address
    3.   To a page in same directory
    4.   To a page in parent directory
    5.   To a page in subordinate directory
    6.   To a page on same server
    7.   To a page on another server
  2.   Colors
    1.   Browser considerations
    2.   Table of named colors
    3.   Table of hexadecimal colors
    4.   bgcolor
  3.   Tables
    1.   Table structure
    2.   Simple tables with no borders
    3.   Simple tables with borders
    4.   Complex tables
    5.   Complex tables with hyperlinks
A.   External links
A - 1.   URL

The URL - Universal Resource Locator (address) has three parts separated by /. In the URL - http://www.imcnet.net/~hlfrgson, the three parts are:

  1.   http:/ - protocol
  2.   www.imcnet.net - domain name
  3.   ~hlfrgson - file to execute
A - 2.   Relative address vs. absolute address

Relative address

Absolute address

A - 3.   To a page in same directory

A - 4.   To a page in parent directory

A - 5.   To a page in subordinate directory
  • Code Examples:
    <A HREF="subdirectory name/file name">Go to XXX</a>
---
Go to Module 2
A - 6.   To a page on same server

  • Code examples:
    <A HREF"~name/directory name/file name">Go to XXX</a>
---
<A HREF=~jlteach/schools/schools.htm">Go to schools</a>
A - 7.   To a page on another server

  • Code examples:
    <A HREF="protocol/domain/file">Go to XXX</a>
---
<a href="http://www.microsoft.com/ie/default.html">Go to Microsoft</a>
B.   Colors
B - 1.   Browser considerations

Font colors can be set using a "named color" such as red, blue, etc. or by using a six character hexadecimal number where the first two characters represent the amount of "red," the third and forth characters represent the amount of "green," and the last two characters indicate the amount of "blue."

Some browsers will not recognize color names like red, blue, etc.

All browsers recognize hexadecimal values such as "#aabbcc" or "#112233" "#000000" or "#ffffff" etc. Examples: "#ff0000" would be red, "#00ff00" would be green, and "#0000ff" would be blue.

B - 2.   Table of named colors
and
B - 3.   Table of hexadecimal colors

Name

RGB

Name

RGB

White

#FFFFFF

Red

 #FFOOOO

Green

#00FF00

Blue

#0000FF

Magenta

#FF00FF

Cyan

 #00FFFF

Yellow

#FFFF00

Black

#000000

Aquamarine

#70DB93

Baker's
Chocolate

 #5C3317

Blue
Violet

#9F5F9F

Brass

#B5A642

Bright
Gold

#D9D919

Brown

#A62A2A

Bronze

#8C7853

Bronze II

#A67D3D

Cadet
Blue

#5F9F9F

Cool
Copper

#D98719

Copper

#B87333

Coral

#FF7F00

Cornflower
Blue

#42426F

Dark
Brown

#5C4033

Dark
Green

#2F4F2F

Dark
Green
Copper

#4A766E

Dark
Olive
Green

#4F4F2F

Dark
Orchid

#9932CD

Dark
Purple

#871F78

Dark
Slate
Blue

#6B238E

Dark
Slate
Gray

#2F4F4F

Dark
Tan

#97694F

Dark
Turquoise

#7093DB

Dark
Wood

#855E42

Dim
Gray

#545454

Dusty
Rose

#856363

Feldspar

#D19275

Firebrick

#8E2323

Forest
Green

#238E23

Gold

#CD7F32

Goldenrod

#DBDB70

Gray

#C0C0C0

Green
Copper

#527F76

Green
Yellow

#93DB70

Hunter
Green

#215E21

Indian
Red

#4E2F2F

Khaki

#9F9F5F

Light
Blue

#C0D9D9

Light
Gray

#A8A8A8

Light
Steel
Blue

#8F8FBD

Light
Wood

#E9C2A6

Lime
Green

#32CD32

Mandarin
Orange
Gray

#E47833

Light
Maroon

#8E236B

Medium
Aquamarine

#32CD99

Medium
Blue

#3232CD

Medium
Forest
Green

#6B8E23

Medium
Goldenrod

#EAEAAE

Medium
Orchid

#9370DB

Medium
Sea
Green

#426F42

Medium
Slate
Blue

#7F00FF

Medium
Spring
Green

#7FFF00

Medium
Turquoise

#70DBDB

Medium
Violet
Red

#DB7093

Medium
Wood

#A68064

Midnight
Blue

#2F2F4F

Navy
Blue

#23238E

Neon
Blue

#4d4dff

Neon
Pink

#FF6EC7

New
Midnight
Blue

#00009C

New
Tan

#EBC79E

Old
Gold

#CFB53B

Orange

#FF7F00

Orange
Red

#FF2400

Orchid

#DB70DB

Pale
Green

#8FBC8F

Pink

#BC8F8F

Neon
Plum

#EAADEA

Quartz
Blue

#D9D9F3

Rich
Blue
Blue

#5959AB

Salmon

#6F4242

Scarlet

#8C1717

Sea
Green

#238E68

Semi-Sweet
Choc

#6B4226

Sienna

#8E6B23

Silver

#E6E8FA

Sky
Blue

#3299cc

Slate
Blue

#007FFF

Spicy
Pink

#FF1CAE

Spring
Green

#00FF7F

Steel
Blue

#236B8E

Summer
Sky

#38B0DE

Tan

#DB9370

Thistle

#D8BFD8

Turquoise

#ADEAEA

Very
Dark
Brown

#5C4033

Very
Light
Gray

#CDCDCD

Violet

#4F2F4F

Violet
Red

#CC3299

Wheat

#D8D8BF

Yellow
Green

#99CC32

 #FFEECC .

B - 4.   bgcolor

BGCOLOR tag
Purpose: To set the background color of the page.
Example:

  • Code example:
    <BODY BGCOLOR="#EEDDCC">
C.   Tables

C - 1.   Table structure

  • A table is composed of "cells" arranged in rows and columns.

  • Cells can contain many HTML tags, text, graphics, video, sound, etc.

  • Cells can be spaced over one or more rows or columns

  • Cells can have width and height sizing

  • Cells can have various border formats
C - 2.   Simple tables with no borders 

<TABLE>
<tr>
	<td>Tom</td>
	<td>Dick</td>
	<td>Harry</td>
<tr>
	<td>Red</td>
	<td>Green is a nice color</td>
	<td>Blue</td>
</table>

Tom Dick Harry
Red Green is a nice color Blue

C - 3.   Simple tables with borders 

<table border=5>
<tr>
	<td>Tom</td>
	<td>Dick</td>
	<td>Harry</td>
<tr>
	<td>Red</td>
	<td>Green is a nice color</td>
	<td>Blue</td>
</table>

Tom Dick Harry
Red Green is a nice color Blue

C - 4.   Complex tables 

<table border=5 bordercolor=blue width=100% 
cellpadding=8 cellspacing=8>
<caption align=bottom center><h1><I>Hey, Neat table!
</h1></I></caption>
<tr align=center>
<th bgcolor="#ff0000">Column 1</th>
<th bgcolor=green<Column 2</th>
<th bgcolor=0000ff>Column 3</th>
<tr align=left valign=top>
	<Tom<BR>
		Joe<br>
		Sue</td>
	<td>Dick</td>
	<td>Harry</td>
<tr align=right valign=bottom bgcolor=yellow>
	<td>Red</td>
	<td align=left>Now is the time 
	for all good men to come to the 
	aid of their country.  Now is the 
	time for all good men to come 
	to the aid of their country.</td>
	<td>Blue<br>
		Black<br>
		Purple</td>
</tr>
</table>

Hey, Neat table!
Column 1 Column 2 Column 3
Tom
Joe
Sue		 Dick Harry
Red Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Blue
Black
Purple

C - 5.   Complex tables with hyperlinks 

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=385>
	<TR VALIGN="top" ALIGN="left">
		<TD COLSPAN=1 ROWSPAN=3 WIDTH=137 
			ALIGN="center" VALIGN="center">
			<A HREF="test1.htm">
			<IMG HEIGHT=224 WIDTH=137 SRC="beth.gif" 
			 BORDER=0  ALT="Go to Test-1 page"></A></TD>
		<TD COLSPAN=2 ROWSPAN=1 WIDTH=248 
			ALIGN="center" VALIGN="center">
			<A HREF="test1.htm"><IMG 
			HEIGHT=115 WIDTH=248 SRC="ann.gif"
			 BORDER=0  ALT="Go to Test-1 page"></A></TD>
	</TR>

	<TR VALIGN="top" ALIGN="left">
		<TD COLSPAN=1 ROWSPAN=1 WIDTH=115 ALIGN="center" 
		VALIGN="center">
			<A HREF="test2htm">
			<IMG HEIGHT=51 WIDTH=115 SRC="kyle.gif"
			  BORDER=0  ALT="Go to Test-2 page"></A></TD>
		<TD COLSPAN=1 ROWSPAN=1 WIDTH=133 
			ALIGN="center" VALIGN="center">
			<A HREF="test2.htm"><IMG 
			HEIGHT=51 WIDTH=133 SRC="mike.gif" 
			 BORDER=0  ALT="Go to Test-2 page" ></A></TD>
	</TR>
	<TR VALIGN="top" ALIGN="left">
		<TD COLSPAN=2 ROWSPAN=1 WIDTH=248 
			ALIGN="center" VALIGN="center">
			<A HREF="test1.htm">
			<IMG HEIGHT=58 WIDTH=248 SRC="scott.gif" 
		 	BORDER=0  ALT="Go to Test-1 page" ></A></TD>
	</TR>
	<TR VALIGN="top" ALIGN="left">
		<TD COLSPAN=3 ROWSPAN=1 
			WIDTH=385 ALIGN="center" VALIGN="center">
			<A HREF="#top"><IMG HEIGHT=26 
			WIDTH=385 SRC="sky.gif"  
			BORDER=0  ALT="Go to top-of-page"></A></TD>
	</TR>
</TABLE>
Go to Test-1 page Go to Test-1 page
Go to Test-2 page Go to Test-2 page
Go to Test-1 page
Go to top-of-page
Go to top of page