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">visible words describing the link</a> shows a link
page.html address within same folder
http://domain.com/folder/page.html external address
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 moving to a location on same page:
<a name="point3">motor</a> picks a word located on page and labels it
<a href="page2.html#point3">See motors on next page.</a> goes to it from same web site
<a href="http://domain.com/page2.html#point3">See Sam's description of motors.</a> goes to it from external site
You can go to an invisible spot as at the desired location. The location on the page might be:
Paragraph.<br>
<br>
Paragraph.</p>
<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">visible words describing the link</a> shows a link
page.html address within same folder
http://domain.com/folder/page.html external address
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 moving to a location on same page:
<a name="point3">motor</a> picks a word located on page and labels it
<a href="page2.html#point3">See motors on next page.</a> goes to it from same web site
<a href="http://domain.com/page2.html#point3">See Sam's description of motors.</a> goes to it from external site
You can go to an invisible spot as at the desired location. The location on the page might be:
Paragraph.<br>
<br>
Paragraph.</p>
Insert this between the paragraphs or wherever the invisible space is:
<a name="point4"> </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