Vol6 Charts

Web Design Mastery
Web Design Mastery
Webmaster’s Reference Charts
WebDesignMastery.com Page 1
Web Design Mastery
This is NOT a free ebook
Copyright © Shelley Lowery & Brajusta Publishing, Inc.
No portion of this book, in any format, may be reproduced or

translated without the expressed written consent of the author.
Brajusta Publishing, Inc. PO Box 156 Lewis Center, OH 43035

Voice: 740.548.9594 Email: mailto:info@web-source.net
Disclaimer
Although every attempt has been made to verify the accuracy of the information
contained within this book, it provides the opinion of the author and is intended for
informational purposes only.
The author and publisher disclaim any responsibility for errors, omissions,
interpretations or use and application of the information herein. In no event shall
the author or publisher be held liable for any loss, risk, damage, use or misuse of
any of the information either directly or indirectly presented herein.
If professional advice or assistance is required, you are advised to seek the services
of a competent professional.
Web Design Mastery
The following charts were designed to assist you in locating the codes that you need in
a quick and easy fashion. You are encouraged to copy and paste these codes into your
HTML and edit as needed.
It is highly recommended that you complete the HTML Tutorial prior to using these
charts.
Section 1: HTML Chart - Commonly used HTML codes, including names, tags and
examples.
Section 2: CSS Chart - CSS properties including background, border, classification,

font, margin, padding and text.
Section 3: Color Chart - 216 Safe color chart containing each color, the hexadecimal
values and the RGB (Red, Green, Blue) Values.
Section 4: Symbols Chart - Special characters and symbols that can be used within
your HTML.
Section 5: Troubleshooting Chart - Common web development problems including

graphics, text, tables, HTML, forms, JavaScript and CGI Scripts.
Note: To copy the codes, you must first click on the text select tool within the
Acrobat toolbar. Next, place your mouse pointer over the beginning of the text you
would like to copy. Click and hold your left mouse button and drag your mouse
over all the code you would like to copy. Your code should now be highlighted. Go to
"Edit" - "Copy" then place your cursor within your HTML code where you would like to
place the code. Go to "Edit" - "Paste". Your code will be displayed.
Web Design Mastery
Table of Contents
HTML TAG CHART ........................................................................................................ 6

<A HREF="http://www.domain.com/">
anchor Visit Our Site
<A - Visit Our Site</A>
bold <B>Example</B> Example

<B>
<BIG> big (text) <BIG>Example</BIG> Example

body of <BODY>The content of your
Contents of your webpage
<BODY> document page</BODY>
The contents of your page<BR> The contents of your page
line break <BR>
<BR>
The contents of your page<BR> The contents of your page
<CENTER>This will center your
center This will center your contents
<CENTER> contents</CENTER>
<DL>
<DT>Definition Term Definition Term
definition <DD>Definition of the term Definition of the term
<DD> description <DT>Definition Term Definition Term
<DD>Definition of the term Definition of the term
</DL>
<DL>
<DL> list <DT>Definition Term Definition Term
</DL>
<DL>
<DT> term <DT>Definition Term Definition Term
</DL>
This is an <EM>Example</EM> of This is an Example of using
emphasis
<EM> using the emphasis tag. the emphasis tag.
<EMBED src="yourfile.mid"
autostart="true" hidden="false"
embed
loop="false"><noembed><bgsound
<EMBED> object
src="yourfile.mid"
loop="1"></noembed>
Music will begin playing when your
<EMBED src="yourfile.wav" page is loaded and will only play
embed
<EMBED> autostart="true" hidden="false" one time. A control panel will be
object
loop="false"> displayed to enable your visitors to
stop the music.
Web Design Mastery
<FONT
<FONT> font
FACE="Arial">Example</FONT>
Example
<FONT FACE="Arial"
<FONT> font
SIZE="4">Example</FONT> Example
<FONT FACE="Arial" SIZE="+3"
<FONT> font COLOR="#FF0000">
Example</FONT>
Example
<FORM
action="mailto:you@domain.com">
Name: <INPUT name="Name" value=""
size="10"><BR>
Email: <INPUT name="Email" value=""
form
<FORM> size="10"><BR>
<CENTER><INPUT type="submit"
value=”Submit”>
</CENTER>
</FORM>
heading 1 <H1>Heading 1 Example</H1>

Heading 1
<H1>
Example
heading 2 <H2>Heading 2 Example</H2>
Heading 2
<H2>
Example
<H3> heading 3 <H3>Heading 3 Example</H3> Heading 3 Example
<H4> heading 4 <H4>Heading 4 Example</H4> Heading 4 Example
heading 5 <H5>Heading 5 Example</H5> Heading 5 Example

<H5>
heading 6 <H6>Heading 6 Example</H6> Heading 6 Example

<H6>
heading of <HEAD>Contains elements describing
Nothing will show
<HEAD> document the document</HEAD>
horizontal
<HR>
<HR> rule
horizontal
<HR> <HR WIDTH="50%" SIZE="3">
rule
horizontal <HR WIDTH="50%" SIZE="3"
<HR>
rule NOSHADE>
Web Design Mastery

<HR> <HR WIDTH="75%"
horizontal
(Internet COLOR="#FF0000"
rule
Explorer) SIZE="4">
<HTML>
<HEAD>
hypertext
<TITLE>Title of your webpage</TITLE>
markup Contents of your webpage
<HTML> </HEAD>
language
<BODY>Webpage contents</BODY>
</HTML>
italic <I>Example</I> Example

<I>
<IMG SRC="Earth.gif" WIDTH="41"
image HEIGHT="41" BORDER="0" ALT="a
<IMG>
sentence about your site">
<FORM METHOD=post ACTION="/cgi-
bin/example.cgi">
<INPUT type="text" size="10">
input field
<INPUT> <INPUT type="Submit"
VALUE="Submit">
</FORM>
bin/example.cgi">
<TABLE BORDER="0"
CELLSPACING="0"
CELLPADDING="2"><TR><TD
BGCOLOR="#8463FF">
<INPUT type="text" size="10"
<INPUT> input field
MAXLENGTH="30"></TD><TD
BGCOLOR="#8463FF"
VALIGN="Middle">
<INPUT type="image" name="submit"
src="yourimage.gif"></TD></TR>
</TABLE>
</FORM>
Web Design Mastery

bin/example.cgi">
Enter Your Comments:<BR>
<TEXTAREA wrap="virtual"
name="Comments" rows=3 cols=20
<INPUT> input field MAXLENGTH=100>
</TEXTAREA><BR>
<INPUT type="Submit"
VALUE="Submit">
<INPUT type="Reset" VALUE="Reset">
</FORM>
bin/example.cgi">
<CENTER>
Select an option:
<SELECT>
<OPTION >option 1 Select an option:
<OPTION SELECTED>option 2
<INPUT> input field <OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
VALUE="Submit"></CENTER>
</FORM>
bin/example.cgi">
Select an option:<BR>
<INPUT type="radio" name="option"> Select an option:
Option 1
<INPUT type="radio" name="option"
CHECKED> Option 2
<INPUT type="radio" name="option">
Option 3
<BR>
<BR>
<INPUT> input field Select an option:
Select an option:<BR>
<INPUT type="checkbox"
name="selection"> Selection 1
name="selection" CHECKED>
Selection 2
name="selection"> Selection 3
VALUE="Submit">
</FORM>
Web Design Mastery

Example 1: Example 1:
• List item 1
<MENU>
<LI type="disc">List item 1 o List item 2
<LI type="circle">List item 2
<LI type="square">List item 3 List item 3
</MENU>
Example 2:
list item
<LI> Example 2:
i. List item 1
<OL type="i">
<LI>List item 1 ii. List item 2
<LI>List item 2
<LI>List item 3 iii. List item 3
<LI>List item 4
</OL> iv. List item 4
Visit our <A
link HREF="http://www.domain.com/"> Visit our site
<LINK>
site</A>
<MARQUEE bgcolor="#FFFFFF"
<MARQUEE> scrolling loop="-1" scrollamount="2"
(Internet Scrolling Text
text width="90%">Example
Explorer) Marquee</MARQUEE>
<MENU> • List item 1
<LI type="disc">List item 1
menu <LI type="circle">List item 2 o List item 2
<MENU>
<LI type="square">List item 3
</MENU> List item 3
<META name="Description"
content="Description of your site">
meta <META name="keywords" Nothing will show
<META>
content="keywords describing your
site">
<META HTTP-EQUIV="Refresh"
<META> meta CONTENT="4; Nothing will show
URL=http://www.domain.com/">
<META http-equiv="Pragma"
<META> meta Nothing will show
content="no-cache">
<META name="rating"
content="General">
<META name="ROBOTS"
content="ALL">
<META NAME="ROBOTS"
content="NOINDEX,FOLLOW">
Web Design Mastery

Example 1:
Example 1:
1. List item 1
<OL>
<LI>List item 1
2. List item 2
<LI>List item 2
<LI>List item 3
3. List item 3
<LI>List item 4
</OL> 4. List item 4
ordered list
<OL> Example 2:
Example 2:
<OL type="a"> a. List item 1
<LI>List item 1
<LI>List item 2 b. List item 2
<LI>List item 3
<LI>List item 4 c. List item 3
</OL>
d. List item 4
bin/example.cgi">
<CENTER>
Select an option:
<SELECT>
<OPTION>option 1 Select an option:
listbox <OPTION SELECTED>option 2
<OPTION> option <OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
</CENTER>
</FORM>
Web Design Mastery

This is an example displaying the use of
the paragraph tag.
This is an example displaying the
<P>
use of the paragraph tag.
This will create a line break and a space
between lines. This will create a line break and a
space between lines.
Attributes:
Example 1:<BR> Attributes:

<BR>
<P align="left"> Example 1:
This is an example<BR>
displaying the use<BR> This is an example
of the paragraph tag.<BR> displaying the use
paragraph of the paragraph tag.
<P> <BR>
Example 2:<BR>
<BR> Example 2:
<P align="right">
This is an example<BR> This is an example
displaying the use<BR> displaying the use
of the paragraph tag.<BR> of the paragraph tag.
<BR>
Example 3:
Example 3:<BR>
<BR>
This is an example
<P align="center">
displaying the use
This is an example<BR>
of the paragraph tag.
displaying the use<BR>
of the paragraph tag.
small (text) <SMALL>Example</SMALL> Example

<SMALL>
strong
<STRONG> emphasis <STRONG>Example</STRONG> Example
<TABLE BORDER="4"
CELLPADDING="2" Example 1:
CELLSPACING="2" WIDTH="100%">
<TR> Column 1 Column 2
table
<TABLE> <TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>
<TABLE BORDER="2"
BORDERCOLOR="#336699"
CELLPADDING="2" Example 2:
<TABLE> CELLSPACING="2" WIDTH="100%">
(Internet table <TR> Column 1 Column 2
Explorer) <TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>
Web Design Mastery
Example 3:
<TABLE CELLPADDING="2"
<TR>
<TD BGCOLOR="#CCCCCC"> Example 3:
Column 1</TD>
<TABLE> table Column 1 Column 2
<TD BGCOLOR="#CCCCCC">
Column 2</TD> Row 2 Row 2
</TR>
<TR>
<TD>Row 2</TD>
<TD>Row 2</TD>
</TR>
</TABLE>
<TABLE BORDER="2"
CELLPADDING="2"
<TR>
table data Column 1 Column 2
<TD> <TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>
<DIV align="center"><TABLE>
<TR>
<TH>Column 1</TH>
<TH>Column 2</TH>
<TH>Column 3</TH>
</TR>
<TR>
<TD>Row 2</TD>
<TD>Row 2</TD>
<TD>Row 2</TD> Column 1 Column 2 Column 3
</TR> Row 2 Row 2 Row 2
table
<TR>
<TH> header Row 3 Row 3 Row 3
<TD>Row 3</TD>
<TD>Row 3</TD> Row 4 Row 4 Row 4
<TD>Row 3</TD>
</TR>
<TR>
<TD>Row 4</TD>
<TD>Row 4</TD>
<TD>Row 4</TD>
</TR>
</TABLE>
</DIV>
document Title of your webpage will be
<TITLE>Title of your webpage</TITLE>
<TITLE> title viewable in the title bar.
Web Design Mastery

<TABLE BORDER="2"
CELLPADDING="2"
<TR>
table row Column 1 Column 2
<TR> <TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>
teletype <TT>Example</TT> Example

<TT>
underline <U>Example</U> Example

<U>
Example 1:<BR> Example 1:
<BR>
<UL>
<LI>List item 1 • List item 1
<LI>List item 2
</UL> • List item 2
<BR>
unordered Example 2:<BR> Example 2:
<UL> list <UL type="disc">
<LI>List item 1 • List item 1
<LI>List item 2
• List item 2
<UL type="circle">
<LI>List item 3 o List item 3
<LI>List item 4
</UL> o List item 4
</UL>
Copyright © Brajusta Publishing. All rights reserved.
Web Design Mastery
CSS Chart
Background Properties
Property Description Values Sample Code
background-
attachment
background-
color BODY {background: blue}
Specifies individual background- P {background:
background
background properties image url(image.jpg) gray 75%
background- no-repeat fixed}
position
background-
repeat
background- Specifies background image at fixed BODY {background-
attachment fixed or scroll scroll attachment: fixed}
transparent
background- name BODY {background-color:
Specifies background color
color rgb blue}
hex
background- url BODY {background-image:
Specifies background image
image none url(image.jpg)}
top
top left
top center
top right
center
background- center left BODY {background-
Specifies background position
position center center position: center}
center right
bottom
bottom left
bottom center
bottom right
repeat
background- Specifies background repeat-x BODY {background-repeat:
repeat repeating repeat-y no-repeat}
no-repeat
Web Design Mastery
Border Properties
border-width
Specifies the properties for all
border border-style P {border: solid blue}
four borders of an element
color
thin
border-bottom- Specifies the width of the medium P {border-bottom-width:
width bottom border of an element thick solid thin red}
length
thin
border-left- Specifies the width of the left medium P {border-left-width: solid
width border of an element thick thin red}
length
thin
border-right- Specifies the width of the right medium P {border-right-width: solid
width border of an element thick thick red}
length
thin
border-top- Specifies the width of the top medium P {border-top-width: solid
width border of an element thick thick red}
length
thin
Specifies the width for all four
medium H1 {border-width: thick
border-width borders of an element from
thick thin thin medium}
one to four values
length
Web Design Mastery
Classification Properties
block
Specifies how/if an element is inline
display P {display: block}
displayed list-item
none
list-style-type
Specifies all of the list list-style-image
list-style UL {list-style: circle inside}
properties list-style-
position
Specifies an image as the list url UL {list-style-image:
list-style-image
item marker none url(image.gif)}
list-style- Specifies the position of the inside
UL {list-style: outside}
position list marker outside
disc
circle
square
decimal
Specifies the appearance of
list-style-type lower-roman OL {list-style-type: circle}
the list item marker
upper-roman
lower-alpha
upper-alpha
none
Web Design Mastery
Font Properties
font-family
P {font: 12pt arial}
font-size
Specifies multiple font P {font: 70% sans-serif}
font font-weight
properties P {font: bold italic large
font-style
Verdana}
font-variant
family-name P {font-family:
font-family Prioritized font names
generic-family verdana,arial}
smaller
larger
xx-small
x-small
P {font-size: 10pt; font-
font-size Specifies the size of the text small
family: arial}
medium
large
x-large
xx-large
normal
bold
bolder
lighter
100
200
Specifies the weight of the
font-weight 300 {font-weight: bold}
text
400
500
600
700
800
900
normal
font-style Specifies the style of the text italic {font-style: italic}
oblique
normal H2 {font-variant: small-
font-variant Specifies the font variant
small caps caps}
Web Design Mastery
Margin Properties
length
margin-bottom Specifies bottom margin percentage H1 {margin-bottom: 2em}
auto
length
margin-left Specifies left margin percentage H1 {margin-left: 2px}
auto
length
margin-right Specifies right margin percentage H1 {margin-right: 10.5%}
auto
length
margin-top Specifies top margin percentage H1 {margin-top: 2em}
auto
Web Design Mastery
Padding Properties
padding-top
Specifies all of the padding padding-
padding properties of an element from bottom P {padding: 2em 2em}
one to four values padding-right
padding-left
padding- Specifies the bottom padding length P {padding-bottom: 2em
bottom properties of an element percentage 2em}
Specifies the left padding length
padding-left P {padding-left: 12px}
properties of an element percentage
Specifies the right padding length
padding-right P {padding-right: 10%}
Specifies the top padding length
padding-top P {padding-top: 2em}
Web Design Mastery
Text Properties
name
color Text color {color: red}
RGB
normal
letter-spacing Spacing between characters {letter-spacing: 0}
length
normal
number
line-height Spacing between lines DIV {line-height:125%}
length
percentage
left
right
text-align Specifies justification {text-align: right}
center
justify
none
underline
text-decoration Text Style overline {text-decoration: none}
line-through
blink
Indents text from the left length
text-indent P {text-indent: 3em}
margin percentage
capitalize
uppercase H1 {text-transform:
text-transform Transforms text letters
lowercase uppercase}
none
For further information you may visit:

W3C Cascading Style Sheets
http://www.w3.org/TR/REC-CSS1
Web Design Mastery
216 Web Safe Color Chart
Each color below contains the hexadecimal values and the RGB (Red, Green, Blue) Values.
Select a color and copy & paste the hexadecimal value into your HTML document.
Example:
Hexadecimal Value - #FFFFFF RGB Color Code - R=255 G=255 B=255
#FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33 #FFFF00
R=255 R=255 R=255 R=255 R=255 R=255

G=255 G=255 G=255 G=255 G=255 G=255
B=255 B=204 B=153 B=102 B=51 B=0
#FFCCFF #FFCCCC #FFCC99 #FFCC66 #FFCC33 #FFCC00
R=255 R=255 R=255 R=255 R=255 R=255

G=204 G=204 G=204 G=204 G=204 G=204
B=255 B=204 B=153 B=102 B=51 B=0
#FF99FF #FF99CC #FF9999 #FF9966 #FF9933 #FF9900
R=255 R=255 R=255 R=255 R=255 R=255

G=153 G=153 G=153 G=153 G=153 G=153
B=255 B=204 B=153 B=102 B=51 B=0
R=255 R=255 R=255 R=255 R=255 R=255

G=102 G=102 G=102 G=102 G=102 G=102
B=255 B=204 B=153 B=102 B=51 B=0
R=255 R=255 R=255 R=255 R=255 R=255

G=51 G=51 G=51 G=51 G=51 G=51
B=255 B=204 B=153 B=102 B=51 B=0
R=255 R=255 R=255 R=255 R=255 R=255

G=0 G=0 G=0 G=0 G=0 G=0
B=255 B=204 B=153 B=102 B=51 B=0
Web Design Mastery
#CCFFFF #CCFFCC #CCFF99 #CCFF66 #CCFF33 #CCFF00
R=204 R=204 R=204 R=204 R=204 R=204

G=255 G=255 G=255 G=255 G=255 G=255
B=255 B=204 B=153 B=102 B=51 B=0
#CCCCFF #CCCCCC #CCCC99 #CCCC66 #CCCC33 #CCCC00
R=204 R=204 R=204 R=204 R=204 R=204

G=204 G=204 G=204 G=204 G=204 G=204
B=255 B=204 B=153 B=102 B=51 B=0
#CC99FF #CC99CC #CC9999 #CC9966 #CC9933 #CC9900
R=204 R=204 R=204 R=204 R=204 R=204

G=153 G=153 G=153 G=153 G=153 G=153
B=255 B=204 B=153 B=102 B=51 B=0
R=204 R=204 R=204 R=204 R=204 R=204

G=102 G=102 G=102 G=102 G=102 G=102
B=255 B=204 B=153 B=102 B=51 B=0
R=204 R=204 R=204 R=204 R=204 R=204

G=51 G=51 G=51 G=51 G=51 G=51
B=255 B=204 B=153 B=102 B=51 B=0
R=204 R=204 R=204 R=204 R=204 R=204

G=0 G=0 G=0 G=0 G=0 G=0
B=255 B=204 B=153 B=102 B=51 B=0
Web Design Mastery
#99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #99FF00
R=153 R=153 R=153 R=153 R=153 R=153

G=255 G=255 G=255 G=255 G=255 G=255
B=255 B=204 B=153 B=102 B=51 B=0
#99CCFF #99CCCC #99CC99 #99CC66 #99CC33 #99CC00
R=153 R=153 R=153 R=153 R=153 R=153

G=204 G=204 G=204 G=204 G=204 G=204
B=255 B=204 B=153 B=102 B=51 B=0
#9999FF #9999CC #999999 #999966 #999933 #999900
R=153 R=153 R=153 R=153 R=153 R=153

G=153 G=153 G=153 G=153 G=153 G=153
B=255 B=204 B=153 B=102 B=51 B=0
#9966FF #9966CC #996699 #996666 #996633 #996600
R=153 R=153 R=153 R=153 R=153 R=153

G=102 G=102 G=102 G=102 G=102 G=102
B=255 B=204 B=153 B=102 B=51 B=0
#9933FF #9933CC #993399 #993366 #993333 #993300
R=153 R=153 R=153 R=153 R=153 R=153

G=51 G=51 G=51 G=51 G=51 G=51
B=255 B=204 B=153 B=102 B=51 B=0
#9900FF #9900CC #990099 #990066 #990033 #990000
R=153 R=153 R=153 R=153 R=153 R=153

G=0 G=0 G=0 G=0 G=0 G=0
B=255 B=204 B=153 B=102 B=51 B=0
Web Design Mastery
R=102 R=102 R=102 R=102 R=102 R=102

G=255 G=255 G=255 G=255 G=255 G=255
B=255 B=204 B=153 B=102 B=51 B=0
R=102 R=102 R=102 R=102 R=102 R=102

G=204 G=204 G=204 G=204 G=204 G=204
B=255 B=204 B=153 B=102 B=51 B=0
#6699FF #6699CC #669999 #669966 #669933 #669900
R=102 R=102 R=102 R=102 R=102 R=102

G=153 G=153 G=153 G=153 G=153 G=153
B=255 B=204 B=153 B=102 B=51 B=0
#6666FF #6666CC #666699 #666666 #666633 #666600
R=102 R=102 R=102 R=102 R=102 R=102

G=102 G=102 G=102 G=102 G=102 G=102
B=255 B=204 B=153 B=102 B=51 B=0
#6633FF #6633CC #663399 #663366 #663333 #663300
R=102 R=102 R=102 R=102 R=102 R=102

G=51 G=51 G=51 G=51 G=51 G=51
B=255 B=204 B=153 B=102 B=51 B=0
#6600FF #6600CC #660099 #660066 #660033 #660000
R=102 R=102 R=102 R=102 R=102 R=102

G=0 G=0 G=0 G=0 G=0 G=0
B=255 B=204 B=153 B=102 B=51 B=0
Web Design Mastery
R=51 R=51 R=51 R=51 R=51 R=51

G=255 G=255 G=255 G=255 G=255 G=255
B=255 B=204 B=153 B=102 B=51 B=0
R=51 R=51 R=51 R=51 R=51 R=51

G=204 G=204 G=204 G=204 G=204 G=204
B=255 B=204 B=153 B=102 B=51 B=0
#3399FF #3399CC #339999 #339966 #339933 #339900
R=51 R=51 R=51 R=51 R=51 R=51

G=153 G=153 G=153 G=153 G=153 G=153
B=255 B=204 B=153 B=102 B=51 B=0
#3366FF #3366CC #336699 #336666 #336633 #336600
R=51 R=51 R=51 R=51 R=51 R=51

G=102 G=102 G=102 G=102 G=102 G=102
B=255 B=204 B=153 B=102 B=51 B=0
#3333FF #3333CC #333399 #333366 #333333 #333300
R=51 R=51 R=51 R=51 R=51 R=51

G=51 G=51 G=51 G=51 G=51 G=51
B=255 B=204 B=153 B=102 B=51 B=0
#3300FF #3300CC #330099 #330066 #330033 #330000
R=51 R=51 R=51 R=51 R=51 R=51

G=0 G=0 G=0 G=0 G=0 G=0
B=255 B=204 B=153 B=102 B=51 B=0
Web Design Mastery
R=0 R=0 R=0 R=0 R=0 R=0

G=255 G=255 G=255 G=255 G=255 G=255
B=255 B=204 B=153 B=102 B=51 B=0
R=0 R=0 R=0 R=0 R=0 R=0

G=204 G=204 G=204 G=204 G=204 G=204
B=255 B=204 B=153 B=102 B=51 B=0
#0099FF #0099CC #009999 #009966 #009933 #009900
R=0 R=0 R=0 R=0 R=0 R=0

G=153 G=153 G=153 G=153 G=153 G=153
B=255 B=204 B=153 B=102 B=51 B=0
#0066FF #0066CC #006699 #006666 #006633 #006600
R=0 R=0 R=0 R=0 R=0 R=0

G=102 G=102 G=102 G=102 G=102 G=102
B=255 B=204 B=153 B=102 B=51 B=0
#0033FF #0033CC #003399 #003366 #003333 #003300
R=0 R=0 R=0 R=0 R=0 R=0

G=51 G=51 G=51 G=51 G=51 G=51
B=255 B=204 B=153 B=102 B=51 B=0
#0000FF #0000CC #000099 #000066 #000033 #000000
R=0 R=0 R=0 R=0 R=0 R=0

G=0 G=0 G=0 G=0 G=0 G=0
B=255 B=204 B=153 B=102 B=51 B=0
Web Design Mastery
Special Character & Symbol Codes
In order to display certain characters within your HTML pages, you must use a special code.
The codes below display the HTML code and the character when displayed on your web page.
HTML Browser HTML Browser HTML Browser HTML Browser HTML Browser
Code View Code View Code View Code View Code View
© © ! ! _ _ Û Û

® ® " " ` ` ž Ü Ü
# ` a a Ÿ Ý Ý
" " $ $ b b Þ Þ
& & % % c c ¡ ¡ ß ß
< < & & d d ¢ ¢ à à
> > ' ' e e £ £ á á
À À ( ( f f ¤ ¤ â â
Á Á ) ) g g ¥ ¥ ã ã
Â Â * * h h ¦ ¦ ä ä
Ã Ã + + i i § § å å
Ä Ä , , j j ¨ ¨ æ æ
Å Å - - k k © © ç ç
Æ Æ . . l l ª ª è è
Ç Ç / / m m « « é é
È È 0 0 n n ¬ ¬ ê ê
É É 1 1 o o ë ë
Ê Ê 2 2 p p ® ® ì ì
Ë Ë 3 3 q q ¯ ¯ í í
Ì Ì 4 4 r r ° ° î î
Í Í 5 5 s s ± ± ï ï
Î Î 6 6 t t ² ² ð ð
Ï Ï 7 7 u u ³ ³ ñ ñ
Ð Ð 8 8 v v ´ ´ ò ò
Ñ Ñ 9 9 w w µ µ ó ó
Õ Õ : : x x ¶ ¶ ô ô
Web Design Mastery
Ö Ö ; ; y y · · õ õ
Ø Ø < < z z ¸ ¸ ö ö
Ù Ù = = { { ¹ ¹ ÷ ÷
Ú Ú > > | | º º ø ø
Û Û ? ? } } » » ù ù
Ü Ü @ @ ~ ~ ¼ ¼ ú ú
Ý Ý A A ? ½ ½ û û
Þ Þ B B € ¾ ¾ &#252 ü
ß ß C C ¿ ¿ ý ý
à à D D ‚ À À þ þ
á á E E ƒ Á Á ÿ ÿ
å å F F „ Â Â
æ æ G G … Ã Ã
ç ç H H † Ä Ä
è è I I ‡ Å Å
é é J J ˆ Æ Æ
ê ê K K ‰ Ç Ç
ë ë L L Š È È
ì ì M M ‹ É É
í í N N Œ Ê ?
î î O O Ë Ë
ï ï P P Ž Ì Ì
ð ð Q Q Í Í
ñ ñ R R Î Î
ò ò S S ‘ Ï Ï
ó ó T T ’ Ð Ð
ô ô U U “ Ñ Ñ
õ õ V V ” Ò Ò
ö ö W W • Ó Ó
ø ø X X – Ô Ô
ù ù Y Y — Õ Õ
Web Design Mastery
ú ú Z Z ˜ Ö Ö
û û [ [ ™ × ×
ý ý \ \ š Ø Ø
þ þ ] ] › Ù Ù
ÿ ÿ ^ ^ œ Ú Ú
Web Design Mastery
Troubleshooting
Graphics
Problem Potential Solution
Can you tell me how I can The address of an image is simply your image's URL.
determine what my image address For example, if you uploaded your image into a
is? directory called "images" and the name of your image
is logo.gif, then your image address might look
something like this:
http://www.domain.com/images/logo.gif
I can't get my image to display on In order for an image to display on a web page, it
my web page. must first be uploaded to your server. If you've
verified that your image has been uploaded, your next
step will be to double check your image HTML code.
Make sure that the image address leads to your image
and is spelled exactly the same. Keep in mind, the
name of your image is CaSE SeNsiTIve. In other
words, if your image name looks like this "Image.gif"
on your server, then it must look exactly the same
within your code.
My linked image contains an ugly To remove a link border, place border=0 within your
border around it. Is there any way image code.
I can remove it?
Browser View
Browser View
New Code
Original Code
<a href="link.htm"><img src="image.gif"

<a href="link.htm"><img border="0">
src="image.gif"></a>
Web Design Mastery
In order to wrap your text around your

image, you must place align="left" or "right"
within your image code.
By placing the following code within your

I'd like to display my text HTML, your image will be displayed on the
wrapping around the side of my left hand side with your text displayed on the right.
image as it would in a book. Is this
possible? As you continue to type your text, it will automatically
format itself to wrap around the right side and the
Original Code
bottom of your image.
New Code
<img src="image.gif">I'd like to

display my text wrapping around
the side of my image as it would <img src="image.gif" align="left">I'd like to display
in a book. Is this possible? my text wrapping around the side of my image as it
would in a book. Is this possible?
Web Design Mastery
Is it possible to resize my images If you'd like to resize an image in the JPEG format,
without having to use a graphics you can do so within your HTML by changing the
editor? HEIGHT and WIDTH values. To retain your images
original characteristics, make sure you adjust the
height and the width equally. In other words, if your
original image dimensions are 50x100 (width 50 and
height 100), to reduce your image to one half the
size, change the width to 25 and the height to 50.
Note: It is highly recommended that you

don't use this resizing technique for major
changes, as it will add additional time to
your site's load time.
Original Resized
Image Image
96x134 76x114
I would like to learn how to design Paint Shop Pro is a highly professional graphics editing
my own graphics, but don't want program used by many Internet marketers. Not only
to pay hundreds of dollars for a will it enable you to create highly professional looking
software program. Are there any graphics, but it is also very reasonably priced.
quality graphics editing programs http://www.jasc.com
that don't cost a fortune?
Although I would like to design my GotLogos will design a highly professional looking logo
own graphics, I just can't seem to and many other web graphics at a very reasonable
get the hang of it. Is there a price. Logos start at just $25.
professional service that will design http://www.gotlogos.com
a logo for me at a reasonable
price?
Web Design Mastery
Text
I would like to display my text side In order to display your text like a newspaper, you
by side like a newspaper, but I must place it within a table.
can't figure out the code.
This is an example This is an example
displaying text side by displaying text side by
side like a newspaper. side like a newspaper.
<TABLE
<TR>
<TD>text</TD>
<TD>text</TD>
</TR>
</TABLE>
I am aware that SPAM robots crawl You can protect your email by using special coding.
the Internet in search of email Instead of displaying the @ symbol within your email,
addresses. Is there any way I can use the following code:
display my email address on my
web page, yet protect it from these
spammers? <A HREF="mailto:you@yourdomain.com">
Contact Us</A>
Is it possible to indent a paragraph You can indent a paragraph from the left side of your
from just the left side of the page? page by enclosing it between the <UL> and </UL>
tags:
<UL>
Place your text between the <UL> and </UL tags
without the <LI> tags.
</UL>
Is it possible to highlight text You can highlight your text in any color you'd like by
within a web page? adding the following codes to your HTML:
Example: Example of highlighted text
<SPAN style="BACKGROUND-COLOR:
#ffff00">Example of highlighted text</SPAN>
Web Design Mastery
I know how to set my text up in In order to display your columns a specific size, your
tables, but can you tell me how to first step will be to add width=90% (or whatever
set my columns at a specific width? percentage you'd like) to your table tag. Next, add
width="25%" within your first TD tag and
width="75%" within your second TD tag. You can
change the percentages to whatever you'd like, as
long as they total 100%.
Example 25%+75%=100%
This is an This is an example displaying text

example side by side like a newspaper.
displaying
text side by
side like a
newspaper.
<TABLE BORDER WIDTH="90%">

<TR>
<TD WIDTH="25%">text</TD>
<TD WIDTH="75%">text</TD>
</TR>
</TABLE>
When I placed my text within my Yes. Simply place your text within a table. You can
page, it's right up against the left specify the width of your table to determine the
border. Is there any way I can distance between your text and the left and right
correct this? border of your web page.
This is an example of how to display your text

within a table.
<TABLE BORDER WIDTH="80%">

<TR>
<TD>text</TD>
</TR>
</TABLE>
This table code will display your text across 80% of

your web page with a border of 10% on the left and
right side.
Web Design Mastery
Tables
I have diced my image into smaller When using a table to piece an image together, you
sections so that I could piece it must include border="0", cellpadding="0", and
back together with a table, but cellspacing="0" within your table code.
there is a space between the table
cells that I can't get rid of.
Browser View
Browser View
New Code
Original Code
<TABLE BORDER="0" ALIGN="Center"

CELLPADDING="0" CELLSPACING="0">
<TABLE BORDER="0" <TR>
ALIGN="Center"> <TD><IMG SRC="image.gif"></TD>
<TR> <TD><IMG SRC="image2.gif"></TD>
<TD><IMG </TR>
SRC="image.gif"></TD> </TABLE>
<TD><IMG
SRC="image2.gif"></TD>
</TR> For further information, see the Advanced Web Design
</TABLE> ebook.
Web Design Mastery
I'm trying to display a chart I When using a table with borders and empty cells,
created with a table, but the place within your empty cells.
borders of the empty table cells
aren't showing.
Browser View
Browser View
New Code
Original Code
<TABLE>
<TR>
<TABLE> <TD>Example</TD>
<TR> <TD> </TD>
<TD>Example</TD> <TD> </TD>
<TD></TD> <TD>Example</TD>
<TD></TD> </TR>
<TD>Example</TD> <TR>
</TR> <TD> </TD>
<TR> <TD>Example</TD>
<TD></TD> <TD>Example</TD>
<TD>Example</TD> <TD> </TD>
<TD>Example</TD> </TR>
<TD></TD> </TABLE>
</TR>
</TABLE>
Web Design Mastery
When placing text within my table To align your text across all of your top table cells,
sells, I am unable to get the text add Valign="top" to your TR tag. This will top align
to align properly. I'd like to display every column within the top row of your table.
the text at the top of both cells.
Browser View
Browser View
Example When placing text within my table sells, I

When placing text am unable to get the text to align
within my table sells, I properly. I'd like to display the text at the
am unable to get the top of both cells.
Example text to align properly.
I'd like to display the
text at the top of both New Code
cells.
Original Code <TABLE>

<TR VALIGN="Top">
<TD>Example</TD>
<TD>When placing text within my table sells, I am
<TABLE>
unable to get the text to align properly. I'd like to
<TR>
display the text at the top of both cells.</TD>
<TD>Example</TD>
</TR>
<TD>When placing text within
</TABLE>
my table sells, I am unable to get
the text to align properly. I'd like
to display the text at the top of
both cells.</TD>
</TR>
</TABLE>
Web Design Mastery
I have specified a font face at the In order to display a specific font face within your
beginning of my web page, but the tables, you must use a separate font tag within each
font face isn't displaying within my
table cell.
tables.
Code
<TABLE>
<TR>
<TD><font face="Arial">text</font></TD>
<TD><font face="Arial">text</font></TD>
</TR>
</TABLE>
If you'd rather not use a font tag within each of your

table cells, there is an easier way. Place the following
code between the <head> and </head> tags. This
code will specify the font style for all of your table
cells.
Code
<STYLE TYPE="text/css">

</STYLE>
Web Design Mastery
I would like to display my If you don't want empty space within your table when
subscription form within a table, it contains a form, you must place your beginning and
but can't get ride of the extra ending form codes outside the table code.
spaces inside my table.
New Table (Browser View)
Original Table (Browser View)
Notice the form code is located outside the table.
Notice how the form code is

located within the table. <FORM method="post" action="subscribe.cgi">
<TABLE BORDER CELLSPACING="0" CELLPADDING="5">
<TR>
<TD BGCOLOR="#993366">
<TABLE BORDER CELLSPACING="0" <P ALIGN=Center><FONT face="Verdana,Helvetica" color="White"
CELLPADDING="5"> SIZE="2"><B>Subscribe</B></FONT>
<TR> </TD>
<TD BGCOLOR="#993366"> </TR>
<P ALIGN=Center> <TR>
<FONT face="Verdana,Helvetica" <TD BGCOLOR="#CCCCCC">
color="White" <P ALIGN=Center>
SIZE="2"><B>Subscribe</B></FONT> <INPUT type="hidden" value="thankyou.htm" name="redirect">
</TD> First Name:<BR>
</TR> <INPUT size="10" name="name"><BR>
<TR> Email Address:<BR>
<TD BGCOLOR="#CCCCCC"> <INPUT size="10" name="email"><BR>
<P ALIGN=Center> <INPUT type="submit" value="Subscribe">
<FORM method="post" </TD>
action="subscribe.cgi"> </TR>
<INPUT type="hidden" </TABLE>
value="thankyou.htm" name="redirect"> </FORM>
First Name:<BR>
<INPUT size="10" name="name"><BR>
Email Address:<BR>
<INPUT size="10" name="email"><BR>
<INPUT type="submit" value="Subscribe">
</FORM>
</TD>
</TR>
</TABLE>
Web Design Mastery
I've set up my web page Yes. Instead of placing your entire web page within
completely within a table, but now one table, try placing your web page contents in
it seems to load very slowly. Is separate tables and stack them on top of each other.
there anything I can do to speed This will enable each table section of your page to
up the load time? load individually and make your page appear to load
more quickly. You can see an example of stacking
tables within the Advanced Web Design ebook.
Note: Be cautious when placing too many

tables inside of tables, as this will make your
web page load more slowly.
In addition, make sure you optimize your graphics.

This can decrease your load time considerably. Visit
GifWorks to optimize your graphics online.
http://www.gifworks.com
Web Design Mastery
HTML
Although I've learned basic HTML, Coffee Cup is a good HTML editor that is great for
writing it myself is very time beginners and experienced webmasters alike.
consuming. Are there any good http://www.coffeecup.com
HTML editors I can use that are
relatively inexpensive?
I've created my first web page and The main page of your website must be called
uploaded it to my server. I tried to index.htm or index.html as this is the standard file
load my page by typing in my your server will look for when someone visits your
domain name within my browser, website. For example, if your web address is
but I receive an error message. http://www.mypage.com when typed into a browser,
this address will load your index.htm file.
Is it possible to open a link in a Yes. Place target="_blank" within your link code.
new window? Code
<a href="link.htm" target="_blank">text</a>
I would like to display some HTML Certain characters such as <> have special meanings
code on my page for my visitors to in HTML. For this reason, you'll need to use some
use, but I can't get the code to special coding. To display <, you'll need to use <
display. within your HTML code. Below, are a few of the most
often used symbols and codes.
Original Code
New Code
<img src="image.gif">
<img src="image.gif">
Symbol Special Code
< <
> >
& &
© ©
® ®
Review the Symbols section for a complete listing of

special codes.
Web Design Mastery
Forms
I've placed the form code within In order for a form to function, in addition to placing
my web page, but my form isn't the form HTML within your web page, you must also
working. use a CGI form processing script. This script will
reside on your server within your CGI-bin and will be
called from your form code within your HTML. Your
code might look something like this:
Code
<form method=post action="/cgi-bin/example.cgi">
The text indicated in red should be changed to the

address of your form processing script.
You can find free form processing scripts at the CGI

Resource Index.
http://cgi.resourceindex.com/
Web Design Mastery
I don't have access to my CGI-bin. If you'd like to create a simple form that will email the
Is it possible to create a form that contents of your form to a specified email address,
doesn't need CGI? you can do so without CGI.
Name:
Comments:
Place the following code within your HTML where you

would like your form to appear.
Code
<form action="mailto:you@yourdomain.com"
method="POST" name="emailform">
Name:<br>
<input type="text" size=25 name="name"><br>
<br>
Comments:<br>
<textarea name="comments" rows=6 cols=20>
</textarea><br>
<br>
<input type="submit" value="Submit"><input
type="reset" value="Reset">
</form>
Change the text indicated in red to the email address

you'd like the form information sent to.
Web Design Mastery
Can you tell me how to display Place value="text" within your input tag code.
default text within my form's input
box?
Code
<input type="text" size=25 name="name"

value="default text">
Change the text indicated in red to the default text

you would like to display.
I tried to place the value="" code Instead of using the value="" code, place your default
within the textarea of my form, but text between the opening and closing textarea tags.
it wouldn't display my default text
Code
<textarea name="comments" rows=6

cols=20>default text</textarea>
Change the text indicated in red to the default text of

your choice.
Web Design Mastery
JavaScript
I've placed some JavaScript coding Most of the time when you receive an error
within my page, but I keep message with JavaScript, it's caused by an
receiving an error message. extra space at the end of a line of code. This can be
corrected simply by removing the extra space.
To check for extra spaces, open your code within your

editor and place your cursor to the right (about 1
inch) at the end of each line and left click on your
mouse. When the flashing cursor appears, it should be
right next to the last character in each line.
Another common cause for errors is a missing

character. Make sure when you copy the codes
that you copy everything exactly as it is displayed.
Make sure you read the instructions for each

JavaScript, as some scripts should be placed
between the <HEAD> and </HEAD> tags, while
others will be placed within the body of your page.
Web Design Mastery
CGI Scripts
I've placed a CGI script on my When uploading a script to your server, you
server, but I keep receiving an really need to use an FTP (File Transfer
error message. protocol) program. (Refer to the Web Design Mastery
ebook for an FTP tutorial.) No matter what FTP
program you use, make absolutely certain that you
are uploading your script in ASCII mode and not
BINARY mode.
Make sure that the first line of the script

contains the exact path to Perl. If you're not
sure what it is, contact your system administrator.
Most of the time, the path to Perl is: /usr/bin/perl
The first line of your script might look like this:
#!/usr/bin/perl
Make sure you're not confusing PATHS with

URLs. When a script requests a path to a certain
directory or file, it's not referring to the URL. The path
to your directory or file might look like this:
/usr/www/username/httpd/htdocs/directory
If you're not sure what it is, you can view it within

your FTP program. Simply click through the folders on
your server until you've located the directory or file.
The PATH to the directory or file will be displayed
within the Remote System window at the top of WS
FTP. If you're still not sure, contact your system
administrator.
Make sure you've uploaded your script to your

cgi-bin directory (or wherever your scripts
should be located on your server.)
Web Design Mastery
If you're on a Unix or Linux host, you must set

the file permissions. The permissions must be
set to the following:
Owner Read Write Execute rwx 7

Group Read Execute rx 5
Other Read Execute rx 5
If the script you're using will be writing to files, the

directory in which those files reside will usually need
to be set to the following:
Owner Read Write Execute rwx 7

Group Read Write Execute rwx 7
Other Read Write Execute rwx 7
For further information on setting file permissions, see

the FTP section of the Web Design Mastery ebook.

Vol6 Charts

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Vol6 Charts

Uploaded by

Copyright:

Available Formats

Web Design Mastery

Web Design Mastery

Webmaster’s Reference Charts

This is NOT a free ebook

Copyright © Shelley Lowery & Brajusta Publishing, Inc.

No portion of this book, in any format, may be reproduced or

Brajusta Publishing, Inc. PO Box 156 Lewis Center, OH 43035

Section 2: CSS Chart - CSS properties including background, border, classification,

Section 5: Troubleshooting Chart - Common web development problems including

SPECIAL CHARACTER & SYMBOL CODES ............................................................. 28

HTML Tag Chart

Tag Name Code Example Browser View

<!--This can only be viewed within the

bold <B>Example</B> Example

<BIG> big (text) <BIG>Example</BIG> Example

Tag Name Code Example Browser View

heading 1 <H1>Heading 1 Example</H1>

<H4> heading 4 <H4>Heading 4 Example</H4> Heading 4 Example

heading 5 <H5>Heading 5 Example</H5> Heading 5 Example

heading 6 <H6>Heading 6 Example</H6> Heading 6 Example

Tag Name Code Example Browser View

italic <I>Example</I> Example

Tag Name Code Example Browser View

Tag Name Code Example Browser View

Tag Name Code Example Browser View

Tag Name Code Example Browser View

Example 1:<BR> Attributes:

small (text) <SMALL>Example</SMALL> Example

Tag Name Code Example Browser View

Tag Name Code Example Browser View

teletype <TT>Example</TT> Example

underline <U>Example</U> Example

Copyright © Brajusta Publishing. All rights reserved.

For further information you may visit:

216 Web Safe Color Chart

#FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33 #FFFF00

R=255 R=255 R=255 R=255 R=255 R=255

#FFCCFF #FFCCCC #FFCC99 #FFCC66 #FFCC33 #FFCC00

R=255 R=255 R=255 R=255 R=255 R=255

#FF99FF #FF99CC #FF9999 #FF9966 #FF9933 #FF9900

R=255 R=255 R=255 R=255 R=255 R=255

#FF66FF #FF66CC #FF6699 #FF6666 #FF6633 #FF6600

R=255 R=255 R=255 R=255 R=255 R=255

#FF33FF #FF33CC #FF3399 #FF3366 #FF3333 #FF3300

R=255 R=255 R=255 R=255 R=255 R=255

#FF00FF #FF00CC #FF0099 #FF0066 #FF0033 #FF0000

R=255 R=255 R=255 R=255 R=255 R=255

#CCFFFF #CCFFCC #CCFF99 #CCFF66 #CCFF33 #CCFF00

R=204 R=204 R=204 R=204 R=204 R=204

R=204 R=204 R=204 R=204 R=204 R=204

R=204 R=204 R=204 R=204 R=204 R=204

R=204 R=204 R=204 R=204 R=204 R=204

R=204 R=204 R=204 R=204 R=204 R=204

R=204 R=204 R=204 R=204 R=204 R=204

#99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #99FF00

R=153 R=153 R=153 R=153 R=153 R=153

R=153 R=153 R=153 R=153 R=153 R=153

R=153 R=153 R=153 R=153 R=153 R=153

R=153 R=153 R=153 R=153 R=153 R=153

R=153 R=153 R=153 R=153 R=153 R=153

R=153 R=153 R=153 R=153 R=153 R=153

#66FFFF #66FFCC #66FF99 #66FF66 #66FF33 #66FF00

R=102 R=102 R=102 R=102 R=102 R=102

© © ! ! _ _ Û Û