Lesson 1 (cont'd)

Links

<A HREF="http://www.amazon.com">Click Here For Amazon</A></B>

Here's What's Happening

A stands for Anchor. It begins the link to another page.
HREF stands for Hypertext REFerence. That's a nice, short way of saying to the browser, "This is where the link is going to go."
http://www.amazon.com is the FULL ADDRESS of the link. Notice that you must include http:// in the address (more on that later). Also notice that the address has an equal sign in front of it and is enclosed in quotes. Why? Because it's an attribute of the Anchor tag.
Where it reads "Click Here For Amazon" is where you write the text you want to appear on the page. What is in that space will appear on the page for the viewer to click. So be sure to write something that identifies the link.
/A ends the entire link command.

Here is what the above code would produce on your page:

Link Text Color

LINK= “#------“: This changes the color of your unvisited links to the color of your choice.
VLINK= “#------“ : This changes the color of your visited links to the color of your choice.

For example, suppose you wanted a page with red text for unvisited links and green text for visited links. You might use a tag like this:

<BODY LINK="#FF0000" VLINK="#00FF00">

Using an Image as a Link

<A HREF="index.html"><IMG SRC="images/computer.gif"></A>

To make the border disappear, you add a simple attribute to the code above. Here's the format:

<A HREF="index.html"><IMG SRC="images/computer.gif" BORDER="0"></A>

Basic Table Commands

<TABLE> is the tag to create a table.

<BORDER="1"> gives you the width of the border. Do you notice the line that goes around the table and in between the cells? This border is 1 pixel wide. We can change it to make the border thicker, or to actually make the border invisible (more on that later).

<CAPTION> and </CAPTION> places a caption over your table. The caption will be centered. It is completely optional. Use it if you'd like to, but not all of your tables will need captions. I actually don't use this tag very often.

<TR> is used when you want a new Table Row to begin. Notice that you need to end every table row with an </TR>. See that above?

<TD> stands for Table Data. In reality, this is the tag that begins a cell. You need to end every one that you open with an </TD>. See how I have that above?

</TABLE> ends the table.

<TABLE BORDER="1">
<CAPTION>A 2 x 5 Table</CAPTION>

<TR>
<TD>Row 1, Cell 1</TD>
<TD>Row 1, Cell 2</TD>
<TD>Row 1, Cell 3</TD>
<TD>Row 1, Cell 4</TD>
<TD>Row 1, Cell 5</TD>
</TR>

<TR>
<TD>Row 2, Cell 1</TD>
<TD>Row 2, Cell 2</TD>
<TD>Row 2, Cell 3</TD>
<TD>Row 2, Cell 4</TD>
<TD>Row 2, Cell 5</TD>
</TR>

</TABLE>

And here is what the table would look like:

A 2 x 5 Table
Row 1, Cell 1	Row 1, Cell 2	Row 1, Cell 3	Row 1, Cell 4	Row 1, Cell 5
Row 2, Cell 1	Row 2, Cell 2	Row 2, Cell 3	Row 2, Cell 4	Row 2, Cell 5

Notice that I used 2 TR tags for the two rows, and each TR has 5 TD tags inside of it, representing the 5 columns.

Table Attributes

ALIGN

The Bradys
Marcia	Carol	Greg
Jan	Alice	Peter
Cindy	Mike	Bobby

The Bradys
Marcia	Carol	Greg
Jan	Alice	Peter
Cindy	Mike	Bobby

If you use the ALIGN attribute with the TD tag, it will align the contents of the individual cell. For example, look at the code for this table:

<TABLE BORDER="1" WIDTH="600">
<TR>
<TD ALIGN="left">left</TD>
<TD ALIGN="center">center</TD>
<TD ALIGN="right">right</TD>
</TR>
</TABLE>

left

center

right

WIDTH

The WIDTH attribute gives you control over how wide you would like your table to be. I use this attribute all the time. Like the ALIGN attribute, the WIDTH attribute can be used with the TABLE tag or the TD tag.

When you decide on the width of your table, you can either give the number in pixels or percent. For example, if I say <TABLE WIDTH="250">, that means I want my table to be 250 pixels wide. But if I say <TABLE WIDTH="50%">, that means I want my table to cover 50% of the width of my screen. Both of these methods are very useful, so it’s nice to know that we can use either one of them.

I mentioned that we can use the WIDTH attribute for the TD tag also. For example, if I say <TD WIDTH="100">, that means I want my cell to be 100 pixels wide. But if I say <TD WIDTH="50%">, that means I want my cell to cover 50% of the width of my table.

BORDER

Marcia	Carol	Greg
Jan	Alice	Peter
Cindy	Mike	Bobby

You can have a really thick border:

Marcia	Carol	Greg
Jan	Alice	Peter
Cindy	Mike	Bobby

You can even have no border at all (this is a common trick used by Web designers. We’ll be doing a lot more of this next week):

Marcia	Carol	Greg
Jan	Alice	Peter
Cindy	Mike	Bobby

BGCOLOR

You can use it with the TABLE tag and the TD tag. If you use it with the TABLE tag, you change the background color of the entire table. If you use it with the TD tag, you change the background color of just one cell.

Here are a couple of examples:

Cell #1

Cell #2

Cell #3

Cell #1

Cell #2

Cell #3

COLSPAN

This is a really useful attribute. Look at this table:

The Brady Bunch
Marcia	Carol	Greg
Jan	Alice	Peter
Cindy	Mike	Bobby

Notice the first row? I created a row with one cell that stretched all the way across the table. Pretty neat, don’t you think? Here is the code for the first row:

<TR>
<TD COLSPAN="3" ALIGN="center"><B>The Brady Bunch</B></A>
</TR>

Page 5

Lessons

Web Design II