It has long been my belief that HTML has been underutilzed as a vehicle for documents.
Here is an example of a “document” that can be created with HTML. This was written with the notepad.html file I had described earlier:
Click image for larger view
<!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Transitional//EN’ ‘
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd’>
<html xmlns=’
http://www.w3.org/1999/xhtml’>
<head profile=’
http://gmpg.org/xfn/11′>
<title>2 Page</title>
<style type=’text/css’>
body {margin-left:0;margin-right:0;font:normal normal normal 12px Arial; white-space: pre-wrap}
a{ text-decoration: }
:link { color: rgb(0, 0, 255) }
:visited {color :rgb(100, 0,100) }
:hover { }
:active { }
body {margin-left:0;margin-right:0;Â height: 1736pt}
#canvas{position: relative; width: 100%;; left:10%; top: -50pt;}
table{position: relative; width: 602pt; left: 50%; margin-left: -301pt;top: 450pt; border: 6px ridge; border-collapse: collapse; empty-cells: show}
td{position: relative; border: 6px ridge}
.letter{position:absolute;padding:10pt 36pt;width:612pt;height:828pt;left:50%; top: 10pt;background-color:#FAFADD;border-width:0;font:normal normal 400 10px cancunn; margin-left: -384pt; border: 1pt solid black; white-space: pre-wrap}.page2{position:absolute;padding:10pt 36pt;width:612pt;height:828pt;left:50%; top: 868pt;background-color:#FAFADD;border-width:0;font:normal normal normal 13pt Times New Roman; margin-left: -384pt; border: 1pt solid black; white-space: pre-wrap}
@font-face { font-family: ‘cancunn’;
src: url(‘cancunn-webfont.eot’);
src: url(‘cancunn-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘cancunn-webfont.woff’) format(‘woff’),
url(‘cancunn-webfont.ttf’) format(‘truetype’),
url(‘cancunn-webfont.svg#cancunn’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
@font-face { font-family: ‘snellk’;
src: url(‘snellk-webfont.eot’);
src: url(‘snellk-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘snellk-webfont.woff’) format(‘woff’),
url(‘snellk-webfont.ttf’) format(‘truetype’),
url(‘snellk-webfont.svg#snellk’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
.s1{font:normal normal 800 20px snellk}
.s2{font:italic normal 800 16px Times New Roman; color: red}
svg{position: absolute; width: 98%; height: 200pt; top: 0; left: 1%; background: #EEFFF8}
</style><script type=”text/JavaScript” src=”jsDraw2D.js”></script>
<script type=”text/JavaScript”>
var str = “”; var str2=””;
var i = 0;
function draw() {var gr = new jsGraphics(document.getElementById(“canvas”));
points = new Array(new jsPoint(65,656), new jsPoint(60,595), new jsPoint(65,532), new jsPoint(67,450), new jsPoint(83,375), new jsPoint(92,335), new jsPoint(104,291), new jsPoint(117,241), new jsPoint(135,189), new jsPoint(158,159), new jsPoint(186,112), new jsPoint(227,76), new jsPoint(261,59), new jsPoint(293,58), new jsPoint(345,53), new jsPoint(391,62), new jsPoint(433,77), new jsPoint(470,98), new jsPoint(509,152), new jsPoint(529,200), new jsPoint(556,330), new jsPoint(551,383), new jsPoint(537,420), new jsPoint(522,444), new jsPoint(493,489), new jsPoint(487,537), new jsPoint(502,583), new jsPoint(545,626), new jsPoint(563,661), new jsPoint(563,661));
gr.fillClosedCurve(new jsColor(“#553311”), points);points2 = new Array(new jsPoint(282,661), new jsPoint(259,588), new jsPoint(218,552), new jsPoint(183,465), new jsPoint(172,415), new jsPoint(163,374), new jsPoint(181,347), new jsPoint(183,291), new jsPoint(217,246), new jsPoint(267,214), new jsPoint(332,204), new jsPoint(381,211), new jsPoint(428,240), new jsPoint(461,285), new jsPoint(493,320), new jsPoint(506,346), new jsPoint(524,319), new jsPoint(538,311), new jsPoint(550,328), new jsPoint(545,362), new jsPoint(543,389), new jsPoint(525,433), new jsPoint(509,438), new jsPoint(494,438), new jsPoint(493,487), new jsPoint(489,521), new jsPoint(488,552), new jsPoint(505,587), new jsPoint(544,623), new jsPoint(561,667));
gr.fillClosedCurve(new jsColor(“#FFEECC”), points2);points3 = new Array(new jsPoint(251,579), new jsPoint(278,602), new jsPoint(301,620), new jsPoint(324,630), new jsPoint(345,631), new jsPoint(370,625), new jsPoint(385,621), new jsPoint(401,613), new jsPoint(414,603), new jsPoint(427,592), new jsPoint(445,580), new jsPoint(455,570), new jsPoint(466,560), new jsPoint(473,547), new jsPoint(479,534), new jsPoint(483,524), new jsPoint(489,505), new jsPoint(492,491), new jsPoint(493,482), new jsPoint(493,474));
gr.drawCurve(new jsPen( new jsColor(“black”),2), points3);
points4 = new Array(new jsPoint(280,537), new jsPoint(300,537), new jsPoint(319,537), new jsPoint(335,537), new jsPoint(348,536), new jsPoint(361,534), new jsPoint(375,534), new jsPoint(397,529), new jsPoint(394,543), new jsPoint(385,550), new jsPoint(377,558), new jsPoint(370,563), new jsPoint(362,569), new jsPoint(350,572), new jsPoint(338,574), new jsPoint(328,571), new jsPoint(316,570), new jsPoint(307,565), new jsPoint(299,561), new jsPoint(285,555));
gr.fillClosedCurve(new jsColor(“#FF5599”), points4);
gr.drawCurve(new jsPen( new jsColor(“#DD3366”),2), points4);
points5 = new Array(new jsPoint(310,548), new jsPoint(310,548), new jsPoint(337,547), new jsPoint(360,545), new jsPoint(360,549), new jsPoint(346,554), new jsPoint(341,554), new jsPoint(332,556), new jsPoint(310,548), new jsPoint(310,548));
gr.fillClosedCurve(new jsColor(“#EEEEEE”), points5);
points6 = new Array(new jsPoint(350,375), new jsPoint(342,414), new jsPoint(351,446), new jsPoint(365,464), new jsPoint(367,485), new jsPoint(358,501), new jsPoint(341,502), new jsPoint(322,502), new jsPoint(308,503), new jsPoint(293,491), new jsPoint(293,475), new jsPoint(300,463), new jsPoint(305,447), new jsPoint(308,435), new jsPoint(306,405), new jsPoint(303,400), new jsPoint(298,392), new jsPoint(295,383));
gr.drawCurve(new jsPen( new jsColor(“#996633”),2), points6);
points7 = new Array(new jsPoint(359,384), new jsPoint(376,376), new jsPoint(392,373), new jsPoint(406,373), new jsPoint(420,374), new jsPoint(437,379), new jsPoint(436,393), new jsPoint(427,399), new jsPoint(417,406), new jsPoint(406,407), new jsPoint(374,403), new jsPoint(374,403));
gr.fillClosedCurve(new jsColor(“#EEEEEE”), points7);
gr.drawClosedCurve(new jsPen( new jsColor(“#333333”),2), points7);
points8 = new Array(new jsPoint(212,406), new jsPoint(212,406), new jsPoint(238,389), new jsPoint(249,388), new jsPoint(266,389), new jsPoint(280,393), new jsPoint(285,404), new jsPoint(272,420), new jsPoint(262,422), new jsPoint(248,423), new jsPoint(227,419), new jsPoint(227,419));
gr.fillClosedCurve(new jsColor(“#EEEEEE”), points8);
gr.drawClosedCurve(new jsPen( new jsColor(“#333333”),2), points8);
points9 = new Array(new jsPoint(502,437), new jsPoint(496,432), new jsPoint(499,416), new jsPoint(500,400), new jsPoint(507,371), new jsPoint(508,360), new jsPoint(505,345));
gr.drawCurve(new jsPen( new jsColor(“black”),2), points9);
gr.fillCircle(new jsColor(“#AAAAFF”),new jsPoint(250,406) , 16);
gr.fillCircle(new jsColor(“#AAAAFF”),new jsPoint(398,390) , 16);
gr.fillCircle(new jsColor(“black”),new jsPoint(250,406) , 5);
gr.fillCircle(new jsColor(“black”),new jsPoint(398,390) , 5);
points10 = new Array(new jsPoint(351,364), new jsPoint(372,359), new jsPoint(395,355), new jsPoint(417,352), new jsPoint(436,353), new jsPoint(452,361), new jsPoint(442,362), new jsPoint(428,362), new jsPoint(415,366), new jsPoint(401,369), new jsPoint(383,372), new jsPoint(364,372));
gr.fillClosedCurve(new jsColor(“#553311”), points10);
points11 = new Array(new jsPoint(189,388), new jsPoint(197,383), new jsPoint(212,375), new jsPoint(238,372), new jsPoint(265,372), new jsPoint(290,380), new jsPoint(282,386), new jsPoint(267,384), new jsPoint(251,384), new jsPoint(237,384), new jsPoint(222,383), new jsPoint(207,387));
gr.fillClosedCurve(new jsColor(“#553311”), points11);
points12 = new Array(new jsPoint(522,352), new jsPoint(528,334), new jsPoint(538,321), new jsPoint(539,340), new jsPoint(537,363), new jsPoint(528,389), new jsPoint(523,418), new jsPoint(507,430), new jsPoint(510,415), new jsPoint(515,387));
gr.drawClosedCurve(new jsPen( new jsColor(“black”),2), points12);
}
</script>
</head>
<body onload=’draw();’>
<div class=”letter”>
<center><span style=”font-size: 19px;” >Antioxidents</span></center>
<span style=”background: #EFFF08;” >Antioxidents</span> are chemicals that prevent harmful effects of <i><u><span style=”background: #99CCFF ;” >free-radicals</span>, highly reactive transient chemicals</u></i>. Therefore I shall begin with a brief description of free-radicals. Most atoms in molecules are joined by what is known as a <span class=”s2″> covalent bond, a bond in which each atom contributes one electron and they share the paired electrons as a bond</span>. If enough energy is supplied, the necessary amount varying according to the strength of the bond, the bond can be cleaved. If one atom gets both electrons, there is ionization; if each gets one atom, there is free-radical formation. Although some free-radicals can be stabilized, and stable free-radicals can be purchased, <span class=”s2″>in most cases they are highly reactive and stabilize themselves often by extracting an atom from another molecule, leading to the formation of a new free-radical</span>. Often these secondary free-radicals are molecules of <span class=”s2″> DNA or Protein</span>, leading to genetic problems and tissue damage.
The problem largely arises from the use of <span style=”background: #FF8888″>Oxygen</span>, which is in actuality a diradical. <span style=”background: #FF8888″>Oxygen</span> can react with unsaturated bonds, such as those in fatty acids to form <span class=”s2″> Peroxides</span>, chemicals containing an O-O bond. <span class=”s2″>The Oxygen-Oxygen bond is weak and can be cleaved to form two reactive free-radicals</span>.
Many of the free-radical fighting agents are naturally made. These are either enzymes, or other biochemicals that are generally prepared by enzymes. Often these enzymes depend on essential nutrients as cofactors for their function. One such enzyme is <span class=”s1″> superoxide dismutase</span> , which contains <span style=”background: #FFCC99Â ;” >Copper</span> and <span style=”background: #BBBBBBÂ ;” >Zinc</span>. <span class=”s1″> Superoxide dismutase</span> converts the superoxide anion to water and hydrogen peroxide. The hydrogen peroxide is then neutralized by an enzyme called <span class=”s1″> catalase</span>, which contains <span style=”background: #AA7755″>Iron</span>. Another set of enzymes are the <span class=”s1″> Peroxidases</span>. Most <span class=”s1″> Peroxidases</span> contain <span class=”s2″> Heme</span>, the <span style=”background: #AA7755″>Iron</span> containing substrate that is also found in <span class=”s2″>Hemoglobin and Myoglobin</span>. Indeed, <span class=”s2″>Hemoglobin has Peroxidase activity</span>, which is exploited in its forensic determination. Another important <span class=”s1″> Peroxidase</span>, <span class=”s1″a> glutathione peroxidase</span> contains <span class=”s2″>Selenium</span>. Another endogenous (formed from within) antioxidant is <span class=”s2″>Uric Acid, a byproduct of the breakdown of the Purine parts of Nucleic Acids</span>. A key enzyme in the formation of Uric Acid, <span class=”s1″> xanthine oxidase</span>, is derived from <span class=”s2″>Molybdenum</span>, <span style=”background: #AA7755″>Iron</span> and <span class=”s2″>Riboflavin</span>.
Exogenous (from outside) antioxidants fall into mostly two categories, <span class=”s2″>the Phenols, including the Polyphenols, and the Carotenoids</span>, which are highly unsaturated long chain molecules, where the unsaturation is said to be conjugated. Vitamin C is an Enol, which although not a Phenol, is chemically related. There are also <span style=”background: #FFFF00″> Sulfur</span> containing antioxidants.
<span class=”s2″>Phenols</span> scavenge free-radicals by neutralizing them and forming in the process, intermediates known as <span class=”s2″> Semiquinones</span>, which are themselves free-radicals, but which are relatively stable and generally not reactive enough to react further with DNA and Proteins. The best known phenolic antioxidant is Vitamin E. The Polyphenols are plant pigments of which perhaps the best known is <span class=”s2″> Quercetin</span>.
The best known Carotenoid is <span class=”s2″> Beta Carotene</span>, responsible for the color of carrots and many similarly colored fruits and vegetables. Another known one is <span class=”s2″> Lycopene</span>, which gives the tomato its red color. Carotenoids scavenge free-radicals by forming relatively stable conjugated allylic free-radicals, again, not reactive enough to form harmful products.
<span style=”background: #FFFF00″> Sulfur</span> antioxidents are substances such as <span class=”s2″> N-acetylcysteine</span>, a derivative of a non-essential amino acid. Also, <span class=”s2″> Lipoic Acid</span>, a non-essential biochemical used in bioreactions involving <span class=”s2″> Thiamin</span>, in larger quantities can function as an antioxident.
</div>
<div class=”page2″>
<div id=’canvas’></div>
<table>
<tr>
<td style=”height: 200pt; width: 50%”><svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″ >
<ellipse cx=”50%” cy=”50% ” rx=”25%” ry=”25%” style=”fill: #FFFF66; stroke-width: 3pt; stroke: yellow” >
</svg>
</td><td>
This cell will have some multiline text
This will be the second line
and a third line
and a fourth line
and a fifth line
and a sixth line
and a seventh line
</td>
</tr>
<tr>
<td>
This cell will also have multiline text
This will be the second line
and a third line
and a fourth line
and a fifth line
and a sixth line
and a seventh line
</td><td> </td>
</tr>
</table>
</div>
</body>
</html>
This file was designed to have the page appearance of a word processor.
The first page has formatted text. Included is different highlighting for different words and different fonts, colors, sizes and weights. Indeed, embedded are two fonts not normally found that can be viewed as written.
The text formatting was done by means of the <span> tag. To cut down on repetition, the <span> for frequent formatting was made into a class and could be referred to by its ID every time:
.s2{font:italic normal 800 16px Times New Roman; color: red}
<span class=”s2″>Hemoglobin and Myoglobin</span>
Not everyone has the ability to read word processor formats without downloading software. HTML can be read with any device having a browser, inclucing mobile devices.
HTML is able to embed exotic fonts so they can be viewed as written, without substitution of a generic font
Essentially anything done with a word processor can be duplicated with HTML, inclucing formatting, graphics, images, hyperlinks, tables, spreadsheets (see the previous post), extruded text (see the previous post), and with PHP, files can be manipulated. In addition to tables, divsions can be created to separate various parts of a page as different frames.
Tips & Tricks 