Web Design–Part 2 Links, Graphics, Tables, and Color Explorers Guild May 25, 2000

Web Design–Part 2

Links, Graphics, Tables, and Color

Explorers Guild

May 25, 2000

Links• Anchor tags - <A>…</A>

• Attributes– Anchor Link

<A HREF=“filename”>hot text</A>

– Anchor Mark<A NAME=“markname”>...</A>

• Link to Anchor Mark

If in another document

<A HREF=“URL#markname”>hot text</A>

If in current document

<A HREF=“#markname”>hot text</A>

Adding Links<A HREF=“…”>What’s new?</A>

Anchor Tag Reminders• Don’t forget to put the quotation marks

around the URL value.

• Don’t forget the closing anchor tag.

Graphics<IMG SRC=“filename.ext”>

<IMG SRC=“web2.jpg”>

Image Attributes• Size• Alternative Text• Alignment

Image SizeWIDTH=n or % HEIGHT=n or %

Specifies width and/or height of image in pixels or %

Alternative TextALT=“text”

Displays alternative text

IMG SRC=“wd2.jpg” ALT=“web design 2”>

No Graphics Selected<IMG SRC=“wd2.jpg” ALT=“web design 2”>

AlignmentALIGN=“LEFT|RIGHT”

Aligns image relative to page

ALIGN=“TOP|BOTTOM|MIDDLE”Aligns image relative to text

Table<TABLE>

<TR>

<TD></TD>

</TR>

</TABLE>

Table Attributes• Table Tag Attributes

• Table Row Tag Attributes

• Table Data Tag Attributes

Table Problems• Missing End Tag

• Missing Quotation Mark

• Typos

• Inconsistent Browsers

Color• Made with hexdecimal code that defines

the amount of red, green, & blue– Example: #FF00FF

• Defines RRGGBB• Characters on scale, 0-9 then A-F

(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)• 0 is the lowest amount and F is the largest

amount