Details of HTML Coding
(Hypertext Markup Language)
Home
HTML Coding
Character Map
Start Page Design
Color Tests
Gary Novak
Most of these attributes for markup tags can be omitted, and the result is the usual appearance as default.
The markings are not bold. Bold is being used here for emphasis.
<body>...</body>
backgroumd="..." add image name, for whole page image
bgcolor="#......" color of whole page
text="#......" color of text
link="#......" original color of links
alink="#......" color of active link
vlink="#......" color of visited links
Example: <body background="tree.jpg" bgcolor="#f9eedf" text="#000000" link="#700088" alink="#bb5533" vlink="#5577bb">
<hr> Horizontal Rule
size=... height (pixels or %)
width=... length (pixels of %)
align="..." left, right or center
Example: <hr size=3 width=150 align="center">
<p>...</p> Paragraph
align="..." left, right or center
Example: <p align="right">
<font>...</font> Font
face="..." name of font (and alternatives)
size=... size 1 to 7, or + - size
color="#......" color of text
Example: <font face="Verdana, Arial" size=+1 color="#883300">
<i>...</i> italic text
<b>...</b> bold text
<sup>...</sup> superscript
<sub>...</sub> subscript
<u>...</u> underline
<h6>...</h6> heading size
<!-...-> add invisible comments
<br> breaks line
nonbreaking space
<img> Image
src="..." address for acquiring
align="..." right, left, middle, top, bottom
alt="...." text shows when no image
border=.. border in pixels
height=.. height in pixels
width=.. width in pixels
hspace=.. horizontal clear space
vspace=.. vertical clear space
Example: <img src="tree.gif" height=80 width=50 hspace=8 alt="green tree" align="right" border=2>
For links to other pages:
<a href="address">...</a> shows a link
page.html address within same folder
http://domain.com/folder/page.html external address
The text in ... is the visible, colored stuff that you click.
Examples:
<a href="watering.html">How to do the Watering</a><br><br>
<a href="http://supermethod.com/gardens/watering.html">
Sam's method of doing it</a><br><hr>
For links on same page:
<a name="zz, top, etc.">...</a> names a location on page
<a href="#top">...</a> goes to it from same page
<a href="page.html#spotA">...</a> goes to it from different page
<a href="http://domain.com/page.html#spotW">...</a> goes to it from external site
For ..., surround something on the page at desired location, or add an invisible spot as at the desired location; and it fits into the ... slot.
Example:
<a href="#spot-b">horizontal rule</a><br>
(Click this, and then the back button.)
Name above horizontal rule:
<a name="spot-b">vlink="#5577bb"</a>
<table>....</table> Table
align="..." left, right or center
bgcolor="#......" background color
border=.. border in pixels
cellpadding=.. space around text in pixels
cellspacing=.. space between cells in pixels
width=.. width of table in pixels
Example: <table align="center" bgcolor="#ddeedd" border=2 cellpadding=5 width=350>
<td>...</td> Cell, takes precedent over row
<tr>...</tr> Row
align="..." left, right, center for text
valign="..." top, middle, bottom for text
bgcolor="#......" background color
width=.. width in pixels or %
height=.. height in pixels
colspan=.. number of columns to span
rowspan=.. number of rows to span
Example: <td valign="top" bgcolor="#eeddee" width=150 rowspan=3>
<ol>...</ol> Ordered List
<ul>...</ul> Unordered List
<dl>...</dl> Definition List
<dir>...</dir> Directory List
<menu>...</menu> Menu List
<li> Marks start of each item
Example:
<ul>
<li> first duck
<li> second duck
<li> third duck
</ul>
<div>....</div> Division
align="..." left, right or center
Example: <div align="right">
HTML Coding
The markings are not bold. Bold is being used here for emphasis.
<body>...</body>
backgroumd="..." add image name, for whole page image
bgcolor="#......" color of whole page
text="#......" color of text
link="#......" original color of links
alink="#......" color of active link
vlink="#......" color of visited links
Example: <body background="tree.jpg" bgcolor="#f9eedf" text="#000000" link="#700088" alink="#bb5533" vlink="#5577bb">
<hr> Horizontal Rule
size=... height (pixels or %)
width=... length (pixels of %)
align="..." left, right or center
Example: <hr size=3 width=150 align="center">
<p>...</p> Paragraph
align="..." left, right or center
Example: <p align="right">
<font>...</font> Font
face="..." name of font (and alternatives)
size=... size 1 to 7, or + - size
color="#......" color of text
Example: <font face="Verdana, Arial" size=+1 color="#883300">
<i>...</i> italic text
<b>...</b> bold text
<sup>...</sup> superscript
<sub>...</sub> subscript
<u>...</u> underline
<h6>...</h6> heading size
<!-...-> add invisible comments
<br> breaks line
nonbreaking space
<img> Image
src="..." address for acquiring
align="..." right, left, middle, top, bottom
alt="...." text shows when no image
border=.. border in pixels
height=.. height in pixels
width=.. width in pixels
hspace=.. horizontal clear space
vspace=.. vertical clear space
Example: <img src="tree.gif" height=80 width=50 hspace=8 alt="green tree" align="right" border=2>
For links to other pages:
<a href="address">...</a> shows a link
page.html address within same folder
http://domain.com/folder/page.html external address
The text in ... is the visible, colored stuff that you click.
Examples:
<a href="watering.html">How to do the Watering</a><br><br>
<a href="http://supermethod.com/gardens/watering.html">
Sam's method of doing it</a><br><hr>
For links on same page:
<a name="zz, top, etc.">...</a> names a location on page
<a href="#top">...</a> goes to it from same page
<a href="page.html#spotA">...</a> goes to it from different page
<a href="http://domain.com/page.html#spotW">...</a> goes to it from external site
For ..., surround something on the page at desired location, or add an invisible spot as at the desired location; and it fits into the ... slot.
Example:
<a href="#spot-b">horizontal rule</a><br>
(Click this, and then the back button.)
Name above horizontal rule:
<a name="spot-b">vlink="#5577bb"</a>
<table>....</table> Table
align="..." left, right or center
bgcolor="#......" background color
border=.. border in pixels
cellpadding=.. space around text in pixels
cellspacing=.. space between cells in pixels
width=.. width of table in pixels
Example: <table align="center" bgcolor="#ddeedd" border=2 cellpadding=5 width=350>
<td>...</td> Cell, takes precedent over row
<tr>...</tr> Row
align="..." left, right, center for text
valign="..." top, middle, bottom for text
bgcolor="#......" background color
width=.. width in pixels or %
height=.. height in pixels
colspan=.. number of columns to span
rowspan=.. number of rows to span
Example: <td valign="top" bgcolor="#eeddee" width=150 rowspan=3>
<ol>...</ol> Ordered List
<ul>...</ul> Unordered List
<dl>...</dl> Definition List
<dir>...</dir> Directory List
<menu>...</menu> Menu List
<li> Marks start of each item
Example:
- first duck
- second duck
- third duck
<ul>
<li> first duck
<li> second duck
<li> third duck
</ul>
<div>....</div> Division
align="..." left, right or center
Example: <div align="right">
HTML Coding