Appendix AXHTML ReferenceThis appendix includes element descriptions sorted both alphabetically and by category. Theelements listed in this appendix are the ones you will use most often, including a list of the Coreattributes allowed with the majority of XHTML elements and a complete list of character entities.Some elements are deprecated (obsolete) in XHTML but are still in common use in many Websites. If you are creating XHTML-compliant Web pages, you should not use these deprecatedelements. For more detailed information, visit the World Wide Web Consortium Web site atwww.w3.org.
Core AttributesThe Core attributes are allowed within all of the elements listed in the element tables.
DescriptionAttribute
class
id
style Specifies a style sheet rule for the element
title Specifies a title for the element; the content of the title is displayed in the browser as a pop-up
Specifies a class name for an element; the class name can be used to specify style sheet rules
Specifies a document-wide unique identifier for an element
Table A-1 XHTML core attributes
XHTML Reference — Appendix A 435
Ap
pen
dix A
C6700_APP A_435_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Alphabetical XHTML Reference
Description AttributesElement
<!--comment text-->
<a> Allows you to create a clickablehypertext anchor in a document; can betext or an image
Core attributes plus:
<base> Sets the base URL or target for a page;this is an empty element
<body> Identifies the body section of theWeb page
<basefont> (Deprecated)
Allows you to set a default size for thebody text in the document
<br> Inserts a line break, forcing text to thenext line; this is an empty element
<b> Allows you to boldface text Core attributes
<blockquote> Indents text on both the left and rightmargins
Core attributes
* Deprecated in XHTML
Allows you to insert a comment inyour code. Browsers do not displaycomments in the Web page. Placethe comment within the tag, for example:<!-- This is a comment -->
None
Core attributes plus:▪ clear—When used with a floating
image, forces text to appear at thebottom of the image
▪ href—The target destination in affdocumen
▪ name—The name of a fragment ofthe document
▪ target—The window or frame inttwhich the linked document is displayed
Core attributes plus:▪ href—The absolute or relative originalff
▪ url—For the current documentll
▪ target—The default window or framettin which links contained in thedocument are displayed
▪
▪
Core attributes plus:▪
▪
▪
▪
▪
alink—The color for the currentlykkselected link*
bgcolor—The page background color*rr
link—The color for unvisited links*kk
text—The default text color*tt
vlink—The color for visited links*
background—Points to the image fileddthat is tiled across the background ofthe page*
▪ color—The default text colorrr
▪ face—The default text face
▪ size—The default text size for thedocument from 1 to 7; normal browserdefault is size 3
Table A-2 Common XHTML elements
XHTML Reference — Appendix A436
C6700_APP A_436_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
<center>(Deprecated)
Centers text or images horizontally onthe page
None
<div> Indicates a division within the document Core attributes plus:▪ align—The horizontal alignment of the
contents of the division
<font>(Deprecated)
Allows you to specify the font size forany string of text; range of sizes is 1 to 7,with 3 being the default
▪ size—Sets the font size
▪ face—Sets the font typeface
▪ color—Sets the text color
<em> Emphasizes text, usually as italic;browser determines the text style
Core attributes
<frame> Defines specific information for eachframe in the frameset ▪ frameborder—The width of the frame’s
border
▪ marginheight—The margin height in pixels▪ marginwidth—The margin width in pixels▪ noresize—Prevents the user from resizing the
frame by dragging the frame border▪ name—Sets a targeting name for the frame▪ scrolling—Determines whether scroll barsgg
appear
▪ src—Specifies the source XHTML file for theccframe’s content
Core attributes plus:
<head> Identifies the head section of the Webpage, which is reserved for informationabout the document, not documentcontent
▪ profile—Specifies the location of one or moremetadata profiles about the document
▪ lang—Specifies the base language for thedocument
▪ dir—Specifies the default text directionrr
Three attributes that are not commonly used:
<h1> to <h6> Defines text as a heading level; <h1> isthe top-level heading and the largest text ▪ align—The alignment of the heading text
Core attributes plus:
<frameset> Defines the column and rowcharacteristics of the frames in theframeset
▪ cols—Separates the frameset into columns▪ rows—Separates the frameset into rows
Core attributes plus:
(Both of these attributes need percentage orpixel values to specify the frame width or height)
Element Description Attributes
<caption> Indicates that the text appears as thecaption of a table
Core attributes plus:▪ align—The alignment of the caption,
either top or bottom; top is the default
Table A-2 (Continued) Common XHTML elements
XHTML Reference — Appendix A 437
Ap
pen
dix A
C6700_APP A_437_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
<hr>
<html>
<i>
<img>
<li>
<link>
<meta>
Element
Inserts a horizontal rule on the page;this is an empty element
Core attributes plus:
Identifies the file as an HTML file None
Italicizes text Core attributes
Inserts an image into a Web page Core attributes plus:
Marks an individual list item; this is anempty tag Core attributes
Defines a relationship between thedocument and external resources, suchas a style sheet
Core attributes plus:
Used within the document head toprovide information
Description Attributes
▪ width—The length of the rule in pixels
▪ size—The height of the rule in pixels
▪ align—Horizontal rule alignment; default iscenter
▪ noshade—Turns off the default 3-D shadingof the rule
▪ width—Specifies the width of the imagein pixels
▪ height—Specifies the height of the imagein pixels
▪ src—The URL that points to the image file;this attribute is required
▪ align—Allows you to wrap text around theimage; valid values are left, middle, and right
▪ alt—Allows you to specify an alternate string oftext if the image cannot be displayed by thebrowser
▪ border—The border for the image; set thisattribute to zero (0) to remove a hypertextborder on an anchor image
▪ hspace—The horizontal white space in pixelson the left and right sides of an image
▪
▪
▪
vspace—The vertical white space in pixels onthe top and bottom of an image
▪ type—The type of external resource
▪ href—The URL of the external resource
▪ rel—Describes the relationship between thecurrent document and the anchor specifiedby the href attribute
name—The meta information name, such askeyword or description
content—The content of the namedinformation type
Table A-2 (Continued) Common XHTML elements
XHTML Reference — Appendix A438
C6700_APP A_438_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
<noframe>
<ol>
<p>
<pre>
<span>
<strong>
<style>
<sub>
<sup>
<table>
Contains content that is viewable bybrowsers that do not support frames
Core attributes
Creates a numbered indented list Core attributes
Marks the beginning of a new blockof text
Core attributes plus:
▪ align—The horizontal alignment of theparagraph content
Preserves the formatting and spacing oftext as typed in the source code;displays the text in a monospace font,different from the standard browser text
Core attributes
Serves as an inline division; used toapply a style class or rule to text
Core attributes
Emphasizes text, usually as bold;browser determines the text style
Core attributes
Used within the head section to containCSS style rules
▪ type—Specifies the type of style language;for CSS, use text/CSS as the value
Subscripts text
Marks the beginning and end of a table Core attributes plus:
▪ align—Floats the table to the left or right oftext*
▪ border —Specifies whether a border isdisplayed for a table
▪ bgcolor—The background color of thetable*
▪ cellpadding—The amount of space in pixelsbetween the border of the cell and the cellcontent on all four sides
▪ cellspacing—The amount of space in pixelsbetween the table cells on all four sides
▪ height—The height of the table*
▪ width—The width of the table, either to afixed pixel width or a percentage relativewidth*
*Deprecated in XHTML
Core attributes
Core attributes Superscripts text
Element Description Attributes
<th> Forces the contents of a cell to bedisplayed as bold and centered
Table A-2 (Continued) Common XHTML elements
XHTML Reference — Appendix A 439
Ap
pen
dix A
▪ align—The horizontal alignment for tablecells within the table row
▪ valign—The horizontal alignment for tablecells within the row
Core attributes plus:
C6700_APP A_439_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
▪ align—The horizontal alignment for tablecells within the table row
▪ valign—The vertical alignment for tablecells within the row
▪ bgcolor—The background color of the tablerow*
▪ rowspan—The number of rows spanned bya cell
▪ colspan—The number of columns spannedby a cell
*Deprecated in XHTML
<title> Specifies the title of the Web page; titletext appears in the browser title bar and asthe bookmark or favorites text
Two attributes that are not commonly used:
▪ lang—Specifies the base language for thedocument
▪ dir—Specifies the default text direction
<tr> Marks a row of cells in a table Core attributes plus:
▪ align—The horizontal alignment for tablecells within the table row
▪ valign—The vertical alignment for tablecells within the row
▪ bgcolor—The background color of the tablerow*
*Deprecated in XHTML
<tt> Specifies monospace text, us uallyCourier
Core attributes
<u>(Deprecated)
Underlines text Core attributes
<ul> Creates a bulleted indented list Core attributes
<th>
▪ rowspan—The number of rows spanned bya cell
▪ colspan—The number of columns spannedby a cell
*Deprecated in XHTML
Forces the contents of a cell to bedisplayed as bold and centered
Core attributes plus:
Element Description Attributes
Table A-2 (Continued) Common XHTML elements
XHTML Reference — Appendix A440
▪ bgcolor—The background color of thetable row*
C6700_APP A_440_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Categorical XHTML ReferenceThe following is a quick reference list of the XHTML elements and attributes used in this book,listed by category.
Global Structure Elements
<body>▪ alink—The color for the currently selected
link* ▪ background—Points to the image file
that is tiled across the background of thepage*
▪ bgcolor—The page background color*
▪ link—The color for unvisited links*
▪ text—The default text color*
▪ vlink—The color for visited links * Deprecated in XHTML
<div> Indicates a division within the document Core attributes plus:
Identifies the body section of the Webpage
Core attributes plus: Element Description Attributes
<h1> to <h6> Defines text as a heading level; <h1> isthe top-level heading and the largest text
<head> Identifies the head section of the Webpage, which is reserved for informationabout the document, not documentcontent
<html>
<meta> Used within the document head toprovide information
<span> Serves as an inline division, used toapply a style class or rule to text
<title> Specifies the title of the Web page; titletext appears in the browser title bar andas the bookmark or favorites text
▪ align—The horizontal alignment of thecontents of the division
Core attributes plus:
▪ align—The alignment of the heading text
Three attributes that are not commonly used:
▪ profile—Specifies the location of one ormore metadata profiles about thedocument
▪ lang—Specifies the base language for thedocument
▪ dir—Specifies the default text direction
None
▪ name—The meta-information name, suchas keywords or description
▪ content—The content of the namedinformation type
Core attributes
Two attributes that are not commonly used:
▪ lang—Specifies the base language for thedocument
▪ dir—Specifies the default text direction
Identifies the file as an HTML file
Table A-3 XHTML structure elements
XHTML Reference — Appendix A 441
Ap
pen
dix A
C6700_APP A_441_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Text Elements
Element Description Attributes<blockquote> Indents text on both the left
and right margins Core attributes
<br> Inserts a line break, forcing textto the next line; this is an emptyelement
Core attributes plus:
▪ clear—When used with a floatingimage, forces text to appear at thebottom of the image
<em> Emphasizes text, usually as italic;browser determines the text style
Core attributes
<p> Marks the beginning of a new blockof text
Core attributes plus:
▪ align—The horizontal alignment ofthe paragraph content
<pre> Preserves the formatting and spacing oftext as typed in the source code;displays the text in a monospace font,different from the standard browser text
Core attributes
<strong> Core attributes
<sub>
<sup>
Subscripts text Core attributes
Core attributes Superscripts text
Emphasizes text, usually as bold;browser determines the text style
Table A-4 XHTML text elements
List Elements
Element Description Attributes
<li>
<ol> Creates a numbered indented list
<ul>
Core attributes
Core attributes
Core attributes
Marks an individual list item; this is anempty tag
Creates a bulleted indented list
Table A-5 XHTML list element
XHTML Reference — Appendix A442
C6700_APP A_442_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Table Elements
<caption> Core attributes plus:
<table> Core attributes plus:
*Deprecated in XHTML
<td> Core attributes plus:
Indicates that the textappears as the captionof a table
Marks the beginningand end of a table
Marks an individualtable cell
*Deprecated in XHTML
<th> Core attributes plus:
*Deprecated in XHTML
<tr> Marks a row of cells ina table
Core attributes plus:
▪
▪
▪
▪
▪
▪
▪
▪
▪
▪
▪
▪
▪
▪
▪
▪
▪
▪
▪
▪
▪
align—The alignment of the caption, either
align—Floats the table to the left or right of text*
border—Specifies whether a border is displayed for a table
bgcolor—The background color of the table*
cellpadding—The amount of space in pixels between theborder of the cell and the cell content on all four sides
cellspacing—The amount of space in pixels between the tablecells on all four sides
height—The height of the table*
width—The width of the table, either to a fixed pixel widthor a percentage relative width
align—The horizontal alignment for table cells within thetable row
valign—The vertical alignment for table cells within the row
bgcolor—The background color of the table row*
rowspan—The number of rows spanned by a cell
colspan—The number of columns spanned by a cell
align—The horizontal alignment for table cells within the tablerow valign—The vertical alignment for table cells within the row
bgcolor—The background color of the table row*
rowspan—The number of rows spanned by a cell
colspan—The number of columns spanned by a cell
align—The horizontal alignment for table cells within thetable row
valign—The vertical alignment for table cells within the row
bgcolor—The background color of the table row* *Deprecated in XHTML
Forces the contentsof a cell to be displayedas bold and centered
Element Description Attributes
Table A-6 XHTML table elements
XHTML Reference — Appendix A 443
Ap
pen
dix A
C6700_APP A_443_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Link Elements
Element Description Attributes<a> Allows you to create a
clickable hypertextanchor in a document;can be text or an image
Core attributes plus:▪▪▪
<base> Sets the base URL ortarget for a page; thisis an empty element
Core attributes plus:▪
▪
<link> Core attributes plus:▪
▪
Defines a relationshipbetween the documentand external resources,such as a style sheet
href—The target destination of the hypertext link name—Names a fragment of the document target—The window or frame in which the linked document isdisplayed
href—The absolute or relative original URL for the currentdocument
href—The URL of the external resource
target—The default window or frame in which links contained inthe document are displayed
type—The type of external resource
Table A-7 XHTML link elements
Inclusion Element
<img> Inserts an image into aWeb page
Core attributes plus:▪ width—Specifies the width of the image in pixels▪ height—Specifies the height of the image in pixels▪ src—The URL that points to the image file; attribute is required▪ align—Allows you to wrap text around the image; valid values
are left, middle, and right ▪ alt—Allows you to specify an alternate string of text if the image
cannot be displayed by the browser ▪ border—The border for the image; set this attribute to zero (0) to
remove a hypertext border on an anchor image
▪ hspace—The horizontal white space in pixels on the left and rightsides of an image
▪ vspace—The vertical white space in pixels on the top and bottomof an image
Element Description Attributes
Table A-8 XHTML inclusion element
Style Sheet Element
<style> Used within the headsectionto contain CSS style rules
▪ type—Specifies the type of style language; for CSS, usetext/CSS as the value
Element Description Attributes
Table A-9 Style sheet element
XHTML Reference — Appendix A444
C6700_APP A_444_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Formatting Elements
<b> Boldfaces text
<basefont>(Deprecated)
<center>(Deprecated)
Allows you to set a default size for thebody text in the document
Core attributes
Centers text or images horizontally onthe page
None
<i> Italicizes text Core attributes
<tt> Specifies monospace text, usuallyin Courier
Core attributes
<u>(Deprecated)
Underlines text Core attributes
<hr> Inserts a horizontal rule on the page;this is an empty element
Core attributes plus:
▪ color—The default text color▪ face—The default text face▪ size—The default text size for the document
from 1–7; the normal browser default is size 3
▪ width—The length of the rule in pixels▪ size—The height of the rule in pixels▪ align—Horizontal rule alignment; default
is center▪ noshade—Turns off the default 3-D shading
of the rule
<font>(Deprecated)
Allows you to specify the font size forany string of text; range of sizes is 1to 7, with 3 being the default
▪ size—Sets the font size▪ color—Sets the text color▪ face—Sets the font typeface
Element Description Attributes
Table A-10 XHTML formatting elements
Frame Elements
<frameset> Defines the column and rowcharacteristics of the frames in theframeset
<noframe> Contains content that is viewable bybrowsers that do not support frames
Core attributes
(Both of these attributes need percentage or pixelvalues to specify the frame width or height)
▪ cols—Separates the frame set into columns▪ rows—Separates the frameset into rows
Element Description Attributes
Table A-11 XHTML frame elements
XHTML Reference — Appendix A 445
Ap
pen
dix A
C6700_APP A_445_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Numeric and Character Entities
Character Character Entity Numeric Entity Description
“
#
$
%
&
‘
(
)
*
+
,
-
.
/
0
1
2
3
4
5
6
7
" "
#
$
%
& &
'
(
)
*
+
,
-
.
/
0
1
2
3
4
5
6
7
Quotation mark
Number sign
Dollar sign
Percent sign
Ampersand
Apostrophe
Left parenthesis
Right parenthesis
Asterisk
Plus sign
Comma
Hyphen
Period (full stop)
Solidus (slash)
Digit 0
Digit 1
Digit 2
Digit 3
Digit 4
Digit 5
Digit 6
Digit 7
8 8 Digit 8
9 9 Digit 9
: : Colon
; ; Semicolon
< < < Less than sign
= = Equals sign
Table A-12 Numeric and character entities
XHTML Reference — Appendix A446
C6700_APP A_446_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Character Character Entity Numeric Entity Description
?
@
A–Z
[
\
]
^
_
`
a–z
{
|
}
~
¡
¢
£
$
¥
|
§
?
@
A
[
\
]
^
_
`
a - z
{
|
}
~
 
¡
¢
£
¤
¥
¦
§
Question mark
Commercial at
Uppercase letters A–Z
Left square bracket
Reverse solidus (backslash)
Right square bracket
Caret
Horizontal bar (underscore)
Grave accent
Lowercase letters a–z
Left curly brace
Vertical bar
Right curly brace
Tilde
Nonbreaking space
Inverted exclamation mark
Cent sign
British Pound sign
Currency sign
Yen sign
Broken vertical bar
Section sign
¨ ¨ Spacing diaeresis
© © Copyright sign
a ª Feminine ordinal indicator
« « Left-pointing double angle quotationmark
¬ ¬ Not sign
_ ­ Soft hyphen
¡
¢
£
¤
¥
¦
§
¨
©
ª
«
¬
­
> > > Greater than sign
Table A-12 (Continued) Numeric and character entities
XHTML Reference — Appendix A 447
Ap
pen
dix A
C6700_APP A_447_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Character Character Entity Numeric Entity Description
¯°
±
2
3
´
μ
¶
·
¸
1
o
»
1⁄4
1⁄2
3⁄4
¿
À
Á
Â
Ã
Ä
¯
°
±
²
³
´
µ
¶
·
¯
°
±
²
³
´
µ
¶
·
¸
¹
º
»
¼
¸
¹
º
»
¼
½
¾
¿
À
Á
Â
Ã
Ä
Macron overline
Degree sign
Plus-or-minus sign
Superscript digit 2
Superscript digit 3
Acute accent
Micron sign
Paragraph sign
Middle dot
Cedilla
Superscript digit 1
Masculine ordinal indicator
Right-pointing double angle quotationmark
Fraction one-quarter
Fraction one-half
Fraction three-quarters
Inverted question mark
Capital letter A with grave
Capital letter A with acute
Capital letter A with circumflex
Capital letter A with tilde
Capital letter A with diaeresis
Å Å Capital letter A with ring above
Æ Æ Capital letter AE
Ç Ç Capital letter C with cedilla
È È Capital letter E with grave
É É Capital letter E with acute
Ê Ê Capital letter E with circumflex
½
¾
¿
À
Á
Â
Ã
Ä
Å
&Aelig;
Ç
È
É
Ê
® ® ® Registered trademark sign
Table A-12 (Continued) Numeric and character entities
XHTML Reference — Appendix A448
C6700_APP A_448_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Character Character Entity Numeric Entity Description
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
x
Ø
Ù
Ú
Û
Ü
Ý
P
ß
à
á
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
×
Ø
Ù
Õ
Ö
×
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß
à
á
Capital letter I with grave
Capital letter I with acute
Capital letter I with circumflex
Capital letter I with diaeresis
Capital letter ETH
Capital letter N with tilde
Capital letter O with grave
Capital letter O with acute
Capital letter O with circumflex
Capital letter O with tilde
Capital letter O with diaeresis
Multiplication sign
Capital letter O with stroke
Capital letter U with grave
Capital letter U with acute
Capital letter U with circumflex
Capital letter U with diaeresis
Capital letter Y with acute
Capital letter THORN
Sz ligature
Small letter a with grave
Small letter a with acute
â â Small letter a with circumflex
ã ã Small letter a with tilde
ä ä Small letter a with diaeresis
å å Small letter a with ring above
æ æ Small letter ae
ç ç Small letter c with cedilla
Ú
Û
Ü
Ý
Þ
ß
à
á
â
ã
ä
å
æ
ç
Ë Ë Ë Capital letter E with diaeresis
Table A-12 (Continued) Numeric and character entities
XHTML Reference — Appendix A 449
Ap
pen
dix A
C6700_APP A_449_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Character Character Entity Numeric Entity Description
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
÷
o/
ù
ú
û
ü
ý
þ
é
ê
ë
ì
í
î
ï
ð
ñ
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
ò
ó
ô
õ
ö
÷
ø
ù
ú
û
ü
ý
þ
Small letter e with acute
Small letter e with circumflex
Small letter e with diaeresis
Small letter i with grave
Small letter i with acute
Small letter i with circumflex
Small letter i with diaeresis
Small letter eth
Small letter n with tilde
Small letter o with grave
Small letter o with acute
Small letter o with circumflex
Small letter o with tilde
Small letter o with diaeresis
Division sign
Small letter o with stroke
Small letter u with grave
Small letter u with acute
Small letter u with circumflex
Small letter u with diaeresis
Small letter y with acute
Small letter thorn
ÿ ÿ Small letter y with diaeresis
÷
ø
ù
ú
û
ü
ý
þ
ÿ
è è è Small letter e with grave
Table A-12 (Continued) Numeric and character entities
XHTML Reference — Appendix A450
C6700_APP A_450_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Appendix BCSS ReferenceThis appendix includes the most commonly used CSS property descriptions, sorted both alpha-betically and by category. For more detailed information, visit the World Wide Web ConsortiumWeb site at www.w3.org.
CSS Notation Reference
Notation Definition
A single vertical bar between values means one or the other must occur; for example, scroll | fixedmeans choose scroll or fixed
Two vertical bars separating values means one or the other or both values can occur; for example,<border-width> || <border-style> || <color> means any or all of the three values can occur
Square brackets group parts of the property value together; for example, none | [ underline || overline || line-through || blink ] means the value is either none or one of the values within thesquare brackets
Words between angle brackets specify a type of value; for example, <color> means to enter acolor value such as red
<>
|
||
[ ]
Table B-1 CSS notations
Alphabetical CSS Property Reference
Property Values Default Applies to Background(Shorthandproperty)
<background-color> ||<background-image> ||<background-repeat> || <background-attachment> ||<background-position>
No default for shorthand properties
All elements
Background-attachment
scroll | fixed scroll All elements
Background-color
color name or hexadecimal value | transparent
transparent All elements
Table B-2 CSS properties
451
Ap
pen
dix B
CSS Reference — Appendix B
C6700_APP B_451_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Property Values Default Applies to
Background-position
[<percentage> | <length>] {1,2} | [top| center | bottom] || [left | center | right]
Block-level andreplaced elements
Background-repeat
repeat | repeat-x | repeat-y | no-repeat repeat All elements
0% 0%
Border(Shorthandproperty)
<border-width> ||<border-style> || <color>
No default forshorthand properties
All elements
Border-bottom No default forshorthand properties
All elements
Border-bottom-color
<color> All elements
All elements
All elements
Border-bottom-style
none | dotted | dashed | solid | double |groove | ridge | inset | outset
none
Border-bottom-width
thin | medium | thick | <length>
Border-color All elements
Border-left(Shorthandproperty)
<border-left-width> || <border-style>|| <color>
No default forshorthand properties
All elements
Border-left-color All elements
All elements
All elements
Border-left-style none
Border-left-width
thin | medium | thick | <length>
Border-right(Shorthandproperty)
<border-right-width> || <border-style> || <color>
No default for shorthand properties
All elements
The value of the colorproperty
medium
<border-bottom-width> ||<border-style> || <color>
The value of the colorproperty
<color>
The value of the color property
<color>
none | dotted | dashed | solid | double |groove | ridge | inset | outset
medium
Border-right-color
<color> All elements The value of the colorproperty
All elements
All elements
none | dotted | dashed | solid | double | groove | ridge | inset | outset
none
thin | medium | thick | <length>
none
<border-top-width> ||<border-style> || <color>
No default for shorthand properties
All elements
All elements medium
none | dotted | dashed | solid | double |groove | ridge | inset | outset
Border-right-style
Border-right-width
Border-style
Border-top(Shorthandproperty)
Background-image
<url> | none none All elements
Table B-2 (Continued) CSS properties
CSS Reference — Appendix B452
C6700_APP B_452_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
All elements
All elements none
thin | medium | thick | <length>
[thin | medium | thick | <length>]All elements
All elements
All elements
All elements
All elements
inline | block | list-item | run-in |compact | marker | table | inline-table |table-row-group | table-header-group |table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none
inline
medium
none | dotted | dashed | solid | double | groove | ridge | inset | outset
No default for shorthand properties
Positionedelements
auto<length> | <percentage> | auto
none
Browser specific<color>
Border-top-style
Border-top-width
Border-width(Shorthandproperty)
Bottom
Clear
Color
Display
none | left | right | both
Float
Font(Shorthandproperty)
[ <font-style> || <font-variant> ||<font-weight> ] <font-size> [ / <line-height> ] <font-family>
No default for shorthand properties
All elements
All elements
All elements
Font-family Browser specific
Font-size medium
normalFont-stretch
All elements
noneleft | right | none
Font family name (such as Times) or generic family name (such as sans-serif)
<absolute-size> | <relative-size> |<length> | <percentage>
normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded| ultra-expanded
Property Values Default Applies to
All elements
All elements
All elements normal
normal
normalFont-style
Font-variant
Font-weight
normal | italic | oblique
normal | small caps
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 |900
All elements The value of the color property
<color>Border-top-color
Height Block-level and replaced elements;also all elementsexcept inline images
auto<length> | <percentage> | auto
Table B-2 (Continued) CSS properties
CSS Reference — Appendix B 453
Ap
pen
dix B
C6700_APP B_453_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Letter-spacing
Line-height normal
List-style(Shorthandproperty)
No default for shorthand properties
Elements withdisplay value list-item
Elements with display value list-item
List-style-position
Elements withdisplay value list-item
List-style-type Disc
Margin(Shorthandproperty)
[ <length> | <percentage> | auto ] All elements
All elements
All elements
All elements
Margin-bottom
Margin-left
Margin-right
All elements normalnormal | <length>
All elementsnormal | <number> | <length> | <percentage>
<keyword> || <position> || <url>
List-style-image <url> | none none
inside | outside outside
Elements with display value list-item
disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha |upper-alpha | none
No default for shorthand properties
0
0
0<length> | <percentage> | auto
<length> | <percentage> | auto
<length> | <percentage> | auto
Margin-top
Padding
Padding-bottom
Padding-left
Padding-right
Padding-top
All elements
All elements
All elements
All elements
All elements
All elements
0
0
0
0
0
0
<length> | <percentage>
<length> | <percentage>
<length> | <percentage>
<length> | <percentage>
<length> | <percentage>
<length> | <percentage> | auto
All elementsexcept generatedcontent
staticstatic | relative | absolute | fixed Position
Right Positionedelements
auto<length> | <percentage> | auto
Property Values Default Applies to
Text-align Block-levelelements
Text-decoration none
Depends on browserand language direction
left | right | center | justify
All elementsnone | [ underline || overline || line-through || blink ]
Left auto Positioned<length> | <percentage> | auto
Text-indent
Text-shadow
Block-level0<length> | <percentage>
All elements nonenone | [<color> || <length> <length><length>? ,]* [<color> ||<length><length> <length>?]
Table B-2 (Continued) CSS properties
CSS Reference — Appendix B454
C6700_APP B_454_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Top
Vertical-align
White-space
Width
Word-spacing
Z-index
Positionedauto<length> | <percentage> | auto
Inline elementsbaselinebaseline | sub | super | top | text-top |middle | bottom | text-bottom |<percentage>
Block-levelelements
normalnormal | pre | nowrap
Block-level and replaced elements;also all elementsexcept inline elements
auto<length> | <percentage> | auto
All elementsnormalnormal | <length>
Positionedelements
autoauto | integer
Property Values Default Applies to Text-transform All elements nonecapitalize | uppercase | lowercase |
none
Table B-2 (Continued) CSS properties
CSS Properties by Category
Property Values Default Applies to
Font(Shorthandproperty)
[ <font-style> || <font-variant> || <font-weight> ] <font-size> [ / <line-height> ]<font-family>
No default for shorthandproperties
Font-family
Font-size
Font-style
Font-stretch
All elements
All elements
All elements
All elements
All elements
All elements
Browser specific<color>Color
Font family name (such as Times) or generic family name (such as sans-serif)
<absolute-size> | <relative-size> |<length> | <percentage>
normal
normal
normal | italic | oblique
normal | wider | narrower |ultra-condensed | extra-condensed |condensed | semi-condensed |semi-expanded | expanded |extra-expanded | ultra-expanded
Browser specific
medium
Font-variant All elements normalnormal | small-caps
Font-weight
Letter-spacing
All elements normalnormal | bold | bolder | lighter | 100 | 200 |300 | 400 | 500 | 600 | 700 | 800 | 900
All elements normalnormal | <length>
Table B-3 Font and text properties
CSS Reference — Appendix B 455
Ap
pen
dix B
C6700_APP B_455_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Property Values Default Applies to
Text-decoration
Text-indent
Text-shadow
Text-transform
Vertical-align
All elements nonenone | [ underline || overline || line-through|| blink ]
Block-level elements 0<length> | <percentage>
All elements nonenone | [<color> || <length> <length><length>? ,]* [<color> ||<length> <length><length>?]
All elements nonecapitalize | uppercase | lowercase | none
Word-spacing All elements normalnormal | <length>
Inline elementsBaselinebaseline | sub | super | top | text-top |middle | bottom | text-bottom |<percentage>
Text-align Block-level elementsDepends on browserand language direction
left | right | center | justify
Line-height All elements normalnormal | <number> | <length> |<percentage>
Table B-3 (Continued) Font and text properties
Property Values Default Applies to Margin(Shorthandproperty)
[ <length> | <percentage> | auto ] No default for shorthandproperties
Border(Shorthandproperty)
All elements
Margin-bottom All elements 0<length> | <percentage> | auto
Margin-left All elements 0<length> | <percentage> | auto
Margin-right All elements 0<length> | <percentage> | auto
Margin-top All elements 0<length> | <percentage> | auto
Padding All elements 0<length> | <percentage>
Padding-bottom All elements 0<length> | <percentage>
Padding-left All elements 0<length> | <percentage>
Padding-right All elements 0<length> | <percentage>
Padding-top All elements 0<length> | <percentage>
All elements No default for shorthandproperties
border-width> || <border-style> ||<color>
Border-bottom All elements No default for shorthandproperties
<border-bottom-width> || <border-style>|| <color>
Border-bottom-color
All elements The value of the colorproperty
<color>
Border-bottom-style
All elements nonenone | dotted | dashed | solid | double |groove | ridge | inset | outset
Table B-4 Box properties
CSS Reference — Appendix B456
C6700_APP B_456_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Property Values Default Applies to
Border-right-width
All elements mediumthin | medium | thick | <length>
Border-style All elements nonenone | dotted | dashed | solid | double |groove | ridge | inset | outset
Border-top(Shorthandproperty)
All elementsNo default for shorthandproperties
<border-top-width> || <border-style> ||<color>
Border-top-color All elementsThe value of the colorproperty
<color>
Border-top-style All elementsnonenone | dotted | dashed | solid | double |groove | ridge | inset | outset
Border-width(Shorthandproperty)
All elementsNo default for shorthandproperties
[thin | medium | thick | <length>]
Clear All elementsnonenone | left | right | both
Float All elementsnoneleft | right | none
Border-top-width
All elementsmediumthin | medium | thick | <length>
Border-left(Shorthandproperty)
All elementsNo default for shorthandproperties
<border-left-width> || <border-style>|| <color>
Border-left-color All elementsThe value of the colorproperty
<color>
Border-left-style All elementsnonenone | dotted | dashed | solid | double |groove | ridge | inset | outset
Border-left-width
All elementsmediumthin | medium | thick | <length>
Border-right(Shorthandproperty)
All elementsNo default for shorthandproperties
<border-right-width> || <border-style> ||<color>
Border-right-color
All elementsThe value of the colorproperty
<color>
Border-right-style
All elementsnonenone | dotted | dashed | solid | double |groove | ridge | inset | outset
Border-bottom-width
All elements
All elements
medium
The value of the colorproperty
thin | medium | thick | <length>
Border-color <color>
Height Block-level andreplaced elements
auto<length> | <percentage> | auto
Width Block-level andreplaced elements
auto<length> | <percentage> | auto
Table B-4 (Continued) Box properties
CSS Reference — Appendix B 457
Ap
pen
dix B
C6700_APP B_457_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Property Values Default Applies to Background(Shorthandproperty)
<background-color> || <background-image> || <background-repeat> ||<background-attachment> ||<background-position>
No default for shorthandproperties
All elements
Background-attachment
All elements scrollscroll | fixed
Background-color
All elements transparentcolor name or hexadecimal value |transparent
Background-image
All elements none<url> | none
Background-position
Block-level andreplaced elements
0% 0%[<percentage> | <length>] {1,2} | [top |center | bottom] | [left | center | right]
Background-repeat
All elements Repeatrepeat | repeat-x | repeat-y | no-repeat
Table B-5 Background properties
Property Values Default Applies to Bottom <length> | <percentage> | auto auto Positioned
Height All elements auto<length> | <percentage> | auto
Left Positionedauto<length> | <percentage> | auto
Position All elements exceptgenerated content
staticstatic | relative | absolute | fixed
Right Positioned elementsauto<length> | <percentage> | auto
Top Positioned elementsauto<length> | <percentage> | auto
Width All elements exceptinline elements
auto<length> | <percentage> | auto
Z-index Positioned elementsautoauto | integer
Table B-6 Visual properties
CSS Reference — Appendix B458
C6700_APP B_458_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Property Values Default Applies to Display inline | block | list-item | run-in | compact |
marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group |table-column | table-cell | table-caption |none
inline All elements
List-style-image Elements with displayvalue list-item
none<url> | none
List-style-position
Elements with displayvalue list-item
outsideinside | outside
List-style(Shorthandproperty)
Elements with displayvalue list-item
No default for shorthandproperties
<keyword> || <position> || <url>
List-style-type Elements with displayvalue list-item
discdisc | circle | square | decimal | lower-roman | upper-roman | lower-alpha |upper-alpha | none
White-space Block-level elementsnormalnormal | pre | nowrap
Table B-7 Classification properties
CSS Measurement Units
Unit Code Abbreviation DescriptionCentimeter cm Standard metric centimeter
Em The width of the capital M in the current font,usually the same as the font size
em
Ex The height of the letter x in the current fontex
Inch Standard U.S. inchin
Millimeter Standard metric millimetermm
Pica Standard publishing unit equal to 12 pointspc
Pixel The size of a pixel on the current displaypx
Point Standard publishing unit; 72 points in an inchpt
Relative Sets a font size relative to the base font size;150% equals 1.5 times the base font size
For example: 150%
Table B-8 CSS measurement codes
CSS Reference — Appendix B 459
Ap
pen
dix B
C6700_APP B_459_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
C6700_APP B_460_02_07_08
IntentionallyPage Left Blank
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Glossary!important—A CSS keyword that lets the useroverride the author’s style setting for a partic-ular element.
absolute URL—See complete URL.
active white space—White space used delib-erately as an integral part of your design thatprovides structure and separates content.
audience definition—A profile of your averageuser.
banding—An effort to match the closest colorsfrom the GIF’s palette to the original colors ina photo.
box model—A CSS element that describes therectangular boxes containing content on aWeb page.
breadcrumb—One or more site navigationlinks, usually at the top of a Web page, thatshow the current page and any pages above itin the site hierarchy.
browser-safe colors—The 216 colors sharedby PCs and Macintoshes. These colors are dis-played properly across both platforms withoutdithering.
cache—The browser’s temporary storage areafor Web pages and images. There are two typesof cache: memory cache and hard drive cache.
canvas area—The part of the browser windowthat displays the content of the Web page.
cascade—Style sheets originate from threesources: the author, the user, and the browser.The cascading feature of CSS lets these multi-ple style sheets and style rules interact in thesame document.
Cascading Style Sheets (CSS)—A style lan-guage, created by the W3C, that allowscomplete specifications of style for HTML doc-uments. CSS allows HTML authors to use over
50 properties that affect the display of Webpages. CSS style information is containedeither within an HTML document, or inexternal documents called style sheets.
cell-level attribute—An attribute that affectsone data cell in a table.
CGI—See Common Gateway Interface.
CGI script—A program that transfers form datato a server.
child element—An HTML element containedwithin another element.
color depth—The amount of data used to cre-ate color on a display. The three common colordepths are 8-bit, 16-bit, and 24-bit. Not all dis-plays support all color depths.
Common Gateway Interface (CGI)—The com-munications bridge between the Internet andthe server. Using programs called scripts, CGIcan collect data sent by a user via the Hyper-text Transfer Protocol (HTTP) and transfer it toa variety of data processing programs includ-ing spreadsheets, databases, or other softwarerunning on the server.
complete URL—A complete UniformResource Locator (URL) is an address of docu-ments and other resources on the Web thatincludes the protocol the browser uses toaccess the file, server or domain name, the rel-ative path, and the filename.
containing box—The containing rectangle, orparent element, of any child element. Theabsolute containing element is the windowarea of the browser. All other elements are dis-played within this containing box, whichequates to the <body> element of an HTMLdocument. Within <body>, elements such as<div> or <p> are parents, or containing boxes,for their child elements.
GLO
SSARY
C6700_GLOSSARY_461_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
contextual link—A link that allows users tojump to related ideas or cross-references byclicking the word or item that interests them.You can embed contextual links directly inyour content by choosing the key terms andconcepts you anticipate your users will wantto follow.
core attribute—One of the four attributes thatcan be used with any element. They includeid, title, style, and class.
CSS—See Cascading Style Sheets.
CSS visual formatting model—A model thatdescribes how CSS element content boxesshould be displayed by the browser.
cursive—A generic value for the CSS font-fam-ily property. Cursive fonts are designed toresemble handwriting. Most browsers do notsupport this font family.
declaration—The declaration portion of astyle rule consists of a property name andvalue. The browser applies the declaration tothe selected element.
deprecated element—An element that theW3C has identified as obsolete in futurereleases of HTML.
dithering—This color mixing process occurswhen a browser encounters a color on a Webpage that it does not support. The browser isforced to mix the color. The resulting colormay be grainy or unacceptable. To avoiddithering, work with browser-safe colors.
Document Type Definition (DTD)—A set ofrules that contains all the elements, attributes,and usage rules for the markup language youare using.
DTD—See Document Type Definition.
em unit—In CSS, a unit equal to the font sizeof an element.
ex unit—In CSS, a unit equal to the height ofthe lowercase letter x in any given font.
Extensible Hypertext Markup Language(XHTML)—XHTML is HTML 4.01 reformu-lated as an application of XML.
extranet—A private part of a company’sintranet that uses the Internet to share securelypart of an organization’s information.
fantasy—A generic value for the CSS font-fam-ily property. Fantasy fonts are primarily deco-rative. Most browsers do not support this fontfamily.
File Transfer Protocol (FTP)—A standardcommunications protocol for transferring filesover the Internet.
font—A typeface in a particular size, such asTimes Roman 24 point.
form controls—These are the input elementsthat make up an HTML form, such as radiobuttons, text boxes, and check boxes.
fragment identifier—The use of the <a> ele-ment and NAME attribute to name a segmentof an HTML file. You then can reference thefragment name in a hypertext link.
frame—A section in canvas area of the browserthat displays a separate, independent HTMLdocument.
FTP—See File Transfer Protocol.
GIF—See Graphics Interchange Format.
global attribute—An attribute that affects anentire table.
Graphics Interchange Format (GIF)—TheGraphic Interchange Format (GIF) is designedfor online delivery of graphics. The colordepth of GIF is 8-bit, allowing a palette of nomore than 256colors. The GIF file formatexcels at compressing and displaying flat colorareas, making it the logical choice for line artand graphics with simple colors.
grid—A layout device that organizes the Webpage, providing visual consistency.
Glossary 462
C6700_GLOSSARY_462_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
HTML—See Hypertext Markup Language.
hypertext—A nonlinear way of organizinginformation. When you are using a hypertextsystem, you can skip from one related topic toanother, find the information that interestsyou, and then return to your starting point ormove on to another related topic of interest.
Hypertext Markup Language (HTML)—Themarkup language that defines the structureand display properties of a Web page. TheHTML code is interpreted by the browser tocreate the displayed results. HTML is an appli-cation of SGML. (See Standard GeneralizedMarkup Language.)
inheritance—The order of CSS rules dictatingchild elements inherit rules from parentelements.
interlacing—The gradual display of a graphicin a series of passes as the data arrives in thebrowser. Each additional pass of data creates aclearer view of the image until the completeimage is displayed. You can choose an inter-lacing process when you are creating GIFs.
Internet service provider (ISP)—A companythat provides Internet access and Web sitehosting services to individuals andorganizations.
intranet—A private collection of networkscontained within an organization. Intranetusers gain access to the Internet through a fire-wall that prevents unauthorized users fromgetting in to the intranet.
ISP—See Internet service provider.
JavaScript—A client-side scripting languageused with HTML forms.
Joint Photographic Experts Group (JPEG orJPG)—A file format, commonly shortened toJPG, designed for the transfer of photographicimages over the Internet. JPGs are best for pho-tos and images that contain feathering, com-plex shadows, or gradations.
JPEG—See Joint Photographic Experts Group.
JPG—See Joint Photographic Experts Group.
look and feel—The interface that the user mustnavigate on a Web site.
markup language—A structured languagethat lets you identify common elements ofa document such as headings, paragraphs,and lists.
metalanguage—A language that lets youdescribe the characteristics of a markuplanguage. The Extensible Markup Language(XML) is a metalanguage.
monospace—A generic value for the CSS font-family property. Monospace fonts are fixed-width fonts. Every letter has the same horizon-tal width.
nesting—The practice of placing one elementwithin another element.
nesting tables—The practice of placing anentire table within a table cell.
parent element—An HTML element that con-tains child elements.
parser—A program built into a browser thatinterprets the markup tags in an HTML file anddisplays the results in the canvas area of thebrowser interface.
partial URL—A Uniform Resource Locator(URL) that omits the protocol and server name,and only specifies the path to the file relativeto one another on the same server.
passive white space—The blank area that bor-ders the screen or is the result of mismatchedshapes.
plug-in—A helper application that assists abrowser in rendering a special effect.
PNG—See Portable Network Graphic.
points of presence (POP)—Dial-up accesspoints to your service provider’s network.Your service provider should have at least onePOP available so you can dial a local numberto get access. Major ISPs such as AT&T havePOPs throughout the United States, where alocal ISP only will cover the area that includestheir subscriber base.
Glossary 463
GLO
SSARY
C6700_GLOSSARY_463_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
POP—See points of presence.
Portable Network Graphic (PNG)—A graphicsfile format for the Web that supports many ofthe same features as GIF.
positioned layout—A CSS method that givesyou control over the way element boxes arelaid out in a Web page, allowing you to createcomplex page designs without tables.
processing instruction—A special type ofXML element that contains information thatdoesn’t fit into a standard XHTML structure.
property—A quality or characteristic stated ina style rule, such as color, font-size, or margin.The property is a part of the style rule decla-ration.
pseudo-class—An element that selects ele-ments based on characteristics other than theirelement name.
pseudo-element—An element that lets youchange other aspects of a document that arenot classified by elements, such as applyingstyle rules to the first letter or first line of aparagraph.
raster graphics—Images represented pixel-by-pixel for the entire image. GIFs and JPGs areraster formats.
rendering engine—A program contained inevery browser that interprets the markup tagsin an HTML file and displays the results in thebrowser.
row-level attribute—An attribute that affectsan entire row in a table.
sans-serif—A generic value for the CSS font-family property. Sans-serif fonts have no ser-ifs. The most common sans-serif fonts areHelvetica and Arial.
Scalable Vector Graphics (SVG)—A languagefor describing two-dimensional graphics usingXML. SVG files can contain shapes such aslines and curves, images, text, animation, andinteractive events.
screen resolution—The horizontal and verti-cal height and width of the computer screen inpixels. Currently, the two most commonscreen resolutions for Web design (tradition-ally expressed as width × height) are 800 × 600and 1024 × 768.
script—A small program written with a script-ing language such as JavaScript.
search engine—A software program thatsearches out and indexes Web sites in acatalog.
Secure Sockets Layer (SSL)—Communica-tions software that allows transmission ofencrypted secure messages over the Internet.
selector—The part of a style rule that deter-mines which HTML element to match. Stylerules are applied to any element in the docu-ment that matches the selector.
semantic markup—Descriptive markup thatidentifies the intended use of different docu-ment sections.
serif—A generic value for the CSS font-familyproperty. Serif is the traditional printing letterform, with strokes (or serifs) that finish off thetop and bottom of the letter. The most commonserif fonts on the Web are Times and TimesRoman.
SGML—See Standard Generalized MarkupLanguage.
shareware—Software that is distributed freeso users can try before they buy. Users then canregister the software for a relatively small feecompared to software produced commercially.Shareware usually is developed by individu-als or very small software companies, so reg-istering the software is important.
site specification—The design document foryour Web site.
SQL—See Structured Query Language.
SSL—See Secure Sockets Layer.
stacking level—The ordering of CSS elementson the z-axis.
Glossary 464
C6700_GLOSSARY_464_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
stacking tables—The technique of buildingseveral successive small tables rather than onelarge one.
Standard Generalized Markup Language(SGML)—A standard system for specifyingdocument structure using markup tags.
Structured Query Language (SQL)—A pro-gramming language that lets you select infor-mation from a database.
style rule—The basic unit of expression inCSS. A style rule is composed of two parts: aselector and a declaration. The style ruleexpresses the style information for an element.
style sheet—A set of style rules that describesa document’s display characteristics. Thereare two types of style sheets: internal andexternal.
SVG—See Scalable Vector Graphics.
text property—A CSS property that lets youadjust the spacing around and within your text.
type selector—A CSS selector that applies arule to every instance of the element in thedocument.
typeface—The name of type family, such asTimes Roman or Futura Condensed.
Uniform Resource Locator (URL)—The globaladdress of documents and other resources onthe Web.
universal selector—A selector that lets youquickly select groups of elements and apply astyle rule.
URL—See Uniform Resource Locator.
valid code—Markup code that conforms to therules of the W3C.
value—The precise specification of a propertyin a style rule, based on the allowable valuesfor the property.
vector graphics—Images represented asgeometrical formulas, as comparedwith a raster graphics format, whichrepresents images pixel by pixel for theentire image. GIFs and JPGs are raster formats.SVG is a vector graphic format. Vectorgraphics are scalable and cross-platformcompatible.
W3C—See World Wide Web Consortium.
Web hosting service—Commercial service thatprovides Web server space only and may bemore capable of hosting a more complex com-mercial site. This service does not includeInternet access.
Web palette—The 216 colors shared byPCs and Macintoshes. These colors displayproperly across both platforms withoutdithering.
Web server—A computer connected to theInternet that runs server software. The soft-ware lets the computer use the HypertextTransfer Protocol to serve HTML files to Webbrowser clients.
well-formed document—A syntactically cor-rect XML or XHTML file.
World Wide Web Consortium (W3C)—Founded in 1994 at the MassachusettsInstitute of Technology to standardize Webmarkup languages. The W3C, led byTim Berners-Lee, sets standards for markuplanguages and provides an open,non-proprietary forum for industry andacademic representatives to add to theevolution of HTML.
x-height—The height of the letter x in aparticular font.
XHTML—See Extensible Hypertext MarkupLanguage.
Glossary 465
GLO
SSARY
C6700_GLOSSARY_465_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Index* (asterisk), 162, 181, 341, 355: (colon), 247/ (forward slash), 8, 123, 162# (pound sign), 99, 244; (semicolon), 160
A<a> tag, 99, 101–104, 351–354absolute
path, 73positioning, 313, 315–317, 328, 329units, 191–192
accessibility issues, 53–57active class, 247Adobe Dreamweaver, 11, 68, 82Adobe Fireworks, 69, 232Adobe Flash, 69, 227Adobe GoLive, 11, 68Adobe Photoshop, 69, 190, 228, 232Adobe Shockwave, 227Aladdin, 68align attribute, 125, 139, 145, 233align="center" attribute, 147alt attribute, 15, 86, 113–114, 144, 233–235alternate text, 86, 233–235always-on connections, 80Animal Diversity Web site, 92–93animation
GIF, 226–227positioned layouts and, 311
Arial font, 189, 190, 196–197, 201, 215, 217asterisk (*), 162, 181, 341, 355AT&T (American Telephone & Telegraph), 80Atlantic Monthly Web site, 42–43, 47–49attribute(s).
cell-level, 125–126, 461core, 173, 435, 462deprecated, 124, 233global, 124–125, 462row-level, 125, 464quoted, 15tables and, 124–125
audience(s). See also usersanalyzing, 66–68definitions, 66–68, 461knowing your, 16planning Web sites and, 64, 66–68
B<b> tag, 200background color, 205, 245, 248–251, 273. See
also background graphics; color
background graphics. See also backgroundcolor; graphicscentered, 261–262overview, 255–263URLs for, 256–257
background-color property, 248–250background-image property, 255–257background-position property, 260–261background-repeat property, 257–258, 261, 265backups, 69backward compatibility, 10banding, 242, 461bandwidth, 33–34banner class, 213–214, 219–220. See also bannersbanners, 110, 152, 153–154, 323–326. See also
banner classBarksdale, Karl, 311<base> tag, 350–354baseline value, 207basic.htm, 162–164BBC News Web site, 46Berners-Lee, Tim, 1, 2, 53“best practices” method, of coding, 12billboard Web sites, 64blink value, 204block-level elements, 271–287, 312–313<blockquote> tag, 7, 272–273<BLOCKQUOTE> tag, 7blogs, 65body copy, 218–219<body> tag, 97, 99, 137, 245, 247, 249–250, 256,
271–272, 312–314, 316–317bold type, 188, 200borders(s), 272–275, 346–347
color, 247, 287–288properties, 282–289removing, from graphics, 238–239styles, 284–285width, 285–287
border attribute, 125, 233border property, 238, 282border-bottom property, 282border-bottom-color property, 288border-bottom-style property, 284–285border-bottom-width property, 286border-color property, 282–289border-left property, 282border-left-color property, 288border-left-style property, 284–285border-left-width property, 286border-right property, 282border-right-color property, 288
C6700_INDEX_466_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
border-right-style property, 284–285border-right-width property, 286border-style property, 282, 283–285, 288–289border-top property, 274, 282border-top-color property, 288border-top-style property, 284–285border-top-width property, 286border-weight property, 289border-width property, 282, 285–286, 288–289Boston Vegetarian Society Web site, 20–21bottom value, 207box
model, 461position offsets, 313–319properties, 271–273, 275, 289–295
boxtest1.htm, 295–297boxtest.htm, 295–297<br> tag, 8breadcrumb, 35, 93, 461broadband, 17–18, 79browser(s). See also specific browsers
compatibility issues, 15–17contextual links and, 108–109CSS and, 5design principles and, 32–33download times and, 18floating text boxes and, 292graphics and, 232–238HTML editors and, 11markup tags and, 2–3navigation and, 94planning Web sites and, 66, 67, 69, 71–72,
83–84-safe colors, 242–243, 461, 465screen resolution and, 18–22tables and, 143–144, 149testing Web sites and, 83–84typography and, 189, 190, 196, 199–200URL and, 71–72versions of, 23viewing source code with, 4XHTML and, 8–9XML and, 6
BrowserNews, 17budgets, 64buttons
custom, 373images for, 373–374radio, 370–371, 383–385
Ccable access, 17, 79–80cache, 18, 461canvas area, 461<caption> tag, 120, 121case-sensitivity, 7, 70catalog
information structure, 78Web sites, 65
cell-level attributes, 125–126, 461cellpadding attribute, 125, 130–131cellspacing attribute, 125, 130–131Center for Disease Control Web site, 36–41centered design, 21–22CERN (European Laboratory for Particle
Physics), 1–2CGI (Common Gateway Interface). See also forms
described, 365, 461scripts, 69, 366–367, 461testing forms and, 387–389
chapter1.htm, 95, 103, 106–107chapter2.htm, 95, 103, 107chapter3.htm, 95, 103character entities, 446–450check boxes, 369–370, 382–383class(es). See also specific classes
attributes, 212styles, naming, 212–213
class attribute, 173–175clear property, 294–295clip art, 231. See also graphicscluster information structure, 78CNET, 17code
conventions, 10easy-to-read, 133evaluating, 10practices for, using good, 11–15semantic markup and, 12–13tables and, 133valid, 15, 16, 465viewing, 4
<col> tag, 122–124<colgroup> tag, 122–124colon (:), 247color
background, 205, 245, 248–251, 273basics, 241–245border, 247, 287–288browser-safe, 242–243, 461, 465channels, 242, 244depth, 83, 242, 461design principles and, 36, 41, 57layers, 245link, 247–248monitors, 241–245names, 243–244, 287overview, 225–270properties, 246–251RGB (red-green-blue), 241, 243,
244–245, 287tables and, 52testing Web sites and, 83typography and, 188, 205values, specifying, 246–247wise use of, 243working with, 251–255
Index 467
IND
EX
C6700_INDEX_467_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
colspan attribute, 125, 139column(s)
layout, 411–413groups, 123spanning, 126structure, in templates, 151–156widths, setting, 142–151
comments, 162, 211commercial ISP accounts, 80–81compression, 226–227compatibility issues, 3–5, 22–23connection speed, 17–18, 67, 83containing box, 272, 461content
accessibility guidelines and, 54–57determining the amount of, 52–53goals, 64–65operable, 54, 55perceivable, 54–55positioned layouts and, 324, 328–329refining, 84–85reformatting, for online presentation,
58–59robust, 54, 56–57understandable, 54, 55–56updating, 84–85
copyrights, 65, 231core attributes, 173, 435, 462Courier font, 189, 195, 195cross-platform compatibility, 3–5, 22–23CSS (Cascading Style Sheets). See also
style sheetsbackground graphics and, 264–266box model, 273–279box properties and, 292coding practices and, 12color and, 243–244, 246–251compatibility issues and, 16CSS2 specification, 198–199, 204, 311, 320described, 5, 9, 461design principles and, 32–33document types and, 14feature boxes and, 404–413graphics and, 229, 233, 238–241, 243,
246–251, 255–263grids and, 39inheritance and, 167–168lists and, 298–305measurement units, 191–193, 459overview, 159–186positioned layouts and, 311–335properties, 194–210, 246–251reference, 451–455selectors and, 168–172style rules, 159–162tables and, 119, 133–135typography and, 191–220visual formatting model, 271–273, 462
W3C and, 2XHTML and, 10
cursive fonts, 196, 462
Ddaisy.jpg, 251–255databases, 69, 81declarations, 160, 462delivery dates, 64design
for accessibility, 53–57clear presentation and, 34–35grids and, 39initial, 395–399for interaction, 43–45for location, 45–46low bandwidth and, 33–34planning Web sites and, 69, 85portable, 32–33principles, 31–62smooth transitions and, 37–38specifications, 396–399tables and, 132–136typography and, 187–191unified, 36–41for the user, 41–53white space and, 40
development teams, 68–69dial-up access, 5, 17–18, 79–81diamond.gif, 303–305Digimarc, 65digital
cameras, 230watermarks, 65, 231, 261–262
directory structure, 72–75disabled users. See accessibility issuesdisplay property, 272dithering, 242, 462<div> tag, 97, 100–101, 134, 175–176, 181,
199, 212–215, 216, 218, 314–317, 321–322,328–330
Doctype code, 14document(s)
fragments, linking to, 102–105types, choosing the correct, 13–15
doghowl.gif, 323dogpark1.htm, 323–331dogpark.htm, 322–331dogworld1.htm, 401–402dogworld.htm, 401domain names, 72–73, 81DOS (Disk Operating System), 70dotted keyword, 283double keyword, 283download times, 18, 83, 91–92, 110, 237–238Doyle, Sir Arthur Conan, 58–59dpi (dots per inch), 57Dreamweaver (Adobe), 11, 68, 82DSL (Digital Subscriber Line), 17, 79–80
Index468
C6700_INDEX_468_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Ee-commerce Web sites, 65, 78–79element(s).
block-level, 271–287, 312–313child, 167–168, 461closing, missing, 15deprecated, 6, 213, 462display types, specifying, 272–273empty, 8end, 8grouping, 122–123inline-level, 271–273layers, 245list-item, 271–273nested, 7, 15normal flow of, 312–313parent, 167–168, 463pseudo-, 177–178, 464positioning, 311–322stacking level, 320–322tables and, 120–126
em units, 192, 198, 462e-mail addresses, 80E! online, 41–42ex units, 192–193, 462extranets, 65, 462
FF.A. Cleveland Elementary School Web site,
112–114fantasy fonts, 196, 462feature
article sections, 140–141, 146, 404–416boxes, 404–413
feedback forms, 84<fieldset> tag, 378–379filename(s)
conventions, 69–72extensions, 70–71
FireFox, 4–5, 196, 234. See also browserscompatibility issues and, 16floating text boxes and, 292positioned layouts and, 319, 330–331
Fireworks (Adobe), 69, 232firewalls, 69fixed
design, 18–19positioning, 313, 315, 317–319
Flash (Adobe), 41, 69, 227flexible design, 20–21float property, 207, 240, 291–293floatbox class, 292floating text boxes, 289–295font(s). See also text; typography
choosing fewer, 188common, 189compatibility issues and, 23
described, 188, 462design principles and, 36, 58–59, 187–191families, specifying, 195–196graphics and, 190–191measurement units and, 191–193properties, 194, 195–201size, 160, 188, 190, 198–199styles, specifying, 198–199substitution, 189, 196–197using available, 189weight, 188, 200
font property, 200–201<font> tag, 211, 214font-family property, 195–196, 201, 217font-size property, 197–198, 201, 213font-style property, 198–199, 213font-variant property, 199–200, 219form(s). See also CGI (Common Gateway
Interface)check boxes in, 369–370, 382–383controls, 368, 462overview, 365–394radio buttons in, 370–371, 383–385search, 420–421syntax, 367–368testing, 381–389
<form> tag, 367–368, 380–381form.htm, 38forward slash (/), 8, 123, 162fragment(s)
external document, linking to, 102–105identifiers, 99–101, 462
frame(s). See also framesetsbenefits of, 338borders, 346–347customizing, 345–348described, 337–338, 462designing, 354–358drawbacks, 339–340fixed/variable, mixing, 355–358margins, 348naming, 349–350nesting, 343–344overview, 337–364resizing, 344syntax, 340–344
<frame> tag, 341–342frame.htm, 358–361Frameset document type, 13–15<frameset> tag, 350, 359–361, 445framesets. See also frames
named frames and, 350–351targeting in, 348–354working with, 358–361
FrontPage (Microsoft), 11FTP (File Transfer Protocol)
Index 469
IND
EX
C6700_INDEX_469_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
addresses, 82clients, 82described, 80, 462
GGIF (Graphics Interchange Format), 73–75, 190,
231animation, 226–227converting, to JPEG format, 228described, 226, 462dithering and, 242interlacing and, 229–230Web palettes and, 243
GIFMation, 227global
attributes, 124–125, 462structural elements, list, elements, list of, 442
glossaries, 52Google Web site, 41–42, 49–50Gosselin, Don, 311graphics
aligning text with, 239–240alt text for, 86background, 255–263for buttons, 373–374file formats, 225–231finding, 230–231JPEG (Joint Photographic Experts Group), 70,
190, 227–231, 242–243, 463lists and, 301, 303–305navigation and, 92nonrepeating, 259–260overview, 225–270positioned layouts and, 323–331properties, 238–241repeating, 257–259sizing, for Web pages, 237–238tiled, 255–257tools, choosing, 232using text as, 190–191vector graphics, 229, 465white space and, 241width/height of, 233, 235–237working with, 251–255
grids, 39, 462Guardian Unlimited Web site, 110
H<h1...h6> tags, 5, 11–12, 192, 215–218, 250, 257,
259, 271–273, 294, 312–313Harvard University Art Museum Web site, 352<head> tag, 213headings, 215–218headlines, 215–217height attribute, 144, 151, 233height property, 291Helvetica font, 189, 195, 197, 215, 217hexadecimal values, 243, 244–245, 287hierarchy, 49–50, 77, 93
Home page, 94–98, 109href attribute, 97, 99, 101hspace attribute, 233HTML (HyperText Markup Language)
coders, 69compatibility issues, 15–17CSS and, 177current state of, 1–5described, 1, 463document types and, 14editors, choosing, 10–11forms and, 365–367frames and, 337–338graphics and, 229history of, 1–2publishing Web sites and, 79structure and, 2–5tables and, 119–158typography and, 189valid code and, 15W3C and, 2XHTML and, 5–11XML and, 6
HTML Tidy, 9HTTP (HyperText Transfer Protocol), 79, 365hypertext. See also links; URLs (Uniform
Resource Locators)described, 5, 91, 463navigation and, 91–94
I<i> tag, 214ICANN (Internet Corporation for Assigned
Names and Numbers), 81icons, 111–112id attribute, 97, 100, 101, 175images. See graphics<img> tag, 8, 15, 113–114, 144, 147,
232–238!important keyword, 166–167, 461inclusion element, 444index.htm, 95, 109information
clear presentation of, 34–35designers, 69easy access to, 34overload, limiting, 93–94segments, creating manageable, 93–94structure, organizing, 75–79
inheritanceCSS and, 167–168described, 463
inputgroupings, creating, 378–379objects, 369–379
inset keyword, 283interaction, design for, 43–45interlacing, 229–230, 463
Index470
C6700_INDEX_470_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Internet Explorer browser (Microsoft). See alsobrowserscompatibility issues and, 16CSS and, 5floating text boxes and, 292positioned layouts and, 319, 330–331typography and, 189, 190, 196versions, 23viewing source code with, 4
intranets, 65, 463ISDN (Integrated Services Digital Network), 17ISO (International Standards Organization),
70, 71ISPs (Internet Service Providers)
comparison checklist for, 81–82described, 79, 463design tools offered by, 79local, 80, 81national, 80, 81POPs and, 80publishing Web sites and, 79registering domain names through, 81technical support offered by, 80
italic type, 199, 213–215
JJava, 9, 41, 69JavaScript, 229, 311, 367, 463JPEG (Joint Photographic Experts Group), 70,
190, 227–231, 242–243, 463
Kkeywords, 197–198, 260–261, 283, 285
LLANs (local area networks), 65large keyword, 197<legend> tag, 378–379length value, 260–261letter-spacing property, 208–209linear information structure, 76line-height property, 205–206, 216, 219link(s). See also navigation; URLs (Uniform
Resource Locators)color, 247–248contextual, 108–109, 462dummy test, 145elements, list of, 44graphics and, 109–114positioned layouts and, 323–324, 326–328power of, 50–52section, of Web pages, 421–423styles, 424–425three clicks rule and, 49
link class, 247<link> tag, 161–162Linked Ads column, 141–142, 147, 148list(s)
boxes, adding, 383–385
-item elements, 271–273, 298–305options, grouping, 376–377
lists1.htm, 303–305lists.htm, 303–305list-style property, 303list-style-image property, 301–302list-style-position property, 301–302list-style-type property, 290–300, 303L.L. Bean Web site, 18–19logos, 73–75. See also graphicslook and feel, 31–34lossless compression, 226lossy compression, 227low bandwidth, 33–34
MMacintosh
compatibility issues and, 3, 22–23filenames and, 70typography and, 189, 197
maintenance, of Web sites, planningfor, 85
MapQuest Web site, 111–112margin(s)
box properties and, 273–279collapsing, 279frames and, 348graphics and, 262–263negative, 278–279properties, 275–279specifying, 272, 276–277transparent, 274
margin property, 241, 276–277margin-bottom property, 277margin-left property, 258, 274margin-right property, 277margin-top property, 259, 277market research, 66–68marketing staff, on development teams, 69markup languages, 2, 463. See also specific
markup languagesmars.htm, 264–266mastheads, 402–404measurement units, 191–192, 275,
315, 459medium keyword, 197, 285meta
-language, 6, 463use of the prefix, 6
Microsoft Expression Web, 11, 82middle value, 207mission statements, 64mock-up Web pages, 399–400monitors. See also screen resolution
color and, 241–245cross-platform compatibility and, 22
monospace fonts, 195, 463Mozilla. See Firefox
Index 471
IND
EX
C6700_INDEX_471_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
Nname attribute, 99, 101, 103narrowband, 17National Arbor Day Foundation Web site, 93National Public Radio Web site, 44Nav Links column, 141–142navigate.htm, 361navigation. See also links; URLs (Uniform
Resource Locators)adding page turners, 106–108bars, 95–98, 101–102, 128, 234, 417contextual linking and, 108–109creating usable, 91–94graphics and, 109–114icons and, 111–112information structure and, 75–79, 93–94planning, 91–118tables and, 151text-based, 94–108
nestingdescribed, 463elements, 7, 15frames, 343–344tables, 134–135, 463
Netscape Navigator. See also browserscompatibility issues and, 16CSS and, 5design principles and, 32–33floating text boxes and, 292frames and, 337, 347graphics and, 234versions, 23viewing source code with, 4
Network Solutions, 81Nielsen/NetRatings, 17<noframes> tag, 342–343no-repeat value, 258, 259–260none keyword, 283nonprofit organization Web sites, 64–65Notepad, 4, 10, 68, 95numeric entities, 446–450
OOECD (Organization for Economic
Development), 17Ohio Historical Society, 57–58<ol> tag, 298–305online shopping, 65. See also e-commerce
Web sitesOpera, 234, 292, 319, 330–331. See also browsersoperating systems. See also specific operating
systemsissues, overview of, 22–23planning Web sites and, 66–67, 69testing Web sites and, 83–84
outset keyword, 283oz1.htm, 169–171oz.htm, 169
P<p> tag, 8, 13, 145, 147, 169, 173, 193, 196–197,
203, 219, 246–249, 266, 271–273, 280–282,292, 312–313
padding2-em, 274, 280, 281background color and, 248–249box properties and, 273–275properties, 257, 280–282specifying, 272, 280–281text reverse and, 250
padding property, 257padding-bottom property, 274, 281padding-left property, 281padding-right property, 281padding-top property, 281Page Banner cell, 139–140, 144page layout
positioned elements and, 311–335testing, 330–331
page length, controlling, 94page turners, adding, 106–108Paint Shop Pro, 232parsers, 463password entry fields, 374–375pattern1.jpg, 264–266pawback.gif, 323PC Webopedia, 6, 91percentage values, 193, 198, 260–261Philadelphia Zoo Web site, 37–38Photoshop (Adobe), 69, 190, 228, 232piracy, 65pixels, measuring, 315. See also screen
resolutionplanning
constraints and, 67–68content goals and, 64–65development teams and, 68–69directory structure and, 72–75information structure and, 75–79overview, 63–90publishing Web sites and, 79–82sites storyboards and, 74–79technology issues and, 67–68
plug-ins, 41, 69, 227, 463PNG (Portable Network Graphics), 70, 228–231,
242advantages/disadvantage of, 231described, 228–229, 464
POP (point of presence), 80, 463POP3 (Post Office Protocol), 80, 81portals, 64ports, 69position property, 313positioned layouts, 119, 464pound sign (#), 99, 244PowerPoint (Microsoft), 11product support Web sites, 65
Index472
C6700_INDEX_472_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
progressive display, 229–230promoting Web sites, 85–86properties.
described, 160, 194, 464CSS reference for, 451–459
pseudo-classes, 177, 464pseudo-element(s)
described, 177, 464selectors, 177–178
public domain Web sites, 231public interest Web sites, 64–65publishing Web sites, 64, 79–82px unit, 193
Qquotes
attribute values and, 8positioned layouts and, 324, 328,
329–330
Rradio buttons, 370–371, 383–385raster graphics, 229, 464Rehabilitation Act Amendments, 53relative path, 73–75relative positioning, 319relative units, 191–193relative value, 313rendering engine, 15–17, 464repeat value, 258repeat-x value, 258–259reset button, 372–373, 385–387RGB (red-green-blue) color, 241, 243
border color and, 287CSS and, 245described, 244
Rough Guides Web site, 40–41row(s)
elements, 120–121groups, 123-level attributes, 125, 464spanning, 127
rowspan attribute, 125, 141–142
Ssans-serif typefaces, 189–190, 195, 196–197,
215, 464scanners, 230scr attribute, 232screen resolution, 18–22, 193, 198
described, 464design principles and, 34–35, 57–60graphics and, 230, 238planning Web sites and, 67, 83tables and, 128–130, 134, 136–137, 151testing Web sites and, 83
Screen Ruler, 315scripts
CGI, 69, 366–367, 461
described, 311, 464positioned layouts and, 311–322
scroll bars, controlling, 345–347search engines
described, 85, 464leveraging, 85submitting URLs to, 86
search forms, 420–421. See also formsSection 508 guidelines, 53–54security
firewalls, 69password entry fields, 374–375
<select> tag, 375–376selector(s)
class attribute, 173–175descendant, 169described, 160, 464grouping, 168–172id attribute, 175overview, 168–175pseudo-class, 177–181type, 168, 465universal, 181, 465
semantic markup, 12–13, 464semicolon (;), 160serif typefaces, 189, 195, 464server(s)
administrators, 69directory structure and, 72–75download times and, 18filenames and, 71style sheets and, 9URLs and, 71–72XHTML and, 9
SGML (Standard Generalized Markup Language),2, 3, 4, 465
shareware, 11, 315described, 68, 464publishing Web sites and, 82
Shareware.com, 68, 82Shockwave (Adobe), 227shopping carts, 78shorthand notation, 276, 281SimpleText, 10, 68, 95Sir Conan Doyle Web site, 58–59Site Map page, 94–98site specifications, 63–64, 464small keyword, 197solid keyword, 283source code. See code<span> tag, 175–176, 199–220special interest Web sites, 64–65Sports Illustrated Web site, 52–53SQL (Structured Query Language), 81, 465src attribute, 233, 341SSL (Secure Sockets Layer), 81, 464
Index 473
IND
EX
C6700_INDEX_473_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
stacking level, 320–322, 464State of Maine Web site, 66static value, 313stock photo collections, 230storyboards, creating, 75–79Strict document type, 13–15<strong> tag, 97, 145–147, 149Stuffit, 68style(s). See also style sheet
classes, naming, 212–213rules, 159–162, 164–167, 465
style attribute, 97, 161style sheet(s). See also CSS (Cascading Style
Sheets)building, 162–164, 210–211described, 5, 159–162, 465external, 161–162graphics and, 265–266typography and, 210–220using, 4–5XHTML and, 9, 444
<style> tag, 163–164 171, 213sub value, 207subheadings, 217–218submit button, 372–374, 385–387success, measures of, 64super value, 207superscripting, 207surveys, 66–68SVG (Scalable Vector Graphics), 229, 464syntax rules, 7–9system administrators, 84
Ttable(s)
attributes, defining, 124–125background color and, 250–251basics, 119–127borders, 39building forms within, 379–381centering, 133–134design principles and, 39, 50–52elements, 120–126, 443formatting, 127–132grids and, 39headers, 121–122nesting, 134–135, 463stacking, 134–135, 465structure, building, 137–138styles, 136testing, 144well-designed, 132–136white space and, 130–131, 133widths, relative/fixed, 128–129, 138–139working with, 119–158
Table of Contents page, 94–98, 103–105, 109<table> tag, 120–126, 138–139, 250–251tagline class, 214–215
tags.block-level, 271–287, 312–313child, 167–168, 461closing, missing, 15deprecated, 6, 213, 462display types, specifying, 272–273empty, 8end, 8grouping, 122–123inline-level, 271–273layers, 245list-item, 271–273nested, 7, 15normal flow of, 312–313parent, 167–168, 463pseudo-, 177–178, 464positioning, 311–322stacking level, 320–322tables and, 120–126
target attribute, 351–354<tbody> tag, 122–124<td> tag, 120–121, 125, 145, 147,
250–251TeachText, 10technical support, offered by ISPs, 80, 81template(s)
creating, 136–151document types and, 14examples of, evaluating, 151–155sectioned, 154–155tables and, 134–151testing, 144three-column, 152–156two-column, 151–152
template.htm, 137–151testing
formalizing, 84page layout, 330–331tables, 144Web sites, 83–84
text. See also fontsalignment, 203–204, 206–208, 239–240alternate, 86, 233–235-based navigation, 94–108boxes, 291–292, 368–369color, 247decoration, 204–205floated elements and, 293–295indents, 201–202reverse, 250spacing properties, 201–210used as graphics, 110, 190–191wrap, 142–151, 235
text-align property, 203–204, 216<textarea> tag, 377text-bottom value, 207text-decoration property, 204–205
Index474
C6700_INDEX_474_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
text-indent property, 201–202, 219text-top value, 207<tfoot> tag, 122–124<th> tag, 120–122, 250–251<thead> tag, 122–124thick keyword, 285thin keyword, 285three clicks rule, 49Tidy GUI, 9Times New Roman font, 189, 190title attribute, 233–235<title> tag, 85toc.htm, 95–103, 105top value, 207<tr> tag, 120, 121, 125, 144, 250–251Transitional document type, 13–15transitions, smooth, 37–38Trebuchet MS font, 189, 190Turner, E., 311turnkey systems, 65tutorial information structure, 76typeface, 188, 465. See also text; typographytypography. See also fonts
CSS measurement units and, 191–193design principles, 187–191graphics and, 190–191legibility issues, 190overview, 187–224planning Web sites and, 69spacing properties and, 201–210style sheets and, 210–220white space and, 188, 206, 208–209
UUDT (Document Type Definition), 13–14<ul> tag, 12, 298–305Ulead GIF Animator, 227Ulead PhotoImpact, 232unified site design, 36–41United Nations Web site, 49UNIX, 3, 22–23, 70, 83–84URLs (Uniform Resource Locators). See also
links; navigationabsolute (complete), 71–72, 461conventions for, 69–72CSS and, 162described, 465directory structure and, 72–75download times and, 18graphics and, 233, 256–257lists and, 305partial, 463relative, 72submitting, to search engines, 86
user(s). See also audiencedesign for, 41–53eyes of, guiding, 47–49feedback, 66–67locating, 92–93
planning Web sites and, 66–68profiles, 41reading habits of, 47–49testing and, 83–84
Vvalid code, 15, 16, 465valign attribute, 125, 144value, use of the term, 160, 465vector graphics, 229, 465Verdana font, 189, 190vertical-align property, 206–208virtual galleries, 65visibility property, 320visited class, 247vspace attribute, 233
WW3C (World Wide Web Consortium), 5, 12–13
color names and, 243–244described, 2, 465graphics and, 229SVG format and, 225valid code and, 15
watermarks, 65, 231, 261–262WCAG (Web Content Accessibility Guidelines),
53–57Web browser(s). See also specific browsers
compatibility issues, 15–17contextual links and, 108–109CSS and, 5design principles and, 32–33download times and, 18floating text boxes and, 292graphics and, 232–238HTML editors and, 11markup tags and, 2–3navigation and, 94planning Web sites and, 66, 67, 69, 71–72,
83–84-safe colors, 242–243, 461, 465screen resolution and, 18–22tables and, 143–144, 149testing Web sites and, 83–84typography and, 189, 190, 196, 199–200URL and, 71–72versions of, 23viewing source code with, 4XHTML and, 8–9XML and, 6
Web information structure, 77Web servers
described, 79, 465publishing Web sites and, 79, 82style sheets and, 4–5
Web Standards project, 12Web Style Guide Web site, 188Web typography. See also fonts
CSS measurement units and, 191–193
Index 475
IND
EX
C6700_INDEX_475_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning
design principles, 187–191graphics and, 190–191legibility issues, 190overview, 187–224planning Web sites and, 69spacing properties and, 201–210style sheets and, 210–220white space and, 188, 206, 208–209
Weblogs. See blogsWebMD Web site, 33–34webnews1.htm, 210–220webnews.htm, 210–220WebXACT Watchfire, 67well-formed documents, 7, 465white space
active, 42–43, 461graphics and, 241passive, 40–41, 463tables and, 130–131trailing, removing, 133typography and, 188, 206,
208–209width attribute, 125, 143, 144width property, 290–291, 315–316Wikipedia Web site, 50, 82, 108wildflowers.htm, 251–255Windows (Microsoft), 10, 70–71
compatibility issues and, 3, 22–23filenames and, 70
WinZip, 68wonderform.htm, 381–389word-spacing property, 209–210World Health Organization Web site, 39World Travel Guide Web site, 35
World Wide Web Consortium. See W3C (WorldWide Web Consortium)
writers, on development teams, 69WYSIWYG (What You See Is What You
Get), 3–4, 11
Xx-height, 190, 465XHTML (Extensible HyperText Markup
Language)benefits of, 6–7described, 5–11document types and, 14graphics and, 232, 233migrating to, 10reference, 435–450style sheets and, 9syntax rules, 7–9valid code and, 15versions of, 5W3C and, 2
x-large keyword, 197XML (Extensible Markup Language), 2, 9
CSS and, 177described, 6graphics and, 229
XSL (Extensible Style Language), 9x-small keyword, 197xx-large keyword, 197xx-small keyword, 197
Zz-index property, 320zip archive files, 68
Index476
C6700_INDEX_476_02_07_08
9781435429123, Principles of Web Design, 4e by Joel Sklar - © Cengage Learning