HTML Tags Chart

HTML Tags Chart
To use any of the following HTML tags, simply select the HTML code you'd like and copy and paste it into your web page. Tag <!-<a <b> <big> <body> Name comment anchor bold Code Example Browser View
 <a href="http://www.domain.com/"> Visit Our Site</a> <b>Example</b> Visit Our Site (Tip) Example
big (text) <big>Example</big> body of <body>The content of your HTML HTML documen page</body> t line break
Example (Tip)
Contents of your web page (Tip)
<br>
The contents of your web The contents of your page<br>The contents of page your page The contents of your web page <center>This will center your contents</center> This will center your contents Definition Term Definition of the term Definition Term Definition of the term Definition Term Definition of the term Definition Term Definition of the term Definition Term Definition of the term Definition Term Definition of the term This is an Example of
<center> center
<dd>
<dl> <dt>Definition Term</dt> definition <dd>Definition of the term</dd> descripti <dt>Definition Term</dt> on <dd>Definition of the term</dd> </dl> <dl> <dt>Definition Term</dt> definition <dd>Definition of the term</dd> <dt>Definition Term</dt> list <dd>Definition of the term</dd> </dl> <dl> <dt>Definition Term</dt> definition <dd>Definition of the term</dd> term <dt>Definition Term</dt> <dd>Definition of the term</dd> </dl> emphasis This is an <em>Example</em> of using
<dl>
<dt>
<em>
the emphasis tag <embed> embed object <embed src="yourfile.mid" width="100%" height="60" align="center">
using the emphasis tag (Tip)
<embed>
embed object
<embed src="yourfile.mid" autostart="true" hidden="false" loop="false"> <noembed><bgsound src="yourfile.mid" loop="1"></noembed>
Music will begin playing when your page is loaded and will only play one time. A control panel will be displayed to enable your visitors to stop the music. Example (Tip)
<font> <font> <font>
font font font
<font face="Times New Roman">Example</font> <font face="Times New Roman" size="4">Example</font> <font face="Times New Roman" size="+3" color="#ff0000">Example</font> <form action="mailto:you@yourdomain.com"> Name: <input name="Name" value="" size="10"><br> Email: <input name="Email" value="" size="10"><br> <center><input type="submit"></center> </form> <h1>Heading 1 Example</h1> <h2>Heading 2 Example</h2> <h3>Heading 3 Example</h3> <h4>Heading 4 Example</h4> <h5>Heading 5 Example</h5> <h6>Heading 6 Example</h6>
Example (Tip)
Example (Tip)
Name: Email: (Tip)
<form>
form
<h1> <h2> <h3> <h4> <h5> <h6>
heading 1 heading 2 heading 3 heading 4 heading 5 heading 6
<head>
heading of HTML <head>Contains elements describing the documen document</head> t horizonta <hr /> l rule
Nothing will show
<hr>
Contents of your web page (Tip)
Contents of your web page horizonta <hr width="50%" size="3" /> l rule Contents of your web page Contents of your web page Contents of your web page Contents of your web page
<hr>
<hr>
horizonta <hr width="50%" size="3" noshade /> l rule
Contents of your web <hr> page horizonta (Internet <hr width="75%" color="#ff0000" size="4" /> l rule Explorer) Contents of your web page <hr> horizonta (Internet <hr width="25%" color="#6699ff" size="6" /> l rule Explorer) Contents of your web page <html> <head> <meta> hypertext <title>Title of your web page</title> markup </head> language <body>HTML web page contents </body> </html> italic image <i>Example</i> <img src="Earth.gif" width="41" height="41" border="0" alt="text describing the image" /> Example 1: <form method=post action="/cgibin/example.cgi"> <input type="text" size="10" maxlength="30"> <input type="Submit" value="Submit"> </form> Example 2: Example 1: (Tip) Contents of your web page
<html>
Contents of your web page
<i> <img>
Example (Tip)
<input>
input field
<input>
input
Example 2: (Tip)
(Internet field Explorer)
<form method=post action="/cgibin/example.cgi"> <input type="text" style="color: #ffffff; fontfamily: Verdana; font-weight: bold; font-size: 12px; background-color: #72a4d2;" size="10" maxlength="30"> <input type="Submit" value="Submit"> </form> Example 3: <form method=post action="/cgibin/example.cgi"> <table border="0" cellspacing="0" cellpadding="2"><tr><td bgcolor="#8463ff"><input type="text" size="10" maxlength="30"></td><td bgcolor="#8463ff" valign="Middle"> <input type="image" name="submit" src="yourimage.gif"></td></tr> </table> </form> Example 4: <form method=post action="/cgibin/example.cgi"> Enter Your Comments:<br> <textarea wrap="virtual" name="Comments" rows=3 cols=20 maxlength=100></textarea><br> <input type="Submit" value="Submit"> <input type="Reset" value="Clear"> </form> Example 5: <form method=post action="/cgibin/example.cgi"> <center> Select an option: <select> <option >option 1</option> <option selected>option 2</option> <option>option 3</option> <option>option 4</option> <option>option 5</option> <option>option 6</option> Example 4: (Tip) Example 3: (Tip)
<input>
input field
<input>
input field
Example 5: Tip) Select an option:
<input>
input field
</select><br> <input type="Submit" value="Submit"></center> </form> Example 6: <form method=post action="/cgiExample 6: (Tip) bin/example.cgi"> Select an option:<br> <input type="radio" name="option"> Option 1 Select an option: <input type="radio" name="option" checked> Option 1 Option 2 Option 2 <input type="radio" name="option"> Option 3 <br> Option 3 <br> Select an option:<br> Select an option: <input type="checkbox" name="selection"> Selection 1 Selection 1 <input type="checkbox" name="selection" Selection 2 checked> Selection 2 Selection 3 <input type="checkbox" name="selection"> Selection 3 <input type="Submit" value="Submit"> </form> Example 1: Example 1: (Tip) <menu> <li type="disc">List item 1</li> <li type="circle">List item 2</li> <li type="square">List item 3</li> </MENU> <li> list item Example 2: <ol type="i"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> <link> link <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
o
<input>
input field
List item 1 List item 2 List item 3
Example 2: i. ii. iii. iv. List item 1 List item 2 List item 3 List item 4
<marque <marquee bgcolor="#cccccc" loop="-1" e> scrolling scrollamount="2" width="100%">Example (Internet text Marquee</marquee> Explorer) <menu> <li type="disc">List item 1</li> <li type="circle">List item 2</li> <li type="square">List item 3</li> </menu>
o
(Tip) List item 1 List item 2 List item 3
<menu>
menu
<meta>
meta
<meta name="Description" content="Description of your site"> Nothing will show (Tip) <meta name="keywords" content="keywords describing your site"> <meta HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain. Nothing will show (Tip) com/"> <meta http-equiv="Pragma" content="nocache"> <meta name="rating" content="General"> <meta name="robots" content="all"> <meta name="robots" content="noindex,follow"> Numbered <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Nothing will show (Tip) Nothing will show (Tip) Nothing will show (Tip) Nothing will show (Tip) Numbered 1. 2. 3. 4. List item 1 List item 2 List item 3 List item 4
<meta> <meta> <meta> <meta> <meta>
meta meta meta meta meta
Numbered Special Start 5. 6. 7. 8. List item 1 List item 2 List item 3 List item 4
<ol>
ordered list
Numbered Special Start <ol start="5"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Lowercase Letters
Lowercase Letters a. List item 1 b. List item 2 c. List item 3
d. List item 4 <ol type="a"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Letters <ol type="A"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Letters Special Start <ol type="A" start="3"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Lowercase Roman Numerals <ol type="i"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Roman Numerals <ol type="I"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Roman Numerals Special Start VII. VIII. IX. X. List item 1 List item 2 List item 3 List item 4 Capital Letters Special Start C. D. E. F. List item 1 List item 2 List item 3 List item 4 Capital Letters A. B. C. D. List item 1 List item 2 List item 3 List item 4
Lowercase Roman Numerals i. ii. iii. iv. List item 1 List item 2 List item 3 List item 4
Capital Roman Numerals I. II. III. IV. List item 1 List item 2 List item 3 List item 4
Capital Roman Numerals Special Start
<ol type="I" start="7"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> <form method=post action="/cgibin/example.cgi"> <center> Select an option: <select> <option>option 1</option> <option selected>option 2</option> <option>option 3</option> <option>option 4</option> <option>option 5</option> <option>option 6</option> </select><br> </center> </form> This is an example displaying the use of the paragraph tag. <p> This will create a line break and a space between lines. Attributes: Example 1:<br> <br> <p align="left"> This is an example<br> displaying the use<br> of the paragraph tag.<br> paragrap <br> h Example 2:<br> <br> <p align="right"> This is an example<br> displaying the use<br> of the paragraph tag.<br> <br> Example 3:<br> <br> <p align="center"> This is an example<br> displaying the use<br>
<option>
listbox option
Select an option: (Tip)
This is an example displaying the use of the paragraph tag. This will create a line break and a space between lines. Attributes: Example 1: This is an example displaying the use of the paragraph tag. Example 2: This is an example displaying the use of the paragraph tag. Example 3: This is an example
<p>
of the paragraph tag. <small> <strike> <strong> small (text) deleted text <small>Example</small> <strike>Example</strike>
displaying the use of the paragraph tag.

Example
(Tip)
Example Example
strong <strong>Example</strong> emphasis Example 1: <table border="4" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> Example 2: (Internet Explorer) <table border="2" bordercolor="#336699" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> Example 3: <table cellpadding="2" cellspacing="2" width="100%"> <tr> <td bgcolor="#cccccc">Column 1</td> <td bgcolor="#cccccc">Column 2</td> </tr> <tr> <td>Row 2</td> <td>Row 2</td> </tr> </table>
Example 1: (Tip) Column 1 Column 2
Example 2: (Tip) Column 1 Column 2
<table>
table
Example 3: (Tip) Column 1 Row 2 Column 2 Row 2
<td>
table data
<table border="2" cellpadding="2" cellspacing="2" width="100%">
<tr> <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> </tr> <tr> <td>Row 3</td> <td>Row 3</td> <td>Row 3</td> </tr> <tr> <td>Row 4</td> <td>Row 4</td> <td>Row 4</td> </tr> </table> </div>
Column 1
Column 2
<th>
table header
Colum n1 Row 2 Row 3 Row 4
<title>
documen <title>Title of your HTML page</title> t title <table border="2" cellpadding="2" cellspacing="2" width="100%"> <tr> table row <td>Column 1</td> <td>Column 2</td> </tr> </table> teletype <tt>Example</tt> underline <u>Example</u> Example 1:<br> unordere <br> d list <ul>
Title of your web page will be viewable in the title bar. (Tip)
<tr>
Column 1
Column 2
<tt> <u> <ul>
Example
Example Example 1:
List item 1
<li>List item 1</li> <li>List item 2</li> </ul> <br> Example 2:<br> <ul type="disc"> <li>List item 1</li> <li>List item 2</li> <ul type="circle"> <li>List item 3</li> <li>List item 4</li> </ul> </ul>
List item 2
Example 2:

List item 1 List item 2 o List item 3 o List item 4
Major hexadecimal color codes

Color Red Turquoise Light Blue Dark Blue Light Purple Dark Purple Yellow Pastel Green Pink Color Code #FF0000 #00FFFF #0000FF #0000A0 #FF0080 #800080 #FFFF00 #00FF00 #FF00FF Color White Light Grey Dark Grey Black Orange Brown Burgundy Forest Green Grass Green Color Code #FFFFFF #C0C0C0 #808080 #000000 #FF8040 #804000 #800000 #808000 #408080
Color code chart
Use our HTML color picker if you need to choose from an almost infinite variety of colors. Also, if you like a color scheme of a web page view Tip142 for a fantastic tool that can be used to gather that page's color codes.
COLOR NAME Black Gray0 Gray18 Gray21 Gray23 Gray24 Gray25 Gray26 Gray27 Gray28 Gray29 Gray30 Gray31 Gray32 Gray34 Gray35 CODE #000000 #150517 #250517 #2B1B17 #302217 #302226 #342826 #34282C #382D2C #3b3131 #3E3535 #413839 #41383C #463E3F #4A4344 #4C4646 COLOR Black Gray0 Gray18 Gray21 Gray23 Gray24 Gray25 Gray26 Gray27 Gray28 Gray29 Gray30 Gray31 Gray32 Gray34 Gray35
Gray36 Gray37 Gray38 Gray39 Gray40 Gray41 Gray42 Gray43 Gray44 Gray45 Gray46 Gray47 Gray48 Gray49 Gray50 Gray Slate Gray4 Slate Gray Light Steel Blue4
#4E4848 #504A4B #544E4F #565051 #595454 #5C5858 #5F5A59 #625D5D #646060 #666362 #696565 #6D6968 #6E6A6B #726E6D #747170 #736F6E #616D7E #657383 #646D7E
Gray36 Gray37 Gray38 Gray39 Gray40 Gray41 Gray42 Gray43 Gray44 Gray45 Gray46 Gray47 Gray48 Gray49 Gray50 Gray Slate Gray4 Slate Gray Light Steel Blue4
Light Slate Gray Cadet Blue4 Dark Slate Gray4 Thistle4 Medium Slate Blue Medium Purple4 Midnight Blue Dark Slate Blue Dark Slate Gray Dim Gray Cornflower Blue Royal Blue4 Slate Blue4 Royal Blue Royal Blue1 Royal Blue2 Royal Blue3 Deep Sky Blue Deep Sky Blue2
#6D7B8D #4C787E #4C7D7E #806D7E #5E5A80 #4E387E #151B54 #2B3856 #25383C #463E41 #151B8D #15317E #342D7E #2B60DE #306EFF #2B65EC #2554C7 #3BB9FF #38ACEC
Light Slate Gray Cadet Blue4 Dark Slate Gray4 Thistle4 Medium Slate Blue Medium Purple4 Midnight Blue Dark Slate Blue Dark Slate Gray Dim Gray Cornflower Blue Royal Blue4 Slate Blue4 Royal Blue Royal Blue1 Royal Blue2 Royal Blue3 Deep Sky Blue Deep Sky Blue2
Slate Blue Deep Sky Blue3 Deep Sky Blue4 Dodger Blue Dodger Blue2 Dodger Blue3 Dodger Blue4 Steel Blue4 Steel Blue Slate Blue2 Violet Medium Purple3 Medium Purple Medium Purple2 Medium Purple1 Light Steel Blue Steel Blue3 Steel Blue2 Steel Blue1
#357EC7 #3090C7 #25587E #1589FF #157DEC #1569C7 #153E7E #2B547E #4863A0 #6960EC #8D38C9 #7A5DC7 #8467D7 #9172EC #9E7BFF #728FCE #488AC7 #56A5EC #5CB3FF
Slate Blue Deep Sky Blue3 Deep Sky Blue4 Dodger Blue Dodger Blue2 Dodger Blue3 Dodger Blue4 Steel Blue4 Steel Blue Slate Blue2 Violet Medium Purple3 Medium Purple Medium Purple2 Medium Purple1 Light Steel Blue Steel Blue3 Steel Blue2 Steel Blue1
Sky Blue3 Sky Blue4 Slate Blue Slate Blue Slate Gray3 Violet Red Violet Red1 Violet Red2 Deep Pink Deep Pink2 Deep Pink3 Deep Pink4 Medium Violet Red Violet Red3 Firebrick Violet Red4 Maroon4 Maroon Maroon3
#659EC7 #41627E #737CA1 #737CA1 #98AFC7 #F6358A #F6358A #E4317F #F52887 #E4287C #C12267 #7D053F #CA226B #C12869 #800517 #7D0541 #7D0552 #810541 #C12283
Sky Blue3 Sky Blue4 Slate Blue Slate Blue Slate Gray3 Violet Red Violet Red1 Violet Red2 Deep Pink Deep Pink2 Deep Pink3 Deep Pink4 Medium Violet Red Violet Red3 Firebrick Violet Red4 Maroon4 Maroon Maroon3
Maroon2 Maroon1 Magenta Magenta1 Magenta2 Magenta3 Medium Orchid Medium Orchid1 Medium Orchid2 Medium Orchid3 Medium Orchid4 Purple Purple1 Purple2 Purple3 Purple4 Dark Orchid4 Dark Orchid Dark Violet
#E3319D #F535AA #FF00FF #F433FF #E238EC #C031C7 #B048B5 #D462FF #C45AEC #A74AC7 #6A287E #8E35EF #893BFF #7F38EC #6C2DC7 #461B7E #571B7e #7D1B7E #842DCE
Maroon2 Maroon1 Magenta Magenta1 Magenta2 Magenta3 Medium Orchid Medium Orchid1 Medium Orchid2 Medium Orchid3 Medium Orchid4 Purple Purple1 Purple2 Purple3 Purple4 Dark Orchid4 Dark Orchid Dark Violet
Dark Orchid3 Dark Orchid2 Dark Orchid1 Plum4 Pale Violet Red Pale Violet Red1 Pale Violet Red2 Pale Violet Red3 Pale Violet Red4 Plum Plum1 Plum2 Plum3 Thistle Thistle3 Lavender Blush2 Lavender Blush3 Thistle2 Thistle1
#8B31C7 #A23BEC #B041FF #7E587E #D16587 #F778A1 #E56E94 #C25A7C #7E354D #B93B8F #F9B7FF #E6A9EC #C38EC7 #D2B9D3 #C6AEC7 #EBDDE2 #C8BBBE #E9CFEC #FCDFFF
Dark Orchid3 Dark Orchid2 Dark Orchid1 Plum4 Pale Violet Red Pale Violet Red1 Pale Violet Red2 Pale Violet Red3 Pale Violet Red4 Plum Plum1 Plum2 Plum3 Thistle Thistle3 Lavender Blush2 Lavender Blush3 Thistle2 Thistle1
Lavender Lavender Blush Light Steel Blue1 Light Blue Light Blue1 Light Cyan Slate Gray1 Slate Gray2 Light Steel Blue2 Turquoise1 Cyan Cyan1 Cyan2 Turquoise2 Medium Turquoise Turquoise Dark Slate Gray1 Dark Slate Gray2 Dark Slate Gray3
#E3E4FA #FDEEF4 #C6DEFF #ADDFFF #BDEDFF #E0FFFF #C2DFFF #B4CFEC #B7CEEC #52F3FF #00FFFF #57FEFF #50EBEC #4EE2EC #48CCCD #43C6DB #9AFEFF #8EEBEC #78c7c7
Lavender Lavender Blush Light Steel Blue1 Light Blue Light Blue1 Light Cyan Slate Gray1 Slate Gray2 Light Steel Blue2 Turquoise1 Cyan Cyan1 Cyan2 Turquoise2 Medium Turquoise Turquoise Dark Slate Gray1 Dark slate Gray2 Dark Slate Gray3
Cyan3 Turquoise3 Cadet Blue3 Pale Turquoise3 Light Blue2 Dark Turquoise Cyan4 Light Sea Green Light Sky Blue Light Sky Blue2 Light Sky Blue3 Sky Blue Sky Blue2 Light Sky Blue4 Sky Blue Light Slate Blue Light Cyan2 Light Cyan3 Light Cyan4
#46C7C7 #43BFC7 #77BFC7 #92C7C7 #AFDCEC #3B9C9C #307D7E #3EA99F #82CAFA #A0CFEC #87AFC7 #82CAFF #79BAEC #566D7E #6698FF #736AFF #CFECEC #AFC7C7 #717D7D
Cyan3 Turquoise3 Cadet Blue3 Pale Turquoise3 Light Blue2 Dark Turquoise Cyan4 Light Sea Green Light Sky Blue Light Sky Blue2 Light Sky Blue3 Sky Blue Sky Blue2 Light Sky Blue4 Sky Blue Light Slate Blue Light Cyan2 Light Cyan3 Light Cyan4
Light Blue3 Light Blue4 Pale Turquoise4 Dark Sea Green4 Medium Aquamarine Medium Sea Green Sea Green Dark Green Sea Green4 Forest Green Medium Forest Green Spring Green4 Dark Olive Green4 Chartreuse4 Green4 Medium Spring Green Spring Green Lime Green Spring Green
#95B9C7 #5E767E #5E7D7E #617C58 #348781 #306754 #4E8975 #254117 #387C44 #4E9258 #347235 #347C2C #667C26 #437C17 #347C17 #348017 #4AA02C #41A317 #4AA02C
Light Blue3 Light Blue4 Pale Turquoise4 Dark Sea Green4 Medium Aquamarine Medium Sea Green Sea Green Dark Green Sea Green4 Forest Green Medium Forest Green Spring Green4 Dark Olive Green4 Chartreuse4 Green4 Medium Spring Green Spring Green Lime Green Spring Green
Dark Sea Green Dark Sea Green3 Green3 Chartreuse3 Yellow Green Spring Green3 Sea Green3 Spring Green2 Spring Green1 Sea Green2 Sea Green1 Dark Sea Green2 Dark Sea Green1 Green Lawn Green Green1 Green2 Chartreuse2 Chartreuse
#8BB381 #99C68E #4CC417 #6CC417 #52D017 #4CC552 #54C571 #57E964 #5EFB6E #64E986 #6AFB92 #B5EAAA #C3FDB8 #00FF00 #87F717 #5FFB17 #59E817 #7FE817 #8AFB17
Dark Sea Green Dark Sea Green3 Green3 Chartreuse3 Yellow Green Spring Green3 Sea Green3 Spring Green2 Spring Green1 Sea Green2 Sea Green1 Dark Sea Green2 Dark Sea Green1 Green Lawn Green Green1 Green2 Chartreuse2 Chartreuse
Green Yellow Dark Olive Green1 Dark Olive Green2 Dark Olive Green3 Yellow Yellow1 Khaki1 Khaki2 Goldenrod Gold2 Gold1 Goldenrod1 Goldenrod2 Gold Gold3 Goldenrod3 Dark Goldenrod Khaki Khaki3
#B1FB17 #CCFB5D #BCE954 #A0C544 #FFFF00 #FFFC17 #FFF380 #EDE275 #EDDA74 #EAC117 #FDD017 #FBB917 #E9AB17 #D4A017 #C7A317 #C68E17 #AF7817 #ADA96E #C9BE62
Green Yellow Dark Olive Green1 Dark Olive Green2 Dark Olive Green3 Yellow Yellow1 Khaki1 Khaki2 Goldenrod Gold2 Gold1 Goldenrod1 Goldenrod2 Gold Gold3 Goldenrod3 Dark Goldenrod Khaki Khaki3
Khaki4 Dark Goldenrod1 Dark Goldenrod2 Dark Goldenrod3 Sienna1 Sienna2 Dark Orange Dark Orange1 Dark Orange2 Dark Orange3 Sienna3 Sienna Sienna4 Indian Red4 Dark Orange3 Salmon4 Dark Goldenrod4 Gold4 Goldenrod4
#827839 #FBB117 #E8A317 #C58917 #F87431 #E66C2C #F88017 #F87217 #E56717 #C35617 #C35817 #8A4117 #7E3517 #7E2217 #7E3117 #7E3817 #7F5217 #806517 #805817
Khaki4 Dark Goldenrod1 Dark Goldenrod2 Dark Goldenrod3 Sienna1 Sienna2 Dark Orange Dark Orange1 Dark Orange2 Dark Orange3 Sienna3 Sienna Sienna4 Indian Red4 Dark Orange3 Salmon4 Dark Goldenrod4 Gold4 Goldenrod4
Light Salmon4 Chocolate Coral3 Coral2 Coral Dark Salmon Salmon1 Salmon2 Salmon3 Light Salmon3 Light Salmon2 Light Salmon Sandy Brown Hot Pink Hot Pink1 Hot Pink2 Hot Pink3 Hot Pink4 Light Coral
#7F462C #C85A17 #C34A2C #E55B3C #F76541 #E18B6B #F88158 #E67451 #C36241 #C47451 #E78A61 #F9966B #EE9A4D #F660AB #F665AB #E45E9D #C25283 #7D2252 #E77471
Light Salmon4 Chocolate Coral3 Coral2 Coral Dark Salmon Pale Turquoise4 Salmon2 Salmon3 Light Salmon3 Light Salmon2 Light Salmon Sandy Brown Hot Pink Hot Pink1 Hot Pink2 Hot Pink3 Hot Pink4 Light Coral
Indian Red1 Indian Red2 Indian Red3 Red Red1 Red2 Firebrick1 Firebrick2 Firebrick3 Pink Rosy Brown1 Rosy Brown2 Pink2 Light Pink Light Pink1 Light Pink2 Pink3 Rosy Brown3 Rosy Brown
#F75D59 #E55451 #C24641 #FF0000 #F62217 #E41B17 #F62817 #E42217 #C11B17 #FAAFBE #FBBBB9 #E8ADAA #E7A1B0 #FAAFBA #F9A7B0 #E799A3 #C48793 #C5908E #B38481
Indian Red1 Indian Red2 Indian Red3 Red Red1 Red2 Firebrick1 Firebrick2 Firebrick3 Pink Rosy Brown1 Rosy Brown2 Pink2 Light Pink Light Pink1 Light Pink2 Pink3 Rosy Brown3 Rosy Brown
Light Pink3 Rosy Brown4 Light Pink4 Pink4 Lavender Blush4 Light Goldenrod4 Lemon Chiffon4 Lemon Chiffon3 Light Goldenrod3 Light Golden2 Light Goldenrod Light Goldenrod1 Lemon Chiffon2 Lemon Chiffon Light Goldenrod Yellow
#C48189 #7F5A58 #7F4E52 #7F525D #817679 #817339 #827B60 #C9C299 #C8B560 #ECD672 #ECD872 #FFE87C #ECE5B6 #FFF8C6 #FAF8CC
Light Pink3 Rosy Brown4 Light Pink4 Pink4 Lavendar Blush4 Light Goldenrod4 Lemon Chiffon4 Lemon Chiffon3 Light Goldenrod3 Light Golden2 Light Goldenrod Light Goldenrod1 Lemon Chiffon2 Lemon Chiffon Light Goldenrod Yellow
Syntax <TAGNAME bgcolor="value">
Quick and dirty, here is how to change the background of your web page. Just use the bgcolor attribute in the <body> tag and you are golden.
HTML Code:
<body bgcolor="Silver">
<p>We set the background...</p> </body>
Paragraph Bgcolor:
We set the background of this paragraph to be silver. The body tag is where you change the pages background. Now continue the lesson to learn more about adding background colors in your HTML!
Adding Color to Your Tables

This example shows how to add a background color for an entire table using generic values of color.
HTML Code:
<table bgcolor="lime" border="1"><tr> <td>A lime colored table background using color names.</td> </tr></table> <table bgcolor="#ff0000" border="1"><tr> <td>A red colored table background using hexadecimal values "#FF0000".</td> </tr></table> <table bgcolor="rgb(0, 0, 255)" border="1"><tr> <td>A blue colored table background using RGB values "rgb(0, 0, 255)".</td> </tr></table>
Table Bgcolors:
A lime colored table background using color names. A red colored table background using hexadecimal values "#FF0000". A blue colored table background using RGB values "rgb(0, 0, 255)".
Adding Color to Table Rows & Columns

Here's a few common examples of "bgcolor" and font color
HTML Code:
<table> <tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr> <tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> <tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> <tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr> <tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> </table>
Alternating Colors:
This Row is Yellow! This Row is Gray! This Row is Yellow! This Row is Gray! This Row is Yellow! This Row is Gray!
Background Color and Font Color Together!

Check out this "Scoreboard" we made with the use of font color and bgcolor!
HTML Code:
<table bgcolor="#000000"> <tr><td bgcolor="#009900"> <font color="#FFFF00" align="right">Green Bay</font></td> <td><font color="#FFFFFF">13</font></td></tr> <tr><td bgcolor="#0000FF"> <font color="#DDDDDD" align="right">New England</font></td> <td><font color="#FFFFFF">27</font></td></tr> </table>
Scoreboard:
Green Bay 13
New England 27
HTML Code:
<table bgcolor="#777777"> <tr><td> <p><font face="Monotype Corsiva, Verdana" size="4" color="#00FF00"> This paragraph tag has... </font></p> </td></tr> </table>
Colored Paragraph: This paragraph tag has a gray background with green colored font. You should see Monotype Corsiva font if you have it installed, or Verdana as the backup. Both fonts are widely accepted as standard fonts.
Symbol How to use 7 8 9 10 Number Circle bullet Reverse bullet Empty bullet Reverse bullet Description
Press and hold the ALT key and type the number of desired symbol.
html tips: bullet lists

This page shows you how you can do bullet lists, and how to specify different types of bullets for your html documents.
bullet lists
The following example shows a bullet list with three items.
<ul> <li>First item <li>Second item <li>Third item </ul>
This is what it looks like:

First item Second item Third item
Bullet lists are indented from the main text, and a line is skipped:
This is the main text, notice there is no code for a line break <ul> <li>First item <li>Second item <li>Third item </ul>
This is the result: This is the main text, notice there is no code for a line break
First item
Second item Third item
embedded bullet lists

You can put bullet lists inside bullet lists. The code for the embedded list is given in red in the next example:
<ul> <li>First item <ul> <li>First item of embedded list <li>Second item of embedded list <li>Third item of embedded list </ul> <li>Second item <li>Third item </ul>
The result of that code appears below; notice that the bullet changes by default (but, on different systems using "Japanese Auto-Detect, the bullets may be identical). In the next section, I'll show you the code to specify what kind of bullet your browser displays.
First item o First item of embedded list o Second item of embedded list o Third item of embedded list Second item Third item
different bullet types

There are three different types of bullets. The code for each is shown below, in red; examples follow. (Note that in the next example, the squares are filled in on Netscape for Windows, but black outlines with white insides on Netscape for Macintosh).
<ul> <li type=square>First item <li type=square>Second item <li type=square>Third item </ul>
Circles: <ul> <li type=circle>First item

<li type=circle>Second item <li type=circle>Third item </ul>
o o o
You can mix them: <ul> <li type=disc>First item

<li type=circle>Second item <li type=square>Third item </ul> o
item titles
The easiest way to do item titles is to code a break into it.
<ul> <li type=disc>First item title<br> A paragraph or explanation of the first item goes here. Notice there are no paragraph or break codes in the paragraphs <li type=disc>Second item title<br> A paragraph or explanation of the second item goes here. </ul>
First item title A paragraph or explanation of the first item goes here. Notice there are no paragraph or break codes in the paragraphs Second item title A paragraph or explanation of the second item goes here.
<img src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />
<a href="http://www.hyperlinkcode.com"><img src="http://hyperlinkcode.com/images/sampleimage.gif"></a> <a href="http://www.hyperlinkcode.com"><img src="/images/sample-image.gif" border="0"></a>

HTML Tags Chart

Uploaded by

Copyright:

Available Formats

HTML Tags Chart

Uploaded by

Document Information

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

HTML Tags Chart

Uploaded by

Copyright:

Available Formats

HTML Tags Chart

using the emphasis tag (Tip)

<embed src="yourfile.mid" autostart="true" hidden="false" loop="false"> <noembed><bgsound src="yourfile.mid" loop="1"></noembed>

<font> <font> <font>

font font font

<h1> <h2> <h3> <h4> <h5> <h6>

heading 1 heading 2 heading 3 heading 4 heading 5 heading 6

Nothing will show

Contents of your web page (Tip)

horizonta <hr width="50%" size="3" noshade /> l rule

Contents of your web page

(Internet field Explorer)

Example 5: Tip) Select an option:

List item 1 List item 2 List item 3

(Tip) List item 1 List item 2 List item 3

<meta> <meta> <meta> <meta> <meta>

meta meta meta meta meta

Lowercase Letters a. List item 1 b. List item 2 c. List item 3

Capital Roman Numerals Special Start

Select an option: (Tip)

displaying the use of the paragraph tag.

Example 1: (Tip) Column 1 Column 2

Example 2: (Tip) Column 1 Column 2

Example 3: (Tip) Column 1 Row 2 Column 2 Row 2

<table border="2" cellpadding="2" cellspacing="2" width="100%">

Colum n1 Row 2 Row 3 Row 4

Colum n2 Row 2 Row 3 Row 4

Colum n3 Row 2 Row 3 Row 4

<tt> <u> <ul>

List item 1 List item 2 o List item 3 o List item 4

Major hexadecimal color codes

Color code chart

Syntax <TAGNAME bgcolor="value">

<p>We set the background...</p> </body>

Adding Color to Your Tables

Adding Color to Table Rows & Columns

Background Color and Font Color Together!

html tips: bullet lists

This is what it looks like:

First item Second item Third item

Second item Third item

embedded bullet lists

different bullet types

First item Second item Third item

Circles: <ul> <li type=circle>First item

First item Second item Third item

You can mix them: <ul> <li type=disc>First item

First item Second item Third item

<img src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg" width="225" height="151" alt="Milford Sound in New Zealand" />

<a href="http://www.hyperlinkcode.com"><img src="http://hyperlinkcode.com/images/sampleimage.gif"></a> <a href="http://www.hyperlinkcode.com"><img src="/images/sample-image.gif" border="0"></a>

You might also like